diff --git a/package-lock.json b/package-lock.json
index 5106d308..1289ff8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,6 @@
 				"@vincjo/datatables": "^2.8.0",
 				"apexcharts": "^3.44.2",
 				"axios": "^1.6.2",
-				"bootstrap": "^5.3.2",
 				"chart.js": "^4.4.0",
 				"drawflow": "^0.0.59",
 				"flatpickr": "^4.6.13",
@@ -2458,25 +2457,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/bootstrap": {
-			"version": "5.3.8",
-			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
-			"integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
-			"funding": [
-				{
-					"type": "github",
-					"url": "https://github.com/sponsors/twbs"
-				},
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/bootstrap"
-				}
-			],
-			"license": "MIT",
-			"peerDependencies": {
-				"@popperjs/core": "^2.11.8"
-			}
-		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.12",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
diff --git a/package.json b/package.json
index bca68991..43e7d302 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,6 @@
 		"@vincjo/datatables": "^2.8.0",
 		"apexcharts": "^3.44.2",
 		"axios": "^1.6.2",
-		"bootstrap": "^5.3.2",
 		"chart.js": "^4.4.0",
 		"drawflow": "^0.0.59",
 		"flatpickr": "^4.6.13",
diff --git a/src/app.css b/src/app.css
index 3d552a61..002c5080 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,2 +1,40 @@
 @import "tailwindcss";
 
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+@theme {
+    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
+
+    /* Brand colors (overridable at runtime via PUBLIC_PRIMARY_COLOR / PUBLIC_SECONDARY_COLOR) */
+    --color-primary: #6f42c1;
+    --color-primary-hover: color-mix(in srgb, var(--color-primary), black 20%);
+    --color-secondary: #74788d;
+    --color-secondary-hover: color-mix(in srgb, var(--color-secondary), black 20%);
+
+    /* Semantic state colors (matched to original Skote palette) */
+    --color-success: #34c38f;
+    --color-info: #50a5f1;
+    --color-warning: #f1b44c;
+    --color-danger: #f46a6a;
+
+    /* Neutrals */
+    --color-light: #eff2f7;
+    --color-dark: #343a40;
+    --color-muted: #74788d;
+
+    /* Layout dimensions */
+    --header-height: 70px;
+    --sidebar-width: 250px;
+    --sidebar-collapsed-width: 70px;
+    --footer-height: 60px;
+    --rightbar-width: 280px;
+
+    /* Sidebar palette (light theme) */
+    --sidebar-bg: #ffffff;
+    --sidebar-menu-item-color: #545a6d;
+    --sidebar-menu-item-icon-color: #7f8387;
+    --sidebar-menu-item-hover-color: #383c40;
+    --sidebar-menu-title-color: #7f8387;
+}
+
diff --git a/src/lib/common/audio-player/AudioPlayer.svelte b/src/lib/common/audio-player/AudioPlayer.svelte
index eeef2199..0408a049 100644
--- a/src/lib/common/audio-player/AudioPlayer.svelte
+++ b/src/lib/common/audio-player/AudioPlayer.svelte
@@ -161,7 +161,7 @@
     player.addEventListener("loadedmetadata", () => {
       $duration = player.duration;
     });
-    
+
     player.addEventListener("error", () => {
       console.warn("An audio error has occurred, player will skip forward in 2 seconds.");
       if ($audioList.length > 1) {
@@ -230,6 +230,22 @@
     }
   });
 
+  // Bootstrap playerListHeight whenever the list is shown.
+  // The original transitionend listener in onMount only updates the height
+  // after a real height transition runs — but with playerListHeight=0
+  // initially, the very first toggle goes 0 → 0 and no transition fires,
+  // so the list would stay invisible forever. Read scrollHeight directly
+  // here; it reports the natural content height even while overflow is
+  // clipped and the visible height is 0.
+  $effect(() => {
+    // Reading $audioList here registers it as a dependency so the height
+    // also recomputes when the playlist contents change (e.g. tracks
+    // added or removed after mount), not just on isShowList flips.
+    if (isShowList && playListElement && $audioList.length > 0) {
+      playerListHeight = Math.min(playListElement.scrollHeight, listMaxHeight);
+    }
+  });
+
   const play = () => {
     if (mutex) {
       stopAll();
@@ -514,4 +530,329 @@
       </ol>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    /* ===== Audio player =====
+       Self-contained port of the legacy `_audio.scss` rules into a scoped
+       Svelte <style>. Replaces the SCSS bundle entries dropped in the
+       Tailwind v4 migration. Class names on every targeted node are
+       static and live in this component's template, so Svelte's scoper
+       handles them without :global(). Theme accent is supplied at
+       runtime via the inline `--theme-color` CSS variable (see the
+       $effect block in <script>). */
+
+    .aplayer {
+        --base-font-size: 12px;
+        --aplayer-height: calc(var(--base-font-size) * 5.5);
+        --theme-color: #fadfa3;
+        position: relative;
+        background: #fff;
+        box-shadow:
+            0 2px 2px 0 rgb(0 0 0 / 0.07),
+            0 1px 5px 0 rgb(0 0 0 / 0.1);
+        font-family: Arial, Helvetica, sans-serif;
+        overflow: hidden;
+        border-radius: 4px;
+        user-select: none;
+        line-height: normal;
+    }
+    .aplayer :global(svg) {
+        width: 100%;
+        height: 100%;
+    }
+    .aplayer :global(svg path) {
+        fill: #fff;
+    }
+
+    /* ----- Icons (volume / order / loop / menu) ----- */
+    .aplayer-icon {
+        width: calc(var(--base-font-size) + 3px);
+        height: calc(var(--base-font-size) + 3px);
+        border: none;
+        background-color: transparent;
+        outline: none;
+        cursor: pointer;
+        opacity: 0.8;
+        vertical-align: middle;
+        padding: 0;
+        font-size: var(--base-font-size);
+        margin: 0;
+        display: inline-block;
+        transition: opacity 0.15s ease;
+    }
+    .aplayer-icon:hover {
+        opacity: 1;
+    }
+    .aplayer-icon :global(path) {
+        transition: fill 0.2s ease-in-out;
+    }
+
+    /* ----- Cover / play-pause button ----- */
+    .aplayer-pic {
+        position: relative;
+        float: left;
+        height: var(--aplayer-height);
+        width: var(--aplayer-height);
+        background-color: antiquewhite;
+        background-size: cover;
+        background-position: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: filter 0.3s ease;
+        cursor: pointer;
+    }
+    .aplayer-pic:hover .aplayer-button {
+        opacity: 1;
+    }
+    .aplayer-button {
+        position: absolute;
+        border-radius: 50%;
+        opacity: 0.8;
+        text-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
+        box-shadow: 0 1px 1px rgb(0 0 0 / 0.2);
+        background: rgb(0 0 0 / 0.35);
+        transition: opacity 0.15s ease, background-color 0.15s ease;
+    }
+    .aplayer-play,
+    .aplayer-pause {
+        width: 26px;
+        height: 26px;
+    }
+    .aplayer-play :global(svg),
+    .aplayer-pause :global(svg) {
+        position: absolute;
+        top: 3px;
+        left: 4px;
+        height: 20px;
+        width: 20px;
+    }
+
+    /* ----- Info panel (title / artist / controller) ----- */
+    .aplayer-info {
+        margin-left: var(--aplayer-height);
+        height: var(--aplayer-height);
+        padding: 14px 7px 0 10px;
+        box-sizing: border-box;
+    }
+    .aplayer-music {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        user-select: text;
+        margin: 0 0 calc(var(--base-font-size) + 1px) 5px;
+        padding-bottom: 2px;
+        cursor: default;
+    }
+    .aplayer-title {
+        font-size: calc(var(--base-font-size) + 2px);
+        color: #333;
+    }
+    .aplayer-artist {
+        font-size: var(--base-font-size);
+        color: #666;
+    }
+
+    .aplayer-controller {
+        display: flex;
+        position: relative;
+        align-items: center;
+    }
+
+    /* ----- Progress bar ----- */
+    .aplayer-bar-wrap {
+        flex: 1;
+        margin: 0 0 0 5px;
+        padding: 4px 0;
+        cursor: pointer !important;
+    }
+    .aplayer-bar-wrap:hover .aplayer-bar .aplayer-played .aplayer-thumb {
+        transform: scale(1);
+    }
+    .aplayer-bar {
+        position: relative;
+        height: 2px;
+        width: 100%;
+        background: #cdcdcd;
+    }
+    .aplayer-loaded {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background: #aaa;
+        height: 2px;
+        transition: width 0.5s ease;
+    }
+    .aplayer-played {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        height: 2px;
+        background: var(--theme-color) none repeat scroll 0 0;
+    }
+    .aplayer-thumb {
+        position: absolute;
+        top: 0;
+        right: 5px;
+        margin-top: -4px;
+        margin-right: -10px;
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: transform 0.2s ease-in-out;
+        background: var(--theme-color) none repeat scroll 0 0;
+        transform: scale(0);
+    }
+    .aplayer-loading-icon :global(svg) {
+        display: block;
+        position: absolute;
+        animation: aplayer-rotate 1s linear infinite;
+    }
+
+    /* ----- Time + control cluster ----- */
+    .aplayer-time {
+        position: relative;
+        right: 0;
+        bottom: 4px;
+        height: calc(var(--base-font-size) + 5px);
+        color: #999;
+        font-size: 11px;
+        padding-left: 7px;
+    }
+    .aplayer-time-inner {
+        vertical-align: middle;
+    }
+    .aplayer-time .aplayer-icon {
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+    }
+    .aplayer-time .aplayer-icon :global(path) {
+        fill: #666;
+    }
+
+    /* ----- Volume slider ----- */
+    .aplayer-volume-wrap {
+        display: inline-block;
+        position: relative;
+        margin-left: 3px;
+        cursor: pointer;
+    }
+    .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
+        height: 40px;
+    }
+    .aplayer-volume-bar-wrap {
+        position: absolute;
+        bottom: 15px;
+        right: -3px;
+        width: 25px;
+        height: 0;
+        z-index: 99;
+        overflow: hidden;
+        transition: height 0.2s ease-in-out;
+    }
+    .aplayer-volume-bar {
+        position: absolute;
+        bottom: 0;
+        right: 10px;
+        width: 5px;
+        height: 35px;
+        background: #aaa;
+        border-radius: 2.5px;
+        overflow: hidden;
+    }
+    .aplayer-volume {
+        background: var(--theme-color) none repeat scroll 0 0;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 5px;
+        transition: height 0.1s ease;
+    }
+
+    /* ----- Playlist ----- */
+    .aplayer-list {
+        scrollbar-width: none;
+        transition: height 0.3s ease;
+        will-change: height;
+        display: none;
+        overflow: hidden;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+    }
+    .aplayer-list::-webkit-scrollbar {
+        display: none;
+    }
+    .aplayer-list ol {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+    }
+    .aplayer-list li {
+        position: relative;
+        text-align: left;
+        height: calc((var(--base-font-size) + 4px) * 2);
+        line-height: 32px;
+        padding: 0 15px;
+        font-size: var(--base-font-size);
+        border-top: 1px solid #e9e9e9;
+        cursor: pointer;
+        transition: background-color 0.15s ease;
+        overflow: hidden;
+        margin: 0;
+        color: #333;
+    }
+    .aplayer-list li:first-child {
+        border-top: none;
+    }
+    .aplayer-list li:hover {
+        background: #efefef;
+    }
+    .aplayer-list-cur {
+        width: 3px;
+        height: calc((var(--base-font-size) + 4px) * 2 - 10px);
+        position: absolute;
+        left: 0;
+        top: 5px;
+        cursor: pointer;
+        background-color: var(--theme-color);
+    }
+    .aplayer-list-index {
+        color: #666;
+        margin-right: 12px;
+        cursor: pointer;
+    }
+    .aplayer-list-artist {
+        color: #666;
+        float: right;
+        cursor: pointer;
+    }
+
+    /* ----- Layout variants (with-list / narrow) ----- */
+    .aplayer.aplayer-withlist .aplayer-list {
+        display: block;
+    }
+    .aplayer.aplayer-narrow {
+        width: var(--aplayer-height);
+    }
+    .aplayer.aplayer-narrow .aplayer-info,
+    .aplayer.aplayer-narrow .aplayer-list {
+        display: none;
+    }
+    .aplayer.aplayer-narrow .aplayer-pic,
+    .aplayer.aplayer-narrow .aplayer-body {
+        height: var(--aplayer-height);
+        width: var(--aplayer-height);
+    }
+
+    @keyframes aplayer-rotate {
+        0% { transform: rotate(0); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
diff --git a/src/lib/common/audio-player/AudioSpeaker.svelte b/src/lib/common/audio-player/AudioSpeaker.svelte
index 48e4c0db..038ec424 100644
--- a/src/lib/common/audio-player/AudioSpeaker.svelte
+++ b/src/lib/common/audio-player/AudioSpeaker.svelte
@@ -87,15 +87,17 @@
   class="{disableDefaultStyles ? '' : 'chat-speaker-container'} line-align-center {containerClasses}"
   style={`${containerStyles}`}
 >
-  <div on:click={() => speak()}>
+  <div class="inline-flex items-center cursor-pointer" on:click={() => speak()}>
     {#if !speaking}
-      <i 
-        class="bx bx-volume-full clickable"
+      <i
+        class="bx bx-volume-full"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
-        title="Play"></i>
+        title="Play"
+      >
+      </i>
     {:else}
-      <Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
+      <Stretch unit='px' size='2' gap='2' color="var(--color-primary)" />
     {/if}
   </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/common/audio-player/MessageAudioPlayer.svelte b/src/lib/common/audio-player/MessageAudioPlayer.svelte
index 7fb98821..91c65ee1 100644
--- a/src/lib/common/audio-player/MessageAudioPlayer.svelte
+++ b/src/lib/common/audio-player/MessageAudioPlayer.svelte
@@ -111,7 +111,7 @@
     {#if !speaking}
       <i class="bx bx-volume-full"></i>
     {:else}
-      <Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
+      <Stretch unit='px' size='5' gap='5' color="var(--color-primary)" />
     {/if}
   </span>
 </div>
\ No newline at end of file
diff --git a/src/lib/common/dropdowns/FullScreenDropdown.svelte b/src/lib/common/dropdowns/FullScreenDropdown.svelte
index 138a11af..bd7ba062 100644
--- a/src/lib/common/dropdowns/FullScreenDropdown.svelte
+++ b/src/lib/common/dropdowns/FullScreenDropdown.svelte
@@ -42,8 +42,12 @@
 	}
 </script>
 
-<div class="dropdown d-none d-lg-inline-block ms-1">
-	<button onclick={toggleFullscreen} class="btn header-item noti-icon waves-effect" aria-label="Toggle fullscreen">
-		<i class={isFullScreenMode ? 'bx bx-fullscreen fs-22' : 'bx bx-exit-fullscreen fs-22'}></i>
+<div class="ms-1 hidden lg:inline-block">
+	<button
+		onclick={toggleFullscreen}
+		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+		aria-label="Toggle fullscreen"
+	>
+		<i class={isFullScreenMode ? 'bx bx-fullscreen text-[22px]' : 'bx bx-exit-fullscreen text-[22px]'}></i>
 	</button>
 </div>
diff --git a/src/lib/common/dropdowns/LanguageDropdown.svelte b/src/lib/common/dropdowns/LanguageDropdown.svelte
index b89362b0..1bfc99ca 100644
--- a/src/lib/common/dropdowns/LanguageDropdown.svelte
+++ b/src/lib/common/dropdowns/LanguageDropdown.svelte
@@ -32,42 +32,40 @@
 </script>
 
 <div
-	class="dropdown d-inline-block"
+	class="relative inline-block"
 	use:clickoutsideDirective
 	onclickoutside={handleClickOutside}
 >
 	<button
 		type="button"
-		class="btn header-item"
+		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		aria-label="Select language"
 		onclick={() => (isOpen = !isOpen)}
 	>
 		<img
 			src={languages.find(lang => lang.value === selectedLang)?.flag || 'images/flags/us.jpg'}
 			alt="Language"
-			height="16"
-			style="max-height: 16px; width: auto;"
+			class="h-4 w-auto"
 		/>
 	</button>
-	<div class="dropdown-menu language-switch dropdown-menu-end" class:show={isOpen}>
-		{#each languages as language}
-			<button
-				type="button"
-				class={`dropdown-item notify-item language ${
-					selectedLang === language.value ? "active" : "none"
-				}`}
-				onclick={() => handleLocaleChange(language.value)}
-			>
-				<img
-					src={language.flag}
-					alt="Samply"
-					class="me-2"
-					height="12"
-				/>
-				<span class="align-middle">
-					{language.label}
-				</span>
-			</button>
-		{/each}
-	</div>
+	{#if isOpen}
+		<div class="absolute right-0 top-full z-[1000] mt-1 w-40 rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+			{#each languages as language}
+				<button
+					type="button"
+					class={`flex w-full items-center px-4 py-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 ${
+						selectedLang === language.value
+							? 'bg-gray-50 text-primary dark:bg-gray-700'
+							: 'text-gray-700 dark:text-gray-200'
+					}`}
+					onclick={() => handleLocaleChange(language.value)}
+				>
+					<img src={language.flag} alt={language.label} class="me-2 h-3 w-auto" />
+					<span class="align-middle">
+						{language.label}
+					</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/common/dropdowns/NotificationDropdown.svelte b/src/lib/common/dropdowns/NotificationDropdown.svelte
index dc56a668..ffa9cd03 100644
--- a/src/lib/common/dropdowns/NotificationDropdown.svelte
+++ b/src/lib/common/dropdowns/NotificationDropdown.svelte
@@ -1,24 +1,9 @@
 <script>
-	import { onMount } from 'svelte';
-	import "overlayscrollbars/overlayscrollbars.css";
-	import { OverlayScrollbars } from "overlayscrollbars";
 	import { _ } from 'svelte-i18n';
 	import { clickoutsideDirective } from '$lib/helpers/directives';
 
 	let isOpen = $state(false);
 
-	const options = {
-		scrollbars: {
-			visibility: "auto",
-			autoHide: "move",
-			autoHideDelay: 100,
-			dragScroll: true,
-			clickScroll: false,
-			theme: "os-theme-light",
-			pointers: ["mouse", "touch", "pen"],
-		},
-	};
-
 	/** @param {any} e */
 	function handleClickOutside(e) {
 		const curNode = e.detail.currentNode;
@@ -27,58 +12,50 @@
 			isOpen = false;
 		}
 	}
-
-	onMount(() => {
-		const menuElement = document.querySelector("#notification");
-		// @ts-ignore
-		OverlayScrollbars(menuElement, options);
-	});
 </script>
 
 <div
-	class="dropdown d-none d-lg-inline-block"
+	class="relative hidden lg:inline-block"
 	use:clickoutsideDirective
 	onclickoutside={handleClickOutside}
 >
 	<button
 		type="button"
-		class="btn header-item noti-icon waves-effect"
+		class="relative inline-flex h-[var(--header-height)] items-center px-3 text-[22px] text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		aria-label="Notifications"
 		onclick={() => (isOpen = !isOpen)}
 	>
 		<i class="bx bx-bell bx-tada"></i>
-		<span class="badge bg-danger rounded-pill">1</span>
+		<span class="absolute right-2 top-3 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-danger px-1 text-[10px] font-medium text-white">1</span>
 	</button>
-	<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" class:show={isOpen}>
-		<div class="p-3">
-			<div class="row align-items-center">
-				<div class="col">
-					<h6 class="m-0">{$_('Notifications')}</h6>
-				</div>
-				<div class="col-auto">
-					<span class="small text-muted">{$_('View All')}</span>
+	{#if isOpen}
+		<div class="absolute right-0 top-full z-[1000] mt-1 w-80 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
+			<div class="p-3">
+				<div class="flex items-center">
+					<h6 class="m-0 text-sm font-semibold text-dark dark:text-gray-100">{$_('Notifications')}</h6>
+					<span class="ms-auto text-xs text-muted">{$_('View All')}</span>
 				</div>
 			</div>
-		</div>
-		<div style="max-height: 230px;" id="notification">
-			<div class="text-reset notification-item d-block p-2">
-				<div class="d-flex">
-					<div class="avatar-xs me-3">
-						<span class="avatar-title bg-primary rounded-circle font-size-16">
-							<i class="bx bx-cart"></i>
-						</span>
-					</div>
-					<div class="flex-grow-1">
-						<h6 class="mb-1">{$_('Your order is placed')}</h6>
-						<div class="font-size-12 text-muted">
-							<p class="mb-1">{$_('If several languages coalesce the grammar')}</p>
-							<p class="mb-0">
-								<i class="mdi mdi-clock-outline"></i> <span>3 {$_('min ago')}</span>
-							</p>
+			<div class="max-h-[230px] overflow-y-auto" id="notification">
+				<div class="p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700">
+					<div class="flex p-2">
+						<div class="me-3 shrink-0">
+							<span class="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
+								<i class="bx bx-cart text-base"></i>
+							</span>
+						</div>
+						<div class="grow">
+							<h6 class="mb-1 text-sm font-semibold text-dark dark:text-gray-100">{$_('Your order is placed')}</h6>
+							<div class="text-xs text-muted">
+								<p class="mb-1">{$_('If several languages coalesce the grammar')}</p>
+								<p class="mb-0">
+									<i class="mdi mdi-clock-outline"></i> <span>3 {$_('min ago')}</span>
+								</p>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
 </div>
diff --git a/src/lib/common/dropdowns/ProfileDropdown.svelte b/src/lib/common/dropdowns/ProfileDropdown.svelte
index 5778aa17..fac39295 100644
--- a/src/lib/common/dropdowns/ProfileDropdown.svelte
+++ b/src/lib/common/dropdowns/ProfileDropdown.svelte
@@ -45,45 +45,54 @@
 </script>
 
 <div
-	class="dropdown d-inline-block"
+	class="relative inline-block"
 	use:clickoutsideDirective
 	onclickoutside={handleClickOutside}
 >
 	<button
 		type="button"
-		class="btn header-item waves-effect d-inline-flex align-items-center"
+		class="inline-flex h-[var(--header-height)] items-center px-3 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 		id="page-header-user-dropdown"
 		aria-label="User menu"
 		onclick={() => (isOpen = !isOpen)}
 	>
 		<img
-			class="rounded-circle header-profile-user"
+			class="h-9 w-9 rounded-full bg-gray-100 p-[3px] dark:bg-gray-700"
 			src={`${user?.avatar && $userStore?.token ?
 				`${buildUrl(PUBLIC_SERVICE_URL, user?.avatar)}?access_token=${$userStore?.token}` : ''}`}
 			alt=""
 			onerror={handleAvatarLoad}
 		/>
-		<span class="d-none d-xl-inline-block ms-1">{user?.full_name}</span>
-		<i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
+		<span class="ms-1 hidden xl:inline-block">{user?.full_name}</span>
+		<i class="mdi mdi-chevron-down ms-1 hidden xl:inline-block"></i>
 	</button>
-	<div class="dropdown-menu dropdown-menu-end" class:show={isOpen}>
-		<!-- item-->
-		<a class="dropdown-item" href="page/user/me">
-			<i class="bx bx-user font-size-16 align-middle me-1"></i>
-			<span>{$_('Profile')}</span>
-		</a>
-		<button type="button" class="dropdown-item" disabled>
-			<span class="badge bg-success float-end">11</span>
-			<i class="bx bx-wrench font-size-16 align-middle me-1"></i>
-			<span>{$_('Settings')}</span>
-		</button>
-		<div class="dropdown-divider"></div>
-		<button
-			type="button"
-			class="dropdown-item"
-			onclick={() => logout()}
-		>
-			<i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> <span>{$_('Logout')}</span>
-		</button>
-	</div>
+	{#if isOpen}
+		<div class="absolute right-0 top-full z-[1000] mt-1 w-44 rounded-md border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+			<a
+				class="flex items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+				href="page/user/me"
+			>
+				<i class="bx bx-user me-2 align-middle text-base"></i>
+				<span>{$_('Profile')}</span>
+			</a>
+			<button
+				type="button"
+				class="flex w-full items-center px-4 py-2 text-sm text-gray-400 disabled:cursor-not-allowed dark:text-gray-500"
+				disabled
+			>
+				<i class="bx bx-wrench me-2 align-middle text-base"></i>
+				<span>{$_('Settings')}</span>
+				<span class="ms-auto rounded-full bg-success px-2 py-0.5 text-xs text-white">11</span>
+			</button>
+			<div class="my-1 h-px bg-gray-200 dark:bg-gray-700"></div>
+			<button
+				type="button"
+				class="flex w-full items-center px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
+				onclick={() => logout()}
+			>
+				<i class="bx bx-power-off me-2 align-middle text-base text-danger"></i>
+				<span>{$_('Logout')}</span>
+			</button>
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/common/dropdowns/Select.svelte b/src/lib/common/dropdowns/Select.svelte
index 8e07e010..59f90e8a 100644
--- a/src/lib/common/dropdowns/Select.svelte
+++ b/src/lib/common/dropdowns/Select.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { onMount, tick, untrack } from "svelte";
+    import { onDestroy, onMount, tick, untrack } from "svelte";
     import { clickoutsideDirective } from "$lib/helpers/directives";
 
     /**
@@ -18,6 +18,7 @@
      *   disableDefaultStyles?: boolean,
      *   searchMode?: boolean,
      *   loadMore?: boolean,
+     *   prefixIcon?: import('svelte').Snippet,
      *   onScrollMoreOptions?: null | undefined | (() => Promise<any>),
      *   onselect?: (e: any) => void
      * }}
@@ -37,6 +38,7 @@
         disableDefaultStyles = false,
         searchMode = false,
         loadMore = false,
+        prefixIcon = undefined,
         onScrollMoreOptions = null,
         onselect = () => {}
     } = $props();
@@ -67,10 +69,24 @@
      */
     let timer;
 
+    /** @type {number} */
+    let repositionRaf = 0;
+
     onMount(() => {
         initOptions();
     });
 
+    // Belt-and-braces cleanup: if the option list was portaled to <body>
+    // and the parent Select is destroyed mid-flight (e.g. route change
+    // while the dropdown is open), Svelte's removal walks the original
+    // template tree and may miss the moved node. Drop it explicitly.
+    onDestroy(() => {
+        const optionList = document.getElementById(`multiselect-list-${tag}`);
+        if (optionList && optionList.parentElement === document.body) {
+            optionList.remove();
+        }
+    });
+
     $effect(() => {
         // track options, selectedValues, and loadMore as triggers
         const _opts = options;
@@ -155,6 +171,72 @@
         }
     }
 
+    
+
+    function adjustDropdownPosition() {
+        const btn = document.getElementById(`multiselect-btn-${tag}`);
+        const optionList = document.getElementById(`multiselect-list-${tag}`);
+
+        if (!btn || !optionList) return;
+
+        // Portal the option list to <body> so it escapes ancestor
+        // containing-block surprises. `position: fixed` is anchored to the
+        // viewport *only* when no ancestor sets `transform`, `filter`,
+        // `perspective`, `contain: layout/paint/strict`, or `will-change` to
+        // a transform-creating value — any of which create a new containing
+        // block for fixed-positioned descendants and make
+        // getBoundingClientRect-based viewport anchoring drift off the
+        // trigger. Re-parenting to <body> guarantees the viewport is the
+        // containing block. Also escapes any ancestor `overflow: hidden`.
+        if (optionList.parentElement !== document.body) {
+            document.body.appendChild(optionList);
+        }
+
+        const btnRec = btn.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const listHeight = optionList.offsetHeight;
+        const spaceBelow = windowHeight - btnRec.bottom;
+        const spaceAbove = btnRec.top;
+
+        optionList.style.position = 'fixed';
+        optionList.style.left = `${btnRec.left}px`;
+        optionList.style.width = `${btnRec.width}px`;
+        optionList.style.right = 'auto';
+
+        if (spaceBelow < listHeight && spaceAbove > listHeight) {
+            optionList.style.top = `${btnRec.top - listHeight}px`;
+            optionList.style.bottom = 'auto';
+        } else {
+            optionList.style.top = `${btnRec.bottom}px`;
+            optionList.style.bottom = 'auto';
+        }
+    }
+
+    function repositionDropdown() {
+        if (repositionRaf) {
+            cancelAnimationFrame(repositionRaf);
+        }
+        repositionRaf = requestAnimationFrame(() => {
+            adjustDropdownPosition();
+            repositionRaf = 0;
+        });
+    }
+
+    $effect(() => {
+        if (!showOptionList) return;
+        // Capture-phase scroll listener catches nested scroll containers too.
+        window.addEventListener('scroll', repositionDropdown, true);
+        window.addEventListener('resize', repositionDropdown);
+        return () => {
+            window.removeEventListener('scroll', repositionDropdown, true);
+            window.removeEventListener('resize', repositionDropdown);
+            if (repositionRaf) {
+                cancelAnimationFrame(repositionRaf);
+                repositionRaf = 0;
+            }
+        };
+    });
+
 
     /** @param {any} e */
     function changeSearchValue(e) {
@@ -163,7 +245,7 @@
         if (timer) {
             clearTimeout(timer);
         }
-        
+
         timer = setTimeout(() => {
             applySearchFilter();
             verifySelectAll();
@@ -274,7 +356,14 @@
         const curNode = e.detail.currentNode;
         const targetNode = e.detail.targetNode;
 
-        if (!curNode?.contains(targetNode)) {
+        // The option list is portaled to <body> (see adjustDropdownPosition),
+        // so `curNode` (the .multiselect-container) no longer contains it.
+        // Check the portaled list explicitly so clicks inside it (search
+        // box, scrollbar, option rows) are treated as "inside".
+        const optionList = document.getElementById(`multiselect-list-${tag}`);
+        const insideList = !!optionList && optionList.contains(targetNode);
+
+        if (!curNode?.contains(targetNode) && !insideList) {
             showOptionList = false;
         }
     }
@@ -287,24 +376,6 @@
         });
     }
 
-    function adjustDropdownPosition() {
-        const btn = document.getElementById(`multiselect-btn-${tag}`);
-        const optionList = document.getElementById(`multiselect-list-${tag}`);
-
-        if (!btn || !optionList) return;
-
-        const btnRec = btn.getBoundingClientRect();
-        const windowHeight = window.innerHeight;
-        const spaceBelow = windowHeight - btnRec.bottom;
-        const spaceAbove = btnRec.top;
-        const listHeight = optionList.offsetHeight;
-
-        if (spaceBelow < listHeight && spaceAbove > listHeight) {
-            optionList.style.top = `-${listHeight}px`;
-            optionList.style.bottom = 'auto';
-        }
-    }
-
     function innerScroll() {
         if (onScrollMoreOptions != null && onScrollMoreOptions != undefined) {
             const dropdown = document.getElementById(`multiselect-list-${tag}`);
@@ -354,14 +425,19 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-        class="display-container"
+        class={`display-container ${prefixIcon ? 'has-prefix' : ''}`}
         id={`multiselect-btn-${tag}`}
         onclick={() => toggleOptionList()}
     >
+        {#if prefixIcon}
+            <div class="display-prefix">
+                {@render prefixIcon()}
+            </div>
+        {/if}
         <input
             type="text"
             name={'select-display-text'}
-            class={`form-control clickable ${disabled ? 'disabled' : ''}`}
+            class={`select-display ${disabled ? 'disabled' : ''}`}
             value={displayText}
             placeholder={placeholder}
             disabled={disabled}
@@ -381,7 +457,7 @@
                     <input
                         type="text"
                         name={'select-search-text'}
-                        class="form-control"
+                        class="select-search"
                         value={searchValue}
                         placeholder={searchPlaceholder}
                         oninput={e => changeSearchValue(e)}
@@ -393,14 +469,14 @@
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
-                        class="option-item clickable"
+                        class="option-item"
                         onclick={(/** @type {MouseEvent} */ e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             checkSelectAll(null);
                         }}
                     >
-                        <div class="line-align-center select-box">
+                        <div class="select-box">
                             <input
                                 type="checkbox"
                                 name={'select-select-all'}
@@ -409,7 +485,7 @@
                                 readonly
                             />
                         </div>
-                        <div class="line-align-center select-name fw-bold">
+                        <div class="select-name select-name-bold">
                             {'Select all'}
                         </div>
                     </li>
@@ -418,30 +494,28 @@
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
-                        class="option-item clickable justify-content-center"
+                        class="option-item option-clear"
                         onclick={(/** @type {MouseEvent} */ e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             clearSelection();
                         }}
                     >
-                        <div class="line-align-center text-secondary">
-                            {`Clear selection`}
-                        </div>
+                        {`Clear selection`}
                     </li>
                 {/if}
                 {#each innerOptions as option, idx (idx)}
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
                     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
-                        class="option-item clickable"
+                        class="option-item"
                         onclick={(/** @type {MouseEvent} */ e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             checkOption(null, option);
                         }}
                     >
-                        <div class="line-align-center select-box">
+                        <div class="select-box">
                             {#if multiSelect}
                                 <input
                                     type="checkbox"
@@ -451,12 +525,12 @@
                                     readonly
                                 />
                             {:else if option.checked}
-                                <i class="bx bx-check text-primary"></i>
+                                <i class="bx bx-check"></i>
                             {:else}
                                 {' '}
                             {/if}
                         </div>
-                        <div class="line-align-center select-name">
+                        <div class="select-name">
                             {option.label}
                         </div>
                     </li>
@@ -468,4 +542,303 @@
             {/if}
         </ul>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    /* ============================================================
+       Select component — fully self-contained styling.
+       Component-scoped CSS replaces the legacy `_select.scss` rules
+       and now owns the full input look (no Bootstrap `.form-control`,
+       `.fw-bold`, `.text-*`, `.justify-content-*` classes used).
+       Page-level :global() overrides (e.g. in instruction/testing,
+       conversation, instruction/log) continue to win via their
+       higher-specificity ancestor selectors.
+       ============================================================ */
+
+    .multiselect-container {
+        position: relative;
+    }
+
+    /* ---------- Display container (closed trigger) ---------- */
+    .display-container {
+        position: relative;
+    }
+
+    /* Themed display input. Targets the unstyled `<input type="text">`
+       rendered inside the trigger (carries an internal `.select-display`
+       class as a JS-only marker; no Bootstrap `.form-control` used). */
+    .display-container :global(input[type='text']) {
+        width: 100%;
+        height: 2.5rem;
+        margin: 0;
+        padding: 0 2rem 0 0.75rem;
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.375rem;
+        background-color: rgb(255 255 255);
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: rgb(31 41 55);
+        cursor: pointer;
+        text-overflow: ellipsis;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    }
+    /* When a prefix icon is rendered, reserve left padding so the
+       placeholder/value text doesn't collide with the icon. */
+    .display-container.has-prefix :global(input[type='text']) {
+        padding-left: 2.25rem;
+    }
+
+    /* ---------- Optional prefix icon ---------- */
+    .display-prefix {
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        font-size: 1rem;
+        line-height: 1;
+        color: rgb(156 163 175);
+        pointer-events: none;
+        z-index: 1;
+        transition: color 0.15s ease;
+    }
+    /* Lift the prefix icon to primary when the field is focused (and
+       not disabled), matching the focus-ring affordance. */
+    .display-container:focus-within .display-prefix {
+        color: var(--color-primary);
+    }
+    .display-container :global(input[type='text']::placeholder) {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+    .display-container :global(input[type='text']:hover:not(.disabled):not(:disabled)) {
+        border-color: rgb(209 213 219);
+    }
+    .display-container :global(input[type='text']:focus) {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 1px var(--color-primary);
+    }
+    .display-container :global(input[type='text'].disabled),
+    .display-container :global(input[type='text']:disabled) {
+        background-color: rgb(249 250 251);
+        color: var(--color-muted);
+        cursor: not-allowed;
+        opacity: 0.7;
+        border-color: rgb(229 231 235);
+    }
+
+    .display-suffix {
+        position: absolute;
+        right: 0.625rem;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        font-size: 1.125rem;
+        line-height: 1;
+        color: rgb(156 163 175);
+        pointer-events: none;
+    }
+    .display-suffix :global(i) {
+        transition: transform 0.2s ease-in-out, color 0.15s ease;
+    }
+    .display-suffix.show-list :global(i) {
+        transform: rotate(180deg);
+        color: var(--color-primary);
+    }
+
+    /* ---------- Option list dropdown ---------- */
+    .option-list {
+        list-style: none;
+        margin: 0.25rem 0 0;
+        padding: 0.25rem;
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.5rem;
+        background-color: rgb(255 255 255);
+        box-shadow:
+            0 10px 25px -5px rgb(0 0 0 / 0.1),
+            0 8px 10px -6px rgb(0 0 0 / 0.05);
+        max-height: 260px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        /* position / top / left / width are set inline by adjustDropdownPosition()
+           so the menu can escape ancestor `overflow: auto/hidden` containers. */
+        position: fixed;
+        z-index: 1050;
+    }
+
+    /* ---------- Search box inside dropdown ---------- */
+    .search-box {
+        position: relative;
+        padding: 0.125rem 0.125rem 0.5rem;
+    }
+    .search-box :global(input[type='text']) {
+        width: 100%;
+        height: 2rem;
+        margin: 0;
+        padding: 0 0.625rem 0 2rem;
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.375rem;
+        background-color: rgb(249 250 251);
+        font-size: 0.8125rem;
+        line-height: 1.5;
+        color: rgb(31 41 55);
+        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+    }
+    .search-box :global(input[type='text']::placeholder) {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+    .search-box :global(input[type='text']:focus) {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 1px var(--color-primary);
+    }
+
+    .search-prefix {
+        position: absolute;
+        left: 0.625rem;
+        top: calc(50% - 0.25rem);
+        transform: translateY(-50%);
+        display: inline-flex;
+        align-items: center;
+        font-size: 1rem;
+        line-height: 1;
+        color: rgb(156 163 175);
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    /* ---------- Option items ---------- */
+    .option-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.4rem 0.625rem;
+        margin: 0;
+        border-radius: 0.375rem;
+        font-size: 0.875rem;
+        color: rgb(31 41 55);
+        cursor: pointer;
+        transition: background-color 0.12s ease, color 0.12s ease;
+    }
+    .option-item:hover {
+        background-color: rgb(243 244 246);
+        color: var(--color-primary);
+    }
+
+    /* "Clear selection" row (single-select dropdowns) */
+    .option-item.option-clear {
+        justify-content: center;
+        font-size: 0.8125rem;
+        color: var(--color-muted);
+        font-style: italic;
+    }
+    .option-item.option-clear:hover {
+        background-color: rgb(243 244 246);
+        color: var(--color-danger);
+    }
+
+    .select-box {
+        flex: 0 0 1.25rem;
+        max-width: 1.25rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+    }
+
+    /* ---------- Custom checkbox (multi-select mode) ----------
+       Replaces the native browser checkbox with a themed primary-colored
+       control. Uses `appearance: none` + an SVG checkmark background to
+       render identically across browsers and pick up `--color-primary`
+       at runtime. Targets the inputs rendered by the template
+       (`<input type="checkbox" ... readonly>`); click handling lives on
+       the parent `.option-item`, so the input remains visually accurate
+       via its `checked` attribute. */
+
+    .select-box :global(input[type='checkbox']) {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 1rem;
+        height: 1rem;
+        margin: 0;
+        padding: 0;
+        border: 1.5px solid rgb(209 213 219);
+        border-radius: 0.25rem;
+        background-color: rgb(255 255 255);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 0.75rem 0.75rem;
+        cursor: pointer;
+        outline: 0;
+        box-shadow: none;
+        transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+        flex-shrink: 0;
+    }
+
+    /* Hover: lift the border toward primary (skipped when disabled) */
+    .option-item:hover :global(input[type='checkbox']:not(:disabled)) {
+        border-color: var(--color-primary);
+    }
+
+    /* Checked: primary fill + inline white SVG check glyph */
+    .select-box :global(input[type='checkbox']:checked) {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
+    }
+
+    /* Disabled: faded with no hover affordance */
+    .select-box :global(input[type='checkbox']:disabled) {
+        background-color: rgb(243 244 246);
+        border-color: rgb(229 231 235);
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+
+    /* Subtle highlight on rows whose checkbox is checked (multi-select).
+       :has() is supported in all evergreen browsers. */
+    .option-item:has(:global(input[type='checkbox']:checked)) {
+        background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
+    }
+    .option-item:has(:global(input[type='checkbox']:checked)):hover {
+        background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
+        color: var(--color-primary);
+    }
+
+    /* The check glyph rendered for the currently-selected option in single-select mode */
+    .select-box :global(i.bx-check) {
+        font-size: 1.125rem;
+        line-height: 1;
+        color: var(--color-primary);
+    }
+
+    .select-name {
+        flex: 1 1 auto;
+        min-width: 0;
+        font-size: 0.875rem;
+        line-height: 1.4;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+    }
+    /* "Select all" label is bold (template applies `select-name-bold`
+       instead of the legacy Bootstrap `fw-bold` utility class). */
+    .select-name.select-name-bold {
+        font-weight: 600;
+    }
+
+    /* Empty state ("Nothing...") */
+    .option-item :global(.nothing) {
+        width: 100%;
+        padding: 0.25rem 0.25rem;
+        color: var(--color-muted);
+        font-size: 0.8125rem;
+        font-style: italic;
+        text-align: center;
+    }
+</style>
diff --git a/src/lib/common/embedding/EmbeddingPage.svelte b/src/lib/common/embedding/EmbeddingPage.svelte
index cf8bd979..8eeab363 100644
--- a/src/lib/common/embedding/EmbeddingPage.svelte
+++ b/src/lib/common/embedding/EmbeddingPage.svelte
@@ -16,6 +16,9 @@
     /** @type {boolean} */
     let fullScreen = $state(false);
 
+    /** @type {HTMLDivElement | null} */
+    let containerEl = $state(null);
+
     $effect(() => {
         const footer = document.querySelector('.footer');
         const pageContent = document.querySelector('.page-content');
@@ -46,6 +49,38 @@
         };
     });
 
+    /* Measure the container's actual top-offset from the viewport and feed it
+       into a `--embedding-top` CSS variable. The page route may render
+       arbitrary siblings (e.g. a `<Breadcrumb>`) above the embedding
+       container, so a static `calc(100vh - header)` would overshoot. By
+       binding the offset reactively, the height stays correct across
+       breadcrumb-line-wraps, sidebar collapse, window resize, etc. */
+    $effect(() => {
+        const el = containerEl;
+        if (!el) return;
+
+        const updateOffset = () => {
+            const top = el.getBoundingClientRect().top;
+            el.style.setProperty('--embedding-top', `${top}px`);
+        };
+
+        updateOffset();
+        window.addEventListener('resize', updateOffset);
+
+        // Track ancestor size/visibility changes (breadcrumb wrap on
+        // viewport-narrow, sidebar toggle, etc.). The observer is cheap
+        // because the callback only sets a CSS variable.
+        const ro = new ResizeObserver(updateOffset);
+        if (el.parentElement) {
+            ro.observe(el.parentElement);
+        }
+
+        return () => {
+            window.removeEventListener('resize', updateOffset);
+            ro.disconnect();
+        };
+    });
+
     // @ts-ignore
     let slug = $derived($page.params[slugName]);
 
@@ -123,7 +158,65 @@
 </script>
 
 <div
+    bind:this={containerEl}
     id={`${htmlTagId}`}
     class="embedding-container"
+    class:embedding-container-fullscreen={fullScreen}
 >
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    /* ============================================================
+       Embedding container — owns its own sizing so the embedded
+       <iframe> child (which typically uses `height: 100%`/`98%`)
+       has a non-collapsing parent.
+
+       The legacy global rule in `_agent.scss` referenced Bootstrap
+       SCSS variables ($header-height, $grid-gutter-width,
+       $footer-height) that no longer resolve after the Tailwind
+       migration, so the iframe collapsed to its 150px default. Now
+       the container computes its height from `--embedding-top`
+       (the container's actual viewport offset, set at runtime by a
+       ResizeObserver) and the `--footer-height` theme token.
+       ============================================================ */
+
+    .embedding-container {
+        /* Default `--embedding-top` is a sensible fallback for SSR /
+           the brief window before the runtime ResizeObserver fires. */
+        --embedding-top: calc(var(--header-height) + 1.5rem);
+
+        width: 100%;
+        height: calc(100vh - var(--embedding-top) - var(--footer-height));
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        background-color: rgb(255 255 255);
+        border-radius: 0.5rem;
+    }
+
+    /* Fullscreen mode: the component's $effect hides the page
+       footer and zeroes the page-content's `padding-bottom`, so the
+       container can extend down to the viewport edge. */
+    .embedding-container.embedding-container-fullscreen {
+        height: calc(100vh - var(--embedding-top));
+        border-radius: 0;
+    }
+
+    /* The embed() function injects a single child element whose tag
+       name comes from the plugin config (typically <iframe>, but
+       <embed>, <object>, <video>, etc. are all valid). The universal
+       `> *` selector future-proofs the rule against any tag name; the
+       container's contract is "exactly one runtime-injected child",
+       so there's nothing else inside to accidentally match.
+
+       Note: `width`/`height` here are defaults — plugins may set their
+       own inline width/height (e.g. `height: 98%`) which will win via
+       standard CSS specificity. `display: block` and `border: 0` apply
+       universally regardless. */
+    .embedding-container :global(> *) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/common/errors/error-500.svelte b/src/lib/common/errors/error-500.svelte
index e0754d7d..6366bd58 100644
--- a/src/lib/common/errors/error-500.svelte
+++ b/src/lib/common/errors/error-500.svelte
@@ -1,35 +1,145 @@
 <script>
 	import { goto } from '$app/navigation';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+
+	function goBack() {
+		if (typeof history !== 'undefined' && history.length > 1) {
+			history.back();
+		} else {
+			goto('/page/dashboard');
+		}
+	}
 </script>
 
 <HeadTitle title="500 Error Page" />
 
-<div class="account-pages my-5 pt-5">
-	<div class="container">
-		<div class="row">
-			<div class="col-lg-12">
-				<div class="text-center mb-5">
-					<h1 class="display-2 fw-medium">
-						5
-						<i class="bx bx-buoy bx-spin text-primary display-3"></i>
-						0
-					</h1>
-					<h4 class="text-uppercase">Internal Server Error</h4>
-					<div class="mt-5 text-center">
-						<button class="btn btn-primary" onclick={() => goto('/page/dashboard')}>
-							Back to Dashboard
-						</button>
-					</div>
-				</div>
-			</div>
+<div class="relative flex min-h-[80vh] items-center justify-center overflow-hidden px-4 py-12">
+	<!-- Soft animated backdrop blobs -->
+	<div class="pointer-events-none absolute inset-0 -z-10">
+		<div class="err-blob absolute -top-24 -left-24 h-72 w-72 rounded-full bg-[color-mix(in_srgb,var(--color-primary)_25%,transparent)] blur-3xl"></div>
+		<div class="err-blob err-blob-delayed absolute -bottom-24 -right-24 h-72 w-72 rounded-full bg-[color-mix(in_srgb,var(--color-danger)_22%,transparent)] blur-3xl"></div>
+	</div>
+
+	<div class="w-full max-w-2xl text-center">
+		<!-- 5 [spin] 0 -->
+		<h1 class="flex items-center justify-center gap-3 text-7xl font-medium tracking-tight text-gray-900 sm:text-8xl dark:text-gray-100">
+			<span>5</span>
+			<span class="text-[var(--color-primary)]">
+				<i class="bx bx-buoy bx-spin"></i>
+			</span>
+			<span>0</span>
+		</h1>
+
+		<h4 class="mt-6 text-sm font-semibold uppercase tracking-[0.25em] text-gray-700 sm:text-base dark:text-gray-200">
+			Internal Server Error
+		</h4>
+
+		<p class="mx-auto mt-4 max-w-md text-sm text-[var(--color-muted)] sm:text-base">
+			Something broke on our end. Hang tight while we work on it — try again in a moment, or head back home.
+		</p>
+
+		<!-- Illustration -->
+		<div class="mt-8 mb-8">
+			<img
+				src="images/error-img.png"
+				alt=""
+				class="mx-auto w-full max-w-sm err-float"
+			/>
 		</div>
-		<div class="row justify-content-center">
-			<div class="col-md-8 col-xl-6">
-				<div>
-					<img src='images/error-img.png' alt="" class="img-fluid" />
-				</div>
-			</div>
+
+		<!-- Actions -->
+		<div class="mt-6 flex flex-wrap justify-center gap-3">
+			<button
+				class="err-btn err-btn-primary"
+				onclick={() => goto('/page/dashboard')}
+			>
+				<i class="bx bx-home-alt"></i>
+				Back to Dashboard
+			</button>
+			<button
+				class="err-btn err-btn-ghost"
+				onclick={() => goBack()}
+			>
+				<i class="bx bx-arrow-back"></i>
+				Go Back
+			</button>
 		</div>
 	</div>
 </div>
+
+<style>
+	/* Image float animation */
+	.err-float {
+		animation: err-float-anim 6s ease-in-out infinite;
+	}
+	@keyframes err-float-anim {
+		0%, 100% { transform: translateY(0); }
+		50% { transform: translateY(-12px); }
+	}
+
+	/* Backdrop blob drift */
+	.err-blob {
+		animation: err-blob-anim 14s ease-in-out infinite;
+	}
+	.err-blob-delayed {
+		animation-delay: -7s;
+	}
+	@keyframes err-blob-anim {
+		0%, 100% { transform: translate(0, 0) scale(1); }
+		50% { transform: translate(20px, -20px) scale(1.08); }
+	}
+
+	/* Buttons */
+	.err-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		height: 2.5rem;
+		padding: 0 1.25rem;
+		border: 1px solid transparent;
+		border-radius: 0.625rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+	}
+	.err-btn:active {
+		transform: translateY(1px);
+	}
+	.err-btn i {
+		font-size: 1.125rem;
+		line-height: 1;
+	}
+	.err-btn-primary {
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		box-shadow:
+			0 1px 2px rgb(15 23 42 / 0.1),
+			0 8px 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
+	}
+	.err-btn-primary:hover {
+		background-color: var(--color-primary-hover);
+		box-shadow:
+			0 1px 2px rgb(15 23 42 / 0.1),
+			0 12px 28px -8px color-mix(in srgb, var(--color-primary) 70%, transparent);
+	}
+	.err-btn-ghost {
+		background-color: rgb(255 255 255);
+		border-color: rgb(229 231 235);
+		color: rgb(55 65 81);
+	}
+	.err-btn-ghost:hover {
+		background-color: rgb(249 250 251);
+		border-color: rgb(209 213 219);
+	}
+	:global(.dark) .err-btn-ghost {
+		background-color: rgb(31 41 55);
+		border-color: rgb(55 65 81);
+		color: rgb(229 231 235);
+	}
+	:global(.dark) .err-btn-ghost:hover {
+		background-color: rgb(55 65 81);
+		border-color: rgb(75 85 99);
+	}
+</style>
diff --git a/src/lib/common/files/AudioGallery.svelte b/src/lib/common/files/AudioGallery.svelte
index 7e0e5d45..930fef1a 100644
--- a/src/lib/common/files/AudioGallery.svelte
+++ b/src/lib/common/files/AudioGallery.svelte
@@ -28,3 +28,24 @@
   <AudioPlayer id={id} audio={audios} />
 </div>
 {/if}
+
+<style>
+    /* ===== Audio gallery list wrapper =====
+       Replaces the legacy `.audio-gallery-list` rule in `_file.scss` that
+       was dropped in the Tailwind v4 migration. Selectors are wrapped in
+       :global() because the matching DOM is rendered by the third-party
+       <AudioPlayer> component below, not by this component's template,
+       and Svelte's CSS scoper would otherwise strip the class hashes. */
+    :global(.audio-gallery-list) {
+        margin: 5px 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px;
+        justify-content: flex-start;
+        width: inherit;
+    }
+    :global(.audio-gallery-list .aplayer) {
+        margin: 0 !important;
+        width: 100%;
+    }
+</style>
diff --git a/src/lib/common/files/FileGallery.svelte b/src/lib/common/files/FileGallery.svelte
index 91ef0ea4..84f4640b 100644
--- a/src/lib/common/files/FileGallery.svelte
+++ b/src/lib/common/files/FileGallery.svelte
@@ -42,7 +42,7 @@
         suffix
     } = $props();
 
-    
+
 
     /**
 	 * @param {any} e
@@ -89,11 +89,9 @@
                                 <div class="gallery-item-inner" style={`${showFileName ? 'width: 80%;' : ''}`}>
                                     {#if needDelete}
                                         <div
-                                            class="gallery-item-icon delete-icon clickable"
+                                            class="gallery-item-icon delete-icon cursor-pointer"
                                             tabindex="0"
                                             role="button"
-                                            data-bs-toggle="tooltip"
-                                            data-bs-placement="top"
                                             title="Delete"
                                             onkeydown={() => {}}
                                             onclick={e => handleDeleteFile(e, idx)}
@@ -103,11 +101,9 @@
                                     {/if}
                                     {#if needDownload && !!file.file_download_url}
                                         <div
-                                            class="gallery-item-icon download-icon clickable"
+                                            class="gallery-item-icon download-icon cursor-pointer"
                                             tabindex="0"
                                             role="button"
-                                            data-bs-toggle="tooltip"
-                                            data-bs-placement="top"
                                             title={`${isHtml(file.file_extension || file.file_name) ? 'Download' : 'Go to web page'}`}
                                             onkeydown={() => {}}
                                             onclick={e => handleDownloadFile(e, idx)}
@@ -137,10 +133,8 @@
                                 </div>
                             </div>
                             {#if showFileName && file.file_name}
-                                <div 
+                                <div
                                     class="gallery-item-name ellipsis"
-                                    data-bs-toggle="tooltip"
-                                    data-bs-placement="top"
                                     title={file.file_name}
                                 >
                                     {file.file_name}
@@ -182,3 +176,96 @@
         </div>
     {/if}
 </div>
+
+
+<style>
+    /* ===== File gallery layout =====
+       Replaces the legacy `_file.scss` rules (`.file-gallery-list`,
+       `.gallery-item`, `.gallery-item-*`) that were dropped in the
+       Tailwind v4 migration. Without these, gallery items lost their
+       8em fixed box and image previews ballooned to natural size —
+       this re-instates the constrained thumbnail grid using design
+       tokens. Selectors are wrapped in :global() because some of the
+       targeted classes (e.g. `.item-thumbnail-wrapper`) are passed as
+       `class` props to third-party svelte-lightbox components and would
+       otherwise be stripped by Svelte's CSS scoper. */
+    :global(.file-gallery-list) {
+        margin: 5px 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+    :global(.file-gallery-list .gallery-item) {
+        width: 8em;
+        height: 8em;
+    }
+    :global(.file-gallery-list .item-thumbnail-wrapper) {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    :global(.file-gallery-list .gallery-item-wrapper) {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+    }
+    :global(.file-gallery-list .gallery-item-inner) {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+    :global(.file-gallery-list .gallery-item-image) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 10px;
+    }
+    :global(.file-gallery-list .gallery-item-icon) {
+        position: absolute;
+        z-index: 500;
+        font-size: 1.2em;
+        border-radius: 5px;
+        padding: 2px;
+        line-height: 1;
+    }
+    :global(.file-gallery-list .gallery-item-icon i) {
+        display: block;
+    }
+    :global(.file-gallery-list .delete-icon) {
+        top: 3px;
+        right: 3px;
+        color: var(--color-danger);
+        background-color: rgb(255 255 255 / 0.85);
+    }
+    :global(.file-gallery-list .delete-icon:hover) {
+        color: white;
+        background-color: var(--color-danger);
+    }
+    :global(.file-gallery-list .download-icon) {
+        right: 3px;
+        bottom: 3px;
+        color: var(--color-info);
+        background-color: rgb(255 255 255 / 0.85);
+    }
+    :global(.file-gallery-list .download-icon:hover) {
+        color: white;
+        background-color: var(--color-info);
+    }
+    :global(.file-gallery-list .gallery-item-name) {
+        text-align: center;
+        word-break: break-all;
+        font-size: 0.7rem;
+        line-height: 1.2;
+    }
+    /* Narrow viewports: shrink the thumbnail box (mirrors the
+       legacy 500px media query). */
+    @media (max-width: 500px) {
+        :global(.file-gallery-list .gallery-item) {
+            width: 5em;
+            height: 5em;
+        }
+    }
+</style>
diff --git a/src/lib/common/markdown/CodeBlock.svelte b/src/lib/common/markdown/CodeBlock.svelte
index 05489764..d6e0ec2a 100644
--- a/src/lib/common/markdown/CodeBlock.svelte
+++ b/src/lib/common/markdown/CodeBlock.svelte
@@ -43,7 +43,7 @@
                     </div>
                 </div>
             {:else}
-                <i class="bx bx-copy clickable"></i>
+                <i class="bx bx-copy cursor-pointer"></i>
             {/if}
         </div>
     </div>
diff --git a/src/lib/common/markdown/Markdown.svelte b/src/lib/common/markdown/Markdown.svelte
index 60f775f6..87fb3371 100644
--- a/src/lib/common/markdown/Markdown.svelte
+++ b/src/lib/common/markdown/Markdown.svelte
@@ -72,4 +72,83 @@
 			code: CodeBlock
 		}}
 	/> -->
-</div>
\ No newline at end of file
+</div>
+
+<style>
+    /* Ported from src/lib/scss/custom/components/_markdown.scss. The HTML
+       rendered here is injected via {@html} from `marked`, so Svelte's CSS
+       scoping cannot hash the inner nodes — every selector that targets the
+       rendered markup is wrapped in :global(). */
+    .markdown-container {
+        overflow-x: auto;
+        scrollbar-width: thin;
+    }
+    .markdown-container :global(pre) {
+        -ms-overflow-style: none;
+        white-space: pre-wrap;
+        margin-top: 1em;
+        margin-bottom: 1em;
+    }
+    .markdown-container :global(pre::-webkit-scrollbar) {
+        display: none;
+    }
+    /* Language-typed code blocks emitted by `marked` get the inverted-card
+       treatment (dark surface, light text) regardless of the variant the
+       Markdown.svelte parent uses, so the code stays legible inside both
+       `markdown-lite` and `markdown-dark` containers. */
+    .markdown-container :global(pre:has(.language-sql)),
+    .markdown-container :global(pre:has(.language-java)),
+    .markdown-container :global(pre:has(.language-javascript)),
+    .markdown-container :global(pre:has(.language-typescript)),
+    .markdown-container :global(pre:has(.language-csharp)),
+    .markdown-container :global(pre:has(.language-python)),
+    .markdown-container :global(pre:has(.language-json)) {
+        background-color: black;
+        color: white;
+        border-radius: 5px;
+        padding: 5px 10px;
+    }
+
+    .markdown-container :global(table) {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        border-radius: 5px;
+    }
+    .markdown-container :global(table th),
+    .markdown-container :global(table td) {
+        padding: 3px 5px;
+    }
+
+    .markdown-container :global(p) {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .markdown-container :global(ul) {
+        list-style-position: outside;
+    }
+
+    /* Variant: `markdown-lite` — used when the container sits on a dark
+       surface (e.g. the chat thread's avatar/tool rows). Borders and links
+       are rendered in pure white. */
+    .markdown-lite :global(table th),
+    .markdown-lite :global(table td) {
+        border: 1px solid white;
+    }
+    .markdown-lite :global(a) {
+        color: white;
+    }
+
+    /* Variant: `markdown-dark` — used when the container sits on a light
+       surface (e.g. the assistant bubble's white card). Borders and links
+       use the primary accent. When both variants are applied to the same
+       container (chat-box's `markdown-dark cb-md-dark` markdown-lite combo),
+       these rules ship last in source order and win on equal specificity. */
+    .markdown-dark :global(table th),
+    .markdown-dark :global(table td) {
+        border: 1px solid var(--color-primary);
+    }
+    .markdown-dark :global(a) {
+        color: var(--color-primary);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/common/modals/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
index bb0adb1c..359a53df 100644
--- a/src/lib/common/modals/DialogModal.svelte
+++ b/src/lib/common/modals/DialogModal.svelte
@@ -1,5 +1,6 @@
 <script>
-    import { fade } from 'svelte/transition';
+    import { fade, fly } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
 
     let {
         isOpen = false,
@@ -19,15 +20,15 @@
     } = $props();
 
     /** @type {Record<string, string>} */
-    const sizeClasses = {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-        '2xl': 'max-w-2xl',
-        '3xl': 'max-w-3xl',
-        '4xl': 'max-w-4xl',
-        '5xl': 'max-w-5xl'
+    const sizeWidths = {
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        '2xl': '42rem',
+        '3xl': '48rem',
+        '4xl': '56rem',
+        '5xl': '64rem'
     };
 
     /** @param {any} e */
@@ -57,62 +58,284 @@
 </script>
 
 {#if isOpen}
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50"
-    transition:fade={{ duration: 150 }}
-    onclick={handleBackdropClick}
->
-    <div class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-xl'} mx-4 dialog-modal-container ${className}`}>
-        <!-- Header -->
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-            {#if !!title}
-                <div class="flex items-center gap-2 font-semibold text-lg">
-                    {@render titleIcon?.()}
-                    <div>{title}</div>
-                </div>
-            {/if}
-            {#if closeable}
-                <button
-                    type="button"
-                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer"
-                    aria-label="Close"
-                    onclick={e => handleClose(e)}
-                >
-                    <i class="mdi mdi-close text-xl"></i>
-                </button>
-            {/if}
-        </div>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+        class="dm-overlay"
+        transition:fade={{ duration: 150 }}
+        onclick={handleBackdropClick}
+    >
+        <div
+            class={`dm-panel dialog-modal-container ${className}`}
+            style={`max-width: ${sizeWidths[size] || sizeWidths.xl};`}
+            transition:fly={{ y: -16, duration: 200, easing: quintOut }}
+            role="dialog"
+            aria-modal="true"
+        >
+            <!-- Primary accent strip — gives the panel a subtle branded edge. -->
+            <div class="dm-accent"></div>
 
-        <!-- Body -->
-        <div class="p-3">
-            {@render children?.()}
-        </div>
-
-        <!-- Footer -->
-        <div class="flex justify-end gap-2 p-3 border-t border-gray-200 dark:border-gray-700">
-            {#if !!confirmBtnText}
-            <button
-                type="button"
-                class="px-3 py-2 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                onclick={(e) => handleConfirm(e)}
-                disabled={disableConfirmBtn}
-            >
-                {confirmBtnText}
-            </button>
+            {#if !!title || closeable}
+                <header class="dm-header">
+                    {#if !!title}
+                        <div class="dm-title">
+                            {@render titleIcon?.()}
+                            <span>{title}</span>
+                        </div>
+                    {/if}
+                    {#if closeable}
+                        <button
+                            type="button"
+                            class="dm-close"
+                            aria-label="Close"
+                            onclick={(e) => handleClose(e)}
+                        >
+                            <i class="mdi mdi-close"></i>
+                        </button>
+                    {/if}
+                </header>
             {/if}
 
-            {#if !!cancelBtnText}
-            <button
-                type="button"
-                class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded hover:bg-gray-300 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors"
-                onclick={(e) => handleCancel(e)}
-            >
-                {cancelBtnText}
-            </button>
+            <div class="dm-body">
+                {@render children?.()}
+            </div>
+
+            {#if !!confirmBtnText || !!cancelBtnText}
+                <footer class="dm-footer">
+                    {#if !!cancelBtnText}
+                        <button
+                            type="button"
+                            class="dm-btn dm-btn-cancel"
+                            onclick={(e) => handleCancel(e)}
+                        >
+                            {cancelBtnText}
+                        </button>
+                    {/if}
+                    {#if !!confirmBtnText}
+                        <button
+                            type="button"
+                            class="dm-btn dm-btn-confirm"
+                            onclick={(e) => handleConfirm(e)}
+                            disabled={disableConfirmBtn}
+                        >
+                            {confirmBtnText}
+                        </button>
+                    {/if}
+                </footer>
             {/if}
         </div>
     </div>
-</div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    /* ============================================================
+       DialogModal — self-contained, themed via Tailwind v4 tokens.
+       No Bootstrap classes; uses `var(--color-primary)` / `--color-muted`
+       so the design follows the runtime theme.
+       ============================================================ */
+
+    .dm-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 3rem 1rem 1rem;
+        background-color: rgb(15 23 42 / 0.55);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        overflow-y: auto;
+    }
+
+    .dm-panel {
+        position: relative;
+        width: 100%;
+        background-color: rgb(255 255 255);
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.75rem;
+        box-shadow:
+            0 25px 50px -12px rgb(15 23 42 / 0.25),
+            0 12px 24px -8px color-mix(in srgb, var(--color-primary) 18%, transparent),
+            0 0 0 1px rgb(255 255 255 / 0.06) inset;
+        overflow: hidden;
+    }
+
+    /* 3px primary gradient strip across the very top edge of the panel. */
+    .dm-accent {
+        height: 3px;
+        background: linear-gradient(
+            90deg,
+            var(--color-primary) 0%,
+            color-mix(in srgb, var(--color-primary) 60%, white) 50%,
+            var(--color-primary) 100%
+        );
+    }
+
+    /* ---------- Header ---------- */
+    .dm-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid rgb(243 244 246);
+    }
+    .dm-title {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 1.0625rem;
+        font-weight: 600;
+        line-height: 1.4;
+        color: rgb(17 24 39);
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+    .dm-title :global(i),
+    .dm-title :global(svg) {
+        flex-shrink: 0;
+        color: var(--color-primary);
+    }
+    .dm-title > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .dm-close {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0.5rem;
+        background: transparent;
+        color: rgb(156 163 175);
+        font-size: 1.125rem;
+        cursor: pointer;
+        transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
+    }
+    .dm-close:hover {
+        background-color: rgb(243 244 246);
+        color: var(--color-danger);
+        transform: rotate(90deg);
+    }
+    .dm-close:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    /* ---------- Body ---------- */
+    .dm-body {
+        padding: 1.25rem;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        color: rgb(31 41 55);
+        max-height: calc(85vh - 8rem);
+        overflow-y: auto;
+        scrollbar-width: thin;
+    }
+
+    /* ---------- Footer + buttons ---------- */
+    .dm-footer {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.875rem 1.25rem;
+        border-top: 1px solid rgb(243 244 246);
+        background-color: rgb(249 250 251);
+    }
+
+    .dm-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 5.5rem;
+        height: 2.25rem;
+        padding: 0 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        transition:
+            background-color 0.15s ease,
+            border-color 0.15s ease,
+            color 0.15s ease,
+            box-shadow 0.15s ease,
+            transform 0.1s ease;
+    }
+    .dm-btn:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+    .dm-btn:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+    .dm-btn:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+    .dm-btn-cancel {
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        color: rgb(55 65 81);
+    }
+    .dm-btn-cancel:hover:not(:disabled) {
+        background-color: rgb(243 244 246);
+        border-color: rgb(209 213 219);
+        color: rgb(17 24 39);
+    }
+
+    .dm-btn-confirm {
+        border: 1px solid var(--color-primary);
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+            0 4px 12px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
+    }
+    .dm-btn-confirm:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.12),
+            0 8px 20px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
+    }
+
+    /* ---------- Dark mode ---------- */
+    :global(.dark) .dm-overlay {
+        background-color: rgb(0 0 0 / 0.65);
+    }
+    :global(.dark) .dm-panel {
+        background-color: rgb(31 41 55);
+        border-color: rgb(55 65 81);
+    }
+    :global(.dark) .dm-header,
+    :global(.dark) .dm-footer {
+        border-color: rgb(55 65 81);
+    }
+    :global(.dark) .dm-footer {
+        background-color: rgb(17 24 39);
+    }
+    :global(.dark) .dm-title {
+        color: rgb(243 244 246);
+    }
+    :global(.dark) .dm-body {
+        color: rgb(229 231 235);
+    }
+    :global(.dark) .dm-btn-cancel {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+    :global(.dark) .dm-btn-cancel:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
index ed4eb957..85ad659a 100644
--- a/src/lib/common/modals/PlainModal.svelte
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -1,5 +1,6 @@
 <script>
-    import { fade } from 'svelte/transition';
+    import { fade, fly } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
 
     let {
         isOpen = false,
@@ -13,15 +14,15 @@
     } = $props();
 
     /** @type {Record<string, string>} */
-    const sizeClasses = {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-        '2xl': 'max-w-2xl',
-        '3xl': 'max-w-3xl',
-        '4xl': 'max-w-4xl',
-        '5xl': 'max-w-5xl'
+    const sizeWidths = {
+        sm: '24rem',
+        md: '28rem',
+        lg: '32rem',
+        xl: '36rem',
+        '2xl': '42rem',
+        '3xl': '48rem',
+        '4xl': '56rem',
+        '5xl': '64rem'
     };
 
     /** @param {MouseEvent} e */
@@ -33,36 +34,165 @@
 </script>
 
 {#if isOpen}
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-    class={`fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50 ${containerClasses}`}
-    transition:fade={{ duration: 150 }}
-    onclick={handleBackdropClick}
->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
     <div
-        class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-lg'} mx-4 modal-content`}
-        style={containerStyles}
+        class={`pm-overlay ${containerClasses}`}
+        transition:fade={{ duration: 150 }}
+        onclick={handleBackdropClick}
     >
-        <!-- Header -->
-        {#if title}
-        <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 modal-title">
-            <div class="font-semibold text-lg">{title}</div>
-            <button
-                type="button"
-                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer"
-                aria-label="Close"
-                onclick={() => toggleModal()}
-            >
-                <i class="mdi mdi-close text-xl"></i>
-            </button>
-        </div>
-        {/if}
+        <div
+            class="pm-panel modal-content"
+            style={`max-width: ${sizeWidths[size] || sizeWidths.xl}; ${containerStyles}`}
+            transition:fly={{ y: -16, duration: 200, easing: quintOut }}
+            role="dialog"
+            aria-modal="true"
+        >
+            <!-- Primary accent strip — same branded edge as DialogModal. -->
+            <div class="pm-accent"></div>
+
+            {#if title}
+                <header class="pm-header modal-title">
+                    <div class="pm-title">{title}</div>
+                    <button
+                        type="button"
+                        class="pm-close"
+                        aria-label="Close"
+                        onclick={() => toggleModal()}
+                    >
+                        <i class="mdi mdi-close"></i>
+                    </button>
+                </header>
+            {/if}
 
-        <!-- Body -->
-        <div class="p-3 modal-body" style={bodyStyles}>
-            {@render children?.()}
+            <div class="pm-body modal-body" style={bodyStyles}>
+                {@render children?.()}
+            </div>
         </div>
     </div>
-</div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    /* ============================================================
+       PlainModal — self-contained, themed via Tailwind v4 tokens.
+       Mirrors DialogModal's look (backdrop blur, primary accent strip,
+       layered shadow) but without the action footer. The legacy
+       `.modal-content` / `.modal-title` / `.modal-body` class names are
+       kept on the markup for backwards-compat with any external
+       `:global()` overrides that pre-date the migration.
+       ============================================================ */
+
+    .pm-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 3rem 1rem 1rem;
+        background-color: rgb(15 23 42 / 0.55);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        overflow-y: auto;
+    }
+
+    .pm-panel {
+        position: relative;
+        width: 100%;
+        background-color: rgb(255 255 255);
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.75rem;
+        box-shadow:
+            0 25px 50px -12px rgb(15 23 42 / 0.25),
+            0 12px 24px -8px color-mix(in srgb, var(--color-primary) 18%, transparent),
+            0 0 0 1px rgb(255 255 255 / 0.06) inset;
+        overflow: hidden;
+    }
+
+    .pm-accent {
+        height: 3px;
+        background: linear-gradient(
+            90deg,
+            var(--color-primary) 0%,
+            color-mix(in srgb, var(--color-primary) 60%, white) 50%,
+            var(--color-primary) 100%
+        );
+    }
+
+    /* ---------- Header ---------- */
+    .pm-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        padding: 1rem 1.25rem;
+        border-bottom: 1px solid rgb(243 244 246);
+    }
+    .pm-title {
+        font-size: 1.0625rem;
+        font-weight: 600;
+        line-height: 1.4;
+        color: rgb(17 24 39);
+        min-width: 0;
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .pm-close {
+        flex-shrink: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        border-radius: 0.5rem;
+        background: transparent;
+        color: rgb(156 163 175);
+        font-size: 1.125rem;
+        cursor: pointer;
+        transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
+    }
+    .pm-close:hover {
+        background-color: rgb(243 244 246);
+        color: var(--color-danger);
+        transform: rotate(90deg);
+    }
+    .pm-close:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    /* ---------- Body ---------- */
+    .pm-body {
+        padding: 1.25rem;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        color: rgb(31 41 55);
+        max-height: calc(90vh - 6rem);
+        overflow-y: auto;
+        scrollbar-width: thin;
+    }
+
+    /* ---------- Dark mode ---------- */
+    :global(.dark) .pm-overlay {
+        background-color: rgb(0 0 0 / 0.65);
+    }
+    :global(.dark) .pm-panel {
+        background-color: rgb(31 41 55);
+        border-color: rgb(55 65 81);
+    }
+    :global(.dark) .pm-header {
+        border-color: rgb(55 65 81);
+    }
+    :global(.dark) .pm-title {
+        color: rgb(243 244 246);
+    }
+    :global(.dark) .pm-body {
+        color: rgb(229 231 235);
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/common/modals/StateModal.svelte b/src/lib/common/modals/StateModal.svelte
index 4a4c5b66..c98057e2 100644
--- a/src/lib/common/modals/StateModal.svelte
+++ b/src/lib/common/modals/StateModal.svelte
@@ -1,5 +1,6 @@
 <script>
-    import { fade } from 'svelte/transition';
+    import { fade, slide } from 'svelte/transition';
+    import { cubicOut } from 'svelte/easing';
     import { untrack } from 'svelte';
     import _ from "lodash";
 
@@ -7,6 +8,7 @@
         isOpen = false,
         size = 'xl',
         className = '',
+        inline = false,
         toggleModal = () => {},
         confirm = () => {},
         cancel = () => {},
@@ -96,8 +98,8 @@
         states = states.filter((x, idx) => idx !== index);
     }
 
-    /** 
-     * @param {any} e 
+    /**
+     * @param {any} e
      * @param {number} index
     */
     function changeKey(e, index) {
@@ -110,8 +112,8 @@
         });
     }
 
-    /** 
-     * @param {any} e 
+    /**
+     * @param {any} e
      * @param {number} index
     */
     function changeValue(e, index) {
@@ -124,8 +126,8 @@
         });
     }
 
-    /** 
-     * @param {any} e 
+    /**
+     * @param {any} e
      * @param {number} index
     */
     function changeActiveRounds(e, index) {
@@ -153,120 +155,476 @@
     }
 </script>
 
-{#if isOpen}
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-    class="fixed inset-0 z-[9999] flex items-start justify-center pt-[2%] bg-black/50"
-    transition:fade={{ duration: 150 }}
-    onclick={handleBackdropClick}
->
-    <div class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-xl'} mx-4 ${className}`}>
-        <!-- Header -->
-        <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="font-semibold text-lg">{title}</div>
+{#snippet addButton()}
+    <button
+        type="button"
+        class="stm-add-btn"
+        disabled={states.length >= limit}
+        onclick={() => addState()}
+    >
+        <i class="mdi mdi-plus text-base leading-none"></i>
+        <span>Add</span>
+    </button>
+{/snippet}
+
+{#snippet actionButtons()}
+    <button
+        type="button"
+        class="stm-btn stm-btn-confirm"
+        onclick={(e) => handleConfirm(e)}
+    >
+        Confirm
+    </button>
+    <button
+        type="button"
+        class="stm-btn stm-btn-cancel"
+        onclick={(e) => handleCancel(e)}
+    >
+        Cancel
+    </button>
+{/snippet}
+
+{#snippet panelInner()}
+    <!-- Branded accent strip across the top edge of the panel / inline section. -->
+    <div class="stm-accent"></div>
+
+    <!-- Header (the `stm-header` class is a layout hook used by .stm-inline
+         to pin this row at the top of the flex-column section so it doesn't
+         shrink when many rows are added). -->
+    <div class="stm-header flex items-center justify-between gap-3 px-5 py-3.5 border-b border-gray-200 dark:border-gray-700">
+        <div class="flex items-center gap-2 min-w-0">
+            <span class="stm-title-glyph">
+                <i class="bx bx-cube-alt"></i>
+            </span>
+            <span class="truncate text-[1.0625rem] font-semibold text-gray-900 dark:text-gray-100">{title}</span>
         </div>
+        <span class="stm-count" aria-label={`${states.length} of ${limit}`}>
+            <span class="font-semibold">{states.length}</span><span class="opacity-50">/{limit}</span>
+        </span>
+    </div>
 
-        <!-- Body -->
-        <div class="p-3">
-            <form class="state-form">
-                {#each states as state, idx (idx)}
-                <div class="flex w-full gap-2">
-                    <div class="min-w-0" style="flex: 0.4;">
-                        <div class="mb-2">
-                            {#if idx === 0}
-                            <label for="key">
-                                {`Key ${validateKey ? '(*)' : ''}`}
-                            </label>
-                            {/if}
-                            <input
-                                class={`form-control ${!state.key.isValid ? 'invalid' : ''}`}
-                                placeholder="Enter a key"
-                                value={state.key.data}
-                                maxlength={50}
-                                oninput={(e) => changeKey(e, idx)}
-                            />
-                        </div>
-                    </div>
-                    <div class="min-w-0" style="flex: 0.4;">
-                        <div class="mb-2">
-                            {#if idx === 0}
-                            <label for="value">
-                                {`Value ${validateValue ? '(*)' : ''}`}
-                            </label>
-                            {/if}
-                            <input
-                                class={`form-control ${!state.value.isValid ? 'invalid' : ''}`}
-                                placeholder="Enter a value"
-                                value={state.value.data}
-                                maxlength={1000}
-                                oninput={(e) => changeValue(e, idx)}
-                            />
-                        </div>
-                    </div>
-                    {#if requireActiveRounds}
-                    <div class="flex-1 min-w-0 state-num-input">
-                        <div class="mb-2">
-                            {#if idx === 0}
-                            <label for="value">
-                                {`Active rounds`}
-                            </label>
-                            {/if}
-                            <input
-                                type="number"
-                                class="form-control"
-                                placeholder="Enter a value"
-                                value={state.active_rounds.data}
-                                oninput={(e) => changeActiveRounds(e, idx)}
-                            />
-                        </div>
-                    </div>
+    <!-- Body -->
+    <div class="stm-body px-5 py-4">
+        <form>
+            <div class="stm-rows flex flex-col gap-2.5">
+            {#each states as state, idx (idx)}
+            <div class="flex w-full items-end gap-2">
+                <div class="min-w-0" style="flex: 0.4;">
+                    {#if idx === 0}
+                    <label for={`stm-key-${idx}`} class="stm-label">
+                        {`Key ${validateKey ? '*' : ''}`}
+                    </label>
+                    {/if}
+                    <input
+                        id={`stm-key-${idx}`}
+                        class={`stm-input ${!state.key.isValid ? 'stm-input-invalid' : ''}`}
+                        placeholder="Enter a key"
+                        value={state.key.data}
+                        maxlength={50}
+                        oninput={(e) => changeKey(e, idx)}
+                    />
+                </div>
+                <div class="min-w-0" style="flex: 0.4;">
+                    {#if idx === 0}
+                    <label for={`stm-value-${idx}`} class="stm-label">
+                        {`Value ${validateValue ? '*' : ''}`}
+                    </label>
+                    {/if}
+                    <input
+                        id={`stm-value-${idx}`}
+                        class={`stm-input ${!state.value.isValid ? 'stm-input-invalid' : ''}`}
+                        placeholder="Enter a value"
+                        value={state.value.data}
+                        maxlength={1000}
+                        oninput={(e) => changeValue(e, idx)}
+                    />
+                </div>
+                {#if requireActiveRounds}
+                <div class="min-w-0" style="flex: 0.2;">
+                    {#if idx === 0}
+                    <label for={`stm-rounds-${idx}`} class="stm-label">
+                        {`Active rounds`}
+                    </label>
                     {/if}
-                    <div class="state-delete mb-2 flex items-end flex-shrink-0">
-                        <div class="flex items-center" style={`height: 36px; ${idx === 0 ? 'margin-top: auto;' : ''}`}>
-                            <!-- svelte-ignore a11y_click_events_have_key_events -->
-                            <!-- svelte-ignore a11y_no_static_element_interactions -->
-                            <i
-                                class="bx bxs-no-entry clickable"
-                                class:hide={states.length === 1}
-                                onclick={() => remove(idx)}
-                            ></i>
-                        </div>
-                    </div>
+                    <input
+                        id={`stm-rounds-${idx}`}
+                        type="number"
+                        class="stm-input stm-input-number"
+                        placeholder="Enter a value"
+                        value={state.active_rounds.data}
+                        oninput={(e) => changeActiveRounds(e, idx)}
+                    />
                 </div>
-                {/each}
-                <div class="flex flex-wrap">
-                    <div>
-                        <button
-                            type="button"
-                            class="text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors underline-offset-2 hover:underline bg-transparent border-none p-0 cursor-pointer"
-                            disabled={states.length >= limit}
-                            onclick={() => addState()}
-                        >
-                            Add +
-                        </button>
-                    </div>
+                {/if}
+                <div class="flex-shrink-0">
+                    <button
+                        type="button"
+                        class="stm-remove-btn"
+                        class:invisible={states.length === 1}
+                        aria-label="Remove state"
+                        title="Remove"
+                        onclick={() => remove(idx)}
+                    >
+                        <i class="bx bxs-no-entry"></i>
+                    </button>
                 </div>
-            </form>
+            </div>
+            {/each}
+            </div>
+
+        </form>
+    </div>
+
+    <!-- Footer: Add on the left, Confirm + Cancel grouped on the right,
+         identical in both modal and inline modes. -->
+    <div class="stm-footer flex items-center justify-between gap-2 px-5 py-3 border-t border-gray-200 dark:border-gray-700">
+        {@render addButton()}
+        <div class="flex items-center gap-2">
+            {@render actionButtons()}
         </div>
+    </div>
+{/snippet}
+
 
-        <!-- Footer -->
-        <div class="flex justify-end gap-2 p-3 border-t border-gray-200 dark:border-gray-700">
-            <button
-                type="button"
-                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700 transition-colors"
-                onclick={(e) => handleConfirm(e)}
-            >
-                Confirm
-            </button>
-            <button
-                type="button"
-                class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded hover:bg-gray-300 dark:text-gray-200 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors"
-                onclick={(e) => handleCancel(e)}
-            >
-                Cancel
-            </button>
+{#if isOpen && inline}
+    <section
+        class={`stm-inline ${className}`}
+        aria-label={title}
+        transition:slide={{ duration: 220, easing: cubicOut }}
+    >
+        {@render panelInner()}
+    </section>
+{:else if isOpen}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+        class="stm-overlay"
+        transition:fade={{ duration: 150 }}
+        onclick={handleBackdropClick}
+    >
+        <div
+            class={`stm-panel relative mx-4 w-full ${sizeClasses[size] || 'max-w-xl'} ${className}`}
+            role="dialog"
+            aria-modal="true"
+        >
+            {@render panelInner()}
         </div>
     </div>
-</div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    /* ============================================================
+       StateModal — themed via Tailwind v4 design tokens; no Bootstrap.
+       Layout / spacing live in inline utility classes; this block owns
+       the polish (backdrop blur, accent strip, focus rings, dual-shadow,
+       error shake, dark mode).
+       ============================================================ */
+
+    /* ---------- Overlay ---------- */
+    .stm-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 3rem 1rem 1rem;
+        background-color: rgb(15 23 42 / 0.55);
+        backdrop-filter: blur(4px);
+        -webkit-backdrop-filter: blur(4px);
+        overflow-y: auto;
+    }
+
+    /* ---------- Panel ---------- */
+    .stm-panel {
+        background-color: rgb(255 255 255);
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.875rem;
+        box-shadow:
+            0 25px 50px -12px rgb(15 23 42 / 0.25),
+            0 12px 24px -8px color-mix(in srgb, var(--color-primary) 18%, transparent),
+            0 0 0 1px rgb(255 255 255 / 0.06) inset;
+        overflow: hidden;
+        animation: stm-rise 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    @keyframes stm-rise {
+        from { opacity: 0; transform: translateY(-12px) scale(0.98); }
+        to   { opacity: 1; transform: translateY(0)     scale(1);    }
+    }
+
+    /* ---------- Inline variant ---------- */
+    .stm-inline {
+        display: flex;
+        flex-direction: column;
+        background-color: rgb(255 255 255);
+        border-bottom: 1px solid rgb(229 231 235);
+    }
+
+    /* Pinned children — accent strip, header bar, footer (Confirm/Cancel)
+       — never shrink so the flex body absorbs the spare/overflow space. */
+    .stm-inline :global(.stm-accent),
+    .stm-inline :global(.stm-header),
+    .stm-inline :global(.stm-footer) {
+        flex-shrink: 0;
+    }
+
+    .stm-inline :global(.stm-body) {
+        flex: 1 1 auto;
+    }
+
+
+    .stm-accent {
+        height: 3px;
+        background: linear-gradient(
+            90deg,
+            var(--color-primary) 0%,
+            color-mix(in srgb, var(--color-primary) 60%, white) 50%,
+            var(--color-primary) 100%
+        );
+    }
+
+    /* ---------- Header glyph + count badge ---------- */
+    .stm-title-glyph {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 0.5rem;
+        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        color: var(--color-primary);
+        font-size: 1rem;
+        flex-shrink: 0;
+    }
+    .stm-count {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.125rem 0.5rem;
+        border-radius: 999px;
+        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+        color: var(--color-primary);
+        font-size: 0.75rem;
+        line-height: 1.4;
+        flex-shrink: 0;
+        font-variant-numeric: tabular-nums;
+    }
+
+    .stm-body {
+        min-height: 200px;
+        max-height: 300px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        margin-right: -0.375rem;
+    }
+    .stm-body::-webkit-scrollbar {
+        width: 8px;
+    }
+    .stm-body::-webkit-scrollbar-thumb {
+        background-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
+        border-radius: 999px;
+    }
+    .stm-body::-webkit-scrollbar-thumb:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
+    }
+
+    .stm-label {
+        display: block;
+        margin-bottom: 0.375rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+        color: var(--color-primary);
+    }
+
+    /* ---------- Inputs (replaces Bootstrap .form-control + .invalid) ---------- */
+    .stm-input {
+        width: 100%;
+        height: 2.25rem;
+        padding: 0 0.75rem;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: rgb(17 24 39);
+        background-color: rgb(255 255 255);
+        border: 1px solid rgb(209 213 219);
+        border-radius: 0.5rem;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    }
+    .stm-input::placeholder { color: rgb(156 163 175); }
+    .stm-input:hover:not(:disabled):not(:focus) { border-color: rgb(156 163 175); }
+    .stm-input:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+    .stm-input-invalid {
+        border-color: var(--color-danger);
+        background-color: color-mix(in srgb, var(--color-danger) 5%, white);
+        animation: stm-shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    }
+    .stm-input-invalid:focus {
+        border-color: var(--color-danger);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent);
+    }
+    @keyframes stm-shake {
+        10%, 90% { transform: translateX(-1px); }
+        20%, 80% { transform: translateX(2px); }
+        30%, 50%, 70% { transform: translateX(-3px); }
+        40%, 60% { transform: translateX(3px); }
+    }
+
+    /* Slimmer chrome on number input spinner arrows (Chromium + Firefox) */
+    .stm-input-number {
+        appearance: textfield;
+        -moz-appearance: textfield;
+    }
+    .stm-input-number::-webkit-inner-spin-button,
+    .stm-input-number::-webkit-outer-spin-button {
+        opacity: 0.6;
+        height: 1.5rem;
+    }
+
+    /* ---------- Row remove button (replaces .state-delete + .bx.clickable) ---------- */
+    .stm-remove-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.25rem;
+        height: 2.25rem;
+        margin: 0;
+        padding: 0;
+        border: 1px solid color-mix(in srgb, var(--color-danger) 25%, transparent);
+        border-radius: 0.5rem;
+        background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
+        color: var(--color-danger);
+        font-size: 1rem;
+        cursor: pointer;
+        transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+    }
+    .stm-remove-btn:hover {
+        background-color: color-mix(in srgb, var(--color-danger) 18%, transparent);
+        border-color: color-mix(in srgb, var(--color-danger) 50%, transparent);
+        transform: scale(1.05);
+    }
+    .stm-remove-btn:focus-visible {
+        outline: 2px solid var(--color-danger);
+        outline-offset: 2px;
+    }
+
+    /* ---------- Add row button ----------
+       Lives in the footer next to .stm-btn (Confirm/Cancel) in both
+       modal and inline modes, so its height matches .stm-btn's 2.25rem
+       to keep the action bar visually aligned. */
+    .stm-add-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        height: 2.25rem;
+        padding: 0 0.875rem;
+        border: 1px dashed color-mix(in srgb, var(--color-primary) 45%, transparent);
+        border-radius: 999px;
+        background-color: transparent;
+        color: var(--color-primary);
+        font-size: 0.8125rem;
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+    }
+    .stm-add-btn:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+        border-color: var(--color-primary);
+    }
+    .stm-add-btn:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+    .stm-add-btn:disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+    }
+
+    /* ---------- Footer + buttons ---------- */
+    .stm-footer {
+        background-color: rgb(249 250 251);
+    }
+
+    .stm-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 5.5rem;
+        height: 2.25rem;
+        padding: 0 1rem;
+        border-radius: 0.5rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
+            box-shadow 0.15s ease, transform 0.1s ease;
+    }
+    .stm-btn:active:not(:disabled) { transform: translateY(1px); }
+    .stm-btn:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+    .stm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
+
+    .stm-btn-cancel {
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        color: rgb(55 65 81);
+    }
+    .stm-btn-cancel:hover:not(:disabled) {
+        background-color: rgb(243 244 246);
+        border-color: rgb(209 213 219);
+        color: rgb(17 24 39);
+    }
+
+    .stm-btn-confirm {
+        border: 1px solid var(--color-primary);
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+        box-shadow:
+            0 1px 2px rgb(15 23 42 / 0.08),
+            0 4px 12px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
+    }
+    .stm-btn-confirm:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+        box-shadow:
+            0 1px 2px rgb(15 23 42 / 0.12),
+            0 8px 20px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
+    }
+
+    /* ---------- Dark mode ---------- */
+    :global(.dark) .stm-overlay { background-color: rgb(0 0 0 / 0.65); }
+    :global(.dark) .stm-panel {
+        background-color: rgb(31 41 55);
+        border-color: rgb(55 65 81);
+    }
+    :global(.dark) .stm-inline {
+        background-color: rgb(31 41 55);
+        border-bottom-color: rgb(55 65 81);
+    }
+    :global(.dark) .stm-input {
+        background-color: rgb(17 24 39);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+    :global(.dark) .stm-input::placeholder { color: rgb(107 114 128); }
+    :global(.dark) .stm-input:hover:not(:disabled):not(:focus) { border-color: rgb(107 114 128); }
+    :global(.dark) .stm-footer {
+        background-color: rgb(17 24 39);
+    }
+    :global(.dark) .stm-btn-cancel {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+    :global(.dark) .stm-btn-cancel:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+</style>
diff --git a/src/lib/common/nav-bar/NavBar.svelte b/src/lib/common/nav-bar/NavBar.svelte
index dbdd45c6..d995d0df 100644
--- a/src/lib/common/nav-bar/NavBar.svelte
+++ b/src/lib/common/nav-bar/NavBar.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <ul
-    class="nav nav-tabs {disableDefaultStyles ? '' : 'nav-tabs-default nav-container'} {containerClasses}"
+    class="tab-bar {disableDefaultStyles ? '' : 'tab-bar-default nav-tabs-default'} {containerClasses}"
     style={`${containerStyles}`}
     {id}
     {role}
@@ -19,7 +19,70 @@
 </ul>
 
 <style>
-    .nav-container {
+    /* Base tablist layout — replaces Bootstrap .nav.nav-tabs base. */
+    .tab-bar {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .tab-bar-default {
         height: 100%;
     }
+
+    /* ---------- Tab variants ----------
+       Implemented as :global() rules so they cascade across the NavBar→NavItem
+       component boundary. Both variants share the same active/hover behavior,
+       differing only in how the inactive label is rendered.
+
+       These replace the legacy Bootstrap-driven rules in src/lib/scss/custom/components/_nav.scss
+       that targeted .nav-tabs-default / .nav-tabs-secondary > .nav-item .nav-link. */
+
+    :global(.tab-bar.nav-tabs-default),
+    :global(.tab-bar.nav-tabs-secondary) {
+        border-bottom: 2px solid rgb(229 231 235);
+    }
+    :global(.dark .tab-bar.nav-tabs-default),
+    :global(.dark .tab-bar.nav-tabs-secondary) {
+        border-bottom-color: rgb(55 65 81);
+    }
+
+    /* Inactive label color — default uses body color, secondary uses muted/capitalized */
+    :global(.tab-bar.nav-tabs-default .tab-btn:not(.active):not(:disabled)) {
+        color: var(--color-dark);
+    }
+    :global(.tab-bar.nav-tabs-secondary .tab-btn:not(.active):not(:disabled)) {
+        color: var(--color-secondary);
+        text-transform: capitalize;
+    }
+
+    /* Hover: subtle primary tint */
+    :global(.tab-bar.nav-tabs-default .tab-btn:hover:not(:disabled):not(.active)),
+    :global(.tab-bar.nav-tabs-secondary .tab-btn:hover:not(:disabled):not(.active)) {
+        color: var(--color-primary);
+    }
+
+    /* Active: primary text + animated primary underline (1px below tablist border) */
+    :global(.tab-bar.nav-tabs-default .tab-btn.active),
+    :global(.tab-bar.nav-tabs-secondary .tab-btn.active) {
+        color: var(--color-primary);
+    }
+    :global(.tab-bar.nav-tabs-default .tab-btn::after),
+    :global(.tab-bar.nav-tabs-secondary .tab-btn::after) {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -2px;
+        height: 2px;
+        background: var(--color-primary);
+        transform: scaleX(0);
+        transition: transform 250ms ease;
+    }
+    :global(.tab-bar.nav-tabs-default .tab-btn.active::after),
+    :global(.tab-bar.nav-tabs-secondary .tab-btn.active::after) {
+        transform: scaleX(1);
+    }
 </style>
\ No newline at end of file
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
index 1326af9a..4e8ee883 100644
--- a/src/lib/common/nav-bar/NavItem.svelte
+++ b/src/lib/common/nav-bar/NavItem.svelte
@@ -49,13 +49,13 @@
 </script>
 
 <li
-    class="{disableDefaultContainerStyles ? '' : 'nav-item tab-item'} {containerClasses}"
+    class="{disableDefaultContainerStyles ? '' : 'tab-item'} {containerClasses}"
     style={`${allowDelete ? 'display: flex;' : ''} ${containerStyles}`}
     id={containerId}
     role={containerRole}
 >
     <button
-        class="{disableDefaultNavBtnStyles ? '' : 'tab-btn nav-link'} {navBtnClasses}"
+        class="{disableDefaultNavBtnStyles ? '' : 'tab-btn'} {navBtnClasses}"
         class:active={active}
         style={`${navBtnStyles}`}
         id={navBtnId}
@@ -76,9 +76,7 @@
                 onInput={handleTabInput}
             />
         {:else}
-            <div style="height: 100%;" class="line-align-center ellipsis">
-                <div>{navBtnText}</div>
-            </div>
+            <div class="tab-btn-label">{navBtnText}</div>
         {/if}
     </button>
 
@@ -86,34 +84,88 @@
         {#if deleteIcon}
             {@render deleteIcon()}
         {:else}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
-            <div class="line-align-center">
-                <i
-                    class="mdi mdi-minus-circle text-danger clickable"
-                    onclick={e => handleTabDelete(e)}
-                ></i>
-            </div>
+            <button
+                type="button"
+                class="tab-delete-btn"
+                aria-label="Delete tab"
+                title="Delete"
+                onclick={e => handleTabDelete(e)}
+            >
+                <i class="mdi mdi-minus-circle"></i>
+            </button>
         {/if}
     {/if}
 </li>
 
 <style>
+    /* Base tab item — replaces Bootstrap .nav-item layout. */
     .tab-item {
         flex: 0 1 50%;
+        position: relative;
     }
 
+    /* Base tab button — replaces Bootstrap .nav-link styling.
+       Variant-specific colors (default vs secondary) and the active underline
+       come from NavBar's :global() rules. This block sets the layout, baseline
+       padding, font, and hover/disabled affordances. */
     .tab-btn {
+        position: relative;
         width: 100%;
         height: 100%;
-        border: none !important;
-        color: white;
+        margin: 0;
+        padding: 0.5rem 0.75rem;
+        border: 0;
+        background: transparent;
+        font-family: inherit;
         font-weight: 500;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: var(--color-dark);
+        cursor: pointer;
         display: inline-flex;
+        align-items: center;
         justify-content: center;
+        transition: color 0.15s ease, background-color 0.15s ease;
     }
 
-    .tab-btn.active {
-        color: var(--bs-primary);
+    .tab-btn:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    .tab-btn:disabled {
+        opacity: 0.65;
+        cursor: not-allowed;
+    }
+
+    .tab-btn-label {
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    /* Inline delete button shown alongside the tab when allowDelete=true. */
+    .tab-delete-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 0.25rem;
+        padding: 0 0.25rem;
+        border: 0;
+        background: transparent;
+        color: var(--color-danger);
+        font-size: 1.125rem;
+        line-height: 1;
+        cursor: pointer;
+        transition: transform 0.15s ease, color 0.15s ease;
+    }
+    .tab-delete-btn:hover {
+        transform: scale(1.1);
+    }
+    .tab-delete-btn:focus-visible {
+        outline: 2px solid var(--color-danger);
+        outline-offset: 2px;
+        border-radius: 0.25rem;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/common/shared/Breadcrumb.svelte b/src/lib/common/shared/Breadcrumb.svelte
index 0ad3f342..08acde2f 100644
--- a/src/lib/common/shared/Breadcrumb.svelte
+++ b/src/lib/common/shared/Breadcrumb.svelte
@@ -2,20 +2,11 @@
 	let { title = '', pagetitle = '' } = $props();
 </script>
 
-<div class="row">
-	<div class="col-12">
-		<div class="page-title-box d-sm-flex align-items-center justify-content-between">
-			<h4 class="mb-sm-0 font-size-18">{pagetitle}</h4>
-			<div class="page-title-right">
-				<ol class="breadcrumb m-0">
-					<li class="breadcrumb-item">
-						<span class="breadcrumb-link disabled">{title}</span>
-					</li>
-					<li class="breadcrumb-item active" aria-current="page">
-						{pagetitle}
-					</li>
-				</ol>
-			</div>
-		</div>
-	</div>
+<div class="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+	<h4 class="text-lg font-medium text-dark dark:text-gray-100">{pagetitle}</h4>
+	<ol class="flex items-center gap-1 text-sm text-muted">
+		<li class="text-gray-500">{title}</li>
+		<li aria-hidden="true" class="text-gray-400">/</li>
+		<li class="font-medium text-primary" aria-current="page">{pagetitle}</li>
+	</ol>
 </div>
diff --git a/src/lib/common/shared/BubbleChat.svelte b/src/lib/common/shared/BubbleChat.svelte
index 704ef9ef..a8230d91 100644
--- a/src/lib/common/shared/BubbleChat.svelte
+++ b/src/lib/common/shared/BubbleChat.svelte
@@ -16,12 +16,12 @@
 </script>
 
 <div
-    class="{disableDefaultStyles ? '' : 'chat-bubble-container'} {containerClasses}"
+    class="{disableDefaultStyles ? '' : 'bc-container'} {containerClasses}"
     style={`${containerStyles}`}
 >
-    <div class="chat-bubble">
+    <div class="bc-bubble">
         <div
-            class="bubble-delete clickable"
+            class="bc-delete cursor-pointer"
             role="button"
             tabindex="0"
             onclick={handleClose}
@@ -29,8 +29,104 @@
         >
             <i class="mdi mdi-close"></i>
         </div>
-        <div class="bubble-text">
+        <div class="bc-text">
             {text}
         </div>
     </div>
 </div>
+
+<style>
+    /* Ported from src/lib/scss/custom/components/_chat.scss (now removed)
+       and polished into a glass-card aesthetic. Used by LiveChatEntry to
+       surface transient assistant notifications above the floating
+       chatbot icon on the bottom-right of the viewport. */
+    .bc-container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* The bubble itself. A diagonal gradient (lighter top-left → darker
+       bottom-right) gives depth without losing the primary tint; a faint
+       white inset highlight at the top edge plus a layered shadow
+       (primary-tinted glow + neutral drop) make the bubble feel like
+       it's floating above the page. All tints derive from
+       `var(--color-primary)` so the bubble re-themes automatically when
+       PUBLIC_PRIMARY_COLOR is overridden in +layout.svelte. */
+    .bc-bubble {
+        position: relative;
+        margin: 5px 30px 0 5px;
+        min-width: 200px;
+        max-width: 300px;
+        background: linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 95%, white 5%) 0%,
+            color-mix(in srgb, var(--color-primary) 85%, black 15%) 100%
+        );
+        color: white;
+        border: 1px solid color-mix(in srgb, white 18%, transparent);
+        border-radius: 14px;
+        box-shadow:
+            0 12px 28px -8px color-mix(in srgb, var(--color-primary) 45%, transparent),
+            0 4px 10px -2px rgb(0 0 0 / 0.08),
+            inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
+    }
+
+    /* Symmetric downward-pointing tail anchored on the right so it
+       visually angles toward the chatbot icon below. The fill matches
+       the bubble's bottom-gradient color so the tail reads as a smooth
+       continuation of the bubble surface. */
+    .bc-bubble::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        right: 40px;
+        width: 18px;
+        height: 10px;
+        background-color: color-mix(in srgb, var(--color-primary) 85%, black 15%);
+        clip-path: polygon(0 0, 50% 100%, 100% 0);
+    }
+
+    /* Notification body. Extra right margin clears the absolute-positioned
+       close button so longer text never runs underneath it. */
+    .bc-text {
+        margin: 14px 36px 16px 18px;
+        font-size: 0.875rem;
+        line-height: 1.55;
+        height: fit-content;
+        max-height: 100px;
+        overflow-y: auto;
+        scrollbar-width: none;
+    }
+    .bc-text::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Close button — small rounded hit area with a subtle hover pill so
+       the icon doesn't compete with the message text in the resting
+       state but still feels interactive on hover/focus. */
+    .bc-delete {
+        position: absolute;
+        top: 4px;
+        right: 6px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 6px;
+        color: color-mix(in srgb, white 80%, transparent);
+        line-height: 1;
+        transition: background-color 150ms ease, color 150ms ease;
+    }
+    .bc-delete:hover {
+        background-color: color-mix(in srgb, white 18%, transparent);
+        color: white;
+    }
+    .bc-delete:focus-visible {
+        outline: 2px solid white;
+        outline-offset: 1px;
+    }
+    .bc-delete > :global(i) {
+        font-size: 16px;
+    }
+</style>
diff --git a/src/lib/common/shared/CodeScript.svelte b/src/lib/common/shared/CodeScript.svelte
index 19bc8fa9..0710e59c 100644
--- a/src/lib/common/shared/CodeScript.svelte
+++ b/src/lib/common/shared/CodeScript.svelte
@@ -68,4 +68,15 @@
     extensions={extensions}
     value={scriptText}
     onchange={handleChange}
-/>
\ No newline at end of file
+/>
+
+<style>
+    /* CodeMirror applies the class to its root element which lives outside
+       this component's scope hash, so the rule must be :global to reach it. */
+    :global(.code-script-container) {
+        min-height: 200px;
+        max-height: 500px;
+        overflow: auto;
+        scrollbar-width: thin;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/common/shared/Label.svelte b/src/lib/common/shared/Label.svelte
index 26778702..a9a8d679 100644
--- a/src/lib/common/shared/Label.svelte
+++ b/src/lib/common/shared/Label.svelte
@@ -3,6 +3,7 @@
         text = "",
         className = "",
         style = "",
+        /** One of: primary | secondary | success | info | warning | danger */
         color = "primary",
         ellipsis = false,
         /** @type {string | number} */
@@ -12,62 +13,151 @@
     } = $props();
 
     /**
-	 * @param {any} e
-	 * @param {string | number} idx
-	 */
+     * @param {any} e
+     * @param {string | number} idx
+     */
     function handleClose(e, idx) {
         e.preventDefault();
+        e.stopPropagation();
         onClose?.(idx);
     }
 </script>
 
-<div class={`label-container ${className}`} style={`${style}`}>
-    <button class={`btn btn-${color} btn-sm label-btn`}>
-        <div style="display: flex;">
-            <span class={`me-2 label-text ${ellipsis ? 'label-ellipsis' : 'd-none d-sm-inline-block'}`}>
-                {text}
-            </span>
-            <i
-                class="mdi mdi-window-close label-close"
-                role="button"
-                tabindex="0"
-                onkeydown={() => {}}
-                onclick={(e) => handleClose(e, index)}
-            >
-            </i>
-        </div>
+<span class={`cl-chip cl-chip-${color} ${className}`} style={style}>
+    <span class={`cl-text ${ellipsis ? 'cl-ellipsis' : ''}`}>
+        {text}
+    </span>
+    <button
+        type="button"
+        class="cl-close"
+        aria-label={`Remove ${text}`}
+        title="Remove"
+        onclick={(e) => handleClose(e, index)}
+    >
+        <i class="mdi mdi-close"></i>
     </button>
-</div>
+</span>
 
 
 <style>
-    .label-container {
-        display: inline-block;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        margin-right: 5px;
-    }
-
-    .label-btn {
-        cursor: default;
-        font-size: 12px;
-        border-radius: 15px;
+    .cl-chip {
+        display: inline-flex;
+        align-items: center;
+        align-self: center;
+        gap: 0.25rem;
+        padding: 0.1875rem 0.25rem 0.1875rem 0.625rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1;
+        letter-spacing: 0.01em;
+        border: 1px solid transparent;
+        border-radius: 999px;
+        background-color: transparent;
+        vertical-align: middle;
+        max-width: 100%;
+        transition: background-color 0.15s ease, border-color 0.15s ease;
     }
 
-    .label-text {
-        text-align: left;
+    .cl-text {
+        flex: 0 1 auto;
+        min-width: 0;
     }
 
-    .label-ellipsis {
+    /* When ellipsis is requested, cap width and truncate.
+       Otherwise the chip grows with its content. */
+    .cl-ellipsis {
+        max-width: 10rem;
+        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: 120px;
     }
 
-    .label-close {
-        cursor: pointer;
-        display: flex;
+    /* Close button — inherits the chip's color so the X reads as part
+       of the same tint family. Hover gives it a subtle dimmer pill so
+       users can see it's interactive without breaking the chip's look. */
+    .cl-close {
+        display: inline-flex;
         align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 1.125rem;
+        height: 1.125rem;
+        padding: 0;
+        margin: 0;
+        background-color: transparent;
+        border: 0;
+        border-radius: 999px;
+        color: inherit;
+        opacity: 0.65;
+        cursor: pointer;
+        transition: background-color 0.15s ease, opacity 0.12s ease, transform 0.12s ease;
+    }
+    .cl-close:hover {
+        opacity: 1;
+        background-color: rgb(0 0 0 / 0.1);
+    }
+    .cl-close:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 1px;
+        opacity: 1;
+    }
+    .cl-close:active {
+        transform: scale(0.9);
+    }
+    .cl-close i {
+        font-size: 0.875rem;
+        line-height: 1;
+    }
+
+    /* Color variants — soft tinted bg, same-color text + border.
+       Uses color-mix so the chip's tone shifts automatically when the
+       deployment's PUBLIC_PRIMARY_COLOR overrides --color-primary. */
+    .cl-chip-primary {
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+        border-color:     color-mix(in srgb, var(--color-primary) 30%, transparent);
+        color: var(--color-primary);
+    }
+    .cl-chip-secondary {
+        background-color: color-mix(in srgb, var(--color-secondary) 12%, transparent);
+        border-color:     color-mix(in srgb, var(--color-secondary) 30%, transparent);
+        color: var(--color-secondary);
+    }
+    .cl-chip-success {
+        background-color: color-mix(in srgb, var(--color-success) 14%, transparent);
+        border-color:     color-mix(in srgb, var(--color-success) 32%, transparent);
+        color: var(--color-success);
+    }
+    .cl-chip-info {
+        background-color: color-mix(in srgb, var(--color-info) 14%, transparent);
+        border-color:     color-mix(in srgb, var(--color-info) 32%, transparent);
+        color: var(--color-info);
+    }
+    /* Warning yellow has poor contrast as text — darken it slightly for
+       readability while keeping the bg/border in the warning family. */
+    .cl-chip-warning {
+        background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
+        border-color:     color-mix(in srgb, var(--color-warning) 35%, transparent);
+        color: color-mix(in srgb, var(--color-warning), black 28%);
+    }
+    .cl-chip-danger {
+        background-color: color-mix(in srgb, var(--color-danger) 14%, transparent);
+        border-color:     color-mix(in srgb, var(--color-danger) 32%, transparent);
+        color: var(--color-danger);
+    }
+
+    /* Dark mode: bump the bg/border tint so chips remain legible on a
+       dark panel; text color stays the same. Close-button hover scrim
+       flips to a light overlay since black-on-dark is invisible. */
+    :global(.dark) .cl-chip-primary,
+    :global(.dark) .cl-chip-secondary,
+    :global(.dark) .cl-chip-success,
+    :global(.dark) .cl-chip-info,
+    :global(.dark) .cl-chip-warning,
+    :global(.dark) .cl-chip-danger {
+        background-color: color-mix(in srgb, currentColor 18%, transparent);
+        border-color:     color-mix(in srgb, currentColor 38%, transparent);
+    }
+    :global(.dark) .cl-close:hover {
+        background-color: rgb(255 255 255 / 0.18);
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/common/shared/LiveChatEntry.svelte b/src/lib/common/shared/LiveChatEntry.svelte
index a1a81ba1..47484ee4 100644
--- a/src/lib/common/shared/LiveChatEntry.svelte
+++ b/src/lib/common/shared/LiveChatEntry.svelte
@@ -64,7 +64,7 @@
     }
 </script>
 
-<div class="chatbot-container fixed-bottom float-bottom-right">
+<div class="chatbot-container float-bottom-right fixed bottom-0 left-0 right-0 z-[1030]">
     {#if showBubbleMsg}
         <div transition:fade={{ delay: 50, duration: 200 }}>
             <BubbleChat text={receivedMsg} close={() => closeBubbleMsg()} />
@@ -73,9 +73,9 @@
 
     <iframe
         src={chatUrl}
-        width={'380px'} 
+        width={'380px'}
         height={'650px'}
-        class={`border border-2 rounded-3 m-3 float-end ${showChatBox ? 'chat-iframe' : 'hide'}`}
+        class={`m-4 self-end rounded-lg border-2 border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-800 ${showChatBox ? 'chat-iframe' : 'hidden'}`}
         title="live chat"
         id={CHAT_FRAME_ID}
     >
@@ -84,11 +84,16 @@
     {#if !showChatBox}
         <div
             id="chatbot-icon"
-            class="chatbot-icon mb-3 float-end wave-effect"
+            class="chatbot-icon wave-effect mb-4 self-end"
             transition:fade={{ delay: 50, duration: 200 }}
         >
-            <button class="btn btn-transparent chat-icon-btn" onclick={() => openChatBox()}>
-                <img alt="live chat" class="avatar-md rounded-circle" src={PUBLIC_LIVECHAT_ENTRY_ICON} />
+            <button
+                type="button"
+                class="chat-icon-btn cursor-pointer rounded-full border-0 bg-transparent p-0 transition-transform hover:scale-105 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                aria-label="Open live chat"
+                onclick={() => openChatBox()}
+            >
+                <img alt="live chat" class="h-20 w-20 rounded-full shadow-lg" src={PUBLIC_LIVECHAT_ENTRY_ICON} />
             </button>
         </div>
     {/if}
diff --git a/src/lib/common/shared/PlainPagination.svelte b/src/lib/common/shared/PlainPagination.svelte
index 99c50fe9..09278fde 100644
--- a/src/lib/common/shared/PlainPagination.svelte
+++ b/src/lib/common/shared/PlainPagination.svelte
@@ -39,37 +39,100 @@
     }
 </script>
 
-<div class="row mb-3">
-	<div class="col-lg-12">
-		<div class="d-flex justify-content-center">
-			<nav aria-label="Page navigation example" id="pagination-element" class="mb-0">
-				<div class="pagination-block pagination pagination-rounded">
-					<!-- svelte-ignore a11y_invalid_attribute -->
-					<a href="javascript:void(0);" class={`page-link outline-none ${disableBackward ? 'disabled' : ''}`} id="page-first" aria-label="First page" onclick={(e) => { handlePageTo(e, firstPage); }}>
-						<i class="bx bx-chevrons-left align-middle"></i>
-					</a>
-					<!-- svelte-ignore a11y_invalid_attribute -->
-					<a href="javascript:void(0);" class={`page-link outline-none ${disableBackward ? 'disabled' : ''}`} id="page-prev" aria-label="Previous page" onclick={(e) => { handlePageTo(e, pagination.page - 1); }}>
-						<i class="bx bx-chevron-left align-middle"></i>
-					</a>
+<div class="mt-4 flex justify-center">
+	<nav aria-label="Page navigation" class="inline-flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-100 dark:bg-gray-700/50 dark:ring-gray-700">
+		<!-- svelte-ignore a11y_invalid_attribute -->
+		<a
+			href="javascript:void(0);"
+			class="page-btn {disableBackward ? 'is-disabled' : ''}"
+			aria-label="First page"
+			aria-disabled={disableBackward}
+			onclick={(e) => handlePageTo(e, firstPage)}
+		>
+			<i class="bx bx-chevrons-left text-base leading-none"></i>
+		</a>
+		<!-- svelte-ignore a11y_invalid_attribute -->
+		<a
+			href="javascript:void(0);"
+			class="page-btn {disableBackward ? 'is-disabled' : ''}"
+			aria-label="Previous page"
+			aria-disabled={disableBackward}
+			onclick={(e) => handlePageTo(e, pagination.page - 1)}
+		>
+			<i class="bx bx-chevron-left text-base leading-none"></i>
+		</a>
 
-					{#each pages as page}
-						<span id="page-num" class="outline-none pagination">
-							<!-- svelte-ignore a11y_invalid_attribute -->
-							<a href="javascript:void(0);" class={`page-link clickPageNumber ${pagination.page === page ? 'active' : ''}`} aria-current={pagination.page === page ? 'page' : undefined} onclick={(e) => handlePageTo(e, page)}>{page}</a>
-						</span>
-					{/each}
+		{#each pages as page}
+			<!-- svelte-ignore a11y_invalid_attribute -->
+			<a
+				href="javascript:void(0);"
+				class="page-btn page-num {page === pagination.page ? 'is-active' : ''}"
+				aria-current={pagination.page === page ? 'page' : undefined}
+				onclick={(e) => handlePageTo(e, page)}
+			>
+				{page}
+			</a>
+		{/each}
 
-					<!-- svelte-ignore a11y_invalid_attribute -->
-					<a href="javascript:void(0);" class={`page-link outline-none ${disableForward ? 'disabled' : ''}`} id="page-next" aria-label="Next page" onclick={(e) => { handlePageTo(e, pagination.page + 1); }}>
-						<i class="bx bx-chevron-right align-middle"></i>
-					</a>
-					<!-- svelte-ignore a11y_invalid_attribute -->
-					<a href="javascript:void(0);" class={`page-link outline-none ${disableForward ? 'disabled' : ''}`} id="page-last" aria-label="Last page" onclick={(e) => { handlePageTo(e, totalPages); }}>
-						<i class="bx bx-chevrons-right align-middle"></i>
-					</a>
-				</div>
-			</nav>
-		</div>
-	</div>
-</div>
\ No newline at end of file
+		<!-- svelte-ignore a11y_invalid_attribute -->
+		<a
+			href="javascript:void(0);"
+			class="page-btn {disableForward ? 'is-disabled' : ''}"
+			aria-label="Next page"
+			aria-disabled={disableForward}
+			onclick={(e) => handlePageTo(e, pagination.page + 1)}
+		>
+			<i class="bx bx-chevron-right text-base leading-none"></i>
+		</a>
+		<!-- svelte-ignore a11y_invalid_attribute -->
+		<a
+			href="javascript:void(0);"
+			class="page-btn {disableForward ? 'is-disabled' : ''}"
+			aria-label="Last page"
+			aria-disabled={disableForward}
+			onclick={(e) => handlePageTo(e, totalPages)}
+		>
+			<i class="bx bx-chevrons-right text-base leading-none"></i>
+		</a>
+	</nav>
+</div>
+
+<style>
+	.page-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2rem;
+		height: 2rem;
+		padding: 0 0.5rem;
+		border-radius: 0.375rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--color-muted);
+		text-decoration: none;
+		transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+	}
+
+	.page-btn:hover:not(.is-disabled):not(.is-active) {
+		background-color: rgb(255 255 255);
+		color: var(--color-primary);
+		box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+	}
+
+	:global(.dark) .page-btn:hover:not(.is-disabled):not(.is-active) {
+		background-color: rgb(31 41 55);
+		color: rgb(255 255 255);
+	}
+
+	.page-btn.is-active {
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
+	}
+
+	.page-btn.is-disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/common/shared/RemoteSearchInput.svelte b/src/lib/common/shared/RemoteSearchInput.svelte
index 17044f32..c5b50f80 100644
--- a/src/lib/common/shared/RemoteSearchInput.svelte
+++ b/src/lib/common/shared/RemoteSearchInput.svelte
@@ -75,24 +75,31 @@
 
 <svelte:document onclick={handleClickOutside} />
 
-<div class="position-relative scrollable-dropdown">
-	<div>
-		<input type="text" class="form-control" bind:value oninput={handleInput} maxlength={maxLength} {disabled} {placeholder} />
+<div class="scrollable-dropdown">
+	<div class="remote-search-field">
+		<i class="bx bx-search-alt remote-search-prefix"></i>
+		<input
+			type="text"
+			class="remote-search-input"
+			bind:value
+			oninput={handleInput}
+			maxlength={maxLength}
+			{disabled}
+			{placeholder}
+		/>
 	</div>
 	{#if isOpen && (searchResults.length > 0 || loading)}
-		<ul class="dropdown-menu show w-100 thin-scrollbar">
+		<ul class="remote-search-menu thin-scrollbar">
 			{#if loading}
-				<li class="text-center">
-					<div class="spinner-border spinner-border-sm" role="status">
-						<span class="visually-hidden">Loading...</span>
-					</div>
+				<li class="remote-search-loading">
+					<span class="remote-search-spinner" role="status" aria-label="Loading"></span>
 				</li>
 			{:else}
 				{#each searchResults as item, index (index)}
 					<li>
 						<button
 							type="button"
-							class="dropdown-item"
+							class="remote-search-result"
 							class:active={value === item}
 							title={item}
 							onclick={() => selectResult(item)}
@@ -105,3 +112,133 @@
 		</ul>
 	{/if}
 </div>
+
+<style>
+	/* ============================================================
+	   RemoteSearchInput — self-contained baseline styling.
+	   Page-level :global() overrides (.conv-state-search,
+	   .instruct-state-search) still win where present via their
+	   higher-specificity ancestor selectors.
+	   ============================================================ */
+
+	.scrollable-dropdown {
+		position: relative;
+	}
+
+	.remote-search-field {
+		position: relative;
+	}
+
+	.remote-search-prefix {
+		position: absolute;
+		left: 0.625rem;
+		top: 50%;
+		transform: translateY(-50%);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1rem;
+		line-height: 1;
+		color: rgb(156 163 175);
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	/* Override Bootstrap form-control to match the migrated input look. */
+	.remote-search-input {
+		width: 100%;
+		height: 2.5rem;
+		padding: 0 0.75rem 0 2rem;
+		margin: 0;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		background-color: rgb(255 255 255);
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: rgb(31 41 55);
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	}
+	.remote-search-input::placeholder {
+		color: var(--color-muted);
+		opacity: 1;
+	}
+	.remote-search-input:focus {
+		outline: 0;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 1px var(--color-primary);
+	}
+	.remote-search-input:disabled {
+		background-color: rgb(249 250 251);
+		color: var(--color-muted);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	/* Dropdown panel — same soft shadow / radius vocabulary as Select.
+	   Replaces the Bootstrap-supplied .dropdown-menu / .dropdown-item pair. */
+	.remote-search-menu {
+		list-style: none;
+		margin: 0.25rem 0 0;
+		padding: 0.25rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.5rem;
+		background-color: rgb(255 255 255);
+		box-shadow:
+			0 10px 25px -5px rgb(0 0 0 / 0.1),
+			0 8px 10px -6px rgb(0 0 0 / 0.05);
+		width: 100%;
+		max-height: 260px;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		position: absolute;
+		left: 0;
+		right: 0;
+		z-index: 99;
+	}
+
+	.remote-search-result {
+		display: block;
+		width: 100%;
+		padding: 0.375rem 0.625rem;
+		margin: 0;
+		border: 0;
+		border-radius: 0.25rem;
+		background-color: transparent;
+		color: rgb(31 41 55);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		text-align: left;
+		cursor: pointer;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		transition: background-color 0.12s ease, color 0.12s ease;
+	}
+	.remote-search-result:hover,
+	.remote-search-result.active {
+		background-color: rgb(243 244 246);
+		color: var(--color-primary);
+	}
+
+	.remote-search-loading {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem;
+	}
+
+	/* CSS-only spinner — replaces Bootstrap's `.spinner-border .spinner-border-sm`
+	   so the component no longer depends on Bootstrap's keyframes. */
+	.remote-search-spinner {
+		display: inline-block;
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+		border-top-color: var(--color-primary);
+		border-radius: 50%;
+		animation: remote-search-spin 0.75s linear infinite;
+	}
+	@keyframes remote-search-spin {
+		to { transform: rotate(360deg); }
+	}
+</style>
diff --git a/src/lib/common/shared/RightSidebar.svelte b/src/lib/common/shared/RightSidebar.svelte
index 24edee5f..ef7ea264 100644
--- a/src/lib/common/shared/RightSidebar.svelte
+++ b/src/lib/common/shared/RightSidebar.svelte
@@ -147,207 +147,91 @@
 	});
 </script>
 
-<div class="right-bar">
-	<div class="h-100" id="right-bar">
-		<div class="rightbar-title d-flex align-items-center px-3 py-4">
-			<h5 class="m-0 me-2">Settings</h5>
-
+<div
+	class="right-bar fixed bottom-0 top-0 right-[calc(-1*(var(--rightbar-width)+10px))] z-[9999] w-full max-w-[var(--rightbar-width)] overflow-y-auto bg-white shadow-2xl transition-[right] duration-200 dark:bg-gray-800"
+>
+	<div class="h-full" id="right-bar">
+		<div class="flex items-center px-3 py-4">
+			<h5 class="m-0 me-2 text-base font-semibold text-dark dark:text-gray-100">Settings</h5>
 			<!-- svelte-ignore a11y_invalid_attribute -->
-			<a href="javascript:void(0);" class="right-bar-toggle ms-auto" aria-label="Close settings" onclick={closebar}>
-				<i class="mdi mdi-close noti-icon"></i>
+			<a
+				href="javascript:void(0);"
+				class="ms-auto inline-flex h-6 w-6 items-center justify-center rounded-full bg-dark text-center text-gray-200 transition-colors hover:bg-black"
+				aria-label="Close settings"
+				onclick={closebar}
+			>
+				<i class="mdi mdi-close text-base"></i>
 			</a>
 		</div>
-		<!-- Sidebar Color -->
-		<div class="p-4" id="sidebaroption">
-			<h6 class="mb-3">Sidebar Color</h6>
-			<hr class="mt-0" />
 
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="sidebar-color"
-					id="sidebar-color-light"
-					checked={sidebarColor == 'light'}
-					onchange={() => changeBodyAttribute('data-sidebar', 'light')}
-				/>
-				<label class="form-check-label" for="sidebar-color-light">Light</label>
-			</div>
-			<div class="form-check form-switch mb-3">
+		{#snippet radioOption(name, id, label, checked, onChange)}
+			<div class="mb-3 flex items-center gap-2 last:mb-0">
 				<input
-					class="form-check-input theme-choice"
+					class="theme-choice h-4 w-4 cursor-pointer accent-primary"
 					type="radio"
-					name="sidebar-color"
-					id="sidebar-color-dark"
-					checked={sidebarColor == 'dark'}
-					onchange={() => changeBodyAttribute('data-sidebar', 'dark')}
+					{name}
+					{id}
+					{checked}
+					onchange={onChange}
 				/>
-				<label class="form-check-label" for="sidebar-color-dark">Dark</label>
-			</div>
-			<div class="form-check form-switch">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="sidebar-color"
-					id="sidebar-color-colored"
-					checked={sidebarColor == 'colored'}
-					onchange={() => changeBodyAttribute('data-sidebar', 'colored')}
-				/>
-				<label class="form-check-label" for="sidebar-color-colored">Colored</label>
+				<label class="cursor-pointer text-sm text-dark dark:text-gray-200" for={id}>{label}</label>
 			</div>
+		{/snippet}
+
+		<!-- Sidebar Color -->
+		<div class="p-4" id="sidebaroption">
+			<h6 class="mb-3 text-sm font-semibold text-dark dark:text-gray-100">Sidebar Color</h6>
+			<hr class="mb-3 mt-0 border-gray-200 dark:border-gray-700" />
+			{@render radioOption('sidebar-color', 'sidebar-color-light', 'Light', sidebarColor == 'light', () => changeBodyAttribute('data-sidebar', 'light'))}
+			{@render radioOption('sidebar-color', 'sidebar-color-dark', 'Dark', sidebarColor == 'dark', () => changeBodyAttribute('data-sidebar', 'dark'))}
+			{@render radioOption('sidebar-color', 'sidebar-color-colored', 'Colored', sidebarColor == 'colored', () => changeBodyAttribute('data-sidebar', 'colored'))}
 		</div>
-		
+
 		<!-- Sidebar Size -->
 		<div class="p-4" id="sidebarsizeoption">
-			<h6 class="mb-3">Sidebar Size</h6>
-			<hr class="mt-0" />
-
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="sidebar-size"
-					id="sidebar-size-light"
-					checked={sidebarSize == 'fluid'}
-					onchange={() => changeBodyAttribute('data-sidebar-size', 'fluid')}
-				/>
-				<label class="form-check-label" for="sidebar-size-fluid">Fluid</label>
-			</div>
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="sidebar-size"
-					id="sidebar-size-small"
-					checked={sidebarSize == 'small'}
-					onchange={() => changeBodyAttribute('data-sidebar-size', 'small')}
-				/>
-				<label class="form-check-label" for="sidebar-size-small">Compact</label>
-			</div>
-			<div class="form-check form-switch">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="sidebar-size"
-					id="sidebar-size-icon"
-					checked={sidebarSize == 'icon'}
-					onchange={() => changeBodyAttribute('data-sidebar-size', 'icon')}
-				/>
-				<label class="form-check-label" for="sidebar-size-icon">Icon</label>
-			</div>
+			<h6 class="mb-3 text-sm font-semibold text-dark dark:text-gray-100">Sidebar Size</h6>
+			<hr class="mb-3 mt-0 border-gray-200 dark:border-gray-700" />
+			{@render radioOption('sidebar-size', 'sidebar-size-fluid', 'Fluid', sidebarSize == 'fluid', () => changeBodyAttribute('data-sidebar-size', 'fluid'))}
+			{@render radioOption('sidebar-size', 'sidebar-size-small', 'Compact', sidebarSize == 'small', () => changeBodyAttribute('data-sidebar-size', 'small'))}
+			{@render radioOption('sidebar-size', 'sidebar-size-icon', 'Icon', sidebarSize == 'icon', () => changeBodyAttribute('data-sidebar-size', 'icon'))}
 		</div>
 
 		<!-- Topbar Theme -->
 		<div class="p-4">
-			<h6 class=" mb-3">Topbar Theme</h6>
-			<hr class="mt-0" />
-
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="topbar-color"
-					id="topbar-color-light"
-					checked={topbarColor == 'light'}
-					onchange={() => changeBodyAttribute('data-topbar', 'light')}
-				/>
-				<label class="form-check-label" for="topbar-color-light">Light</label>
-			</div>
-			<div class="form-check form-switch">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="topbar-color"
-					id="topbar-color-dark"
-					checked={topbarColor == 'dark'}
-					onchange={() => changeBodyAttribute('data-topbar', 'dark')}
-				/>
-				<label class="form-check-label" for="topbar-color-dark">Dark</label>
-			</div>
+			<h6 class="mb-3 text-sm font-semibold text-dark dark:text-gray-100">Topbar Theme</h6>
+			<hr class="mb-3 mt-0 border-gray-200 dark:border-gray-700" />
+			{@render radioOption('topbar-color', 'topbar-color-light', 'Light', topbarColor == 'light', () => changeBodyAttribute('data-topbar', 'light'))}
+			{@render radioOption('topbar-color', 'topbar-color-dark', 'Dark', topbarColor == 'dark', () => changeBodyAttribute('data-topbar', 'dark'))}
 		</div>
 
 		<!-- Layout Width -->
 		<div class="p-4">
-			<h6 class=" mb-3">Layout Width</h6>
-			<hr class="mt-0" />
-
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="layout-width"
-					id="layout-width-fluid"
-					checked={layoutWidth == 'fluid'}
-					onchange={() => changeLayoutwidth('data-layout-size', 'fluid')}
-				/>
-				<label class="form-check-label" for="layout-width-fluid">Fluid</label>
-			</div>
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="layout-width"
-					id="layout-width-boxed"
-					checked={layoutWidth == 'boxed'}
-					onchange={() => changeLayoutwidth('data-layout-size', 'boxed')}
-				/>
-				<label class="form-check-label" for="layout-width-boxed">Boxed</label>
-			</div>
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="layout-width"
-					id="layout-width-boxed"
-					checked={layoutWidth == 'scrollable'}
-					onchange={() => changeLayoutwidth('data-layout-scrollable', 'true')}
-				/>
-				<label class="form-check-label" for="layout-width-scrollable">Scrollable</label>
-			</div>
+			<h6 class="mb-3 text-sm font-semibold text-dark dark:text-gray-100">Layout Width</h6>
+			<hr class="mb-3 mt-0 border-gray-200 dark:border-gray-700" />
+			{@render radioOption('layout-width', 'layout-width-fluid', 'Fluid', layoutWidth == 'fluid', () => changeLayoutwidth('data-layout-size', 'fluid'))}
+			{@render radioOption('layout-width', 'layout-width-boxed', 'Boxed', layoutWidth == 'boxed', () => changeLayoutwidth('data-layout-size', 'boxed'))}
+			{@render radioOption('layout-width', 'layout-width-scrollable', 'Scrollable', layoutWidth == 'scrollable', () => changeLayoutwidth('data-layout-scrollable', 'true'))}
 		</div>
 
-		<!-- Settings -->
-		<hr class="mt-0" />
-		<h6 class="text-center mb-0">Choose Layouts</h6>
+		<!-- Layout Mode -->
+		<hr class="mx-4 mt-0 border-gray-200 dark:border-gray-700" />
+		<h6 class="mb-0 text-center text-sm font-semibold text-dark dark:text-gray-100">Choose Layouts</h6>
 
 		<div class="p-4">
 			<div class="mb-2">
-				<img src='images/layouts/layout-1.jpg' class="img-thumbnail" alt="layout images" />
+				<img src="images/layouts/layout-1.jpg" class="block w-full rounded border border-gray-200 p-1 dark:border-gray-700" alt="layout images" />
 			</div>
+			{@render radioOption('layout-mode', 'layout-mode-light', 'Light', layoutMode == 'light', () => changeLayoutMode('data-bs-theme', 'light'))}
 
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="layout-mode"
-					id="layout-mode-light"
-					checked={layoutMode == 'light'}
-					onchange={() => changeLayoutMode('data-bs-theme', 'light')}
-				/>
-				<label class="form-check-label" for="layout-mode-light">Light</label>
-			</div>
-
-			<div class="mb-2">
-				<img src='images/layouts/layout-2.jpg' class="img-thumbnail" alt="layout images" />
-			</div>
-			<div class="form-check form-switch mb-3">
-				<input
-					class="form-check-input theme-choice"
-					type="radio"
-					name="layout-mode"
-					id="layout-mode-dark"
-					checked={layoutMode == 'dark'}
-					onchange={() => changeLayoutMode('data-bs-theme', 'dark')}
-				/>
-				<label class="form-check-label" for="layout-mode-dark">Dark</label>
+			<div class="mb-2 mt-3">
+				<img src="images/layouts/layout-2.jpg" class="block w-full rounded border border-gray-200 p-1 dark:border-gray-700" alt="layout images" />
 			</div>
+			{@render radioOption('layout-mode', 'layout-mode-dark', 'Dark', layoutMode == 'dark', () => changeLayoutMode('data-bs-theme', 'dark'))}
 		</div>
 	</div>
-	<!-- end slimscroll-menu-->
 </div>
-<!-- /Right-bar -->
 
-<!-- Right bar overlay-->
+<!-- Right bar overlay -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="rightbar-overlay" onclick={closebar}></div>
+<div class="rightbar-overlay fixed inset-0 z-[9998] hidden bg-black/55" onclick={closebar}></div>
diff --git a/src/lib/common/shared/StateSearch.svelte b/src/lib/common/shared/StateSearch.svelte
index a9108d62..e305f52a 100644
--- a/src/lib/common/shared/StateSearch.svelte
+++ b/src/lib/common/shared/StateSearch.svelte
@@ -54,19 +54,19 @@
 >
     {#each states as state, idx (idx)}
         <div class="state-search-item">
-            <div style="flex: 1;">
+            <div class="state-search-field">
                 <RemoteSearchInput
                     value={state.key}
                     maxLength={maxLength}
                     onSearch={e => onSearch(e)}
-                    placeholder="Search States"
+                    placeholder="Search states..."
                     onValueChange={(/** @type {string} */ val) => handleKeyChange(idx, val)}
                 />
             </div>
-            <div style="flex: 1;">
+            <div class="state-search-field">
                 <input
                     type="text"
-                    class="form-control"
+                    class="state-search-value"
                     value={state.value ?? ''}
                     maxlength={maxLength}
                     disabled={!state.key}
@@ -74,31 +74,166 @@
                     oninput={(e) => handleValueChange(idx, /** @type {HTMLInputElement} */ (e.target).value)}
                 />
             </div>
-            <div class="line-align-center" style="flex: 0 0 13px;">
-                <div>
-                    <!-- svelte-ignore a11y_click_events_have_key_events -->
-                    <!-- svelte-ignore a11y_no_static_element_interactions -->
-                    <i
-                        class="bx bxs-no-entry text-danger clickable"
-                        class:hide={states.length === 1}
-                        onclick={() => removeState(idx)}
-                    ></i>
-                </div>
-            </div>
+            <button
+                type="button"
+                class="state-search-remove"
+                class:hide={states.length === 1}
+                disabled={states.length === 1}
+                aria-label="Remove state filter"
+                title="Remove"
+                onclick={() => removeState(idx)}
+            >
+                <i class="bx bxs-no-entry"></i>
+            </button>
         </div>
     {/each}
     {#if states.length < limit}
-        <div class="d-flex justify-content-end">
+        <div class="state-search-actions">
             <button
                 type="button"
-                class="btn btn-link"
-                style="padding-left: 0px;"
+                class="state-search-add"
                 onclick={() => addState()}
             >
-                Add +
+                <i class="mdi mdi-plus"></i>
+                Add
             </button>
-            <div style="flex: 0 0 13px;"></div>
+            <div class="state-search-actions-spacer"></div>
         </div>
     {/if}
 </div>
 
+<style>
+    /* ============================================================
+       StateSearch — self-contained baseline styling.
+       Page-level :global() overrides (e.g. .conv-state-search,
+       .instruct-state-search) still win where present via their
+       higher-specificity ancestor selectors.
+       ============================================================ */
+
+    .state-search-container {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .state-search-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .state-search-field {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    /* Value input (the right-hand input). Overrides Bootstrap form-control
+       to match the height/radius/focus ring used across the migrated UI. */
+    .state-search-value {
+        width: 100%;
+        height: 2.5rem;
+        padding: 0 0.75rem;
+        margin: 0;
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.375rem;
+        background-color: rgb(255 255 255);
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: rgb(31 41 55);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+    }
+    .state-search-value::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+    .state-search-value:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 1px var(--color-primary);
+    }
+    .state-search-value:disabled {
+        background-color: rgb(249 250 251);
+        color: var(--color-muted);
+        cursor: not-allowed;
+        opacity: 0.7;
+    }
+
+    /* Remove button — soft danger pill matching the pattern used in the
+       state/coding KV rows on the instruction testing page. */
+    .state-search-remove {
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-radius: 0.375rem;
+        background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
+        color: var(--color-danger);
+        font-size: 1rem;
+        line-height: 1;
+        cursor: pointer;
+        transition: transform 0.15s ease, background-color 0.15s ease;
+    }
+    .state-search-remove:hover:not(:disabled) {
+        transform: scale(1.08);
+        background-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
+    }
+    .state-search-remove:focus-visible {
+        outline: 2px solid var(--color-danger);
+        outline-offset: 2px;
+    }
+    /* When only one state remains the remove button is hidden but its
+       footprint is preserved so the row stays aligned. */
+    .state-search-remove.hide {
+        visibility: hidden;
+        pointer-events: none;
+    }
+    .state-search-remove :global(i) {
+        line-height: 1;
+    }
+
+    /* Action row (the "Add" link) */
+    .state-search-actions {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 0.5rem;
+        margin-top: 0.125rem;
+    }
+    .state-search-actions-spacer {
+        flex: 0 0 1.75rem;
+    }
+    .state-search-add {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem 0.625rem;
+        border: 0;
+        background: transparent;
+        color: var(--color-primary);
+        font-weight: 500;
+        font-size: 0.8125rem;
+        line-height: 1.4;
+        text-decoration: none;
+        border-radius: 0.375rem;
+        cursor: pointer;
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+    .state-search-add:hover {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+    .state-search-add:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+    .state-search-add :global(i) {
+        font-size: 1rem;
+        line-height: 1;
+    }
+</style>
+
diff --git a/src/lib/common/shared/TablePagination.svelte b/src/lib/common/shared/TablePagination.svelte
index 23777492..ae5094c4 100644
--- a/src/lib/common/shared/TablePagination.svelte
+++ b/src/lib/common/shared/TablePagination.svelte
@@ -1,5 +1,6 @@
 <script>
     import { _ } from 'svelte-i18n'
+    import { formatNumber } from '$lib/helpers/utils/common';
 
     /**
      * @type {{
@@ -43,52 +44,111 @@
     }
 </script>
 
-<div class="row justify-content-between align-items-center">
-    <div class="col-auto me-auto">
-        <p class="text-muted mb-0">{$_('Showing')} <b>{start}</b> {$_('to')} <b>{end}</b> {$_('of')} <b>{pagination.count}</b> {$_('entries')}</p>
-    </div>
-    <div class="col-auto">
-        <div class="card d-inline-block ms-auto mb-0">
-            <div class="card-body p-2">
-                <nav aria-label="Page navigation example" class="mb-0">
-                    <ul class="pagination mb-0">
-                        <li class="page-item">
-                            <!-- svelte-ignore a11y_invalid_attribute -->
-                            <a href="javascript:void(0);" class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Begin" onclick={(e) => handlePageTo(e, firstPage)}>
-                                <span aria-hidden="true">&laquo;&laquo;</span>
-                            </a>
-                        </li>
-                        <li class="page-item">
-                            <!-- svelte-ignore a11y_invalid_attribute -->
-                            <a href="javascript:void(0);" class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Previous" onclick={(e) => handlePageTo(e, pagination.page - 1)}>
-                                <span aria-hidden="true">&laquo;</span>
-                            </a>
-                        </li>
+<div class="mt-4 flex flex-wrap items-center justify-between gap-3">
+    <p class="mb-0 text-sm text-muted">
+        {$_('Showing')}
+        <span class="font-semibold text-dark dark:text-gray-100">{formatNumber(start)}</span>
+        {$_('to')}
+        <span class="font-semibold text-dark dark:text-gray-100">{formatNumber(end)}</span>
+        {$_('of')}
+        <span class="font-semibold text-dark dark:text-gray-100">{formatNumber(pagination.count)}</span>
+        {$_('entries')}
+    </p>
 
-                        {#each pages as page}
-                            <li class={`page-item ${page === pagination.page ? 'active' : ''}`}>
-                                <!-- svelte-ignore a11y_invalid_attribute -->
-                                <a href="javascript:void(0);" class="page-link" aria-current={pagination.page === page ? 'page' : undefined} onclick={(e) => handlePageTo(e, page)}>{page}</a>
-                            </li>
-                        {/each}
+    <nav aria-label="Page navigation" class="inline-flex items-center gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-100 dark:bg-gray-700/50 dark:ring-gray-700">
+        <!-- svelte-ignore a11y_invalid_attribute -->
+        <a
+            href="javascript:void(0);"
+            class="page-btn {disableBackward ? 'is-disabled' : ''}"
+            aria-label="First page"
+            aria-disabled={disableBackward}
+            onclick={(e) => handlePageTo(e, firstPage)}
+        >
+            <i class="bx bx-chevrons-left text-base leading-none"></i>
+        </a>
+        <!-- svelte-ignore a11y_invalid_attribute -->
+        <a
+            href="javascript:void(0);"
+            class="page-btn {disableBackward ? 'is-disabled' : ''}"
+            aria-label="Previous page"
+            aria-disabled={disableBackward}
+            onclick={(e) => handlePageTo(e, pagination.page - 1)}
+        >
+            <i class="bx bx-chevron-left text-base leading-none"></i>
+        </a>
 
-                        <li class="page-item">
-                            <!-- svelte-ignore a11y_invalid_attribute -->
-                            <a href="javascript:void(0);" class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Next" onclick={(e) => handlePageTo(e, pagination.page + 1)}>
-                                <span aria-hidden="true">&raquo;</span>
-                            </a>
-                        </li>
-                        <li class="page-item">
-                            <!-- svelte-ignore a11y_invalid_attribute -->
-                            <a href="javascript:void(0);" class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Last" onclick={(e) => handlePageTo(e, totalPages)}>
-                                <span aria-hidden="true">&raquo;&raquo;</span>
-                            </a>
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-        </div>
-    </div>
-    <!--end col-->
+        {#each pages as page}
+            <!-- svelte-ignore a11y_invalid_attribute -->
+            <a
+                href="javascript:void(0);"
+                class="page-btn page-num {page === pagination.page ? 'is-active' : ''}"
+                aria-current={pagination.page === page ? 'page' : undefined}
+                onclick={(e) => handlePageTo(e, page)}
+            >
+                {page}
+            </a>
+        {/each}
+
+        <!-- svelte-ignore a11y_invalid_attribute -->
+        <a
+            href="javascript:void(0);"
+            class="page-btn {disableForward ? 'is-disabled' : ''}"
+            aria-label="Next page"
+            aria-disabled={disableForward}
+            onclick={(e) => handlePageTo(e, pagination.page + 1)}
+        >
+            <i class="bx bx-chevron-right text-base leading-none"></i>
+        </a>
+        <!-- svelte-ignore a11y_invalid_attribute -->
+        <a
+            href="javascript:void(0);"
+            class="page-btn {disableForward ? 'is-disabled' : ''}"
+            aria-label="Last page"
+            aria-disabled={disableForward}
+            onclick={(e) => handlePageTo(e, totalPages)}
+        >
+            <i class="bx bx-chevrons-right text-base leading-none"></i>
+        </a>
+    </nav>
 </div>
 
+<style>
+    .page-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2rem;
+        height: 2rem;
+        padding: 0 0.5rem;
+        border-radius: 0.375rem;
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: var(--color-muted);
+        text-decoration: none;
+        transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
+    }
+
+    .page-btn:hover:not(.is-disabled):not(.is-active) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+    }
+
+    :global(.dark) .page-btn:hover:not(.is-disabled):not(.is-active) {
+        background-color: rgb(31 41 55);
+        color: rgb(255 255 255);
+    }
+
+    .page-btn.is-active {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+        box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
+    }
+
+    .page-btn.is-disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+</style>
+
diff --git a/src/lib/common/shared/TimeRangePicker.svelte b/src/lib/common/shared/TimeRangePicker.svelte
index f760160b..aa133c31 100644
--- a/src/lib/common/shared/TimeRangePicker.svelte
+++ b/src/lib/common/shared/TimeRangePicker.svelte
@@ -16,6 +16,7 @@
 	 *   startDate?: string,
 	 *   endDate?: string,
 	 *   storageKey?: string,
+	 *   prefixIcon?: import('svelte').Snippet,
 	 *   onchange?: (data: { timeRange: string, startDate: string, endDate: string }) => void
 	 * }}
 	 */
@@ -24,6 +25,7 @@
 		startDate = $bindable(''),
 		endDate = $bindable(''),
 		storageKey = 'botsharp_recent_time_ranges',
+		prefixIcon = undefined,
 		onchange
 	} = $props();
 
@@ -383,7 +385,8 @@
 >
 	<button
 		type="button"
-		class="form-control text-start d-flex align-items-center justify-content-between clickable"
+		class="trp-trigger"
+		class:trp-trigger-open={showDatePicker}
 		onclick={() => {
 			showDatePicker = !showDatePicker;
 			if (showDatePicker) {
@@ -398,54 +401,47 @@
 			}
 		}}
 	>
-		<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+		{#if prefixIcon}
+			<span class="trp-trigger-prefix">
+				{@render prefixIcon()}
+			</span>
+		{/if}
+		<span class="trp-trigger-label">
 			{timeRangeDisplayText || 'Select time range'}
 		</span>
-		<i class="bx bx-chevron-down"></i>
+		<i class="bx bx-chevron-down trp-trigger-chevron"></i>
 	</button>
 	{#if showDatePicker}
-		<ul class="time-range-dropdown bg-white border rounded shadow-lg" class:drop-up={dropUp} bind:this={dropdownEl}>
-			<ul class="nav nav-tabs border-bottom mb-0 px-2 pt-2" role="tablist">
-				<li class="nav-item flex-fill d-flex justify-content-center" role="presentation">
+		<ul class="trp-dropdown" class:trp-drop-up={dropUp} bind:this={dropdownEl}>
+			<ul class="trp-tabs" role="tablist">
+				<li class="trp-tab-item" role="presentation">
 					<button
-						class="nav-link fw-semibold {datePickerTab === TAB_RELATIVE
-							? 'active text-primary'
-							: 'text-muted'}"
+						class="trp-tab"
+						class:active={datePickerTab === TAB_RELATIVE}
 						type="button"
 						role="tab"
-						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_RELATIVE
-							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
-							: ''}"
 						onclick={() => (datePickerTab = TAB_RELATIVE)}
 					>
 						Relative
 					</button>
 				</li>
-				<li class="nav-item flex-fill d-flex justify-content-center" role="presentation">
+				<li class="trp-tab-item" role="presentation">
 					<button
-						class="nav-link fw-semibold {datePickerTab === TAB_RECENT
-							? 'active text-primary'
-							: 'text-muted'}"
+						class="trp-tab"
+						class:active={datePickerTab === TAB_RECENT}
 						type="button"
 						role="tab"
-						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_RECENT
-							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
-							: ''}"
 						onclick={() => (datePickerTab = TAB_RECENT)}
 					>
 						Recent
 					</button>
 				</li>
-				<li class="nav-item flex-fill d-flex justify-content-center" role="presentation">
+				<li class="trp-tab-item" role="presentation">
 					<button
-						class="nav-link fw-semibold {datePickerTab === TAB_CUSTOM
-							? 'active text-primary'
-							: 'text-muted'}"
+						class="trp-tab"
+						class:active={datePickerTab === TAB_CUSTOM}
 						type="button"
 						role="tab"
-						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_CUSTOM
-							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
-							: ''}"
 						onclick={() => {
 							datePickerTab = TAB_CUSTOM;
 							// Delay init to ensure flatpickr is mounted
@@ -460,11 +456,11 @@
 			</ul>
 
 			{#if datePickerTab === TAB_RELATIVE}
-				<div class="time-range-tab-content">
-					<ul class="option-list time-range-option-list">
-						<li class="option-item clickable justify-content-center">
+				<div class="trp-tab-content">
+					<ul class="trp-option-list">
+						<li class="trp-option-clear">
 							<button
-								class="clear-btn line-align-center text-secondary"
+								class="trp-clear-btn"
 								type="button"
 								onclick={(e) => {
 									e.preventDefault();
@@ -476,95 +472,93 @@
 							</button>
 						</li>
 						{#each presetTimeRangeOptions as option}
-							<li class="option-item clickable">
-								<div class="line-align-center select-box">
-									<i
-										class="bx bx-check"
-										style="visibility: {timeRange === option.value ? 'visible' : 'hidden'};"
-									></i>
-								</div>
-								<div class="select-name">
-									<button
-										class="clear-btn"
-										type="button"
-										onclick={(e) => {
-											e.preventDefault();
-											e.stopPropagation();
-											handleRelativeOptionClick(option.value);
-										}}
-									>
-										{option.label}
-									</button>
-								</div>
+							<li class="trp-option-item">
+								<button
+									class="trp-option-btn"
+									class:active={timeRange === option.value}
+									type="button"
+									onclick={(e) => {
+										e.preventDefault();
+										e.stopPropagation();
+										handleRelativeOptionClick(option.value);
+									}}
+								>
+									<span class="trp-option-check" aria-hidden="true">
+										<i
+											class="bx bx-check"
+											style="visibility: {timeRange === option.value ? 'visible' : 'hidden'};"
+										></i>
+									</span>
+									<span class="trp-option-label">{option.label}</span>
+								</button>
 							</li>
 						{/each}
 					</ul>
 				</div>
 			{:else if datePickerTab === TAB_RECENT}
-				<div class="time-range-tab-content">
+				<div class="trp-tab-content">
 					{#if recentTimeRanges.length === 0}
-						<div class="text-muted text-center py-3 w-100">
-							<i class="bx bx-time-five mb-2" style="font-size: 1.5rem;"></i>
-							<p class="mb-0 small">{'No recent time ranges'}</p>
+						<div class="trp-empty">
+							<i class="bx bx-time-five trp-empty-icon"></i>
+							<p class="trp-empty-text">{'No recent time ranges'}</p>
 						</div>
 					{:else}
-						<ul class="option-list time-range-option-list">
+						<ul class="trp-option-list">
 							{#each recentTimeRanges as range, index}
-								<li class="option-item clickable">
-									<div class="select-name">
-										<button
-											class="clear-btn text-start w-100"
-											onclick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												handleRecentOptionClick(range);
-											}}
-										>
-											{range.label}
-										</button>
-									</div>
-									<div class="line-align-center select-box">
-										<button
-											class="clear-btn bx bx-x"
-											aria-label="Remove recent time range"
-											onclick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												removeRecentTimeRange(index);
-											}}
-										>
-										</button>
-									</div>
+								<li class="trp-option-item">
+									<button
+										class="trp-option-btn"
+										type="button"
+										onclick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											handleRecentOptionClick(range);
+										}}
+									>
+										<span class="trp-option-label">{range.label}</span>
+									</button>
+									<button
+										class="trp-option-remove"
+										type="button"
+										aria-label="Remove recent time range"
+										onclick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											removeRecentTimeRange(index);
+										}}
+									>
+										<i class="bx bx-x"></i>
+									</button>
 								</li>
 							{/each}
 						</ul>
 					{/if}
 				</div>
 			{:else if datePickerTab === TAB_CUSTOM}
-				<div class="time-range-tab-content p-2">
+				<div class="trp-tab-content trp-tab-content-custom">
 					<!-- Date Input Fields -->
-					<div class="d-flex align-items-center gap-2 mb-3">
+					<div class="trp-date-row">
 						<input
 							type="date"
 							bind:value={tempStartDate}
-							class="form-control form-control-sm"
+							class="trp-date-input"
 							onchange={handleStartDateChange}
 						/>
-						<span class="text-muted small">to</span>
+						<span class="trp-date-separator">to</span>
 						<input
 							type="date"
 							bind:value={tempEndDate}
-							class="form-control form-control-sm"
+							class="trp-date-input"
 							onchange={handleEndDateChange}
 						/>
 					</div>
 
 					<!-- Calendar Grid -->
-					<div class="mb-3" bind:this={flatpickrContainerEl}></div>
+					<div class="trp-calendar" bind:this={flatpickrContainerEl}></div>
 
-					<div class="d-flex justify-content-end gap-2 mt-3">
+					<div class="trp-actions">
 						<button
-							class="btn btn-secondary btn-sm"
+							class="trp-btn trp-btn-cancel"
 							type="button"
 							onclick={(e) => {
 								e.preventDefault();
@@ -575,7 +569,7 @@
 							Cancel
 						</button>
 						<button
-							class="btn btn-primary btn-sm"
+							class="trp-btn trp-btn-apply"
 							type="button"
 							onclick={(e) => {
 								e.preventDefault();
@@ -593,13 +587,104 @@
 </div>
 
 <style>
+	/* ============================================================
+	   TimeRangePicker — self-contained Tailwind-aligned styling.
+	   Replaces all Bootstrap utility classes (form-control, btn,
+	   nav-tabs, etc.) and Bootstrap CSS variables (--bs-primary,
+	   --bs-body-bg, --bs-border-color, --bs-tertiary-bg) that the
+	   component previously depended on.
+	   ============================================================ */
+
 	/* Hide flatpickr's default input field when using inline mode */
 	:global(.flatpickr-input) {
 		display: none !important;
 	}
 
-	/* Dropdown panel positioning & responsiveness — use fixed to escape ancestor overflow clipping */
-	.time-range-dropdown {
+	/* ---------- Trigger button (closed state) ----------
+	   Replaces Bootstrap form-control with a themed trigger that matches
+	   the Select component's display input (same height, radius, border,
+	   focus ring). */
+	.trp-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		height: 2.5rem;
+		margin: 0;
+		padding: 0 2rem 0 0.75rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		background-color: rgb(255 255 255);
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: rgb(31 41 55);
+		text-align: left;
+		cursor: pointer;
+		position: relative;
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	}
+	.trp-trigger:hover:not(:disabled) {
+		border-color: rgb(209 213 219);
+	}
+	.trp-trigger:focus,
+	.trp-trigger.trp-trigger-open {
+		outline: 0;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 1px var(--color-primary);
+	}
+	.trp-trigger:disabled {
+		background-color: rgb(249 250 251);
+		color: var(--color-muted);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+	/* Optional prefix-icon wrapper rendered inside the trigger button
+	   ahead of the label. Sits in the flex row natively — no absolute
+	   positioning needed because the chevron is the only positioned child. */
+	.trp-trigger-prefix {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-right: 0.5rem;
+		font-size: 1rem;
+		line-height: 1;
+		color: rgb(156 163 175);
+		transition: color 0.15s ease;
+	}
+	/* Lift the prefix icon to primary when the trigger is focused or open,
+	   matching the chevron's focus-tint affordance. */
+	.trp-trigger:focus .trp-trigger-prefix,
+	.trp-trigger.trp-trigger-open .trp-trigger-prefix {
+		color: var(--color-primary);
+	}
+
+	.trp-trigger-label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.trp-trigger-chevron {
+		position: absolute;
+		right: 0.625rem;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 1.125rem;
+		line-height: 1;
+		color: rgb(156 163 175);
+		transition: transform 0.2s ease-in-out, color 0.15s ease;
+		pointer-events: none;
+	}
+	.trp-trigger-open .trp-trigger-chevron {
+		transform: translateY(-50%) rotate(180deg);
+		color: var(--color-primary);
+	}
+
+	/* ---------- Dropdown panel ----------
+	   Replaces Bootstrap `bg-white border rounded shadow-lg` utilities. */
+	.trp-dropdown {
 		position: fixed;
 		z-index: 1050;
 		min-width: 305px;
@@ -608,8 +693,14 @@
 		flex-direction: column;
 		overflow: hidden;
 		list-style: none;
-		padding-left: 0;
-		margin-bottom: 0;
+		padding: 0;
+		margin: 0;
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.5rem;
+		box-shadow:
+			0 10px 25px -5px rgb(0 0 0 / 0.1),
+			0 8px 10px -6px rgb(0 0 0 / 0.05);
 
 		/* On small screens, allow the panel to shrink and avoid overflow */
 		@media (max-width: 576px) {
@@ -617,14 +708,16 @@
 			max-width: calc(100vw - 2rem);
 		}
 
-		/* Scale flatpickr calendar to fit within the panel */
+		/* Scale flatpickr calendar to fit within the panel.
+		   All --bs-* CSS variables previously used here are replaced with
+		   the Tailwind v4 --color-* tokens so the calendar picks up runtime
+		   theming. */
 		:global(.flatpickr-calendar) {
 			width: 100% !important;
 			max-width: 100%;
 			box-shadow: none;
 		}
 
-		/* Refine month/year navigation bar */
 		:global(.flatpickr-months) {
 			height: 36px;
 			align-items: center;
@@ -652,13 +745,13 @@
 			-moz-appearance: none;
 			padding: 4px 20px 4px 8px;
 			border-radius: 4px;
-			border: 1px solid lavender;
-			background-color: var(--bs-body-bg, #fff);
+			border: 1px solid rgb(229 231 235);
+			background-color: rgb(255 255 255);
 			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
 			background-repeat: no-repeat;
 			background-position: right 6px center;
 			background-size: 10px 6px;
-			color: var(--bs-body-color, #212529);
+			color: rgb(31 41 55);
 			cursor: pointer;
 			width: 90px;
 			height: 30px;
@@ -667,19 +760,13 @@
 			box-sizing: border-box;
 
 			&:hover {
-				border-color: var(--bs-primary, #556ee6);
+				border-color: var(--color-primary);
 			}
 
 			&:focus {
-				border-color: var(--bs-primary, #556ee6);
+				border-color: var(--color-primary);
 				outline: none;
-				box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
-			}
-
-			:global(.flatpickr-monthDropdown-month) {
-				background-color: lavender;
-				border-top: 1px solid #c5b8d9;
-				padding: 4px 8px;
+				box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
 			}
 		}
 
@@ -698,22 +785,22 @@
 			font-weight: 600;
 			padding: 4px 8px;
 			border-radius: 4px;
-			border: 1px solid var(--bs-border-color, #dee2e6);
-			background-color: var(--bs-body-bg, #fff);
-			color: var(--bs-body-color, #212529);
+			border: 1px solid rgb(229 231 235);
+			background-color: rgb(255 255 255);
+			color: rgb(31 41 55);
 			width: 90px;
 			height: 30px;
 			text-align: center;
 			box-sizing: border-box;
 
 			&:hover {
-				border-color: var(--bs-primary, #556ee6);
+				border-color: var(--color-primary);
 			}
 
 			&:focus {
-				border-color: var(--bs-primary, #556ee6);
+				border-color: var(--color-primary);
 				outline: none;
-				box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
+				box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
 			}
 		}
 
@@ -729,7 +816,7 @@
 			top: 4px;
 
 			&:hover {
-				background-color: var(--bs-tertiary-bg, #f8f9fa);
+				background-color: rgb(243 244 246);
 			}
 
 			:global(svg) {
@@ -739,38 +826,261 @@
 		}
 	}
 
-	/* Tab content area fills remaining space and scrolls */
-	.time-range-tab-content {
+	/* ---------- Tab strip ----------
+	   Replaces Bootstrap `nav nav-tabs` with a pill-style tab row that uses
+	   the same primary-underline pattern as the migrated NavBar component. */
+	.trp-tabs {
+		display: flex;
+		list-style: none;
+		margin: 0;
+		padding: 0.5rem 0.5rem 0;
+		border-bottom: 1px solid rgb(229 231 235);
+		gap: 0.25rem;
+	}
+
+	.trp-tab-item {
+		display: flex;
+		justify-content: center;
+		flex: 1 1 0;
+	}
+
+	.trp-tab {
+		position: relative;
+		width: 100%;
+		margin: 0 0 -1px;
+		padding: 0.5rem 0.75rem;
+		border: 0;
+		background: transparent;
+		font-weight: 600;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: var(--color-muted);
+		cursor: pointer;
+		border-radius: 0.375rem 0.375rem 0 0;
+		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+	}
+	.trp-tab:hover:not(.active) {
+		color: var(--color-primary);
+		background-color: rgb(243 244 246);
+	}
+	.trp-tab.active {
+		color: var(--color-primary);
+		border-bottom: 2px solid var(--color-primary);
+	}
+
+	/* ---------- Tab content area ---------- */
+	.trp-tab-content {
 		flex: 1 1 auto;
 		overflow-y: auto;
 		scrollbar-width: thin;
 		min-height: 0;
 	}
+	.trp-tab-content-custom {
+		padding: 0.75rem;
+	}
 
-	/* Override shared .option-list absolute positioning inside our dropdown */
-	.time-range-option-list {
-		position: static !important;
-		max-height: 300px !important;
-		border: none !important;
+	/* ---------- Relative / Recent option list ----------
+	   Replaces Bootstrap `option-list option-item` patterns. */
+	.trp-option-list {
+		list-style: none;
+		margin: 0;
+		padding: 0.25rem;
+		max-height: 300px;
+	}
 
-		/* Make option buttons fill the full width of each row */
-		:global(.option-item .select-name) {
-			flex: 1;
-		}
+	.trp-option-clear {
+		display: flex;
+		justify-content: center;
+		padding: 0.25rem;
+	}
 
-		:global(.option-item .select-name .clear-btn) {
-			width: 100%;
-			text-align: left;
-		}
+	.trp-option-item {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		padding: 0;
 	}
 
-	.clear-btn {
-		background-color: transparent;
-		border: none;
-		transition: background-color 0.15s ease-in-out;
+	.trp-option-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		width: 100%;
+		padding: 0.4rem 0.5rem;
+		margin: 0;
+		border: 0;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: rgb(31 41 55);
+		font-size: 0.875rem;
+		line-height: 1.4;
+		text-align: left;
+		cursor: pointer;
+		transition: background-color 0.12s ease, color 0.12s ease;
+	}
+	.trp-option-btn:hover,
+	.trp-option-btn.active {
+		background-color: rgb(243 244 246);
+		color: var(--color-primary);
+	}
 
-		&:hover {
-			background-color: aliceblue;
-		}
+	.trp-option-check {
+		flex: 0 0 1.25rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.125rem;
+		line-height: 1;
+		color: var(--color-primary);
+	}
+
+	.trp-option-label {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.trp-option-remove {
+		flex: 0 0 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.75rem;
+		height: 1.75rem;
+		margin-right: 0.25rem;
+		border: 0;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: var(--color-muted);
+		font-size: 1.125rem;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.12s ease, color 0.12s ease;
+	}
+	.trp-option-remove:hover {
+		background-color: color-mix(in srgb, var(--color-danger) 15%, transparent);
+		color: var(--color-danger);
+	}
+
+	.trp-clear-btn {
+		width: 100%;
+		padding: 0.4rem 0.5rem;
+		margin: 0;
+		border: 0;
+		border-radius: 0.375rem;
+		background: transparent;
+		color: var(--color-muted);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		text-align: center;
+		font-style: italic;
+		cursor: pointer;
+		transition: background-color 0.12s ease, color 0.12s ease;
+	}
+	.trp-clear-btn:hover {
+		background-color: rgb(243 244 246);
+		color: var(--color-danger);
+	}
+
+	/* ---------- Recent tab empty state ----------
+	   Replaces `text-muted text-center py-3 w-100` Bootstrap utility chain. */
+	.trp-empty {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 1.25rem 0.5rem;
+		color: var(--color-muted);
+		width: 100%;
+	}
+	.trp-empty-icon {
+		font-size: 1.5rem;
+		line-height: 1;
+		margin-bottom: 0.5rem;
+	}
+	.trp-empty-text {
+		margin: 0;
+		font-size: 0.8125rem;
+	}
+
+	/* ---------- Custom tab: date inputs + actions ----------
+	   Replaces Bootstrap `form-control form-control-sm` on the inputs and
+	   `btn btn-secondary btn-sm` / `btn btn-primary btn-sm` on the buttons. */
+	.trp-date-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-bottom: 0.75rem;
+	}
+
+	.trp-date-input {
+		flex: 1 1 0;
+		min-width: 0;
+		height: 2rem;
+		padding: 0 0.5rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		background-color: rgb(255 255 255);
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: rgb(31 41 55);
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+	}
+	.trp-date-input:focus {
+		outline: 0;
+		border-color: var(--color-primary);
+		box-shadow: 0 0 0 1px var(--color-primary);
+	}
+
+	.trp-date-separator {
+		font-size: 0.75rem;
+		color: var(--color-muted);
+		flex-shrink: 0;
+	}
+
+	.trp-calendar {
+		margin-bottom: 0.75rem;
+	}
+
+	.trp-actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 0.75rem;
+	}
+
+	.trp-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.375rem 0.875rem;
+		border-radius: 0.375rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1.4;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+	}
+
+	.trp-btn-cancel {
+		border: 1px solid rgb(229 231 235);
+		background-color: rgb(255 255 255);
+		color: rgb(31 41 55);
+	}
+	.trp-btn-cancel:hover {
+		background-color: rgb(243 244 246);
+		border-color: rgb(209 213 219);
+	}
+
+	.trp-btn-apply {
+		border: 1px solid var(--color-primary);
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+	}
+	.trp-btn-apply:hover {
+		background-color: var(--color-primary-hover);
+		border-color: var(--color-primary-hover);
 	}
 </style>
diff --git a/src/lib/common/spinners/Loader.svelte b/src/lib/common/spinners/Loader.svelte
index 1a901959..f5143b78 100644
--- a/src/lib/common/spinners/Loader.svelte
+++ b/src/lib/common/spinners/Loader.svelte
@@ -15,7 +15,7 @@
         containerClasses = '',
         containerStyles = '',
         size = 100,
-        color = 'var(--bs-primary)'
+        color = 'var(--color-primary)'
     } = $props();
 </script>
 
@@ -25,3 +25,23 @@
 >
     <Circle {size} {color} unit="px" duration="1s" />
 </div>
+
+<style>
+    /* Full-area translucent overlay that flex-centers the spinner.
+       Replaces the legacy `.loader` rule from src/lib/scss/custom/components/_loader.scss
+       which used a fragile `position: relative; top: 30%; left: 50%` shift on
+       the inner `.circle` element to center the spinner. */
+    .loader {
+        position: absolute;
+        inset: 0;
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgb(255 255 255 / 0.8);
+    }
+
+    :global(.dark) .loader {
+        background-color: rgb(17 24 39 / 0.7);
+    }
+</style>
diff --git a/src/lib/common/spinners/LoadingToComplete.svelte b/src/lib/common/spinners/LoadingToComplete.svelte
index 32a01459..1c0f2cdb 100644
--- a/src/lib/common/spinners/LoadingToComplete.svelte
+++ b/src/lib/common/spinners/LoadingToComplete.svelte
@@ -35,17 +35,77 @@
 
 
 {#if isComplete}
-    <div class="alert-container">
-        <div class="alert alert-success" role="alert">
-            {successText}
+    <div class="ltc-toast-container">
+        <div class="ltc-toast ltc-toast-success" role="alert">
+            <i class="mdi mdi-check-circle-outline ltc-toast-icon"></i>
+            <span class="ltc-toast-text">{successText}</span>
         </div>
     </div>
 {/if}
 
 {#if isError}
-    <div class="alert-container">
-        <div class="alert alert-danger" role="alert">
-            {errorText}
+    <div class="ltc-toast-container">
+        <div class="ltc-toast ltc-toast-error" role="alert">
+            <i class="mdi mdi-alert-circle-outline ltc-toast-icon"></i>
+            <span class="ltc-toast-text">{errorText}</span>
         </div>
     </div>
 {/if}
+
+<style>
+    /* Floating toast container, fixed-positioned near the top of the
+       viewport. Replaces the legacy `.alert-container` rule in
+       src/lib/scss/custom/components/_alert.scss. */
+    .ltc-toast-container {
+        position: fixed;
+        top: 5%;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 8888;
+        display: flex;
+        justify-content: center;
+        pointer-events: none;
+        padding: 0 1rem;
+        max-width: 90vw;
+    }
+
+    /* Toast pill — replaces Bootstrap `.alert .alert-success` / `.alert .alert-danger`.
+       Soft semantic colors, layered shadow, icon + text layout. */
+    .ltc-toast {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.625rem;
+        padding: 0.625rem 1rem;
+        border-radius: 0.625rem;
+        border: 1px solid transparent;
+        box-shadow:
+            0 10px 25px -5px rgb(0 0 0 / 0.1),
+            0 8px 10px -6px rgb(0 0 0 / 0.05);
+        font-size: 0.875rem;
+        line-height: 1.4;
+        white-space: pre-line;
+        pointer-events: auto;
+    }
+
+    .ltc-toast-success {
+        background-color: color-mix(in srgb, var(--color-success) 95%, transparent);
+        border-color: var(--color-success);
+        color: rgb(255 255 255);
+    }
+
+    .ltc-toast-error {
+        background-color: color-mix(in srgb, var(--color-danger) 95%, transparent);
+        border-color: var(--color-danger);
+        color: rgb(255 255 255);
+    }
+
+    .ltc-toast-icon {
+        font-size: 1.25rem;
+        line-height: 1;
+        flex-shrink: 0;
+    }
+
+    .ltc-toast-text {
+        font-weight: 500;
+    }
+</style>
diff --git a/src/lib/common/tooltip/BotsharpTooltip.svelte b/src/lib/common/tooltip/BotsharpTooltip.svelte
index ff1c998c..c57e1e98 100644
--- a/src/lib/common/tooltip/BotsharpTooltip.svelte
+++ b/src/lib/common/tooltip/BotsharpTooltip.svelte
@@ -19,8 +19,6 @@
         children
     } = $props();
 
-    /** @type {string} */
-    let bsPlacement = $state('start');
     /** @type {object | undefined} */
     let popperInstance;
     // svelte-ignore state_referenced_locally
@@ -43,12 +41,20 @@
         }
     };
 
+    let placementCategory = $derived(
+        popperPlacement?.startsWith('bottom') ? 'bottom'
+            : popperPlacement?.startsWith('left') ? 'left'
+            : popperPlacement?.startsWith('right') ? 'right'
+            : 'top'
+    );
+
     let classes = $derived(classnames(
         containerClasses,
         'tooltip',
-        `bs-tooltip-${bsPlacement}`,
-        animation ? 'fade' : null,
-        isOpen ? 'show' : null
+        `tooltip-${placementCategory}`,
+        'absolute z-50 m-0 block font-sans text-sm not-italic leading-normal text-left no-underline whitespace-normal break-words',
+        isOpen ? 'opacity-90' : 'opacity-0',
+        animation ? 'transition-opacity duration-150 ease-linear' : null
     ));
 
     onMount(() => {
@@ -168,16 +174,6 @@
         }
     });
 
-    $effect(() => {
-        if (popperPlacement === 'left') {
-            bsPlacement = 'start';
-        } else if (popperPlacement === 'right') {
-            bsPlacement = 'end';
-        } else {
-            bsPlacement = popperPlacement;
-        }
-    });
-
     // Portal behavior: move tooltip to document.body to avoid clipping
     $effect(() => {
         if (tooltipEl && isOpen) {
@@ -205,9 +201,61 @@
         data-bs-delay={delay}
         x-placement={popperPlacement}
     >
-        <div class="tooltip-arrow" data-popper-arrow></div>
-        <div class="tooltip-inner">
+        <div class="tooltip-arrow absolute block" data-popper-arrow></div>
+        <div class="tooltip-inner max-w-[200px] rounded bg-gray-900 px-2 py-1 text-center text-white">
             {@render children?.()}
         </div>
     </div>
-{/if}
\ No newline at end of file
+{/if}
+
+<style>
+    /* Placement-aware arrow geometry. The arrow element itself is positioned
+       by Popper via `data-popper-arrow`; these rules only define its size and
+       the colored triangle (via ::before) for each placement category. */
+    .tooltip-arrow {
+        width: 0.8rem;
+        height: 0.4rem;
+    }
+    .tooltip-arrow::before {
+        position: absolute;
+        content: '';
+        border-color: transparent;
+        border-style: solid;
+    }
+
+    .tooltip-top .tooltip-arrow { bottom: 0; }
+    .tooltip-top .tooltip-arrow::before {
+        top: -1px;
+        border-width: 0.4rem 0.4rem 0;
+        border-top-color: var(--color-gray-900, rgb(17 24 39));
+    }
+
+    .tooltip-bottom .tooltip-arrow { top: 0; }
+    .tooltip-bottom .tooltip-arrow::before {
+        bottom: -1px;
+        border-width: 0 0.4rem 0.4rem;
+        border-bottom-color: var(--color-gray-900, rgb(17 24 39));
+    }
+
+    .tooltip-left .tooltip-arrow {
+        right: 0;
+        width: 0.4rem;
+        height: 0.8rem;
+    }
+    .tooltip-left .tooltip-arrow::before {
+        right: -1px;
+        border-width: 0.4rem 0 0.4rem 0.4rem;
+        border-left-color: var(--color-gray-900, rgb(17 24 39));
+    }
+
+    .tooltip-right .tooltip-arrow {
+        left: 0;
+        width: 0.4rem;
+        height: 0.8rem;
+    }
+    .tooltip-right .tooltip-arrow::before {
+        left: -1px;
+        border-width: 0.4rem 0.4rem 0.4rem 0;
+        border-right-color: var(--color-gray-900, rgb(17 24 39));
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/drawflow/drawflow.css b/src/lib/drawflow/drawflow.css
index 2873f4fe..a20d725e 100644
--- a/src/lib/drawflow/drawflow.css
+++ b/src/lib/drawflow/drawflow.css
@@ -3,23 +3,23 @@
 }
 
 .drawflow .drawflow-node {
-    background: var(--bs-primary);
+    background: var(--color-primary);
     color: white;
     width: var(--drawflow-node-width);
-    border: 2px solid var(--bs-primary);
+    border: 2px solid var(--color-primary);
 }
 
 .drawflow .drawflow-node.selected {
-    background: var(--bs-primary);
+    background: var(--color-primary);
     border: 2px solid black;
 }
 
 .drawflow .new-node {
-    background: var(--bs-info);
+    background: var(--color-info);
     color: white;
 }
 
 .drawflow-delete {
-    background-color: var(--bs-danger);
+    background-color: var(--color-danger);
     line-height: 25px;
 }
\ No newline at end of file
diff --git a/src/lib/helpers/http.js b/src/lib/helpers/http.js
index 9daaba01..09e1db15 100644
--- a/src/lib/helpers/http.js
+++ b/src/lib/helpers/http.js
@@ -216,6 +216,7 @@ function skipLoader(config) {
         new RegExp('http(s*)://(.*?)/knowledge/collection/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/collection/(.*?)/data/(.*?)', 'g'),
         new RegExp('http(s*)://(.*?)/knowledge/collection/(.*?)/data', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/message/(.*?)', 'g')
     ];
 
     /** @type {RegExp[]} */
diff --git a/src/lib/helpers/utils/common.js b/src/lib/helpers/utils/common.js
index 1295935c..038c8ba4 100644
--- a/src/lib/helpers/utils/common.js
+++ b/src/lib/helpers/utils/common.js
@@ -7,6 +7,21 @@ export function range(size = 3, startAt = 0) {
     return [...Array(size).keys()].map((i) => i + startAt);
 };
 
+/**
+ * Format an integer using the user's locale digit-grouping rules (e.g.,
+ * 1234567 → "1,234,567" in en-US, "1.234.567" in de-DE).
+ * Falls back to an empty string when the value is null/undefined/NaN.
+ *
+ * @param {number | null | undefined} value
+ * @returns {string}
+ */
+export function formatNumber(value) {
+    if (value === null || value === undefined || Number.isNaN(value)) {
+        return '';
+    }
+    return new Intl.NumberFormat().format(value);
+}
+
 export const durationUnitRegex = /[a-zA-Z]/;
 
 /**
diff --git a/src/lib/scss/_variables-dark.scss b/src/lib/scss/_variables-dark.scss
deleted file mode 100644
index 17bb9366..00000000
--- a/src/lib/scss/_variables-dark.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-/* Dark color mode variables */
-/*  */
-/* Custom variables for the `[data-bs-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need. */
-
-/*  */
-/* Global colors */
-/*  */
-
-/* scss-docs-start sass-dark-mode-vars */
-/* scss-docs-start theme-text-dark-variables */
-$primary-text-emphasis-dark:        tint-color($primary, 40%);
-$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
-$success-text-emphasis-dark:        tint-color($success, 40%);
-$info-text-emphasis-dark:           tint-color($info, 40%);
-$warning-text-emphasis-dark:        tint-color($warning, 40%);
-$danger-text-emphasis-dark:         tint-color($danger, 40%);
-$light-text-emphasis-dark:          $gray-100;
-$dark-text-emphasis-dark:           $gray-300;
-/* scss-docs-end theme-text-dark-variables */
-
-/* scss-docs-start theme-bg-subtle-dark-variables */
-$primary-bg-subtle-dark:            rgba($primary, 0.25);
-$secondary-bg-subtle-dark:          rgba($secondary, 0.25);
-$success-bg-subtle-dark:            rgba($success, 0.25);
-$info-bg-subtle-dark:               rgba($info, 0.25);
-$warning-bg-subtle-dark:            rgba($warning, 0.25);
-$danger-bg-subtle-dark:             rgba($danger, 0.25);
-$light-bg-subtle-dark:              $gray-800;
-$dark-bg-subtle-dark:               rgba($dark, 0.25);
-/* scss-docs-end theme-bg-subtle-dark-variables */
-
-/* scss-docs-start theme-border-subtle-dark-variables */
-$primary-border-subtle-dark:        shade-color($primary, 40%);
-$secondary-border-subtle-dark:      shade-color($secondary, 40%);
-$success-border-subtle-dark:        shade-color($success, 40%);
-$info-border-subtle-dark:           shade-color($info, 40%);
-$warning-border-subtle-dark:        shade-color($warning, 40%);
-$danger-border-subtle-dark:         shade-color($danger, 40%);
-$light-border-subtle-dark:          $gray-700;
-$dark-border-subtle-dark:           $gray-800;
-/* scss-docs-end theme-border-subtle-dark-variables */
-
-$body-color-dark:                   #a6b0cf;
-$body-bg-dark:                      #222736;
-$body-secondary-color-dark:         #c3cbe4;
-$body-secondary-bg-dark:            #2a3042;
-$body-tertiary-color-dark:          #f6f6f6;
-$body-tertiary-bg-dark:             #32394e;
-$body-emphasis-color-dark:          $white;
-$border-color-dark:                 #32394e;
-$border-color-translucent-dark:     #353d55;
-$headings-color-dark:               #f6f6f6;
-$link-color-dark:                   $primary;
-$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage);
-$code-color-dark:                   $code-color;
-
-
-/*  */
-/* Forms */
-/*  */
-
-$form-select-indicator-color-dark:  $body-color-dark;
-$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
-
-$form-switch-color-dark:            rgba($white, .25);
-$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");
-
-/* scss-docs-start form-validation-colors-dark */
-$form-valid-color-dark:             $green-300;
-$form-valid-border-color-dark:      $green-300;
-$form-invalid-color-dark:           $red-300;
-$form-invalid-border-color-dark:    $red-300;
-/* scss-docs-end form-validation-colors-dark */
-
-
-/*  */
-/* Accordion */
-/*  */
-
-$accordion-icon-color-dark:         $primary-text-emphasis-dark;
-$accordion-icon-active-color-dark:  $primary-text-emphasis-dark;
-
-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-/* scss-docs-end sass-dark-mode-vars */
-
-/* =============================Custom Variables========================== */
-
-$header-bg-dark:                        #262b3c;
-$header-item-color-dark:                #a6b0cf;
-
-/* topbra dark */
-$header-dark-bg-dark:                   $primary;
-$header-dark-item-color-dark:           #e9ecef;
-$topbar-search-bg-dark:                 #2a3042;
-
-/* Footer */
-$footer-bg-dark:                        #262b3c;
-$footer-color-dark:                     #a6b0cf;
-
-/* Horizontal nav */
-$topnav-bg-dark:                        #282e3f;
-$menu-item-color-dark:                  #a6b0cf;
-$menu-item-active-color-dark:           var(--#{$prefix}primary);
-
-$boxed-body-bg-dark:                    #32394f;
-
-
-/* Display */
-$display-none-dark:                                        block;
-$display-block-dark:                                       none;
diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
deleted file mode 100644
index 6fbacbc6..00000000
--- a/src/lib/scss/_variables.scss
+++ /dev/null
@@ -1,1824 +0,0 @@
-/* Variables */
-
-/*  */
-/* custom-variables */
-/*  */
-
-/* Vertical Sidebar  Light */
-$sidebar-bg:                                          #ffffff;
-$sidebar-menu-item-color:                             #545a6d;
-$sidebar-menu-sub-item-color:                         #545a6d;
-$sidebar-menu-item-icon-color:                        #7f8387;
-$sidebar-menu-item-hover-color:                       #383c40;
-$sidebar-menu-item-active-color:                      var(--#{$prefix}primary);
-$sidebar-width:                                       250px;
-$sidebar-collapsed-width:                             70px;
-$sidebar-width-sm:                                    160px;
-
-/* Vertical Sidebar - Dark */
-$sidebar-dark-bg:                                     #2a3042; /* 2c313a */
-$sidebar-dark-menu-item-color:                        #a6b0cf;
-$sidebar-dark-menu-sub-item-color:                    #79829c;
-$sidebar-dark-menu-item-icon-color:                   #6a7187;
-$sidebar-dark-menu-item-hover-color:                  #ffffff;
-$sidebar-dark-menu-item-active-color:                 #ffffff;
-
-/* Topbar - Default Light */
-$header-height:                                       70px;
-$header-bg:                                           $white;
-$header-item-color:                                   #555b6d;
-
-/* Topbar - Dark */
-$header-dark-bg:                                      #2a3042;
-$header-dark-item-color:                              #e9ecef;
-
-/* Topbar Search */
-$topbar-search-bg:                                    #f3f3f9;
-
-/* Footer */
-$footer-height:                                       60px;
-$footer-bg:                                           #f2f2f5;
-$footer-color:                                        #74788d;
-
-/* Horizontal nav */
-$topnav-bg:                                           $white;
-
-$menu-item-color:                                     #545a6d;
-$menu-item-active-color:                              var(--#{$prefix}primary);
-
-/* Right Sidebar */
-$rightbar-width:                                      280px;
-
-/* Display */
-$display-none:                                        none;
-$display-block:                                       block;
-
-/* Brand  */
-$navbar-brand-box-width:                             250px;
-
-/* Boxed layout width */
-$boxed-layout-width:                                 1300px;
-$boxed-body-bg:                                     #ebebf4;
-
-/* apex charts */
-$apex-grid-color:                                   var(--#{$prefix}border-color);
-
-/* table */
-$table-head-bg:                                     $gray-100;
-$table-dark-border-color:                           tint-color($gray-800, 7.5%);
-
-
-/* Variables */
-/*  */
-/* Variables should follow the `$component-state-property-size` formula for */
-/* consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs. */
-
-/* Color system */
-
-/* scss-docs-start gray-color-variables */
-$white:    #fff;
-$gray-100: #f8f9fa;
-$gray-200: #eff2f7;
-$gray-300: #f6f6f6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #74788d;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$black:    #000;
-/* scss-docs-end gray-color-variables */
-
-/* fusv-disable */
-/* scss-docs-start gray-colors-map */
-$grays: (
-    "100": $gray-100,
-    "200": $gray-200,
-    "300": $gray-300,
-    "400": $gray-400,
-    "500": $gray-500,
-    "600": $gray-600,
-    "700": $gray-700,
-    "800": $gray-800,
-    "900": $gray-900
-);
-/* scss-docs-end gray-colors-map */
-/* fusv-enable */
-
-/* scss-docs-start color-variables */
-$blue:    #556ee6;
-$indigo:  #564ab1;
-$purple:  #6f42c1;
-$pink:    #e83e8c;
-$red:     #f46a6a;
-$orange:  #f1734f;
-$yellow:  #f1b44c;
-$green:   #34c38f;
-$teal:    #050505;
-$cyan:    #50a5f1;
-/* scss-docs-end color-variables */
-
-/* scss-docs-start colors-map */
-$colors: (
-    "blue":       $blue,
-    "indigo":     $indigo,
-    "purple":     $purple,
-    "pink":       $pink,
-    "red":        $red,
-    "orange":     $orange,
-    "yellow":     $yellow,
-    "green":      $green,
-    "teal":       $teal,
-    "cyan":       $cyan,
-    "black":      $black,
-    "white":      $white,
-    "gray":       $gray-600,
-    "gray-dark":  $gray-800
-);
-/* scss-docs-end colors-map */
-
-/* scss-docs-start theme-color-variables */
-/* `env-vars` is a virtual partial served by a custom Sass importer in */
-/* vite.config.js. It exposes PUBLIC_PRIMARY_COLOR / PUBLIC_SECONDARY_COLOR */
-/* from .env as `$env-primary` / `$env-secondary`. When the env vars are */
-/* empty the import yields nothing and the `!default` fallbacks below */
-/* preserve the original theme. */
-@import "env-vars";
-$env-primary:   $purple   !default;
-$env-secondary: $gray-600 !default;
-
-$primary:       $env-primary;
-$secondary:     $env-secondary;
-$success:       $green;
-$info:          $cyan;
-$warning:       $yellow;
-$danger:        $red;
-$light:         $gray-200;
-$dark:          $gray-800;
-/* scss-docs-end theme-color-variables */
-
-/* scss-docs-start theme-colors-map */
-$theme-colors: (
-    "primary":    $primary,
-    "secondary":  $secondary,
-    "success":    $success,
-    "info":       $info,
-    "warning":    $warning,
-    "danger":     $danger,
-    "pink":       $pink,
-    "light":      $light,
-    "dark":       $dark
-);
-
-/* The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. */
-/* See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast */
-$min-contrast-ratio:   1.8;
-
-/* Customize the light and dark text colors for use in our color contrast function. */
-$color-contrast-dark:      $black;
-$color-contrast-light:     $white;
-
-/* fusv-disable */
-$blue-100: tint-color($blue, 80%);
-$blue-200: tint-color($blue, 60%);
-$blue-300: tint-color($blue, 40%);
-$blue-400: tint-color($blue, 20%);
-$blue-500: $blue;
-$blue-600: shade-color($blue, 20%);
-$blue-700: shade-color($blue, 40%);
-$blue-800: shade-color($blue, 60%);
-$blue-900: shade-color($blue, 80%);
-
-$indigo-100: tint-color($indigo, 80%);
-$indigo-200: tint-color($indigo, 60%);
-$indigo-300: tint-color($indigo, 40%);
-$indigo-400: tint-color($indigo, 20%);
-$indigo-500: $indigo;
-$indigo-600: shade-color($indigo, 20%);
-$indigo-700: shade-color($indigo, 40%);
-$indigo-800: shade-color($indigo, 60%);
-$indigo-900: shade-color($indigo, 80%);
-
-$purple-100: tint-color($purple, 80%);
-$purple-200: tint-color($purple, 60%);
-$purple-300: tint-color($purple, 40%);
-$purple-400: tint-color($purple, 20%);
-$purple-500: $purple;
-$purple-600: shade-color($purple, 20%);
-$purple-700: shade-color($purple, 40%);
-$purple-800: shade-color($purple, 60%);
-$purple-900: shade-color($purple, 80%);
-
-$pink-100: tint-color($pink, 80%);
-$pink-200: tint-color($pink, 60%);
-$pink-300: tint-color($pink, 40%);
-$pink-400: tint-color($pink, 20%);
-$pink-500: $pink;
-$pink-600: shade-color($pink, 20%);
-$pink-700: shade-color($pink, 40%);
-$pink-800: shade-color($pink, 60%);
-$pink-900: shade-color($pink, 80%);
-
-$red-100: tint-color($red, 80%);
-$red-200: tint-color($red, 60%);
-$red-300: tint-color($red, 40%);
-$red-400: tint-color($red, 20%);
-$red-500: $red;
-$red-600: shade-color($red, 20%);
-$red-700: shade-color($red, 40%);
-$red-800: shade-color($red, 60%);
-$red-900: shade-color($red, 80%);
-
-$orange-100: tint-color($orange, 80%);
-$orange-200: tint-color($orange, 60%);
-$orange-300: tint-color($orange, 40%);
-$orange-400: tint-color($orange, 20%);
-$orange-500: $orange;
-$orange-600: shade-color($orange, 20%);
-$orange-700: shade-color($orange, 40%);
-$orange-800: shade-color($orange, 60%);
-$orange-900: shade-color($orange, 80%);
-
-$yellow-100: tint-color($yellow, 80%);
-$yellow-200: tint-color($yellow, 60%);
-$yellow-300: tint-color($yellow, 40%);
-$yellow-400: tint-color($yellow, 20%);
-$yellow-500: $yellow;
-$yellow-600: shade-color($yellow, 20%);
-$yellow-700: shade-color($yellow, 40%);
-$yellow-800: shade-color($yellow, 60%);
-$yellow-900: shade-color($yellow, 80%);
-
-$green-100: tint-color($green, 80%);
-$green-200: tint-color($green, 60%);
-$green-300: tint-color($green, 40%);
-$green-400: tint-color($green, 20%);
-$green-500: $green;
-$green-600: shade-color($green, 20%);
-$green-700: shade-color($green, 40%);
-$green-800: shade-color($green, 60%);
-$green-900: shade-color($green, 80%);
-
-$teal-100: tint-color($teal, 80%);
-$teal-200: tint-color($teal, 60%);
-$teal-300: tint-color($teal, 40%);
-$teal-400: tint-color($teal, 20%);
-$teal-500: $teal;
-$teal-600: shade-color($teal, 20%);
-$teal-700: shade-color($teal, 40%);
-$teal-800: shade-color($teal, 60%);
-$teal-900: shade-color($teal, 80%);
-
-$cyan-100: tint-color($cyan, 80%);
-$cyan-200: tint-color($cyan, 60%);
-$cyan-300: tint-color($cyan, 40%);
-$cyan-400: tint-color($cyan, 20%);
-$cyan-500: $cyan;
-$cyan-600: shade-color($cyan, 20%);
-$cyan-700: shade-color($cyan, 40%);
-$cyan-800: shade-color($cyan, 60%);
-$cyan-900: shade-color($cyan, 80%);
-$blues: (
-  "blue-100": $blue-100,
-  "blue-200": $blue-200,
-  "blue-300": $blue-300,
-  "blue-400": $blue-400,
-  "blue-500": $blue-500,
-  "blue-600": $blue-600,
-  "blue-700": $blue-700,
-  "blue-800": $blue-800,
-  "blue-900": $blue-900
-);
-
-$indigos: (
-  "indigo-100": $indigo-100,
-  "indigo-200": $indigo-200,
-  "indigo-300": $indigo-300,
-  "indigo-400": $indigo-400,
-  "indigo-500": $indigo-500,
-  "indigo-600": $indigo-600,
-  "indigo-700": $indigo-700,
-  "indigo-800": $indigo-800,
-  "indigo-900": $indigo-900
-);
-
-$purples: (
-  "purple-100": $purple-100,
-  "purple-200": $purple-200,
-  "purple-300": $purple-300,
-  "purple-400": $purple-400,
-  "purple-500": $purple-500,
-  "purple-600": $purple-600,
-  "purple-700": $purple-700,
-  "purple-800": $purple-800,
-  "purple-900": $purple-900
-);
-
-$pinks: (
-  "pink-100": $pink-100,
-  "pink-200": $pink-200,
-  "pink-300": $pink-300,
-  "pink-400": $pink-400,
-  "pink-500": $pink-500,
-  "pink-600": $pink-600,
-  "pink-700": $pink-700,
-  "pink-800": $pink-800,
-  "pink-900": $pink-900
-);
-
-$reds: (
-  "red-100": $red-100,
-  "red-200": $red-200,
-  "red-300": $red-300,
-  "red-400": $red-400,
-  "red-500": $red-500,
-  "red-600": $red-600,
-  "red-700": $red-700,
-  "red-800": $red-800,
-  "red-900": $red-900
-);
-
-$oranges: (
-  "orange-100": $orange-100,
-  "orange-200": $orange-200,
-  "orange-300": $orange-300,
-  "orange-400": $orange-400,
-  "orange-500": $orange-500,
-  "orange-600": $orange-600,
-  "orange-700": $orange-700,
-  "orange-800": $orange-800,
-  "orange-900": $orange-900
-);
-
-$yellows: (
-  "yellow-100": $yellow-100,
-  "yellow-200": $yellow-200,
-  "yellow-300": $yellow-300,
-  "yellow-400": $yellow-400,
-  "yellow-500": $yellow-500,
-  "yellow-600": $yellow-600,
-  "yellow-700": $yellow-700,
-  "yellow-800": $yellow-800,
-  "yellow-900": $yellow-900
-);
-
-$greens: (
-  "green-100": $green-100,
-  "green-200": $green-200,
-  "green-300": $green-300,
-  "green-400": $green-400,
-  "green-500": $green-500,
-  "green-600": $green-600,
-  "green-700": $green-700,
-  "green-800": $green-800,
-  "green-900": $green-900
-);
-
-$teals: (
-  "teal-100": $teal-100,
-  "teal-200": $teal-200,
-  "teal-300": $teal-300,
-  "teal-400": $teal-400,
-  "teal-500": $teal-500,
-  "teal-600": $teal-600,
-  "teal-700": $teal-700,
-  "teal-800": $teal-800,
-  "teal-900": $teal-900
-);
-
-$cyans: (
-  "cyan-100": $cyan-100,
-  "cyan-200": $cyan-200,
-  "cyan-300": $cyan-300,
-  "cyan-400": $cyan-400,
-  "cyan-500": $cyan-500,
-  "cyan-600": $cyan-600,
-  "cyan-700": $cyan-700,
-  "cyan-800": $cyan-800,
-  "cyan-900": $cyan-900
-);
-/* fusv-enable */
-/* scss-docs-start theme-text-variables */
-$primary-text-emphasis:   shade-color($primary, 60%);
-$secondary-text-emphasis: shade-color($secondary, 60%);
-$success-text-emphasis:   shade-color($success, 60%);
-$info-text-emphasis:      shade-color($info, 60%);
-$warning-text-emphasis:   shade-color($warning, 60%);
-$danger-text-emphasis:    shade-color($danger, 60%);
-$light-text-emphasis:     $gray-700;
-$dark-text-emphasis:      $gray-700;
-/* scss-docs-end theme-text-variables */
-
-/* scss-docs-start theme-bg-subtle-variables */
-$primary-bg-subtle:       rgba($primary, 0.25);
-$secondary-bg-subtle:     rgba($secondary, 0.25);
-$success-bg-subtle:       rgba($success, 0.25);
-$info-bg-subtle:          rgba($info, 0.25);
-$warning-bg-subtle:       rgba($warning, 0.25);
-$danger-bg-subtle:        rgba($danger, 0.25);
-$light-bg-subtle:         mix($gray-100, $white);
-$dark-bg-subtle:          rgba($dark, 0.25);
-/* scss-docs-end theme-bg-subtle-variables */
-
-/* scss-docs-start theme-border-subtle-variables */
-$primary-border-subtle:   tint-color($primary, 60%);
-$secondary-border-subtle: tint-color($secondary, 60%);
-$success-border-subtle:   tint-color($success, 60%);
-$info-border-subtle:      tint-color($info, 60%);
-$warning-border-subtle:   tint-color($warning, 60%);
-$danger-border-subtle:    tint-color($danger, 60%);
-$light-border-subtle:     $gray-200;
-$dark-border-subtle:      $gray-500;
-/* scss-docs-end theme-border-subtle-variables */
-
-/* Characters which are escaped by the escape-svg function */
-$escaped-characters: (
-  ("<", "%3c"),
-  (">", "%3e"),
-  ("#", "%23"),
-  ("(", "%28"),
-  (")", "%29"),
-);
-
-/* Options */
-/*  */
-/* Quickly modify global styling by enabling or disabling optional features. */
-
-$enable-caret:                false;
-$enable-rounded:              true;
-$enable-shadows:              false;
-$enable-gradients:            false;
-$enable-transitions:          true;
-$enable-reduced-motion:       true;
-$enable-smooth-scroll:        true;
-$enable-grid-classes:         true;
-$enable-container-classes:    true;
-$enable-cssgrid:              false;
-$enable-button-pointers:      true;
-$enable-rfs:                  true;
-$enable-validation-icons:     true;
-$enable-negative-margins:     true;
-$enable-deprecation-messages: true;
-$enable-important-utilities:  true;
-
-$enable-dark-mode:            true;
-$color-mode-type:             data; /* `data` or `media-query` */
-
-/* Prefix for :root CSS variables */
-
-$variable-prefix:             bs-; /* Deprecated in v5.2.0 for the shorter `$prefix` */
-$prefix:                      $variable-prefix;
-
-/* Gradient */
-/*  */
-/* The gradient which is added to components if `$enable-gradients` is `true` */
-/* This gradient is also added to elements with `.bg-gradient` */
-/* scss-docs-start variable-gradient */
-$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));
-/* scss-docs-end variable-gradient */
-
-/* Spacing */
-/*  */
-/* Control the default styling of most Bootstrap elements by modifying these */
-/* variables. Mostly focused on spacing. */
-/* You can add more entries to the $spacers map, should you need more variation. */
-
-/* scss-docs-start spacer-variables-maps */
-$spacer: 1rem;
-$spacers: (
-  0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
-);
-
-$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
-/* scss-docs-end spacer-variables-maps */
-
-/* Position */
-/*  */
-/* Define the edge positioning anchors of the position utilities. */
-
-/* scss-docs-start position-map */
-$position-values: (
-  0: 0,
-  50: 50%,
-  100: 100%
-);
-
-/* scss-docs-end position-map */
-
-/* Body */
-/*  */
-/* Settings for the `<body>` element. */
-
-$body-bg:                   #f8f8fb;
-$body-color:                $gray-700;
-$body-text-align:           null;
-
-$body-secondary-color:      $gray-600;
-$body-secondary-bg:         $white;
-
-$body-tertiary-color:       rgba($body-color, .5);
-$body-tertiary-bg:          $gray-100;
-
-$body-emphasis-color:       $gray-800;
-
-/* Links */
-/*  */
-/* Style anchor elements. */
-
-$link-color:                              $primary;
-$link-decoration:                         none;
-$link-shade-percentage:                   20%;
-$link-hover-color:                        shift-color($link-color, $link-shade-percentage);
-$link-hover-decoration:                   underline;
-
-$stretched-link-pseudo-element:           after;
-$stretched-link-z-index:                  1;
-
-/* Icon links */
-/* scss-docs-start icon-link-variables */
-$icon-link-gap:               .375rem;
-$icon-link-underline-offset:  .25em;
-$icon-link-icon-size:         1em;
-$icon-link-icon-transition:   .2s ease-in-out transform;
-$icon-link-icon-transform:    translate3d(.25em, 0, 0);
-/* scss-docs-end icon-link-variables */
-
-/* Paragraphs */
-/*  */
-/* Style p element. */
-
-$paragraph-margin-bottom:   1rem;
-
-
-/* Grid breakpoints */
-/*  */
-/* Define the minimum dimensions at which your layout will change, */
-/* adapting to different screen sizes, for use in media queries. */
-
-/* scss-docs-start grid-breakpoints */
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
-/* scss-docs-end grid-breakpoints */
-
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
-
-/* Grid containers */
-/*  */
-/* Define the maximum width of `.container` for different screen sizes. */
-
-/* scss-docs-start container-max-widths */
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
-/* scss-docs-end container-max-widths */
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-/* Grid columns */
-/*  */
-/* Set the number of columns and specify the width of the gutters. */
-
-$grid-columns:                12;
-$grid-gutter-width:           24px;
-$grid-row-columns:            6;
-
-/* Container padding */
-
-$container-padding-x: $grid-gutter-width * 0.5;
-/* Components */
-/*  */
-/* Define common padding and border radius sizes and more. */
-
-/* scss-docs-start border-variables */
-$border-width:                1px;
-$border-widths: (
-  0: 0,
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px
-);
-
-$border-style:                solid;
-$border-color:                $gray-200;
-$border-color-translucent:    $gray-400;
-/* scss-docs-end border-variables */
-
-/* scss-docs-start border-radius-variables */
-$border-radius:               .25rem;
-$border-radius-sm:            .2rem;
-$border-radius-lg:            .4rem;
-$border-radius-xl:            1rem;
-$border-radius-xxl:           2rem;
-$border-radius-pill:          50rem;
-/* scss-docs-end border-radius-variables */
-/* fusv-disable */
-$border-radius-2xl:           $border-radius-xxl; /* Deprecated in v5.3.0 */
-/* fusv-enable */
-
-/* scss-docs-start box-shadow-variables */
-$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
-$box-shadow:                  0 0.75rem 1.5rem rgba(18,38,63,.03);
-$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
-$box-shadow-inset:            inset 0 1px 2px rgba($black, .075);
-/* scss-docs-end box-shadow-variables */
-
-$component-active-color:      $white;
-$component-active-bg:         $primary;
-
-/* scss-docs-start focus-ring-variables */
-$focus-ring-width:      .15rem;
-$focus-ring-opacity:    .25;
-$focus-ring-color:      rgba($primary, $focus-ring-opacity);
-$focus-ring-blur:       0;
-$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
-/* scss-docs-end focus-ring-variables */
-
-/* scss-docs-start caret-variables */
-$caret-width:                 .3em;
-$caret-vertical-align:        $caret-width * .85;
-$caret-spacing:               $caret-width * .85;
-/* scss-docs-end caret-variables */
-
-$transition-base:             all .2s ease-in-out;
-$transition-fade:             opacity .15s linear;
-/* scss-docs-start collapse-transition */
-$transition-collapse:         height .35s ease;
-$transition-collapse-width:   width .35s ease;
-/* scss-docs-end collapse-transition */
-
-/* stylelint-disable function-disallowed-list */
-/* scss-docs-start aspect-ratios */
-$aspect-ratios: (
-  "1x1": 100%,
-  "4x3": calc(3 / 4 * 100%),
-  "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
-);
-/* scss-docs-end aspect-ratios */
-/* stylelint-enable function-disallowed-list */
-
-/* Typography */
-/*  */
-/* Font, line-height, and color for body text, headings, and more. */
-
-/* scss-docs-start font-variables */
-/* stylelint-disable value-keyword-case */
-$font-family-sans-serif:      'Poppins', sans-serif;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-/* stylelint-enable value-keyword-case */
-$font-family-base:            var(--#{$prefix}font-sans-serif);
-$font-family-code:            var(--#{$prefix}font-monospace);
-
-/* $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins */
-/* $font-size-base effects the font size of the body text */
-$font-size-root:              null;
-$font-size-base:              0.8125rem;
-$font-size-sm:                $font-size-base * .875;
-$font-size-lg:                $font-size-base * 1.25;
-
-$font-weight-lighter:         lighter;
-$font-weight-light:           300;
-$font-weight-normal:          400;
-$font-weight-medium:          500;
-$font-weight-semibold:        600;
-$font-weight-bold:            600;
-$font-weight-bolder:          bolder;
-
-$font-weight-base:            $font-weight-normal;
-$line-height-base:            1.5;
-$line-height-sm:              1.25;
-$line-height-lg:              2;
-
-$h1-font-size:                $font-size-base * 2.5;
-$h2-font-size:                $font-size-base * 2;
-$h3-font-size:                $font-size-base * 1.75;
-$h4-font-size:                $font-size-base * 1.5;
-$h5-font-size:                $font-size-base * 1.25;
-$h6-font-size:                $font-size-base;
-/* scss-docs-end font-variables */
-
-/* scss-docs-start font-sizes */
-$font-sizes: (
-  1: $h1-font-size,
-  2: $h2-font-size,
-  3: $h3-font-size,
-  4: $h4-font-size,
-  5: $h5-font-size,
-  6: $h6-font-size
-);
-/* scss-docs-end font-sizes */
-
-/* scss-docs-start headings-variables */
-$headings-margin-bottom:      $spacer * .5;
-$headings-font-family:        null;
-$headings-font-style:         null;
-$headings-font-weight:        500;
-$headings-line-height:        1.2;
-$headings-color:              inherit;
-/* scss-docs-end headings-variables */
-
-/* scss-docs-start display-headings */
-$display-font-sizes: (
-  1: 6rem,
-  2: 5.5rem,
-  3: 4.5rem,
-  4: 3.5rem,
-  5: 3rem,
-  6: 2.5rem
-);
-
-$display-font-family: null;
-$display-font-style:  null;
-$display-font-weight: 300;
-$display-line-height: $headings-line-height;
-/* scss-docs-end display-headings */
-
-/* scss-docs-start type-variables */
-$lead-font-size:              $font-size-base * 1.25;
-$lead-font-weight:            300;
-
-$small-font-size:             80%;
-
-$sub-sup-font-size:           .75em;
-/* fusv-disable */
-$text-muted:                  var(--#{$prefix}secondary-color); /* Deprecated in 5.3.0 */
-/* fusv-enable */
-
-$initialism-font-size:        $small-font-size;
-
-$blockquote-margin-y:         $spacer;
-$blockquote-font-size:        $font-size-base * 1.25;
-$blockquote-footer-color:     var(--#{$prefix}secondary-color);
-$blockquote-footer-font-size: $small-font-size;
-
-$hr-margin-y:                 $spacer;
-$hr-color:                    inherit;
-/* fusv-disable */
-$hr-bg-color:                 null; /* Deprecated in v5.2.0 */
-$hr-height:                   null; /* Deprecated in v5.2.0 */
-/* fusv-enable */
-
-$hr-border-color:             var(--#{$prefix}border-color); /* Allows for inherited colors */
-$hr-border-width:             var(--#{$prefix}border-width);
-$hr-opacity:                  0.8;
-
-$legend-margin-bottom:        .5rem;
-$legend-font-size:            1.5rem;
-$legend-font-weight:          null;
-
-$dt-font-weight:              $font-weight-bold;
-
-$list-inline-padding:         .5rem;
-
-$mark-padding:                .2em;
-$mark-bg:                     #fcf8e3;
-/* scss-docs-end type-variables */
-
-
-/* Tables */
-/*  */
-/* Customizes the `.table` component with basic values, each used across all table variations. */
-
-/* scss-docs-start table-variables */
-$table-cell-padding-y:        .75rem;
-$table-cell-padding-x:        .75rem;
-$table-cell-padding-y-sm:     .3rem;
-$table-cell-padding-x-sm:     .3rem;
-
-$table-cell-vertical-align:   top;
-
-$table-color:                 var(--#{$prefix}body-color);
-$table-bg:                    var(--#{$prefix}secondary-bg);
-$table-accent-bg:             transparent;
-
-$table-th-font-weight:        null;
-
-$table-striped-color:         $table-color;
-$table-striped-bg-factor:     1;
-$table-striped-bg:            rgba(var(--#{$prefix}tertiary-bg-rgb), $table-striped-bg-factor);
-
-$table-active-color:          $table-color;
-$table-active-bg-factor:      1;
-$table-active-bg:             rgba(var(--#{$prefix}tertiary-bg-rgb), $table-active-bg-factor);
-
-$table-hover-color:           $table-color;
-$table-hover-bg-factor:       1;
-$table-hover-bg:              rgba(var(--#{$prefix}tertiary-bg-rgb), $table-hover-bg-factor);
-
-$table-border-factor:         .1;
-$table-border-width:          var(--#{$prefix}border-width);
-$table-border-color:          var(--#{$prefix}border-color);
-
-$table-striped-order:         odd;
-$table-striped-columns-order: even;
-$table-group-separator-color: currentcolor;
-
-$table-caption-color:         var(--#{$prefix}secondary-color);
-
-$table-bg-scale:              -80%;
-/* scss-docs-end table-variables */
-
-/* scss-docs-start table-loop */
-$table-variants: (
-  "primary":    shift-color($primary, $table-bg-scale),
-  "secondary":  shift-color($secondary, $table-bg-scale),
-  "success":    shift-color($success, $table-bg-scale),
-  "info":       shift-color($info, $table-bg-scale),
-  "warning":    shift-color($warning, $table-bg-scale),
-  "danger":     shift-color($danger, $table-bg-scale),
-  "light":      $light,
-  "dark":       $dark,
-);
-/* scss-docs-end table-loop */
-
-
-/* Buttons + Forms */
-/*  */
-/* Shared variables that are reassigned to `$input-` and `$btn-` specific variables. */
-
-/* scss-docs-start input-btn-variables */
-$input-btn-padding-y:         .47rem;
-$input-btn-padding-x:         .75rem;
-$input-btn-font-family:       null;
-$input-btn-font-size:         $font-size-base;
-$input-btn-line-height:       $line-height-base;
-
-$input-btn-focus-width:         $focus-ring-width;
-$input-btn-focus-color-opacity: $focus-ring-opacity;
-$input-btn-focus-color:         $focus-ring-color;
-$input-btn-focus-blur:          $focus-ring-blur;
-$input-btn-focus-box-shadow:    $focus-ring-box-shadow;
-
-$input-btn-padding-y-sm:      .25rem;
-$input-btn-padding-x-sm:      .5rem;
-$input-btn-font-size-sm:      $font-size-sm;
-
-$input-btn-padding-y-lg:      .5rem;
-$input-btn-padding-x-lg:      1rem;
-$input-btn-font-size-lg:      $font-size-lg;
-
-$input-btn-border-width:      var(--#{$prefix}border-width);
-/* scss-docs-end input-btn-variables */
-
-
-/* Buttons */
-/*  */
-/* For each of Bootstrap's buttons, define text, background, and border color. */
-
-/* scss-docs-start btn-variables */
-$btn-color:                   var(--#{$prefix}body-color);
-$btn-padding-y:               $input-btn-padding-y;
-$btn-padding-x:               $input-btn-padding-x;
-$btn-font-family:             $input-btn-font-family;
-$btn-font-size:               $input-btn-font-size;
-$btn-line-height:             $input-btn-line-height;
-$btn-white-space:             null; /* Set to `nowrap` to prevent text wrapping */
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm;
-$btn-padding-x-sm:            $input-btn-padding-x-sm;
-$btn-font-size-sm:            $input-btn-font-size-sm;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg;
-$btn-padding-x-lg:            $input-btn-padding-x-lg;
-$btn-font-size-lg:            $input-btn-font-size-lg;
-
-$btn-border-width:            $input-btn-border-width;
-
-$btn-font-weight:             $font-weight-normal;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
-$btn-focus-width:             $input-btn-focus-width;
-$btn-focus-box-shadow:        0 0 0 0.15rem rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
-$btn-disabled-opacity:        .65;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);
-
-$btn-link-color:              var(--#{$prefix}link-color);
-$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
-$btn-link-disabled-color:     $gray-600;
-
-/* Allows for customizing button radius independently from global border radius */
-$btn-border-radius:           var(--#{$prefix}border-radius);
-$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
-$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg);
-
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$btn-hover-bg-shade-amount:       15%;
-$btn-hover-bg-tint-amount:        15%;
-$btn-hover-border-shade-amount:   20%;
-$btn-hover-border-tint-amount:    10%;
-$btn-active-bg-shade-amount:      20%;
-$btn-active-bg-tint-amount:       20%;
-$btn-active-border-shade-amount:  25%;
-$btn-active-border-tint-amount:   10%;
-/* scss-docs-end btn-variables */
-
-
-/* Forms */
-
-/* scss-docs-start form-text-variables */
-$form-text-margin-top:                  .25rem;
-$form-text-font-size:                   $small-font-size;
-$form-text-font-style:                  null;
-$form-text-font-weight:                 null;
-$form-text-color:                       var(--#{$prefix}secondary-color);
-/* scss-docs-end form-text-variables */
-
-/* scss-docs-start form-label-variables */
-$form-label-margin-bottom:              .5rem;
-$form-label-font-size:                  null;
-$form-label-font-style:                 null;
-$form-label-font-weight:                null;
-$form-label-color:                      null;
-/* scss-docs-end form-label-variables */
-
-/* scss-docs-start form-input-variables */
-$input-padding-y:                       $input-btn-padding-y;
-$input-padding-x:                       $input-btn-padding-x;
-$input-font-family:                     $input-btn-font-family;
-$input-font-size:                       $input-btn-font-size;
-$input-font-weight:                     $font-weight-base;
-$input-line-height:                     $input-btn-line-height;
-
-$input-padding-y-sm:                    $input-btn-padding-y-sm;
-$input-padding-x-sm:                    $input-btn-padding-x-sm;
-$input-font-size-sm:                    $input-btn-font-size-sm;
-
-$input-padding-y-lg:                    $input-btn-padding-y-lg;
-$input-padding-x-lg:                    $input-btn-padding-x-lg;
-$input-font-size-lg:                    $input-btn-font-size-lg;
-
-$input-bg:                              var(--#{$prefix}secondary-bg);
-$input-disabled-color:                  null;
-$input-disabled-bg:                     var(--#{$prefix}body-bg);
-$input-disabled-border-color:           null;
-
-$input-color:                           var(--#{$prefix}emphasis-color);
-$input-border-color:                    var(--#{$prefix}border-color-translucent);
-$input-border-width:                    $input-btn-border-width;
-$input-box-shadow:                      $box-shadow-inset;
-
-$input-border-radius:                   var(--#{$prefix}border-radius);
-$input-border-radius-sm:                var(--#{$prefix}border-radius-sm);
-$input-border-radius-lg:                var(--#{$prefix}border-radius-lg);
-
-$input-focus-bg:                        $input-bg;
-$input-focus-border-color:              rgb(var(--#{$prefix}body-color-rgb), 0.2);
-$input-focus-color:                     $input-color;
-$input-focus-width:                     $input-btn-focus-width;
-$input-focus-box-shadow:                none;
-
-$input-placeholder-color:               var(--#{$prefix}secondary-color);
-$input-plaintext-color:                 var(--#{$prefix}body-color);
-
-$input-height-border:                   calc(#{$input-border-width} * 2); /* stylelint-disable-line function-disallowed-list */
-
-$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
-$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
-$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);
-
-$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
-$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
-$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));
-
-$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-$form-color-width:                      3rem;
-/* scss-docs-end form-input-variables */
-
-/* scss-docs-start form-check-variables */
-$form-check-input-width:                  1em;
-$form-check-min-height:                   $font-size-base * $line-height-base;
-$form-check-padding-start:                $form-check-input-width + .5em;
-$form-check-margin-bottom:                .125rem;
-$form-check-label-color:                  null;
-$form-check-label-cursor:                 null;
-$form-check-transition:                   background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$form-check-input-active-filter:          brightness(90%);
-
-$form-check-input-bg:                     $input-bg;
-$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color-translucent);
-$form-check-input-border-radius:          .25em;
-$form-check-radio-border-radius:          50%;
-$form-check-input-focus-border:           $input-focus-border-color;
-$form-check-input-focus-box-shadow:       $focus-ring-box-shadow;
-
-$form-check-input-checked-color:          $component-active-color;
-$form-check-input-checked-bg-color:       $component-active-bg;
-$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
-$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
-
-$form-check-input-indeterminate-color:          $component-active-color;
-$form-check-input-indeterminate-bg-color:       $component-active-bg;
-$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
-
-$form-check-input-disabled-opacity:        .5;
-$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
-$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;
-
-$form-check-inline-margin-end:    1rem;
-/* scss-docs-end form-check-variables */
-
-/* scss-docs-start form-switch-variables */
-$form-switch-color:               rgba($gray-600, 0.55);
-$form-switch-width:               2em;
-$form-switch-padding-start:       $form-switch-width + .5em;
-$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
-$form-switch-border-radius:       $form-switch-width;
-$form-switch-transition:          background-position .15s ease-in-out;
-
-$form-switch-focus-color:         rgba($gray-600, 0.55);
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
-
-$form-switch-checked-color:       $component-active-color;
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
-$form-switch-checked-bg-position: right center;
-/* scss-docs-end form-switch-variables */
-
-/* scss-docs-start input-group-variables */
-$input-group-addon-padding-y:           $input-padding-y;
-$input-group-addon-padding-x:           $input-padding-x;
-$input-group-addon-font-weight:         $input-font-weight;
-$input-group-addon-color:               $input-color;
-$input-group-addon-bg:                  var(--#{$prefix}tertiary-bg);
-$input-group-addon-border-color:        $input-border-color;
-/* scss-docs-end input-group-variables */
-
-/* scss-docs-start form-select-variables */
-$form-select-padding-y:             $input-padding-y;
-$form-select-padding-x:             $input-padding-x;
-$form-select-font-family:           $input-font-family;
-$form-select-font-size:             $input-font-size;
-$form-select-indicator-padding:     1.75rem; /* Extra padding to account for the presence of the background-image based indicator */
-$form-select-font-weight:           $input-font-weight;
-$form-select-line-height:           $input-line-height;
-$form-select-color:                 $input-color;
-$form-select-bg:                    $input-bg;
-$form-select-disabled-color:        null;
-$form-select-disabled-bg:           $input-disabled-bg;
-$form-select-disabled-border-color: $input-disabled-border-color;
-$form-select-bg-position:           right $form-select-padding-x center;
-$form-select-bg-size:               16px 12px; /* In pixels because image dimensions */
-$form-select-indicator-color:       $gray-800;
-$form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
-
-$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;
-$form-select-feedback-icon-position:    center right $form-select-indicator-padding;
-$form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half;
-
-$form-select-border-width:        $input-border-width;
-$form-select-border-color:        $input-border-color;
-$form-select-border-radius:       $input-border-radius;
-$form-select-box-shadow:          $box-shadow-inset;
-
-$form-select-focus-border-color:  $input-focus-border-color;
-$form-select-focus-width:         $input-focus-width;
-$form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color;
-
-$form-select-padding-y-sm:        $input-padding-y-sm;
-$form-select-padding-x-sm:        $input-padding-x-sm;
-$form-select-font-size-sm:        $input-font-size-sm;
-$form-select-border-radius-sm:    $input-border-radius-sm;
-
-$form-select-padding-y-lg:        $input-padding-y-lg;
-$form-select-padding-x-lg:        $input-padding-x-lg;
-$form-select-font-size-lg:        $input-font-size-lg;
-$form-select-border-radius-lg:    $input-border-radius-lg;
-
-$form-select-transition:          $input-transition;
-/* scss-docs-end form-select-variables */
-
-/* scss-docs-start form-range-variables */
-$form-range-track-width:          100%;
-$form-range-track-height:         .5rem;
-$form-range-track-cursor:         pointer;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg);
-$form-range-track-border-radius:  1rem;
-$form-range-track-box-shadow:     $box-shadow-inset;
-
-$form-range-thumb-width:                   1rem;
-$form-range-thumb-height:                  $form-range-thumb-width;
-$form-range-thumb-bg:                      $component-active-bg;
-$form-range-thumb-border:                  0;
-$form-range-thumb-border-radius:           1rem;
-$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);
-$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;
-$form-range-thumb-focus-box-shadow-width:  $input-focus-width; /* For focus box shadow issue in Edge */
-$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%);
-$form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color);
-$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-/* scss-docs-end form-range-variables */
-
-/* scss-docs-start form-file-variables */
-$form-file-button-color:          $input-color;
-$form-file-button-bg:             var(--#{$prefix}tertiary-bg);
-$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg);
-/* scss-docs-end form-file-variables */
-
-/* scss-docs-start form-floating-variables */
-$form-floating-height:            add(3.5rem, $input-height-border);
-$form-floating-line-height:       1.25;
-$form-floating-padding-x:         $input-padding-x;
-$form-floating-padding-y:         1rem;
-$form-floating-input-padding-t:   1.625rem;
-$form-floating-input-padding-b:   .625rem;
-$form-floating-label-height:            1.5em;
-$form-floating-label-opacity:     .65;
-$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
-$form-floating-label-disabled-color:    $gray-600;
-$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;
-/* scss-docs-end form-floating-variables */
-
-/* Form validation */
-
-/* scss-docs-start form-feedback-variables */
-$form-feedback-margin-top:          $form-text-margin-top;
-$form-feedback-font-size:           $form-text-font-size;
-$form-feedback-font-style:          $form-text-font-style;
-$form-feedback-valid-color:         $success;
-$form-feedback-invalid-color:       $danger;
-
-$form-feedback-icon-valid-color:    $form-feedback-valid-color;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-$form-feedback-icon-invalid-color:  $form-feedback-invalid-color;
-$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");
-/* scss-docs-end form-feedback-variables */
-
-/* scss-docs-start form-validation-colors */
-$form-valid-color:                  $form-feedback-valid-color;
-$form-valid-border-color:           $form-feedback-valid-color;
-$form-invalid-color:                $form-feedback-invalid-color;
-$form-invalid-border-color:         $form-feedback-invalid-color;
-/* scss-docs-end form-validation-colors */
-
-/* scss-docs-start form-validation-states */
-$form-validation-states: (
-  "valid": (
-    "color": var(--#{$prefix}form-valid-color),
-    "icon": $form-feedback-icon-valid,
-    "tooltip-color": #fff,
-    "tooltip-bg-color": var(--#{$prefix}success),
-    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}form-valid-border-color),
-  ),
-  "invalid": (
-    "color": var(--#{$prefix}form-invalid-color),
-    "icon": $form-feedback-icon-invalid,
-    "tooltip-color": #fff,
-    "tooltip-bg-color": var(--#{$prefix}danger),
-    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}form-invalid-border-color),
-  )
-);
-/* scss-docs-end form-validation-states */
-
-/* Z-index master list */
-/*  */
-/* Warning: Avoid customizing these values. They're used for a bird's eye view */
-/* of components dependent on the z-axis and are designed to all work together. */
-
-/* scss-docs-start zindex-stack */
-$zindex-dropdown:                   1000;
-$zindex-sticky:                     1020;
-$zindex-fixed:                      1030;
-$zindex-offcanvas-backdrop:         1040;
-$zindex-offcanvas:                  1045;
-$zindex-modal-backdrop:             1050;
-$zindex-modal:                      1055;
-$zindex-popover:                    1070;
-$zindex-tooltip:                    1080;
-$zindex-toast:                      1090;
-/* scss-docs-end zindex-stack */
-
-/* scss-docs-start zindex-levels-map */
-$zindex-levels: (
-  n1: -1,
-  0: 0,
-  1: 1,
-  2: 2,
-  3: 3
-);
-/* scss-docs-end zindex-levels-map */
-
-/* Navs */
-
-/* scss-docs-start nav-variables */
-$nav-link-padding-y:                .5rem;
-$nav-link-padding-x:                1rem;
-$nav-link-font-size:                null;
-$nav-link-font-weight:              null;
-$nav-link-color:                    var(--#{$prefix}link-color);
-$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
-$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
-$nav-link-disabled-color:           var(--#{$prefix}secondary-color);
-$nav-link-focus-box-shadow:         $focus-ring-box-shadow;
-
-$nav-tabs-border-color:             var(--#{$prefix}border-color);
-$nav-tabs-border-width:             var(--#{$prefix}border-width);
-$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
-$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
-$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
-$nav-tabs-link-active-bg:           var(--#{$prefix}secondary-bg);
-$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;
-
-$nav-pills-border-radius:           var(--#{$prefix}border-radius);
-$nav-pills-link-active-color:       $component-active-color;
-$nav-pills-link-active-bg:          $component-active-bg;
-
-$nav-underline-gap:                 1rem;
-$nav-underline-border-width:        .125rem;
-$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);
-/* scss-docs-end nav-variables */
-
-
-/* Navbar */
-
-/* scss-docs-start navbar-variables */
-$navbar-padding-y:                  $spacer * 0.5;
-$navbar-padding-x:                  null;
-
-$navbar-nav-link-padding-x:         .5rem;
-
-$navbar-brand-font-size:            $font-size-lg;
-/* Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link */
-$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * 0.5;
-$navbar-brand-margin-end:           1rem;
-
-$navbar-toggler-padding-y:          .25rem;
-$navbar-toggler-padding-x:          .75rem;
-$navbar-toggler-font-size:          $font-size-lg;
-$navbar-toggler-border-radius:      $btn-border-radius;
-$navbar-toggler-focus-width:        $btn-focus-width;
-$navbar-toggler-transition:         box-shadow .15s ease-in-out;
-
-$navbar-light-color:                rgba(var(--#{$prefix}emphasis-color-rgb), .65);
-$navbar-light-hover-color:          rgba(var(--#{$prefix}emphasis-color-rgb), .8);
-$navbar-light-active-color:         rgba(var(--#{$prefix}emphasis-color-rgb), 1);
-$navbar-light-disabled-color:       rgba(var(--#{$prefix}emphasis-color-rgb), .3);
-$navbar-light-icon-color:           rgba($body-color, .75);
-$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .15);
-$navbar-light-brand-color:          $navbar-light-active-color;
-$navbar-light-brand-hover-color:    $navbar-light-active-color;
-/* scss-docs-end navbar-variables */
-
-/* scss-docs-start navbar-dark-variables */
-$navbar-dark-color:                 rgba($white, .55);
-$navbar-dark-hover-color:           rgba($white, .75);
-$navbar-dark-active-color:          $white;
-$navbar-dark-disabled-color:        rgba($white, .25);
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
-$navbar-dark-toggler-border-color:  rgba($white, .1);
-$navbar-dark-brand-color:           $navbar-dark-active-color;
-$navbar-dark-brand-hover-color:     $navbar-dark-active-color;
-/* scss-docs-end navbar-dark-variables */
-
-
-/* Dropdowns */
-/*  */
-/* Dropdown menu container and contents. */
-
-/* scss-docs-start dropdown-variables */
-$dropdown-min-width:                10rem;
-$dropdown-padding-x:                0;
-$dropdown-padding-y:                .5rem;
-$dropdown-spacer:                   .125rem;
-$dropdown-font-size:                $font-size-base;
-$dropdown-color:                    var(--#{$prefix}body-color);
-$dropdown-bg:                       var(--#{$prefix}secondary-bg);
-$dropdown-border-color:             var(--#{$prefix}border-color);
-$dropdown-border-radius:            var(--#{$prefix}border-radius);
-$dropdown-border-width:             0;
-$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width});
-$dropdown-divider-bg:               $dropdown-border-color;
-$dropdown-divider-margin-y:         $spacer * .5;
-$dropdown-box-shadow:               $box-shadow;
-
-$dropdown-link-color:               var(--#{$prefix}body-color);
-$dropdown-link-hover-color:         var(--#{$prefix}emphasis-color);
-$dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg);
-
-$dropdown-link-active-color:        var(--#{$prefix}emphasis-color);
-$dropdown-link-active-bg:           var(--#{$prefix}tertiary-bg);
-
-$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color);
-
-$dropdown-item-padding-y:           .35rem;
-$dropdown-item-padding-x:           1.5rem;
-
-$dropdown-header-color:             $gray-600;
-$dropdown-header-padding-x: $dropdown-item-padding-x ;
-$dropdown-header-padding-y: $dropdown-padding-y ;
-/* fusv-disable */
-$dropdown-header-padding:           $dropdown-header-padding-y $dropdown-header-padding-x; /* Deprecated in v5.2.0 */
-/* fusv-enable */
-/* scss-docs-end dropdown-variables */
-
-/* scss-docs-start dropdown-dark-variables */
-$dropdown-dark-color:               $gray-300;
-$dropdown-dark-bg:                  $gray-800;
-$dropdown-dark-border-color:        $dropdown-border-color;
-$dropdown-dark-divider-bg:          $dropdown-divider-bg;
-$dropdown-dark-box-shadow:          null;
-$dropdown-dark-link-color:          $dropdown-dark-color;
-$dropdown-dark-link-hover-color:    $white;
-$dropdown-dark-link-hover-bg:       rgba($white, .15);
-$dropdown-dark-link-active-color:   $dropdown-link-active-color;
-$dropdown-dark-link-active-bg:      $dropdown-link-active-bg;
-$dropdown-dark-link-disabled-color: $gray-500;
-$dropdown-dark-header-color:        $gray-500;
-/* scss-docs-end dropdown-dark-variables */
-
-
-/* Pagination */
-
-/* scss-docs-start pagination-variables */
-$pagination-padding-y:              .5rem;
-$pagination-padding-x:              .75rem;
-$pagination-padding-y-sm:           .25rem;
-$pagination-padding-x-sm:           .5rem;
-$pagination-padding-y-lg:           .75rem;
-$pagination-padding-x-lg:           1.5rem;
-
-$pagination-font-size:              $font-size-base ;
-
-$pagination-color:                  var(--#{$prefix}secondary-color);
-$pagination-bg:                     var(--#{$prefix}secondary-bg);
-$pagination-border-radius:          var(--#{$prefix}border-radius);
-$pagination-border-width:           var(--#{$prefix}border-width);
-$pagination-margin-start:           calc(#{$pagination-border-width} * -1); /* stylelint-disable-line function-disallowed-list */
-$pagination-border-color:           var(--#{$prefix}border-color);
-
-$pagination-focus-color:            var(--#{$prefix}link-hover-color);
-$pagination-focus-bg:               var(--#{$prefix}secondary-bg);
-$pagination-focus-box-shadow:       $focus-ring-box-shadow;
-$pagination-focus-outline:          0;
-
-$pagination-hover-color:            var(--#{$prefix}link-hover-color);
-$pagination-hover-bg:               var(--#{$prefix}tertiary-bg);
-$pagination-hover-border-color:     var(--#{$prefix}border-color); /* Todo in v6: remove this? */
-
-$pagination-active-color:           $component-active-color;
-$pagination-active-bg:              $component-active-bg;
-$pagination-active-border-color:    $component-active-bg;
-
-$pagination-disabled-color:         var(--#{$prefix}secondary-color);
-$pagination-disabled-bg:            var(--#{$prefix}secondary-bg);
-$pagination-disabled-border-color:  var(--#{$prefix}border-color);
-
-$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm);
-$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg);
-/* scss-docs-end pagination-variables */
-
-
-/* Placeholders */
-
-/* scss-docs-start placeholders */
-$placeholder-opacity-max:           .5;
-$placeholder-opacity-min:           .2;
-/* scss-docs-end placeholders */
-
-/* Cards */
-
-/* scss-docs-start card-variables */
-$card-spacer-y:                     1.25rem;
-$card-spacer-x:                     1.25rem;
-$card-title-spacer-y:               $spacer * .5;
-$card-title-color:                  var(--#{$prefix}emphasis-color);
-$card-subtitle-color:               null;
-$card-border-width:                 0;
-$card-border-color:                 var(--#{$prefix}border-color);
-$card-border-radius:                var(--#{$prefix}border-radius);
-$card-box-shadow:                   null;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
-$card-cap-padding-y:                $card-spacer-y * .5;
-$card-cap-padding-x:                $card-spacer-x;
-$card-cap-bg:                       var(--#{$prefix}tertiary-bg);
-$card-cap-color:                    null;
-$card-height:                       null;
-$card-color:                        null;
-$card-bg:                           var(--#{$prefix}secondary-bg);
-$card-img-overlay-padding:          $spacer;
-$card-group-margin:                 $grid-gutter-width * .5;
-/* scss-docs-end card-variables */
-
-/* Accordion */
-
-/* scss-docs-start accordion-variables */
-$accordion-padding-y:                     1rem;
-$accordion-padding-x:                     1.25rem;
-$accordion-color:                         var(--#{$prefix}body-color);
-$accordion-bg:                            var(--#{$prefix}secondary-bg);
-$accordion-border-width:                  var(--#{$prefix}border-width);
-$accordion-border-color:                  var(--#{$prefix}border-color);
-$accordion-border-radius:                 var(--#{$prefix}border-radius);
-$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);
-
-$accordion-body-padding-y:                $accordion-padding-y;
-$accordion-body-padding-x:                $accordion-padding-x;
-
-$accordion-button-padding-y:              $accordion-padding-y;
-$accordion-button-padding-x:              $accordion-padding-x;
-$accordion-button-color:                  var(--#{$prefix}body-color);
-$accordion-button-bg:                     var(--#{$prefix}accordion-bg);
-$accordion-transition:                    $btn-transition, border-radius .15s ease;
-$accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle);
-$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis);
-
-$accordion-button-focus-border-color:     $input-focus-border-color;
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;
-
-$accordion-icon-width:                    16px;
-$accordion-icon-color:                    $body-color;
-$accordion-icon-active-color:             $primary-text-emphasis;
-$accordion-icon-transition:               transform .2s ease-in-out;
-$accordion-icon-transform:                rotate(-180deg);
-
-$accordion-button-icon:                   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-$accordion-button-active-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-/* scss-docs-end accordion-variables */
-
-/* Tooltips */
-
-/* scss-docs-start tooltip-variables */
-$tooltip-font-size:                 $font-size-sm;
-$tooltip-max-width:                 200px;
-$tooltip-color:                     var(--#{$prefix}secondary-bg);
-$tooltip-bg:                        var(--#{$prefix}emphasis-color);
-$tooltip-border-radius:             var(--#{$prefix}border-radius);
-$tooltip-opacity:                   .9;
-$tooltip-padding-y:                 .4rem;
-$tooltip-padding-x:                 .7rem;
-$tooltip-margin:                    0;
-
-$tooltip-arrow-width:               .8rem;
-$tooltip-arrow-height:              .4rem;
-/* fusv-disable */
-$tooltip-arrow-color:               null; /* Deprecated in Bootstrap 5.2.0 for CSS variables */
-/* fusv-enable */
-/* scss-docs-end tooltip-variables */
-
-/* Form tooltips must come after regular tooltips */
-/* scss-docs-start tooltip-feedback-variables */
-$form-feedback-tooltip-padding-y:     $tooltip-padding-y;
-$form-feedback-tooltip-padding-x:     $tooltip-padding-x;
-$form-feedback-tooltip-font-size:     $tooltip-font-size;
-$form-feedback-tooltip-line-height:   $line-height-base;
-$form-feedback-tooltip-opacity:       $tooltip-opacity;
-$form-feedback-tooltip-border-radius: $tooltip-border-radius;
-/* scss-docs-end tooltip-feedback-variables */
-
-
-/* Popovers */
-
-/* scss-docs-start popover-variables */
-$popover-font-size:                 $font-size-sm;
-$popover-bg:                        var(--#{$prefix}secondary-bg);
-$popover-max-width:                 276px;
-$popover-border-width:              var(--#{$prefix}border-width);
-$popover-border-color:              var(--#{$prefix}border-color);
-$popover-border-radius:             var(--#{$prefix}border-radius-lg);
-$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}); /* stylelint-disable-line function-disallowed-list */
-$popover-box-shadow:                0 .25rem .5rem rgba($black, .2);
-
-$popover-header-font-size:          $font-size-base;
-$popover-header-bg:                 var(--#{$prefix}secondary-bg);
-$popover-header-color:              $headings-color;
-$popover-header-padding-y:          .5rem;
-$popover-header-padding-x:          $spacer;
-
-$popover-body-color:                var(--#{$prefix}body-color);
-$popover-body-padding-y:            $spacer;
-$popover-body-padding-x:            $spacer;
-
-$popover-arrow-width:               1rem;
-$popover-arrow-height:              .5rem;
-/* scss-docs-end popover-variables */
-
-/* fusv-disable */
-/* Deprecated in Bootstrap 5.2.0 for CSS variables */
-$popover-arrow-color:               $popover-bg;
-$popover-arrow-outer-color:         var(--#{$prefix}border-color);
-/* fusv-enable */
-
-
-/* Toasts */
-
-/* scss-docs-start toast-variables */
-$toast-max-width:                   350px;
-$toast-padding-x:                   .75rem;
-$toast-padding-y:                   .25rem;
-$toast-font-size:                   .875rem;
-$toast-color:                       null;
-$toast-background-color:            var(--#{$prefix}secondary-bg);
-$toast-border-width:                var(--#{$prefix}border-width);
-$toast-border-color:                var(--#{$prefix}border-color);
-$toast-border-radius:               .25rem;
-$toast-box-shadow:                  var(--#{$prefix}box-shadow-lg);
-$toast-spacing:                     $container-padding-x;
-
-$toast-header-color:                var(--#{$prefix}secondary-color);
-$toast-header-background-color:     var(--#{$prefix}secondary-bg);
-$toast-header-border-color:         $toast-border-color;
-/* scss-docs-end toast-variables */
-
-
-/* Badges */
-
-/* scss-docs-start badge-variables */
-$badge-font-size:                   75%;
-$badge-font-weight:                 $font-weight-medium;
-$badge-color:                       $white;
-$badge-padding-y:                   .25em;
-$badge-padding-x:                   .4em;
-$badge-border-radius:               var(--#{$prefix}border-radius);
-/* scss-docs-end badge-variables */
-
-
-/* Modals */
-
-/* scss-docs-start modal-variables */
-$modal-inner-padding:               1rem;
-
-$modal-footer-margin-between:       .5rem;
-
-$modal-dialog-margin:               .5rem;
-$modal-dialog-margin-y-sm-up:       1.75rem;
-
-$modal-title-line-height:           $line-height-base;
-
-$modal-content-color:               null;
-$modal-content-bg:                  var(--#{$prefix}secondary-bg);
-$modal-content-border-color:        var(--#{$prefix}border-color);
-$modal-content-border-width:        var(--#{$prefix}border-width);
-$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
-$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
-$modal-content-box-shadow-xs:       $box-shadow-sm;
-$modal-content-box-shadow-sm-up:    $box-shadow;
-
-$modal-backdrop-bg:                 $black;
-$modal-backdrop-opacity:            .5;
-
-$modal-header-border-color:         var(--#{$prefix}border-color);
-$modal-header-border-width:         $modal-content-border-width;
-$modal-header-padding-y:            $modal-inner-padding;
-$modal-header-padding-x:            $modal-inner-padding;
-$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; /* Keep this for backwards compatibility */
-
-$modal-footer-bg:                   null;
-$modal-footer-border-color:         $modal-header-border-color;
-$modal-footer-border-width:         $modal-header-border-width;
-$modal-sm:                          300px;
-$modal-md:                          500px;
-$modal-lg:                          800px;
-$modal-xl:                          1140px;
-
-$modal-fade-transform:              translate(0, -50px);
-$modal-show-transform:              none;
-$modal-transition:                  transform .3s ease-out;
-$modal-scale-transform:             scale(1.02);
-/* scss-docs-end modal-variables */
-
-
-/* Alerts */
-/*  */
-/* Define alert colors, border radius, and padding. */
-
-/* scss-docs-start alert-variables */
-$alert-padding-y:                   .75rem;
-$alert-padding-x:                   1.25rem;
-$alert-margin-bottom:               1rem;
-$alert-border-radius:               var(--#{$prefix}border-radius);
-$alert-link-font-weight:            $font-weight-bold;
-$alert-border-width:                var(--#{$prefix}border-width);
-
-$alert-bg-scale:                    -80%;
-$alert-border-scale:                -70%;
-$alert-color-scale:                 40%;
-
-$alert-dismissible-padding-r:   $alert-padding-x * 3; /* 3x covers width of x plus default padding on either side */
-/* scss-docs-end alert-variables */
-
-/* fusv-disable */
-$alert-bg-scale:                -80%; /* Deprecated in v5.2.0, to be removed in v6 */
-$alert-border-scale:            -70%; /* Deprecated in v5.2.0, to be removed in v6 */
-$alert-color-scale:             40%; /* Deprecated in v5.2.0, to be removed in v6 */
-/* fusv-enable */
-
-/* Progress bars */
-
-/* scss-docs-start progress-variables */
-$progress-height:                   .625rem;
-$progress-font-size:                $font-size-base * .75;
-$progress-bg:                       var(--#{$prefix}tertiary-bg);
-$progress-border-radius:            var(--#{$prefix}border-radius);
-$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
-$progress-bar-color:                $white;
-$progress-bar-bg:                   $primary;
-$progress-bar-animation-timing:     1s linear infinite;
-$progress-bar-transition:           width .6s ease;
-/* scss-docs-end progress-variables */
-
-
-/* List group */
-
-/* scss-docs-start list-group-variables */
-$list-group-color:                  var(--#{$prefix}emphasis-color);
-$list-group-bg:                     var(--#{$prefix}secondary-bg);
-$list-group-border-color:           var(--#{$prefix}border-color);
-$list-group-border-width:           var(--#{$prefix}border-width);
-$list-group-border-radius:          var(--#{$prefix}border-radius);
-
-$list-group-item-padding-y:         .75rem;
-$list-group-item-padding-x:         1.25rem;
-/* fusv-disable */
-$list-group-item-bg-scale:          -80%; /* Deprecated in v5.3.0 */
-$list-group-item-color-scale:       40%; /* Deprecated in v5.3.0 */
-/* fusv-enable */
-
-$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
-$list-group-active-color:           $component-active-color;
-$list-group-active-bg:              $component-active-bg;
-$list-group-active-border-color:    $list-group-active-bg;
-
-$list-group-disabled-color:         var(--#{$prefix}tertiary-color);
-$list-group-disabled-bg:            $list-group-bg;
-
-$list-group-action-color:           var(--#{$prefix}secondary-color);
-$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);
-
-$list-group-action-active-color:    var(--#{$prefix}body-color);
-$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);
-/* scss-docs-end list-group-variables */
-
-
-/* Image thumbnails */
-
-/* scss-docs-start thumbnail-variables */
-$thumbnail-padding:                 .25rem;
-$thumbnail-bg:                      var(--#{$prefix}body-bg);
-$thumbnail-border-width:            var(--#{$prefix}border-width);
-$thumbnail-border-color:            var(--#{$prefix}border-color);
-$thumbnail-border-radius:           var(--#{$prefix}border-radius);
-$thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm);
-/* scss-docs-end thumbnail-variables */
-
-
-/* Figures */
-
-/* scss-docs-start figure-variables */
-$figure-caption-font-size:          $small-font-size;
-$figure-caption-color:              var(--#{$prefix}secondary-color);
-/* scss-docs-end figure-variables */
-
-
-/* Breadcrumbs */
-
-/* scss-docs-start breadcrumb-variables */
-$breadcrumb-font-size:              null;
-$breadcrumb-padding-y:              .75rem;
-$breadcrumb-padding-x:              1rem;
-$breadcrumb-item-padding-x:         .5rem;
-$breadcrumb-margin-bottom:          1rem;
-$breadcrumb-bg:                     null;
-$breadcrumb-divider-color:          var(--#{$prefix}secondary-color);
-$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
-$breadcrumb-divider:                quote("/");
-$breadcrumb-divider-flipped:        $breadcrumb-divider;
-$breadcrumb-border-radius:          null;
-/* scss-docs-end breadcrumb-variables */
-
-/* Carousel */
-
-/* scss-docs-start carousel-variables */
-$carousel-control-color:             $white;
-$carousel-control-width:             15%;
-$carousel-control-opacity:           .5;
-$carousel-control-hover-opacity:     .9;
-$carousel-control-transition:        opacity .15s ease;
-
-$carousel-indicator-width:           30px;
-$carousel-indicator-height:          3px;
-$carousel-indicator-hit-area-height: 10px;
-$carousel-indicator-spacer:          3px;
-$carousel-indicator-opacity:         .5;
-$carousel-indicator-active-bg:       $white;
-$carousel-indicator-active-opacity:  1;
-$carousel-indicator-transition:      opacity .6s ease;
-
-$carousel-caption-width:             70%;
-$carousel-caption-color:             $white;
-$carousel-caption-padding-y:         1.25rem;
-$carousel-caption-spacer:            1.25rem;
-
-$carousel-control-icon-width:        2rem;
-
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
-
-$carousel-transition-duration:       .6s;
-$carousel-transition:                transform $carousel-transition-duration ease-in-out; /* Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`) */
-/* scss-docs-end carousel-variables */
-
-/* scss-docs-start carousel-dark-variables */
-$carousel-dark-indicator-active-bg:  $black;
-$carousel-dark-caption-color:        $black;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100);
-/* scss-docs-end carousel-dark-variables */
-
-/* Spinners */
-
-/* scss-docs-start spinner-variables */
-$spinner-width:           2rem;
-$spinner-height:          $spinner-width;
-$spinner-vertical-align:  -.125em;
-$spinner-border-width:    .25em;
-$spinner-animation-speed: .75s;
-
-$spinner-width-sm:        1rem;
-$spinner-height-sm:       $spinner-width-sm;
-$spinner-border-width-sm: .2em;
-/* scss-docs-end spinner-variables */
-
-
-/* Close */
-
-/* scss-docs-start close-variables */
-$btn-close-width:            1em;
-$btn-close-height:           $btn-close-width;
-$btn-close-padding-x:        .25em;
-$btn-close-padding-y:        $btn-close-padding-x;
-$btn-close-color:            $black;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
-$btn-close-focus-shadow:     none;
-$btn-close-opacity:          .5;
-$btn-close-hover-opacity:    .75;
-$btn-close-focus-opacity:    1;
-$btn-close-disabled-opacity: .25;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);
-/* scss-docs-end close-variables */
-
-
-/* Offcanvas */
-
-/* scss-docs-start offcanvas-variables */
-$offcanvas-padding-y:               $modal-inner-padding;
-$offcanvas-padding-x:               $modal-inner-padding;
-$offcanvas-horizontal-width:        400px;
-$offcanvas-vertical-height:         30vh;
-$offcanvas-transition-duration:     .3s;
-$offcanvas-border-color:            $modal-content-border-color;
-$offcanvas-border-width:            $modal-content-border-width;
-$offcanvas-title-line-height:       $modal-title-line-height;
-$offcanvas-bg-color:                var(--#{$prefix}secondary-bg);
-$offcanvas-color:                   var(--#{$prefix}body-color);
-$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
-$offcanvas-backdrop-bg:             $modal-backdrop-bg;
-$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;
-/* scss-docs-end offcanvas-variables */
-
-/* Code */
-
-$code-font-size:                    87.5%;
-$code-color:                        $pink;
-
-$kbd-padding-y:                     .2rem;
-$kbd-padding-x:                     .4rem;
-$kbd-font-size:                     $code-font-size;
-$kbd-color:                         var(--#{$prefix}body-bg);
-$kbd-bg:                            var(--#{$prefix}body-color);
-$nested-kbd-font-weight:            null; /* Deprecated in v5.2.0, removing in v6 */
-
-$pre-color:                         null;
-
-$faded-color: #BCBCBC;
-
-$log-sec-height-lg:                    400px;
-$log-sec-height-md:                    280px;
-$log-sec-height-sm:                    150px;
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
deleted file mode 100644
index 801666ce..00000000
--- a/src/lib/scss/app.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-/*
-Template Name: Skote - Admin & Dashboard Template
-Author: Themesbrand
-Version: 4.1.0.
-Website: https://themesbrand.com/
-Contact: themesbrand@gmail.com
-File: Main Css File
-*/
-
-/* Fonts */
-@import "custom/fonts/fonts";
-
-/* Core files */
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "variables";
-@import "variables-dark";
-@import "bootstrap/scss/mixins";
-
-/* Structure */
-@import "custom/structure/general";
-@import "custom/structure/topbar";
-@import "custom/structure/page-head";
-@import "custom/structure/footer";
-@import "custom/structure/right-sidebar";
-@import "custom/structure/vertical";
-@import "custom/structure/horizontal-nav";
-@import "custom/structure/layouts";
-
-/* Components */
-@import "custom/components/waves";
-@import "custom/components/avatar";
-@import "custom/components/accordion";
-@import "custom/components/helper";
-@import "custom/components/preloader";
-@import "custom/components/forms";
-@import "custom/components/widgets";
-@import "custom/components/demos";
-@import "custom/components/print";
-@import "custom/components/loader";
-@import "custom/components/chat";
-@import "custom/components/alert";
-@import "custom/components/file";
-@import "custom/components/audio";
-@import "custom/components/text";
-@import "custom/components/select";
-@import "custom/components/markdown";
-@import "custom/components/state";
-@import "custom/components/codeScript";
-@import "custom/components/rich_content";
-
-/* Plugins */
-@import "custom/plugins/custom-scrollbar";
-@import "custom/plugins/calendar";
-@import "custom/plugins/calendar-full";
-@import "custom/plugins/dragula";
-@import "custom/plugins/session-timeout";
-@import "custom/plugins/range-slider";
-@import "custom/plugins/sweatalert2";
-@import "custom/plugins/rating";
-@import "custom/plugins/toastr";
-@import "custom/plugins/parsley";
-@import "custom/plugins/select2";
-
-@import "custom/plugins/switch";
-@import "custom/plugins/colorpicker";
-@import "custom/plugins/timepicker";
-@import "custom/plugins/datepicker";
-@import "custom/plugins/bootstrap-touchspin";
-@import "custom/plugins/form-editors";
-@import "custom/plugins/form-upload";
-@import "custom/plugins/form-wizard";
-@import "custom/plugins/datatable";
-@import "custom/plugins/responsive-table";
-@import "custom/plugins/table-editable";
-@import "custom/plugins/apexcharts";
-@import "custom/plugins/echarts";
-@import "custom/plugins/flot";
-@import "custom/plugins/sparkline-chart";
-@import "custom/plugins/google-map";
-@import "custom/plugins/vector-maps";
-@import "custom/plugins/leaflet-maps";
-
-/* Pages */
-@import "custom/pages/authentication";
-@import "custom/pages/ecommerce";
-@import "custom/pages/email";
-@import "custom/pages/file-manager";
-@import "custom/pages/chat";
-@import "custom/pages/projects";
-@import "custom/pages/contacts";
-@import "custom/pages/coming-soon";
-@import "custom/pages/timeline";
-@import "custom/pages/extras-pages";
-@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";
-@import "custom/pages/instruction";
-
-/* Common */
-@import "custom/common/animation";
-@import "custom/common/display";
-@import "custom/common/common";
-
-/* RTL */
-/* @import "custom/rtl/bootstrap-rtl"; */
-/* @import "custom/rtl/components-rtl"; */
-/* @import "custom/rtl/float-rtl"; */
-/* @import "custom/rtl/general-rtl"; */
-/* @import "custom/rtl/pages-rtl"; */
-/* @import "custom/rtl/plugins-rtl"; */
-/* @import "custom/rtl/spacing-rtl"; */
-/* @import "custom/rtl/structure-rtl"; */
-/* @import "custom/rtl/text-rtl"; */
diff --git a/src/lib/scss/bootstrap.scss b/src/lib/scss/bootstrap.scss
deleted file mode 100644
index 5b466107..00000000
--- a/src/lib/scss/bootstrap.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Template Name: Skote - Admin & Dashboard Template
-Author: Themesbrand
-Version: 4.1.0.
-Website: https://themesbrand.com/
-Contact: themesbrand@gmail.com
-File: Custom Bootstrap Css File
-*/
-
-
-/* Core files */
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "variables";
-@import "variables-dark";
-@import "bootstrap/scss/bootstrap";
-
-@import "custom/components/root";
-@import "custom/components/reboot";
-@import "custom/components/badge";
-@import "custom/components/buttons";
-@import "custom/components/breadcrumb";
-@import "custom/components/card";
-@import "custom/components/dropdown";
-@import "custom/components/nav";
-@import "custom/components/table";
-@import "custom/components/pagination";
-@import "custom/components/progress";
\ No newline at end of file
diff --git a/src/lib/scss/custom/common/_animation.scss b/src/lib/scss/custom/common/_animation.scss
deleted file mode 100644
index 971f0eda..00000000
--- a/src/lib/scss/custom/common/_animation.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.css-animation {
-    animation-duration: 0.8s;
-    animation-fill-mode: both;
-}
-
-.fade-in-from-none {
-    animation-name: fadeInFromNone;
-}
-
-@keyframes fadeInFromNone {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
deleted file mode 100644
index 2291c014..00000000
--- a/src/lib/scss/custom/common/_common.scss
+++ /dev/null
@@ -1,236 +0,0 @@
-/* custom css */
-.tab-content .nav-tabs {
-  display: none;
-}
-  
-/* dropzone  */
-.dropzone .dz-message {
-  text-align: center;
-}
-  
-[data-bs-theme="dark"] {
-  .right-bar .right-bar-toggle {
-    color: #575d64;
-    background-color: #fff;
-  }
-
-  .svelte-select {
-    max-height: 20px !important;
-    min-height: 37px !important;
-    background-color: var(--bs-secondary-bg) !important;
-    border-color: var(--bs-border-color-translucent) !important;
-    padding-right: 5px !important;
-
-    .value-container {
-      padding: 0 !important;
-
-      .selected-item {
-        color: #dedddd !important;
-        font-size: .8125rem !important;
-        z-index: 1;
-      }
-
-      input {
-        background-color: var(--bs-secondary-bg) !important;
-        font-size: .8125rem !important;
-      }
-
-    }
-
-    .indicators {
-      font-size: .8125rem !important;
-
-      .clear-select {
-        height: 18px !important;
-        width: 18px !important;
-        /* font-size: .8125rem !important; */
-      }
-    }
-  }
-
-  .svelte-select-list {
-    background-color: #282b2e !important;
-  }
-
-  /* Modal */
-  .modal {
-    .modal-content{
-      background-color: var(--bs-modal-bg);
-      border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
-    }
-  }
-}
-  
-/* select elements */
-.svelte-select {
-  max-height: 20px !important;
-  min-height: 37px !important;
-  /* background-color: #f3f6f9 !important; */
-  border-color: #f3f6f9 !important;
-  padding-right: 5px !important;
-
-  .value-container {
-    padding: 0 !important;
-
-    .selected-item {
-      color: #000 !important;
-      font-size: .8125rem !important;
-      z-index: 1;
-    }
-
-    input {
-      /* background-color: #f3f6f9 !important; */
-      font-size: .8125rem !important;
-    }
-  }
-  
-  .indicators {
-    font-size: .8125rem !important;
-
-    .clear-select {
-      height: 18px !important;
-      width: 18px !important;
-
-    }
-  }
-}
-  
-.jvm-zoom-btn {
-  position: absolute;
-  left: 10px;
-  background: #424242;
-  padding: 2px;
-  color: white;
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-  line-height: 10px;
-  text-align: center;
-  left: 28px;
-  border-radius: 3px;
-
-  &.jvm-zoom-btn {
-
-    top: 90px;
-  }
-
-  &.jvm-zoomout {
-    top: 110px;
-  }
-}
-  
-/* data tables */
-
-.sort {
-  &.asc::after {
-    content: "â–²"/"";
-    float: right;
-  }
-
-  &.desc::after{
-    content: "â–¼"/"";
-    float: right;
-  }
-}
-  
-.json-container .json-string {
-  overflow-x: hidden;
-}
-  
-/* swal2 */
-.swal2-container .swal2-confirm {
-  background-color: var(--bs-primary);
-}
-  
-button:focus {
-  outline: none !important;
-  box-shadow: none !important;
-}
-  
-.clickable {
-  cursor: pointer;
-}
-  
-.line-align-center {
-  display: flex;
-  flex-direction: column;
-  justify-content:center;
-}
-
-.div-center {
-  display: flex;
-  justify-content:center;
-}
-
-.ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.truncate-text {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  overflow-y: hidden;
-}
-  
-.disable-outline {
-  outline: none !important;
-  box-shadow: none !important;
-}
-  
-.danger-background {
-  background-color: $danger !important;
-}
-
-.thin-scrollbar {
-  scrollbar-width: thin;
-}
-
-.none-scrollbar {
-  scrollbar-width: none;
-}
-
-.scrollable-dropdown {
-  .dropdown-menu {
-    max-height: 200px;
-    overflow-y: auto;
-  }
-  .dropdown-item {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.text-btn {
-  background: none;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: 500;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: none;
-    background: none;
-  }
-
-  &:active {
-    background: none !important;
-    box-shadow: none !important;
-    outline: none !important;
-    text-decoration: none !important;
-    transform: none !important;
-  }
-}
-
-.collapse-toggle {
-  transition: transform 0.2s ease-in-out;
-}
-
-.collapse-toggle.rotated {
-  transform: rotate(90deg);
-}
diff --git a/src/lib/scss/custom/common/_display.scss b/src/lib/scss/custom/common/_display.scss
deleted file mode 100644
index 337b5d92..00000000
--- a/src/lib/scss/custom/common/_display.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.hide {
-    display: none !important;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_accordion.scss b/src/lib/scss/custom/components/_accordion.scss
deleted file mode 100644
index a050f11a..00000000
--- a/src/lib/scss/custom/components/_accordion.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-
-/*  */
-/* accordion.scss */
-/*  */
-
-.custom-accordion {
-    .accordion-list {
-        display: flex;
-        border-radius: 7px;
-        background-color: var(--#{$prefix}tertiary-bg);
-        padding: 12px 20px;
-        color: var(--#{$prefix}body-color);
-        font-weight: $font-weight-semibold;
-        align-items: center;
-        justify-content: space-between;
-        &.collapsed {
-            i.accor-plus-icon {
-                &:before {
-                    content: "\F0415";
-                }
-            }
-        }
-
-        .accor-plus-icon{
-            display: inline-block;
-            font-size: 16px;
-            height: 24px;
-            width: 24px;
-            line-height: 22px;
-            background-color: var(--#{$prefix}secondary-bg);
-            text-align: center;
-            border-radius: 50%;
-        }
-    }
-
-    
-    a {
-
-        &.collapsed {
-            i.accor-down-icon {
-                &:before {
-                    content: "\F0140";
-                }
-            }
-        }
-    }
-
-
-    .card-body {
-        color: var(--#{prefix}secondary-color);
-    }
-}
diff --git a/src/lib/scss/custom/components/_alert.scss b/src/lib/scss/custom/components/_alert.scss
deleted file mode 100644
index f005e911..00000000
--- a/src/lib/scss/custom/components/_alert.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.alert-container {
-    position: fixed;
-    top: 10%;
-    left: 35%;
-    right: 35%;
-    z-index: 8888;
-    font-size: 0.9em;
-    white-space: pre-line;
-
-    .alert {
-        text-align: center;
-        padding: 0.8em;
-    }
-
-    .success {
-        background-color: rgba(52, 195, 143, 0.9) !important;
-    }
-    
-    .error {
-        background-color: rgba(244, 106, 106, 0.9) !important;
-    }
-}
diff --git a/src/lib/scss/custom/components/_audio.scss b/src/lib/scss/custom/components/_audio.scss
deleted file mode 100644
index 58a2847b..00000000
--- a/src/lib/scss/custom/components/_audio.scss
+++ /dev/null
@@ -1,349 +0,0 @@
-.aplayer {
-    --base-font-size: 12px;
-    --aplayer-height: calc(var(--base-font-size) * 5.5);
-    --theme-color: #fadfa3;
-    position: relative;
-    background: #fff;
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
-    font-family: Arial, Helvetica, sans-serif;
-    overflow: hidden;
-    border-radius: 2px;
-    user-select: none;
-    line-height: normal;
-    svg {
-        width: 100%;
-        height: 100%;
-
-        path {
-            fill: #fff;
-        }
-    }
-
-    .aplayer-icon {
-        width: calc(var(--base-font-size) + 3px);
-        height: calc(var(--base-font-size) + 3px);
-        border: none;
-        background-color: transparent;
-        outline: none;
-        cursor: pointer;
-        opacity: 0.8;
-        vertical-align: middle;
-        padding: 0;
-        font-size: var(--base-font-size);
-        margin: 0;
-        display: inline-block;
-
-        path {
-            transition: all 0.2s ease-in-out;
-        }
-    }
-
-    .aplayer-pic {
-        position: relative;
-        float: left;
-        height: var(--aplayer-height);
-        width: var(--aplayer-height);
-        background-color: antiquewhite;
-        background-size: cover;
-        background-position: center;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        transition: all 0.3s ease;
-        cursor: pointer;
-
-        &:hover .aplayer-button {
-            opacity: 1;
-        }
-        .aplayer-button {
-            position: absolute;
-            border-radius: 50%;
-            opacity: 0.8;
-            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-            background: rgba(0, 0, 0, 0.2);
-            transition: all 0.1s ease;
-        }
-        .aplayer-play {
-            width: 26px;
-            height: 26px;
-            svg {
-                position: absolute;
-                top: 3px;
-                left: 4px;
-                height: 20px;
-                width: 20px;
-            }
-        }
-        .aplayer-pause {
-            width: 26px;
-            height: 26px;
-            svg {
-                position: absolute;
-                top: 3px;
-                left: 4px;
-                height: 20px;
-                width: 20px;
-            }
-        }
-    }
-
-    .aplayer-info {
-        margin-left: var(--aplayer-height);
-        height: var(--aplayer-height);
-        padding: 14px 7px 0 10px;
-        box-sizing: border-box;
-        .aplayer-music {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            user-select: text;
-            margin: 0 0 calc(var(--base-font-size) + 1px) 5px;
-            padding-bottom: 2px;
-            cursor: default;
-
-            .aplayer-title {
-                font-size: calc(var(--base-font-size) + 2px);
-            }
-            .aplayer-artist {
-                font-size: var(--base-font-size);
-                color: #666;
-            }
-        }
-
-        .aplayer-controller {
-            display: flex;
-            position: relative;
-            align-items: center;
-
-            .aplayer-bar-wrap {
-                flex: 1;
-                margin: 0 0 0 5px;
-                padding: 4px 0;
-                cursor: pointer !important;
-
-                &:hover {
-                    .aplayer-bar .aplayer-played .aplayer-thumb {
-                        transform: scale(1);
-                    }
-                }
-                .aplayer-bar {
-                    position: relative;
-                    height: 2px;
-                    width: 100%;
-                    background: #cdcdcd;
-
-                    .aplayer-loaded {
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        bottom: 0;
-                        background: #aaa;
-                        height: 2px;
-                        transition: all 0.5s ease;
-                    }
-                    .aplayer-played {
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        bottom: 0;
-                        height: 2px;
-                        background: var(--theme-color) none repeat scroll 0 0;
-
-                        .aplayer-thumb {
-                            position: absolute;
-                            top: 0;
-                            right: 5px;
-                            margin-top: -4px;
-                            margin-right: -10px;
-                            height: 10px;
-                            width: 10px;
-                            border-radius: 50%;
-                            cursor: pointer;
-                            transition: all 0.3s ease-in-out;
-                            background: var(--theme-color) none repeat scroll 0 0;
-                            transform: scale(0);
-                        }
-                    }
-                }
-            }
-            .aplayer-loading-icon {
-                /* display: none; */
-                svg {
-                    display: block;
-                    position: absolute;
-                    animation: rotate 1s linear infinite;
-                }
-            }
-            .aplayer-time {
-                position: relative;
-                right: 0;
-                bottom: 4px;
-                height: calc(var(--base-font-size) + 5px);
-                color: #999;
-                font-size: 11px;
-                padding-left: 7px;
-
-                .aplayer-time-inner {
-                    vertical-align: center;
-                }
-                .aplayer-icon {
-                    cursor: pointer;
-                    transition: all 0.2s ease;
-                    path {
-                        fill: #666;
-                    }
-                }
-            }
-            .aplayer-volume-wrap {
-                display: inline-block;
-                position: relative;
-                margin-left: 3px;
-                cursor: pointer;
-
-                &:hover .aplayer-volume-bar-wrap {
-                    height: 40px;
-                }
-
-                .aplayer-volume-bar-wrap {
-                    position: absolute;
-                    bottom: 15px;
-                    right: -3px;
-                    width: 25px;
-                    height: 0;
-                    z-index: 99;
-                    overflow: hidden;
-                    transition: all 0.2s ease-in-out;
-
-                    .aplayer-volume-bar {
-                        position: absolute;
-                        bottom: 0;
-                        right: 10px;
-                        width: 5px;
-                        height: 35px;
-                        background: #aaa;
-                        border-radius: 2.5px;
-                        overflow: hidden;
-                        .aplayer-volume {
-                            background: var(--theme-color) none repeat scroll 0 0;
-                            position: absolute;
-                            bottom: 0;
-                            right: 0;
-                            width: 5px;
-                            transition: all 0.1s ease;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .aplayer-list {
-        /* overflow: auto; */
-        scrollbar-width: none;
-        transition: all 0.5s ease;
-        will-change: height;
-        display: none;
-        overflow: hidden;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow-y: auto;
-        ol {
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-            overflow-y: auto;
-        }
-        li {
-            position: relative;
-            text-align: left;
-            height: calc((var(--base-font-size) + 4px) * 2);
-            line-height: 32px;
-            padding: 0 15px;
-            font-size: var(--base-font-size);
-            border-top: 1px solid #e9e9e9;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            overflow: hidden;
-            margin: 0;
-
-            &:first-child {
-                border-top: none;
-            }
-
-            &:hover {
-                background: #efefef;
-            }
-
-            .aplayer-list-cur {
-                width: 3px;
-                height: calc((var(--base-font-size) + 4px) * 2 - 10px);
-                position: absolute;
-                left: 0;
-                top: 5px;
-                cursor: pointer;
-                background-color: var(--theme-color);
-            }
-            .aplayer-list-index {
-                color: #666;
-                margin-right: 12px;
-                cursor: pointer;
-            }
-            .aplayer-list-artist {
-                color: #666;
-                float: right;
-                cursor: pointer;
-            }
-        }
-    }
-
-    &.aplayer-withlist {
-        .aplayer-list {
-            display: block;
-        }
-    }
-    &.aplayer-narrow {
-        width: var(--aplayer-height);
-
-        .aplayer-info {
-            display: none;
-        }
-        .aplayer-list {
-            display: none;
-        }
-        .aplayer-pic,
-        .aplayer-body {
-            height: var(--aplayer-height);
-            width: var(--aplayer-height);
-        }
-    }
-}
-
-@keyframes aplayer-roll {
-    0% {
-        left: 0;
-    }
-    100% {
-        left: -100%;
-    }
-}
-
-@keyframes rotate {
-    0% {
-        transform: rotate(0);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-
-.chat-speaker-container {
-    font-size: 20px;
-    height: 30px;
-    color: var(--bs-primary);
-    span {
-        cursor: pointer;
-    }
-}
diff --git a/src/lib/scss/custom/components/_avatar.scss b/src/lib/scss/custom/components/_avatar.scss
deleted file mode 100644
index 84bc0b6a..00000000
--- a/src/lib/scss/custom/components/_avatar.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-/*  */
-/* avatar.scss */
-/*  */
-
-.avatar-xs {
-  height: 2rem;
-  width: 2rem;
-}
-
-.avatar-sm {
-  height: 3rem;
-  width: 3rem;
-}
-
-.avatar-md {
-  height: 4.5rem;
-  width: 4.5rem;
-}
-
-.avatar-lg {
-  height: 6rem;
-  width: 6rem;
-}
-
-.avatar-xl {
-  height: 7.5rem;
-  width: 7.5rem;
-}
-
-.avatar-title {
-  align-items: center;
-  background-color: $primary;
-  color: $white;
-  display: flex;
-  font-weight: $font-weight-medium;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
-}
-
-/* avatar group */
-.avatar-group {
-  padding-left: 12px;
-  display: flex;
-  flex-wrap: wrap;
-  .avatar-group-item {
-    margin-left: -12px;
-    border: 2px solid var(--#{$prefix}secondary-bg);
-    border-radius: 50%;
-    transition: all 0.2s;
-    &:hover{
-      position: relative;
-      transform: translateY(-2px);
-    }
-  }
-}
diff --git a/src/lib/scss/custom/components/_badge.scss b/src/lib/scss/custom/components/_badge.scss
deleted file mode 100644
index 358943ce..00000000
--- a/src/lib/scss/custom/components/_badge.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-/*  */
-/* _badge.scss */
-/*  */
-
-
-.badge {
-  &[href] {
-    &:hover,
-    &:focus {
-      color: var(--#{$prefix}secondary-bg);
-    }
-  }
-}
-
-/* Soft badge */
-@mixin badge-variant-soft($bg) {
-  color: $bg;
-  background-color: rgba($bg, 0.18);
-
-  &[href] {
-    &:hover,
-    &:focus {
-      color: $bg;
-      text-decoration: none;
-      background-color: rgba($bg, 0.4);
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .badge {
-  &.bg-#{$color} {
-    &[href] {
-      &:hover,
-      &:focus {
-        background-color: darken($value, 4%) !important;
-      }
-    }
-  }
-}
-
-.badge{
-  &.bg-light{
-    color: var(--#{$prefix}body-color);
-
-    &[href] {
-      &:hover,
-      &:focus {
-        color: var(--#{$prefix}body-color);
-      }
-    }
-  }
-}
-
-.badge-soft-#{$color} {
-      @include badge-variant-soft($value);
-  }
-  
-}
-
-.rounded-pill{
-   padding-right: .6em;
-    padding-left: .6em;
-}
-
-/* Dark badge */
-
-.badge.bg-dark{
-  color: var(--#{$prefix}light);
-}
diff --git a/src/lib/scss/custom/components/_breadcrumb.scss b/src/lib/scss/custom/components/_breadcrumb.scss
deleted file mode 100644
index 0f6939b9..00000000
--- a/src/lib/scss/custom/components/_breadcrumb.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-/*  */
-/* breadcrumb.scss */
-/*  */
-
-
-/* Breadcrumb item arrow */
-.breadcrumb-item {
-    > a {
-        color: var(--#{$prefix}emphasis-color);
-    }
-    +.breadcrumb-item {
-        &::before {
-            font-family: "Material Design Icons";
-        }
-    }
-}
-  
diff --git a/src/lib/scss/custom/components/_buttons.scss b/src/lib/scss/custom/components/_buttons.scss
deleted file mode 100644
index 67ef8c3c..00000000
--- a/src/lib/scss/custom/components/_buttons.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-/*  */
-/* _buttons.scss */
-/*  */
-
-button,
-a {
-    outline: none !important;
-}
-
-/* Rounded Buttons */
-.btn-rounded {
-    border-radius: 30px;
-}
-
-.btn {
-    &:focus {
-        box-shadow: $btn-focus-box-shadow;
-    }
-}
-
-/* example 1 */
-
-.btn-group-example {
-    .btn {
-        position: relative;
-
-        &:first-child {
-            &::before {
-                display: none;
-            }
-        }
-
-        &:before {
-            content: "OR";
-            position: absolute;
-            font-size: 10px;
-            width: 24px;
-            height: 24px;
-            line-height: 24px;
-            border-radius: 50%;
-            background-color: var(--#{$prefix}secondary-color);
-            color: var(--#{$prefix}secondary-bg);
-            border: 1px solid var(--#{$prefix}secondary-bg);
-            left: -12px;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 1;
-        }
-    }
-}
-
-/* Example 2 */
-
-.btn-label {
-    position: relative;
-    padding-left: 44px;
-    .label-icon {
-        position: absolute;
-        width: 32px;
-        height: 100%;
-        left: 0;
-        top: 0;
-        background-color: rgba($white, 0.1);
-        border-right: 1px solid rgba($white, 0.1);
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    &.btn-light {
-        .label-icon {
-            background-color: rgba($dark, 0.1);
-            border-right: 1px solid rgba($dark, 0.2);
-        }
-    }
-}
-
-
-.btn-group-vertical{
-    label {
-        margin-bottom: 0px;
-    }
-}
-
-
-/*  */
-/* Soft Buttons */
-/*  */
-
-@mixin button-variant-soft($bg) {
-    color: $bg;
-    background-color: rgba($bg, 0.1);
-    border-color: transparent;
-    transition: all 0.5s ease;
-    &:hover,
-    &:focus,
-    &:active {
-        color: $white;
-        background-color: $bg;
-        border-color: transparent;
-    }
-}
-
-@each $color,
-$value in $theme-colors {
-    .btn-soft-#{$color} {
-        @include button-variant-soft($value);
-    }
-}
-
-.like-btn {
-    &.active {
-        .bx-heart {
-            color: $danger;
-            &:before {
-                content: "\ec8f";
-            }
-        }
-    }
-}
diff --git a/src/lib/scss/custom/components/_card.scss b/src/lib/scss/custom/components/_card.scss
deleted file mode 100644
index d43018bf..00000000
--- a/src/lib/scss/custom/components/_card.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*  */
-/* _card.scss */
-/*  */
-
-.card {
-  margin-bottom: $grid-gutter-width;
-  box-shadow: $box-shadow;
-}
-
-.card-drop {
-  color: var(--#{$prefix}body-color);
-}
-
-.card-title {
-  font-size: 15px;
-  margin: 0 0 7px 0;
-  font-weight: $font-weight-semibold;
-  color: var(--#{$prefix}emphasis-color);
-}
-
-.card-title-desc {
-  color: var(--#{$prefix}secondary-color);
-  margin-bottom: 24px;
-}
diff --git a/src/lib/scss/custom/components/_chat.scss b/src/lib/scss/custom/components/_chat.scss
deleted file mode 100644
index 291ea7cf..00000000
--- a/src/lib/scss/custom/components/_chat.scss
+++ /dev/null
@@ -1,112 +0,0 @@
-$bubble-chat-theme-color: rgba($primary, 80%);
-
-.dialog-modal-container {
-    .modal-title {
-        width: 100%;
-    }
-
-    .dialog-modal-header {
-        display: flex;
-        justify-content: space-between;
-
-        .header-title {
-            display: flex;
-            gap: 8px;
-        }
-    }
-}
-
-
-.chat-util-common {
-    display: block;
-    position: absolute;
-    bottom: 100% !important;
-    max-width: 100%;
-    z-index: 99;
-    font-size: 0.8rem;
-    border-radius: 5px;
-    max-height: 25em;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.chat-option-list {
-    padding: 3px 0px;
-    inset: auto auto 100% 0px !important;
-
-    .chat-option-item {
-        padding: 5px 15px;
-        cursor: pointer;
-    }
-    
-    .chat-option-item:hover {
-        background-color: var(--bs-primary);
-        color: white;
-    }
-}
-
-.chat-util-container {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    flex-wrap: wrap;
-    height: fit-content;
-    width: 100%;
-    z-index: 999;
-    padding: 10px 15px;
-    background-color: white;
-}
-
-.chat-util-item {
-    text-align: center;
-    font-size: 30px;
-}
-
-.chat-notification {
-    min-height: 20px;
-    max-height: 150px;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.chat-bubble-container {
-    display: flex;
-    flex-direction: column;
-    gap: 0px;
-
-    .chat-bubble {
-        margin: 5px 30px 0px 5px;
-        display: inline-block;
-        position: relative;
-        min-width: 200px;
-        max-width: 300px;
-        background-color: $bubble-chat-theme-color;
-        border-radius: .4em;
-        color: white;
-
-        &:after {
-            content: ' ';
-            position: absolute;
-            top: 100%;
-            right: 50px;
-            width: 25px;
-            height: 20px;
-            clip-path: polygon(0 0, 100% 0, 100% 100%);
-            background-color: $bubble-chat-theme-color;
-        }
-    
-        .bubble-text {
-            margin: 15px;
-            height: fit-content;
-            max-height: 100px;
-            overflow-y: auto;
-            scrollbar-width: none;
-        }
-
-        .bubble-delete {
-            position: absolute;
-            right: 5px;
-            top: 3px;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/components/_codeScript.scss b/src/lib/scss/custom/components/_codeScript.scss
deleted file mode 100644
index e008411c..00000000
--- a/src/lib/scss/custom/components/_codeScript.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.code-script-container {
-    min-height: 200px;
-    max-height: 500px;
-    overflow: auto;
-    scrollbar-width: thin;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_demos.scss b/src/lib/scss/custom/components/_demos.scss
deleted file mode 100644
index 94c4bbc2..00000000
--- a/src/lib/scss/custom/components/_demos.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-/*  */
-/* _demos.scss */
-/*  */
-
-/* Lightbox  */
-
-.mfp-popup-form {
-    max-width: 1140px;
-}
-.mfp-close{
-  color: var(--#{$prefix}body-color) !important;
-}
-
-/* Modals */
-
-.bs-example-modal {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
-    display: block;
-  }
-
-[dir="rtl"]{
-  .modal-open{
-    padding-left: 0px !important;
-  }
-}
-
-/* Icon demo ( Demo only ) */
-.icon-demo-content {
-    text-align: center;
-    color: $gray-500;
-  
-    i{
-      display: block;
-      font-size: 24px;
-      margin-bottom: 16px;
-      color: var(--#{prefix}secondary-color);
-      transition: all 0.4s;
-    }
-  
-    .col-lg-4 {
-      margin-top: 24px;
-  
-      &:hover {
-        i {
-          color: $primary;
-          transform: scale(1.5);
-        }
-      }
-    }
-}
-
-
-/* Grid */
-
-.grid-structure {
-    .grid-container {
-        background-color: var(--#{$prefix}gray-100);
-        margin-top: 10px;
-        font-size: .8rem;
-        font-weight: $font-weight-medium;
-        padding: 10px 20px;
-    }
-}
-
-
-/* card radio */
-
-.card-radio{
-  background-color: var(--#{$prefix}secondary-bg);
-  border: 2px solid var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius);
-  padding: 1rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &:hover{
-    cursor: pointer;
-  }
-}
-
-.card-radio-label{
-  display: block;
-}
-
-
-.card-radio-input{
-  display: none;
-  &:checked + .card-radio {
-    border-color: $primary !important;
-  }
-}
-
-.navs-carousel{
-  .owl-nav{
-      margin-top: 16px;
-      button{
-          width: 30px;
-          height: 30px;
-          line-height: 28px !important;
-          font-size: 20px !important;
-          border-radius: 50% !important;
-          background-color: rgba($primary, 0.25) !important;
-          color: $primary !important;
-          margin: 4px 8px !important;
-      }
-  }
-}
-
-
diff --git a/src/lib/scss/custom/components/_dropdown.scss b/src/lib/scss/custom/components/_dropdown.scss
deleted file mode 100644
index ebdd98d3..00000000
--- a/src/lib/scss/custom/components/_dropdown.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-/*  */
-/* _dropdown.scss */
-/*  */
-
-.dropdown-menu {
-  box-shadow: $box-shadow-lg;
-  animation-name: DropDownSlide;
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  margin: 0;
-  position: absolute;
-  z-index: 1000;
-  inset: 0px auto auto 0px !important;
-
-  &.show {
-    top: 100% !important;
-  }
-}
-
-
-
-.dropdown-menu-end[style] {
-  left: auto !important;
-  right: 0 !important;
-}
-
-.dropdown-menu[data-popper-placement^="right"],
-.dropdown-menu[data-popper-placement^="top"],
-.dropdown-menu[data-popper-placement^="left"] {
-  top: auto !important;
-  animation: none !important;
-}
-
-@keyframes DropDownSlide {
-  100% {
-    transform: translateY(0);
-  }
-  0% {
-    transform: translateY(10px);
-  }
-}
-
-@media (min-width: 600px) {
-  .dropdown-menu-lg {
-    width: 320px;
-  }
-
-  .dropdown-menu-md {
-    width: 240px;
-  }
-}
-
-/* Dropdown Mega Menu */
-
-.dropdown-mega {
-  position: static !important;
-}
-
-.dropdown-megamenu[style] {
-  padding: 20px;
-  left: 20px !important;
-  right: 20px !important;
-}
-
-/* Dropdown size */
-
-.dropdown-mega-menu-xl {
-  width: 40rem;
-}
-
-.dropdown-mega-menu-lg {
-  width: 26rem;
-}
diff --git a/src/lib/scss/custom/components/_file.scss b/src/lib/scss/custom/components/_file.scss
deleted file mode 100644
index 5bdff373..00000000
--- a/src/lib/scss/custom/components/_file.scss
+++ /dev/null
@@ -1,160 +0,0 @@
-$attachment-width: 8em;
-$attachment-height: 8em;
-$attachment-width-lite: 5em;
-$attachment-height-lite: 5em;
-$file-screen-max-width: 500px;
-
-.svelte-lightbox-footer p {
-    display: none;
-}
-
-.item-text {
-    text-align: center;
-    color: white;
-}
-
-.file-dropzone {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-width: 2px;
-    border-radius: 10px;
-    border-color: #eeeeee;
-    border-style: dashed;
-    background-color: #fafafa;
-    color: #bdbdbd;
-    outline: none;
-    transition: border 0.24s ease-in-out;
-    width: $attachment-width;
-    height: $attachment-width;
-}
-
-.add-file-icon {
-    font-size: 3em;
-}
-
-@media (max-width: $file-screen-max-width) {
-    .file-dropzone {
-        width: $attachment-width-lite;
-        height: $attachment-width-lite;
-    }
-
-    .add-file-icon {
-        font-size: 2em;
-    }
-}
-
-
-
-.audio-gallery-list {
-    margin: 5px 0px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
-    justify-content: flex-start;
-    width: inherit;
-
-    .aplayer {
-        margin: 0 !important;
-        width: 100%;
-    }
-}
-
-.dialog-file-display {
-    .gallery-item {
-        width: $attachment-width-lite;
-        height: $attachment-height-lite;
-    }
-
-    .aplayer {
-        margin: 0 !important;
-        width: 80%;
-    }
-}
-
-
-/* File gallery */
-.file-gallery-list {
-    margin: 5px 0px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-.gallery-item {
-    width: $attachment-width;
-    height: $attachment-height;
-
-    @media (max-width: $file-screen-max-width) {
-        width: $attachment-width-lite;
-        height: $attachment-height-lite;
-    }
-
-    .item-thumbnail-wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-
-    .gallery-item-wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-    }
-
-    .gallery-item-inner {
-        position: relative;
-        width: 100%;
-        height: 100%;
-    }
-
-    .gallery-item-image {
-        width: 100%;
-        height: 100%;
-        border-radius: 10px;
-    }
-
-    .gallery-item-icon {
-        position: absolute;
-        z-index: 500;
-        font-size: 1.2em;
-        border-radius: 5px;
-        padding: 2px;
-
-        i {
-            display: block;
-        }
-    }
-
-    .delete-icon {
-        top: 3px;
-        right: 3px;
-        color: var(--bs-danger);
-
-        &:hover {
-            color: white;
-            background-color: var(--bs-danger);
-        }
-    }
-
-    .download-icon {
-        right: 3px;
-        bottom: 3px;
-        color: var(--bs-info);
-
-        &:hover {
-            color: white;
-            background-color: var(--bs-info);
-        }
-    }
-
-    .gallery-item-name {
-        text-align: center;
-        word-break: break-all;
-        font-size: 0.7rem;
-    }
-}
diff --git a/src/lib/scss/custom/components/_forms.scss b/src/lib/scss/custom/components/_forms.scss
deleted file mode 100644
index 7c36181c..00000000
--- a/src/lib/scss/custom/components/_forms.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-/*  */
-/* Forms.scss */
-/*  */
-
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  &::placeholder {
-    text-align: left
-      /*rtl: right*/
-    ;
-  }
-}
-
-.form-check {
-  position: relative;
-  text-align: left
-    /*rtl: right*/
-  ;
-}
-
-
-/* checkbox input right */
-
-.form-check-right {
-  padding-left: 0;
-  display: inline-block;
-  padding-right: $form-check-padding-start;
-
-  .form-check-input {
-    float: right;
-    margin-left: 0;
-    margin-right: $form-check-padding-start * -1;
-  }
-
-  .form-check-label {
-    display: block;
-  }
-}
-
-
-
-/* checkbox */
-
-.form-checkbox-outline {
-
-  .form-check-input {
-    border-width: 2px;
-    background-color: var(--#{$prefix}secondary-bg);
-
-    &:active {
-      filter: none;
-    }
-
-    &:checked {
-      background-color: var(--#{$prefix}secondary-bg)  !important;
-
-      &[type=checkbox] {
-        background-image: none;
-
-      }
-
-      &:after {
-        position: absolute;
-        content: '\F012C';
-        font-family: "Material Design Icons";
-        top: -4px !important;
-        left: 1px;
-        /*rtl: -4px */
-        font-size: 16px;
-        color: var(--#{$prefix}body-color);
-      }
-    }
-  }
-}
-
-/* radio */
-
-.form-radio-outline {
-  .form-check-input {
-    background-color: var(--#{$prefix}secondary-bg);
-    position: relative;
-
-    &:active {
-      filter: none;
-    }
-
-    &:checked {
-      background-color: var(--#{$prefix}secondary-bg)  !important;
-
-      &[type=checkbox] {
-        background-image: none;
-
-      }
-
-      &:after {
-        position: absolute;
-        content: '';
-        top: 3px !important;
-        left: 3px;
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-      }
-    }
-  }
-}
-
-
-
-/* checkbox color */
-
-@each $color,
-$value in $theme-colors {
-  .form-check-#{$color} {
-    .form-check-input {
-      &:checked {
-        background-color: $value;
-        border-color: $value;
-      }
-    }
-  }
-
-  .form-radio-#{$color} {
-    .form-check-input {
-      &:checked {
-        border-color: $value;
-        background-color: $value;
-
-        &:after {
-          background-color: $value;
-        }
-      }
-    }
-  }
-}
-
-.form-check,
-.form-check-input,
-.form-check-label {
-  cursor: pointer;
-  margin-bottom: 0;
-}
-
-/* Switch sizes */
-
-.form-switch-md {
-  padding-left: 2.5rem;
-  min-height: 24px;
-  line-height: 24px;
-
-  .form-check-input {
-    width: 40px;
-    height: 20px;
-    left: -0.5rem;
-    position: relative;
-  }
-
-  .form-check-label {
-    vertical-align: middle;
-  }
-}
-
-
-.form-switch-lg {
-  padding-left: 2.75rem;
-  min-height: 28px;
-  line-height: 28px;
-
-  .form-check-input {
-    width: 48px;
-    height: 24px;
-    left: -0.75rem;
-    position: relative;
-  }
-}
-
-.input-group-text {
-  margin-bottom: 0px;
-}
diff --git a/src/lib/scss/custom/components/_helper.scss b/src/lib/scss/custom/components/_helper.scss
deleted file mode 100644
index 2100282d..00000000
--- a/src/lib/scss/custom/components/_helper.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-/*  */
-/* _helper.scss */
-/*  */
-
-.font-size-10 {
-    font-size: 10px !important;
-}
-
-.font-size-11 {
-    font-size: 11px !important;
-}
-
-.font-size-12 {
-    font-size: 12px !important;
-}
-
-.font-size-13 {
-    font-size: 13px !important;
-}
-
-.font-size-14 {
-    font-size: 14px !important;
-}
-
-.font-size-15 {
-    font-size: 15px !important;
-}
-
-.font-size-16 {
-    font-size: 16px !important;
-}
-
-.font-size-17 {
-    font-size: 17px !important;
-}
-
-.font-size-18 {
-    font-size: 18px !important;
-}
-
-.font-size-20 {
-    font-size: 20px !important;
-}
-
-.font-size-22 {
-    font-size: 22px !important;
-}
-
-.font-size-24 {
-    font-size: 24px !important;
-}
-
-/* Social */
-.social-list-item {
-    height: 2rem;
-    width: 2rem;
-    line-height: calc(2rem - 4px);
-    display: block;
-    border: 2px solid $gray-500;
-    border-radius: 50%;
-    color: $gray-500;
-    text-align: center;
-    transition: all 0.4s;
-
-    &:hover {
-        color: var(--#{$prefix}secondary-color);
-        background-color: $gray-200;
-    }
-}
-
-
-.w-xs {
-    min-width: 80px;
-}
-
-.w-sm {
-    min-width: 95px;
-}
-
-.w-md {
-    min-width: 110px;
-}
-
-.w-lg {
-    min-width: 140px;
-}
-
-.w-xl {
-    min-width: 160px;
-}
-
-
-/* alert */
-
-.alert-dismissible {
-    .btn-close {
-        font-size: 10px;
-        padding: $alert-padding-y * 1.4 $alert-padding-x;
-    }
-}
-
-.chartjs-chart {
-    max-height: 300px;
-}
diff --git a/src/lib/scss/custom/components/_loader.scss b/src/lib/scss/custom/components/_loader.scss
deleted file mode 100644
index a095d4ce..00000000
--- a/src/lib/scss/custom/components/_loader.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.loader {
-    position: absolute;
-    z-index: 9999;
-    background-color: rgba(255, 255, 255, 0.8);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-
-    .circle {
-        position: relative;
-        top: 30%;
-        left: 50%;
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_markdown.scss b/src/lib/scss/custom/components/_markdown.scss
deleted file mode 100644
index e849c58e..00000000
--- a/src/lib/scss/custom/components/_markdown.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.markdown-container {
-    overflow-x: auto;
-    scrollbar-width: thin;
-  
-    pre {
-      -ms-overflow-style: none !important;
-      white-space: pre-wrap;
-      margin-top: 1em;
-      margin-bottom: 1em;
-
-      &:has(.language-sql),
-      &:has(.language-java),
-      &:has(.language-javascript),
-      &:has(.language-typescript),
-      &:has(.language-csharp),
-      &:has(.language-python),
-      &:has(.language-json) {
-        background-color: black;
-        color: white !important;
-        border-radius: 5px;
-        padding: 5px 10px;
-      }
-    }
-  
-    pre::-webkit-scrollbar {
-      display: none !important;
-    }
-  
-    table {
-      margin-top: 1em !important;
-      margin-bottom: 1em !important;
-      border-radius: 5px;
-  
-      th, td {
-        padding: 3px 5px !important;
-      }
-    }
-    
-    p {
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
-    }
-  
-    ul {
-      list-style-position: outside !important;
-    }
-}
-  
-.markdown-lite {
-    table {
-      th, td {
-        border: 1px solid white;
-      }
-    }
-  
-    a {
-      color: white;
-    }
-}
-  
-.markdown-dark {
-    table {
-      th, td {
-        border: 1px solid $primary;
-      }
-    }
-  
-    a {
-      color: $primary;
-    }
-}
-
-.code-block {
-    position: relative;
-    background-color: black;
-    color: white;
-    border-radius: 5px;
-    padding: 5px 10px;
-    
-    pre {
-        margin: 0px !important;
-        white-space: pre !important;
-        overflow-x: auto;
-        scrollbar-width: thin;
-        max-width: 100%;
-    }
-
-    .code-header {
-        display: flex;
-        justify-content: space-between;
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_nav.scss b/src/lib/scss/custom/components/_nav.scss
deleted file mode 100644
index f886c085..00000000
--- a/src/lib/scss/custom/components/_nav.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-/*  */
-/* _nav.scss */
-/*  */
-
-.nav-tabs,.nav-pills {
-  > li {
-      > a {
-          color: var(--#{$prefix}emphasis-color);
-          font-weight: $font-weight-medium;
-      }
-  }
-}
-
-.nav-pills {
-  > a {
-      color: var(--#{$prefix}emphasis-color);  
-      font-weight: $font-weight-medium;
-  }
-}
-
-
-.nav-tabs-default {
-  border-bottom: 2px solid var(--#{$prefix}border-color);
-
-  .nav-item {
-    position: relative;
-    color: var(--#{$prefix}body-color);
-
-    .nav-link {
-      border: none;
-
-      &::after {
-        content: "";
-        background: $primary;
-        height: 2px;
-        position: absolute;
-        width: 100%;
-        left: 0;
-        bottom: -1px;
-        transition: all 250ms ease 0s;
-        transform: scale(0);
-      }
-
-      &.active {
-        color: $primary;
-
-        &:after {
-          transform: scale(1);
-        }
-      }
-    }
-  }
-}
-
-.nav-tabs-secondary {
-  border-bottom: 2px solid var(--#{$prefix}border-color);
-
-  .nav-item {
-    position: relative;
-    border-radius: 3px;
-    
-    .nav-link {
-      border: none;
-      color: var(--#{$prefix}secondary);
-      text-transform: capitalize;
-
-      &::after {
-        content: "";
-        background: $secondary;
-        height: 2px;
-        position: absolute;
-        width: 100%;
-        left: 0;
-        bottom: -1px;
-        transition: all 250ms ease 0s;
-        transform: scale(0);
-      }
-
-      &.active {
-        color: $primary;
-
-        &:after {
-          background: $primary;
-          transform: scale(1);
-        }
-      }
-    }
-  }
-}
-
-
-/* vertical nav */
-
-.vertical-nav {
-  .nav{
-      .nav-link{
-          padding: 24px 16px;
-          text-align: center;
-          margin-bottom: 8px;
-          .nav-icon{
-              font-size: 24px;
-          }
-      }
-  }
-}
diff --git a/src/lib/scss/custom/components/_pagination.scss b/src/lib/scss/custom/components/_pagination.scss
deleted file mode 100644
index f0fcfc3d..00000000
--- a/src/lib/scss/custom/components/_pagination.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*  */
-/* _pagination.scss */
-/*  */
-
-/* Pagination rounded (Custom) */
-.pagination-rounded {
-    .page-link {
-        border-radius: 30px !important;
-        margin: 0 3px !important;
-        border: none;
-        width: 32px;
-        height: 32px;
-        padding: 0;
-        text-align: center;
-        line-height: 32px;
-    }
-}
-
-.page-link:focus {
-    outline: none;
-    box-shadow: none;
-}
diff --git a/src/lib/scss/custom/components/_preloader.scss b/src/lib/scss/custom/components/_preloader.scss
deleted file mode 100644
index ea930ed6..00000000
--- a/src/lib/scss/custom/components/_preloader.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-/*  */
-/* preloader.scss */
-/*  */
-
-#preloader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--#{$prefix}secondary-bg);
-    z-index: 9999;
-}
-
-#status {
-    width: 40px;
-    height: 40px;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin: -20px 0 0 -20px;
-}
-
-.spinner-chase {
-    margin: 0 auto;
-    width: 40px;
-    height: 40px;
-    position: relative;
-    animation: spinner-chase 2.5s infinite linear both;
-}
-
-.chase-dot {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0; 
-    animation: chase-dot 2.0s infinite ease-in-out both; 
-    &:before {
-        content: '';
-        display: block;
-        width: 25%;
-        height: 25%;
-        background-color: $primary;
-        border-radius: 100%;
-        animation: chase-dot-before 2.0s infinite ease-in-out both; 
-    }
-
-    &:nth-child(1) { 
-        animation-delay: -1.1s; 
-        &:before{
-            animation-delay: -1.1s;
-        }
-    }
-    &:nth-child(2) { 
-        animation-delay: -1.0s;
-        &:before{
-            animation-delay: -1.0s;
-        }
-    }
-    &:nth-child(3) { 
-        animation-delay: -0.9s;
-        &:before{
-            animation-delay: -0.9s;
-        } 
-    }
-    &:nth-child(4) { 
-        animation-delay: -0.8s; 
-        &:before{
-            animation-delay: -0.8s;
-        } 
-    }
-    &:nth-child(5) { 
-        animation-delay: -0.7s; 
-        &:before{
-            animation-delay: -0.7s;
-        } 
-    }
-    &:nth-child(6) { 
-        animation-delay: -0.6s; 
-        &:before{
-            animation-delay: -0.6s;
-        }
-    }
-}
-
-@keyframes spinner-chase {
-    100% { 
-        transform: rotate(360deg); 
-    } 
-}
-
-@keyframes chase-dot {
-    80%, 100% { 
-        transform: rotate(360deg); 
-    } 
-}
-
-@keyframes chase-dot-before {
-    50% {
-        transform: scale(0.4); 
-    } 
-    100%, 0% {
-        transform: scale(1.0); 
-    } 
-}
diff --git a/src/lib/scss/custom/components/_print.scss b/src/lib/scss/custom/components/_print.scss
deleted file mode 100644
index 24fad5b6..00000000
--- a/src/lib/scss/custom/components/_print.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/*  */
-/* print.scss */
-/*  */
-
-/* Used invoice page */
-@media print {
-    .vertical-menu,
-    .right-bar,
-    .page-title-box,
-    .navbar-header,
-    .footer {
-        display: none !important;
-    }
-    .card-body,
-    .main-content,
-    .right-bar,
-    .page-content,
-    body {
-        padding: 0;
-        margin: 0;
-    }
-
-    .card{
-        border: 0;
-    }
-}
diff --git a/src/lib/scss/custom/components/_progress.scss b/src/lib/scss/custom/components/_progress.scss
deleted file mode 100644
index 694bd487..00000000
--- a/src/lib/scss/custom/components/_progress.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*  */
-/* _progress.scss */
-/*  */
-
-/* Progress height small */
-.progress-sm {
-  height: 5px;
-}
-
-
-/* Progress height medium */
-.progress-md {
-  height: 8px;
-}
-
-
-/* Progress height large */
-.progress-lg {
-  height: 12px;
-}
-
-/* Progress height Extra large */
-.progress-xl {
-  height: 16px;
-}
-
-.custom-progess{
-  position: relative;
-  .progress-icon{
-      position: absolute;
-      top: -12px;
-      .avatar-title{
-        background: var(--#{$prefix}secondary-bg);
-      }
-  }
-}
-
-/* animated-progess */
-
-.animated-progess{
-  position: relative;
-  .progress-bar {
-    position: relative;
-    border-radius: 6px;
-    animation: animate-positive 2s;
-  }
-}
-
-@keyframes animate-positive {
-  0% {
-      width: 0;
-  }
-}
diff --git a/src/lib/scss/custom/components/_reboot.scss b/src/lib/scss/custom/components/_reboot.scss
deleted file mode 100644
index cf9104dc..00000000
--- a/src/lib/scss/custom/components/_reboot.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/* =============
-   General
-============= */
-
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-/* .h1,.h2,.h3,.h4,.h5,.h6, */
-/* h1,h2,h3,h4,h5,h6 { */
-/* color: $gray-700; */
-/* } */
-
-a {
-  text-decoration: none !important;
-}
-
-label {
-  font-weight: 500;
-  margin-bottom: $form-label-margin-bottom;
-}
-
-/* blockquote */
-
-.blockquote {
-  padding: 10px 20px;
-  border-left: 4px solid var(--#{$variable-prefix}border-color);
-}
-
-.blockquote-reverse {
-  border-left: 0;
-  border-right: 4px solid var(--#{$variable-prefix}border-color);
-  text-align: right;
-}
-
-/* container */
-
-.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
-  @media (min-width: 1200px){
-      max-width: 1140px;
-  }
-}
-
-/* row */
-
-.row{
-  > * {
-      position: relative;
-  }
-}
diff --git a/src/lib/scss/custom/components/_rich_content.scss b/src/lib/scss/custom/components/_rich_content.scss
deleted file mode 100644
index ccb2fc74..00000000
--- a/src/lib/scss/custom/components/_rich_content.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-.rc-embedding-wrapper {
-    width: 100%;
-    margin-top: 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .rc-embedding-toggle-group {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .rc-embedding-link {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--bs-info, #50a5f1);
-        font-size: 16px;
-        transition: color 0.2s ease;
-        text-decoration: none;
-
-        &:hover {
-            color: darken(#50a5f1, 15%);
-        }
-    }
-
-    .rc-embedding-toggle {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        margin: 0 auto;
-        width: auto;
-        background: linear-gradient(135deg, rgba(244, 106, 106, 0.08), rgba(244, 106, 106, 0.15));
-        border: 1px solid rgba(244, 106, 106, 0.2);
-        border-radius: 20px;
-        cursor: pointer;
-        padding: 6px 16px;
-        font-size: 13px;
-        font-weight: 500;
-        color: var(--bs-danger, #f46a6a);
-        user-select: none;
-        transition: all 0.25s ease;
-        backdrop-filter: blur(4px);
-
-        &:hover {
-            background: linear-gradient(135deg, rgba(244, 106, 106, 0.15), rgba(244, 106, 106, 0.25));
-            border-color: rgba(244, 106, 106, 0.4);
-            box-shadow: 0 2px 8px rgba(244, 106, 106, 0.2);
-            transform: translateY(-1px);
-        }
-
-        &:active {
-            transform: translateY(0);
-            box-shadow: none;
-        }
-
-        &.closed {
-            background: linear-gradient(135deg, rgba(52, 195, 143, 0.08), rgba(52, 195, 143, 0.15));
-            border-color: rgba(52, 195, 143, 0.2);
-            color: var(--bs-success, #34c38f);
-
-            &:hover {
-                background: linear-gradient(135deg, rgba(52, 195, 143, 0.15), rgba(52, 195, 143, 0.25));
-                border-color: rgba(52, 195, 143, 0.4);
-                box-shadow: 0 2px 8px rgba(52, 195, 143, 0.2);
-            }
-        }
-    }
-
-    .rc-embedding-container {
-        width: 100%;
-        border-radius: 8px;
-        display: flex;
-        justify-content: center;
-        overflow: auto;
-        scrollbar-width: thin;
-
-        .rc-embedding-iframe {
-            width: fit-content;
-            min-width: 100%;
-            max-height: 800px;
-            min-height: 500px;
-            border: 1px solid var(--bs-border-color, #dee2e6);
-            border-radius: 8px;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/components/_root.scss b/src/lib/scss/custom/components/_root.scss
deleted file mode 100644
index 33d366da..00000000
--- a/src/lib/scss/custom/components/_root.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/*  */
-/* root.scss */
-/*  */
-
-/* theme-light */
-:root {
-    /* Topbar - Default Light */
-    --#{$prefix}header-bg:                              #{$header-bg}; 
-    --#{$prefix}header-item-color:                      #{$header-item-color}; 
-
-    /* Topbar - Dark */
-    --#{$prefix}header-dark-bg:                         #{$header-dark-bg}; 
-    --#{$prefix}header-dark-item-color:                 #{$header-dark-item-color}; 
-    
-    --#{$prefix}topbar-search-bg:                       #{$topbar-search-bg}; 
-
-    /* Footer */
-    --#{$prefix}footer-bg:                              #{$footer-bg}; 
-    --#{$prefix}footer-color:                           #{$footer-color}; 
-
-    /* Horizontal nav */
-    --#{$prefix}topnav-bg:                              #{$topnav-bg}; 
-    --#{$prefix}menu-item-color:                        #{$menu-item-color}; 
-    --#{$prefix}menu-item-active-color:                 #{$menu-item-active-color}; 
-
-    /* Boxed layout width */
-    --#{$prefix}boxed-body-bg:                          #{$boxed-body-bg}; 
-
-    --#{$prefix}display-none:                           #{$display-none};
-    --#{$prefix}display-block:                          #{$display-block};
-}
-
-/* theme dark */
-@if $enable-dark-mode {
-    @include color-mode(dark, true) { 
-        /* Topbar - Default Light */
-        --#{$prefix}header-bg:                              #{$header-bg-dark}; 
-        --#{$prefix}header-item-color:                      #{$header-item-color-dark}; 
-
-        /* Topbar - Dark */
-        --#{$prefix}header-dark-bg:                         #{$header-dark-bg-dark}; 
-        --#{$prefix}header-dark-item-color:                 #{$header-dark-item-color-dark}; 
-        --#{$prefix}topbar-search-bg:                       #{$topbar-search-bg-dark}; 
-
-        /* Footer */
-        --#{$prefix}footer-bg:                              #{$footer-bg-dark}; 
-        --#{$prefix}footer-color:                           #{$footer-color-dark}; 
-
-        /* Horizontal nav */
-        --#{$prefix}topnav-bg:                              #{$topnav-bg-dark}; 
-        --#{$prefix}menu-item-color:                        #{$menu-item-color-dark}; 
-        --#{$prefix}menu-item-active-color:                 #{$menu-item-active-color-dark}; 
-
-        /* Boxed layout width */
-        --#{$prefix}boxed-body-bg:                          #{$boxed-body-bg-dark};
-
-        /* component variable */
-        --#{$prefix}light:                                      #{$body-tertiary-bg-dark};
-        --#{$prefix}light-rgb:                                  #{to-rgb($body-tertiary-bg-dark)};
-        --#{$prefix}dark:                                       #{$body-tertiary-color-dark};
-        --#{$prefix}dark-rgb:                                   #{to-rgb($body-tertiary-color-dark)};
-
-        --#{$prefix}display-none:                           #{$display-none-dark};
-        --#{$prefix}display-block:                          #{$display-block-dark};
-
-        .btn-light {
-            --#{$prefix}btn-color:                                         #{$body-secondary-color-dark};
-            --#{$prefix}btn-bg:                                            #{$body-tertiary-bg-dark};
-            --#{$prefix}btn-border-color:                                  #{$body-tertiary-bg-dark};
-        }
-
-        .btn-outline-light {
-            --#{$prefix}btn-color:                                         #{$body-secondary-color-dark};
-            --#{$prefix}btn-border-color:                                  #{$body-tertiary-bg-dark};
-        }
-
-        .btn-light,
-        .btn-outline-light {
-            --#{$prefix}btn-hover-color:                        #{$body-secondary-color-dark};
-            --#{$prefix}btn-hover-bg:                           #{$body-tertiary-bg-dark};
-            --#{$prefix}btn-hover-border-color:                 #{$body-tertiary-bg-dark};
-            --#{$prefix}btn-active-color:                       #{$body-secondary-color-dark};
-            --#{$prefix}btn-active-bg:                          #{$body-tertiary-bg-dark};
-            --#{$prefix}btn-active-border-color:                #{$body-tertiary-bg-dark};
-            --#{$prefix}btn-focus-shadow-rgb:                   #{to-rgb($body-tertiary-bg-dark)};
-        }
-
-        .btn-dark {
-            --#{$prefix}btn-bg:                                 #{$body-color-dark};
-            --#{$prefix}btn-border-color:                       #{$body-color-dark};
-            --#{$prefix}btn-hover-bg:                           #{$body-color-dark};
-        }
-
-        .btn-outline-dark {
-            --#{$prefix}btn-color:                              #{$body-color-dark};
-            --#{$prefix}btn-border-color:                       #{$body-color-dark};
-        }
-
-        .dropdown-menu { 
-            --#{$prefix}dropdown-border-width:                  1px;
-        }
-
-        .table-light {
-            --bs-table-color:                                   #a6b0cf;
-            --bs-table-bg:                                      #32394e;
-            --bs-table-border-color:                            #32394e;
-        }
-
-        .table-dark {
-            --bs-table-color:                                   #a6b0cf;
-            --bs-table-bg:                                      #32394e;
-            --bs-table-border-color:                            #3a425a;
-        }
-
-    }
-}
diff --git a/src/lib/scss/custom/components/_select.scss b/src/lib/scss/custom/components/_select.scss
deleted file mode 100644
index 0271e5ff..00000000
--- a/src/lib/scss/custom/components/_select.scss
+++ /dev/null
@@ -1,106 +0,0 @@
-.multiselect-container {
-    position: relative;
-
-    .display-container {
-        .display-suffix {
-            position: absolute;
-            right: 0.6rem;
-            top: 0.18rem;
-            font-size: 1.5rem;
-
-            i {
-                transition: all .2s ease-in-out;
-            }
-        }
-
-        input[type='text'] {
-            padding-right: 1.5rem;
-
-            &.disabled {
-                background-color: var(--bs-secondary-bg) !important;
-                color: var(--bs-secondary-color);
-                cursor: not-allowed;
-                opacity: 0.65;
-            }
-        }
-
-        .show-list {
-            i {
-                transform: rotate(180deg);
-            }
-        }
-    }
-
-    .option-list {
-        padding: 5px 2px;
-        border: 1px solid var(--bs-border-color-translucent);
-        border-radius: 5px;
-
-        overflow-x: auto;
-        overflow-y: auto;
-        scrollbar-width: thin;
-        max-height: 230px;
-
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        z-index: 99;
-        background-color: white;
-
-        .search-box {
-            padding: 5px 10px;
-
-            input[type='text'] {
-                padding: 5px 1.5rem;
-                border-radius: 5px;
-                position: relative;
-            }
-        }
-
-        .search-prefix {
-            position: absolute;
-            z-index: 100;
-            left: 1.2rem;
-            top: 1.2rem;
-            display: flex;
-        }
-    }
-
-    ul {
-        list-style: none;
-        padding-left: 0px;
-        margin-bottom: 0px;
-        
-        .option-item {
-            display: flex;
-            gap: 3px;
-            padding: 5px 10px;
-
-            &:hover {
-                background-color: aliceblue;
-            }
-
-            .select-box {
-                flex: 0 0 10%;
-                max-width: 20px;
-            }
-
-            .select-name {
-                flex: 0 0 90%;
-                max-width: 300px;
-                font-size: 1.1em;
-                word-break: break-all;
-            }
-
-            input[type='checkbox'] {
-                outline: none !important;
-                box-shadow: none !important;
-                font-size: 1.1em;
-            }
-
-            .nothing {
-                padding-left: 10px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_state.scss b/src/lib/scss/custom/components/_state.scss
deleted file mode 100644
index 8037e6e5..00000000
--- a/src/lib/scss/custom/components/_state.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.state-search-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .state-search-item {
-        display: flex;
-        gap: 10px;
-        justify-content: flex-end;
-    }
-}
-
-.state-search-btn-wrapper {
-    .state-search-btn {
-        display: flex;
-        justify-content: center;
-        gap: 3px;
-        flex-wrap: wrap;
-
-        @media (max-width: 800px) {
-            .search-btn-text {
-                display: none;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_table.scss b/src/lib/scss/custom/components/_table.scss
deleted file mode 100644
index 1e911bc2..00000000
--- a/src/lib/scss/custom/components/_table.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*  */
-/* _table.scss */
-/*  */
-
-.table {
-  th {
-      font-weight: $font-weight-bold;
-  }
-}
-
-.table-dark>:not(:last-child)>:last-child>*{
-  border-bottom-color:  $table-dark-border-color;
-}
-
-
-.table-bordered {
-  border: $table-border-width solid $table-border-color;
-}
-
-.table-nowrap {
-  th, td {
-    white-space: nowrap;
-  }
-}
-
-.table>:not(:first-child) {
-    border-top: 0;
-}
diff --git a/src/lib/scss/custom/components/_text.scss b/src/lib/scss/custom/components/_text.scss
deleted file mode 100644
index 66b32e36..00000000
--- a/src/lib/scss/custom/components/_text.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.text-count {
-    margin-top: 2px;
-    font-size: 10px;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_waves.scss b/src/lib/scss/custom/components/_waves.scss
deleted file mode 100644
index 4729086d..00000000
--- a/src/lib/scss/custom/components/_waves.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-
-/*!
- * Waves v0.7.6
- * http://fian.my.id/Waves 
- * 
- * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
- * Released under the MIT license 
- * https://github.com/fians/Waves/blob/master/LICENSE */
- .waves-effect {
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .waves-effect .waves-ripple {
-    position: absolute;
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    margin-top: -50px;
-    margin-left: -50px;
-    opacity: 0;
-    background: rgba(0, 0, 0, 0.2);
-    background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    -webkit-transition: all 0.5s ease-out;
-    -moz-transition: all 0.5s ease-out;
-    -o-transition: all 0.5s ease-out;
-    transition: all 0.5s ease-out;
-    -webkit-transition-property: -webkit-transform, opacity;
-    -moz-transition-property: -moz-transform, opacity;
-    -o-transition-property: -o-transform, opacity;
-    transition-property: transform, opacity;
-    -webkit-transform: scale(0) translate(0, 0);
-    -moz-transform: scale(0) translate(0, 0);
-    -ms-transform: scale(0) translate(0, 0);
-    -o-transform: scale(0) translate(0, 0);
-    transform: scale(0) translate(0, 0);
-    pointer-events: none;
-  }
-  .waves-effect.waves-light .waves-ripple {
-    background: rgba(255, 255, 255, 0.4);
-    background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-    background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-  }
-  .waves-effect.waves-classic .waves-ripple {
-    background: rgba(0, 0, 0, 0.2);
-  }
-  .waves-effect.waves-classic.waves-light .waves-ripple {
-    background: rgba(255, 255, 255, 0.4);
-  }
-  .waves-notransition {
-    -webkit-transition: none !important;
-    -moz-transition: none !important;
-    -o-transition: none !important;
-    transition: none !important;
-  }
-  .waves-button,
-  .waves-circle {
-    -webkit-transform: translateZ(0);
-    -moz-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    -o-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-  }
-  .waves-button,
-  .waves-button:hover,
-  .waves-button:visited,
-  .waves-button-input {
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    border: none;
-    outline: none;
-    color: inherit;
-    background-color: rgba(0, 0, 0, 0);
-    font-size: 1em;
-    line-height: 1em;
-    text-align: center;
-    text-decoration: none;
-    z-index: 1;
-  }
-  .waves-button {
-    padding: 0.85em 1.1em;
-    border-radius: 0.2em;
-  }
-  .waves-button-input {
-    margin: 0;
-    padding: 0.85em 1.1em;
-  }
-  .waves-input-wrapper {
-    border-radius: 0.2em;
-    vertical-align: bottom;
-  }
-  .waves-input-wrapper.waves-button {
-    padding: 0;
-  }
-  .waves-input-wrapper .waves-button-input {
-    position: relative;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-  .waves-circle {
-    text-align: center;
-    width: 2.5em;
-    height: 2.5em;
-    line-height: 2.5em;
-    border-radius: 50%;
-  }
-  .waves-float {
-    -webkit-mask-image: none;
-    -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
-    box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
-    -webkit-transition: all 300ms;
-    -moz-transition: all 300ms;
-    -o-transition: all 300ms;
-    transition: all 300ms;
-  }
-  .waves-float:active {
-    -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
-  }
-  .waves-block {
-    display: block;
-  }
-
-.waves-effect.waves-light {
-    .waves-ripple {
-        background-color: rgba($white, 0.4);
-    }
-}
-
-.waves-effect.waves-primary {
-    .waves-ripple {
-        background-color: rgba($primary, 0.4);
-    }
-}
-.waves-effect.waves-success {
-    .waves-ripple {
-        background-color: rgba($success, 0.4);
-    }
-}
-.waves-effect.waves-info {
-    .waves-ripple {
-        background-color: rgba($info, 0.4);
-    }
-}
-.waves-effect.waves-warning {
-    .waves-ripple {
-        background-color: rgba($warning, 0.4);
-    }
-}
-.waves-effect.waves-danger {
-    .waves-ripple {
-        background-color: rgba($danger, 0.4);
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/components/_widgets.scss b/src/lib/scss/custom/components/_widgets.scss
deleted file mode 100644
index ef8d4fb4..00000000
--- a/src/lib/scss/custom/components/_widgets.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*  */
-/* Widgets.scss */
-/*  */
-
-.mini-stats-wid{
-    .mini-stat-icon{
-        overflow: hidden;
-        position: relative;
-        &:before, &:after{
-            content: "";
-            position: absolute;
-            width: 8px;
-            height: 54px;
-            background-color: rgba($white,.1);
-            left: 16px;
-            transform: rotate(32deg);
-            top: -5px;
-            transition: all 0.4s;
-        }
-
-        &::after{
-            left: -12px;
-            width: 12px;
-            transition: all 0.2s;
-        }
-    }
-
-    &:hover{
-        .mini-stat-icon{
-            &::after{
-                left: 60px;
-            }
-        }
-    }
-}
-
-
diff --git a/src/lib/scss/custom/fonts/_fonts.scss b/src/lib/scss/custom/fonts/_fonts.scss
deleted file mode 100644
index 216ff4af..00000000
--- a/src/lib/scss/custom/fonts/_fonts.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/*  */
-/* Google font - Poppins */
-/*  */
-
-@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
deleted file mode 100644
index 47f3d681..00000000
--- a/src/lib/scss/custom/pages/_agent.scss
+++ /dev/null
@@ -1,443 +0,0 @@
-.agents-header-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 15px;
-    align-items: center;
-
-    @media (max-width: 1024px) {
-        flex-direction: column;
-        justify-content: center;
-        gap: 12px;
-
-        > div {
-            width: 100%;
-            display: flex;
-            justify-content: center;
-        }
-    }
-
-    .agent-filter {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 10px;
-        align-items: center;
-
-        @media (max-width: 1024px) {
-            width: 100%;
-            flex-direction: column;
-            gap: 8px;
-
-            > * {
-                width: 100% !important;
-            }
-        }
-    }
-}
-
-.agent-prop-key {
-    width: 45%;
-}
-
-.agent-overview-header {
-    display: flex;
-    justify-content: center;
-    position: relative;
-
-    .agent-chat {
-        position: absolute;
-        top: 20%;
-        left: calc(50% + 30px);
-    }
-}
-
-.agent-reset-container {
-    position: absolute;
-    left: 10px;
-    top: 5px;
-    font-size: 15px;
-}
-
-.agent-prop-list-container {
-    width: 95%;
-    max-width: 100%;
-
-    .edit-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 5px;
-        margin-bottom: 5px;
-        margin-left: -0.75rem;
-
-        .edit-text-box {
-            flex: 0.9;
-            border: none;
-        }
-
-        .delete-icon {
-            flex: 0.1;
-            display: flex;
-            align-items: center;
-
-            i {
-                cursor: pointer;
-                color: red;
-            }
-        }
-    }
-
-    .list-add {
-        font-size: 20px;
-
-        i {
-            cursor: pointer;
-        }
-    }
-}
-
-.vertical-flexible {
-    max-height: 200px;
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.agent-detail-sections {
-    .card {
-        margin-bottom: 0px !important;
-    }
-
-    .section-min-width {
-        min-width: 300px;
-    }
-
-    .agent-col {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        margin-bottom: 10px;
-    }
-
-    .agent-detail-section {
-        @media (max-width: 423px) {
-            height: fit-content;
-        }
-
-        .agent-prompt-container {
-            height: 100%;
-
-            .agent-prompt-header {
-                background-color: white;
-                padding: 15px;
-            }
-
-            .agent-prompt-body {
-                overflow-y: auto;
-                scrollbar-width: none;
-                margin-bottom: 0px !important;
-            }
-        }
-    }
-}
-
-
-
-.agent-detail-overflow {
-    overflow-y: auto;
-    scrollbar-width: none;
-}
-
-.routing-rule-container {
-    .rule-header {
-        margin-top: 5px;
-        margin-bottom: 5px;
-        padding-left: 10px;
-    }
-
-    .rule-title {
-        border: none;
-        padding-bottom: 0;
-    }
-
-    .rule-body {
-        padding: 0px 10px;
-
-        table tbody tr:last-child {
-            border: none;
-            th, td {
-                border: none;
-            }
-        }
-    }
-}
-
-.agent-config-container {
-    padding: 10px;
-    border: 1px dashed var(--bs-primary);
-    border-radius: 5px;
-
-    .config-header {
-        cursor: pointer;
-        user-select: none;
-        outline: none;
-    }
-
-    .config-header:hover h6 {
-        opacity: 0.8;
-    }
-
-    .llm-config-item {
-        display: flex;
-        flex-wrap: wrap;
-
-        .llm-config-label {
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            flex: 0.25;
-        }
-
-        .llm-config-input {
-            flex: 0.75;
-        }
-    }
-}
-
-.agent-utility-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-height: 500px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    padding: 0px 10px;
-
-    .merge-utility {
-        display: flex;
-        gap: 3px;
-
-        input {
-            outline: none !important;
-            box-shadow: none !important;
-        }
-    }
-
-    .utility-wrapper {
-        border: 1px dotted var(--bs-primary);
-        border-radius: 5px;
-        padding: 10px;
-
-        .utility-row {
-
-            .utility-label {
-                width: 30%;
-                font-size: 0.95em;
-                flex-wrap: wrap;
-            }
-
-            .utility-value {
-                width: 70%;
-                display: flex;
-                gap: 5px;
-
-                .add-list {
-                    font-size: 20px;
-                }
-            }
-
-            .utility-input {
-                width: 95%;
-            }
-
-            .utility-delete {
-                width: 5%;
-            }
-        }
-
-        .utility-row-primary {
-            display: flex;
-
-            .utility-label {
-                display: flex;
-                gap: 10px;
-
-                .utility-tooltip {
-                    display: flex;
-                    gap: 5px;
-                }
-
-                input {
-                    outline: none !important;
-                    box-shadow: none !important;
-                }
-            }
-        }
-
-        .utility-row-secondary {
-            display: flex;
-            flex-direction: column;
-
-            .utility-content {
-                display: flex;
-                flex-direction: column;
-                gap: 3px;
-                border-top: 1px dotted var(--bs-primary);
-                margin-top: 10px;
-                padding-top: 10px;
-                max-height: 350px;
-                overflow-y: auto;
-                scrollbar-width: none;
-
-                .utility-list-item {
-                    display: flex;
-
-                    .utility-label {
-                        font-size: 0.95em;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.agent-card-header {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-}
-
-.agent-label-container {
-    display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
-    margin: 5px 0px;
-}
-
-.agent-utility-desc {
-    .tooltip-inner {
-        text-align: start;
-        max-width: fit-content;
-        padding: 5px 10px;
-    }
-
-    .markdown-div {
-        max-height: 500px;
-        font-size: 15px;
-
-        pre {
-            white-space: pre !important;
-            width: fit-content;
-        }
-    }
-
-    &.show {
-        opacity: 1 !important;
-    }
-}
-
-.agent-rule-config {
-    min-height: 0px;
-    max-height: 200px;
-}
-
-.rule-config-modal {
-    .modal-content {
-        width: 1400px;
-        max-width: calc(100vw - 2rem);
-        height: 80vh;
-        margin: 0 auto;
-    }
-
-    .modal-body {
-        height: 100%;
-        box-sizing: border-box;
-    }
-}
-
-.code-editor {
-    max-height: 500px;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    resize: none;
-
-    .cm-editor {
-        min-width: 1000px;
-        overflow-x: auto;
-        scrollbar-width: thin;
-    }
-}
-
-/* Responsive adjustments for utility */
-@media (max-width: 1250px) {
-    .agent-config-container {
-        .config-header {
-            cursor: pointer;
-            user-select: none;
-            outline: none;
-        }
-
-        .config-header:hover h6 {
-            opacity: 0.8;
-        }
-
-        .llm-config-item {
-            flex-direction: column;
-
-            .llm-config-label {
-                width: 100%;
-            }
-
-            .llm-config-input {
-                width: 100%;
-            }
-        }
-    }
-
-    .agent-utility-container {
-        padding: 0 5px;
-
-        .utility-wrapper {
-            .utility-row-primary {
-                flex-direction: column;
-            }
-
-            .utility-row {
-                .utility-label, .utility-value {
-                    width: 100%;
-                }
-
-                .utility-value {
-                    flex-direction: column;
-                }
-
-                .utility-input, .utility-delete {
-                    width: 100%;
-                }
-
-                .utility-delete {
-                    display: flex;
-                    justify-content: flex-end;
-                    align-items: end;
-                    margin-top: 6px;
-                }
-            }
-
-            .utility-row-secondary {
-                .utility-content {
-                    .utility-list-item {
-                        flex-direction: column;
-                        gap: 6px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.embedding-container {
-    padding: 0px;
-    height: calc(100vh - #{$header-height} - #{$grid-gutter-width} - 0.2 * #{$footer-height});
-    width: calc(100% + #{$grid-gutter-width} * 2);
-    margin-left: calc(-1 * (#{$grid-gutter-width} * 0.75 + #{$grid-gutter-width} * 0.5));
-    margin-right: calc(-1 * (#{$grid-gutter-width} * 0.75 + #{$grid-gutter-width} * 0.5));
-    margin-bottom: calc(-1 * #{$footer-height});
-}
diff --git a/src/lib/scss/custom/pages/_agent_template.scss b/src/lib/scss/custom/pages/_agent_template.scss
deleted file mode 100644
index c175d795..00000000
--- a/src/lib/scss/custom/pages/_agent_template.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.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/lib/scss/custom/pages/_authentication.scss b/src/lib/scss/custom/pages/_authentication.scss
deleted file mode 100644
index cfa4445f..00000000
--- a/src/lib/scss/custom/pages/_authentication.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-/*  */
-/* authentication.scss */
-/*  */
-
-
-/* authentication home icon */
-.home-btn {
-    position: absolute;
-    top: 15px;
-    right: 25px;
-}
-
-/* auth 2 */
-
-.auth-logo{
-    .auth-logo-dark{
-        display: var(--#{$prefix}display-block);
-    }
-    .auth-logo-light{
-        display: var(--#{$prefix}display-none);
-    }
-}
-
-.auth-body-bg{
-    background-color: var(--#{$prefix}secondary-bg);
-}
-
-
-/* auth-pass-inputgroup */
-
-.auth-pass-inputgroup{
-    input[type="input"] + .btn .mdi-eye-outline{
-        &:before{
-            content: "\F06D1";
-        }
-    }
-}
-
-/* authentication full page */
-
-.auth-full-bg{
-    background-color: rgba($primary, 0.25);
-    display: flex;
-
-    @media (min-width: 1200px){
-        height: 100vh;
-    }
-    
-
-    &::before{
-        content: "";
-        position: absolute;
-        width: 300px;
-        height: 300px;
-        border-radius: 50%;
-    }
-
-    .bg-overlay{
-        background: url("../images/bg-auth-overlay.png");
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-}
-
-.auth-full-page-content{
-    display: flex;
-
-    @media (min-width: 1200px){
-        min-height: 100vh;
-    }
-}
-
-.auth-review-carousel{
-    &.owl-theme {
-        .owl-dots {
-            .owl-dot{
-                span{
-                    background-color: rgba($primary, 0.25);
-                }
-                &.active, &:hover{
-                    span{
-                        background-color: $primary;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
deleted file mode 100644
index dac2910a..00000000
--- a/src/lib/scss/custom/pages/_chat.scss
+++ /dev/null
@@ -1,843 +0,0 @@
-/*  */
-/* Chat.scss */
-/*  */
-
-.chat-leftsidebar {
-    @media (min-width: 992px) {
-        min-width: 260px;
-    }
-
-    @media (min-width: 1200px) {
-        min-width: 380px;
-    }
-
-    .chat-leftsidebar-nav {
-        .nav {
-            background-color: var(--#{$prefix}secondary-bg);
-        }
-
-        .tab-content {
-            min-height: 488px;
-        }
-    }
-}
-
-.chat-noti-dropdown {
-    &.active {
-        &:before {
-            content: "";
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            background-color: $danger;
-            border-radius: 50%;
-            right: 0;
-        }
-    }
-
-    .btn {
-        padding: 6px;
-        box-shadow: none;
-        font-size: 20px;
-    }
-}
-
-.chat-search-box {
-    .form-control {
-        border: 0;
-    }
-}
-
-.chat-list {
-    margin: 0;
-    li {
-        &.active {
-            a {
-                background-color: var(--#{$prefix}secondary-bg);
-                border-color: transparent;
-                box-shadow: $box-shadow;
-            }
-        }
-        a {
-            display: block;
-            padding: 14px 16px;
-            color: var(--#{$prefix}secondary-color);
-            transition: all 0.4s;
-            border-top: 1px solid var(--#{$prefix}border-color);
-            border-radius: 4px;
-            &:hover {
-                background-color: var(--#{$prefix}secondary-bg);
-                border-color: transparent;
-                box-shadow: $box-shadow;
-            }
-        }
-    }
-}
-
-.chat-head {
-    font-size: 16px;
-    padding: 2vmin 2%;
-    height: 10%;
-
-    .chat-row {
-        height: 100%;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-
-        .chat-head-info {
-            display: flex;
-            /* flex: 0 0 fit-content; */
-            flex-direction: column;
-            height: 100%;
-            gap: 5px;
-
-            .chat-head-agent {
-                flex: 0.5;
-                display: flex;
-                gap: 10px;
-                width: fit-content;
-                height: 50%;
-
-                .chat-head-agent-icon {
-                    height: 80%;
-                    max-height: 25px;
-                }
-
-                .chat-head-agent-name {
-                    font-size: 0.8em;
-                }
-            }
-
-            .chat-head-user {
-                flex: 0.5;
-                display: flex;
-                gap: 5px;
-                width: fit-content;
-                font-size: 0.7em !important;
-            }
-        }
-    }
-}
-
-.chat-content {
-    height: 82%;
-}
-
-.chat-content-expand {
-    height: 98%;
-}
-
-.user-chat-nav-flex {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 5px;
-}
-
-.user-chat-nav {
-    align-self: stretch;
-    min-width: 30px;
-    min-height: 30px;
-
-    .nav-btn {
-        color: var(--#{$prefix}body-color);
-        box-shadow: none;
-        padding: 0;
-        background-color: var(--#{$prefix}light);
-        border-radius: 50%;
-        border: none;
-        /* width: 40px; */
-        /* height: 40px; */
-        width: 2em;
-        height: 2em;
-
-        i {
-            font-size: 0.8em;
-        }
-    }
-    
-    .dropdown {
-        width: 100%;
-        height: 100%;
-
-        .state-menu > .dropdown-menu {
-            inset: 0px auto auto 0px !important;
-        }
-
-        .dropdown-menu {
-            box-shadow: $box-shadow;
-            border: 1px solid var(--#{$prefix}border-color);
-        }
-    }
-
-    .large-btn {
-        width: 40px;
-        height: 40px;
-    }
-
-    .btn-pair {
-        display: flex;
-
-        .btn-left {
-            border-top-right-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-
-        .btn-right {
-            border-top-left-radius: 0px;
-            border-bottom-left-radius: 0px;
-        }
-
-        i, span {
-            font-size: 0.9em;
-        }
-    }
-}
-
-.chat-conversation {
-    li {
-        clear: both;
-    }
-
-    .chat-day-title {
-        position: relative;
-        text-align: center;
-        margin-bottom: 24px;
-
-        .title {
-            background-color: var(--#{$prefix}secondary-bg);
-            position: relative;
-            z-index: 1;
-            padding: 6px 24px;
-        }
-
-        &:before {
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 1px;
-            left: 0;
-            right: 0;
-            background-color: var(--#{$prefix}border-color);
-            top: 10px;
-        }
-        .badge {
-            font-size: 12px;
-        }
-    }
-
-    .conv-msg-container {
-        display: flex;
-        position: relative;
-        width: 100%;
-        margin-bottom: 20px;
-
-        .cicon-wrap {
-            margin-right: 4px;
-            flex: 0 0 fit-content;
-        }
-
-        .msg-container {
-            display: flex;
-            flex-direction: column;
-            width: 80%;
-
-            .bot-msg {
-                background-color: var(--#{$prefix}light) !important;
-            }
-        }
-
-        .ctext-wrap {
-            padding: 8px 12px;
-            background-color: rgba($primary, 0.1);
-            border-radius: 8px 8px 8px 0px;
-            overflow: hidden;
-            width: fit-content;
-            max-width: 100%;
-            word-break: break-all;
-
-            .conversation-name {
-                font-weight: $font-weight-semibold;
-                color: $primary;
-                margin-bottom: 4px;
-            }
-
-            span p {
-                margin-top: 0px;
-                margin-bottom: 0px;
-            }
-
-            .chat-indication {
-                font-size: 1em;
-            }
-        }
-
-        .image-wrap {
-            margin-top: 2px;
-            width: fit-content;
-
-            img {
-                max-width: 25vw;
-                max-height: 25vh;
-            }
-        }
-
-        .dropdown {
-            .dropdown-toggle {
-                font-size: 18px;
-                padding: 4px;
-                cursor: pointer;
-                color: var(--#{$prefix}secondary-color);
-            }
-
-            .dropdown-menu {
-                box-shadow: $box-shadow;
-                border: 1px solid var(--#{$prefix}border-color);
-                top: auto !important;
-                bottom: 100% !important;
-            }
-        }
-
-        .chat-time {
-            font-size: 12px;
-        }
-    }
-
-    .right {
-        .conv-msg-container {
-            justify-content: flex-end;
-
-            .msg-container {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-end;
-            }
-
-            .ctext-wrap {
-                background-color: var(--#{$prefix}light);
-                text-align: right;
-                border-radius: 8px 8px 0px 8px;
-                width: inherit;
-            }
-
-            &.last-chat {
-                .conv-msg-container {
-                    &:before {
-                        right: 0;
-                        left: auto;
-                    }
-                }
-            }
-        }
-    }
-
-    .last-chat {
-        .conv-msg-container {
-            &:before {
-                content: "\F0009";
-                font-family: "Material Design Icons";
-                position: absolute;
-                color: $primary;
-                right: 0;
-                bottom: 0;
-                font-size: 16px;
-
-                @media (max-width: 575.98px) {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-.scroll-bottom-to-top {
-    display: flex;
-    flex-direction: column-reverse;
-    overflow-y: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-}
-
-.chat-input-section {
-    padding: 0 2%;
-    height: 8%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-evenly;
-}
-
-.chat-input-hide {
-    display: none;
-    height: 2%;
-}
-
-.chat-input {
-    border-radius: 5px;
-    background-color: var(--#{$prefix}light) !important;
-    border-color: var(--#{$prefix}light) !important;
-    resize: none;
-    padding-right: 1rem;
-    scrollbar-width: none;
-}
-
-.chat-more-util {
-    padding-right: 5em;
-}
-
-.chat-util-links {
-    display: flex;
-    width: fit-content;
-    position: absolute;
-    right: 3px;
-    top: 55%;
-    transform: translateY(-50%);
-
-    li {
-        span {
-            font-size: 160% !important;
-            line-height: 36px;
-            padding: 0px 4px;
-            display: inline-block;
-            color: var(--bs-primary);
-        }
-    }
-}
-
-.chat-util-trigger {
-    text-align: center;
-
-    li {
-        span {
-            font-size: 200%;
-            line-height: 36px;
-            padding: 0px 4px;
-            display: inline-block;
-            color: var(--bs-primary);
-        }
-    }
-}
-
-.chat-log {
-    height: 100vh;
-
-    .log-flex {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-    }
-
-    .log-header {
-        flex: 2%;
-    }
-
-    .log-body {
-        flex: 96%
-    }
-
-    .log-footer {
-        flex: 2%;
-
-        .log-footer-nav-btn {
-            font-size: 0.75em;
-        }
-    }
-
-    .instant-log-body {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        padding: 0px 20px;
-        overflow-y: scroll;
-        scrollbar-width: none;
-
-        .instant-log-section {
-            border-radius: 10px;
-            border: 1px solid var(--bs-secondary);
-            display: flex;
-            flex-direction: column;
-
-            .latest-state-log {
-                padding: 8px;
-            }
-
-            .close-icon {
-                font-size: 20px;
-                color: red;
-                padding: 0 5px;
-                
-                i {
-                    cursor: pointer;
-                }
-            }
-
-            .chat-agent-info {
-                overflow-y: scroll;
-                scrollbar-width: none;
-                flex: 0 0 fit-content;
-                height: fit-content;
-                max-height: $log-sec-height-md;
-
-                .chat-agent-row {
-                    margin: 8px 0px;
-                    color: white;
-                    font-size: 14px;
-                    text-align: center;
-                }
-            }
-        }
-
-        .instant-log-sec-lg {
-            flex: 0 0 $log-sec-height-lg;
-            height: $log-sec-height-lg;
-            min-height: $log-sec-height-lg;
-        }
-
-        .instant-log-sec-md {
-            flex: 0 0 $log-sec-height-md;
-            height: $log-sec-height-md;
-            min-height: $log-sec-height-md;
-        }
-
-        .instant-log-sec-sm {
-            flex: 0 0 $log-sec-height-sm;
-            height: $log-sec-height-sm;
-            min-height: $log-sec-height-sm;
-        }
-    }
-
-    .nav-group {
-        margin: 0px 3px;
-    }
-
-    .padding-side {
-        padding-left: 20px;
-        padding-right: 20px;
-
-        ul {
-            padding-left: 2px !important;
-            padding-right: 0px !important;
-        }
-    }
-
-    .log-background {
-        background-color: black;
-
-        .log-close-btn {
-            margin-top: 1rem;
-            margin-bottom: 0.5rem;
-            position: sticky;
-            display: flex;
-            justify-content: space-between;
-        }
-    
-        .log-list {
-            background-color: black;
-
-            .log-element {
-                margin-top: 10px;
-                margin-bottom: 15px;
-
-                .log-meta {
-                    font-size: 15px;
-                    color: white;
-                }
-            
-                .log-content {
-                    font-size: 17px;
-                    color: white;
-
-                    li {
-                        margin-top: 5px;
-                        margin-bottom: 5px;
-                    }
-                }
-
-                .log-collapse {
-                    overflow-y: hidden;
-                    height: fit-content;
-                    max-height: 200px;
-                    display: -webkit-box;
-                    -webkit-box-orient: vertical;
-                    -webkit-line-clamp: 10;
-                }
-                
-                .divider {
-                    overflow: visible; /* For IE */
-                    padding: 0;
-                    border: none;
-                    border-top: medium double white;
-                    color: white;
-                    text-align: center;
-                }
-
-                .toggle-btn {
-                    outline: none;
-                    box-shadow: none;
-                    color: white;
-                    font-size: 15px;
-                    padding-left: 0px;
-                }
-            }
-
-            .state-change-container {
-                margin-top: 0px;
-                margin-bottom: 5px;
-                padding-left: 10px;
-
-                .state-source {
-                    font-size: 12px;
-                }
-                
-                .state-value-container {
-                    display: flex;
-                    flex-wrap: wrap;
-
-                    .state-value {
-                        min-width: 50%;
-                        font-size: 15px;
-
-                        .active-rounds {
-                            font-size: 12px;
-                        }
-                    }
-                }
-            }
-
-            .queue-change-container {
-                margin: 5px 0px;
-                padding: 0px 10px;
-
-                .log-content {
-                    text-align: center;
-                    font-size: 15px;
-                    margin-top: 2px;
-                    margin-bottom: 2px;
-                }
-            }
-
-            .state-log-item {
-                margin-top: 5px;
-                margin-bottom: 10px;
-
-                .log-content {
-                    span {
-                        font-size: 16px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-.chat-iframe {
-    @media (max-width: 1024px) {
-        position: fixed;
-        top: 0 !important;
-        bottom: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-        border: none !important;
-        margin:0 !important;
-        padding:0 !important;
-        overflow: hidden !important;
-    }
-}
-
-.state-form {
-    padding-left: 25px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 800px;
-    scrollbar-width: thin;
-
-    .state-input {
-        flex: 0.45;
-    }
-
-    .state-key-input {
-        flex: 0.3;
-    }
-
-    .state-value-input {
-        flex: 0.4;
-    }
-
-    .state-num-input {
-        flex: 0.2;
-    }
-    
-    .state-delete {
-        flex: 0.05;
-        color: var(--bs-danger);
-        font-size: 12px;
-    }
-
-    .invalid {
-        border-color: var(--bs-danger);
-    }
-}
-
-.msg-disclaimer {
-    margin-top: 3px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    border-color: var(--bs-success-border-subtle);
-    background-color: var(--bs-success-bg-subtle);
-    font-size: 0.85em;
-    font-weight: 500;
-    color: var(--bs-secondary)
-}
-
-.center-option {
-    justify-content: center;
-    padding: 0px 10px;
-}
-
-.video-option-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-
-    .video-element-card {
-        border: none;
-        box-shadow: none;
-        flex: 1 1 300px;
-
-        .card-body {
-            padding: 0 !important;
-        }
-
-        .video-element-title {
-            font-size: 1.1em;
-            font-weight: 700;
-            padding-left: 5px;
-            padding-top: 10px;
-            padding-bottom: 10px;
-            margin-bottom: 5px;
-            width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        .video-element-player {
-            aspect-ratio: 16 / 9;
-
-            video, iframe {
-                border-radius: 10px;
-                height: 100%;
-            }
-        }
-    }
-}
-
-.plain-option-container {
-    display: flex;
-    flex-wrap: wrap;
-
-    .btn:not([name="confirm"]) {
-        &:hover {
-            background-color: #fff;
-            color: var(--bs-primary);
-        }
-    }
-
-    .btn.active:hover {
-        background-color: var(--bs-primary);
-        color: #fff;
-    }
-
-    button {
-        min-width: 50px;
-        border-radius: 10px;
-    }
-
-    .link-option:hover {
-        text-decoration: underline;
-    }
-
-    .chat-uploader {
-        font-size: 18px;
-    }
-}
-
-.complex-option-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 3px;
-    margin-top: 10px;
-
-    .card-element {
-        flex: 1 1 50%;
-        border-radius: 10px;
-        border-width: 2px;
-        max-width: calc(50% - 2.5px);
-        margin-bottom: 0px;
-
-        @media (max-width: 620px) {
-            width: 100%;
-            max-width: 100%;
-        }
-
-        .card-element-body {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-            gap: 5px;
-            padding: 10px 15px;
-            overflow-y: auto;
-            scrollbar-width: none;
-            height: fit-content;
-            max-height: 200px;
-
-            .card-element-title {
-                font-size: 0.85rem;
-                font-weight: 700;
-            }
-
-            .card-element-subtitle {
-                font-size: 0.8rem;
-                font-weight: 500;
-            }
-
-            .card-element-text {
-                font-size: 0.75rem;
-                font-weight: 400;
-                padding: 5px;
-            }
-
-            .card-option-group {
-                margin-top: 5px;
-
-                .btn {
-                    display: block;
-                    margin-left: 0px !important;
-                    border-radius: 10px;
-                }
-
-                .link-option:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
-
-.conv-tags-container {
-    display: flex;
-    flex-wrap: wrap;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    min-height: 80px;
-    max-height: 180px;
-}
-
-.conv-tag-add {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 10px;
-}
diff --git a/src/lib/scss/custom/pages/_coming-soon.scss b/src/lib/scss/custom/pages/_coming-soon.scss
deleted file mode 100644
index 75691539..00000000
--- a/src/lib/scss/custom/pages/_coming-soon.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*  */
-/* coming-soon.scss */
-/*  */
-
-.counter-number {
-    font-size: 32px;
-    font-weight: $font-weight-semibold;
-    text-align: center;
-    display: flex;
-    span {
-        font-size: 16px;
-        font-weight: $font-weight-normal;
-        display: block;
-        padding-top: 5px;
-    }
-}
-
-.coming-box {
-    width: 25%;
-}
diff --git a/src/lib/scss/custom/pages/_contacts.scss b/src/lib/scss/custom/pages/_contacts.scss
deleted file mode 100644
index 22fff233..00000000
--- a/src/lib/scss/custom/pages/_contacts.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*  */
-/* Contacts.scss */
-/*  */
-
-.contact-links{
-  a{
-    color: var(--#{$prefix}body-color);
-  }
-}
-
-/* profile */
-
-.profile-user-wid{
-  margin-top: -26px;
-}
diff --git a/src/lib/scss/custom/pages/_conversation.scss b/src/lib/scss/custom/pages/_conversation.scss
deleted file mode 100644
index 5c5e1d81..00000000
--- a/src/lib/scss/custom/pages/_conversation.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.custom-modal {
-    button {
-        outline: none !important;
-        box-shadow: none !important;
-    }
-}
-
-.list-title {
-    width: 40%;
-    min-width: 100px;
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.conv-state-search-menu {
-    inset: auto 0px auto auto !important;
-}
-
-.dialog-item-text {
-    color: $primary !important;
-
-    a {
-        color: $primary !important;
-    }
-}
-
-.text-collapse {
-    overflow-y: hidden;
-    height: fit-content;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 10;
-    max-height: 300px;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_ecommerce.scss b/src/lib/scss/custom/pages/_ecommerce.scss
deleted file mode 100644
index 59cc249a..00000000
--- a/src/lib/scss/custom/pages/_ecommerce.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/*  */
-/* ecommerce.scss */
-/*  */
-
-/* product */
-
-.search-box{
-    .form-control{
-        border-radius: 30px;
-        padding-left: 40px;
-    }
-    .search-icon{
-        font-size: 16px;    
-        position: absolute;
-        left: 13px;
-        top: 0;
-        line-height: 38px;
-    }
-}
-
-.product-list{
-    li{
-        a{
-            display: block;
-            padding: 4px 0px;
-            color: var(--#{$prefix}body-color);
-        }
-    }
-}
-
-.product-view-nav{
-    &.nav-pills {
-        .nav-item{
-            margin-left: 4px;
-        }
-        .nav-link{
-            width: 36px;
-            height: 36px;
-            font-size: 16px;
-            padding: 0;
-            line-height: 36px;
-            text-align: center;
-            border-radius: 50%;
-        }
-    }
-}
-
-.product-ribbon{
-    position: absolute;
-    right: 0px;
-    top: 0px;
-}
-
-/* Product Details */
-
-.product-detai-imgs{
-    .nav{
-        .nav-link{
-            margin: 7px 0px;
-
-            &.active{
-                background-color: var(--#{$prefix}tertiary-bg);
-            }
-        }
-    }
-}
-
-.product-color{
-    a{
-        display: inline-block;
-        text-align: center;
-        color: var(--#{$prefix}body-color);
-        .product-color-item{
-            margin: 7px;
-        }
-        &.active, &:hover{
-            color: $primary;
-            .product-color-item{
-                border-color: $primary !important;
-            }
-        }
-    }
-}
-
-/* ecommerce cart */
-
-.visa-card{
-    .visa-logo{
-        line-height: 0.5;
-    }
-
-    .visa-pattern{
-        position: absolute;
-        font-size: 385px;
-        color: rgba($white, 0.05);
-        line-height: 0.4;
-        right: 0px;
-        bottom: 0px;
-    }
-}
-
-
-/* checkout */
-
-.checkout-tabs{
-    .nav-pills{
-        .nav-link{
-            margin-bottom: 24px;
-            text-align: center;
-            background-color: var(--#{$prefix}secondary-bg);
-            box-shadow: $box-shadow;
-
-            &.active{
-                background-color: $primary;
-            }
-            .check-nav-icon{
-                font-size: 36px;
-            }
-        }
-    }
-}
diff --git a/src/lib/scss/custom/pages/_email.scss b/src/lib/scss/custom/pages/_email.scss
deleted file mode 100644
index d03af023..00000000
--- a/src/lib/scss/custom/pages/_email.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-/* ==============
-  Email
-===================*/
-.email-leftbar {
-  width: 236px;
-  float: left;
-  padding: 20px;
-  border-radius: 5px;
-}
-
-.email-rightbar {
-  margin-left: 260px;
-}
-
-.chat-user-box {
-  p.user-title {
-    color: var(--#{$prefix}emphasis-color);
-    font-weight: 500;
-  }
-  p {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 767px) {
-  .email-leftbar {
-    float: none;
-    width: 100%;
-  }
-  .email-rightbar {
-    margin: 0;
-  }
-}
-
-
-.mail-list {
-  a {
-    display: block;
-    color: var(--#{$prefix}secondary-color);
-    line-height: 24px;
-    padding: 8px 5px;
-    &.active {
-      color: $danger;
-      font-weight: 500;
-    }
-  }
-}
-
-.message-list {
-  display: block;
-  padding-left: 0;
-
-  li {
-    position: relative;
-    display: block;
-    height: 50px;
-    line-height: 50px;
-    cursor: default;
-    transition-duration: .3s;
-
-    a{
-      color: var(--#{$prefix}secondary-color);
-    }
-
-    &:hover {
-      background: var(--#{$prefix}tertiary-bg);
-      transition-duration: .05s;
-    }
-
-    .col-mail {
-      float: left;
-      position: relative;
-    }
-
-    .col-mail-1 {
-      width: 320px;
-
-      .star-toggle,
-      .checkbox-wrapper-mail,
-      .dot {
-        display: block;
-        float: left;
-      }
-
-      .dot {
-        border: 4px solid transparent;
-        border-radius: 100px;
-        margin: 22px 26px 0;
-        height: 0;
-        width: 0;
-        line-height: 0;
-        font-size: 0;
-      }
-
-      .checkbox-wrapper-mail {
-        margin: 15px 10px 0 20px;
-      }
-
-      .star-toggle {
-        margin-top: 18px;
-        margin-left: 5px;
-      }
-
-      .title {
-        position: absolute;
-        top: 0;
-        left: 110px;
-        right: 0;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        margin-bottom: 0;
-      }
-    }
-
-    .col-mail-2 {
-      position: absolute;
-      top: 0;
-      left: 320px;
-      right: 0;
-      bottom: 0;
-
-      .subject,
-      .date {
-        position: absolute;
-        top: 0;
-      }
-
-      .subject {
-        left: 0;
-        right: 200px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-
-      .date {
-        right: 0;
-        width: 170px;
-        padding-left: 80px;
-      }
-    }
-
-    &.active,
-    &.active:hover {
-      box-shadow: inset 3px 0 0 $primary;
-    }
-
-    
-  &.unread  {
-    background-color: var(--#{$prefix}tertiary-bg);
-    font-weight: 500;
-    color: var(--#{$prefix}body-color);
-      a{
-        color: var(--#{$prefix}body-color);
-        font-weight: 500;
-      }
-    }
-  }
-
-
-  .checkbox-wrapper-mail {
-    cursor: pointer;
-    height: 20px;
-    width: 20px;
-    position: relative;
-    display: inline-block;
-    background-color: var(--#{$prefix}secondary-bg);
-    box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);
-    border-radius: 1px;
-
-    input {
-      opacity: 0;
-      cursor: pointer;
-    }
-    input:checked ~ label {
-      opacity: 1;
-    }
-
-    label {
-      position: absolute;
-      height: 20px;
-      width: 20px;
-      left: 0;
-      cursor: pointer;
-      opacity: 0;
-      margin-bottom: 0;
-      transition-duration: .05s;
-      top: 0;
-      &:before {
-        content: "\F012C";
-        font-family: "Material Design Icons";
-        top: 0;
-        height: 20px;
-        color: var(--#{$prefix}body-color);
-        width: 20px;
-        position: absolute;
-        margin-top: -16px;
-        left: 4px;
-        font-size: 13px;
-      }
-    }
-  }
-}
-
-@media (max-width: 575.98px) { 
-  .message-list li .col-mail-1 {
-      width: 200px;
-  }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_extras-pages.scss b/src/lib/scss/custom/pages/_extras-pages.scss
deleted file mode 100644
index 083e60e0..00000000
--- a/src/lib/scss/custom/pages/_extras-pages.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*  */
-/* Extras pages.scss */
-/*  */
-
-
-/* pricing */
-
-
-.plan-box{
-    .plan-btn{
-        position: relative;
-
-        &::before{
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 2px;
-            background: var(--#{$prefix}border-color);
-            left: 0px;
-            right: 0px;
-            top: 12px;
-        }
-    }
-}
-
-/* blog */
-
-.blog-play-icon{
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    transform: translateY(-50%);
-    margin: 0px auto;
-}
diff --git a/src/lib/scss/custom/pages/_file-manager.scss b/src/lib/scss/custom/pages/_file-manager.scss
deleted file mode 100644
index 37075954..00000000
--- a/src/lib/scss/custom/pages/_file-manager.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/*  */
-/* File manager.scss */
-/*  */
-
-/* file manager */
-
-.filemanager-sidebar{
-    
-    @media (min-width: 1200px){
-        min-width: 230px;
-        max-width: 230px;
-    }
-
-    @media (min-width: 1366px){
-        min-width: 280px;
-        max-width: 280px;
-    }
-
-}
-
-.categories-list{
-    padding: 4px 0;
-    li{
-        a{
-            display: block;
-            padding: 8px 12px;
-            color: var(--#{$prefix}body-color);
-            font-weight: $font-weight-medium;
-        }
-
-        &.active{
-            a{
-                color: $primary;
-            }
-        }
-
-        ul{
-            padding-left: 16px;
-            li{
-                a{
-                    padding: 4px 12px;
-                    color: var(--#{$prefix}secondary-color);
-                    font-size: 13px;
-                    font-weight: $font-weight-normal;
-                }
-            }
-        }
-    }
-}
-
-
diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
deleted file mode 100644
index 2197dc92..00000000
--- a/src/lib/scss/custom/pages/_instruction.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-.instruction-container {
-    .text-count {
-        margin-top: 2px;
-        font-size: 10px;
-    }
-
-    .instruction-result-container {
-        .instruction-result-body {
-            font-size: 15px;
-            padding: 5px 10px;
-            overflow-y: auto;
-            max-height: 500px;
-            scrollbar-width: thin;
-        }
-    }
-}
-
-.instruction-border {
-    border: 1px dashed var(--bs-primary);
-    border-radius: 5px;
-}
-
-.instruct-header {
-    font-size: 17px;
-    display: flex;
-    justify-content: space-between;
-}
-
-.instruct-text-header {
-    font-size: 17px;
-    display: flex;
-    gap: 5px;
-}
-
-.instruct-setting-container {
-    display: flex;
-    flex-wrap: wrap;
-
-    .instruct-setting-section {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    @media (max-width: 992px) {
-        .instruct-setting-section {
-            margin-top: 10px;
-        }
-
-        .instruction-gap {
-            margin-top: 30px;
-        }
-    }
-
-    .instruct-setting-item {
-        display: flex;
-        justify-content: center;
-
-        .instruct-setting-dropdown {
-            width: 75%;
-        }
-
-        @media (max-width: 992px) {
-            .instruct-setting-dropdown {
-                width: 100%;
-            }
-        }
-    }
-}
-
-.instruct-setting-padding {
-    padding: 20px 10px;
-}
-
-.instruct-kv-container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    max-height: 200px;
-    overflow-y: auto;
-    scrollbar-width: none;
-    padding-top: 20px;
-
-    .instruct-kv-item {
-        display: flex;
-        gap: 10px;
-        justify-content: center;
-    }
-}
-
-.instruction-log-col {
-    max-width: 150px;
-}
-
-.instruction-log-detail-container {
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-    padding: 10px 5px;
-
-    .instruction-log-mt {
-        margin-top: 10px;
-    }
-
-    .instruction-log-state ul {
-        font-size: 15px;
-    }
-
-    .overflow {
-        overflow-y: auto;
-        max-height: 350px;
-        scrollbar-width: none;
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_jobs.scss b/src/lib/scss/custom/pages/_jobs.scss
deleted file mode 100644
index 164fd9cc..00000000
--- a/src/lib/scss/custom/pages/_jobs.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*  */
-/* _jobs.scss */
-/*  */
-
-.jobs-categories {
-    a {
-        color: var(--#{$prefix}body-color); 
-        transition: all 0.5s ease;
-        &:hover  {
-            color: $primary;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
deleted file mode 100644
index 3b037c77..00000000
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ /dev/null
@@ -1,844 +0,0 @@
-.knowledge-demo-btn {
-    display: flex;
-    justify-content: space-between;
-
-    .demo-btn {
-        display: flex;
-        gap: 10px;
-    }
-    
-    .btn-content {
-        display: flex;
-        justify-content: center;
-        gap: 3px;
-        flex-wrap: wrap;
-    }
-}
-
-.knowledge-btn-icon {
-    i:before {
-        font-weight: bold;
-    }
-}
-
-.demo-tooltip-icon {
-    font-size: 15px;
-}
-
-.demo-tooltip-note {
-    .tooltip-inner {
-        max-width: fit-content;
-    }
-
-    ul {
-        text-align: left !important;
-        margin-bottom: 0px !important;
-        padding-left: 1rem !important;
-
-        li {
-            margin: 3px 0px;
-        }
-    }
-}
-
-.operator-tooltip {
-    .tooltip-inner {
-        width: fit-content !important;
-        max-width: 300px !important;
-        text-align: left !important;
-    }
-}
-
-.knowledge-textarea {
-    border-radius: 5px;
-    border-color: var(--#{$prefix}light) !important;
-    background-color: var(--#{$prefix}light) !important;
-    scrollbar-width: thin;
-    resize: none;
-}
-
-.knowledge-search-container {
-    .text-count {
-        margin-top: 2px;
-        font-size: 10px;
-    }
-
-    .knowledge-search-footer {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 10px;
-
-        .search-input {
-            display: flex;
-            gap: 5px;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .confidence-box {
-            width: 45%;
-        }
-
-        .step-btn-group {
-            display: flex;
-            flex-direction: column;
-
-            button {
-                padding: 0px;
-
-                i::before {
-                    font-size: 1em;
-                    font-weight: 700;
-                }
-            }
-        }
-
-        .input-text {
-            padding: 0.47rem 0px;
-            font-size: 14px;
-        }
-
-        .search-toggle {
-            height: 100%;
-            width: 35px;
-
-            .form-switch {
-                padding: 0px;
-            }
-
-            input {
-                margin: 0px;
-                height: 100%;
-                width: 100%;
-                outline: none !important;
-                box-shadow: none !important;
-            }
-        }
-
-        /* Responsive design for tablets and mobile */
-        @media (max-width: 768px) {
-            flex-direction: column;
-            gap: 15px;
-
-            .search-input {
-                &:first-child {
-                    /* Confidence input section - centered */
-                    justify-content: center;
-                    align-items: center;
-                    gap: 10px;
-
-                    .confidence-box {
-                        width: 60px;
-                        flex-shrink: 0;
-                    }
-                }
-
-                &:nth-child(2) {
-                    /* Toggle section - keep horizontal */
-                    justify-content: center;
-                    align-items: center;
-                    gap: 15px;
-                    flex-wrap: wrap;
-
-                    .input-text {
-                        font-size: 13px;
-                    }
-
-                    .search-toggle {
-                        width: 50px;
-                        height: 30px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        .form-switch {
-                            margin: 0;
-                            padding: 0;
-                            display: flex;
-                            align-items: center;
-                        }
-
-                        input {
-                            width: 40px !important;
-                            height: 20px !important;
-                        }
-                    }
-                }
-            }
-
-            /* Center the search button */
-            .line-align-center {
-                text-align: center;
-            }
-        }
-
-        /* Mobile and smaller screens - stack vertically */
-        @media (max-width: 480px) {
-            .search-input {
-                &:first-child {
-                    flex-direction: column;
-
-                    .input-text {
-                        text-align: center;
-                    }
-
-                    > div:last-child {
-                        /* Confidence input and buttons container */
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        gap: 5px;
-                        width: 100%;
-
-                        .confidence-box {
-                            width: 80px;
-                        }
-                    }
-                }
-
-                &:nth-child(2) {
-                    /* Keep toggle section horizontal on mobile */
-                    justify-content: center;
-                    align-items: center;
-                    gap: 12px;
-                    flex-wrap: wrap;
-
-                    .input-text {
-                        font-size: 12px;
-                        padding: 0.3rem 0px;
-                        white-space: nowrap;
-                    }
-
-                    .search-toggle {
-                        width: 55px;
-                        height: 32px;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        .form-switch {
-                            margin: 0;
-                            padding: 0;
-                            display: flex;
-                            align-items: center;
-                        }
-
-                        input {
-                            width: 45px !important;
-                            height: 22px !important;
-                            margin: 0 !important;
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Very small screens - further optimizations */
-        @media (max-width: 360px) {
-            .search-input {
-                &:first-child {
-                    > div:last-child {
-                        .confidence-box {
-                            width: 70px;
-                        }
-                    }
-                }
-            }
-
-            .input-text {
-                font-size: 11px;
-            }
-        }
-    }
-
-    .graph-searh-result-container {
-        .graph-result-header {
-            font-size: 17px;
-        }
-
-        .graph-result-body {
-            font-size: 15px;
-        }
-    }
-}
-
-.knowledge-table-header {
-    .knowledge-count {
-        padding: 0 0.75rem;
-    }
-
-    .knowledge-header-text {
-        margin-bottom: 0px !important;
-        padding: 0.47rem 0.75rem;
-    }
-
-    .collection-action-container {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 10px;
-    }
-
-    .action-container-padding {
-        padding: 5px 0px;
-    }
-
-    .collection-dropdown-container {
-        display: flex;
-        gap: 5px;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-
-        .collection-dropdown {
-            flex: 1 1 auto;
-            min-width: 150px;
-        }
-
-        .collection-action-btn {
-            i:before {
-                font-weight: bold;
-            }
-        }
-
-        select {
-            outline: none !important;
-            box-shadow: none !important;
-        }
-
-        @media (max-width: 350px) {
-            flex-direction: column;
-            justify-content: center;
-            gap: 5px;
-
-            .collection-dropdown {
-                width: 100%;
-                min-width: 100%;
-            }
-        }
-    }
-
-    .collection-add-container {
-        display: flex;
-        gap: 5px;
-        justify-content: flex-end;
-    }
-
-    @media (max-width: 600px) {
-        justify-content: center !important;
-
-        .collection-action-container {
-            justify-content: center !important;
-        }
-
-        .collection-dropdown-container {
-            justify-content: center !important;
-        }
-    }
-}
-
-.knowledge-table {
-    overflow: hidden;
-
-    .knowledge-text {
-        width: 70%;
-    }
-
-    .knowledge-text-qa {
-        width: 40%;
-        max-width: 50px;
-    }
-
-    .knowledge-op {
-        width: 20%;
-
-        .knowledge-op-list {
-            justify-content: center;
-        }
-    }
-
-    .knowledge-detail {
-        padding: 2px 5px;
-        border-radius: 3px;
-        border-color: var(--#{$prefix}light) !important;
-        background-color: var(--#{$prefix}light) !important;
-        position: relative;
-        overflow-y: auto;
-        scrollbar-width: none;
-        max-height: 300px;
-
-        ul {
-            margin: 15px 0px;
-
-            li {
-                margin: 5px 0px;
-            }
-        }
-
-        .wrappable {
-            white-space: wrap !important;
-        }
-
-        .more-detail-item {
-            .link {
-                color: var(--bs-primary);
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        .more-detail {
-            margin: 2px 0px;
-            padding-left: 2rem;
-
-            button {
-                padding-left: 0;
-            }
-        }
-
-        .more-detail-list {
-            margin: 1px 0px 15px 0px;
-            font-size: 12px;
-            padding-left: 4rem;
-            
-            .more-detail-item {
-                list-style-type: square;
-            }
-
-            ul {
-                font-size: 15px;
-            }
-        }
-    }
-}
-
-.knowledge-loader {
-    display: flex;
-    justify-content: center;
-}
-
-.vector-edit-container {
-    .modal-title {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-
-        .collection-value {
-            font-size: 15px;
-        }
-    }
-
-    .edit-group {
-        display: flex;
-        flex-direction: column;
-
-        .textarea-label {
-            font-size: 15px;
-        }
-    }
-
-    .payload-container {
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        min-height: 100px;
-        max-height: 300px;
-        overflow-y: auto;
-        scrollbar-width: none;
-
-        .payload-item {
-            display: flex;
-            gap: 10px;
-        }
-    }
-}
-
-.knowledge-doc-upload-container {
-    margin-top: 50px;
-
-    .doc-upload-header {
-        display: flex;
-        justify-content: flex-start;
-        gap: 10px;
-        font-size: 18px;
-
-        .upload-toggle-btn input {
-            outline: none !important;
-            box-shadow: none !important;
-        }
-    }
-
-    .doc-upload-body {
-        .doc-drop-zone {
-            width: 100%;
-            height: 100%;
-
-            i {
-                font-size: 3.5em;
-            }
-        }
-    }
-
-    .doc-upload-footer {
-        margin-top: 0px;
-
-        .load-doc-btn {
-            font-size: 12px;
-            display: flex;
-            justify-content: space-between;
-
-            .reset-docs-btn {
-                color: var(--bs-danger);
-                
-                i {
-                    font-size: 18px;
-                    border-radius: 3px;
-
-                    &:hover {
-                        background-color: var(--bs-danger);
-                        color: white;
-                    }
-                }
-            }
-        }
-
-        .collection-docs {
-            margin-top: 10px;
-            padding: 10px;
-            border: 1px dashed var(--bs-primary);
-            border-radius: 5px;
-            background-color: white;
-            overflow-y: scroll;
-            scrollbar-width: thin;
-            width: 100%;
-            height: 200px;
-        }
-
-        .doc-load-more {
-            font-size: 3em;
-        }
-    }
-}
-
-.doc-card-btn {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 10px;
-    background-color: white;
-    font-size: 3.5em;
-
-    i:hover {
-        color: var(--bs-primary);
-    }
-}
-
-.doc-upload-result-container {
-    .doc-upload-result-item {
-        display: flex;
-        gap: 5px;
-    }
-}
-
-.doc-uploader-container {
-    border-radius: 10px;
-    padding: 10px;
-    background-color: var(--bs-light);
-}
-
-.knowledge-adv-search-container {
-    .knowledge-adv-search-btn {
-        display: flex;
-        justify-content: flex-start;
-        gap: 10px;
-        font-size: 18px;
-
-        input {
-            outline: none !important;
-            box-shadow: none !important;
-        }
-
-        @media (max-width: 480px) {
-            font-size: 16px;
-            gap: 8px;
-            flex-wrap: wrap;
-        }
-    }
-    
-    .knowledge-adv-search-items {
-        margin-top: 15px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        min-height: 200px;
-        max-height: 300px;
-        overflow-y: auto;
-        scrollbar-width: none;
-
-        .knowledge-adv-search-item {
-            display: flex;
-            gap: 10px;
-
-            .search-item-cb {
-                flex: 0 0 20px;
-
-                .form-check {
-                    font-size: 15px;
-                    margin-bottom: 0.125rem;
-                }
-
-                input[type="checkbox"] {
-                    outline: none !important;
-                    box-shadow: none !important;
-                }
-            }
-
-            .search-item-name {
-                font-size: 15px;
-                flex: 0 0 100px;
-            }
-
-            .search-item-content {
-                flex: 0.3;
-                min-width: 150px;
-                max-width: 350px;
-            }
-
-            /* Responsive behavior for narrow screens */
-            @media (max-width: 768px) {
-                flex-direction: column;
-                gap: 8px;
-                padding: 10px;
-                border: 1px solid #e0e0e0;
-                border-radius: 5px;
-                margin-bottom: 5px;
-
-                .search-item-cb {
-                    flex: none;
-                    align-self: flex-start;
-                }
-
-                .search-item-content {
-                    flex: none;
-                    min-width: unset;
-                    max-width: unset;
-                    width: 100%;
-                    position: relative;
-
-                    /* Show field labels on mobile */
-                    &[data-label]:before {
-                        content: attr(data-label) ":";
-                        display: block;
-                        font-weight: bold;
-                        font-size: 14px;
-                        margin-bottom: 4px;
-                        color: #666;
-                    }
-                }
-
-                /* Hide header row on mobile since items are stacked */
-                &:first-child {
-                    display: none;
-                }
-            }
-
-            @media (max-width: 480px) {
-                padding: 8px;
-                gap: 6px;
-            }
-
-            /* Special styling for the add button row */
-            &.add-item-row {
-                @media (max-width: 768px) {
-                    flex-direction: row;
-                    justify-content: center;
-                    border: none;
-
-                    .search-item-cb,
-                    .search-item-content:not(:last-child) {
-                        display: none;
-                    }
-
-                    .search-item-content:last-child {
-                        flex: none;
-                        width: auto;
-
-                        .d-flex {
-                            justify-content: center !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .operator-container {
-        margin-top: 20px;
-
-        .operator-item {
-            display: flex;
-
-            @media (max-width: 768px) {
-                flex-direction: column;
-                gap: 10px !important;
-                align-items: flex-start;
-            }
-
-            @media (max-width: 420px) {
-                text-align: center;
-                align-items: center;
-            }
-
-            .operator-title {
-                width: 120px;
-
-                @media (max-width: 768px) {
-                    width: auto;
-                    margin-bottom: 5px;
-                }
-            }
-        }
-    }
-}
-
-
-.vector-collection-create-container {
-    .collection-input {
-        .invalid-input {
-            border-color: var(--bs-danger);
-        }
-
-        .collection-note {
-            display: flex;
-        }
-    
-        .valid {
-            justify-content: flex-end;
-        }
-    
-        .invalid {
-            justify-content: space-between;
-        }
-    }
-}
-
-.vector-index-container {
-    .index-layout-container {
-        display: grid;
-        gap: 1rem;
-        grid-template-columns: 1fr auto 1fr;
-        grid-template-areas: "existing arrows delete";
-        align-items: start;
-    }
-
-    .index-block:first-child {
-        grid-area: existing;
-    }
-
-    .index-block:last-child {
-        grid-area: delete;
-    }
-
-    .arrow-container {
-        grid-area: arrows;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 500px; /* Match the fixed height of the cards */
-    }
-
-    .arrow-buttons {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .index-block-card {
-        height: 500px;
-        display: flex;
-        flex-direction: column;
-
-        .card-body-scrollable {
-            flex: 1;
-            overflow-y: auto;
-            max-height: none;
-            padding: 5px;
-        }
-
-        .field-row {
-            display: flex;
-            gap: 1rem;
-        }
-
-        .field-item {
-            flex: 1;
-        }
-    }
-
-    .arrow-horizontal {
-        display: inline;
-    }
-
-    .arrow-vertical {
-        display: none;
-    }
-
-    @media (max-width: 991.98px) {
-        .index-layout-container {
-            grid-template-columns: 1fr;
-            grid-template-areas:
-                "existing"
-                "arrows"
-                "delete";
-        }
-
-        .arrow-container {
-            height: auto;
-            min-height: 60px;
-            padding: 1rem 0;
-        }
-
-        .arrow-buttons {
-            flex-direction: row;
-            justify-content: center;
-        }
-
-        .arrow-horizontal {
-            display: none;
-        }
-
-        .arrow-vertical {
-            display: inline;
-        }
-
-        .field-row {
-            flex-direction: column;
-            gap: 0;
-        }
-    }
-}
-
-
-.knowledge-upload-modal-container {
-    .doc-upload-body {
-        width: 100%;
-        height: 100%;
-
-        .gallery-item, .doc-drop-zone {
-            width: 100%;
-            min-height: 200px;
-        }
-
-        i {
-            font-size: 5em;
-        }
-
-        .doc-drop-icon {
-            text-align: center;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/pages/_projects.scss b/src/lib/scss/custom/pages/_projects.scss
deleted file mode 100644
index 055a828d..00000000
--- a/src/lib/scss/custom/pages/_projects.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*  */
-/* projects.scss */
-/*  */
-
-/* project list */
-
-.project-list-table {
-  border-collapse: separate;
-  border-spacing: 0 12px;
-
-  tr {
-    background-color: var(--#{$prefix}secondary-bg);
-  }
-}
diff --git a/src/lib/scss/custom/pages/_roles.scss b/src/lib/scss/custom/pages/_roles.scss
deleted file mode 100644
index 66f15914..00000000
--- a/src/lib/scss/custom/pages/_roles.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-.roles-table {
-    .role-plain-col {
-        width: 10%;
-        max-width: 100px;
-    }
-
-    .role-permission-col {
-        width: 40%;
-        max-width: 300px;
-    }
-
-    .role-detail {
-        padding: 2px 5px;
-        border-radius: 3px;
-        border-color: var(--#{$prefix}light) !important;
-        background-color: var(--#{$prefix}light) !important;
-        position: relative;
-
-        ul {
-            li {
-                margin: 2px 0px;
-            }
-        }
-
-        .wrappable {
-            white-space: wrap !important;
-        }
-
-        .basic-info {
-            margin: 15px 0px 0px 0px;
-            display: flex;
-            flex-wrap: wrap;
-
-            li {
-                flex: 0 0 50%;
-
-                .inline-edit {
-                    display: flex;
-                    gap: 3px;
-                }
-            }
-        }
-
-        .role-permission-container {
-            display: flex;
-            gap: 5px;
-
-            .permission-wrapper {
-                display: flex;
-                flex-direction: column;
-                gap: 3px;
-
-                .edit-wrapper {
-                    display: flex;
-                    gap: 3px;
-                }
-                
-                input[type="text"] {
-                    height: 30px;
-                    font-size: 12px;
-                }
-            }
-
-            
-            .list-add {
-                font-size: 18px;
-            }
-        }
-
-        .role-agent-container {
-            margin: 20px 0px;
-            padding: 0px 2rem;
-
-            .action-row-wrapper {
-                overflow-y: auto;
-                scrollbar-width: thin;
-                height: fit-content;
-                max-height: 300px;
-            }
-
-            .action-row {
-                display: flex;
-            }
-
-            .action-col {
-                padding: 3px 0px;
-                border-bottom: 1px dotted var(--bs-primary);
-
-                input[type='checkbox'] {
-                    outline: none !important;
-                    box-shadow: none !important;
-                }
-            }
-
-            .action-title {
-                .action-title-wrapper {
-                    display: flex;
-                    gap: 3px;
-                    justify-content: center;
-                    text-transform: capitalize;
-                    text-align: center;
-                    border-bottom: 2px solid var(--bs-primary);
-                }
-            }
-
-            .action-center {
-                display: flex;
-                justify-content: center;
-            }
-        }
-
-        .edit-btn {
-            display: flex;
-            justify-content: flex-end;
-            font-size: 16px;
-            margin-top: 3px;
-            margin-right: 5px;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_timeline.scss b/src/lib/scss/custom/pages/_timeline.scss
deleted file mode 100644
index 97f34f39..00000000
--- a/src/lib/scss/custom/pages/_timeline.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/*  */
-/* timeline.scss */
-/*  */
-
-/************** Horizontal timeline **************/ 
-
-
-.hori-timeline{
-    .events{
-        .event-list{
-            text-align: center;
-            display: block;
-
-            .event-down-icon{
-                position: relative;
-                &::before{
-                    content: "";
-                    position: absolute;
-                    width: 100%;
-                    top: 16px;
-                    left: 0;
-                    right: 0;
-                    border-bottom: 3px dashed var(--#{$prefix}border-color);
-                }
-                .down-arrow-icon{
-                    position: relative;
-                    background-color: var(--#{$prefix}secondary-bg);
-                    padding: 4px;
-                }
-            }
-
-            &:hover{
-                .down-arrow-icon{
-                    animation: fade-down 1.5s infinite linear;
-                }
-            }
-
-            &.active{
-                .down-arrow-icon{
-                    animation: fade-down 1.5s infinite linear;
-                    &:before {
-                        content: "\ec4c";
-                    }
-                }
-            }
-        }
-    }
-}
-
-
-/************** vertical timeline **************/ 
-
-.verti-timeline{
-    border-left: 3px dashed var(--#{$prefix}border-color);
-    margin: 0 10px;
-    .event-list{
-        position: relative;
-        padding: 0px 0px 30px 20px;
-
-        .event-timeline-dot{
-            position: absolute;
-            left: -9px;
-            top: 0px;
-            z-index: 9;
-            font-size: 16px;
-        }
-        .event-content{
-            position: relative;
-            border: 2px solid var(--#{$prefix}border-color);
-            border-radius: 7px;
-        }
-
-        &.active{
-            .event-timeline-dot{
-                color: $primary;
-            }
-        }
-
-        &:last-child{
-            padding-bottom: 0px;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/pages/_users.scss b/src/lib/scss/custom/pages/_users.scss
deleted file mode 100644
index 9fe8e649..00000000
--- a/src/lib/scss/custom/pages/_users.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-.users-table {
-    .user-plain-col {
-        width: 10%;
-        max-width: 100px;
-    }
-
-    .user-permission-col {
-        width: 20%;
-        max-width: 300px;
-    }
-
-    .user-detail {
-        padding: 2px 5px;
-        border-radius: 3px;
-        border-color: var(--#{$prefix}light) !important;
-        background-color: var(--#{$prefix}light) !important;
-        position: relative;
-
-        ul {
-            li {
-                margin: 2px 0px;
-            }
-        }
-
-        .wrappable {
-            white-space: wrap !important;
-        }
-
-        .basic-info {
-            margin: 15px 0px 0px 0px;
-            display: flex;
-            flex-wrap: wrap;
-
-            li {
-                flex: 0 0 50%;
-
-                .inline-edit {
-                    display: flex;
-                    gap: 3px;
-                }
-            }
-        }
-
-        .role-wrapper {
-            .role-select {
-                height: 30px;
-                font-size: 12px;
-                padding: 0.3rem 1rem;
-            }
-        }
-
-        .user-permission-container {
-            display: flex;
-            gap: 5px;
-
-            .permission-wrapper {
-                display: flex;
-                flex-direction: column;
-                gap: 3px;
-
-                .edit-wrapper {
-                    display: flex;
-                    gap: 3px;
-                }
-                
-                input[type="text"] {
-                    height: 30px;
-                    font-size: 12px;
-                }
-            }
-
-            
-            .list-add {
-                font-size: 18px;
-            }
-        }
-
-        .user-agent-container {
-            margin: 20px 0px;
-            padding: 0px 2rem;
-
-            .action-row-wrapper {
-                overflow-y: auto;
-                scrollbar-width: thin;
-                height: fit-content;
-                max-height: 300px;
-            }
-
-            .action-row {
-                display: flex;
-            }
-
-            .action-col {
-                padding: 3px 0px;
-                border-bottom: 1px dotted var(--bs-primary);
-
-                input[type='checkbox'] {
-                    outline: none !important;
-                    box-shadow: none !important;
-                }
-            }
-
-            .action-title {
-                .action-title-wrapper {
-                    display: flex;
-                    gap: 3px;
-                    justify-content: center;
-                    text-transform: capitalize;
-                    text-align: center;
-                    border-bottom: 2px solid var(--bs-primary);
-                }
-            }
-
-            .action-center {
-                display: flex;
-                justify-content: center;
-            }
-        }
-
-        .edit-btn {
-            display: flex;
-            justify-content: flex-end;
-            font-size: 16px;
-            margin-top: 3px;
-            margin-right: 5px;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/plugins/_apexcharts.scss b/src/lib/scss/custom/plugins/_apexcharts.scss
deleted file mode 100644
index 98d4b103..00000000
--- a/src/lib/scss/custom/plugins/_apexcharts.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/*  */
-/* apexcharts.scss */
-/*  */
-.apex-charts {
-    min-height: 10px !important;
-
-    text {
-        font-family: $font-family-base !important;
-        fill: var(--#{$prefix}gray-500);
-    }
-
-    .apexcharts-canvas {
-        margin: 0 auto;
-    }
-}
-
-.apexcharts-tooltip-title,
-.apexcharts-tooltip-text {
-    font-family: $font-family-base !important;
-}
-
-.apexcharts-legend-series {
-    font-weight: $font-weight-medium;
-}
-
-.apexcharts-gridline {
-    pointer-events: none;
-    stroke: $apex-grid-color;
-}
-
-.apexcharts-legend-text {
-    color: #74788d !important;
-    font-family: $font-family-base !important;
-    font-size: 13px !important;
-}
-
-.apexcharts-pie-label {
-    fill: $white !important;
-}
-
-.apexcharts-yaxis,
-.apexcharts-xaxis {
-    text {
-        font-family: $font-family-base !important;
-        fill: var(--#{$prefix}secondary-color);
-    }
-}
-
-.apexcharts-gridline {
-    stroke: var(--#{$prefix}border-color);
-}
-
-.apexcharts-radialbar-track.apexcharts-track {
-    path {
-        stroke: var(--#{$prefix}border-color);
-    }
-}
-
-.apexcharts-tooltip {
-    background-color: var(--#{$prefix}secondary-bg) !important;
-    border: 1px solid var(--#{$prefix}border-color) !important;
-
-    .apexcharts-tooltip-title {
-        background-color: var(--#{$prefix}border-color) !important;
-        border-bottom: 1px solid var(--#{$prefix}border-color) !important;
-    }
-}
-
-.apexcharts-pie-area {
-    stroke: var(--#{$prefix}secondary-bg);
-}
-
-.apexcharts-grid-borders {
-    line {
-        stroke: var(--#{$prefix}border-color);
-    }
-}
-
-.apexcharts-pie-label {
-    fill: var(--#{$prefix}white) !important;
-}
-
-.apexcharts-xaxis-tick {
-    stroke: var(--#{$prefix}border-color);
-}
diff --git a/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss b/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss
deleted file mode 100644
index 0bd8ae35..00000000
--- a/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*  */
-/* Bootstrap touchspin */
-/*  */
-
-.bootstrap-touchspin {
-  &.input-group {
-    &>.input-group-prepend {
-
-      &>.btn,
-      &>.input-group-text {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-
-  &.input-group {
-    &>.input-group-append {
-
-      &>.btn,
-      &>.input-group-text {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_calendar-full.scss b/src/lib/scss/custom/plugins/_calendar-full.scss
deleted file mode 100644
index 56392d5a..00000000
--- a/src/lib/scss/custom/plugins/_calendar-full.scss
+++ /dev/null
@@ -1,245 +0,0 @@
-/* ==============
-  Calendar
-===================*/
-
-
-.fc td,
-.fc th {
-  border: $table-border-width solid $table-border-color;
-}
-
-
-
-.fc {
-  .fc-toolbar {
-    h2 {
-      font-size: 16px;
-      line-height: 30px;
-      text-transform: uppercase;
-    }
-
-    @media (max-width: 767.98px) {
-
-      .fc-left,
-      .fc-right,
-      .fc-center {
-        float: none;
-        display: block;
-        text-align: center;
-        clear: both;
-        margin: 10px 0;
-      }
-
-      >*>* {
-        float: none;
-      }
-
-      .fc-today-button {
-        display: none;
-      }
-    }
-
-    .btn {
-      text-transform: capitalize;
-    }
-
-  }
-
-  .fc-col-header-cell-cushion {
-    color: var(--#{$prefix}body-color);
-  }
-
-  .fc-daygrid-day-number {
-    color: var(--#{$prefix}body-color);
-  }
-}
-
-.fc-daygrid-event-dot {
-  display: none;
-}
-
-.fc-prev-button,
-.fc-next-button {
-  position: relative;
-  padding: 6px 8px !important;
-}
-
-
-.fc-toolbar-chunk {
-  .fc-button-group {
-    .fc-button {
-      background-color: var(--#{$prefix}primary);
-      border-color: var(--#{$prefix}primary);
-      ;
-      box-shadow: none;
-
-      &:hover,
-      &.active {
-        color: $white;
-        background-color: var(--#{$prefix}primary);
-        border-color: var(--#{$prefix}primary);
-      }
-    }
-  }
-
-  .fc-today-button {
-    background-color: var(--#{$prefix}primary) !important;
-    border-color: var(--#{$prefix}primary) !important;
-  }
-}
-
-.fc {
-
-  .fc-button-primary:not(:disabled).fc-button-active,
-  .fc-button-primary:not(:disabled):active {
-    background-color: var(--#{$prefix}primary) !important;
-    border-color: var(--#{$prefix}primary) !important;
-    color: $white !important;
-  }
-}
-
-.fc-toolbar {
-  @media (max-width: 575.98px) {
-    flex-direction: column;
-    gap: 16px;
-  }
-}
-
-.fc {
-  th.fc-widget-header {
-    background: $gray-300;
-    color: $gray-700;
-    line-height: 20px;
-    padding: 10px 0;
-    text-transform: uppercase;
-    font-weight: $font-weight-bold;
-  }
-}
-
-.fc-unthemed {
-
-  .fc-content,
-  .fc-divider,
-  .fc-list-heading td,
-  .fc-list-view,
-  .fc-popover,
-  .fc-row,
-  tbody,
-  td,
-  th,
-  thead {
-    border-color: $gray-300;
-  }
-
-  td.fc-today {
-    background: lighten($gray-200, 2%);
-  }
-}
-
-.fc-button {
-  background: var(--#{$prefix}secondary-bg);
-  border-color: var(--#{$prefix}border-color);
-  color: $gray-700;
-  text-transform: capitalize;
-  box-shadow: none;
-  padding: 6px 12px !important;
-  height: auto !important;
-}
-
-.fc-state-down,
-.fc-state-active,
-.fc-state-disabled {
-  background-color: $primary;
-  color: $white;
-  text-shadow: none;
-}
-
-.fc-event {
-  border-radius: 2px;
-  border: none;
-  cursor: move;
-  font-size: 0.8125rem;
-  margin: 5px 7px;
-  padding: 5px 5px;
-  text-align: center;
-  color: $white;
-
-  &.bg-dark {
-    .fc-event-time {
-      color: var(--#{$prefix}secondary-bg) !important;
-    }
-    background-color: var(--#{$prefix}secondary-color) !important;
-    .fc-event-title {
-      color: var(--#{$prefix}secondary-bg) !important;
-    }
-  }
-}
-
-.fc-event,
-.fc-event-dot {
-  background-color: $primary;
-}
-
-.fc-event .fc-content {
-  color: $white;
-}
-
-#external-events {
-  .external-event {
-    text-align: left;
-    padding: 8px 16px;
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
-
-.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.bg-dark {
-  .fc-content {
-    color: $light;
-  }
-}
-
-
-/* RTL */
-[dir="rtl"] {
-  .fc-header-toolbar {
-    direction: ltr !important;
-  }
-
-  .fc-toolbar>*>:not(:first-child) {
-    margin-left: .75em;
-  }
-}
-
-.fc-theme-standard .fc-scrollgrid {
-  border-color: var(--#{$prefix}border-color);
-}
-
-.fc .fc-daygrid-week-number {
-  background-color: var(--#{$prefix}body-bg);
-  color: var(--#{$prefix}body-color);
-}
-
-.fc .fc-daygrid-more-link {
-  padding: 5px;
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.fc .fc-daygrid-more-link:hover {
-  background-color: rgba(var(--#{$prefix}primary-rgb), 0.1);
-}
-
-.fc .fc-popover-header {
-  padding: 6px 12px;
-}
-
-.fc-theme-standard .fc-popover-header {
-  background: var(--#{$prefix}body-bg);
-}
-
-.fc-theme-standard .fc-popover {
-    background: var(--#{$prefix}secondary-bg);
-    border: 1px solid var(--#{$prefix}border-color);
-}
diff --git a/src/lib/scss/custom/plugins/_calendar.scss b/src/lib/scss/custom/plugins/_calendar.scss
deleted file mode 100644
index b8f3a4d6..00000000
--- a/src/lib/scss/custom/plugins/_calendar.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-/* ==============
-  Calendar
-===================*/
-
-.lnb-calendars-item {
-    display: inline-block;
-    margin-right: 7px
-        /*rtl: margin-left: 7px*/
-    ;
-}
-
-input[type="checkbox"].tui-full-calendar-checkbox-round+span {
-    margin-right: 4px
-        /*rtl: 0*/
-    ;
-    margin-left: 0
-        /*rtl: 4px*/
-    ;
-}
-
-.tui-full-calendar-layout,
-.tui-full-calendar-timegrid-timezone {
-    background-color: var(--#{$prefix}secondary-bg) !important;
-}
-
-.tui-full-calendar-dayname-container,
-.tui-full-calendar-left,
-.tui-full-calendar-splitter,
-.tui-full-calendar-time-date,
-.tui-full-calendar-weekday-grid-line,
-.tui-full-calendar-timegrid-timezone,
-.tui-full-calendar-timegrid-gridline {
-    border-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-weekday-exceed-in-week {
-    text-align: center;
-    width: 30px;
-    height: 30px;
-    line-height: 28px;
-    border-radius: 4px;
-    background-color: var(--#{$prefix}custom-white);
-    color: var(--#{$prefix}body-color);
-    border-color: var(--#{$prefix}border-color);
-}
-
-.tui-full-calendar-timegrid-hour {
-    color: var(--#{$prefix}body-color) !important;
-}
-
-.tui-full-calendar-weekday-schedule-title {
-    color: var(--#{$prefix}emphasis-color) !important;
-
-    .tui-full-calendar-time-schedule {
-        font-weight: $font-weight-semibold;
-    }
-}
-
-.tui-full-calendar-popup-container {
-    background-color: var(--#{$prefix}custom-white) !important;
-    border-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-dropdown {
-    &:hover {
-        .tui-full-calendar-dropdown-button {
-            border-color: var(--#{$prefix}border-color)
-        }
-    }
-}
-
-.tui-full-calendar-popup-section-item {
-    &:hover, &:focus {
-        border-color: var(--#{$prefix}border-color);
-    }
-}
-
-.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-fill {
-    border-top-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-fill {
-    border-bottom-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-borde {
-    border-bottom-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-button {
-    color: $input-color;
-    background-color: $input-bg  !important;
-    border-color: var(--#{$prefix}border-color);
-}
-
-.tui-full-calendar-popup-section-item {
-    border-color: var(--#{$prefix}border-color);
-}
-
-.tui-full-calendar-month-dayname,
-.tui-full-calendar-weekday-border {
-    border-top-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-arrow-top .tui-full-calendar-popup-arrow-border {
-    border-bottom-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-dropdown-menu {
-    border-color: var(--#{$prefix}border-color) !important;
-}
-
-.tui-full-calendar-dropdown-menu-item,
-.tui-full-calendar-dropdown-menu {
-    background-color: $input-bg  !important;
-}
-
-.tui-full-calendar-arrow-bottom .tui-full-calendar-popup-arrow-border {
-    border-top-color: var(--#{$prefix}border-color);
-}
-
-.tui-full-calendar-content {
-    background-color: $input-bg  !important;
-    color: $input-color  !important;
-}
-
-.tui-full-calendar-confirm {
-    background-color: $danger  !important;
-    color: $white  !important;
-
-    &:hover {
-        background-color: $red-600  !important;
-        color: $white  !important;
-    }
-}
-
-.tui-full-calendar-month-dayname-item {
-    span {
-        color: var(--#{$prefix}emphasis-color) !important;
-    }
-}
-
-.tui-full-calendar-weekday-grid-line {
-    &.tui-full-calendar-near-month-day {
-        &.tui-full-calendar-extra-date {
-            .tui-full-calendar-weekday-grid-header {
-                .tui-full-calendar-weekday-grid-date {
-                    color: var(--#{$prefix}secondary-color) !important;
-                }
-            }
-        }
-    }
-}
-
-
-.tui-full-calendar-weekday-grid-line {
-    &.tui-full-calendar-near-month-day {
-        .tui-full-calendar-weekday-grid-header {
-            .tui-full-calendar-weekday-grid-date {
-                color: var(--#{$prefix}emphasis-color) !important;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/plugins/_colorpicker.scss b/src/lib/scss/custom/plugins/_colorpicker.scss
deleted file mode 100644
index 5707199e..00000000
--- a/src/lib/scss/custom/plugins/_colorpicker.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-
-/*  */
-/* colorpicker.scss */
-/*  */
-
-.sp-container{
-  background-color: $dropdown-bg;
-  button{
-    padding: .25rem .5rem;
-      font-size: .71094rem;
-      border-radius: .2rem;
-      font-weight: 400;
-      color: $dark;
-  
-      &.sp-palette-toggle{
-        background-color: $light;
-      }
-      
-      &.sp-choose{
-        background-color: $success;
-        margin-left: 5px;
-        margin-right: 0;
-      }
-  }
-}
-
-.sp-palette-container{
-  border-right: 1px solid $border-color;
-}
-
-.sp-input{
-  background-color: $input-bg;
-  border-color: $input-border-color !important;
-  color: $input-color;
-  &:focus{
-    outline: none;
-  }
-}
-
-
-[dir="rtl"]{
-
-  .sp-alpha{
-    direction: ltr;
-  }
-
-  .sp-original-input-container {
-    .sp-add-on{
-      border-top-right-radius: 0!important;
-      border-bottom-right-radius: 0!important;
-      border-top-left-radius: 4px!important;
-      border-bottom-left-radius: 4px!important
-    }
-  } 
-
-  input.spectrum.with-add-on{
-    border: 1px solid $input-border-color;
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-top-right-radius: $input-border-radius;
-    border-bottom-right-radius: $input-border-radius;
-
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_custom-scrollbar.scss b/src/lib/scss/custom/plugins/_custom-scrollbar.scss
deleted file mode 100644
index 956a6c2f..00000000
--- a/src/lib/scss/custom/plugins/_custom-scrollbar.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-[data-simplebar] {
-  position: relative;
-  flex-direction: column;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-content: flex-start;
-  align-items: flex-start;
-}
-
-.simplebar-wrapper {
-  overflow: hidden;
-  width: inherit;
-  height: inherit;
-  max-width: inherit;
-  max-height: inherit;
-}
-
-.simplebar-mask {
-  direction: inherit;
-  position: absolute;
-  overflow: hidden;
-  padding: 0;
-  margin: 0;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: auto !important;
-  height: auto !important;
-  z-index: 0;
-}
-
-.simplebar-offset {
-  direction: inherit !important;
-  box-sizing: inherit !important;
-  resize: none !important;
-  position: absolute;
-  top: 0;
-  left: 0 !important;
-  bottom: 0;
-  right: 0 !important;
-  padding: 0;
-  margin: 0;
-  -webkit-overflow-scrolling: touch;
-}
-
-.simplebar-content-wrapper {
-  direction: inherit;
-  box-sizing: border-box !important;
-  position: relative;
-  display: block;
-  height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
-  width: auto;
-  visibility: visible;
-  overflow: auto; /* Scroll on this element otherwise element can't have a padding applied properly */
-  max-width: 100%; /* Not required for horizontal scroll to trigger */
-  max-height: 100%; /* Needed for vertical scroll to trigger */
-  scrollbar-width: none;
-  padding: 0px !important;
-}
-
-.simplebar-content-wrapper::-webkit-scrollbar,
-.simplebar-hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.simplebar-content:before,
-.simplebar-content:after {
-  content: ' ';
-  display: table;
-}
-
-.simplebar-placeholder {
-  max-height: 100%;
-  max-width: 100%;
-  width: 100%;
-  pointer-events: none;
-}
-
-.simplebar-height-auto-observer-wrapper {
-  box-sizing: inherit !important;
-  height: 100%;
-  width: 100%;
-  max-width: 1px;
-  position: relative;
-  float: left;
-  max-height: 1px;
-  overflow: hidden;
-  z-index: -1;
-  padding: 0;
-  margin: 0;
-  pointer-events: none;
-  flex-grow: inherit;
-  flex-shrink: 0;
-  flex-basis: 0;
-}
-
-.simplebar-height-auto-observer {
-  box-sizing: inherit;
-  display: block;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 1000%;
-  width: 1000%;
-  min-height: 1px;
-  min-width: 1px;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.simplebar-track {
-  z-index: 1;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-[data-simplebar].simplebar-dragging .simplebar-content {
-  pointer-events: none;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-[data-simplebar].simplebar-dragging .simplebar-track {
-  pointer-events: all;
-}
-
-.simplebar-scrollbar {
-  position: absolute;
-  right: 2px;
-  width: 4px;
-  min-height: 10px;
-}
-
-.simplebar-scrollbar:before {
-  position: absolute;
-  content: '';
-  background: #a2adb7;
-  border-radius: 7px;
-  left: 0;
-  right: 0;
-  opacity: 0;
-  transition: opacity 0.2s linear;
-}
-
-.simplebar-scrollbar.simplebar-visible:before {
-  /* When hovered, remove all transitions from drag handle */
-  opacity: 0.5;
-  transition: opacity 0s linear;
-}
-
-.simplebar-track.simplebar-vertical {
-  top: 0;
-  width: 11px;
-}
-
-.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
-  top: 2px;
-  bottom: 2px;
-}
-
-.simplebar-track.simplebar-horizontal {
-  left: 0;
-  height: 11px;
-}
-
-.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
-  height: 100%;
-  left: 2px;
-  right: 2px;
-}
-
-.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
-  right: auto;
-  left: 0;
-  top: 2px;
-  height: 7px;
-  min-height: 0;
-  min-width: 10px;
-  width: auto;
-}
-
-/* Rtl support */
-[data-simplebar-direction='rtl'] .simplebar-track.simplebar-vertical {
-  right: auto;
-  left: 0;
-}
-
-.hs-dummy-scrollbar-size {
-  direction: rtl;
-  position: fixed;
-  opacity: 0;
-  visibility: hidden;
-  height: 500px;
-  width: 500px;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-
-.simplebar-hide-scrollbar {
-  position: fixed;
-  left: 0;
-  visibility: hidden;
-  overflow-y: scroll;
-  scrollbar-width: none;
-}
-
-.custom-scroll {
-  height: 100%;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/plugins/_datatable.scss b/src/lib/scss/custom/plugins/_datatable.scss
deleted file mode 100644
index 6917ca83..00000000
--- a/src/lib/scss/custom/plugins/_datatable.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/* 
-Datatable
-*/
-
-/* datatable */
-
-div.dataTables_wrapper {
-  div.dataTables_filter {
-    text-align: right;
-
-    @media (max-width: 767px) {
-      text-align: center;
-    }
-
-
-    input {
-      margin-left: 0.5em;
-      margin-right: 0;
-    }
-  }
-}
-
-.table,
-table {
-  &.dataTable {
-    border-collapse: collapse !important;
-    &.dtr-inline.collapsed>tbody>tr>td {
-      position: relative;
-
-      &.dtr-control {
-        padding-left: 30px;
-
-        &:before {
-          top: 50%;
-          left: 5px;
-          height: 14px;
-          width: 14px;
-          margin-top: -9px;
-          display: block;
-          position: absolute;
-          color: $white;
-          border: 2px solid $white;
-          border-radius: 14px;
-          box-sizing: content-box;
-          text-align: center;
-          text-indent: 0 !important;
-          line-height: 14px;
-          content: '+';
-          background-color: $primary;
-        }
-      }
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_datepicker.scss b/src/lib/scss/custom/plugins/_datepicker.scss
deleted file mode 100644
index 95f6632a..00000000
--- a/src/lib/scss/custom/plugins/_datepicker.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-
-/*  */
-/* Datepicker */
-/*  */
-
-.datepicker {
-  border: 1px solid var(--#{$prefix}border-color);
-  padding: 8px;
-  z-index: 999 !important;
-  
-
-  table{
-    tr{
-      th{
-        font-weight: 500;
-      }
-      td{
-        &.active, &.active:hover, .active.disabled, &.active.disabled:hover,
-        &.today,  &.today:hover, &.today.disabled, &.today.disabled:hover, 
-        &.selected, &.selected:hover, &.selected.disabled, &.selected.disabled:hover,
-        span.active.active, span.active:hover.active{
-          background-color: $primary !important;
-          background-image: none;
-          box-shadow: none;
-          color: $white !important;
-        }
-
-        &.day.focused,
-        &.day:hover,
-        span.focused,
-        span:hover {
-            background: var(--#{$prefix}light);
-        }
-
-        &.new,
-        &.old,
-        span.new,
-        span.old {
-            color: var(--#{$prefix}gray-500);
-            opacity: 0.6;
-        }
-
-        &.range, &.range.disabled, &.range.disabled:hover, &.range:hover{
-            background-color: var(--#{$prefix}tertiary-bg);
-        }
-      }
-    }
-  }
-}
-
-.table-condensed{
-  >thead>tr>th, >tbody>tr>td {
-    padding: 7px;
-  }
-}
-
-.bootstrap-datepicker-inline{
-  .datepicker-inline{
-    width: auto !important;
-    display: inline-block;
-  }
-}
-
-
-/* DATEPICKER */
-
-.datepicker-container{
-  border: 1px solid var(--#{$prefix}border-color);
-  box-shadow: none;
-  background-color: $dropdown-bg;
-
-  &.datepicker-inline{
-    width: 212px;
-  }
-}
-
-.datepicker{
-  color: var(--#{$prefix}secondary-color);
-    .datepicker-switch:hover,.next:hover,.prev:hover,  tfoot tr th:hover {
-      background: var(--#{$prefix}light);
-    } 
-  }
-
-
-.datepicker-panel{
-  
-  >ul{
-    >li{
-      background-color: $dropdown-bg;
-      border-radius: 4px;
-
-      &.picked, &.picked:hover{
-        background-color: rgba($primary, 0.25);
-        color: $primary;
-      }
-
-      &.highlighted, &.highlighted:hover, &:hover{
-        background-color: $primary;
-        color: $white;
-      }
-
-      
-      &.muted, &.muted:hover{
-        color: var(--#{$prefix}gray-500);
-        opacity: 0.6;
-      }
-    }
-
-    
-
-    &[data-view=week]{
-      >li{
-        font-weight: $font-weight-medium;
-      }
-
-      >li, >li:hover{
-        background-color: $dropdown-bg;
-      }
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_dragula.scss b/src/lib/scss/custom/plugins/_dragula.scss
deleted file mode 100644
index 5ff50152..00000000
--- a/src/lib/scss/custom/plugins/_dragula.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-/* ==============
-  Druafula
-===================*/
-
-
-.task-box{
-  
-  border: 1px solid var(--#{$prefix}border-color);
-}
-
-.gu-transit {
-    border: 1px dashed var(--#{$prefix}border-color) !important;
-    background-color: var(--#{$prefix}gray-200) !important;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/plugins/_echarts.scss b/src/lib/scss/custom/plugins/_echarts.scss
deleted file mode 100644
index dcf416ff..00000000
--- a/src/lib/scss/custom/plugins/_echarts.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-
-/*  */
-/* echarts.scss */
-/*  */
-
-.e-charts{
-    height: 350px;
-}
diff --git a/src/lib/scss/custom/plugins/_flot.scss b/src/lib/scss/custom/plugins/_flot.scss
deleted file mode 100644
index e556bb75..00000000
--- a/src/lib/scss/custom/plugins/_flot.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-/* Flot chart */
-.flot-charts-height {
-  height: 320px;
-}
-
-.flotTip {
-  padding: 8px 12px;
-  background-color: rgba($dark, 0.9);
-  z-index: 100;
-  color: $gray-100;
-  box-shadow: $box-shadow;
-  border-radius: 4px;
-}
-
-.legendLabel{
-  color: $gray-500;
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/plugins/_form-editors.scss b/src/lib/scss/custom/plugins/_form-editors.scss
deleted file mode 100644
index d57c4ceb..00000000
--- a/src/lib/scss/custom/plugins/_form-editors.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/*  */
-/* Form editors.scss */
-/*  */
-
-/* Tinymce */
-
-form {
-    .tox-tinymce {
-        border: 1px solid $border-color-translucent;
-    }
-
-    .tox {
-
-        :not(svg):not(rect) {
-            color: $body-color;
-        }
-
-        &:not(.tox-tinymce-inline) {
-            .tox-editor-header {
-                box-shadow: var(--#{$prefix}box-shadow);
-            }
-        }
-
-        .tox-mbtn {
-            color: $body-secondary-color;
-
-            &:hover:not(:disabled):not(.tox-mbtn--active) {
-                background-color: $body-tertiary-bg;
-            }
-        }
-
-        .tox-tbtn {
-
-            &:hover {
-                color: $body-tertiary-color;
-                background-color: $body-tertiary-bg;
-            }
-        }
-
-        .tox-tbtn--disabled svg,
-        .tox-tbtn--disabled:hover svg,
-        .tox-tbtn:disabled svg,
-        .tox-tbtn:disabled:hover svg {
-            fill: $body-tertiary-color;
-        }
-
-        .tox-tbtn--bespoke {
-            background-color: $body-tertiary-bg;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/plugins/_form-upload.scss b/src/lib/scss/custom/plugins/_form-upload.scss
deleted file mode 100644
index 56b20631..00000000
--- a/src/lib/scss/custom/plugins/_form-upload.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-
-/*  */
-/* Form-Upload */
-/*  */
-
-/* Dropzone */
-.dropzone {
-  min-height: 230px;
-  border: 2px dashed var(--#{$prefix}border-color) !important;
-  background: var(--#{$prefix}secondary-bg) !important;
-  border-radius: 6px;
-
-  .dz-message {
-    font-size: 24px;
-    width: 100%;
-    margin: 3rem 0;
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_form-wizard.scss b/src/lib/scss/custom/plugins/_form-wizard.scss
deleted file mode 100644
index 1ca19167..00000000
--- a/src/lib/scss/custom/plugins/_form-wizard.scss
+++ /dev/null
@@ -1,171 +0,0 @@
-/*  */
-/* Form Wizard */
-/*  */
-
-
-.form-wizard-wrapper {
-  label {
-    font-size: 14px;
-    text-align: right;
-  }
-}
-
-.wizard{
-
-  /* step */
-  .steps{
-    >ul{
-      display: flex;
-      flex-wrap: wrap;
-      padding-left: 0;
-      margin-bottom: 0;
-      list-style: none;
-
-      @media (max-width: 1199.98px) {
-        flex-direction: column;
-      }
-
-      > a, > li{
-        flex-basis: 0;
-        flex-grow: 1;
-      }
-
-      >li{
-        width: 100%;
-
-        a{
-          display: block;
-          padding: .5rem 1rem;
-          color: var(--#{$prefix}secondary-color);
-          font-weight: $font-weight-medium;
-
-          background-color: rgba($primary, 0.1);
-        }
-      }
-
-      .current-info{
-        position: absolute;
-        left: -999em;
-    }
-
-    
-    }
-
-    .number {
-      display: inline-block;
-      width: 38px;
-      height: 38px;
-      line-height: 34px;
-      border: 2px solid $primary;
-      color: $primary;
-      text-align: center;
-      border-radius: 50%;
-      margin-right: .5rem;
-    }
-
-    .current {
-      a, a:active, a:hover {
-        background-color: rgba($primary, 0.2);
-        color: var(--#{$prefix}emphasis-color);
-        .number {
-          background-color: $primary;
-          color: $white;
-        }
-      }
-    }
-  }
-
-  /* content */
-  >.content {
-    background-color: transparent;
-    padding: 14px;
-    margin-top: 0;
-    border-radius: 0;
-    min-height: 150px;
-    > .title{
-      position: absolute;
-      left: -999em;
-    }
-    >.body {
-      width: 100%;
-      height: 100%;
-      padding: 14px 0 0;
-      position: static
-    }
-  }
-
-  /* actions */
-
-  >.actions {
-    position: relative;
-    display: block;
-    text-align: right;
-    width: 100%;
-    > ul {
-        display: block;
-        text-align: right;
-        padding-left: 0;
-          > li{
-            display: inline-block;
-            margin: 0 0.5em;
-
-          }
-      }
-      a, a:active, a:hover {
-        background-color: $primary;
-        border-radius: 4px;
-        padding: 8px 15px;
-        color: $white;
-      }
-
-      .disabled {
-        a, a:active, a:hover {
-          opacity: .65;
-          background-color: $primary;
-          color: $white;
-          cursor: not-allowed;
-        }
-      }
-  }
-
-  /* verticl wixard */
-  &.vertical-wizard{
-    display: flex;
-    flex-wrap: wrap;
-
-    /* step */
-    .steps{
-      >ul{
-        flex-direction: column;
-
-        >li{
-            width: 100% !important;
-        }
-        
-      }
-    }
-
-    .steps, .content, .actions{
-      width: 100%;
-    }
-
-    .steps{
-        @media (min-width: 1200px) {
-          width: 25%;
-      }
-    }
-
-      .content{
-        padding: 24px;
-        @media (min-width: 1200px) {
-          width: 75%;
-          padding: 12px 24px;
-      }
-
-      >.body{
-        padding: 0;
-      }
-      
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_google-map.scss b/src/lib/scss/custom/plugins/_google-map.scss
deleted file mode 100644
index da3257be..00000000
--- a/src/lib/scss/custom/plugins/_google-map.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-
-/*  */
-/* Google map */
-/*  */
-
-.gmaps, .gmaps-panaroma {
-  height: 300px !important;
-  background: $gray-100;
-  border-radius: 3px;
-}
-
-.gmaps-overlay {
-  display: block;
-  text-align: center;
-  color: $white;
-  font-size: 16px;
-  line-height: 40px;
-  background: $primary;
-  border-radius: 4px;
-  padding: 10px 20px;
-}
-
-.gmaps-overlay_arrow {
-  left: 50%;
-  margin-left: -16px;
-  width: 0;
-  height: 0;
-  position: absolute;
-  &.above {
-    bottom: -15px;
-    border-left: 16px solid transparent;
-    border-right: 16px solid transparent;
-    border-top: 16px solid $primary;
-  }
-  &.below {
-    top: -15px;
-    border-left: 16px solid transparent;
-    border-right: 16px solid transparent;
-    border-bottom: 16px solid $primary;
-  }
-  
-}
diff --git a/src/lib/scss/custom/plugins/_leaflet-maps.scss b/src/lib/scss/custom/plugins/_leaflet-maps.scss
deleted file mode 100644
index e7c01c11..00000000
--- a/src/lib/scss/custom/plugins/_leaflet-maps.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*  */
-/* leaflet-maps.scss */
-/*  */
-
-.leaflet-map {
-    height: 300px;
-    &.leaflet-container{
-        z-index: 99;
-    }
-}
diff --git a/src/lib/scss/custom/plugins/_parsley.scss b/src/lib/scss/custom/plugins/_parsley.scss
deleted file mode 100644
index 71737c6c..00000000
--- a/src/lib/scss/custom/plugins/_parsley.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-
-/*  */
-/* Parsley */
-/*  */
-
-.error {
-  color: $danger;
-}
-
-.parsley-error {
-  border-color: $danger;
-}
-
-.parsley-errors-list {
-  display: none;
-  margin: 0;
-  padding: 0;
-  &.filled {
-    display: block;
-  }
-  > li {
-    font-size: 12px;
-    list-style: none;
-    color: $danger;
-    margin-top: 5px;
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_range-slider.scss b/src/lib/scss/custom/plugins/_range-slider.scss
deleted file mode 100644
index 8fa79c83..00000000
--- a/src/lib/scss/custom/plugins/_range-slider.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-/*  */
-/* Range slider */
-/*  */
-
-.irs {
-  font-family: $font-family-base;
-}
-
-.irs--square {
-  cursor: pointer;
-
-  .irs-bar,
-  .irs-to,
-  .irs-from,
-  .irs-single {
-    background: $primary  !important;
-    font-size: 11px;
-  }
-
-  .irs-to,
-  .irs-from,
-  .irs-single {
-    &:before {
-      border-top-color: $primary;
-    }
-  }
-
-  .irs-line {
-    background: var(--#{$prefix}tertiary-bg);
-    border-color: var(--#{$prefix}tertiary-bg);
-  }
-
-  .irs-grid-text {
-    font-size: 11px;
-    color: var(--#{$prefix}secondary-color);
-  }
-
-  .irs-min,
-  .irs-max {
-    color: var(--#{$prefix}secondary-color);
-    background: var(--#{$prefix}tertiary-bg);
-    font-size: 11px;
-  }
-
-  .irs-handle {
-    border: 2px solid $primary;
-    width: 12px;
-    height: 12px;
-    top: 26px;
-    background-color: var(--#{$prefix}secondary-bg) !important;
-    cursor: pointer;
-
-    &:active {
-      cursor: pointer;
-    }
-  }
-
-  .irs-grid-pol {
-    background-color: var(--#{$prefix}secondary-color);
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_rating.scss b/src/lib/scss/custom/plugins/_rating.scss
deleted file mode 100644
index 60e93c11..00000000
--- a/src/lib/scss/custom/plugins/_rating.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-
-/*  */
-/* Rating */
-/*  */
-
-.symbol{
-  border-color: var(--#{$prefix}secondary-bg);
-}
-
-.rating-symbol-background, .rating-symbol-foreground {
-  font-size: 24px;
-}
-
-.symbol-empty {
-  background-color: var(--#{$prefix}gray-400);
-}
-
-.rating-symbol-foreground {
-  top: 0px;
-}
-
-.rating-star{
-  > span{
-    display: inline-block;
-    vertical-align: middle;
-
-    &.badge{
-      margin-left: 4px;
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_responsive-table.scss b/src/lib/scss/custom/plugins/_responsive-table.scss
deleted file mode 100644
index 3a803cc6..00000000
--- a/src/lib/scss/custom/plugins/_responsive-table.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-
-/*  */
-/* Responsive Table */
-/*  */
-
-.table-rep-plugin {
-  .btn-toolbar {
-    display: block;
-  }
-  .table-responsive {
-    border: none !important;
-  }
-  .btn-group{
-    .btn-default {
-      background-color: $secondary;
-      color: $light;
-      border: 1px solid $secondary;
-      &.btn-primary {
-          background-color: $primary;
-          border-color: $primary;
-          color: $white;
-          box-shadow: 0 0 0 2px rgba($primary, .5);
-      }
-  }
-    &.pull-right {
-      float: right;
-      .dropdown-menu {
-        right: 0;
-        transform: none !important;
-        top: 100% !important;
-      }
-    }
-  }
-  tbody {
-    th {
-      font-size: 14px;
-      font-weight: normal;
-    }
-  }
-
-  .checkbox-row {
-    padding-left: 40px;
-    color: $dropdown-color !important;
-
-    &:hover{
-      background-color: lighten($gray-200, 2%) !important;
-    }
-
-    label {
-      display: inline-block;
-      padding-left: 5px;
-      position: relative;
-      &::before {
-        -o-transition: 0.3s ease-in-out;
-        -webkit-transition: 0.3s ease-in-out;
-        background-color: $white;
-        border-radius: 3px;
-        border: 1px solid $gray-300;
-        content: "";
-        display: inline-block;
-        height: 17px;
-        left: 0;
-        margin-left: -20px;
-        position: absolute;
-        transition: 0.3s ease-in-out;
-        width: 17px;
-        outline: none !important;
-      }
-      &::after {
-        color: $gray-200;
-        display: inline-block;
-        font-size: 11px;
-        height: 16px;
-        left: 0;
-        margin-left: -20px;
-        padding-left: 3px;
-        padding-top: 1px;
-        position: absolute;
-        top: -1px;
-        width: 16px;
-      }
-    }
-    input[type="checkbox"] {
-      cursor: pointer;
-      opacity: 0;
-      z-index: 1;
-      outline: none !important;
-
-      &:disabled + label {
-        opacity: 0.65;
-      }
-    }
-    input[type="checkbox"]:focus + label {
-      &::before {
-        outline-offset: -2px;
-        outline: none;
-      }
-    }
-    input[type="checkbox"]:checked + label {
-      &::after {
-        content: "\f00c";
-        font-family: 'Font Awesome 5 Free';
-        font-weight: 900;
-      }
-    }
-    input[type="checkbox"]:disabled + label {
-      &::before {
-        background-color: $gray-100;
-        cursor: not-allowed;
-      }
-    }
-    input[type="checkbox"]:checked + label {
-      &::before {
-        background-color: $primary;
-        border-color: $primary;
-      }
-      &::after {
-        color: $white;
-      }
-    }
-  }
-
-  .fixed-solution {
-    .sticky-table-header{
-      top: $header-height !important;
-      background-color: $primary;
-      table{
-        color: $white;
-      }
-    }
-  }
-
-  table.focus-on tbody tr.focused th,
-  table.focus-on tbody tr.focused td,
-  .sticky-table-header {
-      background: $primary;
-      border-color: $primary;
-      color: $white;
-
-      table {
-          color: $white;
-      }
-  }
-
-    table.focus-on tbody tr.unfocused th,
-    table.focus-on tfoot tr.unfocused th,
-    table.focus-on tbody tr.unfocused td,
-    table.focus-on tfoot tr.unfocused td {
-      color: var(--#{$prefix}body-color);
-    }
-}
-
-body[data-layout="horizontal"] {
-  @media (min-width: 992px) {
-    .fixed-solution {
-      .sticky-table-header{
-        top: $header-height + 50px !important;;
-      }
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_select2.scss b/src/lib/scss/custom/plugins/_select2.scss
deleted file mode 100644
index 26616ebf..00000000
--- a/src/lib/scss/custom/plugins/_select2.scss
+++ /dev/null
@@ -1,227 +0,0 @@
-/*  */
-/* Select 2 */
-/*  */
-
-.select2-container {
-    .select2-selection--single {
-        background-color: var(--#{$prefix}secondary-bg);
-        border: 1px solid $input-border-color;
-        height: 38px;
-
-        &:focus {
-            outline: none;
-        }
-
-        .select2-selection__rendered {
-            line-height: 36px;
-            padding-left: $input-padding-x;
-            color: var(--#{$prefix}secondary-color);
-        }
-
-
-        .select2-selection__arrow {
-            height: 34px;
-            width: 34px;
-            right: 3px;
-
-            b {
-                border-color: var(--#{$prefix}gray-500) transparent transparent transparent;
-                border-width: 6px 6px 0 6px;
-            }
-        }
-
-        .select2-selection__placeholder {
-            color: var(--#{$prefix}body-color);
-        }
-    }
-}
-
-[dir="rtl"] {
-    .select2-selection__rendered {
-        text-align: end;
-    }
-}
-
-
-.select2-container--open {
-    .select2-selection--single {
-        .select2-selection__arrow {
-            b {
-                border-color: transparent transparent var(--#{$prefix}gray-500) transparent !important;
-                border-width: 0 6px 6px 6px !important;
-            }
-        }
-    }
-}
-
-.select2-container--default {
-    .select2-search--dropdown {
-        padding: 10px;
-        background-color: var(--#{$prefix}secondary-bg);
-
-        .select2-search__field {
-            border: 1px solid var(--#{$prefix}border-color-translucent);
-            background-color: var(--#{$prefix}secondary-bg);
-            color: var(--#{$prefix}secondary-color);
-            outline: none;
-        }
-    }
-
-    .select2-results__option--highlighted[aria-selected] {
-        background-color: $primary;
-    }
-
-    .select2-results__option[aria-selected="true"] {
-        background-color: var(--#{$prefix}light);
-        color: var(--#{$prefix}emphasis-color);
-
-        &:hover {
-            background-color: $primary;
-            color: $white;
-        }
-    }
-
-    .select2-selection--multiple {
-        .select2-selection__choice__remove {
-            border-right: none;
-            color: var(--#{$prefix}emphasis-color);
-        }
-    }
-}
-
-.select2-results__option {
-    padding: 6px 12px;
-}
-
-.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
-    padding-left: $input-padding-x;
-}
-
-.select2-dropdown {
-    border: 1px solid var(--#{$prefix}border-color);
-    background-color: var(--#{$prefix}secondary-bg);
-    box-shadow: $box-shadow;
-}
-
-.select2-search {
-    input {
-        border: 1px solid var(--#{$prefix}border-color);
-    }
-}
-
-.select2-container {
-    .select2-selection--multiple {
-        min-height: 38px;
-        background-color: var(--#{$prefix}secondary-bg);
-        border: 1px solid var(--#{$prefix}border-color-translucent) !important;
-        padding: 2px $input-padding-x;
-
-        .select2-selection__rendered {
-            padding: 2px $input-padding-x;
-        }
-
-        .select2-search__field {
-            border: 0;
-            color: var(--#{$prefix}emphasis-color);
-            margin: 0;
-            margin-top: 7px;
-
-            &::placeholder {
-                color: var(--#{$prefix}secondary-color);
-            }
-        }
-
-        .select2-selection__choice {
-            background-color: var(--#{$prefix}tertiary-bg);
-            border: 1px solid var(--#{$prefix}border-color);
-            border-radius: 1px;
-            padding: 0 7px;
-        }
-
-        .select2-selection__rendered {
-            padding: 0;
-        }
-    }
-}
-
-.select2-container--default {
-    &.select2-container--focus {
-        .select2-selection--multiple {
-            border-color: var(--#{$prefix}border-color-translucent);
-        }
-    }
-
-    .select2-results__group {
-        font-weight: $font-weight-semibold;
-    }
-
-    .select2-selection--multiple {
-        .select2-selection__choice__display {
-            padding-left: 16px;
-        }
-    }
-}
-
-/* ajax select */
-
-.select2-result-repository__avatar {
-    float: left;
-    width: 60px;
-    margin-right: 10px;
-
-    img {
-        width: 100%;
-        height: auto;
-        border-radius: 2px;
-    }
-}
-
-.select2-result-repository__statistics {
-    margin-top: 7px;
-}
-
-.select2-result-repository__forks,
-.select2-result-repository__stargazers,
-.select2-result-repository__watchers {
-    display: inline-block;
-    font-size: 11px;
-    margin-right: 1em;
-    color: var(--#{$prefix}secondary-color);
-
-    .fa {
-        margin-right: 4px;
-
-        &.fa-flash {
-            &::before {
-                content: "\f0e7";
-                font-family: "Font Awesome 5 Free";
-            }
-        }
-    }
-}
-
-.select2-results__option--highlighted {
-
-    .select2-result-repository__forks,
-    .select2-result-repository__stargazers,
-    .select2-result-repository__watchers {
-        color: rgba($white, 0.8);
-    }
-}
-
-.select2-result-repository__meta {
-    overflow: hidden;
-}
-
-/* templating-select */
-
-.img-flag {
-    margin-right: 7px;
-    height: 15px;
-    width: 18px;
-}
-
-
-.select2-container--default .select2-results__option--selected {
-    background-color: var(--#{$prefix}tertiary-bg);
-}
diff --git a/src/lib/scss/custom/plugins/_session-timeout.scss b/src/lib/scss/custom/plugins/_session-timeout.scss
deleted file mode 100644
index b4ce493f..00000000
--- a/src/lib/scss/custom/plugins/_session-timeout.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*  */
-/* session-timeout.scss */
-/*  */
-
-#session-timeout-dialog {
-    .close {
-        display: none;
-    }
-
-    .countdown-holder {
-        color: $danger;
-        font-weight: $font-weight-medium;
-    }
-
-    .btn-default {
-        background-color: $white;
-        color: $danger;
-        box-shadow: none;
-    }
-}
diff --git a/src/lib/scss/custom/plugins/_sparkline-chart.scss b/src/lib/scss/custom/plugins/_sparkline-chart.scss
deleted file mode 100644
index 24f07a4d..00000000
--- a/src/lib/scss/custom/plugins/_sparkline-chart.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*  */
-/* sparkline.scss */
-/*  */
-
-.jqstooltip {
-  box-sizing: content-box;
-  width: auto !important;
-  height: auto !important;
-  background-color: $gray-800 !important;
-  box-shadow: $box-shadow-lg;
-  padding: 5px 10px !important;
-  border-radius: 3px;
-  border-color: $gray-900 !important;
-}
-
-.jqsfield {
-  color: $gray-200 !important;
-  font-size: 12px !important;
-  line-height: 18px !important;
-  font-family: $font-family-base !important;
-  font-weight: $font-weight-medium !important;
-}
diff --git a/src/lib/scss/custom/plugins/_sweatalert2.scss b/src/lib/scss/custom/plugins/_sweatalert2.scss
deleted file mode 100644
index 4a1e9cb9..00000000
--- a/src/lib/scss/custom/plugins/_sweatalert2.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/*  */
-/* Sweetalert2 */
-/*  */
-
-.swal2-container {
-    .swal2-title {
-        font-size: 20px;
-        font-weight: $font-weight-medium;
-    }
-}
-
-.swal2-modal {
-    font-size: 14px;
-}
-
-.swal2-icon {
-    &.swal2-question {
-        border-color: $info;
-        color: $info;
-    }
-    &.swal2-success {
-        [class^="swal2-success-line"] {
-            background-color: $success;
-        }
-
-        .swal2-success-ring {
-            border-color: rgba($success, 0.3);
-        }
-    }
-    &.swal2-warning {
-        border-color: $warning;
-        color: $warning;
-    }
-}
-
-.swal2-styled {
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.swal2-progress-steps {
-    .swal2-progress-step {
-        background: $primary;
-        &.swal2-active-progress-step {
-            background: $primary;
-            & ~ .swal2-progress-step,
-            & ~ .swal2-progress-step-line {
-                background: rgba($primary, 0.3);
-            }
-        }
-    }
-
-    .swal2-progress-step-line {
-        background: $primary;
-    }
-}
-
-.swal2-loader {
-    border-color: $primary transparent $primary transparent;
-}
-.swal2-popup {
-    background: var(--#{$prefix}secondary-bg);
-}
-
-.swal2-title, .swal2-html-container{
-     color: var(--#{$prefix}emphasis-color);
-}
-
-.swal2-file,
-.swal2-input,
-.swal2-textarea {
-    border-color: var(--#{$prefix}border-color);
-    color: var(--#{$prefix}body-color);
-    &:focus {
-        box-shadow: none;
-        border-color: var(--#{$prefix}border-color);
-    }
-}
-
-div:where(.swal2-container) div:where(.swal2-popup) {
-    color: var(--#{$prefix}secondary-color);
-}
diff --git a/src/lib/scss/custom/plugins/_switch.scss b/src/lib/scss/custom/plugins/_switch.scss
deleted file mode 100644
index 44df9cfe..00000000
--- a/src/lib/scss/custom/plugins/_switch.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-/*  */
-/* Sweetalert2 */
-/*  */
-
-/* CSS Switch */
-input[switch] {
-  display: none;
-  + label {
-    font-size: 1em;
-    line-height: 1;
-    width: 56px;
-    height: 24px;
-    background-color: $gray-400;
-    background-image: none;
-    border-radius: 2rem;
-    padding: 0.16667rem;
-    cursor: pointer;
-    display: inline-block;
-    text-align: center;
-    position: relative;
-    font-weight: $font-weight-medium;
-    transition: all 0.1s ease-in-out;
-    &:before {
-      color: $dark;
-      content: attr(data-off-label);
-      display: block;
-      font-family: inherit;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 21px;
-      position: absolute;
-      right: 1px;
-      margin: 3px;
-      top: -2px;
-      text-align: center;
-      min-width: 1.66667rem;
-      overflow: hidden;
-      transition: all 0.1s ease-in-out;
-    }
-
-    &:after {
-      content: '';
-      position: absolute;
-      left: 3px;
-      background-color: $gray-200;
-      box-shadow: none;
-      border-radius: 2rem;
-      height: 20px;
-      width: 20px;
-      top: 2px;
-      transition: all 0.1s ease-in-out;
-    }
-  }
-
-  &:checked + label {
-    background-color: $primary;
-  }
-}
-
-input[switch]:checked + label {
-  background-color: $primary;
-  &:before {
-    color: $white;
-    content: attr(data-on-label);
-    right: auto;
-    left: 3px;
-  }
-
-  &:after {
-    left: 33px;
-    background-color: $gray-200;
-  }
-}
-
-input[switch="bool"] + label {
-  background-color: $danger;
-}
-input[switch="bool"] + label:before,input[switch="bool"]:checked + label:before,
-input[switch="default"]:checked + label:before{
-  color: $white;
-}
-
-input[switch="bool"]:checked + label {
-  background-color: $success;
-}
-
-input[switch="default"]:checked + label {
-  background-color: #a2a2a2;
-}
-
-input[switch="primary"]:checked + label {
-  background-color: $primary;
-}
-
-input[switch="success"]:checked + label {
-  background-color: $success;
-}
-
-input[switch="info"]:checked + label {
-  background-color: $info;
-}
-
-input[switch="warning"]:checked + label {
-  background-color: $warning;
-}
-
-input[switch="danger"]:checked + label {
-  background-color: $danger;
-}
-
-input[switch="dark"]:checked + label {
-  background-color: $dark;
-  &:before {
-    color: $light;
-  }
-}
-
-.square-switch{
-  margin-right: 7px;
-  input[switch]+label, input[switch]+label:after{
-    border-radius: 4px;
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_table-editable.scss b/src/lib/scss/custom/plugins/_table-editable.scss
deleted file mode 100644
index 5be7f23a..00000000
--- a/src/lib/scss/custom/plugins/_table-editable.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-
-/*  */
-/* Table editable */
-/*  */
-
-.table-edits{
-  input, select{
-    height: $input-height-sm;
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    border: 1px solid $input-border-color;
-    background-color: $input-bg;
-    color: $input-color;
-    border-radius: $input-border-radius;
-    &:focus{
-      outline: none;
-      border-color: $input-focus-border-color;
-    }
-  }
-}
diff --git a/src/lib/scss/custom/plugins/_timepicker.scss b/src/lib/scss/custom/plugins/_timepicker.scss
deleted file mode 100644
index 5e1a0448..00000000
--- a/src/lib/scss/custom/plugins/_timepicker.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-/* Timepicker */
-.bootstrap-timepicker-widget {
-  table {
-    td {
-      a {
-        color: $input-color;
-        &:hover {
-          background-color: transparent;
-          border-color: transparent;
-          border-radius: 4px;
-          color: $primary;
-          text-decoration: none;
-        }
-      }
-      input {
-        width: 32px;
-        height: 32px;
-        border: 0;
-        color: var(--#{$prefix}body-color);
-        border: 1px solid var(--#{$prefix}border-color);
-        background-color: $input-bg;
-
-      }
-    }
-  }
-
-  &.dropdown-menu:after{
-    border-bottom-color: var(--#{$prefix}gray-200);
-  }
-  &.timepicker-orient-bottom:after{
-    border-top-color: var(--#{$prefix}gray-200);
-  }
-}
-
-
-.timepicker-orient-top{
-  top: $input-height !important;
-}
-
-.timepicker-orient-bottom{
-  top: auto !important;
-  bottom: $input-height !important;
-}
-
-.bootstrap-timepicker-widget{
-  left: 0 !important;
-  right: auto !important;
-}
-
-
-.bootstrap-timepicker-widget{
-  &.timepicker-orient-left{
-    &:before{
-      left: 6px;
-      right: auto;
-    }
-
-    &::after{
-      left: 7px;
-      right: auto;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/lib/scss/custom/plugins/_toastr.scss b/src/lib/scss/custom/plugins/_toastr.scss
deleted file mode 100644
index 872f8c53..00000000
--- a/src/lib/scss/custom/plugins/_toastr.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-
-/*  */
-/* toastr.scss */
-/*  */
-
-
-/* =============
-   Notification
-============= */
-#toast-container {
-    > div {
-        box-shadow: $box-shadow;
-        opacity: 1;
-        &:hover {
-            box-shadow: $box-shadow;
-            opacity: 0.9;
-        }
-    }
-
-    &.toast-top-full-width, &.toast-bottom-full-width{
-        > div{
-          min-width: 96%;
-          margin: 4px auto;
-        }
-      }
-
-}
-
-
-@each $color, $value in $theme-colors {
-    .toast-#{$color} {
-        border: 2px solid $value !important;
-        background-color: rgba(($value), 0.8) !important;
-    }
-}
-
-
-/* for error */
-
-.toast-error {
-    background-color: rgba($danger,0.8);
-    border: 2px solid $danger;
-}
-
-.toastr-options{
-    padding: 24px;
-    background-color: var(--#{$prefix}tertiary-bg);
-    margin-bottom: 0;
-    border: 1px solid var(--#{$prefix}border-color);
-}
diff --git a/src/lib/scss/custom/plugins/_vector-maps.scss b/src/lib/scss/custom/plugins/_vector-maps.scss
deleted file mode 100644
index a65fdf0c..00000000
--- a/src/lib/scss/custom/plugins/_vector-maps.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*  */
-/* vector-maps.scss */
-/*  */
-
-.jvectormap-label {
-    border: none;
-    background: $gray-800;
-    color: $gray-100;
-    font-family: $font-family-base;
-    font-size: $font-size-base;
-    padding: 5px 8px;
-}
diff --git a/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss b/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
index 5ac12bb6..564716cc 100644
--- a/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
+++ b/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
@@ -3806,6 +3806,10 @@
   content: "\F0CF2";
 }
 
+.mdi-broadcast::before {
+  content: "\F1720";
+}
+
 .mdi-broom::before {
   content: "\F00E2";
 }
diff --git a/src/lib/scss/custom/structure/_footer.scss b/src/lib/scss/custom/structure/_footer.scss
deleted file mode 100644
index b6521f31..00000000
--- a/src/lib/scss/custom/structure/_footer.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/*  */
-/* _footer.scss */
-/*  */
-
-.footer {
-    bottom: 0;
-    padding: 20px calc(#{$grid-gutter-width} * 0.75);
-    position: absolute;
-    right: 0;
-    color: var(--#{$prefix}footer-color);
-    left: 250px;
-    height: $footer-height;
-    background-color: var(--#{$prefix}footer-bg);
-
-    @media (max-width: 991.98px) {
-        left: 0;
-    }
-}
-  
-/* Enlarge menu */
-.vertical-collpsed {
-    .footer {
-        left: $sidebar-collapsed-width;
-
-        @media (max-width: 991.98px) {
-            left: 0;
-        }
-    }
-}
-
-body[data-layout="horizontal"] {
-    .footer {
-        left: 0 !important;
-    }  
-}
diff --git a/src/lib/scss/custom/structure/_general.scss b/src/lib/scss/custom/structure/_general.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/lib/scss/custom/structure/_horizontal-nav.scss b/src/lib/scss/custom/structure/_horizontal-nav.scss
deleted file mode 100644
index 486d56cc..00000000
--- a/src/lib/scss/custom/structure/_horizontal-nav.scss
+++ /dev/null
@@ -1,347 +0,0 @@
-/*  */
-/* _horizontal.scss */
-/*  */
-
-.topnav {
-    background: var(--#{$prefix}topnav-bg);
-    padding: 0 calc(#{$grid-gutter-width} * 0.5);
-    box-shadow: $box-shadow;
-    margin-top: $header-height;
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    
-    .topnav-menu {
-        margin: 0;
-        padding: 0;
-    }
-
-    .navbar-nav {
-        
-        .nav-link {
-            font-size: 14px;
-            position: relative;
-            padding: 1rem 1.3rem;
-            color: var(--#{$prefix}menu-item-color);
-            i{
-                font-size: 15px;
-            }
-            &:focus, &:hover{
-                color: var(--#{$prefix}menu-item-active-color);
-                background-color: transparent;
-            }
-        }
-        
-        .dropdown-item{
-            color: var(--#{$prefix}menu-item-color);
-            &.active, &:hover{
-                color: var(--#{$prefix}menu-item-active-color);
-            }
-        }
-        
-        .nav-item{
-            .nav-link.active{
-                color: var(--#{$prefix}menu-item-active-color);
-            }
-        }
-
-        .dropdown{
-            &.active{
-              >a {
-                    color: var(--#{$prefix}menu-item-active-color);
-                    background-color: transparent;
-                }
-            }
-        }
-    }
-}
-
-@include media-breakpoint-up(xl) {
-
-    body[data-layout="horizontal"] {
-        .container-fluid,
-        .navbar-header {
-            max-width: 85%;
-        }
-    }
-}
-
-@include media-breakpoint-up(lg) {
-    .topnav {
-        .navbar-nav {
-            .nav-item {
-                &:first-of-type {
-                    .nav-link {
-                        padding-left: 0;
-                    }
-                }
-            }
-        }
-
-        .dropdown-item {
-            padding: .5rem 1.5rem;
-            min-width: 180px;
-        }
-
-        .dropdown {
-            &.mega-dropdown{
-                /* position: static; */
-                .mega-dropdown-menu{
-                    left: 0px;
-                    right: auto;
-                }
-            }
-            .dropdown-menu {
-                margin-top: 0;
-                border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;
-
-                .arrow-down {
-                    &::after {
-                        right: 15px;
-                        transform: rotate(-135deg) translateY(-50%);
-                        position: absolute;
-                    }
-                }
-
-                .dropdown {
-                    .dropdown-menu {
-                        position: absolute;
-                        top: 0 !important;
-                        left: 100%;
-                        display: none
-                    }
-                }
-            }
-
-            &:hover {
-                >.dropdown-menu {
-                    display: block;
-                }
-            }
-        }
-
-        .dropdown:hover>.dropdown-menu>.dropdown:hover>.dropdown-menu {
-            display: block
-        }
-    }
-
-    .navbar-toggle {
-        display: none;
-    }
-}
-
-.arrow-down {
-    display: inline-block;
-
-    &:after {
-        border-color: initial;
-        border-style: solid;
-        border-width: 0 0 1px 1px;
-        content: "";
-        height: .4em;
-        display: inline-block;
-        right: 5px;
-        top: 50%;
-        margin-left: 10px;
-        transform: rotate(-45deg) translateY(-50%);
-        transform-origin: top;
-        transition: all .3s ease-out;
-        width: .4em;
-    }
-}
-
-
-@include media-breakpoint-down(xl) {
-    .topnav-menu {
-        .navbar-nav {
-            li {
-                &:last-of-type {
-                    .dropdown {
-                        .dropdown-menu {
-                            right: 100%;
-                            left: auto;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(lg) {
-
-    .navbar-brand-box{
-        .logo-dark {
-            display: var(--#{$prefix}display-block);
-            span.logo-sm{
-                display: var(--#{$prefix}display-block);
-            }
-        }
-    
-        .logo-light {
-            display: var(--#{$prefix}display-none);
-        }
-    }
-    
-    .topnav {
-        max-height: 360px;
-        overflow-y: auto;
-        padding: 0;
-        .navbar-nav {
-            .nav-link {
-                padding: 0.75rem 1.1rem;
-            }
-        }
-
-        .dropdown {
-            .dropdown-menu {
-                background-color: transparent;
-                border: none;
-                box-shadow: none;
-                padding-left: 15px;
-                &.dropdown-mega-menu-xl{
-                    width: auto;
-    
-                    .row{
-                        margin: 0px;
-                    }
-                }
-            }
-
-            .dropdown-item {
-                position: relative;
-                background-color: transparent;
-
-                &.active,
-                &:active {
-                    color: $primary;
-                }
-            }
-        }
-
-        .arrow-down {
-            &::after {
-                right: 15px;
-                position: absolute;
-            }
-        }
-    }
-}
-
-
-@include media-breakpoint-up(lg) {
-
-    body[data-layout="horizontal"][data-topbar="light"] {
-        .navbar-brand-box{
-            .logo-dark {
-                display: var(--#{$prefix}display-block);
-            }
-        
-            .logo-light {
-                display: var(--#{$prefix}display-none);
-            }
-        }
-
-        .topnav{
-            background-color: $primary;
-            .navbar-nav {
-        
-                .nav-link {
-                    color: rgba($white, 0.6);
-                    
-                    &:focus, &:hover{
-                        color: rgba($white, 0.9);
-                    }
-                }
-        
-                > .dropdown{
-                    &.active{
-                    >a {
-                            color: rgba($white, 0.9) !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* Colored Topbar  */
-
-body[data-layout="horizontal"][data-topbar="colored"] {
-    #page-topbar{
-        background-color: $primary;
-        box-shadow: none;
-    }
-
-    .logo-dark {
-        display: none;
-    }
-
-    .logo-light {
-        display: block;
-    }
-
-    .app-search {
-    
-        .form-control {
-            background-color: rgba(var(--#{$prefix}topbar-search-bg),0.07);
-            color: $white;
-        }
-        span,
-        input.form-control::-webkit-input-placeholder {
-            color: rgba($white,0.5);
-        }
-    }
-    .header-item {
-        color: var(--#{$prefix}header-dark-item-color);
-    
-        &:hover {
-            color: var(--#{$prefix}header-dark-item-color);
-        }
-    }
-
-    .navbar-header {
-        .dropdown .show {
-            &.header-item{
-                background-color: rgba($white,0.1);
-            }
-        }
-
-        .waves-effect .waves-ripple {
-            background: rgba($white, 0.4);
-        }
-    }
-
-    .noti-icon {
-        i {
-            color: var(--#{$prefix}header-dark-item-color);
-        }
-    }
-
-    @include media-breakpoint-up(lg) {
-        .topnav{
-            background-color: $primary;
-            .navbar-nav {
-        
-                .nav-link {
-                    color: rgba($white, 0.6);
-                    
-                    &:focus, &:hover{
-                        color: rgba($white, 0.9);
-                    }
-                }
-        
-                > .dropdown{
-                    &.active{
-                      >a {
-                            color: rgba($white, 0.9) !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
diff --git a/src/lib/scss/custom/structure/_layouts.scss b/src/lib/scss/custom/structure/_layouts.scss
deleted file mode 100644
index fe1611c5..00000000
--- a/src/lib/scss/custom/structure/_layouts.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/*  */
-/* _layouts.scss */
-/*  */
-
-body[data-layout-size="boxed"] {
-    background-color: var(--#{$prefix}boxed-body-bg);
-    #layout-wrapper {
-        background-color: var(--#{$prefix}body-bg);
-        max-width: $boxed-layout-width;
-        margin: 0 auto;
-        box-shadow: $box-shadow;
-    }
-
-    #page-topbar {
-        max-width: $boxed-layout-width;
-        margin: 0 auto;
-    }
-
-    .footer {
-        margin: 0 auto;
-        max-width: calc(#{$boxed-layout-width} - #{$sidebar-width});
-    }
-
-    &.vertical-collpsed {
-        .footer {
-            max-width: calc(#{$boxed-layout-width} - #{$sidebar-collapsed-width});
-        }
-    }
-}
-
-
-/* Horizontal Boxed Layout */
-
-body[data-layout="horizontal"][data-layout-size="boxed"]{
-    #page-topbar, #layout-wrapper, .footer {
-        max-width: 100%;
-    }
-    .container-fluid, .navbar-header {
-        max-width: $boxed-layout-width;
-    }
-}
-
-/* Scrollable layout */
-
-body[data-layout-scrollable="true"] {
-    @media (min-width: 992px) {
-        #page-topbar, .vertical-menu{
-            position: absolute;
-        }
-    }
-
-    &[data-layout="horizontal"]{
-        @media (min-width: 992px) {
-            #page-topbar, .topnav{
-                position: absolute;
-            }
-        }
-    }
-}
-
diff --git a/src/lib/scss/custom/structure/_page-head.scss b/src/lib/scss/custom/structure/_page-head.scss
deleted file mode 100644
index d12c227b..00000000
--- a/src/lib/scss/custom/structure/_page-head.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*  */
-/* Page-title */
-/*  */
-
-.page-title-box {
-    padding-bottom: $grid-gutter-width;
-
-    .breadcrumb {
-        background-color: transparent;
-        padding: 0;
-    }
-
-    h4 {
-        text-transform: uppercase;
-        font-weight: 600;
-        font-size: 16px !important;
-    }
-}
diff --git a/src/lib/scss/custom/structure/_right-sidebar.scss b/src/lib/scss/custom/structure/_right-sidebar.scss
deleted file mode 100644
index 875c5258..00000000
--- a/src/lib/scss/custom/structure/_right-sidebar.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/*  */
-/* right-sidebar.scss */
-/*  */
-
-.right-bar {
-    background-color: var(--#{$prefix}secondary-bg);
-    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
-    display: block;
-    position: fixed;
-    transition: all 200ms ease-out;
-    width: $rightbar-width;
-    z-index: 9999;
-    float: right !important;
-    right: -($rightbar-width + 10px);
-    top: 0;
-    bottom: 0;
-
-    .right-bar-toggle {
-        background-color: var(--#{$prefix}dark);
-        height: 24px;
-        width: 24px;
-        line-height: 24px;
-        display: block;
-        color: var(--#{$prefix}gray-200);
-        text-align: center;
-        border-radius: 50%;
-
-        &:hover {
-            background-color: var(--#{$prefix}dark);
-        }
-    }
-}
-
-/* Rightbar overlay */
-.rightbar-overlay {
-    background-color: rgba($dark, 0.55);
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    display: none;
-    z-index: 9998;
-    transition: all .2s ease-out;
-}
-
-.right-bar-enabled {
-    .right-bar {
-        right: 0;
-    }
-    .rightbar-overlay {
-        display: block;
-    }
-}
-
-@include media-breakpoint-down(md) {
-    .right-bar {
-        overflow: auto;
-        .slimscroll-menu {
-            height: auto !important;
-        }
-    }
-}
diff --git a/src/lib/scss/custom/structure/_topbar.scss b/src/lib/scss/custom/structure/_topbar.scss
deleted file mode 100644
index b5d0a578..00000000
--- a/src/lib/scss/custom/structure/_topbar.scss
+++ /dev/null
@@ -1,294 +0,0 @@
-/*  */
-/* _header.scss */
-/*  */
-
-#page-topbar {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    z-index: 1002;
-    background-color: var(--#{$prefix}header-bg);
-    box-shadow: $box-shadow;
-}
-
-.navbar-header {
-    display: flex;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    align-items: center;
-    margin: 0 auto;
-    height: $header-height;
-    padding: 0 calc(#{$grid-gutter-width} * 0.5) 0 0 /*rtl: 0 0 0 calc(#{$grid-gutter-width} / 2) */;
-
-    .dropdown .show {
-        &.header-item {
-            background-color: var(--#{$prefix}tertiary-bg);
-        }
-    }
-}
-
-.navbar-brand-box {
-    padding: 0 1.5rem;
-    text-align: center;
-    width: $navbar-brand-box-width;
-    height: $header-height;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.logo {
-    line-height: 70px;
-
-    .logo-sm {
-        display: none;
-    }
-}
-
-.logo-light {
-    display: none;
-}
-
-/* Search */
-
-.app-search {
-    padding: calc(#{$header-height - 38px} * 0.5) 0;
-
-    .form-control {
-        border: none;
-        height: 38px;
-        padding-left: 40px;
-        padding-right: 20px;
-        background-color: var(--#{$prefix}topbar-search-bg);
-        box-shadow: none;
-        border-radius: 30px;
-    }
-    span {
-        position: absolute;
-        z-index: 10;
-        font-size: 16px;
-        line-height: 38px;
-        left: 13px;
-        top: 0;
-        color: var(--#{$prefix}secondary-color);
-    }
-}
-
-/* Mega menu */
-
-.megamenu-list {
-    li{
-        position: relative;
-        padding: 5px 0px;
-        a{
-            color: var(--#{$prefix}body-color);
-        }
-    }
-}
-
-@media (max-width: 992px) {
-    .navbar-brand-box {
-        width: auto;
-    }
-
-    .logo {
-
-        span.logo-lg {
-            display: none;
-        }
-
-        span.logo-sm {
-            display: inline-block;
-        }
-    }
-}
-
-.page-content {
-    min-height: 500px;
-    padding: calc(#{$header-height} + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.75) $footer-height calc(#{$grid-gutter-width} * 0.75);
-}
-
-.header-item {
-    height: $header-height;
-    box-shadow: none !important;
-    color: var(--#{$prefix}header-item-color);
-    border: 0;
-    border-radius: 0px;
-
-    &:hover {
-        color: var(--#{$prefix}header-item-color);
-    }
-}
-
-.header-profile-user {
-    height: 36px;
-    width: 36px;
-    background-color: var(--#{$prefix}tertiary-bg);
-    padding: 3px;
-}
-
-.noti-icon {
-    i {
-        font-size: 22px;
-        color: var(--#{$prefix}header-item-color);
-    }
-
-    .badge {
-        position: absolute;
-        top: 12px;
-        right: 4px;
-    }
-}
-
-.notification-item {
-    .d-flex {
-        padding: 0.75rem 1rem;
-
-        &:hover {
-            background-color: var(--#{$prefix}tertiary-bg);
-        }
-    }
-}
-
-/* Dropdown with Icons */
-.dropdown-icon-item {
-    display: block;
-    border-radius: 3px;
-    line-height: 34px;
-    text-align: center;
-    padding: 15px 0 9px;
-    display: block;
-    border: 1px solid transparent;
-    color: var(--#{$prefix}secondary-color);
-
-    img {
-        height: 24px;
-    }
-
-    span {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &:hover {
-        border-color: var(--#{$prefix}border-color);
-    }
-}
-
-/* Full Screen */
-.fullscreen-enable {
-    [data-bs-toggle="fullscreen"] {
-        .bx-fullscreen::before {
-            content: "\ea3f";
-        }
-    }
-}
-
-body[data-topbar="dark"] {
-    #page-topbar { 
-        background-color: var(--#{$prefix}header-dark-bg);
-    }
-    .navbar-header {
-        .dropdown .show {
-            &.header-item {
-                background-color: rgba($white, 0.05);
-            }
-        }
-
-        .waves-effect .waves-ripple {
-            background: rgba($white, 0.4);
-        }
-    }
-
-    .header-item {
-        color: var(--#{$prefix}header-dark-item-color);
-    
-        &:hover {
-            color: var(--#{$prefix}header-dark-item-color);
-        }
-    }
-
-    .header-profile-user {
-        background-color: rgba($white, 0.25);
-    }
-    
-    .noti-icon {
-        i {
-            color: var(--#{$prefix}header-dark-item-color);
-        }
-    }
-
-    .logo-dark {
-        display: none;
-    }
-
-    .logo-light {
-        display: block;
-    }
-
-    .app-search {
-    
-        .form-control {
-            background-color: rgba(var(--#{$prefix}topbar-search-bg),0.07);
-            color: $white;
-        }
-        span,
-        input.form-control::-webkit-input-placeholder {
-            color: rgba($white,0.5);
-        }
-    }
-}
-
-body[data-sidebar="dark"] {
-    .navbar-brand-box {
-        background: $sidebar-dark-bg;
-    }
-
-    .logo-dark {
-        display: none;
-    }
-
-    .logo-light {
-        display: block;
-    }
-}
-
-@media (max-width: 600px) {
-    .navbar-header {
-        .dropdown {
-            position: static;
-
-            .dropdown-menu {
-                left: 10px !important;
-                right: 10px !important;
-            }
-        }
-    }
-}
-
-@media (max-width: 380px) {
-    .navbar-brand-box {
-        display: none;
-    }
-}
-
-body[data-layout="horizontal"] {
-    .navbar-brand-box {
-        width: auto;
-    }
-    .page-content {
-        margin-top: $header-height;
-        padding: calc(55px + #{$grid-gutter-width}) calc(#{$grid-gutter-width} * 0.5) $footer-height calc(#{$grid-gutter-width} * 0.5);
-    }
-}
-
-@media (max-width: 992px) { 
-    body[data-layout="horizontal"] {
-        .page-content {
-            margin-top: 15px;
-        }    
-    }
-}
diff --git a/src/lib/scss/custom/structure/_vertical.scss b/src/lib/scss/custom/structure/_vertical.scss
deleted file mode 100644
index c898213a..00000000
--- a/src/lib/scss/custom/structure/_vertical.scss
+++ /dev/null
@@ -1,731 +0,0 @@
-/*  */
-/* _menu.scss */
-/*  */
-
-.metismenu {
-    margin: 0;
-
-    li {
-        display: block;
-        width: 100%;
-    }
-
-    .mm-collapse {
-        display: none;
-
-        &:not(.mm-show) {
-            display: none;
-        }
-
-        &.mm-show {
-            display: block
-        }
-    }
-
-    .mm-collapsing {
-        position: relative;
-        height: 0;
-        overflow: hidden;
-        transition-timing-function: ease;
-        transition-duration: .35s;
-        transition-property: height, visibility;
-    }
-}
-
-
-.vertical-menu {
-    width: $sidebar-width;
-    z-index: 1001;
-    background: $sidebar-bg;
-    bottom: 0;
-    margin-top: 0;
-    position: fixed;
-    top: $header-height;
-    box-shadow: $box-shadow;
-}
-
-.main-content {
-    margin-left: $sidebar-width;
-    overflow: hidden;
-
-    .content {
-        padding: 0 15px 10px 15px;
-        margin-top: $header-height;
-    }
-}
-
-
-#sidebar-menu {
-    padding: 10px 0 30px 0;
-
-    .mm-active {
-        >.has-arrow {
-            &:after {
-                transform: rotate(-180deg);
-            }
-        }
-    }
-
-    .has-arrow {
-        &:after {
-            content: "\F0140";
-            font-family: 'Material Design Icons';
-            display: block;
-            float: right;
-            transition: transform .2s;
-            font-size: 1rem;
-        }
-    }
-
-    .revert-arrow {
-        &:after {
-            transform: rotate(-180deg);
-        }
-    }
-
-    ul {
-        li {
-            a {
-                display: block;
-                padding: .625rem 1.5rem;
-                color: $sidebar-menu-item-color;
-                position: relative;
-                font-size: 13px;
-                transition: all .4s;
-
-                i {
-                    display: inline-block;
-                    min-width: 1.75rem;
-                    padding-bottom: .125em;
-                    font-size: 1.25rem;
-                    line-height: 1.40625rem;
-                    vertical-align: middle;
-                    color: $sidebar-menu-item-icon-color;
-                    transition: all .4s;
-                }
-
-                &:hover {
-                    color: $sidebar-menu-item-hover-color;
-
-                    i {
-                        color: $sidebar-menu-item-hover-color;
-                    }
-                }
-            }
-
-            .badge {
-                margin-top: 4px;
-            }
-
-            ul.sub-menu {
-                padding: 0;
-
-                li {
-
-                    a {
-                        padding: .4rem 1.5rem .4rem 3.5rem;
-                        font-size: 13px;
-                        color: $sidebar-menu-sub-item-color;
-
-                        &:hover {
-                            color: $sidebar-menu-item-hover-color;
-                        }
-                    }
-
-                    ul.sub-menu {
-                        padding: 0;
-
-                        li {
-                            a {
-                                padding: .4rem 1.5rem .4rem 4.5rem;
-                                font-size: 13px;
-
-
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-    }
-}
-
-.menu-title {
-    padding: 12px 20px !important;
-    letter-spacing: .05em;
-    pointer-events: none;
-    cursor: default;
-    font-size: 11px;
-    text-transform: uppercase;
-    color: $sidebar-menu-item-icon-color;
-    font-weight: $font-weight-semibold;
-}
-
-.mm-active {
-    color: $sidebar-menu-item-active-color !important;
-
-    >a {
-        color: $sidebar-menu-item-active-color !important;
-
-        i {
-            color: $sidebar-menu-item-active-color !important;
-        }
-    }
-
-    .active {
-        color: $sidebar-menu-item-active-color !important;
-
-        i {
-            color: $sidebar-menu-item-active-color !important;
-        }
-    }
-
-    >i {
-        color: $sidebar-menu-item-active-color !important;
-    }
-}
-
-@media (max-width: 992px) {
-    .vertical-menu {
-        display: none;
-    }
-
-    .main-content {
-        margin-left: 0 !important;
-    }
-
-    body.sidebar-enable {
-        .vertical-menu {
-            display: block;
-        }
-    }
-}
-
-/* Enlarge menu */
-.vertical-collpsed {
-
-    .main-content {
-        margin-left: $sidebar-collapsed-width;
-    }
-
-    .navbar-brand-box {
-        width: $sidebar-collapsed-width !important;
-    }
-
-    .logo {
-        span.logo-lg {
-            display: none;
-        }
-
-        span.logo-sm {
-            display: block;
-        }
-    }
-
-    /* Side menu */
-    .vertical-menu {
-        position: absolute;
-        width: $sidebar-collapsed-width !important;
-        z-index: 5;
-        overflow-y: auto;
-        scrollbar-width: none;
-
-        .simplebar-mask,
-        .simplebar-content-wrapper {
-            overflow: visible !important;
-        }
-
-        .simplebar-scrollbar {
-            display: none !important;
-        }
-
-        .simplebar-offset {
-            bottom: 0 !important;
-        }
-
-        #vertical-menu {
-            height: auto !important;
-        }
-
-        /* Sidebar Menu */
-        #sidebar-menu {
-
-            .menu-title,
-            .badge,
-            .collapse.in {
-                display: none !important;
-            }
-
-            .nav.collapse {
-                height: inherit !important;
-            }
-
-            .has-arrow {
-                &:after {
-                    display: none;
-                }
-            }
-
-            >ul {
-                >li {
-                    position: static;
-                    white-space: nowrap;
-
-                    >a {
-                        padding: 15px 20px;
-                        min-height: 55px;
-                        transition: none;
-
-                        &:hover,
-                        &:active,
-                        &:focus {
-                            color: $sidebar-menu-item-hover-color;
-                        }
-
-                        i {
-                            font-size: 1.45rem;
-                            margin-left: 4px;
-                        }
-
-                        span {
-                            display: none;
-                            padding-left: 25px;
-                        }
-                    }
-
-                    &:hover {
-                        >a {
-                            position: relative;
-                            width: calc(190px + #{$sidebar-collapsed-width});
-                            color: $primary;
-                            background-color: darken($sidebar-bg, 4%);
-                            transition: none;
-
-                            i {
-                                color: $primary;
-                            }
-
-                            span {
-                                display: inline;
-                            }
-                        }
-
-                        >ul {
-                            display: block;
-                            left: $sidebar-collapsed-width;
-                            position: fixed;
-                            width: 190px;
-                            height: auto !important;
-                            box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
-
-                            ul {
-                                box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1);
-                            }
-
-                            a {
-                                box-shadow: none;
-                                padding: 8px 20px;
-                                position: relative;
-                                width: 190px;
-                                z-index: 6;
-                                color: $sidebar-menu-sub-item-color;
-
-                                &:hover {
-                                    color: $sidebar-menu-item-hover-color;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                ul {
-                    padding: 5px 0;
-                    z-index: 9999;
-                    display: none;
-                    background-color: $sidebar-bg;
-
-                    li {
-                        position: relative;
-
-                        &:hover {
-                            >ul {
-                                display: block;
-                                left: calc(#{$sidebar-collapsed-width} + 190px);
-                                height: auto !important;
-                                margin-top: -36px;
-                                position: fixed;
-                                width: 190px;
-                            }
-                        }
-
-                        >a {
-                            span.pull-right {
-                                position: absolute;
-                                right: 20px;
-                                top: 12px;
-                                transform: rotate(270deg);
-                            }
-                        }
-                    }
-
-                    li.active {
-                        a {
-                            color: $gray-100;
-                        }
-                    }
-                }
-            }
-        }
-
-    }
-}
-
-
-body[data-sidebar="dark"] {
-    .vertical-menu {
-        background: $sidebar-dark-bg;
-    }
-
-    #sidebar-menu {
-
-        ul {
-            li {
-                a {
-                    color: $sidebar-dark-menu-item-color;
-
-                    i {
-                        color: $sidebar-dark-menu-item-icon-color;
-                    }
-
-                    &:hover {
-                        color: $sidebar-dark-menu-item-hover-color;
-
-                        i {
-                            color: $sidebar-dark-menu-item-hover-color;
-                        }
-                    }
-                }
-
-                ul.sub-menu {
-                    li {
-
-                        a {
-                            color: $sidebar-dark-menu-sub-item-color;
-
-                            &:hover {
-                                color: $sidebar-dark-menu-item-hover-color;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    /* Enlarge menu */
-    &.vertical-collpsed {
-        /* min-height: 1760px; */
-
-        /* Side menu */
-        .vertical-menu {
-
-            /* Sidebar Menu */
-            #sidebar-menu {
-
-                >ul {
-                    >li {
-
-                        &:hover {
-                            >a {
-                                background: lighten($sidebar-dark-bg, 2%);
-                                color: $sidebar-dark-menu-item-hover-color;
-
-                                i {
-                                    color: $sidebar-dark-menu-item-hover-color;
-                                }
-                            }
-
-                            >ul {
-                                a {
-                                    color: $sidebar-dark-menu-sub-item-color;
-
-
-                                    &:hover {
-                                        color: $sidebar-dark-menu-item-hover-color;
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    ul {
-                        background-color: $sidebar-dark-bg;
-                    }
-                }
-
-                ul {
-                    li {
-                        &.mm-active .active {
-                            color: $sidebar-dark-menu-item-active-color !important;
-
-                            i {
-                                color: $sidebar-dark-menu-item-active-color !important;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .mm-active {
-        color: $sidebar-dark-menu-item-active-color !important;
-
-        >a {
-            color: $sidebar-dark-menu-item-active-color !important;
-
-            i {
-                color: $sidebar-dark-menu-item-active-color !important;
-            }
-        }
-
-        >i {
-            color: $sidebar-dark-menu-item-active-color !important;
-        }
-
-        .active {
-            color: $sidebar-dark-menu-item-active-color !important;
-
-            i {
-                color: $sidebar-dark-menu-item-active-color !important;
-            }
-        }
-    }
-
-    .menu-title {
-        color: $sidebar-dark-menu-item-icon-color;
-    }
-}
-
-
-body[data-layout="horizontal"] {
-    .main-content {
-        margin-left: 0 !important;
-    }
-}
-
-/* Compact Sidebar */
-
-body[data-sidebar-size="small"] {
-    .navbar-brand-box {
-        width: $sidebar-width-sm;
-    }
-
-    .vertical-menu {
-        width: $sidebar-width-sm;
-        text-align: center;
-
-        .has-arrow:after,
-        .badge {
-            display: none !important;
-        }
-    }
-
-    .main-content {
-        margin-left: $sidebar-width-sm;
-    }
-
-    .footer {
-        left: $sidebar-width-sm;
-
-        @media (max-width: 991.98px) {
-            left: 0;
-        }
-    }
-
-    #sidebar-menu {
-        ul li {
-            &.menu-title {
-                background-color: lighten($sidebar-dark-bg, 2%);
-            }
-
-            a {
-                i {
-                    display: block;
-                }
-            }
-
-            ul.sub-menu {
-                li {
-                    a {
-                        padding-left: 1.5rem;
-                    }
-
-                    ul.sub-menu li a {
-                        padding-left: 1.5rem;
-                    }
-                }
-            }
-        }
-    }
-
-    &.vertical-collpsed {
-        .main-content {
-            margin-left: $sidebar-collapsed-width;
-        }
-
-        .vertical-menu {
-            #sidebar-menu {
-                text-align: left;
-
-                >ul {
-                    >li {
-                        >a {
-                            i {
-                                display: inline-block;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .footer {
-            left: $sidebar-collapsed-width;
-        }
-    }
-}
-
-/* colored sidebar */
-
-body[data-sidebar="colored"] {
-    .vertical-menu {
-        background-color: $primary;
-    }
-
-    .navbar-brand-box {
-        background-color: $primary;
-
-        .logo-dark {
-            display: none;
-        }
-
-        .logo-light {
-            display: block;
-        }
-    }
-
-    .mm-active {
-        color: $white !important;
-
-        >a {
-            color: $white !important;
-
-            i {
-                color: $white !important;
-            }
-        }
-
-        >i,
-        .active {
-            color: $white !important;
-        }
-    }
-
-    #sidebar-menu {
-        ul {
-            li {
-                &.menu-title {
-                    color: rgba($white, 0.6);
-                }
-
-                a {
-                    color: rgba($white, 0.6);
-
-                    i {
-                        color: rgba($white, 0.6);
-                    }
-
-                    &.waves-effect {
-                        .waves-ripple {
-                            background: rgba($white, 0.1);
-                        }
-                    }
-
-                    &:hover {
-                        color: $white;
-
-                        i {
-                            color: $white;
-                        }
-                    }
-                }
-
-                ul.sub-menu {
-                    li {
-                        a {
-                            color: rgba($white, .5);
-
-                            &:hover {
-                                color: $white;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &.vertical-collpsed {
-        .vertical-menu {
-            #sidebar-menu {
-                >ul {
-                    >li {
-                        &:hover>a {
-                            background-color: lighten($primary, 2%);
-                            color: $white;
-                            display: block;
-
-                            i {
-                                color: $white;
-                            }
-                        }
-                    }
-                }
-
-                ul {
-                    li {
-                        &.mm-active {
-                            .active {
-                                color: $sidebar-menu-item-active-color !important;
-                            }
-                        }
-
-                        ul.sub-menu {
-                            li {
-                                a {
-                                    &:hover {
-                                        color: $sidebar-menu-item-active-color;
-                                    }
-                                }
-
-                                &.mm-active {
-                                    color: $sidebar-menu-item-active-color !important;
-
-                                    >a {
-                                        color: $sidebar-menu-item-active-color !important;
-
-                                        i {
-                                            color: $sidebar-menu-item-active-color !important;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/lib/styles/app.scss b/src/lib/styles/app.scss
new file mode 100644
index 00000000..ba33f436
--- /dev/null
+++ b/src/lib/styles/app.scss
@@ -0,0 +1,21 @@
+/*
+ * Top-level SCSS entry point for route-level styles.
+ *
+ * Each partial below collects the scoped <style> blocks from every
+ * `.svelte` file under a single route path. The conventional per-file
+ * class prefixes (cb-, pl-, cle-, ad-, …) provide the namespace
+ * isolation that Svelte's scope hashing used to provide.
+ *
+ * Loaded once from src/routes/+layout.svelte alongside the icon CSS.
+ */
+
+@import "pages/auth";
+@import "pages/chat";
+@import "pages/conversation";
+@import "pages/instruction";
+@import "pages/knowledge-base";
+@import "pages/agent";
+@import "pages/settings";
+
+@import "layout/vertical";
+@import "layout/root";
diff --git a/src/lib/styles/layout/_root.scss b/src/lib/styles/layout/_root.scss
new file mode 100644
index 00000000..d8e60583
--- /dev/null
+++ b/src/lib/styles/layout/_root.scss
@@ -0,0 +1,99 @@
+/*
+ * Root-level styles — consolidated from scoped <style> blocks in
+ * src/routes/+error.svelte and src/routes/+layout.svelte.
+ */
+
+
+/* ========================================================================
+ * src/routes/+error.svelte
+ * ======================================================================== */
+
+/* Gradient status code */
+.err-code {
+    background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+}
+
+/* Backdrop blob drift */
+.err-blob {
+    animation: err-blob-anim 16s ease-in-out infinite;
+
+    &-delayed {
+        animation-delay: -8s;
+    }
+}
+
+@keyframes err-blob-anim {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(-20px, 20px) scale(1.08); }
+}
+
+/* Buttons */
+.err-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 2.5rem;
+    padding: 0 1.25rem;
+    border: 1px solid transparent;
+    border-radius: 0.625rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        color 0.15s ease,
+        transform 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:active {
+        transform: translateY(1px);
+    }
+
+    i {
+        font-size: 1.125rem;
+        line-height: 1;
+    }
+
+    &-primary {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+        box-shadow:
+            0 1px 2px rgb(15 23 42 / 0.1),
+            0 8px 24px -8px color-mix(in srgb, var(--color-primary) 60%, transparent);
+
+        &:hover {
+            background-color: var(--color-primary-hover);
+            box-shadow:
+                0 1px 2px rgb(15 23 42 / 0.1),
+                0 12px 28px -8px color-mix(in srgb, var(--color-primary) 70%, transparent);
+        }
+    }
+
+    &-ghost {
+        background-color: rgb(255 255 255);
+        border-color: rgb(229 231 235);
+        color: rgb(55 65 81);
+
+        &:hover {
+            background-color: rgb(249 250 251);
+            border-color: rgb(209 213 219);
+        }
+
+        .dark & {
+            background-color: rgb(31 41 55);
+            border-color: rgb(55 65 81);
+            color: rgb(229 231 235);
+
+            &:hover {
+                background-color: rgb(55 65 81);
+                border-color: rgb(75 85 99);
+            }
+        }
+    }
+}
diff --git a/src/lib/styles/layout/_vertical.scss b/src/lib/styles/layout/_vertical.scss
new file mode 100644
index 00000000..92d67fd4
--- /dev/null
+++ b/src/lib/styles/layout/_vertical.scss
@@ -0,0 +1,264 @@
+/*
+ * Vertical layout styles — consolidated from scoped <style> blocks
+ * in src/routes/VerticalLayout (Sidebar, Header, layout root).
+ */
+
+
+/* ========================================================================
+ * src/routes/VerticalLayout/Header.svelte
+ * ========================================================================
+ * Collapsed-sidebar variants used inside this component. We resolve them
+ * via custom selectors because `body.vertical-collpsed` is a global
+ * state. The width/padding rules are gated to >=lg because the sidebar
+ * collapse only takes effect on desktop — on mobile the logo container
+ * stays at intrinsic width so the toggle button hugs it.
+ */
+body.vertical-collpsed {
+    @media (min-width: 1024px) {
+        .vertical-collpsed\:lg\:w-\[var\(--sidebar-collapsed-width\)\] {
+            width: var(--sidebar-collapsed-width);
+        }
+        .vertical-collpsed\:lg\:px-2 {
+            padding-inline: 0.5rem;
+        }
+    }
+    .vertical-collpsed\:h-\[22px\] {
+        height: 22px;
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/VerticalLayout/Index.svelte
+ * ========================================================================
+ * Body-class-driven layout states. These selectors mirror the JS toggles
+ * in Header.svelte (hamburger) and RightSidebar.svelte (settings) so we
+ * don't need to rewire any of the existing toggle logic.
+ */
+
+/* Collapsed sidebar (icon-only) on desktop */
+body.vertical-collpsed .main-content {
+    margin-left: var(--sidebar-collapsed-width);
+}
+
+/* Mobile-first: sidebar is hidden by default below lg */
+@media (max-width: 1023.98px) {
+    .vertical-menu {
+        transform: translateX(-100%);
+        transition: transform 0.25s ease;
+    }
+    body.sidebar-enable .vertical-menu {
+        transform: translateX(0);
+    }
+    .main-content {
+        margin-left: 0 !important;
+    }
+}
+
+/* Right-bar slide-in */
+body.right-bar-enabled {
+    .right-bar { right: 0; }
+    .rightbar-overlay { display: block; }
+}
+
+
+/* ========================================================================
+ * src/routes/VerticalLayout/Sidebar.svelte
+ * ========================================================================
+ * Sidebar menu styling. These rules are global because the menu
+ * structure is generated dynamically and the JS adds/removes mm-active,
+ * mm-show, etc.
+ */
+#sidebar-menu {
+    ul li a {
+        display: block;
+        padding: 0.625rem 1.5rem;
+        color: var(--sidebar-menu-item-color);
+        position: relative;
+        font-size: 13px;
+        line-height: 1.5;
+        transition: color 0.2s, background-color 0.2s;
+        cursor: pointer;
+
+        i {
+            display: inline-block;
+            min-width: 1.75rem;
+            padding-bottom: 0.125em;
+            font-size: 1.25rem;
+            line-height: 1.40625rem;
+            vertical-align: middle;
+            color: var(--sidebar-menu-item-icon-color);
+            transition: color 0.2s;
+        }
+
+        &:hover,
+        &:hover i {
+            color: var(--sidebar-menu-item-hover-color);
+        }
+    }
+
+    /* Has-arrow chevron */
+    .has-arrow:after {
+        content: "\F0140";
+        font-family: 'Material Design Icons';
+        display: block;
+        float: right;
+        transition: transform 0.2s;
+        font-size: 1rem;
+    }
+    .revert-arrow:after,
+    .mm-active > .has-arrow:after {
+        transform: rotate(-180deg);
+    }
+
+    /* Submenu collapse/expand */
+    .sub-menu {
+        padding: 0;
+        list-style: none;
+
+        &.mm-collapse { display: none; }
+        &.mm-show {
+            display: block;
+            background-color: rgba(0, 0, 0, 0.02);
+        }
+
+        li a {
+            padding: 0.4rem 1.5rem 0.4rem 3.5rem;
+            font-size: 13px;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.03);
+            }
+        }
+
+        .sub-menu li a {
+            padding: 0.4rem 1.5rem 0.4rem 4.5rem;
+        }
+    }
+
+    /* Active state */
+    .mm-active,
+    .mm-active > a,
+    .mm-active > a i,
+    .mm-active .active,
+    .mm-active .active i {
+        color: var(--color-primary) !important;
+    }
+}
+
+
+/* ========================================================================
+ * Collapsed (icon-only) sidebar — all selectors below are scoped under
+ * `body.vertical-collpsed`.
+ * ======================================================================== */
+body.vertical-collpsed {
+    .vertical-menu {
+        width: var(--sidebar-collapsed-width);
+    }
+
+    #sidebar-menu {
+        .menu-title,
+        .has-arrow:after,
+        > ul > li > a > span {
+            display: none;
+        }
+
+        /* Auto-hide any in-flow sub-menus when collapsed (mm-show carried over
+           from the expanded state would otherwise leak items into the 70px
+           column). The hover-to-show floating panel below overrides this
+           with !important. */
+        .sub-menu {
+            display: none;
+        }
+
+        > ul > li {
+            position: relative;
+            white-space: nowrap;
+
+            > a {
+                text-align: center;
+                padding: 15px 0;
+                transition: none;
+            }
+
+            /* Leaf items (no sub-menu): expand on hover to reveal the label inline */
+            &:not(:has(> ul.sub-menu)):hover > a {
+                width: calc(var(--sidebar-collapsed-width) + 200px);
+                position: relative;
+                z-index: 2;
+                background-color: rgba(0, 0, 0, 0.025);
+                color: var(--color-primary);
+                text-align: left;
+                padding: 15px 20px;
+
+                > i { color: var(--color-primary); }
+                > span {
+                    display: inline;
+                    padding-left: 0.75rem;
+                }
+            }
+
+            /* Parent items (with sub-menu): just tint the icon — the floating panel does the work */
+            &:has(> ul.sub-menu):hover > a {
+                background-color: rgba(0, 0, 0, 0.025);
+                color: var(--color-primary);
+
+                > i { color: var(--color-primary); }
+            }
+
+            /* Floating sub-menu panel (first level under collapsed parent) */
+            &:hover > ul.sub-menu {
+                display: block !important;
+                position: fixed;
+                left: var(--sidebar-collapsed-width);
+                width: 200px;
+                height: auto;
+                z-index: 9999;
+                padding: 0.375rem 0;
+                background-color: var(--sidebar-bg);
+                border: 1px solid rgb(229 231 235);
+                border-left: 0;
+                border-radius: 0 0.375rem 0.375rem 0;
+                box-shadow: 6px 6px 18px -4px rgba(54, 61, 71, 0.12);
+
+                /* Reset over-indented padding from the cascade so items fit the floating panel */
+                li a {
+                    padding: 0.5rem 1rem;
+                    width: 100%;
+                    text-align: left;
+
+                    &:hover {
+                        background-color: rgba(0, 0, 0, 0.04);
+                        color: var(--color-primary);
+                    }
+                }
+
+                /* Active state inside floating panel */
+                .mm-active > a {
+                    background-color: rgba(0, 0, 0, 0.04);
+                }
+
+                /* Nested floating sub-menu (second level) */
+                li:hover > ul.sub-menu {
+                    display: block !important;
+                    position: fixed;
+                    left: calc(var(--sidebar-collapsed-width) + 200px);
+                    width: 200px;
+                    height: auto;
+                    z-index: 9999;
+                    padding: 0.375rem 0;
+                    background-color: var(--sidebar-bg);
+                    border: 1px solid rgb(229 231 235);
+                    border-radius: 0.375rem;
+                    box-shadow: 6px 6px 18px -4px rgba(54, 61, 71, 0.12);
+
+                    li a {
+                        padding: 0.5rem 1rem;
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/src/lib/styles/pages/_agent.scss b/src/lib/styles/pages/_agent.scss
new file mode 100644
index 00000000..41f2816a
--- /dev/null
+++ b/src/lib/styles/pages/_agent.scss
@@ -0,0 +1,4902 @@
+/*
+ * Agent page styles — consolidated from scoped <style> blocks in
+ * the src/routes/page/agent folder.
+ */
+
+
+/* ========================================================================
+ * src/routes/page/agent/+page.svelte
+ * ======================================================================== */
+
+
+/* ===== Header (actions + filter row) ===== */
+
+
+.ag-header {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		align-items: center;
+		gap: 0.9375rem;
+		margin-bottom: 1.5rem;
+	}
+
+
+.ag-header-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+
+.ag-filter {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.625rem;
+		align-items: center;
+	}
+
+
+@media (max-width: 1024px) {
+		.ag-header {
+			flex-direction: column;
+			justify-content: center;
+			gap: 0.75rem;
+		}
+		.ag-header-actions {
+			width: 100%;
+			justify-content: center;
+		}
+		.ag-filter {
+			width: 100%;
+			flex-direction: column;
+			gap: 0.5rem;
+		}
+		.ag-filter > * {
+			width: 100% !important;
+		}
+	}
+
+
+/* ===== Search input ===== */
+
+
+.ag-input {
+		height: 2.25rem;
+		width: fit-content;
+		min-width: 12rem;
+		padding: 0 0.75rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.5rem;
+		background-color: rgb(249 250 251);
+		font-size: 0.875rem;
+		line-height: 1.4;
+		color: rgb(17 24 39);
+		font-family: inherit;
+		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&::placeholder {
+				color: var(--color-muted);
+				opacity: 1;
+		}
+
+
+		&:hover:not(:focus) {
+				border-color: rgb(209 213 219);
+		}
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				background-color: rgb(255 255 255);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+}
+
+
+/* ===== Primary action button ("New Agent") ===== */
+
+
+.ag-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: 2.25rem;
+		padding: 0 0.95rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		border: 1px solid transparent;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
+
+
+		&:active:not(:disabled) {
+				transform: translateY(1px);
+		}
+
+
+		&:focus-visible {
+				outline: 2px solid var(--color-primary);
+				outline-offset: 2px;
+		}
+
+
+		&:disabled {
+				opacity: 0.55;
+				cursor: not-allowed;
+		}
+}
+
+
+.ag-btn-primary {
+		background-color: var(--color-primary);
+		border-color: var(--color-primary);
+		color: rgb(255 255 255);
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+			0 4px 12px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
+
+
+		&:hover:not(:disabled) {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+}
+
+
+/* Ghost / secondary variant for auxiliary actions (e.g. Import Agent).
+	   Outlined treatment that sits visually quieter next to the filled
+	   primary button while still picking up the design token on hover. */
+
+
+.ag-btn-ghost {
+		background-color: rgb(255 255 255);
+		border-color: color-mix(in srgb, var(--color-primary) 35%, rgb(229 231 235));
+		color: var(--color-primary);
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+
+
+		&:hover:not(:disabled) {
+				background-color: color-mix(in srgb, var(--color-primary) 8%, rgb(255 255 255));
+				border-color: var(--color-primary);
+				box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary) 35%, transparent);
+		}
+
+
+		.dark & {
+				background-color: rgb(31 41 55);
+				border-color: color-mix(in srgb, var(--color-primary) 45%, rgb(55 65 81));
+				color: color-mix(in srgb, var(--color-primary) 85%, white);
+		}
+
+
+		.dark &:hover:not(:disabled) {
+				background-color: color-mix(in srgb, var(--color-primary) 18%, rgb(31 41 55));
+		}
+}
+
+
+/* ===== Icon-only buttons (Search / Reset) ===== */
+
+
+.ag-btn-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 2.25rem;
+		min-width: 2.25rem;
+		padding: 0 0.5rem;
+		border: 1px solid transparent;
+		border-radius: 0.5rem;
+		color: rgb(255 255 255);
+		cursor: pointer;
+		transition: background-color 0.15s ease, filter 0.15s ease, transform 0.2s ease;
+
+
+		& i {
+				font-size: 1.125rem;
+				line-height: 1;
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+}
+
+
+.ag-btn-icon-info {
+		background-color: var(--color-info);
+		border-color: var(--color-info);
+
+
+		&:hover {
+				filter: brightness(0.95);
+		}
+}
+
+
+.ag-btn-icon-warning {
+		background-color: var(--color-warning);
+		border-color: var(--color-warning);
+
+
+		&:hover {
+				filter: brightness(0.95);
+		}
+}
+
+
+/* ===== Card grid ===== */
+
+
+.ag-grid {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 1.5rem;
+		margin-bottom: 1rem;
+	}
+
+
+/* ===== Pagination spacing ===== */
+
+
+.ag-pagination {
+		margin-bottom: 1.5rem;
+	}
+
+
+@media (max-width: 1199.98px) {
+		.ag-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+
+
+@media (max-width: 575.98px) {
+		.ag-grid {
+			grid-template-columns: minmax(0, 1fr);
+		}
+	}
+
+
+/* ===== Dark mode ===== */
+
+
+.ag-input {
+
+
+		.dark & {
+				background-color: rgb(31 41 55);
+				border-color: rgb(55 65 81);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:focus {
+				background-color: rgb(17 24 39);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/+page.svelte
+ * ======================================================================== */
+
+
+.ad-page {
+    display: flex;
+    flex-direction: column;
+}
+
+
+/* ===== Two-column grid (40 / 60) =====
+   Uses CSS Grid so columns are explicitly sized; flex would wrap because
+   the cards' min-content is wider than 40% of the page. */
+
+
+.ad-grid {
+    display: grid;
+    grid-template-columns: 2fr 3fr;
+    gap: 1.125rem;
+}
+
+
+.ad-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+    min-width: 0;
+}
+
+
+@media (max-width: 991.98px) {
+    .ad-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+}
+
+
+/* ===== Section wrapper =====
+   Each ad-section hosts a panel card. The card itself owns its background
+   and shadow; we just give a smooth transform-on-hover affordance to lift
+   the card subtly when the user is interacting with this region. */
+
+
+.ad-section {
+		display: block;
+		transition: transform 0.2s ease, filter 0.2s ease;
+
+
+		&:hover {
+				transform: translateY(-1px);
+		}
+}
+
+
+@media (max-width: 423px) {
+    .ad-section {
+        height: fit-content;
+    }
+}
+
+
+/* ===== Action bar (Save / Delete) ===== */
+
+
+.ad-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.625rem;
+    margin: 1.75rem 0 1rem;
+    padding: 0.875rem 1rem;
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--color-primary) 4%, transparent),
+        transparent 65%
+    );
+    border-radius: 0.875rem;
+}
+
+
+/* ===== Buttons ===== */
+
+
+.ad-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.45rem;
+		height: 2.375rem;
+		padding: 0 1.125rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		letter-spacing: 0.01em;
+		line-height: 1;
+		border: 1px solid transparent;
+		border-radius: 0.625rem;
+		cursor: pointer;
+		transition: background 0.18s ease,
+        border-color 0.18s ease,
+        color 0.18s ease,
+        transform 0.12s ease,
+        box-shadow 0.18s ease,
+        filter 0.18s ease;
+
+
+		&:active:not(:disabled) {
+				transform: translateY(1px);
+		}
+
+
+		&:disabled {
+				opacity: 0.55;
+				cursor: not-allowed;
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+.ad-btn-primary {
+		background: linear-gradient(
+        135deg,
+        var(--color-primary),
+        color-mix(in srgb, var(--color-primary) 78%, black)
+    );
+		color: rgb(255 255 255);
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset,
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 60%, transparent),
+        0 2px 4px -2px rgb(15 23 42 / 0.1);
+
+
+		&:hover:not(:disabled) {
+				transform: translateY(-1px);
+				box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset,
+        0 8px 18px -6px color-mix(in srgb, var(--color-primary) 70%, transparent),
+        0 3px 6px -2px rgb(15 23 42 / 0.12);
+				filter: brightness(1.05);
+		}
+}
+
+
+.ad-btn-danger {
+		background: linear-gradient(
+        135deg,
+        var(--color-danger),
+        color-mix(in srgb, var(--color-danger) 78%, black)
+    );
+		color: rgb(255 255 255);
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset,
+        0 4px 12px -4px color-mix(in srgb, var(--color-danger) 55%, transparent),
+        0 2px 4px -2px rgb(15 23 42 / 0.1);
+
+
+		&:hover:not(:disabled) {
+				transform: translateY(-1px);
+				box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset,
+        0 8px 18px -6px color-mix(in srgb, var(--color-danger) 65%, transparent),
+        0 3px 6px -2px rgb(15 23 42 / 0.12);
+				filter: brightness(1.05);
+		}
+}
+
+
+/* Ghost / secondary variant for non-destructive auxiliary actions
+   (e.g. Export Agent). Sits visually quieter than the filled
+   primary/danger gradients while still picking up the design tokens
+   on hover so the action bar reads as a unified cluster. */
+
+
+.ad-btn-ghost {
+		background-color: rgb(255 255 255);
+		border-color: color-mix(in srgb, var(--color-primary) 35%, rgb(229 231 235));
+		color: var(--color-primary);
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 1px 0 rgb(255 255 255 / 0.6) inset;
+
+
+		&:hover:not(:disabled) {
+				background-color: color-mix(in srgb, var(--color-primary) 8%, rgb(255 255 255));
+				border-color: var(--color-primary);
+				transform: translateY(-1px);
+				box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--color-primary) 35%, transparent),
+        0 1px 0 rgb(255 255 255 / 0.6) inset;
+		}
+
+
+		.dark & {
+				background-color: rgb(31 41 55);
+				border-color: color-mix(in srgb, var(--color-primary) 45%, rgb(55 65 81));
+				color: color-mix(in srgb, var(--color-primary) 85%, white);
+		}
+
+
+		.dark &:hover:not(:disabled) {
+				background-color: color-mix(in srgb, var(--color-primary) 18%, rgb(31 41 55));
+		}
+}
+
+
+.dark .ad-action-bar {
+    background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--color-primary) 10%, transparent),
+        transparent 65%
+    );
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
+ * ======================================================================== */
+
+
+.af-json-editor {/* define a custom theme color */
+		--jse-theme-color: var(--color-primary);
+		--jse-theme-color-highlight: #687177;
+		position: relative;
+		background: linear-gradient(
+            180deg,
+            rgb(255 255 255),
+            color-mix(in srgb, var(--color-primary) 1.5%, rgb(255 255 255))
+        );
+		border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset,
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 35%, rgb(15 23 42 / 0.12));
+		overflow: hidden;
+
+
+		.dark & {
+				background: linear-gradient(
+            180deg,
+            rgb(31 41 55),
+            color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55))
+        );
+				border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+				box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset,
+        0 1px 2px rgb(0 0 0 / 0.2),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 45%, rgb(0 0 0 / 0.4));
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.ai-card {
+    position: relative;
+    background:
+        linear-gradient(
+            180deg,
+            rgb(255 255 255),
+            color-mix(in srgb, var(--color-primary) 1.5%, rgb(255 255 255))
+        );
+    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.7) inset,
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 35%, rgb(15 23 42 / 0.12));
+    overflow: hidden;
+}
+
+
+.ai-card-header {
+    padding: 1.125rem 1.375rem;
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 8%, transparent),
+            color-mix(in srgb, var(--color-primary) 2%, transparent) 60%
+        );
+    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgb(229 231 235));
+}
+
+
+.ai-agent-name {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    letter-spacing: 0.01em;
+}
+
+
+.ai-card-body {
+    padding: 1.375rem;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+
+/* ===== Section ===== */
+
+
+.ai-section {
+		margin-bottom: 1rem;
+
+
+		&:last-child {
+				margin-bottom: 0;
+		}
+}
+
+
+.ai-section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-bottom: 0.5rem;
+}
+
+
+.ai-section-label {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+    margin-bottom: 0.5rem;
+}
+
+
+.ai-section-header .ai-section-label {
+    margin-bottom: 0;
+}
+
+
+/* ===== Add channel button ===== */
+
+
+.ai-add-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-primary);
+		cursor: pointer;
+		font-size: 1rem;
+		line-height: 1;
+		transition: color 0.15s ease, transform 0.15s ease;
+
+
+		&:hover {
+				color: var(--color-primary-hover);
+				transform: scale(1.1);
+		}
+
+
+		& i {
+				font-size: 1.25rem;
+				line-height: 1;
+		}
+}
+
+
+/* ===== Textareas ===== */
+
+
+.ai-textarea {
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.5rem;
+		background-color: rgb(249 250 251);
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: rgb(17 24 39);
+		resize: none;
+		scrollbar-width: thin;
+		font-family: inherit;
+		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&::placeholder {
+				color: var(--color-muted);
+		}
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				background-color: rgb(255 255 255);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .ai-card {
+    background:
+        linear-gradient(
+            180deg,
+            rgb(31 41 55),
+            color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55))
+        );
+    border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.04) inset,
+        0 1px 2px rgb(0 0 0 / 0.2),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 45%, rgb(0 0 0 / 0.4));
+}
+
+
+.dark .ai-card-header {
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 14%, transparent),
+            color-mix(in srgb, var(--color-primary) 4%, transparent) 60%
+        );
+    border-bottom-color: color-mix(in srgb, var(--color-primary) 18%, rgb(55 65 81));
+}
+
+
+.dark .ai-agent-name,
+.dark .ai-section-label {
+    color: rgb(229 231 235);
+}
+
+
+.dark .ai-textarea {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+ * ======================================================================== */
+
+
+.llmc-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+}
+
+
+.llmc-card-body {
+    padding: 1.25rem;
+}
+
+
+.llmc-header {
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+
+.llmc-title {
+    margin: 0.25rem 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.llmc-brand-logo {
+    height: 50px;
+    width: auto;
+    display: inline-block;
+}
+
+
+.llmc-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 0 0.625rem;
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .llmc-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .llmc-title {
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.ao-card {
+    position: relative;
+    background:
+        linear-gradient(
+            180deg,
+            rgb(255 255 255),
+            color-mix(in srgb, var(--color-primary) 1.5%, rgb(255 255 255))
+        );
+    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.7) inset,
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 35%, rgb(15 23 42 / 0.12));
+    overflow: hidden;
+}
+
+
+.ao-card-header {
+    padding: 1.125rem 1.375rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgb(229 231 235));
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 8%, transparent),
+            color-mix(in srgb, var(--color-primary) 2%, transparent) 60%
+        );
+}
+
+
+.ao-card-body {
+    padding: 1.125rem 1.375rem;
+}
+
+
+/* ===== Header (avatar + name + updated) ===== */
+
+
+.ao-header-block {
+    text-align: center;
+}
+
+
+.ao-avatar-row {
+    display: flex;
+    justify-content: center;
+    position: relative;
+}
+
+
+.ao-avatar-img {
+    width: 50px;
+    height: 50px;
+    display: block;
+    margin: 0 auto;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+
+.ao-chat-btn {
+		position: absolute;
+		top: 20%;
+		left: calc(50% + 30px);
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		height: 1.875rem;
+		padding: 0 0.625rem;
+		background-color: color-mix(in srgb, var(--color-info) 14%, transparent);
+		color: var(--color-info);
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.15s ease, color 0.15s ease;
+
+
+		&:hover {
+				background-color: var(--color-info);
+				color: rgb(255 255 255);
+		}
+
+
+		& i {
+				font-size: 0.875rem;
+				line-height: 1;
+		}
+}
+
+
+.ao-name {
+    margin: 0.25rem 0;
+    display: flex;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.ao-updated {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--color-muted);
+}
+
+
+/* ===== Properties table ===== */
+
+
+.ao-table-wrap {
+    width: 100%;
+}
+
+
+.ao-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.8125rem;
+
+
+		& tr {
+				border-top: 1px solid rgb(243 244 246);
+		}
+
+
+		& tr:first-child {
+				border-top: 0;
+		}
+}
+
+
+.ao-key {
+    width: 45%;
+    padding: 0.625rem 0.5rem 0.625rem 0;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    text-align: left;
+    vertical-align: middle;
+}
+
+
+.ao-val {
+    padding: 0.625rem 0;
+    color: rgb(55 65 81);
+    vertical-align: middle;
+}
+
+
+/* ===== Inputs ===== */
+
+
+.ao-input {
+		height: 2rem;
+		width: 100%;
+		padding: 0 0.5rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		background-color: rgb(249 250 251);
+		font-size: 0.8125rem;
+		color: rgb(17 24 39);
+		font-family: inherit;
+		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&::placeholder {
+				color: var(--color-muted);
+		}
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				background-color: rgb(255 255 255);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+}
+
+
+.ao-input-number {
+    width: 50%;
+    min-width: 100px;
+    text-align: center;
+}
+
+
+/* ===== Checkbox ===== */
+
+
+.ao-check {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    cursor: pointer;
+    font-size: 0.8125rem;
+    color: rgb(55 65 81);
+    width: fit-content;
+}
+
+
+.ao-checkbox {
+		appearance: none;
+		-webkit-appearance: none;
+		width: 1rem;
+		height: 1rem;
+		border: 1px solid rgb(209 213 219);
+		border-radius: 0.25rem;
+		background-color: rgb(255 255 255);
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&:hover {
+				border-color: var(--color-primary);
+		}
+
+
+		&:focus-visible {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&:checked {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.875rem;
+		}
+}
+
+
+/* ===== List (profiles / labels) ===== */
+
+
+.ao-list {
+    width: 95%;
+    max-width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+
+.ao-list-row {
+		display: flex;
+		align-items: center;
+		gap: 0.3125rem;
+		margin-bottom: 0.3125rem;
+
+
+		& .ao-input {
+				flex: 1 1 auto;
+				border: 1px solid rgb(229 231 235);
+		}
+}
+
+
+.ao-list-remove {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+
+
+		& i {
+				cursor: pointer;
+				color: var(--color-danger);
+				font-size: 1.125rem;
+				line-height: 1;
+				transition: filter 0.15s ease;
+		}
+
+
+		& i:hover {
+				filter: brightness(0.9);
+		}
+}
+
+
+.ao-list-add {
+		font-size: 1.25rem;
+		color: var(--color-primary);
+		display: inline-flex;
+		align-items: center;
+
+
+		& i {
+				cursor: pointer;
+				transition: color 0.15s ease, transform 0.15s ease;
+		}
+
+
+		& i:hover {
+				color: var(--color-primary-hover);
+				transform: scale(1.1);
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .ao-card {
+    background:
+        linear-gradient(
+            180deg,
+            rgb(31 41 55),
+            color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55))
+        );
+    border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.04) inset,
+        0 1px 2px rgb(0 0 0 / 0.2),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 45%, rgb(0 0 0 / 0.4));
+}
+
+
+.dark .ao-card-header {
+    border-bottom-color: color-mix(in srgb, var(--color-primary) 18%, rgb(55 65 81));
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 14%, transparent),
+            color-mix(in srgb, var(--color-primary) 4%, transparent) 60%
+        );
+}
+
+
+.dark .ao-name,
+.dark .ao-key,
+.dark .ao-val,
+.dark .ao-check {
+    color: rgb(229 231 235);
+}
+
+
+.dark .ao-table tr {
+    border-top-color: rgb(55 65 81);
+}
+
+
+.dark .ao-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .ao-checkbox {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.arr-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+}
+
+
+.arr-card-body { padding: 1.25rem; }
+
+
+.arr-header { text-align: center; margin-bottom: 0.5rem; }
+
+
+.arr-title {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+/* ===== Rule container ===== */
+
+
+.arr-rule {
+
+
+		& .collapsible-card-header {
+				margin-top: 0.3125rem;
+				margin-bottom: 0.3125rem;
+				padding-left: 0.625rem;
+				border-radius: 0.375rem;
+				transition: background-color 0.15s ease;
+		}
+
+
+		& .collapsible-card-header:hover {
+				background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
+		}
+}
+
+
+.arr-rule-header {
+    margin: 0;
+    padding: 0.375rem 0 0;
+    border: none;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.arr-rule-body {
+    padding: 0 0.625rem 0.5rem 0.625rem;
+    overflow-x: auto;
+}
+
+
+/* ===== Table ===== */
+
+
+.arr-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+}
+
+
+.arr-tr {
+		border-top: 1px solid rgb(229 231 235);
+
+
+		&:first-child {
+				border-top: 0;
+		}
+
+
+		&:last-child, &:last-child .arr-key, &:last-child .arr-value {
+				border-bottom: none;
+		}
+}
+
+
+.arr-key {
+    width: 45%;
+    padding: 0.5rem 0.625rem;
+    font-weight: 600;
+    color: rgb(75 85 99);
+    text-align: left;
+    vertical-align: top;
+}
+
+
+.arr-value {
+    padding: 0.5rem 0.625rem;
+    vertical-align: top;
+    word-break: break-word;
+}
+
+
+.arr-value-link {
+		cursor: pointer;
+		color: var(--color-primary);
+		transition: color 0.15s ease;
+
+
+		&:hover {
+				color: var(--color-primary-hover);
+				text-decoration: underline;
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .arr-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .arr-title,
+.dark .arr-rule-header {
+    color: rgb(229 231 235);
+}
+
+
+.dark .arr-table { color: rgb(229 231 235); }
+
+
+.dark .arr-key { color: rgb(156 163 175); }
+
+
+.dark .arr-tr { border-top-color: rgb(55 65 81); }
+
+
+.dark .arr-rule .collapsible-card-header:hover {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
+ * ======================================================================== */
+
+
+.kbi-wrapper {
+    border: 1px dotted var(--color-primary);
+    border-radius: 0.375rem;
+    padding: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
+}
+
+
+.kbi-row { display: flex; }
+
+
+.kbi-row-primary { display: flex; }
+
+
+.kbi-row-secondary { display: flex; flex-direction: column; }
+
+
+.kbi-cell { display: flex; align-items: center; }
+
+
+.kbi-label {
+    width: 30%;
+    font-size: 0.9375rem;
+    flex-wrap: wrap;
+    color: rgb(55 65 81);
+}
+
+
+.kbi-label-strong { font-weight: 700; display: flex; gap: 0.625rem; }
+
+
+.kbi-tooltip-wrap { display: flex; gap: 0.3125rem; align-items: center; }
+
+
+.kbi-value { width: 70%; display: flex; gap: 0.3125rem; }
+
+
+.kbi-input-wrap { width: 95%; }
+
+
+.kbi-delete { width: 5%; }
+
+
+.kbi-collapse-toggle {
+		cursor: pointer;
+		font-size: 1rem;
+		color: rgb(75 85 99);
+		transition: transform 0.2s ease-in-out, color 0.15s ease;
+
+
+		&.rotated {
+				transform: rotate(90deg);
+		}
+
+
+		&:hover {
+				color: var(--color-primary);
+		}
+}
+
+
+.kbi-delete-icon {
+		cursor: pointer;
+		font-size: 1rem;
+		color: var(--color-danger);
+		transition: filter 0.15s ease;
+
+
+		&:hover {
+				filter: brightness(1.1);
+		}
+}
+
+
+.kbi-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.kbi-checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.kbi-checkbox-box {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+
+.kbi-checkbox-input {
+
+
+		&:checked + .kbi-checkbox-box {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.75rem;
+		}
+
+
+		&:focus-visible + .kbi-checkbox-box {
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+		}
+}
+
+
+/* The collection Select is rendered via the Select component; only the
+   confidence text input still uses .kbi-input here. */
+
+
+.kbi-input {
+    width: 100%;
+    padding: 0.4375rem 0.625rem;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: rgb(17 24 39);
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+
+.kbi-input-number { text-align: center; }
+
+
+.kbi-input {
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&:disabled {
+				background-color: rgb(243 244 246);
+				cursor: not-allowed;
+				color: var(--color-muted);
+		}
+}
+
+
+.kbi-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1875rem;
+    border-top: 1px dotted var(--color-primary);
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+}
+
+
+.kbi-list-item { display: flex; }
+
+
+@media (max-width: 1250px) {
+    .kbi-row-primary { flex-direction: column; }
+    .kbi-row .kbi-label,
+    .kbi-row .kbi-value { width: 100%; }
+    .kbi-row .kbi-value { flex-direction: column; }
+    .kbi-row .kbi-input-wrap,
+    .kbi-row .kbi-delete { width: 100%; }
+    .kbi-row .kbi-delete {
+        display: flex;
+        justify-content: flex-end;
+        align-items: end;
+        margin-top: 0.375rem;
+    }
+}
+
+
+.dark .kbi-wrapper {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .kbi-label { color: rgb(229 231 235); }
+
+
+.dark .kbi-checkbox-box {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+.kbi-input {
+
+
+		.dark & {
+				background-color: rgb(17 24 39);
+				border-color: rgb(55 65 81);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:disabled {
+				background-color: rgb(31 41 55);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
+ * ======================================================================== */
+
+
+.akb-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+    overflow: hidden;
+}
+
+
+.akb-card-body { padding: 1.25rem; }
+
+
+.akb-header { text-align: center; margin-bottom: 0.75rem; }
+
+
+.akb-title {
+    margin: 0.25rem 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.akb-subtitle {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-muted);
+}
+
+
+.akb-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 0 0.625rem;
+}
+
+
+.akb-add { display: flex; justify-content: center; padding-top: 0.25rem; }
+
+
+.akb-add-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.4375rem 0.875rem;
+		border: 1px solid var(--color-primary);
+		border-radius: 0.375rem;
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+
+
+		&:hover {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+@media (max-width: 1250px) {
+    .akb-list { padding: 0 0.3125rem; }
+}
+
+
+.dark .akb-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .akb-title { color: rgb(229 231 235); }
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.cc-card {
+    padding: 0.625rem;
+    border: 1px dashed var(--color-primary);
+    border-radius: 0.5rem;
+    background-color: color-mix(in srgb, var(--color-primary) 3%, transparent);
+}
+
+
+/* ===== Header (collapse trigger) ===== */
+
+
+.cc-header {
+		text-align: center;
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+
+
+		&:hover .cc-header-title {
+				opacity: 0.8;
+		}
+}
+
+
+.cc-header-title {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: opacity 0.15s ease;
+}
+
+
+.cc-inherit-badge {
+    margin-bottom: 0.75rem;
+    font-size: 0.8125rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--color-muted);
+}
+
+
+.cc-muted {
+    color: var(--color-muted);
+}
+
+
+/* ===== Body / fields ===== */
+
+
+.cc-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+
+.cc-field {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+
+.cc-label {
+    flex: 0 0 25%;
+    max-width: 25%;
+    padding: 0 0.75rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: rgb(75 85 99);
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+}
+
+
+.cc-input-wrap {
+    flex: 0 0 75%;
+    max-width: 75%;
+    padding: 0 0.75rem;
+}
+
+
+/* ===== Inputs (selects are rendered via the Select component) ===== */
+
+
+.cc-input {
+    width: 100%;
+    padding: 0.4375rem 0.625rem;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: rgb(17 24 39);
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+
+.cc-input-number {
+    text-align: center;
+}
+
+
+.cc-input {
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+		}
+}
+
+
+/* ===== Responsive — stack label/input below 1250px ===== */
+
+
+@media (max-width: 1250px) {
+    .cc-field {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .cc-label,
+    .cc-input-wrap {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .cc-card {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .cc-header-title {
+    color: rgb(229 231 235);
+}
+
+
+.dark .cc-label {
+    color: rgb(156 163 175);
+}
+
+
+.dark .cc-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
+ * ======================================================================== */
+
+
+.bc-card {
+    padding: 0.625rem;
+    border: 1px dashed var(--color-primary);
+    border-radius: 0.5rem;
+    background-color: color-mix(in srgb, var(--color-primary) 3%, transparent);
+}
+
+
+.bc-header {
+		text-align: center;
+		cursor: pointer;
+		user-select: none;
+		outline: none;
+
+
+		&:hover .bc-header-title {
+				opacity: 0.8;
+		}
+}
+
+
+.bc-header-title {
+    margin: 0.25rem 0 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    transition: opacity 0.15s ease;
+}
+
+
+.bc-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    margin-top: 0.75rem;
+}
+
+
+.bc-field {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+
+.bc-label {
+    flex: 0 0 25%;
+    max-width: 25%;
+    padding: 0 0.75rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: rgb(75 85 99);
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0;
+}
+
+
+.bc-input-wrap {
+    flex: 0 0 75%;
+    max-width: 75%;
+    padding: 0 0.75rem;
+}
+
+
+/* Selects are rendered via the Select component, which owns its styles */
+
+
+@media (max-width: 1250px) {
+    .bc-field {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .bc-label,
+    .bc-input-wrap {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .bc-card {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .bc-header-title {
+    color: rgb(229 231 235);
+}
+
+
+.dark .bc-label {
+    color: rgb(156 163 175);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
+ * ======================================================================== */
+
+
+.mti-wrapper {
+    border: 1px dotted var(--color-primary);
+    border-radius: 0.375rem;
+    padding: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
+}
+
+
+.mti-row { display: flex; }
+
+
+.mti-row-primary { display: flex; }
+
+
+.mti-row-secondary { display: flex; flex-direction: column; }
+
+
+.mti-cell { display: flex; align-items: center; }
+
+
+.mti-label {
+    width: 30%;
+    font-size: 0.9375rem;
+    flex-wrap: wrap;
+    color: rgb(55 65 81);
+}
+
+
+.mti-label-strong { font-weight: 700; display: flex; gap: 0.625rem; }
+
+
+.mti-tooltip-wrap { display: flex; gap: 0.3125rem; align-items: center; }
+
+
+.mti-value { width: 70%; display: flex; gap: 0.3125rem; }
+
+
+.mti-input-wrap { width: 95%; }
+
+
+.mti-delete { width: 5%; }
+
+
+.mti-collapse-toggle {
+		cursor: pointer;
+		font-size: 1rem;
+		color: rgb(75 85 99);
+		transition: transform 0.2s ease-in-out, color 0.15s ease;
+
+
+		&.rotated {
+				transform: rotate(90deg);
+		}
+
+
+		&:hover {
+				color: var(--color-primary);
+		}
+}
+
+
+.mti-delete-icon {
+		cursor: pointer;
+		font-size: 1rem;
+		color: var(--color-danger);
+		transition: filter 0.15s ease;
+
+
+		&:hover {
+				filter: brightness(1.1);
+		}
+}
+
+
+.mti-add-list {
+		cursor: pointer;
+		font-size: 1.25rem;
+		color: var(--color-primary);
+		transition: transform 0.15s ease, color 0.15s ease;
+
+
+		&:hover {
+				color: var(--color-primary-hover);
+				transform: scale(1.1);
+		}
+}
+
+
+.mti-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.mti-checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.mti-checkbox-box {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+
+.mti-checkbox-input {
+
+
+		&:checked + .mti-checkbox-box {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.75rem;
+		}
+
+
+		&:focus-visible + .mti-checkbox-box {
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+		}
+}
+
+
+/* Server/Tool selects are rendered via the Select component; only the
+   disabled server_id readback text input still uses .mti-input here. */
+
+
+.mti-input {
+		width: 100%;
+		padding: 0.4375rem 0.625rem;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: rgb(17 24 39);
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		font-family: inherit;
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&:disabled {
+				background-color: rgb(243 244 246);
+				cursor: not-allowed;
+				color: var(--color-muted);
+		}
+}
+
+
+.mti-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1875rem;
+    border-top: 1px dotted var(--color-primary);
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+}
+
+
+.mti-list-item { display: flex; }
+
+
+@media (max-width: 1250px) {
+    .mti-row-primary { flex-direction: column; }
+    .mti-row .mti-label,
+    .mti-row .mti-value { width: 100%; }
+    .mti-row .mti-value { flex-direction: column; }
+    .mti-row .mti-input-wrap,
+    .mti-row .mti-delete { width: 100%; }
+    .mti-row .mti-delete {
+        display: flex;
+        justify-content: flex-end;
+        align-items: end;
+        margin-top: 0.375rem;
+    }
+    .mti-row-secondary .mti-content .mti-list-item {
+        flex-direction: column;
+        gap: 0.375rem;
+    }
+}
+
+
+.dark .mti-wrapper {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .mti-label { color: rgb(229 231 235); }
+
+
+.dark .mti-checkbox-box {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+.mti-input {
+
+
+		.dark & {
+				background-color: rgb(17 24 39);
+				border-color: rgb(55 65 81);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:disabled {
+				background-color: rgb(31 41 55);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
+ * ======================================================================== */
+
+
+.amt-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+}
+
+
+.amt-card-body { padding: 1.25rem; }
+
+
+.amt-header { text-align: center; margin-bottom: 0.75rem; }
+
+
+.amt-title {
+    margin: 0.25rem 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.amt-subtitle {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-muted);
+}
+
+
+.amt-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 0 0.625rem;
+}
+
+
+.amt-add { display: flex; justify-content: center; padding-top: 0.25rem; }
+
+
+.amt-add-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.4375rem 0.875rem;
+		border: 1px solid var(--color-primary);
+		border-radius: 0.375rem;
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+
+
+		&:hover {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+@media (max-width: 1250px) {
+    .amt-list { padding: 0 0.3125rem; }
+}
+
+
+.dark .amt-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .amt-title { color: rgb(229 231 235); }
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
+ * ======================================================================== */
+
+
+.ari-wrapper {
+    border: 1px dotted var(--color-primary);
+    border-radius: 0.375rem;
+    padding: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
+}
+
+
+.ari-row { display: flex; }
+
+
+.ari-row-primary { display: flex; }
+
+
+.ari-cell { display: flex; align-items: center; }
+
+
+.ari-label {
+    width: 30%;
+    font-size: 0.9375rem;
+    flex-wrap: wrap;
+    color: rgb(55 65 81);
+}
+
+
+.ari-label-strong { font-weight: 700; display: flex; gap: 0.625rem; }
+
+
+.ari-tooltip-wrap { display: flex; gap: 0.3125rem; align-items: center; }
+
+
+.ari-value { width: 70%; display: flex; gap: 0.3125rem; }
+
+
+.ari-input-wrap { width: 95%; }
+
+
+.ari-delete { width: 5%; }
+
+
+.ari-collapse-toggle {
+		cursor: pointer;
+		font-size: 1rem;
+		color: rgb(75 85 99);
+		transition: transform 0.2s ease-in-out, color 0.15s ease;
+
+
+		&.rotated {
+				transform: rotate(90deg);
+		}
+
+
+		&:hover {
+				color: var(--color-primary);
+		}
+}
+
+
+.ari-info-icon {
+    font-size: 1rem;
+    color: var(--color-primary);
+    cursor: help;
+}
+
+
+.ari-delete-icon {
+		cursor: pointer;
+		font-size: 1rem;
+		color: var(--color-danger);
+		transition: filter 0.15s ease;
+
+
+		&:hover {
+				filter: brightness(1.1);
+		}
+}
+
+
+.ari-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.ari-checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.ari-checkbox-box {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+
+.ari-checkbox-input {
+
+
+		&:checked + .ari-checkbox-box {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.75rem;
+		}
+
+
+		&:focus-visible + .ari-checkbox-box {
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+		}
+}
+
+
+/* Selects are rendered via the Select component, which owns its styles */
+
+
+@media (max-width: 1250px) {
+    .ari-row-primary { flex-direction: column; }
+    .ari-row .ari-label,
+    .ari-row .ari-value { width: 100%; }
+    .ari-row .ari-value { flex-direction: column; }
+    .ari-row .ari-input-wrap,
+    .ari-row .ari-delete { width: 100%; }
+    .ari-row .ari-delete {
+        display: flex;
+        justify-content: flex-end;
+        align-items: end;
+        margin-top: 0.375rem;
+    }
+}
+
+
+.dark .ari-wrapper {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .ari-label { color: rgb(229 231 235); }
+
+
+.dark .ari-checkbox-box {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
+ * ======================================================================== */
+
+
+.ar-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+}
+
+
+.ar-card-body { padding: 1.25rem; }
+
+
+.ar-header { text-align: center; margin-bottom: 0.75rem; }
+
+
+.ar-title {
+    margin: 0.25rem 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.ar-subtitle {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-muted);
+}
+
+
+.ar-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 0 0.625rem;
+}
+
+
+.ar-add { display: flex; justify-content: center; padding-top: 0.25rem; }
+
+
+.ar-add-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.4375rem 0.875rem;
+		border: 1px solid var(--color-primary);
+		border-radius: 0.375rem;
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+
+
+		&:hover {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+@media (max-width: 1250px) {
+    .ar-list { padding: 0 0.3125rem; }
+}
+
+
+.dark .ar-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .ar-title { color: rgb(229 231 235); }
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/templates/agent-template-config.svelte
+ * ======================================================================== */
+
+
+.tplc-content {
+    padding: 0.625rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.tplc-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+
+.tplc-section-title {
+    margin: 0 0 0.25rem 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.tplc-divider {
+    border: 0;
+    border-top: 1px solid rgb(229 231 235);
+    margin: 0.5rem 0;
+}
+
+
+.tplc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+
+.tplc-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 0;
+    white-space: nowrap;
+    color: rgb(75 85 99);
+}
+
+
+/* ===== Inputs ===== */
+
+
+/* Selects are rendered via the Select component, which owns its styles. */
+
+
+.tplc-input {
+		width: 100%;
+		padding: 0.3125rem 0.5rem;
+		font-size: 0.75rem;
+		line-height: 1.4;
+		color: rgb(17 24 39);
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+		font-family: inherit;
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
+				-webkit-appearance: none;
+				margin: 0;
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .tplc-section-title {
+    color: rgb(229 231 235);
+}
+
+
+.dark .tplc-label {
+    color: rgb(156 163 175);
+}
+
+
+.dark .tplc-divider {
+    border-top-color: rgb(55 65 81);
+}
+
+
+.dark .tplc-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.tpl-card {
+    position: relative;
+    background:
+        linear-gradient(
+            180deg,
+            rgb(255 255 255),
+            color-mix(in srgb, var(--color-primary) 1.5%, rgb(255 255 255))
+        );
+    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.7) inset,
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 35%, rgb(15 23 42 / 0.12));
+    overflow: hidden;
+}
+
+
+.tpl-card-header {
+    padding: 1.125rem 1.375rem;
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 8%, transparent),
+            color-mix(in srgb, var(--color-primary) 2%, transparent) 60%
+        );
+    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, rgb(229 231 235));
+}
+
+
+.tpl-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    letter-spacing: 0.01em;
+}
+
+
+.tpl-card-body {
+    padding: 1.375rem;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+
+/* ===== Section ===== */
+
+
+.tpl-section {
+    margin-bottom: 0;
+}
+
+
+.tpl-section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-bottom: 0.5rem;
+}
+
+
+.tpl-section-label {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+}
+
+
+/* ===== Add template button ===== */
+
+
+.tpl-add-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-primary);
+		cursor: pointer;
+		line-height: 1;
+		transition: color 0.15s ease, transform 0.15s ease;
+
+
+		&:hover {
+				color: var(--color-primary-hover);
+				transform: scale(1.1);
+		}
+
+
+		& i {
+				font-size: 1.25rem;
+				line-height: 1;
+		}
+}
+
+
+/* ===== Editor + config side-by-side wrapper ===== */
+
+
+.tpl-content-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+    position: relative;
+    align-items: stretch;
+    height: 380px;
+}
+
+
+.tpl-editor-area {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+}
+
+
+.tpl-textarea {
+		flex: 1;
+		width: 100%;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.5rem;
+		background-color: rgb(249 250 251);
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: rgb(17 24 39);
+		resize: none;
+		scrollbar-width: thin;
+		font-family: inherit;
+		transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&::placeholder {
+				color: var(--color-muted);
+		}
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				background-color: rgb(255 255 255);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+}
+
+
+/* ===== Config toggle ===== */
+
+
+.tpl-config-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		cursor: pointer;
+		color: var(--color-primary);
+		font-size: 1.125rem;
+		user-select: none;
+		flex-shrink: 0;
+		opacity: 0.7;
+		transition: opacity 0.2s ease;
+
+
+		&:hover {
+				opacity: 1;
+		}
+
+
+		&:focus {
+				outline: none;
+		}
+}
+
+
+/* ===== Config panel ===== */
+
+
+.tpl-config-panel {
+		width: 0;
+		overflow: hidden;
+		transition: width 0.3s ease;
+		border-left: none;
+		flex-shrink: 0;
+
+
+		&.expanded {
+				width: 260px;
+				border-left: 1px solid rgb(229 231 235);
+				overflow-y: auto;
+				scrollbar-width: thin;
+		}
+}
+
+
+/* ===== Responsive ===== */
+
+
+@media (max-width: 768px) {
+    .tpl-content-wrapper {
+        flex-direction: column;
+        height: auto;
+    }
+    .tpl-config-toggle {
+        width: 100%;
+        height: 24px;
+        flex-direction: row;
+    }
+    .tpl-config-toggle .mdi {
+        transform: rotate(90deg);
+    }
+    .tpl-config-panel {
+        width: 100% !important;
+        height: 0;
+        transition: height 0.3s ease;
+        border-left: none;
+    }
+    .tpl-config-panel.expanded {
+        width: 100% !important;
+        height: auto;
+        border-left: none;
+        border-top: 1px solid rgb(229 231 235);
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .tpl-card {
+    background:
+        linear-gradient(
+            180deg,
+            rgb(31 41 55),
+            color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55))
+        );
+    border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.04) inset,
+        0 1px 2px rgb(0 0 0 / 0.2),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 45%, rgb(0 0 0 / 0.4));
+}
+
+
+.dark .tpl-card-header {
+    background:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-primary) 14%, transparent),
+            color-mix(in srgb, var(--color-primary) 4%, transparent) 60%
+        );
+    border-bottom-color: color-mix(in srgb, var(--color-primary) 18%, rgb(55 65 81));
+}
+
+
+.dark .tpl-title,
+.dark .tpl-section-label {
+    color: rgb(229 231 235);
+}
+
+
+.dark .tpl-textarea {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .tpl-config-panel.expanded {
+    border-color: rgb(55 65 81);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
+ * ======================================================================== */
+
+
+/* ===== Wrapper ===== */
+
+
+.aui-wrapper {
+    border: 1px dotted var(--color-primary);
+    border-radius: 0.375rem;
+    padding: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 2%, transparent);
+}
+
+
+/* ===== Rows ===== */
+
+
+.aui-row {
+    display: flex;
+}
+
+
+.aui-row-primary {
+    display: flex;
+}
+
+
+.aui-row-secondary {
+    display: flex;
+    flex-direction: column;
+}
+
+
+/* ===== Cell helper (was .line-align-center) ===== */
+
+
+.aui-cell {
+    display: flex;
+    align-items: center;
+}
+
+
+/* ===== Labels ===== */
+
+
+.aui-label {
+    width: 30%;
+    font-size: 0.9375rem;
+    flex-wrap: wrap;
+    color: rgb(55 65 81);
+}
+
+
+.aui-label-strong {
+    font-weight: 700;
+    display: flex;
+    gap: 0.625rem;
+}
+
+
+.aui-label-flex {
+    display: flex;
+    gap: 0.625rem;
+}
+
+
+.aui-tooltip-wrap {
+    display: flex;
+    gap: 0.3125rem;
+    align-items: center;
+}
+
+
+/* ===== Value column ===== */
+
+
+.aui-value {
+    width: 70%;
+    display: flex;
+    gap: 0.3125rem;
+}
+
+
+.aui-input-wrap {
+    width: 95%;
+}
+
+
+.aui-delete {
+    width: 5%;
+}
+
+
+/* ===== Collapse chevron ===== */
+
+
+.aui-collapse-toggle {
+		cursor: pointer;
+		font-size: 1rem;
+		color: rgb(75 85 99);
+		transition: transform 0.2s ease-in-out, color 0.15s ease;
+
+
+		&.rotated {
+				transform: rotate(90deg);
+		}
+
+
+		&:hover {
+				color: var(--color-primary);
+		}
+}
+
+
+/* ===== Refresh / info / delete icons ===== */
+
+
+.aui-refresh-icon {
+		cursor: pointer;
+		font-size: 1rem;
+		padding-top: 3px;
+		color: var(--color-primary);
+		transition: transform 0.15s ease;
+
+
+		&:hover {
+				transform: rotate(90deg);
+		}
+}
+
+
+.aui-info-icon {
+    font-size: 1rem;
+    color: var(--color-primary);
+    cursor: help;
+}
+
+
+.aui-delete-icon {
+		cursor: pointer;
+		font-size: 1rem;
+		color: var(--color-danger);
+		transition: filter 0.15s ease;
+
+
+		&:hover {
+				filter: brightness(1.1);
+		}
+}
+
+
+/* ===== Checkbox (was .form-check-input) ===== */
+
+
+.aui-checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.aui-checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.aui-checkbox-box {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+
+.aui-checkbox-input {
+
+
+		&:checked + .aui-checkbox-box {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.75rem;
+		}
+
+
+		&:focus-visible + .aui-checkbox-box {
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+		}
+}
+
+
+/* ===== Inputs (selects are rendered via the Select component) ===== */
+
+
+.aui-input {
+		width: 100%;
+		padding: 0.4375rem 0.625rem;
+		font-size: 0.8125rem;
+		line-height: 1.4;
+		color: rgb(17 24 39);
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.375rem;
+		font-family: inherit;
+		transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+		&:focus {
+				outline: 0;
+				border-color: var(--color-primary);
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+		}
+
+
+		&:disabled {
+				background-color: rgb(243 244 246);
+				cursor: not-allowed;
+				color: var(--color-muted);
+		}
+}
+
+
+/* ===== Content (list of items under expanded panel) =====
+   No inner scroll: each block grows with its content so the
+   Select dropdown can overflow outside this block freely. */
+
+
+.aui-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1875rem;
+    border-top: 1px dotted var(--color-primary);
+    margin-top: 0.625rem;
+    padding-top: 0.625rem;
+}
+
+
+.aui-list-item {
+    display: flex;
+}
+
+
+/* ===== Responsive ===== */
+
+
+@media (max-width: 1250px) {
+    .aui-row-primary {
+        flex-direction: column;
+    }
+    .aui-row .aui-label,
+    .aui-row .aui-value {
+        width: 100%;
+    }
+    .aui-row .aui-value {
+        flex-direction: column;
+    }
+    .aui-row .aui-input-wrap,
+    .aui-row .aui-delete {
+        width: 100%;
+    }
+    .aui-row .aui-delete {
+        display: flex;
+        justify-content: flex-end;
+        align-items: end;
+        margin-top: 0.375rem;
+    }
+    .aui-row-secondary .aui-content .aui-list-item {
+        flex-direction: column;
+        gap: 0.375rem;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .aui-wrapper {
+    background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+}
+
+
+.dark .aui-label {
+    color: rgb(229 231 235);
+}
+
+
+.dark .aui-checkbox-box {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+.aui-input {
+
+
+		.dark & {
+				background-color: rgb(17 24 39);
+				border-color: rgb(55 65 81);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:disabled {
+				background-color: rgb(31 41 55);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
+ * ======================================================================== */
+
+
+.au-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 6px 16px -10px rgb(15 23 42 / 0.08);
+}
+
+
+.au-card-body {
+    padding: 1.25rem;
+}
+
+
+.au-header {
+    text-align: center;
+    margin-bottom: 0.75rem;
+}
+
+
+.au-title {
+    margin: 0.25rem 0 0.5rem 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.au-subtitle {
+    margin: 0.25rem 0 0.75rem 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-muted);
+}
+
+
+.au-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding: 0 0.625rem;
+}
+
+
+/* ===== Merge utility row ===== */
+
+
+.au-merge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+    margin: 0;
+}
+
+
+.au-checkbox-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+}
+
+
+.au-checkbox-input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.au-checkbox-box {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+
+.au-checkbox-input {
+
+
+		&:checked + .au-checkbox-box {
+				background-color: var(--color-primary);
+				border-color: var(--color-primary);
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 0.75rem;
+		}
+
+
+		&:focus-visible + .au-checkbox-box {
+				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
+		}
+}
+
+
+.au-merge-label {
+    line-height: 1;
+}
+
+
+.au-merge-info {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-muted);
+    font-size: 1rem;
+}
+
+
+/* ===== Add button ===== */
+
+
+.au-add {
+    display: flex;
+    justify-content: center;
+    padding-top: 0.25rem;
+}
+
+
+.au-add-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.4375rem 0.875rem;
+		border: 1px solid var(--color-primary);
+		border-radius: 0.375rem;
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		font-size: 0.8125rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
+
+
+		&:hover {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+/* ===== Responsive ===== */
+
+
+@media (max-width: 1250px) {
+    .au-list {
+        padding: 0 0.3125rem;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .au-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .au-title,
+.dark .au-merge {
+    color: rgb(229 231 235);
+}
+
+
+.dark .au-checkbox-box {
+    background-color: rgb(17 24 39);
+    border-color: rgb(75 85 99);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/agent-tabs.svelte
+ * ======================================================================== */
+
+
+.at-card {
+		position: relative;
+		background: linear-gradient(
+            180deg,
+            rgb(255 255 255),
+            color-mix(in srgb, var(--color-primary) 1.5%, rgb(255 255 255))
+        );
+		border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset,
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 35%, rgb(15 23 42 / 0.12));
+		overflow: hidden;
+
+
+		&::before {
+				content: '';
+				position: absolute;
+				inset: 0 0 auto 0;
+				height: 3px;
+				background: linear-gradient(
+        90deg,
+        transparent 0%,
+        color-mix(in srgb, var(--color-primary) 65%, transparent) 25%,
+        color-mix(in srgb, var(--color-primary) 65%, transparent) 75%,
+        transparent 100%
+    );
+				opacity: 0.85;
+				pointer-events: none;
+		}
+}
+
+
+.at-card-body {
+    padding: 1.375rem;
+}
+
+
+.at-pane {
+    margin-top: 1rem;
+}
+
+
+.at-hide {
+    display: none !important;
+}
+
+
+.dark .at-card {
+    background:
+        linear-gradient(
+            180deg,
+            rgb(31 41 55),
+            color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55))
+        );
+    border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    box-shadow:
+        0 1px 0 rgb(255 255 255 / 0.04) inset,
+        0 1px 2px rgb(0 0 0 / 0.2),
+        0 10px 28px -16px color-mix(in srgb, var(--color-primary) 45%, rgb(0 0 0 / 0.4));
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/+page.svelte
+ * ======================================================================== */
+
+
+@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
+
+
+#svelet-agent-build {
+    height: 80vh;
+    width: "100%";
+}
+
+
+.note {
+		font-family: 'Reenie Beanie', sans-serif;
+		position: absolute;
+		color: inherit;
+		width: 400px;
+		transform: rotate(-3deg);
+		font-weight: 200px;
+		font-size: 40px;
+	}
+
+
+#state {
+		top: -30px;
+		left: 620px;
+	}
+
+
+#groups {
+		top: 530px;
+		left: 490px;
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/components/Agent.svelte
+ * ======================================================================== */
+
+
+.node {
+		box-sizing: border-box;
+		width: 400px;
+		height: 400px;
+		border-radius: 8px;
+		position: relative;
+		pointer-events: auto;
+		display: flex;
+		flex-direction: column;
+		padding: 10px;
+		gap: 10px;
+	}
+
+
+.selected {
+		border: solid 2px white;
+	}
+
+
+.input-anchors {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		left: -24px;
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
+ * ======================================================================== */
+
+
+.my-anchor {
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		border: solid 2px white;
+		border-color: inherit;
+	}
+
+
+.hovering {
+		scale: 1.2;
+	}
+
+
+.linked {
+		background-color: rgb(17, 214, 17) !important;
+	}
+
+
+.connecting {
+		background-color: goldenrod;
+		animation: pulse 1s infinite;
+	}
+
+
+@keyframes pulse {
+		0% {
+			box-shadow: 0 0 0 0 goldenrod;
+		}
+		70% {
+			box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
+		}
+		100% {
+			box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
+		}
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
+ * ======================================================================== */
+
+
+.node-body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
+ * ======================================================================== */
+
+
+.node {
+		box-sizing: border-box;
+		width: fit-content;
+		border-radius: 8px;
+		height: fit-content;
+		position: relative;
+		pointer-events: auto;
+		display: flex;
+		flex-direction: column;
+		padding: 10px;
+		gap: 10px;
+	}
+
+
+h1 {
+		font-size: 0.9rem;
+		font-weight: 200;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		align-items: center;
+		padding-bottom: 8px;
+		border-color: inherit;
+	}
+
+
+.output-anchors {
+		position: absolute;
+		right: -24px;
+		top: 8px;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+
+.destroy {
+		background: none;
+		border: none;
+		color: inherit;
+		cursor: pointer;
+	}
+
+
+.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		width: 100%;
+		border-bottom: solid 1px;
+		border-color: lightgray;
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/[agentId]/build/components/Thickness.svelte
+ * ======================================================================== */
+
+
+.node-body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+
+
+.note {
+		font-family: 'Reenie Beanie', sans-serif;
+		position: absolute;
+		top: -20px;
+		left: 40px;
+		width: 400px;
+		transform: rotate(3deg);
+		color: inerhit;
+		font-weight: 200px;
+		font-size: 30px;
+		pointer-events: none;
+	}
+
+
+/* ========================================================================
+ * src/routes/page/agent/card-agent.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.ag-card {
+		display: flex;
+		flex-direction: column;
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+  0 10px 30px -12px rgb(15 23 42 / 0.08);
+		overflow: hidden;
+		height: 100%;
+		transition: box-shadow 0.15s ease, transform 0.15s ease;
+
+
+		&:hover {
+				box-shadow: 0 2px 4px rgb(15 23 42 / 0.06),
+  0 16px 36px -12px rgb(15 23 42 / 0.12);
+		}
+}
+
+
+/* ===== Card body ===== */
+
+
+.ag-card-body {
+padding: 1.25rem;
+flex: 1 1 auto;
+  }
+
+
+.ag-card-top {
+display: flex;
+justify-content: space-between;
+gap: 1.5rem;
+  }
+
+
+.ag-card-content {
+flex: 1 1 auto;
+overflow: hidden;
+  }
+
+
+/* ===== Avatar ===== */
+
+
+.ag-avatar {
+flex-shrink: 0;
+height: 4rem;
+width: 4rem;
+  }
+
+
+.ag-avatar-circle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		background-color: var(--color-light);
+		overflow: hidden;
+
+
+		& img {
+				width: 50px;
+				height: 50px;
+				object-fit: cover;
+		}
+}
+
+
+/* ===== Card header (name + flowchart icon) ===== */
+
+
+.ag-card-header {
+display: flex;
+gap: 0.625rem;
+flex-wrap: wrap;
+align-items: center;
+  }
+
+
+.ag-name-row {
+display: flex;
+align-items: center;
+overflow: hidden;
+white-space: nowrap;
+text-overflow: ellipsis;
+margin: 0;
+font-size: 0.9375rem;
+line-height: 1.4;
+min-width: 0;
+  }
+
+
+.ag-name-btn {
+		background: none;
+		border: none;
+		padding: 0;
+		margin: 0;
+		color: rgb(17 24 39);
+		font-size: 0.9375rem;
+		font-weight: 500;
+		line-height: 1.4;
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
+		transition: color 0.15s ease;
+
+
+		&:hover {
+				color: var(--color-primary);
+		}
+}
+
+
+.ag-flowchart-wrap {
+display: inline-flex;
+align-items: center;
+  }
+
+
+/* ===== Labels ===== */
+
+
+.ag-labels {
+display: flex;
+gap: 0.3125rem;
+flex-wrap: wrap;
+margin: 0.3125rem 0;
+  }
+
+
+.ag-label-badge {
+display: inline-flex;
+align-items: center;
+padding: 0.25rem 0.5rem;
+font-size: 0.6875rem;
+font-weight: 600;
+line-height: 1;
+color: rgb(255 255 255);
+background-color: var(--color-info);
+border-radius: 0.25rem;
+  }
+
+
+.ag-plugin-line {
+margin: 0.3125rem 0;
+font-size: 0.8125rem;
+color: var(--color-muted);
+  }
+
+
+/* ===== Description (3-line clamp) ===== */
+
+
+.ag-description {
+height: 60px;
+margin-bottom: 0.5rem;
+color: var(--color-muted);
+font-size: 0.8125rem;
+line-height: 1.55;
+display: -webkit-box;
+-webkit-line-clamp: 3;
+line-clamp: 3;
+-webkit-box-orient: vertical;
+text-overflow: ellipsis;
+overflow-y: hidden;
+  }
+
+
+/* ===== Icons row ===== */
+
+
+.ag-icons-wrap {
+overflow: hidden;
+  }
+
+
+.ag-icon-row {
+display: flex;
+align-items: center;
+height: 35px;
+  }
+
+
+.ag-icon-item {
+display: inline-flex;
+align-items: center;
+  }
+
+
+.ag-icon-spaced {
+margin-right: 1rem;
+  }
+
+
+.ag-icon-inline {
+display: inline-block;
+  }
+
+
+.ag-icon-img {
+height: 2rem;
+width: 2rem;
+border-radius: 50%;
+object-fit: cover;
+  }
+
+
+/* ===== Card footer ===== */
+
+
+.ag-card-footer {
+padding: 0.75rem 1.25rem;
+border-top: 1px solid rgb(229 231 235);
+  }
+
+
+.ag-meta-list {
+list-style: none;
+margin: 0;
+padding: 0;
+display: flex;
+flex-wrap: wrap;
+gap: 0.25rem 0.5rem;
+align-items: center;
+font-size: 0.8125rem;
+color: rgb(55 65 81);
+  }
+
+
+.ag-meta-item {
+display: inline-flex;
+align-items: center;
+  }
+
+
+.ag-meta-icon {
+margin-right: 0.25rem;
+font-size: 1rem;
+line-height: 1;
+color: var(--color-muted);
+  }
+
+
+/* ===== Badges (footer status pills) ===== */
+
+
+.ag-badge {
+display: inline-flex;
+align-items: center;
+padding: 0.25rem 0.5rem;
+font-size: 0.6875rem;
+font-weight: 600;
+line-height: 1;
+color: rgb(255 255 255);
+border-radius: 0.25rem;
+  }
+
+
+.ag-badge-success {
+background-color: var(--color-success);
+  }
+
+
+.ag-badge-warning {
+background-color: var(--color-warning);
+  }
+
+
+/* ===== Small footer buttons (Build / Train / Test) ===== */
+
+
+.ag-btn-sm {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		height: 1.75rem;
+		padding: 0 0.625rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		line-height: 1;
+		border: 1px solid transparent;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+
+		& i {
+				font-size: 0.9375rem;
+				line-height: 1;
+		}
+
+
+		&:disabled {
+				opacity: 0.6;
+				cursor: not-allowed;
+		}
+}
+
+
+.ag-btn-sm-light {
+		background-color: var(--color-light);
+		border-color: var(--color-light);
+		color: rgb(55 65 81);
+
+
+		&:hover:not(:disabled) {
+				background-color: rgb(226 232 240);
+				border-color: rgb(226 232 240);
+		}
+}
+
+
+.ag-btn-sm-primary {
+		background-color: var(--color-primary);
+		border-color: var(--color-primary);
+		color: rgb(255 255 255);
+
+
+		&:hover:not(:disabled) {
+				background-color: var(--color-primary-hover);
+				border-color: var(--color-primary-hover);
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .ag-card {
+background-color: rgb(31 41 55);
+border-color: rgb(55 65 81);
+  }
+
+
+.dark .ag-name-btn {
+color: rgb(229 231 235);
+  }
+
+
+.dark .ag-avatar-circle {
+background-color: rgb(55 65 81);
+  }
+
+
+.dark .ag-card-footer {
+border-top-color: rgb(55 65 81);
+  }
+
+
+.dark .ag-meta-list {
+color: rgb(209 213 219);
+  }
+
+
+.ag-btn-sm-light {
+
+
+		.dark & {
+				background-color: rgb(55 65 81);
+				border-color: rgb(55 65 81);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:hover:not(:disabled) {
+				background-color: rgb(75 85 99);
+				border-color: rgb(75 85 99);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/code-scripts/+page.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.cs-card {
+    position: relative;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+    margin-bottom: 1.5rem;
+}
+
+
+/* Top gradient accent stripe */
+
+
+.cs-card-accent::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 3px;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+}
+
+
+.cs-card-body {
+    padding: 1.5rem 1.5rem 1.25rem;
+}
+
+
+/* ===== Agent field ===== */
+
+
+.cs-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: 28rem;
+}
+
+
+.cs-field-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+    letter-spacing: 0.01em;
+}
+
+
+.cs-field-icon {
+    font-size: 1rem;
+    line-height: 1;
+    color: var(--color-primary);
+}
+
+
+.cs-field-control {
+    width: 100%;
+}
+
+
+/* ===== Empty state (no agent selected) ===== */
+
+
+.cs-empty-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 2.5rem 1.5rem 2.75rem;
+    background-color: rgb(255 255 255);
+    border: 1px dashed rgb(209 213 219);
+    border-radius: 0.875rem;
+    margin-bottom: 1.5rem;
+}
+
+
+.cs-empty-illustration {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 4rem;
+		height: 4rem;
+		border-radius: 50%;
+		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+		margin-bottom: 1rem;
+
+
+		& i {
+				font-size: 1.75rem;
+				line-height: 1;
+		}
+}
+
+
+.cs-empty-title {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.cs-empty-text {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    max-width: 26rem;
+}
+
+
+/* ===== Action bar (Save / Reset) ===== */
+
+
+.cs-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.75rem;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+    margin: 1.5rem 0 2rem;
+}
+
+
+.cs-action-bar-hint {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		font-size: 0.75rem;
+		color: var(--color-muted);
+
+
+		& i {
+				font-size: 0.9375rem;
+				line-height: 1;
+		}
+}
+
+
+.cs-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+
+/* ===== Buttons ===== */
+
+
+.cs-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: 2.25rem;
+		padding: 0 0.95rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		border: 1px solid transparent;
+		border-radius: 0.5rem;
+		cursor: pointer;
+		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
+
+
+		&:active:not(:disabled) {
+				transform: translateY(1px);
+		}
+
+
+		&:focus-visible {
+				outline: 2px solid var(--color-primary);
+				outline-offset: 2px;
+		}
+
+
+		&:disabled {
+				opacity: 0.55;
+				cursor: not-allowed;
+		}
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+.cs-btn-primary {
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 6px 16px -6px color-mix(in srgb, var(--color-primary) 50%, transparent);
+
+
+		&:hover:not(:disabled) {
+				background-color: var(--color-primary-hover);
+		}
+}
+
+
+.cs-btn-ghost {
+		background-color: rgb(255 255 255);
+		border-color: rgb(229 231 235);
+		color: rgb(55 65 81);
+
+
+		&:hover:not(:disabled) {
+				background-color: rgb(249 250 251);
+				border-color: rgb(209 213 219);
+				color: var(--color-warning);
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .cs-card,
+.dark .cs-empty-card,
+.dark .cs-action-bar {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .cs-field-label,
+.dark .cs-empty-title {
+    color: rgb(229 231 235);
+}
+
+
+.cs-btn-ghost {
+
+
+		.dark & {
+				background-color: rgb(55 65 81);
+				border-color: rgb(75 85 99);
+				color: rgb(229 231 235);
+		}
+
+
+		.dark &:hover:not(:disabled) {
+				background-color: rgb(75 85 99);
+		}
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/code-scripts/script-editor.svelte
+ * ======================================================================== */
+
+
+/* ===== Card shell ===== */
+
+
+.se-card {
+		position: relative;
+		background-color: rgb(255 255 255);
+		border: 1px solid rgb(229 231 235);
+		border-radius: 0.875rem;
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+		margin-bottom: 1.5rem;
+		overflow: hidden;/* Top gradient accent stripe — same family as the agent card */
+
+
+		&::before {
+				content: '';
+				position: absolute;
+				inset: 0 0 auto 0;
+				height: 3px;
+				background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+		}
+}
+
+
+.se-card-body {
+    padding: 1.25rem 1.5rem 1.5rem;
+}
+
+
+/* ===== Header bar ===== */
+
+
+.se-header-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    border-bottom: 1px solid rgb(229 231 235);
+    flex-wrap: wrap;
+}
+
+
+.se-header-left {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+}
+
+
+.se-section-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 0.5rem;
+		background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
+		color: var(--color-primary);
+
+
+		& i {
+				font-size: 1.125rem;
+				line-height: 1;
+		}
+}
+
+
+.se-title {
+    font-weight: 600;
+    font-size: 0.9375rem;
+    color: rgb(55 65 81);
+    letter-spacing: 0.01em;
+}
+
+
+.se-tooltip-wrap {
+    display: inline-flex;
+    align-items: center;
+}
+
+
+.se-tooltip-icon {
+		display: inline-flex;
+		align-items: center;
+		color: var(--color-muted);
+		cursor: help;
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+}
+
+
+/* ===== Add Script button ===== */
+
+
+.se-add-btn {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		height: 2rem;
+		padding: 0 0.75rem;
+		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+		border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
+		border-radius: 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+
+
+		& i {
+				font-size: 1.125rem;
+				line-height: 1;
+		}
+
+
+		&:hover {
+				background-color: var(--color-primary);
+				color: rgb(255 255 255);
+				border-color: var(--color-primary);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+}
+
+
+/* ===== Editor frame (code-panel look) ===== */
+
+
+.se-editor-frame {
+    margin-top: 0.75rem;
+    background-color: rgb(40 44 52);
+    border: 1px solid rgb(55 65 81);
+    border-radius: 0.625rem;
+    overflow: hidden;
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+}
+
+
+.se-editor-titlebar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background-color: rgb(33 37 43);
+    border-bottom: 1px solid rgb(55 65 81);
+}
+
+
+.se-window-dots {
+    display: inline-flex;
+    gap: 0.375rem;
+}
+
+
+.se-dot {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 50%;
+    background-color: rgb(75 85 99);
+}
+
+
+.se-dot-r { background-color: rgb(244 106 106); }
+
+
+.se-dot-y { background-color: rgb(241 180 76); }
+
+
+.se-dot-g { background-color: rgb(52 195 143); }
+
+
+.se-editor-filename {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-size: 0.75rem;
+		color: rgb(209 213 219);
+		font-variant-numeric: tabular-nums;
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
+
+		& i {
+				font-size: 0.875rem;
+				line-height: 1;
+				color: rgb(80 165 241);
+				flex-shrink: 0;
+		}
+}
+
+
+.se-editor-lang {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: rgb(156 163 175);
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    background-color: rgb(55 65 81);
+}
+
+
+/* ===== Code editor wrapper ===== */
+
+
+.se-code-editor {
+		max-height: 500px;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		resize: none;
+
+
+		& .cm-editor {
+				min-width: 1000px;
+				overflow-x: auto;
+				scrollbar-width: thin;
+		}
+}
+
+
+/* ===== Empty state (no scripts in this section) ===== */
+
+
+.se-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 2rem 1rem 2.25rem;
+}
+
+
+.se-empty-illustration {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.25rem;
+		height: 3.25rem;
+		border-radius: 50%;
+		background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		color: var(--color-primary);
+		margin-bottom: 0.75rem;
+
+
+		& i {
+				font-size: 1.5rem;
+				line-height: 1;
+		}
+}
+
+
+.se-empty-title {
+    margin: 0 0 0.25rem;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    text-transform: capitalize;
+}
+
+
+.se-empty-text {
+    margin: 0 0 1rem;
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    max-width: 26rem;
+}
+
+
+.se-empty-cta {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		height: 2.125rem;
+		padding: 0 0.95rem;
+		background-color: var(--color-primary);
+		color: rgb(255 255 255);
+		border: 1px solid var(--color-primary);
+		border-radius: 0.5rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		cursor: pointer;
+		transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+		box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 6px 16px -6px color-mix(in srgb, var(--color-primary) 50%, transparent);
+
+
+		& i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+
+
+		&:hover {
+				background-color: var(--color-primary-hover);
+		}
+
+
+		&:active {
+				transform: translateY(1px);
+		}
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .se-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .se-header-bar {
+    border-bottom-color: rgb(55 65 81);
+}
+
+
+.dark .se-title,
+.dark .se-empty-title {
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/page/agent/router/+page.svelte
+ * ======================================================================== */
+
+
+.rt-container {
+width: 100%;
+display: flex;
+flex-direction: column;
+  }
+
+
+/* ========================================================================
+ * src/routes/page/agent/router/routing-flow.svelte
+ * ======================================================================== */
+
+
+/* ===== Toggle button group ===== */
+
+
+.rf-toggle-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
+}
+
+
+.rf-toggle-input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+}
+
+
+.rf-toggle-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 2.25rem;
+		padding: 0 0.95rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		line-height: 1;
+		border: 1px solid var(--color-primary);
+		cursor: pointer;
+		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+		margin: 0;/* Pill-shape the group: first/last get rounded ends, middle is squared, and adjacent
+   borders collapse so the group reads as one contiguous control. */
+
+
+		&:not(:first-of-type) {
+				border-left: 0;
+		}
+
+
+		&:first-of-type {
+				border-top-left-radius: 0.5rem;
+				border-bottom-left-radius: 0.5rem;
+		}
+
+
+		&:last-of-type {
+				border-top-right-radius: 0.5rem;
+				border-bottom-right-radius: 0.5rem;
+		}
+}
+
+
+.rf-toggle-btn-active {
+    background-color: var(--color-primary);
+    color: rgb(255 255 255);
+}
+
+
+.rf-toggle-btn-outline {
+		background-color: transparent;
+		color: var(--color-primary);
+
+
+		&:hover {
+				background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		}
+}
+
+
+.rf-toggle-input:disabled + .rf-toggle-btn {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+
+/* ===== Drawflow canvas =====
+   Height/width live inline on the element itself (see template) because Drawflow
+   mutates the container and adds its own .parent-drawflow / .drawflow classes
+   whose rules can otherwise override a Svelte-scoped class rule. */
+
+
+/* ===== Drawflow node content (injected as raw HTML — selectors must be global) ===== */
+
+
+.rf-canvas {
+
+
+		& .rf-h5 {
+				display: inline-block;
+				font-size: 1.125rem;
+				font-weight: 500;
+				line-height: 1.2;
+				margin: 0;
+		}
+
+
+		& .rf-h6 {
+				display: inline-block;
+				font-size: 1rem;
+				font-weight: 500;
+				line-height: 1.2;
+				margin: 0;
+		}
+
+
+		& .rf-icon {
+				font-size: 1rem;
+				line-height: 1;
+		}
+
+
+		& .rf-text-info {
+				color: var(--color-info);
+		}
+
+
+		& .rf-mr-2 {
+				margin-right: 0.5rem;
+		}
+
+
+		& .rf-node-btn {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				height: 1.75rem;
+				min-width: 1.75rem;
+				padding: 0 0.5rem;
+				background-color: var(--color-primary);
+				color: rgb(255 255 255);
+				border: 1px solid var(--color-primary);
+				border-radius: 0.375rem;
+				text-decoration: none;
+				line-height: 1;
+				transition: background-color 0.15s ease, filter 0.15s ease;
+		}
+
+
+		& .rf-node-btn:hover {
+				filter: brightness(0.95);
+		}
+
+
+		& .rf-node-btn i {
+				font-size: 1rem;
+				line-height: 1;
+		}
+
+
+		& .rf-node-btn-end {
+				float: right;
+				margin-left: 0.25rem;
+		}
+}
\ No newline at end of file
diff --git a/src/lib/styles/pages/_auth.scss b/src/lib/styles/pages/_auth.scss
new file mode 100644
index 00000000..11c954ae
--- /dev/null
+++ b/src/lib/styles/pages/_auth.scss
@@ -0,0 +1,45 @@
+/*
+ * Authentication page styles — consolidated from scoped <style> blocks
+ * in the src/routes/(authentication) folder.
+ *
+ * The login, recoverpw and register pages share the same slide-in
+ * card animation and shimmer button effect, so the rules are written
+ * once with comma-separated selectors instead of being duplicated.
+ */
+
+
+/* ===== Slide-in card animation ===== */
+@keyframes slideInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
+.animate-slide-in-up {
+    animation: slideInUp 0.8s ease-out;
+}
+
+
+/* ===== Shimmer overlay swept across the primary CTA on hover =====
+ * Used by /login (.login-btn), /recoverpw (.reset-btn) and
+ * /register (.register-btn). */
+.login-btn,
+.reset-btn,
+.register-btn {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+        transition: left 0.5s;
+    }
+
+    &:hover::before {
+        left: 100%;
+    }
+}
diff --git a/src/lib/styles/pages/_chat.scss b/src/lib/styles/pages/_chat.scss
new file mode 100644
index 00000000..8d09a978
--- /dev/null
+++ b/src/lib/styles/pages/_chat.scss
@@ -0,0 +1,3544 @@
+/*
+ * Chat page styles — consolidated from scoped <style> blocks in
+ * the src/routes/chat folder. Each section is annotated with the
+ * source file path so the original component context is preserved.
+ *
+ * Class names use per-component prefixes (cb-, cle-, pl-, etc.) so
+ * these globally-scoped rules cannot collide with rules belonging to
+ * other page groups.
+ */
+
+
+/* ====================================================================
+ * chat-util/chat-big-message.svelte
+ * Replaces legacy .chat-util-trigger / .list-inline /
+ * .list-inline-item / .clickable.
+ * ==================================================================== */
+
+
+.cbm-trigger {
+    text-align: center;
+}
+
+
+.cbm-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+
+.cbm-item {
+    display: inline-block;
+}
+
+
+.cbm-glyph {
+    display: inline-block;
+    padding: 0 0.25rem;
+    line-height: 2.25rem;
+    font-size: 200%;
+    color: var(--color-primary);
+}
+
+
+.cbm-icon {
+    cursor: pointer;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/+page.svelte
+ * ======================================================================== */
+
+
+/* ===== Page shell ===== */
+
+
+.cs-page {
+    width: 100%;
+    padding: 0 1rem;
+}
+
+
+/* ===== Agent list block ===== */
+
+
+.cs-block {
+    margin-top: 10vh;
+    margin-left: 10vw;
+    margin-right: 10vw;
+}
+
+
+.cs-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+
+.cs-item {
+    padding: 0.875rem 1rem;
+    border: 1px solid color-mix(in srgb, var(--color-primary) 8%, rgb(229 231 235));
+    border-radius: 0.625rem;
+    background-color: rgb(255 255 255);
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+
+    &:hover {
+        border-color: color-mix(in srgb, var(--color-primary) 32%, rgb(229 231 235));
+        background-color: color-mix(in srgb, var(--color-primary) 2%, rgb(255 255 255));
+    }
+}
+
+
+.cs-item-selected {
+    border-color: var(--color-primary);
+    background-color: color-mix(in srgb, var(--color-primary) 5%, rgb(255 255 255));
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
+}
+
+
+/* ===== Radio (themed, replaces .form-check-input) ===== */
+
+
+.cs-radio {
+    width: 1rem;
+    height: 1rem;
+    margin: 0 0.5rem 0 0;
+    vertical-align: middle;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+}
+
+
+.cs-label {
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    vertical-align: middle;
+    cursor: pointer;
+    margin: 0;
+}
+
+
+.cs-desc {
+    margin: 0.25rem 0 0 1.5rem;
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    line-height: 1.5;
+}
+
+
+/* ===== Footer / CTA ===== */
+
+
+.cs-footer {
+    text-align: center;
+    padding-top: 1.5rem;
+    padding-bottom: 2.5rem;
+}
+
+
+.cs-hint {
+    margin: 0 0 1rem 0;
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+}
+
+
+.cs-cta-wrap {
+    display: flex;
+    justify-content: center;
+}
+
+
+.cs-start-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    height: 2.5rem;
+    padding: 0 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    color: rgb(255 255 255);
+    text-decoration: none;
+    border: 1px solid transparent;
+    border-radius: 0.625rem;
+    background: linear-gradient(
+        135deg,
+        var(--color-primary),
+        color-mix(in srgb, var(--color-primary) 78%, black)
+    );
+    box-shadow: 0 1px 0 rgb(255 255 255 / 0.18) inset,
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 60%, transparent),
+        0 2px 4px -2px rgb(15 23 42 / 0.1);
+    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
+    cursor: pointer;
+
+
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset,
+        0 8px 18px -6px color-mix(in srgb, var(--color-primary) 70%, transparent),
+        0 3px 6px -2px rgb(15 23 42 / 0.12);
+        filter: brightness(1.05);
+        color: rgb(255 255 255);
+    }
+
+
+    &:active {
+        transform: translateY(1px);
+    }
+
+
+    & i {
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.cs-item {
+
+
+    .dark & {
+        background-color: rgb(31 41 55);
+        border-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    }
+
+
+    .dark &:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 6%, rgb(31 41 55));
+    }
+}
+
+
+.dark .cs-item-selected {
+    background-color: color-mix(in srgb, var(--color-primary) 10%, rgb(31 41 55));
+}
+
+
+.dark .cs-label {
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/+page.svelte
+ * ======================================================================== */
+
+
+/* ===== Page shell ===== */
+
+
+.ci-page {
+    width: 100%;
+    padding: 0 1rem;
+}
+
+
+.ci-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 3.125rem 1rem;
+    gap: 1.25rem;
+}
+
+
+/* ===== Spinner (replaces .spinner-grow) =====
+   Pulsing primary-tinted dot, accessible (role=status on parent). */
+
+
+.ci-spinner {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    background-color: var(--color-primary);
+    animation: ci-pulse 1s ease-in-out infinite;
+}
+
+
+@keyframes ci-pulse {
+    0% {
+        transform: scale(0);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+
+/* ===== Visually hidden (replaces .sr-only) ===== */
+
+
+.ci-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+
+.ci-title {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+
+.ci-link {
+    font-size: 0.875rem;
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color 0.15s ease;
+
+
+    &:hover {
+        color: var(--color-primary-hover);
+        text-decoration: underline;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .ci-title {
+    color: rgb(229 231 235);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte
+ * ======================================================================== */
+
+
+/* ===== Wrapper ===== */
+
+
+.cai-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+
+/* ===== Row (replaces legacy .chat-agent-row) =====
+   Centered text, modest vertical rhythm, white text by default since
+   this component currently renders inside the chat-box's dark right
+   log panel. */
+
+
+.cai-row {
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+    text-align: center;
+    color: rgb(255 255 255);
+}
+
+
+/* ===== Agent name (replaces .text-primary fw-bold + h3) ===== */
+
+
+.cai-name {
+    margin: 0;
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.3;
+    color: var(--color-primary);
+    cursor: pointer;
+    transition: filter 0.15s ease, color 0.15s ease;
+
+
+    &:hover {
+        filter: brightness(1.15);
+    }
+}
+
+
+.cai-name-link {
+    /* replaces legacy .clickable */
+    cursor: pointer;
+}
+
+
+/* ===== Description (replaces .text-secondary) ===== */
+
+
+.cai-desc {
+    color: var(--color-secondary);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+}
+
+
+/* ===== Meta rows (provider/model, counts) =====
+   Inherit color from the row (white on dark panel). */
+
+
+.cai-meta {
+    color: inherit;
+    font-size: 0.8125rem;
+    opacity: 0.92;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+ * ======================================================================== */
+
+
+/* ============================================================
+   chat-box scoped styles — replaces legacy `_chat.scss` rules.
+   Built up incrementally across Step 4 sub-steps. Each cb-* class
+   is scoped to this component to avoid leaking into other pages.
+   ============================================================ */
+
+
+/* ===== 4a: Modals (Tag / Notification / Edit / Big-message) ===== */
+
+
+/* Tag modal — tags wrapper (replaces .conv-tags-container) */
+
+
+.cb-tags-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    min-height: 5rem;
+    max-height: 11.25rem;
+}
+
+
+/* Tag modal — input + add row (replaces .conv-tag-add) */
+
+
+.cb-tag-add {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.625rem;
+}
+
+
+/* Tag modal — input (replaces .form-control.form-control-sm) */
+
+
+.cb-tag-input {
+    flex: 1;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: rgb(17 24 39);
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+
+/* Tag modal — add button (replaces .btn.btn-primary.btn-sm) */
+
+
+.cb-tag-add-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.875rem;
+    padding: 0 0.625rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    color: rgb(255 255 255);
+    background-color: var(--color-primary);
+    border: 1px solid var(--color-primary);
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+
+/* Notification modal — warning title icon (replaces .text-warning) */
+
+
+.cb-title-icon {
+    display: inline-flex;
+    align-items: center;
+}
+
+
+.cb-text-warning {
+    color: var(--color-warning);
+}
+
+
+/* Notification modal — body (replaces legacy .chat-notification) */
+
+
+.cb-notification {
+    min-height: 1.25rem;
+    max-height: 9.375rem;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
+
+/* Edit / Big-message modals — textarea (replaces .form-control.chat-input) */
+
+
+.cb-modal-textarea {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: rgb(17 24 39);
+    background-color: var(--color-light);
+    border: 1px solid var(--color-light);
+    border-radius: 0.3125rem;
+    font-family: inherit;
+    resize: none;
+    scrollbar-width: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+
+/* Edit / Big-message modals — counter row (replaces .text-secondary.text-end.text-count) */
+
+
+.cb-modal-counter {
+    text-align: right;
+    color: var(--color-secondary);
+    font-size: 0.75rem;
+    margin-top: 0.25rem;
+}
+
+
+/* ===== Dark mode (Step 4a) ===== */
+
+
+.dark .cb-tag-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .cb-modal-textarea {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .cb-modal-counter {
+    color: rgb(156 163 175);
+}
+
+
+/* ===== 4b: Outer split layout + chat header ===== */
+
+
+/* Shared utilities used across the chat layout */
+
+
+.cb-vcenter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+
+.cb-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+.cb-align-middle {
+    vertical-align: middle;
+}
+
+
+.cb-text-success {
+    color: var(--color-success);
+}
+
+
+/* Page-level flex wrapper (replaces .d-lg-flex) */
+
+
+.cb-page-flex {
+    display: block;
+}
+
+
+@media (min-width: 992px) {
+    .cb-page-flex {
+        display: flex;
+    }
+}
+
+
+/* Main chat panel card (replaces .card.mb-0) */
+
+
+.cb-panel-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: rgb(255 255 255);
+    background-clip: border-box;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    margin-bottom: 0;
+}
+
+
+/* Header bar (replaces .border-bottom.chat-head) */
+
+
+.cb-head {
+    font-size: 1rem;
+    padding: 2vmin 2%;
+    height: 10%;
+    border-bottom: 1px solid rgb(229 231 235);
+}
+
+
+/* Header row (replaces .row.chat-row) */
+
+
+.cb-head-row {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    height: 100%;
+}
+
+
+/* Left column with agent/user info (replaces .col-md-4.col-4.chat-head-info) */
+
+
+.cb-head-left {
+    flex: 0 0 33.333333%;
+    max-width: 33.333333%;
+    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
+    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: 0.3125rem;
+}
+
+
+/* Agent row (replaces .chat-head-agent) */
+
+
+.cb-head-agent {
+    flex: 0.5;
+    display: flex;
+    gap: 0.625rem;
+    width: fit-content;
+    height: 50%;
+}
+
+
+.cb-head-agent-icon {
+    height: 80%;
+    max-height: 25px;
+}
+
+
+.cb-head-agent-name {
+    font-size: 0.8em;
+}
+
+
+/* User row (replaces .text-muted.mb-0.chat-head-user) */
+
+
+.cb-head-user {
+    flex: 0.5;
+    display: flex;
+    gap: 0.3125rem;
+    width: fit-content;
+    font-size: 0.7em;
+    color: var(--color-muted);
+    margin-bottom: 0;
+}
+
+
+/* Right column (replaces .col-md-8.col-8) */
+
+
+.cb-head-right {
+    flex: 0 0 66.666667%;
+    max-width: 66.666667%;
+    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
+    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
+}
+
+
+/* Header action bar (replaces .user-chat-nav.user-chat-nav-flex.mb-0) */
+
+
+.cb-head-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.3125rem;
+    align-self: stretch;
+    min-width: 30px;
+    min-height: 30px;
+    margin-bottom: 0;
+}
+
+
+/* Round icon buttons in the header
+   (replaces .btn.btn-rounded.btn-sm + variants for color) */
+
+
+.cb-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.125rem;
+    height: 2.125rem;
+    padding: 0;
+    font-size: 0.8125rem;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    background-color: transparent;
+    color: rgb(255 255 255);
+    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+}
+
+
+.cb-icon-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+
+.cb-icon-btn-secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-secondary-hover);
+        border-color: var(--color-secondary-hover);
+    }
+}
+
+
+.cb-icon-btn-lg {
+    width: 40px;
+    height: 40px;
+}
+
+
+.cb-icon-lg {
+    font-size: 0.9375rem;
+}
+
+
+/* Dots-menu trigger (replaces .nav-btn) */
+
+
+.cb-nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2em;
+    height: 2em;
+    padding: 0;
+    background-color: var(--color-light);
+    color: rgb(55 65 81);
+    border: none;
+    border-radius: 50%;
+    box-shadow: none;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+
+
+    &:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
+    }
+
+
+    & i {
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+
+/* Dropdown wrapper (replaces .dropdown) */
+
+
+.cb-dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+
+/* Menu popup (replaces .dropdown-menu).
+   Shared by the header dots-menu and the per-message kebab dropdown
+   in chat-box.svelte. The visual refinements here intentionally apply
+   to BOTH so they stay consistent: glass-tinted background, layered
+   + primary-tinted shadow, and a subtle spring entrance animation. */
+.cb-menu {
+    position: absolute;
+    z-index: 1000;
+    display: none;
+    min-width: 11rem;
+    padding: 0.375rem;
+    margin: 0.375rem 0 0;
+    list-style: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: rgb(33 37 41);
+    text-align: left;
+    background-color: rgb(255 255 255 / 0.96);
+    backdrop-filter: blur(12px) saturate(140%);
+    -webkit-backdrop-filter: blur(12px) saturate(140%);
+    background-clip: padding-box;
+    border: 1px solid rgb(229 231 235 / 0.9);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 12px 28px -10px rgb(15 23 42 / 0.18),
+        0 4px 10px -4px rgb(15 23 42 / 0.08),
+        0 0 0 1px color-mix(in srgb, var(--color-primary) 5%, transparent);
+    transform-origin: top right;
+
+
+    &.show {
+        display: block;
+        animation: cb-menu-pop-down 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    }
+}
+
+
+@keyframes cb-menu-pop-down {
+    from {
+        opacity: 0;
+        transform: scale(0.94) translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+    .cb-menu.show {
+        animation: none;
+    }
+}
+
+
+.cb-menu-end {
+    right: 0;
+    left: auto;
+}
+
+
+.cb-menu-item {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.875rem;
+    margin: 1px 0;
+    clear: both;
+    font-weight: 500;
+    color: rgb(55 65 81);
+    text-align: inherit;
+    white-space: nowrap;
+    background-color: transparent;
+    border: 0;
+    border-radius: 0.4375rem;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    transition: background-color 0.12s ease, color 0.12s ease, padding-left 0.16s ease;
+
+
+    /* Slim primary-color accent bar that slides in on hover/focus.
+       Scoped via ::before so we don't need to touch the markup. */
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0.25rem;
+        top: 50%;
+        height: 1rem;
+        width: 3px;
+        background-color: var(--color-primary);
+        border-radius: 999px;
+        transform: translateY(-50%) scaleY(0);
+        transform-origin: center;
+        transition: transform 0.18s ease;
+        pointer-events: none;
+    }
+
+
+    &:hover:not(:disabled), &:focus-visible:not(:disabled) {
+        color: var(--color-primary);
+        background-color: color-mix(in srgb, var(--color-primary) 9%, transparent);
+        padding-left: 1.25rem;
+        outline: none;
+
+
+        &::before {
+            transform: translateY(-50%) scaleY(1);
+        }
+    }
+
+
+    &:active:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
+    }
+
+
+    &:disabled {
+        color: var(--color-muted);
+        opacity: 0.55;
+        cursor: not-allowed;
+        pointer-events: none;
+    }
+}
+
+
+/* "States" entry — has a nested submenu (.cb-state-menu > .cb-menu).
+   Adds room on the right for a chevron indicator that flips when the
+   submenu is open (driven by the existing aria-expanded attribute). */
+.cb-menu-item-toggle {
+    padding-right: 1.75rem;
+
+
+    &::after {
+        content: '‹';
+        position: absolute;
+        right: 0.75rem;
+        top: 50%;
+        font-size: 1rem;
+        line-height: 0;
+        color: currentColor;
+        opacity: 0.55;
+        transform: translateY(-50%);
+        transition: transform 0.2s ease, opacity 0.15s ease;
+        pointer-events: none;
+    }
+
+
+    &[aria-expanded="true"]::after {
+        opacity: 0.95;
+        transform: translateY(-50%) rotate(-90deg);
+    }
+}
+
+
+/* Submenu host (replaces .dropstart.state-menu) */
+
+
+.cb-state-menu {
+    position: relative;
+
+
+    & > .cb-menu {
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
+}
+
+
+/* Button-pair (replaces .btn-pair / .btn-left / .btn-right) */
+
+
+.cb-btn-pair {
+    display: flex;
+}
+
+
+.cb-pill-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    height: 2.125rem;
+    padding: 0 0.75rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    color: rgb(255 255 255);
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-radius: 50rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+
+    & i, & span {
+        font-size: 0.9em;
+    }
+}
+
+
+.cb-pill-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+
+.cb-pill-btn-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.95);
+    }
+}
+
+
+.cb-pill-btn-left {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+
+.cb-pill-btn-right {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+
+.cb-pill-btn-label {
+    margin-right: 0.5rem;
+}
+
+
+/* ===== Dark mode (Step 4b) ===== */
+
+
+.dark .cb-panel-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+
+.dark .cb-head {
+    border-bottom-color: rgb(55 65 81);
+}
+
+
+.cb-nav-btn {
+
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        color: rgb(229 231 235);
+    }
+
+
+    .dark &:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 14%, rgb(55 65 81));
+    }
+}
+
+
+.dark .cb-menu {
+    background-color: rgb(31 41 55 / 0.96);
+    border-color: rgb(55 65 81 / 0.9);
+    color: rgb(229 231 235);
+    box-shadow:
+        0 12px 28px -10px rgb(0 0 0 / 0.55),
+        0 4px 10px -4px rgb(0 0 0 / 0.35),
+        0 0 0 1px color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+
+.cb-menu-item {
+
+
+    .dark & {
+        color: rgb(229 231 235);
+    }
+
+
+    /* Dark-mode hover keeps the primary-tint feel but bumps the alpha
+       so it stays readable on the darker glass background. */
+    .dark &:hover:not(:disabled), .dark &:focus-visible:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
+        color: rgb(255 255 255);
+    }
+
+
+    .dark &:active:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+    }
+}
+
+
+/* ===== 4c: Message thread (scroll area + bubbles + actions) ===== */
+
+
+/* Scrollable thread area (replaces .chat-scrollbar.chat-content.scroll-bottom-to-top) */
+
+
+.cb-msgs-scroll {
+    display: flex;
+    flex-direction: column-reverse;
+    overflow-y: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+}
+
+
+.cb-msgs-content {
+    height: 82%;
+}
+
+
+.cb-msgs-content-expand {
+    height: 98%;
+}
+
+
+/* Alias of .cb-msgs-scroll for clarity at the markup site */
+
+
+.cb-msgs-scroll-rev {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+
+/* Conversation container (replaces .chat-conversation.p-3) */
+
+
+.cb-conv {
+    padding: 1rem;
+}
+
+
+.cb-conv-list {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+
+
+    & > li {
+        clear: both;
+    }
+}
+
+
+/* Day separator (replaces .chat-day-title with centered pill on a divider) */
+
+
+.cb-day-title {
+    position: relative;
+    text-align: center;
+    margin-bottom: 1.5rem;
+
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        left: 0;
+        right: 0;
+        top: 10px;
+        background-color: rgb(229 231 235);
+    }
+}
+
+
+.cb-day-title-text {
+    position: relative;
+    z-index: 1;
+    padding: 0.375rem 1.5rem;
+    background-color: rgb(243 244 246);
+    border-radius: 0.375rem;
+    font-size: 0.8125rem;
+    color: rgb(55 65 81);
+}
+
+
+/* Message row (replaces .conv-msg-container) */
+
+
+.cb-msg-row {
+    display: flex;
+    position: relative;
+    width: 100%;
+    margin-bottom: 1.25rem;
+}
+
+
+.cb-conv-right .cb-msg-row {
+    justify-content: flex-end;
+}
+
+
+/* Avatar wrapper (replaces .cicon-wrap with float / align modifiers) */
+
+
+.cb-cicon {
+    margin-right: 0.25rem;
+    flex: 0 0 fit-content;
+}
+
+
+.cb-cicon-end {
+    align-content: end;
+}
+
+
+.cb-cicon-start {
+    float: left;
+}
+
+
+/* Avatar images (replaces .rounded-circle.avatar-sm / .avatar-xs) */
+
+
+.cb-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+
+.cb-avatar-xs {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+
+/* Message stack (replaces .msg-container) */
+
+
+.cb-msg-stack {
+    display: flex;
+    flex-direction: column;
+    width: 80%;
+}
+
+
+.cb-conv-right .cb-msg-stack {
+    align-items: flex-end;
+}
+
+.cb-user-msg-link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}
+
+
+/* Bubble base (replaces .ctext-wrap) */
+
+
+.cb-bubble {
+    padding: 0.5rem 0.75rem;
+    overflow: hidden;
+    width: fit-content;
+    max-width: 100%;
+    word-break: break-all;
+}
+
+
+/* User bubble (replaces .user-msg.bg-primary on the right side) */
+
+
+.cb-bubble-user {
+    background-color: var(--color-primary);
+    border-radius: 8px 8px 0 8px;
+}
+
+
+.cb-bubble-text-user {
+    text-align: start;
+    font-weight: 700;
+    color: rgb(255 255 255);
+}
+
+
+.cb-clickable {
+    cursor: pointer;
+}
+
+
+/* "Thinking" bubble (replaces .ctext-wrap.float-start when isThinking) */
+
+
+.cb-bubble-thinking {
+    float: left;
+    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    border-radius: 8px 8px 8px 0;
+}
+
+
+.cb-chat-indication {
+    font-size: 1em;
+}
+
+
+.cb-thinking-dots {
+    flex-shrink: 0;
+    align-self: center;
+    display: inline-block;
+}
+
+
+/* Chat time below user bubble (replaces .chat-time.mb-0.float-end) */
+
+
+.cb-chat-time {
+    font-size: 12px;
+    margin-bottom: 0;
+    float: right;
+    color: var(--color-muted);
+}
+
+
+.cb-chat-time-icon {
+    margin-right: 0.25rem;
+}
+
+
+/* Message action 3-dots button (replaces .dropdown-toggle.btn.btn-link.p-0.border-0) */
+
+
+.cb-msg-action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    font-size: 18px;
+    line-height: 1;
+    background-color: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--color-secondary);
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
+
+
+    /* Pill-style hover + persistent highlight while the menu is open
+       (driven by the existing aria-expanded="true" attribute). */
+    &:hover:not(:disabled), &[aria-expanded="true"] {
+        color: var(--color-primary);
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+
+
+    &:active:not(:disabled) {
+        transform: scale(0.92);
+    }
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+
+/* Message action menu — opens ABOVE the trigger. Overrides the default
+   downward animation/origin from .cb-menu so the popup feels like it's
+   anchored to the kebab (bottom-right) instead of dropping in from
+   above the row. */
+
+
+.cb-msg-menu {
+    top: auto;
+    bottom: 100%;
+    margin: 0 0 0.375rem 0;
+    transform-origin: bottom right;
+
+
+    &.show {
+        animation-name: cb-menu-pop-up;
+    }
+}
+
+
+@keyframes cb-menu-pop-up {
+    from {
+        opacity: 0;
+        transform: scale(0.94) translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+
+/* Bot bubble action toolbar (Speaker / Like / Edit / Copy / Code script row).
+   align-items: center + uniform line-height + font-size on the row guarantees
+   every glyph sits on the same baseline regardless of which icon font
+   (mdi/bx) it comes from. Icon-specific height: 95/80/85% rules from the
+   legacy were a baseline-compensation hack that's no longer needed. */
+
+
+.cb-msg-actions {
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    font-size: 17px;
+    line-height: 1;
+    color: var(--color-primary);
+}
+
+
+.cb-msg-action {
+    display: flex;
+    align-items: center;
+}
+
+
+/* Icon wrappers — height behavior now comes from flex centering, not
+   the legacy height: 95%/80%/85% hacks. */
+
+
+.cb-msg-action-icon,
+.cb-msg-action-icon-edit,
+.cb-msg-action-icon-copy,
+.cb-msg-action-icon-code {
+    display: flex;
+    align-items: center;
+    line-height: 1;
+}
+
+
+/* Primary-colored action icons (replaces .text-primary on inline icon wrappers) */
+
+
+.cb-text-primary {
+    color: var(--color-primary);
+}
+
+
+/* AudioSpeaker is rendered inside .cb-msg-actions but lives in its own
+   component with the legacy .chat-speaker-container class. Force it to
+   inherit the toolbar's primary color and sit centered. Uses 
+   because the container is rendered in a separate component scope. */
+
+
+.cb-msg-actions {
+
+
+    & .chat-speaker-container {
+        display: flex;
+        align-items: center;
+        height: auto;
+        font-size: inherit;
+        color: var(--color-primary);
+    }
+
+
+    & .chat-speaker-container i {
+        color: var(--color-primary);
+    }
+}
+
+
+/* "Copied!" feedback cluster (replaces .div-center) */
+
+
+.cb-div-center {
+    text-align: center;
+}
+
+
+.cb-copied-label {
+    font-size: 10px;
+}
+
+
+/* ===== Dark mode (Step 4c) ===== */
+
+
+.dark .cb-day-title::before {
+    background-color: rgb(55 65 81);
+}
+
+
+.dark .cb-day-title-text {
+    background-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .cb-bubble-thinking {
+    background-color: color-mix(in srgb, var(--color-primary) 18%, rgb(31 41 55));
+}
+
+
+.dark .cb-msg-action-btn {
+    color: rgb(156 163 175);
+
+
+    &:hover:not(:disabled), &[aria-expanded="true"] {
+        color: rgb(255 255 255);
+        background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+}
+
+
+/* ===== 4d: Compose footer (mic, textarea wrapper, util links, send) ===== */
+
+
+/* Footer shell (replaces .chat-input-section) */
+
+
+.cb-input-section {
+    padding: 0 2%;
+    height: 8%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+
+.cb-input-hide {
+    display: none;
+    height: 2%;
+}
+
+
+/* Local copies of the legacy css-animation / fade-in-from-none helpers
+   so the footer no longer depends on the global _animation.scss rules. */
+
+
+.cb-css-animation {
+    animation-duration: 0.8s;
+    animation-fill-mode: both;
+}
+
+
+.cb-fade-in {
+    animation-name: cbFadeInFromNone;
+}
+
+
+@keyframes cbFadeInFromNone {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+
+/* Row layout (replaces Bootstrap .row + .col-auto + .col) */
+
+
+.cb-input-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+
+.cb-col-auto {
+    flex: 0 0 auto;
+}
+
+
+.cb-col-grow {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+
+.cb-position-relative {
+    position: relative;
+}
+
+
+/* Round action buttons (replaces .btn.btn-rounded with primary/danger variants).
+   Also replaces .chat-send (Bootstrap had no shared rule beyond btn). */
+
+
+.cb-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.9rem;
+    font-size: 0.9375rem;
+    line-height: 1.2;
+    border: 1px solid transparent;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+
+.cb-btn-round {
+    border-radius: 999px;
+}
+
+
+.cb-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+
+
+    &:hover:not(:disabled), &:focus:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-primary) 88%, black 12%);
+    }
+}
+
+
+.cb-btn-danger {
+    background-color: var(--color-danger, #ef4444);
+    border-color: var(--color-danger, #ef4444);
+    color: rgb(255 255 255);
+
+
+    &:hover:not(:disabled), &:focus:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-danger, #ef4444) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-danger, #ef4444) 88%, black 12%);
+    }
+}
+
+
+/* Send button — keep some horizontal padding for the label */
+
+
+.cb-btn-send {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+
+/* Hidden label on small screens, inline on >=md (replaces .d-none.d-md-inline-block.me-2) */
+
+
+.cb-send-label {
+    display: none;
+    margin-right: 0.5rem;
+}
+
+
+@media (min-width: 768px) {
+    .cb-send-label {
+        display: inline-block;
+    }
+}
+
+
+/* Microphone icon size — sized to fit the round button next to the
+   textarea (~38px height). Previously 36px which produced a 56px-tall
+   button towering over the 39px textarea. */
+
+
+.cb-md-36 {
+    font-size: 20px;
+    line-height: 1;
+}
+
+
+/* ===== Textarea: extra right padding to make room for util links
+   (replaces .chat-more-util { padding-right: 5em }).
+   Applied via className prop passed into ChatTextArea, which is rendered
+   on the inner <textarea>; we need  because ChatTextArea is a
+   scoped child component. */
+
+
+.cb-textarea-more-util {
+    padding-right: 5em !important;
+}
+
+
+/* ===== Util uploader trigger (replaces .line-align-center.text-primary.chat-util-item).
+   Applied via containerClasses prop on ChatFileUploader, which puts the class
+   on a <div>; uses  for the same reason as cb-textarea-more-util. */
+
+
+.cb-util-uploader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 30px;
+    color: var(--color-primary);
+}
+
+
+/* Util links cluster pinned over the right side of the textarea
+   (replaces .chat-util-links). Sized to fit comfortably inside the
+   ~38px textarea without the icons overflowing it vertically. */
+
+
+.cb-util-links {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    width: fit-content;
+    position: absolute;
+    right: 6px;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 1;
+    color: var(--color-primary);/* Flatten the cu-/cbm- glyph sizing — their own scoped 200% rule
+   compounds with our wrapper's old 160% to ~51px which dwarfed the
+   textarea. Anchor to a flat 1.25rem (20px) here so the icons fit. */
+
+
+    & .cu-glyph, & .cbm-glyph {
+        font-size: 1.25rem;
+        line-height: 1;
+        padding: 0 0.2rem;
+    }
+
+
+    & .cu-icon, & .cbm-icon {
+        font-size: inherit;
+    }
+}
+
+
+/* ===== Dark mode (Step 4d) ===== */
+
+
+.dark .cb-btn-primary {
+    color: rgb(255 255 255);
+}
+
+
+.dark .cb-btn-danger {
+    color: rgb(255 255 255);
+}
+
+
+/* Markdown text color override applied via the markdownClasses prop on
+   <RcMessage>; Markdown puts the class on its inner container, so
+    is required. Replaces Bootstrap .text-dark utility. */
+
+
+.cb-md-dark {
+    color: var(--color-dark);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte
+ * ======================================================================== */
+
+
+/* Replaces legacy .plain-option-container + .center-option */
+
+
+.cao-wrap {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.cao-center {
+    justify-content: center;
+    padding: 0 0.625rem;
+}
+
+
+/* Replaces .btn .btn-sm .m-1 with a themed outline button */
+
+
+.cao-btn {
+    margin: 0.25rem;
+    min-width: 50px;
+    padding: 0.3125rem 0.75rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    border: 1px solid transparent;
+    border-radius: 0.625rem;
+    background-color: transparent;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+
+    &:focus-visible {
+        outline: 0;
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+
+/* Replaces .btn-outline-primary */
+
+
+.cao-btn-primary {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+
+/* Replaces .btn-outline-secondary */
+
+
+.cao-btn-secondary {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-secondary);
+        color: rgb(255 255 255);
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .cao-btn-primary {
+    color: color-mix(in srgb, var(--color-primary) 80%, rgb(255 255 255));
+    border-color: color-mix(in srgb, var(--color-primary) 80%, rgb(255 255 255));
+}
+
+
+.dark .cao-btn-secondary {
+    color: rgb(229 231 235);
+    border-color: rgb(107 114 128);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-uploader.svelte
+ * ======================================================================== */
+
+
+/* ===== Chat file uploader =====
+   Tiny wrapper around <FileDropZone> that ChatBox embeds inside the
+   textarea util menu. The actual trigger glyph is supplied by the
+   parent via the `children` snippet; the fallback below renders only
+   when no snippet is passed (e.g. for ad-hoc consumers). */
+
+
+.cfu-root {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+
+
+.cfu-fallback {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary);
+    font-size: 1.25rem;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
+ * ======================================================================== */
+
+
+/* ===== Wrapper =====
+   Provides the positioning anchor for the absolutely-positioned
+   option list and util container popups (replaces the absolute
+   anchoring previously provided by .chat-util-common). */
+
+
+.cta-wrap {
+    position: relative;
+}
+
+
+/* ===== Popup container (replaces .chat-util-common) ===== */
+
+
+.cta-popup {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    right: 0;
+    max-width: 100%;
+    max-height: 25em;
+    z-index: 99;
+    font-size: 0.8rem;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    box-shadow:
+        0 10px 25px -5px rgb(15 23 42 / 0.12),
+        0 8px 10px -6px rgb(15 23 42 / 0.05);
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+
+/* ===== Option list (replaces .dropdown-menu .chat-option-list) ===== */
+
+
+.cta-option-list {
+    list-style: none;
+    padding: 0.25rem 0;
+    margin: 0 0 0.25rem 0;
+}
+
+
+.cta-option-item {
+    padding: 0.375rem 0.9375rem;
+    cursor: pointer;
+    color: rgb(17 24 39);
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+
+    &:hover {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+
+/* ===== Util container (replaces .chat-util-container) ===== */
+
+
+.cta-util-container {
+    display: flex;
+    gap: 1.25rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+    height: fit-content;
+    padding: 0.625rem 0.9375rem;
+    margin-bottom: 0.25rem;
+}
+
+
+/* ===== Themed textarea (replaces Bootstrap .form-control).
+   Fixed height (no manual resize) and no scrollbar — long input
+   still scrolls programmatically but the bar stays hidden. */
+
+
+.cta-textarea {
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: rgb(17 24 39);
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    font-family: inherit;
+    resize: none;
+    overflow: auto;
+    scrollbar-width: none;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+
+    &:disabled {
+        background-color: rgb(243 244 246);
+        cursor: not-allowed;
+        color: var(--color-muted);
+    }
+
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 0.85;
+    }
+}
+
+
+/* ===== Dark mode ===== */
+
+
+.dark .cta-popup {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+
+.dark .cta-option-item {
+    color: rgb(229 231 235);
+}
+
+
+.cta-textarea {
+
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(229 231 235);
+    }
+
+
+    .dark &:disabled {
+        background-color: rgb(31 41 55);
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
+ * ======================================================================== */
+
+
+/* Replaces legacy .chat-util-trigger / .list-inline / .list-inline-item / .clickable */
+
+
+.cu-trigger {
+    text-align: center;
+}
+
+
+.cu-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+
+.cu-item {
+    display: inline-block;
+}
+
+
+.cu-glyph {
+    display: inline-block;
+    padding: 0 0.25rem;
+    line-height: 2.25rem;
+    font-size: 200%;
+    color: var(--color-primary);
+}
+
+
+.cu-icon {
+    cursor: pointer;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte
+ * ======================================================================== */
+
+
+/* Outer row (replaces .log-element + .queue-change-container) */
+
+
+.aql-element {
+    margin: 5px 0;
+    padding: 0 10px;
+}
+
+
+/* Centered content line (replaces .log-content under .queue-change-container) */
+
+
+.aql-content {
+    text-align: center;
+    font-size: 15px;
+    margin: 2px 0;
+    color: rgb(255 255 255);
+}
+
+
+/* Warning-colored log text (replaces Bootstrap .text-warning) */
+
+
+.aql-warn {
+    color: var(--color-warning, #f1b44c);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
+ * ======================================================================== */
+
+
+/* ===== Root wrapper (replaces .chat-log) ===== */
+
+
+.il-root {
+    height: 100vh;
+}
+
+
+/* ===== Card shell (replaces .card.mb-0.log-background.log-flex) ===== */
+
+
+.il-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: rgb(0 0 0);
+    margin-bottom: 0;
+    border: 0;
+    border-radius: 0;
+}
+
+
+/* ===== Sticky close-window bar (replaces .log-close-btn.padding-side.log-header) ===== */
+
+
+.il-close-bar {
+    flex: 0 0 auto;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    padding: 0 20px;
+    position: sticky;
+    display: flex;
+    justify-content: space-between;
+}
+
+
+/* Close-window button (replaces .btn.btn-sm.btn-secondary.btn-rounded.chat-send) */
+
+
+.il-close-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8125rem;
+    line-height: 1.2;
+    border-radius: 999px;
+    border: 1px solid var(--color-secondary);
+    background-color: var(--color-secondary);
+    color: rgb(255 255 255);
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, var(--color-secondary) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-secondary) 88%, black 12%);
+    }
+}
+
+
+/* ===== Body (replaces .log-body.instant-log-body) ===== */
+
+
+.il-body {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 0 20px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+
+/* ===== Footer placeholder (replaces .log-footer) ===== */
+
+
+.il-footer {
+    flex: 0 0 auto;
+}
+
+
+/* ===== Log section (replaces .log-list.instant-log-section) ===== */
+
+
+.il-section {
+    background-color: rgb(0 0 0);
+    border-radius: 10px;
+    border: 1px solid var(--color-secondary);
+    display: flex;
+    flex-direction: column;
+}
+
+
+.il-section-sm {
+    flex: 0 0 150px;
+    height: 150px;
+    min-height: 150px;
+}
+
+
+.il-section-md {
+    flex: 0 0 280px;
+    height: 280px;
+    min-height: 280px;
+}
+
+
+.il-section-lg {
+    flex: 0 0 400px;
+    height: 400px;
+    min-height: 400px;
+}
+
+
+/* Agent-info section: scrolls within its own panel
+   (replaces .chat-agent-info inside .instant-log-section) */
+
+
+.il-agent-info {
+    padding: 0 20px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    flex: 0 0 fit-content;
+    height: fit-content;
+    max-height: 280px;
+
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+
+/* Close-icon header on collapsible sections
+   (replaces .close-icon { color: red; font-size: 20px; padding: 0 5px }) */
+
+
+.il-section-close {
+    font-size: 20px;
+    color: var(--color-danger, #ef4444);
+    padding: 0 5px;
+}
+
+
+.il-section-close-btn {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    color: inherit;
+    float: right;
+    cursor: pointer;
+    line-height: 1;
+
+
+    &:hover {
+        opacity: 0.85;
+    }
+}
+
+
+/* Scrollable list containers (the .agent-queue-log-scrollbar /
+   .msg-state-log-scrollbar siblings are kept as DOM hooks for
+   OverlayScrollbars; .il-scroll owns the padding rules previously
+   provided by .padding-side) */
+
+
+.il-scroll {
+    padding: 0 20px;
+}
+
+
+.il-list {
+    list-style: none;
+    margin: 0;
+    padding-left: 2px;
+    padding-right: 0;
+}
+
+
+/* Latest-state-log panel: 8px inset (replaces .latest-state-log) */
+
+
+.il-latest-scroll {
+    padding: 8px;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
+ * ======================================================================== */
+
+
+/* Outer row (replaces .log-element + .state-log-item nested rule) */
+
+
+.lsl-element {
+    margin: 5px 0 10px 0;
+}
+
+
+/* Content (replaces .log-content rules under .state-log-item) */
+
+
+.lsl-content {
+    font-size: 17px;
+    color: rgb(255 255 255);
+
+
+    & span {
+        font-size: 16px;
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte
+ * ======================================================================== */
+
+
+/* Outer row (replaces .log-element + .state-change-container) */
+
+
+.mss-element {
+    margin: 0 0 5px 0;
+    padding-left: 10px;
+}
+
+
+/* Key row (replaces .log-meta.state-key.text-danger) */
+
+
+.mss-meta {
+    font-size: 15px;
+    color: rgb(255 255 255);
+}
+
+
+.mss-state-key {
+    color: var(--color-danger, #ef4444);
+}
+
+
+.mss-state-source {
+    font-size: 12px;
+    color: var(--color-secondary);
+    margin-left: 0.375rem;
+}
+
+
+/* Before/after value pair (replaces .log-content + .state-value-container) */
+
+
+.mss-content {
+    font-size: 17px;
+    color: rgb(255 255 255);
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+.mss-state-value {
+    min-width: 50%;
+    font-size: 15px;
+}
+
+
+.mss-state-value-warn {
+    color: var(--color-warning, #f1b44c);
+}
+
+
+.mss-active-rounds {
+    font-size: 12px;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
+ * ======================================================================== */
+
+
+/* Outer row (replaces .log-element + inline padding + .rounded) */
+
+
+.cle-element {
+    margin: 10px 0 15px 0;
+    padding: 3px;
+    border-radius: 0.25rem;
+    color: rgb(255 255 255);
+}
+
+
+/* Header line: agent name + timestamp (replaces .log-meta.text-secondary) */
+
+
+.cle-meta {
+    font-size: 15px;
+    color: var(--color-secondary);
+}
+
+
+/* H4-equivalent heading inside meta row (replaces Bootstrap .h4) */
+
+
+.cle-title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 1.2;
+}
+
+
+/* Clickable agent name (replaces .text-secondary.text-decoration-underline.clickable) */
+
+
+.cle-link {
+    color: var(--color-secondary);
+    text-decoration: underline;
+    cursor: pointer;
+
+
+    &:hover {
+        opacity: 0.85;
+    }
+}
+
+
+/* Plain secondary text on disabled agent name (replaces Bootstrap .text-secondary) */
+
+
+.cle-text-secondary {
+    color: var(--color-secondary);
+}
+
+
+/* Timestamp suffix (replaces Bootstrap .ms-2) */
+
+
+.cle-meta-ts {
+    margin-left: 0.5rem;
+}
+
+
+/* Content body (replaces .rounded.log-content + inline padding).
+   Wide content (e.g. JSON dumps) overflows horizontally — allow the
+   scroll but hide the visible scrollbar in all engines. */
+.cle-content {
+    font-size: 17px;
+    color: rgb(255 255 255);
+    padding: 5px 8px;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    & pre {
+        scrollbar-width: none;
+        background-color: #2a1845 !important;
+        border-radius: 0.375rem !important;
+        padding: 0.5rem 0.75rem !important;
+    }
+
+
+    & pre::-webkit-scrollbar {
+        display: none;
+    }
+
+    & .markdown-container {
+        scrollbar-width: none !important;
+    }
+
+    & .markdown-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    & li {
+        margin: 5px 0;
+    }
+}
+
+
+/* Source-specific visual variants (replace Bootstrap utility classes used
+   in the legacy logDisplayStyle derived value).
+   - cle-bordered: AgentResponse / Notification (was 'border border-secondary')
+   - cle-bg-secondary: FunctionCall (was 'bg-secondary')
+   - cle-text-secondary: Prompt (was 'text-secondary' on the content div)
+   - cle-text-warning: HardRule (was 'text-warning')
+   - cle-bg-danger: UserInput (was 'bg-danger') */
+
+
+.cle-bordered {
+    border: 1px solid var(--color-secondary);
+}
+
+
+.cle-bg-secondary {
+    background-color: var(--color-secondary);
+}
+
+
+.cle-text-warning {
+    color: var(--color-warning, #f1b44c);
+}
+
+
+.cle-bg-danger {
+    background-color: var(--color-danger, #ef4444);
+}
+
+
+/* Markdown text color for AgentResponse / Notification (replaces Bootstrap
+   .text-info passed via Markdown's containerClasses prop) */
+
+
+.cle-text-info {
+    color: var(--color-info, #0ea5e9);
+}
+
+
+/* Collapsed text clamp (replaces .log-collapse nested under .log-content).
+   Note: -webkit-line-clamp with display:-webkit-box forces the browser to
+   resolve overflow-x to 'auto' even if we only set overflow-y:hidden,
+   which surfaces a native horizontal scrollbar whenever the clamped
+   content has long lines. Setting overflow:hidden (both axes) clips
+   cleanly without ever showing a scrollbar in collapsed state. */
+
+
+.cle-collapse {
+    overflow: hidden;
+    height: fit-content;
+    max-height: 200px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 10;
+}
+
+
+/* More/Less toggle (replaces .btn.btn-link.toggle-btn.btn-sm) */
+
+
+.cle-toggle-btn {
+    background: transparent;
+    border: 0;
+    outline: none;
+    box-shadow: none;
+    color: rgb(255 255 255);
+    font-size: 15px;
+    padding: 0;
+    cursor: pointer;
+
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+
+/* MessageId footer (replaces inline style="margin-top: 10px;") */
+
+
+.cle-msg-id {
+    margin-top: 10px;
+    color: rgb(255 255 255);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
+ * ======================================================================== */
+
+
+/* Outer row (replaces .log-element + .state-log-item nested rule) */
+
+
+.csle-element {
+    margin: 5px 0 10px 0;
+}
+
+
+/* Content (replaces .log-content under .state-log-item) */
+
+
+.csle-content {
+    font-size: 17px;
+    color: rgb(255 255 255);
+
+
+    & span {
+        font-size: 16px;
+    }
+}
+
+
+/* MessageId footer (replaces inline style="margin-top: 10px;") */
+
+
+.csle-msg-id {
+    margin-top: 10px;
+    color: rgb(255 255 255);
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
+ * ======================================================================== */
+
+
+/* ===== Root wrapper (replaces .chat-log) ===== */
+
+
+.pl-root {
+    height: 100vh;
+}
+
+
+/* ===== Card shell (replaces .card.mb-0.log-background.log-flex) ===== */
+
+
+.pl-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: rgb(0 0 0);
+    margin-bottom: 0;
+    border: 0;
+    border-radius: 0;
+}
+
+
+/* ===== Sticky header bar with action buttons
+        (replaces .log-close-btn.padding-side.log-header) ===== */
+
+
+.pl-header-bar {
+    flex: 0 0 auto;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    padding: 0 20px;
+    position: sticky;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+
+.pl-action-group {
+    display: inline-flex;
+    gap: 0.25rem;
+}
+
+
+/* Themed action buttons (replace .btn .btn-sm .btn-rounded .chat-send variants) */
+
+
+.pl-action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8125rem;
+    line-height: 1.2;
+    border: 1px solid transparent;
+    border-radius: 999px;
+    background-color: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+
+.pl-action-btn-secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary);
+    color: rgb(255 255 255);
+
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, var(--color-secondary) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-secondary) 88%, black 12%);
+    }
+}
+
+
+.pl-action-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+    border-radius: 0.25rem;
+
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, var(--color-primary) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-primary) 88%, black 12%);
+    }
+}
+
+
+.pl-action-btn-light {
+    background-color: var(--color-light, #eff2f7);
+    border-color: var(--color-light, #eff2f7);
+    color: var(--color-dark, #2a3042);
+    border-radius: 0.25rem;
+
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, var(--color-light, #eff2f7) 88%, black 12%);
+        border-color: color-mix(in srgb, var(--color-light, #eff2f7) 88%, black 12%);
+    }
+}
+
+
+/* ===== Scrollable log list (replaces .log-list.padding-side.log-body) ===== */
+
+
+.pl-scroll-area {
+    flex: 1 1 auto;
+    background-color: rgb(0 0 0);
+    padding: 0 20px;
+    overflow-y: scroll;
+    scrollbar-width: none;
+
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+
+.pl-list {
+    list-style: none;
+    margin: 0;
+    padding-left: 2px;
+    padding-right: 0;
+}
+
+
+/* Hide inactive tab pane (replaces global .hide utility) */
+
+
+.pl-hide {
+    display: none !important;
+}
+
+
+/* ===== Footer with nav tabs (replaces .log-footer.nav-group) =====
+   Note: the nav button font-size override (was .log-footer-nav-btn)
+   is passed via NavItem's navBtnStyles prop as inline style — that
+   wins the cascade reliably against NavItem's own scoped .tab-btn rule. */
+
+
+.pl-footer {
+    flex: 0 0 auto;
+    margin: 0 3px;/* The persist-log card uses a pure-black background, but the shared
+   NavBar component paints inactive tab labels with `var(--color-dark)`
+   (#343a40) — effectively invisible here. Lift the inactive label and
+   dim the tablist underline so both read clearly against black. The
+   active tab is intentionally untouched so its primary accent (and
+   the underline) keep working. Scoping through `.pl-footer .tab-bar`
+   gives this rule enough specificity to outscore NavBar's
+   .tab-bar.nav-tabs-default .tab-btn:not(.active).... *//* These three rules override the shared NavBar component's defaults
+   (`.tab-bar.nav-tabs-default ...` from src/lib/common/nav-bar/NavBar.svelte).
+   NavBar's scoped <style> uses `:global()` so its rules sit in the global
+   cascade at the same specificity as ours, but they're injected AFTER
+   this stylesheet (Svelte mounts scoped styles at component-mount time),
+   so they win on source order. `!important` is the clearest way to
+   express "these are intentional overrides of the shared component's
+   defaults" — same intent the original scoped block had, where the
+   scope-hash gave us an extra class for free. */
+
+
+    & .tab-bar {
+        border-bottom-color: rgb(255 255 255 / 0.12) !important;
+    }
+
+
+    & .tab-bar .tab-btn:not(.active) {
+        color: rgb(255 255 255 / 0.7) !important;
+    }
+
+
+    & .tab-bar .tab-btn:not(.active):hover {
+        color: rgb(255 255 255 / 0.92) !important;
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
+ * ======================================================================== */
+
+
+/* ===== Card grid (replaces .complex-option-container) ===== */
+
+
+.rcco-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    margin-top: 10px;
+}
+
+
+/* Individual card (replaces .card-element + outer .card) */
+
+
+.rcco-card {
+    flex: 1 1 50%;
+    max-width: calc(50% - 2.5px);
+    border: 2px solid var(--color-border, #dee2e6);
+    border-radius: 10px;
+    background-color: rgb(255 255 255);
+    margin-bottom: 0;
+    overflow: hidden;
+}
+
+
+/* Card inner body (replaces .card-body.card-element-body) */
+
+
+.rcco-card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    gap: 5px;
+    padding: 10px 15px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+
+.rcco-title {
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+
+.rcco-subtitle {
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+
+.rcco-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    padding: 5px;
+}
+
+
+/* Clamp long text — replaces legacy .hide-text marker class (was undefined,
+   but the visual intent is to ellipsize / hide overflow). */
+
+
+.rcco-clip {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+/* Avatar slot (replaces .avatar-md + .avatar-title.rounded-circle.bg-light.text-danger.font-size-16) */
+
+
+.rcco-avatar {
+    height: 4.5rem;
+    width: 4.5rem;
+}
+
+
+.rcco-avatar-frame {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    border-radius: 50%;
+    background-color: var(--color-light, #eff2f7);
+    color: var(--color-danger, #f46a6a);
+    font-size: 16px;
+}
+
+
+.rcco-avatar-img {
+    border-radius: 50%;
+}
+
+
+/* Per-card button group (replaces .card-option-group + nested .btn rules) */
+
+
+.rcco-option-group {
+    margin-top: 5px;
+
+
+    & .rcco-btn {
+        display: block;
+        margin-left: 0 !important;
+        border-radius: 10px;
+        width: 100%;
+    }
+}
+
+
+/* Bottom button row (replaces .plain-option-container.center-option) */
+
+
+.rcco-button-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 0 10px;
+    margin-top: 5px;
+}
+
+
+/* Themed action buttons (replace .btn .btn-sm .m-1 .btn-outline-primary/secondary) */
+
+
+.rcco-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    margin: 0.25rem;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8125rem;
+    line-height: 1.2;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+
+.rcco-btn-primary {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+
+
+    &:hover:not(:disabled) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+    }
+}
+
+
+.rcco-btn-secondary {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+
+
+    &:hover:not(:disabled) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+    }
+}
+
+
+/* Link-style hover underline (replaces .link-option:hover under .card-option-group) */
+
+
+.rcco-link:hover {
+    text-decoration: underline;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
+ * ======================================================================== */
+
+
+/* Post-action disclaimer (replaces .msg-disclaimer with subtle success styling) */
+
+
+.rcd-box {
+    margin-top: 3px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    border: 1px solid color-mix(in srgb, var(--color-success, #34c38f) 35%, transparent);
+    background-color: color-mix(in srgb, var(--color-success, #34c38f) 12%, transparent);
+    font-size: 0.85em;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-embedding.svelte
+ * ======================================================================== */
+
+
+/* Outer flex column (replaces global _rich_content.scss .rc-embedding-wrapper) */
+
+
+.rc-embedding-wrapper {
+    width: 100%;
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+/* Toggle row with the open/close pill + external link icon */
+
+
+.rc-embedding-toggle-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+
+/* External-link icon */
+
+
+.rc-embedding-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-info, #50a5f1);
+    font-size: 16px;
+    transition: color 0.2s ease;
+    text-decoration: none;
+
+
+    &:hover {
+        color: color-mix(in srgb, var(--color-info, #50a5f1) 70%, black 30%);
+    }
+}
+
+
+/* Open/close pill — danger (red) when open, success (green) when closed */
+
+
+.rc-embedding-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 0 auto;
+    width: auto;
+    background: linear-gradient(135deg, rgb(244 106 106 / 0.08), rgb(244 106 106 / 0.15));
+    border: 1px solid rgb(244 106 106 / 0.2);
+    border-radius: 20px;
+    cursor: pointer;
+    padding: 6px 16px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-danger, #f46a6a);
+    user-select: none;
+    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
+    backdrop-filter: blur(4px);
+
+
+    &:hover {
+        background: linear-gradient(135deg, rgb(244 106 106 / 0.15), rgb(244 106 106 / 0.25));
+        border-color: rgb(244 106 106 / 0.4);
+        box-shadow: 0 2px 8px rgb(244 106 106 / 0.2);
+        transform: translateY(-1px);
+    }
+
+
+    &:active {
+        transform: translateY(0);
+        box-shadow: none;
+    }
+
+
+    &.closed {
+        background: linear-gradient(135deg, rgb(52 195 143 / 0.08), rgb(52 195 143 / 0.15));
+        border-color: rgb(52 195 143 / 0.2);
+        color: var(--color-success, #34c38f);
+    }
+
+
+    &.closed:hover {
+        background: linear-gradient(135deg, rgb(52 195 143 / 0.15), rgb(52 195 143 / 0.25));
+        border-color: rgb(52 195 143 / 0.4);
+        box-shadow: 0 2px 8px rgb(52 195 143 / 0.2);
+    }
+}
+
+
+/* Collapsible iframe wrapper (replaces inline style="width:100%;margin-top:8px") */
+
+
+.rc-embedding-collapse {
+    width: 100%;
+    margin-top: 8px;
+}
+
+
+/* iframe container */
+
+
+.rc-embedding-container {
+    width: 100%;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+    overflow: auto;
+    scrollbar-width: thin;
+}
+
+
+.rc-embedding-iframe {
+    width: fit-content;
+    min-width: 100%;
+    max-height: 800px;
+    min-height: 500px;
+    border: 1px solid var(--color-border, #dee2e6);
+    border-radius: 8px;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte
+ * ======================================================================== */
+
+
+/* Vertical rhythm between text + loading + chart (replaces Bootstrap .mb-3) */
+
+
+.rcj-section {
+    margin-bottom: 1rem;
+}
+
+
+/* Chart canvas slot (replaces inline style="min-width:800px; max-height:500px;") */
+
+
+.rcj-chart {
+    min-width: 800px;
+    max-height: 500px;
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+ * ======================================================================== */
+
+
+/* Bot bubble (replaces legacy .ctext-wrap + .bot-msg override which set
+   padding, primary-tinted bg overridden to --bs-light, and rounded with
+   bottom-left squared corner). Caller-supplied containerClasses are still
+   appended in markup so chat-box and other callers can stack scoped
+   modifiers on top. */
+
+
+.rcm-bubble {
+    padding: 8px 12px;
+    background-color: var(--color-light, #eff2f7);
+    border-radius: 8px 8px 8px 0;
+    overflow: hidden;
+    width: fit-content;
+    max-width: 100%;
+    word-break: break-word;
+    color: var(--color-dark);
+}
+
+
+/* Inner body wrapper around the rich-type renderer / markdown output
+   (replaces Bootstrap .flex-shrink-0.align-self-center) */
+
+
+.rcm-body {
+    flex-shrink: 0;
+    align-self: center;
+}
+
+
+/* Bold "Thinking" label inside the toggle row (replaces Bootstrap .font-bold) */
+
+
+.rcm-thinking-label {
+    font-weight: 700;
+}
+
+
+.thinking-section {
+    margin-bottom: 15px;
+}
+
+
+.thinking-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: none;
+    border: none;
+    color: #555;
+    cursor: pointer;
+    padding: 4px 0;
+    font-size: 0.9em;
+
+
+    &:hover {
+        color: #333;
+    }
+}
+
+
+.thinking-sparkle {
+    color: #4285f4;
+    display: flex;
+    align-items: center;
+
+
+    &.pulsing {
+        animation: thinking-sparkle-pulse 1.4s ease-in-out infinite;
+    }
+}
+
+
+@keyframes thinking-sparkle-pulse {
+    0%, 100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+    50% {
+        opacity: 0.55;
+        transform: scale(1.15);
+    }
+}
+
+
+.thinking-chevron {
+    font-size: 1em;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    display: inline-block;
+
+
+    &.expanded {
+        transform: rotate(90deg);
+    }
+}
+
+
+.stopped-thinking-label {
+    font-size: 0.85em;
+    color: #999;
+    font-style: italic;
+}
+
+
+.thinking-content {
+    font-size: 0.9em;
+    padding: 4px 0 4px 16px;
+    border-left: 1px solid #888;
+    margin-top: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte
+ * ======================================================================== */
+
+
+/* Centered row — replaces .center-option (justify-content: center, 0 10px) */
+
+
+.rcpo-center {
+    justify-content: center;
+    padding: 0 10px;
+}
+
+
+/* ===== Video row (replaces .video-option-container + nested elements) ===== */
+
+
+.rcpo-video-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+
+.rcpo-video-card {
+    flex: 1 1 300px;
+    border: 0;
+    box-shadow: none;
+    background-color: transparent;
+}
+
+
+/* Inner body (replaces .card .card-body with !important padding:0) */
+
+
+.rcpo-video-body {
+    padding: 0;
+}
+
+
+.rcpo-video-title {
+    font-size: 1.1em;
+    font-weight: 700;
+    padding: 10px 0 10px 5px;
+    margin-bottom: 5px;
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+
+.rcpo-video-player {
+    aspect-ratio: 16 / 9;
+
+
+    & video, & iframe {
+        border-radius: 10px;
+        height: 100%;
+    }
+}
+
+
+/* ===== Plain option row (replaces .plain-option-container) ===== */
+
+
+.rcpo-option-row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+/* Themed action buttons (replace .btn .btn-sm .m-1 .btn-outline-primary/secondary/success).
+   The .btn:not([name="confirm"]):hover legacy rule swapped to white bg + primary text;
+   .btn.active:hover kept primary bg + white text. We replicate that behavior here. */
+
+
+.rcpo-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 50px;
+    margin: 0.25rem;
+    padding: 0.25rem 0.6rem;
+    font-size: 0.8125rem;
+    line-height: 1.2;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    background-color: transparent;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+
+.rcpo-btn-primary {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+
+
+    &:hover:not(:disabled) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+    }
+}
+
+
+.rcpo-btn-secondary {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+
+
+    &:hover:not(:disabled) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+    }
+}
+
+
+.rcpo-btn-confirm {
+    color: var(--color-success, #34c38f);
+    border-color: var(--color-success, #34c38f);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-success, #34c38f);
+        color: rgb(255 255 255);
+    }
+}
+
+
+/* Active selection (replaces Bootstrap .btn.active rule) */
+
+
+.rcpo-active {
+    background-color: var(--color-primary);
+    color: rgb(255 255 255);
+
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+
+/* Link-style hover underline (replaces .link-option:hover) */
+
+
+.rcpo-link:hover {
+    text-decoration: underline;
+}
+
+
+/* File uploader trigger inside the option row (replaces
+   'line-align-center text-primary chat-uploader' containerClasses).
+   Applied on a <div> inside a child component, hence . */
+
+
+.rcpo-uploader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-primary);
+    font-size: 18px;
+}
+
+
+.rcpo-uploader-glyph {
+    position: relative;
+    top: 3px;
+}
\ No newline at end of file
diff --git a/src/lib/styles/pages/_conversation.scss b/src/lib/styles/pages/_conversation.scss
new file mode 100644
index 00000000..3ee9200d
--- /dev/null
+++ b/src/lib/styles/pages/_conversation.scss
@@ -0,0 +1,408 @@
+/*
+ * Conversation page styles — consolidated from scoped <style> blocks
+ * in the src/routes/page/conversation folder. Each section is annotated
+ * with the source file path so the original component context is
+ * preserved.
+ *
+ * The Select-component overrides are identical across .conv-filter and
+ * .conv-state-search, so the rules are written once with a comma-
+ * separated selector list and then nested.
+ */
+
+
+/* ========================================================================
+ * src/routes/page/conversation/+page.svelte
+ * ======================================================================== */
+
+/* Conversation table cell styling. Applied globally so it covers the
+   headers here as well as the body rows. Preserves the original column
+   ellipsis behaviour. */
+.conv-table {
+    th,
+    td {
+        border-bottom: 1px solid rgb(243 244 246);
+        padding: 0.75rem 1rem;
+        vertical-align: middle;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    thead th {
+        text-align: left;
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-muted);
+        border-bottom-width: 2px;
+        border-bottom-color: rgb(229 231 235);
+    }
+
+    th.list-title,
+    td.list-title {
+        max-width: 240px;
+    }
+
+    tbody tr:last-child > td {
+        border-bottom: 0;
+    }
+
+    .dark & {
+        th,
+        td {
+            border-bottom-color: rgb(55 65 81);
+        }
+    }
+}
+
+/* Hide the "State Search" label on narrow viewports — matches the
+   original behaviour from _state.scss for the state-search-btn group. */
+@media (max-width: 800px) {
+    .search-btn-text {
+        display: none;
+    }
+}
+
+
+/* ========================================================================
+ * Shared filter / state-search overrides
+ *
+ * Scoped overrides for the Select component, RemoteSearchInput and the
+ * native form inputs so they share the Tailwind-aligned look of the
+ * page chrome. The rules rely on the `.conv-filter` and
+ * `.conv-state-search` wrappers so they don't leak into other pages
+ * still on Bootstrap.
+ * ======================================================================== */
+.conv-filter,
+.conv-state-search {
+    .multiselect-container {
+        .display-container {
+            input[type='text'] {
+                height: 2.5rem;
+                border-radius: 0.375rem;
+                border: 1px solid rgb(229 231 235);
+                background-color: rgb(255 255 255);
+                padding-left: 0.75rem;
+                padding-right: 2rem;
+                font-size: 0.875rem;
+                color: rgb(31 41 55);
+                transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+                &:focus {
+                    border-color: var(--color-primary);
+                    outline: 0;
+                    box-shadow: 0 0 0 1px var(--color-primary);
+                }
+            }
+
+            /* When a prefixIcon snippet is rendered on the Select, the
+               component sets `.has-prefix` on the display container and
+               shifts the input padding to reserve room for the icon —
+               these page-level overrides must honour that, otherwise the
+               placeholder collides with the icon. */
+            &.has-prefix input[type='text'] {
+                padding-left: 2.25rem;
+            }
+        }
+
+        .display-suffix {
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.125rem;
+            color: rgb(156 163 175);
+            line-height: 1;
+        }
+
+        .option-list {
+            margin-top: 0.25rem;
+            border: 1px solid rgb(229 231 235);
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+        }
+
+        .option-item {
+            &:hover {
+                background-color: rgb(243 244 246);
+            }
+
+            .select-name {
+                font-size: 0.875rem;
+            }
+        }
+    }
+
+    /* Plain inputs (tag input + state-search value input) */
+    input.form-control {
+        height: 2.5rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        font-size: 0.875rem;
+        color: rgb(31 41 55);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+        &:focus {
+            border-color: var(--color-primary);
+            outline: 0;
+            box-shadow: 0 0 0 1px var(--color-primary);
+        }
+    }
+}
+
+
+/* ========================================================================
+ * .conv-filter — TimeRangePicker trigger button (button.form-control,
+ * no .display-container wrapper).
+ * ======================================================================== */
+.conv-filter {
+    .multiselect-container > button.form-control {
+        height: 2.5rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        padding: 0 2rem 0 0.75rem;
+        font-size: 0.875rem;
+        color: rgb(31 41 55);
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+        &:hover {
+            border-color: rgb(209 213 219);
+        }
+
+        &:focus {
+            border-color: var(--color-primary);
+            outline: 0;
+            box-shadow: 0 0 0 1px var(--color-primary);
+        }
+
+        > i.bx-chevron-down {
+            position: absolute;
+            right: 0.625rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.125rem;
+            color: rgb(156 163 175);
+            line-height: 1;
+        }
+    }
+}
+
+
+/* ========================================================================
+ * .conv-state-search — state-search items, "Add +" link button and the
+ * RemoteSearchInput autocomplete dropdown.
+ * ======================================================================== */
+.conv-state-search {
+    .state-search-container {
+        gap: 0.5rem;
+    }
+
+    .state-search-item {
+        align-items: center;
+        gap: 0.5rem;
+
+        .bxs-no-entry {
+            font-size: 1.125rem;
+            cursor: pointer;
+            transition: transform 0.15s ease;
+
+            &:hover { transform: scale(1.15); }
+            &.hide { visibility: hidden; }
+        }
+    }
+
+    .btn-link {
+        color: var(--color-primary);
+        font-weight: 500;
+        font-size: 0.8125rem;
+        text-decoration: none;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: rgb(255 255 255);
+        }
+    }
+
+    .scrollable-dropdown {
+        .dropdown-menu {
+            margin-top: 0.25rem;
+            border: 1px solid rgb(229 231 235);
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+            padding: 0.25rem;
+            max-height: 240px;
+            overflow-y: auto;
+        }
+
+        .dropdown-item {
+            border-radius: 0.25rem;
+            padding: 0.375rem 0.625rem;
+            font-size: 0.8125rem;
+            color: rgb(31 41 55);
+
+            &:hover,
+            &.active {
+                background-color: rgb(243 244 246);
+                color: var(--color-primary);
+            }
+        }
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+ * ========================================================================
+ * Replaces the legacy `.text-collapse` rule from
+ * src/lib/scss/custom/pages/_conversation.scss. The dialog text is
+ * collapsed to the first 5 lines by default; clicking the More button
+ * removes this class so the content can flow to its natural height.
+ *
+ * Two clamping mechanisms are layered here for reliability:
+ * 1. `-webkit-line-clamp: 5` with `display: -webkit-box` gives the
+ *    nicer "line truncation with ellipsis" effect on simple text.
+ * 2. `max-height: 10lh` is the hard fallback. The inner `<Markdown>`
+ *    wraps its rendered HTML in a `.markdown-container` with
+ *    `overflow-x: auto`, which establishes its own block formatting
+ *    context — that BFC defeats line-clamp on the parent because text
+ *    flow is sealed inside the child. The max-height cap clips
+ *    reliably regardless of inner BFCs and is what actually keeps long
+ *    code blocks / tables collapsed.
+ */
+.text-collapse {
+    overflow: hidden;
+    max-height: 10lh;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+    line-clamp: 5;
+}
+
+
+/* ========================================================================
+ * src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+ * ======================================================================== */
+
+/* Vertical line behind the timeline dots */
+.dialog-timeline::before {
+    content: '';
+    position: absolute;
+    left: -1.5rem;
+    top: 0.5rem;
+    bottom: 0.5rem;
+    width: 2px;
+    background-color: rgb(229 231 235);
+
+    .dark & {
+        background-color: rgb(55 65 81);
+    }
+}
+
+/* ---------- Notification modal form ----------
+   Themed textarea + character counter that match the DialogModal's
+   primary-accented panel. Replaces Bootstrap `form-control`,
+   `chat-input`, `text-secondary`, `text-end`, and the legacy global
+   `.text-count` rule with scoped styles owned by this component. */
+.notif-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.notif-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-muted);
+    margin: 0;
+}
+
+.notif-textarea {
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: rgb(17 24 39);
+    resize: vertical;
+    min-height: 7.5rem;
+    max-height: 16rem;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition:
+        border-color 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+
+    &:hover:not(:focus) {
+        border-color: rgb(209 213 219);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+
+        &:focus {
+            background-color: rgb(31 41 55);
+        }
+    }
+}
+
+/* Character counter — sits below the textarea, right-aligned, with
+   a subtle counter icon. Switches to warning tint when the user is
+   past 80% of the limit. */
+.notif-counter {
+    align-self: flex-end;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-muted);
+    transition: color 0.15s ease;
+
+    i {
+        font-size: 0.875rem;
+        line-height: 1;
+    }
+
+    &-warning {
+        color: var(--color-warning);
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/page/conversation/[conversationId]/conv-states.svelte
+ * ======================================================================== */
+.conv-states-tree ul {
+    font-size: 0.8125rem;
+}
diff --git a/src/lib/styles/pages/_instruction.scss b/src/lib/styles/pages/_instruction.scss
new file mode 100644
index 00000000..a1ef40f3
--- /dev/null
+++ b/src/lib/styles/pages/_instruction.scss
@@ -0,0 +1,346 @@
+/*
+ * Instruction page styles — consolidated from scoped <style> blocks
+ * in the src/routes/page/instruction folder.
+ *
+ * The Select-component overrides are identical across .instruct-filter,
+ * .instruct-state-search and .instruct-config-card, so the rules are
+ * written once with a comma-separated selector list and then nested.
+ */
+
+
+/* ========================================================================
+ * src/routes/page/instruction/log/+page.svelte
+ * ======================================================================== */
+
+/* Instruction-log table cell styling. Applied globally so it covers the
+   headers here as well as the rows rendered by LogItem.svelte. Preserves
+   the per-column ellipsis behaviour originally defined in the legacy
+   _instruction.scss. */
+.instruct-table {
+    th,
+    td {
+        border-bottom: 1px solid rgb(243 244 246);
+        padding: 0.75rem 1rem;
+        vertical-align: middle;
+    }
+
+    thead th {
+        text-align: left;
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-muted);
+        border-bottom-width: 2px;
+        border-bottom-color: rgb(229 231 235);
+        white-space: nowrap;
+    }
+
+    tbody tr:last-child > td {
+        border-bottom: 0;
+    }
+
+    /* Column-level ellipsis for log columns (preserved from _instruction.scss) */
+    th.instruction-log-col,
+    td.instruction-log-col {
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .dark & {
+        th,
+        td {
+            border-bottom-color: rgb(55 65 81);
+        }
+    }
+}
+
+/* Hide the "State Search" label on narrow viewports */
+@media (max-width: 800px) {
+    .search-btn-text {
+        display: none;
+    }
+}
+
+
+/* ========================================================================
+ * Shared Select-component overrides — applied via the .instruct-filter,
+ * .instruct-state-search and .instruct-config-card wrappers used by the
+ * log filter row, state-search input and configuration-card tabs.
+ * ======================================================================== */
+.instruct-filter,
+.instruct-state-search,
+.instruct-config-card {
+    .multiselect-container {
+        .display-container {
+            input[type='text'] {
+                height: 2.5rem;
+                border-radius: 0.375rem;
+                border: 1px solid rgb(229 231 235);
+                background-color: rgb(255 255 255);
+                padding-left: 0.75rem;
+                padding-right: 2rem;
+                font-size: 0.875rem;
+                color: rgb(31 41 55);
+                transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+                &:focus {
+                    border-color: var(--color-primary);
+                    outline: 0;
+                    box-shadow: 0 0 0 1px var(--color-primary);
+                }
+            }
+
+            /* Honour the Select component's `.has-prefix` padding shift when
+               a prefixIcon snippet is rendered, otherwise the icon overlaps
+               the placeholder. */
+            &.has-prefix input[type='text'] {
+                padding-left: 2.25rem;
+            }
+        }
+
+        .display-suffix {
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.125rem;
+            color: rgb(156 163 175);
+            line-height: 1;
+        }
+
+        .option-list {
+            margin-top: 0.25rem;
+            border: 1px solid rgb(229 231 235);
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+        }
+
+        .option-item {
+            &:hover {
+                background-color: rgb(243 244 246);
+            }
+
+            .select-name {
+                font-size: 0.875rem;
+            }
+        }
+    }
+}
+
+
+/* ========================================================================
+ * .instruct-filter — TimeRangePicker trigger button used in the log
+ * filter row (only this wrapper renders a `> button.form-control`).
+ * ======================================================================== */
+.instruct-filter {
+    .multiselect-container > button.form-control {
+        height: 2.5rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        padding: 0 2rem 0 0.75rem;
+        font-size: 0.875rem;
+        color: rgb(31 41 55);
+        text-align: left;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+        &:hover {
+            border-color: rgb(209 213 219);
+        }
+
+        &:focus {
+            border-color: var(--color-primary);
+            outline: 0;
+            box-shadow: 0 0 0 1px var(--color-primary);
+        }
+
+        > i.bx-chevron-down {
+            position: absolute;
+            right: 0.625rem;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 1.125rem;
+            color: rgb(156 163 175);
+            line-height: 1;
+        }
+    }
+}
+
+
+/* ========================================================================
+ * .instruct-state-search — RemoteSearchInput + native input + dropdown.
+ * ======================================================================== */
+.instruct-state-search {
+    input.form-control {
+        height: 2.5rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        font-size: 0.875rem;
+        color: rgb(31 41 55);
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+        &:focus {
+            border-color: var(--color-primary);
+            outline: 0;
+            box-shadow: 0 0 0 1px var(--color-primary);
+        }
+    }
+
+    .state-search-container {
+        gap: 0.5rem;
+    }
+
+    .state-search-item {
+        align-items: center;
+        gap: 0.5rem;
+
+        .bxs-no-entry {
+            font-size: 1.125rem;
+            cursor: pointer;
+            transition: transform 0.15s ease;
+
+            &:hover { transform: scale(1.15); }
+            &.hide { visibility: hidden; }
+        }
+    }
+
+    .btn-link {
+        color: var(--color-primary);
+        font-weight: 500;
+        font-size: 0.8125rem;
+        text-decoration: none;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.375rem;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: rgb(255 255 255);
+        }
+    }
+
+    .scrollable-dropdown {
+        .dropdown-menu {
+            margin-top: 0.25rem;
+            border: 1px solid rgb(229 231 235);
+            border-radius: 0.5rem;
+            box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+            padding: 0.25rem;
+            max-height: 240px;
+            overflow-y: auto;
+        }
+
+        .dropdown-item {
+            border-radius: 0.25rem;
+            padding: 0.375rem 0.625rem;
+            font-size: 0.8125rem;
+            color: rgb(31 41 55);
+
+            &:hover,
+            &.active {
+                background-color: rgb(243 244 246);
+                color: var(--color-primary);
+            }
+        }
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/page/instruction/log/log-item.svelte
+ * ======================================================================== */
+.instruction-log-state ul {
+    font-size: 0.8125rem;
+}
+
+
+/* ========================================================================
+ * src/routes/page/instruction/testing/+page.svelte
+ *
+ * .instruct-config-card scopes the NavBar refresh, the native form
+ * inputs and the Add-link button used inside the configuration card.
+ * The Select-component overrides are handled by the shared block
+ * above (.instruct-filter, .instruct-state-search, .instruct-config-card).
+ * ======================================================================== */
+.instruct-config-card {
+    /* Hide inactive tab panels (legacy class kept for compatibility) */
+    .hide {
+        display: none !important;
+    }
+
+    .nav-tabs-secondary {
+        border-bottom: 1px solid rgb(229 231 235);
+        margin-bottom: 1rem;
+
+        .tab-btn {
+            font-size: 0.8125rem;
+            border-radius: 0.375rem 0.375rem 0 0;
+            margin-bottom: -1px;
+
+            &:hover:not(:disabled):not(.active) {
+                color: var(--color-primary);
+                background-color: rgb(243 244 246);
+            }
+        }
+    }
+
+    /* Native form-control inputs (state / coding KV rows) */
+    input.form-control {
+        height: 2.25rem;
+        border-radius: 0.375rem;
+        border: 1px solid rgb(229 231 235);
+        background-color: rgb(255 255 255);
+        font-size: 0.8125rem;
+        color: rgb(31 41 55);
+        padding: 0 0.625rem;
+        transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+        &:focus {
+            border-color: var(--color-primary);
+            outline: 0;
+            box-shadow: 0 0 0 1px var(--color-primary);
+        }
+
+        &:disabled {
+            background-color: rgb(249 250 251);
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+    }
+
+    /* Add-link button (used in states / coding subcomponents) */
+    .btn-link {
+        color: var(--color-primary);
+        font-weight: 500;
+        font-size: 0.8125rem;
+        text-decoration: none;
+        padding: 0.375rem 0.625rem;
+        border-radius: 0.375rem;
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: var(--color-primary);
+            color: rgb(255 255 255);
+        }
+
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+    }
+
+    .dark & .nav-tabs-secondary {
+        border-bottom-color: rgb(55 65 81);
+
+        .tab-btn:hover:not(:disabled):not(.active) {
+            background-color: rgb(55 65 81);
+        }
+    }
+}
diff --git a/src/lib/styles/pages/_knowledge-base.scss b/src/lib/styles/pages/_knowledge-base.scss
new file mode 100644
index 00000000..667f90f4
--- /dev/null
+++ b/src/lib/styles/pages/_knowledge-base.scss
@@ -0,0 +1,4474 @@
+/*
+ * Knowledge Base page styles — consolidated from scoped <style> blocks
+ * in the src/routes/page/knowledge-base folder.
+ */
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/collection/collection-create-modal.svelte
+ * ======================================================================== */
+
+/* ===== Modal overlay & dialog ===== */
+
+.cm-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1055;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.75rem 0.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+}
+
+.cm-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    background-color: rgb(0 0 0);
+    opacity: 0.5;
+}
+
+.cm-dialog {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 500px;
+    pointer-events: none;
+}
+
+.cm-dialog-sm { max-width: 300px; }
+
+.cm-dialog-md { max-width: 500px; }
+
+.cm-dialog-lg { max-width: 800px; }
+
+.cm-dialog-xl { max-width: 1140px; }
+
+.cm-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 3px rgb(15 23 42 / 0.1),
+        0 20px 25px -5px rgb(15 23 42 / 0.15);
+    pointer-events: auto;
+}
+
+/* ===== Header ===== */
+
+.cm-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgb(243 244 246);
+}
+
+.cm-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.cm-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0.375rem;
+    color: var(--color-muted);
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 1.25rem;
+        line-height: 1;
+    }
+
+    &:hover {
+        background-color: rgb(243 244 246);
+        color: rgb(17 24 39);
+    }
+}
+
+/* ===== Body / Footer ===== */
+
+.cm-body {
+    padding: 1rem 1.25rem;
+}
+
+.cm-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-top: 1px solid rgb(243 244 246);
+}
+
+/* ===== Form ===== */
+
+.cm-row {
+    margin-bottom: 1rem;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.cm-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.cm-label {
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+    margin: 0;
+}
+
+.cm-input {
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 0.625rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    color: rgb(17 24 39);
+    text-align: center;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+.cm-input-invalid {
+    border-color: var(--color-danger);
+}
+
+.cm-note {
+    margin-top: 0.125rem;
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.625rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+.cm-note-valid {
+    justify-content: flex-end;
+}
+
+.cm-note-invalid {
+    justify-content: space-between;
+}
+
+.cm-note-right {
+    justify-content: flex-end;
+}
+
+.cm-error {
+    color: var(--color-danger);
+}
+
+/* ===== Buttons ===== */
+
+.cm-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.cm-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+.cm-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .cm-content {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .cm-header,
+.dark .cm-footer {
+    border-color: rgb(55 65 81);
+}
+
+.dark .cm-title,
+.dark .cm-label {
+    color: rgb(243 244 246);
+}
+
+.cm-input {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+    }
+
+    .dark &:focus {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.cm-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+    }
+}
+
+.dark .cm-close:hover {
+    background-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/indexes/vector-index-modal.svelte
+ * ======================================================================== */
+
+/* ===== Modal overlay & dialog ===== */
+
+.vim-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1055;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.75rem 0.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.vim-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    background-color: rgb(0 0 0);
+    opacity: 0.5;
+}
+
+.vim-dialog {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 500px;
+    pointer-events: none;
+}
+
+.vim-dialog-sm { max-width: 300px; }
+
+.vim-dialog-md { max-width: 500px; }
+
+.vim-dialog-lg { max-width: 800px; }
+
+.vim-dialog-xl { max-width: 1140px; }
+
+.vim-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 3px rgb(15 23 42 / 0.1),
+        0 20px 25px -5px rgb(15 23 42 / 0.15);
+    pointer-events: auto;
+}
+
+/* ===== Header ===== */
+
+.vim-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgb(243 244 246);
+}
+
+.vim-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1 1 auto;
+}
+
+.vim-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.vim-collection {
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+}
+
+.vim-collection-label {
+    font-weight: 700;
+}
+
+.vim-collection-value {
+    font-size: 0.9375rem;
+    color: var(--color-primary);
+}
+
+.vim-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0.375rem;
+    color: var(--color-muted);
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 1.25rem;
+        line-height: 1;
+    }
+
+    &:hover {
+        background-color: rgb(243 244 246);
+        color: rgb(17 24 39);
+    }
+}
+
+/* ===== Body / Footer ===== */
+
+.vim-body {
+    position: relative;
+    padding: 1rem 1.25rem;
+    max-height: 70vh;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+.vim-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-top: 1px solid rgb(243 244 246);
+}
+
+/* ===== Layout (3-column grid) ===== */
+
+.vim-layout {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-areas: "existing arrows delete";
+    align-items: start;
+    margin-top: 0.5rem;
+}
+
+.vim-block-add { grid-area: existing; }
+
+.vim-block-delete { grid-area: delete; }
+
+.vim-arrow-container {
+    grid-area: arrows;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 500px;
+}
+
+.vim-arrow-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.vim-arrow-h { display: inline; }
+
+.vim-arrow-v { display: none; }
+
+/* ===== Card ===== */
+
+.vim-card {
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+}
+
+.vim-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid rgb(229 231 235);
+}
+
+.vim-card-title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.vim-card-body {
+    flex: 1;
+    padding: 0.3125rem;
+    overflow: hidden;
+}
+
+.vim-scroll-area {
+    height: 100%;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    padding-right: 0.25rem;
+}
+
+/* ===== Buttons ===== */
+
+.vim-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.vim-btn-sm {
+    height: 1.875rem;
+    padding: 0 0.625rem;
+    font-size: 0.75rem;
+    border-radius: 0.375rem;
+}
+
+.vim-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+.vim-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+.vim-btn-info {
+    background-color: var(--color-info);
+    border-color: var(--color-info);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.92);
+    }
+}
+
+.vim-btn-warning {
+    background-color: var(--color-warning);
+    border-color: var(--color-warning);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.92);
+    }
+}
+
+.vim-btn-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.92);
+    }
+}
+
+/* ===== Index item card ===== */
+
+.vim-index-item {
+    margin-bottom: 0.75rem;
+    padding: 0.75rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+}
+
+.vim-index-item-warning {
+    border-color: var(--color-warning);
+}
+
+.vim-index-item-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.vim-index-item-label {
+    font-size: 0.75rem;
+    color: var(--color-muted);
+}
+
+.vim-index-item-actions {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.vim-text-warning {
+    color: var(--color-warning);
+}
+
+.vim-empty {
+    text-align: center;
+    padding: 0.75rem;
+    color: var(--color-muted);
+    font-size: 0.875rem;
+}
+
+/* ===== Field row ===== */
+
+.vim-field-row {
+    display: flex;
+    gap: 1rem;
+}
+
+.vim-field-item {
+    flex: 1;
+}
+
+.vim-field {
+    margin-bottom: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.vim-label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: rgb(55 65 81);
+    margin: 0;
+}
+
+.vim-input {
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 0.625rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+/* ===== Responsive ===== */
+
+@media (max-width: 991.98px) {
+    .vim-layout {
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "existing"
+            "arrows"
+            "delete";
+    }
+    .vim-arrow-container {
+        height: auto;
+        min-height: 60px;
+        padding: 1rem 0;
+    }
+    .vim-arrow-buttons {
+        flex-direction: row;
+        justify-content: center;
+    }
+    .vim-arrow-h { display: none; }
+    .vim-arrow-v { display: inline; }
+    .vim-field-row {
+        flex-direction: column;
+        gap: 0;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .vim-content,
+.dark .vim-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .vim-header,
+.dark .vim-footer,
+.dark .vim-card-header {
+    border-color: rgb(55 65 81);
+}
+
+.dark .vim-title,
+.dark .vim-card-title,
+.dark .vim-label {
+    color: rgb(243 244 246);
+}
+
+.vim-input {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+    }
+
+    .dark &:focus {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .vim-index-item {
+    border-color: rgb(55 65 81);
+}
+
+.vim-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+    }
+}
+
+.dark .vim-close:hover {
+    background-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/search/advanced-search.svelte
+ * ======================================================================== */
+
+/* ===== Container ===== */
+
+.as-container {
+    margin-top: 2rem;
+}
+
+/* ===== Toggle row ===== */
+
+.as-toggle-row {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    flex-wrap: wrap;
+}
+
+.as-toggle-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.as-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-muted);
+    cursor: help;
+}
+
+/* ===== Switch ===== */
+
+.as-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+
+    & input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.as-switch-slider {
+    position: absolute;
+    inset: 0;
+    background-color: rgb(209 213 219);
+    border-radius: 999px;
+    transition: background-color 0.15s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 0.875rem;
+        width: 0.875rem;
+        left: 0.1875rem;
+        top: 0.1875rem;
+        background-color: rgb(255 255 255);
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
+    }
+}
+
+.as-switch {
+
+    & input:checked + .as-switch-slider {
+        background-color: var(--color-primary);
+    }
+
+    & input:checked + .as-switch-slider::before {
+        transform: translateX(1rem);
+    }
+
+    & input:disabled + .as-switch-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Items list ===== */
+
+.as-items {
+    margin-top: 0.9375rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    min-height: 200px;
+    max-height: 300px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+.as-item {
+    display: flex;
+    gap: 0.625rem;
+}
+
+.as-item-cb {
+    flex: 0 0 20px;
+    display: flex;
+    align-items: center;
+}
+
+.as-item-content {
+    flex: 0.3;
+    min-width: 150px;
+    max-width: 350px;
+    display: flex;
+    align-items: center;
+}
+
+.as-item-remove {
+    flex: 0 0 12px;
+    display: flex;
+    align-items: center;
+}
+
+.as-item-remove-spacer {
+    flex: 0 0 10px;
+}
+
+.as-bold {
+    font-weight: 700;
+    color: rgb(55 65 81);
+}
+
+.as-remove-icon {
+    color: var(--color-danger);
+    cursor: pointer;
+    font-size: 1.125rem;
+
+    &.hide {
+        visibility: hidden;
+    }
+}
+
+/* ===== Checkbox / Input ===== */
+
+.as-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 72%;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover:not(:disabled) {
+        border-color: var(--color-primary);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+        background-color: rgb(243 244 246);
+    }
+}
+
+.as-input {
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 0.625rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Add row ===== */
+
+.as-add-wrap {
+    justify-content: flex-end;
+}
+
+.as-link-btn {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    width: fit-content;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+/* ===== Operator/Sort sections ===== */
+
+.as-operator-container {
+    margin-top: 1.25rem;
+}
+
+.as-operator-item {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.as-operator-title {
+    width: 120px;
+    font-weight: 700;
+    color: rgb(55 65 81);
+}
+
+.as-radio-group {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.as-sort-radio-group {
+    margin-top: 0.3rem;
+}
+
+.as-radio-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.as-radio {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--color-primary);
+    cursor: pointer;
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}
+
+.as-radio-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin: 0;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: rgb(55 65 81);
+    cursor: pointer;
+}
+
+/* ===== Responsive ===== */
+
+@media (max-width: 768px) {
+    .as-item {
+        flex-direction: column;
+        gap: 0.5rem;
+        padding: 0.625rem;
+        border: 1px solid rgb(229 231 235);
+        border-radius: 0.375rem;
+        margin-bottom: 0.3rem;
+    }
+    .as-item-cb {
+        flex: none;
+        align-self: flex-start;
+    }
+    .as-item-content {
+        flex: none;
+        min-width: unset;
+        max-width: unset;
+        width: 100%;
+        position: relative;
+    }
+    .as-item-content[data-label]:before {
+        content: attr(data-label) ":";
+        display: block;
+        font-weight: 700;
+        font-size: 0.875rem;
+        margin-bottom: 0.25rem;
+        color: rgb(102 102 102);
+    }
+    .as-header-row {
+        display: none;
+    }
+    .as-add-row {
+        flex-direction: row;
+        justify-content: center;
+        border: none;
+    }
+    .as-add-row .as-item-cb,
+    .as-add-row .as-item-content:not(:last-child) {
+        display: none;
+    }
+    .as-add-row .as-item-content:last-child {
+        flex: none;
+        width: auto;
+        justify-content: center;
+    }
+    .as-operator-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.625rem;
+    }
+    .as-operator-title {
+        width: auto;
+        margin-bottom: 0.3rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .as-toggle-row {
+        font-size: 0.95rem;
+        gap: 0.5rem;
+    }
+    .as-item {
+        padding: 0.5rem;
+        gap: 0.375rem;
+    }
+}
+
+@media (max-width: 420px) {
+    .as-operator-item {
+        text-align: center;
+        align-items: center;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.as-input {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+    }
+
+    .dark &:focus {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .as-bold,
+.dark .as-operator-title,
+.dark .as-radio-label {
+    color: rgb(229 231 235);
+}
+
+.dark .as-item {
+    border-color: rgb(55 65 81);
+}
+
+.as-checkbox {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(75 85 99);
+    }
+
+    .dark &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .dark &:disabled {
+        background-color: rgb(31 41 55);
+    }
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/table/table-item.svelte
+ * ======================================================================== */
+
+/* Ellipsis cell content (preserves the old .ellipsis behavior). */
+
+.ti-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Action cell (was .knowledge-op + .knowledge-op-list). */
+
+.ti-op-cell {
+    width: 20%;
+}
+
+.ti-op-actions {
+    display: flex;
+    justify-content: center;
+    gap: 0.25rem;
+}
+
+/* Soft-primary icon button (was .btn-soft-primary). */
+
+.ti-op-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    border: 1px solid transparent;
+    border-radius: 0.4375rem;
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+    cursor: pointer;
+    transition: background-color 0.15s ease,
+        color 0.15s ease,
+        transform 0.2s ease;
+
+    & i {
+        font-size: 0.95rem;
+        line-height: 1;
+    }
+
+    &:hover {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+
+    &:active {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+}
+
+/* Detail row "panel" container (was .knowledge-detail). */
+
+.ti-detail-row td {
+    padding: 0.75rem 1rem !important;
+    background-color: rgb(249 250 251);
+}
+
+.ti-detail {
+    position: relative;
+    border-radius: 0.5rem;
+    padding: 0.875rem 1rem;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    max-height: 320px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+.ti-detail-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+}
+
+.ti-detail-row-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.ti-detail-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-primary);
+    word-break: break-word;
+}
+
+.ti-detail-value {
+    font-size: 0.875rem;
+    color: rgb(31 41 55);
+    word-break: break-word;
+    white-space: normal;
+}
+
+/* Inline "More / Less" toggle (was .toggle-btn / .btn-link). */
+
+.ti-more {
+    margin-top: 0.625rem;
+}
+
+.ti-more-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    border: 0;
+    border-radius: 0.375rem;
+    background: transparent;
+    color: var(--color-primary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 0.95rem;
+        line-height: 1;
+    }
+
+    &:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+}
+
+/* More-detail list (was .more-detail-list + .more-detail-item). */
+
+.ti-more-list {
+    list-style: none;
+    margin: 0.25rem 0 0;
+    padding: 0.625rem 0.875rem;
+    font-size: 0.75rem;
+    color: var(--color-muted);
+    background-color: rgb(249 250 251);
+    border: 1px dashed rgb(229 231 235);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ti-more-item {
+    word-break: break-word;
+    white-space: normal;
+    display: flex;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+}
+
+.ti-more-key {
+    font-weight: 600;
+    color: rgb(55 65 81);
+}
+
+.ti-more-val {
+    color: var(--color-muted);
+}
+
+/* Dark mode. */
+
+.dark .ti-detail-row td {
+    background-color: rgb(17 24 39);
+}
+
+.dark .ti-detail {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .ti-detail-value {
+    color: rgb(229 231 235);
+}
+
+.dark .ti-more-list {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+}
+
+.dark .ti-more-key {
+    color: rgb(229 231 235);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
+ * ======================================================================== */
+
+/* ===== Modal overlay & dialog ===== */
+
+.vie-modal {
+    position: fixed;
+    inset: 0;
+    z-index: 1055;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: 1.75rem 0.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    outline: 0;
+}
+
+.vie-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1050;
+    background-color: rgb(0 0 0);
+    opacity: 0.5;
+}
+
+.vie-dialog {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    max-width: 500px;
+    pointer-events: none;
+}
+
+.vie-dialog-sm { max-width: 300px; }
+
+.vie-dialog-md { max-width: 500px; }
+
+.vie-dialog-lg { max-width: 800px; }
+
+.vie-dialog-xl { max-width: 1140px; }
+
+.vie-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: rgb(255 255 255);
+    background-clip: padding-box;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.625rem;
+    box-shadow:
+        0 1px 3px rgb(15 23 42 / 0.1),
+        0 20px 25px -5px rgb(15 23 42 / 0.15);
+    pointer-events: auto;
+    outline: 0;
+}
+
+/* ===== Header ===== */
+
+.vie-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgb(243 244 246);
+}
+
+.vie-header-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex: 1 1 auto;
+}
+
+.vie-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.vie-collection {
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+}
+
+.vie-collection-label {
+    font-weight: 700;
+}
+
+.vie-collection-value {
+    font-size: 0.9375rem;
+    color: var(--color-primary);
+}
+
+.vie-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0.375rem;
+    color: var(--color-muted);
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 1.25rem;
+        line-height: 1;
+    }
+
+    &:hover {
+        background-color: rgb(243 244 246);
+        color: rgb(17 24 39);
+    }
+}
+
+/* ===== Body / Footer ===== */
+
+.vie-body {
+    position: relative;
+    padding: 1rem 1.25rem;
+    flex: 1 1 auto;
+}
+
+.vie-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-top: 1px solid rgb(243 244 246);
+}
+
+/* ===== Buttons ===== */
+
+.vie-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.vie-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+.vie-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+/* ===== Form layout ===== */
+
+.vie-row {
+    display: block;
+    margin-bottom: 1rem;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.vie-payload-row {
+    margin-top: 0.5rem;
+}
+
+.vie-edit-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.vie-textarea-label {
+    font-weight: 700;
+    font-size: 0.9375rem;
+    margin-bottom: 0.375rem;
+    color: rgb(55 65 81);
+}
+
+.vie-textarea {
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: rgb(17 24 39);
+    resize: vertical;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+.vie-char-count {
+    margin-top: 0.125rem;
+    font-size: 0.625rem;
+    color: var(--color-muted);
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+/* ===== Payload table ===== */
+
+.vie-payload-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    min-height: 100px;
+    max-height: 300px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+.vie-payload-item {
+    display: flex;
+    gap: 0.625rem;
+    align-items: center;
+}
+
+.vie-payload-item-content {
+    display: flex;
+    align-items: center;
+}
+
+.vie-payload-header {
+    font-weight: 700;
+    font-size: 0.8125rem;
+    color: rgb(55 65 81);
+}
+
+.vie-payload-remove-spacer {
+    flex: 0 0 12px;
+}
+
+.vie-payload-remove {
+    flex: 0 0 12px;
+    display: flex;
+    align-items: center;
+}
+
+.vie-remove-btn {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--color-danger);
+    cursor: pointer;
+    line-height: 1;
+
+    & i {
+        font-size: 1.125rem;
+    }
+
+    &:hover {
+        filter: brightness(0.85);
+    }
+}
+
+.vie-input {
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 0.625rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+}
+
+.vie-payload-add-row {
+    justify-content: flex-end;
+}
+
+.vie-payload-add-wrap {
+    justify-content: flex-end;
+}
+
+.vie-link-btn {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--color-primary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    width: fit-content;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .vie-content {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .vie-header,
+.dark .vie-footer {
+    border-color: rgb(55 65 81);
+}
+
+.dark .vie-title,
+.dark .vie-textarea-label,
+.dark .vie-payload-header {
+    color: rgb(243 244 246);
+}
+
+.dark .vie-textarea,
+.dark .vie-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+.dark .vie-textarea:focus,
+.dark .vie-input:focus {
+    background-color: rgb(31 41 55);
+}
+
+.vie-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+}
+
+.dark .vie-close:hover {
+    background-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
+ * ======================================================================== */
+
+/* ===== Cell sizing ===== */
+
+.vti-text {
+    width: 70%;
+}
+
+.vti-text-qa {
+    width: 40%;
+    max-width: 50px;
+}
+
+.vti-op {
+    width: 20%;
+}
+
+.vti-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* ===== Action buttons list ===== */
+
+.vti-op-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.3rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.vti-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.875rem;
+    width: 1.875rem;
+    padding: 0;
+    font-size: 0.875rem;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    & i {
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+.vti-icon-btn-primary {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+.vti-icon-btn-warning {
+    background-color: color-mix(in srgb, var(--color-warning) 14%, transparent);
+    color: var(--color-warning);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-warning);
+        color: rgb(255 255 255);
+    }
+}
+
+.vti-icon-btn-danger {
+    background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-danger);
+        color: rgb(255 255 255);
+    }
+}
+
+/* ===== Detail panel ===== */
+
+.vti-detail {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    position: relative;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    max-height: 300px;
+
+    & ul {
+        margin: 0.75rem 0;
+        padding-left: 1.25rem;
+    }
+
+    & ul li {
+        margin: 0.3rem 0;
+    }
+}
+
+.vti-wrappable {
+    white-space: normal !important;
+    word-break: break-word;
+}
+
+.vti-detail-label {
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.vti-more-detail {
+    margin: 0.15rem 0;
+    padding-left: 2rem;
+}
+
+.vti-link-btn {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--color-primary);
+    font-size: 0.8125rem;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.vti-more-detail-list {
+    margin: 0.125rem 0 0.95rem 0;
+    font-size: 0.75rem;
+    padding-left: 4rem;
+    color: var(--color-muted);
+}
+
+.vti-more-detail-item {
+    list-style-type: square;
+}
+
+.vti-link {
+    padding: 0;
+    background: transparent;
+    border: 0;
+    color: var(--color-primary);
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .vti-detail {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(229 231 235);
+}
+
+.dark .vti-more-detail-list {
+    color: rgb(156 163 175);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/dictionary/+page.svelte
+ * ======================================================================== */
+
+/* ===== Action bar (Hide/Start Search + Reset) ===== */
+
+.dict-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+}
+
+/* ===== Buttons ===== */
+
+.dict-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+    & i {
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+.dict-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.12),
+        0 8px 20px -4px color-mix(in srgb, var(--color-primary) 55%, transparent);
+    }
+}
+
+.dict-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+.dict-btn-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-danger) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.95);
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.12),
+        0 8px 20px -4px color-mix(in srgb, var(--color-danger) 55%, transparent);
+    }
+}
+
+/* ===== Layout ===== */
+
+.dict-page {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.dict-page-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+/* ===== Search card ===== */
+
+.dict-search-card {
+    position: relative;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    padding: 1.25rem 1.25rem 1rem;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 3px;
+        background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+    }
+}
+
+.dict-search-head {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.dict-search-icon {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    & i {
+        font-size: 1.25rem;
+        line-height: 1;
+    }
+}
+
+.dict-search-title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.dict-search-sub {
+    margin: 0.125rem 0 0;
+    font-size: 0.75rem;
+    color: var(--color-muted);
+}
+
+.dict-textarea {
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: rgb(17 24 39);
+    resize: none;
+    min-height: 6.5rem;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+
+    &:hover:not(:focus):not(:disabled) {
+        border-color: rgb(209 213 219);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+}
+
+.dict-meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+}
+
+.dict-meta-time,
+.dict-meta-count {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.15s ease;
+}
+
+.dict-meta-row i {
+    font-size: 0.875rem;
+    line-height: 1;
+}
+
+.dict-meta-count-warning {
+    color: var(--color-warning);
+}
+
+.dict-search-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.25rem;
+}
+
+.dict-loader {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 1rem;
+}
+
+.dict-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 2.25rem 1rem 1rem;
+    color: var(--color-muted);
+
+    & i {
+        font-size: 2.25rem;
+        line-height: 1;
+        color: color-mix(in srgb, var(--color-primary) 60%, transparent);
+    }
+
+    & h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: rgb(55 65 81);
+    }
+
+    & p {
+        margin: 0;
+        font-size: 0.8125rem;
+    }
+}
+
+/* ===== Results card ===== */
+
+.dict-results-wrap {
+    width: 100%;
+}
+
+.dict-results-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+}
+
+.dict-results-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid rgb(243 244 246);
+}
+
+.dict-results-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.dict-results-icon {
+    flex-shrink: 0;
+    width: 2.25rem;
+    height: 2.25rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    & i {
+        font-size: 1.125rem;
+        line-height: 1;
+    }
+}
+
+.dict-results-title-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.dict-results-title {
+    margin: 0;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.dict-results-count {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+
+    & i {
+        font-size: 0.875rem;
+        line-height: 1;
+    }
+}
+
+/* ===== Controls (Analyzer / Data Providers) ===== */
+
+.dict-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.625rem;
+    justify-content: flex-end;
+}
+
+.dict-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 12rem;
+}
+
+.dict-control-label {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-muted);
+}
+
+@media (max-width: 600px) {
+    .dict-results-head {
+        justify-content: center;
+    }
+    .dict-controls {
+        justify-content: center;
+        width: 100%;
+    }
+    .dict-control {
+        flex: 1 1 100%;
+        min-width: 100%;
+    }
+}
+
+/* ===== Table ===== */
+
+.dict-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.dict-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+    color: rgb(31 41 55);
+
+    & thead th {
+        background-color: rgb(249 250 251);
+        font-weight: 600;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--color-muted);
+        text-align: left;
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(229 231 235);
+        white-space: nowrap;
+    }/* Hand off styling of <tr>/<td> in TableItem rows via global selectors. */
+
+    & tbody tr {
+        transition: background-color 0.15s ease;
+    }
+
+    & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    }
+
+    & tbody td {
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(243 244 246);
+        vertical-align: middle;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .dict-search-card,
+.dark .dict-results-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .dict-results-head {
+    border-bottom-color: rgb(55 65 81);
+}
+
+.dict-textarea {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+    }
+
+    .dark &:focus {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .dict-search-title,
+.dark .dict-results-title,
+.dark .dict-empty h4 {
+    color: rgb(243 244 246);
+}
+
+.dict-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+}
+
+.dict-table {
+
+    .dark & thead th {
+        background-color: rgb(17 24 39);
+        border-bottom-color: rgb(55 65 81);
+    }
+
+    .dark & tbody td {
+        border-bottom-color: rgb(55 65 81);
+        color: rgb(229 231 235);
+    }
+
+    .dark & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/documents/+page.svelte
+ * ======================================================================== */
+
+/* ===== Action bar ===== */
+
+.doc-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+}
+
+.doc-demo-btn-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.doc-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: var(--color-muted);
+    cursor: help;
+}
+
+/* ===== Buttons ===== */
+
+.doc-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.doc-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+.doc-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+.doc-btn-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-danger) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.95);
+    }
+}
+
+/* ===== Soft icon buttons ===== */
+
+.doc-btn-soft {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.3rem;
+    height: 1.875rem;
+    min-width: 1.875rem;
+    padding: 0 0.55rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    & i {
+        font-weight: 700;
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+.doc-btn-soft-primary {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+.doc-btn-soft-danger {
+    background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-danger);
+        color: rgb(255 255 255);
+    }
+}
+
+.doc-btn-soft-info {
+    background-color: color-mix(in srgb, var(--color-info) 14%, transparent);
+    color: var(--color-info);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-info);
+        color: rgb(255 255 255);
+    }
+}
+
+/* ===== Layout ===== */
+
+.doc-page {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.doc-page-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+/* ===== Search card ===== */
+
+.doc-search-card {
+    position: relative;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    padding: 1.25rem 1.25rem 1rem;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 3px;
+        background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+    }
+}
+
+/* ===== Textarea ===== */
+
+.doc-textarea {
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: rgb(17 24 39);
+    resize: none;
+    min-height: 6.5rem;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+
+    &:hover:not(:focus):not(:disabled) {
+        border-color: rgb(209 213 219);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Meta row ===== */
+
+.doc-meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ===== Search footer ===== */
+
+.doc-search-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.doc-search-input {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.doc-search-label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    line-height: 1.4;
+}
+
+.doc-confidence-wrap {
+    display: flex;
+    gap: 0.3rem;
+    align-items: stretch;
+}
+
+.doc-confidence-box {
+    width: 4rem;
+}
+
+.doc-confidence-input {
+    width: 100%;
+    height: 2rem;
+    padding: 0 0.4rem;
+    text-align: center;
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+    background-color: rgb(249 250 251);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    font-variant-numeric: tabular-nums;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+
+.doc-step-btn-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+
+.doc-step-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 0.95rem;
+    width: 1.25rem;
+    padding: 0;
+    border: 1px solid rgb(229 231 235);
+    background-color: rgb(255 255 255);
+    color: var(--color-muted);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 0.875rem;
+        line-height: 1;
+        font-weight: 700;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+        color: var(--color-primary);
+    }
+}
+
+/* ===== Switch ===== */
+
+.doc-search-toggle {
+    display: inline-flex;
+    align-items: center;
+}
+
+.doc-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+
+    & input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.doc-switch-slider {
+    position: absolute;
+    inset: 0;
+    background-color: rgb(209 213 219);
+    border-radius: 999px;
+    transition: background-color 0.15s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 0.875rem;
+        width: 0.875rem;
+        left: 0.1875rem;
+        top: 0.1875rem;
+        background-color: rgb(255 255 255);
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
+    }
+}
+
+.doc-switch {
+
+    & input:checked + .doc-switch-slider {
+        background-color: var(--color-primary);
+    }
+
+    & input:checked + .doc-switch-slider::before {
+        transform: translateX(1rem);
+    }
+
+    & input:disabled + .doc-switch-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Exact search checkbox ===== */
+
+.doc-exact-search {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.doc-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 72%;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover:not(:disabled) {
+        border-color: var(--color-primary);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+        background-color: rgb(243 244 246);
+    }
+}
+
+/* ===== Loader / Empty ===== */
+
+.doc-loader {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 1rem;
+}
+
+.doc-loader-sm {
+    padding: 1rem 0;
+}
+
+.doc-empty {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 1rem 1rem;
+
+    & h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--color-muted);
+    }
+}
+
+/* ===== Table card ===== */
+
+.doc-table-section {
+    margin-top: 2rem;
+    width: 100%;
+}
+
+.doc-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+}
+
+.doc-card-body {
+    padding: 1.25rem;
+}
+
+.doc-table-header {
+    margin-top: 0.5rem;
+}
+
+.doc-table-count {
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+    font-size: 0.75rem;
+    color: var(--color-muted);
+    margin-bottom: 0.25rem;
+}
+
+.doc-table-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.doc-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.3rem 0;
+}
+
+.doc-table-title {
+    margin: 0;
+    padding: 0 0.75rem 0 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.doc-toolbar-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.4rem;
+    padding: 0.3rem 0;
+}
+
+.doc-icon-wrap {
+    display: inline-flex;
+    align-items: center;
+}
+
+.doc-collection-dropdown-wrap {
+    display: flex;
+    gap: 0.3rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.doc-collection-dropdown {
+    flex: 1 1 auto;
+    min-width: 150px;
+    display: flex;
+    align-items: center;
+}
+
+.doc-collection-actions {
+    display: flex;
+    gap: 0.3rem;
+    justify-content: flex-end;
+}
+
+.doc-divider {
+    margin: 0.5rem 0 0.75rem;
+    border: 0;
+    border-top: 1px solid rgb(229 231 235);
+}
+
+/* ===== Table ===== */
+
+.doc-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.doc-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+    color: rgb(31 41 55);
+    white-space: nowrap;
+
+    & thead th {
+        background-color: rgb(249 250 251);
+        font-weight: 600;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--color-muted);
+        text-align: left;
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(229 231 235);
+    }
+
+    & tbody tr {
+        transition: background-color 0.15s ease;
+    }
+
+    & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    }
+
+    & tbody td {
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(243 244 246);
+        vertical-align: middle;
+    }
+}
+
+.doc-load-more-wrap {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+/* ===== Responsive ===== */
+
+@media (max-width: 768px) {
+    .doc-search-footer {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+    .doc-search-input {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 600px) {
+    .doc-table-toolbar {
+        justify-content: center;
+    }
+    .doc-toolbar-right {
+        justify-content: center;
+        width: 100%;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .doc-search-card,
+.dark .doc-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .doc-textarea,
+.dark .doc-confidence-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+.dark .doc-textarea:focus,
+.dark .doc-confidence-input:focus {
+    background-color: rgb(31 41 55);
+}
+
+.dark .doc-table-title,
+.dark .doc-empty h4 {
+    color: rgb(243 244 246);
+}
+
+.doc-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+}
+
+.dark .doc-step-btn {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+    color: rgb(209 213 219);
+}
+
+.doc-checkbox {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(75 85 99);
+    }
+
+    .dark &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .dark &:disabled {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .doc-divider {
+    border-top-color: rgb(55 65 81);
+}
+
+.doc-table {
+
+    .dark & thead th {
+        background-color: rgb(17 24 39);
+        border-bottom-color: rgb(55 65 81);
+    }
+
+    .dark & tbody td {
+        border-bottom-color: rgb(55 65 81);
+        color: rgb(229 231 235);
+    }
+
+    .dark & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/documents/knowledge-file-upload.svelte
+ * ======================================================================== */
+
+/* ===== Container ===== */
+
+.doc-up-container {
+    margin-top: 1rem;
+}
+
+/* ===== Header (switch + label + tooltip icon) ===== */
+
+.doc-up-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.625rem;
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    flex-wrap: wrap;
+}
+
+.doc-up-header-label {
+    display: inline-flex;
+    align-items: center;
+}
+
+.doc-up-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-muted);
+    cursor: help;
+}
+
+/* ===== Switch ===== */
+
+.doc-up-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+    flex-shrink: 0;
+
+    & input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.doc-up-switch-slider {
+    position: absolute;
+    inset: 0;
+    background-color: rgb(209 213 219);
+    border-radius: 999px;
+    transition: background-color 0.15s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 0.875rem;
+        width: 0.875rem;
+        left: 0.1875rem;
+        top: 0.1875rem;
+        background-color: rgb(255 255 255);
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
+    }
+}
+
+.doc-up-switch {
+
+    & input:checked + .doc-up-switch-slider {
+        background-color: var(--color-primary);
+    }
+
+    & input:checked + .doc-up-switch-slider::before {
+        transform: translateX(1rem);
+    }
+
+    & input:disabled + .doc-up-switch-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Uploader area ===== */
+
+.doc-up-uploader {
+    border-radius: 0.625rem;
+    padding: 0.625rem;
+    background-color: var(--color-light);
+    margin-top: 0.75rem;/* Pass-through styling for FileGallery / FileDropZone container classes */
+
+    & .doc-up-gallery {
+        width: 100%;
+        height: 100%;
+    }
+
+    & .doc-up-gallery .doc-up-drop-zone {
+        width: 100%;
+        height: 100%;
+    }
+
+    & .doc-up-gallery .doc-up-drop-zone i {
+        font-size: 3.5em;
+    }
+}
+
+/* ===== Card-shaped action buttons (Submit / Load more) ===== */
+
+.doc-up-card-btn {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.625rem;
+    background-color: rgb(255 255 255);
+    font-size: 3.5em;
+
+    & i:hover {
+        color: var(--color-primary);
+    }
+}
+
+.doc-up-load-more {
+    font-size: 3em;
+}
+
+.doc-up-clickable {
+    cursor: pointer;
+}
+
+/* ===== Footer (View collection docs + reset) ===== */
+
+.doc-up-footer {
+    margin-top: 1.875rem;
+}
+
+.doc-up-footer-compact {
+    margin-top: 0;
+}
+
+.doc-up-load-doc-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.doc-up-reset-docs {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-danger);
+
+    & i {
+        font-size: 1.125rem;
+        border-radius: 0.1875rem;
+        padding: 2px;
+        transition: background-color 0.15s ease, color 0.15s ease;
+    }
+
+    & i.doc-up-clickable:hover {
+        background-color: var(--color-danger);
+        color: rgb(255 255 255);
+    }
+}
+
+/* ===== Inline buttons (View / Hide collection documents) ===== */
+
+.doc-up-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.5rem;
+    padding: 0 1rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.doc-up-btn-primary {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+.doc-up-btn-warning {
+    background-color: color-mix(in srgb, var(--color-warning) 14%, transparent);
+    color: var(--color-warning);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-warning);
+        color: rgb(255 255 255);
+    }
+}
+
+/* ===== Collection docs list area ===== */
+
+.doc-up-collection-docs {
+    margin-top: 0.625rem;
+    padding: 0.625rem;
+    border: 1px dashed var(--color-primary);
+    border-radius: 0.3125rem;
+    background-color: rgb(255 255 255);
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    width: 100%;
+    height: 200px;
+}
+
+.doc-up-empty {
+    margin-top: 0.75rem;
+    text-align: center;
+
+    & h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--color-muted);
+    }
+}
+
+.doc-up-loader {
+    display: flex;
+    justify-content: center;
+    margin: 0.75rem 0;
+}
+
+/* ===== Dark mode ===== */
+
+.dark .doc-up-uploader {
+    background-color: rgb(17 24 39);
+}
+
+.dark .doc-up-card-btn {
+    background-color: rgb(31 41 55);
+}
+
+.dark .doc-up-collection-docs {
+    background-color: rgb(17 24 39);
+}
+
+.dark .doc-up-empty h4 {
+    color: rgb(209 213 219);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
+ * ======================================================================== */
+
+/* ===== Collection label row ===== */
+
+.kum-collection-row {
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+}
+
+.kum-collection-label {
+    font-weight: 700;
+    color: rgb(55 65 81);
+}
+
+.kum-collection-value {
+    font-size: 0.9375rem;
+    color: var(--color-primary);
+}
+
+/* ===== Form fields ===== */
+
+.kum-field {
+    margin-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.kum-field-label-row {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.kum-field-label {
+    font-weight: 700;
+    font-size: 0.875rem;
+    color: rgb(55 65 81);
+}
+
+/* ===== Drop zone content (inside FileDropZone) ===== */
+
+.kum-gallery {
+    width: 100%;
+    min-height: 200px;
+
+    & .kum-drop-zone {
+        width: 100%;
+        min-height: 200px;
+    }
+}
+
+.kum-drop-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem;
+}
+
+.kum-drop-icon {
+    text-align: center;
+    font-size: 5em;
+    line-height: 1;
+    color: var(--color-primary);
+}
+
+.kum-drop-list {
+    margin: 0;
+    padding-left: 1.25rem;
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    list-style: disc;
+
+    & li {
+        margin: 0.25rem 0;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .kum-collection-label,
+.dark .kum-field-label {
+    color: rgb(229 231 235);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
+ * ======================================================================== */
+
+.dur-container {
+    margin-top: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.dur-item {
+    display: flex;
+    align-items: center;
+    gap: 0.3125rem;
+    font-size: 0.8125rem;
+
+    & i {
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+.dur-item-success {
+    color: var(--color-success);
+}
+
+.dur-item-danger {
+    color: var(--color-danger);
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/question-answer/+page.svelte
+ * ======================================================================== */
+
+/* ===== Action bar (Hide/Start Search + Reset) ===== */
+
+.qa-action-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: space-between;
+    margin-bottom: 1.25rem;
+}
+
+.qa-demo-btn-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.qa-tooltip-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    color: var(--color-muted);
+    cursor: help;
+}
+
+/* ===== Buttons ===== */
+
+.qa-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.qa-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+.qa-btn-secondary {
+    background-color: rgb(255 255 255);
+    border-color: rgb(229 231 235);
+    color: rgb(55 65 81);
+
+    &:hover:not(:disabled) {
+        background-color: rgb(249 250 251);
+        border-color: rgb(209 213 219);
+    }
+}
+
+.qa-btn-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-danger) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        filter: brightness(0.95);
+    }
+}
+
+/* ===== Soft icon buttons (toolbar) ===== */
+
+.qa-btn-soft {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.3rem;
+    height: 1.875rem;
+    min-width: 1.875rem;
+    padding: 0 0.55rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    & i {
+        font-weight: 700;
+        font-size: 1rem;
+        line-height: 1;
+    }
+}
+
+.qa-btn-soft-primary {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+    }
+}
+
+.qa-btn-soft-danger {
+    background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
+    color: var(--color-danger);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-danger);
+        color: rgb(255 255 255);
+    }
+}
+
+/* ===== Layout ===== */
+
+.qa-page {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.qa-page-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+/* ===== Search card ===== */
+
+.qa-search-card {
+    position: relative;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    padding: 1.25rem 1.25rem 1rem;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 3px;
+        background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+    }
+}
+
+/* ===== Textarea ===== */
+
+.qa-textarea {
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: rgb(17 24 39);
+    resize: none;
+    min-height: 6.5rem;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+
+    &:hover:not(:focus):not(:disabled) {
+        border-color: rgb(209 213 219);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Meta row ===== */
+
+.qa-meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+    font-variant-numeric: tabular-nums;
+}
+
+/* ===== Search footer (confidence, toggle, button) ===== */
+
+.qa-search-footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.qa-search-input {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.qa-search-label {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: rgb(55 65 81);
+    line-height: 1.4;
+}
+
+.qa-confidence-wrap {
+    display: flex;
+    gap: 0.3rem;
+    align-items: stretch;
+}
+
+.qa-confidence-box {
+    width: 4rem;
+}
+
+.qa-confidence-input {
+    width: 100%;
+    height: 2rem;
+    padding: 0 0.4rem;
+    text-align: center;
+    font-size: 0.8125rem;
+    color: rgb(17 24 39);
+    background-color: rgb(249 250 251);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.375rem;
+    font-variant-numeric: tabular-nums;
+    font-family: inherit;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+}
+
+.qa-step-btn-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+}
+
+.qa-step-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 0.95rem;
+    width: 1.25rem;
+    padding: 0;
+    border: 1px solid rgb(229 231 235);
+    background-color: rgb(255 255 255);
+    color: var(--color-muted);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    & i {
+        font-size: 0.875rem;
+        line-height: 1;
+        font-weight: 700;
+    }
+
+    &:hover:not(:disabled) {
+        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
+        color: var(--color-primary);
+    }
+}
+
+/* ===== Switch (similarity/keyword) ===== */
+
+.qa-search-toggle {
+    display: inline-flex;
+    align-items: center;
+}
+
+.qa-switch {
+    position: relative;
+    display: inline-block;
+    width: 2.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+
+    & input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+}
+
+.qa-switch-slider {
+    position: absolute;
+    inset: 0;
+    background-color: rgb(209 213 219);
+    border-radius: 999px;
+    transition: background-color 0.15s ease;
+
+    &::before {
+        content: '';
+        position: absolute;
+        height: 0.875rem;
+        width: 0.875rem;
+        left: 0.1875rem;
+        top: 0.1875rem;
+        background-color: rgb(255 255 255);
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
+    }
+}
+
+.qa-switch {
+
+    & input:checked + .qa-switch-slider {
+        background-color: var(--color-primary);
+    }
+
+    & input:checked + .qa-switch-slider::before {
+        transform: translateX(1rem);
+    }
+
+    & input:disabled + .qa-switch-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Exact search checkbox ===== */
+
+.qa-exact-search {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+
+.qa-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(209 213 219);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 72%;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover:not(:disabled) {
+        border-color: var(--color-primary);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+        background-color: rgb(243 244 246);
+    }
+}
+
+/* ===== Loader / Empty ===== */
+
+.qa-loader {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0 1rem;
+}
+
+.qa-loader-sm {
+    padding: 1rem 0;
+}
+
+.qa-empty {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 1rem 1rem;
+
+    & h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--color-muted);
+    }
+}
+
+/* ===== Table card ===== */
+
+.qa-table-section {
+    margin-top: 2rem;
+    width: 100%;
+}
+
+.qa-card {
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    box-shadow:
+        0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+}
+
+.qa-card-body {
+    padding: 1.25rem;
+}
+
+.qa-table-header {
+    margin-top: 0.5rem;
+}
+
+.qa-table-count {
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+    font-size: 0.75rem;
+    color: var(--color-muted);
+    margin-bottom: 0.25rem;
+}
+
+.qa-table-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.qa-toolbar-left {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.3rem 0;
+}
+
+.qa-table-title {
+    margin: 0;
+    padding: 0 0.75rem 0 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: rgb(17 24 39);
+}
+
+.qa-toolbar-right {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 0.4rem;
+    padding: 0.3rem 0;
+}
+
+.qa-icon-wrap {
+    display: inline-flex;
+    align-items: center;
+}
+
+.qa-collection-dropdown-wrap {
+    display: flex;
+    gap: 0.3rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+}
+
+.qa-collection-dropdown {
+    flex: 1 1 auto;
+    min-width: 150px;
+    display: flex;
+    align-items: center;
+}
+
+.qa-collection-actions {
+    display: flex;
+    gap: 0.3rem;
+    justify-content: flex-end;
+}
+
+.qa-divider {
+    margin: 0.5rem 0 0.75rem;
+    border: 0;
+    border-top: 1px solid rgb(229 231 235);
+}
+
+/* ===== Table ===== */
+
+.qa-table-wrap {
+    width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+}
+
+.qa-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+    color: rgb(31 41 55);
+    white-space: nowrap;
+
+    & thead th {
+        background-color: rgb(249 250 251);
+        font-weight: 600;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        color: var(--color-muted);
+        text-align: left;
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(229 231 235);
+    }
+
+    & tbody tr {
+        transition: background-color 0.15s ease;
+    }
+
+    & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
+    }
+
+    & tbody td {
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid rgb(243 244 246);
+        vertical-align: middle;
+    }
+}
+
+.qa-load-more-wrap {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+/* ===== Responsive ===== */
+
+@media (max-width: 768px) {
+    .qa-search-footer {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 1rem;
+    }
+    .qa-search-input {
+        justify-content: center;
+    }
+}
+
+@media (max-width: 600px) {
+    .qa-table-toolbar {
+        justify-content: center;
+    }
+    .qa-toolbar-right {
+        justify-content: center;
+        width: 100%;
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .qa-search-card,
+.dark .qa-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.dark .qa-textarea,
+.dark .qa-confidence-input {
+    background-color: rgb(17 24 39);
+    border-color: rgb(55 65 81);
+    color: rgb(243 244 246);
+}
+
+.dark .qa-textarea:focus,
+.dark .qa-confidence-input:focus {
+    background-color: rgb(31 41 55);
+}
+
+.dark .qa-table-title,
+.dark .qa-empty h4 {
+    color: rgb(243 244 246);
+}
+
+.qa-btn-secondary {
+
+    .dark & {
+        background-color: rgb(55 65 81);
+        border-color: rgb(75 85 99);
+        color: rgb(229 231 235);
+    }
+
+    .dark &:hover:not(:disabled) {
+        background-color: rgb(75 85 99);
+        border-color: rgb(107 114 128);
+    }
+}
+
+.dark .qa-step-btn {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+    color: rgb(209 213 219);
+}
+
+.qa-checkbox {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(75 85 99);
+    }
+
+    .dark &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    .dark &:disabled {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .qa-divider {
+    border-top-color: rgb(55 65 81);
+}
+
+.qa-table {
+
+    .dark & thead th {
+        background-color: rgb(17 24 39);
+        border-bottom-color: rgb(55 65 81);
+    }
+
+    .dark & tbody td {
+        border-bottom-color: rgb(55 65 81);
+        color: rgb(229 231 235);
+    }
+
+    .dark & tbody tr:hover {
+        background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    }
+}
+
+/* ========================================================================
+ * src/routes/page/knowledge-base/relationships/+page.svelte
+ * ======================================================================== */
+
+/* ===== Layout ===== */
+
+.rel-page {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.rel-page-col {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+/* ===== Search card ===== */
+
+.rel-search-card {
+    position: relative;
+    background-color: rgb(255 255 255);
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.875rem;
+    padding: 1.25rem 1.25rem 1rem;
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04),
+        0 10px 30px -12px rgb(15 23 42 / 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0 0 auto 0;
+        height: 3px;
+        background: linear-gradient(
+        90deg,
+        transparent 0%,
+        var(--color-primary) 30%,
+        var(--color-primary) 70%,
+        transparent 100%
+    );
+    }
+}
+
+/* ===== Textarea ===== */
+
+.rel-textarea {
+    width: 100%;
+    padding: 0.75rem 0.875rem;
+    border: 1px solid rgb(229 231 235);
+    border-radius: 0.5rem;
+    background-color: rgb(249 250 251);
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: rgb(17 24 39);
+    resize: none;
+    min-height: 6.5rem;
+    scrollbar-width: thin;
+    font-family: inherit;
+    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+
+    &::placeholder {
+        color: var(--color-muted);
+        opacity: 1;
+    }
+
+    &:hover:not(:focus):not(:disabled) {
+        border-color: rgb(209 213 219);
+    }
+
+    &:focus {
+        outline: 0;
+        border-color: var(--color-primary);
+        background-color: rgb(255 255 255);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
+    }
+
+    &:disabled {
+        opacity: 0.7;
+        cursor: not-allowed;
+    }
+}
+
+/* ===== Meta row (character count) ===== */
+
+.rel-meta-row {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.6875rem;
+    color: var(--color-muted);
+}
+
+.rel-meta-count {
+    font-variant-numeric: tabular-nums;
+}
+
+/* ===== Button ===== */
+
+.rel-search-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.25rem;
+}
+
+.rel-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    height: 2.25rem;
+    padding: 0 0.95rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1;
+    border: 1px solid transparent;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.2s ease;
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+}
+
+.rel-btn-primary {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: rgb(255 255 255);
+    box-shadow: 0 1px 2px rgb(15 23 42 / 0.08),
+        0 4px 12px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
+
+    &:hover:not(:disabled) {
+        background-color: var(--color-primary-hover);
+        border-color: var(--color-primary-hover);
+    }
+}
+
+/* ===== Loader ===== */
+
+.rel-loader {
+    display: flex;
+    justify-content: center;
+    padding: 1.5rem 0 0.5rem;
+}
+
+/* ===== Result ===== */
+
+.rel-result-container {
+    margin-top: 0.5rem;
+    padding: 0.875rem 1rem;
+    border-radius: 0.625rem;
+    background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.rel-result-header {
+    font-size: 1.0625rem;
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.rel-result-body {
+    font-size: 0.9375rem;
+    color: rgb(31 41 55);
+    word-break: break-word;
+    white-space: pre-wrap;
+}
+
+/* ===== Empty state ===== */
+
+.rel-empty {
+    display: flex;
+    justify-content: center;
+    padding: 1.5rem 1rem 0.5rem;
+
+    & h4 {
+        margin: 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: var(--color-muted);
+    }
+}
+
+/* ===== Dark mode ===== */
+
+.dark .rel-search-card {
+    background-color: rgb(31 41 55);
+    border-color: rgb(55 65 81);
+}
+
+.rel-textarea {
+
+    .dark & {
+        background-color: rgb(17 24 39);
+        border-color: rgb(55 65 81);
+        color: rgb(243 244 246);
+    }
+
+    .dark &:focus {
+        background-color: rgb(31 41 55);
+    }
+}
+
+.dark .rel-result-body {
+    color: rgb(229 231 235);
+}
\ No newline at end of file
diff --git a/src/lib/styles/pages/_settings.scss b/src/lib/styles/pages/_settings.scss
new file mode 100644
index 00000000..4877890d
--- /dev/null
+++ b/src/lib/styles/pages/_settings.scss
@@ -0,0 +1,181 @@
+/*
+ * Settings-group page styles — consolidated from scoped <style> blocks
+ * in the standalone leaf pages (roles, setting, task, users) under
+ * src/routes/page.
+ *
+ * The three list tables (.roles-table, .tasks-table, .users-table) share
+ * a near-identical structure, so the rules are written once with
+ * comma-separated selectors instead of being duplicated per page.
+ */
+
+
+/* ========================================================================
+ * src/routes/page/{roles,task,users}/+page.svelte
+ * ========================================================================
+ * Table cell styling for the roles / tasks / users tables. Rules are
+ * defined globally so they apply to the headers in the page file as well
+ * as the rows rendered by RoleItem.svelte / TaskItem.svelte / UserItem.svelte.
+ */
+.roles-table,
+.tasks-table,
+.users-table {
+    th,
+    td {
+        border-bottom: 1px solid rgb(243 244 246);
+        padding: 0.75rem 1rem;
+        vertical-align: middle;
+        white-space: nowrap;
+    }
+
+    thead th {
+        text-align: left;
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--color-muted);
+        border-bottom-width: 2px;
+        border-bottom-color: rgb(229 231 235);
+    }
+
+    tbody tr:last-child > td {
+        border-bottom: 0;
+    }
+
+    .dark & {
+        th,
+        td {
+            border-bottom-color: rgb(55 65 81);
+        }
+    }
+}
+
+/* .tasks-table originally did not apply white-space: nowrap to td (only th);
+   preserve that subtle difference. */
+.tasks-table {
+    td {
+        white-space: normal;
+    }
+
+    thead th {
+        white-space: nowrap;
+    }
+}
+
+
+/* ========================================================================
+ * src/routes/page/setting/+page.svelte
+ * ======================================================================== */
+.my-json-editor {
+    --jse-theme-color: var(--color-primary);
+    --jse-theme-color-highlight: #687177;
+}
+
+.setting-tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    min-width: 6rem;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--color-muted);
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    &:hover:not(.is-active) {
+        background-color: rgb(255 255 255);
+        color: var(--color-primary);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+
+        .dark & {
+            background-color: rgb(31 41 55);
+            color: rgb(255 255 255);
+        }
+    }
+
+    &.is-active {
+        background-color: var(--color-primary);
+        color: rgb(255 255 255);
+        box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
+    }
+}
+
+
+/* ========================================================================
+ * Custom checkbox — used in the agent-permissions matrix of
+
+ * Replaces the native browser checkbox (which renders inconsistently
+ * across platforms even with `accent-color` set) with a primary-themed
+ * box. The checkmark is drawn via a CSS clip-path so it stays crisp
+ * at any DPI and inherits the primary color through `background-color`.
+ * ======================================================================== */
+.action-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin: 0;
+    border: 1.5px solid rgb(209 213 219);
+    border-radius: 0.3125rem;
+    background-color: rgb(255 255 255);
+    cursor: pointer;
+    flex-shrink: 0;
+    display: inline-grid;
+    place-content: center;
+    transition:
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+
+    /* Checkmark drawn via clip-path, scaled to 0 by default and
+       popped to 1 on :checked with a subtle overshoot. */
+    &::before {
+        content: '';
+        width: 0.75rem;
+        height: 0.75rem;
+        background-color: rgb(255 255 255);
+        clip-path: polygon(14% 44%, 0% 60%, 40% 100%, 100% 18%, 88% 4%, 38% 70%);
+        transform: scale(0);
+        transform-origin: center;
+        transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--color-primary);
+    }
+
+    &:focus-visible {
+        outline: 0;
+        border-color: var(--color-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
+    }
+
+    &:checked {
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+
+        &::before {
+            transform: scale(1);
+        }
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+    }
+
+    /* Dark mode: lift the unchecked state out of the gray-800 panel
+       background so the box is visible. */
+    .dark & {
+        border-color: rgb(75 85 99);
+        background-color: rgb(17 24 39);
+    }
+}
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index aa6b8e13..a6b5a442 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -82,48 +82,55 @@
 </script>
 
 <Headtitle title="Login" />
-<div class="modern-auth-wrapper">
 
-  <div class="container auth-container">
-    <div class="row justify-content-center align-items-center min-vh-100">
-      <div class="col-md-10 col-lg-8 col-xl-6">
-        <div class="auth-card-wrapper">
-          <div class="card auth-card border-0 shadow-lg">
-            <!-- Header Section with Gradient -->
-            <div class="auth-header">
-              <div class="auth-header-content">
-                <div class="auth-logo-section">
-                  <a href="/" class="auth-logo-link">
-                    <div class="logo-container">
-                      <img src={PUBLIC_LOGO_URL} alt="Logo" class="auth-logo-img" />
+<div class="flex min-h-screen items-center overflow-hidden bg-white dark:bg-gray-900">
+  <div class="mx-auto w-full max-w-7xl px-4">
+    <div class="flex min-h-screen items-center justify-center">
+      <div class="w-full md:w-5/6 lg:w-2/3 xl:w-1/2">
+        <div class="animate-slide-in-up py-8">
+
+          <!-- Card -->
+          <div class="overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/10 dark:bg-gray-800 dark:ring-white/10">
+
+            <!-- Gradient header -->
+            <div class="flex flex-col items-center justify-between gap-6 bg-linear-to-br from-primary to-primary-hover px-6 py-8 text-center text-white md:flex-row md:gap-0 md:px-8 md:py-10 md:text-left">
+              <div class="flex-1">
+                <div class="mb-6 flex justify-center md:justify-start">
+                  <a href="/">
+                    <div class="flex h-20 w-20 items-center justify-center rounded-full border-2 border-white/30 bg-white shadow-md transition-transform hover:scale-105">
+                      <img src={PUBLIC_LOGO_URL} alt="Logo" class="h-12 w-12 rounded-[20%] object-cover" />
                     </div>
                   </a>
                 </div>
-                <div class="welcome-section">
-                  <h2 class="welcome-title">{$_('Welcome Back!')}</h2>
-                  <p class="welcome-subtitle">Sign in to continue to {PUBLIC_BRAND_NAME}</p>
-                </div>
+                <h2 class="mb-1 text-3xl font-bold drop-shadow-sm">{$_('Welcome Back!')}</h2>
+                <p class="text-lg opacity-90">Sign in to continue to {PUBLIC_BRAND_NAME}</p>
               </div>
-              <div class="auth-illustration">
-                <img src={PUBLIC_LOGIN_IMAGE} alt="Login Illustration" class="illustration-img" />
+              <div class="md:ml-8 md:shrink-0">
+                <img src={PUBLIC_LOGIN_IMAGE} alt="Login Illustration" class="max-w-[120px] drop-shadow-lg md:max-w-[150px]" />
               </div>
             </div>
 
-            <!-- Form Section -->
-            <div class="card-body auth-form-section">
+            <!-- Form body -->
+            <div class="px-6 py-8 md:px-8 md:py-10">
               {#if isOpen}
-                <div class="alert alert-{status} modern-alert" role="alert">{msg}</div>
+                <div
+                  class="mb-6 rounded-xl px-4 py-3 font-medium {status === 'success' ? 'bg-green-100 text-green-800' : ''} {status === 'danger' ? 'bg-red-100 text-red-800' : ''}"
+                  role="alert"
+                >
+                  {msg}
+                </div>
               {/if}
 
-              <form class="auth-form" onsubmit={onSubmit}>
-                <div class="form-group">
-                  <label for="username" class="form-label">Username</label>
-                  <div class="input-wrapper">
-                    <i class="mdi mdi-account input-icon" aria-hidden="true"></i>
+              <form onsubmit={onSubmit}>
+                <!-- Username -->
+                <div class="mb-6">
+                  <label for="username" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Username</label>
+                  <div class="relative">
+                    <i class="mdi mdi-account pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
                     <input
                       type="text"
-                      class="form-control modern-input"
                       id="username"
+                      class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-4 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 disabled:opacity-70 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                       placeholder="Enter your username"
                       disabled={isSubmitting}
                       bind:value={username}
@@ -131,14 +138,15 @@
                   </div>
                 </div>
 
-                <div class="form-group">
-                  <label class="form-label" for="user-password">Password</label>
-                  <div class="input-wrapper password-wrapper">
-                    <i class="mdi mdi-lock-outline input-icon" aria-hidden="true"></i>
+                <!-- Password -->
+                <div class="mb-6">
+                  <label for="user-password" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Password</label>
+                  <div class="relative">
+                    <i class="mdi mdi-lock-outline pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
                     <input
                       type={showPassword ? 'text' : 'password'}
-                      class="form-control modern-input password-input"
                       id="user-password"
+                      class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-12 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 disabled:opacity-70 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
                       placeholder="Enter your password"
                       disabled={isSubmitting}
                       aria-label="Password"
@@ -146,656 +154,107 @@
                     />
                     <button
                       type="button"
-                      class="password-toggle"
+                      class="absolute right-3 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-md bg-transparent text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none disabled:opacity-70 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                       aria-label="Toggle password visibility"
                       disabled={isSubmitting}
                       onclick={onPasswordToggle}
                     >
-                      <i class="mdi {showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'}"></i>
+                      <i class="mdi {showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'} text-lg"></i>
                     </button>
                   </div>
                 </div>
 
-                <div class="form-options">
-                  <div class="remember-me">
+                <!-- Remember + forgot -->
+                <div class="mb-8 flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-0">
+                  <label class="flex cursor-pointer items-center gap-2 text-sm text-gray-600 dark:text-gray-300" for="remember-check">
                     <input
-                      class="form-check-input"
+                      class="h-4 w-4 rounded border-2 border-gray-300 accent-primary focus:ring-2 focus:ring-primary/15"
                       type="checkbox"
                       id="remember-check"
                       disabled={isSubmitting}
                       bind:checked={isRememberMe}
                     />
-                    <label class="form-check-label" for="remember-check">Remember me</label>
-                  </div>
+                    Remember me
+                  </label>
                   {#if PUBLIC_AUTH_ENABLE_FIND_PWD == 'true'}
-                  <a href="recoverpw" class="forgot-password">
-                    Forgot password?
-                  </a>
+                    <a href="recoverpw" class="text-sm font-medium text-primary transition-colors hover:text-primary-hover hover:underline">
+                      Forgot password?
+                    </a>
                   {/if}
                 </div>
 
-                <div class="login-button-wrapper">
+                <!-- Submit -->
+                <div class="mb-6 flex justify-center">
                   <button
                     type="submit"
-                    class="btn btn-primary login-btn"
+                    class="login-btn cursor-pointer h-14 min-w-[200px] rounded-xl bg-linear-to-br from-primary to-primary-hover px-8 text-lg font-semibold text-white shadow-md transition-all hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0 disabled:translate-y-0 disabled:opacity-70 disabled:shadow-md"
                     disabled={isSubmitting}
                   >
                     {#if isSubmitting}
-                      <i class="mdi mdi-loading mdi-spin me-2"></i>
+                      <i class="mdi mdi-loading mdi-spin mr-2"></i>
                       Signing in...
                     {:else}
-                      <i class="mdi mdi-login me-2"></i>
+                      <i class="mdi mdi-login mr-2"></i>
                       Sign In
                     {/if}
                   </button>
                 </div>
 
                 {#if PUBLIC_AUTH_ENABLE_SSO == 'true'}
-                <div class="divider">
-                  <span class="divider-text">or continue with</span>
-                </div>
-
-                <div class="social-login">
-                  <a
-                    class="social-btn github-btn"
-                    href="{PUBLIC_SERVICE_URL}/sso/GitHub?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
-                    title="Sign in with GitHub"
-                  >
-                    <i class="mdi mdi-github"></i>
-                  </a>
-
-                  <a
-                    class="social-btn keycloak-btn"
-                    href="{PUBLIC_SERVICE_URL}/sso/Keycloak?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
-                    title="Sign in with Keycloak"
-                  >
-                    <i class="mdi mdi-cloud"></i>
-                  </a>
+                  <!-- Divider -->
+                  <div class="relative my-8 text-center">
+                    <div class="absolute inset-x-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600"></div>
+                    <span class="relative z-10 bg-white px-4 text-sm text-gray-500 dark:bg-gray-800 dark:text-gray-400">or continue with</span>
+                  </div>
 
-                  <a
-                    class="social-btn google-btn"
-                    href="{PUBLIC_SERVICE_URL}/sso/Google?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
-                    title="Sign in with Google"
-                  >
-                    <i class="mdi mdi-google"></i>
-                  </a>
-                </div>
+                  <!-- Social -->
+                  <div class="mb-6 flex justify-center gap-4">
+                    <a
+                      class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#24292e] text-white transition-all hover:-translate-y-0.5 hover:bg-[#1a1e22] hover:shadow-lg"
+                      href="{PUBLIC_SERVICE_URL}/sso/GitHub?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+                      title="Sign in with GitHub"
+                    >
+                      <i class="mdi mdi-github text-2xl"></i>
+                    </a>
+                    <a
+                      class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#4285f4] text-white transition-all hover:-translate-y-0.5 hover:bg-[#357ae8] hover:shadow-lg"
+                      href="{PUBLIC_SERVICE_URL}/sso/Keycloak?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+                      title="Sign in with Keycloak"
+                    >
+                      <i class="mdi mdi-cloud text-2xl"></i>
+                    </a>
+                    <a
+                      class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#db4437] text-white transition-all hover:-translate-y-0.5 hover:bg-[#c23321] hover:shadow-lg"
+                      href="{PUBLIC_SERVICE_URL}/sso/Google?redirectUrl={PUBLIC_LIVECHAT_HOST}page/user/me"
+                      title="Sign in with Google"
+                    >
+                      <i class="mdi mdi-google text-2xl"></i>
+                    </a>
+                  </div>
                 {/if}
               </form>
             </div>
           </div>
 
-          <!-- Footer Section -->
-          <div class="auth-footer">
+          <!-- Footer -->
+          <div class="mt-8 text-center">
             {#if PUBLIC_ALLOW_SIGNUP === 'true'}
-            <p class="signup-text">
-              Don't have an account?
-              <a href="register" class="signup-link">
-                Create one here
-              </a>
-            </p>
+              <p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
+                Don't have an account?
+                <a href="register" class="ml-1 font-semibold text-primary transition-colors hover:text-primary-hover hover:underline">
+                  Create one here
+                </a>
+              </p>
             {/if}
-
-            <p class="copyright-text">
+            <p class="text-xs text-gray-500 dark:text-gray-400">
               Supported by © {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}
             </p>
           </div>
+
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<style>
-	.modern-auth-wrapper {
-		min-height: 100vh;
-		background: #ffffff;
-		position: relative;
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-	}
-
-
-
-	.auth-container {
-		position: relative;
-		z-index: 2;
-		width: 100%;
-	}
-
-	.auth-card-wrapper {
-		padding: 2rem 0;
-		animation: slideInUp 0.8s ease-out;
-	}
-
-	@keyframes slideInUp {
-		from {
-			opacity: 0;
-			transform: translateY(30px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.auth-card {
-		border-radius: 24px !important;
-		background: #ffffff !important;
-		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06) !important;
-		border: 1px solid rgba(0, 0, 0, 0.08) !important;
-		overflow: hidden;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.modern-auth-wrapper {
-			background: #f8f9fa;
-		}
-
-		.auth-card {
-			background: #ffffff !important;
-			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08) !important;
-		}
-	}
-
-	.auth-header {
-		background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #000) 100%);
-		padding: 2.5rem 2rem;
-		color: white;
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		border-radius: 8px 8px 0 0;
-	}
-
-	@media (max-width: 768px) {
-		.auth-header {
-			flex-direction: column;
-			text-align: center;
-			padding: 2rem 1.5rem;
-		}
-	}
-
-	.auth-header-content {
-		flex: 1;
-	}
-
-	.auth-logo-section {
-		margin-bottom: 1.5rem;
-	}
-
-	.auth-logo-link {
-		text-decoration: none;
-	}
-
-	.logo-container {
-		width: 80px;
-		height: 80px;
-		background: #ffffff;
-		border-radius: 50%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 2px solid rgba(255, 255, 255, 0.3);
-		transition: all 0.3s ease;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-	}
-
-	.logo-container:hover {
-		transform: scale(1.05);
-		background: #ffffff;
-		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
-	}
-
-	.auth-logo-img {
-		width: 50px;
-		height: 50px;
-		border-radius: 20%;
-		object-fit: cover;
-	}
-
-	.welcome-title {
-		font-size: 2rem;
-		font-weight: 700;
-		margin-bottom: 0.5rem;
-		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	}
-
-	.welcome-subtitle {
-		font-size: 1.1rem;
-		opacity: 0.9;
-		margin-bottom: 0;
-	}
-
-	.auth-illustration {
-		flex-shrink: 0;
-		margin-left: 2rem;
-	}
-
-	@media (max-width: 768px) {
-		.auth-illustration {
-			margin-left: 0;
-			margin-top: 1.5rem;
-		}
-	}
-
-	.illustration-img {
-		max-width: 150px;
-		height: auto;
-		filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
-	}
-
-	@media (max-width: 768px) {
-		.illustration-img {
-			max-width: 120px;
-		}
-	}
-
-	.auth-form-section {
-		padding: 2.5rem 2rem !important;
-	}
-
-	@media (max-width: 768px) {
-		.auth-form-section {
-			padding: 2rem 1.5rem !important;
-		}
-	}
-
-	.modern-alert {
-		border-radius: 12px !important;
-		border: none !important;
-		font-weight: 500;
-		margin-bottom: 1.5rem;
-	}
-
-	.form-group {
-		margin-bottom: 1.5rem;
-	}
-
-	.form-label {
-		font-weight: 600;
-		color: var(--bs-gray-700);
-		margin-bottom: 0.5rem;
-		font-size: 0.95rem;
-	}
-
-	.input-wrapper {
-		position: relative;
-		display: flex;
-		align-items: center;
-	}
-
-	.input-icon {
-		position: absolute;
-		left: 1rem;
-		top: 50%;
-		transform: translateY(-50%);
-		color: #6c757d !important;
-		font-size: 1.2rem;
-		z-index: 10;
-		pointer-events: none;
-		display: inline-block;
-		font-family: "Material Design Icons" !important;
-		font-weight: normal;
-		font-style: normal;
-		line-height: 1;
-	}
-
-	.modern-input {
-		width: 100%;
-		padding-left: 3.25rem !important; /* extra left space for input icon to avoid overlap */
-		padding-right: 1rem !important;
-		height: 3rem;
-		border-radius: 12px !important;
-		border: 2px solid var(--bs-gray-200) !important;
-		background: var(--bs-white) !important;
-		font-size: 1rem;
-		transition: all 0.3s ease;
-		position: relative;
-		z-index: 1;
-	}
-
-	.password-wrapper .modern-input {
-		padding-right: 3rem !important;
-	}
-
-	.modern-input:focus {
-		border-color: var(--bs-primary) !important;
-		box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15) !important;
-		background: var(--bs-white) !important;
-		outline: none;
-	}
-
-	.modern-input::placeholder {
-		color: var(--bs-gray-400);
-	}
-
-	.password-toggle {
-		position: absolute;
-		right: 0.75rem;
-		top: 50%;
-		transform: translateY(-50%);
-		border: none !important;
-		background: transparent !important;
-		color: var(--bs-gray-500);
-		padding: 0.5rem;
-		border-radius: 6px;
-		transition: all 0.3s ease;
-		z-index: 10;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-	}
-
-	.password-toggle:hover {
-		background: var(--bs-gray-100) !important;
-		color: var(--bs-gray-700);
-	}
-
-	.password-toggle:focus {
-		box-shadow: none !important;
-		outline: none;
-	}
-
-	.password-toggle i {
-		font-size: 1.1rem;
-		font-family: "Material Design Icons" !important;
-		font-weight: normal;
-		font-style: normal;
-		display: inline-block;
-		line-height: 1;
-	}
-
-	.form-options {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 2rem;
-	}
-
-	@media (max-width: 576px) {
-		.form-options {
-			flex-direction: column;
-			gap: 1rem;
-			align-items: flex-start;
-		}
-	}
-
-	.remember-me {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.form-check-input {
-		border-radius: 4px;
-		border: 2px solid var(--bs-gray-300);
-	}
-
-	.form-check-input:checked {
-		background-color: var(--bs-primary);
-		border-color: var(--bs-primary);
-	}
-
-	.form-check-input:focus {
-		box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
-	}
-
-	.form-check-label {
-		font-size: 0.9rem;
-		color: var(--bs-gray-600);
-		margin-bottom: 0;
-	}
-
-	.forgot-password {
-		color: var(--bs-primary);
-		text-decoration: none;
-		font-size: 0.9rem;
-		font-weight: 500;
-		transition: all 0.3s ease;
-	}
-
-	.forgot-password:hover {
-		color: color-mix(in srgb, var(--bs-primary) 75%, #000);
-		text-decoration: underline;
-	}
-
-	.login-button-wrapper {
-		margin-bottom: 1.5rem;
-		display: flex;
-		justify-content: center;
-	}
-
-	.login-btn {
-		width: auto;
-		min-width: 200px;
-		height: 3.5rem;
-		border-radius: 12px !important;
-		background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #000) 100%) !important;
-		border: none !important;
-		font-weight: 600;
-		font-size: 1.1rem;
-		transition: all 0.3s ease;
-		position: relative;
-		overflow: hidden;
-		padding: 0 2rem;
-	}
-
-	.login-btn:before {
-		content: '';
-		position: absolute;
-		top: 0;
-		left: -100%;
-		width: 100%;
-		height: 100%;
-		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-		transition: left 0.5s;
-	}
-
-	.login-btn:hover:before {
-		left: 100%;
-	}
-
-	.login-btn:hover {
-		transform: translateY(-2px);
-		box-shadow: 0 10px 25px rgba(var(--bs-primary-rgb), 0.3);
-	}
-
-	.login-btn:active {
-		transform: translateY(0);
-	}
-
-	.login-btn:disabled {
-		opacity: 0.7;
-		transform: none;
-	}
-
-	.login-btn:disabled:hover {
-		transform: none;
-		box-shadow: none;
-	}
-
-	.divider {
-		position: relative;
-		text-align: center;
-		margin: 2rem 0;
-	}
-
-	.divider:before {
-		content: '';
-		position: absolute;
-		top: 50%;
-		left: 0;
-		right: 0;
-		height: 1px;
-		background: var(--bs-gray-300);
-	}
-
-	.divider-text {
-		background: var(--bs-white);
-		padding: 0 1rem;
-		color: var(--bs-gray-500);
-		font-size: 0.9rem;
-		position: relative;
-		z-index: 1;
-	}
-
-	.social-login {
-		display: flex;
-		gap: 1rem;
-		margin-bottom: 1.5rem;
-		justify-content: center;
-	}
-
-	@media (max-width: 576px) {
-		.social-login {
-			flex-direction: row;
-			gap: 0.75rem;
-		}
-	}
-
-	.social-btn {
-		width: 50px;
-		height: 50px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 12px;
-		text-decoration: none;
-		font-weight: 500;
-		transition: all 0.3s ease;
-		border: 2px solid transparent;
-	}
-
-	.social-btn.github-btn {
-		background: #24292e;
-		color: white;
-	}
-
-	.social-btn.github-btn:hover {
-		background: #1a1e22;
-		transform: translateY(-2px);
-		box-shadow: 0 8px 20px rgba(36, 41, 46, 0.3);
-	}
-
-	.social-btn.keycloak-btn {
-		background: #4285f4;
-		color: white;
-	}
-
-	.social-btn.keycloak-btn:hover {
-		background: #357ae8;
-		transform: translateY(-2px);
-		box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
-	}
-
-	.social-btn.google-btn {
-		background: #db4437;
-		color: white;
-	}
-
-	.social-btn.google-btn:hover {
-		background: #c23321;
-		transform: translateY(-2px);
-		box-shadow: 0 8px 20px rgba(219, 68, 55, 0.3);
-	}
-
-	.social-btn i {
-		font-size: 1.4rem;
-	}
-
-	.auth-footer {
-		text-align: center;
-		margin-top: 2rem;
-	}
-
-	.signup-text {
-		margin-bottom: 1rem;
-		color: var(--bs-gray-600);
-		font-size: 0.95rem;
-	}
-
-	.signup-link {
-		color: var(--bs-primary);
-		text-decoration: none;
-		font-weight: 600;
-		margin-left: 0.25rem;
-	}
-
-	.signup-link:hover {
-		color: color-mix(in srgb, var(--bs-primary) 75%, #000);
-		text-decoration: underline;
-	}
-
-	.copyright-text {
-		color: var(--bs-gray-500);
-		font-size: 0.85rem;
-		margin-bottom: 0;
-	}
-
-	@keyframes heartbeat {
-		0%, 100% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.1);
-		}
-	}
-
-	/* Dark mode support */
-	@media (prefers-color-scheme: dark) {
-		.form-label {
-			color: var(--bs-gray-300);
-		}
-
-		.modern-input {
-			background: var(--bs-gray-800);
-			border-color: var(--bs-gray-600) !important;
-			color: var(--bs-white);
-		}
-
-		.modern-input:focus {
-			background: var(--bs-gray-800);
-			border-color: var(--bs-primary) !important;
-		}
-
-		.modern-input::placeholder {
-			color: var(--bs-gray-400);
-		}
-
-		.input-icon {
-			color: var(--bs-gray-400);
-		}
-
-		.password-toggle {
-			color: var(--bs-gray-400);
-		}
-
-		.password-toggle:hover {
-			background: var(--bs-gray-700) !important;
-			color: var(--bs-gray-200);
-		}
-
-		.form-check-label {
-			color: var(--bs-gray-300);
-		}
-
-		.divider-text {
-			background: var(--bs-gray-800);
-			color: var(--bs-gray-400);
-		}
-
-		.signup-text {
-			color: var(--bs-gray-300);
-		}
 
-		.copyright-text {
-			color: var(--bs-gray-400);
-		}
-	}
-</style>
diff --git a/src/routes/(authentication)/recoverpw/+page.svelte b/src/routes/(authentication)/recoverpw/+page.svelte
index a9eb2da9..82e7c50f 100644
--- a/src/routes/(authentication)/recoverpw/+page.svelte
+++ b/src/routes/(authentication)/recoverpw/+page.svelte
@@ -5,71 +5,88 @@
 
 <Headtitle title="Recover Password" />
 
-<div class="account-pages my-5 pt-sm-5">
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-8 col-lg-6 col-xl-5">
-				<div class="card overflow-hidden">
-					<div class="bg-primary-subtle">
-						<div class="row">
-							<div class="col-7">
-								<div class="text-primary p-4">
-									<h5 class="text-primary">Reset Password</h5>
-									<p>Reset Password with SciSharp.</p>
+<div class="flex min-h-screen items-center overflow-hidden bg-white dark:bg-gray-900">
+	<div class="mx-auto w-full max-w-7xl px-4">
+		<div class="flex min-h-screen items-center justify-center">
+			<div class="w-full md:w-5/6 lg:w-2/3 xl:w-1/2">
+				<div class="animate-slide-in-up py-8">
+
+					<!-- Card -->
+					<div class="overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/10 dark:bg-gray-800 dark:ring-white/10">
+
+						<!-- Gradient header -->
+						<div class="flex flex-col items-center justify-between gap-6 bg-linear-to-br from-primary to-primary-hover px-6 py-8 text-center text-white md:flex-row md:gap-0 md:px-8 md:py-10 md:text-left">
+							<div class="flex-1">
+								<div class="mb-6 flex justify-center md:justify-start">
+									<a href="/">
+										<div class="flex h-20 w-20 items-center justify-center rounded-full border-2 border-white/30 bg-white shadow-md transition-transform hover:scale-105">
+											<img src={PUBLIC_LOGO_URL} alt="Logo" class="h-12 w-12 rounded-[20%] object-cover" />
+										</div>
+									</a>
 								</div>
+								<h2 class="mb-1 text-3xl font-bold drop-shadow-sm">Forgot password?</h2>
+								<p class="text-lg opacity-90">No worries — we'll email you reset instructions</p>
 							</div>
-							<div class="col-5 align-self-end">
-								<img src="images/profile-img.png" alt="" class="img-fluid" />
+							<div class="md:ml-8 md:shrink-0">
+								<img src="images/profile-img.png" alt="Reset password illustration" class="max-w-[120px] drop-shadow-lg md:max-w-[150px]" />
 							</div>
 						</div>
-					</div>
-					<div class="card-body pt-0">
-						<div>
-							<a href="page/dashboard">
-								<div class="avatar-md profile-user-wid mb-4">
-									<span class="avatar-title rounded-circle bg-light">
-										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />
-									</span>
-								</div>
-							</a>
-						</div>
 
-						<div class="p-2">
-							<div class="alert alert-success text-center mb-4" role="alert">
-								Enter your Email and instructions will be sent to you!
+						<!-- Form body -->
+						<div class="px-6 py-8 md:px-8 md:py-10">
+							<!-- Info alert -->
+							<div class="mb-6 flex items-center gap-2 rounded-xl bg-info/10 px-4 py-3 text-sm font-medium text-info" role="alert">
+								<i class="mdi mdi-information-outline shrink-0 text-base leading-none" aria-hidden="true"></i>
+								<span>Enter your email and we'll send instructions to reset your password.</span>
 							</div>
 
-							<form class="form-horizontal" action="page/dashboard">
-								<div class="mb-3">
-									<label for="useremail" class="form-label">Email</label>
-									<input
-										type="email"
-										class="form-control"
-										id="useremail"
-										placeholder="Enter email"
-									/>
+							<form action="page/dashboard">
+								<!-- Email -->
+								<div class="mb-8">
+									<label for="useremail" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Email</label>
+									<div class="relative">
+										<i class="mdi mdi-email-outline pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
+										<input
+											type="email"
+											id="useremail"
+											class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-4 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 disabled:opacity-70 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+											placeholder="Enter your email"
+										/>
+									</div>
 								</div>
 
-								<div class="text-end">
-									<button type="submit" class="btn btn-primary w-md waves-effect waves-light">
-										Reset
+								<!-- Submit -->
+								<div class="mb-2 flex justify-center">
+									<button
+										type="submit"
+										class="reset-btn h-14 min-w-[200px] rounded-xl bg-linear-to-br from-primary to-primary-hover px-8 text-lg font-semibold text-white shadow-md transition-all hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
+									>
+										<i class="mdi mdi-email-send-outline mr-2"></i>
+										Send instructions
 									</button>
 								</div>
 							</form>
 						</div>
 					</div>
-				</div>
-				<div class="mt-5 text-center">
-					<p>
-						Remember It ?
-						<a href="login" class="fw-medium text-primary">Sign In here</a>
-					</p>
-					<p>
-						© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
-						<i class="mdi mdi-heart text-danger"></i> by Open Source community
-					</p>
+
+					<!-- Footer -->
+					<div class="mt-8 text-center">
+						<p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
+							Remember your password?
+							<a href="login" class="ml-1 font-semibold text-primary transition-colors hover:text-primary-hover hover:underline">
+								Sign in
+							</a>
+						</p>
+						<p class="text-xs text-gray-500 dark:text-gray-400">
+							© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
+							<i class="mdi mdi-heart text-danger"></i> by Open Source community
+						</p>
+					</div>
+
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
+
+
diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
index e1767627..220271aa 100644
--- a/src/routes/(authentication)/register/+page.svelte
+++ b/src/routes/(authentication)/register/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { goto } from '$app/navigation';
-	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
+	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME, PUBLIC_BRAND_NAME } from '$env/static/public';
 
 	let username = $state('');
 	let emailid = $state('');
@@ -56,123 +56,161 @@
 
 <Headtitle title="Register" />
 
-<div class="account-pages my-5 pt-sm-5">
-	<div class="container">
-		<div class="row justify-content-center">
-			<div class="col-md-8 col-lg-8 col-xl-5">
-				<div class="card overflow-hidden">
-					<div class="bg-primary-subtle">
-						<div class="row">
-							<div class="col-7">
-								<div class="text-primary p-4">
-									<h5 class="text-primary">Free Register</h5>
-									<p>Get your free account now.</p>
+<div class="flex min-h-screen items-center overflow-hidden bg-white dark:bg-gray-900">
+	<div class="mx-auto w-full max-w-7xl px-4">
+		<div class="flex min-h-screen items-center justify-center">
+			<div class="w-full md:w-5/6 lg:w-2/3 xl:w-1/2">
+				<div class="animate-slide-in-up py-8">
+
+					<!-- Card -->
+					<div class="overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/10 dark:bg-gray-800 dark:ring-white/10">
+
+						<!-- Gradient header -->
+						<div class="flex flex-col items-center justify-between gap-6 bg-linear-to-br from-primary to-primary-hover px-6 py-8 text-center text-white md:flex-row md:gap-0 md:px-8 md:py-10 md:text-left">
+							<div class="flex-1">
+								<div class="mb-6 flex justify-center md:justify-start">
+									<a href="/">
+										<div class="flex h-20 w-20 items-center justify-center rounded-full border-2 border-white/30 bg-white shadow-md transition-transform hover:scale-105">
+											<img src={PUBLIC_LOGO_URL} alt="Logo" class="h-12 w-12 rounded-[20%] object-cover" />
+										</div>
+									</a>
 								</div>
+								<h2 class="mb-1 text-3xl font-bold drop-shadow-sm">Create your account</h2>
+								<p class="text-lg opacity-90">Join {PUBLIC_BRAND_NAME} and start building</p>
 							</div>
-							<div class="col-5 align-self-end">
-								<img src="images/profile-img.png" alt="" class="img-fluid" />
+							<div class="md:ml-8 md:shrink-0">
+								<img src="images/profile-img.png" alt="Register illustration" class="max-w-[120px] drop-shadow-lg md:max-w-[150px]" />
 							</div>
 						</div>
-					</div>
-					<div class="card-body pt-0">
-						<div>
-							<a href="page/dashboard">
-								<div class="avatar-md profile-user-wid mb-4">
-									<span class="avatar-title rounded-circle bg-light">
-										<img src={PUBLIC_LOGO_URL} alt="" class="rounded-circle" height="34" />
-									</span>
-								</div>
-							</a>
-						</div>
-						<div class="p-2">
+
+						<!-- Form body -->
+						<div class="px-6 py-8 md:px-8 md:py-10">
 							{#if isOpen}
-								<div class="alert alert-{status}" role="alert">{msg}</div>
+								<div
+									class="mb-6 rounded-xl px-4 py-3 font-medium {status === 'success' ? 'bg-green-100 text-green-800' : ''} {status === 'danger' ? 'bg-red-100 text-red-800' : ''}"
+									role="alert"
+								>
+									{msg}
+								</div>
 							{/if}
-							<form class="needs-validation" onsubmit={onSubmit}>
-								<div class="mb-3">
-									<label for="useremail" class="form-label">Email</label>
-									<input
-										type="email"
-										class="form-control"
-										id="useremail"
-										placeholder="Enter email"
-										bind:value={emailid}
-									/>
-									<div class="invalid-feedback">Please Enter Email</div>
+
+							<form onsubmit={onSubmit}>
+								<!-- Email -->
+								<div class="mb-6">
+									<label for="useremail" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Email</label>
+									<div class="relative">
+										<i class="mdi mdi-email-outline pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
+										<input
+											type="email"
+											id="useremail"
+											class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-4 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+											placeholder="Enter your email"
+											bind:value={emailid}
+										/>
+									</div>
 								</div>
 
-								<div class="mb-3">
-									<label for="username" class="form-label">Username</label>
-									<input
-										type="text"
-										class="form-control"
-										id="username"
-										placeholder="Enter username"
-										bind:value={username}
-									/>
-									<div class="invalid-feedback">Please Enter Username</div>
+								<!-- Username -->
+								<div class="mb-6">
+									<label for="username" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Username</label>
+									<div class="relative">
+										<i class="mdi mdi-account pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
+										<input
+											type="text"
+											id="username"
+											class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-4 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+											placeholder="Choose a username"
+											bind:value={username}
+										/>
+									</div>
 								</div>
 
-								<div class="mb-3">
-									<label for="userpassword" class="form-label">Password</label>
-									<input
-										type="password"
-										class="form-control"
-										id="userpassword"
-										placeholder="Enter password"
-										bind:value={password}
-									/>
-									<div class="invalid-feedback">Please Enter Password</div>
+								<!-- Password -->
+								<div class="mb-8">
+									<label for="userpassword" class="mb-2 block text-sm font-semibold text-gray-700 dark:text-gray-300">Password</label>
+									<div class="relative">
+										<i class="mdi mdi-lock-outline pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-xl text-gray-500 dark:text-gray-400" aria-hidden="true"></i>
+										<input
+											type="password"
+											id="userpassword"
+											class="h-12 w-full rounded-xl border-2 border-gray-200 bg-white pl-[3.25rem] pr-4 text-base text-gray-900 transition-colors placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/15 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+											placeholder="Create a password"
+											bind:value={password}
+										/>
+									</div>
 								</div>
 
-								<div class="mt-4 d-grid">
-									<button type="submit" class="btn btn-primary waves-effect waves-light">
+								<!-- Submit -->
+								<div class="mb-6 flex justify-center">
+									<button
+										type="submit"
+										class="register-btn h-14 min-w-[200px] rounded-xl bg-linear-to-br from-primary to-primary-hover px-8 text-lg font-semibold text-white shadow-md transition-all hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
+									>
+										<i class="mdi mdi-account-plus mr-2"></i>
 										Register
 									</button>
 								</div>
 
-								<div class="mt-4 text-center">
-									<h5 class="font-size-14 mb-3">Sign up using</h5>
-
-									<ul class="list-inline">
-										<li class="list-inline-item">
-											<button type="button" class="social-list-item bg-primary text-white border-primary" aria-label="Sign up with Facebook">
-												<i class="mdi mdi-facebook"></i>
-											</button>
-										</li>
-										<li class="list-inline-item">
-											<button type="button" class="social-list-item bg-info text-white border-info" aria-label="Sign up with Twitter">
-												<i class="mdi mdi-twitter"></i>
-											</button>
-										</li>
-										<li class="list-inline-item">
-											<button type="button" class="social-list-item bg-danger text-white border-danger" aria-label="Sign up with Google">
-												<i class="mdi mdi-google"></i>
-											</button>
-										</li>
-									</ul>
+								<!-- Divider -->
+								<div class="relative my-8 text-center">
+									<div class="absolute inset-x-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600"></div>
+									<span class="relative z-10 bg-white px-4 text-sm text-gray-500 dark:bg-gray-800 dark:text-gray-400">or sign up with</span>
 								</div>
 
-								<div class="mt-4 text-center">
-									<p class="mb-0">
-										By registering you agree to the <button type="button" class="btn btn-link text-primary p-0 align-baseline">Terms of Use</button>
-									</p>
+								<!-- Social -->
+								<div class="mb-6 flex justify-center gap-4">
+									<button
+										type="button"
+										class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#3b5998] text-white transition-all hover:-translate-y-0.5 hover:bg-[#2d4373] hover:shadow-lg"
+										aria-label="Sign up with Facebook"
+									>
+										<i class="mdi mdi-facebook text-2xl"></i>
+									</button>
+									<button
+										type="button"
+										class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#1da1f2] text-white transition-all hover:-translate-y-0.5 hover:bg-[#0d8bd9] hover:shadow-lg"
+										aria-label="Sign up with Twitter"
+									>
+										<i class="mdi mdi-twitter text-2xl"></i>
+									</button>
+									<button
+										type="button"
+										class="flex h-[50px] w-[50px] items-center justify-center rounded-xl bg-[#db4437] text-white transition-all hover:-translate-y-0.5 hover:bg-[#c23321] hover:shadow-lg"
+										aria-label="Sign up with Google"
+									>
+										<i class="mdi mdi-google text-2xl"></i>
+									</button>
 								</div>
+
+								<!-- Terms -->
+								<p class="text-center text-sm text-gray-600 dark:text-gray-400">
+									By registering you agree to the
+									<button type="button" class="border-0 bg-transparent p-0 align-baseline font-medium text-primary transition-colors hover:text-primary-hover hover:underline">
+										Terms of Use
+									</button>
+								</p>
 							</form>
 						</div>
 					</div>
-				</div>
-				<div class="mt-5 text-center">
-					<p>
-						Already have an account ?
-						<a href="login" class="fw-medium text-primary">Login</a>
-					</p>
-					<p>
-						© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
-						<i class="mdi mdi-heart text-danger"></i> by Open Source community
-					</p>
+
+					<!-- Footer -->
+					<div class="mt-8 text-center">
+						<p class="mb-4 text-sm text-gray-600 dark:text-gray-300">
+							Already have an account?
+							<a href="login" class="ml-1 font-semibold text-primary transition-colors hover:text-primary-hover hover:underline">
+								Sign in
+							</a>
+						</p>
+						<p class="text-xs text-gray-500 dark:text-gray-400">
+							© {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}. Crafted with
+							<i class="mdi mdi-heart text-danger"></i> by Open Source community
+						</p>
+					</div>
+
 				</div>
 			</div>
 		</div>
 	</div>
 </div>
+
+
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index 83d21385..fd6dccc6 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -21,39 +21,46 @@
 
 <HeadTitle title="{PUBLIC_BRAND_NAME} Workspace" />
 
-<div class="container">
-    <div class="row">
-        <div class="col mt-5 text-end">
-            <a href={PUBLIC_COMPANY_WEBSITE} class="text-dark">
+<div class="relative min-h-screen px-4">
+    <!-- Logo: absolute so it never shifts the centered hero below -->
+    <div class="absolute top-6 right-6 z-10 sm:top-8 sm:right-8">
+        <a href={PUBLIC_COMPANY_WEBSITE} class="text-dark">
+            <img src={PUBLIC_LOGO_URL} alt="logo" class="h-10 w-auto sm:h-12" />
+        </a>
+    </div>
+
+    <!-- Hero: vertically and horizontally centered on the viewport -->
+    <div class="flex min-h-screen flex-col items-center justify-center text-center">
+        {#if showHomeImage}
+            <div transition:fade={{ delay: 300, duration: 500 }}>
                 <img
-                    src={PUBLIC_LOGO_URL}
-                    alt="logo"
-                    height="50"
-                    class="auth-logo-dark mx-auto"
+                    src={PUBLIC_HOME_IMAGE}
+                    alt=""
+                    class="mx-auto w-full max-w-[260px] sm:max-w-sm md:max-w-md lg:max-w-lg"
                 />
-            </a>
-        </div>
-    </div>
-    <div class="row d-flex justify-content-center align-items-center" style="height: 60vh;">
-        <div class="col-lg-12">
-            <div class="text-center">
-                <div class="row justify-content-center mt-5">
-                    <div class="col-sm-8">
-                        {#if showHomeImage}
-                            <div class="maintenance-img" transition:fade={{ delay: 300, duration: 500 }}>
-                                <img src={PUBLIC_HOME_IMAGE} alt="" style="max-width: 25vw;" />
-                            </div>
-                        {/if}
-                    </div>
-                </div>
-                {#if showHomeSlogan}
-                    <h4 class="mt-5" transition:fade={{ delay: 500, duration: 500 }}>Let&#39;s <a href="login" class="btn btn-primary">get started</a> with {PUBLIC_BRAND_NAME}</h4>
-                    <p class="text-muted" transition:fade={{ delay: 800, duration: 500 }}>
-                        {PUBLIC_HOME_SLOGAN}
-                    </p>
-                {/if}
             </div>
-        </div>
+        {/if}
+        {#if showHomeSlogan}
+            <h4
+                class="mt-8 text-lg font-medium sm:text-xl"
+                transition:fade={{ delay: 500, duration: 500 }}
+            >
+                Let&#39;s
+                <a
+                    href="login"
+                    class="ml-1 inline-flex items-center rounded bg-primary px-3 py-2 text-sm text-white transition-colors hover:bg-primary-hover"
+                >
+                    get started
+                </a>
+                with {PUBLIC_BRAND_NAME}
+            </h4>
+            <p
+                class="mt-2 max-w-xl text-muted"
+                transition:fade={{ delay: 800, duration: 500 }}
+            >
+                {PUBLIC_HOME_SLOGAN}
+            </p>
+        {/if}
     </div>
 </div>
 
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index c3f1d8e7..ac43f7b6 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,14 +1,82 @@
 <script>
     import { page } from '$app/state';
-    import Error500 from '$lib/common/errors/error-500.svelte'
+    import { goto } from '$app/navigation';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import Error500 from '$lib/common/errors/error-500.svelte';
 
     let status = $derived(page.status);
     let errorMessage = $derived(page.error?.message ?? '');
+
+    /** @param {number} s */
+    function getLabel(s) {
+        if (s === 404) return 'Page Not Found';
+        if (s === 403) return 'Access Forbidden';
+        if (s === 401) return 'Unauthorized';
+        if (s === 400) return 'Bad Request';
+        return 'Something Went Wrong';
+    }
+
+    /** @param {number} s */
+    function getDescription(s) {
+        if (s === 404) return "The page you're looking for doesn't exist or has been moved.";
+        if (s === 403) return "You don't have permission to access this resource.";
+        if (s === 401) return "You need to sign in to view this page.";
+        if (s === 400) return "The request was malformed. Please check and try again.";
+        return 'Sorry, something went wrong. Please try again later.';
+    }
+
+    function goBack() {
+        if (typeof history !== 'undefined' && history.length > 1) {
+            history.back();
+        } else {
+            goto('/page/dashboard');
+        }
+    }
 </script>
 
-{#if status === 500}
+{#if status == 500}
     <Error500 />
 {:else}
-    <h1>{status} {errorMessage}</h1>
-    <p>Sorry, something went wrong on our end. Please try again later.</p>
-{/if}
\ No newline at end of file
+    <HeadTitle title={`${status} Error`} />
+
+    <div class="relative flex min-h-[80vh] items-center justify-center overflow-hidden px-4 py-12">
+        <!-- Backdrop blobs -->
+        <div class="pointer-events-none absolute inset-0 -z-10">
+            <div class="err-blob absolute -top-32 -left-32 h-80 w-80 rounded-full bg-[color-mix(in_srgb,var(--color-primary)_22%,transparent)] blur-3xl"></div>
+            <div class="err-blob err-blob-delayed absolute -bottom-32 -right-32 h-80 w-80 rounded-full bg-[color-mix(in_srgb,var(--color-warning)_22%,transparent)] blur-3xl"></div>
+        </div>
+
+        <div class="w-full max-w-xl text-center">
+            <!-- Big gradient status code -->
+            <div class="err-code select-none text-[7rem] font-bold leading-none tracking-tighter sm:text-[9rem]">
+                {status}
+            </div>
+
+            <h4 class="mt-4 text-sm font-semibold uppercase tracking-[0.25em] text-gray-700 sm:text-base dark:text-gray-200">
+                {getLabel(status)}
+            </h4>
+
+            <p class="mx-auto mt-4 max-w-md text-sm text-[var(--color-muted)] sm:text-base">
+                {errorMessage || getDescription(status)}
+            </p>
+
+            <div class="mt-8 flex flex-wrap justify-center gap-3">
+                <button
+                    class="err-btn err-btn-primary"
+                    onclick={() => goto('/page/dashboard')}
+                >
+                    <i class="bx bx-home-alt"></i>
+                    Back to Dashboard
+                </button>
+                <button
+                    class="err-btn err-btn-ghost"
+                    onclick={() => goBack()}
+                >
+                    <i class="bx bx-arrow-back"></i>
+                    Go Back
+                </button>
+            </div>
+        </div>
+    </div>
+{/if}
+
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5b70cdf8..370e77ce 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,9 @@
 <script>
 	import '../app.css';
-	import '$lib/scss/bootstrap.scss';
-	import '$lib/scss/app.scss';
 	import '$lib/scss/icons.scss';
+	import '$lib/styles/app.scss';
 	import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
+	import { PUBLIC_PRIMARY_COLOR, PUBLIC_SECONDARY_COLOR } from '$env/static/public';
 	import en from '$lib/langs/en.json';
 
 	addMessages('en', en);
@@ -12,7 +12,20 @@
 		fallbackLocale: 'en',
 		initialLocale: getLocaleFromNavigator()
 	});
+
+	const themeOverrides = [
+		PUBLIC_PRIMARY_COLOR && `--color-primary: ${PUBLIC_PRIMARY_COLOR};`,
+		PUBLIC_SECONDARY_COLOR && `--color-secondary: ${PUBLIC_SECONDARY_COLOR};`
+	]
+		.filter(Boolean)
+		.join(' ');
+
+	const themeOverrideStyle = themeOverrides ? `<style>:root { ${themeOverrides} }</style>` : '';
 </script>
 
+<svelte:head>
+	{@html themeOverrideStyle}
+</svelte:head>
+
 <slot />
 
diff --git a/src/routes/VerticalLayout/Footer.svelte b/src/routes/VerticalLayout/Footer.svelte
index 74ecb574..988ae9e1 100644
--- a/src/routes/VerticalLayout/Footer.svelte
+++ b/src/routes/VerticalLayout/Footer.svelte
@@ -3,17 +3,13 @@
     import { _ } from 'svelte-i18n';
 </script>
 
-<footer class="footer">
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-sm-6">
-                {new Date().getFullYear()} © {PUBLIC_COMPANY_NAME}
-            </div>
-            <div class="col-sm-6">
-                <div class="text-sm-end d-none d-sm-block">
-                    {$_('Design & Developed by open source community')}
-                </div>
-            </div>
+<footer
+    class="footer absolute bottom-0 left-0 right-0 h-[var(--footer-height)] bg-[#f2f2f5] px-3 py-5 text-sm text-muted dark:bg-gray-900"
+>
+    <div class="mx-auto flex w-full max-w-full flex-col items-center gap-2 sm:flex-row sm:justify-between">
+        <div>{new Date().getFullYear()} © {PUBLIC_COMPANY_NAME}</div>
+        <div class="hidden sm:block">
+            {$_('Design & Developed by open source community')}
         </div>
     </div>
 </footer>
\ No newline at end of file
diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
index f072f228..dd7fe8e2 100644
--- a/src/routes/VerticalLayout/Header.svelte
+++ b/src/routes/VerticalLayout/Header.svelte
@@ -18,8 +18,7 @@
 	 * }}
 	 */
 	let {
-		user = undefined,
-		toggleRightBar = () => {}
+		user = undefined
 	} = $props();
 
 	let searchText = $state('');
@@ -77,33 +76,26 @@
 	};
 </script>
 
-<header id="page-topbar">
-	<div class="navbar-header">
-		<div class="d-flex align-items-center">
+<header
+	id="page-topbar"
+	class="fixed inset-x-0 top-0 z-[1002] h-[var(--header-height)] bg-white shadow-sm dark:bg-gray-800"
+>
+	<div class="mx-auto flex h-full items-center justify-between pr-2">
+		<div class="flex items-center">
 			<!-- LOGO -->
-			<div class="navbar-brand-box">
-				<a href="page/dashboard" class="logo logo-dark">
-					<span class="logo-sm">
-						<img src={PUBLIC_LOGO_URL} alt="" height="22" style="max-height: 22px; width: auto;" />
-					</span>
-					<span class="logo-lg">
-						<img src={PUBLIC_LOGO_URL} alt="" height="38" style="max-height: 38px; width: auto;" />
-					</span>
-				</a>
-
-				<a href="page/dashboard" class="logo logo-light">
-					<span class="logo-sm">
-						<img src={PUBLIC_LOGO_URL} alt="" height="22" style="max-height: 22px; width: auto;" />
-					</span>
-					<span class="logo-lg">
-						<img src={PUBLIC_LOGO_URL} alt="" height="38" style="max-height: 38px; width: auto;" />
-					</span>
+			<div class="flex h-[var(--header-height)] w-auto shrink-0 items-center justify-center px-3 transition-[width] duration-200 lg:w-[var(--sidebar-width)] lg:px-6 vertical-collpsed:lg:w-[var(--sidebar-collapsed-width)] vertical-collpsed:lg:px-2">
+				<a href="page/dashboard" aria-label="Home" class="block">
+					<img
+						src={PUBLIC_LOGO_URL}
+						alt=""
+						class="h-[38px] w-auto max-w-full vertical-collpsed:h-[22px]"
+					/>
 				</a>
 			</div>
 
 			<button
 				type="button"
-				class="btn btn-sm px-3 font-size-16 header-item waves-effect"
+				class="ml-1 inline-flex h-10 w-10 items-center justify-center rounded text-base text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
 				id="vertical-menu-btn"
 				aria-label="Toggle sidebar"
 				onclick={() => toggleSideBar()}
@@ -112,23 +104,23 @@
 			</button>
 
 			<!-- App Search-->
-			<form class="app-search d-none d-lg-block">
-				<div class="position-relative">
+			<form class="ml-2 hidden lg:block">
+				<div class="relative">
 					<input
 						type="text"
-						class="form-control"
+						class="h-9 w-60 rounded border border-transparent bg-[#f3f3f9] py-1 pl-9 pr-3 text-sm text-gray-700 placeholder:text-gray-400 focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary dark:bg-gray-700 dark:text-gray-100"
 						placeholder="{$_('Search')}..."
 						maxlength={500}
 						bind:value={searchText}
 						onkeydown={e => search(e)}
 					/>
-					<span class="bx bx-search-alt"></span>
+					<span class="bx bx-search-alt absolute left-3 top-1/2 -translate-y-1/2 text-base text-gray-400"></span>
 				</div>
 			</form>
 		</div>
-		<div class="d-flex align-items-center">
+		<div class="flex items-center">
 			{#if tenantName}
-				<span class="ms-2 me-2 align-self-center text-muted">Tenant: {tenantName}</span>
+				<span class="mx-2 hidden self-center text-sm text-muted sm:inline">Tenant: {tenantName}</span>
 			{/if}
 			<LanguageDropdown />
 			<FullScreenDropdown />
@@ -137,3 +129,5 @@
 		</div>
 	</div>
 </header>
+
+
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
index bd8cdefc..bf319780 100644
--- a/src/routes/VerticalLayout/Index.svelte
+++ b/src/routes/VerticalLayout/Index.svelte
@@ -48,14 +48,14 @@
 
 <GlobalHeader bind:isLoading={isLoading} bind:hasError={hasError} />
 
-<div id="layout-wrapper">
+<div id="layout-wrapper" class="min-h-screen">
 	<Header {user} toggleRightBar={() => toggleRightBar()} />
 	{#if menu}
-	<Sidebar {menu} />
+		<Sidebar {menu} />
 	{/if}
-	<div class="main-content">
-		<div class="page-content">
-			<div class="container-fluid" style="position: relative;">
+	<div class="main-content relative min-h-screen lg:ml-[var(--sidebar-width)] transition-[margin] duration-200">
+		<div class="page-content pt-[calc(var(--header-height)+1.5rem)] pb-[var(--footer-height)] px-3 sm:px-4 lg:px-6 min-h-screen">
+			<div class="relative mx-auto w-full max-w-full">
 				<LoadingToComplete
 					spinnerSize={50}
 					{isLoading}
@@ -69,3 +69,5 @@
 
 	<RightSidebar closebar={() => closebar()} />
 </div>
+
+
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 6a71d73b..9cc3e981 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/src/routes/VerticalLayout/Sidebar.svelte
@@ -276,19 +276,23 @@
 	}
 </script>
 
-<div class="vertical-menu">
-	<div class="h-100" id="vertical-menu">
+<div
+	class="vertical-menu fixed bottom-0 left-0 top-[var(--header-height)] z-[1001] w-[var(--sidebar-width)] bg-[var(--sidebar-bg)] shadow-sm transition-[width,transform] duration-200 dark:bg-gray-800"
+>
+	<div class="h-full" id="vertical-menu">
 		<!--- Sidemenu -->
-		<div id="sidebar-menu">
+		<div id="sidebar-menu" class="pt-2.5 pb-8">
 			<!-- Left Menu Start -->
-			<ul class="metismenu list-unstyled" id="side-menu">
+			<ul class="metismenu m-0 list-none p-0" id="side-menu">
 				{#each menu as item}
 					{#if item.isHeader}
-						<li class="menu-title" key="t-menu">{$_(item.label)}</li>
+						<li class="menu-title px-5 py-3 text-[11px] font-semibold uppercase tracking-wider text-[var(--sidebar-menu-title-color)]" key="t-menu">
+							{$_(item.label)}
+						</li>
 					{:else if item.subMenu}
 						<li>
 							<!-- svelte-ignore a11y_invalid_attribute -->
-							<a href="javascript:void(0);" class="has-arrow waves-effect clickable">
+							<a href="javascript:void(0);" class="has-arrow clickable">
 								<i class={item.icon}></i>
 								<span>{$_(item.label)}</span>
 							</a>
@@ -297,7 +301,7 @@
 									{#if subMenu.isChildItem}
 										<li>
 											<!-- svelte-ignore a11y_invalid_attribute -->
-											<a href="javascript:void(0);" class="has-arrow waves-effect clickable">
+											<a href="javascript:void(0);" class="has-arrow clickable">
 												<span>{$_(subMenu.label)}</span>
 											</a>
 											<ul class="sub-menu mm-collapse">
@@ -325,7 +329,7 @@
 					{:else}
 						<li>
 							<!-- svelte-ignore a11y_invalid_attribute -->
-							<a href="javascript:void(0);" class="waves-effect clickable" id={getCleanUrl(item.link)} onclick={() => goToPage(item.link)}>
+							<a href="javascript:void(0);" class="clickable" id={getCleanUrl(item.link)} onclick={() => goToPage(item.link)}>
 								<i class={item.icon}></i>
 								<span>{$_(item.label)}</span>
 							</a>
@@ -336,3 +340,5 @@
 		</div>
 	</div>
 </div>
+
+
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 73515374..a4ec62a1 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -21,39 +21,36 @@
     });
 </script>
 
-<div class="container-fluid">
-    <div class="row">
-        <div class="col-12">
-            <div style="margin-top: 10vh; margin-left:10vw;">
-                {#each agents as agent}
-                <div>
-                    <input
-                        class="form-check-input m-1"
-                        type="radio"
-                        name="agents"
-                        id={agent.id}
-                        value={agent.id}
-                        checked={agentId == agent.id}
-                        onclick={() => agentId = agent.id}
-                    />
-                    <label class="form-check-label" for={agent.id}>
-                        {agent.name}
-                    </label>
-                    <div class="mx-4">{agent.description}</div>
-                </div>
-                {/each}
+<div class="cs-page">
+    <div class="cs-block">
+        <div class="cs-list">
+            {#each agents as agent}
+            <div class="cs-item" class:cs-item-selected={agentId == agent.id}>
+                <input
+                    class="cs-radio"
+                    type="radio"
+                    name="agents"
+                    id={agent.id}
+                    value={agent.id}
+                    checked={agentId == agent.id}
+                    onclick={() => agentId = agent.id}
+                />
+                <label class="cs-label" for={agent.id}>
+                    {agent.name}
+                </label>
+                <div class="cs-desc">{agent.description}</div>
             </div>
+            {/each}
         </div>
     </div>
-    <div class="row text-center">
-        <div class="col">
-            <p class="section-subtitle text-muted text-center pt-4 font-secondary">Select a bot you want to start chatting with and click the Start button.</p>
-            <div class="d-flex justify-content-center">
-                <a href="chat/{agentId}" class="btn btn-primary">
-                    <i class="mdi mdi-chat"></i>
-                    <span>Start Conversation</span>
-                </a>
-            </div>
+    <div class="cs-footer">
+        <p class="cs-hint">Select a bot you want to start chatting with and click the Start button.</p>
+        <div class="cs-cta-wrap">
+            <a href="chat/{agentId}" class="cs-start-btn">
+                <i class="mdi mdi-chat"></i>
+                <span>Start Conversation</span>
+            </a>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index 0ab1deeb..8ebb070d 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -50,14 +50,15 @@
     });
 </script>
 
-<div class="container-fluid">
-    <div class="row text-center">
-        <div class="col" style="padding: 50px;">
-            <div class="spinner-grow text-primary m-1" role="status" style="padding: 50px;">
-                <span class="sr-only">Loading...</span>
-            </div>
-            <h3>Initializing a conversation, wait a moment please...</h3>
-            <a href={`chat/${agentId}/${conversationId}`}>Click here if the browser doesn't redirect correctly.</a>
+<div class="ci-page">
+    <div class="ci-content">
+        <div class="ci-spinner" role="status">
+            <span class="ci-sr-only">Loading...</span>
         </div>
+        <h3 class="ci-title">Initializing a conversation, wait a moment please...</h3>
+        <a class="ci-link" href={`chat/${agentId}/${conversationId}`}>
+            Click here if the browser doesn't redirect correctly.
+        </a>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte b/src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte
index 6e64cfe6..94ef64a5 100644
--- a/src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/agent-info/chat-agent-info.svelte
@@ -9,29 +9,29 @@
 	let { agent } = $props();
 </script>
 
-<div>
-    <div class="chat-agent-row">
+<div class="cai-wrapper">
+    <div class="cai-row">
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <h3
-            class="text-primary fw-bold"
+            class="cai-name"
             onclick={() => directToAgentPage(agent?.id)}
         >
-            <span class="clickable">{agent?.name || ''}</span>
+            <span class="cai-name-link">{agent?.name || ''}</span>
         </h3>
     </div>
-    <div class="chat-agent-row">
-        <div class="text-secondary">
+    <div class="cai-row">
+        <div class="cai-desc">
             <span>{agent?.description || ''}</span>
         </div>
     </div>
-    <div class="chat-agent-row">
-        <div>
+    <div class="cai-row">
+        <div class="cai-meta">
             <span>{agent?.llm_config?.provider || ''}{agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
         </div>
     </div>
-    <div class="chat-agent-row">
-        <div>
+    <div class="cai-row">
+        <div class="cai-meta">
             {#if !!agent?.profiles}
             <span>{agent?.profiles?.length || 0} {agent?.profiles?.length > 1 ? 'profiles' : 'profile'}{', '}</span>
             {/if}
@@ -46,4 +46,5 @@
             {/if}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index f1403de2..23d5933a 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -27,11 +27,10 @@
 		getConversationFiles,
 		uploadConversationFiles,
 		getAddressOptions,
-		pinConversationToDashboard,
 		stopStreaming as stopStreamingApi,
 	} from '$lib/services/conversation-service.js';
-	import { 
-		PUBLIC_LIVECHAT_ENTRY_ICON, 
+	import {
+		PUBLIC_LIVECHAT_ENTRY_ICON,
 		PUBLIC_LIVECHAT_VOICE_ENABLED,
 		PUBLIC_LIVECHAT_SPEAKER_ENABLED,
 		PUBLIC_LIVECHAT_FILES_ENABLED,
@@ -56,7 +55,7 @@
 	import { webSpeech } from '$lib/services/web-speech';
 	import LocalStorageManager from '$lib/helpers/utils/storage-manager';
 	import { clickoutsideDirective } from '$lib/helpers/directives';
-	import { delay } from '$lib/helpers/utils/common';
+	import { delay, formatNumber } from '$lib/helpers/utils/common';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
@@ -73,7 +72,7 @@
 	import ChatBigMessage from './chat-util/chat-big-message.svelte';
 	import PersistLog from './persist-log/persist-log.svelte';
 	import InstantLog from './instant-log/instant-log.svelte';
-	
+
 
 	const options = {
 		scrollbars: {
@@ -229,7 +228,7 @@
 	setContext('chat-window-context', {
 		autoScrollToBottom: autoScrollToBottom
 	});
-	
+
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
 		// @ts-ignore
@@ -245,7 +244,7 @@
 		handlePaneResize();
 		const messageDraft = getMessageDraft();
 		text = messageDraft || '';
-		
+
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromAssistant = onMessageReceivedFromAssistant;
@@ -255,7 +254,7 @@
 		signalr.onReceiveLlmStreamMessage = onReceiveLlmStreamMessage;
 		signalr.afterReceiveLlmStreamMessage = afterReceiveLlmStreamMessage;
 		signalr.onIndicationReceived = onIndicationReceived;
-		
+
 		signalr.onNotificationGenerated = onNotificationGenerated;
 		signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
 		signalr.onConversationStateLogGenerated = onConversationStateLogGenerated;
@@ -267,7 +266,7 @@
 		await signalr.start(page.params.conversationId);
 
 		scrollbars = [
-			document.querySelector('.chat-scrollbar')
+			document.querySelector('.cb-msgs-scroll')
 		].filter(Boolean);
 		refresh();
 
@@ -536,7 +535,7 @@
 				});
 			}
 		}
-		
+
 		isStreaming = false;
 		latestStateLog = message.states;
 		refresh();
@@ -562,7 +561,7 @@
 				is_appended: true
 			});
 		}
-		
+
 		refresh();
 
 		if (isFrame) {
@@ -589,7 +588,7 @@
 		refresh();
 	}
 
-	
+
 	/** @param {import('$conversationTypes').ChatResponseModel} message */
 	function onReceiveLlmStreamMessage(message) {
 		isThinking = false;
@@ -764,13 +763,6 @@
 		window.location.href = url;
 	}
 
-	function pinDashboard() {
-		const agentId = page.params.agentId;
-		const convId = page.params.conversationId;
-		// @ts-ignore
-		pinConversationToDashboard(agentId, convId).then().finally();
-	}
-
 	function handleSaveKnowledge() {
 		sendChatMessage("Save knowledge");
 	}
@@ -877,7 +869,7 @@
 			} else {
 				webSpeech.abort();
 			}
-			
+
 		}
 	}
 
@@ -952,7 +944,7 @@
 		text = option;
 	}
 
-	/** 
+	/**
 	 * @param {string} title
 	 * @param {string} payload
 	 */
@@ -1137,6 +1129,7 @@
 			if (result.value) {
 				userAddStates = [];
 				conversationUserStateStore.resetOne(page.params.conversationId);
+				isOpenUserAddStateModal = false;
 			}
 		});
 	}
@@ -1306,7 +1299,7 @@
 				wrapperName: contentLogWrapper
 			});
 		}
-		
+
 		const stateLogElm = document.querySelector(`#state-log-${messageId}`);
 		if (isLoadPersistLog && !!stateLogElm) {
 			elements.push({
@@ -1388,7 +1381,7 @@
 		if (message?.rich_content?.message?.rich_type === RichType.ProgramCode) {
 			text = message?.rich_content?.message?.code_script || text;
 		}
-		
+
 		navigator.clipboard.writeText(text).then(() => {
 			setTimeout(() => {
 				copyClicked = false;
@@ -1521,7 +1514,7 @@
 
 		const candidates = dialogs.filter(x => x.message_id === editBotMsg?.message.message_id && x.sender?.role === editBotMsg?.message.sender?.role);
 		const innerIdx = candidates.findIndex(x => x.uuid === editBotMsg?.message.uuid);
-		
+
 		/** @type {import('$conversationTypes').UpdateBotMessageRequest} */
 		const request = {
 			message: editBotMsg.message,
@@ -1622,7 +1615,7 @@
 
 <DialogModal
 	title={'Tags'}
-	size={'md'}
+	size={'xl'}
 	isOpen={isOpenTagModal}
 	closeable
 	toggleModal={() => toggleTagModal()}
@@ -1631,7 +1624,7 @@
 	confirm={() => updateChatTags()}
 	close={() => toggleTagModal()}
 >
-	<div class="conv-tags-container">
+	<div class="cb-tags-container">
 		{#each convTags as tag, idx}
 			<Label
 				text={tag}
@@ -1642,9 +1635,9 @@
 			/>
 		{/each}
 	</div>
-	<div class="conv-tag-add">
+	<div class="cb-tag-add">
 		<input
-			class="form-control form-control-sm"
+			class="cb-tag-input"
 			type="text"
 			placeholder="Enter new tag..."
 			maxlength={50}
@@ -1652,7 +1645,7 @@
 			onkeydown={e => { if (e.key === 'Enter') addTag(); }}
 		/>
 		<button
-			class="btn btn-primary btn-sm"
+			class="cb-tag-add-btn"
 			aria-label="Add tag"
 			disabled={!_.trim(newTagText)}
 			onclick={() => addTag()}
@@ -1673,11 +1666,11 @@
 	close={() => toggleNotificationModal()}
 >
 	{#snippet titleIcon()}
-		<div class="color: text-warning">
+		<div class="cb-title-icon cb-text-warning">
 			<i class="mdi mdi-bell-ring"></i>
 		</div>
 	{/snippet}
-	<div class="chat-notification">
+	<div class="cb-notification">
 		{notificationText}
 	</div>
 </DialogModal>
@@ -1693,13 +1686,13 @@
 	disableConfirmBtn={!_.trim(editText)}
 >
 	<textarea
-		class="form-control chat-input"
+		class="cb-modal-textarea"
 		rows="5"
 		maxlength={maxTextLength}
 		bind:value={editText}
 		placeholder="Enter Message..."
 	></textarea>
-	<div class="text-secondary text-end text-count">
+	<div class="cb-modal-counter">
 		<div>{`${(editText?.length || 0)}/${maxTextLength}`}</div>
 	</div>
 </DialogModal>
@@ -1714,15 +1707,15 @@
 	disableConfirmBtn={!_.trim(bigText)}
 >
 	<textarea
-		class="form-control chat-input"
+		class="cb-modal-textarea"
 		rows="25"
 		maxlength={maxTextLength}
 		bind:value={bigText}
 		placeholder="Enter Message..."
 		oninput={handleInputBigText}
 	></textarea>
-	<div class="text-secondary text-end text-count">
-		<div>{`${(bigText?.length || 0)}/${maxTextLength}`}</div>
+	<div class="cb-modal-counter">
+		<div>{`${formatNumber(bigText?.length || 0)}/${formatNumber(maxTextLength)}`}</div>
 	</div>
 </DialogModal>
 
@@ -1736,19 +1729,20 @@
 	disableConfirmBtn={!_.trim(botText)}
 >
 	<textarea
-		class="form-control chat-input"
+		class="cb-modal-textarea"
 		rows="10"
 		maxlength={maxTextLength}
 		bind:value={botText}
 		placeholder="Enter Message...">
 	</textarea>
-	<div class="text-secondary text-end text-count">
-		<div>{`${(botText?.length || 0)}/${maxTextLength}`}</div>
+	<div class="cb-modal-counter">
+		<div>{`${formatNumber(botText?.length || 0)}/${formatNumber(maxTextLength)}`}</div>
 	</div>
 </DialogModal>
 
 <PlainModal
 	title={'Code script'}
+	size={'3xl'}
 	isOpen={isOpenCodeScriptModal}
 	toggleModal={() => toggleCodeScriptModal()}
 >
@@ -1759,21 +1753,12 @@
 	/>
 </PlainModal>
 
-<StateModal
-	isOpen={isOpenUserAddStateModal}
-	size={'2xl'}
-	bind:states={userAddStates}
-	requireActiveRounds
-	toggleModal={() => toggleUserAddStateModal()}
-	confirm={() => handleConfirmUserAddStates()}
-	cancel={() => toggleUserAddStateModal()}
-/>
 
 <HeadTitle title="Chat" addOn='' />
-<div class="d-lg-flex">
+<div class="cb-page-flex">
 	<Splitpanes on:resize={() => handlePaneResize()}>
 		{#if isLoadInstantLog}
-		<Pane size={30} minSize={25} maxSize={40} >
+		<Pane size={25} minSize={15} maxSize={40} >
 			<InstantLog
 				bind:msgStateLogs={msgStateLogs}
 				bind:agentQueueLogs={agentQueueLogs}
@@ -1785,23 +1770,23 @@
 		{/if}
 		<Pane minSize={30}>
 			<div style="height: 100vh;">
-				<div class="card mb-0" style="height: 100vh;">
-					<div class="border-bottom chat-head">
-						<div class="row chat-row">
-							<div class="col-md-4 col-4 chat-head-info">
-								<div class="chat-head-agent">
+				<div class="cb-panel-card" style="height: 100vh;">
+					<div class="cb-head">
+						<div class="cb-head-row">
+							<div class="cb-head-left">
+								<div class="cb-head-agent">
 									{#if agent?.icon_url}
-									<div class="line-align-center">
-										<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
+									<div class="cb-vcenter">
+										<img class="cb-head-agent-icon" src={agent.icon_url} alt="">
 									</div>
 									{/if}
-									<div class="chat-head-agent-name line-align-center ellipsis">{agent?.name || 'Unkown'}</div>
+									<div class="cb-head-agent-name cb-vcenter cb-ellipsis">{agent?.name || 'Unkown'}</div>
 								</div>
-								<div class="text-muted mb-0 chat-head-user">
+								<div class="cb-head-user">
 									<div>
-										<i class="mdi mdi-circle text-success align-middle"></i>
+										<i class="mdi mdi-circle cb-text-success cb-align-middle"></i>
 									</div>
-									<div class="ellipsis">
+									<div class="cb-ellipsis">
 										<span>
 											{conversationUser?.full_name || conversationUser?.user_name
 											|| currentUser?.full_name || currentUser?.user_name || ''}</span>
@@ -1809,12 +1794,12 @@
 								</div>
 							</div>
 
-							<div class="col-md-8 col-8">
-								<div class="user-chat-nav user-chat-nav-flex mb-0" style={`padding-top: ${!isFrame ? '5px' : '0px'};`}>
+							<div class="cb-head-right">
+								<div class="cb-head-actions" style={`padding-top: ${!isFrame ? '5px' : '0px'};`}>
 									{#if PUBLIC_DEBUG_MODE === 'true' && isFrame}
-										<div class="">
+										<div>
 											<button
-												class="btn btn-secondary btn-rounded btn-sm"
+												class="cb-icon-btn cb-icon-btn-secondary"
 												aria-label="Open full screen"
 												onclick={() => openFullScreen()}
 											>
@@ -1822,10 +1807,10 @@
 											</button>
 										</div>
 									{/if}
-									<div class="">
+									<div>
 										{#if !isLite}
 										<div
-											class="dropdown"
+											class="cb-dropdown"
 											use:clickoutsideDirective
 											onclickoutside={(/** @type {any} */ e) => {
 												if (!e.detail.currentNode?.contains(e.detail.targetNode)) {
@@ -1834,23 +1819,22 @@
 												}
 											}}
 										>
-											<button class="nav-btn dropdown-toggle" type="button" aria-expanded={isHeaderMenuOpen} aria-label="Open dots" onclick={() => toggleHeaderMenu()}>
+											<button class="cb-nav-btn" type="button" aria-expanded={isHeaderMenuOpen} aria-label="Open dots" onclick={() => toggleHeaderMenu()}>
 												<i class="bx bx-dots-horizontal-rounded"></i>
 											</button>
-											<ul class="dropdown-menu dropdown-menu-end" class:show={isHeaderMenuOpen} style="right: 0; left: auto;">
+											<ul class="cb-menu cb-menu-end" class:show={isHeaderMenuOpen} style="right: 0; left: auto;">
 												{#if !isLoadPersistLog || !isLoadInstantLog}
-													<li><button class="dropdown-item" type="button" onclick={() => openLogs()}>View Log</button></li>
+													<li><button class="cb-menu-item" type="button" onclick={() => openLogs()}>View Log</button></li>
 												{/if}
-												{#if !isLoadInstantLog || !isOpenUserAddStateModal}
-												<li class="dropstart state-menu">
-													<button class="dropdown-item dropdown-toggle" type="button" aria-expanded={isHeaderStatesOpen} onclick={() => isHeaderStatesOpen = !isHeaderStatesOpen}>
+												<li class="cb-state-menu">
+													<button class="cb-menu-item cb-menu-item-toggle" type="button" aria-expanded={isHeaderStatesOpen} onclick={() => isHeaderStatesOpen = !isHeaderStatesOpen}>
 														States
 													</button>
-													<ul class="dropdown-menu" class:show={isHeaderStatesOpen} style="left: -160px !important;">
+													<ul class="cb-menu" class:show={isHeaderStatesOpen} style="left: -160px !important;">
 														{#if !isOpenUserAddStateModal}
 														<li>
 															<button
-																class="dropdown-item"
+																class="cb-menu-item"
 																type="button"
 																disabled={disableAction}
 																onclick={() => toggleUserAddStateModal()}
@@ -1861,7 +1845,7 @@
 														{/if}
 														<li>
 															<button
-																class="dropdown-item"
+																class="cb-menu-item"
 																type="button"
 																disabled={disableAction}
 																onclick={() => clearUserAddStates()}
@@ -1871,12 +1855,11 @@
 														</li>
 													</ul>
 												</li>
-												{/if}
 
 												{#if ADMIN_ROLES.includes(currentUser?.role || '')}
 													<li>
 														<button
-															class="dropdown-item"
+															class="cb-menu-item"
 															type="button"
 															disabled={disableAction}
 															onclick={() => toggleTagModal()}
@@ -1886,32 +1869,30 @@
 													</li>
 												{/if}
 												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
-													<li><button class="dropdown-item" type="button" onclick={() => handleSaveKnowledge()}>Save Knowledge</button></li>
+													<li><button class="cb-menu-item" type="button" onclick={() => handleSaveKnowledge()}>Save Knowledge</button></li>
 												{/if}
-												<li><button class="dropdown-item" type="button" onclick={() => pinDashboard()}>Pin to Dashboard</button></li>
 											</ul>
 										</div>
 										{:else}
 										<button
-											class={`btn btn-rounded btn-sm btn-primary large-btn`}
+											class={`cb-icon-btn cb-icon-btn-primary cb-icon-btn-lg`}
 											aria-label="Open new conversation"
 											disabled={disableAction}
 											onclick={() => handleNewConversation()}
 										>
-											<i 
-												class="mdi mdi-plus"
-												style="font-size: 15px;"
+											<i
+												class="mdi mdi-plus cb-icon-lg"
 												data-bs-toggle="tooltip"
 												data-bs-placement="top"
 												title="New Conversation"></i>
 										</button>
 										{/if}
 									</div>
-									
-									<div class="btn-pair">
+
+									<div class="cb-btn-pair">
 										{#if !isLite}
 										<button
-											class={`btn btn-rounded btn-sm btn-primary btn-left`}
+											class={`cb-pill-btn cb-pill-btn-primary cb-pill-btn-left`}
 											disabled={disableAction}
 											onclick={() => handleNewConversation()}
 										>
@@ -1921,17 +1902,17 @@
 												title="New Conversation"
 											>
 												<i class="mdi mdi-plus"></i>
-												<span class="me-2">New</span>
+												<span class="cb-pill-btn-label">New</span>
 											</span>
 										</button>
 										{/if}
 										<button
-											class={`btn btn-rounded btn-sm btn-danger ${!isLite ? 'btn-right' : ''}`}
+											class={`cb-pill-btn cb-pill-btn-danger ${!isLite ? 'cb-pill-btn-right' : ''}`}
 											disabled={disableAction}
 											onclick={() => endChat()}
 										>
 											{#if !isLite}
-											<span class="me-2">End</span>
+											<span class="cb-pill-btn-label">End</span>
 											{/if}
 											<i class="mdi mdi-window-close"></i>
 										</button>
@@ -1941,21 +1922,32 @@
 						</div>
 					</div>
 
-					<div class={`chat-scrollbar chat-content scroll-bottom-to-top ${!loadEditor ? 'chat-content-expand' : ''}`}>
-						<div class="chat-conversation p-3">
-							<ul class="list-unstyled mb-0">
+				<StateModal
+					isOpen={isOpenUserAddStateModal}
+					inline
+					bind:states={userAddStates}
+					requireActiveRounds
+					toggleModal={() => toggleUserAddStateModal()}
+					confirm={() => handleConfirmUserAddStates()}
+					cancel={() => toggleUserAddStateModal()}
+				/>
+
+				<div class={`cb-msgs-scroll cb-msgs-content cb-msgs-scroll-rev ${!loadEditor ? 'cb-msgs-content-expand' : ''}`}>
+						<div class="cb-conv">
+							<ul class="cb-conv-list">
 								{#each Object.entries(groupedDialogs) as [createDate, dialogGroup]}
 									<li>
-										<div class="chat-day-title">
-											<span class="title">{createDate}</span>
+										<div class="cb-day-title">
+											<span class="cb-day-title-text">{createDate}</span>
 										</div>
 									</li>
 									{#each dialogGroup as message}
-										<li id={'test_k' + message.message_id} class:right={!BOT_SENDERS.includes(message.sender?.role)}>
-											<div class="conv-msg-container">
+										<li id={'test_k' + message.message_id} class:cb-conv-right={!BOT_SENDERS.includes(message.sender?.role)}>
+											<div class="cb-msg-row">
 												{#if !BOT_SENDERS.includes(message.sender?.role)}
-												<div class="msg-container">
+												<div class="cb-msg-stack">
 													<div
+														class="cb-user-msg-link"
 														tabindex="0"
 														aria-label="user-msg-to-log"
 														role="link"
@@ -1963,14 +1955,14 @@
 														onclick={() => directToLog(message.message_id)}
 													>
 														<div
-															class="ctext-wrap user-msg bg-primary" 
-															class:clickable={!isLite && isLoadPersistLog}
+															class="cb-bubble cb-bubble-user"
+															class:cb-clickable={!isLite && isLoadPersistLog}
 															id={`user-msg-${message.message_id}`}
 														>
-															<div class="text-start fw-bold text-white">{@html replaceNewLine(message.text)}</div>
+															<div class="cb-bubble-text-user">{@html replaceNewLine(message.text)}</div>
 														</div>
-														<p class="chat-time mb-0 float-end">
-															<i class="bx bx-time-five align-middle me-1"></i>
+														<p class="cb-chat-time">
+															<i class="bx bx-time-five cb-align-middle cb-chat-time-icon"></i>
 															{utcToLocal(message.created_at, 'h:mm:ss A')}
 														</p>
 													</div>
@@ -1988,7 +1980,7 @@
 												</div>
 													{#if !isLite}
 														<div
-															class="dropdown"
+															class="cb-dropdown"
 															use:clickoutsideDirective
 															onclickoutside={(/** @type {any} */ e) => {
 																if (!e.detail.currentNode?.contains(e.detail.targetNode)) {
@@ -1998,78 +1990,75 @@
 																}
 															}}
 														>
-															<button class="dropdown-toggle btn btn-link p-0 border-0" type="button" aria-expanded={openMsgActionId === message.message_id} aria-label="Message actions" disabled={isSendingMsg || isThinking || disableAction} onclick={() => { openMsgActionId = openMsgActionId === message.message_id ? '' : message.message_id; }}>
+															<button class="cb-msg-action-btn" type="button" aria-expanded={openMsgActionId === message.message_id} aria-label="Message actions" disabled={isSendingMsg || isThinking || disableAction} onclick={() => { openMsgActionId = openMsgActionId === message.message_id ? '' : message.message_id; }}>
 																<i class="bx bx-dots-vertical-rounded"></i>
 															</button>
-															<ul class="dropdown-menu dropdown-menu-end" class:show={openMsgActionId === message.message_id} style="right: 0; left: auto;">
-																<li><button class="dropdown-item" type="button" onclick={() => { openMsgActionId = ''; editMessage(message); }}>Edit</button></li>
-																<li><button class="dropdown-item" type="button" onclick={(e) => { openMsgActionId = ''; resendMessage(e, message); }}>Resend</button></li>
-																<li><button class="dropdown-item" type="button" onclick={(e) => { openMsgActionId = ''; deleteMessage(e, message.message_id); }}>Delete</button></li>
+															<ul class="cb-menu cb-menu-end cb-msg-menu" class:show={openMsgActionId === message.message_id} style="right: 0; left: auto;">
+																<li><button class="cb-menu-item" type="button" onclick={() => { openMsgActionId = ''; editMessage(message); }}>Edit</button></li>
+																<li><button class="cb-menu-item" type="button" onclick={(e) => { openMsgActionId = ''; resendMessage(e, message); }}>Resend</button></li>
+																<li><button class="cb-menu-item" type="button" onclick={(e) => { openMsgActionId = ''; deleteMessage(e, message.message_id); }}>Delete</button></li>
 															</ul>
 														</div>
 													{/if}
 												{:else}
-												<div class="cicon-wrap align-content-end">
+												<div class="cb-cicon cb-cicon-end">
 													{#if message.sender.role == UserRole.Client}
-														<img src="images/users/user-dummy.jpg" class="rounded-circle avatar-sm" style="margin-bottom: -15px;" alt="avatar">
+														<img src="images/users/user-dummy.jpg" class="cb-avatar" style="margin-bottom: -15px;" alt="avatar">
 													{:else}
 														{@const isShowIcon = (message?.rich_content?.message?.text || message?.text || message?.thought?.thinking_text) || message?.uuid !== lastBotMsg?.uuid}
 														<img
-															class="rounded-circle avatar-sm"
+															class="cb-avatar"
 															style={`display: ${isShowIcon ? 'block' : 'none'}; margin-bottom: -15px;`}
 															alt="avatar"
 															src={PUBLIC_LIVECHAT_ENTRY_ICON}
 														>
 													{/if}
 												</div>
-												<div class="msg-container">
-													<RcMessage containerClasses={'bot-msg'} markdownClasses={'markdown-dark text-dark'} message={message} isStreaming={isStreaming || isThinking} />
+												<div class="cb-msg-stack">
+													<RcMessage markdownClasses={'markdown-dark cb-md-dark'} message={message} isStreaming={isStreaming || isThinking} />
 													{#if message?.message_id === lastBotMsg?.message_id && message?.uuid === lastBotMsg?.uuid}
-														{@const isStreamEnd = (message?.rich_content?.message?.text || message?.text) && !isStreaming && !isHandlingQueue && !isThinking}	
-														<div style={`display: ${isStreamEnd ? 'flex' : 'none'}; gap: 10px; flex-wrap: wrap; margin-top: 5px;`}>
+														{@const isStreamEnd = (message?.rich_content?.message?.text || message?.text) && !isStreaming && !isHandlingQueue && !isThinking}
+														<div class="cb-msg-actions" style={`display: ${isStreamEnd ? 'flex' : 'none'};`}>
 															{#if PUBLIC_LIVECHAT_SPEAKER_ENABLED === 'true'}
 																<AudioSpeaker
-																	id={message?.message_id} 
+																	id={message?.message_id}
 																	text={message?.rich_content?.message?.text || message?.text}
 																/>
 															{/if}
 															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && AgentExtensions.trainable(agent)}
 																{#if message?.function}
-																	<div class="line-align-center" style="font-size: 17px;">
+																	<div class="cb-vcenter cb-msg-action">
 																		<!-- svelte-ignore a11y_click_events_have_key_events -->
 																		<!-- svelte-ignore a11y_no_static_element_interactions -->
 																		<div
-																			class="clickable"
-																			style="height: 95%;"
+																			class="cb-clickable cb-msg-action-icon"
 																			data-bs-toggle="tooltip"
 																			data-bs-placement="top"
 																			title="Like"
 																			onclick={e => likeMessage(e, message)}
 																		>
-																			<i class="mdi mdi-thumb-up-outline text-primary"></i>
+																			<i class="mdi mdi-thumb-up-outline cb-text-primary"></i>
 																		</div>
 																	</div>
 																{/if}
-																<div class="line-align-center" style="font-size: 17px;">
+																<div class="cb-vcenter cb-msg-action">
 																	<!-- svelte-ignore a11y_click_events_have_key_events -->
 																	<!-- svelte-ignore a11y_no_static_element_interactions -->
 																	<div
-																		class="clickable"
-																		style="height: 80%;"
+																		class="cb-clickable cb-msg-action-icon cb-msg-action-icon-edit"
 																		data-bs-toggle="tooltip"
 																		data-bs-placement="top"
 																		title="Edit"
 																		onclick={() => openEditBotMsgModal(message)}
 																	>
-																		<i class="bx bxs-edit text-primary"></i>
+																		<i class="bx bxs-edit cb-text-primary"></i>
 																	</div>
 																</div>
 															{/if}
-															<div style="font-size: 17px;">
+															<div class="cb-msg-action">
 																<!-- svelte-ignore a11y_no_static_element_interactions -->
 																<div
-																	class="line-align-center text-primary"
-																	style="height: 85%;"
+																	class="cb-vcenter cb-text-primary cb-msg-action-icon-copy cursor-pointer"
 																	data-bs-toggle="tooltip"
 																	data-bs-placement="top"
 																	title="Copy"
@@ -2077,32 +2066,31 @@
 																	onmousedown={() => copyClicked = true}
 																>
 																	{#if copyClicked}
-																		<div class="div-center">
-																			<div class="line-align-center">
-																				<i class="bx bx-check"></i> 
+																		<div class="cb-div-center">
+																			<div class="cb-vcenter">
+																				<i class="bx bx-check"></i>
 																			</div>
-																			<div class="line-align-center">
-																				<span style="font-size: 10px;">{'Copied!'}</span>
+																			<div class="cb-vcenter">
+																				<span class="cb-copied-label">{'Copied!'}</span>
 																			</div>
 																		</div>
 																	{:else}
-																		<i class="bx bx-copy clickable"></i>
+																		<i class="bx bx-copy"></i>
 																	{/if}
 																</div>
 															</div>
 															{#if message?.rich_content?.message?.rich_type === RichType.ProgramCode}
-															<div style="font-size: 17px;">
+															<div class="cb-msg-action">
 																<!-- svelte-ignore a11y_click_events_have_key_events -->
 																<!-- svelte-ignore a11y_no_static_element_interactions -->
 																<div
-																	class="line-align-center text-primary"
-																	style="height: 85%;"
+																	class="cb-vcenter cb-text-primary cb-msg-action-icon-code cursor-pointer"
 																	data-bs-toggle="tooltip"
 																	data-bs-placement="top"
 																	title="Code script"
 																	onclick={e => openCodeScriptModal(e, message)}
 																>
-																	<i class="bx bx-terminal clickable"></i>
+																	<i class="bx bx-terminal"></i>
 																</div>
 															</div>
 															{/if}
@@ -2125,19 +2113,19 @@
 
 								{#if isThinking}
 								<li>
-									<div class="conv-msg-container">
-										<div class="cicon-wrap float-start">
-											<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
+									<div class="cb-msg-row">
+										<div class="cb-cicon cb-cicon-start">
+											<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="cb-avatar cb-avatar-xs" alt="avatar">
 										</div>
-										<div class="msg-container">
-											<div class="ctext-wrap float-start">
+										<div class="cb-msg-stack">
+											<div class="cb-bubble cb-bubble-thinking">
 												{#if !!indication}
-													<span class="chat-indication">
+													<span class="cb-chat-indication">
 														{indication}
 													</span>
 												{/if}
-												<div class="flex-shrink-0 align-self-center" style="display: inline-block;">
-													<LoadingDots duration={'1s'} size={5} gap={5} color={'var(--bs-primary)'} />
+												<div class="cb-thinking-dots">
+													<LoadingDots duration={'1s'} size={5} gap={5} color={'var(--color-primary)'} />
 												</div>
 											</div>
 										</div>
@@ -2157,26 +2145,26 @@
 						</div>
 					</div>
 
-					<div class={`chat-input-section css-animation ${!loadEditor ? 'chat-input-hide' : 'fade-in-from-none'}`}>
-						<div class="row">
-							<div class="col-auto">
+					<div class={`cb-input-section cb-css-animation ${!loadEditor ? 'cb-input-hide' : 'cb-fade-in'}`}>
+						<div class="cb-input-row">
+							<div class="cb-col-auto">
 								{#if PUBLIC_LIVECHAT_VOICE_ENABLED === 'true' && !disableSpeech}
 									<button
 										type="submit"
-										class={`btn btn-rounded waves-effect waves-light ${mode === TRAINING_MODE ? 'btn-danger' : 'btn-primary'}`}
+										class={`cb-btn cb-btn-round ${mode === TRAINING_MODE ? 'cb-btn-danger' : 'cb-btn-primary'}`}
 										aria-label="Start/stop listening"
 										disabled={isSendingMsg || isThinking || disableAction}
 										onclick={() => startListen()}
 									>
-										<i class="mdi mdi-{isListening ? 'microphone' : 'microphone-off'} md-36"></i>
+										<i class="mdi mdi-{isListening ? 'microphone' : 'microphone-off'} cb-md-36"></i>
 									</button>
 								{/if}
 							</div>
-							<div class="col">
-								<div class="position-relative">
+							<div class="cb-col-grow">
+								<div class="cb-position-relative">
 									<ChatTextArea
 										id={'chat-textarea'}
-										className={`chat-input ${!isLite ? 'chat-more-util' : ''}`}
+										className={`${!isLite ? 'cb-textarea-more-util' : ''}`}
 										maxLength={maxTextLength}
 										disabled={isSendingMsg || isThinking || disableAction}
 										bind:text={text}
@@ -2189,13 +2177,13 @@
 									>
 										<ChatFileUploader
 											accept={'.png,.jpg,.jpeg'}
-											containerClasses={'line-align-center text-primary chat-util-item'}
+											containerClasses={'cb-util-uploader'}
 											disabled={isSendingMsg || isThinking || disableAction}
 											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i 
-													class="bx bx-image-add"
+												<i
+													class="bx bx-image-add cursor-pointer"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
 													title="Upload images"></i>
@@ -2203,13 +2191,13 @@
 										</ChatFileUploader>
 										<ChatFileUploader
 											accept={'.pdf,.xlsx,.xls,.csv'}
-											containerClasses={'line-align-center text-primary chat-util-item'}
+											containerClasses={'cb-util-uploader'}
 											disabled={isSendingMsg || isThinking || disableAction}
 											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i 
-													class="bx bxs-folder-open"
+												<i
+													class="bx bxs-folder-open cursor-pointer"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
 													title="Upload pdf, excel files"></i>
@@ -2217,20 +2205,20 @@
 										</ChatFileUploader>
 										<ChatFileUploader
 											accept={'.wav,.mp3'}
-											containerClasses={'line-align-center text-primary chat-util-item'}
+											containerClasses={'cb-util-uploader'}
 											disabled={isSendingMsg || isThinking || disableAction}
 											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i 
-													class="bx bxs-music"
+												<i
+													class="bx bxs-music cursor-pointer"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
 													title="Upload audios"></i>
 											</span>
 										</ChatFileUploader>
 									</ChatTextArea>
-									<div class="chat-util-links">
+									<div class="cb-util-links">
 										<ChatBigMessage
 											disabled={isSendingMsg || isThinking || disableAction}
 											onclick={() => toggleBigMessageModal()}
@@ -2244,11 +2232,11 @@
 									</div>
 								</div>
 							</div>
-							<div class="col-auto">
+							<div class="cb-col-auto">
 								{#if !isStopStreamClicked && isStreaming && PUBLIC_LIVECHAT_STREAM_ENABLED === 'true'}
 									<button
 										type="button"
-										class="btn btn-rounded chat-send waves-effect waves-light btn-danger"
+										class="cb-btn cb-btn-round cb-btn-send cb-btn-danger"
 										aria-label="Stop streaming"
 										onclick={() => stopStreaming()}
 									>
@@ -2257,11 +2245,11 @@
 								{:else}
 									<button
 										type="submit"
-										class={`btn btn-rounded chat-send waves-effect waves-light ${mode === TRAINING_MODE ? 'btn-danger' : 'btn-primary'}`}
+										class={`cb-btn cb-btn-round cb-btn-send ${mode === TRAINING_MODE ? 'cb-btn-danger' : 'cb-btn-primary'}`}
 										disabled={!_.trim(text) || isSendingMsg || isThinking || disableAction}
 										onclick={() => sentTextMessage()}
 									>
-										<span class="d-none d-md-inline-block me-2">Send</span>
+										<span class="cb-send-label">Send</span>
 										<i class="mdi mdi-send"></i>
 									</button>
 								{/if}
@@ -2272,7 +2260,7 @@
 			</div>
 		</Pane>
 		{#if isLoadPersistLog}
-		<Pane size={30} minSize={25} maxSize={40}>
+		<Pane size={25} minSize={15} maxSize={40}>
 			<PersistLog
 				bind:contentLogs={contentLogs}
 				bind:convStateLogs={convStateLogs}
@@ -2284,3 +2272,6 @@
 		{/if}
 	</Splitpanes>
 </div>
+
+
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte
index 0751bc9c..e6c7a697 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-attachment-options.svelte
@@ -74,10 +74,10 @@
     }
 </script>
 
-<div class="plain-option-container center-option">
+<div class="cao-wrap cao-center">
     {#if files?.length > 0 && confirmOption}
         <button
-            class={`btn btn-sm m-1 ${confirmOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
+            class={`cao-btn ${confirmOption?.is_secondary ? 'cao-btn-secondary': 'cao-btn-primary'}`}
             disabled={disabled}
             onclick={(e) => handleClickOption(e, confirmOption)}
         >
@@ -86,11 +86,12 @@
     {/if}
     {#if files?.length <= 0 && cancelOption}
         <button
-            class={`btn btn-sm m-1 ${cancelOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
+            class={`cao-btn ${cancelOption?.is_secondary ? 'cao-btn-secondary': 'cao-btn-primary'}`}
             disabled={disabled}
             onclick={(e) => handleClickOption(e, cancelOption)}
         >
             {cancelOption?.title}
         </button>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-big-message.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-big-message.svelte
index 3124b1a2..9820e091 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-big-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-big-message.svelte
@@ -25,16 +25,16 @@
 </script>
 
 <div
-    class={`${disableDefaultStyles ? '' : 'chat-util-trigger'} ${containerClasses}`}
+    class={`${disableDefaultStyles ? '' : 'cbm-trigger'} ${containerClasses}`}
     style={`${containerStyles}`}
 >
-    <ul class="list-inline mb-0">
-        <li class="list-inline-item">
-            <span>
+    <ul class="cbm-list">
+        <li class="cbm-item">
+            <span class="cbm-glyph">
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <i
-                    class="bx bx-pencil clickable"
+                    class="bx bx-pencil cbm-icon"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Zoom in"
@@ -43,4 +43,5 @@
             </span>
         </li>
     </ul>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-uploader.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-uploader.svelte
index 35d43de6..d3c38825 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-uploader.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-uploader.svelte
@@ -53,7 +53,7 @@
 </script>
 
 <div
-    class={`${containerClasses}`}
+    class={`cfu-root ${containerClasses}`}
     style={`${containerStyles}`}
 >
     <FileDropZone
@@ -68,14 +68,13 @@
         {#if children}
             {@render children()}
         {:else}
-            <span>
+            <span class="cfu-fallback">
                 <i
-                    class="bx bx-image-add"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
+                    class="bx bx-image-add cursor-pointer"
                     title="Upload files"
                 ></i>
             </span>
         {/if}
     </FileDropZone>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
index 4c6bf53c..1db09290 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte
@@ -82,14 +82,14 @@
 </script>
 
 
-<div use:clickoutsideDirective onclickoutside={handleClickOutside}>
+<div class="cta-wrap" use:clickoutsideDirective onclickoutside={handleClickOutside}>
     {#if showOptions}
-        <ul class="dropdown-menu chat-option-list chat-util-common">
+        <ul class="cta-option-list cta-popup">
             {#each options as option, idx (idx)}
                 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <li
-                    class="chat-option-item"
+                    class="cta-option-item"
                     onclick={() => handleOptionClick(option)}
                 >
                     {option}
@@ -98,7 +98,7 @@
         </ul>
     {/if}
     {#if loadUtils}
-        <div class="chat-util-container chat-util-common">
+        <div class="cta-util-container cta-popup">
             {#if children}
                 {@render children()}
             {/if}
@@ -106,7 +106,7 @@
     {/if}
     <textarea
         id={id}
-        class={`form-control ${className}`}
+        class={`cta-textarea ${className}`}
         rows={rows}
         maxlength={maxLength}
         disabled={disabled}
@@ -118,3 +118,5 @@
         onfocus={e => handleFocus(e)}
     ></textarea>
 </div>
+
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
index 595d0914..c1924d92 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
@@ -26,16 +26,16 @@
 
 
 <div
-    class={`${disableDefaultStyles ? '' : 'chat-util-trigger'} ${containerClasses}`}
+    class={`${disableDefaultStyles ? '' : 'cu-trigger'} ${containerClasses}`}
     style={`${containerStyles}`}
 >
-    <ul class="list-inline mb-0">
-        <li class="list-inline-item">
-            <span>
+    <ul class="cu-list">
+        <li class="cu-item">
+            <span class="cu-glyph">
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <i
-                    class="bx bx-plus-circle clickable"
+                    class="bx bx-plus-circle cu-icon"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="More"
@@ -44,4 +44,5 @@
             </span>
         </li>
     </ul>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte
index 0dd0a13d..e5264d8d 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/agent-queue-log-element.svelte
@@ -3,8 +3,9 @@
     let { data } = $props();
 </script>
 
-<div class="log-element queue-change-container">
-    <div class="log-content">
-        <span class="text-warning">{data?.log}</span>
+<div class="aql-element">
+    <div class="aql-content">
+        <span class="aql-warn">{data?.log}</span>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte b/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
index ac9cd380..1ecb754d 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
@@ -96,13 +96,19 @@
     }
 </script>
 
-<div class="chat-log">
-    <div class="card mb-0 log-background log-flex">
-        <div class="log-close-btn padding-side log-header">
+<!--
+  NOTE: .latest-state-log-scrollbar, .msg-state-log-scrollbar and
+  .agent-queue-log-scrollbar are DOM hooks queried by scrollToBottom().
+  Keep those class names on the markup; styling is done via the
+  scoped .il-* siblings.
+-->
+<div class="il-root">
+    <div class="il-card">
+        <div class="il-close-bar">
             <div>
                 <button
                     type="button"
-                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    class="il-close-btn"
                     aria-label="Close log window"
                     onclick={() => closeWindow()}
                 >
@@ -110,13 +116,13 @@
                 </button>
             </div>
         </div>
-        <div class="log-body instant-log-body">
+        <div class="il-body">
             {#if !!agent}
             <div
-                class="log-list instant-log-section"
+                class="il-section il-section-agent"
                 transition:fade={{ duration: duration }}
             >
-                <div class="chat-agent-info padding-side">
+                <div class="il-agent-info">
                     <ChatAgentInfo agent={agent} />
                 </div>
             </div>
@@ -124,23 +130,22 @@
 
             {#if !!agentQueueLogs && agentQueueLogs?.length > 0}
             <div
-                class="log-list instant-log-section instant-log-sec-sm"
+                class="il-section il-section-sm"
                 in:fade={{ duration: inDuration }}
                 out:fade={{ duration: outDuration }}
             >
-                <div class="close-icon">
+                <div class="il-section-close">
                     <button
                         type="button"
-                        class="btn btn-link p-0"
-                        style="float: right;"
+                        class="il-section-close-btn"
                         aria-label="Close agent queue log"
                         onclick={() => closeLog(agentQueueLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
                     </button>
                 </div>
-                <div class="agent-queue-log-scrollbar padding-side">
-                    <ul>
+                <div class="il-scroll agent-queue-log-scrollbar">
+                    <ul class="il-list">
                         {#each agentQueueLogs as log (log.uid)}
                             <AgentQueueLogElement data={log} />
                         {/each}
@@ -151,23 +156,22 @@
 
             {#if !!msgStateLogs && msgStateLogs?.length > 0}
             <div
-                class="log-list instant-log-section instant-log-sec-lg"
+                class="il-section il-section-lg"
                 in:fade={{ duration: inDuration }}
                 out:fade={{ duration: outDuration }}
             >
-                <div class="close-icon">
+                <div class="il-section-close">
                     <button
                         type="button"
-                        class="btn btn-link p-0"
-                        style="float: right;"
+                        class="il-section-close-btn"
                         aria-label="Close message state log"
                         onclick={() => closeLog(msgStateLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
                     </button>
                 </div>
-                <div class="msg-state-log-scrollbar padding-side" >
-                    <ul>
+                <div class="il-scroll msg-state-log-scrollbar">
+                    <ul class="il-list">
                         {#each msgStateLogs as log (log.uid)}
                             <MessageStateLogElement data={log} />
                         {/each}
@@ -177,11 +181,11 @@
             {/if}
             {#if latestStateLog && Object.keys(latestStateLog)?.length > 0}
             <div
-                class="log-list instant-log-section instant-log-sec-md"
+                class="il-section il-section-md"
                 in:fade={{ duration: inDuration }}
                 out:fade={{ duration: outDuration }}
             >
-                <div class="latest-state-log-scrollbar latest-state-log">
+                <div class="il-latest-scroll latest-state-log-scrollbar">
                     <div>
                         <LatestStateLog data={latestStateLog} />
                     </div>
@@ -189,7 +193,9 @@
             </div>
             {/if}
         </div>
-        
-        <div class="log-footer"></div>
+
+        <div class="il-footer"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
index 2b5af467..f4d7d884 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/latest-state-log.svelte
@@ -6,18 +6,24 @@
   let { data } = $props();
 </script>
 
-<div class="log-element state-log-item">
-  <div class="log-content">
+<!--
+  NOTE: .state-log-item and .log-content are DOM hooks queried by
+  chat-box.svelte's highlightStateLog() — do not rename them.
+  .lsl-element / .lsl-content are the scoped style hooks.
+-->
+<div class="lsl-element state-log-item">
+  <div class="lsl-content log-content">
     {#if data}
       <JSONTree
         value={formatObject(data)}
         defaultExpandedLevel={1}
         --json-tree-property-color="white"
         --json-tree-label-color="white"
-        --json-tree-number-color="var(--bs-info)"
-        --json-tree-boolean-color="var(--bs-info)"
-        --json-tree-string-color="var(--bs-info)"
+        --json-tree-number-color="var(--color-info, #0ea5e9)"
+        --json-tree-boolean-color="var(--color-info, #0ea5e9)"
+        --json-tree-string-color="var(--color-info, #0ea5e9)"
       />
     {/if}
   </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte
index df3e1e63..e4715c15 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/message-state-log-element.svelte
@@ -36,36 +36,37 @@
 </script>
 
 {#if beforeDataValue != defaultValue || afterDataValue != defaultValue}
-<div class="log-element state-change-container">
-    <div class="log-meta state-key text-danger">
+<div class="mss-element">
+    <div class="mss-meta mss-state-key">
         <div>
             <span><b>{`${data?.name}`}</b></span>
             {#if !!data?.source}
-            <span class="state-source text-secondary">{`${data?.source}`}</span>
+            <span class="mss-state-source">{`${data?.source}`}</span>
             {/if}
         </div>
     </div>
-    <div class="log-content state-value-container">
-        <div class="state-value">
-            <div class="value">
+    <div class="mss-content">
+        <div class="mss-state-value">
+            <div class="mss-value">
                 {beforeDataValue}
             </div>
             {#if !!beforeActiveRoundText}
-            <div class="active-rounds">
+            <div class="mss-active-rounds">
                 {`${beforeActiveRoundText}`}
             </div>
             {/if}
         </div>
-        <div class="state-value text-warning">
-            <div class="value">
+        <div class="mss-state-value mss-state-value-warn">
+            <div class="mss-value">
                 {afterDataValue}
             </div>
             {#if !!afterActiveRoundText}
-            <div class="active-rounds">
+            <div class="mss-active-rounds">
                 {`${afterActiveRoundText}`}
             </div>
             {/if}
         </div>
     </div>
 </div>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
index ee65dee4..af749d67 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/content-log-element.svelte
@@ -23,22 +23,22 @@
 
     let logDisplayStyle = $derived.by(() => {
         if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
-            return 'border border-secondary';
+            return 'cle-bordered';
         } else if (data.source === ContentLogSource.FunctionCall) {
-            return 'bg-secondary';
+            return 'cle-bg-secondary';
         } else if (data.source === ContentLogSource.Prompt) {
-            return 'text-secondary';
+            return 'cle-text-secondary';
         } else if (data.source === ContentLogSource.HardRule) {
-            return 'text-warning';
+            return 'cle-text-warning';
         } else if (data.source === ContentLogSource.UserInput) {
-            return 'bg-danger';
+            return 'cle-bg-danger';
         }
         return '';
     });
 
     let logTextStyle = $derived.by(() => {
         if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
-            return 'text-info';
+            return 'cle-text-info';
         }
         return '';
     });
@@ -50,46 +50,48 @@
     }
 </script>
 
-<div class="log-element rounded" style="padding: 3px;" id={`content-log-${data.message_id}`}>
-    <div class="log-meta text-secondary">
+<!--
+  NOTE: id={`content-log-${data.message_id}`} is queried by chat-box.svelte's
+  autoScrollToTargetLog(); keep this id attribute as-is.
+-->
+<div class="cle-element" id={`content-log-${data.message_id}`}>
+    <div class="cle-meta">
         <div>
-            <span class="h4">
+            <span class="cle-title">
             {#if data?.agent_id?.length > 0}
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <span
-                    class="text-secondary text-decoration-underline clickable"
+                    class="cle-link"
                     onclick={() => directToAgentPage(data.agent_id)}
                 >
                     {data.name || unknownAgent}
                 </span>
             {:else}
-                <span class="text-secondary">
+                <span class="cle-text-secondary">
                     {data.name || unknownAgent}
                 </span>
             {/if}
             </span>
-            <span class="ms-2">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
+            <span class="cle-meta-ts">{`${utcToLocal(data?.created_at, 'hh:mm:ss.SSS A, MMM DD YYYY')} `}</span>
         </div>
     </div>
-    <div
-        class={`rounded log-content ${logDisplayStyle}`}
-        style="padding: 5px 8px;"
-    >
-        <div class:log-collapse={collapsedSources.includes(data.source) && !!is_collapsed}>
+    <div class={`cle-content ${logDisplayStyle}`}>
+        <div class:cle-collapse={collapsedSources.includes(data.source) && !!is_collapsed}>
             <Markdown containerClasses={logTextStyle} text={data?.content} rawText={rawTextSources.includes(data.source)} />
         </div>
 
         {#if collapsedSources.includes(data.source)}
-            <button class="btn btn-link toggle-btn btn-sm" onclick={(e) => toggleText(e)}>
+            <button class="cle-toggle-btn" onclick={(e) => toggleText(e)}>
                 {`${is_collapsed ? 'More +' : 'Less -'}`}
             </button>
         {/if}
     </div>
 
     {#if data.message_id && data.source === ContentLogSource.UserInput}
-    <div style="margin-top: 10px;">
+    <div class="cle-msg-id">
         {`MessageId: ${data.message_id}`}
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
index 2078217d..23e018ea 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/conversation-state-log-element.svelte
@@ -6,20 +6,27 @@
     let { data } = $props();
 </script>
 
-<div class="log-element state-log-item" id={`state-log-${data.message_id}`}>
-    <div class="log-content">
+<!--
+  NOTE: .state-log-item and .log-content are DOM hooks queried by
+  chat-box.svelte's highlightStateLog(); the #state-log-{id} id is queried
+  by autoScrollToTargetLog(). Keep those names exactly. Scoped styling
+  is applied through .csle-* siblings.
+-->
+<div class="csle-element state-log-item" id={`state-log-${data.message_id}`}>
+    <div class="csle-content log-content">
         <JSONTree
             value={formatObject(data?.states)}
             --json-tree-property-color="white"
             --json-tree-label-color="white"
-            --json-tree-number-color="var(--bs-info)"
-            --json-tree-boolean-color="var(--bs-info)"
-            --json-tree-string-color="var(--bs-info)"
+            --json-tree-number-color="var(--color-info, #0ea5e9)"
+            --json-tree-boolean-color="var(--color-info, #0ea5e9)"
+            --json-tree-string-color="var(--color-info, #0ea5e9)"
         />
     </div>
     {#if data.message_id}
-        <div style="margin-top: 10px;">
+        <div class="csle-msg-id">
             {`MessageId: ${data.message_id}`}
         </div>
-    {/if} 
-</div>
\ No newline at end of file
+    {/if}
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
index dc90158b..c648db59 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -172,13 +172,19 @@
     }
 </script>
 
-<div class="chat-log">
-    <div class="card mb-0 log-background log-flex">
-        <div class="log-close-btn padding-side log-header">
+<!--
+  NOTE: .content-log-scrollbar and .conv-state-log-scrollbar are DOM hooks
+  queried by initScrollbars() (this file) and autoScrollToTargetLog()
+  (chat-box.svelte). Keep those class names exactly. Scoped styling is
+  applied through .pl-* siblings.
+-->
+<div class="pl-root">
+    <div class="pl-card">
+        <div class="pl-header-bar">
             <div>
                 <button
                     type="button"
-                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    class="pl-action-btn pl-action-btn-secondary"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Clean log"
@@ -187,10 +193,10 @@
                     <i class="bx bx-trash"></i>
                 </button>
             </div>
-            <div>
+            <div class="pl-action-group">
                 <button
                     type="button"
-                    class="btn btn-sm btn-primary chat-send waves-effect waves-light"
+                    class="pl-action-btn pl-action-btn-primary"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Scroll to top"
@@ -200,7 +206,7 @@
                 </button>
                 <button
                     type="button"
-                    class="btn btn-sm btn-light chat-send waves-effect waves-light"
+                    class="pl-action-btn pl-action-btn-light"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Scroll to bottom"
@@ -212,7 +218,7 @@
             <div>
                 <button
                     type="button"
-                    class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
+                    class="pl-action-btn pl-action-btn-secondary"
                     aria-label="Close log window"
                     onclick={() => closeWindow()}
                 >
@@ -221,27 +227,27 @@
             </div>
         </div>
 
-        <div class="content-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== contentLogTab}>
-            <ul>
+        <div class="pl-scroll-area content-log-scrollbar" class:pl-hide={selectedTab !== contentLogTab}>
+            <ul class="pl-list">
                 {#each contentLogs as log (log.uid)}
                     <ContentLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="conv-state-log-scrollbar log-list padding-side log-body" class:hide={selectedTab !== conversationStateLogTab}>
-            <ul>
+        <div class="pl-scroll-area conv-state-log-scrollbar" class:pl-hide={selectedTab !== conversationStateLogTab}>
+            <ul class="pl-list">
                 {#each convStateLogs as log (log.uid)}
                     <ConversationStateLogElement data={log} />
                 {/each}
             </ul>
         </div>
 
-        <div class="log-footer nav-group">
+        <div class="pl-footer">
             <NavBar id={'persist-log-container'}>
                 <NavItem
                     navBtnId={'content-log-tab'}
-                    navBtnClasses={'log-footer-nav-btn'}
+                    navBtnStyles={'font-size: 0.75em;'}
                     dataBsTarget={'#content-log-tab-pane'}
                     ariaControls={'content-log-tab-pane'}
                     navBtnText={'Content Log'}
@@ -251,7 +257,7 @@
                 />
                 <NavItem
                     navBtnId={'conv-state-log-tab'}
-                    navBtnClasses={'log-footer-nav-btn'}
+                    navBtnStyles={'font-size: 0.75em;'}
                     dataBsTarget={'#conv-state-log-tab-pane'}
                     ariaControls={'conv-state-log-tab-pane'}
                     navBtnText={'Conversation States'}
@@ -262,4 +268,5 @@
             </NavBar>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
index e20d7ccd..017fbd92 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
@@ -100,41 +100,39 @@
 </script>
 
 {#if cards}
-    <div class="complex-option-container">
+    <div class="rcco-grid">
         {#each cards as card, idx (idx)}
-            <div class="card-element" in:fade={{ duration: duration }}>
-                <div class="card">
-                    <div class="card-body card-element-body">
-                        {#if !!card.title}
-                            <div class="card-element-title hide-text">{card.title}</div>
-                        {/if}
-                        {#if !!card.image_url}
-                            <div class="avatar-md">
-                                <span class="avatar-title rounded-circle bg-light text-danger font-size-16">
-                                    <img src={card.image_url} alt="" height="60" class="rounded-circle">
-                                </span>
-                            </div>
-                        {/if}
-                        {#if !!card.subtitle}
-                            <div class="card-element-subtitle hide-text">{@html card.subtitle}</div>
-                        {/if}
-                        {#if !!card.text}
-                            <div class="card-element-text hide-text">{card.text}</div>
-                        {/if}
-                        {#if card.options?.length > 0}
-                            <div class="card-option-group">
-                                {#each card.options as option, i (i)}
-                                    <button
-                                        class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
-                                        disabled={disabled}
-                                        onclick={(e) => handleClickOption(e, option)}
-                                    >
-                                        <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>{option.title}</span>
-                                    </button>
-                                {/each}
-                            </div>
-                        {/if}
-                    </div>
+            <div class="rcco-card" in:fade={{ duration: duration }}>
+                <div class="rcco-card-body">
+                    {#if !!card.title}
+                        <div class="rcco-title rcco-clip">{card.title}</div>
+                    {/if}
+                    {#if !!card.image_url}
+                        <div class="rcco-avatar">
+                            <span class="rcco-avatar-frame">
+                                <img src={card.image_url} alt="" height="60" class="rcco-avatar-img">
+                            </span>
+                        </div>
+                    {/if}
+                    {#if !!card.subtitle}
+                        <div class="rcco-subtitle rcco-clip">{@html card.subtitle}</div>
+                    {/if}
+                    {#if !!card.text}
+                        <div class="rcco-text rcco-clip">{card.text}</div>
+                    {/if}
+                    {#if card.options?.length > 0}
+                        <div class="rcco-option-group">
+                            {#each card.options as option, i (i)}
+                                <button
+                                    class={`rcco-btn ${option.is_secondary ? 'rcco-btn-secondary' : 'rcco-btn-primary'}`}
+                                    disabled={disabled}
+                                    onclick={(e) => handleClickOption(e, option)}
+                                >
+                                    <span class={`${option.type === ElementType.Web && option.url ? 'rcco-link' : ''}`}>{option.title}</span>
+                                </button>
+                            {/each}
+                        </div>
+                    {/if}
                 </div>
             </div>
         {/each}
@@ -142,10 +140,10 @@
 {/if}
 
 {#if buttons}
-    <div class="plain-option-container center-option" style="margin-top: 5px;">
+    <div class="rcco-button-row">
         {#each buttons as option, index (index)}
             <button
-                class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
+                class={`rcco-btn ${option.is_secondary ? 'rcco-btn-secondary' : 'rcco-btn-primary'}`}
                 in:fade={{ duration: duration }}
                 disabled={disabled}
                 onclick={(e) => handleClickOption(e, option)}
@@ -154,4 +152,5 @@
             </button>
         {/each}
     </div>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
index a095dab1..39bb3270 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
@@ -3,6 +3,7 @@
      let { content } = $props();
 </script>
 
-<div class="msg-disclaimer">
+<div class="rcd-box">
     {content}
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-embedding.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-embedding.svelte
index 96627526..da66f776 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-embedding.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-embedding.svelte
@@ -38,7 +38,7 @@
                 <i class="bx bx-link-external"></i>
             </a>
         </div>
-        <div use:collapse={{ open, duration: collapseDuration, easing: 'ease' }} style="width: 100%; margin-top: 8px;">
+        <div class="rc-embedding-collapse" use:collapse={{ open, duration: collapseDuration, easing: 'ease' }}>
             {#if open}
             <div class="rc-embedding-container">
                 {#if htmlTag === 'iframe'}
@@ -58,3 +58,5 @@
     </div>
 {/if}
 
+
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte
index 408f3f0f..02697c76 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte
@@ -129,14 +129,15 @@
 
 <div class={`${containerClasses}`} style={`${containerStyles}`}>
     {#if message?.text}
-        <div class="mb-3">{message.text}</div>
+        <div class="rcj-section">{message.text}</div>
     {/if}
     {#if isLoading}
-        <div class="mb-3">
-            <LoadingDots duration={'1s'} size={5} gap={3} color={'var(--bs-primary)'} />
+        <div class="rcj-section">
+            <LoadingDots duration={'1s'} size={5} gap={3} color={'var(--color-primary)'} />
         </div>
     {/if}
     <div id={`${scrollbarId}`}>
-        <div id={`chart-${message?.message_id}`} style="min-width: 800px; max-height: 500px;"></div>
+        <div id={`chart-${message?.message_id}`} class="rcj-chart"></div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
index 45bb99ca..8331a8b8 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
@@ -48,7 +48,7 @@
 
 {#if text || thinkingText}
     <div
-        class={`ctext-wrap bg-primary ${containerClasses}`}
+        class={`rcm-bubble ${containerClasses}`}
         style={`${containerStyles}`}
     >
         {#if thinkingText}
@@ -58,7 +58,7 @@
                     onclick={() => isThinkingExpanded = !isThinkingExpanded}
                 >
                     <span class="thinking-sparkle" class:pulsing={isThinking}><Icon src={Sparkles} solid size="16" /></span>
-                    <span class="font-bold">{'Thinking'}</span>
+                    <span class="rcm-thinking-label">{'Thinking'}</span>
                     {#if isThinking}
                         <Loader disableDefaultStyles size={14} color="#4285f4" containerStyles="display: flex; align-items: center;" />
                     {:else if isStoppedThinking}
@@ -79,7 +79,7 @@
                 {/if}
             </div>
         {/if}
-        <div class="flex-shrink-0 align-self-center">
+        <div class="rcm-body">
             {#if message?.rich_content?.message?.rich_type === RichType.ProgramCode
                 && message?.rich_content?.message?.language === 'javascript'}
                 <RcJsInterpreter message={message} scrollable />
@@ -90,75 +90,3 @@
     </div>
 {/if}
 
-<style>
-    .thinking-section {
-        margin-bottom: 15px;
-    }
-
-    .thinking-toggle {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        background: none;
-        border: none;
-        color: #555;
-        cursor: pointer;
-        padding: 4px 0;
-        font-size: 0.9em;
-    }
-
-    .thinking-toggle:hover {
-        color: #333;
-    }
-
-    .thinking-sparkle {
-        color: #4285f4;
-        display: flex;
-        align-items: center;
-    }
-
-    .thinking-sparkle.pulsing {
-        animation: thinking-sparkle-pulse 1.4s ease-in-out infinite;
-    }
-
-    @keyframes thinking-sparkle-pulse {
-        0%, 100% {
-            opacity: 1;
-            transform: scale(1);
-        }
-        50% {
-            opacity: 0.55;
-            transform: scale(1.15);
-        }
-    }
-
-    .thinking-chevron {
-        font-size: 1em;
-        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-        display: inline-block;
-    }
-
-    .thinking-chevron.expanded {
-        transform: rotate(90deg);
-    }
-
-    .stopped-thinking-label {
-        font-size: 0.85em;
-        color: #999;
-        font-style: italic;
-    }
-
-    .thinking-content {
-        font-size: 0.9em;
-        padding: 4px 0 4px 16px;
-        border-left: 1px solid #888;
-        margin-top: 4px;
-        max-height: 200px;
-        overflow-y: auto;
-        scrollbar-width: none;
-    }
-
-    .thinking-content::-webkit-scrollbar {
-        display: none;
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte
index 2a7f73fd..904d637a 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-plain-options.svelte
@@ -131,17 +131,15 @@
 </script>
 
 {#if videoOptions}
-<div class="video-option-container center-option">
+<div class="rcpo-video-row rcpo-center">
     {#each videoOptions as video}
-        <div class="video-element-card" in:fade={{ duration: duration }}>
-            <div class="card">
-                <div class="card-body">
-                    <div class="video-element-title">
-                        {video.title}
-                    </div>
-                    <div class="video-element-player">
-                        <SveltePlayer url={video.payload} controls />
-                    </div>
+        <div class="rcpo-video-card" in:fade={{ duration: duration }}>
+            <div class="rcpo-video-body">
+                <div class="rcpo-video-title">
+                    {video.title}
+                </div>
+                <div class="rcpo-video-player">
+                    <SveltePlayer url={video.payload} controls />
                 </div>
             </div>
         </div>
@@ -150,23 +148,23 @@
 {/if}
 
 {#if plainOptions || fileOption}
-<div class="plain-option-container center-option">
+<div class="rcpo-option-row rcpo-center">
     {#each plainOptions as option, index}
         <button
-            class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
-            class:active={!!option.isClicked}
+            class={`rcpo-btn ${option.is_secondary ? 'rcpo-btn-secondary' : 'rcpo-btn-primary'}`}
+            class:rcpo-active={!!option.isClicked}
             disabled={disabled}
             in:fade={{ duration: duration }}
             onclick={(e) => handleClickOption(e, option, index)}
         >
-            <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>
+            <span class={`${option.type === ElementType.Web && option.url ? 'rcpo-link' : ''}`}>
                 {option.title}
             </span>
         </button>
     {/each}
     {#if plainOptions && isMultiSelect}
         <button
-            class="btn btn-outline-success btn-sm m-1"
+            class="rcpo-btn rcpo-btn-confirm"
             name="confirm"
             in:fade={{ duration: duration }}
             disabled={disabled || plainOptions.every(x => !x.isClicked)}
@@ -176,11 +174,12 @@
         </button>
     {/if}
     {#if fileOption}
-        <ChatFileUploader accept=".png,.jpg,.jpeg" containerClasses={'line-align-center text-primary chat-uploader'}>
-            <span style="position: relative; top: 3px;" in:fade={{ duration: duration }}>
+        <ChatFileUploader accept=".png,.jpg,.jpeg" containerClasses={'rcpo-uploader'}>
+            <span class="rcpo-uploader-glyph" in:fade={{ duration: duration }}>
                 <i class="bx bx-image-add"></i>
             </span>
         </ChatFileUploader>
     {/if}
 </div>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 7ff3b4a6..7cc00270 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -334,23 +334,22 @@
 	isLoading={isLoading}
 />
 
-<div class="agents-header-container mb-4">
-	<div>
+<div class="ag-header">
+	<div class="ag-header-actions">
 		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
-		<button type="button" class="btn btn-primary" onclick={() => createNewAgent()}>
+		<button type="button" class="ag-btn ag-btn-primary" onclick={() => createNewAgent()}>
 			<i class="mdi mdi-content-copy"></i> {$_('New Agent')}
 		</button>
-		<button type="button" class="btn btn-outline-info" onclick={() => importAgent()}>
+		<button type="button" class="ag-btn ag-btn-ghost" onclick={() => importAgent()}>
 			<i class="mdi mdi-upload"></i> {$_('Import Agent')}
 		</button>
 		{/if}
 	</div>
-	<div class="agent-filter">
+	<div class="ag-filter">
 		<input
 			type="text"
-			class="form-control"
+			class="ag-input"
 			placeholder="Search by name"
-			style="width: fit-content;"
 			maxlength={500}
 			value={searchItem.name}
 			oninput={e => changeSearchName(e)}
@@ -378,7 +377,7 @@
 		/>
 		<button
 			type="button"
-			class="btn btn-info"
+			class="ag-btn-icon ag-btn-icon-info"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
 			title="Search"
@@ -388,7 +387,7 @@
 		</button>
 		<button
 			type="button"
-			class="btn btn-warning"
+			class="ag-btn-icon ag-btn-icon-warning"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
 			title="Reset"
@@ -400,8 +399,11 @@
 </div>
 
 
-<div class="row">
+<div class="ag-grid">
 	<CardAgent agents={agents.items} />
 </div>
 
-<PlainPagination pagination={pager} pageTo={pn => pageTo(pn)} />
\ No newline at end of file
+<div class="ag-pagination">
+	<PlainPagination pagination={pager} pageTo={pn => pageTo(pn)} />
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 23924830..2fde039e 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -219,37 +219,37 @@
 />
 
 {#if agent}
-<div>
-    <div class="row agent-detail-sections">
-        <div class="col section-min-width agent-col" style="flex: 40%;">
-            <div class="agent-detail-section">
+<div class="ad-page">
+    <div class="ad-grid">
+        <div class="ad-col ad-col-left">
+            <div class="ad-section">
                 <AgentOverview
                     bind:agent={agent}
                     bind:profiles={agent.profiles}
                     bind:labels={agent.labels}
                 />
             </div>
-            <div class="agent-detail-section">
+            <div class="ad-section">
                 <AgentTabs
                     bind:this={agentTabsCmp}
                     agent={agent}
                 />
             </div>
         </div>
-        <div class="col section-min-width agent-col" style="flex: 60%;">
-            <div class="agent-detail-section">
+        <div class="ad-col ad-col-right">
+            <div class="ad-section">
                 <AgentInstruction
                     bind:this={agentInstructionCmp}
                     bind:agent={agent}
                 />
             </div>
-            <div class="agent-detail-section">
+            <div class="ad-section">
                 <AgentTemplate
                     bind:this={agentTemplateCmp}
                     bind:agent={agent}
                 />
             </div>
-            <div class="agent-detail-section">
+            <div class="ad-section">
                 <AgentFunction
                     bind:this={agentFunctionCmp}
                     bind:agent={agent}
@@ -259,15 +259,33 @@
     </div>
 
     {#if !!AgentExtensions.editable(agent)}
-        <div class="row">
-            <div class="hstack gap-2 my-4">
-                <button type="button" class="btn btn-soft-primary" onclick={() => updateCurrentAgent()}>{$_('Save Agent')}</button>
-                <button type="button" class="btn btn-outline-info" onclick={() => exportAgent()}>
-                    <i class="mdi mdi-download"></i> {$_('Export Agent')}
-                </button>
-                <button type="button" class="btn btn-danger" onclick={() => deleteCurrentAgent()}>{$_('Delete Agent')}</button>
-            </div>
+        <div class="ad-action-bar">
+            <button
+                type="button"
+                class="ad-btn ad-btn-primary"
+                onclick={() => updateCurrentAgent()}
+            >
+                <i class="bx bx-check"></i>
+                {$_('Save Agent')}
+            </button>
+            <button
+                type="button"
+                class="ad-btn ad-btn-ghost"
+                onclick={() => exportAgent()}
+            >
+                <i class="mdi mdi-download"></i>
+                {$_('Export Agent')}
+            </button>
+            <button
+                type="button"
+                class="ad-btn ad-btn-danger"
+                onclick={() => deleteCurrentAgent()}
+            >
+                <i class="bx bx-trash"></i>
+                {$_('Delete Agent')}
+            </button>
         </div>
     {/if}
 </div>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
index 523aebb5..d11f0804 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
@@ -51,14 +51,7 @@
     }
 </script>
 
-<div class="my-json-editor">
+<div class="af-json-editor">
     <JSONEditor mode={Mode.table} content={content} onChange={handleChange} />
 </div>
 
-<style>
-    .my-json-editor {
-        /* define a custom theme color */
-        --jse-theme-color: var(--bs-primary);
-        --jse-theme-color-highlight: #687177;
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
index d2183627..ff796f27 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
@@ -131,24 +131,17 @@
     }
 </script>
 
-<div class="card agent-prompt-container">
-    <div class="card-header agent-prompt-header border-bottom">
-        <div class="d-flex">
-            <div class="flex-grow-1">
-                <h5 class="fw-semibold">{agent.name}</h5>
-            </div>
-        </div>
+<div class="ai-card">
+    <div class="ai-card-header">
+        <h5 class="ai-agent-name">{agent.name}</h5>
     </div>
-    <div class="card-body">
-        <div class="mb-3">
-            <div class="mb-2">
-                <div class="line-align-center fw-bold">
-                    {'Description:'}
-                </div>
+    <div class="ai-card-body">
+        <div class="ai-section">
+            <div class="ai-section-label">
+                {'Description:'}
             </div>
             <textarea
-                class="form-control"
-                style="scrollbar-width: thin; resize: none;"
+                class="ai-textarea ai-textarea-sm"
                 rows={4}
                 bind:value={agent.description}
                 placeholder="Enter your Message"
@@ -156,9 +149,9 @@
             ></textarea>
         </div>
 
-        <div class="mb-3 agent-prompt-body">
-            <div class="mb-2" style="display: flex; gap: 10px;">
-                <div class="line-align-center fw-bold">
+        <div class="ai-section">
+            <div class="ai-section-header">
+                <div class="ai-section-label">
                     {#if inner_instructions.length > 1}
                         {'Instructions:'}
                     {:else}
@@ -168,11 +161,10 @@
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div
-                    class="text-primary clickable"
+                    class="ai-add-btn"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Add channel instruction"
-                    style="font-size: 16px;"
                     onclick={() => addChannel()}
                 >
                     <i class="mdi mdi-plus-circle-outline"></i>
@@ -206,8 +198,7 @@
             </NavBar>
             {/if}
             <textarea
-                class="form-control"
-                style="scrollbar-width: thin; resize: none;"
+                class="ai-textarea"
                 value={selected_instruction.instruction}
                 rows={20}
                 oninput={(e) => changePrompt(e)}
@@ -216,4 +207,5 @@
             ></textarea>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index ba9d1538..1cf9f3b3 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -46,14 +46,14 @@
     });
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-1">LLM Configurations</h5>
-            <img src="images/brands/azure-openai-logo.avif" alt="" style="height: 50px; width: auto; display: inline-block;" />
+<div class="llmc-card">
+    <div class="llmc-card-body">
+        <div class="llmc-header">
+            <h5 class="llmc-title">LLM Configurations</h5>
+            <img src="images/brands/azure-openai-logo.avif" alt="" class="llmc-brand-logo" />
         </div>
 
-        <div class="agent-utility-container">
+        <div class="llmc-list">
             <ChatConfig
                 bind:this={chatConfigCmp}
                 {agent}
@@ -89,4 +89,5 @@
             />
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index 9d302c58..b081e654 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -22,11 +22,10 @@
         handleAgentChange = () => {}
     } = $props();
 
-    /** @type {import('$commonTypes').IdName[]} */
-	let routingModeOptions = [
-        { id: null, name: '' },
-        ...Object.entries(RoutingMode).map(([_, v]) => ({ id: v, name: v }))
-    ];
+    /** @type {import('$commonTypes').LabelValuePair[]} */
+    const routingModeOptions = Object.entries(RoutingMode).map(([_, v]) => (
+        { label: v, value: v }
+    ));
 
     const functionVisibilityModeOptions = Object.entries(FunctionVisMode).map(([_, v]) => (
 		{ label: v, value: v }
@@ -70,8 +69,9 @@
 	 * @param {any} e
 	 */
     function changeRoutingMode(e) {
-        const value = e.target.value || null;
-        agent.mode = value;
+        // Select fires `{ detail: { selecteds: [{ label, value }] } }`.
+        const selectedValues = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        agent.mode = selectedValues.length > 0 ? selectedValues[0] : null;
         handleAgentChange();
     }
 
@@ -92,42 +92,41 @@
     }
 </script>
 
-<div class="card">
-    <div class="card-header">
-        <div class="text-center">
-            <div class="agent-overview-header">
+<div class="ao-card">
+    <div class="ao-card-header">
+        <div class="ao-header-block">
+            <div class="ao-avatar-row">
                 <img
                     src="images/users/bot.png"
                     alt=""
                     width="50"
                     height="50"
-                    style="width: 50px; height: 50px;"
-                    class="mx-auto d-block"
+                    class="ao-avatar-img"
                 />
                 {#if !!AgentExtensions.chatable(agent)}
                     <button
                         type="button"
-                        class="btn btn-sm btn-soft-info agent-chat"
+                        class="ao-chat-btn"
                         onclick={() => chatWithAgent()}
                     >
                         <span>{'Chat with me'}</span>
-                        <span><i class="mdi mdi-chat"></i></span>
+                        <i class="mdi mdi-chat"></i>
                     </button>
                 {/if}
             </div>
-            <h5 class="mt-1 mb-1 div-center">
+            <h5 class="ao-name">
                 <InPlaceEdit bind:value={agent.name} onInput={handleAgentChange} />
             </h5>
-            <p class="text-muted mb-0">{`Updated at ${utcToLocal(agent.updated_datetime)}`}</p>
+            <p class="ao-updated">{`Updated at ${utcToLocal(agent.updated_datetime)}`}</p>
         </div>
     </div>
-    <div class="card-body">
-        <div class="table-responsive">
-            <table class="table">
+    <div class="ao-card-body">
+        <div class="ao-table-wrap">
+            <table class="ao-table">
                 <tbody>
                     <tr>
-                        <th class="agent-prop-key">Type</th>
-                        <td>
+                        <th class="ao-key">Type</th>
+                        <td class="ao-val">
                             {#if agent.type == AgentType.Routing}
                                 Routing Agent
                             {:else if agent.type == AgentType.Planning}
@@ -145,86 +144,66 @@
                     </tr>
                     {#if agent.is_router}
                     <tr>
-                        <th class="agent-prop-key" style="vertical-align: middle">
-                            <div class="mt-1">
-                                Routing Mode
-                            </div>
+                        <th class="ao-key">
+                            Routing Mode
                         </th>
-                        <td>
-                            <div class="mt-2 mb-2" style="width: fit-content;">
-                                <select
-                                    class="form-select"
-                                    onchange={e => changeRoutingMode(e)}
-                                >
-                                    {#each [...routingModeOptions] as option}
-                                        <option value={option.id} selected={option.id === agent.mode}>
-                                            {option.name}
-                                        </option>
-                                    {/each}
-                                </select>
-                            </div>
+                        <td class="ao-val">
+                            <Select
+                                tag={'agent-routing-mode-select'}
+                                containerStyles={'width: 50%; min-width: 100px;'}
+                                placeholder={'Select'}
+                                selectedValues={agent.mode ? [agent.mode] : []}
+                                options={routingModeOptions}
+                                onselect={e => changeRoutingMode(e)}
+                            />
                         </td>
                     </tr>
                     {/if}
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Visibility
-                            </div>
-                        </th>
-                        <td>
-                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
+                        <th class="ao-key">Visibility</th>
+                        <td class="ao-val">
+                            <label class="ao-check">
                                 <input
-                                    class="form-check-input"
+                                    class="ao-checkbox"
                                     type="checkbox"
                                     bind:checked={agent.is_public}
                                     onchange={handleAgentChange}
                                     id="is_public"
                                 />
-                                <label class="form-check-label" for="is_public">
-                                    Public
-                                </label>
-                            </div>
+                                <span>Public</span>
+                            </label>
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Routable
-                            </div>
-                        </th>
-                        <td>
-                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
+                        <th class="ao-key">Routable</th>
+                        <td class="ao-val">
+                            <label class="ao-check">
                                 <input
-                                    class="form-check-input"
+                                    class="ao-checkbox"
                                     type="checkbox"
                                     bind:checked={agent.allow_routing}
                                     onchange={handleAgentChange}
                                     id="allow_routing"
                                 />
-                                <label class="form-check-label" for="allow_routing">Allow</label>
-                            </div>
+                                <span>Allow</span>
+                            </label>
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Profiles
-                            </div>
-                        </th>
-                        <td>
-                            <div class="agent-prop-list-container vertical-flexible">
+                        <th class="ao-key">Profiles</th>
+                        <td class="ao-val">
+                            <div class="ao-list">
                                 {#each profiles as _, index}
-                                <div class="edit-wrapper">
+                                <div class="ao-list-row">
                                     <input
-                                        class="form-control edit-text-box"
+                                        class="ao-input"
                                         type="text"
                                         placeholder="Typing here..."
                                         maxlength={30}
                                         bind:value={profiles[index]}
                                         oninput={handleAgentChange}
                                     />
-                                    <div class="delete-icon">
+                                    <span class="ao-list-remove">
                                         <i
                                             class="bx bxs-no-entry"
                                             role="link"
@@ -232,11 +211,11 @@
                                             onkeydown={() => {}}
                                             onclick={() => removeProfile(index)}
                                         ></i>
-                                    </div>
+                                    </span>
                                 </div>
                                 {/each}
                                 {#if profiles?.length < limit}
-                                <div class="list-add">
+                                <div class="ao-list-add">
                                     <i
                                         class="bx bx bx-list-plus"
                                         role="link"
@@ -250,24 +229,20 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Labels
-                            </div>
-                        </th>
-                        <td>
-                            <div class="agent-prop-list-container vertical-flexible">
+                        <th class="ao-key">Labels</th>
+                        <td class="ao-val">
+                            <div class="ao-list">
                                 {#each labels as _, index}
-                                <div class="edit-wrapper">
+                                <div class="ao-list-row">
                                     <input
-                                        class="form-control edit-text-box"
+                                        class="ao-input"
                                         type="text"
                                         placeholder="Typing here..."
                                         maxlength={30}
                                         bind:value={labels[index]}
                                         oninput={handleAgentChange}
                                     />
-                                    <div class="delete-icon">
+                                    <span class="ao-list-remove">
                                         <i
                                             class="bx bxs-no-entry"
                                             role="link"
@@ -275,11 +250,11 @@
                                             onkeydown={() => {}}
                                             onclick={() => removeLabel(index)}
                                         ></i>
-                                    </div>
+                                    </span>
                                 </div>
                                 {/each}
                                 {#if labels?.length < limit}
-                                <div class="list-add">
+                                <div class="ao-list-add">
                                     <i
                                         class="bx bx bx-list-plus"
                                         role="link"
@@ -293,74 +268,51 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Status
-                            </div>
-                        </th>
-                        <td>							
-                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
+                        <th class="ao-key">Status</th>
+                        <td class="ao-val">
+                            <label class="ao-check">
                                 <input
-                                    class="form-check-input"
+                                    class="ao-checkbox"
                                     type="checkbox"
                                     bind:checked={agent.disabled}
                                     onchange={handleAgentChange}
                                     id="disabled"
                                 />
-                                <label class="form-check-label" for="disabled">Disabled</label>
-                            </div>
+                                <span>Disabled</span>
+                            </label>
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key" style="vertical-align: middle">
-                            <div class="mt-1">
-                                Function visibility
-                            </div>
-                        </th>
-                        <td>							
-                            <div class="mt-2 mb-2">
-                                <Select
-                                    tag={'function-visibility-mode-select'}
-                                    containerStyles={'width: 50%; min-width: 100px;'}
-                                    placeholder={'Select'}
-                                    selectedValues={agent.function_visibility_mode ? [agent.function_visibility_mode] : []}
-                                    options={functionVisibilityModeOptions}
-                                    onselect={e => changeFunctionVisibilityMode(e)}
-                                />
-                            </div>
+                        <th class="ao-key">Function visibility</th>
+                        <td class="ao-val">
+                            <Select
+                                tag={'function-visibility-mode-select'}
+                                containerStyles={'width: 50%; min-width: 100px;'}
+                                placeholder={'Select'}
+                                selectedValues={agent.function_visibility_mode ? [agent.function_visibility_mode] : []}
+                                options={functionVisibilityModeOptions}
+                                onselect={e => changeFunctionVisibilityMode(e)}
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key" style="vertical-align: middle">
-                            <div class="mt-1">
-                                Max messages
-                            </div>
-                        </th>
-                        <td>							
-                            <div class="mt-2 mb-2">
-                                <input
-                                    type="number"
-                                    style="width: 50%; min-width: 100px;"
-                                    class="form-control text-center"
-                                    min={1}
-                                    max={1000}
-                                    step={1}
-                                    bind:value={agent.max_message_count}
-                                    oninput={handleAgentChange}
-                                />
-                            </div>
+                        <th class="ao-key">Max messages</th>
+                        <td class="ao-val">
+                            <input
+                                type="number"
+                                class="ao-input ao-input-number"
+                                min={1}
+                                max={1000}
+                                step={1}
+                                bind:value={agent.max_message_count}
+                                oninput={handleAgentChange}
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">
-                            <div class="mt-2 mb-2">
-                                Created Date
-                            </div>
-                        </th>
-                        <td>
-                            <div class="mt-2 mb-2">
-                                {utcToLocal(agent.created_datetime)}
-                            </div>
+                        <th class="ao-key">Created Date</th>
+                        <td class="ao-val">
+                            {utcToLocal(agent.created_datetime)}
                         </td>
                     </tr>
                 </tbody>
@@ -368,3 +320,5 @@
         </div>
     </div>
 </div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
index a7477b99..ed0b2dc4 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
@@ -10,56 +10,56 @@
     let { agent } = $props();
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Routing</h5>
+<div class="arr-card">
+    <div class="arr-card-body">
+        <div class="arr-header">
+            <h5 class="arr-title">Routing</h5>
         </div>
 
         {#each agent.routing_rules as rule, idx (idx)}
-        <div class="routing-rule-container">
+        <div class="arr-rule">
             <CollapsibleCard open={idx === 0}>
                 {#snippet header()}
-                    <h5 class="rule-header">{`Rule #${idx + 1}`}</h5>
+                    <h5 class="arr-rule-header">{`Rule #${idx + 1}`}</h5>
                 {/snippet}
                 {#snippet body()}
-                    <div class="table-responsive rule-body">
-                        <table class="table">
+                    <div class="arr-rule-body">
+                        <table class="arr-table">
                             <tbody>
                                 {#if !!rule.field}
-                                <tr>
-                                    <th class="agent-prop-key">Field</th>
-                                    <td>{rule.field}</td>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Field</th>
+                                    <td class="arr-value">{rule.field}</td>
                                 </tr>
                                 {/if}
                                 {#if !!rule.description}
-                                <tr>
-                                    <th class="agent-prop-key">Description</th>
-                                    <td>{rule.description}</td>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Description</th>
+                                    <td class="arr-value">{rule.description}</td>
                                 </tr>
                                 {/if}
                                 {#if !!rule.fieldType}
-                                <tr>
-                                    <th class="agent-prop-key">Field Type</th>
-                                    <td>{rule.fieldType}</td>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Field Type</th>
+                                    <td class="arr-value">{rule.fieldType}</td>
                                 </tr>
                                 {/if}
-                                <tr>
-                                    <th class="agent-prop-key">Required</th>
-                                    <td>{rule.required ? `Yes` : `No`}</td>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Required</th>
+                                    <td class="arr-value">{rule.required ? `Yes` : `No`}</td>
                                 </tr>
                                 {#if !!rule.redirectTo}
-                                <tr>
-                                    <th class="agent-prop-key">Redirect to Agent</th>
-                                    <td style="cursor: pointer;" onclick={() => directToAgentPage(rule.redirectTo)}>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Redirect to Agent</th>
+                                    <td class="arr-value arr-value-link" onclick={() => directToAgentPage(rule.redirectTo)}>
                                         {rule.redirect_to_agent || ''}
                                     </td>
                                 </tr>
                                 {/if}
                                 {#if !!rule.type}
-                                <tr>
-                                    <th class="agent-prop-key">Type</th>
-                                    <td>{rule.type}</td>
+                                <tr class="arr-tr">
+                                    <th class="arr-key">Type</th>
+                                    <td class="arr-value">{rule.type}</td>
                                 </tr>
                                 {/if}
                             </tbody>
@@ -70,4 +70,5 @@
         </div>
         {/each}
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
index e911f741..8e205795 100644
--- a/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base-item.svelte
@@ -1,6 +1,7 @@
 <script>
     import { slide } from 'svelte/transition';
 	import { DECIMAL_REGEX } from "$lib/helpers/constants";
+	import Select from '$lib/common/dropdowns/Select.svelte';
 
     const duration = 200;
 
@@ -27,6 +28,15 @@
         oncollapse
     } = $props();
 
+    const kbOptions = $derived(
+        knowledgeBaseOptions
+            .filter((/** @type {any} */ o) => !!o.name)
+            .map((/** @type {any} */ o) => ({ label: o.displayName || o.name, value: JSON.stringify(o) }))
+    );
+    const selectedKb = $derived(
+        knowledgeBaseOptions.find((/** @type {any} */ o) => o.name === knowledge.name)
+    );
+
     /** @param {any} e */
     function validateConfidenceInput(e) {
         const reg = new RegExp(DECIMAL_REGEX, 'g');
@@ -51,10 +61,12 @@
 
     /** @param {any} e */
     function changeKnowledgeBase(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        // Parent expects a JSON-stringified {name, type, ...} object; emit empty object on clear
         onchange?.({
             knowledgeIdx: knwoledgeIdx,
             field: 'knowledge',
-            value: e.target.value
+            value: values[0] || JSON.stringify({ name: '', type: '' })
         });
     }
 
@@ -75,12 +87,12 @@
     }
 </script>
 
-<div class="utility-wrapper">
-    <div class="utility-row utility-row-primary">
-        <div class="utility-label fw-bold">
-            <div class="line-align-center">
+<div class="kbi-wrapper">
+    <div class="kbi-row kbi-row-primary">
+        <div class="kbi-label kbi-label-strong">
+            <div class="kbi-cell">
                 <i
-                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class="bx bx-chevron-right kbi-collapse-toggle"
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
@@ -88,37 +100,36 @@
                     onclick={() => toggleCollapse()}
                 ></i>
             </div>
-            <div class="line-align-center">
+            <div class="kbi-cell">
                 {`Collection #${knwoledgeIdx + 1}`}
             </div>
-            <div class="utility-tooltip">
-                <div class="line-align-center">
+            <div class="kbi-tooltip-wrap">
+                <label class="kbi-checkbox">
                     <input
                         type="checkbox"
-                        class="form-check-input"
+                        class="kbi-checkbox-input"
                         checked={!knowledge.disabled}
                         onchange={e => toggleKnowledgeBase(e)}
                     />
-                </div>
+                    <span class="kbi-checkbox-box"></span>
+                </label>
             </div>
         </div>
-        <div class="utility-value">
-            <div class="utility-input line-align-center">
-                <select
-                    class="form-select"
+        <div class="kbi-value">
+            <div class="kbi-input-wrap kbi-cell">
+                <Select
+                    tag={`knowledge-base-${knwoledgeIdx}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a collection'}
                     disabled={knowledge.disabled}
-                    onchange={e => changeKnowledgeBase(e)}
-                >
-                    {#each [...knowledgeBaseOptions] as option}
-                        <option value={`${JSON.stringify(option)}`} selected={option.name == knowledge.name}>
-                            {option.displayName || option.name}
-                        </option>
-                    {/each}
-                </select>
+                    selectedValues={selectedKb ? [JSON.stringify(selectedKb)] : []}
+                    options={kbOptions}
+                    onselect={e => changeKnowledgeBase(e)}
+                />
             </div>
-            <div class="utility-delete line-align-center">
+            <div class="kbi-delete kbi-cell">
                 <i
-                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    class="bx bxs-no-entry kbi-delete-icon"
                     role="link"
                     tabindex="0"
                     onkeydown={() => {}}
@@ -129,27 +140,29 @@
     </div>
 
     {#if !collapsed}
-    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
-        <div class="utility-content">
-            <div class="utility-list-item">
-                <div class="utility-label line-align-center">
+    <div class="kbi-row kbi-row-secondary" transition:slide={{ duration: duration }}>
+        <div class="kbi-content">
+            <div class="kbi-list-item">
+                <div class="kbi-label kbi-cell">
                     {'Confidence'}
                 </div>
-                <div class="utility-value">
-                    <div class="utility-input line-align-center">
+                <div class="kbi-value">
+                    <div class="kbi-input-wrap kbi-cell">
                         <input
                             type="text"
-                            class="form-control text-center"
+                            class="kbi-input kbi-input-number"
                             bind:value={knowledge.confidence}
                             disabled={knowledge.disabled}
                             onkeydown={e => validateConfidenceInput(e)}
                             onblur={e => changeConfidence(e)}
                         />
                     </div>
-                    <div class="utility-delete line-align-center"></div>
+                    <div class="kbi-delete kbi-cell"></div>
                 </div>
             </div>
         </div>
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
index 25f74a2e..a4158856 100644
--- a/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/knowledge-bases/agent-knowledge-base.svelte
@@ -192,14 +192,14 @@
     }
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Knowledge Base</h5>
-            <h6 class="mt-1 mb-3">Make your Agent have memory</h6>
+<div class="akb-card">
+    <div class="akb-card-body">
+        <div class="akb-header">
+            <h5 class="akb-title">Knowledge Base</h5>
+            <h6 class="akb-subtitle">Make your Agent have memory</h6>
         </div>
 
-        <div class="agent-utility-container" bind:this={scrollContainer}>
+        <div class="akb-list" bind:this={scrollContainer}>
             {#each innerKnowledgeBases as knowledge, uid (uid)}
                 <AgentKnowledgeBaseItem
                     knowledge={knowledge}
@@ -214,19 +214,18 @@
             {/each}
 
             {#if innerKnowledgeBases.length < limit}
-                <div class="add-utility">
+                <div class="akb-add">
                     <button
                         type="button"
-                        class="btn btn-primary"
+                        class="akb-add-btn"
                         onclick={() => addKnowledgeBase()}
                     >
-                        <span>
-                            <i class="bx bx-plus"></i>
-                            <span>Add Knowledge Base</span>
-                        </span>
+                        <i class="bx bx-plus"></i>
+                        <span>Add Knowledge Base</span>
                     </button>
                 </div>
             {/if}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
index 63aba6c3..f36cf2fa 100644
--- a/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/llm-configs/chat-config.svelte
@@ -1,5 +1,6 @@
 <script>
     import { slide } from 'svelte/transition';
+    import Select from '$lib/common/dropdowns/Select.svelte';
     import { INTEGER_REGEX } from '$lib/helpers/constants';
     import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
 
@@ -82,7 +83,8 @@
 
     /** @param {any} e */
     async function changeProvider(e) {
-        const provider = e.target.value;
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        const provider = values[0] || '';
         config.provider = provider || null;
 
         if (!provider) {
@@ -103,8 +105,9 @@
 
     /** @param {any} e */
     function changeModel(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         config.is_inherit = false;
-        config.model = e.target.value || null;
+        config.model = values[0] || null;
         onModelChanged(config);
         config.reasoning_effort_level = null;
         handleAgentChange();
@@ -131,7 +134,8 @@
 
     /** @param {any} e */
     function changeReasoningEffortLevel(e) {
-        config.reasoning_effort_level = e.target.value || null;
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        config.reasoning_effort_level = values[0] || null;
         handleAgentChange();
     }
 
@@ -169,66 +173,68 @@
     }
 </script>
 
-<div class="agent-config-container">
+<div class="cc-card">
     <div
-        class="config-header text-center"
+        class="cc-header"
         role="button"
         tabindex="0"
         onclick={() => collapsed = !collapsed}
         onkeydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
     >
-        <h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
+        <h6 class="cc-header-title">
             <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
             Chat
         </h6>
         {#if agent.llm_config?.is_inherit}
-            <div class="mb-3">
-                <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>
+            <div class="cc-inherit-badge">
+                <i class="bx bx-copy"></i> <span class="cc-muted">Inherited</span>
             </div>
         {/if}
     </div>
 
     {#if !collapsed}
-    <div transition:slide={{ duration: 200 }}>
-        <div class="mb-3 row llm-config-item">
-            <label for="chat-provider" class="col-form-label llm-config-label">
+    <div transition:slide={{ duration: 200 }} class="cc-body">
+        <div class="cc-field">
+            <label for="chat-provider" class="cc-label">
                 Provider
             </label>
-            <div class="llm-config-input">
-                <select class="form-select" id="chat-provider" value={config.provider} onchange={e => changeProvider(e)}>
-                    {#each providers as option}
-                        <option value={option} selected={option == config.provider}>
-                            {option}
-                        </option>
-                    {/each}
-                </select>
+            <div class="cc-input-wrap">
+                <Select
+                    tag={'chat-provider'}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a provider'}
+                    selectedValues={config.provider ? [config.provider] : []}
+                    options={providers.filter(p => !!p).map(p => ({ label: p, value: p }))}
+                    onselect={e => changeProvider(e)}
+                />
             </div>
         </div>
 
-        <div class="mb-3 row llm-config-item">
-            <label for="chat-model" class="col-form-label llm-config-label">
+        <div class="cc-field">
+            <label for="chat-model" class="cc-label">
                 Model
             </label>
-            <div class="llm-config-input">
-                <select class="form-select" id="chat-model" value={config.model} disabled={models.length === 0} onchange={e => changeModel(e)}>
-                    {#each models as option}
-                        <option value={option.name} selected={option.name == config.model}>
-                            {option.name}
-                        </option>
-                    {/each}
-                </select>
+            <div class="cc-input-wrap">
+                <Select
+                    tag={'chat-model'}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a model'}
+                    disabled={models.length === 0}
+                    selectedValues={config.model ? [config.model] : []}
+                    options={models.map(m => ({ label: m.name, value: m.name }))}
+                    onselect={e => changeModel(e)}
+                />
             </div>
         </div>
 
-        <div class="mb-3 row llm-config-item">
-            <label for="chat-max-recursive-depth" class="col-form-label llm-config-label">
+        <div class="cc-field">
+            <label for="chat-max-recursive-depth" class="cc-label">
                 Max recursive depth
             </label>
-            <div class="llm-config-input">
+            <div class="cc-input-wrap">
                 <input
-                    class="form-control"
+                    class="cc-input cc-input-number"
                     id="chat-max-recursive-depth"
-                    style="text-align: center;"
                     type="number"
                     min={recursiveDepthLowerLimit}
                     value={config.max_recursion_depth}
@@ -238,15 +244,14 @@
             </div>
         </div>
 
-        <div class="mb-3 row llm-config-item">
-            <label for="chat-max-output-tokens" class="col-form-label llm-config-label">
+        <div class="cc-field">
+            <label for="chat-max-output-tokens" class="cc-label">
                 Max output tokens
             </label>
-            <div class="llm-config-input">
+            <div class="cc-input-wrap">
                 <input
-                    class="form-control"
+                    class="cc-input cc-input-number"
                     id="chat-max-output-tokens"
-                    style="text-align: center;"
                     type="number"
                     value={config.max_output_tokens}
                     onkeydown={e => validateIntegerInput(e)}
@@ -256,21 +261,24 @@
         </div>
 
         {#if isReasoningModel}
-        <div class="mb-3 row llm-config-item">
-            <label for="chat-reasoning-effort" class="col-form-label llm-config-label">
+        <div class="cc-field">
+            <label for="chat-reasoning-effort" class="cc-label">
                 Reasoning level
             </label>
-            <div class="llm-config-input">
-                <select class="form-select" id="chat-reasoning-effort" value={config.reasoning_effort_level} onchange={e => changeReasoningEffortLevel(e)}>
-                    {#each reasoningLevelOptions as option}
-                        <option value={option.value} selected={option.value == config.reasoning_effort_level}>
-                            {option.label}
-                        </option>
-                    {/each}
-                </select>
+            <div class="cc-input-wrap">
+                <Select
+                    tag={'chat-reasoning-effort'}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a level'}
+                    selectedValues={config.reasoning_effort_level ? [config.reasoning_effort_level] : []}
+                    options={reasoningLevelOptions.filter(o => !!o.value)}
+                    onselect={e => changeReasoningEffortLevel(e)}
+                />
             </div>
         </div>
         {/if}
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte b/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
index a47ce911..54b83875 100644
--- a/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/llm-configs/llm-basic-config.svelte
@@ -1,5 +1,6 @@
 <script>
     import { slide } from 'svelte/transition';
+    import Select from '$lib/common/dropdowns/Select.svelte';
 
     /**
      * @type {{
@@ -70,7 +71,8 @@
 
     /** @param {any} e */
     async function changeProvider(e) {
-        const provider = e.target.value;
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        const provider = values[0] || '';
         config.provider = provider || null;
 
         if (!provider) {
@@ -87,56 +89,61 @@
 
     /** @param {any} e */
     function changeModel(e) {
-        config.model = e.target.value || null;
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+        config.model = values[0] || null;
         handleAgentChange();
     }
 </script>
 
-<div class="agent-config-container">
+<div class="bc-card">
     <div
-        class="config-header text-center"
+        class="bc-header"
         role="button"
         tabindex="0"
         onclick={() => collapsed = !collapsed}
         onkeydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
     >
-        <h6 class="mt-1 mb-3 d-flex align-items-center justify-content-center gap-2">
+        <h6 class="bc-header-title">
             <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
             {title}
         </h6>
     </div>
 
     {#if !collapsed}
-    <div transition:slide={{ duration: 200 }}>
-        <div class="mb-3 row llm-config-item">
-            <label for={`provider-${title}`} class="col-form-label llm-config-label">
+    <div transition:slide={{ duration: 200 }} class="bc-body">
+        <div class="bc-field">
+            <label for={`provider-${title}`} class="bc-label">
                 Provider
             </label>
-            <div class="llm-config-input">
-                <select class="form-select" id={`provider-${title}`} value={config.provider} onchange={e => changeProvider(e)}>
-                    {#each providers as option}
-                        <option value={option} selected={option == config.provider}>
-                            {option}
-                        </option>
-                    {/each}
-                </select>
+            <div class="bc-input-wrap">
+                <Select
+                    tag={`provider-${title}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a provider'}
+                    selectedValues={config.provider ? [config.provider] : []}
+                    options={providers.filter(p => !!p).map(p => ({ label: p, value: p }))}
+                    onselect={e => changeProvider(e)}
+                />
             </div>
         </div>
 
-        <div class="mb-3 row llm-config-item">
-            <label for={`model-${title}`} class="col-form-label llm-config-label">
+        <div class="bc-field">
+            <label for={`model-${title}`} class="bc-label">
                 Model
             </label>
-            <div class="llm-config-input">
-                <select class="form-select" id={`model-${title}`} value={config.model} disabled={models.length === 0} onchange={e => changeModel(e)}>
-                    {#each models as option}
-                        <option value={option.name} selected={option.name == config.model}>
-                            {option.name}
-                        </option>
-                    {/each}
-                </select>
+            <div class="bc-input-wrap">
+                <Select
+                    tag={`model-${title}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a model'}
+                    disabled={models.length === 0}
+                    selectedValues={config.model ? [config.model] : []}
+                    options={models.map(m => ({ label: m.name, value: m.name }))}
+                    onselect={e => changeModel(e)}
+                />
             </div>
         </div>
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
index 5d9dc8a6..2919b43a 100644
--- a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool-item.svelte
@@ -1,5 +1,6 @@
 <script>
     import { slide } from 'svelte/transition';
+    import Select from '$lib/common/dropdowns/Select.svelte';
 
     const duration = 200;
     const limit = 10;
@@ -29,6 +30,12 @@
         oncollapse
     } = $props();
 
+    const toolOptions = $derived(
+        (mcpOptions.find((/** @type {any} */ x) => x.id === mcp.server_id)?.tools || [])
+            .filter((/** @type {string} */ t) => !!t)
+            .map((/** @type {string} */ t) => ({ label: t, value: t }))
+    );
+
     /** @param {any} e */
     function toggleMcp(e) {
         ontoggle?.({
@@ -58,10 +65,11 @@
 
     /** @param {any} e */
     function changeMcp(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         onchange?.({
             mcpIdx: mcpIndex,
             field: 'mcp',
-            value: e.target.value
+            value: values[0] || ''
         });
     }
 
@@ -71,11 +79,12 @@
      * @param {string} type
      */
     function changeMcpItem(e, fid, type) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         onchange?.({
             mcpIdx: mcpIndex,
             field: type,
             itemIdx: fid,
-            value: e.target.value
+            value: values[0] || ''
         });
     }
 
@@ -95,12 +104,12 @@
     }
 </script>
 
-<div class="utility-wrapper">
-    <div class="utility-row utility-row-primary">
-        <div class="utility-label fw-bold">
-            <div class="line-align-center">
+<div class="mti-wrapper">
+    <div class="mti-row mti-row-primary">
+        <div class="mti-label mti-label-strong">
+            <div class="mti-cell">
                 <i
-                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class="bx bx-chevron-right mti-collapse-toggle"
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
@@ -108,37 +117,36 @@
                     onclick={() => toggleCollapse()}
                 ></i>
             </div>
-            <div class="line-align-center">
+            <div class="mti-cell">
                 {`MCP #${mcpIndex + 1}`}
             </div>
-            <div class="utility-tooltip">
-                <div class="line-align-center">
+            <div class="mti-tooltip-wrap">
+                <label class="mti-checkbox">
                     <input
                         type="checkbox"
-                        class="form-check-input"
+                        class="mti-checkbox-input"
                         checked={!mcp.disabled}
                         onchange={e => toggleMcp(e)}
                     />
-                </div>
+                    <span class="mti-checkbox-box"></span>
+                </label>
             </div>
         </div>
-        <div class="utility-value">
-            <div class="utility-input line-align-center">
-                <select
-                    class="form-select"
+        <div class="mti-value">
+            <div class="mti-input-wrap mti-cell">
+                <Select
+                    tag={`mcp-server-${mcpIndex}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a server'}
                     disabled={mcp.disabled}
-                    onchange={e => changeMcp(e)}
-                >
-                    {#each [...mcpOptions] as option}
-                        <option value={option.id} selected={option.id == mcp.server_id}>
-                            {option.displayName || option.name}
-                        </option>
-                    {/each}
-                </select>
+                    selectedValues={mcp.server_id ? [mcp.server_id] : []}
+                    options={mcpOptions.filter(o => !!o.id).map(o => ({ label: o.displayName || o.name, value: o.id }))}
+                    onselect={e => changeMcp(e)}
+                />
             </div>
-            <div class="utility-delete line-align-center">
+            <div class="mti-delete mti-cell">
                 <i
-                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    class="bx bxs-no-entry mti-delete-icon"
                     role="link"
                     tabindex="0"
                     onkeydown={() => {}}
@@ -149,48 +157,46 @@
     </div>
 
     {#if !collapsed}
-    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
-        <div class="utility-content">
-            <div class="utility-list-item">
-                <div class="utility-label line-align-center">
+    <div class="mti-row mti-row-secondary" transition:slide={{ duration: duration }}>
+        <div class="mti-content">
+            <div class="mti-list-item">
+                <div class="mti-label mti-cell">
                     {'Server'}
                 </div>
-                <div class="utility-value">
-                    <div class="utility-input line-align-center">
+                <div class="mti-value">
+                    <div class="mti-input-wrap mti-cell">
                         <input
                             type="text"
-                            class="form-control"
+                            class="mti-input"
                             disabled
                             value={mcp.server_id}
                         />
                     </div>
-                    <div class="utility-delete line-align-center"></div>
+                    <div class="mti-delete mti-cell"></div>
                 </div>
             </div>
         </div>
-        <div class="utility-content">
+        <div class="mti-content">
             {#each mcp.functions as fn, fid (fid)}
-                <div class="utility-list-item">
-                    <div class="utility-label line-align-center">
+                <div class="mti-list-item">
+                    <div class="mti-label mti-cell">
                         {fid === 0 ? 'Tools' : ''}
                     </div>
-                    <div class="utility-value">
-                        <div class="utility-input line-align-center">
-                            <select
-                                class="form-select"
+                    <div class="mti-value">
+                        <div class="mti-input-wrap mti-cell">
+                            <Select
+                                tag={`mcp-fn-${mcpIndex}-${fid}`}
+                                containerStyles={'width: 100%;'}
+                                placeholder={'Select a tool'}
                                 disabled={mcp.disabled}
-                                onchange={e => changeMcpItem(e, fid, 'function')}
-                            >
-                                {#each [...mcpOptions.find(x => x.id === mcp.server_id)?.tools || []] as option}
-                                    <option value={option} selected={option == fn.name}>
-                                        {option}
-                                    </option>
-                                {/each}
-                            </select>
+                                selectedValues={fn.name ? [fn.name] : []}
+                                options={toolOptions}
+                                onselect={e => changeMcpItem(e, fid, 'function')}
+                            />
                         </div>
-                        <div class="utility-delete line-align-center">
+                        <div class="mti-delete mti-cell">
                             <i
-                                class="bx bxs-no-entry text-danger clickable fs-6"
+                                class="bx bxs-no-entry mti-delete-icon"
                                 role="link"
                                 tabindex="0"
                                 onkeydown={() => {}}
@@ -202,13 +208,13 @@
             {/each}
 
             {#if mcp.functions?.length < limit}
-                <div class="utility-list-item">
-                    <div class="utility-label">
+                <div class="mti-list-item">
+                    <div class="mti-label">
                         {mcp.functions.length === 0 ? 'Functions' : ''}
                     </div>
-                    <div class="utility-value">
+                    <div class="mti-value">
                         <i
-                            class="bx bx-list-plus add-list clickable fs-6"
+                            class="bx bx-list-plus mti-add-list"
                             data-bs-toggle="tooltip"
                             data-bs-placement="top"
                             title="Add function"
@@ -223,4 +229,6 @@
         </div>
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
index 38ea7dcc..8816b753 100644
--- a/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/mcp-tools/agent-mcp-tool.svelte
@@ -214,14 +214,14 @@
     }
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">MCP Tools</h5>
-            <h6 class="mt-1 mb-3">Tools powered by MCP Servers</h6>
+<div class="amt-card">
+    <div class="amt-card-body">
+        <div class="amt-header">
+            <h5 class="amt-title">MCP Tools</h5>
+            <h6 class="amt-subtitle">Tools powered by MCP Servers</h6>
         </div>
 
-        <div class="agent-utility-container" bind:this={scrollContainer}>
+        <div class="amt-list" bind:this={scrollContainer}>
             {#each innerMcps as mcp, uid (uid)}
                 <AgentMcpToolItem
                     mcp={mcp}
@@ -237,19 +237,18 @@
             {/each}
 
             {#if innerMcps.length < limit}
-                <div class="add-utility">
+                <div class="amt-add">
                     <button
                         type="button"
-                        class="btn btn-primary"
+                        class="amt-add-btn"
                         onclick={() => addMcp()}
                     >
-                        <span>
-                            <i class="bx bx-plus"></i>
-                            <span>Add MCP</span>
-                        </span>
+                        <i class="bx bx-plus"></i>
+                        <span>Add MCP</span>
                     </button>
                 </div>
             {/if}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
index ba2ee3df..69c0ec52 100644
--- a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule-item.svelte
@@ -1,6 +1,7 @@
 <script>
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 
     /**
      * @type {{
@@ -44,10 +45,11 @@
      * @param {string} field
      */
     function changeRule(e, field) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         onchange?.({
             ruleIdx: ruleIndex,
             field: field,
-            value: e?.target?.value || ''
+            value: values[0] || ''
         });
     }
 
@@ -69,12 +71,12 @@
     }
 </script>
 
-<div class="utility-wrapper">
-    <div class="utility-row utility-row-primary">
-        <div class="utility-label fw-bold">
-            <div class="line-align-center">
+<div class="ari-wrapper">
+    <div class="ari-row ari-row-primary">
+        <div class="ari-label ari-label-strong">
+            <div class="ari-cell">
                 <i
-                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class="bx bx-chevron-right ari-collapse-toggle"
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
@@ -82,24 +84,23 @@
                     onclick={() => toggleCollapse()}
                 ></i>
             </div>
-            <div class="line-align-center">
+            <div class="ari-cell">
                 {`Rule #${ruleIndex + 1}`}
             </div>
-            <div class="utility-tooltip">
-                <div class="line-align-center">
+            <div class="ari-tooltip-wrap">
+                <label class="ari-checkbox">
                     <input
                         type="checkbox"
-                        class="form-check-input"
-                        style="margin-top: 0;"
+                        class="ari-checkbox-input"
                         checked={!rule.disabled}
                         onchange={e => toggleRule(e, 'rule')}
                     />
-                </div>
+                    <span class="ari-checkbox-box"></span>
+                </label>
                 {#if rule.statement}
-                <div class="line-align-center">
+                <div class="ari-cell">
                     <i
-                        class="bx bx-info-circle text-primary fs-6"
-                        style="padding-top: 2px;"
+                        class="bx bx-info-circle ari-info-icon"
                         id={`rule-statement-${ruleIndex}`}
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
@@ -124,23 +125,21 @@
                 {/if}
             </div>
         </div>
-        <div class="utility-value">
-            <div class="utility-input line-align-center">
-                <select
-                    class="form-select"
+        <div class="ari-value">
+            <div class="ari-input-wrap ari-cell">
+                <Select
+                    tag={`rule-trigger-${ruleIndex}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a trigger'}
                     disabled={rule.disabled}
-                    onchange={e => changeRule(e, 'rule')}
-                >
-                    {#each [...ruleOptions] as option}
-                        <option value={option.name} selected={option.name == rule.trigger_name}>
-                            {option.displayName || option.name}
-                        </option>
-                    {/each}
-                </select>
+                    selectedValues={rule.trigger_name ? [rule.trigger_name] : []}
+                    options={ruleOptions.filter(o => !!o.name).map(o => ({ label: o.displayName || o.name, value: o.name }))}
+                    onselect={e => changeRule(e, 'rule')}
+                />
             </div>
-            <div class="utility-delete line-align-center">
+            <div class="ari-delete ari-cell">
                 <i
-                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    class="bx bxs-no-entry ari-delete-icon"
                     role="link"
                     tabindex="0"
                     onkeydown={() => {}}
@@ -149,4 +148,6 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
index 7225ba35..d35d42ae 100644
--- a/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/rules/agent-rule.svelte
@@ -248,14 +248,14 @@
     {errorText}
 />
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Triggers & Rules</h5>
-            <h6 class="mt-1 mb-3">Wake-up your agent by rules</h6>
+<div class="ar-card">
+    <div class="ar-card-body">
+        <div class="ar-header">
+            <h5 class="ar-title">Triggers & Rules</h5>
+            <h6 class="ar-subtitle">Wake-up your agent by rules</h6>
         </div>
 
-        <div class="agent-utility-container" bind:this={scrollContainer}>
+        <div class="ar-list" bind:this={scrollContainer}>
             {#each innerRules as rule, uid (uid)}
                 <AgentRuleItem
                     rule={rule}
@@ -271,19 +271,19 @@
             {/each}
 
             {#if innerRules.length < limit}
-                <div class="add-utility">
+                <div class="ar-add">
                     <button
                         type="button"
-                        class="btn btn-primary"
+                        class="ar-add-btn"
                         onclick={() => addRule()}
                     >
-                        <span>
-                            <i class="bx bx-plus"></i>
-                            <span>Add Rule</span>
-                        </span>
+                        <i class="bx bx-plus"></i>
+                        <span>Add Rule</span>
                     </button>
                 </div>
             {/if}
         </div>
     </div>
 </div>
+
+
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
index 51f80cc4..6376ea6c 100644
--- 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
@@ -4,6 +4,7 @@
     import { INTEGER_REGEX } from '$lib/helpers/constants';
     import { LlmModelCapability, LlmModelType, ReasoningEffortLevel, ResponseFormat } from '$lib/helpers/enums';
     import { getLlmConfigs } from '$lib/services/llm-provider-service';
+    import Select from '$lib/common/dropdowns/Select.svelte';
 
     /**
      * @type {{
@@ -88,7 +89,8 @@
 
     /** @param {any} e */
     function changeResponseFormat(e) {
-        template.response_format = e.target.value || null;
+        const value = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || null;
+        template.response_format = value;
         handleAgentChange();
     }
 
@@ -114,7 +116,7 @@
 
     /** @param {any} e */
     function changeProvider(e) {
-        const provider = e.target.value;
+        const provider = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || '';
         if (!template.llm_config) {
             template.llm_config = { provider: null, model: null };
         }
@@ -136,10 +138,11 @@
 
     /** @param {any} e */
     function changeModel(e) {
+        const value = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || null;
         if (!template.llm_config) {
             template.llm_config = { provider: null, model: null };
         }
-        template.llm_config.model = e.target.value || null;
+        template.llm_config.model = value;
         template.llm_config.reasoning_effort_level = null;
         reasoningLevelOptions = getReasoningLevelOptions(template.llm_config.model);
         handleAgentChange();
@@ -157,10 +160,11 @@
 
     /** @param {any} e */
     function changeReasoningEffortLevel(e) {
+        const value = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value)[0] || null;
         if (!template.llm_config) {
             template.llm_config = { provider: null, model: null };
         }
-        template.llm_config.reasoning_effort_level = e.target.value || null;
+        template.llm_config.reasoning_effort_level = value;
         handleAgentChange();
     }
 
@@ -173,61 +177,55 @@
     }
 </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 class="tplc-content">
+    <div class="tplc-section">
+        <h6 class="tplc-section-title">Template Configuration</h6>
+        <div class="tplc-field">
+            <label for="tpl-response-format" class="tplc-label">Response format</label>
+            <Select
+                tag={'tpl-response-format'}
+                containerStyles={'width: 100%;'}
+                placeholder={'Select a format'}
+                selectedValues={template.response_format ? [template.response_format] : []}
+                options={responseFormatOptions.filter(o => !!o.value)}
+                onselect={e => changeResponseFormat(e)}
+            />
         </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>
+    <hr class="tplc-divider" />
+
+    <div class="tplc-section">
+        <h6 class="tplc-section-title">LLM Configuration</h6>
+        <div class="tplc-field">
+            <label for="tpl-provider" class="tplc-label">Provider</label>
+            <Select
+                tag={'tpl-provider'}
+                containerStyles={'width: 100%;'}
+                placeholder={'Select a provider'}
+                selectedValues={template.llm_config?.provider ? [template.llm_config.provider] : []}
+                options={providers.filter(p => !!p).map(p => ({ label: p, value: p }))}
+                onselect={e => changeProvider(e)}
+            />
         </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 || ''}
+        <div class="tplc-field">
+            <label for="tpl-model" class="tplc-label">Model</label>
+            <Select
+                tag={'tpl-model'}
+                containerStyles={'width: 100%;'}
+                placeholder={'Select a model'}
                 disabled={models.length === 0 || !template.llm_config?.provider}
-                onchange={e => changeModel(e)}
-            >
-                {#each models as option}
-                    <option value={option.name} selected={option.name === (template.llm_config?.model || '')}>
-                        {option.name}
-                    </option>
-                {/each}
-            </select>
+                selectedValues={template.llm_config?.model ? [template.llm_config.model] : []}
+                options={models.map(m => ({ label: m.name, value: m.name }))}
+                onselect={e => changeModel(e)}
+            />
         </div>
 
-        <div class="config-field">
-            <label for="tpl-max-tokens" class="form-label config-label">Max output tokens</label>
+        <div class="tplc-field">
+            <label for="tpl-max-tokens" class="tplc-label">Max output tokens</label>
             <input
-                class="form-control form-control-sm"
+                class="tplc-input"
                 id="tpl-max-tokens"
                 type="number"
                 value={template.llm_config?.max_output_tokens || ''}
@@ -237,20 +235,20 @@
         </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 class="tplc-field">
+            <label for="tpl-reasoning" class="tplc-label">Reasoning level</label>
+            <Select
+                tag={'tpl-reasoning'}
+                containerStyles={'width: 100%;'}
+                placeholder={'Select a level'}
+                selectedValues={template.llm_config?.reasoning_effort_level ? [template.llm_config.reasoning_effort_level] : []}
+                options={reasoningLevelOptions.filter(o => !!o.value)}
+                onselect={e => changeReasoningEffortLevel(e)}
+            />
         </div>
         {/if}
     </div>
 </div>
 
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
index 861fb889..5afb4277 100644
--- a/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/templates/agent-template.svelte
@@ -153,26 +153,21 @@
 </script>
 
 
-<div class="card agent-prompt-container">
-    <div class="card-header agent-prompt-header border-bottom">
-        <div class="d-flex">
-            <div class="flex-grow-1">
-                <h5 class="fw-semibold">{'Templates'}</h5>
-            </div>
-        </div>
+<div class="tpl-card">
+    <div class="tpl-card-header">
+        <h5 class="tpl-title">{'Templates'}</h5>
     </div>
-    <div class="card-body">
-        <div class="agent-prompt-body">
-            <div class="mb-2" style="display: flex; gap: 10px;">
-                <div class="line-align-center fw-bold">
+    <div class="tpl-card-body">
+        <div class="tpl-section">
+            <div class="tpl-section-header">
+                <div class="tpl-section-label">
                     {'Contents:'}
                 </div>
                 <div
-                    class="text-primary clickable"
+                    class="tpl-add-btn"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Add templates"
-                    style="font-size: 16px;"
                     role="button"
                     tabindex="0"
                     onclick={() => addTemplate()}
@@ -208,10 +203,10 @@
                 {/each}
             </NavBar>
 
-            <div class="template-content-wrapper">
-                <div class="template-editor-area">
+            <div class="tpl-content-wrapper">
+                <div class="tpl-editor-area">
                     <textarea
-                        class="form-control template-textarea"
+                        class="tpl-textarea"
                         placeholder="Enter your content"
                         value={selected_template.content}
                         oninput={(e) => changePrompt(e)}
@@ -221,7 +216,7 @@
 
                 <!-- Config toggle button -->
                 <div
-                    class="config-toggle-btn"
+                    class="tpl-config-toggle"
                     role="button"
                     tabindex="0"
                     title={showConfig ? 'Hide config' : 'Show config'}
@@ -232,7 +227,7 @@
                 </div>
 
                 <!-- Config panel -->
-                <div class="template-config-panel" class:expanded={showConfig}>
+                <div class="tpl-config-panel" class:expanded={showConfig}>
                     {#if showConfig}
                         <AgentTemplateConfig
                             bind:template={selected_template}
@@ -245,3 +240,6 @@
         </div>
     </div>
 </div>
+
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
index e7c6d153..5f0b4bda 100644
--- a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility-item.svelte
@@ -2,6 +2,7 @@
     import { slide } from 'svelte/transition';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 
     const duration = 200;
 
@@ -62,10 +63,11 @@
      * @param {any} e
 	 */
     function changeUtilityCategory(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-category',
-            value: e.target.value
+            value: values[0] || ''
         });
     }
 
@@ -73,10 +75,11 @@
      * @param {any} e
 	 */
     function changeUtilityName(e) {
+        const values = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
         onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-name',
-            value: e.target.value
+            value: values[0] || ''
         });
     }
 
@@ -155,12 +158,12 @@
     }
 </script>
 
-<div class="utility-wrapper">
-    <div class="utility-row utility-row-primary">
-        <div class="utility-label fw-bold">
-            <div class="line-align-center">
+<div class="aui-wrapper">
+    <div class="aui-row aui-row-primary">
+        <div class="aui-label aui-label-strong">
+            <div class="aui-cell">
                 <i
-                    class="bx bx-chevron-right clickable fs-6 collapse-toggle"
+                    class="bx bx-chevron-right aui-collapse-toggle"
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
@@ -168,37 +171,36 @@
                     onclick={() => toggleCollapse()}
                 ></i>
             </div>
-            <div class="line-align-center">
+            <div class="aui-cell">
                 {`Utility #${utilityIndex + 1}`}
             </div>
-            <div class="utility-tooltip">
-                <div class="line-align-center">
+            <div class="aui-tooltip-wrap">
+                <label class="aui-checkbox">
                     <input
                         type="checkbox"
-                        class="form-check-input"
+                        class="aui-checkbox-input"
                         checked={!utility.disabled}
                         onchange={e => toggleUtility(e)}
                     />
-                </div>
+                    <span class="aui-checkbox-box"></span>
+                </label>
             </div>
         </div>
-        <div class="utility-value">
-            <div class="utility-input line-align-center">
-                <select
-                    class="form-select"
+        <div class="aui-value">
+            <div class="aui-input-wrap aui-cell">
+                <Select
+                    tag={`utility-category-${utilityIndex}`}
+                    containerStyles={'width: 100%;'}
+                    placeholder={'Select a category'}
                     disabled={utility.disabled}
-                    onchange={e => changeUtilityCategory(e)}
-                >
-                    {#each utilityCategoryOptions as option}
-                        <option value={option.value} selected={option.value == utility.category}>
-                            {option.label}
-                        </option>
-                    {/each}
-                </select>
+                    selectedValues={utility.category ? [utility.category] : []}
+                    options={utilityCategoryOptions.filter(o => !!o.value)}
+                    onselect={e => changeUtilityCategory(e)}
+                />
             </div>
-            <div class="utility-delete line-align-center">
+            <div class="aui-delete aui-cell">
                 <i
-                    class="bx bxs-no-entry text-danger clickable fs-6"
+                    class="bx bxs-no-entry aui-delete-icon"
                     role="link"
                     tabindex="0"
                     onkeydown={() => {}}
@@ -209,18 +211,17 @@
     </div>
 
     {#if !collapsed}
-    <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
+    <div class="aui-row aui-row-secondary" transition:slide={{ duration: duration }}>
         {#if utility.category}
             {@const utilityOptions = getUtilityOptions(utilityMapper[utility.category]?.map((/** @type {any} */ x) => x.name), 'Select a utility')}
-            <div class="utility-content">
-                <div class="utility-list-item">
-                    <div class="utility-label d-flex" style="gap: 10px;">
-                        <div class="line-align-center">{'Name'}</div>
+            <div class="aui-content">
+                <div class="aui-list-item">
+                    <div class="aui-label aui-label-flex">
+                        <div class="aui-cell">{'Name'}</div>
                         {#if utility.name}
-                        <div class="line-align-center">
+                        <div class="aui-cell">
                             <i
-                                class="mdi mdi-refresh clickable fs-6"
-                                style="padding-top: 3px;"
+                                class="mdi mdi-refresh aui-refresh-icon"
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Reset"
@@ -232,54 +233,52 @@
                         </div>
                         {/if}
                     </div>
-                    <div class="utility-value">
-                        <div class="utility-input line-align-center">
-                            <select
-                                class="form-select"
+                    <div class="aui-value">
+                        <div class="aui-input-wrap aui-cell">
+                            <Select
+                                tag={`utility-name-${utilityIndex}`}
+                                containerStyles={'width: 100%;'}
+                                placeholder={'Select a utility'}
                                 disabled={utility.disabled}
-                                onchange={e => changeUtilityName(e)}
-                            >
-                                {#each utilityOptions as option}
-                                    <option value={option.value} selected={option.value == utility.name}>
-                                        {option.label}
-                                    </option>
-                                {/each}
-                            </select>
+                                selectedValues={utility.name ? [utility.name] : []}
+                                options={utilityOptions.filter(o => !!o.value)}
+                                onselect={e => changeUtilityName(e)}
+                            />
                         </div>
-                        <div class="utility-delete line-align-center"></div>
+                        <div class="aui-delete aui-cell"></div>
                     </div>
                 </div>
-                <div class="utility-list-item">
-                    <div class="utility-label line-align-center">
+                <div class="aui-list-item">
+                    <div class="aui-label aui-cell">
                         {'Visibility'}
                     </div>
-                    <div class="utility-value">
-                        <div class="utility-input line-align-center">
+                    <div class="aui-value">
+                        <div class="aui-input-wrap aui-cell">
                             <input
                                 type="text"
-                                class="form-control"
+                                class="aui-input"
                                 disabled={utility.disabled}
                                 maxlength={1000}
                                 value={utility.visibility_expression}
                                 onchange={e => changeUtilityVisibility(e)}
                             />
                         </div>
-                        <div class="utility-delete line-align-center"></div>
+                        <div class="aui-delete aui-cell"></div>
                     </div>
                 </div>
             </div>
         {/if}
         {#each utility.items as item, fid (fid)}
-            <div class="utility-content">
+            <div class="aui-content">
                 {#if item.function_name}
                     {@const description = getUtilityItemDescription(utility.category, utility.name, item.function_name)}
-                    <div class="utility-list-item">
-                        <div class="utility-label d-flex" style="gap: 10px;">
-                            <div class="line-align-center">{'Function'}</div>
+                    <div class="aui-list-item">
+                        <div class="aui-label aui-label-flex">
+                            <div class="aui-cell">{'Function'}</div>
                             {#if description}
-                            <div class="line-align-center">
+                            <div class="aui-cell">
                                 <i
-                                    class="bx bx-info-circle fs-6"
+                                    class="bx bx-info-circle aui-info-icon"
                                     id={`utility-${utilityIndex}-${fid}`}></i>
                                 <BotsharpTooltip
                                     containerClasses="agent-utility-desc"
@@ -299,18 +298,18 @@
                             </div>
                             {/if}
                         </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
+                        <div class="aui-value">
+                            <div class="aui-input-wrap aui-cell">
                                 <input
                                     type="text"
-                                    class="form-control"
+                                    class="aui-input"
                                     value={item.function_display_name}
                                     disabled
                                 />
                             </div>
-                            <div class="utility-delete line-align-center">
+                            <div class="aui-delete aui-cell">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
+                                    class="bx bxs-no-entry aui-delete-icon"
                                     role="link"
                                     tabindex="0"
                                     onkeydown={() => {}}
@@ -321,22 +320,22 @@
                     </div>
                 {/if}
                 {#if item.template_name}
-                    <div class="utility-list-item">
-                        <div class="utility-label line-align-center">
+                    <div class="aui-list-item">
+                        <div class="aui-label aui-cell">
                             {'Template'}
                         </div>
-                        <div class="utility-value">
-                            <div class="utility-input line-align-center">
+                        <div class="aui-value">
+                            <div class="aui-input-wrap aui-cell">
                                 <input
                                     type="text"
-                                    class="form-control"
+                                    class="aui-input"
                                     value={item.template_display_name}
                                     disabled
                                 />
                             </div>
-                            <div class="utility-delete line-align-center">
+                            <div class="aui-delete aui-cell">
                                 <i
-                                    class="bx bxs-no-entry text-danger clickable fs-6"
+                                    class="bx bxs-no-entry aui-delete-icon"
                                     role="link"
                                     tabindex="0"
                                     onkeydown={() => {}}
@@ -346,26 +345,28 @@
                         </div>
                     </div>
                 {/if}
-                <div class="utility-list-item">
-                    <div class="utility-label line-align-center">
+                <div class="aui-list-item">
+                    <div class="aui-label aui-cell">
                         {'Visibility'}
                     </div>
-                    <div class="utility-value">
-                        <div class="utility-input line-align-center">
+                    <div class="aui-value">
+                        <div class="aui-input-wrap aui-cell">
                             <input
                                 type="text"
-                                class="form-control"
+                                class="aui-input"
                                 disabled={utility.disabled}
                                 maxlength={1000}
                                 value={item.visibility_expression}
                                 onchange={e => changeUtilityItemVisibility(e, fid)}
                             />
                         </div>
-                        <div class="utility-delete line-align-center"></div>
+                        <div class="aui-delete aui-cell"></div>
                     </div>
                 </div>
             </div>
         {/each}
     </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
index 80670af0..d810160f 100644
--- a/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/utilities/agent-utility.svelte
@@ -253,34 +253,35 @@
 
 <svelte:window onresize={() => resizeWindow()}/>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-1 mb-3">Utilities</h5>
-            <h6 class="mt-1 mb-3">Tools shared across plugins</h6>
+<div class="au-card">
+    <div class="au-card-body">
+        <div class="au-header">
+            <h5 class="au-title">Utilities</h5>
+            <h6 class="au-subtitle">Tools shared across plugins</h6>
         </div>
 
-        <div class="agent-utility-container" bind:this={scrollContainer}>
+        <div class="au-list" bind:this={scrollContainer}>
             {#if !agent?.is_router}
-                <div class="merge-utility">
-                    <input
-                        type="checkbox"
-                        class="form-check-input"
-                        checked={agent?.merge_utility || false}
-                        onchange={e => toggleMergeUtility(e)}
-                    />
-                    <div class="fw-bold">
-                        Merge utilities
-                    </div>
-                    <div
-                        class="line-align-center"
+                <label class="au-merge">
+                    <span class="au-checkbox-wrap">
+                        <input
+                            type="checkbox"
+                            class="au-checkbox-input"
+                            checked={agent?.merge_utility || false}
+                            onchange={e => toggleMergeUtility(e)}
+                        />
+                        <span class="au-checkbox-box"></span>
+                    </span>
+                    <span class="au-merge-label">Merge utilities</span>
+                    <span
+                        class="au-merge-info"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="Merge with entry agent utilities"
                     >
-                        <i class="bx bx-info-circle fs-6"></i>
-                    </div>
-                </div>
+                        <i class="bx bx-info-circle"></i>
+                    </span>
+                </label>
             {/if}
 
             {#each innerUtilities as utility, uid (uid)}
@@ -301,19 +302,18 @@
             {/each}
 
             {#if innerUtilities.length < limit}
-                <div class="add-utility">
+                <div class="au-add">
                     <button
                         type="button"
-                        class="btn btn-primary"
+                        class="au-add-btn"
                         onclick={() => addUtility()}
                     >
-                        <span>
-                            <i class="bx bx-plus"></i>
-                            <span>Add utility</span>
-                        </span>
+                        <i class="bx bx-plus"></i>
+                        <span>Add utility</span>
                     </button>
                 </div>
             {/if}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index b99c656c..775524b9 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -37,8 +37,6 @@
     /** @type {any} */
     let agentUtilityCmp = $state(null);
     /** @type {any} */
-    // let agentKnowledgeBaseCmp = $state(null);
-    /** @type {any} */
     let agentEventRuleCmp = $state(null);
     /** @type {any} */
     let agentMcpToolCmp = $state(null);
@@ -61,8 +59,8 @@
     }
 </script>
 
-<div class="card">
-    <div class="card-body">
+<div class="at-card">
+    <div class="at-card-body">
         <NavBar
             disableDefaultStyles
             containerClasses={'nav-tabs-secondary'}
@@ -81,20 +79,21 @@
             {/each}
         </NavBar>
 
-        <div class:hide={selectedTab !== 'agent-llm-config'}>
+        <div class="at-pane" class:at-hide={selectedTab !== 'agent-llm-config'}>
             <AgentLlmConfig agent={agent} bind:this={agentLlmConfigCmp} {handleAgentChange} />
         </div>
-        <div class:hide={selectedTab !== 'agent-routing-rule'}>
+        <div class="at-pane" class:at-hide={selectedTab !== 'agent-routing-rule'}>
             <AgentRouting agent={agent} />
         </div>
-        <div class:hide={selectedTab !== 'agent-utility'}>
+        <div class="at-pane" class:at-hide={selectedTab !== 'agent-utility'}>
             <AgentUtility agent={agent} bind:this={agentUtilityCmp} {handleAgentChange} />
         </div>
-        <div class:hide={selectedTab !== 'agent-event-rule'}>
+        <div class="at-pane" class:at-hide={selectedTab !== 'agent-event-rule'}>
             <AgentEventRule agent={agent} bind:this={agentEventRuleCmp} {handleAgentChange} />
         </div>
-        <div class:hide={selectedTab !== 'agent-mcp-tool'}>
+        <div class="at-pane" class:at-hide={selectedTab !== 'agent-mcp-tool'}>
             <AgentMcpTool agent={agent} bind:this={agentMcpToolCmp} {handleAgentChange} />
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/[agentId]/build/+page.svelte b/src/routes/page/agent/[agentId]/build/+page.svelte
index 9b0952b5..597fb788 100644
--- a/src/routes/page/agent/[agentId]/build/+page.svelte
+++ b/src/routes/page/agent/[agentId]/build/+page.svelte
@@ -47,27 +47,4 @@
 	</Svelvet>
 </div>
 
-<style>
-	@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
-    #svelet-agent-build {
-        height: 80vh;
-        width: "100%";
-    }
-	.note {
-		font-family: 'Reenie Beanie', sans-serif;
-		position: absolute;
-		color: inherit;
-		width: 400px;
-		transform: rotate(-3deg);
-		font-weight: 200px;
-		font-size: 40px;
-	}
-	#state {
-		top: -30px;
-		left: 620px;
-	}
-	#groups {
-		top: 530px;
-		left: 490px;
-	}
-</style>
+
diff --git a/src/routes/page/agent/[agentId]/build/components/Agent.svelte b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
index b0687458..16448d12 100644
--- a/src/routes/page/agent/[agentId]/build/components/Agent.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
@@ -39,28 +39,4 @@
 	</div>
 </Node>
 
-<style>
-	.node {
-		box-sizing: border-box;
-		width: 400px;
-		height: 400px;
-		border-radius: 8px;
-		position: relative;
-		pointer-events: auto;
-		display: flex;
-		flex-direction: column;
-		padding: 10px;
-		gap: 10px;
-	}
 
-	.selected {
-		border: solid 2px white;
-	}
-	.input-anchors {
-		position: absolute;
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-		left: -24px;
-	}
-</style>
diff --git a/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte b/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
index 4a62955d..4bdb87a5 100644
--- a/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
@@ -11,34 +11,4 @@
 
 <div class:linked class:hovering class:connecting class="my-anchor"></div>
 
-<style>
-	.my-anchor {
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		border: solid 2px white;
-		border-color: inherit;
-	}
-	.hovering {
-		scale: 1.2;
-	}
-	.linked {
-		background-color: rgb(17, 214, 17) !important;
-	}
-	.connecting {
-		background-color: goldenrod;
-		animation: pulse 1s infinite;
-	}
 
-	@keyframes pulse {
-		0% {
-			box-shadow: 0 0 0 0 goldenrod;
-		}
-		70% {
-			box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
-		}
-		100% {
-			box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
-		}
-	}
-</style>
diff --git a/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte b/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
index b833a51d..e73f9569 100644
--- a/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
@@ -35,11 +35,4 @@
 	</NodeWrapper>
 </Node>
 
-<style>
-	.node-body {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-</style>
+
diff --git a/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte b/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
index efa221dd..a4336608 100644
--- a/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
@@ -40,51 +40,4 @@
 	</div>
 {/if}
 
-<style>
-	.node {
-		box-sizing: border-box;
-		width: fit-content;
-		border-radius: 8px;
-		height: fit-content;
-		position: relative;
-		pointer-events: auto;
-		display: flex;
-		flex-direction: column;
-		padding: 10px;
-		gap: 10px;
-	}
 
-	h1 {
-		font-size: 0.9rem;
-		font-weight: 200;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		align-items: center;
-		padding-bottom: 8px;
-		border-color: inherit;
-	}
-
-	.output-anchors {
-		position: absolute;
-		right: -24px;
-		top: 8px;
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-	}
-	.destroy {
-		background: none;
-		border: none;
-		color: inherit;
-		cursor: pointer;
-	}
-	.header {
-		display: flex;
-		justify-content: space-between;
-		align-items: baseline;
-		width: 100%;
-		border-bottom: solid 1px;
-		border-color: lightgray;
-	}
-</style>
diff --git a/src/routes/page/agent/[agentId]/build/components/Thickness.svelte b/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
index be328c7b..a5210426 100644
--- a/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
@@ -25,24 +25,4 @@
 	</NodeWrapper>
 </Node>
 
-<style>
-	.node-body {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
 
-	.note {
-		font-family: 'Reenie Beanie', sans-serif;
-		position: absolute;
-		top: -20px;
-		left: 40px;
-		width: 400px;
-		transform: rotate(3deg);
-		color: inerhit;
-		font-weight: 200px;
-		font-size: 30px;
-		pointer-events: none;
-	}
-</style>
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 3560fb69..ae118201 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -21,114 +21,112 @@
 </script>
 
 {#each agents as agent}
-  <div class="col-xl-4 col-sm-6">
-    <div class="card" style="height: 95%;">
-      <div class="card-body">
-        <div class="d-flex justify-content-between" style="gap: 1.5rem;">
-          <div class="avatar-md" style="flex-shrink: 0;">
-            <span class="avatar-title rounded-circle bg-light text-danger font-size-16" style="overflow: hidden;">
-              {#if agent.icon_url}
-              <img src={agent.icon_url} alt="" width="50" height="50" style="object-fit: cover;" />
-              {:else}
-              <img src="images/users/bot.png" alt="" width="50" height="50" style="object-fit: cover;" />
-              {/if}
-            </span>
-          </div>
-
-          <div class="flex-grow-1 overflow-hidden">
-            <div class="agent-card-header">
-              <h5 class="text-truncate font-size-15 line-align-center mb-0">
-                <button type="button" class="btn text-dark text-btn font-size-15" onclick={() => goToPage(`page/agent/${agent.id}`)}>
-                  {agent.name}
-                </button>
-              </h5>
-              {#if agent.is_router}
-              <div
-                class="font-size-15 line-align-center"
-                data-bs-toggle="tooltip"
-                data-bs-placement="bottom"
-                title="Go to flowchart"
-              >
-                <button type="button" class="btn text-dark text-btn font-size-15" title="Go to flowchart" onclick={() => goToPage(`page/agent/router?agent_id=${agent.id}`)}>
-                  <i class="mdi mdi-sitemap"></i>
-                </button>
-              </div>
-              {/if}
-            </div>
-            {#if agent.labels?.length > 0}
-              <div class="agent-label-container">
-                {#each agent.labels as label}
-                  <span class="badge bg-info">{label}</span>
-                {/each}
-              </div>
+  <div class="ag-card">
+    <div class="ag-card-body">
+      <div class="ag-card-top">
+        <div class="ag-avatar">
+          <span class="ag-avatar-circle">
+            {#if agent.icon_url}
+            <img src={agent.icon_url} alt="" width="50" height="50" />
             {:else}
-              <p>Provided by {agent.plugin.name}</p>
+            <img src="images/users/bot.png" alt="" width="50" height="50" />
             {/if}
+          </span>
+        </div>
+
+        <div class="ag-card-content">
+          <div class="ag-card-header">
+            <h5 class="ag-name-row">
+              <button type="button" class="ag-name-btn" onclick={() => goToPage(`page/agent/${agent.id}`)}>
+                {agent.name}
+              </button>
+            </h5>
+            {#if agent.is_router}
             <div
-              class="text-muted mb-2 truncate-text"
-              style="height: 60px;"
+              class="ag-flowchart-wrap"
               data-bs-toggle="tooltip"
-              data-bs-placement="top"
-              title={agent.description}
+              data-bs-placement="bottom"
+              title="Go to flowchart"
             >
-              {agent.description}
+              <button type="button" class="ag-name-btn" title="Go to flowchart" onclick={() => goToPage(`page/agent/router?agent_id=${agent.id}`)}>
+                <i class="mdi mdi-sitemap"></i>
+              </button>
             </div>
-            <div class="overflow-hidden">
-              <div class="avatar-group" style="height:35px;">
-              {#if agent.is_router}
-              <div class="avatar-group-item me-3">
-                <img src="icons/router.png" class="rounded-circle avatar-xs" alt="routing"/>
-              </div>
-              {/if}
-              {#if agent.allow_routing}
-              <div class="avatar-group-item me-3">
-                <img src="icons/routing-2.png" class="rounded-circle avatar-xs" alt="routing"/>
-              </div>
-              {/if}
-              {#each agent.functions as fn}
-                <div class="avatar-group-item">
-                  <div class="d-inline-block" id={"member" + fn.name}>
-                    <img src="images/function.png" class="rounded-circle avatar-xs" alt={fn.name}/>
-                  </div>
-                </div>
+            {/if}
+          </div>
+          {#if agent.labels?.length > 0}
+            <div class="ag-labels">
+              {#each agent.labels as label}
+                <span class="ag-label-badge">{label}</span>
               {/each}
             </div>
+          {:else}
+            <p class="ag-plugin-line">Provided by {agent.plugin.name}</p>
+          {/if}
+          <div
+            class="ag-description"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title={agent.description}
+          >
+            {agent.description}
+          </div>
+          <div class="ag-icons-wrap">
+            <div class="ag-icon-row">
+            {#if agent.is_router}
+            <div class="ag-icon-item ag-icon-spaced">
+              <img src="icons/router.png" class="ag-icon-img" alt="routing"/>
+            </div>
+            {/if}
+            {#if agent.allow_routing}
+            <div class="ag-icon-item ag-icon-spaced">
+              <img src="icons/routing-2.png" class="ag-icon-img" alt="routing"/>
             </div>
-
+            {/if}
+            {#each agent.functions as fn}
+              <div class="ag-icon-item">
+                <div class="ag-icon-inline" id={"member" + fn.name}>
+                  <img src="images/function.png" class="ag-icon-img" alt={fn.name}/>
+                </div>
+              </div>
+            {/each}
           </div>
+          </div>
+
         </div>
       </div>
-      <div class="px-4 py-3 border-top">
-        <ul class="list-inline mb-0">
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <span class="badge {agent.disabled ? 'bg-warning' : 'bg-success'}">{agent.disabled ? $_('Disabled') : $_('Enabled')}</span>
-          </li>
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <span class="badge {agent.is_public ? 'bg-success' : 'bg-warning'}">{agent.is_public ? $_('Public') : $_('Private')}</span>
-          </li>
-          <li class="list-inline-item me-1 mt-1 mb-1" id="dueDate">
-            <i class="bx bx-calendar me-1"></i>
-            {utcToLocal(agent.updated_datetime, 'MMM D, YYYY')}
-          </li>
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <button type="button" class="btn btn-light btn-sm" onclick={() => goToPage(`page/agent/${agent.id}/build`)} disabled>
-              <i class="bx bx-wrench"></i> {$_('Build')}
-            </button>
-          </li>
-          {#if agent.is_public }
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <button type="button" class="btn btn-light btn-sm" onclick={() => goToPage(`chat/${LEARNER_AGENT_ID}`)} disabled>
-              <i class="bx bx-book-open"></i> {$_('Train')}
-            </button>
-          </li>
-          <li class="list-inline-item me-1 mt-1 mb-1">
-            <button type="button" class="btn {AgentExtensions.chatable(agent) ? 'btn-primary' : 'btn-light'} btn-sm" onclick={() => goToPage(`chat/${agent.id}`)} disabled={!AgentExtensions.chatable(agent)}>
-              <i class="bx bx-chat"></i> {$_('Test')}
-            </button>
-          </li>
-          {/if}
-        </ul>
-      </div>
+    </div>
+    <div class="ag-card-footer">
+      <ul class="ag-meta-list">
+        <li class="ag-meta-item">
+          <span class="ag-badge {agent.disabled ? 'ag-badge-warning' : 'ag-badge-success'}">{agent.disabled ? $_('Disabled') : $_('Enabled')}</span>
+        </li>
+        <li class="ag-meta-item">
+          <span class="ag-badge {agent.is_public ? 'ag-badge-success' : 'ag-badge-warning'}">{agent.is_public ? $_('Public') : $_('Private')}</span>
+        </li>
+        <li class="ag-meta-item" id="dueDate">
+          <i class="bx bx-calendar ag-meta-icon"></i>
+          {utcToLocal(agent.updated_datetime, 'MMM D, YYYY')}
+        </li>
+        <li class="ag-meta-item">
+          <button type="button" class="ag-btn-sm ag-btn-sm-light" onclick={() => goToPage(`page/agent/${agent.id}/build`)} disabled>
+            <i class="bx bx-wrench"></i> {$_('Build')}
+          </button>
+        </li>
+        {#if agent.is_public }
+        <li class="ag-meta-item">
+          <button type="button" class="ag-btn-sm ag-btn-sm-light" onclick={() => goToPage(`chat/${LEARNER_AGENT_ID}`)} disabled>
+            <i class="bx bx-book-open"></i> {$_('Train')}
+          </button>
+        </li>
+        <li class="ag-meta-item">
+          <button type="button" class="ag-btn-sm {AgentExtensions.chatable(agent) ? 'ag-btn-sm-primary' : 'ag-btn-sm-light'}" onclick={() => goToPage(`chat/${agent.id}`)} disabled={!AgentExtensions.chatable(agent)}>
+            <i class="bx bx-chat"></i> {$_('Test')}
+          </button>
+        </li>
+        {/if}
+      </ul>
     </div>
   </div>
-{/each}
\ No newline at end of file
+{/each}
+
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 77bd873d..5f8db6e8 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -180,11 +180,14 @@
     {isError}
 />
 
-<div class="card">
-    <div class="card-body border-bottom">
-        <div class="row g-3">
-            <div class="col-lg-3 d-flex flex-column gap-1">
-                <div class="fw-bold">Agent</div>
+<div class="cs-card cs-card-accent">
+    <div class="cs-card-body">
+        <div class="cs-field">
+            <div class="cs-field-label">
+                <i class="bx bx-code-alt cs-field-icon"></i>
+                <span>Agent</span>
+            </div>
+            <div class="cs-field-control">
                 <Select
                     tag={'agent-select'}
                     placeholder={'Select agent'}
@@ -212,25 +215,42 @@
     />
 
     {#if ADMIN_ROLES.includes(user?.role || '')}
-    <div class="row">
-        <div class="hstack gap-2 my-4">
+    <div class="cs-action-bar">
+        <div class="cs-action-bar-hint">
+            <i class="bx bx-info-circle"></i>
+            <span>Changes are not saved until you click Save</span>
+        </div>
+        <div class="cs-actions">
             <button
                 type="button"
-                class="btn btn-soft-primary"
+                class="cs-btn cs-btn-ghost"
                 disabled={!selectedAgentId}
-                onclick={() => saveCodeScripts()}
+                onclick={() => resetCodeScripts()}
             >
-                {$_('Save')}
+                <i class="bx bx-revision"></i>
+                {$_('Reset')}
             </button>
             <button
                 type="button"
-                class="btn btn-warning"
+                class="cs-btn cs-btn-primary"
                 disabled={!selectedAgentId}
-                onclick={() => resetCodeScripts()}
+                onclick={() => saveCodeScripts()}
             >
-                {$_('Reset')}
+                <i class="bx bx-check"></i>
+                {$_('Save')}
             </button>
         </div>
     </div>
     {/if}
-{/if}
\ No newline at end of file
+{:else}
+    <div class="cs-empty-card">
+        <div class="cs-empty-illustration">
+            <i class="bx bx-code-block"></i>
+        </div>
+        <h5 class="cs-empty-title">Pick an agent to get started</h5>
+        <p class="cs-empty-text">
+            Select an agent above to view and edit its source and test scripts.
+        </p>
+    </div>
+{/if}
+
diff --git a/src/routes/page/agent/code-scripts/script-editor.svelte b/src/routes/page/agent/code-scripts/script-editor.svelte
index 39d4fa9a..27b6dec0 100644
--- a/src/routes/page/agent/code-scripts/script-editor.svelte
+++ b/src/routes/page/agent/code-scripts/script-editor.svelte
@@ -79,75 +79,108 @@ if __name__ == "__main__":
 
 
 
-<div class="card">
-    <div class="card-body border-bottom">
-        <div class="row g-3">
-            <div class="col-lg-3">
-                <div class="mb-2" style="display: flex; gap: 10px;">
-                    <div class="line-align-center fw-bold">
-                        {title}
-                    </div>
-                    <div class="line-align-center">
-                        <div class="line-align-center" id="{scriptType}-src-tooltip">
-                            <i class="bx bx-info-circle"></i>
-                        </div>
-                        <BotsharpTooltip target="{scriptType}-src-tooltip" placement="top">
-                            <div>Support python only</div>
-                        </BotsharpTooltip>
-                    </div>
-                    <!-- svelte-ignore a11y_click_events_have_key_events -->
-                    <!-- svelte-ignore a11y_no_static_element_interactions -->
-                    <div
-                        class="text-primary clickable"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Add src script"
-                        style="font-size: 16px;"
-                        onclick={() => addScript()}
-                    >
-                        <i class="mdi mdi-plus-circle-outline"></i>
-                    </div>
+<div class="se-card">
+    <div class="se-header-bar">
+        <div class="se-header-left">
+            <div class="se-section-icon">
+                <i class={scriptType === 'test' ? 'bx bx-test-tube' : 'bx bx-code-block'}></i>
+            </div>
+            <div class="se-title">
+                {title}
+            </div>
+            <div class="se-tooltip-wrap">
+                <div class="se-tooltip-icon" id="{scriptType}-src-tooltip">
+                    <i class="bx bx-info-circle"></i>
                 </div>
+                <BotsharpTooltip target="{scriptType}-src-tooltip" placement="top">
+                    <div>Support python only</div>
+                </BotsharpTooltip>
             </div>
         </div>
-        <div class="row g-3">
-            <div class="col-lg-12">
-                {#if scriptObj.scripts.length > 0}
-                    <NavBar
-                        id={`agent-${scriptType}-script-container`}
-                        disableDefaultStyles
-                        containerClasses={'nav-tabs-secondary'}
-                    >
-                        {#each scriptObj.scripts as item, idx (idx) }
-                        <NavItem
-                            containerStyles={`flex: 0 1 calc(100% / ${scriptObj.scripts.length <= 2 ? scriptObj.scripts.length : 3})`}
-                            navBtnStyles={'text-transform: none;'}
-                            navBtnId={`${scriptType}-script-${idx}-tab`}
-                            dataBsTarget={`#${scriptType}-script-${idx}-tab-pane`}
-                            ariaControls={`${scriptType}-script-${idx}-tab-pane`}
-                            bind:navBtnText={item.name}
-                            active={item.uid === scriptObj.selectedScript?.uid}
-                            allowEdit
-                            allowDelete
-                            maxEditLength={50}
-                            editPlaceholder={'Type a title here...'}
-                            onClick={() => selectScript(item.uid)}
-                            onDelete={() => deleteScript(item.uid)}
-                            onInput={() => {}}
-                        />
-                        {/each}
-                    </NavBar>
-                    <div class="code-editor">
-                        {#key scriptObj.selectedScript?.uid}
-                        <CodeScript
-                            language={'python'}
-                            scriptText={scriptObj.selectedScript?.content || ''}
-                            onchange={(/** @type {string} */ text) => changeScriptContent(text, scriptObj.selectedScript?.uid)}
-                        />
-                        {/key}
+        <button
+            type="button"
+            class="se-add-btn"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="Add a new {scriptType} script"
+            onclick={() => addScript()}
+        >
+            <i class="bx bx-plus"></i>
+            <span>Add Script</span>
+        </button>
+    </div>
+
+    <div class="se-card-body">
+        {#if scriptObj.scripts.length > 0}
+            <NavBar
+                id={`agent-${scriptType}-script-container`}
+                disableDefaultStyles
+                containerClasses={'nav-tabs-secondary'}
+            >
+                {#each scriptObj.scripts as item, idx (idx) }
+                <NavItem
+                    containerStyles={`flex: 0 1 calc(100% / ${scriptObj.scripts.length <= 2 ? scriptObj.scripts.length : 3})`}
+                    navBtnStyles={'text-transform: none;'}
+                    navBtnId={`${scriptType}-script-${idx}-tab`}
+                    dataBsTarget={`#${scriptType}-script-${idx}-tab-pane`}
+                    ariaControls={`${scriptType}-script-${idx}-tab-pane`}
+                    bind:navBtnText={item.name}
+                    active={item.uid === scriptObj.selectedScript?.uid}
+                    allowEdit
+                    allowDelete
+                    maxEditLength={50}
+                    editPlaceholder={'Type a title here...'}
+                    onClick={() => selectScript(item.uid)}
+                    onDelete={() => deleteScript(item.uid)}
+                    onInput={() => {}}
+                />
+                {/each}
+            </NavBar>
+
+            <div class="se-editor-frame">
+                <div class="se-editor-titlebar">
+                    <div class="se-window-dots" aria-hidden="true">
+                        <span class="se-dot se-dot-r"></span>
+                        <span class="se-dot se-dot-y"></span>
+                        <span class="se-dot se-dot-g"></span>
                     </div>
-                {/if}
+                    <div class="se-editor-filename">
+                        <i class="bx bxl-python"></i>
+                        <span>{scriptObj.selectedScript?.name || ''}</span>
+                    </div>
+                    <div class="se-editor-lang">python</div>
+                </div>
+                <div class="se-code-editor">
+                    {#key scriptObj.selectedScript?.uid}
+                    <CodeScript
+                        language={'python'}
+                        scriptText={scriptObj.selectedScript?.content || ''}
+                        onchange={(/** @type {string} */ text) => changeScriptContent(text, scriptObj.selectedScript?.uid)}
+                    />
+                    {/key}
+                </div>
             </div>
-        </div>
+        {:else}
+            <div class="se-empty">
+                <div class="se-empty-illustration">
+                    <i class={scriptType === 'test' ? 'bx bx-test-tube' : 'bx bx-code-block'}></i>
+                </div>
+                <h6 class="se-empty-title">No {scriptType} scripts yet</h6>
+                <p class="se-empty-text">
+                    {scriptType === 'test'
+                        ? 'Add a test script to validate your source code.'
+                        : 'Add a Python script that this agent can execute.'}
+                </p>
+                <button
+                    type="button"
+                    class="se-empty-cta"
+                    onclick={() => addScript()}
+                >
+                    <i class="bx bx-plus"></i>
+                    Add your first script
+                </button>
+            </div>
+        {/if}
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/agent/router/+page.svelte b/src/routes/page/agent/router/+page.svelte
index 8681f990..5b32c44b 100644
--- a/src/routes/page/agent/router/+page.svelte
+++ b/src/routes/page/agent/router/+page.svelte
@@ -60,15 +60,14 @@
 <Breadcrumb title={$_('Agent')} pagetitle={$_('Routing')} />
 
 {#if routers}
-<div class="row">
-  <div class="col">
-    <RoutingFlow
-      routers={routers}
-      viewOnlyMode={!!targetAgentId}
-      onuserNodeSelected={() => handleUserNodeSelected()}
-      onrouterNodeSelected={() => handleRouterNodeSelected()}
-      onagentNodeSelected={() => handleAgentNodeSelected()}/>
-  </div>
+<div class="rt-container">
+  <RoutingFlow
+    routers={routers}
+    viewOnlyMode={!!targetAgentId}
+    onuserNodeSelected={() => handleUserNodeSelected()}
+    onrouterNodeSelected={() => handleRouterNodeSelected()}
+    onagentNodeSelected={() => handleAgentNodeSelected()}/>
 </div>
 {/if}
 
+
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
index d9fd1d3a..32ca8294 100644
--- a/src/routes/page/agent/router/routing-flow.svelte
+++ b/src/routes/page/agent/router/routing-flow.svelte
@@ -6,7 +6,13 @@
     import { getAgents } from '$lib/services/agent-service.js';
 	import { AgentType } from '$lib/helpers/enums';
 
-    /** @type {{ routers: import('$agentTypes').AgentModel[], viewOnlyMode?: boolean, onuserNodeSelected?: () => void, onrouterNodeSelected?: () => void, onagentNodeSelected?: () => void }} */
+    /** @type {{
+     * routers: import('$agentTypes').AgentModel[],
+     * viewOnlyMode?: boolean,
+     * onuserNodeSelected?: () => void,
+     * onrouterNodeSelected?: () => void,
+     * onagentNodeSelected?: () => void
+     * }} */
     let {
         routers,
         viewOnlyMode = false,
@@ -35,7 +41,7 @@
 
     /** @type {Drawflow} */
     let editor;
-    
+
     onMount(async () => {
         if (viewOnlyMode) {
             const response = await getAgents(filter);
@@ -60,7 +66,7 @@
             });
             renderRoutingFlow();
         }
-    });    
+    });
 
     function renderRoutingFlow() {
         agentNodes = [];
@@ -73,12 +79,12 @@
             nodeSpaceY * (agents.length + 1) / 2;
 
         // add end-user node
-        const userNodeId = editor.addNode('user', 0, 1, posX, posY, 'user', 
+        const userNodeId = editor.addNode('user', 0, 1, posX, posY, 'user',
         {
             id: "",
             profiles: [],
             agent: 'user'
-        }, `<i class="mdi mdi-account font-size-16 text-info me-2"></i><span class="h6">User Request</span>`, false);
+        }, `<i class="mdi mdi-account rf-icon rf-text-info rf-mr-2"></i><span class="rf-h6">User Request</span>`, false);
 
         // add router node
         posX += nodeSpaceX;
@@ -88,15 +94,15 @@
             /** @type {string[]} */
             let profiles = [];
             const planner = getPlannerName(router);
-            const chatTestLinkHtml = router.is_public ? 
-                `<a href= "chat/${router.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>` :
+            const chatTestLinkHtml = router.is_public ?
+                `<a href= "chat/${router.id}" class="rf-node-btn rf-node-btn-end" target="_blank"><i class="bx bx-chat"></i></a>` :
                 '';
-            let html = `<span class="h5">${router.name} ${chatTestLinkHtml}</span><span class="text-info">Routing with ${planner}</span>`;
+            let html = `<span class="rf-h5">${router.name} ${chatTestLinkHtml}</span><span class="rf-text-info">Routing with ${planner}</span>`;
             if (router.profiles.length > 0) {
                 profiles = router.profiles;
-                html += `<br/><i class="mdi mdi-folder font-size-16 text-info me-2"></i><span>${profiles.join(', ')}</span>`;
+                html += `<br/><i class="mdi mdi-folder rf-icon rf-text-info rf-mr-2"></i><span>${profiles.join(', ')}</span>`;
             }
-            
+
             const data = {
                 id: router.id,
                 agent: router.name,
@@ -111,7 +117,7 @@
 
             const nodeId = editor.addNode('router', 1, 1, posX, routerPosY, 'router', data, `${html}`, false);;
             // connect user and router
-            editor.addConnection(userNodeId, nodeId, `output_1`, `input_1`);    
+            editor.addConnection(userNodeId, nodeId, `output_1`, `input_1`);
             routerPosY += nodeSpaceY + 50;
         });
 
@@ -123,10 +129,10 @@
         plannerAgents.forEach(agent => {
             /**@type {any} */
             let nodeId = null;
-            let html = `<span class="h6">${agent.name}</span>`;
+            let html = `<span class="rf-h6">${agent.name}</span>`;
 
             if (agent.profiles.length > 0) {
-                html += `<br/><i class="mdi mdi-folder font-size-16 text-info me-2"></i>` + agent.profiles.join(', ');
+                html += `<br/><i class="mdi mdi-folder rf-icon rf-text-info rf-mr-2"></i>` + agent.profiles.join(', ');
             }
 
             const data = {
@@ -152,35 +158,35 @@
 
         posY = viewOnlyMode ? posY + 30 : 120;
         posX += viewOnlyMode ? 0 : nodeSpaceX;
-        otherAgnets.forEach(agent => {   
+        otherAgnets.forEach(agent => {
             /**@type {any} */
             let nodeId = null;
-            /**@type {any[]} */   
+            /**@type {any[]} */
             let profiles = [];
 
-            const chatTestLinkHtml = agent.is_public ? 
-                `<a href= "chat/${agent.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>` : '';
-            let html = `<span class="h6">${agent.name}</span>${chatTestLinkHtml}`;
+            const chatTestLinkHtml = agent.is_public ?
+                `<a href= "chat/${agent.id}" class="rf-node-btn rf-node-btn-end" target="_blank"><i class="bx bx-chat"></i></a>` : '';
+            let html = `<span class="rf-h6">${agent.name}</span>${chatTestLinkHtml}`;
             if (agent.type == AgentType.Static) {
-                const taskLinkHtml = `<a href= "page/agent/${agent.id}/task" class="btn btn-primary float-end" target="_blank"><i class="bx bx-task"></i></a>`;
+                const taskLinkHtml = `<a href= "page/agent/${agent.id}/task" class="rf-node-btn rf-node-btn-end" target="_blank"><i class="bx bx-task"></i></a>`;
                 html += taskLinkHtml;
             }
 
             if (agent.profiles.length > 0) {
                 profiles = agent.profiles;
-                html += `<br/><i class="mdi mdi-folder font-size-16 text-info me-2"></i>` + profiles.join(', ');
+                html += `<br/><i class="mdi mdi-folder rf-icon rf-text-info rf-mr-2"></i>` + profiles.join(', ');
             }
 
             if (agent.is_host) {
                 html =`<img src="images/users/bot.png" height="30">${html}`;
             }
-            
+
             const data = {
                 id: agent.id,
                 agent: agent.name,
                 profiles: profiles
             };
-            
+
 
             if (viewOnlyMode && profiles.length > 0) {
                 const filteredProfiles = profiles.filter((/** @type {string} */ profile) => profile !== 'planning');
@@ -218,10 +224,10 @@
                     // profile is empty
                     /*agentNodes.filter(ag => ag.type == "routing" && ag.profiles.length == 0)
                         .forEach(r => {
-                            editor.addConnection(r.nid, nid, `output_1`, `input_1`);    
+                            editor.addConnection(r.nid, nid, `output_1`, `input_1`);
                         });*/
-                    
-                    editor.addConnection(userNodeId, nodeId, `output_1`, `input_1`);    
+
+                    editor.addConnection(userNodeId, nodeId, `output_1`, `input_1`);
                 }
             }
 
@@ -247,7 +253,7 @@
             // }
         });
     }
-    
+
     /** @param {import('$agentTypes').AgentModel} router */
     function getPlannerName(router) {
         const planner = router.routing_rules?.find(p => p.type == "planner");
@@ -294,16 +300,16 @@
 
 </script>
 
-<div class="btn-group" role="group">
+<div class="rf-toggle-group" role="group">
     <input
         type="checkbox"
-        class="btn-check active"
+        class="rf-toggle-input"
         id="btncheck1"
         autocomplete="off"
         disabled={viewOnlyMode}
     />
     <label
-        class={`btn btn-${includeRoutingAgent && !viewOnlyMode ? "" : "outline-"}primary`}
+        class={`rf-toggle-btn ${includeRoutingAgent && !viewOnlyMode ? "rf-toggle-btn-active" : "rf-toggle-btn-outline"}`}
         for="btncheck1"
     >
         Routing Agent
@@ -311,14 +317,14 @@
 
     <input
         type="checkbox"
-        class="btn-check active"
+        class="rf-toggle-input"
         id="btncheck2"
         autocomplete="off"
         disabled={viewOnlyMode}
         onclick={() => handlePlannerAgentSelected()}
     />
     <label
-        class={`btn btn-${includePlannerAgent ? "" : "outline-"}primary`}
+        class={`rf-toggle-btn ${includePlannerAgent ? "rf-toggle-btn-active" : "rf-toggle-btn-outline"}`}
         for="btncheck2"
     >
         Planning Agent
@@ -326,14 +332,14 @@
 
     <input
         type="checkbox"
-        class="btn-check"
+        class="rf-toggle-input"
         id="btncheck3"
         autocomplete="off"
         disabled={viewOnlyMode}
         onclick={() => handleTaskAgentSelected()}
     />
-    <label 
-        class={`btn btn-${includeTaskAgent ? "" : "outline-"}primary`}
+    <label
+        class={`rf-toggle-btn ${includeTaskAgent ? "rf-toggle-btn-active" : "rf-toggle-btn-outline"}`}
         for="btncheck3"
     >
         Task Agent
@@ -341,18 +347,20 @@
 
     <input
         type="checkbox"
-        class="btn-check"
+        class="rf-toggle-input"
         id="btncheck4"
         autocomplete="off"
         disabled={viewOnlyMode}
         onclick={() => handleStaticAgentSelected()}
     />
     <label
-        class={`btn btn-${includeStaticAgent ? "" : "outline-"}primary`}
+        class={`rf-toggle-btn ${includeStaticAgent ? "rf-toggle-btn-active" : "rf-toggle-btn-outline"}`}
         for="btncheck4"
     >
         Static Agent
     </label>
 </div>
 
-<div id="drawflow" style="height: 72vh; width: 100%"></div>
\ No newline at end of file
+<div id="drawflow" class="rf-canvas" style="height: 72vh; width: 100%"></div>
+
+
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index fa8f188b..e2cb66c5 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -23,7 +23,8 @@
 		getPagingQueryParams,
 		setUrlQueryParams,
 		goToUrl,
-		convertTimeRange
+		convertTimeRange,
+		formatNumber
 	} from '$lib/helpers/utils/common';
 
 	const duration = 3000;
@@ -417,46 +418,46 @@
 	successText={'Delete completed!'}
 />
 
-<div class="row">
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-body border-bottom">
-				<div class="d-flex flex-wrap align-items-center justify-content-between">
-					<div class="mb-0 card-title flex-grow-0">
-						<h5 class="mb-0">{$_('Conversation List')}</h5>
-					</div>
-					<div class="state-search-btn-wrapper">
-						<button
-							type="button"
-							class="btn btn-{showStateSearch ? 'secondary' : 'primary'}"
-							onclick={() => showStateSearch = !showStateSearch}
-						>
-							<div class="state-search-btn">
-								<div>
-									{#if showStateSearch}
-										<i class="bx bx-hide"></i>
-									{:else}
-										<i class="bx bx-search-alt"></i>
-									{/if}
-								</div>
-								<div class="search-btn-text">{'State Search'}</div>
-							</div>
-						</button>
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex flex-wrap items-center justify-between gap-3">
+					<div class="flex items-center gap-3">
+						<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+							<i class="mdi mdi-forum-outline text-xl"></i>
+						</span>
+						<div>
+							<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Conversation List')}</h5>
+							<p class="mb-0 text-xs text-muted">{formatNumber(pager.count)} {pager.count === 1 ? 'conversation' : 'conversations'} total</p>
+						</div>
 					</div>
+					<button
+						type="button"
+						class="inline-flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium shadow-sm transition-colors {showStateSearch ? 'bg-gray-200 text-dark hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600' : 'bg-primary text-white hover:bg-primary-hover'}"
+						onclick={() => showStateSearch = !showStateSearch}
+					>
+						{#if showStateSearch}
+							<i class="bx bx-hide text-base leading-none"></i>
+						{:else}
+							<i class="bx bx-search-alt text-base leading-none"></i>
+						{/if}
+						<span class="search-btn-text">{'State Search'}</span>
+					</button>
 				</div>
 			</div>
 			{#if showStateSearch}
-				<div class="card-body border-bottom">
-					<div class="row g-3 justify-content-end">
-						<div class="col-lg-6">
+				<div class="conv-state-search border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+					<div class="flex justify-end">
+						<div class="w-full lg:w-1/2">
 							<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
 						</div>
 					</div>
 				</div>
 			{/if}
-			<div class="card-body border-bottom">
-				<div class="row g-3">
-					<div class="col-lg-3">
+			<div class="conv-filter border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-12">
+					<div class="lg:col-span-3">
 						<Select
 							tag={'agent-select'}
 							placeholder={'Select Agents'}
@@ -466,9 +467,13 @@
 							selectedValues={searchOption.agentIds}
 							options={agentOptions}
 							onselect={e => changeOption(e, 'agent')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-robot-outline"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<Select
 							tag={'task-select'}
 							placeholder={'Select Status'}
@@ -476,9 +481,13 @@
 							selectedValues={searchOption.status ? [searchOption.status] : []}
 							options={statusOptions}
 							onselect={e => changeOption(e, 'status')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-flag-outline"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<Select
 							tag={'channel-select'}
 							placeholder={'Select Channel'}
@@ -486,18 +495,27 @@
 							selectedValues={searchOption.channel ? [searchOption.channel] : []}
 							options={channelOptions}
 							onselect={e => changeOption(e, 'channel')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-access-point-network"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
-						<input
-							type="text"
-							class="form-control"
-							placeholder="Tag"
-							maxlength={100}
-							oninput={e => changeOption(e, 'tags')}
-						/>
+					<div class="lg:col-span-2">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-tag-outline text-base leading-none"></i>
+							</span>
+							<input
+								type="text"
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								placeholder="Tag"
+								maxlength={100}
+								oninput={e => changeOption(e, 'tags')}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<TimeRangePicker
 							storageKey="botsharp_conversation_recent_time_ranges"
 							bind:timeRange={searchOption.timeRange}
@@ -509,24 +527,28 @@
 								searchOption.startDate = data.startDate;
 								searchOption.endDate = data.endDate;
 							}}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-clock-outline"></i>
+							{/snippet}
+						</TimeRangePicker>
 					</div>
-					<div class="col-lg-1">
+					<div class="lg:col-span-1">
 						<button
 							type="button"
-							class="btn btn-secondary btn-soft-secondary w-100"
+							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							onclick={(e) => searchConversations(e)}
 						>
 							<i class="mdi mdi-filter-outline align-middle"></i>
-							<span class="d-none">{$_('Filter')}</span>
+							<span class="sr-only">{$_('Filter')}</span>
 						</button>
 					</div>
 				</div>
 			</div>
-			<div class="card-body">
-				<div class="table-responsive thin-scrollbar">
-					<table class="table table-bordered align-middle nowrap conv-table">
-						<thead>
+			<div class="p-4 sm:p-6">
+				<div class="thin-scrollbar overflow-x-auto rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
+					<table class="conv-table w-full border-collapse text-sm">
+						<thead class="bg-gray-50 dark:bg-gray-700/50">
 							<tr>
 								<th scope="col" class="list-title">{$_('Title')}</th>
 								<th scope="col">{$_('User Name')}</th>
@@ -535,54 +557,82 @@
 								<th scope="col">{$_('Posted Date')}</th>
 								<th scope="col">{$_('Last Date')}</th>
 								<th scope="col">{$_('Status')}</th>
-								<th scope="col">{$_('Action')}</th>
+								<th scope="col" class="text-center">{$_('Action')}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#each conversations.items as conv}
-							<tr>
+							<tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
 								<td class="list-title">
-									<a href="page/conversation/{conv.id}">{conv.title}</a>
+									<a href="page/conversation/{conv.id}" class="font-medium text-primary hover:underline">{conv.title}</a>
 								</td>
-								<td>{conv.user.full_name}</td>
-								<td>{conv.agent_name}</td>
-								<td><span class="badge badge-soft-success">{conv.channel}</span></td>
-								<td>{utcToLocal(conv.created_time)}</td>
-								<td>{utcToLocal(conv.updated_time)}</td>
-								<td><span class="badge bg-success">{conv.status}</span></td>
 								<td>
-									<ul class="list-unstyled hstack gap-1 mb-0">
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
-											<button
-												type="button"
-												class="btn btn-sm btn-soft-primary"
-												aria-label="View Detail"
-												onclick={() => window.open(`page/conversation/${conv.id}`)}
-											>
-												<i class="mdi mdi-eye-outline"></i>
-											</button>
-										</li>
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Chat">
-											<button
-												type="button"
-												class="btn btn-sm btn-soft-info"
-												aria-label="Chat"
-												onclick={() => window.open(`chat/${conv.agent_id}/${conv.id}`)}
-											>
-												<i class="mdi mdi-chat"></i>
-											</button>
-										</li>
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-											<button
-												type="button"
-												class="btn btn-sm btn-soft-danger"
-												aria-label="Delete"
-												onclick={() => openDeleteModal(conv.id)}
-											>
-												<i class="mdi mdi-delete-outline"></i>
-											</button>
-										</li>
-									</ul>
+									{#if conv.user?.full_name}
+										<div class="flex items-center gap-2">
+											<span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold uppercase text-primary">
+												{conv.user.full_name.charAt(0)}
+											</span>
+											<span class="text-dark dark:text-gray-100">{conv.user.full_name}</span>
+										</div>
+									{:else}
+										<span class="text-muted italic">—</span>
+									{/if}
+								</td>
+								<td>
+									{#if conv.agent_name}
+										<span class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+											<i class="mdi mdi-robot-outline text-sm leading-none"></i>
+											{conv.agent_name}
+										</span>
+									{:else}
+										<span class="text-muted italic">—</span>
+									{/if}
+								</td>
+								<td>
+									<span class="inline-flex items-center rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success">{conv.channel}</span>
+								</td>
+								<td>
+									<span class="text-xs text-muted">{utcToLocal(conv.created_time)}</span>
+								</td>
+								<td>
+									<span class="text-xs text-muted">{utcToLocal(conv.updated_time)}</span>
+								</td>
+								<td>
+									<span class="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
+										<span class="h-1.5 w-1.5 rounded-full bg-success"></span>
+										{conv.status}
+									</span>
+								</td>
+								<td>
+									<div class="flex items-center justify-center gap-1.5">
+										<button
+											type="button"
+											class="inline-flex cursor-pointer h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary transition-all hover:scale-105 hover:bg-primary/20"
+											aria-label="View Detail"
+											title="View Detail"
+											onclick={() => window.open(`page/conversation/${conv.id}`)}
+										>
+											<i class="mdi mdi-eye-outline"></i>
+										</button>
+										<button
+											type="button"
+											class="inline-flex cursor-pointer h-8 w-8 items-center justify-center rounded-md bg-info/15 text-info transition-all hover:scale-105 hover:bg-info/25"
+											aria-label="Chat"
+											title="Chat"
+											onclick={() => window.open(`chat/${conv.agent_id}/${conv.id}`)}
+										>
+											<i class="mdi mdi-chat"></i>
+										</button>
+										<button
+											type="button"
+											class="inline-flex cursor-pointer h-8 w-8 items-center justify-center rounded-md bg-danger/10 text-danger transition-all hover:scale-105 hover:bg-danger/20"
+											aria-label="Delete"
+											title="Delete"
+											onclick={() => openDeleteModal(conv.id)}
+										>
+											<i class="mdi mdi-delete-outline"></i>
+										</button>
+									</div>
 								</td>
 							</tr>
 							{/each}
@@ -595,17 +645,3 @@
 	</div>
 </div>
 
-<style>
-	.conv-table th,
-	.conv-table td {
-		max-width: 180px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.conv-table th.list-title,
-	.conv-table td.list-title {
-		max-width: 240px;
-	}
-</style>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index f209f3e8..eabee748 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -48,6 +48,15 @@
             }
         });
     }
+
+    function goBack() {
+        goto('page/conversation');
+    }
+
+    function openInChat() {
+        if (!conversation) return;
+        window.open(`/chat/${conversation.agent_id}/${conversation.id}`);
+    }
 </script>
 
 <HeadTitle title={conversation?.title || 'Not found'} />
@@ -56,24 +65,82 @@
 <LoadingToComplete {isLoading} />
 
 {#if conversation}
-    <div class="row">
-        <div class="col" style="flex: 40%;">
-            <Overview {conversation} />
-            <States {conversation} />
+    <div class="space-y-4 pb-8">
+        <!-- Action toolbar -->
+        <div class="overflow-hidden rounded-2xl bg-linear-to-r from-primary/5 via-white to-info/5 shadow-sm ring-1 ring-black/5 dark:from-primary/10 dark:via-gray-800 dark:to-info/10 dark:ring-white/10">
+            <div class="flex items-center gap-3 px-4 py-3 sm:px-6">
+                <div class="flex min-w-0 flex-1 items-center gap-2">
+                    <button
+                        type="button"
+                        class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-muted transition-colors hover:bg-primary/10 hover:text-primary"
+                        aria-label="Back to conversations"
+                        title="Back to conversations"
+                        onclick={goBack}
+                    >
+                        <i class="mdi mdi-arrow-left text-lg leading-none"></i>
+                    </button>
+                    <span class="inline-flex h-6 max-w-[8rem] shrink-0 items-center rounded-full bg-primary/10 px-2 text-xs font-semibold uppercase tracking-wider text-primary sm:max-w-[14rem]" title={conversation.id ?? ''}>
+                        <i class="mdi mdi-pound mr-0.5 shrink-0 text-sm leading-none"></i>
+                        <span class="truncate">{conversation.id ?? '—'}</span>
+                    </span>
+                    <span class="hidden min-w-0 flex-1 truncate text-sm font-medium text-dark dark:text-gray-100 sm:inline-block" title={conversation.title}>
+                        {conversation?.title || ''}
+                    </span>
+                </div>
+                <div class="flex shrink-0 items-center gap-1.5">
+                    <button
+                        type="button"
+                        class="inline-flex items-center gap-1.5 rounded-md bg-info/10 px-3 py-1.5 text-sm font-medium text-info transition-colors hover:bg-info/20"
+                        title="Open in chat"
+                        onclick={openInChat}
+                    >
+                        <i class="mdi mdi-chat-processing-outline text-base leading-none"></i>
+                        <span class="hidden sm:inline">Open in Chat</span>
+                    </button>
+                </div>
+            </div>
         </div>
-        <div class="col" style="flex: 60%;">
-            <Dialog {conversation} {dialogs} />
+
+        <!-- Main content grid -->
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-5">
+            <div class="flex flex-col gap-4 lg:col-span-2 lg:max-h-[calc(100vh-15rem)] lg:min-h-0">
+                <Overview {conversation} />
+                <States {conversation} />
+            </div>
+            <div class="lg:col-span-3">
+                <Dialog {conversation} {dialogs} />
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="mb-4">
-            <button
-                type="button"
-                class="btn btn-danger btn-hover rounded"
-                onclick={() => handleConversationDeletion()}
-            >
-                <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
-            </button>
+
+        <!-- Danger zone -->
+        <div class="rounded-2xl bg-white shadow-xl ring-1 ring-danger/20 dark:bg-gray-800 dark:ring-danger/30">
+            <div class="border-b border-danger/15 px-6 py-4">
+                <div class="flex items-center gap-3">
+                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-danger/10 text-danger">
+                        <i class="mdi mdi-alert-octagon-outline text-xl"></i>
+                    </span>
+                    <div>
+                        <h4 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">Danger Zone</h4>
+                        <p class="mb-0 text-xs text-muted">Irreversible actions for this conversation</p>
+                    </div>
+                </div>
+            </div>
+            <div class="p-4 sm:p-6">
+                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                    <div class="inline-flex items-center gap-2 text-sm text-muted">
+                        <i class="mdi mdi-alert-circle-outline shrink-0 text-base leading-none text-danger"></i>
+                        <span>Deleting this conversation will permanently remove all messages, states, and attached files.</span>
+                    </div>
+                    <button
+                        type="button"
+                        class="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-danger px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-danger/90"
+                        onclick={() => handleConversationDeletion()}
+                    >
+                        <i class="mdi mdi-delete text-base leading-none"></i>
+                        <span>{$_('Delete Conversation')}</span>
+                    </button>
+                </div>
+            </div>
         </div>
     </div>
 {/if}
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
index 9d831d49..21f6aa17 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
@@ -16,12 +16,12 @@
 </script>
 
 <div
-  class="fw-bold"
+  class="text-sm font-medium leading-relaxed"
   class:text-collapse={is_collapsed}
 >
   {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
       && dialog?.rich_content?.message?.language === 'javascript'}
-    <RcJsInterpreter message={dialog} scrollable containerStyles={'color: var(--bs-primary);'} />
+    <RcJsInterpreter message={dialog} scrollable containerStyles={'color: var(--color-primary);'} />
   {:else}
     <Markdown
       containerClasses={'dialog-item-text'}
@@ -33,9 +33,10 @@
 
 <button
   type="button"
-  class="btn btn-link toggle-btn btn-sm text-secondary"
-  style="padding-left: 0px;"
+  class="mt-1 inline-flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-hover hover:underline cursor-pointer"
   onclick={(e) => toggleText(e)}
 >
-  {is_collapsed ? 'More +' : 'Less -'}
-</button>
\ No newline at end of file
+  <i class="mdi {is_collapsed ? 'mdi-chevron-down' : 'mdi-chevron-up'} text-sm leading-none"></i>
+  <span>{is_collapsed ? 'More' : 'Less'}</span>
+</button>
+
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index a75b344c..b2d5073d 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -3,6 +3,7 @@
     import util from "lodash";
     import { getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
+    import { formatNumber } from '$lib/helpers/utils/common';
 	import { IMAGE_DATA_PREFIX, BOT_SENDERS } from '$lib/helpers/constants';
 	import MessageFileGallery from '$lib/common/files/MessageFileGallery.svelte';
 	import { FileSourceType } from '$lib/helpers/enums';
@@ -71,7 +72,7 @@
 
 <DialogModal
     title={'Notification'}
-    size={'md'}
+    size={'xl'}
     isOpen={isOpenNotificationModal}
     toggleModal={() => toggleNotificationModal()}
     confirm={() => confirmMsg()}
@@ -79,73 +80,78 @@
     confirmBtnText={'Send'}
     disableConfirmBtn={!util.trim(text)}
 >
-    <textarea
-        class="form-control chat-input"
-        rows="5"
-        maxlength={maxTextLength}
-        bind:value={text}
-        placeholder="Enter Message..."
-    ></textarea>
-    <div class="text-secondary text-end text-count">
-        <div>{`${(text?.length || 0)}/${maxTextLength}`}</div>
+    <div class="notif-form">
+        <label class="notif-label" for="notif-textarea">Message</label>
+        <textarea
+            id="notif-textarea"
+            class="notif-textarea"
+            rows="5"
+            maxlength={maxTextLength}
+            bind:value={text}
+            placeholder="Enter the notification message you want to send to this conversation..."
+        ></textarea>
+        <div class="notif-counter" class:notif-counter-warning={(text?.length || 0) > maxTextLength * 0.8}>
+            <i class="mdi mdi-counter"></i>
+            <span>{formatNumber(text?.length || 0)} / {formatNumber(maxTextLength)}</span>
+        </div>
     </div>
 </DialogModal>
 
-<div class="card">
-    <div class="card-body">
-        <div style="display: flex; justify-content: space-between;">
-            <div>
-                <h4 class="card-title mb-5">{$_('Dialogs')}</h4>
-            </div>
-            <div style="display: flex; justify-content: flex-end; gap: 5px;">
-                <div>
-                    <button
-                        type="button"
-                        class="btn btn-soft-warning btn-sm btn-rounded"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Send notification"
-                        aria-label="Send notification"
-                        onclick={() => handleSendNotification()}
-                    >
-                        <i class="mdi mdi-bell-ring"></i>
-                    </button>
-                </div>
+<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+        <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+                <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                    <i class="mdi mdi-message-text-outline text-xl"></i>
+                </span>
                 <div>
-                    <button
-                        type="button"
-                        class="btn btn-soft-info btn-sm btn-rounded"
-                        data-bs-toggle="tooltip"
-                        data-bs-placement="top"
-                        title="Go to chat"
-                        aria-label="Go to chat"
-                        onclick={() => goToChat()}
-                    >
-                        <i class="mdi mdi-chat"></i>
-                    </button>
+                    <h4 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Dialogs')}</h4>
+                    <p class="mb-0 text-xs text-muted">{formatNumber(dialogs.length)} {dialogs.length === 1 ? 'message' : 'messages'}</p>
                 </div>
             </div>
+            <div class="flex items-center gap-1.5">
+                <button
+                    type="button"
+                    class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-warning/15 text-warning transition-all hover:scale-105 hover:bg-warning/25"
+                    title="Send notification"
+                    aria-label="Send notification"
+                    onclick={() => handleSendNotification()}
+                >
+                    <i class="mdi mdi-bell-ring"></i>
+                </button>
+                <button
+                    type="button"
+                    class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-info/15 text-info transition-all hover:scale-105 hover:bg-info/25"
+                    title="Go to chat"
+                    aria-label="Go to chat"
+                    onclick={() => goToChat()}
+                >
+                    <i class="mdi mdi-chat"></i>
+                </button>
+            </div>
         </div>
-        <div>
-            <ul class="verti-timeline list-unstyled">
+    </div>
+
+    <div class="p-4 sm:p-6">
+        <div class="thin-scrollbar max-h-[calc(100vh-22rem)] min-h-[200px] overflow-y-auto pr-2">
+            <ul class="dialog-timeline relative m-0 list-none space-y-5 p-0 pl-8">
                 {#each dialogs as dialog}
-                <li class="event-list">
-                    <div class="event-timeline-dot">
-                      <i
-                        class={"bx " + (showInRight(dialog)
-                          ? "bx-right-arrow-circle bx-fade-right"
-                          : "bx-right-arrow-circle")}></i>
-                    </div>
-                    <div class="d-flex" style="gap: 10px;">
-                        <div class="flex-shrink-0">
-                            <i class={"bx " + (showInRight(dialog) ? "bx-user" : "bx-bot") + " h2 text-primary"}></i>
-                        </div>
-                        <div class="flex-grow-1" style="min-width: 200px;">
-                            <div>
-                                <span>{dialog.sender?.full_name || dialog.sender?.user_name || 'Unkown'}</span>
-                                <span class="text-muted ms-2" style="font-size: 0.7rem;">{utcToLocal(dialog.created_at)}</span>
+            <li class="relative">
+                <!-- Timeline dot -->
+                <span class="absolute -left-8 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-white ring-2 ring-primary/30 dark:bg-gray-800">
+                    <i class="bx bx-right-arrow-circle text-primary text-base leading-none {showInRight(dialog) ? 'bx-fade-right' : ''}"></i>
+                </span>
+                <div class="rounded-lg border border-gray-100 bg-white p-3 transition-colors hover:border-primary/30 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-primary/40">
+                    <div class="flex items-start gap-3">
+                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+                            <i class="bx {showInRight(dialog) ? 'bx-user' : 'bx-bot'} text-xl leading-none"></i>
+                        </span>
+                        <div class="min-w-0 flex-1">
+                            <div class="flex flex-wrap items-baseline gap-2">
+                                <span class="text-sm font-semibold text-dark dark:text-gray-100">{dialog.sender?.full_name || dialog.sender?.user_name || 'Unknown'}</span>
+                                <span class="text-[0.7rem] text-muted">{utcToLocal(dialog.created_at)}</span>
                             </div>
-                            <div>
+                            <div class="mt-1.5">
                                 <ConvDialogElement dialog={dialog} />
                                 {#if dialog.has_message_files || dialog.data?.startsWith(IMAGE_DATA_PREFIX)}
                                     <MessageFileGallery
@@ -157,15 +163,17 @@
                                 {/if}
                             </div>
                             {#if dialog.message_id}
-                            <div>
-                                <span class="text-muted" style="font-size: 0.7rem;">{`Message id: ${dialog.message_id}`}</span>
+                            <div class="mt-1.5 font-mono text-[0.7rem] text-muted">
+                                Message id: {dialog.message_id}
                             </div>
                             {/if}
                         </div>
                     </div>
-                  </li>
+                </div>
+                </li>
                 {/each}
             </ul>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/conversation/[conversationId]/conv-overview.svelte b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
index 150e5f6c..00038be8 100644
--- a/src/routes/page/conversation/[conversationId]/conv-overview.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
@@ -6,61 +6,81 @@
     let { conversation } = $props();
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <div class="text-center">
-            <h5 class="mt-3 mb-1 ellipsis">{conversation.title}</h5>
-            <p class="text-muted mb-0">{utcToLocal(conversation.created_time)}</p>
+<div class="overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+    <!-- Header: avatar + title + date in a single horizontal band -->
+    <div class="relative overflow-hidden border-b border-gray-100 dark:border-gray-700">
+        <div class="absolute inset-0 bg-linear-to-br from-primary/10 via-white to-primary/5 dark:from-primary/20 dark:via-gray-800 dark:to-primary/10"></div>
+        <div class="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-primary/10"></div>
+        <div class="absolute -bottom-6 -left-2 h-14 w-14 rounded-full bg-primary/5"></div>
+
+        <div class="relative flex items-center gap-3 px-5 py-4">
+            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary to-primary-hover text-white shadow-md ring-2 ring-white/60 dark:ring-gray-800">
+                <i class="mdi mdi-forum-outline text-xl leading-none"></i>
+            </span>
+            <div class="min-w-0 flex-1">
+                <h5
+                    class="conv-title mb-0.5 line-clamp-2 text-sm font-semibold leading-snug text-dark dark:text-gray-100"
+                    title={conversation.title}
+                >
+                    {conversation.title || 'Untitled conversation'}
+                </h5>
+                <p class="mb-0 inline-flex items-center gap-1 text-[0.7rem] text-muted">
+                    <i class="mdi mdi-clock-outline text-xs leading-none"></i>
+                    {utcToLocal(conversation.created_time)}
+                </p>
+            </div>
         </div>
+    </div>
 
-        <ul class="list-unstyled mt-4">
-            <li>
-                <div class="d-flex">
-                    <i class="bx bx-phone text-primary fs-4"></i>
-                    <div class="ms-3">
-                        <h6 class="fs-14 mb-2">{$_('Channel')}</h6>
-                        <p class="text-muted fs-14 mb-0">{conversation.channel}</p>
-                    </div>
+    <div class="px-5 py-4">
+        <ul class="m-0 list-none space-y-2 p-0">
+            <li class="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <i class="bx bx-phone text-lg leading-none"></i>
+                </span>
+                <div class="min-w-0 flex-1">
+                    <div class="text-xs font-semibold uppercase tracking-wider text-muted">{$_('Channel')}</div>
+                    <div class="mt-0.5 truncate text-sm font-medium text-dark dark:text-gray-100">{conversation.channel}</div>
                 </div>
             </li>
-            <li class="mt-3">
-                <div class="d-flex">
-                    <i class="bx bx-mail-send text-primary fs-4"></i>
-                    <div class="ms-3">
-                        <h6 class="fs-14 mb-2">{$_('User')}</h6>
-                        <p class="text-muted fs-14 mb-0">{conversation.user.full_name}</p>
-                    </div>
+            <li class="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <i class="bx bx-mail-send text-lg leading-none"></i>
+                </span>
+                <div class="min-w-0 flex-1">
+                    <div class="text-xs font-semibold uppercase tracking-wider text-muted">{$_('User')}</div>
+                    <div class="mt-0.5 truncate text-sm font-medium text-dark dark:text-gray-100">{conversation.user.full_name}</div>
                 </div>
             </li>
-            <li class="mt-3">
-                <div class="d-flex">
-                    <i class="bx bx-globe text-primary fs-4"></i>
-                    <div class="ms-3">
-                        <h6 class="fs-14 mb-2">{$_('Status')}</h6>
-                        <p class="text-muted fs-14 text-break mb-0">{conversation.status}</p>
-                    </div>
+            <li class="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <i class="bx bx-globe text-lg leading-none"></i>
+                </span>
+                <div class="min-w-0 flex-1">
+                    <div class="text-xs font-semibold uppercase tracking-wider text-muted">{$_('Status')}</div>
+                    <div class="mt-0.5 break-words text-sm font-medium text-dark dark:text-gray-100">{conversation.status}</div>
                 </div>
             </li>
-            <li class="mt-3">
-                <div class="d-flex">
-                    <i class="bx bx-map text-primary fs-4"></i>
-                    <div class="ms-3">
-                        <h6 class="fs-14 mb-2">{$_('Location')}</h6>
-                        <p class="text-muted fs-14 mb-0">Oakridge Lane Richardson.</p>
-                    </div>
+            <li class="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <i class="bx bx-map text-lg leading-none"></i>
+                </span>
+                <div class="min-w-0 flex-1">
+                    <div class="text-xs font-semibold uppercase tracking-wider text-muted">{$_('Location')}</div>
+                    <div class="mt-0.5 truncate text-sm font-medium text-dark dark:text-gray-100">Oakridge Lane Richardson.</div>
                 </div>
             </li>
             {#if conversation.tags?.length > 0}
-            <li class="mt-3">
-                <div class="d-flex">
-                    <i class="bx bx-tag text-primary fs-4"></i>
-                    <div class="ms-3">
-                        <h6 class="fs-14 mb-2">{$_('Tags')}</h6>
-                        <ul style="padding-left: 1rem;">
-                            {#each conversation.tags as tag}
-                                <li class="text-muted fs-14 mb-0">{tag}</li>
-                            {/each}
-                        </ul>
+            <li class="flex items-start gap-3 rounded-lg p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+                    <i class="bx bx-tag text-lg leading-none"></i>
+                </span>
+                <div class="min-w-0 flex-1">
+                    <div class="text-xs font-semibold uppercase tracking-wider text-muted">{$_('Tags')}</div>
+                    <div class="mt-1 flex flex-wrap gap-1">
+                        {#each conversation.tags as tag}
+                            <span class="inline-flex items-center rounded-full bg-info/10 px-2 py-0.5 text-xs font-medium text-info">{tag}</span>
+                        {/each}
                     </div>
                 </div>
             </li>
diff --git a/src/routes/page/conversation/[conversationId]/conv-states.svelte b/src/routes/page/conversation/[conversationId]/conv-states.svelte
index 8088cf4b..ba718d03 100644
--- a/src/routes/page/conversation/[conversationId]/conv-states.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-states.svelte
@@ -6,23 +6,28 @@
     let { conversation } = $props();
 </script>
 
-<div class="card">
-    <div class="card-body">
-        <h4 class="card-title mb-5">States</h4>
-        <div class="conv-states-tree">
+<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10 lg:flex lg:min-h-0 lg:flex-1 lg:flex-col">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+        <div class="flex items-center gap-3">
+            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-info/10 text-info">
+                <i class="mdi mdi-database-outline text-xl"></i>
+            </span>
+            <div>
+                <h4 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">States</h4>
+                <p class="mb-0 text-xs text-muted">Conversation state snapshot</p>
+            </div>
+        </div>
+    </div>
+    <div class="p-4 sm:p-6 lg:flex lg:min-h-0 lg:flex-1 lg:flex-col">
+        <div class="conv-states-tree thin-scrollbar max-h-[400px] overflow-auto rounded-lg bg-gray-50 p-3 ring-1 ring-gray-100 dark:bg-gray-700/30 dark:ring-gray-700 lg:max-h-none lg:min-h-0 lg:flex-1">
             <JSONTree
                 value={formatObject(conversation.states)}
                 defaultExpandedLevel={1}
-                --json-tree-number-color="var(--bs-info)"
-                --json-tree-boolean-color="var(--bs-info)"
-                --json-tree-string-color="var(--bs-info)"
+                --json-tree-number-color="var(--color-info)"
+                --json-tree-boolean-color="var(--color-info)"
+                --json-tree-string-color="var(--color-info)"
             />
         </div>
     </div>
 </div>
 
-<style>
-    .conv-states-tree :global(ul) {
-        font-size: 15px;
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/page/dashboard/+page.svelte b/src/routes/page/dashboard/+page.svelte
index 4350df45..98636d1b 100644
--- a/src/routes/page/dashboard/+page.svelte
+++ b/src/routes/page/dashboard/+page.svelte
@@ -46,45 +46,53 @@
 
 <Breadcrumb title={$_('Home')} pagetitle={$_('Dashboard')} />
 
-<div class="row">
-	<div class="col-xl-4">
-		<div class="card overflow-hidden">
-			<div class="bg-primary-subtle">
-				<div class="row">
-					<div class="col-7">
-						<div class="text-primary p-3">
+<div class="-mx-2 flex flex-wrap">
+	<div class="w-full xl:w-1/3 px-2">
+		<!-- Welcome card -->
+		<div class="mb-4 overflow-hidden rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="bg-primary/25">
+				<div class="flex flex-wrap">
+					<div class="w-7/12">
+						<div class="p-3 text-primary">
 							<h5 class="text-primary">{$_('Welcome Back !')}</h5>
 							<p>{PUBLIC_BRAND_NAME}</p>
 						</div>
 					</div>
-					<div class="col-5 align-self-end">
-						<img src={PUBLIC_LOGIN_IMAGE} alt="" class="img-fluid" />
+					<div class="w-5/12 self-end">
+						<img src={PUBLIC_LOGIN_IMAGE} alt="" class="h-auto max-w-full" />
 					</div>
 				</div>
 			</div>
-			<div class="card-body pt-0">
-				<div class="row">
-					<div class="col-sm-4">
-						<div class="avatar-md profile-user-wid mb-4">
-							<img src='images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
+			<div class="px-4 pb-4 pt-0">
+				<div class="-mx-2 flex flex-wrap">
+					<div class="w-full px-2 sm:w-1/3">
+						<div class="mb-4 h-[4.5rem] w-[4.5rem]">
+							<img
+								src="images/users/user-dummy.jpg"
+								alt=""
+								class="h-full w-full rounded-full border border-gray-200 bg-white p-1 dark:border-gray-700 dark:bg-gray-700"
+							/>
 						</div>
-						<h5 class="font-size-15 text-truncate">{user?.full_name}</h5>
-						<p class="text-muted mb-0 text-truncate">{$_('Agent Manager')}</p>
+						<h5 class="truncate text-[15px] font-semibold">{user?.full_name}</h5>
+						<p class="mb-0 truncate text-muted">{$_('Agent Manager')}</p>
 					</div>
-					<div class="col-sm-8">
+					<div class="w-full px-2 sm:w-2/3">
 						<div class="pt-4">
-							<div class="row">
-								<div class="col-6">
-									<h5 class="font-size-15">125</h5>
-									<p class="text-muted mb-0">Conversations</p>
+							<div class="-mx-2 flex flex-wrap">
+								<div class="w-1/2 px-2">
+									<h5 class="text-[15px] font-semibold">125</h5>
+									<p class="mb-0 text-muted">Conversations</p>
 								</div>
-								<div class="col-6">
-									<h5 class="font-size-15">$1245</h5>
-									<p class="text-muted mb-0">{$_('Token Cost')}</p>
+								<div class="w-1/2 px-2">
+									<h5 class="text-[15px] font-semibold">$1245</h5>
+									<p class="mb-0 text-muted">{$_('Token Cost')}</p>
 								</div>
 							</div>
 							<div class="mt-4">
-								<a href="page/user/me" class="btn btn-primary waves-effect waves-light btn-sm">
+								<a
+									href="page/user/me"
+									class="inline-flex items-center justify-center rounded bg-primary px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+								>
 									{$_('View Profile')} <i class="mdi mdi-arrow-right ms-1"></i>
 								</a>
 							</div>
@@ -93,117 +101,97 @@
 				</div>
 			</div>
 		</div>
-		<div class="card">
-			<div class="card-body">
-				<h4 class="card-title mb-4">{$_('Monthly Cost')}</h4>
-				<div class="row">
-					<div class="col-sm-6">
+
+		<!-- Monthly Cost card -->
+		<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="p-4">
+				<h4 class="mb-4 text-base font-medium text-dark dark:text-gray-100">{$_('Monthly Cost')}</h4>
+				<div class="-mx-2 flex flex-wrap">
+					<div class="w-full px-2 sm:w-1/2">
 						<p class="text-muted">{$_('This month')}</p>
-						<h3>$34,252</h3>
+						<h3 class="text-2xl font-semibold">$34,252</h3>
 						<p class="text-muted">
-							<span class="text-success me-2"> 12% <i class="mdi mdi-arrow-up"></i> </span> {$_('From previous period')}
+							<span class="me-2 text-success"> 12% <i class="mdi mdi-arrow-up"></i> </span>
+							{$_('From previous period')}
 						</p>
 						<div class="mt-4">
-							<a href={'#'} class="btn btn-primary waves-effect waves-light btn-sm"
-								>{$_('View More')} <i class="mdi mdi-arrow-right ms-1"></i></a
+							<a
+								href={'#'}
+								class="inline-flex items-center justify-center rounded bg-primary px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
 							>
+								{$_('View More')} <i class="mdi mdi-arrow-right ms-1"></i>
+							</a>
 						</div>
 					</div>
-					<div class="col-sm-6">
-						<div class="mt-4 mt-sm-0">
-							<RadialBarChart chartColor={['--bs-primary']} />
+					<div class="w-full px-2 sm:w-1/2">
+						<div class="mt-4 sm:mt-0">
+							<RadialBarChart chartColor={['--color-primary']} />
 						</div>
 					</div>
 				</div>
-				<p class="text-muted mb-0">{$_('We craft digital, graphic and dimensional thinking.')}</p>
+				<p class="mb-0 text-muted">{$_('We craft digital, graphic and dimensional thinking.')}</p>
 			</div>
 		</div>
 	</div>
-	<div class="col-xl-8">
-		<div class="row">
-			<div class="col-md-4">
-				<div class="card mini-stats-wid">
-					<div class="card-body">
-						<div class="d-flex">
-							<div class="flex-grow-1">
-								<p class="text-muted fw-medium">Conversations</p>
-								<h4 class="mb-0">1,235</h4>
-							</div>
-							<div class="flex-shrink-0 align-self-center">
-								<div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
-									<span class="avatar-title">
-										<i class="bx bx-copy-alt font-size-24"></i>
-									</span>
+	<div class="w-full xl:w-2/3 px-2">
+		<!-- Mini stats row -->
+		<div class="-mx-2 flex flex-wrap">
+			{#each [
+				{ label: 'Conversations', value: '1,235', icon: 'bx-copy-alt' },
+				{ label: $_('Total Cost'), value: '$35, 723', icon: 'bx-archive-in' },
+				{ label: $_('Average Cost'), value: '$16.2', icon: 'bx-purchase-tag-alt' }
+			] as stat}
+				<div class="w-full px-2 md:w-1/3">
+					<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+						<div class="p-4">
+							<div class="flex">
+								<div class="grow">
+									<p class="text-muted font-medium">{stat.label}</p>
+									<h4 class="mb-0 text-xl font-semibold">{stat.value}</h4>
 								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-md-4">
-				<div class="card mini-stats-wid">
-					<div class="card-body">
-						<div class="d-flex">
-							<div class="flex-grow-1">
-								<p class="text-muted fw-medium">{$_('Total Cost')}</p>
-								<h4 class="mb-0">$35, 723</h4>
-							</div>
-							<div class="flex-shrink-0 align-self-center">
-								<div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
-									<span class="avatar-title">
-										<i class="bx bx-archive-in font-size-24"></i>
-									</span>
+								<div class="shrink-0 self-center">
+									<div class="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-white">
+										<i class="bx {stat.icon} text-2xl"></i>
+									</div>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<div class="col-md-4">
-				<div class="card mini-stats-wid">
-					<div class="card-body">
-						<div class="d-flex">
-							<div class="flex-grow-1">
-								<p class="text-muted fw-medium">{$_('Average Cost')}</p>
-								<h4 class="mb-0">$16.2</h4>
-							</div>
-							<div class="flex-shrink-0 align-self-center">
-								<div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
-									<span class="avatar-title">
-										<i class="bx bx-purchase-tag-alt font-size-24"></i>
-									</span>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
+			{/each}
 		</div>
-		<div class="card">
-			<div class="card-body">
-				<div class="d-sm-flex flex-wrap">
-					<h4 class="card-title mb-4">{$_('Token Spent')}</h4>
-					<div class="ms-auto">
-						<ul class="nav nav-pills">
-							<li class="nav-item">
-								<a href={'#'} class="nav-link">{$_('Week')}</a>
-							</li>
-							<li class="nav-item">
-								<a href={'#'} class="nav-link">{$_('Month')}</a>
-							</li>
-							<li class="nav-item">
-								<a href={'#'} class="nav-link active">{$_('Year')}</a>
+
+		<!-- Token Spent chart -->
+		<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="p-4">
+				<div class="flex flex-wrap items-center">
+					<h4 class="mb-4 text-base font-medium text-dark dark:text-gray-100">{$_('Token Spent')}</h4>
+					<ul class="ms-auto flex gap-1">
+						{#each [
+							{ label: $_('Week'), active: false },
+							{ label: $_('Month'), active: false },
+							{ label: $_('Year'), active: true }
+						] as tab}
+							<li>
+								<a
+									href={'#'}
+									class="inline-flex items-center rounded px-3 py-1 text-sm transition-colors {tab.active
+										? 'bg-primary text-white'
+										: 'text-muted hover:bg-gray-100 dark:hover:bg-gray-700'}"
+								>
+									{tab.label}
+								</a>
 							</li>
-						</ul>
-					</div>
+						{/each}
+					</ul>
 				</div>
-				<StackedColumnChart chartColor={['--bs-primary', '--bs-warning', '--bs-success']} />
+				<StackedColumnChart chartColor={['--color-primary', '--color-warning', '--color-success']} />
 			</div>
 		</div>
 	</div>
 </div>
 
-<div class="row">
+<div class="-mx-2 flex flex-wrap">
 	{#each dashboard_model?.conversation_list || [] as conv (conv.conversation_id)}
 		{#if conv?.conversation_id}
 			<Conversation conversationId={conv.conversation_id} instruction={conv.instruction} userId={user.id}/>
@@ -211,7 +199,7 @@
 	{/each}
 </div>
 
-<div class="row">
+<div class="-mx-2 flex flex-wrap">
 	<SocialSource />
 	<Activity />
 	<TopSellingProduct />
diff --git a/src/routes/page/dashboard/Activity.svelte b/src/routes/page/dashboard/Activity.svelte
index 5b79f52f..947868e1 100644
--- a/src/routes/page/dashboard/Activity.svelte
+++ b/src/routes/page/dashboard/Activity.svelte
@@ -2,79 +2,54 @@
     import { _ } from 'svelte-i18n';
 </script>
 
-<div class="col-xl-4">
-	<div class="card">
-        <div class="card-body">
-        <h4 class="card-title mb-5">
-            {$_('Activity')}
-        </h4>
+<div class="w-full xl:w-1/3 px-2">
+	<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+		<div class="p-4">
+			<h4 class="mb-6 text-base font-medium text-dark dark:text-gray-100">
+				{$_('Activity')}
+			</h4>
 
-        <ul class="verti-timeline list-unstyled">
-            <li class="event-list">
-                <div class="event-timeline-dot">
-                    <i class="bx bx-right-arrow-circle font-size-18"></i>
-                </div>
-                <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                        <h5 class="font-size-14">22 Nov <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
-                    </div>
-                    <div class="flex-grow-1">
-                        <div>
-                            {$_('Responded to need “Volunteer Activities')}
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li class="event-list">
-                <div class="event-timeline-dot">
-                    <i class="bx bx-right-arrow-circle font-size-18"></i>
-                </div>
-                <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                        <h5 class="font-size-14">17 Nov <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
-                    </div>
-                    <div class="flex-grow-1">
-                        <div>
-                            {$_('Everyone realizes why a new common language would be desirable...')} <a href={'#'}>{$_('Read more')}</a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li class="event-list active">
-                <div class="event-timeline-dot">
-                    <i class="bx bxs-right-arrow-circle font-size-18 bx-fade-right"></i>
-                </div>
-                <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                        <h5 class="font-size-14">15 Nov <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
-                    </div>
-                    <div class="flex-grow-1">
-                        <div>
-                            {$_('Joined the group “Boardsmanship Forum”')}
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li class="event-list">
-                <div class="event-timeline-dot">
-                    <i class="bx bx-right-arrow-circle font-size-18"></i>
-                </div>
-                <div class="d-flex">
-                    <div class="flex-shrink-0 me-3">
-                        <h5 class="font-size-14">12 Nov <i class="bx bx-right-arrow-alt font-size-16 text-primary align-middle ms-2"></i></h5>
-                    </div>
-                    <div class="flex-grow-1">
-                        <div>
-                           {$_('Responded to need “In-Kind Opportunity”')}
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
-        <div class="text-center mt-4">
-            <a href={'#'} class="btn btn-primary waves-effect waves-light btn-sm">{$_('View More')} <i class="mdi mdi-arrow-right ms-1"></i></a>
-        </div>
+			<ol class="relative ms-3 list-none space-y-6 border-s-2 border-gray-200 ps-6 dark:border-gray-700">
+				{#each [
+					{ date: '22 Nov', text: $_('Responded to need “Volunteer Activities'), active: false },
+					{ date: '17 Nov', text: $_('Everyone realizes why a new common language would be desirable...'), active: false, readMore: true },
+					{ date: '15 Nov', text: $_('Joined the group “Boardsmanship Forum”'), active: true },
+					{ date: '12 Nov', text: $_('Responded to need “In-Kind Opportunity”'), active: false }
+				] as event}
+					<li class="relative">
+						<!-- Timeline dot -->
+						<span
+							class="absolute -start-[34px] top-0 flex h-7 w-7 items-center justify-center rounded-full ring-2 {event.active
+								? 'bg-primary text-white ring-primary/30'
+								: 'bg-white text-primary ring-gray-200 dark:bg-gray-800 dark:ring-gray-700'}"
+						>
+							<i class="bx {event.active ? 'bxs-right-arrow-circle bx-fade-right' : 'bx-right-arrow-circle'} text-base"></i>
+						</span>
+						<div class="flex">
+							<div class="me-3 shrink-0">
+								<h5 class="text-sm font-semibold">
+									{event.date}
+									<i class="bx bx-right-arrow-alt ms-2 align-middle text-base text-primary"></i>
+								</h5>
+							</div>
+							<div class="grow text-sm text-muted">
+								{event.text}
+								{#if event.readMore}<a href={'#'} class="text-primary hover:text-primary-hover hover:underline">{$_('Read more')}</a>{/if}
+							</div>
+						</div>
+					</li>
+				{/each}
+			</ol>
 
-    </div>
-    </div>
+			<div class="mt-6 text-center">
+				<a
+					href={'#'}
+					class="inline-flex items-center justify-center rounded bg-primary px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
+				>
+					{$_('View More')}
+					<i class="mdi mdi-arrow-right ms-1"></i>
+				</a>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/page/dashboard/Conversation.svelte b/src/routes/page/dashboard/Conversation.svelte
index e0fee2a6..9abc8416 100644
--- a/src/routes/page/dashboard/Conversation.svelte
+++ b/src/routes/page/dashboard/Conversation.svelte
@@ -68,86 +68,71 @@
     }
 </script>
 
-<div class="col-xl-4">
-	<div class={`card ${hide}`}>
-		<div class="card-body">
+<div class="w-full xl:w-1/3 px-2 {hide ? 'hidden' : ''}">
+	<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+		<div class="p-4">
 			{#if isLoading}
-				<h4 class="card-title mb-0">{"Loading..."} </h4>
-				<p> Loading ... </p>
+				<h4 class="mb-0 text-base font-medium">Loading...</h4>
+				<p class="text-muted">Loading ...</p>
 			{:else if conversationModel}
-				<div class="row">
-					<div class="col-10">
-						<h4 class="card-title mb-0">{conversationModel.title} </h4>
-					</div>
-					<div class="col-2">
-						<button
-							class="btn btn-rounded btn-sm btn-light"
-							onclick={() => {
-								hide = 'hide';
-								unpinConversationFromDashboard(conversationModel.agent_id, conversationId);
-							}}
-						>
-							<i
-								class="mdi mdi-pin-off"
-								style="font-size: 12px;"
-								data-bs-toggle="tooltip"
-								data-bs-placement="top"
-								title="Unpin"></i>
-						</button>
-					</div>
+				<div class="flex items-start gap-2">
+					<h4 class="mb-0 grow truncate text-base font-medium text-dark dark:text-gray-100">
+						{conversationModel.title}
+					</h4>
+					<button
+						type="button"
+						class="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-light text-dark transition-colors hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
+						aria-label="Unpin"
+						title="Unpin"
+						onclick={() => {
+							hide = 'hide';
+							unpinConversationFromDashboard(conversationModel.agent_id, conversationId);
+						}}
+					>
+						<i class="mdi mdi-pin-off text-xs"></i>
+					</button>
 				</div>
-				<div class="card mb-2">
-					<div class="chat-head">
-						<div class="row chat-row">
-							<div class="col-md-0 col-7 chat-head-info">
-								<div class="chat-head-agent">
-									{#if agent?.icon_url}
-									<div class="line-align-center">
-										<img class="chat-head-agent-icon" src={agent.icon_url} alt="">
-									</div>
-									{/if}
-									<div class="chat-head-agent-name line-align-center ellipsis">{conversationModel.agent_id}</div>
-								</div>
-							</div>
+
+				<div class="mt-3 rounded border border-gray-200 dark:border-gray-700">
+					<!-- Chat head -->
+					<div class="flex items-center gap-2 border-b border-gray-200 px-3 py-2 dark:border-gray-700">
+						{#if agent?.icon_url}
+							<img class="h-6 w-6 rounded-full" src={agent.icon_url} alt="">
+						{/if}
+						<div class="truncate text-sm font-medium text-dark dark:text-gray-100">
+							{conversationModel.agent_id}
 						</div>
 					</div>
 
-					<div class="chat-input-section css-animation fade-in-from-none mb-2">
-						<div class="row">
-							<div class="col-10">
-								<div class="position-relative">
-									<ChatTextArea
-										id={'dashboard-chat-textarea'}
-										className={'chat-input'}
-										maxLength={1024}
-										disabled={false}
-										bind:text={text}
-										bind:loadUtils={loadUtils}
-										bind:options={chatUtilOptions}
-										onFocus={() => chatUtilOptions = []}
-									>
-									</ChatTextArea>
-								</div>
-							</div>
-							<div class="col-auto">
-								<button
-									type="submit"
-									class="btn btn-rounded chat-send waves-effect waves-light btn-primary"
-									disabled={!text}
-									onclick={() => updateDashboardConversation({
-										conversation_id: conversationId,
-										name: '',
-										instruction: text
-									})}
-								>
-									<i class="mdi mdi-send"></i>
-								</button>
-							</div>
+					<!-- Input -->
+					<div class="flex items-end gap-2 p-2">
+						<div class="relative grow">
+							<ChatTextArea
+								id={'dashboard-chat-textarea'}
+								className={'chat-input'}
+								maxLength={1024}
+								disabled={false}
+								bind:text={text}
+								bind:loadUtils={loadUtils}
+								bind:options={chatUtilOptions}
+								onFocus={() => chatUtilOptions = []}
+							/>
 						</div>
+						<button
+							type="submit"
+							class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-white transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
+							disabled={!text}
+							onclick={() => updateDashboardConversation({
+								conversation_id: conversationId,
+								name: '',
+								instruction: text
+							})}
+						>
+							<i class="mdi mdi-send"></i>
+						</button>
 					</div>
 				</div>
 			{/if}
-
 		</div>
 	</div>
 </div>
diff --git a/src/routes/page/dashboard/SocialSource.svelte b/src/routes/page/dashboard/SocialSource.svelte
index 6e2b6b25..bec90bac 100644
--- a/src/routes/page/dashboard/SocialSource.svelte
+++ b/src/routes/page/dashboard/SocialSource.svelte
@@ -2,62 +2,48 @@
 	import { _ } from 'svelte-i18n';
 </script>
 
-<div class="col-xl-4">
-	<div class="card">
-		<div class="card-body">
-			<h4 class="card-title mb-4">{$_('Channel Stats')}</h4>
+<div class="w-full xl:w-1/3 px-2">
+	<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+		<div class="p-4">
+			<h4 class="mb-4 text-base font-medium text-dark dark:text-gray-100">{$_('Channel Stats')}</h4>
 			<div class="text-center">
-				<div class="avatar-sm mx-auto mb-4">
-					<span class="avatar-title rounded-circle bg-primary-subtle font-size-24">
-						<i class="mdi mdi-facebook text-primary"></i>
-					</span>
+				<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/25 text-2xl text-primary">
+					<i class="mdi mdi-facebook"></i>
 				</div>
-				<p class="font-16 text-muted mb-2"></p>
-				<h5>
-					<a href={'#'} class="text-dark"
-						>Facebook - <span class="text-muted font-16">125 Conversations</span>
+				<h5 class="mb-2">
+					<a href={'#'} class="text-dark hover:underline dark:text-gray-100">
+						Facebook - <span class="text-base text-muted">125 Conversations</span>
 					</a>
 				</h5>
 				<p class="text-muted">
 					{$_('Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus tincidunt.')}
 				</p>
-				<a href={'#'} class="text-primary font-16">
+				<a href={'#'} class="inline-flex items-center text-base text-primary hover:text-primary-hover hover:underline">
 					{$_('Learn more')} <i class="mdi mdi-chevron-right"></i>
 				</a>
 			</div>
-			<div class="row mt-4">
-				<div class="col-4">
-					<div class="social-source text-center mt-3">
-						<div class="avatar-xs mx-auto mb-3">
-							<span class="avatar-title rounded-circle bg-primary font-size-16">
-								<i class="mdi mdi-facebook text-white"></i>
-							</span>
-						</div>
-						<h5 class="font-size-15">Facebook</h5>
-						<p class="text-muted mb-0">125 {$_('sales')}</p>
+
+			<div class="mt-4 flex flex-wrap">
+				<div class="mt-3 w-1/3 text-center">
+					<div class="mx-auto mb-3 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-base text-white">
+						<i class="mdi mdi-facebook"></i>
 					</div>
+					<h5 class="text-[15px] font-semibold">Facebook</h5>
+					<p class="mb-0 text-muted">125 {$_('sales')}</p>
 				</div>
-				<div class="col-4">
-					<div class="social-source text-center mt-3">
-						<div class="avatar-xs mx-auto mb-3">
-							<span class="avatar-title rounded-circle bg-info font-size-16">
-								<i class="mdi mdi-twitter text-white"></i>
-							</span>
-						</div>
-						<h5 class="font-size-15">Twitter</h5>
-						<p class="text-muted mb-0">112 {$_('sales')}</p>
+				<div class="mt-3 w-1/3 text-center">
+					<div class="mx-auto mb-3 flex h-8 w-8 items-center justify-center rounded-full bg-info text-base text-white">
+						<i class="mdi mdi-twitter"></i>
 					</div>
+					<h5 class="text-[15px] font-semibold">Twitter</h5>
+					<p class="mb-0 text-muted">112 {$_('sales')}</p>
 				</div>
-				<div class="col-4">
-					<div class="social-source text-center mt-3">
-						<div class="avatar-xs mx-auto mb-3">
-							<span class="avatar-title rounded-circle bg-pink font-size-16">
-								<i class="mdi mdi-instagram text-white"></i>
-							</span>
-						</div>
-						<h5 class="font-size-15">Instagram</h5>
-						<p class="text-muted mb-0">104 {$_('sales')}</p>
+				<div class="mt-3 w-1/3 text-center">
+					<div class="mx-auto mb-3 flex h-8 w-8 items-center justify-center rounded-full bg-pink-500 text-base text-white">
+						<i class="mdi mdi-instagram"></i>
 					</div>
+					<h5 class="text-[15px] font-semibold">Instagram</h5>
+					<p class="mb-0 text-muted">104 {$_('sales')}</p>
 				</div>
 			</div>
 		</div>
diff --git a/src/routes/page/dashboard/TopSellingProduct.svelte b/src/routes/page/dashboard/TopSellingProduct.svelte
index ff8a03dc..7558b6f9 100644
--- a/src/routes/page/dashboard/TopSellingProduct.svelte
+++ b/src/routes/page/dashboard/TopSellingProduct.svelte
@@ -2,57 +2,43 @@
 	import { _ } from 'svelte-i18n';
 </script>
 
-<div class="col-xl-4">
-	<div class="card">
-		<div class="card-body">
-			<h4 class="card-title mb-4">{$_('Top Client Usage')}</h4>
+<div class="w-full xl:w-1/3 px-2">
+	<div class="mb-4 rounded-md bg-white shadow ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+		<div class="p-4">
+			<h4 class="mb-4 text-base font-medium text-dark dark:text-gray-100">{$_('Top Client Usage')}</h4>
 			<div class="text-center">
 				<div class="mb-4">
-					<i class="bx bx-map-pin text-primary display-4"></i>
+					<i class="bx bx-map-pin text-5xl text-primary"></i>
 				</div>
-				<h3>1,456</h3>
-				<p>San Francisco</p>
+				<h3 class="text-2xl font-semibold">1,456</h3>
+				<p class="text-muted">San Francisco</p>
 			</div>
-			<div class="table-responsive mt-4">
-				<table class="table align-middle table-nowrap">
+
+			<div class="mt-4 overflow-x-auto">
+				<table class="w-full whitespace-nowrap align-middle">
 					<tbody>
-						<tr>
-							<td style="width: 30%">
-								<p class="mb-0">San Francisco</p>
-							</td>
-							<td style="width: 25%"> <h5 class="mb-0">1,456</h5></td>
-							<td>
-								<div class="progress progress-sm">
-									<div class="progress-bar bg-primary" role="progressbar" style="width: 94%" aria-valuenow={94} aria-valuemin={0} aria-valuemax={100}></div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<p class="mb-0">Los Angeles</p>
-							</td>
-							<td>
-								<h5 class="mb-0">1,123</h5>
-							</td>
-							<td>
-								<div class="progress progress-sm">
-									<div class="progress-bar bg-success" role="progressbar" style="width: 82%" aria-valuenow={82} aria-valuemin={0} aria-valuemax={100}></div>
-								</div>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<p class="mb-0">San Diego</p>
-							</td>
-							<td>
-								<h5 class="mb-0">1,026</h5>
-							</td>
-							<td>
-								<div class="progress progress-sm">
-									<div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow={70} aria-valuemin={0} aria-valuemax={100}></div>
-								</div>
-							</td>
-						</tr>
+						{#each [
+							{ name: 'San Francisco', value: '1,456', width: 94, color: 'bg-primary' },
+							{ name: 'Los Angeles', value: '1,123', width: 82, color: 'bg-success' },
+							{ name: 'San Diego', value: '1,026', width: 70, color: 'bg-warning' }
+						] as row}
+							<tr class="border-t border-gray-100 first:border-t-0 dark:border-gray-700">
+								<td class="w-[30%] py-3"><p class="mb-0 text-sm text-muted">{row.name}</p></td>
+								<td class="w-[25%] py-3"><h5 class="mb-0 text-sm font-semibold">{row.value}</h5></td>
+								<td class="py-3">
+									<div class="relative h-1 w-full overflow-hidden rounded bg-gray-200 dark:bg-gray-700">
+										<div
+											class="h-full {row.color}"
+											role="progressbar"
+											style="width: {row.width}%"
+											aria-valuenow={row.width}
+											aria-valuemin={0}
+											aria-valuemax={100}
+										></div>
+									</div>
+								</td>
+							</tr>
+						{/each}
 					</tbody>
 				</table>
 			</div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-agent.svelte b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
index a31d31ff..195418a9 100644
--- a/src/routes/page/instruction/instruction-components/instruction-agent.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
@@ -68,34 +68,36 @@
 </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
-                tag={'agent-select'}
-                placeholder={'Select Agent'}
-                searchMode
-                disabled={disabled}
-                selectedValues={selectedAgent?.id ? [selectedAgent.id] : []}
-                options={agentOptions}
-                onselect={e => selectAgent(e)}
-            />
-        </div>
+<div class="flex flex-col gap-5 py-3">
+    <div>
+        <label for="agent-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-robot-outline text-sm leading-none"></i>
+            Agent
+        </label>
+        <Select
+            tag={'agent-select'}
+            placeholder={'Select Agent'}
+            searchMode
+            disabled={disabled}
+            selectedValues={selectedAgent?.id ? [selectedAgent.id] : []}
+            options={agentOptions}
+            onselect={e => selectAgent(e)}
+        />
     </div>
 
-    <div class="instruct-setting-item">
-        <div class="instruct-setting-dropdown">
-            <div class="text-primary fw-bold mb-1">Template</div>
-            <Select
-                tag={'template-select'}
-                placeholder={'Select Template'}
-                searchMode
-                disabled={disabled}
-                selectedValues={selectedTemplate?.id ? [selectedTemplate.id] : []}
-                options={templateOptions}
-                onselect={e => selectTemplate(e)}
-            />
-        </div>
+    <div>
+        <label for="template-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-file-document-outline text-sm leading-none"></i>
+            Template
+        </label>
+        <Select
+            tag={'template-select'}
+            placeholder={'Select Template'}
+            searchMode
+            disabled={disabled}
+            selectedValues={selectedTemplate?.id ? [selectedTemplate.id] : []}
+            options={templateOptions}
+            onselect={e => selectTemplate(e)}
+        />
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-coding.svelte b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
index a26ead95..947ec703 100644
--- a/src/routes/page/instruction/instruction-components/instruction-coding.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
@@ -56,77 +56,74 @@
     }
 </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">Code Script</div>
-            <Select
-                tag={'code-script-select'}
-                placeholder={'Select Script'}
-                searchMode
-                disabled={disabled}
-                selectedValues={selectedCodeScript?.name ? [selectedCodeScript.name] : []}
-                options={codeScriptOptions}
-                onselect={e => selectCodeScript(e)}
-            />
-        </div>
+<div class="flex flex-col gap-5 py-3">
+    <div>
+        <label for="code-script-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-code-tags text-sm leading-none"></i>
+            Code Script
+        </label>
+        <Select
+            tag={'code-script-select'}
+            placeholder={'Select Script'}
+            searchMode
+            disabled={disabled}
+            selectedValues={selectedCodeScript?.name ? [selectedCodeScript.name] : []}
+            options={codeScriptOptions}
+            onselect={e => selectCodeScript(e)}
+        />
     </div>
 
-    <div class="instruct-setting-item">
-        <div class="instruct-setting-dropdown">
-            <div class="text-primary fw-bold mb-1">Arguments</div>
-            <div class="instruct-kv-container" style="max-height: 170px;" bind:this={scrollContainer}>
-                {#each args as arg, idx}
-                    <div class="instruct-kv-item" style="gap: 10px;">
-                        <div style="flex: 0.5;">
-                            <input
-                                type="text"
-                                class="form-control"
-                                name={`arg-key-${idx}`}
-                                bind:value={arg.key}
-                                maxlength={maxLength}
-                                disabled={disabled}
-                                placeholder="Enter a name"
-                            />
-                        </div>
-                        <div style="flex: 0.5;">
-                            <input
-                                type="text"
-                                class="form-control"
-                                name={`arg-value-${idx}`}
-                                bind:value={arg.value}
-                                maxlength={maxLength}
-                                disabled={disabled}
-                                placeholder="Enter a value"
-                            />
-                        </div>
-                        <div class="line-align-center" style={`flex: 0 0 13px; margin-top: 3px;`}>
-                            <div>
-                                <i
-                                    class="bx bxs-no-entry text-danger clickable"
-                                    role="button"
-                                    tabindex="0"
-                                    onclick={() => removeArg(idx)}
-                                    onkeydown={(/** @type {KeyboardEvent} */ e) => { if (e.key === 'Enter') removeArg(idx); }}
-                                ></i>
-                            </div>
-                        </div>
-                    </div>
-                {/each}
-            </div>
-            {#if args.length < limit}
-                <div class="text-center">
+    <div>
+        <div class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-tune-variant text-sm leading-none"></i>
+            Arguments
+        </div>
+        <div class="thin-scrollbar flex max-h-[170px] flex-col gap-2 overflow-y-auto px-1 pb-2" bind:this={scrollContainer}>
+            {#each args as arg, idx}
+                <div class="grid grid-cols-[1fr_1fr_auto] items-center gap-2">
+                    <input
+                        type="text"
+                        class="form-control"
+                        name={`arg-key-${idx}`}
+                        bind:value={arg.key}
+                        maxlength={maxLength}
+                        disabled={disabled}
+                        placeholder="Enter a name"
+                    />
+                    <input
+                        type="text"
+                        class="form-control"
+                        name={`arg-value-${idx}`}
+                        bind:value={arg.value}
+                        maxlength={maxLength}
+                        disabled={disabled}
+                        placeholder="Enter a value"
+                    />
                     <button
                         type="button"
-                        class="btn btn-link"
-                        style="padding-left: 0px;"
+                        class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-danger/15 text-danger transition-all hover:scale-105 hover:bg-danger/25 disabled:cursor-not-allowed disabled:opacity-50"
                         disabled={disabled}
-                        onclick={() => addArg()}
+                        aria-label="Remove argument"
+                        title="Remove"
+                        onclick={() => removeArg(idx)}
                     >
-                        Add +
+                        <i class="bx bxs-no-entry text-base leading-none"></i>
                     </button>
                 </div>
-            {/if}
+            {/each}
         </div>
+        {#if args.length < limit}
+            <div class="mt-2 text-center">
+                <button
+                    type="button"
+                    class="btn btn-link inline-flex items-center gap-1"
+                    disabled={disabled}
+                    onclick={() => addArg()}
+                >
+                    <i class="mdi mdi-plus text-base leading-none"></i>
+                    Add
+                </button>
+            </div>
+        {/if}
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index 94b2480c..fb4e02f0 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -60,34 +60,36 @@
 </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
-                tag={'provider-select'}
-                placeholder={'Select Provider'}
-                searchMode
-                disabled={disabled}
-                selectedValues={selectedProvider?.provider ? [selectedProvider.provider] : []}
-                options={providerOptions}
-                onselect={e => selectProvider(e)}
-            />
-        </div>
+<div class="flex flex-col gap-5 py-3">
+    <div>
+        <label for="provider-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-cloud-outline text-sm leading-none"></i>
+            Provider
+        </label>
+        <Select
+            tag={'provider-select'}
+            placeholder={'Select Provider'}
+            searchMode
+            disabled={disabled}
+            selectedValues={selectedProvider?.provider ? [selectedProvider.provider] : []}
+            options={providerOptions}
+            onselect={e => selectProvider(e)}
+        />
     </div>
 
-    <div class="instruct-setting-item">
-        <div class="instruct-setting-dropdown">
-            <div class="text-primary fw-bold mb-1">Model</div>
-            <Select
-                tag={'model-select'}
-                placeholder={'Select Model'}
-                searchMode
-                disabled={disabled}
-                selectedValues={selectedModel ? [selectedModel] : []}
-                options={modelOptions}
-                onselect={e => selectModel(e)}
-            />
-        </div>
+    <div>
+        <label for="model-select" class="mb-1.5 inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-primary">
+            <i class="mdi mdi-chip text-sm leading-none"></i>
+            Model
+        </label>
+        <Select
+            tag={'model-select'}
+            placeholder={'Select Model'}
+            searchMode
+            disabled={disabled}
+            selectedValues={selectedModel ? [selectedModel] : []}
+            options={modelOptions}
+            onselect={e => selectModel(e)}
+        />
     </div>
 </div>
\ 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 e0caef81..6e250a07 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -35,66 +35,56 @@
 </script>
 
 
-<div class="instruct-setting-section instruct-setting-padding">
-    <div class="instruct-kv-container" bind:this={scrollContainer}>
+<div class="flex flex-col py-3">
+    <div class="grid grid-cols-[1fr_1fr_auto] gap-2 px-1 pb-1">
+        <div class="text-xs font-semibold uppercase tracking-wider text-primary">{'Key'}</div>
+        <div class="text-xs font-semibold uppercase tracking-wider text-primary">{'Value'}</div>
+        <div class="w-5"></div>
+    </div>
+    <div class="thin-scrollbar flex max-h-[200px] flex-col gap-2 overflow-y-auto px-1 pb-2" bind:this={scrollContainer}>
         {#each states as state, idx}
-            <div class="instruct-kv-item">
-                <div style="flex: 0.45;">
-                    {#if idx === 0}
-                    <div class="text-primary mb-1">
-                        {'Key'}
-                    </div>
-                    {/if}
-                    <input
-                        type="text"
-                        class="form-control"
-                        name={`state-key-${idx}`}
-                        bind:value={state.key}
-                        maxlength={maxLength}
-                        disabled={disabled}
-                        placeholder="Enter a name"
-                    />
-                </div>
-                <div style="flex: 0.45;">
-                    {#if idx === 0}
-                    <div class="text-primary mb-1">
-                        {'Value'}
-                    </div>
-                    {/if}
-                    <input
-                        type="text"
-                        class="form-control"
-                        name={`state-value-${idx}`}
-                        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' : '3px'}`}>
-                    <div>
-                        <i
-                            class="bx bxs-no-entry text-danger clickable"
-                            role="button"
-                            tabindex="0"
-                            onclick={() => removeState(idx)}
-                            onkeydown={(/** @type {KeyboardEvent} */ e) => { if (e.key === 'Enter') removeState(idx); }}
-                        ></i>
-                    </div>
-                </div>
+            <div class="grid grid-cols-[1fr_1fr_auto] items-center gap-2">
+                <input
+                    type="text"
+                    class="form-control"
+                    name={`state-key-${idx}`}
+                    bind:value={state.key}
+                    maxlength={maxLength}
+                    disabled={disabled}
+                    placeholder="Enter a name"
+                />
+                <input
+                    type="text"
+                    class="form-control"
+                    name={`state-value-${idx}`}
+                    bind:value={state.value}
+                    maxlength={maxLength}
+                    disabled={disabled}
+                    placeholder="Enter a value"
+                />
+                <button
+                    type="button"
+                    class="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-danger/15 text-danger transition-all hover:scale-105 hover:bg-danger/25 disabled:cursor-not-allowed disabled:opacity-50"
+                    disabled={disabled}
+                    aria-label="Remove state"
+                    title="Remove"
+                    onclick={() => removeState(idx)}
+                >
+                    <i class="bx bxs-no-entry text-base leading-none"></i>
+                </button>
             </div>
         {/each}
     </div>
     {#if states.length < limit}
-        <div class="text-center">
+        <div class="mt-2 text-center">
             <button
                 type="button"
-                class="btn btn-link"
-                style="padding-left: 0px;"
+                class="btn btn-link inline-flex items-center gap-1"
                 disabled={disabled}
                 onclick={() => addState()}
             >
-                Add +
+                <i class="mdi mdi-plus text-base leading-none"></i>
+                Add
             </button>
         </div>
     {/if}
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index 68507358..a9990e37 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -11,7 +11,7 @@
 	import { getInstructionLogSearchKeys } from '$lib/services/instruct-service';
 	import { getInstructionLogs } from '$lib/services/logging-service';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
-	import { convertTimeRange, removeDuplicates } from '$lib/helpers/utils/common';
+	import { convertTimeRange, removeDuplicates, formatNumber } from '$lib/helpers/utils/common';
 	import StateSearch from '$lib/common/shared/StateSearch.svelte';
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import TimeRangePicker from '$lib/common/shared/TimeRangePicker.svelte';
@@ -292,46 +292,46 @@
 
 <LoadingToComplete isLoading={isLoading} />
 
-<div class="row">
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-body border-bottom">
-				<div class="d-flex flex-wrap align-items-center justify-content-between">
-					<div class="mb-0 card-title flex-grow-0">
-						<h5 class="mb-0 card-title flex-grow-1">{$_('Log List')}</h5>
-					</div>
-					<div class="state-search-btn-wrapper">
-						<button
-							type="button"
-							class="btn btn-{showStateSearch ? 'secondary' : 'primary'}"
-							onclick={() => showStateSearch = !showStateSearch}
-						>
-							<div class="state-search-btn">
-								<div>
-									{#if showStateSearch}
-										<i class="bx bx-hide"></i>
-									{:else}
-										<i class="bx bx-search-alt"></i>
-									{/if}
-								</div>
-								<div class="search-btn-text">{'State Search'}</div>
-							</div>
-						</button>
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex flex-wrap items-center justify-between gap-3">
+					<div class="flex items-center gap-3">
+						<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+							<i class="mdi mdi-text-box-search-outline text-xl"></i>
+						</span>
+						<div>
+							<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Log List')}</h5>
+							<p class="mb-0 text-xs text-muted">{formatNumber(pager.count)} {pager.count === 1 ? 'log entry' : 'log entries'} total</p>
+						</div>
 					</div>
+					<button
+						type="button"
+						class="inline-flex cursor-pointer items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium shadow-sm transition-colors {showStateSearch ? 'bg-gray-200 text-dark hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600' : 'bg-primary text-white hover:bg-primary-hover'}"
+						onclick={() => showStateSearch = !showStateSearch}
+					>
+						{#if showStateSearch}
+							<i class="bx bx-hide text-base leading-none"></i>
+						{:else}
+							<i class="bx bx-search-alt text-base leading-none"></i>
+						{/if}
+						<span class="search-btn-text">{'State Search'}</span>
+					</button>
 				</div>
 			</div>
 			{#if showStateSearch}
-				<div class="card-body border-bottom">
-					<div class="row g-3 justify-content-end">
-						<div class="col-lg-6">
+				<div class="instruct-state-search border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+					<div class="flex justify-end">
+						<div class="w-full lg:w-1/2">
 							<StateSearch bind:states={states} onSearch={(query) => handleStateSearch(query)} />
 						</div>
 					</div>
 				</div>
 			{/if}
-			<div class="card-body border-bottom">
-				<div class="row g-3">
-					<div class="col-lg-3">
+			<div class="instruct-filter border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-12">
+					<div class="lg:col-span-3">
 						<Select
 							tag={'agent-select'}
 							placeholder={'Select agents'}
@@ -341,9 +341,13 @@
 							selectedValues={searchOption.agentIds}
 							options={agentOptions}
 							onselect={e => changeOption(e, 'agent')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-robot-outline"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<Select
 							tag={'llm-provider-select'}
 							placeholder={'Select LLM provider'}
@@ -351,9 +355,13 @@
 							selectedValues={searchOption.providers}
 							options={providerOptions}
 							onselect={e => changeOption(e, 'provider')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-chip"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<Select
 							tag={'llm-model-select'}
 							placeholder={'Select LLM model'}
@@ -363,18 +371,27 @@
 							selectedValues={searchOption.models}
 							options={modelOptions}
 							onselect={e => changeOption(e, 'model')}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-cube-outline"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-lg-2">
-						<input
-							type="text"
-							class="form-control"
-							bind:value={searchOption.template}
-							maxlength={100}
-							placeholder={'Search template...'}
-						/>
+					<div class="lg:col-span-2">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-file-document-outline text-base leading-none"></i>
+							</span>
+							<input
+								type="text"
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								bind:value={searchOption.template}
+								maxlength={100}
+								placeholder={'Search template...'}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-2">
+					<div class="lg:col-span-2">
 						<TimeRangePicker
 							storageKey="botsharp_instruction_recent_time_ranges"
 							bind:timeRange={searchOption.timeRange}
@@ -386,32 +403,36 @@
 								searchOption.startDate = data.startDate;
 								searchOption.endDate = data.endDate;
 							}}
-						/>
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-clock-outline"></i>
+							{/snippet}
+						</TimeRangePicker>
 					</div>
-					<div class="col-lg-1">
+					<div class="lg:col-span-1">
 						<button
 							type="button"
-							class="btn btn-secondary btn-soft-secondary w-100"
+							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							onclick={() => search()}
 						>
 							<i class="mdi mdi-filter-outline align-middle"></i>
-							<span class="d-none">{$_('Filter')}</span>
+							<span class="sr-only">{$_('Filter')}</span>
 						</button>
 					</div>
 				</div>
 			</div>
-			<div class="card-body">
-				<div class="table-responsive thin-scrollbar">
-					<table class="table table-bordered align-middle nowrap users-table">
-						<thead>
+			<div class="p-4 sm:p-6">
+				<div class="thin-scrollbar overflow-x-auto rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
+					<table class="instruct-table w-full border-collapse text-sm">
+						<thead class="bg-gray-50 dark:bg-gray-700/50">
 							<tr>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Agent')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Llm Provider')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Llm Model')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Template')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Caller')}</th>
-								<th scope="col" class="instruction-log-col ellipsis">{$_('Created Time')}</th>
-								<th scope="col">{$_('')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Agent')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Llm Provider')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Llm Model')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Template')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Caller')}</th>
+								<th scope="col" class="instruction-log-col">{$_('Created Time')}</th>
+								<th scope="col" class="text-center">{$_('Action')}</th>
 							</tr>
 						</thead>
 						<tbody>
@@ -425,4 +446,5 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/instruction/log/log-item.svelte b/src/routes/page/instruction/log/log-item.svelte
index 407b8903..1f351b32 100644
--- a/src/routes/page/instruction/log/log-item.svelte
+++ b/src/routes/page/instruction/log/log-item.svelte
@@ -20,76 +20,119 @@
     }
 </script>
 
-<tr in:fly={{ y: -5, duration: 800 }}>
-    <td class="instruction-log-col ellipsis">{item.agent_name || 'N/A'}</td>
-    <td class="instruction-log-col ellipsis">{item.provider}</td>
-    <td class="instruction-log-col ellipsis">{item.model}</td>
-    <td class="instruction-log-col ellipsis">{item.template_name || 'N/A'}</td>
-    <td class="instruction-log-col ellipsis">{item.user_name || 'N/A'}</td>
-    <td class="instruction-log-col ellipsis">{utcToLocal(item.created_time, 'MMM D YYYY, hh:mm:ss A')}</td>
+<tr in:fly={{ y: -5, duration: 800 }} class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+    <td class="instruction-log-col" title={item.agent_name ?? ''}>
+        {#if item.agent_name}
+            <span class="inline-flex max-w-full items-center gap-1 truncate rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                <i class="mdi mdi-robot-outline text-sm leading-none"></i>
+                <span class="truncate">{item.agent_name}</span>
+            </span>
+        {:else}
+            <span class="text-muted italic">N/A</span>
+        {/if}
+    </td>
+    <td class="instruction-log-col" title={item.provider ?? ''}>
+        {#if item.provider}
+            <span class="inline-flex items-center rounded-full bg-info/10 px-2 py-0.5 text-xs font-medium text-info">{item.provider}</span>
+        {:else}
+            <span class="text-muted italic">—</span>
+        {/if}
+    </td>
+    <td class="instruction-log-col" title={item.model ?? ''}>
+        {#if item.model}
+            <span class="font-mono text-xs text-dark dark:text-gray-100">{item.model}</span>
+        {:else}
+            <span class="text-muted italic">—</span>
+        {/if}
+    </td>
+    <td class="instruction-log-col" title={item.template_name ?? ''}>
+        {#if item.template_name}
+            <span class="font-mono text-xs text-dark dark:text-gray-100">{item.template_name}</span>
+        {:else}
+            <span class="text-muted italic">N/A</span>
+        {/if}
+    </td>
+    <td class="instruction-log-col" title={item.user_name ?? ''}>
+        {#if item.user_name}
+            <div class="flex items-center gap-2">
+                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[0.65rem] font-semibold uppercase text-primary">
+                    {item.user_name.charAt(0)}
+                </span>
+                <span class="truncate text-dark dark:text-gray-100">{item.user_name}</span>
+            </div>
+        {:else}
+            <span class="text-muted italic">N/A</span>
+        {/if}
+    </td>
+    <td class="instruction-log-col">
+        <span class="text-xs text-muted">{utcToLocal(item.created_time, 'MMM D YYYY, hh:mm:ss A')}</span>
+    </td>
     <td>
-        <ul class="list-unstyled hstack gap-1 mb-0" style="justify-content: center;">
-            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Detail">
-                <button
-                    type="button"
-                    class="btn btn-sm btn-soft-warning"
-                    aria-label="Toggle log detail"
-                    onclick={() => toggleLogDetail()}
-                >
-                    <i class="mdi mdi-eye-outline"></i>
-                </button>
-            </li>
-        </ul>
+        <div class="flex justify-center">
+            <button
+                type="button"
+                class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-warning/15 text-warning transition-all hover:scale-105 hover:bg-warning/25"
+                aria-label={open ? 'Collapse' : 'Detail'}
+                title={open ? 'Collapse' : 'Detail'}
+                onclick={() => toggleLogDetail()}
+            >
+                <i class="mdi {open ? 'mdi-chevron-up' : 'mdi-eye-outline'}"></i>
+            </button>
+        </div>
     </td>
 </tr>
 
 
 {#if open}
     <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
-        <td colspan="12">
-            <div class="instruction-log-detail-container">
+        <td colspan="12" class="!whitespace-normal !p-3">
+            <div class="relative flex flex-col gap-4 rounded-lg border-l-4 border-primary bg-primary/5 p-5 dark:bg-primary/10">
                 {#if !!item.system_instruction}
                 <div>
-                    <div class="text-primary fw-bold">
-                        {'System instruction:'}
+                    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+                        <i class="mdi mdi-cog-outline text-base leading-none"></i>
+                        System instruction
                     </div>
-                    <div class="instruction-log-mt overflow">
+                    <div class="thin-scrollbar max-h-[350px] overflow-y-auto rounded-md border border-gray-100 bg-white p-3 text-xs leading-relaxed text-dark dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
                         <div contenteditable="false" bind:innerText={item.system_instruction}></div>
                     </div>
                 </div>
                 {/if}
                 {#if !!item.user_message}
                 <div>
-                    <div class="text-primary fw-bold">
-                        {'User message:'}
+                    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+                        <i class="mdi mdi-message-text-outline text-base leading-none"></i>
+                        User message
                     </div>
-                    <div class="instruction-log-mt overflow">
+                    <div class="thin-scrollbar max-h-[350px] overflow-y-auto rounded-md border border-gray-100 bg-white p-3 text-xs leading-relaxed text-dark dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
                         <div contenteditable="false" bind:innerText={item.user_message}></div>
                     </div>
                 </div>
                 {/if}
                 {#if !!item.completion_text}
                 <div>
-                    <div class="text-primary fw-bold">
-                        {'Completion text:'}
+                    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+                        <i class="mdi mdi-robot-happy-outline text-base leading-none"></i>
+                        Completion text
                     </div>
-                    <div class="instruction-log-mt overflow">
+                    <div class="thin-scrollbar max-h-[350px] overflow-y-auto rounded-md border border-gray-100 bg-white p-3 text-xs leading-relaxed text-dark dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
                         <Markdown containerClasses={'markdown-dark text-dark'} text={item.completion_text} rawText />
                     </div>
                 </div>
                 {/if}
                 {#if item.states}
                 <div>
-                    <div class="text-primary fw-bold">
-                        {'States:'}
+                    <div class="mb-2 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+                        <i class="mdi mdi-database-outline text-base leading-none"></i>
+                        States
                     </div>
-                    <div class="instruction-log-mt instruction-log-state overflow">
+                    <div class="instruction-log-state thin-scrollbar max-h-[350px] overflow-y-auto rounded-md border border-gray-100 bg-white p-3 text-xs dark:border-gray-700 dark:bg-gray-800">
                         <JSONTree
                             value={formatObject(item.states)}
                             defaultExpandedLevel={1}
-                            --json-tree-number-color="var(--bs-info)"
-                            --json-tree-boolean-color="var(--bs-info)"
-                            --json-tree-string-color="var(--bs-info)"
+                            --json-tree-number-color="var(--color-info)"
+                            --json-tree-boolean-color="var(--color-info)"
+                            --json-tree-string-color="var(--color-info)"
                         />
                     </div>
                 </div>
@@ -97,4 +140,5 @@
             </div>
         </td>
     </tr>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 81bef416..e167b432 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -19,6 +19,7 @@
 	import InstructionLlm from '../instruction-components/instruction-llm.svelte';
     import InstructionState from '../instruction-components/instruction-state.svelte';
     import InstructionCoding from '../instruction-components/instruction-coding.svelte';
+	import { formatNumber } from '$lib/helpers/utils/common';
 
     const maxLength = 64000;
 
@@ -212,162 +213,191 @@
     errorText={errorText}
 />
 
-<div class="d-xl-flex">
-    <div class="w-100">
-        <div class="instruction-container mb-4">
-            <textarea
-                class='form-control knowledge-textarea'
-                rows={8}
-                maxlength={maxLength}
-                disabled={isThinking}
-                placeholder={'Enter input message...'}
-                bind:value={text}
-                onkeydown={(e) => pressKey(e)}
-            ></textarea>
-            <div class="text-secondary text-count d-flex justify-content-between">
-                <div>
-                    {#if elapsedTime}
-                        {`Elapsed time: ${elapsedTime}`}
-                    {/if}
-                </div>
-                <div>{text?.length || 0}/{maxLength}</div>
+<div class="instruct-test mb-6 rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+        <div class="flex items-center gap-3">
+            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                <i class="mdi mdi-flask-outline text-xl"></i>
+            </span>
+            <div class="min-w-0 flex-1">
+                <h5 class="mb-0 truncate text-base font-semibold text-dark dark:text-gray-100">{$_('Try It Out')}</h5>
+                <p class="mb-0 truncate text-xs text-muted">
+                    {selectedAgent ? `Testing agent: ${selectedAgent.name}` : 'Configure an agent in the pane below to begin'}
+                </p>
             </div>
-
-            <div class="mt-2 text-end">
-                <button
-                    type="button"
-                    class="btn btn-primary"
-                    disabled={!text || util.trim(text).length === 0 || isThinking}
-                    onclick={() => sendRequest()}
-                >
-                    {'Send'}
-                </button>
+        </div>
+    </div>
+    <div class="p-6">
+        <textarea
+            class="instruct-input thin-scrollbar w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-dark transition-colors placeholder:text-muted focus:border-primary focus:bg-white focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:bg-gray-700/40 dark:text-gray-100 dark:focus:bg-gray-800"
+            rows={8}
+            maxlength={maxLength}
+            disabled={isThinking}
+            placeholder={'Enter input message...'}
+            bind:value={text}
+            onkeydown={(e) => pressKey(e)}
+        ></textarea>
+        <div class="mt-1 flex items-center justify-between text-xs text-muted">
+            <div>
+                {#if elapsedTime}
+                    <span class="inline-flex items-center gap-1">
+                        <i class="mdi mdi-timer-outline text-sm leading-none"></i>
+                        {`Elapsed: ${elapsedTime}`}
+                    </span>
+                {/if}
             </div>
+            <div>{text?.length || 0}/{formatNumber(maxLength)}</div>
+        </div>
 
-            {#if isThinking}
-                <div class="knowledge-loader mt-4">
-                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
-                </div>
-            {:else if requestDone && !!result}
-                <div
-                    class="instruction-result-container mt-3"
-                    in:fly={{ y: -10, duration: 500 }}
-                >
-                    <div class="instruct-header text-primary fw-bold">
-                        <div>{'Response'}</div>
-                        <div>
-                            <i
-                                class="mdi mdi-close-thick text-danger clickable"
-                                role="button"
-                                tabindex="0"
-                                onclick={() => closeResponse()}
-                                onkeydown={(/** @type {KeyboardEvent} */ e) => { if (e.key === 'Enter') closeResponse(); }}
-                            ></i>
-                        </div>
-                    </div>
-                    <div class="instruction-result-body instruction-section instruction-border mt-2">
-                        <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
+        <div class="mt-3 flex justify-end">
+            <button
+                type="button"
+                class="inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={!text || util.trim(text).length === 0 || isThinking}
+                onclick={() => sendRequest()}
+            >
+                <i class="mdi mdi-send align-middle leading-none"></i>
+                {'Send'}
+            </button>
+        </div>
+
+        {#if isThinking}
+            <div class="mt-4 flex justify-center">
+                <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
+            </div>
+        {:else if requestDone && !!result}
+            <div
+                class="mt-4 rounded-lg border-l-4 border-primary bg-primary/5 p-5 dark:bg-primary/10"
+                in:fly={{ y: -10, duration: 500 }}
+            >
+                <div class="mb-3 flex items-center justify-between">
+                    <div class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+                        <i class="mdi mdi-robot-happy-outline text-base leading-none"></i>
+                        {'Response'}
                     </div>
+                    <button
+                        type="button"
+                        class="inline-flex h-7 w-7 items-center justify-center rounded-md bg-danger/15 text-danger transition-all hover:scale-105 hover:bg-danger/25"
+                        aria-label="Close response"
+                        title="Close"
+                        onclick={() => closeResponse()}
+                    >
+                        <i class="mdi mdi-close text-base leading-none"></i>
+                    </button>
                 </div>
-            {:else if requestDone && !result}
-                <div class="mt-3">
-                    <h4 class="text-secondary text-center">{"Ehhh, no idea..."}</h4>
+                <div class="thin-scrollbar max-h-[500px] overflow-y-auto rounded-md border border-gray-100 bg-white p-3 text-sm leading-relaxed text-dark dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100">
+                    <Markdown containerClasses={'markdown-dark text-dark'} text={result} rawText />
                 </div>
-            {/if}
-        </div>
+            </div>
+        {:else if requestDone && !result}
+            <div class="mt-4 rounded-lg border border-dashed border-gray-200 bg-gray-50 p-6 text-center dark:border-gray-700 dark:bg-gray-700/30">
+                <i class="mdi mdi-emoticon-confused-outline text-3xl text-muted leading-none"></i>
+                <p class="mt-2 mb-0 text-sm text-muted">{"Ehhh, no idea..."}</p>
+            </div>
+        {/if}
     </div>
 </div>
 
-<div class="d-xl-flex mt-4 mb-5">
-    <div class="w-100">
-        <div class="row">
-            <div class="col-lg-7">
-                <div class="instruct-text-header text-primary fw-bold mb-2">
-                    <div class="line-align-center">
-                        {'Instruction'}
+<div class="instruct-config mb-6 grid grid-cols-1 gap-6 lg:grid-cols-12">
+    <div class="lg:col-span-7 lg:min-h-0">
+        <div class="flex h-full flex-col rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+            <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+                <div class="flex items-center gap-3">
+                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                        <i class="mdi mdi-script-text-outline text-xl"></i>
+                    </span>
+                    <div class="min-w-0 flex-1">
+                        <h5 class="mb-0 truncate text-base font-semibold text-dark dark:text-gray-100">{'Instruction'}</h5>
+                        <p class="mb-0 truncate text-xs text-muted">
+                            {selectedTemplate ? `Template: ${selectedTemplate}` : 'Live preview of the agent instruction'}
+                        </p>
                     </div>
-                    <div class="line-align-center">
-                        <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
-                            <i class="bx bx-info-circle"></i>
-                        </div>
-                        <BotsharpTooltip target="demo-tooltip" placement="right" containerClasses="demo-tooltip-note">
-                            <div>Please select an agent to proceed!</div>
-                        </BotsharpTooltip>
+                    <div class="flex items-center leading-none text-muted" id="demo-tooltip">
+                        <i class="bx bx-info-circle text-lg leading-none"></i>
                     </div>
+                    <BotsharpTooltip target="demo-tooltip" placement="left" containerClasses="demo-tooltip-note">
+                        <div>Please select an agent to proceed!</div>
+                    </BotsharpTooltip>
                 </div>
             </div>
-            <div class="col-lg-5"></div>
+            <div class="flex flex-1 flex-col p-6">
+                <textarea
+                    class="instruct-preview thin-scrollbar w-full flex-1 resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 font-mono text-xs leading-relaxed text-dark dark:border-gray-700 dark:bg-gray-700/30 dark:text-gray-100"
+                    rows={19}
+                    maxlength={maxLength}
+                    disabled
+                    placeholder={''}
+                    bind:value={instruction}
+                ></textarea>
+            </div>
         </div>
-        <div class="row instruct-setting-container">
-            <div class="col-lg-7">
-                <div>
-                    <div class="instruct-setting-section" style="gap: 2px;">
-                        <textarea
-                            class='form-control knowledge-textarea'
-                            rows={19}
-                            maxlength={maxLength}
-                            disabled
-                            placeholder={''}
-                            bind:value={instruction}
-                        ></textarea>
+    </div>
+    <div class="lg:col-span-5 lg:min-h-0">
+        <div class="instruct-config-card flex h-full flex-col rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+            <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+                <div class="flex items-center gap-3">
+                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                        <i class="mdi mdi-cog-outline text-xl"></i>
+                    </span>
+                    <div class="min-w-0 flex-1">
+                        <h5 class="mb-0 truncate text-base font-semibold text-dark dark:text-gray-100">{'Configuration'}</h5>
+                        <p class="mb-0 truncate text-xs text-muted">Agent, LLM, States and Code script</p>
                     </div>
                 </div>
             </div>
-            <div class="col-lg-5 instruction-gap">
-                <div class="card">
-                    <div class="card-body">
-                        <NavBar
-                            id={'instruction-nav-container'}
-                            disableDefaultStyles
-                            containerClasses={'nav-tabs-secondary'}
-                        >
-                            {#each tabs as tab}
-                            <NavItem
-                                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
-                                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-agent'}>
-                            <InstructionAgent
-                                agents={agents}
-                                disabled={isThinking}
-                                onSelectAgent={detail => onAgentSelected(detail)}
-                            />
-                        </div>
-                        <div class:hide={selectedTab !== 'instruction-llm'}>
-                            <InstructionLlm
-                                llmConfigs={llmConfigs}
-                                disabled={isThinking}
-                                bind:selectedProvider={selectedProvider}
-                                bind:selectedModel={selectedModel}
-                                onSelectLlm={detail => onLlmSelected(detail)}
-                            />
-                        </div>
-                        <div class:hide={selectedTab !== 'instruction-states'}>
-                            <InstructionState
-                                bind:states={states}
-                                disabled={isThinking}
-                            />
-                        </div>
-                        <div class:hide={selectedTab !== 'instruction-coding'}>
-                            <InstructionCoding
-                                bind:selectedCodeScript={selectedCodeScript}
-                                bind:args={args}
-                                codeScripts={codeScripts}
-                                disabled={isThinking}
-                            />
-                        </div>
-                    </div>
+            <div class="flex flex-1 flex-col px-6 pt-4 pb-6">
+                <NavBar
+                    id={'instruction-nav-container'}
+                    disableDefaultStyles
+                    containerClasses={'nav-tabs-secondary'}
+                >
+                    {#each tabs as tab}
+                    <NavItem
+                        containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
+                        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="flex-1" class:hide={selectedTab !== 'instruction-agent'}>
+                    <InstructionAgent
+                        agents={agents}
+                        disabled={isThinking}
+                        onSelectAgent={detail => onAgentSelected(detail)}
+                    />
+                </div>
+                <div class="flex-1" class:hide={selectedTab !== 'instruction-llm'}>
+                    <InstructionLlm
+                        llmConfigs={llmConfigs}
+                        disabled={isThinking}
+                        bind:selectedProvider={selectedProvider}
+                        bind:selectedModel={selectedModel}
+                        onSelectLlm={detail => onLlmSelected(detail)}
+                    />
+                </div>
+                <div class="flex-1" class:hide={selectedTab !== 'instruction-states'}>
+                    <InstructionState
+                        bind:states={states}
+                        disabled={isThinking}
+                    />
+                </div>
+                <div class="flex-1" class:hide={selectedTab !== 'instruction-coding'}>
+                    <InstructionCoding
+                        bind:selectedCodeScript={selectedCodeScript}
+                        bind:args={args}
+                        codeScripts={codeScripts}
+                        disabled={isThinking}
+                    />
                 </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+
diff --git a/src/routes/page/knowledge-base/common/collection/collection-create-modal.svelte b/src/routes/page/knowledge-base/common/collection/collection-create-modal.svelte
index 0e5960f0..775f75dc 100644
--- a/src/routes/page/knowledge-base/common/collection/collection-create-modal.svelte
+++ b/src/routes/page/knowledge-base/common/collection/collection-create-modal.svelte
@@ -121,92 +121,94 @@
 
 {#if open}
 <div
-    class="modal show d-block"
+    class="cm-modal"
     tabindex="-1"
     role="dialog"
     transition:fade={{ duration: 150 }}
     onclick={handleBackdropClick}
     onkeydown={(e) => { if (e.key === 'Escape') toggle(); }}
 >
-    <div class={`modal-dialog modal-${size} vector-collection-create-container ${className}`} role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{title}</h5>
-                <button type="button" class="btn-close" aria-label="Close" onclick={() => toggle()}></button>
+    <div class={`cm-dialog cm-dialog-${size} ${className}`} role="document">
+        <div class="cm-content">
+            <div class="cm-header">
+                <h5 class="cm-title">{title}</h5>
+                <button type="button" class="cm-close" aria-label="Close" onclick={() => toggle()}>
+                    <i class="bx bx-x"></i>
+                </button>
             </div>
-            <div class="modal-body">
+            <div class="cm-body">
                 <form onsubmit={(e) => handleConfirm(e)}>
-                    <div class="row">
-                        <div class="mb-3 collection-input">
-                            <label class="fw-bold" for="collection">Collection name: </label>
+                    <div class="cm-row">
+                        <div class="cm-field">
+                            <label class="cm-label" for="collection">Collection name: </label>
                             <input
                                 type="text"
                                 id="collection"
-                                class={`form-control text-center ${!isValidCollection ? 'invalid-input' : ''}`}
+                                class={`cm-input ${!isValidCollection ? 'cm-input-invalid' : ''}`}
                                 maxlength={maxLength}
                                 value={collection}
                                 oninput={(e) => changeCollectionText(e)}
                             />
-                            <div class={`text-secondary text-count collection-note ${isValidCollection ? 'valid' : 'invalid'}`}>
+                            <div class={`cm-note ${isValidCollection ? 'cm-note-valid' : 'cm-note-invalid'}`}>
                                 {#if !isValidCollection}
-                                    <div style="color: var(--bs-danger);">* The collection already exists.</div>
+                                    <div class="cm-error">* The collection already exists.</div>
                                 {/if}
                                 <div>{collection?.length || 0}/{maxLength}</div>
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="mb-3">
-                            <label class="fw-bold" for="provider">Embedding provider: </label>
+                    <div class="cm-row">
+                        <div class="cm-field">
+                            <label class="cm-label" for="provider">Embedding provider: </label>
                             <input
                                 type="text"
                                 id="provider"
-                                class="form-control text-center"
+                                class="cm-input"
                                 maxlength={maxLength}
                                 bind:value={provider}
                             />
-                            <div class="text-secondary text-end text-count">
+                            <div class="cm-note cm-note-right">
                                 {provider?.length || 0}/{maxLength}
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="mb-3">
-                            <label class="fw-bold" for="model">Embedding model: </label>
+                    <div class="cm-row">
+                        <div class="cm-field">
+                            <label class="cm-label" for="model">Embedding model: </label>
                             <input
                                 type="text"
                                 id="model"
-                                class="form-control text-center"
+                                class="cm-input"
                                 maxlength={maxLength}
                                 bind:value={model}
                             />
-                            <div class="text-secondary text-end text-count">
+                            <div class="cm-note cm-note-right">
                                 {model?.length || 0}/{maxLength}
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="mb-3">
-                            <label class="fw-bold" for="dimension">Vector dimension: </label>
+                    <div class="cm-row">
+                        <div class="cm-field">
+                            <label class="cm-label" for="dimension">Vector dimension: </label>
                             <input
                                 type="number"
                                 id="dimension"
-                                class="form-control text-center"
+                                class="cm-input"
                                 bind:value={dimension}
                                 min={minDimension}
                                 step={step}
                             />
-                            <div class="text-secondary text-count">
+                            <div class="cm-note">
                                 * The value must be larger than 0.
                             </div>
                         </div>
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
+            <div class="cm-footer">
                 <button
                     type="button"
-                    class="btn btn-primary"
+                    class="cm-btn cm-btn-primary"
                     disabled={disableConfirmBtn}
                     onclick={(e) => handleConfirm(e)}
                 >
@@ -214,7 +216,7 @@
                 </button>
                 <button
                     type="button"
-                    class="btn btn-secondary"
+                    class="cm-btn cm-btn-secondary"
                     onclick={(e) => handleCancel(e)}
                 >
                     Cancel
@@ -223,5 +225,7 @@
         </div>
     </div>
 </div>
-<div class="modal-backdrop fade show" transition:fade={{ duration: 150 }}></div>
-{/if}
\ No newline at end of file
+<div class="cm-backdrop" transition:fade={{ duration: 150 }}></div>
+{/if}
+
+
diff --git a/src/routes/page/knowledge-base/common/indexes/vector-index-modal.svelte b/src/routes/page/knowledge-base/common/indexes/vector-index-modal.svelte
index 94f40dd6..e4bff06c 100644
--- a/src/routes/page/knowledge-base/common/indexes/vector-index-modal.svelte
+++ b/src/routes/page/knowledge-base/common/indexes/vector-index-modal.svelte
@@ -217,181 +217,175 @@
 
 {#if open}
 <div
-    class="modal show d-block"
+    class="vim-modal"
     tabindex="-1"
     role="dialog"
     transition:fade={{ duration: 150 }}
     onclick={(e) => { if (e.target === e.currentTarget) toggleModal?.(); }}
     onkeydown={(e) => { if (e.key === 'Escape') toggleModal?.(); }}
 >
-    <div class={`modal-dialog modal-${size} ${className}`} role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <div>
-                    <div>{title}</div>
-                    <div>
-                        <span class="fw-bold">Collection: </span>
-                        <span class="text-primary collection-value">{collection}</span>
+    <div class={`vim-dialog vim-dialog-${size} ${className}`} role="document">
+        <div class="vim-content">
+            <div class="vim-header">
+                <div class="vim-header-text">
+                    <div class="vim-title">{title}</div>
+                    <div class="vim-collection">
+                        <span class="vim-collection-label">Collection: </span>
+                        <span class="vim-collection-value">{collection}</span>
                     </div>
                 </div>
-                <button type="button" class="btn-close" aria-label="Close" onclick={() => toggleModal?.()}></button>
+                <button type="button" class="vim-close" aria-label="Close" onclick={() => toggleModal?.()}>
+                    <i class="bx bx-x"></i>
+                </button>
             </div>
-            <div class="modal-body thin-scrollbar" style="max-height: 70vh; overflow-y: auto;">
+            <div class="vim-body">
                 <form onsubmit={(e) => handleConfirm(e)}>
-                    <div class="mt-2">
-                        <div class="index-layout-container">
-                            <!-- Existing Index Items Block -->
-                            <div class="index-block">
-                                <div class="card index-block-card">
-                                    <div class="card-header">
-                                        <div class="d-flex justify-content-between align-items-center">
-                                            <h6 class="mb-0">Index Items to Add</h6>
-                                            <button
-                                                type="button"
-                                                class="btn btn-sm btn-primary"
-                                                disabled={indexesToAdd.length >= limit}
-                                                onclick={(e) => addNewIndex(e)}
-                                            >
-                                                <i class="mdi mdi-plus"></i> Add
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-body card-body-scrollable">
-                                        <div
-                                            class="thin-scrollbar"
-                                            style="height: 100%; overflow-y: auto;"
-                                            bind:this={addIndexScrollContainer}
-                                        >
-                                            {#if indexesToAdd.length === 0}
-                                                <div class="text-muted text-center py-3">
-                                                    No index items. Click "Add" to create one.
-                                                </div>
-                                            {:else}
-                                                {#each indexesToAdd as item, idx (idx)}
-                                                    <div class="mb-3 p-3 border rounded">
-                                                        <div class="d-flex justify-content-between align-items-center mb-2">
-                                                            <small class="text-muted">Index Item {idx + 1}</small>
-                                                            <div class="d-flex gap-1">
-                                                                <button type="button" class="btn btn-sm btn-info" onclick={(e) => moveItemToDelete(e, idx)} title="Move to delete list">
-                                                                    <i class="mdi mdi-arrow-right arrow-horizontal"></i>
-                                                                    <i class="mdi mdi-arrow-down arrow-vertical"></i>
-                                                                </button>
-                                                                <button type="button" class="btn btn-sm btn-danger" onclick={(e) => removeIndex(e, idx)} title="Remove item">
-                                                                    <i class="mdi mdi-trash-can"></i>
-                                                                </button>
-                                                            </div>
+                    <div class="vim-layout">
+                        <!-- Existing Index Items Block -->
+                        <div class="vim-block vim-block-add">
+                            <div class="vim-card">
+                                <div class="vim-card-header">
+                                    <h6 class="vim-card-title">Index Items to Add</h6>
+                                    <button
+                                        type="button"
+                                        class="vim-btn vim-btn-primary vim-btn-sm"
+                                        disabled={indexesToAdd.length >= limit}
+                                        onclick={(e) => addNewIndex(e)}
+                                    >
+                                        <i class="mdi mdi-plus"></i> Add
+                                    </button>
+                                </div>
+                                <div class="vim-card-body">
+                                    <div
+                                        class="vim-scroll-area"
+                                        bind:this={addIndexScrollContainer}
+                                    >
+                                        {#if indexesToAdd.length === 0}
+                                            <div class="vim-empty">
+                                                No index items. Click "Add" to create one.
+                                            </div>
+                                        {:else}
+                                            {#each indexesToAdd as item, idx (idx)}
+                                                <div class="vim-index-item">
+                                                    <div class="vim-index-item-head">
+                                                        <small class="vim-index-item-label">Index Item {idx + 1}</small>
+                                                        <div class="vim-index-item-actions">
+                                                            <button type="button" class="vim-btn vim-btn-info vim-btn-sm" onclick={(e) => moveItemToDelete(e, idx)} title="Move to delete list">
+                                                                <i class="mdi mdi-arrow-right vim-arrow-h"></i>
+                                                                <i class="mdi mdi-arrow-down vim-arrow-v"></i>
+                                                            </button>
+                                                            <button type="button" class="vim-btn vim-btn-danger vim-btn-sm" onclick={(e) => removeIndex(e, idx)} title="Remove item">
+                                                                <i class="mdi mdi-trash-can"></i>
+                                                            </button>
                                                         </div>
-                                                        <div class="field-row">
-                                                            <div class="field-item">
-                                                                <div class="mb-2">
-                                                                    <label class="form-label" for={`field-name-${idx}`}>Field Name</label>
-                                                                    <input
-                                                                        id={`field-name-${idx}`}
-                                                                        type="text"
-                                                                        class="form-control"
-                                                                        value={item.field_name}
-                                                                        placeholder="Enter field name"
-                                                                        maxlength={maxLength}
-                                                                        oninput={(e) => updateIndexFieldName(idx, /** @type {HTMLInputElement} */(e.target).value)}
-                                                                    />
-                                                                </div>
+                                                    </div>
+                                                    <div class="vim-field-row">
+                                                        <div class="vim-field-item">
+                                                            <div class="vim-field">
+                                                                <label class="vim-label" for={`field-name-${idx}`}>Field Name</label>
+                                                                <input
+                                                                    id={`field-name-${idx}`}
+                                                                    type="text"
+                                                                    class="vim-input"
+                                                                    value={item.field_name}
+                                                                    placeholder="Enter field name"
+                                                                    maxlength={maxLength}
+                                                                    oninput={(e) => updateIndexFieldName(idx, /** @type {HTMLInputElement} */(e.target).value)}
+                                                                />
                                                             </div>
-                                                            <div class="field-item">
-                                                                <div class="mb-2">
-                                                                    <label class="form-label" for={`index-type-${idx}`}>Field Type</label>
-                                                                    <Select
-                                                                        tag={`index-type-${idx}`}
-                                                                        placeholder="Select field type"
-                                                                        selectedValues={item.field_schema_type ? [item.field_schema_type] : []}
-                                                                        options={indexTypeOptions}
-                                                                        onselect={(e) => updateIndexFieldType(e, idx)}
-                                                                    />
-                                                                </div>
+                                                        </div>
+                                                        <div class="vim-field-item">
+                                                            <div class="vim-field">
+                                                                <label class="vim-label" for={`index-type-${idx}`}>Field Type</label>
+                                                                <Select
+                                                                    tag={`index-type-${idx}`}
+                                                                    placeholder="Select field type"
+                                                                    selectedValues={item.field_schema_type ? [item.field_schema_type] : []}
+                                                                    options={indexTypeOptions}
+                                                                    onselect={(e) => updateIndexFieldType(e, idx)}
+                                                                />
                                                             </div>
                                                         </div>
                                                     </div>
-                                                {/each}
-                                            {/if}
-                                        </div>
+                                                </div>
+                                            {/each}
+                                        {/if}
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            <!-- Arrow buttons container -->
-                            <div class="arrow-container">
-                                <div class="arrow-buttons">
-                                    <button type="button" class="btn btn-sm btn-info" disabled={indexesToAdd.length === 0} onclick={(e) => moveAllToDelete(e)} title="Move all items to delete list">
-                                        <i class="mdi mdi-arrow-right arrow-horizontal"></i>
-                                        <i class="mdi mdi-arrow-down arrow-vertical"></i>
-                                    </button>
-                                    <button type="button" class="btn btn-sm btn-info" disabled={indexesToDelete.length === 0} onclick={(e) => moveAllToAdd(e)} title="Move all items to existing list">
-                                        <i class="mdi mdi-arrow-left arrow-horizontal"></i>
-                                        <i class="mdi mdi-arrow-up arrow-vertical"></i>
-                                    </button>
-                                </div>
+                        <!-- Arrow buttons container -->
+                        <div class="vim-arrow-container">
+                            <div class="vim-arrow-buttons">
+                                <button type="button" class="vim-btn vim-btn-info vim-btn-sm" disabled={indexesToAdd.length === 0} onclick={(e) => moveAllToDelete(e)} title="Move all items to delete list">
+                                    <i class="mdi mdi-arrow-right vim-arrow-h"></i>
+                                    <i class="mdi mdi-arrow-down vim-arrow-v"></i>
+                                </button>
+                                <button type="button" class="vim-btn vim-btn-info vim-btn-sm" disabled={indexesToDelete.length === 0} onclick={(e) => moveAllToAdd(e)} title="Move all items to existing list">
+                                    <i class="mdi mdi-arrow-left vim-arrow-h"></i>
+                                    <i class="mdi mdi-arrow-up vim-arrow-v"></i>
+                                </button>
                             </div>
+                        </div>
 
-                            <!-- Delete Index Items Block -->
-                            <div class="index-block">
-                                <div class="card index-block-card">
-                                    <div class="card-header">
-                                        <div class="d-flex justify-content-between align-items-center">
-                                            <h6 class="mb-0">Index Items to Delete</h6>
-                                            <button
-                                                type="button"
-                                                class="btn btn-sm btn-warning"
-                                                disabled={indexesToDelete.length >= limit}
-                                                onclick={(e) => addToDeleteIndex(e)}
-                                            >
-                                                <i class="mdi mdi-plus"></i> Add
-                                            </button>
-                                        </div>
-                                    </div>
-                                    <div class="card-body card-body-scrollable">
-                                        <div
-                                            class="thin-scrollbar"
-                                            style="height: 100%; overflow-y: auto;"
-                                            bind:this={deleteIndexScrollContainer}
-                                        >
-                                            {#if indexesToDelete.length === 0}
-                                                <div class="text-muted text-center py-3">
-                                                    No items to delete. Click "Add" to specify items for deletion.
-                                                </div>
-                                            {:else}
-                                                {#each indexesToDelete as item, idx (idx)}
-                                                    <div class="mb-3 p-3 border rounded border-warning">
-                                                        <div class="d-flex justify-content-between align-items-center mb-2">
-                                                            <small class="text-warning">Delete Item {idx + 1}</small>
-                                                            <div class="d-flex gap-1">
-                                                                <button type="button" class="btn btn-sm btn-info" onclick={(e) => moveItemToAdd(e, idx)} title="Move to existing list">
-                                                                    <i class="mdi mdi-arrow-left arrow-horizontal"></i>
-                                                                    <i class="mdi mdi-arrow-up arrow-vertical"></i>
-                                                                </button>
-                                                                <button type="button" class="btn btn-sm btn-danger" title="Remove item" onclick={(e) => removeFromDeleteList(e, idx)}>
-                                                                    <i class="mdi mdi-trash-can"></i>
-                                                                </button>
-                                                            </div>
+                        <!-- Delete Index Items Block -->
+                        <div class="vim-block vim-block-delete">
+                            <div class="vim-card">
+                                <div class="vim-card-header">
+                                    <h6 class="vim-card-title">Index Items to Delete</h6>
+                                    <button
+                                        type="button"
+                                        class="vim-btn vim-btn-warning vim-btn-sm"
+                                        disabled={indexesToDelete.length >= limit}
+                                        onclick={(e) => addToDeleteIndex(e)}
+                                    >
+                                        <i class="mdi mdi-plus"></i> Add
+                                    </button>
+                                </div>
+                                <div class="vim-card-body">
+                                    <div
+                                        class="vim-scroll-area"
+                                        bind:this={deleteIndexScrollContainer}
+                                    >
+                                        {#if indexesToDelete.length === 0}
+                                            <div class="vim-empty">
+                                                No items to delete. Click "Add" to specify items for deletion.
+                                            </div>
+                                        {:else}
+                                            {#each indexesToDelete as item, idx (idx)}
+                                                <div class="vim-index-item vim-index-item-warning">
+                                                    <div class="vim-index-item-head">
+                                                        <small class="vim-index-item-label vim-text-warning">Delete Item {idx + 1}</small>
+                                                        <div class="vim-index-item-actions">
+                                                            <button type="button" class="vim-btn vim-btn-info vim-btn-sm" onclick={(e) => moveItemToAdd(e, idx)} title="Move to existing list">
+                                                                <i class="mdi mdi-arrow-left vim-arrow-h"></i>
+                                                                <i class="mdi mdi-arrow-up vim-arrow-v"></i>
+                                                            </button>
+                                                            <button type="button" class="vim-btn vim-btn-danger vim-btn-sm" title="Remove item" onclick={(e) => removeFromDeleteList(e, idx)}>
+                                                                <i class="mdi mdi-trash-can"></i>
+                                                            </button>
                                                         </div>
-                                                        <div class="field-row">
-                                                            <div class="field-item">
-                                                                <div class="mb-2">
-                                                                    <label class="form-label" for={`delete-field-name-${idx}`}>Field Name</label>
-                                                                    <input
-                                                                        id={`delete-field-name-${idx}`}
-                                                                        type="text"
-                                                                        class="form-control"
-                                                                        value={item.field_name}
-                                                                        placeholder="Enter field name to delete"
-                                                                        maxlength={maxLength}
-                                                                        oninput={(e) => updateDeleteIndexFieldName(idx, /** @type {HTMLInputElement} */(e.target).value)}
-                                                                    />
-                                                                </div>
+                                                    </div>
+                                                    <div class="vim-field-row">
+                                                        <div class="vim-field-item">
+                                                            <div class="vim-field">
+                                                                <label class="vim-label" for={`delete-field-name-${idx}`}>Field Name</label>
+                                                                <input
+                                                                    id={`delete-field-name-${idx}`}
+                                                                    type="text"
+                                                                    class="vim-input"
+                                                                    value={item.field_name}
+                                                                    placeholder="Enter field name to delete"
+                                                                    maxlength={maxLength}
+                                                                    oninput={(e) => updateDeleteIndexFieldName(idx, /** @type {HTMLInputElement} */(e.target).value)}
+                                                                />
                                                             </div>
                                                         </div>
                                                     </div>
-                                                {/each}
-                                            {/if}
-                                        </div>
+                                                </div>
+                                            {/each}
+                                        {/if}
                                     </div>
                                 </div>
                             </div>
@@ -399,16 +393,17 @@
                     </div>
                 </form>
             </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-primary" onclick={(e) => handleConfirm(e)}>
+            <div class="vim-footer">
+                <button type="button" class="vim-btn vim-btn-primary" onclick={(e) => handleConfirm(e)}>
                     Confirm
                 </button>
-                <button type="button" class="btn btn-secondary" onclick={(e) => handleCancel(e)}>
+                <button type="button" class="vim-btn vim-btn-secondary" onclick={(e) => handleCancel(e)}>
                     Cancel
                 </button>
             </div>
         </div>
     </div>
 </div>
-<div class="modal-backdrop fade show" transition:fade={{ duration: 150 }}></div>
-{/if}
\ No newline at end of file
+<div class="vim-backdrop" transition:fade={{ duration: 150 }}></div>
+{/if}
+
diff --git a/src/routes/page/knowledge-base/common/search/advanced-search.svelte b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
index 8ca70386..25672379 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -154,26 +154,26 @@
 
 
 <div
-    class="knowledge-adv-search-container mt-5"
+    class="as-container"
     in:fly={{ y: -10, duration: 500 }}
     out:fly={{ y: -10, duration: 200 }}
 >
-    <div class="knowledge-adv-search-btn text-primary fw-bold">
-        <div class="form-check form-switch line-align-center">
+    <div class="as-toggle-row">
+        <label class="as-switch">
             <input
                 type="checkbox"
-                class="form-check-input"
                 role="switch"
                 disabled={disabled}
                 checked={showAdvSearch}
                 onchange={e => toggleAdvSearch(e)}
             />
-        </div>
-        <div class="line-align-center">
+            <span class="as-switch-slider"></span>
+        </label>
+        <div class="as-toggle-label">
             <div>{'Advanced Filters'}</div>
         </div>
         {#if showAdvSearch}
-            <div class="line-align-center" id="adv-search-tooltip">
+            <div class="as-tooltip-icon" id="adv-search-tooltip">
                 <i class="bx bx-info-circle"></i>
             </div>
             <BotsharpTooltip target="adv-search-tooltip" placement="top" containerClasses="demo-tooltip-note">
@@ -187,60 +187,58 @@
 
     {#if showAdvSearch}
         <div
-            class={'knowledge-adv-search-items'}
+            class="as-items"
             bind:this={scrollContainer}
             in:fly={{ y: -10, duration: 500 }}
             out:fly={{ y: -10, duration: 200 }}
         >
-            <div class="knowledge-adv-search-item">
-                <div class="search-item-cb line-align-center">
-                    <div class="fw-bold">{''}</div>
+            <div class="as-item as-header-row">
+                <div class="as-item-cb">
+                    <div class="as-bold">{''}</div>
                 </div>
-                <div class="search-item-content line-align-center">
-                    <div class="fw-bold">{'Name'}</div>
+                <div class="as-item-content">
+                    <div class="as-bold">{'Name'}</div>
                 </div>
-                <div class="search-item-content line-align-center">
-                    <div class="fw-bold">{'Value'}</div>
+                <div class="as-item-content">
+                    <div class="as-bold">{'Value'}</div>
                 </div>
-                <div class="search-item-content line-align-center">
-                    <div class="fw-bold">{'Data type'}</div>
+                <div class="as-item-content">
+                    <div class="as-bold">{'Data type'}</div>
                 </div>
-                <div style="flex: 0 0 10px;"></div>
+                <div class="as-item-remove-spacer"></div>
             </div>
             {#each items as item, idx (item.uuid)}
-                <div class="knowledge-adv-search-item">
-                    <div class="search-item-cb line-align-center">
-                        <div class="form-check">
-                            <input
-                                type="checkbox"
-                                class="form-check-input"
-                                disabled={disabled}
-                                checked={item.checked}
-                                onchange={e => toggleItem(e, idx)}
-                            />
-                        </div>
+                <div class="as-item">
+                    <div class="as-item-cb">
+                        <input
+                            type="checkbox"
+                            class="as-checkbox"
+                            disabled={disabled}
+                            checked={item.checked}
+                            onchange={e => toggleItem(e, idx)}
+                        />
                     </div>
-                    <div class="search-item-content line-align-center" data-label="Name">
+                    <div class="as-item-content" data-label="Name">
                         <input
                             type="text"
-                            class="form-control"
+                            class="as-input"
                             disabled={!item.checked || disabled}
                             maxlength={maxLength}
                             value={item.key}
                             oninput={e => changeItem(e, idx, 'key')}
                         />
                     </div>
-                    <div class="search-item-content line-align-center" data-label="Value">
+                    <div class="as-item-content" data-label="Value">
                         <input
                             type="text"
-                            class="form-control"
+                            class="as-input"
                             disabled={!item.checked || disabled}
                             maxlength={maxLength}
                             value={item.value}
                             oninput={e => changeItem(e, idx, 'value')}
                         />
                     </div>
-                    <div class="search-item-content line-align-center" data-label="Data type">
+                    <div class="as-item-content" data-label="Data type">
                         <Select
                             tag={'search-payload-data-type-select'}
                             placeholder={'Select'}
@@ -250,67 +248,61 @@
                             onselect={e => changeItem(e, idx, 'data_type')}
                         />
                     </div>
-                    <div class="search-item-cb line-align-center" style="flex: 0 0 12px;">
-                        <div class="line-align-center">
-                            <!-- svelte-ignore a11y_click_events_have_key_events -->
-                            <!-- svelte-ignore a11y_no_static_element_interactions -->
-                            <i
-                                class="bx bxs-no-entry text-danger clickable"
-                                class:hide={items.length === 1}
-                                onclick={() => removeItem(idx)}
-                            ></i>
-                        </div>
+                    <div class="as-item-remove">
+                        <!-- svelte-ignore a11y_click_events_have_key_events -->
+                        <!-- svelte-ignore a11y_no_static_element_interactions -->
+                        <i
+                            class="bx bxs-no-entry as-remove-icon"
+                            class:hide={items.length === 1}
+                            onclick={() => removeItem(idx)}
+                        ></i>
                     </div>
                 </div>
             {/each}
             {#if items.length < limit}
-                <div class="knowledge-adv-search-item add-item-row">
-                    <div class="search-item-cb line-align-center">
-                        <div class="fw-bold">{''}</div>
+                <div class="as-item as-add-row">
+                    <div class="as-item-cb">
+                        <div class="as-bold">{''}</div>
                     </div>
-                    <div class="search-item-content line-align-center">
-                        <div class="fw-bold">{''}</div>
+                    <div class="as-item-content">
+                        <div class="as-bold">{''}</div>
                     </div>
-                    <div class="search-item-content line-align-center">
-                        <div class="fw-bold">{''}</div>
+                    <div class="as-item-content">
+                        <div class="as-bold">{''}</div>
                     </div>
-                    <div class="search-item-content line-align-center">
-                        <div class="d-flex justify-content-end">
-                            <button
-                                class="btn btn-link"
-                                style="width: fit-content"
-                                onclick={e => addItem(e)}
-                            >
-                                {'Add +'}
-                            </button>
-                        </div>
+                    <div class="as-item-content as-add-wrap">
+                        <button
+                            type="button"
+                            class="as-link-btn"
+                            onclick={e => addItem(e)}
+                        >
+                            {'Add +'}
+                        </button>
                     </div>
                 </div>
             {/if}
         </div>
 
-        <div class="operator-container">
-            <div class="operator-item align-items-center gap-5">
-                <div class="fw-bold operator-title">Search operator:</div>
-                <div class="d-flex align-items-center gap-5">
+        <div class="as-operator-container">
+            <div class="as-operator-item">
+                <div class="as-operator-title">Search operator:</div>
+                <div class="as-radio-group">
                     {#each logicalOperators as op, idx (idx)}
-                        <div class="d-flex align-items-center gap-1">
-                            <div class="form-check">
-                                <input
-                                    type="radio"
-                                    class="form-check-input"
-                                    id={op.id}
-                                    name="searchOperator"
-                                    value={op.value}
-                                    disabled={disabled}
-                                    checked={operator === op.value}
-                                    onchange={() => operator = op.value}
-                                />
-                            </div>
-                            <label for={op.id} class="mb-0 d-flex gap-1">
+                        <div class="as-radio-item">
+                            <input
+                                type="radio"
+                                class="as-radio"
+                                id={op.id}
+                                name="searchOperator"
+                                value={op.value}
+                                disabled={disabled}
+                                checked={operator === op.value}
+                                onchange={() => operator = op.value}
+                            />
+                            <label for={op.id} class="as-radio-label">
                                 <span>{op.label}</span>
                                 {#if op.tip}
-                                <span class="line-align-center" id={`tooltip-${op.id}`}>
+                                <span class="as-tooltip-icon" id={`tooltip-${op.id}`}>
                                     <i class="bx bx-info-circle"></i>
                                 </span>
                                 <BotsharpTooltip target={`tooltip-${op.id}`} placement="top" containerClasses="operator-tooltip">
@@ -324,13 +316,13 @@
             </div>
         </div>
 
-        <div class="operator-container">
-            <div class="operator-item align-items-center gap-5">
-                <div class="fw-bold operator-title">Sort by field:</div>
+        <div class="as-operator-container">
+            <div class="as-operator-item">
+                <div class="as-operator-title">Sort by field:</div>
                 <div>
                     <input
                         type="text"
-                        class="form-control"
+                        class="as-input"
                         name="searchSortField"
                         bind:value={sortField}
                         disabled={disabled}
@@ -338,27 +330,25 @@
                     />
                 </div>
             </div>
-            <div class="operator-item align-items-center gap-5">
-                <div class="operator-title"></div>
-                <div class="d-flex align-items-center gap-5" style="margin-top: 5px;">
+            <div class="as-operator-item">
+                <div class="as-operator-title"></div>
+                <div class="as-radio-group as-sort-radio-group">
                     {#each sortDirections as op, idx (idx)}
-                        <div class="d-flex align-items-center gap-1">
-                            <div class="form-check">
-                                <input
-                                    type="radio"
-                                    class="form-check-input"
-                                    id={op.id}
-                                    name="searchSort"
-                                    value={op.value}
-                                    disabled={disabled}
-                                    checked={sortOrder === op.value}
-                                    onchange={() => sortOrder = op.value}
-                                />
-                            </div>
-                            <label for={op.id} class="mb-0 d-flex gap-1">
+                        <div class="as-radio-item">
+                            <input
+                                type="radio"
+                                class="as-radio"
+                                id={op.id}
+                                name="searchSort"
+                                value={op.value}
+                                disabled={disabled}
+                                checked={sortOrder === op.value}
+                                onchange={() => sortOrder = op.value}
+                            />
+                            <label for={op.id} class="as-radio-label">
                                 <span>{op.label}</span>
                                 {#if op.tip}
-                                <span class="line-align-center" id={`tooltip-${op.id}`}>
+                                <span class="as-tooltip-icon" id={`tooltip-${op.id}`}>
                                     <i class="bx bx-info-circle"></i>
                                 </span>
                                 <BotsharpTooltip target={`tooltip-${op.id}`} placement="top" containerClasses="operator-tooltip">
@@ -373,3 +363,6 @@
         </div>
     {/if}
 </div>
+
+
+
diff --git a/src/routes/page/knowledge-base/common/table/table-item.svelte b/src/routes/page/knowledge-base/common/table/table-item.svelte
index 30f6beb7..e13a598f 100644
--- a/src/routes/page/knowledge-base/common/table/table-item.svelte
+++ b/src/routes/page/knowledge-base/common/table/table-item.svelte
@@ -41,52 +41,55 @@
     {#if columns?.length > 0}
     {#each columns as column, idx (idx)}
         <td style={`max-width: 50px; width: ${80 / columns.length}%;`}>
-            <div class="ellipsis">{item[column.dataName] || ''}</div>
+            <div class="ti-ellipsis">{item[column.dataName] || ''}</div>
         </td>
     {/each}
     {/if}
-    <td class="knowledge-op">
-        <ul class="list-unstyled hstack gap-1 mb-0 knowledge-op-list">
-            <li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
-                <button
-                    class="btn btn-sm btn-soft-primary"
-                    onclick={() => toggleDetail()}
-                >
-                    {#if open}
-                        <i class="bx bx-hide"></i>
-                    {:else}
-                        <i class="mdi mdi-eye-outline"></i>
-                    {/if}
-                </button>
-            </li>
-        </ul>
+    <td class="ti-op-cell">
+        <div class="ti-op-actions">
+            <button
+                type="button"
+                class="ti-op-btn"
+                aria-label={open ? 'Hide detail' : 'View detail'}
+                title={open ? 'Hide detail' : 'View detail'}
+                aria-expanded={open}
+                onclick={() => toggleDetail()}
+            >
+                {#if open}
+                    <i class="bx bx-hide"></i>
+                {:else}
+                    <i class="mdi mdi-eye-outline"></i>
+                {/if}
+            </button>
+        </div>
     </td>
 </tr>
 
 {#if open}
-    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+    <tr class="ti-detail-row" in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
         <td colspan="12">
-            <div class="knowledge-detail">
-                <ul>
+            <div class="ti-detail">
+                <ul class="ti-detail-list">
                     {#each columns as column, idx (idx)}
-                    <li>
-                        <div class="wrappable fw-bold text-primary">
+                    <li class="ti-detail-row-item">
+                        <div class="ti-detail-label">
                             {column.displayName || column.dataName}
                         </div>
-                        <div class="wrappable">
+                        <div class="ti-detail-value">
                             {item[column.dataName] || ''}
                         </div>
                     </li>
                     {/each}
                 </ul>
-                <div class="more-detail">
-                    <button class="btn toggle-btn btn-sm btn-link" onclick={() => loadMore = !loadMore}>
-                        {`${loadMore ? 'Less -' : 'More +'}`}
+                <div class="ti-more">
+                    <button type="button" class="ti-more-btn" onclick={() => loadMore = !loadMore}>
+                        <i class={`mdi ${loadMore ? 'mdi-chevron-up' : 'mdi-chevron-down'}`}></i>
+                        <span>{loadMore ? 'Less' : 'More'}</span>
                     </button>
                 </div>
                 {#if loadMore}
                     <ul
-                        class="more-detail-list text-secondary"
+                        class="ti-more-list"
                         in:fly={{ y: -5, duration: 300 }}
                         out:fly={{ y: -5, duration: 200 }}
                     >
@@ -94,15 +97,15 @@
                             <JSONTree
                                 value={formatObject(item)}
                                 defaultExpandedLevel={1}
-                                --json-tree-number-color="var(--bs-info)"
-                                --json-tree-boolean-color="var(--bs-info)"
-                                --json-tree-string-color="var(--bs-info)"
+                                --json-tree-number-color="var(--color-info)"
+                                --json-tree-boolean-color="var(--color-info)"
+                                --json-tree-string-color="var(--color-info)"
                             />
                         {:else}
                             {#each Object.keys(item).filter(key => !columns.some(col => col.dataName === key)) as key, idx (idx)}
-                                <li class="more-detail-item wrappable">
-                                    <span>{splitTextByCase(key)}: </span>
-                                    <span>{item[key]}</span>
+                                <li class="ti-more-item">
+                                    <span class="ti-more-key">{splitTextByCase(key)}:</span>
+                                    <span class="ti-more-val">{item[key]}</span>
                                 </li>
                             {/each}
                         {/if}
@@ -111,4 +114,5 @@
             </div>
         </td>
     </tr>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
index 15bbfab9..344ec93a 100644
--- a/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
+++ b/src/routes/page/knowledge-base/common/vector-table/vector-item-edit-modal.svelte
@@ -157,7 +157,7 @@
             value: {
                 data_value: util.trim(x.value.data_value),
                 data_type: x.value.data_type || `${VectorPayloadDataType.String.id}`
-            } 
+            }
         })).filter(x => !!x.key && !!x.value.data_value && !excludedPayloads.includes(x.key));
 
         const obj = validPayloads.reduce((acc, cur) => {
@@ -188,76 +188,78 @@
 
 {#if open}
 <div
-    class="modal show d-block"
+    class="vie-modal"
     tabindex="-1"
     role="dialog"
     transition:fade={{ duration: 150 }}
     onclick={(e) => { if (e.target === e.currentTarget) toggleModal?.(); }}
     onkeydown={(e) => { if (e.key === 'Escape') toggleModal?.(); }}
 >
-    <div class={`modal-dialog modal-${size} ${className}`} role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <div>
-                    <div>{title}</div>
-                    <div>
-                        <span class="fw-bold">Collection: </span>
-                        <span class="text-primary collection-value">{collection}</span>
+    <div class={`vie-dialog vie-dialog-${size} ${className}`} role="document">
+        <div class="vie-content">
+            <div class="vie-header">
+                <div class="vie-header-text">
+                    <div class="vie-title">{title}</div>
+                    <div class="vie-collection">
+                        <span class="vie-collection-label">Collection: </span>
+                        <span class="vie-collection-value">{collection}</span>
                     </div>
                 </div>
-                <button type="button" class="btn-close" aria-label="Close" onclick={() => toggleModal?.()}></button>
+                <button type="button" class="vie-close" aria-label="Close" onclick={() => toggleModal?.()}>
+                    <i class="bx bx-x"></i>
+                </button>
             </div>
-            <div class="modal-body">
+            <div class="vie-body">
                 <form onsubmit={(e) => handleConfirm(e)}>
                     {#if isQuestionAnswerCollection}
-                    <div class="row">
-                        <div class="mb-3 edit-group">
-                            <label class="fw-bold textarea-label" for="question">
+                    <div class="vie-row">
+                        <div class="vie-edit-group">
+                            <label class="vie-textarea-label" for="question">
                                 Question:
                             </label>
                             <textarea
-                                class="form-control knowledge-textarea"
+                                class="vie-textarea"
                                 placeholder="Enter question..."
                                 rows={question.rows}
                                 maxlength={question.maxLength}
                                 bind:value={question.text}
                             ></textarea>
-                            <div class="text-secondary text-end text-count">
+                            <div class="vie-char-count">
                                 {question.text?.length || 0}/{question.maxLength}
                             </div>
                         </div>
                     </div>
-                    <div class="row">
-                        <div class="mb-3 edit-group">
-                            <label class="fw-bold textarea-label" for="answer">
+                    <div class="vie-row">
+                        <div class="vie-edit-group">
+                            <label class="vie-textarea-label" for="answer">
                                 Answer:
                             </label>
                             <textarea
-                                class="form-control knowledge-textarea"
+                                class="vie-textarea"
                                 placeholder="Enter answer..."
                                 rows={answer.rows}
                                 maxlength={answer.maxLength}
                                 bind:value={answer.text}
                             ></textarea>
-                            <div class="text-secondary text-end text-count">
+                            <div class="vie-char-count">
                                 {answer.text?.length || 0}/{answer.maxLength}
                             </div>
                         </div>
                     </div>
                     {:else if isDocumentCollection}
-                    <div class="row">
-                        <div class="mb-3 edit-group">
-                            <label class="fw-bold textarea-label" for="text">
+                    <div class="vie-row">
+                        <div class="vie-edit-group">
+                            <label class="vie-textarea-label" for="text">
                                 Text:
                             </label>
                             <textarea
-                                class="form-control knowledge-textarea"
+                                class="vie-textarea"
                                 placeholder="Enter text..."
                                 rows={question.rows}
                                 maxlength={question.maxLength}
                                 bind:value={question.text}
                             ></textarea>
-                            <div class="text-secondary text-end text-count">
+                            <div class="vie-char-count">
                                 {question.text?.length || 0}/{question.maxLength}
                             </div>
                         </div>
@@ -265,87 +267,80 @@
                     {/if}
 
                     {#if allowPayload}
-                    <div class="row mt-2">
-                        <div class="mb-3">
-                            <div class="payload-container" bind:this={scrollContainer}>
-                                {#if innerPayloads.length > 0}
-                                <div class="payload-item">
-                                    <div class="payload-item-content fw-bold" style="flex: 0.4;">Name</div>
-                                    <div class="payload-item-content fw-bold" style="flex: 0.4;">Data Value</div>
-                                    <div class="payload-item-content fw-bold" style="flex: 0.2;">Data Type</div>
-                                    <div style="flex: 0 0 12px;"></div>
+                    <div class="vie-row vie-payload-row">
+                        <div class="vie-payload-container" bind:this={scrollContainer}>
+                            {#if innerPayloads.length > 0}
+                            <div class="vie-payload-item">
+                                <div class="vie-payload-item-content vie-payload-header" style="flex: 0.4;">Name</div>
+                                <div class="vie-payload-item-content vie-payload-header" style="flex: 0.4;">Data Value</div>
+                                <div class="vie-payload-item-content vie-payload-header" style="flex: 0.2;">Data Type</div>
+                                <div class="vie-payload-remove-spacer"></div>
+                            </div>
+                            {/if}
+                            {#each innerPayloads as payload, idx (payload.uuid)}
+                            <div class="vie-payload-item">
+                                <div class="vie-payload-item-content" style="flex: 0.4;">
+                                    <input
+                                        type="text"
+                                        class="vie-input"
+                                        maxlength={1000}
+                                        value={payload.key}
+                                        oninput={e => changePayloadItem(e, idx, 'key')}
+                                    />
                                 </div>
-                                {/if}
-                                {#each innerPayloads as payload, idx (payload.uuid)}
-                                <div class="payload-item">
-                                    <div class="payload-item-content line-align-center" style="flex: 0.4;">
-                                        <input
-                                            type="text"
-                                            class="form-control"
-                                            maxlength={1000}
-                                            value={payload.key}
-                                            oninput={e => changePayloadItem(e, idx, 'key')}
-                                        />
-                                    </div>
-                                    <div class="payload-item-content line-align-center" style="flex: 0.4;">
-                                        <input
-                                            type="text"
-                                            class="form-control"
-                                            maxlength={1000}
-                                            value={payload.value.data_value}
-                                            oninput={e => changePayloadItem(e, idx, 'data_value')}
-                                        />
-                                    </div>
-                                    <div class="payload-item-content line-align-center" style="flex: 0.2;">
-                                        <Select
-                                            tag={'payload-data-type-select'}
-                                            placeholder={'Select'}
-                                            selectedValues={payload.value.data_type ? [payload.value.data_type] : []}
-                                            options={dataTypeOptions}
-                                            onselect={e => changePayloadItem(e, idx, 'data_type')}
-                                        />
-                                    </div>
-                                    <div class="line-align-center" style="flex: 0 0 12px;">
-                                        <div class="line-align-center">
-                                            <button
-                                                type="button"
-                                                class="btn btn-link p-0"
-                                                aria-label="Remove payload"
-                                                onclick={() => removePayloadItem(idx)}
-                                            >
-                                                <i class="bx bxs-no-entry text-danger clickable"></i>
-                                            </button>
-                                        </div>
-                                    </div>
+                                <div class="vie-payload-item-content" style="flex: 0.4;">
+                                    <input
+                                        type="text"
+                                        class="vie-input"
+                                        maxlength={1000}
+                                        value={payload.value.data_value}
+                                        oninput={e => changePayloadItem(e, idx, 'data_value')}
+                                    />
                                 </div>
-                                {/each}
+                                <div class="vie-payload-item-content" style="flex: 0.2;">
+                                    <Select
+                                        tag={'payload-data-type-select'}
+                                        placeholder={'Select'}
+                                        selectedValues={payload.value.data_type ? [payload.value.data_type] : []}
+                                        options={dataTypeOptions}
+                                        onselect={e => changePayloadItem(e, idx, 'data_type')}
+                                    />
+                                </div>
+                                <div class="vie-payload-remove">
+                                    <button
+                                        type="button"
+                                        class="vie-remove-btn"
+                                        aria-label="Remove payload"
+                                        onclick={() => removePayloadItem(idx)}
+                                    >
+                                        <i class="bx bxs-no-entry"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            {/each}
 
-                                {#if innerPayloads.length < payloadLimit}
-                                    <div class="payload-item justify-content-end">
-                                        <div class="payload-item-content line-align-center">
-                                            <div class="d-flex justify-content-end">
-                                                <button
-                                                    type="button"
-                                                    class="btn btn-link"
-                                                    style="width: fit-content"
-                                                    onclick={e => addPayloadItem(e)}
-                                                >
-                                                    Add Payload +
-                                                </button>
-                                            </div>
-                                        </div>
+                            {#if innerPayloads.length < payloadLimit}
+                                <div class="vie-payload-item vie-payload-add-row">
+                                    <div class="vie-payload-item-content vie-payload-add-wrap">
+                                        <button
+                                            type="button"
+                                            class="vie-link-btn"
+                                            onclick={e => addPayloadItem(e)}
+                                        >
+                                            Add Payload +
+                                        </button>
                                     </div>
-                                {/if}
-                            </div>
+                                </div>
+                            {/if}
                         </div>
                     </div>
                     {/if}
                 </form>
             </div>
-            <div class="modal-footer">
+            <div class="vie-footer">
                 <button
                     type="button"
-                    class="btn btn-primary"
+                    class="vie-btn vie-btn-primary"
                     disabled={disableConfirmBtn}
                     onclick={(e) => handleConfirm(e)}
                 >
@@ -353,7 +348,7 @@
                 </button>
                 <button
                     type="button"
-                    class="btn btn-secondary"
+                    class="vie-btn vie-btn-secondary"
                     onclick={(e) => handleCancel(e)}
                 >
                     Cancel
@@ -362,5 +357,6 @@
         </div>
     </div>
 </div>
-<div class="modal-backdrop fade show" transition:fade={{ duration: 150 }}></div>
-{/if}
\ No newline at end of file
+<div class="vie-backdrop" transition:fade={{ duration: 150 }}></div>
+{/if}
+
diff --git a/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte b/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
index 11b0d865..c770b0ef 100644
--- a/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
+++ b/src/routes/page/knowledge-base/common/vector-table/vector-item.svelte
@@ -75,19 +75,20 @@
 {/if}
 
 <tr in:fly={{ y: -5, duration: 800 }}>
-    <td class={`knowledge-text-qa ${isDocumentCollection ? 'knowledge-text' : ''}`}>
-        <div class="ellipsis">{item?.payload?.text?.data_value || item?.payload?.question?.data_value || ''}</div>
+    <td class={`vti-text-qa ${isDocumentCollection ? 'vti-text' : ''}`}>
+        <div class="vti-ellipsis">{item?.payload?.text?.data_value || item?.payload?.question?.data_value || ''}</div>
     </td>
     {#if isQuestionAnswerCollection}
-        <td class="knowledge-text-qa">
-            <div class="ellipsis">{item?.payload?.answer?.data_value || ''}</div>
+        <td class="vti-text-qa">
+            <div class="vti-ellipsis">{item?.payload?.answer?.data_value || ''}</div>
         </td>
     {/if}
-    <td class="knowledge-op">
-        <ul class="list-unstyled hstack gap-1 mb-0 knowledge-op-list">
+    <td class="vti-op">
+        <ul class="vti-op-list">
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
                 <button
-                    class="btn btn-sm btn-soft-primary"
+                    type="button"
+                    class="vti-icon-btn vti-icon-btn-primary"
                     aria-label="View detail"
                     onclick={() => toggleKnowledgeDetail()}
                 >
@@ -100,7 +101,8 @@
             </li>
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                 <button
-                    class="btn btn-sm btn-soft-warning"
+                    type="button"
+                    class="vti-icon-btn vti-icon-btn-warning"
                     disabled={disabled}
                     aria-label="Edit"
                     onclick={() => editKnowledge()}
@@ -110,7 +112,8 @@
             </li>
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                 <button
-                    class="btn btn-sm btn-soft-danger"
+                    type="button"
+                    class="vti-icon-btn vti-icon-btn-danger"
                     disabled={disabled}
                     aria-label="Delete"
                     onclick={() => deleteKnowledge(item?.id)}
@@ -125,67 +128,68 @@
 {#if open}
     <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
         <td colspan="12">
-            <div class="knowledge-detail">
+            <div class="vti-detail">
                 <ul>
                     {#if isQuestionAnswerCollection}
                         <li>
-                            <div class="wrappable fw-bold text-primary">
+                            <div class="vti-wrappable vti-detail-label">
                                 {'Question:'}
                             </div>
-                            <div class="wrappable">{item?.payload?.text?.data_value || item?.payload?.question?.data_value || ''}</div>
+                            <div class="vti-wrappable">{item?.payload?.text?.data_value || item?.payload?.question?.data_value || ''}</div>
                         </li>
                         <li>
-                            <div class="wrappable fw-bold text-primary">
+                            <div class="vti-wrappable vti-detail-label">
                                 {'Answer:'}
                             </div>
-                            <div class="wrappable">{item?.payload?.answer?.data_value || ''}</div>
+                            <div class="vti-wrappable">{item?.payload?.answer?.data_value || ''}</div>
                         </li>
                     {:else if isDocumentCollection}
                         <li>
-                            <div class="wrappable fw-bold text-primary">
+                            <div class="vti-wrappable vti-detail-label">
                                 {'Text:'}
                             </div>
-                            <div class="wrappable">{item?.payload?.text?.data_value || ''}</div>
+                            <div class="vti-wrappable">{item?.payload?.text?.data_value || ''}</div>
                         </li>
                     {/if}
 
                     {#if item?.score}
                         <li>
-                            <div class="wrappable fw-bold text-primary">
+                            <div class="vti-wrappable vti-detail-label">
                                 {'Score:'}
                             </div>
-                            <div class="wrappable">{`${item.score?.toFixed(6)}`}</div>
+                            <div class="vti-wrappable">{`${item.score?.toFixed(6)}`}</div>
                         </li>
                     {/if}
                 </ul>
                 {#if item?.id}
-                    <div class="more-detail">
-                        <button class="toggle-btn btn btn-sm btn-link" onclick={() => loadMore = !loadMore}>
+                    <div class="vti-more-detail">
+                        <button type="button" class="vti-link-btn" onclick={() => loadMore = !loadMore}>
                             {`${loadMore ? 'Less -' : 'More +'}`}
                         </button>
                     </div>
                     {#if loadMore}
                         <ul
-                            class="more-detail-list text-secondary"
+                            class="vti-more-detail-list"
                             in:fly={{ y: -5, duration: 300 }}
                             out:fly={{ y: -5, duration: 200 }}
                         >
-                            <li class="more-detail-item wrappable">
+                            <li class="vti-more-detail-item vti-wrappable">
                                 Data point id: {item?.id || ''}
                             </li>
                             {#if item?.vector_dimension}
-                                <li class="more-detail-item wrappable">
+                                <li class="vti-more-detail-item vti-wrappable">
                                     Vector dimension: {item?.vector_dimension}
                                 </li>
                             {/if}
                             {#if item?.payload}
                                 {#each Object.keys(item.payload) as key (`${key}-${item?.id}`)}
                                     {#if (!excludedPayloads.includes(key))}
-                                        <li class="more-detail-item wrappable">
+                                        <li class="vti-more-detail-item vti-wrappable">
                                             <span>{key} {`(${item.payload[key]?.data_type?.toLowerCase()})`}: </span>
                                             {#if key === KnowledgePayloadName.FileUrl}
                                                 <button
-                                                    class="link clickable btn btn-link p-0"
+                                                    type="button"
+                                                    class="vti-link"
                                                     onclick={() => window.open(item.payload[key]?.data_value)}
                                                 >
                                                     link
@@ -203,4 +207,6 @@
             </div>
         </td>
     </tr>
-{/if}
\ No newline at end of file
+{/if}
+
+
diff --git a/src/routes/page/knowledge-base/dictionary/+page.svelte b/src/routes/page/knowledge-base/dictionary/+page.svelte
index eb5537ee..95ec3fe9 100644
--- a/src/routes/page/knowledge-base/dictionary/+page.svelte
+++ b/src/routes/page/knowledge-base/dictionary/+page.svelte
@@ -15,6 +15,7 @@
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import TableItem from '../common/table/table-item.svelte';
 	import { KnowledgeBaseType } from '$lib/helpers/enums';
+	import { formatNumber } from '$lib/helpers/utils/common';
 
 	const knowledgeType = KnowledgeBaseType.Taxonomy;
 	const maxLength = 4096;
@@ -200,49 +201,51 @@
 	errorText={errorText}
 />
 
-<div class="knowledge-demo-btn mb-4">
-	<div class="demo-btn">
-		<button
-			class={`btn btn-${showDemo ? 'danger' : 'primary'}`}
-			onclick={() => toggleDemo()}
-		>
-			{#if !showDemo}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-search-alt"></i></div>
-					<div>{'Start Search'}</div>
-				</div>
-			{:else}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
-					<div>{'Hide Search'}</div>
-				</div>
-			{/if}
-		</button>
-	</div>
-
-	<div class="reset-btn">
-		<button
-			class="btn btn-secondary"
-			onclick={() => reset()}
-		>
-			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
-				<div>{'Reset'}</div>
-			</div>
-		</button>
-	</div>
+<div class="dict-action-bar">
+	<button
+		type="button"
+		class={`dict-btn ${showDemo ? 'dict-btn-danger' : 'dict-btn-primary'}`}
+		onclick={() => toggleDemo()}
+	>
+		{#if !showDemo}
+			<i class="bx bx-search-alt"></i>
+			<span>{'Start Search'}</span>
+		{:else}
+			<i class="bx bx-hide"></i>
+			<span>{'Hide Search'}</span>
+		{/if}
+	</button>
+
+	<button
+		type="button"
+		class="dict-btn dict-btn-secondary"
+		onclick={() => reset()}
+	>
+		<i class="bx bx-reset"></i>
+		<span>{'Reset'}</span>
+	</button>
 </div>
 
-<div class="d-xl-flex">
-	<div class="w-100">
+<div class="dict-page">
+	<div class="dict-page-col">
 		{#if showDemo}
 			<div
 				in:fly={{ y: -10, duration: 500 }}
 				out:fly={{ y: -10, duration: 200 }}
 			>
-				<div class="knowledge-search-container mb-4">
+				<div class="dict-search-card">
+					<div class="dict-search-head">
+						<span class="dict-search-icon">
+							<i class="bx bx-search-alt"></i>
+						</span>
+						<div>
+							<h4 class="dict-search-title">Search the Dictionary</h4>
+							<p class="dict-search-sub">Tokenize and resolve text.</p>
+						</div>
+					</div>
+
 					<textarea
-						class='form-control knowledge-textarea'
+						class="dict-textarea"
 						rows={5}
 						maxlength={maxLength}
 						disabled={isSearching}
@@ -250,113 +253,115 @@
 						bind:value={text}
 						onkeydown={(e) => pressKey(e)}
 					></textarea>
-					<div class="text-secondary text-count d-flex justify-content-between">
-						<div>
+
+					<div class="dict-meta-row">
+						<div class="dict-meta-time">
 							{#if elapsedTime}
-								{`Elapsed time: ${elapsedTime}`}
+								<i class="mdi mdi-timer-outline"></i>
+								<span>{`Elapsed: ${elapsedTime}`}</span>
 							{/if}
 						</div>
-						<div>{text?.length || 0}/{maxLength}</div>
+						<div class="dict-meta-count" class:dict-meta-count-warning={(text?.length || 0) > maxLength * 0.8}>
+							<i class="mdi mdi-counter"></i>
+							<span>{formatNumber(text?.length || 0)} / {formatNumber(maxLength)}</span>
+						</div>
+					</div>
+
+					<div class="dict-search-footer">
+						<button
+							type="button"
+							class="dict-btn dict-btn-primary"
+							disabled={disableSearchBtn}
+							onclick={() => search()}
+						>
+							<i class="bx bx-search-alt"></i>
+							<span>{'Search'}</span>
+						</button>
 					</div>
-				
-                    <div class="mt-3 knowledge-search-footer">
-                        <div class="search-input"></div>
-                        <div class="line-align-center">
-							<button
-								class="btn btn-primary"
-								disabled={disableSearchBtn}
-								onclick={() => search()}
-							>
-								{'Search'}
-							</button>
-                        </div>
-                    </div>
-				
+
 					{#if isSearching}
-						<div class="knowledge-loader mt-5">
-							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+						<div class="dict-loader">
+							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
 						</div>
 					{:else if searchDone && (!items || items.length === 0)}
-						<div class="mt-5 text-center">
-							<h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+						<div class="dict-empty">
+							<i class="mdi mdi-magnify-scan"></i>
+							<h4>Ehhh, no idea...</h4>
+							<p>No matches were returned for that input.</p>
 						</div>
 					{/if}
-			  	</div>
+				</div>
 			</div>
 		{/if}
-		<div class="d-md-flex mt-5">
-			<div class="w-100">
-				<div class="card">
-					<div class="card-body">
-						<div class="mt-2 knowledge-table-header">
+		<div class="dict-results-wrap">
+			<div class="dict-results-card">
+				<div class="dict-results-head">
+					<div class="dict-results-title-row">
+						<span class="dict-results-icon">
+							<i class="mdi mdi-book-alphabet"></i>
+						</span>
+						<div class="dict-results-title-block">
+							<h5 class="dict-results-title">{$_('Dictionary')}</h5>
 							{#if totalDataCount != null && totalDataCount != undefined}
-								<div class="knowledge-count line-align-center text-muted font-size-12">
-									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
-								</div>
+								<span class="dict-results-count">
+									<i class="mdi mdi-database-outline"></i>
+									{`${formatNumber(totalDataCount)} ${totalDataCount === 1 ? 'entry' : 'entries'}`}
+								</span>
 							{/if}
-							<div class="d-flex flex-wrap mb-3 justify-content-between">
-								<div class="action-container-padding d-flex" style="gap: 5px;">
-									<h5 class="knowledge-header-text line-align-center font-size-16">
-										<div>{$_('Dictionary')}</div>
-									</h5>
-								</div>
-								<div class="collection-action-container action-container-padding">
-									<div class="collection-dropdown-container">
-										<div class="line-align-center collection-dropdown">
-                                            <div>Analyzer</div>
-											<Select
-												tag={'entity-analyzer-select'}
-												placeholder={'Select Analyzer'}
-												searchMode
-												selectedValues={selectedAnalyzer ? [selectedAnalyzer] : []}
-												options={analyzers}
-												onselect={e => changeAnalyzer(e)}
-											/>
-										</div>
-                                        <div class="line-align-center collection-dropdown">
-                                            <div>Data Providers</div>
-											<Select
-												tag={'entity-data-loader-select'}
-												placeholder={'Select Data Providers'}
-												searchMode
-                                                selectAll
-                                                multiSelect
-												selectedValues={selectedDataLoaders}
-												options={dataLoaders}
-												onselect={e => changeDataLoaders(e)}
-											/>
-										</div>
-									</div>
-								</div>
-							</div>
-						  
-							<hr class="mt-2" />
-						  
-							<div class="table-responsive knowledge-table">
-								<table class="table align-middle table-nowrap table-hover mb-0">
-									<thead>
-										<tr>
-                                            {#each columns as column, idx (idx) }
-                                                <th scope="col" style="width: 40%;">{column.displayName}</th>
-                                            {/each}
-											<th style="width: 20%;"></th>
-										</tr>
-									</thead>
-									<tbody>
-										{#each items as item, idx (idx)}
-                                            <TableItem
-												item={item.data}
-                                                columns={columns}
-												open={idx === 0}
-											/>
-										{/each}
-									</tbody>
-								</table>
-							</div>
 						</div>
 					</div>
+
+					<div class="dict-controls">
+						<div class="dict-control">
+							<span class="dict-control-label">Analyzer</span>
+							<Select
+								tag={'entity-analyzer-select'}
+								placeholder={'Select Analyzer'}
+								searchMode
+								selectedValues={selectedAnalyzer ? [selectedAnalyzer] : []}
+								options={analyzers}
+								onselect={e => changeAnalyzer(e)}
+							/>
+						</div>
+						<div class="dict-control">
+							<span class="dict-control-label">Data Providers</span>
+							<Select
+								tag={'entity-data-loader-select'}
+								placeholder={'Select Data Providers'}
+								searchMode
+								selectAll
+								multiSelect
+								selectedValues={selectedDataLoaders}
+								options={dataLoaders}
+								onselect={e => changeDataLoaders(e)}
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div class="dict-table-wrap">
+					<table class="dict-table">
+						<thead>
+							<tr>
+								{#each columns as column, idx (idx)}
+									<th scope="col" style="width: 40%;">{column.displayName}</th>
+								{/each}
+								<th style="width: 20%;"></th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each items as item, idx (idx)}
+								<TableItem
+									item={item.data}
+									columns={columns}
+									open={idx === 0}
+								/>
+							{/each}
+						</tbody>
+					</table>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 340a0e2c..bb60113f 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -33,6 +33,7 @@
 		VectorPayloadDataType
 	} from '$lib/helpers/enums';
 	import { DECIMAL_REGEX } from '$lib/helpers/constants';
+	import { formatNumber } from '$lib/helpers/utils/common';
 	import VectorItem from '../common/vector-table/vector-item.svelte';
 	import VectorItemEditModal from '../common/vector-table/vector-item-edit-modal.svelte';
 	import CollectionCreateModal from '../common/collection/collection-create-modal.svelte';
@@ -419,7 +420,7 @@
 			if (!params.skipLoader) {
                 toggleLoader(params.isLocalLoading);
             }
-			
+
 			getKnowledgeListData({
 				...params
 			}).then(res => {
@@ -799,7 +800,7 @@
 		if (isAdvSearchOn && items?.length > 0) {
 			const validItems = items.filter(x => x.checked && !!util.trim(x.key) && !!util.trim(x.value))
 									.map(x => ({ key: util.trim(x.key), value: util.trim(x.value), data_type: x.data_type || VectorPayloadDataType.String.name }));
-			
+
 			if (validItems.length > 0) {
 				groups = [ ...groups, { logical_operator: 'or', filters: [
 					{
@@ -930,61 +931,57 @@
 	cancel={() => toggleCollectionCreate()}
 />
 
-<div class="knowledge-demo-btn mb-4">
-	<div class="demo-btn">
+<div class="doc-action-bar">
+	<div class="doc-demo-btn-group">
 		<button
-			class={`btn btn-${showDemo ? 'danger' : 'primary'}`}
+			type="button"
+			class={`doc-btn ${showDemo ? 'doc-btn-danger' : 'doc-btn-primary'}`}
 			onclick={() => toggleDemo()}
 		>
 			{#if !showDemo}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-search-alt"></i></div>
-					<div>{'Start Search'}</div>
-				</div>
+				<i class="bx bx-search-alt"></i>
+				<span>{'Start Search'}</span>
 			{:else}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
-					<div>{'Hide Search'}</div>
-				</div>
+				<i class="bx bx-hide"></i>
+				<span>{'Hide Search'}</span>
 			{/if}
 		</button>
 
 		{#if showDemo}
-			<div class="knowledge-btn-icon demo-tooltip-icon line-align-center" id="demo-tooltip">
+			<div class="doc-tooltip-icon" id="demo-tooltip">
 				<i class="bx bx-info-circle"></i>
 			</div>
-			<BotsharpTooltip target="demo-tooltip" placement="top" containerClasses="demo-tooltip-note">
-				<ul>
-					<li>Click "Search" or press "Enter" to search knowledge</li>
-					<li>Switch collection will not search</li>
+			<BotsharpTooltip target="demo-tooltip" placement="top" containerClasses="[&_.tooltip-inner]:max-w-fit">
+				<ul class="mb-0 list-disc pl-4 text-left">
+					<li class="my-[3px]">Click "Search" or press "Enter" to search knowledge</li>
+					<li class="my-[3px]">Switch collection will not search</li>
 				</ul>
 			</BotsharpTooltip>
 		{/if}
 	</div>
 
-	<div class="reset-btn">
+	<div>
 		<button
-			class="btn btn-secondary"
+			type="button"
+			class="doc-btn doc-btn-secondary"
 			onclick={() => reset()}
 		>
-			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
-				<div>{'Reset'}</div>
-			</div>
+			<i class="bx bx-reset"></i>
+			<span>{'Reset'}</span>
 		</button>
 	</div>
 </div>
 
-<div class="d-xl-flex">
-	<div class="w-100">
+<div class="doc-page">
+	<div class="doc-page-col">
 		{#if showDemo}
 			<div
 				in:fly={{ y: -10, duration: 500 }}
 				out:fly={{ y: -10, duration: 200 }}
 			>
-				<div class="knowledge-search-container mb-4">
+				<div class="doc-search-card">
 					<textarea
-						class='form-control knowledge-textarea'
+						class="doc-textarea"
 						rows={5}
 						maxlength={maxLength}
 						disabled={isSearching}
@@ -992,41 +989,43 @@
 						bind:value={text}
 						onkeydown={(e) => pressKey(e)}
 					></textarea>
-					<div class="text-secondary text-count d-flex justify-content-between">
+					<div class="doc-meta-row">
 						<div>
 							{#if elapsedTime}
 								{`Elapsed time: ${elapsedTime}`}
 							{/if}
 						</div>
-						<div>{text?.length || 0}/{maxLength}</div>
+						<div>{formatNumber(text?.length || 0)}/{formatNumber(maxLength)}</div>
 					</div>
 
-                    <div class="mt-3 knowledge-search-footer">
-                        <div class="search-input">
-                            <div class="line-align-center input-text fw-bold">
+                    <div class="doc-search-footer">
+                        <div class="doc-search-input">
+                            <div class="doc-search-label">
                                 <span>{'Confidence'}</span>
                             </div>
-							<div style="display: flex; gap: 5px;">
-								<div class="line-align-center confidence-box">
+							<div class="doc-confidence-wrap">
+								<div class="doc-confidence-box">
 									<input
 										type="text"
-										class="form-control text-center"
+										class="doc-confidence-input"
 										disabled={textSearch}
 										bind:value={confidence}
 										onkeydown={(e) => validateConfidenceInput(e)}
 										onblur={(e) => changeConfidence(e)}
 									/>
 								</div>
-								<div class="step-btn-group">
+								<div class="doc-step-btn-group">
 									<button
-										class="btn btn-sm btn-link"
+										type="button"
+										class="doc-step-btn"
 										aria-label="Increase confidence"
 										onclick={() => stepChangeConfidence('plus', step)}
 									>
 										<i class="mdi mdi-chevron-up"></i>
 									</button>
 									<button
-										class="btn btn-sm btn-link"
+										type="button"
+										class="doc-step-btn"
 										aria-label="Decrease confidence"
 										onclick={() => stepChangeConfidence('minus', step)}
 									>
@@ -1035,47 +1034,48 @@
 								</div>
 							</div>
                         </div>
-						<div class="search-input">
-							<div class="line-align-center input-text fw-bold">
+						<div class="doc-search-input">
+							<div class="doc-search-label">
 								<span>{'Similarity search'}</span>
 							</div>
-							<div class="line-align-center input-text search-toggle">
-								<div class="form-check form-switch">
+							<div class="doc-search-toggle">
+								<label class="doc-switch">
 									<input
 										type="checkbox"
-										class="form-check-input"
 										role="switch"
 										checked={textSearch}
 										disabled={disabled}
 										onchange={() => toggleTextSearch()}
 									/>
-								</div>
+									<span class="doc-switch-slider"></span>
+								</label>
 							</div>
-							<div class="line-align-center input-text fw-bold">
+							<div class="doc-search-label">
 								<span>{'Keyword search'}</span>
 							</div>
 						</div>
 						{#if !textSearch}
-						<div class="d-flex align-items-center gap-2">
+						<div class="doc-exact-search">
 							<input
 								type="checkbox"
-								class="form-check-input m-0"
+								class="doc-checkbox"
 								id="exact-search-check"
 								disabled={disabled}
 								bind:checked={isExactSearch}
 							/>
-							<label class="form-check-label input-text fw-bold mb-0" for="exact-search-check">
+							<label class="doc-search-label" for="exact-search-check">
 								Exact search
 							</label>
 						</div>
 						{/if}
-                        <div class="line-align-center">
+                        <div class="doc-search-input">
 							<button
-								class="btn btn-primary"
+								type="button"
+								class="doc-btn doc-btn-primary"
 								disabled={disableSearchBtn}
 								onclick={() => search()}
 							>
-								{'Search'}
+								<span>{'Search'}</span>
 							</button>
                         </div>
                     </div>
@@ -1088,20 +1088,20 @@
 						bind:sortOrder={sortOrder}
 						disabled={disabled}
 					/> -->
-				
+
 					{#if isSearching}
-						<div class="knowledge-loader mt-5">
-							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+						<div class="doc-loader">
+							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
 						</div>
 					{:else if searchDone && (!items || items.length === 0)}
-						<div class="mt-5 text-center">
-							<h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+						<div class="doc-empty">
+							<h4>{"Ehhh, no idea..."}</h4>
 						</div>
 					{/if}
 			  	</div>
 			</div>
 		{/if}
-        
+
         {#if selectedCollection}
             <KnowledgeFileUpload
                 collection={selectedCollection}
@@ -1117,175 +1117,181 @@
             />
         {/if}
 
-		<div class="d-md-flex mt-5">
-			<div class="w-100">
-				<div class="card">
-					<div class="card-body">
-						<div class="mt-2 knowledge-table-header">
-							{#if totalDataCount != null && totalDataCount != undefined}
-								<div class="knowledge-count line-align-center text-muted font-size-12">
-									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
+		<div class="doc-table-section">
+			<div class="doc-card">
+				<div class="doc-card-body">
+					<div class="doc-table-header">
+						{#if totalDataCount != null && totalDataCount != undefined}
+							<div class="doc-table-count">
+								{`Total data: ${formatNumber(totalDataCount)}`}
+							</div>
+						{/if}
+						<div class="doc-table-toolbar">
+							<div class="doc-toolbar-left">
+								<h5 class="doc-table-title">
+									<div>{$_('Knowledges')}</div>
+								</h5>
+								<div
+									class="doc-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Add knowledge"
+								>
+									<button
+										type="button"
+										class="doc-btn-soft doc-btn-soft-primary"
+										disabled={disabled}
+										aria-label="Add knowledge"
+										onclick={() => onKnowledgeCreate()}
+									>
+										<i class="mdi mdi-plus"></i>
+									</button>
 								</div>
-							{/if}
-							<div class="d-flex flex-wrap mb-3 justify-content-between">
-								<div class="action-container-padding d-flex" style="gap: 5px;">
-									<h5 class="knowledge-header-text font-size-16">
-										<div>{$_('Knowledges')}</div>
-									</h5>
-									<div
-										class="line-align-center"
-										data-bs-toggle="tooltip"
-										data-bs-placement="top"
-										title="Add knowledge"
+								<div
+									class="doc-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Delete all data"
+								>
+									<button
+										type="button"
+										class="doc-btn-soft doc-btn-soft-danger"
+										disabled={disabled}
+										aria-label="Delete all data"
+										onclick={() => onKnowledgeDeleteAll()}
 									>
-										<button
-											class="btn btn-sm btn-soft-primary knowledge-btn-icon"
-											disabled={disabled}
-											aria-label="Add knowledge"
-											onclick={() => onKnowledgeCreate()}
-										>
-											<i class="mdi mdi-plus"></i>
-										</button>
-									</div>
-									<div
-										class="line-align-center"
-										data-bs-toggle="tooltip"
-										data-bs-placement="top"
-										title="Delete all data"
+										<i class="mdi mdi-minus"></i>
+									</button>
+								</div>
+								<div
+									class="doc-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Upload doc"
+								>
+									<button
+										type="button"
+										class="doc-btn-soft doc-btn-soft-info"
+										disabled={disabled}
+										aria-label="Upload doc"
+										onclick={() => toggleUploadModal()}
 									>
-										<button
-											class="btn btn-sm btn-soft-danger knowledge-btn-icon"
-											disabled={disabled}
-											aria-label="Delete all data"
-											onclick={() => onKnowledgeDeleteAll()}
-										>
-											<i class="mdi mdi-minus"></i>
-										</button>
+										<i class="mdi mdi-file-upload"></i>
+									</button>
+								</div>
+							</div>
+							<div class="doc-toolbar-right">
+								{#if selectedCollection}
+								<div
+									class="doc-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Create/delete payload indexes"
+								>
+									<button
+										type="button"
+										class="doc-btn-soft doc-btn-soft-primary"
+										onclick={() => toggleIndexModal()}
+									>
+										Index
+									</button>
+								</div>
+								{/if}
+
+								<div class="doc-collection-dropdown-wrap">
+									<div class="doc-collection-dropdown">
+										<Select
+											tag={'kn-doc-collection-select'}
+											placeholder={'Select Collection'}
+											searchMode
+											selectedValues={selectedCollection ? [selectedCollection] : []}
+											options={collections}
+											onselect={e => changeCollection(e)}
+										/>
 									</div>
+								</div>
+								<div class="doc-collection-actions">
 									<div
-										class="line-align-center"
+										class="doc-icon-wrap"
 										data-bs-toggle="tooltip"
 										data-bs-placement="top"
-										title="Upload doc"
+										title="Add collection"
 									>
 										<button
-											class="btn btn-sm btn-soft-info knowledge-btn-icon"
-											disabled={disabled}
-											aria-label="Upload doc"
-											onclick={() => toggleUploadModal()}
+											type="button"
+											class="doc-btn-soft doc-btn-soft-primary"
+											disabled={disableBase}
+											aria-label="Add collection"
+											onclick={() => toggleCollectionCreate()}
 										>
-											<i class="mdi mdi-file-upload"></i>
+											<i class="mdi mdi-plus"></i>
 										</button>
 									</div>
-								</div>
-								<div class="collection-action-container action-container-padding">
-									{#if selectedCollection}
 									<div
-										class="line-align-center"
+										class="doc-icon-wrap"
 										data-bs-toggle="tooltip"
 										data-bs-placement="top"
-										title="Create/delete payload indexes"
+										title="Delete collection"
 									>
 										<button
-											class="btn btn-sm btn-soft-primary"
-											onclick={() => toggleIndexModal()}
+											type="button"
+											class="doc-btn-soft doc-btn-soft-danger"
+											disabled={disabled}
+											aria-label="Delete collection"
+											onclick={() => deleteCollection()}
 										>
-											Index
+											<i class="mdi mdi-minus"></i>
 										</button>
 									</div>
-									{/if}
-
-									<div class="collection-dropdown-container">
-										<div class="line-align-center collection-dropdown">
-											<Select
-												tag={'kn-doc-collection-select'}
-												placeholder={'Select Collection'}
-												searchMode
-												selectedValues={selectedCollection ? [selectedCollection] : []}
-												options={collections}
-												onselect={e => changeCollection(e)}
-											/>
-										</div>
-									</div>
-									<div class="collection-add-container">
-										<div
-											class="line-align-center"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="Add collection"
-										>
-											<button
-												class="btn btn-sm btn-soft-primary collection-action-btn"
-												disabled={disableBase}
-												aria-label="Add collection"
-												onclick={() => toggleCollectionCreate()}
-											>
-												<i class="mdi mdi-plus"></i>
-											</button>
-										</div>
-										<div
-											class="line-align-center"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="Delete collection"
-										>
-											<button
-												class="btn btn-sm btn-soft-danger collection-action-btn"
-												disabled={disabled}
-												aria-label="Delete collection"
-												onclick={() => deleteCollection()}
-											>
-												<i class="mdi mdi-minus"></i>
-											</button>
-										</div>
-									</div>
 								</div>
 							</div>
+						</div>
 
-							<hr class="mt-2" />
-
-							<div class="table-responsive knowledge-table">
-								<table class="table align-middle table-nowrap table-hover mb-0">
-									<thead>
-										<tr>
-											<th scope="col">{$_('Text')}</th>
-											<th></th>
-										</tr>
-									</thead>
-									<tbody>
-										{#each items as item, idx (idx)}
-                                            <VectorItem
-												collection={selectedCollection}
-                                                knowledgeType={knowledgeType}
-												item={item}
-												open={isFromSearch && idx === 0}
-												ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
-												onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
-											/>
-										{/each}
-									</tbody>
-								</table>
-
-								{#if isLoadingMore}
-									<div class="knowledge-loader mt-4">
-										<Loader size={25} disableDefaultStyles />
-									</div>
-								{:else if !!nextId}
-									<div class="mt-4 text-center">
-										<button
-											class="btn btn-soft-primary"
-											disabled={disabled}
-											onclick={() => loadMore()}
-										>
-											{'Load more'}
-										</button>
-									</div>
-								{/if}
-							</div>
+						<hr class="doc-divider" />
+
+						<div class="doc-table-wrap">
+							<table class="doc-table">
+								<thead>
+									<tr>
+										<th scope="col">{$_('Text')}</th>
+										<th></th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each items as item, idx (idx)}
+                                        <VectorItem
+											collection={selectedCollection}
+                                            knowledgeType={knowledgeType}
+											item={item}
+											open={isFromSearch && idx === 0}
+											ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
+											onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
+										/>
+									{/each}
+								</tbody>
+							</table>
+
+							{#if isLoadingMore}
+								<div class="doc-loader doc-loader-sm">
+									<Loader size={25} disableDefaultStyles />
+								</div>
+							{:else if !!nextId}
+								<div class="doc-load-more-wrap">
+									<button
+										type="button"
+										class="doc-btn-soft doc-btn-soft-primary"
+										disabled={disabled}
+										onclick={() => loadMore()}
+									>
+										{'Load more'}
+									</button>
+								</div>
+							{/if}
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/knowledge-base/documents/knowledge-file-upload.svelte b/src/routes/page/knowledge-base/documents/knowledge-file-upload.svelte
index ffe581b4..f9827fe0 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-file-upload.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-file-upload.svelte
@@ -209,7 +209,7 @@
 
     function loadMoreDocs() {
         if (isLoadingFiles) return;
-        
+
         getKnowledgeDocumentList().then(() => {
             autoScrollToBottom();
         });
@@ -247,7 +247,7 @@
                 isLoadingFiles = false;
             });
         });
-        
+
     }
 
     /** @param {number} index */
@@ -360,46 +360,46 @@
 <LoadingToComplete {isLoading} />
 
 <div
-    class="knowledge-doc-upload-container"
+    class="doc-up-container"
     in:fly={{ y: -10, duration: 500 }}
     out:fly={{ y: -10, duration: 200 }}
 >
-    <div class="doc-upload-header text-primary fw-bold">
-        <div class="form-check form-switch upload-toggle-btn">
+    <div class="doc-up-header">
+        <label class="doc-up-switch">
             <input
                 type="checkbox"
-                class="form-check-input"
                 role="switch"
                 disabled={disabled}
                 checked={showUploader}
                 onchange={e => toggleUploader(e)}
             />
-        </div>
-        <div class="line-align-center">
+            <span class="doc-up-switch-slider"></span>
+        </label>
+        <div class="doc-up-header-label">
             <div>{`${showUploader && !disableFileUpload ? 'Upload' : 'View'} Documents`}</div>
         </div>
         {#if showUploader}
-            <div class="line-align-center" id="upload-tooltip">
+            <div class="doc-up-tooltip-icon" id="upload-tooltip">
                 <i class="bx bx-info-circle"></i>
             </div>
-            <BotsharpTooltip target="upload-tooltip" placement="top" containerClasses="demo-tooltip-note">
-                <ul>
-                    <li>{`At most ${fileLimit} ${fileLimit > 1 ? 'documents are' : 'document is'} allowed for each upload.`}</li>
-                    <li>{`Each document cannot exceed ${fileMaxSize} MB.`}</li>
-                    <li>{`Document types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
+            <BotsharpTooltip target="upload-tooltip" placement="top" containerClasses="[&_.tooltip-inner]:max-w-fit">
+                <ul class="mb-0 list-disc pl-4 text-left">
+                    <li class="my-[3px]">{`At most ${fileLimit} ${fileLimit > 1 ? 'documents are' : 'document is'} allowed for each upload.`}</li>
+                    <li class="my-[3px]">{`Each document cannot exceed ${fileMaxSize} MB.`}</li>
+                    <li class="my-[3px]">{`Document types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
                 </ul>
             </BotsharpTooltip>
         {/if}
     </div>
     {#if showUploader}
         <div
-            class="doc-uploader-container mt-3"
+            class="doc-up-uploader"
             in:fly={{ y: -10, duration: 500 }}
             out:fly={{ y: -10, duration: 200 }}
         >
             {#if !disableFileUpload}
                 <FileGallery
-                    containerClasses={'doc-upload-body'}
+                    containerClasses={'doc-up-gallery'}
                     files={uploadFiles}
                     showFileName
                     needDelete
@@ -411,7 +411,7 @@
                     {#snippet prefix()}
                         <FileDropZone
                             accept={accept}
-                            containerClasses={'doc-drop-zone'}
+                            containerClasses={'doc-up-drop-zone'}
                             disabled={disabled || disableFileDrop}
                             fileLimit={localFileUploadLimit}
                             maxSize={fileMaxSize * 1024 * 1024}
@@ -421,13 +421,11 @@
                         </FileDropZone>
                     {/snippet}
                     {#snippet suffix()}
-                        <div
-                            class="doc-card-btn"
-                        >
+                        <div class="doc-up-card-btn">
                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                             <!-- svelte-ignore a11y_no_static_element_interactions -->
                             <i
-                                class="mdi mdi-arrow-up-bold-circle clickable"
+                                class="mdi mdi-arrow-up-bold-circle doc-up-clickable"
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Submit"
@@ -443,31 +441,28 @@
                 failedFiles={failedFiles}
             />
 
-            <div class="doc-upload-footer" style={`margin-top: ${!disableFileUpload ? '30px;' : '0px;'}`}>
+            <div class="doc-up-footer" class:doc-up-footer-compact={disableFileUpload}>
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div class="load-doc-btn">
+                <div class="doc-up-load-doc-row">
                     <button
-                        class={`btn btn-md knowledge-demo-btn ${showDocList ? 'btn-soft-warning' : 'btn-soft-primary'}`}
+                        type="button"
+                        class={`doc-up-btn ${showDocList ? 'doc-up-btn-warning' : 'doc-up-btn-primary'}`}
                         disabled={disabled}
                         onclick={() => toggleShowDocList()}
                     >
                         {#if !showDocList}
-                            <div class="btn-content">
-                                <div class="knowledge-btn-icon line-align-center"><i class="bx bx-search-alt"></i></div>
-                                <div>{'View Collection Documents'}</div>
-                            </div>
+                            <i class="bx bx-search-alt"></i>
+                            <span>{'View Collection Documents'}</span>
                         {:else}
-                            <div class="btn-content">
-                                <div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
-                                <div>{'Hide Collection Documents'}</div>
-                            </div>
+                            <i class="bx bx-hide"></i>
+                            <span>{'Hide Collection Documents'}</span>
                         {/if}
                     </button>
                     {#if showDocList && !disableFileDelete}
-                        <div class="reset-docs-btn line-align-center">
+                        <div class="doc-up-reset-docs">
                             <!-- svelte-ignore a11y_no_static_element_interactions -->
                             <i
-                                class={`bx bx-trash ${disabled || savedFiles.length === 0 ? '' : 'clickable'}`}
+                                class={`bx bx-trash ${disabled || savedFiles.length === 0 ? '' : 'doc-up-clickable'}`}
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Delete all docs"
@@ -477,7 +472,7 @@
                     {/if}
                 </div>
                 {#if showDocList}
-                    <div class="collection-docs docs-scrollbar">
+                    <div class="doc-up-collection-docs">
                         <div>
                             {#if savedFiles.length > 0}
                                 <FileGallery
@@ -491,11 +486,11 @@
                                     showSuffix={!noMoreDocs}
                                 >
                                     {#snippet suffix()}
-                                        <div class="doc-card-btn doc-load-more">
+                                        <div class="doc-up-card-btn doc-up-load-more">
                                             <!-- svelte-ignore a11y_no_static_element_interactions -->
                                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                                             <i
-                                                class="mdi mdi-eye-plus-outline clickable"
+                                                class="mdi mdi-eye-plus-outline doc-up-clickable"
                                                 data-bs-toggle="tooltip"
                                                 data-bs-placement="top"
                                                 title="Load more"
@@ -505,17 +500,17 @@
                                     {/snippet}
                                 </FileGallery>
                             {:else if !isLoadingFiles && savedFiles.length === 0}
-                                <div class="mt-3 text-center">
-                                    <h4 class="text-secondary">{"Ehhh, nothing is found..."}</h4>
+                                <div class="doc-up-empty">
+                                    <h4>{"Ehhh, nothing is found..."}</h4>
                                 </div>
                             {/if}
                             {#if isLoadingFiles}
-                                <div class="knowledge-loader mt-3 mb-3">
-                                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+                                <div class="doc-up-loader">
+                                    <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
                                 </div>
                             {:else if noMoreDocs && savedFiles.length > 0}
-                                <div class="mt-3 text-center">
-                                    <h4 class="text-secondary">{"No more files..."}</h4>
+                                <div class="doc-up-empty">
+                                    <h4>{"No more files..."}</h4>
                                 </div>
                             {/if}
                         </div>
@@ -524,4 +519,5 @@
             </div>
         </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
index c92bf45a..10071994 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
@@ -123,14 +123,14 @@
     toggleModal={() => toggleModal?.()}
 >
     <div>
-        <div class="mb-3">
-            <span class="fw-bold">{'Collection: '}</span>
-            <span class="text-primary collection-value">{collection}</span>
+        <div class="kum-collection-row">
+            <span class="kum-collection-label">{'Collection: '}</span>
+            <span class="kum-collection-value">{collection}</span>
         </div>
         <form>
-            <div class="mt-2 d-flex flex-column gap-2">
-                <div class="d-flex gap-1">
-                    <div class="fw-bold">{'Document Processor'}</div>
+            <div class="kum-field">
+                <div class="kum-field-label-row">
+                    <div class="kum-field-label">{'Document Processor'}</div>
                 </div>
                 <Select
                     tag={'kn-doc-processor-select'}
@@ -141,27 +141,27 @@
                     onselect={e => changeProcessor(e)}
                 />
             </div>
-            <div class="mt-2 d-flex flex-column gap-2">
+            <div class="kum-field">
                 <FileGallery
-                    containerClasses={'doc-upload-body'}
+                    containerClasses={'kum-gallery'}
                     showPrefix={true}
                     disabled={disabled || !selectedProcessor}
                 >
                     {#snippet prefix()}
                         <FileDropZone
                             accept={accept}
-                            containerClasses={'doc-drop-zone'}
+                            containerClasses={'kum-drop-zone'}
                             disabled={!selectedProcessor}
                             fileLimit={1}
                             maxSize={fileMaxSize * 1024 * 1024}
                             ondrop={handleFileDrop}
                         >
-                            <div>
-                                <div class="doc-drop-icon">
+                            <div class="kum-drop-content">
+                                <div class="kum-drop-icon">
                                     <i class="bx bx-cloud-upload"></i>
                                 </div>
                                 <div>
-                                    <ul>
+                                    <ul class="kum-drop-list">
                                         <li>{'Please select a processor before uploading.'}</li>
                                         <li>{'File cannot exceed 10 MB.'}</li>
                                         <li>{`File types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
@@ -174,4 +174,5 @@
             </div>
         </form>
     </div>
-</PlainModal>
\ No newline at end of file
+</PlainModal>
+
diff --git a/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte b/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
index 715c7f7c..aaae4fd0 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
@@ -12,10 +12,10 @@
 </script>
 
 {#if successFiles?.length > 0 || failedFiles?.length > 0}
-    <div class="doc-upload-result-container mt-3">
+    <div class="dur-container">
         {#if successFiles?.length > 0}
             {#each successFiles as file, idx (idx)}
-                <div class="doc-upload-result-item text-success">
+                <div class="dur-item dur-item-success">
                     <div>
                         <i class="mdi mdi-check-circle"></i>
                     </div>
@@ -28,7 +28,7 @@
 
         {#if failedFiles?.length > 0}
             {#each failedFiles as file, idx (idx)}
-                <div class="doc-upload-result-item text-danger">
+                <div class="dur-item dur-item-danger">
                     <div>
                         <i class="mdi mdi-alert-circle"></i>
                     </div>
@@ -39,4 +39,5 @@
             {/each}
         {/if}
     </div>
-{/if}
\ No newline at end of file
+{/if}
+
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index f4432563..27789daf 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -32,6 +32,7 @@
 		VectorPayloadDataType
 	} from '$lib/helpers/enums';
 	import { DECIMAL_REGEX } from '$lib/helpers/constants';
+	import { formatNumber } from '$lib/helpers/utils/common';
 	import VectorItem from '../common/vector-table/vector-item.svelte';
 	import VectorItemEditModal from '../common/vector-table/vector-item-edit-modal.svelte';
 	import CollectionCreateModal from '../common/collection/collection-create-modal.svelte';
@@ -403,7 +404,7 @@
 			if (!params.skipLoader) {
 				toggleLoader(params.isLocalLoading);
 			}
-			
+
 			getKnowledgeListData({
 				...params
 			}).then(res => {
@@ -739,7 +740,7 @@
 		if (isAdvSearchOn && items?.length > 0) {
 			const validItems = items.filter(x => x.checked && !!util.trim(x.key) && !!util.trim(x.value))
 									.map(x => ({ key: util.trim(x.key), value: util.trim(x.value), data_type: x.data_type || VectorPayloadDataType.String.name }));
-			
+
 			if (validItems.length > 0) {
 				groups = [ ...groups, { logical_operator: 'or', filters: [
 					{
@@ -853,61 +854,57 @@
 	cancel={() => toggleCollectionCreate()}
 />
 
-<div class="knowledge-demo-btn mb-4">
-	<div class="demo-btn">
+<div class="qa-action-bar">
+	<div class="qa-demo-btn-group">
 		<button
-			class={`btn btn-${showDemo ? 'danger' : 'primary'}`}
+			type="button"
+			class={`qa-btn ${showDemo ? 'qa-btn-danger' : 'qa-btn-primary'}`}
 			onclick={() => toggleDemo()}
 		>
 			{#if !showDemo}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-search-alt"></i></div>
-					<div>{'Start Search'}</div>
-				</div>
+				<i class="bx bx-search-alt"></i>
+				<span>{'Start Search'}</span>
 			{:else}
-				<div class="btn-content">
-					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
-					<div>{'Hide Search'}</div>
-				</div>
+				<i class="bx bx-hide"></i>
+				<span>{'Hide Search'}</span>
 			{/if}
 		</button>
 
 		{#if showDemo}
-			<div class="knowledge-btn-icon demo-tooltip-icon line-align-center" id="demo-tooltip">
+			<div class="qa-tooltip-icon" id="demo-tooltip">
 				<i class="bx bx-info-circle"></i>
 			</div>
-			<BotsharpTooltip target="demo-tooltip" placement="top" containerClasses="demo-tooltip-note">
-				<ul>
-					<li>Click "Search" or press "Enter" to search knowledge</li>
-					<li>Switch collection will not search</li>
+			<BotsharpTooltip target="demo-tooltip" placement="top" containerClasses="[&_.tooltip-inner]:max-w-fit">
+				<ul class="mb-0 list-disc pl-4 text-left">
+					<li class="my-[3px]">Click "Search" or press "Enter" to search knowledge</li>
+					<li class="my-[3px]">Switch collection will not search</li>
 				</ul>
 			</BotsharpTooltip>
 		{/if}
 	</div>
 
-	<div class="reset-btn">
+	<div>
 		<button
-			class="btn btn-secondary"
+			type="button"
+			class="qa-btn qa-btn-secondary"
 			onclick={() => reset()}
 		>
-			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
-				<div>{'Reset'}</div>
-			</div>
+			<i class="bx bx-reset"></i>
+			<span>{'Reset'}</span>
 		</button>
 	</div>
 </div>
 
-<div class="d-xl-flex">
-	<div class="w-100">
+<div class="qa-page">
+	<div class="qa-page-col">
 		{#if showDemo}
 			<div
 				in:fly={{ y: -10, duration: 500 }}
 				out:fly={{ y: -10, duration: 200 }}
 			>
-				<div class="knowledge-search-container mb-4">
+				<div class="qa-search-card">
 					<textarea
-						class='form-control knowledge-textarea'
+						class="qa-textarea"
 						rows={5}
 						maxlength={maxLength}
 						disabled={isSearching}
@@ -915,41 +912,43 @@
 						bind:value={text}
 						onkeydown={(e) => pressKey(e)}
 					></textarea>
-					<div class="text-secondary text-count d-flex justify-content-between">
+					<div class="qa-meta-row">
 						<div>
 							{#if elapsedTime}
 								{`Elapsed time: ${elapsedTime}`}
 							{/if}
 						</div>
-						<div>{text?.length || 0}/{maxLength}</div>
+						<div>{formatNumber(text?.length || 0)}/{formatNumber(maxLength)}</div>
 					</div>
 
-                    <div class="mt-3 knowledge-search-footer">
-                        <div class="search-input">
-                            <div class="line-align-center input-text fw-bold">
+                    <div class="qa-search-footer">
+                        <div class="qa-search-input">
+                            <div class="qa-search-label">
                                 <span>{'Confidence'}</span>
                             </div>
-							<div style="display: flex; gap: 5px;">
-								<div class="line-align-center confidence-box">
+							<div class="qa-confidence-wrap">
+								<div class="qa-confidence-box">
 									<input
 										type="text"
-										class="form-control text-center"
+										class="qa-confidence-input"
 										disabled={textSearch}
 										bind:value={confidence}
 										onkeydown={(e) => validateConfidenceInput(e)}
 										onblur={(e) => changeConfidence(e)}
 									/>
 								</div>
-								<div class="step-btn-group">
+								<div class="qa-step-btn-group">
 									<button
-										class="btn btn-sm btn-link"
+										type="button"
+										class="qa-step-btn"
 										aria-label="Increase confidence"
 										onclick={() => stepChangeConfidence('plus', step)}
 									>
 										<i class="mdi mdi-chevron-up"></i>
 									</button>
 									<button
-										class="btn btn-sm btn-link"
+										type="button"
+										class="qa-step-btn"
 										aria-label="Decrease confidence"
 										onclick={() => stepChangeConfidence('minus', step)}
 									>
@@ -958,47 +957,48 @@
 								</div>
 							</div>
                         </div>
-						<div class="search-input">
-							<div class="line-align-center input-text fw-bold">
+						<div class="qa-search-input">
+							<div class="qa-search-label">
 								<span>{'Similarity search'}</span>
 							</div>
-							<div class="line-align-center input-text search-toggle">
-								<div class="form-check form-switch">
+							<div class="qa-search-toggle">
+								<label class="qa-switch">
 									<input
 										type="checkbox"
-										class="form-check-input"
 										role="switch"
 										checked={textSearch}
 										disabled={disabled}
 										onchange={() => toggleTextSearch()}
 									/>
-								</div>
+									<span class="qa-switch-slider"></span>
+								</label>
 							</div>
-							<div class="line-align-center input-text fw-bold">
+							<div class="qa-search-label">
 								<span>{'Keyword search'}</span>
 							</div>
 						</div>
 						{#if !textSearch}
-						<div class="d-flex align-items-center gap-2">
+						<div class="qa-exact-search">
 							<input
 								type="checkbox"
-								class="form-check-input m-0"
+								class="qa-checkbox"
 								id="exact-search-check"
 								disabled={disabled}
 								bind:checked={isExactSearch}
 							/>
-							<label class="form-check-label input-text fw-bold mb-0" for="exact-search-check">
+							<label class="qa-search-label" for="exact-search-check">
 								Exact search
 							</label>
 						</div>
 						{/if}
-                        <div class="line-align-center">
+                        <div class="qa-search-input">
 							<button
-								class="btn btn-primary"
+								type="button"
+								class="qa-btn qa-btn-primary"
 								disabled={disableSearchBtn}
 								onclick={() => search()}
 							>
-								{'Search'}
+								<span>{'Search'}</span>
 							</button>
                         </div>
                     </div>
@@ -1011,172 +1011,177 @@
 						bind:sortOrder={sortOrder}
 						disabled={disabled}
 					/> -->
-				
+
 					{#if isSearching}
-						<div class="knowledge-loader mt-5">
-							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+						<div class="qa-loader">
+							<LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
 						</div>
 					{:else if searchDone && (!items || items.length === 0)}
-						<div class="mt-5 text-center">
-							<h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+						<div class="qa-empty">
+							<h4>{"Ehhh, no idea..."}</h4>
 						</div>
 					{/if}
 			  	</div>
 			</div>
 		{/if}
-		<div class="d-md-flex mt-5">
-			<div class="w-100">
-				<div class="card">
-					<div class="card-body">
-						<div class="mt-2 knowledge-table-header">
-							{#if totalDataCount != null && totalDataCount != undefined}
-								<div class="knowledge-count line-align-center text-muted font-size-12">
-									{`Total data: ${Number(totalDataCount).toLocaleString("en-US")}`}
+		<div class="qa-table-section">
+			<div class="qa-card">
+				<div class="qa-card-body">
+					<div class="qa-table-header">
+						{#if totalDataCount != null && totalDataCount != undefined}
+							<div class="qa-table-count">
+								{`Total data: ${formatNumber(totalDataCount)}`}
+							</div>
+						{/if}
+						<div class="qa-table-toolbar">
+							<div class="qa-toolbar-left">
+								<h5 class="qa-table-title">
+									<div>{$_('Knowledges')}</div>
+								</h5>
+								<div
+									class="qa-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Add knowledge"
+								>
+                                    <button
+                                        type="button"
+                                        class="qa-btn-soft qa-btn-soft-primary"
+										disabled={disabled}
+										aria-label="Add knowledge"
+                                        onclick={() => onKnowledgeCreate()}
+                                    >
+                                        <i class="mdi mdi-plus"></i>
+                                    </button>
 								</div>
-							{/if}
-							<div class="d-flex flex-wrap mb-3 justify-content-between">
-								<div class="action-container-padding d-flex" style="gap: 5px;">
-									<h5 class="knowledge-header-text font-size-16">
-										<div>{$_('Knowledges')}</div>
-									</h5>
-									<div
-										class="line-align-center"
+								<div
+									class="qa-icon-wrap"
+									data-bs-toggle="tooltip"
+									data-bs-placement="top"
+									title="Delete all data"
+								>
+                                    <button
+                                        type="button"
+                                        class="qa-btn-soft qa-btn-soft-danger"
+										disabled={disabled}
+										aria-label="Delete all data"
+                                        onclick={() => onKnowledgeDeleteAll()}
+                                    >
+                                        <i class="mdi mdi-minus"></i>
+                                    </button>
+								</div>
+							</div>
+							<div class="qa-toolbar-right">
+								{#if selectedCollection}
+								<div class="qa-icon-wrap">
+									<button
+										type="button"
+										class="qa-btn-soft qa-btn-soft-primary"
 										data-bs-toggle="tooltip"
 										data-bs-placement="top"
-										title="Add knowledge"
+										title="Create/delete payload indexes"
+										onclick={() => toggleIndexModal()}
 									>
-                                        <button
-                                            class="btn btn-sm btn-soft-primary knowledge-btn-icon"
-											disabled={disabled}
-											aria-label="Add knowledge"
-                                            onclick={() => onKnowledgeCreate()}
-                                        >
-                                            <i class="mdi mdi-plus"></i>
-                                        </button>
+										Index
+									</button>
+								</div>
+								{/if}
+
+								<div class="qa-collection-dropdown-wrap">
+									<div class="qa-collection-dropdown">
+										<Select
+											tag={'kn-qa-collection-select'}
+											placeholder={'Select Collection'}
+											searchMode
+											selectedValues={selectedCollection ? [selectedCollection] : []}
+											options={collections}
+											onselect={e => changeCollection(e)}
+										/>
 									</div>
+								</div>
+								<div class="qa-collection-actions">
 									<div
-										class="line-align-center"
+										class="qa-icon-wrap"
 										data-bs-toggle="tooltip"
 										data-bs-placement="top"
-										title="Delete all data"
+										title="Add collection"
 									>
-                                        <button
-                                            class="btn btn-sm btn-soft-danger knowledge-btn-icon"
-											disabled={disabled}
-											aria-label="Delete all data"
-                                            onclick={() => onKnowledgeDeleteAll()}
-                                        >
-                                            <i class="mdi mdi-minus"></i>
-                                        </button>
-									</div>
-								</div>
-								<div class="collection-action-container action-container-padding">
-									{#if selectedCollection}
-									<div class="line-align-center">
 										<button
-											class="btn btn-sm btn-soft-primary"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="Create/delete payload indexes"
-											onclick={() => toggleIndexModal()}
+											type="button"
+											class="qa-btn-soft qa-btn-soft-primary"
+											disabled={disableBase}
+											aria-label="Add collection"
+											onclick={() => toggleCollectionCreate()}
 										>
-											Index
+											<i class="mdi mdi-plus"></i>
 										</button>
 									</div>
-									{/if}
-
-									<div class="collection-dropdown-container">
-										<div class="line-align-center collection-dropdown">
-											<Select
-												tag={'kn-qa-collection-select'}
-												placeholder={'Select Collection'}
-												searchMode
-												selectedValues={selectedCollection ? [selectedCollection] : []}
-												options={collections}
-												onselect={e => changeCollection(e)}
-											/>
-										</div>
-									</div>
-									<div class="collection-add-container">
-										<div
-											class="line-align-center"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="Add collection"
-										>
-											<button
-												class="btn btn-sm btn-soft-primary collection-action-btn"
-												disabled={disableBase}
-												aria-label="Add collection"
-												onclick={() => toggleCollectionCreate()}
-											>
-												<i class="mdi mdi-plus"></i>
-											</button>
-										</div>
-										<div
-											class="line-align-center"
-											data-bs-toggle="tooltip"
-											data-bs-placement="top"
-											title="Delete collection"
-										>
-											<button
-												class="btn btn-sm btn-soft-danger collection-action-btn"
-												disabled={disabled}
-												aria-label="Delete collection"
-												onclick={() => deleteCollection()}
-											>
-												<i class="mdi mdi-minus"></i>
-											</button>
-										</div>
-									</div>
-								</div>
-							</div>
-
-							<hr class="mt-2" />
-
-							<div class="table-responsive knowledge-table">
-								<table class="table align-middle table-nowrap table-hover mb-0">
-									<thead>
-										<tr>
-											<th scope="col">{$_('Question')}</th>
-											<th scope="col">{$_('Answer')}</th>
-											<th></th>
-										</tr>
-									</thead>
-									<tbody>
-										{#each items as item, idx (idx)}
-                                            <VectorItem
-												collection={selectedCollection}
-												knowledgeType={knowledgeType}
-												item={item}
-												open={isFromSearch && idx === 0}
-												ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
-												onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
-											/>
-										{/each}
-									</tbody>
-								</table>
-
-								{#if isLoadingMore}
-									<div class="knowledge-loader mt-4">
-										<Loader size={25} disableDefaultStyles />
-									</div>
-								{:else if !!nextId}
-									<div class="mt-4 text-center">
+									<div
+										class="qa-icon-wrap"
+										data-bs-toggle="tooltip"
+										data-bs-placement="top"
+										title="Delete collection"
+									>
 										<button
-											class="btn btn-soft-primary"
+											type="button"
+											class="qa-btn-soft qa-btn-soft-danger"
 											disabled={disabled}
-											onclick={() => loadMore()}
+											aria-label="Delete collection"
+											onclick={() => deleteCollection()}
 										>
-											{'Load more'}
+											<i class="mdi mdi-minus"></i>
 										</button>
 									</div>
-								{/if}
+								</div>
 							</div>
 						</div>
+
+						<hr class="qa-divider" />
+
+						<div class="qa-table-wrap">
+							<table class="qa-table">
+								<thead>
+									<tr>
+										<th scope="col">{$_('Question')}</th>
+										<th scope="col">{$_('Answer')}</th>
+										<th></th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each items as item, idx (idx)}
+                                        <VectorItem
+											collection={selectedCollection}
+											knowledgeType={knowledgeType}
+											item={item}
+											open={isFromSearch && idx === 0}
+											ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
+											onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
+										/>
+									{/each}
+								</tbody>
+							</table>
+
+							{#if isLoadingMore}
+								<div class="qa-loader qa-loader-sm">
+									<Loader size={25} disableDefaultStyles />
+								</div>
+							{:else if !!nextId}
+								<div class="qa-load-more-wrap">
+									<button
+										type="button"
+										class="qa-btn-soft qa-btn-soft-primary"
+										disabled={disabled}
+										onclick={() => loadMore()}
+									>
+										{'Load more'}
+									</button>
+								</div>
+							{/if}
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/knowledge-base/relationships/+page.svelte b/src/routes/page/knowledge-base/relationships/+page.svelte
index 35ac78ea..dd0d1731 100644
--- a/src/routes/page/knowledge-base/relationships/+page.svelte
+++ b/src/routes/page/knowledge-base/relationships/+page.svelte
@@ -65,16 +65,16 @@
 <HeadTitle title={$_('Relation Knowledge')} />
 <Breadcrumb pagetitle={$_('Relation Knowledge')} title={$_('Knowledge Base')}/>
 
-<div class="d-xl-flex">
-	<div class="w-100">
+<div class="rel-page">
+	<div class="rel-page-col">
         {#if showDemo}
             <div
                 in:fly={{ y: -10, duration: 500 }}
                 out:fly={{ y: -10, duration: 200 }}
             >
-                <div class="knowledge-search-container mb-4">
+                <div class="rel-search-card">
                     <textarea
-                        class='form-control knowledge-textarea'
+                        class="rel-textarea"
                         rows={5}
                         maxlength={maxLength}
                         disabled={isSearching}
@@ -82,40 +82,42 @@
                         bind:value={text}
                         onkeydown={(e) => pressKey(e)}
                     ></textarea>
-                    <div class="text-secondary text-end text-count">
-                        {text?.length || 0}/{maxLength}
+                    <div class="rel-meta-row">
+                        <span class="rel-meta-count">{text?.length || 0}/{maxLength}</span>
                     </div>
-                
-                    <div class="mt-2 text-end">
+
+                    <div class="rel-search-footer">
                         <button
-                            class="btn btn-primary"
+                            type="button"
+                            class="rel-btn rel-btn-primary"
                             disabled={!text || util.trim(text).length === 0 || isSearching}
                             onclick={() => search()}
                         >
-                            {'Search'}
+                            <span>{'Search'}</span>
                         </button>
                     </div>
-                
+
                     {#if isSearching}
-                        <div class="knowledge-loader mt-4">
-                            <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
+                        <div class="rel-loader">
+                            <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--color-primary)'} />
                         </div>
                     {:else if searchDone && !!result}
-                        <div class="graph-searh-result-container mt-3">
-                            <div class="text-primary fw-bold graph-result-header">
+                        <div class="rel-result-container">
+                            <div class="rel-result-header">
                                 {'Answer:'}
                             </div>
-                            <div class="graph-result-body mt-2">
+                            <div class="rel-result-body">
                                 {result}
                             </div>
                         </div>
                     {:else if searchDone && !result}
-                        <div class="mt-3 text-center">
-                            <h4 class="text-secondary">{"Ehhh, no idea..."}</h4>
+                        <div class="rel-empty">
+                            <h4>{"Ehhh, no idea..."}</h4>
                         </div>
                     {/if}
                 </div>
             </div>
         {/if}
     </div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index 70d62eac..c14737cc 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -13,7 +13,8 @@
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
-		goToUrl
+		goToUrl,
+		formatNumber
 	} from '$lib/helpers/utils/common';
 
 	const firstPage = 1;
@@ -146,5 +147,24 @@
 <HeadTitle title={$_('Plugin')} />
 <Breadcrumb title={$_('Plugin')} pagetitle={$_('List')} />
 
-<Plugins plugins={plugins.items} />
-<PlainPagination pagination={pager} pageTo={pageTo} />
\ No newline at end of file
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex items-center gap-3">
+					<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+						<i class="mdi mdi-puzzle-outline text-xl"></i>
+					</span>
+					<div class="grow">
+						<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Plugin')} {$_('List')}</h5>
+						<p class="mb-0 text-xs text-muted">{formatNumber(pager.count)} {pager.count === 1 ? 'plugin' : 'plugins'} total</p>
+					</div>
+				</div>
+			</div>
+			<div class="p-4 sm:p-6">
+				<Plugins plugins={plugins.items} />
+				<PlainPagination pagination={pager} pageTo={pageTo} />
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/plugin/plugin-list.svelte b/src/routes/page/plugin/plugin-list.svelte
index 06006ad4..a1eac843 100644
--- a/src/routes/page/plugin/plugin-list.svelte
+++ b/src/routes/page/plugin/plugin-list.svelte
@@ -62,60 +62,103 @@
 	}
 </script>
 
-<div class="row">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 	{#each plugins as item}
-		<div class="col-xl-3 col-md-6" style="margin-bottom: 10px;">
-			<div class="card" style="height: 100%">
-				<div class="card-body d-flex flex-column justify-content-between">
-					<div class="favorite-icon">
-						<div><i class="uil uil-heart-alt fs-18"></i></div>
+		<div class="plugin-card group relative flex flex-col overflow-hidden rounded-2xl bg-white shadow-md ring-1 ring-black/5 transition-all duration-200 hover:-translate-y-1 hover:shadow-xl dark:bg-gray-800 dark:ring-white/10">
+			<!-- Gradient accent strip -->
+			<div class="h-1 bg-linear-to-r from-primary to-primary-hover"></div>
+
+			<div class="flex grow flex-col p-5">
+				<!-- Header: icon + favorite -->
+				<div class="mb-4 flex items-start justify-between">
+					<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 ring-1 ring-primary/15">
+						<img src={item.icon_url} alt="{item.name}" class="h-7 w-7 object-contain" />
+					</div>
+					<button
+						type="button"
+						class="inline-flex h-8 w-8 items-center justify-center rounded-full text-gray-300 transition-colors hover:bg-primary/10 hover:text-primary dark:text-gray-500"
+						aria-label="Favorite"
+					>
+						<i class="uil uil-heart-alt text-lg"></i>
+					</button>
+				</div>
+
+				<!-- Title -->
+				<div class="mb-3">
+					<div class="text-base font-semibold text-dark dark:text-gray-100">{item.name}</div>
+					<div class="text-xs uppercase tracking-wider text-muted">plugin</div>
+				</div>
+
+				<!-- Description -->
+				<p
+					class="mb-4 line-clamp-3 min-h-[60px] text-sm text-muted"
+					title={item.description}
+				>
+					{item.description}
+				</p>
+
+				<!-- Meta -->
+				<div class="mb-4 space-y-1.5 text-xs text-muted">
+					<div class="flex items-center gap-1.5">
+						<i class="mdi mdi-map-marker text-sm"></i>
+						<span class="truncate" title={item.assembly}>{item.assembly}</span>
 					</div>
-					<img src={item.icon_url} alt="{item.name}" height="35" width="35" class="mb-3" />
-					<h5 class="fs-17 mb-2">
-						<div class="text-dark">{item.name}</div>
-						<small class="text-muted fw-normal">plugin</small>
-					</h5>
-					<ul class="list-inline mb-0">
-						<li>
-							<p
-								class="text-muted fs-14 mb-1 truncate-text"
-								style="height: 60px;"
-								data-bs-toggle="tooltip"
-								data-bs-placement="top"
-								title={item.description}
-							>
-								{item.description}
-							</p>
-						</li>
-						{' '}
-						<li>
-							<p class="text-muted fs-14 mb-0"><i class="mdi mdi-map-marker"></i> {item.assembly}</p>
-						</li>
-						<li>
-							<p class="text-muted fs-14 mb-0"><i class="uil uil-wallet"></i> $0.0 / month</p>
-						</li>
-					</ul>
-					<div class="mt-3 hstack gap-2">
-						<span class="badge rounded-1 badge-soft-{item.enabled ? 'success' : 'danger'}">{item.enabled ? $_("Enabled") : $_("Disabled")}</span>
-						{#if item.agent_ids.length > 0}
-							<span class="badge rounded-1 badge-soft-info">{item.agent_ids.length} Agent(s)</span>
-						{/if}
-						<span class="badge rounded-1 badge-soft-info">{$_('Public')}</span>
+					<div class="flex items-center gap-1.5">
+						<i class="uil uil-wallet text-sm"></i>
+						<span>$0.0 / month</span>
 					</div>
-					<div class="mt-2 hstack pt-2 gap-2 border-top">
+				</div>
+
+				<!-- Status badges -->
+				<div class="mb-3 flex flex-wrap gap-1.5">
+					{#if item.enabled}
+						<span class="inline-flex items-center gap-1 rounded-md bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
+							<span class="h-1.5 w-1.5 rounded-full bg-success"></span>
+							{$_("Enabled")}
+						</span>
+					{:else}
+						<span class="inline-flex items-center gap-1 rounded-md bg-danger/10 px-2 py-0.5 text-xs font-medium text-danger">
+							<span class="h-1.5 w-1.5 rounded-full bg-danger"></span>
+							{$_("Disabled")}
+						</span>
+					{/if}
+					{#if item.agent_ids.length > 0}
+						<span class="inline-flex items-center rounded-md bg-info/10 px-2 py-0.5 text-xs font-medium text-info">
+							{item.agent_ids.length} {item.agent_ids.length === 1 ? 'Agent' : 'Agents'}
+						</span>
+					{/if}
+					<span class="inline-flex items-center rounded-md bg-info/10 px-2 py-0.5 text-xs font-medium text-info">{$_('Public')}</span>
+				</div>
+
+				<!-- Action buttons -->
+				<div class="mt-auto flex flex-wrap gap-2 border-t border-gray-100 pt-3 dark:border-gray-700">
+					<button
+						type="button"
+						class="inline-flex items-center gap-1 rounded-md bg-success/10 px-3 py-1.5 text-xs font-medium text-success transition-colors hover:bg-success/20"
+						onclick={() => clickView(item)}
+					>
+						<i class="bx bx-show"></i>
+						{$_('View')}
+					</button>
+					{#if item.settings_name}
+						<a
+							href="page/setting#{item.settings_name}"
+							class="inline-flex items-center gap-1 rounded-md bg-success/10 px-3 py-1.5 text-xs font-medium text-success transition-colors hover:bg-success/20"
+						>
+							<i class="bx bx-cog"></i>
+							{$_('Settings')}
+						</a>
+					{/if}
+					{#if !item.is_core}
 						<button
-							class="btn btn-soft-success btn-sm"
-							onclick={() => clickView(item)}
+							type="button"
+							class="inline-flex items-center gap-1 rounded-md bg-warning/15 px-3 py-1.5 text-xs font-medium text-warning transition-colors hover:bg-warning/25 cursor-pointer"
+							onclick={() => handlePluginStatus(item.id, item.name, !item.enabled)}
 						>
-							{$_('View')}
+							<i class="bx {item.enabled ? 'bx-x-circle' : 'bx-download'}"></i>
+							{item.enabled ? $_("Remove") : $_("Install")}
 						</button>
-						{#if item.settings_name}
-							<a href="page/setting#{item.settings_name}" class="btn btn-soft-success btn-sm">{$_('Settings')}</a>
-						{/if}
-						{#if !item.is_core}
-							<button class="btn btn-soft-warning btn-sm" onclick={() => handlePluginStatus(item.id, item.name, !item.enabled)}>{item.enabled ? $_("Remove") : $_("Install")}</button>
-						{/if}
-					</div>
+					{/if}
 				</div>
 			</div>
 		</div>
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 18b7c792..d9a85383 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -147,23 +147,29 @@
 	errorText={errorText}
 />
 
-<div class="row">
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-body border-bottom">
-				<div class="d-flex align-items-center">
-					<h5 class="mb-0 card-title flex-grow-1">{$_('Role List')}</h5>
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex items-center gap-3">
+					<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+						<i class="mdi mdi-shield-account-outline text-xl"></i>
+					</span>
+					<div class="grow">
+						<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Role List')}</h5>
+						<p class="mb-0 text-xs text-muted">{roleItems.length} {roleItems.length === 1 ? 'role' : 'roles'} configured</p>
+					</div>
 				</div>
 			</div>
-			<div class="card-body">
-				<div class="table-responsive thin-scrollbar">
-					<table class="table table-bordered align-middle nowrap roles-table">
-						<thead>
+			<div class="p-4 sm:p-6">
+				<div class="thin-scrollbar overflow-x-auto rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
+					<table class="roles-table w-full border-collapse text-sm">
+						<thead class="bg-gray-50 dark:bg-gray-700/50">
 							<tr>
 								<th scope="col">{$_('Name')}</th>
 								<th scope="col" class="role-permission-col">{$_('Permissions')}</th>
 								<th scope="col">{$_('Update Date')}</th>
-								<th scope="col">{$_('')}</th>
+								<th scope="col" class="text-center">{$_('Actions')}</th>
 							</tr>
 						</thead>
 						<tbody>
@@ -181,4 +187,5 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/roles/role-item.svelte b/src/routes/page/roles/role-item.svelte
index 1d06a022..10bc5042 100644
--- a/src/routes/page/roles/role-item.svelte
+++ b/src/routes/page/roles/role-item.svelte
@@ -222,140 +222,174 @@
 	}
 </script>
 
-<tr in:fly={{ y: -5, duration: 800 }}>
-	<td>{item.name}</td>
-	<td class="role-permission-col">
-		<div class="ellipsis">
-			{item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
+<tr in:fly={{ y: -5, duration: 800 }} class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+	<td>
+		<div class="flex items-center gap-3">
+			<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold uppercase text-primary">
+				{item.name?.charAt(0) ?? '?'}
+			</span>
+			<span class="font-medium text-dark dark:text-gray-100">{item.name}</span>
 		</div>
 	</td>
+	<td class="role-permission-col">
+		{#if item.permissions?.length > 0}
+			<div class="flex flex-wrap items-center gap-1">
+				{#each item.permissions.slice(0, 3) as perm}
+					<span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">{perm}</span>
+				{/each}
+				{#if item.permissions.length > 3}
+					<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+						+{item.permissions.length - 3} more
+					</span>
+				{/if}
+			</div>
+		{:else}
+			<span class="text-muted italic">N/A</span>
+		{/if}
+	</td>
 	<td>
-		{item.update_date != null ? moment.utc(item.update_date).local().format('MMM D YYYY, hh:mm A') : 'N/A'}
+		<span class="inline-flex items-center gap-1.5 text-muted">
+			<i class="mdi mdi-clock-outline text-base"></i>
+			{item.update_date != null ? moment.utc(item.update_date).local().format('MMM D YYYY, hh:mm A') : 'N/A'}
+		</span>
 	</td>
 	<td>
-		<ul class="list-unstyled hstack gap-1 mb-0" style="justify-content: center;">
-			<li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
-				<button
-					type="button"
-					class="btn btn-sm btn-soft-warning"
-					disabled={disabled}
-					onclick={() => toggleRoleDetail()}
-					aria-label="Edit"
-				>
-					<i class="bx bxs-edit"></i>
-				</button>
-			</li>
-		</ul>
+		<div class="flex justify-center">
+			<button
+				type="button"
+				class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-warning/15 text-warning transition-all hover:scale-105 hover:bg-warning/25 disabled:cursor-not-allowed disabled:opacity-50"
+				disabled={disabled}
+				onclick={() => toggleRoleDetail()}
+				aria-label={open ? 'Collapse' : 'Edit'}
+				title={open ? 'Collapse' : 'Edit'}
+			>
+				<i class="bx {open ? 'bx-chevron-up' : 'bxs-edit'}"></i>
+			</button>
+		</div>
 	</td>
 </tr>
 
 {#if open}
 	<tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
 		{#if isLoading}
-			<td colspan="12">
+			<td colspan="12" class="p-6">
 				<Loader disableDefaultStyles size={30} containerStyles={'display: flex; justify-content: center;'} />
 			</td>
 		{:else}
-			<td colspan="12">
-				<div class="role-detail">
-					<div class="edit-btn">
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							class="text-primary clickable"
-							data-bs-toggle="tooltip"
-							data-bs-placement="top"
+			<td colspan="12" class="!whitespace-normal !p-3">
+				<div class="role-detail relative rounded-lg border-l-4 border-primary bg-primary/5 p-5 dark:bg-primary/10">
+					<!-- Save button -->
+					<div class="edit-btn absolute right-4 top-4">
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							title="Save"
 							onclick={() => save()}
 						>
 							<i class="mdi mdi-content-save-all"></i>
-						</div>
+							<span>Save</span>
+						</button>
 					</div>
-					<ul class="basic-info">
+
+					<!-- Name section -->
+					<ul class="basic-info m-0 list-none p-0">
 						<li>
-							<div class="wrappable">
-								<span class="fw-bold text-primary">{'Name:'}</span>
-								<span>{item.name}</span>
+							<div class="wrappable mb-3 flex items-center gap-2">
+								<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-account-key-outline text-base"></i>
+									Name:
+								</span>
+								<span class="text-sm font-medium text-dark dark:text-gray-100">{item.name}</span>
 							</div>
 						</li>
 					</ul>
-					<ul>
+
+					<!-- Permissions section -->
+					<ul class="m-0 list-none p-0">
 						<li>
-							<div class="role-permission-container">
-								<div class="fw-bold text-primary">{'Permissions:'}</div>
-								<div class="permission-wrapper">
+							<div class="role-permission-container flex flex-col gap-2 sm:flex-row sm:items-start">
+								<div class="inline-flex shrink-0 items-center gap-1.5 pt-2 text-sm font-semibold text-primary sm:min-w-[110px]">
+									<i class="mdi mdi-key-variant text-base"></i>
+									Permissions:
+								</div>
+								<div class="permission-wrapper flex flex-wrap items-center gap-2">
 									{#each innerItem.permissions as _, index}
-										<div class="edit-wrapper">
+										<div class="edit-wrapper relative">
 											<input
 												type="text"
-												class="form-control edit-text-box"
+												class="edit-text-box h-8 w-44 rounded-full border border-gray-200 bg-white pl-3 pr-8 text-xs text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
 												bind:value={innerItem.permissions[index]}
 											/>
-											<div class="line-align-center">
-												<i
-													class="bx bxs-no-entry text-danger clickable"
-													role="link"
-													tabindex="0"
-													onkeydown={() => {}}
-													onclick={() => deletePermission(index)}
-												></i>
-											</div>
+											<button
+												type="button"
+												class="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-danger transition-colors hover:bg-danger/10"
+												aria-label="Remove permission"
+												onclick={() => deletePermission(index)}
+											>
+												<i class="bx bxs-no-entry"></i>
+											</button>
 										</div>
 									{/each}
 									{#if innerItem.permissions?.length < 5}
-										<div class="list-add line-align-center">
-											<i
-												class="bx bx bx-list-plus text-primary clickable"
-												role="link"
-												tabindex="0"
-												onkeydown={() => {}}
-												onclick={() => addPermission()}
-											></i>
-										</div>
+										<button
+											type="button"
+											class="list-add inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary transition-all hover:scale-105 hover:bg-primary/20"
+											aria-label="Add permission"
+											onclick={() => addPermission()}
+										>
+											<i class="bx bx-list-plus text-lg"></i>
+										</button>
 									{/if}
 								</div>
 							</div>
 						</li>
 					</ul>
 
+					<!-- Agent permissions matrix -->
 					{#if innerActions.length > 0}
-						<div class="role-agent-container">
-							<div class="action-row action-title">
-								<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
-									{'Agent'}
-								</div>
-								{#each allActions as title}
-									<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
-										<div>{title.name}</div>
-										<div>
+						<div class="role-agent-container mt-5">
+							<div class="mb-3 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+								<i class="mdi mdi-shield-key-outline text-base"></i>
+								Agent Permissions
+							</div>
+							<div class="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+								<!-- Header row -->
+								<div class="action-row action-title flex border-b-2 border-primary/40 bg-primary/5 dark:bg-primary/20">
+									<div class="action-col action-title-wrapper flex items-center justify-center px-2 py-3 text-xs font-bold uppercase tracking-wider text-dark dark:text-gray-100" style={colStyle}>
+										Agent
+									</div>
+									{#each allActions as title}
+										<div class="action-col action-title-wrapper flex flex-col items-center justify-center gap-1 px-2 py-3 text-xs font-bold uppercase tracking-wider text-dark dark:text-gray-100" style={colStyle}>
+											<div>{title.name}</div>
 											<input
 												type="checkbox"
-												class="form-check-input action-center"
+												class="action-checkbox"
 												checked={title.checked}
 												onchange={e => checkAll(e, title)}
 											/>
 										</div>
-									</div>
-								{/each}
-							</div>
-							<div class="action-row-wrapper">
-								{#each innerActions as agentActionItem}
-									<div class="action-row">
-										<div class="action-col fw-bold" style={colStyle}>
-											{agentActionItem.agent_name}
-										</div>
-										{#each agentActionItem.actions as actionItem}
-											<div class="action-col action-center" style={colStyle}>
-												<input
-													type="checkbox"
-													class="form-check-input action-center"
-													checked={actionItem.checked}
-													onchange={e => checkAction(e, agentActionItem, actionItem)}
-												/>
+									{/each}
+								</div>
+								<!-- Body rows -->
+								<div class="action-row-wrapper max-h-[300px] overflow-y-auto">
+									{#each innerActions as agentActionItem, rowIdx}
+										<div class="action-row flex border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40 {rowIdx === 0 ? '!border-t-0' : ''}">
+											<div class="action-col flex items-center px-3 py-2 text-sm font-medium text-dark dark:text-gray-100" style={colStyle}>
+												{agentActionItem.agent_name}
 											</div>
-										{/each}
-									</div>
-								{/each}
+											{#each agentActionItem.actions as actionItem}
+												<div class="action-col action-center flex items-center justify-center px-2 py-2" style={colStyle}>
+													<input
+														type="checkbox"
+														class="action-checkbox"
+														checked={actionItem.checked}
+														onchange={e => checkAction(e, agentActionItem, actionItem)}
+													/>
+												</div>
+											{/each}
+										</div>
+									{/each}
+								</div>
 							</div>
 						</div>
 					{/if}
diff --git a/src/routes/page/setting/+page.svelte b/src/routes/page/setting/+page.svelte
index cecf3c71..0bc7c4e1 100644
--- a/src/routes/page/setting/+page.svelte
+++ b/src/routes/page/setting/+page.svelte
@@ -7,6 +7,7 @@
     import { getSettings, getSettingDetail } from '$lib/services/setting-service';
     import { JSONEditor } from 'svelte-jsoneditor';
     import { refreshAgents } from '$lib/services/agent-service';
+    import { formatNumber } from '$lib/helpers/utils/common';
     import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 
     const duration = 3000;
@@ -89,39 +90,43 @@
     {errorText}
 />
 
-<div class="card">
-    <div class="card-body">
-        <h4 class="card-title">{$_('System & Plugin Settings')}</h4>
-        <p class="card-title-desc"></p>
+<div class="mb-4 rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+        <div class="flex items-center gap-3">
+            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+                <i class="mdi mdi-tune-vertical text-xl"></i>
+            </span>
+            <div class="grow">
+                <h4 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('System & Plugin Settings')}</h4>
+                <p class="mb-0 text-xs text-muted">{formatNumber(settings.length)} {settings.length === 1 ? 'configuration section' : 'configuration sections'}</p>
+            </div>
+        </div>
+    </div>
 
-        <ul class="nav nav-tabs nav-tabs-default nav-justified">
-            {#each settings as tab}
-                <li class="nav-item" id={tab}>
+    <div class="p-4 sm:p-6">
+        <!-- Tab strip -->
+        <div class="thin-scrollbar -mx-1 mb-4 overflow-x-auto">
+            <div class="flex min-w-max gap-1 rounded-lg bg-gray-50 p-1 ring-1 ring-gray-100 dark:bg-gray-700/50 dark:ring-gray-700">
+                {#each settings as tab}
                     <button
-                        class="nav-link {selectedTab === tab ? 'active' : ''}"
-                        style="cursor: pointer"
+                        type="button"
+                        id={tab}
+                        class="setting-tab {selectedTab === tab ? 'is-active' : ''}"
                         onclick={() => handleGetSettingDetail(tab)}
                     >
-                        <span class="d-block d-sm-none">
-                            <i class="fas fa-home"></i>
-                        </span>
-                        <span class="d-none d-sm-block">{tab}</span>
+                        <i class="mdi mdi-cog-outline text-base leading-none sm:hidden"></i>
+                        <span class="hidden sm:inline">{tab}</span>
                     </button>
-                </li>
-            {/each}
-        </ul>
+                {/each}
+            </div>
+        </div>
 
-        <div class="tab-content p-3 text-muted">
+        <!-- Editor -->
+        <div class="overflow-hidden rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
             {#each settings as tab}
                 {#if selectedTab === tab}
-                    <div class="tab-pane active">
-                        <div class="row">
-                            <div class="col-sm-12">
-                                <div class="my-json-editor">
-                                    <JSONEditor bind:content />
-                                </div>
-                            </div>
-                        </div>
+                    <div class="my-json-editor">
+                        <JSONEditor bind:content />
                     </div>
                 {/if}
             {/each}
@@ -129,21 +134,35 @@
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <h4 class="card-title">{$_('Migrate agents from file repository to MongoDB')}</h4>
-        <p class="card-title-desc"></p>
+<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+    <div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+        <div class="flex items-center gap-3">
+            <span class="flex h-10 w-10 items-center justify-center rounded-full bg-warning/15 text-warning">
+                <i class="mdi mdi-database-export-outline text-xl"></i>
+            </span>
+            <div class="grow">
+                <h4 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Migrate agents from file repository to MongoDB')}</h4>
+                <p class="mb-0 text-xs text-muted">One-time migration. All agents will be copied to the MongoDB datastore.</p>
+            </div>
+        </div>
+    </div>
 
-        <button class="btn btn-primary" onclick={() => readyToRefresh()} disabled={isLoading}>
-            <i class="bx bx-copy"></i> {$_('Start Migration')}
-        </button>
+    <div class="p-4 sm:p-6">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <div class="inline-flex items-center gap-2 text-sm text-muted">
+                <i class="mdi mdi-alert-circle-outline shrink-0 text-base leading-none text-warning"></i>
+                <span>This action cannot be undone. Make sure you have a backup before proceeding.</span>
+            </div>
+            <button
+                type="button"
+                class="inline-flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-60"
+                onclick={() => readyToRefresh()}
+                disabled={isLoading}
+            >
+                <i class="bx bx-copy"></i>
+                {$_('Start Migration')}
+            </button>
+        </div>
     </div>
 </div>
 
-<style>
-    .my-json-editor {
-      /* define a custom theme color */
-      --jse-theme-color: var(--bs-primary);
-      --jse-theme-color-highlight: #687177;
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 4b0e43c7..8b436b97 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -6,10 +6,12 @@
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import TablePagination from '$lib/common/shared/TablePagination.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { getAgentTasks, updateAgentTask } from '$lib/services/task-service';
 	import { AgentTaskStatus } from '$lib/helpers/enums';
+	import { formatNumber } from '$lib/helpers/utils/common';
 	import TaskItem from './task-item.svelte';
 	
 
@@ -57,6 +59,11 @@
 		{ key: k, value: v }
 	));
 
+	/** @type {import('$commonTypes').LabelValuePair[]} */
+	let statusSelectOptions = $derived(statusOptions.map(op => (
+		{ label: $_(op.key), value: `${op.value}` }
+	)));
+
     onMount(async () => {
 		isLoading = true;
 		await getPagedAgentTasks();
@@ -145,9 +152,11 @@
 	 */
 	 function changeOption(e, type) {
 		if (type === 'status') {
+			// Select fires `{ detail: { selecteds: [{ label, value }] } }`.
+			const selectedValues = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
 			searchOption = {
 				...searchOption,
-				status: e.target.value || null
+				status: selectedValues.length > 0 ? selectedValues[0] : null
 			};
 		}
 	}
@@ -231,57 +240,82 @@
 	isComplete={isComplete}
 />
 
-<div class="row">
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-body border-bottom">
-				<div class="d-flex align-items-center">
-					<h5 class="mb-0 card-title flex-grow-1">{$_('Task List')}</h5>
-					<div class="flex-shrink-0">
-						<div class="dropdown d-inline-block">
-							<button type="button" class="btn" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" aria-label="More actions">
-								<i class="mdi mdi-dots-vertical"></i>
-							</button>
-							<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-								<li><button type="button" class="dropdown-item">{$_('Action')}</button></li>
-							</ul>
-						</div>
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex items-center gap-3">
+					<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+						<i class="mdi mdi-clipboard-list-outline text-xl"></i>
+					</span>
+					<div class="grow">
+						<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('Task List')}</h5>
+						<p class="mb-0 text-xs text-muted">{formatNumber(pager.count)} {pager.count === 1 ? 'task' : 'tasks'} total</p>
 					</div>
+					<details class="relative">
+						<summary
+							class="inline-flex h-9 w-9 cursor-pointer list-none items-center justify-center rounded-full text-muted transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 [&::-webkit-details-marker]:hidden"
+							aria-label="More actions"
+						>
+							<i class="mdi mdi-dots-vertical text-lg"></i>
+						</summary>
+						<ul class="absolute right-0 z-10 mt-1 min-w-[140px] rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+							<li>
+								<button
+									type="button"
+									class="block w-full px-3 py-2 text-left text-sm text-dark transition-colors hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700"
+								>
+									{$_('Action')}
+								</button>
+							</li>
+						</ul>
+					</details>
 				</div>
 			</div>
-			<div class="card-body border-bottom">
-				<div class="row g-3">
-					<div class="col-xxl-5 col-lg-5">
-						<input
-							type="search"
-							class="form-control"
-							id="searchTableList"
-							placeholder={$_('Search for ...')}
-						/>
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-12">
+					<div class="lg:col-span-5">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-magnify text-base leading-none"></i>
+							</span>
+							<input
+								type="search"
+								id="searchTableList"
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								placeholder={$_('Search for ...')}
+							/>
+						</div>
 					</div>
-					<div class="col-xxl-5 col-lg-5">
-						<select class="form-select" id="idStatus" value={searchOption.status} onchange={e => changeOption(e, 'status')}>
-							<option value={null}>{$_('Select Status')}</option>
-							{#each statusOptions as op}
-								<option value={`${op.value}`} selected={op.value === searchOption.status}>{$_(`${op.key}`)}</option>
-							{/each}
-						</select>
+					<div class="lg:col-span-5">
+						<Select
+							tag={'task-status-select'}
+							placeholder={$_('Select Status')}
+							selectedValues={searchOption.status ? [`${searchOption.status}`] : []}
+							options={statusSelectOptions}
+							onselect={e => changeOption(e, 'status')}
+						>
+							{#snippet prefixIcon()}
+								<i class="mdi mdi-filter-variant"></i>
+							{/snippet}
+						</Select>
 					</div>
-					<div class="col-xxl-2 col-lg-2">
+					<div class="lg:col-span-2">
 						<button
-							class="btn btn-soft-secondary w-100"
 							type="button"
+							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							onclick={e => searchTasks(e)}
 						>
-							<i class="mdi mdi-filter-outline align-middle"></i> {$_('Filter')}
+							<i class="mdi mdi-filter-outline align-middle"></i>
+							<span>{$_('Filter')}</span>
 						</button>
 					</div>
 				</div>
 			</div>
-			<div class="card-body">
-				<div class="table-responsive">
-					<table class="table table-bordered align-middle nowrap">
-						<thead>
+			<div class="p-4 sm:p-6">
+				<div class="thin-scrollbar overflow-x-auto rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
+					<table class="tasks-table w-full border-collapse text-sm">
+						<thead class="bg-gray-50 dark:bg-gray-700/50">
 							<tr>
 								<th scope="col">{$_('Name')}</th>
 								<th scope="col">{$_('Description')}</th>
@@ -290,7 +324,7 @@
 								<th scope="col">{$_('Updated Time')}</th>
 								<th scope="col">{$_('Enabled')}</th>
 								<th scope="col">{$_('Status')}</th>
-								<th scope="col">{$_('Action')}</th>
+								<th scope="col" class="text-center">{$_('Action')}</th>
 							</tr>
 						</thead>
 						<tbody>
@@ -308,4 +342,5 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/task/task-item.svelte b/src/routes/page/task/task-item.svelte
index 801181a4..ae81a3b3 100644
--- a/src/routes/page/task/task-item.svelte
+++ b/src/routes/page/task/task-item.svelte
@@ -29,41 +29,83 @@
     }
 </script>
 
-<tr>
-    <td class="text-primary">{task.name}</td>
-    <td>{task.description}</td>
-    <td>{task.agent_name}</td>
-    <td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
-    <td>{utcToLocal(task.updated_time)}</td>
+<tr class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
     <td>
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_static_element_interactions -->
-        <span class="clickable" onclick={() => toggleTask()}>
+        <span class="font-medium text-primary">{task.name}</span>
+    </td>
+    <td>
+        <span class="text-dark dark:text-gray-100">{task.description || '—'}</span>
+    </td>
+    <td>
+        {#if task.agent_name}
+            <span class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                <i class="mdi mdi-robot-outline text-sm leading-none"></i>
+                {task.agent_name}
+            </span>
+        {:else}
+            <span class="text-muted italic">—</span>
+        {/if}
+    </td>
+    <td class="!whitespace-normal">
+        <div class="scrollbar max-h-[100px] max-w-md overflow-auto rounded-md bg-gray-50 p-2 text-xs leading-relaxed text-dark dark:bg-gray-700/50 dark:text-gray-100">
+            {@html replaceNewLine(task.content)}
+        </div>
+    </td>
+    <td>
+        <span class="text-xs text-muted">{utcToLocal(task.updated_time)}</span>
+    </td>
+    <td>
+        <button
+            type="button"
+            class="cursor-pointer"
+            onclick={() => toggleTask()}
+            aria-label={task.enabled ? 'Disable task' : 'Enable task'}
+        >
             {#if task.enabled}
-                <span class="badge bg-success">{$_("Enabled")}</span>
+                <span class="inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
+                    <span class="h-1.5 w-1.5 rounded-full bg-success"></span>
+                    {$_("Enabled")}
+                </span>
             {:else}
-                <span class="badge bg-danger">{$_("Disabled")}</span>
+                <span class="inline-flex items-center gap-1 rounded-full bg-danger/10 px-2 py-0.5 text-xs font-medium text-danger">
+                    <span class="h-1.5 w-1.5 rounded-full bg-danger"></span>
+                    {$_("Disabled")}
+                </span>
             {/if}
-        </span>
+        </button>
+    </td>
+    <td>
+        <span class="inline-flex items-center rounded-full bg-info/10 px-2 py-0.5 text-xs font-medium text-info">{task.status}</span>
     </td>
-    <td><span class="badge bg-info">{task.status}</span></td>
     <td>
-        <ul class="list-unstyled hstack gap-1 mb-0">
-            <li data-bs-toggle="tooltip" data-bs-placement="top" title="View">
-                <a href="page/task/{task.id}?agentId={task.agent_id}" target="_blank" class="btn btn-sm btn-soft-primary" aria-label="View">
-                    <i class="mdi mdi-eye-outline"></i>
-                </a>
-            </li>
-            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Save">
-                <button type="button" onclick={() => handleSaveTask()} class="btn btn-sm btn-soft-info" aria-label="Save">
-                    <i class="mdi mdi-content-save-all"></i>
-                </button>
-            </li>
-            <li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-                <button type="button" onclick={() => handleDeleteTask()} class="btn btn-sm btn-soft-danger" aria-label="Delete">
-                    <i class="mdi mdi-delete-outline"></i>
-                </button>
-            </li>
-        </ul>
+        <div class="flex items-center justify-center gap-1.5">
+            <a
+                href="page/task/{task.id}?agentId={task.agent_id}"
+                target="_blank"
+                class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary transition-all hover:scale-105 hover:bg-primary/20"
+                aria-label="View"
+                title="View"
+            >
+                <i class="mdi mdi-eye-outline"></i>
+            </a>
+            <button
+                type="button"
+                class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-info/15 text-info transition-all hover:scale-105 hover:bg-info/25"
+                onclick={() => handleSaveTask()}
+                aria-label="Save"
+                title="Save"
+            >
+                <i class="mdi mdi-content-save-all"></i>
+            </button>
+            <button
+                type="button"
+                class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-danger/10 text-danger transition-all hover:scale-105 hover:bg-danger/20"
+                onclick={() => handleDeleteTask()}
+                aria-label="Delete"
+                title="Delete"
+            >
+                <i class="mdi mdi-delete-outline"></i>
+            </button>
+        </div>
     </td>
 </tr>
\ No newline at end of file
diff --git a/src/routes/page/user/me/+page.svelte b/src/routes/page/user/me/+page.svelte
index 0b5f9562..ee9829f7 100644
--- a/src/routes/page/user/me/+page.svelte
+++ b/src/routes/page/user/me/+page.svelte
@@ -40,90 +40,127 @@
 
 <HeadTitle title={$_('My Profile')} />
 <Breadcrumb title={$_('Home')} pagetitle={$_('My Profile')} />
-<div class="row">
-	<div class="col-xl-4">
-		<div class="card overflow-hidden">
-			<div class="bg-primary-subtle">
-				<div class="row">
-					<div class="col-7">
-						<div class="text-primary p-3">
-							<h5 class="text-primary">{$_('Welcome Back !')}</h5>
-							<p>{PUBLIC_BRAND_NAME}</p>
-						</div>
+<div class="-mx-2 flex flex-wrap">
+	<div class="w-full px-2 xl:w-1/3">
+		<!-- Profile card -->
+		<div class="mb-4 overflow-hidden rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="relative bg-linear-to-br from-primary to-primary-hover px-6 pb-20 pt-6 text-white">
+				<div class="flex flex-wrap">
+					<div class="w-7/12">
+						<h5 class="text-lg font-semibold text-white">{$_('Welcome Back !')}</h5>
+						<p class="mb-0 text-sm text-white/85">{PUBLIC_BRAND_NAME}</p>
 					</div>
 				</div>
+				<!-- decorative blobs -->
+				<div class="pointer-events-none absolute -right-10 -top-10 h-32 w-32 rounded-full bg-white/10"></div>
+				<div class="pointer-events-none absolute -bottom-2 right-10 h-16 w-16 rounded-full bg-white/5"></div>
 			</div>
-			<div class="card-body pt-0">
-				<div class="row">
-					<div class="col-sm-4">
-						<div class="avatar-md profile-user-wid mb-4">
-							<FileDropZone
-								accept="image/*"
-								disableDefaultStyles
-								containerStyles={'width: 100%; height: 100%;'}
-								noDrag
-								multiple={false}
-								fileLimit={1}
-								maxSize={fileMaxSize}
-								ondrop={handleFileDrop}
-							>
-								<img
-									src={`${currentUser?.avatar && $userStore?.token ?
-										`${buildUrl(PUBLIC_SERVICE_URL, currentUser?.avatar).href}?access_token=${$userStore?.token}` : ''}`}
-									alt=""
-									class="img-thumbnail rounded-circle"
-									style="width: 100%; height: 100%;"
-									onerror={e => handleAvatarLoad(e)}
-								/>
-							</FileDropZone>
-						</div>
-						<h5 class="font-size-15 text-truncate">{currentUser?.full_name}</h5>
-						<p class="text-muted mb-0 text-truncate">{currentUser?.role ?? 'Role: N/A'}</p>
+			<div class="-mt-16 flex flex-col items-center px-6 pb-6">
+				<div class="relative h-28 w-28">
+					<FileDropZone
+						accept="image/*"
+						disableDefaultStyles
+						containerStyles={'width: 100%; height: 100%;'}
+						noDrag
+						multiple={false}
+						fileLimit={1}
+						maxSize={fileMaxSize}
+						ondrop={handleFileDrop}
+					>
+						<img
+							src={`${currentUser?.avatar && $userStore?.token ?
+								`${buildUrl(PUBLIC_SERVICE_URL, currentUser?.avatar).href}?access_token=${$userStore?.token}` : ''}`}
+							alt=""
+							class="h-full w-full cursor-pointer rounded-full border-4 border-white bg-white object-cover shadow-lg ring-1 ring-black/5 transition-transform hover:scale-[1.03] dark:border-gray-800 dark:bg-gray-700 dark:ring-white/10"
+							onerror={e => handleAvatarLoad(e)}
+						/>
+					</FileDropZone>
+					<div class="pointer-events-none absolute bottom-1 right-1 flex h-7 w-7 items-center justify-center rounded-full bg-primary text-white shadow-md ring-2 ring-white dark:ring-gray-800">
+						<i class="mdi mdi-camera-outline text-sm"></i>
 					</div>
 				</div>
+				<h5 class="mt-4 truncate text-center text-base font-semibold text-dark dark:text-gray-100">{currentUser?.full_name}</h5>
+				<span class="mt-1 inline-flex items-center gap-1 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+					<i class="mdi mdi-shield-account-outline"></i>
+					{currentUser?.role ?? 'Role: N/A'}
+				</span>
 			</div>
 		</div>
-		<div class="card">
-			<div class="card-body">
-				<h4 class="card-title mb-4">{$_('Personal Information')}</h4>
-				<div class="table-responsive">
-					<table class="table">
+		<!-- Personal Information card -->
+		<div class="mb-4 rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="p-6">
+				<h4 class="mb-4 flex items-center gap-2 text-base font-semibold text-dark dark:text-gray-100">
+					<i class="mdi mdi-account-details-outline text-xl text-primary"></i>
+					{$_('Personal Information')}
+				</h4>
+				<div class="overflow-x-auto">
+					<table class="w-full text-sm">
 						<tbody>
-							<tr>
-								<th>{$_('First Name')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 first:border-t-0 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-account-outline text-base text-primary/80"></i>
+										{$_('First Name')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted">
 									{currentUser?.first_name ?? 'N/A'}
 								</td>
 							</tr>
-							<tr>
-								<th>{$_('Last Name')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-account-circle-outline text-base text-primary/80"></i>
+										{$_('Last Name')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted">
 									{currentUser?.last_name ?? 'N/A'}
 								</td>
 							</tr>
-							<tr>
-								<th>{$_('Email')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-email-outline text-base text-primary/80"></i>
+										{$_('Email')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted break-all">
 									{currentUser?.email ?? 'N/A'}
 								</td>
 							</tr>
-							<tr>
-								<th>{$_('Account Origin')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-source-fork text-base text-primary/80"></i>
+										{$_('Account Origin')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted">
 									{currentUser?.source} {currentUser?.external_id ?? 'N/A'}
 								</td>
 							</tr>
-							<tr>
-								<th>{$_('Update Date')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-calendar-edit-outline text-base text-primary/80"></i>
+										{$_('Update Date')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted">
 									{currentUser?.update_date
 										? new Date(currentUser?.update_date).toLocaleString()
 										: 'N/A'}
 								</td>
 							</tr>
-							<tr>
-								<th>{$_('Create Date')}:</th>
-								<td>
+							<tr class="border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40">
+								<th class="py-3 pr-4 text-left align-top font-medium text-dark dark:text-gray-100">
+									<span class="inline-flex items-center gap-2">
+										<i class="mdi mdi-calendar-plus-outline text-base text-primary/80"></i>
+										{$_('Create Date')}
+									</span>
+								</th>
+								<td class="py-3 text-right text-muted">
 									{currentUser?.create_date
 										? new Date(currentUser?.create_date).toLocaleString()
 										: 'N/A'}
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index e5f45a91..f06fba4f 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -15,7 +15,8 @@
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
-		goToUrl
+		goToUrl,
+		formatNumber
 	} from '$lib/helpers/utils/common';
 
 	const duration = 3000;
@@ -236,44 +237,90 @@
 	errorText={errorText}
 />
 
-<div class="row">
-	<div class="col-lg-12">
-		<div class="card">
-			<div class="card-body border-bottom">
-				<div class="d-flex align-items-center">
-					<h5 class="mb-0 card-title flex-grow-1">{$_('User List')}</h5>
+<div class="flex flex-wrap">
+	<div class="w-full">
+		<div class="rounded-2xl bg-white shadow-xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="flex items-center gap-3">
+					<span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
+						<i class="mdi mdi-account-group-outline text-xl"></i>
+					</span>
+					<div class="grow">
+						<h5 class="mb-0 text-base font-semibold text-dark dark:text-gray-100">{$_('User List')}</h5>
+						<p class="mb-0 text-xs text-muted">{formatNumber(pager.count)} {pager.count === 1 ? 'user' : 'users'} total</p>
+					</div>
 				</div>
 			</div>
-			<div class="card-body border-bottom">
-				<div class="row g-3">
-					<div class="col-lg-3">
-						<input class="form-control" bind:value={searchOption.userName} maxlength={maxLength} placeholder={'Search user name...'} />
+			<div class="border-b border-gray-100 px-6 py-4 dark:border-gray-700">
+				<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-12">
+					<div class="lg:col-span-3">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-account-outline text-base leading-none"></i>
+							</span>
+							<input
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								bind:value={searchOption.userName}
+								maxlength={maxLength}
+								placeholder={'Search user name...'}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-3">
-						<input class="form-control" bind:value={searchOption.externalId} maxlength={maxLength} placeholder={'Search external id...'} />
+					<div class="lg:col-span-3">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-identifier text-base leading-none"></i>
+							</span>
+							<input
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								bind:value={searchOption.externalId}
+								maxlength={maxLength}
+								placeholder={'Search external id...'}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-3">
-						<input class="form-control" bind:value={searchOption.role} maxlength={maxLength} placeholder={'Search role...'} />
+					<div class="lg:col-span-3">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-shield-account-outline text-base leading-none"></i>
+							</span>
+							<input
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								bind:value={searchOption.role}
+								maxlength={maxLength}
+								placeholder={'Search role...'}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-2">
-						<input class="form-control" bind:value={searchOption.type} maxlength={maxLength} placeholder={'Search type...'} />
+					<div class="lg:col-span-2">
+						<div class="relative">
+							<span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-gray-400">
+								<i class="mdi mdi-tag-outline text-base leading-none"></i>
+							</span>
+							<input
+								class="h-10 w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 text-sm text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
+								bind:value={searchOption.type}
+								maxlength={maxLength}
+								placeholder={'Search type...'}
+							/>
+						</div>
 					</div>
-					<div class="col-lg-1">
+					<div class="lg:col-span-1">
 						<button
 							type="button"
-							class="btn btn-secondary btn-soft-secondary w-100"
+							class="inline-flex h-10 w-full items-center justify-center gap-1.5 rounded-md bg-primary px-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							onclick={() => search()}
 						>
 							<i class="mdi mdi-filter-outline align-middle"></i>
-							<span class="d-none">{$_('Filter')}</span>
+							<span class="sr-only">{$_('Filter')}</span>
 						</button>
 					</div>
 				</div>
 			</div>
-			<div class="card-body">
-				<div class="table-responsive thin-scrollbar">
-					<table class="table table-bordered align-middle nowrap users-table">
-						<thead>
+			<div class="p-4 sm:p-6">
+				<div class="thin-scrollbar overflow-x-auto rounded-lg ring-1 ring-gray-100 dark:ring-gray-700">
+					<table class="users-table w-full border-collapse text-sm">
+						<thead class="bg-gray-50 dark:bg-gray-700/50">
 							<tr>
 								<th scope="col">{$_('User Name')}</th>
 								<th scope="col">{$_('Full Name')}</th>
@@ -281,7 +328,7 @@
 								<th scope="col" class="user-plain-col">{$_('Role')}</th>
 								<th scope="col">{$_('Type')}</th>
 								<th scope="col" class="user-permission-col">{$_('Permissions')}</th>
-								<th scope="col">{$_('')}</th>
+								<th scope="col" class="text-center">{$_('Actions')}</th>
 							</tr>
 						</thead>
 						<tbody>
@@ -301,4 +348,5 @@
 			</div>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>
+
diff --git a/src/routes/page/users/user-item.svelte b/src/routes/page/users/user-item.svelte
index e8016fff..88a74819 100644
--- a/src/routes/page/users/user-item.svelte
+++ b/src/routes/page/users/user-item.svelte
@@ -5,6 +5,7 @@
 	import Swal from 'sweetalert2';
 	import lodash from "lodash";
 	import Loader from '$lib/common/spinners/Loader.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import { UserAction } from '$lib/helpers/enums';
 	import { getUserDetails } from '$lib/services/user-service';
 
@@ -61,6 +62,9 @@
 
 	let colStyle = $derived(`flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`);
 
+	/** @type {import('$commonTypes').LabelValuePair[]} */
+	let roleSelectOptions = $derived(roleOptions.map(o => ({ label: o, value: o })));
+
 	$effect(() => {
 		// Track only innerActions as a dependency
 		const currentInnerActions = innerActions;
@@ -137,7 +141,10 @@
 
 	/** @param {any} e */
 	function changeRole(e) {
-		const value = e.target.value;
+		// Select fires `{ detail: { selecteds: [{ label, value }] } }`.
+		// Single-select mode → selecteds has 0 or 1 entry.
+		const selectedValues = e?.detail?.selecteds?.map((/** @type {any} */ x) => x.value) || [];
+		const value = selectedValues.length > 0 ? selectedValues[0] : '';
 		innerItem = {
 			...innerItem,
 			role: value
@@ -250,181 +257,244 @@
 	}
 </script>
 
-<tr in:fly={{ y: -5, duration: 800 }}>
-	<td>{item.user_name}</td>
-	<td>{item.full_name}</td>
-	<td>{item.external_id}</td>
+<tr in:fly={{ y: -5, duration: 800 }} class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-700/40">
+	<td>
+		<div class="flex items-center gap-3">
+			<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold uppercase text-primary">
+				{item.user_name?.charAt(0) ?? '?'}
+			</span>
+			<span class="font-medium text-dark dark:text-gray-100">{item.user_name}</span>
+		</div>
+	</td>
+	<td class="text-dark dark:text-gray-100">{item.full_name || '—'}</td>
+	<td>
+		{#if item.external_id}
+			<span class="font-mono text-xs text-muted">{item.external_id}</span>
+		{:else}
+			<span class="text-muted italic">—</span>
+		{/if}
+	</td>
 	<td class="user-plain-col">
-		<div class="ellipsis">{item.role}</div>
+		{#if item.role}
+			<span class="inline-flex items-center rounded-full bg-info/10 px-2 py-0.5 text-xs font-medium text-info">{item.role}</span>
+		{:else}
+			<span class="text-muted italic">—</span>
+		{/if}
+	</td>
+	<td>
+		{#if item.type}
+			<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-200">{item.type}</span>
+		{:else}
+			<span class="text-muted italic">—</span>
+		{/if}
 	</td>
-	<td>{item.type}</td>
 	<td class="user-permission-col">
-		<div class="ellipsis">
-			{item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
-		</div>
+		{#if item.permissions?.length > 0}
+			<div class="flex flex-wrap items-center gap-1">
+				{#each item.permissions.slice(0, 3) as perm}
+					<span class="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">{perm}</span>
+				{/each}
+				{#if item.permissions.length > 3}
+					<span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+						+{item.permissions.length - 3} more
+					</span>
+				{/if}
+			</div>
+		{:else}
+			<span class="text-muted italic">N/A</span>
+		{/if}
 	</td>
 	<td>
-		<ul class="list-unstyled hstack gap-1 mb-0" style="justify-content: center;">
-			<li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
-				<button
-					type="button"
-					class="btn btn-sm btn-soft-warning"
-					disabled={disabled}
-					onclick={() => toggleUserDetail()}
-					aria-label="Edit"
-				>
-					<i class="bx bxs-edit"></i>
-				</button>
-			</li>
-		</ul>
+		<div class="flex justify-center">
+			<button
+				type="button"
+				class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-warning/15 text-warning transition-all hover:scale-105 hover:bg-warning/25 disabled:cursor-not-allowed disabled:opacity-50"
+				disabled={disabled}
+				onclick={() => toggleUserDetail()}
+				aria-label={open ? 'Collapse' : 'Edit'}
+				title={open ? 'Collapse' : 'Edit'}
+			>
+				<i class="bx {open ? 'bx-chevron-up' : 'bxs-edit'}"></i>
+			</button>
+		</div>
 	</td>
 </tr>
 
 {#if open}
 	<tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
 		{#if isLoading}
-			<td colspan="12">
+			<td colspan="12" class="p-6">
 				<Loader disableDefaultStyles size={30} containerStyles={'display: flex; justify-content: center;'} />
 			</td>
 		{:else}
-			<td colspan="12">
-				<div class="user-detail">
-					<div class="edit-btn">
-						<!-- svelte-ignore a11y_click_events_have_key_events -->
-						<!-- svelte-ignore a11y_no_static_element_interactions -->
-						<div
-							class="text-primary clickable"
-							data-bs-toggle="tooltip"
-							data-bs-placement="top"
+			<td colspan="12" class="!whitespace-normal !p-3">
+				<div class="user-detail relative rounded-lg border-l-4 border-primary bg-primary/5 p-5 dark:bg-primary/10">
+					<!-- Save button -->
+					<div class="edit-btn absolute right-4 top-4">
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-primary-hover"
 							title="Save"
 							onclick={() => save(item.id)}
 						>
 							<i class="mdi mdi-content-save-all"></i>
-						</div>
+							<span>Save</span>
+						</button>
 					</div>
-					<ul class="basic-info">
-						<li>
-							<div class="wrappable">
-								<span class="fw-bold text-primary">{'User name:'}</span>
-								<span>{item.user_name}</span>
+
+					<!-- Basic info -->
+					<ul class="basic-info m-0 grid grid-cols-1 gap-x-6 gap-y-3 p-0 sm:grid-cols-2">
+						<li class="list-none">
+							<div class="wrappable flex flex-wrap items-center gap-2">
+								<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-account-outline text-base"></i>
+									User name:
+								</span>
+								<span class="text-sm font-medium text-dark dark:text-gray-100">{item.user_name}</span>
 							</div>
 						</li>
 						{#if item.full_name}
-						<li>
-							<div class="wrappable">
-								<span class="fw-bold text-primary">{'Full name:'}</span>
-								<span>{item.full_name}</span>
+						<li class="list-none">
+							<div class="wrappable flex flex-wrap items-center gap-2">
+								<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-card-account-details-outline text-base"></i>
+									Full name:
+								</span>
+								<span class="text-sm font-medium text-dark dark:text-gray-100">{item.full_name}</span>
 							</div>
 						</li>
 						{/if}
 						{#if item.type}
-						<li>
-							<div class="wrappable">
-								<span class="fw-bold text-primary">{'Type:'}</span>
-								<span>{item.type}</span>
+						<li class="list-none">
+							<div class="wrappable flex flex-wrap items-center gap-2">
+								<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-tag-outline text-base"></i>
+									Type:
+								</span>
+								<span class="text-sm font-medium text-dark dark:text-gray-100">{item.type}</span>
 							</div>
 						</li>
 						{/if}
 						{#if item.source}
-						<li>
-							<div class="wrappable">
-								<span class="fw-bold text-primary">{'Source:'}</span>
-								<span>{item.source}</span>
+						<li class="list-none">
+							<div class="wrappable flex flex-wrap items-center gap-2">
+								<span class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-source-fork text-base"></i>
+									Source:
+								</span>
+								<span class="text-sm font-medium text-dark dark:text-gray-100">{item.source}</span>
 							</div>
 						</li>
 						{/if}
 						{#if item.role}
-						<li>
-							<div class="wrappable inline-edit">
-								<div class="fw-bold text-primary line-align-center">{'Role:'}</div>
+						<li class="list-none">
+							<div class="wrappable inline-edit flex flex-wrap items-center gap-2">
+								<div class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+									<i class="mdi mdi-shield-account-outline text-base"></i>
+									Role:
+								</div>
 								<div class="role-wrapper">
-									<select class="form-select role-select" value={innerItem.role} onchange={e => changeRole(e)}>
-										{#each roleOptions as option}
-											<option value={option} selected={option == innerItem.role}>{option}</option>
-										{/each}
-									</select>
+									<Select
+										tag={`user-role-select-${item.id}`}
+										placeholder={'Select role'}
+										containerClasses={'user-role-select'}
+										searchMode
+										selectedValues={innerItem.role ? [innerItem.role] : []}
+										options={roleSelectOptions}
+										onselect={e => changeRole(e)}
+									/>
 								</div>
 							</div>
 						</li>
 						{/if}
 					</ul>
-					<ul>
+
+					<!-- Permissions -->
+					<ul class="m-0 mt-5 list-none p-0">
 						<li>
-							<div class="user-permission-container">
-								<div class="fw-bold text-primary">{'Permissions:'}</div>
-								<div class="permission-wrapper">
+							<div class="user-permission-container flex flex-col gap-2 sm:flex-row sm:items-start">
+								<div class="inline-flex shrink-0 items-center gap-1.5 pt-2 text-sm font-semibold text-primary sm:min-w-[110px]">
+									<i class="mdi mdi-key-variant text-base"></i>
+									Permissions:
+								</div>
+								<div class="permission-wrapper flex flex-wrap items-center gap-2">
 									{#each innerItem.permissions as _, index}
-										<div class="edit-wrapper">
+										<div class="edit-wrapper relative">
 											<input
 												type="text"
-												class="form-control edit-text-box"
+												class="edit-text-box h-8 w-44 rounded-full border border-gray-200 bg-white pl-3 pr-8 text-xs text-dark transition-colors focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
 												bind:value={innerItem.permissions[index]}
 											/>
-											<div class="line-align-center">
-												<i
-													class="bx bxs-no-entry text-danger clickable"
-													role="link"
-													tabindex="0"
-													onkeydown={() => {}}
-													onclick={() => deletePermission(index)}
-												></i>
-											</div>
+											<button
+												type="button"
+												class="absolute right-1 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full text-danger transition-colors hover:bg-danger/10"
+												aria-label="Remove permission"
+												onclick={() => deletePermission(index)}
+											>
+												<i class="bx bxs-no-entry"></i>
+											</button>
 										</div>
 									{/each}
 									{#if innerItem.permissions?.length < 5}
-										<div class="list-add line-align-center">
-											<i
-												class="bx bx bx-list-plus text-primary clickable"
-												role="link"
-												tabindex="0"
-												onkeydown={() => {}}
-												onclick={() => addPermission()}
-											></i>
-										</div>
+										<button
+											type="button"
+											class="list-add inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary transition-all hover:scale-105 hover:bg-primary/20"
+											aria-label="Add permission"
+											onclick={() => addPermission()}
+										>
+											<i class="bx bx-list-plus text-lg"></i>
+										</button>
 									{/if}
 								</div>
 							</div>
 						</li>
 					</ul>
 
+					<!-- Agent permissions matrix -->
 					{#if innerActions.length > 0}
-						<div class="user-agent-container">
-							<div class="action-row action-title">
-								<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
-									{'Agent'}
-								</div>
-								{#each allActions as title}
-									<div class="action-col action-title-wrapper fw-bold" style={colStyle}>
-										<div>{title.name}</div>
-										<div>
+						<div class="user-agent-container mt-5">
+							<div class="mb-3 inline-flex items-center gap-1.5 text-sm font-semibold text-primary">
+								<i class="mdi mdi-shield-key-outline text-base"></i>
+								Agent Permissions
+							</div>
+							<div class="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
+								<!-- Header row -->
+								<div class="action-row action-title flex border-b-2 border-primary/40 bg-primary/5 dark:bg-primary/20">
+									<div class="action-col action-title-wrapper flex items-center justify-center px-2 py-3 text-xs font-bold uppercase tracking-wider text-dark dark:text-gray-100" style={colStyle}>
+										Agent
+									</div>
+									{#each allActions as title}
+										<div class="action-col action-title-wrapper flex flex-col items-center justify-center gap-1 px-2 py-3 text-xs font-bold uppercase tracking-wider text-dark dark:text-gray-100" style={colStyle}>
+											<div>{title.name}</div>
 											<input
 												type="checkbox"
-												class="form-check-input action-center"
+												class="action-checkbox"
 												checked={title.checked}
 												onchange={e => checkAll(e, title)}
 											/>
 										</div>
-									</div>
-								{/each}
-							</div>
-							<div class="action-row-wrapper">
-								{#each innerActions as agentActionItem}
-									<div class="action-row">
-										<div class="action-col fw-bold" style={colStyle}>
-											{agentActionItem.agent_name}
-										</div>
-										{#each agentActionItem.actions as actionItem}
-											<div class="action-col action-center" style={colStyle}>
-												<input
-													type="checkbox"
-													class="form-check-input action-center"
-													checked={actionItem.checked}
-													onchange={e => checkAction(e, agentActionItem, actionItem)}
-												/>
+									{/each}
+								</div>
+								<!-- Body rows -->
+								<div class="action-row-wrapper max-h-[300px] overflow-y-auto">
+									{#each innerActions as agentActionItem, rowIdx}
+										<div class="action-row flex border-t border-gray-100 transition-colors hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-700/40 {rowIdx === 0 ? '!border-t-0' : ''}">
+											<div class="action-col flex items-center px-3 py-2 text-sm font-medium text-dark dark:text-gray-100" style={colStyle}>
+												{agentActionItem.agent_name}
 											</div>
-										{/each}
-									</div>
-								{/each}
+											{#each agentActionItem.actions as actionItem}
+												<div class="action-col action-center flex items-center justify-center px-2 py-2" style={colStyle}>
+													<input
+														type="checkbox"
+														class="action-checkbox"
+														checked={actionItem.checked}
+														onchange={e => checkAction(e, agentActionItem, actionItem)}
+													/>
+												</div>
+											{/each}
+										</div>
+									{/each}
+								</div>
 							</div>
 						</div>
 					{/if}
diff --git a/vite.config.js b/vite.config.js
index 60aae59d..f3e1ad2f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -26,7 +26,9 @@ export default defineConfig(({ mode }) => {
 			  '@popperjs/core', // Add @popperjs/core to the list of dependencies to include
 			  "overlayscrollbars-svelte",
 			  "svelte-select",
-			  'lodash.get', 'lodash.isequal', 'lodash.clonedeep'
+			  'lodash.get',
+			  'lodash.isequal',
+			  'lodash.clonedeep'
 			],
 			exclude: [
 				"svelte-codemirror-editor",