diff --git a/package.json b/package.json
index 0e32534..05dd61b 100644
--- a/package.json
+++ b/package.json
@@ -7,24 +7,24 @@
     "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^4.0.1",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "8.56.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.45.1",
     "postcss": "^8.4.35",
     "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
+    "prettier-plugin-svelte": "^3.2.6",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.1.3",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4",
     "vitest": "^1.2.0"
   },
   "scripts": {
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
index f1d400d..2160316 100644
--- a/src/components/Button.svelte
+++ b/src/components/Button.svelte
@@ -1,9 +1,22 @@
 <script lang="ts">
-    export let className = "";
-    export let href = "";
-    export let target = "";
+    import { createBubbler } from 'svelte/legacy';
+
+    const bubble = createBubbler();
+    interface Props {
+        className?: string;
+        href?: string;
+        target?: string;
+        children?: import('svelte').Snippet;
+    }
+
+    let {
+        className = "",
+        href = "",
+        target = "",
+        children
+    }: Props = $props();
 </script>
 
-<a target="{target}" on:click href="{href}" class="flex py-2 px-4 rounded-lg font-semibold text-center no-underline items-center {className}">
-    <slot/>
+<a target="{target}" onclick={bubble('click')} href="{href}" class="flex py-2 px-4 rounded-lg font-semibold text-center no-underline items-center {className}">
+    {@render children?.()}
 </a>
\ No newline at end of file
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
index 0472226..e56e09d 100644
--- a/src/components/Card.svelte
+++ b/src/components/Card.svelte
@@ -1,10 +1,11 @@
 <script>
-    export let title = "";
+    /** @type {{title?: string, children?: import('svelte').Snippet}} */
+    let { title = "", children } = $props();
 </script>
 
 <div class="h-[430px] lg:h-80 bg-[#ffffff04] rounded-lg outline outline-1 outline-[#cbd5e11a] p-6 space-y-2">
     <div class="text-2xl font-semibold">{title}</div>
     <div class="text-md text-gray-400">
-        <slot/>
+        {@render children?.()}
     </div>
 </div>
\ No newline at end of file
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index d7490ed..5b522c8 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -2,7 +2,7 @@
     import Logo from "$lib/images/logo.webp"
 	import Button from "./Button.svelte";
 
-	let hamburgerMenuOpen = false;
+	let hamburgerMenuOpen = $state(false);
 </script>
 
 <header class="fixed w-screen top-0 h-20 backdrop-blur-md outline outline-[#cbd5e11a] outline-1 drop-shadow-lg">
@@ -21,7 +21,7 @@
 			</div>
 
 			<!-- Hamburger Menu -->
-			<button on:click={() => (hamburgerMenuOpen = !hamburgerMenuOpen)} class="lg:hidden flex mr-3 text-3xl">
+			<button onclick={() => (hamburgerMenuOpen = !hamburgerMenuOpen)} class="lg:hidden flex mr-3 text-3xl">
 				☰
 			</button>
 
diff --git a/src/components/Link.svelte b/src/components/Link.svelte
index 9961ead..99dc070 100644
--- a/src/components/Link.svelte
+++ b/src/components/Link.svelte
@@ -1,7 +1,8 @@
 <script>
-    export let href = "";
+    /** @type {{href?: string, children?: import('svelte').Snippet}} */
+    let { href = "", children } = $props();
 </script>
 
 <a target="_blank" href={href} class="text-primary hover:underline">
-    <slot />
+    {@render children?.()}
 </a>
\ No newline at end of file
diff --git a/src/components/RedirectPage.svelte b/src/components/RedirectPage.svelte
index 6e66995..060b744 100644
--- a/src/components/RedirectPage.svelte
+++ b/src/components/RedirectPage.svelte
@@ -1,7 +1,8 @@
 <script>
-    export let url = "";
 
     import { onMount } from 'svelte';
+    /** @type {{url?: string}} */
+    let { url = "" } = $props();
 
     onMount(() => {
         window.location.href = url;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 74b0b4b..19dea86 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,13 +2,15 @@
 	import Footer from "$components/Footer.svelte";
 	import Header from "$components/Header.svelte";
 	import "../app.css";
+	/** @type {{children?: import('svelte').Snippet}} */
+	let { children } = $props();
 </script>
 
 <div>
 	<Header />
 
 	<main class="min-h-screen">
-		<slot />
+		{@render children?.()}
 	</main>
 
 	<Footer />