diff --git a/apps/timo-web/api/generated/endpoints/auth/auth.ts b/apps/timo-web/api/generated/endpoints/auth/auth.ts
index 35839e4b..a8446944 100644
--- a/apps/timo-web/api/generated/endpoints/auth/auth.ts
+++ b/apps/timo-web/api/generated/endpoints/auth/auth.ts
@@ -114,7 +114,7 @@ export const useToken = <TError = ErrorType<ErrorDto>, TContext = unknown>(
   return useMutation(getTokenMutationOptions(options), queryClient);
 };
 /**
- * 쿠키로 전달된 RefreshToken과 sessionId를 검증하여 AccessToken 재발급합니다.<br>
+ * 쿠키로 전달된 RefreshToken과 sessionId를 검증하여 AccessToken을 재발급합니다.
  * 재발급 성공 시 RefreshToken과 sessionId 쿠키를 갱신합니다.
  * @summary AccessToken 재발급
  */
diff --git a/apps/timo-web/api/generated/endpoints/auth/auth.zod.ts b/apps/timo-web/api/generated/endpoints/auth/auth.zod.ts
index ea762076..07495c8b 100644
--- a/apps/timo-web/api/generated/endpoints/auth/auth.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/auth/auth.zod.ts
@@ -40,7 +40,7 @@ export const TokenResponse = zod.object({
 });
 
 /**
- * 쿠키로 전달된 RefreshToken과 sessionId를 검증하여 AccessToken 재발급합니다.<br>
+ * 쿠키로 전달된 RefreshToken과 sessionId를 검증하여 AccessToken을 재발급합니다.
  * 재발급 성공 시 RefreshToken과 sessionId 쿠키를 갱신합니다.
  * @summary AccessToken 재발급
  */
diff --git a/apps/timo-web/api/generated/endpoints/calendar/calendar.ts b/apps/timo-web/api/generated/endpoints/calendar/calendar.ts
new file mode 100644
index 00000000..193b7863
--- /dev/null
+++ b/apps/timo-web/api/generated/endpoints/calendar/calendar.ts
@@ -0,0 +1,544 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { customInstance } from "../../../client/custom-instance";
+
+import type { ErrorType, BodyType } from "../../../client/custom-instance";
+import type {
+  BaseResponseCalendarAuthorizeResponse,
+  BaseResponseCalendarConnectResponse,
+  BaseResponseCalendarDisconnectResponse,
+  BaseResponseCalendarEventsResponse,
+  CalendarConnectRequest,
+  ErrorDto,
+  GetCalendarEventsParams,
+} from "../../models";
+import type {
+  DataTag,
+  DefinedInitialDataOptions,
+  DefinedUseQueryResult,
+  MutationFunction,
+  QueryClient,
+  QueryFunction,
+  QueryKey,
+  UndefinedInitialDataOptions,
+  UseMutationOptions,
+  UseMutationResult,
+  UseQueryOptions,
+  UseQueryResult,
+} from "@tanstack/react-query";
+
+type SecondParameter<T extends (...args: never) => unknown> = Parameters<T>[1];
+
+const withQueryKey = <T extends object, K>(
+  query: T,
+  queryKey: K,
+): T & { queryKey: K } => {
+  const result = { queryKey } as T & { queryKey: K };
+  for (const key of Object.keys(query)) {
+    // The explicit queryKey always wins, matching the previous
+    // `{ ...query, queryKey }` spread where it was set last.
+    if (key === "queryKey") continue;
+    Object.defineProperty(result, key, {
+      enumerable: true,
+      configurable: true,
+      get: () => (query as Record<string, unknown>)[key],
+    });
+  }
+  return result;
+};
+
+/**
+ * 구글 OAuth 동의 완료 후 발급된 authorizationCode와 state로 구글 토큰을 교환하여 캘린더를 연동합니다.
+ *
+ * state는 authorize API 호출 시 발급받은 값을 그대로 전달해야 하며, 검증 후 즉시 만료됩니다.
+ *
+ * 가입 시 사용한 구글 계정과 다른 계정으로 연동을 시도하면 거부됩니다.
+ * @summary 구글 캘린더 연동
+ */
+export const connectCalendar = (
+  calendarConnectRequest: BodyType<CalendarConnectRequest>,
+  options?: SecondParameter<typeof customInstance>,
+  signal?: AbortSignal,
+) => {
+  return customInstance<BaseResponseCalendarConnectResponse>(
+    {
+      url: `/api/v1/users/calendar`,
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      data: calendarConnectRequest,
+      signal,
+    },
+    options,
+  );
+};
+
+export const getConnectCalendarMutationOptions = <
+  TError = ErrorType<ErrorDto>,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof connectCalendar>>,
+    TError,
+    { data: BodyType<CalendarConnectRequest> },
+    TContext
+  >;
+  request?: SecondParameter<typeof customInstance>;
+}): UseMutationOptions<
+  Awaited<ReturnType<typeof connectCalendar>>,
+  TError,
+  { data: BodyType<CalendarConnectRequest> },
+  TContext
+> => {
+  const mutationKey = ["connectCalendar"];
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation &&
+      "mutationKey" in options.mutation &&
+      options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined };
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof connectCalendar>>,
+    { data: BodyType<CalendarConnectRequest> }
+  > = (props) => {
+    const { data } = props ?? {};
+
+    return connectCalendar(data, requestOptions);
+  };
+
+  return { mutationFn, ...mutationOptions };
+};
+
+export type ConnectCalendarMutationResult = NonNullable<
+  Awaited<ReturnType<typeof connectCalendar>>
+>;
+export type ConnectCalendarMutationBody = BodyType<CalendarConnectRequest>;
+export type ConnectCalendarMutationError = ErrorType<ErrorDto>;
+
+/**
+ * @summary 구글 캘린더 연동
+ */
+export const useConnectCalendar = <
+  TError = ErrorType<ErrorDto>,
+  TContext = unknown,
+>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof connectCalendar>>,
+      TError,
+      { data: BodyType<CalendarConnectRequest> },
+      TContext
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<
+  Awaited<ReturnType<typeof connectCalendar>>,
+  TError,
+  { data: BodyType<CalendarConnectRequest> },
+  TContext
+> => {
+  return useMutation(getConnectCalendarMutationOptions(options), queryClient);
+};
+/**
+ * 연동된 구글 캘린더 정보를 삭제하고 구글 토큰을 revoke합니다.
+ * @summary 구글 캘린더 연동 해제
+ */
+export const disconnectCalendar = (
+  options?: SecondParameter<typeof customInstance>,
+  signal?: AbortSignal,
+) => {
+  return customInstance<BaseResponseCalendarDisconnectResponse>(
+    { url: `/api/v1/users/calendar`, method: "DELETE", signal },
+    options,
+  );
+};
+
+export const getDisconnectCalendarMutationOptions = <
+  TError = ErrorType<ErrorDto>,
+  TContext = unknown,
+>(options?: {
+  mutation?: UseMutationOptions<
+    Awaited<ReturnType<typeof disconnectCalendar>>,
+    TError,
+    void,
+    TContext
+  >;
+  request?: SecondParameter<typeof customInstance>;
+}): UseMutationOptions<
+  Awaited<ReturnType<typeof disconnectCalendar>>,
+  TError,
+  void,
+  TContext
+> => {
+  const mutationKey = ["disconnectCalendar"];
+  const { mutation: mutationOptions, request: requestOptions } = options
+    ? options.mutation &&
+      "mutationKey" in options.mutation &&
+      options.mutation.mutationKey
+      ? options
+      : { ...options, mutation: { ...options.mutation, mutationKey } }
+    : { mutation: { mutationKey }, request: undefined };
+
+  const mutationFn: MutationFunction<
+    Awaited<ReturnType<typeof disconnectCalendar>>,
+    void
+  > = () => {
+    return disconnectCalendar(requestOptions);
+  };
+
+  return { mutationFn, ...mutationOptions };
+};
+
+export type DisconnectCalendarMutationResult = NonNullable<
+  Awaited<ReturnType<typeof disconnectCalendar>>
+>;
+
+export type DisconnectCalendarMutationError = ErrorType<ErrorDto>;
+
+/**
+ * @summary 구글 캘린더 연동 해제
+ */
+export const useDisconnectCalendar = <
+  TError = ErrorType<ErrorDto>,
+  TContext = unknown,
+>(
+  options?: {
+    mutation?: UseMutationOptions<
+      Awaited<ReturnType<typeof disconnectCalendar>>,
+      TError,
+      void,
+      TContext
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseMutationResult<
+  Awaited<ReturnType<typeof disconnectCalendar>>,
+  TError,
+  void,
+  TContext
+> => {
+  return useMutation(
+    getDisconnectCalendarMutationOptions(options),
+    queryClient,
+  );
+};
+/**
+ * filter(DAY/WEEK/TWO_WEEK)와 baseDate에 따라 연동된 구글 캘린더 일정을 일자별로 조회합니다.
+ *
+ * DAY: baseDate 하루
+ *
+ * WEEK: baseDate ~ baseDate+6일 (총 7일)
+ *
+ * TWO_WEEK: baseDate-7일 ~ baseDate+7일 (총 15일)
+ *
+ * baseDate 미입력 시 오늘 날짜가 기본값으로 사용됩니다.
+ * 별도 저장 없이 매 요청마다 구글 API를 직접 호출하여 최신 상태를 반환합니다.
+ * @summary 캘린더 일정 조회
+ */
+export const getCalendarEvents = (
+  params: GetCalendarEventsParams,
+  options?: SecondParameter<typeof customInstance>,
+  signal?: AbortSignal,
+) => {
+  return customInstance<BaseResponseCalendarEventsResponse>(
+    { url: `/api/v1/users/calendar/events`, method: "GET", params, signal },
+    options,
+  );
+};
+
+export const getGetCalendarEventsQueryKey = (
+  params?: GetCalendarEventsParams,
+) => {
+  return [
+    `/api/v1/users/calendar/events`,
+    ...(params ? [params] : []),
+  ] as const;
+};
+
+export const getGetCalendarEventsQueryOptions = <
+  TData = Awaited<ReturnType<typeof getCalendarEvents>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  params: GetCalendarEventsParams,
+  options?: {
+    query?: Partial<
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getCalendarEvents>>,
+        TError,
+        TData
+      >
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+) => {
+  const { query: queryOptions, request: requestOptions } = options ?? {};
+
+  const queryKey =
+    queryOptions?.queryKey ?? getGetCalendarEventsQueryKey(params);
+
+  const queryFn: QueryFunction<
+    Awaited<ReturnType<typeof getCalendarEvents>>
+  > = ({ signal }) => getCalendarEvents(params, requestOptions, signal);
+
+  return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+    Awaited<ReturnType<typeof getCalendarEvents>>,
+    TError,
+    TData
+  > & { queryKey: DataTag<QueryKey, TData, TError> };
+};
+
+export type GetCalendarEventsQueryResult = NonNullable<
+  Awaited<ReturnType<typeof getCalendarEvents>>
+>;
+export type GetCalendarEventsQueryError = ErrorType<ErrorDto>;
+
+export function useGetCalendarEvents<
+  TData = Awaited<ReturnType<typeof getCalendarEvents>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  params: GetCalendarEventsParams,
+  options: {
+    query: Partial<
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getCalendarEvents>>,
+        TError,
+        TData
+      >
+    > &
+      Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getCalendarEvents>>,
+          TError,
+          Awaited<ReturnType<typeof getCalendarEvents>>
+        >,
+        "initialData"
+      >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): DefinedUseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+export function useGetCalendarEvents<
+  TData = Awaited<ReturnType<typeof getCalendarEvents>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  params: GetCalendarEventsParams,
+  options?: {
+    query?: Partial<
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getCalendarEvents>>,
+        TError,
+        TData
+      >
+    > &
+      Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof getCalendarEvents>>,
+          TError,
+          Awaited<ReturnType<typeof getCalendarEvents>>
+        >,
+        "initialData"
+      >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+export function useGetCalendarEvents<
+  TData = Awaited<ReturnType<typeof getCalendarEvents>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  params: GetCalendarEventsParams,
+  options?: {
+    query?: Partial<
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getCalendarEvents>>,
+        TError,
+        TData
+      >
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+/**
+ * @summary 캘린더 일정 조회
+ */
+
+export function useGetCalendarEvents<
+  TData = Awaited<ReturnType<typeof getCalendarEvents>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  params: GetCalendarEventsParams,
+  options?: {
+    query?: Partial<
+      UseQueryOptions<
+        Awaited<ReturnType<typeof getCalendarEvents>>,
+        TError,
+        TData
+      >
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+} {
+  const queryOptions = getGetCalendarEventsQueryOptions(params, options);
+
+  const query = useQuery(queryOptions, queryClient) as UseQueryResult<
+    TData,
+    TError
+  > & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * 구글 캘린더 연동을 시작하는 구글 인증 URL을 발급합니다.
+ *
+ * 프론트는 이 응답의 authorizationUrl로 window.location.assign 등을 통해 직접 이동해야 합니다.
+ * @summary 구글 캘린더 연동 시작
+ */
+export const authorize = (
+  options?: SecondParameter<typeof customInstance>,
+  signal?: AbortSignal,
+) => {
+  return customInstance<BaseResponseCalendarAuthorizeResponse>(
+    { url: `/api/v1/users/calendar/authorize`, method: "GET", signal },
+    options,
+  );
+};
+
+export const getAuthorizeQueryKey = () => {
+  return [`/api/v1/users/calendar/authorize`] as const;
+};
+
+export const getAuthorizeQueryOptions = <
+  TData = Awaited<ReturnType<typeof authorize>>,
+  TError = ErrorType<ErrorDto>,
+>(options?: {
+  query?: Partial<
+    UseQueryOptions<Awaited<ReturnType<typeof authorize>>, TError, TData>
+  >;
+  request?: SecondParameter<typeof customInstance>;
+}) => {
+  const { query: queryOptions, request: requestOptions } = options ?? {};
+
+  const queryKey = queryOptions?.queryKey ?? getAuthorizeQueryKey();
+
+  const queryFn: QueryFunction<Awaited<ReturnType<typeof authorize>>> = ({
+    signal,
+  }) => authorize(requestOptions, signal);
+
+  return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+    Awaited<ReturnType<typeof authorize>>,
+    TError,
+    TData
+  > & { queryKey: DataTag<QueryKey, TData, TError> };
+};
+
+export type AuthorizeQueryResult = NonNullable<
+  Awaited<ReturnType<typeof authorize>>
+>;
+export type AuthorizeQueryError = ErrorType<ErrorDto>;
+
+export function useAuthorize<
+  TData = Awaited<ReturnType<typeof authorize>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  options: {
+    query: Partial<
+      UseQueryOptions<Awaited<ReturnType<typeof authorize>>, TError, TData>
+    > &
+      Pick<
+        DefinedInitialDataOptions<
+          Awaited<ReturnType<typeof authorize>>,
+          TError,
+          Awaited<ReturnType<typeof authorize>>
+        >,
+        "initialData"
+      >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): DefinedUseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+export function useAuthorize<
+  TData = Awaited<ReturnType<typeof authorize>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  options?: {
+    query?: Partial<
+      UseQueryOptions<Awaited<ReturnType<typeof authorize>>, TError, TData>
+    > &
+      Pick<
+        UndefinedInitialDataOptions<
+          Awaited<ReturnType<typeof authorize>>,
+          TError,
+          Awaited<ReturnType<typeof authorize>>
+        >,
+        "initialData"
+      >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+export function useAuthorize<
+  TData = Awaited<ReturnType<typeof authorize>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  options?: {
+    query?: Partial<
+      UseQueryOptions<Awaited<ReturnType<typeof authorize>>, TError, TData>
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+};
+/**
+ * @summary 구글 캘린더 연동 시작
+ */
+
+export function useAuthorize<
+  TData = Awaited<ReturnType<typeof authorize>>,
+  TError = ErrorType<ErrorDto>,
+>(
+  options?: {
+    query?: Partial<
+      UseQueryOptions<Awaited<ReturnType<typeof authorize>>, TError, TData>
+    >;
+    request?: SecondParameter<typeof customInstance>;
+  },
+  queryClient?: QueryClient,
+): UseQueryResult<TData, TError> & {
+  queryKey: DataTag<QueryKey, TData, TError>;
+} {
+  const queryOptions = getAuthorizeQueryOptions(options);
+
+  const query = useQuery(queryOptions, queryClient) as UseQueryResult<
+    TData,
+    TError
+  > & { queryKey: DataTag<QueryKey, TData, TError> };
+
+  return withQueryKey(query, queryOptions.queryKey);
+}
diff --git a/apps/timo-web/api/generated/endpoints/calendar/calendar.zod.ts b/apps/timo-web/api/generated/endpoints/calendar/calendar.zod.ts
new file mode 100644
index 00000000..f23f846e
--- /dev/null
+++ b/apps/timo-web/api/generated/endpoints/calendar/calendar.zod.ts
@@ -0,0 +1,116 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import * as zod from "zod";
+
+/**
+ * 구글 OAuth 동의 완료 후 발급된 authorizationCode와 state로 구글 토큰을 교환하여 캘린더를 연동합니다.
+ *
+ * state는 authorize API 호출 시 발급받은 값을 그대로 전달해야 하며, 검증 후 즉시 만료됩니다.
+ *
+ * 가입 시 사용한 구글 계정과 다른 계정으로 연동을 시도하면 거부됩니다.
+ * @summary 구글 캘린더 연동
+ */
+
+export const ConnectCalendarBody = zod.object({
+  authorizationCode: zod
+    .string()
+    .min(1)
+    .describe("구글 OAuth 동의 완료 후 발급된 authorization code"),
+  state: zod
+    .string()
+    .min(1)
+    .describe("authorize API 호출 시 발급받은 state 값 (CSRF 방어용)"),
+});
+
+export const ConnectCalendarResponse = zod.object({
+  status: zod.number().optional(),
+  message: zod.string().optional(),
+  data: zod
+    .object({
+      calendarConnected: zod.boolean().optional(),
+      calendarEmail: zod.string().optional(),
+      connectedAt: zod.string().optional().describe("UTC 기준 연동 시각"),
+    })
+    .optional(),
+});
+
+/**
+ * 연동된 구글 캘린더 정보를 삭제하고 구글 토큰을 revoke합니다.
+ * @summary 구글 캘린더 연동 해제
+ */
+export const DisconnectCalendarResponse = zod.object({
+  status: zod.number().optional(),
+  message: zod.string().optional(),
+  data: zod
+    .object({
+      calendarConnected: zod.boolean().optional(),
+    })
+    .optional(),
+});
+
+/**
+ * filter(DAY/WEEK/TWO_WEEK)와 baseDate에 따라 연동된 구글 캘린더 일정을 일자별로 조회합니다.
+ *
+ * DAY: baseDate 하루
+ *
+ * WEEK: baseDate ~ baseDate+6일 (총 7일)
+ *
+ * TWO_WEEK: baseDate-7일 ~ baseDate+7일 (총 15일)
+ *
+ * baseDate 미입력 시 오늘 날짜가 기본값으로 사용됩니다.
+ * 별도 저장 없이 매 요청마다 구글 API를 직접 호출하여 최신 상태를 반환합니다.
+ * @summary 캘린더 일정 조회
+ */
+export const GetCalendarEventsQueryParams = zod.object({
+  filter: zod.string().describe("조회 필터"),
+  baseDate: zod
+    .string()
+    .optional()
+    .describe("기준 날짜 (YYYY-MM-DD), 미입력 시 오늘"),
+});
+
+export const GetCalendarEventsResponse = zod.object({
+  status: zod.number().optional(),
+  message: zod.string().optional(),
+  data: zod
+    .object({
+      filter: zod.string().optional(),
+      baseDate: zod.iso.date().optional(),
+      days: zod
+        .array(
+          zod.object({
+            date: zod.iso.date().optional(),
+            events: zod
+              .array(
+                zod.object({
+                  title: zod.string().optional(),
+                }),
+              )
+              .optional(),
+          }),
+        )
+        .optional(),
+    })
+    .optional(),
+});
+
+/**
+ * 구글 캘린더 연동을 시작하는 구글 인증 URL을 발급합니다.
+ *
+ * 프론트는 이 응답의 authorizationUrl로 window.location.assign 등을 통해 직접 이동해야 합니다.
+ * @summary 구글 캘린더 연동 시작
+ */
+export const AuthorizeResponse = zod.object({
+  status: zod.number().optional(),
+  message: zod.string().optional(),
+  data: zod
+    .object({
+      authorizationUrl: zod.string().optional(),
+    })
+    .optional(),
+});
diff --git a/apps/timo-web/api/generated/endpoints/focus/focus.ts b/apps/timo-web/api/generated/endpoints/focus/focus.ts
index 316ee411..0c767fec 100644
--- a/apps/timo-web/api/generated/endpoints/focus/focus.ts
+++ b/apps/timo-web/api/generated/endpoints/focus/focus.ts
@@ -44,7 +44,10 @@ const withQueryKey = <T extends object, K>(
 };
 
 /**
- * 오늘 TODO 중 미완료인 최상단 TODO 하나를 조회합니다. (sortOrder가 가장 작은 미완료 TODO)
+ * 집중 모드에 노출할 TODO 하나를 다음 우선순위로 조회합니다.
+ * 1. 실행/일시정지 중인 타이머가 있으면, 날짜와 무관하게 해당 TODO를 최우선으로 반환합니다.
+ *    (이 경우 응답의 date는 오늘이 아니라 타이머가 시작된 날짜일 수 있습니다.)
+ * 2. 활성 타이머가 없으면 오늘 TODO 중 미완료인 최상단 TODO 하나를 반환합니다. (sortOrder가 가장 작은 미완료 TODO)
  * 오늘 TODO가 하나도 없으면 "오늘의 TODO가 없습니다.",
  * 오늘 TODO를 모두 완료했으면 "오늘의 TODO를 모두 완료했습니다." 메시지를 반환하며,
  * 두 경우 모두 hasTodo는 false, todo는 null입니다.
diff --git a/apps/timo-web/api/generated/endpoints/focus/focus.zod.ts b/apps/timo-web/api/generated/endpoints/focus/focus.zod.ts
index 5be069fd..814851cc 100644
--- a/apps/timo-web/api/generated/endpoints/focus/focus.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/focus/focus.zod.ts
@@ -8,7 +8,10 @@
 import * as zod from "zod";
 
 /**
- * 오늘 TODO 중 미완료인 최상단 TODO 하나를 조회합니다. (sortOrder가 가장 작은 미완료 TODO)
+ * 집중 모드에 노출할 TODO 하나를 다음 우선순위로 조회합니다.
+ * 1. 실행/일시정지 중인 타이머가 있으면, 날짜와 무관하게 해당 TODO를 최우선으로 반환합니다.
+ *    (이 경우 응답의 date는 오늘이 아니라 타이머가 시작된 날짜일 수 있습니다.)
+ * 2. 활성 타이머가 없으면 오늘 TODO 중 미완료인 최상단 TODO 하나를 반환합니다. (sortOrder가 가장 작은 미완료 TODO)
  * 오늘 TODO가 하나도 없으면 "오늘의 TODO가 없습니다.",
  * 오늘 TODO를 모두 완료했으면 "오늘의 TODO를 모두 완료했습니다." 메시지를 반환하며,
  * 두 경우 모두 hasTodo는 false, todo는 null입니다.
@@ -37,6 +40,7 @@ export const GetFocusTodoResponse = zod.object({
             })
             .optional(),
           isRepeated: zod.boolean(),
+          memo: zod.string().optional(),
           subtasks: zod.array(
             zod.object({
               subtaskId: zod.number(),
diff --git a/apps/timo-web/api/generated/endpoints/home/home.zod.ts b/apps/timo-web/api/generated/endpoints/home/home.zod.ts
index 03dbf623..35356243 100644
--- a/apps/timo-web/api/generated/endpoints/home/home.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/home/home.zod.ts
@@ -58,7 +58,7 @@ export const GetHomeResponse = zod.object({
                   name: zod.string(),
                 })
                 .optional(),
-              hasMemo: zod.boolean(),
+              hasSubtask: zod.boolean(),
               isRepeated: zod.boolean(),
               timerStatus: zod.enum(["STOPPED", "RUNNING", "PAUSED"]),
               sortOrder: zod.number().optional(),
@@ -107,7 +107,7 @@ export const GetTodayResponse = zod.object({
             })
             .optional(),
           isRepeated: zod.boolean(),
-          hasMemo: zod.boolean(),
+          hasSubtask: zod.boolean(),
           timerStatus: zod.enum(["STOPPED", "RUNNING", "PAUSED"]),
           sortOrder: zod.number().optional(),
           subtasks: zod.array(
diff --git a/apps/timo-web/api/generated/endpoints/timer/timer.ts b/apps/timo-web/api/generated/endpoints/timer/timer.ts
index 47dd634c..76aa765e 100644
--- a/apps/timo-web/api/generated/endpoints/timer/timer.ts
+++ b/apps/timo-web/api/generated/endpoints/timer/timer.ts
@@ -17,6 +17,7 @@ import type {
   BaseResponseTimerStartResponse,
   BaseResponseTimerStatusResponse,
   ErrorDto,
+  StartTimerParams,
   TimerActionRequest,
   TimerExtendRequest,
 } from "../../models";
@@ -58,15 +59,24 @@ const withQueryKey = <T extends object, K>(
 /**
  * 투두의 타이머를 시작합니다.
  * 한 번에 한 개의 타이머만 실행 가능하며, 이미 실행/일시정지 중인 타이머가 있으면 409를 반환합니다.
+ *
+ * 반복 투두는 여러 날짜에 같은 todoId로 노출되므로, 실행중 표시는 todoId가 아닌 (todoId, date) 조합으로 구분해야 합니다.
+ * 쿼리 파라미터 date로 타이머가 상태를 반영할 대상 날짜를 지정할 수 있으며(미래/과거 포함), 미지정 시 사용자 타임존 기준 오늘로 처리됩니다. 이후 일시정지/재개/완료/중지는 이 날짜를 그대로 사용합니다.
  * @summary 타이머 시작
  */
 export const startTimer = (
   todoId: number,
+  params?: StartTimerParams,
   options?: SecondParameter<typeof customInstance>,
   signal?: AbortSignal,
 ) => {
   return customInstance<BaseResponseTimerStartResponse>(
-    { url: `/api/v1/todos/${todoId}/timers/start`, method: "POST", signal },
+    {
+      url: `/api/v1/todos/${todoId}/timers/start`,
+      method: "POST",
+      params,
+      signal,
+    },
     options,
   );
 };
@@ -78,14 +88,14 @@ export const getStartTimerMutationOptions = <
   mutation?: UseMutationOptions<
     Awaited<ReturnType<typeof startTimer>>,
     TError,
-    { todoId: number },
+    { todoId: number; params?: StartTimerParams },
     TContext
   >;
   request?: SecondParameter<typeof customInstance>;
 }): UseMutationOptions<
   Awaited<ReturnType<typeof startTimer>>,
   TError,
-  { todoId: number },
+  { todoId: number; params?: StartTimerParams },
   TContext
 > => {
   const mutationKey = ["startTimer"];
@@ -99,11 +109,11 @@ export const getStartTimerMutationOptions = <
 
   const mutationFn: MutationFunction<
     Awaited<ReturnType<typeof startTimer>>,
-    { todoId: number }
+    { todoId: number; params?: StartTimerParams }
   > = (props) => {
-    const { todoId } = props ?? {};
+    const { todoId, params } = props ?? {};
 
-    return startTimer(todoId, requestOptions);
+    return startTimer(todoId, params, requestOptions);
   };
 
   return { mutationFn, ...mutationOptions };
@@ -123,7 +133,7 @@ export const useStartTimer = <TError = ErrorType<ErrorDto>, TContext = unknown>(
     mutation?: UseMutationOptions<
       Awaited<ReturnType<typeof startTimer>>,
       TError,
-      { todoId: number },
+      { todoId: number; params?: StartTimerParams },
       TContext
     >;
     request?: SecondParameter<typeof customInstance>;
@@ -132,7 +142,7 @@ export const useStartTimer = <TError = ErrorType<ErrorDto>, TContext = unknown>(
 ): UseMutationResult<
   Awaited<ReturnType<typeof startTimer>>,
   TError,
-  { todoId: number },
+  { todoId: number; params?: StartTimerParams },
   TContext
 > => {
   return useMutation(getStartTimerMutationOptions(options), queryClient);
@@ -499,6 +509,9 @@ export const useCompleteTimer = <
  * 로그인한 사용자의 현재 실행 중(RUNNING/PAUSED)인 타이머를 단건 조회합니다.
  * 한 사용자당 시작 이후 완료/종료되지 않은 타이머는 최대 1개만 존재할 수 있습니다.
  * 실행 중인 타이머가 없으면 data: null을 반환합니다.
+ *
+ * 응답의 date는 타이머가 귀속되는 날짜(사용자 시간대 기준 시작일)입니다.
+ * 반복 투두는 여러 날짜에 같은 todoId로 노출되므로, 실행중 표시는 todoId가 아닌 (todoId, date) 조합으로 구분해야 합니다.
  * @summary 현재 실행 중인 타이머 조회
  */
 export const getActiveTimer = (
diff --git a/apps/timo-web/api/generated/endpoints/timer/timer.zod.ts b/apps/timo-web/api/generated/endpoints/timer/timer.zod.ts
index ffc1e441..3cbf1c48 100644
--- a/apps/timo-web/api/generated/endpoints/timer/timer.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/timer/timer.zod.ts
@@ -10,12 +10,22 @@ import * as zod from "zod";
 /**
  * 투두의 타이머를 시작합니다.
  * 한 번에 한 개의 타이머만 실행 가능하며, 이미 실행/일시정지 중인 타이머가 있으면 409를 반환합니다.
+ *
+ * 반복 투두는 여러 날짜에 같은 todoId로 노출되므로, 실행중 표시는 todoId가 아닌 (todoId, date) 조합으로 구분해야 합니다.
+ * 쿼리 파라미터 date로 타이머가 상태를 반영할 대상 날짜를 지정할 수 있으며(미래/과거 포함), 미지정 시 사용자 타임존 기준 오늘로 처리됩니다. 이후 일시정지/재개/완료/중지는 이 날짜를 그대로 사용합니다.
  * @summary 타이머 시작
  */
 export const StartTimerParams = zod.object({
   todoId: zod.number().describe("타이머를 시작할 투두 ID"),
 });
 
+export const StartTimerQueryParams = zod.object({
+  date: zod.iso
+    .date()
+    .optional()
+    .describe("타이머가 상태를 반영할 대상 날짜(미지정 시 오늘). ISO 형식"),
+});
+
 export const StartTimerResponse = zod.object({
   status: zod.number().optional(),
   message: zod.string().optional(),
@@ -23,6 +33,7 @@ export const StartTimerResponse = zod.object({
     .object({
       timerId: zod.number(),
       todoId: zod.number(),
+      date: zod.string(),
       status: zod.string(),
       plannedSeconds: zod.number(),
       startedAt: zod.string(),
@@ -153,6 +164,9 @@ export const CompleteTimerResponse = zod.object({
  * 로그인한 사용자의 현재 실행 중(RUNNING/PAUSED)인 타이머를 단건 조회합니다.
  * 한 사용자당 시작 이후 완료/종료되지 않은 타이머는 최대 1개만 존재할 수 있습니다.
  * 실행 중인 타이머가 없으면 data: null을 반환합니다.
+ *
+ * 응답의 date는 타이머가 귀속되는 날짜(사용자 시간대 기준 시작일)입니다.
+ * 반복 투두는 여러 날짜에 같은 todoId로 노출되므로, 실행중 표시는 todoId가 아닌 (todoId, date) 조합으로 구분해야 합니다.
  * @summary 현재 실행 중인 타이머 조회
  */
 export const GetActiveTimerResponse = zod.object({
@@ -162,6 +176,7 @@ export const GetActiveTimerResponse = zod.object({
     .object({
       timerId: zod.number(),
       todoId: zod.number(),
+      date: zod.string(),
       todoTitle: zod.string(),
       iconType: zod.string().optional(),
       status: zod.string(),
diff --git a/apps/timo-web/api/generated/endpoints/todo/todo.ts b/apps/timo-web/api/generated/endpoints/todo/todo.ts
index af0ab788..ba2c70bb 100644
--- a/apps/timo-web/api/generated/endpoints/todo/todo.ts
+++ b/apps/timo-web/api/generated/endpoints/todo/todo.ts
@@ -405,6 +405,7 @@ export const useDeleteTodo = <TError = ErrorType<ErrorDto>, TContext = unknown>(
  * 기존 TODO의 제목, 메모, 날짜, 태그, 우선순위, 예상 소요 시간, 아이콘, 반복 규칙, 하위 태스크를 부분 수정합니다.
  *
  * 요청 body에 포함된(null이 아닌) 필드만 수정됩니다.
+ * 단, icon은 예외로, "NONE"을 전달하면 아이콘을 제거(빈 상태로 저장)하고, null이면 기존 아이콘을 유지합니다.
  * 예상 소요 시간은 durationSeconds 필드에 초 단위 정수로 전달합니다.
  * subtasks를 전달하면 하위 태스크 목록 전체가 교체됩니다.
  * subtaskId가 있으면 기존 태스크를 수정하고, null이면 신규 태스크로 추가하며, 전달되지 않은 기존 태스크는 삭제됩니다.
diff --git a/apps/timo-web/api/generated/endpoints/todo/todo.zod.ts b/apps/timo-web/api/generated/endpoints/todo/todo.zod.ts
index 80a4c9b7..7872d210 100644
--- a/apps/timo-web/api/generated/endpoints/todo/todo.zod.ts
+++ b/apps/timo-web/api/generated/endpoints/todo/todo.zod.ts
@@ -26,6 +26,7 @@ export const createTodoBodyMemoMax = 300;
 export const CreateTodoBody = zod.object({
   icon: zod
     .enum([
+      "NONE",
       "ICON_1",
       "ICON_2",
       "ICON_3",
@@ -150,6 +151,7 @@ export const DeleteTodoResponse = zod.object({
  * 기존 TODO의 제목, 메모, 날짜, 태그, 우선순위, 예상 소요 시간, 아이콘, 반복 규칙, 하위 태스크를 부분 수정합니다.
  *
  * 요청 body에 포함된(null이 아닌) 필드만 수정됩니다.
+ * 단, icon은 예외로, "NONE"을 전달하면 아이콘을 제거(빈 상태로 저장)하고, null이면 기존 아이콘을 유지합니다.
  * 예상 소요 시간은 durationSeconds 필드에 초 단위 정수로 전달합니다.
  * subtasks를 전달하면 하위 태스크 목록 전체가 교체됩니다.
  * subtaskId가 있으면 기존 태스크를 수정하고, null이면 신규 태스크로 추가하며, 전달되지 않은 기존 태스크는 삭제됩니다.
@@ -169,6 +171,7 @@ export const updateTodoBodyMemoMax = 300;
 export const UpdateTodoBody = zod.object({
   icon: zod
     .enum([
+      "NONE",
       "ICON_1",
       "ICON_2",
       "ICON_3",
diff --git a/apps/timo-web/api/generated/models/baseResponseCalendarAuthorizeResponse.ts b/apps/timo-web/api/generated/models/baseResponseCalendarAuthorizeResponse.ts
new file mode 100644
index 00000000..b6b15f2b
--- /dev/null
+++ b/apps/timo-web/api/generated/models/baseResponseCalendarAuthorizeResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarAuthorizeResponse } from "./calendarAuthorizeResponse";
+
+export interface BaseResponseCalendarAuthorizeResponse {
+  status?: number;
+  message?: string;
+  data?: CalendarAuthorizeResponse;
+}
diff --git a/apps/timo-web/api/generated/models/baseResponseCalendarConnectResponse.ts b/apps/timo-web/api/generated/models/baseResponseCalendarConnectResponse.ts
new file mode 100644
index 00000000..34c4a292
--- /dev/null
+++ b/apps/timo-web/api/generated/models/baseResponseCalendarConnectResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarConnectResponse } from "./calendarConnectResponse";
+
+export interface BaseResponseCalendarConnectResponse {
+  status?: number;
+  message?: string;
+  data?: CalendarConnectResponse;
+}
diff --git a/apps/timo-web/api/generated/models/baseResponseCalendarDisconnectResponse.ts b/apps/timo-web/api/generated/models/baseResponseCalendarDisconnectResponse.ts
new file mode 100644
index 00000000..70725d2b
--- /dev/null
+++ b/apps/timo-web/api/generated/models/baseResponseCalendarDisconnectResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarDisconnectResponse } from "./calendarDisconnectResponse";
+
+export interface BaseResponseCalendarDisconnectResponse {
+  status?: number;
+  message?: string;
+  data?: CalendarDisconnectResponse;
+}
diff --git a/apps/timo-web/api/generated/models/baseResponseCalendarEventsResponse.ts b/apps/timo-web/api/generated/models/baseResponseCalendarEventsResponse.ts
new file mode 100644
index 00000000..aa1df6f4
--- /dev/null
+++ b/apps/timo-web/api/generated/models/baseResponseCalendarEventsResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarEventsResponse } from "./calendarEventsResponse";
+
+export interface BaseResponseCalendarEventsResponse {
+  status?: number;
+  message?: string;
+  data?: CalendarEventsResponse;
+}
diff --git a/apps/timo-web/api/generated/models/calendarAuthorizeResponse.ts b/apps/timo-web/api/generated/models/calendarAuthorizeResponse.ts
new file mode 100644
index 00000000..8db02c26
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarAuthorizeResponse.ts
@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface CalendarAuthorizeResponse {
+  authorizationUrl?: string;
+}
diff --git a/apps/timo-web/api/generated/models/calendarConnectRequest.ts b/apps/timo-web/api/generated/models/calendarConnectRequest.ts
new file mode 100644
index 00000000..e508cbb7
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarConnectRequest.ts
@@ -0,0 +1,20 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface CalendarConnectRequest {
+  /**
+   * 구글 OAuth 동의 완료 후 발급된 authorization code
+   * @minLength 1
+   */
+  authorizationCode: string;
+  /**
+   * authorize API 호출 시 발급받은 state 값 (CSRF 방어용)
+   * @minLength 1
+   */
+  state: string;
+}
diff --git a/apps/timo-web/api/generated/models/calendarConnectResponse.ts b/apps/timo-web/api/generated/models/calendarConnectResponse.ts
new file mode 100644
index 00000000..8149bba2
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarConnectResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface CalendarConnectResponse {
+  calendarConnected?: boolean;
+  calendarEmail?: string;
+  /** UTC 기준 연동 시각 */
+  connectedAt?: string;
+}
diff --git a/apps/timo-web/api/generated/models/calendarDayResponse.ts b/apps/timo-web/api/generated/models/calendarDayResponse.ts
new file mode 100644
index 00000000..71ee8954
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarDayResponse.ts
@@ -0,0 +1,13 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarEventResponse } from "./calendarEventResponse";
+
+export interface CalendarDayResponse {
+  date?: string;
+  events?: CalendarEventResponse[];
+}
diff --git a/apps/timo-web/api/generated/models/calendarDisconnectResponse.ts b/apps/timo-web/api/generated/models/calendarDisconnectResponse.ts
new file mode 100644
index 00000000..3242b372
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarDisconnectResponse.ts
@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface CalendarDisconnectResponse {
+  calendarConnected?: boolean;
+}
diff --git a/apps/timo-web/api/generated/models/calendarEventResponse.ts b/apps/timo-web/api/generated/models/calendarEventResponse.ts
new file mode 100644
index 00000000..3b38c566
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarEventResponse.ts
@@ -0,0 +1,11 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface CalendarEventResponse {
+  title?: string;
+}
diff --git a/apps/timo-web/api/generated/models/calendarEventsResponse.ts b/apps/timo-web/api/generated/models/calendarEventsResponse.ts
new file mode 100644
index 00000000..38deaece
--- /dev/null
+++ b/apps/timo-web/api/generated/models/calendarEventsResponse.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+import type { CalendarDayResponse } from "./calendarDayResponse";
+
+export interface CalendarEventsResponse {
+  filter?: string;
+  baseDate?: string;
+  days?: CalendarDayResponse[];
+}
diff --git a/apps/timo-web/api/generated/models/errorDto.ts b/apps/timo-web/api/generated/models/errorDto.ts
index 2a483e30..d7f45820 100644
--- a/apps/timo-web/api/generated/models/errorDto.ts
+++ b/apps/timo-web/api/generated/models/errorDto.ts
@@ -12,4 +12,5 @@ export interface ErrorDto {
   errorCode?: string;
   message?: string;
   path?: string;
+  traceId?: string;
 }
diff --git a/apps/timo-web/api/generated/models/focusTodoDetailResponse.ts b/apps/timo-web/api/generated/models/focusTodoDetailResponse.ts
index 91605162..ad4d8b76 100644
--- a/apps/timo-web/api/generated/models/focusTodoDetailResponse.ts
+++ b/apps/timo-web/api/generated/models/focusTodoDetailResponse.ts
@@ -17,5 +17,6 @@ export interface FocusTodoDetailResponse {
   priority?: string;
   tag?: TagResponse;
   isRepeated: boolean;
+  memo?: string;
   subtasks: SubtaskResponse[];
 }
diff --git a/apps/timo-web/api/generated/models/getCalendarEventsParams.ts b/apps/timo-web/api/generated/models/getCalendarEventsParams.ts
new file mode 100644
index 00000000..40e155a3
--- /dev/null
+++ b/apps/timo-web/api/generated/models/getCalendarEventsParams.ts
@@ -0,0 +1,18 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface GetCalendarEventsParams {
+  /**
+   * 조회 필터
+   */
+  filter: string;
+  /**
+   * 기준 날짜 (YYYY-MM-DD), 미입력 시 오늘
+   */
+  baseDate?: string;
+}
diff --git a/apps/timo-web/api/generated/models/index.ts b/apps/timo-web/api/generated/models/index.ts
index ba4eace1..e4e610e7 100644
--- a/apps/timo-web/api/generated/models/index.ts
+++ b/apps/timo-web/api/generated/models/index.ts
@@ -12,6 +12,10 @@ export * from "./authTokenResponse";
 export * from "./baseResponse";
 export * from "./baseResponseAuthReissueResponse";
 export * from "./baseResponseAuthTokenResponse";
+export * from "./baseResponseCalendarAuthorizeResponse";
+export * from "./baseResponseCalendarConnectResponse";
+export * from "./baseResponseCalendarDisconnectResponse";
+export * from "./baseResponseCalendarEventsResponse";
 export * from "./baseResponseFocusTodoResponse";
 export * from "./baseResponseHomeResponse";
 export * from "./baseResponseListTimeBoxResponse";
@@ -38,6 +42,13 @@ export * from "./baseResponseUpdateLanguageResponse";
 export * from "./baseResponseUpdateTimezoneResponse";
 export * from "./baseResponseUserProfileResponse";
 export * from "./baseResponseVoid";
+export * from "./calendarAuthorizeResponse";
+export * from "./calendarConnectRequest";
+export * from "./calendarConnectResponse";
+export * from "./calendarDayResponse";
+export * from "./calendarDisconnectResponse";
+export * from "./calendarEventResponse";
+export * from "./calendarEventsResponse";
 export * from "./dailyTodoResponse";
 export * from "./dayCompletionResponse";
 export * from "./dayResponse";
@@ -46,6 +57,7 @@ export * from "./errorDto";
 export * from "./focusTodoDetailResponse";
 export * from "./focusTodoResponse";
 export * from "./focusTodoResponseDayOfWeek";
+export * from "./getCalendarEventsParams";
 export * from "./getCalendarParams";
 export * from "./getDailyParams";
 export * from "./getHomeParams";
@@ -61,6 +73,7 @@ export * from "./recommendDurationRequest";
 export * from "./recommendDurationResponse";
 export * from "./repeatResponse";
 export * from "./repeatResponseWeekdaysItem";
+export * from "./startTimerParams";
 export * from "./statisticsCalendarResponse";
 export * from "./statisticsDailyResponse";
 export * from "./statisticsSummaryResponse";
diff --git a/apps/timo-web/api/generated/models/startTimerParams.ts b/apps/timo-web/api/generated/models/startTimerParams.ts
new file mode 100644
index 00000000..3d5e484c
--- /dev/null
+++ b/apps/timo-web/api/generated/models/startTimerParams.ts
@@ -0,0 +1,14 @@
+/**
+ * Generated by orval v8.20.0 🍺
+ * Do not edit manually.
+ * Timo API
+ * Timo 서버 API 명세서
+ * OpenAPI spec version: v1
+ */
+
+export interface StartTimerParams {
+  /**
+   * 타이머가 상태를 반영할 대상 날짜(미지정 시 오늘). ISO 형식
+   */
+  date?: string;
+}
diff --git a/apps/timo-web/api/generated/models/timerActiveResponse.ts b/apps/timo-web/api/generated/models/timerActiveResponse.ts
index 1002b981..b0f76183 100644
--- a/apps/timo-web/api/generated/models/timerActiveResponse.ts
+++ b/apps/timo-web/api/generated/models/timerActiveResponse.ts
@@ -9,6 +9,7 @@
 export interface TimerActiveResponse {
   timerId: number;
   todoId: number;
+  date: string;
   todoTitle: string;
   iconType?: string;
   status: string;
diff --git a/apps/timo-web/api/generated/models/timerStartResponse.ts b/apps/timo-web/api/generated/models/timerStartResponse.ts
index aa2cad40..7c736fa9 100644
--- a/apps/timo-web/api/generated/models/timerStartResponse.ts
+++ b/apps/timo-web/api/generated/models/timerStartResponse.ts
@@ -9,6 +9,7 @@
 export interface TimerStartResponse {
   timerId: number;
   todoId: number;
+  date: string;
   status: string;
   plannedSeconds: number;
   startedAt: string;
diff --git a/apps/timo-web/api/generated/models/todayTodoResponse.ts b/apps/timo-web/api/generated/models/todayTodoResponse.ts
index b81b03b1..416cb136 100644
--- a/apps/timo-web/api/generated/models/todayTodoResponse.ts
+++ b/apps/timo-web/api/generated/models/todayTodoResponse.ts
@@ -19,7 +19,7 @@ export interface TodayTodoResponse {
   priority?: string;
   tag?: TagResponse;
   isRepeated: boolean;
-  hasMemo: boolean;
+  hasSubtask: boolean;
   timerStatus: TodayTodoResponseTimerStatus;
   sortOrder?: number;
   subtasks: SubtaskResponse[];
diff --git a/apps/timo-web/api/generated/models/todoCreateRequestIcon.ts b/apps/timo-web/api/generated/models/todoCreateRequestIcon.ts
index 03aee0eb..68fad3e3 100644
--- a/apps/timo-web/api/generated/models/todoCreateRequestIcon.ts
+++ b/apps/timo-web/api/generated/models/todoCreateRequestIcon.ts
@@ -10,6 +10,7 @@ export type TodoCreateRequestIcon =
   (typeof TodoCreateRequestIcon)[keyof typeof TodoCreateRequestIcon];
 
 export const TodoCreateRequestIcon = {
+  NONE: "NONE",
   ICON_1: "ICON_1",
   ICON_2: "ICON_2",
   ICON_3: "ICON_3",
diff --git a/apps/timo-web/api/generated/models/todoResponse.ts b/apps/timo-web/api/generated/models/todoResponse.ts
index 4992e5f1..a0ccd634 100644
--- a/apps/timo-web/api/generated/models/todoResponse.ts
+++ b/apps/timo-web/api/generated/models/todoResponse.ts
@@ -17,7 +17,7 @@ export interface TodoResponse {
   durationSeconds?: number;
   priority?: string;
   tag?: TagResponse;
-  hasMemo: boolean;
+  hasSubtask: boolean;
   isRepeated: boolean;
   timerStatus: TodoResponseTimerStatus;
   sortOrder?: number;
diff --git a/apps/timo-web/api/generated/models/todoUpdateRequestIcon.ts b/apps/timo-web/api/generated/models/todoUpdateRequestIcon.ts
index c290f59b..f23a7a76 100644
--- a/apps/timo-web/api/generated/models/todoUpdateRequestIcon.ts
+++ b/apps/timo-web/api/generated/models/todoUpdateRequestIcon.ts
@@ -10,6 +10,7 @@ export type TodoUpdateRequestIcon =
   (typeof TodoUpdateRequestIcon)[keyof typeof TodoUpdateRequestIcon];
 
 export const TodoUpdateRequestIcon = {
+  NONE: "NONE",
   ICON_1: "ICON_1",
   ICON_2: "ICON_2",
   ICON_3: "ICON_3",
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index 3e98a59b..81ab97a3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -17,6 +17,7 @@ import {
 } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
 import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
 
 import type {
   TodoPriorityTypes,
@@ -26,27 +27,17 @@ import type { KeyboardEvent, MouseEvent, PointerEvent } from "react";
 
 import { convertDurationToTimeText } from "@/utils/todo/todo-time";
 
-type PriorityLabelKeyTypes = "urgent" | "high" | "medium" | "low";
-
-const PRIORITY_LABEL_KEY: Record<TodoPriorityTypes, PriorityLabelKeyTypes> = {
-  VERY_HIGH: "urgent",
-  HIGH: "high",
-  MEDIUM: "medium",
-  LOW: "low",
-};
-
 const isInteractiveElement = (target: EventTarget | null) =>
-  target instanceof HTMLElement &&
-  Boolean(target.closest("button, input, label"));
+  target instanceof Element && Boolean(target.closest("button, input, label"));
 
 export interface HomeTodoCardProps {
   todoId: number;
   title: string;
   isCompleted: boolean;
   durationSeconds: number;
-  priority: TodoPriorityTypes;
+  priority?: TodoPriorityTypes;
   tagName?: string;
-  hasMemo: boolean;
+  hasSubtask: boolean;
   isRepeated: boolean;
   timerStatus: TodoTimerStatusTypes;
   isPlayHighlighted: boolean;
@@ -65,7 +56,7 @@ export const HomeTodoCard = ({
   durationSeconds,
   priority,
   tagName,
-  hasMemo,
+  hasSubtask,
   isRepeated,
   timerStatus,
   isPlayHighlighted,
@@ -86,9 +77,16 @@ export const HomeTodoCard = ({
     transition,
   };
 
+  const [isHovered, setIsHovered] = useState(false);
+
+  useEffect(() => {
+    if (isCompleted) setIsHovered(false);
+  }, [isCompleted]);
+
+  const isDimmed = isCompleted && !isHovered;
   const isRunning = timerStatus === "RUNNING";
 
-  const priorityLabel = tCommon(`priority.${PRIORITY_LABEL_KEY[priority]}`);
+  const priorityLabel = priority ? tCommon(`priority.${priority}`) : undefined;
 
   const handleCardClick = (event: MouseEvent<HTMLDivElement>) => {
     if (isInteractiveElement(event.target)) return;
@@ -123,7 +121,7 @@ export const HomeTodoCard = ({
         <p
           className={cn(
             "typo-body-sb-12 min-w-0 flex-1 truncate",
-            isCompleted ? "text-timo-gray-700" : "text-timo-black",
+            isDimmed ? "text-timo-gray-700" : "text-timo-black",
           )}
         >
           {title}
@@ -165,9 +163,11 @@ export const HomeTodoCard = ({
       tabIndex={onClickTodo ? 0 : attributes.tabIndex}
       onClick={onClickTodo ? handleCardClick : undefined}
       onKeyDown={onClickTodo ? handleCardKeyDown : undefined}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       className={cn(
         "border-timo-gray-500 flex w-full shrink-0 flex-col items-start gap-2 overflow-hidden rounded-[4px] border border-solid px-3.5 py-3",
-        isCompleted ? "bg-timo-gray-200" : "bg-white",
+        isDimmed ? "bg-timo-gray-200" : "bg-white",
         onClickTodo && "cursor-pointer",
       )}
     >
@@ -189,19 +189,23 @@ export const HomeTodoCard = ({
       )}
       <div className="flex w-full items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-1">
-          <PriorityIcon
-            priority={isCompleted ? "Disable" : priority}
-            label={priorityLabel}
-          />
+          {priority && (
+            <div className="pl-2">
+              <PriorityIcon
+                priority={isDimmed ? "Disable" : priority}
+                label={priorityLabel}
+              />
+            </div>
+          )}
           {tagName && <TagIcon text={tagName} />}
-          {hasMemo &&
-            (isCompleted ? (
+          {hasSubtask &&
+            (isDimmed ? (
               <MemoDisableIcon width={18} height={18} />
             ) : (
               <MemoOnIcon width={18} height={18} />
             ))}
           {isRepeated &&
-            (isCompleted ? (
+            (isDimmed ? (
               <RepeatTodoDisableIcon width={18} height={18} />
             ) : (
               <RepeatTodoOnIcon width={18} height={18} />
@@ -210,7 +214,7 @@ export const HomeTodoCard = ({
         <span
           className={cn(
             "typo-body-sb-12 shrink-0 whitespace-nowrap",
-            isCompleted ? "text-timo-gray-700" : "text-timo-gray-900",
+            isDimmed ? "text-timo-gray-700" : "text-timo-gray-900",
           )}
         >
           {convertDurationToTimeText(durationSeconds)}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
index e0aae773..efa73bef 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeTodoContainer.tsx
@@ -15,10 +15,13 @@ import {
 import { useHomeTodosByDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date";
 import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode";
 import { useHomeViewQuery } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view-query";
+import { HomeCalendarEventCard } from "@/components/calendar/HomeCalendarEventCard";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
+import { useMyProfileQuery } from "@/queries/auth/use-my-profile-query";
+import { useCalendarEventsQuery } from "@/queries/calendar/use-calendar-events-query";
 import { formatDateKey } from "@/utils/date/date";
 import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
@@ -37,9 +40,20 @@ export const HomeTodoContainer = () => {
   const scrollRef = useHomeTodayScrollRef<HTMLDivElement>();
 
   const filter: HomeViewFilter = isWeekView ? "WEEK" : "DEFAULT";
+  const calendarFilter = isWeekView ? "WEEK" : "TWO_WEEK";
   const baseDate = formatDateKey(referenceDate);
 
   const { data: homeViewData } = useHomeViewQuery({ filter, baseDate });
+  const { data: profile } = useMyProfileQuery();
+  const { data: calendarEventsData } = useCalendarEventsQuery({
+    filter: calendarFilter,
+    baseDate,
+    enabled: profile.calendarConnected,
+  });
+
+  const calendarEventsByDate = new Map(
+    (calendarEventsData?.days ?? []).map((day) => [day.date, day.events]),
+  );
   const days = homeViewData.days;
 
   const [pendingCompleteTodo, setPendingCompleteTodo] =
@@ -64,6 +78,8 @@ export const HomeTodoContainer = () => {
     onStopFeedback: setFeedbackText,
     onPlayError: (message) =>
       setPlayErrorMessage(message ?? tToast("timerStartFailed")),
+    onUpdateError: (message) =>
+      setPlayErrorMessage(message ?? tToast("todoUpdateFailed")),
   });
 
   const handleConfirmPendingComplete = () => {
@@ -82,9 +98,7 @@ export const HomeTodoContainer = () => {
   }, [isWeekView, scrollRef]);
 
   const plannedMinutes = activeTimer
-    ? convertDurationToMinutes(
-        activeTimer.plannedSeconds + activeTimer.extendedSeconds,
-      )
+    ? convertDurationToMinutes(activeTimer.plannedSeconds)
     : 0;
   const actualMinutes = activeTimer
     ? convertDurationToMinutes(activeTimer.elapsedSeconds)
@@ -95,12 +109,13 @@ export const HomeTodoContainer = () => {
       ref={scrollRef}
       className={cn(
         "flex h-full overflow-x-auto scroll-smooth",
-        isWeekView ? "w-full gap-2.5" : "snap-x snap-proximity gap-5 pb-2",
+        isWeekView ? "w-full gap-2.5" : "snap-x snap-proximity gap-5",
       )}
     >
       {days.map((day) => {
         const dateKey = day.date;
         const todos = todosByDate[dateKey] ?? day.todos;
+        const calendarEvents = calendarEventsByDate.get(dateKey) ?? [];
         const completedCount = todos.filter((todo) => todo.completed).length;
 
         return (
@@ -119,7 +134,7 @@ export const HomeTodoContainer = () => {
               dayOfWeek={day.dayOfWeek}
               isHoliday={day.isHoliday}
               isToday={day.isToday}
-              totalCount={todos.length}
+              totalCount={todos.length + calendarEvents.length}
               completedCount={completedCount}
             />
 
@@ -131,10 +146,18 @@ export const HomeTodoContainer = () => {
               }
             >
               <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1">
+                {calendarEvents.map((event, index) => (
+                  <HomeCalendarEventCard
+                    key={`${event.title}-${index}`}
+                    title={event.title}
+                  />
+                ))}
                 {todos.map((todo) => {
                   const [firstSubtask] = todo.subtasks;
                   const isActiveTodo =
-                    activeTimer && activeTimer.todoId === todo.todoId;
+                    activeTimer &&
+                    activeTimer.todoId === todo.todoId &&
+                    activeTimer.date === dateKey;
                   const durationSeconds = isActiveTodo
                     ? activeTimer.plannedSeconds + activeTimer.extendedSeconds
                     : todo.durationSeconds;
@@ -174,7 +197,7 @@ export const HomeTodoContainer = () => {
                           durationSeconds={durationSeconds}
                           priority={todo.priority}
                           tagName={todoTagName}
-                          hasMemo={todo.hasMemo}
+                          hasSubtask={todo.hasSubtask}
                           isRepeated={todo.isRepeated}
                           timerStatus={timerStatus}
                           isPlayHighlighted={isPlayHighlighted}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer.tsx
index e83a64d1..ef832d76 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer.tsx
@@ -3,18 +3,33 @@ import { useTranslations } from "next-intl";
 import { useState } from "react";
 
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
+import { MAX_CUSTOM_TAG_COUNT } from "@/schemas/tag/tag-schema";
 
-export const TagLimitToastContainer = () => {
+interface TagLimitToastContainerProps {
+  count?: number;
+  onClose?: () => void;
+}
+
+export const TagLimitToastContainer = ({
+  count = MAX_CUSTOM_TAG_COUNT,
+  onClose,
+}: TagLimitToastContainerProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const t = useTranslations("Toast");
 
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+
   return (
     <AnimatedToast
       isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
+      onClose={handleClose}
       message={
         <p className="mb-0">
           {t.rich("tagLimit", {
+            count,
             blue: (chunks) => (
               <span className="text-timo-blue-300">{chunks}</span>
             ),
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
index fff1170b..2372754d 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
@@ -3,11 +3,12 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 
+import type { ErrorType } from "@/api/client/custom-instance";
 import type { ApiError } from "@/api/error/api-error";
+import type { ErrorDto } from "@/api/generated/models";
 import type { HomeViewDay } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
 
-import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
 import {
   useChangeStatus,
   useStartTimer,
@@ -29,6 +30,7 @@ export interface UseHomeTodosByDateOptions {
   onTimerAlreadyRunning: () => void;
   onStopFeedback: (feedbackText: string | undefined) => void;
   onPlayError: (message: string | undefined) => void;
+  onUpdateError: (message: string | undefined) => void;
 }
 
 export const useHomeTodosByDate = (
@@ -38,25 +40,47 @@ export const useHomeTodosByDate = (
     onTimerAlreadyRunning,
     onStopFeedback,
     onPlayError,
+    onUpdateError,
   }: UseHomeTodosByDateOptions,
 ) => {
   const [todosByDate, setTodosByDate] = useState<Record<string, Todo[]>>({});
   const openTimerPanel = useTimeSidebarStore((state) => state.openTimerPanel);
   const queryClient = useQueryClient();
-  const { data: activeTimer } = useActiveTimer();
+  const { data: activeTimer, isFetching: isActiveTimerFetching } =
+    useActiveTimer();
   const { mutate: changeTodoStatus } = useChangeTodoStatus();
   const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
   const { mutate: reorderTodo } = useReorderTodo();
   const { mutate: stopTimer } = useStopTimer();
-  const { invalidateHomeView, invalidateTimerState, invalidateTimeBoxes } =
-    useTimerQueryInvalidation();
+  const {
+    invalidateHomeView,
+    invalidateStatistics,
+    invalidateTimerState,
+    invalidateTimeBoxes,
+    invalidateFocusTodo,
+  } = useTimerQueryInvalidation();
 
-  const { mutate: startTimer } = useStartTimer<ApiError>({
-    mutation: { onSuccess: invalidateTimerState },
-  });
-  const { mutate: changeStatus } = useChangeStatus({
-    mutation: { onSuccess: invalidateTimerState },
-  });
+  const { mutate: startTimer, isPending: isStartTimerPending } =
+    useStartTimer<ApiError>({
+      mutation: {
+        onSuccess: () => {
+          invalidateTimerState();
+          invalidateFocusTodo();
+        },
+      },
+    });
+  const { mutate: changeStatus, isPending: isChangeStatusPending } =
+    useChangeStatus({
+      mutation: {
+        onSuccess: () => {
+          invalidateTimerState();
+          invalidateFocusTodo();
+        },
+      },
+    });
+
+  const isTimerActionPending =
+    isStartTimerPending || isChangeStatusPending || isActiveTimerFetching;
 
   useEffect(() => {
     setTodosByDate(
@@ -77,9 +101,6 @@ export const useHomeTodosByDate = (
     }));
   };
 
-  const invalidateFocusTodo = () => {
-    queryClient.invalidateQueries({ queryKey: getGetFocusTodoQueryKey() });
-  };
   const invalidateHomeAndFocus = () => {
     invalidateHomeView();
     invalidateFocusTodo();
@@ -95,7 +116,11 @@ export const useHomeTodosByDate = (
     todoId: number,
     completed: boolean,
   ) => {
-    if (completed && activeTimer?.todoId === todoId) {
+    if (
+      completed &&
+      activeTimer?.todoId === todoId &&
+      activeTimer.date === dateKey
+    ) {
       onNeedStopConfirm(dateKey, todoId);
       return;
     }
@@ -110,9 +135,11 @@ export const useHomeTodosByDate = (
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
           invalidateTodoDetail(dateKey, todoId);
+          invalidateStatistics();
         },
-        onError: () => {
+        onError: (error: ErrorType<ErrorDto>) => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
+          onUpdateError(error.response?.data.message);
         },
       },
     );
@@ -138,6 +165,7 @@ export const useHomeTodosByDate = (
               onSuccess: () => {
                 invalidateHomeAndFocus();
                 invalidateTodoDetail(dateKey, todoId);
+                invalidateStatistics();
               },
             },
           );
@@ -147,6 +175,8 @@ export const useHomeTodosByDate = (
   };
 
   const handleTogglePlay = (dateKey: string, todoId: number) => {
+    if (isTimerActionPending) return;
+
     const willRun =
       todosByDate[dateKey]?.find((todo) => todo.todoId === todoId)
         ?.timerStatus !== "RUNNING";
@@ -155,7 +185,11 @@ export const useHomeTodosByDate = (
       openTimerPanel();
     }
 
-    if (activeTimer && activeTimer.todoId === todoId) {
+    if (
+      activeTimer &&
+      activeTimer.todoId === todoId &&
+      activeTimer.date === dateKey
+    ) {
       changeStatus(
         {
           timerId: activeTimer.timerId,
@@ -175,7 +209,7 @@ export const useHomeTodosByDate = (
     }
 
     startTimer(
-      { todoId },
+      { todoId, params: { date: dateKey } },
       {
         onSuccess: () => invalidateTodoDetail(dateKey, todoId),
         onError: (error: ApiError) => {
@@ -206,9 +240,11 @@ export const useHomeTodosByDate = (
           invalidateHomeAndFocus();
           invalidateTimeBoxes();
           invalidateTodoDetail(dateKey, todoId);
+          invalidateStatistics();
         },
-        onError: () => {
+        onError: (error: ErrorType<ErrorDto>) => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
+          onUpdateError(error.response?.data.message);
         },
       },
     );
@@ -240,8 +276,9 @@ export const useHomeTodosByDate = (
       { todoId: movedTodo.todoId, data: { newIndex: toIndex, date: dateKey } },
       {
         onSuccess: invalidateHomeAndFocus,
-        onError: () => {
+        onError: (error: ErrorType<ErrorDto>) => {
           setTodosByDate((prev) => ({ ...prev, [dateKey]: previous }));
+          onUpdateError(error.response?.data.message);
         },
       },
     );
@@ -250,6 +287,7 @@ export const useHomeTodosByDate = (
   return {
     todosByDate,
     activeTimer,
+    isTimerActionPending,
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts
index 9e3abf30..73708040 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/todo-mock.ts
@@ -15,7 +15,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     durationSeconds: 7200,
     priority: "HIGH",
     tag: { tagId: 3, name: "work" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: true,
     timerStatus: "RUNNING",
     sortOrder: 0,
@@ -28,7 +28,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     durationSeconds: 5400,
     priority: "VERY_HIGH",
     tag: { tagId: 1, name: "assignment" },
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 1,
@@ -47,7 +47,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     durationSeconds: 1800,
     priority: "LOW",
     tag: { tagId: 4, name: "exercise" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: true,
     timerStatus: "STOPPED",
     sortOrder: 2,
@@ -60,7 +60,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     durationSeconds: 1800,
     priority: "MEDIUM",
     tag: { tagId: 5, name: "additional" },
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 3,
@@ -73,7 +73,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     durationSeconds: 3600,
     priority: "MEDIUM",
     tag: { tagId: 2, name: "dailyLife" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 4,
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx
index 7801a1d7..ee8f53db 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/page.tsx
@@ -8,7 +8,7 @@ export default function HomePage() {
       <AsyncBoundary>
         <HomeHeaderContainer />
       </AsyncBoundary>
-      <section className="min-h-0 flex-1 px-5 pt-2.5">
+      <section className="min-h-0 flex-1 px-5 pt-2.5 pb-3">
         <AsyncBoundary>
           <HomeTodoContainer />
         </AsyncBoundary>
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
index 52ae7af6..381cd1b3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
@@ -2,8 +2,6 @@ import {
   PlayDisabledIcon,
   PlayIcon,
   StopIcon,
-  TrashDisableIcon,
-  TrashOnIcon,
 } from "@repo/timo-design-system/icons";
 import {
   Checkbox,
@@ -40,7 +38,7 @@ export interface TodayTodoCardToolbar {
   time: string;
   priority?: PriorityLevel;
   tag?: string;
-  hasMemo: boolean;
+  hasSubtask: boolean;
   hasRepeat: boolean;
 }
 
@@ -185,7 +183,7 @@ export const TodayTodoCard = ({
             tagLabel={toolbar.tag ?? "태그"}
             tags={[]}
             selectedTag={toolbar.tag}
-            hasMemo={toolbar.hasMemo}
+            hasMemo={toolbar.hasSubtask}
             isRepeatActive={toolbar.hasRepeat}
             repeat={{
               detailHeading: "상세 설정",
@@ -200,7 +198,6 @@ export const TodayTodoCard = ({
             }}
           />
         </div>
-        <span>{isDimmed ? <TrashDisableIcon /> : <TrashOnIcon />}</span>
       </div>
     </div>
   );
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
index 63646197..c878be44 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoListContainer.tsx
@@ -10,10 +10,13 @@ import { TodayDateHeaderContainer } from "@/app/[locale]/(main)/(with-time-sideb
 import { TodayTodoCardContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer";
 import { useTodayTodoList } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList";
 import { useTodayQuery } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_queries/use-today-query";
+import { TodayCalendarEventCard } from "@/components/calendar/TodayCalendarEventCard";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { StopCompleteModalContainer } from "@/containers/timer/StopCompleteModalContainer";
 import { DetailTodoModalContainer } from "@/containers/todo-modal/detail/DetailTodoModalContainer";
-import { formatDate } from "@/utils/date/date";
+import { useMyProfileQuery } from "@/queries/auth/use-my-profile-query";
+import { useCalendarEventsQuery } from "@/queries/calendar/use-calendar-events-query";
+import { formatShortDateLabel, parseDateKey } from "@/utils/date/date";
 import { convertDurationToMinutes } from "@/utils/duration/convert-duration-to-minutes";
 import { convertDurationToTimeText } from "@/utils/duration/convert-duration-to-time-text";
 
@@ -31,6 +34,13 @@ const renderTodoIcon = (icon: string | undefined) => {
 export const TodayTodoListContainer = () => {
   const tToast = useTranslations("Toast");
   const { data } = useTodayQuery();
+  const { data: profile } = useMyProfileQuery();
+  const { data: calendarEventsData } = useCalendarEventsQuery({
+    filter: "DAY",
+    baseDate: data.date.slice(0, 10),
+    enabled: profile.calendarConnected,
+  });
+  const calendarEvents = calendarEventsData?.days[0]?.events ?? [];
 
   const [pendingCompleteTodoId, setPendingCompleteTodoId] = useState<
     number | null
@@ -59,6 +69,8 @@ export const TodayTodoListContainer = () => {
     onStopFeedback: setFeedbackText,
     onPlayError: (message) =>
       setPlayErrorMessage(message ?? tToast("timerStartFailed")),
+    onUpdateError: (message) =>
+      setPlayErrorMessage(message ?? tToast("todoUpdateFailed")),
   });
 
   const handleConfirmPendingComplete = () => {
@@ -71,9 +83,7 @@ export const TodayTodoListContainer = () => {
   const completedCount = todos.filter((todo) => todo.completed).length;
 
   const plannedMinutes = activeTimer
-    ? convertDurationToMinutes(
-        activeTimer.plannedSeconds + activeTimer.extendedSeconds,
-      )
+    ? convertDurationToMinutes(activeTimer.plannedSeconds)
     : 0;
   const actualMinutes = activeTimer
     ? convertDurationToMinutes(activeTimer.elapsedSeconds)
@@ -83,12 +93,20 @@ export const TodayTodoListContainer = () => {
     <div className="flex h-full flex-col gap-2">
       <TodayDateHeaderContainer
         completedCount={completedCount}
-        totalCount={todos.length}
+        totalCount={todos.length + calendarEvents.length}
       />
       <div className="flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto pr-1 pb-4">
+        {calendarEvents.map((event, index) => (
+          <TodayCalendarEventCard
+            key={`${event.title}-${index}`}
+            title={event.title}
+          />
+        ))}
         {todos.map((todo) => {
           const isActiveTodo =
-            activeTimer && activeTimer.todoId === todo.todoId;
+            activeTimer &&
+            activeTimer.todoId === todo.todoId &&
+            activeTimer.date === todo.date;
           const durationSeconds = isActiveTodo
             ? activeTimer.plannedSeconds + activeTimer.extendedSeconds
             : todo.durationSeconds;
@@ -116,12 +134,14 @@ export const TodayTodoListContainer = () => {
                   timerStatus={timerStatus}
                   isPlayHighlighted={isPlayHighlighted}
                   toolbar={{
-                    date: formatDate(todo.date),
-                    dateValue: new Date(todo.date),
+                    date: formatShortDateLabel(
+                      parseDateKey(todo.date) ?? new Date(),
+                    ),
+                    dateValue: parseDateKey(todo.date) ?? new Date(),
                     time: convertDurationToTimeText(durationSeconds),
                     priority: todo.priority,
                     tag: todo.tag?.name,
-                    hasMemo: todo.hasMemo,
+                    hasSubtask: todo.hasSubtask,
                     hasRepeat: todo.isRepeated,
                   }}
                   subTodos={todo.subtasks.map((s) => ({
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
index b4b49af2..99b4cf8b 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/useTodayTodoList.ts
@@ -7,7 +7,6 @@ import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto } from "@/api/generated/models";
 import type { TodayTodo } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_types/today-type";
 
-import { getGetTodayQueryKey } from "@/api/generated/endpoints/home/home";
 import {
   useChangeStatus,
   useStartTimer,
@@ -27,6 +26,7 @@ export interface UseTodayTodoListOptions {
   onTimerAlreadyRunning: () => void;
   onStopFeedback: (feedbackText: string | undefined) => void;
   onPlayError: (message: string | undefined) => void;
+  onUpdateError: (message: string | undefined) => void;
 }
 
 export const useTodayTodoList = (
@@ -36,25 +36,46 @@ export const useTodayTodoList = (
     onTimerAlreadyRunning,
     onStopFeedback,
     onPlayError,
+    onUpdateError,
   }: UseTodayTodoListOptions,
 ) => {
   const [todos, setTodos] = useState<TodayTodo[]>(initialTodos);
   const openTimerPanel = useTimeSidebarStore((state) => state.openTimerPanel);
   const queryClient = useQueryClient();
-  const { data: activeTimer } = useActiveTimer();
+  const { data: activeTimer, isFetching: isActiveTimerFetching } =
+    useActiveTimer();
   const { mutate: changeTodoStatus } = useChangeTodoStatus();
   const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
   const { mutate: stopTimer } = useStopTimer();
-  const { invalidateTimerState, invalidateTimeBoxes } =
-    useTimerQueryInvalidation();
+  const {
+    invalidateTimerState,
+    invalidateTimeBoxes,
+    invalidateTodayView,
+    invalidateFocusTodo,
+  } = useTimerQueryInvalidation();
 
-  const { mutate: startTimer } = useStartTimer({
-    mutation: { onSuccess: invalidateTimerState },
-  });
-  const { mutate: changeStatus } = useChangeStatus({
-    mutation: { onSuccess: invalidateTimerState },
+  const { mutate: startTimer, isPending: isStartTimerPending } = useStartTimer({
+    mutation: {
+      onSuccess: () => {
+        invalidateTimerState();
+        invalidateFocusTodo();
+      },
+    },
   });
 
+  const { mutate: changeStatus, isPending: isChangeStatusPending } =
+    useChangeStatus({
+      mutation: {
+        onSuccess: () => {
+          invalidateTimerState();
+          invalidateFocusTodo();
+        },
+      },
+    });
+
+  const isTimerActionPending =
+    isStartTimerPending || isChangeStatusPending || isActiveTimerFetching;
+
   useEffect(() => {
     setTodos(initialTodos);
   }, [initialTodos]);
@@ -68,9 +89,6 @@ export const useTodayTodoList = (
     );
   };
 
-  const invalidateTodayView = () => {
-    queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
-  };
   const invalidateTodoDetail = (todoId: number, dateKey: string) => {
     queryClient.invalidateQueries({
       queryKey: getGetTodoDetailQueryKey(todoId, { date: dateKey }),
@@ -78,14 +96,18 @@ export const useTodayTodoList = (
   };
 
   const handleToggleCompleted = (todoId: number, completed: boolean) => {
-    if (completed && activeTimer?.todoId === todoId) {
+    const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
+    if (!dateKey) return;
+
+    if (
+      completed &&
+      activeTimer?.todoId === todoId &&
+      activeTimer.date === dateKey
+    ) {
       onNeedStopConfirm(todoId);
       return;
     }
 
-    const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
-    if (!dateKey) return;
-
     const previous = todos;
     updateTodo(todoId, (todo) => ({ ...todo, completed }));
 
@@ -96,9 +118,11 @@ export const useTodayTodoList = (
           invalidateTodayView();
           invalidateTimeBoxes();
           invalidateTodoDetail(todoId, dateKey);
+          invalidateFocusTodo();
         },
-        onError: () => {
+        onError: (error: ErrorType<ErrorDto>) => {
           setTodos(previous);
+          onUpdateError(error.response?.data.message);
         },
       },
     );
@@ -124,6 +148,7 @@ export const useTodayTodoList = (
               onSuccess: () => {
                 invalidateTodayView();
                 invalidateTodoDetail(todoId, dateKey);
+                invalidateFocusTodo();
               },
             },
           );
@@ -133,6 +158,8 @@ export const useTodayTodoList = (
   };
 
   const handlePlay = (todoId: number) => {
+    if (isTimerActionPending) return;
+
     const dateKey = todos.find((todo) => todo.todoId === todoId)?.date;
     if (!dateKey) return;
 
@@ -143,7 +170,11 @@ export const useTodayTodoList = (
       openTimerPanel();
     }
 
-    if (activeTimer && activeTimer.todoId === todoId) {
+    if (
+      activeTimer &&
+      activeTimer.todoId === todoId &&
+      activeTimer.date === dateKey
+    ) {
       changeStatus(
         {
           timerId: activeTimer.timerId,
@@ -163,7 +194,7 @@ export const useTodayTodoList = (
     }
 
     startTimer(
-      { todoId },
+      { todoId, params: { date: dateKey } },
       {
         onSuccess: () => invalidateTodoDetail(todoId, dateKey),
         onError: (error: ErrorType<ErrorDto>) => {
@@ -207,9 +238,11 @@ export const useTodayTodoList = (
         onSuccess: () => {
           invalidateTodayView();
           invalidateTodoDetail(todoId, dateKey);
+          invalidateFocusTodo();
         },
-        onError: () => {
+        onError: (error: ErrorType<ErrorDto>) => {
           setTodos(previous);
+          onUpdateError(error.response?.data.message);
         },
       },
     );
@@ -218,6 +251,7 @@ export const useTodayTodoList = (
   return {
     todos,
     activeTimer,
+    isTimerActionPending,
     handlePlay,
     handleToggleCompleted,
     handleDelete,
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts
index 41ebd086..c7344633 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock.ts
@@ -18,7 +18,7 @@ export interface TodoMock {
   durationSeconds: number;
   priority: "URGENT" | "HIGH" | "MEDIUM" | "LOW";
   tag: TodoTag | null;
-  hasMemo: boolean;
+  hasSubtask: boolean;
   isRepeated: boolean;
   timerStatus: "RUNNING" | "PAUSED" | "STOPPED";
   sortOrder: number;
@@ -35,7 +35,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 36000,
     priority: "URGENT",
     tag: { tagId: 1, name: "작업" },
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 0,
@@ -53,7 +53,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 3600,
     priority: "MEDIUM",
     tag: { tagId: 2, name: "완료" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 1,
@@ -68,7 +68,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 1800,
     priority: "HIGH",
     tag: null,
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: true,
     timerStatus: "STOPPED",
     sortOrder: 2,
@@ -83,7 +83,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 7200,
     priority: "HIGH",
     tag: { tagId: 3, name: "개발" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 3,
@@ -101,7 +101,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 2700,
     priority: "MEDIUM",
     tag: { tagId: 4, name: "회의" },
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: true,
     timerStatus: "STOPPED",
     sortOrder: 4,
@@ -116,7 +116,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 5400,
     priority: "URGENT",
     tag: { tagId: 1, name: "작업" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 5,
@@ -131,7 +131,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 4500,
     priority: "LOW",
     tag: { tagId: 3, name: "개발" },
-    hasMemo: false,
+    hasSubtask: false,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 6,
@@ -149,7 +149,7 @@ export const todayTodoMocks: TodoMock[] = [
     durationSeconds: 9000,
     priority: "HIGH",
     tag: { tagId: 3, name: "개발" },
-    hasMemo: true,
+    hasSubtask: true,
     isRepeated: false,
     timerStatus: "STOPPED",
     sortOrder: 7,
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
index a29c3ed1..1002ba8f 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
+++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
@@ -47,7 +47,7 @@ export const FocusTaskItem = ({
 
       <div className="flex w-full items-center gap-2.5">
         <Checkbox checked={completed} onChange={onToggleCompleted} />
-        <p className="typo-headline-b-22 text-timo-black min-w-0 flex-1 wrap-break-word">
+        <p className="typo-headline-b-22 text-timo-black min-w-0 flex-1 wrap-anywhere">
           {title}
         </p>
       </div>
@@ -82,7 +82,7 @@ export const FocusTaskItem = ({
         </PlayButton>
       </div>
 
-      <div className="border-timo-gray-500 flex min-h-26 w-full min-w-0 flex-col gap-3 border-t pt-3">
+      <div className="border-timo-gray-500 flex max-h-[40vh] min-h-26 w-full min-w-0 flex-col gap-3 overflow-y-auto border-t pt-3">
         {subtasks.map((subtask) => (
           <div key={subtask.subtaskId} className="flex items-center gap-2">
             <Checkbox
@@ -93,7 +93,7 @@ export const FocusTaskItem = ({
             />
             <p
               className={cn(
-                "typo-body-r-12 min-w-0 flex-1 wrap-break-word",
+                "typo-body-r-12 min-w-0 flex-1 wrap-anywhere",
                 subtask.completed ? "text-timo-gray-700" : "text-timo-black",
               )}
             >
@@ -103,7 +103,7 @@ export const FocusTaskItem = ({
         ))}
 
         {memo && (
-          <p className="typo-body-r-12 text-timo-gray-800 min-w-0 wrap-break-word">
+          <p className="typo-body-r-12 text-timo-gray-800 min-w-0 wrap-anywhere">
             {memo}
           </p>
         )}
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx
index 39feabbb..ff5cf58e 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/focus/_containers/FocusSessionContainer.tsx
@@ -121,7 +121,7 @@ export const FocusSessionContainer = () => {
             ref={focusSessionState.timerSessionControlsRef}
             isRunning={focusSessionState.isRunning}
             onTogglePlay={focusSessionActions.onTogglePlay}
-            plannedMinutes={focusSessionState.plannedMinutes}
+            plannedMinutes={focusSessionState.basePlannedMinutes}
             actualMinutes={focusSessionState.actualMinutes}
             feedbackText={feedbackText}
             isTimeUp={focusSessionState.isTimeUp}
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts b/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
index 60ccb1fe..066e8575 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
+++ b/apps/timo-web/app/[locale]/(main)/focus/_hooks/use-focus-session.ts
@@ -5,7 +5,6 @@ import { useEffect, useRef } from "react";
 
 import type { TimerSessionControlsHandle } from "@/components/timer/TimerSessionControls";
 
-import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
 import {
   useChangeStatus,
   useCompleteTimer,
@@ -14,6 +13,7 @@ import {
   useStopTimer,
 } from "@/api/generated/endpoints/timer/timer";
 import {
+  getGetTodoDetailQueryKey,
   useChangeSubtaskStatus,
   useChangeTodoStatus,
 } from "@/api/generated/endpoints/todo/todo";
@@ -41,10 +41,20 @@ export const useFocusSession = ({
   const { data: focusView } = useFocusTodoQuery();
   const { data: activeTimer } = useActiveTimer();
 
-  const { invalidateActiveTimer, invalidateHomeView, invalidateTimeBoxes } =
-    useTimerQueryInvalidation();
-  const invalidateFocusTodo = () =>
-    queryClient.invalidateQueries({ queryKey: getGetFocusTodoQueryKey() });
+  const {
+    invalidateActiveTimer,
+    invalidateHomeView,
+    invalidateTimeBoxes,
+    invalidateTodayView,
+    invalidateFocusTodo,
+  } = useTimerQueryInvalidation();
+  const invalidateTodoDetail = () => {
+    const todo = focusView.todo;
+    if (!todo) return;
+    queryClient.invalidateQueries({
+      queryKey: getGetTodoDetailQueryKey(todo.todoId, { date: focusView.date }),
+    });
+  };
 
   const { mutate: startTimer } = useStartTimer({
     mutation: {
@@ -84,6 +94,8 @@ export const useFocusSession = ({
         invalidateFocusTodo();
         invalidateHomeView();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateTodoDetail();
       },
       onError: onMutationError,
     },
@@ -96,6 +108,8 @@ export const useFocusSession = ({
         invalidateFocusTodo();
         invalidateHomeView();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateTodoDetail();
       },
       onError: onMutationError,
     },
@@ -105,6 +119,8 @@ export const useFocusSession = ({
       onSuccess: () => {
         invalidateFocusTodo();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateTodoDetail();
       },
       onError: onMutationError,
     },
@@ -114,6 +130,8 @@ export const useFocusSession = ({
       onSuccess: () => {
         invalidateFocusTodo();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateTodoDetail();
       },
       onError: onMutationError,
     },
@@ -121,7 +139,10 @@ export const useFocusSession = ({
 
   const todo = focusView.todo;
   const timer =
-    activeTimer && todo && activeTimer.todoId === todo.todoId
+    activeTimer &&
+    todo &&
+    activeTimer.todoId === todo.todoId &&
+    activeTimer.date === focusView.date
       ? activeTimer
       : undefined;
   const isRunning = timer?.status === "RUNNING";
@@ -157,7 +178,9 @@ export const useFocusSession = ({
     stopTimer,
     changeTodoStatus,
     onNoTimer: () => {
-      if (todo) startTimer({ todoId: todo.todoId });
+      if (todo) {
+        startTimer({ todoId: todo.todoId, params: { date: focusView.date } });
+      }
     },
   });
 
@@ -215,6 +238,10 @@ export const useFocusSession = ({
         )
       : 0;
   const plannedMinutes = convertDurationToMinutes(plannedSeconds);
+  // 완료 모달의 "계획"은 연장 시간을 제외한 순수 계획 시간만 보여줘야 한다
+  const basePlannedMinutes = convertDurationToMinutes(
+    timer ? timer.plannedSeconds : (todo?.durationSeconds ?? 0),
+  );
   const actualMinutes = convertDurationToMinutes(timer?.elapsedSeconds ?? 0);
 
   return {
@@ -232,6 +259,7 @@ export const useFocusSession = ({
       isOvertime,
       overtimeProgress,
       plannedMinutes,
+      basePlannedMinutes,
       actualMinutes,
     },
     focusSessionActions: {
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx
new file mode 100644
index 00000000..b9f3c1fa
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
+import { ModalButton } from "@repo/timo-design-system/ui";
+import Image from "next/image";
+
+import type { SettingsProfileLabels } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
+
+import { OverlayModal } from "@/components/modal/OverlayModal";
+
+export interface SettingsCalendarDisconnectModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  labels: SettingsProfileLabels;
+  onDisconnect: () => void;
+}
+
+export const SettingsCalendarDisconnectModal = ({
+  isOpen,
+  onClose,
+  onExited,
+  labels,
+  onDisconnect,
+}: SettingsCalendarDisconnectModalProps) => {
+  return (
+    <OverlayModal
+      isOpen={isOpen}
+      onClose={onClose}
+      onExited={onExited}
+      ariaLabel={labels.calendarDisconnectConfirmTitle}
+      className="w-100 p-5.5"
+    >
+      <div className="mb-4 size-10 shrink-0">
+        <Image src={timoTimerLogo} alt="" width={40} height={40} />
+      </div>
+      <p className="typo-headline-b-18 text-timo-black">
+        {labels.calendarDisconnectConfirmTitle}
+      </p>
+      <p className="typo-headline-r-14 text-timo-gray-900 mt-1">
+        {labels.calendarDisconnectConfirmDescription}
+      </p>
+      <div className="mt-6 flex w-full gap-3">
+        <ModalButton variant="border" className="flex-1 px-0" onClick={onClose}>
+          {labels.calendarDisconnectConfirmCancel}
+        </ModalButton>
+        <ModalButton
+          variant="fill"
+          className="flex-1 px-0"
+          onClick={() => {
+            onDisconnect();
+            onClose();
+          }}
+        >
+          {labels.calendarDisconnectConfirmConfirm}
+        </ModalButton>
+      </div>
+    </OverlayModal>
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index e42a4451..a5e8f4a4 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -101,7 +101,10 @@ export const SettingsProfileView = ({
               </span>
             </div>
 
-            <PillButton variant="blue" onClick={onConnectCalendar}>
+            <PillButton
+              variant={isCalendarConnected ? "gray-dark" : "blue"}
+              onClick={onConnectCalendar}
+            >
               {isCalendarConnected ? labels.disconnect : labels.connect}
             </PillButton>
           </div>
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
index 8e1f8d8c..d05bfab9 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsProfileContainer.tsx
@@ -4,11 +4,14 @@ import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 import { useState } from "react";
 
+import { TagLimitToastContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer";
+import { SettingsCalendarDisconnectModal } from "@/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal";
 import { SettingsProfileView } from "@/app/[locale]/(main)/settings/_components/account/SettingsProfileView";
 import { useSettingsProfile } from "@/app/[locale]/(main)/settings/_hooks/account/use-settings-profile";
 import { useSettingsProfileLabels } from "@/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels";
 import { CreateTagModalContainer } from "@/components/tag/CreateTagModalContainer";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
+import { MAX_CUSTOM_TAG_COUNT } from "@/schemas/tag/tag-schema";
 
 export const SettingsProfileContainer = () => {
   const tToast = useTranslations("Toast");
@@ -19,14 +22,43 @@ export const SettingsProfileContainer = () => {
   const [isCalendarConnected, setIsCalendarConnected] = useState(
     profileState.calendarConnected,
   );
+  const [isCalendarConnectErrorToastOpen, setIsCalendarConnectErrorToastOpen] =
+    useState(false);
+  const [
+    isCalendarDisconnectErrorToastOpen,
+    setIsCalendarDisconnectErrorToastOpen,
+  ] = useState(false);
   const [isTagErrorToastOpen, setIsTagErrorToastOpen] = useState(false);
+  const [isTagLimitToastOpen, setIsTagLimitToastOpen] = useState(false);
   const [isLanguageErrorToastOpen, setIsLanguageErrorToastOpen] =
     useState(false);
 
   const handleConnectCalendar = () => {
-    profileActions.onConnectCalendar(isCalendarConnected, {
+    if (isCalendarConnected) {
+      overlay.open(({ isOpen, close, unmount }) => (
+        <SettingsCalendarDisconnectModal
+          isOpen={isOpen}
+          onClose={close}
+          onExited={unmount}
+          labels={labels}
+          onDisconnect={() =>
+            profileActions.onConnectCalendar(true, {
+              onConnect: () => setIsCalendarConnected(true),
+              onDisconnect: () => setIsCalendarConnected(false),
+              onDisconnectError: () =>
+                setIsCalendarDisconnectErrorToastOpen(true),
+            })
+          }
+        />
+      ));
+      return;
+    }
+
+    profileActions.onConnectCalendar(false, {
       onConnect: () => setIsCalendarConnected(true),
       onDisconnect: () => setIsCalendarConnected(false),
+      onConnectError: () => setIsCalendarConnectErrorToastOpen(true),
+      onDisconnectError: () => setIsCalendarDisconnectErrorToastOpen(true),
     });
   };
 
@@ -37,6 +69,15 @@ export const SettingsProfileContainer = () => {
   };
 
   const handleAddTag = () => {
+    const customTagCount = profileState.tags.filter(
+      (tag) => !tag.isDefault,
+    ).length;
+
+    if (customTagCount >= MAX_CUSTOM_TAG_COUNT) {
+      setIsTagLimitToastOpen(true);
+      return;
+    }
+
     const existingLabels = profileState.tags.map((tag) => tag.label);
 
     overlay.open(({ isOpen, close, unmount }) => (
@@ -78,6 +119,22 @@ export const SettingsProfileContainer = () => {
         onLogout={profileActions.onLogout}
       />
 
+      {isTagLimitToastOpen && (
+        <TagLimitToastContainer onClose={() => setIsTagLimitToastOpen(false)} />
+      )}
+
+      <AnimatedToast
+        isOpen={isCalendarConnectErrorToastOpen}
+        onClose={() => setIsCalendarConnectErrorToastOpen(false)}
+        message={tToast("calendarConnectFailed")}
+      />
+
+      <AnimatedToast
+        isOpen={isCalendarDisconnectErrorToastOpen}
+        onClose={() => setIsCalendarDisconnectErrorToastOpen(false)}
+        message={tToast("calendarDisconnectFailed")}
+      />
+
       <AnimatedToast
         isOpen={isTagErrorToastOpen}
         onClose={() => setIsTagErrorToastOpen(false)}
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
index 518bb679..b93fb0eb 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/terms/SettingsTermsContainer.tsx
@@ -18,7 +18,7 @@ export const SettingsTermsContainer = ({
   const { data: term } = useTermsQuery(type);
 
   return (
-    <div className="px-15 pt-7.5">
+    <div className="px-15 pt-7.5 pb-12.5">
       {term ? (
         <PolicyDocument title={term.title} content={term.content} />
       ) : (
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
index 3715772a..ff7e913c 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile-labels.ts
@@ -32,6 +32,18 @@ export const useSettingsProfileLabels = (): SettingsProfileLabels => {
     logoutConfirmDescription: tSettings("profile.logoutConfirmDescription"),
     logoutConfirmCancel: tSettings("profile.logoutConfirmCancel"),
     logoutConfirmConfirm: tSettings("profile.logoutConfirmConfirm"),
+    calendarDisconnectConfirmTitle: tSettings(
+      "profile.calendarDisconnectConfirmTitle",
+    ),
+    calendarDisconnectConfirmDescription: tSettings(
+      "profile.calendarDisconnectConfirmDescription",
+    ),
+    calendarDisconnectConfirmCancel: tSettings(
+      "profile.calendarDisconnectConfirmCancel",
+    ),
+    calendarDisconnectConfirmConfirm: tSettings(
+      "profile.calendarDisconnectConfirmConfirm",
+    ),
     removeTag: (tag: string) => tSettings("profile.removeTag", { tag }),
   };
 };
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
index d39378c0..43104439 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_hooks/account/use-settings-profile.ts
@@ -5,6 +5,11 @@ import { useTranslations } from "next-intl";
 
 import type { SettingsLanguage } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
 
+import {
+  authorize,
+  useDisconnectCalendar,
+  getGetCalendarEventsQueryKey,
+} from "@/api/generated/endpoints/calendar/calendar";
 import {
   getGetMyProfileQueryKey,
   useUpdateLanguage,
@@ -16,8 +21,11 @@ import { useMyProfileQuery } from "@/queries/auth/use-my-profile-query";
 import { useCreateTagMutation } from "@/queries/tag/use-create-tag-mutation";
 import { useDeleteTagMutation } from "@/queries/tag/use-delete-tag-mutation";
 import { useTagsQuery } from "@/queries/tag/use-tags-query";
-import { tagCreateDataSchema } from "@/schemas/tag/tag-schema";
-import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
+import {
+  MAX_CUSTOM_TAG_COUNT,
+  tagCreateDataSchema,
+} from "@/schemas/tag/tag-schema";
+import { getDefaultTagLabelKey, isDefaultTagId } from "@/utils/todo/tag-label";
 
 const LANGUAGE_REQUEST_MAP: Record<
   SettingsLanguage,
@@ -38,6 +46,8 @@ export interface CreateTagHandlers extends ActionErrorHandlers {
 export interface ConnectCalendarHandlers {
   onConnect: () => void;
   onDisconnect: () => void;
+  onConnectError?: () => void;
+  onDisconnectError?: () => void;
 }
 
 export const useSettingsProfile = () => {
@@ -46,6 +56,7 @@ export const useSettingsProfile = () => {
 
   const { data: profile } = useMyProfileQuery();
 
+  const { mutate: disconnectCalendar } = useDisconnectCalendar();
   const { mutateAsync: updateLanguage } = useUpdateLanguage();
   const queryClient = useQueryClient();
 
@@ -55,38 +66,60 @@ export const useSettingsProfile = () => {
   const { mutate: logoutMutate, isPending: isLoggingOut } = useLogoutMutation();
 
   const tagItems = (tagsQuery.data?.tags ?? []).map((tag) => {
-    const labelKey = tag.isDefault
-      ? getDefaultTagLabelKey(tag.tagId)
-      : undefined;
+    const isDefault = isDefaultTagId(tag.tagId);
+    const labelKey = isDefault ? getDefaultTagLabelKey(tag.tagId) : undefined;
 
     return {
       id: tag.tagId,
       label: labelKey ? tCommon(`tag.${labelKey}`) : tag.name,
-      isDefault: tag.isDefault,
+      isDefault,
     };
   });
 
-  const handleConnectCalendar = (
+  const handleConnectCalendar = async (
     isCalendarConnected: boolean,
     handlers: ConnectCalendarHandlers,
   ) => {
     if (isCalendarConnected) {
-      // TODO: 실제 확인 모달로 교체
-      const confirmed = window.confirm("구글 캘린더 연동을 해제하시겠습니까?");
-      if (!confirmed) return;
-
-      // TODO: API - 연동 토큰 파기
-      console.log("구글 캘린더 연동 토큰을 파기합니다.");
-      handlers.onDisconnect();
+      disconnectCalendar(undefined, {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: getGetMyProfileQueryKey(),
+          });
+          queryClient.removeQueries({
+            queryKey: getGetCalendarEventsQueryKey(),
+          });
+          handlers.onDisconnect();
+        },
+        onError: () => {
+          handlers.onDisconnectError?.();
+        },
+      });
       return;
     }
 
-    // TODO: Google 계정 인증 및 캘린더 접근 권한 동의 팝업 호출
-    console.log("Google Calendar 연동 인증 팝업을 호출합니다.");
-    handlers.onConnect();
+    try {
+      const response = await authorize();
+      const url = response.data?.authorizationUrl;
+      if (!url) {
+        handlers.onConnectError?.();
+        return;
+      }
+      localStorage.setItem("calendarConnectOrigin", "settings");
+      window.location.assign(url);
+    } catch {
+      handlers.onConnectError?.();
+    }
   };
 
   const handleCreateTag = (label: string, handlers: CreateTagHandlers) => {
+    const customTagCount = tagItems.filter((tag) => !tag.isDefault).length;
+
+    if (customTagCount >= MAX_CUSTOM_TAG_COUNT) {
+      handlers.onError();
+      return;
+    }
+
     createTag(
       { name: label },
       {
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts b/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
index 0d16762e..a03dbfdd 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/settings/_types/account/profile-type.ts
@@ -29,5 +29,9 @@ export interface SettingsProfileLabels {
   logoutConfirmDescription: string;
   logoutConfirmCancel: string;
   logoutConfirmConfirm: string;
+  calendarDisconnectConfirmTitle: string;
+  calendarDisconnectConfirmDescription: string;
+  calendarDisconnectConfirmCancel: string;
+  calendarDisconnectConfirmConfirm: string;
   removeTag: (tag: string) => string;
 }
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 69d2756f..98b16dad 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsCalendar.tsx
@@ -85,7 +85,7 @@ export const StatisticsCalendar = ({
   return (
     <section className="min-w-0 flex-1 overflow-x-auto px-14.75 pt-10 pb-13">
       <div className="w-199.5">
-        <div className="sticky top-0 z-10 bg-white pb-5">
+        <div className="pb-5">
           <div className="flex flex-col gap-2 pb-[69px]">
             <h1 className="typo-headline-b-30 text-timo-gray-900">
               {formatStatisticsMonth(currentMonth, locale)}
@@ -112,7 +112,7 @@ export const StatisticsCalendar = ({
           </div>
         </div>
 
-        <div className="grid grid-cols-7 gap-x-14 gap-y-5 bg-white">
+        <div className="grid grid-cols-7 gap-x-14 gap-y-5">
           {Array.from({ length: firstDayOffset }, (_, index) => (
             <div key={`empty-${index}`} />
           ))}
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 4037f77d..35b72c2a 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_components/StatisticsSidePanel.tsx
@@ -28,7 +28,7 @@ export type StatisticsSidePanelProps =
   | StatisticsDaySidePanelProps;
 
 const SIDE_PANEL_CLASS_NAME =
-  "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 border-l text-timo-black";
+  "border-timo-gray-500 bg-white h-full w-[304px] shrink-0 overflow-y-auto border-l text-timo-black";
 
 const getDiffLabel = (
   diffMinutes: number,
@@ -102,14 +102,18 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
       </div>
 
       <ul className="mt-5.5 flex flex-col">
-        {detail.todos.map((todo) => {
+        {detail.todos.map((todo, index) => {
           const diffMinutes =
             todo.actualTimeMinutes - todo.estimatedTimeMinutes;
+          const isLastTodo = index === detail.todos.length - 1;
 
           return (
             <li
               key={todo.todoId}
-              className="border-timo-gray-500 flex justify-between border-b py-2.5"
+              className={cn(
+                "flex justify-between py-2.5 pt-5",
+                !isLastTodo && "border-timo-gray-500 border-b",
+              )}
             >
               <div className="flex flex-col items-start gap-2">
                 <p className="typo-headline-r-14 text-timo-gray-900">
@@ -128,7 +132,9 @@ export const StatisticsSidePanel = (props: StatisticsSidePanelProps) => {
                   {formatStatisticsClockText(todo.estimatedTimeMinutes)}
                 </span>
 
-                <span className={getDiffClassName(diffMinutes)}>
+                <span
+                  className={cn("min-h-[18px]", getDiffClassName(diffMinutes))}
+                >
                   {getDiffLabel(diffMinutes, t)}
                 </span>
               </div>
diff --git a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
index 2472c9a5..10dfd4b9 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsCalendarContainer.tsx
@@ -1,10 +1,7 @@
 "use client";
 
-import { useTranslations } from "next-intl";
-
 import { StatisticsCalendar } from "@/app/[locale]/(main)/statistics/_components/StatisticsCalendar";
 import { useStatisticsCalendarQuery } from "@/app/[locale]/(main)/statistics/_queries/use-statistics-query";
-import { LottiePlayer } from "@/components/lottie/LottiePlayer";
 import { formatDateKey } from "@/utils/date/date";
 
 interface StatisticsCalendarContainerProps {
@@ -14,56 +11,18 @@ interface StatisticsCalendarContainerProps {
   onSelectDate: (date: Date) => void;
 }
 
-interface StatisticsCalendarStatusProps {
-  lottieSrc: string;
-  message: string;
-  role?: "status" | "alert";
-}
-
-const StatisticsCalendarStatus = ({
-  lottieSrc,
-  message,
-  role = "status",
-}: StatisticsCalendarStatusProps) => {
-  return (
-    <section
-      className="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 px-14.75 pt-10 pb-13 text-center"
-      role={role}
-    >
-      <LottiePlayer src={lottieSrc} className="w-[143px]" ariaLabel={message} />
-      <p className="typo-headline-m-14 text-timo-gray-900">{message}</p>
-    </section>
-  );
-};
-
 export const StatisticsCalendarContainer = ({
   currentMonth,
   displayDate,
   selectedDate,
   onSelectDate,
 }: StatisticsCalendarContainerProps) => {
-  const t = useTranslations("Statistics.calendar");
   const yearMonth = formatDateKey(currentMonth).slice(0, 7);
   const calendarQuery = useStatisticsCalendarQuery(yearMonth);
   const calendarData = calendarQuery.data?.data;
 
-  if (calendarQuery.isPending) {
-    return (
-      <StatisticsCalendarStatus
-        lottieSrc="/lottie/loading.json"
-        message={t("loading")}
-      />
-    );
-  }
-
-  if (calendarQuery.isError || !calendarData) {
-    return (
-      <StatisticsCalendarStatus
-        lottieSrc="/lottie/error.json"
-        message={t("error")}
-        role="alert"
-      />
-    );
+  if (calendarQuery.isPending || calendarQuery.isError || !calendarData) {
+    return null;
   }
 
   return (
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 73dd709f..361ba886 100644
--- a/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/statistics/_containers/StatisticsContainer.tsx
@@ -69,13 +69,13 @@ export const StatisticsContainer = () => {
   };
 
   return (
-    <div className="flex h-full">
-      <div className="flex min-w-0 flex-1 flex-col">
+    <div className="flex h-full overflow-hidden">
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
         <StatisticsHeaderContainer
           currentMonth={currentMonth}
           onChangeMonth={handleChangeMonth}
         />
-        <div className="flex min-h-0 flex-1">
+        <div className="min-h-0 flex-1 overflow-auto">
           <StatisticsCalendarContainer
             currentMonth={currentMonth}
             displayDate={selectedDate}
diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx
index 3409e676..1172807c 100644
--- a/apps/timo-web/app/[locale]/layout.tsx
+++ b/apps/timo-web/app/[locale]/layout.tsx
@@ -6,6 +6,7 @@ import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import type { Metadata } from "next";
 
+import { SITE_URL } from "@/constants/site";
 import { routing } from "@/i18n/routing";
 import { AuthProvider } from "@/providers/auth/AuthProvider";
 import { LanguageSyncProvider } from "@/providers/locale/LanguageSyncProvider";
@@ -19,8 +20,6 @@ const pretendard = localFont({
   display: "swap",
 });
 
-const SITE_URL = "https://timo.kr";
-
 const OG_LOCALE: Record<(typeof routing.locales)[number], string> = {
   en: "en_US",
   ko: "ko_KR",
@@ -67,11 +66,20 @@ export async function generateMetadata({
       alternateLocale: routing.locales
         .filter((otherLocale) => otherLocale !== locale)
         .map((otherLocale) => OG_LOCALE[otherLocale]),
+      images: [
+        {
+          url: "/og.png",
+          width: 4800,
+          height: 2520,
+          alt: title,
+        },
+      ],
     },
     twitter: {
-      card: "summary",
+      card: "summary_large_image",
       title,
       description,
+      images: ["/og.png"],
     },
     robots: {
       index: true,
diff --git a/apps/timo-web/app/[locale]/oauth/calendar/callback/_containers/CalendarCallbackContainer.tsx b/apps/timo-web/app/[locale]/oauth/calendar/callback/_containers/CalendarCallbackContainer.tsx
new file mode 100644
index 00000000..3bcfd3c9
--- /dev/null
+++ b/apps/timo-web/app/[locale]/oauth/calendar/callback/_containers/CalendarCallbackContainer.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useRef } from "react";
+
+import { useConnectCalendar } from "@/api/generated/endpoints/calendar/calendar";
+import { getGetMyProfileQueryKey } from "@/api/generated/endpoints/user/user";
+import { ROUTES } from "@/constants/routes";
+import { useRouter } from "@/i18n/navigation";
+
+export const CalendarCallbackContainer = () => {
+  const searchParams = useSearchParams();
+  const code = searchParams.get("code");
+  const state = searchParams.get("state");
+  const error = searchParams.get("error");
+
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { mutate: connectCalendar } = useConnectCalendar();
+  const hasRequested = useRef(false);
+
+  useEffect(() => {
+    const origin = localStorage.getItem("calendarConnectOrigin");
+    const redirectTarget =
+      origin === "settings" ? ROUTES.SETTINGS : ROUTES.HOME;
+
+    if (error || !code || !state) {
+      router.replace(redirectTarget);
+      return;
+    }
+    if (hasRequested.current) return;
+    hasRequested.current = true;
+
+    connectCalendar(
+      { data: { authorizationCode: code, state } },
+      {
+        onSuccess: async () => {
+          await queryClient.invalidateQueries({
+            queryKey: getGetMyProfileQueryKey(),
+          });
+          localStorage.removeItem("calendarConnectOrigin");
+          router.replace(redirectTarget);
+        },
+        onError: () => {
+          router.replace(redirectTarget);
+        },
+      },
+    );
+  }, [code, state, error, connectCalendar, queryClient, router]);
+
+  return null;
+};
diff --git a/apps/timo-web/app/[locale]/oauth/calendar/callback/page.tsx b/apps/timo-web/app/[locale]/oauth/calendar/callback/page.tsx
new file mode 100644
index 00000000..0fecca10
--- /dev/null
+++ b/apps/timo-web/app/[locale]/oauth/calendar/callback/page.tsx
@@ -0,0 +1,10 @@
+import { CalendarCallbackContainer } from "@/app/[locale]/oauth/calendar/callback/_containers/CalendarCallbackContainer";
+import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
+
+export default function CalendarCallbackPage() {
+  return (
+    <AsyncBoundary>
+      <CalendarCallbackContainer />
+    </AsyncBoundary>
+  );
+}
diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
index fc491756..9c6a6a14 100644
--- a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
@@ -34,13 +34,34 @@ export const OnboardingButton = ({
   }
 
   if (variant === "start") {
+    // TODO: 원래 start 버튼 (항상 활성 스타일) — CalendarConnect 단계 재활성화 시 아래 주석 해제 후 isActive 분기 제거
+    // return (
+    //   <button
+    //     type="button"
+    //     onClick={onClick}
+    //     className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
+    //   >
+    //     <span className="typo-headline-m-16 text-white">{label}</span>
+    //   </button>
+    // );
     return (
       <button
         type="button"
         onClick={onClick}
-        className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
+        disabled={disabled || !isActive}
+        className={cn(
+          "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
+          isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
+        )}
       >
-        <span className="typo-headline-m-16 text-white">{label}</span>
+        <span
+          className={cn(
+            "typo-headline-m-16",
+            isActive ? "text-white" : "text-timo-gray-700",
+          )}
+        >
+          {label}
+        </span>
       </button>
     );
   }
diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingStepButton.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingStepButton.tsx
index afda1b95..ae23dac2 100644
--- a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingStepButton.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingStepButton.tsx
@@ -4,7 +4,8 @@ interface OnboardingStepButtonProps {
   step: 1 | 2 | 3 | 4;
 }
 
-const STEPS = [1, 2, 3, 4] as const;
+// TODO: 구글 캘린더 연동 단계 재활성화 시 4 추가
+const STEPS = [1, 2, 3] as const;
 
 export const OnboardingStepButton = ({ step }: OnboardingStepButtonProps) => {
   return (
diff --git a/apps/timo-web/app/[locale]/onboarding/_containers/CalendarConnectStepContainer.tsx b/apps/timo-web/app/[locale]/onboarding/_containers/CalendarConnectStepContainer.tsx
index 3c1ee3c8..dbd4ed35 100644
--- a/apps/timo-web/app/[locale]/onboarding/_containers/CalendarConnectStepContainer.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_containers/CalendarConnectStepContainer.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { useState } from "react";
 
+import { authorize } from "@/api/generated/endpoints/calendar/calendar";
 import { OnboardingButtonContainer } from "@/app/[locale]/onboarding/_containers/OnboardingButtonContainer";
 import { OnboardingGoogleButtonContainer } from "@/app/[locale]/onboarding/_containers/OnboardingGoogleButtonContainer";
 
@@ -18,7 +18,19 @@ export const CalendarConnectStepContainer = ({
   onStart,
 }: CalendarConnectStepContainerProps) => {
   const t = useTranslations("Onboarding");
-  const [isCalendarConnected, setIsCalendarConnected] = useState(false);
+  const isCalendarConnected = false;
+
+  const handleGoogleConnect = async () => {
+    try {
+      const response = await authorize();
+      const url = response.data?.authorizationUrl;
+      if (!url) return;
+      localStorage.setItem("calendarConnectOrigin", "onboarding");
+      window.location.assign(url);
+    } catch {
+      // authorize 실패 시 아무 동작 없음 — 사용자가 재시도 가능
+    }
+  };
 
   return (
     <>
@@ -40,10 +52,7 @@ export const CalendarConnectStepContainer = ({
             <OnboardingGoogleButtonContainer
               variant="connectCalendar"
               isSelected={isCalendarConnected}
-              onClick={() => {
-                // TODO: 실제 구글 캘린더 OAuth 연동 (백엔드 API 확정 후)
-                setIsCalendarConnected(true);
-              }}
+              onClick={handleGoogleConnect}
             />
           </div>
 
diff --git a/apps/timo-web/app/[locale]/onboarding/_containers/LifePatternStepContainer.tsx b/apps/timo-web/app/[locale]/onboarding/_containers/LifePatternStepContainer.tsx
index 2b8f8394..77dd2918 100644
--- a/apps/timo-web/app/[locale]/onboarding/_containers/LifePatternStepContainer.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_containers/LifePatternStepContainer.tsx
@@ -86,8 +86,9 @@ export const LifePatternStepContainer = ({
 
       <div className="mt-auto flex justify-between">
         <OnboardingButtonContainer variant="prev" onClick={onPrev} />
+        {/* TODO: 구글 캘린더 연동 단계 재활성화 시 variant="next"로 복구 */}
         <OnboardingButtonContainer
-          variant="next"
+          variant="start"
           isActive={canProceed}
           disabled={!canProceed}
           onClick={onNext}
diff --git a/apps/timo-web/app/[locale]/onboarding/_containers/OnboardingFunnelContainer.tsx b/apps/timo-web/app/[locale]/onboarding/_containers/OnboardingFunnelContainer.tsx
index 864eacec..bc3f21d7 100644
--- a/apps/timo-web/app/[locale]/onboarding/_containers/OnboardingFunnelContainer.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_containers/OnboardingFunnelContainer.tsx
@@ -60,7 +60,7 @@ export const OnboardingFunnelContainer = () => {
         className="hidden shrink-0 lg:block lg:size-[350px] xl:size-[430px] 2xl:size-[500px]"
         ariaLabel="온보딩 애니메이션"
       />
-      <div className="border-timo-gray-500 shadow-timo flex min-h-153.5 flex-col rounded-[4px] border bg-white px-16 py-12">
+      <div className="border-timo-gray-500 shadow-timo flex h-153.5 w-108 flex-col rounded-[4px] border bg-white px-16 py-12">
         <div className="flex w-76 flex-1 flex-col gap-10">
           <OnboardingStepButton step={STEP_NUMBER[funnel.step]} />
 
@@ -114,12 +114,29 @@ export const OnboardingFunnelContainer = () => {
                     !answers.bedTime
                   )
                     return;
-                  history.push("CalendarConnect", {
-                    language: answers.language,
-                    predictionAccuracy: answers.predictionAccuracy,
-                    wakeUpTime: answers.wakeUpTime,
-                    bedTime: answers.bedTime,
-                  });
+                  // TODO: 구글 캘린더 연동 단계 재활성화 시 아래 completeOnboarding 블록을 제거하고
+                  // history.push("CalendarConnect", { language: answers.language, predictionAccuracy: answers.predictionAccuracy, wakeUpTime: answers.wakeUpTime, bedTime: answers.bedTime }) 로 복구
+                  completeOnboarding(
+                    {
+                      data: {
+                        language: ONBOARDING_LANGUAGE_MAP[answers.language],
+                        predictionAccuracy: answers.predictionAccuracy,
+                        wakeUpTime: answers.wakeUpTime,
+                        bedTime: answers.bedTime,
+                      },
+                    },
+                    {
+                      onSuccess: () => {
+                        setOnboardingCompleted(true);
+                        router.replace(ROUTES.HOME, {
+                          locale: answers.language,
+                        });
+                      },
+                      onError: () => {
+                        setIsErrorToastOpen(true);
+                      },
+                    },
+                  );
                 }}
               />
             )}
diff --git a/apps/timo-web/app/robots.ts b/apps/timo-web/app/robots.ts
new file mode 100644
index 00000000..010dd897
--- /dev/null
+++ b/apps/timo-web/app/robots.ts
@@ -0,0 +1,30 @@
+import type { MetadataRoute } from "next";
+
+import { ROUTES } from "@/constants/routes";
+import { SITE_URL } from "@/constants/site";
+import { routing } from "@/i18n/routing";
+
+const PRIVATE_ROUTES = [
+  ROUTES.ONBOARDING,
+  ROUTES.HOME,
+  ROUTES.TODAY,
+  ROUTES.FOCUS,
+  ROUTES.STATISTICS,
+  ROUTES.SETTINGS,
+] as const;
+
+const disallow = routing.locales.flatMap((locale) => [
+  ...PRIVATE_ROUTES.map((route) => `/${locale}${route}`),
+  `/${locale}/oauth`,
+]);
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow,
+    },
+    sitemap: `${SITE_URL}/sitemap.xml`,
+  };
+}
diff --git a/apps/timo-web/app/sitemap.ts b/apps/timo-web/app/sitemap.ts
new file mode 100644
index 00000000..d040237d
--- /dev/null
+++ b/apps/timo-web/app/sitemap.ts
@@ -0,0 +1,24 @@
+import type { MetadataRoute } from "next";
+
+import { ROUTES } from "@/constants/routes";
+import { SITE_URL } from "@/constants/site";
+import { routing } from "@/i18n/routing";
+
+const PUBLIC_ROUTES = ["", ROUTES.LOGIN, ROUTES.POLICY] as const;
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const lastModified = new Date();
+
+  return PUBLIC_ROUTES.map((route) => ({
+    url: `${SITE_URL}/${routing.defaultLocale}${route}`,
+    lastModified,
+    alternates: {
+      languages: Object.fromEntries(
+        routing.locales.map((locale) => [
+          locale,
+          `${SITE_URL}/${locale}${route}`,
+        ]),
+      ),
+    },
+  }));
+}
diff --git a/apps/timo-web/components/calendar/HomeCalendarEventCard.tsx b/apps/timo-web/components/calendar/HomeCalendarEventCard.tsx
new file mode 100644
index 00000000..7c43dde2
--- /dev/null
+++ b/apps/timo-web/components/calendar/HomeCalendarEventCard.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Image from "next/image";
+
+interface HomeCalendarEventCardProps {
+  title: string;
+}
+
+export const HomeCalendarEventCard = ({
+  title,
+}: HomeCalendarEventCardProps) => (
+  <div className="border-timo-gray-500 flex w-full shrink-0 items-center gap-1 overflow-hidden rounded-[4px] border border-solid bg-white px-3.5 py-3">
+    <div className="shrink-0 p-1">
+      <Image
+        src="/images/google-calendar.png"
+        alt="Google Calendar"
+        width={14}
+        height={14}
+      />
+    </div>
+    <p className="typo-body-sb-12 text-timo-black min-w-0 flex-1 truncate">
+      {title}
+    </p>
+  </div>
+);
diff --git a/apps/timo-web/components/calendar/TodayCalendarEventCard.tsx b/apps/timo-web/components/calendar/TodayCalendarEventCard.tsx
new file mode 100644
index 00000000..5a5d1573
--- /dev/null
+++ b/apps/timo-web/components/calendar/TodayCalendarEventCard.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import Image from "next/image";
+
+interface TodayCalendarEventCardProps {
+  title: string;
+}
+
+export const TodayCalendarEventCard = ({
+  title,
+}: TodayCalendarEventCardProps) => (
+  <div className="border-timo-gray-500 flex min-w-80 rounded-[4px] border bg-white px-5 py-4">
+    <div className="flex min-w-0 flex-1 items-center gap-2">
+      <div className="shrink-0 p-1">
+        <Image
+          src="/images/google-calendar.png"
+          alt="Google Calendar"
+          width={14}
+          height={14}
+        />
+      </div>
+      <span className="typo-headline-b-14 text-timo-gray-900 min-w-0 truncate">
+        {title}
+      </span>
+    </div>
+  </div>
+);
diff --git a/apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx b/apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx
index 3c46d9d3..861238f9 100644
--- a/apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx
+++ b/apps/timo-web/components/layout/sidebar/time/TimeSidebar.tsx
@@ -2,7 +2,7 @@
 
 import { TogglePanel } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
-import { useId } from "react";
+import { useEffect, useId, useRef } from "react";
 
 import {
   TIME_SIDEBAR_COLLAPSED_WIDTH_CLASS_NAME,
@@ -32,6 +32,20 @@ export const TimeSidebar = ({
   const activeTab = useTimeSidebarStore((state) => state.activeTab);
   const setActiveTab = useTimeSidebarStore((state) => state.setActiveTab);
 
+  const timeboxScrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen || activeTab !== "timebox") return;
+    const container = timeboxScrollRef.current;
+    if (!container) return;
+    const now = new Date();
+    const offset = (now.getHours() + now.getMinutes() / 60) * 50;
+    container.scrollTo({
+      top: Math.max(0, offset - container.clientHeight / 2),
+      behavior: "smooth",
+    });
+  }, [activeTab, isOpen]);
+
   const timeboxPanelId = `${id}-timebox-panel`;
   const timerPanelId = `${id}-timer-panel`;
 
@@ -73,6 +87,7 @@ export const TimeSidebar = ({
           </div>
 
           <div
+            ref={timeboxScrollRef}
             id={timeboxPanelId}
             role="tabpanel"
             aria-labelledby={`${id}-timebox-tab`}
diff --git a/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx b/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
index da45c122..1d02adb3 100644
--- a/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
+++ b/apps/timo-web/components/layout/sidebar/time/TimeboxPanel.tsx
@@ -89,7 +89,7 @@ export const TimeboxPanel = ({ currentTime }: TimeboxPanelProps) => {
             style={{ top: startOffset, height }}
           >
             {showLabel && (
-              <div className="flex items-start gap-1 pt-[2px] pl-[6px]">
+              <div className="flex items-start gap-1 pt-0.5 pl-1.5">
                 <span
                   className={cn(
                     "typo-body-sb-12 min-w-0 truncate",
diff --git a/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx b/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
index 562b0e4a..2f4bc03d 100644
--- a/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
+++ b/apps/timo-web/components/layout/sidebar/time/TimerPanel.tsx
@@ -29,8 +29,14 @@ export const TimerPanel = () => {
   const wasTimeUpRef = useRef(false);
 
   const { data: activeTimer } = useActiveTimer();
-  const { invalidateActiveTimer, invalidateHomeView, invalidateTimeBoxes } =
-    useTimerQueryInvalidation();
+  const {
+    invalidateActiveTimer,
+    invalidateHomeView,
+    invalidateTimeBoxes,
+    invalidateTodayView,
+    invalidateFocusTodo,
+    invalidateTodoDetail,
+  } = useTimerQueryInvalidation();
 
   const { mutate: changeStatus } = useChangeStatus({
     mutation: {
@@ -56,6 +62,9 @@ export const TimerPanel = () => {
         invalidateActiveTimer();
         invalidateHomeView();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateFocusTodo();
+        if (response.data?.todoId) invalidateTodoDetail(response.data.todoId);
       },
     },
   });
@@ -66,6 +75,9 @@ export const TimerPanel = () => {
         invalidateActiveTimer();
         invalidateHomeView();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateFocusTodo();
+        if (response.data?.todoId) invalidateTodoDetail(response.data.todoId);
       },
     },
   });
@@ -74,6 +86,8 @@ export const TimerPanel = () => {
       onSuccess: () => {
         invalidateHomeView();
         invalidateTimeBoxes();
+        invalidateTodayView();
+        invalidateFocusTodo();
       },
     },
   });
@@ -143,6 +157,10 @@ export const TimerPanel = () => {
         )
       : 0;
   const plannedMinutes = convertDurationToMinutes(plannedSeconds);
+  // 완료 모달의 "계획"은 연장 시간을 제외한 순수 계획 시간만 보여줘야 한다
+  const basePlannedMinutes = convertDurationToMinutes(
+    activeTimer?.plannedSeconds ?? 0,
+  );
   const actualMinutes = convertDurationToMinutes(
     activeTimer?.elapsedSeconds ?? 0,
   );
@@ -163,7 +181,7 @@ export const TimerPanel = () => {
         ref={timerSessionControlsRef}
         isRunning={isRunning}
         onTogglePlay={handleTogglePlay}
-        plannedMinutes={plannedMinutes}
+        plannedMinutes={basePlannedMinutes}
         actualMinutes={actualMinutes}
         feedbackText={feedbackText}
         isTimeUp={isTimeUp}
diff --git a/apps/timo-web/components/lottie/LottiePlayer.tsx b/apps/timo-web/components/lottie/LottiePlayer.tsx
index d94d49fe..a52d4f2d 100644
--- a/apps/timo-web/components/lottie/LottiePlayer.tsx
+++ b/apps/timo-web/components/lottie/LottiePlayer.tsx
@@ -38,7 +38,7 @@ export const LottiePlayer = ({
   }, [src]);
 
   return (
-    <div className={cn("w-full", className)}>
+    <div className={cn(className)}>
       {animationData && (
         <Lottie
           animationData={animationData}
diff --git a/apps/timo-web/components/modal/OverlayModal.tsx b/apps/timo-web/components/modal/OverlayModal.tsx
index 68ac4d4b..2f0d5972 100644
--- a/apps/timo-web/components/modal/OverlayModal.tsx
+++ b/apps/timo-web/components/modal/OverlayModal.tsx
@@ -1,6 +1,10 @@
 "use client";
 
-import { cn, hasOpenFloatingLayer } from "@repo/timo-design-system/utils";
+import {
+  acquireModalStackIndex,
+  cn,
+  hasOpenFloatingLayer,
+} from "@repo/timo-design-system/utils";
 import FocusTrap from "focus-trap-react";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -8,6 +12,11 @@ import { createPortal } from "react-dom";
 import type { ReactNode } from "react";
 
 const EXIT_ANIMATION_DURATION = 200;
+// tailwind-config theme.css의 --z-index-modal-overlay/--z-index-modal-panel과 동일한 기준값이다.
+const BASE_OVERLAY_Z_INDEX = 40;
+const BASE_PANEL_Z_INDEX = 50;
+// 중첩된 모달의 오버레이가 그 아래 모달의 패널(z=50)보다 항상 높도록, 한 단계당 overlay/panel 차이(10)보다 큰 폭으로 올린다.
+const MODAL_STACK_Z_INDEX_STEP = 20;
 
 interface OverlayModalProps {
   isOpen: boolean;
@@ -28,6 +37,7 @@ export const OverlayModal = ({
 }: OverlayModalProps) => {
   const [shouldRender, setShouldRender] = useState(isOpen);
   const [isVisible, setIsVisible] = useState(false);
+  const [stackIndex, setStackIndex] = useState(0);
   const dialogRef = useRef<HTMLDivElement>(null);
   const wasFloatingLayerOpenRef = useRef(false);
 
@@ -43,6 +53,7 @@ export const OverlayModal = ({
       return () => clearTimeout(hideTimer);
     }
 
+    setStackIndex(acquireModalStackIndex());
     setShouldRender(true);
 
     const showFrame = requestAnimationFrame(() => setIsVisible(true));
@@ -71,13 +82,19 @@ export const OverlayModal = ({
 
   if (!shouldRender) return null;
 
+  const overlayZIndex =
+    BASE_OVERLAY_Z_INDEX + stackIndex * MODAL_STACK_Z_INDEX_STEP;
+  const panelZIndex =
+    BASE_PANEL_Z_INDEX + stackIndex * MODAL_STACK_Z_INDEX_STEP;
+
   return createPortal(
     <>
       <div
         className={cn(
-          "bg-timo-overlay fixed inset-0 z-40 transition-opacity duration-200 ease-out",
+          "bg-timo-overlay fixed inset-0 transition-opacity duration-200 ease-out",
           isVisible ? "opacity-100" : "opacity-0",
         )}
+        style={{ zIndex: overlayZIndex }}
         onPointerDownCapture={() => {
           wasFloatingLayerOpenRef.current = hasOpenFloatingLayer();
         }}
@@ -97,18 +114,41 @@ export const OverlayModal = ({
         }}
       >
         <div
-          ref={dialogRef}
-          role="dialog"
-          aria-modal="true"
-          aria-label={ariaLabel}
-          tabIndex={-1}
-          className={cn(
-            "fixed top-1/2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-1/2 flex-col rounded-[4px] bg-white transition-all duration-200 ease-out",
-            isVisible ? "scale-100 opacity-100" : "scale-95 opacity-0",
-            className,
-          )}
+          className="fixed inset-0 overflow-y-auto"
+          style={{ zIndex: panelZIndex }}
         >
-          {children}
+          {/*
+            배경 클릭으로 모달을 닫는 영역이다. 포인터 전용 UX이며 키보드
+            사용자는 이미 Escape로 동일하게 닫을 수 있어(위 handleEscape),
+            여기서는 jsx-a11y의 인터랙션 규칙을 의도적으로 예외 처리한다.
+          */}
+          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+          <div
+            className="flex min-h-full items-center justify-center py-8"
+            onPointerDownCapture={() => {
+              wasFloatingLayerOpenRef.current = hasOpenFloatingLayer();
+            }}
+            onClick={(event) => {
+              if (event.target !== event.currentTarget) return;
+              if (wasFloatingLayerOpenRef.current) return;
+              onClose();
+            }}
+          >
+            <div
+              ref={dialogRef}
+              role="dialog"
+              aria-modal="true"
+              aria-label={ariaLabel}
+              tabIndex={-1}
+              className={cn(
+                "flex flex-col rounded-[4px] bg-white transition-all duration-200 ease-out",
+                isVisible ? "scale-100 opacity-100" : "scale-95 opacity-0",
+                className,
+              )}
+            >
+              {children}
+            </div>
+          </div>
         </div>
       </FocusTrap>
     </>,
diff --git a/apps/timo-web/components/todo-modal/common/TodoIconField.tsx b/apps/timo-web/components/todo-modal/common/TodoIconField.tsx
index 057f87d9..cb0da86e 100644
--- a/apps/timo-web/components/todo-modal/common/TodoIconField.tsx
+++ b/apps/timo-web/components/todo-modal/common/TodoIconField.tsx
@@ -1,9 +1,12 @@
 import { ChevronUpIcon } from "@repo/timo-design-system/icons";
 import { IconGraphic, IconSelector } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
+import { useEffect, useState } from "react";
 
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
+const PANEL_EXIT_ANIMATION_DURATION = 160;
+
 export interface TodoIconFieldProps {
   icon: TodoIconValue | null;
   isIconPanelOpen: boolean;
@@ -23,14 +26,32 @@ export const TodoIconField = ({
   onSelectIcon,
   onRemoveIcon,
 }: TodoIconFieldProps) => {
+  const [shouldRenderPanel, setShouldRenderPanel] = useState(isIconPanelOpen);
+  const [isPanelVisible, setIsPanelVisible] = useState(false);
+
+  useEffect(() => {
+    if (isIconPanelOpen) {
+      setShouldRenderPanel(true);
+      const showFrame = requestAnimationFrame(() => setIsPanelVisible(true));
+      return () => cancelAnimationFrame(showFrame);
+    }
+
+    setIsPanelVisible(false);
+    const hideTimer = setTimeout(
+      () => setShouldRenderPanel(false),
+      PANEL_EXIT_ANIMATION_DURATION,
+    );
+    return () => clearTimeout(hideTimer);
+  }, [isIconPanelOpen]);
+
   return (
     <div className="flex w-full flex-col items-start gap-2">
-      {!isIconPanelOpen && icon ? (
+      {!isIconPanelOpen && !shouldRenderPanel && icon ? (
         <button
           type="button"
           onClick={onOpenPanel}
           aria-label={addIconLabel}
-          className="flex size-6 shrink-0 items-center justify-center rounded-[4px]"
+          className="flex size-6 shrink-0 items-center justify-center rounded-[4px] transition-opacity duration-150 ease-out"
         >
           <IconGraphic icon={icon} />
         </button>
@@ -39,7 +60,7 @@ export const TodoIconField = ({
           type="button"
           onClick={onTogglePanel}
           aria-expanded={isIconPanelOpen}
-          className="bg-timo-gray-200 flex items-center gap-1 rounded-[4px] px-1.5 py-0.5"
+          className="bg-timo-gray-200 flex items-center gap-1 rounded-[4px] px-1.5 py-0.5 transition-opacity duration-150 ease-out"
         >
           <ChevronUpIcon
             width={18}
@@ -55,12 +76,21 @@ export const TodoIconField = ({
         </button>
       )}
 
-      {isIconPanelOpen && (
-        <IconSelector
-          selected={icon}
-          onSelect={onSelectIcon}
-          onRemove={onRemoveIcon}
-        />
+      {shouldRenderPanel && (
+        <div
+          className={cn(
+            "origin-top",
+            isPanelVisible
+              ? "translate-y-0 scale-100 opacity-100 transition-all duration-220 ease-[cubic-bezier(0.16,1,0.3,1)]"
+              : "-translate-y-1.5 scale-95 opacity-0 transition-all duration-160 ease-in",
+          )}
+        >
+          <IconSelector
+            selected={icon}
+            onSelect={onSelectIcon}
+            onRemove={onRemoveIcon}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
index fcd580a0..2af5b173 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
@@ -9,6 +9,7 @@ import { useController, useForm } from "react-hook-form";
 import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 import type { PriorityLevel } from "@repo/timo-design-system/ui";
 
+import { TagLimitToastContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer";
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
@@ -128,6 +129,7 @@ export const CreateTodoModalContent = ({
               titleValue={titleField.title}
               titlePlaceholder={t("createModal.titlePlaceholder")}
               onTitleChange={titleField.handleTitleChange}
+              onTitleEnter={subtaskField.focusFirstInput}
               subtaskInputs={subtaskField.subtaskInputs}
               subtaskPlaceholder={t("createModal.subtaskPlaceholder")}
               registerSubtaskInputRef={subtaskField.registerInputRef}
@@ -162,10 +164,10 @@ export const CreateTodoModalContent = ({
             onTimeOpen={timeField.handleTimeSelectorOpen}
             priority={priorityField.value ?? undefined}
             priorityLabels={{
-              VERY_HIGH: tCommon("priority.urgent"),
-              HIGH: tCommon("priority.high"),
-              MEDIUM: tCommon("priority.medium"),
-              LOW: tCommon("priority.low"),
+              VERY_HIGH: tCommon("priority.VERY_HIGH"),
+              HIGH: tCommon("priority.HIGH"),
+              MEDIUM: tCommon("priority.MEDIUM"),
+              LOW: tCommon("priority.LOW"),
             }}
             onSelectPriority={(level: PriorityLevel) =>
               priorityField.onChange(level)
@@ -193,7 +195,7 @@ export const CreateTodoModalContent = ({
               weekly: {
                 weekdays: repeatField.weekdays,
                 selectedWeekdayIds: repeatField.repeatWeekdays,
-                onWeekdayToggle: repeatField.handleWeekdayToggle,
+                onWeekdaysChange: repeatField.handleWeekdaysChange,
               },
               monthly: {
                 repeatDayLabel: t("createModal.repeatDayUnit"),
@@ -213,19 +215,9 @@ export const CreateTodoModalContent = ({
         </div>
       </OverlayModal>
 
-      <AnimatedToast
-        isOpen={tagField.isTagLimitToastOpen}
-        onClose={tagField.closeTagLimitToast}
-        message={
-          <p className="mb-0">
-            {tToast.rich("tagLimit", {
-              blue: (chunks) => (
-                <span className="text-timo-blue-300">{chunks}</span>
-              ),
-            })}
-          </p>
-        }
-      />
+      {tagField.isTagLimitToastOpen && (
+        <TagLimitToastContainer onClose={tagField.closeTagLimitToast} />
+      )}
 
       <AnimatedToast
         isOpen={timeField.isAiDurationErrorToastOpen}
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
index 4216658a..e63121df 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from "@repo/timo-design-system/ui";
+import { useId } from "react";
 
 import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
@@ -13,6 +14,7 @@ export interface CreateTodoTaskFieldsProps {
   titleValue: string;
   titlePlaceholder: string;
   onTitleChange: (value: string) => void;
+  onTitleEnter: () => void;
   subtaskInputs: SubtaskInputEntry[];
   subtaskPlaceholder: string;
   registerSubtaskInputRef: (
@@ -29,12 +31,15 @@ export const CreateTodoTaskFields = ({
   titleValue,
   titlePlaceholder,
   onTitleChange,
+  onTitleEnter,
   subtaskInputs,
   subtaskPlaceholder,
   registerSubtaskInputRef,
   onSubtaskInputChange,
   onSubtaskInputKeyDown,
 }: CreateTodoTaskFieldsProps) => {
+  const titleInputId = useId();
+
   return (
     <div className="flex w-full flex-col items-start gap-1.5">
       <div className="flex w-full items-center justify-center gap-2">
@@ -43,16 +48,23 @@ export const CreateTodoTaskFields = ({
           onChange={() => {}}
           className="cursor-default"
         />
-        <textarea
+        <label htmlFor={titleInputId} className="sr-only">
+          {titlePlaceholder}
+        </label>
+        <input
+          id={titleInputId}
+          type="text"
           value={titleValue}
-          ref={resizeTextarea}
-          onChange={(event) => {
-            onTitleChange(event.target.value);
-            resizeTextarea(event.currentTarget);
+          onChange={(event) => onTitleChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter") return;
+            if (event.nativeEvent.isComposing) return;
+
+            event.preventDefault();
+            onTitleEnter();
           }}
           placeholder={titlePlaceholder}
-          rows={1}
-          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none"
         />
       </div>
 
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
index 8ce10f77..e834191a 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -1,6 +1,11 @@
+"use client";
+
+import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
 import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
-import { TodoToolbar } from "@repo/timo-design-system/ui";
+import { Modal, TodoToolbar } from "@repo/timo-design-system/ui";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { useRef } from "react";
 
 import type {
   TodoDetailResponse,
@@ -9,7 +14,9 @@ import type {
 } from "@/api/generated/models";
 import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
+import { TagLimitToastContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/toast/TagLimitToastContainer";
 import { OverlayModal } from "@/components/modal/OverlayModal";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
 import { DetailTodoMemoField } from "@/components/todo-modal/detail/DetailTodoMemoField";
 import { DetailTodoTaskFields } from "@/components/todo-modal/detail/DetailTodoTaskFields";
@@ -45,6 +52,11 @@ export interface DetailTodoModalContentProps {
     data: TodoUpdateRequest,
     handlers?: UpdateTodoSubmitHandlers,
   ) => void;
+  onToggleSubtask: (
+    subtaskId: number,
+    completed: boolean,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
   timerStatus: TodoDetailResponseTimerStatus;
 }
 
@@ -58,12 +70,14 @@ export const DetailTodoModalContent = ({
   onToggleCompleted,
   onDelete,
   onUpdate,
+  onToggleSubtask,
   timerStatus,
 }: DetailTodoModalContentProps) => {
   const t = useTranslations("Home.detailModal");
   const tCreateModal = useTranslations("Home.createModal");
   const tCommon = useTranslations("Common");
-  const detailTodoForm = useDetailTodoForm({ todo });
+  const tToast = useTranslations("Toast");
+  const detailTodoForm = useDetailTodoForm({ todo, onUpdate });
   const dateNumber = detailTodoForm.date.getDate();
   const dayOfWeek = isDetailTodoWeekdayId(todo.dayOfWeek)
     ? todo.dayOfWeek
@@ -77,10 +91,12 @@ export const DetailTodoModalContent = ({
   const patchHandlers = useDetailTodoPatchHandlers({
     form: detailTodoForm,
     onUpdate,
+    onToggleSubtask,
   });
   const iconField = useDetailTodoIconSubmit({
     icon: detailTodoForm.icon,
     selectIcon: detailTodoForm.selectIcon,
+    removeIcon: detailTodoForm.removeIcon,
     onUpdate: patchHandlers.updateTodo,
   });
   const { submitTextUpdate } = useDetailTodoTextAutoSave({
@@ -96,147 +112,196 @@ export const DetailTodoModalContent = ({
     onClose();
   };
 
-  return (
-    <OverlayModal
-      isOpen={isOpen}
-      onClose={handleClose}
-      onExited={onExited}
-      ariaLabel={t("ariaLabel")}
-      className="w-124 items-start px-7.5 py-5"
-    >
-      <div className="flex w-full justify-end">
-        <button
-          type="button"
-          aria-label={tCommon("close")}
-          onClick={handleClose}
-        >
-          <DeleteIcon />
-        </button>
-      </div>
-
-      <div className="flex w-full flex-col gap-3">
-        <div className="flex w-full flex-col gap-2">
-          <div className="flex flex-col">
-            <p className="typo-headline-b-30 text-timo-black">{dateNumber}</p>
-            <p className="typo-body-m-12 text-timo-gray-700">
-              {tCommon(`weekday.${dayOfWeek}`)}
-            </p>
-          </div>
+  const deleteModalTriggerRef = useRef<HTMLButtonElement>(null);
+  const handleRequestDelete = () => {
+    deleteModalTriggerRef.current?.click();
+  };
 
-          <div className={canUpdateTodo ? undefined : "pointer-events-none"}>
-            <TodoIconField
-              icon={iconField.icon}
-              isIconPanelOpen={iconField.isIconPanelOpen}
-              addIconLabel={tCreateModal("addIcon")}
-              onOpenPanel={iconField.handleOpenIconPanel}
-              onTogglePanel={iconField.handleToggleIconPanel}
-              onSelectIcon={iconField.handleSelectIcon}
-              onRemoveIcon={iconField.handleRemoveIcon}
-            />
-          </div>
+  return (
+    <>
+      <OverlayModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        onExited={onExited}
+        ariaLabel={t("ariaLabel")}
+        className="w-124 items-start px-7.5 py-5"
+      >
+        <div className="flex w-full justify-end">
+          <button
+            type="button"
+            aria-label={tCommon("close")}
+            onClick={handleClose}
+          >
+            <DeleteIcon />
+          </button>
         </div>
 
-        <div className="flex w-full flex-col gap-2">
-          <div className="flex w-full flex-col gap-3">
-            <div className="bg-timo-gray-500 h-px w-full" />
-            <DetailTodoTaskFields
-              titleValue={detailTodoForm.title}
-              isCompleted={todo.completed}
-              disabled={!canUpdateTodo}
-              timerStatus={timerStatus}
-              isPlayHighlighted={isPlayHighlighted}
-              subtaskInputs={detailTodoForm.subtaskInputs}
-              onTitleChange={detailTodoForm.changeTitle}
-              onToggleCompleted={onToggleCompleted}
-              onTogglePlay={onTogglePlay}
-              onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
-              onToggleSubtaskCompleted={
-                patchHandlers.handleSubtaskCompletedChange
-              }
-              registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
-              onSubtaskInputKeyDown={detailTodoForm.handleSubtaskInputKeyDown}
-            />
+        <div className="flex w-full flex-col gap-3">
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex flex-col">
+              <p className="typo-headline-b-30 text-timo-black">{dateNumber}</p>
+              <p className="typo-body-m-12 text-timo-gray-700">
+                {tCommon(`weekday.${dayOfWeek}`)}
+              </p>
+            </div>
+
+            <div className={canUpdateTodo ? undefined : "pointer-events-none"}>
+              <TodoIconField
+                icon={iconField.icon}
+                isIconPanelOpen={iconField.isIconPanelOpen}
+                addIconLabel={tCreateModal("addIcon")}
+                onOpenPanel={iconField.handleOpenIconPanel}
+                onTogglePanel={iconField.handleToggleIconPanel}
+                onSelectIcon={iconField.handleSelectIcon}
+                onRemoveIcon={iconField.handleRemoveIcon}
+              />
+            </div>
           </div>
 
-          <div className="flex flex-col gap-3">
-            <div
-              className={
-                canUpdateTodo
-                  ? "flex items-center gap-2 py-3"
-                  : "pointer-events-none flex items-center gap-2 py-3"
-              }
-            >
-              <TodoToolbar
-                dateLabel={formatShortDateLabel(detailTodoForm.date)}
-                date={detailTodoForm.date}
-                onDateChange={patchHandlers.handleDateChange}
-                timeLabel={displayTime}
-                timeOptions={DETAIL_TODO_TIME_OPTIONS}
-                time={displayTime}
-                onTimeChange={patchHandlers.handleTimeChange}
-                selectedTime={patchHandlers.selectedTime}
-                onSelectTime={patchHandlers.handleSelectTime}
-                priority={detailTodoForm.priority}
-                priorityLabels={{
-                  VERY_HIGH: tCommon("priority.urgent"),
-                  HIGH: tCommon("priority.high"),
-                  MEDIUM: tCommon("priority.medium"),
-                  LOW: tCommon("priority.low"),
-                }}
-                onSelectPriority={patchHandlers.handleSelectPriority}
-                tagLabel={
-                  detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
+          <div className="flex w-full flex-col gap-2">
+            <div className="flex w-full flex-col gap-3">
+              <div className="bg-timo-gray-500 h-px w-full" />
+              <DetailTodoTaskFields
+                titleValue={detailTodoForm.title}
+                isCompleted={todo.completed}
+                disabled={!canUpdateTodo}
+                timerStatus={timerStatus}
+                isPlayHighlighted={isPlayHighlighted}
+                subtaskInputs={detailTodoForm.subtaskInputs}
+                onTitleChange={detailTodoForm.changeTitle}
+                onTitleEnter={detailTodoForm.focusFirstSubtaskInput}
+                onToggleCompleted={onToggleCompleted}
+                onTogglePlay={onTogglePlay}
+                onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
+                onToggleSubtaskCompleted={
+                  patchHandlers.handleSubtaskCompletedChange
+                }
+                registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
+                onSubtaskInputKeyDown={detailTodoForm.handleSubtaskInputKeyDown}
+              />
+            </div>
+
+            <div className="flex flex-col gap-3">
+              <div
+                className={
+                  canUpdateTodo
+                    ? "flex items-center gap-2 py-3"
+                    : "pointer-events-none flex items-center gap-2 py-3"
                 }
-                tags={detailTodoForm.tagLabels}
-                selectedTag={detailTodoForm.selectedTagLabel}
-                addTagLabel={tCreateModal("addTag")}
-                onSelectTag={patchHandlers.handleSelectTag}
-                onAddTagClick={() => {}}
-                hasMemo={Boolean(todo.memo?.trim())}
-                isRepeatActive={detailTodoForm.isRepeatActive}
-                repeat={{
-                  frequencyHeading: t("repeatFrequencyHeading"),
-                  detailHeading: tCreateModal("repeatDetailHeading"),
-                  options: [
-                    { frequency: "DAILY", label: tCreateModal("repeatDaily") },
-                    {
-                      frequency: "WEEKLY",
-                      label: tCreateModal("repeatWeekly"),
+              >
+                <TodoToolbar
+                  dateLabel={formatShortDateLabel(detailTodoForm.date)}
+                  date={detailTodoForm.date}
+                  onDateChange={patchHandlers.handleDateChange}
+                  timeLabel={displayTime}
+                  timeOptions={DETAIL_TODO_TIME_OPTIONS}
+                  time={displayTime}
+                  onTimeChange={patchHandlers.handleTimeChange}
+                  selectedTime={patchHandlers.selectedTime}
+                  onSelectTime={patchHandlers.handleSelectTime}
+                  priority={detailTodoForm.priority}
+                  priorityLabels={{
+                    VERY_HIGH: tCommon("priority.VERY_HIGH"),
+                    HIGH: tCommon("priority.HIGH"),
+                    MEDIUM: tCommon("priority.MEDIUM"),
+                    LOW: tCommon("priority.LOW"),
+                  }}
+                  onSelectPriority={patchHandlers.handleSelectPriority}
+                  tagLabel={
+                    detailTodoForm.selectedTagLabel ?? tCreateModal("tagLabel")
+                  }
+                  tags={detailTodoForm.tagLabels}
+                  selectedTag={detailTodoForm.selectedTagLabel}
+                  addTagLabel={tCreateModal("addTag")}
+                  onSelectTag={patchHandlers.handleSelectTag}
+                  onAddTagClick={detailTodoForm.handleAddTagClick}
+                  hasMemo={Boolean(todo.memo?.trim())}
+                  isRepeatActive={detailTodoForm.isRepeatActive}
+                  repeat={{
+                    frequencyHeading: t("repeatFrequencyHeading"),
+                    detailHeading: tCreateModal("repeatDetailHeading"),
+                    options: [
+                      {
+                        frequency: "DAILY",
+                        label: tCreateModal("repeatDaily"),
+                      },
+                      {
+                        frequency: "WEEKLY",
+                        label: tCreateModal("repeatWeekly"),
+                      },
+                      {
+                        frequency: "MONTHLY",
+                        label: tCreateModal("repeatMonthly"),
+                      },
+                    ],
+                    frequency: detailTodoForm.repeatFrequency,
+                    onFrequencyChange:
+                      patchHandlers.handleRepeatFrequencyChange,
+                    weekly: {
+                      weekdays,
+                      selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
+                      onWeekdaysChange: patchHandlers.handleWeekdaysChange,
                     },
-                    {
-                      frequency: "MONTHLY",
-                      label: tCreateModal("repeatMonthly"),
+                    monthly: {
+                      repeatDayLabel: t("repeatDayLabel"),
+                      repeatDay: detailTodoForm.repeatDay,
+                      onRepeatDayChange: patchHandlers.handleRepeatDayChange,
                     },
-                  ],
-                  frequency: detailTodoForm.repeatFrequency,
-                  onFrequencyChange: patchHandlers.handleRepeatFrequencyChange,
-                  weekly: {
-                    weekdays,
-                    selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
-                    onWeekdayToggle: patchHandlers.handleWeekdayToggle,
-                  },
-                  monthly: {
-                    repeatDayLabel: t("repeatDayLabel"),
-                    repeatDay: detailTodoForm.repeatDay,
-                    onRepeatDayChange: patchHandlers.handleRepeatDayChange,
-                  },
-                }}
+                  }}
+                />
+                <button
+                  type="button"
+                  aria-label={t("delete")}
+                  onClick={handleRequestDelete}
+                >
+                  <TrashOnIcon />
+                </button>
+              </div>
+
+              <DetailTodoMemoField
+                value={detailTodoForm.memo}
+                placeholder={tCreateModal("notePlaceholder")}
+                onChange={detailTodoForm.setMemo}
+                maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
+                disabled={!canUpdateTodo}
               />
-              <button type="button" aria-label={t("delete")} onClick={onDelete}>
-                <TrashOnIcon />
-              </button>
             </div>
-
-            <DetailTodoMemoField
-              value={detailTodoForm.memo}
-              placeholder={tCreateModal("notePlaceholder")}
-              onChange={detailTodoForm.setMemo}
-              maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
-              disabled={!canUpdateTodo}
-            />
           </div>
         </div>
-      </div>
-    </OverlayModal>
+      </OverlayModal>
+
+      <Modal>
+        <Modal.Trigger
+          ref={deleteModalTriggerRef}
+          className="hidden"
+          aria-hidden="true"
+          tabIndex={-1}
+        />
+        <Modal.Overlay />
+        <Modal.Panel>
+          <Modal.Icon>
+            <Image src={timoTimerLogo} alt="" width={40} height={40} />
+          </Modal.Icon>
+          <Modal.Title>{t("deleteConfirmTitle")}</Modal.Title>
+          <Modal.Description>{t("deleteConfirmDescription")}</Modal.Description>
+          <Modal.Footer>
+            <Modal.BorderButton>{t("deleteConfirmCancel")}</Modal.BorderButton>
+            <Modal.FillButton onClick={onDelete}>
+              {t("deleteConfirmConfirm")}
+            </Modal.FillButton>
+          </Modal.Footer>
+        </Modal.Panel>
+      </Modal>
+
+      {detailTodoForm.isTagLimitToastOpen && (
+        <TagLimitToastContainer onClose={detailTodoForm.closeTagLimitToast} />
+      )}
+
+      <AnimatedToast
+        isOpen={detailTodoForm.isCreateTagErrorToastOpen}
+        onClose={detailTodoForm.closeCreateTagErrorToast}
+        message={tToast("tagCreateFailed")}
+      />
+    </>
   );
 };
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index a1543bce..383557a3 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -6,7 +6,6 @@ import {
 import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 
 import type { TodoDetailResponseTimerStatus } from "@/api/generated/models";
-import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
 import type { KeyboardEvent, MouseEvent, PointerEvent } from "react";
 
 const resizeTextarea = (element: HTMLTextAreaElement | null) => {
@@ -15,6 +14,13 @@ const resizeTextarea = (element: HTMLTextAreaElement | null) => {
   element.style.height = `${element.scrollHeight}px`;
 };
 
+export interface DetailTodoSubtaskInput {
+  id: number;
+  subtaskId: number | null;
+  completed: boolean;
+  value: string;
+}
+
 export interface DetailTodoTaskFieldsProps {
   titleValue: string;
   isCompleted: boolean;
@@ -23,6 +29,7 @@ export interface DetailTodoTaskFieldsProps {
   isPlayHighlighted: boolean;
   subtaskInputs: DetailTodoSubtaskInput[];
   onTitleChange: (value: string) => void;
+  onTitleEnter: () => void;
   onToggleCompleted: (completed: boolean) => void;
   onTogglePlay: () => void;
   onSubtaskInputChange: (id: number, value: string) => void;
@@ -44,6 +51,7 @@ export const DetailTodoTaskFields = ({
   isPlayHighlighted,
   subtaskInputs,
   onTitleChange,
+  onTitleEnter,
   onToggleCompleted,
   onTogglePlay,
   onSubtaskInputChange,
@@ -69,16 +77,19 @@ export const DetailTodoTaskFields = ({
       <div className="flex w-full items-center justify-between">
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Checkbox checked={isCompleted} onChange={onToggleCompleted} />
-          <textarea
+          <input
+            type="text"
             value={titleValue}
-            ref={resizeTextarea}
-            onChange={(event) => {
-              onTitleChange(event.target.value);
-              resizeTextarea(event.currentTarget);
+            onChange={(event) => onTitleChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key !== "Enter") return;
+              if (event.nativeEvent.isComposing) return;
+
+              event.preventDefault();
+              onTitleEnter();
             }}
-            rows={1}
             disabled={disabled}
-            className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+            className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none"
           />
         </div>
 
diff --git a/apps/timo-web/constants/site.ts b/apps/timo-web/constants/site.ts
new file mode 100644
index 00000000..fc19d7f6
--- /dev/null
+++ b/apps/timo-web/constants/site.ts
@@ -0,0 +1 @@
+export const SITE_URL = "https://timo.kr";
diff --git a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
index 15f201e5..d0c0a1d0 100644
--- a/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
+++ b/apps/timo-web/containers/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import { keepPreviousData } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
@@ -14,6 +15,7 @@ import { AnimatedToast } from "@/components/toast/AnimatedToast";
 import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
 import { useActiveTimer } from "@/hooks/timer/use-active-timer";
 import { useDeleteTodoSubmit } from "@/hooks/todo-modal/detail/use-delete-todo-submit";
+import { useToggleSubtaskSubmit } from "@/hooks/todo-modal/detail/use-toggle-subtask-submit";
 import { useUpdateTodoSubmit } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
 export interface DetailTodoModalContainerProps {
@@ -46,12 +48,20 @@ const DetailTodoModalQuery = ({
   onDelete,
   onActionError,
 }: DetailTodoModalQueryProps) => {
-  const { data, error, isError } = useGetTodoDetail(todoId, { date });
+  const [currentDate, setCurrentDate] = useState(date);
+  const { data, error, isError } = useGetTodoDetail(
+    todoId,
+    { date: currentDate },
+    { query: { placeholderData: keepPreviousData } },
+  );
   const { handleDelete } = useDeleteTodoSubmit();
   const { handleUpdate } = useUpdateTodoSubmit();
+  const { handleToggle } = useToggleSubtaskSubmit();
   const { data: activeTimer } = useActiveTimer();
   const todo = data?.data;
-  const isPlayHighlighted = !activeTimer || activeTimer.todoId === todoId;
+  const isPlayHighlighted =
+    !activeTimer ||
+    (activeTimer.todoId === todoId && activeTimer.date === date);
 
   useEffect(() => {
     if (isError && error) {
@@ -62,7 +72,9 @@ const DetailTodoModalQuery = ({
   if (isError || !todo) return null;
 
   const timerStatus =
-    activeTimer?.todoId === todoId ? activeTimer.status : todo.timerStatus;
+    activeTimer?.todoId === todoId && activeTimer.date === date
+      ? activeTimer.status
+      : todo.timerStatus;
 
   const deleteTodo = () => {
     handleDelete(todoId, {
@@ -78,12 +90,34 @@ const DetailTodoModalQuery = ({
     updateData: TodoUpdateRequest,
     handlers: UpdateTodoSubmitHandlers = {},
   ) => {
+    const nextDate = updateData.date ?? currentDate;
+
     handleUpdate(
       {
         todoId,
-        date,
+        date: nextDate,
         data: updateData,
       },
+      {
+        onSuccess: () => {
+          if (updateData.date) setCurrentDate(updateData.date);
+          handlers.onSuccess?.();
+        },
+        onError: (error) => {
+          handlers.onError?.(error);
+          onActionError(error);
+        },
+      },
+    );
+  };
+
+  const toggleSubtask = (
+    subtaskId: number,
+    completed: boolean,
+    handlers: UpdateTodoSubmitHandlers = {},
+  ) => {
+    handleToggle(
+      { todoId, subtaskId, date: currentDate, completed },
       {
         onSuccess: handlers.onSuccess,
         onError: (error) => {
@@ -105,6 +139,7 @@ const DetailTodoModalQuery = ({
       onToggleCompleted={onToggleCompleted}
       onDelete={deleteTodo}
       onUpdate={updateTodo}
+      onToggleSubtask={toggleSubtask}
       timerStatus={timerStatus}
     />
   );
@@ -122,6 +157,9 @@ export const DetailTodoModalContainer = ({
   const [actionErrorMessage, setActionErrorMessage] = useState("");
   const [isActionErrorToastOpen, setIsActionErrorToastOpen] = useState(false);
 
+  const onTogglePlayRef = useRef(onTogglePlay);
+  onTogglePlayRef.current = onTogglePlay;
+
   const showActionErrorToast = useCallback(
     (error: ErrorType<ErrorDto>) => {
       setActionErrorMessage(
@@ -140,7 +178,7 @@ export const DetailTodoModalContainer = ({
         isOpen={isOpen}
         onClose={close}
         onExited={unmount}
-        onTogglePlay={onTogglePlay}
+        onTogglePlay={() => onTogglePlayRef.current()}
         onToggleCompleted={onToggleCompleted}
         onDelete={onDelete}
         onActionError={showActionErrorToast}
diff --git a/apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts b/apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts
new file mode 100644
index 00000000..b5acb0c2
--- /dev/null
+++ b/apps/timo-web/hooks/statistics/use-statistics-query-invalidation.ts
@@ -0,0 +1,23 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import {
+  getGetCalendarQueryKey,
+  getGetDailyQueryKey,
+  getGetSummaryQueryKey,
+} from "@/api/generated/endpoints/statistics/statistics";
+
+export const useStatisticsQueryInvalidation = () => {
+  const queryClient = useQueryClient();
+
+  const invalidateStatistics = () => {
+    queryClient.invalidateQueries({ queryKey: getGetSummaryQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetDailyQueryKey() });
+    queryClient.invalidateQueries({ queryKey: getGetCalendarQueryKey() });
+  };
+
+  return {
+    invalidateStatistics,
+  };
+};
diff --git a/apps/timo-web/hooks/timer/use-timer-query-invalidation.ts b/apps/timo-web/hooks/timer/use-timer-query-invalidation.ts
index c9d009ea..e7c0cd05 100644
--- a/apps/timo-web/hooks/timer/use-timer-query-invalidation.ts
+++ b/apps/timo-web/hooks/timer/use-timer-query-invalidation.ts
@@ -2,12 +2,19 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
 import { getGetTimeBoxesQueryKey } from "@/api/generated/endpoints/time-box/time-box";
 import { getGetActiveTimerQueryKey } from "@/api/generated/endpoints/timer/timer";
+import { getGetTodoDetailQueryKey } from "@/api/generated/endpoints/todo/todo";
+import { useStatisticsQueryInvalidation } from "@/hooks/statistics/use-statistics-query-invalidation";
 
 export const useTimerQueryInvalidation = () => {
   const queryClient = useQueryClient();
+  const { invalidateStatistics } = useStatisticsQueryInvalidation();
 
   const invalidateActiveTimer = () =>
     queryClient.invalidateQueries({ queryKey: getGetActiveTimerQueryKey() });
@@ -15,16 +22,29 @@ export const useTimerQueryInvalidation = () => {
     queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
   const invalidateTimeBoxes = () =>
     queryClient.invalidateQueries({ queryKey: getGetTimeBoxesQueryKey() });
+  const invalidateTodayView = () =>
+    queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
+  const invalidateFocusTodo = () =>
+    queryClient.invalidateQueries({ queryKey: getGetFocusTodoQueryKey() });
+  const invalidateTodoDetail = (todoId: number) =>
+    queryClient.invalidateQueries({
+      queryKey: getGetTodoDetailQueryKey(todoId),
+    });
   const invalidateTimerState = () => {
     invalidateActiveTimer();
     invalidateHomeView();
     invalidateTimeBoxes();
+    invalidateStatistics();
   };
 
   return {
     invalidateActiveTimer,
     invalidateHomeView,
+    invalidateStatistics,
     invalidateTimeBoxes,
+    invalidateTodayView,
+    invalidateFocusTodo,
+    invalidateTodoDetail,
     invalidateTimerState,
   };
 };
diff --git a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
index d3decd9b..8039c8c0 100644
--- a/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
+++ b/apps/timo-web/hooks/todo-modal/common/use-tag-field.tsx
@@ -8,14 +8,16 @@ import type { Control, FieldValues, Path } from "react-hook-form";
 import { CreateTagModalContainer } from "@/components/tag/CreateTagModalContainer";
 import { useCreateTagMutation } from "@/queries/tag/use-create-tag-mutation";
 import { useTagsQuery } from "@/queries/tag/use-tags-query";
-import { tagCreateDataSchema } from "@/schemas/tag/tag-schema";
-import { getDefaultTagLabelKey } from "@/utils/todo/tag-label";
-
-const MAX_TAG_COUNT = 8;
+import {
+  MAX_CUSTOM_TAG_COUNT,
+  tagCreateDataSchema,
+} from "@/schemas/tag/tag-schema";
+import { getDefaultTagLabelKey, isDefaultTagId } from "@/utils/todo/tag-label";
 
 export interface UseTagFieldParams<TFieldValues extends FieldValues> {
   control: Control<TFieldValues>;
   name?: Path<TFieldValues>;
+  onTagCreated?: (tagId: number, syncLocal: () => void) => void;
 }
 
 export interface UseTagFieldResult {
@@ -36,6 +38,7 @@ export interface UseTagFieldResult {
 export const useTagField = <TFieldValues extends FieldValues>({
   control,
   name = "tagId" as Path<TFieldValues>,
+  onTagCreated,
 }: UseTagFieldParams<TFieldValues>): UseTagFieldResult => {
   const tCommon = useTranslations("Common");
   const { field } = useController({ name, control });
@@ -59,6 +62,9 @@ export const useTagField = <TFieldValues extends FieldValues>({
   const selectedTagOption = tagOptions.find(
     (option) => option.id === field.value,
   );
+  const customTagCount = (tagsQuery.data?.tags ?? []).filter(
+    (tag) => !isDefaultTagId(tag.tagId),
+  ).length;
 
   const handleSelectTag = (label: string) => {
     const option = tagOptions.find((item) => item.label === label);
@@ -72,7 +78,7 @@ export const useTagField = <TFieldValues extends FieldValues>({
   };
 
   const handleAddTagClick = () => {
-    if (tagOptions.length >= MAX_TAG_COUNT) {
+    if (customTagCount >= MAX_CUSTOM_TAG_COUNT) {
       setIsTagLimitToastOpen(true);
       return;
     }
@@ -95,7 +101,13 @@ export const useTagField = <TFieldValues extends FieldValues>({
                   return;
                 }
 
-                field.onChange(parsed.data.tagId);
+                const tagId = parsed.data.tagId;
+
+                if (onTagCreated) {
+                  onTagCreated(tagId, () => field.onChange(tagId));
+                } else {
+                  field.onChange(tagId);
+                }
                 close();
               },
               onError: () => {
diff --git a/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts b/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
index d7074344..2db717c6 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-create-todo-submit.ts
@@ -8,6 +8,7 @@ import type { CreateTodoRequest } from "@/schemas/todo/todo-schema";
 
 import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
 import { useCreateTodo } from "@/api/generated/endpoints/todo/todo";
+import { useStatisticsQueryInvalidation } from "@/hooks/statistics/use-statistics-query-invalidation";
 import { todoCreateResponseSchema } from "@/schemas/todo/todo-schema";
 
 const buildCreateTodoRequestBody = (
@@ -30,6 +31,7 @@ export const useCreateTodoSubmit = () => {
   const [isErrorToastOpen, setIsErrorToastOpen] = useState(false);
   const { mutate: createTodo } = useCreateTodo();
   const queryClient = useQueryClient();
+  const { invalidateStatistics } = useStatisticsQueryInvalidation();
 
   const handleSubmit = (data: CreateTodoRequest) => {
     createTodo(
@@ -44,6 +46,7 @@ export const useCreateTodoSubmit = () => {
           }
 
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          invalidateStatistics();
         },
         onError: () => {
           setIsErrorToastOpen(true);
diff --git a/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts b/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
index 452f9624..6430de8f 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-icon-field.ts
@@ -14,8 +14,14 @@ export const useIconField = ({ control }: UseIconFieldParams) => {
 
   const openIconPanel = () => setIsIconPanelOpen(true);
   const toggleIconPanel = () => setIsIconPanelOpen((prev) => !prev);
-  const selectIcon = (value: TodoIcon) => field.onChange(value);
-  const removeIcon = () => field.onChange(null);
+  const selectIcon = (value: TodoIcon) => {
+    field.onChange(value);
+    setIsIconPanelOpen(false);
+  };
+  const removeIcon = () => {
+    field.onChange(null);
+    setIsIconPanelOpen(false);
+  };
 
   return {
     icon: field.value,
diff --git a/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts b/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
index b1cc14ff..613d07c7 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-repeat-field.ts
@@ -50,13 +50,8 @@ export const useRepeatField = ({ control }: UseRepeatFieldParams) => {
     repeatTypeField.field.onChange(frequency);
   };
 
-  const handleWeekdayToggle = (id: string) => {
-    const day = id as TodoRepeatWeekday;
-    const next = repeatWeekdays.includes(day)
-      ? repeatWeekdays.filter((item) => item !== day)
-      : [...repeatWeekdays, day];
-
-    repeatWeekdaysField.field.onChange(next);
+  const handleWeekdaysChange = (weekdayIds: string[]) => {
+    repeatWeekdaysField.field.onChange(weekdayIds as TodoRepeatWeekday[]);
   };
 
   const handleRepeatDayChange = (value: string) => {
@@ -74,7 +69,7 @@ export const useRepeatField = ({ control }: UseRepeatFieldParams) => {
     isRepeatActive,
     uiRepeatFrequency,
     handleFrequencyChange,
-    handleWeekdayToggle,
+    handleWeekdaysChange,
     handleRepeatDayChange,
   };
 };
diff --git a/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts b/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
index e18116ff..7e10a827 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-subtask-field.ts
@@ -54,6 +54,15 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
       inputRefs.current[index] = element;
     };
 
+  const focusFirstInput = () => {
+    const element = inputRefs.current[0];
+    if (!element) return;
+
+    element.focus();
+    const caretPosition = element.value.length;
+    element.setSelectionRange(caretPosition, caretPosition);
+  };
+
   const handleInputChange = (index: number, value: string) => {
     setSubtaskInputs((prev) => {
       const next = prev.map((entry, i) =>
@@ -111,6 +120,7 @@ export const useSubtaskField = ({ control }: UseSubtaskFieldParams) => {
     registerInputRef,
     handleInputChange,
     handleInputKeyDown,
+    focusFirstInput,
     reset,
   };
 };
diff --git a/apps/timo-web/hooks/todo-modal/create/use-time-field.ts b/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
index 231e0d3a..5994bbbe 100644
--- a/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
+++ b/apps/timo-web/hooks/todo-modal/create/use-time-field.ts
@@ -50,7 +50,7 @@ const formatDurationAsClockLabel = (duration: string): string => {
   const minutes = Math.floor(
     (totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE,
   );
-  return `${hours}:${minutes.toString().padStart(2, "0")}`;
+  return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
 };
 
 export const useTimeField = ({ control }: UseTimeFieldParams) => {
@@ -58,7 +58,7 @@ export const useTimeField = ({ control }: UseTimeFieldParams) => {
   const title = useWatch({ control, name: "title" });
   const tagId = useWatch({ control, name: "tagId" });
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
-  const [timeDisplay, setTimeDisplay] = useState("0:00");
+  const [timeDisplay, setTimeDisplay] = useState("00:00");
   const [recommendedDuration, setRecommendedDuration] = useState<string>();
   const [isAiDurationErrorToastOpen, setIsAiDurationErrorToastOpen] =
     useState(false);
@@ -145,7 +145,7 @@ export const useTimeField = ({ control }: UseTimeFieldParams) => {
 
   const resetTime = () => {
     setSelectedTime(undefined);
-    setTimeDisplay("0:00");
+    setTimeDisplay("00:00");
     setRecommendedDuration(undefined);
   };
 
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
index 0ad7d7da..2d6de50b 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-delete-todo-submit.ts
@@ -5,11 +5,13 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto } from "@/api/generated/models";
 
+import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
 import {
   getGetHomeQueryKey,
   getGetTodayQueryKey,
 } from "@/api/generated/endpoints/home/home";
 import { useDeleteTodo } from "@/api/generated/endpoints/todo/todo";
+import { useStatisticsQueryInvalidation } from "@/hooks/statistics/use-statistics-query-invalidation";
 
 export interface DeleteTodoSubmitHandlers {
   onSuccess: () => void;
@@ -19,6 +21,7 @@ export interface DeleteTodoSubmitHandlers {
 export const useDeleteTodoSubmit = () => {
   const { mutate: deleteTodo } = useDeleteTodo();
   const queryClient = useQueryClient();
+  const { invalidateStatistics } = useStatisticsQueryInvalidation();
 
   const handleDelete = (
     todoId: number,
@@ -30,6 +33,10 @@ export const useDeleteTodoSubmit = () => {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
           queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
+          invalidateStatistics();
+          queryClient.invalidateQueries({
+            queryKey: getGetFocusTodoQueryKey(),
+          });
           onSuccess();
         },
         onError,
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
index dc74d87f..f4e6d1a1 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-subtask-field.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
+import type { DetailTodoSubtaskInput } from "@/components/todo-modal/detail/DetailTodoTaskFields";
 import type { TodoSubtask } from "@/schemas/todo/todo-schema";
-import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
 import type { KeyboardEvent } from "react";
 
 import {
@@ -11,11 +11,6 @@ import {
 
 const MAX_DETAIL_SUBTASK_COUNT = 10;
 
-export interface DetailTodoSubtaskInput extends SubtaskInputEntry {
-  subtaskId: number | null;
-  completed: boolean;
-}
-
 export interface UseDetailSubtaskFieldParams {
   subtasks: TodoSubtask[];
 }
@@ -45,6 +40,20 @@ export const useDetailSubtaskField = ({
   const inputRefs = useRef<Array<HTMLTextAreaElement | null>>([]);
   const pendingFocusIndex = useRef<number | null>(null);
 
+  useEffect(() => {
+    setSubtaskInputs((prev) =>
+      prev.map((input) => {
+        const serverSubtask = subtasks.find(
+          (subtask) => subtask.subtaskId === input.subtaskId,
+        );
+        if (!serverSubtask || serverSubtask.completed === input.completed) {
+          return input;
+        }
+        return { ...input, completed: serverSubtask.completed };
+      }),
+    );
+  }, [subtasks]);
+
   useEffect(() => {
     if (pendingFocusIndex.current === null) return;
 
@@ -64,6 +73,15 @@ export const useDetailSubtaskField = ({
       inputRefs.current[index] = element;
     };
 
+  const focusFirstInput = () => {
+    const element = inputRefs.current[0];
+    if (!element) return;
+
+    element.focus();
+    const caretPosition = element.value.length;
+    element.setSelectionRange(caretPosition, caretPosition);
+  };
+
   const handleInputChange = (id: number, value: string) => {
     setSubtaskInputs((prev) =>
       prev.map((subtask) =>
@@ -123,5 +141,6 @@ export const useDetailSubtaskField = ({
     handleInputChange,
     handleCompletedChange,
     handleInputKeyDown,
+    focusFirstInput,
   };
 };
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
index f50e2a3d..a02b5d3c 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-form.ts
@@ -1,7 +1,11 @@
 import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
 import { useController, useForm } from "react-hook-form";
 
-import type { TodoDetailResponse } from "@/api/generated/models";
+import type {
+  TodoDetailResponse,
+  TodoUpdateRequest,
+} from "@/api/generated/models";
+import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 import type {
   PriorityLevel,
   RepeatFrequency,
@@ -70,9 +74,16 @@ export const DETAIL_TODO_WEEKDAY_IDS = [
 
 export interface UseDetailTodoFormParams {
   todo: TodoDetailResponse;
+  onUpdate: (
+    data: TodoUpdateRequest,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
 }
 
-export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
+export const useDetailTodoForm = ({
+  todo,
+  onUpdate,
+}: UseDetailTodoFormParams) => {
   const durationText = convertSecondsToApiDuration(todo.durationSeconds ?? 0);
   const todoIcon = todo.icon ?? null;
   const todoDate = parseDateKey(todo.date) ?? new Date();
@@ -123,7 +134,11 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
   const { field: iconField } = useController({ name: "icon", control });
 
   const subtaskField = useDetailSubtaskField({ subtasks: todo.subtasks });
-  const tagField = useTagField({ control });
+  const tagField = useTagField({
+    control,
+    onTagCreated: (tagId, syncLocal) =>
+      onUpdate({ tagId }, { onSuccess: syncLocal }),
+  });
 
   const selectIcon = (nextIcon: TodoIconValue) => iconField.onChange(nextIcon);
   const removeIcon = () => iconField.onChange(null);
@@ -156,12 +171,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     repeatFrequencyField.onChange(frequency);
   };
 
-  const toggleWeekday = (weekdayId: string) => {
-    return selectedWeekdayIdsField.value.includes(weekdayId)
-      ? selectedWeekdayIdsField.value.filter((item) => item !== weekdayId)
-      : [...selectedWeekdayIdsField.value, weekdayId];
-  };
-
   const getTagIdByLabel = (label: string) => {
     const option = tagField.tagOptions.find((item) => item.label === label);
     if (!option) return null;
@@ -169,12 +178,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     return option.id;
   };
 
-  const changeSubtaskCompleted = (id: number, completed: boolean) => {
-    return subtaskField.subtaskInputs.map((subtask) =>
-      subtask.id === id ? { ...subtask, completed } : subtask,
-    );
-  };
-
   return {
     date: dateField.value,
     setDate: dateField.onChange,
@@ -186,6 +189,11 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     selectedTagLabel: tagField.selectedTagLabel,
     getTagIdByLabel,
     setTagId,
+    handleAddTagClick: tagField.handleAddTagClick,
+    isTagLimitToastOpen: tagField.isTagLimitToastOpen,
+    closeTagLimitToast: tagField.closeTagLimitToast,
+    isCreateTagErrorToastOpen: tagField.isCreateTagErrorToastOpen,
+    closeCreateTagErrorToast: tagField.closeCreateTagErrorToast,
     isRepeatActive: isRepeatActiveField.value,
     repeatFrequency: repeatFrequencyField.value,
     selectedWeekdayIds: selectedWeekdayIdsField.value,
@@ -197,9 +205,9 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     subtaskInputs: subtaskField.subtaskInputs,
     registerSubtaskInputRef: subtaskField.registerInputRef,
     changeSubtaskInput: subtaskField.handleInputChange,
-    changeSubtaskCompleted,
     setSubtaskCompleted,
     handleSubtaskInputKeyDown: subtaskField.handleInputKeyDown,
+    focusFirstSubtaskInput: subtaskField.focusFirstInput,
     memo: memoField.value,
     setMemo: memoField.onChange,
     icon: iconField.value,
@@ -207,7 +215,6 @@ export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
     removeIcon,
     selectTime,
     changeRepeatFrequency,
-    toggleWeekday,
     handleSubmit,
     dirtyFields: formState.dirtyFields,
   };
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
index d3e9b482..590ad94d 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-icon-submit.ts
@@ -7,6 +7,7 @@ import type { TodoIconValue } from "@repo/timo-design-system/ui";
 export interface UseDetailTodoIconSubmitParams {
   icon: TodoIconValue | null;
   selectIcon: (icon: TodoIconValue) => void;
+  removeIcon: () => void;
   onUpdate: (
     data: TodoUpdateRequest,
     handlers?: UpdateTodoSubmitHandlers,
@@ -16,52 +17,45 @@ export interface UseDetailTodoIconSubmitParams {
 export const useDetailTodoIconSubmit = ({
   icon,
   selectIcon,
+  removeIcon,
   onUpdate,
 }: UseDetailTodoIconSubmitParams) => {
   const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
-  const [pendingIcon, setPendingIcon] = useState<TodoIconValue | null>(icon);
 
-  const handleSelectIcon = (nextIcon: TodoIconValue) => {
-    setPendingIcon(nextIcon);
-  };
+  const handleOpenIconPanel = () => setIsIconPanelOpen(true);
+  const handleToggleIconPanel = () => setIsIconPanelOpen((prev) => !prev);
 
-  const handleOpenIconPanel = () => {
-    setPendingIcon(icon);
-    setIsIconPanelOpen(true);
-  };
-
-  const handleSubmitIcon = () => {
-    if (!pendingIcon || pendingIcon === icon) {
+  const handleSelectIcon = (nextIcon: TodoIconValue) => {
+    if (nextIcon === icon) {
       setIsIconPanelOpen(false);
       return;
     }
 
     onUpdate(
-      { icon: pendingIcon },
+      { icon: nextIcon },
       {
         onSuccess: () => {
-          selectIcon(pendingIcon);
+          selectIcon(nextIcon);
           setIsIconPanelOpen(false);
         },
       },
     );
   };
 
-  const handleToggleIconPanel = () => {
-    if (isIconPanelOpen) {
-      handleSubmitIcon();
-      return;
-    }
-
-    handleOpenIconPanel();
-  };
-
   const handleRemoveIcon = () => {
-    setPendingIcon(null);
+    onUpdate(
+      { icon: "NONE" },
+      {
+        onSuccess: () => {
+          removeIcon();
+          setIsIconPanelOpen(false);
+        },
+      },
+    );
   };
 
   return {
-    icon: isIconPanelOpen ? pendingIcon : icon,
+    icon,
     isIconPanelOpen,
     handleOpenIconPanel,
     handleToggleIconPanel,
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
index 66e8f133..86227810 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-patch-handlers.ts
@@ -10,10 +10,7 @@ import type {
 } from "@repo/timo-design-system/ui";
 
 import { formatDateKey } from "@/utils/date/date";
-import {
-  buildDetailTodoSubtasksUpdateRequest,
-  isTodoUpdateRepeatWeekday,
-} from "@/utils/todo/detail-todo-update-request";
+import { isTodoUpdateRepeatWeekday } from "@/utils/todo/detail-todo-update-request";
 import {
   convertApiDurationToSeconds,
   convertClockTimeTextToApiDuration,
@@ -25,11 +22,17 @@ export interface UseDetailTodoPatchHandlersParams {
     data: TodoUpdateRequest,
     handlers?: UpdateTodoSubmitHandlers,
   ) => void;
+  onToggleSubtask: (
+    subtaskId: number,
+    completed: boolean,
+    handlers?: UpdateTodoSubmitHandlers,
+  ) => void;
 }
 
 export const useDetailTodoPatchHandlers = ({
   form,
   onUpdate,
+  onToggleSubtask,
 }: UseDetailTodoPatchHandlersParams) => {
   const [selectedTime, setSelectedTime] = useState<TimeSelection>();
 
@@ -97,15 +100,14 @@ export const useDetailTodoPatchHandlers = ({
     );
   };
 
-  const handleWeekdayToggle = (weekdayId: string) => {
-    const selectedWeekdayIds = form.toggleWeekday(weekdayId);
+  const handleWeekdaysChange = (weekdayIds: string[]) => {
     updateTodo(
       {
         repeatType: "WEEKLY",
-        repeatWeekdays: selectedWeekdayIds.filter(isTodoUpdateRepeatWeekday),
+        repeatWeekdays: weekdayIds.filter(isTodoUpdateRepeatWeekday),
       },
       {
-        onSuccess: () => form.setSelectedWeekdayIds(selectedWeekdayIds),
+        onSuccess: () => form.setSelectedWeekdayIds(weekdayIds),
       },
     );
   };
@@ -126,11 +128,12 @@ export const useDetailTodoPatchHandlers = ({
   };
 
   const handleSubtaskCompletedChange = (id: number, completed: boolean) => {
-    const subtasks = form.changeSubtaskCompleted(id, completed);
-    updateTodo(
-      { subtasks: buildDetailTodoSubtasksUpdateRequest(subtasks) },
-      { onSuccess: () => form.setSubtaskCompleted(id, completed) },
-    );
+    const subtask = form.subtaskInputs.find((item) => item.id === id);
+    if (!subtask || subtask.subtaskId === null) return;
+
+    onToggleSubtask(subtask.subtaskId, completed, {
+      onSuccess: () => form.setSubtaskCompleted(id, completed),
+    });
   };
 
   return {
@@ -142,7 +145,7 @@ export const useDetailTodoPatchHandlers = ({
     handleSelectPriority,
     handleSelectTag,
     handleRepeatFrequencyChange,
-    handleWeekdayToggle,
+    handleWeekdaysChange,
     handleRepeatDayChange,
     handleSubtaskCompletedChange,
   };
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
index 0ab5bd09..818b47e7 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-detail-todo-text-auto-save.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
 import type { TodoUpdateRequest } from "@/api/generated/models";
-import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+import type { DetailTodoSubtaskInput } from "@/components/todo-modal/detail/DetailTodoTaskFields";
 import type { UpdateTodoSubmitHandlers } from "@/hooks/todo-modal/detail/use-update-todo-submit";
 
 import { buildDetailTodoTextUpdateRequest } from "@/utils/todo/detail-todo-update-request";
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-toggle-subtask-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-toggle-subtask-submit.ts
new file mode 100644
index 00000000..049c0b2f
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/detail/use-toggle-subtask-submit.ts
@@ -0,0 +1,56 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+
+import type { ErrorType } from "@/api/client/custom-instance";
+import type { ErrorDto } from "@/api/generated/models";
+
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
+import {
+  getGetTodoDetailQueryKey,
+  useChangeSubtaskStatus,
+} from "@/api/generated/endpoints/todo/todo";
+
+export interface ToggleSubtaskSubmitParams {
+  todoId: number;
+  subtaskId: number;
+  date: string;
+  completed: boolean;
+}
+
+export interface ToggleSubtaskSubmitHandlers {
+  onSuccess?: () => void;
+  onError?: (error: ErrorType<ErrorDto>) => void;
+}
+
+export const useToggleSubtaskSubmit = () => {
+  const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
+  const queryClient = useQueryClient();
+
+  const handleToggle = (
+    { todoId, subtaskId, date, completed }: ToggleSubtaskSubmitParams,
+    { onSuccess, onError }: ToggleSubtaskSubmitHandlers = {},
+  ) => {
+    changeSubtaskStatus(
+      { todoId, subtaskId, data: { isCompleted: completed } },
+      {
+        onSuccess: () => {
+          queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
+          queryClient.invalidateQueries({
+            queryKey: getGetTodoDetailQueryKey(todoId, { date }),
+          });
+          onSuccess?.();
+        },
+        onError,
+      },
+    );
+  };
+
+  return {
+    handleToggle,
+  };
+};
diff --git a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
index b145e719..9e1d2140 100644
--- a/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
+++ b/apps/timo-web/hooks/todo-modal/detail/use-update-todo-submit.ts
@@ -5,6 +5,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
 
+import { getGetFocusTodoQueryKey } from "@/api/generated/endpoints/focus/focus";
 import {
   getGetHomeQueryKey,
   getGetTodayQueryKey,
@@ -13,6 +14,7 @@ import {
   getGetTodoDetailQueryKey,
   useUpdateTodo,
 } from "@/api/generated/endpoints/todo/todo";
+import { useStatisticsQueryInvalidation } from "@/hooks/statistics/use-statistics-query-invalidation";
 
 export interface UpdateTodoSubmitParams {
   todoId: number;
@@ -28,6 +30,7 @@ export interface UpdateTodoSubmitHandlers {
 export const useUpdateTodoSubmit = () => {
   const { mutate: updateTodo } = useUpdateTodo();
   const queryClient = useQueryClient();
+  const { invalidateStatistics } = useStatisticsQueryInvalidation();
 
   const handleUpdate = (
     { todoId, date, data }: UpdateTodoSubmitParams,
@@ -42,6 +45,10 @@ export const useUpdateTodoSubmit = () => {
           queryClient.invalidateQueries({
             queryKey: getGetTodoDetailQueryKey(todoId, { date }),
           });
+          invalidateStatistics();
+          queryClient.invalidateQueries({
+            queryKey: getGetFocusTodoQueryKey(),
+          });
           onSuccess?.();
         },
         onError,
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 8f846765..180de03d 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -28,10 +28,10 @@
       "additional": "Additional"
     },
     "priority": {
-      "urgent": "Very Important",
-      "high": "Important",
-      "medium": "Average",
-      "low": "Low"
+      "VERY_HIGH": "Very Important",
+      "HIGH": "Important",
+      "MEDIUM": "Average",
+      "LOW": "Low"
     },
     "close": "Close",
     "delete": "Delete"
@@ -62,6 +62,10 @@
       "ariaLabel": "To-do details",
       "save": "Save",
       "delete": "Delete to-do",
+      "deleteConfirmTitle": "Delete this to-do?",
+      "deleteConfirmDescription": "Deleting it will remove all related task information.",
+      "deleteConfirmCancel": "Go back",
+      "deleteConfirmConfirm": "Delete",
       "repeatFrequencyHeading": "Repeat",
       "repeatDayLabel": "day(s)"
     },
@@ -104,7 +108,11 @@
       "logoutConfirmTitle": "Do you want to <red>log out</red>?",
       "logoutConfirmDescription": "Your data stays saved after logging out.\nSign back in anytime to pick up where you left off.",
       "logoutConfirmCancel": "Cancel",
-      "logoutConfirmConfirm": "Log out"
+      "logoutConfirmConfirm": "Log out",
+      "calendarDisconnectConfirmTitle": "Would you like to disconnect Google Calendar integration?",
+      "calendarDisconnectConfirmDescription": "If you disconnect, the synced schedules will disappear. \nDo you really want to disconnect?",
+      "calendarDisconnectConfirmCancel": "Go back",
+      "calendarDisconnectConfirmConfirm": "Disconnect"
     },
     "withdrawal": {
       "title": "Withdraw",
@@ -140,7 +148,7 @@
     }
   },
   "Toast": {
-    "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
+    "tagLimit": "You can create up to <blue>{count} tags</blue>, and to add more, please delete existing tags.",
     "todoLimitLine1": "You can add up to <blue>20 to-dos</blue> per day.",
     "todoLimitLine2": "To add a new to-do, please delete an existing one.",
     "onboardingSubmitFailed": "Failed to save onboarding. Please try again.",
@@ -151,6 +159,8 @@
     "tagActionFailed": "Failed to update the tag. Please try again.",
     "focusActionFailed": "Failed to process the request. Please try again.",
     "languageChangeFailed": "Failed to change the language. Please try again.",
+    "calendarConnectFailed": "Failed to integrate Google Calendar. Please try again.",
+    "calendarDisconnectFailed": "Failed to disconnect the calendar. Please try again.",
     "timerAlreadyRunning": "Another to-do's timer is already running. Please stop it first.",
     "timerStartFailed": "This to-do has no estimated duration set."
   },
@@ -160,7 +170,7 @@
     "headline": "Manage your day with clear timeboxes.",
     "description": "Please log in to your timo account.",
     "connectLabel": "Log in with Google",
-    "termsNotice": "By continuing, you agree to the timo <terms>Terms of Service</terms> and <privacy>Privacy Policy</privacy>."
+    "termsNotice": "By continuing, you agree to the timo \n<terms>Terms of Service</terms> and <privacy>Privacy Policy</privacy>."
   },
   "Error": {
     "title": "A problem has occurred.",
@@ -245,7 +255,7 @@
       "title": "Shall we stop now?",
       "description": "The <blue>{minutes}</blue> completed so far will be recorded in the timebox.",
       "continueButton": "Continue",
-      "switchButton": "Switch"
+      "switchButton": "Finish"
     },
     "completeModal": {
       "title": "The task has been completed!",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index c616188d..7e48164f 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -28,10 +28,10 @@
       "additional": "기타"
     },
     "priority": {
-      "urgent": "매우중요",
-      "high": "중요",
-      "medium": "보통",
-      "low": "낮음"
+      "VERY_HIGH": "매우중요",
+      "HIGH": "중요",
+      "MEDIUM": "보통",
+      "LOW": "낮음"
     },
     "close": "닫기",
     "delete": "삭제"
@@ -62,6 +62,10 @@
       "ariaLabel": "투두 상세",
       "save": "저장",
       "delete": "투두 삭제",
+      "deleteConfirmTitle": "이 할 일을 삭제할까요?",
+      "deleteConfirmDescription": "삭제하면 작업과 관련된 정보가 함께 삭제됩니다.",
+      "deleteConfirmCancel": "돌아가기",
+      "deleteConfirmConfirm": "삭제하기",
       "repeatFrequencyHeading": "반복 일정",
       "repeatDayLabel": "일"
     },
@@ -104,7 +108,11 @@
       "logoutConfirmTitle": "로그아웃할까요?",
       "logoutConfirmDescription": "로그아웃 후에도 데이터는 그대로 유지돼요.\n다시 로그인하면 이어서 사용할 수 있어요.",
       "logoutConfirmCancel": "취소",
-      "logoutConfirmConfirm": "로그아웃"
+      "logoutConfirmConfirm": "로그아웃",
+      "calendarDisconnectConfirmTitle": "구글 캘린더 연동을 해제할까요?",
+      "calendarDisconnectConfirmDescription": "연동을 해제하면 동기화된 일정이 사라져요. \n정말 연동을 해제하시겠어요?",
+      "calendarDisconnectConfirmCancel": "돌아가기",
+      "calendarDisconnectConfirmConfirm": "해제하기"
     },
     "withdrawal": {
       "title": "탈퇴",
@@ -140,7 +148,7 @@
     }
   },
   "Toast": {
-    "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
+    "tagLimit": "태그는 <blue>최대 {count}개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
     "todoLimitLine1": "투두는 하루에 <blue>최대 20개</blue>까지 추가할 수 있어요.",
     "todoLimitLine2": "새로운 투두를 추가하려면 기존 투두를 삭제해주세요.",
     "onboardingSubmitFailed": "온보딩 저장에 실패했어요. 다시 시도해 주세요.",
@@ -151,6 +159,8 @@
     "tagActionFailed": "태그 처리에 실패했어요. 다시 시도해 주세요.",
     "focusActionFailed": "요청을 처리하지 못했어요. 다시 시도해 주세요.",
     "languageChangeFailed": "언어 변경에 실패했어요. 다시 시도해 주세요.",
+    "calendarConnectFailed": "구글 캘린더 연동에 실패했어요. 다시 시도해 주세요.",
+    "calendarDisconnectFailed": "캘린더 연동 해제에 실패했어요. 다시 시도해 주세요.",
     "timerAlreadyRunning": "다른 투두의 타이머가 이미 실행 중이에요. 먼저 종료해 주세요.",
     "timerStartFailed": "예상 소요 시간이 설정되지 않은 투두입니다."
   },
diff --git a/apps/timo-web/public/og.png b/apps/timo-web/public/og.png
new file mode 100644
index 00000000..fc502f69
Binary files /dev/null and b/apps/timo-web/public/og.png differ
diff --git a/apps/timo-web/queries/calendar/use-calendar-events-query.ts b/apps/timo-web/queries/calendar/use-calendar-events-query.ts
new file mode 100644
index 00000000..a0efaed2
--- /dev/null
+++ b/apps/timo-web/queries/calendar/use-calendar-events-query.ts
@@ -0,0 +1,32 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  getCalendarEvents,
+  getGetCalendarEventsQueryKey,
+} from "@/api/generated/endpoints/calendar/calendar";
+import {
+  calendarEventsDataSchema,
+  type CalendarFilter,
+} from "@/schemas/calendar/calendar-events-schema";
+
+export interface CalendarEventsQueryParams {
+  filter: CalendarFilter;
+  baseDate: string;
+  enabled?: boolean;
+}
+
+export const useCalendarEventsQuery = ({
+  filter,
+  baseDate,
+  enabled = true,
+}: CalendarEventsQueryParams) =>
+  useQuery({
+    queryKey: getGetCalendarEventsQueryKey({ filter, baseDate }),
+    queryFn: ({ signal }) =>
+      getCalendarEvents({ filter, baseDate }, undefined, signal),
+    select: ({ data }) => calendarEventsDataSchema.parse(data),
+    enabled,
+    staleTime: 0,
+  });
diff --git a/apps/timo-web/schemas/calendar/calendar-events-schema.ts b/apps/timo-web/schemas/calendar/calendar-events-schema.ts
new file mode 100644
index 00000000..109f23e0
--- /dev/null
+++ b/apps/timo-web/schemas/calendar/calendar-events-schema.ts
@@ -0,0 +1,23 @@
+import { z } from "zod";
+
+export const calendarFilterSchema = z.enum(["DAY", "WEEK", "TWO_WEEK"]);
+
+export const calendarEventSchema = z.object({
+  title: z.string(),
+});
+
+export const calendarDaySchema = z.object({
+  date: z.string(),
+  events: z.array(calendarEventSchema),
+});
+
+export const calendarEventsDataSchema = z.object({
+  filter: calendarFilterSchema,
+  baseDate: z.string(),
+  days: z.array(calendarDaySchema),
+});
+
+export type CalendarFilter = z.infer<typeof calendarFilterSchema>;
+export type CalendarEvent = z.infer<typeof calendarEventSchema>;
+export type CalendarDay = z.infer<typeof calendarDaySchema>;
+export type CalendarEventsData = z.infer<typeof calendarEventsDataSchema>;
diff --git a/apps/timo-web/schemas/tag/tag-schema.ts b/apps/timo-web/schemas/tag/tag-schema.ts
index 349f043a..f3bf477b 100644
--- a/apps/timo-web/schemas/tag/tag-schema.ts
+++ b/apps/timo-web/schemas/tag/tag-schema.ts
@@ -1,9 +1,10 @@
 import { z } from "zod";
 
+export const MAX_CUSTOM_TAG_COUNT = 4;
+
 export const tagSchema = z.object({
   tagId: z.number(),
   name: z.string(),
-  isDefault: z.boolean(),
 });
 
 export const tagListDataSchema = z.object({
diff --git a/apps/timo-web/schemas/timer/timer-schema.ts b/apps/timo-web/schemas/timer/timer-schema.ts
index c28567ad..48222df8 100644
--- a/apps/timo-web/schemas/timer/timer-schema.ts
+++ b/apps/timo-web/schemas/timer/timer-schema.ts
@@ -4,6 +4,7 @@ import { z } from "zod";
 export const activeTimerSchema = z.object({
   timerId: z.number(),
   todoId: z.number(),
+  date: z.string(),
   iconType: z
     .enum(TODO_ICON_VALUES)
     .nullish()
diff --git a/apps/timo-web/schemas/todo/todo-schema.ts b/apps/timo-web/schemas/todo/todo-schema.ts
index 88729702..f1148242 100644
--- a/apps/timo-web/schemas/todo/todo-schema.ts
+++ b/apps/timo-web/schemas/todo/todo-schema.ts
@@ -44,18 +44,17 @@ export const createTodoRequestSchema = z
     repeatDayOfMonth: z.number().int().min(1).max(31).nullable(),
     memo: z.string().max(300).nullable(),
   })
-  .superRefine((value, ctx) => {
+  .transform((value) => {
     if (
       value.repeatType === "WEEKLY" &&
       (!value.repeatWeekdays || value.repeatWeekdays.length === 0)
     ) {
-      ctx.addIssue({
-        code: "custom",
-        path: ["repeatWeekdays"],
-        message: "반복할 요일을 선택해주세요.",
-      });
+      return { ...value, repeatType: "NONE" as const, repeatWeekdays: null };
     }
 
+    return value;
+  })
+  .superRefine((value, ctx) => {
     if (value.repeatType === "MONTHLY" && !value.repeatDayOfMonth) {
       ctx.addIssue({
         code: "custom",
@@ -103,9 +102,9 @@ export const todoSchema = z.object({
   title: z.string(),
   completed: z.boolean(),
   durationSeconds: z.number().default(0),
-  priority: todoPrioritySchema.nullish().transform((v) => v ?? "MEDIUM"),
+  priority: todoPrioritySchema.nullish().transform((v) => v ?? undefined),
   tag: todoTagSchema.nullish().transform((v) => v ?? undefined),
-  hasMemo: z.boolean(),
+  hasSubtask: z.boolean(),
   isRepeated: z.boolean(),
   timerStatus: todoTimerStatusSchema,
   sortOrder: z.number().default(0),
diff --git a/apps/timo-web/utils/todo/detail-todo-update-request.ts b/apps/timo-web/utils/todo/detail-todo-update-request.ts
index 0b1de024..1a0fb4ed 100644
--- a/apps/timo-web/utils/todo/detail-todo-update-request.ts
+++ b/apps/timo-web/utils/todo/detail-todo-update-request.ts
@@ -3,7 +3,7 @@ import type {
   TodoUpdateRequest,
   TodoUpdateRequestRepeatWeekdaysItem,
 } from "@/api/generated/models";
-import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/detail/use-detail-subtask-field";
+import type { DetailTodoSubtaskInput } from "@/components/todo-modal/detail/DetailTodoTaskFields";
 
 const DETAIL_TODO_UPDATE_WEEKDAYS = [
   "MON",
diff --git a/apps/timo-web/utils/todo/tag-label.ts b/apps/timo-web/utils/todo/tag-label.ts
index 7454d662..f0cc3bd2 100644
--- a/apps/timo-web/utils/todo/tag-label.ts
+++ b/apps/timo-web/utils/todo/tag-label.ts
@@ -20,3 +20,6 @@ const DEFAULT_TAG_ID_TO_LABEL_KEY: Record<number, TagLabelKey> = {
 
 export const getDefaultTagLabelKey = (tagId: number): TagLabelKey | undefined =>
   DEFAULT_TAG_ID_TO_LABEL_KEY[tagId];
+
+export const isDefaultTagId = (tagId: number): boolean =>
+  getDefaultTagLabelKey(tagId) !== undefined;
diff --git a/packages/timo-design-system/src/components/button/pill-button/PillButton.tsx b/packages/timo-design-system/src/components/button/pill-button/PillButton.tsx
index 73b61259..7e6f129b 100644
--- a/packages/timo-design-system/src/components/button/pill-button/PillButton.tsx
+++ b/packages/timo-design-system/src/components/button/pill-button/PillButton.tsx
@@ -2,10 +2,11 @@ import { cn } from "../../../lib";
 
 import type { ReactNode } from "react";
 
-export type PillButtonVariant = "gray" | "blue";
+export type PillButtonVariant = "gray" | "gray-dark" | "blue";
 
 const PILL_BUTTON_VARIANT: Record<PillButtonVariant, string> = {
   gray: "bg-timo-gray-300 text-timo-gray-900",
+  "gray-dark": "bg-timo-gray-700 text-white",
   blue: "bg-timo-blue-300 text-white",
 };
 
diff --git a/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.tsx b/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.tsx
index 65cc58eb..05ee73ce 100644
--- a/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.tsx
+++ b/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from "react";
+
 import { Dropdown } from "../../layout/dropdown/Dropdown";
 import { Calendar } from "../Calendar";
 
@@ -9,17 +11,50 @@ export interface DateSelectorProps {
   onChange?: (date: Date) => void;
 }
 
+const isSameCalendarDate = (a?: Date, b?: Date) => {
+  if (!a || !b) return a === b;
+
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+};
+
 export const DateSelector = ({
   trigger,
   value,
   onChange,
 }: DateSelectorProps) => {
+  const [draftDate, setDraftDate] = useState(value);
+  const draftDateRef = useRef(value);
+
+  const selectDraft = (date: Date) => {
+    draftDateRef.current = date;
+    setDraftDate(date);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      draftDateRef.current = value;
+      setDraftDate(value);
+      return;
+    }
+
+    if (
+      draftDateRef.current &&
+      !isSameCalendarDate(draftDateRef.current, value)
+    ) {
+      onChange?.(draftDateRef.current);
+    }
+  };
+
   return (
-    <Dropdown className="flex justify-center">
+    <Dropdown className="flex justify-center" onOpenChange={handleOpenChange}>
       <Dropdown.Trigger aria-haspopup="dialog">{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="p-0">
-        <Calendar value={value} onChange={onChange} />
+        <Calendar value={draftDate} onChange={selectDraft} />
       </Dropdown.Panel>
     </Dropdown>
   );
diff --git a/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx
index 7d2cfa0a..2973df80 100644
--- a/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx
+++ b/packages/timo-design-system/src/components/dropdown-view/DropdownView.tsx
@@ -49,7 +49,7 @@ export const DropdownView = ({
                 role="option"
                 aria-selected={isSelected}
                 onClick={() => onChange(item)}
-                className="typo-body-m-12 text-timo-gray-900 px-1.5 py-1"
+                className="typo-body-m-12 text-timo-gray-900 py-1"
               >
                 {item}
               </Dropdown.Item>
diff --git a/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx b/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
index cf8d59a6..11a8ad4f 100644
--- a/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
+++ b/packages/timo-design-system/src/components/layout/dropdown/Dropdown.tsx
@@ -59,6 +59,14 @@ const DropdownRoot = ({
   const rootRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
 
+  const setOpenState = (next: boolean) => {
+    setIsOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const toggle = () => setOpenState(!isOpen);
+  const close = () => setOpenState(false);
+
   useEffect(() => {
     if (!isOpen) return;
 
@@ -66,13 +74,13 @@ const DropdownRoot = ({
 
     const handleOutsideClick = (event: MouseEvent) => {
       if (!rootRef.current?.contains(event.target as Node)) {
-        setIsOpen(false);
+        close();
       }
     };
 
     const handleEscapeKeydown = (event: KeyboardEvent) => {
       if (event.key === "Escape") {
-        setIsOpen(false);
+        close();
         triggerRef.current?.focus();
       }
     };
@@ -85,15 +93,9 @@ const DropdownRoot = ({
       document.removeEventListener("mousedown", handleOutsideClick);
       document.removeEventListener("keydown", handleEscapeKeydown);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
-  const toggle = () => {
-    const next = !isOpen;
-    setIsOpen(next);
-    onOpenChange?.(next);
-  };
-  const close = () => setIsOpen(false);
-
   return (
     <DropdownContext.Provider
       value={{ isOpen, toggle, close, triggerRef, align }}
diff --git a/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.tsx b/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.tsx
index 4911ab8f..257164ac 100644
--- a/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.tsx
+++ b/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from "react";
+
 import { cn } from "../../../lib";
 import { Dropdown } from "../../layout/dropdown/Dropdown";
 import { PriorityIcon } from "../priority-icon/PriorityIcon";
@@ -35,20 +37,41 @@ export const PrioritySelector = ({
   labels = PRIORITY_LABEL,
   onSelect,
 }: PrioritySelectorProps) => {
+  const [draftPriority, setDraftPriority] = useState(selected);
+  const draftPriorityRef = useRef(selected);
+
+  const selectDraft = (priority: PriorityLevel) => {
+    draftPriorityRef.current = priority;
+    setDraftPriority(priority);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      draftPriorityRef.current = selected;
+      setDraftPriority(selected);
+      return;
+    }
+
+    if (draftPriorityRef.current && draftPriorityRef.current !== selected) {
+      onSelect?.(draftPriorityRef.current);
+    }
+  };
+
   return (
-    <Dropdown className="flex justify-center">
+    <Dropdown className="flex justify-center" onOpenChange={handleOpenChange}>
       <Dropdown.Trigger aria-haspopup="menu" className="py-2">
         {trigger}
       </Dropdown.Trigger>
 
       <Dropdown.Panel className="shadow-timo gap-1">
         {PRIORITY_LEVELS.map((priority) => {
-          const isSelected = priority === selected;
+          const isSelected = priority === draftPriority;
 
           return (
             <Dropdown.Item
               key={priority}
-              onClick={() => onSelect?.(priority)}
+              onClick={() => selectDraft(priority)}
+              closeOnSelect={false}
               aria-pressed={isSelected}
               className={cn(
                 "gap-2.25 py-0.5 pr-1 pl-2.75",
diff --git a/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.stories.tsx b/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.stories.tsx
index 781fb9b5..fb5570aa 100644
--- a/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.stories.tsx
+++ b/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.stories.tsx
@@ -81,12 +81,7 @@ const WeeklyDemo = (args: RepeatSelectorProps) => {
         ...args.weekly,
         weekdays: WEEKDAYS_KO,
         selectedWeekdayIds,
-        onWeekdayToggle: (id) =>
-          setSelectedWeekdayIds((prev) =>
-            prev.includes(id)
-              ? prev.filter((item) => item !== id)
-              : [...prev, id],
-          ),
+        onWeekdaysChange: setSelectedWeekdayIds,
       }}
     />
   );
diff --git a/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.tsx b/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.tsx
index e714f949..216f4649 100644
--- a/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.tsx
+++ b/packages/timo-design-system/src/components/repeat/repeat-selector/RepeatSelector.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Fragment, useId, useState } from "react";
+import { Fragment, useId, useRef, useState } from "react";
 
 import { ChevronDownIcon } from "../../../icons";
 import { cn } from "../../../lib";
@@ -24,7 +24,7 @@ export interface WeekdayOption {
 export interface RepeatWeeklyDetail {
   weekdays: WeekdayOption[];
   selectedWeekdayIds: string[];
-  onWeekdayToggle?: (id: string) => void;
+  onWeekdaysChange?: (weekdayIds: string[]) => void;
 }
 
 export interface RepeatMonthlyDetail {
@@ -44,6 +44,7 @@ export interface RepeatSelectorProps {
   frequencyHeading?: string;
   detailHeading: string;
   options: RepeatOption[];
+  isActive?: boolean;
   frequency: RepeatFrequency;
   onFrequencyChange?: (frequency: RepeatFrequency) => void;
   weekly: RepeatWeeklyDetail;
@@ -83,11 +84,17 @@ const RepeatFrequencyList = ({
   );
 };
 
+interface RepeatWeeklyDetailSectionProps {
+  weekdays: WeekdayOption[];
+  selectedWeekdayIds: string[];
+  onWeekdayToggle: (id: string) => void;
+}
+
 const RepeatWeeklyDetailSection = ({
   weekdays,
   selectedWeekdayIds,
   onWeekdayToggle,
-}: RepeatWeeklyDetail) => {
+}: RepeatWeeklyDetailSectionProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-2.5">
       {weekdays.map(({ id, label }) => (
@@ -138,32 +145,101 @@ const RepeatMonthlyDetailSection = ({
   );
 };
 
+const isSameWeekdaySelection = (a: string[], b: string[]) => {
+  if (a.length !== b.length) return false;
+
+  const sortedA = [...a].sort();
+  const sortedB = [...b].sort();
+
+  return sortedA.every((item, index) => item === sortedB[index]);
+};
+
 export const RepeatSelector = ({
   trigger,
   frequencyHeading = "반복 일정",
   detailHeading,
   options,
+  isActive = true,
   frequency,
   onFrequencyChange,
   weekly,
   monthly,
 }: RepeatSelectorProps) => {
   const [isPicking, setIsPicking] = useState(true);
-  const [selectedFrequency, setSelectedFrequency] =
+  const [draftFrequency, setDraftFrequency] =
     useState<RepeatFrequency>(frequency);
+  const [draftWeekdayIds, setDraftWeekdayIds] = useState<string[]>(
+    weekly.selectedWeekdayIds,
+  );
+  const [draftRepeatDay, setDraftRepeatDay] = useState(monthly.repeatDay);
+
+  const draftFrequencyRef = useRef(frequency);
+  const draftWeekdayIdsRef = useRef(weekly.selectedWeekdayIds);
+  const draftRepeatDayRef = useRef(monthly.repeatDay);
+  // 반복이 꺼져 있을 때(isActive=false) frequency는 "DAILY"라는 기본값을 표시할
+  // 뿐 실제로 저장된 값이 아니다. 이 경우 "매일"을 선택해도 draft가 기본값과
+  // 같아서 "변경 없음"으로 오인되므로, 사용자가 실제로 클릭했는지를 별도로
+  // 추적해 그 경우엔 값이 같아도 반드시 커밋한다.
+  const hasSelectedFrequencyRef = useRef(false);
 
   const selectedLabel = options.find(
-    (option) => option.frequency === selectedFrequency,
+    (option) => option.frequency === draftFrequency,
   )?.label;
 
   const handleSelectFrequency = (value: RepeatFrequency) => {
-    setSelectedFrequency(value);
-    onFrequencyChange?.(value);
+    hasSelectedFrequencyRef.current = true;
+    draftFrequencyRef.current = value;
+    setDraftFrequency(value);
     if (value !== "DAILY") setIsPicking(false);
   };
 
+  const handleWeekdayToggle = (id: string) => {
+    const next = draftWeekdayIdsRef.current.includes(id)
+      ? draftWeekdayIdsRef.current.filter((item) => item !== id)
+      : [...draftWeekdayIdsRef.current, id];
+
+    draftWeekdayIdsRef.current = next;
+    setDraftWeekdayIds(next);
+  };
+
+  const handleRepeatDayChange = (value: string) => {
+    draftRepeatDayRef.current = value;
+    setDraftRepeatDay(value);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      hasSelectedFrequencyRef.current = false;
+      draftFrequencyRef.current = frequency;
+      setDraftFrequency(frequency);
+      draftWeekdayIdsRef.current = weekly.selectedWeekdayIds;
+      setDraftWeekdayIds(weekly.selectedWeekdayIds);
+      draftRepeatDayRef.current = monthly.repeatDay;
+      setDraftRepeatDay(monthly.repeatDay);
+      return;
+    }
+
+    if (
+      hasSelectedFrequencyRef.current &&
+      (draftFrequencyRef.current !== frequency || !isActive)
+    ) {
+      onFrequencyChange?.(draftFrequencyRef.current);
+    }
+    if (
+      !isSameWeekdaySelection(
+        draftWeekdayIdsRef.current,
+        weekly.selectedWeekdayIds,
+      )
+    ) {
+      weekly.onWeekdaysChange?.(draftWeekdayIdsRef.current);
+    }
+    if (draftRepeatDayRef.current !== monthly.repeatDay) {
+      monthly.onRepeatDayChange?.(draftRepeatDayRef.current);
+    }
+  };
+
   return (
-    <Dropdown className="flex justify-center">
+    <Dropdown className="flex justify-center" onOpenChange={handleOpenChange}>
       <Dropdown.Trigger aria-haspopup="menu">{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="shadow-timo w-32.5 gap-1 p-0">
@@ -184,7 +260,7 @@ export const RepeatSelector = ({
             <ChevronDownIcon
               className={cn(
                 "shrink-0 transition-transform duration-200 ease-in-out",
-                isPicking && "rotate-180",
+                !isPicking && "rotate-180",
               )}
             />
           </button>
@@ -193,26 +269,32 @@ export const RepeatSelector = ({
         {isPicking ? (
           <RepeatFrequencyList
             options={options}
-            selectedFrequency={selectedFrequency}
+            selectedFrequency={draftFrequency}
             onSelect={handleSelectFrequency}
           />
         ) : (
           <div
             className={cn(
               "border-timo-gray-500 flex w-full flex-col gap-2 border-t px-3.5 py-1.5",
-              DETAIL_ALIGN[selectedFrequency],
+              DETAIL_ALIGN[draftFrequency],
             )}
           >
             <span className="typo-body-r-12 text-timo-gray-700 w-full whitespace-nowrap">
               {detailHeading}
             </span>
 
-            {selectedFrequency === "WEEKLY" && (
-              <RepeatWeeklyDetailSection {...weekly} />
+            {draftFrequency === "WEEKLY" && (
+              <RepeatWeeklyDetailSection
+                weekdays={weekly.weekdays}
+                selectedWeekdayIds={draftWeekdayIds}
+                onWeekdayToggle={handleWeekdayToggle}
+              />
             )}
-            {selectedFrequency === "MONTHLY" && (
+            {draftFrequency === "MONTHLY" && (
               <RepeatMonthlyDetailSection
-                {...monthly}
+                repeatDayLabel={monthly.repeatDayLabel}
+                repeatDay={draftRepeatDay}
+                onRepeatDayChange={handleRepeatDayChange}
                 ariaLabel={detailHeading}
               />
             )}
diff --git a/packages/timo-design-system/src/components/tag/tag-selector/TagSelector.tsx b/packages/timo-design-system/src/components/tag/tag-selector/TagSelector.tsx
index 97e144aa..61bdb7fc 100644
--- a/packages/timo-design-system/src/components/tag/tag-selector/TagSelector.tsx
+++ b/packages/timo-design-system/src/components/tag/tag-selector/TagSelector.tsx
@@ -1,3 +1,5 @@
+import { useRef, useState } from "react";
+
 import { PlusIcon } from "../../../icons";
 import { cn } from "../../../lib";
 import { Dropdown } from "../../layout/dropdown/Dropdown";
@@ -21,20 +23,41 @@ export const TagSelector = ({
   onSelect,
   onAddClick,
 }: TagSelectorProps) => {
+  const [draftTag, setDraftTag] = useState(selected);
+  const draftTagRef = useRef(selected);
+
+  const selectDraft = (tag: string) => {
+    draftTagRef.current = tag;
+    setDraftTag(tag);
+  };
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      draftTagRef.current = selected;
+      setDraftTag(selected);
+      return;
+    }
+
+    if (draftTagRef.current && draftTagRef.current !== selected) {
+      onSelect?.(draftTagRef.current);
+    }
+  };
+
   return (
-    <Dropdown className="flex justify-center">
+    <Dropdown className="flex justify-center" onOpenChange={handleOpenChange}>
       <Dropdown.Trigger aria-haspopup="menu" className="p-1">
         {trigger}
       </Dropdown.Trigger>
 
       <Dropdown.Panel className="shadow-timo">
         {tags.map((tag) => {
-          const isSelected = tag === selected;
+          const isSelected = tag === draftTag;
 
           return (
             <Dropdown.Item
               key={tag}
-              onClick={() => onSelect?.(tag)}
+              onClick={() => selectDraft(tag)}
+              closeOnSelect={false}
               aria-pressed={isSelected}
               className={cn("px-1.5 py-1", isSelected && "bg-timo-gray-500")}
             >
diff --git a/packages/timo-design-system/src/components/time/time-selector/TimeSelector.tsx b/packages/timo-design-system/src/components/time/time-selector/TimeSelector.tsx
index d9b156ff..b204c3e2 100644
--- a/packages/timo-design-system/src/components/time/time-selector/TimeSelector.tsx
+++ b/packages/timo-design-system/src/components/time/time-selector/TimeSelector.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useRef, useState } from "react";
+
 import { AiDefaultIcon, AiWhiteIcon } from "../../../icons";
 import { cn } from "../../../lib";
 import { Dropdown } from "../../layout/dropdown/Dropdown";
@@ -47,26 +49,66 @@ export const TimeSelector = ({
   onSelect,
   onOpen,
 }: TimeSelectorProps) => {
-  const isAiSelected = selected === "ai";
-  const [minutesText = "00", secondsText = "00"] = time.split(":");
+  const [draftTime, setDraftTime] = useState(time);
+  const [draftSelected, setDraftSelected] = useState(selected);
+  const draftTimeRef = useRef(time);
+  const draftSelectedRef = useRef(selected);
+
+  const isAiSelected = draftSelected === "ai";
+  const [minutesText = "00", secondsText = "00"] = draftTime.split(":");
+
+  const selectDraftTime = (value: string) => {
+    draftTimeRef.current = value;
+    setDraftTime(value);
+  };
+
+  const selectDraft = (value: TimeSelection) => {
+    draftSelectedRef.current = value;
+    setDraftSelected(value);
+  };
+
+  useEffect(() => {
+    draftSelectedRef.current = selected;
+    setDraftSelected(selected);
+  }, [selected]);
+
+  useEffect(() => {
+    draftTimeRef.current = time;
+    setDraftTime(time);
+  }, [time]);
 
   const handleMinutesChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onTimeChange?.(`${sanitizeTimeSegment(event.target.value)}:${secondsText}`);
+    selectDraftTime(
+      `${sanitizeTimeSegment(event.target.value)}:${secondsText}`,
+    );
   };
 
   const handleSecondsChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onTimeChange?.(
+    selectDraftTime(
       `${minutesText}:${sanitizeSecondsSegment(event.target.value)}`,
     );
   };
 
+  const handleOpenChange = (isOpen: boolean) => {
+    if (isOpen) {
+      draftTimeRef.current = time;
+      setDraftTime(time);
+      draftSelectedRef.current = selected;
+      setDraftSelected(selected);
+      onOpen?.();
+      return;
+    }
+
+    if (draftSelectedRef.current && draftSelectedRef.current !== selected) {
+      onSelect?.(draftSelectedRef.current);
+    }
+    if (draftTimeRef.current !== time) {
+      onTimeChange?.(draftTimeRef.current);
+    }
+  };
+
   return (
-    <Dropdown
-      className="flex justify-center"
-      onOpenChange={(isOpen) => {
-        if (isOpen) onOpen?.();
-      }}
-    >
+    <Dropdown className="flex justify-center" onOpenChange={handleOpenChange}>
       <Dropdown.Trigger>{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="shadow-timo w-23.75">
@@ -78,7 +120,7 @@ export const TimeSelector = ({
         >
           <button
             type="button"
-            onClick={() => onSelect?.("ai")}
+            onClick={() => selectDraft("ai")}
             aria-pressed={isAiSelected}
             aria-label="AI 추천 시간 선택"
             className="shrink-0"
@@ -124,12 +166,13 @@ export const TimeSelector = ({
 
         <div className="flex w-full flex-col items-start gap-1.5">
           {times.map(({ minute, value, unit }) => {
-            const isSelected = minute === selected;
+            const isSelected = minute === draftSelected;
 
             return (
               <Dropdown.Item
                 key={minute}
-                onClick={() => onSelect?.(minute)}
+                onClick={() => selectDraft(minute)}
+                closeOnSelect={false}
                 aria-pressed={isSelected}
                 className={cn(
                   "justify-between px-[3.5px] py-[2.5px]",
diff --git a/packages/timo-design-system/src/components/todo/todo-toolbar/TodoToolbar.tsx b/packages/timo-design-system/src/components/todo/todo-toolbar/TodoToolbar.tsx
index e8057eb8..13028893 100644
--- a/packages/timo-design-system/src/components/todo/todo-toolbar/TodoToolbar.tsx
+++ b/packages/timo-design-system/src/components/todo/todo-toolbar/TodoToolbar.tsx
@@ -175,6 +175,7 @@ export const TodoToolbar = ({
 
       <RepeatSelector
         {...repeat}
+        isActive={isRepeatActive}
         trigger={(isOpen) =>
           isOpen ? (
             <RepeatBlueIcon />