diff --git a/web/src/components/ActivityCalendar/MonthCalendar.tsx b/web/src/components/ActivityCalendar/MonthCalendar.tsx
index 44c86bb4b..ecbc453f5 100644
--- a/web/src/components/ActivityCalendar/MonthCalendar.tsx
+++ b/web/src/components/ActivityCalendar/MonthCalendar.tsx
@@ -46,6 +46,7 @@ export const MonthCalendar = memo((props: MonthCalendarProps) => {
   return dayjs(selectedDate).format("YYYY-MM-DD");
 }, [selectedDate]);
 
+
   const { weeks, weekDays: rotatedWeekDays } = useCalendarMatrix({
     month,
     data,
diff --git a/web/src/components/ActivityCalendar/YearCalendar.tsx b/web/src/components/ActivityCalendar/YearCalendar.tsx
index e8b8f91f9..7228982ab 100644
--- a/web/src/components/ActivityCalendar/YearCalendar.tsx
+++ b/web/src/components/ActivityCalendar/YearCalendar.tsx
@@ -73,12 +73,13 @@ interface MonthCardProps {
   data: Record<string, number>;
   maxCount: number;
   onDateClick: (date: string) => void;
+  selectedDate: string | null;
 }
 
-const MonthCard = memo(({ month, data, maxCount, onDateClick }: MonthCardProps) => (
+const MonthCard = memo(({ month, data, maxCount, onDateClick, selectedDate }: MonthCardProps) => (
   <article className="flex flex-col gap-2 rounded-xl border border-border/20 bg-muted/5 p-3 transition-colors hover:bg-muted/10">
     <header className="text-[10px] font-medium text-muted-foreground/80 uppercase tracking-widest">{getMonthLabel(month)}</header>
-    <MonthCalendar month={month} data={data} maxCount={maxCount} size="small" onClick={onDateClick} disableTooltips />
+    <MonthCalendar month={month} data={data} maxCount={maxCount} size="small" onClick={onDateClick} selectedDate={selectedDate} disableTooltips />
   </article>
 ));
 MonthCard.displayName = "MonthCard";
@@ -104,11 +105,21 @@ export const YearCalendar = memo(({ selectedYear, data, onYearChange, onDateClic
         canGoNext={canGoNext}
       />
 
+<<<<<<< HEAD
       <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 animate-fade-in">
         {months.map((month) => (
           <MonthCard key={month} month={month} data={yearData} maxCount={yearMaxCount} onDateClick={onDateClick} />
         ))}
       </div>
+=======
+      <TooltipProvider>
+        <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 animate-fade-in">
+          {months.map((month) => (
+            <MonthCard key={month} month={month} data={yearData} maxCount={yearMaxCount} onDateClick={onDateClick} selectedDate={null}/>
+          ))}
+        </div>
+      </TooltipProvider>
+>>>>>>> 48116cde (fix(types): fix TypeScript type errors)
     </section>
   );
 });
diff --git a/web/src/components/StatisticsView/StatisticsView.tsx b/web/src/components/StatisticsView/StatisticsView.tsx
index ed74942d0..a5fa0593d 100644
--- a/web/src/components/StatisticsView/StatisticsView.tsx
+++ b/web/src/components/StatisticsView/StatisticsView.tsx
@@ -12,22 +12,22 @@ interface Props {
 const StatisticsView = (props: Props) => {
   const { statisticsData } = props;
   const { activityStats } = statisticsData;
-  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
   const [visibleMonthString, setVisibleMonthString] = useState(dayjs().format("YYYY-MM"));
   const { getFiltersByFactor, addFilter, removeFilter } = useMemoFilterContext();
+  const displayTimeFilter = getFiltersByFactor("displayTime").length > 0 ? getFiltersByFactor("displayTime") : [];
+  const selectedDate = useMemo(() => {
+    if (!displayTimeFilter.length) return null;
+    return new Date(displayTimeFilter[0].value);
+  }, [displayTimeFilter]);
 
   const maxCount = useMemo(() => {
     const counts = Object.values(activityStats);
     return Math.max(...counts, 1);
   }, [activityStats]);
 
-  const handleClick = (date: string) =>{
-    const displayTimeFilters = getFiltersByFactor("displayTime");
-    const isActive = displayTimeFilters.some((f: MemoFilter) => f.value === date);
-
-    if (isActive) {
+  const handleDateCellClick = (date: string) => {
+    if (displayTimeFilter.length > 0 && displayTimeFilter[0].value === date) {
       removeFilter((f: MemoFilter) => f.factor === "displayTime" && f.value === date);
-      setSelectedDate(null);
     } else {
       // Remove all existing tag filters first, then add the new one
       removeFilter((f: MemoFilter) => f.factor === "displayTime");
@@ -35,16 +35,15 @@ const StatisticsView = (props: Props) => {
         factor: "displayTime",
         value: date,
       });
-      setSelectedDate(new Date(date));
     }
-  }; 
+  };
 
   return (
     <div className="group w-full mt-2 flex flex-col text-muted-foreground animate-fade-in">
       <MonthNavigator visibleMonth={visibleMonthString} onMonthChange={setVisibleMonthString} activityStats={activityStats} />
 
       <div className="w-full animate-scale-in">
-        <MonthCalendar month={visibleMonthString} selectedDate={selectedDate?.toDateString()} data={activityStats} maxCount={maxCount} onClick={handleClick} />
+        <MonthCalendar month={visibleMonthString} selectedDate={selectedDate ? selectedDate.toDateString() : null} data={activityStats} maxCount={maxCount} onClick={handleDateCellClick} />
       </div>
     </div>
   );