diff --git a/src/components/BottomButton/index.tsx b/src/components/BottomButton/index.tsx
index ae90603e..008f9755 100644
--- a/src/components/BottomButton/index.tsx
+++ b/src/components/BottomButton/index.tsx
@@ -8,7 +8,7 @@ const BottomButton: React.FC<BottomButtonProps> = ({ content, onClick, disabled
 		<>
 			<ButtonWrapper>
 				<Button onClick={onClick} disabled={disabled}>
-					<StyledText $textTheme={{ style: 'button1-medium', lineHeight: 2 }}>{content}</StyledText>
+					<StyledText $textTheme={{ style: 'body1-regular', lineHeight: 2 }}>{content}</StyledText>
 				</Button>
 			</ButtonWrapper>
 		</>
diff --git a/src/components/BottomButton/styles.tsx b/src/components/BottomButton/styles.tsx
index bcd7dc6d..01419434 100644
--- a/src/components/BottomButton/styles.tsx
+++ b/src/components/BottomButton/styles.tsx
@@ -8,14 +8,14 @@ export const ButtonWrapper = styled.div`
 	transform: translateX(-50%);
 	width: 100%;
 	height: 6.25rem;
-	background-color: ${({ theme }) => theme.colors.white};
+	background-color: ${({ theme }) => theme.colors.background.primary};
 	justify-content: flex-end;
 	z-index: 1;
 	border: none;
 `;
 
 export const Button = styled.button<{ disabled: boolean }>`
-	background: ${({ disabled, theme }) =>
+	background: ${({ disabled, theme }) => //theme에 없어서 그냥 뒀음
 		disabled ? 'linear-gradient(93deg, #FFC1D6 1.22%, #F8D4D4 99.73%)' : theme.colors.brand.gradient};
 	border-radius: 0.625rem;
 	font-size: 1rem;
diff --git a/src/pages/AccountCancel/index.tsx b/src/pages/AccountCancel/index.tsx
index 3f155c35..6fab95fb 100644
--- a/src/pages/AccountCancel/index.tsx
+++ b/src/pages/AccountCancel/index.tsx
@@ -1,16 +1,27 @@
 import React, { useState } from 'react';
-import { CancelContainer, SubTitle, Text, InfoBox, InfoItem, CheckboxWrapper, CheckboxInput } from './styles';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
-import { OODDFrame } from '../../components/Frame/Frame';
+import {
+	CancelContainer,
+	SubTitle,
+	Text,
+	InfoBox,
+	InfoItem,
+	CheckboxWrapper,
+	CheckboxInput,
+	Label,
+	StyledCheckboxText,
+	StyledDiv,
+} from './styles'; // 상대 경로 index 명시
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
+import { OODDFrame } from '@components/Frame/Frame';
 import { useNavigate } from 'react-router-dom';
 
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
 
-import BottomButton from '../../components/BottomButton';
-import { patchUserWithdrawApi } from '../../apis/user';
-import Modal from '../../components/Modal';
+import BottomButton from '@components/BottomButton/index';
+import { patchUserWithdrawApi } from '@apis/user';
+import Modal from '@components/Modal/index';
 
 const AccountCancel: React.FC = () => {
 	const [isChecked, setIsChecked] = useState(false);
@@ -74,12 +85,12 @@ const AccountCancel: React.FC = () => {
 				<TopBar text="회원 탈퇴" LeftButtonSrc={back} onClickLeftButton={() => navigate(-1)} />
 
 				<SubTitle>
-					<StyledText as="div" $textTheme={{ style: 'headline2-medium', lineHeight: 2 }} color={theme.colors.black}>
+					<StyledText as="div" $textTheme={{ style: 'headline2-medium' }} color={theme.colors.primary}>
 						OOTD 탈퇴 전 확인하세요!
 					</StyledText>
 				</SubTitle>
 				<Text as="div">
-					<StyledText as="div" $textTheme={{ style: 'caption1-regular', lineHeight: 1 }} color={theme.colors.black}>
+					<StyledText as="div" $textTheme={{ style: 'caption1-regular' }} color={theme.colors.primary}>
 						{`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`}
 					</StyledText>
 				</Text>
@@ -87,32 +98,26 @@ const AccountCancel: React.FC = () => {
 					<InfoItem as="div">
 						<StyledText
 							as="div"
-							$textTheme={{ style: 'body1-medium', lineHeight: 2 }}
-							color={theme.colors.black}
-							style={{ whiteSpace: 'nowrap' }} // 줄 바꿈 방지
+							$textTheme={{ style: 'body1-medium'}}
+							color={theme.colors.primary}
+							style={{ whiteSpace: 'nowrap' }} 
 						>
 							지금까지 OODD를 이용해주셔서 감사합니다!
 						</StyledText>
 					</InfoItem>
 				</InfoBox>
 				<CheckboxWrapper as="div">
-					<label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+					<Label>
 						<CheckboxInput type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
-						<StyledText as="span" $textTheme={{ style: 'body4-light', lineHeight: 1 }} color={theme.colors.gray3}>
+						<StyledCheckboxText as="span" $textTheme={{ style: 'body2-regular' }}>
 							안내사항을 모두 확인하였으며, 이에 동의합니다.
-						</StyledText>
-					</label>
+						</StyledCheckboxText>
+					</Label>
 				</CheckboxWrapper>
 			</CancelContainer>
-			<div
-				style={{
-					backgroundColor: isChecked ? '#000000' : '#d3d3d3',
-					color: isChecked ? '#ffffff' : '#808080',
-					cursor: isChecked ? 'pointer' : 'not-allowed',
-				}}
-			>
+			<StyledDiv isChecked={isChecked}>
 				<BottomButton content="탈퇴하기" onClick={handleDeleteAccount} disabled={!isChecked} />
-			</div>
+			</StyledDiv>
 			{isModalVisible && (
 				<Modal
 					content={modalContent || ''} // null일 경우 빈 문자열로 처리
diff --git a/src/pages/AccountCancel/styles.tsx b/src/pages/AccountCancel/styles.tsx
index ceb7c9c0..6022aa3a 100644
--- a/src/pages/AccountCancel/styles.tsx
+++ b/src/pages/AccountCancel/styles.tsx
@@ -1,52 +1,49 @@
 import styled from 'styled-components';
-
-interface ButtonProps {
-	isChecked: boolean;
-}
+import { StyledText } from '@components/Text/StyledText';
 
 export const CancelContainer = styled.div`
 	margin: 0 auto;
 	width: 100%;
-	flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
+	flex-grow: 1; 
 	display: flex;
 	flex-direction: column;
 `;
 
 export const SubTitle = styled.h3`
-	font-size: 1rem; /* 16px */
+	font-size: 1rem;  
 	font-weight: bold;
-	margin-bottom: 0.625rem; /* 10px */
+	margin-bottom: 0.625rem;
 	text-align: center;
 	text-align: left;
 	margin-top: 10px;
-	padding: 1.25rem; /* 20px */
+	padding: 1.25rem; 
 `;
 
 export const Text = styled.p`
-	font-size: 0.875rem; /* 14px */
-	margin-bottom: 5px; /* 20px */
+	font-size: 0.875rem; 
+	margin-bottom: 5px; 
 	text-align: left;
 	margin-top: 10px;
-	padding: 0rem 1.25rem; /* 20px */
+	padding: 0rem 1.25rem; 
 `;
 
 export const InfoBox = styled.div`
-	background: #f5f5f5;
-	padding: 70px; /* 20px */
+	background: ${({ theme }) => theme.colors.background.secondary};
+	padding: 70px;
 	margin-top: 10px;
 	border-radius: 10px;
-	margin: 10px 20px 1.25rem 20px; /* 10px 위 여백, 20px 좌우 여백, 20px 아래 여백 */
+	margin: 10px 20px 1.25rem 20px; 
 `;
 
 export const InfoItem = styled.p`
-	font-size: 0.875rem; /* 14px */
-	margin-bottom: 0.625rem; /* 10px */
+	font-size: 0.875rem; 
+	margin-bottom: 0.625rem; 
 	padding: 2px 10px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	text-align: center;
-	height: 100%; /* 부모 컨테이너의 높이에 맞추기 */
+	height: 100%; 
 `;
 
 export const CheckboxWrapper = styled.div`
@@ -56,46 +53,49 @@ export const CheckboxWrapper = styled.div`
 	padding: 0rem 15px;
 
 	input[type='checkbox'] {
-		margin-right: 0.625rem; /* 10px */
+		margin-right: 0.625rem; 
 	}
 `;
 
 export const CheckboxInput = styled.input`
 	margin-right: 0.625rem;
 	cursor: pointer;
-	appearance: none; /* 기본 스타일 제거 */
+	appearance: none; 
 	width: 1.25rem;
 	height: 1.25rem;
-	border: 0.125rem solid #e0e0e0;
+	border: 0.125rem solid ${({ theme }) => theme.colors.gray[200]};
 	border-radius: 0.25rem;
 	position: relative;
 	&:checked {
-		background-color: #ffbbda;
-		border-color: #ff2389;
-	}
+		background-color: ${({ theme }) => theme.colors.background.primaryLight};
+		border-color: ${({ theme }) => theme.colors.brand.primary}; 
+}
+
 	&:checked::after {
 		content: '✓';
-		color: white;
+		color: ${({ theme }) => theme.colors.contrast};
 		font-size: 0.875rem;
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate(-50%, -50%); /* 정확히 중앙으로 배치 */
+		transform: translate(-50%, -50%); 
 	}
 `;
 
-export const StyledButton = styled.button<ButtonProps>`
-	margin-top: 18.75rem; /* 300px */
-	background: ${(props) => (props.isChecked ? 'black' : '#ccc')};
-	border-radius: 0.5rem; /* 8px */
-	border: none;
-	padding: 1.5625rem; /* 25px */
-	text-align: center;
-	font-size: 1rem; /* 16px */
-	color: white;
-	cursor: ${(props) => (props.isChecked ? 'pointer' : 'not-allowed')};
+export const Label = styled.label`
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+`;
 
-	&:disabled {
-		background: #00000080;
-	}
+export const StyledCheckboxText = styled(StyledText)`
+	color: ${({ theme }) => theme.colors.text.caption};
 `;
+
+export const StyledDiv = styled.div<{ isChecked: boolean }>`
+	background-color: ${({ isChecked, theme }) =>
+		isChecked ? theme.colors.primary : theme.colors.gray[300]};
+	color: ${({ isChecked, theme }) =>
+		isChecked ? theme.colors.contrast : theme.colors.caption};
+	cursor: ${({ isChecked }) => (isChecked ? 'pointer' : 'not-allowed')};
+`;
\ No newline at end of file
diff --git a/src/pages/AccountEdit/index.tsx b/src/pages/AccountEdit/index.tsx
index f78907b7..d41be4d8 100644
--- a/src/pages/AccountEdit/index.tsx
+++ b/src/pages/AccountEdit/index.tsx
@@ -12,19 +12,18 @@ import {
 	MemberInfoRow,
 	Label,
 	Info,
-} from './styles';
-import { OODDFrame } from '../../components/Frame/Frame';
-
-import BottomButton from '../../components/BottomButton'; // BottomButton 컴포넌트 임포트
+} from './styles'; 
+import { OODDFrame } from '@components/Frame/Frame';
+import BottomButton from '@components/BottomButton/index';
 
 import { useNavigate } from 'react-router-dom';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
-import naver from '../../assets/default/snsIcon/naver.svg';
-import kakao from '../../assets/default/snsIcon/kakao.svg';
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
+import naver from '@assets/default/snsIcon/naver.svg';
+import kakao from '@assets/default/snsIcon/kakao.svg';
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
 
 const AccountEdit: React.FC = () => {
 	const navigate = useNavigate(); // useNavigate 훅 사용
@@ -41,18 +40,18 @@ const AccountEdit: React.FC = () => {
 
 				<Section>
 					<SectionTitle>
-						<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 							로그인 정보
 						</StyledText>
 					</SectionTitle>
 					<SNSInfo>
 						<SnsConnection>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 								SNS 연결
 							</StyledText>
 						</SnsConnection>
 						<Text>
-							<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 								연결된 SNS계정으로 로그인되었습니다.
 							</StyledText>
 						</Text>
@@ -64,14 +63,14 @@ const AccountEdit: React.FC = () => {
 				</Section>
 				<Section>
 					<SectionTitle>
-						<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 							회원 정보
 						</StyledText>
 					</SectionTitle>
 					<MemberInfo>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 									이름
 								</StyledText>
 							</Label>
@@ -79,7 +78,7 @@ const AccountEdit: React.FC = () => {
 						</MemberInfoRow>
 						<MemberInfoRow>
 							<Label>
-								<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+								<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 									연락처
 								</StyledText>
 							</Label>
diff --git a/src/pages/AccountEdit/styles.tsx b/src/pages/AccountEdit/styles.tsx
index ac5ea79b..f52e42a8 100644
--- a/src/pages/AccountEdit/styles.tsx
+++ b/src/pages/AccountEdit/styles.tsx
@@ -1,92 +1,91 @@
 import styled from 'styled-components';
 
 export const ProfileEditContainer = styled.div`
-	max-width: 512px; /* 32rem */
+	max-width: 512px; 
 	display: flex;
 	flex-direction: column;
 	position: relative;
 `;
 
 export const Section = styled.div`
-	margin-top: 1.875rem; /* 30px */
-
-	margin-bottom: 1.875rem; /* 30px */
-	width: 100%; /* Section이 부모 컨테이너의 전체 너비를 차지하도록 설정 */
+	margin-top: 1.875rem; 
+	margin-bottom: 1.875rem; 
+	width: 100%; 
 	padding: 0px 30px;
 `;
 
 export const SectionTitle = styled.div`
-	font-size: 1.125rem; /* 18px */
+	font-size: 1.125rem; 
 	font-weight: bold;
-	margin-bottom: 0.625rem; /* 10px */
-	margin-top: 1.125rem; /* 18px */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	margin-bottom: 0.625rem; 
+	margin-top: 1.125rem; 
+	text-align: left; 
 `;
 
 export const SNSInfo = styled.div`
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 0.625rem; /* 10px */
-	margin-top: 3.125rem; /* 50px */
+	margin-bottom: 0.625rem; 
+	margin-top: 3.125rem;
 `;
 
 export const SNSInfoRow = styled.div`
 	display: flex;
 	align-items: center;
-	margin-bottom: 0.625rem; /* 10px */
+	margin-bottom: 0.625rem;
 `;
 
 export const SNSIcon = styled.img`
-	width: 2.5rem; /* 40px */
-	height: 2.5rem; /* 40px */
-	margin-right: 0.625rem; /* 10px */
+	width: 2.5rem; 
+	height: 2.5rem; 
+	margin-right: 0.625rem; 
 	margin-top: 1.875rem;
 	flex-shrink: 0;
 	object-fit: cover;
 `;
 
 export const Text = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #666;
+	font-size: 0.875rem; 
+	color: ${({ theme }) => theme.colors.tertiary};
 	margin-top: 2.1875rem;
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	text-align: left; 
 `;
 
 export const SnsConnection = styled.div`
-	font-size: 1rem; /* 16px */
+	font-size: 1rem; 
 	font-weight: bold;
-	color: #333;
-	margin-bottom: 0.625rem; /* 10px */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	color: ${({ theme }) => theme.colors.gray[700]};
+	margin-bottom: 0.625rem; 
+	text-align: left;
 `;
 
 export const MemberInfo = styled.div`
 	display: flex;
 	flex-direction: column;
 	margin-top: 35px;
-	width: 100%; /* 부모 컨테이너의 전체 너비를 차지하도록 설정 */
+	width: 100%;
 `;
 
 export const MemberInfoRow = styled.div`
 	display: flex;
 	align-items: center;
-	justify-content: flex-start; /* 아이템들을 왼쪽으로 정렬 */
-	margin-bottom: 0.625rem; /* 10px */
+	justify-content: flex-start; 
+	margin-bottom: 0.625rem; 
 	margin-top: 10px;
 `;
 
 export const Label = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #333;
+	font-size: 0.875rem;
+	color: ${({ theme }) => theme.colors.gray[700]};
 	display: flex;
 	align-items: center;
-	width: 6.25rem; /* 100px, 라벨의 고정 너비 설정 */
+	width: 6.25rem; 
 `;
 
 export const Info = styled.div`
-	font-size: 0.875rem; /* 14px */
-	color: #999;
-	margin-left: 0.625rem; /* 10px */
-	flex-grow: 1; /* 라벨과 함께 라인을 맞추기 위해 넓이를 확장 */
-	text-align: left; /* 텍스트를 왼쪽 정렬 */
+	font-size: 0.875rem; 
+	color: ${({ theme }) => theme.colors.caption};
+	margin-left: 0.625rem; 
+	flex-grow: 1; 
+	text-align: left; 
 `;
diff --git a/src/pages/AccountSetting/index.tsx b/src/pages/AccountSetting/index.tsx
index 7da01656..c16e8fbf 100644
--- a/src/pages/AccountSetting/index.tsx
+++ b/src/pages/AccountSetting/index.tsx
@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles';
-import { OODDFrame } from '../../components/Frame/Frame';
-import ConfirmationModal from '../../components/ConfirmationModal';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
-import imageBasic from '../../assets/default/defaultProfile.svg';
-import Profile_s from './../../assets/default/my-page.svg';
-import leave from '../../assets/default/leave.svg';
-import { getUserInfoApi } from '../../apis/user';
-import { UserInfoData } from '../../apis/user/dto';
-import Loading from '../../components/Loading';
+import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; 
+import { OODDFrame } from '@components/Frame/Frame';
+import ConfirmationModal from '@components/ConfirmationModal/index';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
+import imageBasic from '@assets/default/defaultProfile.svg';
+import Profile_s from '@assets/default/my-page.svg';
+import leave from '@assets/default/leave.svg';
+import { getUserInfoApi } from '@apis/user'; 
+import type { UserInfoData } from '@apis/user/dto'; // type 명시
+import Loading from '@components/Loading/index';
 
 const AccountSetting: React.FC = () => {
 	const navigate = useNavigate();
@@ -81,14 +81,14 @@ const AccountSetting: React.FC = () => {
 					</ProfilePic>
 					<Row>
 						<Label>
-							<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 0 }} color={theme.colors.black}>
+							<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 								{userProfile?.nickname}
 							</StyledText>
 						</Label>
 					</Row>
 					<Row>
 						<Label>
-							<StyledText $textTheme={{ style: 'body6-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+							<StyledText $textTheme={{ style: 'caption1-regular' }} color={theme.colors.tertiary}>
 								{userProfile?.name} | {userProfile?.email}
 							</StyledText>
 						</Label>
@@ -98,13 +98,13 @@ const AccountSetting: React.FC = () => {
 				<List>
 					<ListItem onClick={handleLogoutClick}>
 						<img src={leave} alt="로그아웃 아이콘" />
-						<StyledText $textTheme={{ style: 'body2-Light', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium'}} color={theme.colors.primary}>
 							Logout
 						</StyledText>
 					</ListItem>
 					<ListItem onClick={handleDeleteAccountClick}>
 						<img src={Profile_s} alt="회원 탈퇴 아이콘" />
-						<StyledText $textTheme={{ style: 'body2-Light', lineHeight: 0 }} color={theme.colors.black}>
+						<StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.primary}>
 							회원탈퇴
 						</StyledText>
 					</ListItem>
diff --git a/src/pages/AccountSetting/styles.tsx b/src/pages/AccountSetting/styles.tsx
index cbf82ed4..964a5d1f 100644
--- a/src/pages/AccountSetting/styles.tsx
+++ b/src/pages/AccountSetting/styles.tsx
@@ -3,8 +3,7 @@ import styled from 'styled-components';
 export const ProfileEditContainer = styled.div`
 	margin: 0 auto;
 	width: 100%;
-	flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
-
+	flex-grow: 1; 
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -14,18 +13,18 @@ export const ProfilePicWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 1.25rem; /* 20px */
+	margin-bottom: 1.25rem;
 	margin-top: 24px;
 `;
 
 export const ProfilePic = styled.div`
-	width: 7.25rem; /* 116px */
-	height: 7.25rem; /* 116px */
+	width: 7.25rem; 
+	height: 7.25rem; 
 	flex-shrink: 0;
 	border-radius: 50%;
 	overflow: hidden;
-	margin-top: 2.125rem; /* 34px */
-	margin-bottom: 1.375rem; /* 22px */
+	margin-top: 2.125rem; 
+	margin-bottom: 1.375rem; 
 
 	img {
 		width: 100%;
@@ -61,7 +60,7 @@ export const List = styled.ul`
 	padding: 0;
 	margin: 0; 
 	list-style: none;
-	border-top: 0px solid #eee;
+	border-top: 0px solid ${({ theme }) => theme.colors.background.divider};
 	position: absolute;
 	bottom: 20px; 
 `;
@@ -69,24 +68,24 @@ export const List = styled.ul`
 export const ListItem = styled.li`
 	display: flex;
 	align-items: center;
-	padding: 15px 1.25rem; /* 15px 20px */
-	border-bottom: 0px solid #eee;
+	padding: 15px 1.25rem; 
+	border-bottom: 0px solid ${({ theme }) => theme.colors.background.divider};
 	cursor: pointer;
 
 	& img:first-child {
-		margin-right: 1rem; /* 첫 번째 이미지(왼쪽 아이콘)의 오른쪽 간격 설정 */
+		margin-right: 1rem; 
 	}
 
 	& img:last-child {
-		margin-left: auto; /* 마지막 이미지(오른쪽 화살표 아이콘)를 오른쪽으로 정렬 */
+		margin-left: auto; 
 	}
 
 	&:hover {
-		background: #f9f9f9;
+		background: ${({ theme }) => theme.colors.background.secondary};
 	}
 
 	span {
 		flex: 1;
-		text-align: left; /* 텍스트 왼쪽 정렬 */
+		text-align: left;
 	}
 `;
diff --git a/src/pages/Profile/ButtonSecondary/index.tsx b/src/pages/Profile/ButtonSecondary/index.tsx
index 3ce66152..93a3a04c 100644
--- a/src/pages/Profile/ButtonSecondary/index.tsx
+++ b/src/pages/Profile/ButtonSecondary/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Button } from './styles';
-import { StyledText } from '../../../components/Text/StyledText';
-import theme from '../../../styles/theme';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
 const ButtonSecondary: React.FC = () => {
 	const navigate = useNavigate();
@@ -13,7 +13,7 @@ const ButtonSecondary: React.FC = () => {
 
 	return (
 		<Button onClick={handleClick}>
-			<StyledText $textTheme={{ style: 'button1-regular', lineHeight: 2 }} color={theme.colors.gradient}>
+			<StyledText $textTheme={{ style: 'body2-bold' }} color={theme.colors.brand.primary}>
 				프로필 수정
 			</StyledText>
 		</Button>
diff --git a/src/pages/Profile/ButtonSecondary/styles.tsx b/src/pages/Profile/ButtonSecondary/styles.tsx
index a7c01716..31aed05e 100644
--- a/src/pages/Profile/ButtonSecondary/styles.tsx
+++ b/src/pages/Profile/ButtonSecondary/styles.tsx
@@ -5,11 +5,10 @@ export const Button = styled.button`
 	margin: 16px auto;
 	height: 3.1rem;
 	text-align: center;
-	color: #ff2389;
+	color: ${({ theme }) => theme.colors.brand.primary};
 	cursor: pointer;
 	box-sizing: border-box;
 	border: 1px solid;
 	border-radius: 10px;
-	border-color: #ff2389;
 	padding: 10px;
 `;
diff --git a/src/pages/Profile/NavbarProfile/index.tsx b/src/pages/Profile/NavbarProfile/index.tsx
index 8807d220..874e3780 100644
--- a/src/pages/Profile/NavbarProfile/index.tsx
+++ b/src/pages/Profile/NavbarProfile/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Nav, IconContainer } from './styles';
 import { Link } from 'react-router-dom';
-import settingIcon from "../../../assets/default/setting.svg"
-import { StyledText } from '../../../components/Text/StyledText';
-import theme from '../../../styles/theme';
+import settingIcon from '@assets/default/setting.svg';
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
 
 const NavbarProfile: React.FC = () => {
 	return (
 		<Nav>
-			<StyledText $textTheme={{ style: 'heading1-bold'}} color={theme.colors.black}>
+			<StyledText $textTheme={{ style: 'heading1-bold'}} color={theme.colors.primary}>
 				내정보
 			</StyledText>
 			<IconContainer>
diff --git a/src/pages/Profile/NavbarProfile/styles.tsx b/src/pages/Profile/NavbarProfile/styles.tsx
index c9407397..5a11169f 100644
--- a/src/pages/Profile/NavbarProfile/styles.tsx
+++ b/src/pages/Profile/NavbarProfile/styles.tsx
@@ -9,9 +9,8 @@ export const Nav = styled.nav`
 	top: 0;
 	left: 0;
 	width: 100%;
-	background-color: white;
-	z-index: 1000; /* 다른 요소들보다 위에 오도록 설정 */
-
+	background-color: ${({ theme }) => theme.colors.contrast};
+	z-index: 1000; 
 	position: sticky;
 `;
 
@@ -26,7 +25,7 @@ export const IconContainer = styled.div`
 	}
 
 	img {
-		width: 1.5rem; /* 24px */
-		height: 1.5rem; /* 24px */
+		width: 1.5rem; 
+		height: 1.5rem; 
 	}
 `;
diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx
index aad5dc5b..7fea89b1 100644
--- a/src/pages/Profile/index.tsx
+++ b/src/pages/Profile/index.tsx
@@ -12,28 +12,29 @@ import {
 	NoPostWrapper,
 	Button,
 } from './styles';
-import { OODDFrame } from '../../components/Frame/Frame';
-import NavbarProfile from './NavbarProfile';
-import NavBar from '../../components/NavBar';
-import ButtonSecondary from './ButtonSecondary';
-import PostItem from '../../components/PostItem';
-import imageBasic from '../../assets/default/defaultProfile.svg';
-import Loading from '../../components/Loading';
-import UserProfile from '../../components/UserProfile';
-import { StyledText } from '../../components/Text/StyledText';
-import Modal from '../../components/Modal';
-import CommentBottomSheet from '../../components/CommentBottomSheet';
-import OptionsBottomSheet from '../../components/BottomSheet/OptionsBottomSheet';
-
-import { getUserPostListApi } from '../../apis/post';
-import { getUserInfoApi } from '../../apis/user';
-import { createMatchingApi } from '../../apis/matching';
-import { UserPostSummary } from '../../apis/post/dto';
-import { UserInfoData } from '../../apis/user/dto';
-import button_plus from '../../assets/default/plus.svg';
-import TopBar from '../../components/TopBar';
-import MoreSvg from '../../assets/default/more.svg';
-import BackSvg from '../../assets/arrow/left.svg';
+import NavbarProfile from './NavbarProfile/index'; // 상대 경로 index 명시
+import ButtonSecondary from './ButtonSecondary/index'; // 상대 경로 index 명시
+import { OODDFrame } from '@components/Frame/Frame';
+import NavBar from '@components/NavBar';
+import PostItem from '@components/PostItem';
+import imageBasic from '@assets/default/defaultProfile.svg';
+import Loading from '@components/Loading';
+import UserProfile from '@components/UserProfile';
+import { StyledText } from '@components/Text/StyledText';
+import Modal from '@components/Modal';
+import CommentBottomSheet from '@components/CommentBottomSheet';
+import OptionsBottomSheet from '@components/BottomSheet/OptionsBottomSheet';
+
+import { getUserPostListApi } from '@apis/post';
+import { getUserInfoApi } from '@apis/user';
+import { createMatchingApi } from '@apis/matching';
+import type { UserPostSummary } from '@apis/post/dto'; // type 명시
+import type { UserInfoData } from '@apis/user/dto'; // type 명시
+import button_plus from '@assets/default/plus.svg';
+import TopBar from '@components/TopBar';
+import MoreSvg from '@assets/default/more.svg';
+import BackSvg from '@assets/arrow/left.svg';
+import theme from '@styles/theme';
 
 const Profile: React.FC = () => {
 	const { userId } = useParams<{ userId: string }>();
@@ -109,7 +110,7 @@ const Profile: React.FC = () => {
 						RightButtonSrc={MoreSvg}
 						LeftButtonSrc={BackSvg}
 						onClickLeftButton={() => navigate(-1)}
-						onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} // OptionsBottomSheet 열기
+						onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} 
 					/>
 				)}
 
@@ -145,7 +146,7 @@ const Profile: React.FC = () => {
 						posts.map((post) => <PostItem key={post.id} post={post} />)
 					) : (
 						<NoPostWrapper>
-							<StyledText $textTheme={{ style: 'headline1-medium' }} color="#8e8e93">
+							<StyledText $textTheme={{ style: 'headline1-medium' }} color={theme.colors.gray[400]}>
 								게시물이 없어요.
 							</StyledText>
 						</NoPostWrapper>
diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx
index 7c093fcc..9ba7436c 100644
--- a/src/pages/Profile/styles.tsx
+++ b/src/pages/Profile/styles.tsx
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 export const ProfileContainer = styled.div`
 	width: 100%;
 	flex-grow: 1;
-	margin: 0 auto; /* 중앙 정렬 */
+	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
 	align-self: center;
-	box-sizing: border-box; /* 패딩을 포함한 전체 크기를 설정 */
-	overflow-y: auto; /* 내용이 넘칠 경우 스크롤 */
+	box-sizing: border-box; 
+	overflow-y: auto;
 	padding-top: 0rem;
 `;
 
@@ -22,9 +22,10 @@ export const Header = styled.div`
 export const StatsContainer = styled.div`
 	display: flex;
 	justify-content: space-around;
-	padding: 0.625rem 0; /* 10px 0 */
-	border-top: 1px solid #eee;
-	border-bottom: 1px solid #eee;
+	padding: 0.625rem 0;
+	border-top: 1px solid ${({ theme }) => theme.colors.background.divider}; 
+	border-bottom: 1px solid ${({ theme }) => theme.colors.background.divider};
+
 `;
 
 export const Stat = styled.div`
@@ -34,21 +35,21 @@ export const Stat = styled.div`
 `;
 
 export const StatNumber = styled.div`
-	color: var(--Color-gray4, #8e8e8e);
+	color: ${({ theme }) => theme.colors.caption};	
+	//변경된 컬러시스템에서의 gray4가 800으로 나와있어서 적용해보면 색상이 다르게 나옵니다!
 	text-align: center;
-
 	font-family: 'Pretendard';
-	font-size: 1rem; /* 16px */
+	font-size: 1rem; 
 	font-style: normal;
 	font-weight: 400;
 	line-height: normal;
 `;
 
 export const StatLabel = styled.div`
-	color: var(--Color-gray4, #8e8e8e);
+	color: ${({ theme }) => theme.colors.caption};	
 	text-align: center;
 	font-family: 'Pretendard';
-	font-size: 0.75rem; /* 12px */
+	font-size: 0.75rem; 
 	font-style: normal;
 	font-weight: 300;
 `;
@@ -56,7 +57,7 @@ export const StatLabel = styled.div`
 export const PostsContainer = styled.div`
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: space-between; /* 두 개씩 나란히 배치 */
+	justify-content: space-between; 
 	gap: 15px;
 	cursor: pointer;
 	margin-bottom: 100px;
@@ -88,10 +89,9 @@ export const Button = styled.button`
 	margin: 1.25rem auto;
 	height: 3.1rem; 
 	text-align: center;
-	color: #FFF;
+	color: ${({ theme }) => theme.colors.contrast};	
 	cursor: pointer;
 	box-sizing: border-box;
 	border-radius: 10px;
 	padding: 10px;
-	background: var(--Linear1, linear-gradient(93deg, #ff2389 1.22%, #f27575 99.73%));
-`;
+	background: ${({ theme }) => theme.colors.brand.gradient};`;
diff --git a/src/pages/ProfileEdit/index.tsx b/src/pages/ProfileEdit/index.tsx
index c3608fe5..c96902a8 100644
--- a/src/pages/ProfileEdit/index.tsx
+++ b/src/pages/ProfileEdit/index.tsx
@@ -11,23 +11,24 @@ import {
 	UserInfo,
 	Username,
 	EmailInput,
-} from './styles';
-import { StyledText } from '../../components/Text/StyledText';
-import theme from '../../styles/theme';
-import { OODDFrame } from '../../components/Frame/Frame';
+} from './styles'; 
+import { StyledText } from '@components/Text/StyledText';
+import theme from '@styles/theme';
+import { OODDFrame } from '@components/Frame/Frame';
 import { useNavigate } from 'react-router-dom';
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
-import { storage } from '../../config/firebaseConfig';
-import Modal from '../../components/Modal';
-
-import TopBar from '../../components/TopBar';
-import back from '../../assets/arrow/left.svg';
-import BottomButton from '../../components/BottomButton';
-import imageBasic from '../../assets/default/defaultProfile.svg';
-import Loading from '../../components/Loading';
-import camera from '../../assets/default/camera.svg';
-import { getUserInfoApi, patchUserInfoApi } from '../../apis/user'; // API import
-import { UserInfoData, PatchUserInfoRequest } from '../../apis/user/dto'; // DTO import
+import { storage } from '@config/firebaseConfig';
+import Modal from '@components/Modal/index';
+
+import TopBar from '@components/TopBar/index';
+import back from '@assets/arrow/left.svg';
+import BottomButton from '@components/BottomButton/index';
+import imageBasic from '@assets/default/defaultProfile.svg';
+import Loading from '@components/Loading/index';
+import camera from '@assets/default/camera.svg';
+import { getUserInfoApi, patchUserInfoApi } from '@apis/user'; 
+import type { UserInfoData, PatchUserInfoRequest } from '@apis/user/dto'; // type 명시
+
 
 type ExtendedUserInfoData = UserInfoData & {
 	birthDate?: string; // 확장된 속성
@@ -178,42 +179,42 @@ const ProfileEdit: React.FC = () => {
 					<FileInput type="file" ref={fileInputRef} onChange={handleFileChange} />
 				</ProfilePicWrapper>
 				<UserInfo>
-					<StyledText $textTheme={{ style: 'Heading', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'Heading' }} color={theme.colors.tertiary}>
 						<Username>{nickname || '알수없음'}</Username>
 					</StyledText>
 				</UserInfo>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 						이름
 					</StyledText>
 					<Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
 				</Row>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 						닉네임
 					</StyledText>
 					<Input type="text" value={nickname} onChange={(e) => setNickname(e.target.value)} />
 				</Row>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 						소개글
 					</StyledText>
 					<Input value={bio} onChange={(e) => setBio(e.target.value)} />
 				</Row>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular'}} color={theme.colors.tertiary}>
 						전화번호
 					</StyledText>
 					<Input type="text" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
 				</Row>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 						생년월일
 					</StyledText>
 					<Input type="date" value={birthDate} onChange={(e) => setBirthDate(e.target.value)} />
 				</Row>
 				<Row>
-					<StyledText $textTheme={{ style: 'body2-regular', lineHeight: 0 }} color={theme.colors.gray3}>
+					<StyledText $textTheme={{ style: 'body2-regular' }} color={theme.colors.tertiary}>
 						이메일
 					</StyledText>
 					<EmailInput type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
diff --git a/src/pages/ProfileEdit/styles.tsx b/src/pages/ProfileEdit/styles.tsx
index 685b8cbb..c4a42d0e 100644
--- a/src/pages/ProfileEdit/styles.tsx
+++ b/src/pages/ProfileEdit/styles.tsx
@@ -14,23 +14,23 @@ export const ProfilePicWrapper = styled.div`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 10px; /* 20px */
+	margin-bottom: 10px; 
 	position: relative;
 `;
 
 export const Label = styled.label`
-	font-size: 0.875rem; /* 14px */
-	color: #333;
+	font-size: 0.875rem; 
+	color: ${({ theme }) => theme.colors.gray[700]};
 `;
 
 export const Input = styled.input`
-	width: 100%; /* Row의 padding에 맞춰 꽉 채우기 */
-	padding: 25px; /* 10px padding */
-	margin: 10px 0; /* 위아래 간격 조정 */
+	width: 100%; 
+	padding: 25px; 
+	margin: 10px 0; 
 	border: 0px;
 	box-sizing: border-box;
 	border-radius: 10px;
-	background-color: #f0f0f0; /* 박스 내부 회색 배경 */
+	background-color: ${({ theme }) => theme.colors.background.secondary};
 	text-align: left;
 `;
 
@@ -43,20 +43,20 @@ export const Button = styled.button`
 	height: 1.7rem;
 	padding: 0.3rem;
 	border-radius: 50%;
-	background-color: white;
-	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
-	border: 1px solid #ddd; /* 아이콘 테두리 */
+	background-color: ${({ theme }) => theme.colors.background.primary};
+	box-shadow: 0px 2px 4px ${({ theme }) => `${theme.colors.black}33`}; 
+	border: 1px solid ${({ theme }) => theme.colors.gray[300]}; 
 	cursor: pointer;
 `;
 
 export const ProfilePic = styled.div`
-	width: 7.25rem; /* 116px */
-	height: 7.25rem; /* 116px */
+	width: 7.25rem; 
+	height: 7.25rem; 
 	flex-shrink: 0;
 	border-radius: 50%;
 	overflow: hidden;
-	margin-top: 2.125rem; /* 34px */
-	margin-bottom: 15px; /* 20px */
+	margin-top: 2.125rem; 
+	margin-bottom: 15px; 
 
 	img {
 		width: 100%;
@@ -69,25 +69,25 @@ export const CameraIcon = styled.img``;
 
 export const Row = styled.div`
 	display: flex;
-	flex-direction: column; /* 세로 배치 */
+	flex-direction: column; 
 	align-items: stretch;
 	width: 100%;
-	margin-top: 0px; /* Row 간격 10px */
-	padding: 0px 20px; /* 좌우 여백 20px */
+	margin-top: 0px; 
+	padding: 0px 20px;
 
 	${Label} {
-		width: 6.25rem; /* 100px */
+		width: 6.25rem; 
 	}
 `;
 
 export const EmailInput = styled.input`
   margin-bottom: 120px;
-	width: 100%; /* Row의 padding에 맞춰 꽉 채우기 */
-	padding: 25px; /* 10px padding */
+	width: 100%; 
+	padding: 25px; 
 	border: 0px;
 	box-sizing: border-box;
 	border-radius: 10px;
-	background-color: #f0f0f0; /* 박스 내부 회색 배경 */
+	background-color: ${({ theme }) => theme.colors.background.secondary};
 	text-align: left;
 `;
 
@@ -98,12 +98,12 @@ export const FileInput = styled.input`
 export const UserInfo = styled.div``;
 
 export const Username = styled.button`
-	color: #000;
+	color: ${({ theme }) => theme.colors.black};
 	font-family: Pretendard;
 	font-size: 22px;
 	font-style: normal;
 	font-weight: 700;
-	line-height: 136.4%; /* 30.008px */
+	line-height: 136.4%;
 	letter-spacing: -0.427px;
 `;
 
diff --git a/src/pages/verification/index.tsx b/src/pages/verification/index.tsx
index fcb2d5f3..e7ead21e 100644
--- a/src/pages/verification/index.tsx
+++ b/src/pages/verification/index.tsx
@@ -18,6 +18,7 @@ import { StyledText } from '../../components/Text/StyledText';
 import TopBar from '../../components/TopBar';
 import back from '../../assets/arrow/left.svg';
 import { useNavigate } from 'react-router-dom';
+import theme from '@styles/theme';
 
 const Verification: React.FC = () => {
 	const navigate = useNavigate(); // useNavigate 훅 사용
@@ -108,7 +109,9 @@ const Verification: React.FC = () => {
 
 				<Container>
 					<Title>
-						<StyledText $textTheme={{ style: 'body1-medium', lineHeight: 2 }} color="7B7B7B">
+					<StyledText
+							$textTheme={{ style: 'body1-medium' }}
+							color={theme.colors.tertiary} >
 							휴대전화번호로 본인인증하기
 						</StyledText>
 					</Title>
@@ -120,7 +123,6 @@ const Verification: React.FC = () => {
 								value={name}
 								onChange={handleNameChange}
 								data-theme-style="heading1-regular"
-								data-theme-lineheight="1"
 							/>
 						</InputWrapper>
 						<InputWrapper>
@@ -129,8 +131,7 @@ const Verification: React.FC = () => {
 								placeholder="전화번호"
 								value={phone}
 								onChange={handlePhoneChange}
-								data-theme-style="body2-light"
-								data-theme-lineheight="1"
+								data-theme-style="body1-medium"
 							/>
 							{isVerificationSent && <ResendButton onClick={handleResend}>인증번호 새로 받기</ResendButton>}
 						</InputWrapper>
@@ -141,8 +142,7 @@ const Verification: React.FC = () => {
 									placeholder="인증번호를 입력하세요"
 									value={verificationCode}
 									onChange={handleVerificationCodeChange}
-									data-theme-style="body2-light"
-									data-theme-lineheight="1"
+									data-theme-style="body1-medium"
 								/>
 								<Timer>{formatTime(timer)}</Timer>
 							</VerificationInputWrapper>
diff --git a/src/pages/verification/styles.tsx b/src/pages/verification/styles.tsx
index 48e43123..9d5d9e7e 100644
--- a/src/pages/verification/styles.tsx
+++ b/src/pages/verification/styles.tsx
@@ -3,22 +3,22 @@ import styled from 'styled-components';
 export const VerificationWrapper = styled.div`
 	margin: 0 auto;
 	width: 100%;
-	flex-grow: 1; /* flexbox에서 공간을 채우도록 설정 */
-	padding: 1.25rem; /* 20px */
+	flex-grow: 1; 
+	padding: 1.25rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 `;
 
 export const Container = styled.div`
-	margin-top: 5px; /* TopBar 높이만큼 위로 밀기 */
+	margin-top: 5px; 
 	padding: 1rem;
 `;
 
 export const Title = styled.h1`
 	font-size: 1.125rem;
 	margin-bottom: 1.25rem;
-s`;
+`;
 
 export const Form = styled.form`
 	display: flex;
@@ -28,7 +28,7 @@ export const Form = styled.form`
 
 export const Input = styled.input`
 	padding: 0.625rem;
-	border: 1px solid #ccc;
+	border: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	border-radius: 0.25rem;
 	font-size: 1rem;
 	width: 100%;
@@ -45,14 +45,16 @@ export const Button = styled.button`
 	padding: 1.25rem;
 	margin-top: 300px;
 	font-size: 0.875rem;
-	color: #fff;
-	background-color: ${({ disabled }) => (disabled ? '#ccc' : '#000')};
+	color: ${({ theme }) => theme.colors.contrast};
+	background-color: ${({ theme, disabled }) =>
+  disabled ? theme.colors.gray[300] : theme.colors.black};
 	border: none;
 	border-radius: 0.3125rem;
 	cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
 	&:hover {
-		background-color: ${({ disabled }) => (disabled ? '#ccc' : '#333')};
+		background-color: ${({ theme, disabled }) =>
+  		disabled ? theme.colors.gray[300] : theme.colors.gray[700]};
 	}
 `;
 
@@ -64,7 +66,7 @@ export const VerificationInputWrapper = styled.div`
 
 export const VerificationInput = styled.input`
 	padding: 0.625rem;
-	border: 1px solid #ccc;
+	border: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	border-radius: 0.25rem;
 	font-size: 1rem;
 	width: 100%;
@@ -76,7 +78,7 @@ export const Timer = styled.div`
 	top: 50%;
 	transform: translateY(-50%);
 	font-size: 1rem;
-	color: red;
+	color: ${({ theme }) => theme.colors.red || theme.colors.brand.primary};
 `;
 
 export const ResendButton = styled.button`
@@ -86,7 +88,7 @@ export const ResendButton = styled.button`
 	transform: translateY(-50%);
 	padding: 0.625rem;
 	font-size: 0.875rem;
-	color: #000;
+	color: ${({ theme }) => theme.colors.black};
 	background: none;
 	border: none;
 	cursor: pointer;
@@ -94,29 +96,15 @@ export const ResendButton = styled.button`
 
 export const StyledInput = styled.input`
 	padding: 0.625rem;
-	border: 1px solid #ccc;
+	border: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	border-radius: 0.25rem;
 	font-size: 1rem;
 	width: 100%;
-
-	${({ theme }) => theme.fontStyles['heading1-regular']}
-
-	&.body2-light {
-		font-family: 'Pretendard Variable';
-		font-weight: 300; // light
-		font-size: 1rem; // 16px
-	}
 `;
 export const StyledVerificationInput = styled.input`
 	padding: 0.625rem;
-	border: 1px solid #ccc;
+	border: 1px solid ${({ theme }) => theme.colors.gray[300]};
 	border-radius: 0.25rem;
 	font-size: 1rem;
 	width: 100%;
-
-	&.body2-light {
-		font-family: 'Pretendard Variable';
-		font-weight: 300; // light
-		font-size: 1rem; // 16px
-	}
 `;