diff --git a/components/cards/LazyListBookCard.vue b/components/cards/LazyListBookCard.vue
index a3d83824..fc3a1d38 100644
--- a/components/cards/LazyListBookCard.vue
+++ b/components/cards/LazyListBookCard.vue
@@ -31,7 +31,7 @@
       </div>
 
       <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-        <span class="material-symbol text-2xl text-success">download_done</span>
+        <span class="material-symbols text-2xl text-success">download_done</span>
       </div>
     </div>
   </div>
diff --git a/components/home/BookshelfNavBar.vue b/components/home/BookshelfNavBar.vue
index 65998bb9..1bfb4b8d 100644
--- a/components/home/BookshelfNavBar.vue
+++ b/components/home/BookshelfNavBar.vue
@@ -119,6 +119,7 @@ export default {
           routeName: 'bookshelf-playlists',
           iconPack: 'material-symbols',
           icon: 'queue_music',
+          iconClass: 'text-2xl',
           text: this.$strings.ButtonPlaylists
         })
       }
diff --git a/components/tables/collection/BookTableRow.vue b/components/tables/collection/BookTableRow.vue
index 067006d1..98289835 100644
--- a/components/tables/collection/BookTableRow.vue
+++ b/components/tables/collection/BookTableRow.vue
@@ -13,7 +13,7 @@
       </div>
       <div class="w-8 min-w-8 flex justify-center">
         <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
-          <span class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+          <span class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
         </button>
       </div>
     </nuxt-link>
diff --git a/components/tables/playlist/ItemTableRow.vue b/components/tables/playlist/ItemTableRow.vue
index a6041c88..13f6faa0 100644
--- a/components/tables/playlist/ItemTableRow.vue
+++ b/components/tables/playlist/ItemTableRow.vue
@@ -14,7 +14,7 @@
         </div>
         <div class="w-8 min-w-8 flex justify-center">
           <button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
-            <span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
               <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
             </svg>
diff --git a/components/tables/podcast/EpisodeRow.vue b/components/tables/podcast/EpisodeRow.vue
index 33b8546a..fde0d8ce 100644
--- a/components/tables/podcast/EpisodeRow.vue
+++ b/components/tables/podcast/EpisodeRow.vue
@@ -29,26 +29,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-10 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 28px; height: 28px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-symbols text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || startingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>
diff --git a/components/tables/podcast/LatestEpisodeRow.vue b/components/tables/podcast/LatestEpisodeRow.vue
index 4d36bda9..b5d5591e 100644
--- a/components/tables/podcast/LatestEpisodeRow.vue
+++ b/components/tables/podcast/LatestEpisodeRow.vue
@@ -27,26 +27,35 @@
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
-          <span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
-          <svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
+        <!-- Play/Pause Button -->
+        <div class="h-9 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
+          <span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
+            {{ streamIsPlaying ? 'pause' : 'play_arrow' }}
+          </span>
+          <svg v-else class="animate-spin" style="width: 22px; height: 22px" viewBox="0 0 24 24">
             <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
           </svg>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
 
-        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
+        <!-- Read Status Button -->
+        <ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
 
-        <button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
-          <span class="material-symbols text-2xl">playlist_add</span>
+        <!-- Add to Playlist Button -->
+        <button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
+          <span class="material-symbols text-2xl leading-none">playlist_add</span>
         </button>
 
-        <div v-if="userCanDownload">
-          <span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
-          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
-          <span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
+        <!-- Download Section -->
+        <div v-if="userCanDownload" class="flex items-center">
+          <span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
+          <span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
+            {{ downloadItem || pendingDownload ? 'downloading' : 'download' }}
+          </span>
+          <span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
         </div>
 
+        <!-- Spacer to push elements left -->
         <div class="flex-grow" />
       </div>
     </div>
diff --git a/components/ui/IconBtn.vue b/components/ui/IconBtn.vue
index a967f98b..e9ca4451 100644
--- a/components/ui/IconBtn.vue
+++ b/components/ui/IconBtn.vue
@@ -5,7 +5,7 @@
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
-    <span v-else class="material-symbols" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
+    <span v-else class="material-symbols text-2xl" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
   </button>
 </template>
 
diff --git a/pages/collection/_id.vue b/pages/collection/_id.vue
index c06cf5ab..9f371c66 100644
--- a/pages/collection/_id.vue
+++ b/pages/collection/_id.vue
@@ -13,7 +13,7 @@
           </h1>
           <div class="flex-grow" />
           <ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
-            <span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
           </ui-btn>
         </div>
diff --git a/pages/item/_id/_episode/index.vue b/pages/item/_id/_episode/index.vue
index 662b8735..e560e45f 100644
--- a/pages/item/_id/_episode/index.vue
+++ b/pages/item/_id/_episode/index.vue
@@ -30,14 +30,14 @@
     <!-- action buttons -->
     <div class="flex mt-4 -mx-1">
       <ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
-        <span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+        <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
         <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : localEpisodeId ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
       </ui-btn>
       <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
-        <span class="material-symbols" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
+        <span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
       </ui-btn>
       <ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="showMoreMenu = true">
-        <span class="material-symbols">more_vert</span>
+        <span class="material-symbols text-2xl">more_vert</span>
       </ui-btn>
     </div>
 
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index 9cd04fac..a0264a5c 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -51,18 +51,18 @@
         <div class="col-span-full">
           <div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
             <ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
-              <span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+              <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
               <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : isPodcast ? $strings.ButtonNextEpisode : hasLocal ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
             </ui-btn>
             <ui-btn v-if="showRead" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
-              <span class="material-symbols">auto_stories</span>
+              <span class="material-symbols text-2xl">auto_stories</span>
               <span v-if="!showPlay" class="px-2 text-base">{{ $strings.ButtonRead }} {{ ebookFormat }}</span>
             </ui-btn>
             <ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
-              <span class="material-symbols" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
+              <span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
             </ui-btn>
             <ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="moreButtonPress">
-              <span class="material-symbols">more_vert</span>
+              <span class="material-symbols text-2xl">more_vert</span>
             </ui-btn>
           </div>
           <ui-btn v-else-if="isMissing" color="error" :padding-x="4" small class="mt-4 flex items-center justify-center w-full" @click="clickMissingButton">
diff --git a/pages/media/_id/history.vue b/pages/media/_id/history.vue
index 82a19eac..d63b7b66 100644
--- a/pages/media/_id/history.vue
+++ b/pages/media/_id/history.vue
@@ -10,7 +10,7 @@
       <p class="my-2 text-fg-muted font-semibold">{{ name }}</p>
       <div v-for="(evt, index) in events" :key="index" class="py-3 flex items-center">
         <p class="text-sm text-fg-muted w-12">{{ $formatDate(evt.timestamp, 'HH:mm') }}</p>
-        <span class="material-symbols px-1" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
+        <span class="material-symbols fill px-2" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
         <p class="text-sm text-fg px-1">{{ evt.name }}</p>
 
         <span v-if="evt.serverSyncAttempted && evt.serverSyncSuccess" class="material-symbols px-1 text-base text-success">cloud_done</span>
@@ -150,9 +150,9 @@ export default {
     getEventIcon(name) {
       switch (name) {
         case 'Play':
-          return 'play_circle_filled'
+          return 'play_circle'
         case 'Pause':
-          return 'pause_circle_filled'
+          return 'pause_circle'
         case 'Stop':
           return 'stop_circle'
         case 'Save':
diff --git a/pages/playlist/_id.vue b/pages/playlist/_id.vue
index ca68c184..6f84cc8b 100644
--- a/pages/playlist/_id.vue
+++ b/pages/playlist/_id.vue
@@ -11,7 +11,7 @@
           </h1>
           <div class="flex-grow" />
           <ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
-            <span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
+            <span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
             <span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
           </ui-btn>
         </div>