diff --git a/.env b/.env
index 8e8b04b8..6e4c4be0 100644
--- a/.env
+++ b/.env
@@ -21,4 +21,7 @@ PUBLIC_COMPANY_WEBSITE=https://scisharp.github.io/SciSharp/
 PUBLIC_PLUGIN_DEFAULT_ICON=https://avatars.githubusercontent.com/u/44989469?s=200&v=4
 PUBLIC_ALLOW_SIGNUP=true
 PUBLIC_AUTH_ENABLE_SSO=true
-PUBLIC_AUTH_ENABLE_FIND_PWD=true
\ No newline at end of file
+PUBLIC_AUTH_ENABLE_FIND_PWD=true
+PUBLIC_ENVIRONMENTS=[]
+PUBLIC_PRIMARY_COLOR=#556ee6
+PUBLIC_SECONDARY_COLOR=
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
index b6f27f13..61a29cec 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
 engine-strict=true
+legacy-peer-deps=true
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3f242cdc..0a1852f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,44 +22,47 @@
 				"@pgrabovets/json-view": "^2.7.5",
 				"@popperjs/core": "^2.11.8",
 				"@sveltejs/adapter-static": "^3.0.0",
-				"@sveltestrap/sveltestrap": "^6.2.3",
+				"@sveltestrap/sveltestrap": "^7.1.0",
+				"@tailwindcss/forms": "^0.5.11",
+				"@tailwindcss/typography": "^0.5.19",
+				"@tailwindcss/vite": "^4.2.2",
 				"@twilio/voice-sdk": "^2.9.0",
-				"@vincjo/datatables": "^1.12.7",
+				"@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",
 				"fullcalendar": "^6.1.9",
 				"lodash": "^4.17.21",
 				"marked": "^12.0.0",
 				"moment": "^2.30.1",
 				"overlayscrollbars": "^2.4.4",
-				"overlayscrollbars-svelte": "^0.5.2",
+				"overlayscrollbars-svelte": "^0.5.5",
 				"qs": "^6.14.0",
-				"svelte-awesome-color-picker": "^2.4.7",
-				"svelte-codemirror-editor": "^1.4.1",
+				"svelte-awesome-color-picker": "^3.1.4",
+				"svelte-codemirror-editor": "^2.1.0",
 				"svelte-collapse": "^0.1.2",
 				"svelte-file-dropzone": "^2.0.2",
-				"svelte-flatpickr": "^3.3.3",
 				"svelte-i18n": "^4.0.0",
 				"svelte-json-tree": "^2.2.0",
-				"svelte-jsoneditor": "^0.21.1",
+				"svelte-jsoneditor": "^3.11.0",
 				"svelte-link": "^1.4.0",
-				"svelte-markdown": "^0.4.1",
 				"svelte-player": "^0.0.21",
 				"svelte-select": "^5.7.0",
-				"svelte-splitpanes": "^8.0.5",
+				"svelte-splitpanes": "^8.0.12",
 				"svelte-viewport-info": "^1.0.1",
 				"svelvet": "^9.0.0",
 				"sweetalert2": "^11.12.4",
 				"swiper": "^10.3.1",
+				"tailwindcss": "^4.2.2",
 				"uuid": "^10.0.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
-				"@sveltejs/kit": "^2.0.0",
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@sveltejs/kit": "^2.55.0",
+				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"@types/drawflow": "^0.0.10",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^9.0.0",
@@ -67,62 +70,47 @@
 				"prettier": "^3.0.0",
 				"prettier-plugin-svelte": "^3.0.0",
 				"sass": "^1.69.5",
-				"svelte": "^4.2.9",
+				"svelte": "^5.54.0",
 				"svelte-carousel": "^1.0.25",
-				"svelte-check": "^3.6.0",
+				"svelte-check": "^4.4.5",
 				"svelte-lightbox": "^1.1.2",
-				"svelte-loading-spinners": "^0.3.4",
-				"svelte-range-slider-pips": "^2.2.3",
-				"vite": "^5.0.0"
+				"svelte-loading-spinners": "^0.3.6",
+				"svelte-range-slider-pips": "^4.1.1",
+				"vite": "^6.4.1"
 			},
 			"engines": {
 				"node": ">=18.0.0"
 			}
 		},
-		"node_modules/@ampproject/remapping": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
-			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dependencies": {
-				"@jridgewell/gen-mapping": "^0.3.5",
-				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
 		"node_modules/@codemirror/autocomplete": {
-			"version": "6.17.0",
-			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.17.0.tgz",
-			"integrity": "sha512-fdfj6e6ZxZf8yrkMHUSJJir7OJkHkZKaOZGzLWIYp2PZ3jd+d+UjG8zVPqJF6d3bKxkhvXTPan/UZ1t7Bqm0gA==",
+			"version": "6.20.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.1.tgz",
+			"integrity": "sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
 				"@codemirror/state": "^6.0.0",
 				"@codemirror/view": "^6.17.0",
 				"@lezer/common": "^1.0.0"
-			},
-			"peerDependencies": {
-				"@codemirror/language": "^6.0.0",
-				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0",
-				"@lezer/common": "^1.0.0"
 			}
 		},
 		"node_modules/@codemirror/commands": {
-			"version": "6.10.0",
-			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.0.tgz",
-			"integrity": "sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==",
+			"version": "6.10.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.10.3.tgz",
+			"integrity": "sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
-				"@codemirror/state": "^6.4.0",
+				"@codemirror/state": "^6.6.0",
 				"@codemirror/view": "^6.27.0",
 				"@lezer/common": "^1.1.0"
 			}
 		},
 		"node_modules/@codemirror/lang-javascript": {
-			"version": "6.2.4",
-			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
-			"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+			"version": "6.2.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
+			"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/autocomplete": "^6.0.0",
 				"@codemirror/language": "^6.6.0",
@@ -137,6 +125,7 @@
 			"version": "6.0.2",
 			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
 			"integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
 				"@lezer/json": "^1.0.0"
@@ -146,6 +135,7 @@
 			"version": "6.2.1",
 			"resolved": "https://registry.npmjs.org/@codemirror/lang-python/-/lang-python-6.2.1.tgz",
 			"integrity": "sha512-IRjC8RUBhn9mGR9ywecNhB51yePWCGgvHfY1lWN/Mrp3cKuHr0isDKia+9HnvhiWNnMpbGhWrkhuWOc09exRyw==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/autocomplete": "^6.3.2",
 				"@codemirror/language": "^6.8.0",
@@ -155,42 +145,46 @@
 			}
 		},
 		"node_modules/@codemirror/language": {
-			"version": "6.11.3",
-			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
-			"integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
+			"version": "6.12.2",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.12.2.tgz",
+			"integrity": "sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/state": "^6.0.0",
 				"@codemirror/view": "^6.23.0",
-				"@lezer/common": "^1.1.0",
+				"@lezer/common": "^1.5.0",
 				"@lezer/highlight": "^1.0.0",
 				"@lezer/lr": "^1.0.0",
 				"style-mod": "^4.0.0"
 			}
 		},
 		"node_modules/@codemirror/lint": {
-			"version": "6.8.1",
-			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.1.tgz",
-			"integrity": "sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==",
+			"version": "6.9.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+			"integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
 				"crelt": "^1.0.5"
 			}
 		},
 		"node_modules/@codemirror/search": {
-			"version": "6.5.6",
-			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.6.tgz",
-			"integrity": "sha512-rpMgcsh7o0GuCDUXKPvww+muLA1pDJaFrpq/CCHtpQJYz8xopu4D1hPcKRoDD0YlF8gZaqTNIRa4VRBWyhyy7Q==",
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.6.0.tgz",
+			"integrity": "sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0",
+				"@codemirror/view": "^6.37.0",
 				"crelt": "^1.0.5"
 			}
 		},
 		"node_modules/@codemirror/state": {
-			"version": "6.5.2",
-			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
-			"integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
+			"version": "6.6.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.6.0.tgz",
+			"integrity": "sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@marijn/find-cluster-break": "^1.0.0"
 			}
@@ -199,6 +193,7 @@
 			"version": "6.1.3",
 			"resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
 			"integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
+			"license": "MIT",
 			"dependencies": {
 				"@codemirror/language": "^6.0.0",
 				"@codemirror/state": "^6.0.0",
@@ -207,20 +202,22 @@
 			}
 		},
 		"node_modules/@codemirror/view": {
-			"version": "6.38.6",
-			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.6.tgz",
-			"integrity": "sha512-qiS0z1bKs5WOvHIAC0Cybmv4AJSkAXgX5aD6Mqd2epSLlVJsQl8NG23jCVouIgkh4All/mrbdsf2UOLFnJw0tw==",
+			"version": "6.40.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.40.0.tgz",
+			"integrity": "sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==",
+			"license": "MIT",
 			"dependencies": {
-				"@codemirror/state": "^6.5.0",
+				"@codemirror/state": "^6.6.0",
 				"crelt": "^1.0.6",
 				"style-mod": "^4.1.0",
 				"w3c-keyname": "^2.2.4"
 			}
 		},
 		"node_modules/@ernane/svelte-star-rating": {
-			"version": "1.1.7",
-			"resolved": "https://registry.npmjs.org/@ernane/svelte-star-rating/-/svelte-star-rating-1.1.7.tgz",
-			"integrity": "sha512-ayn0yVQKzRk3bu/w+y06BNZ4cTFEmUWN1t8gxy+/yUeKLlQ6Yi+VI9g5sS9SjH888qoYIfIp7tDhYw1EJOXVbA=="
+			"version": "1.1.9",
+			"resolved": "https://registry.npmjs.org/@ernane/svelte-star-rating/-/svelte-star-rating-1.1.9.tgz",
+			"integrity": "sha512-MwRk309Z+mbudw278XczgpfuuEsPmo3TxtYGr5Wx3vWIzUAee1BYDfflTZZaQqiBTjUxL9QzUokOKxumSKSkUQ==",
+			"license": "MIT"
 		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.19.12",
@@ -229,6 +226,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"aix"
@@ -244,6 +242,7 @@
 			"cpu": [
 				"arm"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
@@ -259,6 +258,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
@@ -274,6 +274,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
@@ -289,6 +290,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
@@ -304,6 +306,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
@@ -319,6 +322,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -334,6 +338,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -349,6 +354,7 @@
 			"cpu": [
 				"arm"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -364,6 +370,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -379,6 +386,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -394,6 +402,7 @@
 			"cpu": [
 				"loong64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -409,6 +418,7 @@
 			"cpu": [
 				"mips64el"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -424,6 +434,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -439,6 +450,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -454,6 +466,7 @@
 			"cpu": [
 				"s390x"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -469,6 +482,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
@@ -477,6 +491,23 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/netbsd-x64": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
@@ -484,6 +515,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -492,6 +524,23 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/openbsd-x64": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
@@ -499,6 +548,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -507,6 +557,23 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@esbuild/sunos-x64": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
@@ -514,6 +581,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"sunos"
@@ -529,6 +597,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -544,6 +613,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -559,6 +629,7 @@
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -568,25 +639,30 @@
 			}
 		},
 		"node_modules/@eslint-community/eslint-utils": {
-			"version": "4.4.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-			"integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+			"version": "4.9.1",
+			"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+			"integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"eslint-visitor-keys": "^3.3.0"
+				"eslint-visitor-keys": "^3.4.3"
 			},
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			},
+			"funding": {
+				"url": "https://opencollective.com/eslint"
+			},
 			"peerDependencies": {
 				"eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
 			}
 		},
 		"node_modules/@eslint-community/regexpp": {
-			"version": "4.11.0",
-			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.0.tgz",
-			"integrity": "sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==",
+			"version": "4.12.2",
+			"resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+			"integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
@@ -596,6 +672,7 @@
 			"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
 			"integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"ajv": "^6.12.4",
 				"debug": "^4.3.2",
@@ -615,105 +692,119 @@
 			}
 		},
 		"node_modules/@eslint/js": {
-			"version": "8.57.0",
-			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
-			"integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+			"version": "8.57.1",
+			"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+			"integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.6.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.5.tgz",
-			"integrity": "sha512-8GrTWmoFhm5BsMZOTHeGD2/0FLKLQQHvO/ZmQga4tKempYRLz8aqJGqXVuQgisnMObq2YZ2SgkwctN1LOOxcqA==",
+			"version": "1.7.5",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+			"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/utils": "^0.2.5"
+				"@floating-ui/utils": "^0.2.11"
 			}
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.6.8",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.8.tgz",
-			"integrity": "sha512-kx62rP19VZ767Q653wsP1XZCGIirkE09E0QUGNYTM/ttbbQHqcGPdSfWFxUyyNLc/W6aoJRBajOSXhP6GXjC0Q==",
+			"version": "1.7.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+			"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/core": "^1.6.0",
-				"@floating-ui/utils": "^0.2.5"
+				"@floating-ui/core": "^1.7.5",
+				"@floating-ui/utils": "^0.2.11"
 			}
 		},
 		"node_modules/@floating-ui/utils": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.5.tgz",
-			"integrity": "sha512-sTcG+QZ6fdEUObICavU+aB3Mp8HY4n14wYHdxK4fXjPmv3PXZZeY5RaguJmGyeH/CJQhX3fqKUtS4qc1LoHwhQ=="
+			"version": "0.2.11",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+			"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+			"license": "MIT"
 		},
 		"node_modules/@formatjs/ecma402-abstract": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
-			"integrity": "sha512-rRqXOqdFmk7RYvj4khklyqzcfQl9vEL/usogncBHRZfZBDOwMGuSRNFl02fu5KGHXdbinju+YXyuR+Nk8xlr/g==",
+			"version": "2.3.6",
+			"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.6.tgz",
+			"integrity": "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw==",
+			"license": "MIT",
 			"dependencies": {
-				"@formatjs/intl-localematcher": "0.5.4",
-				"tslib": "^2.4.0"
+				"@formatjs/fast-memoize": "2.2.7",
+				"@formatjs/intl-localematcher": "0.6.2",
+				"decimal.js": "^10.4.3",
+				"tslib": "^2.8.0"
 			}
 		},
 		"node_modules/@formatjs/fast-memoize": {
-			"version": "2.2.0",
-			"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
-			"integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
+			"version": "2.2.7",
+			"resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.7.tgz",
+			"integrity": "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ==",
+			"license": "MIT",
 			"dependencies": {
-				"tslib": "^2.4.0"
+				"tslib": "^2.8.0"
 			}
 		},
 		"node_modules/@formatjs/icu-messageformat-parser": {
-			"version": "2.7.8",
-			"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.7.8.tgz",
-			"integrity": "sha512-nBZJYmhpcSX0WeJ5SDYUkZ42AgR3xiyhNCsQweFx3cz/ULJjym8bHAzWKvG5e2+1XO98dBYC0fWeeAECAVSwLA==",
+			"version": "2.11.4",
+			"resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.4.tgz",
+			"integrity": "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw==",
+			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
-				"@formatjs/icu-skeleton-parser": "1.8.2",
-				"tslib": "^2.4.0"
+				"@formatjs/ecma402-abstract": "2.3.6",
+				"@formatjs/icu-skeleton-parser": "1.8.16",
+				"tslib": "^2.8.0"
 			}
 		},
 		"node_modules/@formatjs/icu-skeleton-parser": {
-			"version": "1.8.2",
-			"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.2.tgz",
-			"integrity": "sha512-k4ERKgw7aKGWJZgTarIcNEmvyTVD9FYh0mTrrBMHZ1b8hUu6iOJ4SzsZlo3UNAvHYa+PnvntIwRPt1/vy4nA9Q==",
+			"version": "1.8.16",
+			"resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.16.tgz",
+			"integrity": "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
-				"tslib": "^2.4.0"
+				"@formatjs/ecma402-abstract": "2.3.6",
+				"tslib": "^2.8.0"
 			}
 		},
 		"node_modules/@formatjs/intl-localematcher": {
-			"version": "0.5.4",
-			"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.4.tgz",
-			"integrity": "sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==",
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.2.tgz",
+			"integrity": "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA==",
+			"license": "MIT",
 			"dependencies": {
-				"tslib": "^2.4.0"
+				"tslib": "^2.8.0"
 			}
 		},
 		"node_modules/@fortawesome/fontawesome-common-types": {
-			"version": "6.6.0",
-			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
-			"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
+			"integrity": "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
 		},
 		"node_modules/@fortawesome/free-regular-svg-icons": {
-			"version": "6.6.0",
-			"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
-			"integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-7.2.0.tgz",
+			"integrity": "sha512-iycmlN51EULlQ4D/UU9WZnHiN0CvjJ2TuuCrAh+1MVdzD+4ViKYH2deNAll4XAAYlZa8WAefHR5taSK8hYmSMw==",
+			"license": "(CC-BY-4.0 AND MIT)",
 			"dependencies": {
-				"@fortawesome/fontawesome-common-types": "6.6.0"
+				"@fortawesome/fontawesome-common-types": "7.2.0"
 			},
 			"engines": {
 				"node": ">=6"
 			}
 		},
 		"node_modules/@fortawesome/free-solid-svg-icons": {
-			"version": "6.6.0",
-			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
-			"integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-7.2.0.tgz",
+			"integrity": "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==",
+			"license": "(CC-BY-4.0 AND MIT)",
 			"dependencies": {
-				"@fortawesome/fontawesome-common-types": "6.6.0"
+				"@fortawesome/fontawesome-common-types": "7.2.0"
 			},
 			"engines": {
 				"node": ">=6"
@@ -723,72 +814,80 @@
 			"version": "5.11.5",
 			"resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.11.5.tgz",
 			"integrity": "sha512-3iAYiUbHXhjSVXnYWz27Od2cslztUPsOwiwKlfGvQxBixv2Kl6a8IPwaijKFYJHXdwYmfPoEgK7rvqAGVoIYwA==",
+			"license": "MIT",
 			"dependencies": {
 				"tslib": "^2.1.0"
 			}
 		},
 		"node_modules/@fullcalendar/core": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
-			"integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz",
+			"integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==",
+			"license": "MIT",
 			"dependencies": {
 				"preact": "~10.12.1"
 			}
 		},
 		"node_modules/@fullcalendar/daygrid": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
-			"integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz",
+			"integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==",
+			"license": "MIT",
 			"peerDependencies": {
-				"@fullcalendar/core": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20"
 			}
 		},
 		"node_modules/@fullcalendar/interaction": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
-			"integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.20.tgz",
+			"integrity": "sha512-p6txmc5txL0bMiPaJxe2ip6o0T384TyoD2KGdsU6UjZ5yoBlaY+dg7kxfnYKpYMzEJLG58n+URrHr2PgNL2fyA==",
+			"license": "MIT",
 			"peerDependencies": {
-				"@fullcalendar/core": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20"
 			}
 		},
 		"node_modules/@fullcalendar/list": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.15.tgz",
-			"integrity": "sha512-U1bce04tYDwkFnuVImJSy2XalYIIQr6YusOWRPM/5ivHcJh67Gm8CIMSWpi3KdRSNKFkqBxLPkfZGBMaOcJYug==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/list/-/list-6.1.20.tgz",
+			"integrity": "sha512-7Hzkbb7uuSqrXwTyD0Ld/7SwWNxPD6SlU548vtkIpH55rZ4qquwtwYdMPgorHos5OynHA4OUrZNcH51CjrCf2g==",
+			"license": "MIT",
 			"peerDependencies": {
-				"@fullcalendar/core": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20"
 			}
 		},
 		"node_modules/@fullcalendar/multimonth": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.15.tgz",
-			"integrity": "sha512-sEZY6jbOYkeF9TwhUldG+UUVv+hiPlGkS8zZEgPR7ypcjhipyA03c5rPjx7N6huOHqh6lCMH59zlohLooQRlaw==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.20.tgz",
+			"integrity": "sha512-rMMiPBA71lUJ1DV/0ckPtN4/G4LozkkDKoG7/CbmTYqFJiMRskM/1WpilhtRn4iUdNe03V5K7ofFQRs0wo4ZtQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@fullcalendar/daygrid": "~6.1.15"
+				"@fullcalendar/daygrid": "~6.1.20"
 			},
 			"peerDependencies": {
-				"@fullcalendar/core": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20"
 			}
 		},
 		"node_modules/@fullcalendar/timegrid": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
-			"integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.20.tgz",
+			"integrity": "sha512-4H+/MWbz3ntA50lrPif+7TsvMeX3R1GSYjiLULz0+zEJ7/Yfd9pupZmAwUs/PBpA6aAcFmeRr0laWfcz1a9V1A==",
+			"license": "MIT",
 			"dependencies": {
-				"@fullcalendar/daygrid": "~6.1.15"
+				"@fullcalendar/daygrid": "~6.1.20"
 			},
 			"peerDependencies": {
-				"@fullcalendar/core": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20"
 			}
 		},
 		"node_modules/@humanwhocodes/config-array": {
-			"version": "0.11.14",
-			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
-			"integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+			"version": "0.13.0",
+			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
+			"integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
 			"deprecated": "Use @eslint/config-array instead",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
-				"@humanwhocodes/object-schema": "^2.0.2",
+				"@humanwhocodes/object-schema": "^2.0.3",
 				"debug": "^4.3.1",
 				"minimatch": "^3.0.5"
 			},
@@ -801,6 +900,7 @@
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
 			"integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"engines": {
 				"node": ">=12.22"
 			},
@@ -814,73 +914,113 @@
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
 			"integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
 			"deprecated": "Use @eslint/object-schema instead",
-			"dev": true
+			"dev": true,
+			"license": "BSD-3-Clause"
 		},
 		"node_modules/@jridgewell/gen-mapping": {
-			"version": "0.3.5",
-			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+			"license": "MIT",
 			"dependencies": {
-				"@jridgewell/set-array": "^1.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.10",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
-			},
-			"engines": {
-				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/resolve-uri": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"engines": {
-				"node": ">=6.0.0"
-			}
-		},
-		"node_modules/@jridgewell/set-array": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
 			}
 		},
 		"node_modules/@jridgewell/sourcemap-codec": {
-			"version": "1.5.0",
-			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-			"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
-			"version": "0.3.25",
-			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@jsep-plugin/assignment": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.3.0.tgz",
+			"integrity": "sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10.16.0"
+			},
+			"peerDependencies": {
+				"jsep": "^0.4.0||^1.0.0"
+			}
+		},
+		"node_modules/@jsep-plugin/regex": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.4.tgz",
+			"integrity": "sha512-q7qL4Mgjs1vByCaTnDFcBnV9HS7GVPJX5vyVoCgZHNSC9rjwIlmbXG5sUuorR5ndfHAIlJ8pVStxvjXHbNvtUg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10.16.0"
+			},
+			"peerDependencies": {
+				"jsep": "^0.4.0||^1.0.0"
+			}
+		},
+		"node_modules/@jsonquerylang/jsonquery": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/@jsonquerylang/jsonquery/-/jsonquery-5.1.1.tgz",
+			"integrity": "sha512-Fj4SoA6Ku09EF+t7OEI8QLipA2A+fJCdEOwnDWG84o5jXMRjkcN5NCMH7kFZb5fP62xz914XV5LBOiDdiUXObg==",
+			"license": "ISC",
+			"bin": {
+				"jsonquery": "bin/cli.js"
+			}
+		},
 		"node_modules/@kurkle/color": {
-			"version": "0.3.2",
-			"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
-			"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+			"version": "0.3.4",
+			"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+			"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+			"license": "MIT"
 		},
 		"node_modules/@lezer/common": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.1.tgz",
-			"integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ=="
+			"version": "1.5.1",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.1.tgz",
+			"integrity": "sha512-6YRVG9vBkaY7p1IVxL4s44n5nUnaNnGM2/AckNgYOnxTG2kWh1vR8BMxPseWPjRNpb5VtXnMpeYAEAADoRV1Iw==",
+			"license": "MIT"
 		},
 		"node_modules/@lezer/highlight": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz",
-			"integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==",
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
+			"integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
+			"license": "MIT",
 			"dependencies": {
-				"@lezer/common": "^1.0.0"
+				"@lezer/common": "^1.3.0"
 			}
 		},
 		"node_modules/@lezer/javascript": {
 			"version": "1.5.4",
 			"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.4.tgz",
 			"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+			"license": "MIT",
 			"dependencies": {
 				"@lezer/common": "^1.2.0",
 				"@lezer/highlight": "^1.1.3",
@@ -888,9 +1028,10 @@
 			}
 		},
 		"node_modules/@lezer/json": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
-			"integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+			"integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+			"license": "MIT",
 			"dependencies": {
 				"@lezer/common": "^1.2.0",
 				"@lezer/highlight": "^1.0.0",
@@ -898,9 +1039,10 @@
 			}
 		},
 		"node_modules/@lezer/lr": {
-			"version": "1.4.2",
-			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
-			"integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+			"version": "1.4.8",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.8.tgz",
+			"integrity": "sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==",
+			"license": "MIT",
 			"dependencies": {
 				"@lezer/common": "^1.0.0"
 			}
@@ -909,6 +1051,7 @@
 			"version": "1.1.18",
 			"resolved": "https://registry.npmjs.org/@lezer/python/-/python-1.1.18.tgz",
 			"integrity": "sha512-31FiUrU7z9+d/ElGQLJFXl+dKOdx0jALlP3KEOsGTex8mvj+SoE1FgItcHWK/axkxCHGUSpqIHt6JAWfWu9Rhg==",
+			"license": "MIT",
 			"dependencies": {
 				"@lezer/common": "^1.2.0",
 				"@lezer/highlight": "^1.0.0",
@@ -918,18 +1061,20 @@
 		"node_modules/@marijn/find-cluster-break": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
-			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
+			"license": "MIT"
 		},
 		"node_modules/@microsoft/signalr": {
-			"version": "8.0.7",
-			"resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-8.0.7.tgz",
-			"integrity": "sha512-PHcdMv8v5hJlBkRHAuKG5trGViQEkPYee36LnJQx4xHOQ5LL4X0nEWIxOp5cCtZ7tu+30quz5V3k0b1YNuc6lw==",
+			"version": "8.0.17",
+			"resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-8.0.17.tgz",
+			"integrity": "sha512-5pM6xPtKZNJLO0Tq5nQasVyPFwi/WBY3QB5uc/v3dIPTpS1JXQbaXAQAPxFoQ5rTBFE094w8bbqkp17F9ReQvA==",
+			"license": "MIT",
 			"dependencies": {
 				"abort-controller": "^3.0.0",
 				"eventsource": "^2.0.2",
 				"fetch-cookie": "^2.0.3",
 				"node-fetch": "^2.6.7",
-				"ws": "^7.4.5"
+				"ws": "^7.5.10"
 			}
 		},
 		"node_modules/@nodelib/fs.scandir": {
@@ -937,6 +1082,7 @@
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
 			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@nodelib/fs.stat": "2.0.5",
 				"run-parallel": "^1.1.9"
@@ -950,6 +1096,7 @@
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
 			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 8"
 			}
@@ -959,6 +1106,7 @@
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
 			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@nodelib/fs.scandir": "2.1.5",
 				"fastq": "^1.6.0"
@@ -967,222 +1115,681 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/@pgrabovets/json-view": {
-			"version": "2.7.5",
-			"resolved": "https://registry.npmjs.org/@pgrabovets/json-view/-/json-view-2.7.5.tgz",
-			"integrity": "sha512-5ewaHFwjjG9h2rzkkeqRZUTUK5fmnWWq0qCzv8IiZT2pU10jI6nrKPuxzzrKdD22U2PcHVKzWdeX6hPyGcyeiQ=="
-		},
-		"node_modules/@polka/url": {
-			"version": "1.0.0-next.25",
-			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
-		},
-		"node_modules/@popperjs/core": {
-			"version": "2.11.8",
-			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
-			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+		"node_modules/@parcel/watcher": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+			"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"detect-libc": "^2.0.3",
+				"is-glob": "^4.0.3",
+				"node-addon-api": "^7.0.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">= 10.0.0"
+			},
 			"funding": {
 				"type": "opencollective",
-				"url": "https://opencollective.com/popperjs"
-			}
-		},
-		"node_modules/@replit/codemirror-indentation-markers": {
-			"version": "6.5.3",
-			"resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz",
-			"integrity": "sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==",
-			"peerDependencies": {
-				"@codemirror/language": "^6.0.0",
-				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0"
-			}
-		},
-		"node_modules/@rollup/rollup-android-arm-eabi": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.2.tgz",
-			"integrity": "sha512-OHflWINKtoCFSpm/WmuQaWW4jeX+3Qt3XQDepkkiFTsoxFc5BpF3Z5aDxFZgBqRjO6ATP5+b1iilp4kGIZVWlA==",
-			"cpu": [
-				"arm"
-			],
-			"optional": true,
-			"os": [
-				"android"
-			]
-		},
-		"node_modules/@rollup/rollup-android-arm64": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.2.tgz",
-			"integrity": "sha512-k0OC/b14rNzMLDOE6QMBCjDRm3fQOHAL8Ldc9bxEWvMo4Ty9RY6rWmGetNTWhPo+/+FNd1lsQYRd0/1OSix36A==",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher-android-arm64": "2.5.6",
+				"@parcel/watcher-darwin-arm64": "2.5.6",
+				"@parcel/watcher-darwin-x64": "2.5.6",
+				"@parcel/watcher-freebsd-x64": "2.5.6",
+				"@parcel/watcher-linux-arm-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm-musl": "2.5.6",
+				"@parcel/watcher-linux-arm64-glibc": "2.5.6",
+				"@parcel/watcher-linux-arm64-musl": "2.5.6",
+				"@parcel/watcher-linux-x64-glibc": "2.5.6",
+				"@parcel/watcher-linux-x64-musl": "2.5.6",
+				"@parcel/watcher-win32-arm64": "2.5.6",
+				"@parcel/watcher-win32-ia32": "2.5.6",
+				"@parcel/watcher-win32-x64": "2.5.6"
+			}
+		},
+		"node_modules/@parcel/watcher-android-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+			"integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-darwin-arm64": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.2.tgz",
-			"integrity": "sha512-IIARRgWCNWMTeQH+kr/gFTHJccKzwEaI0YSvtqkEBPj7AshElFq89TyreKNFAGh5frLfDCbodnq+Ye3dqGKPBw==",
+		"node_modules/@parcel/watcher-darwin-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+			"integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-darwin-x64": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.2.tgz",
-			"integrity": "sha512-52udDMFDv54BTAdnw+KXNF45QCvcJOcYGl3vQkp4vARyrcdI/cXH8VXTEv/8QWfd6Fru8QQuw1b2uNersXOL0g==",
+		"node_modules/@parcel/watcher-darwin-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+			"integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.2.tgz",
-			"integrity": "sha512-r+SI2t8srMPYZeoa1w0o/AfoVt9akI1ihgazGYPQGRilVAkuzMGiTtexNZkrPkQsyFrvqq/ni8f3zOnHw4hUbA==",
+		"node_modules/@parcel/watcher-freebsd-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+			"integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
 			"cpu": [
-				"arm"
+				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
-				"linux"
-			]
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.2.tgz",
-			"integrity": "sha512-+tYiL4QVjtI3KliKBGtUU7yhw0GMcJJuB9mLTCEauHEsqfk49gtUBXGtGP3h1LW8MbaTY6rSFIQV1XOBps1gBA==",
+		"node_modules/@parcel/watcher-linux-arm-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+			"integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
 			"cpu": [
 				"arm"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-arm64-gnu": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.2.tgz",
-			"integrity": "sha512-OR5DcvZiYN75mXDNQQxlQPTv4D+uNCUsmSCSY2FolLf9W5I4DSoJyg7z9Ea3TjKfhPSGgMJiey1aWvlWuBzMtg==",
+		"node_modules/@parcel/watcher-linux-arm-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+			"integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
 			"cpu": [
-				"arm64"
+				"arm"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-arm64-musl": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.2.tgz",
-			"integrity": "sha512-Hw3jSfWdUSauEYFBSFIte6I8m6jOj+3vifLg8EU3lreWulAUpch4JBjDMtlKosrBzkr0kwKgL9iCfjA8L3geoA==",
+		"node_modules/@parcel/watcher-linux-arm64-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+			"integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.2.tgz",
-			"integrity": "sha512-rhjvoPBhBwVnJRq/+hi2Q3EMiVF538/o9dBuj9TVLclo9DuONqt5xfWSaE6MYiFKpo/lFPJ/iSI72rYWw5Hc7w==",
-			"cpu": [
-				"ppc64"
 			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.2.tgz",
-			"integrity": "sha512-EAz6vjPwHHs2qOCnpQkw4xs14XJq84I81sDRGPEjKPFVPBw7fwvtwhVjcZR6SLydCv8zNK8YGFblKWd/vRmP8g==",
+		"node_modules/@parcel/watcher-linux-arm64-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+			"integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
 			"cpu": [
-				"riscv64"
+				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
-		},
-		"node_modules/@rollup/rollup-linux-s390x-gnu": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.2.tgz",
-			"integrity": "sha512-IJSUX1xb8k/zN9j2I7B5Re6B0NNJDJ1+soezjNojhT8DEVeDNptq2jgycCOpRhyGj0+xBn7Cq+PK7Q+nd2hxLA==",
-			"cpu": [
-				"s390x"
 			],
-			"optional": true,
-			"os": [
-				"linux"
-			]
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-x64-gnu": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.2.tgz",
-			"integrity": "sha512-OgaToJ8jSxTpgGkZSkwKE+JQGihdcaqnyHEFOSAU45utQ+yLruE1dkonB2SDI8t375wOKgNn8pQvaWY9kPzxDQ==",
+		"node_modules/@parcel/watcher-linux-x64-glibc": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+			"integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-linux-x64-musl": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.2.tgz",
-			"integrity": "sha512-5V3mPpWkB066XZZBgSd1lwozBk7tmOkKtquyCJ6T4LN3mzKENXyBwWNQn8d0Ci81hvlBw5RoFgleVpL6aScLYg==",
+		"node_modules/@parcel/watcher-linux-x64-musl": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+			"integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
 			"cpu": [
 				"x64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-win32-arm64-msvc": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.2.tgz",
-			"integrity": "sha512-ayVstadfLeeXI9zUPiKRVT8qF55hm7hKa+0N1V6Vj+OTNFfKSoUxyZvzVvgtBxqSb5URQ8sK6fhwxr9/MLmxdA==",
+		"node_modules/@parcel/watcher-win32-arm64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+			"integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
 			"cpu": [
 				"arm64"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
-			]
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
 		},
-		"node_modules/@rollup/rollup-win32-ia32-msvc": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.2.tgz",
-			"integrity": "sha512-Mda7iG4fOLHNsPqjWSjANvNZYoW034yxgrndof0DwCy0D3FvTjeNo+HGE6oGWgvcLZNLlcp0hLEFcRs+UGsMLg==",
+		"node_modules/@parcel/watcher-win32-ia32": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+			"integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
 			"cpu": [
 				"ia32"
 			],
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
-			]
-		},
-		"node_modules/@rollup/rollup-win32-x64-msvc": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.2.tgz",
-			"integrity": "sha512-DPi0ubYhSow/00YqmG1jWm3qt1F8aXziHc/UNy8bo9cpCacqhuWu+iSq/fp2SyEQK7iYTZ60fBU9cat3MXTjIQ==",
-			"cpu": [
-				"x64"
 			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@parcel/watcher-win32-x64": {
+			"version": "2.5.6",
+			"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+			"integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/@pgrabovets/json-view": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/@pgrabovets/json-view/-/json-view-2.8.1.tgz",
+			"integrity": "sha512-fMxkreNZPiuwf/xTj+APf/PkWOib5xGbyw3taG7GOvNzx7fHiev/eHfmT230z5NuRl/eWAjrgvk7v2cuzDhShA==",
+			"license": "MIT"
+		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
+		"node_modules/@replit/codemirror-indentation-markers": {
+			"version": "6.5.3",
+			"resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz",
+			"integrity": "sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.0.tgz",
+			"integrity": "sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.0.tgz",
+			"integrity": "sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.0.tgz",
+			"integrity": "sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.0.tgz",
+			"integrity": "sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.0.tgz",
+			"integrity": "sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.0.tgz",
+			"integrity": "sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.0.tgz",
+			"integrity": "sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.0.tgz",
+			"integrity": "sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.0.tgz",
+			"integrity": "sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.0.tgz",
+			"integrity": "sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.0.tgz",
+			"integrity": "sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-musl": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.0.tgz",
+			"integrity": "sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.0.tgz",
+			"integrity": "sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-musl": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.0.tgz",
+			"integrity": "sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.0.tgz",
+			"integrity": "sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-musl": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.0.tgz",
+			"integrity": "sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.0.tgz",
+			"integrity": "sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.0.tgz",
+			"integrity": "sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.0.tgz",
+			"integrity": "sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-openbsd-x64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.0.tgz",
+			"integrity": "sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			]
+		},
+		"node_modules/@rollup/rollup-openharmony-arm64": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.0.tgz",
+			"integrity": "sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.0.tgz",
+			"integrity": "sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.0.tgz",
+			"integrity": "sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-gnu": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.0.tgz",
+			"integrity": "sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.0.tgz",
+			"integrity": "sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
@@ -1191,123 +1798,453 @@
 		"node_modules/@sphinxxxx/color-conversion": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
-			"integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+			"integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw==",
+			"license": "ISC"
+		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+			"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@sveltejs/acorn-typescript": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.9.tgz",
+			"integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8.9.0"
+			}
 		},
 		"node_modules/@sveltejs/adapter-auto": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.2.2.tgz",
-			"integrity": "sha512-Mso5xPCA8zgcKrv+QioVlqMZkyUQ5MjDJiEPuG/Z7cV/5tmwV7LmcVWk5tZ+H0NCOV1x12AsoSpt/CwFwuVXMA==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.3.1.tgz",
+			"integrity": "sha512-5Sc7WAxYdL6q9j/+D0jJKjGREGlfIevDyHSQ2eNETHcB1TKlQWHcAo8AS8H1QdjNvSXpvOwNjykDUHPEAyGgdQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"import-meta-resolve": "^4.1.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
+		"node_modules/@sveltejs/adapter-static": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.10.tgz",
+			"integrity": "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
+		"node_modules/@sveltejs/kit": {
+			"version": "2.55.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.55.0.tgz",
+			"integrity": "sha512-MdFRjevVxmAknf2NbaUkDF16jSIzXMWd4Nfah0Qp8TtQVoSp3bV4jKt8mX7z7qTUTWvgSaxtR0EG5WJf53gcuA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/spec": "^1.0.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/cookie": "^0.6.0",
+				"acorn": "^8.14.1",
+				"cookie": "^0.6.0",
+				"devalue": "^5.6.4",
+				"esm-env": "^1.2.2",
+				"kleur": "^4.1.5",
+				"magic-string": "^0.30.5",
+				"mrmime": "^2.0.0",
+				"set-cookie-parser": "^3.0.0",
+				"sirv": "^3.0.0"
+			},
+			"bin": {
+				"svelte-kit": "svelte-kit.js"
+			},
+			"engines": {
+				"node": ">=18.13"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": "^1.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0 || ^7.0.0",
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": "^5.3.3",
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0 || ^8.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@opentelemetry/api": {
+					"optional": true
+				},
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-5.1.1.tgz",
+			"integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
 			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+				"debug": "^4.4.1",
+				"deepmerge": "^4.3.1",
+				"kleur": "^4.1.5",
+				"magic-string": "^0.30.17",
+				"vitefu": "^1.0.6"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-4.0.1.tgz",
+			"integrity": "sha512-J/Nmb2Q2y7mck2hyCX4ckVHcR5tu2J+MtBEQqpDrrgELZ2uvraQcK/ioCV61AqkdXFgriksOKIceDcQmqnGhVw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.3.7"
+			},
+			"engines": {
+				"node": "^18.0.0 || ^20.0.0 || >=22"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^5.0.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.0.0"
+			}
+		},
+		"node_modules/@sveltestrap/sveltestrap": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-7.1.0.tgz",
+			"integrity": "sha512-TpIx25kqLV+z+VD3yfqYayOI1IaCeWFbT0uqM6NfA4vQgDs9PjFwmjkU4YEAlV/ngs9e7xPmaRWE7lkrg4Miow==",
+			"license": "MIT",
+			"dependencies": {
+				"@popperjs/core": "^2.11.8"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+			}
+		},
+		"node_modules/@tailwindcss/forms": {
+			"version": "0.5.11",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.11.tgz",
+			"integrity": "sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==",
+			"license": "MIT",
+			"dependencies": {
+				"mini-svg-data-uri": "^1.2.3"
+			},
+			"peerDependencies": {
+				"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+			}
+		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+			"integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.5",
+				"enhanced-resolve": "^5.19.0",
+				"jiti": "^2.6.1",
+				"lightningcss": "1.32.0",
+				"magic-string": "^0.30.21",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.2.2"
+			}
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+			"integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 20"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.2.2",
+				"@tailwindcss/oxide-darwin-arm64": "4.2.2",
+				"@tailwindcss/oxide-darwin-x64": "4.2.2",
+				"@tailwindcss/oxide-freebsd-x64": "4.2.2",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.2",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.2.2",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.2.2",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.2.2",
+				"@tailwindcss/oxide-linux-x64-musl": "4.2.2",
+				"@tailwindcss/oxide-wasm32-wasi": "4.2.2",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.2.2",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.2.2"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-android-arm64": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+			"integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+			"integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-x64": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+			"integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-freebsd-x64": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+			"integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+			"integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+			"integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+			"integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+			"integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-musl": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+			"integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+			"integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+			"bundleDependencies": [
+				"@napi-rs/wasm-runtime",
+				"@emnapi/core",
+				"@emnapi/runtime",
+				"@tybys/wasm-util",
+				"@emnapi/wasi-threads",
+				"tslib"
+			],
+			"cpu": [
+				"wasm32"
+			],
+			"license": "MIT",
+			"optional": true,
 			"dependencies": {
-				"import-meta-resolve": "^4.1.0"
+				"@emnapi/core": "^1.8.1",
+				"@emnapi/runtime": "^1.8.1",
+				"@emnapi/wasi-threads": "^1.1.0",
+				"@napi-rs/wasm-runtime": "^1.1.1",
+				"@tybys/wasm-util": "^0.10.1",
+				"tslib": "^2.8.1"
 			},
-			"peerDependencies": {
-				"@sveltejs/kit": "^2.0.0"
+			"engines": {
+				"node": ">=14.0.0"
 			}
 		},
-		"node_modules/@sveltejs/adapter-static": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.2.tgz",
-			"integrity": "sha512-/EBFydZDwfwFfFEuF1vzUseBoRziwKP7AoHAwv+Ot3M084sE/HTVBHf9mCmXfdM9ijprY5YEugZjleflncX5fQ==",
-			"peerDependencies": {
-				"@sveltejs/kit": "^2.0.0"
+		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+			"integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 20"
 			}
 		},
-		"node_modules/@sveltejs/kit": {
-			"version": "2.5.20",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.20.tgz",
-			"integrity": "sha512-47rJ5BoYwURE/Rp7FNMLp3NzdbWC9DQ/PmKd0mebxT2D/PrPxZxcLImcD3zsWdX2iS6oJk8ITJbO/N2lWnnUqA==",
-			"hasInstallScript": true,
-			"dependencies": {
-				"@types/cookie": "^0.6.0",
-				"cookie": "^0.6.0",
-				"devalue": "^5.0.0",
-				"esm-env": "^1.0.0",
-				"import-meta-resolve": "^4.1.0",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.5",
-				"mrmime": "^2.0.0",
-				"sade": "^1.8.1",
-				"set-cookie-parser": "^2.6.0",
-				"sirv": "^2.0.4",
-				"tiny-glob": "^0.2.9"
-			},
-			"bin": {
-				"svelte-kit": "svelte-kit.js"
-			},
+		"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+			"integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
 			"engines": {
-				"node": ">=18.13"
-			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.3"
+				"node": ">= 20"
 			}
 		},
-		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.1.tgz",
-			"integrity": "sha512-rimpFEAboBBHIlzISibg94iP09k/KYdHgVhJlcsTfn7KMBhc70jFX/GRWkRdFCc2fdnk+4+Bdfej23cMDnJS6A==",
+		"node_modules/@tailwindcss/typography": {
+			"version": "0.5.19",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+			"integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+			"license": "MIT",
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-				"debug": "^4.3.4",
-				"deepmerge": "^4.3.1",
-				"kleur": "^4.1.5",
-				"magic-string": "^0.30.10",
-				"svelte-hmr": "^0.16.0",
-				"vitefu": "^0.2.5"
-			},
-			"engines": {
-				"node": "^18.0.0 || >=20"
+				"postcss-selector-parser": "6.0.10"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
+				"tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
 			}
 		},
-		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-			"integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+		"node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"license": "MIT",
 			"dependencies": {
-				"debug": "^4.3.4"
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
-			},
-			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
-				"vite": "^5.0.0"
+				"node": ">=4"
 			}
 		},
-		"node_modules/@sveltestrap/sveltestrap": {
-			"version": "6.2.7",
-			"resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-6.2.7.tgz",
-			"integrity": "sha512-WwLLfAFUb42BGuRrf3Vbct30bQMzlEMMipN/MfxhjuLTmLQeW9muVJfPyvjtWS+mY+RjkSCoHvAp/ZobP1NLlQ==",
+		"node_modules/@tailwindcss/vite": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.2.tgz",
+			"integrity": "sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==",
+			"license": "MIT",
 			"dependencies": {
-				"@popperjs/core": "^2.11.8"
+				"@tailwindcss/node": "4.2.2",
+				"@tailwindcss/oxide": "4.2.2",
+				"tailwindcss": "4.2.2"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+				"vite": "^5.2.0 || ^6 || ^7 || ^8"
 			}
 		},
 		"node_modules/@twilio/voice-errors": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/@twilio/voice-errors/-/voice-errors-1.4.0.tgz",
-			"integrity": "sha512-7BCg9MPz+KQ0JJ6Rl5W3Zw3E+i3Tt77VZw3/2i3Z+IPZITmCOQLu1nKx/0Nlj505Xtfr7eY9Mcern5PfIoBW0w=="
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/@twilio/voice-errors/-/voice-errors-1.7.0.tgz",
+			"integrity": "sha512-9TvniWpzU0iy6SYFAcDP+HG+/mNz2yAHSs7+m0DZk86lE+LoTB6J/ZONTPuxXrXWi4tso/DulSHuA0w7nIQtGg==",
+			"license": "BSD-3-Clause"
 		},
 		"node_modules/@twilio/voice-sdk": {
-			"version": "2.11.2",
-			"resolved": "https://registry.npmjs.org/@twilio/voice-sdk/-/voice-sdk-2.11.2.tgz",
-			"integrity": "sha512-ZF3lzyZgd1HVFvgpExo4swBwWVCp1W6nmxHMZddxdvRdJ3xlbJt0mJ9Lo202its1Zf7uhnjYbQ04BZzkCHZ5rw==",
+			"version": "2.18.1",
+			"resolved": "https://registry.npmjs.org/@twilio/voice-sdk/-/voice-sdk-2.18.1.tgz",
+			"integrity": "sha512-4IvFgQOWrnluJrtJ79s1B4CiLbXLG7DKAXJW/uzgEsG9zQP30avs4d98LmtpOFr9ozd1kdKtjhKoqD+RbsY+MA==",
+			"license": "Apache-2.0",
 			"dependencies": {
-				"@twilio/voice-errors": "1.4.0",
-				"@types/md5": "2.3.2",
+				"@twilio/voice-errors": "1.7.0",
+				"@types/events": "^3.0.3",
 				"events": "3.3.0",
-				"loglevel": "1.6.7",
-				"md5": "2.3.0",
-				"rtcpeerconnection-shim": "1.2.8"
+				"loglevel": "1.9.2",
+				"tslib": "2.8.1"
 			},
 			"engines": {
 				"node": ">= 12"
@@ -1316,58 +2253,78 @@
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/@types/drawflow": {
 			"version": "0.0.10",
 			"resolved": "https://registry.npmjs.org/@types/drawflow/-/drawflow-0.0.10.tgz",
 			"integrity": "sha512-NH82dNndMKff6tuaewNwevQb6hlTkZ8BteST+G7+ULGsE0k+Dx9ljQapVl0aW7v0bEhFfcDf1tt4y2FZWeX04A==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/@types/estree": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+			"dev": true,
+			"license": "MIT"
 		},
-		"node_modules/@types/marked": {
-			"version": "5.0.2",
-			"resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
-			"integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg=="
+		"node_modules/@types/events": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.3.tgz",
+			"integrity": "sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==",
+			"license": "MIT"
 		},
-		"node_modules/@types/md5": {
-			"version": "2.3.2",
-			"resolved": "https://registry.npmjs.org/@types/md5/-/md5-2.3.2.tgz",
-			"integrity": "sha512-v+JFDu96+UYJ3/UWzB0mEglIS//MZXgRaJ4ubUPwOM0gvLc/kcQ3TWNYwENEK7/EcXGQVrW8h/XqednSjBd/Og=="
+		"node_modules/@types/trusted-types": {
+			"version": "2.0.7",
+			"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+			"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+			"dev": true,
+			"license": "MIT"
 		},
-		"node_modules/@types/pug": {
-			"version": "2.0.10",
-			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.10.tgz",
-			"integrity": "sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==",
-			"dev": true
+		"node_modules/@typescript-eslint/types": {
+			"version": "8.57.2",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.57.2.tgz",
+			"integrity": "sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
 		},
 		"node_modules/@ungap/structured-clone": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-			"dev": true
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+			"integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/@vincjo/datatables": {
-			"version": "1.14.10",
-			"resolved": "https://registry.npmjs.org/@vincjo/datatables/-/datatables-1.14.10.tgz",
-			"integrity": "sha512-gtojSC/LKDHbh2ZGZeaAQ+lLltcmcSDDLkecgb9WpG7lHmd4b/1HUTtFWAJt43TnaK8SrciGugh9VRRZN53bpw==",
+			"version": "2.8.0",
+			"resolved": "https://registry.npmjs.org/@vincjo/datatables/-/datatables-2.8.0.tgz",
+			"integrity": "sha512-+Qa9E+Xd+xAOKnYEy7Hgq246sLzwq4GjrwLyWHVi9tbvLNXh4mLMObwy962hc6DYgFP4JRd+Y9PVnDlgSpphxw==",
+			"license": "MIT",
 			"peerDependencies": {
-				"svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+				"svelte": "^5.16.0"
 			}
 		},
 		"node_modules/@yr/monotone-cubic-spline": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
-			"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA=="
+			"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
+			"license": "MIT"
 		},
 		"node_modules/abort-controller": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
 			"integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+			"license": "MIT",
 			"dependencies": {
 				"event-target-shim": "^5.0.0"
 			},
@@ -1376,9 +2333,11 @@
 			}
 		},
 		"node_modules/acorn": {
-			"version": "8.12.1",
-			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
-			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+			"version": "8.16.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+			"integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -1391,15 +2350,17 @@
 			"resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
 			"integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
 			"dev": true,
+			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
 		"node_modules/ajv": {
-			"version": "6.12.6",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-			"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+			"version": "6.14.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+			"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.1",
 				"fast-json-stable-stringify": "^2.0.0",
@@ -1416,6 +2377,7 @@
 			"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
 			"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
@@ -1425,6 +2387,7 @@
 			"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
 			"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"color-convert": "^2.0.1"
 			},
@@ -1435,22 +2398,11 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
-		"node_modules/anymatch": {
-			"version": "3.1.3",
-			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dependencies": {
-				"normalize-path": "^3.0.0",
-				"picomatch": "^2.0.4"
-			},
-			"engines": {
-				"node": ">= 8"
-			}
-		},
 		"node_modules/apexcharts": {
-			"version": "3.51.0",
-			"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.51.0.tgz",
-			"integrity": "sha512-WpCdVdGiJjf9SAyEeg2rl3q5OqCcNqiEmH0+filMraUiH6Vqyn5GFeMMyH0pon44xjNr1G0xzIRERKRmsGEuRA==",
+			"version": "3.54.1",
+			"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz",
+			"integrity": "sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==",
+			"license": "MIT",
 			"dependencies": {
 				"@yr/monotone-cubic-spline": "^1.0.3",
 				"svg.draggable.js": "^2.2.2",
@@ -1465,28 +2417,33 @@
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
 			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-			"dev": true
+			"dev": true,
+			"license": "Python-2.0"
 		},
 		"node_modules/aria-query": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dependencies": {
-				"dequal": "^2.0.3"
+			"version": "5.3.1",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
+			"integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
 		"node_modules/asynckit": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"license": "MIT"
 		},
 		"node_modules/axios": {
-			"version": "1.7.3",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
-			"integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+			"version": "1.13.6",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.6.tgz",
+			"integrity": "sha512-ChTCHMouEe2kn713WHbQGcuYrr6fXTBiu460OTwWrWob16g1bXn4vtz07Ope7ewMozJAnEquLk5lWQWtBig9DQ==",
+			"license": "MIT",
 			"dependencies": {
-				"follow-redirects": "^1.15.6",
-				"form-data": "^4.0.0",
+				"follow-redirects": "^1.15.11",
+				"form-data": "^4.0.5",
 				"proxy-from-env": "^1.1.0"
 			}
 		},
@@ -1494,6 +2451,8 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"dev": true,
+			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -1502,23 +2461,13 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
 			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true
-		},
-		"node_modules/binary-extensions": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-			"integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-			"engines": {
-				"node": ">=8"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/bootstrap": {
-			"version": "5.3.3",
-			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
-			"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+			"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",
@@ -1529,44 +2478,27 @@
 					"url": "https://opencollective.com/bootstrap"
 				}
 			],
+			"license": "MIT",
 			"peerDependencies": {
 				"@popperjs/core": "^2.11.8"
 			}
 		},
 		"node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
 			}
 		},
-		"node_modules/braces": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-			"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-			"dependencies": {
-				"fill-range": "^7.1.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
-		"node_modules/buffer-crc32": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-1.0.0.tgz",
-			"integrity": "sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==",
-			"dev": true,
-			"engines": {
-				"node": ">=8.0.0"
-			}
-		},
 		"node_modules/call-bind-apply-helpers": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
 			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"function-bind": "^1.1.2"
@@ -1579,6 +2511,7 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
 			"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.2",
 				"get-intrinsic": "^1.3.0"
@@ -1595,6 +2528,7 @@
 			"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
 			"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -1604,6 +2538,7 @@
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
 			"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"ansi-styles": "^4.1.0",
 				"supports-color": "^7.1.0"
@@ -1615,18 +2550,11 @@
 				"url": "https://github.com/chalk/chalk?sponsor=1"
 			}
 		},
-		"node_modules/charenc": {
-			"version": "0.0.2",
-			"resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-			"integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/chart.js": {
-			"version": "4.4.3",
-			"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
-			"integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+			"version": "4.5.1",
+			"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+			"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+			"license": "MIT",
 			"dependencies": {
 				"@kurkle/color": "^0.3.0"
 			},
@@ -1635,43 +2563,25 @@
 			}
 		},
 		"node_modules/chokidar": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-			"integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"license": "MIT",
 			"dependencies": {
-				"anymatch": "~3.1.2",
-				"braces": "~3.0.2",
-				"glob-parent": "~5.1.2",
-				"is-binary-path": "~2.1.0",
-				"is-glob": "~4.0.1",
-				"normalize-path": "~3.0.0",
-				"readdirp": "~3.6.0"
+				"readdirp": "^4.0.1"
 			},
 			"engines": {
-				"node": ">= 8.10.0"
+				"node": ">= 14.16.0"
 			},
 			"funding": {
 				"url": "https://paulmillr.com/funding/"
-			},
-			"optionalDependencies": {
-				"fsevents": "~2.3.2"
-			}
-		},
-		"node_modules/chokidar/node_modules/glob-parent": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dependencies": {
-				"is-glob": "^4.0.1"
-			},
-			"engines": {
-				"node": ">= 6"
 			}
 		},
 		"node_modules/cli-color": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/cli-color/-/cli-color-2.0.4.tgz",
 			"integrity": "sha512-zlnpg0jNcibNrO7GG9IeHH7maWFeCz+Ja1wx/7tZNU5ASSSSZ+/qZciM0/LHCYxSdqv5h2sdbQ/PXYdOuetXvA==",
+			"license": "ISC",
 			"dependencies": {
 				"d": "^1.0.1",
 				"es5-ext": "^0.10.64",
@@ -1683,37 +2593,21 @@
 				"node": ">=0.10"
 			}
 		},
-		"node_modules/code-red": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.10.0",
-				"estree-walker": "^3.0.3",
-				"periscopic": "^3.1.0"
-			}
-		},
-		"node_modules/codemirror": {
-			"version": "6.0.2",
-			"resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
-			"integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
-			"peer": true,
-			"dependencies": {
-				"@codemirror/autocomplete": "^6.0.0",
-				"@codemirror/commands": "^6.0.0",
-				"@codemirror/language": "^6.0.0",
-				"@codemirror/lint": "^6.0.0",
-				"@codemirror/search": "^6.0.0",
-				"@codemirror/state": "^6.0.0",
-				"@codemirror/view": "^6.0.0"
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
 			}
 		},
 		"node_modules/codemirror-wrapped-line-indent": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/codemirror-wrapped-line-indent/-/codemirror-wrapped-line-indent-1.0.8.tgz",
-			"integrity": "sha512-5UwuHCz4oAZuvot1DbfFxSxJacTESdNGa/KpJD7HfpVpDAJdgB1vV9OG4b4pkJqPWuOfIpFLTQEKS85kTpV+XA==",
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/codemirror-wrapped-line-indent/-/codemirror-wrapped-line-indent-1.0.9.tgz",
+			"integrity": "sha512-oc976hHLt35u6Ojbhub+IWOxEpapZSqYieLEdGhsgFZ4rtYQtdb5KjxzgjCCyVe3t0yk+a6hmaIOEsjU/tZRxQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"@codemirror/language": "^6.9.0",
 				"@codemirror/state": "^6.2.1",
@@ -1725,6 +2619,7 @@
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
 			"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"color-name": "~1.1.4"
 			},
@@ -1736,17 +2631,20 @@
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
 			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/colord": {
 			"version": "2.9.3",
 			"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+			"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+			"license": "MIT"
 		},
 		"node_modules/combined-stream": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
 			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"license": "MIT",
 			"dependencies": {
 				"delayed-stream": "~1.0.0"
 			},
@@ -1758,12 +2656,15 @@
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -1771,13 +2672,15 @@
 		"node_modules/crelt": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
-			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+			"license": "MIT"
 		},
 		"node_modules/cross-spawn": {
-			"version": "7.0.3",
-			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-			"integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+			"version": "7.0.6",
+			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+			"integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"path-key": "^3.1.0",
 				"shebang-command": "^2.0.0",
@@ -1787,31 +2690,11 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/crypt": {
-			"version": "0.0.2",
-			"resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-			"integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
-			"engines": {
-				"node": "*"
-			}
-		},
-		"node_modules/css-tree": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dependencies": {
-				"mdn-data": "2.0.30",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-			}
-		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"cssesc": "bin/cssesc"
 			},
@@ -1823,6 +2706,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/d/-/d-1.0.2.tgz",
 			"integrity": "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==",
+			"license": "ISC",
 			"dependencies": {
 				"es5-ext": "^0.10.64",
 				"type": "^2.7.2"
@@ -1832,11 +2716,13 @@
 			}
 		},
 		"node_modules/debug": {
-			"version": "4.3.6",
-			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-			"integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"ms": "2.1.2"
+				"ms": "^2.1.3"
 			},
 			"engines": {
 				"node": ">=6.0"
@@ -1847,16 +2733,24 @@
 				}
 			}
 		},
+		"node_modules/decimal.js": {
+			"version": "10.6.0",
+			"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+			"integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+			"license": "MIT"
+		},
 		"node_modules/deep-is": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
 			"integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/deepmerge": {
 			"version": "4.3.1",
 			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
 			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -1865,36 +2759,32 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
 			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.4.0"
 			}
 		},
-		"node_modules/dequal": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
-		"node_modules/detect-indent": {
-			"version": "6.1.0",
-			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
-			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-			"dev": true,
+		"node_modules/detect-libc": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+			"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+			"license": "Apache-2.0",
 			"engines": {
 				"node": ">=8"
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
+			"version": "5.6.4",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.4.tgz",
+			"integrity": "sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/diff-sequences": {
 			"version": "29.6.3",
 			"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
 			"integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+			"license": "MIT",
 			"engines": {
 				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
@@ -1904,6 +2794,7 @@
 			"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
 			"integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
 				"esutils": "^2.0.2"
 			},
@@ -1914,12 +2805,14 @@
 		"node_modules/drawflow": {
 			"version": "0.0.59",
 			"resolved": "https://registry.npmjs.org/drawflow/-/drawflow-0.0.59.tgz",
-			"integrity": "sha512-HJM/8trYzignViTMzUSpskRclDhE62jM6oxjgqEJQBbkX9QvDG7JJwRlvdjqnjfL192Pdb0aIysrZMUqG8/vyg=="
+			"integrity": "sha512-HJM/8trYzignViTMzUSpskRclDhE62jM6oxjgqEJQBbkX9QvDG7JJwRlvdjqnjfL192Pdb0aIysrZMUqG8/vyg==",
+			"license": "MIT"
 		},
 		"node_modules/dunder-proto": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
 			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.1",
 				"es-errors": "^1.3.0",
@@ -1934,16 +2827,31 @@
 			"resolved": "https://registry.npmjs.org/easy-reactive/-/easy-reactive-1.0.4.tgz",
 			"integrity": "sha512-dFVouegPctMf6XT5si+sRByBWUQE30n99TW0Y45Y7mccmNsbSl4uXA2sBGI8zCDZqXjhb8ouA3wVVhSSGpXk5Q==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
 				"lodash.clonedeep": "^4.5.0",
 				"lodash.get": "^4.4.2",
 				"lodash.isequal": "^4.5.0"
 			}
 		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.20.1",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+			"integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.3.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/es-define-property": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
 			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -1952,6 +2860,7 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
 			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -1960,6 +2869,7 @@
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
 			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0"
 			},
@@ -1967,11 +2877,27 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/es5-ext": {
 			"version": "0.10.64",
 			"resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.64.tgz",
 			"integrity": "sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==",
 			"hasInstallScript": true,
+			"license": "ISC",
 			"dependencies": {
 				"es6-iterator": "^2.0.3",
 				"es6-symbol": "^3.1.3",
@@ -1986,22 +2912,18 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
 			"integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+			"license": "MIT",
 			"dependencies": {
 				"d": "1",
 				"es5-ext": "^0.10.35",
 				"es6-symbol": "^3.1.1"
 			}
 		},
-		"node_modules/es6-promise": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
-			"dev": true
-		},
 		"node_modules/es6-symbol": {
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.4.tgz",
 			"integrity": "sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==",
+			"license": "ISC",
 			"dependencies": {
 				"d": "^1.0.2",
 				"ext": "^1.7.0"
@@ -2014,6 +2936,7 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
 			"integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+			"license": "ISC",
 			"dependencies": {
 				"d": "1",
 				"es5-ext": "^0.10.46",
@@ -2026,6 +2949,7 @@
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
 			"integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
 			"hasInstallScript": true,
+			"license": "MIT",
 			"bin": {
 				"esbuild": "bin/esbuild"
 			},
@@ -2063,6 +2987,7 @@
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
 			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			},
@@ -2071,16 +2996,18 @@
 			}
 		},
 		"node_modules/eslint": {
-			"version": "8.57.0",
-			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
-			"integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+			"version": "8.57.1",
+			"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz",
+			"integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
+			"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
 				"@eslint/eslintrc": "^2.1.4",
-				"@eslint/js": "8.57.0",
-				"@humanwhocodes/config-array": "^0.11.14",
+				"@eslint/js": "8.57.1",
+				"@humanwhocodes/config-array": "^0.13.0",
 				"@humanwhocodes/module-importer": "^1.0.1",
 				"@nodelib/fs.walk": "^1.2.8",
 				"@ungap/structured-clone": "^1.2.0",
@@ -2130,6 +3057,7 @@
 			"resolved": "https://registry.npmjs.org/eslint-compat-utils/-/eslint-compat-utils-0.5.1.tgz",
 			"integrity": "sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"semver": "^7.5.4"
 			},
@@ -2141,10 +3069,11 @@
 			}
 		},
 		"node_modules/eslint-config-prettier": {
-			"version": "9.1.0",
-			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
-			"integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+			"version": "9.1.2",
+			"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
+			"integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
 			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"eslint-config-prettier": "bin/cli.js"
 			},
@@ -2153,22 +3082,23 @@
 			}
 		},
 		"node_modules/eslint-plugin-svelte": {
-			"version": "2.43.0",
-			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.43.0.tgz",
-			"integrity": "sha512-REkxQWvg2pp7QVLxQNa+dJ97xUqRe7Y2JJbSWkHSuszu0VcblZtXkPBPckkivk99y5CdLw4slqfPylL2d/X4jQ==",
+			"version": "2.46.1",
+			"resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz",
+			"integrity": "sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.4.0",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"eslint-compat-utils": "^0.5.1",
 				"esutils": "^2.0.3",
-				"known-css-properties": "^0.34.0",
+				"known-css-properties": "^0.35.0",
 				"postcss": "^8.4.38",
 				"postcss-load-config": "^3.1.4",
 				"postcss-safe-parser": "^6.0.0",
 				"postcss-selector-parser": "^6.1.0",
 				"semver": "^7.6.2",
-				"svelte-eslint-parser": "^0.41.0"
+				"svelte-eslint-parser": "^0.43.0"
 			},
 			"engines": {
 				"node": "^14.17.0 || >=16.0.0"
@@ -2178,7 +3108,7 @@
 			},
 			"peerDependencies": {
 				"eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0",
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"svelte": {
@@ -2191,6 +3121,7 @@
 			"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
 			"integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"esrecurse": "^4.3.0",
 				"estraverse": "^5.2.0"
@@ -2207,6 +3138,7 @@
 			"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
 			"integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"engines": {
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			},
@@ -2215,22 +3147,17 @@
 			}
 		},
 		"node_modules/esm-env": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
-		},
-		"node_modules/esm-env-robust": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/esm-env-robust/-/esm-env-robust-0.0.3.tgz",
-			"integrity": "sha512-90Gnuw2DALOqlL1581VxP3GHPUNHX9U+fQ+8FNcTTFClhY5gEggAAnJ3q1b2Oq23knRsjv8YpNeMRPaMLUymOA==",
-			"dependencies": {
-				"esm-env": "^1.0.0"
-			}
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/esniff": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/esniff/-/esniff-2.0.1.tgz",
 			"integrity": "sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==",
+			"license": "ISC",
 			"dependencies": {
 				"d": "^1.0.1",
 				"es5-ext": "^0.10.62",
@@ -2246,6 +3173,7 @@
 			"resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
 			"integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"acorn": "^8.9.0",
 				"acorn-jsx": "^5.3.2",
@@ -2259,10 +3187,11 @@
 			}
 		},
 		"node_modules/esquery": {
-			"version": "1.6.0",
-			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-			"integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+			"version": "1.7.0",
+			"resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+			"integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
 			"dev": true,
+			"license": "BSD-3-Clause",
 			"dependencies": {
 				"estraverse": "^5.1.0"
 			},
@@ -2270,11 +3199,23 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/esrap": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.2.4.tgz",
+			"integrity": "sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"@typescript-eslint/types": "^8.2.0"
+			}
+		},
 		"node_modules/esrecurse": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
 			"integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"estraverse": "^5.2.0"
 			},
@@ -2287,23 +3228,23 @@
 			"resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
 			"integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=4.0"
 			}
 		},
 		"node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+			"license": "MIT"
 		},
 		"node_modules/esutils": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
 			"integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2312,6 +3253,7 @@
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
 			"integrity": "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==",
+			"license": "MIT",
 			"dependencies": {
 				"d": "1",
 				"es5-ext": "~0.10.14"
@@ -2321,6 +3263,7 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
 			"integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -2329,6 +3272,7 @@
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
 			"integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.8.x"
 			}
@@ -2337,6 +3281,7 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
 			"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=12.0.0"
 			}
@@ -2345,6 +3290,7 @@
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/ext/-/ext-1.7.0.tgz",
 			"integrity": "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==",
+			"license": "ISC",
 			"dependencies": {
 				"type": "^2.7.2"
 			}
@@ -2352,48 +3298,89 @@
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+			"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+			"license": "MIT"
 		},
 		"node_modules/fast-json-stable-stringify": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
 			"integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/fast-levenshtein": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
 			"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/fast-uri": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.1.tgz",
-			"integrity": "sha512-MWipKbbYiYI0UC7cl8m/i/IWTqfC8YXsqjzybjddLsFjStroQzsHXkc73JutMvBiXmOvapk+axIl79ig5t55Bw=="
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+			"integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fastify"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/fastify"
+				}
+			],
+			"license": "BSD-3-Clause"
 		},
 		"node_modules/fastq": {
-			"version": "1.17.1",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-			"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+			"version": "1.20.1",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+			"integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/fetch-cookie": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz",
 			"integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==",
+			"license": "Unlicense",
 			"dependencies": {
 				"set-cookie-parser": "^2.4.8",
 				"tough-cookie": "^4.0.0"
 			}
 		},
+		"node_modules/fetch-cookie/node_modules/set-cookie-parser": {
+			"version": "2.7.2",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+			"integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+			"license": "MIT"
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
 			"integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"flat-cache": "^3.0.4"
 			},
@@ -2405,6 +3392,7 @@
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
 			"integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+			"license": "MIT",
 			"dependencies": {
 				"tslib": "^2.4.0"
 			},
@@ -2412,22 +3400,12 @@
 				"node": ">= 12"
 			}
 		},
-		"node_modules/fill-range": {
-			"version": "7.1.1",
-			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-			"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-			"dependencies": {
-				"to-regex-range": "^5.0.1"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/find-up": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
 			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"locate-path": "^6.0.0",
 				"path-exists": "^4.0.0"
@@ -2444,6 +3422,7 @@
 			"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
 			"integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"flatted": "^3.2.9",
 				"keyv": "^4.5.3",
@@ -2456,24 +3435,27 @@
 		"node_modules/flatpickr": {
 			"version": "4.6.13",
 			"resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
-			"integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+			"integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==",
+			"license": "MIT"
 		},
 		"node_modules/flatted": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
-			"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
-			"dev": true
+			"version": "3.4.2",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/follow-redirects": {
-			"version": "1.15.6",
-			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-			"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+			"version": "1.15.11",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+			"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
 			"funding": [
 				{
 					"type": "individual",
 					"url": "https://github.com/sponsors/RubenVerborgh"
 				}
 			],
+			"license": "MIT",
 			"engines": {
 				"node": ">=4.0"
 			},
@@ -2484,12 +3466,15 @@
 			}
 		},
 		"node_modules/form-data": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-			"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+			"integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+			"license": "MIT",
 			"dependencies": {
 				"asynckit": "^0.4.0",
 				"combined-stream": "^1.0.8",
+				"es-set-tostringtag": "^2.1.0",
+				"hasown": "^2.0.2",
 				"mime-types": "^2.1.12"
 			},
 			"engines": {
@@ -2500,13 +3485,16 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"dev": true
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
 			"hasInstallScript": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
@@ -2516,22 +3504,24 @@
 			}
 		},
 		"node_modules/fullcalendar": {
-			"version": "6.1.15",
-			"resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-6.1.15.tgz",
-			"integrity": "sha512-CFnh1yswjRh9puJVDk8VGwTlyZ6eXxr4qLI7QCA0+bozyAm+BluP1US5mOtgk0gEq23nQxGSNDoBvAraz++saQ==",
+			"version": "6.1.20",
+			"resolved": "https://registry.npmjs.org/fullcalendar/-/fullcalendar-6.1.20.tgz",
+			"integrity": "sha512-7lz2P+0YdA86fBTwfr/ducajrM3zUw5o6uoiiYk9xMqcoTf003xBh3mpzW5om9slfAMwGgCBh0KsiYcU1JY1eQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@fullcalendar/core": "~6.1.15",
-				"@fullcalendar/daygrid": "~6.1.15",
-				"@fullcalendar/interaction": "~6.1.15",
-				"@fullcalendar/list": "~6.1.15",
-				"@fullcalendar/multimonth": "~6.1.15",
-				"@fullcalendar/timegrid": "~6.1.15"
+				"@fullcalendar/core": "~6.1.20",
+				"@fullcalendar/daygrid": "~6.1.20",
+				"@fullcalendar/interaction": "~6.1.20",
+				"@fullcalendar/list": "~6.1.20",
+				"@fullcalendar/multimonth": "~6.1.20",
+				"@fullcalendar/timegrid": "~6.1.20"
 			}
 		},
 		"node_modules/function-bind": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
 			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"license": "MIT",
 			"funding": {
 				"url": "https://github.com/sponsors/ljharb"
 			}
@@ -2540,6 +3530,7 @@
 			"version": "1.3.0",
 			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
 			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.2",
 				"es-define-property": "^1.0.1",
@@ -2563,6 +3554,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
 			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"license": "MIT",
 			"dependencies": {
 				"dunder-proto": "^1.0.1",
 				"es-object-atoms": "^1.0.0"
@@ -2575,8 +3567,9 @@
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"deprecated": "Glob versions prior to v9 are no longer supported",
+			"deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
 				"inflight": "^1.0.4",
@@ -2597,6 +3590,7 @@
 			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
 			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"is-glob": "^4.0.3"
 			},
@@ -2609,6 +3603,7 @@
 			"resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
 			"integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"type-fest": "^0.20.2"
 			},
@@ -2622,17 +3617,20 @@
 		"node_modules/globalyzer": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+			"license": "MIT"
 		},
 		"node_modules/globrex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+			"license": "MIT"
 		},
 		"node_modules/gopd": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
 			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -2644,19 +3642,21 @@
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
 			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-			"dev": true
+			"license": "ISC"
 		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
 			"integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/has-flag": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
 			"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
@@ -2665,6 +3665,22 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
 			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -2676,6 +3692,7 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
 			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"license": "MIT",
 			"dependencies": {
 				"function-bind": "^1.1.2"
 			},
@@ -2684,29 +3701,33 @@
 			}
 		},
 		"node_modules/ignore": {
-			"version": "5.3.1",
-			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-			"integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+			"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 4"
 			}
 		},
 		"node_modules/immutable": {
-			"version": "4.3.7",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
-			"integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw=="
+			"version": "5.1.5",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+			"integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+			"license": "MIT"
 		},
 		"node_modules/immutable-json-patch": {
-			"version": "6.0.1",
-			"resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-6.0.1.tgz",
-			"integrity": "sha512-BHL/cXMjwFZlTOffiWNdY8ZTvNyYLrutCnWxrcKPHr5FqpAb6vsO6WWSPnVSys3+DruFN6lhHJJPHi8uELQL5g=="
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-6.0.2.tgz",
+			"integrity": "sha512-KwCA5DXJiyldda8SPha1zB+6+vbEi5/jRRcYii/6yFXlyu9ZjiSH/wPq8Ri2Hk8iGjjTMcHW3Z21S4MOpl7sOw==",
+			"license": "ISC"
 		},
 		"node_modules/import-fresh": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-			"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+			"integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"parent-module": "^1.0.0",
 				"resolve-from": "^4.0.0"
@@ -2719,9 +3740,11 @@
 			}
 		},
 		"node_modules/import-meta-resolve": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
-			"integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+			"integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+			"dev": true,
+			"license": "MIT",
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/wooorm"
@@ -2732,6 +3755,7 @@
 			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
 			"integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.8.19"
 			}
@@ -2742,6 +3766,7 @@
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
 			"deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -2751,39 +3776,27 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"dev": true
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/intl-messageformat": {
-			"version": "10.5.14",
-			"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.14.tgz",
-			"integrity": "sha512-IjC6sI0X7YRjjyVH9aUgdftcmZK7WXdHeil4KwbjDnRWjnVitKpAx3rr6t6di1joFp5188VqKcobOPA6mCLG/w==",
-			"dependencies": {
-				"@formatjs/ecma402-abstract": "2.0.0",
-				"@formatjs/fast-memoize": "2.2.0",
-				"@formatjs/icu-messageformat-parser": "2.7.8",
-				"tslib": "^2.4.0"
-			}
-		},
-		"node_modules/is-binary-path": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+			"version": "10.7.18",
+			"resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.18.tgz",
+			"integrity": "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
-				"binary-extensions": "^2.0.0"
-			},
-			"engines": {
-				"node": ">=8"
+				"@formatjs/ecma402-abstract": "2.3.6",
+				"@formatjs/fast-memoize": "2.2.7",
+				"@formatjs/icu-messageformat-parser": "2.11.4",
+				"tslib": "^2.8.0"
 			}
 		},
-		"node_modules/is-buffer": {
-			"version": "1.1.6",
-			"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-			"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+			"devOptional": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -2792,6 +3805,8 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+			"devOptional": true,
+			"license": "MIT",
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -2799,19 +3814,12 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/is-number": {
-			"version": "7.0.0",
-			"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"engines": {
-				"node": ">=0.12.0"
-			}
-		},
 		"node_modules/is-path-inside": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
 			"integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
@@ -2819,35 +3827,50 @@
 		"node_modules/is-promise": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
-			"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+			"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+			"license": "MIT"
 		},
 		"node_modules/is-reference": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "*"
+				"@types/estree": "^1.0.6"
 			}
 		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-			"dev": true
+			"dev": true,
+			"license": "ISC"
+		},
+		"node_modules/jiti": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
 		},
 		"node_modules/jmespath": {
 			"version": "0.16.0",
 			"resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
 			"integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
+			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.6.0"
 			}
 		},
 		"node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"argparse": "^2.0.1"
 			},
@@ -2855,33 +3878,65 @@
 				"js-yaml": "bin/js-yaml.js"
 			}
 		},
+		"node_modules/jsep": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/jsep/-/jsep-1.4.0.tgz",
+			"integrity": "sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 10.16.0"
+			}
+		},
 		"node_modules/json-buffer": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
 			"integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
 			"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/json-source-map": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmjs.org/json-source-map/-/json-source-map-0.6.1.tgz",
-			"integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
+			"integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg==",
+			"license": "MIT"
 		},
 		"node_modules/json-stable-stringify-without-jsonify": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
 			"integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/jsonpath-plus": {
+			"version": "10.4.0",
+			"resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.4.0.tgz",
+			"integrity": "sha512-T92WWatJXmhBbKsgH/0hl+jxjdXrifi5IKeMY02DWggRxX0UElcbVzPlmgLTbvsPeW1PasQ6xE2Q75stkhGbsA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jsep-plugin/assignment": "^1.3.0",
+				"@jsep-plugin/regex": "^1.0.4",
+				"jsep": "^1.4.0"
+			},
+			"bin": {
+				"jsonpath": "bin/jsonpath-cli.js",
+				"jsonpath-plus": "bin/jsonpath-cli.js"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
 		},
 		"node_modules/jsonrepair": {
-			"version": "3.8.0",
-			"resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.8.0.tgz",
-			"integrity": "sha512-89lrxpwp+IEcJ6kwglF0HH3Tl17J08JEpYfXnvvjdp4zV4rjSoGu2NdQHxBs7yTOk3ETjTn9du48pBy8iBqj1w==",
+			"version": "3.13.3",
+			"resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.13.3.tgz",
+			"integrity": "sha512-BTznj0owIt2CBAH/LTo7+1I5pMvl1e1033LRl/HUowlZmJOIhzC0zbX5bxMngLkfT4WnzPP26QnW5wMr2g9tsQ==",
+			"license": "ISC",
 			"bin": {
 				"jsonrepair": "bin/cli.js"
 			}
@@ -2891,6 +3946,7 @@
 			"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
 			"integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"json-buffer": "3.0.1"
 			}
@@ -2899,21 +3955,25 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
 		},
 		"node_modules/known-css-properties": {
-			"version": "0.34.0",
-			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
-			"integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
-			"dev": true
+			"version": "0.35.0",
+			"resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz",
+			"integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
 			"integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"prelude-ls": "^1.2.1",
 				"type-check": "~0.4.0"
@@ -2922,11 +3982,261 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/lightningcss": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+			"integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+			"license": "MPL-2.0",
+			"dependencies": {
+				"detect-libc": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"lightningcss-android-arm64": "1.32.0",
+				"lightningcss-darwin-arm64": "1.32.0",
+				"lightningcss-darwin-x64": "1.32.0",
+				"lightningcss-freebsd-x64": "1.32.0",
+				"lightningcss-linux-arm-gnueabihf": "1.32.0",
+				"lightningcss-linux-arm64-gnu": "1.32.0",
+				"lightningcss-linux-arm64-musl": "1.32.0",
+				"lightningcss-linux-x64-gnu": "1.32.0",
+				"lightningcss-linux-x64-musl": "1.32.0",
+				"lightningcss-win32-arm64-msvc": "1.32.0",
+				"lightningcss-win32-x64-msvc": "1.32.0"
+			}
+		},
+		"node_modules/lightningcss-android-arm64": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+			"integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-arm64": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+			"integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-x64": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+			"integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-freebsd-x64": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+			"integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm-gnueabihf": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+			"integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-gnu": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+			"integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-musl": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+			"integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-gnu": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+			"integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-musl": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+			"integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-arm64-msvc": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+			"integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-x64-msvc": {
+			"version": "1.32.0",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+			"integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
 		"node_modules/lilconfig": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
 			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			}
@@ -2934,18 +4244,22 @@
 		"node_modules/load-script": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/load-script/-/load-script-2.0.0.tgz",
-			"integrity": "sha512-km6cyoPW4rM22JMGb+SHUKPMZVDpUaMpMAKrv8UHWllIxc/qjgMGHD91nY+5hM+/NFs310OZ2pqQeJKs7HqWPA=="
+			"integrity": "sha512-km6cyoPW4rM22JMGb+SHUKPMZVDpUaMpMAKrv8UHWllIxc/qjgMGHD91nY+5hM+/NFs310OZ2pqQeJKs7HqWPA==",
+			"license": "MIT"
 		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
 			"integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"p-locate": "^5.0.0"
 			},
@@ -2957,71 +4271,83 @@
 			}
 		},
 		"node_modules/lodash": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
+			"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+			"license": "MIT"
 		},
 		"node_modules/lodash-es": {
-			"version": "4.17.21",
-			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+			"version": "4.17.23",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
+			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+			"license": "MIT"
 		},
 		"node_modules/lodash.clonedeep": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
 			"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/lodash.get": {
 			"version": "4.4.2",
 			"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
 			"integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
-			"dev": true
+			"deprecated": "This package is deprecated. Use the optional chaining (?.) operator instead.",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/lodash.isequal": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
 			"integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-			"dev": true
+			"deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/lodash.merge": {
 			"version": "4.6.2",
 			"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
 			"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/loglevel": {
-			"version": "1.6.7",
-			"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.7.tgz",
-			"integrity": "sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==",
+			"version": "1.9.2",
+			"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
+			"integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6.0"
 			},
 			"funding": {
 				"type": "tidelift",
-				"url": "https://tidelift.com/subscription/pkg/npm-loglevel?utm_medium=referral&utm_source=npm_fund"
+				"url": "https://tidelift.com/funding/github/npm/loglevel"
 			}
 		},
 		"node_modules/lru-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/lru-queue/-/lru-queue-0.1.0.tgz",
 			"integrity": "sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==",
+			"license": "MIT",
 			"dependencies": {
 				"es5-ext": "~0.10.2"
 			}
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.11",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-			"integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+			"version": "0.30.21",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+			"integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+			"license": "MIT",
 			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.5.0"
+				"@jridgewell/sourcemap-codec": "^1.5.5"
 			}
 		},
 		"node_modules/marked": {
 			"version": "12.0.2",
 			"resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
 			"integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+			"license": "MIT",
 			"bin": {
 				"marked": "bin/marked.js"
 			},
@@ -3033,34 +4359,22 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
 			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			}
 		},
-		"node_modules/md5": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-			"integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-			"dependencies": {
-				"charenc": "0.0.2",
-				"crypt": "0.0.2",
-				"is-buffer": "~1.1.6"
-			}
-		},
-		"node_modules/mdn-data": {
-			"version": "2.0.30",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-		},
 		"node_modules/memoize-one": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
-			"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+			"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+			"license": "MIT"
 		},
 		"node_modules/memoizee": {
 			"version": "0.4.17",
 			"resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.17.tgz",
 			"integrity": "sha512-DGqD7Hjpi/1or4F/aYAspXKNm5Yili0QDAFAY4QYvpqpgiY6+1jOfqpmByzjxbWd/T9mChbCArXAbDAsTm5oXA==",
+			"license": "ISC",
 			"dependencies": {
 				"d": "^1.0.2",
 				"es5-ext": "^0.10.64",
@@ -3079,6 +4393,7 @@
 			"version": "1.52.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
 			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -3087,6 +4402,7 @@
 			"version": "2.1.35",
 			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
 			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
 			"dependencies": {
 				"mime-db": "1.52.0"
 			},
@@ -3094,20 +4410,21 @@
 				"node": ">= 0.6"
 			}
 		},
-		"node_modules/min-indent": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-			"dev": true,
-			"engines": {
-				"node": ">=4"
+		"node_modules/mini-svg-data-uri": {
+			"version": "1.4.4",
+			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+			"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+			"license": "MIT",
+			"bin": {
+				"mini-svg-data-uri": "cli.js"
 			}
 		},
 		"node_modules/minimatch": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+			"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
 			},
@@ -3115,31 +4432,11 @@
 				"node": "*"
 			}
 		},
-		"node_modules/minimist": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-			"dev": true,
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
-		"node_modules/mkdirp": {
-			"version": "0.5.6",
-			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-			"dev": true,
-			"dependencies": {
-				"minimist": "^1.2.6"
-			},
-			"bin": {
-				"mkdirp": "bin/cmd.js"
-			}
-		},
 		"node_modules/moment": {
 			"version": "2.30.1",
 			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
 			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+			"license": "MIT",
 			"engines": {
 				"node": "*"
 			}
@@ -3148,33 +4445,40 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=4"
 			}
 		},
 		"node_modules/mrmime": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
-			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			}
 		},
 		"node_modules/ms": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-			"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"version": "3.3.11",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "github",
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},
@@ -3186,22 +4490,33 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/natural-compare-lite": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
-			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
+			"license": "MIT"
 		},
 		"node_modules/next-tick": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.1.0.tgz",
-			"integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ=="
+			"integrity": "sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==",
+			"license": "ISC"
+		},
+		"node_modules/node-addon-api": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+			"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+			"license": "MIT",
+			"optional": true
 		},
 		"node_modules/node-fetch": {
 			"version": "2.7.0",
 			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
 			"integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+			"license": "MIT",
 			"dependencies": {
 				"whatwg-url": "^5.0.0"
 			},
@@ -3217,18 +4532,11 @@
 				}
 			}
 		},
-		"node_modules/normalize-path": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/object-inspect": {
 			"version": "1.13.4",
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
 			"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -3241,6 +4549,7 @@
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"wrappy": "1"
 			}
@@ -3250,6 +4559,7 @@
 			"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
 			"integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"deep-is": "^0.1.3",
 				"fast-levenshtein": "^2.0.6",
@@ -3263,17 +4573,19 @@
 			}
 		},
 		"node_modules/overlayscrollbars": {
-			"version": "2.10.0",
-			"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.10.0.tgz",
-			"integrity": "sha512-diNMeEafWTE0A4GJfwRpdBp2rE/BEvrhptBdBcDu8/UeytWcdCy9Td8tZWnztJeJ26f8/uHCWfPnPUC/dtgJdw=="
+			"version": "2.14.0",
+			"resolved": "https://registry.npmjs.org/overlayscrollbars/-/overlayscrollbars-2.14.0.tgz",
+			"integrity": "sha512-RjV0pqc79kYhQLC3vTcLRb5GLpI1n6qh0Oua3g+bGH4EgNOJHVBGP7u0zZtxoAa0dkHlAqTTSYRb9MMmxNLjig==",
+			"license": "MIT"
 		},
 		"node_modules/overlayscrollbars-svelte": {
-			"version": "0.5.4",
-			"resolved": "https://registry.npmjs.org/overlayscrollbars-svelte/-/overlayscrollbars-svelte-0.5.4.tgz",
-			"integrity": "sha512-QvcC9jdP5kweoKyi+40/+5ynBxY0RwdGlpNX0P1OpK1sGQWlCBUO33VHVDMrRPc1Ki7Q0ZtGbkOZt/pkFXHCWg==",
+			"version": "0.5.5",
+			"resolved": "https://registry.npmjs.org/overlayscrollbars-svelte/-/overlayscrollbars-svelte-0.5.5.tgz",
+			"integrity": "sha512-+dRW3YZSvFbKi5vDCpnUOHuoPLLSdu0BUVVMYZdmfVghu7XkafDRebG2y91/ImPqj6YDAUsz1rcWVYhCJSS/pQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"overlayscrollbars": "^2.0.0",
-				"svelte": ">=3.54.0"
+				"svelte": "^5.0.0"
 			}
 		},
 		"node_modules/p-limit": {
@@ -3281,6 +4593,7 @@
 			"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
 			"integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"yocto-queue": "^0.1.0"
 			},
@@ -3296,6 +4609,7 @@
 			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
 			"integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"p-limit": "^3.0.2"
 			},
@@ -3311,6 +4625,7 @@
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
 			"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"callsites": "^3.0.0"
 			},
@@ -3323,6 +4638,7 @@
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
 			"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
@@ -3332,6 +4648,7 @@
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3341,40 +4658,36 @@
 			"resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
 			"integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
 		},
-		"node_modules/periscopic": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dependencies": {
-				"@types/estree": "^1.0.0",
-				"estree-walker": "^3.0.0",
-				"is-reference": "^3.0.0"
-			}
-		},
 		"node_modules/picocolors": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-			"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+			"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+			"devOptional": true,
+			"license": "MIT",
 			"engines": {
-				"node": ">=8.6"
+				"node": ">=12"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.4.40",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz",
-			"integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==",
+			"version": "8.5.8",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+			"integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3389,10 +4702,11 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
-				"nanoid": "^3.3.7",
-				"picocolors": "^1.0.1",
-				"source-map-js": "^1.2.0"
+				"nanoid": "^3.3.11",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
 			},
 			"engines": {
 				"node": "^10 || ^12 || >=14"
@@ -3403,6 +4717,7 @@
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
 			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"lilconfig": "^2.0.5",
 				"yaml": "^1.10.2"
@@ -3427,11 +4742,22 @@
 				}
 			}
 		},
+		"node_modules/postcss-load-config/node_modules/yaml": {
+			"version": "1.10.3",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+			"integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+			"dev": true,
+			"license": "ISC",
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/postcss-safe-parser": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
 			"integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=12.0"
 			},
@@ -3462,6 +4788,7 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"engines": {
 				"node": ">=12.0"
 			},
@@ -3470,10 +4797,11 @@
 			}
 		},
 		"node_modules/postcss-selector-parser": {
-			"version": "6.1.1",
-			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.1.tgz",
-			"integrity": "sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==",
+			"version": "6.1.2",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+			"integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"cssesc": "^3.0.0",
 				"util-deprecate": "^1.0.2"
@@ -3486,6 +4814,7 @@
 			"version": "10.12.1",
 			"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
 			"integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+			"license": "MIT",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/preact"
@@ -3496,15 +4825,17 @@
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
 			"integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">= 0.8.0"
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.3.3",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-			"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+			"version": "3.8.1",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+			"integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
 			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -3516,10 +4847,11 @@
 			}
 		},
 		"node_modules/prettier-plugin-svelte": {
-			"version": "3.2.6",
-			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.6.tgz",
-			"integrity": "sha512-Y1XWLw7vXUQQZmgv1JAEiLcErqUniAF2wO7QJsw8BVMvpLET2dI5WpEIEJx1r11iHVdSMzQxivyfrH9On9t2IQ==",
+			"version": "3.5.1",
+			"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.5.1.tgz",
+			"integrity": "sha512-65+fr5+cgIKWKiqM1Doum4uX6bY8iFCdztvvp2RcF+AJoieaw9kJOFMNcJo/bkmKYsxFaM9OsVZK/gWauG/5mg==",
 			"dev": true,
+			"license": "MIT",
 			"peerDependencies": {
 				"prettier": "^3.0.0",
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
@@ -3528,25 +4860,35 @@
 		"node_modules/proxy-from-env": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+			"license": "MIT"
 		},
 		"node_modules/psl": {
-			"version": "1.9.0",
-			"resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-			"integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag=="
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+			"integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+			"license": "MIT",
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/lupomontero"
+			}
 		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
 			"integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
 		},
 		"node_modules/qs": {
-			"version": "6.14.0",
-			"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-			"integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+			"version": "6.15.0",
+			"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+			"integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
 				"side-channel": "^1.1.0"
 			},
@@ -3560,7 +4902,8 @@
 		"node_modules/querystringify": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+			"integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+			"license": "MIT"
 		},
 		"node_modules/queue-microtask": {
 			"version": "1.2.3",
@@ -3580,23 +4923,27 @@
 					"type": "consulting",
 					"url": "https://feross.org/support"
 				}
-			]
+			],
+			"license": "MIT"
 		},
 		"node_modules/readdirp": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dependencies": {
-				"picomatch": "^2.2.1"
-			},
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"license": "MIT",
 			"engines": {
-				"node": ">=8.10.0"
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
 			}
 		},
 		"node_modules/require-from-string": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
 			"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3604,22 +4951,25 @@
 		"node_modules/requires-port": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+			"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+			"license": "MIT"
 		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
 			"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=4"
 			}
 		},
 		"node_modules/reusify": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+			"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"iojs": ">=1.0.0",
 				"node": ">=0.10.0"
@@ -3631,6 +4981,7 @@
 			"integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
 			"deprecated": "Rimraf versions prior to v4 are no longer supported",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"glob": "^7.1.3"
 			},
@@ -3642,11 +4993,13 @@
 			}
 		},
 		"node_modules/rollup": {
-			"version": "4.19.2",
-			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.2.tgz",
-			"integrity": "sha512-6/jgnN1svF9PjNYJ4ya3l+cqutg49vOZ4rVgsDKxdl+5gpGPnByFXWGyfH9YGx9i3nfBwSu1Iyu6vGwFFA0BdQ==",
+			"version": "4.60.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
+			"integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"@types/estree": "1.0.5"
+				"@types/estree": "1.0.8"
 			},
 			"bin": {
 				"rollup": "dist/bin/rollup"
@@ -3656,37 +5009,34 @@
 				"npm": ">=8.0.0"
 			},
 			"optionalDependencies": {
-				"@rollup/rollup-android-arm-eabi": "4.19.2",
-				"@rollup/rollup-android-arm64": "4.19.2",
-				"@rollup/rollup-darwin-arm64": "4.19.2",
-				"@rollup/rollup-darwin-x64": "4.19.2",
-				"@rollup/rollup-linux-arm-gnueabihf": "4.19.2",
-				"@rollup/rollup-linux-arm-musleabihf": "4.19.2",
-				"@rollup/rollup-linux-arm64-gnu": "4.19.2",
-				"@rollup/rollup-linux-arm64-musl": "4.19.2",
-				"@rollup/rollup-linux-powerpc64le-gnu": "4.19.2",
-				"@rollup/rollup-linux-riscv64-gnu": "4.19.2",
-				"@rollup/rollup-linux-s390x-gnu": "4.19.2",
-				"@rollup/rollup-linux-x64-gnu": "4.19.2",
-				"@rollup/rollup-linux-x64-musl": "4.19.2",
-				"@rollup/rollup-win32-arm64-msvc": "4.19.2",
-				"@rollup/rollup-win32-ia32-msvc": "4.19.2",
-				"@rollup/rollup-win32-x64-msvc": "4.19.2",
+				"@rollup/rollup-android-arm-eabi": "4.60.0",
+				"@rollup/rollup-android-arm64": "4.60.0",
+				"@rollup/rollup-darwin-arm64": "4.60.0",
+				"@rollup/rollup-darwin-x64": "4.60.0",
+				"@rollup/rollup-freebsd-arm64": "4.60.0",
+				"@rollup/rollup-freebsd-x64": "4.60.0",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.60.0",
+				"@rollup/rollup-linux-arm-musleabihf": "4.60.0",
+				"@rollup/rollup-linux-arm64-gnu": "4.60.0",
+				"@rollup/rollup-linux-arm64-musl": "4.60.0",
+				"@rollup/rollup-linux-loong64-gnu": "4.60.0",
+				"@rollup/rollup-linux-loong64-musl": "4.60.0",
+				"@rollup/rollup-linux-ppc64-gnu": "4.60.0",
+				"@rollup/rollup-linux-ppc64-musl": "4.60.0",
+				"@rollup/rollup-linux-riscv64-gnu": "4.60.0",
+				"@rollup/rollup-linux-riscv64-musl": "4.60.0",
+				"@rollup/rollup-linux-s390x-gnu": "4.60.0",
+				"@rollup/rollup-linux-x64-gnu": "4.60.0",
+				"@rollup/rollup-linux-x64-musl": "4.60.0",
+				"@rollup/rollup-openbsd-x64": "4.60.0",
+				"@rollup/rollup-openharmony-arm64": "4.60.0",
+				"@rollup/rollup-win32-arm64-msvc": "4.60.0",
+				"@rollup/rollup-win32-ia32-msvc": "4.60.0",
+				"@rollup/rollup-win32-x64-gnu": "4.60.0",
+				"@rollup/rollup-win32-x64-msvc": "4.60.0",
 				"fsevents": "~2.3.2"
 			}
 		},
-		"node_modules/rtcpeerconnection-shim": {
-			"version": "1.2.8",
-			"resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.8.tgz",
-			"integrity": "sha512-5Sx90FGru1sQw9aGOM+kHU4i6mbP8eJPgxliu2X3Syhg8qgDybx8dpDTxUwfJvPnubXFnZeRNl59DWr4AttJKQ==",
-			"dependencies": {
-				"sdp": "^2.6.0"
-			},
-			"engines": {
-				"node": ">=6.0.0",
-				"npm": ">=3.10.0"
-			}
-		},
 		"node_modules/run-parallel": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3706,6 +5056,7 @@
 					"url": "https://feross.org/support"
 				}
 			],
+			"license": "MIT",
 			"dependencies": {
 				"queue-microtask": "^1.2.2"
 			}
@@ -3714,6 +5065,7 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"license": "MIT",
 			"dependencies": {
 				"mri": "^1.1.0"
 			},
@@ -3721,38 +5073,14 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/sander": {
-			"version": "0.5.1",
-			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
-			"integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
-			"dev": true,
-			"dependencies": {
-				"es6-promise": "^3.1.2",
-				"graceful-fs": "^4.1.3",
-				"mkdirp": "^0.5.1",
-				"rimraf": "^2.5.2"
-			}
-		},
-		"node_modules/sander/node_modules/rimraf": {
-			"version": "2.7.1",
-			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-			"deprecated": "Rimraf versions prior to v4 are no longer supported",
-			"dev": true,
-			"dependencies": {
-				"glob": "^7.1.3"
-			},
-			"bin": {
-				"rimraf": "bin.js"
-			}
-		},
 		"node_modules/sass": {
-			"version": "1.77.8",
-			"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz",
-			"integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+			"version": "1.98.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
+			"integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
+			"license": "MIT",
 			"dependencies": {
-				"chokidar": ">=3.0.0 <4.0.0",
-				"immutable": "^4.0.0",
+				"chokidar": "^4.0.0",
+				"immutable": "^5.1.5",
 				"source-map-js": ">=0.6.2 <2.0.0"
 			},
 			"bin": {
@@ -3760,18 +5088,17 @@
 			},
 			"engines": {
 				"node": ">=14.0.0"
+			},
+			"optionalDependencies": {
+				"@parcel/watcher": "^2.4.1"
 			}
 		},
-		"node_modules/sdp": {
-			"version": "2.12.0",
-			"resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
-			"integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
-		},
 		"node_modules/semver": {
-			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+			"version": "7.7.4",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
 			"dev": true,
+			"license": "ISC",
 			"bin": {
 				"semver": "bin/semver.js"
 			},
@@ -3780,15 +5107,18 @@
 			}
 		},
 		"node_modules/set-cookie-parser": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
-			"integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ=="
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-3.1.0.tgz",
+			"integrity": "sha512-kjnC1DXBHcxaOaOXBHBeRtltsDG2nUiUni+jP92M9gYdW12rsmx92UsfpH7o5tDRs7I1ZZPSQJQGv3UaRfCiuw==",
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
 			"integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"shebang-regex": "^3.0.0"
 			},
@@ -3801,6 +5131,7 @@
 			"resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
 			"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			}
@@ -3809,6 +5140,7 @@
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
 			"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"object-inspect": "^1.13.3",
@@ -3827,6 +5159,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
 			"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+			"license": "MIT",
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"object-inspect": "^1.13.3"
@@ -3842,6 +5175,7 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
 			"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bound": "^1.0.2",
 				"es-errors": "^1.3.0",
@@ -3859,6 +5193,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
 			"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+			"license": "MIT",
 			"dependencies": {
 				"call-bound": "^1.0.2",
 				"es-errors": "^1.3.0",
@@ -3874,37 +5209,25 @@
 			}
 		},
 		"node_modules/sirv": {
-			"version": "2.0.4",
-			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
-			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+			"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
 				"mrmime": "^2.0.0",
 				"totalist": "^3.0.0"
 			},
 			"engines": {
-				"node": ">= 10"
-			}
-		},
-		"node_modules/sorcery": {
-			"version": "0.11.1",
-			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.1.tgz",
-			"integrity": "sha512-o7npfeJE6wi6J9l0/5LKshFzZ2rMatRiCDwYeDQaOzqdzRJwALhX7mk/A/ecg6wjMu7wdZbmXfD2S/vpOg0bdQ==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.14",
-				"buffer-crc32": "^1.0.0",
-				"minimist": "^1.2.0",
-				"sander": "^0.5.0"
-			},
-			"bin": {
-				"sorcery": "bin/sorcery"
+				"node": ">=18"
 			}
 		},
 		"node_modules/source-map-js": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-			"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -3914,6 +5237,7 @@
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
 			"integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"ansi-regex": "^5.0.1"
 			},
@@ -3921,23 +5245,12 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/strip-indent": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-			"dev": true,
-			"dependencies": {
-				"min-indent": "^1.0.0"
-			},
-			"engines": {
-				"node": ">=8"
-			}
-		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
 			"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=8"
 			},
@@ -3946,15 +5259,17 @@
 			}
 		},
 		"node_modules/style-mod": {
-			"version": "4.1.2",
-			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
-			"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+			"version": "4.1.3",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.3.tgz",
+			"integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
+			"license": "MIT"
 		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
 			"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"has-flag": "^4.0.0"
 			},
@@ -3963,43 +5278,62 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "4.2.18",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
-			"integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@jridgewell/trace-mapping": "^0.3.18",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.9.0",
-				"aria-query": "^5.3.0",
-				"axobject-query": "^4.0.0",
-				"code-red": "^1.0.3",
-				"css-tree": "^2.3.1",
-				"estree-walker": "^3.0.3",
-				"is-reference": "^3.0.1",
+			"version": "5.55.0",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.55.0.tgz",
+			"integrity": "sha512-SThllKq6TRMBwPtat7ASnm/9CDXnIhBR0NPGw0ujn2DVYx9rVwsPZxDaDQcYGdUz/3BYVsCzdq7pZarRQoGvtw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/estree": "^1.0.5",
+				"@types/trusted-types": "^2.0.7",
+				"acorn": "^8.12.1",
+				"aria-query": "5.3.1",
+				"axobject-query": "^4.1.0",
+				"clsx": "^2.1.1",
+				"devalue": "^5.6.4",
+				"esm-env": "^1.2.1",
+				"esrap": "^2.2.2",
+				"is-reference": "^3.0.3",
 				"locate-character": "^3.0.0",
-				"magic-string": "^0.30.4",
-				"periscopic": "^3.1.0"
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
 			},
 			"engines": {
-				"node": ">=16"
+				"node": ">=18"
 			}
 		},
 		"node_modules/svelte-awesome": {
-			"version": "3.3.1",
-			"resolved": "https://registry.npmjs.org/svelte-awesome/-/svelte-awesome-3.3.1.tgz",
-			"integrity": "sha512-nC2KXPs/MQF79vnQEj7RZFkWKdocNfN64Zh/kAWTDS4gFNdCrp7q8dwN3PIxe/mqiaDIUc7x4iv2CtOnVPItcQ==",
+			"version": "3.3.5",
+			"resolved": "https://registry.npmjs.org/svelte-awesome/-/svelte-awesome-3.3.5.tgz",
+			"integrity": "sha512-RIi+OI6CEn+fTdYy7UOgImEUWvdQSwP9SiMC44UKyFO+8+gjj+NgTG67hI8j2rTHQVvCP820Uj+4UoZG8CCUfA==",
+			"license": "MIT",
 			"peerDependencies": {
-				"svelte": "^3.43.1 || ^4.0.0"
+				"svelte": ">= 3.43.1 < 6"
 			}
 		},
 		"node_modules/svelte-awesome-color-picker": {
-			"version": "2.4.8",
-			"resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-2.4.8.tgz",
-			"integrity": "sha512-p6yzMMeo/IjqKMYb8oXa2vGbbRvtEDvi8LejGpY8AsZsjNwXSR0WKxQplaz67u1eqZFIRLPX0+IknQrhT5gI+g==",
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-3.1.4.tgz",
+			"integrity": "sha512-tiFakxvSpCwodOSFW6CflnLVSldSlDY77rDipHfW7hvB+4gTP3y6uO+Dm9O9e7P5N7K+CNyNjjdjbZOHYkMyNQ==",
+			"license": "MIT",
 			"dependencies": {
-				"colord": "^2.9.3"
+				"colord": "^2.9.3",
+				"svelte-awesome-slider": "^1.1.2"
+			},
+			"peerDependencies": {
+				"svelte": "^3.55.1 || ^4.0.0 || ^5.0.0"
+			}
+		},
+		"node_modules/svelte-awesome-slider": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/svelte-awesome-slider/-/svelte-awesome-slider-1.1.2.tgz",
+			"integrity": "sha512-HFIWwq6rtX6aXyc6ns2R0P6pDLYIr6nRjTPyAddAiTAgZqsohAoEfOEwKKqMmZ6Q+CH48zzcFdyo6lFkBJvyQw==",
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0"
 			}
 		},
 		"node_modules/svelte-carousel": {
@@ -4007,49 +5341,57 @@
 			"resolved": "https://registry.npmjs.org/svelte-carousel/-/svelte-carousel-1.0.25.tgz",
 			"integrity": "sha512-vR/AbGYwlh3fgWaB5PJg+iqZFvoVCJq4JWdmlXvPtdG9TLlKJWBcoiKlMZt3MnFF7AqNW46tOH/O+uVMWQzyWQ==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"dependencies": {
 				"easy-reactive": "1.0.4"
 			}
 		},
 		"node_modules/svelte-check": {
-			"version": "3.8.5",
-			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.8.5.tgz",
-			"integrity": "sha512-3OGGgr9+bJ/+1nbPgsvulkLC48xBsqsgtc8Wam281H4G9F5v3mYGa2bHRsPuwHC5brKl4AxJH95QF73kmfihGQ==",
+			"version": "4.4.5",
+			"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.4.5.tgz",
+			"integrity": "sha512-1bSwIRCvvmSHrlK52fOlZmVtUZgil43jNL/2H18pRpa+eQjzGt6e3zayxhp1S7GajPFKNM/2PMCG+DZFHlG9fw==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"@jridgewell/trace-mapping": "^0.3.17",
-				"chokidar": "^3.4.1",
+				"@jridgewell/trace-mapping": "^0.3.25",
+				"chokidar": "^4.0.1",
+				"fdir": "^6.2.0",
 				"picocolors": "^1.0.0",
-				"sade": "^1.7.4",
-				"svelte-preprocess": "^5.1.3",
-				"typescript": "^5.0.3"
+				"sade": "^1.7.4"
 			},
 			"bin": {
 				"svelte-check": "bin/svelte-check"
 			},
+			"engines": {
+				"node": ">= 18.0.0"
+			},
 			"peerDependencies": {
-				"svelte": "^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0"
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": ">=5.0.0"
 			}
 		},
 		"node_modules/svelte-codemirror-editor": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/svelte-codemirror-editor/-/svelte-codemirror-editor-1.4.1.tgz",
-			"integrity": "sha512-Pv350iro0Y/AZTT/y2OLaonheQqAwl50Hdfipa2Jv1Z04TSP5kPUyxQnRjqxeRW7DXOX9s5Nd11tHdBl9iYSzw==",
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/svelte-codemirror-editor/-/svelte-codemirror-editor-2.1.0.tgz",
+			"integrity": "sha512-WGkSsIYNpVcOVxaQPkmdBQhaGyKLmg6pgaS/b+7guRb4eikrbXYtvNFuW2AzKJi8ZbLhSngrf3SRiZOuwuskrQ==",
+			"license": "MIT",
 			"peerDependencies": {
 				"codemirror": "^6.0.0",
-				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
+				"svelte": "^5.0.0"
 			}
 		},
 		"node_modules/svelte-collapse": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/svelte-collapse/-/svelte-collapse-0.1.2.tgz",
-			"integrity": "sha512-0ZCbT6V/stHFxe4isKbduvZxnIIdktXeE8KQHtHyocx1bqEMbW1cCrbWiGBvbWp8yVVS58/33hQE5GzgQxby5w=="
+			"version": "0.1.4",
+			"resolved": "https://registry.npmjs.org/svelte-collapse/-/svelte-collapse-0.1.4.tgz",
+			"integrity": "sha512-l3/p6TkZ8/4O28nT8LMlwFJUkKNMBSoI2YK1FhPCnqPtH9RAYs9ZAFtRdy5W/Rb/f2p8RIPuMqMF0YfJ9fhQLw==",
+			"license": "MIT"
 		},
 		"node_modules/svelte-eslint-parser": {
-			"version": "0.41.0",
-			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.41.0.tgz",
-			"integrity": "sha512-L6f4hOL+AbgfBIB52Z310pg1d2QjRqm7wy3kI1W6hhdhX5bvu7+f0R6w4ykp5HoDdzq+vGhIJmsisaiJDGmVfA==",
+			"version": "0.43.0",
+			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz",
+			"integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"eslint-scope": "^7.2.2",
 				"eslint-visitor-keys": "^3.4.3",
@@ -4064,7 +5406,7 @@
 				"url": "https://github.com/sponsors/ota-meshi"
 			},
 			"peerDependencies": {
-				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.191"
+				"svelte": "^3.37.0 || ^4.0.0 || ^5.0.0"
 			},
 			"peerDependenciesMeta": {
 				"svelte": {
@@ -4073,51 +5415,32 @@
 			}
 		},
 		"node_modules/svelte-file-dropzone": {
-			"version": "2.0.7",
-			"resolved": "https://registry.npmjs.org/svelte-file-dropzone/-/svelte-file-dropzone-2.0.7.tgz",
-			"integrity": "sha512-sykRq+Q8rXM9yqsD3T9yzb3syLe21Go01cxb5NTfKA9RgMWHT/gnjS8g36YFWw3jIdC7vbbmuwwgYdA0mlcMqw==",
+			"version": "2.0.9",
+			"resolved": "https://registry.npmjs.org/svelte-file-dropzone/-/svelte-file-dropzone-2.0.9.tgz",
+			"integrity": "sha512-+gS9DscyEcy2Q0jhcADPs7uUEnz56YKudKtLGteEGNi4lF7anPTyxDXoDRiNACWzsp3PF5KfYkw0GgrTieZK9Q==",
+			"license": "MIT",
 			"dependencies": {
 				"file-selector": "^0.6.0"
 			},
 			"peerDependencies": {
-				"svelte": "^3.54.0 || ^4.0.0"
-			}
-		},
-		"node_modules/svelte-flatpickr": {
-			"version": "3.3.4",
-			"resolved": "https://registry.npmjs.org/svelte-flatpickr/-/svelte-flatpickr-3.3.4.tgz",
-			"integrity": "sha512-i+QqJRs8zPRKsxv8r2GIk1fsb8cI3ozn3/aHXtViAoNKLy0j4PV7OSWavgEZC1wlAa34qi2hMkUh+vg6qt2DRA==",
-			"dependencies": {
-				"flatpickr": "^4.5.2"
-			},
-			"peerDependencies": {
-				"svelte": ">= 3.31.0 < 5.0"
+				"svelte": "^3.54.0 || ^4.0.0 || ^5"
 			}
 		},
 		"node_modules/svelte-floating-ui": {
 			"version": "1.5.8",
 			"resolved": "https://registry.npmjs.org/svelte-floating-ui/-/svelte-floating-ui-1.5.8.tgz",
 			"integrity": "sha512-dVvJhZ2bT+kQDHlE4Lep8t+sgEc0XD96fXLzAi2DDI2bsaegBbClxXVNMma0C2WsG+n9GJSYx292dTvA8CYRtw==",
+			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/core": "^1.5.0",
 				"@floating-ui/dom": "^1.5.3"
 			}
 		},
-		"node_modules/svelte-hmr": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-			"integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
-			},
-			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0"
-			}
-		},
 		"node_modules/svelte-i18n": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-4.0.0.tgz",
-			"integrity": "sha512-4vivjKZADUMRIhTs38JuBNy3unbnh9AFRxWFLxq62P4NHic+/BaIZZlAsvqsCdnp7IdJf5EoSiH6TNdItcjA6g==",
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-i18n/-/svelte-i18n-4.0.1.tgz",
+			"integrity": "sha512-jaykGlGT5PUaaq04JWbJREvivlCnALtT+m87Kbm0fxyYHynkQaxQMnIKHLm2WeIuBRoljzwgyvz0Z6/CMwfdmQ==",
+			"license": "MIT",
 			"dependencies": {
 				"cli-color": "^2.0.3",
 				"deepmerge": "^4.2.2",
@@ -4134,61 +5457,62 @@
 				"node": ">= 16"
 			},
 			"peerDependencies": {
-				"svelte": "^3 || ^4"
+				"svelte": "^3 || ^4 || ^5"
 			}
 		},
-		"node_modules/svelte-i18n/node_modules/estree-walker": {
-			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
-		},
 		"node_modules/svelte-json-tree": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/svelte-json-tree/-/svelte-json-tree-2.2.0.tgz",
 			"integrity": "sha512-zcfepTrJ6xhpdgRZEujmiFh+ainRw7HO4Bsoh8PMAsm7fkgUPtnrZi3An8tmCFY8jajYhMrauHsd1S1XTeuiCw==",
+			"license": "MIT",
 			"peerDependencies": {
 				"svelte": "^4.0.0"
 			}
 		},
 		"node_modules/svelte-jsoneditor": {
-			"version": "0.21.6",
-			"resolved": "https://registry.npmjs.org/svelte-jsoneditor/-/svelte-jsoneditor-0.21.6.tgz",
-			"integrity": "sha512-1QHMqjd4gKYCh3NQtoc7FyyakUiQtN6qZZ8UDWdPs5BJOH797Pj+StX8SmijhQ4oBJRF26AJP2S+67bGnKANOQ==",
+			"version": "3.11.0",
+			"resolved": "https://registry.npmjs.org/svelte-jsoneditor/-/svelte-jsoneditor-3.11.0.tgz",
+			"integrity": "sha512-OypU/0ALZQPXc4wZWSokNGdkKPI5SZBbtsjhUmFuF3hq6Gjk6ll95mWPV4ckW/Wr4M53k7zuSLCqOHZCS7PZyw==",
+			"license": "ISC",
 			"dependencies": {
-				"@codemirror/autocomplete": "^6.12.0",
-				"@codemirror/commands": "^6.3.3",
+				"@codemirror/autocomplete": "^6.18.1",
+				"@codemirror/commands": "^6.7.1",
 				"@codemirror/lang-json": "^6.0.1",
-				"@codemirror/language": "^6.10.1",
-				"@codemirror/lint": "^6.5.0",
+				"@codemirror/language": "^6.10.3",
+				"@codemirror/lint": "^6.8.2",
 				"@codemirror/search": "^6.5.6",
-				"@codemirror/state": "^6.4.0",
-				"@codemirror/view": "^6.24.0",
-				"@fortawesome/free-regular-svg-icons": "^6.5.1",
-				"@fortawesome/free-solid-svg-icons": "^6.5.1",
-				"@lezer/highlight": "^1.2.0",
-				"@replit/codemirror-indentation-markers": "^6.5.0",
-				"ajv": "^8.12.0",
-				"codemirror-wrapped-line-indent": "^1.0.3",
+				"@codemirror/state": "^6.4.1",
+				"@codemirror/view": "^6.34.1",
+				"@fortawesome/free-regular-svg-icons": "^6.6.0 || ^7.0.1",
+				"@fortawesome/free-solid-svg-icons": "^6.6.0 || ^7.0.1",
+				"@jsonquerylang/jsonquery": "^3.1.1 || ^4.0.0 || ^5.0.0",
+				"@lezer/highlight": "^1.2.1",
+				"@replit/codemirror-indentation-markers": "^6.5.3",
+				"ajv": "^8.17.1",
+				"codemirror-wrapped-line-indent": "^1.0.8",
 				"diff-sequences": "^29.6.3",
-				"immutable-json-patch": "6.0.1",
+				"immutable-json-patch": "^6.0.1",
 				"jmespath": "^0.16.0",
 				"json-source-map": "^0.6.1",
-				"jsonrepair": "^3.6.0",
+				"jsonpath-plus": "^10.3.0",
+				"jsonrepair": "^3.0.0",
 				"lodash-es": "^4.17.21",
 				"memoize-one": "^6.0.0",
 				"natural-compare-lite": "^1.4.0",
-				"sass": "^1.70.0",
-				"svelte": "^4.2.10",
-				"svelte-awesome": "^3.3.1",
+				"sass": "^1.80.4",
+				"svelte-awesome": "^3.3.5",
 				"svelte-select": "^5.8.3",
-				"svelte-simple-modal": "^1.6.2",
-				"vanilla-picker": "^2.12.2"
+				"vanilla-picker": "^2.12.3"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
 			}
 		},
 		"node_modules/svelte-jsoneditor/node_modules/ajv": {
-			"version": "8.17.1",
-			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"version": "8.18.0",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+			"integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+			"license": "MIT",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
 				"fast-uri": "^3.0.1",
@@ -4203,56 +5527,38 @@
 		"node_modules/svelte-jsoneditor/node_modules/json-schema-traverse": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+			"license": "MIT"
 		},
 		"node_modules/svelte-lightbox": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/svelte-lightbox/-/svelte-lightbox-1.1.3.tgz",
-			"integrity": "sha512-pPkNo89nUFEgOvIUZZA2CUSZpABp/LkR3vZz5gD+Sv0q1kmP0AcdQQquenuLyZcSigth0iqBFCd/bB3LSPMejg==",
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/svelte-lightbox/-/svelte-lightbox-1.1.7.tgz",
+			"integrity": "sha512-D52LMtXbPRqgVjfe9+vYW43e+ROc2B3ci8CstfrJ2yJOi4bDkA7Wcis4MG625Hr1BDwhEZRgi5mI+TS9aYMagA==",
 			"dev": true,
+			"license": "MIT",
 			"peerDependencies": {
-				"svelte": "^3.25.0 || ^4.0.0"
+				"svelte": "^3.25.0 || ^4.0.0 || ^5.0.0"
 			}
 		},
 		"node_modules/svelte-link": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/svelte-link/-/svelte-link-1.4.0.tgz",
-			"integrity": "sha512-4fVN71zpxfoDt3u+1DWessOAspLRhuv7d4mo+FtP7WV8q7srFFUy+BL4o9rA6aZMvUTMLoH3n9mPDsr+X3xLrQ=="
+			"integrity": "sha512-4fVN71zpxfoDt3u+1DWessOAspLRhuv7d4mo+FtP7WV8q7srFFUy+BL4o9rA6aZMvUTMLoH3n9mPDsr+X3xLrQ==",
+			"license": "MIT"
 		},
 		"node_modules/svelte-loading-spinners": {
 			"version": "0.3.6",
 			"resolved": "https://registry.npmjs.org/svelte-loading-spinners/-/svelte-loading-spinners-0.3.6.tgz",
 			"integrity": "sha512-mthHQ2TwiwzTWzbFry3CBnVEfzqPOD9WkVw84OfSYzHRq6N9wgQ+yv37u81uPeuLU/ZOIPqhujpXquB1aol5ZQ==",
-			"dev": true
-		},
-		"node_modules/svelte-markdown": {
-			"version": "0.4.1",
-			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
-			"integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
-			"dependencies": {
-				"@types/marked": "^5.0.1",
-				"marked": "^5.1.2"
-			},
-			"peerDependencies": {
-				"svelte": "^4.0.0"
-			}
-		},
-		"node_modules/svelte-markdown/node_modules/marked": {
-			"version": "5.1.2",
-			"resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz",
-			"integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==",
-			"bin": {
-				"marked": "bin/marked.js"
-			},
-			"engines": {
-				"node": ">= 16"
-			}
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/svelte-player": {
 			"version": "0.0.21",
 			"resolved": "https://registry.npmjs.org/svelte-player/-/svelte-player-0.0.21.tgz",
 			"integrity": "sha512-oEW7nxLSZ+Cig8GsIaRI9ya4ou2uFHS2xU1c/FaV/m0VC+ygagYk74iYJUYisAfgz5O5EGzrKkh5QuonKtAEXw==",
 			"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+			"license": "MIT",
 			"dependencies": {
 				"deepmerge": "^4.3.1",
 				"load-script": "^2.0.0",
@@ -4262,105 +5568,39 @@
 				"svelte": ">=3.54.0"
 			}
 		},
-		"node_modules/svelte-preprocess": {
-			"version": "5.1.4",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
-			"integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==",
+		"node_modules/svelte-range-slider-pips": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-4.1.1.tgz",
+			"integrity": "sha512-PWOZh1QYeQoCDloO2l4xmb9gttooMjk6Sbb4skDMzNH33UlRUHnc1tVwNmEC1IAzGiQVBxjUmNXlNEA6bKLugQ==",
 			"dev": true,
-			"hasInstallScript": true,
-			"dependencies": {
-				"@types/pug": "^2.0.6",
-				"detect-indent": "^6.1.0",
-				"magic-string": "^0.30.5",
-				"sorcery": "^0.11.0",
-				"strip-indent": "^3.0.0"
-			},
-			"engines": {
-				"node": ">= 16.0.0"
-			},
+			"license": "MPL-2.0",
 			"peerDependencies": {
-				"@babel/core": "^7.10.2",
-				"coffeescript": "^2.5.1",
-				"less": "^3.11.3 || ^4.0.0",
-				"postcss": "^7 || ^8",
-				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
-				"pug": "^3.0.0",
-				"sass": "^1.26.8",
-				"stylus": "^0.55.0",
-				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-				"svelte": "^3.23.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0",
-				"typescript": ">=3.9.5 || ^4.0.0 || ^5.0.0"
-			},
-			"peerDependenciesMeta": {
-				"@babel/core": {
-					"optional": true
-				},
-				"coffeescript": {
-					"optional": true
-				},
-				"less": {
-					"optional": true
-				},
-				"postcss": {
-					"optional": true
-				},
-				"postcss-load-config": {
-					"optional": true
-				},
-				"pug": {
-					"optional": true
-				},
-				"sass": {
-					"optional": true
-				},
-				"stylus": {
-					"optional": true
-				},
-				"sugarss": {
-					"optional": true
-				},
-				"typescript": {
-					"optional": true
-				}
+				"svelte": "^4.2.7 || ^5.0.0"
 			}
 		},
-		"node_modules/svelte-range-slider-pips": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/svelte-range-slider-pips/-/svelte-range-slider-pips-2.3.1.tgz",
-			"integrity": "sha512-P29PNqHld+SiaDuHzf98rLvhSYWXb3TVL9p7U5RG9UX8emUgypZgp9zuIIwpmIXysGQC6JG8duMc5FuaPnSVdg==",
-			"dev": true
-		},
 		"node_modules/svelte-select": {
 			"version": "5.8.3",
 			"resolved": "https://registry.npmjs.org/svelte-select/-/svelte-select-5.8.3.tgz",
 			"integrity": "sha512-nQsvflWmTCOZjssdrNptzfD1Ok45hHVMTL5IHay5DINk7dfu5Er+8KsVJnZMJdSircqtR0YlT4YkCFlxOUhVPA==",
+			"license": "ISC",
 			"dependencies": {
 				"svelte-floating-ui": "1.5.8"
 			}
 		},
-		"node_modules/svelte-simple-modal": {
-			"version": "1.6.2",
-			"resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.6.2.tgz",
-			"integrity": "sha512-cRjpqjZTH0rU5G+SRhUDHOV6TISQs6AnEW/Z7D5uXiz5V/3axrBYcBCPnKMI2Z0EyXmpwPXK4q9grroQTL6rhQ==",
-			"peerDependencies": {
-				"svelte": "^3.30.0 || ^4.0.0"
-			}
-		},
 		"node_modules/svelte-splitpanes": {
-			"version": "8.0.5",
-			"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-8.0.5.tgz",
-			"integrity": "sha512-LUdNbuckYtGcBI5Us1ugYlw0fC6wnUEbUTgUY4TVLR/ZCsSrTw9Ftuf7NkM0tTRMCBG3ZmzPDfWuOlmSOXGU/A==",
-			"dependencies": {
-				"esm-env-robust": "0.0.3"
-			},
+			"version": "8.0.12",
+			"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-8.0.12.tgz",
+			"integrity": "sha512-HJ07HgbtY0Q/35TEuJquGy47dtgCVavV7ay9r1FhWRx3boyUs3RpeiHlwMKliznCKy2ZotNeT+8GG+mIoNjgRA==",
+			"license": "MIT",
 			"peerDependencies": {
-				"svelte": "^4.2.18"
+				"svelte": "^5.43.0"
 			}
 		},
 		"node_modules/svelte-viewport-info": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/svelte-viewport-info/-/svelte-viewport-info-1.0.2.tgz",
-			"integrity": "sha512-swNOysbX5AV0nuf+PdUg3r/J0ngqMatBhnm7p6XIRAOj/vwaLnmlyi1f2P7jMftR+zUp5WwN5wVO/ysjO8cvvw==",
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-viewport-info/-/svelte-viewport-info-1.0.3.tgz",
+			"integrity": "sha512-Q+WxtmmxA7WpCxdHW8rpRofNOXNpb7mBXeiErHfqa0oSwBfmYew9+bGfIlQ1xonqBG/CzvSPL1TpU+Zr9Yjspg==",
+			"license": "MIT",
 			"dependencies": {
 				"tslib": "^2.6.2"
 			}
@@ -4369,6 +5609,7 @@
 			"version": "9.0.0",
 			"resolved": "https://registry.npmjs.org/svelvet/-/svelvet-9.0.0.tgz",
 			"integrity": "sha512-M7EwbLNXlhh45zfqcRP2bUP3gTGyurIPgibjrqyhmMdrE8YMIGqbGJW1SsnJ1BVRd4JPd8rNAuz5PWV6mf3ftg==",
+			"license": "MIT",
 			"peerDependencies": {
 				"svelte": ">=3.59.2 || ^4.0.0"
 			}
@@ -4377,6 +5618,7 @@
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
 			"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.0.1"
 			},
@@ -4388,6 +5630,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
 			"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": ">=2.3.x"
 			},
@@ -4399,6 +5642,7 @@
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
 			"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.2.5"
 			},
@@ -4409,12 +5653,14 @@
 		"node_modules/svg.js": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
-			"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+			"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
+			"license": "MIT"
 		},
 		"node_modules/svg.pathmorphing.js": {
 			"version": "0.1.3",
 			"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
 			"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.4.0"
 			},
@@ -4426,6 +5672,7 @@
 			"version": "1.4.3",
 			"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
 			"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.6.5",
 				"svg.select.js": "^2.1.2"
@@ -4438,6 +5685,7 @@
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
 			"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.2.5"
 			},
@@ -4449,6 +5697,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
 			"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+			"license": "MIT",
 			"dependencies": {
 				"svg.js": "^2.6.5"
 			},
@@ -4457,9 +5706,10 @@
 			}
 		},
 		"node_modules/sweetalert2": {
-			"version": "11.12.4",
-			"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.12.4.tgz",
-			"integrity": "sha512-ZSpyaLbAmn4b7xjnV9x9BFD1UOrCAhIzm1D8dZ443kGxtVKqbTIA5SgXs4xeEtmFfEXUyC3RBgpSlu1AXmCiHA==",
+			"version": "11.26.24",
+			"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.26.24.tgz",
+			"integrity": "sha512-SLgukW4wicewpW5VOukSXY5Z6DL/z7HCOK2ODSjmQPiSphCN8gJAmh9npoceXOtBRNoDN0xIz+zHYthtfiHmjg==",
+			"license": "MIT",
 			"funding": {
 				"type": "individual",
 				"url": "https://github.com/sponsors/limonte"
@@ -4479,20 +5729,42 @@
 					"url": "http://opencollective.com/swiper"
 				}
 			],
+			"license": "MIT",
 			"engines": {
 				"node": ">= 4.7.0"
 			}
 		},
+		"node_modules/tailwindcss": {
+			"version": "4.2.2",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+			"integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+			"integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
 			"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-			"dev": true
+			"dev": true,
+			"license": "MIT"
 		},
 		"node_modules/timers-ext": {
 			"version": "0.1.8",
 			"resolved": "https://registry.npmjs.org/timers-ext/-/timers-ext-0.1.8.tgz",
 			"integrity": "sha512-wFH7+SEAcKfJpfLPkrgMPvvwnEtj8W4IurvEyrKsDleXnKLCDw71w8jltvfLa8Rm4qQxxT4jmDBYbJG/z7qoww==",
+			"license": "ISC",
 			"dependencies": {
 				"es5-ext": "^0.10.64",
 				"next-tick": "^1.1.0"
@@ -4505,26 +5777,35 @@
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
 			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+			"license": "MIT",
 			"dependencies": {
 				"globalyzer": "0.1.0",
 				"globrex": "^0.1.2"
 			}
 		},
-		"node_modules/to-regex-range": {
-			"version": "5.0.1",
-			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+		"node_modules/tinyglobby": {
+			"version": "0.2.15",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"is-number": "^7.0.0"
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3"
 			},
 			"engines": {
-				"node": ">=8.0"
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
 			}
 		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=6"
 			}
@@ -4533,6 +5814,7 @@
 			"version": "4.1.4",
 			"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
 			"integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+			"license": "BSD-3-Clause",
 			"dependencies": {
 				"psl": "^1.1.33",
 				"punycode": "^2.1.1",
@@ -4546,23 +5828,27 @@
 		"node_modules/tr46": {
 			"version": "0.0.3",
 			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+			"license": "MIT"
 		},
 		"node_modules/tslib": {
-			"version": "2.6.3",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
-			"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"license": "0BSD"
 		},
 		"node_modules/type": {
 			"version": "2.7.3",
 			"resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
-			"integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ=="
+			"integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==",
+			"license": "ISC"
 		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
 			"integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"prelude-ls": "^1.2.1"
 			},
@@ -4575,6 +5861,7 @@
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
 			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
 			"dev": true,
+			"license": "(MIT OR CC0-1.0)",
 			"engines": {
 				"node": ">=10"
 			},
@@ -4582,23 +5869,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/typescript": {
-			"version": "5.5.4",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-			"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-			"dev": true,
-			"bin": {
-				"tsc": "bin/tsc",
-				"tsserver": "bin/tsserver"
-			},
-			"engines": {
-				"node": ">=14.17"
-			}
-		},
 		"node_modules/universalify": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
 			"integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+			"license": "MIT",
 			"engines": {
 				"node": ">= 4.0.0"
 			}
@@ -4608,6 +5883,7 @@
 			"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
 			"integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
 			"dev": true,
+			"license": "BSD-2-Clause",
 			"dependencies": {
 				"punycode": "^2.1.0"
 			}
@@ -4616,6 +5892,7 @@
 			"version": "1.5.10",
 			"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
 			"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+			"license": "MIT",
 			"dependencies": {
 				"querystringify": "^2.1.1",
 				"requires-port": "^1.0.0"
@@ -4625,7 +5902,7 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"license": "MIT"
 		},
 		"node_modules/uuid": {
 			"version": "10.0.0",
@@ -4635,6 +5912,7 @@
 				"https://github.com/sponsors/broofa",
 				"https://github.com/sponsors/ctavan"
 			],
+			"license": "MIT",
 			"bin": {
 				"uuid": "dist/bin/uuid"
 			}
@@ -4643,24 +5921,30 @@
 			"version": "2.12.3",
 			"resolved": "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.12.3.tgz",
 			"integrity": "sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==",
+			"license": "ISC",
 			"dependencies": {
 				"@sphinxxxx/color-conversion": "^2.2.2"
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.3.5",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
-			"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
+			"version": "6.4.1",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
+			"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+			"dev": true,
+			"license": "MIT",
 			"dependencies": {
-				"esbuild": "^0.21.3",
-				"postcss": "^8.4.39",
-				"rollup": "^4.13.0"
+				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
+				"postcss": "^8.5.3",
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20.0.0"
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
@@ -4669,18 +5953,25 @@
 				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": "^18.0.0 || >=20.0.0",
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
+				"sass-embedded": "*",
 				"stylus": "*",
 				"sugarss": "*",
-				"terser": "^5.4.0"
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
 			},
 			"peerDependenciesMeta": {
 				"@types/node": {
 					"optional": true
 				},
+				"jiti": {
+					"optional": true
+				},
 				"less": {
 					"optional": true
 				},
@@ -4690,6 +5981,9 @@
 				"sass": {
 					"optional": true
 				},
+				"sass-embedded": {
+					"optional": true
+				},
 				"stylus": {
 					"optional": true
 				},
@@ -4698,397 +5992,461 @@
 				},
 				"terser": {
 					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
 				}
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/aix-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"aix"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/android-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-			"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/android-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-			"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/android-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-			"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-			"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/darwin-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-			"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-			"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-			"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-			"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-			"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-			"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-loong64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-			"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
 			"cpu": [
 				"loong64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-			"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
 			"cpu": [
 				"mips64el"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-			"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-s390x": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-			"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
 			"cpu": [
 				"s390x"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/linux-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-			"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"netbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"openbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/sunos-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-			"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"sunos"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/win32-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-			"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/win32-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-			"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/@esbuild/win32-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-			"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
+			"license": "MIT",
 			"optional": true,
 			"os": [
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/vite/node_modules/esbuild": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+			"dev": true,
 			"hasInstallScript": true,
+			"license": "MIT",
 			"bin": {
 				"esbuild": "bin/esbuild"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			},
 			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.21.5",
-				"@esbuild/android-arm": "0.21.5",
-				"@esbuild/android-arm64": "0.21.5",
-				"@esbuild/android-x64": "0.21.5",
-				"@esbuild/darwin-arm64": "0.21.5",
-				"@esbuild/darwin-x64": "0.21.5",
-				"@esbuild/freebsd-arm64": "0.21.5",
-				"@esbuild/freebsd-x64": "0.21.5",
-				"@esbuild/linux-arm": "0.21.5",
-				"@esbuild/linux-arm64": "0.21.5",
-				"@esbuild/linux-ia32": "0.21.5",
-				"@esbuild/linux-loong64": "0.21.5",
-				"@esbuild/linux-mips64el": "0.21.5",
-				"@esbuild/linux-ppc64": "0.21.5",
-				"@esbuild/linux-riscv64": "0.21.5",
-				"@esbuild/linux-s390x": "0.21.5",
-				"@esbuild/linux-x64": "0.21.5",
-				"@esbuild/netbsd-x64": "0.21.5",
-				"@esbuild/openbsd-x64": "0.21.5",
-				"@esbuild/sunos-x64": "0.21.5",
-				"@esbuild/win32-arm64": "0.21.5",
-				"@esbuild/win32-ia32": "0.21.5",
-				"@esbuild/win32-x64": "0.21.5"
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
 			}
 		},
 		"node_modules/vitefu": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.2.tgz",
+			"integrity": "sha512-zpKATdUbzbsycPFBN71nS2uzBUQiVnFoOrr2rvqv34S1lcAgMKKkjWleLGeiJlZ8lwCXvtWaRn7R3ZC16SYRuw==",
+			"dev": true,
+			"license": "MIT",
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*",
+				"tests/projects/workspace/packages/*"
+			],
 			"peerDependencies": {
-				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0"
 			},
 			"peerDependenciesMeta": {
 				"vite": {
@@ -5099,17 +6457,20 @@
 		"node_modules/w3c-keyname": {
 			"version": "2.2.8",
 			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
-			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+			"license": "MIT"
 		},
 		"node_modules/webidl-conversions": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+			"license": "BSD-2-Clause"
 		},
 		"node_modules/whatwg-url": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
 			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+			"license": "MIT",
 			"dependencies": {
 				"tr46": "~0.0.3",
 				"webidl-conversions": "^3.0.0"
@@ -5120,6 +6481,7 @@
 			"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
 			"integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
 			"dev": true,
+			"license": "ISC",
 			"dependencies": {
 				"isexe": "^2.0.0"
 			},
@@ -5135,6 +6497,7 @@
 			"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
 			"integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -5143,12 +6506,14 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"dev": true
+			"dev": true,
+			"license": "ISC"
 		},
 		"node_modules/ws": {
 			"version": "7.5.10",
 			"resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
 			"integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
+			"license": "MIT",
 			"engines": {
 				"node": ">=8.3.0"
 			},
@@ -5165,26 +6530,25 @@
 				}
 			}
 		},
-		"node_modules/yaml": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-			"dev": true,
-			"engines": {
-				"node": ">= 6"
-			}
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
 			"integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
 			"dev": true,
+			"license": "MIT",
 			"engines": {
 				"node": ">=10"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
+			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
+			"dev": true,
+			"license": "MIT"
 		}
 	}
 }
diff --git a/package.json b/package.json
index ecd73242..f605c8c6 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@sveltejs/kit": "^2.55.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@types/drawflow": "^0.0.10",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^9.0.0",
@@ -27,13 +27,13 @@
 		"prettier": "^3.0.0",
 		"prettier-plugin-svelte": "^3.0.0",
 		"sass": "^1.69.5",
-		"svelte": "^4.2.9",
+		"svelte": "^5.54.0",
 		"svelte-carousel": "^1.0.25",
-		"svelte-check": "^3.6.0",
+		"svelte-check": "^4.4.5",
 		"svelte-lightbox": "^1.1.2",
-		"svelte-loading-spinners": "^0.3.4",
-		"svelte-range-slider-pips": "^2.2.3",
-		"vite": "^5.0.0"
+		"svelte-loading-spinners": "^0.3.6",
+		"svelte-range-slider-pips": "^4.1.1",
+		"vite": "^6.4.1"
 	},
 	"type": "module",
 	"dependencies": {
@@ -51,38 +51,40 @@
 		"@pgrabovets/json-view": "^2.7.5",
 		"@popperjs/core": "^2.11.8",
 		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltestrap/sveltestrap": "^6.2.3",
+		"@tailwindcss/forms": "^0.5.11",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.2.2",
 		"@twilio/voice-sdk": "^2.9.0",
-		"@vincjo/datatables": "^1.12.7",
+		"@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",
 		"fullcalendar": "^6.1.9",
 		"lodash": "^4.17.21",
 		"marked": "^12.0.0",
 		"moment": "^2.30.1",
 		"overlayscrollbars": "^2.4.4",
-		"overlayscrollbars-svelte": "^0.5.2",
+		"overlayscrollbars-svelte": "^0.5.5",
 		"qs": "^6.14.0",
-		"svelte-awesome-color-picker": "^2.4.7",
-		"svelte-codemirror-editor": "^1.4.1",
+		"svelte-awesome-color-picker": "^3.1.4",
+		"svelte-codemirror-editor": "^2.1.0",
 		"svelte-collapse": "^0.1.2",
 		"svelte-file-dropzone": "^2.0.2",
-		"svelte-flatpickr": "^3.3.3",
 		"svelte-i18n": "^4.0.0",
 		"svelte-json-tree": "^2.2.0",
-		"svelte-jsoneditor": "^0.21.1",
+		"svelte-jsoneditor": "^3.11.0",
 		"svelte-link": "^1.4.0",
-		"svelte-markdown": "^0.4.1",
 		"svelte-player": "^0.0.21",
 		"svelte-select": "^5.7.0",
-		"svelte-splitpanes": "^8.0.5",
+		"svelte-splitpanes": "^8.0.12",
 		"svelte-viewport-info": "^1.0.1",
 		"svelvet": "^9.0.0",
 		"sweetalert2": "^11.12.4",
 		"swiper": "^10.3.1",
+		"tailwindcss": "^4.2.2",
 		"uuid": "^10.0.0"
 	}
 }
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 00000000..3d552a61
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+
diff --git a/src/lib/common/audio-player/AudioPlayer.svelte b/src/lib/common/audio-player/AudioPlayer.svelte
index 5e5f730e..eeef2199 100644
--- a/src/lib/common/audio-player/AudioPlayer.svelte
+++ b/src/lib/common/audio-player/AudioPlayer.svelte
@@ -6,8 +6,7 @@
     useAudioStore
   } from "./store";
   import { volumeEventHandlers, progressEventHandlers } from "./handlers";
-  import { onDestroy, onMount, createEventDispatcher } from "svelte";
-  import { propsBool } from "./utils";
+  import { onDestroy, onMount } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
 
   import {
@@ -21,15 +20,50 @@
     loopNone,
   } from "./svg";
 
-  const svelteDispatch = createEventDispatcher();
+  /**
+   * @type {{
+   *   audio: import('$fileTypes').AudioFileModel[],
+   *   id?: string,
+   *   order?: "list" | "random",
+   *   loop?: "none" | "all" | "one",
+   *   volume?: number,
+   *   mini?: boolean,
+   *   mutex?: boolean,
+   *   theme?: string,
+   *   listMaxHeight?: number,
+   *   playDelay?: number,
+   *   autoPlayNextOnClick?: boolean,
+   *   baseFontSize?: string,
+   *   list_folded?: boolean | string | null,
+   *   ondispatch?: (name: string, detail?: any) => void,
+   *   ondestroy?: () => void
+   * }}
+   */
+  let {
+    audio,
+    id = uuidv4(),
+    order = 'list',
+    loop = 'all',
+    volume = 0.7,
+    mini = false,
+    mutex = true,
+    theme = "#fadfa3",
+    listMaxHeight = Infinity,
+    playDelay = 300,
+    autoPlayNextOnClick = true,
+    baseFontSize = "12px",
+    list_folded = undefined,
+    ondispatch = () => {},
+    ondestroy = () => {}
+  } = $props();
 
   /**
    * @param {string} name
    * @param {any?} detail
    */
   function dispatch(name, detail = null) {
-    svelteDispatch(name, detail);
-  };
+    ondispatch(name, detail);
+  }
 
   const {
     playList,
@@ -40,43 +74,8 @@
     rdTime,
     rdBufTime,
     wtBufTime,
-  } = useAudioStore(dispatch);
-
-  /** @type {import('$fileTypes').AudioFileModel[]} */
-  export let audio;
-
-  /** @type {string} */
-  export let id = uuidv4();
-
-  /** @type {"list" | "random"} */
-  export let order = 'list';
-
-  /** @type {"none" | "all" | "one"} */
-  export let loop = 'all';
-  
-  /** @type {number} */
-  export let volume = 0.7;
-
-  /** @type {boolean} */
-  export let mini = false;
-
-  /** @type {boolean} */
-  export let mutex = true;
-
-  /** @type {string} */
-  export let theme = "#fadfa3";
-
-  /** @type {number} */
-  export let listMaxHeight = Infinity;
-
-  /** @type {number} */
-  export let playDelay = 300;
-
-  /** @type {boolean} */
-  export let autoPlayNextOnClick = true;
-
-  /** @type {string} */
-  export let baseFontSize = "12px";
+  // eslint-disable-next-line -- audio is intentionally captured as initial value; $effect keeps it in sync
+  } = useAudioStore(dispatch, audio);
 
   /** @type {HTMLElement} */
   let volumeBar;
@@ -85,25 +84,25 @@
   let playedBar;
 
   /** @type {() => void} */
-  let volumeDragStart;
+  let volumeDragStart = $state(() => {});
 
   /** @type {(ev: any) => void} */
-  let volumeDragMove;
-  
+  let volumeDragMove = $state(() => {});
+
   /** @type {(ev: any) => void} */
-  let volumeDragEnd;
+  let volumeDragEnd = $state(() => {});
 
   /** @type {() => void} */
-  let progressDragStart;
-  
+  let progressDragStart = $state(() => {});
+
   /** @type {(ev: any) => void} */
-  let progressDragMove;
-  
+  let progressDragMove = $state(() => {});
+
   /** @type {(ev: any) => void} */
-  let progressDragEnd;
+  let progressDragEnd = $state(() => {});
 
   /** @type {() => void} */
-  let toggleVolumeMute;
+  let toggleVolumeMute = $state(() => {});
 
   /** @type {HTMLElement} */
   let playListElement;
@@ -115,13 +114,19 @@
   let player;
 
   /** @type {boolean} */
-  let isShowList = false;
+  let isShowList = $state(false);
+
+  /** @type {boolean} */
+  let paused = $state(true);
 
   /** @type {boolean} */
-  let muted = false;
+  let muted = $state(false);
 
-  /** @type {string} */
-  let volumePercentage;
+  /** @type {number} */
+  let playerListHeight = $state(0);
+
+  let volumePercentage = $derived(muted ? '0%' : `${volume * 100}%`);
+  let themeColor = $derived($currentSong?.theme ?? theme);
 
   onMount(() => {
     player = init();
@@ -139,6 +144,13 @@
       playerListHeight = Math.min(playListElement?.scrollHeight ?? 0, listMaxHeight);
     });
 
+    player.addEventListener("play", () => {
+      paused = false;
+    });
+    player.addEventListener("pause", () => {
+      paused = true;
+    });
+
     player.addEventListener("timeupdate", () => {
       $currentTime = player.currentTime;
     });
@@ -184,7 +196,7 @@
 
   onDestroy(() => {
     clearAudioInstantce(id);
-    dispatch("destroy");
+    ondestroy();
   });
 
   const init = () => {
@@ -195,32 +207,28 @@
       player: audioPlayer,
       stop: () => player?.pause()
     }, dispatch);
-    isShowList = !propsBool($$props, "list_folded") && $audioList.length > 1;
+    const isFolded = !(list_folded === null || list_folded === undefined || list_folded === "false");
+    isShowList = !isFolded && $audioList.length > 1;
     audioPlayer.volume = Math.min(Math.max(volume, 0), 1);
     return audioPlayer;
   }
 
-  $: $playList.audio = audio;
-  $: {
-    if (muted) {
-      volumePercentage = '0%';
-    } else {
-      volumePercentage = `${volume * 100}%`;
-    }
-  }
-  $: playerListHeight = Math.min(playListElement?.scrollHeight ?? 0, listMaxHeight);
-  $: themeColor = $currentSong.theme ?? theme;
-  $: {
-    if (player) {
+  $effect(() => {
+    $playList.audio = audio;
+  });
+
+  $effect(() => {
+    if (player && $currentSong?.url) {
       player.src = $currentSong.url;
     }
-  }
-  $: {
+  });
+
+  $effect(() => {
     if (rootEl) {
       rootEl.style.setProperty("--theme-color", themeColor);
       rootEl.style.setProperty("--base-font-size", baseFontSize);
     }
-  }
+  });
 
   const play = () => {
     if (mutex) {
@@ -323,16 +331,16 @@
   class:aplayer-narrow={mini}
 >
   <div class="aplayer-body ">
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="aplayer-pic"
-      style="background-image: url( {$currentSong.cover} )"
-      on:click={() => {
+      style="background-image: url( {$currentSong?.cover} )"
+      onclick={() => {
         player?.paused ? play() : player.pause();
       }}
     >
-      {#if !player?.paused}
+      {#if !paused}
       <div class="aplayer-button aplayer-pause">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -361,28 +369,28 @@
 
     <div class="aplayer-info">
       <div class="aplayer-music">
-        <span class="aplayer-title">{$currentSong.name || ''}</span>
-        <span class="aplayer-artist">{$currentSong.artist || ''}</span>
+        <span class="aplayer-title">{$currentSong?.name || ''}</span>
+        <span class="aplayer-artist">{$currentSong?.artist || ''}</span>
       </div>
 
       <div class="aplayer-controller">
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
           class="aplayer-bar-wrap"
           bind:this={playedBar}
-          on:mousedown={progressDragStart}
-          on:mousemove={progressDragMove}
-          on:mouseup={progressDragEnd}
-          on:mouseleave={progressDragEnd}
-          on:touchstart={progressDragStart}
-          on:touchmove={progressDragMove}
-          on:touchend={progressDragEnd}
+          onmousedown={progressDragStart}
+          onmousemove={progressDragMove}
+          onmouseup={progressDragEnd}
+          onmouseleave={progressDragEnd}
+          ontouchstart={progressDragStart}
+          ontouchmove={progressDragMove}
+          ontouchend={progressDragEnd}
         >
           <div class="aplayer-bar">
             <div
               class="aplayer-loaded"
               style="width: {$rdBufTime.bufferPercentage}"
-            />
+            ></div>
             <div class="aplayer-played" style="width: {$rdTime.playPercentage}">
               <div class="aplayer-thumb">
                 <span
@@ -405,7 +413,8 @@
             <button
               type="button"
               class="aplayer-icon aplayer-icon-volume-down"
-              on:click|capture={() => {
+              aria-label="Toggle mute"
+              onclickcapture={() => {
                 muted = !muted;
                 toggleVolumeMute();
               }}
@@ -416,29 +425,30 @@
                 {@html soundUnmuted}
               {/if}
             </button>
-              <!-- svelte-ignore a11y-no-static-element-interactions -->
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
               class="aplayer-volume-bar-wrap"
-              on:mousedown={volumeDragStart}
-              on:mousemove={volumeDragMove}
-              on:mouseup={volumeDragEnd}
-              on:mouseleave={volumeDragEnd}
-              on:touchstart={volumeDragStart}
-              on:touchmove={volumeDragMove}
-              on:touchend={volumeDragEnd}
+              onmousedown={volumeDragStart}
+              onmousemove={volumeDragMove}
+              onmouseup={volumeDragEnd}
+              onmouseleave={volumeDragEnd}
+              ontouchstart={volumeDragStart}
+              ontouchmove={volumeDragMove}
+              ontouchend={volumeDragEnd}
             >
               <div class="aplayer-volume-bar" bind:this={volumeBar}>
                 <div
                   class="aplayer-volume"
                   style="height: {player?.muted ? '0px' : volumePercentage}"
-                />
+                ></div>
               </div>
             </div>
           </div>
           <button
             type="button"
             class="aplayer-icon aplayer-icon-order"
-            on:click={() => clickOrder()}
+            aria-label="Toggle order"
+            onclick={() => clickOrder()}
           >
             {#if order === "random"}
               {@html randomOrder}
@@ -449,7 +459,8 @@
           <button
             type="button"
             class="aplayer-icon aplayer-icon-loop"
-            on:click={() => clickLoop()}
+            aria-label="Toggle loop"
+            onclick={() => clickLoop()}
           >
             {#if loop === "none"}
               {@html loopNone}
@@ -464,7 +475,8 @@
           <button
             type="button"
             class="aplayer-icon aplayer-icon-menu"
-            on:click={() => toggleList()}
+            aria-label="Toggle playlist"
+            onclick={() => toggleList()}
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -488,11 +500,11 @@
     >
       <ol>
         {#each $audioList as song, idx}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-          <li on:click={() => switchAudio(idx) }>
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+          <li onclick={() => switchAudio(idx) }>
           {#if idx === $playList.playingIndex}
-            <span class="aplayer-list-cur" />
+            <span class="aplayer-list-cur" ></span>
           {/if}
             <span class="aplayer-list-index">{idx + 1}</span>
             <span class="aplayer-list-title">{song.name}</span>
diff --git a/src/lib/common/audio-player/AudioSpeaker.svelte b/src/lib/common/audio-player/AudioSpeaker.svelte
index d3d1a0b3..48e4c0db 100644
--- a/src/lib/common/audio-player/AudioSpeaker.svelte
+++ b/src/lib/common/audio-player/AudioSpeaker.svelte
@@ -89,12 +89,11 @@
 >
   <div on:click={() => speak()}>
     {#if !speaking}
-      <i
+      <i 
         class="bx bx-volume-full clickable"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
-        title="Play"
-      />
+        title="Play"></i>
     {:else}
       <Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
     {/if}
diff --git a/src/lib/common/audio-player/MessageAudioPlayer.svelte b/src/lib/common/audio-player/MessageAudioPlayer.svelte
index be0bac24..7fb98821 100644
--- a/src/lib/common/audio-player/MessageAudioPlayer.svelte
+++ b/src/lib/common/audio-player/MessageAudioPlayer.svelte
@@ -1,43 +1,45 @@
 <script>
 	import { stopAll, initAudio, clearAudioInstantce } from "$lib/common/audio-player/store";
-	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { onMount, onDestroy } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
 	import Stretch from "../shared/Stretch.svelte";
 
-  const svelteDispatch = createEventDispatcher();
+  /**
+   * @type {{
+   *   id?: string,
+   *   volume?: number,
+   *   mutex?: boolean,
+   *   containerClasses?: string,
+   *   containerStyles?: string,
+   *   disableDefaultStyles?: boolean,
+   *   ondispatch?: (name: string, detail?: any) => void,
+   *   ondestroy?: () => void
+   * }}
+   */
+  let {
+    id = uuidv4(),
+    volume = 0.7,
+    mutex = true,
+    containerClasses = '',
+    containerStyles = '',
+    disableDefaultStyles = false,
+    ondispatch = () => {},
+    ondestroy = () => {}
+  } = $props();
 
   /**
    * @param {string} name
    * @param {any?} detail
    */
   function dispatch(name, detail = null) {
-    svelteDispatch(name, detail);
-  };
-
-  /** @type {string} */
-  export let id = uuidv4();
-
-  /** @type {number} */
-  export let volume = 0.7;
-
-  /** @type {boolean} */
-  export let mutex = true;
-
-  /** @type {string} */
-  export let containerClasses = "";
-
-  /** @type {string} */
-  export let containerStyles = "";
-
-  /** @type {boolean} */
-  export let disableDefaultStyles = false;
-
+    ondispatch(name, detail);
+  }
 
   /** @type {HTMLAudioElement} */
   let player;
 
   /** @type {boolean} */
-  let speaking = false;
+  let speaking = $state(false);
 
   onMount(() => {
     player = init();
@@ -95,19 +97,19 @@
 
   onDestroy(() => {
     clearAudioInstantce(id);
-    dispatch("destroy");
+    ondestroy();
   });
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   class="{disableDefaultStyles ? '' : 'chat-speaker-container'} {containerClasses}"
   style={`${containerStyles}`}
 >
-  <span style="display: inline-block;" on:click={() => speak()}>
+  <span style="display: inline-block;" onclick={() => speak()}>
     {#if !speaking}
-      <i class="bx bx-volume-full" />
+      <i class="bx bx-volume-full"></i>
     {:else}
       <Stretch unit='px' size='5' gap='5' color="var(--bs-primary)" />
     {/if}
diff --git a/src/lib/common/audio-player/store.js b/src/lib/common/audio-player/store.js
index f84496fc..717f8a37 100644
--- a/src/lib/common/audio-player/store.js
+++ b/src/lib/common/audio-player/store.js
@@ -105,7 +105,11 @@ function bindAudioEvent(player, dispatch) {
 /**
  * @param {(name: string, detail?: any) => void} dispatch
  */
-export function useAudioStore(dispatch) {
+/**
+ * @param {(name: string, detail?: any) => void} dispatch
+ * @param {any[]} [initialAudio]
+ */
+export function useAudioStore(dispatch, initialAudio = []) {
   let currentTime = writable(0);
   let duration = writable(NaN);
 
@@ -136,7 +140,7 @@ export function useAudioStore(dispatch) {
   /** @type {import("svelte/store").Writable<{ playingIndex: number, audio: any[] }>} */
   const playList = writable({
     playingIndex: 0,
-    audio: [],
+    audio: initialAudio,
   });
 
   const audioList = derived(playList, ($pl) => $pl.audio);
diff --git a/src/lib/common/dropdowns/FullScreenDropdown.svelte b/src/lib/common/dropdowns/FullScreenDropdown.svelte
index 40cc7e70..138a11af 100644
--- a/src/lib/common/dropdowns/FullScreenDropdown.svelte
+++ b/src/lib/common/dropdowns/FullScreenDropdown.svelte
@@ -1,31 +1,40 @@
 <script>
-	let isFullScreenMode = true;
 	import { browser } from '$app/environment';
-	import Link from 'svelte-link';
+
+	let isFullScreenMode = $state(true);
 
 	function toggleFullscreen() {
 		if (browser) {
 			if (
-				!document.fullscreenElement &&
-				/* alternative standard method */ !document.mozFullScreenElement &&
-				!document.webkitFullscreenElement
+				// @ts-ignore
+				!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement
 			) {
 				// current working methods
 				isFullScreenMode = false;
 				if (document.documentElement.requestFullscreen) {
 					document.documentElement.requestFullscreen();
+				// @ts-ignore
 				} else if (document.documentElement.mozRequestFullScreen) {
+					// @ts-ignore
 					document.documentElement.mozRequestFullScreen();
+				// @ts-ignore
 				} else if (document.documentElement.webkitRequestFullscreen) {
+					// @ts-ignore
 					document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
 				}
 			} else {
 				isFullScreenMode = true;
+				// @ts-ignore
 				if (document.cancelFullScreen) {
+					// @ts-ignore
 					document.cancelFullScreen();
+				// @ts-ignore
 				} else if (document.mozCancelFullScreen) {
+					// @ts-ignore
 					document.mozCancelFullScreen();
+				// @ts-ignore
 				} else if (document.webkitCancelFullScreen) {
+					// @ts-ignore
 					document.webkitCancelFullScreen();
 				}
 			}
@@ -34,7 +43,7 @@
 </script>
 
 <div class="dropdown d-none d-lg-inline-block ms-1">
-	<button on:click={toggleFullscreen} class="btn header-item noti-icon waves-effect">
-		<i class={isFullScreenMode ? 'bx bx-fullscreen fs-22' : 'bx bx-exit-fullscreen fs-22'} />
+	<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>
 	</button>
 </div>
diff --git a/src/lib/common/dropdowns/LanguageDropdown.svelte b/src/lib/common/dropdowns/LanguageDropdown.svelte
index bc1cffb6..b89362b0 100644
--- a/src/lib/common/dropdowns/LanguageDropdown.svelte
+++ b/src/lib/common/dropdowns/LanguageDropdown.svelte
@@ -1,47 +1,62 @@
 <script>
-	import {
-		Dropdown,
-		DropdownToggle,
-		DropdownMenu,
-		DropdownItem,
-	} from '@sveltestrap/sveltestrap';
+	import { onMount } from "svelte";
 	import { setupI18n } from "$lib/helpers/i18n";
 	import languages from "$lib/common/data/languages";
-	import { onMount } from "svelte";
+	import { clickoutsideDirective } from "$lib/helpers/directives";
 
 	/** @type {string} */
-	let selectedLang;
+	let selectedLang = $state('');
 
-	let isOpen = false;
+	let isOpen = $state(false);
 
 	/** @param {string} lang */
 	function handleLocaleChange(lang) {
 		setupI18n({ withLocale: lang });
-		selectedLang = lang
+		selectedLang = lang;
 		localStorage.setItem("I18N_LANGUAGE", lang);
+		isOpen = false;
+	}
+
+	/** @param {any} e */
+	function handleClickOutside(e) {
+		const curNode = e.detail.currentNode;
+		const targetNode = e.detail.targetNode;
+		if (!curNode?.contains(targetNode)) {
+			isOpen = false;
+		}
 	}
 
 	onMount(() => {
 		localStorage.getItem("I18N_LANGUAGE") || "en";
-	})
+	});
 </script>
 
-<Dropdown {isOpen} toggle={() => (isOpen = !isOpen)} class="d-inline-block">
-	<DropdownToggle class="btn header-item" tag="button" color="">
+<div
+	class="dropdown d-inline-block"
+	use:clickoutsideDirective
+	onclickoutside={handleClickOutside}
+>
+	<button
+		type="button"
+		class="btn header-item"
+		aria-label="Select language"
+		onclick={() => (isOpen = !isOpen)}
+	>
 		<img
-		src={languages.find(lang => lang.value === selectedLang)?.flag || 'images/flags/us.jpg'}
-        alt="Language"
-        height="16"
+			src={languages.find(lang => lang.value === selectedLang)?.flag || 'images/flags/us.jpg'}
+			alt="Language"
+			height="16"
+			style="max-height: 16px; width: auto;"
 		/>
-	</DropdownToggle>
-	<DropdownMenu class="language-switch dropdown-menu-end">
+	</button>
+	<div class="dropdown-menu language-switch dropdown-menu-end" class:show={isOpen}>
 		{#each languages as language}
-			<DropdownItem
-				key={language.value}
-				on:click={() => handleLocaleChange(language.value)}
-				class={`notify-item language ${
+			<button
+				type="button"
+				class={`dropdown-item notify-item language ${
 					selectedLang === language.value ? "active" : "none"
 				}`}
+				onclick={() => handleLocaleChange(language.value)}
 			>
 				<img
 					src={language.flag}
@@ -52,7 +67,7 @@
 				<span class="align-middle">
 					{language.label}
 				</span>
-			</DropdownItem>
+			</button>
 		{/each}
-	</DropdownMenu>
-</Dropdown>
+	</div>
+</div>
diff --git a/src/lib/common/dropdowns/NotificationDropdown.svelte b/src/lib/common/dropdowns/NotificationDropdown.svelte
index b8bd8639..dc56a668 100644
--- a/src/lib/common/dropdowns/NotificationDropdown.svelte
+++ b/src/lib/common/dropdowns/NotificationDropdown.svelte
@@ -1,16 +1,16 @@
-<script lang="ts">
-	import Link from 'svelte-link/src/Link.svelte';
-	import { Dropdown, DropdownToggle, DropdownMenu } from '@sveltestrap/sveltestrap';
+<script>
+	import { onMount } from 'svelte';
 	import "overlayscrollbars/overlayscrollbars.css";
 	import { OverlayScrollbars } from "overlayscrollbars";
-	import { _ } from 'svelte-i18n'
+	import { _ } from 'svelte-i18n';
+	import { clickoutsideDirective } from '$lib/helpers/directives';
 
-	import { onMount } from 'svelte';
+	let isOpen = $state(false);
 
 	const options = {
 		scrollbars: {
-			visibility: "auto", // You can adjust the visibility ('auto', 'hidden', 'visible')
-			autoHide: "move", // You can adjust the auto-hide behavior ('move', 'scroll', false)
+			visibility: "auto",
+			autoHide: "move",
 			autoHideDelay: 100,
 			dragScroll: true,
 			clickScroll: false,
@@ -19,47 +19,66 @@
 		},
 	};
 
+	/** @param {any} e */
+	function handleClickOutside(e) {
+		const curNode = e.detail.currentNode;
+		const targetNode = e.detail.targetNode;
+		if (!curNode?.contains(targetNode)) {
+			isOpen = false;
+		}
+	}
+
 	onMount(() => {
 		const menuElement = document.querySelector("#notification");
-		 OverlayScrollbars(menuElement, options);
-	})
+		// @ts-ignore
+		OverlayScrollbars(menuElement, options);
+	});
 </script>
 
-<Dropdown class="d-none d-lg-inline-block">
-	<DropdownToggle type="button" color="" tag="a" class="btn header-item noti-icon waves-effect">
-		<i class="bx bx-bell bx-tada" />
+<div
+	class="dropdown d-none d-lg-inline-block"
+	use:clickoutsideDirective
+	onclickoutside={handleClickOutside}
+>
+	<button
+		type="button"
+		class="btn header-item noti-icon waves-effect"
+		aria-label="Notifications"
+		onclick={() => (isOpen = !isOpen)}
+	>
+		<i class="bx bx-bell bx-tada"></i>
 		<span class="badge bg-danger rounded-pill">1</span>
-	</DropdownToggle>
-	<DropdownMenu class="dropdown-menu-lg" end>
+	</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">
-					<Link class="small" disabled>{$_('View All')}</Link>
+					<span class="small text-muted">{$_('View All')}</span>
 				</div>
 			</div>
 		</div>
-			<div style="max-height: 230px;" id="notification">
-				<Link href="javascript: void(0);" class="text-reset notification-item" disabled>
-					<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" />
-							</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" /> <span >3 {$_('min ago')}</span>
-								</p>
-							</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>
 					</div>
-				</Link>
+				</div>
 			</div>
-	</DropdownMenu>
-</Dropdown>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/common/dropdowns/ProfileDropdown.svelte b/src/lib/common/dropdowns/ProfileDropdown.svelte
index 95ac0fdb..5778aa17 100644
--- a/src/lib/common/dropdowns/ProfileDropdown.svelte
+++ b/src/lib/common/dropdowns/ProfileDropdown.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from '@sveltestrap/sveltestrap';
 	import { resetStorage } from '$lib/helpers/store';
 	import { goto } from '$app/navigation';
 	import { browser } from '$app/environment';
@@ -9,12 +8,15 @@
 	import { buildUrl } from '$lib/helpers/utils/common';
 	import { ChatAction } from '$lib/helpers/enums';
 	import { CHAT_FRAME_ID } from '$lib/helpers/constants';
-	
-	/** @type {any} */
-	export let user;
+	import { clickoutsideDirective } from '$lib/helpers/directives';
+
+	/** @type {{ user?: any }} */
+	let { user } = $props();
+
+	let isOpen = $state(false);
 
 	function logout() {
-		if (browser){	
+		if (browser){
 			resetStorage(true);
 		}
 
@@ -25,52 +27,63 @@
 		}
 
 		goto('login');
-	};
+	}
 
 	/** @param {any} e */
 	function handleAvatarLoad(e) {
 		e.target.src = 'images/users/user-dummy.jpg';
 	}
+
+	/** @param {any} e */
+	function handleClickOutside(e) {
+		const curNode = e.detail.currentNode;
+		const targetNode = e.detail.targetNode;
+		if (!curNode?.contains(targetNode)) {
+			isOpen = false;
+		}
+	}
 </script>
 
-<Dropdown class="d-inline-block">
-	<DropdownToggle
-		tag="a"
-		color=""
-		class="btn header-item waves-effect"
+<div
+	class="dropdown d-inline-block"
+	use:clickoutsideDirective
+	onclickoutside={handleClickOutside}
+>
+	<button
+		type="button"
+		class="btn header-item waves-effect d-inline-flex align-items-center"
 		id="page-header-user-dropdown"
+		aria-label="User menu"
+		onclick={() => (isOpen = !isOpen)}
 	>
 		<img
 			class="rounded-circle header-profile-user"
 			src={`${user?.avatar && $userStore?.token ?
 				`${buildUrl(PUBLIC_SERVICE_URL, user?.avatar)}?access_token=${$userStore?.token}` : ''}`}
 			alt=""
-			on:error={e => handleAvatarLoad(e)}
+			onerror={handleAvatarLoad}
 		/>
-		<span class="d-none d-xl-inline-block ms-1" key="t-fullname">{user?.full_name}</span>
-		<i class="mdi mdi-chevron-down d-none d-xl-inline-block" />
-	</DropdownToggle>
-	<DropdownMenu end>
+		<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>
+	</button>
+	<div class="dropdown-menu dropdown-menu-end" class:show={isOpen}>
 		<!-- item-->
-		<DropdownItem href="page/user/me">
-			<i class="bx bx-user font-size-16 align-middle me-1" />
+		<a class="dropdown-item" href="page/user/me">
+			<i class="bx bx-user font-size-16 align-middle me-1"></i>
 			<span>{$_('Profile')}</span>
-		</DropdownItem>
-		<DropdownItem href="#" disabled>
+		</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"/>
-			<span key="t-settings">{$_('Settings')}</span>
-		</DropdownItem>
-		<DropdownItem divider />
-		<DropdownItem href="#">
-			<div
-				role="button"
-				tabindex="0"
-				on:keydown={() => {}}
-				on:click={() => logout()}
-			>
-				<i class="bx bx-power-off font-size-16 align-middle me-1 text-danger" /> <span>{$_('Logout')}</span>
-			</div>
-		</DropdownItem>
-	</DropdownMenu>
-</Dropdown>
+			<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>
+</div>
diff --git a/src/lib/common/dropdowns/Select.svelte b/src/lib/common/dropdowns/Select.svelte
index f40998a6..8e07e010 100644
--- a/src/lib/common/dropdowns/Select.svelte
+++ b/src/lib/common/dropdowns/Select.svelte
@@ -1,76 +1,66 @@
 <script>
-	import { onMount, createEventDispatcher, tick } from "svelte";
-    import { Input } from "@sveltestrap/sveltestrap";
+    import { onMount, tick, untrack } from "svelte";
     import { clickoutsideDirective } from "$lib/helpers/directives";
 
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {string} */
-    export let tag;
-
-    /** @type {import('$commonTypes').LabelValuePair[]} */
-    export let options = [];
-
-    /** @type {boolean} */
-    export let multiSelect = false;
-
-    /** @type {boolean} */
-    export let selectAll = true;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {string} */
-    export let searchPlaceholder = '';
-
-    /** @type {string} */
-    export let placeholder = '';
-
-    /** @type {string} */
-    export let selectedText = '';
-
-    /** @type {string[]} */
-    export let selectedValues = [];
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    /** @type {boolean} */
-    export let searchMode = false;
-
-    /** @type {boolean} */
-    export let loadMore = false;
-
-    /** @type {null | undefined | (() => Promise<any>)} */
-    export let onScrollMoreOptions = null;
-
+    /**
+     * @type {{
+     *   tag: string,
+     *   options?: import('$commonTypes').LabelValuePair[],
+     *   multiSelect?: boolean,
+     *   selectAll?: boolean,
+     *   disabled?: boolean,
+     *   searchPlaceholder?: string,
+     *   placeholder?: string,
+     *   selectedText?: string,
+     *   selectedValues?: string[],
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disableDefaultStyles?: boolean,
+     *   searchMode?: boolean,
+     *   loadMore?: boolean,
+     *   onScrollMoreOptions?: null | undefined | (() => Promise<any>),
+     *   onselect?: (e: any) => void
+     * }}
+     */
+    let {
+        tag,
+        options = [],
+        multiSelect = false,
+        selectAll = true,
+        disabled = false,
+        searchPlaceholder = '',
+        placeholder = '',
+        selectedText = '',
+        selectedValues = [],
+        containerClasses = "",
+        containerStyles = "",
+        disableDefaultStyles = false,
+        searchMode = false,
+        loadMore = false,
+        onScrollMoreOptions = null,
+        onselect = () => {}
+    } = $props();
 
     /** @type {string} */
-    let searchValue = '';
+    let searchValue = $state('');
 
     /** @type {boolean} */
-    let selectAllChecked = false;
+    let selectAllChecked = $state(false);
 
     /** @type {boolean} */
-    let showOptionList = false;
+    let showOptionList = $state(false);
 
     /** @type {{label: string, value: string, checked: boolean}[]} */
-    let innerOptions = [];
+    let innerOptions = $state([]);
 
     /** @type {{label: string, value: string, checked: boolean}[]} */
-    let refOptions = [];
+    let refOptions = $state([]);
 
     /** @type {string} */
-    let displayText = '';
+    let displayText = $state('');
 
     /** @type {boolean} */
-    let loading = false;
+    let loading = $state(false);
 
     /**
      * @type {number | undefined}
@@ -81,46 +71,42 @@
         initOptions();
     });
 
-    $: {
-        innerOptions = verifySelectedOptions(innerOptions, selectedValues);
-        refOptions = verifySelectedOptions(innerOptions, selectedValues);
-    }
-
-    $: {
-        if (loadMore) {
-            if (options.length > refOptions.length) {
-                const curKeys = refOptions.map(x => x.value);
-                const newOptions = options.filter(x => !curKeys.includes(x.value)).map(x => {
-                    return {
-                        label: x.label,
-                        value: x.value,
-                        checked: false
-                    };
-                });
-
-                innerOptions = [
-                    ...innerOptions,
-                    ...newOptions
-                ];
-
-                refOptions = [
-                    ...refOptions,
-                    ...newOptions
-                ];
-
+    $effect(() => {
+        // track options, selectedValues, and loadMore as triggers
+        const _opts = options;
+        const _sv = selectedValues;
+        const _lm = loadMore;
+
+        if (_lm) {
+            // Apply selectedValues verification first
+            const currentInner = untrack(() => innerOptions);
+            let newInner = verifySelectedOptions(currentInner, _sv);
+            let newRef = verifySelectedOptions(currentInner, _sv);
+
+            // Append any new options not yet present
+            if (_opts.length > newRef.length) {
+                const curKeys = newRef.map(x => x.value);
+                const addedOptions = _opts.filter(x => !curKeys.includes(x.value)).map(x => ({
+                    label: x.label,
+                    value: x.value,
+                    checked: false
+                }));
+                newInner = [...newInner, ...addedOptions];
+                newRef = [...newRef, ...addedOptions];
             }
+
+            innerOptions = newInner;
+            refOptions = newRef;
         } else {
-            innerOptions = verifySelectedOptions(options, selectedValues);
-            refOptions = verifySelectedOptions(options, selectedValues);
+            innerOptions = verifySelectedOptions(_opts, _sv);
+            refOptions = verifySelectedOptions(_opts, _sv);
         }
-    }
 
-    $: {
-        if (innerOptions && refOptions) {
+        untrack(() => {
             applySearchFilter();
             changeDisplayText();
-        }
-    }
+        });
+    });
 
     function initOptions() {
         const newInnerOptions = options.map(x => {
@@ -294,8 +280,10 @@
     }
 
     function sendEvent() {
-        svelteDispatch("select", {
-            selecteds: refOptions.filter(x => !!x.checked).map(x => ({ label: x.label, value: x.value }))
+        onselect?.({
+            detail: {
+                selecteds: refOptions.filter(x => !!x.checked).map(x => ({ label: x.label, value: x.value }))
+            }
         });
     }
 
@@ -324,9 +312,9 @@
 
             if (dropdown.scrollHeight - dropdown.scrollTop - dropdown.clientHeight <= 1) {
                 loading = true;
-                onScrollMoreOptions().then(res => {
+                onScrollMoreOptions().then(() => {
                     loading = false;
-                }).catch(err => {
+                }).catch(() => {
                     loading = false;
                 });
             }
@@ -361,57 +349,59 @@
     class="{disableDefaultStyles ? '' : 'multiselect-container'} {containerClasses}"
     style={`${containerStyles}`}
     use:clickoutsideDirective
-    on:clickoutside={(/** @type {any} */ e) => handleClickOutside(e)}
+    onclickoutside={(/** @type {any} */ e) => handleClickOutside(e)}
 >
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
         class="display-container"
         id={`multiselect-btn-${tag}`}
-        on:click={() => toggleOptionList()}
+        onclick={() => toggleOptionList()}
     >
-        <Input
+        <input
             type="text"
             name={'select-display-text'}
-            class={`clickable ${disabled ? 'disabled' : ''}`}
+            class={`form-control clickable ${disabled ? 'disabled' : ''}`}
             value={displayText}
             placeholder={placeholder}
             disabled={disabled}
             readonly
         />
         <div class={`display-suffix ${showOptionList ? 'show-list' : ''}`}>
-            <i class="bx bx-chevron-down" />
+            <i class="bx bx-chevron-down"></i>
         </div>
     </div>
     {#if showOptionList}
-        <ul class="option-list" id={`multiselect-list-${tag}`} on:scroll={() => innerScroll()}>
+        <ul class="option-list" id={`multiselect-list-${tag}`} onscroll={() => innerScroll()}>
             {#if searchMode}
                 <div class="search-box">
                     <div class="search-prefix">
-                        <i class="bx bx-search-alt" />
+                        <i class="bx bx-search-alt"></i>
                     </div>
-                    <Input
+                    <input
                         type="text"
                         name={'select-search-text'}
+                        class="form-control"
                         value={searchValue}
                         placeholder={searchPlaceholder}
-                        on:input={e => changeSearchValue(e)}
+                        oninput={e => changeSearchValue(e)}
                     />
                 </div>
             {/if}
             {#if innerOptions.length > 0}
                 {#if selectAll && multiSelect}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
                         class="option-item clickable"
-                        on:click|preventDefault|stopPropagation={() => {
+                        onclick={(/** @type {MouseEvent} */ e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
                             checkSelectAll(null);
                         }}
                     >
                         <div class="line-align-center select-box">
-                            <Input
+                            <input
                                 type="checkbox"
                                 name={'select-select-all'}
                                 style="pointer-events: none;"
@@ -425,11 +415,13 @@
                     </li>
                 {/if}
                 {#if !multiSelect}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
                         class="option-item clickable justify-content-center"
-                        on:click|preventDefault|stopPropagation={() => {
+                        onclick={(/** @type {MouseEvent} */ e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
                             clearSelection();
                         }}
                     >
@@ -439,17 +431,19 @@
                     </li>
                 {/if}
                 {#each innerOptions as option, idx (idx)}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+                    <!-- svelte-ignore a11y_click_events_have_key_events -->
+                    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
                     <li
                         class="option-item clickable"
-                        on:click|preventDefault|stopPropagation={() => {
+                        onclick={(/** @type {MouseEvent} */ e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
                             checkOption(null, option);
                         }}
                     >
                         <div class="line-align-center select-box">
                             {#if multiSelect}
-                                <Input
+                                <input
                                     type="checkbox"
                                     name={`select-checkbox-${option.value}`}
                                     style="pointer-events: none;"
@@ -457,7 +451,7 @@
                                     readonly
                                 />
                             {:else if option.checked}
-                                <i class="bx bx-check text-primary" />
+                                <i class="bx bx-check text-primary"></i>
                             {:else}
                                 {' '}
                             {/if}
diff --git a/src/lib/common/embedding/EmbeddingPage.svelte b/src/lib/common/embedding/EmbeddingPage.svelte
index d54ba9aa..8205b06c 100644
--- a/src/lib/common/embedding/EmbeddingPage.svelte
+++ b/src/lib/common/embedding/EmbeddingPage.svelte
@@ -1,54 +1,46 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
-    import { derived } from 'svelte/store';
+    import { onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { _ } from 'svelte-i18n';
-	import { getUserStore, globalMenuStore } from '$lib/helpers/store';
-	
-    /** @type {string} */
-    export let htmlTagId = 'embedding-page';
-
-    /** @type {string} */
-    export let slugName = 'embedding-slug';
+    import { getUserStore, globalMenuStore } from '$lib/helpers/store';
 
-    /** @type {string?} */
-    export let label = '';
-
-    /** @type {any} */
-    let menuUnsubscribe;
+    let {
+        htmlTagId = 'embedding-page',
+        slugName = 'embedding-slug',
+        label = $bindable('')
+    } = $props();
 
     /** @type {string} */
-    let curSlug = '';
+    let curSlug = $state('');
 
-    const slug = derived(page, $page => $page.params[slugName]);
+    // @ts-ignore
+    let slug = $derived($page.params[slugName]);
 
-    const contentSubscribe = slug.subscribe(value => {
+    $effect(() => {
+        const value = slug;
         if (curSlug && curSlug !== value) {
             location.reload();
         }
         curSlug = value;
     });
 
-    onMount(async () => {
-        menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
+    onMount(() => {
+        const menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
             const url = getPathUrl();
             let found = menu.find(x => x.link === url);
-            label = found?.label || null;
+            label = found?.label || '';
             if (!found?.embeddingInfo) {
                 const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
                 found = subFound?.subMenu?.find(x => x.link === url);
-                label = found?.label || null;
+                label = found?.label || '';
             }
             embed(found?.embeddingInfo || null);
         });
-    });
 
-    onDestroy(() => {
-        menuUnsubscribe?.();
-        contentSubscribe?.();
+        return () => {
+            menuUnsubscribe?.();
+        };
     });
 
-    
     /** @param {import('$pluginTypes').EmbeddingInfoModel?} data */
     function embed(data) {
         if (!data) return;
@@ -86,9 +78,9 @@
     }
 
     const getPathUrl = () => {
-		const path = $page.url.pathname;
-		return path?.startsWith('/') ? path.substring(1) : path;
-	};
+        const path = $page.url.pathname;
+        return path?.startsWith('/') ? path.substring(1) : path;
+    };
 </script>
 
 <div
diff --git a/src/lib/common/errors/error-500.svelte b/src/lib/common/errors/error-500.svelte
index 5c869655..e0754d7d 100644
--- a/src/lib/common/errors/error-500.svelte
+++ b/src/lib/common/errors/error-500.svelte
@@ -1,38 +1,35 @@
 <script>
-	import Link from 'svelte-link';
-	import { Col, Container, Row } from '@sveltestrap/sveltestrap';
+	import { goto } from '$app/navigation';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 </script>
 
 <HeadTitle title="500 Error Page" />
 
 <div class="account-pages my-5 pt-5">
-	<Container>
-	  <Row>
-		<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" />
-			  0
-			</h1>
-			<h4 class="text-uppercase">Internal Server Error</h4>
-			<div class="mt-5 text-center">
-			  <Link class="btn btn-primary" href="page/dashboard">
-				Back to Dashboard
-			  </Link>
+	<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>
-		</Col>
-	  </Row>
-	  <Row class="justify-content-center">
-		<Col md="8" xl="6">
-		  <div>
-			<img src='images/error-img.png' alt="" class="img-fluid" />
-		  </div>
-		</Col>
-	  </Row>
-	</Container>
-  </div>
-
-
+		</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>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/common/files/AudioGallery.svelte b/src/lib/common/files/AudioGallery.svelte
index 658833dc..7e0e5d45 100644
--- a/src/lib/common/files/AudioGallery.svelte
+++ b/src/lib/common/files/AudioGallery.svelte
@@ -1,20 +1,22 @@
 <script>
 	import AudioPlayer from '../audio-player/AudioPlayer.svelte';
 
-  /** @type {import('$fileTypes').AudioFileModel[]} */
-  export let audios = [];
-
-  /** @type {string} */
-  export let id;
-
-  /** @type {string} */
-  export let containerClasses = "";
-
-  /** @type {string} */
-  export let containerStyles = "";
-
-  /** @type {boolean} */
-  export let disableDefaultStyles = false;
+  /**
+   * @type {{
+   *   audios?: import('$fileTypes').AudioFileModel[],
+   *   id?: string,
+   *   containerClasses?: string,
+   *   containerStyles?: string,
+   *   disableDefaultStyles?: boolean
+   * }}
+   */
+  let {
+    audios = [],
+    id = '',
+    containerClasses = '',
+    containerStyles = '',
+    disableDefaultStyles = false
+  } = $props();
 </script>
 
 
diff --git a/src/lib/common/files/FileDropZone.svelte b/src/lib/common/files/FileDropZone.svelte
index 3872c754..eb790276 100644
--- a/src/lib/common/files/FileDropZone.svelte
+++ b/src/lib/common/files/FileDropZone.svelte
@@ -12,62 +12,95 @@
       isPropagationStopped,
       TOO_MANY_FILES_REJECTION
     } from "$lib/helpers/utils/file";
-    import { onMount, onDestroy, createEventDispatcher } from "svelte";
-  
-    //props
-    /** @type {string} */
-    export let accept;
-    export let disabled = false;
-    export let getFilesFromEvent = fromEvent;
-    export let maxSize = Infinity;
-    export let minSize = 0;
-    export let multiple = true;
-    export let preventDropOnDocument = true;
-    export let noClick = false;
-    export let noKeyboard = false;
-    export let noDrag = false;
-    export let noDragEventsBubbling = false;
-    export let containerClasses = "";
-    export let containerStyles = "";
-    export let disableDefaultStyles = false;
-    export let name = "";
-    /** @type {any} */
-    export let inputElement = undefined;
-    export let required = false;
-    export let dropText = "Drag and drop some files here, or click to select files";
-    export let fileLimit = 5;
-
-    let innerDropText = dropText;
-    let innerDisabled = disabled;
-    let isLoading = false;
-    let isError = false;
-    let isSuccess = false;
-    let reason = '';
+    import { onDestroy } from "svelte";
+
+    /**
+     * @type {{
+     *   accept?: string,
+     *   disabled?: boolean,
+     *   getFilesFromEvent?: (event: any) => any,
+     *   maxSize?: number,
+     *   minSize?: number,
+     *   multiple?: boolean,
+     *   preventDropOnDocument?: boolean,
+     *   noClick?: boolean,
+     *   noKeyboard?: boolean,
+     *   noDrag?: boolean,
+     *   noDragEventsBubbling?: boolean,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disableDefaultStyles?: boolean,
+     *   name?: string,
+     *   inputElement?: any,
+     *   required?: boolean,
+     *   dropText?: string,
+     *   fileLimit?: number,
+     *   ondragenter?: (detail: any) => void,
+     *   ondragover?: (detail: any) => void,
+     *   ondragleave?: (detail: any) => void,
+     *   ondrop?: (detail: any) => void,
+     *   ondroprejected?: (detail: any) => void,
+     *   ondropaccepted?: (detail: any) => void,
+     *   onfiledropped?: (detail: any) => void,
+     *   onfiledialogcancel?: () => void,
+     *   children?: import('svelte').Snippet
+     * }}
+     */
+    let {
+        accept = '',
+        disabled = false,
+        getFilesFromEvent = fromEvent,
+        maxSize = Infinity,
+        minSize = 0,
+        multiple = true,
+        preventDropOnDocument = true,
+        noClick = false,
+        noKeyboard = false,
+        noDrag = false,
+        noDragEventsBubbling = false,
+        containerClasses = '',
+        containerStyles = '',
+        disableDefaultStyles = false,
+        name = '',
+        inputElement = $bindable(undefined),
+        required = false,
+        dropText = 'Drag and drop some files here, or click to select files',
+        fileLimit = 5,
+        ondragenter,
+        ondragover,
+        ondragleave,
+        ondrop,
+        ondroprejected,
+        ondropaccepted,
+        onfiledropped,
+        onfiledialogcancel,
+        children
+    } = $props();
+
+    let isLoading = $state(false);
+    let isError = $state(false);
+    let isSuccess = $state(false);
+    let reason = $state('');
 
     const defaultSuccessMesssage = "Upload succeeded!";
     const defaultErrorMesssage = "Upload failed!";
 
-    $: {
-        if (isLoading) {
-            innerDropText = "Uploading...";
-            innerDisabled = true;
-        } else if (isSuccess) {
-            innerDropText = defaultSuccessMesssage;
-            innerDisabled = true;
-        } else if (isError) {
-            innerDropText = reason;
-            innerDisabled = true;
-        } else {
-            innerDropText = dropText;
-            innerDisabled = disabled;
-        }
-    }
+    let innerDropText = $derived.by(() => {
+        if (isLoading) return "Uploading...";
+        if (isSuccess) return defaultSuccessMesssage;
+        if (isError) return reason;
+        return dropText;
+    });
+
+    let innerDisabled = $derived.by(() => {
+        if (isLoading || isSuccess || isError) return true;
+        return disabled;
+    });
 
     const duration = 1500;
-    const dispatch = createEventDispatcher();
-  
+
     //state
-    let state = {
+    let dropState = {
         isFocused: false,
         isFileDialogActive: false,
         isDragActive: false,
@@ -80,27 +113,27 @@
         /** @type {any} */
         fileRejections: []
     };
-  
+
     /** @type {any} */
     let rootRef;
-  
+
     function resetState() {
-        state.isFileDialogActive = false;
-        state.isDragActive = false;
-        state.draggedFiles = [];
-        state.acceptedFiles = [];
-        state.fileRejections = [];
+        dropState.isFileDialogActive = false;
+        dropState.isDragActive = false;
+        dropState.draggedFiles = [];
+        dropState.acceptedFiles = [];
+        dropState.fileRejections = [];
     }
-  
+
     // Fn for opening the file dialog programmatically
     function openFileDialog() {
         if (inputElement) {
             inputElement.value = null; // TODO check if null needs to be set
-            state.isFileDialogActive = true;
+            dropState.isFileDialogActive = true;
             inputElement.click();
         }
     }
-  
+
     // Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
     /** @param {any} event */
     function onKeyDownCb(event) {
@@ -114,13 +147,13 @@
             openFileDialog();
         }
     }
-  
+
     // Update focus state for the dropzone
     function onFocusCb() {
-        state.isFocused = true;
+        dropState.isFocused = true;
     }
     function onBlurCb() {
-        state.isFocused = false;
+        dropState.isFocused = false;
     }
   
     // Cb to open the file dialog when click occurs on the dropzone
@@ -152,10 +185,10 @@
                     return;
                 }
 
-                state.draggedFiles = draggedFiles;
-                state.isDragActive = true;
+                dropState.draggedFiles = draggedFiles;
+                dropState.isDragActive = true;
 
-                dispatch("dragenter", {
+                ondragenter?.({
                     dragEvent: event
                 });
             });
@@ -174,7 +207,7 @@
         }
 
         if (isEvtWithFiles(event)) {
-            dispatch("dragover", {
+            ondragover?.({
                 dragEvent: event
             });
         }
@@ -200,11 +233,11 @@
             return;
         }
 
-        state.isDragActive = false;
-        state.draggedFiles = [];
+        dropState.isDragActive = false;
+        dropState.draggedFiles = [];
 
         if (isEvtWithFiles(event)) {
-            dispatch("dragleave", {
+            ondragleave?.({
                 dragEvent: event
             });
         }
@@ -218,7 +251,7 @@
         dragTargetsRef = [];
 
         if (isEvtWithFiles(event)) {
-            dispatch("filedropped", {
+            onfiledropped?.({
                 event
             });
             Promise.resolve(getFilesFromEvent(event)).then(files => {
@@ -235,7 +268,7 @@
                 const promises = [];
                 isLoading = true;
                 files.forEach(file => {
-                    promises.push(new Promise((resolve, reject) => {
+                    promises.push(new Promise((resolve) => {
                         const [accepted, acceptError] = fileAccepted(file, accept);
                         const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
                         getBase64(file).then(data => {
@@ -275,17 +308,17 @@
                         inputElement.files = event.dataTransfer.files;
                     }
 
-                    state.acceptedFiles = acceptedFiles;
-                    state.fileRejections = fileRejections;
+                    dropState.acceptedFiles = acceptedFiles;
+                    dropState.fileRejections = fileRejections;
 
-                    dispatch("drop", {
+                    ondrop?.({
                         acceptedFiles,
                         fileRejections,
                         event
                     });
 
                     if (fileRejections.length > 0) {
-                        dispatch("droprejected", {
+                        ondroprejected?.({
                             fileRejections,
                             event
                         });
@@ -299,7 +332,7 @@
                     }
 
                     if (acceptedFiles.length > 0) {
-                        dispatch("dropaccepted", {
+                        ondropaccepted?.({
                             acceptedFiles,
                             event
                         });
@@ -317,11 +350,14 @@
         resetState();
     }
   
-    $: composeHandler = (/** @type {any} */ fn) => (innerDisabled ? null : fn);
-  
-    $: composeKeyboardHandler = (/** @type {any} */ fn) => (noKeyboard ? null : composeHandler(fn));
-  
-    $: composeDragHandler = (/** @type {any} */ fn) => (noDrag ? null : composeHandler(fn));
+    /** @param {any} fn */
+    function composeHandler(fn) { return innerDisabled ? () => {} : fn; }
+
+    /** @param {any} fn */
+    function composeKeyboardHandler(fn) { return noKeyboard ? () => {} : composeHandler(fn); }
+
+    /** @param {any} fn */
+    function composeDragHandler(fn) { return noDrag ? () => {} : composeHandler(fn); }
   
     /** @param {any} event */
     function stopPropagation(event) {
@@ -356,14 +392,14 @@
     // Update file dialog active state when the window is focused on
     function onWindowFocus() {
         // Execute the timeout only if the file dialog is opened in the browser
-        if (state.isFileDialogActive) {
+        if (dropState.isFileDialogActive) {
             setTimeout(() => {
                 if (inputElement) {
                     const { files } = inputElement;
 
                     if (!files.length) {
-                        state.isFileDialogActive = false;
-                        dispatch("filedialogcancel");
+                        dropState.isFileDialogActive = false;
+                        onfiledialogcancel?.();
                     }
                 }
             }, 300);
@@ -381,7 +417,7 @@
     }
 </script>
 
-<svelte:window on:focus={onWindowFocus} on:dragover={onDocumentDragOver} on:drop={onDocumentDrop} />
+<svelte:window onfocus={onWindowFocus} ondragover={onDocumentDragOver} ondrop={onDocumentDrop} />
 
 
 <div
@@ -390,14 +426,14 @@
     role="button"
     class="{disableDefaultStyles ? '' : 'file-dropzone'} {containerClasses}"
     style={`${containerStyles}`}
-    on:keydown={composeKeyboardHandler(onKeyDownCb)}
-    on:focus={composeKeyboardHandler(onFocusCb)}
-    on:blur={composeKeyboardHandler(onBlurCb)}
-    on:click={composeHandler(onClickCb)}
-    on:dragenter={composeDragHandler(onDragEnterCb)}
-    on:dragover={composeDragHandler(onDragOverCb)}
-    on:dragleave={composeDragHandler(onDragLeaveCb)}
-    on:drop={composeDragHandler(onDropCb)}
+    onkeydown={composeKeyboardHandler(onKeyDownCb)}
+    onfocus={composeKeyboardHandler(onFocusCb)}
+    onblur={composeKeyboardHandler(onBlurCb)}
+    onclick={composeHandler(onClickCb)}
+    ondragenter={composeDragHandler(onDragEnterCb)}
+    ondragover={composeDragHandler(onDragOverCb)}
+    ondragleave={composeDragHandler(onDragLeaveCb)}
+    ondrop={composeDragHandler(onDropCb)}
 >
     <input
         {accept}
@@ -407,14 +443,16 @@
         {name}
         autocomplete="off"
         tabindex="-1"
-        on:change={onDropCb}
-        on:click={onInputElementClick}
+        onchange={onDropCb}
+        onclick={onInputElementClick}
         bind:this={inputElement}
         style="display: none;"
     />
-    <slot>
+    {#if children}
+        {@render children()}
+    {:else}
         <div class="add-file-icon">
-            <i class="bx bxs-image-add" />
+            <i class="bx bxs-image-add"></i>
         </div>
-    </slot>
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src/lib/common/files/FileGallery.svelte b/src/lib/common/files/FileGallery.svelte
index a800baaa..91ef0ea4 100644
--- a/src/lib/common/files/FileGallery.svelte
+++ b/src/lib/common/files/FileGallery.svelte
@@ -5,44 +5,42 @@
     } from '$lib/helpers/utils/file';
     import { LightboxGallery, GalleryThumbnail, GalleryImage } from 'svelte-lightbox';
 
-    /** @type {import('$fileTypes').TextFileModel[]} */
-    export let files = [];
-
-    /** @type {boolean} */
-    export let needDelete = false;
-
-    /** @type {boolean} */
-    export let needDownload = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {boolean} */
-    export let showFileName = false;
-
-    /** @type {boolean} */
-    export let showPrefix = false;
-
-    /** @type {boolean} */
-    export let showSuffix = false;
-
-    /** @type {string} */
-    export let gap = '3px';
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    /** @type {(args0: number) => void} */
-    export let onDelete = () => {};
-
-    /** @type {(args0: number) => void} */
-    export let onDownload = () => {};
+    /**
+     * @type {{
+     *   files?: import('$fileTypes').TextFileModel[],
+     *   needDelete?: boolean,
+     *   needDownload?: boolean,
+     *   disabled?: boolean,
+     *   showFileName?: boolean,
+     *   showPrefix?: boolean,
+     *   showSuffix?: boolean,
+     *   gap?: string,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disableDefaultStyles?: boolean,
+     *   onDelete?: (args0: number) => void,
+     *   onDownload?: (args0: number) => void,
+     *   prefix?: import('svelte').Snippet,
+     *   suffix?: import('svelte').Snippet
+     * }}
+     */
+    let {
+        files = [],
+        needDelete = false,
+        needDownload = false,
+        disabled = false,
+        showFileName = false,
+        showPrefix = false,
+        showSuffix = false,
+        gap = '3px',
+        containerClasses = '',
+        containerStyles = '',
+        disableDefaultStyles = false,
+        onDelete = () => {},
+        onDownload = () => {},
+        prefix,
+        suffix
+    } = $props();
 
     
 
@@ -77,7 +75,7 @@
 >
     {#if showPrefix}
         <div class="gallery-item">
-            <slot name="prefix" />
+            {@render prefix?.()}
         </div>
     {/if}
 
@@ -97,10 +95,10 @@
                                             data-bs-toggle="tooltip"
                                             data-bs-placement="top"
                                             title="Delete"
-                                            on:keydown={() => {}}
-                                            on:click={e => handleDeleteFile(e, idx)}
+                                            onkeydown={() => {}}
+                                            onclick={e => handleDeleteFile(e, idx)}
                                         >
-                                            <i class="bx bx-trash" />
+                                            <i class="bx bx-trash"></i>
                                         </div>
                                     {/if}
                                     {#if needDownload && !!file.file_download_url}
@@ -111,13 +109,13 @@
                                             data-bs-toggle="tooltip"
                                             data-bs-placement="top"
                                             title={`${isHtml(file.file_extension || file.file_name) ? 'Download' : 'Go to web page'}`}
-                                            on:keydown={() => {}}
-                                            on:click={e => handleDownloadFile(e, idx)}
+                                            onkeydown={() => {}}
+                                            onclick={e => handleDownloadFile(e, idx)}
                                         >
                                             {#if isHtml(file.file_extension || file.file_name)}
-                                                <i class="mdi mdi-web" />
+                                                <i class="mdi mdi-web"></i>
                                             {:else}
-                                                <i class="bx bx-download" />
+                                                <i class="bx bx-download"></i>
                                             {/if}
                                         </div>
                                     {/if}
@@ -180,7 +178,7 @@
 
     {#if showSuffix}
         <div class="gallery-item">
-            <slot name="suffix" />
+            {@render suffix?.()}
         </div>
     {/if}
 </div>
diff --git a/src/lib/common/files/MessageFileGallery.svelte b/src/lib/common/files/MessageFileGallery.svelte
index a3a4f98f..b41f0f39 100644
--- a/src/lib/common/files/MessageFileGallery.svelte
+++ b/src/lib/common/files/MessageFileGallery.svelte
@@ -7,27 +7,29 @@
 	import { isExternalUrl } from '$lib/helpers/utils/common';
     import AudioGallery from './AudioGallery.svelte';
 	import { IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
-	
-    /** @type {string} */
-    export let galleryClasses = '';
 
-    /** @type {string} */
-    export let galleryStyles = '';
-
-    /** @type {any} */
-    export let message;
-
-    /** @type {boolean} */
-    export let appendImage = false;
-
-    /** @type {() => Promise<any>} */
-    export let fetchFiles = () => Promise.resolve([]);
+    /**
+     * @type {{
+     *   galleryClasses?: string,
+     *   galleryStyles?: string,
+     *   message?: any,
+     *   appendImage?: boolean,
+     *   fetchFiles?: () => Promise<any>
+     * }}
+     */
+    let {
+        galleryClasses = '',
+        galleryStyles = '',
+        message = undefined,
+        appendImage = false,
+        fetchFiles = () => Promise.resolve([])
+    } = $props();
 
     /** @type {import('$fileTypes').TextFileModel[]} */
-    let textFiles = [];
+    let textFiles = $state([]);
 
     /** @type {import('$fileTypes').AudioFileModel[]} */
-    let audioFiles = [];
+    let audioFiles = $state([]);
 
     onMount(async () => {
         if (fetchFiles != null && fetchFiles != undefined) {
diff --git a/src/lib/common/markdown/CodeBlock.svelte b/src/lib/common/markdown/CodeBlock.svelte
index 6d1c9f69..05489764 100644
--- a/src/lib/common/markdown/CodeBlock.svelte
+++ b/src/lib/common/markdown/CodeBlock.svelte
@@ -1,14 +1,12 @@
 <script>
+    let {
+        /** @type {string} */
+        lang = '',
+        /** @type {string} */
+        text = ''
+    } = $props();
 
-    /** @type {string} */
-    export let lang;
-
-    /** @type {string} */
-    export let text;
-
-
-    /** @type {boolean} */
-    let copied = false;
+    let copied = $state(false);
 
     function copyToClipboard() {
         navigator.clipboard.writeText(text).then(() => {
@@ -25,27 +23,27 @@
         <div class="line-align-center fw-bold">
             {lang || ''}
         </div>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
             class="line-align-center copy-btn"
+            role="button"
+            tabindex="0"
             data-bs-toggle="tooltip"
             data-bs-placement="top"
             title="Copy"
-            on:mouseup={() => copyToClipboard()}
-            on:mousedown={() => copied = true}
+            onmouseup={() => copyToClipboard()}
+            onmousedown={() => copied = true}
         >
             {#if copied}
                 <div class="div-center">
                     <div class="line-align-center">
-                        <i class="bx bx-check" style="font-size: 18px;" /> 
+                        <i class="bx bx-check" style="font-size: 18px;"></i>
                     </div>
                     <div class="line-align-center">
                         <span style="font-size: 10px;">{'Copied!'}</span>
                     </div>
                 </div>
             {:else}
-                <i class="bx bx-copy clickable" />
+                <i class="bx bx-copy clickable"></i>
             {/if}
         </div>
     </div>
diff --git a/src/lib/common/markdown/Markdown.svelte b/src/lib/common/markdown/Markdown.svelte
index aa6eb7ba..60f775f6 100644
--- a/src/lib/common/markdown/Markdown.svelte
+++ b/src/lib/common/markdown/Markdown.svelte
@@ -6,20 +6,18 @@
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import { v4 as uuidv4 } from 'uuid';
 
-    /** @type {string} */
-	export let text;
-
-	/** @type {string} */
-	export let containerClasses = "";
-
-	/** @type {string} */
-	export let containerStyles = "";
-
-	/** @type {boolean} */
-	export let rawText = false;
-
-	/** @type {boolean} */
-	export let scrollable = false;
+	let {
+		/** @type {string} */
+		text = '',
+		/** @type {string} */
+		containerClasses = '',
+		/** @type {string} */
+		containerStyles = '',
+		/** @type {boolean} */
+		rawText = false,
+		/** @type {boolean} */
+		scrollable = false
+	} = $props();
 
 	const scrollbarId = `markdown-scrollbar-${uuidv4()}`;
 	const options = {
@@ -48,19 +46,18 @@
 		}
     }
 
-    let innerText = '';
-	$: {
-		if (typeof text !== 'string') {
-			text = `${JSON.stringify(text)}`;
-		}
-		const markedText = !rawText ? replaceNewLine(marked(replaceMarkdown(text || ''))?.toString()) : marked(text || '')?.toString();
+	let innerText = $derived.by(() => {
+		const normalizedText = typeof text !== 'string' ? `${JSON.stringify(text)}` : text;
+		const markedText = !rawText
+			? replaceNewLine(marked(replaceMarkdown(normalizedText || ''))?.toString())
+			: marked(normalizedText || '')?.toString();
 		if (!!markedText && markedText.endsWith('<br>')) {
 			const idx = markedText.lastIndexOf('<br>');
-			innerText = markedText.substring(0, idx);
+			return markedText.substring(0, idx);
 		} else {
-            innerText = markedText;
+            return markedText;
         }
-	}
+	});
 </script>
 
 <div
diff --git a/src/lib/common/modals/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
index 45915fd2..19271895 100644
--- a/src/lib/common/modals/DialogModal.svelte
+++ b/src/lib/common/modals/DialogModal.svelte
@@ -1,102 +1,114 @@
 <script>
-    import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "@sveltestrap/sveltestrap";
-
-    /** @type {boolean} */
-    export let isOpen;
-
-    /** @type {boolean} */
-    export let closeable = false;
-
-    /** @type {string} */
-    export let size = 'xl';
-
-    /** @type {string | any} */
-    export let title;
-
-    /** @type {string} */
-    export let className = '';
-
-    /** @type {string} */
-    export let confirmBtnText = 'Confirm';
-
-    /** @type {string} */
-    export let cancelBtnText = 'Cancel';
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-    /** @type {() => void} */
-    export let confirm = () => {};
-
-    /** @type {() => void} */
-    export let cancel = () => {};
-
-    /** @type {() => void} */
-    export let close = () => {};
-
-    /** @type {boolean} */
-    export let disableConfirmBtn = false;
+    import { fade } from 'svelte/transition';
+
+    let {
+        isOpen = false,
+        closeable = false,
+        size = 'xl',
+        title = '',
+        className = '',
+        confirmBtnText = 'Confirm',
+        cancelBtnText = 'Cancel',
+        toggleModal = () => {},
+        confirm = () => {},
+        cancel = () => {},
+        close = () => {},
+        disableConfirmBtn = false,
+        children,
+        titleIcon = undefined
+    } = $props();
+
+    /** @type {Record<string, string>} */
+    const sizeClasses = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl'
+    };
 
     /** @param {any} e */
     function handleConfirm(e) {
         e.preventDefault();
-        confirm && confirm();
+        confirm?.();
     }
 
     /** @param {any} e */
     function handleCancel(e) {
         e.preventDefault();
-        cancel && cancel();
+        cancel?.();
     }
 
     /** @param {any} e */
     function handleClose(e) {
         e.preventDefault();
-        close && close();
+        close?.();
     }
-</script>
 
+    /** @param {MouseEvent} e */
+    function handleBackdropClick(e) {
+        if (e.target === e.currentTarget) {
+            toggleModal();
+        }
+    }
+</script>
 
-<Modal
-    class={`dialog-modal-container ${className}`}
-    fade
-    size={size}
-    isOpen={isOpen}
-    toggle={() => toggleModal()}
-    unmountOnClose
+{#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-[10vh] bg-black/50"
+    transition:fade={{ duration: 150 }}
+    onclick={handleBackdropClick}
 >
-    <ModalHeader>
-        <div class="dialog-modal-header">
+    <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="header-title">
-                    <slot name='title-icon'/>
+                <div class="flex items-center gap-2 font-semibold text-lg">
+                    {@render titleIcon?.()}
                     <div>{title}</div>
                 </div>
             {/if}
             {#if closeable}
-                <div class="header-close">
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <div
-                        class="clickable"
-                        on:click={e => handleClose(e)}
-                    >
-                        <i class="mdi mdi-close" />
-                    </div>
-                </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={e => handleClose(e)}
+                >
+                    <i class="mdi mdi-close text-xl"></i>
+                </button>
             {/if}
         </div>
-    </ModalHeader>
-    <ModalBody>
-        <slot />
-    </ModalBody>
-    <ModalFooter>
-        {#if !!confirmBtnText}
-        <Button color="primary" on:click={(e) => handleConfirm(e)} disabled={disableConfirmBtn}>{confirmBtnText}</Button>
-        {/if}
 
-        {#if !!cancelBtnText}
-        <Button color="secondary" on:click={(e) => handleCancel(e)}>{cancelBtnText}</Button>
-        {/if}
-    </ModalFooter>
-</Modal>
\ No newline at end of file
+        <!-- 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}
+
+            {#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>
+            {/if}
+        </div>
+    </div>
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
index 27851df9..a862595b 100644
--- a/src/lib/common/modals/PlainModal.svelte
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -1,39 +1,64 @@
 <script>
-    import { Modal, ModalBody } from "@sveltestrap/sveltestrap";
+    import { fade } from 'svelte/transition';
 
-    /** @type {boolean} */
-    export let isOpen;
+    let {
+        isOpen = false,
+        size = 'lg',
+        title = '',
+        containerClasses = '',
+        containerStyles = '',
+        bodyStyles = '',
+        toggleModal = () => {},
+        children
+    } = $props();
 
-    /** @type {string} */
-    export let size = 'lg';
+    /** @type {Record<string, string>} */
+    const sizeClasses = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl'
+    };
 
-    /** @type {string | any} */
-    export let title;
-
-    /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {string} */
-    export let containerStyles = '';
-
-    /** @type {string} */
-    export let bodyStyles = '';
-
-    /** @type {() => void} */
-    export let toggleModal;
+    /** @param {MouseEvent} e */
+    function handleBackdropClick(e) {
+        if (e.target === e.currentTarget) {
+            toggleModal();
+        }
+    }
 </script>
 
-<Modal
-    class={containerClasses}
-    style={containerStyles}
-    fade
-    size={size}
-    isOpen={isOpen}
-    header={title}
-    toggle={() => toggleModal()}
-    unmountOnClose
+{#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-[10vh] bg-black/50"
+    transition:fade={{ duration: 150 }}
+    onclick={handleBackdropClick}
 >
-    <ModalBody style={bodyStyles}>
-        <slot />
-    </ModalBody>
-</Modal>
\ No newline at end of file
+    <div
+        class={`bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size] || 'max-w-lg'} mx-4 ${containerClasses}`}
+        style={containerStyles}
+    >
+        <!-- Header -->
+        {#if title}
+        <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700">
+            <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}
+
+        <!-- Body -->
+        <div class="p-3" style={bodyStyles}>
+            {@render children?.()}
+        </div>
+    </div>
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/common/modals/StateModal.svelte b/src/lib/common/modals/StateModal.svelte
index 6a8e7ebb..7d38611f 100644
--- a/src/lib/common/modals/StateModal.svelte
+++ b/src/lib/common/modals/StateModal.svelte
@@ -1,48 +1,30 @@
 <script>
-	import {
-        Button,
-        Input,
-        Modal,
-        ModalBody,
-        ModalFooter,
-        ModalHeader,
-        Row,
-        Form,
-        FormGroup
-    } from "@sveltestrap/sveltestrap";
+    import { fade } from 'svelte/transition';
+    import { untrack } from 'svelte';
     import _ from "lodash";
 
-    /** @type {boolean} */
-    export let isOpen;
+    let {
+        isOpen = false,
+        size = 'xl',
+        className = '',
+        toggleModal = () => {},
+        confirm = () => {},
+        cancel = () => {},
+        limit = 10,
+        title = "Add states",
+        validateKey = true,
+        validateValue = true,
+        requireActiveRounds = false,
+        states = $bindable([])
+    } = $props();
 
-    /** @type {string} */
-    export let size = 'xl';
-
-    /** @type {string} */
-    export let className = '';
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-    /** @type {() => void} */
-    export let confirm;
-
-    /** @type {() => void} */
-    export let cancel;
-
-    /** @type {number} */
-    export let limit = 10;
-    
-    /** @type {string} */
-    export let title = "Add states";
-
-    /** @type {boolean} */
-    export let validateKey = true;
-    export let validateValue = true;
-    export let requireActiveRounds = false;
-
-    /** @type {import('$conversationTypes').UserStateDetailModel[]} */
-    export let states = [];
+    /** @type {Record<string, string>} */
+    const sizeClasses = {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl'
+    };
 
     /** @type {import('$conversationTypes').UserStateDetailModel} */
     const defaultState = {
@@ -51,13 +33,22 @@
         active_rounds: { data: -1, isValid: true }
     };
 
-    $: {
+    $effect(() => {
         if (isOpen) {
-            if (states?.length > 0) {
-                states = [...states];
-            } else {
-                states = [{...JSON.parse(JSON.stringify(defaultState))}];
-            }
+            untrack(() => {
+                if (states?.length > 0) {
+                    states = [...states];
+                } else {
+                    states = [{...JSON.parse(JSON.stringify(defaultState))}];
+                }
+            });
+        }
+    });
+
+    /** @param {MouseEvent} e */
+    function handleBackdropClick(e) {
+        if (e.target === e.currentTarget) {
+            toggleModal();
         }
     }
 
@@ -70,12 +61,12 @@
         states = states.map(state => {
             const key = _.trim(state.key.data);
             const value = _.trim(state.value.data);
-            if (!!!key && validateKey) {
+            if (!key && validateKey) {
                 state.key.isValid = false;
                 isValidForm = isValidForm && state.key.isValid;
             }
 
-            if (!!!value && validateValue) {
+            if (!value && validateValue) {
                 state.value.isValid = false;
                 isValidForm = isValidForm && state.value.isValid;
             }
@@ -158,73 +149,120 @@
     }
 </script>
 
-<Modal class={className} fade size={size} isOpen={isOpen} unmountOnClose toggle={() => toggleModal && toggleModal()}>
-    <ModalHeader>{title}</ModalHeader>
-    <ModalBody>
-        <Form class="state-form">
-            {#each states as state, idx (idx)}
-            <Row>
-                <div class={`${requireActiveRounds ? 'state-key-input' : 'state-input'}`}>
-                    <FormGroup>
-                        {#if idx === 0}
-                        <label for="key">
-                            {`Key ${validateKey ? '(Required)' : '(Optional)'}`}
-                        </label>
-                        {/if}
-                        <Input class={`${!state.key.isValid ? 'invalid' : ''}`} placeholder="Enter a key" value={state.key.data} maxlength={50} on:input={(e) => changeKey(e, idx)} />
-                    </FormGroup>
-                </div>
-                <div class={`${requireActiveRounds ? 'state-key-input' : 'state-input'}`}>
-                    <FormGroup>
-                        {#if idx === 0}
-                        <label for="value">
-                            {`Value ${validateValue ? '(Required)' : '(Optional)'}`}
-                        </label>
-                        {/if}
-                        <Input class={`${!state.value.isValid ? 'invalid' : ''}`} placeholder="Enter a value" value={state.value.data} maxlength={1000} on:input={(e) => changeValue(e, idx)} />
-                    </FormGroup>
-                </div>
-                {#if requireActiveRounds}
-                <div class="state-num-input">
-                    <FormGroup>
-                        {#if idx === 0}
-                        <label for="value">
-                            {`Active rounds (Optional)`}
-                        </label>
-                        {/if}
-                        <Input type="number" placeholder="Enter a value" value={state.active_rounds.data} on:input={(e) => changeActiveRounds(e, idx)} />
-                    </FormGroup>
-                </div>
-                {/if}
-                <div class="state-delete mb-3 line-align-center" style={`padding-top: ${idx === 0 ? '28px' : '0px'}`}>
-                    <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 clickable"
-                            class:hide={states.length === 1}
-                            on:click={() => remove(idx)}
-                        />
+{#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-[10vh] 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>
+        </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>
+                    {/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>
                 </div>
-            </Row>
-            {/each}
-            <Row>
-                <div>
-                    <Button 
-                        color="primary"
-                        class="btn btn-primary"
-                        disabled={states.length >= limit}
-                        on:click={() => addState()}
-                    >
-                        Add +
-                    </Button>
+                {/each}
+                <div class="flex flex-wrap">
+                    <div>
+                        <button
+                            type="button"
+                            class="px-4 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"
+                            disabled={states.length >= limit}
+                            onclick={() => addState()}
+                        >
+                            Add +
+                        </button>
+                    </div>
                 </div>
-            </Row>
-        </Form>
-    </ModalBody>
-    <ModalFooter>
-      <Button color="primary" on:click={(e) => handleConfirm(e)}>Confirm</Button>
-      <Button color="secondary" on:click={(e) => handleCancel(e)}>Cancel</Button>
-    </ModalFooter>
-</Modal>
\ No newline at end of file
+            </form>
+        </div>
+
+        <!-- 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>
+        </div>
+    </div>
+</div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/common/nav-bar/NavBar.svelte b/src/lib/common/nav-bar/NavBar.svelte
index e48c94b1..dbdd45c6 100644
--- a/src/lib/common/nav-bar/NavBar.svelte
+++ b/src/lib/common/nav-bar/NavBar.svelte
@@ -1,28 +1,21 @@
 <script>
-
-    /** @type {string} */
-    export let id = "nav-bar";
-
-    /** @type {string} */
-    export let role = "tablist";
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
+    let {
+        id = "nav-bar",
+        role = "tablist",
+        containerClasses = "",
+        containerStyles = "",
+        disableDefaultStyles = false,
+        children
+    } = $props();
 </script>
 
 <ul
     class="nav nav-tabs {disableDefaultStyles ? '' : 'nav-tabs-default nav-container'} {containerClasses}"
     style={`${containerStyles}`}
-    id={id}
-    role={role}
+    {id}
+    {role}
 >
-    <slot />
+    {@render children?.()}
 </ul>
 
 <style>
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
index 845115ba..1326af9a 100644
--- a/src/lib/common/nav-bar/NavItem.svelte
+++ b/src/lib/common/nav-bar/NavItem.svelte
@@ -1,75 +1,33 @@
 <script>
 	import InPlaceEdit from "../shared/InPlaceEdit.svelte";
 
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultContainerStyles = false;
-
-    /** @type {string} */
-    export let containerRole = "presentation";
-
-    /** @type {string} */
-    export let containerId = "nav-item";
-
-    /** @type {string} */
-    export let navBtnClasses = "";
-
-    /** @type {string} */
-    export let navBtnStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultNavBtnStyles = false;
-
-    /** @type {string} */
-    export let navBtnRole = "tab";
-
-    /** @type {string} */
-    export let navBtnId = "nav-item-id";
-
-    /** @type {string} */
-    export let navBtnText;
-
-    /** @type {boolean} */
-    export let active = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {boolean} */
-    export let allowEdit = false;
-
-    /** @type {number} */
-    export let maxEditLength = 30;
-
-    /** @type {string} */
-    export let editPlaceholder = "Please edit here...";
-
-    /** @type {boolean} */
-    export let allowDelete = false;
-
-    /** @type {string} */
-    export let dataBsToggle = "tab";
-
-    /** @type {string} */
-    export let dataBsTarget = "#nav-item-pane";
-
-    /** @type {string} */
-    export let ariaControls = "nav-item-tab-pane";
-
-    /** @type {() => void} */
-    export let onClick = () => {};
-
-    /** @type {() => void} */
-    export let onDelete = () => {};
-
-    /** @type {() => void} */
-    export let onInput = () => {};
+    let {
+        containerClasses = "",
+        containerStyles = "",
+        disableDefaultContainerStyles = false,
+        containerRole = "presentation",
+        containerId = "nav-item",
+        navBtnClasses = "",
+        navBtnStyles = "",
+        disableDefaultNavBtnStyles = false,
+        navBtnRole = "tab",
+        navBtnId = "nav-item-id",
+        navBtnText = $bindable(),
+        active = false,
+        disabled = false,
+        allowEdit = false,
+        maxEditLength = 30,
+        editPlaceholder = "Please edit here...",
+        allowDelete = false,
+        dataBsToggle = "tab",
+        dataBsTarget = "#nav-item-pane",
+        ariaControls = "nav-item-tab-pane",
+        onClick = () => {},
+        onDelete = () => {},
+        onInput = () => {},
+        /** @type {import('svelte').Snippet | undefined} */
+        deleteIcon = undefined
+    } = $props();
 
     /** @param {any} e */
     function handleTabClick(e) {
@@ -101,21 +59,21 @@
         class:active={active}
         style={`${navBtnStyles}`}
         id={navBtnId}
-        type="button" 
+        type="button"
         role={navBtnRole}
         data-bs-toggle={dataBsToggle}
         data-bs-target={dataBsTarget}
         aria-controls={ariaControls}
         aria-selected={`${active ? "true" : "false"}`}
-        disabled={disabled}
-        on:click={(e) => handleTabClick(e)}
+        {disabled}
+        onclick={(e) => handleTabClick(e)}
     >
         {#if allowEdit}
-            <InPlaceEdit 
-                bind:value={navBtnText} 
-                maxLength={maxEditLength} 
+            <InPlaceEdit
+                bind:value={navBtnText}
+                maxLength={maxEditLength}
                 placeholder={editPlaceholder}
-                on:input={handleTabInput}
+                onInput={handleTabInput}
             />
         {:else}
             <div style="height: 100%;" class="line-align-center ellipsis">
@@ -123,18 +81,20 @@
             </div>
         {/if}
     </button>
-    
+
     {#if allowDelete}
-        <slot name="delete-icon">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
+        {#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"
-                    on:click={e => handleTabDelete(e)}
-                />
+                    onclick={e => handleTabDelete(e)}
+                ></i>
             </div>
-        </slot>
+        {/if}
     {/if}
 </li>
 
diff --git a/src/lib/common/shared/Breadcrumb.svelte b/src/lib/common/shared/Breadcrumb.svelte
index 02cf6bf0..0ad3f342 100644
--- a/src/lib/common/shared/Breadcrumb.svelte
+++ b/src/lib/common/shared/Breadcrumb.svelte
@@ -1,25 +1,21 @@
 <script>
-	import { Row, Col, Breadcrumb, BreadcrumbItem } from '@sveltestrap/sveltestrap';
-	import Link from 'svelte-link';
-
-	export let title = '';
-	export let pagetitle = '';
+	let { title = '', pagetitle = '' } = $props();
 </script>
 
-<Row>
-	<Col xs="12">
+<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">
-					<BreadcrumbItem>
-						<Link disabled>{title}</Link>
-					</BreadcrumbItem>
-					<BreadcrumbItem active>
+					<li class="breadcrumb-item">
+						<span class="breadcrumb-link disabled">{title}</span>
+					</li>
+					<li class="breadcrumb-item active" aria-current="page">
 						{pagetitle}
-					</BreadcrumbItem>
+					</li>
 				</ol>
 			</div>
 		</div>
-	</Col>
-</Row>
+	</div>
+</div>
diff --git a/src/lib/common/shared/BubbleChat.svelte b/src/lib/common/shared/BubbleChat.svelte
index bd458311..704ef9ef 100644
--- a/src/lib/common/shared/BubbleChat.svelte
+++ b/src/lib/common/shared/BubbleChat.svelte
@@ -1,21 +1,14 @@
 <script>
-    /** @type {string} */
-    export let text;
+    /** @type {{ text: string, containerClasses?: string, containerStyles?: string, disableDefaultStyles?: boolean, close?: () => void }} */
+    let {
+        text,
+        containerClasses = "",
+        containerStyles = "",
+        disableDefaultStyles = false,
+        close = () => {}
+    } = $props();
 
-    /** @type {() => void} */
-    export let close = () => {};
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    
-    /** @param {any} e */
+    /** @param {Event} e */
     function handleClose(e) {
         e.preventDefault();
         close?.();
@@ -27,13 +20,14 @@
     style={`${containerStyles}`}
 >
     <div class="chat-bubble">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
             class="bubble-delete clickable"
-            on:click={e => handleClose(e)}
+            role="button"
+            tabindex="0"
+            onclick={handleClose}
+            onkeydown={e => e.key === 'Enter' && handleClose(e)}
         >
-            <i class="mdi mdi-close" />
+            <i class="mdi mdi-close"></i>
         </div>
         <div class="bubble-text">
             {text}
diff --git a/src/lib/common/shared/ChartColorsArray.svelte b/src/lib/common/shared/ChartColorsArray.svelte
index a0eb12b0..433785c9 100644
--- a/src/lib/common/shared/ChartColorsArray.svelte
+++ b/src/lib/common/shared/ChartColorsArray.svelte
@@ -1,15 +1,21 @@
-<script context="module">
+<script module>
 	import { browser } from '$app/environment';
 
+	/**
+	 * @param {any[]} colors
+	 */
 	export function getChartColorsArray(colors) {
 		if (browser) {
 			if (colors) {
-				return colors.map(function (value) {
+				return colors.map((value) => {
 					var newValue = value.replace(' ', '');
 					if (newValue.indexOf(',') === -1) {
 						var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
-						if (color) return color;
-						else return newValue;
+						if (color) {
+							return color;
+						} else {
+							return newValue;
+						}
 					} else {
 						var val = value.split(',');
 						if (val.length == 2) {
diff --git a/src/lib/common/shared/CodeScript.svelte b/src/lib/common/shared/CodeScript.svelte
index a95851fc..19bc8fa9 100644
--- a/src/lib/common/shared/CodeScript.svelte
+++ b/src/lib/common/shared/CodeScript.svelte
@@ -1,102 +1,71 @@
 <script>
-    import { onMount, createEventDispatcher } from "svelte";
     import CodeMirror from "svelte-codemirror-editor";
-    import { keymap, lineNumbers } from "@codemirror/view";
-    import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
-    import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
-    import { EditorState } from "@codemirror/state";
+    import { indentService } from "@codemirror/language";
     import { python } from "@codemirror/lang-python";
     import { javascript } from "@codemirror/lang-javascript";
 	import { oneDark } from "@codemirror/theme-one-dark";
 
-    const dispatch = createEventDispatcher();
-
-    /** @type {string} */
-    export let language = 'python';
-
-    /** @type {string} */
-    export let scriptText;
-
-    /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {boolean} */
-    export let useDarkTheme = true;
-
-    /** @type {boolean} */
-    export let hideLineNumber = false;
-
-    /** @type {boolean} */
-    export let editable = true;
-
+    let {
+        /** @type {string} */
+        language = 'python',
+        /** @type {string} */
+        scriptText = '',
+        /** @type {string} */
+        containerClasses = '',
+        /** @type {boolean} */
+        useDarkTheme = true,
+        /** @type {boolean} */
+        hideLineNumber = false,
+        /** @type {boolean} */
+        editable = true,
+        /** @type {((text: string) => void) | undefined} */
+        onchange = undefined
+    } = $props();
+
+    const pythonIndentService = indentService.of((context, pos) => {
+        const prevLine = pos > 0 ? context.state.doc.lineAt(pos - 1) : null;
+        if (prevLine) {
+            const prevText = prevLine.text;
+            const match = prevText.match(/^(\s*)/);
+            const baseIndent = match ? match[1].length : 0;
+
+            // Check if previous line ends with : (control structure)
+            if (prevText.trimEnd().endsWith(':')) {
+                return baseIndent + 4;
+            }
+            return baseIndent;
+        }
+        return 0;
+    });
 
-    /** @type {import("@codemirror/state").Extension[]} */
-    const baseExtensions = [
-        indentUnit.of("    "),
-        EditorState.tabSize.of(4),
-        indentOnInput(),
-        history(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-    ];
+    /** @type {import("@codemirror/language").LanguageSupport | null} */
+    let lang = $derived(
+        language === 'python' ? python()
+        : language === 'javascript' ? javascript()
+        : null
+    );
 
     /** @type {import("@codemirror/state").Extension[]} */
-    let extensions = [];
-
-    onMount(() => {
-        if (language === 'python') {
-            extensions = [
-                python(),
-                indentService.of((context, pos) => {
-                    const prevLine = pos > 0 ? context.state.doc.lineAt(pos - 1) : null;
-                    if (prevLine) {
-                        const prevText = prevLine.text;
-                        const match = prevText.match(/^(\s*)/);
-                        const baseIndent = match ? match[1].length : 0;
-
-                        // Check if previous line ends with : (control structure)
-                        if (prevText.trimEnd().endsWith(':')) {
-                            return baseIndent + 4;
-                        }
-                        return baseIndent;
-                    }
-                    return 0;
-                }),
-                ...baseExtensions
-            ];
-        } else if (language === 'javascript') {
-            extensions = [
-                javascript(),
-                ...baseExtensions
-            ];
-        } else {
-            extensions = [
-                ...baseExtensions
-            ];
-        }
-
-        if (hideLineNumber) {
-            extensions = [
-                lineNumbers({ formatNumber: () => "" }),
-                ...extensions
-            ];
-        }
-    });
+    let extensions = $derived(
+        language === 'python' ? [pythonIndentService] : []
+    );
 
-    /** @param {any} e */
-    function handleChange(e) {
-        dispatch('change', {
-            text: e.detail
-        });
+    /** @param {string} value */
+    function handleChange(value) {
+        onchange?.(value);
     }
 </script>
 
 
 <CodeMirror
     class={`code-script-container ${containerClasses}`}
+    lang={lang}
+    tabSize={4}
     lineWrapping
+    lineNumbers={hideLineNumber ? { formatNumber: () => "" } : true}
     theme={useDarkTheme ? oneDark : null}
     editable={editable}
     extensions={extensions}
     value={scriptText}
-    on:change={e => handleChange(e)}
+    onchange={handleChange}
 />
\ No newline at end of file
diff --git a/src/lib/common/shared/CollapsibleCard.svelte b/src/lib/common/shared/CollapsibleCard.svelte
index 80c9902b..51a8d60b 100644
--- a/src/lib/common/shared/CollapsibleCard.svelte
+++ b/src/lib/common/shared/CollapsibleCard.svelte
@@ -1,36 +1,34 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import collapse from 'svelte-collapse';
 
-    /** @type {boolean} */
-    export let open = true;
-
-    /** @type {number} */
-    export let duration = 0.2;
-
-    /** @type {string} */
-    export let easing = 'ease';
-
-    const dispatch = createEventDispatcher();
+    let {
+        open = $bindable(true),
+        duration = 0.2,
+        easing = 'ease',
+        onopen = /** @type {(() => void) | undefined} */ (undefined),
+        onclose = /** @type {(() => void) | undefined} */ (undefined),
+        header,
+        body
+    } = $props();
 
     function handleToggle () {
         open = !open;
         if (open) {
-            dispatch('open');
+            onopen?.();
         }
         else {
-            dispatch('close');
+            onclose?.();
         }
     }
 </script>
 
 <div class='collapsible-card' class:open aria-expanded={open}>
-    <button type="button" class='collapsible-card-header' on:click={handleToggle}>
-        <slot name='header'/>
+    <button type="button" class='collapsible-card-header' onclick={handleToggle}>
+        {@render header?.()}
     </button>
 
     <div class='collapsible-card-body' use:collapse={{open, duration, easing}}>
-        <slot name='body'/>
+        {@render body?.()}
     </div>
 </div>
 
diff --git a/src/lib/common/shared/GlobalHeader.svelte b/src/lib/common/shared/GlobalHeader.svelte
index d54e0c38..1f415965 100644
--- a/src/lib/common/shared/GlobalHeader.svelte
+++ b/src/lib/common/shared/GlobalHeader.svelte
@@ -1,29 +1,21 @@
 <script>
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount } from 'svelte';
 	import { globalErrorStore, loaderStore } from '$lib/helpers/store';
 
-    /** @type {boolean} */
-	export let isLoading = false;
-	export let hasError = false;
+	let {
+		isLoading = $bindable(false),
+		hasError = $bindable(false)
+	} = $props();
 
-	/** @type {any} */
-	let loaderUnsubscriber;
-	/** @type {any} */
-	let errorUnsubscriber;
+	$effect(() => {
+		isLoading = $loaderStore;
+	});
 
-    onMount(() => {
-        window?.speechSynthesis?.cancel();
-        loaderUnsubscriber = loaderStore.subscribe(value => {
-			isLoading = value;
-		});
+	$effect(() => {
+		hasError = $globalErrorStore;
+	});
 
-		errorUnsubscriber = globalErrorStore.subscribe(value => {
-			hasError = value;
-		});
-    });
-
-    onDestroy(() => {
-        loaderUnsubscriber?.();
-		errorUnsubscriber?.();
-    });
+	onMount(() => {
+		window?.speechSynthesis?.cancel();
+	});
 </script>
\ No newline at end of file
diff --git a/src/lib/common/shared/HeadTitle.svelte b/src/lib/common/shared/HeadTitle.svelte
index 11f51d58..7c42d194 100644
--- a/src/lib/common/shared/HeadTitle.svelte
+++ b/src/lib/common/shared/HeadTitle.svelte
@@ -1,10 +1,13 @@
 <script>
 	import {PUBLIC_FAVICON_URL, PUBLIC_BRAND_NAME} from '$env/static/public'
-	export let title = 'Home';
-	export let addOn = 'Dashboard';
+
+	let {
+		title = 'Home',
+		addOn = 'Dashboard'
+	} = $props();
 </script>
 
 <svelte:head>
 	<link rel="icon" type="image/x-icon" href={PUBLIC_FAVICON_URL}>
-	<title>{title} | {PUBLIC_BRAND_NAME}{`${!!addOn ? ` - ${addOn}` : ''}`}</title>
+	<title>{title} | {PUBLIC_BRAND_NAME}{`${addOn ? ` - ${addOn}` : ''}`}</title>
 </svelte:head>
diff --git a/src/lib/common/shared/InPlaceEdit.svelte b/src/lib/common/shared/InPlaceEdit.svelte
index cadc2c47..340c1c94 100644
--- a/src/lib/common/shared/InPlaceEdit.svelte
+++ b/src/lib/common/shared/InPlaceEdit.svelte
@@ -1,51 +1,47 @@
 <script>
-    import { createEventDispatcher, onMount } from 'svelte';
-  
-    /** @type {string} */
-    export let value = '';
+    import { onMount } from 'svelte';
 
-    /** @type {boolean} */
-    export let required = true;
+    let {
+        value = $bindable(''),
+        required = true,
+        maxLength = 30,
+        placeholder = 'Please edit here...',
+        onSubmit = /** @type {((val: string) => void) | undefined} */ (undefined),
+        onInput = /** @type {((event: any) => void) | undefined} */ (undefined)
+    } = $props();
 
-    /** @type {number} */
-    export let maxLength = 30;
-
-    /** @type {string} */
-    export let placeholder = 'Please edit here...';
-  
-    const dispatch = createEventDispatcher();
-    let editing = false;
+    let editing = $state(false);
     let original = '';
-  
+
     onMount(() => {
         original = value;
-    })
-  
+    });
+
     function edit() {
         editing = true;
     }
-  
+
     function submit() {
         editing = false;
         if (value != original) {
-            dispatch('submit', value);
+            onSubmit?.(value);
         }
     }
 
     /** @param {any} event */
     function handleInput(event) {
-        dispatch('input', event);
+        onInput?.(event);
     }
 
     /** @param {any} event */
     function keydown(event) {
         if (event.key == 'Escape') {
-            event.preventDefault()
+            event.preventDefault();
             value = original;
             editing = false;
         }
     }
-      
+
     /** @param {HTMLInputElement} element */
     function focus(element) {
         element.focus();
@@ -53,26 +49,26 @@
 </script>
 
 {#if editing}
-    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-    <form on:submit|preventDefault={() => submit()} on:keydown={e => keydown(e)}>
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <form onsubmit={(e) => { e.preventDefault(); submit(); }} onkeydown={e => keydown(e)}>
         <input
             class="form-control"
             bind:value={value}
             {required}
             maxlength={maxLength}
             use:focus
-            on:blur={() => submit()}
-            on:input={handleInput}
+            onblur={() => submit()}
+            oninput={handleInput}
         />
     </form>
 {:else}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" on:click={() => edit()}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" onclick={() => edit()}>
         {#if !!value?.trim()}
             <span>{value}</span>
         {:else}
             <span class="text-secondary fw-light">{placeholder}</span>
         {/if}
     </div>
-{/if}  
\ No newline at end of file
+{/if}
\ No newline at end of file
diff --git a/src/lib/common/shared/Label.svelte b/src/lib/common/shared/Label.svelte
index 792763eb..26778702 100644
--- a/src/lib/common/shared/Label.svelte
+++ b/src/lib/common/shared/Label.svelte
@@ -1,23 +1,23 @@
 <script>
-
-    /** @type {string} */
-    export let text = "";
-    export let className = "";
-    export let style = "";
-    export let color = "primary";
-    export let ellipsis = false;
-    /** @type {string | number} */
-    export let index;
-    /** @type {(args0: number | string) => void} */
-    export let onClose = () => {};
+    let {
+        text = "",
+        className = "",
+        style = "",
+        color = "primary",
+        ellipsis = false,
+        /** @type {string | number} */
+        index,
+        /** @type {(args0: number | string) => void} */
+        onClose = () => {}
+    } = $props();
 
     /**
 	 * @param {any} e
-	 * @param {string | number} index
+	 * @param {string | number} idx
 	 */
-    function handleClose(e, index) {
+    function handleClose(e, idx) {
         e.preventDefault();
-        onClose && onClose(index);
+        onClose?.(idx);
     }
 </script>
 
@@ -31,9 +31,10 @@
                 class="mdi mdi-window-close label-close"
                 role="button"
                 tabindex="0"
-                on:keydown={() => {}}
-                on:click={(e) => handleClose(e, index)}
-            />
+                onkeydown={() => {}}
+                onclick={(e) => handleClose(e, index)}
+            >
+            </i>
         </div>
     </button>
 </div>
diff --git a/src/lib/common/shared/LiveChatEntry.svelte b/src/lib/common/shared/LiveChatEntry.svelte
index 66b3e02c..a1a81ba1 100644
--- a/src/lib/common/shared/LiveChatEntry.svelte
+++ b/src/lib/common/shared/LiveChatEntry.svelte
@@ -7,12 +7,12 @@
 	import { ChatAction } from '$lib/helpers/enums';
 	import BubbleChat from './BubbleChat.svelte';
 
-    let chatUrl = PUBLIC_LIVECHAT_HOST;
-    let showChatBox = false;
-    let showBubbleMsg = false;
-    let receivedMsg = '';
+    let chatUrl = $state(PUBLIC_LIVECHAT_HOST);
+    let showChatBox = $state(false);
+    let showBubbleMsg = $state(false);
+    let receivedMsg = $state('');
     /** @type {number | undefined} */
-    let timeout;
+    let timeout = $state(undefined);
 
     onMount(async () => {
         const agentSettings = await getSettingDetail("Agent");
@@ -78,7 +78,8 @@
         class={`border border-2 rounded-3 m-3 float-end ${showChatBox ? 'chat-iframe' : 'hide'}`}
         title="live chat"
         id={CHAT_FRAME_ID}
-    />
+    >
+    </iframe>
 
     {#if !showChatBox}
         <div
@@ -86,7 +87,7 @@
             class="chatbot-icon mb-3 float-end wave-effect"
             transition:fade={{ delay: 50, duration: 200 }}
         >
-            <button class="btn btn-transparent chat-icon-btn" on:click={() => openChatBox()}>
+            <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>
         </div>
diff --git a/src/lib/common/shared/PlainPagination.svelte b/src/lib/common/shared/PlainPagination.svelte
index a67c94f6..99c50fe9 100644
--- a/src/lib/common/shared/PlainPagination.svelte
+++ b/src/lib/common/shared/PlainPagination.svelte
@@ -1,30 +1,30 @@
 <script>
-    import Link from 'svelte-link';
-	import {
-		Col,
-		Row,
-	} from '@sveltestrap/sveltestrap';
-
-    /** @type {import('$commonTypes').Pagination} */    
-    export let pagination = { page: 1, size: 10, count: 0 };
-    /** @type {(pageNum: number) => void} */  
-    export let pageTo;
+    /**
+     * @type {{
+     *   pagination?: import('$commonTypes').Pagination,
+     *   pageTo: (pageNum: number) => void
+     * }}
+     */
+    let {
+        pagination = { page: 1, size: 10, count: 0 },
+        pageTo
+    } = $props();
 
 	const firstPage = 1;
     const offSet = 2;
 
 	/** @type {number} */
-    $: totalPages = Math.ceil(pagination.count / pagination.size);
+    let totalPages = $derived(Math.ceil(pagination.count / pagination.size));
 	/** @type {number} */
-    $: minPage = Math.max(Math.min(pagination.page - offSet, totalPages - 2 * offSet), firstPage);
+    let minPage = $derived(Math.max(Math.min(pagination.page - offSet, totalPages - 2 * offSet), firstPage));
     /** @type {number} */
-    $: maxPage = Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages);
+    let maxPage = $derived(Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages));
     /** @type {number[]} */
-    $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
+    let pages = $derived(Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i));
     /** @type {boolean} */
-    $: disableBackward = pagination.page === firstPage || pagination.count === 0;
+    let disableBackward = $derived(pagination.page === firstPage || pagination.count === 0);
     /** @type {boolean} */
-    $: disableForward = pagination.page === totalPages || pagination.count === 0;
+    let disableForward = $derived(pagination.page === totalPages || pagination.count === 0);
 
     /**
 	 * @param {any} e
@@ -32,37 +32,44 @@
 	 */
 	 function handlePageTo(e, pageNum) {
         e.preventDefault();
-        if (pagination.page === pageNum || pageNum < firstPage || pageNum > totalPages) return;
+        if (pagination.page === pageNum || pageNum < firstPage || pageNum > totalPages) {
+			return;
+		}
         pageTo(pageNum);
     }
 </script>
 
-<Row class="mb-3">
-	<Col lg="12">
+<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">
-					<Link class={`page-link outline-none ${disableBackward ? 'disabled' : ''}`} id="page-first" on:click={(e) => { handlePageTo(e, firstPage); }}>
-						<i class="bx bx-chevrons-left align-middle" />
-					</Link>
-					<Link class={`page-link outline-none ${disableBackward ? 'disabled' : ''}`} id="page-prev" on:click={(e) => { handlePageTo(e, pagination.page - 1); }}>
-						<i class="bx bx-chevron-left align-middle" />
-					</Link>
+					<!-- 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>
 
 					{#each pages as page}
 						<span id="page-num" class="outline-none pagination">
-							<Link class={`page-link clickPageNumber`} active={pagination.page === page} on:click={(e) => handlePageTo(e, page)}>{page}</Link>
+							<!-- 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}
 
-					<Link class={`page-link outline-none ${disableForward ? 'disabled' : ''}`} id="page-next" on:click={(e) => { handlePageTo(e, pagination.page + 1); }}>
-						<i class="bx bx-chevron-right align-middle" />
-					</Link>
-					<Link class={`page-link outline-none ${disableForward ? 'disabled' : ''}`} id="page-last" on:click={(e) => { handlePageTo(e, totalPages); }}>
-						<i class="bx bx-chevrons-right align-middle" />
-					</Link>
+					<!-- 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>
-	</Col>
-</Row>
\ No newline at end of file
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/lib/common/shared/RemoteSearchInput.svelte b/src/lib/common/shared/RemoteSearchInput.svelte
index e05b5b8f..17044f32 100644
--- a/src/lib/common/shared/RemoteSearchInput.svelte
+++ b/src/lib/common/shared/RemoteSearchInput.svelte
@@ -1,37 +1,37 @@
 <script>
-	import {
-		Input,
-		Dropdown,
-		DropdownMenu,
-		DropdownItem,
-		Spinner,
-		DropdownToggle
-	} from '@sveltestrap/sveltestrap';
 	import { debounce } from 'lodash';
 
-	/** @type {string} */
-	export let value;
-    /** @type {string} */
-    export let placeholder = '';
-    /** @type {boolean} */
-	export let disabled = false;
-	/** @type {boolean} */
-	export let loading = false;
-	/** @type {number} */
-    export let maxLength = 2000;
-    /** @type {(query: string) => Promise<string[]>} */
-	export let onSearch = query => Promise.resolve([]);
+	/**
+	 * @type {{
+	 *   value: string,
+	 *   placeholder?: string,
+	 *   disabled?: boolean,
+	 *   loading?: boolean,
+	 *   maxLength?: number,
+	 *   onSearch?: (query: string) => Promise<string[]>,
+	 *   onValueChange?: (value: string) => void
+	 * }}
+	 */
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		loading = $bindable(false),
+		maxLength = 2000,
+		onSearch = (/** @type {string} */ query) => Promise.resolve([]),
+		onValueChange
+	} = $props();
+
+	/** @type {string[]} */
+	let searchResults = $state([]);
+	let isOpen = $state(false);
 
-    export const clearSearchResults = () => {
+	export const clearSearchResults = () => {
 		searchResults = [];
 	};
 
-	/** @type {string[]} */
-	let searchResults = [];
-	let isOpen = false;
-
 	// @ts-ignore
-	const debouncedSearch = debounce(async (query) => {
+	const debouncedSearch = debounce(async (/** @type {string} */ query) => {
 		if (query.length) {
 			loading = true;
 			searchResults = await onSearch(query);
@@ -49,42 +49,59 @@
 		const query = e.target.value;
 		isOpen = true;
 		value = query;
+		onValueChange?.(value);
 		await debouncedSearch(query);
 	}
 
 	/**
-	 * @param { string } result
+	 * @param {string} result
 	 */
 	function selectResult(result) {
 		value = result;
+		onValueChange?.(value);
+		isOpen = false;
 	}
 
-	
+	/**
+	 * @param {MouseEvent} e
+	 */
+	function handleClickOutside(e) {
+		const target = /** @type {HTMLElement} */ (e.target);
+		if (!target.closest('.scrollable-dropdown')) {
+			isOpen = false;
+		}
+	}
 </script>
 
-<div class="position-relative">
-	<Dropdown
-		class="scrollable-dropdown"
-		isOpen={isOpen && (searchResults.length > 0 || loading)}
-		toggle={() => (isOpen = !isOpen)}
-	>
-		<DropdownToggle tag="div">
-			<Input type="text" {value} on:input={handleInput} maxlength={maxLength} {disabled} {placeholder} />
-		</DropdownToggle>
-		<DropdownMenu class="w-100 thin-scrollbar">
+<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>
+	{#if isOpen && (searchResults.length > 0 || loading)}
+		<ul class="dropdown-menu show w-100 thin-scrollbar">
 			{#if loading}
-				<li class="text-center"><Spinner size="sm" /></li>
+				<li class="text-center">
+					<div class="spinner-border spinner-border-sm" role="status">
+						<span class="visually-hidden">Loading...</span>
+					</div>
+				</li>
 			{:else}
-				{#each searchResults as item, index}
-					<DropdownItem
-						active={value === item}
-						title={item}
-                        on:click={() => selectResult(item)}
-					>
-						{item}
-					</DropdownItem>
+				{#each searchResults as item, index (index)}
+					<li>
+						<button
+							type="button"
+							class="dropdown-item"
+							class:active={value === item}
+							title={item}
+							onclick={() => selectResult(item)}
+						>
+							{item}
+						</button>
+					</li>
 				{/each}
 			{/if}
-		</DropdownMenu>
-	</Dropdown>
+		</ul>
+	{/if}
 </div>
diff --git a/src/lib/common/shared/RightSidebar.svelte b/src/lib/common/shared/RightSidebar.svelte
index 30f6dc49..24edee5f 100644
--- a/src/lib/common/shared/RightSidebar.svelte
+++ b/src/lib/common/shared/RightSidebar.svelte
@@ -1,15 +1,26 @@
 <script>
-	import Link from 'svelte-link';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { onMount } from 'svelte';
 
-	export let sidebarColor = 'dark';
-	export let topbarColor = 'light';
-	export let layoutWidth = 'fluid';
-	export let layoutMode = 'light';
-	export let sidebarSize = 'icon';
-	export let closebar;
+	/**
+	 * @type {{
+	 *   sidebarColor?: string,
+	 *   topbarColor?: string,
+	 *   layoutWidth?: string,
+	 *   layoutMode?: string,
+	 *   sidebarSize?: string,
+	 *   closebar: () => void
+	 * }}
+	 */
+	let {
+		sidebarColor = 'dark',
+		topbarColor = 'light',
+		layoutWidth = 'fluid',
+		layoutMode = 'light',
+		sidebarSize = 'icon',
+		closebar
+	} = $props();
 
 	const options = {
 		scrollbars: {
@@ -23,6 +34,10 @@
 		}
 	};
 
+	/**
+	 * @param {string} attribute
+	 * @param {string} value
+	 */
 	function changeBodyAttribute(attribute, value) {
 		if (document.body) document.body.setAttribute(attribute, value);
 
@@ -35,6 +50,7 @@
 
 			if (document.body.classList.contains('vertical-collpsed')) {
 			if (document.querySelector('#vertical-menu')) {
+				// @ts-ignore
 				const Instance = OverlayScrollbars(document.querySelector('#vertical-menu'));
 				if (Instance) {
 					Instance.destroy();
@@ -54,16 +70,25 @@
 			};
 			const menuElement = document.querySelector('#vertical-menu');
 			if (menuElement) {
+				// @ts-ignore
 				OverlayScrollbars(menuElement, options);
 			}
 		}
 		}
 	}
 
+	/**
+	 * @param {string} attribute
+	 * @param {string} value
+	 */
 	function changeLayoutMode(attribute, value) {
 		if (document.documentElement) document.documentElement.setAttribute(attribute, value);
 	}
 
+	/**
+	 * @param {string} attribute
+	 * @param {string} value
+	 */
 	function changeLayoutwidth(attribute, value) {
 		if (document.body) document.body.setAttribute(attribute, value);
 		if (value == 'boxed') {
@@ -74,6 +99,7 @@
 
 		if (document.body.classList.contains('vertical-collpsed')) {
 			if (document.querySelector('#vertical-menu')) {
+				// @ts-ignore
 				const Instance = OverlayScrollbars(document.querySelector('#vertical-menu'));
 				if (Instance) {
 					Instance.destroy();
@@ -93,6 +119,7 @@
 			};
 			const menuElement = document.querySelector('#vertical-menu');
 			if (menuElement) {
+				// @ts-ignore
 				OverlayScrollbars(menuElement, options);
 			}
 		}
@@ -100,6 +127,7 @@
 
 	onMount(() => {
 		const menuElement = document.querySelector('#right-bar');
+		// @ts-ignore
 		OverlayScrollbars(menuElement, options);
 
 		changeBodyAttribute('data-sidebar', sidebarColor);
@@ -109,8 +137,10 @@
 		changeLayoutMode('data-bs-theme', layoutMode);
 		setTimeout(() => {
 			if (document.body.getAttribute('data-layout') == 'horizontal') {
+				// @ts-ignore
 				document.getElementById('sidebaroption').style.display = 'none';
 			} else {
+				// @ts-ignore
 				document.getElementById('sidebaroption').style.display = 'block';
 			}
 		}, 500);
@@ -122,9 +152,10 @@
 		<div class="rightbar-title d-flex align-items-center px-3 py-4">
 			<h5 class="m-0 me-2">Settings</h5>
 
-			<Link href="#" class="right-bar-toggle ms-auto" on:click={closebar}>
-				<i class="mdi mdi-close noti-icon" />
-			</Link>
+			<!-- 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>
 		</div>
 		<!-- Sidebar Color -->
 		<div class="p-4" id="sidebaroption">
@@ -138,7 +169,7 @@
 					name="sidebar-color"
 					id="sidebar-color-light"
 					checked={sidebarColor == 'light'}
-					on:change={() => changeBodyAttribute('data-sidebar', 'light')}
+					onchange={() => changeBodyAttribute('data-sidebar', 'light')}
 				/>
 				<label class="form-check-label" for="sidebar-color-light">Light</label>
 			</div>
@@ -149,7 +180,7 @@
 					name="sidebar-color"
 					id="sidebar-color-dark"
 					checked={sidebarColor == 'dark'}
-					on:change={() => changeBodyAttribute('data-sidebar', 'dark')}
+					onchange={() => changeBodyAttribute('data-sidebar', 'dark')}
 				/>
 				<label class="form-check-label" for="sidebar-color-dark">Dark</label>
 			</div>
@@ -160,7 +191,7 @@
 					name="sidebar-color"
 					id="sidebar-color-colored"
 					checked={sidebarColor == 'colored'}
-					on:change={() => changeBodyAttribute('data-sidebar', 'colored')}
+					onchange={() => changeBodyAttribute('data-sidebar', 'colored')}
 				/>
 				<label class="form-check-label" for="sidebar-color-colored">Colored</label>
 			</div>
@@ -178,7 +209,7 @@
 					name="sidebar-size"
 					id="sidebar-size-light"
 					checked={sidebarSize == 'fluid'}
-					on:change={() => changeBodyAttribute('data-sidebar-size', 'fluid')}
+					onchange={() => changeBodyAttribute('data-sidebar-size', 'fluid')}
 				/>
 				<label class="form-check-label" for="sidebar-size-fluid">Fluid</label>
 			</div>
@@ -189,7 +220,7 @@
 					name="sidebar-size"
 					id="sidebar-size-small"
 					checked={sidebarSize == 'small'}
-					on:change={() => changeBodyAttribute('data-sidebar-size', 'small')}
+					onchange={() => changeBodyAttribute('data-sidebar-size', 'small')}
 				/>
 				<label class="form-check-label" for="sidebar-size-small">Compact</label>
 			</div>
@@ -200,7 +231,7 @@
 					name="sidebar-size"
 					id="sidebar-size-icon"
 					checked={sidebarSize == 'icon'}
-					on:change={() => changeBodyAttribute('data-sidebar-size', 'icon')}
+					onchange={() => changeBodyAttribute('data-sidebar-size', 'icon')}
 				/>
 				<label class="form-check-label" for="sidebar-size-icon">Icon</label>
 			</div>
@@ -218,7 +249,7 @@
 					name="topbar-color"
 					id="topbar-color-light"
 					checked={topbarColor == 'light'}
-					on:change={() => changeBodyAttribute('data-topbar', 'light')}
+					onchange={() => changeBodyAttribute('data-topbar', 'light')}
 				/>
 				<label class="form-check-label" for="topbar-color-light">Light</label>
 			</div>
@@ -229,7 +260,7 @@
 					name="topbar-color"
 					id="topbar-color-dark"
 					checked={topbarColor == 'dark'}
-					on:change={() => changeBodyAttribute('data-topbar', 'dark')}
+					onchange={() => changeBodyAttribute('data-topbar', 'dark')}
 				/>
 				<label class="form-check-label" for="topbar-color-dark">Dark</label>
 			</div>
@@ -247,7 +278,7 @@
 					name="layout-width"
 					id="layout-width-fluid"
 					checked={layoutWidth == 'fluid'}
-					on:change={() => changeLayoutwidth('data-layout-size', 'fluid')}
+					onchange={() => changeLayoutwidth('data-layout-size', 'fluid')}
 				/>
 				<label class="form-check-label" for="layout-width-fluid">Fluid</label>
 			</div>
@@ -258,7 +289,7 @@
 					name="layout-width"
 					id="layout-width-boxed"
 					checked={layoutWidth == 'boxed'}
-					on:change={() => changeLayoutwidth('data-layout-size', 'boxed')}
+					onchange={() => changeLayoutwidth('data-layout-size', 'boxed')}
 				/>
 				<label class="form-check-label" for="layout-width-boxed">Boxed</label>
 			</div>
@@ -269,7 +300,7 @@
 					name="layout-width"
 					id="layout-width-boxed"
 					checked={layoutWidth == 'scrollable'}
-					on:change={() => changeLayoutwidth('data-layout-scrollable', 'true')}
+					onchange={() => changeLayoutwidth('data-layout-scrollable', 'true')}
 				/>
 				<label class="form-check-label" for="layout-width-scrollable">Scrollable</label>
 			</div>
@@ -291,7 +322,7 @@
 					name="layout-mode"
 					id="layout-mode-light"
 					checked={layoutMode == 'light'}
-					on:change={() => changeLayoutMode('data-bs-theme', 'light')}
+					onchange={() => changeLayoutMode('data-bs-theme', 'light')}
 				/>
 				<label class="form-check-label" for="layout-mode-light">Light</label>
 			</div>
@@ -306,7 +337,7 @@
 					name="layout-mode"
 					id="layout-mode-dark"
 					checked={layoutMode == 'dark'}
-					on:change={() => changeLayoutMode('data-bs-theme', 'dark')}
+					onchange={() => changeLayoutMode('data-bs-theme', 'dark')}
 				/>
 				<label class="form-check-label" for="layout-mode-dark">Dark</label>
 			</div>
@@ -317,4 +348,6 @@
 <!-- /Right-bar -->
 
 <!-- Right bar overlay-->
-<div class="rightbar-overlay" on:click={closebar} />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="rightbar-overlay" onclick={closebar}></div>
diff --git a/src/lib/common/shared/StateSearch.svelte b/src/lib/common/shared/StateSearch.svelte
index 3b1f1ddc..a9108d62 100644
--- a/src/lib/common/shared/StateSearch.svelte
+++ b/src/lib/common/shared/StateSearch.svelte
@@ -1,19 +1,21 @@
 <script>
     import { fly } from 'svelte/transition';
 	import RemoteSearchInput from "$lib/common/shared/RemoteSearchInput.svelte";
-	import { Button, Input } from "@sveltestrap/sveltestrap";
 
     const limit = 5;
 
-    /** @type {{key: string, value: string | null}[]} */
-    export let states = [];
-
-    /** @type {number} */
-    export let maxLength = 3000;
-
-    /** @type {(e: string) => Promise<string[]>} */
-	export let onSearch = e => Promise.resolve([]);
-
+    /**
+     * @type {{
+     *   states?: {key: string, value: string | null}[],
+     *   maxLength?: number,
+     *   onSearch?: (e: string) => Promise<string[]>
+     * }}
+     */
+    let {
+        states = $bindable([]),
+        maxLength = 3000,
+        onSearch = () => Promise.resolve([])
+    } = $props();
 
     /** @param {number} idx */
     function removeState(idx) {
@@ -26,6 +28,22 @@
             { key: '', value: ''}
         ];
     }
+
+    /**
+     * @param {number} idx
+     * @param {string} key
+     */
+    function handleKeyChange(idx, key) {
+        states = states.map((s, i) => i === idx ? { ...s, key } : s);
+    }
+
+    /**
+     * @param {number} idx
+     * @param {string | null} value
+     */
+    function handleValueChange(idx, value) {
+        states = states.map((s, i) => i === idx ? { ...s, value } : s);
+    }
 </script>
 
 
@@ -34,47 +52,51 @@
     in:fly={{ y: -10, duration: 500 }}
     out:fly={{ y: -10, duration: 200 }}
 >
-    {#each states as state, idx}
+    {#each states as state, idx (idx)}
         <div class="state-search-item">
             <div style="flex: 1;">
                 <RemoteSearchInput
-                    bind:value={state.key}
+                    value={state.key}
                     maxLength={maxLength}
                     onSearch={e => onSearch(e)}
                     placeholder="Search States"
+                    onValueChange={(/** @type {string} */ val) => handleKeyChange(idx, val)}
                 />
             </div>
             <div style="flex: 1;">
-                <Input
+                <input
                     type="text"
-                    bind:value={state.value}
+                    class="form-control"
+                    value={state.value ?? ''}
                     maxlength={maxLength}
                     disabled={!state.key}
                     placeholder="Enter a value"
+                    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 -->
+                    <!-- 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}
-                        on:click={() => removeState(idx)}
-                    />
+                        onclick={() => removeState(idx)}
+                    ></i>
                 </div>
             </div>
         </div>
     {/each}
     {#if states.length < limit}
         <div class="d-flex justify-content-end">
-            <Button 
-                color="link"
+            <button
+                type="button"
+                class="btn btn-link"
                 style="padding-left: 0px;"
-                on:click={() => addState()}
+                onclick={() => addState()}
             >
                 Add +
-            </Button>
+            </button>
             <div style="flex: 0 0 13px;"></div>
         </div>
     {/if}
diff --git a/src/lib/common/shared/Stretch.svelte b/src/lib/common/shared/Stretch.svelte
index 36595b5f..57a04631 100644
--- a/src/lib/common/shared/Stretch.svelte
+++ b/src/lib/common/shared/Stretch.svelte
@@ -1,44 +1,47 @@
 <script>
 	import { range, durationUnitRegex } from "$lib/helpers/utils/common";
 
-  /** @type {string} */
-	export let color = '#FF3E00';
-
-  /** @type {string} */
-	export let unit = 'px';
-
-  /** @type {string} */
-	export let duration = '1.2s';
-
-  /** @type {string | number} */
-	export let size = '60';
-
-  /** @type {boolean} */
-	export let pause = false;
-
-  /** @type {string | number} */
-  export let gap = '5';
-
-  /** @type {string} */
-  export let containerClasses = '';
-
-  /** @type {string} */
-  export let containerStyles = '';
+  /**
+   * @type {{
+   *   color?: string,
+   *   unit?: string,
+   *   duration?: string,
+   *   size?: string | number,
+   *   pause?: boolean,
+   *   gap?: string | number,
+   *   containerClasses?: string,
+   *   containerStyles?: string
+   * }}
+   */
+  let {
+    color = '#FF3E00',
+    unit = 'px',
+    duration = '1.2s',
+    size = '60',
+    pause = false,
+    gap = '5',
+    containerClasses = '',
+    containerStyles = ''
+  } = $props();
 
   /** @type {string} */
-	let durationUnit = duration.match(durationUnitRegex)?.[0] ?? 's';
+	let durationUnit = $derived(duration.match(durationUnitRegex)?.[0] ?? 's');
 
   /** @type {string} */
-	let durationNum = duration.replace(durationUnitRegex, '');
+	let durationNum = $derived(duration.replace(durationUnitRegex, ''));
 </script>
 
-<div class={`stretch-wrapper ${containerClasses}`} style={`--size: ${size}${unit}; --color: ${color}; --duration: ${duration}; --gap: ${gap}${unit}; ${containerStyles}`}>
+<div
+	class={`stretch-wrapper ${containerClasses}`}
+	style={`--size: ${size}${unit}; --color: ${color}; --duration: ${duration}; --gap: ${gap}${unit}; ${containerStyles}`}
+>
 	{#each range(5, 1) as version}
 		<div
 			class="rect"
 			class:pause-animation={pause}
 			style="animation-delay: {(version - 1) * (+durationNum / 12)}{durationUnit}"
-		/>
+		>
+		</div>
 	{/each}
 </div>
 
diff --git a/src/lib/common/shared/TablePagination.svelte b/src/lib/common/shared/TablePagination.svelte
index 98facb1b..23777492 100644
--- a/src/lib/common/shared/TablePagination.svelte
+++ b/src/lib/common/shared/TablePagination.svelte
@@ -1,32 +1,36 @@
 <script>
-    import { onMount } from 'svelte';
-	import Link from 'svelte-link';  
-    import { _ } from 'svelte-i18n'  
+    import { _ } from 'svelte-i18n'
 
-    /** @type {import('$commonTypes').Pagination} */    
-    export let pagination;
-    /** @type {(pageNum: number) => void} */  
-    export let pageTo;
+    /**
+     * @type {{
+     *   pagination: import('$commonTypes').Pagination,
+     *   pageTo: (pageNum: number) => void
+     * }}
+     */
+    let {
+        pagination,
+        pageTo
+    } = $props();
 
     const firstPage = 1;
     const offSet = 2;
 
     /** @type {number} */
-    $: totalPages = Math.ceil(pagination.count / pagination.size);
+    let totalPages = $derived(Math.ceil(pagination.count / pagination.size));
     /** @type {number} */
-    $: start = pagination.count <= 0 ? 0 : (pagination.page - 1) * pagination.size + 1;
+    let start = $derived(pagination.count <= 0 ? 0 : (pagination.page - 1) * pagination.size + 1);
     /** @type {number} */
-    $: end = Math.min(pagination.page * pagination.size, pagination.count);
+    let end = $derived(Math.min(pagination.page * pagination.size, pagination.count));
     /** @type {number} */
-    $: minPage = Math.max(Math.min(pagination.page - offSet, totalPages - 2 * offSet), firstPage);
+    let minPage = $derived(Math.max(Math.min(pagination.page - offSet, totalPages - 2 * offSet), firstPage));
     /** @type {number} */
-    $: maxPage = Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages);
+    let maxPage = $derived(Math.min(Math.max(pagination.page + offSet, firstPage + 2 * offSet), totalPages));
     /** @type {number[]} */
-    $: pages = Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i);
+    let pages = $derived(Array.from({ length: maxPage - minPage + 1 }, (_, i) => minPage + i));
     /** @type {boolean} */
-    $: disableBackward = pagination.page === firstPage || pagination.count === 0;
+    let disableBackward = $derived(pagination.page === firstPage || pagination.count === 0);
     /** @type {boolean} */
-    $: disableForward = pagination.page === totalPages || pagination.count === 0;
+    let disableForward = $derived(pagination.page === totalPages || pagination.count === 0);
 
     /**
 	 * @param {any} e
@@ -37,10 +41,6 @@
         if (pagination.page === pageNum || pageNum < firstPage || pageNum > totalPages) return;
         pageTo(pageNum);
     }
-
-    onMount(async () => {
-
-    });    
 </script>
 
 <div class="row justify-content-between align-items-center">
@@ -53,34 +53,39 @@
                 <nav aria-label="Page navigation example" class="mb-0">
                     <ul class="pagination mb-0">
                         <li class="page-item">
-                            <Link class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Begin" on:click={(e) => handlePageTo(e, firstPage)}>
+                            <!-- 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>
-                            </Link>
+                            </a>
                         </li>
                         <li class="page-item">
-                            <Link class={`page-link ${disableBackward ? 'disabled' : ''}`} aria-label="Previous" on:click={(e) => handlePageTo(e, pagination.page - 1)}>
+                            <!-- 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>
-                            </Link>
+                            </a>
                         </li>
-                
+
                         {#each pages as page}
                             <li class={`page-item ${page === pagination.page ? 'active' : ''}`}>
-                                <Link class="page-link" on:click={(e) => handlePageTo(e, page)}>{page}</Link>
+                                <!-- 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}
-                
+
                         <li class="page-item">
-                            <Link class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Next" on:click={(e) => handlePageTo(e, pagination.page + 1)}>
+                            <!-- 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>
-                            </Link>
+                            </a>
                         </li>
                         <li class="page-item">
-                            <Link class={`page-link ${disableForward ? 'disabled' : ''}`} aria-label="Last" on:click={(e) => handlePageTo(e, totalPages)}>
+                            <!-- 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>
-                            </Link>
+                            </a>
                         </li>
                     </ul>
-                </nav>                
+                </nav>
             </div>
         </div>
     </div>
diff --git a/src/lib/common/shared/TimeRangePicker.svelte b/src/lib/common/shared/TimeRangePicker.svelte
index 14cf3b73..f760160b 100644
--- a/src/lib/common/shared/TimeRangePicker.svelte
+++ b/src/lib/common/shared/TimeRangePicker.svelte
@@ -1,7 +1,5 @@
 <script>
-	import { onMount, createEventDispatcher } from 'svelte';
-	import { Button, Input } from '@sveltestrap/sveltestrap';
-	import Flatpickr from 'svelte-flatpickr';
+	import flatpickr from 'flatpickr';
 	import 'flatpickr/dist/flatpickr.css';
 	import { TIME_RANGE_OPTIONS, CUSTOM_DATE_RANGE } from '$lib/helpers/constants';
 	import { clickoutsideDirective } from '$lib/helpers/directives';
@@ -12,43 +10,151 @@
 	const TAB_RECENT = 'recent';
 	const TAB_CUSTOM = 'custom';
 
-	/** @type {string} */
-	export let timeRange = '';
-
-	/** @type {string} */
-	export let startDate = '';
-
-	/** @type {string} */
-	export let endDate = '';
-
-	/** @type {string} */
-	let timeRangeDisplayText = '';
+	/**
+	 * @type {{
+	 *   timeRange?: string,
+	 *   startDate?: string,
+	 *   endDate?: string,
+	 *   storageKey?: string,
+	 *   onchange?: (data: { timeRange: string, startDate: string, endDate: string }) => void
+	 * }}
+	 */
+	let {
+		timeRange = $bindable(''),
+		startDate = $bindable(''),
+		endDate = $bindable(''),
+		storageKey = 'botsharp_recent_time_ranges',
+		onchange
+	} = $props();
 
 	/** @type {boolean} */
-	let showDatePicker = false;
+	let showDatePicker = $state(false);
 
 	/** @type {HTMLDivElement | null} */
-	let datePickerRef = null;
+	let datePickerRef = $state(null);
 
 	/** @type {string} */
-	let datePickerTab = 'relative';
+	let datePickerTab = $state('relative');
 
 	// Temporary dates for custom selection (before confirming)
 	/** @type {string} */
-	let tempStartDate = '';
+	let tempStartDate = $state('');
 
 	/** @type {string} */
-	let tempEndDate = '';
+	let tempEndDate = $state('');
 
-	// Flatpickr instance reference
+	// Flatpickr instance reference (plain variable, not reactive, to avoid effect loops)
 	/** @type {any} */
 	let flatpickrInstance = null;
 
+	/** @type {HTMLDivElement | null} */
+	let flatpickrContainerEl = $state(null);
+
+	/** @type {HTMLUListElement | null} */
+	let dropdownEl = $state(null);
+
+	/** @type {boolean} */
+	let dropUp = $state(false);
+
 	/** @type {Array<{ startDate: string, endDate: string, label: string, timeRange?: string }>} */
-	let recentTimeRanges = [];
+	let recentTimeRanges = $state([]);
 
-	/** @type {string} */
-	export let storageKey = 'botsharp_recent_time_ranges';
+	// Preset time range options
+	const presetTimeRangeOptions = TIME_RANGE_OPTIONS.map((x) => ({
+		label: x.label,
+		value: x.value
+	}));
+
+	// Update time range display text reactively
+	let timeRangeDisplayText = $derived.by(() => {
+		if (timeRange === CUSTOM_DATE_RANGE && startDate && endDate) {
+			const start = formatDateForDisplay(startDate);
+			const end = formatDateForDisplay(endDate);
+			if (start === end) {
+				return start;
+			} else {
+				return `${start} - ${end}`;
+			}
+		} else if (timeRange === CUSTOM_DATE_RANGE) {
+			return 'Custom';
+		} else {
+			const selected = presetTimeRangeOptions.find((x) => x.value === timeRange);
+			return selected ? selected.label : '';
+		}
+	});
+
+	$effect(() => {
+		loadRecentTimeRanges();
+	});
+
+	// Initialize/destroy flatpickr when the container element is available
+	$effect(() => {
+		const el = flatpickrContainerEl;
+		if (el) {
+			const instance = flatpickr(el, {
+				mode: 'range',
+				dateFormat: 'Y-m-d',
+				inline: true,
+				allowInput: false,
+				onChange: (/** @type {Date[]} */ selectedDates) => {
+					if (selectedDates.length === 1) {
+						tempStartDate = formatDateForFlatpickr(selectedDates[0]);
+						tempEndDate = '';
+					} else if (selectedDates.length === 2) {
+						tempStartDate = formatDateForFlatpickr(selectedDates[0]);
+						tempEndDate = formatDateForFlatpickr(selectedDates[1]);
+					}
+				}
+			});
+			flatpickrInstance = instance;
+
+			// Set initial dates if available
+			if (tempStartDate && tempEndDate) {
+				instance.setDate([tempStartDate, tempEndDate], false);
+			} else if (tempStartDate) {
+				instance.setDate([tempStartDate], false);
+			}
+
+			return () => {
+				instance.destroy();
+				flatpickrInstance = null;
+			};
+		}
+	});
+
+	// Dynamically position dropdown using fixed positioning to escape ancestor overflow clipping
+	$effect(() => {
+		if (dropdownEl && showDatePicker && datePickerRef) {
+			const btnRect = datePickerRef.getBoundingClientRect();
+			const spaceBelow = window.innerHeight - btnRect.bottom - 8;
+			const spaceAbove = btnRect.top - 8;
+			const minUsable = 250;
+
+			// Set horizontal position: align right edge with button right edge
+			dropdownEl.style.right = `${window.innerWidth - btnRect.right}px`;
+			dropdownEl.style.left = 'auto';
+
+			if (spaceBelow >= minUsable) {
+				// Enough space below — drop down
+				dropUp = false;
+				dropdownEl.style.top = `${btnRect.bottom + 4}px`;
+				dropdownEl.style.bottom = 'auto';
+				dropdownEl.style.maxHeight = `${spaceBelow}px`;
+			} else if (spaceAbove > spaceBelow) {
+				// More space above — drop up
+				dropUp = true;
+				dropdownEl.style.top = 'auto';
+				dropdownEl.style.bottom = `${window.innerHeight - btnRect.top + 4}px`;
+				dropdownEl.style.maxHeight = `${Math.min(spaceAbove, 500)}px`;
+			} else {
+				// Not much space either way — drop down with whatever we have
+				dropUp = false;
+				dropdownEl.style.top = `${btnRect.bottom + 4}px`;
+				dropdownEl.style.bottom = 'auto';
+				dropdownEl.style.maxHeight = `${Math.max(spaceBelow, 200)}px`;
+			}
+		}
+	});
 
 	// Format date for flatpickr (Date object to YYYY-MM-DD string)
 	/** @param {Date} date */
@@ -60,30 +166,6 @@
 		return `${year}-${month}-${day}`;
 	}
 
-	// Flatpickr options for date range selection
-	/** @type {any} */
-	let flatpickrOptions = {
-		mode: 'range',
-		dateFormat: 'Y-m-d',
-		inline: true,
-		allowInput: false,
-		onChange: (
-			/** @type {Date[]} */ selectedDates,
-			/** @type {string} */ dateStr,
-			/** @type {any} */ instance
-		) => {
-			if (selectedDates.length === 1) {
-				// Only start date selected
-				tempStartDate = formatDateForFlatpickr(selectedDates[0]);
-				tempEndDate = '';
-			} else if (selectedDates.length === 2) {
-				// Both dates selected
-				tempStartDate = formatDateForFlatpickr(selectedDates[0]);
-				tempEndDate = formatDateForFlatpickr(selectedDates[1]);
-			}
-		}
-	};
-
 	// Format time range for Recent tab display
 	const formatRecentTimeRangeLabel = (/** @type {string} */ sDate, /** @type {string} */ eDate) => {
 		const start = formatDateForDisplay(sDate);
@@ -135,15 +217,6 @@
 		}
 	}
 
-	// Preset time range options
-	const presetTimeRangeOptions = TIME_RANGE_OPTIONS.map((x) => ({
-		label: x.label,
-		value: x.value
-	}));
-
-	onMount(() => {
-		loadRecentTimeRanges();
-	});
 
 	// Get today's date in YYYY-MM-DD format
 	const getTodayStr = () => {
@@ -177,26 +250,6 @@
 		return `${month}/${day}/${year}`;
 	};
 
-	// Update time range display text reactively
-	$: {
-		if (timeRange === CUSTOM_DATE_RANGE && startDate && endDate) {
-			const start = formatDateForDisplay(startDate);
-			const end = formatDateForDisplay(endDate);
-			if (start === end) {
-				timeRangeDisplayText = start;
-			} else {
-				timeRangeDisplayText = `${start} - ${end}`;
-			}
-		} else if (timeRange === CUSTOM_DATE_RANGE) {
-			timeRangeDisplayText = 'Custom';
-		} else {
-			const selected = presetTimeRangeOptions.find((x) => x.value === timeRange);
-			timeRangeDisplayText = selected ? selected.label : '';
-		}
-	}
-
-	const dispatch = createEventDispatcher();
-
 	function loadRecentTimeRanges() {
 		try {
 			const stored = localStorage.getItem(storageKey);
@@ -214,7 +267,7 @@
 		startDate = '';
 		endDate = '';
 		showDatePicker = false;
-		dispatch('change', { timeRange, startDate, endDate });
+		onchange?.({ timeRange, startDate, endDate });
 	}
 
 	/** @param {any} range */
@@ -227,7 +280,7 @@
 			endDate = range.endDate;
 		}
 		showDatePicker = false;
-		dispatch('change', { timeRange, startDate, endDate });
+		onchange?.({ timeRange, startDate, endDate });
 	}
 
 	/**
@@ -289,7 +342,7 @@
 			startDate = '';
 			endDate = '';
 			showDatePicker = false;
-			dispatch('change', { timeRange, startDate, endDate });
+			onchange?.({ timeRange, startDate, endDate });
 		}
 	}
 
@@ -301,8 +354,8 @@
 			endDate = finalEndDate;
 			timeRange = CUSTOM_DATE_RANGE;
 			saveRecentTimeRange({ startDate, endDate });
-			// Dispatch change event with updated values
-			dispatch('change', {
+			// Invoke change callback with updated values
+			onchange?.({
 				timeRange: CUSTOM_DATE_RANGE,
 				startDate: tempStartDate,
 				endDate: finalEndDate
@@ -320,7 +373,7 @@
 	class="multiselect-container"
 	bind:this={datePickerRef}
 	use:clickoutsideDirective
-	on:clickoutside={(/** @type {any} */ e) => {
+	onclickoutside={(/** @type {any} */ e) => {
 		if (e.detail && e.detail.targetNode && datePickerRef) {
 			if (!datePickerRef.contains(e.detail.targetNode)) {
 				showDatePicker = false;
@@ -331,7 +384,7 @@
 	<button
 		type="button"
 		class="form-control text-start d-flex align-items-center justify-content-between clickable"
-		on:click={() => {
+		onclick={() => {
 			showDatePicker = !showDatePicker;
 			if (showDatePicker) {
 				// If custom date is selected, switch to custom tab; otherwise use relative tab
@@ -351,10 +404,7 @@
 		<i class="bx bx-chevron-down"></i>
 	</button>
 	{#if showDatePicker}
-		<ul
-			class="position-absolute top-100 start-0 mt-1 bg-white border rounded shadow-lg"
-			style="z-index: 1050; min-width: 325px; max-width: 350px;"
-		>
+		<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">
 					<button
@@ -366,7 +416,7 @@
 						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_RELATIVE
 							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
 							: ''}"
-						on:click={() => (datePickerTab = TAB_RELATIVE)}
+						onclick={() => (datePickerTab = TAB_RELATIVE)}
 					>
 						Relative
 					</button>
@@ -381,7 +431,7 @@
 						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_RECENT
 							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
 							: ''}"
-						on:click={() => (datePickerTab = TAB_RECENT)}
+						onclick={() => (datePickerTab = TAB_RECENT)}
 					>
 						Recent
 					</button>
@@ -396,7 +446,7 @@
 						style="padding: 0.5rem 0.75rem; {datePickerTab === TAB_CUSTOM
 							? 'border-bottom: 2px solid var(--bs-primary) !important; margin-bottom: -1px;'
 							: ''}"
-						on:click={() => {
+						onclick={() => {
 							datePickerTab = TAB_CUSTOM;
 							// Delay init to ensure flatpickr is mounted
 							setTimeout(() => {
@@ -410,13 +460,15 @@
 			</ul>
 
 			{#if datePickerTab === TAB_RELATIVE}
-				<div>
-					<ul class="option-list" style="max-height: 300px; overflow-y: auto;">
+				<div class="time-range-tab-content">
+					<ul class="option-list time-range-option-list">
 						<li class="option-item clickable justify-content-center">
 							<button
 								class="clear-btn line-align-center text-secondary"
 								type="button"
-								on:click|preventDefault|stopPropagation={() => {
+								onclick={(e) => {
+									e.preventDefault();
+									e.stopPropagation();
 									clearSelection();
 								}}
 							>
@@ -435,7 +487,7 @@
 									<button
 										class="clear-btn"
 										type="button"
-										on:click={(e) => {
+										onclick={(e) => {
 											e.preventDefault();
 											e.stopPropagation();
 											handleRelativeOptionClick(option.value);
@@ -449,20 +501,22 @@
 					</ul>
 				</div>
 			{:else if datePickerTab === TAB_RECENT}
-				<div>
+				<div class="time-range-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>
 					{:else}
-						<ul class="option-list">
+						<ul class="option-list time-range-option-list">
 							{#each recentTimeRanges as range, index}
 								<li class="option-item clickable">
 									<div class="select-name">
 										<button
 											class="clear-btn text-start w-100"
-											on:click|preventDefault|stopPropagation={() => {
+											onclick={(e) => {
+												e.preventDefault();
+												e.stopPropagation();
 												handleRecentOptionClick(range);
 											}}
 										>
@@ -472,7 +526,10 @@
 									<div class="line-align-center select-box">
 										<button
 											class="clear-btn bx bx-x"
-											on:click|preventDefault|stopPropagation={() => {
+											aria-label="Remove recent time range"
+											onclick={(e) => {
+												e.preventDefault();
+												e.stopPropagation();
 												removeRecentTimeRange(index);
 											}}
 										>
@@ -484,54 +541,50 @@
 					{/if}
 				</div>
 			{:else if datePickerTab === TAB_CUSTOM}
-				<div class="p-2">
-					<!-- Calendar Grid -->
-					<div class="mb-3">
-						<Flatpickr options={flatpickrOptions} bind:flatpickr={flatpickrInstance} />
-					</div>
-
+				<div class="time-range-tab-content p-2">
 					<!-- Date Input Fields -->
 					<div class="d-flex align-items-center gap-2 mb-3">
-						<Input
+						<input
 							type="date"
 							bind:value={tempStartDate}
 							class="form-control form-control-sm"
-							on:change={handleStartDateChange}
+							onchange={handleStartDateChange}
 						/>
 						<span class="text-muted small">to</span>
-						<Input
+						<input
 							type="date"
 							bind:value={tempEndDate}
 							class="form-control form-control-sm"
-							on:change={handleEndDateChange}
+							onchange={handleEndDateChange}
 						/>
 					</div>
 
+					<!-- Calendar Grid -->
+					<div class="mb-3" bind:this={flatpickrContainerEl}></div>
+
 					<div class="d-flex justify-content-end gap-2 mt-3">
-						<Button
-							color="secondary"
-							size="sm"
+						<button
+							class="btn btn-secondary btn-sm"
 							type="button"
-							on:click={(e) => {
+							onclick={(e) => {
 								e.preventDefault();
 								e.stopPropagation();
 								handleCancel();
 							}}
 						>
 							Cancel
-						</Button>
-						<Button
-							color="primary"
-							size="sm"
+						</button>
+						<button
+							class="btn btn-primary btn-sm"
 							type="button"
-							on:click={(e) => {
+							onclick={(e) => {
 								e.preventDefault();
 								e.stopPropagation();
 								handleApply();
 							}}
 						>
 							Apply
-						</Button>
+						</button>
 					</div>
 				</div>
 			{/if}
@@ -545,13 +598,179 @@
 		display: none !important;
 	}
 
+	/* Dropdown panel positioning & responsiveness — use fixed to escape ancestor overflow clipping */
+	.time-range-dropdown {
+		position: fixed;
+		z-index: 1050;
+		min-width: 305px;
+		max-width: 350px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		list-style: none;
+		padding-left: 0;
+		margin-bottom: 0;
+
+		/* On small screens, allow the panel to shrink and avoid overflow */
+		@media (max-width: 576px) {
+			min-width: 280px;
+			max-width: calc(100vw - 2rem);
+		}
+
+		/* Scale flatpickr calendar to fit within the panel */
+		: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;
+			margin-bottom: 4px;
+		}
+
+		:global(.flatpickr-current-month) {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 4px;
+			padding-top: 0;
+			height: 100%;
+			font-size: 14px;
+			left: 0;
+			right: 0;
+			width: 100%;
+		}
+
+		:global(.flatpickr-monthDropdown-months) {
+			font-size: 14px;
+			font-weight: 600;
+			appearance: none;
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			padding: 4px 20px 4px 8px;
+			border-radius: 4px;
+			border: 1px solid lavender;
+			background-color: var(--bs-body-bg, #fff);
+			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);
+			cursor: pointer;
+			width: 90px;
+			height: 30px;
+			text-align: center;
+			text-align-last: center;
+			box-sizing: border-box;
+
+			&:hover {
+				border-color: var(--bs-primary, #556ee6);
+			}
+
+			&:focus {
+				border-color: var(--bs-primary, #556ee6);
+				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;
+			}
+		}
+
+		:global(.numInputWrapper) {
+			height: auto;
+			width: 90px;
+
+			:global(.arrowUp),
+			:global(.arrowDown) {
+				display: none;
+			}
+		}
+
+		:global(.numInput.cur-year) {
+			font-size: 14px;
+			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);
+			width: 90px;
+			height: 30px;
+			text-align: center;
+			box-sizing: border-box;
+
+			&:hover {
+				border-color: var(--bs-primary, #556ee6);
+			}
+
+			&:focus {
+				border-color: var(--bs-primary, #556ee6);
+				outline: none;
+				box-shadow: 0 0 0 2px rgba(85, 110, 230, 0.15);
+			}
+		}
+
+		:global(.flatpickr-prev-month),
+		:global(.flatpickr-next-month) {
+			padding: 6px;
+			height: 28px;
+			width: 28px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 4px;
+			top: 4px;
+
+			&:hover {
+				background-color: var(--bs-tertiary-bg, #f8f9fa);
+			}
+
+			:global(svg) {
+				width: 12px;
+				height: 12px;
+			}
+		}
+	}
+
+	/* Tab content area fills remaining space and scrolls */
+	.time-range-tab-content {
+		flex: 1 1 auto;
+		overflow-y: auto;
+		scrollbar-width: thin;
+		min-height: 0;
+	}
+
+	/* Override shared .option-list absolute positioning inside our dropdown */
+	.time-range-option-list {
+		position: static !important;
+		max-height: 300px !important;
+		border: none !important;
+
+		/* Make option buttons fill the full width of each row */
+		:global(.option-item .select-name) {
+			flex: 1;
+		}
+
+		:global(.option-item .select-name .clear-btn) {
+			width: 100%;
+			text-align: left;
+		}
+	}
+
 	.clear-btn {
 		background-color: transparent;
 		border: none;
 		transition: background-color 0.15s ease-in-out;
-	}
 
-	.clear-btn:hover {
-		background-color: aliceblue;
+		&:hover {
+			background-color: aliceblue;
+		}
 	}
 </style>
diff --git a/src/lib/common/spinners/Loader.svelte b/src/lib/common/spinners/Loader.svelte
index 30650a3f..337cf94e 100644
--- a/src/lib/common/spinners/Loader.svelte
+++ b/src/lib/common/spinners/Loader.svelte
@@ -1,10 +1,20 @@
 <script>
     import { Circle } from 'svelte-loading-spinners';
 
-    export let disableDefaultStyles = false;
-    export let containerClasses = '';
-    export let containerStyles = '';
-    export let size = 100;
+    /**
+     * @type {{
+     *   disableDefaultStyles?: boolean,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   size?: number
+     * }}
+     */
+    let {
+        disableDefaultStyles = false,
+        containerClasses = '',
+        containerStyles = '',
+        size = 100
+    } = $props();
 </script>
 
 <div
diff --git a/src/lib/common/spinners/LoadingDots.svelte b/src/lib/common/spinners/LoadingDots.svelte
index 94764b44..3ccd17d4 100644
--- a/src/lib/common/spinners/LoadingDots.svelte
+++ b/src/lib/common/spinners/LoadingDots.svelte
@@ -1,47 +1,47 @@
 <script>
 	import { durationUnitRegex, range } from "$lib/helpers/utils/common";
 
-    /** @type {string} */
-	export let color = '#FF3E00';
-
-    /** @type {string} */
-	export let unit = 'px';
-
-    /** @type {string} */
-	export let duration = '1.5s';
-
-	/** @type {string | number} */
-	export let size = '60';
-
-    /** @type {boolean} */
-	export let pause = false;
-
-    /** @type {'dot' | 'cube'} */
-    export let shape = 'dot';
-
-    /** @type {number} */
-    export let count = 3;
-
-    /** @type {string | number} */
-	export let gap = '10';
-
-	/** @type {string} */
-	export let containerClasses = '';
-	
-	/** @type {string} */
-	export let containerStyles = '';
-
-    const durationUnit = duration.match(durationUnitRegex)?.[0] ?? 's';
-	const durationNum = duration.replace(durationUnitRegex, '');
+	/**
+	 * @type {{
+	 *   color?: string,
+	 *   unit?: string,
+	 *   duration?: string,
+	 *   size?: string | number,
+	 *   pause?: boolean,
+	 *   shape?: 'dot' | 'cube',
+	 *   count?: number,
+	 *   gap?: string | number,
+	 *   containerClasses?: string,
+	 *   containerStyles?: string
+	 * }}
+	 */
+	let {
+		color = '#FF3E00',
+		unit = 'px',
+		duration = '1.5s',
+		size = '30',
+		pause = false,
+		shape = 'dot',
+		count = 3,
+		gap = '10',
+		containerClasses = '',
+		containerStyles = ''
+	} = $props();
+
+	const durationUnit = $derived(duration.match(durationUnitRegex)?.[0] ?? 's');
+	const durationNum = $derived(duration.replace(durationUnitRegex, ''));
 </script>
 
-<div class={`loading-wrapper ${containerClasses}`} style="--size: {size}{unit}; --color: {color}; --duration: {duration}; --count: {count}; --gap: {gap}{unit};  {containerStyles}">
+<div
+	class={`loading-wrapper ${containerClasses}`}
+	style="--size: {size}{unit}; --color: {color}; --duration: {duration}; --count: {count}; --gap: {gap}{unit}; {containerStyles}"
+>
 	{#each range(count, 0) as version}
 		<div
 			class={`animation ${shape === 'cube' ? 'cube' : 'dot'}`}
 			class:pause-animation={pause}
 			style="animation-delay: {version * (+durationNum / 10)}{durationUnit};"
-		/>
+		></div>
 	{/each}
 </div>
 
diff --git a/src/lib/common/spinners/LoadingToComplete.svelte b/src/lib/common/spinners/LoadingToComplete.svelte
index d0d520a8..32a01459 100644
--- a/src/lib/common/spinners/LoadingToComplete.svelte
+++ b/src/lib/common/spinners/LoadingToComplete.svelte
@@ -1,16 +1,28 @@
 <script>
-	import { Alert } from "@sveltestrap/sveltestrap";
 	import Loader from "./Loader.svelte";
 
-    export let isLoading = false;
-    export let isComplete = false;
-    export let isError = false;
-    export let spinnerClasses = '';
-    export let spinnerStyles = '';
-    export let spinnerSize = 50;
-
-    export let successText = 'Update completed!';
-    export let errorText = 'Error!';
+	/**
+	 * @type {{
+	 *   isLoading?: boolean,
+	 *   isComplete?: boolean,
+	 *   isError?: boolean,
+	 *   spinnerClasses?: string,
+	 *   spinnerStyles?: string,
+	 *   spinnerSize?: number,
+	 *   successText?: string,
+	 *   errorText?: string
+	 * }}
+	 */
+	let {
+		isLoading = false,
+		isComplete = false,
+		isError = false,
+		spinnerClasses = '',
+		spinnerStyles = '',
+		spinnerSize = 50,
+		successText = 'Update completed!',
+		errorText = 'Error!'
+	} = $props();
 </script>
 
 {#if isLoading}
@@ -24,16 +36,16 @@
 
 {#if isComplete}
     <div class="alert-container">
-        <Alert color="success">
-            <div>{successText}</div>
-        </Alert>
+        <div class="alert alert-success" role="alert">
+            {successText}
+        </div>
     </div>
 {/if}
 
 {#if isError}
     <div class="alert-container">
-        <Alert color="danger">
-            <div>{errorText}</div>
-        </Alert>
+        <div class="alert alert-danger" role="alert">
+            {errorText}
+        </div>
     </div>
 {/if}
diff --git a/src/lib/common/tooltip/BotsharpTooltip.svelte b/src/lib/common/tooltip/BotsharpTooltip.svelte
index c1d00bd2..ff1c998c 100644
--- a/src/lib/common/tooltip/BotsharpTooltip.svelte
+++ b/src/lib/common/tooltip/BotsharpTooltip.svelte
@@ -1,75 +1,35 @@
 <script>
-	import { Portal } from '@sveltestrap/sveltestrap';
     import { onMount, onDestroy } from 'svelte';
     import { createPopper } from '@popperjs/core';
     import { v4 as uuidv4 } from 'uuid';
-	import { classnames } from '$lib/helpers/utils/common';
+    import { classnames } from '$lib/helpers/utils/common';
     import { clickoutsideDirective } from "$lib/helpers/directives";
-    
-    /**
-     * Additional CSS class names for the tooltip.
-     * @type {string}
-     */
-    export let containerClasses = '';
-
-    /**
-     * Flag to enable animation for the tooltip.
-     * @type {boolean}
-     */
-    export let animation = true;
-
-    /**
-     * Unique identifier for the tooltip.
-     * @type {string}
-     */
-    export let id = `tooltip_${uuidv4()}`;
-
-    /**
-     * Controls the visibility of the tooltip.
-     * @type {boolean}
-     */
-    export let isOpen = false;
-
-    /**
-     * Controls the visibility of the tooltip after hover the attached element.
-     * @type {boolean}
-     */
-    export let persist = false;
-
-    /**
-     * The preferred placement of the tooltip.
-     * @type {string}
-     */
-    export let placement = 'top';
-
-    /**
-     * The target element to which the tooltip is attached.
-     * @type {string | HTMLElement}
-     */
-    export let target = '';
-
-    /**
-     * The theme name override to apply to this component instance.
-     * @type {string | null}
-     */
-    export let theme = null;
-
-    /**
-     * The delay for showing the tooltip (in milliseconds).
-     * @type {number}
-     */
-    export let delay = 0;
+
+    let {
+        containerClasses = '',
+        animation = true,
+        id = `tooltip_${uuidv4()}`,
+        isOpen = $bindable(false),
+        persist = false,
+        placement = 'top',
+        target = '',
+        theme = null,
+        delay = 0,
+        style = '',
+        children
+    } = $props();
 
     /** @type {string} */
-    let bsPlacement = 'start';
-    /** @type {object} */
+    let bsPlacement = $state('start');
+    /** @type {object | undefined} */
     let popperInstance;
+    // svelte-ignore state_referenced_locally
     /** @type {string} */
-    let popperPlacement = placement;
+    let popperPlacement = $state(placement);
     /** @type {HTMLDivElement | null} */
-    let targetEl;
+    let targetEl = $state(null);
     /** @type {HTMLDivElement | null} */
-    let tooltipEl;
+    let tooltipEl = $state(null);
     /** @type {number} */
     let showTimer;
 
@@ -83,6 +43,13 @@
         }
     };
 
+    let classes = $derived(classnames(
+        containerClasses,
+        'tooltip',
+        `bs-tooltip-${bsPlacement}`,
+        animation ? 'fade' : null,
+        isOpen ? 'show' : null
+    ));
 
     onMount(() => {
         registerEventListeners();
@@ -111,17 +78,22 @@
         }
 
         try {
+            // @ts-ignore
             if (target instanceof HTMLElement) {
                 // @ts-ignore
                 targetEl = target;
             }
-        } catch (e) {}
+        } catch (e) {
+            console.log(e);
+        }
 
         // eslint-disable-next-line eqeqeq
         if (targetEl == null) {
             try {
                 targetEl = document.querySelector(`#${target}`);
-            } catch (e) {}
+            } catch (e) {
+                console.log(e);
+            }
         }
 
         if (targetEl) {
@@ -158,15 +130,7 @@
         }
     }
 
-    $: classes = classnames(
-        containerClasses,
-        'tooltip',
-        `bs-tooltip-${bsPlacement}`,
-        animation ? 'fade' : null,
-        isOpen ? 'show' : null
-    );
-
-    $: {
+    $effect(() => {
         if (isOpen && tooltipEl) {
             // @ts-ignore
             popperInstance = createPopper(targetEl, tooltipEl, {
@@ -179,26 +143,32 @@
             // @ts-ignore
             popperInstance = undefined;
         }
-    }
-    
-    $: if (target) {
-        unregisterEventListeners();
-        registerEventListeners();
-    }
+    });
 
-    $: if (targetEl) {
-        if (isOpen) {
-            targetEl.setAttribute('aria-describedby', id);
-        } else {
-            targetEl.removeAttribute('aria-describedby');
+    $effect(() => {
+        if (target) {
+            unregisterEventListeners();
+            registerEventListeners();
         }
-    }
+    });
 
-    $: if (persist && tooltipEl) {
-        tooltipEl.addEventListener("mouseleave", close);
-    }
+    $effect(() => {
+        if (targetEl) {
+            if (isOpen) {
+                targetEl.setAttribute('aria-describedby', id);
+            } else {
+                targetEl.removeAttribute('aria-describedby');
+            }
+        }
+    });
 
-    $: {
+    $effect(() => {
+        if (persist && tooltipEl) {
+            tooltipEl.addEventListener("mouseleave", close);
+        }
+    });
+
+    $effect(() => {
         if (popperPlacement === 'left') {
             bsPlacement = 'start';
         } else if (popperPlacement === 'right') {
@@ -206,27 +176,38 @@
         } else {
             bsPlacement = popperPlacement;
         }
-    }
+    });
+
+    // Portal behavior: move tooltip to document.body to avoid clipping
+    $effect(() => {
+        if (tooltipEl && isOpen) {
+            document.body.appendChild(tooltipEl);
+
+            return () => {
+                if (tooltipEl?.parentNode === document.body) {
+                    document.body.removeChild(tooltipEl);
+                }
+            };
+        }
+    });
 </script>
 
 {#if isOpen}
-    <svelte:component this={Portal}>
-        <div
-            bind:this={tooltipEl}
-            use:clickoutsideDirective
-            on:clickoutside={handleClickOutside}
-            {...$$restProps}
-            class={classes}
-            {id}
-            role="tooltip"
-            data-bs-theme={theme}
-            data-bs-delay={delay}
-            x-placement={popperPlacement}
-        >
-            <div class="tooltip-arrow" data-popper-arrow></div>
-            <div class="tooltip-inner">
-                <slot />
-            </div>
+    <div
+        bind:this={tooltipEl}
+        use:clickoutsideDirective
+        onclickoutside={handleClickOutside}
+        {style}
+        class={classes}
+        {id}
+        role="tooltip"
+        data-bs-theme={theme}
+        data-bs-delay={delay}
+        x-placement={popperPlacement}
+    >
+        <div class="tooltip-arrow" data-popper-arrow></div>
+        <div class="tooltip-inner">
+            {@render children?.()}
         </div>
-    </svelte:component>
+    </div>
 {/if}
\ No newline at end of file
diff --git a/src/lib/scss/_variables-dark.scss b/src/lib/scss/_variables-dark.scss
index ebc4e7db..9926b3ad 100644
--- a/src/lib/scss/_variables-dark.scss
+++ b/src/lib/scss/_variables-dark.scss
@@ -1,13 +1,13 @@
-// 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.
+/* 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
-//
+/*  */
+/* Global colors */
+/*  */
 
-// scss-docs-start sass-dark-mode-vars
-// scss-docs-start theme-text-dark-variables
+/* 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%);
@@ -16,9 +16,9 @@ $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-end theme-text-dark-variables */
 
-// scss-docs-start theme-bg-subtle-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);
@@ -27,9 +27,9 @@ $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-end theme-bg-subtle-dark-variables */
 
-// scss-docs-start theme-border-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%);
@@ -38,7 +38,7 @@ $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
+/* scss-docs-end theme-border-subtle-dark-variables */
 
 $body-color-dark:                   #a6b0cf;
 $body-bg-dark:                      #222736;
@@ -55,9 +55,9 @@ $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-p
 $code-color-dark:                   $code-color;
 
 
-//
-// Forms
-//
+/*  */
+/* 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>");
@@ -65,40 +65,40 @@ $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://w
 $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
+/* 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
+/* scss-docs-end form-validation-colors-dark */
 
 
-//
-// Accordion
-//
+/*  */
+/* 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
+/* scss-docs-end sass-dark-mode-vars */
 
 /* =============================Custom Variables========================== */
 
 $header-bg-dark:                        #262b3c;
 $header-item-color-dark:                #a6b0cf;
 
-//topbra dark
+/* topbra dark */
 $header-dark-bg-dark:                   $primary;
 $header-dark-item-color-dark:           #e9ecef;
 $topbar-search-bg-dark:                 #2a3042;
 
-// Footer
+/* Footer */
 $footer-bg-dark:                        #262b3c;
 $footer-color-dark:                     #a6b0cf;
 
-// Horizontal nav
+/* Horizontal nav */
 $topnav-bg-dark:                        #282e3f;
 $menu-item-color-dark:                  #a6b0cf;
 $menu-item-active-color-dark:           #556ee6;
@@ -106,6 +106,6 @@ $menu-item-active-color-dark:           #556ee6;
 $boxed-body-bg-dark:                    #32394f;
 
 
-// Display
+/* Display */
 $display-none-dark:                                        block;
-$display-block-dark:                                       none;
\ No newline at end of file
+$display-block-dark:                                       none;
diff --git a/src/lib/scss/_variables.scss b/src/lib/scss/_variables.scss
index db6a08b7..2896d8e5 100644
--- a/src/lib/scss/_variables.scss
+++ b/src/lib/scss/_variables.scss
@@ -1,10 +1,10 @@
-// Variables
+/* Variables */
 
-//
-// custom-variables
-//
+/*  */
+/* custom-variables */
+/*  */
 
-// Vertical Sidebar  Light
+/* Vertical Sidebar  Light */
 $sidebar-bg:                                          #ffffff;
 $sidebar-menu-item-color:                             #545a6d;
 $sidebar-menu-sub-item-color:                         #545a6d;
@@ -15,67 +15,67 @@ $sidebar-width:                                       250px;
 $sidebar-collapsed-width:                             70px;
 $sidebar-width-sm:                                    160px;
 
-// Vertical Sidebar - Dark
-$sidebar-dark-bg:                                     #2a3042; //2c313a
+/* 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
+/* Topbar - Default Light */
 $header-height:                                       70px;
 $header-bg:                                           $white;
 $header-item-color:                                   #555b6d;
 
-// Topbar - Dark
+/* Topbar - Dark */
 $header-dark-bg:                                      #2a3042;
 $header-dark-item-color:                              #e9ecef;
 
-// Topbar Search
+/* Topbar Search */
 $topbar-search-bg:                                    #f3f3f9;
 
-// Footer
+/* Footer */
 $footer-height:                                       60px;
 $footer-bg:                                           #f2f2f5;
 $footer-color:                                        #74788d;
 
-// Horizontal nav
+/* Horizontal nav */
 $topnav-bg:                                           $white;
 
 $menu-item-color:                                     #545a6d;
 $menu-item-active-color:                              #556ee6;
 
-// Right Sidebar
+/* Right Sidebar */
 $rightbar-width:                                      280px;
 
-// Display
+/* Display */
 $display-none:                                        none;
 $display-block:                                       block;
 
-// Brand 
+/* Brand  */
 $navbar-brand-box-width:                             250px;
 
-// Boxed layout width
+/* Boxed layout width */
 $boxed-layout-width:                                 1300px;
 $boxed-body-bg:                                     #ebebf4;
 
-// apex charts
+/* apex charts */
 $apex-grid-color:                                   var(--#{$prefix}border-color);
 
-// table
+/* 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.
+/* 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
+/* Color system */
 
-// scss-docs-start gray-color-variables
+/* scss-docs-start gray-color-variables */
 $white:    #fff;
 $gray-100: #f8f9fa;
 $gray-200: #eff2f7;
@@ -87,10 +87,10 @@ $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
 $black:    #000;
-// scss-docs-end gray-color-variables
+/* scss-docs-end gray-color-variables */
 
-// fusv-disable
-// scss-docs-start gray-colors-map
+/* fusv-disable */
+/* scss-docs-start gray-colors-map */
 $grays: (
     "100": $gray-100,
     "200": $gray-200,
@@ -102,10 +102,10 @@ $grays: (
     "800": $gray-800,
     "900": $gray-900
 );
-// scss-docs-end gray-colors-map
-// fusv-enable
+/* scss-docs-end gray-colors-map */
+/* fusv-enable */
 
-// scss-docs-start color-variables
+/* scss-docs-start color-variables */
 $blue:    #556ee6;
 $indigo:  #564ab1;
 $purple:  #6f42c1;
@@ -116,9 +116,9 @@ $yellow:  #f1b44c;
 $green:   #34c38f;
 $teal:    #050505;
 $cyan:    #50a5f1;
-// scss-docs-end color-variables
+/* scss-docs-end color-variables */
 
-// scss-docs-start colors-map
+/* scss-docs-start colors-map */
 $colors: (
     "blue":       $blue,
     "indigo":     $indigo,
@@ -135,9 +135,9 @@ $colors: (
     "gray":       $gray-600,
     "gray-dark":  $gray-800
 );
-// scss-docs-end colors-map
+/* scss-docs-end colors-map */
 
-// scss-docs-start theme-color-variables
+/* scss-docs-start theme-color-variables */
 $primary:       $purple;
 $secondary:     $gray-600;
 $success:       $green;
@@ -146,9 +146,9 @@ $warning:       $yellow;
 $danger:        $red;
 $light:         $gray-200;
 $dark:          $gray-800;
-// scss-docs-end theme-color-variables
+/* scss-docs-end theme-color-variables */
 
-// scss-docs-start theme-colors-map
+/* scss-docs-start theme-colors-map */
 $theme-colors: (
     "primary":    $primary,
     "secondary":  $secondary,
@@ -161,15 +161,15 @@ $theme-colors: (
     "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
+/* 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.
+/* Customize the light and dark text colors for use in our color contrast function. */
 $color-contrast-dark:      $black;
 $color-contrast-light:     $white;
 
-// fusv-disable
+/* fusv-disable */
 $blue-100: tint-color($blue, 80%);
 $blue-200: tint-color($blue, 60%);
 $blue-300: tint-color($blue, 40%);
@@ -388,8 +388,8 @@ $cyans: (
   "cyan-800": $cyan-800,
   "cyan-900": $cyan-900
 );
-// fusv-enable
-// scss-docs-start theme-text-variables
+/* 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%);
@@ -398,9 +398,9 @@ $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-end theme-text-variables */
 
-// scss-docs-start theme-bg-subtle-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);
@@ -409,9 +409,9 @@ $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-end theme-bg-subtle-variables */
 
-// scss-docs-start theme-border-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%);
@@ -420,9 +420,9 @@ $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
+/* scss-docs-end theme-border-subtle-variables */
 
-// Characters which are escaped by the escape-svg function
+/* Characters which are escaped by the escape-svg function */
 $escaped-characters: (
   ("<", "%3c"),
   (">", "%3e"),
@@ -431,9 +431,9 @@ $escaped-characters: (
   (")", "%29"),
 );
 
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
+/* Options */
+/*  */
+/* Quickly modify global styling by enabling or disabling optional features. */
 
 $enable-caret:                false;
 $enable-rounded:              true;
@@ -453,28 +453,28 @@ $enable-deprecation-messages: true;
 $enable-important-utilities:  true;
 
 $enable-dark-mode:            true;
-$color-mode-type:             data; // `data` or `media-query`
+$color-mode-type:             data; /* `data` or `media-query` */
 
-// Prefix for :root CSS variables
+/* Prefix for :root CSS variables */
 
-$variable-prefix:             bs-; // Deprecated in v5.2.0 for the shorter `$prefix`
+$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 */
+/*  */
+/* 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
+/* 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.
+/* 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
+/* scss-docs-start spacer-variables-maps */
 $spacer: 1rem;
 $spacers: (
   0: 0,
@@ -486,24 +486,24 @@ $spacers: (
 );
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
-// scss-docs-end spacer-variables-maps
+/* scss-docs-end spacer-variables-maps */
 
-// Position
-//
-// Define the edge positioning anchors of the position utilities.
+/* Position */
+/*  */
+/* Define the edge positioning anchors of the position utilities. */
 
-// scss-docs-start position-map
+/* scss-docs-start position-map */
 $position-values: (
   0: 0,
   50: 50%,
   100: 100%
 );
 
-// scss-docs-end position-map
+/* scss-docs-end position-map */
 
-// Body
-//
-// Settings for the `<body>` element.
+/* Body */
+/*  */
+/* Settings for the `<body>` element. */
 
 $body-bg:                   #f8f8fb;
 $body-color:                $gray-700;
@@ -517,9 +517,9 @@ $body-tertiary-bg:          $gray-100;
 
 $body-emphasis-color:       $gray-800;
 
-// Links
-//
-// Style anchor elements.
+/* Links */
+/*  */
+/* Style anchor elements. */
 
 $link-color:                              $primary;
 $link-decoration:                         none;
@@ -530,28 +530,28 @@ $link-hover-decoration:                   underline;
 $stretched-link-pseudo-element:           after;
 $stretched-link-z-index:                  1;
 
-// Icon links
-// scss-docs-start icon-link-variables
+/* 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
+/* scss-docs-end icon-link-variables */
 
-// Paragraphs
-//
-// Style p element.
+/* 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.
+/* 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
+/* scss-docs-start grid-breakpoints */
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -560,17 +560,17 @@ $grid-breakpoints: (
   xl: 1200px,
   xxl: 1400px
 );
-// scss-docs-end grid-breakpoints
+/* 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.
+/* Grid containers */
+/*  */
+/* Define the maximum width of `.container` for different screen sizes. */
 
-// scss-docs-start container-max-widths
+/* scss-docs-start container-max-widths */
 $container-max-widths: (
   sm: 540px,
   md: 720px,
@@ -578,27 +578,27 @@ $container-max-widths: (
   xl: 1140px,
   xxl: 1320px
 );
-// scss-docs-end container-max-widths
+/* 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 */
+/*  */
+/* 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 */
 
 $container-padding-x: $grid-gutter-width * 0.5;
-// Components
-//
-// Define common padding and border radius sizes and more.
+/* Components */
+/*  */
+/* Define common padding and border radius sizes and more. */
 
-// scss-docs-start border-variables
+/* scss-docs-start border-variables */
 $border-width:                1px;
 $border-widths: (
   0: 0,
@@ -612,77 +612,77 @@ $border-widths: (
 $border-style:                solid;
 $border-color:                $gray-200;
 $border-color-translucent:    $gray-400;
-// scss-docs-end border-variables
+/* scss-docs-end border-variables */
 
-// scss-docs-start border-radius-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-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
+/* 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
+/* scss-docs-end box-shadow-variables */
 
 $component-active-color:      $white;
 $component-active-bg:         $primary;
 
-// scss-docs-start focus-ring-variables
+/* 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-end focus-ring-variables */
 
-// scss-docs-start caret-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
+/* scss-docs-end caret-variables */
 
 $transition-base:             all .2s ease-in-out;
 $transition-fade:             opacity .15s linear;
-// scss-docs-start collapse-transition
+/* scss-docs-start collapse-transition */
 $transition-collapse:         height .35s ease;
 $transition-collapse-width:   width .35s ease;
-// scss-docs-end collapse-transition
+/* scss-docs-end collapse-transition */
 
-// stylelint-disable function-disallowed-list
-// scss-docs-start aspect-ratios
+/* 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
+/* scss-docs-end aspect-ratios */
+/* stylelint-enable function-disallowed-list */
 
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
+/* Typography */
+/*  */
+/* Font, line-height, and color for body text, headings, and more. */
 
-// scss-docs-start font-variables
-// stylelint-disable value-keyword-case
+/* 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
+/* 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 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;
@@ -707,9 +707,9 @@ $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-end font-variables */
 
-// scss-docs-start font-sizes
+/* scss-docs-start font-sizes */
 $font-sizes: (
   1: $h1-font-size,
   2: $h2-font-size,
@@ -718,18 +718,18 @@ $font-sizes: (
   5: $h5-font-size,
   6: $h6-font-size
 );
-// scss-docs-end font-sizes
+/* scss-docs-end font-sizes */
 
-// scss-docs-start headings-variables
+/* 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-end headings-variables */
 
-// scss-docs-start display-headings
+/* scss-docs-start display-headings */
 $display-font-sizes: (
   1: 6rem,
   2: 5.5rem,
@@ -743,18 +743,18 @@ $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-end display-headings */
 
-// scss-docs-start type-variables
+/* 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
+/* fusv-disable */
+$text-muted:                  var(--#{$prefix}secondary-color); /* Deprecated in 5.3.0 */
+/* fusv-enable */
 
 $initialism-font-size:        $small-font-size;
 
@@ -765,12 +765,12 @@ $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
+/* 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-color:             var(--#{$prefix}border-color); /* Allows for inherited colors */
 $hr-border-width:             var(--#{$prefix}border-width);
 $hr-opacity:                  0.8;
 
@@ -784,14 +784,14 @@ $list-inline-padding:         .5rem;
 
 $mark-padding:                .2em;
 $mark-bg:                     #fcf8e3;
-// scss-docs-end type-variables
+/* scss-docs-end type-variables */
 
 
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
+/* Tables */
+/*  */
+/* Customizes the `.table` component with basic values, each used across all table variations. */
 
-// scss-docs-start table-variables
+/* scss-docs-start table-variables */
 $table-cell-padding-y:        .75rem;
 $table-cell-padding-x:        .75rem;
 $table-cell-padding-y-sm:     .3rem;
@@ -828,9 +828,9 @@ $table-group-separator-color: currentcolor;
 $table-caption-color:         var(--#{$prefix}secondary-color);
 
 $table-bg-scale:              -80%;
-// scss-docs-end table-variables
+/* scss-docs-end table-variables */
 
-// scss-docs-start table-loop
+/* scss-docs-start table-loop */
 $table-variants: (
   "primary":    shift-color($primary, $table-bg-scale),
   "secondary":  shift-color($secondary, $table-bg-scale),
@@ -841,14 +841,14 @@ $table-variants: (
   "light":      $light,
   "dark":       $dark,
 );
-// scss-docs-end table-loop
+/* scss-docs-end table-loop */
 
 
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+/* Buttons + Forms */
+/*  */
+/* Shared variables that are reassigned to `$input-` and `$btn-` specific variables. */
 
-// scss-docs-start input-btn-variables
+/* scss-docs-start input-btn-variables */
 $input-btn-padding-y:         .47rem;
 $input-btn-padding-x:         .75rem;
 $input-btn-font-family:       null;
@@ -870,21 +870,21 @@ $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
+/* scss-docs-end input-btn-variables */
 
 
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
+/* Buttons */
+/*  */
+/* For each of Bootstrap's buttons, define text, background, and border color. */
 
-// scss-docs-start btn-variables
+/* 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-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;
@@ -907,7 +907,7 @@ $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
+/* 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);
@@ -922,28 +922,28 @@ $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
+/* scss-docs-end btn-variables */
 
 
-// Forms
+/* Forms */
 
-// scss-docs-start form-text-variables
+/* 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-end form-text-variables */
 
-// scss-docs-start form-label-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-end form-label-variables */
 
-// scss-docs-start form-input-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;
@@ -982,7 +982,7 @@ $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-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);
@@ -994,9 +994,9 @@ $input-height-lg:                       add($input-line-height * 1em, add($input
 
 $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-end form-input-variables */
 
-// scss-docs-start form-check-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;
@@ -1030,9 +1030,9 @@ $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-end form-check-variables */
 
-// scss-docs-start form-switch-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;
@@ -1046,23 +1046,23 @@ $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www
 $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-end form-switch-variables */
 
-// scss-docs-start input-group-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-end input-group-variables */
 
-// scss-docs-start form-select-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-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;
@@ -1071,7 +1071,7 @@ $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-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>");
 
@@ -1099,9 +1099,9 @@ $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-end form-select-variables */
 
-// scss-docs-start form-range-variables
+/* scss-docs-start form-range-variables */
 $form-range-track-width:          100%;
 $form-range-track-height:         .5rem;
 $form-range-track-cursor:         pointer;
@@ -1116,19 +1116,19 @@ $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-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-end form-range-variables */
 
-// scss-docs-start form-file-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-end form-file-variables */
 
-// scss-docs-start form-floating-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;
@@ -1140,11 +1140,11 @@ $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
+/* scss-docs-end form-floating-variables */
 
-// Form validation
+/* Form validation */
 
-// scss-docs-start form-feedback-variables
+/* 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;
@@ -1155,16 +1155,16 @@ $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-end form-feedback-variables */
 
-// scss-docs-start form-validation-colors
+/* 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-end form-validation-colors */
 
-// scss-docs-start form-validation-states
+/* scss-docs-start form-validation-states */
 $form-validation-states: (
   "valid": (
     "color": var(--#{$prefix}form-valid-color),
@@ -1183,14 +1183,14 @@ $form-validation-states: (
     "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 );
-// scss-docs-end form-validation-states
+/* 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.
+/* 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
+/* scss-docs-start zindex-stack */
 $zindex-dropdown:                   1000;
 $zindex-sticky:                     1020;
 $zindex-fixed:                      1030;
@@ -1201,9 +1201,9 @@ $zindex-modal:                      1055;
 $zindex-popover:                    1070;
 $zindex-tooltip:                    1080;
 $zindex-toast:                      1090;
-// scss-docs-end zindex-stack
+/* scss-docs-end zindex-stack */
 
-// scss-docs-start zindex-levels-map
+/* scss-docs-start zindex-levels-map */
 $zindex-levels: (
   n1: -1,
   0: 0,
@@ -1211,11 +1211,11 @@ $zindex-levels: (
   2: 2,
   3: 3
 );
-// scss-docs-end zindex-levels-map
+/* scss-docs-end zindex-levels-map */
 
-// Navs
+/* Navs */
 
-// scss-docs-start nav-variables
+/* scss-docs-start nav-variables */
 $nav-link-padding-y:                .5rem;
 $nav-link-padding-x:                1rem;
 $nav-link-font-size:                null;
@@ -1241,19 +1241,19 @@ $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
+/* scss-docs-end nav-variables */
 
 
-// Navbar
+/* Navbar */
 
-// scss-docs-start navbar-variables
+/* 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
+/* 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;
@@ -1275,9 +1275,9 @@ $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://w
 $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-end navbar-variables */
 
-// scss-docs-start navbar-dark-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;
@@ -1286,14 +1286,14 @@ $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://w
 $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
+/* scss-docs-end navbar-dark-variables */
 
 
-// Dropdowns
-//
-// Dropdown menu container and contents.
+/* Dropdowns */
+/*  */
+/* Dropdown menu container and contents. */
 
-// scss-docs-start dropdown-variables
+/* scss-docs-start dropdown-variables */
 $dropdown-min-width:                10rem;
 $dropdown-padding-x:                0;
 $dropdown-padding-y:                .5rem;
@@ -1324,12 +1324,12 @@ $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
+/* 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
+/* scss-docs-start dropdown-dark-variables */
 $dropdown-dark-color:               $gray-300;
 $dropdown-dark-bg:                  $gray-800;
 $dropdown-dark-border-color:        $dropdown-border-color;
@@ -1342,12 +1342,12 @@ $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
+/* scss-docs-end dropdown-dark-variables */
 
 
-// Pagination
+/* Pagination */
 
-// scss-docs-start pagination-variables
+/* scss-docs-start pagination-variables */
 $pagination-padding-y:              .5rem;
 $pagination-padding-x:              .75rem;
 $pagination-padding-y-sm:           .25rem;
@@ -1361,7 +1361,7 @@ $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-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);
@@ -1371,7 +1371,7 @@ $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-hover-border-color:     var(--#{$prefix}border-color); /* Todo in v6: remove this? */
 
 $pagination-active-color:           $component-active-color;
 $pagination-active-bg:              $component-active-bg;
@@ -1385,19 +1385,19 @@ $pagination-transition:              color .15s ease-in-out, background-color .1
 
 $pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm);
 $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg);
-// scss-docs-end pagination-variables
+/* scss-docs-end pagination-variables */
 
 
-// Placeholders
+/* Placeholders */
 
-// scss-docs-start placeholders
+/* scss-docs-start placeholders */
 $placeholder-opacity-max:           .5;
 $placeholder-opacity-min:           .2;
-// scss-docs-end placeholders
+/* scss-docs-end placeholders */
 
-// Cards
+/* Cards */
 
-// scss-docs-start card-variables
+/* scss-docs-start card-variables */
 $card-spacer-y:                     1.25rem;
 $card-spacer-x:                     1.25rem;
 $card-title-spacer-y:               $spacer * .5;
@@ -1417,11 +1417,11 @@ $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
+/* scss-docs-end card-variables */
 
-// Accordion
+/* Accordion */
 
-// scss-docs-start accordion-variables
+/* scss-docs-start accordion-variables */
 $accordion-padding-y:                     1rem;
 $accordion-padding-x:                     1.25rem;
 $accordion-color:                         var(--#{$prefix}body-color);
@@ -1453,11 +1453,11 @@ $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
+/* scss-docs-end accordion-variables */
 
-// Tooltips
+/* Tooltips */
 
-// scss-docs-start tooltip-variables
+/* scss-docs-start tooltip-variables */
 $tooltip-font-size:                 $font-size-sm;
 $tooltip-max-width:                 200px;
 $tooltip-color:                     var(--#{$prefix}secondary-bg);
@@ -1470,32 +1470,32 @@ $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
+/* 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 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
+/* scss-docs-end tooltip-feedback-variables */
 
 
-// Popovers
+/* Popovers */
 
-// scss-docs-start popover-variables
+/* 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-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;
@@ -1510,18 +1510,18 @@ $popover-body-padding-x:            $spacer;
 
 $popover-arrow-width:               1rem;
 $popover-arrow-height:              .5rem;
-// scss-docs-end popover-variables
+/* scss-docs-end popover-variables */
 
-// fusv-disable
-// Deprecated in Bootstrap 5.2.0 for CSS 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
+/* fusv-enable */
 
 
-// Toasts
+/* Toasts */
 
-// scss-docs-start toast-variables
+/* scss-docs-start toast-variables */
 $toast-max-width:                   350px;
 $toast-padding-x:                   .75rem;
 $toast-padding-y:                   .25rem;
@@ -1537,24 +1537,24 @@ $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
+/* scss-docs-end toast-variables */
 
 
-// Badges
+/* Badges */
 
-// scss-docs-start badge-variables
+/* 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
+/* scss-docs-end badge-variables */
 
 
-// Modals
+/* Modals */
 
-// scss-docs-start modal-variables
+/* scss-docs-start modal-variables */
 $modal-inner-padding:               1rem;
 
 $modal-footer-margin-between:       .5rem;
@@ -1580,7 +1580,7 @@ $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-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;
@@ -1594,14 +1594,14 @@ $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
+/* scss-docs-end modal-variables */
 
 
-// Alerts
-//
-// Define alert colors, border radius, and padding.
+/* Alerts */
+/*  */
+/* Define alert colors, border radius, and padding. */
 
-// scss-docs-start alert-variables
+/* scss-docs-start alert-variables */
 $alert-padding-y:                   .75rem;
 $alert-padding-x:                   1.25rem;
 $alert-margin-bottom:               1rem;
@@ -1613,18 +1613,18 @@ $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
+$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
+/* 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
+/* Progress bars */
 
-// scss-docs-start progress-variables
+/* scss-docs-start progress-variables */
 $progress-height:                   .625rem;
 $progress-font-size:                $font-size-base * .75;
 $progress-bg:                       var(--#{$prefix}tertiary-bg);
@@ -1634,12 +1634,12 @@ $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
+/* scss-docs-end progress-variables */
 
 
-// List group
+/* List group */
 
-// scss-docs-start list-group-variables
+/* 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);
@@ -1648,10 +1648,10 @@ $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
+/* 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;
@@ -1666,32 +1666,32 @@ $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
+/* scss-docs-end list-group-variables */
 
 
-// Image thumbnails
+/* Image thumbnails */
 
-// scss-docs-start thumbnail-variables
+/* 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
+/* scss-docs-end thumbnail-variables */
 
 
-// Figures
+/* Figures */
 
-// scss-docs-start figure-variables
+/* scss-docs-start figure-variables */
 $figure-caption-font-size:          $small-font-size;
 $figure-caption-color:              var(--#{$prefix}secondary-color);
-// scss-docs-end figure-variables
+/* scss-docs-end figure-variables */
 
 
-// Breadcrumbs
+/* Breadcrumbs */
 
-// scss-docs-start breadcrumb-variables
+/* scss-docs-start breadcrumb-variables */
 $breadcrumb-font-size:              null;
 $breadcrumb-padding-y:              .75rem;
 $breadcrumb-padding-x:              1rem;
@@ -1703,11 +1703,11 @@ $breadcrumb-active-color:           var(--#{$prefix}secondary-color);
 $breadcrumb-divider:                quote("/");
 $breadcrumb-divider-flipped:        $breadcrumb-divider;
 $breadcrumb-border-radius:          null;
-// scss-docs-end breadcrumb-variables
+/* scss-docs-end breadcrumb-variables */
 
-// Carousel
+/* Carousel */
 
-// scss-docs-start carousel-variables
+/* scss-docs-start carousel-variables */
 $carousel-control-color:             $white;
 $carousel-control-width:             15%;
 $carousel-control-opacity:           .5;
@@ -1734,18 +1734,18 @@ $carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://
 $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
+$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
+/* 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
+/* scss-docs-end carousel-dark-variables */
 
-// Spinners
+/* Spinners */
 
-// scss-docs-start spinner-variables
+/* scss-docs-start spinner-variables */
 $spinner-width:           2rem;
 $spinner-height:          $spinner-width;
 $spinner-vertical-align:  -.125em;
@@ -1755,12 +1755,12 @@ $spinner-animation-speed: .75s;
 $spinner-width-sm:        1rem;
 $spinner-height-sm:       $spinner-width-sm;
 $spinner-border-width-sm: .2em;
-// scss-docs-end spinner-variables
+/* scss-docs-end spinner-variables */
 
 
-// Close
+/* Close */
 
-// scss-docs-start close-variables
+/* scss-docs-start close-variables */
 $btn-close-width:            1em;
 $btn-close-height:           $btn-close-width;
 $btn-close-padding-x:        .25em;
@@ -1773,12 +1773,12 @@ $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
+/* scss-docs-end close-variables */
 
 
-// Offcanvas
+/* Offcanvas */
 
-// scss-docs-start offcanvas-variables
+/* scss-docs-start offcanvas-variables */
 $offcanvas-padding-y:               $modal-inner-padding;
 $offcanvas-padding-x:               $modal-inner-padding;
 $offcanvas-horizontal-width:        400px;
@@ -1792,9 +1792,9 @@ $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
+/* scss-docs-end offcanvas-variables */
 
-// Code
+/* Code */
 
 $code-font-size:                    87.5%;
 $code-color:                        $pink;
@@ -1804,7 +1804,7 @@ $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
+$nested-kbd-font-weight:            null; /* Deprecated in v5.2.0, removing in v6 */
 
 $pre-color:                         null;
 
@@ -1812,4 +1812,4 @@ $faded-color: #BCBCBC;
 
 $log-sec-height-lg:                    400px;
 $log-sec-height-md:                    280px;
-$log-sec-height-sm:                    150px;
\ No newline at end of file
+$log-sec-height-sm:                    150px;
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index 84c4a5ae..a9bb31c0 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -1,4 +1,4 @@
-/*
+/*
 Template Name: Skote - Admin & Dashboard Template
 Author: Themesbrand
 Version: 4.1.0.
@@ -7,17 +7,17 @@ Contact: themesbrand@gmail.com
 File: Main Css File
 */
 
-//Fonts
+/* Fonts */
 @import "custom/fonts/fonts";
 
-//Core files
-@import "./node_modules/bootstrap/scss/functions";
-@import "./node_modules/bootstrap/scss/variables";
+/* Core files */
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
 @import "variables";
 @import "variables-dark";
-@import "./node_modules/bootstrap/scss/mixins";
+@import "bootstrap/scss/mixins";
 
-// Structure
+/* Structure */
 @import "custom/structure/general";
 @import "custom/structure/topbar";
 @import "custom/structure/page-head";
@@ -27,7 +27,7 @@ File: Main Css File
 @import "custom/structure/horizontal-nav";
 @import "custom/structure/layouts";
 
-// Components
+/* Components */
 @import "custom/components/waves";
 @import "custom/components/avatar";
 @import "custom/components/accordion";
@@ -48,7 +48,7 @@ File: Main Css File
 @import "custom/components/state";
 @import "custom/components/codeScript";
 
-// Plugins
+/* Plugins */
 @import "custom/plugins/custom-scrollbar";
 @import "custom/plugins/calendar";
 @import "custom/plugins/calendar-full";
@@ -80,7 +80,7 @@ File: Main Css File
 @import "custom/plugins/vector-maps";
 @import "custom/plugins/leaflet-maps";
 
-// Pages
+/* Pages */
 @import "custom/pages/authentication";
 @import "custom/pages/ecommerce";
 @import "custom/pages/email";
@@ -99,18 +99,18 @@ File: Main Css File
 @import "custom/pages/roles";
 @import "custom/pages/instruction";
 
-// Common
+/* 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";
\ No newline at end of file
+/* 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
index 31d7d058..5b466107 100644
--- a/src/lib/scss/bootstrap.scss
+++ b/src/lib/scss/bootstrap.scss
@@ -8,12 +8,12 @@ File: Custom Bootstrap Css File
 */
 
 
-//Core files
-@import "./node_modules/bootstrap/scss/functions";
-@import "./node_modules/bootstrap/scss/variables";
+/* Core files */
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
 @import "variables";
 @import "variables-dark";
-@import "./node_modules/bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 
 @import "custom/components/root";
 @import "custom/components/reboot";
diff --git a/src/lib/scss/custom/common/_common.scss b/src/lib/scss/custom/common/_common.scss
index c2584b22..2291c014 100644
--- a/src/lib/scss/custom/common/_common.scss
+++ b/src/lib/scss/custom/common/_common.scss
@@ -1,9 +1,9 @@
-// custom css
+/* custom css */
 .tab-content .nav-tabs {
   display: none;
 }
   
-// dropzone 
+/* dropzone  */
 .dropzone .dz-message {
   text-align: center;
 }
@@ -43,7 +43,7 @@
       .clear-select {
         height: 18px !important;
         width: 18px !important;
-        // font-size: .8125rem !important;
+        /* font-size: .8125rem !important; */
       }
     }
   }
@@ -52,7 +52,7 @@
     background-color: #282b2e !important;
   }
 
-  // Modal
+  /* Modal */
   .modal {
     .modal-content{
       background-color: var(--bs-modal-bg);
@@ -61,11 +61,11 @@
   }
 }
   
-// select elements
+/* select elements */
 .svelte-select {
   max-height: 20px !important;
   min-height: 37px !important;
-  // background-color: #f3f6f9 !important;
+  /* background-color: #f3f6f9 !important; */
   border-color: #f3f6f9 !important;
   padding-right: 5px !important;
 
@@ -79,7 +79,7 @@
     }
 
     input {
-      // background-color: #f3f6f9 !important;
+      /* background-color: #f3f6f9 !important; */
       font-size: .8125rem !important;
     }
   }
@@ -119,16 +119,16 @@
   }
 }
   
-// data tables
+/* data tables */
 
 .sort {
   &.asc::after {
-    content: "▲"/"";
+    content: "â–²"/"";
     float: right;
   }
 
   &.desc::after{
-    content: "▼"/"";
+    content: "â–¼"/"";
     float: right;
   }
 }
@@ -137,7 +137,7 @@
   overflow-x: hidden;
 }
   
-// swal2
+/* swal2 */
 .swal2-container .swal2-confirm {
   background-color: var(--bs-primary);
 }
@@ -233,4 +233,4 @@ button:focus {
 
 .collapse-toggle.rotated {
   transform: rotate(90deg);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_accordion.scss b/src/lib/scss/custom/components/_accordion.scss
index 48d8312e..a050f11a 100644
--- a/src/lib/scss/custom/components/_accordion.scss
+++ b/src/lib/scss/custom/components/_accordion.scss
@@ -1,7 +1,7 @@
-
-//
-// accordion.scss
-//
+
+/*  */
+/* accordion.scss */
+/*  */
 
 .custom-accordion {
     .accordion-list {
@@ -49,4 +49,4 @@
     .card-body {
         color: var(--#{prefix}secondary-color);
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_audio.scss b/src/lib/scss/custom/components/_audio.scss
index 4cec1776..58a2847b 100644
--- a/src/lib/scss/custom/components/_audio.scss
+++ b/src/lib/scss/custom/components/_audio.scss
@@ -1,4 +1,4 @@
-.aplayer {
+.aplayer {
     --base-font-size: 12px;
     --aplayer-height: calc(var(--base-font-size) * 5.5);
     --theme-color: #fadfa3;
@@ -168,7 +168,7 @@
                 }
             }
             .aplayer-loading-icon {
-                //display: none;
+                /* display: none; */
                 svg {
                     display: block;
                     position: absolute;
@@ -238,7 +238,7 @@
         }
     }
     .aplayer-list {
-        //overflow: auto;
+        /* overflow: auto; */
         scrollbar-width: none;
         transition: all 0.5s ease;
         will-change: height;
@@ -346,4 +346,4 @@
     span {
         cursor: pointer;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_avatar.scss b/src/lib/scss/custom/components/_avatar.scss
index 07ef618b..84bc0b6a 100644
--- a/src/lib/scss/custom/components/_avatar.scss
+++ b/src/lib/scss/custom/components/_avatar.scss
@@ -1,6 +1,6 @@
-//
-// avatar.scss
-//
+/*  */
+/* avatar.scss */
+/*  */
 
 .avatar-xs {
   height: 2rem;
@@ -38,7 +38,7 @@
   width: 100%;
 }
 
-// avatar group
+/* avatar group */
 .avatar-group {
   padding-left: 12px;
   display: flex;
@@ -53,4 +53,4 @@
       transform: translateY(-2px);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_badge.scss b/src/lib/scss/custom/components/_badge.scss
index 73fafacc..358943ce 100644
--- a/src/lib/scss/custom/components/_badge.scss
+++ b/src/lib/scss/custom/components/_badge.scss
@@ -1,6 +1,6 @@
-// 
-// _badge.scss
-// 
+/*  */
+/* _badge.scss */
+/*  */
 
 
 .badge {
@@ -12,7 +12,7 @@
   }
 }
 
-// Soft badge
+/* Soft badge */
 @mixin badge-variant-soft($bg) {
   color: $bg;
   background-color: rgba($bg, 0.18);
@@ -63,8 +63,8 @@
     padding-left: .6em;
 }
 
-// Dark badge
+/* Dark badge */
 
 .badge.bg-dark{
   color: var(--#{$prefix}light);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_breadcrumb.scss b/src/lib/scss/custom/components/_breadcrumb.scss
index f3660e59..0f6939b9 100644
--- a/src/lib/scss/custom/components/_breadcrumb.scss
+++ b/src/lib/scss/custom/components/_breadcrumb.scss
@@ -1,10 +1,10 @@
+
+/*  */
+/* breadcrumb.scss */
+/*  */
 
-// 
-// breadcrumb.scss
-//
 
-
-// Breadcrumb item arrow
+/* Breadcrumb item arrow */
 .breadcrumb-item {
     > a {
         color: var(--#{$prefix}emphasis-color);
@@ -15,4 +15,4 @@
         }
     }
 }
-  
\ No newline at end of file
+  
diff --git a/src/lib/scss/custom/components/_buttons.scss b/src/lib/scss/custom/components/_buttons.scss
index eee8bdeb..67ef8c3c 100644
--- a/src/lib/scss/custom/components/_buttons.scss
+++ b/src/lib/scss/custom/components/_buttons.scss
@@ -1,13 +1,13 @@
-//
-// _buttons.scss
-//
+/*  */
+/* _buttons.scss */
+/*  */
 
 button,
 a {
     outline: none !important;
 }
 
-// Rounded Buttons
+/* Rounded Buttons */
 .btn-rounded {
     border-radius: 30px;
 }
@@ -18,7 +18,7 @@ a {
     }
 }
 
-// example 1
+/* example 1 */
 
 .btn-group-example {
     .btn {
@@ -49,7 +49,7 @@ a {
     }
 }
 
-// Example 2
+/* Example 2 */
 
 .btn-label {
     position: relative;
@@ -83,9 +83,9 @@ a {
 }
 
 
-//
-// Soft Buttons
-// 
+/*  */
+/* Soft Buttons */
+/*  */
 
 @mixin button-variant-soft($bg) {
     color: $bg;
@@ -117,4 +117,4 @@ $value in $theme-colors {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_card.scss b/src/lib/scss/custom/components/_card.scss
index 636d8086..d43018bf 100644
--- a/src/lib/scss/custom/components/_card.scss
+++ b/src/lib/scss/custom/components/_card.scss
@@ -1,6 +1,6 @@
-// 
-// _card.scss
-// 
+/*  */
+/* _card.scss */
+/*  */
 
 .card {
   margin-bottom: $grid-gutter-width;
@@ -21,4 +21,4 @@
 .card-title-desc {
   color: var(--#{$prefix}secondary-color);
   margin-bottom: 24px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_codeScript.scss b/src/lib/scss/custom/components/_codeScript.scss
index 0ed5688e..e008411c 100644
--- a/src/lib/scss/custom/components/_codeScript.scss
+++ b/src/lib/scss/custom/components/_codeScript.scss
@@ -1,5 +1,5 @@
 .code-script-container {
-    min-height: 300px;
+    min-height: 200px;
     max-height: 500px;
     overflow: auto;
     scrollbar-width: thin;
diff --git a/src/lib/scss/custom/components/_demos.scss b/src/lib/scss/custom/components/_demos.scss
index d6bd1d67..94c4bbc2 100644
--- a/src/lib/scss/custom/components/_demos.scss
+++ b/src/lib/scss/custom/components/_demos.scss
@@ -1,8 +1,8 @@
-// 
-// _demos.scss
-// 
+/*  */
+/* _demos.scss */
+/*  */
 
-// Lightbox 
+/* Lightbox  */
 
 .mfp-popup-form {
     max-width: 1140px;
@@ -11,7 +11,7 @@
   color: var(--#{$prefix}body-color) !important;
 }
 
-// Modals
+/* Modals */
 
 .bs-example-modal {
     position: relative;
@@ -29,7 +29,7 @@
   }
 }
 
-// Icon demo ( Demo only )
+/* Icon demo ( Demo only ) */
 .icon-demo-content {
     text-align: center;
     color: $gray-500;
@@ -55,7 +55,7 @@
 }
 
 
-// Grid
+/* Grid */
 
 .grid-structure {
     .grid-container {
@@ -68,7 +68,7 @@
 }
 
 
-// card radio
+/* card radio */
 
 .card-radio{
   background-color: var(--#{$prefix}secondary-bg);
diff --git a/src/lib/scss/custom/components/_dropdown.scss b/src/lib/scss/custom/components/_dropdown.scss
index 739b49e1..ebdd98d3 100644
--- a/src/lib/scss/custom/components/_dropdown.scss
+++ b/src/lib/scss/custom/components/_dropdown.scss
@@ -1,6 +1,6 @@
-//
-// _dropdown.scss
-//
+/*  */
+/* _dropdown.scss */
+/*  */
 
 .dropdown-menu {
   box-shadow: $box-shadow-lg;
@@ -50,7 +50,7 @@
   }
 }
 
-// Dropdown Mega Menu
+/* Dropdown Mega Menu */
 
 .dropdown-mega {
   position: static !important;
@@ -62,7 +62,7 @@
   right: 20px !important;
 }
 
-// Dropdown size
+/* Dropdown size */
 
 .dropdown-mega-menu-xl {
   width: 40rem;
@@ -70,4 +70,4 @@
 
 .dropdown-mega-menu-lg {
   width: 26rem;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_file.scss b/src/lib/scss/custom/components/_file.scss
index 577a5a51..5bdff373 100644
--- a/src/lib/scss/custom/components/_file.scss
+++ b/src/lib/scss/custom/components/_file.scss
@@ -1,4 +1,4 @@
-$attachment-width: 8em;
+$attachment-width: 8em;
 $attachment-height: 8em;
 $attachment-width-lite: 5em;
 $attachment-height-lite: 5em;
@@ -74,7 +74,7 @@ $file-screen-max-width: 500px;
 }
 
 
-// File gallery
+/* File gallery */
 .file-gallery-list {
     margin: 5px 0px;
     display: flex;
@@ -157,4 +157,4 @@ $file-screen-max-width: 500px;
         word-break: break-all;
         font-size: 0.7rem;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_forms.scss b/src/lib/scss/custom/components/_forms.scss
index 50e213bc..7c36181c 100644
--- a/src/lib/scss/custom/components/_forms.scss
+++ b/src/lib/scss/custom/components/_forms.scss
@@ -1,6 +1,6 @@
-//
-// Forms.scss
-//
+/*  */
+/* Forms.scss */
+/*  */
 
 [type="tel"],
 [type="url"],
@@ -21,7 +21,7 @@
 }
 
 
-// checkbox input right
+/* checkbox input right */
 
 .form-check-right {
   padding-left: 0;
@@ -41,7 +41,7 @@
 
 
 
-// checkbox
+/* checkbox */
 
 .form-checkbox-outline {
 
@@ -75,7 +75,7 @@
   }
 }
 
-// radio
+/* radio */
 
 .form-radio-outline {
   .form-check-input {
@@ -109,7 +109,7 @@
 
 
 
-// checkbox color
+/* checkbox color */
 
 @each $color,
 $value in $theme-colors {
@@ -143,7 +143,7 @@ $value in $theme-colors {
   margin-bottom: 0;
 }
 
-// Switch sizes
+/* Switch sizes */
 
 .form-switch-md {
   padding-left: 2.5rem;
@@ -178,4 +178,4 @@ $value in $theme-colors {
 
 .input-group-text {
   margin-bottom: 0px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_helper.scss b/src/lib/scss/custom/components/_helper.scss
index 6749348b..2100282d 100644
--- a/src/lib/scss/custom/components/_helper.scss
+++ b/src/lib/scss/custom/components/_helper.scss
@@ -1,6 +1,6 @@
-//
-// _helper.scss
-//
+/*  */
+/* _helper.scss */
+/*  */
 
 .font-size-10 {
     font-size: 10px !important;
@@ -50,7 +50,7 @@
     font-size: 24px !important;
 }
 
-// Social
+/* Social */
 .social-list-item {
     height: 2rem;
     width: 2rem;
@@ -90,7 +90,7 @@
 }
 
 
-// alert
+/* alert */
 
 .alert-dismissible {
     .btn-close {
@@ -101,4 +101,4 @@
 
 .chartjs-chart {
     max-height: 300px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_nav.scss b/src/lib/scss/custom/components/_nav.scss
index 8b8588e5..f886c085 100644
--- a/src/lib/scss/custom/components/_nav.scss
+++ b/src/lib/scss/custom/components/_nav.scss
@@ -1,6 +1,6 @@
-// 
-// _nav.scss
-// 
+/*  */
+/* _nav.scss */
+/*  */
 
 .nav-tabs,.nav-pills {
   > li {
@@ -89,7 +89,7 @@
 }
 
 
-// vertical nav
+/* vertical nav */
 
 .vertical-nav {
   .nav{
@@ -102,4 +102,4 @@
           }
       }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_pagination.scss b/src/lib/scss/custom/components/_pagination.scss
index e7bda803..f0fcfc3d 100644
--- a/src/lib/scss/custom/components/_pagination.scss
+++ b/src/lib/scss/custom/components/_pagination.scss
@@ -1,8 +1,8 @@
-// 
-// _pagination.scss
-// 
+/*  */
+/* _pagination.scss */
+/*  */
 
-// Pagination rounded (Custom)
+/* Pagination rounded (Custom) */
 .pagination-rounded {
     .page-link {
         border-radius: 30px !important;
@@ -19,4 +19,4 @@
 .page-link:focus {
     outline: none;
     box-shadow: none;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_preloader.scss b/src/lib/scss/custom/components/_preloader.scss
index 4835e729..ea930ed6 100644
--- a/src/lib/scss/custom/components/_preloader.scss
+++ b/src/lib/scss/custom/components/_preloader.scss
@@ -1,6 +1,6 @@
-// 
-// preloader.scss
-//
+/*  */
+/* preloader.scss */
+/*  */
 
 #preloader {
     position: fixed;
@@ -103,4 +103,4 @@
     100%, 0% {
         transform: scale(1.0); 
     } 
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_print.scss b/src/lib/scss/custom/components/_print.scss
index 9253dfa6..24fad5b6 100644
--- a/src/lib/scss/custom/components/_print.scss
+++ b/src/lib/scss/custom/components/_print.scss
@@ -1,8 +1,8 @@
-// 
-// print.scss
-//
+/*  */
+/* print.scss */
+/*  */
 
-// Used invoice page
+/* Used invoice page */
 @media print {
     .vertical-menu,
     .right-bar,
@@ -23,4 +23,4 @@
     .card{
         border: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_progress.scss b/src/lib/scss/custom/components/_progress.scss
index 0bcc0456..694bd487 100644
--- a/src/lib/scss/custom/components/_progress.scss
+++ b/src/lib/scss/custom/components/_progress.scss
@@ -1,25 +1,25 @@
-// 
-// _progress.scss
-// 
+/*  */
+/* _progress.scss */
+/*  */
 
-// Progress height small
+/* Progress height small */
 .progress-sm {
   height: 5px;
 }
 
 
-// Progress height medium
+/* Progress height medium */
 .progress-md {
   height: 8px;
 }
 
 
-// Progress height large
+/* Progress height large */
 .progress-lg {
   height: 12px;
 }
 
-// Progress height Extra large
+/* Progress height Extra large */
 .progress-xl {
   height: 16px;
 }
@@ -35,7 +35,7 @@
   }
 }
 
-// animated-progess
+/* animated-progess */
 
 .animated-progess{
   position: relative;
diff --git a/src/lib/scss/custom/components/_reboot.scss b/src/lib/scss/custom/components/_reboot.scss
index b4fd66f2..cf9104dc 100644
--- a/src/lib/scss/custom/components/_reboot.scss
+++ b/src/lib/scss/custom/components/_reboot.scss
@@ -1,4 +1,4 @@
-/* =============
+/* =============
    General
 ============= */
 
@@ -7,10 +7,10 @@ html {
   min-height: 100%;
 }
 
-// .h1,.h2,.h3,.h4,.h5,.h6,
-// h1,h2,h3,h4,h5,h6 {
-//   color: $gray-700;
-// }
+/* .h1,.h2,.h3,.h4,.h5,.h6, */
+/* h1,h2,h3,h4,h5,h6 { */
+/* color: $gray-700; */
+/* } */
 
 a {
   text-decoration: none !important;
@@ -21,7 +21,7 @@ label {
   margin-bottom: $form-label-margin-bottom;
 }
 
-// blockquote
+/* blockquote */
 
 .blockquote {
   padding: 10px 20px;
@@ -34,7 +34,7 @@ label {
   text-align: right;
 }
 
-// container
+/* container */
 
 .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
   @media (min-width: 1200px){
@@ -42,7 +42,7 @@ label {
   }
 }
 
-// row
+/* row */
 
 .row{
   > * {
diff --git a/src/lib/scss/custom/components/_root.scss b/src/lib/scss/custom/components/_root.scss
index a8586d6d..33d366da 100644
--- a/src/lib/scss/custom/components/_root.scss
+++ b/src/lib/scss/custom/components/_root.scss
@@ -1,60 +1,60 @@
-// 
-// root.scss
-//
+/*  */
+/* root.scss */
+/*  */
 
-//theme-light
+/* theme-light */
 :root {
-    // Topbar - Default Light
+    /* Topbar - Default Light */
     --#{$prefix}header-bg:                              #{$header-bg}; 
     --#{$prefix}header-item-color:                      #{$header-item-color}; 
 
-    // Topbar - Dark
+    /* 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
+    /* Footer */
     --#{$prefix}footer-bg:                              #{$footer-bg}; 
     --#{$prefix}footer-color:                           #{$footer-color}; 
 
-    // Horizontal nav
+    /* 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
+    /* Boxed layout width */
     --#{$prefix}boxed-body-bg:                          #{$boxed-body-bg}; 
 
     --#{$prefix}display-none:                           #{$display-none};
     --#{$prefix}display-block:                          #{$display-block};
 }
 
-//theme dark
+/* theme dark */
 @if $enable-dark-mode {
     @include color-mode(dark, true) { 
-        // Topbar - Default Light
+        /* Topbar - Default Light */
         --#{$prefix}header-bg:                              #{$header-bg-dark}; 
         --#{$prefix}header-item-color:                      #{$header-item-color-dark}; 
 
-        // Topbar - 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
+        /* Footer */
         --#{$prefix}footer-bg:                              #{$footer-bg-dark}; 
         --#{$prefix}footer-color:                           #{$footer-color-dark}; 
 
-        // Horizontal nav
+        /* 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
+        /* Boxed layout width */
         --#{$prefix}boxed-body-bg:                          #{$boxed-body-bg-dark};
 
-        // component variable
+        /* component variable */
         --#{$prefix}light:                                      #{$body-tertiary-bg-dark};
         --#{$prefix}light-rgb:                                  #{to-rgb($body-tertiary-bg-dark)};
         --#{$prefix}dark:                                       #{$body-tertiary-color-dark};
@@ -113,4 +113,4 @@
         }
 
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/components/_table.scss b/src/lib/scss/custom/components/_table.scss
index e261404b..1e911bc2 100644
--- a/src/lib/scss/custom/components/_table.scss
+++ b/src/lib/scss/custom/components/_table.scss
@@ -1,6 +1,6 @@
-// 
-// _table.scss
-// 
+/*  */
+/* _table.scss */
+/*  */
 
 .table {
   th {
diff --git a/src/lib/scss/custom/components/_widgets.scss b/src/lib/scss/custom/components/_widgets.scss
index 745ef082..ef8d4fb4 100644
--- a/src/lib/scss/custom/components/_widgets.scss
+++ b/src/lib/scss/custom/components/_widgets.scss
@@ -1,6 +1,6 @@
-// 
-// Widgets.scss
-// 
+/*  */
+/* Widgets.scss */
+/*  */
 
 .mini-stats-wid{
     .mini-stat-icon{
diff --git a/src/lib/scss/custom/fonts/_fonts.scss b/src/lib/scss/custom/fonts/_fonts.scss
index 411e12ac..216ff4af 100644
--- a/src/lib/scss/custom/fonts/_fonts.scss
+++ b/src/lib/scss/custom/fonts/_fonts.scss
@@ -1,5 +1,5 @@
-//
-// Google font - Poppins
-//
+/*  */
+/* Google font - Poppins */
+/*  */
 
-@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap');
\ No newline at end of file
+@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
index e6d35154..9b301e36 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -1,4 +1,4 @@
-.agents-header-container {
+.agents-header-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -365,7 +365,7 @@
     }
 }
 
-// Responsive adjustments for utility
+/* Responsive adjustments for utility */
 @media (max-width: 1250px) {
     .agent-config-container {
         .config-header {
@@ -439,4 +439,4 @@
     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});
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_authentication.scss b/src/lib/scss/custom/pages/_authentication.scss
index f50e0ec1..cfa4445f 100644
--- a/src/lib/scss/custom/pages/_authentication.scss
+++ b/src/lib/scss/custom/pages/_authentication.scss
@@ -1,16 +1,16 @@
-// 
-// authentication.scss
-//
+/*  */
+/* authentication.scss */
+/*  */
 
 
-// authentication home icon
+/* authentication home icon */
 .home-btn {
     position: absolute;
     top: 15px;
     right: 25px;
 }
 
-// auth 2
+/* auth 2 */
 
 .auth-logo{
     .auth-logo-dark{
@@ -26,7 +26,7 @@
 }
 
 
-// auth-pass-inputgroup
+/* auth-pass-inputgroup */
 
 .auth-pass-inputgroup{
     input[type="input"] + .btn .mdi-eye-outline{
@@ -36,7 +36,7 @@
     }
 }
 
-// authentication full page
+/* authentication full page */
 
 .auth-full-bg{
     background-color: rgba($primary, 0.25);
@@ -86,4 +86,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index 67d86ae2..101d5e56 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -1,6 +1,6 @@
-//
-// Chat.scss
-//
+/*  */
+/* Chat.scss */
+/*  */
 
 .chat-leftsidebar {
     @media (min-width: 992px) {
@@ -86,7 +86,7 @@
 
         .chat-head-info {
             display: flex;
-            // flex: 0 0 fit-content;
+            /* flex: 0 0 fit-content; */
             flex-direction: column;
             height: 100%;
             gap: 5px;
@@ -146,8 +146,8 @@
         background-color: var(--#{$prefix}light);
         border-radius: 50%;
         border: none;
-        // width: 40px;
-        // height: 40px;
+        /* width: 40px; */
+        /* height: 40px; */
         width: 2em;
         height: 2em;
 
@@ -839,4 +839,4 @@
     align-items: center;
     gap: 8px;
     margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_coming-soon.scss b/src/lib/scss/custom/pages/_coming-soon.scss
index b202cde7..75691539 100644
--- a/src/lib/scss/custom/pages/_coming-soon.scss
+++ b/src/lib/scss/custom/pages/_coming-soon.scss
@@ -1,6 +1,6 @@
-// 
-// coming-soon.scss
-//
+/*  */
+/* coming-soon.scss */
+/*  */
 
 .counter-number {
     font-size: 32px;
diff --git a/src/lib/scss/custom/pages/_contacts.scss b/src/lib/scss/custom/pages/_contacts.scss
index 8b36d0ea..22fff233 100644
--- a/src/lib/scss/custom/pages/_contacts.scss
+++ b/src/lib/scss/custom/pages/_contacts.scss
@@ -1,6 +1,6 @@
-// 
-// Contacts.scss
-//
+/*  */
+/* Contacts.scss */
+/*  */
 
 .contact-links{
   a{
@@ -8,8 +8,8 @@
   }
 }
 
-// profile
+/* profile */
 
 .profile-user-wid{
   margin-top: -26px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_ecommerce.scss b/src/lib/scss/custom/pages/_ecommerce.scss
index 04df1986..59cc249a 100644
--- a/src/lib/scss/custom/pages/_ecommerce.scss
+++ b/src/lib/scss/custom/pages/_ecommerce.scss
@@ -1,8 +1,8 @@
-// 
-// ecommerce.scss
-//
+/*  */
+/* ecommerce.scss */
+/*  */
 
-// product
+/* product */
 
 .search-box{
     .form-control{
@@ -51,7 +51,7 @@
     top: 0px;
 }
 
-// Product Details
+/* Product Details */
 
 .product-detai-imgs{
     .nav{
@@ -82,7 +82,7 @@
     }
 }
 
-// ecommerce cart
+/* ecommerce cart */
 
 .visa-card{
     .visa-logo{
@@ -100,7 +100,7 @@
 }
 
 
-// checkout
+/* checkout */
 
 .checkout-tabs{
     .nav-pills{
@@ -118,4 +118,4 @@
             }
         }
     }
-}
\ 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
index 966f7d38..083e60e0 100644
--- a/src/lib/scss/custom/pages/_extras-pages.scss
+++ b/src/lib/scss/custom/pages/_extras-pages.scss
@@ -1,9 +1,9 @@
-// 
-// Extras pages.scss
-//
+/*  */
+/* Extras pages.scss */
+/*  */
 
 
-// pricing
+/* pricing */
 
 
 .plan-box{
@@ -23,7 +23,7 @@
     }
 }
 
-// blog
+/* blog */
 
 .blog-play-icon{
     position: absolute;
@@ -32,4 +32,4 @@
     right: 0;
     transform: translateY(-50%);
     margin: 0px auto;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_file-manager.scss b/src/lib/scss/custom/pages/_file-manager.scss
index 2dc760eb..37075954 100644
--- a/src/lib/scss/custom/pages/_file-manager.scss
+++ b/src/lib/scss/custom/pages/_file-manager.scss
@@ -1,8 +1,8 @@
-// 
-// File manager.scss
-//
+/*  */
+/* File manager.scss */
+/*  */
 
-// file manager
+/* file manager */
 
 .filemanager-sidebar{
     
diff --git a/src/lib/scss/custom/pages/_instruction.scss b/src/lib/scss/custom/pages/_instruction.scss
index 46d44ae9..2197dc92 100644
--- a/src/lib/scss/custom/pages/_instruction.scss
+++ b/src/lib/scss/custom/pages/_instruction.scss
@@ -83,7 +83,7 @@
 
     .instruct-kv-item {
         display: flex;
-        gap: 30px;
+        gap: 10px;
         justify-content: center;
     }
 }
diff --git a/src/lib/scss/custom/pages/_jobs.scss b/src/lib/scss/custom/pages/_jobs.scss
index e0550d74..164fd9cc 100644
--- a/src/lib/scss/custom/pages/_jobs.scss
+++ b/src/lib/scss/custom/pages/_jobs.scss
@@ -1,6 +1,6 @@
-//
-// _jobs.scss
-//
+/*  */
+/* _jobs.scss */
+/*  */
 
 .jobs-categories {
     a {
@@ -10,4 +10,4 @@
             color: $primary;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_knowledgebase.scss b/src/lib/scss/custom/pages/_knowledgebase.scss
index 1184ef12..3b037c77 100644
--- a/src/lib/scss/custom/pages/_knowledgebase.scss
+++ b/src/lib/scss/custom/pages/_knowledgebase.scss
@@ -1,4 +1,4 @@
-.knowledge-demo-btn {
+.knowledge-demo-btn {
     display: flex;
     justify-content: space-between;
 
@@ -116,14 +116,14 @@
             }
         }
 
-        // Responsive design for tablets and mobile
+        /* Responsive design for tablets and mobile */
         @media (max-width: 768px) {
             flex-direction: column;
             gap: 15px;
 
             .search-input {
                 &:first-child {
-                    // Confidence input section - centered
+                    /* Confidence input section - centered */
                     justify-content: center;
                     align-items: center;
                     gap: 10px;
@@ -135,7 +135,7 @@
                 }
 
                 &:nth-child(2) {
-                    // Toggle section - keep horizontal
+                    /* Toggle section - keep horizontal */
                     justify-content: center;
                     align-items: center;
                     gap: 15px;
@@ -167,13 +167,13 @@
                 }
             }
 
-            // Center the search button
+            /* Center the search button */
             .line-align-center {
                 text-align: center;
             }
         }
 
-        // Mobile and smaller screens - stack vertically
+        /* Mobile and smaller screens - stack vertically */
         @media (max-width: 480px) {
             .search-input {
                 &:first-child {
@@ -184,7 +184,7 @@
                     }
 
                     > div:last-child {
-                        // Confidence input and buttons container
+                        /* Confidence input and buttons container */
                         display: flex;
                         align-items: center;
                         justify-content: center;
@@ -198,7 +198,7 @@
                 }
 
                 &:nth-child(2) {
-                    // Keep toggle section horizontal on mobile
+                    /* Keep toggle section horizontal on mobile */
                     justify-content: center;
                     align-items: center;
                     gap: 12px;
@@ -234,7 +234,7 @@
             }
         }
 
-        // Very small screens - further optimizations
+        /* Very small screens - further optimizations */
         @media (max-width: 360px) {
             .search-input {
                 &:first-child {
@@ -608,7 +608,7 @@
                 max-width: 350px;
             }
 
-            // Responsive behavior for narrow screens
+            /* Responsive behavior for narrow screens */
             @media (max-width: 768px) {
                 flex-direction: column;
                 gap: 8px;
@@ -629,7 +629,7 @@
                     width: 100%;
                     position: relative;
 
-                    // Show field labels on mobile
+                    /* Show field labels on mobile */
                     &[data-label]:before {
                         content: attr(data-label) ":";
                         display: block;
@@ -640,7 +640,7 @@
                     }
                 }
 
-                // Hide header row on mobile since items are stacked
+                /* Hide header row on mobile since items are stacked */
                 &:first-child {
                     display: none;
                 }
@@ -651,7 +651,7 @@
                 gap: 6px;
             }
 
-            // Special styling for the add button row
+            /* Special styling for the add button row */
             &.add-item-row {
                 @media (max-width: 768px) {
                     flex-direction: row;
@@ -841,4 +841,4 @@
             text-align: center;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_projects.scss b/src/lib/scss/custom/pages/_projects.scss
index 0fec0681..055a828d 100644
--- a/src/lib/scss/custom/pages/_projects.scss
+++ b/src/lib/scss/custom/pages/_projects.scss
@@ -1,8 +1,8 @@
-// 
-// projects.scss
-//
+/*  */
+/* projects.scss */
+/*  */
 
-// project list
+/* project list */
 
 .project-list-table {
   border-collapse: separate;
@@ -11,4 +11,4 @@
   tr {
     background-color: var(--#{$prefix}secondary-bg);
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/pages/_timeline.scss b/src/lib/scss/custom/pages/_timeline.scss
index e3edbb7b..97f34f39 100644
--- a/src/lib/scss/custom/pages/_timeline.scss
+++ b/src/lib/scss/custom/pages/_timeline.scss
@@ -1,6 +1,6 @@
-// 
-// timeline.scss
-//
+/*  */
+/* timeline.scss */
+/*  */
 
 /************** Horizontal timeline **************/ 
 
@@ -80,4 +80,4 @@
             padding-bottom: 0px;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_apexcharts.scss b/src/lib/scss/custom/plugins/_apexcharts.scss
index 8732a96b..98d4b103 100644
--- a/src/lib/scss/custom/plugins/_apexcharts.scss
+++ b/src/lib/scss/custom/plugins/_apexcharts.scss
@@ -1,6 +1,6 @@
-//
-// apexcharts.scss
-//
+/*  */
+/* apexcharts.scss */
+/*  */
 .apex-charts {
     min-height: 10px !important;
 
@@ -82,4 +82,4 @@
 
 .apexcharts-xaxis-tick {
     stroke: var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss b/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss
index 9fbbf88d..0bd8ae35 100644
--- a/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss
+++ b/src/lib/scss/custom/plugins/_bootstrap-touchspin.scss
@@ -1,6 +1,6 @@
-//
-// Bootstrap touchspin
-//
+/*  */
+/* Bootstrap touchspin */
+/*  */
 
 .bootstrap-touchspin {
   &.input-group {
@@ -24,4 +24,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_calendar-full.scss b/src/lib/scss/custom/plugins/_calendar-full.scss
index a8ffa152..56392d5a 100644
--- a/src/lib/scss/custom/plugins/_calendar-full.scss
+++ b/src/lib/scss/custom/plugins/_calendar-full.scss
@@ -1,4 +1,4 @@
-/* ==============
+/* ==============
   Calendar
 ===================*/
 
@@ -201,7 +201,7 @@
 }
 
 
-// RTL
+/* RTL */
 [dir="rtl"] {
   .fc-header-toolbar {
     direction: ltr !important;
@@ -242,4 +242,4 @@
 .fc-theme-standard .fc-popover {
     background: var(--#{$prefix}secondary-bg);
     border: 1px solid var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_colorpicker.scss b/src/lib/scss/custom/plugins/_colorpicker.scss
index d9604902..5707199e 100644
--- a/src/lib/scss/custom/plugins/_colorpicker.scss
+++ b/src/lib/scss/custom/plugins/_colorpicker.scss
@@ -1,7 +1,7 @@
-
-//
-// colorpicker.scss
-//
+
+/*  */
+/* colorpicker.scss */
+/*  */
 
 .sp-container{
   background-color: $dropdown-bg;
@@ -62,4 +62,4 @@
     border-bottom-right-radius: $input-border-radius;
 
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_datatable.scss b/src/lib/scss/custom/plugins/_datatable.scss
index 152d7369..6917ca83 100644
--- a/src/lib/scss/custom/plugins/_datatable.scss
+++ b/src/lib/scss/custom/plugins/_datatable.scss
@@ -1,8 +1,8 @@
-/* 
+/* 
 Datatable
 */
 
-// datatable
+/* datatable */
 
 div.dataTables_wrapper {
   div.dataTables_filter {
@@ -51,4 +51,4 @@ table {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_datepicker.scss b/src/lib/scss/custom/plugins/_datepicker.scss
index ac382594..95f6632a 100644
--- a/src/lib/scss/custom/plugins/_datepicker.scss
+++ b/src/lib/scss/custom/plugins/_datepicker.scss
@@ -1,7 +1,7 @@
-
-//
-// Datepicker
-//
+
+/*  */
+/* Datepicker */
+/*  */
 
 .datepicker {
   border: 1px solid var(--#{$prefix}border-color);
@@ -62,7 +62,7 @@
 }
 
 
-// DATEPICKER
+/* DATEPICKER */
 
 .datepicker-container{
   border: 1px solid var(--#{$prefix}border-color);
diff --git a/src/lib/scss/custom/plugins/_echarts.scss b/src/lib/scss/custom/plugins/_echarts.scss
index 34433eca..dcf416ff 100644
--- a/src/lib/scss/custom/plugins/_echarts.scss
+++ b/src/lib/scss/custom/plugins/_echarts.scss
@@ -1,8 +1,8 @@
-
-//
-// echarts.scss
-//
+
+/*  */
+/* echarts.scss */
+/*  */
 
 .e-charts{
     height: 350px;
-}
\ 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
index 21d434af..d57c4ceb 100644
--- a/src/lib/scss/custom/plugins/_form-editors.scss
+++ b/src/lib/scss/custom/plugins/_form-editors.scss
@@ -1,8 +1,8 @@
-//
-// Form editors.scss
-//
+/*  */
+/* Form editors.scss */
+/*  */
 
-// Tinymce
+/* Tinymce */
 
 form {
     .tox-tinymce {
@@ -48,4 +48,4 @@ form {
             background-color: $body-tertiary-bg;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_form-upload.scss b/src/lib/scss/custom/plugins/_form-upload.scss
index 082afd43..56b20631 100644
--- a/src/lib/scss/custom/plugins/_form-upload.scss
+++ b/src/lib/scss/custom/plugins/_form-upload.scss
@@ -1,7 +1,7 @@
-
-//
-// Form-Upload
-//
+
+/*  */
+/* Form-Upload */
+/*  */
 
 /* Dropzone */
 .dropzone {
@@ -15,4 +15,4 @@
     width: 100%;
     margin: 3rem 0;
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_form-wizard.scss b/src/lib/scss/custom/plugins/_form-wizard.scss
index e3a735ce..1ca19167 100644
--- a/src/lib/scss/custom/plugins/_form-wizard.scss
+++ b/src/lib/scss/custom/plugins/_form-wizard.scss
@@ -1,6 +1,6 @@
-//
-// Form Wizard
-//
+/*  */
+/* Form Wizard */
+/*  */
 
 
 .form-wizard-wrapper {
@@ -12,7 +12,7 @@
 
 .wizard{
 
-  // step
+  /* step */
   .steps{
     >ul{
       display: flex;
@@ -75,7 +75,7 @@
     }
   }
 
-  // content
+  /* content */
   >.content {
     background-color: transparent;
     padding: 14px;
@@ -94,7 +94,7 @@
     }
   }
 
-  // actions
+  /* actions */
 
   >.actions {
     position: relative;
@@ -128,12 +128,12 @@
       }
   }
 
-  // verticl wixard
+  /* verticl wixard */
   &.vertical-wizard{
     display: flex;
     flex-wrap: wrap;
 
-    // step
+    /* step */
     .steps{
       >ul{
         flex-direction: column;
diff --git a/src/lib/scss/custom/plugins/_google-map.scss b/src/lib/scss/custom/plugins/_google-map.scss
index c236af58..da3257be 100644
--- a/src/lib/scss/custom/plugins/_google-map.scss
+++ b/src/lib/scss/custom/plugins/_google-map.scss
@@ -1,7 +1,7 @@
-
-//
-// Google map
-//
+
+/*  */
+/* Google map */
+/*  */
 
 .gmaps, .gmaps-panaroma {
   height: 300px !important;
@@ -39,4 +39,4 @@
     border-bottom: 16px solid $primary;
   }
   
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_icons.scss b/src/lib/scss/custom/plugins/_icons.scss
index 93ff4b95..a66b2f6f 100644
--- a/src/lib/scss/custom/plugins/_icons.scss
+++ b/src/lib/scss/custom/plugins/_icons.scss
@@ -1,8 +1,8 @@
-//
-// icons.scss
-//
+/*  */
+/* icons.scss */
+/*  */
 
 @import "icons/materialdesignicons";
 @import "icons/boxicons";
 @import "icons/fontawesome-all";
-@import "icons/dripicons";
\ No newline at end of file
+@import "icons/dripicons";
diff --git a/src/lib/scss/custom/plugins/_leaflet-maps.scss b/src/lib/scss/custom/plugins/_leaflet-maps.scss
index f864511f..e7c01c11 100644
--- a/src/lib/scss/custom/plugins/_leaflet-maps.scss
+++ b/src/lib/scss/custom/plugins/_leaflet-maps.scss
@@ -1,10 +1,10 @@
-//
-// leaflet-maps.scss
-//
+/*  */
+/* leaflet-maps.scss */
+/*  */
 
 .leaflet-map {
     height: 300px;
     &.leaflet-container{
         z-index: 99;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_parsley.scss b/src/lib/scss/custom/plugins/_parsley.scss
index 7195fba8..71737c6c 100644
--- a/src/lib/scss/custom/plugins/_parsley.scss
+++ b/src/lib/scss/custom/plugins/_parsley.scss
@@ -1,7 +1,7 @@
-
-//
-// Parsley
-//
+
+/*  */
+/* Parsley */
+/*  */
 
 .error {
   color: $danger;
@@ -24,4 +24,4 @@
     color: $danger;
     margin-top: 5px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_range-slider.scss b/src/lib/scss/custom/plugins/_range-slider.scss
index 688d784e..8fa79c83 100644
--- a/src/lib/scss/custom/plugins/_range-slider.scss
+++ b/src/lib/scss/custom/plugins/_range-slider.scss
@@ -1,6 +1,6 @@
-//
-// Range slider
-//
+/*  */
+/* Range slider */
+/*  */
 
 .irs {
   font-family: $font-family-base;
@@ -58,4 +58,4 @@
   .irs-grid-pol {
     background-color: var(--#{$prefix}secondary-color);
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_rating.scss b/src/lib/scss/custom/plugins/_rating.scss
index cd1c94fb..60e93c11 100644
--- a/src/lib/scss/custom/plugins/_rating.scss
+++ b/src/lib/scss/custom/plugins/_rating.scss
@@ -1,7 +1,7 @@
-
-//
-// Rating
-//
+
+/*  */
+/* Rating */
+/*  */
 
 .symbol{
   border-color: var(--#{$prefix}secondary-bg);
@@ -28,4 +28,4 @@
       margin-left: 4px;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_responsive-table.scss b/src/lib/scss/custom/plugins/_responsive-table.scss
index 5bb46b54..3a803cc6 100644
--- a/src/lib/scss/custom/plugins/_responsive-table.scss
+++ b/src/lib/scss/custom/plugins/_responsive-table.scss
@@ -1,7 +1,7 @@
-
-//
-// Responsive Table
-//
+
+/*  */
+/* Responsive Table */
+/*  */
 
 .table-rep-plugin {
   .btn-toolbar {
@@ -158,4 +158,4 @@ body[data-layout="horizontal"] {
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_select2.scss b/src/lib/scss/custom/plugins/_select2.scss
index 5c9c2faf..26616ebf 100644
--- a/src/lib/scss/custom/plugins/_select2.scss
+++ b/src/lib/scss/custom/plugins/_select2.scss
@@ -1,6 +1,6 @@
-//
-// Select 2
-//
+/*  */
+/* Select 2 */
+/*  */
 
 .select2-container {
     .select2-selection--single {
@@ -162,7 +162,7 @@
     }
 }
 
-// ajax select
+/* ajax select */
 
 .select2-result-repository__avatar {
     float: left;
@@ -213,7 +213,7 @@
     overflow: hidden;
 }
 
-// templating-select
+/* templating-select */
 
 .img-flag {
     margin-right: 7px;
@@ -224,4 +224,4 @@
 
 .select2-container--default .select2-results__option--selected {
     background-color: var(--#{$prefix}tertiary-bg);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_session-timeout.scss b/src/lib/scss/custom/plugins/_session-timeout.scss
index 9908fd1e..b4ce493f 100644
--- a/src/lib/scss/custom/plugins/_session-timeout.scss
+++ b/src/lib/scss/custom/plugins/_session-timeout.scss
@@ -1,6 +1,6 @@
-//
-// session-timeout.scss
-//
+/*  */
+/* session-timeout.scss */
+/*  */
 
 #session-timeout-dialog {
     .close {
@@ -17,4 +17,4 @@
         color: $danger;
         box-shadow: none;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_sparkline-chart.scss b/src/lib/scss/custom/plugins/_sparkline-chart.scss
index 707152ea..24f07a4d 100644
--- a/src/lib/scss/custom/plugins/_sparkline-chart.scss
+++ b/src/lib/scss/custom/plugins/_sparkline-chart.scss
@@ -1,6 +1,6 @@
-//
-// sparkline.scss
-//
+/*  */
+/* sparkline.scss */
+/*  */
 
 .jqstooltip {
   box-sizing: content-box;
diff --git a/src/lib/scss/custom/plugins/_sweatalert2.scss b/src/lib/scss/custom/plugins/_sweatalert2.scss
index f452008a..4a1e9cb9 100644
--- a/src/lib/scss/custom/plugins/_sweatalert2.scss
+++ b/src/lib/scss/custom/plugins/_sweatalert2.scss
@@ -1,6 +1,6 @@
-//
-//  Sweetalert2
-//
+/*  */
+/* Sweetalert2 */
+/*  */
 
 .swal2-container {
     .swal2-title {
@@ -80,4 +80,4 @@
 
 div:where(.swal2-container) div:where(.swal2-popup) {
     color: var(--#{$prefix}secondary-color);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_switch.scss b/src/lib/scss/custom/plugins/_switch.scss
index 41c54271..44df9cfe 100644
--- a/src/lib/scss/custom/plugins/_switch.scss
+++ b/src/lib/scss/custom/plugins/_switch.scss
@@ -1,6 +1,6 @@
-//
-//  Sweetalert2
-//
+/*  */
+/* Sweetalert2 */
+/*  */
 
 /* CSS Switch */
 input[switch] {
diff --git a/src/lib/scss/custom/plugins/_table-editable.scss b/src/lib/scss/custom/plugins/_table-editable.scss
index 853efee5..5be7f23a 100644
--- a/src/lib/scss/custom/plugins/_table-editable.scss
+++ b/src/lib/scss/custom/plugins/_table-editable.scss
@@ -1,7 +1,7 @@
-
-//
-// Table editable
-//
+
+/*  */
+/* Table editable */
+/*  */
 
 .table-edits{
   input, select{
@@ -16,4 +16,4 @@
       border-color: $input-focus-border-color;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_toastr.scss b/src/lib/scss/custom/plugins/_toastr.scss
index c2071c7a..872f8c53 100644
--- a/src/lib/scss/custom/plugins/_toastr.scss
+++ b/src/lib/scss/custom/plugins/_toastr.scss
@@ -1,7 +1,7 @@
-
-//
-// toastr.scss
-//
+
+/*  */
+/* toastr.scss */
+/*  */
 
 
 /* =============
@@ -35,7 +35,7 @@
 }
 
 
-// for error
+/* for error */
 
 .toast-error {
     background-color: rgba($danger,0.8);
@@ -47,4 +47,4 @@
     background-color: var(--#{$prefix}tertiary-bg);
     margin-bottom: 0;
     border: 1px solid var(--#{$prefix}border-color);
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/_vector-maps.scss b/src/lib/scss/custom/plugins/_vector-maps.scss
index 94760f12..a65fdf0c 100644
--- a/src/lib/scss/custom/plugins/_vector-maps.scss
+++ b/src/lib/scss/custom/plugins/_vector-maps.scss
@@ -1,6 +1,6 @@
-//
-// vector-maps.scss
-//
+/*  */
+/* vector-maps.scss */
+/*  */
 
 .jvectormap-label {
     border: none;
@@ -9,4 +9,4 @@
     font-family: $font-family-base;
     font-size: $font-size-base;
     padding: 5px 8px;
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss b/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
index e8f935cc..5ac12bb6 100644
--- a/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
+++ b/src/lib/scss/custom/plugins/icons/_materialdesignicons.scss
@@ -1,4 +1,4 @@
-/* MaterialDesignIcons.com */
+/* MaterialDesignIcons.com */
 @font-face {
   font-family: "Material Design Icons";
   src: url("/fonts/materialdesignicons-webfont.eot?v=5.8.55");
@@ -23691,4 +23691,4 @@
   }
 }
 
-/*# sourceMappingURL=materialdesignicons.css.map */
\ No newline at end of file
+/*# sourceMappingURL=materialdesignicons.css.map */
diff --git a/src/lib/scss/custom/structure/_footer.scss b/src/lib/scss/custom/structure/_footer.scss
index 133f1db0..b6521f31 100644
--- a/src/lib/scss/custom/structure/_footer.scss
+++ b/src/lib/scss/custom/structure/_footer.scss
@@ -1,6 +1,6 @@
-// 
-// _footer.scss
-// 
+/*  */
+/* _footer.scss */
+/*  */
 
 .footer {
     bottom: 0;
@@ -17,7 +17,7 @@
     }
 }
   
-// Enlarge menu
+/* Enlarge menu */
 .vertical-collpsed {
     .footer {
         left: $sidebar-collapsed-width;
@@ -32,4 +32,4 @@ body[data-layout="horizontal"] {
     .footer {
         left: 0 !important;
     }  
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/structure/_horizontal-nav.scss b/src/lib/scss/custom/structure/_horizontal-nav.scss
index 80ab4b23..486d56cc 100644
--- a/src/lib/scss/custom/structure/_horizontal-nav.scss
+++ b/src/lib/scss/custom/structure/_horizontal-nav.scss
@@ -1,6 +1,6 @@
-// 
-// _horizontal.scss
-// 
+/*  */
+/* _horizontal.scss */
+/*  */
 
 .topnav {
     background: var(--#{$prefix}topnav-bg);
@@ -86,7 +86,7 @@
 
         .dropdown {
             &.mega-dropdown{
-                // position: static;
+                /* position: static; */
                 .mega-dropdown-menu{
                     left: 0px;
                     right: auto;
@@ -267,7 +267,7 @@
     }
 }
 
-// Colored Topbar 
+/* Colored Topbar  */
 
 body[data-layout="horizontal"][data-topbar="colored"] {
     #page-topbar{
diff --git a/src/lib/scss/custom/structure/_layouts.scss b/src/lib/scss/custom/structure/_layouts.scss
index b9652463..fe1611c5 100644
--- a/src/lib/scss/custom/structure/_layouts.scss
+++ b/src/lib/scss/custom/structure/_layouts.scss
@@ -1,6 +1,6 @@
-// 
-// _layouts.scss
-// 
+/*  */
+/* _layouts.scss */
+/*  */
 
 body[data-layout-size="boxed"] {
     background-color: var(--#{$prefix}boxed-body-bg);
@@ -29,7 +29,7 @@ body[data-layout-size="boxed"] {
 }
 
 
-// Horizontal Boxed Layout
+/* Horizontal Boxed Layout */
 
 body[data-layout="horizontal"][data-layout-size="boxed"]{
     #page-topbar, #layout-wrapper, .footer {
@@ -40,7 +40,7 @@ body[data-layout="horizontal"][data-layout-size="boxed"]{
     }
 }
 
-// Scrollable layout
+/* Scrollable layout */
 
 body[data-layout-scrollable="true"] {
     @media (min-width: 992px) {
diff --git a/src/lib/scss/custom/structure/_page-head.scss b/src/lib/scss/custom/structure/_page-head.scss
index 050d569d..d12c227b 100644
--- a/src/lib/scss/custom/structure/_page-head.scss
+++ b/src/lib/scss/custom/structure/_page-head.scss
@@ -1,6 +1,6 @@
-// 
-// Page-title
-// 
+/*  */
+/* Page-title */
+/*  */
 
 .page-title-box {
     padding-bottom: $grid-gutter-width;
@@ -15,4 +15,4 @@
         font-weight: 600;
         font-size: 16px !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/structure/_right-sidebar.scss b/src/lib/scss/custom/structure/_right-sidebar.scss
index c45beba1..875c5258 100644
--- a/src/lib/scss/custom/structure/_right-sidebar.scss
+++ b/src/lib/scss/custom/structure/_right-sidebar.scss
@@ -1,6 +1,6 @@
-//
-// right-sidebar.scss
-//
+/*  */
+/* right-sidebar.scss */
+/*  */
 
 .right-bar {
     background-color: var(--#{$prefix}secondary-bg);
@@ -31,7 +31,7 @@
     }
 }
 
-// Rightbar overlay
+/* Rightbar overlay */
 .rightbar-overlay {
     background-color: rgba($dark, 0.55);
     position: absolute;
@@ -60,4 +60,4 @@
             height: auto !important;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/structure/_topbar.scss b/src/lib/scss/custom/structure/_topbar.scss
index 58e436b8..b5d0a578 100644
--- a/src/lib/scss/custom/structure/_topbar.scss
+++ b/src/lib/scss/custom/structure/_topbar.scss
@@ -1,6 +1,6 @@
-// 
-// _header.scss
-// 
+/*  */
+/* _header.scss */
+/*  */
 
 #page-topbar {
     position: fixed;
@@ -32,6 +32,10 @@
     padding: 0 1.5rem;
     text-align: center;
     width: $navbar-brand-box-width;
+    height: $header-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .logo {
@@ -71,7 +75,7 @@
     }
 }
 
-// Mega menu
+/* Mega menu */
 
 .megamenu-list {
     li{
@@ -147,7 +151,7 @@
     }
 }
 
-// Dropdown with Icons
+/* Dropdown with Icons */
 .dropdown-icon-item {
     display: block;
     border-radius: 3px;
@@ -174,7 +178,7 @@
     }
 }
 
-// Full Screen
+/* Full Screen */
 .fullscreen-enable {
     [data-bs-toggle="fullscreen"] {
         .bx-fullscreen::before {
@@ -287,4 +291,4 @@ body[data-layout="horizontal"] {
             margin-top: 15px;
         }    
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/custom/structure/_vertical.scss b/src/lib/scss/custom/structure/_vertical.scss
index 2764456a..c898213a 100644
--- a/src/lib/scss/custom/structure/_vertical.scss
+++ b/src/lib/scss/custom/structure/_vertical.scss
@@ -1,6 +1,6 @@
-//
-// _menu.scss
-// 
+/*  */
+/* _menu.scss */
+/*  */
 
 .metismenu {
     margin: 0;
@@ -202,7 +202,7 @@
     }
 }
 
-// Enlarge menu
+/* Enlarge menu */
 .vertical-collpsed {
 
     .main-content {
@@ -223,7 +223,7 @@
         }
     }
 
-    // Side menu
+    /* Side menu */
     .vertical-menu {
         position: absolute;
         width: $sidebar-collapsed-width !important;
@@ -248,7 +248,7 @@
             height: auto !important;
         }
 
-        // Sidebar Menu
+        /* Sidebar Menu */
         #sidebar-menu {
 
             .menu-title,
@@ -423,14 +423,14 @@ body[data-sidebar="dark"] {
         }
     }
 
-    // Enlarge menu
+    /* Enlarge menu */
     &.vertical-collpsed {
-        // min-height: 1760px;
+        /* min-height: 1760px; */
 
-        // Side menu
+        /* Side menu */
         .vertical-menu {
 
-            // Sidebar Menu
+            /* Sidebar Menu */
             #sidebar-menu {
 
                 >ul {
@@ -515,7 +515,7 @@ body[data-layout="horizontal"] {
     }
 }
 
-// Compact Sidebar
+/* Compact Sidebar */
 
 body[data-sidebar-size="small"] {
     .navbar-brand-box {
@@ -597,7 +597,7 @@ body[data-sidebar-size="small"] {
     }
 }
 
-// colored sidebar
+/* colored sidebar */
 
 body[data-sidebar="colored"] {
     .vertical-menu {
@@ -728,4 +728,4 @@ body[data-sidebar="colored"] {
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/lib/scss/icons.scss b/src/lib/scss/icons.scss
index 22c3d12f..7456c90c 100644
--- a/src/lib/scss/icons.scss
+++ b/src/lib/scss/icons.scss
@@ -1,4 +1,4 @@
-/*
+/*
 Template Name: Skote - Admin & Dashboard Template
 Author: Themesbrand
 Version: 4.1.0.
@@ -7,5 +7,5 @@ Contact: themesbrand@gmail.com
 File: Icons Css File
 */
 
-// Plugins
-@import "custom/plugins/icons";
\ No newline at end of file
+/* Plugins */
+@import "custom/plugins/icons";
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index b1ca4c58..279d7100 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -1,271 +1,249 @@
 <script>
-  import Link from 'svelte-link';
-  import { _ } from 'svelte-i18n'
-  import {
-    Row,
-    Col,
-    CardBody,
-    Card,
-    Container,
-    Form,
-    Label,
-    Input,
-    Button,
-    Alert
-  } from '@sveltestrap/sveltestrap';
-  import Headtitle from '$lib/common/shared/HeadTitle.svelte';
-  import { getToken } from '$lib/services/auth-service.js';
-  import { goto } from '$app/navigation';
-  import { page } from '$app/stores';
-  import {
-    PUBLIC_SERVICE_URL,
-    PUBLIC_LIVECHAT_HOST,
-    PUBLIC_LOGO_URL,
-    PUBLIC_LOGIN_IMAGE,
-    PUBLIC_BRAND_NAME,
-    PUBLIC_ADMIN_USERNAME,
-    PUBLIC_ADMIN_PASSWORD,
-    PUBLIC_COMPANY_NAME,
-    PUBLIC_ALLOW_SIGNUP,
-    PUBLIC_AUTH_ENABLE_SSO,
-    PUBLIC_AUTH_ENABLE_FIND_PWD,
-  } from '$env/static/public';
-  import { onMount } from 'svelte';
-  import { resetStorage } from '$lib/helpers/store';
-
-  let username = PUBLIC_ADMIN_USERNAME;
-  let password = PUBLIC_ADMIN_PASSWORD;
-  let isOpen = false;
-  let msg = '';
-  let status = '';
-  let isSubmitting = false;
-  let isRememberMe = false;
-
-  onMount(() => {
-    const userName = localStorage.getItem('user_name');
-    isRememberMe = userName !== null;
-    if(isRememberMe){
-      username = userName || '';
-    }
-  });
-  function handleRememberMe(){
-    if(isRememberMe){
-      localStorage.setItem("user_name", username);
-    }
-    else {
-      localStorage.removeItem("user_name");
-    }
-  }
-
-  /** @param {any} e */
-  async function onSubmit(e) {
-    isSubmitting = true;
-    handleRememberMe();
-    e.preventDefault();
-    await getToken(username, password, '', () => {
-      isOpen = true;
-      msg = 'Authentication success';
-      status = 'success';
-      const redirectUrl = $page.url.searchParams.get('redirect');
-      isSubmitting = false;
-      resetStorage();
-      if (redirectUrl) {
-        window.location.href = decodeURIComponent(redirectUrl);
-      } else {
-        goto('page/dashboard');
-      }
-    }, () => {
-      isSubmitting = false;
-      isOpen = true;
-      status = 'danger';
-      msg = 'Incorrect user name or password.'
-      setTimeout(() => {
-        isOpen = false;
-        status = '';
-        msg = '';
-      }, 3000);
-    });
-    isSubmitting = false;
-  }
-
-  function onPasswordToggle() {
-    const x = document.getElementById('user-password');
-    if (!x) return;
-
-    if (x.type === 'password') {
-      x.type = 'text';
-      const icon = document.getElementById('password-eye-icon');
-      icon.className = 'mdi mdi-eye-off-outline';
-    } else {
-      x.type = 'password';
-      const icon = document.getElementById('password-eye-icon');
-      icon.className = 'mdi mdi-eye-outline';
-    }
-  }
+  import { _ } from 'svelte-i18n';
+  import Headtitle from '$lib/common/shared/HeadTitle.svelte';
+  import { getToken } from '$lib/services/auth-service.js';
+  import { goto } from '$app/navigation';
+  import { page } from '$app/state';
+  import {
+    PUBLIC_SERVICE_URL,
+    PUBLIC_LIVECHAT_HOST,
+    PUBLIC_LOGO_URL,
+    PUBLIC_LOGIN_IMAGE,
+    PUBLIC_BRAND_NAME,
+    PUBLIC_ADMIN_USERNAME,
+    PUBLIC_ADMIN_PASSWORD,
+    PUBLIC_COMPANY_NAME,
+    PUBLIC_ALLOW_SIGNUP,
+    PUBLIC_AUTH_ENABLE_SSO,
+    PUBLIC_AUTH_ENABLE_FIND_PWD,
+  } from '$env/static/public';
+  import { onMount } from 'svelte';
+  import { resetStorage } from '$lib/helpers/store';
+
+  let username = $state(PUBLIC_ADMIN_USERNAME);
+  let password = $state(PUBLIC_ADMIN_PASSWORD);
+  let isOpen = $state(false);
+  let msg = $state('');
+  let status = $state('');
+  let isSubmitting = $state(false);
+  let isRememberMe = $state(false);
+  let showPassword = $state(false);
+
+  onMount(() => {
+    const userName = localStorage.getItem('user_name');
+    isRememberMe = userName !== null;
+    if (isRememberMe) {
+      username = userName || '';
+    }
+  });
+
+  function handleRememberMe() {
+    if (isRememberMe) {
+      localStorage.setItem('user_name', username);
+    } else {
+      localStorage.removeItem('user_name');
+    }
+  }
+
+  /** @param {SubmitEvent} e */
+  async function onSubmit(e) {
+    isSubmitting = true;
+    handleRememberMe();
+    e.preventDefault();
+    await getToken(username, password, '', () => {
+      isOpen = true;
+      msg = 'Authentication success';
+      status = 'success';
+      const redirectUrl = page.url.searchParams.get('redirect');
+      isSubmitting = false;
+      resetStorage();
+      if (redirectUrl) {
+        window.location.href = decodeURIComponent(redirectUrl);
+      } else {
+        goto('page/dashboard');
+      }
+    }, () => {
+      isSubmitting = false;
+      isOpen = true;
+      status = 'danger';
+      msg = 'Incorrect user name or password.';
+      setTimeout(() => {
+        isOpen = false;
+        status = '';
+        msg = '';
+      }, 3000);
+    });
+    isSubmitting = false;
+  }
+
+  function onPasswordToggle() {
+    showPassword = !showPassword;
+  }
 </script>
 
 <Headtitle title="Login" />
 <div class="modern-auth-wrapper">
 
-
-	<Container class="auth-container">
-		<Row class="justify-content-center align-items-center min-vh-100">
-			<Col md={10} lg={8} xl={6}>
-				<div class="auth-card-wrapper">
-					<Card class="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>
-									</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>
-							</div>
-							<div class="auth-illustration">
-								<img src={PUBLIC_LOGIN_IMAGE} alt="Login Illustration" class="illustration-img" />
-							</div>
-						</div>
-
-						<!-- Form Section -->
-						<CardBody class="auth-form-section">
-							<Alert {isOpen} color={status} class="modern-alert">{msg}</Alert>
-
-							<Form class="auth-form" on:submit={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>
-										<Input
-											type="text"
-											class="form-control modern-input"
-											id="username"
-											placeholder="Enter your username"
-											disabled={isSubmitting}
-											bind:value={username}
-										/>
-									</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>
-										<Input
-											type="password"
-											class="form-control modern-input password-input"
-											id="user-password"
-											placeholder="Enter your password"
-											disabled={isSubmitting}
-											aria-label="Password"
-											bind:value={password}
-										/>
-										<button
-											type="button"
-											class="password-toggle"
-											disabled={isSubmitting}
-											on:click={() => onPasswordToggle()}
-										>
-											<i id="password-eye-icon" class="mdi mdi-eye-outline" />
-										</button>
-									</div>
-								</div>
-
-								<div class="form-options">
-									<div class="remember-me">
-										<input
-											class="form-check-input"
-											type="checkbox"
-											id="remember-check"
-											disabled={isSubmitting}
-											bind:checked={isRememberMe}
-										/>
-										<Label class="form-check-label" for="remember-check">Remember me</Label>
-									</div>
-									{#if PUBLIC_AUTH_ENABLE_FIND_PWD == 'true'}
-									<a href="recoverpw" class="forgot-password">
-										Forgot password?
-									</a>
-									{/if}
-								</div>
-
-								<div class="login-button-wrapper">
-									<Button
-										color="primary"
-										disabled={isSubmitting}
-										class="login-btn"
-										type="submit"
-									>
-										{#if isSubmitting}
-											<i class="mdi mdi-loading mdi-spin me-2"></i>
-											Signing in...
-										{:else}
-											<i class="mdi mdi-login me-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>
-
-									<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>
-								{/if}
-							</Form>
-						</CardBody>
-					</Card>
-
-					<!-- Footer Section -->
-					<div class="auth-footer">
-						{#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>
-						{/if}
-
-						<p class="copyright-text">
-							Supported by © {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}
-						</p>
-					</div>
-				</div>
-			</Col>
-		</Row>
-	</Container>
+  <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>
+                  </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>
+              </div>
+              <div class="auth-illustration">
+                <img src={PUBLIC_LOGIN_IMAGE} alt="Login Illustration" class="illustration-img" />
+              </div>
+            </div>
+
+            <!-- Form Section -->
+            <div class="card-body auth-form-section">
+              {#if isOpen}
+                <div class="alert alert-{status} modern-alert" 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>
+                    <input
+                      type="text"
+                      class="form-control modern-input"
+                      id="username"
+                      placeholder="Enter your username"
+                      disabled={isSubmitting}
+                      bind:value={username}
+                    />
+                  </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>
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      class="form-control modern-input password-input"
+                      id="user-password"
+                      placeholder="Enter your password"
+                      disabled={isSubmitting}
+                      aria-label="Password"
+                      bind:value={password}
+                    />
+                    <button
+                      type="button"
+                      class="password-toggle"
+                      aria-label="Toggle password visibility"
+                      disabled={isSubmitting}
+                      onclick={onPasswordToggle}
+                    >
+                      <i class="mdi {showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'}"></i>
+                    </button>
+                  </div>
+                </div>
+
+                <div class="form-options">
+                  <div class="remember-me">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      id="remember-check"
+                      disabled={isSubmitting}
+                      bind:checked={isRememberMe}
+                    />
+                    <label class="form-check-label" for="remember-check">Remember me</label>
+                  </div>
+                  {#if PUBLIC_AUTH_ENABLE_FIND_PWD == 'true'}
+                  <a href="recoverpw" class="forgot-password">
+                    Forgot password?
+                  </a>
+                  {/if}
+                </div>
+
+                <div class="login-button-wrapper">
+                  <button
+                    type="submit"
+                    class="btn btn-primary login-btn"
+                    disabled={isSubmitting}
+                  >
+                    {#if isSubmitting}
+                      <i class="mdi mdi-loading mdi-spin me-2"></i>
+                      Signing in...
+                    {:else}
+                      <i class="mdi mdi-login me-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>
+
+                  <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>
+                {/if}
+              </form>
+            </div>
+          </div>
+
+          <!-- Footer Section -->
+          <div class="auth-footer">
+            {#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>
+            {/if}
+
+            <p class="copyright-text">
+              Supported by © {new Date().getFullYear()} {PUBLIC_COMPANY_NAME}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <style>
@@ -287,6 +265,7 @@
 	}
 
 	.auth-card-wrapper {
+		padding: 2rem 0;
 		animation: slideInUp 0.8s ease-out;
 	}
 
@@ -464,7 +443,7 @@
 		line-height: 1;
 	}
 
-	:global(.modern-input) {
+	.modern-input {
 		width: 100%;
 		padding-left: 3.25rem !important; /* extra left space for input icon to avoid overlap */
 		padding-right: 1rem !important;
@@ -478,18 +457,18 @@
 		z-index: 1;
 	}
 
-	:global(.password-wrapper .modern-input) {
+	.password-wrapper .modern-input {
 		padding-right: 3rem !important;
 	}
 
-	:global(.modern-input:focus) {
+	.modern-input:focus {
 		border-color: #0065a1 !important;
 		box-shadow: 0 0 0 0.2rem rgba(0, 101, 161, 0.15) !important;
 		background: var(--bs-white) !important;
 		outline: none;
 	}
 
-	:global(.modern-input::placeholder) {
+	.modern-input::placeholder {
 		color: var(--bs-gray-400);
 	}
 
@@ -759,11 +738,6 @@
 		margin-bottom: 0;
 	}
 
-	.copyright-text i {
-		color: #e74c3c;
-		animation: heartbeat 1.5s ease-in-out infinite;
-	}
-
 	@keyframes heartbeat {
 		0%, 100% {
 			transform: scale(1);
@@ -779,18 +753,18 @@
 			color: var(--bs-gray-300);
 		}
 
-		:global(.modern-input) {
+		.modern-input {
 			background: var(--bs-gray-800);
 			border-color: var(--bs-gray-600) !important;
 			color: var(--bs-white);
 		}
 
-		:global(.modern-input:focus) {
+		.modern-input:focus {
 			background: var(--bs-gray-800);
 			border-color: #0065a1 !important;
 		}
 
-		:global(.modern-input::placeholder) {
+		.modern-input::placeholder {
 			color: var(--bs-gray-400);
 		}
 
@@ -824,4 +798,4 @@
 			color: var(--bs-gray-400);
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/(authentication)/recoverpw/+page.svelte b/src/routes/(authentication)/recoverpw/+page.svelte
index 836d5716..a9eb2da9 100644
--- a/src/routes/(authentication)/recoverpw/+page.svelte
+++ b/src/routes/(authentication)/recoverpw/+page.svelte
@@ -1,6 +1,4 @@
 <script>
-	import Link from 'svelte-link';
-	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
 	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 </script>
@@ -8,43 +6,43 @@
 <Headtitle title="Recover Password" />
 
 <div class="account-pages my-5 pt-sm-5">
-	<Container>
-		<Row class="justify-content-center">
-			<Col md={8} lg={6} xl={5}>
-				<Card class="overflow-hidden">
+	<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">
-						<Row>
-							<Col xs={7}>
+						<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>
-							</Col>
-							<Col xs={5} class="align-self-end">
-								<img src='images/profile-img.png' alt="" class="img-fluid" />
-							</Col>
-						</Row>
+							</div>
+							<div class="col-5 align-self-end">
+								<img src="images/profile-img.png" alt="" class="img-fluid" />
+							</div>
+						</div>
 					</div>
-					<CardBody class="pt-0">
+					<div class="card-body pt-0">
 						<div>
-							<Link href="page/dashboard">
+							<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>
-							</Link>
+							</a>
 						</div>
 
 						<div class="p-2">
-							<Alert color="success" class="text-center mb-4" role="alert">
+							<div class="alert alert-success text-center mb-4" role="alert">
 								Enter your Email and instructions will be sent to you!
-							</Alert>
+							</div>
 
-							<Form class="form-horizontal" action="page/dashboard">
+							<form class="form-horizontal" action="page/dashboard">
 								<div class="mb-3">
-									<Label for="useremail" class="form-label">Email</Label>
-									<Input
+									<label for="useremail" class="form-label">Email</label>
+									<input
 										type="email"
 										class="form-control"
 										id="useremail"
@@ -53,25 +51,25 @@
 								</div>
 
 								<div class="text-end">
-									<Button color="primary" class="w-md waves-effect waves-light" type="submit"
-										>Reset</Button
-									>
+									<button type="submit" class="btn btn-primary w-md waves-effect waves-light">
+										Reset
+									</button>
 								</div>
-							</Form>
+							</form>
 						</div>
-					</CardBody>
-				</Card>
+					</div>
+				</div>
 				<div class="mt-5 text-center">
 					<p>
 						Remember It ?
-						<Link href="login" class="fw-medium text-primary">Sign In here</Link>
+						<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" /> by Open Source community
+						<i class="mdi mdi-heart text-danger"></i> by Open Source community
 					</p>
 				</div>
-			</Col>
-		</Row>
-	</Container>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
index 3848db43..e1767627 100644
--- a/src/routes/(authentication)/register/+page.svelte
+++ b/src/routes/(authentication)/register/+page.svelte
@@ -1,29 +1,29 @@
 <script>
-	import Link from 'svelte-link';
-	import { Row, Col, CardBody, Card, Container, Form, Label, Input, Button, Alert } from '@sveltestrap/sveltestrap';
 	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { goto } from '$app/navigation';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 
-	let username = '';
-	let emailid = '';
-	let password = '';
-	let isOpen = false;
-	let msg = '';
-	let status = '';
+	let username = $state('');
+	let emailid = $state('');
+	let password = $state('');
+	let isOpen = $state(false);
+	let msg = $state('');
+	let status = $state('');
+
+	/** @param {SubmitEvent} e */
 	async function onSubmit(e) {
 		e.preventDefault();
 		try {
-			if(username.trim() == "" || emailid.trim()=="" || password.trim() == ""){
+			if (username.trim() === '' || emailid.trim() === '' || password.trim() === '') {
 				isOpen = true;
 				msg = 'All Fields are required';
 				status = 'danger';
 				return false;
 			}
-			
+
 			const response = await fetch('https://api-node.themesbrand.website/auth/signup', {
 				method: 'POST',
-				body: JSON.stringify({ email: emailid, password: password,username: username}),
+				body: JSON.stringify({ email: emailid, password: password, username: username }),
 				headers: {
 					'Content-Type': 'application/json'
 				}
@@ -36,9 +36,9 @@
 				isOpen = true;
 				msg = 'Registration success. Redirecting...';
 				status = 'success';
-				setTimeout(function() {
-					goto("login");
-				},1500)
+				setTimeout(function () {
+					goto('login');
+				}, 1500);
 			} else {
 				isOpen = true;
 				msg = 'error';
@@ -57,79 +57,78 @@
 <Headtitle title="Register" />
 
 <div class="account-pages my-5 pt-sm-5">
-	<Container>
-		<Row class="justify-content-center">
-			<Col md={8} lg={8} xl={5}>
-				<Card class="overflow-hidden">
+	<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">
-						<Row>
-							<Col class="col-7">
+						<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>
-							</Col>
-							<Col class="col-5 align-self-end">
-								<img src='images/profile-img.png' alt="" class="img-fluid" />
-							</Col>
-						</Row>
+							</div>
+							<div class="col-5 align-self-end">
+								<img src="images/profile-img.png" alt="" class="img-fluid" />
+							</div>
+						</div>
 					</div>
-					<CardBody class="pt-0">
+					<div class="card-body pt-0">
 						<div>
-							<Link href="page/dashboard">
+							<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>
-							</Link>
+							</a>
 						</div>
 						<div class="p-2">
-							<Alert {isOpen} color={status}>{msg}</Alert>
-							<Form class="needs-validation" on:submit={onSubmit}>
+							{#if isOpen}
+								<div class="alert alert-{status}" role="alert">{msg}</div>
+							{/if}
+							<form class="needs-validation" onsubmit={onSubmit}>
 								<div class="mb-3">
-									<Label for="useremail" class="form-label">Email</Label>
-									<Input
+									<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>
 								</div>
 
 								<div class="mb-3">
-									<Label for="username" class="form-label">Username</Label>
-									<Input
+									<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>
 								</div>
 
 								<div class="mb-3">
-									<Label for="userpassword" class="form-label">Password</Label>
-									<Input
+									<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>
 								</div>
 
 								<div class="mt-4 d-grid">
-									<Button color="primary" class="waves-effect waves-light" type="submit"
-										>Register</Button
-									>
+									<button type="submit" class="btn btn-primary waves-effect waves-light">
+										Register
+									</button>
 								</div>
 
 								<div class="mt-4 text-center">
@@ -137,45 +136,43 @@
 
 									<ul class="list-inline">
 										<li class="list-inline-item">
-											<Link href="#" class="social-list-item bg-primary text-white border-primary">
-												<i class="mdi mdi-facebook" />
-											</Link>
+											<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">
-											<Link href="#" class="social-list-item bg-info text-white border-info">
-												<i class="mdi mdi-twitter" />
-											</Link>
+											<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">
-											<Link href="#" class="social-list-item bg-danger text-white border-danger">
-												<i class="mdi mdi-google" />
-											</Link>
+											<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>
 								</div>
 
 								<div class="mt-4 text-center">
 									<p class="mb-0">
-										By registering you agree to the <Link href="#" class="text-primary"
-											>Terms of Use</Link
-										>
+										By registering you agree to the <button type="button" class="btn btn-link text-primary p-0 align-baseline">Terms of Use</button>
 									</p>
 								</div>
-							</Form>
+							</form>
 						</div>
-					</CardBody>
-				</Card>
+					</div>
+				</div>
 				<div class="mt-5 text-center">
 					<p>
 						Already have an account ?
-						<Link href="login" class="fw-medium text-primary">Login</Link>
+						<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" /> by Open Source community
+						<i class="mdi mdi-heart text-danger"></i> by Open Source community
 					</p>
 				</div>
-			</Col>
-		</Row>
-	</Container>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index d0fdd4d7..83d21385 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -1,52 +1,51 @@
 <script>
-    import Link from "svelte-link";
     import { fade } from 'svelte/transition';
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
-    import { 
-        PUBLIC_LOGO_URL, 
-        PUBLIC_BRAND_NAME, 
+    import {
+        PUBLIC_LOGO_URL,
+        PUBLIC_BRAND_NAME,
         PUBLIC_COMPANY_WEBSITE,
-        PUBLIC_HOME_SLOGAN, 
-        PUBLIC_HOME_IMAGE 
+        PUBLIC_HOME_SLOGAN,
+        PUBLIC_HOME_IMAGE
     } from '$env/static/public';
     import { onMount } from 'svelte';
 
-    let showHomeImage = false;
-    let showHomeSlogan = false;
-	onMount(async () => {
+    let showHomeImage = $state(false);
+    let showHomeSlogan = $state(false);
+
+    onMount(() => {
         showHomeImage = true;
         showHomeSlogan = true;
-	});    
+    });
 </script>
-  
+
 <HeadTitle title="{PUBLIC_BRAND_NAME} Workspace" />
 
-<Container>
-    <Row>
-        <Col class="mt-5 text-end">
-            <Link href={PUBLIC_COMPANY_WEBSITE} class="text-dark">              
+<div class="container">
+    <div class="row">
+        <div class="col mt-5 text-end">
+            <a href={PUBLIC_COMPANY_WEBSITE} class="text-dark">
                 <img
                     src={PUBLIC_LOGO_URL}
                     alt="logo"
                     height="50"
                     class="auth-logo-dark mx-auto"
                 />
-            </Link>                
-        </Col>
-    </Row>
-    <Row class="d-flex justify-content-center align-items-center" style="height: 60vh;">
-        <Col lg="12">
+            </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">
-                <Row class="justify-content-center mt-5">
-                    <Col sm="8">
+                <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}
-                    </Col>
-                </Row>
+                    </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 }}>
@@ -54,7 +53,7 @@
                     </p>
                 {/if}
             </div>
-        </Col>
-    </Row>
-</Container>
-  
+        </div>
+    </div>
+</div>
+
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index d30d913a..c3f1d8e7 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -1,11 +1,14 @@
 <script>
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import Error500 from '$lib/common/errors/error-500.svelte'
+
+    let status = $derived(page.status);
+    let errorMessage = $derived(page.error?.message ?? '');
 </script>
 
-{#if $page.status === 500 }
+{#if status === 500}
     <Error500 />
 {:else}
-    <h1>{$page.status} {$page.error.message}</h1>
+    <h1>{status} {errorMessage}</h1>
     <p>Sorry, something went wrong on our end. Please try again later.</p>
 {/if}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 783b44c7..b760cab1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,14 @@
 <script>
+	import '../app.css';
+	import '$lib/scss/bootstrap.scss';
+	import '$lib/scss/app.scss';
+	import '$lib/scss/icons.scss';
 	import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
 	import en from '$lib/langs/en.json';
+	import {
+		PUBLIC_PRIMARY_COLOR,
+		PUBLIC_SECONDARY_COLOR
+	} from '$env/static/public';
 
 	addMessages('en', en);
 
@@ -8,12 +16,32 @@
 		fallbackLocale: 'en',
 		initialLocale: getLocaleFromNavigator()
 	});
+
+	/** @type {Record<string, string>} */
+	const colorOverrides = {
+		...(PUBLIC_PRIMARY_COLOR   ? { '--bs-primary': PUBLIC_PRIMARY_COLOR, '--bs-primary-rgb': hexToRgb(PUBLIC_PRIMARY_COLOR) } : {}),
+		...(PUBLIC_SECONDARY_COLOR ? { '--bs-secondary': PUBLIC_SECONDARY_COLOR, '--bs-secondary-rgb': hexToRgb(PUBLIC_SECONDARY_COLOR) } : {}),
+	};
+
+	const styleOverride = Object.entries(colorOverrides).map(([k, v]) => `${k}:${v}`).join(';');
+
+	/**
+	 * Convert a hex color string to an "r, g, b" string for Bootstrap's rgb variables.
+	 * @param {string} hex
+	 * @returns {string}
+	 */
+	function hexToRgb(hex) {
+		const h = hex.replace('#', '');
+		const n = parseInt(h, 16);
+		return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
+	}
 </script>
 
+<svelte:head>
+	{#if styleOverride}
+		{@html `<style>:root { ${styleOverride} }</style>`}
+	{/if}
+</svelte:head>
+
 <slot />
 
-<style lang="scss">
-	@import '$lib/scss/bootstrap.scss';
-	@import '$lib/scss/app.scss';
-	@import '$lib/scss/icons.scss';
-</style>
\ No newline at end of file
diff --git a/src/routes/VerticalLayout/Footer.svelte b/src/routes/VerticalLayout/Footer.svelte
index 7c17d059..74ecb574 100644
--- a/src/routes/VerticalLayout/Footer.svelte
+++ b/src/routes/VerticalLayout/Footer.svelte
@@ -1,21 +1,19 @@
 <script>
-	import { Col, Container, Row } from '@sveltestrap/sveltestrap';
-    import { PUBLIC_COMPANY_NAME } from '$env/static/public'
-    import { _ } from 'svelte-i18n'  
-
+    import { PUBLIC_COMPANY_NAME } from '$env/static/public';
+    import { _ } from 'svelte-i18n';
 </script>
 
 <footer class="footer">
-    <Container fluid>
-        <Row>
-            <Col sm={6}>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-6">
                 {new Date().getFullYear()} © {PUBLIC_COMPANY_NAME}
-            </Col>
-            <Col sm={6}>
+            </div>
+            <div class="col-sm-6">
                 <div class="text-sm-end d-none d-sm-block">
                     {$_('Design & Developed by open source community')}
                 </div>
-            </Col>
-        </Row>
-    </Container>
+            </div>
+        </div>
+    </div>
 </footer>
\ No newline at end of file
diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
index 5c287874..f072f228 100644
--- a/src/routes/VerticalLayout/Header.svelte
+++ b/src/routes/VerticalLayout/Header.svelte
@@ -2,7 +2,6 @@
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-	import { Input } from '@sveltestrap/sveltestrap';
 	import LanguageDropdown from '$lib/common/dropdowns/LanguageDropdown.svelte';
 	import FullScreenDropdown from '$lib/common/dropdowns/FullScreenDropdown.svelte';
 	import NotificationDropdown from '$lib/common/dropdowns/NotificationDropdown.svelte';
@@ -12,28 +11,28 @@
 	import { globalEventStore, getTenantName } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
 
+	/**
+	 * @type {{
+	 *   user?: any,
+	 *   toggleRightBar?: () => void
+	 * }}
+	 */
+	let {
+		user = undefined,
+		toggleRightBar = () => {}
+	} = $props();
 
-	/** @type {any} */
-	export let user;
-
-	/** @type {() => void} */
-	export let toggleRightBar = () => {};
-
-	/** @type {string} */
-	let searchText = '';
-
-	/** @type {string} */
-    let tenantName = '';
-
-    onMount(() => {
-        tenantName = getTenantName();
-        const handler = (/** @type {any} */ e) => {
-            tenantName = e?.detail?.tenantName || getTenantName() || '';
-        };
-        window.addEventListener('tenantChanged', handler);
-        return () => window.removeEventListener('tenantChanged', handler);
-    });
+	let searchText = $state('');
+	let tenantName = $state('');
 
+	onMount(() => {
+		tenantName = getTenantName();
+		const handler = (/** @type {any} */ e) => {
+			tenantName = e?.detail?.tenantName || getTenantName() || '';
+		};
+		window.addEventListener('tenantChanged', handler);
+		return () => window.removeEventListener('tenantChanged', handler);
+	});
 
 	const toggleSideBar = () => {
 		if (browser) {
@@ -43,6 +42,7 @@
 			if (document.body.classList.contains('vertical-collpsed')) {
 				const menuElement = document.querySelector('#vertical-menu');
 				if (menuElement) {
+					// @ts-ignore
 					const instance = OverlayScrollbars(menuElement);
 					if (instance) {
 						instance.destroy();
@@ -51,8 +51,8 @@
 			} else {
 				const options = {
 					scrollbars: {
-						visibility: 'auto', // You can adjust the visibility ('auto', 'hidden', 'visible')
-						autoHide: 'move', // You can adjust the auto-hide behavior ('move', 'scroll', false)
+						visibility: 'auto',
+						autoHide: 'move',
 						autoHideDelay: 100,
 						dragScroll: true,
 						clickScroll: false,
@@ -62,40 +62,41 @@
 				};
 				const menuElement = document.querySelector('#vertical-menu');
 				if (menuElement) {
+					// @ts-ignore
 					OverlayScrollbars(menuElement, options);
 				}
 			}
 		}
 	};
 
-	/** @param {any} e */
+	/** @param {KeyboardEvent} e */
 	const search = (e) => {
 		if (e.key !== 'Enter') return;
 
 		globalEventStore.set({ name: GlobalEvent.Search, payload: searchText });
-	}
+	};
 </script>
 
 <header id="page-topbar">
 	<div class="navbar-header">
-		<div class="d-flex">
+		<div class="d-flex align-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="25" />
+						<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="40" />
+						<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="25" />
+						<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="40" />
+						<img src={PUBLIC_LOGO_URL} alt="" height="38" style="max-height: 38px; width: auto;" />
 					</span>
 				</a>
 			</div>
@@ -104,34 +105,35 @@
 				type="button"
 				class="btn btn-sm px-3 font-size-16 header-item waves-effect"
 				id="vertical-menu-btn"
-				on:click={() => toggleSideBar()}
+				aria-label="Toggle sidebar"
+				onclick={() => toggleSideBar()}
 			>
-				<i class="fa fa-fw fa-bars" />
+				<i class="fa fa-fw fa-bars"></i>
 			</button>
 
 			<!-- App Search-->
 			<form class="app-search d-none d-lg-block">
 				<div class="position-relative">
-					<Input
+					<input
 						type="text"
 						class="form-control"
 						placeholder="{$_('Search')}..."
 						maxlength={500}
 						bind:value={searchText}
-						on:keydown={e => search(e)}
+						onkeydown={e => search(e)}
 					/>
-					<span class="bx bx-search-alt" />
+					<span class="bx bx-search-alt"></span>
 				</div>
 			</form>
 		</div>
-		<div class="d-flex">
+		<div class="d-flex align-items-center">
 			{#if tenantName}
-                <span class="ms-2 me-2 align-self-center text-muted">Tenant: {tenantName}</span>
-            {/if}
+				<span class="ms-2 me-2 align-self-center text-muted">Tenant: {tenantName}</span>
+			{/if}
 			<LanguageDropdown />
 			<FullScreenDropdown />
 			<NotificationDropdown />
-			<ProfileDropdown user={user}/>
+			<ProfileDropdown {user} />
 		</div>
 	</div>
 </header>
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
index 93069ef3..bd8cdefc 100644
--- a/src/routes/VerticalLayout/Index.svelte
+++ b/src/routes/VerticalLayout/Index.svelte
@@ -10,16 +10,17 @@
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';
 	import Footer from './Footer.svelte';
-	
-	/** @type {import('$pluginTypes').PluginMenuDefModel[]} */
-	let menu;
 
-	/** @type {import("$userTypes").UserModel} */
-	let user;
+	let { children } = $props();
 
-	/** @type {boolean} */
-	let isLoading = false;
-	let hasError = false;
+	/** @type {import('$pluginTypes').PluginMenuDefModel[] | undefined} */
+	let menu = $state(undefined);
+
+	/** @type {import("$userTypes").UserModel | undefined} */
+	let user = $state(undefined);
+
+	let isLoading = $state(false);
+	let hasError = $state(false);
 
 	const toggleRightBar = () => {
 		if (browser) {
@@ -31,7 +32,7 @@
 		}
 	};
 
-	let closebar = () => {
+	const closebar = () => {
 		toggleRightBar();
 	};
 
@@ -48,19 +49,19 @@
 <GlobalHeader bind:isLoading={isLoading} bind:hasError={hasError} />
 
 <div id="layout-wrapper">
-	<Header user={user} toggleRightBar={() => toggleRightBar()} />
+	<Header {user} toggleRightBar={() => toggleRightBar()} />
 	{#if menu}
-	<Sidebar menu={menu}/>
+	<Sidebar {menu} />
 	{/if}
 	<div class="main-content">
 		<div class="page-content">
 			<div class="container-fluid" style="position: relative;">
 				<LoadingToComplete
 					spinnerSize={50}
-					isLoading={isLoading}
+					{isLoading}
 					isError={hasError}
 				/>
-				<slot />
+				{@render children?.()}
 			</div>
 		</div>
 		<Footer />
diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte
index 285ce2b4..6a71d73b 100644
--- a/src/routes/VerticalLayout/Sidebar.svelte
+++ b/src/routes/VerticalLayout/Sidebar.svelte
@@ -1,21 +1,24 @@
 <script>
-	// @ts-nocheck
-	import { onMount, afterUpdate } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { browser } from '$app/environment';
-	import { goto } from '$app/navigation';
+	import { goto, afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { _ } from 'svelte-i18n';
-	import Link from 'svelte-link';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { getCleanUrl } from '$lib/helpers/utils/common';
 
-	/** @type {import('$pluginTypes').PluginMenuDefModel[]} */
-	export let menu;
+	/**
+	 * @type {{
+	 *   menu: import('$pluginTypes').PluginMenuDefModel[]
+	 * }}
+	 */
+	let { menu } = $props();
 
-	// after routing complete call afterUpdate function
-	afterUpdate(() => {
+	// after routing complete, update active menu state
+	afterNavigate(async () => {
+		await tick();
 		removeActiveDropdown();
 		const curUrl = getCleanUrl($page.url.pathname);
 		if (curUrl) {
@@ -51,8 +54,8 @@
 
 	const options = {
 		scrollbars: {
-			visibility: 'auto', // You can adjust the visibility ('auto', 'hidden', 'visible')
-			autoHide: 'move', // You can adjust the auto-hide behavior ('move', 'scroll', false)
+			visibility: 'auto',
+			autoHide: 'move',
 			autoHideDelay: 100,
 			dragScroll: true,
 			clickScroll: false,
@@ -61,17 +64,20 @@
 		}
 	};
 
-	$: isEmbeddingPage = !!$page.params.embed && !!$page.params.embedType;
+	let isEmbeddingPage = $derived(!!$page.params.embed && !!$page.params.embedType);
 
-	$: if (browser) {
-		toggleEmbedPageSidebar(isEmbeddingPage);
-	}
+	$effect(() => {
+		if (browser) {
+			toggleEmbedPageSidebar(isEmbeddingPage);
+		}
+	});
 
 	onMount(async () => {
 		let scrollbarInstance = null;
 		const menuElement = document.querySelector('#vertical-menu');
 		// @ts-ignore
 		if (menuElement && !isEmbeddingPage) {
+			// @ts-ignore
 			scrollbarInstance = OverlayScrollbars(menuElement, options);
 		}
 
@@ -237,6 +243,7 @@
 			document.body.classList.add('sidebar-enable');
 
 			if (menuElement) {
+				// @ts-ignore
 				const instance = OverlayScrollbars(menuElement, options);
 				if (instance) {
 					instance.destroy();
@@ -247,28 +254,12 @@
 			document.body.classList.remove('sidebar-enable');
 
 			if (menuElement) {
+				// @ts-ignore
 				OverlayScrollbars(menuElement, options);
 			}
 		}
 	}
 
-	const menuItemScroll = () => {
-		if (browser) {
-			const curUrl = getCleanUrl($page.url.pathname);
-			const item = document.querySelector(".vertical-menu a[id='" + curUrl + "']");
-			// @ts-ignore
-			let offset = item?.offsetTop;
-			if (offset && offset > 300) {
-				offset = offset - 300;
-				const menuElement = document.getElementById('vertical-menu');
-				menuElement?.scrollTo({
-					top: offset,
-					behavior: 'smooth'
-				});
-			}
-		}
-	};
-
 	/** @param {string} url */
 	const goToPage = (url) => {
 		if (!url) {
@@ -296,32 +287,36 @@
 						<li class="menu-title" key="t-menu">{$_(item.label)}</li>
 					{:else if item.subMenu}
 						<li>
-							<Link class="has-arrow waves-effect clickable" href={null}>
-								<i class={item.icon} />
+							<!-- svelte-ignore a11y_invalid_attribute -->
+							<a href="javascript:void(0);" class="has-arrow waves-effect clickable">
+								<i class={item.icon}></i>
 								<span>{$_(item.label)}</span>
-							</Link>
+							</a>
 							<ul class="sub-menu mm-collapse">
 								{#each item.subMenu as subMenu}
 									{#if subMenu.isChildItem}
 										<li>
-											<Link class="has-arrow waves-effect clickable" href={null}>
+											<!-- svelte-ignore a11y_invalid_attribute -->
+											<a href="javascript:void(0);" class="has-arrow waves-effect clickable">
 												<span>{$_(subMenu.label)}</span>
-											</Link>
+											</a>
 											<ul class="sub-menu mm-collapse">
 												{#each subMenu.childItems as childItem}
 													<li>
-														<Link class="clickable" id={getCleanUrl(childItem.link)} href={null} on:click={() => goToPage(childItem.link)}>
+														<!-- svelte-ignore a11y_invalid_attribute -->
+														<a href="javascript:void(0);" class="clickable" id={getCleanUrl(childItem.link)} onclick={() => goToPage(childItem.link)}>
 															{$_(childItem.label)}
-														</Link>
+														</a>
 													</li>
 												{/each}
 											</ul>
 										</li>
 									{:else}
 										<li>
-											<Link class="clickable" id={getCleanUrl(subMenu.link)} href={null} on:click={() => goToPage(subMenu.link)}>
+											<!-- svelte-ignore a11y_invalid_attribute -->
+											<a href="javascript:void(0);" class="clickable" id={getCleanUrl(subMenu.link)} onclick={() => goToPage(subMenu.link)}>
 												{$_(subMenu.label)}
-											</Link>
+											</a>
 										</li>
 									{/if}
 								{/each}
@@ -329,10 +324,11 @@
 						</li>
 					{:else}
 						<li>
-							<Link class="waves-effect clickable" id={getCleanUrl(item.link)} href={null} on:click={() => goToPage(item.link)} >
-								<i class={item.icon} /> 
+							<!-- svelte-ignore a11y_invalid_attribute -->
+							<a href="javascript:void(0);" class="waves-effect clickable" id={getCleanUrl(item.link)} onclick={() => goToPage(item.link)}>
+								<i class={item.icon}></i>
 								<span>{$_(item.label)}</span>
-							</Link>
+							</a>
 						</li>
 					{/if}
 				{/each}
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index 3d9e8a2e..73515374 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -1,8 +1,7 @@
 <script>
     import { onMount } from 'svelte';
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
     import { getSettingDetail } from '$lib/services/setting-service';
-    import { getAgents } from '$lib/services/agent-service.js'
+    import { getAgents } from '$lib/services/agent-service.js';
 
     /** @type {import('$agentTypes').AgentFilter} */
     const filter = {
@@ -10,20 +9,20 @@
     };
 
     /** @type {import('$agentTypes').AgentModel[]} */
-    let agents = [];
-    let agentId = 'undefined';
+    let agents = $state([]);
+    let agentId = $state('undefined');
 
-	onMount(async () => {
+    onMount(async () => {
         const response = await getAgents(filter, true);
         agents = response?.items?.map(t => { return { ...t }; }) || [];
         const agentSettings = await getSettingDetail("Agent");
         // @ts-ignore
         agentId = agentSettings.hostAgentId;
-	});
+    });
 </script>
 
-<Container fluid>
-    <Row>
+<div class="container-fluid">
+    <div class="row">
         <div class="col-12">
             <div style="margin-top: 10vh; margin-left:10vw;">
                 {#each agents as agent}
@@ -34,27 +33,27 @@
                         name="agents"
                         id={agent.id}
                         value={agent.id}
-                        checked = {agentId == agent.id}
-                        on:click={() => agentId = agent.id}
+                        checked={agentId == agent.id}
+                        onclick={() => agentId = agent.id}
                     />
                     <label class="form-check-label" for={agent.id}>
                         {agent.name}
-                    </label>  
+                    </label>
                     <div class="mx-4">{agent.description}</div>
                 </div>
                 {/each}
-            </div>    
+            </div>
         </div>
-    </Row>
-    <Row class="text-center">
-        <Col>
+    </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 class="mdi mdi-chat"></i>
                     <span>Start Conversation</span>
                 </a>
             </div>
-        </Col>
-    </Row>
-</Container>
\ No newline at end of file
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/+page.svelte b/src/routes/chat/[agentId]/+page.svelte
index 1401029c..0ab1deeb 100644
--- a/src/routes/chat/[agentId]/+page.svelte
+++ b/src/routes/chat/[agentId]/+page.svelte
@@ -1,40 +1,37 @@
 <script>
     // This page is used to initialize a new conversation for client
-    import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { goto } from '$app/navigation';
     import { onMount } from 'svelte';
     import { newConversation } from '$lib/services/conversation-service.js';
-    import { getToken, setToken } from '$lib/services/auth-service.js'
+    import { getToken, setToken } from '$lib/services/auth-service.js';
     import { getUserStore } from '$lib/helpers/store.js';
     import { conversationStore } from '$lib/helpers/store.js';
-	import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
+    import { LEARNER_AGENT_ID, TRAINING_MODE } from '$lib/helpers/constants';
 
-    const params = $page.params;
-    
     /** @type {import('$conversationTypes').ConversationModel} */
-    let conversation;
-    let conversationId = "undefined";
+    let conversation = $state(/** @type {any} */ (undefined));
+    let conversationId = $state('undefined');
 
-    let agentId = params.agentId;
+    let agentId = $derived(page.params.agentId);
 
     onMount(async () => {
         let user = getUserStore();
-        if ($page.url.searchParams.has('token')) {
-            let token = $page.url.searchParams.get('token');
+        if (page.url.searchParams.has('token')) {
+            let token = page.url.searchParams.get('token');
             console.log("login as explicit token in query.");
-            await setToken(token);
+            await setToken(token || '');
         } else if (user.token) {
             console.log("login as existing account.");
         } else {
-            await getToken("guest@gmail.com", "123456", () => {
+            await getToken("guest@gmail.com", "123456", '', () => {
                 console.log("login as guest.");
             }, () => {});
         }
 
         conversation = conversationStore.get();
         if (!conversation.id || agentId != conversation.agent_id) {
-            // new conversation
+            // @ts-ignore
             conversation = await newConversation(agentId);
             conversationStore.put(conversation);
         }
@@ -53,14 +50,14 @@
     });
 </script>
 
-<Container fluid>
-    <Row class="text-center">
-        <Col style="padding: 50px;">
+<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>
-        </Col>
-    </Row>
-</Container>
\ No newline at end of file
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/+page.svelte b/src/routes/chat/[agentId]/[conversationId]/+page.svelte
index b42bae56..6e5a00f2 100644
--- a/src/routes/chat/[agentId]/[conversationId]/+page.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/+page.svelte
@@ -1,25 +1,27 @@
 <script>
-	import Chat from './chat-box.svelte';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 	import { myInfo } from '$lib/services/auth-service.js';
 	import { getAgent } from '$lib/services/agent-service.js';
-
-	const params = $page.params;
+	import Chat from './chat-box.svelte';
 
 	/** @type {import('$agentTypes').AgentModel} */
-	let agent;
+	let agent = $state(/** @type {any} */ (undefined));
 
 	/** @type {import('$userTypes').UserModel} */
-	let currentUser;
+	let currentUser = $state(/** @type {any} */ (undefined));
 
-    onMount(async () => {
-		currentUser = await myInfo();
+	let agentId = $derived(page.params.agentId);
+
+	$effect(() => {
+		if (agentId) {
+			loadData(agentId);
+		}
+	});
 
-		// get agent profile
-		let agentId = params.agentId;
-		agent = await getAgent(agentId);
-    });
+	async function loadData(/** @type {string} */ id) {
+		currentUser = await myInfo();
+		agent = await getAgent(id);
+	}
 </script>
 
 {#if currentUser}
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 5f22cc65..6e64cfe6 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
@@ -1,17 +1,21 @@
 <script>
 	import { directToAgentPage } from '$lib/helpers/utils/common';
 
-    /** @type {import('$agentTypes').AgentModel} */
-	export let agent;
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel
+     * }}
+     */
+	let { agent } = $props();
 </script>
 
 <div>
     <div class="chat-agent-row">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
         <h3
             class="text-primary fw-bold"
-            on:click={() => directToAgentPage(agent?.id)}
+            onclick={() => directToAgentPage(agent?.id)}
         >
             <span class="clickable">{agent?.name || ''}</span>
         </h3>
@@ -23,7 +27,7 @@
     </div>
     <div class="chat-agent-row">
         <div>
-            <span>{agent?.llm_config?.provider || ''}{!!agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
+            <span>{agent?.llm_config?.provider || ''}{agent?.llm_config?.provider ? ',': ''} {agent?.llm_config?.model || ''}</span>
         </div>
     </div>
     <div class="chat-agent-row">
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 2a828342..e938a0a1 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -1,20 +1,15 @@
 <script>
 	import { onMount, setContext, tick } from 'svelte';
+	import { get } from 'svelte/store';
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import Viewport from 'svelte-viewport-info';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import Swal from 'sweetalert2';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import _ from "lodash";
 	import moment from 'moment';
 	import { v4 as uuidv4 } from 'uuid';
-	import {
-		Dropdown,
-		DropdownToggle,
-		DropdownMenu,
-		DropdownItem
-	} from '@sveltestrap/sveltestrap';
 	import {
 		conversationStore,
 		conversationUserStateStore,
@@ -59,6 +54,7 @@
 	import { realtimeChat } from '$lib/services/realtime-chat-service';
 	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 { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { utcToLocal } from '$lib/helpers/datetime';
@@ -90,7 +86,6 @@
 		}
 	};
 
-	const params = $page.params;
 	const messageLimit = 100;
 	const screenWidthThreshold = 1024;
 	const chatWidthThreshold = 500;
@@ -99,133 +94,134 @@
 	const dialogCount = 100;
 	const USE_MESSAGE_QUEUE = false;
 	const MESSAGE_STORAGE_KEY = 'message_draft_';
-	
-	/** @type {import('$agentTypes').AgentModel} */
-	export let agent;
 
-	/** @type {import('$userTypes').UserModel} */
-	export let currentUser;
+	/**
+	 * @type {{
+	 *   agent: import('$agentTypes').AgentModel,
+	 *   currentUser: import('$userTypes').UserModel
+	 * }}
+	 */
+	let { agent, currentUser } = $props();
 
 	const messageStorage = new LocalStorageManager();
 
 	/** @type {string} */
-	let text = '';
-	let editText = '';
-	let bigText = '';
-	let botText = '';
-	let truncateMsgId = '';
-	let indication = '';
-	let mode = '';
-	let notificationText = '';
-	let successText = "Done";
-	let errorText = "Error";
-	let codeScript = '';
-	let codeLanguage = 'python';
+	let text = $state('');
+	let editText = $state('');
+	let bigText = $state('');
+	let botText = $state('');
+	let truncateMsgId = $state('');
+	let indication = $state('');
+	let mode = $state('');
+	let notificationText = $state('');
+	let successText = $state("Done");
+	let errorText = $state("Error");
+	let codeScript = $state('');
+	let codeLanguage = $state('python');
 
 	/** @type {number} */
 	let messageInputTimeout;
-	let sentMsgIdx = 0;
+	let sentMsgIdx = $state(0);
 
 	/** @type {string[]} */
-	let prevSentMsgs = [];
+	let prevSentMsgs = $state([]);
 	/** @type {string[]} */
-	let chatUtilOptions = [];
+	let chatUtilOptions = $state([]);
 	/** @type {string[]} */
-	let convTags = [];
-	let newTagText = '';
+	let convTags = $state([]);
+	let newTagText = $state('');
+
 
-	
 	/** @type {any[]} */
-    let scrollbars = [];
+    let scrollbars = $state([]);
 
 	/** @type {import('$conversationTypes').ConversationModel} */
-    let conversation;
+    let conversation = $state(/** @type {any} */ (undefined));
 
 	/** @type {import('$conversationTypes').EditBotMessageModel?} */
-	let editBotMsg;
+	let editBotMsg = $state(null);
 
 	/** @type {import('$conversationTypes').ChatResponseModel?} */
-	let lastBotMsg;
+	let lastBotMsg = $state(null);
 
 	/** @type {import('$conversationTypes').ChatResponseModel?} */
-	let lastMsg;
+	let lastMsg = $state(null);
 
     /** @type {import('$conversationTypes').ChatResponseModel[]} */
-    let dialogs = [];
+    let dialogs = $state([]);
 	/** @type {{ [s: string]: any; }} */
-	let groupedDialogs = [];
-	
+	let groupedDialogs = $state([]);
+
 	/** @type {import('$conversationTypes').ConversationContentLogModel[]} */
-	let contentLogs = [];
+	let contentLogs = $state([]);
 
 	/** @type {import('$conversationTypes').ConversationStateLogModel[]} */
-	let convStateLogs = [];
+	let convStateLogs = $state([]);
 
 	// /** @type {import('$conversationTypes').ConversationStateLogModel?} */
 	/** @type {Object?} */
-	let latestStateLog;
+	let latestStateLog = $state(null);
 
 	/** @type {import('$conversationTypes').MessageStateLogModel[]} */
-	let msgStateLogs = [];
+	let msgStateLogs = $state([]);
 
 	/** @type {import('$conversationTypes').AgentQueueLogModel[]} */
-	let agentQueueLogs = [];
+	let agentQueueLogs = $state([]);
 
 	/** @type {import('$conversationTypes').UserStateDetailModel[]} */
-	let userAddStates = [];
+	let userAddStates = $state([]);
 
 	/** @type {import('$userTypes').UserModel} */
-    let conversationUser;
+    let conversationUser = $state(/** @type {any} */ (undefined));
 
 	/** @type {number | undefined} */
 	let notificationTimeout;
 
 	/** @type {import('$conversationTypes').ChatResponseModel[]} */
-	let messageQueue = [];
+	let messageQueue = $state([]);
 
 	/** @type {boolean} */
-	let isLoadPersistLog = false;
-	let isLoadInstantLog = false;
-	let isPersistLogClosed = false; // initial condition
-	let isInstantLogClosed = false; // initial condition
-	let isOpenEditMsgModal = false;
-	let isOpenBigMsgModal = false;
-	let isOpenEditBotMsgModal = false;
-	let isOpenUserAddStateModal = false;
-	let isOpenTagModal = false;
-	let isOpenCodeScriptModal = false;
-	let isSendingMsg = false;
-	let isThinking = false;
-	let isListening = false;
-	let isLite = false;
-	let isFrame = false;
-	let loadEditor = false;
-	let loadTextEditor = false;
-	let autoScrollLog = false;
-	let disableAction = false;
-	let loadChatUtils = false;
-	let disableSpeech = false;
-	let isLoading = false;
-	let isCreatingNewConv = false;
-	let isDisplayNotification = false;
-	let isComplete = false;
-	let isError = false;
-	let copyClicked = false;
-	let isStreaming = false;
-	let isHandlingQueue = false;
-	
-	$: {
-		// const editor = lastBotMsg?.rich_content?.editor || '';
-		loadTextEditor = true; // TEXT_EDITORS.includes(editor) || !Object.values(EditorType).includes(editor);
-		loadEditor = !isSendingMsg && !isThinking && loadTextEditor && messageQueue.length === 0;
+	let isLoadPersistLog = $state(false);
+	let isLoadInstantLog = $state(false);
+	let isPersistLogClosed = $state(false); // initial condition
+	let isInstantLogClosed = $state(false); // initial condition
+	let isOpenEditMsgModal = $state(false);
+	let isOpenBigMsgModal = $state(false);
+	let isOpenEditBotMsgModal = $state(false);
+	let isOpenUserAddStateModal = $state(false);
+	let isOpenTagModal = $state(false);
+	let isOpenCodeScriptModal = $state(false);
+	let isHeaderMenuOpen = $state(false);
+	let isHeaderStatesOpen = $state(false);
+	/** @type {string} */
+	let openMsgActionId = $state('');
+	let isSendingMsg = $state(false);
+	let isThinking = $state(false);
+	let isListening = $state(false);
+	let isLite = $state(false);
+	let isFrame = $state(false);
+	let loadTextEditor = $state(false);
+	let autoScrollLog = $state(false);
+	let loadChatUtils = $state(false);
+	let disableSpeech = $state(false);
+	let isLoading = $state(false);
+	let isCreatingNewConv = $state(false);
+	let isDisplayNotification = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+	let copyClicked = $state(false);
+	let isStreaming = $state(false);
+	let isHandlingQueue = $state(false);
+
+	let loadEditor = $derived(!isSendingMsg && !isThinking && loadTextEditor && messageQueue.length === 0);
+	let disableAction = $derived(!ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !AgentExtensions.chatable(agent));
+
+	$effect(() => {
+		loadTextEditor = true;
 		if (loadEditor) {
 			focusChatTextArea();
 		}
-	}
-
-	$: {
-		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !AgentExtensions.chatable(agent);
-	}
+	});
 
 	setContext('chat-window-context', {
 		autoScrollToBottom: autoScrollToBottom
@@ -233,8 +229,10 @@
 	
 	onMount(async () => {
 		disableSpeech = navigator.userAgent.includes('Firefox');
-		conversation = await getConversation(params.conversationId, true);
-		dialogs = await getDialogs(params.conversationId, dialogCount);
+		// @ts-ignore
+		conversation = await getConversation(page.params.conversationId, true);
+		// @ts-ignore
+		dialogs = await getDialogs(page.params.conversationId, dialogCount);
 		conversationUser = conversation?.user;
 		convTags = conversation?.tags || [];
 
@@ -262,7 +260,8 @@
 		signalr.onAgentQueueChanged = onAgentQueueChanged;
 		signalr.onSenderActionGenerated = onSenderActionGenerated;
 		signalr.onConversationMessageDeleted = onConversationMessageDeleted;
-		await signalr.start(params.conversationId);
+		// @ts-ignore
+		await signalr.start(page.params.conversationId);
 
 		scrollbars = [
 			document.querySelector('.chat-scrollbar')
@@ -374,7 +373,7 @@
 
 	function initChatView() {
 		isFrame = window.self != window.top;
-		mode = $page.url.searchParams.get('mode') || '';
+		mode = page.url.searchParams.get('mode') || '';
 		// initial condition
 		isPersistLogClosed = false;
 		isInstantLogClosed = false;
@@ -465,7 +464,7 @@
 
 	/** @param {import('$conversationTypes').ChatResponseModel[]} dialogs */
 	function assignMessageDisclaimer(dialogs) {
-		if (!!!dialogs) return null;
+		if (!dialogs) return null;
 
 		for (let idx = 0; idx < dialogs.length; idx++) {
 			const curMsg = dialogs[idx];
@@ -475,7 +474,7 @@
 			}
 
 			const nextMsg = dialogs[idx + 1];
-			if (!!nextMsg) {
+			if (nextMsg) {
 				// @ts-ignore
 				const disclaimerOptions = curMsg.rich_content?.message?.buttons?.filter(op => !!op.post_action_disclaimer) || [];
 				const content = nextMsg?.rich_content?.message?.text || nextMsg?.text;
@@ -488,7 +487,7 @@
 
 	/** @param {import('$conversationTypes').ChatResponseModel[]} dialogs */
 	function groupDialogs(dialogs) {
-		if (!!!dialogs) return [];
+		if (!dialogs) return [];
 		const format = 'MMM D, YYYY';
 		// @ts-ignore
 		return _.groupBy(dialogs, (x) => {
@@ -503,7 +502,7 @@
 	}
 
 	function getChatFiles() {
-		return $conversationUserAttachmentStore?.accepted_files || [];
+		return get(conversationUserAttachmentStore)?.accepted_files || [];
 	}
 
 
@@ -602,12 +601,11 @@
 			}
 		} else {
 			messageQueue.push(message);
-			setTimeout(() => handleMesssageQueue(message), 0);
+			setTimeout(() => handleMesssageQueue(), 0);
 		}
 	}
 
-	/** @param {import('$conversationTypes').ChatResponseModel} message */
-	async function handleMesssageQueue(message) {
+	async function handleMesssageQueue() {
 		if (isHandlingQueue) return;
 
 		isHandlingQueue = true;
@@ -700,7 +698,7 @@
 
 	/** @param {import('$conversationTypes').ConversationMessageDeleteModel} data */
 	function onConversationMessageDeleted(data) {
-		if (!!!data?.message_id) return;
+		if (!data?.message_id) return;
 
 		truncateDialogs(data.message_id);
 	}
@@ -711,23 +709,25 @@
 	}
 
 	async function createNewConversation() {
-		const conversation = await newConversation(params.agentId);
+		// @ts-ignore
+		const conversation = await newConversation(page.params.agentId);
         conversationStore.put(conversation);
 		return conversation;
 	}
 
 	/** @param {import('$conversationTypes').ConversationModel} conversation */
 	function redirectToNewConversation(conversation) {
-		const path = `chat/${params.agentId}/${conversation.id}`;
-		const searchParams = $page.url.searchParams;
+		const path = `chat/${page.params.agentId}/${conversation.id}`;
+		const searchParams = page.url.searchParams;
 		const search = searchParams?.toString();
 		const url = search ? `${path}?${search}` : path;
 		window.location.href = url;
 	}
 
 	function pinDashboard() {
-		const agentId = params.agentId;
-		const convId = params.conversationId;
+		const agentId = page.params.agentId;
+		const convId = page.params.conversationId;
+		// @ts-ignore
 		pinConversationToDashboard(agentId, convId).then().finally();
 	}
 
@@ -744,8 +744,8 @@
 		isSendingMsg = true;
 		clearInstantLogs();
 		renewUserSentMessages(msgText);
-		const agentId = params.agentId;
-		const convId = conversationId || params.conversationId;
+		const agentId = page.params.agentId;
+		const convId = conversationId || page.params.conversationId;
 
 		let postback = data?.postback;
 		// if (!postback) {
@@ -764,16 +764,17 @@
 
 		/** @type {any[]} */
 		let files = [];
-		if (!!!messageData?.inputMessageId) {
+		if (!messageData?.inputMessageId) {
 			files = getChatFiles();
 		}
 		resetChatStorage();
 
-		if (files?.length > 0 && !!!messageData.inputMessageId) {
+		if (files?.length > 0 && !messageData.inputMessageId) {
 			const filePayload = buildFilePayload(files);
+			// @ts-ignore
 			const obj = await uploadConversationFiles(agentId, convId, files);
 			messageData = { ...messageData, inputMessageId: obj?.messageId };
-			if (!!filePayload) {
+			if (filePayload) {
 				messageData = {
 					...messageData,
 					// @ts-ignore
@@ -783,10 +784,11 @@
 					}
 				};
 			}
-		} else if (!!messageData?.inputMessageId) {
+		} else if (messageData?.inputMessageId) {
+			// @ts-ignore
 			const retFiles = await getConversationFiles(convId, messageData.inputMessageId, FileSourceType.User);
 			const filePayload = buildFilePayload(retFiles);
-			if (!!filePayload) {
+			if (filePayload) {
 				messageData = {
 					...messageData,
 					// @ts-ignore
@@ -798,6 +800,7 @@
 			}
 		}
 
+		// @ts-ignore
 		await sendMessageToHub(agentId, convId, msgText, messageData);
 		deleteMessageDraft();
 		isSendingMsg = false;
@@ -810,13 +813,14 @@
 		if (conversation?.is_realtime_enabled) {
 
 			if (isListening) {
-				realtimeChat.start(params.agentId, params.conversationId);
+				// @ts-ignore
+				realtimeChat.start(page.params.agentId, page.params.conversationId);
 			} else {
 				realtimeChat.stop();
 			}
 		} else {
 			webSpeech.onSpeechToTextDetected = (transcript) => {
-				if (!!!_.trim(transcript) || isSendingMsg) {
+				if (!_.trim(transcript) || isSendingMsg) {
 					return;
 				}
 
@@ -868,7 +872,7 @@
 			return;
 		}
 
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!_.trim(text) || isSendingMsg || isThinking) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !_.trim(text) || isSendingMsg || isThinking) {
 			return;
 		}
 
@@ -883,7 +887,7 @@
     function handleMessageInput(e) {
         const value = e.target.value;
 				saveMessageDraft(value);
-        if (!!!_.trim(value)) {
+        if (!_.trim(value)) {
             return;
         }
 
@@ -936,7 +940,7 @@
 		let postback = null;
 		let lastMsg = dialogs.slice(-1)[0];
 
-		if (!!truncateMsgId) {
+		if (truncateMsgId) {
 			const foundIdx = dialogs.findIndex(x => x.message_id === truncateMsgId);
 			const truncatedDialogs = dialogs.filter((x, idx) => idx < foundIdx);
 			lastMsg = truncatedDialogs.slice(-1)[0];
@@ -1059,8 +1063,8 @@
 	}
 
 	function loadUserAddStates() {
-		const conversationUserStates = conversationUserStateStore.get(params.conversationId);
-		if (!!conversationUserStates && conversationUserStates.conversationId == params.conversationId && !!conversationUserStates.states) {
+		const conversationUserStates = conversationUserStateStore.get(page.params.conversationId);
+		if (!!conversationUserStates && conversationUserStates.conversationId == page.params.conversationId && !!conversationUserStates.states) {
 			userAddStates = [...conversationUserStates.states];
 		} else {
 			userAddStates = [];
@@ -1075,7 +1079,7 @@
             return state;
         });
         conversationUserStateStore.put({
-            conversationId: params.conversationId,
+            conversationId: page.params.conversationId,
             states: cleanStates
         });
 		toggleUserAddStateModal();
@@ -1093,7 +1097,7 @@
 		}).then(async (result) => {
 			if (result.value) {
 				userAddStates = [];
-				conversationUserStateStore.resetOne(params.conversationId);
+				conversationUserStateStore.resetOne(page.params.conversationId);
 			}
 		});
 	}
@@ -1115,7 +1119,8 @@
 		}).then(async (result) => {
 			if (result.value) {
 				const postback = buildPostback(message?.message_id);
-				deleteConversationMessage(params.conversationId, message?.message_id, true).then(res => {
+				// @ts-ignore
+				deleteConversationMessage(page.params.conversationId, message?.message_id, true).then(res => {
 					sendChatMessage(message?.text, { postback: postback, inputMessageId: res?.messageId });
 				});
 			}
@@ -1150,18 +1155,17 @@
 		isSendingMsg = true;
 		clearInstantLogs();
 		resetChatStorage();
-		await deleteConversationMessage(params.conversationId, messageId);
+		await deleteConversationMessage(page.params.conversationId, messageId);
 		isSendingMsg = false;
 	}
 
 	/**
-	 * @param {any} e
 	 * @param {import('$conversationTypes').ChatResponseModel} message
 	 */
-	function editMessage(e, message) {
-		e.preventDefault();
+	async function editMessage(message) {
 		truncateMsgId = message?.message_id;
 		editText = message?.text;
+		await tick();
 		isOpenEditMsgModal = true;
 	}
 
@@ -1180,7 +1184,8 @@
 	async function confirmEditMsg() {
 		isOpenEditMsgModal = false;
 		const postback = buildPostback(truncateMsgId);
-		deleteConversationMessage(params.conversationId, truncateMsgId, true).then(res => {
+		// @ts-ignore
+		deleteConversationMessage(page.params.conversationId, truncateMsgId, true).then(res => {
 			sendChatMessage(editText, { postback: postback, inputMessageId: res?.messageId }).then(() => {
 				resetEditMsg();
 			}).catch(() => {
@@ -1212,7 +1217,7 @@
 
 	/** @param {string} messageId */
 	function directToLog(messageId) {
-		if (!!!messageId || isLite || !isLoadPersistLog) return;
+		if (!messageId || isLite || !isLoadPersistLog) return;
 
 		highlightChatMessage(messageId);
 		highlightStateLog(messageId);
@@ -1285,7 +1290,7 @@
 	}
 
 	function openFullScreen() {
-		window.open($page.url.pathname);
+		window.open(page.url.pathname);
 	}
 
 	function clearInstantLogs() {
@@ -1440,7 +1445,8 @@
 
 		isLoading = true;
 		updateConversationTags(
-			params.conversationId,
+			// @ts-ignore
+			page.params.conversationId,
 			{ toAddTags, toDeleteTags })
 		.then(res => {
 			if (res) {
@@ -1497,7 +1503,8 @@
 		}
 
 		isLoading = true;
-		updateConversationMessage(params.conversationId, request).then(res => {
+		// @ts-ignore
+		updateConversationMessage(page.params.conversationId, request).then(res => {
 			if (res) {
 				isComplete = true;
 				successText = "Message has been updated!";
@@ -1511,7 +1518,7 @@
 			} else {
 				throw "failed to update message";
 			}
-		}).catch(err => {
+		}).catch(() => {
 			isError = true;
 			errorText = "Failed to update message!";
 			setTimeout(() => {
@@ -1530,16 +1537,16 @@
 	}
 
 	function getMessageDraft() {
-		return messageStorage.get(MESSAGE_STORAGE_KEY + params.conversationId);
+		return messageStorage.get(MESSAGE_STORAGE_KEY + page.params.conversationId);
   	}
 
 	/** @param {any} message */
 	function saveMessageDraft(message) {
-		messageStorage.set(MESSAGE_STORAGE_KEY + params.conversationId, message, 24 * 60 * 60 * 1000);
+		messageStorage.set(MESSAGE_STORAGE_KEY + page.params.conversationId, message, 24 * 60 * 60 * 1000);
 	}
 
 	function deleteMessageDraft() {
-		messageStorage.remove(MESSAGE_STORAGE_KEY + params.conversationId);
+		messageStorage.remove(MESSAGE_STORAGE_KEY + page.params.conversationId);
 	}
 
 	function handlePaneResize() {
@@ -1549,10 +1556,15 @@
 		const width = header.getBoundingClientRect().width;
 		isLite = width < chatWidthThreshold;
 	}
+
+	function toggleHeaderMenu() {
+		isHeaderMenuOpen = !isHeaderMenuOpen;
+		isHeaderStatesOpen = false;
+	}
 </script>
 
 
-<svelte:window on:resize={() => resizeChatWindow()}/>
+<svelte:window onresize={() => resizeChatWindow()}/>
 
 <GlobalHeader
 	bind:isLoading={isLoading}
@@ -1598,14 +1610,15 @@
 			placeholder="Enter new tag..."
 			maxlength={50}
 			bind:value={newTagText}
-			on:keydown={e => { if (e.key === 'Enter') addTag(); }}
+			onkeydown={e => { if (e.key === 'Enter') addTag(); }}
 		/>
 		<button
 			class="btn btn-primary btn-sm"
+			aria-label="Add tag"
 			disabled={!_.trim(newTagText)}
-			on:click={() => addTag()}
+			onclick={() => addTag()}
 		>
-			<i class="bx bx-plus" />
+			<i class="bx bx-plus"></i>
 		</button>
 	</div>
 </DialogModal>
@@ -1620,9 +1633,11 @@
 	cancelBtnText={''}
 	close={() => toggleNotificationModal()}
 >
-	<div slot='title-icon' class="color: text-warning">
-		<i class="mdi mdi-bell-ring" />
-	</div>
+	{#snippet titleIcon()}
+		<div class="color: text-warning">
+			<i class="mdi mdi-bell-ring"></i>
+		</div>
+	{/snippet}
 	<div class="chat-notification">
 		{notificationText}
 	</div>
@@ -1636,9 +1651,15 @@
 	toggleModal={() => toggleEditMsgModal()}
 	confirm={() => confirmEditMsg()}
 	cancel={() => toggleEditMsgModal()}
-	disableConfirmBtn={!!!_.trim(editText)}
+	disableConfirmBtn={!_.trim(editText)}
 >
-	<textarea class="form-control chat-input" rows="5" maxlength={maxTextLength} bind:value={editText} placeholder="Enter Message..." />
+	<textarea
+		class="form-control chat-input"
+		rows="5"
+		maxlength={maxTextLength}
+		bind:value={editText}
+		placeholder="Enter Message..."
+	></textarea>
 	<div class="text-secondary text-end text-count">
 		<div>{`${(editText?.length || 0)}/${maxTextLength}`}</div>
 	</div>
@@ -1651,9 +1672,16 @@
 	toggleModal={() => toggleBigMessageModal()}
 	confirm={() => sendBigMessage()}
 	cancel={() => toggleBigMessageModal()}
-	disableConfirmBtn={!!!_.trim(bigText)}
+	disableConfirmBtn={!_.trim(bigText)}
 >
-	<textarea class="form-control chat-input" rows="25" maxlength={maxTextLength} bind:value={bigText} placeholder="Enter Message..." on:input={handleInputBigText} />
+	<textarea
+		class="form-control chat-input"
+		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>
@@ -1666,9 +1694,15 @@
 	toggleModal={() => toggleEditBotMsgModal()}
 	confirm={() => saveBotMsg()}
 	cancel={() => toggleEditBotMsgModal()}
-	disableConfirmBtn={!!!_.trim(botText)}
+	disableConfirmBtn={!_.trim(botText)}
 >
-	<textarea class="form-control chat-input" rows="10" maxlength={maxTextLength} bind:value={botText} placeholder="Enter Message..." />
+	<textarea
+		class="form-control chat-input"
+		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>
@@ -1725,7 +1759,7 @@
 								</div>
 								<div class="text-muted mb-0 chat-head-user">
 									<div>
-										<i class="mdi mdi-circle text-success align-middle" />
+										<i class="mdi mdi-circle text-success align-middle"></i>
 									</div>
 									<div class="ellipsis">
 										<span>
@@ -1741,77 +1775,95 @@
 										<div class="">
 											<button
 												class="btn btn-secondary btn-rounded btn-sm"
-												on:click={() => openFullScreen()}
+												aria-label="Open full screen"
+												onclick={() => openFullScreen()}
 											>
-												<i class="bx bx-fullscreen" />
+												<i class="bx bx-fullscreen"></i>
 											</button>
 										</div>
 									{/if}
 									<div class="">
 										{#if !isLite}
-										<Dropdown>
-											<DropdownToggle class="nav-btn dropdown-toggle">
-												<i class="bx bx-dots-horizontal-rounded" />
-											</DropdownToggle>
-											<DropdownMenu class="dropdown-menu-end">
+										<div
+											class="dropdown"
+											use:clickoutsideDirective
+											onclickoutside={(/** @type {any} */ e) => {
+												if (!e.detail.currentNode?.contains(e.detail.targetNode)) {
+													isHeaderMenuOpen = false;
+													isHeaderStatesOpen = false;
+												}
+											}}
+										>
+											<button class="nav-btn dropdown-toggle" 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;">
 												{#if !isLoadPersistLog || !isLoadInstantLog}
-													<DropdownItem on:click={() => openLogs()}>View Log</DropdownItem>
+													<li><button class="dropdown-item" type="button" onclick={() => openLogs()}>View Log</button></li>
 												{/if}
 												{#if !isLoadInstantLog || !isOpenUserAddStateModal}
-												<li>
-													<Dropdown direction="right" class="state-menu">
-														<DropdownToggle caret class="dropdown-item">
-															States
-														</DropdownToggle>
-														<DropdownMenu>
-															{#if !isOpenUserAddStateModal}
-															<DropdownItem
+												<li class="dropstart state-menu">
+													<button class="dropdown-item dropdown-toggle" type="button" aria-expanded={isHeaderStatesOpen} onclick={() => isHeaderStatesOpen = !isHeaderStatesOpen}>
+														States
+													</button>
+													<ul class="dropdown-menu" class:show={isHeaderStatesOpen} style="left: -160px !important;">
+														{#if !isOpenUserAddStateModal}
+														<li>
+															<button
+																class="dropdown-item"
+																type="button"
 																disabled={disableAction}
-																on:click={() => toggleUserAddStateModal()}
+																onclick={() => toggleUserAddStateModal()}
 															>
 																Add States
-															</DropdownItem>
-															{/if}
-															<DropdownItem
+															</button>
+														</li>
+														{/if}
+														<li>
+															<button
+																class="dropdown-item"
+																type="button"
 																disabled={disableAction}
-																on:click={() => clearUserAddStates()}
+																onclick={() => clearUserAddStates()}
 															>
 																Clear States
-															</DropdownItem>
-														</DropdownMenu>
-													</Dropdown>
+															</button>
+														</li>
+													</ul>
 												</li>
 												{/if}
-												
+
 												{#if ADMIN_ROLES.includes(currentUser?.role || '')}
-													<DropdownItem
-														disabled={disableAction}
-														on:click={() => toggleTagModal()}
-													>
-														Tags
-													</DropdownItem>
+													<li>
+														<button
+															class="dropdown-item"
+															type="button"
+															disabled={disableAction}
+															onclick={() => toggleTagModal()}
+														>
+															Tags
+														</button>
+													</li>
 												{/if}
 												{#if agent?.id === LEARNER_AGENT_ID && mode === TRAINING_MODE}
-													<DropdownItem on:click={() => handleSaveKnowledge()}>Save Knowledge</DropdownItem>
-												{/if}											
-												<DropdownItem on:click={() => pinDashboard()}>
-													Pin to Dashboard
-												</DropdownItem>
-											</DropdownMenu>
-										</Dropdown>
+													<li><button class="dropdown-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`}
+											aria-label="Open new conversation"
 											disabled={disableAction}
-											on:click={() => handleNewConversation()}
+											onclick={() => handleNewConversation()}
 										>
-											<i
+											<i 
 												class="mdi mdi-plus"
 												style="font-size: 15px;"
 												data-bs-toggle="tooltip"
 												data-bs-placement="top"
-												title="New Conversation"
-											/>
+												title="New Conversation"></i>
 										</button>
 										{/if}
 									</div>
@@ -1821,14 +1873,14 @@
 										<button
 											class={`btn btn-rounded btn-sm btn-primary btn-left`}
 											disabled={disableAction}
-											on:click={() => handleNewConversation()}
+											onclick={() => handleNewConversation()}
 										>
 											<span
 												data-bs-toggle="tooltip"
 												data-bs-placement="bottom"
 												title="New Conversation"
 											>
-												<i class="mdi mdi-plus" />
+												<i class="mdi mdi-plus"></i>
 												<span class="me-2">New</span>
 											</span>
 										</button>
@@ -1836,12 +1888,12 @@
 										<button
 											class={`btn btn-rounded btn-sm btn-danger ${!isLite ? 'btn-right' : ''}`}
 											disabled={disableAction}
-											on:click={() => endChat()}
+											onclick={() => endChat()}
 										>
 											{#if !isLite}
 											<span class="me-2">End</span>
 											{/if}
-											<i class="mdi mdi-window-close" />
+											<i class="mdi mdi-window-close"></i>
 										</button>
 									</div>
 								</div>
@@ -1867,8 +1919,8 @@
 														tabindex="0"
 														aria-label="user-msg-to-log"
 														role="link"
-														on:keydown={() => {}}
-														on:click={() => directToLog(message.message_id)}
+														onkeydown={() => {}}
+														onclick={() => directToLog(message.message_id)}
 													>
 														<div
 															class="ctext-wrap user-msg bg-primary" 
@@ -1878,7 +1930,7 @@
 															<div class="text-start fw-bold text-white">{@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 class="bx bx-time-five align-middle me-1"></i>
 															{utcToLocal(message.created_at, 'h:mm:ss A')}
 														</p>
 													</div>
@@ -1890,30 +1942,38 @@
 															message={message}
 															appendImage
 															galleryStyles={'justify-content: flex-end;'}
-															fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)}
+															fetchFiles={() => getConversationFiles(page.params.conversationId, message.message_id, FileSourceType.User)}
 														/>
 													{/if}
 												</div>
 													{#if !isLite}
-														<Dropdown>
-															<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking || disableAction}>
-																<i class="bx bx-dots-vertical-rounded" />
-															</DropdownToggle>
-															<DropdownMenu class="dropdown-menu-end">
-																<DropdownItem on:click={(e) => editMessage(e, message)}>Edit</DropdownItem>
-																<DropdownItem on:click={(e) => resendMessage(e, message)}>Resend</DropdownItem>
-																<DropdownItem on:click={(e) => deleteMessage(e, message.message_id)}>Delete</DropdownItem>
-															</DropdownMenu>
-														</Dropdown>
+														<div
+															class="dropdown"
+															use:clickoutsideDirective
+															onclickoutside={(/** @type {any} */ e) => {
+																if (!e.detail.currentNode?.contains(e.detail.targetNode)) {
+																	if (openMsgActionId === message.message_id) {
+																		openMsgActionId = '';
+																	}
+																}
+															}}
+														>
+															<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; }}>
+																<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>
+														</div>
 													{/if}
 												{:else}
 												<div class="cicon-wrap align-content-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">
 													{:else}
-														{
-															@const isShowIcon = (message?.rich_content?.message?.text || message?.text) || message?.uuid !== lastBotMsg?.uuid
-														}
+														{@const isShowIcon = (message?.rich_content?.message?.text || message?.text) || message?.uuid !== lastBotMsg?.uuid}
 														<img
 															class="rounded-circle avatar-sm"
 															style={`display: ${isShowIcon ? 'block' : 'none'}; margin-bottom: -15px;`}
@@ -1925,9 +1985,7 @@
 												<div class="msg-container">
 													<RcMessage containerClasses={'bot-msg'} markdownClasses={'markdown-dark text-dark'} message={message} />
 													{#if message?.message_id === lastBotMsg?.message_id && message?.uuid === lastBotMsg?.uuid}
-														{
-															@const isStreamEnd = (message?.rich_content?.message?.text || message?.text) && !isStreaming && !isHandlingQueue && !isThinking
-														}	
+														{@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;`}>
 															{#if PUBLIC_LIVECHAT_SPEAKER_ENABLED === 'true'}
 																<AudioSpeaker
@@ -1938,74 +1996,73 @@
 															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && AgentExtensions.trainable(agent)}
 																{#if message?.function}
 																	<div class="line-align-center" style="font-size: 17px;">
-																		<!-- svelte-ignore a11y-click-events-have-key-events -->
-																		<!-- svelte-ignore a11y-no-static-element-interactions -->
+																		<!-- svelte-ignore a11y_click_events_have_key_events -->
+																		<!-- svelte-ignore a11y_no_static_element_interactions -->
 																		<div
 																			class="clickable"
 																			style="height: 95%;"
 																			data-bs-toggle="tooltip"
 																			data-bs-placement="top"
 																			title="Like"
-																			on:click={e => likeMessage(e, message)}
+																			onclick={e => likeMessage(e, message)}
 																		>
-																			<i class="mdi mdi-thumb-up-outline text-primary" />
+																			<i class="mdi mdi-thumb-up-outline text-primary"></i>
 																		</div>
 																	</div>
 																{/if}
 																<div class="line-align-center" style="font-size: 17px;">
-																	<!-- svelte-ignore a11y-click-events-have-key-events -->
-																	<!-- svelte-ignore a11y-no-static-element-interactions -->
+																	<!-- svelte-ignore a11y_click_events_have_key_events -->
+																	<!-- svelte-ignore a11y_no_static_element_interactions -->
 																	<div
 																		class="clickable"
 																		style="height: 80%;"
 																		data-bs-toggle="tooltip"
 																		data-bs-placement="top"
 																		title="Edit"
-																		on:click={() => openEditBotMsgModal(message)}
+																		onclick={() => openEditBotMsgModal(message)}
 																	>
-																		<i class="bx bxs-edit text-primary" />
+																		<i class="bx bxs-edit text-primary"></i>
 																	</div>
 																</div>
 															{/if}
 															<div style="font-size: 17px;">
-																<!-- svelte-ignore a11y-click-events-have-key-events -->
-																<!-- svelte-ignore a11y-no-static-element-interactions -->
+																<!-- svelte-ignore a11y_no_static_element_interactions -->
 																<div
 																	class="line-align-center text-primary"
 																	style="height: 85%;"
 																	data-bs-toggle="tooltip"
 																	data-bs-placement="top"
 																	title="Copy"
-																	on:mouseup={e => copyMessage(e, message)}
-																	on:mousedown={() => copyClicked = true}
+																	onmouseup={e => copyMessage(e, message)}
+																	onmousedown={() => copyClicked = true}
 																>
 																	{#if copyClicked}
 																		<div class="div-center">
 																			<div class="line-align-center">
-																				<i class="bx bx-check" /> 
+																				<i class="bx bx-check"></i> 
 																			</div>
 																			<div class="line-align-center">
 																				<span style="font-size: 10px;">{'Copied!'}</span>
 																			</div>
 																		</div>
 																	{:else}
-																		<i class="bx bx-copy clickable" />
+																		<i class="bx bx-copy clickable"></i>
 																	{/if}
 																</div>
 															</div>
 															{#if message?.rich_content?.message?.rich_type === RichType.ProgramCode}
 															<div style="font-size: 17px;">
-																<!-- svelte-ignore a11y-click-events-have-key-events -->
-																<!-- svelte-ignore a11y-no-static-element-interactions -->
+																<!-- 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%;"
 																	data-bs-toggle="tooltip"
 																	data-bs-placement="top"
 																	title="Code script"
-																	on:click={e => openCodeScriptModal(e, message)}
+																	onclick={e => openCodeScriptModal(e, message)}
 																>
-																	<i class="bx bx-terminal clickable" />
+																	<i class="bx bx-terminal clickable"></i>
 																</div>
 															</div>
 															{/if}
@@ -2016,7 +2073,7 @@
 															message={message}
 															appendImage
 															galleryStyles={'justify-content: flex-start;'}
-															fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)}
+															fetchFiles={() => getConversationFiles(page.params.conversationId, message.message_id, FileSourceType.Bot)}
 														/>
 													{/if}
 												</div>
@@ -2040,7 +2097,7 @@
 													</span>
 												{/if}
 												<div class="flex-shrink-0 align-self-center" style="display: inline-block;">
-													<LoadingDots duration={'1s'} size={10} gap={5} color={'var(--bs-primary)'} />
+													<LoadingDots duration={'1s'} size={5} gap={5} color={'var(--bs-primary)'} />
 												</div>
 											</div>
 										</div>
@@ -2067,10 +2124,11 @@
 									<button
 										type="submit"
 										class={`btn btn-rounded waves-effect waves-light ${mode === TRAINING_MODE ? 'btn-danger' : 'btn-primary'}`}
+										aria-label="Start/stop listening"
 										disabled={isSendingMsg || isThinking || disableAction}
-										on:click={() => startListen()}
+										onclick={() => startListen()}
 									>
-										<i class="mdi mdi-{isListening ? 'microphone' : 'microphone-off'} md-36" />
+										<i class="mdi mdi-{isListening ? 'microphone' : 'microphone-off'} md-36"></i>
 									</button>
 								{/if}
 							</div>
@@ -2086,62 +2144,59 @@
 										bind:options={chatUtilOptions}
 										onTextInput={e => handleMessageInput(e)}
 										onKeyDown={e => onSendMessage(e)}
-										onFocus={e => chatUtilOptions = []}
+										onFocus={() => chatUtilOptions = []}
 										onOptionClick={op => handleChatOptionClick(op)}
 									>
 										<ChatFileUploader
 											accept={'.png,.jpg,.jpeg'}
 											containerClasses={'line-align-center text-primary chat-util-item'}
 											disabled={disableAction}
-											on:filedroped={() => refresh()}
+											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i
+												<i 
 													class="bx bx-image-add"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
-													title="Upload images"
-												/>
+													title="Upload images"></i>
 											</span>
 										</ChatFileUploader>
 										<ChatFileUploader
 											accept={'.pdf,.xlsx,.xls,.csv'}
 											containerClasses={'line-align-center text-primary chat-util-item'}
 											disabled={disableAction}
-											on:filedroped={() => refresh()}
+											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i
+												<i 
 													class="bx bxs-folder-open"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
-													title="Upload pdf, excel files"
-												/>
+													title="Upload pdf, excel files"></i>
 											</span>
 										</ChatFileUploader>
 										<ChatFileUploader
 											accept={'.wav,.mp3'}
 											containerClasses={'line-align-center text-primary chat-util-item'}
 											disabled={disableAction}
-											on:filedroped={() => refresh()}
+											onfiledroped={() => refresh()}
 										>
 											<span>
-												<i
+												<i 
 													class="bx bxs-music"
 													data-bs-toggle="tooltip"
 													data-bs-placement="top"
-													title="Upload audios"
-												/>
+													title="Upload audios"></i>
 											</span>
 										</ChatFileUploader>
 									</ChatTextArea>
 									<div class="chat-util-links">
 										<ChatBigMessage
 											disabled={isSendingMsg || isThinking || disableAction}
-											on:click={() => toggleBigMessageModal()}
+											onclick={() => toggleBigMessageModal()}
 										/>
 										{#if PUBLIC_LIVECHAT_FILES_ENABLED === 'true'}
-											<ChatUtil disabled={disableAction} on:click={() => loadChatUtils = true} />
+											<ChatUtil disabled={disableAction} onclick={() => loadChatUtils = true} />
 										{/if}
 									</div>
 								</div>
@@ -2150,11 +2205,11 @@
 								<button
 									type="submit"
 									class={`btn btn-rounded chat-send waves-effect waves-light ${mode === TRAINING_MODE ? 'btn-danger' : 'btn-primary'}`}
-									disabled={!!!_.trim(text) || isSendingMsg || isThinking || disableAction}
-									on:click={() => sentTextMessage()}
+									disabled={!_.trim(text) || isSendingMsg || isThinking || disableAction}
+									onclick={() => sentTextMessage()}
 								>
 									<span class="d-none d-md-inline-block me-2">Send</span>
-									<i class="mdi mdi-send" />
+									<i class="mdi mdi-send"></i>
 								</button>
 							</div>
 						</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 0506016e..0751bc9c 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
@@ -1,43 +1,46 @@
 <script>
-    import { onDestroy, onMount } from "svelte";
+    import { onMount } from "svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
 
-    /** @type {any[] | undefined} */
-    export let options;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
+    /**
+     * @type {{
+     *   options?: any[],
+     *   disabled?: boolean,
+     *   onConfirm?: (title: string, payload: string) => any
+     * }}
+     */
+    let {
+        options,
+        disabled = false,
+        onConfirm = () => {}
+    } = $props();
 
     /** @type {any[]} */
-    let files = [];
+    let files = $state([]);
     /** @type {any} */
-    let confirmOption;
+    let confirmOption = $state(undefined);
     /** @type {any} */
-    let cancelOption;
+    let cancelOption = $state(undefined);
 
-    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
-        const savedAttachments = $conversationUserAttachmentStore;
-        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments?.accepted_files || [];
+    $effect(() => {
+        const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+            files = value?.accepted_files || [];
+        });
+
+        return () => {
+            unsubscribe();
+        };
     });
 
     onMount(() => {
         collectOptions(options);
-        
-    });
-
-    onDestroy(() => {
-        unsubscribe();
     });
 
+    /** @param {any[] | undefined} opts */
+    function collectOptions(opts) {
+        confirmOption = opts?.find(op => op.title?.toLowerCase()?.startsWith("yes"));
+        cancelOption = opts?.find(op => op.title?.toLowerCase()?.startsWith("no"));
 
-    /** @param {any[] | undefined} options */
-    function collectOptions(options) {
-        confirmOption = options?.find(op => op.title?.toLowerCase()?.startsWith("yes"));
-        cancelOption = options?.find(op => op.title?.toLowerCase()?.startsWith("no"));
-        
         if (!confirmOption) {
             confirmOption = {
                 title: 'Yes, I have uploaded attachments.',
@@ -66,8 +69,8 @@
 	 * @param {string} title
      * @param {string} payload
 	 */
-     function innerConfirm(title, payload) {
-        onConfirm && onConfirm(title, payload);
+    function innerConfirm(title, payload) {
+        onConfirm?.(title, payload);
     }
 </script>
 
@@ -76,7 +79,7 @@
         <button
             class={`btn btn-sm m-1 ${confirmOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             disabled={disabled}
-            on:click={(e) => handleClickOption(e, confirmOption)}
+            onclick={(e) => handleClickOption(e, confirmOption)}
         >
             {confirmOption?.title}
         </button>
@@ -85,7 +88,7 @@
         <button
             class={`btn btn-sm m-1 ${cancelOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             disabled={disabled}
-            on:click={(e) => handleClickOption(e, cancelOption)}
+            onclick={(e) => handleClickOption(e, cancelOption)}
         >
             {cancelOption?.title}
         </button>
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 6f9a6b20..3124b1a2 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
@@ -1,25 +1,26 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disableDefaultStyles?: boolean,
+     *   disabled?: boolean,
+     *   onclick?: () => void
+     * }}
+     */
+    let {
+        containerClasses = '',
+        containerStyles = '',
+        disableDefaultStyles = false,
+        disabled = false,
+        onclick
+    } = $props();
 
     function clickIcon() {
         if (disabled) {
             return;
         }
-        svelteDispatch("click")
+        onclick?.();
     }
 </script>
 
@@ -30,15 +31,15 @@
     <ul class="list-inline mb-0">
         <li class="list-inline-item">
             <span>
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <i
                     class="bx bx-pencil clickable"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Zoom in"
-                    on:click={() => clickIcon()}
-                />
+                    onclick={() => clickIcon()}
+                ></i>
             </span>
         </li>
     </ul>
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-gallery.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-gallery.svelte
index 89ca022b..2247a568 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-gallery.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-file-gallery.svelte
@@ -1,27 +1,36 @@
 <script>
 	import FileGallery from "$lib/common/files/FileGallery.svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
-	import { afterUpdate, getContext, onDestroy } from "svelte";
+	import { getContext } from "svelte";
 
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   disabled?: boolean
+     * }}
+     */
+    let {
+        disabled = false
+    } = $props();
 
     /** @type {import('$fileTypes').TextFileModel[]} */
-    let files = [];
+    let files = $state([]);
 
-    const { autoScrollToBottom }  = getContext('chat-window-context');
+    const { autoScrollToBottom } = getContext('chat-window-context');
 
-    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
-        const savedAttachments = $conversationUserAttachmentStore;
-        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments?.accepted_files || [];
-    });
+    $effect(() => {
+        const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+            files = value?.accepted_files || [];
+        });
 
-    afterUpdate(() => {
-        autoScrollToBottom();
+        return () => {
+            unsubscribe();
+        };
     });
 
-    onDestroy(() => {
-        unsubscribe();
+    $effect(() => {
+        // Track files changes to auto-scroll
+        files;
+        autoScrollToBottom();
     });
 
     /** @param {number} index */
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 40c0fc78..35d43de6 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
@@ -1,59 +1,54 @@
 <script>
-    import { onDestroy, createEventDispatcher } from 'svelte';
     import FileDropZone from '$lib/common/files/FileDropZone.svelte';
 	import { conversationUserAttachmentStore } from '$lib/helpers/store';
 
-    const svelteDispatch = createEventDispatcher();
-	
-    /** @type {string} */
-    export let accept;
-
-    export let fileMaxSize = 10 * 1024 * 1024;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
+    /**
+     * @type {{
+     *   accept?: string,
+     *   fileMaxSize?: number,
+     *   disabled?: boolean,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   onfiledroped?: () => void,
+     *   children?: import('svelte').Snippet
+     * }}
+     */
+    let {
+        accept = '',
+        fileMaxSize = 10 * 1024 * 1024,
+        disabled = false,
+        containerClasses = '',
+        containerStyles = '',
+        onfiledroped,
+        children
+    } = $props();
 
     /** @type {any[]} */
-    let files = [];
-
-    /** @type {boolean} */
-    let disableFileDrop = false;
-
-    /** @type {number} */
-    let localFileUploadLimit = 0;
+    let files = $state([]);
 
     const fileUpperLimit = 5;
-    
 
-    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
-        const savedAttachments = $conversationUserAttachmentStore;
-        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments?.accepted_files || [];
-    });
+    let disableFileDrop = $derived(disabled || files.length >= fileUpperLimit);
+    let localFileUploadLimit = $derived(Math.max(fileUpperLimit - files.length, 0));
 
-    onDestroy(() => {
-        unsubscribe();
-    });
+    $effect(() => {
+        const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+            files = value?.accepted_files || [];
+        });
 
-    $: {
-        disableFileDrop = disabled || files.length >= fileUpperLimit;
-        localFileUploadLimit = Math.max(fileUpperLimit - files.length, 0);
-    }
+        return () => {
+            unsubscribe();
+        };
+    });
 
     /** @param {any} e */
     async function handleFileDrop(e) {
-        const { acceptedFiles } = e.detail;
-        const savedAttachments = $conversationUserAttachmentStore;
-        const newAttachments = [...savedAttachments?.accepted_files || [], ...acceptedFiles];
+        const { acceptedFiles } = e;
+        const newAttachments = [...files, ...acceptedFiles];
         conversationUserAttachmentStore.put({
             accepted_files: newAttachments
         });
-        svelteDispatch('filedroped');
+        onfiledroped?.();
     }
 </script>
 
@@ -68,17 +63,19 @@
         disabled={disableFileDrop}
         fileLimit={localFileUploadLimit}
         maxSize={fileMaxSize}
-        on:drop={e => handleFileDrop(e)}
+        ondrop={handleFileDrop}
     >
-        <slot>
+        {#if children}
+            {@render children()}
+        {:else}
             <span>
                 <i
                     class="bx bx-image-add"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Upload files"
-                />
+                ></i>
             </span>
-        </slot>
+        {/if}
     </FileDropZone>
 </div>
\ No newline at end of file
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 add9ef16..4c6bf53c 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
@@ -1,55 +1,45 @@
 <script>
 	import { clickoutsideDirective } from "$lib/helpers/directives";
-    import _ from "lodash";
-
-    /** @type {string} */
-    export let id;
-
-    /** @type {string} */
-    export let className = '';
-
-    /** @type {string} */
-    export let text;
-
-    /** @type {boolean} */
-    export let loadUtils = false;
-
-    /** @type {string[]} */
-    export let options = [];
-
-    /** @type {number} */
-    export let rows = 1;
-
-    /** @type {number} */
-    export let maxLength = 500;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {string} */
-    export let placeholder = "Enter Message...";
-
-    /** @type {(args0: any) => void} */
-    export let onTextInput = () => {};
-
-    /** @type {(args0: any) => void} */
-    export let onKeyDown = () => {};
-
-    /** @type {(args0: any) => void} */
-    export let onFocus = () => {};
-
-    /** @type {(option: string) => void} */
-    export let onOptionClick = () => {};
 
+    /**
+     * @type {{
+     *   id: string,
+     *   className?: string,
+     *   text?: string,
+     *   loadUtils?: boolean,
+     *   options?: string[],
+     *   rows?: number,
+     *   maxLength?: number,
+     *   disabled?: boolean,
+     *   placeholder?: string,
+     *   onTextInput?: (e: any) => void,
+     *   onKeyDown?: (e: any) => void,
+     *   onFocus?: (e: any) => void,
+     *   onOptionClick?: (option: string) => void,
+     *   children?: import('svelte').Snippet
+     * }}
+     */
+    let {
+        id,
+        className = '',
+        text = $bindable(''),
+        loadUtils = $bindable(false),
+        options = $bindable([]),
+        rows = 1,
+        maxLength = 500,
+        disabled = false,
+        placeholder = 'Enter Message...',
+        onTextInput = () => {},
+        onKeyDown = () => {},
+        onFocus = () => {},
+        onOptionClick = () => {},
+        children
+    } = $props();
 
     /** @type {HTMLTextAreaElement} */
     let textArea;
 
-    /** @type {boolean} */
-    let showOptions = false;
-
-    $: showOptions = options?.length > 0;
-
+    let showOptions = $derived(options?.length > 0);
 
     /** @param {any} e */
     function handleClickOutside(e) {
@@ -75,7 +65,7 @@
     function handleFocus(e) {
         onFocus?.(e);
     }
-    
+
     /** @param {string} option */
     function handleOptionClick(option) {
         if (textArea) {
@@ -92,15 +82,15 @@
 </script>
 
 
-<div use:clickoutsideDirective on:clickoutside={handleClickOutside}>
+<div use:clickoutsideDirective onclickoutside={handleClickOutside}>
     {#if showOptions}
         <ul class="dropdown-menu chat-option-list chat-util-common">
             {#each options as option, idx (idx)}
-                <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <li
                     class="chat-option-item"
-                    on:click={() => handleOptionClick(option)}
+                    onclick={() => handleOptionClick(option)}
                 >
                     {option}
                 </li>
@@ -109,7 +99,9 @@
     {/if}
     {#if loadUtils}
         <div class="chat-util-container chat-util-common">
-            <slot />
+            {#if children}
+                {@render children()}
+            {/if}
         </div>
     {/if}
     <textarea
@@ -121,8 +113,8 @@
         placeholder={placeholder}
         bind:this={textArea}
         bind:value={text}
-        on:input={e => handleTextInput(e)}
-        on:keydown={e => handleKeyDown(e)}
-        on:focus={e => handleFocus(e)}
-    />
+        oninput={e => handleTextInput(e)}
+        onkeydown={e => handleKeyDown(e)}
+        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 a0fefb62..595d0914 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-util/chat-util.svelte
@@ -1,26 +1,26 @@
 <script>
-	import { createEventDispatcher } from "svelte";
-
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {boolean} */
-    export let disableDefaultStyles = false;
-
-    /** @type {string} */
-    export let containerClasses = "";
-
-    /** @type {string} */
-    export let containerStyles = "";
-
-    /** @type {boolean} */
-    export let disabled = false;
-
+    /**
+     * @type {{
+     *   disableDefaultStyles?: boolean,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   disabled?: boolean,
+     *   onclick?: () => void
+     * }}
+     */
+    let {
+        disableDefaultStyles = false,
+        containerClasses = '',
+        containerStyles = '',
+        disabled = false,
+        onclick
+    } = $props();
 
     function clickIcon() {
         if (disabled) {
             return;
         }
-        svelteDispatch("click")
+        onclick?.();
     }
 </script>
 
@@ -32,15 +32,15 @@
     <ul class="list-inline mb-0">
         <li class="list-inline-item">
             <span>
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <i
                     class="bx bx-plus-circle clickable"
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="More"
-                    on:click={() => clickIcon()}
-                />
+                    onclick={() => clickIcon()}
+                ></i>
             </span>
         </li>
     </ul>
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 d81915c4..0dd0a13d 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
@@ -1,8 +1,6 @@
 <script>
-
-    /** @type {any} */
-    export let data;
-
+    /** @type {{ data: any }} */
+    let { data } = $props();
 </script>
 
 <div class="log-element queue-change-container">
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 bd8af65f..ac9cd380 100644
--- a/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/instant-log/instant-log.svelte
@@ -1,29 +1,31 @@
 <script>
+    import { onDestroy } from 'svelte';
+    import { fade } from 'svelte/transition';
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import { afterUpdate, onDestroy } from 'svelte';
-    import { fade } from 'svelte/transition';
 	import MessageStateLogElement from './message-state-log-element.svelte';
 	import AgentQueueLogElement from './agent-queue-log-element.svelte';
 	import ChatAgentInfo from '../agent-info/chat-agent-info.svelte';
 	import LatestStateLog from './latest-state-log.svelte';
 
-    /** @type {import('$agentTypes').AgentModel} */
-	export let agent;
-
-    /** @type {any[]} */
-    export let msgStateLogs = [];
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   msgStateLogs?: any[],
+     *   agentQueueLogs?: any[],
+     *   latestStateLog?: Object | null,
+     *   closeWindow: () => void
+     * }}
+     */
+    let {
+        agent,
+        msgStateLogs = $bindable([]),
+        agentQueueLogs = $bindable([]),
+        latestStateLog = null,
+        closeWindow
+    } = $props();
 
     /** @type {any[]} */
-    export let agentQueueLogs = [];
-
-    /** @type {Object?} */
-    export let latestStateLog = null;
-
-    /** @type {() => void} */
-    export let closeWindow;
-
-    /** @type {any} */
     let scrollbars = [];
 
     const msgStateLogTab = 1;
@@ -44,18 +46,19 @@
 		}
 	};
 
-    afterUpdate(() => {
-        refresh();
+    $effect(() => {
+        // Track reactive dependencies to re-run on changes
+        msgStateLogs;
+        agentQueueLogs;
+        latestStateLog;
+
+        scrollToBottom();
     });
 
     onDestroy(() => {
         cleanLogs();
     });
 
-    function refresh() {
-        scrollToBottom();
-    }
-
     function scrollToBottom() {
         const scrollbarElements = [
             document.querySelector('.latest-state-log-scrollbar'),
@@ -67,7 +70,6 @@
             scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
         });
 
-        // @ts-ignore
         scrollbars.forEach(scrollbar => {
             setTimeout(() => {
                 const { viewport } = scrollbar.elements();
@@ -101,7 +103,8 @@
                 <button
                     type="button"
                     class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                    on:click={() => closeWindow()}
+                    aria-label="Close log window"
+                    onclick={() => closeWindow()}
                 >
                     <i class="mdi mdi-window-close"></i>
                 </button>
@@ -126,15 +129,15 @@
                 out:fade={{ duration: outDuration }}
             >
                 <div class="close-icon">
-                    <span
+                    <button
+                        type="button"
+                        class="btn btn-link p-0"
                         style="float: right;"
-                        role="link"
-                        tabindex="-1"
-                        on:keydown={() => {}}
-                        on:click={() => closeLog(agentQueueLogTab)}
+                        aria-label="Close agent queue log"
+                        onclick={() => closeLog(agentQueueLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
-                    </span>
+                    </button>
                 </div>
                 <div class="agent-queue-log-scrollbar padding-side">
                     <ul>
@@ -153,15 +156,15 @@
                 out:fade={{ duration: outDuration }}
             >
                 <div class="close-icon">
-                    <span
+                    <button
+                        type="button"
+                        class="btn btn-link p-0"
                         style="float: right;"
-                        role="link"
-                        tabindex="-1"
-                        on:keydown={() => {}}
-                        on:click={() => closeLog(msgStateLogTab)}
+                        aria-label="Close message state log"
+                        onclick={() => closeLog(msgStateLogTab)}
                     >
                         <i class="mdi mdi-window-close"></i>
-                    </span>
+                    </button>
                 </div>
                 <div class="msg-state-log-scrollbar padding-side" >
                     <ul>
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 38365a58..2b5af467 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
@@ -1,21 +1,23 @@
 <script>
-	import { formatObject } from '$lib/helpers/utils/common';
   import JSONTree from 'svelte-json-tree';
+  import { formatObject } from '$lib/helpers/utils/common';
 
-  /** @type {Object?} */
-  export let data;
+  /** @type {{ data: Object | null }} */
+  let { data } = $props();
 </script>
 
 <div class="log-element state-log-item">
   <div class="log-content">
-    <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)"
-    />
+    {#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)"
+      />
+    {/if}
   </div>
 </div>
\ No newline at end of file
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 6083e57b..df3e1e63 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
@@ -1,21 +1,9 @@
 <script>
-    /** @type {any} */
-    export let data;
+    /** @type {{ data: any }} */
+    let { data } = $props();
 
-    /** @type {string} */
-    let beforeActiveRoundText = '';
-    let afterActiveRoundText = '';
-    let beforeDataValue = '';
-    let afterDataValue = '';
     const defaultValue = '-';
 
-    $: {
-        beforeDataValue = buildDataValue(data?.before_value);
-        afterDataValue = buildDataValue(data?.after_value);
-        beforeActiveRoundText = buildActiveRoundText(data?.before_value, data?.before_active_rounds);
-        afterActiveRoundText = buildActiveRoundText(data?.after_value, data?.after_active_rounds);
-    }
-
     /** @param {any} value */
     function buildDataValue(value) {
         return value || defaultValue;
@@ -28,7 +16,7 @@
     function buildActiveRoundText(value, activeRounds) {
         let text = '';
 
-        if (!!!value) {
+        if (!value) {
             return text;
         }
 
@@ -40,6 +28,11 @@
 
         return text;
     }
+
+    let beforeDataValue = $derived(buildDataValue(data?.before_value));
+    let afterDataValue = $derived(buildDataValue(data?.after_value));
+    let beforeActiveRoundText = $derived(buildActiveRoundText(data?.before_value, data?.before_active_rounds));
+    let afterActiveRoundText = $derived(buildActiveRoundText(data?.after_value, data?.after_active_rounds));
 </script>
 
 {#if beforeDataValue != defaultValue || afterDataValue != defaultValue}
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 5a50e757..ee65dee4 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
@@ -1,17 +1,13 @@
 <script>
-	import { Button } from '@sveltestrap/sveltestrap';
-    import Link from 'svelte-link/src/Link.svelte';
     import Markdown from "$lib/common/markdown/Markdown.svelte";
 	import { ContentLogSource } from '$lib/helpers/enums';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { directToAgentPage } from '$lib/helpers/utils/common';
 
-    /** @type {import('$conversationTypes').ConversationContentLogModel} */
-    export let data;
+    /** @type {{ data: import('$conversationTypes').ConversationContentLogModel }} */
+    let { data } = $props();
 
-    let logDisplayStyle = '';
-    let logTextStyle = '';
-    let is_collapsed = true;
+    let is_collapsed = $state(true);
     const unknownAgent = "Uknown";
     const collapsedSources = [
         ContentLogSource.Prompt,
@@ -25,22 +21,27 @@
         ContentLogSource.FunctionCall,
     ];
 
-    $: {
-        logDisplayStyle = '';
-        logTextStyle = '';
+    let logDisplayStyle = $derived.by(() => {
         if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
-            logDisplayStyle = 'border border-secondary';
-            logTextStyle = 'text-info';
+            return 'border border-secondary';
         } else if (data.source === ContentLogSource.FunctionCall) {
-            logDisplayStyle = 'bg-secondary';
+            return 'bg-secondary';
         } else if (data.source === ContentLogSource.Prompt) {
-            logDisplayStyle = 'text-secondary';
+            return 'text-secondary';
         } else if (data.source === ContentLogSource.HardRule) {
-            logDisplayStyle = 'text-warning';
+            return 'text-warning';
         } else if (data.source === ContentLogSource.UserInput) {
-            logDisplayStyle = "bg-danger";
+            return 'bg-danger';
         }
-    }
+        return '';
+    });
+
+    let logTextStyle = $derived.by(() => {
+        if (data.source === ContentLogSource.AgentResponse || data.source === ContentLogSource.Notification) {
+            return 'text-info';
+        }
+        return '';
+    });
 
     /** @param {any} e */
     function toggleText(e) {
@@ -54,9 +55,14 @@
         <div>
             <span class="h4">
             {#if data?.agent_id?.length > 0}
-                <Link class="text-secondary text-decoration-underline" on:click={() => directToAgentPage(data.agent_id)}>
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <span
+                    class="text-secondary text-decoration-underline clickable"
+                    onclick={() => directToAgentPage(data.agent_id)}
+                >
                     {data.name || unknownAgent}
-                </Link>
+                </span>
             {:else}
                 <span class="text-secondary">
                     {data.name || unknownAgent}
@@ -75,9 +81,9 @@
         </div>
 
         {#if collapsedSources.includes(data.source)}
-            <Button class='toggle-btn btn-sm' color="link" on:click={(e) => toggleText(e)}>
+            <button class="btn btn-link toggle-btn btn-sm" onclick={(e) => toggleText(e)}>
                 {`${is_collapsed ? 'More +' : 'Less -'}`}
-            </Button>
+            </button>
         {/if}
     </div>
 
@@ -85,5 +91,5 @@
     <div style="margin-top: 10px;">
         {`MessageId: ${data.message_id}`}
     </div>
-    {/if}         
+    {/if}
 </div>
\ No newline at end of file
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 931d2d53..2078217d 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
@@ -1,9 +1,9 @@
 <script>
     import JSONTree from 'svelte-json-tree';
-	import { formatObject } from '$lib/helpers/utils/common';
+    import { formatObject } from '$lib/helpers/utils/common';
 
-    /** @type {any} */
-    export let data;
+    /** @type {{ data: any }} */
+    let { data } = $props();
 </script>
 
 <div class="log-element state-log-item" id={`state-log-${data.message_id}`}>
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 1d355955..dc90158b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
@@ -1,6 +1,6 @@
 <script>
-    import { afterUpdate, beforeUpdate, onDestroy, onMount, tick } from 'svelte';
-    import { page } from '$app/stores';
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
     import moment from 'moment';
     import { v4 as uuidv4 } from 'uuid';
     import 'overlayscrollbars/overlayscrollbars.css';
@@ -10,10 +10,10 @@
     import NavItem from '$lib/common/nav-bar/NavItem.svelte';
     import ContentLogElement from './content-log-element.svelte';
 	import ConversationStateLogElement from './conversation-state-log-element.svelte';
-	
+
     const contentLogTab = 1;
     const conversationStateLogTab = 2;
-    const conversationId = $page.params.conversationId;
+    const conversationId = page.params.conversationId;
     const utcNow = moment.utc().toDate();
 
     const scrollbarElements = [
@@ -27,25 +27,27 @@
         }
     ];
 
-    /** @type {import('$conversationTypes').ConversationContentLogModel[]} */
-    export let contentLogs = [];
-
-    /** @type {import('$conversationTypes').ConversationStateLogModel[]} */
-    export let convStateLogs = [];
-
-    /** @type {boolean} */
-    export let autoScroll = false;
-
-    /** @type {() => void} */
-    export let closeWindow;
-
-    /** @type {() => void} */
-    export let cleanScreen;
+    /**
+     * @type {{
+     *   contentLogs?: import('$conversationTypes').ConversationContentLogModel[],
+     *   convStateLogs?: import('$conversationTypes').ConversationStateLogModel[],
+     *   autoScroll?: boolean,
+     *   closeWindow: () => void,
+     *   cleanScreen: () => void
+     * }}
+     */
+    let {
+        contentLogs = $bindable([]),
+        convStateLogs = $bindable([]),
+        autoScroll = $bindable(false),
+        closeWindow,
+        cleanScreen
+    } = $props();
 
     /** @type {any[]} */
     let scrollbars = [];
     /** @type {number} */
-    let selectedTab = contentLogTab;
+    let selectedTab = $state(contentLogTab);
 
     /** @type {import('$conversationTypes').ConversationLogFilter} */
     let contentLogFilter = { size: 100, startTime: utcNow };
@@ -64,29 +66,25 @@
 		}
 	};
 
-    onMount(async () => {
-        await getChatContentLogs();
-        await getChatStateLogs();
+    onMount(() => {
+        Promise.all([getChatContentLogs(), getChatStateLogs()]).then(() => {
+            initScrollbars();
+            scroll();
+        });
 
-        initScrollbars();
-		scroll();
+        return () => {
+            cleanLogs();
+        };
 	});
 
-    beforeUpdate(() => {});
-
-    afterUpdate(() => {
-        refresh();
-    });
-
-    onDestroy(() => {
-        cleanLogs();
-    });
-
-    function refresh() {
+    $effect(() => {
+        // Re-run whenever autoScroll or logs change
+        contentLogs;
+        convStateLogs;
         if (autoScroll) {
             scroll();
         }
-    }
+    });
 
     /** @param {boolean} goToTop */
     function scroll(goToTop = false) {
@@ -113,6 +111,7 @@
     async function getChatContentLogs() {
         if (!contentLogFilter.startTime) return;
 
+        // @ts-ignore
         const pagedContentLogs = await getContentLogs(conversationId, contentLogFilter);
         contentLogFilter = {
             ...contentLogFilter,
@@ -130,6 +129,7 @@
     async function getChatStateLogs() {
         if (!stateLogFilter.startTime) return;
 
+        // @ts-ignore
         const pagedStateLogs = await getStateLogs(conversationId, stateLogFilter);
         stateLogFilter = {
             ...stateLogFilter,
@@ -182,9 +182,9 @@
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Clean log"
-                    on:click={() => handleCleanScreen()}
+                    onclick={() => handleCleanScreen()}
                 >
-                    <i class="bx bx-trash" />
+                    <i class="bx bx-trash"></i>
                 </button>
             </div>
             <div>
@@ -194,9 +194,9 @@
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Scroll to top"
-                    on:click={() => goToTopLog()}
+                    onclick={() => goToTopLog()}
                 >
-                    <i class="mdi mdi-chevron-double-up" />
+                    <i class="mdi mdi-chevron-double-up"></i>
                 </button>
                 <button
                     type="button"
@@ -204,18 +204,19 @@
                     data-bs-toggle="tooltip"
                     data-bs-placement="top"
                     title="Scroll to bottom"
-                    on:click={() => scroll()}
+                    onclick={() => scroll()}
                 >
-                    <i class="mdi mdi-chevron-double-down" />
+                    <i class="mdi mdi-chevron-double-down"></i>
                 </button>
             </div>
             <div>
                 <button
                     type="button"
                     class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
-                    on:click={() => closeWindow()}
+                    aria-label="Close log window"
+                    onclick={() => closeWindow()}
                 >
-                    <i class="mdi mdi-window-close" />
+                    <i class="mdi mdi-window-close"></i>
                 </button>
             </div>
         </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 c1e7194b..e20d7ccd 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
@@ -1,22 +1,25 @@
 <script>
     import { getContext, onMount } from "svelte";
     import { fade } from 'svelte/transition';
-	import { Card, CardBody } from "@sveltestrap/sveltestrap";
 	import { ElementType } from "$lib/helpers/enums";
-    
-    /** @type {boolean} */
-    export let disabled = false;
 
-    /** @type {any[]} */
-    export let options = [];
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm;
+    /**
+     * @type {{
+     *   disabled?: boolean,
+     *   options?: any[],
+     *   onConfirm?: (args0: string, args1: string) => any
+     * }}
+     */
+    let {
+        disabled = false,
+        options = [],
+        onConfirm
+    } = $props();
 
     /** @type {any[]} */
-    let cards = [];
+    let cards = $state([]);
     /** @type {any[]} */
-    let buttons = [];
+    let buttons = $state([]);
 
     const duration = 1000;
 
@@ -52,7 +55,7 @@
             };
         }) || [];
 
-        buttons = options?.filter(op => !!!op.title && !!!op.subtitle)?.flatMap(op => {
+        buttons = options?.filter(op => !op.title && !op.subtitle)?.flatMap(op => {
             // @ts-ignore
             return op.buttons?.filter(x => !!x.title)?.map(x => {
                 return {
@@ -100,8 +103,8 @@
     <div class="complex-option-container">
         {#each cards as card, idx (idx)}
             <div class="card-element" in:fade={{ duration: duration }}>
-                <Card>
-                    <CardBody class="card-element-body">
+                <div class="card">
+                    <div class="card-body card-element-body">
                         {#if !!card.title}
                             <div class="card-element-title hide-text">{card.title}</div>
                         {/if}
@@ -124,15 +127,15 @@
                                     <button
                                         class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
                                         disabled={disabled}
-                                        on:click={(e) => handleClickOption(e, option)}
+                                        onclick={(e) => handleClickOption(e, option)}
                                     >
                                         <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>{option.title}</span>
                                     </button>
                                 {/each}
                             </div>
                         {/if}
-                    </CardBody>
-                </Card>
+                    </div>
+                </div>
             </div>
         {/each}
     </div>
@@ -140,12 +143,12 @@
 
 {#if buttons}
     <div class="plain-option-container center-option" style="margin-top: 5px;">
-        {#each buttons as option, index}
+        {#each buttons as option, index (index)}
             <button
                 class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
                 in:fade={{ duration: duration }}
                 disabled={disabled}
-                on:click={(e) => handleClickOption(e, option)}
+                onclick={(e) => handleClickOption(e, option)}
             >
                 {option.title}
             </button>
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 43fb4ac3..a095dab1 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-disclaimer.svelte
@@ -1,6 +1,6 @@
 <script>
-     /** @type {string} */
-     export let content;
+     /** @type {{ content: string }} */
+     let { content } = $props();
 </script>
 
 <div class="msg-disclaimer">
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 e1616011..408f3f0f 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
@@ -6,17 +6,20 @@
     import { v4 as uuidv4 } from 'uuid';
 	import LoadingDots from "$lib/common/spinners/LoadingDots.svelte";
 
-    /** @type {import('$conversationTypes').ChatResponseModel?} */
-    export let message;
-
-   /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {string} */
-    export let containerStyles = '';
-
-    /** @type {boolean} */
-	export let scrollable = false;
+    /**
+     * @type {{
+     *   message?: import('$conversationTypes').ChatResponseModel | null,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   scrollable?: boolean
+     * }}
+     */
+    let {
+        message = null,
+        containerClasses = '',
+        containerStyles = '',
+        scrollable = false
+    } = $props();
 
     const scrollbarId = `js-interpreter-scrollbar-${uuidv4()}`;
     const options = {
@@ -32,7 +35,7 @@
 	};
 
     /** @type {boolean} */
-    let isLoading = false;
+    let isLoading = $state(false);
 
     onMount(() => {
         if (scrollable) {
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 1367aee5..26072039 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-message.svelte
@@ -3,19 +3,22 @@
 	import { RichType } from "$lib/helpers/enums";
 	import RcJsInterpreter from "./rc-js-interpreter.svelte";
 
-    /** @type {import('$conversationTypes').ChatResponseModel?} */
-    export let message;
+    /**
+     * @type {{
+     *   message?: import('$conversationTypes').ChatResponseModel | null,
+     *   containerClasses?: string,
+     *   containerStyles?: string,
+     *   markdownClasses?: string
+     * }}
+     */
+    let {
+        message = null,
+        containerClasses = '',
+        containerStyles = '',
+        markdownClasses = ''
+    } = $props();
 
-    /** @type {string} */
-    export let containerClasses = '';
-
-    /** @type {string} */
-    export let containerStyles = '';
-
-    /** @type {string} */
-    export let markdownClasses = '';
-
-    $: text = message?.rich_content?.message?.text || message?.text || '';
+    let text = $derived(message?.rich_content?.message?.text || message?.text || '');
 </script>
 
 {#if text}
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 22c1604c..2a7f73fd 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
@@ -2,24 +2,25 @@
 	import { getContext, onMount } from "svelte";
     import { fade } from 'svelte/transition';
     import SveltePlayer from "svelte-player";
-    import { Card, CardBody } from "@sveltestrap/sveltestrap";
     import { ElementType } from "$lib/helpers/enums";
 	import ChatFileUploader from "../chat-util/chat-file-uploader.svelte";
 
-    /** @type {boolean} */
-    export let isMultiSelect = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-    
-    /** @type {any[]} */
-    export let options = [];
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
-
-    /** @type {string} */
-    export let confirmBtnText = 'Continue';
+    /**
+     * @type {{
+     *   isMultiSelect?: boolean,
+     *   disabled?: boolean,
+     *   options?: any[],
+     *   onConfirm?: (args0: string, args1: string) => any,
+     *   confirmBtnText?: string
+     * }}
+     */
+    let {
+        isMultiSelect = false,
+        disabled = false,
+        options = [],
+        confirmBtnText = 'Continue',
+        onConfirm = () => {}
+    } = $props();
 
     const duration = 1000;
     const separator = '|';
@@ -29,15 +30,15 @@
     ];
 
     /** @type {string[]} */
-    let titleAnswers = [];
+    let titleAnswers = $state([]);
     /** @type {string[]} */
-    let payloadAnswers = [];
+    let payloadAnswers = $state([]);
     /** @type {any[]} */
-    let plainOptions = [];
+    let plainOptions = $state([]);
     /** @type {any[]} */
-    let videoOptions = [];
+    let videoOptions = $state([]);
     /** @type {any} */
-    let fileOption;
+    let fileOption = $state(undefined);
 
     const { autoScrollToBottom }  = getContext('chat-window-context');
 
@@ -87,7 +88,7 @@
                     op.isClicked = !op.isClicked;
                     if (op.isClicked) {
                         titleAnswers = [...titleAnswers, op.title];
-                        if (!!op.payload) {
+                        if (op.payload) {
                             payloadAnswers = [...payloadAnswers, op.payload];
                         }
                     } else {
@@ -131,18 +132,18 @@
 
 {#if videoOptions}
 <div class="video-option-container center-option">
-    {#each videoOptions as video, index}
+    {#each videoOptions as video}
         <div class="video-element-card" in:fade={{ duration: duration }}>
-            <Card>
-                <CardBody>
+            <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>
-                </CardBody>
-            </Card>
+                </div>
+            </div>
         </div>
     {/each}
 </div>
@@ -156,7 +157,7 @@
             class:active={!!option.isClicked}
             disabled={disabled}
             in:fade={{ duration: duration }}
-            on:click={(e) => handleClickOption(e, option, index)}
+            onclick={(e) => handleClickOption(e, option, index)}
         >
             <span class={`${option.type === ElementType.Web && option.url ? 'link-option' : ''}`}>
                 {option.title}
@@ -168,8 +169,8 @@
             class="btn btn-outline-success btn-sm m-1"
             name="confirm"
             in:fade={{ duration: duration }}
-            disabled={disabled || plainOptions.every(x => !!!x.isClicked)}
-            on:click={(e) => handleConfirm(e)}
+            disabled={disabled || plainOptions.every(x => !x.isClicked)}
+            onclick={(e) => handleConfirm(e)}
         >
             {confirmBtnText || 'Continue'}
         </button>
@@ -177,7 +178,7 @@
     {#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 }}>
-                <i class="bx bx-image-add" />
+                <i class="bx bx-image-add"></i>
             </span>
         </ChatFileUploader>
     {/if}
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
index 6b1792c3..76653a03 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
@@ -3,41 +3,39 @@
 	import RcPlainOptions from "./rc-plain-options.svelte";
 	import RcComplexOptions from "./rc-complex-options.svelte";
 	import ChatAttachmentOptions from "../chat-util/chat-attachment-options.svelte";
-	
-    /** @type {import('$conversationTypes').ChatResponseModel?} */
-    export let message;
 
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
-
-    /** @type {boolean} */
-    let isComplexElement = false;
-    let isMultiSelect = false;
-
-    /** @type {any[] | undefined} */
-    let options = [];
-
-    $: {
+    /**
+     * @type {{
+     *   message?: import('$conversationTypes').ChatResponseModel | null,
+     *   disabled?: boolean,
+     *   onConfirm?: (args0: string, args1: string) => any
+     * }}
+     */
+    let {
+        message = null,
+        disabled = false,
+        onConfirm = () => {}
+    } = $props();
+
+    let resolvedOptions = $derived.by(() => {
         const richType = message?.rich_content?.message?.rich_type;
 
         if (richType === RichType.QuickReply) {
-            options = message?.rich_content?.message?.quick_replies;
+            return { options: message?.rich_content?.message?.quick_replies, isMultiSelect: false, isComplexElement: false };
         } else if (richType === RichType.Button || richType === RichType.Upload) {
-            options = message?.rich_content?.message?.buttons;
+            return { options: message?.rich_content?.message?.buttons, isMultiSelect: false, isComplexElement: false };
         } else if (richType === RichType.MultiSelect) {
-            options = message?.rich_content?.message?.options;
-            isMultiSelect = true;
+            return { options: message?.rich_content?.message?.options, isMultiSelect: true, isComplexElement: false };
         } else if (richType === RichType.Generic) {
-            options = message?.rich_content?.message?.elements;
+            const elements = message?.rich_content?.message?.elements;
             // @ts-ignore
-            isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
+            const isComplex = elements?.some(x => x.buttons?.length > 0) || false;
+            return { options: elements, isMultiSelect: false, isComplexElement: isComplex };
         } else if (message?.rich_content?.editor === EditorType.File) {
-            options = message?.rich_content?.message?.buttons;
+            return { options: message?.rich_content?.message?.buttons, isMultiSelect: false, isComplexElement: false };
         }
-    }
+        return { options: [], isMultiSelect: false, isComplexElement: false };
+    });
 
     /**
      * @param {string} title
@@ -51,11 +49,11 @@
 
 
 {#if message?.rich_content?.editor === EditorType.File}
-    <ChatAttachmentOptions options={options} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
+    <ChatAttachmentOptions options={resolvedOptions.options} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
 {:else}
-    {#if !isComplexElement}
-        <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
+    {#if !resolvedOptions.isComplexElement}
+        <RcPlainOptions options={resolvedOptions.options} isMultiSelect={resolvedOptions.isMultiSelect} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
     {:else}
-        <RcComplexOptions options={options} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
+        <RcComplexOptions options={resolvedOptions.options} disabled={disabled} onConfirm={(title, payload) => handleConfirm(title, payload)} />
     {/if}
 {/if}
\ No newline at end of file
diff --git a/src/routes/page/+layout.svelte b/src/routes/page/+layout.svelte
index c6e8bc1d..2fba0a53 100644
--- a/src/routes/page/+layout.svelte
+++ b/src/routes/page/+layout.svelte
@@ -8,11 +8,11 @@
 	import LiveChat from '$lib/common/shared/LiveChatEntry.svelte';
 	import VerticalLayout from '../VerticalLayout/Index.svelte';
 
-	let component = VerticalLayout;
+	let { children } = $props();
 </script>
 
-<svelte:component this={component}>
-	<slot />
-</svelte:component>
+<VerticalLayout>
+	{@render children?.()}
+</VerticalLayout>
 
 <LiveChat />
\ No newline at end of file
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index c89e7cf9..183c4e9a 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -3,8 +3,7 @@
 	import { _ } from 'svelte-i18n';
 	import { goto } from '$app/navigation';
 	import Swal from 'sweetalert2';
-	import { page } from '$app/stores';
-	import { Button, Col, Input, Row } from '@sveltestrap/sveltestrap';
+	import { page } from '$app/state';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -21,20 +20,20 @@
 		goToUrl
 	} from '$lib/helpers/utils/common';
 	import CardAgent from './card-agent.svelte';
-	
-	
+
+
   	const firstPage = 1;
 	const pageSize = 12;
 
 	/** @type {boolean} */
-    let isLoading = false;
-	let isPageMounted = false;
+    let isLoading = $state(false);
+	let isPageMounted = $state(false);
 
 	/** @type {AbortController | null | undefined} */
 	let abortController;
 
 	/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>} */
-  	let agents = { items: [], count: 0 };
+  	let agents = $state({ items: [], count: 0 });
 
 	/** @type {import('$agentTypes').AgentFilter} */
 	const initFilter = {
@@ -42,40 +41,41 @@
 	};
 
 	/** @type {import('$agentTypes').AgentFilter} */
-	let filter = { ...initFilter };
+	let filter = $state({ ...initFilter });
 
+	// svelte-ignore state_referenced_locally
 	/** @type {import('$commonTypes').Pagination} */
-	let pager = filter.pager;
+	let pager = $state(filter.pager);
 
-	/** @type {import('$userTypes').UserModel} */
-	let user;
+	/** @type {import('$userTypes').UserModel | undefined} */
+	let user = $state();
 
 	/** @type {any} */
 	let unsubscriber;
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	const agentTypeOptions = Object.entries(AgentType).map(([k, v]) => (
+	const agentTypeOptions = Object.entries(AgentType).map(([_, v]) => (
 		{ label: v, value: v }
 	)).sort((a, b) => a.label.localeCompare(b.label));
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let agentLabelOptions = [];
+	let agentLabelOptions = $state([]);
 
 	/** @type {{ name: string, types: string[], labels: string[] }} */
-	let searchItem = {
+	let searchItem = $state({
 		name: '',
 		types: [],
 		labels: []
-	};
+	});
 
 	onMount(async () => {
 		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
-			page: $page.url.searchParams.get("page"),
-			pageSize: $page.url.searchParams.get("pageSize")
+			page: page.url.searchParams.get("page"),
+			pageSize: page.url.searchParams.get("pageSize")
 		}, { defaultPageSize: pageSize });
 
-		const similarName = $page.url.searchParams.get("similarName")?.trim();
+		const similarName = page.url.searchParams.get("similarName")?.trim();
 
 		filter = {
 			...filter,
@@ -201,7 +201,7 @@
 			queryParams.push({ key: 'similarName', value: encodeURIComponent(filter.similarName) });
 		}
 
-		setUrlQueryParams($page.url, queryParams, (url) => {
+		setUrlQueryParams(page.url, queryParams, (url) => {
 			if (!isPageMounted) return;
 			goToUrl(`${url.pathname}${url.search}`)
 		});
@@ -287,8 +287,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('List')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('List')}" />
+<HeadTitle title={$_('List')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('List')} />
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -297,20 +297,21 @@
 <div class="agents-header-container mb-4">
 	<div>
 		{#if !!user && (ADMIN_ROLES.includes(user.role || '') || !!user.permissions?.includes(UserPermission.CreateAgent))}
-		<Button color="primary" on:click={() => createNewAgent()}>
-			<i class="mdi mdi-content-copy" /> {$_('New Agent')}
-		</Button>
+		<button type="button" class="btn btn-primary" onclick={() => createNewAgent()}>
+			<i class="mdi mdi-content-copy"></i> {$_('New Agent')}
+		</button>
 		{/if}
 	</div>
 	<div class="agent-filter">
-		<Input
+		<input
 			type="text"
+			class="form-control"
 			placeholder="Search by name"
 			style="width: fit-content;"
 			maxlength={500}
 			value={searchItem.name}
-			on:input={e => changeSearchName(e)}
-			on:keydown={e => searchKeyDown(e)}
+			oninput={e => changeSearchName(e)}
+			onkeydown={e => searchKeyDown(e)}
 		/>
 		<Select
 			tag={'agent-label-select'}
@@ -320,7 +321,7 @@
 			searchMode
 			selectedValues={searchItem.labels}
 			options={agentLabelOptions}
-			on:select={e => selectAgentLabelOption(e)}
+			onselect={e => selectAgentLabelOption(e)}
 		/>
 		<Select
 			tag={'agent-type-select'}
@@ -330,32 +331,34 @@
 			searchMode
 			selectedValues={searchItem.types}
 			options={agentTypeOptions}
-			on:select={e => selectAgentTypeOption(e)}
+			onselect={e => selectAgentTypeOption(e)}
 		/>
-		<Button
+		<button
+			type="button"
 			class="btn btn-info"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
 			title="Search"
-			on:click={(e) => search()}
+			onclick={() => search()}
 		>
-			<i class="mdi mdi-magnify" />
-		</Button>
-		<Button
+			<i class="mdi mdi-magnify"></i>
+		</button>
+		<button
+			type="button"
 			class="btn btn-warning"
 			data-bs-toggle="tooltip"
 			data-bs-placement="bottom"
 			title="Reset"
-			on:click={(e) => reset()}
+			onclick={() => reset()}
 		>
-			<i class="mdi mdi-restore" />
-		</Button>
+			<i class="mdi mdi-restore"></i>
+		</button>
 	</div>
 </div>
 
 
-<Row>
+<div class="row">
 	<CardAgent agents={agents.items} />
-</Row>
+</div>
 
 <PlainPagination pagination={pager} pageTo={pn => pageTo(pn)} />
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 7ab14cf6..209f072c 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -1,10 +1,9 @@
 <script>
     import { onDestroy, onMount } from 'svelte';
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
     import { goto } from '$app/navigation';
-    import { _ } from 'svelte-i18n'; 
+    import { _ } from 'svelte-i18n';
     import Swal from 'sweetalert2';
-	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -20,31 +19,33 @@
     import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
-    let agent;
+    let agent = $state(/** @type {any} */ (undefined));
     /** @type {any} */
-    let agentFunctionCmp = null;
+    let agentFunctionCmp = $state(null);
     /** @type {any} */
-    let agentInstructionCmp = null;
+    let agentInstructionCmp = $state(null);
     /** @type {any} */
-    let agentTemplateCmp = null;
+    let agentTemplateCmp = $state(null);
     /** @type {any} */
-    let agentTabsCmp = null;
+    let agentTabsCmp = $state(null);
+    /** @type {import('$userTypes').UserModel} */
+	let user = $state(/** @type {any} */ (undefined));
     /** @type {any} */
 	let unsubscriber;
-    /** @type {import('$userTypes').UserModel} */
-	let user;
 
     /** @type {boolean} */
-    let isLoading = false;
-    let isComplete = false;
+    let isLoading = $state(false);
+    let isComplete = $state(false);
 
     const duration = 3000;
 
-    $: agentId = $page.params.agentId;
+    let agentId = $derived(page.params.agentId);
 
-    $: if (agentId) {
-        loadAgent(agentId);
-    }
+    $effect(() => {
+        if (agentId) {
+            loadAgent(agentId);
+        }
+    });
 
     async function loadAgent(/** @type {string} */ id) {
         isLoading = true;
@@ -108,14 +109,14 @@
             }
         };
         isLoading = true;
-        saveAgent(agent).then(res => {
+        saveAgent(agent).then(() => {
             isLoading = false;
             isComplete = true;
             refresh();
             setTimeout(() => {
                 isComplete = false;
             }, duration);
-        }).catch(err => {
+        }).catch(() => {
             isLoading = false;
             isComplete = false;
         });
@@ -180,7 +181,7 @@
     }
 
     function handleAgentDelete() {
-        deleteAgent(agent?.id).then(res => {
+        deleteAgent(agent?.id).then(() => {
             goto(`page/agent`);
         });
     }
@@ -190,8 +191,8 @@
     }
 </script>
 
-<HeadTitle title="{$_('Agent Overview')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Agent Overview')}" />
+<HeadTitle title={$_('Agent Overview')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('Agent Overview')} />
 
 <LoadingToComplete
     isLoading={isLoading}
@@ -200,13 +201,13 @@
 
 {#if agent}
 <div>
-    <Row class="agent-detail-sections">
-        <Col class="section-min-width agent-col" style="flex: 40%;">
+    <div class="row agent-detail-sections">
+        <div class="col section-min-width agent-col" style="flex: 40%;">
             <div class="agent-detail-section">
                 <AgentOverview
-                    agent={agent}
-                    profiles={agent.profiles || []}
-                    labels={agent.labels || []}
+                    bind:agent={agent}
+                    bind:profiles={agent.profiles}
+                    bind:labels={agent.labels}
                 />
             </div>
             <div class="agent-detail-section">
@@ -216,36 +217,36 @@
                     user={user}
                 />
             </div>
-        </Col>
-        <Col class="section-min-width agent-col" style="flex: 60%;">
+        </div>
+        <div class="col section-min-width agent-col" style="flex: 60%;">
             <div class="agent-detail-section">
                 <AgentInstruction
                     bind:this={agentInstructionCmp}
-                    agent={agent}
+                    bind:agent={agent}
                 />
             </div>
             <div class="agent-detail-section">
                 <AgentTemplate
                     bind:this={agentTemplateCmp}
-                    agent={agent}
+                    bind:agent={agent}
                 />
             </div>
             <div class="agent-detail-section">
                 <AgentFunction
                     bind:this={agentFunctionCmp}
-                    agent={agent}
+                    bind:agent={agent}
                 />
             </div>
-        </Col>
-    </Row>
+        </div>
+    </div>
 
     {#if !!AgentExtensions.editable(agent)}
-        <Row>
+        <div class="row">
             <div class="hstack gap-2 my-4">
-                <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
-                <Button class="btn btn-danger" on:click={() => deleteCurrentAgent()}>{$_('Delete Agent')}</Button>
+                <button type="button" class="btn btn-soft-primary" onclick={() => updateCurrentAgent()}>{$_('Save Agent')}</button>
+                <button type="button" class="btn btn-danger" onclick={() => deleteCurrentAgent()}>{$_('Delete Agent')}</button>
             </div>
-        </Row>
+        </div>
     {/if}
 </div>
 {/if}
\ No newline at end of file
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 b54e59be..523aebb5 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
@@ -1,23 +1,30 @@
 <script>
-    import { JSONEditor, Mode } from 'svelte-jsoneditor';
     import { onMount } from 'svelte';
+    import { JSONEditor, Mode } from 'svelte-jsoneditor';
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent = $bindable(),
+        handleAgentChange = () => {}
+    } = $props();
 
-    export const fetchContent = () => {
+    export function fetchContent() {
         return content;
     }
 
-    export const refresh = () => init();
+    export function refresh() {
+        init();
+    }
 
     /** @type {import('svelte-jsoneditor').Content} */
-    let content = {
+    let content = $state({
         json: {}
-    };
+    });
 
     onMount(() => {
         init();
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 f745a866..d2183627 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
@@ -1,21 +1,24 @@
 <script>
     import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
     import util from "lodash";
-    import { Card, CardBody, FormGroup, Input, CardHeader } from '@sveltestrap/sveltestrap';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
-	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+    import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 
     const defaultChannel = "default";
-    
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
 
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchInstructions = () => {
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent = $bindable(),
+        handleAgentChange = () => {}
+    } = $props();
+
+    export function fetchInstructions() {
         const candidates = inner_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
             return { channel: x.channel.trim().toLowerCase(), instruction: x.instruction };
         });
@@ -34,8 +37,9 @@
         };
     }
 
-    export const refresh = () => init();
-
+    export function refresh() {
+        init();
+    }
 
     /** @type {import('$agentTypes').ChannelInstruction} */
     const defaultInstruction = {
@@ -44,10 +48,10 @@
     };
 
     /** @type {import('$agentTypes').ChannelInstruction[]} */
-    let inner_instructions = [];
+    let inner_instructions = $state([]);
 
     /** @type {import('$agentTypes').ChannelInstruction} */
-    let selected_instruction = { ...defaultInstruction };
+    let selected_instruction = $state({ ...defaultInstruction });
 
     onMount(() => {
         init();
@@ -127,33 +131,32 @@
     }
 </script>
 
-<Card class="agent-prompt-container">
-    <CardHeader class="agent-prompt-header border-bottom">
+<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>
-    </CardHeader>
-    <CardBody>
-        <FormGroup>
+    </div>
+    <div class="card-body">
+        <div class="mb-3">
             <div class="mb-2">
                 <div class="line-align-center fw-bold">
                     {'Description:'}
                 </div>
             </div>
-            <Input
-                type="textarea"
+            <textarea
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
                 rows={4}
                 bind:value={agent.description}
                 placeholder="Enter your Message"
-                on:input={handleAgentChange}
-            />
-        </FormGroup>
+                oninput={() => handleAgentChange()}
+            ></textarea>
+        </div>
 
-        <FormGroup class="agent-prompt-body">
+        <div class="mb-3 agent-prompt-body">
             <div class="mb-2" style="display: flex; gap: 10px;">
                 <div class="line-align-center fw-bold">
                     {#if inner_instructions.length > 1}
@@ -162,20 +165,20 @@
                         {'System instruction:'}
                     {/if}
                 </div>
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <!-- 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 channel instruction"
                     style="font-size: 16px;"
-                    on:click={() => addChannel()}
+                    onclick={() => addChannel()}
                 >
-                    <i class="mdi mdi-plus-circle-outline" />
+                    <i class="mdi mdi-plus-circle-outline"></i>
                 </div>
             </div>
-            
+
             {#if inner_instructions.length > 1}
             <NavBar
                 id={'agent-instruction-container'}
@@ -202,16 +205,15 @@
                 {/each}
             </NavBar>
             {/if}
-            <Input
-                type="textarea"
+            <textarea
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
                 value={selected_instruction.instruction}
                 rows={20}
-                on:input={(e) => changePrompt(e)}
-                on:keydown={(e) => onKeyDown(e)}
+                oninput={(e) => changePrompt(e)}
+                onkeydown={(e) => onKeyDown(e)}
                 placeholder="Enter your instruction"
-            />
-        </FormGroup>
-    </CardBody>
-</Card>
\ No newline at end of file
+            ></textarea>
+        </div>
+    </div>
+</div>
\ No newline at end of file
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 bb3701d6..ba9d1538 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
@@ -1,18 +1,22 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody } from '@sveltestrap/sveltestrap';
     import { getLlmConfigs } from '$lib/services/llm-provider-service';
     import { LlmModelCapability, LlmModelType } from '$lib/helpers/enums';
-	import ChatConfig from './llm-configs/chat-config.svelte';
-	import LlmBasicConfig from './llm-configs/llm-basic-config.svelte';
-    
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
+    import ChatConfig from './llm-configs/chat-config.svelte';
+    import LlmBasicConfig from './llm-configs/llm-basic-config.svelte';
 
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        handleAgentChange = () => {}
+    } = $props();
 
-    export const fetchLlmConfig = () => {
+    export function fetchLlmConfig() {
         const chatConfig = chatConfigCmp?.fetchConfig();
         const imageCompositionConfig = imageCompositionConfigCmp?.fetchConfig();
         const audioTranscriptionConfig = audioTranscriptionConfigCmp?.fetchConfig();
@@ -26,31 +30,27 @@
     }
 
     /** @type {any} */
-    let chatConfigCmp;
+    let chatConfigCmp = $state(null);
     /** @type {any} */
-    let imageCompositionConfigCmp;
+    let imageCompositionConfigCmp = $state(null);
     /** @type {any} */
-    let audioTranscriptionConfigCmp;
+    let audioTranscriptionConfigCmp = $state(null);
     /** @type {any} */
-    let realtimeConfigCmp;
-    
-    /** @type {import('$commonTypes').LlmConfig[]} */
-    let llmConfigs = [];
+    let realtimeConfigCmp = $state(null);
 
-    onMount(async () =>{
-        await init();
-    });
+    /** @type {import('$commonTypes').LlmConfig[]} */
+    let llmConfigs = $state([]);
 
-    async function init() {
+    onMount(async () => {
         llmConfigs = await getLlmConfigs();
-    }
+    });
 </script>
 
-<Card>
-    <CardBody>
+<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="" height="50" />
+            <img src="images/brands/azure-openai-logo.avif" alt="" style="height: 50px; width: auto; display: inline-block;" />
         </div>
 
         <div class="agent-utility-container">
@@ -66,7 +66,7 @@
                 llmConfigOptions={llmConfigs}
                 llmConfig={agent.llm_config?.image_composition}
                 modelType={LlmModelType.Image}
-                modelCapability={LlmModelCapability.ImageComposition} 
+                modelCapability={LlmModelCapability.ImageComposition}
                 {handleAgentChange}
             />
             <LlmBasicConfig
@@ -75,7 +75,7 @@
                 llmConfigOptions={llmConfigs}
                 llmConfig={agent.llm_config?.audio_transcription}
                 modelType={LlmModelType.Audio}
-                modelCapability={LlmModelCapability.AudioTranscription} 
+                modelCapability={LlmModelCapability.AudioTranscription}
                 {handleAgentChange}
             />
             <LlmBasicConfig
@@ -84,9 +84,9 @@
                 llmConfigOptions={llmConfigs}
                 llmConfig={agent.llm_config?.realtime}
                 modelType={LlmModelType.Realtime}
-                modelCapability={LlmModelCapability.Realtime} 
+                modelCapability={LlmModelCapability.Realtime}
                 {handleAgentChange}
             />
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
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 8d20f484..9d302c58 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -1,7 +1,4 @@
 <script>
-    import { onMount } from 'svelte';
-    import { Button, Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
-    import { _ } from 'svelte-i18n';
     import InPlaceEdit from '$lib/common/shared/InPlaceEdit.svelte';
     import Select from '$lib/common/dropdowns/Select.svelte';
     import { utcToLocal } from '$lib/helpers/datetime';
@@ -10,38 +7,33 @@
 
     const limit = 10;
 
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {string[]} */
-    export let profiles = [];
-
-    /** @type {string[]} */
-    export let labels = [];
-    
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   profiles?: string[],
+     *   labels?: string[],
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent = $bindable(),
+        profiles = $bindable([]),
+        labels = $bindable([]),
+        handleAgentChange = () => {}
+    } = $props();
 
     /** @type {import('$commonTypes').IdName[]} */
-	let routingModeOptions = Object.entries(RoutingMode).map(([k, v]) => (
-		{ id: v, name: v }
-	));
+	let routingModeOptions = [
+        { id: null, name: '' },
+        ...Object.entries(RoutingMode).map(([_, v]) => ({ id: v, name: v }))
+    ];
 
-    const functionVisibilityModeOptions = Object.entries(FunctionVisMode).map(([k, v]) => (
+    const functionVisibilityModeOptions = Object.entries(FunctionVisMode).map(([_, v]) => (
 		{ label: v, value: v }
 	));
-   
-    onMount(() => {
-        init();
-    });
 
-    function init() {
-        routingModeOptions = [{ id: null, name: '' }, ...routingModeOptions];
-    }
-    
     function addProfile() {
-        if (!!!agent) return;
+        if (!agent) return;
 
         profiles = [...profiles, ''];
         agent.profiles = profiles;
@@ -58,7 +50,7 @@
     }
 
     function addLabel() {
-        if (!!!agent) return;
+        if (!agent) return;
 
         labels = [...labels, ''];
         agent.labels = labels;
@@ -94,41 +86,44 @@
     }
 
     function chatWithAgent() {
-        if (!!!agent?.id) return;
-        
+        if (!agent?.id) return;
+
         window.open(`/chat/${agent?.id}`, '_blank');
     }
 </script>
 
-<Card>
-    <CardHeader>
+<div class="card">
+    <div class="card-header">
         <div class="text-center">
             <div class="agent-overview-header">
                 <img
                     src="images/users/bot.png"
                     alt=""
+                    width="50"
                     height="50"
+                    style="width: 50px; height: 50px;"
                     class="mx-auto d-block"
                 />
                 {#if !!AgentExtensions.chatable(agent)}
-                    <Button
+                    <button
+                        type="button"
                         class="btn btn-sm btn-soft-info agent-chat"
-                        on:click={() => chatWithAgent()}
+                        onclick={() => chatWithAgent()}
                     >
                         <span>{'Chat with me'}</span>
-                        <span><i class="mdi mdi-chat" /></span>
-                    </Button>
+                        <span><i class="mdi mdi-chat"></i></span>
+                    </button>
                 {/if}
             </div>
             <h5 class="mt-1 mb-1 div-center">
-                <InPlaceEdit bind:value={agent.name} on:input={handleAgentChange} />
+                <InPlaceEdit bind:value={agent.name} onInput={handleAgentChange} />
             </h5>
             <p class="text-muted mb-0">{`Updated at ${utcToLocal(agent.updated_datetime)}`}</p>
         </div>
-    </CardHeader>
-    <CardBody>
+    </div>
+    <div class="card-body">
         <div class="table-responsive">
-            <Table >
+            <table class="table">
                 <tbody>
                     <tr>
                         <th class="agent-prop-key">Type</th>
@@ -157,16 +152,16 @@
                         </th>
                         <td>
                             <div class="mt-2 mb-2" style="width: fit-content;">
-                                <Input
-                                    type="select"
-                                    on:change={e => changeRoutingMode(e)}
+                                <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}
-                                </Input>
+                                </select>
                             </div>
                         </td>
                     </tr>
@@ -179,12 +174,12 @@
                         </th>
                         <td>
                             <div class="form-check mt-2 mb-2" style="width: fit-content;">
-                                <input 
-                                    class="form-check-input" 
-                                    type="checkbox" 
-                                    bind:checked={agent.is_public} 
-                                    on:change={handleAgentChange}
-                                    id="is_public" 
+                                <input
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    bind:checked={agent.is_public}
+                                    onchange={handleAgentChange}
+                                    id="is_public"
                                 />
                                 <label class="form-check-label" for="is_public">
                                     Public
@@ -200,12 +195,12 @@
                         </th>
                         <td>
                             <div class="form-check mt-2 mb-2" style="width: fit-content;">
-                                <input 
-                                    class="form-check-input" 
-                                    type="checkbox" 
-                                    bind:checked={agent.allow_routing} 
-                                    on:change={handleAgentChange}
-                                    id="allow_routing" 
+                                <input
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    bind:checked={agent.allow_routing}
+                                    onchange={handleAgentChange}
+                                    id="allow_routing"
                                 />
                                 <label class="form-check-label" for="allow_routing">Allow</label>
                             </div>
@@ -219,24 +214,24 @@
                         </th>
                         <td>
                             <div class="agent-prop-list-container vertical-flexible">
-                                {#each profiles as profile, index}
+                                {#each profiles as _, index}
                                 <div class="edit-wrapper">
                                     <input
                                         class="form-control edit-text-box"
                                         type="text"
                                         placeholder="Typing here..."
                                         maxlength={30}
-                                        bind:value={profile}
-                                        on:input={handleAgentChange}
+                                        bind:value={profiles[index]}
+                                        oninput={handleAgentChange}
                                     />
                                     <div class="delete-icon">
                                         <i
                                             class="bx bxs-no-entry"
                                             role="link"
                                             tabindex="0"
-                                            on:keydown={() => {}}
-                                            on:click={() => removeProfile(index)}
-                                        />
+                                            onkeydown={() => {}}
+                                            onclick={() => removeProfile(index)}
+                                        ></i>
                                     </div>
                                 </div>
                                 {/each}
@@ -246,9 +241,9 @@
                                         class="bx bx bx-list-plus"
                                         role="link"
                                         tabindex="0"
-                                        on:keydown={() => {}}
-                                        on:click={() => addProfile()}
-                                    />
+                                        onkeydown={() => {}}
+                                        onclick={() => addProfile()}
+                                    ></i>
                                 </div>
                                 {/if}
                             </div>
@@ -262,24 +257,24 @@
                         </th>
                         <td>
                             <div class="agent-prop-list-container vertical-flexible">
-                                {#each labels as label, index}
+                                {#each labels as _, index}
                                 <div class="edit-wrapper">
                                     <input
                                         class="form-control edit-text-box"
                                         type="text"
                                         placeholder="Typing here..."
                                         maxlength={30}
-                                        bind:value={label}
-                                        on:input={handleAgentChange}
+                                        bind:value={labels[index]}
+                                        oninput={handleAgentChange}
                                     />
                                     <div class="delete-icon">
                                         <i
                                             class="bx bxs-no-entry"
                                             role="link"
                                             tabindex="0"
-                                            on:keydown={() => {}}
-                                            on:click={() => removeLabel(index)}
-                                        />
+                                            onkeydown={() => {}}
+                                            onclick={() => removeLabel(index)}
+                                        ></i>
                                     </div>
                                 </div>
                                 {/each}
@@ -289,9 +284,9 @@
                                         class="bx bx bx-list-plus"
                                         role="link"
                                         tabindex="0"
-                                        on:keydown={() => {}}
-                                        on:click={() => addLabel()}
-                                    />
+                                        onkeydown={() => {}}
+                                        onclick={() => addLabel()}
+                                    ></i>
                                 </div>
                                 {/if}
                             </div>
@@ -305,12 +300,12 @@
                         </th>
                         <td>							
                             <div class="form-check mt-2 mb-2" style="width: fit-content;">
-                                <input 
-                                    class="form-check-input" 
-                                    type="checkbox" 
-                                    bind:checked={agent.disabled} 
-                                    on:change={handleAgentChange}
-                                    id="disabled" 
+                                <input
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    bind:checked={agent.disabled}
+                                    onchange={handleAgentChange}
+                                    id="disabled"
                                 />
                                 <label class="form-check-label" for="disabled">Disabled</label>
                             </div>
@@ -330,7 +325,7 @@
                                     placeholder={'Select'}
                                     selectedValues={agent.function_visibility_mode ? [agent.function_visibility_mode] : []}
                                     options={functionVisibilityModeOptions}
-                                    on:select={e => changeFunctionVisibilityMode(e)}
+                                    onselect={e => changeFunctionVisibilityMode(e)}
                                 />
                             </div>
                         </td>
@@ -343,15 +338,15 @@
                         </th>
                         <td>							
                             <div class="mt-2 mb-2">
-                                <Input
+                                <input
                                     type="number"
                                     style="width: 50%; min-width: 100px;"
-                                    class="text-center"
-									min={1}
+                                    class="form-control text-center"
+                                    min={1}
                                     max={1000}
-									step={1}
+                                    step={1}
                                     bind:value={agent.max_message_count}
-                                    on:input={handleAgentChange}
+                                    oninput={handleAgentChange}
                                 />
                             </div>
                         </td>
@@ -369,7 +364,7 @@
                         </td>
                     </tr>
                 </tbody>
-            </Table>
+            </table>
         </div>
-    </CardBody>
-</Card>
+    </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 243a865c..a7477b99 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
@@ -1,14 +1,17 @@
 <script>
 	import CollapsibleCard from "$lib/common/shared/CollapsibleCard.svelte";
 	import { directToAgentPage } from "$lib/helpers/utils/common";
-	import { Card, CardBody, Table } from "@sveltestrap/sveltestrap";
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel
+     * }}
+     */
+    let { agent } = $props();
 </script>
 
-<Card>
-    <CardBody>
+<div class="card">
+    <div class="card-body">
         <div class="text-center">
             <h5 class="mt-1 mb-3">Routing</h5>
         </div>
@@ -16,12 +19,12 @@
         {#each agent.routing_rules as rule, idx (idx)}
         <div class="routing-rule-container">
             <CollapsibleCard open={idx === 0}>
-                <div slot='header'>
+                {#snippet header()}
                     <h5 class="rule-header">{`Rule #${idx + 1}`}</h5>
-                </div>
-                <div slot='body'>
+                {/snippet}
+                {#snippet body()}
                     <div class="table-responsive rule-body">
-                        <Table>
+                        <table class="table">
                             <tbody>
                                 {#if !!rule.field}
                                 <tr>
@@ -43,12 +46,12 @@
                                 {/if}
                                 <tr>
                                     <th class="agent-prop-key">Required</th>
-                                    <td>{!!rule.required ? `Yes` : `No`}</td>
+                                    <td>{rule.required ? `Yes` : `No`}</td>
                                 </tr>
                                 {#if !!rule.redirectTo}
                                 <tr>
                                     <th class="agent-prop-key">Redirect to Agent</th>
-                                    <td style="cursor: pointer;" on:click={() => directToAgentPage(rule.redirectTo)}>
+                                    <td style="cursor: pointer;" onclick={() => directToAgentPage(rule.redirectTo)}>
                                         {rule.redirect_to_agent || ''}
                                     </td>
                                 </tr>
@@ -60,11 +63,11 @@
                                 </tr>
                                 {/if}
                             </tbody>
-                        </Table>
+                        </table>
                     </div>
-                </div>
+                {/snippet}
             </CollapsibleCard>
         </div>
         {/each}
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
index ab45fe53..a2c6d4d0 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
@@ -1,21 +1,23 @@
 <script>
     import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
     import util from "lodash";
-    import { Card, CardBody, FormGroup, Input, CardHeader } from '@sveltestrap/sveltestrap';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
-	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
-
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchTemplates = () => {
-        const candidates = inner_templates?.filter((x, idx) => !!x.name?.trim())?.map(x => {
+    import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent = $bindable(),
+        handleAgentChange = () => {}
+    } = $props();
+
+    export function fetchTemplates() {
+        const candidates = inner_templates?.filter((x) => !!x.name?.trim())?.map(x => {
             return { name: x.name.trim().toLowerCase(), content: x.content };
         });
 
@@ -39,10 +41,10 @@
     };
 
     /** @type {import('$agentTypes').AgentTemplate[]} */
-    let inner_templates = [];
+    let inner_templates = $state([]);
 
     /** @type {import('$agentTypes').AgentTemplate} */
-    let selected_template = { ...defaultTemplate };
+    let selected_template = $state({ ...defaultTemplate });
 
     onMount(() => {
         init();
@@ -123,34 +125,35 @@
 </script>
 
 
-<Card class="agent-prompt-container">
-    <CardHeader class="agent-prompt-header border-bottom">
+<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>
-    </CardHeader>
-    <CardBody>
-        <FormGroup class="agent-prompt-body">
+    </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">
                     {'Contents:'}
                 </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 templates"
                     style="font-size: 16px;"
-                    on:click={() => addTemplate()}
+                    role="button"
+                    tabindex="0"
+                    onclick={() => addTemplate()}
+                    onkeydown={(e) => e.key === 'Enter' && addTemplate()}
                 >
-                    <i class="mdi mdi-plus-circle-outline" />
+                    <i class="mdi mdi-plus-circle-outline"></i>
                 </div>
             </div>
-            
+
             {#if inner_templates.length > 0}
             <NavBar
                 id={'agent-template-container'}
@@ -176,17 +179,16 @@
                 />
                 {/each}
             </NavBar>
-            <Input
-                type="textarea"
+            <textarea
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
                 placeholder="Enter your content"
                 value={selected_template.content}
                 rows={15}
-                on:input={(e) => changePrompt(e)}
-                on:keydown={(e) => onKeyDown(e)}
-            />
+                oninput={(e) => changePrompt(e)}
+                onkeydown={(e) => onKeyDown(e)}
+            ></textarea>
             {/if}
-        </FormGroup>
-    </CardBody>
-</Card>
\ No newline at end of file
+        </div>
+    </div>
+</div>
\ No newline at end of file
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 ecafac02..e911f741 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,24 +1,31 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
 	import { DECIMAL_REGEX } from "$lib/helpers/constants";
-	
-    const svelteDispatch = createEventDispatcher();
-    const duration = 200;
-
-    /** @type {import('$agentTypes').AgentKnowledgeBase} */
-    export let knowledge;
-
-    /** @type {number} */
-    export let knwoledgeIdx;
-
-    /** @type {any[]} */
-    export let knowledgeBaseOptions = [];
 
-    /** @type {boolean} */
-    export let collapsed = true;
+    const duration = 200;
 
+    /**
+     * @type {{
+     *   knowledge: import('$agentTypes').AgentKnowledgeBase,
+     *   knwoledgeIdx: number,
+     *   knowledgeBaseOptions?: any[],
+     *   collapsed?: boolean,
+     *   ontoggle?: (data: { knowledgeIdx: number, checked: boolean }) => void,
+     *   ondelete?: (data: { knowledgeIdx: number }) => void,
+     *   onchange?: (data: { knowledgeIdx: number, field: string, value: any }) => void,
+     *   oncollapse?: (data: { knowledgeIdx: number, collapsed: boolean }) => void
+     * }}
+     */
+    let {
+        knowledge,
+        knwoledgeIdx,
+        knowledgeBaseOptions = [],
+        collapsed = true,
+        ontoggle,
+        ondelete,
+        onchange,
+        oncollapse
+    } = $props();
 
     /** @param {any} e */
     function validateConfidenceInput(e) {
@@ -28,38 +35,32 @@
         }
     }
 
-    /**
-     * @param {any} e
-	 */
+    /** @param {any} e */
     function toggleKnowledgeBase(e) {
-        svelteDispatch('toggle', {
+        ontoggle?.({
             knowledgeIdx: knwoledgeIdx,
             checked: e.target.checked
         });
     }
 
     function deleteKnowledgeBase() {
-        svelteDispatch('delete', {
+        ondelete?.({
             knowledgeIdx: knwoledgeIdx
         });
     }
 
-    /**
-     * @param {any} e
-	 */
+    /** @param {any} e */
     function changeKnowledgeBase(e) {
-        svelteDispatch('change', {
+        onchange?.({
             knowledgeIdx: knwoledgeIdx,
             field: 'knowledge',
             value: e.target.value
         });
     }
 
-    /**
-     * @param {any} e
-	 */
+    /** @param {any} e */
     function changeConfidence(e) {
-        svelteDispatch('change', {
+        onchange?.({
             knowledgeIdx: knwoledgeIdx,
             field: 'confidence',
             value: e.target.value
@@ -67,7 +68,7 @@
     }
 
     function toggleCollapse() {
-        svelteDispatch('collapse', {
+        oncollapse?.({
             knowledgeIdx: knwoledgeIdx,
             collapsed: !collapsed
         });
@@ -83,53 +84,46 @@
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => toggleCollapse()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => toggleCollapse()}
+                ></i>
             </div>
             <div class="line-align-center">
                 {`Collection #${knwoledgeIdx + 1}`}
             </div>
             <div class="utility-tooltip">
                 <div class="line-align-center">
-                    <Input
+                    <input
                         type="checkbox"
+                        class="form-check-input"
                         checked={!knowledge.disabled}
-                        on:change={e => toggleKnowledgeBase(e)}
+                        onchange={e => toggleKnowledgeBase(e)}
                     />
                 </div>
-                <!-- <div
-                    class="line-align-center"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Uncheck to disable knowledgebase"
-                >
-                    <i class="bx bx-info-circle fs-6" />
-                </div> -->
             </div>
         </div>
         <div class="utility-value">
             <div class="utility-input line-align-center">
-                <Input
-                    type="select"
+                <select
+                    class="form-select"
                     disabled={knowledge.disabled}
-                    on:change={e => changeKnowledgeBase(e)}
+                    onchange={e => changeKnowledgeBase(e)}
                 >
                     {#each [...knowledgeBaseOptions] as option}
                         <option value={`${JSON.stringify(option)}`} selected={option.name == knowledge.name}>
                             {option.displayName || option.name}
                         </option>
                     {/each}
-                </Input>
+                </select>
             </div>
             <div class="utility-delete line-align-center">
                 <i
                     class="bx bxs-no-entry text-danger clickable fs-6"
                     role="link"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => deleteKnowledgeBase()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => deleteKnowledgeBase()}
+                ></i>
             </div>
         </div>
     </div>
@@ -143,13 +137,13 @@
                 </div>
                 <div class="utility-value">
                     <div class="utility-input line-align-center">
-                        <Input
+                        <input
                             type="text"
-                            class="text-center"
+                            class="form-control text-center"
                             bind:value={knowledge.confidence}
                             disabled={knowledge.disabled}
-                            on:keydown={e => validateConfidenceInput(e)}
-                            on:blur={e => changeConfidence(e)}
+                            onkeydown={e => validateConfidenceInput(e)}
+                            onblur={e => changeConfidence(e)}
                         />
                     </div>
                     <div class="utility-delete line-align-center"></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 951c8d8b..c1bf188c 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
@@ -1,9 +1,7 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
 	import { getVectorKnowledgeCollections } from '$lib/services/knowledge-base-service';
 	import { KnowledgeCollectionDisplayType } from '$lib/helpers/enums';
-	import { DECIMAL_REGEX } from '$lib/helpers/constants';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 	import AgentKnowledgeBaseItem from './agent-knowledge-base-item.svelte';
 
@@ -11,13 +9,18 @@
     const confidLowerBound = 0;
     const confidUpperBound = 1;
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchKnowledgeBases = () => {
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        handleAgentChange = () => {}
+    } = $props();
+
+    export function fetchKnowledgeBases() {
         const candidates = innerKnowledgeBases?.filter(x => !!x.name)?.map(x => {
             return {
                 ...x,
@@ -43,15 +46,15 @@
     }
 
     /** @type {any[]} */
-    let knowledgeBaseOptions = [];
+    let knowledgeBaseOptions = $state([]);
 
     /** @type {import('$agentTypes').AgentKnowledgeBase[]} */
-    let innerKnowledgeBases = [];
+    let innerKnowledgeBases = $state([]);
 
     /** @type {HTMLElement} */
     let scrollContainer;
 
-    onMount(async () =>{
+    onMount(async () => {
         getVectorKnowledgeCollections().then(data => {
             const list = data?.map(x => {
                 return {
@@ -81,25 +84,25 @@
 
     /** @param {import('$agentTypes').AgentKnowledgeBase | any} b */
     function getDisplayOption(b) {
-        return `${b.name} ${!!KnowledgeCollectionDisplayType[b.type]
+        return `${b.name} ${KnowledgeCollectionDisplayType[b.type]
                    ? `(${KnowledgeCollectionDisplayType[b.type]})` : ''}`
     }
 
     /**
-	 * @param {any} e
+	 * @param {{ knowledgeIdx: number, field: string, value: any }} data
 	 * @param {number} idx
 	 */
-    function changeKnowledgeBase(e, idx) {
+    function changeKnowledgeBase(data, idx) {
         const found = innerKnowledgeBases.find((_, index) => index === idx);
         if (!found) return;
-        
-        const field = e.detail.field;
+
+        const field = data.field;
         if (field === 'knowledge') {
-            const val = JSON.parse(e.detail.value);
+            const val = JSON.parse(data.value);
             found.name = val?.name;
             found.type = val?.type;
         } else if (field === 'confidence') {
-            const value = e.detail.value;
+            const value = data.value;
             const confidence = validateConfidenceNumber(value);
             found.confidence = confidence;
         }
@@ -139,36 +142,36 @@
     }
 
     /**
-     * @param {any} e
+	 * @param {{ knowledgeIdx: number }} _data
 	 * @param {number} idx
 	 */
-    function deleteKnowledgeBase(e, idx) {
+    function deleteKnowledgeBase(_data, idx) {
         innerKnowledgeBases = innerKnowledgeBases.filter((_, index) => index !== idx);
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
+	 * @param {{ knowledgeIdx: number, checked: boolean }} data
 	 * @param {number} idx
 	 */
-    function toggleKnowledgeBase(e, idx) {
+    function toggleKnowledgeBase(data, idx) {
         const found = innerKnowledgeBases.find((_, index) => index === idx);
         if (!found) return;
 
-        found.disabled = !e.detail.checked;
+        found.disabled = !data.checked;
         innerRefresh(innerKnowledgeBases);
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
+	 * @param {{ knowledgeIdx: number, collapsed: boolean }} data
 	 * @param {number} idx
 	 */
-    function toggleCollapse(e, idx) {
+    function toggleCollapse(data, idx) {
         const found = innerKnowledgeBases.find((_, index) => index === idx);
         if (!found) return;
 
-        found.expanded = !e.detail.collapsed;
+        found.expanded = !data.collapsed;
         innerRefresh(innerKnowledgeBases);
         handleAgentChange();
     }
@@ -189,8 +192,8 @@
     }
 </script>
 
-<Card>
-    <CardBody>
+<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>
@@ -203,23 +206,27 @@
                     knwoledgeIdx={uid}
                     collapsed={!knowledge.expanded}
                     knowledgeBaseOptions={knowledgeBaseOptions}
-                    on:toggle={e => toggleKnowledgeBase(e, uid)}
-                    on:delete={e => deleteKnowledgeBase(e, uid)}
-                    on:change={e => changeKnowledgeBase(e, uid)}
-                    on:collapse={e => toggleCollapse(e, uid)}
+                    ontoggle={data => toggleKnowledgeBase(data, uid)}
+                    ondelete={data => deleteKnowledgeBase(data, uid)}
+                    onchange={data => changeKnowledgeBase(data, uid)}
+                    oncollapse={data => toggleCollapse(data, uid)}
                 />
             {/each}
 
             {#if innerKnowledgeBases.length < limit}
                 <div class="add-utility">
-                    <Button color="primary" on:click={() => addKnowledgeBase()}>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick={() => addKnowledgeBase()}
+                    >
                         <span>
-                            <i class="bx bx-plus" />
+                            <i class="bx bx-plus"></i>
                             <span>Add Knowledge Base</span>
                         </span>
-                    </Button>
+                    </button>
                 </div>
             {/if}
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
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 40b759dd..63aba6c3 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,19 +1,22 @@
 <script>
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
-	import { INTEGER_REGEX } from '$lib/helpers/constants';
-	import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
-    
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {import('$commonTypes').LlmConfig[]} */
-    export let llmConfigs = [];
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchConfig = () => {
+    import { INTEGER_REGEX } from '$lib/helpers/constants';
+    import { LlmModelCapability, LlmModelType, ReasoningEffortLevel } from '$lib/helpers/enums';
+
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   llmConfigs?: import('$commonTypes').LlmConfig[],
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        llmConfigs = [],
+        handleAgentChange = () => {}
+    } = $props();
+
+    export function fetchConfig() {
         const reasoningEffort = models.find(x => x.name === config.model)?.reasoning != null ? config.reasoning_effort_level : null;
         return {
             ...config,
@@ -27,7 +30,7 @@
     const recursiveDepthLowerLimit = 1;
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-	const defaultReasonLevelOptions = [
+    const defaultReasonLevelOptions = [
         { value: '', label: '' },
         ...Object.entries(ReasoningEffortLevel).map(([k, v]) => ({
             value: v,
@@ -35,31 +38,32 @@
         }))
     ];
 
-
     /** @type {boolean} */
-    let collapsed = false;
+    let collapsed = $state(false);
 
-    let config = agent.llm_config || {};
+    // svelte-ignore state_referenced_locally
+    let config = $state(agent.llm_config || {});
 
     /** @type {import('$commonTypes').LlmConfig[]} */
-    let innerLlmConfigs = [];
+    let innerLlmConfigs = $state([]);
 
     /** @type {string[]} */
-    let providers = [];
+    let providers = $state([]);
 
     /** @type {import('$commonTypes').LlmModelSetting[]} */
-    let models = [];
+    let models = $state([]);
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-    let reasoningLevelOptions = defaultReasonLevelOptions;
+    let reasoningLevelOptions = $state(defaultReasonLevelOptions);
 
-    $: isReasoningModel = models.find(x => x.name === config.model)?.reasoning != null;
-    $: {
+    let isReasoningModel = $derived(models.find(x => x.name === config.model)?.reasoning != null);
+
+    $effect(() => {
         if (llmConfigs.length > 0 && innerLlmConfigs.length === 0) {
             innerLlmConfigs = [...llmConfigs];
             const innerProviders = innerLlmConfigs.filter(x => x.models?.some(y => y.type === LlmModelType.Chat || y.capabilities?.includes(LlmModelCapability.Chat)));
             providers = ['', ...innerProviders.map(x => x.provider)];
-            if (!!config.provider) {
+            if (config.provider) {
                 models = getLlmModels(config.provider);
             }
             const foundProvider = providers.find(x => x === config.provider);
@@ -68,7 +72,7 @@
             config.model = foundModel?.name || null;
             onModelChanged(config);
         }
-    }
+    });
 
     /** @param {string} provider */
     function getLlmModels(provider) {
@@ -81,7 +85,7 @@
         const provider = e.target.value;
         config.provider = provider || null;
 
-        if (!!!provider) {
+        if (!provider) {
             models = [];
             config.model = null;
             config.reasoning_effort_level = null;
@@ -109,7 +113,7 @@
     /** @param {any} e */
     function changeMaxRecursiveDepth(e) {
         let value = Number(e.target.value) || 0;
-        
+
         if (value < recursiveDepthLowerLimit) {
             value = recursiveDepthLowerLimit;
         }
@@ -151,7 +155,7 @@
         if (foundModel?.reasoning == null) {
             return options;
         }
-        
+
         const defaultOptions = foundModel?.reasoning?.parameters?.EffortLevel?.options;
         if (defaultOptions?.length > 0) {
             options = [
@@ -170,8 +174,8 @@
         class="config-header text-center"
         role="button"
         tabindex="0"
-        on:click={() => collapsed = !collapsed}
-        on:keydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
+        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">
             <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
@@ -191,13 +195,13 @@
                 Provider
             </label>
             <div class="llm-config-input">
-                <Input type="select" id="chat-provider" value={config.provider} on:change={e => changeProvider(e)}>
+                <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}
-                </Input>
+                </select>
             </div>
         </div>
 
@@ -206,13 +210,13 @@
                 Model
             </label>
             <div class="llm-config-input">
-                <Input type="select" id="chat-model" value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+                <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}
-                </Input>
+                </select>
             </div>
         </div>
 
@@ -221,14 +225,15 @@
                 Max recursive depth
             </label>
             <div class="llm-config-input">
-                <Input
+                <input
+                    class="form-control"
                     id="chat-max-recursive-depth"
                     style="text-align: center;"
                     type="number"
                     min={recursiveDepthLowerLimit}
                     value={config.max_recursion_depth}
-                    on:keydown={e => validateIntegerInput(e)}
-                    on:change={e => changeMaxRecursiveDepth(e)}
+                    onkeydown={e => validateIntegerInput(e)}
+                    onchange={e => changeMaxRecursiveDepth(e)}
                 />
             </div>
         </div>
@@ -238,13 +243,14 @@
                 Max output tokens
             </label>
             <div class="llm-config-input">
-                <Input
+                <input
+                    class="form-control"
                     id="chat-max-output-tokens"
                     style="text-align: center;"
                     type="number"
                     value={config.max_output_tokens}
-                    on:keydown={e => validateIntegerInput(e)}
-                    on:change={e => changeMaxOutputToken(e)}
+                    onkeydown={e => validateIntegerInput(e)}
+                    onchange={e => changeMaxOutputToken(e)}
                 />
             </div>
         </div>
@@ -255,13 +261,13 @@
                 Reasoning level
             </label>
             <div class="llm-config-input">
-                <Input type="select" id="chat-reasoning-effort" value={config.reasoning_effort_level} on:change={e => changeReasoningEffortLevel(e)}>
+                <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}
-                </Input>
+                </select>
             </div>
         </div>
         {/if}
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 a1cda369..a47ce911 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,27 +1,26 @@
 <script>
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
 
-    /** @type {string} */
-    export let title;
-
-    /** @type {string} */
-    export let modelType = '';
-
-    /** @type {string} */
-    export let modelCapability;
-
-    /** @type {any} */
-    export let llmConfig;
-
-    /** @type {import('$commonTypes').LlmConfig[]} */
-    export let llmConfigOptions = [];
-
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchConfig = () => {
+    /**
+     * @type {{
+     *   title: string,
+     *   modelType?: string,
+     *   modelCapability: string,
+     *   llmConfig?: any,
+     *   llmConfigOptions?: import('$commonTypes').LlmConfig[],
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        title,
+        modelType = '',
+        modelCapability,
+        llmConfig,
+        llmConfigOptions = [],
+        handleAgentChange = () => {}
+    } = $props();
+
+    export function fetchConfig() {
         if (!config.provider && !config.model) {
             return null;
         }
@@ -33,26 +32,27 @@
         };
     }
 
-
     /** @type {boolean} */
-    let collapsed = true;
+    let collapsed = $state(true);
 
     /** @type {import('$commonTypes').LlmConfig[]} */
-    let innerLlmConfigOptions = [];
+    let innerLlmConfigOptions = $state([]);
 
     /** @type {string[]} */
-    let providers = [];
+    let providers = $state([]);
 
     /** @type {import('$commonTypes').LlmModelSetting[]} */
-    let models = [];
+    let models = $state([]);
 
-    let config = llmConfig || {};
-    $: {
+    // svelte-ignore state_referenced_locally
+    let config = $state(llmConfig || {});
+
+    $effect(() => {
         if (llmConfigOptions.length > 0 && innerLlmConfigOptions.length === 0) {
             innerLlmConfigOptions = llmConfigOptions;
             const innerProviders = innerLlmConfigOptions.filter(x => x.models?.some(y => (!!modelType && y.type === modelType) || y.capabilities?.includes(modelCapability)));
             providers = ['', ...innerProviders.map(x => x.provider)];
-            if (!!config.provider) {
+            if (config.provider) {
                 models = getLlmModels(config.provider);
             }
             const foundProvider = providers.find(x => x === config.provider);
@@ -60,7 +60,7 @@
             config.provider = foundProvider || null;
             config.model = foundModel?.name || null;
         }
-    }
+    });
 
     /** @param {string} provider */
     function getLlmModels(provider) {
@@ -73,7 +73,7 @@
         const provider = e.target.value;
         config.provider = provider || null;
 
-        if (!!!provider) {
+        if (!provider) {
             models = [];
             config.model = null;
             handleAgentChange();
@@ -97,8 +97,8 @@
         class="config-header text-center"
         role="button"
         tabindex="0"
-        on:click={() => collapsed = !collapsed}
-        on:keydown={(e) => e.key === 'Enter' && (collapsed = !collapsed)}
+        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">
             <i class="mdi {collapsed ? 'mdi-chevron-right' : 'mdi-chevron-down'}"></i>
@@ -113,13 +113,13 @@
                 Provider
             </label>
             <div class="llm-config-input">
-                <Input type="select" id={`provider-${title}`} value={config.provider} on:change={e => changeProvider(e)}>
+                <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}
-                </Input>
+                </select>
             </div>
         </div>
 
@@ -128,13 +128,13 @@
                 Model
             </label>
             <div class="llm-config-input">
-                <Input type="select" id={`model-${title}`} value={config.model} disabled={models.length === 0} on:change={e => changeModel(e)}>
+                <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}
-                </Input>
+                </select>
             </div>
         </div>
     </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 fb66e1e9..5d9dc8a6 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,37 +1,44 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
-
-    const svelteDispatch = createEventDispatcher();
 
     const duration = 200;
     const limit = 10;
 
-    /** @type {import('$agentTypes').AgentMcpTool} */
-    export let mcp;
-
-    /** @type {number} */
-    export let mcpIndex;
-
-    /** @type {any[]} */
-    export let mcpOptions;
-
-    /** @type {boolean} */
-    export let collapsed = true;
-
     /**
-     * @param {any} e
-	 */
+     * @type {{
+     *   mcp: import('$agentTypes').AgentMcpTool,
+     *   mcpIndex: number,
+     *   mcpOptions?: any[],
+     *   collapsed?: boolean,
+     *   ontoggle?: (data: { mcpIdx: number, checked: boolean }) => void,
+     *   ondelete?: (data: { mcpIdx: number, field: string, itemIdx?: number }) => void,
+     *   onchange?: (data: { mcpIdx: number, field: string, value?: any, itemIdx?: number }) => void,
+     *   onadd?: (data: { mcpIdx: number, field: string }) => void,
+     *   oncollapse?: (data: { mcpIdx: number, collapsed: boolean }) => void
+     * }}
+     */
+    let {
+        mcp,
+        mcpIndex,
+        mcpOptions = [],
+        collapsed = true,
+        ontoggle,
+        ondelete,
+        onchange,
+        onadd,
+        oncollapse
+    } = $props();
+
+    /** @param {any} e */
     function toggleMcp(e) {
-        svelteDispatch('toggle', {
+        ontoggle?.({
             mcpIdx: mcpIndex,
             checked: e.target.checked
         });
     }
 
     function deleteMcp() {
-        svelteDispatch('delete', {
+        ondelete?.({
             mcpIdx: mcpIndex,
             field: 'mcp'
         });
@@ -42,18 +49,16 @@
      * @param {string} type
      */
     function deleteMcpItem(fid, type) {
-        svelteDispatch('delete', {
+        ondelete?.({
             mcpIdx: mcpIndex,
             field: type,
             itemIdx: fid
         });
     }
 
-    /**
-     * @param {any} e
-	 */
+    /** @param {any} e */
     function changeMcp(e) {
-        svelteDispatch('change', {
+        onchange?.({
             mcpIdx: mcpIndex,
             field: 'mcp',
             value: e.target.value
@@ -62,11 +67,11 @@
 
     /**
      * @param {any} e
-	 * @param {number} fid
-	 * @param {string} type
-	 */
+     * @param {number} fid
+     * @param {string} type
+     */
     function changeMcpItem(e, fid, type) {
-        svelteDispatch('change', {
+        onchange?.({
             mcpIdx: mcpIndex,
             field: type,
             itemIdx: fid,
@@ -74,18 +79,16 @@
         });
     }
 
-    /**
-	 * @param {string} type
-	 */
+    /** @param {string} type */
     function addMcpItem(type) {
-        svelteDispatch('add', {
+        onadd?.({
             mcpIdx: mcpIndex,
             field: type
         });
     }
 
     function toggleCollapse() {
-        svelteDispatch('collapse', {
+        oncollapse?.({
             mcpIdx: mcpIndex,
             collapsed: !collapsed
         });
@@ -101,53 +104,46 @@
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => toggleCollapse()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => toggleCollapse()}
+                ></i>
             </div>
             <div class="line-align-center">
                 {`MCP #${mcpIndex + 1}`}
             </div>
             <div class="utility-tooltip">
                 <div class="line-align-center">
-                    <Input
+                    <input
                         type="checkbox"
+                        class="form-check-input"
                         checked={!mcp.disabled}
-                        on:change={e => toggleMcp(e)}
+                        onchange={e => toggleMcp(e)}
                     />
                 </div>
-                <!-- <div
-                    class="line-align-center fs-6"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Uncheck to disable MCP"
-                >
-                    <i class="bx bx-info-circle" />
-                </div> -->
             </div>
         </div>
         <div class="utility-value">
             <div class="utility-input line-align-center">
-                <Input
-                    type="select"
+                <select
+                    class="form-select"
                     disabled={mcp.disabled}
-                    on:change={e => changeMcp(e)}
+                    onchange={e => changeMcp(e)}
                 >
                     {#each [...mcpOptions] as option}
                         <option value={option.id} selected={option.id == mcp.server_id}>
                             {option.displayName || option.name}
                         </option>
                     {/each}
-                </Input>
+                </select>
             </div>
             <div class="utility-delete line-align-center">
                 <i
                     class="bx bxs-no-entry text-danger clickable fs-6"
                     role="link"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => deleteMcp()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => deleteMcp()}
+                ></i>
             </div>
         </div>
     </div>
@@ -161,8 +157,9 @@
                 </div>
                 <div class="utility-value">
                     <div class="utility-input line-align-center">
-                        <Input
+                        <input
                             type="text"
+                            class="form-control"
                             disabled
                             value={mcp.server_id}
                         />
@@ -179,26 +176,26 @@
                     </div>
                     <div class="utility-value">
                         <div class="utility-input line-align-center">
-                            <Input
-                                type="select"
+                            <select
+                                class="form-select"
                                 disabled={mcp.disabled}
-                                on:change={e => changeMcpItem(e, fid, 'function')}
+                                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> 
+                                    </option>
                                 {/each}
-                            </Input>
+                            </select>
                         </div>
                         <div class="utility-delete line-align-center">
                             <i
                                 class="bx bxs-no-entry text-danger clickable fs-6"
                                 role="link"
                                 tabindex="0"
-                                on:keydown={() => {}}
-                                on:click={() => deleteMcpItem(fid, 'function')}
-                            />
+                                onkeydown={() => {}}
+                                onclick={() => deleteMcpItem(fid, 'function')}
+                            ></i>
                         </div>
                     </div>
                 </div>
@@ -217,9 +214,9 @@
                             title="Add function"
                             role="link"
                             tabindex="0"
-                            on:keydown={() => {}}
-                            on:click={() => addMcpItem('function')}
-                        />
+                            onkeydown={() => {}}
+                            onclick={() => addMcpItem('function')}
+                        ></i>
                     </div>
                 </div>
             {/if}
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 de73aaeb..38ea7dcc 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
@@ -1,17 +1,21 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
 	import { getServerConfigs } from '$lib/services/mcp-service';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 	import AgentMcpToolItem from './agent-mcp-tool-item.svelte';
-    
-    const limit = 100;
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
+    const limit = 100;
 
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        handleAgentChange = () => {}
+    } = $props();
 
     export const fetchMcpTools = () => {
         const candidates = innerMcps?.filter(x => !!x.name)?.map(x => {
@@ -51,10 +55,10 @@
     }
 
     /** @type {any[]} */
-    let mcpOptions = [];
+    let mcpOptions = $state([]);
 
     /** @type {import('$agentTypes').AgentMcpTool[]} */
-    let innerMcps = [];
+    let innerMcps = $state([]);
 
     /** @type {HTMLElement} */
     let scrollContainer;
@@ -125,54 +129,54 @@
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
      * @param {number} idx
      */
-    function deleteMcp(e, idx) {
-        if (e.detail.field === 'mcp') {
+    function deleteMcp(data, idx) {
+        if (data.field === 'mcp') {
             innerMcps = innerMcps.filter((_, index) => index !== idx);
-        } else if (e.detail.field === 'function') {
+        } else if (data.field === 'function') {
             const found = innerMcps.find((_, index) => index === idx);
             if (!found) return;
 
-            const fns = found.functions?.filter((_, index) => index !== e.detail.itemIdx) || [];
+            const fns = found.functions?.filter((_, index) => index !== data.itemIdx) || [];
             found.functions = fns;
             innerRefresh(innerMcps);
         }
-        
+
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
-	 * @param {number} idx
-	 */
-    function toggleMcp(e, idx) {
+     * @param {any} data
+     * @param {number} idx
+     */
+    function toggleMcp(data, idx) {
         const found = innerMcps.find((_, index) => index === idx);
         if (!found) return;
 
-        found.disabled = !e.detail.checked;
+        found.disabled = !data.checked;
         innerRefresh(innerMcps);
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
-	 * @param {number} idx
-	 */
-    function changeMcpContent(e, idx) {
+     * @param {any} data
+     * @param {number} idx
+     */
+    function changeMcpContent(data, idx) {
         const found = innerMcps.find((_, index) => index === idx);
         if (!found) return;
 
-        if (e.detail.field === 'mcp') {
-            const name = mcpOptions.find(x => x.id == e.detail.value)?.name || '';
+        if (data.field === 'mcp') {
+            const name = mcpOptions.find(x => x.id == data.value)?.name || '';
             found.name = name;
-            found.server_id = e.detail.value;
+            found.server_id = data.value;
             found.functions = [];
-        } else if (e.detail.field === 'function') {
-            const fn = found.functions.find((_, index) => index === e.detail.itemIdx);
+        } else if (data.field === 'function') {
+            const fn = found.functions.find((_, index) => index === data.itemIdx);
             if (fn) {
-                fn.name = e.detail.value;
+                fn.name = data.value;
             }
         }
 
@@ -181,14 +185,14 @@
     }
 
     /**
-     * @param {any} e
-	 * @param {number} idx
-	 */
-     function addMcpContent(e, idx) {
+     * @param {any} data
+     * @param {number} idx
+     */
+    function addMcpContent(data, idx) {
         const found = innerMcps.find((_, index) => index === idx);
         if (!found || found.disabled) return;
 
-        if (e.detail.field === 'function') {
+        if (data.field === 'function') {
             found.functions.push({ name: '' });
         }
 
@@ -196,23 +200,22 @@
         handleAgentChange();
     }
 
-
     /**
-     * @param {any} e
-	 * @param {number} idx
-	 */
-	function toggleCollapse(e, idx) {
-		const found = innerMcps.find((_, index) => index === idx);
+     * @param {any} data
+     * @param {number} idx
+     */
+    function toggleCollapse(data, idx) {
+        const found = innerMcps.find((_, index) => index === idx);
         if (!found) return;
 
-        found.expanded = !e.detail.collapsed;
+        found.expanded = !data.collapsed;
         innerRefresh(innerMcps);
         handleAgentChange();
-	}
+    }
 </script>
 
-<Card>
-    <CardBody>
+<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>
@@ -225,24 +228,28 @@
                     mcpIndex={uid}
                     collapsed={!mcp.expanded}
                     mcpOptions={mcpOptions}
-                    on:toggle={e => toggleMcp(e, uid)}
-                    on:delete={e => deleteMcp(e, uid)}
-                    on:change={e => changeMcpContent(e, uid)}
-                    on:add={e => addMcpContent(e, uid)}
-                    on:collapse={e => toggleCollapse(e, uid)}
+                    ontoggle={data => toggleMcp(data, uid)}
+                    ondelete={data => deleteMcp(data, uid)}
+                    onchange={data => changeMcpContent(data, uid)}
+                    onadd={data => addMcpContent(data, uid)}
+                    oncollapse={data => toggleCollapse(data, uid)}
                 />
             {/each}
 
             {#if innerMcps.length < limit}
                 <div class="add-utility">
-                    <Button color="primary" on:click={() => addMcp()}>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick={() => addMcp()}
+                    >
                         <span>
-                            <i class="bx bx-plus" />
+                            <i class="bx bx-plus"></i>
                             <span>Add MCP</span>
                         </span>
-                    </Button>
+                    </button>
                 </div>
             {/if}
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
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 9c434b2c..14f27b72 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,43 +1,48 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import { ADMIN_ROLES } from '$lib/helpers/constants';
 
-    const svelteDispatch = createEventDispatcher();
-
     const duration = 200;
 
-    /** @type {import('$agentTypes').AgentRule} */
-    export let rule;
-
-    /** @type {number} */
-    export let ruleIndex;
-
-    /** @type {boolean} */
-    export let collapsed = true;
-
-    /** @type {import('$userTypes').UserModel} */
-    export let user;
-
-    /** @type {any[]} */
-    export let ruleOptions = [];
-
-    /** @type {any[]} */
-    export let configOptions = [];
-
-    /** @type {number} */
-    export let windowWidth;
-
+    /**
+     * @type {{
+     *   rule: import('$agentTypes').AgentRule,
+     *   ruleIndex: number,
+     *   collapsed?: boolean,
+     *   user: import('$userTypes').UserModel,
+     *   ruleOptions?: any[],
+     *   configOptions?: any[],
+     *   windowWidth: number,
+     *   ontoggle?: (data: { ruleIdx: number, field: string, checked: boolean }) => void,
+     *   onchange?: (data: { ruleIdx: number, field: string, value: string }) => void,
+     *   ondelete?: (data: { ruleIdx: number, field: string }) => void,
+     *   oncollapse?: (data: { ruleIdx: number, collapsed: boolean }) => void,
+     *   onconfig?: (data: { ruleIdx: number }) => void
+     * }}
+     */
+    let {
+        rule,
+        ruleIndex,
+        collapsed = true,
+        user,
+        ruleOptions = [],
+        configOptions = [],
+        windowWidth,
+        ontoggle,
+        onchange,
+        ondelete,
+        oncollapse,
+        onconfig
+    } = $props();
 
     /**
      * @param {any} e
      * @param {string} field
      */
     function toggleRule(e, field) {
-        svelteDispatch('toggle', {
+        ontoggle?.({
             ruleIdx: ruleIndex,
             field: field,
             checked: e.target.checked
@@ -49,10 +54,10 @@
      * @param {string} field
      */
     function changeRule(e, field) {
-        svelteDispatch('change', {
+        onchange?.({
             ruleIdx: ruleIndex,
             field: field,
-            value: e?.target?.value || e?.detail?.text || ''
+            value: e?.target?.value || ''
         });
     }
 
@@ -60,21 +65,21 @@
      * @param {string} field
      */
     function deleteRule(field) {
-        svelteDispatch('delete', {
+        ondelete?.({
             ruleIdx: ruleIndex,
             field: field
         });
     }
 
     function toggleCollapse() {
-        svelteDispatch('collapse', {
+        oncollapse?.({
             ruleIdx: ruleIndex,
             collapsed: !collapsed
         });
     }
 
     function toggleConfig() {
-        svelteDispatch('config', {
+        onconfig?.({
             ruleIdx: ruleIndex
         });
     }
@@ -89,19 +94,20 @@
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => toggleCollapse()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => toggleCollapse()}
+                ></i>
             </div>
             <div class="line-align-center">
                 {`Rule #${ruleIndex + 1}`}
             </div>
             <div class="utility-tooltip">
                 <div class="line-align-center">
-                    <Input
+                    <input
                         type="checkbox"
+                        class="form-check-input"
                         checked={!rule.disabled}
-                        on:change={e => toggleRule(e, 'rule')}
+                        onchange={e => toggleRule(e, 'rule')}
                     />
                 </div>
                 {#if rule.statement}
@@ -113,7 +119,7 @@
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="Rule arguments"
-                    />
+                    ></i>
                     <BotsharpTooltip
                         containerClasses="agent-utility-desc"
                         style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
@@ -133,9 +139,7 @@
                 {/if}
 
                 {#if ADMIN_ROLES.includes(user?.role || '') && !!rule.trigger_name && rule.config?.topology_name}
-                <!-- svelte-ignore a11y-no-static-element-interactions -->
                 <div class="line-align-center">
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
                     <i
                         class="bx bx-cog text-primary fs-6 clickable"
                         style="padding-top: 2px;"
@@ -143,34 +147,37 @@
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="Rule config"
-                        on:click={() => toggleConfig()}
-                    />
+                        role="button"
+                        tabindex="0"
+                        onkeydown={() => {}}
+                        onclick={() => toggleConfig()}
+                    ></i>
                 </div>
                 {/if}
             </div>
         </div>
         <div class="utility-value">
             <div class="utility-input line-align-center">
-                <Input
-                    type="select"
+                <select
+                    class="form-select"
                     disabled={rule.disabled}
-                    on:change={e => changeRule(e, 'rule')}
+                    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}
-                </Input>
+                </select>
             </div>
             <div class="utility-delete line-align-center">
                 <i
                     class="bx bxs-no-entry text-danger clickable fs-6"
                     role="link"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => deleteRule('rule')}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => deleteRule('rule')}
+                ></i>
             </div>
         </div>
     </div>
@@ -189,16 +196,16 @@
                 </div>
                 <div class="utility-value">
                     <div class="utility-input line-align-center">
-                        <Input
-                            type="select"
-                            on:change={e => changeRule(e, 'topology')}
+                        <select
+                            class="form-select"
+                            onchange={e => changeRule(e, 'topology')}
                         >
                             {#each [...configOptions] as option}
                                 <option value={`${option.name}`} selected={option.name == rule.config?.topology_name}>
                                     {option.name}
                                 </option>
                             {/each}
-                        </Input>
+                        </select>
                     </div>
                     <div class="utility-delete line-align-center"></div>
                 </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 7d80be15..b7916b4b 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
@@ -1,6 +1,5 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Button } from '@sveltestrap/sveltestrap';
     import { getAgentRuleOptions, getAgentRuleConfigOptions } from '$lib/services/agent-service';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
@@ -8,37 +7,41 @@
 	import PlainModal from '$lib/common/modals/PlainModal.svelte';
 
     const limit = 100;
-    
+
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   user: import('$userTypes').UserModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        user,
+        handleAgentChange = () => {}
+    } = $props();
+
     /** @type {boolean} */
-    let isLoading = false;
+    let isLoading = $state(false);
     /** @type {boolean} */
-    let isComplete = false;
+    let isComplete = $state(false);
     /** @type {boolean} */
-    let isError = false;
+    let isError = $state(false);
     /** @type {boolean} */
-    let isOpenConfigModal = false;
+    let isOpenConfigModal = $state(false);
 
     /** @type {number} */
-    let windowWidth = 0;
-    let windowHeight = 0;
+    let windowWidth = $state(0);
+    let windowHeight = $state(0);
 
     /** @type {string} */
-    let successText = '';
-    let errorText = '';
+    let successText = $state('');
+    let errorText = $state('');
 
     /** @type {any} */
-    let selectedRuleConfig = {};
+    let selectedRuleConfig = $state({});
     /** @type {any} */
-    let ruleConfigs = {};
-
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {import('$userTypes').UserModel} */
-    export let user;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    let ruleConfigs = $state({});
 
     export const fetchRules = () => {
         const candidates = innerRules?.filter(x => !!x.trigger_name)?.map(x => {
@@ -65,13 +68,13 @@
     }
 
     /** @type {any[]} */
-    let ruleOptions = [];
+    let ruleOptions = $state([]);
 
     /** @type {any} */
-    let configOptions = [];
+    let configOptions = $state([]);
 
     /** @type {import('$agentTypes').AgentRule[]} */
-    let innerRules = [];
+    let innerRules = $state([]);
 
     /** @type {HTMLElement} */
     let scrollContainer;
@@ -132,15 +135,15 @@
     }
     
     /**
-	 * @param {any} e
+	 * @param {any} data
 	 * @param {number} idx
 	 */
-    function changeRule(e, idx) {
+    function changeRule(data, idx) {
         const found = innerRules.find((_, index) => index === idx);
         if (!found) return;
 
-        const field = e.detail.field;
-        const value = e.detail.value;
+        const field = data.field;
+        const value = data.value;
         if (field === 'rule') {
             found.trigger_name = value;
             innerRefresh(innerRules);
@@ -151,7 +154,7 @@
             };
             innerRefresh(innerRules);
         }
-        
+
         handleAgentChange();
     }
 
@@ -170,58 +173,47 @@
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-    function deleteRule(e, idx) {
-        if (e.detail.field === 'rule') {
+    function deleteRule(data, idx) {
+        if (data.field === 'rule') {
             innerRules = innerRules.filter((_, index) => index !== idx);
         }
-        
+
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-    function toggleRule(e, idx) {
+    function toggleRule(data, idx) {
         const found = innerRules.find((_, index) => index === idx);
         if (!found) return;
 
-        const field = e.detail.field;
+        const field = data.field;
         if (field === 'rule') {
-            found.disabled = !e.detail.checked;
+            found.disabled = !data.checked;
         }
-        
+
         innerRefresh(innerRules);
         handleAgentChange();
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} uid
 	 */
-	function toggleCollapse(e, uid) {
+	function toggleCollapse(data, uid) {
 		const found = innerRules.find((_, index) => index === uid);
         if (!found) return;
 
-        found.expanded = !e.detail.collapsed;
+        found.expanded = !data.collapsed;
         innerRefresh(innerRules);
         handleAgentChange();
 	}
 
-    /**
-     * @param {any} e
-	 * @param {number} uid
-	 */
-    function addRuleItem(e, uid) {
-        const found = innerRules.find((_, index) => index === uid);
-        if (!found) return;
-        
-        innerRefresh(innerRules);
-        handleAgentChange();
-    }
 
 
     /** @param {import('$agentTypes').AgentRule[]} list */
@@ -238,10 +230,10 @@
     }
 
     /**
-     * @param {any} e
+     * @param {any} _data
 	 * @param {number} uid
 	 */
-    function openRuleConfigModal(e, uid) {
+    function openRuleConfigModal(_data, uid) {
         const found = innerRules.find((_, index) => index === uid);
         if (!found || !found.config?.topology_name) {
             return;
@@ -275,7 +267,7 @@
     }
 </script>
 
-<svelte:window on:resize={() => resizeWindow()}/>
+<svelte:window onresize={() => resizeWindow()}/>
 
 <LoadingToComplete
     {isLoading}
@@ -293,12 +285,12 @@
         isOpen={isOpenConfigModal}
         toggleModal={() => isOpenConfigModal = !isOpenConfigModal}
     >
-        <iframe src={selectedRuleConfig.url} title={selectedRuleConfig.title} width="100%" height="100%" />
+        <iframe src={selectedRuleConfig.url} title={selectedRuleConfig.title} width="100%" height="100%"></iframe>
     </PlainModal>
 {/if}
 
-<Card>
-    <CardBody>
+<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>
@@ -314,25 +306,28 @@
                     ruleOptions={ruleOptions}
                     configOptions={configOptions}
                     windowWidth={windowWidth}
-                    on:toggle={e => toggleRule(e, uid)}
-                    on:delete={e => deleteRule(e, uid)}
-                    on:change={e => changeRule(e, uid)}
-                    on:add={e => addRuleItem(e, uid)}
-                    on:config={e => openRuleConfigModal(e, uid)}
-                    on:collapse={e => toggleCollapse(e, uid)}
+                    ontoggle={data => toggleRule(data, uid)}
+                    ondelete={data => deleteRule(data, uid)}
+                    onchange={data => changeRule(data, uid)}
+                    onconfig={data => openRuleConfigModal(data, uid)}
+                    oncollapse={data => toggleCollapse(data, uid)}
                 />
             {/each}
 
             {#if innerRules.length < limit}
                 <div class="add-utility">
-                    <Button color="primary" on:click={() => addRule()}>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick={() => addRule()}
+                    >
                         <span>
-                            <i class="bx bx-plus" />
+                            <i class="bx bx-plus"></i>
                             <span>Add Rule</span>
                         </span>
-                    </Button>
+                    </button>
                 </div>
             {/if}
         </div>
-    </CardBody>
-</Card>
+    </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 96f1c453..e7c6d153 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
@@ -1,52 +1,59 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { slide } from 'svelte/transition';
-    import { Input } from '@sveltestrap/sveltestrap';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 
-    const svelteDispatch = createEventDispatcher();
-
     const duration = 200;
 
-    /** @type {import('$agentTypes').AgentUtility} */
-    export let utility;
-
-    /** @type {number} */
-    export let utilityIndex;
-
-    /** @type {number} */
-    export let windowWidth;
-
-    /** @type {any} */
-    export let utilityMapper;
-
-    /** @type {any[]} */
-    export let utilityCategoryOptions;
-
-    /** @type {boolean} */
-    export let collapsed = true;
+    /**
+     * @type {{
+     *   utility: import('$agentTypes').AgentUtility,
+     *   utilityIndex: number,
+     *   windowWidth: number,
+     *   utilityMapper: any,
+     *   utilityCategoryOptions: any[],
+     *   collapsed?: boolean,
+     *   ontoggle?: (data: { utilityIdx: number, checked: boolean }) => void,
+     *   ondelete?: (data: { utilityIdx: number, field: string, subfield?: string, itemIdx?: number }) => void,
+     *   onreset?: (data: { utilityIdx: number }) => void,
+     *   onchange?: (data: { utilityIdx: number, field: string, value?: any, itemIdx?: number }) => void,
+     *   oncollapse?: (data: { utilityIdx: number, collapsed: boolean }) => void
+     * }}
+     */
+    let {
+        utility,
+        utilityIndex,
+        windowWidth,
+        utilityMapper,
+        utilityCategoryOptions = [],
+        collapsed = true,
+        ontoggle,
+        ondelete,
+        onreset,
+        onchange,
+        oncollapse
+    } = $props();
 
 
     /**
      * @param {any} e
 	 */
     function toggleUtility(e) {
-        svelteDispatch('toggle', {
+        ontoggle?.({
             utilityIdx: utilityIndex,
             checked: e.target.checked
         });
     }
 
     function deleteUtility() {
-        svelteDispatch('delete', {
+        ondelete?.({
             utilityIdx: utilityIndex,
             field: 'utility'
         });
     }
 
     function resetUtility() {
-        svelteDispatch('reset', {
+        onreset?.({
             utilityIdx: utilityIndex
         });
     }
@@ -55,7 +62,7 @@
      * @param {any} e
 	 */
     function changeUtilityCategory(e) {
-        svelteDispatch('change', {
+        onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-category',
             value: e.target.value
@@ -66,7 +73,7 @@
      * @param {any} e
 	 */
     function changeUtilityName(e) {
-        svelteDispatch('change', {
+        onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-name',
             value: e.target.value
@@ -77,7 +84,7 @@
      * @param {any} e
 	 */
      function changeUtilityVisibility(e) {
-        svelteDispatch('change', {
+        onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-visibility',
             value: e.target.value
@@ -89,7 +96,7 @@
 	 * @param {number} fid
 	 */
     function changeUtilityItemVisibility(e, fid) {
-        svelteDispatch('change', {
+        onchange?.({
             utilityIdx: utilityIndex,
             field: 'utility-item-visibility',
             itemIdx: fid,
@@ -102,7 +109,7 @@
      * @param {string} type
 	 */
     function deleteUtilityItem(fid, type) {
-        svelteDispatch('delete', {
+        ondelete?.({
             utilityIdx: utilityIndex,
             field: 'utility-item',
             subfield: type,
@@ -111,7 +118,7 @@
     }
 
     function toggleCollapse() {
-        svelteDispatch('collapse', {
+        oncollapse?.({
             utilityIdx: utilityIndex,
             collapsed: !collapsed
         });
@@ -157,97 +164,87 @@
                     class:rotated={!collapsed}
                     role="button"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => toggleCollapse()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => toggleCollapse()}
+                ></i>
             </div>
             <div class="line-align-center">
                 {`Utility #${utilityIndex + 1}`}
             </div>
             <div class="utility-tooltip">
                 <div class="line-align-center">
-                    <Input
+                    <input
                         type="checkbox"
+                        class="form-check-input"
                         checked={!utility.disabled}
-                        on:change={e => toggleUtility(e)}
+                        onchange={e => toggleUtility(e)}
                     />
                 </div>
-                <!-- <div
-                    class="line-align-center"
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="top"
-                    title="Uncheck to disable utility"
-                >
-                    <i class="bx bx-info-circle fs-6" />
-                </div> -->
             </div>
         </div>
         <div class="utility-value">
             <div class="utility-input line-align-center">
-                <Input
-                    type="select"
-                    value={utility.category}
+                <select
+                    class="form-select"
                     disabled={utility.disabled}
-                    on:change={e => changeUtilityCategory(e)}
+                    onchange={e => changeUtilityCategory(e)}
                 >
                     {#each utilityCategoryOptions as option}
                         <option value={option.value} selected={option.value == utility.category}>
                             {option.label}
                         </option>
                     {/each}
-                </Input>
+                </select>
             </div>
             <div class="utility-delete line-align-center">
                 <i
                     class="bx bxs-no-entry text-danger clickable fs-6"
                     role="link"
                     tabindex="0"
-                    on:keydown={() => {}}
-                    on:click={() => deleteUtility()}
-                />
+                    onkeydown={() => {}}
+                    onclick={() => deleteUtility()}
+                ></i>
             </div>
         </div>
     </div>
-    
+
     {#if !collapsed}
     <div class="utility-row utility-row-secondary" transition:slide={{ duration: duration }}>
         {#if utility.category}
-            {
-                @const utilityOptions = getUtilityOptions(utilityMapper[utility.category]?.map((/** @type {any} */ x) => x.name), 'Select a utility')
-            }
+            {@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>
                         {#if utility.name}
                         <div class="line-align-center">
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
                             <i
                                 class="mdi mdi-refresh clickable fs-6"
                                 style="padding-top: 3px;"
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Reset"
-                                on:click={() => resetUtility()}
-                            />
+                                role="button"
+                                tabindex="0"
+                                onkeydown={() => {}}
+                                onclick={() => resetUtility()}
+                            ></i>
                         </div>
                         {/if}
                     </div>
                     <div class="utility-value">
                         <div class="utility-input line-align-center">
-                            <Input
-                                type="select"
-                                value={utility.name}
+                            <select
+                                class="form-select"
                                 disabled={utility.disabled}
-                                on:change={e => changeUtilityName(e)}
+                                onchange={e => changeUtilityName(e)}
                             >
                                 {#each utilityOptions as option}
                                     <option value={option.value} selected={option.value == utility.name}>
                                         {option.label}
                                     </option>
                                 {/each}
-                            </Input>
+                            </select>
                         </div>
                         <div class="utility-delete line-align-center"></div>
                     </div>
@@ -258,12 +255,13 @@
                     </div>
                     <div class="utility-value">
                         <div class="utility-input line-align-center">
-                            <Input
+                            <input
                                 type="text"
+                                class="form-control"
                                 disabled={utility.disabled}
                                 maxlength={1000}
                                 value={utility.visibility_expression}
-                                on:change={e => changeUtilityVisibility(e)}
+                                onchange={e => changeUtilityVisibility(e)}
                             />
                         </div>
                         <div class="utility-delete line-align-center"></div>
@@ -274,9 +272,7 @@
         {#each utility.items as item, fid (fid)}
             <div class="utility-content">
                 {#if item.function_name}
-                    { 
-                        @const description = getUtilityItemDescription(utility.category, utility.name, 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>
@@ -284,8 +280,7 @@
                             <div class="line-align-center">
                                 <i
                                     class="bx bx-info-circle fs-6"
-                                    id={`utility-${utilityIndex}-${fid}`}
-                                />
+                                    id={`utility-${utilityIndex}-${fid}`}></i>
                                 <BotsharpTooltip
                                     containerClasses="agent-utility-desc"
                                     style={`min-width: ${Math.floor(windowWidth*0.3)}px;`}
@@ -306,8 +301,9 @@
                         </div>
                         <div class="utility-value">
                             <div class="utility-input line-align-center">
-                                <Input
+                                <input
                                     type="text"
+                                    class="form-control"
                                     value={item.function_display_name}
                                     disabled
                                 />
@@ -317,9 +313,9 @@
                                     class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteUtilityItem(fid, 'function')}
-                                />
+                                    onkeydown={() => {}}
+                                    onclick={() => deleteUtilityItem(fid, 'function')}
+                                ></i>
                             </div>
                         </div>
                     </div>
@@ -331,8 +327,9 @@
                         </div>
                         <div class="utility-value">
                             <div class="utility-input line-align-center">
-                                <Input
+                                <input
                                     type="text"
+                                    class="form-control"
                                     value={item.template_display_name}
                                     disabled
                                 />
@@ -342,9 +339,9 @@
                                     class="bx bxs-no-entry text-danger clickable fs-6"
                                     role="link"
                                     tabindex="0"
-                                    on:keydown={() => {}}
-                                    on:click={() => deleteUtilityItem(fid, 'template')}
-                                />
+                                    onkeydown={() => {}}
+                                    onclick={() => deleteUtilityItem(fid, 'template')}
+                                ></i>
                             </div>
                         </div>
                     </div>
@@ -355,12 +352,13 @@
                     </div>
                     <div class="utility-value">
                         <div class="utility-input line-align-center">
-                            <Input
+                            <input
                                 type="text"
+                                class="form-control"
                                 disabled={utility.disabled}
                                 maxlength={1000}
                                 value={item.visibility_expression}
-                                on:change={e => changeUtilityItemVisibility(e, fid)}
+                                onchange={e => changeUtilityItemVisibility(e, fid)}
                             />
                         </div>
                         <div class="utility-delete line-align-center"></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 c8007b0f..80670af0 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
@@ -1,6 +1,5 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
     import { getAgentUtilityOptions } from '$lib/services/agent-service';
 	import { scrollToBottom, truncateByPrefix } from '$lib/helpers/utils/common';
 	import AgentUtilityItem from './agent-utility-item.svelte';
@@ -8,14 +7,19 @@
     const limit = 100;
     const prefix = "util-";
 
-    let windowWidth = 0;
-    let windowHeight = 0;
+    let windowWidth = $state(0);
+    let windowHeight = $state(0);
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        handleAgentChange = () => {}
+    } = $props();
 
     export const fetchUtilities = () => {
         const list = innerUtilities?.filter(x => !!x.category && !!x.name && x.items?.length > 0) || [];
@@ -39,7 +43,7 @@
     let utilityMapper = {};
 
     /** @type {import('$agentTypes').AgentUtility[]} */
-    let innerUtilities = [];
+    let innerUtilities = $state([]);
 
     /** @type {HTMLElement} */
     let scrollContainer;
@@ -102,29 +106,29 @@
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-    function deleteUtility(e, idx) {
-        if (e.detail.field == 'utility') {
+    function deleteUtility(data, idx) {
+        if (data.field == 'utility') {
             innerUtilities = innerUtilities.filter((_, index) => index !== idx);
-        } else if (e.detail.field == 'utility-item') {
+        } else if (data.field == 'utility-item') {
             const foundUtility = innerUtilities.find((_, index) => index === idx);
-            const foundItem = foundUtility?.items?.find((_, index) => index === e.detail.itemIdx);
+            const foundItem = foundUtility?.items?.find((_, index) => index === data.itemIdx);
             if (!foundUtility || !foundItem) return;
 
-            if (e.detail.subfield === 'function') {
+            if (data.subfield === 'function') {
                 foundItem.function_name = null;
                 foundItem.function_display_name = null;
                 foundItem.template_name = null;
                 foundItem.template_display_name = null;
-            } else if (e.detail.subfield === 'template') {
+            } else if (data.subfield === 'template') {
                 foundItem.template_name = null;
                 foundItem.template_display_name = null;
             }
 
             if (foundItem.function_name == null && foundItem.template_name == null) {
-                foundUtility.items = foundUtility.items.filter((_, index) => index !== e.detail.itemIdx);
+                foundUtility.items = foundUtility.items.filter((_, index) => index !== data.itemIdx);
             }
 
             innerRefresh(innerUtilities);
@@ -135,29 +139,29 @@
 
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-    function changeUtility(e, idx) {
+    function changeUtility(data, idx) {
         const found = innerUtilities.find((_, index) => index === idx);
         if (!found) return;
 
-        if (e.detail.field === 'utility-category') {
-            const category = e.detail.value;
+        if (data.field === 'utility-category') {
+            const category = data.value;
             found.category = category;
             found.name = '';
             found.items = [];
-        } else if (e.detail.field === 'utility-name') {
-            const name = e.detail.value;
+        } else if (data.field === 'utility-name') {
+            const name = data.value;
             found.name = name;
             const foundUtility = utilityMapper[found.category]?.find((/** @type {any} */ x) => x.name == name);
             found.items = foundUtility?.items?.map((/** @type {any} */ x) => ({...x})) || [];
-        } else if (e.detail.field === 'utility-visibility') {
-            found.visibility_expression = e.detail.value || null;
-        } else if (e.detail.field === 'utility-item-visibility') {
-            const foundItem = found.items.find((_, index) => index === e.detail.itemIdx);
+        } else if (data.field === 'utility-visibility') {
+            found.visibility_expression = data.value || null;
+        } else if (data.field === 'utility-item-visibility') {
+            const foundItem = found.items.find((_, index) => index === data.itemIdx);
             if (foundItem) {
-                foundItem.visibility_expression = e.detail.value || null;
+                foundItem.visibility_expression = data.value || null;
             }
         }
 
@@ -166,14 +170,14 @@
     }
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-    function toggleUtility(e, idx) {
+    function toggleUtility(data, idx) {
         const found = innerUtilities.find((_, index) => index === idx);
         if (!found) return;
 
-        found.disabled = !e.detail.checked;
+        found.disabled = !data.checked;
         innerRefresh(innerUtilities);
         handleAgentChange();
     }
@@ -197,7 +201,7 @@
     /** @param {any} e */
     function toggleMergeUtility(e) {
         const checked = e.target.checked;
-        if (!!agent) {
+        if (agent) {
             agent.merge_utility = checked;
         }
         handleAgentChange();
@@ -215,14 +219,14 @@
 	}
 
     /**
-     * @param {any} e
+     * @param {any} data
 	 * @param {number} idx
 	 */
-	function toggleCollapse(e, idx) {
+	function toggleCollapse(data, idx) {
 		const found = innerUtilities.find((_, index) => index === idx);
         if (!found) return;
 
-        found.expanded = !e.detail.collapsed;
+        found.expanded = !data.collapsed;
         innerRefresh(innerUtilities);
         handleAgentChange();
 	}
@@ -247,10 +251,10 @@
     }
 </script>
 
-<svelte:window on:resize={() => resizeWindow()}/>
+<svelte:window onresize={() => resizeWindow()}/>
 
-<Card>
-    <CardBody>
+<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>
@@ -259,10 +263,11 @@
         <div class="agent-utility-container" bind:this={scrollContainer}>
             {#if !agent?.is_router}
                 <div class="merge-utility">
-                    <Input
+                    <input
                         type="checkbox"
+                        class="form-check-input"
                         checked={agent?.merge_utility || false}
-                        on:change={e => toggleMergeUtility(e)}
+                        onchange={e => toggleMergeUtility(e)}
                     />
                     <div class="fw-bold">
                         Merge utilities
@@ -273,15 +278,13 @@
                         data-bs-placement="top"
                         title="Merge with entry agent utilities"
                     >
-                        <i class="bx bx-info-circle fs-6" />
+                        <i class="bx bx-info-circle fs-6"></i>
                     </div>
                 </div>
             {/if}
 
             {#each innerUtilities as utility, uid (uid)}
-                {
-                    @const utilityCategoryOptions = getUtilityOptions(Object.keys(utilityMapper), 'Select a category')
-                }
+                {@const utilityCategoryOptions = getUtilityOptions(Object.keys(utilityMapper), 'Select a category')}
                 <AgentUtilityItem
                     utility={utility}
                     utilityIndex={uid}
@@ -289,24 +292,28 @@
                     utilityCategoryOptions={utilityCategoryOptions}
                     collapsed={!utility.expanded}
                     windowWidth={windowWidth}
-                    on:toggle={e => toggleUtility(e, uid)}
-                    on:delete={e => deleteUtility(e, uid)}
-                    on:reset={() => resetUtility(uid)}
-                    on:change={e => changeUtility(e, uid)}
-                    on:collapse={e => toggleCollapse(e, uid)}
+                    ontoggle={data => toggleUtility(data, uid)}
+                    ondelete={data => deleteUtility(data, uid)}
+                    onreset={() => resetUtility(uid)}
+                    onchange={data => changeUtility(data, uid)}
+                    oncollapse={data => toggleCollapse(data, uid)}
                 />
             {/each}
 
             {#if innerUtilities.length < limit}
                 <div class="add-utility">
-                    <Button color="primary" on:click={() => addUtility()}>
+                    <button
+                        type="button"
+                        class="btn btn-primary"
+                        onclick={() => addUtility()}
+                    >
                         <span>
-                            <i class="bx bx-plus" />
+                            <i class="bx bx-plus"></i>
                             <span>Add utility</span>
                         </span>
-                    </Button>
+                    </button>
                 </div>
             {/if}
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index eb3c9c9c..a7c7cf79 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -1,6 +1,4 @@
 <script>
-    import { onMount } from 'svelte';
-    import { Card, CardBody } from '@sveltestrap/sveltestrap';
 	import NavBar from "$lib/common/nav-bar/NavBar.svelte";
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 	import AgentLlmConfig from './agent-components/agent-llm-config.svelte';
@@ -10,16 +8,20 @@
 	import AgentEventRule from './agent-components/rules/agent-rule.svelte';
 	import AgentMcpTool from './agent-components/mcp-tools/agent-mcp-tool.svelte';
 
-    /** @type {import('$agentTypes').AgentModel} */
-    export let agent;
+    /**
+     * @type {{
+     *   agent: import('$agentTypes').AgentModel,
+     *   user: import('$userTypes').UserModel,
+     *   handleAgentChange?: () => void
+     * }}
+     */
+    let {
+        agent,
+        user,
+        handleAgentChange = () => {}
+    } = $props();
 
-    /** @type {import('$userTypes').UserModel} */
-	export let user;
-
-    /** @type {() => void} */
-    export let handleAgentChange = () => {};
-
-    export const fetchTabData = () => {
+    export function fetchTabData() {
         const llmConfig = agentLlmConfigCmp?.fetchLlmConfig();
         const utilities = agentUtilityCmp?.fetchUtilities();
         const knwoledgebases = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
@@ -33,35 +35,31 @@
             rules: rules || [],
             mcpTools: mcpTools || []
         };
-    };
+    }
 
     /** @type {any} */
-    let agentLlmConfigCmp = null;
+    let agentLlmConfigCmp = $state(null);
     /** @type {any} */
-    let agentUtilityCmp = null;
+    let agentUtilityCmp = $state(null);
     /** @type {any} */
-    let agentKnowledgeBaseCmp = null;
+    let agentKnowledgeBaseCmp = $state(null);
     /** @type {any} */
-    let agentEventRuleCmp = null;
+    let agentEventRuleCmp = $state(null);
     /** @type {any} */
-    let agentMcpToolCmp = null;
-
-    /** @type {string}*/
-    let selectedTab;
+    let agentMcpToolCmp = $state(null);
 
-    /** @type {any[]}*/
-    const tabs = [
+    /** @type {any[]} */
+    let tabs = $state([
         { name: 'agent-llm-config', displayText: 'LLm Configs' },
         { name: 'agent-routing-rule', displayText: 'Routing' },
         { name: 'agent-utility', displayText: 'Utilities' },
         { name: 'agent-knowledgebase', displayText: 'Knowledge Base' },
         { name: 'agent-event-rule', displayText: 'Triggers & Rules' },
         { name: 'agent-mcp-tool', displayText: 'MCP Tools' }
-    ];
+    ]);
 
-    onMount(() => {
-        selectedTab = tabs[0]?.name;
-    });
+    /** @type {string} */
+    let selectedTab = $state(tabs[0]?.name);
 
     /** @param {string} selected */
     function handleTabClick(selected) {
@@ -69,8 +67,8 @@
     }
 </script>
 
-<Card>
-    <CardBody>
+<div class="card">
+    <div class="card-body">
         <NavBar
             disableDefaultStyles
             containerClasses={'nav-tabs-secondary'}
@@ -107,5 +105,5 @@
         <div class:hide={selectedTab !== 'agent-mcp-tool'}>
             <AgentMcpTool agent={agent} bind:this={agentMcpToolCmp} {handleAgentChange} />
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/build/+page.svelte b/src/routes/page/agent/[agentId]/build/+page.svelte
index 31b4a078..9b0952b5 100644
--- a/src/routes/page/agent/[agentId]/build/+page.svelte
+++ b/src/routes/page/agent/[agentId]/build/+page.svelte
@@ -1,7 +1,6 @@
 <script>
-	import { onMount } from 'svelte';
 	import { Svelvet, ThemeToggle, Group } from 'svelvet';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { getAgent } from '$lib/services/agent-service.js';
 	import Thickness from './components/Thickness.svelte';
 	import AzureOpenAI from './components/LlmProviders/AzureOpenAI.svelte';
@@ -11,14 +10,15 @@
 	let zoom = 0.8;
 
 	/** @type {import('$agentTypes').AgentModel} */
-    let agent;
+	let agent = $state(/** @type {any} */ (undefined));
 
-	$: agentId = $page.params.agentId;
-	$: if (agentId) {
-		loadAgent(agentId);
-	}
-    	
-	onMount(async () => {});
+	let agentId = $derived(page.params.agentId);
+
+	$effect(() => {
+		if (agentId) {
+			loadAgent(agentId);
+		}
+	});
 
 	async function loadAgent(/** @type {string} */ id) {
 		agent = await getAgent(id);
@@ -31,7 +31,7 @@
 			position={{ x: -100, y: -25 }}
 			width={600}
 			height={700}
-			color="var(--bs-primary)"
+			color="#556ee6"
 			groupName="parameters"
 		>
 			<Thickness />
diff --git a/src/routes/page/agent/[agentId]/build/components/Agent.svelte b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
index 40927deb..b0687458 100644
--- a/src/routes/page/agent/[agentId]/build/components/Agent.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
@@ -1,10 +1,10 @@
 <script>
-	import CustomAnchor from './CustomAnchor.svelte';
 	import { Node, Anchor } from 'svelvet';
 	import { generateInput, generateOutput } from 'svelvet';
+	import CustomAnchor from './CustomAnchor.svelte';
 
-	/** @type {import('$agentTypes').AgentModel} */
-	export let agent;
+	/** @type {{ agent: import('$agentTypes').AgentModel }} */
+	let { agent } = $props();
 
     /** 
      * @typedef {Object} Inputs 
@@ -17,7 +17,7 @@
 		strokeWidth: 2,
 		noise: 1
 	};
-	const processor = (inputs) => inputs;
+	const processor = (/** @type {any} */ inputs) => inputs;
 	const inputs = generateInput(initialData);
 	const output = generateOutput(inputs, processor);
 </script>
diff --git a/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte b/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
index 2b774ded..4a62955d 100644
--- a/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/CustomAnchor.svelte
@@ -1,13 +1,15 @@
 <script>
-    /** @type boolean */
-	export let linked;
-    /** @type boolean */
-	export let connecting;
-    /** @type boolean */
-	export let hovering;
+	/**
+	 * @type {{
+	 *   linked: boolean,
+	 *   connecting: boolean,
+	 *   hovering: boolean
+	 * }}
+	 */
+	let { linked, connecting, hovering } = $props();
 </script>
 
-<div class:linked class:hovering class:connecting class="my-anchor" />
+<div class:linked class:hovering class:connecting class="my-anchor"></div>
 
 <style>
 	.my-anchor {
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 1d802e76..b833a51d 100644
--- a/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/LlmProviders/AzureOpenAI.svelte
@@ -16,7 +16,7 @@
 		maxResponseTokens: 128
 	};
 	const inputs = generateInput(initialData);
-	const procesor = (inputs) => inputs.temperature;
+	const procesor = (/** @type {any} */ inputs) => inputs.temperature;
 	const output = generateOutput(inputs, procesor);
 </script>
 
diff --git a/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte b/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
index 645626d5..efa221dd 100644
--- a/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/NodeWrapper.svelte
@@ -1,23 +1,29 @@
 <script>
-	import { Anchor, generateOutput } from 'svelvet';
+	import { Anchor } from 'svelvet';
 	import CustomAnchor from './CustomAnchor.svelte';
 
-    /** @type string */
-	export let title;
-    
-	export let outputStore;
-	export let key = '';
-	export let destroy;
+	/**
+	 * @type {{
+	 *   title: string,
+	 *   outputStore?: any,
+	 *   key?: string,
+	 *   destroy?: (() => void) | undefined,
+	 *   children?: import('svelte').Snippet
+	 * }}
+	 */
+	let { title, outputStore, key = '', destroy, children } = $props();
 </script>
 
 <div class="node">
 	<div class="header">
 		<h1>{title}</h1>
 		{#if destroy}
-			<button class="destroy" on:click={destroy}>X</button>
+			<button class="destroy" onclick={destroy}>X</button>
 		{/if}
 	</div>
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </div>
 {#if outputStore && key}
 	<div class="output-anchors">
diff --git a/src/routes/page/agent/[agentId]/build/components/Thickness.svelte b/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
index 5fb6816f..be328c7b 100644
--- a/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/Thickness.svelte
@@ -1,6 +1,6 @@
 <script>
-	import NodeWrapper from './NodeWrapper.svelte';
 	import { generateInput, generateOutput, Slider, Node } from 'svelvet';
+	import NodeWrapper from './NodeWrapper.svelte';
 
     /** 
      * @typedef {Object} Inputs 
@@ -12,7 +12,7 @@
 		width: 2.5
 	};
 	const inputs = generateInput(initialData);
-	const procesor = (inputs) => inputs.width;
+	const procesor = (/** @type {any} */ inputs) => inputs.width;
 	const output = generateOutput(inputs, procesor);
 </script>
 
diff --git a/src/routes/page/agent/[embed]/[embedType]/+page.svelte b/src/routes/page/agent/[embed]/[embedType]/+page.svelte
index 71ef21cb..57fa6a5b 100644
--- a/src/routes/page/agent/[embed]/[embedType]/+page.svelte
+++ b/src/routes/page/agent/[embed]/[embedType]/+page.svelte
@@ -1,17 +1,17 @@
 <script>
     import { _ } from 'svelte-i18n';
-    import { page } from '$app/stores';
-    import lodash from 'lodash';
+    import { page } from '$app/state';
+    import { capitalize } from 'lodash';
 	import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import EmbeddingPage from '$lib/common/embedding/EmbeddingPage.svelte';
 
-    /** @type {string?} */
-    let label = '';
+    /** @type {string} */
+    let label = $state('');
 </script>
 
-<HeadTitle title="{$_(label || 'Agent')}" addOn={`${lodash.capitalize($page.params.embed || '')}`} />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_(label || 'Agent')}" />
+<HeadTitle title={$_(label || 'Agent')} addOn={`${capitalize(page.params.embed || '')}`} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_(label || 'Agent')} />
 
 <EmbeddingPage
     htmlTagId="agent-embed-content"
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 6eb6f8dc..3560fb69 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -1,37 +1,36 @@
 <script>
   import { goto } from '$app/navigation';
   import { _ } from 'svelte-i18n';
-  import { Badge, Button, Card, CardBody, Col } from '@sveltestrap/sveltestrap';
   import { utcToLocal } from '$lib/helpers/datetime';
-	import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
-	import { AgentExtensions } from "$lib/helpers/utils/agent";
-	import { globalEventStore } from '$lib/helpers/store';
+  import { LEARNER_AGENT_ID } from "$lib/helpers/constants";
+  import { AgentExtensions } from "$lib/helpers/utils/agent";
+  import { globalEventStore } from '$lib/helpers/store';
 
-  /** @type {import('$agentTypes').AgentModel[]} */
-  export let agents;
+  /** @type {{ agents: import('$agentTypes').AgentModel[] }} */
+  let { agents } = $props();
 
   /**
 	 * @param {string} url
 	 */
   function goToPage(url) {
     if (!url) return;
-    
+
     globalEventStore.reset();
     goto(url);
   }
 </script>
 
 {#each agents as agent}
-  <Col xl="4" sm="6">
-    <Card style={"height: 95%;"}>
-      <CardBody>
+  <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">
-            <span class="avatar-title rounded-circle bg-light text-danger font-size-16">
+          <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="" height="60" />
+              <img src={agent.icon_url} alt="" width="50" height="50" style="object-fit: cover;" />
               {:else}
-              <img src="images/users/bot.png" alt="" height="60" />
+              <img src="images/users/bot.png" alt="" width="50" height="50" style="object-fit: cover;" />
               {/if}
             </span>
           </div>
@@ -39,9 +38,9 @@
           <div class="flex-grow-1 overflow-hidden">
             <div class="agent-card-header">
               <h5 class="text-truncate font-size-15 line-align-center mb-0">
-                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/${agent.id}`)}>
+                <button type="button" class="btn text-dark text-btn font-size-15" onclick={() => goToPage(`page/agent/${agent.id}`)}>
                   {agent.name}
-                </Button>
+                </button>
               </h5>
               {#if agent.is_router}
               <div
@@ -50,16 +49,16 @@
                 data-bs-placement="bottom"
                 title="Go to flowchart"
               >
-                <Button class="text-dark text-btn font-size-15" on:click={() => goToPage(`page/agent/router?agent_id=${agent.id}`)}>
-                  <i class="mdi mdi-sitemap" />
-                </Button>
+                <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}
-                  <Badge color={"info"}>{label}</Badge>
+                  <span class="badge bg-info">{label}</span>
                 {/each}
               </div>
             {:else}
@@ -95,41 +94,41 @@
               {/each}
             </div>
             </div>
-            
+
           </div>
         </div>
-      </CardBody>
+      </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">
-            <Badge color={agent.disabled ? "warning" : "success"}>{agent.disabled ? $_('Disabled') : $_('Enabled')}</Badge>
+            <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">
-            <Badge color={agent.is_public ? "success" : "warning"}>{agent.is_public ? $_('Public') : $_('Private')}</Badge>
+            <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 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 class="btn btn-primary btn-sm" on:click={() => goToPage(`page/agent/${agent.id}/build`)} disabled>
-              <i class="bx bx-wrench" /> {$_('Build')}
-            </Button>
+            <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 }      
+          {#if agent.is_public }
           <li class="list-inline-item me-1 mt-1 mb-1">
-            <Button class="btn btn-primary btn-sm" on:click={() => goToPage(`chat/${LEARNER_AGENT_ID}`)} disabled>
-              <i class="bx bx-book-open" /> {$_('Train')}
-            </Button>
+            <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 class="btn btn-primary btn-sm" color="primary" on:click={() => goToPage(`chat/${agent.id}`)} disabled={!AgentExtensions.chatable(agent)}>
-              <i class="bx bx-chat" /> {$_('Test')}
-            </Button>
+            <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>
-    </Card>
-  </Col>
+    </div>
+  </div>
 {/each}
\ No newline at end of file
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 3b2c0d13..77bd873d 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -2,7 +2,6 @@
     import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
-    import { Button, Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
     import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -12,44 +11,44 @@
     import { ADMIN_ROLES } from '$lib/helpers/constants';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 	import ScriptEditor from './script-editor.svelte';
-	
+
     /** @type {boolean} */
-    let isLoading = false;
+    let isLoading = $state(false);
     /** @type {boolean} */
-    let isComplete = false;
+    let isComplete = $state(false);
     /** @type {boolean} */
-    let isError = false;
+    let isError = $state(false);
     /** @type {number} */
     let duration = 2000;
 
     /** @type {import('$userTypes').UserModel} */
-	let user;
+	let user = $state(/** @type {any} */ (undefined));
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-	let agentOptions = [];
+	let agentOptions = $state([]);
 
     /** @type {string | null | undefined} */
-    let selectedAgentId;
+    let selectedAgentId = $state(undefined);
 
     /** @type {{
      * scripts: import('$agentTypes').AgentCodeScriptViewModel[],
      * selectedScript: import('$agentTypes').AgentCodeScriptViewModel | null
      * }}
     */
-    let srcScriptObj = {
+    let srcScriptObj = $state({
         scripts: [],
         selectedScript: null
-    };
+    });
 
     /** @type {{
      * scripts: import('$agentTypes').AgentCodeScriptViewModel[],
      * selectedScript: import('$agentTypes').AgentCodeScriptViewModel | null
      * }}
     */
-    let testScriptObj = {
+    let testScriptObj = $state({
         scripts: [],
         selectedScript: null
-    };
+    });
 
     onMount(async () => {
         user = await myInfo();
@@ -79,7 +78,7 @@
 		const selectedValues = e?.detail?.selecteds?.map(x => x.value) || [];
         selectedAgentId = selectedValues.length > 0 ? selectedValues[0] : null;
 
-        if (!!selectedAgentId) {
+        if (selectedAgentId) {
             initAgentCodeScripts(selectedAgentId);
         } else {
             refreshScriptObj([]);
@@ -172,8 +171,8 @@
     }
 </script>
 
-<HeadTitle title="{$_('Code Scripts')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Code Scripts')}" />
+<HeadTitle title={$_('Code Scripts')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('Code Scripts')} />
 
 <LoadingToComplete
     {isLoading}
@@ -181,10 +180,10 @@
     {isError}
 />
 
-<Card>
-    <CardBody class="border-bottom">
-        <Row class="g-3">
-            <Col lg="3" class="d-flex flex-column gap-1">
+<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>
                 <Select
                     tag={'agent-select'}
@@ -193,12 +192,12 @@
                     searchMode
                     selectedValues={selectedAgentId ? [selectedAgentId] : []}
                     options={agentOptions}
-                    on:select={e => changeAgent(e)}
+                    onselect={e => changeAgent(e)}
                 />
-            </Col>
-        </Row>
-    </CardBody>
-</Card>
+            </div>
+        </div>
+    </div>
+</div>
 
 {#if !!selectedAgentId}
     <ScriptEditor
@@ -213,23 +212,25 @@
     />
 
     {#if ADMIN_ROLES.includes(user?.role || '')}
-    <Row>
+    <div class="row">
         <div class="hstack gap-2 my-4">
-            <Button
+            <button
+                type="button"
                 class="btn btn-soft-primary"
                 disabled={!selectedAgentId}
-                on:click={() => saveCodeScripts()}
+                onclick={() => saveCodeScripts()}
             >
                 {$_('Save')}
-            </Button>
-            <Button
+            </button>
+            <button
+                type="button"
                 class="btn btn-warning"
                 disabled={!selectedAgentId}
-                on:click={() => resetCodeScripts()}
+                onclick={() => resetCodeScripts()}
             >
                 {$_('Reset')}
-            </Button>
+            </button>
         </div>
-    </Row>
+    </div>
     {/if}
 {/if}
\ No newline at end of file
diff --git a/src/routes/page/agent/code-scripts/script-editor.svelte b/src/routes/page/agent/code-scripts/script-editor.svelte
index 736c4bb3..39d4fa9a 100644
--- a/src/routes/page/agent/code-scripts/script-editor.svelte
+++ b/src/routes/page/agent/code-scripts/script-editor.svelte
@@ -1,11 +1,9 @@
 <script>
-    import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
-    import { Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
     import NavItem from '$lib/common/nav-bar/NavItem.svelte';
 	import CodeScript from '$lib/common/shared/CodeScript.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 
     const defaultScript = `# Python Demo
 def greet(name):
@@ -14,21 +12,20 @@ def greet(name):
 if __name__ == "__main__":
     greet('AI')
 `;
-    
-    /** @type {string} */
-    export let title;
 
-    /** @type {{
-     * scripts: import('$agentTypes').AgentCodeScriptViewModel[],
-     * selectedScript: import('$agentTypes').AgentCodeScriptViewModel | null
-     * }}
-    */
-    export let scriptObj;
+    let {
+        /** @type {string} */
+        title,
+        /** @type {{
+         * scripts: import('$agentTypes').AgentCodeScriptViewModel[],
+         * selectedScript: import('$agentTypes').AgentCodeScriptViewModel | null
+         * }} */
+        scriptObj = $bindable(),
+        /** @type {string} */
+        scriptType
+    } = $props();
 
-    /** @type {string} */
-    export let scriptType;
 
-    
     function addScript() {
         const scripts = [
             ...scriptObj.scripts,
@@ -50,6 +47,7 @@ if __name__ == "__main__":
 	 * @param {string | null | undefined} uid
 	 */
     function selectScript(uid) {
+        // @ts-ignore
         scriptObj.selectedScript = scriptObj.scripts.find(x => x.uid === uid) || null;
     }
 
@@ -57,6 +55,7 @@ if __name__ == "__main__":
 	 * @param {string | null | undefined} uid
 	 */
     function deleteScript(uid) {
+        // @ts-ignore
         const scripts = scriptObj.scripts.filter(x => x.uid !== uid);
         scriptObj = {
             ...scriptObj,
@@ -66,52 +65,53 @@ if __name__ == "__main__":
     }
 
     /**
-	 * @param {any} e
+	 * @param {string} text
 	 * @param {string | null | undefined} uid
 	 */
-    function changeScriptContent(e, uid) {
+    function changeScriptContent(text, uid) {
+        // @ts-ignore
         const found = scriptObj?.scripts?.find(x => x.uid === uid);
         if (found) {
-            found.content = e.detail.text;
+            found.content = text;
         }
     }
 </script>
 
 
 
-<Card>
-    <CardBody class="border-bottom">
-        <Row class="g-3">
-            <Col lg="3">
+<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="src-tooltip">
-                            <i class="bx bx-info-circle" />
+                        <div class="line-align-center" id="{scriptType}-src-tooltip">
+                            <i class="bx bx-info-circle"></i>
                         </div>
-                        <Tooltip target="src-tooltip" placement="top">
+                        <BotsharpTooltip target="{scriptType}-src-tooltip" placement="top">
                             <div>Support python only</div>
-                        </Tooltip>
+                        </BotsharpTooltip>
                     </div>
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
+                    <!-- 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;"
-                        on:click={() => addScript()}
+                        onclick={() => addScript()}
                     >
-                        <i class="mdi mdi-plus-circle-outline" />
+                        <i class="mdi mdi-plus-circle-outline"></i>
                     </div>
                 </div>
-            </Col>
-        </Row>
-        <Row class="g-3">
-            <Col lg="12">
+            </div>
+        </div>
+        <div class="row g-3">
+            <div class="col-lg-12">
                 {#if scriptObj.scripts.length > 0}
                     <NavBar
                         id={`agent-${scriptType}-script-container`}
@@ -142,12 +142,12 @@ if __name__ == "__main__":
                         <CodeScript
                             language={'python'}
                             scriptText={scriptObj.selectedScript?.content || ''}
-                            on:change={e => changeScriptContent(e, scriptObj.selectedScript?.uid)}
+                            onchange={(/** @type {string} */ text) => changeScriptContent(text, scriptObj.selectedScript?.uid)}
                         />
                         {/key}
                     </div>
                 {/if}
-            </Col>
-        </Row>
-    </CardBody>
-</Card>
\ No newline at end of file
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/agent/evaluator/+page.svelte b/src/routes/page/agent/evaluator/+page.svelte
index b8514c4e..69fe9844 100644
--- a/src/routes/page/agent/evaluator/+page.svelte
+++ b/src/routes/page/agent/evaluator/+page.svelte
@@ -1,36 +1,36 @@
 <script>
-	import { Col, Row } from '@sveltestrap/sveltestrap';
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
-  	import { getAgents } from '$lib/services/agent-service.js';
-  	import { onMount } from 'svelte';
 	import PlainPagination from '$lib/common/shared/PlainPagination.svelte';
-	import { _ } from 'svelte-i18n';
+	import { getAgents } from '$lib/services/agent-service.js';
 
-  	const firstPage = 1;
+	const firstPage = 1;
 	const pageSize = 12;
 
 	/** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentModel>} */
-  	let agents = { items: [], count: 0 };
+	let agents = $state({ items: [], count: 0 });
 
 	/** @type {import('$agentTypes').AgentFilter} */
 	const initFilter = {
 		pager: { page: firstPage, size: pageSize, count: 0 },
-    	types: ["evaluating"]
+		types: ["evaluating"]
 	};
 
-  	/** @type {import('$agentTypes').AgentFilter} */
-  	let filter = { ... initFilter };
+	/** @type {import('$agentTypes').AgentFilter} */
+	let filter = $state({ ...initFilter });
 
 	/** @type {import('$commonTypes').Pagination} */
-	let pager = filter.pager;
+	// svelte-ignore state_referenced_locally
+	let pager = $state(filter.pager);
 
 	onMount(async () => {
 		await getPagedAgents();
 	});
 
-  	async function getPagedAgents() {
-    	agents = await getAgents(filter);
+	async function getPagedAgents() {
+		agents = await getAgents(filter);
 		refresh();
 	}
 
@@ -65,7 +65,7 @@
 		};
 
 		filter = {
-      ...filter,
+			...filter,
 			pager: pager
 		};
 
@@ -73,7 +73,7 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Evaluator')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Evaluator')}" />
+<HeadTitle title={$_('Evaluator')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('Evaluator')} />
 
 <PlainPagination pagination={pager} pageTo={pageTo} />
\ No newline at end of file
diff --git a/src/routes/page/agent/router/+page.svelte b/src/routes/page/agent/router/+page.svelte
index b0a8650e..8681f990 100644
--- a/src/routes/page/agent/router/+page.svelte
+++ b/src/routes/page/agent/router/+page.svelte
@@ -2,29 +2,28 @@
   import { onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { page } from '$app/stores';
-  import { Col, Row } from '@sveltestrap/sveltestrap';
   import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
   import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
   import { getAgents } from '$lib/services/agent-service.js';
-	import { AgentType } from '$lib/helpers/enums';
+  import { AgentType } from '$lib/helpers/enums';
   import RoutingFlow from './routing-flow.svelte'
 
   const params = $page.url.searchParams;
 
   /** @type {import('$agentTypes').AgentModel[]} */
-  let routers;
-  let isRouterNodeSelected = false;
-  let isAgentNodeSelected = false;
+  let routers = $state([]);
+  let isRouterNodeSelected = $state(false);
+  let isAgentNodeSelected = $state(false);
 
   /** @type {string?} */
-  let targetAgentId = '';
+  let targetAgentId = $state('');
 
   /** @type {import('$agentTypes').AgentFilter} */
-	const filter = {
-		pager: { page: 1, size: 10, count: 0 },
+  const filter = {
+    pager: { page: 1, size: 10, count: 0 },
     disabled: false,
-		types: [AgentType.Routing]
-	};
+    types: [AgentType.Routing]
+  };
 
   onMount(async () => {
     targetAgentId = params.get('agent_id');
@@ -32,7 +31,7 @@
   });
 
   async function getRouter() {
-    if (!!targetAgentId) {
+    if (targetAgentId) {
       filter.agentIds = [targetAgentId];
     }
     const response = await getAgents(filter);
@@ -46,32 +45,30 @@
     isAgentNodeSelected = false;
   }
 
-  /** @param {import('$agentTypes').AgentModel} agent */
-  function handleRouterNodeSelected(agent) {
+  function handleRouterNodeSelected() {
     isRouterNodeSelected = true;
     isAgentNodeSelected = true;
-  }  
+  }
 
-  /** @param {import('$agentTypes').AgentModel} agent */
-  function handleAgentNodeSelected(agent) {
+  function handleAgentNodeSelected() {
     isRouterNodeSelected = false;
     isAgentNodeSelected = true;
   }
 </script>
 
-<HeadTitle title="{$_('Routing')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Routing')}" />
+<HeadTitle title={$_('Routing')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('Routing')} />
 
 {#if routers}
-<Row>
-  <Col>
+<div class="row">
+  <div class="col">
     <RoutingFlow
       routers={routers}
       viewOnlyMode={!!targetAgentId}
-      on:userNodeSelected={(e) => handleUserNodeSelected()}
-      on:routerNodeSelected={(e) => handleRouterNodeSelected(e.detail.agent)}
-      on:agentNodeSelected={(e) => handleAgentNodeSelected(e.detail.agent)}/>
-  </Col>    
-</Row>
-{/if}   
+      onuserNodeSelected={() => handleUserNodeSelected()}
+      onrouterNodeSelected={() => handleRouterNodeSelected()}
+      onagentNodeSelected={() => handleAgentNodeSelected()}/>
+  </div>
+</div>
+{/if}
 
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
index 64e7058c..d9fd1d3a 100644
--- a/src/routes/page/agent/router/routing-flow.svelte
+++ b/src/routes/page/agent/router/routing-flow.svelte
@@ -1,18 +1,27 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+    import { onMount } from 'svelte';
     import Drawflow from 'drawflow';
     import 'drawflow/dist/drawflow.min.css';
     import '$lib/drawflow/drawflow.css';
     import { getAgents } from '$lib/services/agent-service.js';
 	import { AgentType } from '$lib/helpers/enums';
 
-    let includeRoutingAgent = true;
-    let includePlannerAgent = false;
-    let includeTaskAgent = false;
-    let includeStaticAgent = false;
+    /** @type {{ routers: import('$agentTypes').AgentModel[], viewOnlyMode?: boolean, onuserNodeSelected?: () => void, onrouterNodeSelected?: () => void, onagentNodeSelected?: () => void }} */
+    let {
+        routers,
+        viewOnlyMode = false,
+        onuserNodeSelected,
+        onrouterNodeSelected,
+        onagentNodeSelected
+    } = $props();
+
+    let includeRoutingAgent = $state(true);
+    let includePlannerAgent = $state(false);
+    let includeTaskAgent = $state(false);
+    let includeStaticAgent = $state(false);
 
     /** @type {any[]} */
-    let agents = [];
+    let agents = $state([]);
 
     /** @type {any[]} */
     let agentNodes = [];
@@ -24,15 +33,8 @@
         types: [AgentType.Planning, AgentType.Task]
 	};
 
-    /** @type {import('$agentTypes').AgentModel[]} */
-    export let routers;
-
-    /** @type {boolean} */
-    export let viewOnlyMode = false;
-
     /** @type {Drawflow} */
     let editor;
-    const dispatch = createEventDispatcher();
     
     onMount(async () => {
         if (viewOnlyMode) {
@@ -143,7 +145,7 @@
                 }
             });
 
-            if (!!nodeId) {
+            if (nodeId) {
                 posY += nodeSpaceY;
             }
         });
@@ -223,7 +225,7 @@
                 }
             }
 
-            if (!!nodeId) {
+            if (nodeId) {
                 posY += nodeSpaceY;
             }
 
@@ -249,7 +251,7 @@
     /** @param {import('$agentTypes').AgentModel} router */
     function getPlannerName(router) {
         const planner = router.routing_rules?.find(p => p.type == "planner");
-        return !!planner ? planner.field ?? "NaviePlanner" : null;
+        return planner ? planner.field ?? "NaviePlanner" : null;
     }
 
     async function handlePlannerAgentSelected() {
@@ -313,7 +315,7 @@
         id="btncheck2"
         autocomplete="off"
         disabled={viewOnlyMode}
-        on:click={() => handlePlannerAgentSelected()}
+        onclick={() => handlePlannerAgentSelected()}
     />
     <label
         class={`btn btn-${includePlannerAgent ? "" : "outline-"}primary`}
@@ -328,7 +330,7 @@
         id="btncheck3"
         autocomplete="off"
         disabled={viewOnlyMode}
-        on:click={() => handleTaskAgentSelected()}
+        onclick={() => handleTaskAgentSelected()}
     />
     <label 
         class={`btn btn-${includeTaskAgent ? "" : "outline-"}primary`}
@@ -343,7 +345,7 @@
         id="btncheck4"
         autocomplete="off"
         disabled={viewOnlyMode}
-        on:click={() => handleStaticAgentSelected()}
+        onclick={() => handleStaticAgentSelected()}
     />
     <label
         class={`btn btn-${includeStaticAgent ? "" : "outline-"}primary`}
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 80f08d0d..fa8f188b 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -4,15 +4,6 @@
 	import { _ } from 'svelte-i18n';
 	import Swal from 'sweetalert2';
 	import lodash from "lodash";
-	import {
-		Button,
-		Card,
-		CardBody,
-		Col,
-		Input,
-		Row,
-		Table
-	} from '@sveltestrap/sveltestrap';
 	import StateSearch from '$lib/common/shared/StateSearch.svelte';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
@@ -34,58 +25,57 @@
 		goToUrl,
 		convertTimeRange
 	} from '$lib/helpers/utils/common';
-	
 
 	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 15;
 
 	/** @type {boolean} */
-	let isLoading = false;
-	let isComplete = false;
-	let showStateSearch = false;
+	let isLoading = $state(false);
+	let isComplete = $state(false);
+	let showStateSearch = $state(false);
 	let isPageMounted = false;
 
-    /** @type {import('$commonTypes').PagedItems<import('$conversationTypes').ConversationModel>} */
-    let conversations = { count: 0, items: [] };
+	/** @type {import('$commonTypes').PagedItems<import('$conversationTypes').ConversationModel>} */
+	let conversations = $state({ count: 0, items: [] });
 
 	/** @type {import('$conversationTypes').ConversationFilter} */
 	const initFilter = {
 		pager: { page: firstPage, size: pageSize, count: 0 }
 	};
 
-    /** @type {import('$conversationTypes').ConversationFilter} */
-    let filter = { ... initFilter };
+	/** @type {import('$conversationTypes').ConversationFilter} */
+	let filter = $state({ ...initFilter });
 
+	// svelte-ignore state_referenced_locally
 	/** @type {import('$commonTypes').Pagination} */
-	let pager = filter.pager;
+	let pager = $state(filter.pager);
 
 	/** @type {string[]} */
-	let searchStateStrs = [];
+	let searchStateStrs = $state([]);
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let agentOptions = [];
+	let agentOptions = $state([]);
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let statusOptions = [
+	const statusOptions = [
 		{ value: 'open', label: 'Active' },
 		{ value: 'closed', label: 'Completed' }
 	];
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let channelOptions = Object.entries(ConversationChannel).map(([k, v]) => (
+	const channelOptions = Object.entries(ConversationChannel).map(([k, v]) => (
 		{ value: k.toLowerCase(), label: v }
 	));
 
-
 	/** @type {{ startTime: string | null, endTime: string | null }} */
-	let innerTimeRange = {
+	let innerTimeRange = $state({
 		startTime: null,
 		endTime: null
-	};
+	});
 
 	/** @type {import('$conversationTypes').ConversationSearchOption} */
-	let searchOption = {
+	let searchOption = $state({
 		agentId: null,
 		agentIds: [],
 		channel: null,
@@ -96,12 +86,12 @@
 		endDate: '',
 		states: [],
 		tags: []
-	};
+	});
 
 	/** @type {{key: string, value: string | null}[]} */
-    let states = [
-        { key: '', value: ''}
-    ];
+	let states = $state([
+		{ key: '', value: '' }
+	]);
 
     onMount(async () => {
 		isPageMounted = true;
@@ -229,7 +219,7 @@
 				isComplete = false;
 			}, duration);
 			await reloadConversations();
-		}).catch(err => {
+		}).catch(() => {
 			isLoading = false;
 			isComplete = false;
 		});
@@ -287,7 +277,7 @@
 	}
 
 	function loadSearchOption() {
-		return new Promise((resolve, reject) => {
+		return new Promise((resolve) => {
 			refreshFilter();
 			handleSearchStates();
 			resolve(searchOption);
@@ -318,7 +308,7 @@
 			value: { data: lodash.trim(x.value) || '', isValid: true },
 			active_rounds: {data: -1, isValid: true},
 		})) || [];
-		return searchOption.states.map(x => ({ key: x.key.data, value: x.value.data }));;
+		return searchOption.states.map(x => ({ key: x.key.data, value: x.value.data }));
 	}
 
 	function handleSearchStates() {
@@ -328,18 +318,22 @@
 
 	function sortSearchStates() {
 		searchOption.states = searchOption.states?.map(x => {
-			if (!!x.key) x.key.data = lodash.trim(x.key.data);
-			if (!!x.value) x.value.data = lodash.trim(x.value.data)
+			if (x.key) {
+				x.key.data = lodash.trim(x.key.data);
+			}
+			if (x.value) {
+				x.value.data = lodash.trim(x.value.data);
+			}
 			return x;
 		})?.sort((a, b) => {
-			const stra = `${!!a.key?.data ? a.key.data : ''} ${!!a.value?.data ? b.value.data : ''}`;
-			const strb = `${!!b.key?.data ? b.key.data : ''} ${!!b.value?.data ? b.value.data : ''}`;
-			if (stra.length != strb.length) {
+			const stra = `${a.key?.data ? a.key.data : ''} ${a.value?.data ? b.value.data : ''}`;
+			const strb = `${b.key?.data ? b.key.data : ''} ${b.value?.data ? b.value.data : ''}`;
+			if (stra.length !== strb.length) {
 				return stra.length - strb.length;
 			}
 			const keya = a.key?.data?.toLowerCase() || '';
 			const keyb = b.key?.data?.toLowerCase() || '';
-			return keya < keyb ? -1 : keya == keyb ? 0 : 1;
+			return keya < keyb ? -1 : keya === keyb ? 0 : 1;
 		}) || [];
 	}
 
@@ -358,7 +352,7 @@
 
 	/** @param {string | number} index */
 	function handleCloseLabel(index) {
-		searchOption.states = searchOption.states.filter((x, idx) => idx != index);
+		searchOption.states = searchOption.states.filter((x, idx) => idx !== index);
 		buldSearchStateString();
 	}
 
@@ -395,8 +389,6 @@
 				...searchOption,
 				tags: e.target.value?.length > 0 ? [e.target.value] : []
 			};
-		} else if (type === 'timeRange') {
-			// This handler is no longer used, but kept for compatibility
 		}
 	}
 
@@ -416,8 +408,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Conversation List')}" />
-<Breadcrumb title="{$_('Communication')}" pagetitle="{$_('Conversations')}" />
+<HeadTitle title={$_('Conversation List')} />
+<Breadcrumb title={$_('Communication')} pagetitle={$_('Conversations')} />
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -425,45 +417,46 @@
 	successText={'Delete completed!'}
 />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody class="border-bottom">
+<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
-							color={showStateSearch ? 'secondary' : 'primary'}
-							on:click={() => showStateSearch = !showStateSearch}
+						<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 class="bx bx-hide"></i>
 									{:else}
-										<i class="bx bx-search-alt" />
+										<i class="bx bx-search-alt"></i>
 									{/if}
 								</div>
 								<div class="search-btn-text">{'State Search'}</div>
 							</div>
-						</Button>						
+						</button>
 					</div>
 				</div>
-			</CardBody>
+			</div>
 			{#if showStateSearch}
-				<CardBody class="border-bottom">
-					<Row class="g-3 justify-content-end">
-						<Col lg="6">
+				<div class="card-body border-bottom">
+					<div class="row g-3 justify-content-end">
+						<div class="col-lg-6">
 							<StateSearch bind:states={states} onSearch={q => handleStateSearch(q)}/>
-						</Col>
-					</Row>
-				</CardBody>
+						</div>
+					</div>
+				</div>
 			{/if}
-			<CardBody class="border-bottom">
-				<Row class="g-3">
-					<Col lg="3">
+			<div class="card-body border-bottom">
+				<div class="row g-3">
+					<div class="col-lg-3">
 						<Select
 							tag={'agent-select'}
 							placeholder={'Select Agents'}
@@ -472,67 +465,67 @@
 							searchMode
 							selectedValues={searchOption.agentIds}
 							options={agentOptions}
-							on:select={e => changeOption(e, 'agent')}
+							onselect={e => changeOption(e, 'agent')}
 						/>
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
 						<Select
 							tag={'task-select'}
 							placeholder={'Select Status'}
 							selectedText={'status'}
 							selectedValues={searchOption.status ? [searchOption.status] : []}
 							options={statusOptions}
-							on:select={e => changeOption(e, 'status')}
+							onselect={e => changeOption(e, 'status')}
 						/>
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
 						<Select
 							tag={'channel-select'}
 							placeholder={'Select Channel'}
 							selectedText={'channel'}
 							selectedValues={searchOption.channel ? [searchOption.channel] : []}
 							options={channelOptions}
-							on:select={e => changeOption(e, 'channel')}
+							onselect={e => changeOption(e, 'channel')}
 						/>
-					</Col>
-					<Col lg="2">
-						<Input
-							type={'text'}
-							placeholder={'Tag'}
+					</div>
+					<div class="col-lg-2">
+						<input
+							type="text"
+							class="form-control"
+							placeholder="Tag"
 							maxlength={100}
-							on:input={e => changeOption(e, "tags")}
+							oninput={e => changeOption(e, 'tags')}
 						/>
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
 						<TimeRangePicker
 							storageKey="botsharp_conversation_recent_time_ranges"
 							bind:timeRange={searchOption.timeRange}
 							bind:startDate={searchOption.startDate}
 							bind:endDate={searchOption.endDate}
-							on:change={(e) => {
+							onchange={(data) => {
 								// Only update searchOption, don't trigger query immediately
-								searchOption.timeRange = e.detail.timeRange;
-								searchOption.startDate = e.detail.startDate;
-								searchOption.endDate = e.detail.endDate;
+								searchOption.timeRange = data.timeRange;
+								searchOption.startDate = data.startDate;
+								searchOption.endDate = data.endDate;
 							}}
 						/>
-					</Col>
-					<Col lg="1">
-						<Button
+					</div>
+					<div class="col-lg-1">
+						<button
 							type="button"
-							color="secondary"
-							class="btn-soft-secondary w-100"
-							on:click={(e) => searchConversations(e)}
+							class="btn btn-secondary btn-soft-secondary w-100"
+							onclick={(e) => searchConversations(e)}
 						>
-							<i class="mdi mdi-filter-outline align-middle" />
+							<i class="mdi mdi-filter-outline align-middle"></i>
 							<span class="d-none">{$_('Filter')}</span>
-						</Button>
-					</Col>
-				</Row>
-			</CardBody>
-			<CardBody>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="card-body">
 				<div class="table-responsive thin-scrollbar">
-					<Table class="align-middle nowrap" bordered>
+					<table class="table table-bordered align-middle nowrap conv-table">
 						<thead>
 							<tr>
 								<th scope="col" class="list-title">{$_('Title')}</th>
@@ -548,8 +541,9 @@
 						<tbody>
 							{#each conversations.items as conv}
 							<tr>
-								<td scope="row" class="list-title">
-									<a href="page/conversation/{conv.id}">{conv.title}</a></td>
+								<td class="list-title">
+									<a href="page/conversation/{conv.id}">{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>
@@ -559,38 +553,59 @@
 								<td>
 									<ul class="list-unstyled hstack gap-1 mb-0">
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
-											<Button
+											<button
+												type="button"
 												class="btn btn-sm btn-soft-primary"
-												on:click={() => window.open(`page/conversation/${conv.id}`)}
+												aria-label="View Detail"
+												onclick={() => window.open(`page/conversation/${conv.id}`)}
 											>
-												<i class="mdi mdi-eye-outline" />
-											</Button>
+												<i class="mdi mdi-eye-outline"></i>
+											</button>
 										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Chat">
-											<Button
+											<button
+												type="button"
 												class="btn btn-sm btn-soft-info"
-												on:click={() => window.open(`chat/${conv.agent_id}/${conv.id}`)}
+												aria-label="Chat"
+												onclick={() => window.open(`chat/${conv.agent_id}/${conv.id}`)}
 											>
-                                                <i class="mdi mdi-chat" />
-                                            </Button>
+												<i class="mdi mdi-chat"></i>
+											</button>
 										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-											<Button
+											<button
+												type="button"
 												class="btn btn-sm btn-soft-danger"
-												on:click={() => openDeleteModal(conv.id)}
+												aria-label="Delete"
+												onclick={() => openDeleteModal(conv.id)}
 											>
-                                                <i class="mdi mdi-delete-outline" />
-                                            </Button>
+												<i class="mdi mdi-delete-outline"></i>
+											</button>
 										</li>
 									</ul>
 								</td>
 							</tr>
 							{/each}
 						</tbody>
-					</Table>
+					</table>
 				</div>
 				<TablePagination pagination={pager} pageTo={(pn) => pageTo(pn)} />
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
\ No newline at end of file
+			</div>
+		</div>
+	</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 057a2ca3..f209f3e8 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -4,7 +4,6 @@
     import { goto } from '$app/navigation';
     import Swal from 'sweetalert2';
     import { _ } from 'svelte-i18n';
-    import { Col, Row, Button } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -16,21 +15,20 @@
     const params = $page.params;
     const dialogCount = 100;
 
-    let isLoading = false;
+    let isLoading = $state(false);
 
-    /** @type {import('$conversationTypes').ConversationModel} */
-    let conversation;
+    /** @type {import('$conversationTypes').ConversationModel | undefined | null} */
+    let conversation = $state(undefined);
 
     /** @type {import('$conversationTypes').ChatResponseModel[]} */
-    let dialogs = [];
-
+    let dialogs = $state([]);
 
     onMount(async () => {
         isLoading = true;
         conversation = await getConversation(params.conversationId, true);
         isLoading = false;
         dialogs = await getDialogs(conversation.id, dialogCount);
-    });  
+    });
 
     function handleConversationDeletion() {
         // @ts-ignore
@@ -43,37 +41,39 @@
             confirmButtonText: 'Yes, delete it!'
         }).then(async (result) => {
             if (result.value) {
-                await deleteConversation(conversation.id);
-                goto("page/conversation");
+                if (conversation?.id) {
+                    await deleteConversation(conversation.id);
+                    goto("page/conversation");
+                }
             }
         });
     }
-
 </script>
 
 <HeadTitle title={conversation?.title || 'Not found'} />
-<Breadcrumb title="{$_('Conversation')}" pagetitle="{$_('Conversation Detail')}" />
+<Breadcrumb title={$_('Conversation')} pagetitle={$_('Conversation Detail')} />
 
 <LoadingToComplete {isLoading} />
 
 {#if conversation}
-    <Row>
-        <Col style="flex: 40%;">
+    <div class="row">
+        <div class="col" style="flex: 40%;">
             <Overview {conversation} />
             <States {conversation} />
-        </Col>
-        <Col style="flex: 60%;">
+        </div>
+        <div class="col" style="flex: 60%;">
             <Dialog {conversation} {dialogs} />
-        </Col>
-    </Row>
-    <Row>
+        </div>
+    </div>
+    <div class="row">
         <div class="mb-4">
-            <Button
+            <button
+                type="button"
                 class="btn btn-danger btn-hover rounded"
-                on:click={() => handleConversationDeletion()}
+                onclick={() => handleConversationDeletion()}
             >
                 <i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
-            </Button>
+            </button>
         </div>
-    </Row>
+    </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 dff675cd..9d831d49 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialog-element.svelte
@@ -1,13 +1,12 @@
 <script>
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
-	import { Button } from '@sveltestrap/sveltestrap';
 	import RcJsInterpreter from '../../../chat/[agentId]/[conversationId]/rich-content/rc-js-interpreter.svelte';
 	import { RichType } from '$lib/helpers/enums';
 
-  /** @type {import('$conversationTypes').ChatResponseModel} */
-  export let dialog;
+  /** @type {{ dialog: import('$conversationTypes').ChatResponseModel }} */
+  let { dialog } = $props();
 
-  let is_collapsed = true;
+  let is_collapsed = $state(true);
 
   /** @param {any} e */
   function toggleText(e) {
@@ -18,7 +17,7 @@
 
 <div
   class="fw-bold"
-  class:text-collapse={!!is_collapsed}
+  class:text-collapse={is_collapsed}
 >
   {#if dialog?.rich_content?.message?.rich_type === RichType.ProgramCode
       && dialog?.rich_content?.message?.language === 'javascript'}
@@ -32,11 +31,11 @@
   {/if}
 </div>
 
-<Button
-  class='toggle-btn btn-sm text-secondary'
-  color="link"
-  style={'padding-left: 0px;'}
-  on:click={(e) => toggleText(e)}
+<button
+  type="button"
+  class="btn btn-link toggle-btn btn-sm text-secondary"
+  style="padding-left: 0px;"
+  onclick={(e) => toggleText(e)}
 >
-  {`${is_collapsed ? 'More +' : 'Less -'}`}
-</Button>
\ No newline at end of file
+  {is_collapsed ? 'More +' : 'Less -'}
+</button>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index d6ef5cb2..a75b344c 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -1,8 +1,6 @@
 <script>
-    import { onMount } from 'svelte';
-    import { _ } from 'svelte-i18n' 
+    import { _ } from 'svelte-i18n';
     import util from "lodash";
-    import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
     import { getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
 	import { IMAGE_DATA_PREFIX, BOT_SENDERS } from '$lib/helpers/constants';
@@ -15,20 +13,22 @@
     const maxTextLength = 4096;
     const duration = 1500;
 
+    /**
+     * @type {{
+     *   conversation: import('$conversationTypes').ConversationModel,
+     *   dialogs?: import('$conversationTypes').ChatResponseModel[]
+     * }}
+     */
+    let { conversation, dialogs = [] } = $props();
+
     /** @type {boolean} */
-    let isOpenNotificationModal = false;
-    let isComplete = false;
+    let isOpenNotificationModal = $state(false);
+    let isComplete = $state(false);
 
     /** @type {string} */
-    let text = '';
-
-    /** @type {import('$conversationTypes').ConversationModel} */
-    export let conversation;
-
-    /** @type {import('$conversationTypes').ChatResponseModel[]} */
-    export let dialogs = [];
+    let text = $state('');
 
-    /** 
+    /**
      * @param {import('$conversationTypes').ChatResponseModel} dialog
      * @returns {boolean}
     */
@@ -77,59 +77,64 @@
     confirm={() => confirmMsg()}
     cancel={() => toggleNotificationModal()}
     confirmBtnText={'Send'}
-    disableConfirmBtn={!!!util.trim(text)}
+    disableConfirmBtn={!util.trim(text)}
 >
-    <textarea class="form-control chat-input" rows="5" maxlength={maxTextLength} bind:value={text} placeholder="Enter Message..." />
+    <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>
 </DialogModal>
 
-<Card>
-    <CardBody>
+<div class="card">
+    <div class="card-body">
         <div style="display: flex; justify-content: space-between;">
             <div>
-                <CardTitle class="mb-5 h4">{$_('Dialogs')}</CardTitle>
+                <h4 class="card-title mb-5">{$_('Dialogs')}</h4>
             </div>
             <div style="display: flex; justify-content: flex-end; gap: 5px;">
                 <div>
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <div
+                    <button
+                        type="button"
                         class="btn btn-soft-warning btn-sm btn-rounded"
                         data-bs-toggle="tooltip"
                         data-bs-placement="top"
                         title="Send notification"
-                        on:click={() => handleSendNotification()}
+                        aria-label="Send notification"
+                        onclick={() => handleSendNotification()}
                     >
-                        <i class="mdi mdi-bell-ring" />
-                    </div>
+                        <i class="mdi mdi-bell-ring"></i>
+                    </button>
                 </div>
                 <div>
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <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"
-                        on:click={() => goToChat()}
+                        aria-label="Go to chat"
+                        onclick={() => goToChat()}
                     >
-                        <i class="mdi mdi-chat" />
-                </div>
+                        <i class="mdi mdi-chat"></i>
+                    </button>
                 </div>
             </div>
         </div>
-        <div class="">
+        <div>
             <ul class="verti-timeline list-unstyled">
                 {#each dialogs as dialog}
                 <li class="event-list">
                     <div class="event-timeline-dot">
                       <i
-                        class={"bx " + showInRight(dialog)
+                        class={"bx " + (showInRight(dialog)
                           ? "bx-right-arrow-circle bx-fade-right"
-                          : "bx-right-arrow-circle"}
-                      />
+                          : "bx-right-arrow-circle")}></i>
                     </div>
                     <div class="d-flex" style="gap: 10px;">
                         <div class="flex-shrink-0">
@@ -142,7 +147,7 @@
                             </div>
                             <div>
                                 <ConvDialogElement dialog={dialog} />
-                                {#if !!dialog.has_message_files || dialog.data?.startsWith(IMAGE_DATA_PREFIX)}
+                                {#if dialog.has_message_files || dialog.data?.startsWith(IMAGE_DATA_PREFIX)}
                                     <MessageFileGallery
                                         message={dialog}
                                         appendImage
@@ -162,5 +167,5 @@
                 {/each}
             </ul>
         </div>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-overview.svelte b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
index e46cb70e..150e5f6c 100644
--- a/src/routes/page/conversation/[conversationId]/conv-overview.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-overview.svelte
@@ -1,16 +1,14 @@
 <script>
-    import { Button, Card, CardBody, CardTitle} from '@sveltestrap/sveltestrap';
     import { utcToLocal } from '$lib/helpers/datetime';
-    import { _ } from 'svelte-i18n'
+    import { _ } from 'svelte-i18n';
 
-    /** @type {import('$conversationTypes').ConversationModel} */
-    export let conversation;
+    /** @type {{ conversation: import('$conversationTypes').ConversationModel }} */
+    let { conversation } = $props();
 </script>
 
-<Card>
-    <CardBody>
+<div class="card">
+    <div class="card-body">
         <div class="text-center">
-            <!--<img src={adobephotoshop} alt="" height="50" class="mx-auto d-block" />-->
             <h5 class="mt-3 mb-1 ellipsis">{conversation.title}</h5>
             <p class="text-muted mb-0">{utcToLocal(conversation.created_time)}</p>
         </div>
@@ -68,5 +66,5 @@
             </li>
             {/if}
         </ul>
-    </CardBody>
-</Card>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/[conversationId]/conv-states.svelte b/src/routes/page/conversation/[conversationId]/conv-states.svelte
index 36b5cab4..8088cf4b 100644
--- a/src/routes/page/conversation/[conversationId]/conv-states.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-states.svelte
@@ -1,25 +1,28 @@
 <script>
-    import { onMount } from 'svelte';
-    import { Card, CardBody, CardTitle} from '@sveltestrap/sveltestrap';
-    import jsonview from '@pgrabovets/json-view';
+    import JSONTree from 'svelte-json-tree';
 	import { formatObject } from '$lib/helpers/utils/common';
 
-    /** @type {import('$conversationTypes').ConversationModel} */
-    export let conversation;    
-
-    onMount(() => {
-        // create json tree object
-        const tree = jsonview.create(formatObject(conversation.states));
-
-        // render tree into dom element
-        jsonview.render(tree, document.querySelector('#conversationStates'));
-        jsonview.expand(tree);
-    });    
+    /** @type {{ conversation: import('$conversationTypes').ConversationModel }} */
+    let { conversation } = $props();
 </script>
 
-<Card>
-    <CardBody>
-        <CardTitle class="mb-5 h4">States</CardTitle>
-        <div id="conversationStates"></div>
-    </CardBody>
-</Card>
\ No newline at end of file
+<div class="card">
+    <div class="card-body">
+        <h4 class="card-title mb-5">States</h4>
+        <div class="conv-states-tree">
+            <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)"
+            />
+        </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 7a45e645..4350df45 100644
--- a/src/routes/page/dashboard/+page.svelte
+++ b/src/routes/page/dashboard/+page.svelte
@@ -1,66 +1,41 @@
 <script>
+	import { onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import { PUBLIC_LOGIN_IMAGE, PUBLIC_BRAND_NAME } from '$env/static/public';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
-	import { _ } from 'svelte-i18n'
-	import {
-		Card,
-		Col,
-		Row,
-		Image,
-		CardBody,
-		CardTitle,
-		Nav,
-		NavItem,
-		Input,
-		Button
-	} from '@sveltestrap/sveltestrap';
-
-
-	import Link from 'svelte-link/src/Link.svelte';
+	import { getDashboardSettings } from '$lib/services/dashboard-service';
+	import { userStore } from '$lib/helpers/store';
+	import Conversation from './Conversation.svelte';
 	import RadialBarChart from './RadialBarChart.svelte';
 	import StackedColumnChart from './StackedColumnChart.svelte';
 	import SocialSource from './SocialSource.svelte';
 	import Activity from './Activity.svelte';
 	import TopSellingProduct from './TopSellingProduct.svelte';
-	import { 
-		PUBLIC_LOGIN_IMAGE,
-		PUBLIC_BRAND_NAME
-	} from '$env/static/public';
-	import { onMount } from 'svelte';
-	import { getUserStore, userStore } from '$lib/helpers/store';
-	import Conversation from './Conversation.svelte';
-	import { getDashboardSettings } from '$lib/services/dashboard-service';
-	
-	let subscribemodal = false;
-	let user = {full_name: "", id: ""};
+
+	let user = $state({full_name: "", id: ""});
 
 	/**
-	 * @type {import("../../../lib/helpers/types/userTypes").DashboardModel}
+	 * @type {import("$lib/helpers/types/userTypes").DashboardModel | undefined}
 	 */
-	let dashboard_model ;
-	const togglesubscribemodal = (() => {
-		subscribemodal = !subscribemodal;
-	})
+	let dashboard_model = $state(undefined);
 
 	onMount(() => {
 		const userModelSubscribe = userStore.subscribe((/** @type {{ full_name: string; id: string }} */ value) => {
 			user = value;
-		})
-		user = getUserStore();
-		loadDashboardComponents(user.id);
-		setTimeout(() => {
-			subscribemodal = true;
-		}, 1000);
-	})
+		});
+		loadDashboardComponents();
 
-	/**
-	 * @param {string} userId The user input
-	 */
-	async function loadDashboardComponents(userId) {
+		return () => {
+			userModelSubscribe();
+		};
+	});
+
+	async function loadDashboardComponents() {
 		getDashboardSettings()
 		.then(
 			response => {
-				dashboard_model = response
+				dashboard_model = response;
 			}
 		)
 		.catch();
@@ -69,86 +44,86 @@
 
 <HeadTitle title={$_('Dashboard')} />
 
-<Breadcrumb title="{$_('Home')}" pagetitle="{$_('Dashboard')}" />
+<Breadcrumb title={$_('Home')} pagetitle={$_('Dashboard')} />
 
-<Row>
-	<Col xl={4}>
-		<Card class="overflow-hidden">
+<div class="row">
+	<div class="col-xl-4">
+		<div class="card overflow-hidden">
 			<div class="bg-primary-subtle">
-				<Row class="row">
-					<Col xs={7}>
+				<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>
-					</Col>
-					<Col xs={5} class="align-self-end">
-						<Image src={PUBLIC_LOGIN_IMAGE} alt="" class="img-fluid" />
-					</Col>
-				</Row>
+					</div>
+					<div class="col-5 align-self-end">
+						<img src={PUBLIC_LOGIN_IMAGE} alt="" class="img-fluid" />
+					</div>
+				</div>
 			</div>
-			<CardBody class="pt-0">
-				<Row>
-					<Col sm={4}>
+			<div class="card-body pt-0">
+				<div class="row">
+					<div class="col-sm-4">
 						<div class="avatar-md profile-user-wid mb-4">
-							<Image src='images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
+							<img src='images/users/user-dummy.jpg' alt="" class="img-thumbnail rounded-circle" />
 						</div>
 						<h5 class="font-size-15 text-truncate">{user?.full_name}</h5>
 						<p class="text-muted mb-0 text-truncate">{$_('Agent Manager')}</p>
-					</Col>
-					<Col sm={8}>
+					</div>
+					<div class="col-sm-8">
 						<div class="pt-4">
-							<Row>
-								<Col xs={6}>
+							<div class="row">
+								<div class="col-6">
 									<h5 class="font-size-15">125</h5>
 									<p class="text-muted mb-0">Conversations</p>
-								</Col>
-								<Col xs={6}>
+								</div>
+								<div class="col-6">
 									<h5 class="font-size-15">$1245</h5>
 									<p class="text-muted mb-0">{$_('Token Cost')}</p>
-								</Col>
-							</Row>
+								</div>
+							</div>
 							<div class="mt-4">
-								<Link href="page/user/me" class="btn btn-primary waves-effect waves-light btn-sm">
-									{$_('View Profile')} <i class="mdi mdi-arrow-right ms-1" />
-								</Link>
+								<a href="page/user/me" class="btn btn-primary waves-effect waves-light btn-sm">
+									{$_('View Profile')} <i class="mdi mdi-arrow-right ms-1"></i>
+								</a>
 							</div>
 						</div>
-					</Col>
-				</Row>
-			</CardBody>
-		</Card>
-		<Card>
-			<CardBody>
-				<CardTitle class="mb-4">{$_('Monthly Cost')}</CardTitle>
-				<Row>
-					<Col sm={6}>
+					</div>
+				</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">
 						<p class="text-muted">{$_('This month')}</p>
 						<h3>$34,252</h3>
 						<p class="text-muted">
-							<span class="text-success me-2"> 12% <i class="mdi mdi-arrow-up" /> </span> {$_('From previous period')}
+							<span class="text-success me-2"> 12% <i class="mdi mdi-arrow-up"></i> </span> {$_('From previous period')}
 						</p>
 						<div class="mt-4">
-							<Link class="btn btn-primary waves-effect waves-light btn-sm"
-								>{$_('View More')} <i class="mdi mdi-arrow-right ms-1" /></Link
+							<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>
-					</Col>
-					<Col sm={6}>
+					</div>
+					<div class="col-sm-6">
 						<div class="mt-4 mt-sm-0">
 							<RadialBarChart chartColor={['--bs-primary']} />
 						</div>
-					</Col>
-				</Row>
+					</div>
+				</div>
 				<p class="text-muted mb-0">{$_('We craft digital, graphic and dimensional thinking.')}</p>
-			</CardBody>
-		</Card>
-	</Col>
-	<Col xl={8}>
-		<Row>
-			<Col md={4}>
-				<Card class="mini-stats-wid">
-					<CardBody>
+			</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>
@@ -157,17 +132,17 @@
 							<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 class="bx bx-copy-alt font-size-24"></i>
 									</span>
 								</div>
 							</div>
 						</div>
-					</CardBody>
-				</Card>
-			</Col>
-			<Col md={4}
-				><Card class="mini-stats-wid">
-					<CardBody>
+					</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>
@@ -176,17 +151,17 @@
 							<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 class="bx bx-archive-in font-size-24"></i>
 									</span>
 								</div>
 							</div>
 						</div>
-					</CardBody>
-				</Card></Col
-			>
-			<Col md={4}>
-				<Card class="mini-stats-wid">
-					<CardBody>
+					</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>
@@ -195,49 +170,49 @@
 							<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 class="bx bx-purchase-tag-alt font-size-24"></i>
 									</span>
 								</div>
 							</div>
 						</div>
-					</CardBody>
-				</Card>
-			</Col>
-		</Row>
-		<Card>
-			<CardBody>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-body">
 				<div class="d-sm-flex flex-wrap">
-					<CardTitle class="mb-4">{$_('Token Spent')}</CardTitle>
+					<h4 class="card-title mb-4">{$_('Token Spent')}</h4>
 					<div class="ms-auto">
-						<Nav pills>
-							<NavItem>
-								<Link href="#" class="nav-link">{$_('Week')}</Link>
-							</NavItem>
-							<NavItem>
-								<Link href="#" class="nav-link">{$_('Month')}</Link>
-							</NavItem>
-							<NavItem>
-								<Link href="#" class="nav-link" active>{$_('Year')}</Link>
-							</NavItem>
-						</Nav>
+						<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>
+							</li>
+						</ul>
 					</div>
 				</div>
 				<StackedColumnChart chartColor={['--bs-primary', '--bs-warning', '--bs-success']} />
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
+			</div>
+		</div>
+	</div>
+</div>
 
-<Row>
-	{#each dashboard_model?.conversation_list || [] as conv, index (conv.conversation_id)}
+<div class="row">
+	{#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}/>
 		{/if}
 	{/each}
-</Row>
+</div>
 
-<Row>
+<div class="row">
 	<SocialSource />
 	<Activity />
 	<TopSellingProduct />
-</Row>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/routes/page/dashboard/Activity.svelte b/src/routes/page/dashboard/Activity.svelte
index 61919862..5b79f52f 100644
--- a/src/routes/page/dashboard/Activity.svelte
+++ b/src/routes/page/dashboard/Activity.svelte
@@ -1,15 +1,13 @@
 <script>
-	import Link from 'svelte-link';
-	import { Card, CardBody, CardTitle, Col } from '@sveltestrap/sveltestrap';
-    import { _ } from 'svelte-i18n'
+    import { _ } from 'svelte-i18n';
 </script>
 
-<Col xl={4}>
-	<Card>
-        <CardBody>
-        <CardTitle class="mb-5">
+<div class="col-xl-4">
+	<div class="card">
+        <div class="card-body">
+        <h4 class="card-title mb-5">
             {$_('Activity')}
-        </CardTitle>
+        </h4>
 
         <ul class="verti-timeline list-unstyled">
             <li class="event-list">
@@ -37,7 +35,7 @@
                     </div>
                     <div class="flex-grow-1">
                         <div>
-                            {$_('Everyone realizes why a new common language would be desirable...')} <Link>{$_('Read more')}</Link>
+                            {$_('Everyone realizes why a new common language would be desirable...')} <a href={'#'}>{$_('Read more')}</a>
                         </div>
                     </div>
                 </div>
@@ -74,9 +72,9 @@
             </li>
         </ul>
         <div class="text-center mt-4">
-            <Link class="btn btn-primary waves-effect waves-light btn-sm">{$_('View More')} <i class="mdi mdi-arrow-right ms-1"></i></Link>
+            <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>
 
-    </CardBody>
-    </Card>
-</Col>
+    </div>
+    </div>
+</div>
diff --git a/src/routes/page/dashboard/Conversation.svelte b/src/routes/page/dashboard/Conversation.svelte
index 7360ec71..e0fee2a6 100644
--- a/src/routes/page/dashboard/Conversation.svelte
+++ b/src/routes/page/dashboard/Conversation.svelte
@@ -1,40 +1,38 @@
 <script>
-	import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
 	import { _ } from 'svelte-i18n';
 	import { onMount } from 'svelte';
 	import ChatTextArea from '../../chat/[agentId]/[conversationId]/chat-util/chat-text-area.svelte';
 	import { getConversation, updateDashboardConversation, unpinConversationFromDashboard } from '$lib/services/conversation-service';
 
-	/** @type {string}*/
-	export let conversationId;
-	/** @type {string}*/
-	export let instruction;
-	/** @type {string}*/
-	export let userId;
+	let {
+		conversationId = '',
+		instruction = '',
+		userId = ''
+	} = $props();
 
-	/** @type {import('$conversationTypes').ConversationModel}*/
-	let conversationModel;
+	/** @type {import('$conversationTypes').ConversationModel | undefined}*/
+	let conversationModel = $state(undefined);
 
-	let agent = {
+	let agent = $state({
 		name: "Loading",
 		icon_url: "https://botsharp.azurewebsites.net/images/users/bot.png"
-	};
-	
-	let isLoading = true;
+	});
+
+	let isLoading = $state(true);
 
 	/** @type {string} */
-	let hide = '';
-	
+	let hide = $state('');
+
 	/** @type {string} */
-	let text;
+	let text = $state('');
 	/** @type {boolean} */
-	let loadUtils;
-	
+	let loadUtils = $state(false);
+
 	/** @type {number} */
 	let messageInputTimeout = 0;
 
 	/** @type {string[]} */
-	let chatUtilOptions = [];
+	let chatUtilOptions = $state([]);
 
 	onMount(() => {
 			if (conversationId) {
@@ -60,7 +58,7 @@
 		)
 		.catch();
 	}
-	
+
 	/** @param {any} e */
     function handleMessageInput(e) {
         const value = e.target.value;
@@ -70,21 +68,21 @@
     }
 </script>
 
-<Col xl={4}>
-	<Card bind:class={hide}>
-		<CardBody>
+<div class="col-xl-4">
+	<div class={`card ${hide}`}>
+		<div class="card-body">
 			{#if isLoading}
-				<CardTitle class="mb-0">{"Loading..."} </CardTitle>
+				<h4 class="card-title mb-0">{"Loading..."} </h4>
 				<p> Loading ... </p>
-			{:else}
+			{:else if conversationModel}
 				<div class="row">
 					<div class="col-10">
-						<CardTitle class="mb-0">{conversationModel.title} </CardTitle>
+						<h4 class="card-title mb-0">{conversationModel.title} </h4>
 					</div>
-					<div class="col-2 ">
+					<div class="col-2">
 						<button
-							class={`btn btn-rounded btn-sm btn-light`}
-							on:click={() => {
+							class="btn btn-rounded btn-sm btn-light"
+							onclick={() => {
 								hide = 'hide';
 								unpinConversationFromDashboard(conversationModel.agent_id, conversationId);
 							}}
@@ -94,8 +92,7 @@
 								style="font-size: 12px;"
 								data-bs-toggle="tooltip"
 								data-bs-placement="top"
-								title="Unpin"
-							/>
+								title="Unpin"></i>
 						</button>
 					</div>
 				</div>
@@ -109,25 +106,25 @@
 										<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 class="chat-head-agent-name line-align-center ellipsis">{conversationModel.agent_id}</div>
 								</div>
 							</div>
 						</div>
 					</div>
 
-					<div class={`chat-input-section css-animation fade-in-from-none mb-2`}>
+					<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`}
+										className={'chat-input'}
 										maxLength={1024}
 										disabled={false}
 										bind:text={text}
 										bind:loadUtils={loadUtils}
 										bind:options={chatUtilOptions}
-										onFocus={e => chatUtilOptions = []}
+										onFocus={() => chatUtilOptions = []}
 									>
 									</ChatTextArea>
 								</div>
@@ -135,22 +132,22 @@
 							<div class="col-auto">
 								<button
 									type="submit"
-									class={`btn btn-rounded chat-send waves-effect waves-light btn-primary`}
-									disabled={!!!(text)}
-									on:click={() => updateDashboardConversation({
+									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 class="mdi mdi-send"></i>
 								</button>
 							</div>
 						</div>
 					</div>
 				</div>
 			{/if}
-		
-		</CardBody>
-	</Card>
-</Col>
+
+		</div>
+	</div>
+</div>
diff --git a/src/routes/page/dashboard/RadialBarChart.svelte b/src/routes/page/dashboard/RadialBarChart.svelte
index 62fcf40c..ad69adee 100644
--- a/src/routes/page/dashboard/RadialBarChart.svelte
+++ b/src/routes/page/dashboard/RadialBarChart.svelte
@@ -2,8 +2,10 @@
 	import { onMount } from 'svelte';
 	import { getChartColorsArray } from '$lib/common/shared/ChartColorsArray.svelte';
 	import ApexCharts from 'apexcharts';
-	export let chartColor;
 
+	let { chartColor = [] } = $props();
+
+	// svelte-ignore state_referenced_locally
 	const radialbarchartColors = getChartColorsArray(chartColor);
 
 	const options = {
@@ -58,4 +60,4 @@
 	});
 </script>
 
-<div id="radialbarchart" class="apex-charts" dir="ltr" />
+<div id="radialbarchart" class="apex-charts" dir="ltr"></div>
diff --git a/src/routes/page/dashboard/SocialSource.svelte b/src/routes/page/dashboard/SocialSource.svelte
index 041e9813..6e2b6b25 100644
--- a/src/routes/page/dashboard/SocialSource.svelte
+++ b/src/routes/page/dashboard/SocialSource.svelte
@@ -1,67 +1,65 @@
 <script>
-	import Link from 'svelte-link/src/Link.svelte';
-	import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
-	import { _ } from 'svelte-i18n'
+	import { _ } from 'svelte-i18n';
 </script>
 
-<Col xl={4}>
-	<Card>
-		<CardBody>
-			<CardTitle class="mb-4">{$_('Channel Stats')}</CardTitle>
+<div class="col-xl-4">
+	<div class="card">
+		<div class="card-body">
+			<h4 class="card-title mb-4">{$_('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 class="mdi mdi-facebook text-primary"></i>
 					</span>
 				</div>
-				<p class="font-16 text-muted mb-2" />
+				<p class="font-16 text-muted mb-2"></p>
 				<h5>
-					<Link class="text-dark"
+					<a href={'#'} class="text-dark"
 						>Facebook - <span class="text-muted font-16">125 Conversations</span>
-					</Link>
+					</a>
 				</h5>
 				<p class="text-muted">
 					{$_('Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus tincidunt.')}
 				</p>
-				<Link class="text-primary font-16">
-					{$_('Learn more')} <i class="mdi mdi-chevron-right" />
-				</Link>
+				<a href={'#'} class="text-primary font-16">
+					{$_('Learn more')} <i class="mdi mdi-chevron-right"></i>
+				</a>
 			</div>
-			<Row class="mt-4">
-				<Col xs={4}>
+			<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 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>
-				</Col>
-				<Col xs={4}>
+				</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 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>
-				</Col>
-				<Col xs={4}>
+				</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 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>
-				</Col>
-			</Row>
-		</CardBody>
-	</Card>
-</Col>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/page/dashboard/StackedColumnChart.svelte b/src/routes/page/dashboard/StackedColumnChart.svelte
index b36206c7..6f6387b5 100644
--- a/src/routes/page/dashboard/StackedColumnChart.svelte
+++ b/src/routes/page/dashboard/StackedColumnChart.svelte
@@ -2,8 +2,10 @@
 	import { onMount } from 'svelte';
 	import { getChartColorsArray } from '$lib/common/shared/ChartColorsArray.svelte';
     import ApexCharts from 'apexcharts';
-	export let chartColor;
 
+	let { chartColor = [] } = $props();
+
+	// svelte-ignore state_referenced_locally
 	const stackedColumnchartColors = getChartColorsArray(chartColor);
 
 	const options = {
@@ -59,4 +61,4 @@
 	});
 </script>
 
-<div id="stackedColumnchart" class="apex-charts" dir="ltr" />
+<div id="stackedColumnchart" class="apex-charts" dir="ltr"></div>
diff --git a/src/routes/page/dashboard/TopSellingProduct.svelte b/src/routes/page/dashboard/TopSellingProduct.svelte
index 925a52e2..ff8a03dc 100644
--- a/src/routes/page/dashboard/TopSellingProduct.svelte
+++ b/src/routes/page/dashboard/TopSellingProduct.svelte
@@ -1,21 +1,20 @@
 <script>
-	import { Card, CardBody, CardTitle, Col, Progress, Table } from '@sveltestrap/sveltestrap';
-	import { _ } from 'svelte-i18n'
+	import { _ } from 'svelte-i18n';
 </script>
 
-<Col xl={4}>
-	<Card>
-		<CardBody>
-			<CardTitle class="mb-4">{$_('Top Client Usage')}</CardTitle>
+<div class="col-xl-4">
+	<div class="card">
+		<div class="card-body">
+			<h4 class="card-title mb-4">{$_('Top Client Usage')}</h4>
 			<div class="text-center">
 				<div class="mb-4">
-					<i class="bx bx-map-pin text-primary display-4" />
+					<i class="bx bx-map-pin text-primary display-4"></i>
 				</div>
 				<h3>1,456</h3>
 				<p>San Francisco</p>
 			</div>
 			<div class="table-responsive mt-4">
-				<Table class="align-middle table-nowrap">
+				<table class="table align-middle table-nowrap">
 					<tbody>
 						<tr>
 							<td style="width: 30%">
@@ -23,7 +22,9 @@
 							</td>
 							<td style="width: 25%"> <h5 class="mb-0">1,456</h5></td>
 							<td>
-								<Progress color="primary" value={94} max={100} class="progress-sm" />
+								<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>
@@ -34,7 +35,9 @@
 								<h5 class="mb-0">1,123</h5>
 							</td>
 							<td>
-								<Progress color="success" value={82} max={100} class="progress-sm" />
+								<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>
@@ -45,12 +48,14 @@
 								<h5 class="mb-0">1,026</h5>
 							</td>
 							<td>
-								<Progress color="warning" value={70} max={100} class="progress-sm" />
+								<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>
 					</tbody>
-				</Table>
+				</table>
 			</div>
-		</CardBody>
-	</Card>
-</Col>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-agent.svelte b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
index a27923ad..a31d31ff 100644
--- a/src/routes/page/instruction/instruction-components/instruction-agent.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
@@ -1,44 +1,38 @@
 <script>
-    import { createEventDispatcher, onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
     import Select from '$lib/common/dropdowns/Select.svelte';
 
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {import('$agentTypes').AgentModel[]} */
-    export let agents = [];
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   agents?: import('$agentTypes').AgentModel[],
+     *   disabled?: boolean,
+     *   onSelectAgent?: (detail: { agent: import('$agentTypes').AgentModel | null, template: any }) => void
+     * }}
+     */
+    let {
+        agents = [],
+        disabled = false,
+        onSelectAgent
+    } = $props();
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-    let agentOptions = [];
+    let agentOptions = $state([]);
     /** @type {any[]} */
-    let templateOptions = [];
+    let templateOptions = $state([]);
 
     /** @type {import('$agentTypes').AgentModel | null | undefined} */
-    let selectedAgent = null;
+    let selectedAgent = $state(null);
     /** @type {any} */
-    let selectedTemplate = null;
+    let selectedTemplate = $state(null);
 
-    $: {
-        initAgentOptions(agents);
-    }
-
-    /**
-	 * @param {import('$agentTypes').AgentModel[]} agents
-	 */
-    function initAgentOptions(agents) {
-        agentOptions = [];
-        templateOptions = [];
-        selectedAgent = null;
-        selectedTemplate = null;
-        
+    $effect(() => {
         agentOptions = agents?.map(x => ({
             label: x.name,
             value: x.id
         }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
-    }
+        templateOptions = [];
+        selectedAgent = null;
+        selectedTemplate = null;
+    });
 
     /** @param {any} e */
     function selectAgent(e) {
@@ -54,7 +48,7 @@
             content: x.content
         })) || [];
 
-        dispatchEvent();
+        fireSelectAgent();
     }
 
     /** @param {any} e */
@@ -62,11 +56,11 @@
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedTemplate = selectedValues.length > 0 ? templateOptions.find(x => x.value === selectedValues[0]) : null;
-        dispatchEvent();
+        fireSelectAgent();
     }
 
-    function dispatchEvent() {
-        svelteDispatch('selectAgent', {
+    function fireSelectAgent() {
+        onSelectAgent?.({
             agent: selectedAgent || null,
             template: selectedTemplate || null
         });
@@ -85,7 +79,7 @@
                 disabled={disabled}
                 selectedValues={selectedAgent?.id ? [selectedAgent.id] : []}
                 options={agentOptions}
-                on:select={e => selectAgent(e)}
+                onselect={e => selectAgent(e)}
             />
         </div>
     </div>
@@ -100,7 +94,7 @@
                 disabled={disabled}
                 selectedValues={selectedTemplate?.id ? [selectedTemplate.id] : []}
                 options={templateOptions}
-                on:select={e => selectTemplate(e)}
+                onselect={e => selectTemplate(e)}
             />
         </div>
     </div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-coding.svelte b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
index 39f47251..a26ead95 100644
--- a/src/routes/page/instruction/instruction-components/instruction-coding.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
@@ -1,31 +1,32 @@
 <script>
-    import { Button, Input } from '@sveltestrap/sveltestrap';
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 
     const maxLength = 4096;
     const limit = 10;
 
-    /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
-    export let selectedCodeScript = null;
-
-    /** @type {import('$commonTypes').KeyValuePair[]} */
-    export let args = [];
-
-    /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
-    export let codeScripts = [];
-
-    /** @type {boolean} */
-    export let disabled = false;
-
+    /**
+     * @type {{
+     *   selectedCodeScript?: import('$agentTypes').AgentCodeScriptViewModel | null | undefined,
+     *   args?: import('$commonTypes').KeyValuePair[],
+     *   codeScripts?: import('$agentTypes').AgentCodeScriptViewModel[],
+     *   disabled?: boolean
+     * }}
+     */
+    let {
+        selectedCodeScript = $bindable(null),
+        args = $bindable([]),
+        codeScripts = [],
+        disabled = false
+    } = $props();
 
     /** @type {HTMLElement} */
     let scrollContainer;
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-    let codeScriptOptions = [];
+    let codeScriptOptions = $state([]);
 
-    $: {
+    $effect(() => {
         codeScriptOptions = codeScripts?.map(x => ({
             label: x.name,
             value: x.name
@@ -33,13 +34,13 @@
 
         const found = codeScripts.find(x => x.name === selectedCodeScript?.name);
         selectedCodeScript = found || null;
-    }
+    });
 
     /** @param {any} e */
     function selectCodeScript(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
-        selectedCodeScript = selectedValues.length > 0 ? codeScripts?.find(x => x.name === selectedValues[0]) : null;
+        selectedCodeScript = selectedValues.length > 0 ? codeScripts?.find(x => x.name === selectedValues[0]) || null : null;
     }
 
     function addArg() {
@@ -66,7 +67,7 @@
                 disabled={disabled}
                 selectedValues={selectedCodeScript?.name ? [selectedCodeScript.name] : []}
                 options={codeScriptOptions}
-                on:select={e => selectCodeScript(e)}
+                onselect={e => selectCodeScript(e)}
             />
         </div>
     </div>
@@ -78,8 +79,9 @@
                 {#each args as arg, idx}
                     <div class="instruct-kv-item" style="gap: 10px;">
                         <div style="flex: 0.5;">
-                            <Input
+                            <input
                                 type="text"
+                                class="form-control"
                                 name={`arg-key-${idx}`}
                                 bind:value={arg.key}
                                 maxlength={maxLength}
@@ -88,8 +90,9 @@
                             />
                         </div>
                         <div style="flex: 0.5;">
-                            <Input
+                            <input
                                 type="text"
+                                class="form-control"
                                 name={`arg-value-${idx}`}
                                 bind:value={arg.value}
                                 maxlength={maxLength}
@@ -99,12 +102,13 @@
                         </div>
                         <div class="line-align-center" style={`flex: 0 0 13px; margin-top: 3px;`}>
                             <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"
-                                    on:click={() => removeArg(idx)}
-                                />
+                                    role="button"
+                                    tabindex="0"
+                                    onclick={() => removeArg(idx)}
+                                    onkeydown={(/** @type {KeyboardEvent} */ e) => { if (e.key === 'Enter') removeArg(idx); }}
+                                ></i>
                             </div>
                         </div>
                     </div>
@@ -112,14 +116,15 @@
             </div>
             {#if args.length < limit}
                 <div class="text-center">
-                    <Button 
-                        color="link"
+                    <button
+                        type="button"
+                        class="btn btn-link"
                         style="padding-left: 0px;"
                         disabled={disabled}
-                        on:click={() => addArg()}
+                        onclick={() => addArg()}
                     >
                         Add +
-                    </Button>
+                    </button>
                 </div>
             {/if}
         </div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index e7f3ff8e..94b2480c 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -1,59 +1,46 @@
 <script>
-    import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
     import Select from '$lib/common/dropdowns/Select.svelte';
 
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {import('$commonTypes').LlmConfig[]} */
-    export let llmConfigs = [];
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {import('$commonTypes').LlmConfig | null | undefined} */
-    export let selectedProvider = null;
-
-    /** @type {string?} */
-    export let selectedModel = null;
+    /**
+     * @type {{
+     *   llmConfigs?: import('$commonTypes').LlmConfig[],
+     *   disabled?: boolean,
+     *   selectedProvider?: import('$commonTypes').LlmConfig | null | undefined,
+     *   selectedModel?: string | null,
+     *   onSelectLlm?: (detail: { provider: import('$commonTypes').LlmConfig | null, model: string | null }) => void
+     * }}
+     */
+    let {
+        llmConfigs = [],
+        disabled = false,
+        selectedProvider = $bindable(null),
+        selectedModel = $bindable(null),
+        onSelectLlm
+    } = $props();
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-    let providerOptions = [];
-    /** @type {any[]} */
-    let modelOptions = [];
-
-    afterUpdate(() => {
-        if (selectedProvider) {
-            onProviderChanged(selectedModel);
-        } else {
-            selectedModel = null;
-        }
-    });
-
-    $: {
-        initLlmOptions(llmConfigs);
-    }
-
-    /** @param {import('$commonTypes').LlmConfig[]} llmConfigs */
-    function initLlmOptions(llmConfigs) {
-        selectedProvider = null;
-        selectedModel = null;
-        providerOptions = [];
-        modelOptions = [];
-
-        providerOptions = llmConfigs?.map(x => ({
+    let providerOptions = $derived(
+        llmConfigs?.map(x => ({
             label: x.provider,
             value: x.provider
-        }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
-    }
+        }))?.sort((a, b) => a.label.localeCompare(b.label)) || []
+    );
+
+    /** @type {any[]} */
+    let modelOptions = $derived(
+        selectedProvider?.models?.map(x => ({
+            label: x.name,
+            value: x.name
+        }))?.sort((a, b) => a.label.localeCompare(b.label)) || []
+    );
 
     /** @param {any} e */
     function selectProvider(e) {
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
-        selectedProvider = selectedValues.length > 0 ? llmConfigs?.find(x => x.provider === selectedValues[0]) : null;
-        onProviderChanged();
-        dispatchEvent();
+        selectedProvider = selectedValues.length > 0 ? llmConfigs?.find(x => x.provider === selectedValues[0]) || null : null;
+        selectedModel = null;
+        fireSelectLlm();
     }
 
     /** @param {any} e */
@@ -61,23 +48,11 @@
         // @ts-ignore
 		const selectedValues = e.detail.selecteds?.map(x => x.value) || [];
         selectedModel = selectedValues.length > 0 ? modelOptions.find(x => x.value === selectedValues[0])?.value : null;
-        dispatchEvent();
-    }
-
-    /** @param {string?} targetModel */
-    function onProviderChanged(targetModel = null) {
-        modelOptions = selectedProvider?.models?.map(x => ({
-            label: x.name,
-            value: x.name
-        }))?.sort((a, b) => a.label.localeCompare(b.label)) || [];
-
-        if (!!targetModel) {
-            selectedModel = modelOptions.find(x => x.value === targetModel)?.value || null;
-        }
+        fireSelectLlm();
     }
 
-    function dispatchEvent() {
-        svelteDispatch('selectLlm', {
+    function fireSelectLlm() {
+        onSelectLlm?.({
             provider: selectedProvider || null,
             model: selectedModel
         });
@@ -96,7 +71,7 @@
                 disabled={disabled}
                 selectedValues={selectedProvider?.provider ? [selectedProvider.provider] : []}
                 options={providerOptions}
-                on:select={e => selectProvider(e)}
+                onselect={e => selectProvider(e)}
             />
         </div>
     </div>
@@ -111,7 +86,7 @@
                 disabled={disabled}
                 selectedValues={selectedModel ? [selectedModel] : []}
                 options={modelOptions}
-                on:select={e => selectModel(e)}
+                onselect={e => selectModel(e)}
             />
         </div>
     </div>
diff --git a/src/routes/page/instruction/instruction-components/instruction-state.svelte b/src/routes/page/instruction/instruction-components/instruction-state.svelte
index 1d74f1b6..e0caef81 100644
--- a/src/routes/page/instruction/instruction-components/instruction-state.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-state.svelte
@@ -1,15 +1,19 @@
 <script>
-    import { Button, Input } from '@sveltestrap/sveltestrap';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 
     const maxLength = 4096;
     const limit = 10;
 
-    /** @type {import('$commonTypes').KeyValuePair[]} */
-    export let states = [];
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   states?: import('$commonTypes').KeyValuePair[],
+     *   disabled?: boolean
+     * }}
+     */
+    let {
+        states = $bindable([]),
+        disabled = false
+    } = $props();
 
     /** @type {HTMLElement} */
     let scrollContainer;
@@ -35,14 +39,15 @@
     <div class="instruct-kv-container" bind:this={scrollContainer}>
         {#each states as state, idx}
             <div class="instruct-kv-item">
-                <div style="flex: 0.4;">
+                <div style="flex: 0.45;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Key'}
                     </div>
                     {/if}
-                    <Input
+                    <input
                         type="text"
+                        class="form-control"
                         name={`state-key-${idx}`}
                         bind:value={state.key}
                         maxlength={maxLength}
@@ -50,14 +55,15 @@
                         placeholder="Enter a name"
                     />
                 </div>
-                <div style="flex: 0.4;">
+                <div style="flex: 0.45;">
                     {#if idx === 0}
                     <div class="text-primary mb-1">
                         {'Value'}
                     </div>
                     {/if}
-                    <Input
+                    <input
                         type="text"
+                        class="form-control"
                         name={`state-value-${idx}`}
                         bind:value={state.value}
                         maxlength={maxLength}
@@ -67,12 +73,13 @@
                 </div>
                 <div class="line-align-center" style={`flex: 0 0 13px; margin-top: ${idx === 0 ? '23px' : '3px'}`}>
                     <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"
-                            on:click={() => removeState(idx)}
-                        />
+                            role="button"
+                            tabindex="0"
+                            onclick={() => removeState(idx)}
+                            onkeydown={(/** @type {KeyboardEvent} */ e) => { if (e.key === 'Enter') removeState(idx); }}
+                        ></i>
                     </div>
                 </div>
             </div>
@@ -80,14 +87,15 @@
     </div>
     {#if states.length < limit}
         <div class="text-center">
-            <Button 
-                color="link"
+            <button
+                type="button"
+                class="btn btn-link"
                 style="padding-left: 0px;"
                 disabled={disabled}
-                on:click={() => addState()}
+                onclick={() => addState()}
             >
                 Add +
-            </Button>
+            </button>
         </div>
     {/if}
-</div>`
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index fe8217b0..68507358 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -3,7 +3,6 @@
 	import { page } from '$app/stores';
 	import { _ } from 'svelte-i18n';
     import util from "lodash";
-	import { Button, Card, CardBody, Col, Input, Row, Table } from '@sveltestrap/sveltestrap';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import TablePagination from '$lib/common/shared/TablePagination.svelte';
@@ -146,7 +145,7 @@
     function getPagedInstructionLogs() {
         logItems = [];
         isLoading = true;
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             getInstructionLogs(filter).then(res => {
                 refresh(res);
                 resolve(res);
@@ -293,45 +292,46 @@
 
 <LoadingToComplete isLoading={isLoading} />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody class="border-bottom">
+<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
-							color={showStateSearch ? 'secondary' : 'primary'}
-							on:click={() => showStateSearch = !showStateSearch}
+						<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 class="bx bx-hide"></i>
 									{:else}
-										<i class="bx bx-search-alt" />
+										<i class="bx bx-search-alt"></i>
 									{/if}
 								</div>
 								<div class="search-btn-text">{'State Search'}</div>
 							</div>
-						</Button>
+						</button>
 					</div>
 				</div>
-			</CardBody>
+			</div>
 			{#if showStateSearch}
-				<CardBody class="border-bottom">
-					<Row class="g-3 justify-content-end">
-						<Col lg="6">
+				<div class="card-body border-bottom">
+					<div class="row g-3 justify-content-end">
+						<div class="col-lg-6">
 							<StateSearch bind:states={states} onSearch={(query) => handleStateSearch(query)} />
-						</Col>
-					</Row>
-				</CardBody>
+						</div>
+					</div>
+				</div>
 			{/if}
-			<CardBody class="border-bottom">
-				<Row class="g-3">
-					<Col lg="3">
+			<div class="card-body border-bottom">
+				<div class="row g-3">
+					<div class="col-lg-3">
 						<Select
 							tag={'agent-select'}
 							placeholder={'Select agents'}
@@ -340,20 +340,20 @@
 							searchMode
 							selectedValues={searchOption.agentIds}
 							options={agentOptions}
-							on:select={e => changeOption(e, 'agent')}
+							onselect={e => changeOption(e, 'agent')}
 						/>
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
 						<Select
 							tag={'llm-provider-select'}
 							placeholder={'Select LLM provider'}
 							searchMode
 							selectedValues={searchOption.providers}
 							options={providerOptions}
-							on:select={e => changeOption(e, 'provider')}
+							onselect={e => changeOption(e, 'provider')}
 						/>
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
 						<Select
 							tag={'llm-model-select'}
 							placeholder={'Select LLM model'}
@@ -362,42 +362,47 @@
 							searchMode
 							selectedValues={searchOption.models}
 							options={modelOptions}
-							on:select={e => changeOption(e, 'model')}
+							onselect={e => changeOption(e, 'model')}
 						/>
-					</Col>
-					<Col lg="2">
-						<Input bind:value={searchOption.template} maxlength={100} placeholder={'Search template...'} />
-					</Col>
-					<Col lg="2">
+					</div>
+					<div class="col-lg-2">
+						<input
+							type="text"
+							class="form-control"
+							bind:value={searchOption.template}
+							maxlength={100}
+							placeholder={'Search template...'}
+						/>
+					</div>
+					<div class="col-lg-2">
 						<TimeRangePicker
 							storageKey="botsharp_instruction_recent_time_ranges"
 							bind:timeRange={searchOption.timeRange}
 							bind:startDate={searchOption.startDate}
 							bind:endDate={searchOption.endDate}
-							on:change={(e) => {
+							onchange={(data) => {
 								// Only update searchOption, don't trigger query immediately
-								searchOption.timeRange = e.detail.timeRange;
-								searchOption.startDate = e.detail.startDate;
-								searchOption.endDate = e.detail.endDate;
+								searchOption.timeRange = data.timeRange;
+								searchOption.startDate = data.startDate;
+								searchOption.endDate = data.endDate;
 							}}
 						/>
-					</Col>
-					<Col lg="1">
-						<Button
+					</div>
+					<div class="col-lg-1">
+						<button
 							type="button"
-							color="secondary"
-							class="btn-soft-secondary w-100"
-							on:click={(e) => search()}
+							class="btn btn-secondary btn-soft-secondary w-100"
+							onclick={() => search()}
 						>
-							<i class="mdi mdi-filter-outline align-middle" />
+							<i class="mdi mdi-filter-outline align-middle"></i>
 							<span class="d-none">{$_('Filter')}</span>
-						</Button>
-					</Col>
-				</Row>
-			</CardBody>
-			<CardBody>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="card-body">
 				<div class="table-responsive thin-scrollbar">
-					<Table class="align-middle nowrap users-table" bordered>
+					<table class="table table-bordered align-middle nowrap users-table">
 						<thead>
 							<tr>
 								<th scope="col" class="instruction-log-col ellipsis">{$_('Agent')}</th>
@@ -405,19 +410,19 @@
 								<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" class="instruction-log-col ellipsis">{$_('Created Time')}</th>
 								<th scope="col">{$_('')}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#each logItems as item, idx (idx)}
-                                <LogItem item={item} />
-                            {/each}
+								<LogItem {item} />
+							{/each}
 						</tbody>
-					</Table>
+					</table>
 				</div>
 				<TablePagination pagination={pager} pageTo={(pn) => pageTo(pn)} />
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
\ No newline at end of file
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/instruction/log/log-item.svelte b/src/routes/page/instruction/log/log-item.svelte
index 855c6895..407b8903 100644
--- a/src/routes/page/instruction/log/log-item.svelte
+++ b/src/routes/page/instruction/log/log-item.svelte
@@ -1,16 +1,19 @@
 <script>
     import { fly } from 'svelte/transition';
-    import { Button } from '@sveltestrap/sveltestrap';
-    import JSONTree from 'svelte-json-tree';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import { utcToLocal } from '$lib/helpers/datetime';
+    import JSONTree from 'svelte-json-tree';
     import { formatObject } from '$lib/helpers/utils/common';
 
-    /** @type {import('$instructTypes').InstructionLogModel} */
-    export let item;
+    /**
+     * @type {{
+     *   item: import('$instructTypes').InstructionLogModel
+     * }}
+     */
+    let { item } = $props();
 
     /** @type {boolean} */
-    let open = false;
+    let open = $state(false);
 
     function toggleLogDetail() {
         open = !open;
@@ -27,12 +30,14 @@
     <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
+                <button
+                    type="button"
                     class="btn btn-sm btn-soft-warning"
-                    on:click={() => toggleLogDetail()}
+                    aria-label="Toggle log detail"
+                    onclick={() => toggleLogDetail()}
                 >
-                    <i class="mdi mdi-eye-outline" />
-                </Button>
+                    <i class="mdi mdi-eye-outline"></i>
+                </button>
             </li>
         </ul>
     </td>
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index d84951be..81bef416 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -3,7 +3,6 @@
     import { fly } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
-	import { Button, Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
 	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
@@ -15,6 +14,7 @@
 	import { AgentCodeScriptType, LlmModelType } from '$lib/helpers/enums';
 	import NavBar from '$lib/common/nav-bar/NavBar.svelte';
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import InstructionAgent from '../instruction-components/instruction-agent.svelte';
 	import InstructionLlm from '../instruction-components/instruction-llm.svelte';
     import InstructionState from '../instruction-components/instruction-state.svelte';
@@ -30,49 +30,49 @@
         { name: 'instruction-coding', displayText: 'Coding' }
     ];
 
-    let isLoading = false;
-    let isError = false;
-    let isThinking = false;
-    let requestDone = false;
-    
-    let text = '';
-    let instruction = '';
-    let result = '';
-    let elapsedTime = '';
-    let errorText = 'Please select an agent to proceed!';
+    let isLoading = $state(false);
+    let isError = $state(false);
+    let isThinking = $state(false);
+    let requestDone = $state(false);
+
+    let text = $state('');
+    let instruction = $state('');
+    let result = $state('');
+    let elapsedTime = $state('');
+    let errorText = $state('Please select an agent to proceed!');
 
     /** @type {import('$agentTypes').AgentModel | null} */
-    let selectedAgent = null;
+    let selectedAgent = $state(null);
 
-    /** @type {import('$commonTypes').LlmConfig?} */
-    let selectedProvider = null;
+    /** @type {import('$commonTypes').LlmConfig | null} */
+    let selectedProvider = $state(null);
 
     /** @type {string | null} */
-    let selectedModel = null;
+    let selectedModel = $state(null);
 
     /** @type {string | null} */
-    let selectedTemplate = null;
+    let selectedTemplate = $state(null);
 
     /** @type {import('$agentTypes').AgentCodeScriptViewModel | null | undefined} */
-    let selectedCodeScript = null;
-    
+    let selectedCodeScript = $state(null);
+
     /** @type {import('$agentTypes').AgentModel[]} */
-    let agents = [];
+    let agents = $state([]);
 
     /** @type {import('$commonTypes').LlmConfig[]} */
-    let llmConfigs = [];
+    let llmConfigs = $state([]);
 
     /** @type {import('$agentTypes').AgentCodeScriptViewModel[]} */
-    let codeScripts = [];
+    let codeScripts = $state([]);
 
     /** @type {import('$commonTypes').KeyValuePair[]} */
-    let states = [{ key: '', value: ''}];
+    let states = $state([{ key: '', value: ''}]);
 
     /** @type {import('$commonTypes').KeyValuePair[]} */
-    let args = [{ key: '', value: ''}];
+    let args = $state([{ key: '', value: ''}]);
 
     /** @type {string}*/
-    let selectedTab = tabs[0].name;
+    let selectedTab = $state(tabs[0].name);
 
     onMount(async () => {
         try {
@@ -138,7 +138,7 @@
 
     /** @param {KeyboardEvent} e */
 	function pressKey(e) {
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isLoading) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !util.trim(text) || isLoading) {
 			return;
 		}
 
@@ -155,18 +155,14 @@
         elapsedTime = ''
     }
 
-    function resetInstruction() {
-        instruction = '';
-    }
-
-    /** @param {any} e */
-    function onAgentSelected(e) {
-        selectedAgent = e.detail.agent || null;
+    /** @param {{ agent: import('$agentTypes').AgentModel | null, template: any }} detail */
+    function onAgentSelected(detail) {
+        selectedAgent = detail.agent || null;
         let localText = selectedAgent?.instruction;
 
-        const template = e.detail.template || null;
+        const template = detail.template || null;
         selectedTemplate = template?.name || null;
-        if (!!template) {
+        if (template) {
             localText = template?.content;
         }
 
@@ -176,17 +172,17 @@
         selectedProvider = llmConfigs?.find(x => x.provider === providerName) || null;
         selectedModel = modelName;
 
-        if (!!selectedAgent?.id) {
+        if (selectedAgent?.id) {
             initAgentCodeScripts(selectedAgent.id);
         } else {
             codeScripts = [];
         }
     }
-    
-    /** @param {any} e */
-    function onLlmSelected(e) {
-        selectedProvider = e.detail.provider || null;
-        selectedModel = e.detail.model || '';
+
+    /** @param {{ provider: import('$commonTypes').LlmConfig | null, model: string | null }} detail */
+    function onLlmSelected(detail) {
+        selectedProvider = detail.provider || null;
+        selectedModel = detail.model || '';
     }
 
     /** @param {string} agentId */
@@ -207,8 +203,8 @@
     }
 </script>
 
-<HeadTitle title="{$_('Instruction')}" />
-<Breadcrumb pagetitle="{$_('Testing')}" title="{$_('Instruction')}"/>
+<HeadTitle title={$_('Instruction')} />
+<Breadcrumb pagetitle={$_('Testing')} title={$_('Instruction')}/>
 
 <LoadingToComplete
     isLoading={isLoading}
@@ -226,8 +222,8 @@
                 disabled={isThinking}
                 placeholder={'Enter input message...'}
                 bind:value={text}
-                on:keydown={(e) => pressKey(e)}
-            />
+                onkeydown={(e) => pressKey(e)}
+            ></textarea>
             <div class="text-secondary text-count d-flex justify-content-between">
                 <div>
                     {#if elapsedTime}
@@ -236,17 +232,18 @@
                 </div>
                 <div>{text?.length || 0}/{maxLength}</div>
             </div>
-        
+
             <div class="mt-2 text-end">
-                <Button
-                    color="primary"
+                <button
+                    type="button"
+                    class="btn btn-primary"
                     disabled={!text || util.trim(text).length === 0 || isThinking}
-                    on:click={() => sendRequest()}
+                    onclick={() => sendRequest()}
                 >
                     {'Send'}
-                </Button>
+                </button>
             </div>
-        
+
             {#if isThinking}
                 <div class="knowledge-loader mt-4">
                     <LoadingDots duration={'1s'} size={12} gap={5} color={'var(--bs-primary)'} />
@@ -259,12 +256,13 @@
                     <div class="instruct-header text-primary fw-bold">
                         <div>{'Response'}</div>
                         <div>
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
                             <i
                                 class="mdi mdi-close-thick text-danger clickable"
-                                on:click={() => closeResponse()}
-                            />
+                                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">
@@ -282,35 +280,26 @@
 
 <div class="d-xl-flex mt-4 mb-5">
     <div class="w-100">
-        <Row>
-            <Col lg="7">
+        <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>
                     <div class="line-align-center">
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <!-- svelte-ignore a11y-no-static-element-interactions -->
-                        <!-- <i
-                            class="mdi mdi-refresh text-primary clickable"
-                            data-bs-toggle="tooltip"
-                            data-bs-placement="bottom"
-                            title={'Reset'}
-                            on:click={e => resetInstruction()}
-                        /> -->
                         <div class="demo-tooltip-icon line-align-center" id="demo-tooltip">
-                            <i class="bx bx-info-circle" />
+                            <i class="bx bx-info-circle"></i>
                         </div>
-                        <Tooltip target="demo-tooltip" placement="right" class="demo-tooltip-note">
+                        <BotsharpTooltip target="demo-tooltip" placement="right" containerClasses="demo-tooltip-note">
                             <div>Please select an agent to proceed!</div>
-                        </Tooltip>
+                        </BotsharpTooltip>
                     </div>
                 </div>
-            </Col>
-            <Col lg="5"></Col>
-        </Row>
-        <Row class="instruct-setting-container">
-            <Col lg="7">
+            </div>
+            <div class="col-lg-5"></div>
+        </div>
+        <div class="row instruct-setting-container">
+            <div class="col-lg-7">
                 <div>
                     <div class="instruct-setting-section" style="gap: 2px;">
                         <textarea
@@ -320,22 +309,19 @@
                             disabled
                             placeholder={''}
                             bind:value={instruction}
-                        />
-                        <!-- <div class="text-secondary text-end text-count">
-                            <div>{instruction?.length || 0}/{maxLength}</div>
-                        </div> -->
+                        ></textarea>
                     </div>
                 </div>
-            </Col>
-            <Col lg="5" class="instruction-gap">
-                <Card>
-                    <CardBody>
+            </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, idx}
+                            {#each tabs as tab}
                             <NavItem
                                 containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 3 ? tabs.length : 4})`}
                                 navBtnStyles={'text-transform: none;'}
@@ -348,21 +334,21 @@
                             />
                             {/each}
                         </NavBar>
-                        
+
                         <div class:hide={selectedTab !== 'instruction-agent'}>
                             <InstructionAgent
                                 agents={agents}
                                 disabled={isThinking}
-                                on:selectAgent={e => onAgentSelected(e)}
+                                onSelectAgent={detail => onAgentSelected(detail)}
                             />
                         </div>
                         <div class:hide={selectedTab !== 'instruction-llm'}>
                             <InstructionLlm
                                 llmConfigs={llmConfigs}
                                 disabled={isThinking}
-                                selectedProvider={selectedProvider}
-                                selectedModel={selectedModel}
-                                on:selectLlm={e => onLlmSelected(e)}
+                                bind:selectedProvider={selectedProvider}
+                                bind:selectedModel={selectedModel}
+                                onSelectLlm={detail => onLlmSelected(detail)}
                             />
                         </div>
                         <div class:hide={selectedTab !== 'instruction-states'}>
@@ -379,10 +365,9 @@
                                 disabled={isThinking}
                             />
                         </div>
-                    </CardBody>
-                </Card>
-                
-            </Col>
-        </Row>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/routes/page/knowledge-base/FileLeftBar.svelte b/src/routes/page/knowledge-base/FileLeftBar.svelte
deleted file mode 100644
index 89e5742b..00000000
--- a/src/routes/page/knowledge-base/FileLeftBar.svelte
+++ /dev/null
@@ -1,116 +0,0 @@
-<script>
-  import Link from "svelte-link";
-  import {
-    Card,
-    CardBody,
-    Collapse,
-    DropdownMenu,
-    DropdownToggle,
-    Alert,
-    Dropdown,
-    Button,
-  } from "@sveltestrap/sveltestrap";
-  import { _ } from 'svelte-i18n';
-
-  let isOpen = true;
-
-  const handleOnClick = () => {
-    isOpen = !isOpen;
-  };
-</script>
-
-<Card class="filemanager-sidebar me-md-2">
-  <CardBody>
-    <div class="d-flex flex-column h-100">
-      <div class="mb-4">
-        <ul class="list-unstyled categories-list">
-          <li>
-            <div class="custom-accordion">
-              <Link
-                style="cursor:pointer"
-                class="text-body fw-medium py-1 d-flex align-items-center"
-                on:click={handleOnClick}
-                id="toggler"
-              >
-                <i class="mdi mdi-folder font-size-16 text-warning me-2" />{" "}
-                {$_('Files')}{" "}
-                <i
-                  class={isOpen
-                    ? "mdi mdi-chevron-up accor-down-icon ms-auto"
-                    : "mdi mdi-chevron-down accor-down-icon ms-auto"}
-                />
-              </Link>
-              <Collapse {isOpen} toggler="#toggler">
-                <div class="card border-0 shadow-none ps-2 mb-0">
-                  <ul class="list-unstyled mb-0">
-                    <li>
-                      <Link href="#" class="d-flex align-items-center">
-                        <span class="me-auto">{$_('Design')}</span>
-                      </Link>
-                    </li>
-                  </ul>
-                </div>
-              </Collapse>
-            </div>
-          </li>
-          <li>
-            <Link href="#" class="text-body d-flex align-items-center">
-              <i
-                class="mdi mdi-google-drive font-size-16 text-muted me-2"
-              />{" "}
-              <span class="me-auto">{$_('Google Drive')}</span>
-            </Link>
-          </li>
-          <li>
-            <Link href="#" class="text-body d-flex align-items-center">
-              <i class="mdi mdi-dropbox font-size-16 me-2 text-primary" />{" "}
-              <span class="me-auto">{$_('Dropbox')}</span>
-            </Link>
-          </li>
-          <li>
-            <Link href="#" class="text-body d-flex align-items-center">
-              <i
-                class="mdi mdi-star-outline text-muted font-size-16 me-2"
-              />{" "}
-              <span class="me-auto">{$_('Starred')}</span>
-            </Link>
-          </li>
-          <li>
-            <Link href="#" class="text-body d-flex align-items-center">
-              <i class="mdi mdi-trash-can text-danger font-size-16 me-2" />{" "}
-              <span class="me-auto">{$_('Trash')}</span>
-            </Link>
-          </li>
-          <li>
-            <Link href="#" class="text-body d-flex align-items-center">
-              <i class="mdi mdi-cog text-muted font-size-16 me-2" />{" "}
-              <span class="me-auto">{$_('Setting')}</span>
-              <span class="badge bg-success rounded-pill ms-2"> 01 </span>
-            </Link>
-          </li>
-        </ul>
-      </div>
-
-      <div class="mt-auto">
-        <Alert color="success" dismissible class="px-3 mb-0">
-          <div class="mb-3">
-            <i class="bx bxs-folder-open h1 text-success" />
-          </div>
-
-          <div>
-            <h5 class="text-success">{$_('Upgrade Features')}</h5>
-            <p>{$_('Cum sociis natoque penatibus et')}</p>
-            <div class="text-center">
-              <button
-                type="button"
-                class="btn btn-link text-decoration-none text-success"
-              >
-                {$_('Upgrade')} <i class="mdi mdi-arrow-right" />
-              </button>
-            </div>
-          </div>
-        </Alert>
-      </div>
-    </div>
-  </CardBody>
-</Card>
diff --git a/src/routes/page/knowledge-base/FileLists.svelte b/src/routes/page/knowledge-base/FileLists.svelte
deleted file mode 100644
index d822b7b1..00000000
--- a/src/routes/page/knowledge-base/FileLists.svelte
+++ /dev/null
@@ -1,111 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n'
-	import Link from 'svelte-link';
-	import {
-		Card,
-		CardBody,
-		Col,
-		DropdownMenu,
-		DropdownItem,
-		DropdownToggle,
-		Form,
-		Row,
-		Dropdown
-	} from '@sveltestrap/sveltestrap';
-
-	const myfiles = [
-		{
-			id: 1,
-			name: 'Design',
-			file: '12',
-			Gb: 6
-		},
-	];
-</script>
-
-<div>
-	<Row class="mb-3">
-		<Col xl={3} sm={6}>
-			<div class="mt-2">
-				<h5>{$_('My Files')}</h5>
-			</div>
-		</Col>
-		<Col xl={9} sm={6}>
-			<Form class="mt-4 mt-sm-0 float-sm-end d-flex align-items-center">
-				<div class="search-box mb-2 me-2">
-					<div class="position-relative">
-						<input
-							type="text"
-							class="form-control bg-light border-light rounded"
-							placeholder="{$_('Search')}..."
-						/>
-						<i class="bx bx-search-alt search-icon" />
-					</div>
-				</div>
-				<Dropdown>
-					<DropdownToggle
-						color=""
-						class="btn btn-link text-muted dropdown-toggle mt-n2 headerbtn"
-						tag="div"
-					>
-						<i class="mdi mdi-dots-vertical font-size-20" />
-					</DropdownToggle>
-
-					<DropdownMenu class="dropdown-menu-end">
-						<DropdownItem >{$_('Share Files')}</DropdownItem>
-						<DropdownItem >{$_('Share with me')}</DropdownItem>
-						<DropdownItem >{$_('Other Actions')}</DropdownItem>
-					</DropdownMenu>
-				</Dropdown>
-			</Form>
-		</Col>
-	</Row>
-</div>
-<div>
-	<Row>
-		{#each myfiles as myfile}
-			<Col xl={4} sm={6}>
-				<Card class="shadow-none border">
-					<CardBody class="p-3">
-						<div class="">
-							<div class="float-end ms-2">
-								<Dropdown>
-									<DropdownToggle class="font-size-16 text-muted" color="" tag="div" >
-										<i class="mdi mdi-dots-horizontal" />
-									</DropdownToggle>
-									<DropdownMenu class="dropdown-menu-end">
-										<DropdownItem header>{$_('Open')}</DropdownItem>
-										<DropdownItem >{$_('Edit')}</DropdownItem>
-										<DropdownItem>{$_('Rename')}</DropdownItem>
-										<DropdownItem divider />
-										<DropdownItem>{$_('Remove')}</DropdownItem>
-									</DropdownMenu>
-								</Dropdown>
-							</div>
-							<div class="avatar-xs me-3 mb-3">
-								<div class="avatar-title bg-transparent rounded">
-									<i class="bx bxs-folder font-size-24 text-warning" />
-								</div>
-							</div>
-							<div class="d-flex">
-								<div class="overflow-hidden me-auto">
-									<h5 class="font-size-14 text-truncate mb-1">
-										<Link to="#" class="text-body">
-											{myfile.name}
-										</Link>
-									</h5>
-									<p class="text-muted text-truncate mb-0">
-										{myfile.file} {$_('Files')}
-									</p>
-								</div>
-								<div class="align-self-end ms-2">
-									<p class="text-muted mb-0">{myfile.Gb}GB</p>
-								</div>
-							</div>
-						</div>
-					</CardBody>
-				</Card>
-			</Col>
-		{/each}
-	</Row>
-</div>
diff --git a/src/routes/page/knowledge-base/Storage.svelte b/src/routes/page/knowledge-base/Storage.svelte
deleted file mode 100644
index afa2f548..00000000
--- a/src/routes/page/knowledge-base/Storage.svelte
+++ /dev/null
@@ -1,199 +0,0 @@
-<script>
-	import { onMount } from "svelte";
-  import { _ } from 'svelte-i18n';
-  import Link from "svelte-link";
-  import { Card, CardBody } from "@sveltestrap/sveltestrap";
-  import "//cdn.jsdelivr.net/npm/apexcharts";
-
-  const options = {
-    series: [0],
-    chart: {
-      height: 150,
-      type: "radialBar",
-      sparkline: {
-        enabled: !0,
-      },
-    },
-    colors: ["#556ee6"],
-    plotOptions: {
-      radialBar: {
-        startAngle: -90,
-        endAngle: 90,
-        track: {
-          background: "#e7e7e7",
-          strokeWidth: "97%",
-          margin: 5, // margin is in pixels
-        },
-
-        hollow: {
-          size: "60%",
-        },
-
-        dataLabels: {
-          name: {
-            show: !1,
-          },
-          value: {
-            offsetY: -2,
-            fontSize: "16px",
-          },
-        },
-      },
-    },
-    grid: {
-      padding: {
-        top: -10,
-      },
-    },
-    stroke: {
-      dashArray: 3,
-    },
-    labels: [$_('Storage')],
-  };
-
-  onMount(() => {
-    let chart = new ApexCharts(document.getElementById("storageChart"),options)
-    chart.render();
-  })
-
-</script>
-
-<Card class="filemanager-sidebar ms-lg-2">
-  <CardBody>
-    <div class="text-center">
-      <h5 class="font-size-15 mb-4">{$_('Storage')}</h5>
-      <div class="apex-charts">
-        <div id="storageChart" class="apex-charts" />
-      </div>
-
-      <p class="text-muted mt-4">{$_('0 GB (0%) of 1 GB used')}</p>
-    </div>
-
-    <div class="mt-4">
-      <Card class="border shadow-none mb-2">
-        <Link href="#" class="text-body">
-          <div class="p-2">
-            <div class="d-flex">
-              <div class="avatar-xs align-self-center me-2">
-                <div
-                  class="avatar-title rounded bg-transparent text-success font-size-20"
-                >
-                  <i class="mdi mdi-image" />
-                </div>
-              </div>
-
-              <div class="overflow-hidden me-auto">
-                <h5 class="font-size-13 text-truncate mb-1">{$_('Images')}</h5>
-                <p class="text-muted text-truncate mb-0">0 {$_('Files')}</p>
-              </div>
-
-              <div class="ml-2">
-                <p class="text-muted">0 GB</p>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </Card>
-
-      <div class="card border shadow-none mb-2">
-        <Link href="#" class="text-body">
-          <div class="p-2">
-            <div class="d-flex">
-              <div class="avatar-xs align-self-center me-2">
-                <div
-                  class="avatar-title rounded bg-transparent text-danger font-size-20"
-                >
-                  <i class="mdi mdi-play-circle-outline" />
-                </div>
-              </div>
-
-              <div class="overflow-hidden me-auto">
-                <h5 class="font-size-13 text-truncate mb-1">{$_('Video')}</h5>
-                <p class="text-muted text-truncate mb-0">0 {$_('Files')}</p>
-              </div>
-
-              <div class="ml-2">
-                <p class="text-muted">0 GB</p>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-
-      <div class="card border shadow-none mb-2">
-        <Link href="#" class="text-body">
-          <div class="p-2">
-            <div class="d-flex">
-              <div class="avatar-xs align-self-center me-2">
-                <div
-                  class="avatar-title rounded bg-transparent text-info font-size-20"
-                >
-                  <i class="mdi mdi-music" />
-                </div>
-              </div>
-
-              <div class="overflow-hidden me-auto">
-                <h5 class="font-size-13 text-truncate mb-1">{$_('Music')}</h5>
-                <p class="text-muted text-truncate mb-0">0 {$_('Files')}</p>
-              </div>
-
-              <div class="ml-2">
-                <p class="text-muted">0 GB</p>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-
-      <div class="card border shadow-none mb-2">
-        <Link href="#" class="text-body">
-          <div class="p-2">
-            <div class="d-flex">
-              <div class="avatar-xs align-self-center me-2">
-                <div
-                  class="avatar-title rounded bg-transparent text-primary font-size-20"
-                >
-                  <i class="mdi mdi-file-document" />
-                </div>
-              </div>
-
-              <div class="overflow-hidden me-auto">
-                <h5 class="font-size-13 text-truncate mb-1">{$_('Document')}</h5>
-                <p class="text-muted text-truncate mb-0">0 {$_('Files')}</p>
-              </div>
-
-              <div class="ml-2">
-                <p class="text-muted">0 GB</p>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-
-      <div class="card border shadow-none">
-        <Link href="#" class="text-body">
-          <div class="p-2">
-            <div class="d-flex">
-              <div class="avatar-xs align-self-center me-2">
-                <div
-                  class="avatar-title rounded bg-transparent text-warning font-size-20"
-                >
-                  <i class="mdi mdi-folder" />
-                </div>
-              </div>
-
-              <div class="overflow-hidden me-auto">
-                <h5 class="font-size-13 text-truncate mb-1">{$_('Others')}</h5>
-                <p class="text-muted text-truncate mb-0">0 {$_('Files')}</p>
-              </div>
-
-              <div class="ml-2">
-                <p class="text-muted">0 GB</p>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-    </div>
-  </CardBody>
-</Card>
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 838688b0..b479b02a 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
@@ -1,69 +1,53 @@
 <script>
     import { onMount } from "svelte";
-	import {
-        Button,
-        Form,
-        FormGroup,
-        Input,
-        Modal,
-        ModalBody,
-        ModalFooter,
-        ModalHeader,
-        Row
-    } from "@sveltestrap/sveltestrap";
+    import { fade } from 'svelte/transition';
     import _ from "lodash";
 	import { existVectorCollection } from "$lib/services/knowledge-base-service";
 
-    
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {string} */
-    export let className = "";
-
-    /** @type {string} */
-    export let title;
+    let {
+        /** @type {boolean} */
+        open = false,
+        /** @type {string} */
+        className = "",
+        /** @type {string} */
+        title = '',
+        /** @type {string} */
+        size = 'md',
+        /** @type {number} */
+        minDimension = 1,
+        /** @type {number} */
+        step = 1,
+        /** @type {number} */
+        maxLength = 30,
+        /** @type {() => void} */
+        toggleModal = () => {},
+        /** @type {(args0: any) => void} */
+        confirm = () => {},
+        /** @type {() => void} */
+        cancel = () => {}
+    } = $props();
 
     /** @type {string} */
-    export let size = 'md';
-
-    /** @type {number} */
-    export let minDimension = 1;
-
-    /** @type {number} */
-    export let step = 1;
-
-    /** @type {number} */
-    export let maxLength = 30;
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-    /** @type {(args0: any) => void} */
-    export let confirm;
-
-    /** @type {() => void} */
-    export let cancel;
-
-    /** @type {string} */
-    let collection;
+    let collection = $state('');
 
     /** @type {boolean} */
-    let isValidCollection = true;
+    let isValidCollection = $state(true);
 
     /** @type {number} */
-    let dimension;
+    let dimension = $state(1536);
 
     /** @type {string} */
-    let provider;
+    let provider = $state('openai');
 
     /** @type {string} */
-    let model;
+    let model = $state('text-embedding-3-small');
 
-    $: disableConfirmBtn = (!_.trim(collection) || collection.length > maxLength) ||
-                            (!_.trim(provider) || provider.length > maxLength) ||
-                            (!_.trim(model) || model.length > maxLength) ||
-                            dimension <= 0;
+    let disableConfirmBtn = $derived(
+        (!_.trim(collection) || collection.length > maxLength) ||
+        (!_.trim(provider) || provider.length > maxLength) ||
+        (!_.trim(model) || model.length > maxLength) ||
+        dimension <= 0
+    );
 
     onMount(() => {
         reset();
@@ -125,97 +109,117 @@
         cancel?.();
     }
 
+    /** @param {MouseEvent} e */
+    function handleBackdropClick(e) {
+        if (e.target === e.currentTarget) {
+            toggle();
+        }
+    }
 </script>
 
-<Modal
-    class={`vector-collection-create-container ${className}`}
-    fade
-    size={size}
-    isOpen={open}
-    toggle={() => toggle()}
-    unmountOnClose
+{#if open}
+<div
+    class="modal show d-block"
+    tabindex="-1"
+    role="dialog"
+    transition:fade={{ duration: 150 }}
+    onclick={handleBackdropClick}
+    onkeydown={(e) => { if (e.key === 'Escape') toggle(); }}
 >
-    <ModalHeader>
-        <div>{title}</div>
-    </ModalHeader>
-    <ModalBody>
-        <Form>
-            <Row>
-                <FormGroup class="collection-input">
-                    <label class="fw-bold" for="collection">{`Collection name: `}</label>
-                    <Input
-                        type="text"
-                        class={`text-center ${!isValidCollection ? 'invalid-input' : ''}`}
-                        maxlength={maxLength}
-                        value={collection}
-                        on:input={(e) => changeCollectionText(e)}
-                    />
-                    <div class={`text-secondary text-count collection-note ${isValidCollection ? 'valid' : 'invalid'}`}>
-                        {#if !isValidCollection}
-                            <div style="color: var(--bs-danger);">{'* The collection already exists.'}</div>
-                        {/if}
-                        <div>{collection?.length || 0}/{maxLength}</div>
+    <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>
+            <div class="modal-body">
+                <form onsubmit={(e) => handleConfirm(e)}>
+                    <div class="row">
+                        <div class="mb-3 collection-input">
+                            <label class="fw-bold" for="collection">Collection name: </label>
+                            <input
+                                type="text"
+                                id="collection"
+                                class={`form-control text-center ${!isValidCollection ? 'invalid-input' : ''}`}
+                                maxlength={maxLength}
+                                value={collection}
+                                oninput={(e) => changeCollectionText(e)}
+                            />
+                            <div class={`text-secondary text-count collection-note ${isValidCollection ? 'valid' : 'invalid'}`}>
+                                {#if !isValidCollection}
+                                    <div style="color: var(--bs-danger);">* The collection already exists.</div>
+                                {/if}
+                                <div>{collection?.length || 0}/{maxLength}</div>
+                            </div>
+                        </div>
                     </div>
-                </FormGroup>
-            </Row>
-            <Row>
-                <FormGroup>
-                    <label class="fw-bold" for="provider">{`Embedding provider: `}</label>
-                    <Input
-                        type="text"
-                        class="text-center"
-                        maxlength={maxLength}
-                        bind:value={provider}
-                    />
-                    <div class="text-secondary text-end text-count">
-                        {provider?.length || 0}/{maxLength}
+                    <div class="row">
+                        <div class="mb-3">
+                            <label class="fw-bold" for="provider">Embedding provider: </label>
+                            <input
+                                type="text"
+                                id="provider"
+                                class="form-control text-center"
+                                maxlength={maxLength}
+                                bind:value={provider}
+                            />
+                            <div class="text-secondary text-end text-count">
+                                {provider?.length || 0}/{maxLength}
+                            </div>
+                        </div>
                     </div>
-                </FormGroup>
-            </Row>
-            <Row>
-                <FormGroup>
-                    <label class="fw-bold" for="model">{`Embedding model: `}</label>
-                    <Input
-                        type="text"
-                        class="text-center"
-                        maxlength={maxLength}
-                        bind:value={model}
-                    />
-                    <div class="text-secondary text-end text-count">
-                        {model?.length || 0}/{maxLength}
+                    <div class="row">
+                        <div class="mb-3">
+                            <label class="fw-bold" for="model">Embedding model: </label>
+                            <input
+                                type="text"
+                                id="model"
+                                class="form-control text-center"
+                                maxlength={maxLength}
+                                bind:value={model}
+                            />
+                            <div class="text-secondary text-end text-count">
+                                {model?.length || 0}/{maxLength}
+                            </div>
+                        </div>
                     </div>
-                </FormGroup>
-            </Row>
-            <Row>
-                <FormGroup>
-                    <label class="fw-bold" for="dimension">{`Vector dimension: `}</label>
-                    <Input
-                        type="number"
-                        class="text-center"
-                        bind:value={dimension}
-                        min={minDimension}
-                        step={step}
-                    />
-                    <div class="text-secondary text-count">
-                        {'* The value must be larger than 0.'}
+                    <div class="row">
+                        <div class="mb-3">
+                            <label class="fw-bold" for="dimension">Vector dimension: </label>
+                            <input
+                                type="number"
+                                id="dimension"
+                                class="form-control text-center"
+                                bind:value={dimension}
+                                min={minDimension}
+                                step={step}
+                            />
+                            <div class="text-secondary text-count">
+                                * The value must be larger than 0.
+                            </div>
+                        </div>
                     </div>
-                </FormGroup>
-            </Row>
-        </Form>
-    </ModalBody>
-    <ModalFooter>
-        <Button
-            color="primary"
-            disabled={disableConfirmBtn}
-            on:click={(e) => handleConfirm(e)}
-        >
-            Confirm
-        </Button>
-        <Button
-            color="secondary"
-            on:click={(e) => handleCancel(e)}
-        >
-            Cancel
-        </Button>
-    </ModalFooter>
-</Modal>
\ No newline at end of file
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button
+                    type="button"
+                    class="btn btn-primary"
+                    disabled={disableConfirmBtn}
+                    onclick={(e) => handleConfirm(e)}
+                >
+                    Confirm
+                </button>
+                <button
+                    type="button"
+                    class="btn 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
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 a9ad1a4a..92b87be7 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
@@ -1,50 +1,31 @@
 <script>
     import { onMount, tick } from "svelte";
-    import {
-        Button,
-        Form,
-        FormGroup,
-        Modal,
-        ModalBody,
-        ModalFooter,
-        ModalHeader,
-        Input,
-        Card,
-        CardBody,
-        CardHeader
-    } from "@sveltestrap/sveltestrap";
+    import { fade } from 'svelte/transition'; // used in template transition directives
     import util from "lodash";
 	import { getVectorCollectionDetails } from "$lib/services/knowledge-base-service";
 	import { VectorIndexSchemaType } from "$lib/helpers/enums";
     import Select from "$lib/common/dropdowns/Select.svelte";
 
-    /** @type {string} */
-    export let collection;
-
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {string} */
-    export let className = "";
-
-    /** @type {string} */
-    export let title;
-
-    /** @type {string} */
-    export let size = 'xl';
-
-    /** @type {number} */
-    export let limit = 30;
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-    /** @type {(e: any) => void} */
-    export let confirm;
-
-    /** @type {() => void} */
-    export let cancel;
-
+    let {
+        /** @type {string} */
+        collection = '',
+        /** @type {boolean} */
+        open = false,
+        /** @type {string} */
+        className = "",
+        /** @type {string} */
+        title = '',
+        /** @type {string} */
+        size = 'xl',
+        /** @type {number} */
+        limit = 30,
+        /** @type {() => void} */
+        toggleModal = () => {},
+        /** @type {(e: any) => void} */
+        confirm = () => {},
+        /** @type {() => void} */
+        cancel = () => {}
+    } = $props();
 
     const maxLength = 500;
     const indexTypeOptions = Object.entries(VectorIndexSchemaType).map(([k, v]) => ({
@@ -53,16 +34,18 @@
     }));
 
     /** @type any */
+    // eslint-disable-next-line svelte/valid-compile
     let addIndexScrollContainer = null;
 
     /** @type any */
+    // eslint-disable-next-line svelte/valid-compile
     let deleteIndexScrollContainer = null;
 
     /** @type {{ field_name: string, field_schema_type: string }[]} */
-    let indexesToAdd = [];
+    let indexesToAdd = $state([]);
 
     /** @type {{ field_name: string, field_schema_type: string }[]} */
-    let indexesToDelete = [];
+    let indexesToDelete = $state([]);
 
     onMount(() => {
         init();
@@ -75,14 +58,14 @@
     }
 
     function getCollectionDetail() {
-		return new Promise((resolve, reject) => {
+		return new Promise((resolve) => {
 			getVectorCollectionDetails(collection).then(res => {
 				indexesToAdd = res?.payload_schema?.map(x => ({
                     field_name: x.field_name,
                     field_schema_type: x.field_data_type
                 })) || [];
 				resolve(res);
-			}).catch(err => {
+			}).catch(() => {
 				indexesToAdd = [];
 				resolve([]);
 			});
@@ -230,233 +213,200 @@
 </script>
 
 
-<Modal
-    class={className}
-    fade
-    size={size}
-    isOpen={open}
-    toggle={() => toggleModal && toggleModal()}
-    unmountOnClose
+{#if open}
+<div
+    class="modal show d-block"
+    tabindex="-1"
+    role="dialog"
+    transition:fade={{ duration: 150 }}
+    onclick={(e) => { if (e.target === e.currentTarget) toggleModal?.(); }}
+    onkeydown={(e) => { if (e.key === 'Escape') toggleModal?.(); }}
 >
-    <ModalHeader>
-        <div>{title}</div>
-        <div>
-            <span class="fw-bold">{'Collection: '}</span>
-            <span class="text-primary collection-value">{collection}</span>
-        </div>
-    </ModalHeader>
-    <ModalBody class="thin-scrollbar" style="max-height: 70vh; overflow-y: auto;">
-        <Form>
-            <div class="mt-2">
-                <!-- Main container using CSS Grid for responsive layout -->
-                <div class="index-layout-container">
-                    <!-- Existing Index Items Block -->
-                    <div class="index-block">
-                        <Card class="index-block-card">
-                            <CardHeader>
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <h6 class="mb-0">Index Items to Add</h6>
-                                    <Button
-                                        size="sm"
-                                        color="primary"
-                                        disabled={indexesToAdd.length >= limit}
-                                        on:click={(e) => addNewIndex(e)}
-                                    >
-                                        <i class="mdi mdi-plus"></i> Add
-                                    </Button>
-                                </div>
-                            </CardHeader>
-                            <CardBody class="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 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>
+                </div>
+                <button type="button" class="btn-close" aria-label="Close" onclick={() => toggleModal?.()}></button>
+            </div>
+            <div class="modal-body thin-scrollbar" style="max-height: 70vh; overflow-y: auto;">
+                <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>
-                                    {: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
-                                                            size="sm"
-                                                            color="info"
-                                                            on:click={(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
-                                                            size="sm"
-                                                            color="danger"
-                                                            on:click={(e) => removeIndex(e, idx)}
-                                                            title="Remove item"
-                                                        >
-                                                            <i class="mdi mdi-trash-can"></i>
-                                                        </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>
-                                                <div class="field-row">
-                                                    <div class="field-item">
-                                                        <FormGroup class="mb-2">
-                                                            <label class="form-label" for={`field-name-${idx}`}>
-                                                                Field Name
-                                                            </label>
-                                                            <Input
-                                                                id={`field-name-${idx}`}
-                                                                type="text"
-                                                                value={item.field_name}
-                                                                placeholder="Enter field name"
-                                                                maxlength={maxLength}
-                                                                on:input={(e) => updateIndexFieldName(idx, e.target.value)}
-                                                            />
-                                                        </FormGroup>
+                                            {: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>
+                                                        <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="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>
                                                     </div>
-                                                    <div class="field-item">
-                                                        <FormGroup 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}
-                                                                on:select={(e) => updateIndexFieldType(e, idx)}
-                                                            />
-                                                        </FormGroup>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        {/each}
-                                    {/if}
+                                                {/each}
+                                            {/if}
+                                        </div>
+                                    </div>
                                 </div>
-                            </CardBody>
-                        </Card>
-                    </div>
-
-                    <!-- Arrow buttons container -->
-                    <div class="arrow-container">
-                        <div class="arrow-buttons">
-                            <Button
-                                color="info"
-                                size="sm"
-                                disabled={indexesToAdd.length === 0}
-                                on:click={(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
-                                color="info"
-                                size="sm"
-                                disabled={indexesToDelete.length === 0}
-                                on:click={(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>
-                    </div>
-
-                    <!-- Delete Index Items Block -->
-                    <div class="index-block">
-                        <Card class="index-block-card">
-                            <CardHeader>
-                                <div class="d-flex justify-content-between align-items-center">
-                                    <h6 class="mb-0">Index Items to Delete</h6>
-                                    <Button
-                                        size="sm"
-                                        color="warning"
-                                        disabled={indexesToDelete.length >= limit}
-                                        on:click={(e) => addToDeleteIndex(e)}
-                                    >
-                                        <i class="mdi mdi-plus"></i> Add
-                                    </Button>
+                            </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>
-                            </CardHeader>
-                            <CardBody class="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>
+
+                            <!-- 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>
-                                    {: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
-                                                            size="sm"
-                                                            color="info"
-                                                            on:click={(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
-                                                            size="sm"
-                                                            color="danger"
-                                                            title="Remove item"
-                                                            on:click={(e) => removeFromDeleteList(e, idx)}
-                                                        >
-                                                            <i class="mdi mdi-trash-can"></i>
-                                                        </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>
-                                                <div class="field-row">
-                                                    <div class="field-item">
-                                                        <FormGroup class="mb-2">
-                                                            <label class="form-label" for={`delete-field-name-${idx}`}>
-                                                                Field Name
-                                                            </label>
-                                                            <Input
-                                                                id={`delete-field-name-${idx}`}
-                                                                type="text"
-                                                                value={item.field_name}
-                                                                placeholder="Enter field name to delete"
-                                                                maxlength={maxLength}
-                                                                on:input={(e) => updateDeleteIndexFieldName(idx, e.target.value)}
-                                                            />
-                                                        </FormGroup>
+                                            {: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>
+                                                        </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>
                                                     </div>
-                                                </div>
-                                            </div>
-                                        {/each}
-                                    {/if}
+                                                {/each}
+                                            {/if}
+                                        </div>
+                                    </div>
                                 </div>
-                            </CardBody>
-                        </Card>
+                            </div>
+                        </div>
                     </div>
-                </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" onclick={(e) => handleConfirm(e)}>
+                    Confirm
+                </button>
+                <button type="button" class="btn btn-secondary" onclick={(e) => handleCancel(e)}>
+                    Cancel
+                </button>
             </div>
-        </Form>
-    </ModalBody>
-    <ModalFooter>
-        <Button
-            color="primary"
-            on:click={(e) => handleConfirm(e)}
-        >
-            Confirm
-        </Button>
-        <Button
-            color="secondary"
-            on:click={(e) => handleCancel(e)}
-        >
-            Cancel
-        </Button>
-    </ModalFooter>
-</Modal>
\ No newline at end of file
+        </div>
+    </div>
+</div>
+<div class="modal-backdrop fade show" transition:fade={{ duration: 150 }}></div>
+{/if}
\ No newline at end of file
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 13fa4334..8ca70386 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -1,34 +1,33 @@
 <script>
-    import { onMount, onDestroy, tick } from 'svelte';
+    import { onDestroy, tick } from 'svelte';
     import { fly } from 'svelte/transition';
-    import { Input, Tooltip, Button } from '@sveltestrap/sveltestrap';
     import { v4 as uuidv4 } from 'uuid';
 	import Select from '$lib/common/dropdowns/Select.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import { VectorPayloadDataType } from '$lib/helpers/enums';
-    
-    /** @type {boolean} */
-    export let showAdvSearch = false;
 
-    /** @type {{ uuid: string, key: string, value: string, data_type: string, checked: boolean }[]} */
-    export let items = [];
-
-    /** @type {string} */
-    export let operator = 'or';
-
-    /** @type {string} */
-    export let sortOrder = "desc";
-
-    /** @type {string} */
-    export let sortField = '';
-
-    /** @type {number} */
-    export let maxLength = 1000;
-
-    /** @type {number} */
-    export let limit = 10;
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   showAdvSearch?: boolean,
+     *   items?: { uuid: string, key: string, value: string, data_type: string, checked: boolean }[],
+     *   operator?: string,
+     *   sortOrder?: string,
+     *   sortField?: string,
+     *   maxLength?: number,
+     *   limit?: number,
+     *   disabled?: boolean
+     * }}
+     */
+    let {
+        showAdvSearch = $bindable(false),
+        items = $bindable([]),
+        operator = $bindable('or'),
+        sortOrder = $bindable('desc'),
+        sortField = $bindable(''),
+        maxLength = 1000,
+        limit = 10,
+        disabled = false
+    } = $props();
 
     const logicalOperators = [
         {
@@ -37,7 +36,7 @@
             label: 'AND',
             tip: 'All of the conditions should match.'
         },
-        {   
+        {
             id: 'operator-or',
             value: 'or',
             label: 'OR',
@@ -52,7 +51,7 @@
             label: 'ASC',
             tip: 'Ascending sort.'
         },
-        {   
+        {
             id: 'sort-desc',
             value: 'desc',
             label: 'DESC',
@@ -60,16 +59,15 @@
         }
     ];
 
-    const dataTypeOptions = Object.entries(VectorPayloadDataType).map(([k, v]) => ({
+    const dataTypeOptions = Object.entries(VectorPayloadDataType).map(([_, v]) => ({
         label: v.name.toLowerCase(),
         value: v.name
     }));
 
     /** @type {HTMLElement} */
+    // eslint-disable-next-line svelte/valid-compile
     let scrollContainer;
 
-    onMount(() => {});
-
     onDestroy(() => {
         reset();
     });
@@ -84,7 +82,7 @@
         items = [{ uuid: uuidv4(), key: '', value: '', data_type: '', checked: true }];
     }
 
-    
+
     /**
      * @param {any} e
      * @param {number} idx
@@ -161,12 +159,14 @@
     out:fly={{ y: -10, duration: 200 }}
 >
     <div class="knowledge-adv-search-btn text-primary fw-bold">
-        <div class="line-align-center">
-            <Input
-                type="switch"
+        <div class="form-check form-switch line-align-center">
+            <input
+                type="checkbox"
+                class="form-check-input"
+                role="switch"
                 disabled={disabled}
                 checked={showAdvSearch}
-                on:change={e => toggleAdvSearch(e)}
+                onchange={e => toggleAdvSearch(e)}
             />
         </div>
         <div class="line-align-center">
@@ -174,14 +174,14 @@
         </div>
         {#if showAdvSearch}
             <div class="line-align-center" id="adv-search-tooltip">
-                <i class="bx bx-info-circle" />
+                <i class="bx bx-info-circle"></i>
             </div>
-            <Tooltip target="adv-search-tooltip" placement="top" class="demo-tooltip-note">
+            <BotsharpTooltip target="adv-search-tooltip" placement="top" containerClasses="demo-tooltip-note">
                 <ul>
                     <li>{'Select the checkbox to enable seaching in each field.'}</li>
                     <li>{'Empty value will not be used to search.'}</li>
                 </ul>
-            </Tooltip>
+            </BotsharpTooltip>
         {/if}
     </div>
 
@@ -210,29 +210,34 @@
             {#each items as item, idx (item.uuid)}
                 <div class="knowledge-adv-search-item">
                     <div class="search-item-cb line-align-center">
-                        <Input
-                            type="checkbox"
-                            disabled={disabled}
-                            checked={item.checked}
-                            on:change={e => toggleItem(e, idx)}
-                        />
+                        <div class="form-check">
+                            <input
+                                type="checkbox"
+                                class="form-check-input"
+                                disabled={disabled}
+                                checked={item.checked}
+                                onchange={e => toggleItem(e, idx)}
+                            />
+                        </div>
                     </div>
                     <div class="search-item-content line-align-center" data-label="Name">
-                        <Input
+                        <input
                             type="text"
+                            class="form-control"
                             disabled={!item.checked || disabled}
                             maxlength={maxLength}
                             value={item.key}
-                            on:input={e => changeItem(e, idx, 'key')}
+                            oninput={e => changeItem(e, idx, 'key')}
                         />
                     </div>
                     <div class="search-item-content line-align-center" data-label="Value">
-                        <Input
+                        <input
                             type="text"
+                            class="form-control"
                             disabled={!item.checked || disabled}
                             maxlength={maxLength}
                             value={item.value}
-                            on:input={e => changeItem(e, idx, 'value')}
+                            oninput={e => changeItem(e, idx, 'value')}
                         />
                     </div>
                     <div class="search-item-content line-align-center" data-label="Data type">
@@ -242,18 +247,18 @@
                             disabled={!item.checked || disabled}
                             selectedValues={item.data_type ? [item.data_type] : []}
                             options={dataTypeOptions}
-                            on:select={e => changeItem(e, idx, 'data_type')}
+                            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 -->
+                            <!-- 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}
-                                on:click={() => removeItem(idx)}
-                            />
+                                onclick={() => removeItem(idx)}
+                            ></i>
                         </div>
                     </div>
                 </div>
@@ -271,13 +276,13 @@
                     </div>
                     <div class="search-item-content line-align-center">
                         <div class="d-flex justify-content-end">
-                            <Button
-                                color="link"
+                            <button
+                                class="btn btn-link"
                                 style="width: fit-content"
-                                on:click={e => addItem(e)}
+                                onclick={e => addItem(e)}
                             >
                                 {'Add +'}
-                            </Button>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -290,23 +295,27 @@
                 <div class="d-flex align-items-center gap-5">
                     {#each logicalOperators as op, idx (idx)}
                         <div class="d-flex align-items-center gap-1">
-                            <Input
-                                type="radio"
-                                id={op.id}
-                                name="searchOperator"
-                                value={op.value}
-                                disabled={disabled}
-                                bind:group={operator}
-                            />
+                            <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">
                                 <span>{op.label}</span>
                                 {#if op.tip}
                                 <span class="line-align-center" id={`tooltip-${op.id}`}>
-                                    <i class="bx bx-info-circle" />
+                                    <i class="bx bx-info-circle"></i>
                                 </span>
-                                <Tooltip target={`tooltip-${op.id}`} placement="top" class="operator-tooltip">
+                                <BotsharpTooltip target={`tooltip-${op.id}`} placement="top" containerClasses="operator-tooltip">
                                     <div>{op.tip}</div>
-                                </Tooltip>
+                                </BotsharpTooltip>
                                 {/if}
                             </label>
                         </div>
@@ -319,8 +328,9 @@
             <div class="operator-item align-items-center gap-5">
                 <div class="fw-bold operator-title">Sort by field:</div>
                 <div>
-                    <Input
+                    <input
                         type="text"
+                        class="form-control"
                         name="searchSortField"
                         bind:value={sortField}
                         disabled={disabled}
@@ -333,23 +343,27 @@
                 <div class="d-flex align-items-center gap-5" style="margin-top: 5px;">
                     {#each sortDirections as op, idx (idx)}
                         <div class="d-flex align-items-center gap-1">
-                            <Input
-                                type="radio"
-                                id={op.id}
-                                name="searchSort"
-                                value={op.value}
-                                disabled={disabled}
-                                bind:group={sortOrder}
-                            />
+                            <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">
                                 <span>{op.label}</span>
                                 {#if op.tip}
                                 <span class="line-align-center" id={`tooltip-${op.id}`}>
-                                    <i class="bx bx-info-circle" />
+                                    <i class="bx bx-info-circle"></i>
                                 </span>
-                                <Tooltip target={`tooltip-${op.id}`} placement="top" class="operator-tooltip">
+                                <BotsharpTooltip target={`tooltip-${op.id}`} placement="top" containerClasses="operator-tooltip">
                                     <div>{op.tip}</div>
-                                </Tooltip>
+                                </BotsharpTooltip>
                                 {/if}
                             </label>
                         </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 8c1896d0..d3c4772d 100644
--- a/src/routes/page/knowledge-base/common/table/table-item.svelte
+++ b/src/routes/page/knowledge-base/common/table/table-item.svelte
@@ -1,33 +1,34 @@
 <script>
-    import { Button } from "@sveltestrap/sveltestrap";
     import { fly } from 'svelte/transition';
 	import Loader from "$lib/common/spinners/Loader.svelte";
-    import JSONTree from 'svelte-json-tree';
 	import { formatObject, splitTextByCase } from "$lib/helpers/utils/common";
+    import JSONTree from 'svelte-json-tree';
 
-    /** @type {any} */
-    export let item;
-
-    /** @type {import('$commonTypes').TableItemConfig[]} */
-    export let columns;
-
-    /** @type {string | null} */
-    export let detailKey = null;
-
-    /** @type {boolean} */
-    export let useJsonDisplay = false;
-
-    /** @type {boolean} */
-    export let open = false;
+    /**
+     * @type {{
+     *   item: any,
+     *   columns: import('$commonTypes').TableItemConfig[],
+     *   detailKey?: string | null,
+     *   useJsonDisplay?: boolean,
+     *   open?: boolean
+     * }}
+     */
+    let {
+        item,
+        columns,
+        detailKey = null,
+        useJsonDisplay = false,
+        open = $bindable(false)
+    } = $props();
 
-    let isLoading = false;
-    let loadMore = false;
+    let isLoading = $state(false);
+    let loadMore = $state(false);
 
-    $: {
+    $effect(() => {
         if (!open) {
             loadMore = false;
         }
-    }
+    });
 
     function toggleDetail() {
         open = !open;
@@ -50,16 +51,16 @@
         <ul class="list-unstyled hstack gap-1 mb-0 knowledge-op-list">
             {#if detailKey}
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="View Detail">
-                <Button
+                <button
                     class="btn btn-sm btn-soft-primary"
-                    on:click={() => toggleDetail()}
+                    onclick={() => toggleDetail()}
                 >
                     {#if open}
-                        <i class="bx bx-hide" />
+                        <i class="bx bx-hide"></i>
                     {:else}
-                        <i class="mdi mdi-eye-outline" />
+                        <i class="mdi mdi-eye-outline"></i>
                     {/if}
-                </Button>
+                </button>
             </li>
             {/if}
         </ul>
@@ -83,9 +84,9 @@
                     {/each}
                 </ul>
                 <div class="more-detail">
-                    <Button class='toggle-btn btn-sm' color="link" on:click={() => loadMore = !loadMore}>
+                    <button class="btn toggle-btn btn-sm btn-link" onclick={() => loadMore = !loadMore}>
                         {`${loadMore ? 'Less -' : 'More +'}`}
-                    </Button>
+                    </button>
                 </div>
                 {#if loadMore}
                     <ul
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 62a66132..00180b7b 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
@@ -1,16 +1,6 @@
 <script>
     import { onMount, tick } from "svelte";
-	import {
-        Button,
-        Form,
-        FormGroup,
-        Modal,
-        ModalBody,
-        ModalFooter,
-        ModalHeader,
-        Row,
-        Input
-    } from "@sveltestrap/sveltestrap";
+    import { fade } from 'svelte/transition';
     import {
         KnowledgeCollectionType,
         KnowledgePayloadName,
@@ -19,77 +9,66 @@
     import util from "lodash";
     import { v4 as uuidv4 } from 'uuid';
 	import Select from "$lib/common/dropdowns/Select.svelte";
-	
-
-    /** @type {import('$knowledgeTypes').KnowledgeSearchViewModel | null} */
-    export let item;
-
-    /** @type {string} */
-    export let collection;
-
-    /** @type {string} */
-    export let collectionType;
-
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {string} */
-    export let className = "";
-
-    /** @type {string} */
-    export let title;
-
-    /** @type {string} */
-    export let size = 'md';
-
-    /** @type {boolean} */
-    export let allowPayload = true;
-
-    /** @type {number} */
-    export let payloadLimit = 10;
-
-    /** @type {string[]} */
-    export let excludedPayloads = [
-        KnowledgePayloadName.Text,
-        KnowledgePayloadName.DataSource
-    ];
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-    /** @type {(item: any) => void} */
-    export let confirm;
-
-    /** @type {() => void} */
-    export let cancel;
 
+    let {
+        /** @type {import('$knowledgeTypes').KnowledgeSearchViewModel | null} */
+        item = null,
+        /** @type {string} */
+        collection = '',
+        /** @type {string} */
+        collectionType = '',
+        /** @type {boolean} */
+        open = false,
+        /** @type {string} */
+        className = "",
+        /** @type {string} */
+        title = '',
+        /** @type {string} */
+        size = 'md',
+        /** @type {boolean} */
+        allowPayload = true,
+        /** @type {number} */
+        payloadLimit = 10,
+        /** @type {string[]} */
+        excludedPayloads = [
+            KnowledgePayloadName.Text,
+            KnowledgePayloadName.DataSource
+        ],
+        /** @type {() => void} */
+        toggleModal = () => {},
+        /** @type {(item: any) => void} */
+        confirm = () => {},
+        /** @type {() => void} */
+        cancel = () => {}
+    } = $props();
 
     const dataTypeOptions = Object.entries(VectorPayloadDataType).map(([k, v]) => ({
         label: v.name.toLowerCase(),
         value: v.name
     }));
 
-    $: isQuestionAnswerCollection = collectionType === KnowledgeCollectionType.QuestionAnswer;
-    $: isDocumentCollection = collectionType === KnowledgeCollectionType.Document;
-    $: disableConfirmBtn = !util.trim(question.text) || (isQuestionAnswerCollection && !util.trim(answer.text));
+    let isQuestionAnswerCollection = $derived(collectionType === KnowledgeCollectionType.QuestionAnswer);
+    let isDocumentCollection = $derived(collectionType === KnowledgeCollectionType.Document);
 
     /** @type {{ uuid: string, key: string, value: any }[]} */
-    let innerPayloads = [];
+    let innerPayloads = $state([]);
 
     /** @type {HTMLElement} */
     let scrollContainer;
 
-    let question = {
+    let question = $state({
         text: '',
         rows: 3,
         maxLength: 4096
-    };
+    });
 
-    let answer = {
+    let answer = $state({
         text: '',
         rows: 5,
         maxLength: 4096
-    }
+    });
+
+    let disableConfirmBtn = $derived(!util.trim(question.text) || (isQuestionAnswerCollection && !util.trim(answer.text)));
 
     onMount(() => {
         init();
@@ -207,165 +186,181 @@
 
 </script>
 
-<Modal
-    class={className}
-    fade
-    size={size}
-    isOpen={open}
-    toggle={() => toggleModal && toggleModal()}
-    unmountOnClose
+{#if open}
+<div
+    class="modal show d-block"
+    tabindex="-1"
+    role="dialog"
+    transition:fade={{ duration: 150 }}
+    onclick={(e) => { if (e.target === e.currentTarget) toggleModal?.(); }}
+    onkeydown={(e) => { if (e.key === 'Escape') toggleModal?.(); }}
 >
-    <ModalHeader>
-        <div>{title}</div>
-        <div>
-            <span class="fw-bold">{'Collection: '}</span>
-            <span class="text-primary collection-value">{collection}</span>
-        </div>
-    </ModalHeader>
-    <ModalBody>
-        <Form>
-            {#if isQuestionAnswerCollection}
-            <Row>
-                <FormGroup class="edit-group">
-                    <label class="fw-bold textarea-label" for="question">
-                        {`Question: `}
-                    </label>
-                    <textarea
-                        class={'form-control knowledge-textarea'}
-                        placeholder="Enter question..."
-                        rows={question.rows}
-                        maxlength={question.maxLength}
-                        bind:value={question.text}
-                        on:input={() => {}}
-                    />
-                    <div class="text-secondary text-end text-count">
-                        {question.text?.length || 0}/{question.maxLength}
-                    </div>
-                </FormGroup>
-            </Row>
-            <Row>
-                <FormGroup class="edit-group">
-                    <label class="fw-bold textarea-label" for="answer">
-                        {`Answer: `}
-                    </label>
-                    <textarea
-                        class={'form-control knowledge-textarea'}
-                        placeholder="Enter answer..."
-                        rows={answer.rows}
-                        maxlength={answer.maxLength}
-                        bind:value={answer.text}
-                    />
-                    <div class="text-secondary text-end text-count">
-                        {answer.text?.length || 0}/{answer.maxLength}
+    <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>
-                </FormGroup>
-            </Row>
-            {:else if isDocumentCollection}
-            <Row>
-                <FormGroup class="edit-group">
-                    <label class="fw-bold textarea-label" for="text">
-                        {`Text: `}
-                    </label>
-                    <textarea
-                        class={'form-control knowledge-textarea'}
-                        placeholder="Enter text..."
-                        rows={question.rows}
-                        maxlength={question.maxLength}
-                        bind:value={question.text}
-                    />
-                    <div class="text-secondary text-end text-count">
-                        {question.text?.length || 0}/{question.maxLength}
-                    </div>
-                </FormGroup>
-            </Row>
-            {/if}
-
-            {#if allowPayload}
-            <Row class="mt-2">
-                <FormGroup>
-                    <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>
-                        {/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"
-                                    maxlength={1000}
-                                    value={payload.key}
-                                    on:input={e => changePayloadItem(e, idx, 'key')}
-                                />
+                </div>
+                <button type="button" class="btn-close" aria-label="Close" onclick={() => toggleModal?.()}></button>
+            </div>
+            <div class="modal-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">
+                                Question:
+                            </label>
+                            <textarea
+                                class="form-control knowledge-textarea"
+                                placeholder="Enter question..."
+                                rows={question.rows}
+                                maxlength={question.maxLength}
+                                bind:value={question.text}
+                            ></textarea>
+                            <div class="text-secondary text-end text-count">
+                                {question.text?.length || 0}/{question.maxLength}
                             </div>
-                            <div class="payload-item-content line-align-center" style="flex: 0.4;">
-                                <Input
-                                    type="text"
-                                    maxlength={1000}
-                                    value={payload.value.data_value}
-                                    on:input={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}
-                                    on:select={e => changePayloadItem(e, idx, 'data_type')}
-                                />
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="mb-3 edit-group">
+                            <label class="fw-bold textarea-label" for="answer">
+                                Answer:
+                            </label>
+                            <textarea
+                                class="form-control knowledge-textarea"
+                                placeholder="Enter answer..."
+                                rows={answer.rows}
+                                maxlength={answer.maxLength}
+                                bind:value={answer.text}
+                            ></textarea>
+                            <div class="text-secondary text-end text-count">
+                                {answer.text?.length || 0}/{answer.maxLength}
                             </div>
-                            <div class="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"
-                                        on:click={() => removePayloadItem(idx)}
-                                    />
-                                </div>
+                        </div>
+                    </div>
+                    {:else if isDocumentCollection}
+                    <div class="row">
+                        <div class="mb-3 edit-group">
+                            <label class="fw-bold textarea-label" for="text">
+                                Text:
+                            </label>
+                            <textarea
+                                class="form-control knowledge-textarea"
+                                placeholder="Enter text..."
+                                rows={question.rows}
+                                maxlength={question.maxLength}
+                                bind:value={question.text}
+                            ></textarea>
+                            <div class="text-secondary text-end text-count">
+                                {question.text?.length || 0}/{question.maxLength}
                             </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
-                                            color="link"
-                                            style="width: fit-content"
-                                            on:click={e => addPayloadItem(e)}
-                                        >
-                                            {'Add Payload +'}
-                                        </Button>
+                    </div>
+                    {/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>
+                                {/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>
+                                {/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>
+                                    </div>
+                                {/if}
                             </div>
-                        {/if}
+                        </div>
                     </div>
-                </FormGroup>
-            </Row>
-            {/if}
-        </Form>
-    </ModalBody>
-    <ModalFooter>
-        <Button
-            color="primary"
-            disabled={disableConfirmBtn}
-            on:click={(e) => handleConfirm(e)}
-        >
-            Confirm
-        </Button>
-        <Button
-            color="secondary"
-            on:click={(e) => handleCancel(e)}
-        >
-            Cancel
-        </Button>
-    </ModalFooter>
-</Modal>
\ No newline at end of file
+                    {/if}
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button
+                    type="button"
+                    class="btn btn-primary"
+                    disabled={disableConfirmBtn}
+                    onclick={(e) => handleConfirm(e)}
+                >
+                    Confirm
+                </button>
+                <button
+                    type="button"
+                    class="btn 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
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 8b433597..ba0fc158 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
@@ -1,12 +1,25 @@
 <script>
-    import { createEventDispatcher } from "svelte";
-    import { Button } from "@sveltestrap/sveltestrap";
     import { fly } from 'svelte/transition';
     import Swal from 'sweetalert2';
 	import Loader from "$lib/common/spinners/Loader.svelte";
 	import { KnowledgeCollectionType, KnowledgePayloadName } from "$lib/helpers/enums";
 
-    const svelteDispatch = createEventDispatcher();
+    let {
+        /** @type {import('$knowledgeTypes').KnowledgeSearchViewModel} */
+        item,
+        /** @type {string} */
+        collection,
+        /** @type {string} */
+        collectionType,
+        /** @type {boolean} */
+        open = false,
+        /** @type {boolean} */
+        disabled = false,
+        /** @type {(data: { id: string }) => void} */
+        ondelete = () => {},
+        /** @type {(data: { collection: string, item: any }) => void} */
+        onupdate = () => {}
+    } = $props();
 
     const excludedPayloads = [
 		KnowledgePayloadName.Text,
@@ -14,31 +27,17 @@
 		KnowledgePayloadName.Answer
 	];
 
-    /** @type {import('$knowledgeTypes').KnowledgeSearchViewModel} */
-    export let item;
+    let isQuestionAnswerCollection = $derived(collectionType === KnowledgeCollectionType.QuestionAnswer);
+    let isDocumentCollection = $derived(collectionType === KnowledgeCollectionType.Document);
 
-    /** @type {string} */
-    export let collection;
+    let isLoading = $state(false);
+    let loadMore = $state(false);
 
-    /** @type {string} */
-    export let collectionType;
-
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    $: isQuestionAnswerCollection = collectionType === KnowledgeCollectionType.QuestionAnswer;
-    $: isDocumentCollection = collectionType === KnowledgeCollectionType.Document;
-    $: {
+    $effect(() => {
         if (!open) {
             loadMore = false;
         }
-    }
-
-    let isLoading = false;
-    let loadMore = false;
+    });
 
     function toggleKnowledgeDetail() {
         open = !open;
@@ -58,15 +57,13 @@
             confirmButtonText: 'Yes'
         }).then(async (result) => {
             if (result.value) {
-                svelteDispatch("delete", {
-                    id: id,
-                });
+                ondelete?.({ id: id });
             }
         });
     }
 
     function editKnowledge() {
-        svelteDispatch("update", {
+        onupdate?.({
             collection: collection,
             item: item
         });
@@ -89,34 +86,37 @@
     <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
+                <button
                     class="btn btn-sm btn-soft-primary"
-                    on:click={() => toggleKnowledgeDetail()}
+                    aria-label="View detail"
+                    onclick={() => toggleKnowledgeDetail()}
                 >
                     {#if open}
-                        <i class="bx bx-hide" />
+                        <i class="bx bx-hide"></i>
                     {:else}
-                        <i class="mdi mdi-eye-outline" />
+                        <i class="mdi mdi-eye-outline"></i>
                     {/if}
-                </Button>
+                </button>
             </li>
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
-                <Button
+                <button
                     class="btn btn-sm btn-soft-warning"
                     disabled={disabled}
-                    on:click={() => editKnowledge()}
+                    aria-label="Edit"
+                    onclick={() => editKnowledge()}
                 >
-                    <i class="bx bxs-edit" />
-                </Button>
+                    <i class="bx bxs-edit"></i>
+                </button>
             </li>
             <li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
-                <Button
+                <button
                     class="btn btn-sm btn-soft-danger"
                     disabled={disabled}
-                    on:click={() => deleteKnowledge(item?.id)}
+                    aria-label="Delete"
+                    onclick={() => deleteKnowledge(item?.id)}
                 >
-                    <i class="mdi mdi-delete-outline" />
-                </Button>
+                    <i class="mdi mdi-delete-outline"></i>
+                </button>
             </li>
         </ul>
     </td>
@@ -160,9 +160,9 @@
                 </ul>
                 {#if item?.id}
                     <div class="more-detail">
-                        <Button class='toggle-btn btn-sm' color="link" on:click={() => loadMore = !loadMore}>
+                        <button class="toggle-btn btn btn-sm btn-link" onclick={() => loadMore = !loadMore}>
                             {`${loadMore ? 'Less -' : 'More +'}`}
-                        </Button>
+                        </button>
                     </div>
                     {#if loadMore}
                         <ul
@@ -179,19 +179,17 @@
                                 </li>
                             {/if}
                             {#if item?.payload}
-                                {#each Object.keys(item.payload) as key, idx (`${key}-${item?.id}`)}
+                                {#each Object.keys(item.payload) as key (`${key}-${item?.id}`)}
                                     {#if (!excludedPayloads.includes(key))}
                                         <li class="more-detail-item wrappable">
                                             <span>{key} {`(${item.payload[key]?.data_type?.toLowerCase()})`}: </span>
                                             {#if key === KnowledgePayloadName.FileUrl}
-                                                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                                <!-- svelte-ignore a11y-no-static-element-interactions -->
-                                                <span
-                                                    class="link clickable"
-                                                    on:click={() => window.open(item.payload[key]?.data_value)}
+                                                <button
+                                                    class="link clickable btn btn-link p-0"
+                                                    onclick={() => window.open(item.payload[key]?.data_value)}
                                                 >
                                                     link
-                                                </span>
+                                                </button>
                                             {:else}
                                                 <span>{item.payload[key]?.data_value}</span>
                                             {/if}
diff --git a/src/routes/page/knowledge-base/dictionary/+page.svelte b/src/routes/page/knowledge-base/dictionary/+page.svelte
index 1ded6363..02a6f54f 100644
--- a/src/routes/page/knowledge-base/dictionary/+page.svelte
+++ b/src/routes/page/knowledge-base/dictionary/+page.svelte
@@ -3,12 +3,6 @@
     import { fly } from 'svelte/transition';
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
-	import {
-        Button,
-        Card,
-        CardBody,
-        Table
-    } from '@sveltestrap/sveltestrap';
     import {
 		getEntityAnalyzers,
 		getEntityDataLoaders,
@@ -20,7 +14,7 @@
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import TableItem from '../common/table/table-item.svelte';
-	
+
 	const maxLength = 4096;
     const columns = [
         {
@@ -32,48 +26,42 @@
             displayName: "Canonical Text"
         }
     ];
-	
+
 	/** @type {string} */
-	let text = "";
-	let successText = "Done";
-	let errorText = "Error";
-	let elapsedTime = '';
+	let text = $state("");
+	let successText = $state("Done");
+	let errorText = $state("Error");
+	let elapsedTime = $state('');
 
 	/** @type {string | null} */
-	let selectedAnalyzer = null;
+	let selectedAnalyzer = $state(null);
 
     /** @type {string[]} */
-    let selectedDataLoaders = [];
+    let selectedDataLoaders = $state([]);
 
 	/** @type {import('$knowledgeTypes').EntityAnalysisResult[]} */
-	let items = [];
+	let items = $state([]);
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let analyzers = [];
+	let analyzers = $state([]);
 
     /** @type {import('$commonTypes').LabelValuePair[]} */
-    let dataLoaders = [];
+    let dataLoaders = $state([]);
 
 	/** @type {number | null | undefined} */
-	let totalDataCount;
+	let totalDataCount = $state(/** @type {number | null | undefined} */ (undefined));
 
 	/** @type {boolean} */
-	let showDemo = true;
-    let disableSearchBtn = false;
-	let isSearching = false;
-	let searchDone = false;
-	let isLoading = false;
-	let isComplete = false;
-	let isError = false;
-
-	$: {
-		disableSearchBtn = false;
-		if (!selectedAnalyzer || isSearching) {
-			disableSearchBtn = true;
-		} else if (!text || util.trim(text).length === 0) {
-			disableSearchBtn = true;
-		}
-	}
+	let showDemo = $state(true);
+	let isSearching = $state(false);
+	let searchDone = $state(false);
+	let isLoading = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+
+	let disableSearchBtn = $derived(
+		!selectedAnalyzer || isSearching || !text || util.trim(text).length === 0
+	);
 
 	onMount(() => {
 		initData();
@@ -112,7 +100,7 @@
 
 	/** @param {KeyboardEvent} e */
 	function pressKey(e) {
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !util.trim(text) || isSearching) {
 			return;
 		}
 
@@ -201,8 +189,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Dictionary')}" addOn="Knowledge Base" />
-<Breadcrumb pagetitle="{$_('Dictionary')}" title="{$_('Knowledge Base')}"/>
+<HeadTitle title={$_('Dictionary')} addOn="Knowledge Base" />
+<Breadcrumb pagetitle={$_('Dictionary')} title={$_('Knowledge Base')}/>
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -214,33 +202,34 @@
 
 <div class="knowledge-demo-btn mb-4">
 	<div class="demo-btn">
-		<Button
-			color={`${showDemo ? 'danger' : 'primary'}`}
-			on:click={() => toggleDemo()}
+		<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" /></div>
+					<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" /></div>
+					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
 					<div>{'Hide Search'}</div>
 				</div>
 			{/if}
-		</Button>
+		</button>
 	</div>
-	
+
 	<div class="reset-btn">
-		<Button
-			on:click={() => reset()}
+		<button
+			class="btn btn-secondary"
+			onclick={() => reset()}
 		>
 			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset" /></div>
+				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
 				<div>{'Reset'}</div>
 			</div>
-		</Button>
+		</button>
 	</div>
 </div>
 
@@ -259,8 +248,8 @@
 						disabled={isSearching}
 						placeholder={'Start searching here...'}
 						bind:value={text}
-						on:keydown={(e) => pressKey(e)}
-					/>
+						onkeydown={(e) => pressKey(e)}
+					></textarea>
 					<div class="text-secondary text-count d-flex justify-content-between">
 						<div>
 							{#if elapsedTime}
@@ -273,13 +262,13 @@
                     <div class="mt-3 knowledge-search-footer">
                         <div class="search-input"></div>
                         <div class="line-align-center">
-							<Button
-								color="primary"
+							<button
+								class="btn btn-primary"
 								disabled={disableSearchBtn}
-								on:click={() => search()}
+								onclick={() => search()}
 							>
 								{'Search'}
-							</Button>
+							</button>
                         </div>
                     </div>
 				
@@ -297,8 +286,8 @@
 		{/if}
 		<div class="d-md-flex mt-5">
 			<div class="w-100">
-				<Card>
-					<CardBody>
+				<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">
@@ -321,7 +310,7 @@
 												searchMode
 												selectedValues={selectedAnalyzer ? [selectedAnalyzer] : []}
 												options={analyzers}
-												on:select={e => changeAnalyzer(e)}
+												onselect={e => changeAnalyzer(e)}
 											/>
 										</div>
                                         <div class="line-align-center collection-dropdown">
@@ -334,7 +323,7 @@
                                                 multiSelect
 												selectedValues={selectedDataLoaders}
 												options={dataLoaders}
-												on:select={e => changeDataLoaders(e)}
+												onselect={e => changeDataLoaders(e)}
 											/>
 										</div>
 									</div>
@@ -344,7 +333,7 @@
 							<hr class="mt-2" />
 						  
 							<div class="table-responsive knowledge-table">
-								<Table class="table align-middle table-nowrap table-hover mb-0">
+								<table class="table align-middle table-nowrap table-hover mb-0">
 									<thead>
 										<tr>
                                             {#each columns as column, idx (idx) }
@@ -363,11 +352,11 @@
 											/>
 										{/each}
 									</tbody>
-								</Table>
+								</table>
 							</div>
 						</div>
-					</CardBody>
-				</Card>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index cc31db28..89728b97 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -5,14 +5,6 @@
 	import util from "lodash";
 	import Swal from 'sweetalert2';
 	import { v4 as uuidv4 } from 'uuid';
-	import {
-        Button,
-        Card,
-        CardBody,
-        Input,
-        Table,
-        Tooltip
-    } from '@sveltestrap/sveltestrap';
     import {
         getVectorKnowledgeCollections,
         getVectorKnowledgePageList,
@@ -33,6 +25,7 @@
 	import Loader from '$lib/common/spinners/Loader.svelte';
 	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import {
 		KnowledgeCollectionType,
@@ -48,7 +41,7 @@
 	import AdvancedSearch from '../common/search/advanced-search.svelte';
 	import KnowledgeDocumentUpload from './knowledge-document-upload.svelte';
 	import KnowledgeUploadModal from './knowledge-upload-modal.svelte';
-	
+
 	const pageSize = 8;
   	const duration = 2000;
 	const maxLength = 4096;
@@ -56,80 +49,79 @@
 	const searchLimit = 10;
 	const enableVector = true;
 	const collectionType = KnowledgeCollectionType.Document;
-	
+
 	/** @type {string} */
-	let text = "";
-	let successText = "Done";
-	let errorText = "Error";
-    let confidence = '0.5';
-	let elapsedTime = '';
+	let text = $state("");
+	let successText = $state("Done");
+	let errorText = $state("Error");
+    let confidence = $state('0.5');
+	let elapsedTime = $state('');
 
     /** @type {string} */
-    let selectedCollection;
+    let selectedCollection = $state('');
 
 	/** @type {import('$knowledgeTypes').VectorCollectionDetails | null} */
-	let collectionDetails = null;
+	let collectionDetails = $state(null);
 
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel[]} */
-	let items = [];
+	let items = $state([]);
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let collections = [];
+	let collections = $state([]);
 
 	/** @type {string | null | undefined } */
-	let nextId;
+	let nextId = $state(null);
 
 	/** @type {number | null | undefined} */
-	let totalDataCount;
+	let totalDataCount = $state(undefined);
 
 	/** @type {string} */
-	let editCollection;
+	let editCollection = $state('');
 
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel | null} */
-	let editItem;
+	let editItem = $state(null);
 
 	/** @type {string} */
-	let editModalTitle = "Edit knowledge";
+	let editModalTitle = $state("Edit knowledge");
 
 	/** @type {{ uuid: string, key: string, value: string, data_type: string, checked: boolean }[]} */
-	let searchItems = [{ uuid: uuidv4(), key: '', value: '', data_type: '', checked: true }];
+	let searchItems = $state([{ uuid: uuidv4(), key: '', value: '', data_type: '', checked: true }]);
 	/** @type {string} */
-	let selectedOperator = 'or';
+	let selectedOperator = $state('or');
 	/** @type {import('$knowledgeTypes').VectorFilterGroup[]} */
-	let innerSearchGroups = [];
+	let innerSearchGroups = $state([]);
 
-	let sortField = '';
-	let sortOrder = 'desc';
+	let sortField = $state('');
+	let sortOrder = $state('desc');
 	/** @type {import('$knowledgeTypes').VectorSort?} */
-	let innerSort = {
+	let innerSort = $state({
 		field: '',
 		order: 'desc'
-	};
+	});
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let docProcessors = [];
+	let docProcessors = $state([]);
 
 	/** @type {boolean} */
-    let showDemo = true;
-    let isSearching = false;
-	let searchDone = false;
-	let isFromSearch = false;
-	let isLoading = false;
-	let isLoadingMore = false;
-	let isComplete = false;
-	let isError = false;
-	let isOpenEditKnowledge = false;
-	let isOpenCreateCollection = false;
-	let isOpenIndexModal = false;
-	let textSearch = false;
-	let isAdvSearchOn = false;
-	let disableSearchBtn = false;
-	let isExactSearch = false;
-	let isOpenUploadModal = false;
-	let showDocList = false;
+    let showDemo = $state(true);
+    let isSearching = $state(false);
+	let searchDone = $state(false);
+	let isFromSearch = $state(false);
+	let isLoading = $state(false);
+	let isLoadingMore = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+	let isOpenEditKnowledge = $state(false);
+	let isOpenCreateCollection = $state(false);
+	let isOpenIndexModal = $state(false);
+	let textSearch = $state(false);
+	let isAdvSearchOn = $state(false);
+	let isExactSearch = $state(false);
+	let isOpenUploadModal = $state(false);
+	let showDocList = $state(false);
 
     /** @type {any} */
-    let docUploadrCmp;
+    let docUploadrCmp = $state(null);
 
 	/** @type {{
 	 * startId: string | null,
@@ -149,18 +141,18 @@
 		sort: null
 	};
 
-	$: disableBase = isLoading || isLoadingMore || isSearching;
-    $: disabled = !selectedCollection || disableBase;
-	$: {
-		disableSearchBtn = false;
+	let disableBase = $derived(isLoading || isLoadingMore || isSearching);
+    let disabled = $derived(!selectedCollection || disableBase);
+	let disableSearchBtn = $derived.by(() => {
 		if (!selectedCollection || isSearching || isLoadingMore) {
-			disableSearchBtn = true;
+			return true;
 		} else if (textSearch && searchItems.length > 0) {
-			disableSearchBtn = false;
+			return false;
 		} else if (!text || util.trim(text).length === 0) {
-			disableSearchBtn = true;
+			return true;
 		}
-	}
+		return false;
+	});
 
 
 	onMount(() => {
@@ -251,7 +243,7 @@
 
 	/** @param {KeyboardEvent} e */
 	function pressKey(e) {
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !util.trim(text) || isSearching) {
 			return;
 		}
 
@@ -387,7 +379,7 @@
 				with_vector: enableVector,
 				fields: [],
 				filter_groups: params.filterGroups,
-				order_by: !!params.sort?.field ? params.sort : null
+				order_by: params.sort?.field ? params.sort : null
 			};
 
 			getVectorKnowledgePageList(
@@ -411,11 +403,11 @@
 	}
 
 	function getCollectionDetail() {
-		return new Promise((resolve, reject) => {
+		return new Promise((resolve) => {
 			getVectorCollectionDetails(selectedCollection).then(res => {
 				collectionDetails = res || null;
 				resolve(collectionDetails);
-			}).catch(err => {
+			}).catch(() => {
 				collectionDetails = null;
 				resolve(collectionDetails);
 			});
@@ -497,7 +489,7 @@
 
 	/** @param {any} e */
 	function onKnowledgeDelete(e) {
-		const id = e.detail.id;
+		const id = e.id;
 		isLoading = true;
 		deleteVectorKnowledgeData(selectedCollection, id).then(res => {
 			if (res) {
@@ -527,8 +519,8 @@
 	/** @param {any} e */
 	function onKnowledgeUpdate(e) {
 		editModalTitle = "Edit knowledge";
-		editCollection = e.detail.collection;
-		editItem = e.detail.item;
+		editCollection = e.collection;
+		editItem = e.item;
 		isOpenEditKnowledge = true;
 	}
 
@@ -594,7 +586,7 @@
 			}
 		};
 
-		if (!!editItem) {
+		if (editItem) {
 			updateVectorKnowledgeData(
 				e.id,
 				editCollection,
@@ -683,7 +675,7 @@
 	function changeCollection(e) {
 		const selectedValues = e?.detail?.selecteds || [];
 		selectedCollection = selectedValues[0]?.value;
-        docUploadrCmp?.onCollectionChanged();
+        docUploadrCmp?.handleCollectionChanged();
 		reset();
 	}
 
@@ -760,18 +752,16 @@
 	}
 
     /**
-	 * @param {any} e
 	 * @param {boolean} skipLoader
 	 */
-    function onDocUploaded(e, skipLoader = false) {
+    function onDocUploaded(skipLoader = false) {
         reset(skipLoader);
     }
 
-    /** @param {any} e */
-    function onDocDeleted(e) {
+    /** @param {{ success: boolean }} detail */
+    function onDocDeleted(detail) {
         reset();
-        const success = e.detail.success;
-        if (success) {
+        if (detail.success) {
             successText = "Knowledge document has been deleted!";
             isComplete = true;
             setTimeout(() => {
@@ -786,11 +776,10 @@
         }
     }
 
-	/** @param {any} e */
-    function onDocsReset(e) {
+	/** @param {{ success: boolean }} detail */
+    function onDocsReset(detail) {
         reset();
-        const success = e.detail.success;
-        if (success) {
+        if (detail.success) {
             successText = "Knowledge document has been reset!";
             isComplete = true;
             setTimeout(() => {
@@ -887,8 +876,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Document Knowledge')}" addOn="Knowledge Base" />
-<Breadcrumb pagetitle="{$_('Document Knowledge')}" title="{$_('Knowledge Base')}"/>
+<HeadTitle title={$_('Document Knowledge')} addOn="Knowledge Base" />
+<Breadcrumb pagetitle={$_('Document Knowledge')} title={$_('Knowledge Base')}/>
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -913,7 +902,7 @@
 			KnowledgePayloadName.Text
 		]}
 		toggleModal={() => isOpenEditKnowledge = !isOpenEditKnowledge}
-		confirm={(e) => confirmEdit(e)}
+		confirm={(/** @type {any} */ e) => confirmEdit(e)}
 		cancel={() => toggleKnowledgeEditModal()}
 	/>
 {/if}
@@ -926,7 +915,7 @@
 		collection={selectedCollection}
 		open={isOpenIndexModal}
 		toggleModal={() => isOpenIndexModal = !isOpenIndexModal}
-		confirm={(e) => confirmIndex(e)}
+		confirm={(/** @type {any} */ e) => confirmIndex(e)}
 		cancel={() => toggleIndexModal()}
 	/>
 {/if}
@@ -939,10 +928,10 @@
 	open={isOpenUploadModal}
 	processors={docProcessors}
 	toggleModal={() => toggleUploadModal()}
-	on:docuploaded={(e) => {
+	ondocuploaded={() => {
 		showDocList = false;
 		isOpenUploadModal = false;
-		onDocUploaded(e, true);
+		onDocUploaded(true);
 	}}
 />
 
@@ -950,51 +939,52 @@
 	title={'Create new collection'}
 	open={isOpenCreateCollection}
 	toggleModal={() => toggleCollectionCreate()}
-	confirm={e => confirmCollectionCreate(e)}
+	confirm={(/** @type {any} */ e) => confirmCollectionCreate(e)}
 	cancel={() => toggleCollectionCreate()}
 />
 
 <div class="knowledge-demo-btn mb-4">
 	<div class="demo-btn">
-		<Button
-			color={`${showDemo ? 'danger' : 'primary'}`}
-			on:click={() => toggleDemo()}
+		<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" /></div>
+					<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" /></div>
+					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
 					<div>{'Hide Search'}</div>
 				</div>
 			{/if}
-		</Button>
+		</button>
 
 		{#if showDemo}
 			<div class="knowledge-btn-icon demo-tooltip-icon line-align-center" id="demo-tooltip">
-				<i class="bx bx-info-circle" />
+				<i class="bx bx-info-circle"></i>
 			</div>
-			<Tooltip target="demo-tooltip" placement="top" class="demo-tooltip-note">
+			<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>
 				</ul>
-			</Tooltip>
+			</BotsharpTooltip>
 		{/if}
 	</div>
-	
+
 	<div class="reset-btn">
-		<Button
-			on:click={() => reset()}
+		<button
+			class="btn btn-secondary"
+			onclick={() => reset()}
 		>
 			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset" /></div>
+				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
 				<div>{'Reset'}</div>
 			</div>
-		</Button>
+		</button>
 	</div>
 </div>
 
@@ -1013,8 +1003,8 @@
 						disabled={isSearching}
 						placeholder={'Start searching here...'}
 						bind:value={text}
-						on:keydown={(e) => pressKey(e)}
-					/>
+						onkeydown={(e) => pressKey(e)}
+					></textarea>
 					<div class="text-secondary text-count d-flex justify-content-between">
 						<div>
 							{#if elapsedTime}
@@ -1023,7 +1013,7 @@
 						</div>
 						<div>{text?.length || 0}/{maxLength}</div>
 					</div>
-				
+
                     <div class="mt-3 knowledge-search-footer">
                         <div class="search-input">
                             <div class="line-align-center input-text fw-bold">
@@ -1031,30 +1021,30 @@
                             </div>
 							<div style="display: flex; gap: 5px;">
 								<div class="line-align-center confidence-box">
-									<Input
+									<input
 										type="text"
-										class="text-center"
+										class="form-control text-center"
 										disabled={textSearch}
 										bind:value={confidence}
-										on:keydown={(e) => validateConfidenceInput(e)}
-										on:blur={(e) => changeConfidence(e)}
+										onkeydown={(e) => validateConfidenceInput(e)}
+										onblur={(e) => changeConfidence(e)}
 									/>
 								</div>
 								<div class="step-btn-group">
-									<Button
-										class="btn btn-sm"
-										color="link"
-										on:click={() => stepChangeConfidence('plus', step)}
+									<button
+										class="btn btn-sm btn-link"
+										aria-label="Increase confidence"
+										onclick={() => stepChangeConfidence('plus', step)}
 									>
-										<i class="mdi mdi-chevron-up" />
-									</Button>
-									<Button
-										class="btn btn-sm"
-										color="link"
-										on:click={() => stepChangeConfidence('minus', step)}
+										<i class="mdi mdi-chevron-up"></i>
+									</button>
+									<button
+										class="btn btn-sm btn-link"
+										aria-label="Decrease confidence"
+										onclick={() => stepChangeConfidence('minus', step)}
 									>
-										<i class="mdi mdi-chevron-down" />
-									</Button>
+										<i class="mdi mdi-chevron-down"></i>
+									</button>
 								</div>
 							</div>
                         </div>
@@ -1063,38 +1053,43 @@
 								<span>{'Similarity search'}</span>
 							</div>
 							<div class="line-align-center input-text search-toggle">
-								<Input
-									type="switch"
-									checked={textSearch}
-									disabled={disabled}
-									on:change={e => toggleTextSearch()}
-								/>
+								<div class="form-check form-switch">
+									<input
+										type="checkbox"
+										class="form-check-input"
+										role="switch"
+										checked={textSearch}
+										disabled={disabled}
+										onchange={() => toggleTextSearch()}
+									/>
+								</div>
 							</div>
 							<div class="line-align-center input-text fw-bold">
 								<span>{'Keyword search'}</span>
 							</div>
 						</div>
 						{#if !textSearch}
-						<div class="search-input justify-content-center">
-							<div class="line-align-center">
-								<Input
-									class='input-text fw-bold'
-									type="checkbox"
-									label="Exact search"
-									disabled={disabled}
-									bind:checked={isExactSearch}
-								/>
-							</div>
+						<div class="d-flex align-items-center gap-2">
+							<input
+								type="checkbox"
+								class="form-check-input m-0"
+								id="exact-search-check"
+								disabled={disabled}
+								bind:checked={isExactSearch}
+							/>
+							<label class="form-check-label input-text fw-bold mb-0" for="exact-search-check">
+								Exact search
+							</label>
 						</div>
 						{/if}
                         <div class="line-align-center">
-							<Button
-								color="primary"
+							<button
+								class="btn btn-primary"
 								disabled={disableSearchBtn}
-								on:click={() => search()}
+								onclick={() => search()}
 							>
 								{'Search'}
-							</Button>
+							</button>
                         </div>
                     </div>
 
@@ -1129,16 +1124,16 @@
                 disabled={disabled}
                 bind:this={docUploadrCmp}
 				bind:showDocList={showDocList}
-                on:docuploaded={(e) => onDocUploaded(e, true)}
-                on:docdeleted={(e) => onDocDeleted(e)}
-				on:resetdocs={(e) => onDocsReset(e)}
+                ondocuploaded={() => onDocUploaded(true)}
+                ondocdeleted={(detail) => onDocDeleted(detail)}
+				onresetdocs={(detail) => onDocsReset(detail)}
             />
         {/if}
 
 		<div class="d-md-flex mt-5">
 			<div class="w-100">
-				<Card>
-					<CardBody>
+				<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">
@@ -1156,13 +1151,14 @@
 										data-bs-placement="top"
 										title="Add knowledge"
 									>
-										<Button
+										<button
 											class="btn btn-sm btn-soft-primary knowledge-btn-icon"
 											disabled={disabled}
-											on:click={() => onKnowledgeCreate()}
+											aria-label="Add knowledge"
+											onclick={() => onKnowledgeCreate()}
 										>
-											<i class="mdi mdi-plus" />
-										</Button>
+											<i class="mdi mdi-plus"></i>
+										</button>
 									</div>
 									<div
 										class="line-align-center"
@@ -1170,13 +1166,14 @@
 										data-bs-placement="top"
 										title="Delete all data"
 									>
-										<Button
+										<button
 											class="btn btn-sm btn-soft-danger knowledge-btn-icon"
 											disabled={disabled}
-											on:click={() => onKnowledgeDeleteAll()}
+											aria-label="Delete all data"
+											onclick={() => onKnowledgeDeleteAll()}
 										>
-											<i class="mdi mdi-minus" />
-										</Button>
+											<i class="mdi mdi-minus"></i>
+										</button>
 									</div>
 									<div
 										class="line-align-center"
@@ -1184,13 +1181,14 @@
 										data-bs-placement="top"
 										title="Upload doc"
 									>
-										<Button
+										<button
 											class="btn btn-sm btn-soft-info knowledge-btn-icon"
 											disabled={disabled}
-											on:click={() => toggleUploadModal()}
+											aria-label="Upload doc"
+											onclick={() => toggleUploadModal()}
 										>
-											<i class="mdi mdi-file-upload" />
-										</Button>
+											<i class="mdi mdi-file-upload"></i>
+										</button>
 									</div>
 								</div>
 								<div class="collection-action-container action-container-padding">
@@ -1201,12 +1199,12 @@
 										data-bs-placement="top"
 										title="Create/delete payload indexes"
 									>
-										<Button
+										<button
 											class="btn btn-sm btn-soft-primary"
-											on:click={() => toggleIndexModal()}
+											onclick={() => toggleIndexModal()}
 										>
 											Index
-										</Button>
+										</button>
 									</div>
 									{/if}
 
@@ -1218,7 +1216,7 @@
 												searchMode
 												selectedValues={selectedCollection ? [selectedCollection] : []}
 												options={collections}
-												on:select={e => changeCollection(e)}
+												onselect={e => changeCollection(e)}
 											/>
 										</div>
 									</div>
@@ -1229,13 +1227,14 @@
 											data-bs-placement="top"
 											title="Add collection"
 										>
-											<Button
+											<button
 												class="btn btn-sm btn-soft-primary collection-action-btn"
 												disabled={disableBase}
-												on:click={() => toggleCollectionCreate()}
+												aria-label="Add collection"
+												onclick={() => toggleCollectionCreate()}
 											>
-												<i class="mdi mdi-plus" />
-											</Button>
+												<i class="mdi mdi-plus"></i>
+											</button>
 										</div>
 										<div
 											class="line-align-center"
@@ -1243,22 +1242,23 @@
 											data-bs-placement="top"
 											title="Delete collection"
 										>
-											<Button
+											<button
 												class="btn btn-sm btn-soft-danger collection-action-btn"
 												disabled={disabled}
-												on:click={() => deleteCollection()}
+												aria-label="Delete collection"
+												onclick={() => deleteCollection()}
 											>
-												<i class="mdi mdi-minus" />
-											</Button>
+												<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">
+								<table class="table align-middle table-nowrap table-hover mb-0">
 									<thead>
 										<tr>
 											<th scope="col">{$_('Text')}</th>
@@ -1272,32 +1272,32 @@
                                                 collectionType={collectionType}
 												item={item}
 												open={isFromSearch && idx === 0}
-												on:delete={(e) => onKnowledgeDelete(e)}
-												on:update={(e) => onKnowledgeUpdate(e)}
+												ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
+												onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
 											/>
 										{/each}
 									</tbody>
-								</Table>
-						  
+								</table>
+
 								{#if isLoadingMore}
 									<div class="knowledge-loader mt-4">
 										<Loader size={25} disableDefaultStyles />
 									</div>
 								{:else if !!nextId}
 									<div class="mt-4 text-center">
-										<Button
+										<button
 											class="btn btn-soft-primary"
 											disabled={disabled}
-											on:click={() => loadMore()}
+											onclick={() => loadMore()}
 										>
 											{'Load more'}
-										</Button>
+										</button>
 									</div>
 								{/if}
 							</div>
 						</div>
-					</CardBody>
-				</Card>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
index 787f0c3f..d1361964 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
@@ -1,11 +1,11 @@
 <script>
-    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+    import { onMount, onDestroy } from 'svelte';
     import { fly } from 'svelte/transition';
-	import { Tooltip, Button, Input } from '@sveltestrap/sveltestrap';
     import { PUBLIC_SERVICE_URL } from '$env/static/public';
     import Swal from 'sweetalert2';
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
+    import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
     import FileDropZone from '$lib/common/files/FileDropZone.svelte';
     import FileGallery from '$lib/common/files/FileGallery.svelte';
     import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
@@ -22,8 +22,6 @@
     } from '$lib/services/knowledge-base-service';
     import KnowledgeUploadResult from './knowledge-upload-result.svelte';
 
-    const svelteDispatch = createEventDispatcher();
-
     const startPage = 1;
     const docPageSize = 8;
     const defaultProcessor = 'botsharp-txt-knowledge';
@@ -40,72 +38,76 @@
 		}
 	};
 
-    /** @type {string} */
-    export let collection;
-
-    /** @type {number} */
-    export let fileLimit = 3;
-
-    /** @type {boolean} */
-    export let showDocList = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {boolean} */
-    export let disableFileUpload = false;
-
-    /** @type {boolean} */
-    export let disableFileDelete = false;
-
-    /** @type {string} */
-    export let accept = ".txt,.pdf";
-
-    /** @type {number} mb */
-    export let fileMaxSize = 10;
-
-    /** @type {() => void} */
-    export const onCollectionChanged = () => {
+    /**
+     * @type {{
+     *   collection: string,
+     *   fileLimit?: number,
+     *   showDocList?: boolean,
+     *   disabled?: boolean,
+     *   disableFileUpload?: boolean,
+     *   disableFileDelete?: boolean,
+     *   accept?: string,
+     *   fileMaxSize?: number,
+     *   onCollectionChanged?: () => void,
+     *   ondocuploaded?: () => void,
+     *   ondocdeleted?: (detail: { success: boolean }) => void,
+     *   onresetdocs?: (detail: { success: boolean }) => void
+     * }}
+     */
+    let {
+        collection,
+        fileLimit = 3,
+        showDocList = $bindable(false),
+        disabled = $bindable(false),
+        disableFileUpload = false,
+        disableFileDelete = false,
+        accept = ".txt,.pdf",
+        fileMaxSize = 10,
+        ondocuploaded = () => {},
+        ondocdeleted = (/** @type {{ success: boolean }} */ _detail) => {},
+        onresetdocs = (/** @type {{ success: boolean }} */ _detail) => {}
+    } = $props();
+
+    /**
+     * Called when collection changes from parent.
+     * Exposed via bind:this on the component.
+     */
+    export function handleCollectionChanged() {
         showDocList = false;
         savedFiles = [];
         reset();
-    };
+    }
 
     /** @type {boolean} */
-    let showUploader = false;
-    let disableFileDrop = false;
-    let isLoading = false;
-    let isLoadingFiles = false;
-    let noMoreDocs = false;
+    let showUploader = $state(false);
+    let isLoading = $state(false);
+    let isLoadingFiles = $state(false);
+    let noMoreDocs = $state(false);
 
-    /** @type {number} */
-    let localFileUploadLimit = 0;
-    let docPage = startPage;
+    let docPage = $state(startPage);
 
     /** @type {any[]} */
-    let uploadFiles = [];
+    let uploadFiles = $state([]);
     /** @type {any[]} */
-    let savedFiles = [];
+    let savedFiles = $state([]);
     /** @type {string[]} */
-    let successFiles = [];
+    let successFiles = $state([]);
     /** @type {string[]} */
-    let failedFiles = [];
+    let failedFiles = $state([]);
 
-    $: {
-        disableFileDrop = uploadFiles.length >= fileLimit;
-        localFileUploadLimit = Math.max(fileLimit - uploadFiles.length, 0);
-    }
+    let disableFileDrop = $derived(uploadFiles.length >= fileLimit);
+    let localFileUploadLimit = $derived(Math.max(fileLimit - uploadFiles.length, 0));
 
-    $: {
+    $effect(() => {
         if (!showDocList) {
             docPage = startPage;
             savedFiles = [];
             noMoreDocs = false;
         }
-    }
+    });
 
     const unsubscribe = knowledgeBaseDocumentStore.subscribe(value => {
-        const savedAttachments = $knowledgeBaseDocumentStore;
+        const savedAttachments = /** @type {any} */ (knowledgeBaseDocumentStore).get?.() || {};
         uploadFiles = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments?.accepted_files || [];
     });
 
@@ -134,7 +136,7 @@
     /** @param {any} e */
     function handleFileDrop(e) {
         reset();
-        const { acceptedFiles } = e.detail;
+        const { acceptedFiles } = e;
         const savedAttachments = $knowledgeBaseDocumentStore;
         const newAttachments = [...savedAttachments?.accepted_files || [], ...acceptedFiles];
         knowledgeBaseDocumentStore.put({
@@ -181,7 +183,7 @@
                     failedFiles = res.failed || [];
                     uploadFiles = [];
                     knowledgeBaseDocumentStore.reset();
-                    svelteDispatch("docuploaded");
+                    ondocuploaded();
 
                     if (showDocList) {
                         docPage = startPage;
@@ -269,9 +271,9 @@
                         docPage = startPage;
                         getKnowledgeDocumentList();
                     }
-                    svelteDispatch("docdeleted", { success: res });
-                }).catch(err => {
-                    svelteDispatch("docdeleted", { success: false });
+                    ondocdeleted({ success: res });
+                }).catch(() => {
+                    ondocdeleted({ success: false });
                 }).finally(() => {
                     disabled = false;
                     reset();
@@ -300,9 +302,9 @@
                         docPage = startPage;
                         getKnowledgeDocumentList();
                     }
-                    svelteDispatch("resetdocs", { success: res });
-                }).catch(err => {
-                    svelteDispatch("resetdocs", { success: false });
+                    onresetdocs({ success: res });
+                }).catch(() => {
+                    onresetdocs({ success: false });
                 }).finally(() => {
                     disabled = false;
                 });
@@ -363,27 +365,30 @@
     out:fly={{ y: -10, duration: 200 }}
 >
     <div class="doc-upload-header text-primary fw-bold">
-        <Input
-            type="switch"
-            class="upload-toggle-btn"
-            disabled={disabled}
-            checked={showUploader}
-            on:change={e => toggleUploader(e)}
-        />
+        <div class="form-check form-switch upload-toggle-btn">
+            <input
+                type="checkbox"
+                class="form-check-input"
+                role="switch"
+                disabled={disabled}
+                checked={showUploader}
+                onchange={e => toggleUploader(e)}
+            />
+        </div>
         <div class="line-align-center">
             <div>{`${showUploader && !disableFileUpload ? 'Upload' : 'View'} Documents`}</div>
         </div>
         {#if showUploader}
             <div class="line-align-center" id="upload-tooltip">
-                <i class="bx bx-info-circle" />
+                <i class="bx bx-info-circle"></i>
             </div>
-            <Tooltip target="upload-tooltip" placement="top" class="demo-tooltip-note">
+            <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>
                 </ul>
-            </Tooltip>
+            </BotsharpTooltip>
         {/if}
     </div>
     {#if showUploader}
@@ -403,31 +408,33 @@
                     showPrefix={true}
                     showSuffix={uploadFiles?.length > 0}
                 >
-                    <FileDropZone
-                        slot="prefix"
-                        accept={accept}
-                        containerClasses={'doc-drop-zone'}
-                        disabled={disabled || disableFileDrop}
-                        fileLimit={localFileUploadLimit}
-                        maxSize={fileMaxSize * 1024 * 1024}
-                        on:drop={e => handleFileDrop(e)}
-                    >
-                        <i class="bx bx-cloud-upload" />
-                    </FileDropZone>
-                    <div
-                        slot="suffix"
-                        class="doc-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"
-                            data-bs-toggle="tooltip"
-                            data-bs-placement="top"
-                            title="Submit"
-                            on:click={() => handleFileSubmit()}
-                        />
-                    </div>
+                    {#snippet prefix()}
+                        <FileDropZone
+                            accept={accept}
+                            containerClasses={'doc-drop-zone'}
+                            disabled={disabled || disableFileDrop}
+                            fileLimit={localFileUploadLimit}
+                            maxSize={fileMaxSize * 1024 * 1024}
+                            ondrop={handleFileDrop}
+                        >
+                            <i class="bx bx-cloud-upload"></i>
+                        </FileDropZone>
+                    {/snippet}
+                    {#snippet suffix()}
+                        <div
+                            class="doc-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"
+                                data-bs-toggle="tooltip"
+                                data-bs-placement="top"
+                                title="Submit"
+                                onclick={() => handleFileSubmit()}
+                            ></i>
+                        </div>
+                    {/snippet}
                 </FileGallery>
             {/if}
 
@@ -437,35 +444,35 @@
             />
 
             <div class="doc-upload-footer" style={`margin-top: ${!disableFileUpload ? '30px;' : '0px;'}`}>
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div class="load-doc-btn">
-                    <Button
+                    <button
                         class={`btn btn-md knowledge-demo-btn ${showDocList ? 'btn-soft-warning' : 'btn-soft-primary'}`}
                         disabled={disabled}
-                        on:click={() => toggleShowDocList()}
+                        onclick={() => toggleShowDocList()}
                     >
                         {#if !showDocList}
                             <div class="btn-content">
-                                <div class="knowledge-btn-icon line-align-center"><i class="bx bx-search-alt" /></div>
+                                <div class="knowledge-btn-icon line-align-center"><i class="bx bx-search-alt"></i></div>
                                 <div>{'View Collection Documents'}</div>
                             </div>
                         {:else}
                             <div class="btn-content">
-                                <div class="knowledge-btn-icon"><i class="bx bx-hide" /></div>
+                                <div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
                                 <div>{'Hide Collection Documents'}</div>
                             </div>
                         {/if}
-                    </Button>
+                    </button>
                     {#if showDocList && !disableFileDelete}
                         <div class="reset-docs-btn line-align-center">
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <!-- svelte-ignore a11y-no-static-element-interactions -->
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
                             <i
                                 class={`bx bx-trash ${disabled || savedFiles.length === 0 ? '' : 'clickable'}`}
                                 data-bs-toggle="tooltip"
                                 data-bs-placement="top"
                                 title="Delete all docs"
-                                on:click={() => handleDeleteAllSavedFiles()}
-                            />
+                                onclick={() => handleDeleteAllSavedFiles()}
+                            ></i>
                         </div>
                     {/if}
                 </div>
@@ -483,17 +490,19 @@
                                     onDownload={idx => handleDownloadSavedFile(idx)}
                                     showSuffix={!noMoreDocs}
                                 >
-                                    <div class="doc-card-btn doc-load-more" slot="suffix">
-                                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                                        <!-- svelte-ignore a11y-no-static-element-interactions -->
-                                        <i
-                                            class="mdi mdi-eye-plus-outline clickable"
-                                            data-bs-toggle="tooltip"
-                                            data-bs-placement="top"
-                                            title="Load more"
-                                            on:click={() => loadMoreDocs()}
-                                        />
-                                    </div>
+                                    {#snippet suffix()}
+                                        <div class="doc-card-btn doc-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"
+                                                data-bs-toggle="tooltip"
+                                                data-bs-placement="top"
+                                                title="Load more"
+                                                onclick={() => loadMoreDocs()}
+                                            ></i>
+                                        </div>
+                                    {/snippet}
                                 </FileGallery>
                             {:else if !isLoadingFiles && savedFiles.length === 0}
                                 <div class="mt-3 text-center">
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 1b99a589..960f0456 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
@@ -1,11 +1,5 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import {
-        Form,
-        Modal,
-        ModalBody,
-        ModalHeader
-    } from "@sveltestrap/sveltestrap";
+    import PlainModal from '$lib/common/modals/PlainModal.svelte';
     import Select from "$lib/common/dropdowns/Select.svelte";
     import FileDropZone from '$lib/common/files/FileDropZone.svelte';
     import FileGallery from '$lib/common/files/FileGallery.svelte';
@@ -13,47 +7,44 @@
 	import { KnowledgeDocSource } from "$lib/helpers/enums";
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 
-    const svelteDispatch = createEventDispatcher();
-
     const duration = 3000;
 
-    /** @type {string} */
-    export let collection;
-
-    /** @type {boolean} */
-    export let open = false;
+    /**
+     * @type {{
+     *   collection: string,
+     *   open?: boolean,
+     *   disabled?: boolean,
+     *   className?: string,
+     *   size?: string,
+     *   accept?: string,
+     *   processors: import('$commonTypes').LabelValuePair[],
+     *   fileMaxSize?: number,
+     *   toggleModal?: () => void,
+     *   ondocuploaded?: () => void
+     * }}
+     */
+    let {
+        collection,
+        open = false,
+        disabled = $bindable(false),
+        className = "",
+        size = 'md',
+        accept = ".txt",
+        processors,
+        fileMaxSize = 10,
+        toggleModal = () => {},
+        ondocuploaded = () => {}
+    } = $props();
 
     /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {string} */
-    export let className = "";
-
-    /** @type {string} */
-    export let size = 'md';
-
-    /** @type {string} */
-    export let accept = ".txt";
-
-    /** @type {import('$commonTypes').LabelValuePair[]} */
-    export let processors;
-
-    /** @type {number} MB */
-    export let fileMaxSize = 10;
-
-    /** @type {() => void} */
-    export let toggleModal;
-
-
-    /** @type {boolean} */
-    let isLoading = false;
-    let isComplete = false;
-    let isError = false;
+    let isLoading = $state(false);
+    let isComplete = $state(false);
+    let isError = $state(false);
 
     /** @type {string | null} */
-    let selectedProcessor = null;
-    let successText = 'Knowledge has been uploaded!';
-    let errorText = 'Error when uploading knowledge!';
+    let selectedProcessor = $state(null);
+    let successText = $state('Knowledge has been uploaded!');
+    let errorText = $state('Error when uploading knowledge!');
 
     /** @param {any} e */
     function changeProcessor(e) {
@@ -62,7 +53,7 @@
 
     /** @param {any} e */
     function handleFileDrop(e) {
-        const { acceptedFiles } = e.detail;
+        const { acceptedFiles } = e;
 
         if (!acceptedFiles
             || acceptedFiles.length === 0
@@ -102,7 +93,7 @@
                     isComplete = false;
                 }, duration);
             }
-            svelteDispatch("docuploaded");
+            ondocuploaded();
         }).catch((err) => {
             console.log('Upload document error:', err);
             isError = true;
@@ -125,22 +116,18 @@
     {errorText}
 />
 
-<Modal
-    class={className}
-    fade
-    size={size}
+<PlainModal
     isOpen={open}
-    toggle={() => toggleModal?.()}
-    unmountOnClose
+    {size}
+    containerClasses={className}
+    toggleModal={() => toggleModal?.()}
 >
-    <ModalHeader toggle={() => toggleModal?.()}>
-        <div>
+    <div>
+        <div class="mb-3">
             <span class="fw-bold">{'Collection: '}</span>
             <span class="text-primary collection-value">{collection}</span>
         </div>
-    </ModalHeader>
-    <ModalBody>
-        <Form>
+        <form>
             <div class="mt-2 d-flex flex-column gap-2">
                 <div class="d-flex gap-1">
                     <div class="fw-bold">{'Document Processor'}</div>
@@ -151,7 +138,7 @@
                     searchMode
                     selectedValues={selectedProcessor ? [selectedProcessor] : []}
                     options={processors}
-                    on:select={e => changeProcessor(e)}
+                    onselect={e => changeProcessor(e)}
                 />
             </div>
             <div class="mt-2 d-flex flex-column gap-2">
@@ -160,30 +147,31 @@
                     showPrefix={true}
                     disabled={disabled || !selectedProcessor}
                 >
-                    <FileDropZone
-                        slot="prefix"
-                        accept={accept}
-                        containerClasses={'doc-drop-zone'}
-                        disabled={!selectedProcessor}
-                        fileLimit={1}
-                        maxSize={fileMaxSize * 1024 * 1024}
-                        on:drop={e => handleFileDrop(e)}
-                    >
-                        <div>
-                            <div class="doc-drop-icon">
-                                <i class="bx bx-cloud-upload" />
-                            </div>
+                    {#snippet prefix()}
+                        <FileDropZone
+                            accept={accept}
+                            containerClasses={'doc-drop-zone'}
+                            disabled={!selectedProcessor}
+                            fileLimit={1}
+                            maxSize={fileMaxSize * 1024 * 1024}
+                            ondrop={handleFileDrop}
+                        >
                             <div>
-                                <ul>
-                                    <li>{'Please select a processor before uploading.'}</li>
-                                    <li>{'File cannot exceed 10 MB.'}</li>
-                                    <li>{`File types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
-                                </ul>
+                                <div class="doc-drop-icon">
+                                    <i class="bx bx-cloud-upload"></i>
+                                </div>
+                                <div>
+                                    <ul>
+                                        <li>{'Please select a processor before uploading.'}</li>
+                                        <li>{'File cannot exceed 10 MB.'}</li>
+                                        <li>{`File types allowed: ${accept?.split(',')?.join(', ') || 'none'}`}</li>
+                                    </ul>
+                                </div>
                             </div>
-                        </div>
-                    </FileDropZone>
+                        </FileDropZone>
+                    {/snippet}
                 </FileGallery>
             </div>
-        </Form>
-    </ModalBody>
-</Modal>
\ No newline at end of file
+        </form>
+    </div>
+</PlainModal>
\ No newline at end of file
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 2be60520..715c7f7c 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-result.svelte
@@ -1,9 +1,14 @@
 <script>
-    /** @type {string[]} */
-    export let successFiles = [];
-
-    /** @type {string[]} */
-    export let failedFiles = [];
+    /**
+     * @type {{
+     *   successFiles?: string[],
+     *   failedFiles?: string[]
+     * }}
+     */
+    let {
+        successFiles = [],
+        failedFiles = []
+    } = $props();
 </script>
 
 {#if successFiles?.length > 0 || failedFiles?.length > 0}
@@ -12,7 +17,7 @@
             {#each successFiles as file, idx (idx)}
                 <div class="doc-upload-result-item text-success">
                     <div>
-                        <i class="mdi mdi-check-circle" />
+                        <i class="mdi mdi-check-circle"></i>
                     </div>
                     <div>
                         {`Uploading document "${file}" is successful.`}
@@ -25,7 +30,7 @@
             {#each failedFiles as file, idx (idx)}
                 <div class="doc-upload-result-item text-danger">
                     <div>
-                        <i class="mdi mdi-alert-circle" />
+                        <i class="mdi mdi-alert-circle"></i>
                     </div>
                     <div>
                         {`Uploading document "${file}" is failed.`}
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index f521aaf6..6919a1b8 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -5,14 +5,6 @@
 	import util from "lodash";
 	import Swal from 'sweetalert2';
 	import { v4 as uuidv4 } from 'uuid';
-	import {
-        Button,
-        Card,
-        CardBody,
-        Input,
-        Table,
-        Tooltip
-    } from '@sveltestrap/sveltestrap';
     import {
         getVectorKnowledgeCollections,
         getVectorKnowledgePageList,
@@ -32,6 +24,7 @@
 	import Loader from '$lib/common/spinners/Loader.svelte';
 	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
 	import Select from '$lib/common/dropdowns/Select.svelte';
 	import {
 		KnowledgeCollectionType,
@@ -45,7 +38,7 @@
 	import CollectionCreateModal from '../common/collection/collection-create-modal.svelte';
 	import AdvancedSearch from '../common/search/advanced-search.svelte';
 	import VectorIndexModal from '../common/indexes/vector-index-modal.svelte';
-	
+
 	const pageSize = 8;
   	const duration = 2000;
 	const maxLength = 4096;
@@ -53,72 +46,71 @@
 	const searchLimit = 10;
 	const enableVector = true;
 	const collectionType = KnowledgeCollectionType.QuestionAnswer;
-	
+
 	/** @type {string} */
-	let text = "";
-	let successText = "Done";
-	let errorText = "Error";
-    let confidence = '0.5';
-	let elapsedTime = '';
+	let text = $state("");
+	let successText = $state("Done");
+	let errorText = $state("Error");
+    let confidence = $state('0.5');
+	let elapsedTime = $state('');
 
 	/** @type {string} */
-	let selectedCollection;
+	let selectedCollection = $state('');
 
 	/** @type {import('$knowledgeTypes').VectorCollectionDetails | null} */
-	let collectionDetails = null;
+	let collectionDetails = $state(null);
 
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel[]} */
-	let items = [];
+	let items = $state([]);
 
 	/** @type {import('$commonTypes').LabelValuePair[]} */
-	let collections = [];
+	let collections = $state([]);
 
 	/** @type {string | null | undefined } */
-	let nextId;
+	let nextId = $state(null);
 
 	/** @type {number | null | undefined} */
-	let totalDataCount;
+	let totalDataCount = $state(undefined);
 
 	/** @type {string} */
-	let editCollection;
+	let editCollection = $state('');
 
 	/** @type {import('$knowledgeTypes').KnowledgeSearchViewModel | null} */
-	let editItem;
+	let editItem = $state(null);
 
 	/** @type {string} */
-	let editModalTitle = "Edit knowledge";
+	let editModalTitle = $state("Edit knowledge");
 
 	/** @type {{ uuid: string, key: string, value: string, data_type: '', checked: boolean }[]} */
-	let searchItems = [{ uuid: uuidv4(), key: '', value: '', data_type: '', checked: true }];
+	let searchItems = $state([{ uuid: uuidv4(), key: '', value: '', data_type: '', checked: true }]);
 	/** @type {string} */
-	let selectedOperator = 'or';
+	let selectedOperator = $state('or');
 	/** @type {import('$knowledgeTypes').VectorFilterGroup[]} */
-	let innerSearchGroups = [];
+	let innerSearchGroups = $state([]);
 
-	let sortField = '';
-	let sortOrder = 'desc';
+	let sortField = $state('');
+	let sortOrder = $state('desc');
 	/** @type {import('$knowledgeTypes').VectorSort?} */
-	let innerSort = {
+	let innerSort = $state({
 		field: '',
 		order: 'desc'
-	};
+	});
 
 	/** @type {boolean} */
-	let showDemo = true;
-	let isSearching = false;
-	let searchDone = false;
-	let isFromSearch = false;
-	let isLoading = false;
-	let isLoadingMore = false;
-	let isComplete = false;
-	let isError = false;
-	let isOpenEditKnowledge = false;
-	let isOpenCreateCollection = false;
-	let isOpenIndexModal = false;
-	let textSearch = false;
-	let isAdvSearchOn = false;
-	let disableSearchBtn = false;
-	let isExactSearch = false;
+	let showDemo = $state(true);
+	let isSearching = $state(false);
+	let searchDone = $state(false);
+	let isFromSearch = $state(false);
+	let isLoading = $state(false);
+	let isLoadingMore = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+	let isOpenEditKnowledge = $state(false);
+	let isOpenCreateCollection = $state(false);
+	let isOpenIndexModal = $state(false);
+	let textSearch = $state(false);
+	let isAdvSearchOn = $state(false);
+	let isExactSearch = $state(false);
 
 	/** @type {{
 	 * startId: string | null,
@@ -138,18 +130,18 @@
 		sort: null
 	};
 
-	$: disableBase = isLoading || isLoadingMore || isSearching;
-    $: disabled = !selectedCollection || disableBase;
-	$: {
-		disableSearchBtn = false;
+	let disableBase = $derived(isLoading || isLoadingMore || isSearching);
+    let disabled = $derived(!selectedCollection || disableBase);
+	let disableSearchBtn = $derived.by(() => {
 		if (!selectedCollection || isSearching || isLoadingMore) {
-			disableSearchBtn = true;
+			return true;
 		} else if (textSearch && searchItems.length > 0) {
-			disableSearchBtn = false;
+			return false;
 		} else if (!text || util.trim(text).length === 0) {
-			disableSearchBtn = true;
+			return true;
 		}
-	}
+		return false;
+	});
 
 	onMount(() => {
 		initData();
@@ -238,7 +230,7 @@
 
 	/** @param {KeyboardEvent} e */
 	function pressKey(e) {
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !util.trim(text) || isSearching) {
 			return;
 		}
 
@@ -375,7 +367,7 @@
 				with_vector: enableVector,
 				fields: [],
 				filter_groups: params.filterGroups,
-				order_by: !!params.sort?.field ? params.sort : null
+				order_by: params.sort?.field ? params.sort : null
 			};
 
 			getVectorKnowledgePageList(
@@ -399,11 +391,11 @@
 	}
 
 	function getCollectionDetail() {
-		return new Promise((resolve, reject) => {
+		return new Promise((resolve) => {
 			getVectorCollectionDetails(selectedCollection).then(res => {
 				collectionDetails = res || null;
 				resolve(collectionDetails);
-			}).catch(err => {
+			}).catch(() => {
 				collectionDetails = null;
 				resolve(collectionDetails);
 			});
@@ -472,7 +464,7 @@
 
 	/** @param {any} e */
 	function onKnowledgeDelete(e) {
-		const id = e.detail.id;
+		const id = e.id;
 		isLoading = true;
 		deleteVectorKnowledgeData(selectedCollection, id).then(res => {
 			if (res) {
@@ -502,8 +494,8 @@
 	/** @param {any} e */
 	function onKnowledgeUpdate(e) {
 		editModalTitle = "Edit knowledge";
-		editCollection = e.detail.collection;
-		editItem = e.detail.item;
+		editCollection = e.collection;
+		editItem = e.item;
 		isOpenEditKnowledge = true;
 	}
 
@@ -573,7 +565,7 @@
 			}
 		};
 
-		if (!!editItem) {
+		if (editItem) {
 			updateVectorKnowledgeData(
 				e.id,
 				editCollection,
@@ -824,8 +816,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Q&A Knowledge')}" addOn="Knowledge Base" />
-<Breadcrumb pagetitle="{$_('Q&A Knowledge')}" title="{$_('Knowledge Base')}"/>
+<HeadTitle title={$_('Q&A Knowledge')} addOn="Knowledge Base" />
+<Breadcrumb pagetitle={$_('Q&A Knowledge')} title={$_('Knowledge Base')}/>
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -852,7 +844,7 @@
 			KnowledgePayloadName.Answer
 		]}
 		toggleModal={() => isOpenEditKnowledge = !isOpenEditKnowledge}
-		confirm={(e) => confirmEdit(e)}
+		confirm={(/** @type {any} */ e) => confirmEdit(e)}
 		cancel={() => toggleKnowledgeEditModal()}
 	/>
 {/if}
@@ -865,7 +857,7 @@
 		collection={selectedCollection}
 		open={isOpenIndexModal}
 		toggleModal={() => isOpenIndexModal = !isOpenIndexModal}
-		confirm={(e) => confirmIndex(e)}
+		confirm={(/** @type {any} */ e) => confirmIndex(e)}
 		cancel={() => toggleIndexModal()}
 	/>
 {/if}
@@ -874,51 +866,52 @@
 	title={'Create new collection'}
 	open={isOpenCreateCollection}
 	toggleModal={() => toggleCollectionCreate()}
-	confirm={e => confirmCollectionCreate(e)}
+	confirm={(/** @type {any} */ e) => confirmCollectionCreate(e)}
 	cancel={() => toggleCollectionCreate()}
 />
 
 <div class="knowledge-demo-btn mb-4">
 	<div class="demo-btn">
-		<Button
-			color={`${showDemo ? 'danger' : 'primary'}`}
-			on:click={() => toggleDemo()}
+		<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" /></div>
+					<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" /></div>
+					<div class="knowledge-btn-icon"><i class="bx bx-hide"></i></div>
 					<div>{'Hide Search'}</div>
 				</div>
 			{/if}
-		</Button>
+		</button>
 
 		{#if showDemo}
 			<div class="knowledge-btn-icon demo-tooltip-icon line-align-center" id="demo-tooltip">
-				<i class="bx bx-info-circle" />
+				<i class="bx bx-info-circle"></i>
 			</div>
-			<Tooltip target="demo-tooltip" placement="top" class="demo-tooltip-note">
+			<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>
 				</ul>
-			</Tooltip>
+			</BotsharpTooltip>
 		{/if}
 	</div>
-	
+
 	<div class="reset-btn">
-		<Button
-			on:click={() => reset()}
+		<button
+			class="btn btn-secondary"
+			onclick={() => reset()}
 		>
 			<div class="btn-content">
-				<div class="knowledge-btn-icon"><i class="bx bx-reset" /></div>
+				<div class="knowledge-btn-icon"><i class="bx bx-reset"></i></div>
 				<div>{'Reset'}</div>
 			</div>
-		</Button>
+		</button>
 	</div>
 </div>
 
@@ -937,8 +930,8 @@
 						disabled={isSearching}
 						placeholder={'Start searching here...'}
 						bind:value={text}
-						on:keydown={(e) => pressKey(e)}
-					/>
+						onkeydown={(e) => pressKey(e)}
+					></textarea>
 					<div class="text-secondary text-count d-flex justify-content-between">
 						<div>
 							{#if elapsedTime}
@@ -947,7 +940,7 @@
 						</div>
 						<div>{text?.length || 0}/{maxLength}</div>
 					</div>
-				
+
                     <div class="mt-3 knowledge-search-footer">
                         <div class="search-input">
                             <div class="line-align-center input-text fw-bold">
@@ -955,30 +948,30 @@
                             </div>
 							<div style="display: flex; gap: 5px;">
 								<div class="line-align-center confidence-box">
-									<Input
+									<input
 										type="text"
-										class="text-center"
+										class="form-control text-center"
 										disabled={textSearch}
 										bind:value={confidence}
-										on:keydown={(e) => validateConfidenceInput(e)}
-										on:blur={(e) => changeConfidence(e)}
+										onkeydown={(e) => validateConfidenceInput(e)}
+										onblur={(e) => changeConfidence(e)}
 									/>
 								</div>
 								<div class="step-btn-group">
-									<Button
-										class="btn btn-sm"
-										color="link"
-										on:click={() => stepChangeConfidence('plus', step)}
+									<button
+										class="btn btn-sm btn-link"
+										aria-label="Increase confidence"
+										onclick={() => stepChangeConfidence('plus', step)}
 									>
-										<i class="mdi mdi-chevron-up" />
-									</Button>
-									<Button
-										class="btn btn-sm"
-										color="link"
-										on:click={() => stepChangeConfidence('minus', step)}
+										<i class="mdi mdi-chevron-up"></i>
+									</button>
+									<button
+										class="btn btn-sm btn-link"
+										aria-label="Decrease confidence"
+										onclick={() => stepChangeConfidence('minus', step)}
 									>
-										<i class="mdi mdi-chevron-down" />
-									</Button>
+										<i class="mdi mdi-chevron-down"></i>
+									</button>
 								</div>
 							</div>
                         </div>
@@ -987,38 +980,43 @@
 								<span>{'Similarity search'}</span>
 							</div>
 							<div class="line-align-center input-text search-toggle">
-								<Input
-									type="switch"
-									checked={textSearch}
-									disabled={disabled}
-									on:change={e => toggleTextSearch()}
-								/>
+								<div class="form-check form-switch">
+									<input
+										type="checkbox"
+										class="form-check-input"
+										role="switch"
+										checked={textSearch}
+										disabled={disabled}
+										onchange={() => toggleTextSearch()}
+									/>
+								</div>
 							</div>
 							<div class="line-align-center input-text fw-bold">
 								<span>{'Keyword search'}</span>
 							</div>
 						</div>
 						{#if !textSearch}
-						<div class="search-input justify-content-center">
-							<div class="line-align-center">
-								<Input
-									class='input-text fw-bold'
-									type="checkbox"
-									label="Exact search"
-									disabled={disabled}
-									bind:checked={isExactSearch}
-								/>
-							</div>
+						<div class="d-flex align-items-center gap-2">
+							<input
+								type="checkbox"
+								class="form-check-input m-0"
+								id="exact-search-check"
+								disabled={disabled}
+								bind:checked={isExactSearch}
+							/>
+							<label class="form-check-label input-text fw-bold mb-0" for="exact-search-check">
+								Exact search
+							</label>
 						</div>
 						{/if}
                         <div class="line-align-center">
-							<Button
-								color="primary"
+							<button
+								class="btn btn-primary"
 								disabled={disableSearchBtn}
-								on:click={() => search()}
+								onclick={() => search()}
 							>
 								{'Search'}
-							</Button>
+							</button>
                         </div>
                     </div>
 
@@ -1045,8 +1043,8 @@
 		{/if}
 		<div class="d-md-flex mt-5">
 			<div class="w-100">
-				<Card>
-					<CardBody>
+				<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">
@@ -1064,13 +1062,14 @@
 										data-bs-placement="top"
 										title="Add knowledge"
 									>
-                                        <Button
+                                        <button
                                             class="btn btn-sm btn-soft-primary knowledge-btn-icon"
 											disabled={disabled}
-                                            on:click={() => onKnowledgeCreate()}
+											aria-label="Add knowledge"
+                                            onclick={() => onKnowledgeCreate()}
                                         >
-                                            <i class="mdi mdi-plus" />
-                                        </Button>
+                                            <i class="mdi mdi-plus"></i>
+                                        </button>
 									</div>
 									<div
 										class="line-align-center"
@@ -1078,27 +1077,28 @@
 										data-bs-placement="top"
 										title="Delete all data"
 									>
-                                        <Button
+                                        <button
                                             class="btn btn-sm btn-soft-danger knowledge-btn-icon"
 											disabled={disabled}
-                                            on:click={() => onKnowledgeDeleteAll()}
+											aria-label="Delete all data"
+                                            onclick={() => onKnowledgeDeleteAll()}
                                         >
-                                            <i class="mdi mdi-minus" />
-                                        </Button>
+                                            <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
+										<button
 											class="btn btn-sm btn-soft-primary"
 											data-bs-toggle="tooltip"
 											data-bs-placement="top"
 											title="Create/delete payload indexes"
-											on:click={() => toggleIndexModal()}
+											onclick={() => toggleIndexModal()}
 										>
 											Index
-										</Button>
+										</button>
 									</div>
 									{/if}
 
@@ -1110,7 +1110,7 @@
 												searchMode
 												selectedValues={selectedCollection ? [selectedCollection] : []}
 												options={collections}
-												on:select={e => changeCollection(e)}
+												onselect={e => changeCollection(e)}
 											/>
 										</div>
 									</div>
@@ -1121,13 +1121,14 @@
 											data-bs-placement="top"
 											title="Add collection"
 										>
-											<Button
+											<button
 												class="btn btn-sm btn-soft-primary collection-action-btn"
 												disabled={disableBase}
-												on:click={() => toggleCollectionCreate()}
+												aria-label="Add collection"
+												onclick={() => toggleCollectionCreate()}
 											>
-												<i class="mdi mdi-plus" />
-											</Button>
+												<i class="mdi mdi-plus"></i>
+											</button>
 										</div>
 										<div
 											class="line-align-center"
@@ -1135,22 +1136,23 @@
 											data-bs-placement="top"
 											title="Delete collection"
 										>
-											<Button
+											<button
 												class="btn btn-sm btn-soft-danger collection-action-btn"
 												disabled={disabled}
-												on:click={() => deleteCollection()}
+												aria-label="Delete collection"
+												onclick={() => deleteCollection()}
 											>
-												<i class="mdi mdi-minus" />
-											</Button>
+												<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">
+								<table class="table align-middle table-nowrap table-hover mb-0">
 									<thead>
 										<tr>
 											<th scope="col">{$_('Question')}</th>
@@ -1165,32 +1167,32 @@
 												collectionType={collectionType}
 												item={item}
 												open={isFromSearch && idx === 0}
-												on:delete={(e) => onKnowledgeDelete(e)}
-												on:update={(e) => onKnowledgeUpdate(e)}
+												ondelete={(/** @type {any} */ data) => onKnowledgeDelete(data)}
+												onupdate={(/** @type {any} */ data) => onKnowledgeUpdate(data)}
 											/>
 										{/each}
 									</tbody>
-								</Table>
-						  
+								</table>
+
 								{#if isLoadingMore}
 									<div class="knowledge-loader mt-4">
 										<Loader size={25} disableDefaultStyles />
 									</div>
 								{:else if !!nextId}
 									<div class="mt-4 text-center">
-										<Button
+										<button
 											class="btn btn-soft-primary"
 											disabled={disabled}
-											on:click={() => loadMore()}
+											onclick={() => loadMore()}
 										>
 											{'Load more'}
-										</Button>
+										</button>
 									</div>
 								{/if}
 							</div>
 						</div>
-					</CardBody>
-				</Card>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/page/knowledge-base/relationships/+page.svelte b/src/routes/page/knowledge-base/relationships/+page.svelte
index df88c547..c2bcb919 100644
--- a/src/routes/page/knowledge-base/relationships/+page.svelte
+++ b/src/routes/page/knowledge-base/relationships/+page.svelte
@@ -1,21 +1,25 @@
 <script>
     import { onMount } from 'svelte';
     import { fly } from 'svelte/transition';
-	import { _ } from 'svelte-i18n';
-	import util from "lodash";
-	import { Button } from '@sveltestrap/sveltestrap';
-	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
-	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import { _ } from 'svelte-i18n';
+    import util from "lodash";
+    import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
-	import { searchGraphKnowledge } from '$lib/services/knowledge-base-service';
-    
-	const maxLength = 4096;
+    import { searchGraphKnowledge } from '$lib/services/knowledge-base-service';
 
-    let showDemo = false;
-    let isSearching = false;
-    let searchDone = false;
-    let text = '';
-    let result = '';
+    const maxLength = 4096;
+
+    /** @type {boolean} */
+    let showDemo = $state(false);
+    /** @type {boolean} */
+    let isSearching = $state(false);
+    /** @type {boolean} */
+    let searchDone = $state(false);
+    /** @type {string} */
+    let text = $state('');
+    /** @type {string} */
+    let result = $state('');
 
     onMount(() => {
         showDemo = true;
@@ -26,7 +30,7 @@
 		isSearching = true;
 		searchGraphKnowledge(util.trim(text)).then(res => {
             result = res.result || '';
-		}).catch(err => {
+		}).catch(() => {
             result = 'Error!';
         }).finally(() => {
 			isSearching = false;
@@ -36,7 +40,7 @@
 
     /** @param {KeyboardEvent} e */
 	function pressKey(e) {
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!util.trim(text) || isSearching) {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !util.trim(text) || isSearching) {
 			return;
 		}
 
@@ -49,8 +53,8 @@
 </script>
 
 
-<HeadTitle title="{$_('Relation Knowledge')}" />
-<Breadcrumb pagetitle="{$_('Relation Knowledge')}" title="{$_('Knowledge Base')}"/>
+<HeadTitle title={$_('Relation Knowledge')} />
+<Breadcrumb pagetitle={$_('Relation Knowledge')} title={$_('Knowledge Base')}/>
 
 <div class="d-xl-flex">
 	<div class="w-100">
@@ -67,20 +71,20 @@
                         disabled={isSearching}
                         placeholder={'Start searching here...'}
                         bind:value={text}
-                        on:keydown={(e) => pressKey(e)}
-                    />
+                        onkeydown={(e) => pressKey(e)}
+                    ></textarea>
                     <div class="text-secondary text-end text-count">
                         {text?.length || 0}/{maxLength}
                     </div>
                 
                     <div class="mt-2 text-end">
-                        <Button
-                            color="primary"
+                        <button
+                            class="btn btn-primary"
                             disabled={!text || util.trim(text).length === 0 || isSearching}
-                            on:click={() => search()}
+                            onclick={() => search()}
                         >
                             {'Search'}
-                        </Button>
+                        </button>
                     </div>
                 
                     {#if isSearching}
diff --git a/src/routes/page/knowledge-base/upload-document.svelte b/src/routes/page/knowledge-base/upload-document.svelte
deleted file mode 100644
index ca9c9feb..00000000
--- a/src/routes/page/knowledge-base/upload-document.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-    import { _ } from 'svelte-i18n';
-    import { Input, Button } from "@sveltestrap/sveltestrap";
-
-    /** @type {FileList} */
-    let files;
-
-	$: if (files) {
-		// Note that `files` is of type `FileList`, not an Array:
-		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
-		console.log(files);
-
-		for (const file of files) {
-			console.log(`${file.name}: ${file.size} bytes`);
-		}
-	}
-
-    async function handleFileUpload() {}
-</script>
-
-<div class="input-group">
-    <Input
-        type="file"
-        bind:files
-        class="form-control"
-        aria-describedby="inputGroupFileAddon04"
-        aria-label="{$_('Upload')}"
-    />
-    <Button color="primary" id="inputGroupFileAddon04" disabled={!files} on:click={() => handleFileUpload()}>{$_('Upload')}</Button>
-</div>
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index a0ca8749..70d62eac 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -4,7 +4,7 @@
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import Plugins from './plugin-list.svelte';
-    import { getPlugins } from '$lib/services/plugin-service';
+	import { getPlugins } from '$lib/services/plugin-service';
 	import { PUBLIC_PLUGIN_DEFAULT_ICON } from '$env/static/public';
 	import PlainPagination from '$lib/common/shared/PlainPagination.svelte';
 	import { _ } from 'svelte-i18n';
@@ -21,23 +21,24 @@
 	let isPageMounted = false;
 
 	/** @type {import('$commonTypes').PagedItems<import('$pluginTypes').PluginDefModel>} */
-    let plugins = { items: [], count: 0 };
+	let plugins = $state({ items: [], count: 0 });
 
 	/** @type {import('$pluginTypes').PluginFilter} */
 	const initFilter = {
 		pager: { page: firstPage, size: pageSize, count: 0 }
 	};
 
-    /** @type {import('$pluginTypes').PluginFilter} */
-    let filter = { ... initFilter };
+	/** @type {import('$pluginTypes').PluginFilter} */
+	let filter = $state({ ...initFilter });
 
 	/** @type {import('$commonTypes').Pagination} */
-	let pager = filter.pager;
+	// svelte-ignore state_referenced_locally
+	let pager = $state(filter.pager);
 
 	/** @type {any} */
 	let unsubscriber;
 
-    onMount(async () => {
+	onMount(async () => {
 		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
 			page: $page.url.searchParams.get("page"),
@@ -69,7 +70,7 @@
 
 			getPagedPlugins();
 		});
-    });
+	});
 
 	onDestroy(() => {
 		isPageMounted = false;
@@ -142,8 +143,8 @@
 	}
 </script>
 
-<HeadTitle title="{$_('Plugin')}" />
-<Breadcrumb title="{$_('Plugin')}" pagetitle="{$_('List')}" />
+<HeadTitle title={$_('Plugin')} />
+<Breadcrumb title={$_('Plugin')} pagetitle={$_('List')} />
 
 <Plugins plugins={plugins.items} />
 <PlainPagination pagination={pager} pageTo={pageTo} />
\ 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 175c266b..06006ad4 100644
--- a/src/routes/page/plugin/plugin-list.svelte
+++ b/src/routes/page/plugin/plugin-list.svelte
@@ -1,20 +1,17 @@
 <script>
-	import { _ } from 'svelte-i18n'  
-	import Link from 'svelte-link';
-	import {
-		Card,
-		CardBody,
-		Col,
-		Row,
-	} from '@sveltestrap/sveltestrap';
+	import { _ } from 'svelte-i18n';
 	import { installPlugin, removePlugin } from '$lib/services/plugin-service';
 	import Swal from 'sweetalert2';
 	import { sendToChatBot } from '$lib/helpers/utils/chat';
 	import { CHAT_FRAME_ID } from '$lib/helpers/constants';
 	import { ChatAction } from '$lib/helpers/enums';
 
-    /** @type {import('$pluginTypes').PluginDefModel[]} */
-    export let plugins;
+	/**
+	 * @type {{
+	 *   plugins: import('$pluginTypes').PluginDefModel[]
+	 * }}
+	 */
+	let { plugins } = $props();
 
 	/**
 	 * @param {string} id
@@ -65,13 +62,13 @@
 	}
 </script>
 
-<Row>
+<div class="row">
 	{#each plugins as item}
-		<Col xl={3} md={6} style="margin-bottom: 10px;">
-			<Card style="height: 100%">
-				<CardBody class="d-flex flex-column justify-content-between">
+		<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" /></div>
+						<div><i class="uil uil-heart-alt fs-18"></i></div>
 					</div>
 					<img src={item.icon_url} alt="{item.name}" height="35" width="35" class="mb-3" />
 					<h5 class="fs-17 mb-2">
@@ -92,10 +89,10 @@
 						</li>
 						{' '}
 						<li>
-							<p class="text-muted fs-14 mb-0"><i class="mdi mdi-map-marker" /> {item.assembly}</p>
+							<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" /> $0.0 / month</p>
+							<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">
@@ -108,7 +105,7 @@
 					<div class="mt-2 hstack pt-2 gap-2 border-top">
 						<button
 							class="btn btn-soft-success btn-sm"
-							on:click={() => clickView(item)}
+							onclick={() => clickView(item)}
 						>
 							{$_('View')}
 						</button>
@@ -116,11 +113,11 @@
 							<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" on:click={() => handlePluginStatus(item.id, item.name, !item.enabled)}>{item.enabled ? $_("Remove") : $_("Install")}</button>
+							<button class="btn btn-soft-warning btn-sm" onclick={() => handlePluginStatus(item.id, item.name, !item.enabled)}>{item.enabled ? $_("Remove") : $_("Install")}</button>
 						{/if}
 					</div>
-				</CardBody>
-			</Card>
-		</Col>
+				</div>
+			</div>
+		</div>
 	{/each}
-</Row>
+</div>
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 11d0ccb2..18b7c792 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -1,14 +1,7 @@
 <script>
-    import { onDestroy, onMount } from 'svelte';
-    import {
-		Card,
-		CardBody,
-		Col,
-		Row,
-		Table
-	} from '@sveltestrap/sveltestrap';
-    import { _ } from 'svelte-i18n';
-    import moment from 'moment';
+	import { onDestroy, onMount } from 'svelte';
+	import { _ } from 'svelte-i18n';
+	import moment from 'moment';
 	import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
@@ -17,31 +10,31 @@
 	import { GlobalEvent } from '$lib/helpers/enums';
 	import { getRoleOptions, getRoles, updateRole } from '$lib/services/role-service';
 	import RoleItem from './role-item.svelte';
-	
-    const duration = 3000;
 
-    let isLoading = false;
-	let isComplete = false;
-	let isError = false;
-    let successText = 'Role has been updated!';
-    let errorText = 'Failed to update role!';
+	const duration = 3000;
 
-    /** @type {import('$roleTypes').RoleFilter} */
-    let filter = {};
+	let isLoading = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+	let successText = 'Role has been updated!';
+	let errorText = 'Failed to update role!';
 
-    /** @type {import('$roleTypes').RoleModel[]} */
-    let roleItems = [];
+	/** @type {import('$roleTypes').RoleFilter} */
+	let filter = $state({});
 
-    /** @type {import('$commonTypes').IdName[]} */
-	let agents = [];
+	/** @type {import('$roleTypes').RoleModel[]} */
+	let roleItems = $state([]);
+
+	/** @type {import('$commonTypes').IdName[]} */
+	let agents = $state([]);
 
 	/** @type {string[]} */
-	let roleOptions = [];
+	let roleOptions = $state([]);
 
 	/** @type {any} */
 	let unsubscriber;
 
-    onMount(async () => {
+	onMount(async () => {
 		init();
 
 		unsubscriber = globalEventStore.subscribe((/** @type {import('$commonTypes').GlobalEvent} */ event) => {
@@ -53,7 +46,7 @@
 			};
 			getAllRoles();
 		});
-    });
+	});
 
 	onDestroy(() => {
 		unsubscriber?.();
@@ -71,48 +64,47 @@
 		});
 	}
 
-    function getAllRoles() {
-        roleItems = [];
-        isLoading = true;
-        return new Promise((resolve, reject) => {
-            getRoles(filter).then(res => {
-                refresh(res);
-                resolve(res);
-            }).finally(() => {
-                isLoading = false;
-            });
-        });
+	function getAllRoles() {
+		roleItems = [];
+		isLoading = true;
+		return new Promise((resolve) => {
+			getRoles(filter).then(res => {
+				refresh(res);
+				resolve(res);
+			}).finally(() => {
+				isLoading = false;
+			});
+		});
 	}
 
-    function getPagedAgents() {
-        return new Promise((resolve, reject) => {
-            getAgentOptions().then(res => {
-                agents = res?.map(x => {
-                    return {
-                        id: x.id,
-                        name: x.name
-                    };
-                }) || [];
-                resolve(agents);
-            });
-        });
-    }
-
-    /** @param {import('$roleTypes').RoleModel[]} roles */
-    function refresh(roles) {
+	function getPagedAgents() {
+		return new Promise((resolve) => {
+			getAgentOptions().then(res => {
+				agents = res?.map(x => {
+					return {
+						id: x.id,
+						name: x.name
+					};
+				}) || [];
+				resolve(agents);
+			});
+		});
+	}
+
+	/** @param {import('$roleTypes').RoleModel[]} roles */
+	function refresh(roles) {
 		refreshRoles(roles);
 	}
 
-    /** @param {import('$roleTypes').RoleModel[]} roles */
+	/** @param {import('$roleTypes').RoleModel[]} roles */
 	function refreshRoles(roles) {
-        roleItems = [ ...roles ];
+		roleItems = [ ...roles ];
 	}
 
-    /** @param {any} e */
-    function saveRole(e) {
-        const data = e.detail.updatedData;
-        isLoading = true;
-        updateRole(data).then(res => {
+	/** @param {import('$roleTypes').RoleModel} data */
+	function saveRole(data) {
+		isLoading = true;
+		updateRole(data).then(res => {
 			if (res) {
 				isLoading = false;
 				isComplete = true;
@@ -131,22 +123,22 @@
 				isError = false;
 			}, duration);
 		});
-    }
-
-    /** @param {import('$roleTypes').RoleModel} data */
-    function postUpdate(data) {
-        roleItems = roleItems?.map(x => {
-            if (x.id === data.id) {
-                return { ...data, update_date: moment.utc().toString(), open_detail: true };
-            }
-            return x;
-        }) || [];
-    }
+	}
+
+	/** @param {import('$roleTypes').RoleModel} data */
+	function postUpdate(data) {
+		roleItems = roleItems?.map(x => {
+			if (x.id === data.id) {
+				return { ...data, update_date: moment.utc().toString(), open_detail: true };
+			}
+			return x;
+		}) || [];
+	}
 </script>
 
 
-<HeadTitle title="{$_('Role List')}" />
-<Breadcrumb title="{$_('Management')}" pagetitle="{$_('Roles')}" />
+<HeadTitle title={$_('Role List')} />
+<Breadcrumb title={$_('Management')} pagetitle={$_('Roles')} />
 <LoadingToComplete
 	isLoading={isLoading}
 	isComplete={isComplete}
@@ -155,38 +147,38 @@
 	errorText={errorText}
 />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody class="border-bottom">
+<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>
-			</CardBody>
-			<CardBody>
+			</div>
+			<div class="card-body">
 				<div class="table-responsive thin-scrollbar">
-					<Table class="align-middle nowrap roles-table" bordered>
+					<table class="table table-bordered align-middle nowrap roles-table">
 						<thead>
 							<tr>
 								<th scope="col">{$_('Name')}</th>
 								<th scope="col" class="role-permission-col">{$_('Permissions')}</th>
-                                <th scope="col">{$_('Update Date')}</th>
+								<th scope="col">{$_('Update Date')}</th>
 								<th scope="col">{$_('')}</th>
 							</tr>
 						</thead>
 						<tbody>
 							{#each roleItems as item, idx (idx)}
-                                <RoleItem
-                                    item={item}
-                                    agents={agents}
-                                    open={item.open_detail}
-                                    on:save={e => saveRole(e)}
-                                />
-                            {/each}
+								<RoleItem
+									item={item}
+									agents={agents}
+									open={item.open_detail}
+									onsave={data => saveRole(data)}
+								/>
+							{/each}
 						</tbody>
-					</Table>
+					</table>
 				</div>
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
\ No newline at end of file
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/roles/role-item.svelte b/src/routes/page/roles/role-item.svelte
index c5d322e4..1d06a022 100644
--- a/src/routes/page/roles/role-item.svelte
+++ b/src/routes/page/roles/role-item.svelte
@@ -1,380 +1,366 @@
 <script>
-	import { createEventDispatcher, onMount } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import { Button, Input } from '@sveltestrap/sveltestrap';
-    import { v4 as uuidv4 } from 'uuid';
-    import moment from "moment";
-    import Swal from 'sweetalert2';
-    import Loader from '$lib/common/spinners/Loader.svelte';
+	import { onMount, untrack } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { v4 as uuidv4 } from 'uuid';
+	import moment from "moment";
+	import Swal from 'sweetalert2';
+	import Loader from '$lib/common/spinners/Loader.svelte';
 	import { UserAction } from '$lib/helpers/enums';
 	import { getRoleDetails } from '$lib/services/role-service';
-    
-	
-    const svelteDispatch = createEventDispatcher();
-
-
-    /** @type {import('$roleTypes').RoleModel} */
-    export let item;
-
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {import('$commonTypes').IdName[]} */
-    export let agents = [];
-
-
-    /** @type {boolean} */
-    let isLoading = false;
-
-    /** @type {import('$roleTypes').RoleModel} */
-    let innerItem = { ...item };
-
-    /** @type {import('$roleTypes').RoleAgentInnerAction[]} */
-    let innerActions = [];
-
-    let allActions = [
-        {
-            name: UserAction.Edit,
-            value: UserAction.Edit,
-            checked: false
-        },
-        {
-            name: UserAction.Train,
-            value: UserAction.Train,
-            checked:false
-        },
-        {
-            name: UserAction.Evaluate,
-            value: UserAction.Evaluate,
-            checked:false
-        },
-        {
-            name: UserAction.Chat,
-            value: UserAction.Chat,
-            checked:false
-        }
-    ];
-
-    const colStyle = `flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`;
-
-    $: {
-        allActions = allActions.map(x => {
-            const list = innerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
-            x.checked = list.every(a => !!a.checked);
-            return { ...x };
-        });
-    }
-
-    onMount(() => {
-        initInnerItem();
-        initAgentActions();
-    });
-
-    function initInnerItem() {
-        innerItem = { ...item };
-    }
-
-    function initAgentActions() {
-        const agentActions = innerItem.agent_actions || [];
-        const handledActions = agents.map(x => {
-            const found = agentActions.find(a => a.agent_id === x.id);
-            if (!found) {
-                return {
-                    id: null,
-                    agent_id: x.id,
-                    agent_name: x.name,
-                    actions: allActions.map(a => {
-                        return {
-                            key: uuidv4(),
-                            value: a.value,
-                            checked: false
-                        };
-                    })
-                }
-            }
-
-            const actions = allActions.map(a => {
-                const checked = !!found.actions.find(y => y === a.value) || false;
-                return {
-                    key: uuidv4(),
-                    value: a.value,
-                    checked: checked
-                };
-            });
-
-            return {
-                id: found.id,
-                agent_id: x.id,
-                agent_name: x.name,
-                actions: actions
-            }
-        });
-
-        innerActions = handledActions.filter(Boolean);
-    }
-
-    function toggleRoleDetail() {
-        open = !open;
-        if (open) {
-            if (item.id != null) {
-                isLoading = true;
-                getRoleDetails(item.id).then(res => {
-                    if (!!res) {
-                        innerItem = { ...res };
-                    }
-                    initAgentActions();
-                }).finally(() => {
-                    isLoading = false;
-                });
-            }
-        }
-    }
 
+	/**
+	 * @type {{
+	 *   item: import('$roleTypes').RoleModel,
+	 *   open?: boolean,
+	 *   disabled?: boolean,
+	 *   agents?: import('$commonTypes').IdName[],
+	 *   onsave?: (data: import('$roleTypes').RoleModel) => void
+	 * }}
+	 */
+	let {
+		item,
+		open = $bindable(false),
+		disabled = false,
+		agents = [],
+		onsave
+	} = $props();
+
+	/** @type {boolean} */
+	let isLoading = $state(false);
+
+	/** @type {import('$roleTypes').RoleModel} */
+	let innerItem = $state(/** @type {import('$roleTypes').RoleModel} */ ({}));
+
+	/** @type {import('$roleTypes').RoleAgentInnerAction[]} */
+	let innerActions = $state([]);
+
+	let allActions = $state([
+		{
+			name: UserAction.Edit,
+			value: UserAction.Edit,
+			checked: false
+		},
+		{
+			name: UserAction.Train,
+			value: UserAction.Train,
+			checked: false
+		},
+		{
+			name: UserAction.Evaluate,
+			value: UserAction.Evaluate,
+			checked: false
+		},
+		{
+			name: UserAction.Chat,
+			value: UserAction.Chat,
+			checked: false
+		}
+	]);
+
+	let colStyle = $derived(`flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`);
+
+	$effect(() => {
+		const currentInnerActions = innerActions;
+		untrack(() => {
+			allActions = allActions.map(x => {
+				const list = currentInnerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
+				x.checked = list.every(a => !!a.checked);
+				return { ...x };
+			});
+		});
+	});
+
+	onMount(() => {
+		initInnerItem();
+		initAgentActions();
+	});
+
+	function initInnerItem() {
+		innerItem = { ...item };
+	}
+
+	function initAgentActions() {
+		const agentActions = innerItem.agent_actions || [];
+		const handledActions = agents.map(x => {
+			const found = agentActions.find(a => a.agent_id === x.id);
+			if (!found) {
+				return {
+					id: null,
+					agent_id: x.id,
+					agent_name: x.name,
+					actions: allActions.map(a => {
+						return { key: uuidv4(), value: a.value, checked: false };
+					})
+				}
+			}
+
+			const actions = allActions.map(a => {
+				const checked = !!found.actions.find(y => y === a.value) || false;
+				return { key: uuidv4(), value: a.value, checked: checked };
+			});
+
+			return {
+				id: found.id, agent_id: x.id, agent_name: x.name, actions: actions
+			}
+		});
 
-    /**
+        // @ts-ignore
+		innerActions = handledActions.filter(Boolean);
+	}
+
+	function toggleRoleDetail() {
+		open = !open;
+		if (open) {
+			if (item.id != null) {
+				isLoading = true;
+				getRoleDetails(item.id).then(res => {
+					if (res) {
+						innerItem = { ...res };
+					}
+					initAgentActions();
+				}).finally(() => {
+					isLoading = false;
+				});
+			}
+		}
+	}
+
+	/**
 	 * @param {any} e
 	 * @param {import('$roleTypes').RoleAgentInnerAction} agentActionItem
 	 * @param {any} actionItem
 	 */
-    function checkAction(e, agentActionItem, actionItem) {
-        const checked = e.target.checked;
-        const found = innerActions.find(x => x.agent_id === agentActionItem.agent_id);
-        // @ts-ignore
-        const action = found?.actions?.find(x => x.key === actionItem.key);
-        if (action) {
-            action.checked = checked;
-        }
-
-        innerActions = [ ...innerActions ];
-    }
-
-    /**
+	function checkAction(e, agentActionItem, actionItem) {
+		const checked = e.target.checked;
+		const found = innerActions.find(x => x.agent_id === agentActionItem.agent_id);
+		// @ts-ignore
+		const action = found?.actions?.find(x => x.key === actionItem.key);
+		if (action) {
+			action.checked = checked;
+		}
+		innerActions = [ ...innerActions ];
+	}
+
+	/**
 	 * @param {any} e
-     * @param {any} title
+	 * @param {any} title
 	 */
-    function checkAll(e, title) {
-        const checked = e.target.checked;
-        allActions = allActions.map(x => {
-            if (x.value === title.value) {
-                x.checked = checked;
-            }
-            return { ...x };
-        });
-
-        innerActions = innerActions.map(x => {
-            const actions = x.actions.map(a => {
-                if (a.value === title.value) {
-                    a.checked = checked;
-                }
-                return { ...a };
-            });
-
-            return {
-                ...x,
-                actions: actions
-            };
-        });
-    }
-
-    function save() {
-        Swal.fire({
-            title: 'Are you sure?',
-            text: `Are you sure you want to update role "${item.name}"?`,
-            icon: 'warning',
-            showCancelButton: true,
-            cancelButtonText: 'No',
-            confirmButtonText: 'Yes'
-        }).then(async (result) => {
-            if (result.value) {
-                const data = formatUpdatedData();
-                svelteDispatch("save", {
-                    updatedData: data
-                });
-            }
-        });
-    }
-
-    function formatUpdatedData() {
-        /** @type {any[]} */
-        const list = [];
-        innerActions.forEach(x => {
-            // @ts-ignore
-            const items = x.actions.filter(a => !!a.checked);
-            if (x.id || items.length > 0) {
-                list.push({
-                    ...x,
-                    // @ts-ignore
-                    actions: items.map(i => i.value)
-                });
-            }
-        });
-
-        const updated = {
-            ...innerItem,
-            permissions: innerItem.permissions.filter(x => x?.length > 0),
-            agent_actions: list
-        };
-        innerItem = { ...updated };
-        return updated;
-    }
-
-    function addPermission() {
-        innerItem = {
-            ...innerItem,
-            permissions: [ ...innerItem.permissions, '' ]
-        };
-    }
-
-    /** @param {number} index */
-    function deletePermission(index) {
-        const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
-        innerItem = {
-            ...innerItem,
-            permissions: permissions
-        };
-    }
+	function checkAll(e, title) {
+		const checked = e.target.checked;
+		allActions = allActions.map(x => {
+			if (x.value === title.value) {
+				x.checked = checked;
+			}
+			return { ...x };
+		});
+
+		innerActions = innerActions.map(x => {
+			const actions = x.actions.map(a => {
+				if (a.value === title.value) {
+					a.checked = checked;
+				}
+				return { ...a };
+			});
+			return { ...x, actions: actions };
+		});
+	}
+
+	function save() {
+		Swal.fire({
+			title: 'Are you sure?',
+			text: `Are you sure you want to update role "${item.name}"?`,
+			icon: 'warning',
+			showCancelButton: true,
+			cancelButtonText: 'No',
+			confirmButtonText: 'Yes'
+		}).then(async (result) => {
+			if (result.value) {
+				const data = formatUpdatedData();
+				onsave?.(data);
+			}
+		});
+	}
+
+	function formatUpdatedData() {
+		/** @type {any[]} */
+		const list = [];
+		innerActions.forEach(x => {
+			// @ts-ignore
+			const items = x.actions.filter(a => !!a.checked);
+			if (x.id || items.length > 0) {
+				list.push({
+					...x,
+					// @ts-ignore
+					actions: items.map(i => i.value)
+				});
+			}
+		});
+
+		const updated = {
+			...innerItem,
+			permissions: innerItem.permissions.filter(x => x?.length > 0),
+			agent_actions: list
+		};
+		innerItem = { ...updated };
+		return updated;
+	}
+
+	function addPermission() {
+		innerItem = {
+			...innerItem,
+			permissions: [ ...innerItem.permissions, '' ]
+		};
+	}
+
+	/** @param {number} index */
+	function deletePermission(index) {
+		const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
+		innerItem = {
+			...innerItem,
+			permissions: permissions
+		};
+	}
 </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'}
-        </div>
-    </td>
-    <td>
-        {item.update_date != null ? moment.utc(item.update_date).local().format('MMM D YYYY, hh:mm A') : 'N/A'}
-    </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
-                    class="btn btn-sm btn-soft-warning"
-                    disabled={disabled}
-                    on:click={() => toggleRoleDetail()}
-                >
-                    <i class="bx bxs-edit" />
-                </Button>
-            </li>
-        </ul>
-    </td>
+	<td>{item.name}</td>
+	<td class="role-permission-col">
+		<div class="ellipsis">
+			{item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
+		</div>
+	</td>
+	<td>
+		{item.update_date != null ? moment.utc(item.update_date).local().format('MMM D YYYY, hh:mm A') : 'N/A'}
+	</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>
+	</td>
 </tr>
 
 {#if open}
-    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
-        {#if isLoading}
-            <td colspan="12">
-                <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"
-                            title="Save"
-                            on:click={() => save()}
-                        >
-                            <i class="mdi mdi-content-save-all" />
-                        </div>
-                    </div>
-                    <ul class="basic-info">
-                        <li>
-                            <div class="wrappable">
-                                <span class="fw-bold text-primary">{'Name:'}</span>
-                                <span>{item.name}</span>
-                            </div>
-                        </li>
-                    </ul>
-                    <ul>
-                        <li>
-                            <div class="role-permission-container">
-                                <div class="fw-bold text-primary">{'Permissions:'}</div>
-                                <div class="permission-wrapper">
-                                    {#each innerItem.permissions as permission, index}
-                                        <div class="edit-wrapper">
-                                            <Input
-                                                type="text"
-                                                class="edit-text-box"
-                                                bind:value={permission}
-                                            />
-                                            <div class="line-align-center">
-                                                <i
-                                                    class="bx bxs-no-entry text-danger clickable"
-                                                    role="link"
-                                                    tabindex="0"
-                                                    on:keydown={() => {}}
-                                                    on:click={() => deletePermission(index)}
-                                                />
-                                            </div>
-                                        </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"
-                                                on:keydown={() => {}}
-                                                on:click={() => addPermission()}
-                                            />
-                                        </div>
-                                    {/if}
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-
-                    {#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>
-                                            <Input
-                                                type="checkbox"
-                                                class="action-center"
-                                                checked={title.checked}
-                                                on:change={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="action-center"
-                                                    checked={actionItem.checked}
-                                                    on:change={e => checkAction(e, agentActionItem, actionItem)}
-                                                />
-                                            </div>
-                                        {/each}
-                                    </div>
-                                {/each}
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-            </td>
-        {/if}
-    </tr>
+	<tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+		{#if isLoading}
+			<td colspan="12">
+				<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"
+							title="Save"
+							onclick={() => save()}
+						>
+							<i class="mdi mdi-content-save-all"></i>
+						</div>
+					</div>
+					<ul class="basic-info">
+						<li>
+							<div class="wrappable">
+								<span class="fw-bold text-primary">{'Name:'}</span>
+								<span>{item.name}</span>
+							</div>
+						</li>
+					</ul>
+					<ul>
+						<li>
+							<div class="role-permission-container">
+								<div class="fw-bold text-primary">{'Permissions:'}</div>
+								<div class="permission-wrapper">
+									{#each innerItem.permissions as _, index}
+										<div class="edit-wrapper">
+											<input
+												type="text"
+												class="form-control edit-text-box"
+												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>
+										</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>
+									{/if}
+								</div>
+							</div>
+						</li>
+					</ul>
+
+					{#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>
+											<input
+												type="checkbox"
+												class="form-check-input action-center"
+												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)}
+												/>
+											</div>
+										{/each}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</td>
+		{/if}
+	</tr>
 {/if}
\ No newline at end of file
diff --git a/src/routes/page/setting/+page.svelte b/src/routes/page/setting/+page.svelte
index 8a052fce..cecf3c71 100644
--- a/src/routes/page/setting/+page.svelte
+++ b/src/routes/page/setting/+page.svelte
@@ -2,44 +2,30 @@
     import { onMount } from 'svelte';
     import { _ } from 'svelte-i18n';
     import Swal from 'sweetalert2';
-    import {
-		Card,
-		CardBody,
-		CardText,
-		CardTitle,
-		Col,
-		Nav,
-		NavItem,
-		NavLink,
-		Row,
-		TabContent,
-		TabPane,
-        Button
-	} from '@sveltestrap/sveltestrap';
     import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
     import { getSettings, getSettingDetail } from '$lib/services/setting-service';
     import { JSONEditor } from 'svelte-jsoneditor';
-	import { refreshAgents } from '$lib/services/agent-service';
-	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
-    
+    import { refreshAgents } from '$lib/services/agent-service';
+    import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+
     const duration = 3000;
-    let isLoading = false;
-    let isComplete = false;
-    let isError = false;
-    let successText = '';
-    let errorText = '';
+    let isLoading = $state(false);
+    let isComplete = $state(false);
+    let isError = $state(false);
+    let successText = $state('');
+    let errorText = $state('');
 
-    let selectedTab = '1';
+    let selectedTab = $state('1');
     /** @type {string[]} */
-    let settings = [];
+    let settings = $state([]);
 
-    let content = { json: {} };
+    let content = $state({ json: {} });
 
     onMount(async () => {
-        settings = await getSettings();   
+        settings = await getSettings();
         selectedTab = settings[0];
-        handleGetSettingDetail(selectedTab);         
+        handleGetSettingDetail(selectedTab);
     });
 
     /**
@@ -54,7 +40,7 @@
     }
 
     function readyToRefresh() {
-		// @ts-ignore
+        // @ts-ignore
         Swal.fire({
             title: 'Are you sure?',
             text: "You will migrate all agents data to mongoDb.",
@@ -67,7 +53,7 @@
                 refreshAgentData();
             }
         });
-	}
+    }
 
     const refreshAgentData = () => {
         isLoading = true;
@@ -79,7 +65,7 @@
                 isComplete = false;
                 successText = '';
             }, duration);
-        }).catch(err => {
+        }).catch(() => {
             isLoading = false;
             isComplete = false;
             isError = true;
@@ -92,68 +78,67 @@
     };
 </script>
 
-<HeadTitle title="{$_('Settings')}" />
-<Breadcrumb title="{$_('Settings')}" pagetitle="{$_('Detail')}" />
+<HeadTitle title={$_('Settings')} />
+<Breadcrumb title={$_('Settings')} pagetitle={$_('Detail')} />
 
 <LoadingToComplete
-    isLoading={isLoading}
-    isComplete={isComplete}
-    isError={isError}
-    successText={successText}
-    errorText={errorText}
+    {isLoading}
+    {isComplete}
+    {isError}
+    {successText}
+    {errorText}
 />
 
-<Card>
-    <CardBody>
-        <CardTitle class="h4">{$_('System & Plugin Settings')}</CardTitle>
+<div class="card">
+    <div class="card-body">
+        <h4 class="card-title">{$_('System & Plugin Settings')}</h4>
         <p class="card-title-desc"></p>
 
-        <Nav tabs class="nav-tabs-default nav-justified">
+        <ul class="nav nav-tabs nav-tabs-default nav-justified">
             {#each settings as tab}
-            <NavItem id={tab}>
-                <NavLink
-                    style="cursor: pointer"
-                    on:click={() => handleGetSettingDetail(tab)}
-                    active={selectedTab == tab}
-                >
-                    <span class="d-block d-sm-none">
-                        <i class="fas fa-home" />
-                    </span>
-                    <span class="d-none d-sm-block">{tab}</span>
-                </NavLink>
-            </NavItem>                
+                <li class="nav-item" id={tab}>
+                    <button
+                        class="nav-link {selectedTab === tab ? 'active' : ''}"
+                        style="cursor: pointer"
+                        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>
+                    </button>
+                </li>
             {/each}
-        </Nav>
+        </ul>
 
-        <TabContent class="p-3 text-muted">
+        <div class="tab-content p-3 text-muted">
             {#each settings as tab}
-            <TabPane tabId={tab} class={selectedTab == tab ? 'active' : ''}>
-                <Row>
-                    <Col sm="12">
-                        <CardText class="mb-0">
-                            <div class="my-json-editor">
-                                <JSONEditor bind:content />
+                {#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>
-                        </CardText>
-                    </Col>
-                </Row>
-            </TabPane>
+                        </div>
+                    </div>
+                {/if}
             {/each}
-        </TabContent>
-    </CardBody>
-</Card>
-
+        </div>
+    </div>
+</div>
 
-<Card>
-    <CardBody>
-        <CardTitle class="h4">{$_('Migrate agents from file repository to MongoDB')}</CardTitle>
+<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>
 
-        <Button color="primary" on:click={() => readyToRefresh()} disabled={isLoading}>
-            <i class="bx bx-copy" /> {$_('Start Migration')}
-        </Button>
-    </CardBody>
-</Card>
+        <button class="btn btn-primary" onclick={() => readyToRefresh()} disabled={isLoading}>
+            <i class="bx bx-copy"></i> {$_('Start Migration')}
+        </button>
+    </div>
+</div>
 
 <style>
     .my-json-editor {
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index 3d9c8b9b..4b0e43c7 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -4,19 +4,6 @@
 	import Swal from 'sweetalert2';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-	import {
-		Button,
-		Card,
-		CardBody,
-		Col,
-		Dropdown,
-		DropdownItem,
-		DropdownMenu,
-		DropdownToggle,
-		Input,
-		Row,
-		Table
-	} from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import TablePagination from '$lib/common/shared/TablePagination.svelte';
@@ -42,12 +29,12 @@
 		}
 	};
 
-	let isLoading = false;
-	let isComplete = false;
-	let successText = "Update completed!";
+	let isLoading = $state(false);
+	let isComplete = $state(false);
+	let successText = $state("Update completed!");
 
     /** @type {import('$commonTypes').PagedItems<import('$agentTypes').AgentTaskModel>} */
-    let tasks = { count: 0, items: [] };
+    let tasks = $state({ count: 0, items: [] });
 
 	/** @type {import('$agentTypes').AgentTaskFilter} */
 	const initFilter = {
@@ -55,16 +42,16 @@
 	};
 
     /** @type {import('$agentTypes').AgentTaskFilter} */
-    let filter = { ... initFilter };
+    let filter = $state({ ... initFilter });
 
 	/** @type {import('$commonTypes').Pagination} */
-	let pager = filter.pager;
+	let pager = $state({ page: firstPage, size: pageSize, count: 0 });
 
 	/** @type {import('$agentTypes').AgentTaskSearchOption} */
-	let searchOption = {
+	let searchOption = $state({
 		agentId: null,
 		status: null
-	};
+	});
 
 	const statusOptions = Object.entries(AgentTaskStatus).map(([k, v]) => (
 		{ key: k, value: v }
@@ -77,7 +64,8 @@
 
 		const scrollElements = document.querySelectorAll('.scrollbar');
 		scrollElements.forEach((item) => {
-			const scrollbar = OverlayScrollbars(item, options);
+			// @ts-ignore
+			OverlayScrollbars(item, options);
 		});
     });
 
@@ -164,9 +152,8 @@
 		}
 	}
 
-	/** @param {any} e */
-	function onTaskSaved(e) {
-		const task = e.detail.task;
+	/** @param {import('$agentTypes').AgentTaskModel} task */
+	function onTaskSaved(task) {
 		if (!task) return;
 
 		openSaveModal(task);
@@ -208,9 +195,8 @@
 
 	
 
-	/** @param {any} e */
-	function onTaskDeleted(e) {
-		const task = e.detail.task;
+	/** @param {import('$agentTypes').AgentTaskModel} task */
+	function onTaskDeleted(task) {
 		if (!task) return;
 
 		openDeleteModal(task.id);
@@ -233,86 +219,68 @@
         });
 	}
 
-	/** @param {string} taskId */
-    function handleTaskDeletion(taskId) {
-        /*deleteConversation(conversationId).then(async () => {
-			isLoading = false;
-			isComplete = true;
-			setTimeout(() => {
-				isComplete = false;
-			}, duration);
-			await reloadConversations();
-		}).catch(err => {
-			isLoading = false;
-			isComplete = false;
-			isError = true;
-			setTimeout(() => {
-				isError = false;
-			}, duration);
-		});*/
-    }
+	/** @param {string} _taskId */
+    function handleTaskDeletion(_taskId) {}
 </script>
 
-<HeadTitle title="{$_('Task List')}" />
-<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Task')}" />
+<HeadTitle title={$_('Task List')} />
+<Breadcrumb title={$_('Agent')} pagetitle={$_('Task')} />
 
 <LoadingToComplete
 	isLoading={isLoading}
 	isComplete={isComplete}
 />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody class="border-bottom">
+<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">
-						<!-- <Link class="btn btn-light" on:click={(e) => searchTasks(e)}><i class="mdi mdi-magnify" /></Link> -->
-						<Dropdown class="dropdown d-inline-block">
-							<DropdownToggle type="menu" class="btn" id="dropdownMenuButton1">
-								<i class="mdi mdi-dots-vertical" /></DropdownToggle
-							>
-							<DropdownMenu>
-								<DropdownItem>{$_('Action')}</DropdownItem>
-							</DropdownMenu>
-						</Dropdown>
+						<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>
 				</div>
-			</CardBody>
-			<CardBody class="border-bottom">
-				<Row class="g-3">
-					<Col xxl="5" lg="5">
-						<Input
+			</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 ...')}"
+							placeholder={$_('Search for ...')}
 						/>
-					</Col>
-					<Col xxl="5" lg="5">
-						<select class="form-select" id="idStatus" value={searchOption.status} on:change={e => changeOption(e, 'status')}>
+					</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>
-					</Col>
-					<Col xxl="2" lg="2">
-						<Button
-							class="btn-soft-secondary w-100"
+					</div>
+					<div class="col-xxl-2 col-lg-2">
+						<button
+							class="btn btn-soft-secondary w-100"
 							type="button"
-							color="secondary"
-							on:click={e => searchTasks(e)}
+							onclick={e => searchTasks(e)}
 						>
-							<i class="mdi mdi-filter-outline align-middle" /> {$_('Filter')}
-						</Button>
-					</Col>
-				</Row>
-			</CardBody>
-			<CardBody>
+							<i class="mdi mdi-filter-outline align-middle"></i> {$_('Filter')}
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="card-body">
 				<div class="table-responsive">
-					<Table class="align-middle nowrap" bordered>
+					<table class="table table-bordered align-middle nowrap">
 						<thead>
 							<tr>
 								<th scope="col">{$_('Name')}</th>
@@ -329,15 +297,15 @@
 							{#each tasks.items as task}
 								<TaskItem
 									task={task}
-									on:save={e => onTaskSaved(e)}
-									on:delete={e => onTaskDeleted(e)}
+									onsave={t => onTaskSaved(t)}
+									ondelete={t => onTaskDeleted(t)}
 								/>
 							{/each}
 						</tbody>
-					</Table>
+					</table>
 				</div>
 				<TablePagination pagination={pager} pageTo={pg => pageTo(pg)} />
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
\ No newline at end of file
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/task/[taskId]/+page.svelte b/src/routes/page/task/[taskId]/+page.svelte
index 2d05cc6d..b5b61099 100644
--- a/src/routes/page/task/[taskId]/+page.svelte
+++ b/src/routes/page/task/[taskId]/+page.svelte
@@ -1,18 +1,5 @@
 <script>
-    import { onMount } from 'svelte';
     import ExecutionFlow from './execution-flow.svelte';
-    import { page } from '$app/stores';
-    const params = $page.params;
-    const agentId = $page.url.searchParams.get('agentId')
-    const taskId = params.taskId;
-
-    onMount(async () => {
-        const container = document.getElementById("drawflow");
-        if (container) {
-
-        }
-        
-    }); 
 </script>
 
-<ExecutionFlow /> 
\ No newline at end of file
+<ExecutionFlow />
\ No newline at end of file
diff --git a/src/routes/page/task/[taskId]/execution-flow.svelte b/src/routes/page/task/[taskId]/execution-flow.svelte
index 974a7752..76c45533 100644
--- a/src/routes/page/task/[taskId]/execution-flow.svelte
+++ b/src/routes/page/task/[taskId]/execution-flow.svelte
@@ -1,36 +1,36 @@
 <script>
+    import { onMount } from 'svelte';
     import Drawflow from 'drawflow';
     import 'drawflow/dist/drawflow.min.css';
     import '$lib/drawflow/drawflow.css';
-    import { onMount } from 'svelte';
+    import 'overlayscrollbars/overlayscrollbars.css';
+    import { OverlayScrollbars } from 'overlayscrollbars';
+    import { page } from '$app/state';
+	import { replaceNewLine } from '$lib/helpers/http';
     import { newConversation } from '$lib/services/conversation-service';
     import { conversationStore } from '$lib/helpers/store.js';
     import { getAgentTaskDetail } from '$lib/services/task-service';
     import { sendMessageToHub } from '$lib/services/conversation-service.js';
-	import 'overlayscrollbars/overlayscrollbars.css';
-    import { OverlayScrollbars } from 'overlayscrollbars';
-    import { page } from '$app/stores';
-	import { replaceNewLine } from '$lib/helpers/http';
 
     /** @type {import('$agentTypes').AgentTaskModel} */
-    let task;
+    let task = $state(/** @type {any} */ (undefined));
 
     /** @type {import('$agentTypes').AgentTemplate[]} */
-    let taskNodes = [];
+    let taskNodes = $state([]);
 
     /** @type {Drawflow} */
-    let editor;
+    let editor = $state(/** @type {any} */ (undefined));
 
     /** @type {string} */
-    let tid;
+    let tid = $state('');
     /** @type {string} */
-    let cid;
+    let cid = $state('');
     /** @type {string} */
-    let mid;    
-    let lastPosX = 120;
-    let lastPosY = 0;
+    let mid = $state('');
+    let lastPosX = $state(120);
+    let lastPosY = $state(0);
     const nodeSpaceX = 50, nodeSpaceY = 50;
-    let messageCount = 0;
+    let messageCount = $state(0);
 
     const options = {
 		scrollbars: {
@@ -46,9 +46,10 @@
 
     onMount(async () => {
         const container = document.getElementById("drawflow");
-        container.style.setProperty('--drawflow-node-width', '300px');
 
         if (container) {
+            container.style.setProperty('--drawflow-node-width', '300px');
+
             editor = new Drawflow(container);
             editor.reroute = true;
             editor.reroute_fix_curvature = true;
@@ -63,8 +64,8 @@
                 console.log("Node selected " + id);
             });            
         }
-        const params = $page.params;
-        const agentId = $page.url.searchParams.get('agentId');
+        const params = page.params;
+        const agentId = page.url.searchParams.get('agentId');
         const taskId = params.taskId;
         task = await getAgentTaskDetail(agentId, taskId);
 
@@ -87,7 +88,8 @@
 
         const scrollElements = document.querySelectorAll('.scrollbar');
 		scrollElements.forEach((item) => {
-			const scrollbar = OverlayScrollbars(item, options);
+			// @ts-ignore
+			OverlayScrollbars(item, options);
 		});
 
         messageCount = 0;
@@ -136,26 +138,13 @@
         }
     }
 
-    async function handleRunTaskSequentiallyInServer() {
-        // clean nodes
-        editor.clear();
-        renderTaskNode();
-
-        // new conversation
-        const conversation = await newConversation(task.agent_id, {taskId: task.id});
-        conversationStore.put(conversation);
-        renderConversationNode(conversation);
-        
-        var response = await sendMessageToHub(task.agent_id, conversation.id, task.content);
-        renderMessageNode(task.content, response, true);
-    }
-
     async function handleRunTaskInteractively() {
         // clean nodes
         editor.clear();
         renderTaskNode();
 
         // new conversation
+        // @ts-ignore
         const conversation = await newConversation(task.direct_agent_id, {taskId: task.id});
         conversationStore.put(conversation);
         renderConversationNode(conversation);
@@ -164,6 +153,7 @@
         let steps = task.content.split('\n');
         for (let i = 0; i < steps.length; i++) {
             let step = steps[i];
+            // @ts-ignore
             const response = await sendMessageToHub(task.direct_agent_id, conversation.id, step, { states: ['hide_context=true'] });
             if (response.text.includes("failed")) {
                 renderMessageNode(step, response, false);
@@ -176,9 +166,9 @@
 </script>
 
 <div>
-    <!--<button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute through {task?.agent_name}</button>-->
+    <!--<button class="btn btn-primary me-2" onclick={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute through {task?.agent_name}</button>-->
     {#if task?.direct_agent_id}
-    <button class="btn btn-primary" on:click={handleRunTaskInteractively}><i class="bx bx-rocket"></i> Execute Interactively</button>
+    <button class="btn btn-primary" onclick={handleRunTaskInteractively}><i class="bx bx-rocket"></i> Execute Interactively</button>
     {/if}
 </div>
 
diff --git a/src/routes/page/task/task-item.svelte b/src/routes/page/task/task-item.svelte
index f3c7577c..801181a4 100644
--- a/src/routes/page/task/task-item.svelte
+++ b/src/routes/page/task/task-item.svelte
@@ -1,45 +1,44 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
     import { _ } from 'svelte-i18n';
-    import { Button } from "@sveltestrap/sveltestrap";
 	import { utcToLocal } from "$lib/helpers/datetime";
 	import { replaceNewLine } from "$lib/helpers/http";
 
-    const svelteDispatch = createEventDispatcher();
-
-    /** @type {import('$agentTypes').AgentTaskModel} */
-    export let task;
-
-    /** @type {boolean} */
-    export let disabled = false;
+    /**
+     * @type {{
+     *   task: import('$agentTypes').AgentTaskModel,
+     *   onsave?: (task: import('$agentTypes').AgentTaskModel) => void,
+     *   ondelete?: (task: import('$agentTypes').AgentTaskModel) => void
+     * }}
+     */
+    let {
+        task,
+        onsave,
+        ondelete
+    } = $props();
 
     function toggleTask() {
         task.enabled = !task.enabled;
     }
 
     function handleSaveTask() {
-        svelteDispatch("save", {
-            task: task
-        });
+        onsave?.(task);
     }
 
     function handleDeleteTask() {
-        svelteDispatch("delete", {
-            task: task
-        });
+        ondelete?.(task);
     }
 </script>
 
 <tr>
-    <td scope="row" class="text-primary">{task.name}</td>
+    <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>
     <td>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <!-- svelte-ignore a11y-no-static-element-interactions -->
-        <span class="clickable" on:click={() => toggleTask()}>
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <span class="clickable" onclick={() => toggleTask()}>
             {#if task.enabled}
                 <span class="badge bg-success">{$_("Enabled")}</span>
             {:else}
@@ -51,19 +50,19 @@
     <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">
-                    <i class="mdi mdi-eye-outline" />
+                <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 on:click={() => handleSaveTask()} class="btn btn-sm btn-soft-info">
-                    <i class="mdi mdi-content-save-all" />
-                </Button>
+                <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 on:click={() => handleDeleteTask()} class="btn btn-sm btn-soft-danger">
-                    <i class="mdi mdi-delete-outline" />
-                </Button>
+                <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>
     </td>
diff --git a/src/routes/page/user/me/+page.svelte b/src/routes/page/user/me/+page.svelte
index ee10b37c..0b5f9562 100644
--- a/src/routes/page/user/me/+page.svelte
+++ b/src/routes/page/user/me/+page.svelte
@@ -1,7 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
 	import { PUBLIC_BRAND_NAME } from '$env/static/public';
-	import { Row, Col, Card, CardBody, CardTitle, Table } from '@sveltestrap/sveltestrap';
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 	import FileDropZone from '$lib/common/files/FileDropZone.svelte';
@@ -10,33 +9,28 @@
 	import { userStore } from '$lib/helpers/store';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
 	import { buildUrl } from '$lib/helpers/utils/common';
-	
+
 	/** @type {import('$userTypes').UserModel} */
-	let currentUser;
-	let isLoading = false;
+	let currentUser = $state(/** @type {any} */ (undefined));
 
 	const fileMaxSize = 10 * 1024 * 1024;
 
 	onMount(async () => {
-		isLoading = true;
 		await myInfo()
 			.then((data) => {
 				currentUser = data;
-			})
-			.finally(() => {
-				isLoading = false;
 			});
 	});
 
 	/** @param {any} e */
-    async function handleFileDrop(e) {
-        const { acceptedFiles } = e.detail;
+	async function handleFileDrop(e) {
+		const { acceptedFiles } = e;
 		const file = acceptedFiles[0];
-		if (!!!file) return;
+		if (!file) return;
 
 		await uploadUserAvatar(file);
 		window.location.reload();
-    }
+	}
 
 	/** @param {any} e */
 	function handleAvatarLoad(e) {
@@ -44,24 +38,24 @@
 	}
 </script>
 
-<HeadTitle title="{$_('My Profile')}" />
-<Breadcrumb title="{$_('Home')}" pagetitle="{$_('My Profile')}" />
-<Row>
-	<Col xl={4}>
-		<Card class="overflow-hidden">
+<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">
-				<Row class="row">
-					<Col xs={7}>
+				<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>
-					</Col>
-				</Row>
+					</div>
+				</div>
 			</div>
-			<CardBody class="pt-0">
-				<Row>
-					<Col sm={4}>
+			<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/*"
@@ -71,29 +65,29 @@
 								multiple={false}
 								fileLimit={1}
 								maxSize={fileMaxSize}
-								on:drop={e => handleFileDrop(e)}
+								ondrop={handleFileDrop}
 							>
 								<img
-									src={`${currentUser?.avatar && $userStore?.token ? 
+									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%;"
-									on:error={e => handleAvatarLoad(e)}
+									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>
-					</Col>
-				</Row>
-			</CardBody>
-		</Card>
-		<Card>
-			<CardBody>
-				<CardTitle class="mb-4">{$_('Personal Information')}</CardTitle>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-body">
+				<h4 class="card-title mb-4">{$_('Personal Information')}</h4>
 				<div class="table-responsive">
-					<Table>
+					<table class="table">
 						<tbody>
 							<tr>
 								<th>{$_('First Name')}:</th>
@@ -136,9 +130,9 @@
 								</td>
 							</tr>
 						</tbody>
-					</Table>
+					</table>
 				</div>
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index fd1441fe..e5f45a91 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -1,16 +1,7 @@
 <script>
-    import { onDestroy, onMount } from 'svelte';
-	import { page } from '$app/stores';
-    import {
-		Button,
-		Card,
-		CardBody,
-		Col,
-		Input,
-		Row,
-		Table
-	} from '@sveltestrap/sveltestrap';
-    import { _ } from 'svelte-i18n';
+	import { onDestroy, onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { _ } from 'svelte-i18n';
 	import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
 	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import TablePagination from '$lib/common/shared/TablePagination.svelte';
@@ -27,51 +18,50 @@
 		goToUrl
 	} from '$lib/helpers/utils/common';
 
-	
-    const duration = 3000;
+	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 15;
 	const maxLength = 50;
 
-    const initPager = { page: firstPage, size: pageSize };
+	const initPager = { page: firstPage, size: pageSize };
 
-    let isLoading = false;
-	let isComplete = false;
-	let isError = false;
-	let isPageMounted = false;
-    let successText = 'User has been updated!';
-    let errorText = 'Failed to update user!';
+	let isLoading = $state(false);
+	let isComplete = $state(false);
+	let isError = $state(false);
+	let isPageMounted = $state(false);
+	let successText = 'User has been updated!';
+	let errorText = 'Failed to update user!';
 
-    /** @type {import('$commonTypes').Pagination} */    
-    let pager = { ...initPager, count: 0 };
+	/** @type {import('$commonTypes').Pagination} */
+	let pager = $state({ ...initPager, count: 0 });
 
-    /** @type {import('$userTypes').UserFilter} */
-    let filter = { ... initPager };
+	/** @type {import('$userTypes').UserFilter} */
+	let filter = $state({ ...initPager });
 
-    /** @type {import('$userTypes').UserModel[]} */
-    let userItems = [];
+	/** @type {import('$userTypes').UserModel[]} */
+	let userItems = $state([]);
 
-    /** @type {import('$commonTypes').IdName[]} */
-	let agents = [];
+	/** @type {import('$commonTypes').IdName[]} */
+	let agents = $state([]);
 
 	/** @type {string[]} */
-	let roleOptions = [];
+	let roleOptions = $state([]);
 
 	/** @type {any} */
 	let unsubscriber;
 
-    let searchOption = {
+	let searchOption = $state({
 		userName: '',
 		externalId: '',
 		role: '',
 		type: '',
-	};
+	});
 
-    onMount(async () => {
+	onMount(async () => {
 		isPageMounted = true;
 		const { pageNum, pageSizeNum } = getPagingQueryParams({
-			page: $page.url.searchParams.get("page"),
-			pageSize: $page.url.searchParams.get("pageSize")
+			page: page.url.searchParams.get("page"),
+			pageSize: page.url.searchParams.get("pageSize")
 		}, { defaultPageSize: pageSize });
 
 		filter = {
@@ -94,7 +84,7 @@
 
 			getPagedUsers();
 		});
-    });
+	});
 
 	onDestroy(() => {
 		isPageMounted = false;
@@ -113,42 +103,42 @@
 		});
 	}
 
-    function getPagedUsers() {
-        userItems = [];
-        isLoading = true;
-        return new Promise((resolve, reject) => {
-            getUsers(filter).then(res => {
-                refresh(res);
-                resolve(res);
-            }).finally(() => {
-                isLoading = false;
-            });
-        });
+	function getPagedUsers() {
+		userItems = [];
+		isLoading = true;
+		return new Promise((resolve) => {
+			getUsers(filter).then(res => {
+				refresh(res);
+				resolve(res);
+			}).finally(() => {
+				isLoading = false;
+			});
+		});
 	}
 
-    function getPagedAgents() {
-        return new Promise((resolve, reject) => {
-            getAgentOptions().then(res => {
-                agents = res?.map(x => {
-                    return {
-                        id: x.id,
-                        name: x.name
-                    };
-                }) || [];
-                resolve(agents);
-            });
-        });
-    }
-
-    /** @param {import('$commonTypes').PagedItems<import('$userTypes').UserModel>} users */
-    function refresh(users) {
+	function getPagedAgents() {
+		return new Promise((resolve) => {
+			getAgentOptions().then(res => {
+				agents = res?.map(x => {
+					return {
+						id: x.id,
+						name: x.name
+					};
+				}) || [];
+				resolve(agents);
+			});
+		});
+	}
+
+	/** @param {import('$commonTypes').PagedItems<import('$userTypes').UserModel>} users */
+	function refresh(users) {
 		refreshUsers(users);
 		refreshPager(users.count, filter.page);
 	}
 
-    /** @param {import('$commonTypes').PagedItems<import('$userTypes').UserModel>} users */
+	/** @param {import('$commonTypes').PagedItems<import('$userTypes').UserModel>} users */
 	function refreshUsers(users) {
-        userItems = [ ...users.items ];
+		userItems = [ ...users.items ];
 	}
 
 	/** @param {number} totalItemsCount */
@@ -159,7 +149,7 @@
 			count: totalItemsCount
 		};
 
-		setUrlQueryParams($page.url, [
+		setUrlQueryParams(page.url, [
 			{ key: 'page', value: `${pager.page}` },
 			{ key: 'pageSize', value: `${pager.size}` }
 		], (url) => {
@@ -168,28 +158,28 @@
 		});
 	}
 
-    function search() {
-        prepareFilter();
-        getPagedUsers();
-    }
-
-    function prepareFilter() {
-        const userName = searchOption.userName?.trim();
-        const externalId = searchOption.externalId?.trim();
-        const role = searchOption.role?.trim();
-        const type = searchOption.type?.trim();
-
-        filter = {
-            ...filter,
-            page: firstPage,
-            user_names: !!userName ? [userName] : [],
-            external_ids: !!externalId ? [externalId] : [],
-            roles: !!role ? [role] : [],
-            types: !!type ? [type] : []
-        };
-    }
-
-    /** @param {number} pageNum */
+	function search() {
+		prepareFilter();
+		getPagedUsers();
+	}
+
+	function prepareFilter() {
+		const userName = searchOption.userName?.trim();
+		const externalId = searchOption.externalId?.trim();
+		const role = searchOption.role?.trim();
+		const type = searchOption.type?.trim();
+
+		filter = {
+			...filter,
+			page: firstPage,
+			user_names: userName ? [userName] : [],
+			external_ids: externalId ? [externalId] : [],
+			roles: role ? [role] : [],
+			types: type ? [type] : []
+		};
+	}
+
+	/** @param {number} pageNum */
 	function pageTo(pageNum) {
 		filter = {
 			...filter,
@@ -199,11 +189,10 @@
 		getPagedUsers();
 	}
 
-    /** @param {any} e */
-    function saveUser(e) {
-        const data = e.detail.updatedData;
-        isLoading = true;
-        updateUser(data).then(res => {
+	/** @param {import('$userTypes').UserModel} data */
+	function saveUser(data) {
+		isLoading = true;
+		updateUser(data).then(res => {
 			if (res) {
 				isLoading = false;
 				isComplete = true;
@@ -222,22 +211,22 @@
 				isError = false;
 			}, duration);
 		});
-    }
-
-    /** @param {import('$userTypes').UserModel} data */
-    function postUpdate(data) {
-        userItems = userItems?.map(x => {
-            if (x.id === data.id) {
-                return { ...data, open_detail: true };
-            }
-            return x;
-        }) || [];
-    }
+	}
+
+	/** @param {import('$userTypes').UserModel} data */
+	function postUpdate(data) {
+		userItems = userItems?.map(x => {
+			if (x.id === data.id) {
+				return { ...data, open_detail: true };
+			}
+			return x;
+		}) || [];
+	}
 </script>
 
 
-<HeadTitle title="{$_('User List')}" />
-<Breadcrumb title="{$_('Management')}" pagetitle="{$_('Users')}" />
+<HeadTitle title={$_('User List')} />
+<Breadcrumb title={$_('Management')} pagetitle={$_('Users')} />
 
 <LoadingToComplete
 	isLoading={isLoading}
@@ -247,44 +236,43 @@
 	errorText={errorText}
 />
 
-<Row>
-	<Col lg="12">
-		<Card>
-			<CardBody class="border-bottom">
+<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>
-			</CardBody>
-			<CardBody class="border-bottom">
-				<Row class="g-3">
-					<Col lg="3">
-						<Input bind:value={searchOption.userName} maxlength={maxLength} placeholder={'Search user name...'} />
-					</Col>
-					<Col lg="3">
-						<Input bind:value={searchOption.externalId} maxlength={maxLength} placeholder={'Search external id...'} />
-					</Col>					
-					<Col lg="3">
-						<Input bind:value={searchOption.role} maxlength={maxLength} placeholder={'Search role...'} />
-					</Col>
-					<Col lg="2">
-						<Input bind:value={searchOption.type} maxlength={maxLength} placeholder={'Search type...'} />
-					</Col>
-					<Col lg="1">
-						<Button
+			</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>
+					<div class="col-lg-3">
+						<input class="form-control" bind:value={searchOption.externalId} maxlength={maxLength} placeholder={'Search external id...'} />
+					</div>
+					<div class="col-lg-3">
+						<input class="form-control" bind:value={searchOption.role} maxlength={maxLength} placeholder={'Search role...'} />
+					</div>
+					<div class="col-lg-2">
+						<input class="form-control" bind:value={searchOption.type} maxlength={maxLength} placeholder={'Search type...'} />
+					</div>
+					<div class="col-lg-1">
+						<button
 							type="button"
-							color="secondary"
-							class="btn-soft-secondary w-100"
-							on:click={(e) => search()}
+							class="btn btn-secondary btn-soft-secondary w-100"
+							onclick={() => search()}
 						>
-							<i class="mdi mdi-filter-outline align-middle" />
+							<i class="mdi mdi-filter-outline align-middle"></i>
 							<span class="d-none">{$_('Filter')}</span>
-						</Button>
-					</Col>
-				</Row>
-			</CardBody>
-			<CardBody>
+						</button>
+					</div>
+				</div>
+			</div>
+			<div class="card-body">
 				<div class="table-responsive thin-scrollbar">
-					<Table class="align-middle nowrap users-table" bordered>
+					<table class="table table-bordered align-middle nowrap users-table">
 						<thead>
 							<tr>
 								<th scope="col">{$_('User Name')}</th>
@@ -298,19 +286,19 @@
 						</thead>
 						<tbody>
 							{#each userItems as item, idx (idx)}
-                                <UserItem
-                                    item={item}
-                                    agents={agents}
+								<UserItem
+									item={item}
+									agents={agents}
 									roleOptions={roleOptions}
-                                    open={item.open_detail}
-                                    on:save={e => saveUser(e)}
-                                />
-                            {/each}
+									open={item.open_detail}
+									onsave={data => saveUser(data)}
+								/>
+							{/each}
 						</tbody>
-					</Table>
+					</table>
 				</div>
 				<TablePagination pagination={pager} pageTo={(pn) => pageTo(pn)} />
-			</CardBody>
-		</Card>
-	</Col>
-</Row>
\ No newline at end of file
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/users/user-item.svelte b/src/routes/page/users/user-item.svelte
index e94c53e2..e8016fff 100644
--- a/src/routes/page/users/user-item.svelte
+++ b/src/routes/page/users/user-item.svelte
@@ -1,433 +1,435 @@
 <script>
-	import { createEventDispatcher, onMount } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import { Button, Input } from '@sveltestrap/sveltestrap';
-    import { v4 as uuidv4 } from 'uuid';
-    import Swal from 'sweetalert2';
-    import lodash from "lodash";
-    import Loader from '$lib/common/spinners/Loader.svelte';
+	import { onMount, untrack } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { v4 as uuidv4 } from 'uuid';
+	import Swal from 'sweetalert2';
+	import lodash from "lodash";
+	import Loader from '$lib/common/spinners/Loader.svelte';
 	import { UserAction } from '$lib/helpers/enums';
-    import { getUserDetails } from '$lib/services/user-service';
-	
-
-    const svelteDispatch = createEventDispatcher();
-
-
-    /** @type {import('$userTypes').UserModel} */
-    export let item;
-
-    /** @type {boolean} */
-    export let open = false;
-
-    /** @type {boolean} */
-    export let disabled = false;
-
-    /** @type {import('$commonTypes').IdName[]} */
-    export let agents = [];
-
-    /** @type {string[]} */
-    export let roleOptions = [];
-
-
-    /** @type {boolean} */
-    let isLoading = false;
-
-    /** @type {import('$userTypes').UserModel} */
-    let innerItem = { ...item };
-
-    /** @type {import('$userTypes').UserAgentInnerAction[]} */
-    let innerActions = [];
-
-    let allActions = [
-        {
-            name: UserAction.Edit,
-            value: UserAction.Edit,
-            checked: false
-        },
-        {
-            name: UserAction.Train,
-            value: UserAction.Train,
-            checked:false
-        },
-        {
-            name: UserAction.Evaluate,
-            value: UserAction.Evaluate,
-            checked:false
-        },
-        {
-            name: UserAction.Chat,
-            value: UserAction.Chat,
-            checked:false
-        }
-    ];
-
-    const colStyle = `flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`;
-
-    $: {
-        allActions = allActions.map(x => {
-            const list = innerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
-            x.checked = list.every(a => !!a.checked);
-            return { ...x };
-        });
-    }
-
-    onMount(() => {
-        initInnerItem();
-        initAgentActions();
-    });
-
-    function initInnerItem() {
-        innerItem = { ...item };
-    }
-
-    function initAgentActions() {
-        const agentActions = innerItem.agent_actions || [];
-        const handledActions = agents.map(x => {
-            const found = agentActions.find(a => a.agent_id === x.id);
-            if (!found) {
-                return {
-                    id: null,
-                    agent_id: x.id,
-                    agent_name: x.name,
-                    actions: allActions.map(a => {
-                        return {
-                            key: uuidv4(),
-                            value: a.value,
-                            checked: false
-                        };
-                    })
-                }
-            }
-
-            const actions = allActions.map(a => {
-                const checked = !!found.actions.find(y => y === a.value) || false;
-                return {
-                    key: uuidv4(),
-                    value: a.value,
-                    checked: checked
-                };
-            });
-
-            return {
-                id: found.id,
-                agent_id: x.id,
-                agent_name: x.name,
-                actions: actions
-            }
-        });
-
-        innerActions = handledActions.filter(Boolean);
-    }
-
-    function toggleUserDetail() {
-        open = !open;
-        if (open) {
-            isLoading = true;
-            getUserDetails(item.id).then(res => {
-                innerItem = { ...res };
-                initAgentActions();
-            }).finally(() => {
-                isLoading = false;
-            });
-        }
-    }
-
-
-    /** @param {any} e */
-    function changeRole(e) {
-        const value = e.target.value;
-        innerItem = {
-            ...innerItem,
-            role: value
-        };
-    }
-
-    /**
+	import { getUserDetails } from '$lib/services/user-service';
+
+	/**
+	 * @type {{
+	 *   item: import('$userTypes').UserModel,
+	 *   open?: boolean,
+	 *   disabled?: boolean,
+	 *   agents?: import('$commonTypes').IdName[],
+	 *   roleOptions?: string[],
+	 *   onsave?: (data: import('$userTypes').UserModel) => void
+	 * }}
+	 */
+	let {
+		item,
+		open = $bindable(false),
+		disabled = false,
+		agents = [],
+		roleOptions = [],
+		onsave
+	} = $props();
+
+	/** @type {boolean} */
+	let isLoading = $state(false);
+
+	/** @type {import('$userTypes').UserModel} */
+	let innerItem = $state(/** @type {import('$userTypes').UserModel} */ ({}));
+
+	/** @type {import('$userTypes').UserAgentInnerAction[]} */
+	let innerActions = $state([]);
+
+	let allActions = $state([
+		{
+			name: UserAction.Edit,
+			value: UserAction.Edit,
+			checked: false
+		},
+		{
+			name: UserAction.Train,
+			value: UserAction.Train,
+			checked: false
+		},
+		{
+			name: UserAction.Evaluate,
+			value: UserAction.Evaluate,
+			checked: false
+		},
+		{
+			name: UserAction.Chat,
+			value: UserAction.Chat,
+			checked: false
+		}
+	]);
+
+	let colStyle = $derived(`flex: 0 0 ${allActions.length > 2 ? Math.floor(1 / (allActions.length + 1) * 100) - 1 : 32}%;`);
+
+	$effect(() => {
+		// Track only innerActions as a dependency
+		const currentInnerActions = innerActions;
+		untrack(() => {
+			allActions = allActions.map(x => {
+				const list = currentInnerActions.flatMap(a => a.actions.filter(y => y.value === x.value));
+				x.checked = list.every(a => !!a.checked);
+				return { ...x };
+			});
+		});
+	});
+
+	onMount(() => {
+		initInnerItem();
+		initAgentActions();
+	});
+
+	function initInnerItem() {
+		innerItem = { ...item };
+	}
+
+	function initAgentActions() {
+		const agentActions = innerItem.agent_actions || [];
+		const handledActions = agents.map(x => {
+			const found = agentActions.find(a => a.agent_id === x.id);
+			if (!found) {
+				return {
+					id: null,
+					agent_id: x.id,
+					agent_name: x.name,
+					actions: allActions.map(a => {
+						return {
+							key: uuidv4(),
+							value: a.value,
+							checked: false
+						};
+					})
+				}
+			}
+
+			const actions = allActions.map(a => {
+				const checked = !!found.actions.find(y => y === a.value) || false;
+				return {
+					key: uuidv4(),
+					value: a.value,
+					checked: checked
+				};
+			});
+
+			return {
+				id: found.id,
+				agent_id: x.id,
+				agent_name: x.name,
+				actions: actions
+			}
+		});
+
+		// @ts-ignore
+		innerActions = handledActions.filter(Boolean);
+	}
+
+	function toggleUserDetail() {
+		open = !open;
+		if (open) {
+			isLoading = true;
+			getUserDetails(item.id).then(res => {
+				innerItem = { ...res };
+				initAgentActions();
+			}).finally(() => {
+				isLoading = false;
+			});
+		}
+	}
+
+	/** @param {any} e */
+	function changeRole(e) {
+		const value = e.target.value;
+		innerItem = {
+			...innerItem,
+			role: value
+		};
+	}
+
+	/**
 	 * @param {any} e
 	 * @param {import('$userTypes').UserAgentInnerAction} agentActionItem
 	 * @param {any} actionItem
 	 */
-    function checkAction(e, agentActionItem, actionItem) {
-        const checked = e.target.checked;
-        const found = innerActions.find(x => x.agent_id === agentActionItem.agent_id);
-        // @ts-ignore
-        const action = found?.actions?.find(x => x.key === actionItem.key);
-        if (action) {
-            action.checked = checked;
-        }
-
-        innerActions = [ ...innerActions ];
-    }
-
-    /**
+	function checkAction(e, agentActionItem, actionItem) {
+		const checked = e.target.checked;
+		const found = innerActions.find(x => x.agent_id === agentActionItem.agent_id);
+		// @ts-ignore
+		const action = found?.actions?.find(x => x.key === actionItem.key);
+		if (action) {
+			action.checked = checked;
+		}
+
+		innerActions = [ ...innerActions ];
+	}
+
+	/**
 	 * @param {any} e
-     * @param {any} title
+	 * @param {any} title
 	 */
-    function checkAll(e, title) {
-        const checked = e.target.checked;
-        allActions = allActions.map(x => {
-            if (x.value === title.value) {
-                x.checked = checked;
-            }
-            return { ...x };
-        });
-
-        innerActions = innerActions.map(x => {
-            const actions = x.actions.map(a => {
-                if (a.value === title.value) {
-                    a.checked = checked;
-                }
-                return { ...a };
-            });
-
-            return {
-                ...x,
-                actions: actions
-            };
-        });
-    }
-
-    /** @param {string} id */
-    function save(id) {
-        if (!id) return;
-
-        Swal.fire({
-            title: 'Are you sure?',
-            text: `Are you sure you want to update user "${item.user_name}"?`,
-            icon: 'warning',
-            showCancelButton: true,
-            cancelButtonText: 'No',
-            confirmButtonText: 'Yes'
-        }).then(async (result) => {
-            if (result.value) {
-                const data = formatUpdatedData();
-                svelteDispatch("save", {
-                    updatedData: data
-                });
-            }
-        });
-    }
-
-    function formatUpdatedData() {
-        /** @type {any[]} */
-        const list = [];
-        innerActions.forEach(x => {
-            // @ts-ignore
-            const items = x.actions.filter(a => !!a.checked);
-            if (x.id || items.length > 0) {
-                list.push({
-                    ...x,
-                    // @ts-ignore
-                    actions: items.map(i => i.value)
-                });
-            }
-        });
-
-        const updated = {
-            ...innerItem,
-            role: lodash.trim(innerItem.role),
-            permissions: innerItem.permissions.filter(x => x?.length > 0),
-            agent_actions: list
-        };
-        innerItem = { ...updated };
-        return updated;
-    }
-
-    function addPermission() {
-        innerItem = {
-            ...innerItem,
-            permissions: [ ...innerItem.permissions, '' ]
-        };
-    }
-
-    /** @param {number} index */
-    function deletePermission(index) {
-        const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
-        innerItem = {
-            ...innerItem,
-            permissions: permissions
-        };
-    }
+	function checkAll(e, title) {
+		const checked = e.target.checked;
+		allActions = allActions.map(x => {
+			if (x.value === title.value) {
+				x.checked = checked;
+			}
+			return { ...x };
+		});
+
+		innerActions = innerActions.map(x => {
+			const actions = x.actions.map(a => {
+				if (a.value === title.value) {
+					a.checked = checked;
+				}
+				return { ...a };
+			});
+
+			return {
+				...x,
+				actions: actions
+			};
+		});
+	}
+
+	/** @param {string} id */
+	function save(id) {
+		if (!id) return;
+
+		Swal.fire({
+			title: 'Are you sure?',
+			text: `Are you sure you want to update user "${item.user_name}"?`,
+			icon: 'warning',
+			showCancelButton: true,
+			cancelButtonText: 'No',
+			confirmButtonText: 'Yes'
+		}).then(async (result) => {
+			if (result.value) {
+				const data = formatUpdatedData();
+				onsave?.(data);
+			}
+		});
+	}
+
+	function formatUpdatedData() {
+		/** @type {any[]} */
+		const list = [];
+		innerActions.forEach(x => {
+			// @ts-ignore
+			const items = x.actions.filter(a => !!a.checked);
+			if (x.id || items.length > 0) {
+				list.push({
+					...x,
+					// @ts-ignore
+					actions: items.map(i => i.value)
+				});
+			}
+		});
+
+		const updated = {
+			...innerItem,
+			role: lodash.trim(innerItem.role),
+			permissions: innerItem.permissions.filter(x => x?.length > 0),
+			agent_actions: list
+		};
+		innerItem = { ...updated };
+		return updated;
+	}
+
+	function addPermission() {
+		innerItem = {
+			...innerItem,
+			permissions: [ ...innerItem.permissions, '' ]
+		};
+	}
+
+	/** @param {number} index */
+	function deletePermission(index) {
+		const permissions = innerItem.permissions.filter((_, idx) => idx !== index);
+		innerItem = {
+			...innerItem,
+			permissions: permissions
+		};
+	}
 </script>
 
 <tr in:fly={{ y: -5, duration: 800 }}>
-    <td>{item.user_name}</td>
-    <td>{item.full_name}</td>
-    <td>{item.external_id}</td>
-    <td class="user-plain-col">
-        <div class="ellipsis">{item.role}</div>
-    </td>
-    <td>{item.type}</td>
-    <td class="user-permission-col">
-        <div class="ellipsis">
-            {item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
-        </div>
-    </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
-                    class="btn btn-sm btn-soft-warning"
-                    disabled={disabled}
-                    on:click={() => toggleUserDetail()}
-                >
-                    <i class="bx bxs-edit" />
-                </Button>
-            </li>
-        </ul>
-    </td>
+	<td>{item.user_name}</td>
+	<td>{item.full_name}</td>
+	<td>{item.external_id}</td>
+	<td class="user-plain-col">
+		<div class="ellipsis">{item.role}</div>
+	</td>
+	<td>{item.type}</td>
+	<td class="user-permission-col">
+		<div class="ellipsis">
+			{item.permissions?.length > 0 ? item.permissions.join(', ') : 'N/A'}
+		</div>
+	</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>
+	</td>
 </tr>
 
 {#if open}
-    <tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
-        {#if isLoading}
-            <td colspan="12">
-                <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"
-                            title="Save"
-                            on:click={() => save(item.id)}
-                        >
-                            <i class="mdi mdi-content-save-all" />
-                        </div>
-                    </div>
-                    <ul class="basic-info">
-                        <li>
-                            <div class="wrappable">
-                                <span class="fw-bold text-primary">{'User name:'}</span>
-                                <span>{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>
-                            </div>
-                        </li>
-                        {/if}
-                        {#if item.type}
-                        <li>
-                            <div class="wrappable">
-                                <span class="fw-bold text-primary">{'Type:'}</span>
-                                <span>{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>
-                            </div>
-                        </li>
-                        {/if}
-                        {#if item.role}
-                        <li>
-                            <div class="wrappable inline-edit">
-                                <div class="fw-bold text-primary line-align-center">{'Role:'}</div>
-                                <div class="role-wrapper">
-                                    <Input class="role-select" type="select" value={innerItem.role} on:change={e => changeRole(e)}>
-                                        {#each roleOptions as option}
-                                            <option value={option} selected={option == innerItem.role}>{option}</option>
-                                        {/each}
-                                    </Input>
-                                </div>
-                            </div>
-                        </li>
-                        {/if}
-                    </ul>
-                    <ul>
-                        <li>
-                            <div class="user-permission-container">
-                                <div class="fw-bold text-primary">{'Permissions:'}</div>
-                                <div class="permission-wrapper">
-                                    {#each innerItem.permissions as permission, index}
-                                        <div class="edit-wrapper">
-                                            <Input
-                                                type="text"
-                                                class="edit-text-box"
-                                                bind:value={permission}
-                                            />
-                                            <div class="line-align-center">
-                                                <i
-                                                    class="bx bxs-no-entry text-danger clickable"
-                                                    role="link"
-                                                    tabindex="0"
-                                                    on:keydown={() => {}}
-                                                    on:click={() => deletePermission(index)}
-                                                />
-                                            </div>
-                                        </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"
-                                                on:keydown={() => {}}
-                                                on:click={() => addPermission()}
-                                            />
-                                        </div>
-                                    {/if}
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-
-                    {#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>
-                                            <Input
-                                                type="checkbox"
-                                                class="action-center"
-                                                checked={title.checked}
-                                                on:change={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="action-center"
-                                                    checked={actionItem.checked}
-                                                    on:change={e => checkAction(e, agentActionItem, actionItem)}
-                                                />
-                                            </div>
-                                        {/each}
-                                    </div>
-                                {/each}
-                            </div>
-                        </div>
-                    {/if}
-                </div>
-            </td>
-        {/if}
-    </tr>
+	<tr in:fly={{ y: -5, duration: 800 }} out:fly={{ y: -5, duration: 300 }}>
+		{#if isLoading}
+			<td colspan="12">
+				<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"
+							title="Save"
+							onclick={() => save(item.id)}
+						>
+							<i class="mdi mdi-content-save-all"></i>
+						</div>
+					</div>
+					<ul class="basic-info">
+						<li>
+							<div class="wrappable">
+								<span class="fw-bold text-primary">{'User name:'}</span>
+								<span>{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>
+							</div>
+						</li>
+						{/if}
+						{#if item.type}
+						<li>
+							<div class="wrappable">
+								<span class="fw-bold text-primary">{'Type:'}</span>
+								<span>{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>
+							</div>
+						</li>
+						{/if}
+						{#if item.role}
+						<li>
+							<div class="wrappable inline-edit">
+								<div class="fw-bold text-primary line-align-center">{'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>
+								</div>
+							</div>
+						</li>
+						{/if}
+					</ul>
+					<ul>
+						<li>
+							<div class="user-permission-container">
+								<div class="fw-bold text-primary">{'Permissions:'}</div>
+								<div class="permission-wrapper">
+									{#each innerItem.permissions as _, index}
+										<div class="edit-wrapper">
+											<input
+												type="text"
+												class="form-control edit-text-box"
+												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>
+										</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>
+									{/if}
+								</div>
+							</div>
+						</li>
+					</ul>
+
+					{#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>
+											<input
+												type="checkbox"
+												class="form-check-input action-center"
+												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)}
+												/>
+											</div>
+										{/each}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</td>
+		{/if}
+	</tr>
 {/if}
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index 0be73f51..bf5de71d 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,10 +1,10 @@
 // import adapter from '@sveltejs/adapter-auto';
 import adapter from '@sveltejs/adapter-static';
-// import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// preprocess: vitePreprocess(),
+	preprocess: vitePreprocess(),
 	kit: {
 		alias: {
 			$commonTypes: './src/lib/helpers/types/commonTypes.js',
diff --git a/vite.config.js b/vite.config.js
index ccc8194f..6174f8a9 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,9 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
 	// @ts-ignore
-	plugins: [sveltekit(), AutoRefreshHmr()],
+	plugins: [tailwindcss(), sveltekit(), AutoRefreshHmr()],
 	ssr: {
 		noExternal: ['@popperjs/core']
 	},
@@ -25,7 +26,15 @@ export default defineConfig({
 			"@codemirror/commands",
 			"@codemirror/theme-one-dark"
 		]
-	},	
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				silenceDeprecations: ['import', 'legacy-js-api'],
+				loadPaths: ['node_modules']
+			}
+		}
+	},
 	server: {
 		port: 5015,
 		host: "0.0.0.0",