diff --git a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
index 04449c59..535a1887 100644
--- a/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
+++ b/resources/assets/js/components/playlist/smart-playlist/SmartPlaylistRule.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row" data-testid="smart-playlist-rule-row">
     <Btn class="remove-rule" red @click.prevent="removeRule">
-      <icon :icon="faTimes"/>
+      <icon :icon="faTrashCan"/>
     </Btn>
 
     <select v-model="selectedModel" name="model[]">
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, ref, toRefs, watch } from 'vue'
 import models from '@/config/smart-playlist/models'
 import inputTypes from '@/config/smart-playlist/inputTypes'
diff --git a/resources/assets/js/components/screens/UploadScreen.vue b/resources/assets/js/components/screens/UploadScreen.vue
index 3666a992..f567ebfc 100644
--- a/resources/assets/js/components/screens/UploadScreen.vue
+++ b/resources/assets/js/components/screens/UploadScreen.vue
@@ -10,7 +10,7 @@
             Retry All
           </Btn>
           <Btn data-testid="upload-remove-all-btn" orange @click="removeFailedEntries">
-            <icon :icon="faTimes"/>
+            <icon :icon="faTrashCan"/>
             Remove Failed
           </Btn>
         </BtnGroup>
@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { faRotateBack, faTimes, faUpload, faWarning } from '@fortawesome/free-solid-svg-icons'
+import { faRotateBack, faTrashCan, faUpload, faWarning } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, ref, toRef } from 'vue'
 
 import { isDirectoryReadingSupported as canDropFolders } from '@/utils'
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 e09a50da..ce16f9d0 100644
--- a/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
+++ b/resources/assets/js/components/screens/__snapshots__/AllSongsScreen.spec.ts.snap
@@ -12,7 +12,7 @@ exports[`renders 1`] = `
           <!--v-if-->
         </h1><span class="meta text-secondary" data-v-5691beb5=""><span>420 songs</span><span>34:17:36</span></span>
       </div>
-      <div class="song-list-controls" data-testid="song-list-controls" data-v-d396e0d2=""><span class="btn-group" uppercased="" data-v-e884c19a="" data-v-d396e0d2=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-e368fe26="" data-v-d396e0d2=""><br data-testid="icon" icon="[object Object]" data-v-d396e0d2=""> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
+      <div class="song-list-controls" data-testid="song-list-controls" data-v-d396e0d2=""><span class="btn-group" uppercased="" data-v-e884c19a="" data-v-d396e0d2=""><button type="button" class="btn-shuffle-all" data-testid="btn-shuffle-all" orange="" title="Shuffle all songs" data-v-e368fe26="" data-v-d396e0d2=""><br data-testid="icon" icon="[object Object]" fixed-width="" data-v-d396e0d2=""> All </button><!--v-if--><!--v-if--><!--v-if--><!--v-if--></span>
         <div class="add-to" data-testid="add-to-menu" tabindex="0" data-v-42061e3e="" data-v-d396e0d2="" style="display: none;">
           <section class="existing-playlists" data-v-42061e3e="">
             <p data-v-42061e3e="">Add 0 songs to</p>
diff --git a/resources/assets/js/components/song/SongListControls.vue b/resources/assets/js/components/song/SongListControls.vue
index 904ea956..59d6233a 100644
--- a/resources/assets/js/components/song/SongListControls.vue
+++ b/resources/assets/js/components/song/SongListControls.vue
@@ -10,7 +10,7 @@
             title="Play all songs"
             @click.prevent="playAll"
           >
-            <icon :icon="faPlay"/>
+            <icon :icon="faPlay" fixed-width/>
             All
           </Btn>
 
@@ -21,7 +21,7 @@
             title="Play selected songs"
             @click.prevent="playSelected"
           >
-            <icon :icon="faPlay"/>
+            <icon :icon="faPlay" fixed-width/>
             Selected
           </Btn>
         </template>
@@ -35,7 +35,7 @@
             title="Shuffle all songs"
             @click.prevent="shuffle"
           >
-            <icon :icon="faRandom"/>
+            <icon :icon="faRandom" fixed-width/>
             All
           </Btn>
 
@@ -47,7 +47,7 @@
             title="Shuffle selected songs"
             @click.prevent="shuffleSelected"
           >
-            <icon :icon="faRandom"/>
+            <icon :icon="faRandom" fixed-width/>
             Selected
           </Btn>
         </template>
@@ -73,8 +73,7 @@
         title="Delete this playlist"
         @click.prevent="deletePlaylist"
       >
-        <icon :icon="faTimes"/>
-        Playlist
+        <icon :icon="faTrashCan"/>
       </Btn>
 
     </BtnGroup>
@@ -90,7 +89,7 @@
 </template>
 
 <script lang="ts" setup>
-import { faPlay, faRandom, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faPlay, faRandom, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed, nextTick, onMounted, onUnmounted, ref, toRefs } from 'vue'
 import { SelectedSongsKey, SongsKey } from '@/symbols'
 import { requireInjection } from '@/utils'
diff --git a/resources/assets/js/components/ui/BtnGroup.vue b/resources/assets/js/components/ui/BtnGroup.vue
index 6dd0bcba..3bf564b8 100644
--- a/resources/assets/js/components/ui/BtnGroup.vue
+++ b/resources/assets/js/components/ui/BtnGroup.vue
@@ -6,7 +6,7 @@
 
 <style lang="scss" scoped>
 .btn-group {
-  --radius: 9999px;
+  --radius: 5px;
 
   display: flex;
   position: relative;
diff --git a/resources/assets/js/components/ui/SearchForm.vue b/resources/assets/js/components/ui/SearchForm.vue
index e8616fda..03cdacfd 100644
--- a/resources/assets/js/components/ui/SearchForm.vue
+++ b/resources/assets/js/components/ui/SearchForm.vue
@@ -1,5 +1,9 @@
 <template>
   <form id="searchForm" role="search" @submit.prevent="onSubmit">
+    <span class="icon">
+      <icon :icon="faSearch"/>
+    </span>
+
     <input
       ref="input"
       v-model="q"
@@ -13,6 +17,7 @@
       @focus="maybeGoToSearchScreen"
       @input="onInput"
     >
+
     <button type="submit" title="Search">
       <icon :icon="faSearch"/>
     </button>
@@ -63,14 +68,27 @@ eventBus.on({
   display: flex;
   align-items: stretch;
   color: var(--color-text-secondary);
+  background: rgba(0, 0, 0, .2);
   border: 1px solid transparent;
   border-radius: 5px;
-  transition: border .2s ease-in-out;
+  transition: border .3s ease-in-out, .3s background-color ease-in-out;
   overflow: hidden;
+  padding: 0 0 0 1rem;
+  gap: .5rem;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    opacity: .7;
+
+    @media screen and (max-width: 768px) {
+      display: none;
+    }
+  }
 
   button {
     display: none;
-    padding: 0 1.5rem;
+    padding: 0 1.2rem;
     background: rgba(255, 255, 255, .05);
     border-radius: 0;
 
@@ -81,20 +99,15 @@ eventBus.on({
 
   &:focus-within {
     border: 1px solid rgba(255, 255, 255, .2);
+    background: rgba(0, 0, 0, .5);
   }
 
   input[type="search"] {
     width: 100%;
     border-radius: 0;
     height: 36px;
-    background: rgba(0, 0, 0, .2);
-    transition: .3s background-color;
-    padding: 0 1rem;
     color: var(--color-text-primary);
-
-    &:focus {
-      background: rgba(0, 0, 0, .5);
-    }
+    background-color: transparent;
 
     &::placeholder {
       color: rgba(255, 255, 255, .5);
diff --git a/resources/assets/js/components/ui/upload/UploadItem.vue b/resources/assets/js/components/ui/upload/UploadItem.vue
index 95a8499e..e40aa197 100644
--- a/resources/assets/js/components/ui/upload/UploadItem.vue
+++ b/resources/assets/js/components/ui/upload/UploadItem.vue
@@ -8,7 +8,7 @@
           <icon :icon="faRotateBack"/>
         </Btn>
         <Btn v-if="canRemove" icon-only title="Remove" transparent unrounded @click="remove">
-          <icon :icon="faTimes"/>
+          <icon :icon="faTrashCan"/>
         </Btn>
       </span>
     </span>
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import slugify from 'slugify'
-import { faRotateBack, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faRotateBack, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { computed, defineAsyncComponent, toRefs } from 'vue'
 import { UploadFile, uploadService } from '@/services'