diff --git a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
index 011aa929..52eeb0b3 100644
--- a/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
+++ b/web/src/components/MemoEditor/ActionButton/TagSelector.tsx
@@ -11,8 +11,8 @@ const TagSelector = (props: Props) => {
   const tags = tagStore.state.tags;
 
   return (
-    <div className="action-btn relative group">
-      <Icon.Hash className="icon-img" />
+    <div className="relative group flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
+      <Icon.Hash className="w-5 h-5 mx-auto" />
       <div className="hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600 group-hover:flex">
         {tags.length > 0 ? (
           tags.map((tag) => {
diff --git a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
index d059e4f9..fa9de672 100644
--- a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
+++ b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
@@ -94,7 +94,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!isVisibleRef.current || !position) return null;
   return (
     <div
-      className="tag-suggestions z-20 p-1 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
+      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
       style={{ left: position.left, top: position.top + position.height }}
     >
       {suggestionsRef.current.map((tag, i) => (
diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx
index 4f4fb8b3..41fa11eb 100644
--- a/web/src/components/MemoEditor/Editor/index.tsx
+++ b/web/src/components/MemoEditor/Editor/index.tsx
@@ -1,6 +1,6 @@
+import classNames from "classnames";
 import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 import TagSuggestions from "./TagSuggestions";
-import "@/less/editor.less";
 
 export interface EditorRefActions {
   focus: FunctionType;
@@ -145,9 +145,9 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
   }, []);
 
   return (
-    <div className={"common-editor-wrapper " + className}>
+    <div className={classNames("flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200", className)}>
       <textarea
-        className="common-editor-inputer"
+        className="w-full h-full max-h-[300px] my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break"
         rows={1}
         placeholder={placeholder}
         ref={editorRef}
diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx
index b0277042..f05ae465 100644
--- a/web/src/components/MemoEditor/index.tsx
+++ b/web/src/components/MemoEditor/index.tsx
@@ -1,9 +1,10 @@
+import { Select, Option, Button } from "@mui/joy";
 import { isNumber, last, uniq } from "lodash-es";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import useLocalStorage from "react-use/lib/useLocalStorage";
-import { TAB_SPACE_WIDTH, UNKNOWN_ID } from "@/helpers/consts";
+import { TAB_SPACE_WIDTH, UNKNOWN_ID, VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
 import { clearContentQueryParam } from "@/helpers/utils";
 import { getMatchedNodes } from "@/labs/marked";
 import { useFilterStore, useGlobalStore, useMemoStore, useResourceStore, useTagStore, useUserStore } from "@/store/module";
@@ -11,12 +12,11 @@ import { Resource } from "@/types/proto/api/v2/resource_service";
 import { useTranslate } from "@/utils/i18n";
 import showCreateResourceDialog from "../CreateResourceDialog";
 import Icon from "../Icon";
-import MemoVisibilitySelector from "./ActionButton/MemoVisibilitySelector";
+import VisibilityIcon from "../VisibilityIcon";
 import TagSelector from "./ActionButton/TagSelector";
 import Editor, { EditorRefActions } from "./Editor";
 import RelationListView from "./RelationListView";
 import ResourceListView from "./ResourceListView";
-import "@/less/memo-editor.less";
 
 const listItemSymbolList = ["- [ ] ", "- [x] ", "- [X] ", "* ", "- "];
 const emptyOlReg = /^(\d+)\. $/;
@@ -378,7 +378,7 @@ const MemoEditor = (props: Props) => {
 
   const editorConfig = useMemo(
     () => ({
-      className: `memo-editor`,
+      className: "",
       initialContent: "",
       placeholder: t("editor.placeholder"),
       onContentChange: handleContentChange,
@@ -391,7 +391,9 @@ const MemoEditor = (props: Props) => {
 
   return (
     <div
-      className={`${className ?? ""} memo-editor-container`}
+      className={`${
+        className ?? ""
+      } relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 pt-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600`}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onDrop={handleDropEvent}
@@ -400,28 +402,45 @@ const MemoEditor = (props: Props) => {
       onCompositionEnd={() => setIsInIME(false)}
     >
       <Editor ref={editorRef} {...editorConfig} />
-      <div className="common-tools-wrapper">
-        <div className="common-tools-container">
+      <div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
+        <div className="flex flex-row justify-start items-center">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
-          <button className="action-btn">
-            <Icon.Paperclip className="icon-img" onClick={handleUploadFileBtnClick} />
+          <button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
+            <Icon.Paperclip className="w-5 h-5 mx-auto" onClick={handleUploadFileBtnClick} />
           </button>
-          <button className="action-btn">
-            <Icon.CheckSquare className="icon-img" onClick={handleCheckBoxBtnClick} />
+          <button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
+            <Icon.CheckSquare className="w-5 h-5 mx-auto" onClick={handleCheckBoxBtnClick} />
           </button>
-          <button className="action-btn">
-            <Icon.Code className="icon-img" onClick={handleCodeBlockBtnClick} />
+          <button className="flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow">
+            <Icon.Code className="w-5 h-5 mx-auto" onClick={handleCodeBlockBtnClick} />
           </button>
         </div>
       </div>
       <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
       <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
-      <div className="editor-footer-container">
-        <MemoVisibilitySelector value={state.memoVisibility} onChange={handleMemoVisibilityChange} />
-        <div className="buttons-container">
-          <button className="action-btn confirm-btn" disabled={!allowSave} onClick={handleSaveBtnClick}>
+      <div className="w-full flex flex-row justify-between items-center py-3 mt-2 border-t border-t-gray-100 dark:border-t-zinc-500">
+        <div className="relative flex flex-row justify-start items-center" onFocus={(e) => e.stopPropagation()}>
+          <Select
+            variant="plain"
+            value={state.memoVisibility}
+            startDecorator={<VisibilityIcon visibility={state.memoVisibility} />}
+            onChange={(_, visibility) => {
+              if (visibility) {
+                handleMemoVisibilityChange(visibility);
+              }
+            }}
+          >
+            {VISIBILITY_SELECTOR_ITEMS.map((item) => (
+              <Option key={item.value} value={item.value} className="whitespace-nowrap">
+                {item.text}
+              </Option>
+            ))}
+          </Select>
+        </div>
+        <div className="shrink-0 flex flex-row justify-end items-center">
+          <Button color="success" disabled={!allowSave} onClick={handleSaveBtnClick}>
             {t("editor.save")}
-          </button>
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web/src/helpers/consts.ts b/web/src/helpers/consts.ts
index 16229ea0..907e2ab1 100644
--- a/web/src/helpers/consts.ts
+++ b/web/src/helpers/consts.ts
@@ -1,6 +1,5 @@
 // UNKNOWN_ID is the symbol for unknown id
 export const UNKNOWN_ID = -1;
-export const UNKNOWN_USERNAME = "";
 
 // default animation duration
 export const ANIMATION_DURATION = 200;
diff --git a/web/src/less/editor.less b/web/src/less/editor.less
deleted file mode 100644
index d778b21d..00000000
--- a/web/src/less/editor.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.common-editor-wrapper {
-  @apply flex flex-col justify-start items-start relative w-full h-auto bg-white;
-
-  > .common-editor-inputer {
-    @apply w-full h-full ~"max-h-[300px]" my-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent outline-none whitespace-pre-wrap word-break;
-
-    &::placeholder {
-      padding-left: 2px;
-    }
-
-    &:focus {
-      &::placeholder {
-        color: lightgray;
-      }
-    }
-  }
-}
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
deleted file mode 100644
index 93aabd1a..00000000
--- a/web/src/less/memo-editor.less
+++ /dev/null
@@ -1,56 +0,0 @@
-.memo-editor-container {
-  @apply relative w-full flex flex-col justify-start items-start bg-white dark:bg-zinc-700 px-4 rounded-lg border-2 border-gray-200 dark:border-zinc-600;
-
-  .tag-suggestions {
-    margin-left: -10px;
-    margin-top: 2px;
-  }
-
-  > .memo-editor {
-    @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
-  }
-
-  > .common-tools-wrapper {
-    @apply relative w-full flex flex-row justify-between items-center pt-2 z-1;
-
-    > .common-tools-container {
-      @apply flex flex-row justify-start items-center;
-
-      > .action-btn {
-        @apply flex flex-row justify-center items-center p-1 w-auto h-auto mr-1 select-none rounded cursor-pointer text-gray-600 dark:text-gray-400 hover:bg-gray-300 dark:hover:bg-zinc-800 hover:shadow;
-
-        > .icon-img {
-          @apply w-5 h-5 mx-auto flex flex-row justify-center items-center;
-        }
-
-        > .tip-text {
-          @apply hidden ml-1 text-xs leading-5 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-zinc-500 rounded-xl px-2;
-        }
-      }
-    }
-  }
-
-  > .editor-footer-container {
-    @apply w-full flex flex-row justify-between items-center border-t border-t-gray-100 dark:border-t-zinc-500 py-3 mt-2;
-
-    > .visibility-selector {
-      @apply h-8;
-
-      > .current-value-container {
-        @apply rounded-xl px-3;
-
-        > .value-text {
-          @apply text-sm w-full mr-1;
-        }
-      }
-    }
-
-    > .buttons-container {
-      @apply grow-0 shrink-0 flex flex-row justify-end items-center;
-
-      > .confirm-btn {
-        @apply border-none select-none rounded-xl flex flex-row justify-center items-center shadow cursor-pointer px-4 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
-      }
-    }
-  }
-}