diff --git a/src/apis/test.ts b/src/apis/test.ts
deleted file mode 100644
index a5f9006..0000000
--- a/src/apis/test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import axios from "axios";
-
-export const testWithBtn = async (nickname: string) => {
-  return axios.get(`https://api.coffee-meet.site/api/v1/users/duplicate?nickname=${nickname}`);
-};
diff --git a/src/components/common/MultiSelector/index.tsx b/src/components/common/MultiSelector/index.tsx
index fcd87e6..0008473 100644
--- a/src/components/common/MultiSelector/index.tsx
+++ b/src/components/common/MultiSelector/index.tsx
@@ -106,7 +106,7 @@ const StyledItem = styled.button<{ isDarkMode: boolean; isSelected: boolean }>`
     props.isDarkMode
       ? props.isSelected
         ? palette.SECONDARY
-        : palette.WHITE
+        : palette.GRAY900
       : props.isSelected
       ? palette.BLUE
       : palette.TERTIARY};
diff --git a/src/components/common/NavigationBar/index.tsx b/src/components/common/NavigationBar/index.tsx
index a98f0b0..928431a 100644
--- a/src/components/common/NavigationBar/index.tsx
+++ b/src/components/common/NavigationBar/index.tsx
@@ -1,11 +1,14 @@
 import { IoChatbox } from "react-icons/io5";
 import { MdHome } from "react-icons/md";
 import { useNavigate } from "react-router-dom";
+import { getMyProfileDataOptions } from "@/libs/react-query/options/getMyProfileData.ts";
 import styled from "@emotion/styled";
+import { useQuery } from "@tanstack/react-query";
 import Avatar from "@/components/common/Avatar";
 import { FlexBox } from "@/components/common/Flexbox";
 import { Text } from "@/components/common/Text";
 import { palette } from "@/styles/palette";
+import useAuthStore from "@/store/AuthStore.tsx";
 import defaultProfileImage from "@/assets/images/defaultProfileImage.png";
 
 type NavigationBarProps = {
@@ -14,6 +17,11 @@ type NavigationBarProps = {
 
 const NavigationBar = ({ isDarkMode }: NavigationBarProps) => {
   const navigate = useNavigate();
+  const { data } = useQuery({
+    ...getMyProfileDataOptions,
+    enabled: useAuthStore.getState().authTokens?.accessToken !== null,
+  });
+
   const moveFromNavigationBar = (path: string) => {
     navigate(`/${path}`);
   };
@@ -74,7 +82,7 @@ const NavigationBar = ({ isDarkMode }: NavigationBarProps) => {
               <Avatar
                 width={30}
                 height={30}
-                imgUrl={defaultProfileImage}
+                imgUrl={data?.profileImageUrl ?? defaultProfileImage}
                 margin={"0"}
               />
             </StyledProfileImageWrapper>
diff --git a/src/components/common/RegisterInput/index.tsx b/src/components/common/RegisterInput/index.tsx
index 87a4947..2681569 100644
--- a/src/components/common/RegisterInput/index.tsx
+++ b/src/components/common/RegisterInput/index.tsx
@@ -9,19 +9,21 @@ interface InputProps extends ComponentProps<"input"> {
   height?: number;
   placeholder: string;
   type?: string;
+  isDarkMode: boolean;
 }
 
 /**
- * @param width : input width
- * @param height : input height
- * @param placeholder : input placeholder
- * @param type : input type
- * @param props : input other props
+ * @param width : number 너비
+ * @param height : number 높이
+ * @param placeholder : string 빈 값일 때 보여줄 텍스트
+ * @param type : string input 타입
+ * @param props : string 기타 props
+ * @param isDarkMode : boolean 다크모드 여부
  * @description : 정보 등록 및 수정 페이지에서 활용하는 Input 컴포넌트입니다. form 구성 시 {...register("label")}를 prop으로 전달해주세요.
  * @returns
  */
 const RegisterInput = forwardRef<HTMLInputElement, InputProps>(
-  ({ width, height, placeholder, type, ...props }, ref) => {
+  ({ width, height, placeholder, type, isDarkMode, ...props }, ref) => {
     return (
       <StyleInputWrapper>
         <StyleInput
@@ -29,6 +31,7 @@ const RegisterInput = forwardRef<HTMLInputElement, InputProps>(
           heightProps={height}
           placeholder={placeholder}
           type={type}
+          isDarkMode={isDarkMode}
           {...props}
           ref={ref}
         />
@@ -45,10 +48,10 @@ const StyleInputWrapper = styled.span`
   align-items: center;
   /* width: 100%; */
 `;
-const StyleInput = styled.input<{ widthProps?: number; heightProps?: number }>`
-  background-color: ${palette.WHITE};
+const StyleInput = styled.input<{ widthProps?: number; heightProps?: number; isDarkMode: boolean }>`
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.WHITE)};
   height: ${({ heightProps }) => (heightProps ? `${heightProps}px` : "46px")};
-  border: 1px solid ${palette.GRAY200};
+  border: 1px solid ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.GRAY200)};
   border-radius: 10px;
   width: ${({ widthProps }) => (widthProps ? `${widthProps}px` : "100%")};
   font-size: ${typo.Body_14()};
diff --git a/src/components/common/WhiteSelectorButton/index.tsx b/src/components/common/WhiteSelectorButton/index.tsx
deleted file mode 100644
index ac6f144..0000000
--- a/src/components/common/WhiteSelectorButton/index.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useState } from "react";
-import styled from "@emotion/styled";
-import { palette } from "@/styles/palette";
-
-type ToggleButtonProps = {
-  buttonName: string;
-  selectedButtonColor: string;
-  defaultButtonColor?: string;
-  onClick?: () => void;
-};
-
-type StyledButtonProps = {
-  backgroundColor: string;
-};
-
-const WhiteSelectorButton = ({
-  buttonName,
-  selectedButtonColor,
-  defaultButtonColor = palette.TERTIARY,
-  onClick,
-}: ToggleButtonProps) => {
-  const [backgroundColor, setBackgroundColor] = useState(defaultButtonColor);
-
-  const handleButtonClick = () => {
-    setBackgroundColor((prevColor) =>
-      prevColor === defaultButtonColor ? selectedButtonColor : defaultButtonColor,
-    );
-    if (onClick) {
-      onClick();
-    }
-  };
-
-  return (
-    <StyledButton
-      backgroundColor={backgroundColor}
-      onClick={handleButtonClick}
-    >
-      {buttonName}
-    </StyledButton>
-  );
-};
-
-const StyledButton = styled.button<StyledButtonProps>`
-  margin: 0 4px;
-  height: 36px;
-  padding: 10px 15px 10px 15px;
-  font-size: 12px;
-  cursor: pointer;
-  border: none;
-  border-radius: 10px;
-  background-color: ${(props) => props.backgroundColor};
-  transition: background-color 0.3s;
-  &:hover {
-    opacity: 0.9;
-  }
-  &:focus {
-    outline: none;
-  }
-  color: ${palette.WHITE};
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 1;
-  letter-spacing: -1px;
-  font-weight: 600;
-`;
-
-export default WhiteSelectorButton;
diff --git a/src/pages/chatListDetail/ChatListDetail.tsx b/src/pages/chatListDetail/ChatListDetail.tsx
index 9282eb1..4bea162 100644
--- a/src/pages/chatListDetail/ChatListDetail.tsx
+++ b/src/pages/chatListDetail/ChatListDetail.tsx
@@ -66,6 +66,7 @@ const ChatListDetail = () => {
                 ref={messageRef}
                 width={250}
                 height={35}
+                isDarkMode={false}
                 placeholder={"대화 불가능한 상태입니다."}
                 disabled
               ></RegisterInput>
diff --git a/src/pages/loginPending/LoginPending.tsx b/src/pages/loginPending/LoginPending.tsx
index 0d09f80..16f5cea 100644
--- a/src/pages/loginPending/LoginPending.tsx
+++ b/src/pages/loginPending/LoginPending.tsx
@@ -33,7 +33,7 @@ const LoginPending = () => {
         setUserId(userId);
 
         if (!isRegistered) {
-          navigate("/register/user", { state: { userId: userId } });
+          navigate("/register/user");
         }
 
         if (isRegistered) {
diff --git a/src/pages/profile/ProfileCompanyEdit.tsx b/src/pages/profile/ProfileCompanyEdit.tsx
index b96459c..2982af2 100644
--- a/src/pages/profile/ProfileCompanyEdit.tsx
+++ b/src/pages/profile/ProfileCompanyEdit.tsx
@@ -146,6 +146,7 @@ const ProfileCompanyEdit = () => {
               width={343}
               placeholder={"회사 이름"}
               defaultValue={data?.companyName}
+              isDarkMode={isDarkMode}
               {...companyInfoForm.register("companyName")}
             />
             <div>
@@ -166,6 +167,7 @@ const ProfileCompanyEdit = () => {
               <RegisterInput
                 width={260}
                 placeholder={"회사 이메일"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("companyEmail")}
               />
               <NormalButton
@@ -200,6 +202,7 @@ const ProfileCompanyEdit = () => {
               <RegisterInput
                 width={343}
                 placeholder={"인증코드 6자리 입력"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("certCode")}
               />
               <StyleVerificationEmailButton
diff --git a/src/pages/profile/ProfileEdit.tsx b/src/pages/profile/ProfileEdit.tsx
index 5cc318c..8b44325 100644
--- a/src/pages/profile/ProfileEdit.tsx
+++ b/src/pages/profile/ProfileEdit.tsx
@@ -37,8 +37,8 @@ const ProfileEdit = () => {
   const userInfoForm = useForm<UserInfoStateType>({
     resolver: zodResolver(UserInfoSchema),
   });
-  const queryClient = useQueryClient();
 
+  const queryClient = useQueryClient();
   const data = queryClient.getQueryData<MyProfileData>(["myProfileData"]);
 
   const checkNicknameDuplicated = (nickname: string) => {
@@ -76,7 +76,6 @@ const ProfileEdit = () => {
             type: "success",
             isDarkMode,
           });
-          await queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
           await queryClient.refetchQueries({ queryKey: ["myProfileData"] });
         })
         .catch(() => {
@@ -110,7 +109,6 @@ const ProfileEdit = () => {
           type: "success",
           isDarkMode,
         });
-        await queryClient.invalidateQueries({ queryKey: ["myProfileData"] });
         await queryClient.refetchQueries({ queryKey: ["myProfileData"] });
         navigate("/profile");
       })
@@ -146,7 +144,7 @@ const ProfileEdit = () => {
           <Avatar
             width={80}
             height={80}
-            imgUrl={data?.profileImageUrl ?? imgSrc}
+            imgUrl={imgSrc === "default_image_url" ? data!.profileImageUrl : imgSrc}
           />
           <Spacing size={20} />
           <label htmlFor={"profile-image-upload"}>
@@ -166,6 +164,7 @@ const ProfileEdit = () => {
                 width={240}
                 placeholder={"닉네임 (10자 제한)"}
                 defaultValue={data?.nickname}
+                isDarkMode={isDarkMode}
                 {...userInfoForm.register("nickname")}
               />
               <NormalButton
diff --git a/src/pages/register/RegisterCompany.tsx b/src/pages/register/RegisterCompany.tsx
index d5e1031..66c93c4 100644
--- a/src/pages/register/RegisterCompany.tsx
+++ b/src/pages/register/RegisterCompany.tsx
@@ -1,7 +1,9 @@
 import { useEffect } from "react";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { MdOutlinePhotoCamera, MdWbSunny } from "react-icons/md";
+import { BiSolidMoon } from "react-icons/bi";
+import { MdOutlinePhotoCamera } from "react-icons/md";
+import { RiSunFill } from "react-icons/ri";
 import { useLocation, useNavigate } from "react-router-dom";
 import type { CompanyInfoStateType } from "@/schemas/companyInfo.ts";
 import { CompanyInfoSchema } from "@/schemas/companyInfo.ts";
@@ -22,6 +24,7 @@ import Spacing from "@/components/common/Spacing";
 import useToast from "@/hooks/useToast";
 import { palette } from "@/styles/palette";
 import { typo } from "@/styles/typo";
+import useAuthStore from "@/store/AuthStore.tsx";
 import useThemeStore from "@/store/ThemeStore";
 import { JobList } from "@/constants/index.ts";
 
@@ -29,6 +32,8 @@ const RegisterCompany = () => {
   const navigate = useNavigate();
   const { showToast } = useToast();
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const toggleDarkMode = useThemeStore((state) => state.toggleDarkMode);
+  const userId = useAuthStore((state) => state.userId);
   const userInfo: UserInfoType = useLocation().state;
   const [isCodeSame, setIsCodeSame] = useState<null | boolean>(null);
   const [codeChecked, setCodeChecked] = useState<null | boolean>(null);
@@ -112,7 +117,7 @@ const RegisterCompany = () => {
     }
 
     const formData = new FormData();
-    formData.append("userId", userInfo.userId);
+    formData.append("userId", userId.toString());
     formData.append("companyName", data.companyName);
     formData.append("companyEmail", data.companyEmail);
     formData.append("department", data.department[0]);
@@ -137,7 +142,7 @@ const RegisterCompany = () => {
   };
 
   return (
-    <StyleRegisterWrapper>
+    <StyleRegisterWrapper isDarkMode={isDarkMode}>
       <StyleRegisterHeader>
         <Spacing size={64} />
         <FlexBox
@@ -148,20 +153,36 @@ const RegisterCompany = () => {
           <StyleIcon>
             <BackChevron
               hasBackground={true}
+              isDarkMode={isDarkMode}
               prevClick={() => {
                 navigate("/register/user");
               }}
             />
           </StyleIcon>
-          <StyleHeaderText>{"회사 인증"}</StyleHeaderText>
+          <StyleHeaderText isDarkMode={isDarkMode}>{"회사 인증"}</StyleHeaderText>
           <StyleIcon>
-            <MdWbSunny
-              size={20}
-              color={palette.TERTIARY}
-            />
+            {isDarkMode ? (
+              <RiSunFill
+                size={"20px"}
+                style={{
+                  color: palette.TERTIARY,
+                  cursor: "pointer",
+                }}
+                onClick={toggleDarkMode}
+              />
+            ) : (
+              <BiSolidMoon
+                size={"20px"}
+                style={{
+                  color: palette.TERTIARY,
+                  cursor: "pointer",
+                }}
+                onClick={toggleDarkMode}
+              />
+            )}
           </StyleIcon>
         </FlexBox>
-        <StyleDivider />
+        <StyleDivider isDarkMode={isDarkMode} />
       </StyleRegisterHeader>
       <Spacing size={13} />
       <form onSubmit={companyInfoForm.handleSubmit(handleCompleteSignupProcess)}>
@@ -172,8 +193,9 @@ const RegisterCompany = () => {
           >
             <FlexBox gap={16}>
               <RegisterInput
-                width={350}
+                width={310}
                 placeholder={"회사 명"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("companyName")}
               />
             </FlexBox>
@@ -191,12 +213,13 @@ const RegisterCompany = () => {
             </div>
             <FlexBox gap={16}>
               <RegisterInput
-                width={260}
+                width={220}
                 placeholder={"회사 이메일"}
+                isDarkMode={isDarkMode}
                 {...companyInfoForm.register("companyEmail")}
               />
               <NormalButton
-                normalButtonType={"email-certify"}
+                normalButtonType={isDarkMode ? "email-certify-dark" : "email-certify"}
                 onClick={(event) => {
                   event.preventDefault();
                   handleEmailCertification(companyInfoForm.getValues("companyEmail"));
@@ -226,8 +249,9 @@ const RegisterCompany = () => {
             }}
           >
             <RegisterInput
-              width={343}
+              width={313}
               placeholder={"인증코드 6자리 입력"}
+              isDarkMode={isDarkMode}
               {...companyInfoForm.register("certCode")}
             />
             <StyleVerificationEmailButton
@@ -262,7 +286,7 @@ const RegisterCompany = () => {
           )}
 
           <Spacing size={13} />
-          <StyleInterestText>{"직무정보"}</StyleInterestText>
+          <StyleSectionText isDarkMode={isDarkMode}>{"직무정보"}</StyleSectionText>
           <FlexBox direction={"column"}>
             <Controller
               name={"department"}
@@ -295,9 +319,9 @@ const RegisterCompany = () => {
             gap={0}
             direction={"column"}
           >
-            <StyleText> {"명함을 업로드 해주세요!"}</StyleText>
+            <StyleText isDarkMode={isDarkMode}> {"명함을 업로드 해주세요!"}</StyleText>
             <label htmlFor={"business-card-input"}>
-              <StyleImageCard>
+              <StyleImageCard isDarkMode={isDarkMode}>
                 {uploadedURL ? (
                   <img
                     src={uploadedURL}
@@ -340,16 +364,16 @@ const RegisterCompany = () => {
   );
 };
 
-const StyleRegisterWrapper = styled.div`
-  background-color: ${palette.GRAY100};
+const StyleRegisterWrapper = styled.div<{ isDarkMode: boolean }>`
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_BLUE : palette.GRAY100)};
   height: 100%;
   overflow: scroll;
 `;
 const StyleDataWrapper = styled.div``;
-const StyleImageCard = styled.div`
+const StyleImageCard = styled.div<{ isDarkMode: boolean }>`
   width: 250px;
   height: 150px;
-  background: ${palette.WHITE};
+  background: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.WHITE)};
   border: 1px dashed ${palette.GRAY600};
   border-radius: 10px;
   display: flex;
@@ -359,18 +383,20 @@ const StyleImageCard = styled.div`
   align-items: center;
 `;
 const StyleRegisterHeader = styled.div``;
-const StyleHeaderText = styled.span`
+const StyleHeaderText = styled.span<{ isDarkMode: boolean }>`
   font-size: ${typo.Body_24()};
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)};
 `;
-const StyleDivider = styled.hr`
+const StyleDivider = styled.hr<{ isDarkMode: boolean }>`
   height: 1px;
-  background-color: ${palette.GRAY200};
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.GRAY200)};
   border: 0;
 `;
-const StyleInterestText = styled.div`
+const StyleSectionText = styled.div<{ isDarkMode: boolean }>`
   padding: 10px;
   margin-left: 25px;
   font-size: ${typo.Body_18()};
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)};
 `;
 const StyleSubmitButtonWrapper = styled.div`
   display: flex;
@@ -378,9 +404,10 @@ const StyleSubmitButtonWrapper = styled.div`
   justify-content: center;
   position: relative;
 `;
-const StyleText = styled.div`
+const StyleText = styled.div<{ isDarkMode: boolean }>`
   font-size: ${typo.Body_12()};
   margin: 10px;
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)};
 `;
 const StyleIcon = styled.button`
   cursor: pointer;
@@ -391,7 +418,7 @@ export const StyleVerificationEmailButton = styled.button`
   height: 25px;
   background-color: ${palette.TERTIARY};
   position: absolute;
-  right: 30px;
+  right: 45px;
   color: ${palette.WHITE};
   border-radius: 10px;
   font-size: 12px;
diff --git a/src/pages/register/RegisterUser.tsx b/src/pages/register/RegisterUser.tsx
index e842e66..5472b48 100644
--- a/src/pages/register/RegisterUser.tsx
+++ b/src/pages/register/RegisterUser.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { MdWbSunny } from "react-icons/md";
+import { BiSolidMoon } from "react-icons/bi";
+import { RiSunFill } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
 import type { UserInfoStateType } from "@/schemas/userInfo";
 import { UserInfoSchema } from "@/schemas/userInfo";
@@ -16,18 +17,17 @@ import Spacing from "@/components/common/Spacing";
 import useToast from "@/hooks/useToast";
 import { palette } from "@/styles/palette";
 import { typo } from "@/styles/typo";
-import useAuthStore from "@/store/AuthStore.tsx";
 import useThemeStore from "@/store/ThemeStore";
 import { InterestList } from "@/constants/index.ts";
 
 const RegisterUser = () => {
   const navigate = useNavigate();
-  const userId = useAuthStore((state) => state.userId);
 
   const [doubleChecked, setDoubleChecked] = useState<null | boolean>(false);
   const [nicknameDuplicated, setNicknameDuplicated] = useState<null | boolean>(null);
   const { showToast } = useToast();
   const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const toggleDarkMode = useThemeStore((state) => state.toggleDarkMode);
 
   const userInfoForm = useForm<UserInfoStateType>({
     resolver: zodResolver(UserInfoSchema),
@@ -82,7 +82,6 @@ const RegisterUser = () => {
   const submitUserProfileData = (data: UserInfoStateType) => {
     if (formValidation(data.nickname)) {
       const userInfo = {
-        userId: userId,
         nickname: data.nickname,
         keywords: data.interest,
       };
@@ -91,36 +90,51 @@ const RegisterUser = () => {
   };
 
   return (
-    <StyleRegisterWrapper>
+    <StyleRegisterWrapper isDarkMode={isDarkMode}>
       <StyleRegisterHeader>
         <Spacing size={64} />
         <FlexBox
-          gap={10}
           fullWidth={true}
-          justify={"space-around"}
+          justify={"flex-end"}
         >
-          <span></span>
-          <StyleHeaderText>{"프로필 등록"} </StyleHeaderText>
+          <StyleHeaderText isDarkMode={isDarkMode}>{"프로필 등록"} </StyleHeaderText>
           <StyleIcon>
-            <MdWbSunny
-              size={20}
-              color={palette.TERTIARY}
-            />
+            {isDarkMode ? (
+              <RiSunFill
+                size={"20px"}
+                style={{
+                  color: palette.TERTIARY,
+                  cursor: "pointer",
+                }}
+                onClick={toggleDarkMode}
+              />
+            ) : (
+              <BiSolidMoon
+                size={"20px"}
+                style={{
+                  color: palette.TERTIARY,
+                  cursor: "pointer",
+                }}
+                onClick={toggleDarkMode}
+              />
+            )}
           </StyleIcon>
         </FlexBox>
         <Spacing size={11} />
-        <StyleDivider />
+        <StyleDivider isDarkMode={isDarkMode} />
       </StyleRegisterHeader>
       <Spacing size={73} />
       <form onSubmit={userInfoForm.handleSubmit(submitUserProfileData)}>
-        <FlexBox gap={16}>
+        <StyleSectionText isDarkMode={isDarkMode}>{"닉네임"}</StyleSectionText>
+        <FlexBox gap={10}>
           <RegisterInput
-            width={260}
+            width={240}
             placeholder={"닉네임 (10자 제한)"}
+            isDarkMode={isDarkMode}
             {...userInfoForm.register("nickname")}
           />
           <NormalButton
-            normalButtonType={"nickname-duplicate"}
+            normalButtonType={isDarkMode ? "nickname-duplicate-dark" : "nickname-duplicate"}
             onClick={(event) => {
               event.preventDefault();
               doubleCheckNickName(userInfoForm.getValues("nickname"));
@@ -160,7 +174,7 @@ const RegisterUser = () => {
           </AlertText>
         )}
         <Spacing size={44} />
-        <StyleInterestText>{"관심사"}</StyleInterestText>
+        <StyleSectionText isDarkMode={isDarkMode}>{"관심사"}</StyleSectionText>
         <FlexBox direction={"column"}>
           <Controller
             name={"interest"}
@@ -182,23 +196,26 @@ const RegisterUser = () => {
     </StyleRegisterWrapper>
   );
 };
-const StyleRegisterWrapper = styled.div`
-  background-color: ${palette.GRAY100};
+const StyleRegisterWrapper = styled.div<{ isDarkMode: boolean }>`
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_BLUE : palette.GRAY100)};
   height: 100%;
 `;
 const StyleRegisterHeader = styled.div``;
-const StyleHeaderText = styled.span`
+const StyleHeaderText = styled.span<{ isDarkMode: boolean }>`
+  margin: 0 auto;
   font-size: ${typo.Body_24()};
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)};
 `;
-const StyleDivider = styled.hr`
+const StyleDivider = styled.hr<{ isDarkMode: boolean }>`
   height: 1px;
-  background-color: ${palette.GRAY200};
+  background-color: ${({ isDarkMode }) => (isDarkMode ? palette.GRAY600 : palette.GRAY200)};
   border: 0;
 `;
-const StyleInterestText = styled.div`
+const StyleSectionText = styled.div<{ isDarkMode: boolean }>`
   padding: 10px;
   margin-left: 25px;
   font-size: ${typo.Body_18()};
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_WHITE : palette.BLACK)};
 `;
 const StyleSubmitButtonWrapper = styled.div`
   display: flex;
@@ -209,5 +226,7 @@ const StyleSubmitButtonWrapper = styled.div`
 `;
 const StyleIcon = styled.button`
   cursor: pointer;
+  position: absolute;
+  margin-right: 40px;
 `;
 export default RegisterUser;
diff --git a/src/styles/palette.ts b/src/styles/palette.ts
index d2e79fe..49e1e2e 100644
--- a/src/styles/palette.ts
+++ b/src/styles/palette.ts
@@ -16,6 +16,8 @@ export const palette = {
   YELLOW: "#FEE500",
   BLUE: "#004BFF",
   DARK_ICON: "#4F5965",
+  GRAY900: "#1C1F25",
+  GRAY800: "#2A2E35",
   GRAY700: "#313741",
   GRAY600: "#33363B",
   GRAY500: "#717580",