diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Event.vue b/proyek-frontend/app/components/templates/KhitanStarter/Event.vue
new file mode 100644
index 0000000..60a3559
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Event.vue
@@ -0,0 +1,29 @@
+<template>
+  <section class="min-h-screen flex flex-col items-center justify-center bg-blue-50 text-center px-6">
+    <div class="max-w-2xl bg-white rounded-2xl shadow-lg p-8 space-y-4">
+      <h2 class="text-2xl font-bold text-blue-700 mb-4">📅 Acara Tasyakuran</h2>
+
+      <p><strong>Hari & Tanggal:</strong> {{ hari_tanggal_acara }}</p>
+      <p><strong>Waktu:</strong> {{ waktu }}</p>
+      <p><strong>Alamat:</strong> {{ alamat }}</p>
+
+      <a
+        v-if="link_gmaps"
+        :href="link_gmaps"
+        target="_blank"
+        class="inline-block mt-4 text-blue-600 font-semibold underline hover:text-blue-800"
+      >
+        Lihat di Google Maps
+      </a>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  hari_tanggal_acara: String,
+  waktu: String,
+  alamat: String,
+  link_gmaps: String
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue b/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue
new file mode 100644
index 0000000..44ee306
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Gallery.vue
@@ -0,0 +1,28 @@
+<template>
+  <section class="min-h-screen bg-white py-12 px-6">
+    <div class="text-center mb-10">
+      <h2 class="text-3xl font-bold text-blue-700">Galeri</h2>
+      <p class="text-gray-600">Momen istimewa kami</p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-3xl mx-auto">
+      <div
+        v-for="(img, index) in images"
+        :key="index"
+        class="overflow-hidden rounded-2xl shadow-md"
+      >
+        <img
+          :src="img"
+          alt="Foto Galeri"
+          class="w-full h-64 object-cover hover:scale-105 transition-transform duration-500"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  images: { type: Array, default: () => [] }
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue b/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue
new file mode 100644
index 0000000..4ba2251
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/Introduction.vue
@@ -0,0 +1,25 @@
+<template>
+  <section class="min-h-screen flex flex-col justify-center items-center bg-white px-6 text-center">
+    <div class="max-w-2xl space-y-6">
+      <h2 class="text-3xl font-bold text-blue-700 mb-4">Assalamu’alaikum Warahmatullahi Wabarakatuh</h2>
+      <p class="text-gray-700 leading-relaxed">
+        Dengan penuh rasa syukur ke hadirat Allah SWT, kami bermaksud mengadakan
+        acara tasyakuran khitan putra kami:
+      </p>
+
+      <h3 class="text-4xl text-blue-800 font-bold mt-6">{{ nama_lengkap }}</h3>
+
+      <p class="text-gray-700 mt-6">
+        Putra dari pasangan <strong>{{ nama_bapak }}</strong> dan <strong>{{ nama_ibu }}</strong>.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  nama_lengkap: String,
+  nama_bapak: String,
+  nama_ibu: String
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue b/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue
new file mode 100644
index 0000000..c5380dd
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/KhitanA.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-50 to-blue-200 text-center relative overflow-hidden">
+    <!-- Background Ornaments -->
+    <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_left,_white,_transparent_70%)]"></div>
+
+    <!-- Title -->
+    <div class="z-10 space-y-4 animate-fade-in-down">
+      <h1 class="text-blue-700 text-3xl md:text-5xl font-bold">Undangan Tasyakuran Khitan</h1>
+      <h2 class="text-gray-700 text-2xl md:text-4xl font-semibold">{{ childName }}</h2>
+    </div>
+
+    <!-- Guest -->
+    <div class="z-10 mt-10 bg-white/60 backdrop-blur-sm rounded-xl p-5 shadow-md animate-fade-in-up">
+      <p class="text-gray-600 text-sm mb-1">Kepada Yth.</p>
+      <p class="text-blue-800 text-xl font-bold">{{ guestName || 'Tamu Undangan' }}</p>
+    </div>
+
+    <!-- Button -->
+    <button
+      @click="$emit('next-page')"
+      class="z-10 mt-12 px-8 py-3 bg-blue-600 text-white font-semibold rounded-full shadow-md hover:bg-blue-700 transition duration-300"
+    >
+      Buka Undangan
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  guestName: String
+})
+</script>
+
+<style scoped>
+@keyframes fadeInDown {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in-down { animation: fadeInDown 0.8s ease-out; }
+.animate-fade-in-up { animation: fadeInUp 0.8s ease-out; }
+</style>
diff --git a/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue b/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue
new file mode 100644
index 0000000..11f6d02
--- /dev/null
+++ b/proyek-frontend/app/components/templates/KhitanStarter/ThankYou.vue
@@ -0,0 +1,24 @@
+<template>
+  <section class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-blue-100 to-blue-300 text-center px-6">
+    <div class="max-w-xl space-y-6">
+      <h2 class="text-3xl font-bold text-blue-700">Terima Kasih</h2>
+      <p class="text-gray-700 leading-relaxed">
+        Terima kasih atas doa dan kehadiran Bapak/Ibu/Saudara/i dalam acara kami.
+        Semoga mendapatkan keberkahan dan kebahagiaan selalu.
+      </p>
+
+      <p class="text-xl font-semibold text-blue-800 mt-4">
+        {{ childName }}
+      </p>
+
+      <p class="text-gray-600">Beserta keluarga</p>
+    </div>
+  </section>
+</template>
+
+<script setup>
+defineProps({
+  childName: String,
+  jsonData: Object
+})
+</script>
diff --git a/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue b/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue
deleted file mode 100644
index 1318c52..0000000
--- a/proyek-frontend/app/components/templates/UltahStarter/GuestBook.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gradient-to-br from-yellow-200 to-orange-200 py-10 px-6 text-center">
-    <h2 class="text-3xl font-bold text-orange-700 mb-6">📖 Buku Tamu</h2>
-
-    <p class="mb-4">Tinggalkan ucapan terbaikmu untuk {{ guestName || 'Teman Kami' }} 💌</p>
-
-    <form @submit.prevent="submitMessage" class="max-w-md mx-auto bg-white p-6 rounded-2xl shadow-md">
-      <textarea
-        v-model="message"
-        rows="3"
-        placeholder="Tulis ucapan di sini..."
-        class="w-full border rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-orange-400"
-      ></textarea>
-
-      <button
-        type="submit"
-        class="mt-4 bg-orange-600 text-white py-2 px-6 rounded-full hover:bg-orange-700 transition"
-      >
-        Kirim
-      </button>
-    </form>
-
-    <div v-if="messages.length" class="mt-8 max-w-md mx-auto text-left">
-      <h3 class="text-lg font-semibold text-gray-700 mb-3">Ucapan:</h3>
-      <ul class="space-y-3">
-        <li v-for="(msg, i) in messages" :key="i" class="bg-white p-4 rounded-lg shadow">
-          {{ msg }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  guestName: String,
-  messages: Array
-})
-
-const emit = defineEmits(['addMessage'])
-const message = ref('')
-
-const submitMessage = () => {
-  if (message.value.trim()) {
-    emit('addMessage', message.value)
-    message.value = ''
-  }
-}
-</script>
diff --git a/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue b/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
index e69de29..3668166 100644
--- a/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-khitan-starter.vue
@@ -0,0 +1,134 @@
+<template>
+    <div
+      class="min-h-screen bg-gradient-to-b from-blue-100 via-blue-200 to-blue-300 relative overflow-hidden"
+    >
+      <!-- ================= NAVIGATION ================= -->
+      <nav
+        v-if="currentSection !== 'landing'"
+        class="absolute top-4 left-1/2 transform -translate-x-1/2 z-20"
+      >
+        <ul
+          class="flex space-x-6 bg-white/40 backdrop-blur-md px-6 py-3 rounded-full shadow-md text-sm font-semibold text-gray-800"
+        >
+          <li><button @click="switchSection('introduction')" :class="navClass('introduction')">Intro</button></li>
+          <li><button @click="switchSection('event')" :class="navClass('event')">Event</button></li>
+          <li><button @click="switchSection('gallery')" :class="navClass('gallery')">Gallery</button></li>
+          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
+        </ul>
+      </nav>
+  
+      <!-- ================= MUSIK CONTROL ================= -->
+      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+        <button @click="toggleMusic" class="bg-blue-600 p-3 rounded-full text-white shadow-lg">
+          {{ isPlaying ? '⏸️' : '▶️' }}
+        </button>
+        <audio ref="audioPlayer" :src="musicUrl" loop></audio>
+      </div>
+  
+      <!-- ================= MAIN CONTENT ================= -->
+      <main
+        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
+      >
+        <!-- Landing Page -->
+        <KhitanAStarter
+          v-if="currentSection === 'landing'"
+          :childName="formData.nama_lengkap"
+          :guestName="data.nama_tamu"
+          @next-page="switchSection('introduction')"
+        />
+  
+        <!-- Introduction -->
+        <KhitanIntroductionStarter
+          v-if="currentSection === 'introduction'"
+          :nama_lengkap="formData.nama_lengkap"
+          :nama_bapak="formData.nama_bapak"
+          :nama_ibu="formData.nama_ibu"
+        />
+  
+        <!-- Event -->
+        <KhitanEventStarter
+          v-if="currentSection === 'event'"
+          :hari_tanggal_acara="formData.hari_tanggal_acara"
+          :waktu="formData.waktu"
+          :alamat="formData.alamat"
+        />
+  
+        <!-- Gallery -->
+        <KhitanGalleryStarter
+          v-if="currentSection === 'gallery'"
+          :images="galleryImages"
+        />
+  
+        <!-- Thank You -->
+        <KhitanThankYouStarter
+          v-if="currentSection === 'thanks'"
+          :childName="formData.nama_lengkap"
+          :jsonData="formData"
+        />
+      </main>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue'
+  import { useRuntimeConfig } from '#app'
+  
+  // ================== IMPORT KOMPONEN ==================
+  import KhitanAStarter from '~/components/templates/KhitanStarter/KhitanA.vue'
+  import KhitanIntroductionStarter from '~/components/templates/KhitanStarter/Introduction.vue'
+  import KhitanEventStarter from '~/components/templates/KhitanStarter/Event.vue'
+  import KhitanGalleryStarter from '~/components/templates/KhitanStarter/Gallery.vue'
+  import KhitanThankYouStarter from '~/components/templates/KhitanStarter/ThankYou.vue'
+  
+  // ================== PROPS ==================
+  const props = defineProps({
+    data: { type: Object, required: true }
+  })
+  
+  // ================== BACKEND CONFIG ==================
+  const config = useRuntimeConfig()
+  const backendUrl = config.public.apiBaseUrl
+  
+  // ================== FORM DATA ==================
+  const formData = computed(() => props.data.form || {})
+  
+  // ================== GALERI ==================
+  const galleryImages = computed(() => {
+    const f = formData.value
+    return [f.foto_1, f.foto_2].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  })
+  
+  // ================== NAVIGASI SECTION ==================
+  const currentSection = ref('landing')
+  const switchSection = (s) => (currentSection.value = s)
+  
+  // ================== MUSIK ==================
+  const audioPlayer = ref(null)
+  const isPlaying = ref(false)
+  const musicUrl = computed(() =>
+    formData.value.link_music ? `${backendUrl}/${formData.value.link_music}` : ''
+  )
+  
+  const toggleMusic = () => {
+    if (!audioPlayer.value) return
+    if (isPlaying.value) {
+      audioPlayer.value.pause()
+    } else {
+      audioPlayer.value.play()
+    }
+    isPlaying.value = !isPlaying.value
+  }
+  
+  // ================== STYLE NAV ==================
+  const navClass = (s) =>
+    currentSection.value === s
+      ? 'text-blue-800 underline'
+      : 'hover:text-blue-700'
+  </script>
+  
+  <style scoped>
+  main {
+    transition: all 0.7s ease-in-out;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
index efbecd4..da514ae 100644
--- a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-starter.vue
@@ -103,7 +103,6 @@
 import Introduction from '~/components/templates/UltahStarter/Introduction.vue'
 import Event from '~/components/templates/UltahStarter/Event.vue'
 import Gallery from '~/components/templates/UltahStarter/Gallery.vue'
-import GuestBook from '~/components/templates/UltahStarter/GuestBook.vue'
 import ThankYou from '~/components/templates/UltahStarter/ThankYou.vue'
 
   
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index 9cb17ca..875ddd9 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -108,7 +108,8 @@ const componentMap = {
   'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
   'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
   'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
-  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
+  'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
   // Add more mappings as templates are developed
 }
 
diff --git a/proyek-frontend/app/pages/preview/[id].vue b/proyek-frontend/app/pages/preview/[id].vue
index fc60aea..94f7a37 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -281,7 +281,8 @@ const componentMap = {
   'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
   'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue')),
   'undangan-ulang-tahun-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-starter.vue')),
-  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue'))
+  'undangan-khitan-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-basic.vue')),
+  'undangan-khitan-starter': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-starter.vue'))
   // Add more mappings as templates are developed
 }