diff --git a/src/App.jsx b/src/App.jsx
index 7b90e24..064164d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -21,6 +21,7 @@ function App() {
     let vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty("--vh", `${vh}px`);
   }
+
   useEffect(() => {
     setScreenSize();
   });
diff --git a/src/assets/template-0.png b/src/assets/template-0.png
index 150e24e..465ff2e 100644
Binary files a/src/assets/template-0.png and b/src/assets/template-0.png differ
diff --git a/src/assets/template-1.png b/src/assets/template-1.png
index 8f8eeee..2779ed5 100644
Binary files a/src/assets/template-1.png and b/src/assets/template-1.png differ
diff --git a/src/assets/template-10.png b/src/assets/template-10.png
new file mode 100644
index 0000000..8f8eeee
Binary files /dev/null and b/src/assets/template-10.png differ
diff --git a/src/assets/template-11.png b/src/assets/template-11.png
new file mode 100644
index 0000000..150e24e
Binary files /dev/null and b/src/assets/template-11.png differ
diff --git a/src/assets/template-12.png b/src/assets/template-12.png
new file mode 100644
index 0000000..fe92cad
Binary files /dev/null and b/src/assets/template-12.png differ
diff --git a/src/assets/template-13.png b/src/assets/template-13.png
new file mode 100644
index 0000000..47b2ac8
Binary files /dev/null and b/src/assets/template-13.png differ
diff --git a/src/assets/template-14.png b/src/assets/template-14.png
new file mode 100644
index 0000000..3fa292a
Binary files /dev/null and b/src/assets/template-14.png differ
diff --git a/src/assets/template-2.png b/src/assets/template-2.png
index 47b2ac8..227430c 100644
Binary files a/src/assets/template-2.png and b/src/assets/template-2.png differ
diff --git a/src/assets/template-3.png b/src/assets/template-3.png
index 3fa292a..9d13a87 100644
Binary files a/src/assets/template-3.png and b/src/assets/template-3.png differ
diff --git a/src/assets/template-4.png b/src/assets/template-4.png
index fe92cad..5f566da 100644
Binary files a/src/assets/template-4.png and b/src/assets/template-4.png differ
diff --git a/src/assets/template-5.png b/src/assets/template-5.png
new file mode 100644
index 0000000..4c3ff7d
Binary files /dev/null and b/src/assets/template-5.png differ
diff --git a/src/assets/template-6.png b/src/assets/template-6.png
new file mode 100644
index 0000000..c49208d
Binary files /dev/null and b/src/assets/template-6.png differ
diff --git a/src/assets/template-7.png b/src/assets/template-7.png
new file mode 100644
index 0000000..d50194a
Binary files /dev/null and b/src/assets/template-7.png differ
diff --git a/src/assets/template-8.png b/src/assets/template-8.png
new file mode 100644
index 0000000..eb8c034
Binary files /dev/null and b/src/assets/template-8.png differ
diff --git a/src/component/AllFrameCpn/FrameList.jsx b/src/component/AllFrameCpn/FrameList.jsx
index 5764ee3..cf29ee7 100644
--- a/src/component/AllFrameCpn/FrameList.jsx
+++ b/src/component/AllFrameCpn/FrameList.jsx
@@ -27,15 +27,15 @@ const FrameList = () => {
         )
         .then((res) => {
           console.log(res.data);
-          // 성공적으로 데이터를 받아온 경우
-          setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
+
+          setFrames(res.data);
         })
         .catch((err) => {
           // 오류 처리
           console.error("API 요청 중 오류 발생:", err);
         });
     }
-  }, [accessToken]); // useEffect가 실행되는 조건을 accessToken이 변경될 때로 설정
+  }, [accessToken]);
 
   return (
     <div className={styles.FrameList}>
diff --git a/src/component/MakeFrameCpn/Background.module.css b/src/component/MakeFrameCpn/Background.module.css
index 0bfe117..6cccc32 100644
--- a/src/component/MakeFrameCpn/Background.module.css
+++ b/src/component/MakeFrameCpn/Background.module.css
@@ -4,13 +4,14 @@
 }
 
 .ListTop {
-  height: 40px;
+  height: 20%;
   padding: 10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   font-weight: 400;
+  padding-top: 25px;
 }
 
 .ListTop button {
@@ -20,7 +21,7 @@
 
 .ListView {
   width: 100%;
-  height: 120px;
+  height: 80%;
   padding: 5px 0px;
   display: flex;
   flex-direction: column;
diff --git a/src/component/MakeFrameCpn/Sticker.module.css b/src/component/MakeFrameCpn/Sticker.module.css
index efaad87..32e8964 100644
--- a/src/component/MakeFrameCpn/Sticker.module.css
+++ b/src/component/MakeFrameCpn/Sticker.module.css
@@ -1,11 +1,14 @@
 .Bottom {
   width: 390px;
   height: 204px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .ListTop {
-  height: 40px;
-  padding: 14px 14px 14px 18px;
+  height: 20%;
+  padding: 25px 14px 14px 18px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -23,7 +26,7 @@
   display: flex;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
-  height: 80px;
+  height: 80%;
   padding: 15px 0px 15px 18px;
   flex-direction: row;
   gap: 18px;
diff --git a/src/component/MakeFrameCpn/Template.jsx b/src/component/MakeFrameCpn/Template.jsx
index 8a0cf6c..0ad0d19 100644
--- a/src/component/MakeFrameCpn/Template.jsx
+++ b/src/component/MakeFrameCpn/Template.jsx
@@ -3,6 +3,16 @@ import template1 from "../../assets/template-1.png";
 import template2 from "../../assets/template-2.png";
 import template3 from "../../assets/template-3.png";
 import template4 from "../../assets/template-4.png";
+import template5 from "../../assets/template-5.png";
+import template6 from "../../assets/template-6.png";
+import template7 from "../../assets/template-7.png";
+import template8 from "../../assets/template-8.png";
+// import template9 from "../../assets/template-9.png";
+import template10 from "../../assets/template-10.png";
+import template11 from "../../assets/template-11.png";
+import template12 from "../../assets/template-12.png";
+import template13 from "../../assets/template-13.png";
+import template14 from "../../assets/template-14.png";
 import styles from "./Template.module.css";
 
 const Template = ({ changeFrameImage }) => {
@@ -12,9 +22,6 @@ const Template = ({ changeFrameImage }) => {
 
   return (
     <div className={styles.Bottom}>
-      <div className={styles.ListTop}>
-        <button>테마 for.. Beta</button>
-      </div>
       <div className={styles.ListView}>
         <button onClick={() => handleFrameButtonClick(template0)}>
           <img src={template0} alt="template0" />
@@ -25,12 +32,39 @@ const Template = ({ changeFrameImage }) => {
         <button onClick={() => handleFrameButtonClick(template2)}>
           <img src={template2} alt="template2" />
         </button>
-        {/* <button>
+        <button onClick={() => handleFrameButtonClick(template3)}>
           <img src={template3} alt="template3" />
-        </button> */}
+        </button>
         <button onClick={() => handleFrameButtonClick(template4)}>
           <img src={template4} alt="template4" />
         </button>
+        <button onClick={() => handleFrameButtonClick(template5)}>
+          <img src={template5} alt="template5" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template6)}>
+          <img src={template6} alt="template6" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template7)}>
+          <img src={template7} alt="template7" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template8)}>
+          <img src={template8} alt="template8" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template10)}>
+          <img src={template10} alt="template10" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template11)}>
+          <img src={template11} alt="template11" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template12)}>
+          <img src={template12} alt="template12" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template13)}>
+          <img src={template13} alt="template13" />
+        </button>
+        <button onClick={() => handleFrameButtonClick(template14)}>
+          <img src={template14} alt="template14" />
+        </button>
       </div>
     </div>
   );
diff --git a/src/component/MakeFrameCpn/Template.module.css b/src/component/MakeFrameCpn/Template.module.css
index a720bf4..011058f 100644
--- a/src/component/MakeFrameCpn/Template.module.css
+++ b/src/component/MakeFrameCpn/Template.module.css
@@ -3,31 +3,33 @@
   height: 204px;
 }
 
-.ListTop {
-  height: 40px;
-  padding: 14px 14px 14px 18px;
+.ListView {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
-  font-size: 10px;
-  font-weight: 400;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  height: 100%;
+  padding: 15px 0px 15px 18px;
+  flex-direction: row;
+  gap: 18px;
 }
 
-.ListTop button {
-  width: 100%;
-  background-color: #ffffff;
-  border: none;
-  display: flex;
-  justify-content: center;
+.ListView::-webkit-scrollbar {
+  width: 12px; /* 스크롤 바의 너비 */
+  height: 12px; /* 스크롤 바의 높이 */
+  display: none;
 }
 
-.ListView {
-  display: flex;
-  height: 100px;
-  padding: 0px 0px 0px 18px;
-  flex-direction: row;
-  gap: 6px;
+.ListView::-webkit-scrollbar-thumb {
+  background-color: #888; /* 스크롤 바 색상 */
+  border-radius: 6px; /* 스크롤 바 모서리 둥글기 */
+}
+
+.ListView::-webkit-scrollbar-track {
+  background-color: #f5f5f5; /* 스크롤 바의 배경색 */
+  border-radius: 6px; /* 스크롤 바 배경 모서리 둥글기 */
 }
 
 .ListView button {
diff --git a/src/pages/Frame/ApplyFrame.jsx b/src/pages/Frame/ApplyFrame.jsx
index 6d7aa91..176b206 100644
--- a/src/pages/Frame/ApplyFrame.jsx
+++ b/src/pages/Frame/ApplyFrame.jsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import React, { useState, useEffect } from "react";
 import styles from "../Frame/ApplyFrame.module.css";
-import edit from "../../img/edit.png";
+import left from "../../img/left.png";
 import trash from "../../img/trash.png";
 import photobook from "../../img/book.png";
 import frameline from "../../img/frame-line.png";
@@ -19,6 +19,8 @@ const ApplyFrame = () => {
   const [accessToken] = useAtom(accessTokenAtom);
   const [uploadedImage, setUploadedImage] = useState(null);
 
+  console.log(selectedFrame);
+
   useEffect(() => {
     // uploadedImage 값이 변경될 때 로컬 스토리지에 이미지 데이터를 저장합니다.
     if (uploadedImage) {
@@ -36,7 +38,6 @@ const ApplyFrame = () => {
   const handleEditFrame = (frameUrl) => {
     console.log("Edit Frame URL:", frameUrl);
 
-    // 수정할 프레임의 URL과 accessToken을 이용하여 PUT 요청을 생성
     const editFrameRequest = {
       url: `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame`,
       method: "PUT",
@@ -45,53 +46,44 @@ const ApplyFrame = () => {
         "Content-Type": "application/json",
       },
       data: {
-        url: frameUrl, // 수정할 프레임의 URL
-        // 여기에 수정할 데이터 추가 (예: 수정된 프레임의 새로운 URL 등)
+        url: frameUrl,
       },
     };
 
-    // Axios를 사용하여 PUT 요청 보내기
     axios(editFrameRequest)
       .then((response) => {
-        // 수정 요청이 성공했을 때의 동작
         console.log("프레임 수정 요청 성공:", response.data);
-        // 필요에 따라 상태(state)를 업데이트하거나 다른 작업 수행
       })
       .catch((error) => {
-        // 수정 요청이 실패했을 때의 동작
         console.error("프레임 수정 요청 실패:", error);
-        // 오류 처리 혹은 다른 처리 로직 구현
       });
   };
 
   const handleDeleteFrame = (frameUrl) => {
     console.log("Delete Frame URL:", frameUrl);
 
-    // 삭제할 프레임의 URL과 accessToken을 이용하여 DELETE 요청을 생성
-    const deleteFrameRequest = {
-      url: `http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame`,
-      method: "DELETE",
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        "Content-Type": "application/json",
-      },
-      data: {
-        url: frameUrl,
-      },
-    };
-
-    // Axios를 사용하여 DELETE 요청 보내기
-    axios(deleteFrameRequest)
-      .then((response) => {
-        // 삭제 요청이 성공했을 때의 동작
-        console.log("프레임 삭제 요청 성공:", response.data);
-        // 필요에 따라 상태(state)를 업데이트하거나 다른 작업 수행
-      })
-      .catch((error) => {
-        // 삭제 요청이 실패했을 때의 동작
-        console.error("프레임 삭제 요청 실패:", error);
-        // 오류 처리 혹은 다른 처리 로직 구현
-      });
+    if (accessToken) {
+      const config = {
+        headers: {
+          Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
+        },
+      };
+      axios
+        .delete(
+          "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/frame",
+          config,
+          { data: frameUrl }
+        )
+        .then((res) => {
+          console.log(res.data);
+          // 성공적으로 데이터를 받아온 경우
+          setFrames(res.data); // 받아온 데이터로 frames 상태 업데이트
+        })
+        .catch((err) => {
+          // 오류 처리
+          console.error("API 요청 중 오류 발생:", err);
+        });
+    }
   };
 
   const handleUploadedImage = (event) => {
@@ -108,40 +100,47 @@ const ApplyFrame = () => {
   };
 
   const handleSaveClick = () => {
-    // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
     if (accessToken) {
-      const frameElement = document.querySelector("img");
+      const frameElement = document.querySelector(`.${styles.Frame}`);
       frameElement.src = selectedFrame;
 
       html2canvas(frameElement).then((canvas) => {
-        canvas.toBlob((blob) => {
-          const formData = new FormData();
-          formData.append("photo", blob, "photo.png");
-
-          console.log(formData);
-
-          // axios 요청 설정
-          const config = {
-            headers: {
-              "Content-Type": "multipart/form-data",
-              Authorization: `Bearer ${accessToken}`, // 헤더에 accessToken을 추가
-            },
-          };
-
-          axios
-            .post(
-              "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/photo",
-              formData,
-              config
-            )
-            .then((res) => {
-              console.log("프레임 적용한 사진 저장 API 응답:", res.data);
-            })
-            .catch((err) => {
-              // 오류 처리
-              console.error("API 요청 중 오류 발생:", err);
-            });
-        }, "image/png");
+        const context = canvas.getContext("2d");
+
+        const selectedFrameImg = new Image();
+        selectedFrameImg.crossOrigin = "anonymous";
+        selectedFrameImg.src =
+          selectedFrame + "?timestamp=" + new Date().getTime();
+        console.log(selectedFrameImg);
+        selectedFrameImg.onload = () => {
+          context.drawImage(selectedFrameImg, 0, 0);
+
+          // Convert canvas content to blob and save
+          canvas.toBlob((blob) => {
+            const formData = new FormData();
+            formData.append("photo", blob, "frame.png");
+
+            const config = {
+              headers: {
+                "Content-Type": "multipart/form-data",
+                Authorization: `Bearer ${accessToken}`,
+              },
+            };
+
+            axios
+              .post(
+                "http://ec2-3-35-208-177.ap-northeast-2.compute.amazonaws.com:8080/photo",
+                formData,
+                config
+              )
+              .then((res) => {
+                console.log("프레임 적용한 사진 저장 API 응답:", res.data);
+              })
+              .catch((err) => {
+                console.error("API 요청 중 오류 발생:", err);
+              });
+          }, "image/png");
+        };
       });
     }
   };
@@ -150,12 +149,11 @@ const ApplyFrame = () => {
     <div className={styles.ApplyFrame}>
       <div className={styles.ApplyFramebox}>
         <div className={styles.Top}>
-          <button
-            className={styles.ImgBtn}
-            onClick={() => handleEditFrame(selectedFrame)}
-          >
-            <img src={edit} alt="edit" />
-          </button>
+          <Link to="/frame">
+            <button className={styles.ImgBtn}>
+              <img src={left} alt="left" />
+            </button>
+          </Link>
           <button
             className={styles.ImgBtn}
             onClick={() => handleDeleteFrame(selectedFrame)}
@@ -202,7 +200,7 @@ const ApplyFrame = () => {
                 전체 프레임
               </button>
             </Link>
-            <Link to="/photobook">
+            <Link to="/photoselect">
               <button className={styles.now}>
                 <img src={photobook} alt="photobook"></img>
                 포토북
diff --git a/src/pages/Frame/ApplyFrame.module.css b/src/pages/Frame/ApplyFrame.module.css
index 1a0b501..0a23f61 100644
--- a/src/pages/Frame/ApplyFrame.module.css
+++ b/src/pages/Frame/ApplyFrame.module.css
@@ -3,6 +3,10 @@ body {
   padding: 0px;
 }
 
+button {
+  text-decoration: none;
+}
+
 .ApplyFrame {
   width: 390px;
   height: calc(var(--vh, 1vh) * 100);
@@ -23,8 +27,9 @@ body {
   height: 85px;
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
+  padding: 0px 30px;
   border-bottom: 2px solid #c9c9c9;
 }
 
@@ -165,7 +170,3 @@ body {
   width: 24px;
   height: 24px;
 }
-
-.now {
-  text-decoration: none;
-}
diff --git a/src/pages/Frame/Frame.jsx b/src/pages/Frame/Frame.jsx
index 7b705b6..66718fc 100644
--- a/src/pages/Frame/Frame.jsx
+++ b/src/pages/Frame/Frame.jsx
@@ -44,8 +44,7 @@ const Frame = () => {
       break;
   }
 
-  const topSpan =
-    selectedButton === "프레임 제작" ? "전체 프레임" : "전체 포토";
+  const topSpan = selectedButton === "프레임 제작" ? "Home" : "전체 포토";
 
   return (
     <div className={styles.Frame}>
@@ -55,17 +54,21 @@ const Frame = () => {
             <img src={home} alt="logo" />
           </button>
         </Link>
-        <span>{topSpan}</span>
-        <button className={styles.mylistBtn}>
-          <img src={framelist} alt="framelist"></img>
-        </button>
+        <div className={styles.Center}>
+          <span>{topSpan}</span>
+        </div>
+        <div className={styles.Right}>
+          <button className={styles.mylistBtn}>
+            <img src={framelist} alt="framelist"></img>
+          </button>
+        </div>
       </div>
       <div className={styles.Middle}>{middleContent}</div>
       <div className={styles.Bottom}>
         <div className={styles.ListBottom}>
           <button onClick={() => handleButtonClick("프레임 제작")}>
             <img src={frame} alt="frame"></img>
-            프레임 제작
+            전체 프레임
           </button>
           <button onClick={() => handleButtonClick("포토북")}>
             <img src={book} alt="book"></img>
diff --git a/src/pages/Frame/Frame.module.css b/src/pages/Frame/Frame.module.css
index 3e99cd2..98ecf06 100644
--- a/src/pages/Frame/Frame.module.css
+++ b/src/pages/Frame/Frame.module.css
@@ -9,10 +9,11 @@
 }
 
 .Top {
+  width: 100%;
   height: 86px;
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 }
 
@@ -21,7 +22,6 @@
   text-align: center;
   font-size: 18px;
   font-weight: 600;
-  padding-left: 50px;
 }
 
 .Top button {
@@ -29,7 +29,13 @@
   height: 24px;
   background-color: #ffffff;
   border: none;
-  padding-right: 45px;
+  padding-left: 30px;
+  padding-right: 50px;
+}
+
+.Center {
+  flex: 1; /* 가운데 영역이 남은 공간을 모두 차지하도록 설정 */
+  text-align: center; /* 텍스트 가운데 정렬 */
 }
 
 .mylistBtn {
diff --git a/src/pages/Frame/MakeFrame.jsx b/src/pages/Frame/MakeFrame.jsx
index 75d64cf..8c0d066 100644
--- a/src/pages/Frame/MakeFrame.jsx
+++ b/src/pages/Frame/MakeFrame.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Link } from "react-router-dom";
+import { Link, Navigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { saveAs } from "file-saver";
 import home from "../../img/home.png";
@@ -45,7 +45,7 @@ const MakeFrame = () => {
   const [draggingStickerIndex, setDraggingStickerIndex] = useState(null);
   const [stickerPos, setStickerPos] = useState({ x: 100, y: 100 });
   const [frames, setFrames] = useState([]);
-  const [bottomContentHeight, setBottomContentHeight] = useState(270);
+  const [bottomContentHeight, setBottomContentHeight] = useState(200);
 
   const canvasRef = useRef(null);
   const contextRef = useRef(null);
@@ -115,6 +115,14 @@ const MakeFrame = () => {
 
   const handleButtonClick = (button) => {
     setSelectedButton(button);
+
+    // 브러쉬 버튼을 클릭했을 때 bottomContentHeight를 조정하여 Middle 영역의 높이를 변경
+    if (button === "브러쉬") {
+      setBottomContentHeight(70); // 브러쉬 버튼 클릭 시 높이 변경 (원하는 값으로 설정)
+    } else {
+      // 다른 버튼 클릭 시 기본 높이로 변경
+      setBottomContentHeight(200); // 기본 높이 설정 (원하는 값으로 설정)
+    }
   };
 
   const setTransform = () => {
@@ -136,6 +144,18 @@ const MakeFrame = () => {
     zoomCanvas.width = zoomCanvas.width;
     setTransform();
     context.drawImage(stickerImg, 0, 0, zoomCanvas.width, zoomCanvas.height);
+
+    selectedStickers.forEach((pos, index) => {
+      if (selectedStickers[index] && pos) {
+        context.drawImage(
+          selectedStickers[index],
+          pos.x,
+          pos.y,
+          stickerSize,
+          stickerSize
+        );
+      }
+    });
   };
 
   useEffect(() => {
@@ -267,7 +287,13 @@ const MakeFrame = () => {
   };
 
   const handleSaveClick = () => {
-    setUploadedImage(null);
+    // 저장하기 전에 uploadedImage를 일시적으로 숨깁니다.
+    const uploadedImageElement = document.querySelector(
+      `.${styles.UploadedImage}`
+    );
+    if (uploadedImageElement) {
+      uploadedImageElement.style.display = "none";
+    }
 
     // 액세스 토큰이 있을 때만 API 요청을 보내도록 조건 처리
     if (accessToken) {
@@ -278,6 +304,8 @@ const MakeFrame = () => {
           const formData = new FormData();
           formData.append("frame", blob, "frame.png");
 
+          console.log(formData);
+
           // axios 요청 설정
           const config = {
             headers: {
@@ -296,6 +324,7 @@ const MakeFrame = () => {
               console.log("프레임 저장 API 응답:", res.data);
               const updatedFrames = [...frames, res.data]; // 새로운 데이터 추가
               setFrames(updatedFrames);
+              return <Navigate to="/frame" />;
             })
             .catch((err) => {
               // 오류 처리
@@ -337,16 +366,7 @@ const MakeFrame = () => {
       );
       break;
     case "브러쉬":
-      bottomContent = (
-        <div
-          className={styles.ListBottom}
-          style={{
-            height: "70px",
-          }}
-        >
-          <Brush ctx={ctx} setCtx={setCtx} />
-        </div>
-      );
+      bottomContent = <Brush ctx={ctx} setCtx={setCtx} />;
       break;
     case "사진 추가":
       bottomContent = <AddPhoto handleUploadedImage={handleUploadedImage} />;
@@ -383,6 +403,7 @@ const MakeFrame = () => {
               <img src={home} alt="logo" />
             </button>
           </Link>
+
           <button className={styles.ImgBtn} onClick={handleSaveClick}>
             <img src={save} alt="save" />
           </button>
@@ -448,8 +469,16 @@ const MakeFrame = () => {
             <button onClick={undoAction}>실행 취소</button>
           </div>
         </div>
-        <div className={styles.Bottom}>
-          {bottomContent}
+        <div
+          className={styles.Bottom}
+          // style={{ transform: `translateY(${bottomContentHeight - 130}px)` }}
+        >
+          <div
+            className={styles.BottomContent}
+            style={{ height: `${bottomContentHeight}px` }}
+          >
+            {bottomContent}
+          </div>
           <div className={styles.ListBottom}>
             <button
               className={styles.now}
diff --git a/src/pages/Frame/MakeFrame.module.css b/src/pages/Frame/MakeFrame.module.css
index f06b47e..fdc0c3b 100644
--- a/src/pages/Frame/MakeFrame.module.css
+++ b/src/pages/Frame/MakeFrame.module.css
@@ -11,9 +11,12 @@ body {
   flex-direction: column;
   justify-content: center;
   margin: 0;
+  overflow-y: hidden;
 }
 
 .MakeFramebox {
+  width: 390px;
+  height: calc(var(--vh, 1vh) * 100);
   display: flex;
   flex-direction: column;
 }
@@ -53,7 +56,7 @@ body {
 
 .Middle {
   width: 390px;
-  height: 480px;
+  flex: 1;
   display: inline-block;
   flex-direction: column;
   justify-content: center;
@@ -65,7 +68,7 @@ body {
 .Frame {
   position: relative;
   width: 300px;
-  height: 430px;
+  height: 480px;
   object-fit: contain;
   top: 0;
   left: 50%;
@@ -123,7 +126,7 @@ body {
 
 .Return {
   width: 390px;
-  height: 50px;
+  height: 40px;
   display: flex;
   flex-direction: row;
   justify-content: center;
diff --git a/src/pages/Photobook/PhotoSelect.jsx b/src/pages/Photobook/PhotoSelect.jsx
index d98ef65..57bf6c6 100644
--- a/src/pages/Photobook/PhotoSelect.jsx
+++ b/src/pages/Photobook/PhotoSelect.jsx
@@ -36,8 +36,8 @@ export default function PhotoSelect() {
     axios
       .get("/photo")
       .then((response) => {
-        setGetPhotos(response.data);
-        // console.log(getPhotos);
+        setGetPhotos(response.data.photoList);
+        console.log(response.data);
       })
       .catch((error) => console.error(error));
   }, [selectedPhotos]);
diff --git a/src/pages/Photobook/PhotoSelect.module.scss b/src/pages/Photobook/PhotoSelect.module.scss
index 0409611..036567c 100644
--- a/src/pages/Photobook/PhotoSelect.module.scss
+++ b/src/pages/Photobook/PhotoSelect.module.scss
@@ -4,6 +4,7 @@
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
+  gap: 30px;
 }
 
 .header {
diff --git a/src/pages/Photobook/Photobook.jsx b/src/pages/Photobook/Photobook.jsx
index be085c8..0290cde 100644
--- a/src/pages/Photobook/Photobook.jsx
+++ b/src/pages/Photobook/Photobook.jsx
@@ -222,9 +222,7 @@ export default function Photobook() {
           <p>쪽지 입력하기</p>
         </div> */}
       </div>
-      <div className={styles.navBottom}>
-        <img src={navBottom} alt={navBottom} />
-      </div>
+      <div className={styles.navBottom}></div>
       {/* 모달 */}
       <div className={styles[`modal${modal}`]}>
         <img className={styles.memoModal} src={memoModal} alt={memoModal} />
diff --git a/src/pages/Photobook/PhotobookUuid.jsx b/src/pages/Photobook/PhotobookUuid.jsx
index 85a58c8..d86754b 100644
--- a/src/pages/Photobook/PhotobookUuid.jsx
+++ b/src/pages/Photobook/PhotobookUuid.jsx
@@ -184,7 +184,8 @@ export default function Photobook() {
                 className={styles.photo}
                 style={{ scale, backgroundImage: `url(${photos[i]})` }}
               />
-              {selectedEmoji !== null && (
+              {/* 선택된 photo일 때만 memopic을 렌더링 */}
+              {selectedEmoji !== null && i === index.current && (
                 <animated.img
                   className={styles.memopic}
                   src={`${memopicArray[selectedEmoji]}`}