diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
index e222ec28..b327112f 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayTodoCardContainer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import type { TodoTimerStatusTypes } from "@/api/common/todo-schema";
 import type { ReactNode } from "react";
@@ -38,6 +38,10 @@ export const TodayTodoCardContainer = ({
 }: TodayTodoCardContainerProps) => {
   const [isHovered, setIsHovered] = useState(false);
 
+  useEffect(() => {
+    if (isCompleted) setIsHovered(false);
+  }, [isCompleted]);
+
   const isPlaying = timerStatus === "RUNNING";
   const isDimmed = isCompleted && !isHovered;
 
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 e0788a80..835b1fd2 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
@@ -15,6 +15,7 @@ import {
 } from "@/api/generated/endpoints/timer/timer";
 import {
   getGetTodoDetailQueryKey,
+  useChangeSubtaskStatus,
   useChangeTodoStatus,
 } from "@/api/generated/endpoints/todo/todo";
 import { useActiveTimer } from "@/hooks/use-active-timer";
@@ -42,6 +43,7 @@ export const useTodayTodoList = (
   const queryClient = useQueryClient();
   const { data: activeTimer } = useActiveTimer();
   const { mutate: changeTodoStatus } = useChangeTodoStatus();
+  const { mutate: changeSubtaskStatus } = useChangeSubtaskStatus();
   const { mutate: stopTimer } = useStopTimer();
   const { invalidateTimerState, invalidateTimeBoxes } =
     useTimerQueryInvalidation();
@@ -177,21 +179,40 @@ export const useTodayTodoList = (
   };
 
   const handleSubTodoCheck = (todoId: number, subtaskId: number) => {
-    // TODO: API
+    const todo = todos.find((t) => t.todoId === todoId);
+    const subtask = todo?.subtasks.find((s) => s.subtaskId === subtaskId);
+    if (!subtask) return;
+
+    const completed = !subtask.completed;
+    const dateKey = todo?.date;
+    if (!dateKey) return;
+
+    const previous = todos;
     setTodos((prev) =>
-      prev.map((todo) =>
-        todo.todoId === todoId
+      prev.map((t) =>
+        t.todoId === todoId
           ? {
-              ...todo,
-              subtasks: todo.subtasks.map((s) =>
-                s.subtaskId === subtaskId
-                  ? { ...s, completed: !s.completed }
-                  : s,
+              ...t,
+              subtasks: t.subtasks.map((s) =>
+                s.subtaskId === subtaskId ? { ...s, completed } : s,
               ),
             }
-          : todo,
+          : t,
       ),
     );
+
+    changeSubtaskStatus(
+      { todoId, subtaskId, data: { isCompleted: completed } },
+      {
+        onSuccess: () => {
+          invalidateTodayView();
+          invalidateTodoDetail(todoId, dateKey);
+        },
+        onError: () => {
+          setTodos(previous);
+        },
+      },
+    );
   };
 
   return {
diff --git a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
index 6003adc2..5bd06eb9 100644
--- a/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/today/_components/TodayTodoCard.tsx
@@ -142,6 +142,7 @@ export const TodayTodoCard = ({
             <li key={sub.id} className="flex items-center gap-2">
               <div
                 role="none"
+                className="inline-flex items-center"
                 onClick={stopPropagation}
                 onKeyDown={stopPropagation}
               >
@@ -150,7 +151,12 @@ export const TodayTodoCard = ({
                   onChange={() => onSubTodoCheck(sub.id)}
                 />
               </div>
-              <span className={cn("typo-body-r-12", style.subText)}>
+              <span
+                className={cn(
+                  "typo-body-r-12",
+                  sub.isDone ? "text-timo-gray-500" : style.subText,
+                )}
+              >
                 {sub.text}
               </span>
             </li>
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 ac141940..626a7a6a 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
@@ -2,7 +2,10 @@
 
 import { useQueryClient } from "@tanstack/react-query";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
 import { useDeleteTodo } from "@/api/generated/endpoints/todo/todo";
 
 export interface DeleteTodoSubmitHandlers {
@@ -23,6 +26,7 @@ export const useDeleteTodoSubmit = () => {
       {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
           onSuccess();
         },
         onError,
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 ae7b1f4a..b145e719 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,7 +5,10 @@ import { useQueryClient } from "@tanstack/react-query";
 import type { ErrorType } from "@/api/client/custom-instance";
 import type { ErrorDto, TodoUpdateRequest } from "@/api/generated/models";
 
-import { getGetHomeQueryKey } from "@/api/generated/endpoints/home/home";
+import {
+  getGetHomeQueryKey,
+  getGetTodayQueryKey,
+} from "@/api/generated/endpoints/home/home";
 import {
   getGetTodoDetailQueryKey,
   useUpdateTodo,
@@ -35,6 +38,7 @@ export const useUpdateTodoSubmit = () => {
       {
         onSuccess: () => {
           queryClient.invalidateQueries({ queryKey: getGetHomeQueryKey() });
+          queryClient.invalidateQueries({ queryKey: getGetTodayQueryKey() });
           queryClient.invalidateQueries({
             queryKey: getGetTodoDetailQueryKey(todoId, { date }),
           });