diff --git a/frontend/src/components/pages/search/SearchPage.styled.ts b/frontend/src/components/pages/search/SearchPage.styled.ts
index 8a64b88f..7a13ce64 100644
--- a/frontend/src/components/pages/search/SearchPage.styled.ts
+++ b/frontend/src/components/pages/search/SearchPage.styled.ts
@@ -26,8 +26,10 @@ export const MainPageTraveloguesList = styled.ul`
 export const TabStyle = css`
   position: fixed;
   z-index: 1000;
-  width: 45rem;
+  width: 100%;
   height: 5rem;
+  max-width: 45rem;
+  margin: auto;
 
   background-color: ${PRIMITIVE_COLORS.white};
 `;
diff --git a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
index 5c6bab4c..ab34ec47 100644
--- a/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
+++ b/frontend/src/components/pages/travelogueEdit/TravelogueEditPage.tsx
@@ -33,6 +33,7 @@ import { FORM_VALIDATIONS_MAP } from "@constants/formValidation";
 import { ROUTE_PATHS_MAP } from "@constants/route";
 
 import { extractID } from "@utils/extractId";
+import resizeAndConvertImage from "@utils/resizeAndConvertImage";
 
 import * as S from "./TravelogueEditPage.styled";
 
@@ -81,7 +82,11 @@ const TravelogueEditPage = () => {
   const { mutateAsync: mutateAddImage, isPaused } = usePostUploadImages();
 
   const handleChangeThumbnail = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const thumbnail = await mutateAddImage(Array.from(e.target.files as FileList));
+    const files = Array.from(e.target.files as FileList);
+
+    const processedFiles = await Promise.all(files.map((file) => resizeAndConvertImage(file)));
+
+    const thumbnail = await mutateAddImage(processedFiles);
     setThumbnail(thumbnail[0]);
   };