diff --git a/frontend/bun.lock b/frontend/bun.lock
index 784ae6f..83378be 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -4,6 +4,11 @@
   "workspaces": {
     "": {
       "name": "frontend",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "svelte-motion": "^0.12.2",
+        "tailwind-merge": "^3.7.0",
+      },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^7.3.1",
         "@tailwindcss/vite": "^4.3.4",
@@ -104,6 +109,10 @@
 
     "@types/node": ["@types/node@24.19.2", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-93d49wCWJkCyN87MxLpNN6KXPCwFw7bVUg79mGUV1OS40JGWwVCr8n61DXCSqz7CV6/VfPkb7xec7uP2M+QHWQ=="],
 
+    "@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
+
+    "@types/react": ["@types/react@18.3.31", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" } }, "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw=="],
+
     "acorn": ["acorn@8.19.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-oJlA3XiRm7Cyk6qFD2Jn8ak9B7jSy0qy00ADO3+8dpT0LSjFihQYv4C02LFCSYJV3Q37xYwwRy5m+IpIiUzqWw=="],
 
     "aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
@@ -114,6 +123,8 @@
 
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
     "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
@@ -128,10 +139,14 @@
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "framesync": ["framesync@6.1.2", "", { "dependencies": { "tslib": "2.4.0" } }, "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "hey-listen": ["hey-listen@1.0.8", "", {}, "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="],
+
     "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
 
     "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
@@ -174,6 +189,8 @@
 
     "picomatch": ["picomatch@4.0.7", "", {}, "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA=="],
 
+    "popmotion": ["popmotion@11.0.5", "", { "dependencies": { "framesync": "6.1.2", "hey-listen": "^1.0.8", "style-value-types": "5.1.2", "tslib": "2.4.0" } }, "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA=="],
+
     "postcss": ["postcss@8.5.32", "", { "dependencies": { "nanoid": "^3.3.20", "picocolors": "^1.1.1", "source-map-js": "^1.2.2" } }, "sha512-LJlKCCAUFKOuZxipUdYw1NzIITEsPcgyOG9LkvRJvuKj/bRzbuRY0ARXvL0pWGpsZvn8jku+LMep2eU0seHp8g=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
@@ -184,16 +201,24 @@
 
     "source-map-js": ["source-map-js@1.2.2", "", {}, "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw=="],
 
+    "style-value-types": ["style-value-types@5.1.2", "", { "dependencies": { "hey-listen": "^1.0.8", "tslib": "2.4.0" } }, "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q=="],
+
     "svelte": ["svelte@5.57.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "@jridgewell/sourcemap-codec": "^1.6.0", "@sveltejs/acorn-typescript": "^1.0.13", "@types/estree": "^1.0.9", "acorn": "^8.18.0", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.9.2", "esm-env": "^1.2.1", "esrap": "^2.3.6", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-5mAftM3SoDV9X0zdF386F9p2pv8iKOwi/KfBS1XnBAkVCKFzVOLHUoa8iGWAt4buoicLmyWVRpuuD5wplXOQsg=="],
 
     "svelte-check": ["svelte-check@4.7.8", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "@sveltejs/load-config": "^0.2.3", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": "^5.0.0 || ^6.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-laZ49GFHZ3b0z2PWinJWL0syehc/PTR8aHaUaTiBkWJ+4Y38nhxjmXsSz7CbGa3VdKopViVbrBH3bGNqIAI0bQ=="],
 
+    "svelte-motion": ["svelte-motion@0.12.2", "", { "dependencies": { "@types/react": "^18.2.42", "framesync": "^6.1.2", "popmotion": "^11.0.5", "style-value-types": "5.1.2", "tslib": "^2.6.2" }, "peerDependencies": { "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0" } }, "sha512-7RrdRz9iVP55B9HT/C0hYW3pyrKlF61kAby/AkDtOAP0uHFQDrfd0qQetDC81cEsK9b40jt+jfcqSAXcA7LPEw=="],
+
+    "tailwind-merge": ["tailwind-merge@3.7.0", "", {}, "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA=="],
+
     "tailwindcss": ["tailwindcss@4.3.4", "", {}, "sha512-PCJZTFFdG+sL3gvnP1Do9o6GbkvH2q0p04xSs3f7cSvmAeK+sttG+/7ncK1fdRwKFfC7n+wDDJaOMBSefkI9ow=="],
 
     "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
 
     "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
 
+    "tslib": ["tslib@2.9.1", "", {}, "sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA=="],
+
     "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
 
     "undici-types": ["undici-types@7.24.6", "", {}, "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg=="],
@@ -216,6 +241,12 @@
 
     "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.9.1", "", { "bundled": true }, "sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA=="],
 
+    "framesync/tslib": ["tslib@2.4.0", "", {}, "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="],
+
+    "popmotion/tslib": ["tslib@2.4.0", "", {}, "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="],
+
+    "style-value-types/tslib": ["tslib@2.4.0", "", {}, "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="],
+
     "svelte/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index c577d00..66cea6b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,5 +19,10 @@
     "tailwindcss": "^4.3.4",
     "typescript": "~6.0.3",
     "vite": "^8.3.5"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "svelte-motion": "^0.12.2",
+    "tailwind-merge": "^3.7.0"
   }
 }
diff --git a/frontend/public/images/collaborations/Proton_Pass_Icon.webp b/frontend/public/images/collaborations/Proton_Pass_Icon.webp
deleted file mode 100644
index 7920ab5..0000000
Binary files a/frontend/public/images/collaborations/Proton_Pass_Icon.webp and /dev/null differ
diff --git a/frontend/public/images/collaborations/brick.png b/frontend/public/images/collaborations/brick.png
deleted file mode 100644
index b975d85..0000000
Binary files a/frontend/public/images/collaborations/brick.png and /dev/null differ
diff --git a/frontend/public/images/collaborations/brick.webp b/frontend/public/images/collaborations/brick.webp
new file mode 100644
index 0000000..a53cb28
Binary files /dev/null and b/frontend/public/images/collaborations/brick.webp differ
diff --git a/frontend/public/images/collaborations/focumon-icon-filled-256.png b/frontend/public/images/collaborations/focumon-icon-filled-256.png
deleted file mode 100644
index 7210e2a..0000000
Binary files a/frontend/public/images/collaborations/focumon-icon-filled-256.png and /dev/null differ
diff --git a/frontend/public/images/collaborations/focumon.webp b/frontend/public/images/collaborations/focumon.webp
new file mode 100644
index 0000000..aed93ab
Binary files /dev/null and b/frontend/public/images/collaborations/focumon.webp differ
diff --git a/frontend/public/images/collaborations/proton-pass.webp b/frontend/public/images/collaborations/proton-pass.webp
new file mode 100644
index 0000000..083d400
Binary files /dev/null and b/frontend/public/images/collaborations/proton-pass.webp differ
diff --git a/frontend/public/images/collaborations/proton-vpn.webp b/frontend/public/images/collaborations/proton-vpn.webp
new file mode 100644
index 0000000..640e5fb
Binary files /dev/null and b/frontend/public/images/collaborations/proton-vpn.webp differ
diff --git a/frontend/src/components/Collabs.svelte b/frontend/src/components/Collabs.svelte
new file mode 100644
index 0000000..729640d
--- /dev/null
+++ b/frontend/src/components/Collabs.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import AnimatedTooltip from "./ui/AnimatedTooltip/AnimatedTooltip.svelte";
+
+    const people = [
+        {
+            id: 1,
+            name: "ProtonPass",
+            image: "/images/collaborations/proton-pass.webp",
+            url: "https://proton.me/pass",
+        },
+        {
+            id: 2,
+            name: "ProtonVPN",
+            image: "/images/collaborations/proton-vpn.webp",
+            url: "https://protonvpn.com/",
+        },
+        {
+            id: 3,
+            name: "Brick",
+            image: "/images/collaborations/brick.webp",
+            url: "https://getbrick.com/",
+        },
+        {
+            id: 4,
+            name: "Focumon",
+            image: "/images/collaborations/focumon.webp",
+            url: "https://www.focumon.com/landing",
+        },
+    ];
+</script>
+
+<AnimatedTooltip items={people} />
diff --git a/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte b/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte
new file mode 100644
index 0000000..c4acf02
--- /dev/null
+++ b/frontend/src/components/ui/AnimatedTooltip/AnimatedTooltip.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+    import {
+        Motion,
+        useTransform,
+        AnimatePresence,
+        useMotionValue,
+        useSpring,
+    } from "svelte-motion";
+
+    export let items: {
+        id: number;
+        name: string;
+        image: string;
+        url: string;
+    }[];
+
+    let hoveredIndex: number | null = null;
+    const springConfig = { stiffness: 100, damping: 5 };
+    const x = useMotionValue(0); // going to set this value on mouse move
+    // rotate the tooltip
+    const rotate = useSpring(
+        useTransform(x, [-100, 100], [-45, 45]),
+        springConfig,
+    );
+    // translate the tooltip
+    const translateX = useSpring(
+        useTransform(x, [-100, 100], [-50, 50]),
+        springConfig,
+    );
+    const handleMouseMove = (event: MouseEvent) => {
+        // @ts-ignore
+        const halfWidth = event.target?.offsetWidth / 2;
+        x.set(event.offsetX - halfWidth); // set the x value, which is then used in transform and rotate
+    };
+</script>
+
+<div class="group flex flex-row pl-2">
+    {#each items as item, idx (item.name)}
+        <div class="relative mr-5">
+            <AnimatePresence show={true}>
+                {#if hoveredIndex === item.id}
+                    <Motion
+                        let:motion
+                        initial={{ opacity: 0, y: 20, scale: 0.6 }}
+                        animate={{
+                            opacity: 1,
+                            y: 0,
+                            scale: 1,
+                            transition: {
+                                type: "spring",
+                                stiffness: 260,
+                                damping: 10,
+                            },
+                        }}
+                        exit={{ opacity: 0, y: 20, scale: 0.6 }}
+                        style={{
+                            translateX: translateX,
+                            rotate: rotate,
+                            whiteSpace: "nowrap",
+                        }}
+                    >
+                        <div
+                            use:motion
+                            id="tooltip-{item.id}"
+                            role="tooltip"
+                            class="absolute left-1/2 -top-10 z-50 flex -translate-x-1/2 flex-col items-center justify-center rounded-md bg-gray-700 px-4 py-2 text-xs shadow-xl"
+                        >
+                            <div
+                                class="absolute inset-x-10 -bottom-px z-30 h-px w-[20%] bg-linear-to-r from-transparent via-emerald-500 to-transparent"
+                            ></div>
+                            <div
+                                class="absolute -bottom-px left-10 z-30 h-px w-[40%] bg-linear-to-r from-transparent via-sky-500 to-transparent"
+                            ></div>
+                            <div
+                                class="relative z-30 whitespace-nowrap text-base font-bold text-white"
+                            >
+                                {item.name}
+                            </div>
+                        </div>
+                    </Motion>
+                {/if}
+            </AnimatePresence>
+            <a
+                href={item.url}
+                target="_blank"
+                class="relative m-0 h-14 w-14 cursor-pointer rounded-full border-0 bg-transparent p-0 transition duration-500 group-hover:z-30 group-hover:scale-105"
+                on:mousemove={handleMouseMove}
+                on:mouseenter={() => (hoveredIndex = item.id)}
+                on:mouseleave={() => (hoveredIndex = null)}
+                on:focus={() => (hoveredIndex = item.id)}
+                on:blur={() => (hoveredIndex = null)}
+                aria-describedby={hoveredIndex === item.id
+                    ? `tooltip-${item.id}`
+                    : undefined}
+            >
+                <img
+                    height={100}
+                    width={100}
+                    src={item.image}
+                    alt={item.name}
+                    class="m-0! h-10 w-10 rounded-lg object-cover object-top p-0!"
+                />
+            </a>
+        </div>
+    {/each}
+</div>
diff --git a/frontend/src/components/ui/AnimatedTooltip/index.ts b/frontend/src/components/ui/AnimatedTooltip/index.ts
new file mode 100644
index 0000000..b9c6242
--- /dev/null
+++ b/frontend/src/components/ui/AnimatedTooltip/index.ts
@@ -0,0 +1,3 @@
+import AnimatedTooltip from "./AnimatedTooltip.svelte";
+
+export { AnimatedTooltip };
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/frontend/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/frontend/src/routes/MediaKit.svelte b/frontend/src/routes/MediaKit.svelte
index e3a8510..afca832 100644
--- a/frontend/src/routes/MediaKit.svelte
+++ b/frontend/src/routes/MediaKit.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { fetchMediaKit } from "../lib/api";
-    import type { MediaKit, Platform } from "../lib/types";
+    import type { MediaKit } from "../lib/types";
     import Card from "../components/Card.svelte";
+    import Collabs from "../components/Collabs.svelte";
 
     let data = $state<MediaKit | null>(null);
     let error = $state("");
@@ -186,6 +187,7 @@
                 <div class="text-white font-bold text-4xl mb-2">
                     Collaborations
                 </div>
+                <Collabs />
             </div>
         </div>
     </main>
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 1ffef60..20ff94b 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,7 +1,19 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index 8455dcb..4195ed0 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -2,22 +2,26 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
     "target": "es2023",
-    "lib": ["ES2023"],
-    "types": ["node"],
+    "lib": [
+      "ES2023"
+    ],
+    "types": [
+      "node"
+    ],
     "skipLibCheck": true,
-
     /* Bundler mode */
     "module": "nodenext",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
     /* Linting */
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts"]
-}
+  "include": [
+    "vite.config.ts"
+  ]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index f4a35bb..f6d5ed7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,6 +1,7 @@
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
+import path from "path";
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -13,4 +14,9 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
 });