diff --git a/proyek-frontend/app/components/templates/UltahBasic/Event.vue b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
index 7af9336..ce5aa2c 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Event.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Event.vue
@@ -1,21 +1,44 @@
 <template>
-  <div class="text-center p-6 max-w-2xl mx-auto">
-    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
+  <div class="relative text-center p-6 max-w-2xl mx-auto">
+    <!-- Balon kiri - di ujung kiri -->
+    <img
+      src="/balloon2.png"
+      alt="Balloons Left"
+      class="fixed left-0 bottom-0 w-64 md:w-80 lg:w-96 opacity-90 animate-swing-left select-none pointer-events-none z-0 balloon-left -translate-x-[53%]"
+    />
+
+    <!-- Balon kanan - di ujung kanan -->
+    <img
+      src="/balloon2.png"
+      alt="Balloons Right"
+      class="fixed right-0 bottom-0 w-64 md:w-80 lg:w-96 opacity-90 animate-swing-right select-none pointer-events-none z-0 balloon-right translate-x-[54%]"
+    />
+
+    <!-- Judul -->
+    <h2
+      class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 mt-10 relative z-10"
+    >
       🎈 Acara Ulang Tahun 🎈
     </h2>
 
-    <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300">
+    <!-- Kartu informasi -->
+    <div
+      class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 border border-yellow-100 transform hover:scale-105 transition-transform duration-300 relative z-10"
+    >
       <div class="space-y-4 text-gray-700 text-lg">
         <div class="flex items-center justify-center space-x-3">
           <span class="text-2xl">📅</span>
-          <p><strong class="text-orange-500">Hari & Tanggal:</strong> {{ formatDate(hari_tanggal_acara) }}</p>
+          <p>
+            <strong class="text-orange-500">Hari & Tanggal:</strong>
+            {{ formatDate(hari_tanggal_acara) }}
+          </p>
         </div>
-        
+
         <div class="flex items-center justify-center space-x-3">
           <span class="text-2xl">⏰</span>
           <p><strong class="text-orange-500">Waktu:</strong> {{ waktu }}</p>
         </div>
-        
+
         <div class="flex items-center justify-center space-x-3">
           <span class="text-2xl">📍</span>
           <p><strong class="text-orange-500">Alamat:</strong> {{ alamat }}</p>
@@ -33,47 +56,115 @@
       </a>
     </div>
 
-    <div v-if="countdownText" class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto">
+    <!-- Hitung mundur -->
+    <div
+      v-if="countdownText"
+      class="mt-8 bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-6 rounded-2xl shadow-lg max-w-md mx-auto animate-pulse relative z-10"
+    >
       <p class="text-xl font-bold">⏰ {{ countdownText }}</p>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, watchEffect } from 'vue'
+import { ref, watchEffect } from "vue";
 
 const props = defineProps({
   hari_tanggal_acara: String,
   waktu: String,
   alamat: String,
   link_gmaps: String,
-  hitung_mundur: String
-})
+  hitung_mundur: String,
+});
 
-const countdownText = ref('')
+const countdownText = ref("");
 
 // Format tanggal
 function formatDate(dateStr) {
-  if (!dateStr) return '-'
-  const date = new Date(dateStr)
-  return date.toLocaleDateString('id-ID', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })
+  if (!dateStr) return "-";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("id-ID", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
 }
 
-// Countdown
+// Hitung mundur
 watchEffect(() => {
-  if (!props.hitung_mundur) return
+  if (!props.hitung_mundur) return;
 
-  const target = new Date(props.hitung_mundur)
-  const now = new Date()
-  const diff = target - now
+  const target = new Date(props.hitung_mundur);
+  const now = new Date();
+  const diff = target - now;
 
   if (diff <= 0) {
-    countdownText.value = 'Acara sedang berlangsung 🎉'
+    countdownText.value = "Acara sedang berlangsung 🎉";
   } else {
-    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
-    const minutes = Math.floor((diff / (1000 * 60)) % 60)
-    countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+    const minutes = Math.floor((diff / (1000 * 60)) % 60);
+    countdownText.value = `${days} hari ${hours} jam ${minutes} menit lagi!`;
   }
-})
-</script>
\ No newline at end of file
+});
+</script>
+
+<style scoped>
+/* ===== Efek berayun ke kanan-kiri ===== */
+@keyframes swingLeft {
+  0% {
+    transform: rotate(40deg) translateX(0);
+  }
+  25% {
+    transform: rotate(35deg) translateX(-8px);
+  }
+  50% {
+    transform: rotate(40deg) translateX(0);
+  }
+  75% {
+    transform: rotate(45deg) translateX(8px);
+  }
+  100% {
+    transform: rotate(40deg) translateX(0);
+  }
+}
+
+@keyframes swingRight {
+  0% {
+    transform: rotate(-40deg) translateX(0);
+  }
+  25% {
+    transform: rotate(-35deg) translateX(8px);
+  }
+  50% {
+    transform: rotate(-40deg) translateX(0);
+  }
+  75% {
+    transform: rotate(-45deg) translateX(-8px);
+  }
+  100% {
+    transform: rotate(-40deg) translateX(0);
+  }
+}
+
+/* Kelas animasi */
+.animate-swing-left {
+  animation: swingLeft 5s ease-in-out infinite;
+}
+
+.animate-swing-right {
+  animation: swingRight 5s ease-in-out infinite;
+}
+
+/* Rotasi dasar balon kiri dan kanan */
+.balloon-left {
+  transform-origin: bottom center;
+  rotate: 8deg;
+}
+
+.balloon-right {
+  transform-origin: bottom center;
+   rotate: -10deg;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
index e63a8c2..eb03588 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Gallery.vue
@@ -1,28 +1,46 @@
 <template>
-  <div class="p-6 text-center max-w-4xl mx-auto">
-    <h2 class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8">
+  <div class="relative p-6 text-center max-w-4xl mx-auto">
+    <!-- Gambar Happy Birthday di belakang -->
+    <img
+      src="/happy1.png"
+      alt="Happy Birthday"
+      class="absolute top-[-59%] left-1/2 transform  w-80 md:w-96 opacity-90 z-0 animate-happy-drop"
+    />
+
+    <h2
+      class="text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent mb-8 relative z-10"
+    >
       📸 Galeri Foto 📸
     </h2>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div
+      class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 relative z-10"
+    >
       <div
         v-for="(img, i) in images"
         :key="i"
         class="group relative overflow-hidden rounded-2xl shadow-lg transform hover:scale-105 transition-all duration-500"
       >
-        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
+        <div
+          class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"
+        ></div>
         <img
           :src="img"
           alt="Galeri"
           class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500"
         />
-        <div class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20">
+        <div
+          class="absolute bottom-0 left-0 right-0 p-4 text-white transform translate-y-full group-hover:translate-y-0 transition-transform duration-300 z-20"
+        >
           <p class="font-semibold">Foto {{ i + 1 }}</p>
         </div>
       </div>
     </div>
 
-    <div v-if="images.length === 0" class="bg-white/80 rounded-2xl p-8 shadow-lg">
+    <div
+      v-if="images.length === 0"
+      class="bg-white/80 rounded-2xl p-8 shadow-lg relative z-10"
+    >
       <p class="text-gray-600 text-lg">Belum ada foto yang diunggah</p>
     </div>
   </div>
@@ -32,4 +50,47 @@
 defineProps({
   images: Array
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+/* Animasi jatuh dari atas dan berayun ke kanan–kiri */
+@keyframes happyDrop {
+  0% {
+    transform: translate(-50%, -200px) rotate(0deg);
+    opacity: 0;
+  }
+  40% {
+    transform: translate(-50%, 6px) rotate(4deg);
+    opacity: 1;
+  }
+  60% {
+    transform: translate(-50%, 0) rotate(-3deg);
+  }
+  100% {
+    transform: translate(-50%, 0) rotate(0deg);
+  }
+}
+
+@keyframes happySwing {
+  0% {
+    transform: translate(-50%, 0) rotate(0deg);
+  }
+  25% {
+    transform: translate(-50%, 0) rotate(3deg);
+  }
+  50% {
+    transform: translate(-50%, 0) rotate(0deg);
+  }
+  75% {
+    transform: translate(-50%, 0) rotate(-3deg);
+  }
+  100% {
+    transform: translate(-50%, 0) rotate(0deg);
+  }
+}
+
+.animate-happy-drop {
+  animation: happyDrop 1.5s ease-out forwards, happySwing 4s ease-in-out infinite 1.5s;
+  transform-origin: top center;
+}
+</style>
diff --git a/proyek-frontend/app/components/templates/UltahBasic/Landing.vue b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
index 608ed77..94a44ce 100644
--- a/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
+++ b/proyek-frontend/app/components/templates/UltahBasic/Landing.vue
@@ -1,19 +1,45 @@
 <template>
   <div
-    class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4"
+    class="flex flex-col items-center justify-center text-center text-gray-800 min-h-screen px-4 overflow-hidden"
   >
-    <!-- Animated elements -->
+    <!-- Animated emojis -->
     <div class="absolute top-10 left-10 animate-bounce">🎈</div>
     <div class="absolute top-10 right-10 animate-bounce delay-100">🎁</div>
     <div class="absolute bottom-20 left-20 animate-bounce delay-200">🍰</div>
     <div class="absolute bottom-20 right-20 animate-bounce delay-300">🎉</div>
 
-    <div class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500">
-      <h1 class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent">
+    <!-- Floating Balloons -->
+    <div class="balloon-container">
+      <div class="balloon balloon-left-1">
+        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
+      </div>
+      <div class="balloon balloon-left-2">
+        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
+      </div>
+      <div class="balloon balloon-right-1">
+        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
+      </div>
+      <div class="balloon balloon-right-2">
+        <img src="/balloon1.png" alt="Balloon" class="w-32 h-auto" />
+      </div>
+    </div>
+
+    <!-- Card -->
+    <div
+      class="bg-white/70 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-yellow-200 max-w-md transform hover:scale-105 transition-transform duration-500 z-20"
+    >
+      <h1
+        class="text-4xl md:text-5xl font-extrabold mb-6 bg-gradient-to-r from-orange-500 to-yellow-500 bg-clip-text text-transparent"
+      >
         🎂 Undangan Ulang Tahun 🎂
       </h1>
-      <p class="text-lg mb-4">Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!</p>
-      <p class="text-lg mb-6">Yuk, datang ke acara ulang tahun <span class="font-bold text-orange-500">{{ childName }}</span>!</p>
+      <p class="text-lg mb-4">
+        Hai <span class="font-semibold text-orange-600">{{ guestName }}</span>!
+      </p>
+      <p class="text-lg mb-6">
+        Yuk, datang ke acara ulang tahun
+        <span class="font-bold text-orange-500">{{ childName }}</span>!
+      </p>
       <button
         @click="$emit('open-invitation')"
         class="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white px-8 py-4 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-110 hover:shadow-xl"
@@ -29,4 +55,68 @@ defineProps({
   childName: String,
   guestName: String,
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.balloon-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 5;
+}
+
+/* BALLOON STYLES */
+.balloon {
+  position: absolute;
+  bottom: -150px;
+  opacity: 0;
+  animation: floatUp 12s ease-in-out infinite;
+}
+
+.balloon-left-1 {
+  left: 8%;
+  animation-delay: 0s;
+}
+
+.balloon-left-2 {
+  left: 20%;
+  animation-delay: 4s;
+}
+
+.balloon-right-1 {
+  right: 8%;
+  animation-delay: 2s;
+}
+
+.balloon-right-2 {
+  right: 22%;
+  animation-delay: 6s;
+}
+
+/* FLOAT UP ANIMATION */
+@keyframes floatUp {
+  0% {
+    transform: translateY(0) scale(0.8) rotate(0deg);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  60% {
+    transform: translateY(-60vh) scale(1) rotate(10deg);
+    opacity: 0.9;
+  }
+  80% {
+    transform: translateY(-80vh) scale(1.1) rotate(-10deg);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(-100vh) scale(1.2) rotate(15deg);
+    opacity: 0;
+  }
+}
+</style>
diff --git a/proyek-frontend/public/balloon1.png b/proyek-frontend/public/balloon1.png
new file mode 100644
index 0000000..5c1467f
Binary files /dev/null and b/proyek-frontend/public/balloon1.png differ
diff --git a/proyek-frontend/public/balloon2.png b/proyek-frontend/public/balloon2.png
new file mode 100644
index 0000000..8df8592
Binary files /dev/null and b/proyek-frontend/public/balloon2.png differ
diff --git a/proyek-frontend/public/happy1.png b/proyek-frontend/public/happy1.png
new file mode 100644
index 0000000..3d40a2a
Binary files /dev/null and b/proyek-frontend/public/happy1.png differ