diff --git a/src/pages/auth/signup/CheckTermsAndConditions.tsx b/src/pages/auth/signup/CheckTermsAndConditions.tsx
index 7ed2b9b..c8888fe 100644
--- a/src/pages/auth/signup/CheckTermsAndConditions.tsx
+++ b/src/pages/auth/signup/CheckTermsAndConditions.tsx
@@ -1,4 +1,5 @@
 import { stepButtonProps, stepInstruction } from '@/store/common';
+import { theme } from '@/styles';
 import {
   Box,
   Checkbox,
@@ -126,7 +127,7 @@ const CheckTermsAndConditions = (props: any) => {
                 <Divider
                   variant="middle"
                   sx={{
-                    backgroundColor: 'primary.dark',
+                    backgroundColor: theme.palette.grey![300],
                     height: '3px',
                     border: 'none',
                     margin: '10px 0 10px 5px',
diff --git a/src/pages/auth/signup/SignUp.tsx b/src/pages/auth/signup/SignUp.tsx
index 6da4032..753f4e6 100644
--- a/src/pages/auth/signup/SignUp.tsx
+++ b/src/pages/auth/signup/SignUp.tsx
@@ -13,6 +13,7 @@ import CheckTermsAndConditions from './CheckTermsAndConditions';
 import SetEmail from './SetEmail';
 import SetNickname from './SetNickname';
 import CommonHeader from '@/components/layout/CommonHeader';
+import { theme } from '@/styles';
 
 const SignUp = () => {
   const currentStepIndex = useRecoilValue(stepIndex);
@@ -36,6 +37,7 @@ const SignUp = () => {
   const LinearProgressWithLabel = (
     props: LinearProgressProps & { value: number },
   ) => {
+    console.log(theme.palette)
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column' }}>
         <Box sx={{ minWidth: 35, mb: '5px', mr: 1 }}>
@@ -55,7 +57,7 @@ const SignUp = () => {
         <Box sx={{ m: 0.5 }}>
           <LinearProgress
             variant="determinate"
-            sx={{ width: '100%', backgroundColor: 'primary.dark' }}
+            sx={{ width: '100%', backgroundColor: theme.palette.grey![300] }}
             {...props}
           />
         </Box>