diff --git a/web/src/components/Inbox/VersionUpdateMessage.tsx b/web/src/components/Inbox/VersionUpdateMessage.tsx
index f8baaee91..a4dae615d 100644
--- a/web/src/components/Inbox/VersionUpdateMessage.tsx
+++ b/web/src/components/Inbox/VersionUpdateMessage.tsx
@@ -62,7 +62,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
         className={classNames(
           "shrink-0 mt-2 p-2 rounded-full border",
           inbox.status === Inbox_Status.UNREAD
-            ? "border-green-600 text-green-600 bg-blue-50 dark:bg-zinc-800"
+            ? "border-blue-600 text-blue-600 bg-blue-50 dark:bg-zinc-800"
             : "border-gray-400 text-gray-400 bg-gray-50 dark:bg-zinc-800"
         )}
       >
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index b024ff8ce..2d0beb3a2 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -406,7 +406,12 @@ const MemoEditor = (props: Props) => {
           </Select>
         </div>
         <div className="shrink-0 flex flex-row justify-end items-center">
-          <Button color="success" disabled={!allowSave} loading={state.isRequesting} onClick={handleSaveBtnClick}>
+          <Button
+            disabled={!allowSave}
+            loading={state.isRequesting}
+            endDecorator={<Icon.Send className="w-4 h-auto" />}
+            onClick={handleSaveBtnClick}
+          >
             {t("editor.save")}
           </Button>
         </div>
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 29f514676..2a31560a6 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -196,7 +196,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
             <>
               <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               <Tooltip title={"Pinned"} placement="top">
-                <Icon.Bookmark className="w-4 h-auto text-green-600" />
+                <Icon.Bookmark className="w-4 h-auto text-amber-500" />
               </Tooltip>
             </>
           )}
diff --git a/web/src/components/TagList.tsx b/web/src/components/TagList.tsx
index 6ad64139f..95f48258d 100644
--- a/web/src/components/TagList.tsx
+++ b/web/src/components/TagList.tsx
@@ -122,7 +122,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
       >
         <div
           className={`flex flex-row justify-start items-center truncate shrink leading-5 mr-1 text-gray-600 dark:text-gray-400 ${
-            isActive && "text-green-600"
+            isActive && "!text-blue-600"
           }`}
         >
           <Icon.Hash className="w-4 h-auto shrink-0 opacity-60 mr-1" />
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 9cdcf417c..c7dd356e7 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,5 +1,7 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
 import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
@@ -70,9 +72,9 @@ const Explore = () => {
           )
         ) : (
           <div className="w-full flex flex-row justify-center items-center my-4">
-            <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+            <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
               {t("memo.fetch-more")}
-            </span>
+            </Button>
           </div>
         )}
       </div>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 47a64ab1e..b2bfe1c38 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,8 +1,10 @@
+import { Button } from "@mui/joy";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import HomeSidebar from "@/components/HomeSidebar";
 import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
+import Icon from "@/components/Icon";
 import MemoEditor from "@/components/MemoEditor";
 import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
@@ -82,9 +84,9 @@ const Home = () => {
               )
             ) : (
               <div className="w-full flex flex-row justify-center items-center my-4">
-                <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+                <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
                   {t("memo.fetch-more")}
-                </span>
+                </Button>
               </div>
             )}
           </div>
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index c719adaba..a40c6c016 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -1,7 +1,9 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
+import Icon from "@/components/Icon";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
@@ -109,9 +111,9 @@ const UserProfile = () => {
                 )
               ) : (
                 <div className="w-full flex flex-row justify-center items-center my-4">
-                  <span className="cursor-pointer text-sm italic text-gray-500  hover:text-green-600" onClick={fetchMemos}>
+                  <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}>
                     {t("memo.fetch-more")}
-                  </span>
+                  </Button>
                 </div>
               )}
             </>