diff --git a/web/src/components/ActivityCalendar.tsx b/web/src/components/ActivityCalendar.tsx
index 429996bfd..106484a47 100644
--- a/web/src/components/ActivityCalendar.tsx
+++ b/web/src/components/ActivityCalendar.tsx
@@ -8,7 +8,7 @@ interface Props {
   month: string;
   data: Record<string, number>;
   onClick?: (date: string) => void;
-  selectedDate?: string; 
+  selectedDate?: string;
 }
 
 const getCellAdditionalStyles = (count: number, maxCount: number) => {
@@ -56,7 +56,7 @@ const ActivityCalendar = (props: Props) => {
         const count = data[date] || 0;
         const isToday = new Date().toDateString() === new Date(date).toDateString();
         const tooltipText = count ? t("memo.count-memos-in-date", { count: count, date: date }) : date;
-        const isSelected = date === selectedDate; 
+        const isSelected = date === selectedDate;
         return day ? (
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div
@@ -64,7 +64,7 @@ const ActivityCalendar = (props: Props) => {
                 "w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
                 getCellAdditionalStyles(count, maxCount),
                 isToday && "border-gray-600 dark:!border-gray-500",
-                isSelected && "bg-green-500 text-white", 
+                isSelected && "bg-green-500 text-white",
               )}
               onClick={() => count && onClick && onClick(date)}
             >
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 6e29f8baa..4ac280357 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -1,6 +1,7 @@
 import { Button, Divider, IconButton } from "@mui/joy";
 import classNames from "classnames";
 import { Fragment, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
 import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
@@ -19,7 +20,6 @@ import i18n from "@/i18n";
 import { useMemoList, useMemoStore } from "@/store/v1";
 import { Memo } from "@/types/proto/api/v2/memo_service";
 import { useTranslate } from "@/utils/i18n";
-import toast from "react-hot-toast";
 
 interface GroupedByMonthItem {
   // Format: 2021-1
@@ -67,79 +67,85 @@ const Timeline = () => {
     }
   };
   const handlePrevDay = () => {
-    if (!selectedDay) return; 
-  
+    if (!selectedDay) return;
+
     const currentDate = new Date(selectedDay);
-    currentDate.setUTCDate(currentDate.getUTCDate() - 1); 
-  
+    currentDate.setUTCDate(currentDate.getUTCDate() - 1);
+
     let found = false;
     while (currentDate >= new Date(Object.keys(activityStats).sort()[0])) {
-      const checkDateStr = currentDate.toISOString().substring(0, 10); 
+      const checkDateStr = currentDate.toISOString().substring(0, 10);
       if (activityStats[checkDateStr] && activityStats[checkDateStr] > 0) {
-        setSelectedDay(checkDateStr); 
+        setSelectedDay(checkDateStr);
         found = true;
         break;
       }
       currentDate.setUTCDate(currentDate.getUTCDate() - 1);
     }
-  
+
     if (!found) {
       toast.error(t("message.no-more-memos"));
     }
   };
   const handleNextDay = () => {
-    if (!selectedDay) return; 
-  
+    if (!selectedDay) return;
+
     const currentDate = new Date(selectedDay);
-    currentDate.setUTCDate(currentDate.getUTCDate() + 1); 
-  
+    currentDate.setUTCDate(currentDate.getUTCDate() + 1);
+
     let found = false;
     while (currentDate <= new Date(Object.keys(activityStats).sort().reverse()[0])) {
-      const checkDateStr = currentDate.toISOString().substring(0, 10); 
+      const checkDateStr = currentDate.toISOString().substring(0, 10);
       if (activityStats[checkDateStr] && activityStats[checkDateStr] > 0) {
-        setSelectedDay(checkDateStr); 
+        setSelectedDay(checkDateStr);
         found = true;
         break;
       }
       currentDate.setUTCDate(currentDate.getUTCDate() + 1);
-    }   
+    }
     if (!found) {
-      toast.error(t("message.no-more-memos")); 
+      toast.error(t("message.no-more-memos"));
     }
   };
 
-    const handlePrevMonth = () => {
-      if (!selectedDay) return;
-      const currentMonth = new Date(selectedDay);
-      currentMonth.setUTCMonth(currentMonth.getUTCMonth() - 1);
+  const handlePrevMonth = () => {
+    if (!selectedDay) return;
+    const currentMonth = new Date(selectedDay);
+    currentMonth.setUTCMonth(currentMonth.getUTCMonth() - 1);
 
-      const prevMonthStr = currentMonth.toISOString().substring(0, 7); 
-      const datesWithData = Object.keys(activityStats).filter(date => date.startsWith(prevMonthStr)).sort();
-      if (datesWithData.length > 0) {
-        setSelectedDay(datesWithData[0]);
+    const prevMonthStr = currentMonth.toISOString().substring(0, 7);
+    const datesWithData = Object.keys(activityStats)
+      .filter((date) => date.startsWith(prevMonthStr))
+      .sort();
+    if (datesWithData.length > 0) {
+      setSelectedDay(datesWithData[0]);
+    } else {
+      handlePrevDay();
+    }
+  };
+  const handleNextMonth = () => {
+    if (!selectedDay) return;
+    const currentMonth = new Date(selectedDay);
+    currentMonth.setUTCMonth(currentMonth.getUTCMonth() + 1);
+    const nextMonthStr = currentMonth.toISOString().substring(0, 7);
+    const datesWithData = Object.keys(activityStats)
+      .filter((date) => date.startsWith(nextMonthStr))
+      .sort();
+    if (datesWithData.length > 0) {
+      setSelectedDay(datesWithData[0]);
+    } else {
+      const currentMonthStr = selectedDay.substring(0, 7);
+      const datesInCurrentMonth = Object.keys(activityStats)
+        .filter((date) => date.startsWith(currentMonthStr))
+        .sort();
+      if (datesInCurrentMonth.length > 0 && selectedDay !== datesInCurrentMonth[datesInCurrentMonth.length - 1]) {
+        setSelectedDay(datesInCurrentMonth[datesInCurrentMonth.length - 1]);
       } else {
-        handlePrevDay()
+        toast.error(t("message.no-more-memos"));
       }
-    };
-    const handleNextMonth = () => {
-      if (!selectedDay) return;
-      const currentMonth = new Date(selectedDay);
-      currentMonth.setUTCMonth(currentMonth.getUTCMonth() + 1);
-      const nextMonthStr = currentMonth.toISOString().substring(0, 7); 
-      const datesWithData = Object.keys(activityStats).filter(date => date.startsWith(nextMonthStr)).sort();
-      if (datesWithData.length > 0) {
-        setSelectedDay(datesWithData[0]);
-      } else {
-        const currentMonthStr = selectedDay.substring(0, 7); 
-        const datesInCurrentMonth = Object.keys(activityStats).filter(date => date.startsWith(currentMonthStr)).sort();
-        if (datesInCurrentMonth.length > 0 && selectedDay !== datesInCurrentMonth[datesInCurrentMonth.length - 1]) {
-          setSelectedDay(datesInCurrentMonth[datesInCurrentMonth.length - 1]);
-        } else {
-          toast.error(t("message.no-more-memos"));
-        }
-      }
-    };
-  
+    }
+  };
+
   useEffect(() => {
     nextPageTokenRef.current = undefined;
     memoList.reset();
@@ -221,22 +227,22 @@ const Timeline = () => {
                 </div>
               </div>
               <div className="flex justify-end items-center gap-2">
-              { selectedDay && (
-              <div>
-                <IconButton variant="outlined" size="sm" onClick={()=>handlePrevMonth()}>
-                 <Icon.ChevronsLeft   className="w-5 h-auto" />
-                </IconButton>
-                <IconButton variant="outlined" size="sm" onClick={()=>handlePrevDay()}>
-                  <Icon.ChevronLeft   className="w-5 h-auto" />
-                </IconButton>
-                <IconButton variant="outlined" size="sm" onClick={()=>handleNextDay()}>
-                  <Icon.ChevronRight   className="w-5 h-auto" />
-                </IconButton>
-                <IconButton variant="outlined" size="sm" onClick={()=>handleNextMonth()}>
-                  <Icon.ChevronsRight  className="w-5 h-auto" />
-                </IconButton>
-              </div>
-              )}
+                {selectedDay && (
+                  <div>
+                    <IconButton variant="outlined" size="sm" onClick={() => handlePrevMonth()}>
+                      <Icon.ChevronsLeft className="w-5 h-auto" />
+                    </IconButton>
+                    <IconButton variant="outlined" size="sm" onClick={() => handlePrevDay()}>
+                      <Icon.ChevronLeft className="w-5 h-auto" />
+                    </IconButton>
+                    <IconButton variant="outlined" size="sm" onClick={() => handleNextDay()}>
+                      <Icon.ChevronRight className="w-5 h-auto" />
+                    </IconButton>
+                    <IconButton variant="outlined" size="sm" onClick={() => handleNextMonth()}>
+                      <Icon.ChevronsRight className="w-5 h-auto" />
+                    </IconButton>
+                  </div>
+                )}
 
                 <IconButton variant="outlined" size="sm" onClick={() => handleNewMemo()}>
                   <Icon.Plus className="w-5 h-auto" />
@@ -246,57 +252,64 @@ const Timeline = () => {
             <div className="w-full h-auto flex flex-col justify-start items-start">
               <MemoFilter className="px-2 my-4" />
 
-              {activityStats && Object.keys(activityStats).length > 0 && groupedByMonth.map((group, index) => (
-                <Fragment key={group.month}>
-                  <div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
-                    <div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2", "sticky")}>
-                      <div className={classNames("w-full flex flex-col")}>
-                        <span className="font-medium text-3xl leading-tight mb-1">
-                          {new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
-                        </span>
-                      {selectedDay ? (
-                          <span className="font-medium text-3xl leading-none mb-1">
-                            {new Date(selectedDay).toLocaleDateString(i18n.language, {
-                              month: 'long',
-                              day: 'numeric',
-                              timeZone: "UTC"
-                            })}
+              {activityStats &&
+                Object.keys(activityStats).length > 0 &&
+                groupedByMonth.map((group, index) => (
+                  <Fragment key={group.month}>
+                    <div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
+                      <div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2", "sticky")}>
+                        <div className={classNames("w-full flex flex-col")}>
+                          <span className="font-medium text-3xl leading-tight mb-1">
+                            {new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
                           </span>
-                        ) : (
-                          <span className="font-medium text-3xl leading-none mb-1">
-                            {new Date().toLocaleDateString(i18n.language, {
-                              month: 'long',
-                              timeZone: "UTC"
-                            })}
-                          </span>
-                        )}
-                        <span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
+                          {selectedDay ? (
+                            <span className="font-medium text-3xl leading-none mb-1">
+                              {new Date(selectedDay).toLocaleDateString(i18n.language, {
+                                month: "long",
+                                day: "numeric",
+                                timeZone: "UTC",
+                              })}
+                            </span>
+                          ) : (
+                            <span className="font-medium text-3xl leading-none mb-1">
+                              {new Date().toLocaleDateString(i18n.language, {
+                                month: "long",
+                                timeZone: "UTC",
+                              })}
+                            </span>
+                          )}
+                          <span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
+                        </div>
+                        <ActivityCalendar
+                          month={group.month}
+                          data={group.data}
+                          onClick={(date) => handleDateClick(date)}
+                          selectedDate={selectedDay}
+                        />
                       </div>
-                      <ActivityCalendar month={group.month} data={group.data} onClick={(date) => handleDateClick(date)} selectedDate={selectedDay} />
-                    </div>
 
-                    <div className={classNames("w-full flex flex-col justify-start items-start")}>
-                      {group.memos.map((memo, index) => (
-                        <div
-                          key={`${memo.name}-${memo.displayTime}`}
-                          className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
-                        >
-                          <MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
-                          <div className="absolute -left-2 sm:left-2 top-4 h-full">
-                            {index !== group.memos.length - 1 && (
-                              <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
-                            )}
-                            <div className="border-4 rounded-full border-white relative dark:border-zinc-800">
-                              <Icon.Circle className="w-2 h-auto bg-gray-200 text-gray-200 dark:bg-gray-700 dark:text-gray-700 rounded-full" />
+                      <div className={classNames("w-full flex flex-col justify-start items-start")}>
+                        {group.memos.map((memo, index) => (
+                          <div
+                            key={`${memo.name}-${memo.displayTime}`}
+                            className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
+                          >
+                            <MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
+                            <div className="absolute -left-2 sm:left-2 top-4 h-full">
+                              {index !== group.memos.length - 1 && (
+                                <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
+                              )}
+                              <div className="border-4 rounded-full border-white relative dark:border-zinc-800">
+                                <Icon.Circle className="w-2 h-auto bg-gray-200 text-gray-200 dark:bg-gray-700 dark:text-gray-700 rounded-full" />
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      ))}
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                  {index !== groupedByMonth.length - 1 && <Divider className="w-full !my-4 md:!mb-8 !bg-gray-100 dark:!bg-zinc-700" />}
-                </Fragment>
-              ))}
+                    {index !== groupedByMonth.length - 1 && <Divider className="w-full !my-4 md:!mb-8 !bg-gray-100 dark:!bg-zinc-700" />}
+                  </Fragment>
+                ))}
               {isRequesting ? (
                 <div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
                   <Icon.Loader className="w-4 h-auto animate-spin mr-1" />