diff --git a/frontend/src/apis/gets.ts b/frontend/src/apis/gets.ts
index 8b146f408..d880f17ce 100644
--- a/frontend/src/apis/gets.ts
+++ b/frontend/src/apis/gets.ts
@@ -1,4 +1,3 @@
-// ./src/apis/gets.ts
 import { MoimInfo, Participation } from '@_types/index';
 import ApiClient from './apiClient';
 import {
@@ -9,6 +8,7 @@ import {
   GetZzimMine,
 } from './responseTypes';
 import { checkStatus } from './apiconfig';
+import { Filter } from '@_components/MyMoimListFilters/MyMoimListFilters';
 
 export const getMoims = async (): Promise<MoimInfo[]> => {
   const response = await ApiClient.getWithAuth('moim');
@@ -18,6 +18,24 @@ export const getMoims = async (): Promise<MoimInfo[]> => {
   return json.data.moims;
 };
 
+export const getMyMoims = async (
+  filter: Filter['api'],
+): Promise<MoimInfo[]> => {
+  const response = await ApiClient.getWithAuth(`moim/mine?filter=${filter}`);
+  checkStatus(response);
+
+  const json: GetMoims = await response.json();
+  return json.data.moims;
+};
+
+export const getMyZzimMoims = async (): Promise<MoimInfo[]> => {
+  const response = await ApiClient.getWithAuth('moim/zzim');
+  checkStatus(response);
+
+  const json: GetMoims = await response.json();
+  return json.data.moims;
+};
+
 export const getMoim = async (moimId: number): Promise<MoimInfo> => {
   const response = await ApiClient.getWithAuth(`moim/${moimId}`);
   checkStatus(response);
diff --git a/frontend/src/components/HomeMainContent/HomeMainContent.tsx b/frontend/src/components/HomeMainContent/HomeMainContent.tsx
new file mode 100644
index 000000000..dc44f8ddd
--- /dev/null
+++ b/frontend/src/components/HomeMainContent/HomeMainContent.tsx
@@ -0,0 +1,22 @@
+import MoimList from '@_components/MoimList/MoimList';
+import { MainPageTab } from '@_components/MoimTabBar/MoimTabBar';
+import MyMoimList from '@_components/MyMoim/MyMoim';
+import MyZzimMoimList from '@_components/MyZzimMoimList/MyZzimMoimList';
+
+interface MoimMainContentProps {
+  currentTab: MainPageTab;
+}
+
+export default function HomeMainContent(props: MoimMainContentProps) {
+  const { currentTab } = props;
+
+  if (currentTab === '모임목록') {
+    return <MoimList />;
+  }
+  if (currentTab === '나의모임') {
+    return <MyMoimList />;
+  }
+  if (currentTab === '찜한모임') {
+    return <MyZzimMoimList />;
+  }
+}
diff --git a/frontend/src/components/Icons/ChattingIcon.tsx b/frontend/src/components/Icons/ChattingIcon.tsx
new file mode 100644
index 000000000..caf838027
--- /dev/null
+++ b/frontend/src/components/Icons/ChattingIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface ChattingIconProps {
+  isActive: boolean;
+}
+
+export default function ChattingIcon(props: ChattingIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 21 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.879 18.472L11.337 19.388C10.854 20.204 9.647 20.204 9.163 19.388L8.621 18.472C8.201 17.762 7.991 17.406 7.653 17.21C7.315 17.013 6.89 17.006 6.04 16.991C4.784 16.97 3.997 16.893 3.337 16.619C2.73037 16.3677 2.17917 15.9994 1.71487 15.5351C1.25057 15.0708 0.882274 14.5196 0.631 13.913C0.25 12.995 0.25 11.83 0.25 9.5V8.5C0.25 5.227 0.25 3.59 0.987 2.388C1.39904 1.7152 1.96445 1.14945 2.637 0.737C3.84 0 5.478 0 8.75 0H11.75C15.023 0 16.66 0 17.863 0.737C18.5354 1.14917 19.1008 1.71456 19.513 2.387C20.25 3.59 20.25 5.228 20.25 8.5V9.5C20.25 11.83 20.25 12.995 19.87 13.913C19.6186 14.5197 19.2502 15.071 18.7857 15.5353C18.3212 15.9996 17.7698 16.3678 17.163 16.619C16.503 16.893 15.716 16.969 14.46 16.991C13.61 17.006 13.185 17.013 12.847 17.21C12.509 17.406 12.299 17.761 11.879 18.472Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/HomeIcon.tsx b/frontend/src/components/Icons/HomeIcon.tsx
new file mode 100644
index 000000000..9db8c1016
--- /dev/null
+++ b/frontend/src/components/Icons/HomeIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface HomeIconProps {
+  isActive: boolean;
+}
+
+export default function HomeIcon(props: HomeIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.444 7.47307L17.774 17.4731C17.6613 18.1687 17.3072 18.8024 16.774 19.2631C16.2058 19.7161 15.5007 19.9628 14.774 19.9631H5.16402C4.46134 19.9569 3.78312 19.7043 3.24766 19.2492C2.71219 18.7941 2.35346 18.1656 2.23402 17.4731L0.564023 7.47307C0.473584 6.8961 0.553519 6.30527 0.794023 5.77307C1.03445 5.24361 1.42356 4.79544 1.91402 4.48307L8.39402 0.48307C8.86746 0.191034 9.41276 0.036377 9.96902 0.036377C10.5253 0.036377 11.0706 0.191034 11.544 0.48307L18.014 4.48307C18.521 4.78307 18.925 5.23007 19.174 5.76307C19.4301 6.29415 19.524 6.88892 19.444 7.47307Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/MyPageIcon.tsx b/frontend/src/components/Icons/MyPageIcon.tsx
new file mode 100644
index 000000000..89fc5a328
--- /dev/null
+++ b/frontend/src/components/Icons/MyPageIcon.tsx
@@ -0,0 +1,28 @@
+import { useTheme } from '@emotion/react';
+
+interface MyPageIconProps {
+  isActive: boolean;
+}
+
+export default function MyPageIcon(props: MyPageIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.3997 18.6251C19.3338 18.7391 19.2391 18.8338 19.1251 18.8997C19.011 18.9655 18.8816 19.0001 18.75 19.0001H0.749964C0.618376 19 0.48914 18.9652 0.375233 18.8993C0.261326 18.8335 0.166756 18.7388 0.101021 18.6248C0.0352859 18.5108 0.000698664 18.3815 0.000732447 18.2499C0.000766229 18.1183 0.0354198 17.9891 0.101214 17.8751C1.52903 15.4067 3.72934 13.6367 6.29715 12.7976C5.027 12.0415 4.04016 10.8893 3.4882 9.51804C2.93624 8.14678 2.84967 6.63224 3.24178 5.20701C3.6339 3.78178 4.48301 2.52467 5.65874 1.62873C6.83446 0.732786 8.27178 0.247559 9.74996 0.247559C11.2281 0.247559 12.6655 0.732786 13.8412 1.62873C15.0169 2.52467 15.866 3.78178 16.2581 5.20701C16.6503 6.63224 16.5637 8.14678 16.0117 9.51804C15.4598 10.8893 14.4729 12.0415 13.2028 12.7976C15.7706 13.6367 17.9709 15.4067 19.3987 17.8751C19.4647 17.989 19.4995 18.1183 19.4997 18.25C19.4998 18.3816 19.4653 18.511 19.3997 18.6251Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/Icons/PleaseIcon.tsx b/frontend/src/components/Icons/PleaseIcon.tsx
new file mode 100644
index 000000000..897b2447e
--- /dev/null
+++ b/frontend/src/components/Icons/PleaseIcon.tsx
@@ -0,0 +1,34 @@
+import { useTheme } from '@emotion/react';
+
+interface PleaseIconProps {
+  isActive: boolean;
+}
+
+export default function PleaseIcon(props: PleaseIconProps) {
+  const { isActive } = props;
+
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 21 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.5615 16.8749L17.164 13.4765L13.7459 2.19931C13.6487 1.87819 13.4739 1.58599 13.2368 1.34859C12.9998 1.11119 12.7079 0.935908 12.3869 0.838283C12.0659 0.740658 11.7258 0.723698 11.3967 0.788906C11.0677 0.854114 10.7597 0.999477 10.5002 1.21212C10.2408 0.999477 9.93283 0.854114 9.60374 0.788906C9.27465 0.723698 8.93456 0.740658 8.61359 0.838283C8.29263 0.935908 8.00069 1.11119 7.76364 1.34859C7.5266 1.58599 7.35176 1.87819 7.25462 2.19931L3.83649 13.4774L0.438992 16.8749C0.1579 17.1562 0 17.5376 0 17.9352C0 18.3329 0.1579 18.7143 0.438992 18.9956L3.50368 22.0602C3.64297 22.1996 3.80835 22.3101 3.99036 22.3855C4.17237 22.4609 4.36745 22.4997 4.56446 22.4997C4.76147 22.4997 4.95655 22.4609 5.13857 22.3855C5.32058 22.3101 5.48595 22.1996 5.62524 22.0602L10.1515 17.5312C10.2769 17.4053 10.3934 17.271 10.5002 17.129C10.6071 17.271 10.7236 17.4053 10.849 17.5312L15.3752 22.0612C15.5145 22.2005 15.6799 22.311 15.8619 22.3864C16.0439 22.4618 16.239 22.5006 16.436 22.5006C16.633 22.5006 16.8281 22.4618 17.0101 22.3864C17.1921 22.311 17.3575 22.2005 17.4968 22.0612L20.5615 18.9965C20.7008 18.8572 20.8113 18.6918 20.8867 18.5098C20.9621 18.3278 21.001 18.1327 21.001 17.9357C21.001 17.7387 20.9621 17.5436 20.8867 17.3616C20.8113 17.1796 20.7008 17.0142 20.5615 16.8749ZM9.75024 14.8827C9.75174 15.1786 9.69451 15.4718 9.58186 15.7454C9.46921 16.019 9.30338 16.2675 9.09399 16.4765L6.81399 18.7499L3.75024 15.6862L5.02993 14.4056C5.11726 14.3182 5.18167 14.2107 5.21743 14.0924L8.68618 2.63431C8.72136 2.50681 8.80197 2.39658 8.9128 2.32439C9.02363 2.2522 9.15703 2.22305 9.28788 2.24241C9.41872 2.26178 9.53796 2.32833 9.62312 2.42953C9.70829 2.53073 9.7535 2.65958 9.75024 2.79181V14.8827ZM14.1977 18.7621L11.9065 16.4737C11.6971 16.2647 11.5313 16.0162 11.4186 15.7426C11.306 15.469 11.2487 15.1758 11.2502 14.8799V2.78618C11.2503 2.65629 11.297 2.53073 11.3818 2.43237C11.4667 2.33402 11.584 2.26941 11.7125 2.25033C11.841 2.23124 11.9721 2.25895 12.0818 2.32839C12.1916 2.39784 12.2728 2.50441 12.3106 2.62868L15.7793 14.0868C15.8151 14.205 15.8795 14.3126 15.9668 14.3999L17.3252 15.7584L14.1977 18.7621Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+      <path
+        d="M9.51587 1.78125C7.73462 2.39062 8.10962 1.17188 7.17212 4.35938C6.42212 6.90938 4.14087 13.1719 3.09399 15.9844L6.37524 19.7812L9.93774 17.0156H11.719L14.4846 19.7812L17.8596 15.9844L16.3127 13.9688L12.5159 1.78125H9.93774H9.51587Z"
+        fill={
+          isActive ? theme.colorPalette.grey[500] : theme.colorPalette.grey[300]
+        }
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/MoimCard/MoimCard.stories.tsx b/frontend/src/components/MoimCard/MoimCard.stories.tsx
index 99dc1d6ca..4142f95d6 100644
--- a/frontend/src/components/MoimCard/MoimCard.stories.tsx
+++ b/frontend/src/components/MoimCard/MoimCard.stories.tsx
@@ -22,51 +22,30 @@ export const Default: Story = {
       isZzimed: true,
       moimId: 1,
       authorNickname: '김코딩',
-      status: 'MOIMING',
-      comments: [],
       participants: [
         {
-          nickname: '치코',
-          profile: '',
+          nickname: '김코딩',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'moimer',
         },
         {
-          nickname: '치코',
-          profile: '',
+          nickname: '김디자인',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
           role: 'moimee',
         },
+      ],
+      description: '코딩하면서 놀아요',
+      status: 'MOIMING',
+      comments: [
         {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
-        },
-        {
-          nickname: '치코',
-          profile: '',
-          role: 'moimer',
+          commentId: 1,
+          nickname: '김코딩',
+          content: '안녕하세요',
+          dateTime: '2021-10-30 19:00',
+          profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
+          child: [],
         },
       ],
-      description: '코딩하면서 놀아요',
     },
   },
   render: (args) => <MoimCard {...args} />,
diff --git a/frontend/src/components/MoimCard/MoimCard.style.ts b/frontend/src/components/MoimCard/MoimCard.style.ts
index 80ce6e734..b66458b24 100644
--- a/frontend/src/components/MoimCard/MoimCard.style.ts
+++ b/frontend/src/components/MoimCard/MoimCard.style.ts
@@ -27,6 +27,12 @@ export const cardTitle = (props: { theme: Theme }) => {
   `;
 };
 
+export const heartButton = css`
+  padding: 0;
+  background: none;
+  border: 0;
+`;
+
 export const subjectBox = css`
   display: flex;
   gap: 0.8rem;
diff --git a/frontend/src/components/MoimCard/MoimCard.tsx b/frontend/src/components/MoimCard/MoimCard.tsx
index 11ead6865..7322e0f56 100644
--- a/frontend/src/components/MoimCard/MoimCard.tsx
+++ b/frontend/src/components/MoimCard/MoimCard.tsx
@@ -5,6 +5,7 @@ import { formatHhmmToKorean, formatYyyymmddToKorean } from '@_utils/formatters';
 import { MoimInfo } from '@_types/index';
 import { useTheme } from '@emotion/react';
 import HeartIcon from '@_components/Icons/HeartIcon';
+import useChangeZzim from '@_hooks/mutaions/useChangeZzim';
 
 interface MoimCardProps extends HTMLProps<HTMLDivElement> {
   moimInfo: MoimInfo;
@@ -12,17 +13,36 @@ interface MoimCardProps extends HTMLProps<HTMLDivElement> {
 
 export default function MoimCard(props: MoimCardProps) {
   const {
-    moimInfo: { title, date, time, place, maxPeople, currentPeople, isZzimed },
+    moimInfo: {
+      moimId,
+      title,
+      date,
+      time,
+      place,
+      maxPeople,
+      currentPeople,
+      isZzimed,
+    },
     ...args
   } = props;
 
   const theme = useTheme();
 
+  const { mutate: changeZzim } = useChangeZzim();
+
+  const handleHeartButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    console.log(1);
+    changeZzim(moimId);
+  };
+
   return (
     <div css={S.cardBox} {...args}>
       <div css={S.titleBox}>
         <h2 css={S.cardTitle({ theme })}>{title}</h2>
-        <HeartIcon isFilled={isZzimed} />
+        <button css={S.heartButton} onClick={handleHeartButtonClick}>
+          <HeartIcon isFilled={isZzimed} />
+        </button>
       </div>
 
       <div css={S.subjectBox}>
diff --git a/frontend/src/components/MoimCardList/MoimCardList.stories.tsx b/frontend/src/components/MoimCardList/MoimCardList.stories.tsx
index 717973c72..38880b352 100644
--- a/frontend/src/components/MoimCardList/MoimCardList.stories.tsx
+++ b/frontend/src/components/MoimCardList/MoimCardList.stories.tsx
@@ -35,47 +35,28 @@ export const Default: Story = {
         authorNickname: '김코딩',
         participants: [
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김코딩',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimer',
           },
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김디자인',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimee',
           },
+        ],
+        description: '코딩하면서 놀아요',
+        status: 'MOIMING',
+        comments: [
           {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
+            commentId: 1,
+            nickname: '김코딩',
+            content: '안녕하세요',
+            dateTime: '2021-10-30 19:00',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
+            child: [],
           },
         ],
-        description: '코딩하면서 놀아요',
       },
       {
         title: '볼 함 차보까?',
@@ -84,54 +65,33 @@ export const Default: Story = {
         place: '서울 마포구 독막로 96 1층',
         maxPeople: 5,
         currentPeople: 3,
-        status: 'MOIMING',
-        comments: [],
         isZzimed: false,
         moimId: 1,
         authorNickname: '김코딩',
         participants: [
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김코딩',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimer',
           },
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김디자인',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimee',
           },
+        ],
+        description: '코딩하면서 놀아요',
+        status: 'MOIMING',
+        comments: [
           {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
+            commentId: 1,
+            nickname: '김코딩',
+            content: '안녕하세요',
+            dateTime: '2021-10-30 19:00',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
+            child: [],
           },
         ],
-        description: '코딩하면서 놀아요',
       },
       {
         title: '볼 함 차보까?',
@@ -140,54 +100,34 @@ export const Default: Story = {
         place: '서울 마포구 독막로 96 1층',
         maxPeople: 5,
         currentPeople: 3,
-        status: 'MOIMING',
-        comments: [],
         isZzimed: true,
         moimId: 1,
         authorNickname: '김코딩',
         participants: [
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김코딩',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimer',
           },
           {
-            nickname: '치코',
-            profile: '',
+            nickname: '김디자인',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
             role: 'moimee',
           },
+
+        ],
+        description: '코딩하면서 놀아요',
+        status: 'MOIMING',
+        comments: [
           {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
-          },
-          {
-            nickname: '치코',
-            profile: '',
-            role: 'moimer',
+            commentId: 1,
+            nickname: '김코딩',
+            content: '안녕하세요',
+            dateTime: '2021-10-30 19:00',
+            profile: 'https://avatars.githubusercontent.com/u/78939596?v=4',
+            child: [],
           },
         ],
-        description: '코딩하면서 놀아요',
       },
     ],
   },
diff --git a/frontend/src/components/MoimList/MoimList.tsx b/frontend/src/components/MoimList/MoimList.tsx
new file mode 100644
index 000000000..6d2491efd
--- /dev/null
+++ b/frontend/src/components/MoimList/MoimList.tsx
@@ -0,0 +1,12 @@
+import MoimCardList from '@_components/MoimCardList/MoimCardList';
+import useMoims from '@_hooks/queries/useMoims';
+
+export default function MoimList() {
+  const { moims, isLoading } = useMoims();
+
+  if (isLoading) {
+    return <div>로딩중...</div>;
+  }
+
+  return moims && <MoimCardList moimInfos={moims} />;
+}
diff --git a/frontend/src/components/MoimTabBar/MoimTabBar.stories.tsx b/frontend/src/components/MoimTabBar/MoimTabBar.stories.tsx
index f3570dafa..686433ea8 100644
--- a/frontend/src/components/MoimTabBar/MoimTabBar.stories.tsx
+++ b/frontend/src/components/MoimTabBar/MoimTabBar.stories.tsx
@@ -12,8 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    tabs: ['Tab1', 'Tab2', 'Tab3'],
-    currentTab: 'Tab1',
+    currentTab: '모임목록',
     onTabClick: (tab: string) => console.log(tab),
   },
   render: (args) => <MoimTabBar {...args} />,
diff --git a/frontend/src/components/MoimTabBar/MoimTabBar.tsx b/frontend/src/components/MoimTabBar/MoimTabBar.tsx
index 57165e5e6..95534661e 100644
--- a/frontend/src/components/MoimTabBar/MoimTabBar.tsx
+++ b/frontend/src/components/MoimTabBar/MoimTabBar.tsx
@@ -1,14 +1,17 @@
 import { useTheme } from '@emotion/react';
 import * as S from './MoimTabBar.style';
 
+export type MainPageTab = '모임목록' | '나의모임' | '찜한모임';
+
+const tabs: MainPageTab[] = ['모임목록', '나의모임', '찜한모임'];
+
 interface MoimTabBarProps {
-  tabs: string[];
-  currentTab: string;
-  onTabClick: (tab: string) => void;
+  currentTab: MainPageTab;
+  onTabClick: (tab: MainPageTab) => void;
 }
 
 export default function MoimTabBar(props: MoimTabBarProps) {
-  const { tabs, currentTab, onTabClick } = props;
+  const { currentTab, onTabClick } = props;
 
   const theme = useTheme();
 
diff --git a/frontend/src/components/MyMoim/MyMoim.tsx b/frontend/src/components/MyMoim/MyMoim.tsx
new file mode 100644
index 000000000..3739a5e8c
--- /dev/null
+++ b/frontend/src/components/MyMoim/MyMoim.tsx
@@ -0,0 +1,30 @@
+import MoimCardList from '@_components/MoimCardList/MoimCardList';
+import MyMoimListFilters, {
+  Filter,
+} from '@_components/MyMoimListFilters/MyMoimListFilters';
+import useMyMoims from '@_hooks/queries/useMyMoims';
+import { Fragment, useState } from 'react';
+
+export default function MyMoimList() {
+  const [selectedFilter, setSelectedFilter] = useState<Filter['api']>('all');
+
+  const { myMoims, isLoading } = useMyMoims(selectedFilter);
+
+  const handleFilterSelect = (filter: Filter['api']) => {
+    setSelectedFilter(filter);
+  };
+
+  if (isLoading) {
+    return <div>로딩중...</div>;
+  }
+
+  return (
+    <Fragment>
+      <MyMoimListFilters
+        selectedFilter={selectedFilter}
+        handleFilterSelect={handleFilterSelect}
+      />
+      {myMoims && <MoimCardList moimInfos={myMoims} />}
+    </Fragment>
+  );
+}
diff --git a/frontend/src/components/MyMoimListFilters/MyMoimListFilters.stories.tsx b/frontend/src/components/MyMoimListFilters/MyMoimListFilters.stories.tsx
index a19c46d7e..975ffc3cc 100644
--- a/frontend/src/components/MyMoimListFilters/MyMoimListFilters.stories.tsx
+++ b/frontend/src/components/MyMoimListFilters/MyMoimListFilters.stories.tsx
@@ -11,5 +11,9 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    selectedFilter: 'all',
+    handleFilterSelect: () => {},
+  },
   render: (args) => <MyMoimListFilters {...args} />,
 };
diff --git a/frontend/src/components/MyMoimListFilters/MyMoimListFilters.tsx b/frontend/src/components/MyMoimListFilters/MyMoimListFilters.tsx
index 38a151ae6..7e0709231 100644
--- a/frontend/src/components/MyMoimListFilters/MyMoimListFilters.tsx
+++ b/frontend/src/components/MyMoimListFilters/MyMoimListFilters.tsx
@@ -1,20 +1,42 @@
 import MyMoimListFilterTag from '@_components/MyMoimListFilterTag/MyMoimListFilterTag';
-import { useState } from 'react';
 import * as S from './MyMoimListFilters.style';
 
-const filters = ['모든 모임', '다가오는 모임', '지난 모임'];
+export type Filter =
+  | {
+      ui: '모든 모임';
+      api: 'all';
+    }
+  | {
+      ui: '다가오는 모임';
+      api: 'upcoming';
+    }
+  | {
+      ui: '지난 모임';
+      api: 'past';
+    };
 
-export default function MyMoimListFilters() {
-  const [selectedFilter, setSelectedFilter] = useState(filters[0]);
+const filters: Filter[] = [
+  { ui: '모든 모임', api: 'all' },
+  { ui: '다가오는 모임', api: 'upcoming' },
+  { ui: '지난 모임', api: 'past' },
+];
+
+interface MyMoimListFiltersProps {
+  selectedFilter: Filter['api'];
+  handleFilterSelect: (filter: Filter['api']) => void;
+}
+
+export default function MyMoimListFilters(props: MyMoimListFiltersProps) {
+  const { selectedFilter, handleFilterSelect } = props;
 
   return (
     <div css={S.container}>
-      {filters.map((filter) => (
+      {filters.map(({ ui, api }) => (
         <MyMoimListFilterTag
-          key={filter}
-          label={filter}
-          isSelected={selectedFilter === filter}
-          onClick={() => setSelectedFilter(filter)}
+          key={ui}
+          label={ui}
+          isSelected={selectedFilter === api}
+          onClick={() => handleFilterSelect(api)}
         />
       ))}
     </div>
diff --git a/frontend/src/components/MyZzimMoimList/MyZzimMoimList.tsx b/frontend/src/components/MyZzimMoimList/MyZzimMoimList.tsx
new file mode 100644
index 000000000..573d1ab1a
--- /dev/null
+++ b/frontend/src/components/MyZzimMoimList/MyZzimMoimList.tsx
@@ -0,0 +1,12 @@
+import MoimCardList from '@_components/MoimCardList/MoimCardList';
+import useMyZzimMoims from '@_hooks/queries/useMyZzimMoim';
+
+export default function MyZzimMoimList() {
+  const { myZzimMoims, isLoading } = useMyZzimMoims();
+
+  if (isLoading) {
+    return <div>로딩중...</div>;
+  }
+
+  return myZzimMoims && <MoimCardList moimInfos={myZzimMoims} />;
+}
diff --git a/frontend/src/components/NavigationBar/NavigationBar.stories.tsx b/frontend/src/components/NavigationBar/NavigationBar.stories.tsx
new file mode 100644
index 000000000..447ae7e46
--- /dev/null
+++ b/frontend/src/components/NavigationBar/NavigationBar.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NavigationBar from './NavigationBar';
+
+const meta = {
+  component: NavigationBar,
+  title: 'Components/NavigationBar',
+} satisfies Meta<typeof NavigationBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <NavigationBar {...args} />,
+};
diff --git a/frontend/src/components/NavigationBar/NavigationBar.style.ts b/frontend/src/components/NavigationBar/NavigationBar.style.ts
new file mode 100644
index 000000000..4e5f0cd27
--- /dev/null
+++ b/frontend/src/components/NavigationBar/NavigationBar.style.ts
@@ -0,0 +1,22 @@
+import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
+import { css, Theme } from '@emotion/react';
+
+export const navigationBarContainer = (props: { theme: Theme }) => {
+  const { theme } = props;
+
+  return css`
+    display: flex;
+    justify-content: space-between;
+
+    width: 100%;
+    max-width: ${DISPLAY_MAX_WIDTH};
+    height: 100%;
+
+    background-color: ${theme.colorPalette.white[100]};
+    box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
+  `;
+};
+export const navigationBarList = css`
+  display: flex;
+  width: 100%;
+`;
diff --git a/frontend/src/components/NavigationBar/NavigationBar.tsx b/frontend/src/components/NavigationBar/NavigationBar.tsx
new file mode 100644
index 000000000..87788ff51
--- /dev/null
+++ b/frontend/src/components/NavigationBar/NavigationBar.tsx
@@ -0,0 +1,47 @@
+import * as S from './NavigationBar.style';
+import { useState } from 'react';
+import NavigationBarItem from '@_components/NavigationBarItem/NavigationBarItem';
+import { useTheme } from '@emotion/react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import ROUTES from '@_constants/routes';
+
+export type Tab = '홈' | '채팅' | '해주세요' | '마이페이지';
+
+const tabRoutes: Record<Tab, string> = {
+  홈: ROUTES.main,
+  채팅: ROUTES.chat,
+  해주세요: ROUTES.please,
+  마이페이지: ROUTES.myPage,
+};
+
+export default function NavigationBar() {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [currentTab, setCurrentTab] = useState<Tab>(
+    Object.keys(tabRoutes).find(
+      (key) => tabRoutes[key as Tab] === location.pathname,
+    ) as Tab,
+  );
+
+  const handleTabClick = (tab: Tab) => {
+    setCurrentTab(tab);
+    navigate(tabRoutes[tab]);
+  };
+
+  return (
+    <nav css={S.navigationBarContainer({ theme })}>
+      <ul css={S.navigationBarList}>
+        {Object.keys(tabRoutes).map((tab) => (
+          <NavigationBarItem
+            key={tab}
+            tab={tab as Tab}
+            isActive={currentTab === tab}
+            onClick={handleTabClick}
+          />
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/frontend/src/components/NavigationBarItem/NavigationBarItem.style.ts b/frontend/src/components/NavigationBarItem/NavigationBarItem.style.ts
new file mode 100644
index 000000000..15d5ec79c
--- /dev/null
+++ b/frontend/src/components/NavigationBarItem/NavigationBarItem.style.ts
@@ -0,0 +1,22 @@
+import { css, Theme } from '@emotion/react';
+
+export const navigationBarItem = (props: {
+  theme: Theme;
+  isActive: boolean;
+}) => {
+  const { theme, isActive } = props;
+
+  return css`
+    ${theme.typography.c2}
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+
+    color: ${isActive
+      ? theme.colorPalette.grey[500]
+      : theme.colorPalette.grey[300]};
+  `;
+};
diff --git a/frontend/src/components/NavigationBarItem/NavigationBarItem.tsx b/frontend/src/components/NavigationBarItem/NavigationBarItem.tsx
new file mode 100644
index 000000000..b3236cae1
--- /dev/null
+++ b/frontend/src/components/NavigationBarItem/NavigationBarItem.tsx
@@ -0,0 +1,40 @@
+import ChattingIcon from '@_components/Icons/ChattingIcon';
+import HomeIcon from '@_components/Icons/HomeIcon';
+import MyPageIcon from '@_components/Icons/MyPageIcon';
+import PleaseIcon from '@_components/Icons/PleaseIcon';
+import { useTheme } from '@emotion/react';
+import * as S from './NavigationBarItem.style';
+import { Tab } from '@_components/NavigationBar/NavigationBar';
+
+interface NavigationBarItemProps {
+  tab: Tab;
+  isActive: boolean;
+  onClick: (tab: Tab) => void;
+}
+
+export default function NavigationBarItem(props: NavigationBarItemProps) {
+  const { tab, isActive, onClick } = props;
+
+  const theme = useTheme();
+
+  const tabIcon =
+    tab === '홈' ? (
+      <HomeIcon isActive={isActive} />
+    ) : tab === '채팅' ? (
+      <ChattingIcon isActive={isActive} />
+    ) : tab === '해주세요' ? (
+      <PleaseIcon isActive={isActive} />
+    ) : (
+      <MyPageIcon isActive={isActive} />
+    );
+
+  return (
+    <li
+      css={S.navigationBarItem({ theme, isActive })}
+      onClick={() => onClick(tab)}
+    >
+      {tabIcon}
+      <span>{tab}</span>
+    </li>
+  );
+}
diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts
index b26573309..76a7ace45 100644
--- a/frontend/src/constants/queryKeys.ts
+++ b/frontend/src/constants/queryKeys.ts
@@ -1,5 +1,7 @@
 const QUERY_KEYS = {
   moims: 'moims',
+  myMoims: 'myMoims',
+  myZzimMoims: 'myZzimMoims',
   moim: 'moim',
   userKey: 'userKey',
   chamyoMine: 'chamyoMine',
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 4e8f2196d..71907d368 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -1,3 +1,20 @@
+/**
+ * TODO: 라우터 경로 도메인별로 재정의 
+const ROUTES = {
+  main: '/',
+  moim: '/moim',
+  moimCreation: '/moim-create',
+  moimDetail: '/moim/:moimId',
+  moimParticipationComplete: '/moim/:moimId/participation-complete',
+  moimModify: '/moim/:moimId/modify',
+
+  chatting: '/chatting',
+  chattingRoom: '/chatting/:moimId',
+
+  login: '/login',
+};
+ */
+
 const ROUTES = {
   main: '/',
   addMoim: '/add-moim',
@@ -7,6 +24,8 @@ const ROUTES = {
   modify: '/modify/:moimId',
   chat: '/chat',
   chattingRoom: '/chatting-room/:moimId',
+  please: '/please',
+  myPage: '/my-page',
 };
 
 export default ROUTES;
diff --git a/frontend/src/constants/styles.ts b/frontend/src/constants/styles.ts
index 2f31b4c0d..50c0a25f1 100644
--- a/frontend/src/constants/styles.ts
+++ b/frontend/src/constants/styles.ts
@@ -1 +1,2 @@
 export const DISPLAY_MAX_WIDTH = '60rem';
+export const NAVIGATION_BAR_HEIGHT = '9rem';
diff --git a/frontend/src/hooks/mutaions/useChangeZzim.ts b/frontend/src/hooks/mutaions/useChangeZzim.ts
index 4970d32e8..9d0b310cd 100644
--- a/frontend/src/hooks/mutaions/useChangeZzim.ts
+++ b/frontend/src/hooks/mutaions/useChangeZzim.ts
@@ -12,6 +12,15 @@ export default function useChangeZzim() {
       queryClient.invalidateQueries({
         queryKey: [QUERY_KEYS.ZzimMine, moimId],
       });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.moims],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.myMoims],
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.myZzimMoims],
+      });
     },
   });
 }
diff --git a/frontend/src/hooks/queries/useMyMoims.ts b/frontend/src/hooks/queries/useMyMoims.ts
new file mode 100644
index 000000000..99be967b9
--- /dev/null
+++ b/frontend/src/hooks/queries/useMyMoims.ts
@@ -0,0 +1,13 @@
+import { getMyMoims } from '@_apis/gets';
+import { Filter } from '@_components/MyMoimListFilters/MyMoimListFilters';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useMyMoims(selectedFilter: Filter['api']) {
+  const { data: myMoims, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.myMoims, selectedFilter],
+    queryFn: () => getMyMoims(selectedFilter),
+  });
+
+  return { myMoims, isLoading };
+}
diff --git a/frontend/src/hooks/queries/useMyZzimMoim.ts b/frontend/src/hooks/queries/useMyZzimMoim.ts
new file mode 100644
index 000000000..10c88d5b7
--- /dev/null
+++ b/frontend/src/hooks/queries/useMyZzimMoim.ts
@@ -0,0 +1,12 @@
+import { getMyZzimMoims } from '@_apis/gets';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useMyZzimMoims() {
+  const { data: myZzimMoims, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.myZzimMoims],
+    queryFn: getMyZzimMoims,
+  });
+
+  return { myZzimMoims, isLoading };
+}
diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts b/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts
index b3ad279ca..60b1230b2 100644
--- a/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts
+++ b/frontend/src/layouts/HomeLayout.tsx/HomeFixedButtonWrapper/HomeFixedButtonWrapper.style.ts
@@ -1,14 +1,15 @@
-import { DISPLAY_MAX_WIDTH } from '@_constants/styles';
+import { DISPLAY_MAX_WIDTH, NAVIGATION_BAR_HEIGHT } from '@_constants/styles';
 import { css } from '@emotion/react';
 
 export const fixedWrapperStyle = css`
   position: fixed;
-  bottom: 26px;
+  bottom: 18px;
 
   display: flex;
   justify-content: right;
 
   width: 100%;
   max-width: ${DISPLAY_MAX_WIDTH};
+  margin-bottom: ${NAVIGATION_BAR_HEIGHT};
   padding-right: 4rem;
 `;
diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts
new file mode 100644
index 000000000..ac325f83b
--- /dev/null
+++ b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.style.ts
@@ -0,0 +1,11 @@
+import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles';
+import { css } from '@emotion/react';
+
+export const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  margin-bottom: ${NAVIGATION_BAR_HEIGHT};
+  padding-bottom: 2rem;
+`;
diff --git a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx
index f31f84a07..4b36b6a8b 100644
--- a/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx
+++ b/frontend/src/layouts/HomeLayout.tsx/HomeLayout.tsx
@@ -1,4 +1,4 @@
-import * as S from './MoimList.style';
+import * as S from './HomeLayout.style';
 
 import HomeFixedButtonWrapper from './HomeFixedButtonWrapper/HomeFixedButtonWrapper';
 import HomeHeader from './HomeHeader/HomeHeader';
diff --git a/frontend/src/layouts/HomeLayout.tsx/MoimList.style.ts b/frontend/src/layouts/HomeLayout.tsx/MoimList.style.ts
deleted file mode 100644
index e654ae305..000000000
--- a/frontend/src/layouts/HomeLayout.tsx/MoimList.style.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { css } from '@emotion/react';
-
-export const containerStyle = css`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
diff --git a/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts b/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts
new file mode 100644
index 000000000..fc279b701
--- /dev/null
+++ b/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.style.ts
@@ -0,0 +1,9 @@
+import { NAVIGATION_BAR_HEIGHT } from '@_constants/styles';
+import { css } from '@emotion/react';
+
+export const navigationBarWrapper = css`
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: ${NAVIGATION_BAR_HEIGHT};
+`;
diff --git a/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.tsx b/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.tsx
new file mode 100644
index 000000000..d9438a295
--- /dev/null
+++ b/frontend/src/layouts/components/NavigationBarWrapper/NavigationBarWrapper.tsx
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import * as S from './NavigationBarWrapper.style';
+
+export default function NavigationBarWrapper(props: PropsWithChildren) {
+  const { children } = props;
+
+  return <div css={S.navigationBarWrapper}>{children}</div>;
+}
diff --git a/frontend/src/pages/ChatPage/ChatPage.tsx b/frontend/src/pages/ChatPage/ChatPage.tsx
index 47289b5b8..1b281d02c 100644
--- a/frontend/src/pages/ChatPage/ChatPage.tsx
+++ b/frontend/src/pages/ChatPage/ChatPage.tsx
@@ -1,6 +1,9 @@
 import ChattingPreview from '@_components/ChattingPreview/ChattingPreview';
+import NavigationBar from '@_components/NavigationBar/NavigationBar';
 import ChattingPreviewLayout from '@_layouts/ChattingPreviewLayout/ChattingPreviewLayout';
+import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper';
 import { useTheme } from '@emotion/react';
+import { Fragment } from 'react';
 
 export default function ChatPage() {
   const theme = useTheme();
@@ -12,17 +15,22 @@ export default function ChatPage() {
   });
 
   return (
-    <ChattingPreviewLayout>
-      <ChattingPreviewLayout.Header>
-        <ChattingPreviewLayout.Header.Left>
-          <h2 css={theme.typography.h5}>채팅</h2>
-        </ChattingPreviewLayout.Header.Left>
-      </ChattingPreviewLayout.Header>
-      <ChattingPreviewLayout.ContentContainer>
-        {dummy.map((dum, id) => (
-          <ChattingPreview {...dum} key={id} />
-        ))}
-      </ChattingPreviewLayout.ContentContainer>
-    </ChattingPreviewLayout>
+    <Fragment>
+      <ChattingPreviewLayout>
+        <ChattingPreviewLayout.Header>
+          <ChattingPreviewLayout.Header.Left>
+            <h2 css={theme.typography.h5}>채팅</h2>
+          </ChattingPreviewLayout.Header.Left>
+        </ChattingPreviewLayout.Header>
+        <ChattingPreviewLayout.ContentContainer>
+          {dummy.map((dum, id) => (
+            <ChattingPreview {...dum} key={id} />
+          ))}
+        </ChattingPreviewLayout.ContentContainer>
+      </ChattingPreviewLayout>
+      <NavigationBarWrapper>
+        <NavigationBar />
+      </NavigationBarWrapper>
+    </Fragment>
   );
 }
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index d36ea1ac1..833982628 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -1,52 +1,51 @@
 import Button from '@_components/Button/Button';
 import HomeLayout from '@_layouts/HomeLayout.tsx/HomeLayout';
 import ROUTES from '@_constants/routes';
-import useMoims from '@_hooks/queries/useMoims';
 import { useNavigate } from 'react-router-dom';
 import PlusIcon from '@_components/Icons/PlusIcon';
-import MoimTabBar from '@_components/MoimTabBar/MoimTabBar';
-import MoimCardList from '@_components/MoimCardList/MoimCardList';
-import { useState } from 'react';
-import MyMoimListFilters from '@_components/MyMoimListFilters/MyMoimListFilters';
+import { Fragment, useState } from 'react';
+import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper';
+import NavigationBar from '@_components/NavigationBar/NavigationBar';
 
-const tabs = ['모임목록', '나의모임', '찜한모임'];
+import MoimTabBar, { MainPageTab } from '@_components/MoimTabBar/MoimTabBar';
+import HomeMainContent from '@_components/HomeMainContent/HomeMainContent';
 
 export default function MainPage() {
   const navigate = useNavigate();
-  const { moims } = useMoims();
 
-  const [currentTab, setCurrentTab] = useState(tabs[0]);
+  const [currentTab, setCurrentTab] = useState<MainPageTab>('모임목록');
 
-  const handleTabClick = (tab: string) => {
+  const handleTabClick = (tab: MainPageTab) => {
     setCurrentTab(tab);
   };
 
   return (
-    <HomeLayout>
-      <HomeLayout.Header>우아한테크코스</HomeLayout.Header>
-
-      <HomeLayout.Nav>
-        <MoimTabBar
-          tabs={tabs}
-          currentTab={currentTab}
-          onTabClick={handleTabClick}
-        />
-      </HomeLayout.Nav>
-
-      <HomeLayout.Main>
-        {currentTab === '나의모임' && <MyMoimListFilters />}
-        {moims && <MoimCardList moimInfos={moims} />}
-      </HomeLayout.Main>
-
-      <HomeLayout.HomeFixedButtonWrapper>
-        <Button
-          shape="circle"
-          onClick={() => navigate(ROUTES.addMoim)}
-          disabled={false}
-        >
-          <PlusIcon />
-        </Button>
-      </HomeLayout.HomeFixedButtonWrapper>
-    </HomeLayout>
+    <Fragment>
+      <HomeLayout>
+        <HomeLayout.Header>우아한테크코스</HomeLayout.Header>
+
+        <HomeLayout.Nav>
+          <MoimTabBar currentTab={currentTab} onTabClick={handleTabClick} />
+        </HomeLayout.Nav>
+
+        <HomeLayout.Main>
+          <HomeMainContent currentTab={currentTab} />
+        </HomeLayout.Main>
+
+        <HomeLayout.HomeFixedButtonWrapper>
+          <Button
+            shape="circle"
+            onClick={() => navigate(ROUTES.addMoim)}
+            disabled={false}
+          >
+            <PlusIcon />
+          </Button>
+        </HomeLayout.HomeFixedButtonWrapper>
+      </HomeLayout>
+
+      <NavigationBarWrapper>
+        <NavigationBar />
+      </NavigationBarWrapper>
+    </Fragment>
   );
 }