diff --git a/resources/views/components/datatables/confirm.blade.php b/resources/views/components/actions/table/confirm.blade.php
similarity index 100%
rename from resources/views/components/datatables/confirm.blade.php
rename to resources/views/components/actions/table/confirm.blade.php
diff --git a/resources/views/components/datatables/delete.blade.php b/resources/views/components/actions/table/delete.blade.php
similarity index 83%
rename from resources/views/components/datatables/delete.blade.php
rename to resources/views/components/actions/table/delete.blade.php
index bf5d1bb..0ef65e4 100644
--- a/resources/views/components/datatables/delete.blade.php
+++ b/resources/views/components/actions/table/delete.blade.php
@@ -1,4 +1,4 @@
-<flux:modal.trigger name="delete">
+<flux:modal.trigger name="delete-confirmation">
     <flux:tooltip content="Hapus">
         <flux:button variant="danger" icon="trash" size="sm"
             wire:click="$dispatch('fn:confirmAction', {id: '{{ $id }}'})">
diff --git a/resources/views/components/datatables/edit-modal.blade.php b/resources/views/components/actions/table/edit-modal.blade.php
similarity index 100%
rename from resources/views/components/datatables/edit-modal.blade.php
rename to resources/views/components/actions/table/edit-modal.blade.php
diff --git a/resources/views/components/datatables/edit.blade.php b/resources/views/components/actions/table/edit.blade.php
similarity index 100%
rename from resources/views/components/datatables/edit.blade.php
rename to resources/views/components/actions/table/edit.blade.php
diff --git a/resources/views/components/datatables/new-page-action.blade.php b/resources/views/components/actions/table/new-page-action.blade.php
similarity index 100%
rename from resources/views/components/datatables/new-page-action.blade.php
rename to resources/views/components/actions/table/new-page-action.blade.php
diff --git a/resources/views/components/datatables/print.blade.php b/resources/views/components/actions/table/print.blade.php
similarity index 100%
rename from resources/views/components/datatables/print.blade.php
rename to resources/views/components/actions/table/print.blade.php
diff --git a/resources/views/components/datatables/show.blade.php b/resources/views/components/actions/table/show.blade.php
similarity index 100%
rename from resources/views/components/datatables/show.blade.php
rename to resources/views/components/actions/table/show.blade.php
diff --git a/resources/views/components/datatables/sort-button.blade.php b/resources/views/components/actions/table/sort-button.blade.php
similarity index 100%
rename from resources/views/components/datatables/sort-button.blade.php
rename to resources/views/components/actions/table/sort-button.blade.php
diff --git a/resources/views/components/lottie/not-found.blade.php b/resources/views/components/animations/lottie/not-found.blade.php
similarity index 100%
rename from resources/views/components/lottie/not-found.blade.php
rename to resources/views/components/animations/lottie/not-found.blade.php
diff --git a/resources/views/components/confirmation/delete.blade.php b/resources/views/components/confirmation/delete.blade.php
deleted file mode 100644
index d306887..0000000
--- a/resources/views/components/confirmation/delete.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<flux:modal name="delete" class="w-[22rem]">
-    <div class="space-y-6">
-        <div>
-            <flux:heading size="lg">{{ $confirmingTitle }}</flux:heading>
-            <flux:text class="mt-2">{{ $confirmingMessage }}</flux:text>
-        </div>
-        <div class="flex gap-2">
-            <flux:spacer />
-            <flux:modal.close>
-                <flux:button variant="ghost">Batal</flux:button>
-            </flux:modal.close>
-            <flux:button type="submit" variant="danger" wire:click="delete('{{ $confirmingId }}')">
-                {{ $confirmingButtonText }}
-            </flux:button>
-        </div>
-    </div>
-</flux:modal>
diff --git a/resources/views/components/confirmation/reset-password.blade.php b/resources/views/components/confirmation/reset-password.blade.php
deleted file mode 100644
index 8a04455..0000000
--- a/resources/views/components/confirmation/reset-password.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<flux:modal name="reset-password" class="w-[22rem]">
-    <div class="space-y-6">
-        <div>
-            <flux:heading size="lg">{{ $confirmingTitle }}</flux:heading>
-            <flux:text class="mt-2">{{ $confirmingMessage }}</flux:text>
-        </div>
-        <div class="flex gap-2">
-            <flux:spacer />
-            <flux:modal.close>
-                <flux:button variant="ghost">Batal</flux:button>
-            </flux:modal.close>
-            <flux:button type="submit" variant="danger" wire:click="resetPassword('{{ $confirmingId }}')">
-                {{ $confirmingButtonText }}
-            </flux:button>
-        </div>
-    </div>
-</flux:modal>
diff --git a/resources/views/components/layouts/home.blade.php b/resources/views/components/layouts/home.blade.php
index a64934a..78aa740 100644
--- a/resources/views/components/layouts/home.blade.php
+++ b/resources/views/components/layouts/home.blade.php
@@ -13,7 +13,7 @@
     </head>
 
     <body>
-        @include('components.partials.home._header')
+        @include('components.sections.ui.home._header')
 
         @persist('toast')
             <flux:toast position="bottom end" class="ps-6" />
diff --git a/resources/views/components/layouts/member.blade.php b/resources/views/components/layouts/member.blade.php
index 10eda28..22e55da 100644
--- a/resources/views/components/layouts/member.blade.php
+++ b/resources/views/components/layouts/member.blade.php
@@ -13,8 +13,8 @@
     </head>
 
     <body class="min-h-screen bg-white dark:bg-zinc-800">
-        @include('components.partials.member._sidebar')
-        @include('components.partials.member._header')
+        @include('components.sections.ui.member._sidebar')
+        @include('components.sections.ui.member._header')
 
         @persist('toast')
             <flux:toast position="bottom end" class="ps-6" />
diff --git a/resources/views/components/layouts/studio.blade.php b/resources/views/components/layouts/studio.blade.php
index 0b57824..2272847 100644
--- a/resources/views/components/layouts/studio.blade.php
+++ b/resources/views/components/layouts/studio.blade.php
@@ -13,8 +13,8 @@
     </head>
 
     <body class="min-h-screen bg-white dark:bg-zinc-800">
-        @include('components.partials.studio._sidebar')
-        @include('components.partials.studio._header')
+        @include('components.sections.ui.studio._sidebar')
+        @include('components.sections.ui.studio._header')
 
         @persist('toast')
             <flux:toast position="bottom end" class="ps-6" />
diff --git a/resources/views/components/confirmation.blade.php b/resources/views/components/modals/confirmation.blade.php
similarity index 52%
rename from resources/views/components/confirmation.blade.php
rename to resources/views/components/modals/confirmation.blade.php
index 9726051..3535636 100644
--- a/resources/views/components/confirmation.blade.php
+++ b/resources/views/components/modals/confirmation.blade.php
@@ -1,17 +1,17 @@
-<flux:modal name="confirmation-modal" class="w-[22rem]">
+<flux:modal name="{{ $modalName }}" class="w-[22rem]">
     <div class="space-y-6">
         <div>
-            <flux:heading size="lg">{{ $confirmingTitle }}</flux:heading>
-            <flux:text class="mt-2">{{ $confirmingMessage }}</flux:text>
+            <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
+            <flux:text class="mt-2">{{ $modalMessage }}</flux:text>
         </div>
         <div class="flex gap-2">
             <flux:spacer />
             <flux:modal.close>
                 <flux:button variant="ghost">Batal</flux:button>
             </flux:modal.close>
-            <flux:button type="submit" variant="primary" color="{{ $confirmButtonColor }}"
+            <flux:button type="submit" variant="{{ $buttonVariant }}" color="{{ $buttonColor }}"
                 wire:click="{{ $target }}('{{ $confirmingId }}')">
-                {{ $confirmingButtonText }}
+                {{ $buttonText }}
             </flux:button>
         </div>
     </div>
diff --git a/resources/views/components/confirmation/show-price.blade.php b/resources/views/components/modals/confirmations/request-price.blade.php
similarity index 100%
rename from resources/views/components/confirmation/show-price.blade.php
rename to resources/views/components/modals/confirmations/request-price.blade.php
diff --git a/resources/views/components/partials/member/_header.blade.php b/resources/views/components/partials/member/_header.blade.php
deleted file mode 100644
index bac0b40..0000000
--- a/resources/views/components/partials/member/_header.blade.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<flux:header class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
-    <flux:sidebar.toggle class="lg:hidden" icon="bars-2" />
-    <flux:brand logo="{{ asset('assets/images/logo.png') }}" name="Yadi Parfum" class="max-lg:hidden dark:hidden" />
-    <flux:brand logo="{{ asset('assets/images/dark-logo.png') }}" name="Yadi Parfum"
-        class="max-lg:hidden! hidden dark:flex" />
-    <flux:spacer />
-    <flux:navbar class="me-4">
-        {{-- <flux:navbar.item icon="bell" label="Notifikasi" /> --}}
-        <flux:navbar.item x-data x-on:click="$flux.dark = ! $flux.dark">
-            <template x-if="$flux.dark">
-                <div class="flex items-center gap-2">
-                    <flux:icon name="sun" class="w-5 h-5" />
-                </div>
-            </template>
-
-            <template x-if="!$flux.dark">
-                <div class="flex items-center gap-2">
-                    <flux:icon name="moon" class="w-5 h-5" />
-                </div>
-            </template>
-        </flux:navbar.item>
-    </flux:navbar>
-    <flux:dropdown position="top" align="end">
-        <flux:profile circle name="{{ auth()->user()?->customer?->name }}" />
-        <flux:navmenu>
-            <flux:navmenu.item href="{{ route('studio.setting.account', auth()->id()) }}" icon="cog"
-                wire:navigate.hover>
-                Pengaturan
-            </flux:navmenu.item>
-            <flux:menu.separator />
-            @livewire('auth.logout')
-        </flux:navmenu>
-    </flux:dropdown>
-</flux:header>
diff --git a/resources/views/components/partials/audit.blade.php b/resources/views/components/sections/ui/audit.blade.php
similarity index 97%
rename from resources/views/components/partials/audit.blade.php
rename to resources/views/components/sections/ui/audit.blade.php
index 4889ac6..75cf3d1 100644
--- a/resources/views/components/partials/audit.blade.php
+++ b/resources/views/components/sections/ui/audit.blade.php
@@ -43,7 +43,7 @@ class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
                 </p>
             </flux:card>
         @empty
-            @include('components.lottie.not-found')
+            @include('components.animations.lottie.not-found')
         @endforelse
     </div>
 
diff --git a/resources/views/components/partials/home/_footer.blade.php b/resources/views/components/sections/ui/home/_footer.blade.php
similarity index 100%
rename from resources/views/components/partials/home/_footer.blade.php
rename to resources/views/components/sections/ui/home/_footer.blade.php
diff --git a/resources/views/components/partials/home/_header.blade.php b/resources/views/components/sections/ui/home/_header.blade.php
similarity index 100%
rename from resources/views/components/partials/home/_header.blade.php
rename to resources/views/components/sections/ui/home/_header.blade.php
diff --git a/resources/views/components/sections/ui/member/_header.blade.php b/resources/views/components/sections/ui/member/_header.blade.php
new file mode 100644
index 0000000..dc4236e
--- /dev/null
+++ b/resources/views/components/sections/ui/member/_header.blade.php
@@ -0,0 +1,4 @@
+@include('components.sections.ui.shared._header', [
+    'profileName' => auth()->user()?->customer?->name,
+    'settingsRoute' => route('studio.setting.account', auth()->id())
+])
diff --git a/resources/views/components/partials/member/_sidebar.blade.php b/resources/views/components/sections/ui/member/_sidebar.blade.php
similarity index 100%
rename from resources/views/components/partials/member/_sidebar.blade.php
rename to resources/views/components/sections/ui/member/_sidebar.blade.php
diff --git a/resources/views/components/partials/studio/_header.blade.php b/resources/views/components/sections/ui/shared/_header.blade.php
similarity index 87%
rename from resources/views/components/partials/studio/_header.blade.php
rename to resources/views/components/sections/ui/shared/_header.blade.php
index ee37853..2820f03 100644
--- a/resources/views/components/partials/studio/_header.blade.php
+++ b/resources/views/components/sections/ui/shared/_header.blade.php
@@ -21,9 +21,9 @@ class="max-lg:hidden! hidden dark:flex" />
         </flux:navbar.item>
     </flux:navbar>
     <flux:dropdown position="top" align="end">
-        <flux:profile circle name="{{ auth()->user()?->employee?->full_name }}" />
+        <flux:profile circle name="{{ $profileName }}" />
         <flux:navmenu>
-            <flux:navmenu.item href="{{ route('studio.setting.account') }}" icon="cog" wire:navigate.hover>
+            <flux:navmenu.item href="{{ $settingsRoute }}" icon="cog" wire:navigate.hover>
                 Pengaturan
             </flux:navmenu.item>
             <flux:menu.separator />
diff --git a/resources/views/components/sections/ui/studio/_header.blade.php b/resources/views/components/sections/ui/studio/_header.blade.php
new file mode 100644
index 0000000..14ded39
--- /dev/null
+++ b/resources/views/components/sections/ui/studio/_header.blade.php
@@ -0,0 +1,4 @@
+@include('components.sections.ui.shared._header', [
+    'profileName' => auth()->user()?->employee?->full_name,
+    'settingsRoute' => route('studio.setting.account')
+])
diff --git a/resources/views/components/partials/studio/_sidebar.blade.php b/resources/views/components/sections/ui/studio/_sidebar.blade.php
similarity index 100%
rename from resources/views/components/partials/studio/_sidebar.blade.php
rename to resources/views/components/sections/ui/studio/_sidebar.blade.php
diff --git a/resources/views/livewire/member/voucher.blade.php b/resources/views/livewire/member/voucher.blade.php
index 93cf7bf..7815551 100644
--- a/resources/views/livewire/member/voucher.blade.php
+++ b/resources/views/livewire/member/voucher.blade.php
@@ -64,7 +64,7 @@ class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700
 
             </div>
         @else
-            @include('components.lottie.not-found')
+            @include('components.animations.lottie.not-found')
         @endif
     </div>
 </flux:main>
diff --git a/resources/views/livewire/studio/catalog/bottle/index.blade.php b/resources/views/livewire/studio/catalog/bottle/index.blade.php
index 24074c3..e734b86 100644
--- a/resources/views/livewire/studio/catalog/bottle/index.blade.php
+++ b/resources/views/livewire/studio/catalog/bottle/index.blade.php
@@ -25,6 +25,13 @@ class="text-sm">
         <livewire:datatable.studio.catalog.bottles-table />
     </div>
 
-    @include('components.confirmation.delete')
-    @include('components.confirmation.show-price', ['module' => 'botol'])
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
+    @include('components.modals.confirmations.request-price', ['module' => 'botol'])
 </flux:main>
diff --git a/resources/views/livewire/studio/catalog/brands.blade.php b/resources/views/livewire/studio/catalog/brands.blade.php
index 107ee08..51f2811 100644
--- a/resources/views/livewire/studio/catalog/brands.blade.php
+++ b/resources/views/livewire/studio/catalog/brands.blade.php
@@ -18,7 +18,14 @@
         <livewire:datatable.studio.catalog.brands-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/catalog/categories.blade.php b/resources/views/livewire/studio/catalog/categories.blade.php
index 98c3268..0a2b14f 100644
--- a/resources/views/livewire/studio/catalog/categories.blade.php
+++ b/resources/views/livewire/studio/catalog/categories.blade.php
@@ -18,7 +18,14 @@
         <livewire:datatable.studio.catalog.categories-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/catalog/perfume/index.blade.php b/resources/views/livewire/studio/catalog/perfume/index.blade.php
index aedc506..0e0e7db 100644
--- a/resources/views/livewire/studio/catalog/perfume/index.blade.php
+++ b/resources/views/livewire/studio/catalog/perfume/index.blade.php
@@ -25,6 +25,13 @@ class="text-sm">
         <livewire:datatable.studio.catalog.perfumes-table />
     </div>
 
-    @include('components.confirmation.delete')
-    @include('components.confirmation.show-price', ['module' => 'parfum'])
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
+    @include('components.modals.confirmations.request-price', ['module' => 'parfum'])
 </flux:main>
diff --git a/resources/views/livewire/studio/catalog/product/index.blade.php b/resources/views/livewire/studio/catalog/product/index.blade.php
index 595dc18..3d60824 100644
--- a/resources/views/livewire/studio/catalog/product/index.blade.php
+++ b/resources/views/livewire/studio/catalog/product/index.blade.php
@@ -25,6 +25,13 @@ class="text-sm">
         <livewire:datatable.studio.catalog.products-table />
     </div>
 
-    @include('components.confirmation.delete')
-    @include('components.confirmation.show-price', ['module' => 'produk'])
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
+    @include('components.modals.confirmations.request-price', ['module' => 'produk'])
 </flux:main>
diff --git a/resources/views/livewire/studio/feature/choose-us.blade.php b/resources/views/livewire/studio/feature/choose-us.blade.php
index 778bbb4..933acb1 100644
--- a/resources/views/livewire/studio/feature/choose-us.blade.php
+++ b/resources/views/livewire/studio/feature/choose-us.blade.php
@@ -19,7 +19,14 @@
         <livewire:datatable.studio.feature.choose-us-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/feature/perfume-features.blade.php b/resources/views/livewire/studio/feature/perfume-features.blade.php
index e869a5d..7164753 100644
--- a/resources/views/livewire/studio/feature/perfume-features.blade.php
+++ b/resources/views/livewire/studio/feature/perfume-features.blade.php
@@ -26,7 +26,14 @@
         <livewire:datatable.studio.feature.perfume-features-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/finance/expenses.blade.php b/resources/views/livewire/studio/finance/expenses.blade.php
index dd33a2c..7a41c32 100644
--- a/resources/views/livewire/studio/finance/expenses.blade.php
+++ b/resources/views/livewire/studio/finance/expenses.blade.php
@@ -19,7 +19,14 @@
         <livewire:datatable.studio.finance.expenses-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/finance/payrolls.blade.php b/resources/views/livewire/studio/finance/payrolls.blade.php
index 6883741..13a1be7 100644
--- a/resources/views/livewire/studio/finance/payrolls.blade.php
+++ b/resources/views/livewire/studio/finance/payrolls.blade.php
@@ -66,7 +66,7 @@ class="font-bold {{ $item->type->value == \App\Enums\SalaryAdjustmentType::DEDUC
                                 </div>
                                 <div class="text-gray-400 text-[12px]">{{ $item->description }}</div>
                             </div>
-                            <flux:modal.trigger name="delete">
+                            <flux:modal.trigger name="delete-confirmation">
                                 <flux:button variant="danger" icon="trash" size="sm"
                                     wire:click="$dispatch('fn:confirmAction', {id: '{{ $item->id }}'})">
                                 </flux:button>
@@ -87,7 +87,14 @@ class="font-bold {{ $item->type->value == \App\Enums\SalaryAdjustmentType::DEDUC
         <livewire:datatable.studio.finance.payrolls-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
diff --git a/resources/views/livewire/studio/information/broadcasts.blade.php b/resources/views/livewire/studio/information/broadcasts.blade.php
index 9d48a38..3f07e0a 100644
--- a/resources/views/livewire/studio/information/broadcasts.blade.php
+++ b/resources/views/livewire/studio/information/broadcasts.blade.php
@@ -18,7 +18,14 @@
         <livewire:datatable.studio.information.broadcasts-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/information/faqs.blade.php b/resources/views/livewire/studio/information/faqs.blade.php
index c1c6fad..76c1712 100644
--- a/resources/views/livewire/studio/information/faqs.blade.php
+++ b/resources/views/livewire/studio/information/faqs.blade.php
@@ -18,7 +18,14 @@
         <livewire:datatable.studio.information.faqs-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/information/price-requests.blade.php b/resources/views/livewire/studio/information/price-requests.blade.php
index e355b9f..efa4760 100644
--- a/resources/views/livewire/studio/information/price-requests.blade.php
+++ b/resources/views/livewire/studio/information/price-requests.blade.php
@@ -9,5 +9,12 @@
         <livewire:datatable.studio.information.price-requests-table />
     </div>
 
-    @include('components.confirmation')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
diff --git a/resources/views/livewire/studio/loyalty/customers.blade.php b/resources/views/livewire/studio/loyalty/customers.blade.php
index 78b1ea7..1801756 100644
--- a/resources/views/livewire/studio/loyalty/customers.blade.php
+++ b/resources/views/livewire/studio/loyalty/customers.blade.php
@@ -29,7 +29,14 @@
         <livewire:datatable.studio.loyalty.customers-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/loyalty/tier/index.blade.php b/resources/views/livewire/studio/loyalty/tier/index.blade.php
index c122b4d..e9de912 100644
--- a/resources/views/livewire/studio/loyalty/tier/index.blade.php
+++ b/resources/views/livewire/studio/loyalty/tier/index.blade.php
@@ -144,7 +144,7 @@ class="mt-2 bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-gray-700 dark:t
                             @endcan
 
                             @can('delete tier')
-                                <flux:modal.trigger name="delete">
+                                <flux:modal.trigger name="delete-confirmation">
                                     <flux:tooltip content="Hapus">
                                         <flux:button variant="danger" icon="trash" size="sm"
                                             wire:click="$dispatch('fn:confirmAction', {id: '{{ $tier['hash'] }}'})">
@@ -159,7 +159,14 @@ class="mt-2 bg-white dark:bg-gray-800 rounded-lg shadow p-4 text-gray-700 dark:t
         </div>
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/loyalty/tier/reward.blade.php b/resources/views/livewire/studio/loyalty/tier/reward.blade.php
index 05a8246..db25fba 100644
--- a/resources/views/livewire/studio/loyalty/tier/reward.blade.php
+++ b/resources/views/livewire/studio/loyalty/tier/reward.blade.php
@@ -30,7 +30,7 @@
                                     @endcan
 
                                     @can('update tier reward')
-                                        <flux:modal.trigger name="delete">
+                                        <flux:modal.trigger name="delete-confirmation">
                                             <flux:tooltip content="Hapus">
                                                 <flux:button variant="danger" icon="trash" size="sm"
                                                     wire:click="$dispatch('fn:confirmAction', {id: '{{ $reward['hash'] }}'})">
@@ -82,5 +82,12 @@
         </div>
     </flux:modal>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </div>
diff --git a/resources/views/livewire/studio/loyalty/voucher/index.blade.php b/resources/views/livewire/studio/loyalty/voucher/index.blade.php
index 4daaf7f..03cced2 100644
--- a/resources/views/livewire/studio/loyalty/voucher/index.blade.php
+++ b/resources/views/livewire/studio/loyalty/voucher/index.blade.php
@@ -28,5 +28,12 @@ class="text-sm">
         <livewire:datatable.studio.loyalty.vouchers-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
diff --git a/resources/views/livewire/studio/manage/article/index.blade.php b/resources/views/livewire/studio/manage/article/index.blade.php
index 2181511..1e57370 100644
--- a/resources/views/livewire/studio/manage/article/index.blade.php
+++ b/resources/views/livewire/studio/manage/article/index.blade.php
@@ -3,7 +3,7 @@
         <div>
             <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
         </div>
-        @can ('create article')
+        @can('create article')
             <div>
                 <flux:button href="{{ route('studio.manage.article.create') }}" variant="primary" wire:navigate.hover
                     class="text-sm">
@@ -17,5 +17,12 @@ class="text-sm">
         <livewire:datatable.studio.manage.articles-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
diff --git a/resources/views/livewire/studio/manage/order/index.blade.php b/resources/views/livewire/studio/manage/order/index.blade.php
index 399251e..94a3157 100644
--- a/resources/views/livewire/studio/manage/order/index.blade.php
+++ b/resources/views/livewire/studio/manage/order/index.blade.php
@@ -20,7 +20,14 @@ class="text-sm">
         <livewire:datatable.studio.manage.orders-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
 
 @script
diff --git a/resources/views/livewire/studio/manage/purchase/index.blade.php b/resources/views/livewire/studio/manage/purchase/index.blade.php
index af15cb3..2027e57 100644
--- a/resources/views/livewire/studio/manage/purchase/index.blade.php
+++ b/resources/views/livewire/studio/manage/purchase/index.blade.php
@@ -24,5 +24,12 @@ class="text-sm">
         <livewire:datatable.studio.manage.purchases-table />
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
diff --git a/resources/views/livewire/studio/manage/stock-opname/index.blade.php b/resources/views/livewire/studio/manage/stock-opname/index.blade.php
index f68e39f..2d38749 100644
--- a/resources/views/livewire/studio/manage/stock-opname/index.blade.php
+++ b/resources/views/livewire/studio/manage/stock-opname/index.blade.php
@@ -102,5 +102,12 @@
         <livewire:datatable.studio.manage.stock-opname-table />
     </div>
 
-    @include('components.confirmation')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
 </flux:main>
diff --git a/resources/views/livewire/studio/master/formulas.blade.php b/resources/views/livewire/studio/master/formulas.blade.php
index 392e30f..a090d8a 100644
--- a/resources/views/livewire/studio/master/formulas.blade.php
+++ b/resources/views/livewire/studio/master/formulas.blade.php
@@ -45,7 +45,7 @@
                                         @endcan
 
                                         @can('delete formula')
-                                            <flux:modal.trigger name="delete">
+                                            <flux:modal.trigger name="delete-confirmation">
                                                 <flux:tooltip content="Hapus">
                                                     <flux:button variant="danger" icon="trash" size="sm"
                                                         wire:click="$dispatch('fn:confirmAction', {id: '{{ $item['hash'] }}'})">
@@ -61,11 +61,18 @@
                 @endforeach
             </div>
         @else
-            @include('components.lottie.not-found')
+            @include('components.animations.lottie.not-found')
         @endif
     </div>
 
-    @include('components.confirmation.delete')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
     <flux:modal name="form-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
         <div class="p-4 space-y-6">
             <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
diff --git a/resources/views/livewire/studio/master/user/index.blade.php b/resources/views/livewire/studio/master/user/index.blade.php
index 815d768..df44e79 100644
--- a/resources/views/livewire/studio/master/user/index.blade.php
+++ b/resources/views/livewire/studio/master/user/index.blade.php
@@ -194,7 +194,7 @@ class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
                                     @endcan
 
                                     @can('delete user')
-                                        <flux:modal.trigger name="delete">
+                                        <flux:modal.trigger name="delete-confirmation">
                                             <flux:tooltip content="Hapus">
                                                 <flux:button variant="danger" icon="trash" size="sm"
                                                     wire:click="$dispatch('fn:confirmAction', {id: '{{ $employee['user']['hash'] }}'})">
@@ -209,13 +209,24 @@ class="text-gray-700 dark:text-gray-300">{{ $employee['resign_date'] }}</span>
                 @endforeach
             </div>
         @else
-            @include('components.lottie.not-found')
+            @include('components.animations.lottie.not-found')
 
         @endif
     </div>
 
-    @include('components.confirmation.delete')
-    @include('components.confirmation.reset-password')
+    @include('components.modals.confirmation', [
+        'modalName' => 'confirmation-modal',
+        'modalTitle' => 'Apakah Anda yakin?',
+        'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
+        'buttonVariant' => 'primary',
+        'buttonColor' => 'danger',
+        'buttonText' => 'Ya, Hapus',
+    ])
+    @include('components.modals.confirmation', [
+        'modalName' => 'reset-password',
+        'confirmButtonColor' => 'danger',
+        'target' => 'resetPassword',
+    ])
 </flux:main>
 @assets
     <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>