diff --git a/frontend/src/routes/(app)/dashboard/+page.svelte b/frontend/src/routes/(app)/dashboard/+page.svelte
index 9288363..332698f 100644
--- a/frontend/src/routes/(app)/dashboard/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types'
 	import * as Card from '$lib/components/ui/card'
 	import { Button } from '$lib/components/ui/button'
 	import { Separator } from '$lib/components/ui/separator'
 	import { BarChart, ExternalLink } from 'lucide-svelte'
 
-	export let data: PageData
+	let { data } = $props()
 </script>
 
 <div class="flex flex-col gap-4 px-10 py-8">
diff --git a/frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte b/frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte
index 6e61a42..eeb9893 100644
--- a/frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/[...catchall]/+page.svelte
@@ -9,7 +9,7 @@
 			<div class="text-4xl font-bold">404</div>
 			<div class="text-4xl font-bold">Page Not Found</div>
 		</div>
-		<Button on:click={() => goto('/dashboard')} class="w-fit">
+		<Button onclick={() => goto('/dashboard')} class="w-fit">
 			Return Home
 		</Button>
 	</div>
diff --git a/frontend/src/routes/(app)/dashboard/billing/+page.svelte b/frontend/src/routes/(app)/dashboard/billing/+page.svelte
index 7a2ebc7..0e2d789 100644
--- a/frontend/src/routes/(app)/dashboard/billing/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/billing/+page.svelte
@@ -5,14 +5,13 @@
 	import { Separator } from '$lib/components/ui/separator'
 	import * as Dialog from '$lib/components/ui/dialog'
 	import { Check, LoaderCircleIcon } from 'lucide-svelte'
-	import type { PageData } from './$types'
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { cancelSubscriptionSchema } from './schema'
 	import { superForm } from 'sveltekit-superforms'
 	import { toast } from 'svelte-sonner'
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 
-	export let data: PageData
+	let { data } = $props()
 
 	let cancelPlanDialogOpen = false
 
@@ -158,7 +157,7 @@
 									<Dialog.Footer>
 										<Button
 											variant={'outline'}
-											on:click={() => (cancelPlanDialogOpen = false)}>
+											onclick={() => (cancelPlanDialogOpen = false)}>
 											Cancel
 										</Button>
 										<form
diff --git a/frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte b/frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte
index 2e65c9e..27427a3 100644
--- a/frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/billing/plan/pro/success/+page.svelte
@@ -2,8 +2,6 @@
 	import { Button } from '$lib/components/ui/button'
 	import { CheckCircleIcon } from 'lucide-svelte'
 	import * as Dialog from '$lib/components/ui/dialog'
-
-	export let data
 </script>
 
 <Dialog.Root open>
diff --git a/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
index 1ab8000..c727825 100644
--- a/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/(components)/form.svelte
@@ -18,10 +18,16 @@
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 	import type { Project } from '$lib/db/types'
 
-	export let data: SuperValidated<Infer<FormSchema>>
-	export let projects: Project[]
-	export let dialogOpen: boolean
-	let shortenerCategory: any = undefined
+	let {
+		data,
+		projects,
+		dialogOpen = $bindable(),
+	}: {
+		data: SuperValidated<Infer<FormSchema>>
+		projects: Project[]
+		dialogOpen: boolean
+	} = $props()
+	let shortenerCategory = $state<any>(undefined)
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
@@ -40,9 +46,9 @@
 
 	const { form: formData, enhance, submitting } = form
 
-	let inputTimer: any
-	let previewData: any
-	let isPreviewLoading: boolean = false
+	let inputTimer = $state<any>()
+	let previewData = $state<any>()
+	let isPreviewLoading = $state(false)
 
 	const getMetadata = async () => {
 		isPreviewLoading = true
@@ -108,7 +114,7 @@
 							{...attrs}
 							bind:value={$formData.link}
 							placeholder="https://example.com"
-							on:input={getMetadata} />
+							oninput={getMetadata} />
 					</Form.Control>
 					<Form.Description>Shortener link</Form.Description>
 					<Form.FieldErrors />
@@ -167,8 +173,9 @@
 								bind:value={$formData.custom_code}
 								placeholder="abcde" />
 						</Form.Control>
-						<Form.Description
-							>Custom Code For The Shortener</Form.Description>
+						<Form.Description>
+							Custom Code For The Shortener
+						</Form.Description>
 						<Form.FieldErrors />
 					</Form.Field>
 				{/if}
@@ -192,8 +199,9 @@
 								bind:value={$formData.ios_link}
 								placeholder="https://example.com" />
 						</Form.Control>
-						<Form.Description
-							>Shortener link for iOS</Form.Description>
+						<Form.Description>
+							Shortener link for iOS
+						</Form.Description>
 						<Form.FieldErrors />
 					</Form.Field>
 				{/if}
@@ -217,8 +225,9 @@
 								bind:value={$formData.android_link}
 								placeholder="https://example.com" />
 						</Form.Control>
-						<Form.Description
-							>Shortener link for Android</Form.Description>
+						<Form.Description>
+							Shortener link for Android
+						</Form.Description>
 						<Form.FieldErrors />
 					</Form.Field>
 				{/if}
diff --git a/frontend/src/routes/(app)/dashboard/links/+page.svelte b/frontend/src/routes/(app)/dashboard/links/+page.svelte
index 647c218..9f19054 100644
--- a/frontend/src/routes/(app)/dashboard/links/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { PageData } from './$types'
 	import { page } from '$app/stores'
 
 	import { Button } from '$lib/components/ui/button'
@@ -24,23 +23,23 @@
 	import type { Project, Shortener } from '$lib/db/types'
 	import type { Selected } from 'bits-ui'
 
-	export let data: PageData
+	let { data } = $props()
 
-	let dialogOpen = false
+	let dialogOpen = $state(false)
 
-	let search: string | null = ''
-	let searchUpdateTimeout: any
+	let search = $state<string | null>('')
+	let searchUpdateTimeout = $state<any>()
 
-	let pageNumber = 1
-	let perPage = 12
-	let sortBy: Selected<string> = {
+	let pageNumber = $state(1)
+	let perPage = $state(12)
+	let sortBy = $state<Selected<string>>({
 		label: 'Latest',
 		value: 'latest',
-	}
-	let selectedProject: Selected<string> = {
+	})
+	let selectedProject = $state<Selected<string>>({
 		label: 'All',
 		value: 'all',
-	}
+	})
 
 	const fetchShorteners = async (
 		page: number,
@@ -72,8 +71,13 @@
 		}
 	}
 
-	$: projectLinkQROpen = !!$page.state.projectLinkQR
-	$: linkQROpen = !!$page.state.linkQR
+	let projectLinkQROpen = $state(!!$page.state.projectLinkQR)
+	let linkQROpen = $state(!!$page.state.linkQR)
+
+	$effect(() => {
+		projectLinkQROpen = !!$page.state.projectLinkQR
+		linkQROpen = !!$page.state.linkQR
+	})
 </script>
 
 <div
@@ -152,14 +156,14 @@
 						placeholder="search"
 						autofocus
 						value={search}
-						on:input={({ target }) => {
+						oninput={({ target }) => {
 							clearTimeout(searchUpdateTimeout)
 							searchUpdateTimeout = setTimeout(() => {
 								search = target.value
 								pageNumber = 1
 							}, 500)
 						}} />
-					<Button disabled={!search} on:click={() => (search = '')}>
+					<Button disabled={!search} onclick={() => (search = '')}>
 						Clear
 					</Button>
 				</div>
@@ -230,14 +234,14 @@
 			class="max-w-[250px]"
 			autofocus
 			value={search}
-			on:input={({ target }) => {
+			oninput={({ target }) => {
 				clearTimeout(searchUpdateTimeout)
 				searchUpdateTimeout = setTimeout(() => {
 					search = target.value
 					pageNumber = 1
 				}, 500)
 			}} />
-		<Button disabled={!search} on:click={() => (search = '')}>
+		<Button disabled={!search} onclick={() => (search = '')}>
 			Clear
 		</Button>
 	</div>
@@ -346,7 +350,7 @@
 							<p class="text-muted-foreground">Add a new shortener</p>
 						</div>
 						<Button
-							on:click={() => {
+							onclick={() => {
 								dialogOpen = true
 							}}
 							class="w-fit">
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
index cb91e13..d4b9ce3 100644
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/[id]/edit/(components)/form.svelte
@@ -14,8 +14,11 @@
 	import { Checkbox } from '$lib/components/ui/checkbox'
 	import { onMount } from 'svelte'
 
-	export let data: SuperValidated<Infer<FormSchema>>
-	export let code: string
+	let {
+		data,
+		code,
+	}: { data: SuperValidated<Infer<FormSchema>>; code: string } =
+		$props()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
@@ -33,9 +36,9 @@
 
 	const { form: formData, enhance, submitting } = form
 
-	let inputTimer: any
-	let previewData: any
-	let isPreviewLoading: boolean = false
+	let inputTimer: any = $state()
+	let previewData: any = $state()
+	let isPreviewLoading: boolean = $state(false)
 
 	const getMetadata = async () => {
 		isPreviewLoading = true
@@ -91,7 +94,7 @@
 				{...attrs}
 				bind:value={$formData.link}
 				placeholder="https://example.com"
-				on:input={getMetadata} />
+				oninput={getMetadata} />
 		</Form.Control>
 		<Form.Description>Shortener link</Form.Description>
 		<Form.FieldErrors />
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
index d587da3..cc5fb37 100644
--- a/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/[id]/edit/+page.svelte
@@ -3,8 +3,10 @@
 	import type { PageData } from './$types'
 	import Form from './(components)/form.svelte'
 
-	export let data: PageData
-	export let shallowRouting = false
+	let {
+		data,
+		shallowRouting = $bindable(false),
+	}: { data: PageData; shallowRouting: boolean } = $props()
 </script>
 
 {#if !shallowRouting}
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
index ca1464b..db8d2cf 100644
--- a/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/[id]/qr/(components)/qr.svelte
@@ -1,20 +1,30 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button'
+	import { Button, buttonVariants } from '$lib/components/ui/button'
 	import { toast } from 'svelte-sonner'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js'
 	import { Badge } from '$lib/components/ui/badge'
 	import { browser } from '$app/environment'
+	import { cn } from '$lib/utils'
 
-	export let background = '#fff'
-	export let color = '#000'
-	export let value = ''
-	export let code = ''
-	export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
-		'square'
-	export let dotStyle: 'square' | 'rounded' = 'square'
-	export let existingQrImage: string | null = null
+	let {
+		background = '#fff',
+		color = '#000',
+		value = '',
+		code = '',
+		cornerSquareStyle = 'square',
+		dotStyle = 'square',
+		existingQrImage = null,
+	}: {
+		background: string
+		color: string
+		value: string
+		code: string
+		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
+		dotStyle: 'square' | 'rounded'
+		existingQrImage: string | null
+	} = $props()
 
-	let image = ''
+	let image = $state('')
 
 	const copyImageToClipboard = async () => {
 		if (!image) return
@@ -70,7 +80,11 @@
 		image = URL.createObjectURL(blob)
 	}
 
-	$: value && browser && generateQrCode()
+	$effect(() => {
+		if (value && browser) {
+			generateQrCode()
+		}
+	})
 </script>
 
 <div class="flex h-full flex-col items-center gap-4">
@@ -79,22 +93,25 @@
 	</Badge>
 	<img src={image} alt={value} width={300} height={300} />
 	<div class="flex w-full gap-4">
-		<Button class="w-full" on:click={copyImageToClipboard}>
+		<Button class="w-full" onclick={copyImageToClipboard}>
 			Copy Image
 		</Button>
 		<DropdownMenu.Root>
-			<DropdownMenu.Trigger asChild let:builder>
-				<Button builders={[builder]} class="w-full">QR Link</Button>
+			<DropdownMenu.Trigger
+				class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
+				QR Link
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content>
-				<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
-					Standard
-				</DropdownMenu.Item>
-				<DropdownMenu.Item
-					href={`/url/${code}/qr?color=true`}
-					target="_blank">
-					With Style
-				</DropdownMenu.Item>
+				<DropdownMenu.Group>
+					<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
+						Standard
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						href={`/url/${code}/qr?color=true`}
+						target="_blank">
+						With Style
+					</DropdownMenu.Item>
+				</DropdownMenu.Group>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>
diff --git a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
index 98da061..49ba36c 100644
--- a/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/links/[id]/qr/+page.svelte
@@ -3,8 +3,10 @@
 	import type { PageData } from './$types'
 	import QR from './(components)/qr.svelte'
 
-	export let data: PageData
-	export let shallowRouting = false
+	let {
+		data,
+		shallowRouting = $bindable(false),
+	}: { data: PageData; shallowRouting: boolean } = $props()
 </script>
 
 {#if !shallowRouting}
diff --git a/frontend/src/routes/(app)/dashboard/projects/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/+page.svelte
index 28be9f5..2a308af 100644
--- a/frontend/src/routes/(app)/dashboard/projects/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/+page.svelte
@@ -11,9 +11,9 @@
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
 
-	export let data
+	let { data } = $props()
 
-	let dialogOpen = false
+	let dialogOpen = $state(false)
 
 	const form = superForm(data.form, {
 		validators: zodClient(formSchema),
@@ -102,7 +102,7 @@
 						<p class="text-muted-foreground">Add a new project</p>
 					</div>
 					<Button
-						on:click={() => {
+						onclick={() => {
 							dialogOpen = true
 						}}
 						class="w-fit">
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
index 6a5649b..df780dd 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/(components)/form.svelte
@@ -16,8 +16,13 @@
 	import { Checkbox } from '$lib/components/ui/checkbox'
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 
-	export let data: SuperValidated<Infer<FormSchema>>
-	export let dialogOpen: boolean
+	let {
+		data,
+		dialogOpen = $bindable(),
+	}: {
+		data: SuperValidated<Infer<FormSchema>>
+		dialogOpen: boolean
+	} = $props()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
@@ -36,9 +41,9 @@
 
 	const { form: formData, enhance, submitting } = form
 
-	let inputTimer: any
-	let previewData: any
-	let isPreviewLoading: boolean = false
+	let inputTimer: any = $state()
+	let previewData: any = $state()
+	let isPreviewLoading: boolean = $state(false)
 
 	const getMetadata = async () => {
 		isPreviewLoading = true
@@ -104,7 +109,7 @@
 							{...attrs}
 							bind:value={$formData.link}
 							placeholder="https://example.com"
-							on:input={getMetadata} />
+							oninput={getMetadata} />
 					</Form.Control>
 					<Form.Description>Shortener link</Form.Description>
 					<Form.FieldErrors />
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
index b5751db..a6bae07 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/+layout.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import type { PageData } from './$types'
 	import { page } from '$app/stores'
 	import { Button } from '$lib/components/ui/button'
 	import { Separator } from '$lib/components/ui/separator'
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 
-	export let data: PageData
+	let { data, children } = $props()
 </script>
 
 <div class="flex h-fit flex-col gap-2 px-4 pt-8 md:px-10">
@@ -40,5 +39,5 @@
 </div>
 
 <div class="flex w-full flex-grow flex-col overflow-hidden">
-	<slot />
+	{@render children()}
 </div>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
index 91076f8..fa657cb 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/+page.svelte
@@ -14,30 +14,31 @@
 
 	import { SortAscIcon, SortDescIcon } from 'lucide-svelte'
 
-	import type { PageData } from './$types'
 	import { ScrollArea } from '$lib/components/ui/scroll-area'
 	import Form from './(components)/form.svelte'
 	import EditProjectLinkPage from './links/[linkid]/edit/+page.svelte'
 	import ProjectLinkQRPage from './links/[linkid]/qr/+page.svelte'
 
-	export let data: PageData
+	let { data } = $props()
 
-	let dialogOpen = false
+	let dialogOpen = $state(false)
 
-	let search: string | null = data.search
-	let searchUpdateTimeout: any
+	let search = $state<string | null>(data.search)
+	let searchUpdateTimeout = $state<any>()
 
-	$: browser &&
-		search &&
-		goto(
-			updateSearchParam([
-				{ name: 'search', value: search },
-				{
-					name: 'page',
-					value: 1,
-				},
-			]),
-		)
+	$effect(() => {
+		if (browser && (search || true)) {
+			goto(
+				updateSearchParam([
+					{ name: 'search', value: search },
+					{
+						name: 'page',
+						value: 1,
+					},
+				]),
+			)
+		}
+	})
 
 	const updateSearchParam = (
 		params: { name: string; value: any }[],
@@ -61,10 +62,13 @@
 		}
 	}
 
-	let editProjectLinkOpen = false
+	let editProjectLinkOpen = $state(false)
+	let projectLinkQROpen = $state(false)
 
-	$: editProjectLinkOpen = !!$page.state.editProjectLink
-	$: projectLinkQROpen = !!$page.state.projectLinkQR
+	$effect(() => {
+		editProjectLinkOpen = !!$page.state.editProjectLink
+		projectLinkQROpen = !!$page.state.projectLinkQR
+	})
 </script>
 
 <div
@@ -108,24 +112,13 @@
 						type="text"
 						placeholder="search"
 						value={search}
-						on:input={({ target }) => {
+						oninput={({ target }) => {
 							clearTimeout(searchUpdateTimeout)
 							searchUpdateTimeout = setTimeout(() => {
 								search = target.value
 							}, 500)
 						}} />
-					<Button
-						disabled={!search}
-						on:click={() =>
-							goto(
-								updateSearchParam([
-									{ name: 'search', value: search },
-									{
-										name: 'page',
-										value: 1,
-									},
-								]),
-							)}>
+					<Button disabled={!search} onclick={() => (search = '')}>
 						Clear
 					</Button>
 				</div>
@@ -168,24 +161,13 @@
 			class="max-w-[250px]"
 			autofocus
 			value={search}
-			on:input={({ target }) => {
+			oninput={({ target }) => {
 				clearTimeout(searchUpdateTimeout)
 				searchUpdateTimeout = setTimeout(() => {
 					search = target.value
 				}, 500)
 			}} />
-		<Button
-			disabled={!search}
-			on:click={() =>
-				goto(
-					updateSearchParam([
-						{ name: 'search', value: search },
-						{
-							name: 'page',
-							value: 1,
-						},
-					]),
-				)}>
+		<Button disabled={!search} onclick={() => (search = '')}>
 			Clear
 		</Button>
 	</div>
@@ -223,7 +205,7 @@
 							<p class="text-muted-foreground">Add a new shortener</p>
 						</div>
 						<Button
-							on:click={() => {
+							onclick={() => {
 								dialogOpen = true
 							}}
 							class="w-fit">
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
index d2f16f7..3da378d 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/(components)/form.svelte
@@ -14,9 +14,15 @@
 	import { Checkbox } from '$lib/components/ui/checkbox'
 	import { onMount } from 'svelte'
 
-	export let data: SuperValidated<Infer<FormSchema>>
-	export let uuid: string
-	export let code: string
+	let {
+		data,
+		code,
+		uuid,
+	}: {
+		data: SuperValidated<Infer<FormSchema>>
+		uuid: string
+		code: string
+	} = $props()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
@@ -34,9 +40,9 @@
 
 	const { form: formData, enhance, submitting } = form
 
-	let inputTimer: any
-	let previewData: any
-	let isPreviewLoading: boolean = false
+	let inputTimer: any = $state()
+	let previewData: any = $state()
+	let isPreviewLoading: boolean = $state(false)
 
 	const getMetadata = async () => {
 		isPreviewLoading = true
@@ -92,7 +98,7 @@
 				{...attrs}
 				bind:value={$formData.link}
 				placeholder="https://example.com"
-				on:input={getMetadata} />
+				oninput={getMetadata} />
 		</Form.Control>
 		<Form.Description>Shortener link</Form.Description>
 		<Form.FieldErrors />
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
index 14980c9..dbafcfc 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/edit/+page.svelte
@@ -3,8 +3,10 @@
 	import type { PageData } from './$types'
 	import Form from './(components)/form.svelte'
 
-	export let data: PageData
-	export let shallowRouting = false
+	let {
+		data,
+		shallowRouting = $bindable(false),
+	}: { data: PageData; shallowRouting: boolean } = $props()
 </script>
 
 {#if !shallowRouting}
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
index ca1464b..56e913d 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/(components)/qr.svelte
@@ -1,20 +1,30 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button'
+	import { Button, buttonVariants } from '$lib/components/ui/button'
 	import { toast } from 'svelte-sonner'
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 	import { Badge } from '$lib/components/ui/badge'
 	import { browser } from '$app/environment'
+	import { cn } from '$lib/utils'
 
-	export let background = '#fff'
-	export let color = '#000'
-	export let value = ''
-	export let code = ''
-	export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
-		'square'
-	export let dotStyle: 'square' | 'rounded' = 'square'
-	export let existingQrImage: string | null = null
+	let {
+		background = '#fff',
+		color = '#000',
+		value = '',
+		code = '',
+		cornerSquareStyle = 'square',
+		dotStyle = 'square',
+		existingQrImage = null,
+	}: {
+		background: string
+		color: string
+		value: string
+		code: string
+		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
+		dotStyle: 'square' | 'rounded'
+		existingQrImage: string | null
+	} = $props()
 
-	let image = ''
+	let image = $state('')
 
 	const copyImageToClipboard = async () => {
 		if (!image) return
@@ -70,7 +80,11 @@
 		image = URL.createObjectURL(blob)
 	}
 
-	$: value && browser && generateQrCode()
+	$effect(() => {
+		if (value && browser) {
+			generateQrCode()
+		}
+	})
 </script>
 
 <div class="flex h-full flex-col items-center gap-4">
@@ -79,22 +93,25 @@
 	</Badge>
 	<img src={image} alt={value} width={300} height={300} />
 	<div class="flex w-full gap-4">
-		<Button class="w-full" on:click={copyImageToClipboard}>
+		<Button class="w-full" onclick={copyImageToClipboard}>
 			Copy Image
 		</Button>
 		<DropdownMenu.Root>
-			<DropdownMenu.Trigger asChild let:builder>
-				<Button builders={[builder]} class="w-full">QR Link</Button>
+			<DropdownMenu.Trigger
+				class={cn(buttonVariants({ variant: 'default' }), 'w-full')}>
+				QR Link
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Content>
-				<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
-					Standard
-				</DropdownMenu.Item>
-				<DropdownMenu.Item
-					href={`/url/${code}/qr?color=true`}
-					target="_blank">
-					With Style
-				</DropdownMenu.Item>
+				<DropdownMenu.Group>
+					<DropdownMenu.Item href={`/url/${code}/qr`} target="_blank">
+						Standard
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						href={`/url/${code}/qr?color=true`}
+						target="_blank">
+						With Style
+					</DropdownMenu.Item>
+				</DropdownMenu.Group>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
index 94a49a3..10f0d94 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/links/[linkid]/qr/+page.svelte
@@ -3,8 +3,10 @@
 	import type { PageData } from './$types'
 	import QR from './(components)/qr.svelte'
 
-	export let data: PageData
-	export let shallowRouting = false
+	let {
+		data,
+		shallowRouting,
+	}: { data: PageData; shallowRouting: boolean } = $props()
 
 	const url =
 		data.project.enable_custom_domain && data.project.custom_domain
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
index 7326bf0..a92721f 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/DemoQR.svelte
@@ -2,16 +2,25 @@
 	import { onMount } from 'svelte'
 	import { browser } from '$app/environment'
 
-	export let background = '#fff'
-	export let color = '#000'
-	export let value = 'example.com/abcdefgh'
-	export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
-		'square'
-	export let dotStyle: 'square' | 'rounded' = 'square'
-	export let existingQrImage: string | null = null
-	export let qrImage: File | null = null
+	let {
+		background = '#fff',
+		color = '#000',
+		value = 'example.com/abcdefgh',
+		cornerSquareStyle = 'square',
+		dotStyle = 'square',
+		existingQrImage = null,
+		qrImage = null,
+	}: {
+		background: string
+		color: string
+		value: string
+		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
+		dotStyle: 'square' | 'rounded'
+		existingQrImage: string | null
+		qrImage: File | null
+	} = $props()
 
-	let image = ''
+	let image = $state('')
 
 	async function generateQrCode() {
 		if (!document || !window) {
@@ -58,13 +67,18 @@
 		}
 	}
 
-	$: browser &&
-		background &&
-		color &&
-		cornerSquareStyle &&
-		dotStyle &&
-		(qrImage === null || qrImage) &&
-		generateQrCode()
+	$effect(() => {
+		if (
+			browser &&
+			background &&
+			color &&
+			cornerSquareStyle &&
+			dotStyle &&
+			(qrImage === null || qrImage)
+		) {
+			generateQrCode()
+		}
+	})
 
 	onMount(() => {
 		generateQrCode()
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
index 99b176f..7ceff19 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-info.svelte
@@ -2,10 +2,17 @@
 	import * as Tabs from '$lib/components/ui/tabs/index.js'
 	import * as Card from '$lib/components/ui/card/index.js'
 
-	export let host: string
-	export let cname_record: string
-	export let a_record: string
-	export let aaaa_record: string
+	let {
+		host,
+		a_record,
+		aaaa_record,
+		cname_record,
+	}: {
+		host: string
+		cname_record: string
+		a_record: string
+		aaaa_record: string
+	} = $props()
 
 	const defaultValue = cname_record ? 'cname' : 'a'
 </script>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
index cce878b..cc46c2d 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/dns-tooltip.svelte
@@ -2,11 +2,19 @@
 	import * as Tooltip from '$lib/components/ui/tooltip/index.js'
 	import { InfoIcon } from 'lucide-svelte'
 
-	export let domain: string
-	export let custom_ip: string | null
-	export let cname_record: string
-	export let a_record: string
-	export let aaaa_record: string
+	let {
+		a_record,
+		aaaa_record,
+		cname_record,
+		custom_ip,
+		domain,
+	}: {
+		domain: string
+		custom_ip: string | null
+		cname_record: string
+		a_record: string
+		aaaa_record: string
+	} = $props()
 </script>
 
 <Tooltip.Root>
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
index 8ecf4c5..6feda62 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/(components)/form.svelte
@@ -14,11 +14,17 @@
 	import DemoQr from './DemoQR.svelte'
 	import { cn } from '$lib/utils'
 
-	export let data: SuperValidated<Infer<FormSchema>>
-	export let qrImageBase64: string | null = null
-	export let isPro: boolean = false
+	let {
+		data,
+		qrImageBase64 = null,
+		isPro = false,
+	}: {
+		data: SuperValidated<Infer<FormSchema>>
+		qrImageBase64: string | null
+		isPro: boolean
+	} = $props()
 
-	let qrImageInput: HTMLInputElement
+	let qrImageInput: HTMLInputElement | undefined = $state()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
@@ -84,7 +90,7 @@
 			<div>
 				{#if !$formData.qrImage && !qrImageBase64}
 					<button
-						on:click={(e) => {
+						onclick={(e) => {
 							e.preventDefault()
 							qrImageInput.click()
 						}}>
@@ -94,7 +100,7 @@
 					</button>
 				{:else}
 					<button
-						on:click={(e) => {
+						onclick={(e) => {
 							e.preventDefault()
 							qrImageInput.click()
 						}}>
@@ -119,7 +125,7 @@
 				accept="image/png, image/jpeg"
 				type="file"
 				disabled={!isPro}
-				on:input={(e) => {
+				oninput={(e) => {
 					const file = e.currentTarget.files?.item(0)
 					if (!file) return
 
@@ -147,7 +153,7 @@
 		<div class="flex gap-4">
 			<Button
 				disabled={!isPro}
-				on:click={() => ($formData.qrCornerSquareStyle = 'square')}
+				onclick={() => ($formData.qrCornerSquareStyle = 'square')}
 				class={cn(
 					'flex flex-col gap-3 border p-12',
 					$formData.qrCornerSquareStyle === 'square'
@@ -159,7 +165,7 @@
 			</Button>
 			<Button
 				disabled={!isPro}
-				on:click={() => ($formData.qrCornerSquareStyle = 'dot')}
+				onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
 				class={cn(
 					'flex flex-col gap-3 border p-12',
 					$formData.qrCornerSquareStyle === 'dot'
@@ -171,7 +177,7 @@
 			</Button>
 			<Button
 				disabled={!isPro}
-				on:click={() =>
+				onclick={() =>
 					($formData.qrCornerSquareStyle = 'extra-rounded')}
 				class={cn(
 					'flex flex-col gap-3 border p-12',
@@ -199,7 +205,7 @@
 		<div class="flex gap-4">
 			<Button
 				disabled={!isPro}
-				on:click={() => ($formData.qrDotStyle = 'square')}
+				onclick={() => ($formData.qrDotStyle = 'square')}
 				class={cn(
 					'flex flex-col gap-3 border p-12',
 					$formData.qrDotStyle === 'square'
@@ -211,7 +217,7 @@
 			</Button>
 			<Button
 				disabled={!isPro}
-				on:click={() => ($formData.qrDotStyle = 'rounded')}
+				onclick={() => ($formData.qrDotStyle = 'rounded')}
 				class={cn(
 					'flex flex-col gap-3 border p-12',
 					$formData.qrDotStyle === 'rounded'
diff --git a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
index 8a13bd0..1340898 100644
--- a/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/projects/[id]/settings/+page.svelte
@@ -26,9 +26,9 @@
 	import DnsInfo from './(components)/dns-info.svelte'
 	import DnsTooltip from './(components)/dns-tooltip.svelte'
 
-	export let data
+	let { data } = $props()
 
-	let deleteDialogOpen = false
+	let deleteDialogOpen = $state(false)
 
 	const form = superForm(data.deleteForm, {
 		invalidateAll: 'force',
@@ -211,7 +211,7 @@
 												Cancel
 											</Button>
 										</Dialog.Close>
-										<Button on:click={enableCustomDomainSubmit}>
+										<Button onclick={enableCustomDomainSubmit}>
 											{#if $enableCustomDomainSubmitting}
 												<LoaderCircle class="animate-spin" />
 											{/if}
@@ -239,7 +239,7 @@
 									<AlertDialog.Footer>
 										<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
 										<AlertDialog.Action
-											on:click={async () => {
+											onclick={async () => {
 												await fetch('?/disable_custom_domain', {
 													method: 'POST',
 													headers: {
@@ -368,7 +368,7 @@
 							<div class="flex justify-end gap-2">
 								<Button
 									variant="outline"
-									on:click={() => (deleteDialogOpen = false)}>
+									onclick={() => (deleteDialogOpen = false)}>
 									Cancel
 								</Button>
 								<Form.Button variant="destructive" class="w-fit">
diff --git a/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte b/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
index 70056a4..1b2d9ec 100644
--- a/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
+++ b/frontend/src/routes/(app)/dashboard/settings/(components)/sidebar-nav.svelte
@@ -2,8 +2,12 @@
 	import { cn } from '$lib/utils'
 	import { page } from '$app/stores'
 	import { Button } from '$lib/components/ui/button'
-	let className: string | undefined | null = undefined
-	export { className as class }
+
+	let {
+		class: className = undefined,
+	}: {
+		class: string | undefined | null
+	} = $props()
 
 	const items = [
 		{
diff --git a/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
index c47fd1b..1f31ac0 100644
--- a/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/settings/account/+page.svelte
@@ -8,7 +8,7 @@
 	import { toast } from 'svelte-sonner'
 	import { LoaderCircle, CheckIcon, XIcon } from 'lucide-svelte'
 
-	export let data
+	let { data } = $props()
 
 	const form = superForm(data.form, {
 		validators: zodClient(formSchema),
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte b/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
index 9117529..aaed3e0 100644
--- a/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
+++ b/frontend/src/routes/(app)/dashboard/settings/qr/(components)/DemoQR.svelte
@@ -2,16 +2,25 @@
 	import { onMount } from 'svelte'
 	import { browser } from '$app/environment'
 
-	export let background = '#fff'
-	export let color = '#000'
-	export let value = 'abcdefghajskdadsj'
-	export let cornerSquareStyle: 'dot' | 'square' | 'extra-rounded' =
-		'square'
-	export let dotStyle: 'square' | 'rounded' = 'square'
-	export let existingQrImage: string | null = null
-	export let qrImage: File | null = null
+	let {
+		background = '#fff',
+		color = '#000',
+		value = 'abcdefghajskdadsj',
+		cornerSquareStyle = 'square',
+		dotStyle = 'square',
+		existingQrImage = null,
+		qrImage = null,
+	}: {
+		background: string
+		color: string
+		value: string
+		cornerSquareStyle: 'dot' | 'square' | 'extra-rounded'
+		dotStyle: 'square' | 'rounded'
+		existingQrImage: string | null
+		qrImage: File | null
+	} = $props()
 
-	let image = ''
+	let image = $state('')
 
 	async function generateQrCode() {
 		if (!document || !window) {
@@ -58,13 +67,18 @@
 		}
 	}
 
-	$: browser &&
-		background &&
-		color &&
-		cornerSquareStyle &&
-		dotStyle &&
-		(qrImage === null || qrImage) &&
-		generateQrCode()
+	$effect(() => {
+		if (
+			browser &&
+			background &&
+			color &&
+			cornerSquareStyle &&
+			dotStyle &&
+			(qrImage === null || qrImage)
+		) {
+			generateQrCode()
+		}
+	})
 
 	onMount(() => {
 		generateQrCode()
diff --git a/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
index ceb79c4..946cabd 100644
--- a/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/settings/qr/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Separator } from '$lib/components/ui/separator'
-	import type { PageData } from './$types'
 	import * as Form from '$lib/components/ui/form'
 	import { Input } from '$lib/components/ui/input'
 	import { formSchema } from './schema'
@@ -12,7 +11,7 @@
 	import { Button } from '$lib/components/ui/button'
 	import { cn } from '$lib/utils'
 
-	export let data: PageData
+	let { data } = $props()
 
 	let qrImageInput: HTMLInputElement
 
@@ -81,7 +80,7 @@
 				<div>
 					{#if !$formData.qrImage && !data.qrImageBase64}
 						<button
-							on:click={(e) => {
+							onclick={(e) => {
 								e.preventDefault()
 								qrImageInput.click()
 							}}>
@@ -91,7 +90,7 @@
 						</button>
 					{:else}
 						<button
-							on:click={(e) => {
+							onclick={(e) => {
 								e.preventDefault()
 								qrImageInput.click()
 							}}>
@@ -113,7 +112,7 @@
 					accept="image/png, image/jpeg"
 					type="file"
 					disabled={data.user.plan === 'free'}
-					on:input={(e) => {
+					oninput={(e) => {
 						const file = e.currentTarget.files?.item(0)
 						if (!file) return
 
@@ -141,7 +140,7 @@
 			<div class="flex gap-4">
 				<Button
 					disabled={data.user.plan === 'free'}
-					on:click={() => ($formData.qrCornerSquareStyle = 'square')}
+					onclick={() => ($formData.qrCornerSquareStyle = 'square')}
 					class={cn(
 						'flex flex-col gap-3 border p-12',
 						$formData.qrCornerSquareStyle === 'square'
@@ -153,7 +152,7 @@
 				</Button>
 				<Button
 					disabled={data.user.plan === 'free'}
-					on:click={() => ($formData.qrCornerSquareStyle = 'dot')}
+					onclick={() => ($formData.qrCornerSquareStyle = 'dot')}
 					class={cn(
 						'flex flex-col gap-3 border p-12',
 						$formData.qrCornerSquareStyle === 'dot'
@@ -165,7 +164,7 @@
 				</Button>
 				<Button
 					disabled={data.user.plan === 'free'}
-					on:click={() =>
+					onclick={() =>
 						($formData.qrCornerSquareStyle = 'extra-rounded')}
 					class={cn(
 						'flex flex-col gap-3 border p-12',
@@ -193,7 +192,7 @@
 			<div class="flex gap-4">
 				<Button
 					disabled={data.user.plan === 'free'}
-					on:click={() => ($formData.qrDotStyle = 'square')}
+					onclick={() => ($formData.qrDotStyle = 'square')}
 					class={cn(
 						'flex flex-col gap-3 border p-12',
 						$formData.qrDotStyle === 'square'
@@ -205,7 +204,7 @@
 				</Button>
 				<Button
 					disabled={data.user.plan === 'free'}
-					on:click={() => ($formData.qrDotStyle = 'rounded')}
+					onclick={() => ($formData.qrDotStyle = 'rounded')}
 					class={cn(
 						'flex flex-col gap-3 border p-12',
 						$formData.qrDotStyle === 'rounded'
diff --git a/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte b/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
index 1c449aa..c09bb95 100644
--- a/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
+++ b/frontend/src/routes/(app)/dashboard/settings/security/+page.svelte
@@ -10,7 +10,7 @@
 	import * as Dialog from '$lib/components/ui/dialog'
 	import { Button } from '$lib/components/ui/button'
 
-	export let data
+	let { data } = $props()
 
 	const form = superForm(data.form, {
 		validators: zodClient(changePasswordFormSchema),
@@ -28,7 +28,7 @@
 
 	const { form: formData, enhance, submitting } = form
 
-	let deleteDialogOpen = false
+	let deleteDialogOpen = $state(false)
 
 	const deleteAccountForm = superForm(data.deleteAccountForm, {
 		invalidateAll: 'force',
@@ -163,7 +163,7 @@
 						<div class="flex justify-end gap-2">
 							<Button
 								variant="outline"
-								on:click={() => (deleteDialogOpen = false)}>
+								onclick={() => (deleteDialogOpen = false)}>
 								Cancel
 							</Button>
 							<Form.Button variant="destructive" class="w-fit">
diff --git a/frontend/src/routes/(auth)/email-verification/[token]/+page.svelte b/frontend/src/routes/(auth)/email-verification/[token]/+page.svelte
index 51707a6..189a5b9 100644
--- a/frontend/src/routes/(auth)/email-verification/[token]/+page.svelte
+++ b/frontend/src/routes/(auth)/email-verification/[token]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CheckCircle2Icon, XCircleIcon } from 'lucide-svelte'
 	import { Button } from '$lib/components/ui/button'
-	export let data
+	let { data } = $props()
 </script>
 
 <div
diff --git a/frontend/src/routes/(auth)/login/(components)/form.svelte b/frontend/src/routes/(auth)/login/(components)/form.svelte
index b60adc4..1a263dd 100644
--- a/frontend/src/routes/(auth)/login/(components)/form.svelte
+++ b/frontend/src/routes/(auth)/login/(components)/form.svelte
@@ -11,7 +11,7 @@
 	import { toast } from 'svelte-sonner'
 	import { LoaderCircle } from 'lucide-svelte'
 
-	export let data: SuperValidated<Infer<FormSchema>>
+	let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
diff --git a/frontend/src/routes/(auth)/login/+page.svelte b/frontend/src/routes/(auth)/login/+page.svelte
index fd8d1a5..b5512cd 100644
--- a/frontend/src/routes/(auth)/login/+page.svelte
+++ b/frontend/src/routes/(auth)/login/+page.svelte
@@ -2,14 +2,13 @@
 	import ThemeToggle from '$lib/components/theme-toggle.svelte'
 	import Form from './(components)/form.svelte'
 
-	import type { PageData } from './$types'
 	import { Button } from '$lib/components/ui/button'
 	import { LoaderIcon } from 'lucide-svelte'
 	import Google from '$lib/components/icons/google.svelte'
 
-	export let data: PageData
+	let { data } = $props()
 
-	let isLoading = false
+	let isLoading = $state(false)
 
 	const loginGoogle = async () => {
 		// isLoading = true
diff --git a/frontend/src/routes/(auth)/signup/(components)/form.svelte b/frontend/src/routes/(auth)/signup/(components)/form.svelte
index 1c42e14..24f22c5 100644
--- a/frontend/src/routes/(auth)/signup/(components)/form.svelte
+++ b/frontend/src/routes/(auth)/signup/(components)/form.svelte
@@ -11,7 +11,7 @@
 	import { toast } from 'svelte-sonner'
 	import { LoaderCircle } from 'lucide-svelte'
 
-	export let data: SuperValidated<Infer<FormSchema>>
+	let { data }: { data: SuperValidated<Infer<FormSchema>> } = $props()
 
 	const form = superForm(data, {
 		validators: zodClient(formSchema),
diff --git a/frontend/src/routes/(auth)/signup/+page.svelte b/frontend/src/routes/(auth)/signup/+page.svelte
index 61c579f..2d194dc 100644
--- a/frontend/src/routes/(auth)/signup/+page.svelte
+++ b/frontend/src/routes/(auth)/signup/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
 	import ThemeToggle from '$lib/components/theme-toggle.svelte'
 	import Form from './(components)/form.svelte'
-	import type { PageData } from './$types'
 
-	export let data: PageData
+	let { data } = $props()
 </script>
 
 <svelte:head>
diff --git a/frontend/src/routes/(public)/url/[id]/qr/+page.svelte b/frontend/src/routes/(public)/url/[id]/qr/+page.svelte
index 485ee76..c956d1a 100644
--- a/frontend/src/routes/(public)/url/[id]/qr/+page.svelte
+++ b/frontend/src/routes/(public)/url/[id]/qr/+page.svelte
@@ -5,9 +5,9 @@
 	import { onMount } from 'svelte'
 	import * as Card from '$lib/components/ui/card'
 
-	export let data
+	let { data } = $props()
 
-	let image = ''
+	let image = $state('')
 
 	const copyImageToClipboard = async () => {
 		if (!image) return
@@ -79,7 +79,7 @@
 			alt={data.url + '/' + data.shortenerId}
 			width={300}
 			height={300} />
-		<Button class="w-full" on:click={copyImageToClipboard}>
+		<Button class="w-full" onclick={copyImageToClipboard}>
 			Copy Image
 		</Button>
 	</Card.Header>