diff --git a/frontend/src/components/AuthForm/AuthForm.jsx b/frontend/src/components/AuthForm/AuthForm.jsx
new file mode 100644
index 0000000..cc0a06f
--- /dev/null
+++ b/frontend/src/components/AuthForm/AuthForm.jsx
@@ -0,0 +1,73 @@
+import styles from './AuthForm.module.css';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export default function AuthForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  return (
+    <form className={styles.loginForm}>
+      <span className={styles.loginText}>로그인</span>
+
+      <div className={styles.formGroup}>
+        <div className={styles.inputBox}>
+          <label
+            htmlFor="username"
+            className={styles.textBody}
+          >
+            ID
+          </label>
+          <input
+            type="text"
+            id="username"
+            className={`${styles.input} ${styles.textSubheading}`}
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+          />
+        </div>
+        <div className={styles.inputBox}>
+          <label
+            htmlFor="password"
+            className={styles.textBody}
+          >
+            비밀번호
+          </label>
+          <input
+            className={`${styles.input} ${styles.textSubheading}`}
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+          <Link
+            to="/"
+            className={`${styles.textBodyStrong} ${styles.secondaryColor}`}
+          >
+            비밀번호를 잊으셨나요?
+          </Link>
+        </div>
+      </div>
+      <div className={styles.loginBox}>
+        <button
+          className={`${styles.loginButton} ${styles.textBodyStrong}`}
+          type="submit"
+        >
+          로그인
+          {/* 로그인 버튼 색깔이랑 글자 색깔 바꿔야함. */}
+        </button>
+        <span className={styles.textBody}>
+          아직 회원이 아니신가요?&nbsp;&nbsp;
+          <Link
+            to="/"
+            className={styles.textBodyStrong}
+          >
+            회원가입
+          </Link>
+        </span>
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/components/AuthForm/AuthForm.module.css b/frontend/src/components/AuthForm/AuthForm.module.css
new file mode 100644
index 0000000..0f265f3
--- /dev/null
+++ b/frontend/src/components/AuthForm/AuthForm.module.css
@@ -0,0 +1,75 @@
+.loginForm {
+  max-width: 480px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 40px;
+  gap: 40px;
+}
+
+.loginText {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 900;
+}
+
+.formGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input {
+  border-radius: 8px;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  box-sizing: border-box;
+  padding: 16px;
+}
+
+.loginButton {
+  width: 100%;
+  background-color: var(--primary-color);
+  color: white;
+  padding: 12px;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+
+.loginBox {
+  text-align: center;
+  width: 100%;
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.textBody {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.textSubheading {
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+}
+
+.textBodyStrong {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.secondaryColor {
+  color: var(--text-color-secondary);
+}
diff --git a/frontend/src/components/AuthForm/index.js b/frontend/src/components/AuthForm/index.js
new file mode 100644
index 0000000..ff37185
--- /dev/null
+++ b/frontend/src/components/AuthForm/index.js
@@ -0,0 +1 @@
+export { default as AuthForm } from './AuthForm';