diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
index d5f4d96ef9..d27361ea75 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -49,7 +49,7 @@
 
   {@render header?.()}
 </header>
-<main
+<div
   tabindex="-1"
   class="relative grid h-dvh grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
 >
@@ -59,7 +59,7 @@
     <SideBar />
   {/if}
 
-  <section class="relative">
+  <main class="relative">
     {#if title || buttons}
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 dark:border-immich-dark-gray dark:text-immich-dark-fg"
@@ -79,5 +79,5 @@
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
       {@render children?.()}
     </div>
-  </section>
-</main>
+  </main>
+</div>
diff --git a/web/src/lib/components/shared-components/control-app-bar.svelte b/web/src/lib/components/shared-components/control-app-bar.svelte
index a26da45465..f4bf98c72e 100644
--- a/web/src/lib/components/shared-components/control-app-bar.svelte
+++ b/web/src/lib/components/shared-components/control-app-bar.svelte
@@ -67,7 +67,7 @@
 </script>
 
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
-  <div
+  <nav
     id="asset-selection-app-bar"
     class={[
       'grid',
@@ -94,5 +94,5 @@
     <div class="me-4 flex place-items-center gap-1 justify-self-end">
       {@render trailing?.()}
     </div>
-  </div>
+  </nav>
 </div>
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 65f984134f..c8009a8fd9 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
@@ -55,7 +55,7 @@
   <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
 {/if}
 
-<section
+<nav
   id="dashboard-navbar"
   class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
 >
@@ -209,4 +209,4 @@
       </section>
     </div>
   </div>
-</section>
+</nav>
diff --git a/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte b/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte
index af08fb4ce1..b8f02202a7 100644
--- a/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte
@@ -7,14 +7,12 @@
   import { t } from 'svelte-i18n';
 </script>
 
-<SideBarSection>
-  <nav aria-label={$t('primary')}>
-    <SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USER_MANAGEMENT} icon={mdiAccountMultipleOutline} />
-    <SideBarLink title={$t('jobs')} routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
-    <SideBarLink title={$t('settings')} routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
-    <SideBarLink title={$t('external_libraries')} routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
-    <SideBarLink title={$t('server_stats')} routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
-  </nav>
+<SideBarSection ariaLabel={$t('primary')}>
+  <SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USER_MANAGEMENT} icon={mdiAccountMultipleOutline} />
+  <SideBarLink title={$t('jobs')} routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
+  <SideBarLink title={$t('settings')} routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
+  <SideBarLink title={$t('external_libraries')} routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
+  <SideBarLink title={$t('server_stats')} routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
 
   <BottomInfo />
 </SideBarSection>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
index 9ef0bd1b9f..62dda02cea 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -7,10 +7,11 @@
   import { onMount, type Snippet } from 'svelte';
 
   interface Props {
+    ariaLabel?: string;
     children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { ariaLabel, children }: Props = $props();
 
   const isHidden = $derived(!sidebarStore.isOpen && !mobileDevice.isFullSidebar);
   const isExpanded = $derived(sidebarStore.isOpen && !mobileDevice.isFullSidebar);
@@ -30,8 +31,9 @@
   };
 </script>
 
-<section
+<nav
   id="sidebar"
+  aria-label={ariaLabel}
   tabindex="-1"
   class="immich-scrollbar relative z-10 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
   class:shadow-2xl={isExpanded}
@@ -46,4 +48,4 @@
   <div class="pe-6 flex flex-col gap-1 h-max min-h-full">
     {@render children?.()}
   </div>
-</section>
+</nav>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index ec9c2a06da..94b064c23e 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -42,102 +42,100 @@
   let isUtilitiesSelected: boolean = $state(false);
 </script>
 
-<SideBarSection>
-  <nav aria-label={$t('primary')}>
+<SideBarSection ariaLabel={$t('primary')}>
+  <SideBarLink
+    title={$t('photos')}
+    routeId="/(user)/photos"
+    bind:isSelected={isPhotosSelected}
+    icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
+  ></SideBarLink>
+
+  {#if $featureFlags.search}
+    <SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
+  {/if}
+
+  {#if $featureFlags.map}
     <SideBarLink
-      title={$t('photos')}
-      routeId="/(user)/photos"
-      bind:isSelected={isPhotosSelected}
-      icon={isPhotosSelected ? mdiImageMultiple : mdiImageMultipleOutline}
+      title={$t('map')}
+      routeId="/(user)/map"
+      bind:isSelected={isMapSelected}
+      icon={isMapSelected ? mdiMap : mdiMapOutline}
+    />
+  {/if}
+
+  {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
+    <SideBarLink
+      title={$t('people')}
+      routeId="/(user)/people"
+      bind:isSelected={isPeopleSelected}
+      icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
+    />
+  {/if}
+
+  {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
+    <SideBarLink title={$t('shared_links')} routeId="/(user)/shared-links" icon={mdiLink} />
+  {/if}
+
+  <SideBarLink
+    title={$t('sharing')}
+    routeId="/(user)/sharing"
+    icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
+    bind:isSelected={isSharingSelected}
+  ></SideBarLink>
+
+  <p class="text-xs p-6 dark:text-immich-dark-fg">{$t('library').toUpperCase()}</p>
+
+  <SideBarLink
+    title={$t('favorites')}
+    routeId="/(user)/favorites"
+    icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
+    bind:isSelected={isFavoritesSelected}
+  ></SideBarLink>
+
+  <SideBarLink
+    title={$t('albums')}
+    routeId="/(user)/albums"
+    icon={mdiImageAlbum}
+    flippedLogo
+    bind:dropdownOpen={$recentAlbumsDropdown}
+  >
+    {#snippet dropDownContent()}
+      <span in:fly={{ y: -20 }} class="hidden md:block">
+        <RecentAlbums />
+      </span>
+    {/snippet}
+  </SideBarLink>
+
+  {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
+    <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
+  {/if}
+
+  {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
+    <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
+  {/if}
+
+  <SideBarLink
+    title={$t('utilities')}
+    routeId="/(user)/utilities"
+    bind:isSelected={isUtilitiesSelected}
+    icon={isUtilitiesSelected ? mdiToolbox : mdiToolboxOutline}
+  ></SideBarLink>
+
+  <SideBarLink
+    title={$t('archive')}
+    routeId="/(user)/archive"
+    bind:isSelected={isArchiveSelected}
+    icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
+  ></SideBarLink>
+
+  {#if $featureFlags.trash}
+    <SideBarLink
+      title={$t('trash')}
+      routeId="/(user)/trash"
+      bind:isSelected={isTrashSelected}
+      icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
     ></SideBarLink>
-
-    {#if $featureFlags.search}
-      <SideBarLink title={$t('explore')} routeId="/(user)/explore" icon={mdiMagnify} />
-    {/if}
-
-    {#if $featureFlags.map}
-      <SideBarLink
-        title={$t('map')}
-        routeId="/(user)/map"
-        bind:isSelected={isMapSelected}
-        icon={isMapSelected ? mdiMap : mdiMapOutline}
-      />
-    {/if}
-
-    {#if $preferences.people.enabled && $preferences.people.sidebarWeb}
-      <SideBarLink
-        title={$t('people')}
-        routeId="/(user)/people"
-        bind:isSelected={isPeopleSelected}
-        icon={isPeopleSelected ? mdiAccount : mdiAccountOutline}
-      />
-    {/if}
-
-    {#if $preferences.sharedLinks.enabled && $preferences.sharedLinks.sidebarWeb}
-      <SideBarLink title={$t('shared_links')} routeId="/(user)/shared-links" icon={mdiLink} />
-    {/if}
-
-    <SideBarLink
-      title={$t('sharing')}
-      routeId="/(user)/sharing"
-      icon={isSharingSelected ? mdiAccountMultiple : mdiAccountMultipleOutline}
-      bind:isSelected={isSharingSelected}
-    ></SideBarLink>
-
-    <p class="text-xs p-6 dark:text-immich-dark-fg">{$t('library').toUpperCase()}</p>
-
-    <SideBarLink
-      title={$t('favorites')}
-      routeId="/(user)/favorites"
-      icon={isFavoritesSelected ? mdiHeart : mdiHeartOutline}
-      bind:isSelected={isFavoritesSelected}
-    ></SideBarLink>
-
-    <SideBarLink
-      title={$t('albums')}
-      routeId="/(user)/albums"
-      icon={mdiImageAlbum}
-      flippedLogo
-      bind:dropdownOpen={$recentAlbumsDropdown}
-    >
-      {#snippet dropDownContent()}
-        <span in:fly={{ y: -20 }} class="hidden md:block">
-          <RecentAlbums />
-        </span>
-      {/snippet}
-    </SideBarLink>
-
-    {#if $preferences.tags.enabled && $preferences.tags.sidebarWeb}
-      <SideBarLink title={$t('tags')} routeId="/(user)/tags" icon={mdiTagMultipleOutline} flippedLogo />
-    {/if}
-
-    {#if $preferences.folders.enabled && $preferences.folders.sidebarWeb}
-      <SideBarLink title={$t('folders')} routeId="/(user)/folders" icon={mdiFolderOutline} flippedLogo />
-    {/if}
-
-    <SideBarLink
-      title={$t('utilities')}
-      routeId="/(user)/utilities"
-      bind:isSelected={isUtilitiesSelected}
-      icon={isUtilitiesSelected ? mdiToolbox : mdiToolboxOutline}
-    ></SideBarLink>
-
-    <SideBarLink
-      title={$t('archive')}
-      routeId="/(user)/archive"
-      bind:isSelected={isArchiveSelected}
-      icon={isArchiveSelected ? mdiArchiveArrowDown : mdiArchiveArrowDownOutline}
-    ></SideBarLink>
-
-    {#if $featureFlags.trash}
-      <SideBarLink
-        title={$t('trash')}
-        routeId="/(user)/trash"
-        bind:isSelected={isTrashSelected}
-        icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
-      ></SideBarLink>
-    {/if}
-  </nav>
+  {/if}
 
   <BottomInfo />
 </SideBarSection>