diff --git a/src/lib/components/admin/AdminSegmentedController.svelte b/src/lib/components/admin/AdminSegmentedController.svelte
index 33887db..54c6fc5 100644
--- a/src/lib/components/admin/AdminSegmentedController.svelte
+++ b/src/lib/components/admin/AdminSegmentedController.svelte
@@ -59,7 +59,7 @@
 	<div
 		class="dropdown-container"
 		use:clickOutside={{ enabled: showDropdown }}
-		on:clickoutside={handleClickOutside}
+		onclickoutside={handleClickOutside}
 	>
 		<button
 			class="dropdown-trigger"
diff --git a/src/lib/components/admin/BaseDropdown.svelte b/src/lib/components/admin/BaseDropdown.svelte
index 26fe0fc..df5f46c 100644
--- a/src/lib/components/admin/BaseDropdown.svelte
+++ b/src/lib/components/admin/BaseDropdown.svelte
@@ -41,7 +41,7 @@
 <div
 	class="dropdown-container {className}"
 	use:clickOutside={{ enabled: isOpen }}
-	on:clickoutside={handleClickOutside}
+	onclickoutside={handleClickOutside}
 >
 	<div class="dropdown-trigger">
 		{@render trigger()}
diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte
index b6dbff3..b210f98 100644
--- a/src/lib/components/admin/EssayForm.svelte
+++ b/src/lib/components/admin/EssayForm.svelte
@@ -347,7 +347,7 @@ $effect(() => {
 			<div
 				class="save-actions"
 				use:clickOutside={{ enabled: showPublishMenu }}
-				on:clickoutside={handleClickOutsideMenu}
+				onclickoutside={handleClickOutsideMenu}
 			>
 				<Button variant="primary" onclick={handleSave} disabled={isSaving} class="save-button">
 					{status === 'published' ? 'Save' : 'Save Draft'}
diff --git a/src/lib/components/admin/PostDropdown.svelte b/src/lib/components/admin/PostDropdown.svelte
index a74c936..c8064b8 100644
--- a/src/lib/components/admin/PostDropdown.svelte
+++ b/src/lib/components/admin/PostDropdown.svelte
@@ -43,7 +43,7 @@
 	}
 </script>
 
-<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} on:clickoutside={handleClickOutside}>
+<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} onclickoutside={handleClickOutside}>
 	<Button
 		bind:this={buttonRef}
 		variant="primary"
diff --git a/src/lib/components/admin/ProjectListItem.svelte b/src/lib/components/admin/ProjectListItem.svelte
index b3f61ac..69a10b5 100644
--- a/src/lib/components/admin/ProjectListItem.svelte
+++ b/src/lib/components/admin/ProjectListItem.svelte
@@ -111,7 +111,7 @@
 	<div
 		class="dropdown-container"
 		use:clickOutside={{ enabled: isDropdownOpen }}
-		on:clickoutside={handleClickOutside}
+		onclickoutside={handleClickOutside}
 	>
 		<button
 			class="action-button"
diff --git a/src/lib/components/admin/composer/BubbleColorPicker.svelte b/src/lib/components/admin/composer/BubbleColorPicker.svelte
index d7ef8de..60bece1 100644
--- a/src/lib/components/admin/composer/BubbleColorPicker.svelte
+++ b/src/lib/components/admin/composer/BubbleColorPicker.svelte
@@ -101,7 +101,7 @@
 </script>
 
 {#if isOpen}
-	<div class="bubble-color-picker" use:clickOutside on:clickoutside={onClose}>
+	<div class="bubble-color-picker" use:clickOutside onclickoutside={onClose}>
 		<div class="color-picker-header">
 			<span>{mode === 'text' ? 'Text Color' : 'Highlight Color'}</span>
 			<button class="remove-color-btn" onclick={removeColor}> Remove </button>
diff --git a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
index 8644bef..9a2567f 100644
--- a/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
+++ b/src/lib/components/admin/composer/BubbleTextStyleMenu.svelte
@@ -71,7 +71,7 @@
 </script>
 
 {#if isOpen}
-	<div class="bubble-text-style-menu" use:clickOutside on:clickoutside={onClose}>
+	<div class="bubble-text-style-menu" use:clickOutside onclickoutside={onClose}>
 		{#each textStyles as style}
 			<button
 				class="text-style-option"
diff --git a/src/lib/components/ui/BasePane.svelte b/src/lib/components/ui/BasePane.svelte
index 69da8f9..d12da66 100644
--- a/src/lib/components/ui/BasePane.svelte
+++ b/src/lib/components/ui/BasePane.svelte
@@ -117,7 +117,7 @@
 		role="dialog"
 		aria-modal="false"
 		use:clickOutside={{ enabled: closeOnBackdrop }}
-		on:clickoutside={handleClose}
+		onclickoutside={handleClose}
 	>
 		{#if children}
 			{@render children()}