diff --git a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
index 93937d0..abf543d 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/GuestBook.vue
@@ -1,64 +1,76 @@
 <template>
   <div class="p-6 text-center max-w-2xl mx-auto relative">
-    <h2
-      class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8"
-    >
+    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
       💌 Buku Tamu 💌
     </h2>
 
     <!-- 🎈 Balon Kiri -->
-    <img
-      src="/balloon2.png"
-      alt="Balloons Left"
-      class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none"
-    />
+    <img src="/balloon2.png" alt="Balloons Left"
+      class="absolute w-32 md:w-40 -top-12 -left-7.5 animate-swing-top pointer-events-none select-none" />
 
     <!-- 🎈 Balon Kanan -->
-    <img
-      src="/balloon2.png"
-      alt="Balloons Right"
-      class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none"
-    />
+    <img src="/balloon2.png" alt="Balloons Right"
+      class="absolute w-32 md:w-40 -top-12 -right-10.5 animate-swing-top pointer-events-none select-none" />
 
-    <!-- 💌 Card Utama -->
-    <div
-      class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10"
-    >
+    <!-- 💌 Form RSVP -->
+    <div class="bg-white/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-yellow-100 mb-8 relative z-10">
       <form @submit.prevent="submitMessage" class="space-y-4">
-        <textarea
-          v-model="newMessage"
-          class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"
-          rows="4"
-          placeholder="Tulis ucapan untuk {{ guestName }}..."
-        ></textarea>
+        <!-- Nama Tamu -->
+        <div>
+          <input v-model="form.name" type="text" :placeholder="guest || 'Nama Lengkap Tamu'"
+            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300"
+            :disabled="!!guest" />
+        </div>
 
-        <button
-          type="submit"
-          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-3 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
-          :disabled="!newMessage.trim()"
-        >
-          ✨ Kirim Ucapan
+        <!-- Pesan/Ucapan -->
+        <div>
+          <textarea v-model="form.message" rows="4" placeholder="Tulis ucapan dan harapan terbaik..."
+            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 resize-none"></textarea>
+        </div>
+
+        <!-- Status Kehadiran -->
+        <div>
+          <select v-model="form.attendance"
+            class="w-full p-4 border-2 border-yellow-300 rounded-2xl focus:ring-2 focus:ring-orange-400 focus:border-orange-400 transition-all duration-300 appearance-none bg-white">
+            <option value="hadir">✅ Saya Hadir</option>
+            <option value="tidak_hadir">❌ Tidak Hadir</option>
+            <option value="mungkin">🤔 Mungkin Hadir</option>
+          </select>
+        </div>
+
+        <!-- Error Message -->
+        <div v-if="errorMessage" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl">
+          {{ errorMessage }}
+        </div>
+
+        <!-- Submit Button -->
+        <button type="submit" :disabled="!form.name.trim() || !form.message.trim() || submitLoading"
+          class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed w-full text-lg">
+          ✨ {{ submitLoading ? 'Mengirim...' : 'Kirim RSVP' }}
         </button>
       </form>
     </div>
 
     <!-- 💬 Daftar Pesan -->
-    <div class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
-      <div
-        v-for="(msg, i) in messages"
-        :key="i"
-        class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300"
-      >
-        <div class="flex items-start space-x-3">
-          <div class="bg-gradient-to-r from-orange-500 to-yellow-500 p-2 rounded-full">
-            <span class="text-white text-sm">💬</span>
-          </div>
-          <p class="text-gray-700 text-left flex-1">{{ msg }}</p>
+    <div v-if="fetchLoading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-orange-500 mr-4"></div>
+      <span class="text-2xl font-semibold text-orange-700">Memuat ucapan...</span>
+    </div>
+
+    <div v-else class="space-y-4 max-h-96 overflow-y-auto px-2 relative z-10">
+      <div v-for="(msg, i) in messages" :key="msg.id || i"
+        class="bg-white/80 backdrop-blur-md p-6 rounded-2xl shadow-lg border-l-4 border-orange-400 transform hover:scale-105 transition-all duration-300">
+        <div class="flex items-start justify-between mb-2">
+          <span class="font-bold text-orange-800 text-lg">{{ msg.nama }}</span>
+          <span :class="getAttendanceClass(msg.status_kehadiran)" class="px-3 py-1 rounded-full text-sm font-semibold">
+            {{ formatAttendance(msg.status_kehadiran) }}
+          </span>
         </div>
+        <p class="text-gray-700 text-left">{{ msg.pesan }}</p>
       </div>
 
       <div v-if="messages.length === 0" class="bg-white/60 p-8 rounded-2xl">
-        <p class="text-gray-600">
+        <p class="text-gray-600 text-lg">
           Belum ada ucapan. Jadilah yang pertama mengucapkan!
         </p>
       </div>
@@ -67,21 +79,109 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue';
+import { useRoute, useRuntimeConfig } from '#app';
 
-const props = defineProps({
-  guestName: String,
-  messages: Array
-})
+const route = useRoute();
+const config = useRuntimeConfig();
+const backendUrl = config.public.apiBaseUrl;
+const invitationCode = route.params.code || '';
+const guest = route.query.guest
 
-const emit = defineEmits(['addMessage'])
-const newMessage = ref('')
 
-function submitMessage() {
-  if (!newMessage.value.trim()) return
-  emit('addMessage', newMessage.value)
-  newMessage.value = ''
-}
+const messages = ref([]);
+const form = ref({ name: '', message: '', attendance: 'hadir' });
+
+
+// Fungsi untuk mengambil daftar RSVP dari backend
+const fetchMessages = async () => {
+  try {
+    const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`);
+    if (!response.ok) throw new Error('Gagal mengambil data RSVP');
+
+    const data = await response.json();
+    messages.value = data.data || [];
+  } catch (error) {
+    console.error('Error mengambil RSVP:', error);
+    alert('Terjadi kesalahan saat mengambil data RSVP.');
+  }
+};
+
+
+// Fungsi untuk mengirim data RSVP ke backend
+const submitMessage = async () => {
+  if (!form.value.name || !form.value.message) {
+    alert('Nama dan ucapan harus diisi!');
+    return;
+  }
+
+
+  const payload = {
+    nama: form.value.name,
+    pesan: form.value.message,
+    status_kehadiran: form.value.attendance,
+  }
+
+  try {
+    const response = await fetch(`${backendUrl}/api/rsvp/${invitationCode}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        nama: form.value.name,
+        pesan: form.value.message,
+        status_kehadiran: form.value.attendance,
+      }),
+
+    });
+
+    if (!response.ok) {
+      throw new Error('Gagal menyimpan RSVP');
+    }
+
+    const result = await response.json();
+    messages.value.push(result.data); // Tambahkan RSVP baru ke daftar
+    form.value = { name: '', message: '', attendance: 'yes' }; // Reset form
+    alert(result.message); // Tampilkan pesan sukses dari backend
+  } catch (error) {
+    console.error('Error menyimpan RSVP:', error);
+    alert('Terjadi kesalahan saat menyimpan RSVP.');
+  }
+};
+
+// Fungsi untuk mengatur kelas CSS berdasarkan status kehadiran
+const getAttendanceClass = (attendance) => {
+  switch (attendance) {
+    case 'yes':
+      return 'bg-green-100 text-green-700';
+    case 'no':
+      return 'bg-red-100 text-red-700';
+    case 'maybe':
+      return 'bg-yellow-100 text-yellow-700';
+    default:
+      return 'bg-gray-100 text-gray-700';
+  }
+};
+
+// Fungsi untuk memformat teks kehadiran
+const formatAttendance = (attendance) => {
+  switch (attendance) {
+    case 'yes':
+      return 'Hadir';
+    case 'no':
+      return 'Tidak Hadir';
+    case 'maybe':
+      return 'Mungkin';
+    default:
+      return attendance;
+  }
+};
+
+// Panggil fetchMessages saat komponen dimuat
+onMounted(() => {
+  fetchMessages();
+});
 </script>
 
 <style scoped>
@@ -89,9 +189,11 @@ function submitMessage() {
   0% {
     transform: rotate(2deg);
   }
+
   50% {
     transform: rotate(-2deg);
   }
+
   100% {
     transform: rotate(2deg);
   }
@@ -99,6 +201,7 @@ function submitMessage() {
 
 .animate-swing-top {
   animation: swing-top 4s ease-in-out infinite;
-  transform-origin: bottom center; /* ✅ Balon berayun dari bawah (tali diam) */
+  transform-origin: bottom center;
+  /* ✅ Balon berayun dari bawah (tali diam) */
 }
 </style>