diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
index 7b0682858..516af32c3 100644
--- a/app/src/assets/scss/business/_config.scss
+++ b/app/src/assets/scss/business/_config.scss
@@ -249,6 +249,10 @@
     &__panel {
       height: 100%;
       overflow: auto;
+
+      &[data-type="downloaded"] .config-bazaar__content {
+        margin: 16px;
+      }
     }
 
     &__title {
@@ -260,7 +264,8 @@
     }
 
     &__content {
-      margin-top: -15px;
+      display: grid;
+      gap: 16px;
     }
 
     &__readme {
diff --git a/app/src/assets/scss/component/_card.scss b/app/src/assets/scss/component/_card.scss
index 8a2644fb8..ff00b28db 100644
--- a/app/src/assets/scss/component/_card.scss
+++ b/app/src/assets/scss/component/_card.scss
@@ -4,31 +4,25 @@
   box-shadow: var(--b3-point-shadow);
   background-color: var(--b3-theme-surface);
   border-radius: var(--b3-border-radius);
-  margin: 16px;
   overflow: hidden;
   position: relative;
   transition: var(--b3-transition);
   cursor: pointer;
   display: flex;
 
-  &--wrap {
-    flex: 1;
-    margin: 16px 0 0 16px;
-    min-width: 342px;
-  }
-
   &:hover {
     background-color: var(--b3-list-hover);
   }
 
   &s {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 16px 16px 0;
+    display: grid;
+    gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 342px), 1fr));
+    margin: 16px;
   }
 
   &--current {
-    background-color: var(--b3-theme-primary-lightest)
+    background-color: var(--b3-theme-primary-lightest);
   }
 
   &--disabled {
@@ -48,7 +42,7 @@
   }
 
   &__info {
-    padding: 16px 16px 4px;
+    padding: 16px 16px 0;
     line-height: 18px;
 
     &--left {
@@ -60,17 +54,22 @@
   &__desc {
     color: var(--b3-theme-on-surface);
     font-size: 12px;
-    margin-top: 4px;
+    text-autospace: normal;
+    margin-top: 8px;
     max-height: 54px;
     @include mixin.text-clamp(3);
   }
 
   &__actions {
-    padding: 0 16px 14px 16px;
     display: flex;
     box-sizing: border-box;
     font-size: 12px;
     line-height: 14px;
+    padding: 3px 11px 11px;
+
+    &:not(.b3-card__actions--right) .block__icon {
+      color: var(--b3-theme-on-surface-light);
+    }
 
     &--right {
       padding-left: 0;
diff --git a/app/src/config/bazaar.ts b/app/src/config/bazaar.ts
index d85bcfd6e..65bfc0d42 100644
--- a/app/src/config/bazaar.ts
+++ b/app/src/config/bazaar.ts
@@ -266,13 +266,13 @@ export const bazaar = {
             downloads: item.downloads,
             downloaded: false,
         };
-        return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card b3-card--wrap${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
+        return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
     <div class="b3-card__img">
         <img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/>
     </div>
     <div class="fn__flex-1 fn__flex-column">
         <div class="b3-card__info fn__flex-1">
-            ${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
+            ${item.preferredName}
             <div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">
                 ${item.preferredDesc || ""}
             </div>
@@ -287,9 +287,6 @@ export const bazaar = {
             ${bazaar._genFundingHTML(item.preferredFunding)}
             <span class="fn__space"></span>
             <div class="fn__flex-1"></div>
-            <span data-position="north" class="ariaLabel block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
-                <svg><use xlink:href="#iconTrashcan"></use></svg>
-            </span>
             <div class="fn__space${!item.current && item.installed && showSwitch ? "" : " fn__none"}"></div>
             <span data-position="north" class="ariaLabel block__icon block__icon--show${!item.current && item.installed && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
                 <svg><use xlink:href="#iconSelect"></use></svg>
@@ -316,7 +313,7 @@ export const bazaar = {
     <div class="b3-card__img"><img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/></div>
     <div class="fn__flex-1 fn__flex-column">
         <div class="b3-card__info b3-card__info--left fn__flex-1">
-            ${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
+            ${item.preferredName}
             <div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
         </div>
     </div>
@@ -425,7 +422,7 @@ export const bazaar = {
     <div class="b3-card__img"><img src="${item.iconURL}" loading="lazy" onerror="this.src='/stage/images/icon.png'"/></div>
     <div class="fn__flex-1 fn__flex-column">
         <div class="b3-card__info b3-card__info--left fn__flex-1">
-            ${item.preferredName}${item.preferredName !== item.name ? ` <span class="ft__on-surface ft__smaller">${item.name}</span>` : ""}
+            ${item.preferredName}
             <div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
         </div>
     </div>
@@ -1076,9 +1073,6 @@ type="checkbox">
                     }
                     localSort[selectElement.parentElement.parentElement.getAttribute("data-type")] = selectElement.value;
                     setStorageVal(Constants.LOCAL_BAZAAR, window.siyuan.storage[Constants.LOCAL_BAZAAR]);
-                    if (cardElements.length > 1) {
-                        html += '<div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div><div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div>';
-                    }
                     panelElement.querySelector(".b3-cards").innerHTML = html;
                 }
             });
@@ -1140,9 +1134,6 @@ type="checkbox">
                 html += item.outerHTML;
             });
         }
-        if (response.data.packages.length > 1) {
-            html += '<div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div><div class="fn__flex-1" style="margin-left: 15px;min-width: 342px;"></div>';
-        }
         element.innerHTML = `<div class="b3-cards">${html}</div>`;
     }
 };
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 91ea91bd0..bceab08c2 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -262,7 +262,7 @@ export class Background {
                 } else if (type === "show-random" && !protyle.disabled) {
                     let html = "";
                     bgs.forEach((item: string, index: number) => {
-                        html += `<div data-index="${index}" style="height: 128px;${item}" class="b3-card b3-card--wrap"></div>`;
+                        html += `<div data-index="${index}" style="height: 128px;${item}" class="b3-card"></div>`;
                     });
                     const dialog = new Dialog({
                         title: window.siyuan.languages.builtIn,