diff --git a/package-lock.json b/package-lock.json
index 7a7d36c4..8b04f2d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
 			"version": "1.0.0",
 			"dependencies": {
 				"@codemirror/commands": "^6.10.0",
+				"@codemirror/lang-javascript": "^6.2.4",
 				"@codemirror/lang-python": "^6.2.1",
 				"@codemirror/language": "^6.11.3",
 				"@codemirror/state": "^6.5.2",
@@ -117,6 +118,21 @@
 				"@lezer/common": "^1.1.0"
 			}
 		},
+		"node_modules/@codemirror/lang-javascript": {
+			"version": "6.2.4",
+			"resolved": "https://nexus.smsassist.com/repository/npm-group/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+			"integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
+			"license": "MIT",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.0.0",
+				"@codemirror/language": "^6.6.0",
+				"@codemirror/lint": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0",
+				"@lezer/javascript": "^1.0.0"
+			}
+		},
 		"node_modules/@codemirror/lang-json": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
@@ -861,6 +877,17 @@
 				"@lezer/common": "^1.0.0"
 			}
 		},
+		"node_modules/@lezer/javascript": {
+			"version": "1.5.4",
+			"resolved": "https://nexus.smsassist.com/repository/npm-group/@lezer/javascript/-/javascript-1.5.4.tgz",
+			"integrity": "sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==",
+			"license": "MIT",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.1.3",
+				"@lezer/lr": "^1.3.0"
+			}
+		},
 		"node_modules/@lezer/json": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
diff --git a/package.json b/package.json
index 3c8ea925..222400ea 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 	"type": "module",
 	"dependencies": {
 		"@codemirror/commands": "^6.10.0",
+		"@codemirror/lang-javascript": "^6.2.4",
 		"@codemirror/lang-python": "^6.2.1",
 		"@codemirror/language": "^6.11.3",
 		"@codemirror/state": "^6.5.2",
diff --git a/src/lib/common/audio-player/AudioSpeaker.svelte b/src/lib/common/audio-player/AudioSpeaker.svelte
index 4ef689af..d3d1a0b3 100644
--- a/src/lib/common/audio-player/AudioSpeaker.svelte
+++ b/src/lib/common/audio-player/AudioSpeaker.svelte
@@ -2,7 +2,7 @@
 	import { initSpeech, stopAll, clearSpeakerInstantce } from "$lib/common/audio-player/store";
 	import { onMount, onDestroy } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
-	import Stretch from "../Stretch.svelte";
+	import Stretch from "../shared/Stretch.svelte";
 
   /** @type {string} */
   export let text;
diff --git a/src/lib/common/audio-player/MessageAudioPlayer.svelte b/src/lib/common/audio-player/MessageAudioPlayer.svelte
index 01ab9b12..be0bac24 100644
--- a/src/lib/common/audio-player/MessageAudioPlayer.svelte
+++ b/src/lib/common/audio-player/MessageAudioPlayer.svelte
@@ -2,7 +2,7 @@
 	import { stopAll, initAudio, clearAudioInstantce } from "$lib/common/audio-player/store";
 	import { onMount, onDestroy, createEventDispatcher } from "svelte";
   import { v4 as uuidv4 } from 'uuid';
-	import Stretch from "../Stretch.svelte";
+	import Stretch from "../shared/Stretch.svelte";
 
   const svelteDispatch = createEventDispatcher();
 
diff --git a/src/lib/common/FullScreenDropdown.svelte b/src/lib/common/dropdowns/FullScreenDropdown.svelte
similarity index 100%
rename from src/lib/common/FullScreenDropdown.svelte
rename to src/lib/common/dropdowns/FullScreenDropdown.svelte
diff --git a/src/lib/common/LanguageDropdown.svelte b/src/lib/common/dropdowns/LanguageDropdown.svelte
similarity index 94%
rename from src/lib/common/LanguageDropdown.svelte
rename to src/lib/common/dropdowns/LanguageDropdown.svelte
index fc46f544..bc1cffb6 100644
--- a/src/lib/common/LanguageDropdown.svelte
+++ b/src/lib/common/dropdowns/LanguageDropdown.svelte
@@ -5,16 +5,16 @@
 		DropdownMenu,
 		DropdownItem,
 	} from '@sveltestrap/sveltestrap';
-
 	import { setupI18n } from "$lib/helpers/i18n";
-
 	import languages from "$lib/common/data/languages";
 	import { onMount } from "svelte";
 
-	 let selectedLang;
+	/** @type {string} */
+	let selectedLang;
 
 	let isOpen = false;
 
+	/** @param {string} lang */
 	function handleLocaleChange(lang) {
 		setupI18n({ withLocale: lang });
 		selectedLang = lang
diff --git a/src/lib/common/NotificationDropdown.svelte b/src/lib/common/dropdowns/NotificationDropdown.svelte
similarity index 100%
rename from src/lib/common/NotificationDropdown.svelte
rename to src/lib/common/dropdowns/NotificationDropdown.svelte
diff --git a/src/lib/common/ProfileDropdown.svelte b/src/lib/common/dropdowns/ProfileDropdown.svelte
similarity index 100%
rename from src/lib/common/ProfileDropdown.svelte
rename to src/lib/common/dropdowns/ProfileDropdown.svelte
diff --git a/src/lib/common/Select.svelte b/src/lib/common/dropdowns/Select.svelte
similarity index 100%
rename from src/lib/common/Select.svelte
rename to src/lib/common/dropdowns/Select.svelte
diff --git a/src/lib/common/errors/error-500.svelte b/src/lib/common/errors/error-500.svelte
index f6d503d9..5c869655 100644
--- a/src/lib/common/errors/error-500.svelte
+++ b/src/lib/common/errors/error-500.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Link from 'svelte-link';
 	import { Col, Container, Row } from '@sveltestrap/sveltestrap';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
 </script>
 
 <HeadTitle title="500 Error Page" />
diff --git a/src/lib/common/AudioGallery.svelte b/src/lib/common/files/AudioGallery.svelte
similarity index 89%
rename from src/lib/common/AudioGallery.svelte
rename to src/lib/common/files/AudioGallery.svelte
index 17c8c079..658833dc 100644
--- a/src/lib/common/AudioGallery.svelte
+++ b/src/lib/common/files/AudioGallery.svelte
@@ -1,5 +1,5 @@
 <script>
-	import AudioPlayer from './audio-player/AudioPlayer.svelte';
+	import AudioPlayer from '../audio-player/AudioPlayer.svelte';
 
   /** @type {import('$fileTypes').AudioFileModel[]} */
   export let audios = [];
diff --git a/src/lib/common/FileDropZone.svelte b/src/lib/common/files/FileDropZone.svelte
similarity index 100%
rename from src/lib/common/FileDropZone.svelte
rename to src/lib/common/files/FileDropZone.svelte
diff --git a/src/lib/common/FileGallery.svelte b/src/lib/common/files/FileGallery.svelte
similarity index 100%
rename from src/lib/common/FileGallery.svelte
rename to src/lib/common/files/FileGallery.svelte
diff --git a/src/lib/common/MessageFileGallery.svelte b/src/lib/common/files/MessageFileGallery.svelte
similarity index 97%
rename from src/lib/common/MessageFileGallery.svelte
rename to src/lib/common/files/MessageFileGallery.svelte
index 9addf1ee..a3a4f98f 100644
--- a/src/lib/common/MessageFileGallery.svelte
+++ b/src/lib/common/files/MessageFileGallery.svelte
@@ -1,7 +1,7 @@
 <script>
     import { onMount } from 'svelte';
     import { PUBLIC_SERVICE_URL } from '$env/static/public';
-	import FileGallery from '$lib/common/FileGallery.svelte';
+	import FileGallery from '$lib/common/files/FileGallery.svelte';
 	import { userStore } from '$lib/helpers/store';
 	import { isAudio, AUDIO_ICON } from '$lib/helpers/utils/file';
 	import { isExternalUrl } from '$lib/helpers/utils/common';
diff --git a/src/lib/common/DialogModal.svelte b/src/lib/common/modals/DialogModal.svelte
similarity index 100%
rename from src/lib/common/DialogModal.svelte
rename to src/lib/common/modals/DialogModal.svelte
diff --git a/src/lib/common/modals/PlainModal.svelte b/src/lib/common/modals/PlainModal.svelte
new file mode 100644
index 00000000..9ffd6d97
--- /dev/null
+++ b/src/lib/common/modals/PlainModal.svelte
@@ -0,0 +1,36 @@
+<script>
+    import { Modal, ModalBody, ModalHeader } from "@sveltestrap/sveltestrap";
+
+    /** @type {boolean} */
+    export let isOpen;
+
+    /** @type {string} */
+    export let size = 'lg';
+
+    /** @type {string | any} */
+    export let title;
+
+    /** @type {string} */
+    export let containerClasses = '';
+
+    /** @type {string} */
+    export let containerStyles = '';
+
+    /** @type {() => void} */
+    export let toggleModal;
+</script>
+
+<Modal
+    class={containerClasses}
+    style={containerStyles}
+    fade
+    size={size}
+    isOpen={isOpen}
+    header={title}
+    toggle={() => toggleModal()}
+    unmountOnClose
+>
+    <ModalBody>
+        <slot />
+    </ModalBody>
+</Modal>
\ No newline at end of file
diff --git a/src/lib/common/StateModal.svelte b/src/lib/common/modals/StateModal.svelte
similarity index 100%
rename from src/lib/common/StateModal.svelte
rename to src/lib/common/modals/StateModal.svelte
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
index 30fe35a3..845115ba 100644
--- a/src/lib/common/nav-bar/NavItem.svelte
+++ b/src/lib/common/nav-bar/NavItem.svelte
@@ -1,5 +1,5 @@
 <script>
-	import InPlaceEdit from "../InPlaceEdit.svelte";
+	import InPlaceEdit from "../shared/InPlaceEdit.svelte";
 
 
     /** @type {string} */
diff --git a/src/lib/common/Breadcrumb.svelte b/src/lib/common/shared/Breadcrumb.svelte
similarity index 100%
rename from src/lib/common/Breadcrumb.svelte
rename to src/lib/common/shared/Breadcrumb.svelte
diff --git a/src/lib/common/BubbleChat.svelte b/src/lib/common/shared/BubbleChat.svelte
similarity index 100%
rename from src/lib/common/BubbleChat.svelte
rename to src/lib/common/shared/BubbleChat.svelte
diff --git a/src/lib/common/ChartColorsArray.svelte b/src/lib/common/shared/ChartColorsArray.svelte
similarity index 100%
rename from src/lib/common/ChartColorsArray.svelte
rename to src/lib/common/shared/ChartColorsArray.svelte
diff --git a/src/lib/common/shared/CodeScript.svelte b/src/lib/common/shared/CodeScript.svelte
new file mode 100644
index 00000000..4a1c42fe
--- /dev/null
+++ b/src/lib/common/shared/CodeScript.svelte
@@ -0,0 +1,81 @@
+<script>
+    import { onMount, createEventDispatcher } from "svelte";
+    import CodeMirror from "svelte-codemirror-editor";
+    import { keymap } from "@codemirror/view";
+    import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
+    import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
+    import { EditorState } from "@codemirror/state";
+    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 {import("@codemirror/state").Extension[]} */
+    const baseExtensions = [
+        indentUnit.of("    "),
+        EditorState.tabSize.of(4),
+        indentOnInput(),
+        history(),
+        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
+    ];
+
+    /** @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
+            ];
+        }
+    });
+
+    /** @param {any} e */
+    function handleChange(e) {
+        dispatch('change', {
+            text: e.detail
+        });
+    }
+</script>
+
+
+<CodeMirror
+    class={`code-script-container ${containerClasses}`}
+    theme={oneDark}
+    lineWrapping
+    extensions={extensions}
+    value={scriptText}
+    on:change={e => handleChange(e)}
+/>
\ No newline at end of file
diff --git a/src/lib/common/CollapsibleCard.svelte b/src/lib/common/shared/CollapsibleCard.svelte
similarity index 91%
rename from src/lib/common/CollapsibleCard.svelte
rename to src/lib/common/shared/CollapsibleCard.svelte
index 460c270b..80c9902b 100644
--- a/src/lib/common/CollapsibleCard.svelte
+++ b/src/lib/common/shared/CollapsibleCard.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from 'svelte'
+    import { createEventDispatcher } from 'svelte';
     import collapse from 'svelte-collapse';
 
     /** @type {boolean} */
@@ -11,7 +11,7 @@
     /** @type {string} */
     export let easing = 'ease';
 
-    const dispatch = createEventDispatcher()
+    const dispatch = createEventDispatcher();
 
     function handleToggle () {
         open = !open;
diff --git a/src/lib/common/HeadTitle.svelte b/src/lib/common/shared/HeadTitle.svelte
similarity index 100%
rename from src/lib/common/HeadTitle.svelte
rename to src/lib/common/shared/HeadTitle.svelte
diff --git a/src/lib/common/InPlaceEdit.svelte b/src/lib/common/shared/InPlaceEdit.svelte
similarity index 100%
rename from src/lib/common/InPlaceEdit.svelte
rename to src/lib/common/shared/InPlaceEdit.svelte
diff --git a/src/lib/common/Label.svelte b/src/lib/common/shared/Label.svelte
similarity index 100%
rename from src/lib/common/Label.svelte
rename to src/lib/common/shared/Label.svelte
diff --git a/src/lib/common/LiveChatEntry.svelte b/src/lib/common/shared/LiveChatEntry.svelte
similarity index 100%
rename from src/lib/common/LiveChatEntry.svelte
rename to src/lib/common/shared/LiveChatEntry.svelte
diff --git a/src/lib/common/PlainPagination.svelte b/src/lib/common/shared/PlainPagination.svelte
similarity index 100%
rename from src/lib/common/PlainPagination.svelte
rename to src/lib/common/shared/PlainPagination.svelte
diff --git a/src/lib/common/RemoteSearchInput.svelte b/src/lib/common/shared/RemoteSearchInput.svelte
similarity index 100%
rename from src/lib/common/RemoteSearchInput.svelte
rename to src/lib/common/shared/RemoteSearchInput.svelte
diff --git a/src/lib/common/RightSidebar.svelte b/src/lib/common/shared/RightSidebar.svelte
similarity index 99%
rename from src/lib/common/RightSidebar.svelte
rename to src/lib/common/shared/RightSidebar.svelte
index b8cbad12..30f6dc49 100644
--- a/src/lib/common/RightSidebar.svelte
+++ b/src/lib/common/shared/RightSidebar.svelte
@@ -2,7 +2,6 @@
 	import Link from 'svelte-link';
 	import 'overlayscrollbars/overlayscrollbars.css';
 	import { OverlayScrollbars } from 'overlayscrollbars';
-
 	import { onMount } from 'svelte';
 
 	export let sidebarColor = 'dark';
diff --git a/src/lib/common/StateSearch.svelte b/src/lib/common/shared/StateSearch.svelte
similarity index 96%
rename from src/lib/common/StateSearch.svelte
rename to src/lib/common/shared/StateSearch.svelte
index 17c681cf..3b1f1ddc 100644
--- a/src/lib/common/StateSearch.svelte
+++ b/src/lib/common/shared/StateSearch.svelte
@@ -1,6 +1,6 @@
 <script>
     import { fly } from 'svelte/transition';
-	import RemoteSearchInput from "$lib/common/RemoteSearchInput.svelte";
+	import RemoteSearchInput from "$lib/common/shared/RemoteSearchInput.svelte";
 	import { Button, Input } from "@sveltestrap/sveltestrap";
 
     const limit = 5;
diff --git a/src/lib/common/Stretch.svelte b/src/lib/common/shared/Stretch.svelte
similarity index 100%
rename from src/lib/common/Stretch.svelte
rename to src/lib/common/shared/Stretch.svelte
diff --git a/src/lib/common/TablePagination.svelte b/src/lib/common/shared/TablePagination.svelte
similarity index 100%
rename from src/lib/common/TablePagination.svelte
rename to src/lib/common/shared/TablePagination.svelte
diff --git a/src/lib/common/Loader.svelte b/src/lib/common/spinners/Loader.svelte
similarity index 100%
rename from src/lib/common/Loader.svelte
rename to src/lib/common/spinners/Loader.svelte
diff --git a/src/lib/common/LoadingDots.svelte b/src/lib/common/spinners/LoadingDots.svelte
similarity index 100%
rename from src/lib/common/LoadingDots.svelte
rename to src/lib/common/spinners/LoadingDots.svelte
diff --git a/src/lib/common/LoadingToComplete.svelte b/src/lib/common/spinners/LoadingToComplete.svelte
similarity index 100%
rename from src/lib/common/LoadingToComplete.svelte
rename to src/lib/common/spinners/LoadingToComplete.svelte
diff --git a/src/lib/scss/app.scss b/src/lib/scss/app.scss
index b7873393..84c4a5ae 100644
--- a/src/lib/scss/app.scss
+++ b/src/lib/scss/app.scss
@@ -46,6 +46,7 @@ File: Main Css File
 @import "custom/components/select";
 @import "custom/components/markdown";
 @import "custom/components/state";
+@import "custom/components/codeScript";
 
 // Plugins
 @import "custom/plugins/custom-scrollbar";
diff --git a/src/lib/scss/custom/components/_codeScript.scss b/src/lib/scss/custom/components/_codeScript.scss
new file mode 100644
index 00000000..0ed5688e
--- /dev/null
+++ b/src/lib/scss/custom/components/_codeScript.scss
@@ -0,0 +1,6 @@
+.code-script-container {
+    min-height: 300px;
+    max-height: 500px;
+    overflow: auto;
+    scrollbar-width: thin;
+}
\ No newline at end of file
diff --git a/src/routes/(authentication)/login/+page.svelte b/src/routes/(authentication)/login/+page.svelte
index 3c6ba213..79e2b4c7 100644
--- a/src/routes/(authentication)/login/+page.svelte
+++ b/src/routes/(authentication)/login/+page.svelte
@@ -13,7 +13,7 @@
 		Button,
 		Alert
 	} from '@sveltestrap/sveltestrap';
-	import Headtitle from '$lib/common/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { getToken, getTenantOptions } from '$lib/services/auth-service.js';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
diff --git a/src/routes/(authentication)/recoverpw/+page.svelte b/src/routes/(authentication)/recoverpw/+page.svelte
index d1fc9376..836d5716 100644
--- a/src/routes/(authentication)/recoverpw/+page.svelte
+++ b/src/routes/(authentication)/recoverpw/+page.svelte
@@ -1,7 +1,7 @@
 <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/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 </script>
 
diff --git a/src/routes/(authentication)/register/+page.svelte b/src/routes/(authentication)/register/+page.svelte
index 25fbe6d0..3848db43 100644
--- a/src/routes/(authentication)/register/+page.svelte
+++ b/src/routes/(authentication)/register/+page.svelte
@@ -1,7 +1,7 @@
 <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/HeadTitle.svelte';
+	import Headtitle from '$lib/common/shared/HeadTitle.svelte';
 	import { goto } from '$app/navigation';
 	import { PUBLIC_LOGO_URL, PUBLIC_COMPANY_NAME } from '$env/static/public';
 
diff --git a/src/routes/(home)/+page.svelte b/src/routes/(home)/+page.svelte
index bf8753e5..d0fdd4d7 100644
--- a/src/routes/(home)/+page.svelte
+++ b/src/routes/(home)/+page.svelte
@@ -2,7 +2,7 @@
     import Link from "svelte-link";
     import { fade } from 'svelte/transition';
     import { Container, Row, Col } from '@sveltestrap/sveltestrap';
-    import HeadTitle from "$lib/common/HeadTitle.svelte";
+    import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
     import { 
         PUBLIC_LOGO_URL, 
         PUBLIC_BRAND_NAME, 
diff --git a/src/routes/VerticalLayout/Header.svelte b/src/routes/VerticalLayout/Header.svelte
index 62ba6c72..ab294b41 100644
--- a/src/routes/VerticalLayout/Header.svelte
+++ b/src/routes/VerticalLayout/Header.svelte
@@ -3,10 +3,10 @@
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { Input } from '@sveltestrap/sveltestrap';
-	import LanguageDropdown from '$lib/common/LanguageDropdown.svelte';
-	import FullScreenDropdown from '$lib/common/FullScreenDropdown.svelte';
-	import NotificationDropdown from '$lib/common/NotificationDropdown.svelte';
-	import ProfileDropdown from '$lib/common/ProfileDropdown.svelte';
+	import LanguageDropdown from '$lib/common/dropdowns/LanguageDropdown.svelte';
+	import FullScreenDropdown from '$lib/common/dropdowns/FullScreenDropdown.svelte';
+	import NotificationDropdown from '$lib/common/dropdowns/NotificationDropdown.svelte';
+	import ProfileDropdown from '$lib/common/dropdowns/ProfileDropdown.svelte';
 	import { OverlayScrollbars } from 'overlayscrollbars';
 	import { PUBLIC_LOGO_URL } from '$env/static/public';
 	import { globalEventStore, getTenantName } from '$lib/helpers/store';
diff --git a/src/routes/VerticalLayout/Index.svelte b/src/routes/VerticalLayout/Index.svelte
index b6beeb54..93069ef3 100644
--- a/src/routes/VerticalLayout/Index.svelte
+++ b/src/routes/VerticalLayout/Index.svelte
@@ -1,11 +1,11 @@
 <script>
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
-	import RightSidebar from '$lib/common/RightSidebar.svelte';
+	import RightSidebar from '$lib/common/shared/RightSidebar.svelte';
 	import { getPluginMenu } from '$lib/services/plugin-service';
 	import { myInfo } from '$lib/services/auth-service';
 	import { globalMenuStore } from '$lib/helpers/store';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
 	import Header from './Header.svelte';
 	import Sidebar from './Sidebar.svelte';
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 7c03331b..4a78ec99 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -47,12 +47,19 @@
 	import { BOT_SENDERS, LEARNER_AGENT_ID, TRAINING_MODE, ADMIN_ROLES, IMAGE_DATA_PREFIX } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { newConversation } from '$lib/services/conversation-service';
-	import DialogModal from '$lib/common/DialogModal.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import StateModal from '$lib/common/StateModal.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
+	import DialogModal from '$lib/common/modals/DialogModal.svelte';
+	import StateModal from '$lib/common/modals/StateModal.svelte';
+	import PlainModal from '$lib/common/modals/PlainModal.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import AudioSpeaker from '$lib/common/audio-player/AudioSpeaker.svelte';
+	import CodeScript from '$lib/common/shared/CodeScript.svelte';
+	import { realtimeChat } from '$lib/services/realtime-chat-service';
+	import { webSpeech } from '$lib/services/web-speech';
+	import LocalStorageManager from '$lib/helpers/utils/storage-manager';
+	import { delay } from '$lib/helpers/utils/common';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
@@ -62,20 +69,15 @@
 	import RichContent from './rich-content/rich-content.svelte';
 	import RcMessage from "./rich-content/rc-message.svelte";
 	import RcDisclaimer from './rich-content/rc-disclaimer.svelte';
-	import MessageFileGallery from '$lib/common/MessageFileGallery.svelte';
+	import MessageFileGallery from '$lib/common/files/MessageFileGallery.svelte';
 	import ChatUtil from './chat-util/chat-util.svelte';
 	import ChatFileUploader from './chat-util/chat-file-uploader.svelte';
 	import ChatFileGallery from './chat-util/chat-file-gallery.svelte';
 	import ChatBigMessage from './chat-util/chat-big-message.svelte';
 	import PersistLog from './persist-log/persist-log.svelte';
 	import InstantLog from './instant-log/instant-log.svelte';
-	import LocalStorageManager from '$lib/helpers/utils/storage-manager';
-	import { realtimeChat } from '$lib/services/realtime-chat-service';
-	import { webSpeech } from '$lib/services/web-speech';
-	import { delay } from '$lib/helpers/utils/common';
-	import GlobalHeader from '$lib/common/shared/GlobalHeader.svelte';
-
 	
+
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -117,6 +119,8 @@
 	let notificationText = '';
 	let successText = "Done";
 	let errorText = "Error";
+	let codeScript = '';
+	let codeLanguage = 'python';
 
 	/** @type {number} */
 	let messageInputTimeout;
@@ -192,6 +196,7 @@
 	let isOpenEditBotMsgModal = false;
 	let isOpenUserAddStateModal = false;
 	let isOpenTagModal = false;
+	let isOpenCodeScriptModal = false;
 	let isSendingMsg = false;
 	let isThinking = false;
 	let isListening = false;
@@ -1353,6 +1358,26 @@
 		});
 	}
 
+	/**
+	 * @param {any} e
+	 * @param {any} message
+	 */
+	function openCodeScriptModal(e, message) {
+		e.preventDefault();
+
+		codeScript = message?.rich_content?.message?.code_script || '';
+		codeLanguage = message?.rich_content?.message?.language || 'python';
+		isOpenCodeScriptModal = true;
+	}
+
+	function toggleCodeScriptModal() {
+		isOpenCodeScriptModal = !isOpenCodeScriptModal;
+		if (!isOpenCodeScriptModal) {
+			codeScript = '';
+			codeLanguage = '';
+		}
+	}
+
 	function toggleNotificationModal() {
 		isDisplayNotification = !isDisplayNotification;
 		if (!isDisplayNotification) {
@@ -1629,6 +1654,17 @@
 	</div>
 </DialogModal>
 
+<PlainModal
+	title={'Code script'}
+	isOpen={isOpenCodeScriptModal}
+	toggleModal={() => toggleCodeScriptModal()}
+>
+	<CodeScript
+		language={codeLanguage || 'python'}
+		scriptText={codeScript}
+	/>
+</PlainModal>
+
 <StateModal
 	isOpen={isOpenUserAddStateModal}
 	bind:states={userAddStates}
@@ -1936,6 +1972,22 @@
 																	{/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 -->
+																<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)}
+																>
+																	<i class="bx bx-terminal clickable" />
+																</div>
+															</div>
+															{/if}
 														</div>
 													{/if}
 													{#if !!message.is_chat_message || !!message.has_message_files || message?.data?.startsWith(IMAGE_DATA_PREFIX)}
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 efd8d794..89ca022b 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,5 +1,5 @@
 <script>
-	import FileGallery from "$lib/common/FileGallery.svelte";
+	import FileGallery from "$lib/common/files/FileGallery.svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
 	import { afterUpdate, getContext, onDestroy } from "svelte";
 
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 582df592..40c0fc78 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,6 +1,6 @@
 <script>
     import { onDestroy, createEventDispatcher } from 'svelte';
-    import FileDropZone from '$lib/common/FileDropZone.svelte';
+    import FileDropZone from '$lib/common/files/FileDropZone.svelte';
 	import { conversationUserAttachmentStore } from '$lib/helpers/store';
 
     const svelteDispatch = createEventDispatcher();
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 6e73d5f3..e1616011 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
@@ -4,7 +4,7 @@
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
     import { v4 as uuidv4 } from 'uuid';
-	import LoadingDots from "$lib/common/LoadingDots.svelte";
+	import LoadingDots from "$lib/common/spinners/LoadingDots.svelte";
 
     /** @type {import('$conversationTypes').ChatResponseModel?} */
     export let message;
diff --git a/src/routes/page/+layout.svelte b/src/routes/page/+layout.svelte
index b707dab6..c6e8bc1d 100644
--- a/src/routes/page/+layout.svelte
+++ b/src/routes/page/+layout.svelte
@@ -5,7 +5,7 @@
 </svelte:head>
 
 <script>
-	import LiveChat from '$lib/common/LiveChatEntry.svelte';
+	import LiveChat from '$lib/common/shared/LiveChatEntry.svelte';
 	import VerticalLayout from '../VerticalLayout/Index.svelte';
 
 	let component = VerticalLayout;
diff --git a/src/routes/page/agent/+page.svelte b/src/routes/page/agent/+page.svelte
index 89e022f6..c89e7cf9 100644
--- a/src/routes/page/agent/+page.svelte
+++ b/src/routes/page/agent/+page.svelte
@@ -5,11 +5,11 @@
 	import Swal from 'sweetalert2';
 	import { page } from '$app/stores';
 	import { Button, Col, Input, Row } from '@sveltestrap/sveltestrap';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import PlainPagination from '$lib/common/PlainPagination.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+	import PlainPagination from '$lib/common/shared/PlainPagination.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
   	import { createAgent, getAgentLabels, getAgents } from '$lib/services/agent-service.js';
 	import { AgentType, GlobalEvent, UserPermission } from '$lib/helpers/enums';
   	import { myInfo } from '$lib/services/auth-service';
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 41313b85..7ab14cf6 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -5,9 +5,9 @@
     import { _ } from 'svelte-i18n'; 
     import Swal from 'sweetalert2';
 	import { Col, Row, Button } from '@sveltestrap/sveltestrap';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { globalEventStore } from '$lib/helpers/store';
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 85df2a2c..8d20f484 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -2,8 +2,8 @@
     import { onMount } from 'svelte';
     import { Button, Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
     import { _ } from 'svelte-i18n';
-    import InPlaceEdit from '$lib/common/InPlaceEdit.svelte';
-    import Select from '$lib/common/Select.svelte';
+    import InPlaceEdit from '$lib/common/shared/InPlaceEdit.svelte';
+    import Select from '$lib/common/dropdowns/Select.svelte';
     import { utcToLocal } from '$lib/helpers/datetime';
 	import { RoutingMode, AgentType, FunctionVisMode } from '$lib/helpers/enums';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
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 78efda9a..243a865c 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
@@ -1,5 +1,5 @@
 <script>
-	import CollapsibleCard from "$lib/common/CollapsibleCard.svelte";
+	import CollapsibleCard from "$lib/common/shared/CollapsibleCard.svelte";
 	import { directToAgentPage } from "$lib/helpers/utils/common";
 	import { Card, CardBody, Table } from "@sveltestrap/sveltestrap";
 
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index 2744e2a8..a93d2962 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -5,7 +5,7 @@
 	import { getAgentRuleOptions, generateAgentCodeScript } from '$lib/services/agent-service';
 	import Markdown from '$lib/common/markdown/Markdown.svelte';
 	import BotsharpTooltip from '$lib/common/tooltip/BotsharpTooltip.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { ADMIN_ROLES, AI_PROGRAMMER_AGENT_ID, RULE_TRIGGER_CODE_GENERATE_TEMPLATE } from '$lib/helpers/constants';
 	import { AgentCodeScriptType } from '$lib/helpers/enums';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
diff --git a/src/routes/page/agent/[embed]/[embedType]/+page.svelte b/src/routes/page/agent/[embed]/[embedType]/+page.svelte
index c296aeda..71ef21cb 100644
--- a/src/routes/page/agent/[embed]/[embedType]/+page.svelte
+++ b/src/routes/page/agent/[embed]/[embedType]/+page.svelte
@@ -2,8 +2,8 @@
     import { _ } from 'svelte-i18n';
     import { page } from '$app/stores';
     import lodash from 'lodash';
-	import HeadTitle from "$lib/common/HeadTitle.svelte";
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	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?} */
diff --git a/src/routes/page/agent/code-scripts/+page.svelte b/src/routes/page/agent/code-scripts/+page.svelte
index 8e5a3c93..3b2c0d13 100644
--- a/src/routes/page/agent/code-scripts/+page.svelte
+++ b/src/routes/page/agent/code-scripts/+page.svelte
@@ -3,10 +3,10 @@
 	import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
     import { Button, Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-    import Select from '$lib/common/Select.svelte';
+    import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+    import Select from '$lib/common/dropdowns/Select.svelte';
     import { myInfo } from '$lib/services/auth-service';
 	import { getAgentCodeScripts, getAgentOptions, updateAgentCodeScripts } from '$lib/services/agent-service';
     import { ADMIN_ROLES } from '$lib/helpers/constants';
@@ -225,7 +225,8 @@
             <Button
                 class="btn btn-warning"
                 disabled={!selectedAgentId}
-                on:click={() => resetCodeScripts()}>
+                on:click={() => resetCodeScripts()}
+            >
                 {$_('Reset')}
             </Button>
         </div>
diff --git a/src/routes/page/agent/code-scripts/script-editor.svelte b/src/routes/page/agent/code-scripts/script-editor.svelte
index 5f1296f0..736c4bb3 100644
--- a/src/routes/page/agent/code-scripts/script-editor.svelte
+++ b/src/routes/page/agent/code-scripts/script-editor.svelte
@@ -3,15 +3,9 @@
 	import { _ } from 'svelte-i18n';
     import { v4 as uuidv4 } from 'uuid';
     import { Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
-    import CodeMirror from "svelte-codemirror-editor";
-    import { keymap } from "@codemirror/view";
-    import { indentUnit, indentOnInput, indentService } from "@codemirror/language";
-    import { defaultKeymap, history, indentWithTab, historyKeymap } from "@codemirror/commands";
-    import { EditorState } from "@codemirror/state";
-    import { python } from "@codemirror/lang-python";
-	import { oneDark } from "@codemirror/theme-one-dark";
     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';
 
     const defaultScript = `# Python Demo
 def greet(name):
@@ -20,31 +14,6 @@ def greet(name):
 if __name__ == "__main__":
     greet('AI')
 `;
-
-    const extensions = [
-        python(),
-        indentUnit.of("    "),
-        EditorState.tabSize.of(4),
-        indentOnInput(),
-        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;
-        }),
-        history(),
-        keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
-    ];
-
     
     /** @type {string} */
     export let title;
@@ -56,11 +25,10 @@ if __name__ == "__main__":
     */
     export let scriptObj;
 
-
     /** @type {string} */
     export let scriptType;
 
-
+    
     function addScript() {
         const scripts = [
             ...scriptObj.scripts,
@@ -104,7 +72,7 @@ if __name__ == "__main__":
     function changeScriptContent(e, uid) {
         const found = scriptObj?.scripts?.find(x => x.uid === uid);
         if (found) {
-            found.content = e.detail;
+            found.content = e.detail.text;
         }
     }
 </script>
@@ -170,13 +138,13 @@ if __name__ == "__main__":
                         {/each}
                     </NavBar>
                     <div class="code-editor">
-                        <CodeMirror
-                            theme={oneDark}
-                            lineWrapping
-                            extensions={extensions}
-                            value={scriptObj.selectedScript?.content || ''}
+                        {#key scriptObj.selectedScript?.uid}
+                        <CodeScript
+                            language={'python'}
+                            scriptText={scriptObj.selectedScript?.content || ''}
                             on:change={e => changeScriptContent(e, scriptObj.selectedScript?.uid)}
                         />
+                        {/key}
                     </div>
                 {/if}
             </Col>
diff --git a/src/routes/page/agent/evaluator/+page.svelte b/src/routes/page/agent/evaluator/+page.svelte
index 85f60542..b8514c4e 100644
--- a/src/routes/page/agent/evaluator/+page.svelte
+++ b/src/routes/page/agent/evaluator/+page.svelte
@@ -1,11 +1,11 @@
 <script>
 	import { Col, Row } from '@sveltestrap/sveltestrap';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	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/PlainPagination.svelte';
-	import { _ } from 'svelte-i18n'
+	import PlainPagination from '$lib/common/shared/PlainPagination.svelte';
+	import { _ } from 'svelte-i18n';
 
   	const firstPage = 1;
 	const pageSize = 12;
diff --git a/src/routes/page/agent/router/+page.svelte b/src/routes/page/agent/router/+page.svelte
index 5a073174..b0a8650e 100644
--- a/src/routes/page/agent/router/+page.svelte
+++ b/src/routes/page/agent/router/+page.svelte
@@ -3,8 +3,8 @@
   import { _ } from 'svelte-i18n';
   import { page } from '$app/stores';
   import { Col, Row } from '@sveltestrap/sveltestrap';
-  import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-  import HeadTitle from '$lib/common/HeadTitle.svelte';
+  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 RoutingFlow from './routing-flow.svelte'
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index b9489333..163ce6a3 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -13,12 +13,12 @@
 		Row,
 		Table
 	} from '@sveltestrap/sveltestrap';
-	import StateSearch from '$lib/common/StateSearch.svelte';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import TablePagination from '$lib/common/TablePagination.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import StateSearch from '$lib/common/shared/StateSearch.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import TablePagination from '$lib/common/shared/TablePagination.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { ConversationChannel, TimeRange } from '$lib/helpers/enums';
diff --git a/src/routes/page/conversation/[conversationId]/+page.svelte b/src/routes/page/conversation/[conversationId]/+page.svelte
index d1071cf8..057a2ca3 100644
--- a/src/routes/page/conversation/[conversationId]/+page.svelte
+++ b/src/routes/page/conversation/[conversationId]/+page.svelte
@@ -5,9 +5,9 @@
     import Swal from 'sweetalert2';
     import { _ } from 'svelte-i18n';
     import { Col, Row, Button } from '@sveltestrap/sveltestrap';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { getConversation, deleteConversation, getDialogs } from '$lib/services/conversation-service.js';
     import Overview from './conv-overview.svelte'
     import States from './conv-states.svelte';
diff --git a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
index 35103396..d6ef5cb2 100644
--- a/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
+++ b/src/routes/page/conversation/[conversationId]/conv-dialogs.svelte
@@ -6,10 +6,10 @@
     import { getConversationFiles, sendNotification } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
 	import { IMAGE_DATA_PREFIX, BOT_SENDERS } from '$lib/helpers/constants';
-	import MessageFileGallery from '$lib/common/MessageFileGallery.svelte';
+	import MessageFileGallery from '$lib/common/files/MessageFileGallery.svelte';
 	import { FileSourceType } from '$lib/helpers/enums';
-	import DialogModal from '$lib/common/DialogModal.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import DialogModal from '$lib/common/modals/DialogModal.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import ConvDialogElement from './conv-dialog-element.svelte';
 
     const maxTextLength = 4096;
diff --git a/src/routes/page/dashboard/+page.svelte b/src/routes/page/dashboard/+page.svelte
index c4d3b027..7a45e645 100644
--- a/src/routes/page/dashboard/+page.svelte
+++ b/src/routes/page/dashboard/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
 	import { _ } from 'svelte-i18n'
 	import {
 		Card,
diff --git a/src/routes/page/dashboard/RadialBarChart.svelte b/src/routes/page/dashboard/RadialBarChart.svelte
index ca615ab6..62fcf40c 100644
--- a/src/routes/page/dashboard/RadialBarChart.svelte
+++ b/src/routes/page/dashboard/RadialBarChart.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { getChartColorsArray } from '$lib/common/ChartColorsArray.svelte';
+	import { getChartColorsArray } from '$lib/common/shared/ChartColorsArray.svelte';
 	import ApexCharts from 'apexcharts';
 	export let chartColor;
 
diff --git a/src/routes/page/dashboard/StackedColumnChart.svelte b/src/routes/page/dashboard/StackedColumnChart.svelte
index 8bf1412a..b36206c7 100644
--- a/src/routes/page/dashboard/StackedColumnChart.svelte
+++ b/src/routes/page/dashboard/StackedColumnChart.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import { getChartColorsArray } from '$lib/common/ChartColorsArray.svelte';
+	import { getChartColorsArray } from '$lib/common/shared/ChartColorsArray.svelte';
     import ApexCharts from 'apexcharts';
 	export let chartColor;
 
diff --git a/src/routes/page/instruction/instruction-components/instruction-agent.svelte b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
index b535f66a..a27923ad 100644
--- a/src/routes/page/instruction/instruction-components/instruction-agent.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-agent.svelte
@@ -1,7 +1,7 @@
 <script>
     import { createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-    import Select from '$lib/common/Select.svelte';
+    import Select from '$lib/common/dropdowns/Select.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
diff --git a/src/routes/page/instruction/instruction-components/instruction-coding.svelte b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
index ecf1546f..39f47251 100644
--- a/src/routes/page/instruction/instruction-components/instruction-coding.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-coding.svelte
@@ -1,6 +1,6 @@
 <script>
     import { Button, Input } from '@sveltestrap/sveltestrap';
-	import Select from '$lib/common/Select.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import { scrollToBottom } from '$lib/helpers/utils/common';
 
     const maxLength = 4096;
diff --git a/src/routes/page/instruction/instruction-components/instruction-llm.svelte b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
index 2510d9b8..e7f3ff8e 100644
--- a/src/routes/page/instruction/instruction-components/instruction-llm.svelte
+++ b/src/routes/page/instruction/instruction-components/instruction-llm.svelte
@@ -1,7 +1,7 @@
 <script>
     import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
-    import Select from '$lib/common/Select.svelte';
+    import Select from '$lib/common/dropdowns/Select.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
diff --git a/src/routes/page/instruction/log/+page.svelte b/src/routes/page/instruction/log/+page.svelte
index db07794b..c732233b 100644
--- a/src/routes/page/instruction/log/+page.svelte
+++ b/src/routes/page/instruction/log/+page.svelte
@@ -4,17 +4,17 @@
 	import { _ } from 'svelte-i18n';
     import util from "lodash";
 	import { Button, Card, CardBody, Col, Input, Row, Table } from '@sveltestrap/sveltestrap';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import TablePagination from '$lib/common/TablePagination.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+    import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import TablePagination from '$lib/common/shared/TablePagination.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
 	import { getInstructionLogSearchKeys } from '$lib/services/instruct-service';
 	import { getInstructionLogs } from '$lib/services/logging-service';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { convertTimeRange, removeDuplicates } from '$lib/helpers/utils/common';
-	import StateSearch from '$lib/common/StateSearch.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import StateSearch from '$lib/common/shared/StateSearch.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import {
 		getPagingQueryParams,
 		setUrlQueryParams,
diff --git a/src/routes/page/instruction/testing/+page.svelte b/src/routes/page/instruction/testing/+page.svelte
index 31404774..d84951be 100644
--- a/src/routes/page/instruction/testing/+page.svelte
+++ b/src/routes/page/instruction/testing/+page.svelte
@@ -4,12 +4,12 @@
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
 	import { Button, Card, CardBody, Col, Row, Tooltip } from '@sveltestrap/sveltestrap';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	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 Markdown from '$lib/common/markdown/Markdown.svelte';
 	import { getAgentCodeScripts, getAgents } from '$lib/services/agent-service';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { executeAgentInstruction } from '$lib/services/instruct-service';
 	import { getLlmConfigs } from '$lib/services/llm-provider-service';
 	import { AgentCodeScriptType, LlmModelType } from '$lib/helpers/enums';
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 c43ec75f..a9ad1a4a 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
@@ -16,7 +16,7 @@
     import util from "lodash";
 	import { getVectorCollectionDetails } from "$lib/services/knowledge-base-service";
 	import { VectorIndexSchemaType } from "$lib/helpers/enums";
-    import Select from "$lib/common/Select.svelte";
+    import Select from "$lib/common/dropdowns/Select.svelte";
 
     /** @type {string} */
     export let collection;
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 ff70cd71..13fa4334 100644
--- a/src/routes/page/knowledge-base/common/search/advanced-search.svelte
+++ b/src/routes/page/knowledge-base/common/search/advanced-search.svelte
@@ -3,7 +3,7 @@
     import { fly } from 'svelte/transition';
     import { Input, Tooltip, Button } from '@sveltestrap/sveltestrap';
     import { v4 as uuidv4 } from 'uuid';
-	import Select from '$lib/common/Select.svelte';
+	import Select from '$lib/common/dropdowns/Select.svelte';
 	import { VectorPayloadDataType } from '$lib/helpers/enums';
     
     /** @type {boolean} */
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 223f52a2..8c1896d0 100644
--- a/src/routes/page/knowledge-base/common/table/table-item.svelte
+++ b/src/routes/page/knowledge-base/common/table/table-item.svelte
@@ -1,7 +1,7 @@
 <script>
     import { Button } from "@sveltestrap/sveltestrap";
     import { fly } from 'svelte/transition';
-	import Loader from "$lib/common/Loader.svelte";
+	import Loader from "$lib/common/spinners/Loader.svelte";
     import JSONTree from 'svelte-json-tree';
 	import { formatObject, splitTextByCase } from "$lib/helpers/utils/common";
 
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 db55e9ce..62a66132 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
@@ -18,7 +18,7 @@
     } from "$lib/helpers/enums";
     import util from "lodash";
     import { v4 as uuidv4 } from 'uuid';
-	import Select from "$lib/common/Select.svelte";
+	import Select from "$lib/common/dropdowns/Select.svelte";
 	
 
     /** @type {import('$knowledgeTypes').KnowledgeSearchViewModel | null} */
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 0eea6ca6..8b433597 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
@@ -3,7 +3,7 @@
     import { Button } from "@sveltestrap/sveltestrap";
     import { fly } from 'svelte/transition';
     import Swal from 'sweetalert2';
-	import Loader from "$lib/common/Loader.svelte";
+	import Loader from "$lib/common/spinners/Loader.svelte";
 	import { KnowledgeCollectionType, KnowledgePayloadName } from "$lib/helpers/enums";
 
     const svelteDispatch = createEventDispatcher();
diff --git a/src/routes/page/knowledge-base/dictionary/+page.svelte b/src/routes/page/knowledge-base/dictionary/+page.svelte
index 89fda89e..1ded6363 100644
--- a/src/routes/page/knowledge-base/dictionary/+page.svelte
+++ b/src/routes/page/knowledge-base/dictionary/+page.svelte
@@ -14,11 +14,11 @@
 		getEntityDataLoaders,
 		analyzeEntity
     } from '$lib/services/knowledge-base-service';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-    import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import LoadingDots from '$lib/common/spinners/LoadingDots.svelte';
+	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;
diff --git a/src/routes/page/knowledge-base/documents/+page.svelte b/src/routes/page/knowledge-base/documents/+page.svelte
index 99881cc3..cc31db28 100644
--- a/src/routes/page/knowledge-base/documents/+page.svelte
+++ b/src/routes/page/knowledge-base/documents/+page.svelte
@@ -28,12 +28,12 @@
 		getVectorCollectionDetails,
 		getKnowledgeProcessors
     } from '$lib/services/knowledge-base-service';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-    import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import Loader from '$lib/common/Loader.svelte';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	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 Select from '$lib/common/dropdowns/Select.svelte';
 	import {
 		KnowledgeCollectionType,
 		KnowledgePayloadName,
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 7b9276f2..787f0c3f 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-document-upload.svelte
@@ -6,10 +6,10 @@
     import Swal from 'sweetalert2';
     import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
-    import FileDropZone from '$lib/common/FileDropZone.svelte';
-    import FileGallery from '$lib/common/FileGallery.svelte';
-    import LoadingDots from '$lib/common/LoadingDots.svelte';
-    import LoadingToComplete from '$lib/common/LoadingToComplete.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';
+    import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { isExternalUrl } from '$lib/helpers/utils/common';
 	import { knowledgeBaseDocumentStore, userStore } from '$lib/helpers/store';
     import { KnowledgeDocSource } from '$lib/helpers/enums';
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 4734f0d9..1b99a589 100644
--- a/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
+++ b/src/routes/page/knowledge-base/documents/knowledge-upload-modal.svelte
@@ -6,12 +6,12 @@
         ModalBody,
         ModalHeader
     } from "@sveltestrap/sveltestrap";
-    import Select from "$lib/common/Select.svelte";
-    import FileDropZone from '$lib/common/FileDropZone.svelte';
-    import FileGallery from '$lib/common/FileGallery.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';
 	import { uploadKnowledgeDocuments } from "$lib/services/knowledge-base-service";
 	import { KnowledgeDocSource } from "$lib/helpers/enums";
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 
     const svelteDispatch = createEventDispatcher();
 
diff --git a/src/routes/page/knowledge-base/question-answer/+page.svelte b/src/routes/page/knowledge-base/question-answer/+page.svelte
index e0b5a306..f521aaf6 100644
--- a/src/routes/page/knowledge-base/question-answer/+page.svelte
+++ b/src/routes/page/knowledge-base/question-answer/+page.svelte
@@ -27,12 +27,12 @@
 		createVectorIndexes,
 		deleteVectorIndexes
     } from '$lib/services/knowledge-base-service';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-    import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import Loader from '$lib/common/Loader.svelte';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import Select from '$lib/common/Select.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	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 Select from '$lib/common/dropdowns/Select.svelte';
 	import {
 		KnowledgeCollectionType,
 		KnowledgePayloadName,
diff --git a/src/routes/page/knowledge-base/relationships/+page.svelte b/src/routes/page/knowledge-base/relationships/+page.svelte
index 49ca8569..df88c547 100644
--- a/src/routes/page/knowledge-base/relationships/+page.svelte
+++ b/src/routes/page/knowledge-base/relationships/+page.svelte
@@ -4,9 +4,9 @@
 	import { _ } from 'svelte-i18n';
 	import util from "lodash";
 	import { Button } from '@sveltestrap/sveltestrap';
-	import LoadingDots from '$lib/common/LoadingDots.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+	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;
diff --git a/src/routes/page/plugin/+page.svelte b/src/routes/page/plugin/+page.svelte
index f3193051..a0ca8749 100644
--- a/src/routes/page/plugin/+page.svelte
+++ b/src/routes/page/plugin/+page.svelte
@@ -1,12 +1,12 @@
 <script>
 	import { onMount, onDestroy } from 'svelte';
 	import { page } from '$app/stores';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+	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 { PUBLIC_PLUGIN_DEFAULT_ICON } from '$env/static/public';
-	import PlainPagination from '$lib/common/PlainPagination.svelte';
+	import PlainPagination from '$lib/common/shared/PlainPagination.svelte';
 	import { _ } from 'svelte-i18n';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index d9f80314..11d0ccb2 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -9,9 +9,9 @@
 	} from '@sveltestrap/sveltestrap';
     import { _ } from 'svelte-i18n';
     import moment from 'moment';
-	import HeadTitle from "$lib/common/HeadTitle.svelte";
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
 	import { globalEventStore } from '$lib/helpers/store';
 	import { GlobalEvent } from '$lib/helpers/enums';
diff --git a/src/routes/page/roles/role-item.svelte b/src/routes/page/roles/role-item.svelte
index 6929fb02..c5d322e4 100644
--- a/src/routes/page/roles/role-item.svelte
+++ b/src/routes/page/roles/role-item.svelte
@@ -5,7 +5,7 @@
     import { v4 as uuidv4 } from 'uuid';
     import moment from "moment";
     import Swal from 'sweetalert2';
-    import Loader from '$lib/common/Loader.svelte';
+    import Loader from '$lib/common/spinners/Loader.svelte';
 	import { UserAction } from '$lib/helpers/enums';
 	import { getRoleDetails } from '$lib/services/role-service';
     
diff --git a/src/routes/page/setting/+page.svelte b/src/routes/page/setting/+page.svelte
index 15203b40..8a052fce 100644
--- a/src/routes/page/setting/+page.svelte
+++ b/src/routes/page/setting/+page.svelte
@@ -16,12 +16,12 @@
 		TabPane,
         Button
 	} from '@sveltestrap/sveltestrap';
-    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import Breadcrumb from '$lib/common/shared/Breadcrumb.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/LoadingToComplete.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     
     const duration = 3000;
     let isLoading = false;
diff --git a/src/routes/page/task/+page.svelte b/src/routes/page/task/+page.svelte
index bfe94940..3d9c8b9b 100644
--- a/src/routes/page/task/+page.svelte
+++ b/src/routes/page/task/+page.svelte
@@ -17,10 +17,10 @@
 		Row,
 		Table
 	} from '@sveltestrap/sveltestrap';
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import TablePagination from '$lib/common/TablePagination.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import TablePagination from '$lib/common/shared/TablePagination.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
     import { getAgentTasks, updateAgentTask } from '$lib/services/task-service';
 	import { AgentTaskStatus } from '$lib/helpers/enums';
 	import TaskItem from './task-item.svelte';
diff --git a/src/routes/page/user/me/+page.svelte b/src/routes/page/user/me/+page.svelte
index 77720fa3..ee10b37c 100644
--- a/src/routes/page/user/me/+page.svelte
+++ b/src/routes/page/user/me/+page.svelte
@@ -2,9 +2,9 @@
 	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/Breadcrumb.svelte';
-	import HeadTitle from '$lib/common/HeadTitle.svelte';
-	import FileDropZone from '$lib/common/FileDropZone.svelte';
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import HeadTitle from '$lib/common/shared/HeadTitle.svelte';
+	import FileDropZone from '$lib/common/files/FileDropZone.svelte';
 	import { myInfo, uploadUserAvatar } from '$lib/services/auth-service';
 	import { _ } from 'svelte-i18n';
 	import { userStore } from '$lib/helpers/store';
diff --git a/src/routes/page/users/+page.svelte b/src/routes/page/users/+page.svelte
index 6ef1427c..fd1441fe 100644
--- a/src/routes/page/users/+page.svelte
+++ b/src/routes/page/users/+page.svelte
@@ -11,10 +11,10 @@
 		Table
 	} from '@sveltestrap/sveltestrap';
     import { _ } from 'svelte-i18n';
-	import HeadTitle from "$lib/common/HeadTitle.svelte";
-	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
-	import TablePagination from '$lib/common/TablePagination.svelte';
-	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
+	import HeadTitle from "$lib/common/shared/HeadTitle.svelte";
+	import Breadcrumb from '$lib/common/shared/Breadcrumb.svelte';
+	import TablePagination from '$lib/common/shared/TablePagination.svelte';
+	import LoadingToComplete from '$lib/common/spinners/LoadingToComplete.svelte';
 	import { getUsers, updateUser } from '$lib/services/user-service';
 	import UserItem from './user-item.svelte';
 	import { getAgentOptions } from '$lib/services/agent-service';
diff --git a/src/routes/page/users/user-item.svelte b/src/routes/page/users/user-item.svelte
index 476ee9f5..e94c53e2 100644
--- a/src/routes/page/users/user-item.svelte
+++ b/src/routes/page/users/user-item.svelte
@@ -5,7 +5,7 @@
     import { v4 as uuidv4 } from 'uuid';
     import Swal from 'sweetalert2';
     import lodash from "lodash";
-    import Loader from '$lib/common/Loader.svelte';
+    import Loader from '$lib/common/spinners/Loader.svelte';
 	import { UserAction } from '$lib/helpers/enums';
     import { getUserDetails } from '$lib/services/user-service';