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 9d6120a9..f0497c0b 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
@@ -22,8 +22,9 @@ import type {
   TodoPriorityTypes,
   TodoTimerStatusTypes,
 } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { KeyboardEvent, MouseEvent } from "react";
 
-import { convertDurationToTimeText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time";
+import { convertDurationToTimeText } from "@/utils/todo/todo-time";
 
 type PriorityLabelKeyTypes = "urgent" | "high" | "medium" | "low";
 
@@ -34,6 +35,10 @@ const PRIORITY_LABEL_KEY: Record<TodoPriorityTypes, PriorityLabelKeyTypes> = {
   LOW: "low",
 };
 
+const isInteractiveElement = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  Boolean(target.closest("button, input, label"));
+
 export interface HomeTodoCardProps {
   todoId: number;
   title: string;
@@ -46,6 +51,7 @@ export interface HomeTodoCardProps {
   timerStatus: TodoTimerStatusTypes;
   subtaskTitle?: string;
   isSubtaskCompleted?: boolean;
+  onClickTodo?: () => void;
   onToggleCompleted: (completed: boolean) => void;
   onTogglePlay: () => void;
   onToggleSubtaskCompleted?: (completed: boolean) => void;
@@ -63,6 +69,7 @@ export const HomeTodoCard = ({
   timerStatus,
   subtaskTitle,
   isSubtaskCompleted = false,
+  onClickTodo,
   onToggleCompleted,
   onTogglePlay,
   onToggleSubtaskCompleted,
@@ -81,6 +88,21 @@ export const HomeTodoCard = ({
 
   const priorityLabel = tCommon(`priority.${PRIORITY_LABEL_KEY[priority]}`);
 
+  const handleCardClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (isInteractiveElement(event.target)) return;
+
+    onClickTodo?.();
+  };
+
+  const handleCardKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (isInteractiveElement(event.target)) return;
+    if (!onClickTodo) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+
+    event.preventDefault();
+    onClickTodo();
+  };
+
   const titleRow = (
     <div className="flex w-full items-center justify-between gap-2">
       <div className="flex min-w-0 flex-1 items-center gap-1">
@@ -112,14 +134,19 @@ export const HomeTodoCard = ({
   );
 
   return (
-    <article
+    <div
       ref={setNodeRef}
       style={sortableStyle}
       {...attributes}
       {...listeners}
+      role={onClickTodo ? "button" : attributes.role}
+      tabIndex={onClickTodo ? 0 : attributes.tabIndex}
+      onClick={onClickTodo ? handleCardClick : undefined}
+      onKeyDown={onClickTodo ? handleCardKeyDown : undefined}
       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",
+        onClickTodo && "cursor-pointer",
       )}
     >
       {subtaskTitle ? (
@@ -167,6 +194,6 @@ export const HomeTodoCard = ({
           {convertDurationToTimeText(durationSeconds)}
         </span>
       </div>
-    </article>
+    </div>
   );
 };
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 07602202..527452ca 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,21 +15,10 @@ 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 { useHomeView } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_queries/use-home-view";
+import { DetailTodoModalContainer } from "@/components/todo-modal/detail/DetailTodoModalContainer";
 import { DndSortableListProvider } from "@/providers/dnd/DndSortableListProvider";
 import { formatDateKey } from "@/utils/date/date";
-
-const TAG_LABEL_KEYS = [
-  "dailyLife",
-  "work",
-  "exercise",
-  "assignment",
-  "additional",
-] as const;
-
-type TagLabelKey = (typeof TAG_LABEL_KEYS)[number];
-
-const isTagLabelKey = (value: string): value is TagLabelKey =>
-  (TAG_LABEL_KEYS as readonly string[]).includes(value);
+import { isTagLabelKey } from "@/utils/todo/tag-label";
 
 export const HomeTodoContainer = () => {
   const tCommon = useTranslations("Common");
@@ -48,6 +37,7 @@ export const HomeTodoContainer = () => {
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
+    handleDeleteTodo,
     handleReorderTodo,
   } = useHomeTodosByDate(days);
 
@@ -100,42 +90,57 @@ export const HomeTodoContainer = () => {
                   const [firstSubtask] = todo.subtasks;
 
                   return (
-                    <HomeTodoCard
+                    <DetailTodoModalContainer
                       key={todo.todoId}
-                      todoId={todo.todoId}
-                      title={todo.title}
-                      isCompleted={todo.completed}
-                      durationSeconds={todo.durationSeconds}
-                      priority={todo.priority}
-                      tagName={
-                        todo.tag &&
-                        (isTagLabelKey(todo.tag.name)
-                          ? tCommon(`tag.${todo.tag.name}`)
-                          : todo.tag.name)
-                      }
-                      hasMemo={todo.hasMemo}
-                      isRepeated={todo.isRepeated}
-                      timerStatus={todo.timerStatus}
-                      subtaskTitle={firstSubtask?.content}
-                      isSubtaskCompleted={firstSubtask?.completed}
-                      onToggleCompleted={(completed) =>
-                        handleToggleCompleted(dateKey, todo.todoId, completed)
-                      }
+                      todo={todo}
                       onTogglePlay={() =>
                         handleTogglePlay(dateKey, todo.todoId)
                       }
-                      onToggleSubtaskCompleted={
-                        firstSubtask
-                          ? (completed) =>
-                              handleToggleSubtaskCompleted(
-                                dateKey,
-                                todo.todoId,
-                                firstSubtask.subtaskId,
-                                completed,
-                              )
-                          : undefined
-                      }
-                    />
+                      onDelete={() => handleDeleteTodo(dateKey, todo.todoId)}
+                    >
+                      {(openDetailTodoModal) => (
+                        <HomeTodoCard
+                          todoId={todo.todoId}
+                          title={todo.title}
+                          isCompleted={todo.completed}
+                          durationSeconds={todo.durationSeconds}
+                          priority={todo.priority}
+                          tagName={
+                            todo.tag &&
+                            (isTagLabelKey(todo.tag.name)
+                              ? tCommon(`tag.${todo.tag.name}`)
+                              : todo.tag.name)
+                          }
+                          hasMemo={todo.hasMemo}
+                          isRepeated={todo.isRepeated}
+                          timerStatus={todo.timerStatus}
+                          subtaskTitle={firstSubtask?.content}
+                          isSubtaskCompleted={firstSubtask?.completed}
+                          onClickTodo={openDetailTodoModal}
+                          onToggleCompleted={(completed) =>
+                            handleToggleCompleted(
+                              dateKey,
+                              todo.todoId,
+                              completed,
+                            )
+                          }
+                          onTogglePlay={() =>
+                            handleTogglePlay(dateKey, todo.todoId)
+                          }
+                          onToggleSubtaskCompleted={
+                            firstSubtask
+                              ? (completed) =>
+                                  handleToggleSubtaskCompleted(
+                                    dateKey,
+                                    todo.todoId,
+                                    firstSubtask.subtaskId,
+                                    completed,
+                                  )
+                              : undefined
+                          }
+                        />
+                      )}
+                    </DetailTodoModalContainer>
                   );
                 })}
               </div>
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
index 25e791d6..d7c51203 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
@@ -5,8 +5,8 @@ import { useTranslations } from "next-intl";
 import type { ApiDayOfWeek } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
 import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
-import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer";
 import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+import { CreateTodoModalContainer } from "@/components/todo-modal/create/CreateTodoModalContainer";
 import { getToday, parseDateKey } from "@/utils/date/date";
 
 export interface HomeDayHeaderContainerProps {
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 6abd08f8..cb3ef2c6 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
@@ -106,6 +106,14 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     );
   };
 
+  const handleDeleteTodo = (dateKey: string, todoId: number) => {
+    // TODO: API
+    setTodosByDate((prev) => ({
+      ...prev,
+      [dateKey]: (prev[dateKey] ?? []).filter((todo) => todo.todoId !== todoId),
+    }));
+  };
+
   const handleReorderTodo = (
     dateKey: string,
     fromIndex: number,
@@ -136,6 +144,7 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
+    handleDeleteTodo,
     handleReorderTodo,
   };
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
index 7ed94e39..993ff376 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/TodayDateHeaderContainer.tsx
@@ -6,7 +6,8 @@ import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_
 
 import { DateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/_components/DateInformation";
 import { convertDateToDateText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
-import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer";
+import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit";
+import { CreateTodoModalContainer } from "@/components/todo-modal/create/CreateTodoModalContainer";
 import { getToday } from "@/utils/date/date";
 import { getDayOfWeekKey } from "@/utils/date/get-day-of-week-key";
 
@@ -27,6 +28,7 @@ export const TodayDateHeaderContainer = ({
   const date = convertDateToDateText(today);
   const dayKey = getDayOfWeekKey(today);
   const dayOfWeek = tCommon(`weekday.${dayKey}`);
+  const { handleSubmit } = useCreateTodoSubmit({ onCreate: onCreateTodo });
 
   return (
     <div className="flex flex-col gap-3 pb-2">
@@ -38,7 +40,11 @@ export const TodayDateHeaderContainer = ({
         totalCount={totalCount}
         completedCount={completedCount}
       />
-      <CreateTodoModalContainer defaultDate={today} onCreate={onCreateTodo} />
+      <CreateTodoModalContainer
+        defaultDate={today}
+        buttonVariant="big"
+        onSubmit={handleSubmit}
+      />
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer.tsx
deleted file mode 100644
index 0885b885..00000000
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_containers/todo-modal/CreateTodoModalContainer.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-"use client";
-
-import { AddTaskButton } from "@repo/timo-design-system/ui";
-import { useTranslations } from "next-intl";
-import { overlay } from "overlay-kit";
-
-import type { TodoMock } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_mocks/today-todo-mock";
-
-import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/today/_hooks/todo-modal/use-create-todo-submit";
-import { CreateTodoModalContent } from "@/components/todo-modal/CreateTodoModalContent";
-
-export interface CreateTodoModalContainerProps {
-  defaultDate?: Date;
-  onCreate: (todo: TodoMock) => void;
-}
-
-export const CreateTodoModalContainer = ({
-  defaultDate,
-  onCreate,
-}: CreateTodoModalContainerProps) => {
-  const t = useTranslations("Home");
-  const { handleSubmit } = useCreateTodoSubmit({ onCreate });
-
-  const handleAddClick = () => {
-    overlay.open(({ isOpen, close, unmount }) => (
-      <CreateTodoModalContent
-        isOpen={isOpen}
-        onClose={close}
-        onExited={unmount}
-        defaultDate={defaultDate}
-        onSubmit={handleSubmit}
-      />
-    ));
-  };
-
-  return (
-    <AddTaskButton variant="big" text={t("addTask")} onClick={handleAddClick} />
-  );
-};
diff --git a/apps/timo-web/components/todo-modal/CreateTodoIconField.tsx b/apps/timo-web/components/todo-modal/common/TodoIconField.tsx
similarity index 93%
rename from apps/timo-web/components/todo-modal/CreateTodoIconField.tsx
rename to apps/timo-web/components/todo-modal/common/TodoIconField.tsx
index d7146266..057f87d9 100644
--- a/apps/timo-web/components/todo-modal/CreateTodoIconField.tsx
+++ b/apps/timo-web/components/todo-modal/common/TodoIconField.tsx
@@ -4,7 +4,7 @@ import { cn } from "@repo/timo-design-system/utils";
 
 import type { TodoIconValue } from "@repo/timo-design-system/ui";
 
-export interface CreateTodoIconFieldProps {
+export interface TodoIconFieldProps {
   icon: TodoIconValue | null;
   isIconPanelOpen: boolean;
   addIconLabel: string;
@@ -14,7 +14,7 @@ export interface CreateTodoIconFieldProps {
   onRemoveIcon: () => void;
 }
 
-export const CreateTodoIconField = ({
+export const TodoIconField = ({
   icon,
   isIconPanelOpen,
   addIconLabel,
@@ -22,7 +22,7 @@ export const CreateTodoIconField = ({
   onTogglePanel,
   onSelectIcon,
   onRemoveIcon,
-}: CreateTodoIconFieldProps) => {
+}: TodoIconFieldProps) => {
   return (
     <div className="flex w-full flex-col items-start gap-2">
       {!isIconPanelOpen && icon ? (
diff --git a/apps/timo-web/components/todo-modal/CreateTodoMemoField.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoMemoField.tsx
similarity index 100%
rename from apps/timo-web/components/todo-modal/CreateTodoMemoField.tsx
rename to apps/timo-web/components/todo-modal/create/CreateTodoMemoField.tsx
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
similarity index 67%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx
rename to apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
index a0a0733f..8af78a01 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContainer.tsx
@@ -4,21 +4,28 @@ import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { overlay } from "overlay-kit";
 
-import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit";
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
-import { CreateTodoModalContent } from "@/components/todo-modal/CreateTodoModalContent";
+import { CreateTodoModalContent } from "@/components/todo-modal/create/CreateTodoModalContent";
+import { useCreateTodoSubmit } from "@/hooks/todo-modal/use-create-todo-submit";
 
 export interface CreateTodoModalContainerProps {
   defaultDate?: Date;
+  buttonVariant?: "default" | "big";
+  onSubmit?: (data: CreateTodoRequest) => void;
 }
 
 export const CreateTodoModalContainer = ({
   defaultDate,
+  buttonVariant = "default",
+  onSubmit,
 }: CreateTodoModalContainerProps) => {
   const t = useTranslations("Home");
   const tToast = useTranslations("Toast");
   const { handleSubmit, isErrorToastOpen, closeErrorToast } =
     useCreateTodoSubmit();
+  const submitTodo = onSubmit ?? handleSubmit;
 
   const handleAddClick = () => {
     overlay.open(({ isOpen, close, unmount }) => (
@@ -27,14 +34,18 @@ export const CreateTodoModalContainer = ({
         onClose={close}
         onExited={unmount}
         defaultDate={defaultDate}
-        onSubmit={handleSubmit}
+        onSubmit={submitTodo}
       />
     ));
   };
 
   return (
     <>
-      <AddTaskButton text={t("addTask")} onClick={handleAddClick} />
+      <AddTaskButton
+        variant={buttonVariant}
+        text={t("addTask")}
+        onClick={handleAddClick}
+      />
 
       <AnimatedToast
         isOpen={isErrorToastOpen}
diff --git a/apps/timo-web/components/todo-modal/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
similarity index 91%
rename from apps/timo-web/components/todo-modal/CreateTodoModalContent.tsx
rename to apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
index fa1e9dad..693a94ec 100644
--- a/apps/timo-web/components/todo-modal/CreateTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
@@ -10,17 +10,17 @@ import type { CreateTodoRequest } from "@/api/todo/todo-schema";
 import type { PriorityLevel } from "@repo/timo-design-system/ui";
 
 import { createTodoRequestSchema } from "@/api/todo/todo-schema";
-import { useSubtaskField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field";
-import { useTitleField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field";
 import { OverlayModal } from "@/components/modal/OverlayModal";
 import { AnimatedToast } from "@/components/toast/AnimatedToast";
-import { CreateTodoIconField } from "@/components/todo-modal/CreateTodoIconField";
-import { CreateTodoMemoField } from "@/components/todo-modal/CreateTodoMemoField";
-import { CreateTodoTaskFields } from "@/components/todo-modal/CreateTodoTaskFields";
+import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
+import { CreateTodoMemoField } from "@/components/todo-modal/create/CreateTodoMemoField";
+import { CreateTodoTaskFields } from "@/components/todo-modal/create/CreateTodoTaskFields";
 import { useIconField } from "@/hooks/todo-modal/use-icon-field";
 import { useRepeatField } from "@/hooks/todo-modal/use-repeat-field";
+import { useSubtaskField } from "@/hooks/todo-modal/use-subtask-field";
 import { useTagField } from "@/hooks/todo-modal/use-tag-field";
 import { useTimeField } from "@/hooks/todo-modal/use-time-field";
+import { useTitleField } from "@/hooks/todo-modal/use-title-field";
 import { formatDateKey } from "@/utils/date/date";
 
 const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({
@@ -28,7 +28,7 @@ const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({
   title: "",
   subtasks: [],
   date: formatDateKey(defaultDate ?? new Date()),
-  duration: "0:00",
+  duration: "00:00",
   priority: null,
   tagId: null,
   repeatType: "NONE",
@@ -113,7 +113,7 @@ export const CreateTodoModalContent = ({
 
         <div className="flex w-full flex-col items-start gap-3.5">
           <div className="flex w-full flex-col items-start gap-2">
-            <CreateTodoIconField
+            <TodoIconField
               icon={iconField.icon}
               isIconPanelOpen={iconField.isIconPanelOpen}
               addIconLabel={t("createModal.addIcon")}
@@ -159,12 +159,19 @@ export const CreateTodoModalContent = ({
             onSelectTime={timeField.handleSelectTime}
             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"),
+            }}
             onSelectPriority={(level: PriorityLevel) =>
               priorityField.onChange(level)
             }
             tagLabel={tagField.selectedTagLabel ?? t("createModal.tagLabel")}
             tags={tagField.tagLabels}
             selectedTag={tagField.selectedTagLabel}
+            addTagLabel={t("createModal.addTag")}
             onSelectTag={tagField.handleSelectTag}
             onAddTagClick={tagField.handleAddTagClick}
             hasMemo={Boolean(memoField.value?.trim())}
diff --git a/apps/timo-web/components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
similarity index 100%
rename from apps/timo-web/components/todo-modal/CreateTodoTaskFields.tsx
rename to apps/timo-web/components/todo-modal/create/CreateTodoTaskFields.tsx
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
new file mode 100644
index 00000000..ca36ff68
--- /dev/null
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoMemoField.tsx
@@ -0,0 +1,36 @@
+import { useLayoutEffect, useRef } from "react";
+
+export interface DetailTodoMemoFieldProps {
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+  maxLength: number;
+}
+
+export const DetailTodoMemoField = ({
+  value,
+  placeholder,
+  onChange,
+  maxLength,
+}: DetailTodoMemoFieldProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      onChange={(event) => onChange(event.target.value)}
+      className="typo-body-r-14 text-timo-black placeholder:text-timo-gray-700 min-h-20 w-full resize-none overflow-hidden p-1 outline-none"
+    />
+  );
+};
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContainer.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContainer.tsx
new file mode 100644
index 00000000..823509d6
--- /dev/null
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContainer.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { overlay } from "overlay-kit";
+
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { ReactNode } from "react";
+
+import { DetailTodoModalContent } from "@/components/todo-modal/detail/DetailTodoModalContent";
+
+export interface DetailTodoModalContainerProps {
+  todo: Todo;
+  onTogglePlay: () => void;
+  onDelete: () => void;
+  children: (openDetailTodoModal: () => void) => ReactNode;
+}
+
+export const DetailTodoModalContainer = ({
+  todo,
+  onTogglePlay,
+  onDelete,
+  children,
+}: DetailTodoModalContainerProps) => {
+  const openDetailTodoModal = () => {
+    overlay.open(({ isOpen, close, unmount }) => (
+      <DetailTodoModalContent
+        isOpen={isOpen}
+        onClose={close}
+        onExited={unmount}
+        todo={todo}
+        onTogglePlay={onTogglePlay}
+        onDelete={onDelete}
+      />
+    ));
+  };
+
+  return <>{children(openDetailTodoModal)}</>;
+};
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
new file mode 100644
index 00000000..05c398ee
--- /dev/null
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoModalContent.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { DeleteIcon, TrashOnIcon } from "@repo/timo-design-system/icons";
+import { TodoToolbar } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { TimeSelection } from "@repo/timo-design-system/ui";
+
+import { OverlayModal } from "@/components/modal/OverlayModal";
+import { TodoIconField } from "@/components/todo-modal/common/TodoIconField";
+import { DetailTodoMemoField } from "@/components/todo-modal/detail/DetailTodoMemoField";
+import { DetailTodoTaskFields } from "@/components/todo-modal/detail/DetailTodoTaskFields";
+import {
+  DETAIL_TODO_TIME_OPTIONS,
+  DETAIL_TODO_WEEKDAY_IDS,
+  useDetailTodoForm,
+} from "@/hooks/todo-modal/use-detail-todo-form";
+import { formatShortDateLabel } from "@/utils/date/date";
+
+const DETAIL_TODO_MEMO_MAX_LENGTH = 300;
+
+export interface DetailTodoModalContentProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  todo: Todo;
+  onTogglePlay: () => void;
+  onDelete: () => void;
+}
+
+export const DetailTodoModalContent = ({
+  isOpen,
+  onClose,
+  onExited,
+  todo,
+  onTogglePlay,
+  onDelete,
+}: DetailTodoModalContentProps) => {
+  const t = useTranslations("Home.detailModal");
+  const tCreateModal = useTranslations("Home.createModal");
+  const tCommon = useTranslations("Common");
+  const detailTodoForm = useDetailTodoForm({ todo });
+  const [selectedTime, setSelectedTime] = useState<TimeSelection>();
+  const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const weekdays = DETAIL_TODO_WEEKDAY_IDS.map((weekdayId) => ({
+    id: weekdayId,
+    label: tCommon(`weekday.${weekdayId}`),
+  }));
+
+  const handleTogglePlay = () => {
+    onTogglePlay();
+    onClose();
+  };
+
+  const handleDelete = () => {
+    onDelete();
+    onClose();
+  };
+
+  const handleSelectTime = (nextTime: TimeSelection) => {
+    setSelectedTime(nextTime);
+    detailTodoForm.selectTime(nextTime);
+  };
+
+  return (
+    <OverlayModal
+      isOpen={isOpen}
+      onClose={onClose}
+      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={onClose}>
+          <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">22</p>
+            <p className="typo-body-m-12 text-timo-gray-700">
+              {tCommon("weekday.MON")}
+            </p>
+          </div>
+
+          <TodoIconField
+            icon={detailTodoForm.icon}
+            isIconPanelOpen={isIconPanelOpen}
+            addIconLabel={tCreateModal("addIcon")}
+            onOpenPanel={() => setIsIconPanelOpen(true)}
+            onTogglePanel={() => setIsIconPanelOpen((prev) => !prev)}
+            onSelectIcon={detailTodoForm.selectIcon}
+            onRemoveIcon={detailTodoForm.removeIcon}
+          />
+        </div>
+
+        <div className="flex w-full flex-col">
+          <div className="flex w-full flex-col gap-3">
+            <div className="bg-timo-gray-500 h-px w-full" />
+            <DetailTodoTaskFields
+              titleValue={detailTodoForm.title}
+              isCompleted={detailTodoForm.isCompleted}
+              timerStatus={todo.timerStatus}
+              subtaskInputs={detailTodoForm.subtaskInputs}
+              onTitleChange={detailTodoForm.changeTitle}
+              onToggleCompleted={detailTodoForm.setIsCompleted}
+              onTogglePlay={handleTogglePlay}
+              onSubtaskInputChange={detailTodoForm.changeSubtaskInput}
+              onToggleSubtaskCompleted={detailTodoForm.changeSubtaskCompleted}
+              registerSubtaskInputRef={detailTodoForm.registerSubtaskInputRef}
+              onSubtaskInputKeyDown={detailTodoForm.handleSubtaskInputKeyDown}
+            />
+          </div>
+
+          <div className="flex items-center gap-2 py-3">
+            <TodoToolbar
+              dateLabel={formatShortDateLabel(detailTodoForm.date)}
+              date={detailTodoForm.date}
+              onDateChange={detailTodoForm.setDate}
+              timeLabel={detailTodoForm.time}
+              timeOptions={DETAIL_TODO_TIME_OPTIONS}
+              time={detailTodoForm.time}
+              onTimeChange={detailTodoForm.setTime}
+              selectedTime={selectedTime}
+              onSelectTime={handleSelectTime}
+              priority={detailTodoForm.priority}
+              priorityLabels={{
+                VERY_HIGH: tCommon("priority.urgent"),
+                HIGH: tCommon("priority.high"),
+                MEDIUM: tCommon("priority.medium"),
+                LOW: tCommon("priority.low"),
+              }}
+              onSelectPriority={detailTodoForm.setPriority}
+              tagLabel={detailTodoForm.selectedTag}
+              tags={[detailTodoForm.tagLabel]}
+              selectedTag={detailTodoForm.selectedTag}
+              addTagLabel={tCreateModal("addTag")}
+              onSelectTag={detailTodoForm.setSelectedTag}
+              onAddTagClick={() => {}}
+              hasMemo={todo.hasMemo}
+              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: detailTodoForm.changeRepeatFrequency,
+                weekly: {
+                  weekdays,
+                  selectedWeekdayIds: detailTodoForm.selectedWeekdayIds,
+                  onWeekdayToggle: detailTodoForm.toggleWeekday,
+                },
+                monthly: {
+                  repeatDayLabel: t("repeatDayLabel"),
+                  repeatDay: detailTodoForm.repeatDay,
+                  onRepeatDayChange: detailTodoForm.setRepeatDay,
+                },
+              }}
+            />
+            <button
+              type="button"
+              aria-label={t("delete")}
+              onClick={handleDelete}
+            >
+              <TrashOnIcon />
+            </button>
+          </div>
+
+          <DetailTodoMemoField
+            value={detailTodoForm.memo}
+            placeholder={tCreateModal("notePlaceholder")}
+            onChange={detailTodoForm.setMemo}
+            maxLength={DETAIL_TODO_MEMO_MAX_LENGTH}
+          />
+        </div>
+      </div>
+    </OverlayModal>
+  );
+};
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
new file mode 100644
index 00000000..f0517b7a
--- /dev/null
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -0,0 +1,110 @@
+import {
+  PlayDisabledIcon,
+  PlayIcon,
+  StopIcon,
+} from "@repo/timo-design-system/icons";
+import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
+
+import type { TodoTimerStatusTypes } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { DetailTodoSubtaskInput } from "@/hooks/todo-modal/use-detail-subtask-field";
+import type { KeyboardEvent } from "react";
+
+const resizeTextarea = (element: HTMLTextAreaElement | null) => {
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${element.scrollHeight}px`;
+};
+
+export interface DetailTodoTaskFieldsProps {
+  titleValue: string;
+  isCompleted: boolean;
+  timerStatus: TodoTimerStatusTypes;
+  subtaskInputs: DetailTodoSubtaskInput[];
+  onTitleChange: (value: string) => void;
+  onToggleCompleted: (completed: boolean) => void;
+  onTogglePlay: () => void;
+  onSubtaskInputChange: (id: number, value: string) => void;
+  onToggleSubtaskCompleted: (id: number, completed: boolean) => void;
+  registerSubtaskInputRef: (
+    index: number,
+  ) => (element: HTMLTextAreaElement | null) => void;
+  onSubtaskInputKeyDown: (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => void;
+}
+
+export const DetailTodoTaskFields = ({
+  titleValue,
+  isCompleted,
+  timerStatus,
+  subtaskInputs,
+  onTitleChange,
+  onToggleCompleted,
+  onTogglePlay,
+  onSubtaskInputChange,
+  onToggleSubtaskCompleted,
+  registerSubtaskInputRef,
+  onSubtaskInputKeyDown,
+}: DetailTodoTaskFieldsProps) => {
+  return (
+    <div className="flex w-full flex-col">
+      <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
+            value={titleValue}
+            ref={resizeTextarea}
+            onChange={(event) => {
+              onTitleChange(event.target.value);
+              resizeTextarea(event.currentTarget);
+            }}
+            rows={1}
+            className="typo-headline-b-14 text-timo-black min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+          />
+        </div>
+
+        <PlayButton
+          variant={timerStatus === "RUNNING" ? "stop" : "play"}
+          size="lg"
+          disabled={isCompleted}
+          onClick={onTogglePlay}
+        >
+          {isCompleted ? (
+            <PlayDisabledIcon width={24} height={24} />
+          ) : timerStatus === "RUNNING" ? (
+            <StopIcon width={24} height={24} />
+          ) : (
+            <PlayIcon width={24} height={24} />
+          )}
+        </PlayButton>
+      </div>
+
+      {subtaskInputs.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {subtaskInputs.map((subtask, index) => (
+            <div key={subtask.id} className="flex items-center gap-2">
+              <Checkbox
+                checked={subtask.completed}
+                onChange={(completed) =>
+                  onToggleSubtaskCompleted(subtask.id, completed)
+                }
+              />
+              <textarea
+                value={subtask.value}
+                ref={registerSubtaskInputRef(index)}
+                onChange={(event) => {
+                  onSubtaskInputChange(subtask.id, event.target.value);
+                  resizeTextarea(event.currentTarget);
+                }}
+                onKeyDown={(event) => onSubtaskInputKeyDown(index, event)}
+                rows={1}
+                className="typo-body-r-12 text-timo-gray-700 min-w-0 flex-1 resize-none overflow-hidden wrap-break-word outline-none"
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/apps/timo-web/hooks/.gitkeep b/apps/timo-web/hooks/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit.ts b/apps/timo-web/hooks/todo-modal/use-create-todo-submit.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit.ts
rename to apps/timo-web/hooks/todo-modal/use-create-todo-submit.ts
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-subtask-field.ts b/apps/timo-web/hooks/todo-modal/use-detail-subtask-field.ts
new file mode 100644
index 00000000..8535b9b4
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/use-detail-subtask-field.ts
@@ -0,0 +1,125 @@
+import { useEffect, useRef, useState } from "react";
+
+import type { TodoSubtask } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type { SubtaskInputEntry } from "@/utils/todo/subtask-input-list";
+import type { KeyboardEvent } from "react";
+
+import {
+  addSubtaskInputOnEnter,
+  removeSubtaskInputOnBackspace,
+} from "@/utils/todo/subtask-input-list";
+
+const MAX_DETAIL_SUBTASK_COUNT = 10;
+
+export interface DetailTodoSubtaskInput extends SubtaskInputEntry {
+  subtaskId: number | null;
+  completed: boolean;
+}
+
+export interface UseDetailSubtaskFieldParams {
+  subtasks: TodoSubtask[];
+}
+
+export const useDetailSubtaskField = ({
+  subtasks,
+}: UseDetailSubtaskFieldParams) => {
+  const nextInputId = useRef(0);
+  const createInput = (value = ""): DetailTodoSubtaskInput => ({
+    id: nextInputId.current++,
+    subtaskId: null,
+    completed: false,
+    value,
+  });
+
+  const [subtaskInputs, setSubtaskInputs] = useState<DetailTodoSubtaskInput[]>(
+    () =>
+      subtasks.length > 0
+        ? subtasks.map((subtask) => ({
+            id: nextInputId.current++,
+            subtaskId: subtask.subtaskId,
+            completed: subtask.completed,
+            value: subtask.content,
+          }))
+        : [createInput()],
+  );
+  const inputRefs = useRef<Array<HTMLTextAreaElement | null>>([]);
+  const pendingFocusIndex = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (pendingFocusIndex.current === null) return;
+
+    const index = pendingFocusIndex.current;
+    pendingFocusIndex.current = null;
+
+    const element = inputRefs.current[index];
+    if (!element) return;
+
+    element.focus();
+    const caretPosition = element.value.length;
+    element.setSelectionRange(caretPosition, caretPosition);
+  }, [subtaskInputs.length]);
+
+  const registerInputRef =
+    (index: number) => (element: HTMLTextAreaElement | null) => {
+      inputRefs.current[index] = element;
+    };
+
+  const handleInputChange = (id: number, value: string) => {
+    setSubtaskInputs((prev) =>
+      prev.map((subtask) =>
+        subtask.id === id ? { ...subtask, value } : subtask,
+      ),
+    );
+  };
+
+  const handleCompletedChange = (id: number, completed: boolean) => {
+    setSubtaskInputs((prev) =>
+      prev.map((subtask) =>
+        subtask.id === id ? { ...subtask, completed } : subtask,
+      ),
+    );
+  };
+
+  const handleInputKeyDown = (
+    index: number,
+    event: KeyboardEvent<HTMLTextAreaElement>,
+  ) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+
+      setSubtaskInputs((prev) => {
+        const { entries, focusIndex } = addSubtaskInputOnEnter(
+          prev,
+          index,
+          createInput,
+          MAX_DETAIL_SUBTASK_COUNT,
+        );
+
+        if (focusIndex !== null) pendingFocusIndex.current = focusIndex;
+        return entries as DetailTodoSubtaskInput[];
+      });
+      return;
+    }
+
+    if (event.key === "Backspace") {
+      const { entries, focusIndex } = removeSubtaskInputOnBackspace(
+        subtaskInputs,
+        index,
+      );
+
+      if (focusIndex !== null) {
+        event.preventDefault();
+        pendingFocusIndex.current = focusIndex;
+        setSubtaskInputs(entries as DetailTodoSubtaskInput[]);
+      }
+    }
+  };
+
+  return {
+    subtaskInputs,
+    registerInputRef,
+    handleInputChange,
+    handleCompletedChange,
+    handleInputKeyDown,
+  };
+};
diff --git a/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
new file mode 100644
index 00000000..9722b7a5
--- /dev/null
+++ b/apps/timo-web/hooks/todo-modal/use-detail-todo-form.ts
@@ -0,0 +1,194 @@
+import { TODO_ICON_VALUES } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { useController, useForm } from "react-hook-form";
+
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+import type {
+  PriorityLevel,
+  RepeatFrequency,
+  TimeOption,
+  TimeSelection,
+  TodoIconValue,
+} from "@repo/timo-design-system/ui";
+
+import { useDetailSubtaskField } from "@/hooks/todo-modal/use-detail-subtask-field";
+import { isTagLabelKey } from "@/utils/todo/tag-label";
+import {
+  TITLE_MAX_WEIGHTED_LENGTH,
+  truncateToWeightedLength,
+} from "@/utils/todo/text-length";
+import { convertDurationToTimeText } from "@/utils/todo/todo-time";
+
+interface DetailTodoFormValues {
+  date: Date;
+  time: string;
+  priority: PriorityLevel;
+  selectedTag: string;
+  isRepeatActive: boolean;
+  repeatFrequency: RepeatFrequency;
+  selectedWeekdayIds: string[];
+  repeatDay: string;
+  isCompleted: boolean;
+  title: string;
+  memo: string;
+  icon: TodoIconValue | null;
+}
+
+const isTodoIconValue = (icon: string | null): icon is TodoIconValue =>
+  icon !== null && (TODO_ICON_VALUES as readonly string[]).includes(icon);
+
+export const DETAIL_TODO_TIME_OPTIONS: TimeOption[] = [
+  { minute: 15, value: "15", unit: "min" },
+  { minute: 30, value: "30", unit: "min" },
+  { minute: 45, value: "45", unit: "min" },
+  { minute: 60, value: "1", unit: "h" },
+  { minute: 90, value: "1.5", unit: "h" },
+];
+
+export const DETAIL_TODO_WEEKDAY_IDS = [
+  "MON",
+  "TUE",
+  "WED",
+  "THU",
+  "FRI",
+  "SAT",
+  "SUN",
+] as const;
+
+export interface UseDetailTodoFormParams {
+  todo: Todo;
+}
+
+export const useDetailTodoForm = ({ todo }: UseDetailTodoFormParams) => {
+  const tCommon = useTranslations("Common");
+
+  const durationText = convertDurationToTimeText(todo.durationSeconds);
+  const todoTagName = todo.tag?.name ?? "";
+  const todoIcon = todo.icon ?? null;
+  const tagLabel = isTagLabelKey(todoTagName)
+    ? tCommon(`tag.${todoTagName}`)
+    : todoTagName;
+
+  const { control, handleSubmit, formState } = useForm<DetailTodoFormValues>({
+    defaultValues: {
+      date: new Date(2026, 6, 1),
+      time: durationText,
+      priority: todo.priority,
+      selectedTag: tagLabel,
+      isRepeatActive: todo.isRepeated,
+      repeatFrequency: "DAILY",
+      selectedWeekdayIds: [],
+      repeatDay: "",
+      isCompleted: todo.completed,
+      title: todo.title,
+      memo: "",
+      icon: isTodoIconValue(todoIcon) ? todoIcon : null,
+    },
+  });
+
+  const { field: dateField } = useController({ name: "date", control });
+  const { field: timeField } = useController({ name: "time", control });
+  const { field: priorityField } = useController({
+    name: "priority",
+    control,
+  });
+  const { field: selectedTagField } = useController({
+    name: "selectedTag",
+    control,
+  });
+  const { field: isRepeatActiveField } = useController({
+    name: "isRepeatActive",
+    control,
+  });
+  const { field: repeatFrequencyField } = useController({
+    name: "repeatFrequency",
+    control,
+  });
+  const { field: selectedWeekdayIdsField } = useController({
+    name: "selectedWeekdayIds",
+    control,
+  });
+  const { field: repeatDayField } = useController({
+    name: "repeatDay",
+    control,
+  });
+  const { field: isCompletedField } = useController({
+    name: "isCompleted",
+    control,
+  });
+  const { field: titleField } = useController({ name: "title", control });
+  const { field: memoField } = useController({ name: "memo", control });
+  const { field: iconField } = useController({ name: "icon", control });
+
+  const subtaskField = useDetailSubtaskField({ subtasks: todo.subtasks });
+
+  const selectIcon = (nextIcon: TodoIconValue) => iconField.onChange(nextIcon);
+  const removeIcon = () => iconField.onChange(null);
+
+  const changeTitle = (value: string) => {
+    titleField.onChange(
+      truncateToWeightedLength(value, TITLE_MAX_WEIGHTED_LENGTH),
+    );
+  };
+
+  const selectTime = (nextTime: TimeSelection) => {
+    if (nextTime === "ai") return;
+
+    const option = DETAIL_TODO_TIME_OPTIONS.find(
+      (item) => item.minute === nextTime,
+    );
+
+    if (!option) return;
+
+    timeField.onChange(`${option.value} ${option.unit}`);
+  };
+
+  const changeRepeatFrequency = (frequency: RepeatFrequency) => {
+    isRepeatActiveField.onChange(true);
+    repeatFrequencyField.onChange(frequency);
+  };
+
+  const toggleWeekday = (weekdayId: string) => {
+    selectedWeekdayIdsField.onChange(
+      selectedWeekdayIdsField.value.includes(weekdayId)
+        ? selectedWeekdayIdsField.value.filter((item) => item !== weekdayId)
+        : [...selectedWeekdayIdsField.value, weekdayId],
+    );
+  };
+
+  return {
+    date: dateField.value,
+    setDate: dateField.onChange,
+    time: timeField.value,
+    setTime: timeField.onChange,
+    priority: priorityField.value,
+    setPriority: priorityField.onChange,
+    tagLabel,
+    selectedTag: selectedTagField.value,
+    setSelectedTag: selectedTagField.onChange,
+    isRepeatActive: isRepeatActiveField.value,
+    repeatFrequency: repeatFrequencyField.value,
+    selectedWeekdayIds: selectedWeekdayIdsField.value,
+    repeatDay: repeatDayField.value,
+    setRepeatDay: repeatDayField.onChange,
+    isCompleted: isCompletedField.value,
+    setIsCompleted: isCompletedField.onChange,
+    title: titleField.value,
+    changeTitle,
+    subtaskInputs: subtaskField.subtaskInputs,
+    registerSubtaskInputRef: subtaskField.registerInputRef,
+    changeSubtaskInput: subtaskField.handleInputChange,
+    changeSubtaskCompleted: subtaskField.handleCompletedChange,
+    handleSubtaskInputKeyDown: subtaskField.handleInputKeyDown,
+    memo: memoField.value,
+    setMemo: memoField.onChange,
+    icon: iconField.value,
+    selectIcon,
+    removeIcon,
+    selectTime,
+    changeRepeatFrequency,
+    toggleWeekday,
+    handleSubmit,
+    dirtyFields: formState.dirtyFields,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts b/apps/timo-web/hooks/todo-modal/use-subtask-field.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-subtask-field.ts
rename to apps/timo-web/hooks/todo-modal/use-subtask-field.ts
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts b/apps/timo-web/hooks/todo-modal/use-title-field.ts
similarity index 89%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
rename to apps/timo-web/hooks/todo-modal/use-title-field.ts
index 31efcae7..807226b4 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-title-field.ts
+++ b/apps/timo-web/hooks/todo-modal/use-title-field.ts
@@ -6,7 +6,7 @@ import type { Control } from "react-hook-form";
 import {
   TITLE_MAX_WEIGHTED_LENGTH,
   truncateToWeightedLength,
-} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length";
+} from "@/utils/todo/text-length";
 
 export interface UseTitleFieldParams {
   control: Control<CreateTodoRequest>;
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index bcbbbdf6..7b3a7c41 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -46,6 +46,7 @@
       "dateLabel": "Date",
       "timeLabel": "Time",
       "tagLabel": "Tag",
+      "addTag": "Add",
       "create": "Create",
       "repeatDaily": "Daily",
       "repeatWeekly": "Weekly",
@@ -53,6 +54,12 @@
       "repeatDetailHeading": "Details",
       "repeatDayUnit": "day(s)"
     },
+    "detailModal": {
+      "ariaLabel": "To-do details",
+      "delete": "Delete to-do",
+      "repeatFrequencyHeading": "Repeat",
+      "repeatDayLabel": "day(s)"
+    },
     "createTagModal": {
       "title": "Create a tag",
       "nameLabel": "Tag name",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 2f30bd57..29d07590 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -46,6 +46,7 @@
       "dateLabel": "날짜",
       "timeLabel": "시간",
       "tagLabel": "태그",
+      "addTag": "추가",
       "create": "생성하기",
       "repeatDaily": "매일",
       "repeatWeekly": "매주",
@@ -53,6 +54,12 @@
       "repeatDetailHeading": "세부 설정",
       "repeatDayUnit": "일 마다"
     },
+    "detailModal": {
+      "ariaLabel": "투두 상세",
+      "delete": "투두 삭제",
+      "repeatFrequencyHeading": "반복 일정",
+      "repeatDayLabel": "일"
+    },
     "createTagModal": {
       "title": "태그 생성하기",
       "nameLabel": "태그 이름",
diff --git a/apps/timo-web/utils/date/date.ts b/apps/timo-web/utils/date/date.ts
index 90b17367..586c6af5 100644
--- a/apps/timo-web/utils/date/date.ts
+++ b/apps/timo-web/utils/date/date.ts
@@ -44,6 +44,10 @@ export const formatDateKey = (date: Date): string => {
   return `${year}-${month}-${day}`;
 };
 
+/** 날짜를 "yy.MM.dd" 형식의 라벨 문자열로 변환한다. */
+export const formatShortDateLabel = (date: Date): string =>
+  `${String(date.getFullYear()).slice(2)}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}`;
+
 /**
  * "yyyy-MM-dd" 형식의 키 문자열을 Date로 파싱한다.
  * @param value - 파싱할 날짜 키 문자열
diff --git a/apps/timo-web/utils/todo/tag-label.ts b/apps/timo-web/utils/todo/tag-label.ts
new file mode 100644
index 00000000..6e643a2b
--- /dev/null
+++ b/apps/timo-web/utils/todo/tag-label.ts
@@ -0,0 +1,12 @@
+export const TAG_LABEL_KEYS = [
+  "dailyLife",
+  "work",
+  "exercise",
+  "assignment",
+  "additional",
+] as const;
+
+export type TagLabelKey = (typeof TAG_LABEL_KEYS)[number];
+
+export const isTagLabelKey = (value: string): value is TagLabelKey =>
+  (TAG_LABEL_KEYS as readonly string[]).includes(value);
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts b/apps/timo-web/utils/todo/text-length.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/text-length.ts
rename to apps/timo-web/utils/todo/text-length.ts
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts b/apps/timo-web/utils/todo/todo-time.ts
similarity index 94%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts
rename to apps/timo-web/utils/todo/todo-time.ts
index 576eec86..1710a75f 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts
+++ b/apps/timo-web/utils/todo/todo-time.ts
@@ -3,7 +3,7 @@ import { SECONDS_PER_HOUR, SECONDS_PER_MINUTE } from "@/constants/time";
 /**
  * 초 단위 duration을 "H:MM" 형식의 텍스트로 변환한다.
  * @param durationSeconds - 변환할 시간(초)
- * @returns "H:MM" 형식의 시간 텍스트 (예: 7200초 → "2:00")
+ * @returns "H:MM" 형식의 시간 텍스트 (예: 7200초 -> "2:00")
  */
 export const convertDurationToTimeText = (durationSeconds: number): string => {
   const hours = Math.floor(durationSeconds / SECONDS_PER_HOUR);
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 d3367283..4911ab8f 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
@@ -25,12 +25,14 @@ const PRIORITY_BG_COLOR: Record<PriorityLevel, string> = {
 export interface PrioritySelectorProps {
   trigger: ReactNode;
   selected?: PriorityLevel;
+  labels?: Record<PriorityLevel, string>;
   onSelect?: (priority: PriorityLevel) => void;
 }
 
 export const PrioritySelector = ({
   trigger,
   selected,
+  labels = PRIORITY_LABEL,
   onSelect,
 }: PrioritySelectorProps) => {
   return (
@@ -61,7 +63,7 @@ export const PrioritySelector = ({
                   isSelected ? "text-white" : "text-timo-black",
                 )}
               >
-                {PRIORITY_LABEL[priority]}
+                {labels[priority]}
               </span>
             </Dropdown.Item>
           );
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 5ac9aa6c..ea9f9324 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
@@ -41,6 +41,7 @@ const DETAIL_ALIGN: Record<RepeatFrequency, string> = {
 
 export interface RepeatSelectorProps {
   trigger: ReactNode;
+  frequencyHeading?: string;
   detailHeading: string;
   options: RepeatOption[];
   frequency: RepeatFrequency;
@@ -139,6 +140,7 @@ const RepeatMonthlyDetailSection = ({
 
 export const RepeatSelector = ({
   trigger,
+  frequencyHeading = "반복 일정",
   detailHeading,
   options,
   frequency,
@@ -167,7 +169,7 @@ export const RepeatSelector = ({
       <Dropdown.Panel className="shadow-timo w-32.5 gap-1 p-0">
         <div className="flex w-full flex-col gap-1 px-3.5 py-2">
           <span className="typo-body-r-12 text-timo-gray-700 w-full whitespace-nowrap">
-            반복 일정
+            {frequencyHeading}
           </span>
 
           <button
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 f1f78899..20316a67 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
@@ -8,6 +8,7 @@ export interface TagSelectorProps {
   trigger: ReactNode;
   tags: string[];
   selected?: string;
+  addLabel?: string;
   onSelect?: (tag: string) => void;
   onAddClick?: () => void;
 }
@@ -16,6 +17,7 @@ export const TagSelector = ({
   trigger,
   tags,
   selected,
+  addLabel = "추가",
   onSelect,
   onAddClick,
 }: TagSelectorProps) => {
@@ -50,7 +52,7 @@ export const TagSelector = ({
 
         <Dropdown.Item onClick={onAddClick} className="gap-1 px-1.5 py-1">
           <span className="typo-headline-r-14 text-timo-black whitespace-nowrap">
-            추가
+            {addLabel}
           </span>
           <PlusIcon className="shrink-0" />
         </Dropdown.Item>
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 d77da1ef..56cab32b 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
@@ -41,11 +41,13 @@ export interface TodoToolbarProps {
   onTimeOpen?: () => void;
 
   priority?: PriorityLevel;
+  priorityLabels?: Record<PriorityLevel, string>;
   onSelectPriority?: (priority: PriorityLevel) => void;
 
   tagLabel: string;
   tags: string[];
   selectedTag?: string;
+  addTagLabel?: string;
   onSelectTag?: (tag: string) => void;
   onAddTagClick?: () => void;
 
@@ -69,10 +71,12 @@ export const TodoToolbar = ({
   onSelectTime,
   onTimeOpen,
   priority,
+  priorityLabels,
   onSelectPriority,
   tagLabel,
   tags,
   selectedTag,
+  addTagLabel,
   onSelectTag,
   onAddTagClick,
   hasMemo = false,
@@ -125,6 +129,7 @@ export const TodoToolbar = ({
       <PrioritySelector
         trigger={<PriorityIcon priority={priority ?? "Disable"} />}
         selected={priority}
+        labels={priorityLabels}
         onSelect={onSelectPriority}
       />
 
@@ -132,6 +137,7 @@ export const TodoToolbar = ({
         trigger={<TagIcon text={tagLabel} />}
         tags={tags}
         selected={selectedTag}
+        addLabel={addTagLabel}
         onSelect={onSelectTag}
         onAddClick={onAddTagClick}
       />