diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index 7a4dd278..773c105a 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full px-3 py-4 overflow-y-auto relative bg-bg">
+  <div class="w-full h-full px-3 py-4 overflow-y-auto overflow-x-hidden relative bg-bg">
     <div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
       <div class="w-full h-full" :style="{ backgroundColor: coverRgb }" />
       <div class="w-full h-full absolute top-0 left-0" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%)" />
@@ -7,6 +7,13 @@
 
     <div class="z-10 relative">
       <div class="w-full flex justify-center relative mb-4">
+        <div style="width: 0; transform: translateX(-50vw); overflow: visible">
+          <div style="width: 150vw; overflow: hidden">
+            <div id="coverBg" style="filter: blur(5vw);">
+              <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
+            </div>
+          </div>
+        </div>
         <div class="relative" @click="showFullscreenCover = true">
           <covers-book-cover :library-item="libraryItem" :width="coverWidth" :book-cover-aspect-ratio="bookCoverAspectRatio" @imageLoaded="coverImageLoaded" />
           <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1 shadow-sm z-10" :class="userIsFinished ? 'bg-success' : 'bg-yellow-400'" :style="{ width: coverWidth * progressPercent + 'px' }"></div>
@@ -730,4 +737,8 @@ export default {
   width: calc(100% - 64px);
   max-width: calc(100% - 64px);
 }
+#coverBg > div {
+  width: 150vw !important;
+  max-width: 150vw !important;
+}
 </style>