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
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>
diff --git a/proyek-frontend/app/pages/p/daftar-tamu.vue b/proyek-frontend/app/pages/p/daftar-tamu.vue
index df88c35..98b771d 100644
--- a/proyek-frontend/app/pages/p/daftar-tamu.vue
+++ b/proyek-frontend/app/pages/p/daftar-tamu.vue
@@ -92,8 +92,28 @@
                 >
                   <td class="p-3 text-gray-700">{{ index + 1 }}</td>
                   <td class="p-3 text-gray-800 font-medium">{{ guest.nama_tamu }}</td>
-                  <td class="p-3 text-gray-600 font-mono text-sm">
-                    <a :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" target="_blank">{{ guest.kode_invitasi }}</a>
+                  <td class="p-3">
+                    <div class="flex items-center gap-2">
+                      <a 
+                        :href="`${config.public.baseUrl}/p/${guest.kode_invitasi}`" 
+                        target="_blank"
+                        class="text-gray-600 font-mono text-sm hover:text-blue-600 hover:underline transition"
+                        @click.stop
+                      >
+                        {{ guest.kode_invitasi }}
+                      </a>
+                      <button
+                        @click="shareInvitationLink(guest.kode_invitasi)"
+                        class="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-lg text-xs font-medium transition shadow-sm whitespace-nowrap flex items-center gap-1"
+                        :disabled="loading"
+                        title="Bagikan Link Invitasi"
+                      >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
+                        </svg>
+                        Share
+                      </button>
+                    </div>
                   </td>
                   <td class="p-3 text-center">
                     <button
@@ -133,6 +153,60 @@ const backendUrl = config.public.apiBaseUrl;
 // Runtime Config
 const { public: { apiBase } } = useRuntimeConfig();
 
+// Share invitation link
+const shareInvitationLink = async (kodeInvitasi) => {
+  const inviteUrl = `${config.public.baseUrl}/p/${kodeInvitasi}`;
+  
+  if (navigator.share) {
+    // Native Web Share API (mobile)
+    try {
+      await navigator.share({
+        title: 'Undangan Pernikahan',
+        text: 'Silakan buka undangan pernikahan saya',
+        url: inviteUrl,
+      });
+    } catch (error) {
+      if (error.name !== 'AbortError') {
+        copyToClipboard(inviteUrl);
+      }
+    }
+  } else {
+    // Fallback to copy to clipboard (desktop)
+    copyToClipboard(inviteUrl);
+  }
+};
+
+// Copy to clipboard function
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    // Show temporary success message
+    const originalText = successMessage.value;
+    successMessage.value = 'Link undangan berhasil disalin!';
+    setTimeout(() => {
+      successMessage.value = originalText;
+    }, 2000);
+  }).catch((err) => {
+    console.error('Failed to copy: ', err);
+    // Fallback for older browsers
+    const textArea = document.createElement('textarea');
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    try {
+      document.execCommand('copy');
+      const originalText = successMessage.value;
+      successMessage.value = 'Link undangan berhasil disalin!';
+      setTimeout(() => {
+        successMessage.value = originalText;
+      }, 2000);
+    } catch (err) {
+      console.error('Fallback copy failed: ', err);
+    }
+    document.body.removeChild(textArea);
+  });
+};
+
 // Fetch guests data based on customer code
 const handleFetchGuests = async () => {
   if (!kodePelanggan.value.trim()) {