diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx
index ac26e8c0..31f6a9d8 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsCalendarDisconnectModal.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { ModalButton } from "@repo/timo-design-system/ui";
+import { Button } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 
 import type { SettingsProfileLabels } from "@/app/[locale]/(main)/settings/_types/account/profile-type";
@@ -41,19 +41,27 @@ export const SettingsCalendarDisconnectModal = ({
         {labels.calendarDisconnectConfirmDescription}
       </p>
       <div className="mt-6 flex w-full gap-3">
-        <ModalButton variant="border" className="flex-1 px-0" onClick={onClose}>
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+        >
           {labels.calendarDisconnectConfirmCancel}
-        </ModalButton>
-        <ModalButton
-          variant="fill"
-          className="flex-1 px-0"
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
           onClick={() => {
             onDisconnect();
             onClose();
           }}
         >
           {labels.calendarDisconnectConfirmConfirm}
-        </ModalButton>
+        </Button>
       </div>
     </OverlayModal>
   );
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
index 1f43dfba..4ae6e597 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/withdrawal/SettingsWithdrawModalContainer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { ModalButton } from "@repo/timo-design-system/ui";
+import { Button } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
@@ -44,19 +44,27 @@ export const SettingsWithdrawModalContainer = ({
         {t("withdrawConfirmDescription")}
       </p>
       <div className="mt-6 flex w-full gap-3">
-        <ModalButton
-          variant="border"
-          className="flex-1 px-0"
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
           onClick={() => {
             onWithdraw();
             onClose();
           }}
         >
           {t("withdrawConfirmConfirm")}
-        </ModalButton>
-        <ModalButton variant="fill" className="flex-1 px-0" onClick={onClose}>
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+        >
           {t("withdrawConfirmCancel")}
-        </ModalButton>
+        </Button>
       </div>
     </OverlayModal>
   );
diff --git a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
index 9c6a6a14..ef4cd131 100644
--- a/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
+++ b/apps/timo-web/app/[locale]/onboarding/_components/OnboardingButton.tsx
@@ -1,9 +1,9 @@
 import {
-  ChevronLeftIcon,
-  ChevronSmallRightIcon,
+  ChevronSmallLeftIcon,
+  ChevronSmallRightDisableIcon,
   ChevronSmallRightWhiteIcon,
 } from "@repo/timo-design-system/icons";
-import { cn } from "@repo/timo-design-system/utils";
+import { Button } from "@repo/timo-design-system/ui";
 
 interface OnboardingButtonProps {
   variant: "next" | "prev" | "start";
@@ -22,71 +22,54 @@ export const OnboardingButton = ({
 }: OnboardingButtonProps) => {
   if (variant === "prev") {
     return (
-      <button
-        type="button"
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        icon={<ChevronSmallLeftIcon />}
+        className="w-auto px-2"
         onClick={onClick}
-        className="hover:bg-timo-gray-500 bg-timo-gray-200 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out"
       >
-        <ChevronLeftIcon width={18} height={18} />
-        <span className="typo-headline-m-16 text-timo-gray-900">{label}</span>
-      </button>
+        {label}
+      </Button>
     );
   }
 
+  const isDisabled = disabled || !isActive;
+
   if (variant === "start") {
-    // TODO: 원래 start 버튼 (항상 활성 스타일) — CalendarConnect 단계 재활성화 시 아래 주석 해제 후 isActive 분기 제거
-    // return (
-    //   <button
-    //     type="button"
-    //     onClick={onClick}
-    //     className="bg-timo-blue-300 flex items-center justify-center gap-2 rounded-[4px] px-4 py-2"
-    //   >
-    //     <span className="typo-headline-m-16 text-white">{label}</span>
-    //   </button>
-    // );
     return (
-      <button
-        type="button"
+      <Button
+        variant="primary"
+        appearance="fill"
+        size="m"
+        className="w-auto px-4"
+        disabled={isDisabled}
         onClick={onClick}
-        disabled={disabled || !isActive}
-        className={cn(
-          "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
-          isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
-        )}
       >
-        <span
-          className={cn(
-            "typo-headline-m-16",
-            isActive ? "text-white" : "text-timo-gray-700",
-          )}
-        >
-          {label}
-        </span>
-      </button>
+        {label}
+      </Button>
     );
   }
 
-  const isDisabled = disabled || !isActive;
-
   return (
-    <button
-      type="button"
-      onClick={onClick}
+    <Button
+      variant={isDisabled ? "secondary" : "primary"}
+      appearance="fill"
+      size="m"
+      icon={
+        isDisabled ? (
+          <ChevronSmallRightDisableIcon />
+        ) : (
+          <ChevronSmallRightWhiteIcon />
+        )
+      }
+      iconPosition="right"
+      className="w-auto px-2"
       disabled={isDisabled}
-      className={cn(
-        "flex items-center justify-center gap-2 rounded-[4px] px-4 py-2 transition-colors duration-200 ease-in-out",
-        isActive ? "bg-timo-blue-300" : "bg-timo-gray-200",
-      )}
+      onClick={onClick}
     >
-      <span
-        className={cn(
-          "typo-headline-m-16",
-          isActive ? "text-white" : "text-timo-gray-700",
-        )}
-      >
-        {label}
-      </span>
-      {isActive ? <ChevronSmallRightWhiteIcon /> : <ChevronSmallRightIcon />}
-    </button>
+      {label}
+    </Button>
   );
 };
diff --git a/apps/timo-web/components/tag/CreateTagModalContainer.tsx b/apps/timo-web/components/tag/CreateTagModalContainer.tsx
index 6f9a77db..d275d044 100644
--- a/apps/timo-web/components/tag/CreateTagModalContainer.tsx
+++ b/apps/timo-web/components/tag/CreateTagModalContainer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { DeleteIcon } from "@repo/timo-design-system/icons";
-import { CreateButton, TagNameInput } from "@repo/timo-design-system/ui";
+import { Button, TagNameInput } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 
@@ -81,11 +81,16 @@ export const CreateTagModalContainer = ({
       </div>
 
       <div className="flex w-full items-center justify-end">
-        <CreateButton
-          label={t("createTagModal.create")}
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="m"
+          className="w-auto px-4"
           disabled={!isValid}
           onClick={handleCreate}
-        />
+        >
+          {t("createTagModal.create")}
+        </Button>
       </div>
     </OverlayModal>
   );
diff --git a/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx b/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx
index babed0f6..c80ff2ea 100644
--- a/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx
+++ b/apps/timo-web/components/timer/TimerCompleteModalPanel.tsx
@@ -50,7 +50,7 @@ export const TimerCompleteModalPanel = ({
       </div>
 
       <Modal.Footer>
-        <Modal.FillButton className="flex-1 px-0" onClick={onComplete}>
+        <Modal.FillButton onClick={onComplete}>
           {t("completeButton")}
         </Modal.FillButton>
       </Modal.Footer>
diff --git a/apps/timo-web/components/timer/TimerEndModalPanel.tsx b/apps/timo-web/components/timer/TimerEndModalPanel.tsx
index b2e57e0d..370284e5 100644
--- a/apps/timo-web/components/timer/TimerEndModalPanel.tsx
+++ b/apps/timo-web/components/timer/TimerEndModalPanel.tsx
@@ -1,5 +1,5 @@
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { Modal, ModalButton } from "@repo/timo-design-system/ui";
+import { Button, Modal } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
@@ -22,20 +22,24 @@ export const TimerEndModalPanel = ({
       <Modal.Title>{t("title")}</Modal.Title>
       <Modal.Description>{t("description")}</Modal.Description>
       <Modal.Footer>
-        <ModalButton
-          variant="border"
-          className="flex-1 px-0"
+        <Button
+          variant="secondary"
+          appearance="outline"
+          size="lg"
+          className="flex-1"
           onClick={onContinue}
         >
           {t("continueButton")}
-        </ModalButton>
-        <ModalButton
-          variant="fill"
-          className="flex-1 px-0"
+        </Button>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
           onClick={onComplete}
         >
           {t("completeButton")}
-        </ModalButton>
+        </Button>
       </Modal.Footer>
     </>
   );
diff --git a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx
index 8de4e4be..ca344fbd 100644
--- a/apps/timo-web/components/timer/TimerExtendModalPanel.tsx
+++ b/apps/timo-web/components/timer/TimerExtendModalPanel.tsx
@@ -1,5 +1,4 @@
-import { Modal, ModalButton } from "@repo/timo-design-system/ui";
-import { cn } from "@repo/timo-design-system/utils";
+import { Button, Modal } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 
 import { extendTimerBodyExtendMinutesMax } from "@/generated/endpoints/timer/timer.zod";
@@ -20,8 +19,9 @@ const PRESET_OPTIONS: {
   { preset: 60, labelKey: "presetOneHour" },
 ];
 
-const CHIP_FOCUS_BORDER_CLASS =
-  "border-2 border-transparent focus-visible:border-timo-blue-300 outline-none";
+const focusOnMount = (element: HTMLInputElement | null) => {
+  element?.focus();
+};
 
 export interface TimerExtendModalPanelProps {
   selectedPreset: ExtendTimePreset | null;
@@ -54,26 +54,23 @@ export const TimerExtendModalPanel = ({
 
       <div className="mt-5.75 grid w-full grid-cols-4 gap-1.25">
         {PRESET_OPTIONS.map(({ preset, labelKey }) => (
-          <button
+          <Button
             key={preset}
-            type="button"
+            variant="secondary"
+            appearance="fill"
+            size="m"
+            className="text-timo-black"
             aria-pressed={selectedPreset === preset}
             onClick={() => onSelectPreset(preset)}
-            className={cn(
-              "typo-headline-r-14 flex h-[37px] items-center justify-center rounded-[4px]",
-              CHIP_FOCUS_BORDER_CLASS,
-              selectedPreset === preset
-                ? "bg-timo-blue-300 text-white"
-                : "bg-timo-gray-300 text-timo-black",
-            )}
           >
             {t(labelKey)}
-          </button>
+          </Button>
         ))}
 
         {isCustomSelected ? (
-          <div className="border-timo-gray-500 focus-within:border-timo-blue-300 flex h-[37px] items-center justify-center rounded-[4px] border px-2">
+          <div className="border-timo-blue-300 focus-within:ring-timo-blue-300 flex h-8.5 items-center justify-center rounded-[4px] border px-2 focus-within:ring-2 focus-within:ring-offset-2">
             <input
+              ref={focusOnMount}
               type="text"
               inputMode="numeric"
               value={customMinutes}
@@ -100,42 +97,35 @@ export const TimerExtendModalPanel = ({
             </span>
           </div>
         ) : (
-          <button
-            type="button"
+          <Button
+            variant="secondary"
+            appearance="fill"
+            size="m"
+            className="text-timo-black"
             onClick={() => onSelectPreset("custom")}
-            className={cn(
-              "typo-headline-r-14 text-timo-gray-700 bg-timo-gray-300 flex h-[37px] items-center justify-center rounded-[4px]",
-              CHIP_FOCUS_BORDER_CLASS,
-            )}
           >
             {t("customPreset")}
-          </button>
+          </Button>
         )}
       </div>
 
       <div className="mt-2.5 flex w-full gap-1.5">
         {canGoBack ? (
-          <ModalButton
-            variant="border"
-            className="flex-1 px-0"
+          <Button
+            variant="secondary"
+            appearance="outline"
+            size="lg"
+            className="flex-1"
             onClick={onClose}
           >
             {t("closeButton")}
-          </ModalButton>
+          </Button>
         ) : (
-          <Modal.BorderButton className="flex-1 px-0" onClick={onClose}>
+          <Modal.BorderButton onClick={onClose}>
             {t("closeButton")}
           </Modal.BorderButton>
         )}
-        <Modal.FillButton
-          className={cn(
-            "flex-1 px-0",
-            !canSubmit &&
-              "border-timo-gray-500 text-timo-gray-700 border bg-white",
-          )}
-          disabled={!canSubmit}
-          onClick={onSubmit}
-        >
+        <Modal.FillButton disabled={!canSubmit} onClick={onSubmit}>
           {t("submitButton")}
         </Modal.FillButton>
       </div>
diff --git a/apps/timo-web/components/timer/TimerStopModalPanel.tsx b/apps/timo-web/components/timer/TimerStopModalPanel.tsx
index 25f7c584..fd0d247a 100644
--- a/apps/timo-web/components/timer/TimerStopModalPanel.tsx
+++ b/apps/timo-web/components/timer/TimerStopModalPanel.tsx
@@ -1,5 +1,5 @@
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { Modal, ModalButton } from "@repo/timo-design-system/ui";
+import { Button, Modal } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
@@ -37,12 +37,16 @@ export const TimerStopModalPanel = ({
         })}
       </Modal.Description>
       <Modal.Footer>
-        <Modal.BorderButton className="flex-1 px-0">
-          {t("continueButton")}
-        </Modal.BorderButton>
-        <ModalButton variant="fill" className="flex-1 px-0" onClick={onSwitch}>
+        <Modal.BorderButton>{t("continueButton")}</Modal.BorderButton>
+        <Button
+          variant="primary"
+          appearance="fill"
+          size="lg"
+          className="flex-1"
+          onClick={onSwitch}
+        >
           {t("switchButton")}
-        </ModalButton>
+        </Button>
       </Modal.Footer>
     </>
   );
diff --git a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
index 5bfffce9..32df142c 100644
--- a/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
+++ b/apps/timo-web/components/todo-modal/create/CreateTodoModalContent.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DeleteIcon } from "@repo/timo-design-system/icons";
-import { CreateButton, TodoToolbar } from "@repo/timo-design-system/ui";
+import { Button, TodoToolbar } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
 import { useController, useForm } from "react-hook-form";
@@ -222,11 +222,16 @@ export const CreateTodoModalContent = ({
             }}
           />
 
-          <CreateButton
-            label={t("createModal.create")}
+          <Button
+            variant="primary"
+            appearance="fill"
+            size="m"
+            className="w-auto shrink-0 px-4"
             disabled={!titleField.title.trim()}
             onClick={handleSubmit(handleFormSubmit, handleFormInvalid)}
-          />
+          >
+            {t("createModal.create")}
+          </Button>
         </div>
       </OverlayModal>
 
diff --git a/packages/timo-design-system/src/components/button/button/Button.stories.tsx b/packages/timo-design-system/src/components/button/button/Button.stories.tsx
index 240eec39..d542ac72 100644
--- a/packages/timo-design-system/src/components/button/button/Button.stories.tsx
+++ b/packages/timo-design-system/src/components/button/button/Button.stories.tsx
@@ -144,6 +144,49 @@ export const WithRightIcon: Story = {
   ),
 };
 
+export const Pressed: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="grid w-100 grid-cols-4 gap-1.25">
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        className="text-timo-black"
+        aria-pressed
+      >
+        +10M
+      </Button>
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        className="text-timo-black"
+        aria-pressed={false}
+      >
+        +30M
+      </Button>
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        className="text-timo-black"
+        aria-pressed={false}
+      >
+        +1H
+      </Button>
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
+        className="text-timo-black"
+      >
+        직접입력
+      </Button>
+    </div>
+  ),
+};
+
 export const Layout: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
diff --git a/packages/timo-design-system/src/components/button/button/Button.tsx b/packages/timo-design-system/src/components/button/button/Button.tsx
index 04c81eb8..581e2d7b 100644
--- a/packages/timo-design-system/src/components/button/button/Button.tsx
+++ b/packages/timo-design-system/src/components/button/button/Button.tsx
@@ -17,7 +17,7 @@ const BUTTON_VARIANTS: Record<
       "border-timo-blue-300 text-timo-blue-300 border bg-white disabled:border-timo-gray-500 disabled:text-timo-gray-700",
   },
   secondary: {
-    fill: "bg-timo-gray-300 text-timo-gray-900 disabled:text-timo-gray-700",
+    fill: "bg-timo-gray-300 text-timo-gray-900 disabled:text-timo-gray-700 aria-pressed:border aria-pressed:border-timo-blue-300 aria-pressed:bg-white",
     outline:
       "border-timo-gray-500 text-timo-gray-900 border bg-white disabled:text-timo-gray-700",
   },
diff --git a/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx b/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx
deleted file mode 100644
index 36f12114..00000000
--- a/packages/timo-design-system/src/components/button/create-button/CreateButton.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { CreateButton } from "./CreateButton";
-
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta = {
-  title: "Components/CreateButton",
-  component: CreateButton,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    label: {
-      control: "text",
-      description: "버튼에 표시될 텍스트",
-      table: {
-        type: { summary: "string" },
-      },
-    },
-    disabled: {
-      control: "boolean",
-      description: "버튼 비활성화 여부",
-      table: {
-        type: { summary: "boolean" },
-        defaultValue: { summary: "false" },
-      },
-    },
-  },
-} satisfies Meta<typeof CreateButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: "생성하기" },
-};
-
-export const Disabled: Story = {
-  args: { label: "생성하기", disabled: true },
-};
diff --git a/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx b/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx
deleted file mode 100644
index 1ae43d93..00000000
--- a/packages/timo-design-system/src/components/button/create-button/CreateButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { cn } from "../../../lib";
-
-export interface CreateButtonProps {
-  label: string;
-  disabled?: boolean;
-  onClick?: () => void;
-}
-
-export const CreateButton = ({
-  label,
-  disabled = false,
-  onClick,
-}: CreateButtonProps) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        "typo-headline-b-14 inline-flex items-center justify-center rounded px-3 py-1.5",
-        disabled
-          ? "bg-timo-gray-500 text-timo-gray-700 cursor-not-allowed"
-          : "bg-timo-blue-300 cursor-pointer text-white",
-      )}
-    >
-      {label}
-    </button>
-  );
-};
diff --git a/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx b/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx
deleted file mode 100644
index bf575de2..00000000
--- a/packages/timo-design-system/src/components/button/modal-button/ModalButton.stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { ModalButton } from "./ModalButton";
-
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta = {
-  title: "Components/Button/ModalButton",
-  component: ModalButton,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    variant: { control: "radio", options: ["fill", "border"] },
-    onClick: { action: "clicked" },
-  },
-  args: {
-    variant: "fill",
-    children: "삭제하기",
-  },
-} satisfies Meta<typeof ModalButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AllStates: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex gap-3">
-      <ModalButton variant="border">돌아가기</ModalButton>
-      <ModalButton variant="fill">삭제하기</ModalButton>
-    </div>
-  ),
-};
-
-export const CustomWidth: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-100 gap-3">
-      <ModalButton variant="border" className="w-full px-0">
-        돌아가기
-      </ModalButton>
-      <ModalButton variant="fill" className="w-full px-0">
-        삭제하기
-      </ModalButton>
-    </div>
-  ),
-};
diff --git a/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx b/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx
deleted file mode 100644
index 22cb7e31..00000000
--- a/packages/timo-design-system/src/components/button/modal-button/ModalButton.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { cn } from "../../../lib";
-
-import type { ButtonHTMLAttributes } from "react";
-
-export type ModalButtonVariantTypes = "fill" | "border";
-
-const MODAL_BUTTON_VARIANT: Record<ModalButtonVariantTypes, string> = {
-  fill: "bg-timo-blue-300 text-white focus-visible:ring-timo-blue-300 focus-visible:ring-2 focus-visible:ring-offset-2",
-  border:
-    "border border-timo-gray-500 text-timo-black focus-visible:border-timo-blue-300",
-};
-
-export interface ModalButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant: ModalButtonVariantTypes;
-}
-
-export const ModalButton = ({
-  variant,
-  className,
-  children,
-  ...rest
-}: ModalButtonProps) => {
-  return (
-    <button
-      type="button"
-      className={cn(
-        "typo-headline-r-14 flex items-center justify-center rounded-[4px] px-15.5 py-[11px] outline-none",
-        MODAL_BUTTON_VARIANT[variant],
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};
diff --git a/packages/timo-design-system/src/components/index.ts b/packages/timo-design-system/src/components/index.ts
index 4e7cd294..b1120afc 100644
--- a/packages/timo-design-system/src/components/index.ts
+++ b/packages/timo-design-system/src/components/index.ts
@@ -10,7 +10,6 @@ export { PriorityIcon } from "./priority/priority-icon/PriorityIcon";
 export { PrioritySelector } from "./priority/priority-selector/PrioritySelector";
 export type { PriorityLevel } from "./priority/priority-selector/PrioritySelector";
 export { Button } from "./button/button/Button";
-export { CreateButton } from "./button/create-button/CreateButton";
 export { DeleteButton } from "./button/delete-button/DeleteButton";
 export { AddTaskButton } from "./button/add-task-button/AddTaskButton";
 export { TodayBadge } from "./badge/today-badge/TodayBadge";
@@ -19,7 +18,6 @@ export type { TogglePanelOption } from "./toggle-panel/TogglePanel";
 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 { Modal } from "./layout/modal/Modal";
 export { SidebarButton } from "./button/sidebar-button/SidebarButton";
 export { TodayButton } from "./button/today-button/TodayButton";
diff --git a/packages/timo-design-system/src/components/layout/modal/Modal.tsx b/packages/timo-design-system/src/components/layout/modal/Modal.tsx
index 4c10ea60..c1e8d96c 100644
--- a/packages/timo-design-system/src/components/layout/modal/Modal.tsx
+++ b/packages/timo-design-system/src/components/layout/modal/Modal.tsx
@@ -15,7 +15,7 @@ import {
 import { createPortal } from "react-dom";
 
 import { acquireModalStackIndex, cn, hasOpenFloatingLayer } from "../../../lib";
-import { ModalButton } from "../../button/modal-button/ModalButton";
+import { Button } from "../../button/button/Button";
 
 // tailwind-config theme.css의 --z-index-modal-overlay/--z-index-modal-panel과 동일한 기준값이다.
 const BASE_OVERLAY_Z_INDEX = 40;
@@ -232,20 +232,25 @@ export type ModalBorderButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 const ModalBorderButton = ({
   onClick,
   className,
+  children,
   ...rest
 }: ModalBorderButtonProps) => {
   const { close } = useModalContext();
 
   return (
-    <ModalButton
-      variant="border"
+    <Button
+      variant="secondary"
+      appearance="outline"
+      size="lg"
       {...rest}
       onClick={(e) => {
         onClick?.(e);
         close();
       }}
-      className={cn("flex-1 px-0", className)}
-    />
+      className={cn("flex-1", className)}
+    >
+      {children}
+    </Button>
   );
 };
 
@@ -254,20 +259,25 @@ export type ModalFillButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
 const ModalFillButton = ({
   onClick,
   className,
+  children,
   ...rest
 }: ModalFillButtonProps) => {
   const { close } = useModalContext();
 
   return (
-    <ModalButton
-      variant="fill"
+    <Button
+      variant="primary"
+      appearance="fill"
+      size="lg"
       {...rest}
       onClick={(e) => {
         onClick?.(e);
         close();
       }}
-      className={cn("flex-1 px-0", className)}
-    />
+      className={cn("flex-1", className)}
+    >
+      {children}
+    </Button>
   );
 };
 
diff --git a/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg b/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg
new file mode 100644
index 00000000..3f724b29
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/chevron-small-right-disable.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.85393 14.8402L11.8534 9.38589C11.8999 9.33523 11.9367 9.27508 11.9619 9.20887C11.9871 9.14265 12 9.07168 12 9C12 8.92832 11.9871 8.85735 11.9619 8.79113C11.9367 8.72492 11.8999 8.66477 11.8534 8.61411L6.85393 3.15984C6.76012 3.0575 6.63289 3 6.50022 3C6.36755 3 6.24032 3.0575 6.14651 3.15984C6.0527 3.26218 6 3.40099 6 3.54573C6 3.69047 6.0527 3.82928 6.14651 3.93162L10.7929 9L6.14651 14.0684C6.10006 14.1191 6.06322 14.1792 6.03808 14.2454C6.01294 14.3116 6 14.3826 6 14.4543C6 14.5259 6.01294 14.5969 6.03808 14.6631C6.06322 14.7293 6.10006 14.7895 6.14651 14.8402C6.19296 14.8908 6.24811 14.931 6.3088 14.9585C6.36948 14.9859 6.43453 15 6.50022 15C6.56591 15 6.63096 14.9859 6.69165 14.9585C6.75234 14.931 6.80748 14.8908 6.85393 14.8402Z" fill="#9F9F9F" style="fill:#9F9F9F;fill:color(display-p3 0.6235 0.6235 0.6235);fill-opacity:1;"/>
+</svg>