diff --git a/backend/app/Http/Controllers/Api/TemplateApiController.php b/backend/app/Http/Controllers/Api/TemplateApiController.php
index 37903bc..77c7a6d 100644
--- a/backend/app/Http/Controllers/Api/TemplateApiController.php
+++ b/backend/app/Http/Controllers/Api/TemplateApiController.php
@@ -56,4 +56,35 @@ class TemplateApiController extends Controller
 
         return response()->json($templates);
     }
+
+
+   public function random()
+    {
+        try {
+            // Coba tanpa relationship dulu untuk debug
+            $templates = Template::inRandomOrder()
+                ->take(6)
+                ->get()
+                ->map(function($t){
+                    return [
+                        'id'       => $t->id,
+                'nama'     => $t->nama_template,
+                'harga'    => (float) $t->harga,
+                'foto'     => asset('storage/' . $t->foto),
+                'kategori' => $t->kategori,
+                 'fiturs'    => $t->fiturs,
+                    ];
+                });
+
+            return response()->json($templates);
+            
+        } catch (\Exception $e) {
+            return response()->json([
+                'error' => $e->getMessage(),
+                'line' => $e->getLine(),
+                'file' => $e->getFile()
+            ], 500);
+        }
+
 }
+}
\ No newline at end of file
diff --git a/backend/app/Http/Controllers/TemplateController.php b/backend/app/Http/Controllers/TemplateController.php
index d76b395..272c19b 100644
--- a/backend/app/Http/Controllers/TemplateController.php
+++ b/backend/app/Http/Controllers/TemplateController.php
@@ -44,12 +44,13 @@ public function store(Request $request)
         $data['foto'] = $request->file('foto')->store('templates', 'public');
     }
 
-    $template = Template::create([
-        'nama_template' => $data['nama_template'],
-        'kategori_id'   => $data['kategori_id'],
-        'foto'          => $data['foto'] ?? null,
-        'harga'         => $totalHarga, // ✅ otomatis dari fitur
-    ]);
+// store
+$template = Template::create([
+    'nama_template' => $data['nama_template'],
+    'kategori_id'   => $data['kategori_id'],
+    'foto'          => $data['foto'] ?? null,
+    'harga'         => $request->harga, // ✅ ambil langsung dari input
+]);
 
     $template->fiturs()->sync($data['fitur_id']);
 
@@ -77,12 +78,13 @@ public function update(Request $request, Template $template)
         $data['foto'] = $request->file('foto')->store('templates', 'public');
     }
 
-    $template->update([
-        'nama_template' => $data['nama_template'],
-        'kategori_id'   => $data['kategori_id'],
-        'foto'          => $data['foto'] ?? $template->foto,
-        'harga'         => $totalHarga, // ✅ otomatis dari fitur
-    ]);
+// update
+$template->update([
+    'nama_template' => $data['nama_template'],
+    'kategori_id'   => $data['kategori_id'],
+    'foto'          => $data['foto'] ?? $template->foto,
+    'harga'         => $request->harga, // ✅ ambil langsung dari input
+]);
 
     $template->fiturs()->sync($data['fitur_id']);
 
diff --git a/backend/resources/views/admin/templates/index.blade.php b/backend/resources/views/admin/templates/index.blade.php
index a4f5963..f8a16c1 100644
--- a/backend/resources/views/admin/templates/index.blade.php
+++ b/backend/resources/views/admin/templates/index.blade.php
@@ -204,7 +204,7 @@
         @endif
 
 
-        <!-- Modal Tambah Template -->
+       <!-- Modal Tambah Template -->
         @if (!isset($kategori))
             <div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
                 <div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
@@ -238,9 +238,12 @@
                                     @foreach ($fiturs as $fitur)
                                         <label class="flex items-center space-x-2">
                                             <input type="checkbox" name="fitur_id[]" value="{{ $fitur->id }}"
+                                                data-harga="{{ $fitur->harga }}"
                                                 {{ is_array(old('fitur_id')) && in_array($fitur->id, old('fitur_id')) ? 'checked' : '' }}>
-                                            <span
-                                                class="text-sm">{{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}</span>
+                                            <span class="text-sm">
+                                                {{ \Illuminate\Support\Str::limit($fitur->deskripsi, 80) }}
+                                                (Rp {{ number_format($fitur->harga,0,',','.') }})
+                                            </span>
                                         </label>
                                     @endforeach
                                 </div>
@@ -249,7 +252,7 @@
                             <div>
                                 <label class="block text-sm font-medium">Harga</label>
                                 <input type="number" name="harga" class="w-full p-2 border rounded" required
-                                    min="0" step="1000" value="{{ old('harga') }}">
+                                    min="0" value="{{ old('harga') }}">
                             </div>
                             <div>
                                 <label class="block text-sm font-medium">Foto (opsional)</label>
@@ -303,9 +306,12 @@
                                     @foreach ($fiturs as $fiturItem)
                                         <label class="flex items-center space-x-2">
                                             <input type="checkbox" name="fitur_id[]" value="{{ $fiturItem->id }}"
+                                                data-harga="{{ $fiturItem->harga }}"
                                                 {{ (is_array(old('fitur_id')) ? in_array($fiturItem->id, old('fitur_id')) : $template->fiturs->contains($fiturItem->id)) ? 'checked' : '' }}>
-                                            <span
-                                                class="text-sm">{{ \Illuminate\Support\Str::limit($fiturItem->deskripsi, 80) }}</span>
+                                            <span class="text-sm">
+                                                {{ \Illuminate\Support\Str::limit($fiturItem->deskripsi, 80) }}
+                                                (Rp {{ number_format($fiturItem->harga,0,',','.') }})
+                                            </span>
                                         </label>
                                     @endforeach
                                 </div>
@@ -314,7 +320,7 @@
                             <div>
                                 <label class="block text-sm font-medium">Harga</label>
                                 <input type="number" name="harga" value="{{ old('harga', $template->harga) }}"
-                                    class="w-full p-2 border rounded" required min="0" step="1000">
+                                    class="w-full p-2 border rounded" required min="0">
                             </div>
                             <div>
                                 <label class="block text-sm font-medium">Foto (opsional)</label>
@@ -341,96 +347,155 @@
             </div>
         @endforeach
 
-        <script>
-            document.addEventListener('DOMContentLoaded', () => {
-                // Modal Tambah
-                const openTambahModal = document.getElementById('openTambahModal');
-                const modalTambah = document.getElementById('modalTambah');
-                const closeTambahBtn = document.getElementById('closeTambahBtn');
-                const closeTambahOverlay = document.getElementById('closeTambahModal');
+  <script>
+document.addEventListener('DOMContentLoaded', () => {
+    // =========================
+    // Modal Tambah
+    // =========================
+    const openTambahModal = document.getElementById('openTambahModal');
+    const modalTambah = document.getElementById('modalTambah');
+    const closeTambahBtn = document.getElementById('closeTambahBtn');
+    const closeTambahOverlay = document.getElementById('closeTambahModal');
 
-                if (openTambahModal) {
-                    openTambahModal.addEventListener('click', () => {
-                        modalTambah.classList.remove('hidden');
-                        modalTambah.classList.add('flex');
-                    });
-                }
-                if (closeTambahBtn) {
-                    closeTambahBtn.addEventListener('click', () => {
-                        modalTambah.classList.add('hidden');
-                        modalTambah.classList.remove('flex');
-                    });
-                }
-                if (closeTambahOverlay) {
-                    closeTambahOverlay.addEventListener('click', () => {
-                        modalTambah.classList.add('hidden');
-                        modalTambah.classList.remove('flex');
-                    });
-                }
+    if (openTambahModal) {
+        openTambahModal.addEventListener('click', () => {
+            modalTambah.classList.remove('hidden');
+            modalTambah.classList.add('flex');
+        });
+    }
+    if (closeTambahBtn) {
+        closeTambahBtn.addEventListener('click', () => {
+            modalTambah.classList.add('hidden');
+            modalTambah.classList.remove('flex');
+        });
+    }
+    if (closeTambahOverlay) {
+        closeTambahOverlay.addEventListener('click', () => {
+            modalTambah.classList.add('hidden');
+            modalTambah.classList.remove('flex');
+        });
+    }
 
-                // Modal Edit
-                const openEditBtns = document.querySelectorAll('.openEditModalBtn');
-                const closeEditBtns = document.querySelectorAll('.closeEditBtn');
-                const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
+    // =========================
+    // Modal Edit
+    // =========================
+    const openEditBtns = document.querySelectorAll('.openEditModalBtn');
+    const closeEditBtns = document.querySelectorAll('.closeEditBtn');
+    const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
 
-                openEditBtns.forEach(btn => {
-                    btn.addEventListener('click', () => {
-                        const id = btn.dataset.id;
-                        const modal = document.getElementById('modalEdit' + id);
-                        if (modal) {
-                            modal.classList.remove('hidden');
-                            modal.classList.add('flex');
-                        }
-                    });
-                });
+    openEditBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            if (modal) {
+                modal.classList.remove('hidden');
+                modal.classList.add('flex');
+            }
+        });
+    });
 
-                closeEditBtns.forEach(btn => {
-                    btn.addEventListener('click', () => {
-                        const id = btn.dataset.id;
-                        const modal = document.getElementById('modalEdit' + id);
-                        if (modal) {
-                            modal.classList.add('hidden');
-                            modal.classList.remove('flex');
-                        }
-                    });
-                });
+    closeEditBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            if (modal) {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }
+        });
+    });
 
-                closeEditOverlays.forEach(overlay => {
-                    overlay.addEventListener('click', () => {
-                        const id = overlay.dataset.id;
-                        const modal = document.getElementById('modalEdit' + id);
-                        if (modal) {
-                            modal.classList.add('hidden');
-                            modal.classList.remove('flex');
-                        }
-                    });
-                });
-                // Modal Delete Template
-                const deleteTemplateModal = document.getElementById('modalDeleteTemplate');
-                const deleteTemplateOverlay = document.getElementById('modalDeleteTemplateOverlay');
-                const closeDeleteTemplateModal = document.getElementById('closeDeleteTemplateModal');
-                const deleteTemplateForm = document.getElementById('deleteTemplateForm');
-                const deleteTemplateName = document.getElementById('deleteTemplateName');
+    closeEditOverlays.forEach(overlay => {
+        overlay.addEventListener('click', () => {
+            const id = overlay.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            if (modal) {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            }
+        });
+    });
 
-                document.querySelectorAll('.btn-delete-template').forEach(btn => {
-                    btn.addEventListener('click', (e) => {
-                        e.preventDefault(); // cegah form langsung submit
-                        deleteTemplateForm.action = btn.dataset.action;
-                        deleteTemplateName.textContent = btn.dataset.name || 'template ini';
-                        deleteTemplateModal.classList.remove('hidden');
-                        deleteTemplateModal.classList.add('flex');
-                    });
-                });
+    // =========================
+    // Modal Delete Template
+    // =========================
+    const deleteTemplateModal = document.getElementById('modalDeleteTemplate');
+    const deleteTemplateOverlay = document.getElementById('modalDeleteTemplateOverlay');
+    const closeDeleteTemplateModal = document.getElementById('closeDeleteTemplateModal');
+    const deleteTemplateForm = document.getElementById('deleteTemplateForm');
+    const deleteTemplateName = document.getElementById('deleteTemplateName');
 
-                const closeDeleteModalTemplate = () => {
-                    deleteTemplateModal.classList.add('hidden');
-                    deleteTemplateModal.classList.remove('flex');
-                };
+    document.querySelectorAll('.btn-delete-template').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.preventDefault(); // cegah form langsung submit
+            deleteTemplateForm.action = btn.dataset.action;
+            deleteTemplateName.textContent = btn.dataset.name || 'template ini';
+            deleteTemplateModal.classList.remove('hidden');
+            deleteTemplateModal.classList.add('flex');
+        });
+    });
 
-                closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
-                deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
+    const closeDeleteModalTemplate = () => {
+        deleteTemplateModal.classList.add('hidden');
+        deleteTemplateModal.classList.remove('flex');
+    };
 
+    if (closeDeleteTemplateModal) {
+        closeDeleteTemplateModal.addEventListener('click', closeDeleteModalTemplate);
+    }
+    if (deleteTemplateOverlay) {
+        deleteTemplateOverlay.addEventListener('click', closeDeleteModalTemplate);
+    }
+
+    // =========================
+    // Fitur: Hitung Harga Otomatis
+    // =========================
+    function hitungHarga(container) {
+        let total = 0;
+        container.querySelectorAll('input[name="fitur_id[]"]:checked').forEach(cb => {
+            total += parseInt(cb.dataset.harga) || 0;
+        });
+
+        const inputHarga = container.querySelector('input[name="harga"]');
+        // hanya update kalau user belum ubah manual
+        if (inputHarga && !inputHarga.dataset.manual) {
+            inputHarga.value = total;
+        }
+    }
+
+    // Modal Tambah
+    if (modalTambah) {
+        const checkboxes = modalTambah.querySelectorAll('input[name="fitur_id[]"]');
+        const inputHarga = modalTambah.querySelector('input[name="harga"]');
+
+        checkboxes.forEach(cb => {
+            cb.addEventListener('change', () => hitungHarga(modalTambah));
+        });
+
+        if (inputHarga) {
+            inputHarga.addEventListener('input', () => {
+                inputHarga.dataset.manual = "true"; // kasih flag manual
             });
-        </script>
+        }
+    }
+
+    // Modal Edit (banyak, sesuai ID template)
+    document.querySelectorAll('[id^="modalEdit"]').forEach(modal => {
+        const checkboxes = modal.querySelectorAll('input[name="fitur_id[]"]');
+        const inputHarga = modal.querySelector('input[name="harga"]');
+
+        checkboxes.forEach(cb => {
+            cb.addEventListener('change', () => hitungHarga(modal));
+        });
+
+        if (inputHarga) {
+            inputHarga.addEventListener('input', () => {
+                inputHarga.dataset.manual = "true"; // kasih flag manual
+            });
+        }
+    });
+});
+</script>
+
     </div>
 @endsection
diff --git a/backend/routes/api.php b/backend/routes/api.php
index 84a8c7d..8afb6fc 100644
--- a/backend/routes/api.php
+++ b/backend/routes/api.php
@@ -22,8 +22,8 @@ Route::get('kategoris/{kategori}', [KategoriApiController::class, 'show']);
 Route::apiResource('reviews', ReviewController::class);
 
 // API Templates
+Route::get('templates/random', [TemplateApiController::class, 'random']); // NEW
 Route::get('templates', [TemplateApiController::class, 'index']);
 Route::get('templates/{template}', [TemplateApiController::class, 'show']);
 Route::get('templates/category/{id}', [TemplateApiController::class, 'byCategory']);
 Route::get('/templates/{id}', [TemplateApiController::class, 'show']);
-
diff --git a/proyek-frontend/app/components/template-page/CategorySelection.vue b/proyek-frontend/app/components/template-page/CategorySelection.vue
index ddc98b3..173cfdd 100644
--- a/proyek-frontend/app/components/template-page/CategorySelection.vue
+++ b/proyek-frontend/app/components/template-page/CategorySelection.vue
@@ -21,7 +21,7 @@
       Tersedia berbagai desain undangan pernikahan, khitan, ulang tahun, dan lainnya.
     </p>
 
-    <!-- Loading / Error -->
+    <!-- Loading / Error kategori -->
     <div v-if="isLoading" class="mt-12 text-center">Memuat kategori...</div>
     <div v-else-if="error" class="mt-12 text-center text-red-500">
       Gagal memuat kategori.
@@ -38,25 +38,18 @@
         @click="onCategoryClick(category)"
         class="group cursor-pointer relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 w-72"
       >
-        <!-- Foto portrait -->
         <img 
           v-if="category.foto" 
           :src="`http://localhost:8000${category.foto}`" 
           :alt="category.nama" 
           class="w-full h-96 object-cover transition-transform duration-300 group-hover:scale-110"
         >
-        
-        <!-- Overlay hitam transparan -->
         <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
-
-        <!-- Teks kategori & deskripsi -->
         <div class="absolute inset-0 flex flex-col justify-center items-start px-4 text-white">
           <h3 class="text-xl font-semibold mb-2">
             {{ category.nama }}
           </h3>
-          <p
-            class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]"
-          >
+          <p class="text-lg font-normal leading-snug whitespace-normal break-words max-w-[90%]">
             {{ category.deskripsi }}
           </p>
         </div>
@@ -66,21 +59,105 @@
     <div v-else class="mt-12 text-center text-gray-500">
       Belum ada kategori.
     </div>
+
+    <!-- Templates Grid -->
+    <div v-if="!isLoadingRandom" class="mt-25">
+      <!-- Kalau kosong -->
+      <div v-if="randomTemplates.length === 0" class="text-center text-gray-500">
+        Belum ada template tersedia.
+      </div>
+
+      <!-- Kalau ada -->
+      <div 
+        v-else 
+        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+      >
+        <div
+          v-for="t in randomTemplates"
+          :key="t.id"
+          class="bg-white border rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300"
+        >
+          <!-- Image -->
+          <img
+            :src="t.foto ? `http://localhost:8000${t.foto}` : '/fallback.png'"
+            :alt="t.nama"
+            class="w-full h-48 object-cover"
+            @error="(e) => e.target.src = '/fallback.png'"
+          />
+
+          <!-- Body -->
+          <div class="p-5 text-center">
+            <h4 class="text-xl font-bold text-gray-800 mb-2">{{ t.nama }}</h4>
+            <p class="text-green-600 font-semibold text-xl mb-4">
+              Rp {{ Number(t.harga).toLocaleString('id-ID') }}
+            </p>
+
+            <!-- Dropdown fitur -->
+            <div v-if="t.fiturs && t.fiturs.length > 0" class="relative mb-4">
+              <button
+                @click="toggleDropdown(t.id)"
+                class="w-full bg-white border border-gray-300 rounded-md shadow-sm px-4 py-2 inline-flex justify-between items-center"
+              >
+                <span class="mx-auto text-gray-700 font-semibold">FITUR YANG TERSEDIA</span>
+                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                </svg>
+              </button>
+
+              <div v-if="openDropdownId === t.id">
+                <ul class="mt-4 space-y-2 text-gray-600 text-left">
+                  <li v-for="f in t.fiturs" :key="f.id" class="flex items-center">
+                    <svg class="h-4 w-4 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                    </svg>
+                    {{ f.deskripsi }}
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            <!-- 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)"
+              >
+                Preview
+              </button>
+              <NuxtLink
+                :to="`/form/${t.kategori?.nama?.toLowerCase().replace(/ /g, '-')}` + `?template_id=${t.id}`"
+                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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
+  <LandingPageFooter />
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onActivated } from 'vue'
+import { ref, onMounted, onActivated } from 'vue'
 
-// Event emit ke parent
-const emit = defineEmits(['category-selected'])
+const emit = defineEmits(['category-selected', 'template-selected'])
 
-// State categories
 const categories = ref([])
 const isLoading = ref(true)
 const error = ref(null)
 
-// Fetch data kategori dari API Laravel
+const randomTemplates = ref([])
+const isLoadingRandom = ref(true)
+
+// dropdown fitur
+const openDropdownId = ref(null)
+const toggleDropdown = (templateId) => {
+  openDropdownId.value = openDropdownId.value === templateId ? null : templateId
+}
+
+// Fetch kategori
 const fetchCategories = async () => {
   isLoading.value = true
   error.value = null
@@ -95,16 +172,34 @@ const fetchCategories = async () => {
   }
 }
 
-onMounted(fetchCategories)
-onActivated(fetchCategories)
+// Fetch random template
+const fetchRandomTemplates = async () => {
+  isLoadingRandom.value = true
+  try {
+    const res = await $fetch('http://localhost:8000/api/templates/random')
+    randomTemplates.value = res
+    console.log('Random templates:', res) // debug
+  } catch (err) {
+    console.error('Gagal fetch random templates', err)
+  } finally {
+    isLoadingRandom.value = false
+  }
+}
+
+onMounted(() => {
+  fetchCategories()
+  fetchRandomTemplates()
+})
+onActivated(() => {
+  fetchCategories()
+  fetchRandomTemplates()
+})
 
-// Klik kategori
 const onCategoryClick = (category) => {
   emit('category-selected', category)
 }
 
-// Debugging (opsional)
-watch(categories, (val) => {
-  console.log('Categories:', val)
-})
+const onTemplateClick = (template) => {
+  emit('template-selected', template)
+}
 </script>