diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..5a683a8
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,18 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[Feat] 제목"
+labels: ''
+assignees: ''
+
+---
+
+## ⭐어떤 기능인가요?
+
+> 기능에 대해 간결하게 설명해주세요
+
+## ⭐작업 상세 내용
+
+- [ ] TODO
+- [ ] TODO
+- [ ] TODO
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..989350f
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,17 @@
+## #️⃣연관된 이슈
+
+> ex) #이슈번호1, #이슈번호2
+
+## 📝작업 내용
+
+- 이번 PR에서 작업한 내용을 간략히 설명해주세요
+
+
+### 📸스크린샷
+
+
+***
+### 💬리뷰 요구사항
+
+> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
+>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 20cdde0..67ef39c 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,10 +1,21 @@
 // Header.jsx
+import styles from './Header.module.scss';
+import { Link } from 'react-router-dom';
+
 function Header() {
   return (
-    <header>
-      <h1>Header</h1>
+    <header className={styles.header}>
+      <nav className={styles.frame}>
+        <Link to="/">
+          <h1 className={`${styles.title}`}>Rolling</h1>
+        </Link>
+        <Link to="/post">
+          <button type="button">롤링 페이퍼 만들기</button>
+        </Link>
+      </nav>
     </header>
   );
 }
+//위 버튼은 컴포넌트 스타일을 적용할 것임
 
 export default Header;
diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss
new file mode 100644
index 0000000..46ef19a
--- /dev/null
+++ b/src/components/Header.module.scss
@@ -0,0 +1,36 @@
+@import url(../global.scss);
+
+$headerH: 65px;
+
+.header {
+  display: flex;
+  padding: 12px 24px;
+  border-bottom: 1px solid #ededed;
+  justify-content: center;
+  height: $headerH;
+}
+
+.frame {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1248px;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  color: #4a494f;
+  font-family: Poppins;
+  font-size: 19.971px;
+  line-height: normal;
+  &::before {
+    content: '';
+    background-image: url('../assets/Rolling_icon.png');
+    display: inline-block;
+    width: 27.818px;
+    height: 27.658px;
+    margin-right: 8px;
+  }
+}
diff --git a/src/global.scss b/src/global.scss
index 5b549b1..87890c1 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -1,41 +1,39 @@
-:root {
-  --purple1: #f8f0ff;
-  --purple2: #ecd9ff;
-  --purple3: #dcb9ff;
-  --purple4: #c894fd;
-  --purple5: #ab57ff;
-  --purple6: #9935ff;
-  --purple7: #861dee;
-  --purple8: #6e0ad1;
-  --purple9: #5603a7;
-  --orange1: #fff0d6;
-  --orange2: #ffe2ad;
-  --orange3: #ffc583;
-  --orange4: #ffae65;
-  --orange5: #ff8832;
-  --blue1: #e2f5ff;
-  --blue2: #b1e4ff;
-  --blue3: #7cd2ff;
-  --blue4: #34b9ff;
-  --blue5: #00a2fe;
-  --green1: #e4fbdc;
-  --green2: #d0f5c3;
-  --green3: #9be282;
-  --green4: #60cf37;
-  --green5: #2ba600;
-  --gray1: #f6f6f6;
-  --gray2: #eeeeee;
-  --gray3: #cccccc;
-  --gray4: #999999;
-  --gray5: #555555;
-  --gray6: #4a4a4a;
-  --gray7: #3a3a3a;
-  --gray8: #2b2b2b;
-  --gray9: #181818;
-  --white: #ffffff;
-  --black: #000000;
-  --error: #dc3a3a;
-  --surface: #f6f8ff;
+$purple1: #f8f0ff;
+$purple2: #ecd9ff;
+$purple3: #dcb9ff;
+$purple4: #c894fd;
+$purple5: #ab57ff;
+$purple6: #9935ff;
+$purple7: #861dee;
+$purple8: #6e0ad1;
+$purple9: #5603a7;
+$orange1: #fff0d6;
+$orange2: #ffe2ad;
+$orange3: #ffc583;
+$orange4: #ffae65;
+$orange5: #ff8832;
+$blue1: #e2f5ff;
+$blue2: #b1e4ff;
+$blue3: #7cd2ff;
+$blue4: #34b9ff;
+$blue5: #00a2fe;
+$green1: #e4fbdc;
+$green2: #d0f5c3;
+$green3: #9be282;
+$green4: #60cf37;
+$green5: #2ba600;
+$gray1: #f6f6f6;
+$gray2: #eeeeee;
+$gray3: #cccccc;
+$gray4: #999999;
+$gray5: #555555;
+$gray6: #4a4a4a;
+$gray7: #3a3a3a;
+$gray8: #2b2b2b;
+$gray9: #181818;
+$white: #ffffff;
+$black: #000000;
+$error: #dc3a3a;
+$surface: #f6f8ff;
 
-  --font-family: "Pretendard", sans-serif;
-}
+$font-family: "Pretendard", sans-serif;
diff --git a/src/index.js b/src/index.js
index b1ef1c0..593edf1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );
diff --git a/src/reset.scss b/src/reset.scss
index 3089150..c9a5005 100644
--- a/src/reset.scss
+++ b/src/reset.scss
@@ -3,6 +3,9 @@
    License: none (public domain)
 */
 
+* {
+  box-sizing: border-box;
+}
 html,
 body,
 div,
@@ -89,6 +92,7 @@ video {
   border: 0;
   font-size: 100%;
   vertical-align: baseline;
+  text-decoration: none;
 }
 /* HTML5 display-role reset for older browsers */
 article,
@@ -119,7 +123,7 @@ blockquote:before,
 blockquote:after,
 q:before,
 q:after {
-  content: "";
+  content: '';
   content: none;
 }
 table {