diff --git a/src/App.css b/src/App.css
index 2f2bbb4..ac05208 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,9 +18,7 @@
 .blue_text {
   color: #223C6D;
   position: relative;
-}
 
-.center {
   margin-top: calc((100vh - 400px) / 2);
   margin-bottom: calc((100vh - 400px) / 2);
 }
@@ -62,4 +60,14 @@
   padding: 4px 8px;
   border-radius: 8px;
   background: rgba(255, 248, 223, 0.60);
+}
+
+.cocktail_menu {
+  width: 100%;
+}
+
+.center { 
+  height: calc(100vh - 92px);
+  display: flex;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/src/assets/images/menu.jpg b/src/assets/images/menu.jpg
new file mode 100644
index 0000000..e0b7157
Binary files /dev/null and b/src/assets/images/menu.jpg differ
diff --git a/src/assets/images/menu.png b/src/assets/images/menu.png
deleted file mode 100644
index 5a42fea..0000000
Binary files a/src/assets/images/menu.png and /dev/null differ
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 6eada8b..3f013da 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -8,7 +8,7 @@ function Home() {
 
     return (
         <>
-            <div className="blue_text center">
+            <div className="blue_text">
                 <div className="title">MBTI 밸런스 게임<div>-칵테일편-</div></div>
                 <img src={COCKTAILS.default} className="logo_cocktail" alt="cocktail logo" />
 
diff --git a/src/pages/Menu/index.tsx b/src/pages/Menu/index.tsx
index 4a276d7..8cfb560 100644
--- a/src/pages/Menu/index.tsx
+++ b/src/pages/Menu/index.tsx
@@ -1,10 +1,10 @@
-import menu from '../../assets/images/menu.png';
+import menu from '../../assets/images/menu.jpg';
 
 function Menu() {
     return (
-        <>
-            <img src={menu} className="logo_cocktail" alt="menu image" />
-        </>
+        <div className='center'>
+            <img src={menu} className="cocktail_menu" alt="menu image" />
+        </div>
     )
 }