diff --git a/apps/timo-web/api/todo/todo-schema.ts b/apps/timo-web/api/todo/todo-schema.ts
new file mode 100644
index 00000000..dd2e590f
--- /dev/null
+++ b/apps/timo-web/api/todo/todo-schema.ts
@@ -0,0 +1,91 @@
+import { z } from "zod";
+
+import { apiResponseSchema } from "@/api/schema/response";
+
+export const todoIconSchema = z.enum([
+  "ICON_1",
+  "ICON_2",
+  "ICON_3",
+  "ICON_4",
+  "ICON_5",
+  "ICON_6",
+  "ICON_7",
+  "ICON_8",
+]);
+
+export const todoPrioritySchema = z.enum([
+  "VERY_HIGH",
+  "HIGH",
+  "MEDIUM",
+  "LOW",
+]);
+
+export const todoRepeatTypeSchema = z.enum([
+  "NONE",
+  "DAILY",
+  "WEEKLY",
+  "MONTHLY",
+]);
+
+export const todoRepeatWeekdaySchema = z.enum([
+  "MON",
+  "TUE",
+  "WED",
+  "THU",
+  "FRI",
+  "SAT",
+  "SUN",
+]);
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const DURATION_PATTERN = /^\d{1,3}:[0-5]\d$/;
+
+export const createTodoRequestSchema = z
+  .object({
+    icon: todoIconSchema.nullable(),
+    title: z.string().trim().min(1),
+    subtasks: z.array(z.string().trim().min(1)).nullable(),
+    date: z.string().regex(DATE_PATTERN),
+    duration: z.string().regex(DURATION_PATTERN),
+    priority: todoPrioritySchema.nullable(),
+    tagId: z.number().int().positive().nullable(),
+    repeatType: todoRepeatTypeSchema,
+    repeatWeekdays: z.array(todoRepeatWeekdaySchema).nullable(),
+    repeatDayOfMonth: z.number().int().min(1).max(31).nullable(),
+    memo: z.string().nullable(),
+  })
+  .superRefine((value, ctx) => {
+    if (
+      value.repeatType === "WEEKLY" &&
+      (!value.repeatWeekdays || value.repeatWeekdays.length === 0)
+    ) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["repeatWeekdays"],
+        message: "반복할 요일을 선택해주세요.",
+      });
+    }
+
+    if (value.repeatType === "MONTHLY" && !value.repeatDayOfMonth) {
+      ctx.addIssue({
+        code: "custom",
+        path: ["repeatDayOfMonth"],
+        message: "반복할 날짜를 선택해주세요.",
+      });
+    }
+  });
+
+export type CreateTodoRequest = z.infer<typeof createTodoRequestSchema>;
+
+export type TodoIcon = z.infer<typeof todoIconSchema>;
+export type TodoPriority = z.infer<typeof todoPrioritySchema>;
+export type TodoRepeatType = z.infer<typeof todoRepeatTypeSchema>;
+export type TodoRepeatWeekday = z.infer<typeof todoRepeatWeekdaySchema>;
+
+export const createTodoResponseSchema = apiResponseSchema(
+  z.object({
+    todoId: z.number(),
+  }),
+);
+
+export type CreateTodoResponse = z.infer<typeof createTodoResponseSchema>;
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeDateInformation.tsx
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation.tsx
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeDateInformation.tsx
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
similarity index 93%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index 77d4344a..054b37a3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -25,11 +25,10 @@ import type {
 
 import { convertDurationToTimeText } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time";
 
-const PRIORITY_MAP: Record<
-  TodoPriorityTypes,
-  "urgent" | "high" | "medium" | "low"
-> = {
-  URGENT: "urgent",
+type PriorityLabelKeyTypes = "urgent" | "high" | "medium" | "low";
+
+const PRIORITY_LABEL_KEY: Record<TodoPriorityTypes, PriorityLabelKeyTypes> = {
+  VERY_HIGH: "urgent",
   HIGH: "high",
   MEDIUM: "medium",
   LOW: "low",
@@ -76,12 +75,11 @@ export const HomeTodoCard = ({
   const sortableStyle = {
     transform: CSS.Transform.toString(transform),
     transition,
-    touchAction: "none",
   };
 
   const isRunning = timerStatus === "RUNNING";
 
-  const priorityLabel = tCommon(`priority.${PRIORITY_MAP[priority]}`);
+  const priorityLabel = tCommon(`priority.${PRIORITY_LABEL_KEY[priority]}`);
 
   const titleRow = (
     <div className="flex w-full items-center justify-between gap-2">
@@ -148,7 +146,7 @@ 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_MAP[priority]}
+            priority={isCompleted ? "Disable" : priority}
             label={priorityLabel}
           />
           {tagName && <TagIcon text={tagName} />}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoIconField.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoIconField.tsx
new file mode 100644
index 00000000..d7146266
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoIconField.tsx
@@ -0,0 +1,67 @@
+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 type { TodoIconValue } from "@repo/timo-design-system/ui";
+
+export interface CreateTodoIconFieldProps {
+  icon: TodoIconValue | null;
+  isIconPanelOpen: boolean;
+  addIconLabel: string;
+  onOpenPanel: () => void;
+  onTogglePanel: () => void;
+  onSelectIcon: (icon: TodoIconValue) => void;
+  onRemoveIcon: () => void;
+}
+
+export const CreateTodoIconField = ({
+  icon,
+  isIconPanelOpen,
+  addIconLabel,
+  onOpenPanel,
+  onTogglePanel,
+  onSelectIcon,
+  onRemoveIcon,
+}: CreateTodoIconFieldProps) => {
+  return (
+    <div className="flex w-full flex-col items-start gap-2">
+      {!isIconPanelOpen && icon ? (
+        <button
+          type="button"
+          onClick={onOpenPanel}
+          aria-label={addIconLabel}
+          className="flex size-6 shrink-0 items-center justify-center rounded-[4px]"
+        >
+          <IconGraphic icon={icon} />
+        </button>
+      ) : (
+        <button
+          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"
+        >
+          <ChevronUpIcon
+            width={18}
+            height={18}
+            className={cn(
+              "shrink-0 transition-transform duration-200 ease-in-out",
+              !isIconPanelOpen && "rotate-180",
+            )}
+          />
+          <span className="typo-caption-r-10 text-timo-gray-700 whitespace-nowrap">
+            {addIconLabel}
+          </span>
+        </button>
+      )}
+
+      {isIconPanelOpen && (
+        <IconSelector
+          selected={icon}
+          onSelect={onSelectIcon}
+          onRemove={onRemoveIcon}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
new file mode 100644
index 00000000..b12a565a
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField.tsx
@@ -0,0 +1,21 @@
+export interface CreateTodoMemoFieldProps {
+  value: string;
+  placeholder: string;
+  onChange: (value: string) => void;
+}
+
+export const CreateTodoMemoField = ({
+  value,
+  placeholder,
+  onChange,
+}: CreateTodoMemoFieldProps) => {
+  return (
+    <textarea
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      rows={1}
+      className="typo-body-r-12 text-timo-gray-800 w-full resize-none outline-none"
+    />
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
new file mode 100644
index 00000000..8259c706
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields.tsx
@@ -0,0 +1,42 @@
+import { Checkbox } from "@repo/timo-design-system/ui";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { UseFormRegister } from "react-hook-form";
+
+export interface CreateTodoTaskFieldsProps {
+  register: UseFormRegister<CreateTodoRequest>;
+  titlePlaceholder: string;
+  subtaskInput: string;
+  subtaskPlaceholder: string;
+  onSubtaskInputChange: (value: string) => void;
+}
+
+export const CreateTodoTaskFields = ({
+  register,
+  titlePlaceholder,
+  subtaskInput,
+  subtaskPlaceholder,
+  onSubtaskInputChange,
+}: CreateTodoTaskFieldsProps) => {
+  return (
+    <div className="flex w-full flex-col items-start gap-1.5">
+      <div className="flex w-full items-center gap-2">
+        <Checkbox checked={false} onChange={() => {}} disabled />
+        <input
+          {...register("title")}
+          placeholder={titlePlaceholder}
+          className="typo-headline-b-14 text-timo-black min-w-0 flex-1 outline-none"
+        />
+      </div>
+      <div className="flex w-full items-center gap-2">
+        <Checkbox checked={false} onChange={() => {}} disabled />
+        <input
+          value={subtaskInput}
+          onChange={(event) => onSubtaskInputChange(event.target.value)}
+          placeholder={subtaskPlaceholder}
+          className="typo-body-r-12 text-timo-gray-800 min-w-0 flex-1 outline-none"
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx
index 3831d30d..55166f87 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeHeaderContainer.tsx
@@ -2,8 +2,8 @@
 
 import { useTranslations } from "next-intl";
 
-import { triggerScrollToToday } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodayScroll";
-import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode";
+import { triggerScrollToToday } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-today-scroll";
+import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode";
 import { Header } from "@/components/layout/header/Header";
 import { useNavigationSidebar } from "@/components/layout/sidebar/navigation/NavigationSidebarContext";
 
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 05c086e2..f911f76d 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
@@ -6,11 +6,11 @@ import { useEffect, useMemo } from "react";
 
 import type { HomeViewFilter } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/home-view-type";
 
-import { HomeTodoCard } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeTodoCard";
-import { HomeDayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeDayHeaderContainer";
-import { useHomeTodayScrollRef } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodayScroll";
-import { useHomeTodosByDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodosByDate";
-import { useHomeViewMode } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode";
+import { HomeTodoCard } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard";
+import { HomeDayHeaderContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer";
+import { useHomeTodayScrollRef } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-today-scroll";
+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 { getHomeViewMock } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_mocks/home-view-mock";
 import { formatDateKey } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
 import { reorderDaysTodayFirst } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/home-view";
@@ -50,6 +50,7 @@ export const HomeTodoContainer = () => {
 
   const {
     todosByDate,
+    handleAddTodo,
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
@@ -90,6 +91,7 @@ export const HomeTodoContainer = () => {
               isToday={day.isToday}
               totalCount={todos.length}
               completedCount={completedCount}
+              onCreateTodo={(todo) => handleAddTodo(dateKey, todo)}
             />
 
             <DndSortableListProvider
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/tag-modal/CreateTagModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/tag-modal/CreateTagModalContainer.tsx
new file mode 100644
index 00000000..d0aeccd0
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/tag-modal/CreateTagModalContainer.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { DeleteIcon } from "@repo/timo-design-system/icons";
+import { CreateButton, TagNameInput } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+import { Modal } from "@/components/modal/Modal";
+
+const MAX_TAG_NAME_LENGTH = 10;
+
+export interface CreateTagModalContainerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  existingLabels: string[];
+  onCreate: (label: string) => void;
+}
+
+export const CreateTagModalContainer = ({
+  isOpen,
+  onClose,
+  onExited,
+  existingLabels,
+  onCreate,
+}: CreateTagModalContainerProps) => {
+  const t = useTranslations("Home");
+  const [name, setName] = useState<string>("");
+
+  const trimmedName = name.trim();
+  const isDuplicate = existingLabels.includes(trimmedName);
+  const isValid =
+    trimmedName.length > 0 &&
+    trimmedName.length <= MAX_TAG_NAME_LENGTH &&
+    !isDuplicate;
+
+  const handleCreate = () => {
+    if (!isValid) return;
+
+    onCreate(trimmedName);
+    setName("");
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      onExited={onExited}
+      className="w-[490px] items-center gap-3 px-6 py-4"
+    >
+      <div className="flex w-full items-center justify-between">
+        <p className="typo-body-sb-12 text-timo-blue-300">
+          {t("createTagModal.title")}
+        </p>
+        <button
+          type="button"
+          aria-label={t("createModal.close")}
+          onClick={onClose}
+          className="shrink-0"
+        >
+          <DeleteIcon />
+        </button>
+      </div>
+
+      <div className="flex w-full flex-col items-start gap-3">
+        <p className="typo-headline-m-16 text-timo-black w-full">
+          {t("createTagModal.nameLabel")}
+        </p>
+
+        <TagNameInput
+          value={name}
+          onChange={setName}
+          maxLength={MAX_TAG_NAME_LENGTH}
+          isError={isDuplicate}
+          maxLengthHint={t("createTagModal.maxLengthHint")}
+          duplicateHint={t("createTagModal.duplicateHint")}
+        />
+      </div>
+
+      <div className="flex w-full items-center justify-end">
+        <CreateButton
+          label={t("createTagModal.create")}
+          disabled={!isValid}
+          onClick={handleCreate}
+        />
+      </div>
+    </Modal>
+  );
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeDayHeaderContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
similarity index 72%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeDayHeaderContainer.tsx
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
index 95f0e6a2..369c8956 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/HomeDayHeaderContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-card/HomeDayHeaderContainer.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { AddTaskButton } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 
 import type { ApiDayOfWeek } 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 { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/HomeDateInformation";
+import { HomeDateInformation } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeDateInformation";
+import { CreateTodoModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer";
 import {
   convertDateToDateText,
   getToday,
@@ -19,6 +20,7 @@ export interface HomeDayHeaderContainerProps {
   isToday: boolean;
   totalCount: number;
   completedCount: number;
+  onCreateTodo: (todo: Todo) => void;
 }
 
 export const HomeDayHeaderContainer = ({
@@ -28,8 +30,8 @@ export const HomeDayHeaderContainer = ({
   isToday,
   totalCount,
   completedCount,
+  onCreateTodo,
 }: HomeDayHeaderContainerProps) => {
-  const t = useTranslations("Home");
   const tCommon = useTranslations("Common");
   const date = parseDateKey(dateKey) ?? getToday();
 
@@ -43,7 +45,7 @@ export const HomeDayHeaderContainer = ({
         totalCount={totalCount}
         completedCount={completedCount}
       />
-      <AddTaskButton text={t("addTask")} />
+      <CreateTodoModalContainer defaultDate={date} onCreate={onCreateTodo} />
     </div>
   );
 };
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx
new file mode 100644
index 00000000..6b461520
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContainer.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { AddTaskButton } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { overlay } from "overlay-kit";
+
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+
+import { CreateTodoModalContent } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent";
+import { useCreateTodoSubmit } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit";
+
+export interface CreateTodoModalContainerProps {
+  defaultDate?: Date;
+  onCreate: (todo: Todo) => 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 text={t("addTask")} onClick={handleAddClick} />;
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
new file mode 100644
index 00000000..19cb410e
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent.tsx
@@ -0,0 +1,236 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DeleteIcon } from "@repo/timo-design-system/icons";
+import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { useController, useForm, useWatch } from "react-hook-form";
+
+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 { CreateTodoIconField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoIconField";
+import { CreateTodoMemoField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoMemoField";
+import { CreateTodoTaskFields } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-modal/CreateTodoTaskFields";
+import { useIconField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field";
+import { useRepeatField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field";
+import {
+  DEFAULT_TAG,
+  useTagField,
+} from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field";
+import { useTimeField } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field";
+import { formatDateToIsoDate } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date";
+import { Modal } from "@/components/modal/Modal";
+import { AnimatedToast } from "@/components/toast/AnimatedToast";
+
+export interface CreateTodoTag {
+  id: number;
+  name: string;
+}
+
+const createDefaultValues = (defaultDate?: Date): CreateTodoRequest => ({
+  icon: null,
+  title: "",
+  subtasks: [],
+  date: formatDateToIsoDate(defaultDate ?? new Date()),
+  duration: "0:00",
+  priority: null,
+  tagId: null,
+  repeatType: "NONE",
+  repeatWeekdays: [],
+  repeatDayOfMonth: null,
+  memo: null,
+});
+
+export interface CreateTodoModalContentProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited: () => void;
+  defaultDate?: Date;
+  onSubmit: (data: CreateTodoRequest, tag: CreateTodoTag) => void;
+}
+
+export const CreateTodoModalContent = ({
+  isOpen,
+  onClose,
+  onExited,
+  defaultDate,
+  onSubmit,
+}: CreateTodoModalContentProps) => {
+  const t = useTranslations("Home");
+  const tToast = useTranslations("Toast");
+
+  const [subtaskInput, setSubtaskInput] = useState("");
+
+  const { register, control, handleSubmit, setValue, reset } =
+    useForm<CreateTodoRequest>({
+      resolver: zodResolver(createTodoRequestSchema),
+      defaultValues: createDefaultValues(defaultDate),
+    });
+
+  const title = useWatch({ control, name: "title" });
+  const { field: dateField } = useController({ name: "date", control });
+  const { field: memoField } = useController({ name: "memo", control });
+  const { field: priorityField } = useController({
+    name: "priority",
+    control,
+  });
+
+  const iconField = useIconField({ control });
+  const tagField = useTagField({ control });
+  const timeField = useTimeField({ control });
+  const repeatField = useRepeatField({ control });
+
+  const dateValue = dateField.value
+    ? new Date(`${dateField.value}T00:00:00`)
+    : undefined;
+
+  const handleSubtaskInputChange = (value: string) => {
+    setSubtaskInput(value);
+    setValue("subtasks", value.trim() ? [value] : [], {
+      shouldValidate: true,
+    });
+  };
+
+  const handleFormSubmit = (data: CreateTodoRequest) => {
+    const tag = tagField.selectedTagOption ?? DEFAULT_TAG;
+
+    onSubmit(data, { id: data.tagId ?? tag.id, name: tag.name });
+
+    reset(createDefaultValues());
+    setSubtaskInput("");
+    timeField.resetTime();
+    onClose();
+  };
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        onExited={onExited}
+        className="w-[490px] items-center gap-2.5 px-6 py-4"
+      >
+        <div className="flex w-full items-center justify-between">
+          <p className="typo-body-sb-12 text-timo-blue-300">
+            {t("createModal.title")}
+          </p>
+          <button
+            type="button"
+            aria-label={t("createModal.close")}
+            onClick={onClose}
+            className="shrink-0"
+          >
+            <DeleteIcon />
+          </button>
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-3.5">
+          <div className="flex w-full flex-col items-start gap-2">
+            <CreateTodoIconField
+              icon={iconField.icon}
+              isIconPanelOpen={iconField.isIconPanelOpen}
+              addIconLabel={t("createModal.addIcon")}
+              onOpenPanel={iconField.openIconPanel}
+              onTogglePanel={iconField.toggleIconPanel}
+              onSelectIcon={iconField.selectIcon}
+              onRemoveIcon={iconField.removeIcon}
+            />
+
+            <CreateTodoTaskFields
+              register={register}
+              titlePlaceholder={t("createModal.titlePlaceholder")}
+              subtaskInput={subtaskInput}
+              subtaskPlaceholder={t("createModal.subtaskPlaceholder")}
+              onSubtaskInputChange={handleSubtaskInputChange}
+            />
+          </div>
+
+          <CreateTodoMemoField
+            value={memoField.value ?? ""}
+            placeholder={t("createModal.notePlaceholder")}
+            onChange={memoField.onChange}
+          />
+        </div>
+
+        <div className="flex w-full items-center justify-between">
+          <TodoToolbar
+            dateLabel={
+              dateValue
+                ? `${dateValue.getMonth() + 1}.${dateValue.getDate()}`
+                : t("createModal.dateLabel")
+            }
+            date={dateValue}
+            onDateChange={(next) =>
+              dateField.onChange(formatDateToIsoDate(next))
+            }
+            timeLabel={timeField.timeDisplay}
+            timeOptions={timeField.timeOptions}
+            time={timeField.duration}
+            onTimeChange={timeField.handleDurationInputChange}
+            selectedTime={timeField.selectedTime}
+            onSelectTime={timeField.handleSelectTime}
+            priority={priorityField.value ?? undefined}
+            onSelectPriority={(level: PriorityLevel) =>
+              priorityField.onChange(level)
+            }
+            tagLabel={tagField.selectedTagLabel ?? t("createModal.tagLabel")}
+            tags={tagField.tagLabels}
+            selectedTag={tagField.selectedTagLabel}
+            onSelectTag={tagField.handleSelectTag}
+            onAddTagClick={tagField.handleAddTagClick}
+            hasMemo={Boolean(memoField.value?.trim())}
+            isRepeatActive={repeatField.isRepeatActive}
+            repeat={{
+              detailHeading: t("createModal.repeatDetailHeading"),
+              options: [
+                { frequency: "DAILY", label: t("createModal.repeatDaily") },
+                { frequency: "WEEKLY", label: t("createModal.repeatWeekly") },
+                {
+                  frequency: "MONTHLY",
+                  label: t("createModal.repeatMonthly"),
+                },
+              ],
+              frequency: repeatField.uiRepeatFrequency,
+              onFrequencyChange: repeatField.handleFrequencyChange,
+              weekly: {
+                weekdays: repeatField.weekdays,
+                selectedWeekdayIds: repeatField.repeatWeekdays,
+                onWeekdayToggle: repeatField.handleWeekdayToggle,
+              },
+              monthly: {
+                repeatDayLabel: t("createModal.repeatDayUnit"),
+                repeatDay: repeatField.repeatDayOfMonth
+                  ? String(repeatField.repeatDayOfMonth)
+                  : "",
+                onRepeatDayChange: repeatField.handleRepeatDayChange,
+              },
+            }}
+          />
+
+          <CreateButton
+            label={t("createModal.create")}
+            disabled={!title.trim()}
+            onClick={handleSubmit(handleFormSubmit)}
+          />
+        </div>
+      </Modal>
+
+      <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>
+        }
+      />
+    </>
+  );
+};
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/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit.ts
new file mode 100644
index 00000000..c93d897b
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-create-todo-submit.ts
@@ -0,0 +1,42 @@
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { CreateTodoTag } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/todo-modal/CreateTodoModalContent";
+import type { Todo } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type";
+
+import { convertApiDurationToSeconds } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time";
+
+// 목데이터: 실제 API 호출 없이 로컬 상태에만 즉시 반영한다.
+const buildTodoFromRequest = (
+  data: CreateTodoRequest,
+  tag: CreateTodoTag,
+): Todo => ({
+  todoId: Date.now(),
+  icon: data.icon,
+  title: data.title,
+  completed: false,
+  durationSeconds: convertApiDurationToSeconds(data.duration),
+  priority: data.priority ?? "MEDIUM",
+  tag: { tagId: tag.id, name: tag.name },
+  hasMemo: Boolean(data.memo?.trim()),
+  isRepeated: data.repeatType !== "NONE",
+  timerStatus: "STOPPED",
+  sortOrder: 0,
+  subtasks: (data.subtasks ?? []).map((content) => ({
+    subtaskId: Date.now(),
+    content,
+    completed: false,
+  })),
+});
+
+export interface UseCreateTodoSubmitParams {
+  onCreate: (todo: Todo) => void;
+}
+
+export const useCreateTodoSubmit = ({
+  onCreate,
+}: UseCreateTodoSubmitParams) => {
+  const handleSubmit = (data: CreateTodoRequest, tag: CreateTodoTag) => {
+    onCreate(buildTodoFromRequest(data, tag));
+  };
+
+  return { handleSubmit };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field.ts
new file mode 100644
index 00000000..b9071654
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-icon-field.ts
@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest, TodoIcon } from "@/api/todo/todo-schema";
+import type { Control } from "react-hook-form";
+
+
+export interface UseIconFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useIconField = ({ control }: UseIconFieldParams) => {
+  const [isIconPanelOpen, setIsIconPanelOpen] = useState(false);
+  const { field } = useController({ name: "icon", control });
+
+  const openIconPanel = () => setIsIconPanelOpen(true);
+  const toggleIconPanel = () => setIsIconPanelOpen((prev) => !prev);
+  const selectIcon = (value: TodoIcon) => field.onChange(value);
+  const removeIcon = () => field.onChange(null);
+
+  return {
+    icon: field.value,
+    isIconPanelOpen,
+    openIconPanel,
+    toggleIconPanel,
+    selectIcon,
+    removeIcon,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field.ts
new file mode 100644
index 00000000..6661f604
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-repeat-field.ts
@@ -0,0 +1,81 @@
+import { useTranslations } from "next-intl";
+import { useController } from "react-hook-form";
+
+import type {
+  CreateTodoRequest,
+  TodoRepeatWeekday,
+} from "@/api/todo/todo-schema";
+import type { RepeatFrequency } from "@repo/timo-design-system/ui";
+import type { Control } from "react-hook-form";
+
+
+const WEEKDAY_CODES: TodoRepeatWeekday[] = [
+  "MON",
+  "TUE",
+  "WED",
+  "THU",
+  "FRI",
+  "SAT",
+  "SUN",
+];
+
+export interface UseRepeatFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useRepeatField = ({ control }: UseRepeatFieldParams) => {
+  const tCommon = useTranslations("Common");
+  const repeatTypeField = useController({ name: "repeatType", control });
+  const repeatWeekdaysField = useController({
+    name: "repeatWeekdays",
+    control,
+  });
+  const repeatDayField = useController({
+    name: "repeatDayOfMonth",
+    control,
+  });
+
+  const weekdays = WEEKDAY_CODES.map((code) => ({
+    id: code,
+    label: tCommon(`weekday.${code}`),
+  }));
+
+  const repeatType = repeatTypeField.field.value;
+  const repeatWeekdays = repeatWeekdaysField.field.value ?? [];
+
+  const isRepeatActive = repeatType !== "NONE";
+  const uiRepeatFrequency: RepeatFrequency =
+    repeatType === "NONE" ? "DAILY" : repeatType;
+
+  const handleFrequencyChange = (frequency: RepeatFrequency) => {
+    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 handleRepeatDayChange = (value: string) => {
+    const parsed = Number(value);
+    repeatDayField.field.onChange(
+      value.trim() && Number.isFinite(parsed) ? parsed : null,
+    );
+  };
+
+  return {
+    repeatType,
+    repeatWeekdays,
+    repeatDayOfMonth: repeatDayField.field.value,
+    weekdays,
+    isRepeatActive,
+    uiRepeatFrequency,
+    handleFrequencyChange,
+    handleWeekdayToggle,
+    handleRepeatDayChange,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field.tsx
new file mode 100644
index 00000000..1a501543
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-tag-field.tsx
@@ -0,0 +1,105 @@
+import { useTranslations } from "next-intl";
+import { overlay } from "overlay-kit";
+import { useState } from "react";
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { Control } from "react-hook-form";
+
+
+import { CreateTagModalContainer } from "@/app/[locale]/(main)/(with-time-sidebar)/home/_containers/tag-modal/CreateTagModalContainer";
+
+const TAG_NAMES = [
+  "dailyLife",
+  "work",
+  "exercise",
+  "assignment",
+  "additional",
+] as const;
+
+type PresetTagName = (typeof TAG_NAMES)[number];
+
+// 태그 관리 API가 아직 없어, 목데이터 용도로 태그 이름 순서에 고정 tagId를 매핑한다.
+const TAG_ID_BY_NAME: Record<PresetTagName, number> = {
+  dailyLife: 1,
+  work: 2,
+  exercise: 3,
+  assignment: 4,
+  additional: 5,
+};
+
+// 사용자가 새로 만든 태그는 고정 프리셋에 없으므로, 입력한 이름을 그대로 name으로 저장한다.
+const MAX_TAG_COUNT = 8;
+
+export const DEFAULT_TAG: { id: number; name: string } = {
+  id: TAG_ID_BY_NAME.dailyLife,
+  name: "dailyLife",
+};
+
+export interface UseTagFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useTagField = ({ control }: UseTagFieldParams) => {
+  const tCommon = useTranslations("Common");
+  const { field } = useController({ name: "tagId", control });
+  const [customTags, setCustomTags] = useState<{ id: number; label: string }[]>(
+    [],
+  );
+  const [isTagLimitToastOpen, setIsTagLimitToastOpen] = useState(false);
+
+  const tagOptions = [
+    ...TAG_NAMES.map((name) => ({
+      id: TAG_ID_BY_NAME[name],
+      label: tCommon(`tag.${name}`),
+      name,
+    })),
+    ...customTags.map((tag) => ({ ...tag, name: tag.label })),
+  ];
+  const tagLabels = tagOptions.map((option) => option.label);
+  const selectedTagOption = tagOptions.find(
+    (option) => option.id === field.value,
+  );
+
+  const handleSelectTag = (label: string) => {
+    const option = tagOptions.find((item) => item.label === label);
+    if (!option) return;
+
+    field.onChange(option.id);
+  };
+
+  const handleAddTagClick = () => {
+    if (tagOptions.length >= MAX_TAG_COUNT) {
+      setIsTagLimitToastOpen(true);
+      return;
+    }
+
+    overlay.open(({ isOpen, close, unmount }) => (
+      <CreateTagModalContainer
+        isOpen={isOpen}
+        onClose={close}
+        onExited={unmount}
+        existingLabels={tagLabels}
+        onCreate={(label: string) => {
+          const nextId =
+            Math.max(0, ...tagOptions.map((option) => option.id)) + 1;
+
+          setCustomTags((prev) => [...prev, { id: nextId, label }]);
+          field.onChange(nextId);
+          close();
+        }}
+      />
+    ));
+  };
+
+  return {
+    tagOptions,
+    tagLabels,
+    selectedTagOption,
+    selectedTagLabel: selectedTagOption?.label,
+    isTagLimitToastOpen,
+    closeTagLimitToast: () => setIsTagLimitToastOpen(false),
+    handleSelectTag,
+    handleAddTagClick,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field.ts
new file mode 100644
index 00000000..602eb047
--- /dev/null
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/todo-modal/use-time-field.ts
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { useController } from "react-hook-form";
+
+import type { CreateTodoRequest } from "@/api/todo/todo-schema";
+import type { TimeSelection } from "@repo/timo-design-system/ui";
+import type { Control } from "react-hook-form";
+
+
+const TIME_OPTIONS = [
+  { 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 interface UseTimeFieldParams {
+  control: Control<CreateTodoRequest>;
+}
+
+export const useTimeField = ({ control }: UseTimeFieldParams) => {
+  const { field } = useController({ name: "duration", control });
+  const [selectedTime, setSelectedTime] = useState<TimeSelection>();
+  const [timeDisplay, setTimeDisplay] = useState("0:00");
+
+  const handleSelectTime = (value: TimeSelection) => {
+    setSelectedTime(value);
+
+    if (value === "ai") return;
+
+    const option = TIME_OPTIONS.find((item) => item.minute === value);
+    if (!option) return;
+
+    setTimeDisplay(`${option.value} ${option.unit}`);
+    field.onChange(`${option.minute}:00`);
+  };
+
+  const handleDurationInputChange = (value: string) => {
+    setSelectedTime(undefined);
+    setTimeDisplay(value);
+    field.onChange(value);
+  };
+
+  const resetTime = () => {
+    setSelectedTime(undefined);
+    setTimeDisplay("0:00");
+  };
+
+  return {
+    duration: field.value,
+    timeOptions: TIME_OPTIONS,
+    selectedTime,
+    timeDisplay,
+    handleSelectTime,
+    handleDurationInputChange,
+    resetTime,
+  };
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodayScroll.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-today-scroll.ts
similarity index 100%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodayScroll.ts
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-today-scroll.ts
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodosByDate.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
similarity index 93%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodosByDate.ts
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
index bfc00d83..a783cb1e 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeTodosByDate.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-todos-by-date.ts
@@ -32,6 +32,14 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
     }));
   };
 
+  const handleAddTodo = (dateKey: string, todo: Todo) => {
+    // TODO: API
+    setTodosByDate((prev) => ({
+      ...prev,
+      [dateKey]: [...(prev[dateKey] ?? []), todo],
+    }));
+  };
+
   const handleToggleCompleted = (
     dateKey: string,
     todoId: number,
@@ -95,6 +103,7 @@ export const useHomeTodosByDate = (apiDays: HomeViewDay[]) => {
 
   return {
     todosByDate,
+    handleAddTodo,
     handleToggleCompleted,
     handleTogglePlay,
     handleToggleSubtaskCompleted,
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode.ts
similarity index 82%
rename from apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode.ts
rename to apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode.ts
index 9db0a9c2..482eb5d6 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/useHomeViewMode.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_hooks/use-home-view-mode.ts
@@ -32,7 +32,7 @@ export const useHomeViewMode = () => {
   }, [searchParams]);
 
   const navigate = useCallback(
-    (mode: HomeViewMode, date: Date) => {
+    (mode: HomeViewMode, date: Date, options?: { pushHistory?: boolean }) => {
       const params = new URLSearchParams();
 
       if (mode === "week") {
@@ -45,14 +45,24 @@ export const useHomeViewMode = () => {
       }
 
       const query = params.toString();
-      router.replace(query ? `${pathname}?${query}` : pathname);
+      const url = query ? `${pathname}?${query}` : pathname;
+
+      if (options?.pushHistory) {
+        router.push(url);
+        return;
+      }
+
+      router.replace(url);
     },
     [pathname, router],
   );
 
   const setViewMode = useCallback(
     (mode: HomeViewMode) => {
-      navigate(mode, mode === "week" ? referenceDate : getToday());
+      // 뷰 전환은 뒤로가기로 이전 뷰(기본/7일)로 되돌아올 수 있도록 히스토리에 남긴다.
+      navigate(mode, mode === "week" ? referenceDate : getToday(), {
+        pushHistory: true,
+      });
     },
     [navigate, referenceDate],
   );
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 5300b8f9..279d8380 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
@@ -30,7 +30,7 @@ const TODO_TEMPLATES: TodoTemplate[] = [
     title: "앱잼 1차 과제 제출",
     completed: false,
     durationSeconds: 5400,
-    priority: "URGENT",
+    priority: "VERY_HIGH",
     tag: { tagId: 1, name: "assignment" },
     hasMemo: true,
     isRepeated: false,
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
index d851c33a..ec5f05d0 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_types/todo-type.ts
@@ -1,6 +1,11 @@
 import { z } from "zod";
 
-export const todoPrioritySchema = z.enum(["URGENT", "HIGH", "MEDIUM", "LOW"]);
+export const todoPrioritySchema = z.enum([
+  "VERY_HIGH",
+  "HIGH",
+  "MEDIUM",
+  "LOW",
+]);
 export const todoTimerStatusSchema = z.enum(["RUNNING", "STOPPED"]);
 
 export const todoTagSchema = z.object({
@@ -16,7 +21,7 @@ export const todoSubtaskSchema = z.object({
 
 export const todoSchema = z.object({
   todoId: z.number(),
-  icon: z.string(),
+  icon: z.string().nullable(),
   title: z.string(),
   completed: z.boolean(),
   durationSeconds: z.number(),
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts
index 2a99a16f..e14d25f5 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/date.ts
@@ -16,7 +16,6 @@ export const convertDateToDateText = (date: Date): string => {
   return `${day}`;
 };
 
-/** 주어진 날짜의 자정(00:00:00) 시각을 반환한다. */
 const getStartOfDay = (date: Date): Date =>
   new Date(date.getFullYear(), date.getMonth(), date.getDate());
 
@@ -76,3 +75,11 @@ export const parseDateKey = (value: string): Date | null => {
   const [, year, month, day] = match;
   return new Date(Number(year), Number(month) - 1, Number(day));
 };
+// API 명세의 date 필드(yyyy-MM-dd) 포맷 변환
+export const formatDateToIsoDate = (date: Date): string => {
+  const year = date.getFullYear();
+  const month = `${date.getMonth() + 1}`.padStart(2, "0");
+  const day = `${date.getDate()}`.padStart(2, "0");
+
+  return `${year}-${month}-${day}`;
+};
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts
index 527d41e5..2a4e14a3 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_utils/todo-time.ts
@@ -14,3 +14,19 @@ export const convertDurationToTimeText = (durationSeconds: number): string => {
   );
   return `${hours}:${minutes.toString().padStart(2, "0")}`;
 };
+
+// API duration 필드(mm:ss, 분 단위가 60을 넘을 수 있음)와 durationSeconds 간 변환
+export const convertSecondsToApiDuration = (
+  durationSeconds: number,
+): string => {
+  const minutes = Math.floor(durationSeconds / SECONDS_PER_MINUTE);
+  const seconds = durationSeconds % SECONDS_PER_MINUTE;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};
+
+export const convertApiDurationToSeconds = (duration: string): number => {
+  const [minutesText, secondsText] = duration.split(":");
+  const minutes = Number(minutesText) || 0;
+  const seconds = Number(secondsText) || 0;
+  return minutes * SECONDS_PER_MINUTE + seconds;
+};
diff --git a/apps/timo-web/app/[locale]/layout.tsx b/apps/timo-web/app/[locale]/layout.tsx
index 1f7276c4..640216c1 100644
--- a/apps/timo-web/app/[locale]/layout.tsx
+++ b/apps/timo-web/app/[locale]/layout.tsx
@@ -6,6 +6,7 @@ import { hasLocale, NextIntlClientProvider } from "next-intl";
 import type { Metadata } from "next";
 
 import { routing } from "@/i18n/routing";
+import { OverlayProvider } from "@/providers/OverlayProvider";
 import { QueryProvider } from "@/providers/query/QueryProvider";
 
 const pretendard = localFont({
@@ -43,7 +44,9 @@ export default async function RootLayout({
     <html lang={locale} className={pretendard.variable}>
       <body>
         <NextIntlClientProvider>
-          <QueryProvider>{children}</QueryProvider>
+          <QueryProvider>
+            <OverlayProvider>{children}</OverlayProvider>
+          </QueryProvider>
         </NextIntlClientProvider>
       </body>
     </html>
diff --git a/apps/timo-web/components/modal/Modal.tsx b/apps/timo-web/components/modal/Modal.tsx
new file mode 100644
index 00000000..f1d34768
--- /dev/null
+++ b/apps/timo-web/components/modal/Modal.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { cn } from "@repo/timo-design-system/utils";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+import type { ReactNode } from "react";
+
+const EXIT_ANIMATION_DURATION = 200;
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onExited?: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+export const Modal = ({
+  isOpen,
+  onClose,
+  onExited,
+  children,
+  className,
+}: ModalProps) => {
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setIsVisible(false);
+
+      const hideTimer = setTimeout(() => {
+        setShouldRender(false);
+        onExited?.();
+      }, EXIT_ANIMATION_DURATION);
+
+      return () => clearTimeout(hideTimer);
+    }
+
+    setShouldRender(true);
+
+    const showFrame = requestAnimationFrame(() => setIsVisible(true));
+
+    return () => cancelAnimationFrame(showFrame);
+  }, [isOpen, onExited]);
+
+  useEffect(() => {
+    if (!shouldRender) return;
+
+    document.body.style.overflow = "hidden";
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [shouldRender, onClose]);
+
+  if (!shouldRender) return null;
+
+  return createPortal(
+    <>
+      <div
+        className={cn(
+          "bg-timo-overlay fixed inset-0 z-40 transition-opacity duration-200 ease-out",
+          isVisible ? "opacity-100" : "opacity-0",
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        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,
+        )}
+      >
+        {children}
+      </div>
+    </>,
+    document.body,
+  );
+};
diff --git a/apps/timo-web/messages/en.json b/apps/timo-web/messages/en.json
index 473c9527..3210f900 100644
--- a/apps/timo-web/messages/en.json
+++ b/apps/timo-web/messages/en.json
@@ -34,7 +34,31 @@
     "today": "Today",
     "viewBasic": "Basic",
     "viewWeek": "7 days",
-    "addTask": "Add a task"
+    "addTask": "Add a task",
+    "createModal": {
+      "title": "Add a task",
+      "addIcon": "Add an icon",
+      "titlePlaceholder": "Plan a new task",
+      "subtaskPlaceholder": "Add tasks in small units",
+      "notePlaceholder": "Please enter a note...",
+      "dateLabel": "Date",
+      "timeLabel": "Time",
+      "tagLabel": "Tag",
+      "create": "Create",
+      "repeatDaily": "Daily",
+      "repeatWeekly": "Weekly",
+      "repeatMonthly": "Monthly",
+      "repeatDetailHeading": "Details",
+      "repeatDayUnit": "day(s)",
+      "close": "Close"
+    },
+    "createTagModal": {
+      "title": "Create a tag",
+      "nameLabel": "Tag name",
+      "maxLengthHint": "The tag name can be up to 10 characters long",
+      "duplicateHint": "Names that are already in use cannot be registered",
+      "create": "Create"
+    }
   },
   "Toast": {
     "tagLimit": "You can create up to <blue>8 tags</blue>, and to add more, please delete existing tags.",
diff --git a/apps/timo-web/messages/ko.json b/apps/timo-web/messages/ko.json
index 076fe886..bbe41523 100644
--- a/apps/timo-web/messages/ko.json
+++ b/apps/timo-web/messages/ko.json
@@ -34,7 +34,31 @@
     "today": "오늘",
     "viewBasic": "기본",
     "viewWeek": "7일",
-    "addTask": "할 일을 추가하세요"
+    "addTask": "할 일을 추가하세요",
+    "createModal": {
+      "title": "할 일 추가하기",
+      "addIcon": "아이콘 추가하기",
+      "titlePlaceholder": "새로운 작업을 계획하세요",
+      "subtaskPlaceholder": "작은 단위로 할 일을 나눠보세요",
+      "notePlaceholder": "메모를 입력해주세요...",
+      "dateLabel": "날짜",
+      "timeLabel": "시간",
+      "tagLabel": "태그",
+      "create": "생성하기",
+      "repeatDaily": "매일",
+      "repeatWeekly": "매주",
+      "repeatMonthly": "매달",
+      "repeatDetailHeading": "세부 설정",
+      "repeatDayUnit": "일 마다",
+      "close": "닫기"
+    },
+    "createTagModal": {
+      "title": "태그 생성하기",
+      "nameLabel": "태그 이름",
+      "maxLengthHint": "태그 이름은 최대 10자까지 입력할 수 있어요",
+      "duplicateHint": "이미 사용 중인 이름은 등록할 수 없어요",
+      "create": "생성하기"
+    }
   },
   "Toast": {
     "tagLimit": "태그는 <blue>최대 8개</blue>까지 만들 수 있으며, 추가하려면 기존 태그를 삭제해 주세요.",
diff --git a/apps/timo-web/package.json b/apps/timo-web/package.json
index 92b8707a..c55622d8 100644
--- a/apps/timo-web/package.json
+++ b/apps/timo-web/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.4.0",
     "@repo/timo-design-system": "workspace:*",
     "@sentry/nextjs": "^10.61.0",
     "@tanstack/react-query": "^5.101.1",
@@ -21,8 +23,10 @@
     "axios": "^1.18.1",
     "next": "16.2.0",
     "next-intl": "^4.13.1",
+    "overlay-kit": "^1.9.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-hook-form": "^7.81.0",
     "zod": "^4.4.3",
     "zustand": "^5.0.14"
   },
diff --git a/apps/timo-web/providers/OverlayProvider.tsx b/apps/timo-web/providers/OverlayProvider.tsx
new file mode 100644
index 00000000..555afb02
--- /dev/null
+++ b/apps/timo-web/providers/OverlayProvider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { OverlayProvider as OverlayKitProvider } from "overlay-kit";
+
+interface OverlayProviderProps {
+  children: React.ReactNode;
+}
+
+export const OverlayProvider = ({ children }: OverlayProviderProps) => {
+  return <OverlayKitProvider>{children}</OverlayKitProvider>;
+};
diff --git a/apps/timo-web/providers/dnd/DndSortableListProvider.tsx b/apps/timo-web/providers/dnd/DndSortableListProvider.tsx
index 767421cb..469407f8 100644
--- a/apps/timo-web/providers/dnd/DndSortableListProvider.tsx
+++ b/apps/timo-web/providers/dnd/DndSortableListProvider.tsx
@@ -8,18 +8,19 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import {
   SortableContext,
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 
-import type { DragEndEvent } from "@dnd-kit/core";
+import type { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 import type { ReactNode } from "react";
 
 export interface DndSortableListProviderProps {
   dndId: string;
-  itemIds: number[];
+  itemIds: UniqueIdentifier[];
   onReorder: (fromIndex: number, toIndex: number) => void;
   children: ReactNode;
 }
@@ -43,8 +44,8 @@ export const DndSortableListProvider = ({
       return;
     }
 
-    const fromIndex = itemIds.indexOf(Number(active.id));
-    const toIndex = itemIds.indexOf(Number(over.id));
+    const fromIndex = itemIds.indexOf(active.id);
+    const toIndex = itemIds.indexOf(over.id);
     if (fromIndex === -1 || toIndex === -1) {
       return;
     }
@@ -57,6 +58,7 @@ export const DndSortableListProvider = ({
       id={dndId}
       sensors={sensors}
       collisionDetection={closestCenter}
+      modifiers={[restrictToVerticalAxis]}
       onDragEnd={handleDragEnd}
     >
       <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
diff --git a/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.stories.tsx b/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.stories.tsx
new file mode 100644
index 00000000..f2c43b09
--- /dev/null
+++ b/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.stories.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+import { DateSelector } from "./DateSelector";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const TRIGGER = (
+  <span className="typo-headline-r-14 text-timo-black rounded-4 bg-timo-gray-300 px-3 py-1.5">
+    날짜 선택
+  </span>
+);
+
+const meta = {
+  title: "Components/Calendar/DateSelector",
+  component: DateSelector,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    trigger: TRIGGER,
+  },
+} satisfies Meta<typeof DateSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DateSelectorDemo = () => {
+  const [value, setValue] = useState<Date | undefined>();
+
+  return <DateSelector trigger={TRIGGER} value={value} onChange={setValue} />;
+};
+
+export const Default: Story = {
+  render: () => <DateSelectorDemo />,
+};
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
new file mode 100644
index 00000000..9cd00ed1
--- /dev/null
+++ b/packages/timo-design-system/src/components/calendar/date-selector/DateSelector.tsx
@@ -0,0 +1,26 @@
+import { Dropdown } from "../../layout/dropdown/Dropdown";
+import { Calendar } from "../Calendar";
+
+import type { ReactNode } from "react";
+
+export interface DateSelectorProps {
+  trigger: ReactNode;
+  value?: Date;
+  onChange?: (date: Date) => void;
+}
+
+export const DateSelector = ({
+  trigger,
+  value,
+  onChange,
+}: DateSelectorProps) => {
+  return (
+    <Dropdown className="flex justify-center">
+      <Dropdown.Trigger aria-haspopup="dialog">{trigger}</Dropdown.Trigger>
+
+      <Dropdown.Panel className="p-0">
+        <Calendar value={value} onChange={onChange} />
+      </Dropdown.Panel>
+    </Dropdown>
+  );
+};
diff --git a/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.stories.tsx b/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.stories.tsx
new file mode 100644
index 00000000..891e809b
--- /dev/null
+++ b/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.stories.tsx
@@ -0,0 +1,44 @@
+import { IconGraphic } from "./IconGraphic";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Icon/IconGraphic",
+  component: IconGraphic,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: [
+        "ICON_1",
+        "ICON_2",
+        "ICON_3",
+        "ICON_4",
+        "ICON_5",
+        "ICON_6",
+        "ICON_7",
+        "ICON_8",
+      ],
+    },
+  },
+} satisfies Meta<typeof IconGraphic>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { icon: "ICON_1" },
+};
+
+export const 관계: Story = {
+  args: { icon: "ICON_4" },
+};
diff --git a/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.tsx b/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.tsx
new file mode 100644
index 00000000..a456fab9
--- /dev/null
+++ b/packages/timo-design-system/src/components/icon/icon-graphic/IconGraphic.tsx
@@ -0,0 +1,70 @@
+import {
+  TodoIconDailyIcon,
+  TodoIconEtcIcon,
+  TodoIconPlusIcon,
+  TodoIconRelationshipIcon,
+  TodoIconRestIcon,
+  TodoIconStudyIcon,
+  TodoIconTaskIcon,
+  TodoIconWorkIcon,
+} from "../../../icons";
+import { cn } from "../../../lib";
+
+import type { ComponentType, SVGProps } from "react";
+
+export type TodoIconValue =
+  | "ICON_1"
+  | "ICON_2"
+  | "ICON_3"
+  | "ICON_4"
+  | "ICON_5"
+  | "ICON_6"
+  | "ICON_7"
+  | "ICON_8";
+
+export const TODO_ICON_OPTIONS: TodoIconValue[] = [
+  "ICON_1",
+  "ICON_2",
+  "ICON_3",
+  "ICON_4",
+  "ICON_5",
+  "ICON_6",
+  "ICON_7",
+  "ICON_8",
+];
+
+const ICON_GRAPHIC: Record<
+  TodoIconValue,
+  ComponentType<SVGProps<SVGSVGElement>>
+> = {
+  ICON_1: TodoIconDailyIcon,
+  ICON_2: TodoIconPlusIcon,
+  ICON_3: TodoIconEtcIcon,
+  ICON_4: TodoIconRelationshipIcon,
+  ICON_5: TodoIconRestIcon,
+  ICON_6: TodoIconTaskIcon,
+  ICON_7: TodoIconWorkIcon,
+  ICON_8: TodoIconStudyIcon,
+};
+
+export const TODO_ICON_LABEL: Record<TodoIconValue, string> = {
+  ICON_1: "일상",
+  ICON_2: "기본",
+  ICON_3: "기타",
+  ICON_4: "관계",
+  ICON_5: "휴식",
+  ICON_6: "할일",
+  ICON_7: "업무",
+  ICON_8: "학습",
+};
+
+export interface IconGraphicProps {
+  icon: TodoIconValue;
+  className?: string;
+}
+
+export const IconGraphic = ({ icon, className }: IconGraphicProps) => {
+  const Icon = ICON_GRAPHIC[icon];
+
+  return <Icon className={cn("size-4.5", className)} />;
+};
diff --git a/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.stories.tsx b/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.stories.tsx
new file mode 100644
index 00000000..e9dfb6be
--- /dev/null
+++ b/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.stories.tsx
@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+import { IconSelector } from "./IconSelector";
+
+import type { IconSelectorProps, TodoIconValue } from "./IconSelector";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const InteractiveDemo = (args: IconSelectorProps) => {
+  const [selected, setSelected] = useState<TodoIconValue | null>(
+    args.selected ?? null,
+  );
+
+  return (
+    <IconSelector
+      selected={selected}
+      onSelect={setSelected}
+      onRemove={() => setSelected(null)}
+    />
+  );
+};
+
+const meta = {
+  title: "Components/Icon/IconSelector",
+  component: IconSelector,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+  argTypes: {
+    selected: {
+      control: "select",
+      options: [
+        "ICON_1",
+        "ICON_2",
+        "ICON_3",
+        "ICON_4",
+        "ICON_5",
+        "ICON_6",
+        "ICON_7",
+        "ICON_8",
+      ],
+    },
+  },
+} satisfies Meta<typeof IconSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    selected: null,
+    onSelect: () => {},
+    onRemove: () => {},
+  },
+};
+
+export const 선택됨: Story = {
+  args: {
+    selected: "ICON_1",
+    onSelect: () => {},
+    onRemove: () => {},
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    selected: null,
+    onSelect: () => {},
+    onRemove: () => {},
+  },
+  render: (args) => <InteractiveDemo {...args} />,
+};
diff --git a/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.tsx b/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.tsx
new file mode 100644
index 00000000..efd318c4
--- /dev/null
+++ b/packages/timo-design-system/src/components/icon/icon-selector/IconSelector.tsx
@@ -0,0 +1,56 @@
+import { cn } from "../../../lib";
+import {
+  IconGraphic,
+  TODO_ICON_LABEL,
+  TODO_ICON_OPTIONS,
+} from "../icon-graphic/IconGraphic";
+
+import type { TodoIconValue } from "../icon-graphic/IconGraphic";
+
+export type { TodoIconValue };
+
+export interface IconSelectorProps {
+  selected?: TodoIconValue | null;
+  onSelect: (icon: TodoIconValue) => void;
+  onRemove: () => void;
+}
+
+export const IconSelector = ({
+  selected,
+  onSelect,
+  onRemove,
+}: IconSelectorProps) => {
+  return (
+    <div className="flex w-full items-center gap-1">
+      {TODO_ICON_OPTIONS.map((icon) => {
+        const isSelected = icon === selected;
+
+        return (
+          <button
+            key={icon}
+            type="button"
+            aria-pressed={isSelected}
+            aria-label={TODO_ICON_LABEL[icon]}
+            onClick={() => onSelect(icon)}
+            className={cn(
+              "rounded-4 flex size-6 shrink-0 items-center justify-center transition-colors duration-200 ease-in-out",
+              isSelected && "bg-timo-blue-65",
+            )}
+          >
+            <IconGraphic icon={icon} />
+          </button>
+        );
+      })}
+
+      <button
+        type="button"
+        onClick={onRemove}
+        className="bg-timo-gray-300 rounded-4 flex shrink-0 items-center justify-center p-1"
+      >
+        <span className="typo-caption-r-10 text-timo-gray-800 whitespace-nowrap">
+          아이콘 제거
+        </span>
+      </button>
+    </div>
+  );
+};
diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts
index 65223ba0..4b2870ff 100644
--- a/packages/timo-design-system/src/components/index.ts
+++ b/packages/timo-design-system/src/components/index.ts
@@ -5,8 +5,10 @@ export { Color } from "./tokens/color/Color";
 export { Typography } from "./tokens/typography/Typography";
 export { TagIcon } from "./tag/tag-icon/TagIcon";
 export { TagSelector } from "./tag/tag-selector/TagSelector";
+export { TagNameInput } from "./tag/tag-name-input/TagNameInput";
 export { PriorityIcon } from "./priority/priority-icon/PriorityIcon";
 export { PrioritySelector } from "./priority/priority-selector/PrioritySelector";
+export type { PriorityLevel } from "./priority/priority-selector/PrioritySelector";
 export { CreateButton } from "./button/create-button/CreateButton";
 export { DeleteButton } from "./button/delete-button/DeleteButton";
 export { AddTaskButton } from "./button/add-task-button/AddTaskButton";
@@ -17,23 +19,24 @@ export { PlayButton } from "./button/play-button/PlayButton";
 export { TabButton } from "./button/tab-button/TabButton";
 export { Toast } from "./toast/Toast";
 export { ModalButton } from "./button/modal-button/ModalButton";
-export type { ModalButtonVariantTypes } from "./button/modal-button/ModalButton";
 export { Modal } from "./layout/modal/Modal";
-export type {
-  ModalProps,
-  ModalTriggerProps,
-  ModalOverlayProps,
-  ModalPanelProps,
-  ModalIconProps,
-  ModalTitleProps,
-  ModalDescriptionProps,
-  ModalFooterProps,
-  ModalBorderButtonProps,
-  ModalFillButtonProps,
-} from "./layout/modal/Modal";
 export { SidebarButton } from "./button/sidebar-button/SidebarButton";
 export { TodayButton } from "./button/today-button/TodayButton";
 export { ChevronButton } from "./button/chevron-button/ChevronButton";
 export { TimeSelector } from "./time/time-selector/TimeSelector";
+export type {
+  TimeSelection,
+  TimeOption,
+} from "./time/time-selector/TimeSelector";
 export { RepeatSelector } from "./repeat/repeat-selector/RepeatSelector";
+export type {
+  RepeatFrequency,
+  RepeatOption,
+  WeekdayOption,
+} from "./repeat/repeat-selector/RepeatSelector";
 export { Calendar } from "./calendar/Calendar";
+export { DateSelector } from "./calendar/date-selector/DateSelector";
+export { TodoToolbar } from "./todo/todo-toolbar/TodoToolbar";
+export { IconSelector } from "./icon/icon-selector/IconSelector";
+export type { TodoIconValue } from "./icon/icon-selector/IconSelector";
+export { IconGraphic } from "./icon/icon-graphic/IconGraphic";
diff --git a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.stories.tsx b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.stories.tsx
index 73b72b62..4e6263ff 100644
--- a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.stories.tsx
+++ b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.stories.tsx
@@ -11,7 +11,15 @@ const meta = {
   argTypes: {
     priority: {
       control: "select",
-      options: ["urgent", "high", "medium", "low", "Disable", "white", "blue"],
+      options: [
+        "VERY_HIGH",
+        "HIGH",
+        "MEDIUM",
+        "LOW",
+        "Disable",
+        "white",
+        "blue",
+      ],
     },
   },
 } satisfies Meta<typeof PriorityIcon>;
@@ -20,19 +28,19 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const 매우중요: Story = {
-  args: { priority: "urgent" },
+  args: { priority: "VERY_HIGH" },
 };
 
 export const 중요: Story = {
-  args: { priority: "high" },
+  args: { priority: "HIGH" },
 };
 
 export const 보통: Story = {
-  args: { priority: "medium" },
+  args: { priority: "MEDIUM" },
 };
 
 export const 낮음: Story = {
-  args: { priority: "low" },
+  args: { priority: "LOW" },
 };
 
 export const Disable: Story = {
@@ -57,17 +65,17 @@ export const blue: Story = {
 };
 
 const ALL_PRIORITIES: Priority[] = [
-  "urgent",
-  "high",
-  "medium",
-  "low",
+  "VERY_HIGH",
+  "HIGH",
+  "MEDIUM",
+  "LOW",
   "Disable",
   "white",
   "blue",
 ];
 
 export const AllPriorities: Story = {
-  args: { priority: "urgent" },
+  args: { priority: "VERY_HIGH" },
   parameters: {
     backgrounds: {
       default: "light-gray",
diff --git a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx
index f4df4994..a4351e3f 100644
--- a/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx
+++ b/packages/timo-design-system/src/components/priority/priority-icon/PriorityIcon.tsx
@@ -1,19 +1,19 @@
 import { cn } from "../../../lib";
 
 export type Priority =
-  | "urgent"
-  | "high"
-  | "medium"
-  | "low"
+  | "VERY_HIGH"
+  | "HIGH"
+  | "MEDIUM"
+  | "LOW"
   | "Disable"
   | "white"
   | "blue";
 
 const PRIORITY_COLOR: Record<Priority, string> = {
-  urgent: "bg-timo-red",
-  high: "bg-timo-orange",
-  medium: "bg-timo-gray-600",
-  low: "bg-timo-black",
+  VERY_HIGH: "bg-timo-red",
+  HIGH: "bg-timo-orange",
+  MEDIUM: "bg-timo-gray-600",
+  LOW: "bg-timo-black",
   Disable: "bg-timo-gray-500",
   white: "bg-white",
   blue: "bg-timo-blue-300",
diff --git a/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.stories.tsx b/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.stories.tsx
index ac1b5f03..a27f6802 100644
--- a/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.stories.tsx
+++ b/packages/timo-design-system/src/components/priority/priority-selector/PrioritySelector.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   argTypes: {
     selected: {
       control: "select",
-      options: ["urgent", "high", "medium", "low"],
+      options: ["VERY_HIGH", "HIGH", "MEDIUM", "LOW"],
     },
   },
 } satisfies Meta<typeof PrioritySelector>;
@@ -38,17 +38,17 @@ export const Default: Story = {
 };
 
 export const 매우중요: Story = {
-  args: { trigger: TRIGGER, selected: "urgent" },
+  args: { trigger: TRIGGER, selected: "VERY_HIGH" },
 };
 
 export const 중요: Story = {
-  args: { trigger: TRIGGER, selected: "high" },
+  args: { trigger: TRIGGER, selected: "HIGH" },
 };
 
 export const 보통: Story = {
-  args: { trigger: TRIGGER, selected: "medium" },
+  args: { trigger: TRIGGER, selected: "MEDIUM" },
 };
 
 export const 낮음: Story = {
-  args: { trigger: TRIGGER, selected: "low" },
+  args: { trigger: TRIGGER, selected: "LOW" },
 };
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 ee4efe5e..119568b0 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
@@ -4,22 +4,22 @@ import { PriorityIcon } from "../priority-icon/PriorityIcon";
 
 import type { ReactNode } from "react";
 
-export type PriorityLevel = "urgent" | "high" | "medium" | "low";
+export type PriorityLevel = "VERY_HIGH" | "HIGH" | "MEDIUM" | "LOW";
 
-const PRIORITY_LEVELS: PriorityLevel[] = ["urgent", "high", "medium", "low"];
+const PRIORITY_LEVELS: PriorityLevel[] = ["VERY_HIGH", "HIGH", "MEDIUM", "LOW"];
 
 const PRIORITY_LABEL: Record<PriorityLevel, string> = {
-  urgent: "매우중요",
-  high: "중요",
-  medium: "보통",
-  low: "낮음",
+  VERY_HIGH: "매우중요",
+  HIGH: "중요",
+  MEDIUM: "보통",
+  LOW: "낮음",
 };
 
 const PRIORITY_BG_COLOR: Record<PriorityLevel, string> = {
-  urgent: "bg-timo-red",
-  high: "bg-timo-orange",
-  medium: "bg-timo-gray",
-  low: "bg-timo-gray-900",
+  VERY_HIGH: "bg-timo-red",
+  HIGH: "bg-timo-orange",
+  MEDIUM: "bg-timo-gray",
+  LOW: "bg-timo-gray-900",
 };
 
 export interface PrioritySelectorProps {
@@ -34,7 +34,7 @@ export const PrioritySelector = ({
   onSelect,
 }: PrioritySelectorProps) => {
   return (
-    <Dropdown>
+    <Dropdown className="flex justify-center">
       <Dropdown.Trigger aria-haspopup="menu">{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="gap-1">
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 536dd72e..781fb9b5 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
@@ -11,9 +11,9 @@ const TRIGGER = (
 );
 
 const KOREAN_OPTIONS = [
-  { frequency: "daily", label: "매일" },
-  { frequency: "weekly", label: "매주" },
-  { frequency: "monthly", label: "매달" },
+  { frequency: "DAILY", label: "매일" },
+  { frequency: "WEEKLY", label: "매주" },
+  { frequency: "MONTHLY", label: "매달" },
 ] as const;
 
 const WEEKDAYS_KO = [
@@ -43,7 +43,7 @@ const meta = {
   argTypes: {
     frequency: {
       control: "select",
-      options: ["daily", "weekly", "monthly"],
+      options: ["DAILY", "WEEKLY", "MONTHLY"],
     },
   },
   args: {
@@ -66,7 +66,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Daily: Story = {
   args: {
-    frequency: "daily",
+    frequency: "DAILY",
   },
 };
 
@@ -76,7 +76,7 @@ const WeeklyDemo = (args: RepeatSelectorProps) => {
   return (
     <RepeatSelector
       {...args}
-      frequency="weekly"
+      frequency="WEEKLY"
       weekly={{
         ...args.weekly,
         weekdays: WEEKDAYS_KO,
@@ -94,7 +94,7 @@ const WeeklyDemo = (args: RepeatSelectorProps) => {
 
 export const Weekly: Story = {
   args: {
-    frequency: "weekly",
+    frequency: "WEEKLY",
   },
   render: (args) => <WeeklyDemo {...args} />,
 };
@@ -105,7 +105,7 @@ const MonthlyDemo = (args: RepeatSelectorProps) => {
   return (
     <RepeatSelector
       {...args}
-      frequency="monthly"
+      frequency="MONTHLY"
       monthly={{
         ...args.monthly,
         repeatDayLabel: "일 마다",
@@ -118,7 +118,7 @@ const MonthlyDemo = (args: RepeatSelectorProps) => {
 
 export const Monthly: Story = {
   args: {
-    frequency: "monthly",
+    frequency: "MONTHLY",
   },
   render: (args) => <MonthlyDemo {...args} />,
 };
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 07eb816e..9a6b2169 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
@@ -9,7 +9,7 @@ import { Dropdown } from "../../layout/dropdown/Dropdown";
 
 import type { ReactNode } from "react";
 
-export type RepeatFrequency = "daily" | "weekly" | "monthly";
+export type RepeatFrequency = "DAILY" | "WEEKLY" | "MONTHLY";
 
 export interface RepeatOption {
   frequency: RepeatFrequency;
@@ -34,9 +34,9 @@ export interface RepeatMonthlyDetail {
 }
 
 const DETAIL_ALIGN: Record<RepeatFrequency, string> = {
-  daily: "items-start",
-  weekly: "items-start",
-  monthly: "items-end",
+  DAILY: "items-start",
+  WEEKLY: "items-start",
+  MONTHLY: "items-end",
 };
 
 export interface RepeatSelectorProps {
@@ -161,7 +161,7 @@ export const RepeatSelector = ({
   };
 
   return (
-    <Dropdown>
+    <Dropdown className="flex justify-center">
       <Dropdown.Trigger aria-haspopup="menu">{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="w-32.5 gap-1 p-0">
@@ -205,10 +205,10 @@ export const RepeatSelector = ({
               {detailHeading}
             </span>
 
-            {selectedFrequency === "weekly" && (
+            {selectedFrequency === "WEEKLY" && (
               <RepeatWeeklyDetailSection {...weekly} />
             )}
-            {selectedFrequency === "monthly" && (
+            {selectedFrequency === "MONTHLY" && (
               <RepeatMonthlyDetailSection
                 {...monthly}
                 ariaLabel={detailHeading}
diff --git a/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.stories.tsx b/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.stories.tsx
new file mode 100644
index 00000000..8f436924
--- /dev/null
+++ b/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.stories.tsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+
+import { TagNameInput } from "./TagNameInput";
+
+import type { TagNameInputProps } from "./TagNameInput";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const HINTS = {
+  maxLengthHint: "태그 이름은 최대 10자까지 입력할 수 있어요",
+  duplicateHint: "이미 사용 중인 이름은 등록할 수 없어요",
+};
+
+const InteractiveDemo = (args: TagNameInputProps) => {
+  const [value, setValue] = useState(args.value);
+
+  return <TagNameInput {...args} value={value} onChange={setValue} />;
+};
+
+const meta = {
+  title: "Components/Tag/TagNameInput",
+  component: TagNameInput,
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "light-gray",
+      values: [
+        { name: "light-gray", value: "#F5F5F5" },
+        { name: "white", value: "#FFFFFF" },
+      ],
+    },
+  },
+} satisfies Meta<typeof TagNameInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "",
+    onChange: () => {},
+    ...HINTS,
+  },
+  render: (args) => <InteractiveDemo {...args} />,
+};
+
+export const Error: Story = {
+  args: {
+    value: "일상",
+    onChange: () => {},
+    isError: true,
+    ...HINTS,
+  },
+  render: (args) => <InteractiveDemo {...args} />,
+};
diff --git a/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.tsx b/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.tsx
new file mode 100644
index 00000000..ee9f81df
--- /dev/null
+++ b/packages/timo-design-system/src/components/tag/tag-name-input/TagNameInput.tsx
@@ -0,0 +1,54 @@
+import { cn } from "../../../lib";
+
+const DEFAULT_MAX_LENGTH = 10;
+
+export interface TagNameInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  maxLength?: number;
+  isError?: boolean;
+  maxLengthHint: string;
+  duplicateHint: string;
+}
+
+export const TagNameInput = ({
+  value,
+  onChange,
+  maxLength = DEFAULT_MAX_LENGTH,
+  isError = false,
+  maxLengthHint,
+  duplicateHint,
+}: TagNameInputProps) => {
+  return (
+    <div className="flex w-full flex-col items-start gap-2">
+      <div
+        className={cn(
+          "flex w-full items-center gap-2.5 rounded-[4px] border border-solid px-3 py-2.5",
+          isError ? "border-timo-red" : "border-timo-gray-500",
+        )}
+      >
+        <input
+          value={value}
+          onChange={(event) => onChange(event.target.value.slice(0, maxLength))}
+          maxLength={maxLength}
+          className="typo-headline-m-14 text-timo-gray-900 min-w-0 flex-1 outline-none"
+        />
+        <span className="typo-caption-r-10 text-timo-gray-700 shrink-0 whitespace-nowrap">
+          {value.length}/{maxLength}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-start">
+        <p className="typo-caption-r-10 text-timo-gray-700">{maxLengthHint}</p>
+        <p
+          className={cn(
+            "typo-caption-r-10",
+            isError ? "text-timo-red" : "text-timo-gray-700",
+          )}
+        >
+          {duplicateHint}
+        </p>
+      </div>
+    </div>
+  );
+};
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 efb0c329..a3e847e2 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
@@ -20,7 +20,7 @@ export const TagSelector = ({
   onAddClick,
 }: TagSelectorProps) => {
   return (
-    <Dropdown>
+    <Dropdown className="flex justify-center">
       <Dropdown.Trigger aria-haspopup="menu">{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel>
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 232b50b8..7001e975 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
@@ -32,7 +32,7 @@ export const TimeSelector = ({
   const isAiSelected = selected === "ai";
 
   return (
-    <Dropdown>
+    <Dropdown className="flex justify-center">
       <Dropdown.Trigger>{trigger}</Dropdown.Trigger>
 
       <Dropdown.Panel className="w-23.75">
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
new file mode 100644
index 00000000..310f8054
--- /dev/null
+++ b/packages/timo-design-system/src/components/todo/todo-toolbar/TodoToolbar.tsx
@@ -0,0 +1,144 @@
+import {
+  CalendarDisableIcon,
+  CalendarOnIcon,
+  ClockDisableIcon,
+  ClockOnIcon,
+  MemoDisableIcon,
+  MemoOnIcon,
+  RepeatDisableIcon,
+  RepeatOnIcon,
+} from "../../../icons";
+import { cn } from "../../../lib";
+import { DateSelector } from "../../calendar/date-selector/DateSelector";
+import { PriorityIcon } from "../../priority/priority-icon/PriorityIcon";
+import {
+  PrioritySelector,
+  type PriorityLevel,
+} from "../../priority/priority-selector/PrioritySelector";
+import {
+  RepeatSelector,
+  type RepeatSelectorProps,
+} from "../../repeat/repeat-selector/RepeatSelector";
+import { TagIcon } from "../../tag/tag-icon/TagIcon";
+import { TagSelector } from "../../tag/tag-selector/TagSelector";
+import {
+  TimeSelector,
+  type TimeOption,
+  type TimeSelection,
+} from "../../time/time-selector/TimeSelector";
+
+export interface TodoToolbarProps {
+  dateLabel: string;
+  date?: Date;
+  onDateChange?: (date: Date) => void;
+
+  timeLabel: string;
+  timeOptions: TimeOption[];
+  time?: string;
+  onTimeChange?: (time: string) => void;
+  selectedTime?: TimeSelection;
+  onSelectTime?: (value: TimeSelection) => void;
+
+  priority?: PriorityLevel;
+  onSelectPriority?: (priority: PriorityLevel) => void;
+
+  tagLabel: string;
+  tags: string[];
+  selectedTag?: string;
+  onSelectTag?: (tag: string) => void;
+  onAddTagClick?: () => void;
+
+  hasMemo?: boolean;
+
+  isRepeatActive?: boolean;
+  repeat: Omit<RepeatSelectorProps, "trigger">;
+
+  className?: string;
+}
+
+export const TodoToolbar = ({
+  dateLabel,
+  date,
+  onDateChange,
+  timeLabel,
+  timeOptions,
+  time,
+  onTimeChange,
+  selectedTime,
+  onSelectTime,
+  priority,
+  onSelectPriority,
+  tagLabel,
+  tags,
+  selectedTag,
+  onSelectTag,
+  onAddTagClick,
+  hasMemo = false,
+  isRepeatActive = false,
+  repeat,
+  className,
+}: TodoToolbarProps) => {
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      <DateSelector
+        value={date}
+        onChange={onDateChange}
+        trigger={
+          <span className="flex items-center gap-0.5">
+            {date ? <CalendarOnIcon /> : <CalendarDisableIcon />}
+            <span
+              className={cn(
+                "typo-caption-r-10 whitespace-nowrap",
+                date ? "text-timo-gray-900" : "text-timo-gray-700",
+              )}
+            >
+              {dateLabel}
+            </span>
+          </span>
+        }
+      />
+
+      <TimeSelector
+        trigger={
+          <span className="flex items-center">
+            {time ? <ClockOnIcon /> : <ClockDisableIcon />}
+            <span
+              className={cn(
+                "typo-caption-r-10 w-9 whitespace-nowrap",
+                time ? "text-timo-gray-900" : "text-timo-gray-700",
+              )}
+            >
+              {timeLabel}
+            </span>
+          </span>
+        }
+        time={time}
+        onTimeChange={onTimeChange}
+        times={timeOptions}
+        selected={selectedTime}
+        onSelect={onSelectTime}
+      />
+
+      <PrioritySelector
+        trigger={<PriorityIcon priority={priority ?? "Disable"} />}
+        selected={priority}
+        onSelect={onSelectPriority}
+      />
+
+      <TagSelector
+        trigger={<TagIcon text={tagLabel} />}
+        tags={tags}
+        selected={selectedTag}
+        onSelect={onSelectTag}
+        onAddClick={onAddTagClick}
+      />
+
+      {hasMemo ? <MemoOnIcon /> : <MemoDisableIcon />}
+
+      <RepeatSelector
+        {...repeat}
+        trigger={isRepeatActive ? <RepeatOnIcon /> : <RepeatDisableIcon />}
+      />
+    </div>
+  );
+};
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-daily.svg b/packages/timo-design-system/src/icons/source/todo-icon-daily.svg
new file mode 100644
index 00000000..3a5d4b43
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-daily.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.9993" cy="11.9974" r="9.29032" fill="black"/>
+<rect x="17.7285" y="11.2227" width="1.54839" height="4.18064" transform="rotate(90 17.7285 11.2227)" fill="white"/>
+<path d="M11.0703 4.48828H12.6187V10.4496H11.0703V4.48828Z" fill="#74A0F8"/>
+<circle cx="11.8446" cy="11.9993" r="0.929032" fill="#F2FC9F"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-etc.svg b/packages/timo-design-system/src/icons/source/todo-icon-etc.svg
new file mode 100644
index 00000000..5172b000
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-etc.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98065 20.8273L3.23633 16.1225L4.45908 14.9003L9.1847 19.6238L7.98065 20.8273ZM11.4057 20.6039L3.47852 12.6803L6.05102 10.0972L8.44829 12.512L12.0791 8.88286L9.66907 6.49162L12.2426 3.87109L20.219 11.8439L17.5963 14.4162L15.2049 12.0062L11.5741 15.6364L13.9901 18.0316L11.4057 20.6039Z" fill="black"/>
+<circle cx="15.2659" cy="4.67677" r="0.922075" transform="rotate(35.5037 15.2659 4.67677)" fill="#F2FC9F"/>
+<path d="M20.5605 8.875L19.4657 9.96988L15.9073 6.41153L17.0022 5.31666L20.5605 8.875Z" fill="#74A0F8"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-plus.svg b/packages/timo-design-system/src/icons/source/todo-icon-plus.svg
new file mode 100644
index 00000000..68bdb129
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-plus.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.0008" cy="11.9974" r="9.29032" fill="black"/>
+<path d="M11.2261 6.8125H12.7745V17.2641H11.2261V6.8125Z" fill="#74A0F8"/>
+<circle cx="16.4134" cy="11.9993" r="0.929032" fill="#F2FC9F"/>
+<path d="M6.81348 12.7734L6.81348 11.225L14.8651 11.2251L14.8651 12.7734L6.81348 12.7734Z" fill="#74A0F8"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-relationship.svg b/packages/timo-design-system/src/icons/source/todo-icon-relationship.svg
new file mode 100644
index 00000000..de5fec08
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-relationship.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3.01953" y="12" width="17.9613" height="8.28387" rx="0.309677" fill="black"/>
+<circle cx="12.5413" cy="17.5736" r="0.929032" fill="#F2FC9F"/>
+<path d="M20.9028 16.8008C20.9883 16.8008 21.0576 16.8701 21.0576 16.9556L21.0576 18.1943C21.0576 18.2798 20.9883 18.3492 20.9028 18.3492L14.2447 18.3492C14.1592 18.3492 14.0899 18.2798 14.0899 18.1943L14.0899 16.9556C14.0899 16.8701 14.1592 16.8008 14.2447 16.8008L20.9028 16.8008Z" fill="white"/>
+<circle cx="11.613" cy="14.7858" r="0.929032" transform="rotate(-180 11.613 14.7858)" fill="#F2FC9F"/>
+<path d="M3.25152 15.5586C3.166 15.5586 3.09668 15.4893 3.09668 15.4038L3.09668 14.165C3.09668 14.0795 3.166 14.0102 3.25152 14.0102L9.90958 14.0102C9.9951 14.0102 10.0644 14.0795 10.0644 14.165L10.0644 15.4038C10.0644 15.4893 9.9951 15.5586 9.90958 15.5586L3.25152 15.5586Z" fill="#74A0F8"/>
+<circle cx="7.31614" cy="7.5471" r="3.83226" fill="black"/>
+<circle cx="16.8386" cy="7.5471" r="3.83226" fill="black"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-rest.svg b/packages/timo-design-system/src/icons/source/todo-icon-rest.svg
new file mode 100644
index 00000000..a8d61083
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-rest.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6.68667" cy="8.35044" r="0.864404" transform="rotate(-90 6.68667 8.35044)" fill="#F2FC9F"/>
+<path d="M5.96631 4.13539C5.96631 4.07572 6.01468 4.02734 6.07436 4.02734L7.29893 4.02734C7.35861 4.02734 7.40698 4.07572 7.40698 4.13539L7.40698 6.80064C7.40698 6.86031 7.35861 6.90869 7.29893 6.90869L6.07436 6.90869C6.01468 6.90869 5.96631 6.86031 5.96631 6.80064L5.96631 4.13539Z" fill="#74A0F8"/>
+<path d="M9.71191 4.13539C9.71191 4.07572 9.76029 4.02734 9.81996 4.02734L11.0445 4.02734C11.1042 4.02734 11.1526 4.07572 11.1526 4.13539L11.1526 9.10572C11.1526 9.16539 11.1042 9.21377 11.0445 9.21377L9.81996 9.21377C9.76029 9.21377 9.71191 9.16539 9.71191 9.10572L9.71191 4.13539Z" fill="black"/>
+<path d="M13.4575 4.13539C13.4575 4.07572 13.5059 4.02734 13.5656 4.02734L14.7901 4.02734C14.8498 4.02734 14.8982 4.07572 14.8982 4.13539L14.8982 9.10572C14.8982 9.16539 14.8498 9.21377 14.7901 9.21377L13.5656 9.21377C13.5059 9.21377 13.4575 9.16539 13.4575 9.10572L13.4575 4.13539Z" fill="black"/>
+<path d="M3.95068 10.3663C3.95068 10.2071 4.07969 10.0781 4.23882 10.0781H16.6286C16.7877 10.0781 16.9167 10.2071 16.9167 10.3663V14.112C16.9167 17.6925 14.0142 20.595 10.4337 20.595C6.85323 20.595 3.95068 17.6925 3.95068 14.112V10.3663Z" fill="black"/>
+<path d="M19.9775 11.4453C20.0372 11.4453 20.0859 11.494 20.0859 11.5537V16.9561C20.0858 17.0156 20.0371 17.0635 19.9775 17.0635H15.2959C15.2363 17.0635 15.1877 17.0156 15.1875 16.9561V15.7314C15.1875 15.6718 15.2362 15.623 15.2959 15.623H18.6455V12.8857H15.2959C15.2363 12.8857 15.1876 12.8379 15.1875 12.7783V11.5537C15.1875 11.494 15.2362 11.4453 15.2959 11.4453H19.9775Z" fill="black"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-study.svg b/packages/timo-design-system/src/icons/source/todo-icon-study.svg
new file mode 100644
index 00000000..6b27fded
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-study.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3419 18.0195V19.2582H3.94189V18.0195H18.3419Z" fill="#74A0F8"/>
+<rect x="8.44043" y="4.72266" width="2.86452" height="11.3079" transform="rotate(-43.9611 8.44043 4.72266)" fill="#121212"/>
+<path d="M3.93825 17.2369L7.75298 5.39161L15.7917 13.4503L3.93825 17.2369Z" fill="black"/>
+<path d="M3.94982 17.2261L5.09912 13.6424L7.53632 16.0857L3.94982 17.2261Z" fill="#F2FC9F"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-task.svg b/packages/timo-design-system/src/icons/source/todo-icon-task.svg
new file mode 100644
index 00000000..386b15f7
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-task.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.49023" y="2.98047" width="15.0194" height="18.0387" rx="0.309677" fill="black"/>
+<path d="M16.4902 11.3437C16.5757 11.3437 16.645 11.4131 16.645 11.4986L16.645 12.7373C16.645 12.8228 16.5757 12.8921 16.4902 12.8921L7.66437 12.8921C7.57886 12.8921 7.50954 12.8228 7.50954 12.7373L7.50954 11.4986C7.50954 11.4131 7.57886 11.3437 7.66437 11.3437L16.4902 11.3437Z" fill="#74A0F8"/>
+<path d="M16.4902 15.832C16.5757 15.832 16.645 15.9014 16.645 15.9869L16.645 17.2256C16.645 17.3111 16.5757 17.3804 16.4902 17.3804L7.66437 17.3804C7.57886 17.3804 7.50954 17.3111 7.50954 17.2256L7.50954 15.9869C7.50954 15.9014 7.57886 15.832 7.66437 15.832L16.4902 15.832Z" fill="white"/>
+<circle cx="8.4388" cy="7.62434" r="0.929032" fill="#F2FC9F"/>
+<path d="M16.4902 6.85156C16.5757 6.85156 16.645 6.92089 16.645 7.0064L16.645 8.24511C16.645 8.33063 16.5757 8.39995 16.4902 8.39995L10.1418 8.39995C10.0563 8.39995 9.98696 8.33063 9.98696 8.24511L9.98696 7.0064C9.98696 6.92089 10.0563 6.85156 10.1418 6.85156L16.4902 6.85156Z" fill="#74A0F8"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/todo-icon-work.svg b/packages/timo-design-system/src/icons/source/todo-icon-work.svg
new file mode 100644
index 00000000..29f627b7
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/todo-icon-work.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.48926 4.64561C4.48926 4.47458 4.62791 4.33594 4.79894 4.33594H19.1989C19.37 4.33594 19.5086 4.47458 19.5086 4.64561V16.5682H4.48926V4.64561Z" fill="black"/>
+<rect x="3.01807" y="15.0977" width="17.9613" height="4.56774" rx="0.309677" fill="black"/>
+<path d="M19.354 16.5664C19.4395 16.5664 19.5088 16.6357 19.5088 16.7212L19.5088 17.96C19.5088 18.0455 19.4395 18.1148 19.354 18.1148L4.64427 18.1148C4.55876 18.1148 4.48943 18.0455 4.48943 17.96L4.48943 16.7212C4.48943 16.6357 4.55876 16.5664 4.64427 16.5664L19.354 16.5664Z" fill="white"/>
+<circle cx="9.36691" cy="6.50217" r="0.619355" fill="#F2FC9F"/>
+<path d="M15.1344 6.03906C15.1985 6.03906 15.2505 6.09106 15.2505 6.15519V6.85197C15.2505 6.9161 15.1985 6.9681 15.1344 6.96809L10.7215 6.96809C10.6573 6.96809 10.6053 6.9161 10.6053 6.85197V6.15519C10.6053 6.09105 10.6573 6.03906 10.7215 6.03906L15.1344 6.03906Z" fill="#74A0F8"/>
+</svg>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7e9c27e..edf4ba52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,12 +35,18 @@ importers:
       '@dnd-kit/core':
         specifier: ^6.3.1
         version: 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/modifiers':
+        specifier: ^9.0.0
+        version: 9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
       '@dnd-kit/sortable':
         specifier: ^10.0.0
         version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.0)
+      '@hookform/resolvers':
+        specifier: ^5.4.0
+        version: 5.4.0(react-hook-form@7.81.0(react@19.2.0))
       '@repo/timo-design-system':
         specifier: workspace:*
         version: link:../../packages/timo-design-system
@@ -62,12 +68,18 @@ importers:
       next-intl:
         specifier: ^4.13.1
         version: 4.13.1(@swc/helpers@0.5.15)(next@16.2.0(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.2)
+      overlay-kit:
+        specifier: ^1.9.0
+        version: 1.9.0(react@19.2.0)
       react:
         specifier: ^19.2.0
         version: 19.2.0
       react-dom:
         specifier: ^19.2.0
         version: 19.2.0(react@19.2.0)
+      react-hook-form:
+        specifier: ^7.81.0
+        version: 7.81.0(react@19.2.0)
       zod:
         specifier: ^4.4.3
         version: 4.4.3
@@ -337,6 +349,12 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
+  '@dnd-kit/modifiers@9.0.0':
+    resolution: {integrity: sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: '>=16.8.0'
+
   '@dnd-kit/sortable@10.0.0':
     resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
     peerDependencies:
@@ -566,6 +584,11 @@ packages:
   '@formatjs/intl-localematcher@0.8.10':
     resolution: {integrity: sha512-P/IC3qws3jH+1fEs+o0RIFgXKRaQlFehjS5W0FPAqdo6hgzawLl+eD0q0JjheQ3XtoOe5n8WSYfX06KQZI/QJA==}
 
+  '@hookform/resolvers@5.4.0':
+    resolution: {integrity: sha512-EIsqr/t/qbinPIhGjMdtvutIN1Kk4uwbROE9/UQ93CAVGR7GkA7Y92+fX80OzXi/OB67jVFYwKGO1WzkxmkFZw==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1476,6 +1499,9 @@ packages:
     peerDependencies:
       webpack: '>=5.0.0'
 
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@storybook/addon-a11y@8.6.14':
     resolution: {integrity: sha512-fozv6enO9IgpWq2U8qqS8MZ21Nt+MVHiRQe3CjnCpBOejTyo/ATm690PeYYRVHVG6M/15TVePb0h3ngKQbrrzQ==}
     peerDependencies:
@@ -3682,6 +3708,11 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  overlay-kit@1.9.0:
+    resolution: {integrity: sha512-kwzAOhWEDsrmgJzQKuI0v3xCwyWTSaNe3qI0t+7OTTj05ciRpg3j+NWz8FRPVt7rHBFL/jAjKyQf4xGOHcRXfg==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -3877,6 +3908,12 @@ packages:
     peerDependencies:
       react: ^19.2.0
 
+  react-hook-form@7.81.0:
+    resolution: {integrity: sha512-ocbmr2p5KBMoAfj4WCUvped33lVi1Kd5DuDUvQDnB6VEAacOjPI/jMbtDdbhco4y9ct4xUuCmMY0b/C9L0QHjw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -4623,6 +4660,13 @@ snapshots:
       react-dom: 19.2.0(react@19.2.0)
       tslib: 2.8.1
 
+  '@dnd-kit/modifiers@9.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@dnd-kit/utilities': 3.2.2(react@19.2.0)
+      react: 19.2.0
+      tslib: 2.8.1
+
   '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@dnd-kit/core': 6.3.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -4792,6 +4836,11 @@ snapshots:
     dependencies:
       '@formatjs/fast-memoize': 3.1.6
 
+  '@hookform/resolvers@5.4.0(react-hook-form@7.81.0(react@19.2.0))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.81.0(react@19.2.0)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -5552,6 +5601,8 @@ snapshots:
       - encoding
       - supports-color
 
+  '@standard-schema/utils@0.3.0': {}
+
   '@storybook/addon-a11y@8.6.14(storybook@8.6.14(prettier@3.7.4))':
     dependencies:
       '@storybook/addon-highlight': 8.6.14(storybook@8.6.14(prettier@3.7.4))
@@ -7926,6 +7977,10 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  overlay-kit@1.9.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
@@ -8059,6 +8114,10 @@ snapshots:
       react: 19.2.0
       scheduler: 0.27.0
 
+  react-hook-form@7.81.0(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}