diff --git a/app/Http/Controllers/Admin/AdminBookingController.php b/app/Http/Controllers/Admin/AdminBookingController.php
index cd8027f..905747c 100644
--- a/app/Http/Controllers/Admin/AdminBookingController.php
+++ b/app/Http/Controllers/Admin/AdminBookingController.php
@@ -10,118 +10,120 @@
 
 class AdminBookingController extends Controller
 {
-    /**
-     * Tampilkan daftar semua pesanan.
-     */
+    const DP_PERCENTAGE = 0.5; // 50% dari total harga
+
     public function index()
     {
         $bookings = Booking::latest()->paginate(15);
         return view('admin.bookings.index', compact('bookings'));
     }
 
-    /**
-     * Tampilkan detail pesanan.
-     */
     public function show(string $id)
     {
         $booking = Booking::findOrFail($id);
-        return view('admin.bookings.show', compact('booking'));
+        $expectedDpAmount = $booking->total_price * self::DP_PERCENTAGE;
+
+        return view('admin.bookings.show', compact('booking', 'expectedDpAmount'));
     }
 
-    /**
-     * Konfirmasi DP: simpan bukti, ubah status ke 'booked', lalu arahkan ke WhatsApp.
-     */
     public function confirmDp(Request $request, $id)
     {
         $booking = Booking::findOrFail($id);
+        $expectedDpAmount = $booking->total_price * self::DP_PERCENTAGE;
 
-        // Validasi input
         $request->validate([
-            'dp_amount' => 'required|numeric|min:0',
+            'dp_amount' => 'required|numeric|min:1',
             'dp_proof' => 'required|image|max:2048',
+        ], [
+            'dp_amount.required' => 'Nominal DP wajib diisi.',
+            'dp_amount.numeric' => 'Nominal DP harus berupa angka.',
+            'dp_amount.min' => 'Nominal DP harus lebih dari 0.',
+            'dp_proof.required' => 'Bukti transfer DP wajib diunggah.',
+            'dp_proof.image' => 'File bukti harus berupa gambar.',
+            'dp_proof.max' => 'Ukuran file maksimal 2MB.',
         ]);
 
-        // Simpan bukti DP
+        if ($request->dp_amount != $expectedDpAmount) {
+            return back()->withErrors([
+                'dp_amount' => "Nominal DP harus tepat Rp" . number_format($expectedDpAmount, 0, ',', '.') . " (50% dari total harga)."
+            ])->withInput();
+        }
+
         $path = $request->file('dp_proof')->store('bukti_dp', 'public');
 
-        // Update data booking
         $booking->update([
             'dp_amount' => $request->dp_amount,
             'dp_proof' => $path,
             'status' => 'booked',
         ]);
 
-        // Set pesan sukses
         session()->flash('success', 'DP berhasil dikonfirmasi. Silakan kirim pesan ke pelanggan.');
 
-        // Buat pesan WhatsApp
         $message = "Halo kak {$booking->contact_name},\n\n"
             . "Terima kasih, DP kamu untuk sesi {$booking->session_name} pada tanggal "
             . Carbon::parse($booking->booking_date)->translatedFormat('d F Y') . " pukul {$booking->booking_time} telah kami terima.\n"
             . "Pesananmu sudah dikonfirmasi ✅ Sampai jumpa di hari H!";
 
-        // Format nomor WhatsApp (08xx → 628xx)
         $whatsappNumber = preg_replace('/[^0-9]/', '', $booking->whatsapp_number);
         if (str_starts_with($whatsappNumber, '0')) {
             $whatsappNumber = '62' . substr($whatsappNumber, 1);
         }
 
-        // ✅ URL BENAR: TANPA SPASI EKSTRA
         $url = 'https://wa.me/' . $whatsappNumber . '?text=' . urlencode($message);
 
         return redirect()->away($url);
     }
 
-    /**
-     * Selesaikan pesanan: simpan bukti pelunasan, ubah status ke 'completed', lalu arahkan ke WhatsApp.
-     */
     public function completeBooking(Request $request, $id)
     {
         $booking = Booking::findOrFail($id);
+        $expectedFinalAmount = $booking->total_price - $booking->dp_amount;
 
-        // Validasi input
         $request->validate([
-            'final_payment_amount' => 'required|numeric|min:0',
+            'final_payment_amount' => 'required|numeric|min:1',
             'final_payment_proof' => 'required|image|max:2048',
+        ], [
+            'final_payment_amount.required' => 'Nominal pelunasan wajib diisi.',
+            'final_payment_amount.numeric' => 'Nominal pelunasan harus berupa angka.',
+            'final_payment_amount.min' => 'Nominal pelunasan harus lebih dari 0.',
+            'final_payment_proof.required' => 'Bukti pelunasan wajib diunggah.',
+            'final_payment_proof.image' => 'File bukti harus berupa gambar.',
+            'final_payment_proof.max' => 'Ukuran file maksimal 2MB.',
         ]);
 
-        // Simpan bukti pelunasan
+        if ($request->final_payment_amount != $expectedFinalAmount) {
+            return back()->withErrors([
+                'final_payment_amount' => "Nominal pelunasan harus tepat Rp" . number_format($expectedFinalAmount, 0, ',', '.') . " (total - DP)."
+            ])->withInput();
+        }
+
         $path = $request->file('final_payment_proof')->store('bukti_pelunasan', 'public');
 
-        // Update data booking
         $booking->update([
             'final_payment_amount' => $request->final_payment_amount,
             'final_payment_proof' => $path,
             'status' => 'completed',
         ]);
 
-        // Set pesan sukses
         session()->flash('success', 'Pelunasan berhasil dikonfirmasi.');
 
-        // Buat pesan WhatsApp
         $message = "Halo kak {$booking->contact_name},\n\n"
             . "Kami telah menerima pelunasan untuk sesi {$booking->session_name} pada tanggal "
             . Carbon::parse($booking->booking_date)->translatedFormat('d F Y') . ".\n"
             . "Terima kasih telah mempercayakan layanan kami. See you next time! ❤️";
 
-        // Format nomor WhatsApp
         $whatsappNumber = preg_replace('/[^0-9]/', '', $booking->whatsapp_number);
         if (str_starts_with($whatsappNumber, '0')) {
             $whatsappNumber = '62' . substr($whatsappNumber, 1);
         }
 
-        // ✅ URL BENAR: TANPA SPASI EKSTRA
         $url = 'https://wa.me/' . $whatsappNumber . '?text=' . urlencode($message);
 
         return redirect()->away($url);
     }
 
-    /**
-     * Hapus pesanan dan file bukti pembayaran.
-     */
     public function destroy(Booking $booking)
     {
-        // Hapus file bukti jika ada
         if ($booking->dp_proof && Storage::disk('public')->exists($booking->dp_proof)) {
             Storage::disk('public')->delete($booking->dp_proof);
         }
diff --git a/resources/css/app.css b/resources/css/app.css
index ad6eeed..ba26713 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -61,6 +61,9 @@ select:focus[data-flux-control] {
     @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
 }
 
+
+
+
 /* \[:where(&)\]:size-4 {
     @apply size-4;
 } */
diff --git a/resources/views/admin/backgrounds/create.blade.php b/resources/views/admin/backgrounds/create.blade.php
index e10e223..fac9941 100644
--- a/resources/views/admin/backgrounds/create.blade.php
+++ b/resources/views/admin/backgrounds/create.blade.php
@@ -7,7 +7,23 @@
 
                 {{-- Meng-include partial form --}}
                 @include('admin.backgrounds._form', ['background' => null])
+<x-layouts.app :title="__('Background')">
+    <div class="container mx-auto px-4 py-8">
+        <h2 class="text-2xl font-bold text-gray-800 mb-6 font-playfair">Tambah Background Baru</h2>
+        <div class="bg-white shadow-lg rounded-xl p-6 border border-gray-200">
+            <form action="{{ route('backgrounds.store') }}" method="POST" enctype="multipart/form-data">
+                @csrf
+
+                @include('admin.backgrounds._form', ['background' => null])
 
+                <button type="submit"
+                        class="bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-2 px-6 rounded-lg mt-6 transition-all duration-300 shadow-sm hover:shadow-md transform hover:scale-105">
+                    Simpan Background
+                </button>
+            </form>
+        </div>
+    </div>
+</x-layouts.app>
                 <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg mt-4 transition duration-300">
                     Simpan Background
                 </button>
diff --git a/resources/views/admin/backgrounds/index.blade.php b/resources/views/admin/backgrounds/index.blade.php
index cbb1681..d0576ba 100644
--- a/resources/views/admin/backgrounds/index.blade.php
+++ b/resources/views/admin/backgrounds/index.blade.php
@@ -1,64 +1,138 @@
 <x-layouts.app :title="__('Background')">
 
-  <div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold text-gray-800">Manajemen Backgrounds</h2>
-        <a href="{{ route('backgrounds.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
-            Tambah Background
-        </a>
-    </div>
-
-    @if(session('success'))
-        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6" role="alert">
-            {{ session('success') }}
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
+            <h2 class="text-2xl font-bold text-gray-800">Manajemen Backgrounds</h2>
+            <a href="{{ route('backgrounds.create') }}"
+               class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-5 rounded-lg transition duration-300 shadow-sm hover:shadow-md">
+                + Tambah Background
+            </a>
         </div>
-    @endif
 
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <table class="min-w-full leading-normal">
-            <thead>
-                <tr class="bg-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                    <th class="px-5 py-3 border-b-2 border-gray-200">No</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Gambar</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Nama</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Kategori</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Status</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Aksi</th>
-                </tr>
-            </thead>
-            <tbody>
+        <!-- Alert: Sukses -->
+        @if(session('success'))
+            <div class="bg-green-100 border border-green-400 text-green-700 px-5 py-4 rounded-lg mb-6 text-sm flex items-center gap-2 shadow-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+                {{ session('success') }}
+            </div>
+        @endif
+
+        <!-- Tabel (Desktop) / Cards (Mobile) -->
+        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200">
+            <!-- Desktop Table -->
+            <div class="hidden sm:block overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
+                        <tr class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            <th class="px-6 py-4">No</th>
+                            <th class="px-6 py-4">Gambar</th>
+                            <th class="px-6 py-4">Nama</th>
+                            <th class="px-6 py-4">Kategori</th>
+                            <th class="px-6 py-4">Status</th>
+                            <th class="px-6 py-4">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        @forelse($backgrounds as $background)
+                        <tr class="hover:bg-gray-50 transition duration-150">
+                            <td class="px-6 py-5 text-sm text-gray-700">{{ $loop->iteration }}</td>
+                            <td class="px-6 py-5">
+                                <img src="{{ asset('storage/' . $background->image) }}"
+                                     alt="{{ $background->name }}"
+                                     class="w-16 h-16 object-cover rounded-lg shadow-sm border border-gray-200">
+                            </td>
+                            <td class="px-6 py-5 text-sm font-medium text-gray-800">{{ $background->name }}</td>
+                            <td class="px-6 py-5 text-sm text-gray-600">
+                                {{ Str::title(str_replace('-', ' ', $background->category)) }}
+                            </td>
+                            <td class="px-6 py-5 text-sm">
+                                @if($background->is_active)
+                                    <span class="inline-flex items-center gap-1 bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full font-medium border border-green-200">
+                                        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                                        Aktif
+                                    </span>
+                                @else
+                                    <span class="inline-flex items-center gap-1 bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full font-medium border border-red-200">
+                                        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
+                                        Non-Aktif
+                                    </span>
+                                @endif
+                            </td>
+                            <td class="px-6 py-5 text-sm space-y-2">
+                                <a href="{{ route('backgrounds.edit', $background) }}"
+                                   class="block w-full text-center bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition">
+                                    Edit
+                                </a>
+                                <form action="{{ route('backgrounds.destroy', $background) }}" method="POST" class="inline">
+                                    @csrf
+                                    @method('DELETE')
+                                    <button type="submit"
+                                            class="w-full text-center bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition"
+                                            onclick="return confirm('Apakah Anda yakin ingin menghapus background ini?');">
+                                        Hapus
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                        @empty
+                        <tr>
+                            <td colspan="6" class="px-6 py-8 text-center text-gray-500 text-sm italic">
+                                Belum ada background yang ditambahkan.
+                            </td>
+                        </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Mobile Cards -->
+            <div class="sm:hidden space-y-4 p-4">
                 @forelse($backgrounds as $background)
-                <tr class="hover:bg-gray-100">
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $loop->iteration }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <img src="{{ asset('storage/' . $background->image) }}" alt="{{ $background->name }}" class="w-20 h-20 object-cover rounded">
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $background->name }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ Str::title(str_replace('-', ' ', $background->category)) }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        @if($background->is_active)
-                            <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">Aktif</span>
-                        @else
-                            <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">Non-Aktif</span>
-                        @endif
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <a href="{{ route('backgrounds.edit', $background) }}" class="text-yellow-600 hover:text-yellow-800 text-sm font-semibold mr-2">Edit</a>
-                        <form action="{{ route('backgrounds.destroy', $background) }}" method="POST" class="inline">
+                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 transition hover:shadow-md">
+                    <div class="flex gap-4 mb-3">
+                        <img src="{{ asset('storage/' . $background->image) }}"
+                             alt="{{ $background->name }}"
+                             class="w-16 h-16 object-cover rounded-lg border border-gray-200">
+                        <div class="flex-1">
+                            <h3 class="font-semibold text-gray-800 text-sm">{{ $background->name }}</h3>
+                            <p class="text-xs text-gray-600 mt-1">
+                                {{ Str::title(str_replace('-', ' ', $background->category)) }}
+                            </p>
+                            <div class="mt-2">
+                                @if($background->is_active)
+                                    <span class="text-xs text-green-700 font-medium">🟢 Aktif</span>
+                                @else
+                                    <span class="text-xs text-red-700 font-medium">🔴 Non-Aktif</span>
+                                @endif
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex gap-2 pt-3 border-t border-gray-100">
+                        <a href="{{ route('backgrounds.edit', $background) }}"
+                           class="flex-1 text-center bg-yellow-500 hover:bg-yellow-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition">
+                            Edit
+                        </a>
+                        <form action="{{ route('backgrounds.destroy', $background) }}" method="POST" class="flex-1">
                             @csrf
                             @method('DELETE')
-                            <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-semibold" onclick="return confirm('Apakah Anda yakin ingin menghapus background ini?');">Hapus</button>
+                            <button type="submit"
+                                    class="w-full bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition"
+                                    onclick="return confirm('Apakah Anda yakin ingin menghapus background ini?');">
+                                Hapus
+                            </button>
                         </form>
-                    </td>
-                </tr>
+                    </div>
+                </div>
                 @empty
-                <tr>
-                    <td colspan="6" class="px-5 py-5 border-b border-gray-200 bg-white text-center text-sm text-gray-500">Belum ada background yang ditambahkan.</td>
-                </tr>
+                <div class="text-center py-6 text-gray-500 text-sm">
+                    Belum ada background yang ditambahkan.
+                </div>
                 @endforelse
-            </tbody>
-        </table>
+            </div>
+        </div>
     </div>
-</div>
 
 </x-layouts.app>
\ No newline at end of file
diff --git a/resources/views/admin/bookings/show.blade.php b/resources/views/admin/bookings/show.blade.php
index c500b04..163aedf 100644
--- a/resources/views/admin/bookings/show.blade.php
+++ b/resources/views/admin/bookings/show.blade.php
@@ -19,6 +19,17 @@ class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-80
             </div>
         @endif
 
+        <!-- Alert: Error Validasi -->
+        @if ($errors->any())
+            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
+                <ul class="list-disc list-inside">
+                    @foreach ($errors->all() as $error)
+                        <li><strong>{{ $error }}</strong></li>
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
         <!-- Grid Layout -->
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Kolom Kiri: Informasi Utama -->
@@ -42,7 +53,6 @@ class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-80
                                 {{ $booking->session_name }}
                             @endif
                         </p>
-
                         <!-- Baby Smash Cake -->
                         @if($booking->session_name === 'baby-smash-cake')
                             <p><strong>Nama Bayi:</strong> {{ $booking->baby_name ?? '-' }}</p>
@@ -60,12 +70,10 @@ class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-80
                                 @endphp
                             </p>
                         @endif
-
                         <!-- Group Photography -->
                         @if($booking->session_name === 'group-photography')
                             <p><strong>Jumlah Orang:</strong> {{ $booking->group_size ?? '-' }}</p>
                         @endif
-
                         <p><strong>Paket:</strong> {{ $booking->package_name }}</p>
                         <p class="font-semibold text-gray-800"><strong>Total:</strong> Rp{{ number_format($booking->total_price, 0, ',', '.') }}</p>
                         <p><strong>Catatan:</strong> {{ $booking->notes ?? '—' }}</p>
@@ -83,7 +91,6 @@ class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-80
                             @endforeach
                         </ul>
                     @endif
-
                     @if($booking->selected_extra_items)
                         <p class="font-semibold text-gray-700 mb-2">Extra Item:</p>
                         <ul class="list-disc list-inside text-sm text-gray-700">
@@ -99,6 +106,16 @@ class="inline-flex items-center gap-2 bg-gray-200 hover:bg-gray-300 text-gray-80
 
             <!-- Kolom Kanan: Aksi Admin -->
             <div class="space-y-6">
+                <!-- Info DP yang Diharapkan -->
+                @if($booking->status === 'waiting')
+                    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4">
+                        <p class="text-xs text-blue-800 font-medium">Nominal DP yang harus dibayar:</p>
+                        <p class="text-lg font-bold text-blue-700 mt-1">
+                            Rp{{ number_format($expectedDpAmount, 0, ',', '.') }} (50%)
+                        </p>
+                    </div>
+                @endif
+
                 <!-- Tombol Refresh Manual -->
                 <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 text-center">
                     <h2 class="text-lg font-bold text-gray-800 mb-3">Tindakan Cepat</h2>
@@ -132,11 +149,14 @@ class="inline-flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white f
                 <!-- Kirim Konfirmasi WhatsApp (Waiting) -->
                 @if($booking->status === 'waiting')
                     @php
-                        $dpAmount = number_format($booking->total_price / 2, 0, ',', '.');
-                        $message = "Halo kak {$booking->contact_name},\n\n"
+                        $dpAmount = number_format($expectedDpAmount, 0, ',', '.');
+                        $message = "Halo kak {$booking->contact_name},
+"
                             . "Terima kasih, pesanan untuk sesi {$booking->session_name} pada tanggal "
-                            . \Carbon\Carbon::parse($booking->booking_date)->translatedFormat('d F Y') . " pukul {$booking->booking_time} telah kami terima.\n"
-                            . "Mohon transfer DP Rp{$dpAmount} untuk mengamankan jadwal.\n"
+                            . \Carbon\Carbon::parse($booking->booking_date)->translatedFormat('d F Y') . " pukul {$booking->booking_time} telah kami terima.
+"
+                            . "Mohon transfer DP Rp{$dpAmount} untuk mengamankan jadwal.
+"
                             . "Balas dengan bukti transfer ya. Terima kasih!";
                         $whatsappNumber = preg_replace('/[^0-9]/', '', $booking->whatsapp_number);
                         $url = 'https://wa.me/' . $whatsappNumber . '?text=' . urlencode($message);
@@ -160,13 +180,21 @@ class="block text-center bg-blue-600 hover:bg-blue-700 text-white font-semibold
                             <div class="space-y-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Nominal DP (Rp)</label>
+                                    @error('dp_amount')
+                                        <p class="text-red-500 text-xs mt-1 font-semibold">{{ $message }}</p>
+                                    @enderror
                                     <input type="number" name="dp_amount" required
-                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
+                                           class="w-full border @error('dp_amount') border-red-500 @else border-gray-300 @enderror rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
+                                           value="{{ old('dp_amount') }}"
+                                           placeholder="Masukkan nominal DP">
                                 </div>
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Bukti Transfer DP</label>
+                                    @error('dp_proof')
+                                        <p class="text-red-500 text-xs mt-1 font-semibold">{{ $message }}</p>
+                                    @enderror
                                     <input type="file" name="dp_proof" accept="image/*" required
-                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
+                                           class="w-full border @error('dp_proof') border-red-500 @else border-gray-300 @enderror rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                 </div>
                                 <button type="submit"
                                         class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg transition shadow-sm">
@@ -190,20 +218,34 @@ class="rounded-lg border w-full mt-2 shadow-sm">
 
                 <!-- Form Pelunasan -->
                 @if($booking->status === 'booked')
+                    @php
+                        $remainingAmount = $booking->total_price - $booking->dp_amount;
+                    @endphp
                     <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
                         <h2 class="text-lg font-bold text-gray-800 mb-4">Pelunasan</h2>
+                        <div class="text-xs text-gray-600 mb-3">
+                            Sisa tagihan: <strong>Rp{{ number_format($remainingAmount, 0, ',', '.') }}</strong>
+                        </div>
                         <form action="{{ route('bookings.completeBooking', $booking->id) }}" method="POST" enctype="multipart/form-data">
                             @csrf
                             <div class="space-y-4">
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Nominal Pelunasan (Rp)</label>
+                                    @error('final_payment_amount')
+                                        <p class="text-red-500 text-xs mt-1 font-semibold">{{ $message }}</p>
+                                    @enderror
                                     <input type="number" name="final_payment_amount" required
-                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
+                                           class="w-full border @error('final_payment_amount') border-red-500 @else border-gray-300 @enderror rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500"
+                                           value="{{ old('final_payment_amount') }}"
+                                           placeholder="Masukkan nominal pelunasan">
                                 </div>
                                 <div>
                                     <label class="block text-sm font-medium text-gray-700 mb-1">Bukti Pelunasan</label>
+                                    @error('final_payment_proof')
+                                        <p class="text-red-500 text-xs mt-1 font-semibold">{{ $message }}</p>
+                                    @enderror
                                     <input type="file" name="final_payment_proof" accept="image/*" required
-                                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
+                                           class="w-full border @error('final_payment_proof') border-red-500 @else border-gray-300 @enderror rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500">
                                 </div>
                                 <button type="submit"
                                         class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition shadow-sm">
@@ -221,6 +263,9 @@ class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 r
                         <div class="space-y-3 text-sm text-gray-700">
                             <p><strong>DP:</strong> Rp{{ number_format($booking->dp_amount, 0, ',', '.') }}</p>
                             <p><strong>Pelunasan:</strong> Rp{{ number_format($booking->final_payment_amount, 0, ',', '.') }}</p>
+                            <p class="font-semibold text-gray-800 mt-2">
+                                Total: Rp{{ number_format($booking->dp_amount + $booking->final_payment_amount, 0, ',', '.') }}
+                            </p>
                         </div>
                         <div class="mt-4 space-y-4">
                             <div>
@@ -258,7 +303,6 @@ class="w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rou
         function setRefreshOnWa() {
             sessionStorage.setItem('refreshAfterWa', 'true');
         }
-
         document.addEventListener('visibilitychange', function () {
             if (document.visibilityState === 'visible') {
                 const refreshOnReturn = sessionStorage.getItem('refreshAfterWa');
diff --git a/resources/views/admin/extra/index.blade.php b/resources/views/admin/extra/index.blade.php
index 5370591..04b5700 100644
--- a/resources/views/admin/extra/index.blade.php
+++ b/resources/views/admin/extra/index.blade.php
@@ -1,60 +1,125 @@
 <x-layouts.app :title="__('Ekstra')">
     <div class="container mx-auto px-4 py-8">
-    <div class="flex justify-between items-center mb-6">
-        <h2 class="text-2xl font-bold text-gray-800">Manajemen Ekstra Item</h2>
-        <a href="{{ route('extra-items.create') }}" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300">
-            Tambah Ekstra Item
-        </a>
-    </div>
-
-    @if(session('success'))
-        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6" role="alert">
-            {{ session('success') }}
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
+            <h2 class="text-2xl font-bold text-gray-800">Manajemen Ekstra Item</h2>
+            <a href="{{ route('extra-items.create') }}"
+               class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-5 rounded-lg transition duration-300 shadow-sm hover:shadow-md">
+                + Tambah Ekstra Item
+            </a>
         </div>
-    @endif
 
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <table class="min-w-full leading-normal">
-            <thead>
-                <tr class="bg-gray-200 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                    <th class="px-5 py-3 border-b-2 border-gray-200">No</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Nama</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Harga</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Kategori</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Status</th>
-                    <th class="px-5 py-3 border-b-2 border-gray-200">Aksi</th>
-                </tr>
-            </thead>
-            <tbody>
+        <!-- Alert: Sukses -->
+        @if(session('success'))
+            <div class="bg-green-100 border border-green-400 text-green-700 px-5 py-4 rounded-lg mb-6 text-sm flex items-center gap-2 shadow-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+                {{ session('success') }}
+            </div>
+        @endif
+
+        <!-- Tabel (Desktop) / Cards (Mobile) -->
+        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200">
+            <!-- Desktop Table -->
+            <div class="hidden sm:block overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
+                        <tr class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            <th class="px-6 py-4">No</th>
+                            <th class="px-6 py-4">Nama</th>
+                            <th class="px-6 py-4">Harga</th>
+                            <th class="px-6 py-4">Kategori</th>
+                            <th class="px-6 py-4">Status</th>
+                            <th class="px-6 py-4">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        @forelse($extraItems as $item)
+                        <tr class="hover:bg-gray-50 transition duration-150">
+                            <td class="px-6 py-5 text-sm text-gray-700">{{ $loop->iteration }}</td>
+                            <td class="px-6 py-5 text-sm font-medium text-gray-800">{{ $item->name }}</td>
+                            <td class="px-6 py-5 text-sm text-gray-700">Rp {{ number_format($item->price, 0, ',', '.') }}</td>
+                            <td class="px-6 py-5 text-sm text-gray-600">
+                                {{ Str::title(str_replace('-', ' ', $item->category)) }}
+                            </td>
+                            <td class="px-6 py-5 text-sm">
+                                @if($item->is_active)
+                                    <span class="inline-flex items-center gap-1 bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full font-medium border border-green-200">
+                                        <span class="w-2 h-2 bg-green-500 rounded-full"></span>
+                                        Aktif
+                                    </span>
+                                @else
+                                    <span class="inline-flex items-center gap-1 bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full font-medium border border-red-200">
+                                        <span class="w-2 h-2 bg-red-500 rounded-full"></span>
+                                        Non-Aktif
+                                    </span>
+                                @endif
+                            </td>
+                            <td class="px-6 py-5 text-sm space-y-2">
+                                <a href="{{ route('extra-items.edit', $item) }}"
+                                   class="block w-full text-center bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition">
+                                    Edit
+                                </a>
+                                <form action="{{ route('extra-items.destroy', $item) }}" method="POST" class="inline">
+                                    @csrf
+                                    @method('DELETE')
+                                    <button type="submit"
+                                            class="w-full text-center bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition"
+                                            onclick="return confirm('Apakah Anda yakin ingin menghapus ekstra item ini?');">
+                                        Hapus
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                        @empty
+                        <tr>
+                            <td colspan="6" class="px-6 py-8 text-center text-gray-500 text-sm italic">
+                                Belum ada ekstra item yang ditambahkan.
+                            </td>
+                        </tr>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Mobile Cards -->
+            <div class="sm:hidden space-y-4 p-4">
                 @forelse($extraItems as $item)
-                <tr class="hover:bg-gray-100">
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $loop->iteration }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ $item->name }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">Rp {{ number_format($item->price, 0, ',', '.') }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">{{ Str::title(str_replace('-', ' ', $item->category)) }}</td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        @if($item->is_active)
-                            <span class="bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">Aktif</span>
-                        @else
-                            <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">Non-Aktif</span>
-                        @endif
-                    </td>
-                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                        <a href="{{ route('extra-items.edit', $item) }}" class="text-yellow-600 hover:text-yellow-800 text-sm font-semibold mr-2">Edit</a>
-                        <form action="{{ route('extra-items.destroy', $item) }}" method="POST" class="inline">
+                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 transition hover:shadow-md">
+                    <div class="flex justify-between items-start mb-3">
+                        <div>
+                            <h3 class="font-semibold text-gray-800 text-sm">{{ $item->name }}</h3>
+                            <p class="text-xs text-gray-600 mt-1">Rp {{ number_format($item->price, 0, ',', '.') }}</p>
+                        </div>
+                        <span class="text-xs font-medium px-2 py-1 rounded-full
+                            {{ $item->is_active ? 'bg-green-100 text-green-800 border border-green-200' : 'bg-red-100 text-red-800 border border-red-200' }}">
+                            {{ $item->is_active ? 'Aktif' : 'Non-Aktif' }}
+                        </span>
+                    </div>
+                    <p class="text-xs text-gray-500 mb-3">Kategori: {{ Str::title(str_replace('-', ' ', $item->category)) }}</p>
+                    <div class="flex gap-2 pt-3 border-t border-gray-100">
+                        <a href="{{ route('extra-items.edit', $item) }}"
+                           class="flex-1 text-center bg-yellow-500 hover:bg-yellow-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition">
+                            Edit
+                        </a>
+                        <form action="{{ route('extra-items.destroy', $item) }}" method="POST" class="flex-1">
                             @csrf
                             @method('DELETE')
-                            <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-semibold" onclick="return confirm('Apakah Anda yakin ingin menghapus ekstra item ini?');">Hapus</button>
+                            <button type="submit"
+                                    class="w-full bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition"
+                                    onclick="return confirm('Apakah Anda yakin ingin menghapus ekstra item ini?');">
+                                Hapus
+                            </button>
                         </form>
-                    </td>
-                </tr>
+                    </div>
+                </div>
                 @empty
-                <tr>
-                    <td colspan="6" class="px-5 py-5 border-b border-gray-200 bg-white text-center text-sm text-gray-500">Belum ada ekstra item yang ditambahkan.</td>
-                </tr>
+                <div class="text-center py-6 text-gray-500 text-sm">
+                    Belum ada ekstra item yang ditambahkan.
+                </div>
                 @endforelse
-            </tbody>
-        </table>
+            </div>
+        </div>
     </div>
-</div>
 </x-layouts.app>
\ No newline at end of file
diff --git a/resources/views/admin/sdk/index.blade.php b/resources/views/admin/sdk/index.blade.php
index aecdb85..7ce28a1 100644
--- a/resources/views/admin/sdk/index.blade.php
+++ b/resources/views/admin/sdk/index.blade.php
@@ -1,66 +1,105 @@
 <x-layouts.app :title="__('Syarat & Ketentuan')">
-    <div class="container mx-auto p-4">
-        <div class="flex justify-between items-center mb-6">
-            <h1 class="text-3xl font-bold">Daftar Syarat & Ketentuan</h1>
-            <a href="{{ route('terms.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
-                Tambah Baru
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4">
+            <h1 class="text-3xl font-bold text-gray-800">Daftar Syarat & Ketentuan</h1>
+            <a href="{{ route('terms.create') }}"
+               class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-5 rounded-lg transition duration-300 shadow-sm hover:shadow-md">
+                + Tambah Baru
             </a>
         </div>
 
+        <!-- Alert: Sukses -->
         @if (session('success'))
-            <div class="bg-green-100 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
-                <span class="block sm:inline">{{ session('success') }}</span>
+            <div class="bg-green-100 border border-green-400 text-green-700 px-5 py-4 rounded-lg mb-6 text-sm flex items-center gap-2 shadow-sm">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                </svg>
+                {{ session('success') }}
             </div>
         @endif
 
-        <div class="overflow-x-auto bg-white shadow-md rounded-lg">
-            <table class="min-w-full leading-normal">
-                <thead>
-                    <tr>
-                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            No
-                        </th>
-                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Konten Utama
-                        </th>
-                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
-                            Isi Konten
-                        </th>
-                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100"></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    @forelse ($terms as $term)
-                        <tr>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{ $loop->iteration }}</p>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900 whitespace-no-wrap">{{ $term->content }}</p>
-                            </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
-                                <p class="text-gray-900">
-                                    {{ Str::limit($term->sub_content, 100) }}
-                                </p>
+        <!-- Tabel (Desktop) / Cards (Mobile) -->
+        <div class="bg-white shadow-lg rounded-xl overflow-hidden border border-gray-200">
+            <!-- Desktop Table -->
+            <div class="hidden sm:block overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-200">
+                    <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
+                        <tr class="text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            <th class="px-6 py-4">No</th>
+                            <th class="px-6 py-4">Konten Utama</th>
+                            <th class="px-6 py-4">Isi Konten</th>
+                            <th class="px-6 py-4 text-right">Aksi</th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white divide-y divide-gray-200">
+                        @forelse ($terms as $term)
+                        <tr class="hover:bg-gray-50 transition duration-150">
+                            <td class="px-6 py-5 text-sm text-gray-700">{{ $loop->iteration }}</td>
+                            <td class="px-6 py-5 text-sm font-medium text-gray-800">{{ $term->content }}</td>
+                            <td class="px-6 py-5 text-sm text-gray-600">
+                                {{ Str::limit(strip_tags($term->sub_content), 120) }}
                             </td>
-                            <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
-                                <a href="{{ route('terms.edit', $term) }}" class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</a>
+                            <td class="px-6 py-5 text-sm text-right space-y-2">
+                                <a href="{{ route('terms.edit', $term) }}"
+                                   class="block w-full text-center bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition">
+                                    Edit
+                                </a>
                                 <form action="{{ route('terms.destroy', $term) }}" method="POST" class="inline">
                                     @csrf
                                     @method('DELETE')
-                                    <button type="submit" class="text-red-600 hover:text-red-900" onclick="return confirm('Apakah Anda yakin ingin menghapus ini?');">Hapus</button>
+                                    <button type="submit"
+                                            class="w-full text-center bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-1.5 px-3 rounded-lg transition"
+                                            onclick="return confirm('Apakah Anda yakin ingin menghapus syarat & ketentuan ini?');">
+                                        Hapus
+                                    </button>
                                 </form>
                             </td>
                         </tr>
-                    @empty
+                        @empty
                         <tr>
-                            <td colspan="4" class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-center text-gray-500">
+                            <td colspan="4" class="px-6 py-8 text-center text-gray-500 text-sm italic">
                                 Tidak ada data syarat & ketentuan.
                             </td>
                         </tr>
-                    @endforelse
-                </tbody>
-            </table>
+                        @endforelse
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Mobile Cards -->
+            <div class="sm:hidden space-y-4 p-4">
+                @forelse ($terms as $term)
+                <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 transition hover:shadow-md">
+                    <div class="mb-3">
+                        <span class="text-xs text-gray-500">No. {{ $loop->iteration }}</span>
+                        <h3 class="font-semibold text-gray-800 text-sm mt-1">{{ $term->content }}</h3>
+                    </div>
+                    <p class="text-xs text-gray-600 mb-4 line-clamp-3">
+                        {{ strip_tags(Str::limit($term->sub_content, 150)) }}
+                    </p>
+                    <div class="flex gap-2 pt-3 border-t border-gray-100">
+                        <a href="{{ route('terms.edit', $term) }}"
+                           class="flex-1 text-center bg-yellow-500 hover:bg-yellow-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition">
+                            Edit
+                        </a>
+                        <form action="{{ route('terms.destroy', $term) }}" method="POST" class="flex-1">
+                            @csrf
+                            @method('DELETE')
+                            <button type="submit"
+                                    class="w-full bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-2 px-3 rounded-lg text-sm transition"
+                                    onclick="return confirm('Apakah Anda yakin ingin menghapus syarat & ketentuan ini?');">
+                                Hapus
+                            </button>
+                        </form>
+                    </div>
+                </div>
+                @empty
+                <div class="text-center py-6 text-gray-500 text-sm">
+                    Tidak ada data syarat & ketentuan.
+                </div>
+                @endforelse
+            </div>
         </div>
     </div>
 </x-layouts.app>
\ No newline at end of file
diff --git a/resources/views/components/layouts/app/header.blade.php b/resources/views/components/layouts/app/header.blade.php
index 4d912e9..4de6c2b 100644
--- a/resources/views/components/layouts/app/header.blade.php
+++ b/resources/views/components/layouts/app/header.blade.php
@@ -1,126 +1,153 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
-    <head>
-        @include('partials.head')
-         <meta name="csrf-token" content="{{ csrf_token() }}">
-
-    </head>
-    <body class="min-h-screen bg-white dark:bg-zinc-800">
-        <flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
-            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
-
-            <a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
-                <x-app-logo />
-            </a>
-
-            <flux:navbar class="-mb-px max-lg:hidden">
-                <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
-                    {{ __('Dashboard') }}
-                </flux:navbar.item>
-            </flux:navbar>
-
-            <flux:spacer />
-
-            <flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
-                <flux:tooltip :content="__('Search')" position="bottom">
-                    <flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
-                </flux:tooltip>
-                <flux:tooltip :content="__('Repository')" position="bottom">
-                    <flux:navbar.item
-                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
-                        icon="folder-git-2"
-                        href="https://github.com/laravel/livewire-starter-kit"
-                        target="_blank"
-                        :label="__('Repository')"
-                    />
-                </flux:tooltip>
-                <flux:tooltip :content="__('Documentation')" position="bottom">
-                    <flux:navbar.item
-                        class="h-10 max-lg:hidden [&>div>svg]:size-5"
-                        icon="book-open-text"
-                        href="https://laravel.com/docs/starter-kits#livewire"
-                        target="_blank"
-                        label="Documentation"
-                    />
-                </flux:tooltip>
-            </flux:navbar>
-
-            <!-- Desktop User Menu -->
-            <flux:dropdown position="top" align="end">
-                <flux:profile
-                    class="cursor-pointer"
-                    :initials="auth()->user()->initials()"
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    @include('partials.head')
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <!-- Pastikan tidak ada dark mode -->
+    <script>
+        // Hapus class dark dari root (html/body)
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+        }
+        // Atur localStorage agar tidak ingat mode gelap
+        localStorage.removeItem('theme');
+    </script>
+</head>
+<body class="min-h-screen bg-white">
+
+    <!-- Header -->
+    <flux:header container class="border-b border-zinc-200 bg-zinc-50">
+        <!-- Tombol Toggle Sidebar (Mobile) -->
+        <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
+
+        <!-- Logo -->
+        <a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
+            <x-app-logo />
+        </a>
+
+        <!-- Navbar (Desktop) -->
+        <flux:navbar class="-mb-px max-lg:hidden">
+            <flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
+                {{ __('Dashboard') }}
+            </flux:navbar.item>
+        </flux:navbar>
+
+        <flux:spacer />
+
+        <!-- Ikon Cepat (Search, Repo, Docs) -->
+        <flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
+            <flux:tooltip :content="__('Search')" position="bottom">
+                <flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
+            </flux:tooltip>
+
+            <flux:tooltip :content="__('Repository')" position="bottom">
+                <flux:navbar.item
+                    class="h-10 max-lg:hidden [&>div>svg]:size-5"
+                    icon="folder-git-2"
+                    href="https://github.com/laravel/livewire-starter-kit"
+                    target="_blank"
+                    :label="__('Repository')"
                 />
-
-                <flux:menu>
-                    <flux:menu.radio.group>
-                        <div class="p-0 text-sm font-normal">
-                            <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
-                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
-                                    <span
-                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
-                                    >
-                                        {{ auth()->user()->initials() }}
-                                    </span>
+            </flux:tooltip>
+
+            <flux:tooltip :content="__('Documentation')" position="bottom">
+                <flux:navbar.item
+                    class="h-10 max-lg:hidden [&>div>svg]:size-5"
+                    icon="book-open-text"
+                    href="https://laravel.com/docs/starter-kits#livewire"
+                    target="_blank"
+                    label="Documentation"
+                />
+            </flux:navbar.item>
+            </flux:tooltip>
+        </flux:navbar>
+
+        <!-- Profil Pengguna -->
+        <flux:dropdown position="top" align="end">
+            <flux:profile
+                class="cursor-pointer"
+                :initials="auth()->user()->initials()"
+            />
+
+            <flux:menu>
+                <flux:menu.radio.group>
+                    <div class="p-0 text-sm font-normal">
+                        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
+                            <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
+                                <span class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black">
+                                    {{ auth()->user()->initials() }}
                                 </span>
-
-                                <div class="grid flex-1 text-start text-sm leading-tight">
-                                    <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
-                                    <span class="truncate text-xs">{{ auth()->user()->email }}</span>
-                                </div>
+                            </span>
+                            <div class="grid flex-1 text-start text-sm leading-tight">
+                                <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
+                                <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                             </div>
                         </div>
-                    </flux:menu.radio.group>
-
-                    <flux:menu.separator />
-
-                    <flux:menu.radio.group>
-                        <flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
-                    </flux:menu.radio.group>
-
-                    <flux:menu.separator />
-
-                    <form method="POST" action="{{ route('logout') }}" class="w-full">
-                        @csrf
-                        <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
-                            {{ __('Log Out') }}
-                        </flux:menu.item>
-                    </form>
-                </flux:menu>
-            </flux:dropdown>
-        </flux:header>
-
-        <!-- Mobile Menu -->
-        <flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
-            <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
-
-            <a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
-                <x-app-logo />
-            </a>
-
-            <flux:navlist variant="outline">
-                <flux:navlist.group :heading="__('Platform')">
-                    <flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
+                    </div>
+                </flux:menu.radio.group>
+
+                <flux:menu.separator />
+
+                <flux:menu.radio.group>
+                    <flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>
+                        {{ __('Settings') }}
+                    </flux:menu.item>
+                </flux:menu.radio.group>
+
+                <flux:menu.separator />
+
+                <form method="POST" action="{{ route('logout') }}" class="w-full">
+                    @csrf
+                    <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
+                        {{ __('Log Out') }}
+                    </flux:menu.item>
+                </form>
+            </flux:menu>
+        </flux:dropdown>
+    </flux:header>
+
+    <!-- Sidebar Mobile -->
+    <flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50">
+        <flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
+
+        <a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
+            <x-app-logo />
+        </a>
+
+        <flux:navlist variant="outline">
+            <flux:navlist.group :heading="__('Platform')">
+                <flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
                     {{ __('Dashboard') }}
-                    </flux:navlist.item>
-                </flux:navlist.group>
-            </flux:navlist>
+                </flux:navlist.item>
+            </flux:navlist.group>
+        </flux:navlist>
 
-            <flux:spacer />
+        <flux:spacer />
 
-            <flux:navlist variant="outline">
-                <flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
+        <flux:navlist variant="outline">
+            <flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
                 {{ __('Repository') }}
-                </flux:navlist.item>
+            </flux:navlist.item>
 
-                <flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
+            <flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
                 {{ __('Documentation') }}
-                </flux:navlist.item>
-            </flux:navlist>
-        </flux:sidebar>
+            </flux:navlist.item>
+        </flux:navlist>
+    </flux:sidebar>
 
+    <!-- Konten Utama -->
+    <main class="container mx-auto px-4 py-6">
         {{ $slot }}
-
-        @fluxScripts
-    </body>
-</html>
+    </main>
+
+    @fluxScripts
+
+    <!-- Script: Paksa Light Mode -->
+    <script>
+        // Pastikan mode selalu terang
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light'); // Simpan preferensi
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/resources/views/components/layouts/app/sidebar.blade.php b/resources/views/components/layouts/app/sidebar.blade.php
index bcc69f1..e63e518 100644
--- a/resources/views/components/layouts/app/sidebar.blade.php
+++ b/resources/views/components/layouts/app/sidebar.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
     @include('partials.head')
diff --git a/resources/views/kategori/baby.blade.php b/resources/views/kategori/baby.blade.php
index c87bc99..395e54f 100644
--- a/resources/views/kategori/baby.blade.php
+++ b/resources/views/kategori/baby.blade.php
@@ -1754,7 +1754,7 @@ function updateTotalPrice() {
                         messageSpan.textContent = `⚠️ Hanya tersisa ${data.available_times.length} slot. Segera booking!`;
                         infoBox.classList.add('limited');
                     } else {
-                        messageSpan.textContent = `✅ Ada ${data.available_times.length} slot yang tersedia.`;
+                        messageSpan.textContent = `Masih ada ${data.available_times.length} slot ( sesi waktu ) yang tersedia.`;
                         infoBox.classList.add('available');
                     }
                 }