diff --git a/public/icons/checked_box.svg b/public/icons/checked_box.svg
index f023861e..f6cad01c 100644
--- a/public/icons/checked_box.svg
+++ b/public/icons/checked_box.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><rect width="18" height="18" x="1" y="1" fill="#0047FF" rx="3"/><rect width="18" height="18" x="1" y="1" stroke="#0047FF" stroke-width="2" rx="3"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.333 6 8 13.333 4.667 10"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><rect width="18" height="18" x="1" y="1" fill="#0047FF" rx="3"/><rect width="18" height="18" x="1" y="1" stroke="#3D95FF" stroke-width="2" rx="3"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.333 6 8 13.333 4.667 10"/></svg>
\ No newline at end of file
diff --git a/public/icons/unchecked_box.svg b/public/icons/unchecked_box.svg
index ce6e52fb..212c908e 100644
--- a/public/icons/unchecked_box.svg
+++ b/public/icons/unchecked_box.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><rect width="18" height="18" x="1" y="1" stroke="#AFB1B6" stroke-width="2" rx="3"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"><rect width="18" height="18" x="1" y="1" stroke="#8599AD" stroke-width="2" rx="3"/></svg>
\ No newline at end of file
diff --git a/src/app/account/withdraw/_component/AgreementConfirmation.css.ts b/src/app/account/withdraw/_component/AgreementConfirmation.css.ts
index 70f7c4ba..26fc6e35 100644
--- a/src/app/account/withdraw/_component/AgreementConfirmation.css.ts
+++ b/src/app/account/withdraw/_component/AgreementConfirmation.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
-import * as fonts from '@/styles/__font.css';
+import { vars } from '@/styles/theme.css';
+import * as fonts from '@/styles/font.css';
 
 export const wrapper = style({
   display: 'flex',
@@ -10,7 +10,7 @@ export const wrapper = style({
 });
 
 export const agreement = style([
-  fonts.bodyMedium,
+  fonts.Label,
   {
     padding: '0px 10px 22px',
 
@@ -19,14 +19,14 @@ export const agreement = style([
     alignContent: 'center',
     gap: 8,
 
-    color: vars.color.gray9,
+    color: vars.color.bluegray10,
 
-    borderBottom: `1px solid ${vars.color.gray7} `,
+    borderBottom: `1px solid ${vars.color.bluegray8} `,
   },
 ]);
 
 export const confirmButton = style([
-  fonts.bodyMedium,
+  fonts.Body,
   {
     padding: '8px 32px ',
     backgroundColor: vars.color.blue,
@@ -35,8 +35,8 @@ export const confirmButton = style([
 
     selectors: {
       '&:disabled': {
-        backgroundColor: vars.color.gray5,
-        color: vars.color.gray7,
+        backgroundColor: vars.color.white,
+        color: vars.color.bluegray8,
       },
     },
   },
diff --git a/src/app/account/withdraw/_component/AgreementConfirmation.tsx b/src/app/account/withdraw/_component/AgreementConfirmation.tsx
index 9bd7887b..55d2685b 100644
--- a/src/app/account/withdraw/_component/AgreementConfirmation.tsx
+++ b/src/app/account/withdraw/_component/AgreementConfirmation.tsx
@@ -2,12 +2,13 @@
 
 import useBooleanOutput from '@/hooks/useBooleanOutput';
 
+import { accountLocale } from '@/app/account/locale';
+import { useLanguage } from '@/store/useLanguage';
+import WithdrawalButton from './WithdrawalButton';
+
 import UncheckedBox from '/public/icons/unchecked_box.svg';
 import CheckedBox from '/public/icons/checked_box.svg';
-import WithdrawalButton from './WithdrawalButton';
 import * as styles from './AgreementConfirmation.css';
-import { accountLocale } from '@/app/account/locale';
-import { useLanguage } from '@/store/useLanguage';
 
 export default function AgreementConfirmationButton() {
   const { language } = useLanguage();
@@ -15,7 +16,7 @@ export default function AgreementConfirmationButton() {
   return (
     <section className={styles.wrapper}>
       <div className={styles.agreement}>
-        <div onClick={toggle}>{!isOn ? <UncheckedBox /> : <CheckedBox />}</div>
+        <div onClick={toggle}>{!isOn ? <UncheckedBox /> : <CheckedBox fill="#3D95FF" />}</div>
         <p>{accountLocale[language].withdrawMessage}</p>
       </div>
       <WithdrawalButton isDisabled={!isOn} />
diff --git a/src/app/account/withdraw/_component/WithdrawalButton.tsx b/src/app/account/withdraw/_component/WithdrawalButton.tsx
index 550a90e3..52b56fbe 100644
--- a/src/app/account/withdraw/_component/WithdrawalButton.tsx
+++ b/src/app/account/withdraw/_component/WithdrawalButton.tsx
@@ -3,16 +3,16 @@
 import { useRouter } from 'next/navigation';
 import { useMutation } from '@tanstack/react-query';
 
-import Modal from '@/components/Modal/Modal';
-import useBooleanOutput from '@/hooks/useBooleanOutput';
 import withdraw from '@/app/_api/user/withdraw';
+import { accountLocale } from '@/app/account/locale';
 import toasting from '@/lib/utils/toasting';
 import { removeCookie } from '@/lib/utils/cookie';
 import toastMessage from '@/lib/constants/toastMessage';
+import useBooleanOutput from '@/hooks/useBooleanOutput';
 import { useUser } from '@/store/useUser';
-import * as styles from './AgreementConfirmation.css';
 import { useLanguage } from '@/store/useLanguage';
-import { accountLocale } from '@/app/account/locale';
+import Modal from '@/components/Modal/Modal';
+import * as styles from './AgreementConfirmation.css';
 
 interface WithdrawalButtonProps {
   isDisabled: boolean;
diff --git a/src/app/account/withdraw/_component/WithdrawalNotice.css.ts b/src/app/account/withdraw/_component/WithdrawalNotice.css.ts
index f8fe96d5..eef32b9c 100644
--- a/src/app/account/withdraw/_component/WithdrawalNotice.css.ts
+++ b/src/app/account/withdraw/_component/WithdrawalNotice.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import * as fonts from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
+import * as fonts from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
 export const wrapper = style({
   display: 'flex',
@@ -9,24 +9,25 @@ export const wrapper = style({
   gap: 18,
 });
 
-export const title = style([fonts.titleLarge]);
+export const title = style([fonts.Header]);
 
 export const warning = style([
-  fonts.titleRegular,
+  fonts.Subtitle,
   {
     color: vars.color.red,
   },
 ]);
 
 export const detailBox = style([
-  fonts.bodyMedium,
+  fonts.Label,
   {
-    margin: '20px 35px',
-    padding: '18px 12px',
+    margin: '20px 30px 30px',
+    padding: '18px 16px',
 
+    lineHeight: '150%',
+    color: vars.color.bluegray10,
     backgroundColor: vars.color.white,
-    color: vars.color.gray9,
-    borderRadius: 10,
+    borderRadius: '2rem',
   },
 ]);
 
diff --git a/src/app/account/withdraw/_component/WithdrawalNotice.tsx b/src/app/account/withdraw/_component/WithdrawalNotice.tsx
index 1cd9c11e..06ed341e 100644
--- a/src/app/account/withdraw/_component/WithdrawalNotice.tsx
+++ b/src/app/account/withdraw/_component/WithdrawalNotice.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import LogoCircle from '/public/icons/logo_circle.svg';
-import * as styles from './WithdrawalNotice.css';
 import { accountLocale } from '@/app/account/locale';
 import { useLanguage } from '@/store/useLanguage';
+import LogoCircle from '/public/icons/logo_circle.svg';
+import * as styles from './WithdrawalNotice.css';
 
 export default function WithdrawalNotice() {
   const { language } = useLanguage();
diff --git a/src/app/account/withdraw/page.css.ts b/src/app/account/withdraw/page.css.ts
index d4c64458..f0f1c15e 100644
--- a/src/app/account/withdraw/page.css.ts
+++ b/src/app/account/withdraw/page.css.ts
@@ -9,6 +9,4 @@ export const page = style({
 export const main = style({
   height: '100%',
   padding: '30px 0',
-
-  backgroundColor: vars.color.gray3,
 });
diff --git a/src/components/Modal/Modal.css.ts b/src/components/Modal/Modal.css.ts
index 219606df..295ae1b0 100644
--- a/src/components/Modal/Modal.css.ts
+++ b/src/components/Modal/Modal.css.ts
@@ -1,6 +1,7 @@
 import { style, styleVariants, ComplexStyleRule } from '@vanilla-extract/css';
-import { vars } from '@/styles/__theme.css';
+import { vars } from '@/styles/theme.css';
 
+//TODO: 공용모달 ver3.0 새디자인 필요
 export const background = style({
   margin: 'auto',
   width: '100vw',
diff --git a/src/components/Modal/ModalButton.css.ts b/src/components/Modal/ModalButton.css.ts
index 988453a9..23eb5539 100644
--- a/src/components/Modal/ModalButton.css.ts
+++ b/src/components/Modal/ModalButton.css.ts
@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { body3 } from '@/styles/__font.css';
-import { vars } from '@/styles/__theme.css';
+import { Label } from '@/styles/font.css';
+import { vars } from '@/styles/theme.css';
 
 export const buttonContainer = style({
   width: '100%',
@@ -11,7 +11,7 @@ export const buttonContainer = style({
 });
 
 export const baseButton = style([
-  body3,
+  Label,
   {
     padding: '10px 16px',
 
@@ -36,15 +36,15 @@ export const button = styleVariants({
   secondary: [
     baseButton,
     {
-      backgroundColor: vars.color.blueGray,
+      backgroundColor: vars.color.whiteblue,
       color: vars.color.blue,
     },
   ],
   disabled: [
     baseButton,
     {
-      backgroundColor: vars.color.gray7,
-      color: vars.color.white,
+      backgroundColor: vars.color.white,
+      color: vars.color.bluegray8,
 
       cursor: 'default',
     },