diff --git a/src/components/common/Input/Input/Input.jsx b/src/components/common/Input/Input/Input.jsx
index 51f6d4b..0d0e007 100644
--- a/src/components/common/Input/Input/Input.jsx
+++ b/src/components/common/Input/Input/Input.jsx
@@ -16,11 +16,7 @@ export const Bone = styled.div`
   width: 100%;
   max-width: 720px;
 
-  @media (max-width: 768px) {
-    padding: 0;
-  }
-
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     padding: 0;
   }
 `;
@@ -32,6 +28,9 @@ const Picker = styled.div`
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: center;
+  @media (max-width: 767px) {
+    margin-top: auto;
+  }
 `
 
 // To 전체적인 컴포넌
diff --git a/src/components/common/Input/Picker/ColorPicker.jsx b/src/components/common/Input/Picker/ColorPicker.jsx
index cabddc7..77156b1 100644
--- a/src/components/common/Input/Picker/ColorPicker.jsx
+++ b/src/components/common/Input/Picker/ColorPicker.jsx
@@ -8,8 +8,10 @@ const Bone = styled.div`
   gap: 12px;
   flex-wrap: wrap;
   margin: 45px 0;
-  @media (max-width: 768px) {
-    justify-content: flex-start;
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr;
+    width: fit-content;
   }
 `;
 
@@ -24,7 +26,7 @@ const Color = styled.div`
   justify-content: center;
   position: relative;
   background-color: ${(props) => props.color};
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     width: 154px;
     height: 154px;
   }
diff --git a/src/components/common/Input/Picker/ImgPicker.jsx b/src/components/common/Input/Picker/ImgPicker.jsx
index 81241ae..c68a415 100644
--- a/src/components/common/Input/Picker/ImgPicker.jsx
+++ b/src/components/common/Input/Picker/ImgPicker.jsx
@@ -9,8 +9,10 @@ const Bone = styled.div`
   gap: 12px;
   flex-wrap: wrap;
   margin: 45px 0;
-  @media (max-width: 768px) {
-    justify-content: flex-start;
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr;
+    width: fit-content;
   }
 `;
 
diff --git a/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx b/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx
index e1e80b9..6051ce5 100644
--- a/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx
+++ b/src/components/common/Input/ProfileInput/ProfileInputChoiceImage.jsx
@@ -10,7 +10,7 @@ const Bone = styled.div`
   margin: 3.125rem auto 3.125rem auto;
   width: 44.813rem;
   height: auto;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     width: auto;
   }
 `;
@@ -34,10 +34,10 @@ const ProfileImg = styled.img`
   height: 5rem;
   margin-right: 2rem;
   border-radius: 50%;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     margin-right: 1.76rem;
   }
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     margin-right: 1.5rem;
   }
 `;
@@ -53,7 +53,7 @@ const ProfileImgChoice = styled.div`
   width: 37.813rem;
   height: 3.5rem;
   margin: 0.75rem 0 0 0;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     display: flex;
     align-items: center;
     margin: 0.75rem 0 0 0;
@@ -63,6 +63,10 @@ const ProfileImgChoice = styled.div`
     width: auto;
     height: auto;
   }
+  @media (max-width: 767px) {
+    display: grid;
+    grid-template: 1fr 1fr / 1fr 1fr 1fr 1fr 1fr;
+  }
 `;
 
 const Image = styled.div.withConfig({
@@ -83,7 +87,7 @@ const Image = styled.div.withConfig({
     props.selected
       ? "0 0 5px rgba(0, 162, 254, 0.5)"
       : "none"}; /* 선택 시 box-shadow 추가 */
-  @media (max-width: 360px) {
+  @media (max-width: 767px) {
     width: 40px;
     height: 40px;
   }
diff --git a/src/components/domain/rollingpaper/Card/CardWrite.jsx b/src/components/domain/rollingpaper/Card/CardWrite.jsx
index 445df8b..ff3aad6 100644
--- a/src/components/domain/rollingpaper/Card/CardWrite.jsx
+++ b/src/components/domain/rollingpaper/Card/CardWrite.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import styled from "styled-components";
 import IconButton from "../../../common/Button/IconButton";
 import { textStyle } from "../../../../styles/textStyle";
@@ -85,6 +85,16 @@ const CardContainer = styled.div`
     transform: scale(0.97); 
     box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.1); 
   }
+   @media (max-width: 767px) {
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+    &:active {
+      transform: none;
+      box-shadow: none;
+    }
+  }  
 `;
 
 const Header = styled.div`
@@ -146,9 +156,22 @@ const ProfileWrap = styled.div`
 
 const CardWrite = ({ message, onDelete }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 767); 
+  
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  
   const handleCardClick = () => {
+  if (!isMobile) { // 모바일이 아닐 때만 모달 실행
     setIsModalOpen(true);
-  };
+  }
+};
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
diff --git a/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx b/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx
index d7edd21..2e7c71a 100644
--- a/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx
+++ b/src/components/domain/rollingpaper/Card/CreateAtCardList.jsx
@@ -8,7 +8,14 @@ import { useNavigate } from "react-router-dom";
 const BoneWrap = styled.div`
   width: 1160px;
   position: relative;
-  overflow: hidden;
+  overflow: visible;
+  height: 260px;
+  @media (max-width: 1199px) {
+   width: 100%;
+  }
+  @media (max-width: 767px) {
+   height: 232px;
+  } 
 `;
 
 const BoneContainer = styled.div`
@@ -17,6 +24,15 @@ const BoneContainer = styled.div`
   position: relative;
   width: 100%;
   overflow: hidden;
+  margin-bottom: 50px;
+   @media (max-width: 1199px) {
+   overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none; 
+    &::-webkit-scrollbar {
+      display: none; 
+    }
+  }
 `;
 
 const Bone = styled.div`
@@ -26,6 +42,7 @@ const Bone = styled.div`
   transition: transform 0.5s ease;
   transform: translateX(${(props) => props.scrollPosition}px);
   position: relative;
+  
 `;
 
 const BackgroundWrap = styled.div.withConfig({
@@ -34,9 +51,7 @@ const BackgroundWrap = styled.div.withConfig({
 })`
   background-color: ${({ bgColor }) => bgColor || "#FFFFFF"};
   background-image: ${({ backgroundImageURL }) =>
-    backgroundImageURL
-      ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})`
-      : "none"};
+    backgroundImageURL ? `url(${backgroundImageURL})` : "none"};
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -45,7 +60,7 @@ const BackgroundWrap = styled.div.withConfig({
   padding: 30px 24px;
   border-radius: 1rem;
   color: ${({ backgroundImageURL }) =>
-    backgroundImageURL ? "#ffffff" : "#000000"};
+    backgroundImageURL ? "#ffffff;" : "#000000"};
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease,
     background-color 0.3s ease;
@@ -60,11 +75,10 @@ const BackgroundWrap = styled.div.withConfig({
     transform: scale(0.98);
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3);
   }
-
   @media (max-width: 767px) {
-    width:208px;
-    height:232px;
-  }
+    width: 208px;
+    height: 232px;
+  }  
 `;
 const TextDisplay = styled.div`
   display: flex;
@@ -76,15 +90,8 @@ const ToText = styled.div`
   ${(props) => textStyle(24, 700)(props)}
   margin-bottom: 0.75rem;
   height: 2.625rem;
-  word-break: keep-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
   @media (max-width: 767px) {
     ${(props) => textStyle(18, 700)(props)}
-    font-family: Pretendard;
-    line-height:28px;
   }
 `;
 
@@ -121,14 +128,8 @@ const Avatar = styled.div`
 `;
 
 const WriteCount = styled.div`
-  ${(props) => textStyle(14, 700)(props)}
-  font-weight: 700;
-
-  @media (max-width: 767px) {
-    ${(props) => textStyle(14, 700)(props)}
-    font-family: Pretendard;
-    line-height:20px;
-  }
+  font-size: 16px;
+  font-weight: 600;
 `;
 
 const WriteCountDisplay = styled.div`
@@ -138,37 +139,42 @@ const WriteCountDisplay = styled.div`
 `;
 
 const WritedText = styled.div`
-  font-size: 16px;
-  font-weight: 600;
-
+  font-size: 14px;
   @media (max-width: 767px) {
-    ${(props) => textStyle(14, 400)(props)}
-    font-family: Pretendard;
-    line-height:20px;
+    ${(props) => textStyle(14, 700)(props)}
   }
 `;
 
 const ArrowButtonDisplay = styled.div`
-    align-items: center;
-    z-index: 1;
-    transition: opacity 0.3s ease;
+  align-items: center;
+  transform: translateY(40%);
+  z-index: 2;
+  transform: matrix(1, 0, 0, 1, 0, 108);
+  transition: opacity 0.3s ease;
 }
 `;
 const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)`
   display: ${({ show }) => (show ? "block" : "none")};
   position: absolute;
-  left: 22.5rem;
-  top: 64%;
-  transform: translateY(0%);
+  left: -24px;
+  top: 30%;
+  transform: translateY(42%);
   z-index: 1;
+    @media (max-width: 1199px) {
+    display: none;
+  }
 `;
+
 const RightArrowButtonDisplay = styled(ArrowButtonDisplay)`
-  display: ${({ show }) => (show ? "block" : "none")};
+   display: ${({ show }) => (show ? "block" : "none")};
   position: absolute;
-  right: 22.5rem;
-  top: 64%;
-  transform: translateY(0%);
+  right: -24px;
+  top: 30%;
+  transform: translateY(42%);
   z-index: 1;
+    @media (max-width: 1199px) {
+    display: none;
+  }
 `;
 
 const TopEmojisContainer = styled.div`
@@ -176,7 +182,6 @@ const TopEmojisContainer = styled.div`
   gap: 8px;
   @media (max-width: 767px) {
     padding: 0 4px;
-    
   }
 `;
 
@@ -248,20 +253,17 @@ function CreateAtCardList() {
           "/14-8/recipients/"
         );
         const sortedRecipients = response.data.results.sort(
-          (a, b) => b.createdAt - a.createdAt
+          (a, b) => b.createAt - a.createAt
         );
 
         const updatedRecipients = sortedRecipients.map((recipient) => {
-          const topReactions = recipient.topReactions.slice(0, 3);
           const images = recipient.recentMessages?.slice(0, 3) || [];
           const imageUrls = images
             .map((msg) => msg.profileImageURL)
             .filter(Boolean);
-
           return {
             ...recipient,
-            topReactions,
-            profileImages: imageUrls, // topReactions 3개만 가져오기
+            profileImages: imageUrls,
           };
         });
 
@@ -287,6 +289,7 @@ function CreateAtCardList() {
   };
 
   const handleCardClick = (id) => {
+    // 클릭 시 해당 id로 페이지 이동
     navigate(`/post/${id}`);
   };
 
@@ -298,14 +301,15 @@ function CreateAtCardList() {
 
   return (
     <>
-      <LeftArrowButtonDisplay show={showLeftButton}>
+      
+      <BoneWrap>
+        <LeftArrowButtonDisplay show={showLeftButton}>
         <ArrowButton
           direction="left"
           onClick={handlePrev}
           disabled={scrollPosition === 0}
         />
       </LeftArrowButtonDisplay>
-      <BoneWrap>
         <BoneContainer>
           <Bone scrollPosition={scrollPosition}>
             {selectedRecipients.map((recipient, index) => (
@@ -313,30 +317,32 @@ function CreateAtCardList() {
                 key={index}
                 bgColor={colorMap[recipient.backgroundColor] || "#FFFFFF"}
                 backgroundImageURL={recipient.backgroundImageURL || null}
-                onClick={() => handleCardClick(recipient.id)}
+                onClick={() => handleCardClick(recipient.id)} // 클릭 시 해당 id로 이동
               >
-                <TextDisplay>
-                  <ToText>
-                    To.
-                    {recipient.name === "Unknown"
-                      ? "이름 없음"
-                      : recipient.name}
-                  </ToText>
-                </TextDisplay>
-                <WritedContainer>
-                  {recipient.profileImages?.slice(0, 3).map((url, i) => (
-                    <Avatar key={i}>
-                      <img src={url} alt={`프로필 이미지 ${i + 1}`} />
-                    </Avatar>
-                  ))}
-                  {recipient.messageCount > 3 && (
-                    <Avatar>+{recipient.messageCount - 3}</Avatar>
-                  )}
-                </WritedContainer>
-                <WriteCountDisplay>
-                  <WriteCount>{recipient.messageCount}</WriteCount>
-                  <WritedText>명이 작성했어요!</WritedText>
-                </WriteCountDisplay>
+                
+                  <TextDisplay>
+                    <ToText>To.</ToText>
+                    <ToText>
+                      {recipient.name === "Unknown"
+                        ? "이름 없음"
+                        : recipient.name}
+                    </ToText>
+                  </TextDisplay>
+                  <WritedContainer>
+                    {recipient.profileImages?.slice(0, 3).map((url, i) => (
+                      <Avatar key={i}>
+                        <img src={url} alt={`프로필 이미지 ${i + 1}`} />
+                      </Avatar>
+                    ))}
+                    {recipient.messageCount > 3 && (
+                      <Avatar>+{recipient.messageCount - 3}</Avatar>
+                    )}
+                  </WritedContainer>
+                  <WriteCountDisplay>
+                    <WriteCount>{recipient.messageCount}</WriteCount>
+                    <WritedText>명이 작성했어요!</WritedText>
+                  </WriteCountDisplay>
+                <div>
                 <EmojiWrapper>
                   <EmojiDiv>
                     {/* 이모티콘 상위 3개 표시 */}
@@ -349,13 +355,13 @@ function CreateAtCardList() {
                       ))}
                     </TopEmojisContainer>
                   </EmojiDiv>
-                </EmojiWrapper>
+                  </EmojiWrapper>
+                  </div>
               </BackgroundWrap>
             ))}
           </Bone>
         </BoneContainer>
-      </BoneWrap>
-      <RightArrowButtonDisplay show={showRightButton}>
+        <RightArrowButtonDisplay show={showRightButton}>
         <ArrowButton
           direction="right"
           onClick={handleNext}
@@ -364,8 +370,10 @@ function CreateAtCardList() {
           }
         />
       </RightArrowButtonDisplay>
+      </BoneWrap>
+      
     </>
   );
 }
 
-export default CreateAtCardList;
+export default CreateAtCardList;
\ No newline at end of file
diff --git a/src/components/domain/rollingpaper/Card/Modal.jsx b/src/components/domain/rollingpaper/Card/Modal.jsx
index 08dc993..ce1b707 100644
--- a/src/components/domain/rollingpaper/Card/Modal.jsx
+++ b/src/components/domain/rollingpaper/Card/Modal.jsx
@@ -27,7 +27,7 @@ const EditorWrapper = styled.div.withConfig({
     position: relative;
     top: 120px;
     background: #fff;
-       font-family: ${(props) => `'${props.$fontFamily || "Noto Sans KR"}'`} !important;
+    font-family: ${(props) => `'${props.$fontFamily || "Noto Sans KR"}'`} !important;
     text-align: ${(props) => props.$textAlign || "left"};
     overflow: auto; 
     white-space: pre-wrap; 
@@ -75,7 +75,7 @@ const Background = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000; /* z-index를 높게 설정 */
+  z-index: 1000; 
 `;
 
 const ModalContainer = styled.div`
diff --git a/src/components/domain/rollingpaper/Card/PopularCardList.jsx b/src/components/domain/rollingpaper/Card/PopularCardList.jsx
index fe60f9a..c2ff9a0 100644
--- a/src/components/domain/rollingpaper/Card/PopularCardList.jsx
+++ b/src/components/domain/rollingpaper/Card/PopularCardList.jsx
@@ -5,24 +5,37 @@ import { useEffect, useState } from "react";
 import recipientsService from "../../../../api/services/recipientsService";
 import ArrowButton from "../../../common/Button/ArrowButton";
 import { useNavigate } from "react-router-dom";
-
 const BoneWrap = styled.div`
   width: 1160px;
   position: relative;
-  overflow: hidden;
-
+  overflow: visible;
+  height: 260px;
+  margin-bottom: 50px;
+  @media (max-width: 1199px) {
+   width: 100% ;
+   
   }
+  @media (max-width: 767px) {
+   height: 232px;
+   margin-bottom: 74px;
+  } 
 `;
 
 const BoneContainer = styled.div`
   display: flex;
-  align-items: flex-start;
-  flex-direction: column;
+  align-items: center;
   position: relative;
   width: 100%;
   overflow: hidden;
-
-
+  margin-bottom: 50px;
+   @media (max-width: 1199px) {
+   overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none; 
+    &::-webkit-scrollbar {
+      display: none; 
+    }
+  }
 `;
 
 const Bone = styled.div`
@@ -32,7 +45,6 @@ const Bone = styled.div`
   transition: transform 0.5s ease;
   transform: translateX(${(props) => props.scrollPosition}px);
   position: relative;
-
   
 `;
 
@@ -42,9 +54,7 @@ const BackgroundWrap = styled.div.withConfig({
 })`
   background-color: ${({ bgColor }) => bgColor || "#FFFFFF"};
   background-image: ${({ backgroundImageURL }) =>
-    backgroundImageURL
-      ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})`
-      : "none"};
+    backgroundImageURL ? `url(${backgroundImageURL})` : "none"};
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -53,7 +63,7 @@ const BackgroundWrap = styled.div.withConfig({
   padding: 30px 24px;
   border-radius: 1rem;
   color: ${({ backgroundImageURL }) =>
-    backgroundImageURL ? "#ffffff" : "#000000"};
+    backgroundImageURL ? "#ffffff;" : "#000000"};
   position: relative;
   transition: transform 0.3s ease, box-shadow 0.3s ease,
     background-color 0.3s ease;
@@ -69,12 +79,10 @@ const BackgroundWrap = styled.div.withConfig({
     box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3);
   }
   @media (max-width: 767px) {
-    width:208px;
-    height:232px;
-  }
-
+    width: 208px;
+    height: 232px;
+  }  
 `;
-
 const TextDisplay = styled.div`
   display: flex;
   height: 36px;
@@ -85,15 +93,8 @@ const ToText = styled.div`
   ${(props) => textStyle(24, 700)(props)}
   margin-bottom: 0.75rem;
   height: 2.625rem;
-  word-break: keep-all;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
   @media (max-width: 767px) {
     ${(props) => textStyle(18, 700)(props)}
-    font-family: Pretendard;
-    line-height:28px;
   }
 `;
 
@@ -130,14 +131,8 @@ const Avatar = styled.div`
 `;
 
 const WriteCount = styled.div`
-  ${(props) => textStyle(14, 700)(props)}
-  font-weight: 700;
-
-  @media (max-width: 767px) {
-    ${(props) => textStyle(14, 700)(props)}
-    font-family: Pretendard;
-    line-height:20px;
-  }
+  font-size: 16px;
+  font-weight: 600;
 `;
 
 const WriteCountDisplay = styled.div`
@@ -147,45 +142,49 @@ const WriteCountDisplay = styled.div`
 `;
 
 const WritedText = styled.div`
-  font-size: 16px;
-  font-weight: 600;
-
+  font-size: 14px;
   @media (max-width: 767px) {
-    ${(props) => textStyle(14, 400)(props)}
-    font-family: Pretendard;
-    line-height:20px;
+    ${(props) => textStyle(14, 700)(props)}
   }
 `;
 
 const ArrowButtonDisplay = styled.div`
-    align-items: center;
-    z-index: 1;
-    transition: opacity 0.3s ease;
+  align-items: center;
+  transform: translateY(40%);
+  z-index: 2;
+  transform: matrix(1, 0, 0, 1, 0, 108);
+  transition: opacity 0.3s ease;
 }
 `;
 const LeftArrowButtonDisplay = styled(ArrowButtonDisplay)`
   display: ${({ show }) => (show ? "block" : "none")};
   position: absolute;
-  left: 22.5rem;
-  top: 28%;
-  transform: translateY(0%);
+  left: -24px;
+  top: 30%;
+  transform: translateY(42%);
   z-index: 1;
+    @media (max-width: 1199px) {
+    display: none;
+  }
 `;
 
 const RightArrowButtonDisplay = styled(ArrowButtonDisplay)`
-  display: ${({ show }) => (show ? "block" : "none")};
+   display: ${({ show }) => (show ? "block" : "none")};
   position: absolute;
-  right: 22.5rem;
-  top: 28%;
-  transform: translateY(0%);
+  right: -24px;
+  top: 30%;
+  transform: translateY(42%);
   z-index: 1;
+    @media (max-width: 1199px) {
+    display: none;
+  }
 `;
+
 const TopEmojisContainer = styled.div`
   display: flex;
   gap: 8px;
   @media (max-width: 767px) {
     padding: 0 4px;
-    
   }
 `;
 
@@ -206,7 +205,6 @@ const TopEmojiItem = styled.div`
   @media (max-width: 767px) {
     width: 46px;
     height: 32px;
-    
   }
 `;
 const EmojiWrapper = styled.div`
@@ -242,9 +240,6 @@ const EmojiCount = styled.span`
 function PopularCardList() {
   const [selectedRecipients, setSelectedRecipients] = useState([]);
   const [scrollPosition, setScrollPosition] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startPosition, setStartPosition] = useState(0);
-  const [dragOffset, setDragOffset] = useState(0);
   const cardWidth = 295;
   const navigate = useNavigate();
   const colorMap = {
@@ -254,8 +249,6 @@ function PopularCardList() {
     green: "#D0F5C3",
   };
 
-  const isMobile = window.innerWidth <= 1199; // 1199px 이하인지 확인
-
   useEffect(() => {
     const loadRecipients = async () => {
       try {
@@ -267,19 +260,17 @@ function PopularCardList() {
         );
 
         const updatedRecipients = sortedRecipients.map((recipient) => {
-          const topReactions = recipient.topReactions.slice(0, 3);
           const images = recipient.recentMessages?.slice(0, 3) || [];
           const imageUrls = images
             .map((msg) => msg.profileImageURL)
             .filter(Boolean);
-
           return {
             ...recipient,
-            topReactions,
             profileImages: imageUrls,
           };
         });
 
+        console.log(updatedRecipients);
         setSelectedRecipients(updatedRecipients);
       } catch (error) {
         console.error("받는 사람 데이터를 가져오지 못했습니다:", error);
@@ -301,98 +292,63 @@ function PopularCardList() {
   };
 
   const handleCardClick = (id) => {
+    // 클릭 시 해당 id로 페이지 이동
     navigate(`/post/${id}`);
   };
 
+  // 좌측 버튼 숨기기 조건
   const showLeftButton = scrollPosition !== 0;
+  // 우측 버튼 숨기기 조건
   const showRightButton =
     scrollPosition > -(selectedRecipients.length * cardWidth - 1160);
 
-  const handleMouseDown = (e) => {
-    if (!isMobile) return; // 모바일 화면에서만 드래그 시작
-
-    setIsDragging(true);
-    setStartPosition(e.clientX);
-  };
-
-  const handleMouseMove = (e) => {
-    if (!isDragging || !isMobile) return;
-
-    const offset = e.clientX - startPosition;
-    setDragOffset(offset); // 드래그 이동 값 계산
-  };
-
-  const handleMouseUp = () => {
-    if (!isDragging || !isMobile) return;
-
-    setIsDragging(false);
-    setScrollPosition((prev) => prev + dragOffset); // 드래그 후 새로운 scrollPosition 설정
-    setDragOffset(0);
-  };
-
-  useEffect(() => {
-    if (isMobile) {
-      document.addEventListener("mousedown", handleMouseDown);
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-
-      return () => {
-        document.removeEventListener("mousedown", handleMouseDown);
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-    }
-  }, [isMobile, isDragging, dragOffset, startPosition]);
-
   return (
     <>
-      <LeftArrowButtonDisplay show={showLeftButton}>
+      
+      <BoneWrap>
+        <LeftArrowButtonDisplay show={showLeftButton}>
         <ArrowButton
           direction="left"
           onClick={handlePrev}
           disabled={scrollPosition === 0}
         />
       </LeftArrowButtonDisplay>
-      <BoneWrap>
         <BoneContainer>
-          <Bone
-            scrollPosition={scrollPosition}
-            onMouseDown={handleMouseDown} // Mouse down 이벤트 추가
-            onMouseMove={handleMouseMove} // Mouse move 이벤트 추가
-            onMouseUp={handleMouseUp} // Mouse up 이벤트 추가
-          >
+          <Bone scrollPosition={scrollPosition}>
             {selectedRecipients.map((recipient, index) => (
               <BackgroundWrap
                 key={index}
                 bgColor={colorMap[recipient.backgroundColor] || "#FFFFFF"}
                 backgroundImageURL={recipient.backgroundImageURL || null}
-                onClick={() => handleCardClick(recipient.id)}
+                onClick={() => handleCardClick(recipient.id)} // 클릭 시 해당 id로 이동
               >
-                <TextDisplay>
-                  <ToText>
-                    To.
-                    {recipient.name === "Unknown"
-                      ? "이름 없음"
-                      : recipient.name}
-                  </ToText>
-                </TextDisplay>
-                <WritedContainer>
-                  {recipient.profileImages?.slice(0, 3).map((url, i) => (
-                    <Avatar key={i}>
-                      <img src={url} alt={`프로필 이미지 ${i + 1}`} />
-                    </Avatar>
-                  ))}
-                  {recipient.messageCount > 3 && (
-                    <Avatar>+{recipient.messageCount - 3}</Avatar>
-                  )}
-                </WritedContainer>
-                <WriteCountDisplay>
-                  <WriteCount>{recipient.messageCount}</WriteCount>
-                  <WritedText>명이 작성했어요!</WritedText>
-                </WriteCountDisplay>
-
+                
+                  <TextDisplay>
+                    <ToText>To.</ToText>
+                    <ToText>
+                      {recipient.name === "Unknown"
+                        ? "이름 없음"
+                        : recipient.name}
+                    </ToText>
+                  </TextDisplay>
+                  <WritedContainer>
+                    {recipient.profileImages?.slice(0, 3).map((url, i) => (
+                      <Avatar key={i}>
+                        <img src={url} alt={`프로필 이미지 ${i + 1}`} />
+                      </Avatar>
+                    ))}
+                    {recipient.messageCount > 3 && (
+                      <Avatar>+{recipient.messageCount - 3}</Avatar>
+                    )}
+                  </WritedContainer>
+                  <WriteCountDisplay>
+                    <WriteCount>{recipient.messageCount}</WriteCount>
+                    <WritedText>명이 작성했어요!</WritedText>
+                  </WriteCountDisplay>
+                <div>
                 <EmojiWrapper>
                   <EmojiDiv>
+                    {/* 이모티콘 상위 3개 표시 */}
                     <TopEmojisContainer>
                       {recipient.topReactions.map(({ emoji, count }, i) => (
                         <TopEmojiItem key={i}>
@@ -402,21 +358,25 @@ function PopularCardList() {
                       ))}
                     </TopEmojisContainer>
                   </EmojiDiv>
-                </EmojiWrapper>
+                  </EmojiWrapper>
+                  </div>
               </BackgroundWrap>
             ))}
           </Bone>
         </BoneContainer>
-      </BoneWrap>
-      <RightArrowButtonDisplay show={showRightButton}>
+        <RightArrowButtonDisplay show={showRightButton}>
         <ArrowButton
           direction="right"
           onClick={handleNext}
-          disabled={scrollPosition <= -(selectedRecipients.length * cardWidth - 1160)}
+          disabled={
+            scrollPosition <= -(selectedRecipients.length * cardWidth - 1160)
+          }
         />
       </RightArrowButtonDisplay>
+      </BoneWrap>
+      
     </>
   );
 }
 
-export default PopularCardList;
+export default PopularCardList;
\ No newline at end of file
diff --git a/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx b/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx
index bfb44d1..bc2529b 100644
--- a/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx
+++ b/src/pages/CreateRollingPaper/CreateRollingPaperPage.jsx
@@ -17,7 +17,7 @@ const Bone = styled.div`
   width: 100%;
   min-height: calc(100vh - 65px);
   padding: 49px 24px;
-  @media (max-width: 368px) {
-    padding: 50px 20px;
+  @media (max-width: 767px) {
+    padding: 0 20px;
   }
 `;
diff --git a/src/pages/Message/MessagePage.jsx b/src/pages/Message/MessagePage.jsx
index 7c70d53..be3f748 100644
--- a/src/pages/Message/MessagePage.jsx
+++ b/src/pages/Message/MessagePage.jsx
@@ -8,12 +8,12 @@ const Bone = styled.div`
   min-height: calc(100vh - 65px);
   width: 100%;
   padding: 47px 24px;
-  @media (max-width: 768px) {
+  @media (max-width: 1199px) {
     padding: 49px 24px;
   }
 
-  @media (max-width: 360px) {
-    padding: 50px 20px;
+  @media (max-width: 768px) {
+    padding: 0 20px;
   }
 `;
 
diff --git a/src/pages/RollingPaper/RollingPaperPage.jsx b/src/pages/RollingPaper/RollingPaperPage.jsx
index 8c6bf9e..f4c6e4d 100644
--- a/src/pages/RollingPaper/RollingPaperPage.jsx
+++ b/src/pages/RollingPaper/RollingPaperPage.jsx
@@ -4,8 +4,9 @@ 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`
   width: min(100%, 1200px);
@@ -13,11 +14,14 @@ const CardContainer = styled.div`
   padding: 0 24px;
   box-sizing: border-box;
   display: flex;
-  align-items: center;
   justify-content: center;
 
-  @media (max-width: 1248px) {
-    padding: 0 24px;
+  padding: 100px 24px;
+  width: 100%;
+  box-sizing: border-box;
+  @media (max-width: 767px) {
+    background-attachment: scroll;
+
   }
 `;
 
@@ -25,22 +29,18 @@ const DivWrap = styled.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
-  padding-top: 112px;
-
-  @media (max-width: 1248px) {
+  opacity: ${({ isLoaded }) => (isLoaded ? 1 : 0)};
+  transition: opacity 0.5s ease-in-out;
+  @media (max-width: 1199px) {
     grid-template-columns: repeat(2, 1fr);
   }
-
-  @media (max-width: 768px) {
+    @media (max-width: 767px) {
     grid-template-columns: 1fr;
   }
-
-  opacity: ${({ isLoaded }) => (isLoaded ? 1 : 0)};
-  transition: opacity 0.5s ease-in-out;
 `;
 
 const BackgroundWrap = styled.div`
-  background-image: ${({ backgroundImageURL }) =>
+   background-image: ${({ backgroundImageURL }) =>
     backgroundImageURL
       ? `linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0.54) 100%), url(${backgroundImageURL})`
       : "ffffff"};
@@ -51,8 +51,10 @@ const BackgroundWrap = styled.div`
   background-position: center top;
   background-attachment: fixed;
 
-  @media (max-width: 768px) {
+  @media (max-width: 767px) {
     background-attachment: scroll;
+    grid-template-columns: 1fr;
+
   }
 `;
 
@@ -67,7 +69,6 @@ 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);
@@ -93,7 +94,6 @@ function RollingPaperDetailPage() {
     if (id) fetchInitialData();
   }, [id]);
 
-  // 메시지 로드 함수
   const loadMoreMessages = async () => {
     if (!nextUrl || isFetchingRef.current) return;
     isFetchingRef.current = true;
@@ -130,9 +130,7 @@ 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}
       />
@@ -144,11 +142,10 @@ function RollingPaperDetailPage() {
               <CardWrite message={message} fontFamily={message.font} />
             </div>
           ))}
-          {messages?.length > 0 && <div id="last-card"></div>}
         </DivWrap>
       </CardContainer>
     </BackgroundWrap>
   );
 }
 
-export default RollingPaperDetailPage;
+export default RollingPaperDetailPage;
\ No newline at end of file
diff --git a/src/pages/RollingPaperList/RollingPaperListPage.jsx b/src/pages/RollingPaperList/RollingPaperListPage.jsx
index 9498d42..5df3c6c 100644
--- a/src/pages/RollingPaperList/RollingPaperListPage.jsx
+++ b/src/pages/RollingPaperList/RollingPaperListPage.jsx
@@ -3,113 +3,71 @@ import CreateAtCardList from "../../components/domain/rollingpaper/Card/CreateAt
 import styled from "styled-components";
 import PopularCardList from "../../components/domain/rollingpaper/Card/PopularCardList";
 import Button from "../../components/common/Button/Button";
+
+import { textStyle } from "../../styles/textStyle";
+
 import { useEffect, useState, useCallback } from "react";
 
-// Container 스타일 수정
 const Container = styled.div`
   background-color: #ffffff;
-  width: 100%;
-  padding: 0 20px;
-
-  @media (max-width: 1199px) {
-    padding: 0 10px;
-  }
-
-  @media (max-width: 767px) {
-    padding: 0 5px;
-  }
 `;
-
-// PageWrapper 스타일 수정
 const PageWrapper = styled.div`
-  padding: 40px;
+  padding: 50px;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: start;
   min-height: calc(100vh - 65px);
-  width: 100%;
+  width: max-content;
   margin: auto;
-
   @media (max-width: 1199px) {
-    padding: 30px;
+    padding: 0;
+    padding-top: 50px;
+    margin: 0;
+    width: 100%;
   }
-
   @media (max-width: 767px) {
-    padding: 20px;
-  }
-`;
-
-// Title 스타일 수정 (텍스트와 카드 리스트가 같이 고정되도록 sticky 적용)
-const TitleWrapper = styled.div`
-  width: 100%;
-  position: sticky;
-  top: 0;
-  background-color: #ffffff;
-  z-index: 10;
-  padding: 10px 0;
+    padding-top: 40px;
+  }   
+  
 `;
 
 const Title = styled.div`
+  ${(props) => textStyle(24, 700)(props)}
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-`;
-
-const TitleText = styled.div`
-  text-align: left;
-  width: 100%;
-  font-family: Pretendard;
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 10px;
-
+  width: -webkit-fill-available;
+  justify-content: left;
   @media (max-width: 767px) {
-    font-size:20px;
-    font-weight: 600;
-    line-height:30px;
+    ${(props) => textStyle(20, 600)(props)}
   }
 `;
 
-// ButtonWrapper 스타일 수정
 const ButtonWrapper = styled.div`
-  margin-top: 20px;
+  margin-top: 64px;
   display: flex;
   justify-content: center;
-  width: 100%;
 
   @media (max-width: 1199px) {
-    margin-top: 15px;
+    margin-top: 156px;
   }
-
   @media (max-width: 767px) {
-    margin-top: 10px;
-  }
+    margin-top: 66px;
+  }  
 `;
 
-const StyledButton = styled(Button)`
-  width: ${({ isTablet }) => (isTablet ? "100%" : "280px")};
-`
-
-// StyledCardList 수정 (카드 리스트가 오른쪽에서 사라지도록 설정)
 const StyledCardList = styled.div`
   display: flex;
   gap: 20px;
-  margin-bottom: 50px;
-  width: 100%;
-  flex-direction: row-reverse; /* 카드 리스트가 오른쪽에서 왼쪽으로 정렬되도록 설정 */
-  overflow: hidden;  /* 왼쪽에서 안 보이도록 처리 */
-  
+  margin-bottom: 16px;
+  width: max-content;
+  flex-direction: column;
   @media (max-width: 1199px) {
-    gap: 15px;
+    padding: 0;
+    padding-left: 20px;
   }
 
-  @media (max-width: 767px) {
-    gap: 10px;
-    flex-direction: column;
-    align-items: center;
-  }
+`;
+const StyledButton = styled(Button)`
+  width: ${({ isTablet }) => (isTablet ? "calc(100% - 24px)" : "280px")};
 `;
 
 function RollingPaperListPage() {
@@ -117,45 +75,35 @@ function RollingPaperListPage() {
   const [isTablet, setIsTablet] = useState(window.innerWidth <= 1199);
 
   const handleResize = useCallback(() => {
-    setIsTablet(window.innerWidth <= 1199);
+      setIsTablet(window.innerWidth <= 1199);
   }, []);
-
   useEffect(() => {
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [handleResize]);
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }, [handleResize]);
 
   return (
     <Container>
+      
       <PageWrapper>
-        <TitleWrapper>
-          <Title>
-            <TitleText>인기 롤링 페이퍼🔥</TitleText>
-          </Title>
-        </TitleWrapper>
-
         <StyledCardList>
-          <PopularCardList />
+          <Title>인기 롤링 페이퍼🔥</Title>
         </StyledCardList>
-
-        <TitleWrapper>
-          <Title>
-            <TitleText>최근에 만든 롤링 페이퍼⭐</TitleText>
-          </Title>
-        </TitleWrapper>
-
+        <PopularCardList />
         <StyledCardList>
-          <CreateAtCardList />
+          <Title>최근에 만든 롤링 페이퍼⭐</Title>
         </StyledCardList>
-
+        <CreateAtCardList />
         <ButtonWrapper>
           <StyledButton
             variant="primary"
             size="56"
-            width={isTablet ? "100%" : 280}
+
+            width={isTablet ? "calc(100% - 24px)" : 280}
+
             onClick={() => navigate(`/post`)}
           >
             나도 만들어보기
@@ -166,4 +114,4 @@ function RollingPaperListPage() {
   );
 }
 
-export default RollingPaperListPage;
+export default RollingPaperListPage;
\ No newline at end of file