diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index 49994096c..64d749328 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -981,6 +981,9 @@
 
     &-group {
       width: 260px;
+      padding: 8px;
+      border-radius: var(--b3-border-radius);
+      background-color: var(--b3-av-kanban-bg);
 
       &--small {
         width: 180px;
@@ -989,6 +992,25 @@
       &--big {
         width: 320px;
       }
+
+      .av__group-title {
+        padding-top: 0;
+      }
+
+      .av__gallery-item {
+        background-color: var(--b3-av-kanban-content-bg);
+        box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0, var(--b3-av-kanban-border) 0 0 0 1px;
+
+        &:hover .av__gallery-fields,
+        &:hover .av__gallery-cover {
+          background-color: var(--b3-av-kanban-content-hover-bg);
+        }
+      }
+
+      .av__gallery-cover {
+        background-color: var(--b3-av-kanban-content-bg);
+        border-bottom: 1px solid var(--b3-av-kanban-border);
+      }
     }
   }
 }
diff --git a/app/src/protyle/render/av/gallery/render.ts b/app/src/protyle/render/av/gallery/render.ts
index f7ffa4b2e..1042ce2e7 100644
--- a/app/src/protyle/render/av/gallery/render.ts
+++ b/app/src/protyle/render/av/gallery/render.ts
@@ -438,10 +438,14 @@ export const renderKanban = async (options: {
         return;
     }
     const view: IAVGallery = data.view as IAVGallery;
-    let bodyHTML = ""
+    let bodyHTML = "";
     view.groups.forEach((group: IAVGallery) => {
         if (group.groupHidden === 0) {
-            bodyHTML += `<div class="av__kanban-group">
+            let selectBg;
+            if (["mSelect", "select"].includes(group.groupValue.type)) {
+                selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${group.groupValue.mSelect[0].color}`);
+            }
+            bodyHTML += `<div class="av__kanban-group" style="--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;">
     ${getGroupTitleHTML(group, group.cards.length)}
     <div data-group-id="${group.id}" data-page-size="${group.pageSize}" data-dtype="${group.groupKey.type}" data-content="${Lute.EscapeHTMLStr(group.groupValue.text?.content)}" class="av__body${group.groupFolded ? " fn__none" : ""}">${getGalleryHTML(group)}</div>
 </div>`;
diff --git a/app/src/protyle/render/av/layout.ts b/app/src/protyle/render/av/layout.ts
index 915bee70d..33549c594 100644
--- a/app/src/protyle/render/av/layout.ts
+++ b/app/src/protyle/render/av/layout.ts
@@ -97,13 +97,7 @@ export const getLayoutHTML = (data: IAV) => {
         <input data-type="toggle-entries-wrap" type="checkbox" class="b3-switch b3-switch--menu" ${view.wrapField ? "checked" : ""}>
     </label>`;
     if (data.viewType === "kanban") {
-        html += `<button class="b3-menu__item" data-type="set-kanban-group">
-    <span class="fn__flex-center">${window.siyuan.languages.groups}</span>
-    <span class="fn__flex-1"></span>
-    <span class="b3-menu__accelerator">${view.cardSize === 0 ? window.siyuan.languages.small : (view.cardSize === 1 ? window.siyuan.languages.medium : window.siyuan.languages.large)}</span>
-    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
-</button>
-<label class="b3-menu__item">
+        html += `<label class="b3-menu__item">
     <span class="fn__flex-center">${window.siyuan.languages.useBackground}</span>
     <span class="fn__space fn__flex-1"></span>
     <input data-type="toggle-kanban-bg" type="checkbox" class="b3-switch b3-switch--menu" ${view.displayFieldName ? "checked" : ""}>
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index 7827c7929..f2bbc699a 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -23,7 +23,6 @@ export const loadAssets = (data: Config.IAppearance) => {
         fetchPost("/api/system/setAppearanceMode", {mode: OSTheme === "light" ? 0 : 1});
         window.siyuan.config.appearance.mode = (OSTheme === "light" ? 0 : 1);
     }
-
     const defaultStyleElement = document.getElementById("themeDefaultStyle");
     const defaultThemeAddress = `/appearance/themes/${data.mode === 1 ? "midnight" : "daylight"}/theme.css?v=${Constants.SIYUAN_VERSION}`;
     if (defaultStyleElement) {
@@ -57,6 +56,15 @@ export const loadAssets = (data: Config.IAppearance) => {
         styleElement.remove();
     }
     /// #if !MOBILE
+    setTimeout(() => {
+        document.querySelectorAll(".av__kanban-group").forEach(item => {
+            const nameElement = item.querySelector(".av__group-title .b3-chip") as HTMLElement;
+            if (nameElement) {
+                const selectBg = getComputedStyle(document.documentElement).getPropertyValue(`--b3-font-background${nameElement.style.backgroundColor.slice(-2, -1)}`);
+                item.setAttribute("style", `--b3-av-kanban-border:${selectBg};--b3-av-kanban-bg:${selectBg}29;--b3-av-kanban-content-bg:${selectBg}47;--b3-av-kanban-content-hover-bg:${selectBg}5c;`);
+            }
+        });
+    }, Constants.TIMEOUT_TRANSITION);
     getAllModels().graph.forEach(item => {
         item.searchGraph(false);
     });