diff --git a/src/features/join/api/index.ts b/src/features/join/api/index.ts
new file mode 100644
index 0000000..f141a8d
--- /dev/null
+++ b/src/features/join/api/index.ts
@@ -0,0 +1 @@
+export * from './join';
diff --git a/src/features/join/api/join.ts b/src/features/join/api/join.ts
new file mode 100644
index 0000000..5cebf85
--- /dev/null
+++ b/src/features/join/api/join.ts
@@ -0,0 +1,34 @@
+import { useSetAtom } from 'jotai';
+import { useMutation } from '@tanstack/react-query';
+
+import { post, REQUEST } from '@/shared/api';
+import { RAW_PATH } from '@/shared/constants';
+import { replace } from '@/shared/utils';
+import { userTokenAtom } from '@/shared/atom';
+import type { Token, User } from '@/shared/types';
+
+const submitUserJoin = async (data: User) => {
+  const response = await post<User, Token>({
+    request: REQUEST.JOIN,
+    data: data,
+  });
+  return response.data;
+};
+
+export const useUserJoin = () => {
+  const setUserToken = useSetAtom(userTokenAtom);
+  return useMutation<Token, Error, { data: User }>({
+    mutationFn: ({ data }) => submitUserJoin(data),
+    onSuccess: data => {
+      const accessToken = data.accessToken;
+      setUserToken({
+        accessToken: accessToken,
+      });
+      replace(RAW_PATH.SIGNUP_LOADING);
+    },
+    onError: () => {
+      alert('회원가입에 실패했어요. 다시 시도해 주세요!');
+      replace(RAW_PATH.HOME);
+    },
+  });
+};
diff --git a/src/features/join/ui/JoinForm.tsx b/src/features/join/ui/JoinForm.tsx
new file mode 100644
index 0000000..47e87ab
--- /dev/null
+++ b/src/features/join/ui/JoinForm.tsx
@@ -0,0 +1,69 @@
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useForm } from 'react-hook-form';
+
+import { userEmailAtom, userModeAtom } from '@/shared/atom';
+import { Button, Input } from '@/shared/ui';
+import type { User } from '@/shared/types';
+import { useUserJoin } from '../api';
+
+export default function JoinForm() {
+  const setUserMode = useSetAtom(userModeAtom);
+  const { kakaoEmail } = useAtomValue(userEmailAtom);
+  const { mutate } = useUserJoin();
+  const { register, handleSubmit } = useForm<User>({
+    defaultValues: {
+      kakaoEmail: kakaoEmail,
+      name: '',
+      collegeMajorName: '컴퓨터공학전공',
+      studentEmail: 'faker@kyonggi.ac.kr',
+      walletAddress: '0x1234abcd5678',
+      keyId: 'kas-key-id',
+      krn: 'krn:1001:abcd',
+    },
+  });
+
+  return (
+    <form
+      className="flex flex-col gap-y-12"
+      onSubmit={handleSubmit(data => {
+        mutate({ data });
+      })}
+    >
+      <div className="w-full space-y-3">
+        <Input
+          intent="login"
+          placeholder="이름"
+          {...register('name', { required: true })}
+        />
+        <Input intent="login" placeholder="비밀번호" type="password" />
+      </div>
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <div className="bg-s h-[0.5px] flex-1" />
+          <span className="text-s text-sm">가입 방식</span>
+          <div className="bg-s h-[0.5px] flex-1" />
+        </div>
+        <Button
+          intent="login"
+          className="py-[14px] text-lg"
+          type="submit"
+          onClick={() => {
+            setUserMode({ mode: 'STUDENT' as const });
+          }}
+        >
+          학생으로 시작하기
+        </Button>
+        <Button
+          intent="loginWhite"
+          className="py-[14px] text-lg"
+          type="submit"
+          onClick={() => {
+            setUserMode({ mode: 'ADMIN' as const });
+          }}
+        >
+          관리자로 시작하기
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/features/join/ui/index.ts b/src/features/join/ui/index.ts
new file mode 100644
index 0000000..12f2829
--- /dev/null
+++ b/src/features/join/ui/index.ts
@@ -0,0 +1 @@
+export { default as JoinForm } from './JoinForm';
diff --git a/src/screen/auth/api/auth.ts b/src/screen/auth/api/auth.ts
index 84d2bda..27fcb27 100644
--- a/src/screen/auth/api/auth.ts
+++ b/src/screen/auth/api/auth.ts
@@ -1,56 +1,3 @@
-// import { useMutation } from '@tanstack/react-query';
-
-// import { post, REQUEST } from '@/shared/api';
-// import { RAW_PATH } from '@/shared/constants';
-// import { replace } from '@/shared/utils';
-// import { userTokenAtom } from '@/shared/atom';
-// import { useSetAtom } from 'jotai';
-
-// interface KakaoLoginRequest {
-//   code: string;
-// }
-
-// interface KakaoLoginResponse {
-//   kakaoEmail: string;
-//   tokenDto: {
-//     grantType: string;
-//     accessToken: string;
-//     accessTokenExpiresIn: number;
-//     refreshToken: string;
-//   };
-//   signedUp: boolean;
-// }
-
-// const submitKakaoLogin = async (code: string) => {
-//   const response = await post<KakaoLoginRequest, KakaoLoginResponse>({
-//     request: REQUEST.LOGIN,
-//     data: { code: code },
-//   });
-//   return response.data;
-// };
-
-// export const useKakaoLogin = () => {
-//   const setKakaoLogin = useSetAtom(userTokenAtom);
-//   return useMutation<KakaoLoginResponse, Error, { code: string }>({
-//     mutationFn: ({ code }) => submitKakaoLogin(code),
-//     onSuccess: data => {
-//       const kakaoAccessToken = data.tokenDto.accessToken;
-//       setKakaoLogin({
-//         accessToken: kakaoAccessToken,
-//       });
-//       if (data.signedUp) replace(RAW_PATH.HOME);
-//       else {
-//         alert('회원가입 화면으로 이동합니다!');
-//         replace(RAW_PATH.SIGNUP);
-//       }
-//     },
-//     onError: () => {
-//       alert('로그인에 실패했어요. 다시 시도해 주세요!');
-//       replace(RAW_PATH.HOME);
-//     },
-//   });
-// };
-
 import { useQuery } from '@tanstack/react-query';
 
 import { get, REQUEST } from '@/shared/api';
diff --git a/src/screen/auth/ui/AuthScreen.tsx b/src/screen/auth/ui/AuthScreen.tsx
index 4de637c..808084d 100644
--- a/src/screen/auth/ui/AuthScreen.tsx
+++ b/src/screen/auth/ui/AuthScreen.tsx
@@ -6,7 +6,7 @@ import { LoginBg } from '@/assets/image';
 import { replace } from '@/shared/utils';
 import { RAW_PATH } from '@/shared/constants';
 import { userEmailAtom, userTokenAtom } from '@/shared/atom';
-import Loader from '@/shared/ui/Loader';
+import { Loader } from '@/shared/ui';
 
 export default function AuthScreen() {
   const setUserToken = useSetAtom(userTokenAtom);
diff --git a/src/shared/types/user.ts b/src/shared/types/user.ts
index 7864215..c5ea37a 100644
--- a/src/shared/types/user.ts
+++ b/src/shared/types/user.ts
@@ -7,3 +7,10 @@ export type User = {
   keyId: string;
   krn: string;
 };
+
+export type Token = {
+  grantType: string;
+  accessToken: string;
+  accessTokenExpiresIn: number;
+  refreshToken: string;
+};
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index dde27b9..5c224df 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -4,3 +4,4 @@ export { default as Button } from './Button';
 export { default as Card } from './Card';
 export { default as DateBadge } from './DateBadge';
 export { default as Input } from './Input';
+export { default as Loader } from './Loader';
diff --git a/src/widgets/join/ui/JoinContainer.tsx b/src/widgets/join/ui/JoinContainer.tsx
index 2207d85..fbe318d 100644
--- a/src/widgets/join/ui/JoinContainer.tsx
+++ b/src/widgets/join/ui/JoinContainer.tsx
@@ -1,11 +1,6 @@
-import { userModeAtom } from '@/shared/atom';
-import { RAW_PATH } from '@/shared/constants';
-import { Button, Input } from '@/shared/ui';
-import { replace } from '@/shared/utils';
-import { useSetAtom } from 'jotai';
+import { JoinForm } from '@/features/join/ui';
 
 export default function LoginContainer() {
-  const setUserMode = useSetAtom(userModeAtom);
   return (
     <div className="p-normal z-10 grid size-full place-items-center">
       <div className="shadow-login box-border grid h-[530px] w-full place-items-center rounded-lg border-[1px] border-white bg-white/50 p-6 backdrop-blur-sm">
@@ -15,38 +10,7 @@ export default function LoginContainer() {
             <br />
             선거에 참여할 수 있어요!
           </p>
-          <div className="w-full space-y-3">
-            <Input intent="login" placeholder="학번" />
-            <Input intent="login" placeholder="비밀번호" type="password" />
-          </div>
-
-          <div className="space-y-3">
-            <div className="flex items-center gap-3">
-              <div className="bg-s h-[0.5px] flex-1" />
-              <span className="text-s text-sm">가입 방식</span>
-              <div className="bg-s h-[0.5px] flex-1" />
-            </div>
-            <Button
-              intent="login"
-              className="py-[14px] text-lg"
-              onClick={() => {
-                setUserMode({ mode: 'STUDENT' as const });
-                replace(RAW_PATH.SIGNUP_LOADING);
-              }}
-            >
-              학생으로 시작하기
-            </Button>
-            <Button
-              intent="loginWhite"
-              className="py-[14px] text-lg"
-              onClick={() => {
-                setUserMode({ mode: 'ADMIN' as const });
-                replace(RAW_PATH.SIGNUP_LOADING);
-              }}
-            >
-              관리자로 시작하기
-            </Button>
-          </div>
+          <JoinForm />
         </div>
       </div>
     </div>