diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 5052fc05e..12b9aedc0 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -165,12 +165,12 @@ const Memo: React.FC<Props> = (props: Props) => {
                   <span className="tip-text">Share</span>
                 </div>
               </div>
-              <span className="btn" onClick={handleShowMemoStoryDialog}>
-                View Story
-              </span>
               <span className="btn" onClick={handleMarkMemoClick}>
                 Mark
               </span>
+              <span className="btn" onClick={handleShowMemoStoryDialog}>
+                View Story
+              </span>
               <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
                 {showConfirmDeleteBtn ? "Delete!" : "Delete"}
               </span>
@@ -180,7 +180,7 @@ const Memo: React.FC<Props> = (props: Props) => {
       </div>
       <div
         ref={memoContainerRef}
-        className={`memo-content-text ${state.expandButtonStatus === 0 ? "!max-h-96 overflow-y-hidden truncate" : ""}`}
+        className={`memo-content-text ${state.expandButtonStatus === 0 ? "expanded" : ""}`}
         onClick={handleMemoContentClick}
         dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}
       ></div>
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index d2525af6d..22ec1b1cc 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -88,6 +88,13 @@
   > .memo-content-text {
     @apply w-full h-auto transition-all;
 
+    &.expanded {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 8;
+      overflow: hidden;
+    }
+
     .tag-span {
       @apply cursor-pointer hover:opacity-80;
     }