diff --git a/web/components/atoms/BackButton.tsx b/web/components/atoms/BackButton.tsx
index d5f3df5..762f622 100644
--- a/web/components/atoms/BackButton.tsx
+++ b/web/components/atoms/BackButton.tsx
@@ -7,11 +7,32 @@ interface Props {
 
 export default function BackButton({ onClick, disabled }: Props) {
 	return (
-		<button className="group flex items-center gap-[2px] text-[#8C8C8C]" onClick={onClick} disabled={disabled}>
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-				<path d="M15 18L9 12L15 6" className={`${disabled ? 'stroke-gray-500' : "group-hover:stroke-gray-500"}`} stroke="#8C8C8C" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+		<button
+			className='group flex items-center gap-[2px] text-medium-gray'
+			onClick={onClick}
+			disabled={disabled}
+		>
+			<svg
+				xmlns='http://www.w3.org/2000/svg'
+				width='24'
+				height='24'
+				viewBox='0 0 24 24'
+				fill='none'
+			>
+				<path
+					d='M15 18L9 12L15 6'
+					className={`${disabled ? 'stroke-dark-gray' : 'group-hover:stroke-dark-gray'}`}
+					stroke='#8C8C8C'
+					stroke-width='3'
+					stroke-linecap='square'
+					stroke-linejoin='round'
+				/>
 			</svg>
-			<div className={`${disabled ? 'text-gray-500' :'group-hover:text-gray-500'}`}>Back</div>
+			<div
+				className={`${disabled ? 'text-stroke-dark-gray' : 'group-hover:text-stroke-dark-gray'}`}
+			>
+				Back
+			</div>
 		</button>
 	);
 }