diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
index 3ed0fff..032be5a 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {
   StatisticsClockEmptyIcon,
   StatisticsClockFilledIcon,
@@ -5,6 +7,7 @@ import {
   StatisticsClockOutlineIcon,
 } from "@repo/timo-design-system/icons";
 import { cn } from "@repo/timo-design-system/utils";
+import { useLocale } from "next-intl";
 
 import type { StatisticsCalendarResponse } from "@/app/[locale]/(main)/statistics/_types/statistics";
 
@@ -32,14 +35,20 @@ const STATUS_ICON = {
   filled: StatisticsClockFilledIcon,
 };
 
-const getIconStatus = (completionRate: number | null): CalendarIconStatus => {
-  if (completionRate === null) return "disabled";
-  if (completionRate === 0) return "empty";
+const getIconStatus = (
+  completionRate: number | null,
+  isFutureDate: boolean,
+): CalendarIconStatus => {
+  if (isFutureDate) return "disabled";
+  if (completionRate === null || completionRate === 0) return "empty";
   if (completionRate < 50) return "outline";
   if (completionRate < 100) return "light";
   return "filled";
 };
 
+const getDateTime = (date: Date) =>
+  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+
 const WEEKDAYS = [
   { label: "M", ariaLabel: "Monday" },
   { label: "T", ariaLabel: "Tuesday" },
@@ -52,27 +61,33 @@ const WEEKDAYS = [
 
 interface StatisticsCalendarProps {
   currentMonth: Date;
+  selectedDate: Date;
+  onSelectDate: (date: Date) => void;
   calendarData: StatisticsCalendarResponse;
 }
 
 export const StatisticsCalendar = ({
   currentMonth,
+  selectedDate,
+  onSelectDate,
   calendarData,
 }: StatisticsCalendarProps) => {
+  const locale = useLocale();
   const today = new Date(calendarData.today);
   const calendarDates = getCalendarDates(currentMonth);
   const firstDayOffset = getFirstDayOffset(currentMonth);
   const completionRateByDate = new Map(
     calendarData.days.map(({ date, completionRate }) => [date, completionRate]),
   );
-  const todayLabel = formatStatisticsCalendarDate(today);
+  const todayLabel = formatStatisticsCalendarDate(today, locale);
+  const todayTime = getDateTime(today);
 
   return (
-    <section className="w-full px-14.75 pt-10 pb-13">
+    <section className="min-w-0 flex-1 px-14.75 pt-10 pb-13">
       <div className="w-199.5">
         <div className="mb-17.25">
           <h1 className="typo-headline-b-30 text-timo-gray-900">
-            {formatStatisticsMonth(currentMonth)}
+            {formatStatisticsMonth(currentMonth, locale)}
           </h1>
 
           <p className="typo-headline-m-14 text-timo-black mt-2">
@@ -100,17 +115,39 @@ export const StatisticsCalendar = ({
 
           {calendarDates.map((calendarDate) => {
             const dateKey = formatDateKey(calendarDate.date);
+            const isSelected = dateKey === formatDateKey(selectedDate);
+            const isFutureDate = getDateTime(calendarDate.date) > todayTime;
             const completionRate = completionRateByDate.get(dateKey) ?? null;
-            const status = getIconStatus(completionRate);
+            const status = getIconStatus(completionRate, isFutureDate);
             const Icon = STATUS_ICON[status];
 
             return (
-              <div key={dateKey} className="flex flex-col items-center gap-2.5">
-                <Icon />
-                <span className="typo-body-sb-11 text-timo-gray-700">
+              <button
+                key={dateKey}
+                type="button"
+                className="flex flex-col items-center gap-2.5 disabled:cursor-default"
+                disabled={isFutureDate}
+                onClick={() => onSelectDate(calendarDate.date)}
+              >
+                <span
+                  className={cn(
+                    "rounded-full",
+                    isSelected &&
+                      !isFutureDate &&
+                      "drop-shadow-[0_0_10px_var(--color-timo-blue-75)]",
+                  )}
+                >
+                  <Icon />
+                </span>
+                <span
+                  className={cn(
+                    "typo-body-sb-11 text-timo-gray-700",
+                    isSelected && !isFutureDate && "text-timo-blue-300",
+                  )}
+                >
                   {calendarDate.day}
                 </span>
-              </div>
+              </button>
             );
           })}
         </div>
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
index eec7b33..4b36fa8 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
@@ -1,5 +1,8 @@
+"use client";
+
 import { TagIcon } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
+import { useTranslations } from "next-intl";
 
 import type {
   StatisticsDayDetail,
@@ -10,7 +13,7 @@ import { SummaryTimeBlock } from "@/app/[locale]/(main)/statistics/_components/S
 import {
   formatStatisticsClockText,
   formatStatisticsHourText,
-} from "@/app/[locale]/(main)/statistics/_utils/formatStatisticsTime";
+} from "@/app/[locale]/(main)/statistics/_utils/format-statistics-time";
 
 interface StatisticsMonthSidePanelProps {
   variant: "month";
@@ -27,11 +30,14 @@ type StatisticsSidePanelProps =
   | StatisticsDaySidePanelProps;
 
 const SIDE_PANEL_CLASS_NAME =
-  "border-timo-gray-500 min-h-full w-76 border-l text-timo-black";
-
-const getDiffLabel = (diffMinutes: number) => {
-  if (diffMinutes > 0) return "+초과";
-  if (diffMinutes < 0) return "-단축";
+  "border-timo-gray-500 min-h-full w-[304px] shrink-0 border-l text-timo-black";
+
+const getDiffLabel = (
+  diffMinutes: number,
+  t: ReturnType<typeof useTranslations<"Statistics.sidePanel">>,
+) => {
+  if (diffMinutes > 0) return t("overtime");
+  if (diffMinutes < 0) return t("shortened");
   return "";
 };
 
@@ -42,34 +48,36 @@ const getDiffClassName = (diffMinutes: number) => {
 };
 
 export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
+  const t = useTranslations("Statistics.sidePanel");
+
   if (props.variant === "month") {
     const { summary } = props;
 
     return (
-      <aside className={cn(SIDE_PANEL_CLASS_NAME, "pt-20.75 pb-148")}>
+      <aside className={cn(SIDE_PANEL_CLASS_NAME, "pt-[83px] pb-148")}>
         <div className="flex h-46.25 flex-col gap-5">
           <div className="px-7.5 py-2.5">
             <SummaryTimeBlock
-              label="이번 달의 총 기록 시간"
+              label={t("monthTotalRecordTime")}
               minutes={summary.totalRecordMinutes}
             />
           </div>
 
           <dl className="typo-headline-r-14 flex flex-col gap-2 px-7.5">
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">활동일</dt>
-              <dd>{summary.activeDayCount}일</dd>
+              <dt className="text-timo-gray-900">{t("activeDays")}</dt>
+              <dd>{t("activeDayCount", { count: summary.activeDayCount })}</dd>
             </div>
 
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">일평균</dt>
+              <dt className="text-timo-gray-900">{t("dailyAverage")}</dt>
               <dd>
                 {formatStatisticsHourText(summary.averageRecordedMinutes)}
               </dd>
             </div>
 
             <div className="flex items-center gap-3">
-              <dt className="text-timo-gray-900">누적 태스크</dt>
+              <dt className="text-timo-gray-900">{t("accumulatedTasks")}</dt>
               <dd>
                 {summary.completedTodoCount}/{summary.totalTodoCount}
               </dd>
@@ -88,7 +96,7 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
         <h2 className="typo-headline-b-24">{detail.date}</h2>
 
         <SummaryTimeBlock
-          label="오늘의 총 기록 시간"
+          label={t("dayTotalRecordTime")}
           minutes={detail.totalRecordMinutes}
         />
       </div>
@@ -116,11 +124,12 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
                 </strong>
 
                 <span>
-                  계획: {formatStatisticsClockText(todo.estimatedTimeMinutes)}
+                  {t("plan")}:{" "}
+                  {formatStatisticsClockText(todo.estimatedTimeMinutes)}
                 </span>
 
                 <span className={getDiffClassName(diffMinutes)}>
-                  {getDiffLabel(diffMinutes)}
+                  {getDiffLabel(diffMinutes, t)}
                 </span>
               </div>
             </li>
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_components/SummaryTimeBlock.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_components/SummaryTimeBlock.tsx
index ead9033..f2df284 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/SummaryTimeBlock.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/SummaryTimeBlock.tsx
@@ -1,4 +1,4 @@
-import { formatStatisticsHourText } from "@/app/[locale]/(main)/statistics/_utils/formatStatisticsTime";
+import { formatStatisticsHourText } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-time";
 
 interface SummaryTimeBlockProps {
   label: string;
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
index e926fcf..1a5cc84 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -1,24 +1,69 @@
 "use client";
 
+import { useLocale } from "next-intl";
 import { useState } from "react";
 
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
+import { StatisticsSidePanel } from "@/app/[locale]/(main)/statistics/_components/StatisticsSidePanel";
 import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
-import { MOCK_STATISTICS_CALENDAR } from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
+import {
+  MOCK_STATISTICS_CALENDAR,
+  MOCK_STATISTICS_DAY_DETAILS,
+  MOCK_STATISTICS_MONTH_SUMMARY,
+} from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
+import { formatStatisticsSidePanelDate } from "@/app/[locale]/(main)/statistics/_utils/format-statistics-date";
+import { formatDateKey } from "@/app/[locale]/(main)/statistics/_utils/statistics-calendar";
+
+type StatisticsPanelMode = "month" | "day";
 
 export const StatisticsContainer = () => {
+  const locale = useLocale();
   const [currentMonth, setCurrentMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState(
+    () => new Date(MOCK_STATISTICS_CALENDAR.today),
+  );
+  const [panelMode, setPanelMode] = useState<StatisticsPanelMode>("month");
+  const selectedDateKey = formatDateKey(selectedDate);
+  const selectedDetailBase = MOCK_STATISTICS_DAY_DETAILS[selectedDateKey] ?? {
+    date: selectedDateKey,
+    totalRecordMinutes: 0,
+    todos: [],
+  };
+  const selectedDetail = {
+    ...selectedDetailBase,
+    date: formatStatisticsSidePanelDate(selectedDate, locale),
+  };
+  const handleChangeMonth: typeof setCurrentMonth = (value) => {
+    setCurrentMonth(value);
+    setPanelMode("month");
+  };
+  const handleSelectDate = (date: Date) => {
+    setSelectedDate(date);
+    setPanelMode("day");
+  };
 
   return (
-    <>
+    <div className="flex h-full flex-col">
       <StatisticsHeaderContainer
         currentMonth={currentMonth}
-        onChangeMonth={setCurrentMonth}
-      />
-      <StatisticsCalendar
-        currentMonth={currentMonth}
-        calendarData={MOCK_STATISTICS_CALENDAR}
+        onChangeMonth={handleChangeMonth}
       />
-    </>
+      <div className="flex min-h-0 flex-1">
+        <StatisticsCalendar
+          currentMonth={currentMonth}
+          selectedDate={selectedDate}
+          onSelectDate={handleSelectDate}
+          calendarData={MOCK_STATISTICS_CALENDAR}
+        />
+        {panelMode === "month" ? (
+          <StatisticsSidePanel
+            variant="month"
+            summary={MOCK_STATISTICS_MONTH_SUMMARY}
+          />
+        ) : (
+          <StatisticsSidePanel variant="day" detail={selectedDetail} />
+        )}
+      </div>
+    </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx
index dd64590..d033838 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useLocale } from "next-intl";
+
 import type { Dispatch, SetStateAction } from "react";
 
 import { Header } from "@/components/layout/header/Header";
@@ -10,10 +12,6 @@ interface StatisticsHeaderContainerProps {
   onChangeMonth: Dispatch<SetStateAction<Date>>;
 }
 
-const MONTH_LABEL_FORMATTER = new Intl.DateTimeFormat("en-US", {
-  month: "long",
-});
-
 const addMonths = (date: Date, amount: number) =>
   new Date(date.getFullYear(), date.getMonth() + amount, 1);
 
@@ -22,6 +20,10 @@ export const StatisticsHeaderContainer = ({
   onChangeMonth,
 }: StatisticsHeaderContainerProps) => {
   const { isOpen, toggle } = useNavigationSidebar();
+  const locale = useLocale();
+  const monthLabel = new Intl.DateTimeFormat(locale, {
+    month: "long",
+  }).format(currentMonth);
 
   const handlePrev = () => onChangeMonth((prev) => addMonths(prev, -1));
   const handleNext = () => onChangeMonth((prev) => addMonths(prev, 1));
@@ -34,7 +36,7 @@ export const StatisticsHeaderContainer = ({
           <Header.WeeklyNav
             onPrev={handlePrev}
             onNext={handleNext}
-            label={MONTH_LABEL_FORMATTER.format(currentMonth)}
+            label={monthLabel}
           />
         </>
       }
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsPageContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsPageContainer.tsx
deleted file mode 100644
index e926fcf..0000000
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsPageContainer.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
-import { StatisticsHeaderContainer } from "@/app/[locale]/(main)/statistics/_containers/StatisticsHeaderContainer";
-import { MOCK_STATISTICS_CALENDAR } from "@/app/[locale]/(main)/statistics/_mocks/statistics-calendar";
-
-export const StatisticsContainer = () => {
-  const [currentMonth, setCurrentMonth] = useState(() => new Date());
-
-  return (
-    <>
-      <StatisticsHeaderContainer
-        currentMonth={currentMonth}
-        onChangeMonth={setCurrentMonth}
-      />
-      <StatisticsCalendar
-        currentMonth={currentMonth}
-        calendarData={MOCK_STATISTICS_CALENDAR}
-      />
-    </>
-  );
-};
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts b/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts
index 9bc7768..967774d 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_mocks/statistics-calendar.ts
@@ -1,13 +1,98 @@
-import type { StatisticsCalendarResponse } from "@/app/[locale]/(main)/statistics/_types/statistics";
+import type {
+  StatisticsCalendarResponse,
+  StatisticsDayDetail,
+  StatisticsMonthSummary,
+} from "@/app/[locale]/(main)/statistics/_types/statistics";
+
+const MOCK_YEAR_MONTH = "2026-07";
+
+const MOCK_COMPLETION_RATES = [
+  0,
+  25,
+  75,
+  100,
+  null,
+  25,
+  100,
+  100,
+  100,
+  75,
+  100,
+  25,
+  null,
+  100,
+  75,
+  0,
+  0,
+  100,
+  25,
+  75,
+  75,
+  25,
+  100,
+  25,
+  0,
+  0,
+  100,
+  75,
+  null,
+  null,
+  null,
+] as const;
+
+const formatMockDate = (day: number) =>
+  `${MOCK_YEAR_MONTH}-${String(day).padStart(2, "0")}`;
 
 export const MOCK_STATISTICS_CALENDAR: StatisticsCalendarResponse = {
-  yearMonth: "2026-07",
+  yearMonth: MOCK_YEAR_MONTH,
   today: "2026-07-10",
-  days: [
-    { date: "2026-07-01", completionRate: 0 },
-    { date: "2026-07-02", completionRate: 25 },
-    { date: "2026-07-03", completionRate: 75 },
-    { date: "2026-07-04", completionRate: 100 },
-    { date: "2026-07-05", completionRate: null },
-  ],
+  days: MOCK_COMPLETION_RATES.map((completionRate, index) => ({
+    date: formatMockDate(index + 1),
+    completionRate,
+  })),
 };
+
+export const MOCK_STATISTICS_MONTH_SUMMARY: StatisticsMonthSummary = {
+  totalRecordMinutes: 1330,
+  activeDayCount: 28,
+  averageRecordedMinutes: 214,
+  completedTodoCount: 80,
+  totalTodoCount: 100,
+};
+
+export const MOCK_STATISTICS_DAY_DETAILS: Record<string, StatisticsDayDetail> =
+  Object.fromEntries(
+    MOCK_COMPLETION_RATES.map((completionRate, index) => {
+      const day = index + 1;
+      const date = formatMockDate(day);
+      const totalRecordMinutes =
+        completionRate === null ? 0 : 90 + completionRate * 2;
+
+      return [
+        date,
+        {
+          date,
+          totalRecordMinutes,
+          todos:
+            completionRate === null
+              ? []
+              : [
+                  {
+                    todoId: day * 2 - 1,
+                    title: "통계 뷰 통합",
+                    actualTimeMinutes: Math.round(totalRecordMinutes * 0.55),
+                    estimatedTimeMinutes: 120,
+                    tagName: "개발",
+                  },
+                  {
+                    todoId: day * 2,
+                    title: "캘린더 선택 상태 점검",
+                    actualTimeMinutes: Math.round(totalRecordMinutes * 0.45),
+                    estimatedTimeMinutes: 90,
+                    tagName: "QA",
+                  },
+                ],
+        },
+      ];
+    }),
+  );
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts b/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
index 4985b47..17bda9f 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-date.ts
@@ -32,3 +32,20 @@ export const formatStatisticsCalendarDate = (date: Date, locale = "ko") => {
     weekday: "long",
   }).format(date);
 };
+
+/**
+ * 통계 사이드 패널 제목에 표시할 날짜 문구를 반환합니다.
+ *
+ * @param date - 표시할 날짜
+ * @param locale - 날짜 표기에 사용할 locale 값
+ * @returns 월과 일이 포함된 짧은 날짜 문구
+ *
+ * @example
+ * formatStatisticsSidePanelDate(new Date(2026, 5, 28)); // "6월 28일"
+ */
+export const formatStatisticsSidePanelDate = (date: Date, locale = "ko") => {
+  return new Intl.DateTimeFormat(locale, {
+    month: "long",
+    day: "numeric",
+  }).format(date);
+};
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_utils/formatStatisticsTime.ts b/apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-time.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/statistics/_utils/formatStatisticsTime.ts
rename to apps/timo-web/app/[locale]/(main)/statistics/_utils/format-statistics-time.ts
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 5084507..54a6c2e 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -36,6 +36,19 @@
     "viewWeek": "7 days",
     "addTask": "Add a task"
   },
+  "Statistics": {
+    "sidePanel": {
+      "monthTotalRecordTime": "Total record time this month",
+      "activeDays": "Active days",
+      "activeDayCount": "{count} days",
+      "dailyAverage": "Daily average",
+      "accumulatedTasks": "Accumulated tasks",
+      "dayTotalRecordTime": "Total record time today",
+      "plan": "Plan",
+      "overtime": "+Overdue",
+      "shortened": "-Shortened"
+    }
+  },
   "Toast": {
     "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
     "todoLimitLine1": "You can add up to <blue>20 incomplete to-dos</blue>.",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index ac381ca..6d1ed67 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -36,6 +36,19 @@
     "viewWeek": "7일",
     "addTask": "할 일을 추가하세요"
   },
+  "Statistics": {
+    "sidePanel": {
+      "monthTotalRecordTime": "이번 달의 총 기록 시간",
+      "activeDays": "활동일",
+      "activeDayCount": "{count}일",
+      "dailyAverage": "일평균",
+      "accumulatedTasks": "누적 태스크",
+      "dayTotalRecordTime": "오늘의 총 기록 시간",
+      "plan": "계획",
+      "overtime": "+초과",
+      "shortened": "-단축"
+    }
+  },
   "Toast": {
     "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
     "todoLimitLine1": "완료되지 않은 투두는 <blue>최대 20개</blue>까지 추가할 수 있어요.",