diff --git a/web/src/components/StatisticsView/MonthNavigator.tsx b/web/src/components/StatisticsView/MonthNavigator.tsx
index f9ac48ab5..bb7910f64 100644
--- a/web/src/components/StatisticsView/MonthNavigator.tsx
+++ b/web/src/components/StatisticsView/MonthNavigator.tsx
@@ -4,11 +4,12 @@ import { memo, useCallback, useMemo, useState } from "react";
 import { YearCalendar } from "@/components/ActivityCalendar";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import i18n from "@/i18n";
+import { useTranslation } from "react-i18next";
 import { addMonths, formatMonth, getMonthFromDate, getYearFromDate, setYearAndMonth } from "@/lib/calendar-utils";
 import type { MonthNavigatorProps } from "@/types/statistics";
 
 export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => {
+  const { i18n } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
 
   const { currentMonth, currentYear, currentMonthNum } = useMemo(
@@ -20,7 +21,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats
     [visibleMonth],
   );
 
-  const monthLabel = useMemo(() => currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" }), [currentMonth]);
+  const monthLabel = useMemo(() => currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" }), [currentMonth, i18n.language]);
 
   const handlePrevMonth = useCallback(() => onMonthChange(addMonths(visibleMonth, -1)), [visibleMonth, onMonthChange]);
   const handleNextMonth = useCallback(() => onMonthChange(addMonths(visibleMonth, 1)), [visibleMonth, onMonthChange]);