diff --git a/src/lib/repository/programRepository.js b/src/lib/repository/programRepository.js
new file mode 100644
index 0000000..bdceb9a
--- /dev/null
+++ b/src/lib/repository/programRepository.js
@@ -0,0 +1,51 @@
+import { supabase } from "../supabaseClient";
+
+class ProgramRepository {
+  async fetchTotalProcutCount() {
+    const { count, error } = await supabase.from("program").select("*", { count: "exact" });
+
+    if (error) throw new Error(error.message);
+    return count;
+  }
+
+  async fetchProgramById({ programId }) {
+    if (programId === "undefined") return { program: {} };
+
+    const { data: program, error } = await supabase
+      .from("program")
+      .select("*, product(*), act(*)")
+      .eq("id", programId)
+      .order("createdAt", {
+        foreignTable: "act",
+        ascending: true,
+      })
+      .maybeSingle();
+
+    if (error) throw new Error(error.message);
+
+    return { program };
+  }
+
+  async fetchProgramByPaging({ pageNum = 1 }) {
+    let page = (Number(pageNum) - 1) * 20;
+
+    if (page < 0) page = 0;
+
+    const { data: programs, error } = await supabase
+      .from("program")
+      .select("*")
+      .order("createdAt", { ascending: true })
+      .range(page, page + 19);
+
+    if (error) throw new Error(error.message);
+
+    return { programs };
+  }
+
+  async deleteProgramById({ programId }) {
+    const { error } = await supabase.from("program").delete().in("id", programId);
+    if (error) throw new Error(error.message);
+  }
+}
+
+export default new ProgramRepository();
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0b48d77..507f33b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,6 +30,9 @@
         <a
           href="/product"
           class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">상품</a>
+        <a
+          href="/program"
+          class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">프로그램</a>
         <a
           href="/coupon"
           class="rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">쿠폰</a>
diff --git a/src/routes/program/+page.server.js b/src/routes/program/+page.server.js
new file mode 100644
index 0000000..92ff9e7
--- /dev/null
+++ b/src/routes/program/+page.server.js
@@ -0,0 +1,10 @@
+import programRepository from "../../lib/repository/programRepository.js";
+
+export const load = async ({ url }) => {
+  const pageNum = url.searchParams.get("pageNum") || 1;
+
+  const { programs } = await programRepository.fetchProgramByPaging({ pageNum });
+  const totalProgramCount = await programRepository.fetchTotalProcutCount();
+
+  return { programs, totalProgramCount };
+};
diff --git a/src/routes/program/+page.svelte b/src/routes/program/+page.svelte
new file mode 100644
index 0000000..8897c6b
--- /dev/null
+++ b/src/routes/program/+page.svelte
@@ -0,0 +1,152 @@
+<script>
+  import { enhance } from "$app/forms";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
+  export let data;
+  const { programs, totalProgramCount } = data;
+
+  let selectedPrograms = [];
+  $: pageNum = $page.url.searchParams.get("pageNum") || 1;
+  let isAllSelected = false;
+
+  const toggleProgramSelection = (idx) => {
+    if (selectedPrograms.includes(idx)) {
+      selectedPrograms = selectedPrograms.filter((selectedIdx) => selectedIdx !== idx);
+    } else {
+      selectedPrograms = [...selectedPrograms, idx];
+    }
+  };
+
+  function toggleSelectAll() {
+    if (!isAllSelected) {
+      selectedPrograms = programs;
+      isAllSelected = true;
+    } else {
+      selectedPrograms = [];
+      isAllSelected = false;
+    }
+  }
+
+  const handleDelete = async ({ formData }) => {
+    if (selectedPrograms.length === 0) {
+      alert("삭제할 프로그램을 선택해주세요");
+      return;
+    }
+
+    const response = await fetch("/program", {
+      method: "DELETE",
+      body: JSON.stringify(selectedPrograms),
+      headers: {
+        "content-type": "application/json",
+      },
+    });
+
+    let result = await response.json();
+    if (result) {
+      alert("삭제되었습니다.");
+      window.location.reload();
+    }
+  };
+</script>
+
+<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+  <table class="h-full w-full table-fixed text-left text-sm text-gray-500 rtl:text-right dark:text-gray-400">
+    <thead class="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+      <tr>
+        <th scope="col" class="p-4">
+          <div class="flex items-center">
+            <input
+              id="checkbox-all-search"
+              checked={isAllSelected}
+              on:change={toggleSelectAll}
+              type="checkbox"
+              class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800" />
+            <label for="checkbox-all-search" class="sr-only">checkbox</label>
+          </div>
+        </th>
+        <th scope="col" class="px-6 py-3"> Index </th>
+        <th scope="col" class="px-6 py-3"> Image </th>
+        <th scope="col" class="px-6 py-3"> Name </th>
+        <th scope="col" class="px-6 py-3"> InfoText </th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each programs as program, idx}
+        <tr class="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+          <td class="w-4 p-4">
+            <div class="flex items-center">
+              <input
+                on:click={() => toggleProgramSelection(program)}
+                checked={selectedPrograms.some((selectedProgram) => selectedProgram.id === program.id)}
+                type="checkbox"
+                class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800" />
+              <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+            </div>
+          </td>
+          <td class="px-6 py-4"> {idx + 1} </td>
+          <th
+            scope="row"
+            on:click={() => goto(`/program/${program.id}`)}
+            class="flex items-center whitespace-nowrap py-4 text-gray-900 dark:text-white">
+            <img class="object-fit h-20 w-20" src={program.bannerImageUrl} alt="product" />
+          </th>
+          <td on:click={() => goto(`/program/${program.id}`)} class="px-6 py-4"> {program.name} </td>
+          <td on:click={() => goto(`/program/${program.id}`)} class="px-6 py-4">
+            <div class="flex items-center">
+              {program.infoText}
+            </div>
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  {#if totalProgramCount > 0 && !isNaN(Number(pageNum))}
+    <div class="my-3 flex w-full justify-center gap-4">
+      <button
+        type="button"
+        class="mr-4 cursor-pointer"
+        disabled={Number(pageNum) === 1}
+        on:click={() => {
+          window.location.href = `/program?pageNum=1`;
+        }}>«</button>
+      {#if Number(pageNum) !== 1}
+        <button
+          type="button"
+          on:click={() => {
+            window.location.href = `/program?pageNum=${Number(pageNum) - 1}`;
+          }}>{Number(pageNum) - 1}</button>
+      {/if}
+      <button class="font-bold text-primary underline">{Number(pageNum)}</button>
+      {#if Number(pageNum) < Math.ceil(totalProgramCount / 20)}
+        <button
+          type="button"
+          on:click={() => {
+            window.location.href = `/program?pageNum=${Number(pageNum) + 1}`;
+          }}>{Number(pageNum) + 1}</button>
+      {/if}
+      <button
+        class="ml-4 cursor-pointer"
+        disabled={Number(pageNum) >= Math.ceil(totalProgramCount / 20)}
+        on:click={() => {
+          window.location.href = `/program?pageNum=${Math.ceil(totalProgramCount / 20)}`;
+        }}>»</button>
+    </div>
+  {/if}
+
+  <div class="mt-4 flex items-center justify-center">
+    <button
+      on:click={() => goto("/program/null")}
+      type="button"
+      class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      >프로그램 추가</button>
+    <form method="post" use:enhance={handleDelete} action="?/delete">
+      <button
+        type="submit"
+        formaction="?/delete"
+        class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+        >선택한 프로그램 삭제</button>
+    </form>
+  </div>
+</div>
diff --git a/src/routes/program/+server.js b/src/routes/program/+server.js
new file mode 100644
index 0000000..9f41274
--- /dev/null
+++ b/src/routes/program/+server.js
@@ -0,0 +1,17 @@
+import { json } from "@sveltejs/kit";
+import programRepository from "../../lib/repository/programRepository.js";
+
+export const DELETE = async ({ request }) => {
+  try {
+    const programs = await request.json();
+
+    const programIds = programs.map((err) => err.id);
+
+    await programRepository.deleteProgramById({ programId: programIds });
+
+    return json(true);
+  } catch (err) {
+    console.error("product/server.js Error : ", err);
+    return json(false);
+  }
+};
diff --git a/src/routes/program/[programId]/+page.server.js b/src/routes/program/[programId]/+page.server.js
new file mode 100644
index 0000000..633bc57
--- /dev/null
+++ b/src/routes/program/[programId]/+page.server.js
@@ -0,0 +1,105 @@
+import programRepository from "../../../lib/repository/programRepository.js";
+import { supabase } from "../../../lib/supabaseClient.js";
+
+export const load = async ({ params }) => {
+  const programId = params.programId;
+
+  if (programId === "null") {
+    const program = {};
+    return { program };
+  }
+
+  const { program } = await programRepository.fetchProgramById({ programId });
+
+  return { program };
+};
+
+export const actions = {
+  save: async ({ request, params }) => {
+    const product = await request.formData();
+
+    // 기본 정보.
+    const basicInfo = {
+      name: product.get("name"),
+      isComingSoon: product.get("isComingSoon"),
+      duration: product.get("duration"),
+      feature: product.get("feature"),
+      infoText: product.get("infoText"),
+      ingredient: product.get("ingredient"),
+      manual: product.get("manual"),
+    };
+
+    if (product.get("bannerImage") === "no") basicInfo.bannerImageUrl = null;
+    else if (product.get("bannerImage") === "url") {
+      basicInfo.bannerImageUrl = product.get("bannerImageUrl");
+    } else {
+      const file = product.get("bannerImageFile");
+      // 파일 등록 후 url. 등록.
+      const { data, error } = await supabase.storage
+        .from("program-images")
+        .upload(`img/${params.programId}/banner/${file.name}`, file, {
+          cacheControl: "3600",
+          upsert: true,
+        });
+
+      let { data: imageUrl } = await supabase.storage.from("program-images").getPublicUrl(data.path);
+      imageUrl = imageUrl.publicUrl;
+      basicInfo.bannerImageUrl = imageUrl;
+    }
+
+    if (product.get("productImage") === "no") basicInfo.productImageUrl = null;
+    else if (product.get("productImage") === "url") {
+      basicInfo.productImageUrl = product.get("productImageUrl");
+    } else {
+      const file = product.get("productImageFile");
+      const { data, error } = await supabase.storage
+        .from("program-images")
+        .upload(`img/${params.programId}/product/${file.name}`, file, {
+          cacheControl: "3600",
+          upsert: true,
+        });
+      let { data: imageUrl } = await supabase.storage.from("program-images").getPublicUrl(data.path);
+      imageUrl = imageUrl.publicUrl;
+      basicInfo.productImageUrl = imageUrl;
+    }
+
+    if (product.get("bannerComingSoonImage") === "no") basicInfo.bannerImageUrlComingSoon = null;
+    else if (product.get("bannerComingSoonImage") == "url") {
+      basicInfo.bannerImageUrlComingSoon = product.get("bannerComingSoonImageUrl");
+    } else {
+      const file = product.get("bannerComingSoonImageFile");
+      const { data, error } = await supabase.storage
+        .from("program-images")
+        .upload(`img/${params.programId}/bannerComingSoon/${file.name}`, file, {
+          cacheControl: "3600",
+          upsert: true,
+        });
+
+      let { data: imageUrl } = await supabase.storage.from("program-images").getPublicUrl(data.path);
+      imageUrl = imageUrl.publicUrl;
+      basicInfo.bannerImageUrlComingSoon = imageUrl;
+    }
+
+    if (params.programId === "null") {
+      const { error } = await supabase.from("program").insert({ ...basicInfo });
+
+      if (error) {
+        console.error("Program Save(Insert) Err", error.message);
+        return "Fail";
+      }
+
+      return "Success";
+    }
+    const { error } = await supabase
+      .from("program")
+      .update({ ...basicInfo })
+      .eq("id", params.programId);
+
+    if (error) {
+      console.error("Program Save Err", error.message);
+      return "Fail";
+    }
+
+    return "Success";
+  },
+};
diff --git a/src/routes/program/[programId]/+page.svelte b/src/routes/program/[programId]/+page.svelte
new file mode 100644
index 0000000..e787252
--- /dev/null
+++ b/src/routes/program/[programId]/+page.svelte
@@ -0,0 +1,238 @@
+<script>
+  import { enhance } from "$app/forms";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
+  export let data;
+  const { program } = data;
+
+  let bannerImage = {
+    imageUrl: program.bannerImageUrl,
+    imageFile: null,
+    check: false,
+  };
+
+  let bannerComingSoonImage = {
+    imageUrl: program.bannerImageUrlComingSoon,
+    imageFile: null,
+    check: false,
+  };
+
+  let productImage = {
+    imageUrl: program.productImageUrl,
+    imageFile: null,
+    check: false,
+  };
+
+  const handleBannerImageUpload = (event) => {
+    bannerImage.imageFile = event.target.files[0];
+    bannerImage.imageUrl = URL.createObjectURL(event.target.files[0]);
+  };
+
+  const handleBannerComingSoonImageUpload = (event) => {
+    bannerComingSoonImage.imageFile = event.target.files[0];
+    bannerComingSoonImage.imageUrl = URL.createObjectURL(event.target.files[0]);
+  };
+
+  const handleProductImageUpload = (event) => {
+    productImage.imageFile = event.target.files[0];
+    productImage.imageUrl = URL.createObjectURL(event.target.files[0]);
+  };
+
+  const deleteBannerComingSoonImage = () => {
+    bannerComingSoonImage.imageFile = null;
+    bannerComingSoonImage.imageUrl = null;
+  };
+  const deleteBannerImage = () => {
+    bannerImage.imageFile = null;
+    bannerImage.imageUrl = null;
+  };
+  const deleteProductImage = () => {
+    productImage.imageFile = null;
+    productImage.imageUrl = null;
+  };
+
+  const handleSubmit = async ({ formData, cancel }) => {
+    formData.append("name", program.name);
+    formData.append("isComingSoon", program.isComingSoon);
+    formData.append("duration", program.duration);
+    formData.append("feature", program.feature);
+    formData.append("infoText", program.infoText);
+    formData.append("ingredient", program.ingredient);
+    formData.append("manual", program.manual);
+
+    // Image Logic
+    if (bannerImage.imageUrl === null) {
+      alert("배너 이미지는 필수 입니다.");
+      cancel();
+    } else {
+      // Image 를 수정하지 않는 것.
+      if (bannerImage.imageFile === null) {
+        formData.append("bannerImage", "url");
+        formData.append("bannerImageUrl", program.bannerImageUrl);
+      } else {
+        // Image 를 새로 업로드해야 함.
+        formData.append("bannerImage", "file");
+        formData.append("bannerImageFile", bannerImage.imageFile);
+      }
+    }
+    if (bannerComingSoonImage.imageUrl === null) {
+      formData.append("bannerComingSoonImage", "no");
+    } else {
+      // Image 를 수정하지 않는 것.
+      if (bannerImage.imageFile === null) {
+        formData.append("bannerComingSoonImage", "url");
+        formData.append("bannerComingSoonImageUrl", program.bannerImageUrlComingSoon);
+      } else {
+        // Image 를 새로 업로드해야 함.
+        formData.append("bannerComingSoonImage", "file");
+        formData.append("bannerComingSoonImageFile", bannerComingSoonImage.imageFile);
+      }
+    }
+    if (productImage.imageUrl === null) {
+      formData.append("productImage", "no");
+    } else {
+      // Image 를 수정하지 않는 것.
+      if (productImage.imageFile === null) {
+        formData.append("productImage", "url");
+        formData.append("productImageUrl", program.bannerImageUrl);
+      } else {
+        // Image 를 새로 업로드해야 함.
+        formData.append("productImage", "file");
+        formData.append("productImageFile", bannerImage.imageFile);
+      }
+    }
+    return ({ result }) => {
+      if (result.data === "Success") {
+        alert("업데이트 완료.");
+        window.location.reload();
+      }
+    };
+  };
+</script>
+
+<form method="post" action="?/save" use:enhance={handleSubmit}>
+  <div class="mt-20 w-full items-center justify-center">
+    <div class="mx-auto w-full rounded-lg bg-white p-4 shadow-lg">
+      <div class="mb-2">
+        <p class="font-bold">프로그램명</p>
+        <input class="w-full border border-gray-400" bind:value={program.name} />
+      </div>
+
+      <div class="mb-2">
+        <p class="font-bold">Is Coming Soon</p>
+        <select bind:value={program.isComingSoon}>
+          <option value={true}>TRUE</option>
+          <option value={false}>FALSE</option>
+        </select>
+      </div>
+
+      <div class="mb-2">
+        <p class="font-bold">프로그램 소요시간 (분)</p>
+        <input type="number" class="w-full border border-gray-400" bind:value={program.duration} />
+      </div>
+
+      <div class="mb-2">
+        <p class="font-bold">Feature</p>
+        <textarea class=" h-20 w-full border border-gray-400" bind:value={program.feature} />
+      </div>
+
+      <div class="border-[1px] border-black"></div>
+
+      <div class="mb-2">
+        <p class="font-bold">프로그램 설명</p>
+        <textarea class="w-full border border-gray-400" bind:value={program.infoText} />
+      </div>
+
+      <div class="mb-2">
+        <p class="font-bold">프로그램 재료</p>
+        <textarea class="h-20 w-full border border-gray-400" bind:value={program.ingredient} />
+      </div>
+
+      <div class="mb-2">
+        <p class="font-bold">프로그램 메뉴얼</p>
+        <textarea class="h-20 w-full border border-gray-400" bind:value={program.manual} />
+      </div>
+
+      <div class="flex flex-row items-center justify-center">
+        <div class="mr-4">
+          <p class=" font-bold">배너 이미지</p>
+          <img class="h-32 w-32" src={bannerImage.imageUrl} alt="banner" />
+          <button
+            type="button"
+            on:click={() => document.getElementById("bannerImageUpload").click()}
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            >이미지 변경</button>
+          <button
+            type="button"
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            on:click={deleteBannerImage}>이미지 제거</button>
+        </div>
+        <div class="ml-4 mr-4">
+          <p class=" font-bold">배너 커밍순 이미지</p>
+          <img class="h-32 w-32" src={bannerComingSoonImage.imageUrl} alt="bannerComingSoon" />
+          <button
+            type="button"
+            on:click={() => document.getElementById("bannerComingSoonImageUpload").click()}
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            >이미지 변경</button>
+          <button
+            type="button"
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            on:click={deleteBannerComingSoonImage}>이미지 제거</button>
+        </div>
+        <div class="ml-4">
+          <p class=" font-bold">상품 이미지</p>
+          <img class="h-32 w-32" src={productImage.imageUrl} alt="product" />
+          <button
+            type="button"
+            on:click={() => document.getElementById("productImageUpload").click()}
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            >이미지 변경</button>
+          <button
+            type="button"
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            on:click={deleteProductImage}>이미지 제거</button>
+        </div>
+      </div>
+      {#if $page.url.pathname !== "/program/null"}
+        <div class="flex flex-col items-center">
+          <button
+            type="button"
+            on:click={() => goto(`/program/${program.id}/act`)}
+            class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+            >Act 제품 수정하기</button>
+        </div>
+      {/if}
+
+      <div class="mb-2 mt-2 border-[1px] border-black"></div>
+      <div class="flex items-center justify-center">
+        <button
+          type="submit"
+          formaction="?/save"
+          class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+          >저장</button>
+
+        <button
+          type="button"
+          on:click={() => goto("/program")}
+          class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+          >취소</button>
+      </div>
+    </div>
+  </div>
+</form>
+
+<input type="file" on:change={handleBannerImageUpload} id="bannerImageUpload" style="display: none;" accept="image/*" />
+<input
+  type="file"
+  on:change={handleBannerComingSoonImageUpload}
+  id="bannerComingSoonImageUpload"
+  style="display: none;"
+  accept="image/*" />
+<input
+  type="file"
+  on:change={handleProductImageUpload}
+  id="productImageUpload"
+  style="display: none;"
+  accept="image/*" />
diff --git a/src/routes/program/[programId]/act/+page.server.js b/src/routes/program/[programId]/act/+page.server.js
new file mode 100644
index 0000000..032d086
--- /dev/null
+++ b/src/routes/program/[programId]/act/+page.server.js
@@ -0,0 +1,64 @@
+import programRepository from "../../../../lib/repository/programRepository.js";
+import { supabase } from "../../../../lib/supabaseClient.js";
+
+export const load = async ({ params }) => {
+  const programId = params.programId;
+
+  if (programId === "null") {
+    const program = {};
+    return { program };
+  }
+
+  const { program } = await programRepository.fetchProgramById({ programId });
+
+  return { program };
+};
+
+export const actions = {
+  save: async ({ request, params }) => {
+    const acts = await request.formData();
+
+    const actList = [];
+    const length = acts.get("length");
+
+    for (let i = 0; i < length; i++) {
+      let act = {};
+      if (acts.get(`${i}imageFile`) !== null) {
+        // 이미지를 업로드해야 하는 경우.
+        const file = acts.get(`${i}imageFile`);
+        const { data, error } = await supabase.storage
+          .from("program-images")
+          .upload(`img/${params.programId}/act/${i}+${file.name}`, file, {
+            cacheControl: "3600",
+            upsert: true,
+          });
+
+        if (error) throw new Error(error.message);
+
+        let { data: imageUrl } = await supabase.storage.from("program-images").getPublicUrl(data.path);
+        imageUrl = imageUrl.publicUrl;
+        act.imageUrl = imageUrl;
+      } else {
+        act.imageUrl = acts.get(`${i}imageUrl`);
+      }
+
+      act.title = acts.get(`${i}title`);
+      act.subTitle = acts.get(`${i}subTitle`);
+      act.duration = acts.get(`${i}duration`);
+      act.isOvertime = acts.get(`${i}isOvertime`);
+      act.order = acts.get(`${i}order`);
+      act.programId = params.programId;
+
+      actList.push(act);
+    }
+
+    const { error: deleteErr } = await supabase.from("act").delete().eq("programId", params.programId);
+    const { error: insertErr } = await supabase.from("act").insert(actList);
+
+    console.log(insertErr);
+    if (deleteErr) throw new Error(deleteErr.message);
+    if (insertErr) throw new Error(insertErr.message);
+
+    return "Success";
+  },
+};
diff --git a/src/routes/program/[programId]/act/+page.svelte b/src/routes/program/[programId]/act/+page.svelte
new file mode 100644
index 0000000..eebc8e9
--- /dev/null
+++ b/src/routes/program/[programId]/act/+page.svelte
@@ -0,0 +1,226 @@
+<script>
+  import { enhance } from "$app/forms";
+  import { page } from "$app/stores";
+
+  export let data;
+  const { program } = data;
+
+  let newAct = {
+    title: "",
+    subTitle: "",
+    imageUrl: "",
+    imageFile: "",
+    duration: "",
+    isOvertime: false,
+    programId: program.id,
+  };
+  let isModalOpen = false;
+  let newActionImage = false;
+
+  function openModal() {
+    isModalOpen = true;
+  }
+
+  function closeModal() {
+    isModalOpen = false;
+  }
+
+  function handleImageUpload(event) {
+    newAct.imageFile = event.target.files[0];
+    newAct.imageUrl = URL.createObjectURL(event.target.files[0]);
+  }
+
+  function addProgram() {
+    program.act = [...program.act, newAct];
+    closeModal();
+  }
+
+  function addRow() {
+    newAct = {
+      title: "",
+      subTitle: "",
+      imageUrl: "",
+      imageFile: "",
+      duration: "",
+      isOvertime: false,
+      programId: program.id,
+    };
+    newActionImage = false;
+    openModal();
+  }
+
+  function deleteRow(index) {
+    program.act = program.act.filter((_, i) => i !== index);
+  }
+
+  async function handleSubmit({ formData }) {
+    let length = program.act.length;
+
+    for (let i = 0; i < length; i++) {
+      if (program.act[i].id) {
+        formData.append(`${i}imageUrl`, program.act[i].imageUrl);
+        formData.append(`${i}title`, program.act[i].title);
+        formData.append(`${i}subTitle`, program.act[i].subTitle);
+        formData.append(`${i}duration`, program.act[i].duration);
+        formData.append(`${i}isOvertime`, program.act[i].isOverTime);
+        formData.append(`${i}order`, i);
+      } else {
+        formData.append(`${i}title`, program.act[i].title);
+        formData.append(`${i}subTitle`, program.act[i].subTitle);
+        formData.append(`${i}duration`, program.act[i].duration);
+        formData.append(`${i}isOvertime`, program.act[i].isOvertime);
+        formData.append(`${i}order`, i);
+        if (program.act[i].imageFile === "") formData.append(`${i}imageUrl`, program.act[i].imageUrl);
+        else formData.append(`${i}imageFile`, program.act[i].imageFile);
+      }
+    }
+
+    formData.append("length", length);
+
+    return ({ result }) => {
+      if (result.type === "success") {
+        alert("등록되었습니다.");
+        window.location.reload();
+      } else {
+        alert("오류가 발생하였습니다.");
+        window.location.reload();
+      }
+    };
+  }
+</script>
+
+<div class="felx flex-col text-lg font-bold">
+  <h1>Program</h1>
+  <h2>{program.name}</h2>
+</div>
+<form method="post" action="?/save" use:enhance={handleSubmit}>
+  <div class="relative mb-2 flex flex-col items-center overflow-x-auto shadow-md sm:rounded-lg">
+    <p class="mb-2 text-lg font-bold">연결된 상품 목록</p>
+    <table class="w-full table-fixed text-left text-sm text-gray-500 rtl:text-right dark:text-gray-400">
+      <thead class="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3"> Index </th>
+          <th scope="col" class="px-6 py-3"> Image </th>
+          <th scope="col" class="px-6 py-3"> Name </th>
+          <th scope="col" class="px-6 py-3"> Ingredient </th>
+          <th scope="col" class="px-6 py-3"> Description </th>
+          <th scope="col" class="px-6 py-3"> Feature </th>
+          <th scope="col" class="px-6 py-3"> Link </th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each program.product as product, idx}
+          <tr class="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+            <td class="px-6 py-4"> {idx + 1} </td>
+            <th scope="row" class="flex items-center whitespace-nowrap py-4 text-gray-900 dark:text-white">
+              <img class="object-fit h-20 w-20" src={product?.imageUrl} alt="product" />
+            </th>
+            <td class="px-6 py-4"> {product?.name} </td>
+            <td class="px-6 py-4">
+              <div class="flex items-center">
+                {product?.ingredient}
+              </div>
+            </td>
+            <td class="px-6 py-4">
+              {product?.description.substring(0, 30)}...
+            </td>
+            <td class="overflow-hidden px-6 py-4">
+              {product?.feature.substring(0, 10)}...
+            </td>
+            <td class="overflow-hidden px-6 py-4">
+              <a href={product?.shoppingUrl}> {product?.shoppingUrl} </a>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  <div class="relative mb-2 flex flex-col items-center overflow-x-auto shadow-md sm:rounded-lg">
+    <p class="mb-2 text-lg font-bold">Act</p>
+    <table class="w-full table-fixed text-left text-sm text-gray-500 rtl:text-right dark:text-gray-400">
+      <thead class="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th scope="col" class="px-6 py-3"> Index </th>
+          <th scope="col" class="px-6 py-3"> Title </th>
+          <th scope="col" class="px-6 py-3"> SubTitle </th>
+          <th scope="col" class="px-6 py-3"> Image </th>
+          <th scope="col" class="px-6 py-3"> Duration (Minute) </th>
+          <th scope="col" class="px-6 py-3"> isOverTime </th>
+          <th scope="col" class="px-6 py-3"> Actions </th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each program.act as act, idx}
+          <tr class="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
+            <td class="px-6 py-4"> {idx + 1} </td>
+
+            <td class="px-6 py-4"> {act.title} </td>
+            <td class="px-6 py-4">
+              <div class="flex items-center">
+                {act.subTitle}
+              </div>
+            </td>
+            <th scope="row" class="flex items-center whitespace-nowrap py-4 text-gray-900 dark:text-white">
+              <img class="object-fit h-20 w-20" src={act.imageUrl} alt="product" />
+            </th>
+            <td class="px-6 py-4">
+              {act.duration}
+            </td>
+            <td class="overflow-hidden px-6 py-4">
+              {act.isOvertime}
+            </td>
+            <td class="px-6 py-4">
+              <button
+                type="button"
+                class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+                on:click={() => deleteRow(idx)}>Delete</button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    <div class="mt-4">
+      <button
+        type="button"
+        class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+        on:click={addRow}>Add Row</button>
+    </div>
+  </div>
+
+  <div class="flex items-center justify-center">
+    <button
+      type="submit"
+      on:click={handleSubmit}
+      class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      >저장</button>
+
+    <button
+      type="button"
+      class="mb-2 me-2 rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+      >취소</button>
+  </div>
+</form>
+
+{#if isModalOpen}
+  <div class="fixed inset-0 z-10 flex items-center justify-center">
+    <div class="absolute inset-0 bg-gray-900 opacity-50"></div>
+    <div class="z-20 rounded bg-white p-6 shadow-md">
+      <h2 class="mb-4 text-lg font-semibold">Add New Program</h2>
+      <input type="text" placeholder="Title" bind:value={newAct.title} class="mb-2 w-full rounded border p-2" />
+      <input type="text" placeholder="Subtitle" bind:value={newAct.subTitle} class="mb-2 w-full rounded border p-2" />
+      <input type="file" accept="image/*" class="mb-2 w-full rounded border p-2" on:change={handleImageUpload} />
+      <img src={newAct.imageUrl} alt="Preview" class="mb-2 h-32 w-32" />
+      <input type="number" placeholder="Duration" bind:value={newAct.duration} class="mb-2 w-full rounded border p-2" />
+      <label class="flex items-center">
+        <input type="checkbox" bind:checked={newAct.isOvertime} class="mr-2" />
+        <span>Is Overtime</span>
+      </label>
+      <div class="mt-4 flex justify-end">
+        <button class="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600" on:click={addProgram}>Add</button>
+        <button class="ml-2 rounded bg-gray-400 px-4 py-2 text-white" on:click={closeModal}>Cancel</button>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/routes/program/[programId]/act/+server.js b/src/routes/program/[programId]/act/+server.js
new file mode 100644
index 0000000..0fbe2ad
--- /dev/null
+++ b/src/routes/program/[programId]/act/+server.js
@@ -0,0 +1 @@
+import { supabase } from "../../../../lib/supabaseClient.js";
diff --git a/src/routes/user/[userId]/+page.svelte b/src/routes/user/[userId]/+page.svelte
index 44ae76b..8374cdb 100644
--- a/src/routes/user/[userId]/+page.svelte
+++ b/src/routes/user/[userId]/+page.svelte
@@ -61,7 +61,6 @@
 
     const contact = [["일시", "분류", "문의 내용", "답변 내용", "처리"]];
 
-    console.log(user.contact);
     user.contact.forEach((err) => {
       contact.push([
         err.createdAt ? new Date(err.createdAt).toLocaleString() : "",