diff --git a/src/assets/icons/CallIcon.svg b/src/assets/icons/CallIcon.svg
new file mode 100644
index 00000000..d0862ca2
--- /dev/null
+++ b/src/assets/icons/CallIcon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="18" viewBox="0 0 19 18" fill="none">
+  <path d="M9.89648 9.8266C9.27492 9.20504 9.24746 9.17836 9.24746 9.17836C8.05677 7.94336 7.4183 7.18552 6.72529 6.2111L6.57959 6.00439L7.27437 5.26262L7.29057 5.24577C7.33148 5.20117 7.39305 5.12022 7.45282 5.01576L7.48118 4.964C7.74494 4.46067 7.7053 3.87121 7.20448 3.33597L7.17062 3.30098L5.7779 1.57247L5.74695 1.53761C5.68187 1.46693 5.59733 1.39083 5.48829 1.31558C4.97558 0.961741 4.35885 0.944455 3.81623 1.48846L2.35426 2.99498L2.32698 3.0258C2.30114 3.05782 2.27971 3.09332 2.26334 3.13135C2.23847 3.1891 2.20927 3.2793 2.18282 3.40159C2.04888 4.02076 2.10431 4.8498 2.46727 5.87625L2.50826 5.98942C3.0136 7.3521 4.00268 8.88354 5.5733 10.5829L5.69461 10.713L5.71834 10.7412C5.77175 10.8038 5.826 10.8616 5.89712 10.9327L6.0175 11.0508L6.55991 11.6007L7.3702 12.4035L7.48822 12.5238C7.55934 12.595 7.61714 12.6492 7.67973 12.7026L7.70799 12.7264L7.8381 12.8477C9.53743 14.4183 11.0689 15.4074 12.4316 15.9127L12.5447 15.9537C13.5712 16.3167 14.4002 16.3721 15.0194 16.2381C15.1417 16.2117 15.2319 16.1825 15.2896 16.1576C15.3276 16.1413 15.3632 16.1198 15.3952 16.094L15.426 16.0667L16.9325 14.6047C17.4765 14.0621 17.4592 13.4454 17.1054 12.9327C17.0301 12.8236 16.954 12.7391 16.8834 12.674L16.8485 12.6431L15.12 11.2503L15.085 11.2165C14.5498 10.7157 13.9603 10.676 13.457 10.9398L13.4052 10.9682C13.3008 11.0279 13.2198 11.0895 13.1752 11.1304L13.1584 11.1466L12.6021 11.6391L12.4316 11.81" stroke="#222222" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/.gitkeep b/src/assets/images/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/images/applyButton.jpeg b/src/assets/images/applyButton.jpeg
new file mode 100644
index 00000000..87018420
Binary files /dev/null and b/src/assets/images/applyButton.jpeg differ
diff --git a/src/components/Common/Button.tsx b/src/components/Common/Button.tsx
new file mode 100644
index 00000000..35b2f7f0
--- /dev/null
+++ b/src/components/Common/Button.tsx
@@ -0,0 +1,57 @@
+import CallIcon from '@/assets/icons/CallIcon.svg?react';
+import { buttonTypeKeys, buttonTypeUnion } from '@/constants/components';
+
+type buttonProps = {
+  type: buttonTypeUnion; // 정의된 버튼을 5가지 타입으로 나누었습니다.
+  bgColor: string; // 버튼의 배경색
+  fontColor: string; // 버튼 글자색
+  isCallIcon?: boolean; // 전화기 아이콘 여부 (optional)
+  isBorder: boolean; // 버튼 테두리 여부
+  title: string; // 버튼에 포함되는 글자
+  onClick?: () => void; // 클릭 이벤트 핸들러 (optional)
+};
+
+const Button = ({
+  type,
+  bgColor,
+  fontColor,
+  isCallIcon = false, // 기본값 false 설정
+  isBorder,
+  title,
+  onClick,
+}: buttonProps) => {
+  const getButtonStyle = () => {
+    switch (type) {
+      case buttonTypeKeys.LARGE:
+        return 'w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] text-[1rem]';
+      case buttonTypeKeys.SMALL:
+        return 'w-[5.5rem] py-3 flex justify-center items-center rounded-[1.25rem] text-[0.75rem]';
+      case buttonTypeKeys.APPLY:
+        return `w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] bg-[url("/src/assets/images/applyButton.jpeg")] bg-cover bg-center text-[1rem] text-[#F4F4F9]`;
+      case buttonTypeKeys.BACK:
+        return 'w-[7.5rem] py-4 flex justify-center items-center rounded-[2rem] text-[1rem]';
+      case buttonTypeKeys.CONTINUE:
+        return 'w-[12.5rem] py-4 flex justify-center items-center rounded-[2rem] text-[1rem]';
+      default: // 기본값으로 large type 적용
+        return 'w-[20.5rem] py-4 flex justify-center items-center rounded-[2rem] text-[1rem]';
+    }
+  };
+
+  return (
+    <button
+      className={`${getButtonStyle()} ${bgColor} ${fontColor}  ${isBorder && 'border-solid border-[0.5px] border-[#1E1926]'}`}
+      onClick={onClick}
+    >
+      {isCallIcon ? (
+        <div className="flex justify-center items-center gap-1.5">
+          <CallIcon />
+          <div className="text-semibold">{title}</div>
+        </div>
+      ) : (
+        <div className="text-semibold">{title}</div>
+      )}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/constants/components.ts b/src/constants/components.ts
new file mode 100644
index 00000000..7a59fddc
--- /dev/null
+++ b/src/constants/components.ts
@@ -0,0 +1,9 @@
+export const buttonTypeKeys = {
+  LARGE: 'large',
+  SMALL: 'small',
+  APPLY: 'applyNow',
+  BACK: 'back',
+  CONTINUE: 'continue',
+} as const
+
+export type buttonTypeUnion = typeof buttonTypeKeys[keyof typeof buttonTypeKeys]
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 80399346..81b8e901 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,8 +6,10 @@ export default {
       fontFamily: {
         pretendard: ['"Pretendard"', 'sans-serif'],
       },
+    
       backgroundImage:{
         navbarGradient : 'linear-gradient(270deg, #FEFEFE 0.35%, #F4F4F9 175.32%)',
+        grayGradient : 'linear-gradient(180deg, rgba(255, 255, 255, 0.80) 36.54%, #FFF 94.71%)'
       }
     },
   },