diff --git a/frontend/src/components/common/Header/Header.styles.ts b/frontend/src/components/common/Header/Header.styles.ts
index 856bbe30e..409fbc555 100644
--- a/frontend/src/components/common/Header/Header.styles.ts
+++ b/frontend/src/components/common/Header/Header.styles.ts
@@ -94,7 +94,7 @@ export const MobileHeaderContainer = styled.header`
     top: 0;
     left: 0;
     right: 0;
-    height: 46px;
+    height: 56px;
     padding: 0px 20px;
     margin: 0 auto;
     z-index: 2;
@@ -110,28 +110,28 @@ export const MobileHeaderWrapper = styled.div`
 `;
 
 export const MobileMainIcon = styled.button`
-  width: 26px;
-  height: 22px;
+  width: 32.562px;
+  height: 26px;
   background-color: transparent;
   border: none;
   cursor: pointer;
 
   img {
-    width: 26px;
+    width: 32.562px;
     height: auto;
     object-fit: cover;
   }
 `;
 
 export const MobileMenu = styled.button`
-  width: 18px;
-  height: 14px;
+  width: 20px;
+  height: 16px;
   background-color: transparent;
   border: none;
   cursor: pointer;
 
   img {
-    width: 18px;
+    width: 20px;
     height: auto;
     object-fit: cover;
   }
diff --git a/frontend/src/components/common/SearchBox/SearchBox.styles.ts b/frontend/src/components/common/SearchBox/SearchBox.styles.ts
index 4d0860a47..72d471832 100644
--- a/frontend/src/components/common/SearchBox/SearchBox.styles.ts
+++ b/frontend/src/components/common/SearchBox/SearchBox.styles.ts
@@ -3,17 +3,18 @@ import styled from 'styled-components';
 export const SearchBoxContainer = styled.form<{ isFocused: boolean }>`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 300px;
+  justify-content: center;
+  width: 345px;
   height: 36px;
-  padding: 10px 20px;
+  padding: 3px 20px;
   border: transparent;
   border-radius: 41px;
   background-color: #eeeeee;
 
   @media (max-width: 500px) {
-    width: 270px;
-    height: 28px;
+    width: 255px;
+    height: 36px;
+    padding: 6px 16px;
 
     border: 1px solid
       ${({ isFocused }) =>
@@ -22,7 +23,8 @@ export const SearchBoxContainer = styled.form<{ isFocused: boolean }>`
 `;
 
 export const SearchInputStyles = styled.input`
-  width: 100%;
+  flex: 1;
+  width: calc(100% - 32px);
   background-color: transparent;
   height: 36px;
   border: none;
@@ -32,6 +34,7 @@ export const SearchInputStyles = styled.input`
   &::placeholder {
     transition: opacity 0.3s;
   }
+
   &:focus::placeholder {
     opacity: 0;
   }
@@ -39,35 +42,31 @@ export const SearchInputStyles = styled.input`
   @media (max-width: 550px) {
     font-size: 10px;
   }
+
+  @media (max-width: 500px) {
+    font-size: 14px;
+  }
 `;
 
 export const SearchButton = styled.button<{ isFocused: boolean }>`
+  flex-shrink: 0;
   border: none;
   background-color: transparent;
   font-size: 16px;
   cursor: pointer;
-  margin-top: 2px;
 
-  img {
-    width: 16px;
-    height: 16px;
-  }
+  width: 16px;
+  height: 16px;
 
-  @media (max-width: 698px) {
-    img {
-      width: 14px;
-      height: 14px;
-    }
-  }
-
-  @media (max-width: 550px) {
-    img {
-      width: 12px;
-      height: 12px;
-    }
+  img {
+    width: 100%;
+    height: 100%;
   }
 
   @media (max-width: 500px) {
+    width: 14px;
+    height: 14px;
+
     filter: ${({ isFocused }) =>
       isFocused
         ? 'invert(36%) sepia(83%) saturate(746%) hue-rotate(359deg) brightness(95%) contrast(92%)'
diff --git a/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts b/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts
index 6abbc7d46..d6fbb507b 100644
--- a/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts
+++ b/frontend/src/pages/MainPage/components/Banner/Banner.styles.ts
@@ -14,7 +14,7 @@ export const BannerContainer = styled.div`
   position: relative;
 
   @media (max-width: 500px) {
-    margin-top: 42px;
+    margin-top: 56px;
     padding: 0;
   }
 `;
diff --git a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts
index 4f377a3ff..c7c96f24e 100644
--- a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts
+++ b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts
@@ -11,7 +11,7 @@ export const CategoryButtonContainer = styled.div`
     margin-top: 16px;
     background-color: white;
     position: sticky;
-    top: 46px;
+    top: 56px;
     z-index: 1;
   }
 `;