diff --git a/backend-baru/database/seeders/TemplateSeeder.php b/backend-baru/database/seeders/TemplateSeeder.php
index 81d012e..8d6bbe1 100644
--- a/backend-baru/database/seeders/TemplateSeeder.php
+++ b/backend-baru/database/seeders/TemplateSeeder.php
@@ -68,7 +68,14 @@ Template::create([
                     ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
                     ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
                     ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
+                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
+                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
+                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
+                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
+                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
                     ['name' => 'foto_6', 'label' => 'Foto 6', 'type' => 'file'],
+                    ['name' => 'foto_7', 'label' => 'Foto 7', 'type' => 'file'],
+                    ['name' => 'foto_8', 'label' => 'Foto 8', 'type' => 'file'],
                     ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
                 ]
             ],
@@ -103,7 +110,11 @@ Template::create([
                     ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
                     ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
                     ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
-                    ['name' => 'foto_6', 'label' => 'Foto 6', 'type' => 'file'],
+                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
+                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
+                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
+                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
+                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
                     ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
                 ]
             ],
@@ -136,6 +147,11 @@ Template::create([
                     ['name' => 'rekening_1', 'label' => 'Rekening 1', 'type' => 'text'],
                     ['name' => 'rekening_2', 'label' => 'Rekening 2', 'type' => 'text'],
                     ['name' => 'rekening_3', 'label' => 'Rekening 3', 'type' => 'text'],
+                    ['name' => 'foto_1', 'label' => 'Foto 1', 'type' => 'file'],
+                    ['name' => 'foto_2', 'label' => 'Foto 2', 'type' => 'file'],
+                    ['name' => 'foto_3', 'label' => 'Foto 3', 'type' => 'file'],
+                    ['name' => 'foto_4', 'label' => 'Foto 4', 'type' => 'file'],
+                    ['name' => 'foto_5', 'label' => 'Foto 5', 'type' => 'file'],
                     ['name' => 'foto_6', 'label' => 'Foto 6', 'type' => 'file'],
                     ['name' => 'link_music', 'label' => 'Link Music', 'type' => 'text'],
                 ]
diff --git a/backend-baru/public/images/logo.png b/backend-baru/public/images/logo.png
new file mode 100644
index 0000000..2f25877
Binary files /dev/null and b/backend-baru/public/images/logo.png differ
diff --git a/backend-baru/resources/views/layouts/app.blade.php b/backend-baru/resources/views/layouts/app.blade.php
index 379cb83..1aab133 100644
--- a/backend-baru/resources/views/layouts/app.blade.php
+++ b/backend-baru/resources/views/layouts/app.blade.php
@@ -33,7 +33,7 @@
     <!-- Sidebar -->
     <div class="sidebar flex flex-col">
         <div class="text-center py-4 border-b">
-            <img src="https://via.placeholder.com/150x50.png?text=Logo" alt="Logo" class="mx-auto mb-2"
+            <img src="{{ asset('images/logo.png') }}" alt="Logo" class="mx-auto mb-2"
                 style="max-height: 80px;">
         </div>
 
@@ -71,7 +71,7 @@
                     </a>
                 </li>
 
-             
+
             </ul>
 
             <p class="text-gray-500 uppercase text-xs font-semibold px-3 mt-4 mb-2">Akun</p>
diff --git a/proyek-frontend/app/components/landing-page/featuredtemplates.vue b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
index f409c09..ef4529a 100644
--- a/proyek-frontend/app/components/landing-page/featuredtemplates.vue
+++ b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue'
 
 // ID template yang mau ditampilkan
-const selectedIds = [1, 3, 4, 5, 6, 7, 8, 9]
+const selectedIds = [1, 3, 4, 5, 2, 7, 8, 9]
 
 // State dropdown
 const openDropdownId = ref(null)
diff --git a/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
new file mode 100644
index 0000000..49dcacb
--- /dev/null
+++ b/proyek-frontend/app/pages/form/undangan-pernikahan-premium.vue
@@ -0,0 +1,272 @@
+<template>
+    <div class="min-h-screen bg-gray-50 py-10 px-6">
+      <div class="max-w-5xl mx-auto bg-white rounded-2xl shadow-lg p-8">
+        <h1 class="text-2xl font-bold text-center text-gray-800">
+          Form Undangan Pernikahan Premium
+        </h1>
+        <p class="text-center text-gray-500 text-sm mb-8">
+          Isi semua data berikut dengan lengkap dan benar.
+        </p>
+  
+        <!-- Data Pemesan -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">📋 Data Pemesan</h2>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <input v-model="form.nama_pemesan" type="text" placeholder="Nama Pemesan"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.email" type="email" placeholder="Email"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.telepon" type="text" placeholder="No Telepon"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          </div>
+        </section>
+  
+        <!-- Data Mempelai -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💍 Data Mempelai</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <!-- Mempelai Pria -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Mempelai Pria</h3>
+              <div class="grid gap-2">
+                <input v-model="form.pria.nama_lengkap" placeholder="Nama Lengkap"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_panggilan" placeholder="Nama Panggilan"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_bapak" placeholder="Nama Bapak"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.nama_ibu" placeholder="Nama Ibu"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.instagram" placeholder="Instagram"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.facebook" placeholder="Facebook"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+                <input v-model="form.pria.twitter" placeholder="Twitter"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+              </div>
+            </div>
+  
+            <!-- Mempelai Wanita -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Mempelai Wanita</h3>
+              <div class="grid gap-2">
+                <input v-model="form.wanita.nama_lengkap" placeholder="Nama Lengkap"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_panggilan" placeholder="Nama Panggilan"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_bapak" placeholder="Nama Bapak"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.nama_ibu" placeholder="Nama Ibu"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.instagram" placeholder="Instagram"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.facebook" placeholder="Facebook"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+                <input v-model="form.wanita.twitter" placeholder="Twitter"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-pink-400 focus:border-pink-400 outline-none transition" />
+              </div>
+            </div>
+          </div>
+        </section>
+  
+        <!-- Cerita Kita -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💌 Cerita Kita</h2>
+          <textarea v-model="form.cerita" rows="4" placeholder="Ceritakan kisah kalian..."
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition resize-none"></textarea>
+        </section>
+  
+        <!-- Detail Acara -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">🎉 Detail Acara</h2>
+          <div class="grid md:grid-cols-2 gap-6">
+            <!-- Akad -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Akad</h3>
+              <div class="grid gap-2">
+                <input v-model="form.akad.tanggal" type="date"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.waktu" type="time"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.alamat" placeholder="Alamat Akad"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+                <input v-model="form.akad.link_gmaps" placeholder="Link Gmaps Akad"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-green-400 focus:border-green-400 outline-none transition" />
+              </div>
+            </div>
+  
+            <!-- Resepsi -->
+            <div>
+              <h3 class="font-medium text-gray-700 mb-2">Resepsi</h3>
+              <div class="grid gap-2">
+                <input v-model="form.resepsi.tanggal" type="date"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.waktu" type="time"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.alamat" placeholder="Alamat Resepsi"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+                <input v-model="form.resepsi.link_gmaps" placeholder="Link Gmaps Resepsi"
+                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-purple-400 focus:border-purple-400 outline-none transition" />
+              </div>
+            </div>
+          </div>
+        </section>
+  
+        <!-- Rekening & Musik -->
+        <section class="mb-8">
+          <h2 class="font-semibold text-blue-600 mb-3 border-b pb-1">💳 Rekening & Musik</h2>
+          <div class="grid md:grid-cols-3 gap-4">
+            <input v-model="form.rekening1" placeholder="Rekening 1"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.rekening2" placeholder="Rekening 2"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+            <input v-model="form.rekening3" placeholder="Rekening 3"
+              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+          </div>
+          <input v-model="form.link_music" placeholder="Link Music (opsional)"
+            class="w-full border border-gray-300 rounded-lg px-3 py-2 mt-4 focus:ring-2 focus:ring-blue-400 focus:border-blue-400 outline-none transition" />
+        </section>
+        <label class="font-semibold text-blue-600 mb-3 block border-b pb-1">🖼️ Galeri Foto</label>
+        <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 flex flex-col justify-center items-center text-gray-400 cursor-pointer hover:border-blue-400 hover:text-blue-500 transition">
+        <input 
+            type="file"
+            multiple
+            class="hidden"
+            id="gallery"
+            @change="handleFileChange"
+        >
+        <label for="gallery" class="cursor-pointer flex flex-col items-center">
+            <span class="text-3xl font-bold">+</span>
+            <span class="text-sm mt-2">Pilih Foto</span>
+        </label>
+        </div>
+
+
+  
+        <!-- Tombol -->
+      <div class="text-end mt-6">
+        <button @click="batal"
+            class="bg-gray-600 text-white font-semibold px-6 py-2 rounded-lg transition mr-2"> 
+            Batal
+        </button>
+        <button @click="konfirmasi"
+            class="bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg transition"> 
+            Konfirmasi
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const handleFileChange = (event) => {
+  form.value.galeri = Array.from(event.target.files)
+}
+
+const form = ref({
+  nama_pemesan: '',
+  email: '',
+  telepon: '',
+  pria: {
+    nama_lengkap: '',
+    nama_panggilan: '',
+    nama_bapak: '',
+    nama_ibu: '',
+    instagram: '',
+    facebook: '',
+    twitter: ''
+  },
+  wanita: {
+    nama_lengkap: '',
+    nama_panggilan: '',
+    nama_bapak: '',
+    nama_ibu: '',
+    instagram: '',
+    facebook: '',
+    twitter: ''
+  },
+  cerita: '',
+  akad: {
+    tanggal: '',
+    waktu: '',
+    alamat: '',
+    link_gmaps: ''
+  },
+  resepsi: {
+    tanggal: '',
+    waktu: '',
+    alamat: '',
+    link_gmaps: ''
+  },
+  rekening1: '',
+  rekening2: '',
+  rekening3: '',
+  link_music: '',
+  galeri: []
+})
+
+// Fungsi Konfirmasi
+const konfirmasi = async () => {
+  try {
+    const data = new FormData()
+
+    // Tambahkan field sederhana
+    data.append('nama_pemesan', form.value.nama_pemesan)
+    data.append('email', form.value.email)
+    data.append('telepon', form.value.telepon)
+
+    // Tambahkan nested object (pria, wanita, akad, resepsi)
+    for (const key in form.value.pria) {
+      data.append(`pria[${key}]`, form.value.pria[key])
+    }
+    for (const key in form.value.wanita) {
+      data.append(`wanita[${key}]`, form.value.wanita[key])
+    }
+    for (const key in form.value.akad) {
+      data.append(`akad[${key}]`, form.value.akad[key])
+    }
+    for (const key in form.value.resepsi) {
+      data.append(`resepsi[${key}]`, form.value.resepsi[key])
+    }
+
+    // Rekening & Musik
+    data.append('rekening1', form.value.rekening1)
+    data.append('rekening2', form.value.rekening2)
+    data.append('rekening3', form.value.rekening3)
+    data.append('link_music', form.value.link_music)
+
+    // File galeri
+    form.value.galeri.forEach(file => {
+      data.append('galeri[]', file)
+    })
+
+    // Kirim ke backend
+    const response = await fetch('https://localhost/api/undangan', {
+      method: 'POST',
+      body: data
+      // Jangan set header 'Content-Type' manual, biarkan browser otomatis atur multipart/form-data
+    })
+
+    if (!response.ok) throw new Error('Gagal mengirim data')
+
+    const result = await response.json()
+    alert('Data berhasil disimpan!')
+
+    router.push('/')
+  } catch (error) {
+    console.error(error)
+    alert('Terjadi kesalahan, coba lagi!')
+  }
+}
+
+
+// Fungsi Batal
+const batal = () => {
+  // Kembali ke landing page tanpa menyimpan
+  router.back()('/')
+}
+</script>
\ No newline at end of file