diff --git a/control/frontend/src/components/Button.svelte b/control/frontend/src/lib/components/Button.svelte
similarity index 100%
rename from control/frontend/src/components/Button.svelte
rename to control/frontend/src/lib/components/Button.svelte
diff --git a/control/frontend/src/components/ControlView.svelte b/control/frontend/src/lib/components/ControlView.svelte
similarity index 99%
rename from control/frontend/src/components/ControlView.svelte
rename to control/frontend/src/lib/components/ControlView.svelte
index 289f82c..bc78615 100644
--- a/control/frontend/src/components/ControlView.svelte
+++ b/control/frontend/src/lib/components/ControlView.svelte
@@ -11,6 +11,7 @@
 		TextAlignStart,
 		TrafficCone
 	} from 'lucide-svelte';
+	import { onMount } from 'svelte';
 	import Button from './Button.svelte';
 	import PopUp from './PopUp.svelte';
 	import type { PopupContent } from '../ts/types';
diff --git a/control/frontend/src/components/DNDGrip.svelte b/control/frontend/src/lib/components/DNDGrip.svelte
similarity index 100%
rename from control/frontend/src/components/DNDGrip.svelte
rename to control/frontend/src/lib/components/DNDGrip.svelte
diff --git a/control/frontend/src/components/DisplayGroupObject.svelte b/control/frontend/src/lib/components/DisplayGroupObject.svelte
similarity index 100%
rename from control/frontend/src/components/DisplayGroupObject.svelte
rename to control/frontend/src/lib/components/DisplayGroupObject.svelte
diff --git a/control/frontend/src/components/DisplayObject.svelte b/control/frontend/src/lib/components/DisplayObject.svelte
similarity index 100%
rename from control/frontend/src/components/DisplayObject.svelte
rename to control/frontend/src/lib/components/DisplayObject.svelte
diff --git a/control/frontend/src/components/DisplayView.svelte b/control/frontend/src/lib/components/DisplayView.svelte
similarity index 100%
rename from control/frontend/src/components/DisplayView.svelte
rename to control/frontend/src/lib/components/DisplayView.svelte
diff --git a/control/frontend/src/components/FileView.svelte b/control/frontend/src/lib/components/FileView.svelte
similarity index 100%
rename from control/frontend/src/components/FileView.svelte
rename to control/frontend/src/lib/components/FileView.svelte
diff --git a/control/frontend/src/components/HighlightedText.svelte b/control/frontend/src/lib/components/HighlightedText.svelte
similarity index 100%
rename from control/frontend/src/components/HighlightedText.svelte
rename to control/frontend/src/lib/components/HighlightedText.svelte
diff --git a/control/frontend/src/components/InodeElement.svelte b/control/frontend/src/lib/components/InodeElement.svelte
similarity index 95%
rename from control/frontend/src/components/InodeElement.svelte
rename to control/frontend/src/lib/components/InodeElement.svelte
index 91c4ff8..d20ced7 100755
--- a/control/frontend/src/components/InodeElement.svelte
+++ b/control/frontend/src/lib/components/InodeElement.svelte
@@ -4,26 +4,26 @@
 		current_height,
 		get_selectable_color_classes,
 		get_shifted_color
-	} from '../ts/stores/ui_behavior';
+	} from '$lib/ts/stores/ui_behavior';
 	import Button from './Button.svelte';
-	import { supported_file_type_icon, type Inode, get_file_primary_key } from '../ts/types';
+	import { supported_file_type_icon, type Inode, get_file_primary_key } from '$lib/ts/types';
 
 	import {
 		is_selected,
 		select,
 		selected_display_ids,
 		selected_file_ids
-	} from '../ts/stores/select';
+	} from '$lib/ts/stores/select';
 	import {
 		change_file_path,
 		current_file_path,
 		get_missing_colliding_display_ids
-	} from '../ts/stores/files';
+	} from '$lib/ts/stores/files';
 	import RefreshPlay from './RefreshPlay.svelte';
-	import { get_file_size_display_string, get_file_type } from '../ts/utils';
-	import { open_file } from '../ts/api_handler';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
-	import { get_thumbnail_url } from '../ts/stores/thumbnails';
+	import { get_file_size_display_string, get_file_type } from '$lib/ts/utils';
+	import { open_file } from '$lib/ts/api_handler';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import { get_thumbnail_url } from '$lib/ts/stores/thumbnails';
 	import { liveQuery } from 'dexie';
 
 	let { file, not_interactable = false }: { file: Inode; not_interactable?: boolean } = $props();
diff --git a/control/frontend/src/components/KeyInput.svelte b/control/frontend/src/lib/components/KeyInput.svelte
similarity index 85%
rename from control/frontend/src/components/KeyInput.svelte
rename to control/frontend/src/lib/components/KeyInput.svelte
index e98591c..ef878e6 100644
--- a/control/frontend/src/components/KeyInput.svelte
+++ b/control/frontend/src/lib/components/KeyInput.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { flip } from 'svelte/animate';
-	import { get_selectable_color_classes } from '../ts/stores/ui_behavior';
-	import key_map_json from './../../../../shared/keys.json';
+	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
+	import key_map_json from './../../../../../shared/keys.json';
 	import { fade } from 'svelte/transition';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
-	import { send_keyboard_input } from '../ts/api_handler';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import { send_keyboard_input } from '$lib/ts/api_handler';
 
 	const key_map: Record<string, string> = key_map_json as Record<string, string>;
 
diff --git a/control/frontend/src/components/Notification.svelte b/control/frontend/src/lib/components/Notification.svelte
similarity index 95%
rename from control/frontend/src/components/Notification.svelte
rename to control/frontend/src/lib/components/Notification.svelte
index 3991c54..ebaf9a1 100644
--- a/control/frontend/src/components/Notification.svelte
+++ b/control/frontend/src/lib/components/Notification.svelte
@@ -2,7 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import Button from './Button.svelte';
 	import { X } from 'lucide-svelte';
-	import { notifications } from '../ts/stores/notification';
+	import { notifications } from '$lib/ts/stores/notification';
 </script>
 
 <div
diff --git a/control/frontend/src/components/OnlineState.svelte b/control/frontend/src/lib/components/OnlineState.svelte
similarity index 86%
rename from control/frontend/src/components/OnlineState.svelte
rename to control/frontend/src/lib/components/OnlineState.svelte
index a217120..25c476c 100644
--- a/control/frontend/src/components/OnlineState.svelte
+++ b/control/frontend/src/lib/components/OnlineState.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { type DisplayStatus } from '../ts/types';
-	import { display_status_to_info } from '../ts/utils';
+	import { type DisplayStatus } from '$lib/ts/types';
+	import { display_status_to_info } from '$lib/ts/utils';
 
 	let {
 		selected,
diff --git a/control/frontend/src/components/PathBar.svelte b/control/frontend/src/lib/components/PathBar.svelte
similarity index 97%
rename from control/frontend/src/components/PathBar.svelte
rename to control/frontend/src/lib/components/PathBar.svelte
index aa7b4b0..864da83 100644
--- a/control/frontend/src/components/PathBar.svelte
+++ b/control/frontend/src/lib/components/PathBar.svelte
@@ -2,8 +2,8 @@
 	import { ChevronRight, House } from 'lucide-svelte';
 	import Button from './Button.svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import type { MenuOption } from '../ts/types';
-	import { change_file_path, current_file_path } from '../ts/stores/files';
+	import type { MenuOption } from '$lib/ts/types';
+	import { change_file_path, current_file_path } from '$lib/ts/stores/files';
 	import { flip } from 'svelte/animate';
 	import { cubicOut } from 'svelte/easing';
 
diff --git a/control/frontend/src/components/PopUp.svelte b/control/frontend/src/lib/components/PopUp.svelte
similarity index 96%
rename from control/frontend/src/components/PopUp.svelte
rename to control/frontend/src/lib/components/PopUp.svelte
index efe809f..5533aa2 100644
--- a/control/frontend/src/components/PopUp.svelte
+++ b/control/frontend/src/lib/components/PopUp.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { X } from 'lucide-svelte';
 	import Button from './Button.svelte';
-	import type { PopupContent } from '../ts/types';
+	import type { PopupContent } from '$lib/ts/types';
 	import { fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
 
 	let {
 		content,
diff --git a/control/frontend/src/components/RefreshPlay.svelte b/control/frontend/src/lib/components/RefreshPlay.svelte
similarity index 100%
rename from control/frontend/src/components/RefreshPlay.svelte
rename to control/frontend/src/lib/components/RefreshPlay.svelte
diff --git a/control/frontend/src/components/TextInput.svelte b/control/frontend/src/lib/components/TextInput.svelte
similarity index 96%
rename from control/frontend/src/components/TextInput.svelte
rename to control/frontend/src/lib/components/TextInput.svelte
index b6f8ae5..c86d3dc 100644
--- a/control/frontend/src/components/TextInput.svelte
+++ b/control/frontend/src/lib/components/TextInput.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { get_shifted_color } from '../ts/stores/ui_behavior';
+	import { get_shifted_color } from '$lib/ts/stores/ui_behavior';
 	import { onMount } from 'svelte';
-	import { selected_display_ids } from '../ts/stores/select';
+	import { selected_display_ids } from '$lib/ts/stores/select';
 
 	let {
 		current_value = $bindable(),
diff --git a/control/frontend/src/components/TipTapInput.svelte b/control/frontend/src/lib/components/TipTapInput.svelte
similarity index 96%
rename from control/frontend/src/components/TipTapInput.svelte
rename to control/frontend/src/lib/components/TipTapInput.svelte
index de2bb55..8f218e0 100644
--- a/control/frontend/src/components/TipTapInput.svelte
+++ b/control/frontend/src/lib/components/TipTapInput.svelte
@@ -13,9 +13,9 @@
 		Strikethrough
 	} from 'lucide-svelte';
 	import Button from './Button.svelte';
-	import { run_on_all_selected_displays } from '../ts/stores/displays';
-	import { show_html } from '../ts/api_handler';
-	import { get_selectable_color_classes } from '../ts/stores/ui_behavior';
+	import { run_on_all_selected_displays } from '$lib/ts/stores/displays';
+	import { show_html } from '$lib/ts/api_handler';
+	import { get_selectable_color_classes } from '$lib/ts/stores/ui_behavior';
 	import { TextStyle } from '@tiptap/extension-text-style';
 	import { Color } from '@tiptap/extension-text-style';
 	import Highlight from '@tiptap/extension-highlight';
diff --git a/control/frontend/src/ts/api_handler.ts b/control/frontend/src/lib/ts/api_handler.ts
similarity index 100%
rename from control/frontend/src/ts/api_handler.ts
rename to control/frontend/src/lib/ts/api_handler.ts
diff --git a/control/frontend/src/ts/files_display.db.ts b/control/frontend/src/lib/ts/files_display.db.ts
similarity index 100%
rename from control/frontend/src/ts/files_display.db.ts
rename to control/frontend/src/lib/ts/files_display.db.ts
diff --git a/control/frontend/src/ts/main.ts b/control/frontend/src/lib/ts/main.ts
similarity index 100%
rename from control/frontend/src/ts/main.ts
rename to control/frontend/src/lib/ts/main.ts
diff --git a/control/frontend/src/ts/stores/displays.ts b/control/frontend/src/lib/ts/stores/displays.ts
similarity index 100%
rename from control/frontend/src/ts/stores/displays.ts
rename to control/frontend/src/lib/ts/stores/displays.ts
diff --git a/control/frontend/src/ts/stores/files.ts b/control/frontend/src/lib/ts/stores/files.ts
similarity index 100%
rename from control/frontend/src/ts/stores/files.ts
rename to control/frontend/src/lib/ts/stores/files.ts
diff --git a/control/frontend/src/ts/stores/notification.ts b/control/frontend/src/lib/ts/stores/notification.ts
similarity index 100%
rename from control/frontend/src/ts/stores/notification.ts
rename to control/frontend/src/lib/ts/stores/notification.ts
diff --git a/control/frontend/src/ts/stores/select.ts b/control/frontend/src/lib/ts/stores/select.ts
similarity index 100%
rename from control/frontend/src/ts/stores/select.ts
rename to control/frontend/src/lib/ts/stores/select.ts
diff --git a/control/frontend/src/ts/stores/thumbnails.ts b/control/frontend/src/lib/ts/stores/thumbnails.ts
similarity index 100%
rename from control/frontend/src/ts/stores/thumbnails.ts
rename to control/frontend/src/lib/ts/stores/thumbnails.ts
diff --git a/control/frontend/src/ts/stores/ui_behavior.ts b/control/frontend/src/lib/ts/stores/ui_behavior.ts
similarity index 100%
rename from control/frontend/src/ts/stores/ui_behavior.ts
rename to control/frontend/src/lib/ts/stores/ui_behavior.ts
diff --git a/control/frontend/src/ts/types.ts b/control/frontend/src/lib/ts/types.ts
similarity index 100%
rename from control/frontend/src/ts/types.ts
rename to control/frontend/src/lib/ts/types.ts
diff --git a/control/frontend/src/ts/utils.ts b/control/frontend/src/lib/ts/utils.ts
similarity index 96%
rename from control/frontend/src/ts/utils.ts
rename to control/frontend/src/lib/ts/utils.ts
index 4805896..768f2db 100644
--- a/control/frontend/src/ts/utils.ts
+++ b/control/frontend/src/lib/ts/utils.ts
@@ -1,5 +1,5 @@
 import type { DisplayStatus, Inode, SupportedFileType } from './types';
-import supported_file_types_json from './../../../../shared/supported_file_types.json';
+import supported_file_types_json from './../../../../../shared/supported_file_types.json';
 
 const supported_file_types: Record<string, SupportedFileType> = supported_file_types_json as Record<
 	string,
diff --git a/control/frontend/src/routes/+layout.svelte b/control/frontend/src/routes/+layout.svelte
index 8a07ae6..1827b7d 100644
--- a/control/frontend/src/routes/+layout.svelte
+++ b/control/frontend/src/routes/+layout.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import '../app.css';
-	import Notification from '../components/Notification.svelte';
+	import Notification from '$lib/components/Notification.svelte';
 
 	let { children } = $props();
 </script>
 
 {@render children()}
 
-<Notification />
\ No newline at end of file
+<Notification />
diff --git a/control/frontend/src/routes/+page.svelte b/control/frontend/src/routes/+page.svelte
index f9ff357..79864e0 100644
--- a/control/frontend/src/routes/+page.svelte
+++ b/control/frontend/src/routes/+page.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
 	import { Monitor, Plus, Radio, Settings, Trash2, X } from 'lucide-svelte';
-	import Button from '../components/Button.svelte';
-	import FileView from '../components/FileView.svelte';
-	import ControlView from '../components/ControlView.svelte';
-	import DisplayView from '../components/DisplayView.svelte';
-	import SplashScreen from './../../../../shared/splash_screen.html?raw';
-	import PopUp from '../components/PopUp.svelte';
-	import { type PopupContent } from '../ts/types';
-	import TextInput from '../components/TextInput.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import FileView from '$lib/components/FileView.svelte';
+	import ControlView from '$lib/components/ControlView.svelte';
+	import DisplayView from '$lib/components/DisplayView.svelte';
+	import PopUp from '$lib/components/PopUp.svelte';
+	import { type PopupContent } from '$lib/ts/types';
+	import TextInput from '$lib/components/TextInput.svelte';
 	import {
 		add_display,
 		edit_display_data,
 		get_display_by_id,
 		is_display_name_taken,
 		remove_display
-	} from '../ts/stores/displays';
+	} from '$lib/ts/stores/displays';
 	import { text } from '@sveltejs/kit';
-	import { notifications } from '../ts/stores/notification';
-	import { ping_ip } from '../ts/api_handler';
+	import { notifications } from '$lib/ts/stores/notification';
+	import { ping_ip } from '$lib/ts/api_handler';
 	import { onMount } from 'svelte';
-	import { on_start } from '../ts/main';
-	import { display_status_to_info } from '../ts/utils';
-	import HighlightedText from '../components/HighlightedText.svelte';
+	import { on_start } from '$lib/ts/main';
+	import { display_status_to_info } from '$lib/ts/utils';
+	import HighlightedText from '$lib/components/HighlightedText.svelte';
 
 	const ip_regex =
 		/^(?:(?:10|127)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|192\.168\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d)|172\.(?:1[6-9]|2\d|3[0-1])\.(?:25[0-5]|2[0-4]\d|1?\d?\d)\.(?:25[0-5]|2[0-4]\d|1?\d?\d))$/;