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 f4bead5b39..7d2a8f7aa8 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
@@ -232,6 +232,7 @@
         />
 
         <SettingSwitch
+          id="two-pass-encoding"
           title="TWO-PASS ENCODING"
           {disabled}
           subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
@@ -286,6 +287,7 @@
             />
 
             <SettingSwitch
+              id="temporal-aq"
               title="TEMPORAL AQ"
               {disabled}
               subtitle="Applies only to NVENC. Increases quality of high-detail, low-motion scenes. May not be compatible with older devices."
diff --git a/web/src/lib/components/admin-page/settings/image/image-settings.svelte b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
index dcf59936d8..ca6565bfbf 100644
--- a/web/src/lib/components/admin-page/settings/image/image-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/image/image-settings.svelte
@@ -66,6 +66,7 @@
         />
 
         <SettingSwitch
+          id="prefer-wide-gamut"
           title="PREFER WIDE GAMUT"
           subtitle="Use Display P3 for thumbnails. This better preserves the vibrance of images with wide colorspaces, but images may appear differently on old devices with an old browser version. sRGB images are kept as sRGB to avoid color shifts."
           checked={config.image.colorspace === Colorspace.P3}
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 c1076abc54..f1b2d25b97 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
@@ -37,6 +37,7 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
+            id="watch-filesystem"
             title="Watch filesystem"
             {disabled}
             subtitle="Watch external libraries for file changes"
@@ -64,6 +65,7 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
+            id="periodic-library-scan"
             title="ENABLED"
             {disabled}
             subtitle="Enable periodic library scanning"
diff --git a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
index 97ae006816..c5ab2328ad 100644
--- a/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte
@@ -20,7 +20,13 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch title="ENABLED" {disabled} subtitle="Logging" bind:checked={config.logging.enabled} />
+        <SettingSwitch
+          id="enable-logging"
+          title="ENABLED"
+          {disabled}
+          subtitle="Logging"
+          bind:checked={config.logging.enabled}
+        />
         <SettingSelect
           label="LEVEL"
           desc="When enabled, what log level to use."
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 b95a41acf7..f032fa8c80 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
@@ -25,6 +25,7 @@
     <form autocomplete="off" on:submit|preventDefault class="mx-4 mt-4">
       <div class="flex flex-col gap-4">
         <SettingSwitch
+          id="enable-machine-learning"
           title="ENABLED"
           subtitle="If disabled, all ML features will be disabled regardless of the below settings."
           {disabled}
@@ -51,6 +52,7 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
+            id="enable-clip"
             title="ENABLED"
             subtitle="If disabled, images will not be encoded for smart search."
             bind:checked={config.machineLearning.clip.enabled}
@@ -82,6 +84,7 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
+            id="enable-facial-recognition"
             title="ENABLED"
             subtitle="If disabled, images will not be encoded for facial recognition and will not populate the People section in the Explore page."
             bind:checked={config.machineLearning.facialRecognition.enabled}
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 46dc7a6351..3be7ad96e1 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
@@ -26,6 +26,7 @@
         <SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
+              id="enable-map-features"
               title="ENABLED"
               {disabled}
               subtitle="Enable map features"
@@ -66,6 +67,7 @@
           </svelte:fragment>
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
+              id="enable-reverse-geocoding"
               title="ENABLED"
               {disabled}
               subtitle="Enable reverse geocoding"
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 b6f561c3d2..644a856d90 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
@@ -20,6 +20,7 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4">
         <SettingSwitch
+          id="enable-new-version-check"
           title="ENABLED"
           subtitle="Enable periodic requests to GitHub to check for new releases"
           bind:checked={config.newVersionCheck.enabled}
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 387d7e470e..8173c353eb 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
@@ -71,7 +71,13 @@
         >.
       </p>
 
-      <SettingSwitch {disabled} title="ENABLE" subtitle="Login with OAuth" bind:checked={config.oauth.enabled} />
+      <SettingSwitch
+        id="login-with-oauth"
+        {disabled}
+        title="ENABLE"
+        subtitle="Login with OAuth"
+        bind:checked={config.oauth.enabled}
+      />
 
       {#if config.oauth.enabled}
         <hr />
@@ -160,6 +166,7 @@
         />
 
         <SettingSwitch
+          id="auto-register-new-users"
           title="AUTO REGISTER"
           subtitle="Automatically register new users after signing in with OAuth"
           bind:checked={config.oauth.autoRegister}
@@ -167,6 +174,7 @@
         />
 
         <SettingSwitch
+          id="auto-launch-oauth"
           title="AUTO LAUNCH"
           subtitle="Start the OAuth login flow automatically upon navigating to the login page"
           disabled={disabled || !config.oauth.enabled}
@@ -174,6 +182,7 @@
         />
 
         <SettingSwitch
+          id="mobile-redirect-uri-override"
           title="MOBILE REDIRECT URI OVERRIDE"
           subtitle="Enable when 'app.immich:/' is an invalid redirect URI."
           disabled={disabled || !config.oauth.enabled}
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 2d3344dbeb..a022583527 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
@@ -49,6 +49,7 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col">
         <SettingSwitch
+          id="enable-password-login"
           title="ENABLED"
           {disabled}
           subtitle="Login with email and password"
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 11e07d0029..27d8223664 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
@@ -107,6 +107,7 @@
   {#await getTemplateOptions() then}
     <div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ml-4 mt-4'}">
       <SettingSwitch
+        id="storage-template-enabled"
         title="ENABLED"
         {disabled}
         subtitle="Enable storage template engine"
@@ -116,6 +117,7 @@
 
       {#if !minified}
         <SettingSwitch
+          id="hash-verification-enabled"
           title="HASH VERIFICATION ENABLED"
           {disabled}
           subtitle="Enables hash verification, don't disable this unless you're certain of the implications"
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 39cf22161c..e6ae804425 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
@@ -23,6 +23,7 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <SettingSwitch
+          id="enable-trash-features"
           title="ENABLED"
           {disabled}
           subtitle="Enable Trash features"
diff --git a/web/src/lib/components/album-page/album-options.svelte b/web/src/lib/components/album-page/album-options.svelte
index 5118daf068..43ac29e700 100644
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@@ -78,6 +78,7 @@
                 />
               {/if}
               <SettingSwitch
+                id="comments-likes"
                 title="Comments & likes"
                 subtitle="Let others respond"
                 checked={album.isActivityEnabled}
diff --git a/web/src/lib/components/elements/slider.svelte b/web/src/lib/components/elements/slider.svelte
index 77fe3da940..68b085fb91 100644
--- a/web/src/lib/components/elements/slider.svelte
+++ b/web/src/lib/components/elements/slider.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
+  /**
+   * Unique identifier for the checkbox element, used to associate labels with the input element.
+   */
+  export let id: string;
+  /**
+   * Optional aria-describedby attribute to associate the checkbox with a description.
+   */
+  export let ariaDescribedBy: string | undefined = undefined;
   export let checked = false;
   export let disabled = false;
 
@@ -10,17 +18,23 @@
 
 <label class="relative inline-block h-[10px] w-[36px] flex-none">
   <input
-    class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
+    {id}
+    class="disabled::cursor-not-allowed h-0 w-0 opacity-0 peer"
     type="checkbox"
     bind:checked
     on:click={onToggle}
     {disabled}
+    aria-describedby={ariaDescribedBy}
   />
 
   {#if disabled}
-    <span class="slider slider-disabled cursor-not-allowed" />
+    <span
+      class="slider slider-disabled cursor-not-allowed border border-transparent before:border before:border-transparent"
+    />
   {:else}
-    <span class="slider slider-enabled cursor-pointer" />
+    <span
+      class="slider slider-enabled cursor-pointer border-2 border-transparent before:border-2 before:border-transparent peer-focus-visible:outline before:peer-focus-visible:outline peer-focus-visible:dark:outline-gray-200 before:peer-focus-visible:dark:outline-gray-200 peer-focus-visible:outline-gray-600 before:peer-focus-visible:outline-gray-600 peer-focus-visible:dark:border-black before:peer-focus-visible:dark:border-black peer-focus-visible:border-white before:peer-focus-visible:border-white"
+    />
   {/if}
 </label>
 
@@ -32,8 +46,8 @@
     right: 0;
     bottom: 0;
     background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: transform 0.4s;
+    transition: transform 0.4s;
     border-radius: 34px;
   }
 
@@ -46,12 +60,12 @@
     content: '';
     height: 20px;
     width: 20px;
-    left: 0px;
+    left: -2px;
     right: 0px;
-    bottom: -4px;
+    bottom: -6px;
     background-color: gray;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
+    -webkit-transition: transform 0.4s;
+    transition: transform 0.4s;
     border-radius: 50%;
   }
 
diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
index 1f612af151..65f6e34982 100644
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -94,10 +94,10 @@
     </div>
 
     <div class="m-4 flex place-items-center justify-between gap-2">
-      <label class="text-sm dark:text-immich-dark-fg" for="Require user to change password on first login">
+      <label class="text-sm dark:text-immich-dark-fg" for="require-password-change">
         Require user to change password on first login
       </label>
-      <Slider bind:checked={shouldChangePassword} />
+      <Slider id="require-password-change" bind:checked={shouldChangePassword} />
     </div>
 
     <div class="m-4 flex flex-col gap-2">
diff --git a/web/src/lib/components/map-page/map-settings-modal.svelte b/web/src/lib/components/map-page/map-settings-modal.svelte
index aa95714b46..377513145f 100644
--- a/web/src/lib/components/map-page/map-settings-modal.svelte
+++ b/web/src/lib/components/map-page/map-settings-modal.svelte
@@ -31,10 +31,10 @@
       on:submit|preventDefault={() => dispatch('save', settings)}
       class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
     >
-      <SettingSwitch title="Allow dark mode" bind:checked={settings.allowDarkMode} />
-      <SettingSwitch title="Only favorites" bind:checked={settings.onlyFavorites} />
-      <SettingSwitch title="Include archived" bind:checked={settings.includeArchived} />
-      <SettingSwitch title="Include shared with me" bind:checked={settings.withPartners} />
+      <SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
+      <SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
+      <SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
+      <SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
       {#if customDateRange}
         <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
           <div class="flex items-center justify-between gap-8">
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 c4bc233def..b33a83cfc6 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
@@ -199,25 +199,33 @@
         </div>
 
         <div class="my-3">
-          <SettingSwitch bind:checked={enablePassword} title={'Require password'} />
+          <SettingSwitch id="require-password" bind:checked={enablePassword} title={'Require password'} />
         </div>
 
         <div class="my-3">
-          <SettingSwitch bind:checked={showMetadata} title={'Show metadata'} />
+          <SettingSwitch id="show-metadata" bind:checked={showMetadata} title={'Show metadata'} />
         </div>
 
         <div class="my-3">
-          <SettingSwitch bind:checked={allowDownload} title={'Allow public user to download'} />
+          <SettingSwitch
+            id="allow-public-download"
+            bind:checked={allowDownload}
+            title={'Allow public user to download'}
+          />
         </div>
 
         <div class="my-3">
-          <SettingSwitch bind:checked={allowUpload} title={'Allow public user to upload'} />
+          <SettingSwitch id="allow-public-upload" bind:checked={allowUpload} title={'Allow public user to upload'} />
         </div>
 
         <div class="text-sm">
           {#if editingLink}
             <p class="immich-form-label my-2">
-              <SettingSwitch bind:checked={shouldChangeExpirationTime} title={'Change expiration time'} />
+              <SettingSwitch
+                id="change-expiration-time"
+                bind:checked={shouldChangeExpirationTime}
+                title={'Change expiration time'}
+              />
             </p>
           {:else}
             <p class="immich-form-label my-2">Expire after</p>
diff --git a/web/src/lib/components/shared-components/settings/setting-switch.svelte b/web/src/lib/components/shared-components/settings/setting-switch.svelte
index 54e51a4f6a..2701fd2820 100644
--- a/web/src/lib/components/shared-components/settings/setting-switch.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-switch.svelte
@@ -4,20 +4,24 @@
   import { createEventDispatcher } from 'svelte';
   import Slider from '$lib/components/elements/slider.svelte';
 
+  export let id: string;
   export let title: string;
   export let subtitle = '';
   export let checked = false;
   export let disabled = false;
   export let isEdited = false;
 
+  $: sliderId = `${id}-slider`;
+  $: subtitleId = subtitle ? `${id}-subtitle` : undefined;
+
   const dispatch = createEventDispatcher<{ toggle: boolean }>();
-  const onToggle = (ischecked: boolean) => dispatch('toggle', ischecked);
+  const onToggle = (isChecked: boolean) => dispatch('toggle', isChecked);
 </script>
 
 <div class="flex place-items-center justify-between">
-  <div>
+  <div class="mr-2">
     <div class="flex h-[26px] place-items-center gap-1">
-      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
+      <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}>
         {title}
       </label>
       {#if isEdited}
@@ -30,9 +34,17 @@
       {/if}
     </div>
 
-    <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+    {#if subtitle}
+      <p id={subtitleId} class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
+    {/if}
     <slot />
   </div>
 
-  <Slider bind:checked {disabled} on:toggle={({ detail }) => onToggle(detail)} />
+  <Slider
+    id={sliderId}
+    bind:checked
+    {disabled}
+    on:toggle={({ detail }) => onToggle(detail)}
+    ariaDescribedBy={subtitleId}
+  />
 </div>
diff --git a/web/src/lib/components/slideshow-settings.svelte b/web/src/lib/components/slideshow-settings.svelte
index 46b5ff9631..3cc1c71a8f 100644
--- a/web/src/lib/components/slideshow-settings.svelte
+++ b/web/src/lib/components/slideshow-settings.svelte
@@ -45,7 +45,7 @@
         selectedOption={options[$slideshowNavigation]}
         onToggle={(option) => handleToggle(option)}
       />
-      <SettingSwitch title="Show Progress Bar" bind:checked={$showProgressBar} />
+      <SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
       <SettingInputField
         inputType={SettingInputFieldType.NUMBER}
         label="Duration"
diff --git a/web/src/lib/components/user-settings-page/app-settings.svelte b/web/src/lib/components/user-settings-page/app-settings.svelte
index fc7771ee58..83b19a46bd 100644
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -66,6 +66,7 @@
     <div class="ml-4 mt-4 flex flex-col gap-4">
       <div class="ml-4">
         <SettingSwitch
+          id="theme-selection"
           title="Theme selection"
           subtitle="Automatically set the theme to light or dark based on your browser's system preference"
           bind:checked={$colorTheme.system}
@@ -75,6 +76,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="default-locale"
           title="Default Locale"
           subtitle="Format dates and numbers based on your browser locale"
           checked={$locale == undefined}
@@ -99,6 +101,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="always-load-original-file"
           title="Display original photos"
           subtitle="Prefer to display the original photo when viewing an asset rather than thumbnails when the original asset is web-compatible. This may result in slower photo display speeds."
           bind:checked={$alwaysLoadOriginalFile}
@@ -107,6 +110,7 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
+          id="play-video-thumbnail-on-hover"
           title="Play video thumbnail on hover"
           subtitle="Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon."
           bind:checked={$playVideoThumbnailOnHover}
@@ -116,6 +120,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="show-delete-warning"
           title="Permanent deletion warning"
           subtitle="Show a warning when permanently deleting assets"
           bind:checked={$showDeleteModal}
@@ -124,6 +129,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="people-sidebar-link"
           title="People"
           subtitle="Display a link to People in the sidebar"
           bind:checked={$sidebarSettings.people}
@@ -131,6 +137,7 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
+          id="sharing-sidebar-link"
           title="Sharing"
           subtitle="Display a link to Sharing in the sidebar"
           bind:checked={$sidebarSettings.sharing}
diff --git a/web/src/lib/components/user-settings-page/memories-settings.svelte b/web/src/lib/components/user-settings-page/memories-settings.svelte
index 938936b6c5..28be6570cc 100644
--- a/web/src/lib/components/user-settings-page/memories-settings.svelte
+++ b/web/src/lib/components/user-settings-page/memories-settings.svelte
@@ -36,6 +36,7 @@
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <div class="ml-4">
           <SettingSwitch
+            id="time-based-memories"
             title="Time-based memories"
             subtitle="Photos from previous years"
             bind:checked={user.memoriesEnabled}
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index 70803f7753..26b1521ea9 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -162,6 +162,7 @@
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
             <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.name.toUpperCase()}</p>
             <SettingSwitch
+              id="show-in-timeline"
               title="Show in timeline"
               subtitle="Show photos and videos from this user in your timeline"
               bind:checked={partner.inTimeline}