diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg
index d51a93b3..f82acf84 100644
--- a/src/assets/svg/refresh.svg
+++ b/src/assets/svg/refresh.svg
@@ -1,5 +1,5 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.2748 7.61267C13.0788 9.4546 12.0358 11.1807 10.3098 12.1777C7.44234 13.8343 3.77567 12.8512 2.12011 9.98199L1.94378 9.67639M1.34986 6.35217C1.5458 4.51024 2.58883 2.78418 4.31477 1.78712C7.18227 0.130579 10.8489 1.11364 12.5045 3.98285L12.6808 4.28845M1.3125 11.2635L1.82884 9.33537L3.75583 9.85202M10.8692 4.11284L12.7962 4.62948L13.3125 2.70134" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.2748 7.61267C13.0788 9.4546 12.0358 11.1807 10.3098 12.1777C7.44234 13.8343 3.77567 12.8512 2.12011 9.98199L1.94378 9.67639M1.34986 6.35217C1.5458 4.51024 2.58883 2.78418 4.31477 1.78712C7.18227 0.130579 10.8489 1.11364 12.5045 3.98285L12.6808 4.28845M1.3125 11.2635L1.82884 9.33537L3.75583 9.85202M10.8692 4.11284L12.7962 4.62948L13.3125 2.70134" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.2748 7.61267C13.0788 9.4546 12.0358 11.1807 10.3098 12.1777C7.44234 13.8343 3.77567 12.8512 2.12011 9.98199L1.94378 9.67639M1.34986 6.35217C1.5458 4.51024 2.58883 2.78418 4.31477 1.78712C7.18227 0.130579 10.8489 1.11364 12.5045 3.98285L12.6808 4.28845M1.3125 11.2635L1.82884 9.33537L3.75583 9.85202M10.8692 4.11284L12.7962 4.62948L13.3125 2.70134" stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+    <path
+        d="M13.2748 7.61267C13.0788 9.4546 12.0358 11.1807 10.3098 12.1777C7.44234 13.8343 3.77567 12.8512 2.12011 9.98199L1.94378 9.67639M1.34986 6.35217C1.5458 4.51024 2.58883 2.78418 4.31477 1.78712C7.18227 0.130579 10.8489 1.11364 12.5045 3.98285L12.6808 4.28845M1.3125 11.2635L1.82884 9.33537L3.75583 9.85202M10.8692 4.11284L12.7962 4.62948L13.3125 2.70134"
+        stroke="white" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/src/components/common/button/ArrangeBtn.tsx b/src/components/common/button/ArrangeBtn.tsx
index 4fbba04d..927fe83d 100644
--- a/src/components/common/button/ArrangeBtn.tsx
+++ b/src/components/common/button/ArrangeBtn.tsx
@@ -17,5 +17,26 @@ const ArrangeBtnLayout = styled.button`
 	height: 2.9rem;
 	padding: 7px;
 
+	color: ${({ theme }) => theme.palette.GREY_06};
+
+	background-color: ${({ theme }) => theme.palette.WITHE};
 	border-radius: 6px;
+
+	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.GREY_06};
+
+		background-color: ${({ theme }) => theme.palette.GREY_01};
+
+		${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+	}
+
+	&:active {
+		color: ${({ theme }) => theme.palette.GREY_06}; /* 수정 필요 */
+
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+
+		${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
+	}
 `;
diff --git a/src/components/common/button/Check1Btn.tsx b/src/components/common/button/Check1Btn.tsx
index 92f76d42..e63cac90 100644
--- a/src/components/common/button/Check1Btn.tsx
+++ b/src/components/common/button/Check1Btn.tsx
@@ -11,7 +11,7 @@ const Check1Btn = ({ type }: Check1) => {
 		<>
 			{type === 'setting' ? (
 				<SettingCheck1Layout>
-					<Icons.SettingCheck1 />
+					<Icons.SettingCheck1 width="17" height="16" />
 				</SettingCheck1Layout>
 			) : (
 				<DoneLayout>
@@ -31,7 +31,16 @@ const SettingCheck1Layout = styled.button`
 	width: 2.4rem;
 	height: 2.4rem;
 
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
 	border-radius: 8px;
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.BLUE_PASSED};
+	}
 `;
 
 const DoneLayout = styled.button`
@@ -41,5 +50,6 @@ const DoneLayout = styled.button`
 	width: 3.2rem;
 	height: 3.2rem;
 
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
 	border-radius: 10px;
 `;
diff --git a/src/components/common/button/DeleteBtn.tsx b/src/components/common/button/DeleteBtn.tsx
index 6407c343..34c16e9a 100644
--- a/src/components/common/button/DeleteBtn.tsx
+++ b/src/components/common/button/DeleteBtn.tsx
@@ -3,9 +3,7 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const DeleteBtn = (props: Props) => {
+const DeleteBtn = () => {
 	return (
 		<DeleteBtnLayout>
 			<StlyedDeleteIcon />
@@ -27,6 +25,11 @@ const DeleteBtnCss = css`
 
 const DeleteBtnLayout = styled.button`
 	${DeleteBtnCss}
+	background-color: ${({ theme }) => theme.palette.GREY_01};
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+	}
 `;
 
 const StlyedDeleteIcon = styled(Icons.DeleteIcon)`
diff --git a/src/components/common/button/DeleteCancelBtn.tsx b/src/components/common/button/DeleteCancelBtn.tsx
index fa4e5f3d..fb11083d 100644
--- a/src/components/common/button/DeleteCancelBtn.tsx
+++ b/src/components/common/button/DeleteCancelBtn.tsx
@@ -25,9 +25,26 @@ const DeleteCancelBtnCss = css`
 
 const DeleteBtn = styled.button`
 	${DeleteCancelBtnCss}
-	${({ theme }) => theme.palette.WITHE}
+	color: ${({ theme }) => theme.palette.WITHE};
+
+	background-color: ${({ theme }) => theme.palette.SECONDARY};
+	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLACK}; /* 수정 필요 */
+	}
 `;
 
 const CancelBtn = styled.button`
 	${DeleteCancelBtnCss}
+	color: ${({ theme }) => theme.palette.GREY_05};
+
+	background-color: ${({ theme }) => theme.palette.WITHE};
+	${({ theme }) => theme.fontTheme.BODY_02};
+
+	&:hover {
+		color: ${({ theme }) => theme.palette.GREY_06};
+
+		background-color: ${({ theme }) => theme.palette.GREY_03};
+	}
 `;
diff --git a/src/components/common/button/EnterBtn.tsx b/src/components/common/button/EnterBtn.tsx
index ca19faf9..9c33eb13 100644
--- a/src/components/common/button/EnterBtn.tsx
+++ b/src/components/common/button/EnterBtn.tsx
@@ -25,6 +25,15 @@ const EnterBtnCss = css`
 
 const EnterBtnLayout = styled.button`
 	${EnterBtnCss}
+	background-color: ${({ theme }) => theme.palette.PRIMARY};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_PASSED}; /* 수정 필요 */
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* svg 색 수정 필요 */
+	}
 `;
 
 const StyledIcon = styled(Icons.Arrow_up)`
diff --git a/src/components/common/button/OkayCancelBtn.tsx b/src/components/common/button/OkayCancelBtn.tsx
index 71bae207..3ddf8ac7 100644
--- a/src/components/common/button/OkayCancelBtn.tsx
+++ b/src/components/common/button/OkayCancelBtn.tsx
@@ -27,6 +27,7 @@ const OkayBtn = styled.button`
 
 	background-color: ${({ theme }) => theme.palette.BLACK};
 	${({ theme }) => theme.fontTheme.BODY_02};
+	box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%);
 `;
 
 const CancelBtn = styled.button`
diff --git a/src/components/common/button/ProgressBtn.tsx b/src/components/common/button/ProgressBtn.tsx
index cb3e5fda..93997705 100644
--- a/src/components/common/button/ProgressBtn.tsx
+++ b/src/components/common/button/ProgressBtn.tsx
@@ -31,7 +31,16 @@ const SettingProgressLayout = styled.button`
 	width: 2.4rem;
 	height: 2.4rem;
 
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
 	border-radius: 8px;
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DEFAULT}; /* 수정 필요 */
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */
+	}
 `;
 
 const DefaultProgressLayout = styled.button`
@@ -41,5 +50,6 @@ const DefaultProgressLayout = styled.button`
 	width: 3.2rem;
 	height: 3.2rem;
 
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
 	border-radius: 10px;
 `;
diff --git a/src/components/common/button/RefreshBtn.tsx b/src/components/common/button/RefreshBtn.tsx
index 8889e6ca..e53d40a4 100644
--- a/src/components/common/button/RefreshBtn.tsx
+++ b/src/components/common/button/RefreshBtn.tsx
@@ -6,7 +6,7 @@ import Icons from '@/assets/svg/index';
 const RefreshBtn = () => {
 	return (
 		<RefreshBtnLayout>
-			<Icons.Refresh />
+			<Icons.Refresh /> {/*아이콘 사이즈 이상함 확인 필요*/}
 			<Text>동기화</Text>
 		</RefreshBtnLayout>
 	);
@@ -27,8 +27,20 @@ const RefreshBtnCss = css`
 
 const RefreshBtnLayout = styled.button`
 	${RefreshBtnCss}
+	background-color: ${({ theme }) => theme.palette.BLACK};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.GREY_06};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.GREY_05}; /* 수정 필요 */
+	}
 `;
 
 const Text = styled.p`
+	color: ${({ theme }) => theme.palette.WITHE};
 	text-align: center;
+
+	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 수정 필요 */
 `;
diff --git a/src/components/common/button/SettingCheck2Btn.tsx b/src/components/common/button/SettingCheck2Btn.tsx
index a9a95917..d611d3ab 100644
--- a/src/components/common/button/SettingCheck2Btn.tsx
+++ b/src/components/common/button/SettingCheck2Btn.tsx
@@ -3,12 +3,10 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const SettingCheck2 = (props: Props) => {
+const SettingCheck2 = () => {
 	return (
 		<SettingCheck2Layout>
-			<Icons.SettingCheck2 />
+			<Icons.SettingCheck2 /> {/*아이콘 크기 조정 필요*/}
 		</SettingCheck2Layout>
 	);
 };
@@ -27,4 +25,13 @@ const SettingCheck2Css = css`
 
 const SettingCheck2Layout = styled.button`
 	${SettingCheck2Css}
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */
+	}
 `;
diff --git a/src/components/common/button/SettingCheck3Btn.tsx b/src/components/common/button/SettingCheck3Btn.tsx
index 12b3f2a0..a044ce35 100644
--- a/src/components/common/button/SettingCheck3Btn.tsx
+++ b/src/components/common/button/SettingCheck3Btn.tsx
@@ -3,12 +3,10 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const SettingCheck3 = (props: Props) => {
+const SettingCheck3 = () => {
 	return (
 		<SettingCheck3Layout>
-			<Icons.SettingCheck3 />
+			<Icons.SettingCheck3 /> {/*아이콘 크기 조정 필요*/}
 		</SettingCheck3Layout>
 	);
 };
@@ -27,4 +25,13 @@ const SettingCheck3Css = css`
 
 const SettingCheck3Layout = styled.button`
 	${SettingCheck3Css}
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */
+	}
 `;
diff --git a/src/components/common/button/SettingDeleteBtn.tsx b/src/components/common/button/SettingDeleteBtn.tsx
index 9845be4d..0c80d1e7 100644
--- a/src/components/common/button/SettingDeleteBtn.tsx
+++ b/src/components/common/button/SettingDeleteBtn.tsx
@@ -3,12 +3,10 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const SettingDeleteBtn = (props: Props) => {
+const SettingDeleteBtn = () => {
 	return (
 		<SettingDeleteBtnLayout>
-			<Icons.DeleteIcon />
+			<Icons.DeleteIcon /> {/*아이콘 크기 조정 필요*/}
 		</SettingDeleteBtnLayout>
 	);
 };
@@ -27,4 +25,13 @@ const SettingDeleteBtnCss = css`
 
 const SettingDeleteBtnLayout = styled.button`
 	${SettingDeleteBtnCss}
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.PRIMARY}; /* 수정 필요 */
+	}
 `;
diff --git a/src/components/common/button/SettingXBtn.tsx b/src/components/common/button/SettingXBtn.tsx
index 402db435..fd2447e8 100644
--- a/src/components/common/button/SettingXBtn.tsx
+++ b/src/components/common/button/SettingXBtn.tsx
@@ -3,12 +3,10 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const SettingXBtn = (props: Props) => {
+const SettingXBtn = () => {
 	return (
 		<SettingXBtnLayout>
-			<Icons.SettingX />
+			<Icons.SettingX /> {/*아이콘 크기 조정 필요*/}
 		</SettingXBtnLayout>
 	);
 };
@@ -27,4 +25,13 @@ const SettingXBtnCss = css`
 
 const SettingXBtnLayout = styled.button`
 	${SettingXBtnCss}
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 수정 필요 */
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.BLUE_DISABLED};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.PRIMARY}; /* svg 색 수정 필요 */
+	}
 `;
diff --git a/src/components/common/button/TextBtn.tsx b/src/components/common/button/TextBtn.tsx
index af2d44f2..ee31b3c5 100644
--- a/src/components/common/button/TextBtn.tsx
+++ b/src/components/common/button/TextBtn.tsx
@@ -26,6 +26,16 @@ const SmallButton = styled.button`
 	padding: 0.3rem 1.2rem;
 
 	${textButtonCss}
+	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */
+	background-color: ${({ theme }) => theme.palette.WITHE};
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.GREY_04};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */
+	}
 `;
 
 const BigButton = styled.button`
@@ -34,5 +44,7 @@ const BigButton = styled.button`
 	padding: 0.7rem 1.6rem;
 
 	box-shadow: 0 0 24px 0 rgb(0 0 0 / 12%);
+
 	${textButtonCss}
+	${({ theme }) => theme.fontTheme.BODY_02};
 `;
diff --git a/src/components/common/button/TodayPlusBtn.tsx b/src/components/common/button/TodayPlusBtn.tsx
index d360aa79..1843fe2a 100644
--- a/src/components/common/button/TodayPlusBtn.tsx
+++ b/src/components/common/button/TodayPlusBtn.tsx
@@ -3,9 +3,7 @@ import styled from '@emotion/styled';
 
 import Icons from '@/assets/svg/index';
 
-type Props = {};
-
-const TodayPlusBtn = (props: Props) => {
+const TodayPlusBtn = () => {
 	return (
 		<TodayPlusBtnLayout>
 			<Icons.PlusArrow />
@@ -29,8 +27,24 @@ const TodayPlusBtnCss = css`
 
 const TodayPlusBtnLayout = styled.button`
 	${TodayPlusBtnCss}
+	background-color: ${({ theme }) => theme.palette.BLUE_DISABLED}; /* 색 수정 필요 */
+
+	&:hover {
+		background-color: ${({ theme }) => theme.palette.GREY_04};
+	}
+
+	&:active {
+		background-color: ${({ theme }) => theme.palette.GREY_05}; /* svg 색 수정 필요 */
+	}
 `;
 
 const Text = styled.p`
+	color: ${({ theme }) => theme.palette.PRIMARY}; /* 폰트 수정 필요 & 아이콘 색상 변경 필요 */
 	text-align: center;
+
+	${({ theme }) => theme.fontTheme.CAPTION_01}; /* 폰트 수정 필요 */
+
+	&:active {
+		color: ${({ theme }) => theme.palette.WITHE}; /* svg 색 수정 필요 */
+	}
 `;
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
index 0c7f36e1..7a9b2422 100644
--- a/src/pages/Setting.tsx
+++ b/src/pages/Setting.tsx
@@ -6,7 +6,10 @@ import EnterBtn from '@/components/common/button/EnterBtn';
 import OkayCancelBtn from '@/components/common/button/OkayCancelBtn';
 import ProgressBtn from '@/components/common/button/ProgressBtn';
 import RefreshBtn from '@/components/common/button/RefreshBtn';
+import SettingCheck2 from '@/components/common/button/SettingCheck2Btn';
+import SettingCheck3 from '@/components/common/button/SettingCheck3Btn';
 import SettingDeleteBtn from '@/components/common/button/SettingDeleteBtn';
+import SettingXBtn from '@/components/common/button/SettingXBtn';
 import StatusDoneBtn from '@/components/common/button/StatusDoneBtn';
 import StatusInProgressBtn from '@/components/common/button/StatusInProgressBtn';
 import StatusStagingBtn from '@/components/common/button/StatusStagingBtn';
@@ -15,27 +18,28 @@ import TextBtn from '@/components/common/button/TextBtn';
 import TimelineDeleteBtn from '@/components/common/button/TimelineDeleteBtn';
 import TodayPlusBtn from '@/components/common/button/TodayPlusBtn';
 
-type Props = {};
-
-const Setting = (props: Props) => {
+const Setting = () => {
 	return (
 		<div>
-			<TextBtn size="medium" text="전체" />
-			<EnterBtn />
-			<RefreshBtn />
-			<DeleteCancelBtn status="delete" />
 			<ArrangeBtn text="최신 등록순" />
-			<TodayPlusBtn />
+			<Check1Btn type="done" />
 			<DeleteBtn />
+			<DeleteCancelBtn status="delete" />
+			<EnterBtn />
+			<OkayCancelBtn type="okay" />
+			<ProgressBtn type="setting" />
+			<RefreshBtn />
+			<SettingCheck2 />
+			<SettingCheck3 />
 			<SettingDeleteBtn />
-			<Check1Btn type="done" />
-			<ProgressBtn type="defaultProgress" />
-			<TimelineDeleteBtn />
-			<StatusStagingBtn />
+			<SettingXBtn />
+			<StatusDoneBtn />
 			<StatusInProgressBtn />
+			<StatusStagingBtn />
 			<StatusTodoBtn />
-			<StatusDoneBtn />
-			<OkayCancelBtn type="okay" />
+			<TextBtn size="small" text="전체" />
+			<TimelineDeleteBtn />
+			<TodayPlusBtn />
 		</div>
 	);
 };