diff --git a/app/src/assets/scss/_snackbar.scss b/app/src/assets/scss/_snackbar.scss
index 1e6f7d9e7..42ff8cc4d 100644
--- a/app/src/assets/scss/_snackbar.scss
+++ b/app/src/assets/scss/_snackbar.scss
@@ -1,25 +1,37 @@
 .b3-snackbar {
-  //transform: translate3d(0, -100px, 0);
-  //transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
-
   margin-bottom: 16px;
   position: relative;
 
-  &:last-child {
-    margin-bottom: 0;
+  &--hide {
+    transform: translate3d(50vw, 0, 0);
+    transition: transform 0.52s cubic-bezier(0, 0, 0.2, 1) 0ms;
   }
 
   &s {
     position: fixed;
-    right: -2px;
-    top: 16px;
+    right: 12px;
+    top: 22px;
     z-index: 502;
     max-height: calc(100vh - 32px);
     display: flex;
     flex-direction: column;
+    transform: translate3d(50vw, 0, 0);
+    transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
+    opacity: 0;
+
+    &--show {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+
+    & > .b3-button {
+      align-self: flex-end;
+      margin-right: 18px;
+
+    }
 
     & > .fn__flex-1 {
-      padding: 0 18px;
+      padding: 0 18px 0 18px;
 
       &::-webkit-scrollbar {
         display: none;
diff --git a/app/src/assets/template/app/index.tpl b/app/src/assets/template/app/index.tpl
index e242aef84..fd62a534c 100644
--- a/app/src/assets/template/app/index.tpl
+++ b/app/src/assets/template/app/index.tpl
@@ -22,7 +22,7 @@
 <div id="dockBottom" class="dock"></div>
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
-<div id="message" class="b3-snackbars fn__none"></div>
+<div id="message" class="b3-snackbars"></div>
 <script>
   setTimeout(() => {
     const refreshElement = document.getElementById("loadingRefresh")
diff --git a/app/src/assets/template/desktop/index.tpl b/app/src/assets/template/desktop/index.tpl
index 297965937..0542a99ae 100644
--- a/app/src/assets/template/desktop/index.tpl
+++ b/app/src/assets/template/desktop/index.tpl
@@ -20,6 +20,6 @@
 <div id="dockBottom" class="dock"></div>
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
-<div id="message" class="b3-snackbars fn__none"></div>
+<div id="message" class="b3-snackbars"></div>
 </body>
 </html>
diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl
index a287e18d6..89af4f14a 100644
--- a/app/src/assets/template/mobile/index.tpl
+++ b/app/src/assets/template/mobile/index.tpl
@@ -50,6 +50,6 @@
 </div>
 <div id="commonMenu" class="b3-menu fn__none"></div>
 <div id="dragBg" style="z-index:199;pointer-events: none;" class="b3-dialog__scrim fn__none"></div>
-<div id="message" class="b3-snackbars fn__none"></div>
+<div id="message" class="b3-snackbars"></div>
 </body>
 </html>
diff --git a/app/src/dialog/message.ts b/app/src/dialog/message.ts
index 0f5ccfc1c..bee9ee578 100644
--- a/app/src/dialog/message.ts
+++ b/app/src/dialog/message.ts
@@ -3,8 +3,7 @@ import {genUUID} from "../util/genID";
 export const initMessage = () => {
     const messageElement = document.getElementById("message");
     messageElement.innerHTML = `<div class="fn__flex-1"></div>
-<div class="fn__hr fn__flex-shrink"></div>
-<button class="fn__flex-center b3-button b3-button--outline">
+<button class="b3-button b3-button--outline">
     <svg><use xlink:href="#iconTrashcan"></use></svg> ${window.siyuan.languages.clearMessage}
 </button>`;
     messageElement.addEventListener("click", (event) => {
@@ -15,7 +14,7 @@ export const initMessage = () => {
                 event.preventDefault();
                 break;
             } else if (target.isSameNode(messageElement.lastElementChild)) {
-                target.parentElement.classList.add("fn__none");
+                target.parentElement.classList.remove("b3-snackbars--show");
                 target.parentElement.firstElementChild.innerHTML = "";
                 event.preventDefault();
                 break;
@@ -37,14 +36,17 @@ export const showMessage = (message: string, timeout = 6000, type = "info", mess
     }
     const messagesElement = document.getElementById("message").firstElementChild;
     if (messagesElement.childElementCount === 0) {
-        messagesElement.parentElement.classList.remove("fn__none");
+        messagesElement.parentElement.classList.add("b3-snackbars--show");
     }
     messagesElement.insertAdjacentHTML("afterbegin", messageHTML + "</div>");
     if (messagesElement.firstElementChild.nextElementSibling &&
         messagesElement.firstElementChild.nextElementSibling.innerHTML === messagesElement.firstElementChild.innerHTML) {
         messagesElement.firstElementChild.nextElementSibling.remove();
     }
-    messagesElement.scrollTop = 0;
+    messagesElement.scrollTo({
+        top: 0,
+        behavior: "smooth"
+    });
     return id;
 };
 
@@ -52,9 +54,12 @@ export const hideMessage = (id: string) => {
     const messagesElement = document.getElementById("message").firstElementChild;
     const messageElement = messagesElement.querySelector(`[data-id="${id}"]`);
     if (messageElement) {
-        messageElement.remove();
-    }
-    if (messagesElement.childElementCount === 0) {
-        messagesElement.parentElement.classList.add("fn__none");
+        messageElement.classList.add("b3-snackbar--hide");
+        setTimeout(() => {
+            messageElement.remove();
+        }, 520);
+        if (messagesElement.childElementCount < 2) {
+            messagesElement.parentElement.classList.remove("b3-snackbars--show");
+        }
     }
 };