diff --git a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
index f22538d9430c6..a4b55dccb1325 100644
--- a/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte
@@ -22,6 +22,7 @@
   import SettingAccordion from '../setting-accordion.svelte';
   import { mdiHelpCircleOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let ffmpegConfig: SystemConfigFFmpegDto; // this is the config that is being edited
   export let disabled = false;
@@ -63,6 +64,14 @@
     }
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function reset() {
     const { data: resetConfig } = await api.systemConfigApi.getConfig();
 
@@ -354,9 +363,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
index c945d5c9e474a..f102e791d0778 100644
--- a/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/job-settings/job-settings.svelte
@@ -9,6 +9,7 @@
   import { handleError } from '../../../../utils/handle-error';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let jobConfig: SystemConfigJobDto; // this is the config that is being edited
   export let disabled = false;
@@ -29,6 +30,14 @@
     JobName.Migration,
   ];
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.job),
@@ -101,9 +110,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
index 698f2fc3584da..46901b001113f 100644
--- a/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte
@@ -11,6 +11,7 @@
   import { fade } from 'svelte/transition';
   import { handleError } from '../../../../utils/handle-error';
   import SettingAccordion from '../setting-accordion.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let libraryConfig: SystemConfigLibraryDto; // this is the config that is being edited
   export let disabled = false;
@@ -25,6 +26,14 @@
   let savedConfig: SystemConfigLibraryDto;
   let defaultConfig: SystemConfigLibraryDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.library),
@@ -131,9 +140,8 @@
 
           <div class="ml-4">
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />
diff --git a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
index be6eb413510ae..ad65eb0c1d058 100644
--- a/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte
@@ -12,6 +12,7 @@
   import SettingSwitch from '../setting-switch.svelte';
   import SettingAccordion from '../setting-accordion.svelte';
   import SettingSelect from '../setting-select.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let machineLearningConfig: SystemConfigMachineLearningDto; // this is the config that is being edited
   export let disabled = false;
@@ -33,6 +34,14 @@
     notificationController.show({ message: 'Reset to the last saved settings', type: NotificationType.Info });
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function saveSetting() {
     try {
       const { data: current } = await api.systemConfigApi.getConfig();
@@ -212,9 +221,8 @@
         </SettingAccordion>
 
         <SettingButtonsRow
-          on:reset={reset}
+          on:reset={({ detail }) => handleReset(detail)}
           on:save={saveSetting}
-          on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
index fe2f879690a17..0375dab0b75a9 100644
--- a/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte
@@ -11,6 +11,7 @@
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
@@ -18,6 +19,14 @@
   let savedConfig: SystemConfigDto;
   let defaultConfig: SystemConfigDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function refreshConfig() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data),
@@ -133,9 +142,8 @@
           >
 
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(
               { ...savedConfig.map, ...savedConfig.reverseGeocoding },
               { ...defaultConfig.map, ...defaultConfig.reverseGeocoding },
diff --git a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
index 7568ef60a57f4..7a88bcc06511c 100644
--- a/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte
@@ -9,6 +9,7 @@
   import { fade } from 'svelte/transition';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let newVersionCheckConfig: SystemConfigNewVersionCheckDto; // this is the config that is being edited
 
@@ -22,6 +23,14 @@
     ]);
   }
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function saveSetting() {
     try {
       const { data: configs } = await api.systemConfigApi.getConfig();
@@ -79,9 +88,8 @@
               bind:checked={newVersionCheckConfig.enabled}
             />
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             />
           </div>
diff --git a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
index a9f2c27139a5d..098acc01466c4 100644
--- a/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte
@@ -11,6 +11,7 @@
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let oauthConfig: SystemConfigOAuthDto;
   export let disabled = false;
@@ -18,6 +19,14 @@
   let savedConfig: SystemConfigOAuthDto;
   let defaultConfig: SystemConfigOAuthDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   const handleToggleOverride = () => {
     // click runs before bind
     const previouslyEnabled = oauthConfig.mobileOverrideEnabled;
@@ -209,9 +218,8 @@
         {/if}
 
         <SettingButtonsRow
-          on:reset={reset}
+          on:reset={({ detail }) => handleReset(detail)}
           on:save={saveSetting}
-          on:reset-to-default={resetToDefault}
           showResetToDefault={!isEqual(savedConfig, defaultConfig)}
           {disabled}
         />
diff --git a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
index 0b5f7a16c002e..ec8a748fc27cb 100644
--- a/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte
@@ -10,6 +10,7 @@
   import ConfirmDisableLogin from '../confirm-disable-login.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
   export let disabled = false;
@@ -17,6 +18,14 @@
   let savedConfig: SystemConfigPasswordLoginDto;
   let defaultConfig: SystemConfigPasswordLoginDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
@@ -107,9 +116,8 @@
             />
 
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />
diff --git a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
index 3931d41eb2407..a367832cc1ef2 100644
--- a/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/admin-page/settings/setting-buttons-row.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
   import Button from '$lib/components/elements/buttons/button.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
   import { createEventDispatcher } from 'svelte';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    reset: ResetOptions;
+    save: void;
+  }>();
 
   export let showResetToDefault = true;
   export let disabled = false;
@@ -12,7 +16,7 @@
   <div class="left">
     {#if showResetToDefault}
       <button
-        on:click={() => dispatch('reset-to-default')}
+        on:click={() => dispatch('reset', { default: true })}
         class="bg-none text-sm font-medium text-immich-primary hover:text-immich-primary/75 dark:text-immich-dark-primary hover:dark:text-immich-dark-primary/75"
       >
         Reset to default
@@ -21,7 +25,7 @@
   </div>
 
   <div class="right">
-    <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset')}>Reset</Button>
+    <Button {disabled} size="sm" color="gray" on:click={() => dispatch('reset', { default: false })}>Reset</Button>
     <Button {disabled} size="sm" on:click={() => dispatch('save')}>Save</Button>
   </div>
 </div>
diff --git a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
index 34f556c06a1ee..cde3ee3186cd8 100644
--- a/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
@@ -14,6 +14,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import { user } from '$lib/stores/user.store';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let storageConfig: SystemConfigStorageTemplateDto;
   export let disabled = false;
@@ -23,6 +24,14 @@
   let templateOptions: SystemConfigTemplateStorageOptionDto;
   let selectedPreset = '';
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig, templateOptions] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.storageTemplate),
@@ -232,9 +241,8 @@
           </div>
 
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte b/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
index 7d67c3d95310c..36bdab35aca35 100644
--- a/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/theme/theme-settings.svelte
@@ -9,6 +9,7 @@
   import { fade } from 'svelte/transition';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingTextarea from '../setting-textarea.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let themeConfig: SystemConfigThemeDto; // this is the config that is being edited
   export let disabled = false;
@@ -16,6 +17,14 @@
   let savedConfig: SystemConfigThemeDto;
   let defaultConfig: SystemConfigThemeDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.theme),
@@ -84,9 +93,8 @@
             />
 
             <SettingButtonsRow
-              on:reset={reset}
+              on:reset={({ detail }) => handleReset(detail)}
               on:save={saveSetting}
-              on:reset-to-default={resetToDefault}
               showResetToDefault={!isEqual(savedConfig, defaultConfig)}
               {disabled}
             />
diff --git a/web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte b/web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
index 3aaf7594489da..e6dfb57c93554 100644
--- a/web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/thumbnail/thumbnail-settings.svelte
@@ -10,6 +10,7 @@
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let thumbnailConfig: SystemConfigThumbnailDto; // this is the config that is being edited
   export let disabled = false;
@@ -17,6 +18,14 @@
   let savedConfig: SystemConfigThumbnailDto;
   let defaultConfig: SystemConfigThumbnailDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.thumbnail),
@@ -133,9 +142,8 @@
 
         <div class="ml-4">
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
diff --git a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
index da9e0d779a8d9..6f4d9e165b2dd 100644
--- a/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte
@@ -10,6 +10,7 @@
   import SettingButtonsRow from '../setting-buttons-row.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
+  import type { ResetOptions } from '$lib/utils/dipatch';
 
   export let trashConfig: SystemConfigTrashDto; // this is the config that is being edited
   export let disabled = false;
@@ -17,6 +18,14 @@
   let savedConfig: SystemConfigTrashDto;
   let defaultConfig: SystemConfigTrashDto;
 
+  const handleReset = (detail: ResetOptions) => {
+    if (detail.default) {
+      resetToDefault();
+    } else {
+      reset();
+    }
+  };
+
   async function getConfigs() {
     [savedConfig, defaultConfig] = await Promise.all([
       api.systemConfigApi.getConfig().then((res) => res.data.trash),
@@ -90,9 +99,8 @@
           />
 
           <SettingButtonsRow
-            on:reset={reset}
+            on:reset={({ detail }) => handleReset(detail)}
             on:save={saveSetting}
-            on:reset-to-default={resetToDefault}
             showResetToDefault={!isEqual(savedConfig, defaultConfig)}
             {disabled}
           />
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index 0f1e4ffcdd77a..7b49fdb4d1204 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -50,7 +50,12 @@
   let message = '';
   let isSendingMessage = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    deleteComment: void;
+    deleteLike: void;
+    addComment: void;
+    close: void;
+  }>();
 
   $: showDeleteReaction = Array(reactions.length).fill(false);
   $: {
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index abd684e35deeb..25a3bdd341a30 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -725,9 +725,9 @@
         albumId={album?.id}
         albums={appearsInAlbums}
         on:close={() => ($isShowDetail = false)}
-        on:close-viewer={handleCloseViewer}
-        on:description-focus-in={disableKeyDownEvent}
-        on:description-focus-out={enableKeyDownEvent}
+        on:closeViewer={handleCloseViewer}
+        on:descriptionFocusIn={disableKeyDownEvent}
+        on:descriptionFocusOut={enableKeyDownEvent}
       />
     </div>
   {/if}
diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index 89375a0a5bddc..dc9bdeb56e2ef 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -87,7 +87,13 @@
     unsubscribe();
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    descriptionFocusIn: void;
+    descriptionFocusOut: void;
+    click: AlbumResponseDto;
+    closeViewer: void;
+  }>();
 
   const getMegapixel = (width: number, height: number): number | undefined => {
     const megapixel = Math.round((height * width) / 1_000_000);
@@ -114,11 +120,11 @@
   };
 
   const handleFocusIn = () => {
-    dispatch('description-focus-in');
+    dispatch('descriptionFocusIn');
   };
 
   const handleFocusOut = async () => {
-    dispatch('description-focus-out');
+    dispatch('descriptionFocusOut');
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
@@ -241,7 +247,7 @@
                 href="{AppRoute.PEOPLE}/{person.id}?previousRoute={albumId
                   ? `${AppRoute.ALBUMS}/${albumId}`
                   : AppRoute.PHOTOS}"
-                on:click={() => dispatch('close-viewer')}
+                on:click={() => dispatch('closeViewer')}
               >
                 <div class="relative">
                   <ImageThumbnail
diff --git a/web/src/lib/components/asset-viewer/intersection-observer.svelte b/web/src/lib/components/asset-viewer/intersection-observer.svelte
index f75d35d5f6911..f1fbc4aa206e0 100644
--- a/web/src/lib/components/asset-viewer/intersection-observer.svelte
+++ b/web/src/lib/components/asset-viewer/intersection-observer.svelte
@@ -11,7 +11,13 @@
 
   let intersecting = false;
   let container: HTMLDivElement;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    hidden: HTMLDivElement;
+    intersected: {
+      container: HTMLDivElement;
+      position: BucketPosition;
+    };
+  }>();
 
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/web/src/lib/components/forms/edit-album-form.svelte
index 90212f4f80463..179c5af5407c8 100644
--- a/web/src/lib/components/forms/edit-album-form.svelte
+++ b/web/src/lib/components/forms/edit-album-form.svelte
@@ -8,7 +8,10 @@
 
   export let album: AlbumResponseDto;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    editSuccess: void;
+    cancel: void;
+  }>();
 
   const editUser = async () => {
     try {
@@ -21,7 +24,7 @@
       });
 
       if (status === 200) {
-        dispatch('edit-success');
+        dispatch('editSuccess');
       }
     } catch (error) {
       handleError(error, 'Unable to update user');
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index bf2aadb31dc50..e5e7b45be5786 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -18,7 +18,11 @@
 
   let isShowResetPasswordConfirmation = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    resetPasswordSuccess: void;
+    editSuccess: void;
+  }>();
 
   const editUser = async () => {
     try {
@@ -34,7 +38,7 @@
       });
 
       if (status === 200) {
-        dispatch('edit-success');
+        dispatch('editSuccess');
       }
     } catch (error) {
       handleError(error, 'Unable to update user');
@@ -54,7 +58,7 @@
       });
 
       if (status == 200) {
-        dispatch('reset-password-success');
+        dispatch('resetPasswordSuccess');
       }
     } catch (e) {
       console.error('Error reseting user password', e);
diff --git a/web/src/lib/components/forms/login-form.svelte b/web/src/lib/components/forms/login-form.svelte
index 111e6c3fda00b..ef7d9b0b1e80c 100644
--- a/web/src/lib/components/forms/login-form.svelte
+++ b/web/src/lib/components/forms/login-form.svelte
@@ -16,7 +16,10 @@
   let loading = false;
   let oauthLoading = true;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    success: void;
+    firstLogin: void;
+  }>();
 
   onMount(async () => {
     if (!$featureFlags.oauth) {
@@ -62,7 +65,7 @@
       });
 
       if (!data.isAdmin && data.shouldChangePassword) {
-        dispatch('first-login');
+        dispatch('firstLogin');
         return;
       }
 
diff --git a/web/src/lib/components/photos-page/actions/create-shared-link.svelte b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
index 29200800f946c..6e700807af034 100644
--- a/web/src/lib/components/photos-page/actions/create-shared-link.svelte
+++ b/web/src/lib/components/photos-page/actions/create-shared-link.svelte
@@ -6,7 +6,9 @@
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
   let showModal = false;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    escape: void;
+  }>();
   const { getAssets } = getAssetControlContext();
   const escape = () => {
     dispatch('escape');
diff --git a/web/src/lib/components/photos-page/actions/delete-assets.svelte b/web/src/lib/components/photos-page/actions/delete-assets.svelte
index 68d133ae97851..02fbdaeed37f0 100644
--- a/web/src/lib/components/photos-page/actions/delete-assets.svelte
+++ b/web/src/lib/components/photos-page/actions/delete-assets.svelte
@@ -19,7 +19,9 @@
 
   const { clearSelect, getOwnedAssets } = getAssetControlContext();
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    escape: void;
+  }>();
 
   let isShowConfirmation = false;
   let loading = false;
diff --git a/web/src/lib/components/shared-components/album-selection-modal.svelte b/web/src/lib/components/shared-components/album-selection-modal.svelte
index 27460ba2aa783..6def8c4ef7ff1 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -12,7 +12,18 @@
   let loading = true;
   let search = '';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    newAlbum: {
+      albumName: string;
+    };
+    album: {
+      album: AlbumResponseDto;
+    };
+    newSharedAlbum: {
+      albumName: string;
+    };
+    close: void;
+  }>();
 
   export let shared: boolean;
 
diff --git a/web/src/lib/components/shared-components/base-modal.svelte b/web/src/lib/components/shared-components/base-modal.svelte
index 7b466a333b8bd..a1aae869f7104 100644
--- a/web/src/lib/components/shared-components/base-modal.svelte
+++ b/web/src/lib/components/shared-components/base-modal.svelte
@@ -7,7 +7,10 @@
   import { clickOutside } from '$lib/utils/click-outside';
   import { mdiClose } from '@mdi/js';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    escape: void;
+    close: void;
+  }>();
   export let zIndex = 9999;
   export let ignoreClickOutside = false;
 
diff --git a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
index 970ae63175533..cec2686c7ec84 100644
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@@ -29,7 +29,10 @@
   let canCopyImagesToClipboard = true;
   let enablePassword = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    escape: void;
+  }>();
 
   const expiredDateOption: ImmichDropDownOption = {
     default: 'Never',
diff --git a/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
index 067971c0af62c..75e9ad8c5a35b 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/asset-selection-viewer.svelte
@@ -11,7 +11,9 @@
   let viewWidth: number;
   $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
 
-  let dispatch = createEventDispatcher();
+  let dispatch = createEventDispatcher<{
+    select: { asset: AssetResponseDto; selectedAssets: Set<AssetResponseDto> };
+  }>();
 
   const selectAssetHandler = (event: CustomEvent) => {
     const { asset }: { asset: AssetResponseDto } = event.detail;
diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 938fe157eb4ee..0c790c28511f2 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -16,7 +16,10 @@
 
   let isShowSelectAvatar = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    logout: void;
+    close: void;
+  }>();
 
   const handleSaveProfile = async (color: UserAvatarColor) => {
     try {
diff --git a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
index 6d7e395785888..a29d43617951d 100644
--- a/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte
@@ -8,7 +8,10 @@
 
   export let user: UserResponseDto;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    choose: UserAvatarColor;
+  }>();
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 608e8062485c6..c6fa67cf1822f 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -23,7 +23,9 @@
   let shouldShowAccountInfo = false;
   let shouldShowAccountInfoPanel = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    uploadClicked: void;
+  }>();
 
   const logOut = async () => {
     const { data } = await api.authenticationApi.logout();
diff --git a/web/src/lib/components/shared-components/profile-image-cropper.svelte b/web/src/lib/components/shared-components/profile-image-cropper.svelte
index cd0e917d51a70..c8544ef0acdfb 100644
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/web/src/lib/components/shared-components/profile-image-cropper.svelte
@@ -10,7 +10,9 @@
 
   export let asset: AssetResponseDto;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
   let imgElement: HTMLDivElement;
 
   onMount(() => {
diff --git a/web/src/lib/components/shared-components/show-shortcuts.svelte b/web/src/lib/components/shared-components/show-shortcuts.svelte
index e0f1f0974e8ff..2f725f1a45f26 100644
--- a/web/src/lib/components/shared-components/show-shortcuts.svelte
+++ b/web/src/lib/components/shared-components/show-shortcuts.svelte
@@ -19,7 +19,9 @@
       { key: ['Del'], action: 'Delete Asset' },
     ],
   };
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+  }>();
 </script>
 
 <FullScreenModal on:clickOutside={() => dispatch('close')} on:escape={() => dispatch('close')}>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
index a23eeed0329fd..fbefb2eb5cff1 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
@@ -11,7 +11,9 @@
 
   let showMoreInformation = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    selected: void;
+  }>();
   const onButtonClicked = () => dispatch('selected');
 </script>
 
diff --git a/web/src/lib/components/user-settings-page/device-card.svelte b/web/src/lib/components/user-settings-page/device-card.svelte
index 3cbcd841ba671..9558efe3888c8 100644
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/web/src/lib/components/user-settings-page/device-card.svelte
@@ -17,7 +17,9 @@
 
   export let device: AuthDeviceResponseDto;
 
-  const dispatcher = createEventDispatcher();
+  const dispatcher = createEventDispatcher<{
+    delete: void;
+  }>();
 
   const options: ToRelativeCalendarOptions = {
     unit: 'days',
diff --git a/web/src/lib/utils/dipatch.ts b/web/src/lib/utils/dipatch.ts
new file mode 100644
index 0000000000000..6e3457eaa995a
--- /dev/null
+++ b/web/src/lib/utils/dipatch.ts
@@ -0,0 +1,3 @@
+export interface ResetOptions {
+  default?: boolean;
+}
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 2979b7a6fb4b5..abf64036bf4fd 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -239,7 +239,7 @@
   <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
     <EditAlbumForm
       album={selectedAlbum}
-      on:edit-success={() => successModifyAlbum()}
+      on:editSuccess={() => successModifyAlbum()}
       on:cancel={() => (shouldShowEditUserForm = false)}
     />
   </FullScreenModal>
diff --git a/web/src/routes/admin/user-management/+page.svelte b/web/src/routes/admin/user-management/+page.svelte
index c5e657aabcc46..ed631c25ffd91 100644
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@@ -119,7 +119,7 @@
           <EditUserForm
             user={selectedUser}
             canResetPassword={selectedUser?.id !== $user.id}
-            on:edit-success={onEditUserSuccess}
+            on:editSuccess={onEditUserSuccess}
             on:reset-password-success={onEditPasswordSuccess}
             on:close={() => (shouldShowEditUserForm = false)}
           />