diff --git a/src/lib/components/navigator/Sidebar.svelte b/src/lib/components/navigator/Sidebar.svelte
index fe6d3e84..f9b1167a 100644
--- a/src/lib/components/navigator/Sidebar.svelte
+++ b/src/lib/components/navigator/Sidebar.svelte
@@ -96,14 +96,14 @@
 			icon={mdiHome}
 			{isSidebarOpen}
 			link={'/'}
-			onClick={closeSidebar}
+			on:click={closeSidebar}
 			title="Dashboard"
 		/>
 		<SidebarEntry
 			icon={mdiStar}
 			{isSidebarOpen}
 			link={'/wish-statistics/overview'}
-			onClick={closeSidebar}
+			on:click={closeSidebar}
 			title="Wish Statistics"
 		/>
 
@@ -135,7 +135,7 @@
 				icon={mdiCog}
 				{isSidebarOpen}
 				link={'/settings'}
-				onClick={closeSidebar}
+				on:click={closeSidebar}
 				title="Settings"
 			/>
 		</div>
@@ -152,7 +152,7 @@
 				icon={mdiAccount}
 				{isSidebarOpen}
 				link={'/login'}
-				onClick={closeSidebar}
+				on:click={closeSidebar}
 				title="Login or Register"
 				variant="default"
 			/>
diff --git a/src/lib/components/navigator/category/SidebarCategory.svelte b/src/lib/components/navigator/category/SidebarCategory.svelte
index f9cab222..decba9c6 100644
--- a/src/lib/components/navigator/category/SidebarCategory.svelte
+++ b/src/lib/components/navigator/category/SidebarCategory.svelte
@@ -44,7 +44,7 @@
 				link={path.link}
 				icon={path.icon}
 				{isSidebarOpen}
-				onClick={closeSidebar}
+				on:click={closeSidebar}
 			/>
 		{/each}
 	</CollapsibleContent>
diff --git a/src/lib/components/navigator/entry/SidebarEntry.svelte b/src/lib/components/navigator/entry/SidebarEntry.svelte
index 9f44fec8..45c236d3 100644
--- a/src/lib/components/navigator/entry/SidebarEntry.svelte
+++ b/src/lib/components/navigator/entry/SidebarEntry.svelte
@@ -6,7 +6,6 @@
 	export let link: string;
 	export let title: string;
 	export let isSidebarOpen: boolean;
-	export let onClick: () => void;
 
 	$: currentActivePath = $page.url.pathname;
 </script>
@@ -15,7 +14,7 @@
 	{...$$restProps}
 	href={link}
 	{icon}
-	{onClick}
+	on:click
 	variant={currentActivePath === link ? 'activeSidebar' : 'sidebar'}
 >
 	<div class={`${isSidebarOpen ? '' : 'sm:max-xl:hidden'}`}>{title}</div>
diff --git a/src/lib/components/tables/banner-history-table/DateRangeFilter.svelte b/src/lib/components/tables/banner-history-table/DateRangeFilter.svelte
index bade40bb..c0a722cc 100644
--- a/src/lib/components/tables/banner-history-table/DateRangeFilter.svelte
+++ b/src/lib/components/tables/banner-history-table/DateRangeFilter.svelte
@@ -67,7 +67,7 @@
 					class="w-full"
 					disabled={value === undefined}
 					icon={mdiFilterRemove}
-					onClick={clearFilter}
+					on:click={clearFilter}
 				>
 					Clear Filter
 				</IconButton>
diff --git a/src/lib/components/ui/icon-button/IconButton.svelte b/src/lib/components/ui/icon-button/IconButton.svelte
index 520260b0..680a3eae 100644
--- a/src/lib/components/ui/icon-button/IconButton.svelte
+++ b/src/lib/components/ui/icon-button/IconButton.svelte
@@ -3,10 +3,9 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 
 	export let icon: string = '';
-	export let onClick: () => void = () => {};
 </script>
 
-<Button {...$$restProps} on:click={onClick}>
+<Button {...$$restProps} on:click>
 	<Icon path={icon} />
 	{#if $$slots}
 		<div class="ml-2">
diff --git a/src/lib/components/ui/searchbar/Searchbar.svelte b/src/lib/components/ui/searchbar/Searchbar.svelte
index 7e44554a..ec504258 100644
--- a/src/lib/components/ui/searchbar/Searchbar.svelte
+++ b/src/lib/components/ui/searchbar/Searchbar.svelte
@@ -27,7 +27,7 @@
 <IconButton
 	class="min-w-48 max-sm:flex-1 justify-start"
 	icon={mdiMagnify}
-	onClick={opencmd}
+	on:click={opencmd}
 	variant="outline"
 >
 	Search...
diff --git a/src/routes/characters/+page.svelte b/src/routes/characters/+page.svelte
index 0ff7dc35..a4bf0af0 100644
--- a/src/routes/characters/+page.svelte
+++ b/src/routes/characters/+page.svelte
@@ -43,7 +43,7 @@
 		<Searchbar searchGroup="Characters" searchableDataList={data} />
 		<IconButton icon={mdiSort}>Sort By</IconButton>
 		<IconButton icon={mdiFilterOutline}>Filter By</IconButton>
-		<IconButton icon={view ? mdiViewList : mdiViewGrid} onClick={toggleViewType} />
+		<IconButton icon={view ? mdiViewList : mdiViewGrid} on:click={toggleViewType} />
 	</svelte:fragment>
 	<div class="flex flex-wrap gap-4 justify-center">
 		{#each data as character}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 85ff4d72..6d45d617 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -70,7 +70,7 @@
 
 		<div class="flex flex-row gap-4">
 			<IconButton href="/settings/import" icon={mdiImport}>Import Data</IconButton>
-			<IconButton icon={mdiExport} onClick={handleSettingsExport}>Export Data</IconButton>
+			<IconButton icon={mdiExport} on:click={handleSettingsExport}>Export Data</IconButton>
 		</div>
 	</div>
 </DefaultLayout>
diff --git a/src/routes/settings/import/+page.svelte b/src/routes/settings/import/+page.svelte
index 760e0499..78362cc7 100644
--- a/src/routes/settings/import/+page.svelte
+++ b/src/routes/settings/import/+page.svelte
@@ -76,7 +76,7 @@
 	</Tabs>
 
 	<div class="flex items-center gap-2">
-		<IconButton icon={mdiImport} onClick={selectFile}>Select file</IconButton>
+		<IconButton icon={mdiImport} on:click={selectFile}>Select file</IconButton>
 		{#if file !== undefined}
 			{file?.name}
 		{:else}
@@ -93,7 +93,7 @@
 		<IconButton
 			disabled={file === undefined}
 			icon={mdiImport}
-			onClick={() => {
+			on:click={() => {
 				dialogOpen = true;
 			}}
 		>