diff --git a/package.json b/package.json
index 1a1de4c..e4842cc 100644
--- a/package.json
+++ b/package.json
@@ -28,13 +28,14 @@
     "*.js": "eslint --cache --fix"
   },
   "dependencies": {
+    "@aws-amplify/auth": "^6.0.27",
     "@aws-amplify/ui-react": "^6.1.6",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/eslint-plugin": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@types/webpack-env": "^1.18.4",
-    "aws-amplify": "^6.0.24",
+    "aws-amplify": "^6.0.27",
     "axios": "^1.6.8",
     "bootstrap": "5.3.3",
     "css-loader": "^6.10.0",
diff --git a/src/App.tsx b/src/App.tsx
index 7807a9e..460cc94 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,46 +1,107 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import '@aws-amplify/ui-react/styles.css';
-import { Amplify } from 'aws-amplify';
-import awsConfig from './awsConfig';
+import { getCurrentUser } from 'aws-amplify/auth';
 import MainLayout from './components/layout/MainLayout';
 import InviteTeamModal from '@/components/inviteTeam/InviteTeamModal';
 import SubLayout from '@/components/layout/PageSubLayout';
 import ProfileLayout from '@/components/layout/ProfileLayout';
+import AuthPage from '@/pages/AuthPage';
 import CreateRetroPage from '@/pages/CreateRetroPage';
 import HomePage from '@/pages/HomePage';
-import LoginPage from '@/pages/LoginPage';
 import MyPage from '@/pages/MyPage';
-import RegisterPage from '@/pages/RegisterPage';
 import SurveyPage from '@/pages/SurveyPage';
 import { WriteRetroPersonalPage } from '@/pages/WriteRetroPersonalPage';
 import { WriteRetroRevisePersonalPage } from '@/pages/WriteRetroRevisePersonalPage';
 import { WriteRetroReviseTeamPage } from '@/pages/WriteRetroReviseTeamPage';
 import { WriteRetroTeamPage } from '@/pages/WriteRetroTeamPage';
 
-Amplify.configure(awsConfig);
+interface PrivateRouteProps {
+  children: ReactElement;
+}
 
+// 로그인 상태 확인, 로그인 안 되어있는데 접근하면 "/" 로 리다이렉트함
+const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+  const location = useLocation();
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, []);
+
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    } finally {
+      setIsChecking(false);
+    }
+  };
+
+  if (isChecking) {
+    return <div>로딩 중...</div>; // 로그인 상태 확인 중
+  }
+
+  return isLoggedIn ? children : <Navigate to="/" replace state={{ from: location }} />;
+};
+
+// App 컴포넌트 수정
 const App = () => {
   return (
     <>
       <Router>
         <Routes>
           <Route element={<SubLayout />}>
-            <Route path="/create" element={<CreateRetroPage />}></Route>
-            <Route path="/invite" element={<InviteTeamModal />}></Route>
-            <Route path="/WriteRetroTeamPage" element={<WriteRetroTeamPage />}></Route>
-            <Route path="/WriteRetroPersonalPage" element={<WriteRetroPersonalPage />}></Route>
-            <Route path="/WriteRetroReviseTeamPage" element={<WriteRetroReviseTeamPage />}></Route>
-            <Route path="/WriteRetroRevisePersonalPage" element={<WriteRetroRevisePersonalPage />}></Route>
+            <Route
+              path="/create"
+              element={
+                <PrivateRoute>
+                  <CreateRetroPage />
+                </PrivateRoute>
+              }
+            ></Route>
+            <Route
+              path="/invite"
+              element={
+                <PrivateRoute>
+                  <InviteTeamModal />
+                </PrivateRoute>
+              }
+            ></Route>
+            <Route
+              path="/WriteRetroTeamPage"
+              element={
+                <PrivateRoute>
+                  <WriteRetroTeamPage />
+                </PrivateRoute>
+              }
+            ></Route>
           </Route>
           <Route element={<ProfileLayout />}>
-            <Route path="/my" element={<MyPage />}></Route>
+            <Route
+              path="/my"
+              element={
+                <PrivateRoute>
+                  <MyPage />
+                </PrivateRoute>
+              }
+            ></Route>
           </Route>
           <Route element={<MainLayout />}>
             <Route path="/" element={<HomePage />}></Route>
           </Route>
-          <Route path="/login" element={<LoginPage />}></Route>
-          <Route path="/register" element={<RegisterPage />}></Route>
-          <Route path="/survey" element={<SurveyPage />}></Route>
+          <Route path="/login" element={<AuthPage />}></Route>
+          <Route
+            path="/survey"
+            element={
+              <PrivateRoute>
+                <SurveyPage />
+              </PrivateRoute>
+            }
+          ></Route>
         </Routes>
       </Router>
     </>
diff --git a/src/components/layout/parts/MainNavBar.tsx b/src/components/layout/parts/MainNavBar.tsx
index 6d70ed4..5e14854 100644
--- a/src/components/layout/parts/MainNavBar.tsx
+++ b/src/components/layout/parts/MainNavBar.tsx
@@ -1,16 +1,48 @@
+import { useEffect, useState } from 'react';
 import { PersonCircle } from 'react-bootstrap-icons';
 import { useNavigate } from 'react-router-dom';
+import { Button } from '@chakra-ui/react';
+import { getCurrentUser, signOut } from 'aws-amplify/auth';
 import LogoBox from './LogoBox';
 import MenuBar from './MenuBar';
 import * as S from '@/styles/layout/layout.style';
 
 const MainNavBar = () => {
   const navigate = useNavigate();
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
-  const handleLogin = () => {
-    navigate('/login');
+  useEffect(() => {
+    checkLoginStatus();
+  }, []);
+
+  const checkLoginStatus = async () => {
+    try {
+      await getCurrentUser();
+      setIsLoggedIn(true);
+    } catch (error) {
+      setIsLoggedIn(false);
+    }
+  };
+
+  const handleLoginOrLogout = () => {
+    if (isLoggedIn) {
+      handleSignOut(); // 로그아웃 처리 함수 호출
+    } else {
+      navigate('/login');
+    }
   };
 
+  // 로그아웃을 처리 함수
+  async function handleSignOut() {
+    try {
+      await signOut({ global: true });
+      setIsLoggedIn(false); // 로그인 상태 업데이트
+      navigate('/'); // 로그아웃 후 홈으로 리디이렉션
+    } catch (error) {
+      console.log('로그아웃 에러', error);
+    }
+  }
+
   return (
     <>
       <div style={{ backgroundColor: 'white', zIndex: 1 }}>
@@ -40,7 +72,9 @@ const MainNavBar = () => {
                 </div>
               </S.IconStyle>
 
-              <S.Link onClick={handleLogin}>Login</S.Link>
+              <Button style={{ marginRight: '0.3rem' }} variant="ghost" onClick={handleLoginOrLogout}>
+                {isLoggedIn ? 'Logout' : 'Login'}
+              </Button>
               <S.GetStaredButton>Get Started for Free</S.GetStaredButton>
             </div>
           </S.RightBox>
diff --git a/src/components/user/AuthenticationButton.tsx b/src/components/user/AuthenticationButton.tsx
new file mode 100644
index 0000000..a09c0bd
--- /dev/null
+++ b/src/components/user/AuthenticationButton.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useAuthenticator } from '@aws-amplify/ui-react';
+import * as S from '@/styles/layout/layout.style';
+
+interface Props {
+  handleLogin: () => void;
+}
+
+const AuthenticationButton: React.FC<Props> = ({ handleLogin }) => {
+  const { signOut } = useAuthenticator();
+  const { authStatus } = useAuthenticator(context => [context.authStatus]);
+
+  return (
+    <>
+      {authStatus !== 'authenticated' ? (
+        <S.Link onClick={handleLogin}>로그인</S.Link>
+      ) : (
+        <S.Link onClick={signOut}>로그아웃</S.Link>
+      )}
+    </>
+  );
+};
+
+export default AuthenticationButton;
diff --git a/src/components/user/DefaultHeader.tsx b/src/components/user/DefaultHeader.tsx
new file mode 100644
index 0000000..a5e5437
--- /dev/null
+++ b/src/components/user/DefaultHeader.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Text } from '@chakra-ui/react';
+import logo from '@/../public/logo.svg';
+import * as S from '@/styles/user/DefaultHeader.style';
+
+function DefaultHeader() {
+  return (
+    <S.HeaderContainer>
+      <img src={logo} alt="로고" />
+      <Text fontSize="3xl" as="b" color="#37447E">
+        Past-Forward
+      </Text>
+    </S.HeaderContainer>
+  );
+}
+
+export default DefaultHeader;
diff --git a/src/components/user/EmailAuthentication.tsx b/src/components/user/EmailAuthentication.tsx
deleted file mode 100644
index aafcefc..0000000
--- a/src/components/user/EmailAuthentication.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Input, FormControl, FormLabel } from '@chakra-ui/react';
-
-const EmailAuthentication: React.FC = () => {
-  return (
-    <FormControl isRequired>
-      <FormLabel>First name</FormLabel>
-      <Input placeholder="First name" />
-    </FormControl>
-  );
-};
-
-export default EmailAuthentication;
diff --git a/src/components/user/EmailForm.tsx b/src/components/user/EmailForm.tsx
deleted file mode 100644
index 42bbfdf..0000000
--- a/src/components/user/EmailForm.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { Button, Text } from '@chakra-ui/react';
-import { Formik, Form, Field } from 'formik';
-import EmailInput from '@/components/user/EmailInput';
-
-const EmailForm = () => {
-  return (
-    <Formik
-      initialValues={{ email: '' }}
-      validate={(values: { email: string }) => {
-        const errors: { email?: string } = {};
-        if (!values.email) {
-          errors.email = '이메일은 필수입니다.';
-        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
-          errors.email = '유효한 이메일 주소를 입력하세요.';
-        }
-        return errors;
-      }}
-      onSubmit={(values, { setSubmitting }) => {
-        setTimeout(() => {
-          alert(JSON.stringify(values, null, 2));
-          setSubmitting(false);
-        }, 400);
-      }}
-    >
-      {({ isSubmitting }) => (
-        <Form>
-          <Text>이메일 입력하기</Text>
-          <Field as={EmailInput} type="email" name="email" placeholder="이메일" />
-          <Button colorScheme="brand" width="full" type="submit" disabled={isSubmitting}>
-            다음
-          </Button>
-        </Form>
-      )}
-    </Formik>
-  );
-};
-
-export default EmailForm;
diff --git a/src/components/user/EmailInput.tsx b/src/components/user/EmailInput.tsx
deleted file mode 100644
index ee918e2..0000000
--- a/src/components/user/EmailInput.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { FormControl, FormLabel, Input } from '@chakra-ui/react';
-import { FieldProps } from 'formik';
-
-const EmailInput: React.FC<FieldProps<string>> = ({ field }) => {
-  return (
-    <FormControl>
-      <FormLabel htmlFor="email">이메일</FormLabel>
-      <Input {...field} id="email" type="email" placeholder="이메일을 입력해주세요." />
-    </FormControl>
-  );
-};
-
-export default EmailInput;
diff --git a/src/components/user/GoogleLoginButton.tsx b/src/components/user/GoogleLoginButton.tsx
deleted file mode 100644
index ecfd40d..0000000
--- a/src/components/user/GoogleLoginButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { FaGoogle } from 'react-icons/fa';
-import { Button } from '@chakra-ui/react';
-
-const GoogleLoginButton: React.FC = () => {
-  return (
-    <>
-      <Button colorScheme="gray" leftIcon={<FaGoogle />} width="full">
-        구글로 로그인
-      </Button>
-    </>
-  );
-};
-
-export default GoogleLoginButton;
diff --git a/src/components/user/KakaoLoginButton.tsx b/src/components/user/KakaoLoginButton.tsx
deleted file mode 100644
index 23379f0..0000000
--- a/src/components/user/KakaoLoginButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import { RiKakaoTalkFill } from 'react-icons/ri';
-import { Button } from '@chakra-ui/react';
-
-const KakaoLoginButton: React.FC = () => {
-  return (
-    <>
-      <Button colorScheme="yellow" leftIcon={<RiKakaoTalkFill />} width="full">
-        카카오로 로그인
-      </Button>
-    </>
-  );
-};
-
-export default KakaoLoginButton;
diff --git a/src/components/user/LoginButton.tsx b/src/components/user/LoginButton.tsx
deleted file mode 100644
index b56c864..0000000
--- a/src/components/user/LoginButton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button } from '@chakra-ui/react';
-
-const LoginButton: React.FC = () => {
-  return (
-    <>
-      <Button colorScheme="brand" width="full">
-        로그인
-      </Button>
-    </>
-  );
-};
-
-export default LoginButton;
diff --git a/src/components/user/PasswordInput.tsx b/src/components/user/PasswordInput.tsx
deleted file mode 100644
index 914fa9b..0000000
--- a/src/components/user/PasswordInput.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { FormControl, FormLabel, Input, InputRightElement, Button, InputGroup } from '@chakra-ui/react';
-import { FieldProps } from 'formik';
-
-const PasswordInput: React.FC<FieldProps<string>> = ({ field }) => {
-  const [show, setShow] = React.useState(false);
-  const handleClick = () => setShow(!show);
-
-  return (
-    <FormControl>
-      <FormLabel htmlFor="password">비밀번호</FormLabel>
-      <InputGroup size="md">
-        <Input
-          {...field}
-          id="password"
-          pr="4.5rem"
-          type={show ? 'text' : 'password'}
-          placeholder="비밀번호를 입력해주세요."
-        />
-        <InputRightElement width="4.5rem">
-          <Button h="1.75rem" size="sm" onClick={handleClick}>
-            {show ? 'Hide' : 'Show'}
-          </Button>
-        </InputRightElement>
-      </InputGroup>
-    </FormControl>
-  );
-};
-
-export default PasswordInput;
diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx
new file mode 100644
index 0000000..f95ecda
--- /dev/null
+++ b/src/pages/AuthPage.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
+import { I18n } from 'aws-amplify/utils';
+import awsConfig from '@/awsConfig';
+import '@aws-amplify/ui-react/styles.css';
+import DefaultHeader from '@/components/user/DefaultHeader';
+import amplifyCustomFields from '@/styles/user/AmplifyCustomFields';
+import '@/styles/user/AuthPage.css';
+
+Amplify.configure(awsConfig);
+I18n.setLanguage('ko');
+
+const dict = {
+  ko: {
+    'Sign In': '로그인',
+    'Sign Up': '회원가입',
+    'Sign in': '로그인',
+    'Create Account': '회원가입',
+    'Forgot your password?': '비밀번호를 잊으셨습니까?',
+    'We Emailed You': '이메일 확인',
+    Confirm: '확인',
+    'Resend Code': '다시 코드 받기',
+    'Signing in': '로그인 중',
+    'Reset Password': '비밀번호 재설정',
+    'Send code': '코드 전송',
+    'Back to Sign In': '로그인하러 가기',
+  },
+};
+
+I18n.putVocabularies(dict);
+
+const AuthPage: React.FC = () => {
+  const amplifyUiCustomComponents = {
+    Header() {
+      return <DefaultHeader />;
+    },
+  };
+  return (
+    <Authenticator components={amplifyUiCustomComponents} formFields={amplifyCustomFields}>
+      <AuthPageContent />
+    </Authenticator>
+  );
+};
+
+const AuthPageContent: React.FC = () => {
+  const { authStatus } = useAuthenticator(context => [context.authStatus]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (authStatus === 'authenticated') {
+      navigate('/');
+    }
+  }, [authStatus, navigate]);
+
+  if (authStatus === 'configuring') {
+    return <div>Loading...</div>;
+  }
+
+  return <></>;
+  // <Authenticator></Authenticator>;
+};
+
+export default AuthPage;
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
deleted file mode 100644
index f2b4fc3..0000000
--- a/src/pages/LoginPage.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Text, Link } from '@chakra-ui/react';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
-import * as Yup from 'yup';
-import EmailInput from '@/components/user/EmailInput';
-import GoogleLoginButton from '@/components/user/GoogleLoginButton';
-import KakaoLoginButton from '@/components/user/KakaoLoginButton';
-import LoginButton from '@/components/user/LoginButton';
-import PasswordInput from '@/components/user/PasswordInput';
-import * as S from '@/styles/user/LoginPage.style';
-
-interface FormValues {
-  email: string;
-  password: string;
-}
-
-const LoginPage: React.FC = () => {
-  const initialValues: FormValues = {
-    email: '',
-    password: '',
-  };
-
-  const validationSchema = Yup.object({
-    email: Yup.string().email('올바른 이메일을 입력해주세요.').required('이메일은 필수 항목입니다.'),
-    password: Yup.string().required('비밀번호는 필수 항목입니다.'),
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleSubmit = (values: FormValues, actions: any) => {
-    console.log(values);
-    actions.setSubmitting(false);
-  };
-
-  return (
-    <>
-      <S.Background>
-        <S.LoginContainer>
-          <S.Header>
-            <img src="/logo.svg" alt="Logo" />
-            <Text>Past Forward</Text>
-          </S.Header>
-
-          <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-            <Form>
-              <S.LoginBody>
-                <Text>로그인 하기</Text>
-                <Field name="email" as={EmailInput} />
-                <ErrorMessage name="email" component="div" />
-                <Field name="password" as={PasswordInput} />
-                <ErrorMessage name="password" component="div" />
-              </S.LoginBody>
-
-              <S.SocialLoginBody>
-                <Text>소셜 로그인 하기</Text>
-                <KakaoLoginButton />
-                <GoogleLoginButton />
-                <LoginButton />
-              </S.SocialLoginBody>
-
-              <S.Footer>
-                <Text>
-                  계정이 없으신가요?{' '}
-                  <Link color="teal.500" href="/register">
-                    무료 가입
-                  </Link>
-                </Text>
-              </S.Footer>
-            </Form>
-          </Formik>
-        </S.LoginContainer>
-      </S.Background>
-    </>
-  );
-};
-
-export default LoginPage;
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
deleted file mode 100644
index f0b3215..0000000
--- a/src/pages/RegisterPage.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Button, Text, Link } from '@chakra-ui/react';
-import { Formik, Form, Field, ErrorMessage } from 'formik';
-import * as Yup from 'yup';
-import EmailInput from '@/components/user/EmailInput';
-// import EmailForm from '@/components/user/EmailForm';
-import GoogleLoginButton from '@/components/user/GoogleLoginButton';
-import KakaoLoginButton from '@/components/user/KakaoLoginButton';
-import * as S from '@/styles/user/RegisterPage.style';
-
-interface FormValues {
-  email: string;
-}
-
-const RegisterPage: React.FC = () => {
-  const initialValues: FormValues = {
-    email: '',
-  };
-
-  const validationSchema = Yup.object({
-    email: Yup.string().email('올바른 이메일을 입력해주세요.').required('이메일은 필수 항목입니다.'),
-  });
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const handleSubmit = (values: FormValues, actions: any) => {
-    console.log(values);
-    actions.setSubmitting(false);
-  };
-  return (
-    <>
-      <S.Background>
-        <S.LoginContainer>
-          <S.Header>
-            <img src="/logo.svg" />
-            <Text>Past Forward</Text>
-          </S.Header>
-
-          <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-            <Form>
-              <S.LoginBody>
-                <Text>로그인 하기</Text>
-                <Field name="email" as={EmailInput} />
-                <ErrorMessage name="email" component="div" />
-                <Button colorScheme="brand" width="full" type="submit">
-                  다음
-                </Button>
-              </S.LoginBody>
-              <S.Divider text="또는" />
-
-              <S.SocialLoginBody>
-                <Text>소셜 로그인 하기</Text>
-                <KakaoLoginButton />
-                <GoogleLoginButton />
-              </S.SocialLoginBody>
-
-              <S.Footer>
-                <Text>
-                  이미 계정이 있으신가요?{' '}
-                  <Link color="teal.500" href="/login">
-                    로그인 페이지로 이동
-                  </Link>
-                </Text>
-              </S.Footer>
-            </Form>
-          </Formik>
-        </S.LoginContainer>
-      </S.Background>
-    </>
-  );
-};
-
-export default RegisterPage;
diff --git a/src/styles/user/AmplifyCustomFields.ts b/src/styles/user/AmplifyCustomFields.ts
new file mode 100644
index 0000000..1a965a9
--- /dev/null
+++ b/src/styles/user/AmplifyCustomFields.ts
@@ -0,0 +1,58 @@
+const amplifyCustomFields = {
+  signIn: {
+    username: {
+      label: 'Email',
+      placeholder: '이메일을 입력해주세요.',
+    },
+    password: {
+      placeholder: '비밀번호를 입력해주세요.',
+    },
+  },
+  signUp: {
+    username: {
+      label: 'Email',
+      placeholder: '이메일을 입력해주세요.',
+    },
+    password: {
+      placeholder: '비밀번호를 입력해주세요.',
+    },
+    confirm_password: {
+      label: 'Confirm Password',
+      placeholder: '비밀번호를 다시 한 번 더 입력해주세요.',
+    },
+    // 'custom:customField': {
+    //   label: 'Nickname',
+    //   placeholder: '닉네임을 입력해주세요.',
+    //   isRequired: true,
+    //   order: 1,
+    // },
+  },
+  forgotPassword: {
+    username: {
+      label: 'Email',
+      placeholder: '이메일을 입력해주세요.',
+    },
+  },
+  confirmResetPassword: {
+    confirmation_code: {
+      placeholder: '인증번호를 입력해주세요.',
+      isRequired: false,
+    },
+    password: {
+      label: 'New Password',
+      placeholder: '새로운 비밀번호를 입력해주세요.',
+    },
+    confirm_password: {
+      placeholder: '비밀번호를 다시 한 번 더 입력해주세요.',
+    },
+  },
+  confirmSignIn: {
+    confirmation_code: {
+      label: 'New Label',
+      placeholder: 'Enter your Confirmation Code:',
+      isRequired: false,
+    },
+  },
+};
+
+export default amplifyCustomFields;
diff --git a/src/styles/user/AuthPage.css b/src/styles/user/AuthPage.css
new file mode 100644
index 0000000..1229311
--- /dev/null
+++ b/src/styles/user/AuthPage.css
@@ -0,0 +1,17 @@
+.amplify-tabs__item--active {
+  color: var(--amplify-colors-blue-90);
+  border-color: var(--amplify-colors-blue-90);
+}
+
+.amplify-tabs__item:hover {
+  color: var(--amplify-colors-blue-90);
+  cursor: pointer;
+}
+
+.amplify-button--primary {
+  background-color: var(--amplify-colors-blue-90);
+}
+
+.amplify-button--small {
+  color: var(--amplify-colors-blue-90);
+}
diff --git a/src/styles/user/DefaultHeader.style.ts b/src/styles/user/DefaultHeader.style.ts
new file mode 100644
index 0000000..838392a
--- /dev/null
+++ b/src/styles/user/DefaultHeader.style.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+
+  img {
+    margin-right: 0.5rem;
+    padding-top: 0.5rem;
+  }
+`;
diff --git a/src/styles/user/LoginPage.style.ts b/src/styles/user/LoginPage.style.ts
deleted file mode 100644
index a816480..0000000
--- a/src/styles/user/LoginPage.style.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-export const Background = styled.div`
-  background-color: #111b47;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const LoginContainer = styled.div`
-  height: 100vh;
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-`;
-
-export const LoginBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  margin-bottom: 1rem;
-`;
-export const SocialLoginBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.8rem;
-  width: 100%;
-  margin-top: 2rem;
-`;
-
-export const Footer = styled.div`
-  margin-top: 2rem;
-  display: flex;
-  justify-content: center;
-`;
diff --git a/src/styles/user/RegisterPage.style.ts b/src/styles/user/RegisterPage.style.ts
deleted file mode 100644
index 649cd7f..0000000
--- a/src/styles/user/RegisterPage.style.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import styled from 'styled-components';
-
-interface DividerProps {
-  text: string; // text 속성 추가
-}
-
-export const Background = styled.div`
-  background-color: #111b47;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const LoginContainer = styled.div`
-  height: 100vh;
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: white;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-`;
-
-export const LoginBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  width: 100%;
-  margin-bottom: 1rem;
-`;
-export const SocialLoginBody = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.8rem;
-  width: 100%;
-  margin-top: 2rem;
-`;
-
-export const Footer = styled.div`
-  margin-top: 2rem;
-  display: flex;
-  justify-content: center;
-`;
-
-export const Divider = styled.div<DividerProps>`
-  position: relative;
-  width: 100%;
-  height: 1px;
-  background-color: #e4e4e4;
-  margin: 1rem 0;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: white;
-    padding: 0 1rem;
-  }
-
-  &::before {
-    content: '${props => props.text}';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: white;
-    padding: 0 1rem;
-    z-index: 1; /* ::before를 ::after보다 위에 렌더링 */
-  }
-`;
diff --git a/yarn.lock b/yarn.lock
index 0ceaca3..ff0f5e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,10 +15,10 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@aws-amplify/analytics@7.0.24":
-  version "7.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/analytics/-/analytics-7.0.24.tgz#8ff8e8142ec18e5c3d7d9392141f3637079386fd"
-  integrity sha512-gyAcwLgHBI8W2QV3LPXWZJZc8G5wmZfX5W3Bic1BH3dMG/Cd8tORAkFziCP0D48eGnJ/5U/oQfOeSVRC1uOkbw==
+"@aws-amplify/analytics@7.0.27":
+  version "7.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/analytics/-/analytics-7.0.27.tgz#782583c39d66fdcd9b5e833923996de4456d9436"
+  integrity sha512-UlONxdBSdvAScuda2RjB9tFo9cjQpairFnScBZpMRppUfMsLKJjVjokbrz8vt5/j2PKaW55A6h0LF1JYukm/SQ==
   dependencies:
     "@aws-sdk/client-firehose" "3.398.0"
     "@aws-sdk/client-kinesis" "3.398.0"
@@ -26,47 +26,47 @@
     "@smithy/util-utf8" "2.0.0"
     tslib "^2.5.0"
 
-"@aws-amplify/api-graphql@4.0.24":
-  version "4.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api-graphql/-/api-graphql-4.0.24.tgz#374ffdbe22fe589f9f631659604aeb81a214c879"
-  integrity sha512-6VRsXUdOgLW90mxIcgUoopN5NqCfiubAjNu1j4aiZKmui/vUmHagXnFoGH9jZqYLwMNgpNJMU1W0SknV0vpbig==
+"@aws-amplify/api-graphql@4.0.27":
+  version "4.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api-graphql/-/api-graphql-4.0.27.tgz#de4db355bbf33dbe21542032b344ab8d75c26de0"
+  integrity sha512-hOtC0UUyHVfLqjM77xbHJ2L4QidcsBQWZhPsxcMsDnBeBw9Hrih1C+8EybCHvbvLVuwqo0GtzoxmyJSmtBUlzQ==
   dependencies:
-    "@aws-amplify/api-rest" "4.0.24"
-    "@aws-amplify/core" "6.0.24"
-    "@aws-amplify/data-schema-types" "^0.7.11"
+    "@aws-amplify/api-rest" "4.0.27"
+    "@aws-amplify/core" "6.0.27"
+    "@aws-amplify/data-schema-types" "^0.7.14"
     "@aws-sdk/types" "3.387.0"
     graphql "15.8.0"
     rxjs "^7.8.1"
     tslib "^2.5.0"
     uuid "^9.0.0"
 
-"@aws-amplify/api-rest@4.0.24":
-  version "4.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api-rest/-/api-rest-4.0.24.tgz#6441f16b73d21d9d0a2c0342f3b94eff1aa89417"
-  integrity sha512-ca/Pd8tnRrr4vv6VY2OsOu0OgdUnhHp+ZM0zGCD1Ki4rOxx63D/jzo9/DKljCMRVcV2GuuQdOjoPUZxp3Vy2ZA==
+"@aws-amplify/api-rest@4.0.27":
+  version "4.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api-rest/-/api-rest-4.0.27.tgz#39f47eabbdb0ce9e769a8c0e894bbc5eae0debfe"
+  integrity sha512-nf5Rm58SC6zkorroURV+lfJrJFce3IUbNXsXZJoe42ZZ8kSnaXUugZiADlOBbU3Jf+2+r7OIf4NDuSwcm7rA1A==
   dependencies:
     tslib "^2.5.0"
 
-"@aws-amplify/api@6.0.24":
-  version "6.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/api/-/api-6.0.24.tgz#4d5eda42ca9460d9bc1bb144043e594c1df11a4b"
-  integrity sha512-gOCEPVRdGNTvQ1nSo758g2iwfSHapfZxSpwDM2oWJ5OEuJKHiH9cPbycAanwEeDpiXLZvKlQ1aDYZbBfP8xs3Q==
+"@aws-amplify/api@6.0.27":
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/api/-/api-6.0.27.tgz#e4352a055105011fc14b83688242c2991d0ef433"
+  integrity sha512-yverdC93OpzDbvaMlKTGGVYrdoAKtKe6x/8RVe5PvDTNZBXJUlRnUYMqFjj5P7zu5Z2ZhFfFnemTKmwudcbaDA==
   dependencies:
-    "@aws-amplify/api-graphql" "4.0.24"
-    "@aws-amplify/api-rest" "4.0.24"
+    "@aws-amplify/api-graphql" "4.0.27"
+    "@aws-amplify/api-rest" "4.0.27"
     tslib "^2.5.0"
 
-"@aws-amplify/auth@6.0.24":
-  version "6.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/auth/-/auth-6.0.24.tgz#d481900b36402dc55c6794dc85e7eaeb0e8bc0fb"
-  integrity sha512-+i/C6h9+Ss/N2Y9WxJtM8UU113aDMjDuIMCTmOqN7QzzxWm8+5WVQqNPdfGzGrCkeosXBuu0jeL9ZxWzYdyoDg==
+"@aws-amplify/auth@6.0.27", "@aws-amplify/auth@^6.0.27":
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/auth/-/auth-6.0.27.tgz#2abf0921107f2afe7ae8a488f4e85173aa18af20"
+  integrity sha512-qhoPTPuvErX7EIDcwM0u8Jt4PipJcohc9Y+veEm9sV9SP2Sop37RubpiaDaQhXnFcKvB0wTYknUTZvs3TujHRw==
   dependencies:
     tslib "^2.5.0"
 
-"@aws-amplify/core@6.0.24":
-  version "6.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/core/-/core-6.0.24.tgz#137b6f4636d5accaef8d3f8bfefec400dc01724f"
-  integrity sha512-dy+IWVcPPCJfwOMEiJ3EGJxH0MZT923hGZcPFDoL5feh/QzXztkwHCvWABVl/nLDkIwpg251JbKAUctlJZu1jA==
+"@aws-amplify/core@6.0.27":
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/core/-/core-6.0.27.tgz#92cb99be3ccc91a56171dae8b76c5a5edc700037"
+  integrity sha512-S3IF2s6Qo+PGOXkWt0BiWwCHajImBJUhfcLi65D63mBi92gIL07310u5EZj+2RC4NzO/eSVNt3FNGR7EYCLAng==
   dependencies:
     "@aws-crypto/sha256-js" "5.2.0"
     "@aws-sdk/types" "3.398.0"
@@ -77,7 +77,7 @@
     tslib "^2.5.0"
     uuid "^9.0.0"
 
-"@aws-amplify/data-schema-types@^0.7.11":
+"@aws-amplify/data-schema-types@^0.7.14":
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/@aws-amplify/data-schema-types/-/data-schema-types-0.7.14.tgz#75504d040d7a85e1d1328e388f35e5ebd02572f4"
   integrity sha512-zvo1j6NljHsV62KnEz560rTx9jJ1KfTz0OOqZjW/CP1AtWdlakM2ADBAn9z4AL+bKrt31CrAr55ZOAo6Uk+LTw==
@@ -85,22 +85,22 @@
     "@aws-amplify/plugin-types" "^0.9.0-beta.1"
     rxjs "^7.8.1"
 
-"@aws-amplify/datastore@5.0.24":
-  version "5.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/datastore/-/datastore-5.0.24.tgz#156c9ad590bac0b8cd2904ee9fa04e76b8c30492"
-  integrity sha512-Zbw2YJFxi/i0EbbgqoVJHZhjFyEXtXgiCyZaUTiuYicIOYq5Fqe5HKKcCinZ54E/LaaYkJMTlDNRhgm1MAGzwg==
+"@aws-amplify/datastore@5.0.27":
+  version "5.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/datastore/-/datastore-5.0.27.tgz#c3579ca30b3c63e1bdca809d4bc1b11ddfd9413f"
+  integrity sha512-n6s1uxFY5JS0ZMa+9uoO12/ykXmiF5P9uAPzIOUycRuz8ZFZmOnN5/sZWFzcCGe9mYsm88qJd9oCO4EK5Wot/g==
   dependencies:
-    "@aws-amplify/api" "6.0.24"
+    "@aws-amplify/api" "6.0.27"
     buffer "4.9.2"
     idb "5.0.6"
     immer "9.0.6"
     rxjs "^7.8.1"
     ulid "^2.3.0"
 
-"@aws-amplify/notifications@2.0.24":
-  version "2.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/notifications/-/notifications-2.0.24.tgz#4e4c14682feed2c7981b2211cc6715acd5b9906d"
-  integrity sha512-OxtuCftbgmiCTdcmWeHwzeJmP+vklVAFBS3I3napP/htXibR21lmm/6PVV2lhISiuSX/cyJkIg1IQhYl27wuiA==
+"@aws-amplify/notifications@2.0.27":
+  version "2.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/notifications/-/notifications-2.0.27.tgz#c6ff1041fe30f9b70f758f8b900e646635f5f386"
+  integrity sha512-/YLfjWo3nxmIJxCHzL8Ra5YG+gx01sZuGvpRX3couvsXoviywPIWE7D2KoxO1so9Z6qTaN7335XvtCxYcdLXSw==
   dependencies:
     lodash "^4.17.21"
     tslib "^2.5.0"
@@ -110,10 +110,10 @@
   resolved "https://registry.yarnpkg.com/@aws-amplify/plugin-types/-/plugin-types-0.9.0-beta.1.tgz#066af0646b379b4c999668253e87754e67fc7427"
   integrity sha512-5eJ2SYoXbq4ZSvBjCgStXSejNOKuBkxYVXqOXZP4xP5C9iIpUYG36s9xP+IdhWDm9K/yxklp8OUMr8YGc0g7tw==
 
-"@aws-amplify/storage@6.0.24":
-  version "6.0.24"
-  resolved "https://registry.yarnpkg.com/@aws-amplify/storage/-/storage-6.0.24.tgz#74eaaeac79f157eb8e168c9d1448fb963788b607"
-  integrity sha512-01OQUbKvjF7w+fFewpB/C9sb3eU1JjUVMYzOaWh90qV94ntZlSpXxN6znstePeHwCGurGvbUA9gNFh3EE1x8IA==
+"@aws-amplify/storage@6.0.27":
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/@aws-amplify/storage/-/storage-6.0.27.tgz#644ebec0ad89241eef02a3d841ed8041e88dfd43"
+  integrity sha512-1GKgPK6ZGxoZ3P58/SAFKWB+pwhoMM1ixaUbw1FGnHSQLM2aCSUeOPtk1DVM4TKvzeoxjs/K75QZBdoj0KauyA==
   dependencies:
     "@aws-sdk/types" "3.398.0"
     "@smithy/md5-js" "2.0.7"
@@ -4728,18 +4728,18 @@ available-typed-arrays@^1.0.6, available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
-aws-amplify@^6.0.24:
-  version "6.0.24"
-  resolved "https://registry.yarnpkg.com/aws-amplify/-/aws-amplify-6.0.24.tgz#6dfe6b26c84767891b3406858dee85501fef7cf9"
-  integrity sha512-mtNaDP6m9ObwIaqKh+6If2otOdD9qOZQgQr3pUrdhPTRYpI50OpD2jasnJs2PKuQZl2koEJ8JKRMBR2mDMWgDA==
-  dependencies:
-    "@aws-amplify/analytics" "7.0.24"
-    "@aws-amplify/api" "6.0.24"
-    "@aws-amplify/auth" "6.0.24"
-    "@aws-amplify/core" "6.0.24"
-    "@aws-amplify/datastore" "5.0.24"
-    "@aws-amplify/notifications" "2.0.24"
-    "@aws-amplify/storage" "6.0.24"
+aws-amplify@^6.0.27:
+  version "6.0.27"
+  resolved "https://registry.yarnpkg.com/aws-amplify/-/aws-amplify-6.0.27.tgz#94704d8c541aabf43d031f84a32465ecb067a431"
+  integrity sha512-WxnbU2pbSq0MbZ5kye9Wj1tatzXYRzG9ecUlIugXiVfnV6gkw7h8zMw8BPOo/XDKp+FFeN8OiPQ5It+imVN7fQ==
+  dependencies:
+    "@aws-amplify/analytics" "7.0.27"
+    "@aws-amplify/api" "6.0.27"
+    "@aws-amplify/auth" "6.0.27"
+    "@aws-amplify/core" "6.0.27"
+    "@aws-amplify/datastore" "5.0.27"
+    "@aws-amplify/notifications" "2.0.27"
+    "@aws-amplify/storage" "6.0.27"
     tslib "^2.5.0"
 
 axios@^1.6.8: