diff --git a/src/pages/RollingPaper/RollingPaperPage.jsx b/src/pages/RollingPaper/RollingPaperPage.jsx
index d672433..ff7e6d9 100644
--- a/src/pages/RollingPaper/RollingPaperPage.jsx
+++ b/src/pages/RollingPaper/RollingPaperPage.jsx
@@ -4,14 +4,15 @@ import InformationBar from "../../components/common/InformationBar/InformationBa
 import CardWrite from "../../components/domain/rollingpaper/Card/CardWrite";
 import Card from "../../components/domain/rollingpaper/Card/Card";
 import styled from "styled-components";
-import recipientsService from "../../api/services/recipientsService";
-import axios from "axios";
 
+import recipientsService from "../../api/services/recipientsService"; // get 요청
 
 const CardContainer = styled.div`
   margin: auto;
   display: flex;
+  align-items: center;
   justify-content: center;
+
   padding: 100px 24px;
   width: 100%;
   box-sizing: border-box;
@@ -24,6 +25,11 @@ const DivWrap = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
+ 
+  @media (max-width: 1248px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   opacity: ${({ isLoaded }) => (isLoaded ? 1 : 0)};
   transition: opacity 0.5s ease-in-out;
 `;
@@ -39,11 +45,25 @@ const BackgroundWrap = styled.div`
   background-repeat: no-repeat;
   background-position: center top;
   background-attachment: fixed;
+
   @media (max-width: 768px) {
-    background-attachment: scroll;
+    grid-template-columns: 1fr;
   }
 `;
 
+
+const BackgroundWrap = styled.div.withConfig({
+  shouldForwardProp: (prop) =>
+    !["bgColor", "backgroundImageURL"].includes(prop),
+})`
+  background-image: ${({ backgroundImageURL }) =>
+    backgroundImageURL ? `url(${backgroundImageURL})` : "none"};
+  background-color: ${({ bgColor }) => bgColor || "#FFE2AD"};
+  min-height: calc(100vh - 65px);
+  background-size: cover;
+  background-position: center;
+`;
+
 const colorMap = {
   beige: "#FFE2AD",
   purple: "#ECD9FF",
@@ -51,10 +71,12 @@ const colorMap = {
   green: "#D0F5C3",
 };
 
+
 function RollingPaperDetailPage() {
   const { id } = useParams();
   const [loading, setLoading] = useState(true);
   const [recipientData, setRecipientData] = useState({});
+
   const [messages, setMessages] = useState([]);
   const [nextUrl, setNextUrl] = useState(null);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -80,7 +102,10 @@ function RollingPaperDetailPage() {
     if (id) fetchInitialData();
   }, [id]);
 
-  const loadMoreMessages = async () => {
+ 
+
+  // 메시지 로드 함수
+const loadMoreMessages = async () => {
     if (!nextUrl || isFetchingRef.current) return;
     isFetchingRef.current = true;
     try {
@@ -104,6 +129,7 @@ function RollingPaperDetailPage() {
     return () => observer.disconnect();
   }, [messages]);
 
+
   useEffect(() => {
     setTimeout(() => setIsLoaded(true), 100);
   }, []);
@@ -116,7 +142,9 @@ function RollingPaperDetailPage() {
       <InformationBar
         name={recipientData?.name ?? ""}
         count={recipientData?.messageCount ?? 0}
-        profileImages={recipientData?.recentMessages?.map(({ profileImageURL }) => profileImageURL) || []}
+        profileImages={(recipientData?.recentMessages ?? []).map(
+          ({ profileImageURL }) => profileImageURL
+        )}
         topReactions={recipientData?.topReactions ?? []}
         setRecipientData={setRecipientData}
       />
@@ -128,6 +156,7 @@ function RollingPaperDetailPage() {
               <CardWrite message={message} fontFamily={message.font} />
             </div>
           ))}
+          {messages?.length > 0 && <div id="last-card"></div>}
         </DivWrap>
       </CardContainer>
     </BackgroundWrap>