diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8650686d..f08df15c 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,7 +19,7 @@ function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route element={<Layout />}>
-          <Route path="/" element={<Login />} />
+          <Route path="/" element={<Home />} />
           <Route path="/attendance" element={<Attendance />} />
           <Route path="/attendance-manage" element={<AttendanceManage />} />
           <Route path="/board" element={<Board />} />
diff --git a/frontend/src/assets/github.png b/frontend/src/assets/github.png
new file mode 100644
index 00000000..50824a2e
Binary files /dev/null and b/frontend/src/assets/github.png differ
diff --git a/frontend/src/assets/google.png b/frontend/src/assets/google.png
new file mode 100644
index 00000000..8c06114c
Binary files /dev/null and b/frontend/src/assets/google.png differ
diff --git a/frontend/src/assets/kakao.png b/frontend/src/assets/kakao.png
new file mode 100644
index 00000000..9359ed81
Binary files /dev/null and b/frontend/src/assets/kakao.png differ
diff --git a/frontend/src/components/LoginAndSignUpForm.module.css b/frontend/src/components/LoginAndSignUpForm.module.css
index 74e4e4a9..90e8ee2d 100644
--- a/frontend/src/components/LoginAndSignUpForm.module.css
+++ b/frontend/src/components/LoginAndSignUpForm.module.css
@@ -9,8 +9,8 @@
   align-items: center;
   justify-content: center;
   background: white;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  padding: 40px;
+  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
+  padding: 42px;
   width: 473px;
   box-sizing: border-box;
 }
@@ -22,27 +22,45 @@
   text-align: center;
 }
 
-.logo {
-  width: 60px;
-}
-
-.loginForm h1 {
-  margin-bottom: 72px;
+.header h1 {
+  margin-bottom: 16px;
+  margin-top: 9px;
   color: #142d56;
+  font-family: 'DIN Condensed';
   font-size: 24px;
-  font-weight: 600;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 146%;
+}
+
+.header {
+  border-bottom: 1px solid #d6d6d6;
+  margin-bottom: 36px;
+  width: 333px;
+}
+.logo {
+  width: 60px;
+  height: 60px;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
 }
 
 .inputGroup {
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   text-align: left;
 }
 
 .inputGroup label {
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
   font-weight: 500;
   color: #555;
+  color: #000;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }
 
 .inputGroup input {
@@ -63,7 +81,7 @@
 .loginButton {
   width: 100%;
   padding: 12px;
-  margin-top: 30px;
+  margin-bottom: 18px;
   background-color: #0e1a2c;
   color: white;
   border: none;
@@ -80,20 +98,20 @@
 }
 
 .text {
-  color: #9ca3af;
-  font-size: 14px;
   text-decoration: none;
-  line-height: 1.5;
-  padding: 2px 4px;
-  border-radius: 6px;
-  outline: none;
+
+  color: #aaa;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 146%; /* 17.52px */
 }
 .textContainer {
   display: flex;
-  width: 90%;
+  width: 330px;
   justify-content: space-between;
   align-items: center;
-  padding-top: 10px;
 }
 .textContainer .text {
   cursor: pointer;
@@ -102,13 +120,14 @@
 .divider {
   color: #9ca3af;
   font-size: 14px;
-  margin: 0 4px;
+  margin: 0 8px;
 }
 
 /* ------------------------ 회원가입 페이지 ------------------------ */
-.emailContainer {
+.phoneVerificationContainer {
   display: flex;
   align-items: center;
+  gap: 4px;
 }
 
 .emailInput {
@@ -117,16 +136,26 @@
 }
 
 .verifyButton {
-  padding: 12px 15px;
-  width: 60px;
-  background-color: #4caf50;
-  color: white;
+  display: flex;
+  height: 44px;
+  padding: 16px 24px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: #1d80f4;
   border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
+
+  color: #fff;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 100%; /* 16px */
+  letter-spacing: -0.48px;
+  white-space: nowrap;
 }
 .verifyButton:disabled {
-  background-color: #d5d5d5;
+  background-color: #bce5ff;
   cursor: not-allowed;
 }
diff --git a/frontend/src/components/login/LoginForm.jsx b/frontend/src/components/login/LoginForm.jsx
index c40c4255..5f93630c 100644
--- a/frontend/src/components/login/LoginForm.jsx
+++ b/frontend/src/components/login/LoginForm.jsx
@@ -49,11 +49,18 @@ const LoginForm = () => {
     <>
       <div className={styles.formContainer}>
         <form className={styles.loginForm} onSubmit={handleLogin}>
-          <div className={styles.logoBox}>
-            <img src={sejong_logo} alt="sejong_logo" className={styles.logo} />
+          <div className={styles.header}>
+            <div className={styles.logoBox}>
+              <img
+                src={sejong_logo}
+                alt="sejong_logo"
+                className={styles.logo}
+              />
+            </div>
+
+            <h1>Sejong Investment Scholars Club</h1>
           </div>
 
-          <h1>Sejong Investment Scholars Club</h1>
           <div className={styles.inputGroup}>
             <label htmlFor="email">Email</label>
             <input
diff --git a/frontend/src/components/login/SocialLoginButtons.jsx b/frontend/src/components/login/SocialLoginButtons.jsx
index 1eff89a2..efab6907 100644
--- a/frontend/src/components/login/SocialLoginButtons.jsx
+++ b/frontend/src/components/login/SocialLoginButtons.jsx
@@ -1,35 +1,44 @@
 import styles from './SocialLoginButtons.module.css';
 
-const SocialLoginButtons = ({ onGoogle, onNaver, onKakao }) => {
+import googleIcon from './../../assets/google.png';
+import kakaoIcon from './../../assets/kakao.png';
+import githubIcon from './../../assets/github.png';
+
+const SocialLoginButtons = ({ onGoogle, onGithub, onKakao }) => {
   return (
     <div className={styles.socialContainer} aria-label="소셜 로그인">
-      <div className={styles.divider}>
-        <span>또는 간편 로그인</span>
-      </div>
-
       <div className={styles.buttonGroup}>
         <button
           type="button"
           className={`${styles.btn} ${styles.google}`}
           onClick={onGoogle}
+          alt="구글로 로그인"
         >
-          <img
-            src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
-            alt="구글로 로그인"
-          />
+          <img src={googleIcon} />
+          <div className={styles.btnText}>Google로 로그인하기</div>
         </button>
 
         <button
           type="button"
-          className={`${styles.btn} ${styles.naver}`}
-          onClick={onNaver}
-        ></button>
+          className={`${styles.btn} ${styles.github}`}
+          onClick={onGithub}
+          alt="깃허브로 로그인"
+        >
+          <img src={githubIcon} />
+          <div className={`${styles.btnText} ${styles.githubBtnText}`}>
+            Github로 로그인하기
+          </div>
+        </button>
 
         <button
           type="button"
           className={`${styles.btn} ${styles.kakao}`}
           onClick={onKakao}
-        ></button>
+          alt="카카오로 로그인"
+        >
+          <img src={kakaoIcon} />
+          <div className={styles.btnText}>kakao로 로그인하기</div>
+        </button>
       </div>
     </div>
   );
diff --git a/frontend/src/components/login/SocialLoginButtons.module.css b/frontend/src/components/login/SocialLoginButtons.module.css
index 68bbeb20..6a7f650e 100644
--- a/frontend/src/components/login/SocialLoginButtons.module.css
+++ b/frontend/src/components/login/SocialLoginButtons.module.css
@@ -1,5 +1,5 @@
 .socialContainer {
-  margin-top: 16px;
+  margin-top: 30px;
 }
 
 .divider {
@@ -12,58 +12,57 @@
 }
 
 .buttonGroup {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .btn {
-  display: inline-flex;
+  width: 330px;
+  height: 44px;
+  flex-shrink: 0;
+  border-radius: 8px;
+  border: none;
+
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  font-weight: 600;
-
-  outline: none;
-  border: 1px solid transparent;
+  gap: 4px;
+}
+.btn:hover {
+  filter: brightness(0.95);
+  transition: 0.1s;
 }
-
 .btn img {
-  width: 50%;
-  height: auto;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  aspect-ratio: 1/1;
 }
-
-.icon {
-  flex: 0 0 40px;
+.btn .btnText {
+  /* color: #000; */
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }
 
 .google {
-  background: #ffffff;
-  border-color: #e5e7eb;
-  color: #111827;
-}
-.google:hover {
-  background: #f9fafb;
+  border: 1px solid #acacac;
+  background: #fff;
 }
 
-.naver {
-  background: #03c75a;
-  color: #ffffff;
+.github {
+  background: #1a1e24;
+  color: #fff;
 }
-.naver:hover {
-  filter: brightness(0.95);
+.btnText .githubBtnText {
+  color: #fff;
 }
 
 .kakao {
-  background: #fee500;
-  color: #191600;
-  border-color: #e5e7eb;
-}
-.kakao:hover {
-  filter: brightness(0.95);
+  background: #fae000;
 }
 
 .label {
diff --git a/frontend/src/components/signup/SignUpForm.jsx b/frontend/src/components/signup/SignUpForm.jsx
index c6148677..811f5572 100644
--- a/frontend/src/components/signup/SignUpForm.jsx
+++ b/frontend/src/components/signup/SignUpForm.jsx
@@ -5,12 +5,15 @@ import sejong_logo from '../../assets/sejong_logo.png';
 import EmailVerificationModal from './../VerificationModal';
 
 const SignUpForm = () => {
+  const [nickname, setNickname] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
+  const [verificationNumber, setVerificationNumber] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
-  const [isModalOpen, setModalOpen] = useState(false);
-  const [confirmEmail, setConfirmEmail] = useState(false);
+
+  const [isVerificationNumberSent, setVerificationNumberSent] = useState(false);
+
   const nav = useNavigate();
 
   // 이메일 입력 형태가 맞는지 검사
@@ -21,18 +24,25 @@ const SignUpForm = () => {
 
   // 핸드폰 번호 유효성 검사
   const isPhoneNumberValid = () => {
-    const phoneRegex = /^\d{10,11}$/;
+    const phoneRegex = /^0\d{8,10}$/;
     return phoneRegex.test(phoneNumber);
   };
 
   // 회원가입 제출 유효성 검사
   const isFormValid =
+    nickname.trim() !== '' &&
     isEmailValid() &&
     isPhoneNumberValid() &&
     password.trim() !== '' &&
-    password === confirmPassword &&
-    confirmEmail;
+    password === confirmPassword;
 
+  const handleSendVerificationNumber = () => {
+    // 전송 state 변경
+    setVerificationNumberSent(true);
+
+    // 인증번호 발송 로직
+    alert('인증번호가 발송되었습니다.');
+  };
   const handleSignUp = (e) => {
     e.preventDefault();
 
@@ -42,55 +52,70 @@ const SignUpForm = () => {
     nav('/login'); // 회원가입 성공 시 로그인 페이지 이동
   };
 
-  // 이메일 인증 팝업
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-
-  const handleEmailVerified = () => {
-    setConfirmEmail(true);
-  };
-
   return (
     <>
       <div className={styles.formContainer}>
         <form className={styles.loginForm} onSubmit={handleSignUp}>
-          <div className={styles.logoBox}>
-            <img src={sejong_logo} alt="sejong_logo" className={styles.logo} />
+          <div className={styles.header}>
+            <div className={styles.logoBox}>
+              <img
+                src={sejong_logo}
+                alt="sejong_logo"
+                className={styles.logo}
+              />
+            </div>
+            <h1>Sejong Investment Scholars Club</h1>
           </div>
-          <h1>Sejong Investment Scholars Club</h1>
+
           <div className={styles.inputGroup}>
-            <label htmlFor="email">Email</label>
-            <div className={styles.emailContainer}>
+            <label htmlFor="nickname">닉네임</label>
+            <input
+              type="text"
+              id="nickname"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              placeholder="닉네임을 입력해주세요"
+            />
+          </div>
+          <div className={styles.inputGroup}>
+            <label htmlFor="phoneNumber">휴대전화</label>
+            <div className={styles.phoneVerificationContainer}>
               <input
-                type="email"
-                id="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                placeholder="이메일을 입력하세요"
-                className={styles.emailInput}
+                type="phoneNumber"
+                id="text"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+                placeholder="ex) 01012345678"
+                className={styles.phoneNumberInput}
               />
               <button
                 type="button"
-                onClick={openModal}
                 className={styles.verifyButton}
-                disabled={!isEmailValid()}
+                onClick={handleSendVerificationNumber}
+                disabled={!isPhoneNumberValid()}
               >
-                인증
+                인증번호 발송
               </button>
             </div>
           </div>
           <div className={styles.inputGroup}>
-            <label htmlFor="phone-number">핸드폰 번호</label>
+            <label htmlFor="verificationNumber">인증번호</label>
             <input
               type="text"
-              id="phone-number"
-              value={phoneNumber}
-              onChange={(e) => setPhoneNumber(e.target.value)}
-              placeholder="ex) 01012345678"
+              id="verificationNumber"
+              value={verificationNumber}
+              onChange={(e) => setVerificationNumber(e.target.value)}
+              placeholder="인증번호를 입력해주세요"
+            />
+          </div>
+          <div className={styles.inputGroup}>
+            <label htmlFor="email">Email</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="이메일을 입력해주세요"
             />
           </div>
           <div className={styles.inputGroup}>
@@ -100,7 +125,7 @@ const SignUpForm = () => {
               id="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              placeholder="비밀번호를 입력하세요"
+              placeholder="비밀번호를 입력해주세요"
             />
           </div>
           <div className={styles.inputGroup}>
@@ -110,7 +135,7 @@ const SignUpForm = () => {
               id="confirm-password"
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              placeholder="비밀번호를 한번 더 입력하세요"
+              placeholder="비밀번호를 한번 더 입력해주세요"
             />
           </div>
           <button
@@ -122,12 +147,6 @@ const SignUpForm = () => {
           </button>
         </form>
       </div>
-      {isModalOpen && (
-        <EmailVerificationModal
-          onClose={closeModal}
-          onEmailVerified={handleEmailVerified}
-        />
-      )}
     </>
   );
 };
diff --git a/frontend/src/pages/Login.css b/frontend/src/pages/Login.css
deleted file mode 100644
index 5517977f..00000000
--- a/frontend/src/pages/Login.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.page-wrapper {
-  display: flex;
-  justify-content: center; /* 좌우 가운데 */
-  align-items: center; /* 상하 가운데 */
-  height: 100vh; /* 화면 전체 높이 */
-}
-
-.page {
-  width: 600px;
-  height: 620px;
-  border-radius: 20px;
-  padding: 50px 67px;
-  border: 1px solid #aacdff;
-  background: #fff;
-  box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25);
-}
-.page h1,
-.signup-page h1 {
-  display: flex;
-  width: 397px;
-  height: 105px;
-  flex-direction: column;
-  justify-content: center;
-  flex-shrink: 0;
-  color: #0068ff;
-  font-family: Inter;
-  font-size: 32px;
-}
-.login-email,
-.login-pass {
-  margin-top: 40px;
-  color: #797979;
-  font-family: ABeeZee;
-  font-size: 16px;
-}
-.login-email-input,
-.login-pass-input {
-  width: 450px;
-  height: 50px;
-  border: 0;
-  border-bottom: solid 1px #797979;
-  font-size: 20px;
-  padding-top: 18px;
-  padding-left: 5px;
-}
-
-.login-email-input:focus,
-.login-pass-input:focus,
-.signup-email-input:focus,
-.signup-pass-input:focus,
-.signup-user-input:focus,
-.signup-current-school-input:focus {
-  outline: none;
-  border-bottom: solid 1px #0068ff;
-}
-
-.login-btn {
-  margin-top: 51px;
-  width: 470px;
-  height: 75px;
-  flex-shrink: 0;
-  border-radius: 20px;
-  border: 1.5px solid #0068ff;
-  background: #fff;
-  font-size: 16px;
-  color: #0068ff;
-  transition: 0.3s ease;
-}
-.login-btn.active {
-  border: 1.5px solid #fff;
-  background: #0068ff;
-  color: #fff;
-  cursor: pointer;
-}
-
-.error-message {
-  height: 18px; /* 항상 자리 차지하게 함 */
-  margin-top: 5px;
-  font-size: 14px;
-  color: red;
-  transition: opacity 0.3s ease;
-  opacity: 0; /* 안 보일 뿐 자리는 차지함 */
-  visibility: hidden; /* 포인터 이벤트 방지 등 */
-}
-.error-message.show {
-  opacity: 1;
-  visibility: visible;
-}
-.login-tip {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 20px;
-}
-.login-signup {
-  display: inline-block;
-  color: rgba(0, 0, 0, 0.7);
-  font-family: Inter;
-  font-size: 15px;
-  margin-right: 7px;
-}
-.login-signup-btn {
-  display: inline-block;
-  color: #418fff;
-  font-family: Inter;
-  font-size: 15px;
-  text-decoration-line: underline;
-  cursor: pointer;
-}
diff --git a/frontend/src/pages/LoginAndSignUp.module.css b/frontend/src/pages/LoginAndSignUp.module.css
index 294eedee..fd44a259 100644
--- a/frontend/src/pages/LoginAndSignUp.module.css
+++ b/frontend/src/pages/LoginAndSignUp.module.css
@@ -4,5 +4,5 @@
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background-color: #f0f2f5;
+  background: #fff;
 }