diff --git a/backend-baru/app/Http/Controllers/Api/RsvpApiController.php b/backend-baru/app/Http/Controllers/Api/RsvpApiController.php
new file mode 100644
index 0000000..a753cf8
--- /dev/null
+++ b/backend-baru/app/Http/Controllers/Api/RsvpApiController.php
@@ -0,0 +1,78 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Guest;
+use App\Models\Rsvp;
+use Illuminate\Http\Request;
+
+class RsvpApiController extends Controller
+{
+    // 🔹 Simpan RSVP berdasarkan kode_invitasi (POST)
+    public function store(Request $request, $kodeInvitasi)
+    {
+        try {
+            $validated = $request->validate([
+                'nama' => 'required|string|max:255',
+                'pesan' => 'required|string',
+                'status_kehadiran' => 'required|in:hadir,tidak_hadir,mungkin',
+            ]);
+
+            $guest = Guest::where('kode_invitasi', $kodeInvitasi)->first();
+
+            if (!$guest) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Kode invitasi tidak ditemukan.',
+                ], 404);
+            }
+
+            $rsvp = Rsvp::create([
+                'guest_id' => $guest->id,
+                'nama' => $validated['nama'],
+                'pesan' => $validated['pesan'],
+                'status_kehadiran' => $validated['status_kehadiran'],
+            ]);
+
+            return response()->json([
+                'success' => true,
+                'message' => 'RSVP berhasil disimpan',
+                'data' => $rsvp,
+            ], 201);
+
+        } catch (\Illuminate\Validation\ValidationException $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Validasi gagal',
+                'errors' => $e->errors(),
+            ], 422);
+        } catch (\Exception $e) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Gagal menyimpan RSVP.',
+            ], 500);
+        }
+    }
+
+    // 🔹 Ambil semua RSVP berdasarkan kode_invitasi (GET)
+    public function index($kodeInvitasi)
+    {
+        $guest = Guest::where('kode_invitasi', $kodeInvitasi)->first();
+
+        if (!$guest) {
+            return response()->json([
+                'success' => false,
+                'message' => 'Kode invitasi tidak ditemukan.',
+            ], 404);
+        }
+
+        $rsvps = Rsvp::where('guest_id', $guest->id)->get();
+
+        return response()->json([
+            'success' => true,
+            'message' => 'Data RSVP ditemukan',
+            'data' => $rsvps,
+        ]);
+    }
+}
diff --git a/backend-baru/app/Http/Controllers/RsvpController.php b/backend-baru/app/Http/Controllers/RsvpController.php
new file mode 100644
index 0000000..1fef89a
--- /dev/null
+++ b/backend-baru/app/Http/Controllers/RsvpController.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\Pelanggan;
+use App\Models\Rsvp;
+
+class RsvpController extends Controller
+{
+    // 🔹 Simpan data RSVP (POST)
+    public function store(Request $request, $invitationCode)
+    {
+        $pelanggan = Pelanggan::where('invitation_code', $invitationCode)->first();
+
+        if (!$pelanggan) {
+            return response()->json(['message' => 'Kode undangan tidak ditemukan'], 404);
+        }
+
+        $rsvp = Rsvp::create([
+            'pelanggan_id' => $pelanggan->id,
+            'nama' => $request->nama,
+            'pesan' => $request->pesan,
+            'status_kehadiran' => $request->status_kehadiran,
+        ]);
+
+        return response()->json([
+            'message' => 'RSVP berhasil disimpan',
+            'data' => $rsvp,
+        ]);
+    }
+
+    // 🔹 Ambil semua RSVP berdasarkan kode undangan (GET)
+   public function show($invitationCode)
+{
+    $pelanggan = Pelanggan::where('kode_invitasi', $invitationCode)->first();
+
+    if (!$pelanggan) {
+        return response()->json(['message' => 'Kode undangan tidak ditemukan'], 404);
+    }
+
+    $rsvp = Rsvp::where('pelanggan_id', $pelanggan->id)->get();
+
+    return response()->json([
+        'message' => 'Data RSVP ditemukan',
+        'data' => $rsvp
+    ]);
+}
+}
diff --git a/backend-baru/app/Models/Guest.php b/backend-baru/app/Models/Guest.php
index 3867890..ae9ba19 100644
--- a/backend-baru/app/Models/Guest.php
+++ b/backend-baru/app/Models/Guest.php
@@ -19,4 +19,9 @@ class Guest extends Model
     {
         return $this->belongsTo(Pelanggan::class, 'id_pelanggan');
     }
+
+    public function rsvps()
+    {
+        return $this->hasMany(Rsvp::class);
+    }
 }
diff --git a/backend-baru/app/Models/Rsvp.php b/backend-baru/app/Models/Rsvp.php
new file mode 100644
index 0000000..949311c
--- /dev/null
+++ b/backend-baru/app/Models/Rsvp.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Rsvp extends Model
+{
+    use HasFactory;
+    protected $fillable = ['guest_id', 'nama', 'pesan', 'status_kehadiran'];
+
+    public function guest() {
+        return $this->belongsTo(Guest::class);
+    }
+}
diff --git a/backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php b/backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php
new file mode 100644
index 0000000..3d12a23
--- /dev/null
+++ b/backend-baru/database/migrations/2025_10_23_032107_create_rsvps_tables.php
@@ -0,0 +1,24 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::create('rsvps', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('guest_id')->constrained('guests')->cascadeOnDelete(); // Link ke guests table
+            $table->string('nama');
+            $table->text('pesan');
+            $table->enum('status_kehadiran', ['hadir', 'tidak_hadir', 'mungkin'])->default('mungkin');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('rsvps');
+    }
+};
diff --git a/backend-baru/routes/api.php b/backend-baru/routes/api.php
index 4dc045b..cc8059c 100644
--- a/backend-baru/routes/api.php
+++ b/backend-baru/routes/api.php
@@ -54,3 +54,11 @@ Route::delete('/reviews/{id}', [ReviewApiController::class, 'destroy']);
 Route::get('/guests/{code}', [GuestApiController::class, 'index']);
 Route::post('/guests', [GuestApiController::class, 'store']);
 Route::delete('/guests/{id}', [GuestApiController::class, 'destroy']);
+
+use App\Http\Controllers\RsvpController;
+use App\Http\Controllers\Api\RsvpApiController;
+
+// 🔹 RSVP Routes BARU
+Route::get('/rsvp/{kodeInvitasi}', [RsvpApiController::class, 'index']);
+Route::post('/rsvp/{kodeInvitasi}', [RsvpApiController::class, 'store']);
+
diff --git a/proyek-frontend/app/components/templates/Ultah/GuestBook.vue b/proyek-frontend/app/components/templates/Ultah/GuestBook.vue
index 329e4e4..8554fca 100644
--- a/proyek-frontend/app/components/templates/Ultah/GuestBook.vue
+++ b/proyek-frontend/app/components/templates/Ultah/GuestBook.vue
@@ -13,9 +13,9 @@
           class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500"></textarea>
         <select v-model="form.attendance"
           class="w-full px-4 py-2 rounded-xl border-2 border-orange-400 focus:ring-2 focus:ring-orange-500">
-          <option value="yes">Hadir</option>
-          <option value="no">Tidak Hadir</option>
-          <option value="maybe">Mungkin</option>
+          <option value="hadir">Hadir</option>
+          <option value="tidak_hadir">Tidak Hadir</option>
+          <option value="mungkin">Mungkin</option>
         </select>
         <button type="submit"
           class="bg-orange-600 hover:bg-orange-700 text-white px-6 py-3 rounded-xl font-semibold shadow-lg">
@@ -28,43 +28,119 @@
     <div class="space-y-4">
       <div v-for="msg in messages" :key="msg.id" class="bg-white rounded-xl shadow-md p-4 text-left">
         <div class="flex items-center justify-between mb-2">
-          <span class="font-bold text-orange-800">{{ msg.name }}</span>
-          <span :class="getAttendanceClass(msg.attendance)" class="text-sm px-2 py-1 rounded-lg">
-            {{ msg.attendance }}
+          <span class="font-bold text-orange-800">{{ msg.nama }}</span>
+          <span :class="getAttendanceClass(msg.status_kehadiran)" class="text-sm px-2 py-1 rounded-lg">
+            {{ formatAttendance(msg.status_kehadiran) }}
           </span>
         </div>
-        <p class="text-gray-700">{{ msg.message }}</p>
+        <p class="text-gray-700">{{ msg.pesan }}</p>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue';
+import { useRoute, useRuntimeConfig } from '#app';
 
-const messages = ref([
-  { id: 1, name: 'Gempita', message: 'Selamat ulang tahun cipung', attendance: 'yes' },
-  { id: 2, name: 'Ayu Ting Ting', message: 'Selamat ulang tahun anak mama gigi', attendance: 'maybe' }
-])
+const route = useRoute();
+const config = useRuntimeConfig();
+const backendUrl = config.public.apiBaseUrl;
+const invitationCode = route.params.code || '';
+const guest = route.query.guest
 
-const form = ref({ name: '', message: '', attendance: 'yes' })
 
-const submitMessage = () => {
-  if (form.value.name && form.value.message) {
-    messages.value.push({
-      id: Date.now(),
-      ...form.value
-    })
-    form.value = { name: '', message: '', attendance: 'yes' }
+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'
+    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';
   }
-}
-</script>
+};
+
+// 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>
\ No newline at end of file