diff --git a/apis/menu.ts b/apis/menu.ts
new file mode 100644
index 0000000..3c25dc1
--- /dev/null
+++ b/apis/menu.ts
@@ -0,0 +1,9 @@
+// import { instance } from './instance';
+
+// export const getMenu = (toDay: string) => {
+//     return instance.get('/menu', {
+//         params: {
+//             date: '',
+//         },
+//     });
+// };
diff --git a/assets/svgs/MealArrow.tsx b/assets/svgs/MealArrow.tsx
index 3d123d4..8e922e8 100644
--- a/assets/svgs/MealArrow.tsx
+++ b/assets/svgs/MealArrow.tsx
@@ -1,19 +1,28 @@
-import React from 'react';
+import React, { SetStateAction, Dispatch } from 'react';
 
 interface MealArrowType {
     direction: 'right' | 'left';
+    datePlusNumber: number;
+    setDatePlusNumber: Dispatch<SetStateAction<number>>;
 }
 
 const MealArrow = (props: MealArrowType) => {
+    const { direction, datePlusNumber, setDatePlusNumber } = props;
+
+    const changeDatePlusNumber = () => {
+        if (direction == 'right') setDatePlusNumber(datePlusNumber + 1);
+        else setDatePlusNumber(datePlusNumber - 1);
+    };
+
     return (
-        <div style={{ cursor: 'pointer' }}>
+        <div onClick={changeDatePlusNumber} style={{ cursor: 'pointer' }}>
             <svg
                 width="12"
                 height="18"
                 viewBox="0 0 12 18"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg">
-                {props.direction == 'right' ? (
+                {direction == 'right' ? (
                     <path
                         d="M0 15.885L7.417 9L0 2.115L2.2834 0L12 9L2.2834 18L0 15.885Z"
                         fill="#242424"
diff --git a/components/MainPage/MainPage.tsx b/components/MainPage/MainPage.tsx
index 12c245f..a25436d 100644
--- a/components/MainPage/MainPage.tsx
+++ b/components/MainPage/MainPage.tsx
@@ -72,8 +72,13 @@ const MainPage = () => {
                             direction="right"
                         />
                     </_DateBox>
-                    <_MenuText>dㅁㅇㅁㅇ</_MenuText>
-                    <_MenuText>dㅁㅇㅁㅇ</_MenuText>
+                    <_MenuLayout>
+                        {menuMap.filter((element) => element !== undefined).length != 0 ? (
+                            menuMap
+                        ) : (
+                            <_MenuText>메뉴가 없습니다</_MenuText>
+                        )}
+                    </_MenuLayout>
                 </_MealLayout>
             </_TextLayout>
             <_ImgBox>
diff --git a/hooks/useToDay.ts b/hooks/useToDay.ts
new file mode 100644
index 0000000..e5f16ca
--- /dev/null
+++ b/hooks/useToDay.ts
@@ -0,0 +1,13 @@
+const useToDay = (datePlusNumber: number) => {
+    var date = new Date();
+    date = new Date(date.setDate(date.getDate() + datePlusNumber));
+    var year = date.getFullYear();
+    var month = ('0' + (1 + date.getMonth())).slice(-2);
+    var day = ('0' + date.getDate()).slice(-2);
+    const toDay = year + '-' + month + '-' + day;
+    const numberDate = parseInt(day);
+
+    return { toDay, numberDate };
+};
+
+export default useToDay;