diff --git a/apps/cs/app/(with-base-layout)/survey/[srvySn]/modify/page.tsx b/apps/cs/app/(with-base-layout)/survey/[srvySn]/modify/page.tsx
new file mode 100644
index 000000000..23c487092
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/survey/[srvySn]/modify/page.tsx
@@ -0,0 +1,10 @@
+import { ModifyPage as VModifyPage } from "@/pages/survey";
+
+export default async function ModifyPage({
+  params,
+}: {
+  params: Promise<{ srvySn: string }>;
+}) {
+  const { srvySn } = await params;
+  return <VModifyPage srvySn={srvySn} />;
+}
diff --git a/apps/cs/app/(with-base-layout)/survey/[srvySn]/page.tsx b/apps/cs/app/(with-base-layout)/survey/[srvySn]/page.tsx
new file mode 100644
index 000000000..382c62b5a
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/survey/[srvySn]/page.tsx
@@ -0,0 +1,10 @@
+import { DetailPage as VDetailPage } from "@/pages/survey";
+
+export default async function DetailPage({
+  params,
+}: {
+  params: Promise<{ srvySn: string }>;
+}) {
+  const { srvySn } = await params;
+  return <VDetailPage srvySn={srvySn} />;
+}
diff --git a/apps/cs/src/pages/survey/api/survey-service.ts b/apps/cs/src/pages/survey/api/survey-service.ts
index 1b9931621..9400f3331 100644
--- a/apps/cs/src/pages/survey/api/survey-service.ts
+++ b/apps/cs/src/pages/survey/api/survey-service.ts
@@ -5,6 +5,7 @@ import type {
   SurveyList,
   SurveyService,
   SurveyFormData,
+  SurveyDetail,
 } from "../model/survey-interface";
 
 export class SurveyApiService implements SurveyService {
@@ -15,9 +16,23 @@ export class SurveyApiService implements SurveyService {
     return response.data;
   }
 
+  public async getSurveyInfo(srvySn: number): Promise<SurveyDetail> {
+    const response = await client.get<SurveyDetail>(
+      `${ENDPOINT.CMS_SERVICE.SURVEY}/${srvySn}`,
+    );
+    return response.data;
+  }
+
   public async createSurvey(data: SurveyFormData): Promise<void> {
     await client.post(ENDPOINT.CMS_SERVICE.SURVEY, data);
   }
+
+  public async updateSurvey(
+    srvySn: number,
+    data: SurveyFormData,
+  ): Promise<void> {
+    await client.put(`${ENDPOINT.CMS_SERVICE.SURVEY}/${srvySn}`, data);
+  }
 }
 
 export const SurveyApi = new SurveyApiService();
diff --git a/apps/cs/src/pages/survey/index.ts b/apps/cs/src/pages/survey/index.ts
index 726f64a38..f0be08eac 100644
--- a/apps/cs/src/pages/survey/index.ts
+++ b/apps/cs/src/pages/survey/index.ts
@@ -1,2 +1,4 @@
 export { SurveyPage } from "./ui/survey-page";
 export { CreatePage } from "./ui/create-page";
+export { DetailPage } from "./ui/detail-page";
+export { ModifyPage } from "./ui/modify-page";
diff --git a/apps/cs/src/pages/survey/model/survey-interface.ts b/apps/cs/src/pages/survey/model/survey-interface.ts
index 432d0490c..023d09acc 100644
--- a/apps/cs/src/pages/survey/model/survey-interface.ts
+++ b/apps/cs/src/pages/survey/model/survey-interface.ts
@@ -22,6 +22,10 @@ export interface Survey {
   rgTrNm: string;
 }
 
+export interface SurveyDetail extends Survey {
+  srvyWrtGdCn: string;
+}
+
 export const surveyFormSchema = z.object({
   srvyTtl: z.string(),
   srvyPrps: z.string(),
@@ -34,5 +38,7 @@ export type SurveyFormData = z.infer<typeof surveyFormSchema>;
 
 export interface SurveyService {
   getSurveyList(params: SurveyParams): Promise<SurveyList>;
+  getSurveyInfo(srvySn: number): Promise<SurveyDetail>;
   createSurvey(data: SurveyFormData): Promise<void>;
+  updateSurvey(srvySn: number, data: SurveyFormData): Promise<void>;
 }
diff --git a/apps/cs/src/pages/survey/ui/detail-page.tsx b/apps/cs/src/pages/survey/ui/detail-page.tsx
new file mode 100644
index 000000000..1c874d2e1
--- /dev/null
+++ b/apps/cs/src/pages/survey/ui/detail-page.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@common/components";
+import { ENDPOINT } from "@/shared/config";
+import { SurveyApi } from "../api/survey-service";
+
+function DetailPage({ srvySn }: { srvySn: string }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const { data: surveyInfo } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, srvySn],
+    queryFn: () => SurveyApi.getSurveyInfo(parseInt(srvySn)),
+  });
+
+  return (
+    <div className="card card-border !mb-0 !mt-6">
+      <div className="card-header">
+        <h3 className="text-2xl font-medium text-label">설문 상세</h3>
+        <div className="flex gap-2">
+          <Button color="white" onClick={() => router.back()}>
+            목록
+          </Button>
+          <Button onClick={() => router.push(`${pathname}/modify`)}>
+            수정
+          </Button>
+          <Button color="red">삭제</Button>
+        </div>
+      </div>
+      <ul className="flex flex-col">
+        <li className="flex items-center gap-8 border-b border-border py-6">
+          <span className="w-[16rem] text-right text-label">설문 제목</span>
+          <p className="text-2xl font-bold">{surveyInfo?.srvyTtl}</p>
+        </li>
+        <li className="flex items-center gap-8 border-b border-border py-6">
+          <span className="w-[16rem] text-right text-label">설문 목적</span>
+          <p className="text-2xl font-bold">{surveyInfo?.srvyPrps}</p>
+        </li>
+        <li className="flex items-center gap-8 border-b border-border py-6">
+          <span className="w-[16rem] text-right text-label">
+            설문 작성 안내 내용
+          </span>
+          <p className="text-2xl font-bold">{surveyInfo?.srvyWrtGdCn}</p>
+        </li>
+        <li className="flex items-center gap-8 py-6">
+          <span className="w-[16rem] text-right text-label">설문 대상</span>
+          <p className="text-2xl font-bold">{surveyInfo?.srvyTrgt}</p>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export { DetailPage };
diff --git a/apps/cs/src/pages/survey/ui/modify-page.tsx b/apps/cs/src/pages/survey/ui/modify-page.tsx
new file mode 100644
index 000000000..a57f7989d
--- /dev/null
+++ b/apps/cs/src/pages/survey/ui/modify-page.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useAlertStore } from "@/shared/lib";
+import { ENDPOINT } from "@/shared/config";
+import {
+  surveyFormSchema,
+  type SurveyFormData,
+} from "../model/survey-interface";
+import { SurveyApi } from "../api/survey-service";
+import { SurveyForm } from "./survey-form";
+
+function ModifyPage({ srvySn }: { srvySn: string }) {
+  const router = useRouter();
+  const { setMessage: alert } = useAlertStore((state) => state);
+
+  const { data: surveyInfo } = useQuery({
+    queryKey: [ENDPOINT.CMS_SERVICE.SURVEY, srvySn],
+    queryFn: () => SurveyApi.getSurveyInfo(parseInt(srvySn)),
+    enabled: !!srvySn,
+  });
+
+  const { mutateAsync: updateSurvey } = useMutation({
+    mutationFn: (data: SurveyFormData) =>
+      SurveyApi.updateSurvey(parseInt(srvySn), data),
+    onSuccess: () => {
+      alert("수정되었습니다.", router.back);
+    },
+  });
+
+  const form = useForm<SurveyFormData>({
+    resolver: zodResolver(surveyFormSchema),
+    values: {
+      ...surveyInfo,
+      srvyTtl: surveyInfo?.srvyTtl ?? "",
+      srvyPrps: surveyInfo?.srvyPrps ?? "",
+    },
+  });
+
+  return (
+    <div className="mt-6 flex flex-col">
+      <div className="card card-border !mb-0 !mt-6">
+        <div className="card-header">
+          <h3 className="text-2xl font-medium text-label">팝업 수정</h3>
+        </div>
+        <SurveyForm form={form} handleSave={updateSurvey} />
+      </div>
+    </div>
+  );
+}
+
+export { ModifyPage };
diff --git a/apps/cs/src/pages/survey/ui/survey-page.tsx b/apps/cs/src/pages/survey/ui/survey-page.tsx
index 91940ff8b..4288d2235 100644
--- a/apps/cs/src/pages/survey/ui/survey-page.tsx
+++ b/apps/cs/src/pages/survey/ui/survey-page.tsx
@@ -14,7 +14,7 @@ import { POSTING_TYPE, PostingDialog } from "@/entities/posting";
 import { AuthorityButton } from "@/entities/menu-authority";
 import { ENDPOINT } from "@/shared/config";
 import { SurveyApi } from "../api/survey-service";
-import type { SurveyParams } from "../model/survey-interface";
+import type { Survey, SurveyParams } from "../model/survey-interface";
 import { columns } from "../model/table-columns";
 
 type PostingTarget = {
@@ -64,7 +64,9 @@ function SurveyPage() {
     refetch();
   };
 
-  const handleRowClick = (row: unknown) => {};
+  const handleRowClick = (row: Survey) => {
+    router.push(`/survey/${row.srvySn}`);
+  };
 
   useEffect(() => {
     const postingTargets = table