diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index 6313ddac1..9199cd151 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -267,6 +267,10 @@
       opacity: .38;
       cursor: not-allowed;
     }
+
+    &--hidden {
+      opacity: .38;
+    }
   }
 
   &__action {
diff --git a/app/src/protyle/render/av/groups.ts b/app/src/protyle/render/av/groups.ts
index abd742b47..03dfebd45 100644
--- a/app/src/protyle/render/av/groups.ts
+++ b/app/src/protyle/render/av/groups.ts
@@ -188,7 +188,7 @@ export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
                 if (item.groupHidden === 0) {
                     showCount++;
                 }
-                groupHTML += `<button class="b3-menu__item" draggable="${disabledDrag ? "false" : "true"}" data-id="${item.id}">
+                groupHTML += `<button class="b3-menu__item${item.groupHidden === 0 ? "" : " b3-menu__item--hidden"}" draggable="${disabledDrag ? "false" : "true"}" data-id="${item.id}">
     ${disabledDrag ? "" : '<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>'}
     ${item.groupValue?.mSelect?.length > 0 ? `<div class="fn__flex-1">
         <span class="b3-chip" style="background-color:var(--b3-font-background${item.groupValue.mSelect[0].color});color:var(--b3-font-color${item.groupValue.mSelect[0].color})">
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 1c5deec45..92e87cb35 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -1565,6 +1565,7 @@ export const openMenuPanel = (options: {
                             showCount++;
                         }
                     });
+                    target.parentElement.classList[isHide ? "remove" : "add"]("b3-menu__item--hidden");
                     menuElement.querySelector('[data-type="hideGroups"]').innerHTML = `${window.siyuan.languages[showCount === 0 ? "showAll" : "hideAll"]}
 <span class="fn__space"></span>
 <svg><use xlink:href="#iconEye${showCount === 0 ? "" : "off"}"></use></svg>`;
@@ -1592,7 +1593,9 @@ export const openMenuPanel = (options: {
 <svg><use xlink:href="#iconEye${isShow ? "" : "off"}"></use></svg>`;
                     data.view.groups.forEach((item) => {
                         item.groupHidden = isShow ? 2 : 0;
-                        target.parentElement.parentElement.querySelector(`.b3-menu__item[data-id="${item.id}"] .b3-menu__action use`)?.setAttribute("xlink:href", `#iconEye${isShow ? "off" : ""}`);
+                        const itemElement = target.parentElement.parentElement.querySelector(`.b3-menu__item[data-id="${item.id}"]`);
+                        itemElement.classList[isShow ? "add" : "remove"]("b3-menu__item--hidden");
+                        itemElement.querySelector(".b3-menu__action use")?.setAttribute("xlink:href", `#iconEye${isShow ? "off" : ""}`);
                     });
                     transaction(options.protyle, [{
                         action: "hideAttrViewAllGroups",