diff --git a/apps/dm/.env.local b/apps/dm/.env.local
index df18c9228..592656b61 100644
--- a/apps/dm/.env.local
+++ b/apps/dm/.env.local
@@ -19,7 +19,7 @@ NEXT_PUBLIC_NGII_URL = https://map.ngii.go.kr
 NEXT_PUBLIC_NGII_PARAM = 04trYP9_xwLAfALjwZ-B8g&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={x}&tilerow={y}
 NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 # NEXT_PUBLIC_GATEWAY_URL=http://localhost:8883  # 개발 서버 API
-
+CONTENTS_INTRO = 31
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm/.env.mindone b/apps/dm/.env.mindone
index 22fb6274c..73e8a388a 100644
--- a/apps/dm/.env.mindone
+++ b/apps/dm/.env.mindone
@@ -20,7 +20,7 @@ NEXT_PUBLIC_SEWERAGE_API_URL=http://con.mind-one.co.kr:11083/sewerage-service
 NEXT_PUBLIC_GATEWAY_URL=http://con.mind-one.co.kr:11083  # 개발 서버 API
 # NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.128:8883/sewerage-service/api          # 최용성 
 #NEXT_PUBLIC_SEWERAGE_API_URL=http://192.168.1.66:8883/sewerage-service/api          # 박이정
-
+CONTENTS_INTRO = 31
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = devU01TX0FVVEgyMDI1MDgyNTEwMzkwNDExNjEwNTM=
diff --git a/apps/dm/.env.production b/apps/dm/.env.production
index 587001101..9ce7b404a 100644
--- a/apps/dm/.env.production
+++ b/apps/dm/.env.production
@@ -18,7 +18,7 @@ NEXT_PUBLIC_SEWERAGE_API_URL = http://apigateway.iipbs-was.svc.cluster.local:800
 NEXT_PUBLIC_NGII_URL = http://172.29.143.87/poiact
 NEXT_PUBLIC_NGII_PARAM = BDE2BEF39DAFEC293AB6730150F222AC&service=WMTS&request=GetTile&version=1.0.0&format=image/png&layer=korean_map&style=korean&tilematrixset=korean&tilematrix={z}&tilecol={y}&tilerow={x}
 NEXT_PUBLIC_GATEWAY_URL = http://apigateway.iipbs-was.svc.cluster.local:8000
-
+CONTENTS_INTRO = 31
 
 NEXT_PUBLIC_FINDADRESS_URL=https://business.juso.go.kr/addrlink/addrLinkApi.do
 NEXT_PRIVATE_WR_ADDRESS_KEY = U01TXOFVVEgyMDI1MDgyODE0MTAxNzExNjEyMjA=
diff --git a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection copy.tsx b/apps/dm/app/(with-layout)/intro/_components/LawIntroSection copy.tsx
deleted file mode 100644
index e366c38ad..000000000
--- a/apps/dm/app/(with-layout)/intro/_components/LawIntroSection copy.tsx	
+++ /dev/null
@@ -1,123 +0,0 @@
-"use client";
-
-import React from "react";
-import Image, { type StaticImageData } from "next/image";
-
-import lawPlan from "@/public/images/landing/intro/law_timeline.png";
-import planPerformance from "@/public/images/landing/intro/performance_left.png";
-import domesticChange from "@/public/images/landing/intro/domestic_textbox.png";
-import policyHistory from "@/public/images/landing/intro/policy_timeline.png";
-import lawRelation from "@/public/images/landing/intro/rel_note.png";
-import domesticLinkage from "@/public/images/landing/intro/linkage.png";
-
-function SectionTitle({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-3">
-      <span className="h-5 w-[3px] bg-sky-500" />
-      <h3 className="text-[24px] font-bold text-neutral-900">{children}</h3>
-    </div>
-  );
-}
-
-function Hr({ className = "" }: { className?: string }) {
-  return <div className={`h-[2px] w-full bg-black/10 ${className}`} />;
-}
-
-function ImgCard({ src, alt }: { src: StaticImageData; alt: string }) {
-  return (
-    <div className="w-full overflow-x-auto">
-      <Image
-        src={src}
-        alt={alt}
-        className="mx-auto block max-w-none"
-        style={{ width: "auto", height: "auto" }}
-      />
-    </div>
-  );
-}
-
-function SectionShell({
-  id,
-  title,
-  children,
-  className = "",
-}: {
-  id: string;
-  title: string;
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <section id={id} className={`scroll-mt-[120px] ${className}`}>
-      <SectionTitle>{title}</SectionTitle>
-      <div className="mt-8">{children}</div>
-    </section>
-  );
-}
-
-export default function LawIntroSection() {
-  const title = "물재이용법";
-
-  return (
-    <div className="bg-white">
-      <div className="inline-block">
-        <h2 className="relative inline-block px-2 text-[28px] font-extrabold leading-none tracking-tight text-slate-900">
-          <span className="relative z-10">{title}</span>
-          <span className="absolute bottom-[-4px] left-0 z-0 h-3 w-full bg-gradient-to-r from-sky-300 to-green-300" />
-        </h2>
-      </div>
-
-      <div className="mt-10">
-        <SectionShell
-          id="law-plan"
-          title="법률 제·개정 및 기본계획 수립"
-          className="mt-10"
-        >
-          <ImgCard src={lawPlan} alt="법률 제·개정 및 기본계획 수립" />
-        </SectionShell>
-
-        <Hr className="my-11" />
-
-        <SectionShell
-          id="plan-performance"
-          title="제2차 계획 대비 실적 현황"
-        >
-          <ImgCard src={planPerformance} alt="제2차 계획 대비 실적 현황" />
-        </SectionShell>
-
-        <Hr className="my-11" />
-
-        <SectionShell id="domestic-change" title="우리나라의 수자원 현황 및 물이용 여건">
-          <ImgCard src={domesticChange} alt="우리나라의 수자원 현황 및 물이용 여건" />
-        </SectionShell>
-
-        <Hr className="my-11" />
-
-        <SectionShell
-          id="policy-history"
-          title="물 재이용 정책 변화 추이"
-        >
-          <ImgCard src={policyHistory} alt="물 재이용 정책 변화 추이" />
-        </SectionShell>
-
-        <Hr className="my-11" />
-
-        <SectionShell
-          id="law-relation"
-          title="타법령과의 관계 검토"
-        >
-          <ImgCard src={lawRelation} alt="타법령과의 관계 검토" />
-        </SectionShell>
-
-        <Hr className="my-11" />
-
-        <SectionShell
-          id="domestic-linkage"
-          title="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요"
-        >
-          <ImgCard src={domesticLinkage} alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
-        </SectionShell>
-      </div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/apps/dm/app/(with-layout)/intro/introSection.tsx b/apps/dm/app/(with-layout)/intro/introSection.tsx
new file mode 100644
index 000000000..4422905e2
--- /dev/null
+++ b/apps/dm/app/(with-layout)/intro/introSection.tsx
@@ -0,0 +1,233 @@
+export const dynamic = "force-dynamic";
+import { ContentsPage } from "@/components/ui/contents";
+
+export default function IntroSection() {
+  // const contentsHtml = `
+  //   <div class="contents-page">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">물재이용법</span>
+  //         <span class="title-bg"></span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="law-plan" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>법률 제·개정 및 기본계획 수립</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/law_timeline.png" alt="법률 제·개정 및 기본계획 수립" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="plan-performance" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>제2차 계획 대비 실적 현황</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/performance_left.png" alt="제2차 계획 대비 실적 현황" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="domestic-change" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>우리나라의 수자원 현황 및 물이용 여건</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/domestic_textbox.png" alt="우리나라의 수자원 현황 및 물이용 여건" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="policy-history" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>물 재이용 정책 변화 추이</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/policy_timeline.png" alt="물 재이용 정책 변화 추이" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="law-relation" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>타법령과의 관계 검토</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rel_note.png" alt="타법령과의 관계 검토" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="domestic-linkage" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/linkage.png" alt="주요 국가계획의 정책방향과 연계한 물 재이용 정책 필요" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">빗물이용시설</span>
+  //         <span class="title-bg"></span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="rain-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>빗물 재이용 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainreuse_intro.png" alt="빗물 재이용 소개" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>빗물이용시설 설치 관리 법적 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainreuse_mandatory.png" alt="빗물이용시설 설치 관리 법적 의무 대상" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-design" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>빗물이용시설 설계 방안</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainwater_design.png" alt="빗물이용시설 설계 방안" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="rain-standards" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>빗물이용시설 시설기준 및 관리기준</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/rainwater_standards.png" alt="빗물이용시설 시설기준 및 관리기준" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">중수도</span>
+  //         <span class="title-bg"></span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="greywater-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>중수 재이용 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_intro.png" alt="중수 재이용 소개" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="greywater-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>중수도 설치 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_mandatory.png" alt="중수도 설치 의무 대상" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="greywater-standard" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>중수도 시설기준 및 관리기준</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/greywater_standard.png" alt="중수도 시설기준 및 관리기준" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+
+  //   <div class="contents-page" style="margin-top:120px;">
+  //     <div class="page-title">
+  //       <h2>
+  //         <span class="title-text">하수처리수 재이용</span>
+  //         <span class="title-bg"></span>
+  //       </h2>
+  //     </div>
+
+  //     <div class="sections">
+  //       <section id="treatedwater-intro" class="section first">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>하수처리수 소개</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/treatedwater_intro.png" alt="하수처리수" />
+  //         </div>
+  //       </section>
+
+  //       <div class="divider"></div>
+
+  //       <section id="treatedwater-mandatory" class="section">
+  //         <div class="section-title">
+  //           <span class="section-bar"></span>
+  //           <h3>하수처리수 재이용시설 의무 대상</h3>
+  //         </div>
+  //         <div class="image-wrap">
+  //           <img src="/images/landing/intro/treatedwater_mandatory.png" alt="하수처리수 재이용시설 의무 대상" />
+  //         </div>
+  //       </section>
+  //     </div>
+  //   </div>
+  // `;
+
+  const contsSn = Number(process.env.CONTENTS_INTRO ?? 31);
+  const menuCd = "24";
+
+  return <ContentsPage contsSn={contsSn} menuCd={menuCd} />;
+  // return (
+  //   <div
+  //     className="bg-white"
+  //     dangerouslySetInnerHTML={{ __html: contentsHtml }}
+  //   />
+  // );
+}
diff --git a/apps/dm/app/(with-layout)/intro/page.tsx b/apps/dm/app/(with-layout)/intro/page.tsx
index 7b643e55d..f6a50c16b 100644
--- a/apps/dm/app/(with-layout)/intro/page.tsx
+++ b/apps/dm/app/(with-layout)/intro/page.tsx
@@ -1,10 +1,7 @@
 // DM 물 재이용 소개 페이지
 import BusinessSubNav, { type BusinessSubNavMenu } from "@/components/BusinessSubNav";
 import SubPageHeader from "@/components/SubPageHeader";
-import LawIntroSection from "./_components/LawIntroSection";
-import RainIntroSection from "./_components/RainIntroSection";
-import ReuseWaterIntroSection from "./_components/ReuseWaterIntroSection";
-import TreatedIntroSection from "./_components/TreatedIntroSection";
+import IntroSection from "./introSection";
 
 const menus: BusinessSubNavMenu[] = [
   {
@@ -76,10 +73,7 @@ export default function IntroPage() {
 
       {/* 본문 */}
       <div className="max-w-[1320px] pb-24">
-        <LawIntroSection />
-        <RainIntroSection />
-        <ReuseWaterIntroSection />
-        <TreatedIntroSection />
+        <IntroSection />
       </div>
     </div>
   );
diff --git a/apps/dm/components/ui/contents/contentsPageClient.tsx b/apps/dm/components/ui/contents/contentsPageClient.tsx
index cf26b0343..6628178ef 100644
--- a/apps/dm/components/ui/contents/contentsPageClient.tsx
+++ b/apps/dm/components/ui/contents/contentsPageClient.tsx
@@ -8,7 +8,7 @@ type ContentsPageClientProps = {
 
 function ContentsPageClient({ initialContent }: ContentsPageClientProps) {
   return (
-    <div className="card card-border !mt-6 !p-6">
+    <div className="card card-border !mt-6">
       <div
         className="contents-page text-[16px] leading-[1.5]"
         dangerouslySetInnerHTML={{