diff --git a/src/components/ConnectProvider.svelte b/src/components/ConnectProvider.svelte
index 3665b92..a89ade3 100644
--- a/src/components/ConnectProvider.svelte
+++ b/src/components/ConnectProvider.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
   import Modal from '../components/Modal.svelte';
   import LoginForm from './LoginForm.svelte';
-  export let close = () => {};
-  export let isOpen: boolean = false;
+
+  interface Props {
+    close: () => {};
+    isOpen: boolean;
+  }
+
+  let { close, isOpen = false }: Props = $props();
 </script>
 
 <Modal id="connect-provider" {close} {isOpen}>
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
index ce7c991..2bcc3cd 100644
--- a/src/components/DropDownMenu.svelte
+++ b/src/components/DropDownMenu.svelte
@@ -1,11 +1,23 @@
 <script lang="ts" generics="T extends { toString: () => string }">
-  export let label: string;
-  export let id: string = '';
-  export let options: T[]; // eslint-disable-line no-undef
-  export let value: T | null = null; // eslint-disable-line no-undef
-  export let placeholder: string = '';
-  export let onChange: (() => void) | undefined = undefined;
-  export let formatter: (value: T) => string = (value) => value.toString(); // eslint-disable-line no-undef
+  interface Props {
+    label: string;
+    id: string;
+    options: T[];
+    value: T | null;
+    placeholder: string;
+    onChange: (() => void) | undefined;
+    formatter: (value: T) => string;
+  }
+
+  let {
+    label,
+    id = '',
+    options,
+    value = null,
+    placeholder = '',
+    onChange = undefined,
+    formatter = (value) => value.toString(),
+  }: Props = $props();
 </script>
 
 <div>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 701bb28..3312e0f 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-  export let id: string;
-  export let close = () => {};
-  export let isOpen: boolean = false;
+  interface Props {
+		id: string;
+    close: () => {};
+    isOpen: boolean
+	}
+
+	let { id, close, isOpen = false }: Props = $props();
 </script>
 
 {#if isOpen}
diff --git a/src/components/NavItem.svelte b/src/components/NavItem.svelte
index 02c467b..635365f 100644
--- a/src/components/NavItem.svelte
+++ b/src/components/NavItem.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-  export let href: string = '';
-  export let isActive: boolean = false;
-  export let onClick: () => void = () => {};
-  export let id: string = '';
-  export let target: string = '';
+  interface Props {
+    href: string;
+    isActive: boolean;
+    onClick: () => void;
+    id: string;
+    target: string;
+  }
+
+  let { href = '', isActive = false, onClick = () => {}, id = '', target = '' }: Props = $props();
 </script>
 
 <a