diff --git a/proyek-frontend/app/components/undangan/undangan-minimalis.vue b/proyek-frontend/app/components/undangan/undangan-minimalis.vue
new file mode 100644
index 0000000..2bd6674
--- /dev/null
+++ b/proyek-frontend/app/components/undangan/undangan-minimalis.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <div class="relative max-w-md w-full bg-white rounded-lg shadow-lg overflow-hidden">
+      <!-- Background Image -->
+      <div
+        class="absolute inset-0 bg-cover bg-center opacity-20"
+        :style="{ backgroundImage: `url(${imageUrl})` }"
+      ></div>
+      
+      <!-- Content -->
+      <div class="relative z-10 p-8 text-center">
+        <h1 class="text-3xl font-serif font-bold text-gray-800 mb-4">
+          {{ data.nama_pengantin || 'Undangan Pernikahan' }}
+        </h1>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-semibold text-gray-700">Tanggal Acara</h2>
+          <p class="text-gray-600">
+            {{ formatDate(data.tanggal_acara) || 'Tanggal belum ditentukan' }}
+          </p>
+        </div>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-semibold text-gray-700">Lokasi</h2>
+          <p class="text-gray-600">{{ data.lokasi || 'Lokasi belum ditentukan' }}</p>
+        </div>
+        
+        <div class="mt-8">
+          <p class="text-sm text-gray-500 italic">
+            {{ data.template.nama_template }} - {{ data.template.paket.toUpperCase() }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRuntimeConfig } from '#app'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+    validator: (data) => 'template' in data && 'slug' in data.template,
+  },
+})
+
+const config = useRuntimeConfig()
+const backendUrl = config.public.apiBaseUrl
+
+const imageUrl = computed(() => {
+  return props.data.template.foto
+    ? `${backendUrl}/storage/${props.data.template.foto}`
+    : 'https://via.placeholder.com/400x600'
+})
+
+const formatDate = (dateString) => {
+  if (!dateString) return null
+  const date = new Date(dateString)
+  return date.toLocaleDateString('id-ID', {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+</script>
diff --git a/proyek-frontend/app/pages/p/[code].vue b/proyek-frontend/app/pages/p/[code].vue
new file mode 100644
index 0000000..06c3e86
--- /dev/null
+++ b/proyek-frontend/app/pages/p/[code].vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center bg-gray-100">
+    <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>
+
+    <div v-else-if="error" class="max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center">
+      <p class="text-red-600">{{ error }}</p>
+    </div>
+
+    <div v-else>
+        <component v-if="dynamicComponent" :is="dynamicComponent" :data="data" />
+
+      <div v-else class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
+        <h1 class="text-2xl font-bold text-gray-800 mb-4">Invitation Data</h1>
+        <div v-for="(value, key) in data" :key="key" class="mb-4">
+          <h2 class="text-lg font-semibold text-gray-700 capitalize">{{ key.replace('_', ' ') }}</h2>
+          <p v-if="typeof value !== 'object'" class="text-gray-600">{{ value }}</p>
+          <pre v-else class="text-gray-600 bg-gray-50 p-2 rounded">{{ JSON.stringify(value, null, 2) }}</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute()
+const config = useRuntimeConfig()
+const backendUrl = config.public.apiBaseUrl
+
+const error = ref(null)
+
+const { data, pending } = await useAsyncData('invitation', async () => {
+  try {
+    const response = await $fetch(`${backendUrl}/api/pelanggans/code/${route.params.code}`)
+    if (!response.data || !response.data.template || !response.data.template.slug) {
+      throw new Error('Invalid API response structure')
+    }
+    return response.data
+  } catch (err) {
+    error.value = err.message || 'Failed to load invitation data'
+    return null
+  }
+})
+
+const componentMap = {
+  minimalis: defineAsyncComponent(() => import('~/components/undangan/undangan-minimalis.vue')),
+  /// impory
+}
+
+const dynamicComponent = computed(() => {
+  return data.value?.template?.slug ? componentMap[data.value.template.slug] || null : null
+})
+
+useHead({
+  title: data.value?.nama_pelanggan || 'Undangan Pernikahan',
+  meta: [
+    { name: 'description', content: `Undangan pernikahan untuk ${data.value?.nama_pengantin || 'tamu undangan'}` },
+  ],
+})
+</script>
+
+<style scoped>
+pre {
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>