diff --git a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
index 3a5105629..e4deffeef 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@@ -182,7 +182,12 @@
       {#if !asset.isReadOnly || !asset.isExternal}
         <CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
       {/if}
-      <div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
+      <div
+        use:clickOutside={{
+          onOutclick: () => (isShowAssetOptions = false),
+          onEscape: () => (isShowAssetOptions = false),
+        }}
+      >
         <CircleIconButton isOpacity={true} icon={mdiDotsVertical} on:click={showOptionsMenu} title="More" />
         {#if isShowAssetOptions}
           <ContextMenu {...contextMenuPosition} direction="left">
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index be5d13e5f..c49faeaba 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -50,6 +50,7 @@
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-viewer.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
@@ -514,239 +515,255 @@
 
 <svelte:document bind:fullscreenElement />
 
-<section
-  id="immich-asset-viewer"
-  class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
->
-  <!-- Top navigation bar -->
-  {#if $slideshowState === SlideshowState.None}
-    <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
-      <AssetViewerNavBar
-        {asset}
-        isMotionPhotoPlaying={shouldPlayMotionPhoto}
-        showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
-        showZoomButton={asset.type === AssetTypeEnum.Image}
-        showMotionPlayButton={!!asset.livePhotoVideoId}
-        showDownloadButton={shouldShowDownloadButton}
-        showDetailButton={shouldShowDetailButton}
-        showSlideshow={!!assetStore}
-        hasStackChildren={$stackAssetsStore.length > 0}
-        showShareButton={shouldShowShareModal}
-        on:back={closeViewer}
-        on:showDetail={showDetailInfoHandler}
-        on:download={() => downloadFile(asset)}
-        on:delete={() => trashOrDelete()}
-        on:favorite={toggleFavorite}
-        on:addToAlbum={() => openAlbumPicker(false)}
-        on:addToSharedAlbum={() => openAlbumPicker(true)}
-        on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
-        on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
-        on:toggleArchive={toggleArchive}
-        on:asProfileImage={() => (isShowProfileImageCrop = true)}
-        on:runJob={({ detail: job }) => handleRunJob(job)}
-        on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
-        on:unstack={handleUnstack}
-        on:showShareModal={() => (isShowShareModal = true)}
-      />
-    </div>
-  {/if}
-
-  {#if $slideshowState === SlideshowState.None && showNavigation}
-    <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
-      <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
-        <Icon path={mdiChevronLeft} size="36" ariaHidden />
-      </NavigationArea>
-    </div>
-  {/if}
-
-  <!-- Asset Viewer -->
-  <div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
-    {#if $slideshowState != SlideshowState.None}
-      <div class="z-[1000] absolute w-full flex">
-        <SlideshowBar
-          {isFullScreen}
-          onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
-          onPrevious={() => navigateAsset('previous')}
-          onNext={() => navigateAsset('next')}
-          onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
+<FocusTrap>
+  <section
+    id="immich-asset-viewer"
+    class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
+  >
+    <!-- Top navigation bar -->
+    {#if $slideshowState === SlideshowState.None}
+      <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
+        <AssetViewerNavBar
+          {asset}
+          isMotionPhotoPlaying={shouldPlayMotionPhoto}
+          showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
+          showZoomButton={asset.type === AssetTypeEnum.Image}
+          showMotionPlayButton={!!asset.livePhotoVideoId}
+          showDownloadButton={shouldShowDownloadButton}
+          showDetailButton={shouldShowDetailButton}
+          showSlideshow={!!assetStore}
+          hasStackChildren={$stackAssetsStore.length > 0}
+          showShareButton={shouldShowShareModal}
+          on:back={closeViewer}
+          on:showDetail={showDetailInfoHandler}
+          on:download={() => downloadFile(asset)}
+          on:delete={() => trashOrDelete()}
+          on:favorite={toggleFavorite}
+          on:addToAlbum={() => openAlbumPicker(false)}
+          on:addToSharedAlbum={() => openAlbumPicker(true)}
+          on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
+          on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
+          on:toggleArchive={toggleArchive}
+          on:asProfileImage={() => (isShowProfileImageCrop = true)}
+          on:runJob={({ detail: job }) => handleRunJob(job)}
+          on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
+          on:unstack={handleUnstack}
+          on:showShareModal={() => (isShowShareModal = true)}
         />
       </div>
     {/if}
 
-    {#if previewStackedAsset}
-      {#key previewStackedAsset.id}
-        {#if previewStackedAsset.type === AssetTypeEnum.Image}
-          <PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} />
-        {:else}
-          <VideoViewer
-            assetId={previewStackedAsset.id}
-            on:close={closeViewer}
-            on:onVideoEnded={handleVideoEnded}
-            on:onVideoStarted={handleVideoStarted}
-          />
-        {/if}
-      {/key}
-    {:else}
-      {#key asset.id}
-        {#if !asset.resized}
-          <div class="flex h-full w-full justify-center">
-            <div
-              class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
-            >
-              <Icon path={mdiImageBrokenVariant} size="25%" />
-            </div>
-          </div>
-        {:else if asset.type === AssetTypeEnum.Image}
-          {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
-            <VideoViewer
-              assetId={asset.livePhotoVideoId}
-              on:close={closeViewer}
-              on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
-            />
-          {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
-                .toLowerCase()
-                .endsWith('.insp'))}
-            <PanoramaViewer {asset} />
-          {:else}
-            <PhotoViewer {asset} {preloadAssets} on:close={closeViewer} />
-          {/if}
-        {:else}
-          <VideoViewer
-            assetId={asset.id}
-            on:close={closeViewer}
-            on:onVideoEnded={handleVideoEnded}
-            on:onVideoStarted={handleVideoStarted}
-          />
-        {/if}
-        {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
-          <div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
-            <ActivityStatus
-              disabled={!album?.isActivityEnabled}
-              {isLiked}
-              {numberOfComments}
-              {isShowActivity}
-              on:favorite={handleFavorite}
-              on:openActivityTab={handleOpenActivity}
-            />
-          </div>
-        {/if}
-      {/key}
-    {/if}
-
-    {#if $stackAssetsStore.length > 0 && withStacked}
-      <div
-        id="stack-slideshow"
-        class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
-      >
-        <div class="relative w-full whitespace-nowrap transition-all">
-          {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
-            <div
-              class="{stackedAsset.id == asset.id
-                ? '-translate-y-[1px]'
-                : '-translate-y-0'} inline-block px-1 transition-transform"
-            >
-              <Thumbnail
-                class="{stackedAsset.id == asset.id
-                  ? 'bg-transparent border-2 border-white'
-                  : 'bg-gray-700/40'} inline-block hover:bg-transparent"
-                asset={stackedAsset}
-                onClick={() => {
-                  asset = stackedAsset;
-                  preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
-                }}
-                on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
-                readonly
-                thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
-                showStackedIcon={false}
-              />
-
-              {#if stackedAsset.id == asset.id}
-                <div class="w-full flex place-items-center place-content-center">
-                  <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
-                </div>
-              {/if}
-            </div>
-          {/each}
-        </div>
+    {#if $slideshowState === SlideshowState.None && showNavigation}
+      <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
+        <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
+          <Icon path={mdiChevronLeft} size="36" ariaHidden />
+        </NavigationArea>
       </div>
     {/if}
-  </div>
 
-  {#if $slideshowState === SlideshowState.None && showNavigation}
-    <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
-      <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
-        <Icon path={mdiChevronRight} size="36" ariaHidden />
-      </NavigationArea>
+    <!-- Asset Viewer -->
+    <div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
+      {#if $slideshowState != SlideshowState.None}
+        <div class="z-[1000] absolute w-full flex">
+          <SlideshowBar
+            {isFullScreen}
+            onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
+            onPrevious={() => navigateAsset('previous')}
+            onNext={() => navigateAsset('next')}
+            onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
+          />
+        </div>
+      {/if}
+
+      {#if previewStackedAsset}
+        {#key previewStackedAsset.id}
+          {#if previewStackedAsset.type === AssetTypeEnum.Image}
+            <PhotoViewer
+              asset={previewStackedAsset}
+              {preloadAssets}
+              on:close={closeViewer}
+              haveFadeTransition={false}
+            />
+          {:else}
+            <VideoViewer
+              assetId={previewStackedAsset.id}
+              on:close={closeViewer}
+              on:onVideoEnded={handleVideoEnded}
+              on:onVideoStarted={handleVideoStarted}
+            />
+          {/if}
+        {/key}
+      {:else}
+        {#key asset.id}
+          {#if !asset.resized}
+            <div class="flex h-full w-full justify-center">
+              <div
+                class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
+              >
+                <Icon path={mdiImageBrokenVariant} size="25%" />
+              </div>
+            </div>
+          {:else if asset.type === AssetTypeEnum.Image}
+            {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
+              <VideoViewer
+                assetId={asset.livePhotoVideoId}
+                on:close={closeViewer}
+                on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
+              />
+            {:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
+                  .toLowerCase()
+                  .endsWith('.insp'))}
+              <PanoramaViewer {asset} />
+            {:else}
+              <PhotoViewer {asset} {preloadAssets} on:close={closeViewer} />
+            {/if}
+          {:else}
+            <VideoViewer
+              assetId={asset.id}
+              on:close={closeViewer}
+              on:onVideoEnded={handleVideoEnded}
+              on:onVideoStarted={handleVideoStarted}
+            />
+          {/if}
+          {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
+            <div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
+              <ActivityStatus
+                disabled={!album?.isActivityEnabled}
+                {isLiked}
+                {numberOfComments}
+                {isShowActivity}
+                on:favorite={handleFavorite}
+                on:openActivityTab={handleOpenActivity}
+              />
+            </div>
+          {/if}
+        {/key}
+      {/if}
+
+      {#if $stackAssetsStore.length > 0 && withStacked}
+        <div
+          id="stack-slideshow"
+          class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
+        >
+          <div class="relative w-full whitespace-nowrap transition-all">
+            {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
+              <div
+                class="{stackedAsset.id == asset.id
+                  ? '-translate-y-[1px]'
+                  : '-translate-y-0'} inline-block px-1 transition-transform"
+              >
+                <Thumbnail
+                  class="{stackedAsset.id == asset.id
+                    ? 'bg-transparent border-2 border-white'
+                    : 'bg-gray-700/40'} inline-block hover:bg-transparent"
+                  asset={stackedAsset}
+                  onClick={() => {
+                    asset = stackedAsset;
+                    preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
+                  }}
+                  on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
+                  readonly
+                  thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
+                  showStackedIcon={false}
+                />
+
+                {#if stackedAsset.id == asset.id}
+                  <div class="w-full flex place-items-center place-content-center">
+                    <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
     </div>
-  {/if}
 
-  {#if $slideshowState === SlideshowState.None && $isShowDetail}
-    <div
-      transition:fly={{ duration: 150 }}
-      id="detail-panel"
-      class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
-      translate="yes"
-    >
-      <DetailPanel
+    {#if $slideshowState === SlideshowState.None && showNavigation}
+      <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
+        <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
+          <Icon path={mdiChevronRight} size="36" ariaHidden />
+        </NavigationArea>
+      </div>
+    {/if}
+
+    {#if $slideshowState === SlideshowState.None && $isShowDetail}
+      <div
+        transition:fly={{ duration: 150 }}
+        id="detail-panel"
+        class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
+        translate="yes"
+      >
+        <DetailPanel
+          {asset}
+          currentAlbum={album}
+          albums={appearsInAlbums}
+          on:close={() => ($isShowDetail = false)}
+          on:closeViewer={handleCloseViewer}
+        />
+      </div>
+    {/if}
+
+    {#if isShared && album && isShowActivity && $user}
+      <div
+        transition:fly={{ duration: 150 }}
+        id="activity-panel"
+        class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
+        translate="yes"
+      >
+        <ActivityViewer
+          user={$user}
+          disabled={!album.isActivityEnabled}
+          assetType={asset.type}
+          albumOwnerId={album.ownerId}
+          albumId={album.id}
+          assetId={asset.id}
+          {isLiked}
+          bind:reactions
+          on:addComment={handleAddComment}
+          on:deleteComment={handleRemoveComment}
+          on:deleteLike={() => (isLiked = null)}
+          on:close={() => (isShowActivity = false)}
+        />
+      </div>
+    {/if}
+
+    {#if isShowAlbumPicker}
+      <AlbumSelectionModal
+        shared={addToSharedAlbum}
+        on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
+        on:album={({ detail }) => handleAddToAlbum(detail)}
+        on:close={() => (isShowAlbumPicker = false)}
+        on:escape={() => (isShowAlbumPicker = false)}
+      />
+    {/if}
+
+    {#if isShowDeleteConfirmation}
+      <DeleteAssetDialog
+        size={1}
+        on:cancel={() => (isShowDeleteConfirmation = false)}
+        on:escape={() => (isShowDeleteConfirmation = false)}
+        on:confirm={() => deleteAsset()}
+      />
+    {/if}
+
+    {#if isShowProfileImageCrop}
+      <ProfileImageCropper
         {asset}
-        currentAlbum={album}
-        albums={appearsInAlbums}
-        on:close={() => ($isShowDetail = false)}
-        on:closeViewer={handleCloseViewer}
+        on:close={() => (isShowProfileImageCrop = false)}
+        on:escape={() => (isShowProfileImageCrop = false)}
       />
-    </div>
-  {/if}
+    {/if}
 
-  {#if isShared && album && isShowActivity && $user}
-    <div
-      transition:fly={{ duration: 150 }}
-      id="activity-panel"
-      class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
-      translate="yes"
-    >
-      <ActivityViewer
-        user={$user}
-        disabled={!album.isActivityEnabled}
-        assetType={asset.type}
-        albumOwnerId={album.ownerId}
-        albumId={album.id}
-        assetId={asset.id}
-        {isLiked}
-        bind:reactions
-        on:addComment={handleAddComment}
-        on:deleteComment={handleRemoveComment}
-        on:deleteLike={() => (isLiked = null)}
-        on:close={() => (isShowActivity = false)}
+    {#if isShowShareModal}
+      <CreateSharedLinkModal
+        assetIds={[asset.id]}
+        on:close={() => (isShowShareModal = false)}
+        on:escape={() => (isShowShareModal = false)}
       />
-    </div>
-  {/if}
-
-  {#if isShowAlbumPicker}
-    <AlbumSelectionModal
-      shared={addToSharedAlbum}
-      on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
-      on:album={({ detail }) => handleAddToAlbum(detail)}
-      on:close={() => (isShowAlbumPicker = false)}
-    />
-  {/if}
-
-  {#if isShowDeleteConfirmation}
-    <DeleteAssetDialog
-      size={1}
-      on:cancel={() => (isShowDeleteConfirmation = false)}
-      on:escape={() => (isShowDeleteConfirmation = false)}
-      on:confirm={() => deleteAsset()}
-    />
-  {/if}
-
-  {#if isShowProfileImageCrop}
-    <ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
-  {/if}
-
-  {#if isShowShareModal}
-    <CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
-  {/if}
-</section>
+    {/if}
+  </section>
+</FocusTrap>
 
 <style>
   #immich-asset-viewer {
diff --git a/web/src/lib/components/forms/edit-user-form.svelte b/web/src/lib/components/forms/edit-user-form.svelte
index cdd25c8d6..beb3f4305 100644
--- a/web/src/lib/components/forms/edit-user-form.svelte
+++ b/web/src/lib/components/forms/edit-user-form.svelte
@@ -10,6 +10,7 @@
   import { createEventDispatcher } from 'svelte';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let user: UserResponseDto;
   export let canResetPassword = true;
@@ -90,76 +91,78 @@
   }
 </script>
 
-<div
-  class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
->
-  <div class="absolute top-0 right-0 px-2 py-2 h-fit">
-    <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
-  </div>
-
+<FocusTrap>
   <div
-    class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
   >
-    <Icon path={mdiAccountEditOutline} size="4em" />
-    <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
-  </div>
-
-  <form on:submit|preventDefault={editUser} autocomplete="off">
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="email">Email</label>
-      <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+    <div class="absolute top-0 right-0 px-2 py-2 h-fit">
+      <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
     </div>
 
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="name">Name</label>
-      <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <Icon path={mdiAccountEditOutline} size="4em" />
+      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
     </div>
 
-    <div class="m-4 flex flex-col gap-2">
-      <label class="flex items-center gap-2 immich-form-label" for="quotaSize"
-        >Quota Size (GiB) {#if quotaSizeWarning}
-          <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
-        {/if}</label
-      >
-      <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
-      <p>Note: Enter 0 for unlimited quota</p>
-    </div>
+    <form on:submit|preventDefault={editUser} autocomplete="off">
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="email">Email</label>
+        <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+      </div>
 
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="storage-label">Storage Label</label>
-      <input
-        class="immich-form-input"
-        id="storage-label"
-        name="storage-label"
-        type="text"
-        bind:value={user.storageLabel}
-      />
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="name">Name</label>
+        <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
+      </div>
 
-      <p>
-        Note: To apply the Storage Label to previously uploaded assets, run the
-        <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
-          Storage Migration Job</a
+      <div class="m-4 flex flex-col gap-2">
+        <label class="flex items-center gap-2 immich-form-label" for="quotaSize"
+          >Quota Size (GiB) {#if quotaSizeWarning}
+            <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
+          {/if}</label
         >
-      </p>
-    </div>
+        <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
+        <p>Note: Enter 0 for unlimited quota</p>
+      </div>
 
-    {#if error}
-      <p class="ml-4 text-sm text-red-400">{error}</p>
-    {/if}
+      <div class="m-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="storage-label">Storage Label</label>
+        <input
+          class="immich-form-input"
+          id="storage-label"
+          name="storage-label"
+          type="text"
+          bind:value={user.storageLabel}
+        />
 
-    {#if success}
-      <p class="ml-4 text-sm text-immich-primary">{success}</p>
-    {/if}
-    <div class="mt-8 flex w-full gap-4 px-4">
-      {#if canResetPassword}
-        <Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
-          >Reset password</Button
-        >
+        <p>
+          Note: To apply the Storage Label to previously uploaded assets, run the
+          <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+            Storage Migration Job</a
+          >
+        </p>
+      </div>
+
+      {#if error}
+        <p class="ml-4 text-sm text-red-400">{error}</p>
       {/if}
-      <Button type="submit" fullwidth>Confirm</Button>
-    </div>
-  </form>
-</div>
+
+      {#if success}
+        <p class="ml-4 text-sm text-immich-primary">{success}</p>
+      {/if}
+      <div class="mt-8 flex w-full gap-4 px-4">
+        {#if canResetPassword}
+          <Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
+            >Reset password</Button
+          >
+        {/if}
+        <Button type="submit" fullwidth>Confirm</Button>
+      </div>
+    </form>
+  </div>
+</FocusTrap>
 
 {#if isShowResetPasswordConfirmation}
   <ConfirmDialogue
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 0882a3ed6..9e3caf00e 100644
--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@@ -45,7 +45,7 @@
   };
 </script>
 
-<BaseModal on:close={() => dispatch('close')}>
+<BaseModal on:close on:escape>
   <svelte:fragment slot="title">
     <span class="flex place-items-center gap-2">
       <p class="font-medium">
diff --git a/web/src/lib/components/shared-components/base-modal.svelte b/web/src/lib/components/shared-components/base-modal.svelte
index f7dd30980..234933b9b 100644
--- a/web/src/lib/components/shared-components/base-modal.svelte
+++ b/web/src/lib/components/shared-components/base-modal.svelte
@@ -6,13 +6,13 @@
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
   import { mdiClose } from '@mdi/js';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   const dispatch = createEventDispatcher<{
     escape: void;
     close: void;
   }>();
   export let zIndex = 9999;
-  export let ignoreClickOutside = false;
 
   onMount(() => {
     if (browser) {
@@ -34,36 +34,40 @@
   });
 </script>
 
-<div
-  id="immich-modal"
-  style:z-index={zIndex}
-  transition:fade={{ duration: 100, easing: quintOut }}
-  class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
->
+<FocusTrap>
   <div
-    use:clickOutside
-    on:outclick={() => !ignoreClickOutside && dispatch('close')}
-    on:escape={() => dispatch('escape')}
-    class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+    id="immich-modal"
+    style:z-index={zIndex}
+    transition:fade={{ duration: 100, easing: quintOut }}
+    class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
   >
-    <div class="flex place-items-center justify-between px-5 py-3">
+    <div
+      use:clickOutside={{
+        onOutclick: () => dispatch('close'),
+        onEscape: () => dispatch('escape'),
+      }}
+      class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
+      tabindex="-1"
+    >
+      <div class="flex place-items-center justify-between px-5 py-3">
+        <div>
+          <slot name="title">
+            <p>Modal Title</p>
+          </slot>
+        </div>
+
+        <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
+      </div>
+
       <div>
-        <slot name="title">
-          <p>Modal Title</p>
-        </slot>
+        <slot />
       </div>
 
-      <CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
+      {#if $$slots['sticky-bottom']}
+        <div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
+          <slot name="sticky-bottom" />
+        </div>
+      {/if}
     </div>
-
-    <div>
-      <slot />
-    </div>
-
-    {#if $$slots['sticky-bottom']}
-      <div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
-        <slot name="sticky-bottom" />
-      </div>
-    {/if}
   </div>
-</div>
+</FocusTrap>
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 28a2b7253..0e8469fd2 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -185,7 +185,8 @@
         },
         {
           shortcut: { key: 'Escape' },
-          onShortcut: () => {
+          onShortcut: (event) => {
+            event.stopPropagation();
             closeDropdown();
           },
         },
diff --git a/web/src/lib/components/shared-components/focus-trap.svelte b/web/src/lib/components/shared-components/focus-trap.svelte
new file mode 100644
index 000000000..084123506
--- /dev/null
+++ b/web/src/lib/components/shared-components/focus-trap.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { shortcuts } from '$lib/utils/shortcut';
+  import { onMount, onDestroy } from 'svelte';
+
+  let container: HTMLElement;
+  let triggerElement: HTMLElement;
+
+  onMount(() => {
+    triggerElement = document.activeElement as HTMLElement;
+    const focusableElements = getFocusableElements();
+    focusableElements[0]?.focus();
+  });
+
+  onDestroy(() => {
+    triggerElement?.focus();
+  });
+
+  const getFocusableElements = () => {
+    return Array.from(
+      container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+    ) as HTMLElement[];
+  };
+
+  const trapFocus = (direction: 'forward' | 'backward', event: KeyboardEvent) => {
+    const focusableElements = getFocusableElements();
+    const elementCount = focusableElements.length;
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements.at(elementCount - 1);
+
+    if (document.activeElement === lastElement && direction === 'forward') {
+      event.preventDefault();
+      firstElement?.focus();
+    } else if (document.activeElement === firstElement && direction === 'backward') {
+      event.preventDefault();
+      lastElement?.focus();
+    }
+  };
+</script>
+
+<div
+  bind:this={container}
+  use:shortcuts={[
+    {
+      ignoreInputFields: false,
+      shortcut: { key: 'Tab' },
+      onShortcut: (event) => {
+        trapFocus('forward', event);
+      },
+      preventDefault: false,
+    },
+    {
+      ignoreInputFields: false,
+      shortcut: { key: 'Tab', shift: true },
+      onShortcut: (event) => {
+        trapFocus('backward', event);
+      },
+      preventDefault: false,
+    },
+  ]}
+>
+  <slot />
+</div>
diff --git a/web/src/lib/components/shared-components/full-screen-modal.svelte b/web/src/lib/components/shared-components/full-screen-modal.svelte
index 3ca3717ef..d7d700975 100644
--- a/web/src/lib/components/shared-components/full-screen-modal.svelte
+++ b/web/src/lib/components/shared-components/full-screen-modal.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
   import { clickOutside } from '../../utils/click-outside';
   import { fade } from 'svelte/transition';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   export let onClose: (() => void) | undefined = undefined;
 </script>
 
-<section
-  in:fade={{ duration: 100 }}
-  out:fade={{ duration: 100 }}
-  class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
->
-  <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}>
-    <slot />
-  </div>
-</section>
+<FocusTrap>
+  <section
+    in:fade={{ duration: 100 }}
+    out:fade={{ duration: 100 }}
+    class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
+  >
+    <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1">
+      <slot />
+    </div>
+  </section>
+</FocusTrap>
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 4087f37bd..d97b939b0 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
@@ -11,6 +11,7 @@
   import { notificationController, NotificationType } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
+  import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
 
   let isShowSelectAvatar = false;
 
@@ -46,19 +47,20 @@
   };
 </script>
 
-<div
-  in:fade={{ duration: 100 }}
-  out:fade={{ duration: 100 }}
-  id="account-info-panel"
-  class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
->
+<FocusTrap>
   <div
-    class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    in:fade={{ duration: 100 }}
+    out:fade={{ duration: 100 }}
+    id="account-info-panel"
+    class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
   >
-    <div class="relative">
-      {#key $user}
-        <UserAvatar user={$user} size="xl" />
-
+    <div
+      class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
+    >
+      <div class="relative">
+        {#key $user}
+          <UserAvatar user={$user} size="xl" />
+        {/key}
         <div
           class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
         >
@@ -69,35 +71,35 @@
             <Icon path={mdiPencil} />
           </button>
         </div>
-      {/key}
-    </div>
-    <div>
-      <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
-        {$user.name}
-      </p>
-      <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
+      </div>
+      <div>
+        <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
+          {$user.name}
+        </p>
+        <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
+      </div>
+
+      <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
+        <Button color="dark-gray" size="sm" shadow={false} border>
+          <div class="flex place-content-center place-items-center gap-2 px-2">
+            <Icon path={mdiCog} size="18" />
+            Account Settings
+          </div>
+        </Button>
+      </a>
     </div>
 
-    <a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
-      <Button color="dark-gray" size="sm" shadow={false} border>
-        <div class="flex place-content-center place-items-center gap-2 px-2">
-          <Icon path={mdiCog} size="18" />
-          Account Settings
-        </div>
-      </Button>
-    </a>
+    <div class="mb-4 flex flex-col">
+      <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')}
+      >
+        <Icon path={mdiLogout} size={24} />
+        Sign Out</button
+      >
+    </div>
   </div>
-
-  <div class="mb-4 flex flex-col">
-    <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')}
-    >
-      <Icon path={mdiLogout} size={24} />
-      Sign Out</button
-    >
-  </div>
-</div>
+</FocusTrap>
 {#if isShowSelectAvatar}
   <AvatarSelector
     user={$user}
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 d4d60e836..36cb6152f 100644
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/web/src/lib/components/shared-components/profile-image-cropper.svelte
@@ -71,7 +71,7 @@
   };
 </script>
 
-<BaseModal on:close>
+<BaseModal on:close on:escape>
   <svelte:fragment slot="title">
     <span class="flex place-items-center gap-2">
       <p class="font-medium">Set profile picture</p>
diff --git a/web/src/lib/utils/click-outside.ts b/web/src/lib/utils/click-outside.ts
index 599146410..e04bc11fd 100644
--- a/web/src/lib/utils/click-outside.ts
+++ b/web/src/lib/utils/click-outside.ts
@@ -43,12 +43,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
   };
 
   document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKey, true);
+  node.addEventListener('keydown', handleKey, false);
 
   return {
     destroy() {
       document.removeEventListener('click', handleClick, true);
-      document.removeEventListener('keydown', handleKey, true);
+      node.removeEventListener('keydown', handleKey, false);
     },
   };
 }
diff --git a/web/src/lib/utils/shortcut.ts b/web/src/lib/utils/shortcut.ts
index 3d80c2c80..f8ca467d1 100644
--- a/web/src/lib/utils/shortcut.ts
+++ b/web/src/lib/utils/shortcut.ts
@@ -12,6 +12,7 @@ export type ShortcutOptions<T = HTMLElement> = {
   shortcut: Shortcut;
   ignoreInputFields?: boolean;
   onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
+  preventDefault?: boolean;
 };
 
 export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
@@ -53,13 +54,15 @@ export const shortcuts = <T extends HTMLElement>(
   function onKeydown(event: KeyboardEvent) {
     const ignoreShortcut = shouldIgnoreShortcut(event);
 
-    for (const { shortcut, onShortcut, ignoreInputFields = true } of options) {
+    for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
       if (ignoreInputFields && ignoreShortcut) {
         continue;
       }
 
       if (matchesShortcut(event, shortcut)) {
-        event.preventDefault();
+        if (preventDefault) {
+          event.preventDefault();
+        }
         onShortcut(event as KeyboardEvent & { currentTarget: T });
         return;
       }