diff --git a/resources/assets/js/__tests__/setup.ts b/resources/assets/js/__tests__/setup.ts
index ca51d2d6..33610c83 100644
--- a/resources/assets/js/__tests__/setup.ts
+++ b/resources/assets/js/__tests__/setup.ts
@@ -9,3 +9,7 @@ global.ResizeObserver = global.ResizeObserver ||
     observe: vi.fn(),
     unobserve: vi.fn()
   }))
+
+window.HTMLMediaElement.prototype.load = vi.fn()
+window.HTMLMediaElement.prototype.play = vi.fn()
+window.HTMLMediaElement.prototype.pause = vi.fn()
diff --git a/resources/assets/js/components/album/__snapshots__/AlbumTrackListItem.spec.ts.snap b/resources/assets/js/components/album/__snapshots__/AlbumTrackListItem.spec.ts.snap
deleted file mode 100644
index b450b084..00000000
--- a/resources/assets/js/components/album/__snapshots__/AlbumTrackListItem.spec.ts.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`renders 1`] = `
-<div class="track-list-item" title="" tabindex="0" data-v-d8ad5538=""><span class="title" data-v-d8ad5538="">Fahrstuhl to Heaven</span>
-  <!----><span class="length" data-v-d8ad5538="">00:42</span>
-</div>
-`;
diff --git a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
index 9c7c9fb6..2016af6e 100644
--- a/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
+++ b/resources/assets/js/components/layout/app-footer/__snapshots__/FooterExtraControls.spec.ts.snap
@@ -5,7 +5,17 @@ exports[`renders 1`] = `
   <div class="wrapper" data-v-add48cbe="">
     <!--v-if--><button data-testid="toggle-visualizer-btn" title="Click for a marvelous visualizer!" type="button" data-v-add48cbe="">
       <div class="bars" data-testid="soundbars" data-v-d983e410="" data-v-add48cbe=""><img alt="Sound bars" height="13" src="undefined/resources/assets/img/bars.gif" data-v-d983e410=""></div>
-    </button><button title="Like Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><i class="fa fa-heart-o" data-testid="btn-like-unliked" data-v-5d366bb1=""></i></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><i class="fa fa-list-ol" data-v-add48cbe=""></i></a><button class="NO_REPEAT control" title="Change repeat mode (current mode: No Repeat)" data-testid="repeat-mode-switch" type="button" data-v-651f1926="" data-v-add48cbe=""><i class="fa fa-repeat" data-v-651f1926=""></i></button><span id="volume" class="volume control" data-v-add48cbe=""><i class="fa fa-volume-up" role="button" tabindex="0" title="Mute"></i><input id="volumeInput" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
+    </button><button title="Unlike Fahrstuhl to Heaven by Led Zeppelin" class="text-secondary like" data-testid="like-btn" data-v-5d366bb1="" data-v-add48cbe=""><svg class="svg-inline--fa fa-heart text-maroon" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-testid="btn-like-liked" data-v-5d366bb1="">
+        <path class="" fill="currentColor" d="M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z"></path>
+      </svg></button><button class="active control text-uppercase" data-testid="toggle-extra-panel-btn" title="View song information" type="button" data-v-add48cbe=""> Info </button><a class="queue control" href="#!/queue" data-v-add48cbe=""><svg class="svg-inline--fa fa-list-ol" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="list-ol" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-v-add48cbe="">
+        <path class="" fill="currentColor" d="M55.1 56.04C55.1 42.78 66.74 32.04 79.1 32.04H111.1C125.3 32.04 135.1 42.78 135.1 56.04V176H151.1C165.3 176 175.1 186.8 175.1 200C175.1 213.3 165.3 224 151.1 224H71.1C58.74 224 47.1 213.3 47.1 200C47.1 186.8 58.74 176 71.1 176H87.1V80.04H79.1C66.74 80.04 55.1 69.29 55.1 56.04V56.04zM118.7 341.2C112.1 333.8 100.4 334.3 94.65 342.4L83.53 357.9C75.83 368.7 60.84 371.2 50.05 363.5C39.26 355.8 36.77 340.8 44.47 330.1L55.59 314.5C79.33 281.2 127.9 278.8 154.8 309.6C176.1 333.1 175.6 370.5 153.7 394.3L118.8 432H152C165.3 432 176 442.7 176 456C176 469.3 165.3 480 152 480H64C54.47 480 45.84 474.4 42.02 465.6C38.19 456.9 39.9 446.7 46.36 439.7L118.4 361.7C123.7 355.9 123.8 347.1 118.7 341.2L118.7 341.2zM512 64C529.7 64 544 78.33 544 96C544 113.7 529.7 128 512 128H256C238.3 128 224 113.7 224 96C224 78.33 238.3 64 256 64H512zM512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288H256C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224H512zM512 384C529.7 384 544 398.3 544 416C544 433.7 529.7 448 512 448H256C238.3 448 224 433.7 224 416C224 398.3 238.3 384 256 384H512z"></path>
+      </svg></a><button class="control" title="Change repeat mode (current mode: No Repeat)" data-testid="repeat-mode-switch" type="button" data-v-651f1926="" data-v-add48cbe="">
+      <div class="fa-layers" data-v-651f1926=""><svg class="svg-inline--fa fa-repeat" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="repeat" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-651f1926="">
+          <path class="" fill="currentColor" d="M480 256c-17.67 0-32 14.31-32 32c0 52.94-43.06 96-96 96H192L192 344c0-9.469-5.578-18.06-14.23-21.94C169.1 318.3 159 319.8 151.9 326.2l-80 72C66.89 402.7 64 409.2 64 416s2.891 13.28 7.938 17.84l80 72C156.4 509.9 162.2 512 168 512c3.312 0 6.615-.6875 9.756-2.062C186.4 506.1 192 497.5 192 488L192 448h160c88.22 0 160-71.78 160-160C512 270.3 497.7 256 480 256zM160 128h159.1L320 168c0 9.469 5.578 18.06 14.23 21.94C337.4 191.3 340.7 192 343.1 192c5.812 0 11.57-2.125 16.07-6.156l80-72C445.1 109.3 448 102.8 448 95.1s-2.891-13.28-7.938-17.84l-80-72c-7.047-6.312-17.19-7.875-25.83-4.094C325.6 5.938 319.1 14.53 319.1 24L320 64H160C71.78 64 0 135.8 0 224c0 17.69 14.33 32 32 32s32-14.31 32-32C64 171.1 107.1 128 160 128z"></path>
+        </svg>
+        <!--v-if-->
+      </div>
+    </button><span id="volume" class="volume control" data-v-add48cbe=""><svg class="svg-inline--fa fa-volume-high fa-fw" aria-labelledby="svg-inline--fa-title-xm5fGzx2NaJG" data-prefix="fas" data-icon="volume-high" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" tabindex="0"><title class="" id="svg-inline--fa-title-xm5fGzx2NaJG">Mute</title><path class="" fill="currentColor" d="M412.6 182c-10.28-8.334-25.41-6.867-33.75 3.402c-8.406 10.24-6.906 25.35 3.375 33.74C393.5 228.4 400 241.8 400 255.1c0 14.17-6.5 27.59-17.81 36.83c-10.28 8.396-11.78 23.5-3.375 33.74c4.719 5.806 11.62 8.802 18.56 8.802c5.344 0 10.75-1.779 15.19-5.399C435.1 311.5 448 284.6 448 255.1S435.1 200.4 412.6 182zM473.1 108.2c-10.22-8.334-25.34-6.898-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C476.6 172.1 496 213.3 496 255.1s-19.44 82.1-53.31 110.7c-10.25 8.396-11.75 23.5-3.344 33.74c4.75 5.775 11.62 8.771 18.56 8.771c5.375 0 10.75-1.779 15.22-5.431C518.2 366.9 544 313 544 255.1S518.2 145 473.1 108.2zM534.4 33.4c-10.22-8.334-25.34-6.867-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C559.9 116.3 592 183.9 592 255.1s-32.09 139.7-88.06 185.5c-10.25 8.396-11.75 23.5-3.344 33.74C505.3 481 512.2 484 519.2 484c5.375 0 10.75-1.779 15.22-5.431C601.5 423.6 640 342.5 640 255.1S601.5 88.34 534.4 33.4zM301.2 34.98c-11.5-5.181-25.01-3.076-34.43 5.29L131.8 160.1H48c-26.51 0-48 21.48-48 47.96v95.92c0 26.48 21.49 47.96 48 47.96h83.84l134.9 119.8C272.7 477 280.3 479.8 288 479.8c4.438 0 8.959-.9314 13.16-2.835C312.7 471.8 320 460.4 320 447.9V64.12C320 51.55 312.7 40.13 301.2 34.98z"></path></svg><input id="volumeInput" class="plyr__volume" max="10" role="slider" step="0.1" title="Volume" type="range"></span>
   </div>
 </div>
 `;
diff --git a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
index a1a3e540..40f30df9 100644
--- a/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
+++ b/resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders 1`] = `
 <div class="about text-secondary" data-testid="about-modal" tabindex="0" data-v-0ef2b3f8="">
   <header data-v-0ef2b3f8="">
-    <h1 class="text-white" data-v-0ef2b3f8="">About Koel</h1>
+    <h1 class="text-primary" data-v-0ef2b3f8="">About Koel</h1>
   </header>
   <main data-v-0ef2b3f8="">
     <div class="logo" data-v-0ef2b3f8=""><img alt="Koel's logo" src="undefined/resources/assets/img/logo.svg" width="128" data-v-0ef2b3f8=""></div>
diff --git a/resources/assets/js/components/screens/__snapshots__/AlbumScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/AlbumScreen.spec.ts.snap
index c0f015b4..df997060 100644
--- a/resources/assets/js/components/screens/__snapshots__/AlbumScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AlbumScreen.spec.ts.snap
@@ -2,12 +2,14 @@
 
 exports[`renders 1`] = `
 <section id="albumWrapper" data-v-748fe44c="">
-  <header class="screen-header" data-v-748fe44c="">
-    <div class="thumbnail-wrapper non-empty"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-748fe44c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs in the album Led Zeppelin IV</a></span></div>
-    <div class="heading-wrapper">
-      <h1>Led Zeppelin IV
-        <!--v-if-->
-      </h1><span class="meta text-secondary"><a href="#!/artist/123" class="artist" data-v-748fe44c="">Led Zeppelin</a><span data-v-748fe44c="">10 songs</span><span data-v-748fe44c="">26:43</span><a class="info" href="" title="View album information" data-v-748fe44c="">Info</a><a class="download" href="" role="button" title="Download all songs in album" data-v-748fe44c=""> Download All </a></span>
+  <header class="screen-header collapsed" data-v-748fe44c="">
+    <div class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-748fe44c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs in the album Led Zeppelin IV</span><span class="icon" data-v-901ba52c=""></span></a></span></div>
+    <div class="right">
+      <div class="heading-wrapper">
+        <h1 class="name">Led Zeppelin IV
+          <!--v-if-->
+        </h1><span class="meta text-secondary"><a href="#!/artist/123" class="artist" data-v-748fe44c="">Led Zeppelin</a><span data-v-748fe44c="">10 songs</span><span data-v-748fe44c="">26:43</span><a class="info" href="" title="View album information" data-v-748fe44c="">Info</a><a class="download" href="" role="button" title="Download all songs in album" data-v-748fe44c=""> Download All </a></span>
+      </div>
     </div>
   </header><br data-testid="song-list" data-v-748fe44c="">
   <!--v-if-->
diff --git a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
index 780329a3..9132149b 100644
--- a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
@@ -31,3 +31,35 @@ exports[`renders 1`] = `
   </header><br data-testid="song-list">
 </section>
 `;
+
+exports[`renders 2`] = `
+<section id="songsWrapper">
+  <header class="screen-header expanded">
+    <div class="thumbnail-wrapper">
+      <div class="thumbnail-stack single" style="background-image: url(undefined/resources/assets/img/covers/default.svg);" data-v-2978c570=""><span data-testid="thumbnail" data-v-2978c570=""></span></div>
+    </div>
+    <div class="right">
+      <div class="heading-wrapper">
+        <h1 class="name"> All Songs
+          <!--v-if-->
+        </h1><span class="meta text-secondary"><span>420 songs</span><span>34:17:36</span></span>
+      </div>
+      <div class="song-list-controls" data-testid="song-list-controls" data-v-cee28c08=""><span class="btn-group" uppercased="" data-v-cee28c08=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-27deb898="" data-v-cee28c08=""><svg class="svg-inline--fa fa-shuffle" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shuffle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-cee28c08=""><path class="" fill="currentColor" d="M424.1 287c-15.13-15.12-40.1-4.426-40.1 16.97V352H336L153.6 108.8C147.6 100.8 138.1 96 128 96H32C14.31 96 0 110.3 0 128s14.31 32 32 32h80l182.4 243.2C300.4 411.3 309.9 416 320 416h63.97v47.94c0 21.39 25.86 32.12 40.99 17l79.1-79.98c9.387-9.387 9.387-24.59 0-33.97L424.1 287zM336 160h47.97v48.03c0 21.39 25.87 32.09 40.1 16.97l79.1-79.98c9.387-9.391 9.385-24.59-.0013-33.97l-79.1-79.98c-15.13-15.12-40.99-4.391-40.99 17V96H320c-10.06 0-19.56 4.75-25.59 12.81L254 162.7L293.1 216L336 160zM112 352H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c10.06 0 19.56-4.75 25.59-12.81l40.4-53.87L154 296L112 352z"></path></svg> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
+        <div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-0351ff38="" data-v-cee28c08="" style="display: none;">
+          <section class="existing-playlists" data-v-0351ff38="">
+            <p data-v-0351ff38="">Add 0 songs to</p>
+            <ul data-v-0351ff38="">
+              <li data-testid="queue" tabindex="0" data-v-0351ff38="">Queue</li>
+              <li class="favorites" data-testid="add-to-favorites" tabindex="0" data-v-0351ff38=""> Favorites </li>
+            </ul>
+          </section>
+          <section class="new-playlist" data-testid="new-playlist" data-v-0351ff38="">
+            <p data-v-0351ff38="">or create a new playlist</p>
+            <form class="form-save form-simple form-new-playlist" data-v-0351ff38=""><input data-testid="new-playlist-name" placeholder="Playlist name" required="" type="text" data-v-0351ff38=""><button type="submit" title="Save" data-v-27deb898="" data-v-0351ff38="">⏎</button></form>
+          </section>
+        </div>
+      </div>
+    </div>
+  </header><br data-testid="song-list">
+</section>
+`;
diff --git a/resources/assets/js/components/screens/__snapshots__/ArtistScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/ArtistScreen.spec.ts.snap
index 9476b7e3..f2fa411f 100644
--- a/resources/assets/js/components/screens/__snapshots__/ArtistScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/ArtistScreen.spec.ts.snap
@@ -2,12 +2,14 @@
 
 exports[`renders 1`] = `
 <section id="artistWrapper" data-v-dceda15c="">
-  <header class="screen-header" data-v-dceda15c="">
-    <div class="thumbnail-wrapper non-empty"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-dceda15c=""><a class="control control-play font-size-0" href="" role="button" data-v-901ba52c="">Play all songs by Led Zeppelin</a></span></div>
-    <div class="heading-wrapper">
-      <h1>Led Zeppelin
-        <!--v-if-->
-      </h1><span class="meta text-secondary"><span data-v-dceda15c="">12 albums</span><span data-v-dceda15c="">53 songs</span><span data-v-dceda15c="">11:16:43</span><a class="info" href="" title="View artist information" data-v-dceda15c="">Info</a><a class="download" href="" role="button" title="Download all songs by this artist" data-v-dceda15c=""> Download All </a></span>
+  <header class="screen-header collapsed" data-v-dceda15c="">
+    <div class="thumbnail-wrapper"><span class="cover" data-testid="album-artist-thumbnail" data-v-901ba52c="" data-v-dceda15c=""><a class="control control-play" href="" role="button" data-v-901ba52c=""><span class="hidden" data-v-901ba52c="">Play all songs by Led Zeppelin</span><span class="icon" data-v-901ba52c=""></span></a></span></div>
+    <div class="right">
+      <div class="heading-wrapper">
+        <h1 class="name">Led Zeppelin
+          <!--v-if-->
+        </h1><span class="meta text-secondary"><span data-v-dceda15c="">12 albums</span><span data-v-dceda15c="">53 songs</span><span data-v-dceda15c="">11:16:43</span><a class="info" href="" title="View artist information" data-v-dceda15c="">Info</a><a class="download" href="" role="button" title="Download all songs by this artist" data-v-dceda15c=""> Download All </a></span>
+      </div>
     </div>
   </header><br data-testid="song-list" data-v-dceda15c="">
   <!--v-if-->
diff --git a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
index 344d90bc..93376d28 100644
--- a/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/SettingsScreen.spec.ts.snap
@@ -2,10 +2,12 @@
 
 exports[`renders 1`] = `
 <section id="settingsWrapper">
-  <header class="screen-header">
+  <header class="screen-header expanded">
     <div class="thumbnail-wrapper"></div>
-    <div class="heading-wrapper">
-      <h1>Settings</h1><span class="meta text-secondary"></span>
+    <div class="right">
+      <div class="heading-wrapper">
+        <h1 class="name">Settings</h1><span class="meta text-secondary"></span>
+      </div>
     </div>
   </header>
   <form class="main-scroll-wrap">
diff --git a/resources/assets/js/components/song/__snapshots__/SongEditForm.spec.ts.snap b/resources/assets/js/components/song/__snapshots__/SongEditForm.spec.ts.snap
index 7f4cefd8..3989007c 100644
--- a/resources/assets/js/components/song/__snapshots__/SongEditForm.spec.ts.snap
+++ b/resources/assets/js/components/song/__snapshots__/SongEditForm.spec.ts.snap
@@ -10,18 +10,18 @@ exports[`edits a single song 1`] = `
         <h2 data-testid="displayed-album-name" class="" data-v-5f0f6176="">IV</h2>
       </div>
     </header>
-    <div class="tabs" data-v-5f0f6176="">
+    <main class="tabs" data-v-5f0f6176="">
       <div class="clear" role="tablist" data-v-5f0f6176=""><button id="editSongTabDetails" aria-selected="true" aria-controls="editSongPanelDetails" role="tab" type="button" data-v-5f0f6176=""> Details </button><button id="editSongTabLyrics" aria-selected="false" aria-controls="editSongPanelLyrics" data-testid="edit-song-lyrics-tab" role="tab" type="button" data-v-5f0f6176=""> Lyrics </button></div>
       <div class="panes" data-v-5f0f6176="">
         <div id="editSongPanelDetails" aria-labelledby="editSongTabDetails" role="tabpanel" tabindex="0" data-v-5f0f6176="">
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Title</label><input data-testid="title-input" name="title" title="Title" type="text" data-v-5f0f6176=""></div>
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Artist</label><input placeholder="" data-testid="artist-input" name="artist" type="text" data-v-5f0f6176=""></div>
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Album</label><input placeholder="" data-testid="album-input" name="album" type="text" data-v-5f0f6176=""></div>
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Album Artist</label><input placeholder="" data-testid="albumArtist-input" name="album_artist" type="text" data-v-5f0f6176=""></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Title <input data-testid="title-input" name="title" title="Title" type="text" data-v-5f0f6176=""></label></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Artist <input placeholder="" data-testid="artist-input" name="artist" type="text" data-v-5f0f6176=""></label></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Album <input placeholder="" data-testid="album-input" name="album" type="text" data-v-5f0f6176=""></label></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Album Artist <input placeholder="" data-testid="albumArtist-input" name="album_artist" type="text" data-v-5f0f6176=""></label></div>
           <div class="form-row" data-v-5f0f6176="">
             <div class="cols" data-v-5f0f6176="">
-              <div data-v-5f0f6176=""><label data-v-5f0f6176="">Track</label><input placeholder="" data-testid="track-input" min="1" name="track" type="number" data-v-5f0f6176=""></div>
-              <div data-v-5f0f6176=""><label data-v-5f0f6176="">Disc</label><input placeholder="" data-testid="disc-input" min="1" name="disc" type="number" data-v-5f0f6176=""></div>
+              <div data-v-5f0f6176=""><label data-v-5f0f6176=""> Track <input placeholder="" data-testid="track-input" min="1" name="track" type="number" data-v-5f0f6176=""></label></div>
+              <div data-v-5f0f6176=""><label data-v-5f0f6176=""> Disc <input placeholder="" data-testid="disc-input" min="1" name="disc" type="number" data-v-5f0f6176=""></label></div>
             </div>
           </div>
         </div>
@@ -29,7 +29,7 @@ exports[`edits a single song 1`] = `
           <div class="form-row" data-v-5f0f6176=""><textarea data-testid="lyrics-input" name="lyrics" title="Lyrics" data-v-5f0f6176=""></textarea></div>
         </div>
       </div>
-    </div>
+    </main>
     <footer data-v-5f0f6176=""><button type="submit" data-v-27deb898="" data-v-5f0f6176="">Update</button><button type="button" class="btn-cancel" white="" data-v-27deb898="" data-v-5f0f6176="">Cancel</button></footer>
   </form>
 </div>
@@ -45,26 +45,26 @@ exports[`edits multiple songs 1`] = `
         <h2 data-testid="displayed-album-name" class="mixed" data-v-5f0f6176="">Mixed Albums</h2>
       </div>
     </header>
-    <div class="tabs" data-v-5f0f6176="">
+    <main class="tabs" data-v-5f0f6176="">
       <div class="clear" role="tablist" data-v-5f0f6176=""><button id="editSongTabDetails" aria-selected="true" aria-controls="editSongPanelDetails" role="tab" type="button" data-v-5f0f6176=""> Details </button>
         <!--v-if-->
       </div>
       <div class="panes" data-v-5f0f6176="">
         <div id="editSongPanelDetails" aria-labelledby="editSongTabDetails" role="tabpanel" tabindex="0" data-v-5f0f6176="">
           <!--v-if-->
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Artist</label><input placeholder="Leave unchanged" data-testid="artist-input" name="artist" type="text" data-v-5f0f6176=""></div>
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Album</label><input placeholder="Leave unchanged" data-testid="album-input" name="album" type="text" data-v-5f0f6176=""></div>
-          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176="">Album Artist</label><input placeholder="Leave unchanged" data-testid="albumArtist-input" name="album_artist" type="text" data-v-5f0f6176=""></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Artist <input placeholder="Leave unchanged" data-testid="artist-input" name="artist" type="text" data-v-5f0f6176=""></label></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Album <input placeholder="Leave unchanged" data-testid="album-input" name="album" type="text" data-v-5f0f6176=""></label></div>
+          <div class="form-row" data-v-5f0f6176=""><label data-v-5f0f6176=""> Album Artist <input placeholder="Leave unchanged" data-testid="albumArtist-input" name="album_artist" type="text" data-v-5f0f6176=""></label></div>
           <div class="form-row" data-v-5f0f6176="">
             <div class="cols" data-v-5f0f6176="">
-              <div data-v-5f0f6176=""><label data-v-5f0f6176="">Track</label><input placeholder="Leave unchanged" data-testid="track-input" min="1" name="track" type="number" data-v-5f0f6176=""></div>
-              <div data-v-5f0f6176=""><label data-v-5f0f6176="">Disc</label><input placeholder="Leave unchanged" data-testid="disc-input" min="1" name="disc" type="number" data-v-5f0f6176=""></div>
+              <div data-v-5f0f6176=""><label data-v-5f0f6176=""> Track <input placeholder="Leave unchanged" data-testid="track-input" min="1" name="track" type="number" data-v-5f0f6176=""></label></div>
+              <div data-v-5f0f6176=""><label data-v-5f0f6176=""> Disc <input placeholder="Leave unchanged" data-testid="disc-input" min="1" name="disc" type="number" data-v-5f0f6176=""></label></div>
             </div>
           </div>
         </div>
         <!--v-if-->
       </div>
-    </div>
+    </main>
     <footer data-v-5f0f6176=""><button type="submit" data-v-27deb898="" data-v-5f0f6176="">Update</button><button type="button" class="btn-cancel" white="" data-v-27deb898="" data-v-5f0f6176="">Cancel</button></footer>
   </form>
 </div>
diff --git a/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap b/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
index 6d347533..412788b1 100644
--- a/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
+++ b/resources/assets/js/components/ui/upload/__snapshots__/UploadItem.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`renders 1`] = `<div class="canceled upload-item" title="" data-v-ad447c04=""><span style="width: 42%;" class="progress" data-v-ad447c04=""></span><span class="details" data-v-ad447c04=""><span class="name" data-v-ad447c04="">Sample Track</span><span class="controls" data-v-ad447c04=""><button type="button" icon-only="" title="Retry" transparent="" unrounded="" data-v-27deb898="" data-v-ad447c04=""><i class="fa fa-repeat" data-v-ad447c04=""></i></button><button type="button" icon-only="" title="Remove" transparent="" unrounded="" data-v-27deb898="" data-v-ad447c04=""><i class="fa fa-times" data-v-ad447c04=""></i></button></span></span></div>`;
+exports[`renders 1`] = `<div class="canceled upload-item" title="" data-v-ad447c04=""><span style="width: 42%;" class="progress" data-v-ad447c04=""></span><span class="details" data-v-ad447c04=""><span class="name" data-v-ad447c04="">Sample Track</span><span class="controls" data-v-ad447c04=""><button type="button" icon-only="" title="Retry" transparent="" unrounded="" data-v-27deb898="" data-v-ad447c04=""><svg class="svg-inline--fa fa-rotate-left" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rotate-left" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-v-ad447c04=""><path class="" fill="currentColor" d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"></path></svg></button><button type="button" icon-only="" title="Remove" transparent="" unrounded="" data-v-27deb898="" data-v-ad447c04=""><svg class="svg-inline--fa fa-xmark" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" data-v-ad447c04=""><path class="" fill="currentColor" d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path></svg></button></span></span></div>`;