diff --git a/src/App.js b/src/App.js
index c6138d7..f672580 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import { Route, BrowserRouter, Routes } from "react-router-dom";
 import Main from "./pages/Mainpage";
 import Create from "./pages/Create";
 import List from "./pages/project/List";
+import Detail from "./pages/project/Detail";
 
 function App() {
   return (
@@ -10,6 +11,7 @@ function App() {
         <Route path="/" element={<Main />} />
         <Route path="/create" element={<Create />} />
         <Route path="/list" element={<List />} />
+        <Route path="/detail" element={<Detail />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a0e9358..0ccaa5f 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -56,6 +56,10 @@ export default function Header({ mode }) {
     navigate("/create");
   }
 
+  function toMain() {
+    navigate("/");
+  }
+
   if (isLoading) {
     return <div></div>; // 로딩 중일 때 표시할 내용
   }
@@ -64,11 +68,20 @@ export default function Header({ mode }) {
     <div id="header">
       <div className="header-headerContainer">
         <div>
-          <img src={LogoImg} alt="logo" />
+          <img
+            src={LogoImg}
+            alt="logo"
+            onClick={() => {
+              toMain();
+            }}
+          />
         </div>
         {/* 프로젝트 상세 페이지일 경우 검색창을 없앰 */}
         {mode === 2 ? (
-          <></>
+          <div
+            className="header-searchContainer"
+            style={{ border: "none" }}
+          ></div>
         ) : (
           <div className="header-searchContainer">
             <input className="header-searchBox" placeholder="책 제목, 작가명" />
diff --git a/src/imgs/grayLike.svg b/src/imgs/grayLike.svg
new file mode 100644
index 0000000..6711355
--- /dev/null
+++ b/src/imgs/grayLike.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7037 0.5C10.1156 0.5 8.74667 1.27533 8 2.55967C7.25333 1.27533 5.88444 0.5 4.2963 0.5C3.15727 0.501409 2.06529 0.966806 1.25987 1.79411C0.454457 2.62141 0.00137221 3.74306 0 4.91304C0 7.08837 1.33333 9.36184 3.95556 11.6688C5.16635 12.727 6.47363 13.6629 7.85926 14.4635C7.9025 14.4874 7.95086 14.5 8 14.5C8.04914 14.5 8.0975 14.4874 8.14074 14.4635C9.52637 13.6629 10.8336 12.727 12.0444 11.6688C14.6667 9.36184 16 7.08837 16 4.91304C15.9986 3.74306 15.5455 2.62141 14.7401 1.79411C13.9347 0.966806 12.8427 0.501409 11.7037 0.5ZM8 13.8472C6.96296 13.2385 0.592593 9.33141 0.592593 4.91304C0.593769 3.90444 0.984357 2.93749 1.67868 2.2243C2.37301 1.51111 3.31437 1.1099 4.2963 1.1087C5.86 1.1087 7.17407 1.96924 7.72593 3.35402C7.74825 3.40984 7.78622 3.45759 7.83503 3.49119C7.88383 3.52479 7.94125 3.54273 8 3.54273C8.05875 3.54273 8.11617 3.52479 8.16497 3.49119C8.21378 3.45759 8.25175 3.40984 8.27407 3.35402C8.82593 1.96924 10.14 1.1087 11.7037 1.1087C12.6856 1.1099 13.627 1.51111 14.3213 2.2243C15.0156 2.93749 15.4062 3.90444 15.4074 4.91304C15.4074 9.32608 9.03704 13.2415 8 13.8472Z" fill="#BFBFBF"/>
+<path d="M8 13.8472C6.96296 13.2385 0.592593 9.33141 0.592593 4.91304C0.593769 3.90444 0.984357 2.93749 1.67868 2.2243C2.37301 1.51111 3.31437 1.1099 4.2963 1.1087C5.86 1.1087 7.17407 1.96924 7.72593 3.35402C7.74825 3.40984 7.78622 3.45759 7.83503 3.49119C7.88383 3.52479 7.94125 3.54273 8 3.54273C8.05875 3.54273 8.11617 3.52479 8.16497 3.49119C8.21378 3.45759 8.25175 3.40984 8.27407 3.35402C8.82593 1.96924 10.14 1.1087 11.7037 1.1087C12.6856 1.1099 13.627 1.51111 14.3213 2.2243C15.0156 2.93749 15.4062 3.90444 15.4074 4.91304C15.4074 9.32608 9.03704 13.2415 8 13.8472Z" fill="#BFBFBF"/>
+</svg>
diff --git a/src/imgs/like.svg b/src/imgs/like.svg
new file mode 100644
index 0000000..299357a
--- /dev/null
+++ b/src/imgs/like.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5561 0.5H18.5556C16.2891 0.5 14.274 1.44345 13 3.06687C11.726 1.44345 9.71092 0.5 7.44444 0.5L7.44386 0.5C5.60641 0.502166 3.8427 1.21708 2.54016 2.49131C1.23725 3.7659 0.502226 5.49635 0.5 7.30373V7.30435C0.5 10.6337 2.63799 14.0088 6.61221 17.3387L6.61346 17.3397C8.45426 18.8719 10.4416 20.2269 12.5478 21.3859L12.5478 21.3859L12.5554 21.39C12.6926 21.4624 12.8453 21.5 13 21.5C13.1547 21.5 13.3074 21.4624 13.4446 21.39L13.4446 21.39L13.4522 21.3859C15.5584 20.2269 17.5457 18.8719 19.3865 17.3397L19.3878 17.3387C23.362 14.0088 25.5 10.6337 25.5 7.30435V7.30373C25.4978 5.49635 24.7628 3.7659 23.4598 2.49131C22.1573 1.21708 20.3936 0.502166 18.5561 0.5Z" fill="white" stroke="#303030"/>
+</svg>
diff --git a/src/imgs/redLike.svg b/src/imgs/redLike.svg
new file mode 100644
index 0000000..6e28955
--- /dev/null
+++ b/src/imgs/redLike.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7037 0.5C10.1156 0.5 8.74667 1.27533 8 2.55967C7.25333 1.27533 5.88444 0.5 4.2963 0.5C3.15727 0.501409 2.06529 0.966806 1.25987 1.79411C0.454457 2.62141 0.00137221 3.74306 0 4.91304C0 7.08837 1.33333 9.36184 3.95556 11.6688C5.16635 12.727 6.47363 13.6629 7.85926 14.4635C7.9025 14.4874 7.95086 14.5 8 14.5C8.04914 14.5 8.0975 14.4874 8.14074 14.4635C9.52637 13.6629 10.8336 12.727 12.0444 11.6688C14.6667 9.36184 16 7.08837 16 4.91304C15.9986 3.74306 15.5455 2.62141 14.7401 1.79411C13.9347 0.966806 12.8427 0.501409 11.7037 0.5ZM8 13.8472C6.96296 13.2385 0.592593 9.33141 0.592593 4.91304C0.593769 3.90444 0.984357 2.93749 1.67868 2.2243C2.37301 1.51111 3.31437 1.1099 4.2963 1.1087C5.86 1.1087 7.17407 1.96924 7.72593 3.35402C7.74825 3.40984 7.78622 3.45759 7.83503 3.49119C7.88383 3.52479 7.94125 3.54273 8 3.54273C8.05875 3.54273 8.11617 3.52479 8.16497 3.49119C8.21378 3.45759 8.25175 3.40984 8.27407 3.35402C8.82593 1.96924 10.14 1.1087 11.7037 1.1087C12.6856 1.1099 13.627 1.51111 14.3213 2.2243C15.0156 2.93749 15.4062 3.90444 15.4074 4.91304C15.4074 9.32608 9.03704 13.2415 8 13.8472Z" fill="#F4623B"/>
+<path d="M8 13.8472C6.96296 13.2385 0.592593 9.33141 0.592593 4.91304C0.593769 3.90444 0.984357 2.93749 1.67868 2.2243C2.37301 1.51111 3.31437 1.1099 4.2963 1.1087C5.86 1.1087 7.17407 1.96924 7.72593 3.35402C7.74825 3.40984 7.78622 3.45759 7.83503 3.49119C7.88383 3.52479 7.94125 3.54273 8 3.54273C8.05875 3.54273 8.11617 3.52479 8.16497 3.49119C8.21378 3.45759 8.25175 3.40984 8.27407 3.35402C8.82593 1.96924 10.14 1.1087 11.7037 1.1087C12.6856 1.1099 13.627 1.51111 14.3213 2.2243C15.0156 2.93749 15.4062 3.90444 15.4074 4.91304C15.4074 9.32608 9.03704 13.2415 8 13.8472Z" fill="#F4623B"/>
+</svg>
diff --git a/src/imgs/test5.png b/src/imgs/test5.png
new file mode 100644
index 0000000..8994eff
Binary files /dev/null and b/src/imgs/test5.png differ
diff --git a/src/pages/Mainpage.jsx b/src/pages/Mainpage.jsx
index 7e17e45..2f63551 100644
--- a/src/pages/Mainpage.jsx
+++ b/src/pages/Mainpage.jsx
@@ -12,7 +12,7 @@ export default function Mainpage() {
 
   return (
     <div className="main-page">
-      <Header />
+      <Header mode={0} />
       <div className="main-page-container">
         <div className="main-section" id="best-book">
           <div className="main-section-above" id="best-above">
diff --git a/src/pages/project/Detail.jsx b/src/pages/project/Detail.jsx
index f3d2e76..30d5b69 100644
--- a/src/pages/project/Detail.jsx
+++ b/src/pages/project/Detail.jsx
@@ -1,5 +1,87 @@
+import Header from "../../components/Header";
+
+import TestImg from "../../imgs/test5.png";
+import LikeImg from "../../imgs/like.svg";
+import GrayLikeImg from "../../imgs/grayLike.svg";
+import RedLikeImg from "../../imgs/redLike.svg";
+
+import "../../styles/detail.css";
+import { useState } from "react";
+
 // 프로젝트 상세 페이지
 export default function Detail() {
-    return <>Hi</>;
-  }
-  
\ No newline at end of file
+  const [like, setLike] = useState(false);
+
+  const handleSetLike = () => {
+    setLike(!like);
+  };
+  return (
+    <div id="detail-main">
+      <Header mode={2} />
+      <div className="detail-container">
+        <div className="detail-above">
+          <div className="detail-img-container">
+            <div
+              style={{ backgroundImage: `url(${TestImg})` }}
+              className="detail-img-back"
+            ></div>
+            <img src={TestImg} alt="img" id="detail-img-cover" />
+          </div>
+          <div className="detail-above-right">
+            <div className="detail-above-right-bottom">
+              <div className="detail-mywrite">나도 글쓰기</div>
+              <div className="detail-readbegin">처음부터 읽기</div>
+              <div className="detail-like-container">
+                <img
+                  src={LikeImg}
+                  alt="like"
+                  style={{ width: "22px", height: "20px" }}
+                />
+                <div>123</div>
+              </div>
+            </div>
+            <div>
+              <div>제목</div>
+              <div>저자</div>
+              <div>책 정보</div>
+              <div>정원</div>
+            </div>
+          </div>
+        </div>
+        <div id="detail-bookinfo">
+          <div>책 소개</div>
+          <div id="detail-contents">콘텐츠들</div>
+        </div>
+        <div id="detail-galpi-container">
+          <div>갈비 목록</div>
+          <div id="detail-galpi-list">
+            <div id="detail-galpi">
+              <div>1갈피</div>
+              <div>
+                <div>수정하기</div>
+                <div>설정</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <button>게시판 접속하기</button>
+        </div>
+        <div id="detail-comments-container">
+          <div>닉네임</div>
+          <div>날짜</div>
+          <div>이번 작품 너무 재밌어요!</div>
+          <div>
+            <img
+              onClick={() => {
+                handleSetLike();
+              }}
+              src={like ? RedLikeImg : GrayLikeImg}
+              alt="like"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles/detail.css b/src/styles/detail.css
new file mode 100644
index 0000000..6e62909
--- /dev/null
+++ b/src/styles/detail.css
@@ -0,0 +1,127 @@
+#detail-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.detail-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  min-width: 900px;
+
+  margin-top: 50px;
+}
+
+.detail-img-container {
+  position: relative;
+  width: 100%;
+  height: 340px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  margin-right: 20px;
+}
+
+.detail-img-back {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  opacity: 0.6;
+  z-index: 0;
+}
+
+#detail-img-cover {
+  position: relative;
+  z-index: 1;
+}
+
+.detail-above {
+  display: flex;
+
+  width: 100%;
+}
+
+.detail-above-right {
+  display: flex;
+  flex-direction: column-reverse;
+
+  width: 100%;
+
+  border: 1px solid #5ca54b;
+}
+
+.detail-mywrite {
+  flex: 3;
+  background-color: #5ca54b;
+  color: white;
+}
+.detail-readbegin {
+  flex: 3;
+}
+
+.detail-like-container {
+  flex: 1;
+}
+
+.detail-mywrite,
+.detail-readbegin {
+  border-right: 1px solid #5ca54b;
+}
+
+.detail-above-right-bottom {
+  display: flex;
+
+  border-top: 1px solid #5ca54b;
+}
+
+.detail-mywrite,
+.detail-readbegin,
+.detail-like-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-like-container img {
+  cursor: pointer;
+}
+
+#detail-bookinfo {
+  width: 100%;
+}
+
+#detail-contents {
+  background-color: #f4f4f4;
+  width: 100%;
+  padding: 15px;
+  /* padding이 width를 넘어가는 현상 수정 */
+  box-sizing: border-box;
+}
+
+#detail-galpi-container {
+  width: 100%;
+}
+
+#detail-galpi-list {
+  background-color: #f4f4f4;
+  padding: 15px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#detail-galpi {
+  background-color: white;
+}
+
+#detail-comments-container {
+  width: 100%;
+}
diff --git a/src/styles/header.css b/src/styles/header.css
index 0770427..560041f 100644
--- a/src/styles/header.css
+++ b/src/styles/header.css
@@ -45,7 +45,7 @@
   width: 80%;
 }
 
-img {
+#header img {
   cursor: pointer;
 }