diff --git a/resources/views/components/lottie/not-found.blade.php b/resources/views/components/lottie/not-found.blade.php
new file mode 100644
index 0000000..b18f1ef
--- /dev/null
+++ b/resources/views/components/lottie/not-found.blade.php
@@ -0,0 +1,8 @@
+<div class="flex justify-center flex-col">
+    <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay loop
+        style="width: 200px; height: 200px; margin: 0 auto;">
+    </dotlottie-wc>
+    <flux:text class="block text-center italic mt-5">
+        {!! isset($message) ? $message : 'Yahhh, sepertinya belum ada data yang tersedia.' !!}
+    </flux:text>
+</div>
diff --git a/resources/views/components/partials/audit.blade.php b/resources/views/components/partials/audit.blade.php
index 4b19237..fd750f8 100644
--- a/resources/views/components/partials/audit.blade.php
+++ b/resources/views/components/partials/audit.blade.php
@@ -43,14 +43,7 @@ class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
                 </p>
             </flux:card>
         @empty
-            <div class="flex justify-center flex-col">
-                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
-                    loop style="width: 200px; height: 200px; margin: 0 auto;">
-                </dotlottie-wc>
-                <flux:text class="block text-center italic mt-5">
-                    Yahhh, sepertinya belum ada data yang tersedia.
-                </flux:text>
-            </div>
+            @include('components.lottie.not-found')
         @endforelse
     </div>
 
diff --git a/resources/views/livewire/member/voucher.blade.php b/resources/views/livewire/member/voucher.blade.php
index 8f73647..93cf7bf 100644
--- a/resources/views/livewire/member/voucher.blade.php
+++ b/resources/views/livewire/member/voucher.blade.php
@@ -64,14 +64,7 @@ class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700
 
             </div>
         @else
-            <div class="flex justify-center flex-col">
-                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
-                    loop style="width: 200px; height: 200px; margin: 0 auto;">
-                </dotlottie-wc>
-                <flux:text class="block text-center italic mt-5">
-                    Yahhh, sepertinya belum ada data yang tersedia.
-                </flux:text>
-            </div>
+            @include('components.lottie.not-found')
         @endif
     </div>
 </flux:main>
diff --git a/resources/views/livewire/studio/master/formulas.blade.php b/resources/views/livewire/studio/master/formulas.blade.php
index c240b9c..412cafd 100644
--- a/resources/views/livewire/studio/master/formulas.blade.php
+++ b/resources/views/livewire/studio/master/formulas.blade.php
@@ -15,43 +15,47 @@
     </div>
 
     <div class="mt-6">
-        <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            @foreach ($formulas as $key => $formula)
-                <flux:card class="space-y-2">
-                    <div class="mb-4 pb-3 border-b border-gray-200">
-                        <flux:heading size="xl" class="flex items-center gap-2">
-                            <flux:badge color="blue" size="lg">{{ $key }} ml</flux:badge>
-                        </flux:heading>
-                    </div>
-                    @foreach ($formula as $item)
-                        <flux:callout variant="secondary" inline>
-                            <div class="flex items-center space-x-1">
-                                <flux:callout.heading>{{ $item['quality'] }}</flux:callout.heading>
-                                <flux:text class="text-xs text-gray-400">({{ $item['volume'] }} ml)</flux:text>
-                            </div>
+        @if (!empty($formulas))
+            <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                @foreach ($formulas as $key => $formula)
+                    <flux:card class="space-y-2">
+                        <div class="mb-4 pb-3 border-b border-gray-200">
+                            <flux:heading size="xl" class="flex items-center gap-2">
+                                <flux:badge color="blue" size="lg">{{ $key }} ml</flux:badge>
+                            </flux:heading>
+                        </div>
+                        @foreach ($formula as $item)
+                            <flux:callout variant="secondary" inline>
+                                <div class="flex items-center space-x-1">
+                                    <flux:callout.heading>{{ $item['quality'] }}</flux:callout.heading>
+                                    <flux:text class="text-xs text-gray-400">({{ $item['volume'] }} ml)</flux:text>
+                                </div>
 
-                            <x-slot name="actions">
-                                <flux:modal.trigger name="form-modal">
-                                    <flux:tooltip content="Ubah">
-                                        <flux:button variant="primary" color="yellow" icon="pencil-square"
-                                            size="sm"
-                                            wire:click="$dispatch('modal:open', {method: 'update', 'modalTitle': 'Ubah Rumus', 'id': '{{ $item['hash'] }}'})">
-                                        </flux:button>
-                                    </flux:tooltip>
-                                </flux:modal.trigger>
-                                <flux:modal.trigger name="delete">
-                                    <flux:tooltip content="Hapus">
-                                        <flux:button variant="danger" icon="trash" size="sm"
-                                            wire:click="$dispatch('fn:confirmAction', {id: '{{ $item['hash'] }}'})">
-                                        </flux:button>
-                                    </flux:tooltip>
-                                </flux:modal.trigger>
-                            </x-slot>
-                        </flux:callout>
-                    @endforeach
-                </flux:card>
-            @endforeach
-        </div>
+                                <x-slot name="actions">
+                                    <flux:modal.trigger name="form-modal">
+                                        <flux:tooltip content="Ubah">
+                                            <flux:button variant="primary" color="yellow" icon="pencil-square"
+                                                size="sm"
+                                                wire:click="$dispatch('modal:open', {method: 'update', 'modalTitle': 'Ubah Rumus', 'id': '{{ $item['hash'] }}'})">
+                                            </flux:button>
+                                        </flux:tooltip>
+                                    </flux:modal.trigger>
+                                    <flux:modal.trigger name="delete">
+                                        <flux:tooltip content="Hapus">
+                                            <flux:button variant="danger" icon="trash" size="sm"
+                                                wire:click="$dispatch('fn:confirmAction', {id: '{{ $item['hash'] }}'})">
+                                            </flux:button>
+                                        </flux:tooltip>
+                                    </flux:modal.trigger>
+                                </x-slot>
+                            </flux:callout>
+                        @endforeach
+                    </flux:card>
+                @endforeach
+            </div>
+        @else
+            @include('components.lottie.not-found')
+        @endif
     </div>
 
     @include('components.confirmation.delete')
@@ -102,3 +106,6 @@
         </div>
     </flux:modal>
 </flux:main>
+@assets
+    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
+@endassets