diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index b93e26fb..4507b684 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -7,7 +7,7 @@ import useLoading from "../hooks/useLoading";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
-import Selector from "./common/Selector";
+import Selector from "./base/Selector";
 import "../less/create-shortcut-dialog.less";
 
 interface Props extends DialogProps {
diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx
index 54b385fa..6a4abd54 100644
--- a/web/src/components/DailyReviewDialog.tsx
+++ b/web/src/components/DailyReviewDialog.tsx
@@ -7,7 +7,7 @@ import { DAILY_TIMESTAMP } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
-import DatePicker from "./common/DatePicker";
+import DatePicker from "./base/DatePicker";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import DailyMemo from "./DailyMemo";
 import "../less/daily-review-dialog.less";
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 45ac93e6..f8741ec9 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -16,7 +16,7 @@ import {
 import * as storage from "../helpers/storage";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
-import Selector from "./common/Selector";
+import Selector from "./base/Selector";
 import Editor, { EditorRefActions } from "./Editor/Editor";
 import ResourceIcon from "./ResourceIcon";
 import showResourcesSelectorDialog from "./ResourcesSelectorDialog";
diff --git a/web/src/components/MemoResources.tsx b/web/src/components/MemoResources.tsx
index adc3dcee..2c360d64 100644
--- a/web/src/components/MemoResources.tsx
+++ b/web/src/components/MemoResources.tsx
@@ -1,6 +1,6 @@
 import { absolutifyLink } from "../helpers/utils";
 import { getResourceUrl } from "../utils/resource";
-import SquareDiv from "./common/SquareDiv";
+import SquareDiv from "./base/SquareDiv";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import MemoResource from "./MemoResource";
 import "../less/memo-resources.less";
diff --git a/web/src/components/ResourcesDialog.tsx b/web/src/components/ResourcesDialog.tsx
index db608a85..aa8a64df 100644
--- a/web/src/components/ResourcesDialog.tsx
+++ b/web/src/components/ResourcesDialog.tsx
@@ -7,7 +7,7 @@ import { useResourceStore } from "../store/module";
 import { getResourceUrl } from "../utils/resource";
 import Icon from "./Icon";
 import toastHelper from "./Toast";
-import Dropdown from "./common/Dropdown";
+import Dropdown from "./base/Dropdown";
 import { generateDialog } from "./Dialog";
 import { showCommonDialog } from "./Dialog/CommonDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
diff --git a/web/src/components/Settings/MemberSection.tsx b/web/src/components/Settings/MemberSection.tsx
index ab1d3cab..cf9d040f 100644
--- a/web/src/components/Settings/MemberSection.tsx
+++ b/web/src/components/Settings/MemberSection.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useUserStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import "../../less/settings/member-section.less";
diff --git a/web/src/components/Settings/SSOSection.tsx b/web/src/components/Settings/SSOSection.tsx
index 8006cd15..91d381e3 100644
--- a/web/src/components/Settings/SSOSection.tsx
+++ b/web/src/components/Settings/SSOSection.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import * as api from "../../helpers/api";
 import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import toastHelper from "../Toast";
 
diff --git a/web/src/components/Settings/StorageSection.tsx b/web/src/components/Settings/StorageSection.tsx
index fc068aed..f28c63b6 100644
--- a/web/src/components/Settings/StorageSection.tsx
+++ b/web/src/components/Settings/StorageSection.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
-import Dropdown from "../common/Dropdown";
+import Dropdown from "../base/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import toastHelper from "../Toast";
 
diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx
index 8d615c32..0eab84de 100644
--- a/web/src/components/UsageHeatMap.tsx
+++ b/web/src/components/UsageHeatMap.tsx
@@ -98,15 +98,6 @@ const UsageHeatMap = () => {
 
   return (
     <div className="usage-heat-map-wrapper" ref={containerElRef}>
-      <div className="day-tip-text-container">
-        <span className="tip-text">{t("days.sun")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.tue")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.thu")}</span>
-        <span className="tip-text"></span>
-        <span className="tip-text">{t("days.sat")}</span>
-      </div>
       <div className="usage-heat-map">
         {allStat.map((v, i) => {
           const count = v.count;
@@ -139,10 +130,19 @@ const UsageHeatMap = () => {
         })}
         {nullCell.map((_, i) => (
           <div className="stat-wrapper" key={i}>
-            <span className="null"></span>
+            <span className="stat-container null"></span>
           </div>
         ))}
       </div>
+      <div className="day-tip-text-container">
+        <span className="tip-text">{t("days.sun")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.tue")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.thu")}</span>
+        <span className="tip-text"></span>
+        <span className="tip-text">{t("days.sat")}</span>
+      </div>
     </div>
   );
 };
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index a4653782..01f01065 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useUserStore } from "../store/module";
-import Dropdown from "./common/Dropdown";
+import Dropdown from "./base/Dropdown";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import UserAvatar from "./UserAvatar";
 import showSettingDialog from "./SettingDialog";
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/base/DatePicker.tsx
similarity index 100%
rename from web/src/components/common/DatePicker.tsx
rename to web/src/components/base/DatePicker.tsx
diff --git a/web/src/components/common/Dropdown.tsx b/web/src/components/base/Dropdown.tsx
similarity index 100%
rename from web/src/components/common/Dropdown.tsx
rename to web/src/components/base/Dropdown.tsx
diff --git a/web/src/components/base/README.md b/web/src/components/base/README.md
new file mode 100644
index 00000000..b121158b
--- /dev/null
+++ b/web/src/components/base/README.md
@@ -0,0 +1 @@
+# Base components in memos
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/base/Selector.tsx
similarity index 100%
rename from web/src/components/common/Selector.tsx
rename to web/src/components/base/Selector.tsx
diff --git a/web/src/components/common/SquareDiv.tsx b/web/src/components/base/SquareDiv.tsx
similarity index 100%
rename from web/src/components/common/SquareDiv.tsx
rename to web/src/components/base/SquareDiv.tsx
diff --git a/web/src/less/usage-heat-map.less b/web/src/less/usage-heat-map.less
index 8f200e41..df90d4cc 100644
--- a/web/src/less/usage-heat-map.less
+++ b/web/src/less/usage-heat-map.less
@@ -1,24 +1,9 @@
 .usage-heat-map-wrapper {
-  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pr-2 pb-3 shrink-0;
-
-  &:hover {
-    > .day-tip-text-container {
-      @apply visible;
-    }
-  }
-
-  > .day-tip-text-container {
-    @apply w-6 h-full grid grid-rows-7 invisible;
-
-    > .tip-text {
-      @apply pr-1 w-full h-full text-right font-mono text-gray-400;
-      font-size: 10px;
-    }
-  }
+  @apply flex flex-row justify-start items-center flex-nowrap w-full h-32 pl-6 pb-3 shrink-0;
 
   > .usage-heat-map {
     @apply h-full grid grid-rows-7;
-    width: 186px;
+    width: 196px;
     grid-template-columns: repeat(11, 1fr);
     grid-auto-flow: column;
 
@@ -47,9 +32,22 @@
         &.today {
           @apply border border-black dark:border-gray-400;
         }
+
+        &.null {
+          @apply opacity-40;
+        }
       }
     }
   }
+
+  > .day-tip-text-container {
+    @apply w-6 h-full grid grid-rows-7;
+
+    > .tip-text {
+      @apply pl-1 w-full h-full text-right font-mono text-gray-400;
+      font-size: 10px;
+    }
+  }
 }
 
 .usage-detail-container {