diff --git a/src/App.tsx b/src/App.tsx
index 7654d85..47ea1eb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,11 +2,13 @@
 import { ThemeProvider } from "styled-components";
 import theme from "@styles/theme";
 import GlobalStyle from "@styles/global";
+import Router from "./Router";
 
 function App() {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
+      <Router />
     </ThemeProvider>
   );
 }
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
new file mode 100644
index 0000000..fb67757
--- /dev/null
+++ b/src/components/button/Button.tsx
@@ -0,0 +1,44 @@
+// Button.tsx
+
+import React from "react";
+import styled from "styled-components";
+
+const Btn = styled.button`
+  width: 350px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #343a40;
+  text-align: center;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  border-radius: 10px;
+  background: #99bc85;
+  cursor: pointer;
+  border: none;
+  margin: 10px auto;
+`;
+
+interface ButtonProps {
+  link: string;
+  name: string;
+  type: string;
+}
+
+const Button: React.FC<ButtonProps> = ({ link, name, type }) => {
+  const handleClick = () => {
+    window.location.href = link;
+  };
+
+  return (
+    <Btn type="button" onClick={handleClick}>
+      {name}
+    </Btn>
+  );
+};
+
+export default Button;
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
new file mode 100644
index 0000000..bab66c6
--- /dev/null
+++ b/src/components/input/DateInput.tsx
@@ -0,0 +1,28 @@
+// DateInput.tsx
+import React from "react";
+import * as S from "./style";
+
+const DateInput: React.FC = () => {
+  return (
+    <S.InputContainer>
+      <S.InputTitleWrapper>
+        <S.InputTitle>생년월일</S.InputTitle>
+        <S.EssentialIcon>*</S.EssentialIcon>
+      </S.InputTitleWrapper>
+
+      <S.DateInputWrap>
+        <S.InputWrap width="102px">
+          <S.TextInput type="number" maxLength={4} />
+        </S.InputWrap>
+        <S.InputWrap width="102px">
+          <S.TextInput type="number" maxLength={2} />
+        </S.InputWrap>
+        <S.InputWrap width="102px">
+          <S.TextInput type="number" maxLength={2} />
+        </S.InputWrap>
+      </S.DateInputWrap>
+    </S.InputContainer>
+  );
+};
+
+export default DateInput;
diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx
new file mode 100644
index 0000000..076363e
--- /dev/null
+++ b/src/components/input/Input.tsx
@@ -0,0 +1,32 @@
+// Input.tsx
+import React from "react";
+import * as S from "./style";
+
+interface InputProps {
+  width?: string;
+  label: string;
+  essential: boolean;
+  hint: string;
+}
+
+const Input: React.FC<InputProps> = ({
+  width = "340px",
+  label,
+  essential = true,
+  hint,
+}) => {
+  return (
+    <S.InputContainer>
+      <S.InputTitleWrapper>
+        <S.InputTitle>{label}</S.InputTitle>
+        {essential && <S.EssentialIcon>*</S.EssentialIcon>}
+      </S.InputTitleWrapper>
+      {hint && <S.InputHint>{hint}</S.InputHint>}
+      <S.InputWrap width={width}>
+        <S.TextInput type="text" />
+      </S.InputWrap>
+    </S.InputContainer>
+  );
+};
+
+export default Input;
diff --git a/src/components/input/style.ts b/src/components/input/style.ts
new file mode 100644
index 0000000..b12efe4
--- /dev/null
+++ b/src/components/input/style.ts
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+interface InputWrapProps {
+  width?: string;
+}
+
+export const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const InputTitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+export const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+export const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
+
+export const InputHint = styled.p`
+  color: #868e96;
+
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
+
+export const InputWrap = styled.div<InputWrapProps>`
+  width: ${({ width }) => width || "340px"};
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+`;
+
+export const TextInput = styled.input`
+  width: 100%;
+  color: #495057;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: -0.1px;
+  outline: none;
+  padding: 10px 12px;
+  border-radius: 8px;
+`;
+
+// DateInput.tsx
+export const DateInputWrap = styled.div`
+  display: flex;
+  gap: 17px;
+`;
diff --git a/src/components/login/HintText.tsx b/src/components/login/HintText.tsx
new file mode 100644
index 0000000..ff73c49
--- /dev/null
+++ b/src/components/login/HintText.tsx
@@ -0,0 +1,39 @@
+import styled from "styled-components";
+
+const HintTextWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const HintTextHeadline2 = styled.h2`
+  color: #343a40;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 40px;
+  letter-spacing: -0.5px;
+`;
+
+const HintTextP1 = styled.p`
+  color: #868e96;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 157.143% */
+  letter-spacing: -0.1px;
+`;
+
+export default function HintText() {
+  return (
+    <HintTextWrapper>
+      <HintTextHeadline2>당신의 정보를 입력해주세요.</HintTextHeadline2>
+      <HintTextP1>팀을 참가할 때 간단한 정보를 입력받아요.</HintTextP1>
+    </HintTextWrapper>
+  );
+}
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
new file mode 100644
index 0000000..926e161
--- /dev/null
+++ b/src/pages/login/Login.tsx
@@ -0,0 +1,46 @@
+// Login.tsx
+import Input from "@components/input/Input";
+import DateInput from "@components/input/DateInput";
+import HintText from "@components/login/HintText";
+import React from "react";
+import styled from "styled-components";
+import Button from "@components/button/Button";
+
+const Container = styled.div`
+  height: calc(100vh - 80px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 60px;
+`;
+
+const InputForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const ButtonLayout = styled.div`
+  position: relative;
+  bottom: 10px;
+`;
+
+const Login: React.FC = () => {
+  return (
+    <>
+      <Container>
+        <HintText />
+        <InputForm>
+          <Input label="이름" essential hint="" />
+          <DateInput />
+        </InputForm>
+      </Container>
+      <ButtonLayout>
+        <Button type="submit" link="" name="팀 참가하기" />
+      </ButtonLayout>
+    </>
+  );
+};
+
+export default Login;