diff --git a/src/data/http/authApi.js b/src/data/http/authApi.js
new file mode 100644
index 0000000..ac4ba13
--- /dev/null
+++ b/src/data/http/authApi.js
@@ -0,0 +1 @@
+import API from "./axios/api";
diff --git a/src/data/http/axios/api.js b/src/data/http/axios/api.js
new file mode 100644
index 0000000..fd2539a
--- /dev/null
+++ b/src/data/http/axios/api.js
@@ -0,0 +1,11 @@
+import axios from "axios";
+
+const API = axios.create({
+  baseURL: "http://localhost:3000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  withCredentials: true,
+});
+
+export default API;
diff --git a/src/data/http/requestProjectApi.js b/src/data/http/requestProjectApi.js
new file mode 100644
index 0000000..e5021b0
--- /dev/null
+++ b/src/data/http/requestProjectApi.js
@@ -0,0 +1,30 @@
+import API from "./axios/api";
+
+export default class requestProjectApiProvider {
+  async readRequestProjects() {
+    try {
+      const { data } = await API.get("/req-projects");
+      return data;
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  async readContributeProjects() {
+    try {
+      const { data } = await API.get("/req-projects:{request_id}");
+      return data;
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  async updateRequestProject() {
+    try {
+      const { data } = await API.put("/req-projects:{request_id}");
+      return data;
+    } catch (err) {
+      console.log(err);
+    }
+  }
+}
diff --git a/src/presentation/page/detailProject/RightBox.jsx b/src/presentation/page/detailProject/RightBox.jsx
index df5057a..7295072 100644
--- a/src/presentation/page/detailProject/RightBox.jsx
+++ b/src/presentation/page/detailProject/RightBox.jsx
@@ -15,6 +15,10 @@ function RightBox() {
       <styled.Title>The Great Escape</styled.Title>
       <AudioPlayer
         style={{
+          position: "absolute",
+          right: "4.5vw",
+          top: "200px",
+          width: "1000px",
           display: "flex",
           justifyContent: "flex-start",
           boxShadow: "none",
diff --git a/src/presentation/page/detailProject/styled.js b/src/presentation/page/detailProject/styled.js
index 3b23c87..463d12a 100644
--- a/src/presentation/page/detailProject/styled.js
+++ b/src/presentation/page/detailProject/styled.js
@@ -13,6 +13,7 @@ const LeftBox = styled.div`
   width: 58vw;
   height: 88vh;
   background-color: #fafafa;
+  z-index: 1;
 `;
 
 const LeftHeader = styled.header`
@@ -119,6 +120,7 @@ const RightBox = styled.div`
 const Title = styled.div`
   width: 30vw;
   height: 88px;
+  padding-left: 50px;
   font-family: NotoSansKR;
   font-size: 30px;
   font-weight: bold;
@@ -136,7 +138,7 @@ const ProjectStates = styled.div`
   align-items: center;
   width: 37vw;
   height: 10vh;
-  padding: 40px 20px;
+  padding: 160px 20px 40px 50px;
 `;
 
 const RequestField = styled.div`
@@ -144,8 +146,8 @@ const RequestField = styled.div`
   justify-content: space-evenly;
   flex-direction: column;
   align-items: flex-start;
-  width: 190px;
-  height: 90px;
+  width: 240px;
+  height: 120px;
   border-radius: 10px;
   background-color: #fffcf2;
 `;
@@ -155,6 +157,8 @@ const RequestFieldTitle = styled.div`
   justify-content: space-evenly;
   width: 70px;
   height: 20px;
+  padding-left: 20px;
+
   font-family: NotoSansKR;
   font-size: 14px;
   font-weight: 600;
@@ -195,8 +199,8 @@ const RequestGenre = styled.div`
   flex-direction: column;
   justify-content: space-evenly;
   align-items: flex-start;
-  width: 190px;
-  height: 90px;
+  width: 240px;
+  height: 120px;
   border-radius: 10px;
   background-color: #fffcf2;
 `;
@@ -206,6 +210,7 @@ const RequestGenreTitle = styled.div`
   justify-content: space-evenly;
   width: 55px;
   height: 20px;
+  padding-left: 20px;
   font-family: NotoSansKR;
   font-size: 14px;
   font-weight: 600;
@@ -238,8 +243,10 @@ const RequestMood = styled.div`
   flex-direction: column;
   justify-content: space-evenly;
   align-items: flex-start;
-  width: 190px;
-  height: 90px;
+  width: 240px;
+  height: 120px;
+  padding-left: 20px;
+
   border-radius: 10px;
   background-color: #fffcf2;
 `;
@@ -279,7 +286,7 @@ const RequestMoodItems = styled.div`
 const RequestText = styled.div`
   width: 37vw;
   height: 20vh;
-  padding: 20px 20px 100px 20px;
+  padding: 20px 20px 100px 50px;
   font-family: NotoSansKR;
   font-size: 14px;
   font-weight: 600;
@@ -315,6 +322,7 @@ const RequestProfile = styled.div`
 const ProfileImage = styled.img`
   width: 100px;
   height: 100px;
+  padding-left: 50px;
 `;
 
 const RequestContext = styled.div`
@@ -330,6 +338,7 @@ const RequestContext = styled.div`
 const RequestEmail = styled.div`
   width: 30vw;
   height: 10vh;
+  padding-top: 30px;
   font-family: NotoSansKR;
   font-size: 20px;
   font-weight: 600;
@@ -343,7 +352,7 @@ const RequestEmail = styled.div`
 
 const RequestIntroduce = styled.div`
   width: 35vw;
-  height: 10vh;
+  height: 20vh;
   font-family: NotoSansKR;
   font-size: 14px;
   font-weight: 600;
diff --git a/src/presentation/page/main/Project.jsx b/src/presentation/page/main/Project.jsx
index 410938a..fd396e6 100644
--- a/src/presentation/page/main/Project.jsx
+++ b/src/presentation/page/main/Project.jsx
@@ -2,13 +2,18 @@ import React, { useState, useEffect } from "react";
 import styled from "./styled";
 import axios from "axios";
 
+// const readRequestProjects = async () => {
+//   try {
+//     const { data } = await API.get("/req-projects");
+//     return data;
+//   } catch (err) {
+//     console.log(err);
+//   }
+// };
 function Project() {
   const [projects, setProjects] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const [page, setPage] = useState(1);
-  const [start, setStart] = useState(0);
-  const [end, setEnd] = useState(8);
 
   useEffect(() => {
     const fetchProjects = async () => {
diff --git a/src/presentation/page/main/styled.js b/src/presentation/page/main/styled.js
index 01859a0..bf8c243 100644
--- a/src/presentation/page/main/styled.js
+++ b/src/presentation/page/main/styled.js
@@ -71,8 +71,8 @@ const ProjectBox = styled.div`
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  width: 85%;
-  height: 100%;
+  width: 85vw;
+  height: 100vh;
 `;
 
 const Project = styled.div`