diff --git a/client/src/pages/MainPage/MainPage.style.ts b/client/src/pages/MainPage/MainPage.style.ts
new file mode 100644
index 000000000..072466744
--- /dev/null
+++ b/client/src/pages/MainPage/MainPage.style.ts
@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const mainContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+});
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
index ccd0439fa..911f32457 100644
--- a/client/src/pages/MainPage/MainPage.tsx
+++ b/client/src/pages/MainPage/MainPage.tsx
@@ -1,45 +1,17 @@
-import {css} from '@emotion/react';
-
 import useAmplitude from '@hooks/useAmplitude';
 
 import Nav from './Nav/Nav';
-import MainSection from './Section/MainSection';
-import DescriptionSection from './Section/DescriptionSection';
-import FeatureSection from './Section/FeatureSection';
-import CreatorSection from './Section/CreatorSection';
+import {MainSection} from './Section/MainSection';
+import {DescriptionSection} from './Section/DescriptionSection';
+import {FeatureSection} from './Section/FeatureSection';
+import {mainContainer} from './MainPage.style';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
 
   return (
-    <div
-      css={css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: '100%',
-      })}
-    >
-      <div
-        css={css({
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 10,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          padding: '1rem 0',
-          width: '100%',
-          backgroundColor: 'white',
-        })}
-      >
-        <div css={css({maxWidth: '1200px', width: '100%'})}>
-          <Nav trackStartCreateEvent={trackStartCreateEvent} />
-        </div>
-      </div>
+    <div css={mainContainer}>
+      <Nav trackStartCreateEvent={trackStartCreateEvent} />
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
       <FeatureSection />
diff --git a/client/src/pages/MainPage/Nav/Nav.style.ts b/client/src/pages/MainPage/Nav/Nav.style.ts
index 89589e825..cdb8eeab6 100644
--- a/client/src/pages/MainPage/Nav/Nav.style.ts
+++ b/client/src/pages/MainPage/Nav/Nav.style.ts
@@ -1,25 +1,27 @@
 import {css} from '@emotion/react';
 
-import {Theme} from '@components/Design/theme/theme.type';
-
-export const navStyle = (theme: Theme) =>
-  css({
-    position: 'fixed',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '1rem',
+export const navFixedStyle = css({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 10,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: '1rem 0',
+  width: '100%',
+  backgroundColor: 'white',
+});
 
-    top: '0',
-    width: '100%',
-    maxWidth: '768px',
-    zIndex: theme.zIndex.navBackgroundColor,
-    height: '4rem',
-    backgroundColor: 'white',
-  });
+export const navWrapperStyle = css({
+  maxWidth: '1200px',
+  width: '100%',
+});
 
-export const logoStyle = css({
+export const navStyle = css({
   display: 'flex',
-  gap: '0.5rem',
+  justifyContent: 'space-between',
   alignItems: 'center',
+  height: '2.5rem',
 });
diff --git a/client/src/pages/MainPage/Nav/Nav.tsx b/client/src/pages/MainPage/Nav/Nav.tsx
index 4e4d58806..3e223a5d5 100644
--- a/client/src/pages/MainPage/Nav/Nav.tsx
+++ b/client/src/pages/MainPage/Nav/Nav.tsx
@@ -4,6 +4,8 @@ import {Button, Text, Icon, TopNav, IconButton} from '@HDesign/index';
 
 import {ROUTER_URLS} from '@constants/routerUrls';
 
+import {navFixedStyle, navStyle, navWrapperStyle} from './Nav.style';
+
 type NavProps = {
   trackStartCreateEvent: () => void;
 };
@@ -17,21 +19,25 @@ const Nav = ({trackStartCreateEvent}: NavProps) => {
   };
 
   return (
-    <header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '2.5rem'}}>
-      <TopNav>
-        <TopNav.Item routePath="/">
-          <IconButton variants="none" aria-label="행동대장 로고">
-            <Icon iconType="heundeut" />
-          </IconButton>
-        </TopNav.Item>
-        <TopNav.Item routePath="/">
-          <Text size="subTitle">행동대장</Text>
-        </TopNav.Item>
-      </TopNav>
-      <Button size="medium" variants="tertiary" onClick={StartCreateEvent} style={{marginRight: '1rem'}}>
-        정산 시작하기
-      </Button>
-    </header>
+    <div css={navFixedStyle}>
+      <div css={navWrapperStyle}>
+        <header css={navStyle}>
+          <TopNav>
+            <TopNav.Item routePath="/">
+              <IconButton variants="none" aria-label="행동대장 로고">
+                <Icon iconType="heundeut" />
+              </IconButton>
+            </TopNav.Item>
+            <TopNav.Item routePath="/">
+              <Text size="subTitle">행동대장</Text>
+            </TopNav.Item>
+          </TopNav>
+          <Button size="medium" variants="tertiary" onClick={StartCreateEvent} style={{marginRight: '1rem'}}>
+            정산 시작하기
+          </Button>
+        </header>
+      </div>
+    </div>
   );
 };
 
diff --git a/client/src/pages/MainPage/Nav/index.ts b/client/src/pages/MainPage/Nav/index.ts
new file mode 100644
index 000000000..8f9ae28e7
--- /dev/null
+++ b/client/src/pages/MainPage/Nav/index.ts
@@ -0,0 +1 @@
+export {default as Nav} from './Nav';
diff --git a/client/src/pages/MainPage/Section/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection.tsx
deleted file mode 100644
index 8af204140..000000000
--- a/client/src/pages/MainPage/Section/DescriptionSection.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import {css} from '@emotion/react';
-
-import {useTheme} from '@components/Design/theme/HDesignProvider';
-import Text from '@HDesign/components/Text/Text';
-
-const DescriptionSection = () => {
-  const {theme} = useTheme();
-
-  return (
-    <div
-      css={css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-        width: '100vw',
-        gap: '1.5rem',
-        padding: '3rem 1.5rem',
-        backgroundColor: 'white',
-      })}
-    >
-      <img
-        css={css({
-          width: '10rem',
-          '@media (min-width: 768px)': {
-            minWidth: '10rem',
-            maxWidth: '15rem',
-            width: '100%',
-          },
-          '@media (min-width: 1600px)': {
-            minWidth: '15rem',
-            maxWidth: '20rem',
-            width: '100%',
-          },
-        })}
-        src={`${process.env.IMAGE_URL}/standingDog.svg`}
-      />
-
-      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
-        행동대장을 준비했어요
-          `}</Text>
-      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true} textColor="gray">{`주환이가 먼저 집에 가도
-        소연이가 늦게 도착해도
-        건상이가 술을 마시지 않아도
-          `}</Text>
-      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`간편하게 정산할 수 있어요`}</Text>
-    </div>
-  );
-};
-
-export default DescriptionSection;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts
new file mode 100644
index 000000000..4b21b4ac9
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.style.ts
@@ -0,0 +1,27 @@
+import {css} from '@emotion/react';
+
+export const descriptionSectionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+  width: '100vw',
+  gap: '1.5rem',
+  padding: '3rem 1.5rem',
+  backgroundColor: 'white',
+});
+
+export const imgStyle = css({
+  width: '10rem',
+  '@media (min-width: 768px)': {
+    minWidth: '10rem',
+    maxWidth: '15rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '15rem',
+    maxWidth: '20rem',
+    width: '100%',
+  },
+});
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
new file mode 100644
index 000000000..9b9cb37c4
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/DescriptionSection.tsx
@@ -0,0 +1,21 @@
+import Text from '@HDesign/components/Text/Text';
+
+import {descriptionSectionStyle, imgStyle} from './DescriptionSection.style';
+
+const DescriptionSection = () => {
+  return (
+    <div css={descriptionSectionStyle}>
+      <img css={imgStyle} src={`${process.env.IMAGE_URL}/standingDog.svg`} alt="행댕이" />
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`행동대장들을 위해
+        행동대장을 준비했어요
+          `}</Text>
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true} textColor="gray">{`주환이가 먼저 집에 가도
+        소연이가 늦게 도착해도
+        건상이가 술을 마시지 않아도
+          `}</Text>
+      <Text style={{textAlign: 'center'}} size="subTitle" responsive={true}>{`간편하게 정산할 수 있어요`}</Text>
+    </div>
+  );
+};
+
+export default DescriptionSection;
diff --git a/client/src/pages/MainPage/Section/DescriptionSection/index.ts b/client/src/pages/MainPage/Section/DescriptionSection/index.ts
new file mode 100644
index 000000000..ce78c7b93
--- /dev/null
+++ b/client/src/pages/MainPage/Section/DescriptionSection/index.ts
@@ -0,0 +1 @@
+export {default as DescriptionSection} from './DescriptionSection';
diff --git a/client/src/pages/MainPage/Section/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection.tsx
deleted file mode 100644
index cf5e50282..000000000
--- a/client/src/pages/MainPage/Section/FeatureSection.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-import {css} from '@emotion/react';
-
-import Text from '@components/Design/components/Text/Text';
-
-const FeatureSection = () => {
-  return (
-    <>
-      <div
-        css={css({
-          display: 'flex',
-          height: '100vh',
-          width: '100vw',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#FFA5B8',
-        })}
-      >
-        <div
-          css={css({
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: '0 4rem',
-            alignItems: 'center',
-            gap: '2rem',
-            maxWidth: '1200px',
-            '@media (max-width: 1024px)': {
-              flexDirection: 'column-reverse',
-            },
-            '@media (min-width: 1200px)': {
-              padding: '0',
-            },
-          })}
-        >
-          <div
-            css={css({
-              display: 'flex',
-              width: 'max-content',
-              flexDirection: 'column',
-              alignItems: 'start',
-              gap: '1rem',
-            })}
-          >
-            <Text size="subTitle" responsive={true}>
-              누구와도 간편하게 정산하세요
-            </Text>
-            <Text size="body" responsive={true}>
-              {`연락처가 없어도 링크만 보내면 끝!,
-          모르는 사람과도 손쉽게 정산할 수 있어요.
-          복잡한 절차 없이, 빠르게 정산을 마치세요.`}
-            </Text>
-          </div>
-          <img
-            src={`${process.env.IMAGE_URL}/feature1.svg`}
-            css={css({
-              minWidth: '15rem',
-              maxWidth: '25rem',
-              width: '100%',
-              '@media (min-width: 1024px)': {
-                minWidth: '20rem',
-                maxWidth: '25rem',
-                width: '100%',
-              },
-              '@media (min-width: 1600px)': {
-                minWidth: '25rem',
-                maxWidth: '30rem',
-                width: '100%',
-              },
-            })}
-          />
-        </div>
-      </div>
-
-      <div
-        css={css({
-          display: 'flex',
-          height: '100vh',
-          width: '100vw',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#ffffff',
-        })}
-      >
-        <div
-          css={css({
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: '0 4rem',
-            alignItems: 'center',
-            gap: '2rem',
-            maxWidth: '1200px',
-            '@media (max-width: 1024px)': {
-              flexDirection: 'column',
-            },
-            '@media (min-width: 1200px)': {
-              padding: '0',
-            },
-          })}
-        >
-          <img
-            src={`${process.env.IMAGE_URL}/feature2.svg`}
-            css={css({
-              minWidth: '15rem',
-              maxWidth: '25rem',
-              width: '100%',
-              '@media (min-width: 768px)': {
-                minWidth: '20rem',
-                maxWidth: '25rem',
-                width: '100%',
-              },
-              '@media (min-width: 1600px)': {
-                minWidth: '25rem',
-                maxWidth: '30rem',
-                width: '100%',
-              },
-            })}
-          />
-          <div
-            css={css({
-              display: 'flex',
-              width: 'max-content',
-              flexDirection: 'column',
-              alignItems: 'start',
-              gap: '1rem',
-            })}
-          >
-            <Text size="subTitle" responsive={true}>
-              계산은 저희가 알아서 해드려요
-            </Text>
-            <Text size="body" responsive={true}>
-              {`인원이나 메뉴에 따라 직접 계산할 필요 없어요.
-              지출 내역만 기록하면 알아서 나눠 계산해 드려요.
-              복잡한 계산은 이제 행동대장에게 맡기세요!`}
-            </Text>
-          </div>
-        </div>
-      </div>
-
-      <div
-        css={css({
-          display: 'flex',
-          height: '100vh',
-          width: '100vw',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#DFC1FF',
-        })}
-      >
-        <div
-          css={css({
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: '0 4rem',
-            alignItems: 'center',
-            gap: '2rem',
-            maxWidth: '1200px',
-            '@media (max-width: 1024px)': {
-              flexDirection: 'column-reverse',
-            },
-            '@media (min-width: 1200px)': {
-              padding: '0',
-            },
-          })}
-        >
-          <div
-            css={css({
-              display: 'flex',
-              width: 'max-content',
-              flexDirection: 'column',
-              alignItems: 'start',
-              gap: '1rem',
-            })}
-          >
-            <Text size="subTitle" responsive={true}>
-              입금 확인도 걱정 없어요
-            </Text>
-            <Text size="body" responsive={true}>
-              {`매번 누가 입금했는지 따로 기억할 필요 없어요.
-            참여자 관리 메뉴를 통해 더 이상 놓치는 사람 없이
-            간편하게 관리할 수 있어요.`}
-            </Text>
-          </div>
-          <img
-            src={`${process.env.IMAGE_URL}/feature3.svg`}
-            css={css({
-              minWidth: '20rem',
-              maxWidth: '30rem',
-              width: '100%',
-              '@media (min-width: 768px)': {
-                minWidth: '25rem',
-                maxWidth: '30rem',
-                width: '100%',
-              },
-              '@media (min-width: 1600px)': {
-                minWidth: '30rem',
-                maxWidth: '35rem',
-                width: '100%',
-              },
-            })}
-          />
-        </div>
-      </div>
-
-      <div
-        css={css({
-          display: 'flex',
-          height: '100vh',
-          width: '100vw',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#ffffff',
-        })}
-      >
-        <div
-          css={css({
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: '0 4rem',
-            alignItems: 'center',
-            gap: '2rem',
-            maxWidth: '1200px',
-            '@media (max-width: 1024px)': {
-              flexDirection: 'column',
-            },
-            '@media (min-width: 1200px)': {
-              padding: '0',
-            },
-          })}
-        >
-          <img
-            src={`${process.env.IMAGE_URL}/feature4.svg`}
-            css={css({
-              minWidth: '20rem',
-              maxWidth: '30rem',
-              width: '100%',
-              '@media (min-width: 768px)': {
-                minWidth: '25rem',
-                maxWidth: '30rem',
-                width: '100%',
-              },
-              '@media (min-width: 1600px)': {
-                minWidth: '30rem',
-                maxWidth: '35rem',
-                width: '100%',
-              },
-            })}
-          />
-          <div
-            css={css({
-              display: 'flex',
-              width: 'max-content',
-              flexDirection: 'column',
-              alignItems: 'start',
-              gap: '1rem',
-            })}
-          >
-            <Text size="subTitle" responsive={true}>
-              몇 번의 클릭으로 송금 완료!
-            </Text>
-            <Text size="body" responsive={true}>
-              {`계좌번호나 금액을 일일이 확인하지 않아도 돼요.
-            클릭 몇 번으로 바로 송금할 수 있어요.
-            언제 어디서든 쉽게 정산을 끝내세요.`}
-            </Text>
-          </div>
-        </div>
-      </div>
-
-      <div
-        css={css({
-          display: 'flex',
-          height: '100vh',
-          width: '100vw',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          backgroundColor: '#C1CFFF',
-        })}
-      >
-        <div
-          css={css({
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            width: '100%',
-            padding: '0 4rem',
-            alignItems: 'center',
-            gap: '2rem',
-            maxWidth: '1200px',
-            '@media (max-width: 1024px)': {
-              flexDirection: 'column-reverse',
-            },
-            '@media (min-width: 1200px)': {
-              padding: '0',
-            },
-          })}
-        >
-          <div
-            css={css({
-              display: 'flex',
-              width: 'max-content',
-              flexDirection: 'column',
-              alignItems: 'start',
-              gap: '1rem',
-            })}
-          >
-            <Text size="subTitle" responsive={true}>
-              추억도 간편하게 공유하세요
-            </Text>
-            <Text size="body" responsive={true}>
-              {`모임에서 지출한 내역은 물론,
-            그날의 사진과 추억도 함께 나눠보세요.
-            정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
-            </Text>
-          </div>
-          <img
-            src={`${process.env.IMAGE_URL}/feature5.svg`}
-            css={css({
-              minWidth: '20rem',
-              maxWidth: '25rem',
-              width: '100%',
-              '@media (min-width: 768px)': {
-                minWidth: '25rem',
-                maxWidth: '30rem',
-                width: '100%',
-              },
-              '@media (min-width: 1600px)': {
-                minWidth: '30rem',
-                maxWidth: '35rem',
-                width: '100%',
-              },
-            })}
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default FeatureSection;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts
new file mode 100644
index 000000000..d847764e8
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#ffffff',
+});
+
+export const articleStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 4rem',
+  alignItems: 'center',
+  gap: '2rem',
+  maxWidth: '1200px',
+  '@media (max-width: 1024px)': {
+    flexDirection: 'column',
+  },
+  '@media (min-width: 1200px)': {
+    padding: '0',
+  },
+});
+
+export const imageStyle = css({
+  minWidth: '15rem',
+  maxWidth: '25rem',
+  width: '100%',
+  '@media (min-width: 768px)': {
+    minWidth: '20rem',
+    maxWidth: '25rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '25rem',
+    maxWidth: '30rem',
+    width: '100%',
+  },
+});
+
+export const textContainerStyle = css({
+  display: 'flex',
+  width: 'max-content',
+  flexDirection: 'column',
+  alignItems: 'start',
+  gap: '1rem',
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
new file mode 100644
index 000000000..f3925e972
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/AutoCalculate.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './AutoCalculate.style';
+
+const AutoCalculate = () => {
+  return (
+    <section css={sectionStyle}>
+      <article css={articleStyle}>
+        <img src={`${process.env.IMAGE_URL}/feature2.svg`} css={imageStyle} />
+        <div css={textContainerStyle}>
+          <Text size="subTitle" responsive={true}>
+            계산은 저희가 알아서 해드려요
+          </Text>
+          <Text size="body" responsive={true}>
+            {`인원이나 메뉴에 따라 직접 계산할 필요 없어요.
+              지출 내역만 기록하면 알아서 나눠 계산해 드려요.
+              복잡한 계산은 이제 행동대장에게 맡기세요!`}
+          </Text>
+        </div>
+      </article>
+    </section>
+  );
+};
+
+export default AutoCalculate;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts
new file mode 100644
index 000000000..cd32fe5b8
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/AutoCalculate/index.ts
@@ -0,0 +1 @@
+export {default as AutoCalculate} from './AutoCalculate';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts
new file mode 100644
index 000000000..08e4619c0
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#DFC1FF',
+});
+
+export const articleStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 4rem',
+  alignItems: 'center',
+  gap: '2rem',
+  maxWidth: '1200px',
+  '@media (max-width: 1024px)': {
+    flexDirection: 'column-reverse',
+  },
+  '@media (min-width: 1200px)': {
+    padding: '0',
+  },
+});
+
+export const textContainerStyle = css({
+  display: 'flex',
+  width: 'max-content',
+  flexDirection: 'column',
+  alignItems: 'start',
+  gap: '1rem',
+});
+
+export const imageStyle = css({
+  minWidth: '20rem',
+  maxWidth: '30rem',
+  width: '100%',
+  '@media (min-width: 768px)': {
+    minWidth: '25rem',
+    maxWidth: '30rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '30rem',
+    maxWidth: '35rem',
+    width: '100%',
+  },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
new file mode 100644
index 000000000..3f9e06d59
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/CheckDeposit.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './CheckDeposit.style';
+
+const CheckDeposit = () => {
+  return (
+    <section css={sectionStyle}>
+      <article css={articleStyle}>
+        <div css={textContainerStyle}>
+          <Text size="subTitle" responsive={true}>
+            입금 확인도 걱정 없어요
+          </Text>
+          <Text size="body" responsive={true}>
+            {`매번 누가 입금했는지 따로 기억할 필요 없어요.
+            참여자 관리 메뉴를 통해 더 이상 놓치는 사람 없이
+            간편하게 관리할 수 있어요.`}
+          </Text>
+        </div>
+        <img src={`${process.env.IMAGE_URL}/feature3.svg`} css={imageStyle} />
+      </article>
+    </section>
+  );
+};
+
+export default CheckDeposit;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts
new file mode 100644
index 000000000..abed95db9
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/CheckDeposit/index.ts
@@ -0,0 +1 @@
+export {default as CheckDeposit} from './CheckDeposit';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
new file mode 100644
index 000000000..4f2b3cac2
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/FeatureSection.tsx
@@ -0,0 +1,19 @@
+import {SimpleShare} from './SimpleShare';
+import {AutoCalculate} from './AutoCalculate';
+import {CheckDeposit} from './CheckDeposit';
+import {SimpleTransfer} from './SimpleTransfer';
+import {RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
+
+const FeatureSection = () => {
+  return (
+    <>
+      <SimpleShare />
+      <AutoCalculate />
+      <CheckDeposit />
+      <SimpleTransfer />
+      <RecordMemoryWithPhoto />
+    </>
+  );
+};
+
+export default FeatureSection;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.style.ts b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.style.ts
new file mode 100644
index 000000000..42f4781ae
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#C1CFFF',
+});
+
+export const articleStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 4rem',
+  alignItems: 'center',
+  gap: '2rem',
+  maxWidth: '1200px',
+  '@media (max-width: 1024px)': {
+    flexDirection: 'column-reverse',
+  },
+  '@media (min-width: 1200px)': {
+    padding: '0',
+  },
+});
+
+export const textContainerStyle = css({
+  display: 'flex',
+  width: 'max-content',
+  flexDirection: 'column',
+  alignItems: 'start',
+  gap: '1rem',
+});
+
+export const imageStyle = css({
+  minWidth: '20rem',
+  maxWidth: '25rem',
+  width: '100%',
+  '@media (min-width: 768px)': {
+    minWidth: '25rem',
+    maxWidth: '30rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '30rem',
+    maxWidth: '35rem',
+    width: '100%',
+  },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx
new file mode 100644
index 000000000..4af4b190a
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/RecordMemoryWithPhoto.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './RecordMemoryWithPhoto.style';
+
+const RecordMemoryWithPhoto = () => {
+  return (
+    <section css={sectionStyle}>
+      <article css={articleStyle}>
+        <div css={textContainerStyle}>
+          <Text size="subTitle" responsive={true}>
+            추억도 간편하게 공유하세요
+          </Text>
+          <Text size="body" responsive={true}>
+            {`모임에서 지출한 내역은 물론,
+        그날의 사진과 추억도 함께 나눠보세요.
+        정산은 투명하게, 추억은 오래오래 간직할 수 있어요.`}
+          </Text>
+        </div>
+        <img src={`${process.env.IMAGE_URL}/feature5.svg`} css={imageStyle} />
+      </article>
+    </section>
+  );
+};
+
+export default RecordMemoryWithPhoto;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts
new file mode 100644
index 000000000..d3a8ff8de
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/RecordMemoryWithPhoto/index.ts
@@ -0,0 +1 @@
+export {default as RecordMemoryWithPhoto} from './RecordMemoryWithPhoto';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts
new file mode 100644
index 000000000..9d3623870
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#FFA5B8',
+});
+
+export const articleStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 4rem',
+  alignItems: 'center',
+  gap: '2rem',
+  maxWidth: '1200px',
+  '@media (max-width: 1024px)': {
+    flexDirection: 'column-reverse',
+  },
+  '@media (min-width: 1200px)': {
+    padding: '0',
+  },
+});
+
+export const textContainerStyle = css({
+  display: 'flex',
+  width: 'max-content',
+  flexDirection: 'column',
+  alignItems: 'start',
+  gap: '1rem',
+});
+
+export const imageStyle = css({
+  minWidth: '15rem',
+  maxWidth: '25rem',
+  width: '100%',
+  '@media (min-width: 1024px)': {
+    minWidth: '20rem',
+    maxWidth: '25rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '25rem',
+    maxWidth: '30rem',
+    width: '100%',
+  },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
new file mode 100644
index 000000000..472232dae
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/SimpleShare.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleShare.style';
+
+const SimpleAccount = () => {
+  return (
+    <section css={sectionStyle}>
+      <article css={articleStyle}>
+        <div css={textContainerStyle}>
+          <Text size="subTitle" responsive={true}>
+            누구와도 간편하게 정산하세요
+          </Text>
+          <Text size="body" responsive={true}>
+            {`연락처가 없어도 링크만 보내면 끝!,
+          모르는 사람과도 손쉽게 정산할 수 있어요.
+          복잡한 절차 없이, 빠르게 정산을 마치세요.`}
+          </Text>
+        </div>
+        <img src={`${process.env.IMAGE_URL}/feature1.svg`} css={imageStyle} />
+      </article>
+    </section>
+  );
+};
+
+export default SimpleAccount;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts
new file mode 100644
index 000000000..b1e58b134
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleShare/index.ts
@@ -0,0 +1 @@
+export {default as SimpleShare} from './SimpleShare';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts
new file mode 100644
index 000000000..368328043
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.style.ts
@@ -0,0 +1,52 @@
+import {css} from '@emotion/react';
+
+export const sectionStyle = css({
+  display: 'flex',
+  height: '100vh',
+  width: '100vw',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '#ffffff',
+});
+
+export const articleStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  width: '100%',
+  padding: '0 4rem',
+  alignItems: 'center',
+  gap: '2rem',
+  maxWidth: '1200px',
+  '@media (max-width: 1024px)': {
+    flexDirection: 'column',
+  },
+  '@media (min-width: 1200px)': {
+    padding: '0',
+  },
+});
+
+export const textContainerStyle = css({
+  display: 'flex',
+  width: 'max-content',
+  flexDirection: 'column',
+  alignItems: 'start',
+  gap: '1rem',
+});
+
+export const imageStyle = css({
+  minWidth: '20rem',
+  maxWidth: '30rem',
+  width: '100%',
+  '@media (min-width: 768px)': {
+    minWidth: '25rem',
+    maxWidth: '30rem',
+    width: '100%',
+  },
+  '@media (min-width: 1600px)': {
+    minWidth: '30rem',
+    maxWidth: '35rem',
+    width: '100%',
+  },
+});
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
new file mode 100644
index 000000000..e6bb9c275
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/SimpleTransfer.tsx
@@ -0,0 +1,25 @@
+import {Text} from '@components/Design';
+
+import {articleStyle, imageStyle, sectionStyle, textContainerStyle} from './SimpleTransfer.style';
+
+const SimpleTransfer = () => {
+  return (
+    <section css={sectionStyle}>
+      <article css={articleStyle}>
+        <img src={`${process.env.IMAGE_URL}/feature4.svg`} css={imageStyle} />
+        <div css={textContainerStyle}>
+          <Text size="subTitle" responsive={true}>
+            몇 번의 클릭으로 송금 완료!
+          </Text>
+          <Text size="body" responsive={true}>
+            {`계좌번호나 금액을 일일이 확인하지 않아도 돼요.
+      클릭 몇 번으로 바로 송금할 수 있어요.
+      언제 어디서든 쉽게 정산을 끝내세요.`}
+          </Text>
+        </div>
+      </article>
+    </section>
+  );
+};
+
+export default SimpleTransfer;
diff --git a/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts
new file mode 100644
index 000000000..8e72d81cc
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/SimpleTransfer/index.ts
@@ -0,0 +1 @@
+export {default as SimpleTransfer} from './SimpleTransfer';
diff --git a/client/src/pages/MainPage/Section/FeatureSection/index.ts b/client/src/pages/MainPage/Section/FeatureSection/index.ts
new file mode 100644
index 000000000..baca9d1b1
--- /dev/null
+++ b/client/src/pages/MainPage/Section/FeatureSection/index.ts
@@ -0,0 +1 @@
+export {default as FeatureSection} from './FeatureSection';
diff --git a/client/src/pages/MainPage/Section/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection.tsx
deleted file mode 100644
index b4eaaff4e..000000000
--- a/client/src/pages/MainPage/Section/MainSection.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {css, keyframes} from '@emotion/react';
-import {useNavigate} from 'react-router-dom';
-
-import Button from '@HDesign/components/Button/Button';
-import Text from '@HDesign/components/Text/Text';
-
-import {Icon} from '@components/Design';
-
-import {ROUTER_URLS} from '@constants/routerUrls';
-
-type MainSectionProps = {
-  trackStartCreateEvent: () => void;
-};
-
-const MainSection = ({trackStartCreateEvent}: MainSectionProps) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    trackStartCreateEvent();
-    navigate(ROUTER_URLS.createEvent);
-  };
-
-  return (
-    <div
-      css={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        height: '100vh',
-        width: '100vw',
-      })}
-    >
-      <div
-        css={css({
-          position: 'fixed',
-          height: '100vh',
-          top: 0,
-          zIndex: -1,
-        })}
-      >
-        <img
-          css={css({
-            height: '100vh',
-            objectFit: 'cover',
-          })}
-          src={`${process.env.IMAGE_URL}/mainSectionBackground.png`}
-          alt=""
-        />
-      </div>
-      <div
-        css={css({
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          gap: '2rem',
-          padding: '1.5rem',
-          height: '100%',
-        })}
-      >
-        <Text css={animateWithDelay(0)} textColor="white" style={{textAlign: 'left'}} size="title">{`행동대장으로
-        간편하게 정산하세요
-        `}</Text>
-        <Button variants="tertiary" id="startCreateEvent" css={animateWithDelay(1)} size="large" onClick={handleClick}>
-          정산 시작하기
-        </Button>
-      </div>
-      <div
-        css={css({
-          position: 'absolute',
-          bottom: '2rem',
-          left: '50%',
-          animation: `${bounce} 2s infinite ease-in-out`,
-        })}
-      >
-        <Icon iconType="chevronDown" />
-      </div>
-    </div>
-  );
-};
-
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`;
-
-const slideIn = keyframes`
-  from {
-    transform: translateY(1rem);
-  }
-  to {
-    transform: translateY(0);
-  }
-`;
-
-const bounce = keyframes`
-  0%, 100% {
-    transform: translate(-50%, 0);
-  }
-  50% {
-    transform: translate(-50%, -1rem);
-  }
-`;
-
-const animateWithDelay = (delay: number) => css`
-  opacity: 0;
-  animation:
-    ${fadeIn} 1s ease-in-out ${delay}s forwards,
-    ${slideIn} 1s ease-in-out ${delay}s forwards;
-`;
-
-export default MainSection;
diff --git a/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts b/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts
new file mode 100644
index 000000000..8db38b97d
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/MainSection.style.ts
@@ -0,0 +1,71 @@
+import {css, keyframes} from '@emotion/react';
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+const slideIn = keyframes`
+  from {
+    transform: translateY(1rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+`;
+
+const bounce = keyframes`
+  0%, 100% {
+    transform: translate(-50%, 0);
+  }
+  50% {
+    transform: translate(-50%, -1rem);
+  }
+`;
+
+export const animateWithDelay = (delay: number) => css`
+  opacity: 0;
+  animation:
+    ${fadeIn} 1s ease-in-out ${delay}s forwards,
+    ${slideIn} 1s ease-in-out ${delay}s forwards;
+`;
+
+export const mainSectionStyle = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100vh',
+  width: '100vw',
+});
+
+export const backgroundStyle = css({
+  position: 'fixed',
+  height: '100vh',
+  top: 0,
+  zIndex: -1,
+});
+
+export const backgroundImageStyle = css({
+  height: '100vh',
+  objectFit: 'cover',
+});
+
+export const sectionStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '2rem',
+  padding: '1.5rem',
+  height: '100%',
+});
+
+export const chevronStyle = css({
+  position: 'absolute',
+  bottom: '2rem',
+  left: '50%',
+  animation: `${bounce} 2s infinite ease-in-out`,
+});
diff --git a/client/src/pages/MainPage/Section/MainSection/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
new file mode 100644
index 000000000..e6e476336
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
@@ -0,0 +1,51 @@
+import {useNavigate} from 'react-router-dom';
+
+import Button from '@HDesign/components/Button/Button';
+import Text from '@HDesign/components/Text/Text';
+
+import {Icon} from '@components/Design';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+import {
+  animateWithDelay,
+  backgroundImageStyle,
+  backgroundStyle,
+  chevronStyle,
+  mainSectionStyle,
+  sectionStyle,
+} from './MainSection.style';
+
+type MainSectionProps = {
+  trackStartCreateEvent: () => void;
+};
+
+const MainSection = ({trackStartCreateEvent}: MainSectionProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    trackStartCreateEvent();
+    navigate(ROUTER_URLS.createEvent);
+  };
+
+  return (
+    <div css={mainSectionStyle}>
+      <div css={backgroundStyle}>
+        <img css={backgroundImageStyle} src={`${process.env.IMAGE_URL}/mainSectionBackground.png`} alt="" />
+      </div>
+      <div css={sectionStyle}>
+        <Text css={animateWithDelay(0)} textColor="white" style={{textAlign: 'left'}} size="title">{`행동대장으로
+        간편하게 정산하세요
+        `}</Text>
+        <Button variants="tertiary" id="startCreateEvent" css={animateWithDelay(1)} size="large" onClick={handleClick}>
+          정산 시작하기
+        </Button>
+      </div>
+      <div css={chevronStyle}>
+        <Icon iconType="chevronDown" />
+      </div>
+    </div>
+  );
+};
+
+export default MainSection;
diff --git a/client/src/pages/MainPage/Section/MainSection/index.ts b/client/src/pages/MainPage/Section/MainSection/index.ts
new file mode 100644
index 000000000..aedde2c0f
--- /dev/null
+++ b/client/src/pages/MainPage/Section/MainSection/index.ts
@@ -0,0 +1 @@
+export {default as MainSection} from './MainSection';
diff --git a/client/src/pages/MainPage/Section/ReportSection.tsx b/client/src/pages/MainPage/Section/ReportSection.tsx
deleted file mode 100644
index cbf150b96..000000000
--- a/client/src/pages/MainPage/Section/ReportSection.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import {css} from '@emotion/react';
-
-import Text from '@components/Design/components/Text/Text';
-
-const ReportSection = () => {
-  return (
-    <div
-      css={css({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        padding: '3rem',
-        gap: '2rem',
-        width: '100%',
-        backgroundColor: 'white',
-      })}
-    >
-      <div css={css({display: 'flex', flexDirection: 'column', gap: '1rem'})}>
-        <Text size="subTitle">친구에게 링크를 공유하세요</Text>
-        <Text size="body" textColor="gray">
-          {`지출내역과 인원변동을 통해
-          금액은 자동으로 계산돼요`}
-        </Text>
-      </div>
-      <img src={`${process.env.IMAGE_URL}/memberReportMockup.svg`} />
-    </div>
-  );
-};
-
-export default ReportSection;