diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5c56ed18..6e99113a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -19,6 +19,8 @@ import Main from './pages/external/Main.jsx';
 import Intro from './pages/external/Intro.jsx';
 import Leaders from './pages/external/Leaders.jsx';
 import Portfolio from './pages/external/Portfolio.jsx';
+import MonthlyReport from './pages/external/MonthlyReport.jsx';
+import MonthlyReportDetail from './pages/external/MonthlyReportDetail.jsx';
 
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
@@ -31,6 +33,11 @@ function App() {
         <Route path="/main/intro" element={<Intro />} />
         <Route path="/main/leaders" element={<Leaders />} />
         <Route path="/main/portfolio" element={<Portfolio />} />
+        <Route path="/main/monthly-report" element={<MonthlyReport />} />
+        <Route
+          path="/main/monthly-report-detail"
+          element={<MonthlyReportDetail />}
+        />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<SignUp />} />
         <Route path="/oauth/success" element={<OAuthSuccess />} />
diff --git a/frontend/src/assets/external-detail-image.png b/frontend/src/assets/external/external-detail-image.png
similarity index 100%
rename from frontend/src/assets/external-detail-image.png
rename to frontend/src/assets/external/external-detail-image.png
diff --git a/frontend/src/assets/external-image.png b/frontend/src/assets/external/external-image.png
similarity index 100%
rename from frontend/src/assets/external-image.png
rename to frontend/src/assets/external/external-image.png
diff --git a/frontend/src/assets/external/monthly-report.png b/frontend/src/assets/external/monthly-report.png
new file mode 100644
index 00000000..bf865b42
Binary files /dev/null and b/frontend/src/assets/external/monthly-report.png differ
diff --git a/frontend/src/assets/external/report/content1.png b/frontend/src/assets/external/report/content1.png
new file mode 100644
index 00000000..a44fdd22
Binary files /dev/null and b/frontend/src/assets/external/report/content1.png differ
diff --git a/frontend/src/assets/external/report/content10.png b/frontend/src/assets/external/report/content10.png
new file mode 100644
index 00000000..64ff19ca
Binary files /dev/null and b/frontend/src/assets/external/report/content10.png differ
diff --git a/frontend/src/assets/external/report/content11.png b/frontend/src/assets/external/report/content11.png
new file mode 100644
index 00000000..bd459f10
Binary files /dev/null and b/frontend/src/assets/external/report/content11.png differ
diff --git a/frontend/src/assets/external/report/content12.png b/frontend/src/assets/external/report/content12.png
new file mode 100644
index 00000000..e13fd28c
Binary files /dev/null and b/frontend/src/assets/external/report/content12.png differ
diff --git a/frontend/src/assets/external/report/content13.png b/frontend/src/assets/external/report/content13.png
new file mode 100644
index 00000000..7a896544
Binary files /dev/null and b/frontend/src/assets/external/report/content13.png differ
diff --git a/frontend/src/assets/external/report/content14.png b/frontend/src/assets/external/report/content14.png
new file mode 100644
index 00000000..7eac583a
Binary files /dev/null and b/frontend/src/assets/external/report/content14.png differ
diff --git a/frontend/src/assets/external/report/content15.png b/frontend/src/assets/external/report/content15.png
new file mode 100644
index 00000000..fbb980d3
Binary files /dev/null and b/frontend/src/assets/external/report/content15.png differ
diff --git a/frontend/src/assets/external/report/content16.png b/frontend/src/assets/external/report/content16.png
new file mode 100644
index 00000000..d9c4237f
Binary files /dev/null and b/frontend/src/assets/external/report/content16.png differ
diff --git a/frontend/src/assets/external/report/content17.png b/frontend/src/assets/external/report/content17.png
new file mode 100644
index 00000000..298a17da
Binary files /dev/null and b/frontend/src/assets/external/report/content17.png differ
diff --git a/frontend/src/assets/external/report/content18.png b/frontend/src/assets/external/report/content18.png
new file mode 100644
index 00000000..029d1dd9
Binary files /dev/null and b/frontend/src/assets/external/report/content18.png differ
diff --git a/frontend/src/assets/external/report/content19.png b/frontend/src/assets/external/report/content19.png
new file mode 100644
index 00000000..6d66abe5
Binary files /dev/null and b/frontend/src/assets/external/report/content19.png differ
diff --git a/frontend/src/assets/external/report/content2.png b/frontend/src/assets/external/report/content2.png
new file mode 100644
index 00000000..531ea765
Binary files /dev/null and b/frontend/src/assets/external/report/content2.png differ
diff --git a/frontend/src/assets/external/report/content20.png b/frontend/src/assets/external/report/content20.png
new file mode 100644
index 00000000..0466e5d4
Binary files /dev/null and b/frontend/src/assets/external/report/content20.png differ
diff --git a/frontend/src/assets/external/report/content21.png b/frontend/src/assets/external/report/content21.png
new file mode 100644
index 00000000..415363e3
Binary files /dev/null and b/frontend/src/assets/external/report/content21.png differ
diff --git a/frontend/src/assets/external/report/content3.png b/frontend/src/assets/external/report/content3.png
new file mode 100644
index 00000000..22a37167
Binary files /dev/null and b/frontend/src/assets/external/report/content3.png differ
diff --git a/frontend/src/assets/external/report/content4.png b/frontend/src/assets/external/report/content4.png
new file mode 100644
index 00000000..7addcee6
Binary files /dev/null and b/frontend/src/assets/external/report/content4.png differ
diff --git a/frontend/src/assets/external/report/content5.png b/frontend/src/assets/external/report/content5.png
new file mode 100644
index 00000000..7348c2c0
Binary files /dev/null and b/frontend/src/assets/external/report/content5.png differ
diff --git a/frontend/src/assets/external/report/content6.png b/frontend/src/assets/external/report/content6.png
new file mode 100644
index 00000000..ac80b1b1
Binary files /dev/null and b/frontend/src/assets/external/report/content6.png differ
diff --git a/frontend/src/assets/external/report/content7.png b/frontend/src/assets/external/report/content7.png
new file mode 100644
index 00000000..1366845d
Binary files /dev/null and b/frontend/src/assets/external/report/content7.png differ
diff --git a/frontend/src/assets/external/report/content8.png b/frontend/src/assets/external/report/content8.png
new file mode 100644
index 00000000..7fab61e8
Binary files /dev/null and b/frontend/src/assets/external/report/content8.png differ
diff --git a/frontend/src/assets/external/report/content9.png b/frontend/src/assets/external/report/content9.png
new file mode 100644
index 00000000..98ab1418
Binary files /dev/null and b/frontend/src/assets/external/report/content9.png differ
diff --git a/frontend/src/assets/external/report/report-cover.png b/frontend/src/assets/external/report/report-cover.png
new file mode 100644
index 00000000..303bdda5
Binary files /dev/null and b/frontend/src/assets/external/report/report-cover.png differ
diff --git a/frontend/src/components/external/Content.jsx b/frontend/src/components/external/Content.jsx
new file mode 100644
index 00000000..4e6688e7
--- /dev/null
+++ b/frontend/src/components/external/Content.jsx
@@ -0,0 +1,54 @@
+import styles from './Content.module.css';
+import { pages } from '../../utils/reportContent';
+import { useState } from 'react';
+
+const Content = () => {
+  const [current, setCurrent] = useState(0);
+  const goPrev = () => {
+    if (current > 1) setCurrent(current - 2);
+  };
+
+  const goNext = () => {
+    if (current < pages.length - 2) setCurrent(current + 2);
+  };
+  return (
+    <div className={styles.content}>
+      <div className={styles.progressWrapper}>
+        <div
+          className={styles.progressBar}
+          style={{
+            width: `${((current + 2) / pages.length) * 100}%`,
+          }}
+        />
+      </div>
+
+      <div className={styles.container}>
+        {/* 좌측 화살표 */}
+        <button
+          className={styles.arrowBtn}
+          onClick={goPrev}
+          disabled={current === 0}
+        >
+          <span className={styles.leftArrowIcon}></span>
+        </button>
+
+        {/* 이미지 페이지 */}
+        <div className={styles.pageSection}>
+          <img src={pages[current]} className={styles.page} alt="report" />
+          <img src={pages[current + 1]} className={styles.page} alt="report" />
+        </div>
+
+        {/* 우측 화살표 */}
+        <button
+          className={styles.arrowBtn}
+          onClick={goNext}
+          disabled={current >= pages.length - 2}
+        >
+          <span className={styles.rightArrowIcon}></span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Content;
diff --git a/frontend/src/components/external/Content.module.css b/frontend/src/components/external/Content.module.css
new file mode 100644
index 00000000..5b44d97f
--- /dev/null
+++ b/frontend/src/components/external/Content.module.css
@@ -0,0 +1,84 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+/* 프로그레스바 전체 영역 */
+.progressWrapper {
+  width: 100%;
+  height: 6px;
+  position: relative;
+  overflow: hidden;
+}
+
+/* 실제 진행 바 */
+.progressBar {
+  height: 100%;
+  background: linear-gradient(90deg, #2563eb, #3b82f6);
+  transition: width 0.35s ease;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-around;
+}
+
+.arrowBtn {
+  width: 41px;
+  height: 41px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+}
+
+/* 화살표 */
+.leftArrowIcon {
+  width: 10px;
+  height: 10px;
+  border-left: 3px solid #3b82f6;
+  border-bottom: 3px solid #3b82f6;
+  transform: rotate(45deg);
+  margin-left: 4px; /* 가운데 보정 */
+}
+
+.rightArrowIcon {
+  width: 10px;
+  height: 10px;
+  border-left: 3px solid #3b82f6;
+  border-bottom: 3px solid #3b82f6;
+  transform: rotate(-135deg);
+  margin-right: 4px; /* 가운데 보정 */
+}
+
+.arrowBtn:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+.page {
+  width: 100%;
+  max-width: 520px;
+  aspect-ratio: 3 / 4; /* 이미지 비율 */
+  height: auto;
+}
+
+@media (max-width: 1200px) {
+  .page {
+    max-width: 420px;
+  }
+}
+
+@media (max-width: 950px) {
+  .page {
+    max-width: 300px;
+  }
+}
diff --git a/frontend/src/components/external/Report.jsx b/frontend/src/components/external/Report.jsx
new file mode 100644
index 00000000..88f5ca0d
--- /dev/null
+++ b/frontend/src/components/external/Report.jsx
@@ -0,0 +1,25 @@
+import styles from './Report.module.css';
+import { useNavigate } from 'react-router-dom';
+import reportCover from '../../assets/external/report/report-cover.png';
+
+const Report = () => {
+  const nav = useNavigate();
+  return (
+    <div className={styles.container}>
+      <div
+        className={styles.card}
+        onClick={() => nav('/main/monthly-report-detail')}
+        // API 연동 후 경로 변경 예정
+        style={{
+          background: `url(${reportCover}) center no-repeat`,
+          backgroundSize: 'contain',
+        }}
+      ></div>
+      <span className={styles.title}>
+        세투연의 한 달 활동 기록과 주요 성과 요약
+      </span>
+    </div>
+  );
+};
+
+export default Report;
diff --git a/frontend/src/components/external/Report.module.css b/frontend/src/components/external/Report.module.css
new file mode 100644
index 00000000..b056ed3a
--- /dev/null
+++ b/frontend/src/components/external/Report.module.css
@@ -0,0 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 270px;
+}
+
+.card {
+  width: 270px;
+  height: 345px;
+  border-radius: 8px;
+}
+
+.title {
+  font-weight: 800;
+  font-size: 18px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: rgba(255, 255, 255, 1);
+  word-break: keep-all;
+}
diff --git a/frontend/src/pages/external/External.module.css b/frontend/src/pages/external/External.module.css
index 782b15bf..91db5617 100644
--- a/frontend/src/pages/external/External.module.css
+++ b/frontend/src/pages/external/External.module.css
@@ -6,7 +6,8 @@
 }
 
 .header {
-  background: url('../../assets/external-detail-image.png') center no-repeat;
+  background: url('../../assets/external/external-detail-image.png') center
+    no-repeat;
   height: 25%;
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/pages/external/Main.jsx b/frontend/src/pages/external/Main.jsx
index 6986832c..2f40b7fe 100644
--- a/frontend/src/pages/external/Main.jsx
+++ b/frontend/src/pages/external/Main.jsx
@@ -1,5 +1,5 @@
 import styles from './Main.module.css';
-import image from '../../assets/external-image.png';
+import image from '../../assets/external/external-image.png';
 import Logo from '../../assets/logo.png';
 import { Link } from 'react-router-dom';
 
@@ -18,6 +18,9 @@ const Main = () => {
           <li>
             <Link to="/main/portfolio">운용 포트폴리오</Link>
           </li>
+          <li>
+            <Link to="/main/monthly-report">월간 세투연</Link>
+          </li>
           <li>
             <Link to="/">웹사이트</Link>
           </li>
diff --git a/frontend/src/pages/external/MonthlyReport.jsx b/frontend/src/pages/external/MonthlyReport.jsx
new file mode 100644
index 00000000..7e0992fc
--- /dev/null
+++ b/frontend/src/pages/external/MonthlyReport.jsx
@@ -0,0 +1,37 @@
+import styles from './MonthlyReport.module.css';
+import logo from '../../assets/logo.png';
+import Report from '../../components/external/Report';
+
+const MonthlyReport = () => {
+  return (
+    <div className={styles.page}>
+      <div className={styles.header}>
+        <div className={styles.logoSection}>
+          <img src={logo} alt="세종투자연구회" className={styles.logo} />
+          <span className={styles.logoName}>월간 세투연</span>
+        </div>
+        <h1 className={styles.title}>
+          매월 업데이트되는{' '}
+          <strong className={styles.strong}>세투연 콘텐츠</strong>를 <br /> 한
+          곳에 모았습니다.
+        </h1>
+        <h2 className={styles.subTitle}>
+          지난 한 달의 활동과 자료들을 아카이브 형식으로 정리했어요.
+        </h2>
+      </div>
+      <div className={styles.countSection}>
+        <span className={styles.count}>
+          <strong style={{ color: '#339FFF' }}>4개</strong>의 게시물
+        </span>
+      </div>
+      <div className={styles.reportSection}>
+        <Report />
+        <Report />
+        <Report />
+        <Report />
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyReport;
diff --git a/frontend/src/pages/external/MonthlyReport.module.css b/frontend/src/pages/external/MonthlyReport.module.css
new file mode 100644
index 00000000..2da1577d
--- /dev/null
+++ b/frontend/src/pages/external/MonthlyReport.module.css
@@ -0,0 +1,90 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+}
+
+.header {
+  background:
+    linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.82)),
+    url('../../assets/external/monthly-report.png') center no-repeat;
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.logoSection {
+  display: inline-flex;
+  height: 56px;
+  padding: 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 37px;
+  background: rgba(51, 159, 255, 0.12);
+}
+
+.logo {
+  width: 26px;
+  height: 26px;
+  filter: brightness(0) saturate(1) invert(82%) sepia(12%) saturate(400%)
+    hue-rotate(175deg) brightness(110%) contrast(90%);
+}
+
+.logoName {
+  color: rgba(192, 225, 255, 1);
+  font-size: 20px;
+  font-style: normal;
+  line-height: 100%;
+  letter-spacing: -0.8px;
+}
+
+.title {
+  color: #fff;
+  text-align: center;
+  font-size: 40px;
+  font-weight: normal;
+  line-height: 150%;
+  margin: 0;
+  word-break: keep-all;
+}
+
+.strong {
+  color: #339fff;
+  font-weight: normal;
+}
+
+.subTitle {
+  color: #d9d9d9;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 150%;
+  margin: 0;
+}
+
+.countSection {
+  background-color: #000000;
+  padding-left: 50px;
+  padding-top: 30px;
+}
+
+.count {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 150%;
+  letter-spacing: 0%;
+  color: #7e7e7e;
+}
+
+.reportSection {
+  padding: 30px 50px;
+  background-color: #000000;
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+  gap: 10px;
+}
diff --git a/frontend/src/pages/external/MonthlyReportDetail.jsx b/frontend/src/pages/external/MonthlyReportDetail.jsx
new file mode 100644
index 00000000..1a3d4b35
--- /dev/null
+++ b/frontend/src/pages/external/MonthlyReportDetail.jsx
@@ -0,0 +1,24 @@
+import styles from './MonthlyReportDetail.module.css';
+import logo from '../../assets/logo.png';
+import { useNavigate } from 'react-router-dom';
+import Content from '../../components/external/Content';
+
+const MonthlyReportDetail = () => {
+  const nav = useNavigate();
+  return (
+    <div className={styles.container}>
+      <header
+        className={styles.header}
+        onClick={() => nav('/main/monthly-report')}
+      >
+        <img src={logo} alt="로고" className={styles.logo} />
+        <span className={styles.title}>월간 세투연</span>
+      </header>
+      <div className={styles.content}>
+        <Content />
+      </div>
+    </div>
+  );
+};
+
+export default MonthlyReportDetail;
diff --git a/frontend/src/pages/external/MonthlyReportDetail.module.css b/frontend/src/pages/external/MonthlyReportDetail.module.css
new file mode 100644
index 00000000..4035a2c5
--- /dev/null
+++ b/frontend/src/pages/external/MonthlyReportDetail.module.css
@@ -0,0 +1,33 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+}
+
+.header {
+  height: 100px;
+  background: rgba(0, 0, 0, 1);
+  display: flex;
+  align-items: center;
+  padding-left: 50px;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: -0.04em;
+  color: #ffffff;
+}
+
+.content {
+  flex: 1;
+}
diff --git a/frontend/src/utils/reportContent.js b/frontend/src/utils/reportContent.js
new file mode 100644
index 00000000..e7522e2f
--- /dev/null
+++ b/frontend/src/utils/reportContent.js
@@ -0,0 +1,47 @@
+import cover from '../assets/external/report/report-cover.png';
+import page1 from '../assets/external/report/content1.png';
+import page2 from '../assets/external/report/content2.png';
+import page3 from '../assets/external/report/content3.png';
+import page4 from '../assets/external/report/content4.png';
+import page5 from '../assets/external/report/content5.png';
+import page6 from '../assets/external/report/content6.png';
+import page7 from '../assets/external/report/content7.png';
+import page8 from '../assets/external/report/content8.png';
+import page9 from '../assets/external/report/content9.png';
+import page10 from '../assets/external/report/content10.png';
+import page11 from '../assets/external/report/content11.png';
+import page12 from '../assets/external/report/content12.png';
+import page13 from '../assets/external/report/content13.png';
+import page14 from '../assets/external/report/content14.png';
+import page15 from '../assets/external/report/content15.png';
+import page16 from '../assets/external/report/content16.png';
+import page17 from '../assets/external/report/content17.png';
+import page18 from '../assets/external/report/content18.png';
+import page19 from '../assets/external/report/content19.png';
+import page20 from '../assets/external/report/content20.png';
+import page21 from '../assets/external/report/content21.png';
+
+export const pages = [
+  cover,
+  page1,
+  page2,
+  page3,
+  page4,
+  page5,
+  page6,
+  page7,
+  page8,
+  page9,
+  page10,
+  page11,
+  page12,
+  page13,
+  page14,
+  page15,
+  page16,
+  page17,
+  page18,
+  page19,
+  page20,
+  page21,
+];