diff --git a/frontend/src/routes/components/ArgInfo.svelte b/frontend/src/lib/components/ArgInfo.svelte
similarity index 100%
rename from frontend/src/routes/components/ArgInfo.svelte
rename to frontend/src/lib/components/ArgInfo.svelte
diff --git a/frontend/src/routes/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
similarity index 100%
rename from frontend/src/routes/components/ArgInput.svelte
rename to frontend/src/lib/components/ArgInput.svelte
diff --git a/frontend/src/routes/components/AutosizedTextarea.svelte b/frontend/src/lib/components/AutosizedTextarea.svelte
similarity index 100%
rename from frontend/src/routes/components/AutosizedTextarea.svelte
rename to frontend/src/lib/components/AutosizedTextarea.svelte
diff --git a/frontend/src/routes/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
similarity index 100%
rename from frontend/src/routes/components/Badge.svelte
rename to frontend/src/lib/components/Badge.svelte
diff --git a/frontend/src/routes/components/Button.svelte b/frontend/src/lib/components/Button.svelte
similarity index 100%
rename from frontend/src/routes/components/Button.svelte
rename to frontend/src/lib/components/Button.svelte
diff --git a/frontend/src/routes/components/ButtonAndDropdown.svelte b/frontend/src/lib/components/ButtonAndDropdown.svelte
similarity index 100%
rename from frontend/src/routes/components/ButtonAndDropdown.svelte
rename to frontend/src/lib/components/ButtonAndDropdown.svelte
diff --git a/frontend/src/routes/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte
similarity index 100%
rename from frontend/src/routes/components/CenteredPage.svelte
rename to frontend/src/lib/components/CenteredPage.svelte
diff --git a/frontend/src/routes/components/ChevronButton.svelte b/frontend/src/lib/components/ChevronButton.svelte
similarity index 100%
rename from frontend/src/routes/components/ChevronButton.svelte
rename to frontend/src/lib/components/ChevronButton.svelte
diff --git a/frontend/src/routes/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
similarity index 100%
rename from frontend/src/routes/components/DisplayResult.svelte
rename to frontend/src/lib/components/DisplayResult.svelte
diff --git a/frontend/src/routes/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
similarity index 100%
rename from frontend/src/routes/components/Dropdown.svelte
rename to frontend/src/lib/components/Dropdown.svelte
diff --git a/frontend/src/routes/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
similarity index 100%
rename from frontend/src/routes/components/Editor.svelte
rename to frontend/src/lib/components/Editor.svelte
diff --git a/frontend/src/routes/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
similarity index 100%
rename from frontend/src/routes/components/FieldHeader.svelte
rename to frontend/src/lib/components/FieldHeader.svelte
diff --git a/frontend/src/routes/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
similarity index 100%
rename from frontend/src/routes/components/FlowBuilder.svelte
rename to frontend/src/lib/components/FlowBuilder.svelte
diff --git a/frontend/src/routes/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
similarity index 100%
rename from frontend/src/routes/components/FlowEditor.svelte
rename to frontend/src/lib/components/FlowEditor.svelte
diff --git a/frontend/src/routes/components/FlowPreview.svelte b/frontend/src/lib/components/FlowPreview.svelte
similarity index 100%
rename from frontend/src/routes/components/FlowPreview.svelte
rename to frontend/src/lib/components/FlowPreview.svelte
diff --git a/frontend/src/routes/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
similarity index 100%
rename from frontend/src/routes/components/FlowStatusViewer.svelte
rename to frontend/src/lib/components/FlowStatusViewer.svelte
diff --git a/frontend/src/routes/components/GroupModal.svelte b/frontend/src/lib/components/GroupModal.svelte
similarity index 97%
rename from frontend/src/routes/components/GroupModal.svelte
rename to frontend/src/lib/components/GroupModal.svelte
index fa8e6b6480..52d9b533a6 100644
--- a/frontend/src/routes/components/GroupModal.svelte
+++ b/frontend/src/lib/components/GroupModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { userStore, workspaceStore } from '../../stores'
 
-	import Modal from '../../routes/components/Modal.svelte'
+	import Modal from './Modal.svelte'
 	import { type Group, GroupService, UserService } from '../../gen'
 	import AutoComplete from 'simple-svelte-autocomplete'
 	import PageHeader from './PageHeader.svelte'
diff --git a/frontend/src/routes/components/IconedResourceType.svelte b/frontend/src/lib/components/IconedResourceType.svelte
similarity index 100%
rename from frontend/src/routes/components/IconedResourceType.svelte
rename to frontend/src/lib/components/IconedResourceType.svelte
diff --git a/frontend/src/routes/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
similarity index 96%
rename from frontend/src/routes/components/InviteGlobalUser.svelte
rename to frontend/src/lib/components/InviteGlobalUser.svelte
index b1d1fe594c..a41cfc577e 100644
--- a/frontend/src/routes/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { sendUserToast } from '../../utils'
-	import Switch from '../components/Switch.svelte'
+	import Switch from './Switch.svelte'
 
 	import type Modal from './Modal.svelte'
 	import { createEventDispatcher } from 'svelte'
diff --git a/frontend/src/routes/components/InviteUser.svelte b/frontend/src/lib/components/InviteUser.svelte
similarity index 96%
rename from frontend/src/routes/components/InviteUser.svelte
rename to frontend/src/lib/components/InviteUser.svelte
index 1dec1a41a3..064c8120fd 100644
--- a/frontend/src/routes/components/InviteUser.svelte
+++ b/frontend/src/lib/components/InviteUser.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { sendUserToast } from '../../utils'
-	import Switch from '../components/Switch.svelte'
+	import Switch from './Switch.svelte'
 
 	import type Modal from './Modal.svelte'
 	import { createEventDispatcher } from 'svelte'
diff --git a/frontend/src/routes/components/ItemPicker.svelte b/frontend/src/lib/components/ItemPicker.svelte
similarity index 100%
rename from frontend/src/routes/components/ItemPicker.svelte
rename to frontend/src/lib/components/ItemPicker.svelte
diff --git a/frontend/src/routes/components/JobStatus.svelte b/frontend/src/lib/components/JobStatus.svelte
similarity index 100%
rename from frontend/src/routes/components/JobStatus.svelte
rename to frontend/src/lib/components/JobStatus.svelte
diff --git a/frontend/src/routes/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
similarity index 100%
rename from frontend/src/routes/components/Modal.svelte
rename to frontend/src/lib/components/Modal.svelte
diff --git a/frontend/src/routes/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
similarity index 100%
rename from frontend/src/routes/components/ModuleStep.svelte
rename to frontend/src/lib/components/ModuleStep.svelte
diff --git a/frontend/src/routes/components/Multiselect.svelte b/frontend/src/lib/components/Multiselect.svelte
similarity index 100%
rename from frontend/src/routes/components/Multiselect.svelte
rename to frontend/src/lib/components/Multiselect.svelte
diff --git a/frontend/src/routes/components/ObjectResourceInput.svelte b/frontend/src/lib/components/ObjectResourceInput.svelte
similarity index 100%
rename from frontend/src/routes/components/ObjectResourceInput.svelte
rename to frontend/src/lib/components/ObjectResourceInput.svelte
diff --git a/frontend/src/routes/components/ObjectTypeNarrowing.svelte b/frontend/src/lib/components/ObjectTypeNarrowing.svelte
similarity index 100%
rename from frontend/src/routes/components/ObjectTypeNarrowing.svelte
rename to frontend/src/lib/components/ObjectTypeNarrowing.svelte
diff --git a/frontend/src/routes/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
similarity index 100%
rename from frontend/src/routes/components/PageHeader.svelte
rename to frontend/src/lib/components/PageHeader.svelte
diff --git a/frontend/src/routes/components/Password.svelte b/frontend/src/lib/components/Password.svelte
similarity index 100%
rename from frontend/src/routes/components/Password.svelte
rename to frontend/src/lib/components/Password.svelte
diff --git a/frontend/src/routes/components/Path.svelte b/frontend/src/lib/components/Path.svelte
similarity index 100%
rename from frontend/src/routes/components/Path.svelte
rename to frontend/src/lib/components/Path.svelte
diff --git a/frontend/src/routes/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
similarity index 100%
rename from frontend/src/routes/components/RadioButton.svelte
rename to frontend/src/lib/components/RadioButton.svelte
diff --git a/frontend/src/routes/components/Required.svelte b/frontend/src/lib/components/Required.svelte
similarity index 100%
rename from frontend/src/routes/components/Required.svelte
rename to frontend/src/lib/components/Required.svelte
diff --git a/frontend/src/routes/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
similarity index 97%
rename from frontend/src/routes/components/ResourceEditor.svelte
rename to frontend/src/lib/components/ResourceEditor.svelte
index 4938cca10c..5a8b9d52a8 100644
--- a/frontend/src/routes/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -1,11 +1,6 @@
 <script lang="ts">
-	import {
-		type Resource,
-		ResourceService,
-		type ResourceType,
-		VariableService
-	} from '../../../src/gen'
-	import { allTrue, emptySchema, sendUserToast } from '../../../src/utils'
+	import { type Resource, ResourceService, type ResourceType, VariableService } from '../../gen'
+	import { allTrue, emptySchema, sendUserToast } from '../../utils'
 	import { createEventDispatcher } from 'svelte'
 	import type { Schema } from '../../common'
 	import Modal from './Modal.svelte'
diff --git a/frontend/src/routes/components/ResourcePicker.svelte b/frontend/src/lib/components/ResourcePicker.svelte
similarity index 100%
rename from frontend/src/routes/components/ResourcePicker.svelte
rename to frontend/src/lib/components/ResourcePicker.svelte
diff --git a/frontend/src/routes/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte
similarity index 100%
rename from frontend/src/routes/components/ResourceTypePicker.svelte
rename to frontend/src/lib/components/ResourceTypePicker.svelte
diff --git a/frontend/src/routes/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
similarity index 100%
rename from frontend/src/routes/components/RunForm.svelte
rename to frontend/src/lib/components/RunForm.svelte
diff --git a/frontend/src/routes/components/SchemaEditor.svelte b/frontend/src/lib/components/SchemaEditor.svelte
similarity index 100%
rename from frontend/src/routes/components/SchemaEditor.svelte
rename to frontend/src/lib/components/SchemaEditor.svelte
diff --git a/frontend/src/routes/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
similarity index 100%
rename from frontend/src/routes/components/SchemaForm.svelte
rename to frontend/src/lib/components/SchemaForm.svelte
diff --git a/frontend/src/routes/components/SchemaModal.svelte b/frontend/src/lib/components/SchemaModal.svelte
similarity index 98%
rename from frontend/src/routes/components/SchemaModal.svelte
rename to frontend/src/lib/components/SchemaModal.svelte
index 39c42ed52a..74006b8b0f 100644
--- a/frontend/src/routes/components/SchemaModal.svelte
+++ b/frontend/src/lib/components/SchemaModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
 	import type { SchemaProperty } from '../../common'
-	import Modal from '../../routes/components/Modal.svelte'
+	import Modal from './Modal.svelte'
 
 	export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'] as const
 	export type ArgType = typeof ARG_TYPES[number]
diff --git a/frontend/src/routes/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
similarity index 100%
rename from frontend/src/routes/components/SchemaViewer.svelte
rename to frontend/src/lib/components/SchemaViewer.svelte
diff --git a/frontend/src/routes/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
similarity index 100%
rename from frontend/src/routes/components/ScriptBuilder.svelte
rename to frontend/src/lib/components/ScriptBuilder.svelte
diff --git a/frontend/src/routes/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
similarity index 100%
rename from frontend/src/routes/components/ScriptEditor.svelte
rename to frontend/src/lib/components/ScriptEditor.svelte
diff --git a/frontend/src/routes/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
similarity index 100%
rename from frontend/src/routes/components/ScriptPicker.svelte
rename to frontend/src/lib/components/ScriptPicker.svelte
diff --git a/frontend/src/routes/components/ScriptSchema.svelte b/frontend/src/lib/components/ScriptSchema.svelte
similarity index 100%
rename from frontend/src/routes/components/ScriptSchema.svelte
rename to frontend/src/lib/components/ScriptSchema.svelte
diff --git a/frontend/src/routes/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
similarity index 100%
rename from frontend/src/routes/components/ShareModal.svelte
rename to frontend/src/lib/components/ShareModal.svelte
diff --git a/frontend/src/routes/components/SharedBadge.svelte b/frontend/src/lib/components/SharedBadge.svelte
similarity index 100%
rename from frontend/src/routes/components/SharedBadge.svelte
rename to frontend/src/lib/components/SharedBadge.svelte
diff --git a/frontend/src/routes/components/StringTypeNarrowing.svelte b/frontend/src/lib/components/StringTypeNarrowing.svelte
similarity index 100%
rename from frontend/src/routes/components/StringTypeNarrowing.svelte
rename to frontend/src/lib/components/StringTypeNarrowing.svelte
diff --git a/frontend/src/routes/components/Switch.svelte b/frontend/src/lib/components/Switch.svelte
similarity index 100%
rename from frontend/src/routes/components/Switch.svelte
rename to frontend/src/lib/components/Switch.svelte
diff --git a/frontend/src/routes/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
similarity index 100%
rename from frontend/src/routes/components/TableCustom.svelte
rename to frontend/src/lib/components/TableCustom.svelte
diff --git a/frontend/src/routes/components/TableSimple.svelte b/frontend/src/lib/components/TableSimple.svelte
similarity index 100%
rename from frontend/src/routes/components/TableSimple.svelte
rename to frontend/src/lib/components/TableSimple.svelte
diff --git a/frontend/src/routes/components/Tabs.svelte b/frontend/src/lib/components/Tabs.svelte
similarity index 100%
rename from frontend/src/routes/components/Tabs.svelte
rename to frontend/src/lib/components/Tabs.svelte
diff --git a/frontend/src/routes/components/Tooltip.svelte b/frontend/src/lib/components/Tooltip.svelte
similarity index 100%
rename from frontend/src/routes/components/Tooltip.svelte
rename to frontend/src/lib/components/Tooltip.svelte
diff --git a/frontend/src/routes/components/VariableEditor.svelte b/frontend/src/lib/components/VariableEditor.svelte
similarity index 96%
rename from frontend/src/routes/components/VariableEditor.svelte
rename to frontend/src/lib/components/VariableEditor.svelte
index 91865b4831..5f368a459b 100644
--- a/frontend/src/routes/components/VariableEditor.svelte
+++ b/frontend/src/lib/components/VariableEditor.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import Password from '../components/Password.svelte'
+	import Password from './Password.svelte'
 	import { sendUserToast } from '../../utils'
 	import { VariableService } from '../../gen'
-	import AutosizedTextarea from '../components/AutosizedTextarea.svelte'
-	import Path from '../components/Path.svelte'
+	import AutosizedTextarea from './AutosizedTextarea.svelte'
+	import Path from './Path.svelte'
 	import Modal from './Modal.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { workspaceStore } from '../../stores'
diff --git a/frontend/src/routes/components/icons/DbIcon.svelte b/frontend/src/lib/components/icons/DbIcon.svelte
similarity index 100%
rename from frontend/src/routes/components/icons/DbIcon.svelte
rename to frontend/src/lib/components/icons/DbIcon.svelte
diff --git a/frontend/src/routes/components/icons/Mail.svelte b/frontend/src/lib/components/icons/Mail.svelte
similarity index 100%
rename from frontend/src/routes/components/icons/Mail.svelte
rename to frontend/src/lib/components/icons/Mail.svelte
diff --git a/frontend/src/routes/components/icons/Mysql.svelte b/frontend/src/lib/components/icons/Mysql.svelte
similarity index 100%
rename from frontend/src/routes/components/icons/Mysql.svelte
rename to frontend/src/lib/components/icons/Mysql.svelte
diff --git a/frontend/src/routes/components/icons/PostgresIcon.svelte b/frontend/src/lib/components/icons/PostgresIcon.svelte
similarity index 100%
rename from frontend/src/routes/components/icons/PostgresIcon.svelte
rename to frontend/src/lib/components/icons/PostgresIcon.svelte
diff --git a/frontend/src/routes/components/icons/Slack.svelte b/frontend/src/lib/components/icons/Slack.svelte
similarity index 100%
rename from frontend/src/routes/components/icons/Slack.svelte
rename to frontend/src/lib/components/icons/Slack.svelte
diff --git a/frontend/src/routes/audit_logs.svelte b/frontend/src/routes/audit_logs.svelte
index 543bd5e11f..14ad6a0c2d 100644
--- a/frontend/src/routes/audit_logs.svelte
+++ b/frontend/src/routes/audit_logs.svelte
@@ -4,10 +4,10 @@
 	import { page } from '$app/stores'
 	import { displayDate, sendUserToast } from '../utils'
 	import { goto } from '$app/navigation'
-	import PageHeader from './components/PageHeader.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { userStore, workspaceStore } from '../stores'
-	import TableCustom from './components/TableCustom.svelte'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 	import { faCross, faEdit, faPlay, faPlus, faQuestion } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/frontend/src/routes/connection_added.svelte b/frontend/src/routes/connection_added.svelte
index cb63e7a8c5..315c1ff58d 100644
--- a/frontend/src/routes/connection_added.svelte
+++ b/frontend/src/routes/connection_added.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation'
 	import { page } from '$app/stores'
 	import { sendUserToast } from '../utils'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 
 	let error = $page.url.searchParams.get('error')
 	let client_name = $page.url.searchParams.get('client_name')
diff --git a/frontend/src/routes/flows.svelte b/frontend/src/routes/flows.svelte
index a01b63c499..c1886b8918 100644
--- a/frontend/src/routes/flows.svelte
+++ b/frontend/src/routes/flows.svelte
@@ -16,14 +16,14 @@
 		faShare
 	} from '@fortawesome/free-solid-svg-icons'
 
-	import Dropdown from './components/Dropdown.svelte'
-	import PageHeader from './components/PageHeader.svelte'
-	import Tooltip from './components/Tooltip.svelte'
-	import ShareModal from './components/ShareModal.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import { superadmin, userStore, workspaceStore } from '../stores'
-	import CenteredPage from './components/CenteredPage.svelte'
-	import Tabs from './components/Tabs.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import Tabs from '$lib/components/Tabs.svelte'
 
 	type Tab = 'all' | 'personal' | 'groups' | 'shared'
 	type Section = [string, FlowW[]]
diff --git a/frontend/src/routes/flows/add.svelte b/frontend/src/routes/flows/add.svelte
index 76bf7bd263..d2770e5a00 100644
--- a/frontend/src/routes/flows/add.svelte
+++ b/frontend/src/routes/flows/add.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores'
 
-	import FlowBuilder from '../components/FlowBuilder.svelte'
+	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import type { Flow } from '../../gen'
 	import { emptySchema } from '../../utils'
 
diff --git a/frontend/src/routes/flows/edit/[...path].svelte b/frontend/src/routes/flows/edit/[...path].svelte
index 3065368725..6b172b893a 100644
--- a/frontend/src/routes/flows/edit/[...path].svelte
+++ b/frontend/src/routes/flows/edit/[...path].svelte
@@ -3,7 +3,7 @@
 
 	import { page } from '$app/stores'
 	import { workspaceStore } from '../../../stores'
-	import FlowBuilder from '../../components/FlowBuilder.svelte'
+	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { emptySchema } from '../../../utils'
 
 	const initialState = $page.url.searchParams.get('state')
diff --git a/frontend/src/routes/flows/get/[...path].svelte b/frontend/src/routes/flows/get/[...path].svelte
index 982b784bc3..6c7d22668f 100644
--- a/frontend/src/routes/flows/get/[...path].svelte
+++ b/frontend/src/routes/flows/get/[...path].svelte
@@ -15,14 +15,14 @@
 	import json from 'svelte-highlight/languages/json'
 
 	import github from 'svelte-highlight/styles/github'
-	import Tooltip from '../../components/Tooltip.svelte'
-	import ShareModal from '../../components/ShareModal.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
 	import { userStore, workspaceStore } from '../../../stores'
-	import SharedBadge from '../../components/SharedBadge.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
-	import SchemaViewer from '../../components/SchemaViewer.svelte'
-	import Dropdown from '../../components/Dropdown.svelte'
-	import CenteredPage from '../../components/CenteredPage.svelte'
+	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 
 	let flow: Flow | undefined
 	let can_write = false
diff --git a/frontend/src/routes/flows/run/[...path].svelte b/frontend/src/routes/flows/run/[...path].svelte
index 3656673710..5165c0ba7a 100644
--- a/frontend/src/routes/flows/run/[...path].svelte
+++ b/frontend/src/routes/flows/run/[...path].svelte
@@ -4,9 +4,9 @@
 	import { FlowService, type Flow, JobService } from '../../../gen'
 	import { goto } from '$app/navigation'
 	import { workspaceStore } from '../../../stores'
-	import CenteredPage from '../../components/CenteredPage.svelte'
-	import RunForm from '../../components/RunForm.svelte'
-	import PageHeader from '../../components/PageHeader.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import RunForm from '$lib/components/RunForm.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 
 	const path = $page.params.path
 	let flow: Flow | undefined
diff --git a/frontend/src/routes/groups.svelte b/frontend/src/routes/groups.svelte
index 5a252a994d..80dca22b2c 100644
--- a/frontend/src/routes/groups.svelte
+++ b/frontend/src/routes/groups.svelte
@@ -3,16 +3,16 @@
 	import { GroupService } from '../gen'
 	import type { Group } from '../gen'
 
-	import PageHeader from './components/PageHeader.svelte'
-	import TableCustom from './components/TableCustom.svelte'
-	import Dropdown from './components/Dropdown.svelte'
-	import ShareModal from './components/ShareModal.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import { faEdit, faPlus, faShare } from '@fortawesome/free-solid-svg-icons'
 	import { userStore, workspaceStore } from '../stores'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
-	import GroupModal from './components/GroupModal.svelte'
+	import GroupModal from '$lib/components/GroupModal.svelte'
 
 	type GroupW = Group & { canWrite: boolean }
 
diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
index 036ae970b2..c160bc91f9 100644
--- a/frontend/src/routes/index.svelte
+++ b/frontend/src/routes/index.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 
 	goto('/scripts')
 </script>
diff --git a/frontend/src/routes/resources.svelte b/frontend/src/routes/resources.svelte
index aaa7109f47..aa93af5e16 100644
--- a/frontend/src/routes/resources.svelte
+++ b/frontend/src/routes/resources.svelte
@@ -2,27 +2,27 @@
 	import { canWrite, emptySchema, sendUserToast } from '../utils'
 	import { ResourceService } from '../gen'
 	import type { Resource, ResourceType } from '../gen'
-	import PageHeader from './components/PageHeader.svelte'
-	import ResourceEditor from './components/ResourceEditor.svelte'
-	import Button from './components/Button.svelte'
-	import TableCustom from './components/TableCustom.svelte'
-	import Modal from './components/Modal.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import ResourceEditor from '$lib/components/ResourceEditor.svelte'
+	import Button from '$lib/components/Button.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import Modal from '$lib/components/Modal.svelte'
 	import Highlight from 'svelte-highlight'
 	import json from 'svelte-highlight/languages/json'
 	import github from 'svelte-highlight/styles/github'
-	import IconedResourceType from './components/IconedResourceType.svelte'
-	import ShareModal from './components/ShareModal.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
+	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
 	import { userStore, workspaceStore, type UserExt } from '../stores'
-	import SchemaEditor from './components/SchemaEditor.svelte'
+	import SchemaEditor from '$lib/components/SchemaEditor.svelte'
 	import type { Schema } from '../common'
-	import SchemaViewer from './components/SchemaViewer.svelte'
-	import Dropdown from './components/Dropdown.svelte'
+	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
 	import { faEdit, faPlus, faShare, faTrash } from '@fortawesome/free-solid-svg-icons'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
-	import Required from './components/Required.svelte'
+	import Required from '$lib/components/Required.svelte'
 
 	type ResourceW = Resource & { canWrite: boolean }
 	type ResourceTypeW = ResourceType & { canWrite: boolean }
diff --git a/frontend/src/routes/run/[...run].svelte b/frontend/src/routes/run/[...run].svelte
index c91ed303c7..c00557a9fa 100644
--- a/frontend/src/routes/run/[...run].svelte
+++ b/frontend/src/routes/run/[...run].svelte
@@ -28,18 +28,18 @@
 		faScroll,
 		faWind
 	} from '@fortawesome/free-solid-svg-icons'
-	import Tooltip from '../components/Tooltip.svelte'
-	import DisplayResult from '../components/DisplayResult.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import DisplayResult from '$lib/components/DisplayResult.svelte'
 
 	import Highlight from 'svelte-highlight'
 	import { python, typescript } from 'svelte-highlight/languages'
 	import github from 'svelte-highlight/styles/github'
 	import { userStore, workspaceStore } from '../../stores'
-	import CenteredPage from '../components/CenteredPage.svelte'
-	import FlowStatusViewer from '../components/FlowStatusViewer.svelte'
-	import JobStatus from '../components/JobStatus.svelte'
-	import TableCustom from '../components/TableCustom.svelte'
-	import ArgInfo from '../components/ArgInfo.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import FlowStatusViewer from '$lib/components/FlowStatusViewer.svelte'
+	import JobStatus from '$lib/components/JobStatus.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import ArgInfo from '$lib/components/ArgInfo.svelte'
 
 	let workspace_id_query: string | undefined = $page.url.searchParams.get('workspace') ?? undefined
 	let workspace_id: string | undefined
diff --git a/frontend/src/routes/runs/[...path].svelte b/frontend/src/routes/runs/[...path].svelte
index 7d36246832..214d67b939 100644
--- a/frontend/src/routes/runs/[...path].svelte
+++ b/frontend/src/routes/runs/[...path].svelte
@@ -17,10 +17,10 @@
 	import { page } from '$app/stores'
 	import { sendUserToast } from '../../utils'
 	import { goto } from '$app/navigation'
-	import PageHeader from '../components/PageHeader.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { workspaceStore } from '../../stores'
-	import CenteredPage from '../components/CenteredPage.svelte'
-	import Tabs from '../components/Tabs.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import Tabs from '$lib/components/Tabs.svelte'
 
 	let jobs: Job[] | undefined
 	let error: Error | undefined
diff --git a/frontend/src/routes/schedule/add.svelte b/frontend/src/routes/schedule/add.svelte
index 9460321a21..3edf107e40 100644
--- a/frontend/src/routes/schedule/add.svelte
+++ b/frontend/src/routes/schedule/add.svelte
@@ -3,16 +3,16 @@
 	import { sendUserToast, displayDate } from '../../utils'
 	import { ScriptService, type Script, ScheduleService, type Flow, FlowService } from '../../gen'
 
-	import PageHeader from '../components/PageHeader.svelte'
-	import Path from '../components/Path.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import Path from '$lib/components/Path.svelte'
 
-	import Tooltip from '../components/Tooltip.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { goto } from '$app/navigation'
 	import { workspaceStore } from '../../stores'
-	import CenteredPage from '../components/CenteredPage.svelte'
-	import SchemaForm from '../components/SchemaForm.svelte'
-	import ScriptPicker from '../components/ScriptPicker.svelte'
-	import Required from '../components/Required.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
+	import Required from '$lib/components/Required.svelte'
 
 	let initialPath = $page.url.searchParams.get('edit') || ''
 	let edit = initialPath === '' ? false : true
diff --git a/frontend/src/routes/schedules.svelte b/frontend/src/routes/schedules.svelte
index 866a4300e5..62f31036ce 100644
--- a/frontend/src/routes/schedules.svelte
+++ b/frontend/src/routes/schedules.svelte
@@ -2,12 +2,12 @@
 	import { sendUserToast, displayDate, canWrite } from '../utils'
 	import { type Schedule, ScheduleService } from '../gen'
 
-	import PageHeader from './components/PageHeader.svelte'
-	import TableCustom from './components/TableCustom.svelte'
-	import Dropdown from './components/Dropdown.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
 	import { goto } from '$app/navigation'
-	import ShareModal from './components/ShareModal.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import {
 		faEdit,
 		faPlus,
@@ -16,7 +16,7 @@
 		faToggleOn
 	} from '@fortawesome/free-solid-svg-icons'
 	import { userStore, workspaceStore } from '../stores'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 
 	type ScheduleW = Schedule & { canWrite: boolean }
diff --git a/frontend/src/routes/scripts.svelte b/frontend/src/routes/scripts.svelte
index 303adcfa50..90fc75b575 100644
--- a/frontend/src/routes/scripts.svelte
+++ b/frontend/src/routes/scripts.svelte
@@ -15,15 +15,15 @@
 	import { ScriptService } from '../gen'
 	import { superadmin, userStore, workspaceStore } from '../stores'
 	import { canWrite, groupBy, sendUserToast, truncateHash } from '../utils'
-	import Badge from './components/Badge.svelte'
-	import CenteredPage from './components/CenteredPage.svelte'
-	import Dropdown from './components/Dropdown.svelte'
-	import Modal from './components/Modal.svelte'
-	import PageHeader from './components/PageHeader.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
-	import ShareModal from './components/ShareModal.svelte'
-	import Tabs from './components/Tabs.svelte'
-	import Tooltip from './components/Tooltip.svelte'
+	import Badge from '$lib/components/Badge.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import Modal from '$lib/components/Modal.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import Tabs from '$lib/components/Tabs.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	type Tab = 'all' | 'personal' | 'groups' | 'shared' | 'community'
 	type Section = [string, ScriptW[]]
diff --git a/frontend/src/routes/scripts/add.svelte b/frontend/src/routes/scripts/add.svelte
index b9660c416c..92f3c92a01 100644
--- a/frontend/src/routes/scripts/add.svelte
+++ b/frontend/src/routes/scripts/add.svelte
@@ -3,7 +3,7 @@
 
 	import { page } from '$app/stores'
 	import { workspaceStore } from '../../stores'
-	import ScriptBuilder from '../components/ScriptBuilder.svelte'
+	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import type { Schema } from '../../common'
 	import { emptySchema, sendUserToast } from '../../utils'
 
diff --git a/frontend/src/routes/scripts/edit/[...hash].svelte b/frontend/src/routes/scripts/edit/[...hash].svelte
index 1533c672e2..30ff6657d7 100644
--- a/frontend/src/routes/scripts/edit/[...hash].svelte
+++ b/frontend/src/routes/scripts/edit/[...hash].svelte
@@ -3,7 +3,7 @@
 
 	import { page } from '$app/stores'
 	import { workspaceStore } from '../../../stores'
-	import ScriptBuilder from '../../components/ScriptBuilder.svelte'
+	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 
 	const initialState = $page.url.searchParams.get('state')
 	let scriptLoadedFromUrl = initialState != undefined ? JSON.parse(atob(initialState)) : undefined
diff --git a/frontend/src/routes/scripts/get/[...hash].svelte b/frontend/src/routes/scripts/get/[...hash].svelte
index 66ef137530..67479ec9b8 100644
--- a/frontend/src/routes/scripts/get/[...hash].svelte
+++ b/frontend/src/routes/scripts/get/[...hash].svelte
@@ -17,14 +17,14 @@
 	import { typescript, python } from 'svelte-highlight/languages'
 
 	import github from 'svelte-highlight/styles/github'
-	import Tooltip from '../../components/Tooltip.svelte'
-	import ShareModal from '../../components/ShareModal.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
 	import { userStore, workspaceStore } from '../../../stores'
-	import SharedBadge from '../../components/SharedBadge.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
 	import SvelteMarkdown from 'svelte-markdown'
-	import SchemaViewer from '../../components/SchemaViewer.svelte'
-	import Dropdown from '../../components/Dropdown.svelte'
-	import CenteredPage from '../../components/CenteredPage.svelte'
+	import SchemaViewer from '$lib/components/SchemaViewer.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { onDestroy } from 'svelte'
 
 	let script: Script | undefined
diff --git a/frontend/src/routes/scripts/run/[...hash].svelte b/frontend/src/routes/scripts/run/[...hash].svelte
index 044cb96584..b9c3316d56 100644
--- a/frontend/src/routes/scripts/run/[...hash].svelte
+++ b/frontend/src/routes/scripts/run/[...hash].svelte
@@ -5,9 +5,9 @@
 	import { goto } from '$app/navigation'
 	import { workspaceStore } from '../../../stores'
 	import { inferArgs } from '../../../infer'
-	import CenteredPage from '../../components/CenteredPage.svelte'
-	import RunForm from '../../components/RunForm.svelte'
-	import PageHeader from '../../components/PageHeader.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
+	import RunForm from '$lib/components/RunForm.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 
 	const hash = $page.params.hash
 	let script: Script | undefined
diff --git a/frontend/src/routes/user/settings@user.svelte b/frontend/src/routes/user/settings@user.svelte
index 9e4e9c5ae9..78cf27ac86 100644
--- a/frontend/src/routes/user/settings@user.svelte
+++ b/frontend/src/routes/user/settings@user.svelte
@@ -4,10 +4,10 @@
 	import type { TruncatedToken, NewToken } from '../../gen'
 	import { UserService, SettingsService } from '../../gen'
 	import { displayDate, sendUserToast, getToday } from '../../utils'
-	import PageHeader from './../components/PageHeader.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 	import Icon from 'svelte-awesome'
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
-	import TableCustom from '../components/TableCustom.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
 	import CenteredModal from './CenteredModal.svelte'
 
 	let newPassword: string | undefined
diff --git a/frontend/src/routes/user/superadmin_settings@user.svelte b/frontend/src/routes/user/superadmin_settings@user.svelte
index 473ecbd0ca..36fcab0853 100644
--- a/frontend/src/routes/user/superadmin_settings@user.svelte
+++ b/frontend/src/routes/user/superadmin_settings@user.svelte
@@ -7,10 +7,10 @@
 	import { displayDate, sendUserToast, getToday } from '../../utils'
 	import Icon from 'svelte-awesome'
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
-	import TableCustom from '../components/TableCustom.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
 	import CenteredModal from './CenteredModal.svelte'
-	import PageHeader from '../components/PageHeader.svelte'
-	import InviteGlobalUser from '../components/InviteGlobalUser.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import InviteGlobalUser from '$lib/components/InviteGlobalUser.svelte'
 
 	let version: string | undefined
 	let users: GlobalUserInfo[] = []
diff --git a/frontend/src/routes/user/workspaces@user.svelte b/frontend/src/routes/user/workspaces@user.svelte
index 3d0e51989c..88ea61cd17 100644
--- a/frontend/src/routes/user/workspaces@user.svelte
+++ b/frontend/src/routes/user/workspaces@user.svelte
@@ -5,7 +5,7 @@
 	import { UserService, type WorkspaceInvite, WorkspaceService } from '../../gen'
 	import { superadmin, usersWorkspaceStore, workspaceStore } from '../../stores'
 	import CenteredModal from './CenteredModal.svelte'
-	import Switch from '../components/Switch.svelte'
+	import Switch from '$lib/components/Switch.svelte'
 	import { faCrown, faUser, faUserAlt, faUserCog } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 
diff --git a/frontend/src/routes/variables.svelte b/frontend/src/routes/variables.svelte
index d7d24b8ab7..577c2459f0 100644
--- a/frontend/src/routes/variables.svelte
+++ b/frontend/src/routes/variables.svelte
@@ -2,15 +2,15 @@
 	import { canWrite, sendUserToast } from '../utils'
 	import { VariableService } from '../gen'
 	import type { ListableVariable, ContextualVariable } from '../gen'
-	import Dropdown from './components/Dropdown.svelte'
-	import PageHeader from './components/PageHeader.svelte'
-	import TableSimple from './components/TableSimple.svelte'
-	import TableCustom from './components/TableCustom.svelte'
-	import ShareModal from './components/ShareModal.svelte'
-	import SharedBadge from './components/SharedBadge.svelte'
-	import VariableEditor from './components/VariableEditor.svelte'
+	import Dropdown from '$lib/components/Dropdown.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import TableSimple from '$lib/components/TableSimple.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import ShareModal from '$lib/components/ShareModal.svelte'
+	import SharedBadge from '$lib/components/SharedBadge.svelte'
+	import VariableEditor from '$lib/components/VariableEditor.svelte'
 	import { userStore, workspaceStore } from './../stores'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 	import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/frontend/src/routes/workers.svelte b/frontend/src/routes/workers.svelte
index 0fcb751510..cb77c923aa 100644
--- a/frontend/src/routes/workers.svelte
+++ b/frontend/src/routes/workers.svelte
@@ -2,9 +2,9 @@
 	import { WorkerService, type WorkerPing } from '../gen'
 	import { onDestroy, onMount } from 'svelte'
 	import { displayDate, elapsedSinceSecs, groupBy, sendUserToast } from '../utils'
-	import PageHeader from './components/PageHeader.svelte'
-	import TableCustom from './components/TableCustom.svelte'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 
 	let workers: WorkerPing[] = []
 	let filteredWorkers: WorkerPing[] = []
diff --git a/frontend/src/routes/workspace_settings.svelte b/frontend/src/routes/workspace_settings.svelte
index b8e009ef5b..b4e2e761c1 100644
--- a/frontend/src/routes/workspace_settings.svelte
+++ b/frontend/src/routes/workspace_settings.svelte
@@ -3,15 +3,15 @@
 	import { UserService, type WorkspaceInvite, WorkspaceService } from '../gen'
 	import type { User } from '../gen'
 	import { sendUserToast } from '../utils'
-	import PageHeader from './components/PageHeader.svelte'
+	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { userStore, usersWorkspaceStore, workspaceStore } from '../stores'
-	import CenteredPage from './components/CenteredPage.svelte'
+	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import Icon from 'svelte-awesome'
 	import { faSlack } from '@fortawesome/free-brands-svg-icons'
-	import TableCustom from './components/TableCustom.svelte'
+	import TableCustom from '$lib/components/TableCustom.svelte'
 	import { goto } from '$app/navigation'
-	import InviteUser from './components/InviteUser.svelte'
-	import ScriptPicker from './components/ScriptPicker.svelte'
+	import InviteUser from '$lib/components/InviteUser.svelte'
+	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 
 	let users: User[] = []
 	let invites: WorkspaceInvite[] = []