diff --git a/longkathon/src/components/ColorPalette.js b/longkathon/src/components/ColorPalette.js
index 2f02f6d..9804a55 100644
--- a/longkathon/src/components/ColorPalette.js
+++ b/longkathon/src/components/ColorPalette.js
@@ -12,134 +12,138 @@ import XGray from "../Image/X_gray.png";
 import XBlack from "../Image/X_black.png";
 
 const colors = [
-    { color: "#EA7E7A", image: XRed },
-    { color: "#FBA96F", image: XOrange },
-    { color: "#9ED4B6", image: XGreen },
-    { color: "#5BA8FB", image: XSkyblue },
-    { color: "#002ED1", image: XBlue },
-    { color: "#D9A9ED", image: XPink },
-    { color: "#927CFF", image: XPurple },
-    { color: "#BDBDBD", image: XGray },
-    { color: "#424242", image: XBlack },
+  { color: "#EA7E7A", image: XRed },
+  { color: "#FBA96F", image: XOrange },
+  { color: "#9ED4B6", image: XGreen },
+  { color: "#5BA8FB", image: XSkyblue },
+  { color: "#002ED1", image: XBlue },
+  { color: "#D9A9ED", image: XPink },
+  { color: "#927CFF", image: XPurple },
+  { color: "#BDBDBD", image: XGray },
+  { color: "#424242", image: XBlack },
 ];
 
 //타 페이지에서 사용할 수 있도록 컬러 props로 저장
 function ColorPalette({ onColorSelect }) {
-    const [selectedColor, setSelectedColor] = useState(null);
-    const [selectedImage, setSelectedImage] = useState(XBlue); 
-
-    const handleColorClick = (index) => {
-        setSelectedColor(index);
-        setSelectedImage(colors[index].image); 
-        onColorSelect(colors[index].color);
-    };
-
-    return (
-        <Container>
-            <Title>링크 조각:</Title>
-            <Content>
-                <LeftBox>
-                    <XShape src={selectedImage} alt="X Shape" />
-                </LeftBox>
-                <ColorWrapper>
-                    <ColorRow>
-                        {colors.slice(0, 5).map((item, index) => (
-                            <ColorContainer
-                                key={index}
-                                onClick={() => handleColorClick(index)}
-                            >
-                                {selectedColor === index && <ColorOuterCircle color={item.color} />}
-                                <ColorCircle color={item.color} />
-                            </ColorContainer>
-                        ))}
-                    </ColorRow>
-                    <ColorRow>
-                        {colors.slice(5).map((item, index) => (
-                            <ColorContainer
-                                key={index + 5}
-                                onClick={() => handleColorClick(index + 5)}
-                            >
-                                {selectedColor === index + 5 && <ColorOuterCircle color={item.color} />}
-                                <ColorCircle color={item.color} />
-                            </ColorContainer>
-                        ))}
-                    </ColorRow>
-                </ColorWrapper>
-            </Content>
-        </Container>
-    );
+  const [selectedColor, setSelectedColor] = useState(null);
+  const [selectedImage, setSelectedImage] = useState(XBlue);
+
+  const handleColorClick = (index) => {
+    setSelectedColor(index);
+    setSelectedImage(colors[index].image);
+    onColorSelect(colors[index].color);
+  };
+
+  return (
+    <Container>
+      <Title>링크 조각:</Title>
+      <Content>
+        <LeftBox>
+          <XShape src={selectedImage} alt="X Shape" />
+        </LeftBox>
+        <ColorWrapper>
+          <ColorRow>
+            {colors.slice(0, 5).map((item, index) => (
+              <ColorContainer
+                key={index}
+                onClick={() => handleColorClick(index)}
+              >
+                {selectedColor === index && (
+                  <ColorOuterCircle color={item.color} />
+                )}
+                <ColorCircle color={item.color} />
+              </ColorContainer>
+            ))}
+          </ColorRow>
+          <ColorRow>
+            {colors.slice(5).map((item, index) => (
+              <ColorContainer
+                key={index + 5}
+                onClick={() => handleColorClick(index + 5)}
+              >
+                {selectedColor === index + 5 && (
+                  <ColorOuterCircle color={item.color} />
+                )}
+                <ColorCircle color={item.color} />
+              </ColorContainer>
+            ))}
+          </ColorRow>
+        </ColorWrapper>
+      </Content>
+    </Container>
+  );
 }
 
 const Container = styled.div`
-    width: 100%;
-    max-width: 1060px;
-    // margin: 0 auto;
+  width: 100%;
+  max-width: 1060px;
+  // margin: 0 auto;
 `;
 
 const Title = styled.h1`
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 16px;
-    font-family: "Product Sans", sans-serif;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  font-family: "Product Sans", sans-serif;
 `;
 
 const Content = styled.div`
-    display: flex;
-    gap: 28px;
-    align-items: center;
+  display: flex;
+  gap: 28px;
+  align-items: center;
 `;
 
 const LeftBox = styled.div`
-    width: 153px;
-    height: 124px;
-    border: 1px solid #dcdcdc;
-    border-radius: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ffffff;
+  width: 153px;
+  height: 124px;
+  border: 1px solid #dcdcdc;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ffffff;
 `;
 
 const XShape = styled.img`
-    width: 304px; //크기 수정 필요!!!//
-    height: 170px;
-    object-fit: contain;
-    border-radius: 20%;
+  width: 304px; //크기 수정 필요!!!//
+  height: 170px;
+  object-fit: contain;
+  border-radius: 20%;
 `;
 
 const ColorWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
 `;
 
 const ColorRow = styled.div`
-    display: flex;
-    gap: 28px;
+  display: flex;
+  gap: 28px;
 `;
 
 const ColorContainer = styled.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 const ColorOuterCircle = styled.div`
-    width: 56px;
-    height: 56px;
-    position: absolute;
-    border-radius: 50%;
-    border: 2px solid ${(props) => props.color};
-    box-sizing: border-box;
+  width: 56px;
+  height: 56px;
+  position: absolute;
+  border-radius: 50%;
+  border: 2px solid ${(props) => props.color};
+  box-sizing: border-box;
 `;
 
 const ColorCircle = styled.div`
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background-color: ${(props) => props.color};
-    cursor: pointer;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color};
+  cursor: pointer;
 `;
 
 export default ColorPalette;
diff --git a/longkathon/src/components/HamburgerButton.js b/longkathon/src/components/HamburgerButton.js
index d262ff1..8715304 100644
--- a/longkathon/src/components/HamburgerButton.js
+++ b/longkathon/src/components/HamburgerButton.js
@@ -51,6 +51,16 @@ export const HamburgerIcon = () => {
         onClick={handleIconClick}
       ></LordIcon>
       <BannersContainer show={showBanners}>
+        <LordiconBox>
+          <LordIcon
+            src="https://cdn.lordicon.com/lqxfrxad.json"
+            trigger="hover"
+            colors="#040404"
+            width="40px"
+            height="40px"
+            onClick={handleIconClick}
+          ></LordIcon>
+        </LordiconBox>
         {["마이 페이지", "진행 중 링크", "로그아웃"].map((category, index) => (
           <Banner
             key={index}
@@ -80,6 +90,11 @@ const Container = styled.div`
   position: relative;
 `;
 
+const LordiconBox = styled.div`
+  margin-top: 16px;
+  margin-left: 100px;
+`;
+
 const LordIcon = styled.div.attrs((props) => ({
   as: "lord-icon",
   style: {
@@ -95,10 +110,11 @@ const LordIcon = styled.div.attrs((props) => ({
 const BannersContainer = styled.div`
   font-family: "Product Sans", sans-serif;
   font-size: 16px;
-  width: 300px;
-  height: 162px;
+  width: 322px;
+  height: 864px;
   border: ${(props) => (props.show ? "1px solid #AFB8C1" : "none")};
-  border-radius: 20px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
   background-color: #ffffff;
   display: ${(props) =>
     props.show ? "flex" : "none"}; /* 드롭박스 표시 여부 */
@@ -106,8 +122,8 @@ const BannersContainer = styled.div`
   overflow: hidden;
   box-shadow: 2px 2px 4px 0px rgba(217, 217, 217, 1),
     -2px -2px 4px 0px rgba(217, 217, 217, 1);
-  position: absolute;
-  top: 45px;
+  position: fixed;
+  top: 0px;
   left: 0px;
   z-index: 999;
 `;
@@ -121,6 +137,7 @@ const Banner = styled.div`
   display: flex;
   align-items: center;
   cursor: pointer;
+  margin-left: 80px;
 
   &:hover {
     border: 0.5px solid #afb8c1;
diff --git a/longkathon/src/pages/AddCategory.js b/longkathon/src/pages/AddCategory.js
index 243deaa..257161a 100644
--- a/longkathon/src/pages/AddCategory.js
+++ b/longkathon/src/pages/AddCategory.js
@@ -7,8 +7,7 @@ import AddContentBox from "../components/AddContentBox";
 import { postCategoryAPI } from "../API/Category";
 import { useParams } from "react-router-dom";
 
-
-function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
+function AddCategory({ clicked, onClose, findPieceId, pieceTitle }) {
   // const {findPieceId} = useParams();
 
   const buttonsArray = ["숙소", "식당", "카페", "교통", "장소", "준비물"];
@@ -34,7 +33,9 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
     // 첫 번째 인포박스는 삭제하지 않도록 조건 추가
     if (infoCards.length > 1) {
       setInfoCards(infoCards.filter((card) => card.id !== id));
-      infoCardRefs.current = infoCardRefs.current.filter((ref) => ref?.id !== id);
+      infoCardRefs.current = infoCardRefs.current.filter(
+        (ref) => ref?.id !== id
+      );
     }
   };
 
@@ -47,25 +48,27 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
       alert("색상과 제목을 입력해주세요.");
       return;
     }
-  
-    const allValues = infoCardRefs.current.map(ref =>
+
+    const allValues = infoCardRefs.current.map((ref) =>
       ref?.getValues ? ref.getValues() : { url: "", description: "" }
     );
-  
-    if (allValues.some(value => !value.url.trim() || !value.description.trim())) {
+
+    if (
+      allValues.some((value) => !value.url.trim() || !value.description.trim())
+    ) {
       alert("모든 URL과 설명을 입력해주세요.");
       return;
     }
-  
+
     const PostArray = {
       color: selectedColor,
       name: title,
-      listups: allValues.map(value => ({
+      listups: allValues.map((value) => ({
         url: value.url.trim(),
-        description: value.description.trim()
-      }))
+        description: value.description.trim(),
+      })),
     };
-  
+
     try {
       const response = await postCategoryAPI(findPieceId, PostArray); // 지금 userId 하드 코딩 되어 있음 바꿔야함;;
       console.log("findPieceId", findPieceId);
@@ -80,7 +83,6 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
       alert("저장 중 오류가 발생했습니다.");
     }
   };
-  
 
   const handleCancel = () => {
     if (onClose) {
@@ -107,14 +109,17 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
                 </Button>
               ))}
               <EtcDiv>
-              <InputWrapper
-                isActive={activeIndex === buttonsArray.length}
-                onClick={() => handleClick(buttonsArray.length)}
-              >
-                <Label>기타:</Label>
-                <Input type="text" onChange={(e) => setTitle(e.target.value)} />
-              </InputWrapper>
-            </EtcDiv>
+                <InputWrapper
+                  isActive={activeIndex === buttonsArray.length}
+                  onClick={() => handleClick(buttonsArray.length)}
+                >
+                  <Label>기타:</Label>
+                  <Input
+                    type="text"
+                    onChange={(e) => setTitle(e.target.value)}
+                  />
+                </InputWrapper>
+              </EtcDiv>
             </ButtonsDiv>
           </Category>
           <InfoCardContainer>
@@ -152,23 +157,23 @@ function AddCategory({ clicked, onClose, findPieceId ,pieceTitle }) {
   );
 }
 
-const TopSection=styled.div`
-width: 412px;
-height: 88px;
-border-radius: 20px;
-opacity: 1;
-background: linear-gradient(149deg, #F0F8FF 0.77%, #F2F1F8 99.23%);
-margin-top:116px;
-color: #040404;
-font-family: Inter;
-font-size: 26px;
-font-style: normal;
-font-weight: 700;
-line-height: 26px; /* 100% */
-display: flex;
-align-items: center;
-justify-content: center;
-text-align: center;
+const TopSection = styled.div`
+  width: 412px;
+  height: 88px;
+  border-radius: 20px;
+  opacity: 1;
+  background: linear-gradient(149deg, #f0f8ff 0.77%, #f2f1f8 99.23%);
+  margin-top: 116px;
+  color: #040404;
+  font-family: Inter;
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px; /* 100% */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
 `;
 
 const BaseContainer = styled.div`
@@ -179,11 +184,11 @@ const BaseContainer = styled.div`
   width: 100%;
   min-height: 100vh;
   background-color: none;
-  z-index:${(props) => (props.clicked ? "1000" : "100")};
+  z-index: ${(props) => (props.clicked ? "1000" : "100")};
 `;
 
 const ModalContainer = styled.div`
-margin-top: 32px;
+  margin-top: 32px;
   width: 1280px;
   padding-top: 26px;
   padding-bottom: 42px;
@@ -193,6 +198,20 @@ margin-top: 32px;
   position: relative;
   max-height: 90vh; /* 화면 크기 제한 */
   overflow-y: auto; /* 콘텐츠가 넘치면 수직 스크롤 가능 */
+
+  /* 반응형 스타일 */
+  @media (max-width: 768px) {
+    width: 90%;
+    height: auto;
+    padding: 20px;
+  }
+
+  /* 모바일 (480px 이하) */
+  @media (max-width: 480px) {
+    width: 70%;
+    height: auto;
+    padding: 20px;
+  }
 `;
 
 const Content = styled.div`
@@ -275,7 +294,8 @@ const Button = styled.button`
 
   &:hover {
     background-color: ${(props) => (props.isActive ? "#5ba8fb" : "#e6f7ff")};
-  }`;
+  }
+`;
 
 const InfoCardContainer = styled.div`
   gap: 24px;
diff --git a/longkathon/src/pages/Land.js b/longkathon/src/pages/Land.js
index ca558b6..2067da2 100644
--- a/longkathon/src/pages/Land.js
+++ b/longkathon/src/pages/Land.js
@@ -135,23 +135,33 @@ function LenderPage() {
 const AppContainer = styled.div`
   text-align: center;
   min-height: 100px;
-  height: 745vh;
+  height: 1045vh;
   font-family: "Arial", sans-serif;
   color: #333;
 
   background: linear-gradient(
     to bottom,
     #3597ff 5%,
-    /* 위쪽 파란색이 5%까지만 표시 */ #ffffff 15%,
-    /* 흰색 시작 */ #ffffff 90%,
-    /* 흰색이 대부분 차지 */ #5ba8fb 100%
+    #ffffff 15%,
+    #ffffff 90%,
+    #5ba8fb 100%
   );
-`;
 
+  @media (max-width: 1024px) {
+    height: 1030vh;
+  }
+
+  @media (max-width: 768px) {
+    height: 600vh;
+  }
 
-const Container = styled.div`
+  @media (max-width: 480px) {
+    height: 630vh;
+  }
 `;
 
+const Container = styled.div``;
+
 const Header = styled.div`
   display: flex;
   justify-content: center;
@@ -164,10 +174,15 @@ const LogoImage = styled.img`
   height: auto;
   margin-top: 190px;
 
-  @media (max-width: 864px) {
+  @media (max-width: 768px) {
     max-width: 200px;
     margin-top: 50px;
   }
+
+  @media (max-width: 480px) {
+    max-width: 150px;
+    margin-top: 20px;
+  }
 `;
 
 const ConnectButton = styled.div`
@@ -222,6 +237,12 @@ const CustomImage = styled.img`
       `calc(${props.width} / 1.5)`}; /* 작은 화면에서 이미지 크기 축소 */
     height: ${(props) => `calc(${props.height} / 1.5)`};
   }
+
+  @media (max-width: 480px) {
+    width: ${(props) =>
+      `calc(${props.width} / 3)`}; /* 작은 화면에서 이미지 크기 축소 */
+    height: ${(props) => `calc(${props.height} / 1.5)`};
+  }
 `;
 
 const BelowButton = styled.div`
@@ -234,7 +255,7 @@ const BelowButton = styled.div`
 
 const Div = styled.div`
   width: auto;
-  background: transparent
+  background: transparent;
 `;
 const BelowLogoImage = styled.img`
   width: 182px;
@@ -242,7 +263,6 @@ const BelowLogoImage = styled.img`
 `;
 
 const Button = styled.img`
-
   width: 380px;
   height: 80px;
   margin-top: 50px;
@@ -250,6 +270,6 @@ const Button = styled.img`
 
 const Below = styled.div`
   width: 100%;
-  height: 20vh
+  height: 20vh;
 `;
 export default LenderPage;
diff --git a/longkathon/src/pages/MainPage.js b/longkathon/src/pages/MainPage.js
index 3f9d706..5419e1e 100644
--- a/longkathon/src/pages/MainPage.js
+++ b/longkathon/src/pages/MainPage.js
@@ -230,15 +230,19 @@ const MainPage = () => {
         <CategoryTitle>
           다가올 <span className="Link">&nbsp;링크</span>를 확인 해보세요!
         </CategoryTitle>
-        <CustomCategoryText1>L:nk</CustomCategoryText1>
-        <CustomCategoryText2>pages</CustomCategoryText2>
-        <CustomCategoryButton
-          onClick={toggleButtonClick}
-          clicked={isButtonClicked}
-          alertActive={alertActive}
-        >
-          delete
-        </CustomCategoryButton>
+        {categories.length > 0 && (
+          <>
+            <CustomCategoryText1>L:nk</CustomCategoryText1>
+            <CustomCategoryText2>pages</CustomCategoryText2>
+            <CustomCategoryButton
+              onClick={toggleButtonClick}
+              clicked={isButtonClicked}
+              alertActive={alertActive}
+            >
+              delete
+            </CustomCategoryButton>
+          </>
+        )}
         <ContainerBox>
           {isButtonClicked && (
             <ModalOverlayComponent toggleButtonClick={toggleButtonClick} />