diff --git a/backend-baru/app/Http/Controllers/Api/TemplateApiController.php b/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
index ee1fd72..d905878 100644
--- a/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
+++ b/backend-baru/app/Http/Controllers/Api/TemplateApiController.php
@@ -16,6 +16,7 @@ class TemplateApiController extends Controller
             return [
                 'id'            => $template->id,
                 'nama_template' => $template->nama_template,
+                'slug'          => $template->slug,
                 'harga'         => $template->harga,
                 'paket'         => $template->paket,
                 'kategori'      => $template->kategori ? $template->kategori->nama : null,
diff --git a/backend-baru/app/Models/Template.php b/backend-baru/app/Models/Template.php
index 0b7e07a..c69c519 100644
--- a/backend-baru/app/Models/Template.php
+++ b/backend-baru/app/Models/Template.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\Str;
 
 class Template extends Model
 {
@@ -36,4 +37,10 @@ class Template extends Model
     {
         return $this->hasMany(Pelanggan::class, 'template_id');
     }
+
+    // Accessor untuk slug berdasarkan nama_template
+    public function getSlugAttribute()
+    {
+        return Str::slug($this->nama_template);
+    }
 }
diff --git a/proyek-frontend/app/components/landing-page/featuredtemplates.vue b/proyek-frontend/app/components/landing-page/featuredtemplates.vue
index 7159e59..f409c09 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 = [3, 4, 5, 6, 7, 8, 9]
+const selectedIds = [1, 3, 4, 5, 6, 7, 8, 9]
 
 // State dropdown
 const openDropdownId = ref(null)
@@ -79,7 +79,7 @@ const templates = computed(() =>
         paket: paketData[index % paketData.length].paket,
         fiturs: paketData[index % paketData.length].fiturs.map((f, i) => ({ id: i + 1, deskripsi: f })),
         kategori: t.kategori,
-        formPath: formMapping[t.nama_template] || '/form/lainny' // 🔥 ambil path dari mapping
+        formPath: t.slug
       }
     })
 )
@@ -144,7 +144,7 @@ const templates = computed(() =>
               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>
-            <NuxtLink :to="`${t.formPath}?template_id=${t.id}`"
+            <NuxtLink :to="`form/${t.formPath}`"
               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/form/undangan-minimalis.vue b/proyek-frontend/app/pages/form/undangan-minimalis.vue
new file mode 100644
index 0000000..a94050e
--- /dev/null
+++ b/proyek-frontend/app/pages/form/undangan-minimalis.vue
@@ -0,0 +1,8 @@
+<template>
+    <div>
+        bla
+    </div>
+</template>
+
+<script>
+</script>
\ No newline at end of file