diff --git a/apps/main/.gitignore b/apps/main/.gitignore
index a57a037..0be5a48 100644
--- a/apps/main/.gitignore
+++ b/apps/main/.gitignore
@@ -1 +1 @@
-skills.svg
+static/skills.svg
diff --git a/apps/main/src/routes/(app)/+layout.svelte b/apps/main/src/routes/(app)/+layout.svelte
new file mode 100644
index 0000000..65c4c9b
--- /dev/null
+++ b/apps/main/src/routes/(app)/+layout.svelte
@@ -0,0 +1,10 @@
+<script>
+    import "./app.css"
+
+    import Navbar from "$/components/Navbar.svelte"
+</script>
+
+<Navbar />
+<main>
+    <slot />
+</main>
diff --git a/apps/main/src/routes/+layout.ts b/apps/main/src/routes/(app)/+layout.ts
similarity index 100%
rename from apps/main/src/routes/+layout.ts
rename to apps/main/src/routes/(app)/+layout.ts
diff --git a/apps/main/src/routes/+page.svelte b/apps/main/src/routes/(app)/+page.svelte
similarity index 93%
rename from apps/main/src/routes/+page.svelte
rename to apps/main/src/routes/(app)/+page.svelte
index d153577..7e28afa 100644
--- a/apps/main/src/routes/+page.svelte
+++ b/apps/main/src/routes/(app)/+page.svelte
@@ -6,9 +6,9 @@
     import YouTube from "@inqling/svelte-icons/simple-icons/youtube.svelte"
     import { onMount } from "svelte"
 
-    import HandWave from "../components/HandWave.svelte"
-    import { discordInviteLink } from "../constants"
-    import getAge from "../utils/getAge"
+    import HandWave from "$/components/HandWave.svelte"
+    import { discordInviteLink } from "$/constants"
+    import getAge from "$/utils/getAge"
 
     let age = getAge() // run immediately the first time
 
diff --git a/apps/main/src/app.css b/apps/main/src/routes/(app)/app.css
similarity index 100%
rename from apps/main/src/app.css
rename to apps/main/src/routes/(app)/app.css
diff --git a/apps/main/src/routes/discord/+page.svelte b/apps/main/src/routes/(app)/discord/+page.svelte
similarity index 85%
rename from apps/main/src/routes/discord/+page.svelte
rename to apps/main/src/routes/(app)/discord/+page.svelte
index a4990ad..ba592f6 100644
--- a/apps/main/src/routes/discord/+page.svelte
+++ b/apps/main/src/routes/(app)/discord/+page.svelte
@@ -1,10 +1,9 @@
 <script>
     import Discord from "@inqling/svelte-icons/simple-icons/discord.svelte"
 
+    import { discordInviteLink } from "$/constants"
     import { browser } from "$app/environment"
 
-    import { discordInviteLink } from "../../constants"
-
     // redirect to developomp's discord server
     if (browser) {
         window.location.replace(discordInviteLink)
diff --git a/apps/main/src/routes/+layout.svelte b/apps/main/src/routes/+layout.svelte
deleted file mode 100644
index 2132103..0000000
--- a/apps/main/src/routes/+layout.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-    import "../app.css"
-
-    import Navbar from "../components/Navbar.svelte"
-</script>
-
-<Navbar />
-<main>
-    <slot />
-</main>
diff --git a/apps/main/tsconfig.json b/apps/main/tsconfig.json
index cb286ce..3957314 100644
--- a/apps/main/tsconfig.json
+++ b/apps/main/tsconfig.json
@@ -8,6 +8,11 @@
         "resolveJsonModule": true,
         "skipLibCheck": true,
         "sourceMap": true,
-        "strict": true
+        "strict": true,
+
+        "baseUrl": "./src",
+        "paths": {
+            "$/*": ["./*"]
+        }
     }
 }
diff --git a/apps/main/vite.config.ts b/apps/main/vite.config.ts
index 12de03c..df33534 100644
--- a/apps/main/vite.config.ts
+++ b/apps/main/vite.config.ts
@@ -1,8 +1,14 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import path from "path"
 import { defineConfig } from "vite"
 
 export default defineConfig({
     plugins: [sveltekit()],
+    resolve: {
+        alias: {
+            $: path.resolve("./src"),
+        },
+    },
     server: {
         open: true,
     },