diff --git a/bun.lockb b/bun.lockb
index 2c12b42..db881bb 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 6c4474e..03f3f51 100644
--- a/package.json
+++ b/package.json
@@ -1,27 +1,29 @@
 {
-  "name": "dev-portfolio",
-  "type": "module",
-  "version": "3.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/svelte": "^4.0.2",
-    "@astrojs/tailwind": "^5.0.0",
-    "astro": "^3.2.0",
-    "caniuse-lite": "^1.0.30001669",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.5.45",
-    "svelte": "^4.2.1",
-    "tailwindcss": "^3.3.3"
-  },
-  "devDependencies": {
-    "prettier": "^3.0.3",
-    "prettier-plugin-astro": "^0.12.0",
-    "prettier-plugin-svelte": "^3.0.3"
-  }
+    "name": "dev-portfolio",
+    "type": "module",
+    "version": "3.0.1",
+    "scripts": {
+        "dev": "astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro"
+    },
+    "dependencies": {
+        "@astrojs/svelte": "^5.7.2",
+        "@astrojs/tailwind": "^5.0.0",
+        "astro": "^4.16.8",
+        "caniuse-lite": "^1.0.30001669",
+        "moment": "^2.30.1",
+        "moment-timezone": "^0.5.45",
+        "svelte": "^5.1.9",
+        "tailwindcss": "^3.3.3",
+        "typescript": "^5.6.3"
+    },
+    "devDependencies": {
+        "prettier": "^3.0.3",
+        "prettier-plugin-astro": "^0.14.1",
+        "prettier-plugin-svelte": "^3.0.3",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"
+    }
 }
diff --git a/src/components/sections/IntroComponent.svelte b/src/components/sections/IntroComponent.svelte
index b301000..f0413e6 100644
--- a/src/components/sections/IntroComponent.svelte
+++ b/src/components/sections/IntroComponent.svelte
@@ -9,7 +9,7 @@
         "Content creator",
         "Student",
     ];
-    let roleState: string = "";
+    let roleState: string = $state("");
     let role: string;
     let counter: number = 0;
     let roleEmpty: boolean = true;
@@ -82,7 +82,7 @@
         greeting = "evening";
     }
 
-    let greetingState: string = "";
+    let greetingState: string = $state("");
     let greetingPulse: HTMLElement;
 
     async function animateGreeting(greeting: string) {
diff --git a/src/components/sections/ProjectsComponent.svelte b/src/components/sections/ProjectsComponent.svelte
index 356031b..bf73b84 100644
--- a/src/components/sections/ProjectsComponent.svelte
+++ b/src/components/sections/ProjectsComponent.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    // import { onMount } from "svelte";
-
     const streamers = [
         {
             streamer: "4l1c3_0",
diff --git a/src/components/sections/StreamSchedule.svelte b/src/components/sections/StreamSchedule.svelte
index f8c8800..385708c 100644
--- a/src/components/sections/StreamSchedule.svelte
+++ b/src/components/sections/StreamSchedule.svelte
@@ -2,6 +2,8 @@
     import moment from "moment-timezone";
     import { onMount } from "svelte";
 
+    const myLocation = "Australia/Melbourne";
+
     const myStreamSchedule = [
         {
             start: getUpcomingTimeDevTZ(2, "9:30"),
@@ -17,8 +19,6 @@
         },
     ];
 
-    const myLocation = "Australia/Melbourne";
-
     /**
      * Calculates the upcoming specified time for a given day of the week in my timezone.
      *
@@ -70,13 +70,13 @@
         end: string;
     };
 
-    let sameTimezone = true;
-    let adjusted = true;
+    let sameTimezone = $state(true);
+    let adjusted = $state(true);
 
     let localisedStreamSchedule = [];
 
-    let formattedSchedule: Schedule[] = [];
-    let formattedLocalisedSchedule: Schedule[] = [];
+    let formattedSchedule: Schedule[] = $state([]);
+    let formattedLocalisedSchedule: Schedule[] = $state([]);
 
     function displayStreamSchedule() {
         localisedStreamSchedule = myStreamSchedule.map((stream) => ({
@@ -121,14 +121,14 @@
         px-1 py-1 z-20"
     >
         <button
-            on:click={() => (adjusted = true)}
+            onclick={() => (adjusted = true)}
             class="rounded-lg w-1/2 py-1
         transition-colors duration-150
         {adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
             >Your Timezone</button
         >
         <button
-            on:click={() => (adjusted = false)}
+            onclick={() => (adjusted = false)}
             class="rounded-lg flex-grow py-1
         transition-colors duration-150
         {adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}"
@@ -138,28 +138,33 @@
 {/if}
 <div class="mt-1">
     <table>
-        <tr>
-            <th>Day</th>
-            <th>Time</th>
-        </tr>
-        {#if adjusted}
-            {#each formattedLocalisedSchedule as localTime}
-                <tr>
-                    <td class="px-1 md:px-5">{localTime.day}</td>
-                    <td class="px-1 md:px-5"
-                        >{localTime.start} - {localTime.end}</td
-                    >
-                </tr>
-            {/each}
-        {:else}
-            {#each formattedSchedule as devTime}
-                <tr>
-                    <td class="px-1 md:px-5">{devTime.day}</td>
-                    <td class="px-1 md:px-5">{devTime.start} - {devTime.end}</td
-                    >
-                </tr>
-            {/each}
-        {/if}
+        <thead>
+            <tr>
+                <th>Day</th>
+                <th>Time</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#if adjusted}
+                {#each formattedLocalisedSchedule as localTime}
+                    <tr>
+                        <td class="px-1 md:px-5">{localTime.day}</td>
+                        <td class="px-1 md:px-5"
+                            >{localTime.start} - {localTime.end}</td
+                        >
+                    </tr>
+                {/each}
+            {:else}
+                {#each formattedSchedule as devTime}
+                    <tr>
+                        <td class="px-1 md:px-5">{devTime.day}</td>
+                        <td class="px-1 md:px-5"
+                            >{devTime.start} - {devTime.end}</td
+                        >
+                    </tr>
+                {/each}
+            {/if}
+        </tbody>
     </table>
 </div>
 
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 9a13481..ccef702 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -34,7 +34,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 			</div>
 		</div>
 		<div class="mt-10">
-			<ContactComponent />
+			<ContactComponent client:only />
 		</div>
 	</div>
 	<Footer />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index af051c3..0d03bc3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -42,7 +42,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 		<Education />
 	</div>
 	<div id="contact">
-		<Contact client:visible />
+		<Contact client:only />
 	</div>
 	<Footer />
 </Layout>
diff --git a/svelte.config.js b/svelte.config.js
index cbaee33..f07616c 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,10 @@
-import { vitePreprocess } from '@astrojs/svelte';
+import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
-	preprocess: vitePreprocess(),
+    preprocess: vitePreprocess(),
+    compilerOptions: {
+        compatibility: {
+            componentApi: 4,
+        },
+    },
 };