diff --git a/package-lock.json b/package-lock.json
index a81c3af..7a963fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-responsive": "^10.0.0",
         "react-router-dom": "^6.23.0",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.9",
@@ -6554,6 +6555,11 @@
         }
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "node_modules/css-minimizer-webpack-plugin": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
@@ -12805,6 +12811,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz",
+      "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -15356,6 +15370,23 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz",
+      "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.4.2",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.23.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
@@ -16256,6 +16287,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-equal": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz",
+      "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg=="
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
diff --git a/package.json b/package.json
index 8c33564..c3a89b5 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.9",
diff --git a/src/App.js b/src/App.js
index c505b6e..38e3d21 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Main from "./pages/main/main";
+import Login from "./pages/login/login"
 import './App.css';
 import styled from "styled-components";
 
@@ -9,6 +10,7 @@ function App() {
       <Router>
         <Routes>
           <Route path="/" element={<Main />} />
+          <Route path="/login" element={<Login />} />
         </Routes>
       </Router>
     </Body>
@@ -18,5 +20,4 @@ function App() {
 export default App;
 
 const Body = styled.div`
-  margin: 0 auto;
 `;
\ No newline at end of file
diff --git a/src/font.styles.js b/src/font.styles.js
new file mode 100644
index 0000000..7fda35d
--- /dev/null
+++ b/src/font.styles.js
@@ -0,0 +1,13 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+  @import url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+
+  body {
+    font-family: 'Pretendard-Regular';
+    font-weight: 400;
+    font-style: normal;
+  }
+`;
+
+export default GlobalStyle;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..d0a018d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,7 +2,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+    sans-serif, 'Pretendard-Regular';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -11,3 +11,10 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
\ No newline at end of file
diff --git a/src/pages/login/login.js b/src/pages/login/login.js
new file mode 100644
index 0000000..45b4a35
--- /dev/null
+++ b/src/pages/login/login.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Login = () => {
+  return (
+    <div>
+      <h1>로그인 페이지</h1>
+      <p>여기에 로그인 폼을 추가하세요.</p>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/src/pages/main/main.js b/src/pages/main/main.js
index b88673f..41b8059 100644
--- a/src/pages/main/main.js
+++ b/src/pages/main/main.js
@@ -1,15 +1,76 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
 import * as styles from "./main.styles";
 
-function Main(){
+function Main() {
+  const [issue, setIssue] = useState('');
+  const [inference, setInference] = useState('');
+  const [solution, setSolution] = useState('');
+  const [result, setResult] = useState('');
 
-    return(
-        <styles.Container>
-            <styles.HeaderContainer>
-                <styles.HeaderTitle>AutoDevLog</styles.HeaderTitle>
-            </styles.HeaderContainer>
-        </styles.Container>
-    )
+  const handleGenerate = () => {
+    // 결과를 생성하는 로직 처리
+    setResult('결과 값이 나옵니다.');
+  };
+
+  const handleReset = () => {
+    setIssue('');
+    setInference('');
+    setSolution('');
+    setResult('');
+  };
+
+  return (
+    <styles.Container>
+      <styles.HeaderContainer>
+        <Link to="/login" style={{ textDecoration: 'none', color: 'inherit' }}>
+          <styles.HeaderTitle>로그인</styles.HeaderTitle>
+        </Link>
+      </styles.HeaderContainer>
+      <styles.BodyContainer>
+        <styles.BodyContentContainer>
+            <styles.BodyTitle>
+            AudoDevLog
+            </styles.BodyTitle>
+            <styles.BodyText>
+          오늘 하루 공부 한걸 작성해보세요
+        </styles.BodyText>
+        </styles.BodyContentContainer>
+      </styles.BodyContainer>
+      <styles.FormContainer>
+        <styles.FormTitle>키워드</styles.FormTitle>
+        <styles.FormText>키워드를 입력하세요</styles.FormText>
+          <styles.FormTitle>ISSUE</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={issue}
+            onChange={(e) => setIssue(e.target.value)}
+          />
+          <styles.FormTitle>INFERENCE</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={inference}
+            onChange={(e) => setInference(e.target.value)}
+          />
+          <styles.FormTitle>SOLUTION</styles.FormTitle>
+          <styles.Input
+            type="text"
+            value={solution}
+            onChange={(e) => setSolution(e.target.value)}
+          />
+        <styles.ButtonContainer>
+          <styles.Button onClick={handleGenerate}>생성하기</styles.Button>
+        </styles.ButtonContainer>
+        <styles.ResultBox>
+        <styles.BodyText>{result}</styles.BodyText>
+        </styles.ResultBox>
+        <styles.ButtonContainer>
+            <styles.Button onClick={handleReset}>다시 생성하기</styles.Button>
+            <styles.Button style={{ marginLeft: "10px" }}>전송하기</styles.Button>
+        </styles.ButtonContainer>
+      </styles.FormContainer>
+    </styles.Container>
+  );
 }
 
-export default Main;
\ No newline at end of file
+export default Main;
diff --git a/src/pages/main/main.styles.js b/src/pages/main/main.styles.js
index 9872d2d..e0c0ada 100644
--- a/src/pages/main/main.styles.js
+++ b/src/pages/main/main.styles.js
@@ -1,7 +1,90 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
-export const Container = styled.div``
+export const Container = styled.div`
+  font-family: Arial, sans-serif;
+  margin: 0 auto;
+`;
 
-export const HeaderContainer = styled.div``
+export const HeaderContainer = styled.div`
+  background-color: #fffff;
+  margin: 0 auto;
+  max-width: 50%;
+`;
 
-export const HeaderTitle = styled.div``
\ No newline at end of file
+export const HeaderTitle = styled.p`
+  text-align: right;
+`;
+
+export const BodyContainer = styled.div`
+  padding: 20px;
+  background-color: #EDF1F5;
+`;
+
+export const BodyContentContainer = styled.div`
+  margin: 0 auto;
+  max-width: 50%;
+`;
+
+export const BodyTitle = styled.h2`
+  text-align: left;
+`;
+
+export const BodyText = styled.p`
+`;
+
+export const FormContainer = styled.div`
+  padding: 20px;
+  max-width: 50%;
+  margin: 0 auto;
+  margin-top: 20px;
+`;
+
+export const FormTitle = styled.h3`
+  text-align: left;
+`;
+
+export const FormText = styled.p`
+  text-align: left;
+`;
+
+export const Input = styled.input`
+  width: 100%;
+  background-color: #EDF1F5;
+  padding: 10px;
+  margin: 2px 0;
+  border-radius: 4px;
+  border: 0.3px solid #ccc;
+  box-sizing: border-box; /* 입력 필드의 최대 너비 (선택 사항) */
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+`;
+
+export const Button = styled.button`
+  padding: 10px 20px;
+  border-radius: 4px;
+  border: none;
+  background-color: white;
+  color: black;
+  cursor: pointer;
+  font-weight: bold;
+  border: 0.3px solid #ccc;
+  margin-left: 10px;
+
+  &:hover {
+    background-color: #EDF1F5;
+  }
+`;
+
+export const ResultBox = styled.div`
+  background-color: #EDF1F5; /* 배경색 */
+  padding: 20px; /* 패딩 */
+  border-radius: 10px; /* 둥근 모서리 */
+  margin-top: 10px; /* 상단 여백 */
+  text-align: left; /* 텍스트 중앙 정렬 */
+  max-width: 100%; /* 최대 너비 */
+  box-sizing: border-box; /* 수평 중앙 정렬 */
+`;