diff --git a/components/BestPost.tsx b/components/BestPost.tsx
index cb1d63e2c..2db05fb6e 100644
--- a/components/BestPost.tsx
+++ b/components/BestPost.tsx
@@ -1,4 +1,4 @@
-import axios from '@/utils/axio';
+import axios from '@/utils/axios';
 import { useEffect, useState } from 'react';
 import style from '@/styles/bestPost.module.css';
 import bestBadge from '@/public/icon/img_badge.svg';
diff --git a/package-lock.json b/package-lock.json
index 69df3d1c9..ccf227def 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.51.5",
         "react-responsive": "^10.0.0",
         "react-router-dom": "^6.23.1",
         "styled-components": "^6.1.11"
@@ -3111,6 +3112,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz",
+      "integrity": "sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index e02bfc7b5..4a6567177 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11"
diff --git a/pages/404.tsx b/pages/404.tsx
index e332b7b85..7f94d877d 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import IMG_NOTFOUND from '@/public/img-notfound.svg';
+import IMG_NOTFOUND from '@/public/icon/404.png';
 
 export default function NotFound() {
   return (
diff --git a/pages/addboard.tsx b/pages/addboard.tsx
new file mode 100644
index 000000000..23024f948
--- /dev/null
+++ b/pages/addboard.tsx
@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import styles from '@/styles/Addboard.module.css';
+import PlusIcon from '@/public/icon/ic_plus.svg';
+
+export interface IBoardValues {
+  title: string;
+  content: string;
+  imgFile: string | null;
+}
+
+export default function AddBoard() {
+  const [values, setValues] = useState<IBoardValues>({
+    title: '',
+    content: '',
+    imgFile: null,
+  });
+
+  function onChangeValues(e: React.ChangeEvent<HTMLInputElement>) {
+    const input = e.target.value;
+  }
+
+  return (
+    <div className={styles.BoardContainer}>
+      <form className={styles.AddContainer}>
+        <div className={styles.addTop}>
+          <h1 className={styles.addTopText}>게시글 쓰기</h1>
+          <button className={styles.button} type="submit">
+            등록
+          </button>
+        </div>
+        <div className={styles.postContainer}>
+          <div className={styles.inputTitleBox}>
+            <label htmlFor="title" className={styles.inputText}>
+              *제목
+            </label>
+            <input id="title" className={styles.TitleInput} type="text" placeholder="제목을 입력해주세요" />
+          </div>
+          <div className={styles.inputTextBox}>
+            <label htmlFor="text" className={styles.inputText}>
+              *내용
+            </label>
+            <textarea id="text" className={styles.TextInput} placeholder="내용을 입력해주세요"></textarea>
+          </div>
+          <div className={styles.inputTextBox}>
+            <label htmlFor="picture" className={styles.inputText}>
+              이미지
+            </label>
+            <div className={styles.image_button_area}>
+              <label htmlFor="picture">
+                <PlusIcon />
+                이미지 등록
+              </label>
+              <input id="picture" type="file" style={{ display: 'none' }} />
+              <div>
+                <button>X</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/pages/addboards.tsx b/pages/addboards.tsx
deleted file mode 100644
index db6a15b33..000000000
--- a/pages/addboards.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useState } from 'react';
-export interface IBoardValues {
-  title: string;
-  content: string;
-  imgFile: string | null;
-}
-
-export default function AddBoard() {
-  const [values, setValues] = useState<IBoardValues>({
-    title: '',
-    content: '',
-    imgFile: null,
-  });
-
-  function onChangeValues(key: keyof IBoardValues, value: string) {
-    setValues(prevValues => ({ ...prevValues, [key]: value }));
-  }
-
-  return (
-    <div>
-      <form>
-        <div>
-          <h1>게시글 쓰기</h1>
-          <button type="submit">등록</button>
-        </div>
-        <label>*제목</label>
-        <input type="text" placeholder="제목을 입력해주세요" />
-        <label>*내용</label>
-        <textarea placeholder="내용을 입력해주세요"></textarea>
-        <label>상품 이미지</label>
-      </form>
-    </div>
-  );
-}
diff --git a/pages/boards.tsx b/pages/boards.tsx
index 824f38efc..eac3fb885 100644
--- a/pages/boards.tsx
+++ b/pages/boards.tsx
@@ -6,7 +6,7 @@ import styles from '@/styles/Board.module.css';
 import LinkButton from '@/utils/Button';
 import Dropdown from '@/components/DropDown';
 import { useEffect, useState } from 'react';
-import axios from '@/utils/axio';
+import axios from '@/utils/axios';
 
 interface List {
   id: number;
@@ -89,7 +89,7 @@ export default function Board({ PostsData }: Props) {
       <div className={styles.posts}>
         <div className={styles.postsTop}>
           <span className={styles.bestTopText}>게시글</span>
-          <LinkButton href="/">글쓰기</LinkButton>
+          <LinkButton href="/addboard">글쓰기</LinkButton>
         </div>
         <div className={styles.postsMiddle}>
           <SearchInput value={searchTerm} onChange={handleSearchChange} />
diff --git a/public/icon/404.png b/public/icon/404.png
new file mode 100644
index 000000000..38f43f3d9
Binary files /dev/null and b/public/icon/404.png differ
diff --git a/public/icon/ic_plus.svg b/public/icon/ic_plus.svg
new file mode 100644
index 000000000..5bb9abf55
--- /dev/null
+++ b/public/icon/ic_plus.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 24H38" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+<path d="M24 38V10" stroke="#9CA3AF" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/styles/Addboard.module.css b/styles/Addboard.module.css
new file mode 100644
index 000000000..f47e3810a
--- /dev/null
+++ b/styles/Addboard.module.css
@@ -0,0 +1,108 @@
+.BoardContainer {
+  max-width: 1200px;
+  min-width: 368px;
+  width: 100%;
+  padding: 0 34px;
+  margin: 0 auto;
+}
+
+.AddContainer {
+  margin-top: 24px;
+}
+
+.addTop {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.addTopText {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2937;
+  margin: 18px 0;
+}
+
+.postContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 767px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  gap: 12px;
+}
+
+.inputTitleBox {
+  display: flex;
+  flex-direction: column;
+  height: 89px;
+  gap: 12px;
+}
+
+.inputText {
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+}
+
+.inputTextBox {
+  display: flex;
+  flex-direction: column;
+  height: 315px;
+  gap: 12px;
+}
+
+.inputImageBox {
+  display: flex;
+  flex-direction: column;
+  height: 315px;
+  gap: 12px;
+}
+
+.TitleInput {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: #f3f4f6;
+  border-radius: 12px;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 400;
+  color: #9ca3af;
+}
+
+.TextInput {
+  width: 100%;
+  height: 282px;
+  padding: 16px 24px;
+  background-color: #f3f4f6;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+  color: #9ca3af;
+}
+
+.image_button_area {
+  width: 282px;
+  height: 282px;
+}
+
+.button {
+  align-items: center;
+  background-color: #3692ff;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  font-size: 16px;
+  font-weight: 600;
+  height: 42px;
+  justify-content: center;
+  min-width: 88px;
+  padding: 12px 23px;
+}
diff --git a/utils/axio.ts b/utils/axios.ts
similarity index 100%
rename from utils/axio.ts
rename to utils/axios.ts