diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
index 0ce550c2..498fbbce 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/home/_components/todo-card/HomeTodoCard.tsx
@@ -1,13 +1,13 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
+  ControlPauseActiveIcon,
+  ControlPlayActiveIcon,
   MemoDisableIcon,
   MemoOnIcon,
   PlayDisabledIcon,
-  PlayIcon,
   RepeatTodoDisableIcon,
   RepeatTodoOnIcon,
-  StopIcon,
 } from "@repo/timo-design-system/icons";
 import {
   Checkbox,
@@ -142,9 +142,9 @@ export const HomeTodoCard = ({
           {isCompleted ? (
             <PlayDisabledIcon />
           ) : isRunning ? (
-            <StopIcon />
+            <ControlPauseActiveIcon width={12} height={12} />
           ) : isPlayHighlighted ? (
-            <PlayIcon />
+            <ControlPlayActiveIcon width={12} height={12} />
           ) : (
             <PlayDisabledIcon />
           )}
diff --git a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
index f222083d..c9bfc903 100644
--- a/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
+++ b/apps/timo-web/app/[locale]/(main)/(with-time-sidebar)/today/_components/TodayTodoCard.tsx
@@ -3,13 +3,13 @@ import {
   CalendarOnIcon,
   ClockDisableIcon,
   ClockOnIcon,
+  ControlPauseActiveIcon,
+  ControlPlayActiveIcon,
   MemoDisableIcon,
   MemoOnIcon,
   PlayDisabledIcon,
-  PlayIcon,
   RepeatDisableIcon,
   RepeatOnIcon,
-  StopIcon,
 } from "@repo/timo-design-system/icons";
 import {
   Checkbox,
@@ -152,9 +152,9 @@ export const TodayTodoCard = ({
             {isDone ? (
               <PlayDisabledIcon width={24} height={24} />
             ) : isPlaying ? (
-              <StopIcon width={24} height={24} />
+              <ControlPauseActiveIcon width={24} height={24} />
             ) : isPlayHighlighted ? (
-              <PlayIcon width={24} height={24} />
+              <ControlPlayActiveIcon width={24} height={24} />
             ) : (
               <PlayDisabledIcon width={24} height={24} />
             )}
diff --git a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
index ba02e4c0..17db9059 100644
--- a/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
+++ b/apps/timo-web/app/[locale]/(main)/focus/_components/FocusTaskItem.tsx
@@ -1,8 +1,8 @@
 import {
   CalendarOnIcon,
   ClockOnIcon,
-  PlayIcon,
-  StopIcon,
+  ControlPauseActiveIcon,
+  ControlPlayActiveIcon,
 } from "@repo/timo-design-system/icons";
 import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 import { cn } from "@repo/timo-design-system/utils";
@@ -77,9 +77,9 @@ export const FocusTaskItem = ({
           onClick={onTogglePlay}
         >
           {isRunning ? (
-            <StopIcon width={24} height={24} />
+            <ControlPauseActiveIcon width={24} height={24} />
           ) : (
-            <PlayIcon width={24} height={24} />
+            <ControlPlayActiveIcon width={24} height={24} />
           )}
         </PlayButton>
       </div>
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
index a5e8f4a4..09331135 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/account/SettingsProfileView.tsx
@@ -1,4 +1,4 @@
-import { PillButton } from "@repo/timo-design-system/ui";
+import { Button } from "@repo/timo-design-system/ui";
 import Image from "next/image";
 
 import type {
@@ -88,25 +88,30 @@ export const SettingsProfileView = ({
           <h2 className="typo-headline-b-16 text-timo-gray-900">
             {labels.calendarSection}
           </h2>
-          <div className="bg-timo-gray-300 flex h-10.25 w-fit items-center gap-4 self-start rounded-lg px-2.5 py-1.5">
+          <div className="bg-timo-gray-300 flex w-fit items-center gap-4 self-start rounded-lg px-2.5 py-1.5">
             <div className="flex items-center gap-1.5">
-              <Image
-                src="/images/google-calendar.png"
-                alt=""
-                width={20}
-                height={20}
-              />
+              <div className="flex size-6 shrink-0 items-center justify-center p-1">
+                <Image
+                  src="/images/google-calendar.png"
+                  alt=""
+                  width={20}
+                  height={20}
+                />
+              </div>
               <span className="typo-headline-m-16 text-timo-gray-700 whitespace-nowrap">
                 Google Calendar
               </span>
             </div>
 
-            <PillButton
-              variant={isCalendarConnected ? "gray-dark" : "blue"}
+            <Button
+              variant={isCalendarConnected ? "secondary" : "primary"}
+              appearance="fill"
+              size="m"
+              className="w-20"
               onClick={onConnectCalendar}
             >
               {isCalendarConnected ? labels.disconnect : labels.connect}
-            </PillButton>
+            </Button>
           </div>
         </section>
 
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView.tsx b/apps/timo-web/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView.tsx
index 5e0b1c8f..7d858a1a 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_components/withdrawal/SettingsWithdrawalView.tsx
@@ -1,4 +1,5 @@
 import { WarningGrayIcon } from "@repo/timo-design-system/icons";
+import { Button } from "@repo/timo-design-system/ui";
 
 import type { SettingsWithdrawalLabels } from "@/app/[locale]/(main)/settings/_types/withdrawal/withdrawal-type";
 
@@ -42,13 +43,15 @@ export const SettingsWithdrawalView = ({
           </div>
         </div>
 
-        <button
-          type="button"
+        <Button
+          variant="secondary"
+          appearance="fill"
+          size="m"
           onClick={onWithdraw}
-          className="bg-timo-gray-500 typo-headline-b-16 text-timo-gray-700 flex items-center justify-center self-start rounded-[4px] px-5 py-2.5"
+          className="w-20"
         >
           {labels.withdraw}
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
index 8fd210fc..31e5bea4 100644
--- a/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
+++ b/apps/timo-web/app/[locale]/(main)/settings/_containers/account/SettingsLogoutModalContainer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import timoTimerLogo from "@repo/timo-design-system/assets/images/logo/timo-timer.svg";
-import { Modal, PillButton } 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";
 import { useRef } from "react";
@@ -22,12 +22,15 @@ export const SettingsLogoutModalContainer = ({
 
   return (
     <Modal>
-      <PillButton
+      <Button
+        variant="secondary"
+        appearance="fill"
+        size="m"
         onClick={() => modalTriggerRef.current?.click()}
-        className="w-fit"
+        className="w-20"
       >
         {labels.logout}
-      </PillButton>
+      </Button>
       <Modal.Trigger
         ref={modalTriggerRef}
         className="hidden"
diff --git a/apps/timo-web/components/timer/TimerControlButton.tsx b/apps/timo-web/components/timer/TimerControlButton.tsx
index 10197e89..d6a8a904 100644
--- a/apps/timo-web/components/timer/TimerControlButton.tsx
+++ b/apps/timo-web/components/timer/TimerControlButton.tsx
@@ -7,6 +7,7 @@ export type TimerControlButtonVariant = "default" | "active";
 export interface TimerControlButtonProps {
   icon: ReactNode;
   activeIcon?: ReactNode;
+  disabledIcon?: ReactNode;
   label: string;
   variant?: TimerControlButtonVariant;
   onClick?: MouseEventHandler<HTMLButtonElement>;
@@ -16,6 +17,7 @@ export interface TimerControlButtonProps {
 export const TimerControlButton = ({
   icon,
   activeIcon,
+  disabledIcon,
   label,
   variant = "default",
   onClick,
@@ -38,7 +40,9 @@ export const TimerControlButton = ({
             : "bg-timo-gray-300",
       )}
     >
-      {isForcedActive || !activeIcon ? (
+      {disabled && disabledIcon ? (
+        disabledIcon
+      ) : isForcedActive || !activeIcon ? (
         icon
       ) : (
         <>
diff --git a/apps/timo-web/components/timer/TimerControls.tsx b/apps/timo-web/components/timer/TimerControls.tsx
index 10137a19..c654ae96 100644
--- a/apps/timo-web/components/timer/TimerControls.tsx
+++ b/apps/timo-web/components/timer/TimerControls.tsx
@@ -1,10 +1,15 @@
 import {
-  EndBlackIcon,
-  EndBlueIcon,
-  PlayTimerIcon,
-  PlusBlueIcon,
-  PlusIcon,
-  StopIcon,
+  ControlEndActiveIcon,
+  ControlEndDefaultIcon,
+  ControlEndDisabledIcon,
+  ControlPauseActiveIcon,
+  ControlPauseDisabledIcon,
+  ControlPlayActiveIcon,
+  ControlPlayDefaultIcon,
+  ControlPlayDisabledIcon,
+  ControlPlusActiveIcon,
+  ControlPlusDefaultIcon,
+  ControlPlusDisabledIcon,
 } from "@repo/timo-design-system/icons";
 import { Modal } from "@repo/timo-design-system/ui";
 import { useTranslations } from "next-intl";
@@ -39,17 +44,39 @@ export const TimerControls = ({
         disabled={disabled}
         className={MODAL_TRIGGER_CLASS}
       >
-        <span className="group-active:hidden">
-          <EndBlackIcon />
-        </span>
-        <span className="hidden group-active:block">
-          <EndBlueIcon />
-        </span>
+        {disabled ? (
+          <ControlEndDisabledIcon width={35} height={35} />
+        ) : (
+          <>
+            <span className="group-active:hidden">
+              <ControlEndDefaultIcon width={35} height={35} />
+            </span>
+            <span className="hidden group-active:block">
+              <ControlEndActiveIcon width={35} height={35} />
+            </span>
+          </>
+        )}
       </Modal.Trigger>
 
       <TimerControlButton
         icon={
-          isRunning ? <StopIcon width={24} height={24} /> : <PlayTimerIcon />
+          isRunning ? (
+            <ControlPauseActiveIcon width={35} height={35} />
+          ) : (
+            <ControlPlayDefaultIcon width={35} height={35} />
+          )
+        }
+        activeIcon={
+          isRunning ? undefined : (
+            <ControlPlayActiveIcon width={35} height={35} />
+          )
+        }
+        disabledIcon={
+          isRunning ? (
+            <ControlPauseDisabledIcon width={35} height={35} />
+          ) : (
+            <ControlPlayDisabledIcon width={35} height={35} />
+          )
         }
         label={isRunning ? t("pause") : t("play")}
         variant={isRunning ? "active" : "default"}
@@ -63,12 +90,18 @@ export const TimerControls = ({
         disabled={disabled}
         className={MODAL_TRIGGER_CLASS}
       >
-        <span className="group-active:hidden">
-          <PlusIcon width={27} height={27} />
-        </span>
-        <span className="hidden group-active:block">
-          <PlusBlueIcon />
-        </span>
+        {disabled ? (
+          <ControlPlusDisabledIcon width={35} height={35} />
+        ) : (
+          <>
+            <span className="group-active:hidden">
+              <ControlPlusDefaultIcon width={35} height={35} />
+            </span>
+            <span className="hidden group-active:block">
+              <ControlPlusActiveIcon width={35} height={35} />
+            </span>
+          </>
+        )}
       </Modal.Trigger>
     </div>
   );
diff --git a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
index 3ef108b6..b916fa37 100644
--- a/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
+++ b/apps/timo-web/components/todo-modal/detail/DetailTodoTaskFields.tsx
@@ -1,7 +1,7 @@
 import {
+  ControlPauseActiveIcon,
+  ControlPlayActiveIcon,
   PlayDisabledIcon,
-  PlayIcon,
-  StopIcon,
 } from "@repo/timo-design-system/icons";
 import { Checkbox, PlayButton } from "@repo/timo-design-system/ui";
 
@@ -105,9 +105,9 @@ export const DetailTodoTaskFields = ({
             {isCompleted ? (
               <PlayDisabledIcon width={24} height={24} />
             ) : isRunning ? (
-              <StopIcon width={24} height={24} />
+              <ControlPauseActiveIcon width={24} height={24} />
             ) : isPlayHighlighted ? (
-              <PlayIcon width={24} height={24} />
+              <ControlPlayActiveIcon width={24} height={24} />
             ) : (
               <PlayDisabledIcon width={24} height={24} />
             )}
diff --git a/packages/timo-design-system/src/components/button/play-button/PlayButton.stories.tsx b/packages/timo-design-system/src/components/button/play-button/PlayButton.stories.tsx
index 8844b3b6..4219b250 100644
--- a/packages/timo-design-system/src/components/button/play-button/PlayButton.stories.tsx
+++ b/packages/timo-design-system/src/components/button/play-button/PlayButton.stories.tsx
@@ -1,7 +1,7 @@
 import { PlayButton } from "./PlayButton";
-import { PlayIcon } from "../../../icons/generated/Play";
+import { ControlPauseActiveIcon } from "../../../icons/generated/ControlPauseActive";
+import { ControlPlayActiveIcon } from "../../../icons/generated/ControlPlayActive";
 import { PlayDisabledIcon } from "../../../icons/generated/PlayDisabled";
-import { StopIcon } from "../../../icons/generated/Stop";
 
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -47,7 +47,7 @@ export const Play: Story = {
   args: { variant: "play", size: "sm" },
   render: (args) => (
     <PlayButton {...args}>
-      <PlayIcon
+      <ControlPlayActiveIcon
         width={args.size === "lg" ? 24 : 12}
         height={args.size === "lg" ? 24 : 12}
       />
@@ -59,7 +59,7 @@ export const Stop: Story = {
   args: { variant: "stop", size: "sm" },
   render: (args) => (
     <PlayButton {...args}>
-      <StopIcon
+      <ControlPauseActiveIcon
         width={args.size === "lg" ? 24 : 12}
         height={args.size === "lg" ? 24 : 12}
       />
@@ -86,10 +86,10 @@ export const AllVariants: Story = {
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-4">
         <PlayButton variant="play" size="sm">
-          <PlayIcon width={12} height={12} />
+          <ControlPlayActiveIcon width={12} height={12} />
         </PlayButton>
         <PlayButton variant="stop" size="sm">
-          <StopIcon width={12} height={12} />
+          <ControlPauseActiveIcon width={12} height={12} />
         </PlayButton>
         <PlayButton variant="play" size="sm" disabled>
           <PlayDisabledIcon width={12} height={12} />
@@ -97,10 +97,10 @@ export const AllVariants: Story = {
       </div>
       <div className="flex items-center gap-4">
         <PlayButton variant="play" size="lg">
-          <PlayIcon width={24} height={24} />
+          <ControlPlayActiveIcon width={24} height={24} />
         </PlayButton>
         <PlayButton variant="stop" size="lg">
-          <StopIcon width={24} height={24} />
+          <ControlPauseActiveIcon width={24} height={24} />
         </PlayButton>
         <PlayButton variant="play" size="lg" disabled>
           <PlayDisabledIcon width={24} height={24} />
diff --git a/packages/timo-design-system/src/icons/source/control-end-active.svg b/packages/timo-design-system/src/icons/source/control-end-active.svg
new file mode 100644
index 00000000..6fce9b56
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-end-active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 5.45455V18.5455C20 18.9312 19.8468 19.3012 19.574 19.574C19.3012 19.8468 18.9312 20 18.5455 20H5.45455C5.06878 20 4.69881 19.8468 4.42603 19.574C4.15325 19.3012 4 18.9312 4 18.5455V5.45455C4 5.06878 4.15325 4.69881 4.42603 4.42603C4.69881 4.15325 5.06878 4 5.45455 4H18.5455C18.9312 4 19.3012 4.15325 19.574 4.42603C19.8468 4.69881 20 5.06878 20 5.45455Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-end-default.svg b/packages/timo-design-system/src/icons/source/control-end-default.svg
new file mode 100644
index 00000000..c168f406
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-end-default.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 5.45455V18.5455C20 18.9312 19.8468 19.3012 19.574 19.574C19.3012 19.8468 18.9312 20 18.5455 20H5.45455C5.06878 20 4.69881 19.8468 4.42603 19.574C4.15325 19.3012 4 18.9312 4 18.5455V5.45455C4 5.06878 4.15325 4.69881 4.42603 4.42603C4.69881 4.15325 5.06878 4 5.45455 4H18.5455C18.9312 4 19.3012 4.15325 19.574 4.42603C19.8468 4.69881 20 5.06878 20 5.45455Z" fill="#3F3F3F" style="fill:#3F3F3F;fill:color(display-p3 0.2489 0.2489 0.2489);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-end-disabled.svg b/packages/timo-design-system/src/icons/source/control-end-disabled.svg
new file mode 100644
index 00000000..eb7af556
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-end-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 5.45455V18.5455C20 18.9312 19.8468 19.3012 19.574 19.574C19.3012 19.8468 18.9312 20 18.5455 20H5.45455C5.06878 20 4.69881 19.8468 4.42603 19.574C4.15325 19.3012 4 18.9312 4 18.5455V5.45455C4 5.06878 4.15325 4.69881 4.42603 4.42603C4.69881 4.15325 5.06878 4 5.45455 4H18.5455C18.9312 4 19.3012 4.15325 19.574 4.42603C19.8468 4.69881 20 5.06878 20 5.45455Z" fill="#9F9F9F" style="fill:#9F9F9F;fill:color(display-p3 0.6235 0.6235 0.6235);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-pause-active.svg b/packages/timo-design-system/src/icons/source/control-pause-active.svg
new file mode 100644
index 00000000..7b34c27d
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-pause-active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4.5V19.5C19 19.8978 18.8659 20.2794 18.6272 20.5607C18.3885 20.842 18.0648 21 17.7273 21H14.5455C14.2079 21 13.8842 20.842 13.6455 20.5607C13.4068 20.2794 13.2727 19.8978 13.2727 19.5V4.5C13.2727 4.10218 13.4068 3.72064 13.6455 3.43934C13.8842 3.15804 14.2079 3 14.5455 3H17.7273C18.0648 3 18.3885 3.15804 18.6272 3.43934C18.8659 3.72064 19 4.10218 19 4.5ZM9.45455 3H6.27273C5.93518 3 5.61146 3.15804 5.37277 3.43934C5.13409 3.72064 5 4.10218 5 4.5V19.5C5 19.8978 5.13409 20.2794 5.37277 20.5607C5.61146 20.842 5.93518 21 6.27273 21H9.45455C9.79209 21 10.1158 20.842 10.3545 20.5607C10.5932 20.2794 10.7273 19.8978 10.7273 19.5V4.5C10.7273 4.10218 10.5932 3.72064 10.3545 3.43934C10.1158 3.15804 9.79209 3 9.45455 3Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-pause-default.svg b/packages/timo-design-system/src/icons/source/control-pause-default.svg
new file mode 100644
index 00000000..56640cb8
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-pause-default.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4.5V19.5C19 19.8978 18.8659 20.2794 18.6272 20.5607C18.3885 20.842 18.0648 21 17.7273 21H14.5455C14.2079 21 13.8842 20.842 13.6455 20.5607C13.4068 20.2794 13.2727 19.8978 13.2727 19.5V4.5C13.2727 4.10218 13.4068 3.72064 13.6455 3.43934C13.8842 3.15804 14.2079 3 14.5455 3H17.7273C18.0648 3 18.3885 3.15804 18.6272 3.43934C18.8659 3.72064 19 4.10218 19 4.5ZM9.45455 3H6.27273C5.93518 3 5.61146 3.15804 5.37277 3.43934C5.13409 3.72064 5 4.10218 5 4.5V19.5C5 19.8978 5.13409 20.2794 5.37277 20.5607C5.61146 20.842 5.93518 21 6.27273 21H9.45455C9.79209 21 10.1158 20.842 10.3545 20.5607C10.5932 20.2794 10.7273 19.8978 10.7273 19.5V4.5C10.7273 4.10218 10.5932 3.72064 10.3545 3.43934C10.1158 3.15804 9.79209 3 9.45455 3Z" fill="#3F3F3F" style="fill:#3F3F3F;fill:color(display-p3 0.2489 0.2489 0.2489);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-pause-disabled.svg b/packages/timo-design-system/src/icons/source/control-pause-disabled.svg
new file mode 100644
index 00000000..b08b025e
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-pause-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 4.5V19.5C19 19.8978 18.8659 20.2794 18.6272 20.5607C18.3885 20.842 18.0648 21 17.7273 21H14.5455C14.2079 21 13.8842 20.842 13.6455 20.5607C13.4068 20.2794 13.2727 19.8978 13.2727 19.5V4.5C13.2727 4.10218 13.4068 3.72064 13.6455 3.43934C13.8842 3.15804 14.2079 3 14.5455 3H17.7273C18.0648 3 18.3885 3.15804 18.6272 3.43934C18.8659 3.72064 19 4.10218 19 4.5ZM9.45455 3H6.27273C5.93518 3 5.61146 3.15804 5.37277 3.43934C5.13409 3.72064 5 4.10218 5 4.5V19.5C5 19.8978 5.13409 20.2794 5.37277 20.5607C5.61146 20.842 5.93518 21 6.27273 21H9.45455C9.79209 21 10.1158 20.842 10.3545 20.5607C10.5932 20.2794 10.7273 19.8978 10.7273 19.5V4.5C10.7273 4.10218 10.5932 3.72064 10.3545 3.43934C10.1158 3.15804 9.79209 3 9.45455 3Z" fill="#9F9F9F" style="fill:#9F9F9F;fill:color(display-p3 0.6235 0.6235 0.6235);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-play-active.svg b/packages/timo-design-system/src/icons/source/control-play-active.svg
new file mode 100644
index 00000000..a8c19986
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-play-active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21.0006 12.2351 20.9412 12.4662 20.8277 12.6711C20.7142 12.876 20.5504 13.0475 20.3523 13.1691L8.07273 20.7962C7.8657 20.9249 7.62858 20.9952 7.38586 20.9998C7.14314 21.0043 6.90363 20.943 6.69205 20.8222C6.48248 20.7032 6.30791 20.5297 6.18628 20.3195C6.06465 20.1093 6.00035 19.87 6 19.6263V4.37373C6.00035 4.12995 6.06465 3.89067 6.18628 3.68048C6.30791 3.47029 6.48248 3.2968 6.69205 3.17783C6.90363 3.05698 7.14314 2.99567 7.38586 3.00024C7.62858 3.0048 7.8657 3.07507 8.07273 3.20379L20.3523 10.8309C20.5504 10.9525 20.7142 11.124 20.8277 11.3289C20.9412 11.5338 21.0006 11.7649 21 12Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-play-default.svg b/packages/timo-design-system/src/icons/source/control-play-default.svg
new file mode 100644
index 00000000..66dd3235
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-play-default.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21.0006 12.235 20.9412 12.4662 20.8277 12.6711C20.7142 12.876 20.5504 13.0475 20.3523 13.1691L8.07274 20.7962C7.86572 20.9249 7.6286 20.9952 7.38588 20.9997C7.14316 21.0043 6.90364 20.943 6.69206 20.8222C6.4825 20.7032 6.30792 20.5297 6.18629 20.3195C6.06466 20.1093 6.00037 19.87 6.00002 19.6263V4.37372C6.00037 4.12994 6.06466 3.89065 6.18629 3.68047C6.30792 3.47028 6.4825 3.29678 6.69206 3.17781C6.90364 3.05697 7.14316 2.99566 7.38588 3.00022C7.6286 3.00479 7.86572 3.07506 8.07274 3.20377L20.3523 10.8309C20.5504 10.9525 20.7142 11.124 20.8277 11.3289C20.9412 11.5337 21.0006 11.7649 21 12Z" fill="#3F3F3F" style="fill:#3F3F3F;fill:color(display-p3 0.2489 0.2489 0.2489);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-play-disabled.svg b/packages/timo-design-system/src/icons/source/control-play-disabled.svg
new file mode 100644
index 00000000..1291fc7a
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-play-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 12C21.0006 12.235 20.9412 12.4662 20.8277 12.6711C20.7142 12.876 20.5504 13.0475 20.3523 13.1691L8.07274 20.7962C7.86572 20.9249 7.6286 20.9952 7.38588 20.9997C7.14316 21.0043 6.90364 20.943 6.69206 20.8222C6.4825 20.7032 6.30792 20.5297 6.18629 20.3195C6.06466 20.1093 6.00037 19.87 6.00002 19.6263V4.37372C6.00037 4.12994 6.06466 3.89065 6.18629 3.68047C6.30792 3.47028 6.4825 3.29678 6.69206 3.17781C6.90364 3.05697 7.14316 2.99566 7.38588 3.00022C7.6286 3.00479 7.86572 3.07506 8.07274 3.20377L20.3523 10.8309C20.5504 10.9525 20.7142 11.124 20.8277 11.3289C20.9412 11.5337 21.0006 11.7649 21 12Z" fill="#9F9F9F" style="fill:#9F9F9F;fill:color(display-p3 0.6235 0.6235 0.6235);fill-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-plus-active.svg b/packages/timo-design-system/src/icons/source/control-plus-active.svg
new file mode 100644
index 00000000..1f83e6cb
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-plus-active.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1153 3.50586C12.3824 3.53237 12.6338 3.65034 12.8252 3.8418C13.0439 4.06057 13.167 4.35765 13.167 4.66699V10.833H19.3331C19.6424 10.833 19.9395 10.9561 20.1583 11.1748C20.377 11.3936 20.5001 11.6906 20.5001 12C20.5001 12.3094 20.3771 12.6064 20.1583 12.8252C19.9395 13.0439 19.6424 13.167 19.3331 13.167H13.167V19.333C13.167 19.6423 13.0439 19.9394 12.8252 20.1582C12.6065 20.377 12.3095 20.5 12.0001 20.5C11.6906 20.5 11.3937 20.377 11.1749 20.1582C10.9562 19.9394 10.8331 19.6423 10.8331 19.333V13.167H4.66705C4.3577 13.167 4.06063 13.0439 3.84185 12.8252C3.62306 12.6064 3.50005 12.3094 3.50005 12C3.50005 11.6906 3.62306 11.3936 3.84185 11.1748C4.06063 10.9561 4.3577 10.833 4.66705 10.833H10.8331V4.66699C10.8331 4.35765 10.9562 4.06057 11.1749 3.8418C11.3937 3.623 11.6906 3.5 12.0001 3.5L12.1153 3.50586Z" fill="#74A0F8" stroke="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;stroke:#74A0F8;stroke:color(display-p3 0.4549 0.6275 0.9725);stroke-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-plus-default.svg b/packages/timo-design-system/src/icons/source/control-plus-default.svg
new file mode 100644
index 00000000..bbdec7d0
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-plus-default.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1153 3.50586C12.3824 3.53237 12.6338 3.65034 12.8253 3.8418C13.0439 4.06057 13.1671 4.35765 13.1671 4.66699V10.833H19.3331C19.6424 10.833 19.9395 10.9561 20.1583 11.1748C20.3771 11.3936 20.5001 11.6906 20.5001 12C20.5001 12.3094 20.3771 12.6064 20.1583 12.8252C19.9395 13.0439 19.6424 13.167 19.3331 13.167H13.1671V19.333C13.1671 19.6423 13.0439 19.9394 12.8253 20.1582C12.6065 20.377 12.3095 20.5 12.0001 20.5C11.6906 20.5 11.3937 20.377 11.1749 20.1582C10.9562 19.9394 10.8331 19.6423 10.8331 19.333V13.167H4.66705C4.35771 13.167 4.06064 13.0439 3.84186 12.8252C3.62306 12.6064 3.50006 12.3094 3.50006 12C3.50006 11.6906 3.62307 11.3936 3.84186 11.1748C4.06063 10.9561 4.35771 10.833 4.66705 10.833H10.8331V4.66699C10.8331 4.35765 10.9562 4.06057 11.1749 3.8418C11.3937 3.623 11.6906 3.5 12.0001 3.5L12.1153 3.50586Z" fill="#3F3F3F" stroke="#3F3F3F" style="fill:#3F3F3F;fill:color(display-p3 0.2489 0.2489 0.2489);fill-opacity:1;stroke:#3F3F3F;stroke:color(display-p3 0.2489 0.2489 0.2489);stroke-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/control-plus-disabled.svg b/packages/timo-design-system/src/icons/source/control-plus-disabled.svg
new file mode 100644
index 00000000..da29df39
--- /dev/null
+++ b/packages/timo-design-system/src/icons/source/control-plus-disabled.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1153 3.50586C12.3824 3.53237 12.6338 3.65034 12.8253 3.8418C13.0439 4.06057 13.1671 4.35765 13.1671 4.66699V10.833H19.3331C19.6424 10.833 19.9395 10.9561 20.1583 11.1748C20.3771 11.3936 20.5001 11.6906 20.5001 12C20.5001 12.3094 20.3771 12.6064 20.1583 12.8252C19.9395 13.0439 19.6424 13.167 19.3331 13.167H13.1671V19.333C13.1671 19.6423 13.0439 19.9394 12.8253 20.1582C12.6065 20.377 12.3095 20.5 12.0001 20.5C11.6906 20.5 11.3937 20.377 11.1749 20.1582C10.9562 19.9394 10.8331 19.6423 10.8331 19.333V13.167H4.66705C4.35771 13.167 4.06064 13.0439 3.84186 12.8252C3.62306 12.6064 3.50006 12.3094 3.50006 12C3.50006 11.6906 3.62307 11.3936 3.84186 11.1748C4.06063 10.9561 4.35771 10.833 4.66705 10.833H10.8331V4.66699C10.8331 4.35765 10.9562 4.06057 11.1749 3.8418C11.3937 3.623 11.6906 3.5 12.0001 3.5L12.1153 3.50586Z" fill="#9F9F9F" stroke="#9F9F9F" style="fill:#9F9F9F;fill:color(display-p3 0.6235 0.6235 0.6235);fill-opacity:1;stroke:#9F9F9F;stroke:color(display-p3 0.6235 0.6235 0.6235);stroke-opacity:1;"/>
+</svg>
diff --git a/packages/timo-design-system/src/icons/source/end-black.svg b/packages/timo-design-system/src/icons/source/end-black.svg
deleted file mode 100644
index 4cc69b64..00000000
--- a/packages/timo-design-system/src/icons/source/end-black.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 4.63636V19.3636C21 19.7976 20.8276 20.2138 20.5207 20.5207C20.2138 20.8276 19.7976 21 19.3636 21H4.63636C4.20237 21 3.78616 20.8276 3.47928 20.5207C3.1724 20.2138 3 19.7976 3 19.3636V4.63636C3 4.20237 3.1724 3.78616 3.47928 3.47928C3.78616 3.1724 4.20237 3 4.63636 3H19.3636C19.7976 3 20.2138 3.1724 20.5207 3.47928C20.8276 3.78616 21 4.20237 21 4.63636Z" fill="#3F3F3F" style="fill:#3F3F3F;fill:color(display-p3 0.2489 0.2489 0.2489);fill-opacity:1;"/>
-</svg>
diff --git a/packages/timo-design-system/src/icons/source/end-blue.svg b/packages/timo-design-system/src/icons/source/end-blue.svg
deleted file mode 100644
index c538db3c..00000000
--- a/packages/timo-design-system/src/icons/source/end-blue.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 4.63636V19.3636C21 19.7976 20.8276 20.2138 20.5207 20.5207C20.2138 20.8276 19.7976 21 19.3636 21H4.63636C4.20237 21 3.78616 20.8276 3.47928 20.5207C3.1724 20.2138 3 19.7976 3 19.3636V4.63636C3 4.20237 3.1724 3.78616 3.47928 3.47928C3.78616 3.1724 4.20237 3 4.63636 3H19.3636C19.7976 3 20.2138 3.1724 20.5207 3.47928C20.8276 3.78616 21 4.20237 21 4.63636Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
-</svg>
diff --git a/packages/timo-design-system/src/icons/source/play.svg b/packages/timo-design-system/src/icons/source/play.svg
deleted file mode 100644
index 3037e424..00000000
--- a/packages/timo-design-system/src/icons/source/play.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.25 5.99999C11.2503 6.12731 11.2177 6.25255 11.1552 6.36352C11.0928 6.4745 11.0027 6.56742 10.8937 6.63327L4.14 10.7648C4.02613 10.8346 3.89572 10.8726 3.76222 10.8751C3.62873 10.8776 3.49699 10.8444 3.38063 10.7789C3.26536 10.7145 3.16935 10.6205 3.10245 10.5066C3.03556 10.3928 3.00019 10.2631 3 10.1311V1.8689C3.00019 1.73684 3.03556 1.60722 3.10245 1.49337C3.16935 1.37951 3.26536 1.28553 3.38063 1.22108C3.49699 1.15562 3.62873 1.12241 3.76222 1.12488C3.89572 1.12736 4.02613 1.16542 4.14 1.23515L10.8937 5.36671C11.0027 5.43255 11.0928 5.52548 11.1552 5.63645C11.2177 5.74743 11.2503 5.87266 11.25 5.99999Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
-</svg>
diff --git a/packages/timo-design-system/src/icons/source/stop.svg b/packages/timo-design-system/src/icons/source/stop.svg
deleted file mode 100644
index 64ebe72f..00000000
--- a/packages/timo-design-system/src/icons/source/stop.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 1.83333V10.1667C10 10.3877 9.92338 10.5996 9.78699 10.7559C9.6506 10.9122 9.46561 11 9.27273 11H7.45455C7.26166 11 7.07668 10.9122 6.94029 10.7559C6.8039 10.5996 6.72727 10.3877 6.72727 10.1667V1.83333C6.72727 1.61232 6.8039 1.40036 6.94029 1.24408C7.07668 1.0878 7.26166 1 7.45455 1H9.27273C9.46561 1 9.6506 1.0878 9.78699 1.24408C9.92338 1.40036 10 1.61232 10 1.83333ZM4.54545 1H2.72727C2.53439 1 2.3494 1.0878 2.21301 1.24408C2.07662 1.40036 2 1.61232 2 1.83333V10.1667C2 10.3877 2.07662 10.5996 2.21301 10.7559C2.3494 10.9122 2.53439 11 2.72727 11H4.54545C4.73834 11 4.92332 10.9122 5.05971 10.7559C5.1961 10.5996 5.27273 10.3877 5.27273 10.1667V1.83333C5.27273 1.61232 5.1961 1.40036 5.05971 1.24408C4.92332 1.0878 4.73834 1 4.54545 1Z" fill="#74A0F8" style="fill:#74A0F8;fill:color(display-p3 0.4549 0.6275 0.9725);fill-opacity:1;"/>
-</svg>