diff --git a/web/src/components/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebarDrawer.tsx
index bfe88912..e48691dd 100644
--- a/web/src/components/HomeSidebarDrawer.tsx
+++ b/web/src/components/HomeSidebarDrawer.tsx
@@ -25,7 +25,7 @@ const HomeSidebarDrawer = () => {
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Search className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
-      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+      <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full px-4">
           <HomeSidebar />
         </div>
diff --git a/web/src/components/MemoList.tsx b/web/src/components/MemoList.tsx
index 6ebdb31d..c4da1cb8 100644
--- a/web/src/components/MemoList.tsx
+++ b/web/src/components/MemoList.tsx
@@ -116,12 +116,12 @@ const MemoList: React.FC = () => {
         </div>
       ) : (
         <div className="flex flex-col justify-start items-center w-full my-6">
-          <div className="text-sm text-gray-400 italic">
+          <div className="text-gray-400 italic">
             {loadingStatus === "complete" ? (
               sortedMemos.length === 0 && (
                 <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
                   <Empty />
-                  <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
+                  <p className="mt-2 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
                 </div>
               )
             ) : (
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index a28d02ec..6f2b1dc8 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -1,19 +1,18 @@
 import { useState } from "react";
-import HeaderDrawer from "./HeaderDrawer";
-import HomeSidebarDrawer from "./HomeSidebarDrawer";
+import NavigationDrawer from "./NavigationDrawer";
 
 interface Props {
-  showSearch?: boolean;
+  children?: React.ReactNode;
 }
 
 const MobileHeader = (props: Props) => {
-  const { showSearch } = props;
+  const { children } = props;
   const [titleText] = useState("MEMOS");
 
   return (
     <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur bg-zinc-100 dark:bg-zinc-800 bg-opacity-70 flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
-        <HeaderDrawer />
+        <NavigationDrawer />
         <span
           className="font-bold text-lg leading-10 mr-1 text-ellipsis shrink-0 cursor-pointer overflow-hidden text-gray-700 dark:text-gray-200"
           onClick={() => location.reload()}
@@ -21,7 +20,7 @@ const MobileHeader = (props: Props) => {
           {titleText}
         </span>
       </div>
-      <div className={`flex flex-row justify-end items-center pr-1`}>{showSearch && <HomeSidebarDrawer />}</div>
+      <div className="flex flex-row justify-end items-center">{children}</div>
     </div>
   );
 };
diff --git a/web/src/components/Header.tsx b/web/src/components/Navigation.tsx
similarity index 98%
rename from web/src/components/Header.tsx
rename to web/src/components/Navigation.tsx
index 3b23cbd0..38723dd8 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Navigation.tsx
@@ -15,7 +15,7 @@ interface NavLinkItem {
   icon: React.ReactNode;
 }
 
-const Header = () => {
+const Navigation = () => {
   const t = useTranslate();
   const user = useCurrentUser();
   const inboxStore = useInboxStore();
@@ -123,4 +123,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default Navigation;
diff --git a/web/src/components/HeaderDrawer.tsx b/web/src/components/NavigationDrawer.tsx
similarity index 80%
rename from web/src/components/HeaderDrawer.tsx
rename to web/src/components/NavigationDrawer.tsx
index d71b3813..21fc7a39 100644
--- a/web/src/components/HeaderDrawer.tsx
+++ b/web/src/components/NavigationDrawer.tsx
@@ -1,10 +1,10 @@
 import { Drawer, IconButton } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import Header from "./Header";
 import Icon from "./Icon";
+import Navigation from "./Navigation";
 
-const HeaderDrawer = () => {
+const NavigationDrawer = () => {
   const location = useLocation();
   const [open, setOpen] = useState(false);
 
@@ -25,13 +25,13 @@ const HeaderDrawer = () => {
       <IconButton onClick={toggleDrawer(true)}>
         <Icon.Menu className="w-5 h-auto dark:text-gray-200" />
       </IconButton>
-      <Drawer anchor="left" open={open} onClose={toggleDrawer(false)}>
+      <Drawer anchor="left" size="sm" open={open} onClose={toggleDrawer(false)}>
         <div className="w-full px-4">
-          <Header />
+          <Navigation />
         </div>
       </Drawer>
     </div>
   );
 };
 
-export default HeaderDrawer;
+export default NavigationDrawer;
diff --git a/web/src/components/UsageHeatMap.tsx b/web/src/components/UsageHeatMap.tsx
index 7fe759e8..34610062 100644
--- a/web/src/components/UsageHeatMap.tsx
+++ b/web/src/components/UsageHeatMap.tsx
@@ -52,10 +52,6 @@ const UsageHeatMap = () => {
   const [currentStat, setCurrentStat] = useState<DailyUsageStat | null>(null);
   const containerElRef = useRef<HTMLDivElement>(null);
 
-  if (!user) {
-    return;
-  }
-
   useEffect(() => {
     userV1Store.getOrFetchUserByUsername(extractUsernameFromName(user.name)).then((user) => {
       if (!user) {
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 73380b1c..3b6470b5 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "react-router-dom";
 import DemoBanner from "@/components/DemoBanner";
-import Header from "@/components/Header";
+import Navigation from "@/components/Navigation";
 
 function Root() {
   return (
@@ -10,7 +10,7 @@ function Root() {
       </div>
       <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <div className="hidden sm:block sticky top-0 left-0 w-56">
-          <Header />
+          <Navigation />
         </div>
         <main className="w-full min-h-screen sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 0e593b11..2b8f4c33 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -1,4 +1,5 @@
 import HomeSidebar from "@/components/HomeSidebar";
+import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
 import MemoEditor from "@/components/MemoEditor";
 import MemoList from "@/components/MemoList";
 import MobileHeader from "@/components/MobileHeader";
@@ -7,7 +8,9 @@ const Home = () => {
   return (
     <div className="w-full flex flex-row justify-start items-start">
       <div className="w-full px-4 md:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
-        <MobileHeader showSearch={true} />
+        <MobileHeader>
+          <HomeSidebarDrawer />
+        </MobileHeader>
         <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
         <MemoList />
       </div>
diff --git a/web/src/router/index.tsx b/web/src/router/index.tsx
index cba2eabe..4c886f67 100644
--- a/web/src/router/index.tsx
+++ b/web/src/router/index.tsx
@@ -23,7 +23,7 @@ const initialGlobalStateLoader = async () => {
   try {
     await initialGlobalState();
   } catch (error) {
-    // do nth
+    // do nothing.
   }
   return null;
 };