diff --git a/web/.eslintrc.cjs b/web/.eslintrc.cjs
index e29c4a9b48..de0a64bd37 100644
--- a/web/.eslintrc.cjs
+++ b/web/.eslintrc.cjs
@@ -51,6 +51,7 @@ module.exports = {
     'unicorn/consistent-function-scoping': 'off',
     'unicorn/prefer-top-level-await': 'off',
     'unicorn/import-style': 'off',
+    'svelte/button-has-type': 'error',
     // TODO: set recommended-type-checked and remove these rules
     '@typescript-eslint/await-thenable': 'error',
     '@typescript-eslint/no-floating-promises': 'error',
diff --git a/web/src/lib/components/admin-page/jobs/job-tile-button.svelte b/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
index 709ed60924..0aa90ed4d8 100644
--- a/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile-button.svelte
@@ -17,6 +17,7 @@
 </script>
 
 <button
+  type="button"
   {disabled}
   class="flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 {colorClasses[
     color
diff --git a/web/src/lib/components/album-page/album-card-group.svelte b/web/src/lib/components/album-page/album-card-group.svelte
index 99347b3a02..d70965c9f6 100644
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/web/src/lib/components/album-page/album-card-group.svelte
@@ -30,6 +30,7 @@
 {#if group}
   <div class="grid">
     <button
+      type="button"
       on:click={() => toggleAlbumGroupCollapsing(group.id)}
       class="w-fit mt-2 pt-2 pr-2 mb-2 dark:text-immich-dark-fg"
       aria-expanded={!isCollapsed}
diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 0b91dbb027..ead7f6e5e9 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -75,7 +75,7 @@
     <div class="py-2">
       <div class="text-gray text-sm mb-3">PEOPLE</div>
       <div class="p-2">
-        <button class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
+        <button type="button" class="flex items-center gap-2" on:click={() => dispatch('showSelectSharedUser')}>
           <div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
             <div><Icon path={mdiPlus} size="25" /></div>
           </div>
diff --git a/web/src/lib/components/album-page/albums-table-header.svelte b/web/src/lib/components/album-page/albums-table-header.svelte
index d01d34ec72..527b1822e0 100644
--- a/web/src/lib/components/album-page/albums-table-header.svelte
+++ b/web/src/lib/components/album-page/albums-table-header.svelte
@@ -16,6 +16,7 @@
 
 <th class="text-sm font-medium {option.columnStyle}">
   <button
+    type="button"
     class="rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
     on:click={handleSort}
   >
diff --git a/web/src/lib/components/album-page/albums-table.svelte b/web/src/lib/components/album-page/albums-table.svelte
index 1af4d7629d..0c33584eb1 100644
--- a/web/src/lib/components/album-page/albums-table.svelte
+++ b/web/src/lib/components/album-page/albums-table.svelte
@@ -41,6 +41,7 @@
       {@const isCollapsed = isAlbumGroupCollapsed($albumViewSettings, albumGroup.id)}
       {@const iconRotation = isCollapsed ? 'rotate-0' : 'rotate-90'}
       <button
+        type="button"
         on:click={() => toggleAlbumGroupCollapsing(albumGroup.id)}
         class="flex w-full mt-4 rounded-md"
         aria-expanded={!isCollapsed}
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
index b8cee9c341..790d4c1bc5 100644
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -141,6 +141,7 @@
               </div>
             {:else if user.id == currentUser?.id}
               <button
+                type="button"
                 on:click={() => (selectedRemoveUser = user)}
                 class="text-sm font-medium text-immich-primary transition-colors hover:text-immich-primary/75 dark:text-immich-dark-primary"
                 >Leave</button
diff --git a/web/src/lib/components/album-page/user-selection-modal.svelte b/web/src/lib/components/album-page/user-selection-modal.svelte
index f436c01c0e..291f5c112e 100644
--- a/web/src/lib/components/album-page/user-selection-modal.svelte
+++ b/web/src/lib/components/album-page/user-selection-modal.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -122,7 +121,11 @@
         {#each users as user}
           {#if !Object.keys(selectedUsers).includes(user.id)}
             <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
-              <button on:click={() => handleToggle(user)} class="flex w-full place-items-center gap-4 p-4">
+              <button
+                type="button"
+                on:click={() => handleToggle(user)}
+                class="flex w-full place-items-center gap-4 p-4"
+              >
                 <UserAvatar {user} size="md" />
                 <div class="text-left flex-grow">
                   <p class="text-immich-fg dark:text-immich-dark-fg">
@@ -160,6 +163,7 @@
 
   <div id="shared-buttons" class="mt-4 flex place-content-center place-items-center justify-around">
     <button
+      type="button"
       class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
       on:click={() => dispatch('share')}
     >
@@ -168,13 +172,13 @@
     </button>
 
     {#if sharedLinks.length}
-      <button
+      <a
+        href={AppRoute.SHARED_LINKS}
         class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
-        on:click={() => goto(AppRoute.SHARED_LINKS)}
       >
         <Icon path={mdiShareCircle} size={24} />
         <p class="text-sm">View links</p>
-      </button>
+      </a>
     {/if}
   </div>
 </FullScreenModal>
diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte
index 9a561eb6c3..099ba40a0f 100644
--- a/web/src/lib/components/asset-viewer/activity-status.svelte
+++ b/web/src/lib/components/asset-viewer/activity-status.svelte
@@ -18,12 +18,12 @@
 <div
   class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
 >
-  <button class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
+  <button type="button" class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
     <div class="items-center justify-center">
       <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
     </div>
   </button>
-  <button on:click={() => dispatch('openActivityTab')}>
+  <button type="button" on:click={() => dispatch('openActivityTab')}>
     <div class="flex gap-2 items-center justify-center">
       <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
       {#if numberOfComments}
diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
index 670311dd16..7cf0989797 100644
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -200,6 +200,7 @@
               <div>
                 {#if showDeleteReaction[index]}
                   <button
+                    type="button"
                     class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
                     use:clickOutside
                     on:outclick={() => (showDeleteReaction[index] = false)}
@@ -252,6 +253,7 @@
                 <div>
                   {#if showDeleteReaction[index]}
                     <button
+                      type="button"
                       class="absolute right-6 rounded-xl items-center bg-gray-300 dark:bg-slate-100 py-3 px-6 text-left text-sm font-medium text-immich-fg hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg dark:hover:bg-red-100 transition-colors"
                       use:clickOutside
                       on:outclick={() => (showDeleteReaction[index] = false)}
diff --git a/web/src/lib/components/asset-viewer/album-list-item.svelte b/web/src/lib/components/asset-viewer/album-list-item.svelte
index 0cde7c8465..405d306be6 100644
--- a/web/src/lib/components/asset-viewer/album-list-item.svelte
+++ b/web/src/lib/components/asset-viewer/album-list-item.svelte
@@ -28,6 +28,7 @@
 </script>
 
 <button
+  type="button"
   on:click={() => dispatch('album')}
   class="flex w-full gap-4 px-6 py-2 text-left transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
 >
diff --git a/web/src/lib/components/asset-viewer/navigation-area.svelte b/web/src/lib/components/asset-viewer/navigation-area.svelte
index 801d203643..e69d93b6b6 100644
--- a/web/src/lib/components/asset-viewer/navigation-area.svelte
+++ b/web/src/lib/components/asset-viewer/navigation-area.svelte
@@ -3,13 +3,11 @@
   export let label: string;
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="my-auto group hover:cursor-pointer" on:click={onClick}>
-  <button
-    class="mx-4 rounded-full p-3 text-gray-500 transition group-hover:bg-gray-500 group-hover:text-white"
-    aria-label={label}
-  >
-    <slot />
-  </button>
-</div>
+<button
+  type="button"
+  class="my-auto mx-4 rounded-full p-3 text-gray-500 transition hover:bg-gray-500 hover:text-white"
+  aria-label={label}
+  on:click={onClick}
+>
+  <slot />
+</button>
diff --git a/web/src/lib/components/assets/thumbnail/thumbnail.svelte b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
index 1ee4463756..308137eae7 100644
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@@ -106,6 +106,7 @@
         <!-- Select asset button  -->
         {#if !readonly && (mouseOver || selected || selectionCandidate)}
           <button
+            type="button"
             on:click={onIconClickedHandler}
             class="absolute p-2 focus:outline-none"
             class:cursor-not-allowed={disabled}
diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 423049930f..19c727ee6a 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -93,6 +93,7 @@
         {@const renderedOption = renderOption(option)}
         {@const buttonStyle = renderedOption.disabled ? '' : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}
         <button
+          type="button"
           class="grid grid-cols-[36px,1fr] place-items-center p-2 disabled:opacity-40 {buttonStyle}"
           disabled={renderedOption.disabled}
           on:click={() => !renderedOption.disabled && handleSelectOption(option)}
diff --git a/web/src/lib/components/elements/group-tab.svelte b/web/src/lib/components/elements/group-tab.svelte
index 8ed38c8c6f..c2bc835295 100644
--- a/web/src/lib/components/elements/group-tab.svelte
+++ b/web/src/lib/components/elements/group-tab.svelte
@@ -7,6 +7,7 @@
 <div class="flex bg-gray-200 dark:bg-immich-dark-gray rounded-2xl h-full">
   {#each filters as filter, index}
     <button
+      type="button"
       class="text-sm px-4 {filter === selected
         ? 'dark:bg-gray-700 bg-gray-300'
         : 'dark:hover:bg-gray-800 hover:bg-gray-300'}  {index === 0 ? 'rounded-l-2xl' : ''} {index ===
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
index b47810028e..8a818a9233 100644
--- a/web/src/lib/components/faces-page/assign-face-side-panel.svelte
+++ b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -162,7 +162,7 @@
       {#each showPeople as person (person.id)}
         {#if person.id !== editedPerson.id}
           <div class="w-fit">
-            <button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
+            <button type="button" class="w-[90px]" on:click={() => dispatch('reassign', person)}>
               <div class="relative">
                 <ImageThumbnail
                   curve
diff --git a/web/src/lib/components/faces-page/face-thumbnail.svelte b/web/src/lib/components/faces-page/face-thumbnail.svelte
index e1c6ab154e..bb17ca5795 100644
--- a/web/src/lib/components/faces-page/face-thumbnail.svelte
+++ b/web/src/lib/components/faces-page/face-thumbnail.svelte
@@ -21,6 +21,7 @@
 </script>
 
 <button
+  type="button"
   class="relative rounded-lg transition-all"
   on:click={handleOnClicked}
   disabled={!selectable}
diff --git a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
index 65f5b04e1f..e29e49711a 100644
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@@ -51,6 +51,7 @@
       </div>
 
       <button
+        type="button"
         disabled={potentialMergePeople.length === 0}
         class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
         on:click={() => {
@@ -71,13 +72,13 @@
     {:else}
       <div class="grid w-full grid-cols-1 gap-2">
         <div class="px-2">
-          <button on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
+          <button type="button" on:click={() => (choosePersonToMerge = false)}> <Icon path={mdiArrowLeft} /></button>
         </div>
         <div class="flex items-center justify-center">
           <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
             {#each potentialMergePeople as person (person.id)}
               <div class="h-24 w-24 md:h-28 md:w-28">
-                <button class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
+                <button type="button" class="p-2 w-full" on:click={() => changePersonToMerge(person)}>
                   <ImageThumbnail
                     border={true}
                     circle
diff --git a/web/src/lib/components/faces-page/person-side-panel.svelte b/web/src/lib/components/faces-page/person-side-panel.svelte
index 9e2148d93c..d77a34803f 100644
--- a/web/src/lib/components/faces-page/person-side-panel.svelte
+++ b/web/src/lib/components/faces-page/person-side-panel.svelte
@@ -189,6 +189,7 @@
     </div>
     {#if !isShowLoadingDone}
       <button
+        type="button"
         class="justify-self-end rounded-lg p-2 hover:bg-immich-dark-primary hover:dark:bg-immich-dark-primary/50"
         on:click={() => handleEditFaces()}
       >
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index 0b35ccc93c..d863b6c273 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -182,10 +182,9 @@
           />
 
           {#each currentMemory.assets as _, index}
-            <button
+            <a
               class="relative w-full py-2"
-              on:click={() =>
-                goto(`?${QueryParameter.MEMORY_INDEX}=${memoryIndex}&${QueryParameter.ASSET_INDEX}=${index}`)}
+              href="?{QueryParameter.MEMORY_INDEX}={memoryIndex}&{QueryParameter.ASSET_INDEX}={index}"
             >
               <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
               {#await resetPromise}
@@ -196,7 +195,7 @@
                   style:width={`${index < assetIndex ? 100 : index > assetIndex ? 0 : $progress * 100}%`}
                 />
               {/await}
-            </button>
+            </a>
           {/each}
 
           <div>
@@ -214,7 +213,11 @@
         class:opacity-0={!galleryInView}
         class:opacity-100={galleryInView}
       >
-        <button on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })} disabled={!galleryInView}>
+        <button
+          type="button"
+          on:click={() => memoryWrapper.scrollIntoView({ behavior: 'smooth' })}
+          disabled={!galleryInView}
+        >
           <CircleIconButton title="Hide gallery" icon={mdiChevronUp} color="light" />
         </button>
       </div>
@@ -231,7 +234,12 @@
           class:opacity-0={!previousMemory}
           class:hover:opacity-70={previousMemory}
         >
-          <button class="relative h-full w-full rounded-2xl" disabled={!previousMemory} on:click={toPreviousMemory}>
+          <button
+            type="button"
+            class="relative h-full w-full rounded-2xl"
+            disabled={!previousMemory}
+            on:click={toPreviousMemory}
+          >
             {#if previousMemory}
               <img
                 class="h-full w-full rounded-2xl object-cover"
@@ -304,7 +312,12 @@
           class:opacity-0={!nextMemory}
           class:hover:opacity-70={nextMemory}
         >
-          <button class="relative h-full w-full rounded-2xl" on:click={toNextMemory} disabled={!nextMemory}>
+          <button
+            type="button"
+            class="relative h-full w-full rounded-2xl"
+            on:click={toNextMemory}
+            disabled={!nextMemory}
+          >
             {#if nextMemory}
               <img
                 class="h-full w-full rounded-2xl object-cover"
diff --git a/web/src/lib/components/onboarding-page/onboarding-theme.svelte b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
index 9a801a7be7..82cc75bb89 100644
--- a/web/src/lib/components/onboarding-page/onboarding-theme.svelte
+++ b/web/src/lib/components/onboarding-page/onboarding-theme.svelte
@@ -23,6 +23,7 @@
 
   <div class="flex gap-4 mb-6">
     <button
+      type="button"
       class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
       on:click={() => ($colorTheme.value = Theme.LIGHT)}
     >
@@ -34,6 +35,7 @@
       </div>
     </button>
     <button
+      type="button"
       class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
       on:click={() => ($colorTheme.value = Theme.DARK)}
     >
diff --git a/web/src/lib/components/photos-page/memory-lane.svelte b/web/src/lib/components/photos-page/memory-lane.svelte
index 0d89a6747d..d1bbe19b96 100644
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { goto } from '$app/navigation';
   import Icon from '$lib/components/elements/icon.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { memoryStore } from '$lib/stores/memory.store';
@@ -46,6 +45,7 @@
         {#if canScrollLeft}
           <div class="absolute left-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
             <button
+              type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
               on:click={scrollLeft}
             >
@@ -56,6 +56,7 @@
         {#if canScrollRight}
           <div class="absolute right-4 top-[6rem] z-20" transition:fade={{ duration: 200 }}>
             <button
+              type="button"
               class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
               on:click={scrollRight}
             >
@@ -68,9 +69,9 @@
     <div class="inline-block" bind:offsetWidth={innerWidth}>
       {#each $memoryStore as memory, index (memory.yearsAgo)}
         {#if memory.assets.length > 0}
-          <button
+          <a
             class="memory-card relative mr-8 inline-block aspect-video h-[215px] rounded-xl"
-            on:click={() => goto(`${AppRoute.MEMORY}?${QueryParameter.MEMORY_INDEX}=${index}`)}
+            href="{AppRoute.MEMORY}?{QueryParameter.MEMORY_INDEX}={index}"
           >
             <img
               class="h-full w-full rounded-xl object-cover"
@@ -84,7 +85,7 @@
             <div
               class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
             />
-          </button>
+          </a>
         {/if}
       {/each}
     </div>
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 d1d9713949..97b4959835 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -77,6 +77,7 @@
       />
       <div class="immich-scrollbar overflow-y-auto">
         <button
+          type="button"
           on:click={handleNew}
           class="flex w-full items-center gap-4 px-6 py-2 transition-colors hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
         >
diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 20b2f02841..b5961741b9 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -117,7 +117,7 @@
       use:clickOutside={{ onOutclick: () => (hideSuggestion = true) }}
       use:listNavigation={suggestionContainer}
     >
-      <button class="w-full" on:click={() => (hideSuggestion = false)}>
+      <button type="button" class="w-full" on:click={() => (hideSuggestion = false)}>
         <SearchBar
           placeholder="Search places"
           bind:name={searchWord}
@@ -133,6 +133,7 @@
         {#if !hideSuggestion}
           {#each suggestedPlaces as place, index}
             <button
+              type="button"
               class=" flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
               suggestedPlaces.length - 1
                 ? 'rounded-b-lg border-b'
diff --git a/web/src/lib/components/shared-components/context-menu/menu-option.svelte b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
index 28c29c74ad..00795d7808 100644
--- a/web/src/lib/components/shared-components/context-menu/menu-option.svelte
+++ b/web/src/lib/components/shared-components/context-menu/menu-option.svelte
@@ -7,6 +7,7 @@
 </script>
 
 <button
+  type="button"
   on:click
   class="w-full bg-slate-100 p-4 text-left text-sm font-medium text-immich-fg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-inset dark:text-immich-dark-bg"
   role="menuitem"
diff --git a/web/src/lib/components/shared-components/dropdown-button.svelte b/web/src/lib/components/shared-components/dropdown-button.svelte
index a59782f6c8..978fcb862c 100644
--- a/web/src/lib/components/shared-components/dropdown-button.svelte
+++ b/web/src/lib/components/shared-components/dropdown-button.svelte
@@ -22,6 +22,7 @@
 
 <div id="immich-dropdown" class="relative">
   <button
+    type="button"
     {disabled}
     on:click={toggle}
     aria-expanded={isOpen}
@@ -52,6 +53,7 @@
     <div class="absolute mt-2 flex w-full flex-col">
       {#each options.options as option}
         <button
+          type="button"
           on:click={() => {
             selected = option;
             isOpen = false;
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 3eab813d3a..8c73ed4d84 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
@@ -92,6 +92,7 @@
 
     <div class="mb-4 flex flex-col">
       <button
+        type="button"
         class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
         on:click={() => dispatch('logout')}
       >
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 0a6c47a338..fda9ec6d50 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
@@ -17,7 +17,7 @@
   <div class="flex items-center justify-center mt-4">
     <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
       {#each colors as color}
-        <button on:click={() => dispatch('choose', color)}>
+        <button type="button" on:click={() => dispatch('choose', color)}>
           <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
         </button>
       {/each}
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 0c8cafc01e..fc4cc58281 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
@@ -119,6 +119,7 @@
           on:escape={() => (shouldShowAccountInfoPanel = false)}
         >
           <button
+            type="button"
             class="flex"
             on:mouseover={() => (shouldShowAccountInfo = true)}
             on:focus={() => (shouldShowAccountInfo = true)}
diff --git a/web/src/lib/components/shared-components/notification/notification-card.svelte b/web/src/lib/components/shared-components/notification/notification-card.svelte
index d98d2f6066..27bd1fdd2c 100644
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@@ -101,6 +101,7 @@
   {#if notification.button}
     <p class="pl-[28px] mt-2.5 text-sm">
       <button
+        type="button"
         class="{buttonStyle[notification.type]} rounded px-3 pt-1.5 pb-1 transition-all duration-200"
         on:click={handleButtonClick}
       >
diff --git a/web/src/lib/components/shared-components/settings/setting-accordion.svelte b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
index be450b3b5b..8d883019cb 100755
--- a/web/src/lib/components/shared-components/settings/setting-accordion.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-accordion.svelte
@@ -27,7 +27,12 @@
 </script>
 
 <div class="border-b-[1px] border-gray-200 py-4 dark:border-gray-700">
-  <button on:click={() => (isOpen = !isOpen)} class="flex w-full place-items-center justify-between text-left">
+  <button
+    type="button"
+    aria-expanded={isOpen}
+    on:click={() => (isOpen = !isOpen)}
+    class="flex w-full place-items-center justify-between text-left"
+  >
     <div>
       <h2 class="font-medium text-immich-primary dark:text-immich-dark-primary">
         {title}
@@ -38,8 +43,7 @@
       </slot>
     </div>
 
-    <button
-      aria-expanded={isOpen}
+    <div
       class="immich-circle-icon-button flex place-content-center place-items-center rounded-full p-3 transition-all hover:bg-immich-primary/10 dark:text-immich-dark-fg hover:dark:bg-immich-dark-primary/20"
     >
       <svg
@@ -55,7 +59,7 @@
       >
         <path d="M19 9l-7 7-7-7" />
       </svg>
-    </button>
+    </div>
   </button>
 
   {#if isOpen}
diff --git a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
index a367832cc1..8199db17b2 100644
--- a/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
@@ -16,6 +16,7 @@
   <div class="left">
     {#if showResetToDefault}
       <button
+        type="button"
         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"
       >
diff --git a/web/src/lib/components/shared-components/upload-asset-preview.svelte b/web/src/lib/components/shared-components/upload-asset-preview.svelte
index a517d66abc..025d4f03a6 100644
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@@ -84,10 +84,11 @@
     </div>
     {#if uploadAsset.state === UploadState.ERROR}
       <div class="flex h-full flex-col place-content-evenly place-items-center justify-items-center pr-2">
-        <button on:click={() => handleRetry(uploadAsset)} title="Retry upload" class="flex text-sm">
+        <button type="button" on:click={() => handleRetry(uploadAsset)} title="Retry upload" class="flex text-sm">
           <span class="text-immich-dark-gray dark:text-immich-dark-fg"><Icon path={mdiRefresh} size="20" /></span>
         </button>
         <button
+          type="button"
           on:click={() => uploadAssetsStore.removeUploadAsset(uploadAsset.id)}
           title="Dismiss error"
           class="flex text-sm"
diff --git a/web/src/lib/components/shared-components/upload-panel.svelte b/web/src/lib/components/shared-components/upload-panel.svelte
index 7793fd5a1c..3ae5667711 100644
--- a/web/src/lib/components/shared-components/upload-panel.svelte
+++ b/web/src/lib/components/shared-components/upload-panel.svelte
@@ -128,6 +128,7 @@
     {:else}
       <div class="rounded-full">
         <button
+          type="button"
           in:scale={{ duration: 250, easing: quartInOut }}
           on:click={() => (showDetail = true)}
           class="absolute -left-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-primary p-5 text-xs text-gray-200"
@@ -136,6 +137,7 @@
         </button>
         {#if $hasError}
           <button
+            type="button"
             in:scale={{ duration: 250, easing: quartInOut }}
             on:click={() => (showDetail = true)}
             class="absolute -right-4 -top-4 flex h-10 w-10 place-content-center place-items-center rounded-full bg-immich-error p-5 text-xs text-gray-200"
@@ -144,6 +146,7 @@
           </button>
         {/if}
         <button
+          type="button"
           in:scale={{ duration: 250, easing: quartInOut }}
           on:click={() => (showDetail = true)}
           class="flex h-16 w-16 place-content-center place-items-center rounded-full bg-gray-200 p-5 text-sm text-immich-primary shadow-lg dark:bg-gray-600 dark:text-immich-gray"
diff --git a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
index 499c8523cc..f6b01091a3 100644
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@@ -37,6 +37,7 @@
     {#if availableUsers.length > 0}
       {#each availableUsers as user}
         <button
+          type="button"
           on:click={() => selectUser(user)}
           class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
         >
diff --git a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
index ffc6e59e69..af31f34b15 100644
--- a/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
+++ b/web/src/lib/components/utilities-page/duplicates/duplicates-compare-control.svelte
@@ -53,7 +53,7 @@
       {@const assetData = JSON.stringify(asset, null, 2)}
 
       <div class="relative">
-        <button on:click={() => onSelectAsset(asset)} class="block relative">
+        <button type="button" on:click={() => onSelectAsset(asset)} class="block relative">
           <!-- THUMBNAIL-->
           <img
             src={getAssetThumbnailUrl(asset.id, ThumbnailFormat.Webp)}
diff --git a/web/src/lib/components/utilities-page/utilities-menu.svelte b/web/src/lib/components/utilities-page/utilities-menu.svelte
index 81759fd830..e6e6346321 100644
--- a/web/src/lib/components/utilities-page/utilities-menu.svelte
+++ b/web/src/lib/components/utilities-page/utilities-menu.svelte
@@ -4,15 +4,13 @@
   import { AppRoute } from '$lib/constants';
 </script>
 
-<a href={AppRoute.DUPLICATES}>
-  <div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
-    <p class="text-xs font-medium p-4">ORGANIZE YOUR LIBRARY</p>
+<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
+  <p class="text-xs font-medium p-4">ORGANIZE YOUR LIBRARY</p>
 
-    <button class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex gap-4 p-4">
-      <span
-        ><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
-      </span>
-      Review duplicates
-    </button>
-  </div>
-</a>
+  <a href={AppRoute.DUPLICATES} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex gap-4 p-4">
+    <span
+      ><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
+    </span>
+    Review duplicates
+  </a>
+</div>
diff --git a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 32fb7c01ee..cb6bac42b2 100644
--- a/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -510,6 +510,7 @@
 
           <svelte:fragment slot="trailing">
             <button
+              type="button"
               on:click={handleSelectFromComputer}
               class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
             >
@@ -577,13 +578,13 @@
                     {/if}
 
                     <!-- owner -->
-                    <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                    <button type="button" on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
                       <UserAvatar user={album.owner} size="md" />
                     </button>
 
                     <!-- users with write access (collaborators) -->
                     {#each album.albumUsers.filter(({ role }) => role === AlbumUserRole.Editor) as { user } (user.id)}
-                      <button on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
+                      <button type="button" on:click={() => (viewMode = ViewMode.VIEW_USERS)}>
                         <UserAvatar {user} size="md" />
                       </button>
                     {/each}
@@ -620,6 +621,7 @@
                 <div class="w-[300px]">
                   <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
                   <button
+                    type="button"
                     on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
                     class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
                   >
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index e1fdb9cacc..64ae4658a3 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -502,6 +502,7 @@
     <div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
       {#each people as person, index (person.id)}
         <button
+          type="button"
           class="relative"
           on:click={() => (person.isHidden = !person.isHidden)}
           on:mouseenter={() => (eyeColorMap[person.id] = 'black')}
diff --git a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
index cfcc3eeeb7..0fdea06137 100644
--- a/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -464,6 +464,7 @@
             {:else}
               <div class="relative">
                 <button
+                  type="button"
                   class="flex items-center justify-center"
                   title="Edit name"
                   on:click={() => (isEditingName = true)}
@@ -507,6 +508,7 @@
                 <div bind:this={suggestionContainer}>
                   {#each suggestedPeople as person, index (person.id)}
                     <button
+                      type="button"
                       class="flex w-full border-t border-gray-400 dark:border-immich-dark-gray h-14 place-items-center bg-gray-200 p-2 dark:bg-gray-700 hover:bg-gray-300 hover:dark:bg-[#232932] focus:bg-gray-300 focus:dark:bg-[#232932] {index ===
                       suggestedPeople.length - 1
                         ? 'rounded-b-lg border-b'
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index a97da5620f..4ec3fd1d7d 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -68,10 +68,10 @@
               rel="noopener noreferrer"
               class="flex grow basis-0 justify-center p-4"
             >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                 <Icon path={mdiMessage} size={24} />
                 <p class="text-sm">Get Help</p>
-              </button>
+              </div>
             </a>
 
             <a
@@ -80,10 +80,10 @@
               rel="noopener noreferrer"
               class="flex grow basis-0 justify-center p-4"
             >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                 <Icon path={mdiPartyPopper} size={24} />
                 <p class="text-sm">Read Changelog</p>
-              </button>
+              </div>
             </a>
 
             <a
@@ -92,10 +92,10 @@
               rel="noopener noreferrer"
               class="flex grow basis-0 justify-center p-4"
             >
-              <button class="flex flex-col place-content-center place-items-center gap-2">
+              <div class="flex flex-col place-content-center place-items-center gap-2">
                 <Icon path={mdiCodeTags} size={24} />
                 <p class="text-sm">Check Logs</p>
-              </button>
+              </div>
             </a>
           </div>
         </div>