diff --git a/web/src/components/misc/Placeholder.svelte b/web/src/components/misc/Placeholder.svelte
index 5236a94f..c38e9836 100644
--- a/web/src/components/misc/Placeholder.svelte
+++ b/web/src/components/misc/Placeholder.svelte
@@ -1,5 +1,5 @@
 <script>
-    import MeowbaltLoaf from "../meowbalt/MeowbaltLoaf.svelte";
+    import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
     export let pageName;
 </script>
 
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index a8ce013e..178af9dc 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import IconLink from "@tabler/icons-svelte/IconLink.svelte";
 
-    import DownloadButton from "./buttons/DownloadButton.svelte";
-    import ClearButton from "./buttons/ClearButton.svelte";
-    import ActionButton from "../buttons/ActionButton.svelte";
+    import ClearButton from "$components/save/buttons/ClearButton.svelte";
+    import DownloadButton from "$components/save/buttons/DownloadButton.svelte";
 
-    import Switcher from "../buttons/Switcher.svelte";
+    import Switcher from "$components/buttons/Switcher.svelte";
+    import ActionButton from "$components/buttons/ActionButton.svelte";
+    import SettingsButton from "$components/buttons/SettingsButton.svelte";
 
     import IconSparkles from "$lib/icons/Sparkles.svelte";
     import IconMusic from "$lib/icons/Music.svelte";
     import IconMute from "$lib/icons/Mute.svelte";
 
     import IconClipboard from "$lib/icons/Clipboard.svelte";
-    import SettingsButton from "../buttons/SettingsButton.svelte";
 
     let link: string = "";
     let isFocused = false;
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 5888a32d..d106c438 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -1,16 +1,16 @@
 <script>
-    import CobaltLogo from "./CobaltLogo.svelte";
-    import SidebarTab from "./SidebarTab.svelte";
+    import CobaltLogo from "$components/sidebar/CobaltLogo.svelte";
+    import SidebarTab from "$components/sidebar/SidebarTab.svelte";
 
-    import IconDownload from '@tabler/icons-svelte/IconDownload.svelte';
-    import IconCut from '@tabler/icons-svelte/IconCut.svelte';
-    import IconCrop from '@tabler/icons-svelte/IconCrop.svelte';
-    import IconTransform from '@tabler/icons-svelte/IconTransform.svelte';
-    import IconSettings from '@tabler/icons-svelte/IconSettings.svelte';
+    import IconDownload from "@tabler/icons-svelte/IconDownload.svelte";
+    import IconCut from "@tabler/icons-svelte/IconCut.svelte";
+    import IconCrop from "@tabler/icons-svelte/IconCrop.svelte";
+    import IconTransform from "@tabler/icons-svelte/IconTransform.svelte";
+    import IconSettings from "@tabler/icons-svelte/IconSettings.svelte";
 
-    import IconComet from '@tabler/icons-svelte/IconComet.svelte';
-    import IconHeart from '@tabler/icons-svelte/IconHeart.svelte';
-    import IconInfoCircle from '@tabler/icons-svelte/IconInfoCircle.svelte';
+    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
+    import IconInfoCircle from "@tabler/icons-svelte/IconInfoCircle.svelte";
 
     const iconSize = 21;
     const iconStroke = 1.2;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 7f5df0dd..b3b9235e 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,7 +1,7 @@
 <script>
     import "@fontsource/ibm-plex-mono/400.css";
     import "@fontsource/ibm-plex-mono/500.css";
-    import Sidebar from "../components/sidebar/Sidebar.svelte";
+    import Sidebar from "$components/sidebar/Sidebar.svelte";
 </script>
 
 <div id="cobalt">
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 15fa7416..df78a944 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
-    import Omnibox from "../components/save/Omnibox.svelte";
-    import MeowbaltLoaf from "../components/meowbalt/MeowbaltLoaf.svelte";
+    import Omnibox from "$components/save/Omnibox.svelte";
+    import MeowbaltLoaf from "$components/meowbalt/MeowbaltLoaf.svelte";
 </script>
 
 <div id="cobalt-save-container" class="center-column-container">
diff --git a/web/src/routes/about/+page.svelte b/web/src/routes/about/+page.svelte
index 3d6419ed..89a7710a 100644
--- a/web/src/routes/about/+page.svelte
+++ b/web/src/routes/about/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="about" />
diff --git a/web/src/routes/convert/+page.svelte b/web/src/routes/convert/+page.svelte
index ec28b52a..a26a5d64 100644
--- a/web/src/routes/convert/+page.svelte
+++ b/web/src/routes/convert/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="convert" />
diff --git a/web/src/routes/crop/+page.svelte b/web/src/routes/crop/+page.svelte
index c4f6b972..1e39a5b6 100644
--- a/web/src/routes/crop/+page.svelte
+++ b/web/src/routes/crop/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="crop" />
diff --git a/web/src/routes/donate/+page.svelte b/web/src/routes/donate/+page.svelte
index d9049ac4..1ce2815e 100644
--- a/web/src/routes/donate/+page.svelte
+++ b/web/src/routes/donate/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="donate" />
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 2bcc07a2..acfdfb86 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -1,6 +1,6 @@
 <script>
-    import SettingsCategory from "../../components/settings/SettingsCategory.svelte";
-    import SettingsSection from "../../components/settings/SettingsSection.svelte";
+    import SettingsCategory from "$components/settings/SettingsCategory.svelte";
+    import SettingsSection from "$components/settings/SettingsSection.svelte";
 
     import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte";
     import IconAccessible from "@tabler/icons-svelte/IconAccessible.svelte";
diff --git a/web/src/routes/trim/+page.svelte b/web/src/routes/trim/+page.svelte
index 8014b58b..fbee1685 100644
--- a/web/src/routes/trim/+page.svelte
+++ b/web/src/routes/trim/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="trim" />
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index c15ed3c3..8140bcd2 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Placeholder from "../../components/misc/Placeholder.svelte";
+    import Placeholder from "$components/misc/Placeholder.svelte";
 </script>
 
 <Placeholder pageName="updates" />
diff --git a/web/svelte.config.js b/web/svelte.config.js
index dd053dbc..df7b5fb4 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -8,16 +8,19 @@ const config = {
     preprocess: vitePreprocess(),
 
     kit: {
-		adapter: adapter({
-			// default options are shown. On some platforms
-			// these options are set automatically — see below
-			pages: 'build',
-			assets: 'build',
-			fallback: undefined,
-			precompress: false,
-			strict: true
-		})
-	}
+        adapter: adapter({
+            // default options are shown. On some platforms
+            // these options are set automatically — see below
+            pages: 'build',
+            assets: 'build',
+            fallback: undefined,
+            precompress: false,
+            strict: true
+        }),
+        alias: {
+            $components: 'src/components'
+        }
+    }
 };
 
 export default config;