diff --git a/backend-baru/app/Http/Controllers/Api/TemplateApiController.php b/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
index d905878..bd3baae 100644
--- a/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
+++ b/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
@@ -30,38 +30,69 @@ class TemplateApiController extends Controller
     // Ambil detail template tertentu
     public function show(Template $template)
     {
+        // Jika ada query ?with_dummy=true, tambahkan dummy value
+        $formData = $this->addDummyValues($template->form ?? []);
+
         return response()->json([
             'id'            => $template->id,
             'nama_template' => $template->nama_template,
+            'slug'          => $template->slug,
             'harga'         => $template->harga,
             'paket'         => $template->paket,
             'kategori'      => $template->kategori ? $template->kategori->nama : null,
+            'form'          => $formData,
             'foto'          => $template->foto ? asset('storage/' . $template->foto) : null,
         ]);
     }
-   public function getByCategory($id)
-{
-    $templates = Template::with('fiturs', 'kategori')
-                ->where('kategori_id', $id)
-                ->get();
 
-    $transformed = $templates->map(function($template) {
-        return [
-            'id'            => $template->id,
-            'nama_template' => $template->nama_template,
-            'harga'         => $template->harga,
-            'paket'         => $template->paket,
-            'kategori'      => $template->kategori ? [
-                'id' => $template->kategori->id,
-                'nama' => $template->kategori->nama
-            ] : null,
-            'foto'          => $template->foto ? asset('storage/' . $template->foto) : null,
-            'fiturs'        => $template->fiturs ?? [],
+    private function addDummyValues(array $form)
+    {
+        if (empty($form['fields'])) {
+            return $form;
+        }
+
+        // Aturan dummy value berdasarkan tipe
+        $dummyValues = [
+            'text' => 'XXXXX XXXX',
+            'email' => 'example@domain.com',
+            'textarea' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+            'date' => '2025-12-01',
+            'datetime-local' => '2025-12-01T09:00',
+            'number' => 17,
+            'file' => null,
+            'url' => 'https://example.com',
         ];
-    });
-
-    return response()->json($transformed);
-}
-
 
+        // Map field untuk menambahkan dummy value
+        $form['fields'] = array_map(function ($field) use ($dummyValues) {
+            $field['value'] = $dummyValues[$field['type']] ?? 'Unknown Type';
+            return $field;
+        }, $form['fields']);
+
+        return $form;
+    }
+
+    public function getByCategory($id)
+    {
+        $templates = Template::with('fiturs', 'kategori')
+            ->where('kategori_id', $id)
+            ->get();
+
+        $transformed = $templates->map(function ($template) {
+            return [
+                'id'            => $template->id,
+                'nama_template' => $template->nama_template,
+                'harga'         => $template->harga,
+                'paket'         => $template->paket,
+                'kategori'      => $template->kategori ? [
+                    'id' => $template->kategori->id,
+                    'nama' => $template->kategori->nama
+                ] : null,
+                'foto'          => $template->foto ? asset('storage/' . $template->foto) : null,
+                'fiturs'        => $template->fiturs ?? [],
+            ];
+        });
+
+        return response()->json($transformed);
+    }
 }
diff --git a/proyek-frontend/app/components/landing-page/featuredtemplates.vue b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
index 0a5300a..5df72f5 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 = [3, 5, 7]
 
 // State dropdown
 const openDropdownId = ref(null)
@@ -174,6 +174,7 @@ const templates = computed(() =>
           <!-- Tombol -->
           <div class="flex items-center gap-3 mt-6">
             <button
+              @click="$router.push(`/preview/${t.id}`)"
               class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors">
               Preview
             </button>
diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index 87db324..098045f 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -114,12 +114,11 @@
 
                 <!-- Buttons -->
                 <div class="flex items-center gap-3 mt-6">
-                  <button
-                    class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors"
-                    @click="onTemplateClick(t)">
+                  <NuxtLink :to="`/preview/${t.id}`"
+                    class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors text-center">
                     Preview
-                  </button>
-                  <NuxtLink :to="`${t.formPath}?template_id=${t.id}`"
+                  </NuxtLink>
+                  <NuxtLink :to="`/form/${t.slug}`"
                     class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
                     Order
                   </NuxtLink>
@@ -244,6 +243,7 @@ const templatesWithFeatures = computed(() =>
   (templatesRaw.value || []).map((t, index) => ({
     id: t.id,
     nama: t.nama_template,
+    slug: t.slug,
     harga: t.harga,
     foto: t.foto || '/logo1.png',
     kategori: t.kategori,
diff --git a/proyek-frontend/app/components/template-page/TemplateGrid.vue b/proyek-frontend/app/components/template-page/TemplateGrid.vue
index e4bfd8c..3edf89c 100644
--- a/proyek-frontend/app/components/template-page/TemplateGrid.vue
+++ b/proyek-frontend/app/components/template-page/TemplateGrid.vue
@@ -73,11 +73,11 @@
 
           <!-- Buttons -->
           <div class="flex items-center gap-3 mt-6">
-            <a :href="tpl.preview_link || '#'"
+            <NuxtLink :to="`/preview/${tpl.id}`"
               class="w-full bg-white border border-gray-300 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-100 transition-colors text-center">
               Preview
-            </a>
-            <NuxtLink :to="`${tpl.formPath}?template_id=${tpl.id}`"
+            </NuxtLink>
+            <NuxtLink :to="`/form/${tpl.slug}`"
               class="w-full bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors text-center">
               Order
             </NuxtLink>
diff --git a/proyek-frontend/app/pages/preview/[id].vue b/proyek-frontend/app/pages/preview/[id].vue
index df23d34..1c7fda5 100644
--- a/proyek-frontend/app/pages/preview/[id].vue
+++ b/proyek-frontend/app/pages/preview/[id].vue
@@ -1,21 +1,321 @@
 <template>
-  <WeddingA v-if="invitationData" :data="invitationData" />
+  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 relative">
+    <!-- Preview Mode Notification -->
+    <div class="fixed top-6 left-1/2 transform -translate-x-1/2 z-50 animate-fade-in">
+      <div
+        class="bg-white/90 backdrop-blur-md text-gray-800 px-6 py-3 rounded-full shadow-xl border border-gray-200/50 flex items-center gap-3">
+        <div class="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+        <p class="text-sm font-medium">Mode Preview</p>
+        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
+          </path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
+          </path>
+        </svg>
+      </div>
+    </div>
+
+    <!-- Back Button -->
+    <NuxtLink to="/" class="fixed top-6 left-6 group z-50">
+      <div
+        class="bg-white/90 backdrop-blur-md text-gray-800 pl-4 pr-5 py-3 rounded-full shadow-xl border border-gray-200/50 hover:shadow-2xl hover:scale-105 transition-all duration-300 flex items-center gap-2">
+        <svg class="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-300" fill="none"
+          stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+        </svg>
+        <span class="font-medium">Kembali</span>
+      </div>
+    </NuxtLink>
+
+    <!-- Floating Collapsible Info -->
+    <div v-if="data && !pending && !error" class="fixed bottom-6 right-6 z-50">
+      <div class="bg-white/90 backdrop-blur-md rounded-2xl shadow-xl border border-gray-200/50 overflow-hidden transition-all duration-300">
+        <!-- Header - Always Visible -->
+        <button
+          @click="isInfoOpen = !isInfoOpen"
+          class="w-full px-5 py-4 flex items-center justify-between gap-3 hover:bg-gray-50/50 transition-colors">
+          <div class="flex items-center gap-3">
+            <div class="p-2 bg-blue-500/10 rounded-lg">
+              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+              </svg>
+            </div>
+            <span class="font-semibold text-gray-800">Info Template</span>
+          </div>
+          <svg v-if="isInfoOpen" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+          </svg>
+          <svg v-else class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+          </svg>
+        </button>
+
+        <!-- Collapsible Content -->
+        <div 
+          :class="[
+            'transition-all duration-300 ease-in-out overflow-hidden',
+            isInfoOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+          ]">
+          <div class="px-5 pb-4 space-y-3 border-t border-gray-200/50 pt-4">
+            <div class="flex items-start gap-3">
+              <svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500 mb-0.5">Paket</p>
+                <p class="text-sm font-medium text-gray-800">{{ data.paket }}</p>
+              </div>
+            </div>
+            
+            <div class="flex items-start gap-3">
+              <svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+                </path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500 mb-0.5">Kategori</p>
+                <p class="text-sm font-medium text-gray-800">{{ data.kategori }}</p>
+              </div>
+            </div>
+            
+            <div class="flex items-start gap-3">
+              <svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
+                </path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500 mb-0.5">Harga</p>
+                <p class="text-sm font-medium text-gray-800">
+                  Rp {{ parseFloat(data.harga).toLocaleString('id-ID') }}
+                </p>
+              </div>
+            </div>
+
+            <div class="flex items-start gap-3">
+              <svg class="w-4 h-4 text-gray-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                </path>
+              </svg>
+              <div>
+                <p class="text-xs text-gray-500 mb-0.5">Slug</p>
+                <p class="text-xs font-mono text-gray-600 bg-gray-100 px-2 py-1 rounded">
+                  {{ data.slug }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="flex items-center justify-center min-h-screen p-6">
+      <!-- Loading State -->
+      <div v-if="pending" class="text-center">
+        <div class="animate-spin rounded-full h-12 w-12 border-t-4 border-blue-500 mx-auto"></div>
+        <p class="mt-4 text-gray-600">Loading invitation...</p>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error || !data" class="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 text-center">
+        <svg class="w-12 h-12 mx-auto text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+          </path>
+        </svg>
+        <p class="text-lg font-semibold text-gray-800 mb-2">Undangan Tidak Ditemukan</p>
+        <p class="text-gray-600 mb-6">Maaf, undangan yang Anda cari tidak tersedia atau sudah tidak berlaku.</p>
+        <NuxtLink to="/"
+          class="inline-block bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 transition-colors">
+          Kembali ke Beranda
+        </NuxtLink>
+      </div>
+
+      <!-- Data Loaded Successfully -->
+      <div v-else-if="data" class="w-full">
+        <!-- Dynamic Component for Known Slugs -->
+        <component v-if="dynamicComponent" :is="dynamicComponent" :data="data" />
+
+        <!-- Fallback for Unknown Slugs (Preview Mode) -->
+        <div v-else class="w-full flex justify-center">
+          <div class="space-y-6 max-w-4xl">
+            <!-- Warning Banner -->
+            <div class="bg-amber-50 border border-amber-200 rounded-2xl p-6 mb-6 flex items-start gap-4">
+              <div class="p-2 bg-amber-100 rounded-lg flex-shrink-0">
+                <svg class="w-6 h-6 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <div>
+                <h3 class="font-semibold text-amber-900 mb-1">
+                  Komponen Template Belum Tersedia
+                </h3>
+                <p class="text-sm text-amber-700">
+                  Template dengan slug <span class="font-mono bg-amber-100 px-2 py-0.5 rounded">{{ data.slug }}</span> belum memiliki komponen khusus. 
+                  Berikut adalah tampilan preview data template.
+                </p>
+              </div>
+            </div>
+  
+            <!-- Preview Card -->
+            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+              <!-- Header -->
+              <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-8 text-white">
+                <h1 class="text-3xl font-bold mb-2">{{ data.nama_template }}</h1>
+                <div class="flex items-center gap-4 text-blue-100">
+                  <span class="flex items-center gap-2">
+                    <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                    </svg>
+                    {{ data.paket }}
+                  </span>
+                  <span class="flex items-center gap-2">
+                    <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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
+                      </path>
+                    </svg>
+                    {{ data.kategori }}
+                  </span>
+                </div>
+              </div>
+  
+              <!-- Image -->
+              <div v-if="data.foto" class="relative h-96 bg-gray-200">
+                <img 
+                  :src="`${backendUrl}${data.foto}`" 
+                  :alt="data.nama_template"
+                  class="w-full h-full object-cover"
+                />
+                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
+              </div>
+  
+              <!-- Form Fields -->
+              <div class="p-8">
+                <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
+                  <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                    </path>
+                  </svg>
+                  Data Template
+                </h2>
+                
+                <div class="grid md:grid-cols-2 gap-6">
+                  <div v-for="field in data.form.fields" :key="field.name" class="space-y-2">
+                    <label class="block text-sm font-semibold text-gray-700">
+                      {{ field.label }}
+                    </label>
+                    
+                    <div v-if="field.type === 'file' && field.value === null" 
+                      class="text-sm text-gray-400 italic bg-gray-50 px-4 py-3 rounded-lg border border-dashed border-gray-300">
+                      Belum ada file yang diupload
+                    </div>
+                    <div v-else-if="field.type === 'textarea'" 
+                      class="text-sm text-gray-600 bg-gray-50 px-4 py-3 rounded-lg border border-gray-200 whitespace-pre-wrap">
+                      {{ field.value || '-' }}
+                    </div>
+                    <div v-else 
+                      class="text-sm text-gray-800 bg-gray-50 px-4 py-3 rounded-lg border border-gray-200">
+                      {{ field.value || '-' }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+  
+              <!-- Footer -->
+              <div class="bg-gray-50 px-8 py-6 border-t border-gray-200">
+                <p class="text-sm text-gray-600 text-center">
+                  💡 Komponen custom untuk template ini sedang dalam pengembangan
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import WeddingA from '~/components/templates/wedding/WeddingA.vue'
+import { defineAsyncComponent, computed, ref } from 'vue'
+import { useRoute, useRuntimeConfig, useAsyncData, createError, useHead } from '#app'
 
 const route = useRoute()
-const invitationData = ref(null)
+const config = useRuntimeConfig()
+const backendUrl = config.public.apiBaseUrl
+const isInfoOpen = ref(false)
 
-onMounted(async () => {
-  try {
-    const res = await fetch(`http://127.0.0.1:8000/api/pelanggan/${route.params.id}`)
-    invitationData.value = await res.json()
-  } catch (err) {
-    console.error('Gagal ambil data:', err)
+const { data, pending, error } = await useAsyncData(
+  'templatePreview',
+  async () => {
+    try {
+      const response = await $fetch(`${backendUrl}/api/templates/${route.params.id}`)
+      return response
+    } catch (err) {
+      throw createError({
+        statusCode: err.statusCode || 500,
+        message: 'Template tidak ditemukan',
+        fatal: false
+      })
+    }
+  },
+  {
+    lazy: false,
+    server: true
   }
+)
+
+// Component mapping for known slugs
+const componentMap = {
+  'undangan-minimalis': defineAsyncComponent(() => import('~/components/undangan/undangan-minimalis.vue')),
+  // Add more mappings as templates are developed
+}
+
+const dynamicComponent = computed(() => {
+  const slug = data.value?.slug
+  return slug ? componentMap[slug] || null : null
 })
+
+// Set meta tags for preview
+useHead(() => ({
+  title: `Preview ${data.value?.nama_template || 'Undangan'}`,
+  meta: [
+    {
+      name: 'description',
+      content: `Pratinjau undangan ${data.value?.nama_template || 'digital'}`
+    }
+  ]
+}))
 </script>
+
+<style scoped>
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out;
+}
+
+pre {
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>