diff --git a/app/src/card/makeCard.ts b/app/src/card/makeCard.ts
index d794c9038..8a8a06f70 100644
--- a/app/src/card/makeCard.ts
+++ b/app/src/card/makeCard.ts
@@ -1,4 +1,3 @@
-import {focusByRange, getEditorRange} from "../protyle/util/selection";
 import {fetchPost} from "../util/fetch";
 import {Dialog} from "../dialog";
 import {isMobile} from "../util/functions";
@@ -7,11 +6,12 @@ import {confirmDialog} from "../dialog/confirmDialog";
 import {hideElements} from "../protyle/ui/hideElements";
 import {viewCards} from "./viewCards";
 import {Constants} from "../constants";
+import {escapeAttr, escapeHtml} from "../util/escape";
 
 export const genCardItem = (item: ICardPackage) => {
-    return `<li data-id="${item.id}" data-name="${item.name}" class="b3-list-item b3-list-item--narrow${isMobile() ? "" : " b3-list-item--hide-action"}">
+    return `<li data-id="${item.id}" data-name="${escapeAttr(item.name)}" class="b3-list-item b3-list-item--narrow${isMobile() ? "" : " b3-list-item--hide-action"}">
 <span class="b3-list-item__text">
-    <span>${item.name}</span>
+    <span>${escapeHtml(item.name)}</span>
     <span class="b3-list-item__meta">${item.size}</span>
 </span>
 <span data-type="rename" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.rename}">
@@ -48,7 +48,13 @@ export const makeCard = (ids: string[]) => {
         const dialog = new Dialog({
             width: isMobile() ? "90vw" : "50vw",
             height: "70vh",
-            title: window.siyuan.languages.riffCard,
+            title: `<div class="fn__flex">
+<div class="fn__flex-1">${window.siyuan.languages.riffCard}</div>
+<span data-type="viewall" class="b3-button b3-button--cancel b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.cardPreview}">
+    <svg><use xlink:href="#iconEye"></use></svg>
+    ${window.siyuan.languages.all}
+</span>
+</div>`,
             content: `<div class="b3-dialog__content fn__flex-column" style="box-sizing: border-box;height: 100%">
     <div class="fn__flex">
         <input class="b3-text-field fn__flex-1">
@@ -118,12 +124,17 @@ export const makeCard = (ids: string[]) => {
                     event.preventDefault();
                     break;
                 } else if (type === "view") {
-                    viewCards(target.parentElement.getAttribute("data-id"), target.parentElement.getAttribute("data-name"), (removeResponse) => {
+                    viewCards(target.parentElement.getAttribute("data-id"), escapeHtml(target.parentElement.getAttribute("data-name")),"", (removeResponse) => {
                         target.parentElement.outerHTML = genCardItem(removeResponse.data);
                     });
                     event.stopPropagation();
                     event.preventDefault();
                     break;
+                } else if (type === "viewall") {
+                    viewCards("", window.siyuan.languages.all, "");
+                    event.stopPropagation();
+                    event.preventDefault();
+                    break;
                 } else if (type === "rename") {
                     const renameDialog = new Dialog({
                         title: window.siyuan.languages.rename,
diff --git a/app/src/card/viewCards.ts b/app/src/card/viewCards.ts
index 96dbcf3fc..3205c14d4 100644
--- a/app/src/card/viewCards.ts
+++ b/app/src/card/viewCards.ts
@@ -10,10 +10,10 @@ import {addLoading} from "../protyle/ui/initUI";
 import {Constants} from "../constants";
 import {disabledProtyle, onGet} from "../protyle/util/onGet";
 
-export const viewCards = (deckID: string, title: string, cb?: (response: IWebSocketData) => void, isDoc = false) => {
+export const viewCards = (deckID: string, title: string, deckType: "Tree" | "" | "Notebook", cb?: (response: IWebSocketData) => void) => {
     let pageIndex = 1;
     let edit: Protyle;
-    fetchPost(isDoc ? "/api/riff/getTreeRiffCards" : "/api/riff/getRiffCards", {
+    fetchPost(`/api/riff/get${deckType}RiffCards`, {
         id: deckID,
         page: pageIndex
     }, (response) => {
@@ -119,7 +119,7 @@ export const viewCards = (deckID: string, title: string, cb?: (response: IWebSoc
                     break;
                 } else if (type === "remove") {
                     fetchPost("/api/riff/removeRiffCards", {
-                        deckID: isDoc ? Constants.QUICK_DECK_ID : deckID,
+                        deckID: deckType === "" ? deckID : Constants.QUICK_DECK_ID,
                         blockIDs: [target.getAttribute("data-id")]
                     }, (removeResponse) => {
                         let nextElment = target.parentElement.nextElementSibling;
diff --git a/app/src/menus/navigation.ts b/app/src/menus/navigation.ts
index 97277becb..5a350ed64 100644
--- a/app/src/menus/navigation.ts
+++ b/app/src/menus/navigation.ts
@@ -29,6 +29,7 @@ import {openNewWindowById} from "../window/openNewWindow";
 import {openCardByData} from "../card/openCard";
 import {escapeHtml} from "../util/escape";
 import {makeCard} from "../card/makeCard";
+import {viewCards} from "../card/viewCards";
 
 const initMultiMenu = (selectItemElements: NodeListOf<Element>) => {
     const fileItemElement = Array.from(selectItemElements).find(item => {
@@ -127,6 +128,12 @@ export const initNavigationMenu = (liElement: HTMLElement) => {
                     openCardByData(response.data, `<span data-notebookid="${notebookId}" class="fn__flex-center">${escapeHtml(name)}</span>`);
                 });
             }
+        },{
+            iconHTML: Constants.ZWSP,
+            label: window.siyuan.languages.mgmt,
+            click: () => {
+                viewCards(notebookId, name, "Notebook");
+            }
         }],
     }).element);
     /// #if !MOBILE
@@ -321,9 +328,15 @@ export const initFileMenu = (notebookId: string, pathString: string, liElement:
                 label: window.siyuan.languages.spaceRepetition,
                 click: () => {
                     fetchPost("/api/riff/getTreeRiffDueCards", {rootID: id}, (response) => {
-                        openCardByData(response.data, `<span data-id="${id}"  class="fn__flex-center">${escapeHtml(name)}</span>`);
+                        openCardByData(response.data, `<span data-id="${id}"  class="fn__flex-center">${name}</span>`);
                     });
                 }
+            }, {
+                iconHTML: Constants.ZWSP,
+                label: window.siyuan.languages.mgmt,
+                click: () => {
+                    viewCards(id, name, "Tree");
+                }
             }, {
                 iconHTML: Constants.ZWSP,
                 label: window.siyuan.languages.addToDeck,
diff --git a/app/src/protyle/header/Title.ts b/app/src/protyle/header/Title.ts
index 1c26711e2..b10fb7544 100644
--- a/app/src/protyle/header/Title.ts
+++ b/app/src/protyle/header/Title.ts
@@ -35,6 +35,7 @@ import {hideTooltip} from "../../dialog/tooltip";
 import {transferBlockRef} from "../../menus/block";
 import {openCardByData} from "../../card/openCard";
 import {makeCard, quickMakeCard} from "../../card/makeCard";
+import {viewCards} from "../../card/viewCards";
 
 export class Title {
     public element: HTMLElement;
@@ -374,6 +375,12 @@ export class Title {
                             openCardByData(response.data, `<span data-id="${protyle.block.rootID}"  class="fn__flex-center">${escapeHtml(this.editElement.textContent)}</span>`);
                         });
                     }
+                }, {
+                    iconHTML: Constants.ZWSP,
+                    label: window.siyuan.languages.mgmt,
+                    click: () => {
+                        viewCards(protyle.block.rootID, escapeHtml(this.editElement.textContent), "Tree");
+                    }
                 }, {
                     iconHTML: Constants.ZWSP,
                     label: window.siyuan.languages.quickMakeCard,