diff --git a/web/src/components/ArchivedMemo.tsx b/web/src/components/ArchivedMemo.tsx
index 297f01e1..7ca82492 100644
--- a/web/src/components/ArchivedMemo.tsx
+++ b/web/src/components/ArchivedMemo.tsx
@@ -1,9 +1,9 @@
+import { Tooltip } from "@mui/joy";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { useMemoStore } from "@/store/module";
 import { getDateTimeString } from "@/helpers/datetime";
 import useToggle from "@/hooks/useToggle";
-import Tooltip from "./kit/Tooltip";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
@@ -59,12 +59,12 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
           <span className="time-text">{getDateTimeString(memo.updatedTs)}</span>
         </div>
         <div className="flex flex-row justify-end items-center gap-x-2">
-          <Tooltip title={t("common.restore")} side="top">
+          <Tooltip title={t("common.restore")} placement="top">
             <button onClick={handleRestoreMemoClick}>
               <Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
             </button>
           </Tooltip>
-          <Tooltip title={t("common.delete")} side="top">
+          <Tooltip title={t("common.delete")} placement="top">
             <button
               onClick={handleDeleteMemoClick}
               className={`text-gray-500 dark:text-gray-400 ${showConfirmDeleteBtn ? "text-red-600" : ""}`}
diff --git a/web/src/components/Memo.tsx b/web/src/components/Memo.tsx
index 02fc040a..2e770ed4 100644
--- a/web/src/components/Memo.tsx
+++ b/web/src/components/Memo.tsx
@@ -1,3 +1,4 @@
+import { Divider, Tooltip } from "@mui/joy";
 import { isEqual, uniqWith } from "lodash-es";
 import { memo, useEffect, useRef, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -7,8 +8,6 @@ import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString } from "@/helpers/datetime";
 import { useMemoCacheStore } from "@/store/zustand";
-import Tooltip from "./kit/Tooltip";
-import Divider from "./kit/Divider";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
@@ -226,7 +225,7 @@ const Memo: React.FC<Props> = (props: Props) => {
           {!isVisitorMode && (
             <div className="btns-container space-x-2">
               {memo.visibility !== "PRIVATE" && (
-                <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} side="top">
+                <Tooltip title={t(`memo.visibility.${memo.visibility.toLowerCase()}`)} placement="top">
                   <div onClick={() => handleMemoVisibilityClick(memo.visibility)}>
                     {memo.visibility === "PUBLIC" ? (
                       <Icon.Globe2 className="w-4 h-auto cursor-pointer rounded text-green-600" />
@@ -258,7 +257,7 @@ const Memo: React.FC<Props> = (props: Props) => {
                     <Icon.Link className="w-4 h-auto mr-2" />
                     Mark
                   </span>
-                  <Divider />
+                  <Divider className="!my-1" />
                   <span className="btn text-orange-500" onClick={handleArchiveMemoClick}>
                     <Icon.Archive className="w-4 h-auto mr-2" />
                     {t("common.archive")}
diff --git a/web/src/components/Settings/MyAccountSection.tsx b/web/src/components/Settings/MyAccountSection.tsx
index 352612cb..7bb13581 100644
--- a/web/src/components/Settings/MyAccountSection.tsx
+++ b/web/src/components/Settings/MyAccountSection.tsx
@@ -37,7 +37,7 @@ const MyAccountSection = () => {
           <span className="text-2xl leading-10 font-medium">{user.nickname}</span>
           <span className="text-base ml-1 text-gray-500 leading-10 dark:text-gray-400">({user.username})</span>
         </div>
-        <div className="flex flex-row justify-start items-center text-base text-gray-600">{user.email}</div>
+        <div className="flex flex-row justify-start items-center text-base text-gray-600 dark:text-gray-400">{user.email}</div>
         <div className="w-full flex flex-row justify-start items-center mt-2 space-x-2">
           <Button variant="outlined" onClick={showUpdateAccountDialog}>
             {t("common.edit")}
diff --git a/web/src/components/UpgradeVersionBanner.tsx b/web/src/components/UpgradeVersionBanner.tsx
index ba47726b..ecc9c66f 100644
--- a/web/src/components/UpgradeVersionBanner.tsx
+++ b/web/src/components/UpgradeVersionBanner.tsx
@@ -4,7 +4,6 @@ import * as api from "@/helpers/api";
 import storage from "@/helpers/storage";
 import { useGlobalStore } from "@/store/module";
 import Icon from "./Icon";
-import Tooltip from "./kit/Tooltip";
 
 interface State {
   latestVersion: string;
@@ -51,11 +50,9 @@ const UpgradeVersionView: React.FC = () => {
       >
         ✨ New version: v{state.latestVersion}
       </a>
-      <Tooltip title="Ignore upgrade" side="top">
-        <button className="ml-1 opacity-60 text-gray-600 hover:opacity-100" onClick={onSkip}>
-          <Icon.X className="w-4 h-auto" />
-        </button>
-      </Tooltip>
+      <button className="ml-1 opacity-60 text-gray-600 hover:opacity-100" onClick={onSkip}>
+        <Icon.X className="w-4 h-auto" />
+      </button>
     </div>
   );
 };
diff --git a/web/src/components/kit/Divider.tsx b/web/src/components/kit/Divider.tsx
deleted file mode 100644
index cafbcfd7..00000000
--- a/web/src/components/kit/Divider.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-interface Props {
-  className?: string;
-}
-
-const Divider = ({ className }: Props) => {
-  return <hr className={`${className} block my-1 border-gray-200 dark:border-gray-600`} />;
-};
-
-export default Divider;
diff --git a/web/src/components/kit/Tooltip.tsx b/web/src/components/kit/Tooltip.tsx
deleted file mode 100644
index c4e73d83..00000000
--- a/web/src/components/kit/Tooltip.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as TooltipUI from "@radix-ui/react-tooltip";
-
-type Side = "top" | "right" | "bottom" | "left";
-
-interface Props {
-  title: string;
-  side: Side;
-  children: React.ReactNode;
-}
-
-const Tooltip = (props: Props) => {
-  const { title, side, children } = props;
-
-  return (
-    <TooltipUI.Provider delayDuration={0} skipDelayDuration={0}>
-      <TooltipUI.Root>
-        <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
-        <TooltipUI.Portal>
-          <TooltipUI.Content
-            className="bg-zinc-800 text-gray-300 dark:bg-black shadow text-sm p-1 rounded-md z-[99999]"
-            side={side}
-            sideOffset={6}
-          >
-            {title}
-          </TooltipUI.Content>
-        </TooltipUI.Portal>
-      </TooltipUI.Root>
-    </TooltipUI.Provider>
-  );
-};
-
-export default Tooltip;