diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index d30f1b8f9..21e5be9a4 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -1,39 +1,112 @@
 import {Dialog} from "../dialog";
 import {fetchPost} from "../util/fetch";
 import {isMobile} from "../util/functions";
+import {Protyle} from "../protyle";
+import {Constants} from "../constants";
+import {disabledProtyle, onGet} from "../protyle/util/onGet";
 
 export const openCard = () => {
     let decksHTML = '<option value="">All</option>';
     fetchPost("/api/riff/getRiffDecks", {}, (response) => {
-        response.data.forEach((deck:{id:string, name:string}) => {
+        response.data.forEach((deck: { id: string, name: string }) => {
             decksHTML += `<option value="${deck.id}">${deck.name}</option>`;
         })
-        fetchPost("/api/riff/getRiffDueCards", {deckID:""}, (cardsResponse) => {
+        fetchPost("/api/riff/getRiffDueCards", {deckID: ""}, (cardsResponse) => {
+            let blocks = cardsResponse.data;
+            let countHTML = ''
+            let index = 0
+            if (blocks.length > 0) {
+                countHTML = `<span>1</span>/${blocks.length}`
+            } else {
+                countHTML = window.siyuan.languages.noDueCard
+            }
             const dialog = new Dialog({
                 title: window.siyuan.languages.riffCard,
-                content:`<div class="fn__flex-column">
+                content: `<div class="fn__flex-column b3-dialog__content" style="box-sizing: border-box">
     <div class="fn__flex">
-        <select class="b3-select">${decksHTML}</select>
+        <select class="b3-select fn__flex-1">${decksHTML}</select>
         <span class="fn__space"></span>
-        <div>${cardsResponse.data}</div>
+        <div class="ft__on-surface ft__smaller fn__flex-center" data-type="count">
+            ${countHTML}
+        </div>
     </div>
     <div class="fn__flex-1" data-type="render"></div>
     <div class="fn__flex">
-        <button class="b3-button">Again Rating</button>
+        <button data-type="0" class="b3-button b3-button--white">Again Rating (A)</button>
         <span class="fn__flex-1"></span>
-        <button class="b3-button">Hard</button>
+        <button data-type="1" class="b3-button b3-button--outline">Hard (H)</button>
         <span class="fn__flex-1"></span>
-        <button class="b3-button">Good</button>
+        <button data-type="2" class="b3-button b3-button--cancel">Good (G)</button>
         <span class="fn__flex-1"></span>
-        <button class="b3-button">Easy</button>
+        <button data-type="3" class="b3-button">Easy (E)</button>
     </div>
 </div>`,
                 width: isMobile() ? "80vw" : "50vw",
                 height: "70vh",
             })
+            const editor = new Protyle(dialog.element.querySelector("[data-type='render']") as HTMLElement, {
+                blockId: "",
+                action: [Constants.CB_GET_HISTORY],
+                render: {
+                    background: false,
+                    title: false,
+                    gutter: false,
+                    breadcrumb: false,
+                    breadcrumbDocName: false,
+                    breadcrumbContext: false,
+                },
+                typewriterMode: false
+            });
+            disabledProtyle(editor.protyle);
+            fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => {
+                onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
+            });
             dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom)
-            dialog.element.querySelector("select").addEventListener("change", (event) => {
-
+            const countElement = dialog.element.querySelector('[data-type="count"]')
+            const selectElement = dialog.element.querySelector("select")
+            selectElement.addEventListener("change", (event) => {
+                fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => {
+                    blocks = cardsChangeResponse.data;
+                    index = 0
+                    let countHTML = ''
+                    if (blocks.length > 0) {
+                        countHTML = `<span>1</span>/${blocks.length}`
+                    } else {
+                        countHTML = window.siyuan.languages.noDueCard
+                    }
+                    countElement.innerHTML = countHTML;
+                    fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => {
+                        onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
+                    });
+                })
+            })
+            dialog.element.addEventListener("click", (event) => {
+                let target = event.target as HTMLElement;
+                while (target && !target.isSameNode(dialog.element)) {
+                    const type = target.getAttribute("data-type");
+                    if (["0", "1", "2", "3"].includes(type)) {
+                        fetchPost("/api/riff/reviewRiffCard", {
+                            deckID: selectElement.value,
+                            blockID: blocks[index],
+                            rating: parseInt(type)
+                        }, (response) => {
+                            index++
+                            if (index > blocks.length - 1) {
+                                countElement.innerHTML = window.siyuan.languages.noDueCard
+                                editor.protyle.element.classList.add("fn__none")
+                                return;
+                            }
+                            countElement.firstElementChild.innerHTML = index.toString()
+                            fetchPost("/api/riff/renderRiffCard", {id: blocks[index]}, (response) => {
+                                onGet(response, editor.protyle, [Constants.CB_GET_HISTORY, Constants.CB_GET_HTML]);
+                            });
+                        })
+                        event.preventDefault();
+                        event.stopPropagation();
+                        break;
+                    }
+                    target = target.parentElement;
+                }
             })
         })
     })