diff --git a/src/assets/svg/Delete.svg b/src/assets/svg/Delete.svg
index 69d9fe9c..7b374138 100644
--- a/src/assets/svg/Delete.svg
+++ b/src/assets/svg/Delete.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5.32812 1.23242H9.82812M0.828125 3.48242H14.3281M12.8281 3.48242L12.3022 11.3719C12.2232 12.5556 12.1838 13.1474 11.9281 13.5962C11.7031 13.9913 11.3636 14.3089 10.9544 14.5072C10.4896 14.7324 9.89645 14.7324 8.71013 14.7324H6.44612C5.2598 14.7324 4.66665 14.7324 4.20188 14.5072C3.79269 14.3089 3.45319 13.9913 3.22811 13.5962C2.97246 13.1474 2.933 12.5556 2.85409 11.3719L2.32812 3.48242M6.07812 6.85742V10.6074M9.07812 6.85742V10.6074" stroke="#FF7950" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.75 1.25H10.25M1.25 3.5H14.75M13.25 3.5L12.724 11.3895C12.6451 12.5732 12.6057 13.165 12.35 13.6138C12.1249 14.0088 11.7854 14.3265 11.3762 14.5248C10.9115 14.75 10.3183 14.75 9.13201 14.75H6.86799C5.68168 14.75 5.08852 14.75 4.62375 14.5248C4.21457 14.3265 3.87507 14.0088 3.64999 13.6138C3.39433 13.165 3.35488 12.5732 3.27596 11.3895L2.75 3.5M6.5 6.875V10.625M9.5 6.875V10.625" stroke="#FF7950" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/common/button/settingBtn/SettingDeleteBtn.tsx b/src/components/common/button/settingBtn/SettingDeleteBtn.tsx
index a2dd400d..b2cd1883 100644
--- a/src/components/common/button/settingBtn/SettingDeleteBtn.tsx
+++ b/src/components/common/button/settingBtn/SettingDeleteBtn.tsx
@@ -1,48 +1,68 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
+import { smallIcon, bigIcon, SettingCss, smallSize, bigSize } from './settingBtnStyle';
+
 import Icons from '@/assets/svg/index';
 
 interface SettingDeleteBtnProps {
+	size: 'small' | 'big';
+	onClick?: () => void;
 	isHover: boolean;
 	isPressed: boolean;
-	onClick?: () => void;
+	isActive: boolean;
 }
 
-function SettingDeleteBtn({ isHover, isPressed, onClick }: SettingDeleteBtnProps) {
+function SettingDeleteBtn({ size, onClick, isHover, isPressed, isActive }: SettingDeleteBtnProps) {
+	const StyledSettingDeleteIcon = styled(Icons.DeleteIcon)<{ size: string }>`
+		${({ size }) => (size === 'small' ? smallIcon : bigIcon)}
+	`;
 	return (
-		<SettingDeleteBtnLayout isHover={isHover} isPressed={isPressed} onClick={onClick}>
-			<StyledDeleteIcon />
+		<SettingDeleteBtnLayout size={size} onClick={onClick} isHover={isHover} isPressed={isPressed} isActive={isActive}>
+			<StyledSettingDeleteIcon size={size} />
 		</SettingDeleteBtnLayout>
 	);
 }
 
 export default SettingDeleteBtn;
 
-const SettingDeleteBtnCss = css`
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 2.4rem;
-	height: 2.4rem;
-
-	border-radius: 8px;
-`;
-
-const SettingDeleteBtnLayout = styled.button<{ isHover: boolean; isPressed: boolean }>`
-	${SettingDeleteBtnCss}
-	background-color: ${({ theme, isPressed }) => (isPressed ? theme.palette.Primary : theme.palette.Blue.Blue1)};
+const SettingDeleteBtnLayout = styled.button<{
+	size: string;
+	isHover: boolean;
+	isPressed: boolean;
+	isActive: boolean;
+}>`
+	${SettingCss}
+	${({ size }) => (size === 'small' ? smallSize : bigSize)};
+	background-color: ${({ theme }) => theme.palette.Orange.Orange2};
 
 	${({ isHover, theme }) =>
 		isHover &&
 		css`
 			&:hover {
-				background-color: ${theme.palette.Blue.Blue3};
+				background-color: ${theme.palette.Orange.Orange4};
 			}
 		`}
-`;
 
-const StyledDeleteIcon = styled(Icons.DeleteIcon)`
-	width: 1.4rem;
-	height: 1.4rem;
+	${({ isActive, theme }) =>
+		isActive &&
+		css`
+			&:active {
+				background-color: ${theme.palette.Secondary};
+
+				path {
+					stroke: ${theme.palette.Grey.White};
+				}
+			}
+		`}
+
+	${({ isPressed, theme }) =>
+		isPressed &&
+		css`
+			background-color: ${theme.palette.Secondary};
+
+			path {
+				stroke: ${theme.palette.Grey.White};
+			}
+		`}
 `;
diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
index 42153496..87c6926b 100644
--- a/src/pages/Setting.tsx
+++ b/src/pages/Setting.tsx
@@ -36,7 +36,7 @@ function Setting() {
 			<ProgressBtn type="defaultProgress" />
 			<RefreshBtn isDisabled={false} />
 
-			<SettingDeleteBtn isHover isPressed />
+			<SettingDeleteBtn size="big" isHover isPressed={false} isActive />
 			<StatusDoneBtn />
 			<StatusInProgressBtn />
 			<StatusStagingBtn />