diff --git a/packages/ui/Button/Button.tsx b/packages/ui/Button/Button.tsx
index bc7d017..2dc12fa 100644
--- a/packages/ui/Button/Button.tsx
+++ b/packages/ui/Button/Button.tsx
@@ -1,8 +1,9 @@
 import React, { type ButtonHTMLAttributes } from 'react';
 import * as S from './style.css';
 import createButtonVariant from './utils';
+import { iconSizes } from './constants';
 
-interface IconProps { color?: string }
+interface IconProps { color?: string, width: number, height: number }
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: React.ReactNode;
@@ -25,14 +26,15 @@ function Button({
   ...buttonElementProps
 }: ButtonProps) {
   const variant = createButtonVariant(theme, rounded, size);
+  const iconSize = iconSizes[size];
   return (
     <button className={`${S.root} ${variant} ${className}`}
       type="button"
       {...buttonElementProps}
     >
-      {LeftIcon ? <LeftIcon /> : null}
+      {LeftIcon ? <LeftIcon height={iconSize} width={iconSize} /> : null}
       <span>{children}</span>
-      {RightIcon ? <RightIcon /> : null}
+      {(RightIcon && !LeftIcon) ? <RightIcon height={iconSize} width={iconSize} /> : null}
     </button>
   );
 }
diff --git a/packages/ui/Button/constants.ts b/packages/ui/Button/constants.ts
index 69f1af1..1859fe1 100644
--- a/packages/ui/Button/constants.ts
+++ b/packages/ui/Button/constants.ts
@@ -1,23 +1,19 @@
-import theme from '../theme.css';
-import type {
-  ButtonColorTheme,
-  ButtonColorThemeWithStatus,
-  ButtonSizeTheme,
-} from './types';
+import theme from "../theme.css";
+import type { ButtonColorTheme, ButtonColorThemeWithStatus, ButtonSizeTheme } from "./types";
 
 export const bgColors: Record<ButtonColorThemeWithStatus, string> = {
-  'white-default': theme.colors.white,
-  'black-default': theme.colors.gray700,
-  'blue-default': theme.colors.success,
-  'red-default': theme.colors.error,
-  'white-hover': theme.colors.gray50,
-  'black-hover': theme.colors.gray600,
-  'blue-hover': theme.colors.blue500,
-  'red-hover': theme.colors.red500,
-  'white-press': theme.colors.gray100,
-  'black-press': theme.colors.gray500,
-  'blue-press': theme.colors.blue600,
-  'red-press': theme.colors.red600,
+  "white-default": theme.colors.white,
+  "black-default": theme.colors.gray700,
+  "blue-default": theme.colors.success,
+  "red-default": theme.colors.error,
+  "white-hover": theme.colors.gray50,
+  "black-hover": theme.colors.gray600,
+  "blue-hover": theme.colors.blue500,
+  "red-hover": theme.colors.red500,
+  "white-press": theme.colors.gray100,
+  "black-press": theme.colors.gray500,
+  "blue-press": theme.colors.blue600,
+  "red-press": theme.colors.red600,
 };
 
 export const textColors = {
@@ -25,28 +21,33 @@ export const textColors = {
   dark: theme.colors.gray800,
 };
 
-export const colorThemeToTextColor: Record<ButtonColorTheme, 'light' | 'dark'> =
-  {
-    white: 'dark',
-    black: 'light',
-    red: 'light',
-    blue: 'light',
-  };
+export const colorThemeToTextColor: Record<ButtonColorTheme, "light" | "dark"> = {
+  white: "dark",
+  black: "light",
+  red: "light",
+  blue: "light",
+};
 
 export const borderRadiuses: Record<ButtonSizeTheme, string> = {
-  sm: '8px',
-  md: '10px',
-  lg: '12px',
+  sm: "8px",
+  md: "10px",
+  lg: "12px",
 };
 
 export const paddings: Record<ButtonSizeTheme, string> = {
-  sm: '9px 14px',
-  md: '12px 20px',
-  lg: '16px 26px',
+  sm: "9px 14px",
+  md: "12px 20px",
+  lg: "16px 26px",
 };
 
 export const fontSizes: Record<ButtonSizeTheme, string> = {
-  sm: '14px',
-  md: '14px',
-  lg: '18px',
+  sm: "14px",
+  md: "14px",
+  lg: "18px",
+};
+
+export const iconSizes: Record<ButtonSizeTheme, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
 };
diff --git a/packages/ui/Control/CheckBox.tsx b/packages/ui/Control/CheckBox.tsx
index f35e82e..3a2777f 100644
--- a/packages/ui/Control/CheckBox.tsx
+++ b/packages/ui/Control/CheckBox.tsx
@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from "react";
 import { forwardRef } from "react";
 import { IconCheck } from "@sopt-makers/icons";
+import theme from "../theme.css";
 import {
   check,
   checkBox,
@@ -8,7 +9,6 @@ import {
   checkBoxInput,
   controlLabel,
   controlWrapper,
-  labelColor,
 } from "./style.css";
 
 export interface CheckBoxProps
@@ -16,11 +16,11 @@ export interface CheckBoxProps
   label?: string;
   size?: "sm" | "lg";
   checked?: boolean;
-  color?: "white";
+  color?: string;
 }
 
 const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
     return (
       <label className={controlWrapper}>
         <input className={checkBoxInput} ref={ref} type="checkbox" {...props} />
@@ -28,7 +28,7 @@ const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
           {checked ? <IconCheck className={check[size]} /> : null}
         </div>
         {label ? (
-          <p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
+          <p className={controlLabel[size]} style={{ color }}>{label}</p>
         ) : null}
       </label>
     );
diff --git a/packages/ui/Control/Radio.tsx b/packages/ui/Control/Radio.tsx
index e1474d1..0d21ad3 100644
--- a/packages/ui/Control/Radio.tsx
+++ b/packages/ui/Control/Radio.tsx
@@ -1,17 +1,18 @@
 import type { InputHTMLAttributes } from "react";
 import { forwardRef } from "react";
-import { controlLabel, controlWrapper, labelColor, radio } from "./style.css";
+import theme from "../theme.css";
+import { controlLabel, controlWrapper, radio } from "./style.css";
 
 export interface RadioProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   label?: string;
   size?: "sm" | "lg";
   checked?: boolean;
-  color?: "white";
+  color?: string;
 }
 
 const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ checked = false, label, size = "sm", color = "white", ...props }, ref) => {
+  ({ checked = false, label, size = "sm", color = theme.colors.gray10, ...props }, ref) => {
     return (
       <label className={controlWrapper}>
         <input
@@ -22,7 +23,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(
           {...props}
         />
         {label ? (
-          <p className={`${controlLabel[size]} ${labelColor[color]}`}>label</p>
+          <p className={controlLabel[size]} style={{ color }}>label</p>
         ) : null}
       </label>
     );
diff --git a/packages/ui/Control/style.css.ts b/packages/ui/Control/style.css.ts
index a0fda28..e488dad 100644
--- a/packages/ui/Control/style.css.ts
+++ b/packages/ui/Control/style.css.ts
@@ -24,12 +24,6 @@ export const controlLabel = styleVariants({
   ],
 });
 
-export const labelColor = styleVariants({
-  white: {
-    color: theme.colors.gray10,
-  },
-});
-
 // Radio 관련 스타일링
 const radioBase = style({
   all: "unset",
diff --git a/packages/ui/Toast/parts/style.css.ts b/packages/ui/Toast/parts/style.css.ts
index ad0ac99..d710ba0 100644
--- a/packages/ui/Toast/parts/style.css.ts
+++ b/packages/ui/Toast/parts/style.css.ts
@@ -7,7 +7,7 @@ const toastAnimation = keyframes({
 });
 
 export const root = style({
-  animation: `${toastAnimation} 4s`,
+  animation: `${toastAnimation} 3s`,
   animationFillMode: "forwards",
 
   display: "flex",
@@ -19,7 +19,7 @@ export const root = style({
   left: "calc(50% - 16px)",
   transform: "translateX(-50%)",
   transition: "transform .2s linear",
-  
+
   width: "var(--mds-toast-width, 380px)",
   margin: "0 16px",
   padding: "14px 16px",