diff --git a/proyek-frontend/app/components/templates/UltahBasic/Event.vue b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
new file mode 100644
index 0000000..8a82edb
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="text-center p-6">
+      <h2 class="text-3xl font-bold text-orange-700 mb-6">🎈 Acara Ulang Tahun 🎈</h2>
+  
+      <div class="bg-white/70 backdrop-blur-md rounded-2xl shadow-lg p-6 inline-block text-gray-700">
+        <p><strong>Hari & Tanggal:</strong> {{ formatDate(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 hover:underline"
+        >
+          📍 Lihat di Google Maps
+        </a>
+      </div>
+  
+      <div v-if="countdownText" class="mt-8 text-xl font-semibold text-orange-700">
+        ⏰ {{ countdownText }}
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, watchEffect } from 'vue'
+  
+  const props = defineProps({
+    hari_tanggal_acara: String,
+    waktu: String,
+    alamat: String,
+    link_gmaps: String,
+    hitung_mundur: String
+  })
+  
+  const countdownText = ref('')
+  
+  // Format tanggal
+  function formatDate(dateStr) {
+    if (!dateStr) return '-'
+    const date = new Date(dateStr)
+    return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+  }
+  
+  // Countdown
+  watchEffect(() => {
+    if (!props.hitung_mundur) return
+  
+    const target = new Date(props.hitung_mundur)
+    const now = new Date()
+    const diff = target - now
+  
+    if (diff <= 0) {
+      countdownText.value = 'Acara sedang berlangsung 🎉'
+    } else {
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
+      const minutes = Math.floor((diff / (1000 * 60)) % 60)
+      countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
+    }
+  })
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
new file mode 100644
index 0000000..fabec2c
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="p-6 text-center">
+      <h2 class="text-3xl font-bold text-orange-700 mb-6">📸 Galeri Foto 📸</h2>
+  
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-4 max-w-3xl mx-auto">
+        <div
+          v-for="(img, i) in images"
+          :key="i"
+          class="overflow-hidden rounded-xl shadow-md"
+        >
+          <img
+            :src="img"
+            alt="Galeri"
+            class="object-cover w-full h-48 transform hover:scale-105 transition"
+          />
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    images: Array
+  })
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
new file mode 100644
index 0000000..cb7f2c4
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="p-6 text-center max-w-xl mx-auto">
+      <h2 class="text-3xl font-bold text-orange-700 mb-6">💌 Buku Tamu 💌</h2>
+  
+      <div class="bg-white/70 backdrop-blur-md rounded-2xl p-6 shadow-md">
+        <form @submit.prevent="submitMessage">
+          <textarea
+            v-model="newMessage"
+            class="w-full p-3 border border-yellow-400 rounded-lg focus:ring focus:ring-yellow-300"
+            rows="3"
+            placeholder="Tulis ucapan untuk {{ guestName }}..."
+          ></textarea>
+  
+          <button
+            type="submit"
+            class="mt-3 bg-orange-500 hover:bg-orange-600 text-white px-6 py-2 rounded-full shadow-md transition"
+          >
+            Kirim Ucapan
+          </button>
+        </form>
+      </div>
+  
+      <div class="mt-6 space-y-3">
+        <div
+          v-for="(msg, i) in messages"
+          :key="i"
+          class="bg-white/60 p-3 rounded-xl shadow text-gray-700"
+        >
+          💬 {{ msg }}
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue'
+  
+  const props = defineProps({
+    guestName: String,
+    messages: Array
+  })
+  
+  const emit = defineEmits(['addMessage'])
+  const newMessage = ref('')
+  
+  function submitMessage() {
+    if (!newMessage.value.trim()) return
+    emit('addMessage', newMessage.value)
+    newMessage.value = ''
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue b/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue
new file mode 100644
index 0000000..f4962e9
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/Introduction.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="flex flex-col items-center text-center p-6 space-y-4">
+      <img
+        v-if="childPhoto"
+        :src="childPhoto"
+        alt="Foto Anak"
+        class="w-40 h-40 rounded-full object-cover border-4 border-yellow-400 shadow-md"
+      />
+      <h2 class="text-3xl font-bold text-orange-700 mt-4">Halo, Aku {{ childName }}</h2>
+      <p class="text-gray-700">Usiaku kini {{ age }} tahun 🎉</p>
+      <p class="text-gray-600">Putra/Putri dari</p>
+      <p class="text-lg font-semibold text-gray-800">{{ parentsName }}</p>
+      <p class="mt-6 text-gray-700">
+        Aku sangat senang jika kamu bisa hadir di pesta ulang tahunku!
+      </p>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    childName: String,
+    parentsName: String,
+    age: [String, Number],
+    childPhoto: String
+  })
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Landing.vue b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
new file mode 100644
index 0000000..23ac980
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
@@ -0,0 +1,23 @@
+<template>
+    <div
+      class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen"
+    >
+      <h1 class="text-4xl md:text-5xl font-extrabold mb-4">🎂 Undangan Ulang Tahun 🎂</h1>
+      <p class="text-lg mb-6">Hai <span class="font-semibold">{{ guestName }}</span>!</p>
+      <p class="text-lg mb-8">Yuk, datang ke acara ulang tahun <span class="font-bold">{{ childName }}</span>!</p>
+      <button
+        @click="$emit('open-invitation')"
+        class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-full text-lg shadow-md transition"
+      >
+        Buka Undangan
+      </button>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    childName: String,
+    guestName: String,
+  })
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue b/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
new file mode 100644
index 0000000..e647b24
--- /dev/null
+++ b/proyek-frontend/app/components/templates/UltahBasic/ThankYou.vue
@@ -0,0 +1,28 @@
+<template>
+    <div class="flex flex-col items-center justify-center text-center p-6 space-y-6">
+      <h2 class="text-3xl font-bold text-orange-700">Terima Kasih! 🙏</h2>
+      <p class="text-gray-700">Sudah meluangkan waktu untuk melihat undangan ulang tahunku 💛</p>
+  
+      <p class="text-lg font-semibold text-gray-800">
+        Salam hangat dari <span class="text-orange-600 font-bold">{{ childName }}</span>
+      </p>
+  
+      <div v-if="saySomething" class="bg-white/70 p-4 rounded-xl shadow-md max-w-lg">
+        <p class="italic text-gray-600">“{{ saySomething }}”</p>
+      </div>
+  
+      <div v-if="rekening" class="mt-6 text-gray-700">
+        <p>🎁 Kirim hadiah ke rekening:</p>
+        <p class="font-semibold text-orange-700">{{ rekening }}</p>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  defineProps({
+    childName: String,
+    saySomething: String,
+    rekening: String
+  })
+  </script>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
new file mode 100644
index 0000000..7ebf418
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-ulang-tahun-basic.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="min-h-screen bg-gradient-to-br from-yellow-200 via-yellow-300 to-yellow-400 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('guestbook')" :class="navClass('guestbook')">Guest Book</button></li>
+          <li><button @click="switchSection('thanks')" :class="navClass('thanks')">Thanks</button></li>
+        </ul>
+      </nav>
+  
+      <!-- Tombol Musik -->
+      <div class="fixed bottom-4 left-4 z-30" v-if="currentSection !== 'landing'">
+        <button
+          @click="toggleMusic"
+          class="bg-yellow-600 hover:bg-yellow-700 p-3 rounded-full text-white shadow-lg transition-transform hover:scale-110"
+        >
+          {{ isPlaying ? '⏸️' : '▶️' }}
+        </button>
+      </div>
+  
+      <!-- Main Section -->
+      <main
+        class="relative z-10 min-h-screen flex items-center justify-center p-4 transition-all duration-700 ease-in-out"
+      >
+        <!-- Landing -->
+        <Landing
+          v-if="currentSection === 'landing'"
+          :childName="formData.nama_panggilan"
+          :guestName="data.nama_tamu"
+          @open-invitation="switchSection('introduction')"
+        />
+  
+        <!-- Introduction -->
+        <Introduction
+          v-if="currentSection === 'introduction'"
+          :age="formData.umur_yang_dirayakan"
+          :childName="formData.nama_lengkap"
+          :childOrder="formData.anak_ke"
+          :parentsName="`${formData.nama_bapak} & ${formData.nama_ibu}`"
+          :childPhoto="formData.foto && formData.foto.length ? `${backendUrl}/storage/${formData.foto[0]}` : null"
+        />
+  
+        <!-- Event -->
+        <Event
+          v-if="currentSection === 'event'"
+          :hari_tanggal_acara="formData.hari_tanggal_acara"
+          :waktu="formData.waktu"
+          :alamat="formData.alamat"
+          :link_gmaps="formData.link_gmaps"
+          :hitung_mundur="formData.hitung_mundur"
+        />
+  
+        <!-- Gallery -->
+        <Gallery v-if="currentSection === 'gallery'" :images="galleryImages" />
+  
+        <!-- Guest Book -->
+        <GuestBook
+          v-if="currentSection === 'guestbook'"
+          :guestName="data.nama_tamu"
+          :messages="messages"
+          @addMessage="addMessage"
+        />
+  
+        <!-- Thank You -->
+        <ThankYou
+          v-if="currentSection === 'thanks'"
+          :childName="formData.nama_panggilan"
+          :jsonData="formData"
+        />
+      </main>
+  
+      <!-- Footer -->
+      <footer
+        class="bg-white/40 backdrop-blur-md text-center py-4 text-gray-700 font-medium border-t border-yellow-300"
+      >
+        <p>© {{ new Date().getFullYear() }} Undangan Ulang Tahun Basic | Dibuat dengan 💛 oleh Arief Dwi Wicaksono</p>
+      </footer>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed, watchEffect } from 'vue'
+  import { useRuntimeConfig } from '#app'
+  
+  // Import Komponen
+  import Landing from '~/components/templates/UltahBasic/Landing.vue'
+  import Introduction from '~/components/templates/UltahBasic/Introduction.vue'
+  import Event from '~/components/templates/UltahBasic/Event.vue'
+  import Gallery from '~/components/templates/UltahBasic/Gallery.vue'
+  import GuestBook from '~/components/templates/UltahBasic/GuestBook.vue'
+  import ThankYou from '~/components/templates/UltahBasic/ThankYou.vue'
+  
+  // Props dari halaman induk
+  const props = defineProps({
+    data: { type: Object, required: true }
+  })
+  
+  // Runtime config (untuk backend URL)
+  const config = useRuntimeConfig()
+  const backendUrl = config.public.apiBaseUrl
+  
+  // Data dari backend
+  const formData = computed(() => props.data.form || {})
+  
+  // Galeri gambar (support foto array atau field lama)
+  const galleryImages = computed(() => {
+    const f = formData.value.foto
+    if (Array.isArray(f)) {
+      return f.map(img => `${backendUrl}/storage/${img}`)
+    }
+    return [
+      formData.value.foto_1,
+      formData.value.foto_2,
+      formData.value.foto_3,
+      formData.value.foto_4,
+      formData.value.foto_5
+    ].filter(Boolean).map(img => `${backendUrl}/${img}`)
+  })
+  
+  watchEffect(() => {
+    console.log("🧾 formData:", formData.value)
+    console.log("🖼️ galleryImages:", galleryImages.value)
+  })
+  
+  // Navigasi antar bagian
+  const currentSection = ref('landing')
+  const switchSection = (s) => (currentSection.value = s)
+  
+  // Musik toggle
+  const isPlaying = ref(false)
+  const toggleMusic = () => (isPlaying.value = !isPlaying.value)
+  
+  // Buku tamu
+  const messages = ref([])
+  const addMessage = (msg) => messages.value.push(msg)
+  
+  // Style untuk navigasi aktif
+  const navClass = (s) =>
+    currentSection.value === s
+      ? 'text-yellow-800 underline underline-offset-4'
+      : 'hover:text-yellow-600 transition-colors'
+  </script>
+  
+  <style scoped>
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  button {
+    transition: all 0.3s ease;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/proyek-frontend/app/pages/form/pernikahan/premium.vue b/proyek-frontend/app/pages/form/pernikahan/premium.vue
index 132f6e7..243ca89 100644
--- a/proyek-frontend/app/pages/form/pernikahan/premium.vue
+++ b/proyek-frontend/app/pages/form/pernikahan/premium.vue
@@ -288,7 +288,7 @@
                 <textarea v-model="form.form.alamat_akad" rows="3" placeholder=" " required class="peer w-full border border-gray-300 rounded-lg px-2.5 pt-5 pb-1.5 text-sm resize-none
                    focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition"></textarea>
                 <label class="absolute left-2 text-gray-400 transition-all
-                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm
+                 peer-placeholder-shown:top-4 peer-placeholder-shown:text-sm 
                  peer-focus:top-0 peer-focus:text-[10px] peer-focus:text-blue-500
                  peer-valid:top-0 peer-valid:text-[10px] peer-valid:text-gray-500">
                   Alamat Akad
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
index aaa4efb..accf2de 100644
--- a/proyek-frontend/app/pages/p/[code].vue
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -106,9 +106,7 @@ const componentMap = {
   'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
   'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
   'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
-  
-
-
+  'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.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 f52a847..f0647ba 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -279,6 +279,7 @@ const componentMap = {
   'undangan-khitan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-khitan-premium.vue')),
   'undangan-ulang-tahun-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-premium.vue')),
   'undangan-pernikahan-premium': defineAsyncComponent(() => import('~/components/undangan/undangan-pernikahan-premium.vue')),
+  'undangan-ulang-tahun-basic': defineAsyncComponent(() => import('~/components/undangan/undangan-ulang-tahun-basic.vue'))
   // Add more mappings as templates are developed
 }