diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss
index 042910b05..756181d1b 100644
--- a/app/src/assets/scss/_dialog.scss
+++ b/app/src/assets/scss/_dialog.scss
@@ -121,9 +121,17 @@
     font-size: 16px;
   }
 
+  &__cardaction .b3-button {
+    margin-top: 8px;
+  }
+
   &__cardblock {
     .protyle-wysiwyg {
       padding: 16px;
+
+      [data-node-id][custom-riff-decks] {
+        box-shadow: none;
+      }
     }
 
     &--show span[data-type~=mark] {
diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/_wysiwyg.scss
index 82cfceb9e..01df75a47 100644
--- a/app/src/assets/scss/_wysiwyg.scss
+++ b/app/src/assets/scss/_wysiwyg.scss
@@ -16,7 +16,7 @@
     position: relative;
 
     &[custom-riff-decks] {
-      box-shadow: 2px 0px 0px var(--b3-protyle-inline-mark-background);
+      box-shadow: 3px 0px 0px -1px var(--b3-protyle-inline-mark-background);
     }
 
     [spellcheck="false"] {
diff --git a/app/src/card/makeCard.ts b/app/src/card/makeCard.ts
index 6dfc8804f..6a82b755c 100644
--- a/app/src/card/makeCard.ts
+++ b/app/src/card/makeCard.ts
@@ -5,7 +5,7 @@ import {isMobile} from "../util/functions";
 import {hideMessage, showMessage} from "../dialog/message";
 
 const genCardItem = (item: { id: string, name: string }) => {
-    return `<li style="margin: 0 !important;" data-id="${item.id}" class="b3-list-item b3-list-item--hide-action">
+    return `<li style="margin: 0 !important;" data-id="${item.id}" class="b3-list-item${isMobile() ? "" : " b3-list-item--hide-action"}">
 <span class="b3-list-item__text">${item.name}</span>
 <span data-type="add" class="b3-list-item__action b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.addDeck}">
     <svg><use xlink:href="#iconAdd"></use></svg>
diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index d6ff8d39f..689094a55 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -29,16 +29,15 @@ export const openCard = () => {
     <div class="fn__hr"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
     <div class="b3-dialog__cardblock b3-dialog__cardblock--show fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
     <div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">${window.siyuan.languages.noDueCard}</div>
-    <div class="fn__hr"></div>
-    <div class="fn__flex${blocks.length === 0 ? " fn__none" : ""}" data-type="action">
+    <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}" style="flex-wrap: wrap" data-type="action">
         <button data-type="-1" class="b3-button">Show (S)</button>
-        <span class="fn__flex-1"></span>
+        <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="0" class="b3-button">Again (A)</button>
-        <span class="fn__flex-1"></span>
+        <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="1" class="b3-button">Hard (H)</button>
-        <span class="fn__flex-1"></span>
+        <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="2" class="b3-button">Good (G)</button>
-        <span class="fn__flex-1"></span>
+        <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="3" class="b3-button">Easy (E)</button>
     </div>
 </div>`,
@@ -101,7 +100,7 @@ export const openCard = () => {
                         type = "2"
                     } else if (event.detail === "e") {
                         type = "3"
-                    }else if (event.detail === "s") {
+                    } else if (event.detail === "s") {
                         type = "-1"
                     }
                 }
diff --git a/app/src/mobile/util/menu.ts b/app/src/mobile/util/menu.ts
index fc96440bd..0c834feef 100644
--- a/app/src/mobile/util/menu.ts
+++ b/app/src/mobile/util/menu.ts
@@ -14,6 +14,7 @@ import {confirmDialog} from "../../dialog/confirmDialog";
 import {openHistory} from "../../history/history";
 import {Dialog} from "../../dialog";
 import {syncGuide} from "../../sync/syncGuide";
+import {openCard} from "../../card/openCard";
 
 const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => {
     closePanel();
@@ -124,6 +125,9 @@ export const popMenu = () => {
 <div id="menuNewDaily" class="b3-list-item b3-list-item--big">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconCalendar"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.dailyNote}</span>
 </div>
+<div id="menuCard" class="b3-list-item b3-list-item--big">
+    <svg class="b3-list-item__graphic"><use xlink:href="#iconRiffCard"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.riffCard}</span>
+</div>
 <div class="b3-list-item b3-list-item--big" id="menuNewNotebook">
     <svg class="b3-list-item__graphic"><use xlink:href="#iconFilesRoot"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.newNotebook}</span>
 </div>
@@ -416,6 +420,11 @@ ${accountHTML}
                     event.preventDefault();
                     event.stopPropagation();
                     break;
+                } else if (target.id === "menuCard") {
+                    openCard();
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
                 } else if (target.id === "menuNewNotebook") {
                     newNotebook();
                     event.preventDefault();