diff --git a/web/src/components/BookShelf.vue b/web/src/components/BookShelf.vue
index 501e0084..0cc005f1 100644
--- a/web/src/components/BookShelf.vue
+++ b/web/src/components/BookShelf.vue
@@ -211,6 +211,9 @@ export default {
     overflow: auto;
 
     .shelfbook-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
 
       .book-item {
         width: 100%;
@@ -258,6 +261,17 @@ export default {
     }
   }
 
+  @media (min-width: 900px) {
+    .popup-wrapper .data-wrapper .shelfbook-list {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 16px 24px;
+      .book-item {
+        width: calc(25% - 18px);
+      }
+    }
+  }
+
   .data-wrapper::-webkit-scrollbar {
     width: 0 !important;
   }