diff --git a/src/app/letter/preview/page.tsx b/src/app/letter/preview/page.tsx
index 46c3ecb1..d8b21eb2 100644
--- a/src/app/letter/preview/page.tsx
+++ b/src/app/letter/preview/page.tsx
@@ -164,6 +164,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -194,6 +198,12 @@ const Label = styled.div`
   ${(props) => props.theme.fonts.title01};
   margin-top: 49px;
   margin-bottom: 28px;
+
+  @media (max-height: 735px) {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    ${theme.fonts.body14};
+  }
 `;
 
 const LetterWrapper = styled.div`
@@ -201,7 +211,12 @@ const LetterWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   gap: 49px;
+
+  @media (max-height: 735px) {
+    gap: 20px;
+  }
 `;
 
 const ChangeButton = styled.button`
@@ -213,6 +228,20 @@ const ChangeButton = styled.button`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
+
+  @media (max-height: 650px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/app/letter/register/page.tsx b/src/app/letter/register/page.tsx
index d11660b7..d3337937 100644
--- a/src/app/letter/register/page.tsx
+++ b/src/app/letter/register/page.tsx
@@ -247,16 +247,14 @@ const LetterRegisterPage = () => {
                   <ImageDiv>
                     <Image
                       src={image}
-                      width={52}
-                      height={52}
+                      fill
                       alt="images"
                       style={{ borderRadius: "8px" }}
                     />
                     <DeleteIcon onClick={() => handleDeleteImages(index)}>
                       <Image
                         src="/assets/icons/ic_image_delete.svg"
-                        width={20}
-                        height={20}
+                        fill
                         alt="delete"
                       />
                     </DeleteIcon>
@@ -308,6 +306,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -328,10 +330,20 @@ const Essential = styled.div`
   ${(props) => props.theme.fonts.caption03};
   margin-top: 25px;
   margin-bottom: 17px;
+
+  @media (max-height: 735px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  @media (max-height: 570px) {
+    margin-bottom: 20px;
+  }
 `;
 
 const Label = styled.div`
@@ -341,12 +353,26 @@ const Label = styled.div`
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 20px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
 `;
 
 const Count = styled.div`
   display: flex;
   color: ${theme.colors.gray400};
   ${theme.fonts.body09};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body11};
+  }
 `;
 
 const Span = styled.span`
@@ -369,6 +395,11 @@ const AddImageLabel = styled.label`
   font-weight: 500;
   ${theme.fonts.body08}
   margin-top: 16px;
+
+  @media (max-height: 735px) {
+    height: 42px;
+    ${theme.fonts.caption04}
+  }
 `;
 
 const AddImagesLabel = styled.label`
@@ -384,6 +415,12 @@ const AddImagesLabel = styled.label`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.body08};
   text-align: center;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ImagesList = styled.div`
@@ -406,6 +443,11 @@ const ImageDiv = styled.div`
   width: 52px;
   height: 52px;
   position: relative;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+  }
 `;
 
 const DeleteIcon = styled.button`
@@ -414,6 +456,11 @@ const DeleteIcon = styled.button`
   position: absolute;
   top: -5px;
   right: -5px;
+
+  @media (max-height: 735px) {
+    width: 13px;
+    height: 13px;
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/app/letter/template/page.tsx b/src/app/letter/template/page.tsx
index 76c02592..1b281449 100644
--- a/src/app/letter/template/page.tsx
+++ b/src/app/letter/template/page.tsx
@@ -88,7 +88,6 @@ const LetterTemplatePage = () => {
                 width={70}
                 height={70}
                 alt="편지지"
-                style={{ borderRadius: "8px" }}
                 $selected={template === item}
                 onClick={() => hanleChangeTemplate(item)}
               />
@@ -136,6 +135,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -155,6 +158,10 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 780px) {
+    display: none;
+  }
 `;
 
 const Column = styled.div`
@@ -167,12 +174,33 @@ const Label = styled.div`
   align-items: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.title01};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.title01};
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.subtitle};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body14};
+  }
 `;
 
 const SmallText = styled.div`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 33px;
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body09};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body13};
+    margin-bottom: 24px;
+  }
 `;
 
 const LetterWrapper = styled.div`
@@ -197,6 +225,13 @@ const TemplatesList = styled.div`
   }
   -ms-overflow-style: none; /* IE, Edge */
   scrollbar-width: none; /* Firefox */
+
+  @media (max-height: 735px) {
+    margin-top: 18px;
+    margin-bottom: 5px;
+    ${theme.fonts.body14};
+    gap: 11px;
+  }
 `;
 
 const TemplateImage = styled(Image)<{ $selected: boolean }>`
@@ -210,6 +245,17 @@ const TemplateImage = styled(Image)<{ $selected: boolean }>`
     css`
       box-shadow: 0 0 0 4px ${theme.colors.sub03};
     `}
+
+  @media (max-height: 735px) {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    ${({ $selected, theme }) =>
+      $selected &&
+      css`
+        box-shadow: 0 0 0 2px ${theme.colors.sub03};
+      `}
+  }
 `;
 
 const Page = styled.div`
@@ -223,6 +269,10 @@ const Page = styled.div`
 const Current = styled.span`
   color: ${theme.colors.white};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    margin-bottom: 50px;
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/app/planet/add/page.tsx b/src/app/planet/add/page.tsx
index 40f39966..364ea05c 100644
--- a/src/app/planet/add/page.tsx
+++ b/src/app/planet/add/page.tsx
@@ -93,6 +93,10 @@ const Layout = styled.div`
   padding: 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -107,15 +111,36 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 735px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  @media (max-height: 570px) {
+    margin-bottom: 27px;
+  }
 `;
+
 const Label = styled.div`
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 20px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
 `;
 
 const Add = styled.div`
@@ -123,7 +148,7 @@ const Add = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption04};
   margin-top: 8px;
-  margin-left: 25px;
+  margin-left: 20px;
 `;
 
 const PlanetWrapper = styled.div`
diff --git a/src/app/planet/page.tsx b/src/app/planet/page.tsx
index 84d923c5..177d8be1 100644
--- a/src/app/planet/page.tsx
+++ b/src/app/planet/page.tsx
@@ -80,6 +80,7 @@ const PlanetPage = () => {
       images: [] as string[],
       previewImages: [] as string[],
       templateType: 0,
+      letterId: null,
     });
   }, []);
 
diff --git a/src/app/send/complete/page.tsx b/src/app/send/complete/page.tsx
index 885d136d..75968090 100644
--- a/src/app/send/complete/page.tsx
+++ b/src/app/send/complete/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import Button from "@/components/common/Button";
+import KakaoShareButton from "@/components/common/KakaoShareButton";
 import { sendLetterState } from "@/recoil/letterStore";
 import { theme } from "@/styles/theme";
 import Image from "next/image";
@@ -12,7 +13,7 @@ import styled from "styled-components";
 const SendCompletePage = () => {
   const router = useRouter();
 
-  const { receiverName } = useRecoilValue(sendLetterState);
+  const { receiverName, letterId } = useRecoilValue(sendLetterState);
 
   return (
     <Layout>
@@ -24,12 +25,7 @@ const SendCompletePage = () => {
           <Sub>레터링으로 편지에 담긴 진심을 수놓았어요</Sub>
         </Title>
         <ImageWrapper>
-          <Image
-            src="/assets/send/send_complete.png"
-            width={480}
-            height={460}
-            alt="편지"
-          />
+          <Image src="/assets/send/send_complete.png" fill alt="편지" />
         </ImageWrapper>
       </Container>
       <ButtonWrapper>
@@ -40,6 +36,11 @@ const SendCompletePage = () => {
             router.push("/planet");
           }}
         />
+        <KakaoShareButton
+          type="reshare"
+          letterId={letterId || ""}
+          width="90px"
+        />
       </ButtonWrapper>
     </Layout>
   );
@@ -96,10 +97,25 @@ const ImageWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @media (max-height: 650px) {
+    width: 350px;
+    height: 340px;
+    top: 55%;
+  }
+
+  @media (max-height: 570px) {
+    width: 300px;
+    height: 290px;
+    top: 55%;
+  }
 `;
 
 const ButtonWrapper = styled.div`
   width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   position: absolute;
   padding: 0 24px;
   bottom: 54px;
diff --git a/src/app/send/letter/page.tsx b/src/app/send/letter/page.tsx
index 7abf0263..936e74d5 100644
--- a/src/app/send/letter/page.tsx
+++ b/src/app/send/letter/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Input from "@/components/common/Input";
@@ -314,6 +314,7 @@ const SendLetterPage = () => {
         images: response.data.images,
         previewImages: response.data.images,
         templateType: 0,
+        letterId: null,
       });
 
       // 각 input 상태 업데이트
@@ -373,7 +374,7 @@ const SendLetterPage = () => {
           />
         </Column>
         <Column>
-          <Label>사진을 추가해주세요</Label>
+          <Label $show={false}>사진을 추가해주세요</Label>
           {(previewImages || []).length === 0 ? (
             <AddImageWrapper>
               <AddImageLabel>
@@ -409,16 +410,14 @@ const SendLetterPage = () => {
                   <ImageDiv>
                     <Image
                       src={image}
-                      width={52}
-                      height={52}
+                      fill
                       alt="images"
                       style={{ borderRadius: "8px" }}
                     />
                     <DeleteIcon onClick={() => handleDeleteImages(index)}>
                       <Image
                         src="/assets/icons/ic_image_delete.svg"
-                        width={20}
-                        height={20}
+                        fill
                         alt="delete"
                       />
                     </DeleteIcon>
@@ -471,6 +470,10 @@ const Layout = styled.div`
   padding: 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const NavigatorBarWrapper = styled.div`
@@ -494,21 +497,54 @@ const ButtonDiv = styled.div`
   position: absolute;
   top: 6.5px;
   right: 0px;
+
+  @media (max-height: 735px) {
+    width: 80px;
+    height: 28px;
+    ${theme.fonts.caption03};
+    gap: 5px;
+    top: 7px;
+  }
+
+  @media (max-height: 650px) {
+    width: 65px;
+    height: 20px;
+    ${theme.fonts.body15};
+    gap: 5px;
+    top: 10px;
+  }
 `;
 
 const DraftButton = styled.button`
   color: ${theme.colors.gray200};
   ${theme.fonts.caption03};
+  white-space: nowrap;
 
   &:disabled {
     opacity: 0.6;
     transition: opacity 0.5s;
   }
+
+  @media (max-height: 735px) {
+    ${theme.fonts.caption03};
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body15};
+  }
 `;
 
 const ListButton = styled.button`
   color: ${theme.colors.gray200};
   ${theme.fonts.caption03};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.caption03};
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body15};
+  }
 `;
 
 const Container = styled.div`
@@ -529,25 +565,62 @@ const Essential = styled.div`
   ${(props) => props.theme.fonts.caption03};
   margin-top: 25px;
   margin-bottom: 17px;
+
+  @media (max-height: 790px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  /* @media (max-height: 735px) {
+    margin-bottom: 20px;
+  } */
+
+  @media (max-height: 570px) {
+    margin-bottom: 20px;
+  }
 `;
 
-const Label = styled.div`
+const Label = styled.div<{ $show?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 12px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
+
+  @media (max-height: 570px) {
+    ${({ $show }) =>
+      $show === false &&
+      css`
+        display: none;
+        margin-bottom: 0px;
+      `}
+  }
 `;
 
 const Count = styled.div`
   display: flex;
   color: ${theme.colors.gray400};
   ${theme.fonts.body09};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body11};
+  }
 `;
 
 const Span = styled.span`
@@ -575,6 +648,11 @@ const AddImageLabel = styled.label`
   font-style: normal;
   font-weight: 500;
   ${theme.fonts.body08}
+
+  @media (max-height: 735px) {
+    height: 42px;
+    ${theme.fonts.caption04}
+  }
 `;
 
 const SmallText = styled.div`
@@ -582,6 +660,10 @@ const SmallText = styled.div`
   ${theme.fonts.caption04};
   text-align: center;
   margin-bottom: 100px;
+
+  @media (max-height: 570px) {
+    display: none;
+  }
 `;
 
 const AddImagesLabel = styled.label`
@@ -597,6 +679,12 @@ const AddImagesLabel = styled.label`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.body08};
   text-align: center;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ImagesList = styled.div`
@@ -606,6 +694,10 @@ const ImagesList = styled.div`
   gap: 6px;
   margin-top: 16px;
   margin-bottom: 100px;
+
+  @media (max-height: 570px) {
+    margin-top: 0px;
+  }
 `;
 
 const ImagesWrapper = styled.div`
@@ -619,6 +711,11 @@ const ImageDiv = styled.div`
   width: 52px;
   height: 52px;
   position: relative;
+
+  @media (max-height: 735px) {
+    width: 39px;
+    height: 39px;
+  }
 `;
 
 const DeleteIcon = styled.button`
@@ -627,6 +724,11 @@ const DeleteIcon = styled.button`
   position: absolute;
   top: -5px;
   right: -5px;
+
+  @media (max-height: 735px) {
+    width: 13px;
+    height: 13px;
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/app/send/preview/page.tsx b/src/app/send/preview/page.tsx
index 2ac18788..1f4f86ec 100644
--- a/src/app/send/preview/page.tsx
+++ b/src/app/send/preview/page.tsx
@@ -8,7 +8,7 @@ import Button from "@/components/common/Button";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
 import Letter from "@/components/letter/Letter";
-import { useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { postSendLtter } from "@/api/send/send";
 import { sendLetterState } from "@/recoil/letterStore";
 import useKakaoSDK from "@/hooks/useKakaoSDK";
@@ -16,11 +16,11 @@ import { userState } from "@/recoil/userStore";
 
 const SendPreviewPage = () => {
   const router = useRouter();
-  const { draftId, receiverName, content, images, templateType } =
+  const [letterState, setLetterState] = useRecoilState(sendLetterState);
+  const { draftId, receiverName, content, images, templateType, letterId } =
     useRecoilValue(sendLetterState);
   const { name } = useRecoilValue(userState);
   const [isImage, setIsImage] = useState<boolean>(false);
-  const [letterId, setLetterId] = useState<string | null>(null);
 
   const isKakaoLoaded = useKakaoSDK();
 
@@ -45,7 +45,10 @@ const SendPreviewPage = () => {
           templateType,
         });
         console.log("편지 쓰기 성공");
-        setLetterId(response.data.letterCode);
+        setLetterState((prevState) => ({
+          ...prevState,
+          letterId: response.data.letterCode,
+        }));
 
         // 2. 카카오 공유 로직 실행
         if (isKakaoLoaded && response.data.letterCode) {
@@ -134,6 +137,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -164,6 +171,12 @@ const Label = styled.div`
   ${(props) => props.theme.fonts.title01};
   margin-top: 49px;
   margin-bottom: 28px;
+
+  @media (max-height: 735px) {
+    margin-top: 10px;
+    margin-bottom: 20px;
+    ${theme.fonts.body14};
+  }
 `;
 
 const LetterWrapper = styled.div`
@@ -171,7 +184,12 @@ const LetterWrapper = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   gap: 49px;
+
+  @media (max-height: 735px) {
+    gap: 20px;
+  }
 `;
 
 const ChangeButton = styled.button`
@@ -183,6 +201,20 @@ const ChangeButton = styled.button`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
+
+  @media (max-height: 650px) {
+    flex-direction: row;
+    margin-bottom: 50px;
+    gap: 6px;
+    ${theme.fonts.body12};
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/app/send/template/page.tsx b/src/app/send/template/page.tsx
index b3f02854..27814daf 100644
--- a/src/app/send/template/page.tsx
+++ b/src/app/send/template/page.tsx
@@ -108,6 +108,10 @@ const Layout = styled.div`
   padding: 20px 20px 20px 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -127,6 +131,10 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 780px) {
+    display: none;
+  }
 `;
 
 const Column = styled.div`
@@ -139,12 +147,33 @@ const Label = styled.div`
   align-items: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.title01};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.title01};
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.subtitle};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body14};
+  }
 `;
 
 const SmallText = styled.div`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.caption02};
   margin-bottom: 33px;
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body09};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body13};
+    margin-bottom: 24px;
+  }
 `;
 
 const LetterWrapper = styled.div`
@@ -169,6 +198,13 @@ const TemplatesList = styled.div`
   }
   -ms-overflow-style: none; /* IE, Edge */
   scrollbar-width: none; /* Firefox */
+
+  @media (max-height: 735px) {
+    margin-top: 18px;
+    margin-bottom: 5px;
+    ${theme.fonts.body14};
+    gap: 11px;
+  }
 `;
 
 const TemplateImage = styled(Image)<{ $selected: boolean }>`
@@ -182,6 +218,17 @@ const TemplateImage = styled(Image)<{ $selected: boolean }>`
     css`
       box-shadow: 0 0 0 4px ${theme.colors.sub03};
     `}
+
+  @media (max-height: 735px) {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+    ${({ $selected, theme }) =>
+      $selected &&
+      css`
+        box-shadow: 0 0 0 2px ${theme.colors.sub03};
+      `}
+  }
 `;
 
 const Page = styled.div`
@@ -195,6 +242,10 @@ const Page = styled.div`
 const Current = styled.span`
   color: ${theme.colors.white};
   margin-bottom: 100px;
+
+  @media (max-height: 735px) {
+    margin-bottom: 50px;
+  }
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index fe66aac9..86aae522 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -74,6 +74,7 @@ const StyledButton = styled.button<{
   ${(props) => props.theme.fonts.button01};
   transition: color 200ms, opacity 300ms;
   user-select: none;
+  white-space: nowrap;
 
   ${({ $size }) =>
     $size === "small" &&
@@ -93,4 +94,10 @@ const StyledButton = styled.button<{
     opacity: 0.8;
     transition: opacity 500ms;
   }
+
+  @media (max-height: 735px) {
+    ${theme.fonts.button02};
+    height: 45px;
+    border-radius: 9px;
+  }
 `;
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index de9a11a8..45b79522 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -166,6 +166,14 @@ const StyledInput = styled.input<{ $inputType: inputType; $isVaild: boolean }>`
     css`
       border-bottom: 1px solid ${theme.colors.red};
     `}
+
+  @media (max-height: 735px) {
+    height: 39px;
+    ${theme.fonts.caption04}
+    &::placeholder {
+      ${theme.fonts.caption04}
+    }
+  }
 `;
 
 const StyledTextarea = styled.textarea<{
@@ -198,9 +206,13 @@ const StyledTextarea = styled.textarea<{
   &::-webkit-scrollbar-track {
     background: transparent;
   }
-  //반응형
-  @media (max-width: 375px) {
-    max-height: 113px;
+
+  @media (max-height: 735px) {
+    height: 171px;
+    ${theme.fonts.caption04}
+    &::placeholder {
+      ${theme.fonts.caption04}
+    }
   }
 `;
 
@@ -224,8 +236,5 @@ const IconWrapper = styled.div<{ clickable: boolean }>`
   transform: translateY(-50%);
   display: flex;
   align-items: center;
-  cursor: ${({ clickable }) =>
-    clickable
-      ? "pointer"
-      : "default"}; /* Only show pointer cursor if clickable */
+  cursor: ${({ clickable }) => (clickable ? "pointer" : "default")};
 `;
diff --git a/src/components/common/KakaoShareButton.tsx b/src/components/common/KakaoShareButton.tsx
index 15552d47..cc3da669 100644
--- a/src/components/common/KakaoShareButton.tsx
+++ b/src/components/common/KakaoShareButton.tsx
@@ -6,16 +6,18 @@ import { useRecoilValue } from "recoil";
 import { userState } from "@/recoil/userStore";
 import useKakaoSDK from "@/hooks/useKakaoSDK";
 
-type buttonType = "default" | "small";
+type buttonType = "default" | "small" | "reshare";
 
 interface KakaoShareButtonProps {
   type?: buttonType;
   letterId: string;
+  width?: string;
 }
 
 const KakaoShareButton: React.FC<KakaoShareButtonProps> = ({
   type = "default",
   letterId,
+  width,
 }) => {
   const isKakaoLoaded = useKakaoSDK();
   const { name } = useRecoilValue(userState);
@@ -64,11 +66,18 @@ const KakaoShareButton: React.FC<KakaoShareButtonProps> = ({
         alt="카카오"
       />
     </Button>
-  ) : (
+  ) : type === "small" ? (
     <ReShareBtnWrapper onClick={shareToKakao}>
       <img src="/assets/icons/ic_kakao_talk.svg" />
       편지 다시 보내기
     </ReShareBtnWrapper>
+  ) : (
+    <Button
+      buttonType="secondary"
+      text="재공유"
+      width={width}
+      onClick={shareToKakao}
+    />
   );
 };
 
diff --git a/src/components/common/NavigatorBar.tsx b/src/components/common/NavigatorBar.tsx
index 78a5b2d5..e8a05254 100644
--- a/src/components/common/NavigatorBar.tsx
+++ b/src/components/common/NavigatorBar.tsx
@@ -33,8 +33,7 @@ const NavigatorBar = (props: NavigatorBarProps) => {
       <LeftIcon>
         <Image
           src="/assets/icons/ic_chevron_left.svg"
-          width={24}
-          height={24}
+          fill
           alt="back"
           onClick={handleChangePage}
         />
@@ -44,8 +43,7 @@ const NavigatorBar = (props: NavigatorBarProps) => {
         <RightIcon>
           <Image
             src="/assets/icons/ic_cancel.svg"
-            width={24}
-            height={24}
+            fill
             alt="cancel"
             onClick={handleCancelPage}
           />
@@ -71,15 +69,31 @@ const Container = styled.div`
 `;
 
 const LeftIcon = styled.div`
+  width: 24px;
+  height: 24px;
   flex-shrink: 0;
+  position: relative;
+
+  @media (max-height: 735px) {
+    width: 20px;
+    height: 20px;
+  }
 `;
 
 const RightIcon = styled.div`
+  width: 24px;
+  height: 24px;
   flex-shrink: 0;
+  position: relative;
+
+  @media (max-height: 735px) {
+    width: 20px;
+    height: 20px;
+  }
 `;
 
 const WhiteSpace = styled.div`
-    width: 24px;
+  width: 24px;
 `;
 
 const Title = styled.div`
@@ -87,6 +101,18 @@ const Title = styled.div`
   text-align: center;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.body04};
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body04}
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body08};
+  }
+
+  @media (max-height: 570px) {
+    ${theme.fonts.body12}
+  }
 `;
 
 const NextLabel = styled.div`
diff --git a/src/components/common/Toast.tsx b/src/components/common/Toast.tsx
index 0becbd8c..c5b2ff55 100644
--- a/src/components/common/Toast.tsx
+++ b/src/components/common/Toast.tsx
@@ -139,6 +139,11 @@ const ToastContainer = styled.div<{
       : css`
           ${fadeOut} 0.5s ease-in-out
         `};
+
+  @media (max-height: 735px) {
+    height: 44px;
+    ${theme.fonts.caption01}
+  }
 `;
 
 const Message = styled.div`
diff --git a/src/components/letter/Letter.tsx b/src/components/letter/Letter.tsx
index 1a953505..9a0e8c52 100644
--- a/src/components/letter/Letter.tsx
+++ b/src/components/letter/Letter.tsx
@@ -1,5 +1,5 @@
 import React, { use, useEffect, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Pagination from "./Pagination";
 import SwipeableContent from "./Content";
 import { theme } from "@/styles/theme";
@@ -177,6 +177,7 @@ const Letter = (props: LetterProps) => {
       $width={width}
       $height={height}
       $padding={padding}
+      $showType={showType}
       className={flip ? "flip" : ""}
     >
       {isDelete && (
@@ -255,6 +256,7 @@ const Container = styled.div<{
   $width?: string;
   $height?: string;
   $padding?: string;
+  $showType: "previewSend" | "previewReceive" | "receive" | "send" | "url";
 }>`
   display: flex;
   flex-direction: column;
@@ -277,21 +279,63 @@ const Container = styled.div<{
   border-radius: 12px;
   border: 1px solid ${theme.colors.gray700};
 
-  //반응형
-  @media (max-width: 375px) {
-    gap: 5px;
-    padding: 20px;
-    justify-content: start;
-    max-width: 300px;
-    max-height: ${({ $height }) => ($height ? $height : "300px")};
-    min-height: 270px;
-  }
-
   &.flip {
     animation: ${flipAnimation} 0.8s ease-in-out;
     transform-style: preserve-3d;
     perspective: 1000px;
   }
+
+  /* showType별 반응형 */
+  ${({ $showType }) =>
+    ($showType === "previewSend" || $showType === "previewReceive") &&
+    css`
+      @media (max-height: 735px) {
+        max-width: 280px;
+        max-height: 280px;
+        min-height: 280px;
+        padding: 34px;
+      }
+
+      @media (max-height: 650px) {
+        max-width: 220px;
+        max-height: 220px;
+        min-height: 220px;
+        padding: 30px 20px;
+      }
+
+      @media (max-height: 570px) {
+        max-width: 178px;
+        max-height: 182px;
+        min-height: 182px;
+        padding: 30px 20px;
+      }
+    `}
+
+  ${({ $showType }) =>
+    ($showType === "receive" || $showType === "send") &&
+    css`
+      @media (max-width: 768px) {
+        max-width: 350px;
+        max-height: 350px;
+      }
+      @media (max-width: 480px) {
+        max-width: 300px;
+        max-height: 300px;
+      }
+    `}
+
+  ${({ $showType }) =>
+    $showType === "url" &&
+    css`
+      @media (max-width: 768px) {
+        max-width: 340px;
+        max-height: 340px;
+      }
+      @media (max-width: 480px) {
+        max-width: 290px;
+        max-height: 290px;
+      }
+    `}
 `;
 
 const TopContainer = styled.div<{
@@ -309,6 +353,10 @@ const TopContainer = styled.div<{
 const TopPreviewContainer = styled(TopContainer)`
   margin-top: ${(props) => (props.$contentType === "all" ? "20px" : "0px")};
   ${theme.fonts.subtitle}
+
+  @media (max-height: 735px) {
+    margin-top: 0;
+  }
 `;
 
 const Name = styled.div<{ $showType: string; $contentType: string }>`
@@ -316,11 +364,21 @@ const Name = styled.div<{ $showType: string; $contentType: string }>`
   align-items: center;
   text-align: center;
   ${(props) =>
-    props.$showType === "preview" && props.$contentType === "one"
+    (props.$showType === "previewSend" ||
+      props.$showType === "previewReceive") &&
+    props.$contentType === "one"
       ? props.theme.fonts.caption01
       : props.theme.fonts.title01};
-  @media (max-width: 375px) {
-    font-size: 12px;
+
+  @media (max-height: 735px) {
+    ${(props) =>
+      (props.$showType === "previewSend" ||
+        props.$showType === "previewReceive") &&
+      props.$contentType === "one"
+        ? props.theme.fonts.caption01
+        : props.theme.fonts.body10};
+    /* @media (max-width: 375px) {
+    font-size: 12px; */
   }
 `;
 
@@ -333,7 +391,7 @@ const Date = styled.div<{ $showType: string }>`
 const Content = styled.div<{ $showType: string; $contentType: string }>`
   width: 100%;
   ${(props) =>
-    props.$showType === "preview"
+    props.$showType === "previewSend" || props.$showType === "previewReceive"
       ? `flex: 1; height: calc(100% - 80px);`
       : `height: 90%;`}
   display: flex;
@@ -344,7 +402,9 @@ const Content = styled.div<{ $showType: string; $contentType: string }>`
   border-radius: 10px;
   padding: 10px 0;
   ${(props) =>
-    props.$showType === "preview" && props.$contentType === "one"
+    (props.$showType === "previewSend" ||
+      props.$showType === "previewReceive") &&
+    props.$contentType === "one"
       ? props.theme.fonts.caption09
       : props.theme.fonts.body07};
   overflow: hidden;
@@ -352,9 +412,17 @@ const Content = styled.div<{ $showType: string; $contentType: string }>`
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  //반응형
-  @media (max-width: 375px) {
-    font-size: 11px;
+
+  @media (max-height: 735px) {
+    ${(props) =>
+      (props.$showType === "previewSend" ||
+        props.$showType === "previewReceive") &&
+      props.$contentType === "one"
+        ? props.theme.fonts.caption09
+        : props.theme.fonts.caption05};
+    //반응형
+    /* @media (max-width: 375px) {
+    font-size: 11px; */
   }
 `;
 
diff --git a/src/components/planet/PlanetPalette.tsx b/src/components/planet/PlanetPalette.tsx
index 93351c1d..d4684881 100644
--- a/src/components/planet/PlanetPalette.tsx
+++ b/src/components/planet/PlanetPalette.tsx
@@ -37,9 +37,17 @@ export default PlanetPalette;
 
 const Container = styled.div`
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 20px;
   border-radius: 8px;
   background: ${theme.colors.gray800};
+
+  @media (max-height: 650px) {
+    height: 51px;
+    padding: 0 17px;
+  }
 `;
 
 const Palettes = styled.div`
@@ -50,11 +58,16 @@ const Palettes = styled.div`
   overflow-x: auto;
   padding: 5px 0;
   gap: 12px;
+
+  @media (max-height: 650px) {
+    justify-content: space-between;
+  }
 `;
 
 const Palette = styled.div<{ $color: string; $selected: boolean }>`
   width: 41px;
   height: 41px;
+  aspect-ratio: 1;
   border-radius: 50%;
   background: ${({ $color }) => $color};
 
@@ -65,13 +78,8 @@ const Palette = styled.div<{ $color: string; $selected: boolean }>`
       filter: drop-shadow(0px 0px 3px rgba(224, 222, 222, 0.377));
     `}
 
-  @media (max-width: 330px) {
-    width: 35px;
-    height: 35px;
-  }
-
-  @media (max-width: 300px) {
-    width: 30px;
-    height: 30px;
+  @media (max-height: 650px) {
+    width: 33px;
+    height: 33px;
   }
 `;
diff --git a/src/components/send/DraftBottom.tsx b/src/components/send/DraftBottom.tsx
index 240fa064..6c9708a2 100644
--- a/src/components/send/DraftBottom.tsx
+++ b/src/components/send/DraftBottom.tsx
@@ -158,6 +158,7 @@ const Top = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 0px 4px;
+  margin-bottom: 22px;
 `;
 
 const Title = styled.div`
@@ -166,17 +167,30 @@ const Title = styled.div`
   gap: 12px;
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.body04};
-  margin-bottom: 22px;
+
+  @media (max-height: 650px) {
+    ${(props) => props.theme.fonts.caption01};
+  }
 `;
 
 const Span = styled.span`
+  display: flex;
+  align-items: center;
   color: ${theme.colors.gray500};
   ${(props) => props.theme.fonts.caption02};
+
+  @media (max-height: 650px) {
+    ${(props) => props.theme.fonts.body13};
+  }
 `;
 
 const EditButton = styled.button`
   color: ${theme.colors.gray300};
   ${(props) => props.theme.fonts.body09};
+
+  @media (max-height: 650px) {
+    ${(props) => props.theme.fonts.body13};
+  }
 `;
 
 const DraftListContainer = styled.div`
@@ -205,6 +219,10 @@ const DraftListWrapper = styled.div`
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
+
+  @media (max-height: 650px) {
+    height: 60px;
+  }
 `;
 
 const NoData = styled.div`
diff --git a/src/components/send/DraftList.tsx b/src/components/send/DraftList.tsx
index cd07052d..215e5ae1 100644
--- a/src/components/send/DraftList.tsx
+++ b/src/components/send/DraftList.tsx
@@ -38,6 +38,7 @@ const DraftList = (props: DraftListProps) => {
           images: response.data.images,
           previewImages: response.data.images, // 미리보기로 이미지 불러오기
           templateType: 0,
+          letterId: null,
         });
 
         onClose();
@@ -100,6 +101,10 @@ const Container = styled.div`
   background: ${theme.colors.gray800};
   position: relative;
   overflow: visible;
+
+  @media (max-height: 650px) {
+    height: 60px;
+  }
 `;
 
 const Top = styled.div`
@@ -112,6 +117,10 @@ const Top = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+
+  @media (max-height: 650px) {
+    ${(props) => props.theme.fonts.body13};
+  }
 `;
 
 const Name = styled.span`
@@ -135,6 +144,10 @@ const TimeStamp = styled.div`
   color: ${theme.colors.gray300};
   ${theme.fonts.caption04};
   text-align: left;
+
+  @media (max-height: 650px) {
+    ${(props) => props.theme.fonts.caption05};
+  }
 `;
 
 const DeleteIcon = styled(Image)`
diff --git a/src/recoil/letterStore.tsx b/src/recoil/letterStore.tsx
index 2693774c..5afcae1f 100644
--- a/src/recoil/letterStore.tsx
+++ b/src/recoil/letterStore.tsx
@@ -45,6 +45,7 @@ export const sendLetterState = atom({
     images: [] as string[],
     previewImages: [] as string[],
     templateType: 0,
+    letterId: null as string | null,
   },
   effects_UNSTABLE: [persistAtomEffect],
 });
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index 14d0a1f6..50a3bf9b 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -96,6 +96,30 @@ const fonts = {
     weight: 400,
     size: 14,
   }),
+  body10: FONT({  // 반응형 추가
+    weight: 600,
+    size: 12,
+  }),
+  body11: FONT({  // 반응형 추가
+    weight: 500,
+    size: 10,
+  }),
+  body12: FONT({  // 반응형 추가
+    weight: 500,
+    size: 11,
+  }),
+  body13: FONT({  // 반응형 추가
+    weight: 400,
+    size: 11,
+  }),
+  body14: FONT({  // 반응형 추가
+    weight: 600,
+    size: 15,
+  }),
+  body15: FONT({  // 반응형 추가
+    weight: 500,
+    size: 9,
+  }),
 
   button01: FONT({
     weight: 600,