diff --git a/public/images/sign/main.png b/public/images/sign/main.png
new file mode 100644
index 00000000..8f7677b7
Binary files /dev/null and b/public/images/sign/main.png differ
diff --git a/src/components/FAQ/FAQ.tsx b/src/components/FAQ/FAQ.tsx
index 6dcead43..0f267a97 100644
--- a/src/components/FAQ/FAQ.tsx
+++ b/src/components/FAQ/FAQ.tsx
@@ -5,6 +5,7 @@ import { FAQList } from '~/components/FAQ/FAQList';
 import { SectionTitle } from '~/components/SectionTitle';
 import { FAQ_GROUP, FAQGroupType, FAQS, FAQType } from '~/constant/faq';
 import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
 
 export function FAQ() {
   const [activeTab, setActiveTab] = useState<FAQGroupType>('지원자격');
@@ -65,4 +66,8 @@ const tabCss = (theme: Theme, isActive: boolean) => css`
   color: ${isActive ? theme.colors.yellow500 : theme.colors.white};
   cursor: pointer;
   padding: 16px 24px;
+
+  ${mediaQuery('mobile')} {
+    font-size: 14px;
+  }
 `;
diff --git a/src/components/FAQ/FAQItem.tsx b/src/components/FAQ/FAQItem.tsx
index fd80cc04..8db809a6 100644
--- a/src/components/FAQ/FAQItem.tsx
+++ b/src/components/FAQ/FAQItem.tsx
@@ -2,6 +2,7 @@ import { css, Theme } from '@emotion/react';
 import { motion, Variants } from 'framer-motion';
 
 import { ArrowIcon } from '~/components/Icons';
+import { mediaQuery } from '~/styles/media';
 import { theme } from '~/styles/theme';
 
 interface FAQItemProps {
@@ -68,12 +69,26 @@ const headerCss = (theme: Theme, isOpen: boolean) => css`
     text-align: center;
     ${theme.typos.pretendard.subTitle2}
   }
+
+  ${mediaQuery('mobile')} {
+    padding: 8px;
+
+    > h3 {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
 `;
 
 const arrowIconCss = (theme: Theme, isOpen: boolean) => css`
   > path {
     stroke: ${isOpen ? theme.colors.black800 : theme.colors.blue400};
   }
+
+  ${mediaQuery('mobile')} {
+    width: 24px;
+    height: 24px;
+  }
 `;
 
 const bodyCss = (theme: Theme) => css`
@@ -83,4 +98,11 @@ const bodyCss = (theme: Theme) => css`
     color: ${theme.colors.white};
     ${theme.typos.pretendard.body1};
   }
+  ${mediaQuery('mobile')} {
+    > p {
+      padding: 20px 8px;
+
+      font-size: 14px;
+    }
+  }
 `;
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 28418533..6f00c083 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,8 +1,9 @@
 import Link from 'next/link';
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
 import { FIRST_ROW_FOOTER_INFOS, SECOND_ROW_FOOTER_INFOS } from '~/constant/footer';
 import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
 
 export function Footer() {
   return (
@@ -11,17 +12,18 @@ export function Footer() {
         <ul css={rowCss}>
           {FIRST_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
-              <Link css={linkCss} href={footer.href}>
+              <Link css={[linkCss, strongLinkCss]} href={footer.href}>
                 {footer.name}
               </Link>
             </li>
           ))}
         </ul>
-        <ul css={[rowCss, rowGapCss]}>
+        <ul css={[secondRowCss]}>
           {SECOND_ROW_FOOTER_INFOS.map(footer => (
             <li key={footer.name}>
               <Link css={linkCss} href={footer.href}>
-                {footer.name}
+                <span>{footer.name}</span>
+                <span>{footer.detail}</span>
               </Link>
             </li>
           ))}
@@ -46,32 +48,64 @@ const footerInfoWrapper = css`
   height: 218px;
   justify-content: center;
   align-items: center;
+
+  ${mediaQuery('mobile')} {
+    height: 167px;
+    width: 100%;
+  }
 `;
 
 const rowCss = css`
   display: flex;
   gap: 40px;
+
+  ${mediaQuery('mobile')} {
+    width: 100%;
+    gap: 0;
+    justify-content: space-between;
+  }
 `;
 
-const rowGapCss = css`
+const secondRowCss = css`
+  display: flex;
+  gap: 40px;
   margin-top: 16px;
+
+  span + span {
+    margin-left: 12px;
+  }
+  ${mediaQuery('mobile')} {
+    width: 100%;
+    gap: 0;
+    justify-content: space-between;
+    margin-top: 8px;
+
+    span + span {
+      margin-left: 16px;
+    }
+  }
+`;
+
+const linkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+  color: ${theme.colors.gray100};
+
+  ${mediaQuery('mobile')} {
+    font-size: 11px;
+  }
 `;
 
-const linkCss = css`
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 25.2px; /* 140% */
-  letter-spacing: -0.18px;
-  color: ${colors.gray100};
+const strongLinkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.subTitle2};
 `;
 
-const copyrightCss = css`
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 25.2px; /* 140% */
-  letter-spacing: -0.18px;
-  color: ${colors.gray200};
+const copyrightCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
+  color: ${theme.colors.gray200};
   margin-top: 40px;
+
+  ${mediaQuery('mobile')} {
+    font-size: 11px;
+    margin-top: 24px;
+  }
 `;
diff --git a/src/components/GNB/GNB.tsx b/src/components/GNB/GNB.tsx
index dc1d3932..749c6cf2 100644
--- a/src/components/GNB/GNB.tsx
+++ b/src/components/GNB/GNB.tsx
@@ -1,17 +1,19 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { css } from '@emotion/react';
+import { css, Theme } from '@emotion/react';
 
 import { Button } from '~/components/Button';
+import { MenuIcon } from '~/components/Icons';
 import { GNB_MENU_NAME, GNBMenu } from '~/constant/gnb';
 import { colors } from '~/styles/colors';
+import { mediaQuery } from '~/styles/media';
 
 const LOGO_IMAGE = `/images/logo.png`;
 
 function ApplyButton({ menu }: { menu: GNBMenu }) {
   return (
-    <Button css={applyButtonCss}>
+    <Button>
       <Link css={linkCss} href={menu.href}>
         {menu.name}
       </Link>
@@ -32,7 +34,7 @@ export function GNB() {
       <nav css={navCss}>
         <div css={navWrapperCss}>
           <Link href={'/'}>
-            {<Image src={LOGO_IMAGE} alt="로고 이미지" width={240} height={30} />}
+            {<Image src={LOGO_IMAGE} alt="로고 이미지" width={154} height={18.9} />}
           </Link>
           <ul css={menuContainerCss}>
             {GNB_MENU_NAME.map(menu => (
@@ -47,6 +49,9 @@ export function GNB() {
               </li>
             ))}
           </ul>
+          <div css={mobileMenuContainerCss}>
+            <MenuIcon />
+          </div>
         </div>
       </nav>
       <div css={blankCss} />
@@ -57,7 +62,7 @@ export function GNB() {
 const navCss = css`
   background-color: ${colors.black800};
   position: fixed;
-  padding: 0 20px;
+  padding: 20px 32px;
   top: 0;
   left: 0;
   z-index: 9998;
@@ -66,7 +71,7 @@ const navCss = css`
 
 const blankCss = css`
   width: 100vw;
-  height: 72px;
+  height: 82px;
 `;
 
 const navWrapperCss = css`
@@ -74,35 +79,38 @@ const navWrapperCss = css`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 72px;
   margin: 0 auto;
 `;
 
 const menuContainerCss = css`
   display: flex;
-  gap: 60px;
+  gap: 32px;
+
+  ${mediaQuery('mobile')} {
+    display: none;
+  }
 `;
 
-const menuCss = css`
-  margin: auto 0;
+const mobileMenuContainerCss = css`
+  display: none;
+
+  ${mediaQuery('mobile')} {
+    display: block;
+  }
 `;
 
-const activeLinkCss = css`
-  color: ${colors.yellow500};
+const menuCss = css`
+  margin: auto 0;
 `;
 
-const inActiveLinkCss = css`
-  color: ${colors.white};
+const activeLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.yellow500};
 `;
 
-const linkCss = css`
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 150%; /* 30px */
-  letter-spacing: -0.2px;
+const inActiveLinkCss = (theme: Theme) => css`
+  color: ${theme.colors.white};
 `;
 
-const applyButtonCss = css`
-  background-color: ${colors.yellow500};
-  color: ${colors.black800};
+const linkCss = (theme: Theme) => css`
+  ${theme.typos.pretendard.body1};
 `;
diff --git a/src/components/Icons/MenuIcon.tsx b/src/components/Icons/MenuIcon.tsx
new file mode 100644
index 00000000..287ac367
--- /dev/null
+++ b/src/components/Icons/MenuIcon.tsx
@@ -0,0 +1,17 @@
+import { Props, Svg } from '~/components/Icons/Svg';
+
+export function MenuIcon({ color = '#fff', ...props }: Props) {
+  return (
+    <Svg width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
+      <mask id="mask0_1209_1514" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+        <rect width="32" height="32" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_1209_1514)">
+        <path
+          d="M4 24V21.3333H28V24H4ZM4 17.3333V14.6667H28V17.3333H4ZM4 10.6667V8H28V10.6667H4Z"
+          fill={color}
+        />
+      </g>
+    </Svg>
+  );
+}
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index b4bb13b3..cd267b37 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -1 +1,2 @@
 export { ArrowIcon } from './ArrowIcon';
+export { MenuIcon } from './MenuIcon';
diff --git a/src/components/Journey/Journey.stories.tsx b/src/components/Journey/Journey.stories.tsx
deleted file mode 100644
index a6d1e938..00000000
--- a/src/components/Journey/Journey.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Journey } from './index';
-
-const meta: Meta<typeof Journey> = {
-  title: 'components/Journey',
-  component: Journey,
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Journey>;
-
-export const Primary: Story = {
-  render: () => (
-    <div
-      css={theme => ({
-        backgroundColor: theme.colors.black800,
-      })}
-    >
-      <Journey />
-    </div>
-  ),
-};
diff --git a/src/components/Journey/index.tsx b/src/components/Journey/index.tsx
deleted file mode 100644
index 49f50f0b..00000000
--- a/src/components/Journey/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Journey } from './Journey';
diff --git a/src/components/Journey/Journey.tsx b/src/components/Main/Journey.tsx
similarity index 100%
rename from src/components/Journey/Journey.tsx
rename to src/components/Main/Journey.tsx
diff --git a/src/components/RecruitEntrance/RecruitEntrance.tsx b/src/components/Main/RecruitEntrance.tsx
similarity index 100%
rename from src/components/RecruitEntrance/RecruitEntrance.tsx
rename to src/components/Main/RecruitEntrance.tsx
diff --git a/src/components/Main/RecruitTextSection.tsx b/src/components/Main/RecruitTextSection.tsx
new file mode 100644
index 00000000..4b8b84d8
--- /dev/null
+++ b/src/components/Main/RecruitTextSection.tsx
@@ -0,0 +1,36 @@
+import { css, Theme } from '@emotion/react';
+
+import { Button } from '~/components/Button';
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function RecruitTextSection() {
+  return (
+    <section css={[commonLayoutCss, layoutCss]}>
+      <h1>
+        서비스 런칭부터 운영까지 <br />
+        열정적인 여정에 지금 합류하세요
+      </h1>
+      <Button>14기 지원하기</Button>
+    </section>
+  );
+}
+
+const layoutCss = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+
+  h1 {
+    text-align: center;
+    color: ${theme.colors.white};
+    ${theme.typos.decimal.title2};
+  }
+
+  ${mediaQuery('mobile')} {
+    h1 {
+      font-size: 20px;
+    }
+  }
+`;
diff --git a/src/components/Main/SignImageSection.tsx b/src/components/Main/SignImageSection.tsx
new file mode 100644
index 00000000..83a8e1ea
--- /dev/null
+++ b/src/components/Main/SignImageSection.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function SignImageSection() {
+  return (
+    <section css={[commonLayoutCss, layoutCss]}>
+      <Image src="/images/sign/main.png" fill alt="DPM 14th" />
+    </section>
+  );
+}
+
+const layoutCss = css`
+  position: relative;
+  width: 100%;
+  height: 356px;
+  img {
+    width: 100%;
+    object-fit: contain;
+  }
+
+  ${mediaQuery('tablet')} {
+    height: 262px;
+  }
+  ${mediaQuery('mobile')} {
+    height: 122px;
+  }
+`;
diff --git a/src/components/Main/index.tsx b/src/components/Main/index.tsx
new file mode 100644
index 00000000..87c9e233
--- /dev/null
+++ b/src/components/Main/index.tsx
@@ -0,0 +1,2 @@
+export { RecruitTextSection } from './RecruitTextSection';
+export { SignImageSection } from './SignImageSection';
diff --git a/src/components/RecruitEntrance/RecruitEntrance.stories.tsx b/src/components/RecruitEntrance/RecruitEntrance.stories.tsx
deleted file mode 100644
index e2744b94..00000000
--- a/src/components/RecruitEntrance/RecruitEntrance.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { RecruitEntrance } from './index';
-
-const meta: Meta<typeof RecruitEntrance> = {
-  title: 'components/RecruitEntrance',
-  component: RecruitEntrance,
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof RecruitEntrance>;
-
-export const Primary: Story = {
-  render: () => (
-    <div css={{ backgroundColor: 'black' }}>
-      <RecruitEntrance />
-    </div>
-  ),
-};
diff --git a/src/components/RecruitEntrance/index.tsx b/src/components/RecruitEntrance/index.tsx
deleted file mode 100644
index 71abcb28..00000000
--- a/src/components/RecruitEntrance/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { RecruitEntrance } from './RecruitEntrance';
diff --git a/src/constant/footer.ts b/src/constant/footer.ts
index f4d9d981..227b3aa7 100644
--- a/src/constant/footer.ts
+++ b/src/constant/footer.ts
@@ -17,6 +17,6 @@ export const FIRST_ROW_FOOTER_INFOS = [
 ];
 
 export const SECOND_ROW_FOOTER_INFOS = [
-  { name: 'Kakao channel @depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
-  { name: 'E-mail depromeet@gmail', href: DEPROMEET_EMAIL },
+  { name: 'Kakao channel', detail: '@depromeet', href: DEPROMEET_KAKAO_PLUS_FRIEND },
+  { name: 'E-mail', detail: 'depromeet@gmail', href: DEPROMEET_EMAIL },
 ];
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ebbeb556..bbeb2671 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,9 @@
 import { css, Theme } from '@emotion/react';
 
-import { Journey } from '~/components/Journey';
-import { RecruitEntrance } from '~/components/RecruitEntrance';
+import { FAQ } from '~/components/FAQ';
+import { RecruitTextSection, SignImageSection } from '~/components/Main';
+import { Journey } from '~/components/Main/Journey';
+import { RecruitEntrance } from '~/components/Main/RecruitEntrance';
 import { ScheduleSection } from '~/components/ScheduleSection';
 import { SectionTitle } from '~/components/SectionTitle';
 import { SEO } from '~/components/SEO';
@@ -23,6 +25,11 @@ export default function Root() {
             <ScheduleSection {...MEMBER_SCHEDULE} />
             <ScheduleSection {...SESSION_SCHEDULES} />
           </section>
+          <section>
+            <FAQ />
+          </section>
+          <SignImageSection />
+          <RecruitTextSection />
         </div>
       </main>
     </>