diff --git a/backend/app/Http/Controllers/PelangganController.php b/backend/app/Http/Controllers/PelangganController.php
index a73188b..9e70a87 100644
--- a/backend/app/Http/Controllers/PelangganController.php
+++ b/backend/app/Http/Controllers/PelangganController.php
@@ -3,10 +3,35 @@
 namespace App\Http\Controllers;
 
 use App\Models\Pelanggan;
+use App\Models\Kategori;
 use Illuminate\Http\Request;
 
 class PelangganController extends Controller
 {
+    public function index(Request $request)
+    {
+        $query = Pelanggan::query();
+
+        // Filter kategori
+        if ($request->filled('kategori')) {
+            $query->where('kategori', $request->kategori);
+        }
+
+        // Pencarian
+        if ($request->filled('search')) {
+            $search = $request->search;
+            $query->where(function ($q) use ($search) {
+                $q  ->where('nama_pemesan', 'like', "%$search%")
+                    ->orWhere('email', 'like', "%$search%")
+                    ->orWhere('no_tlpn', 'like', "%$search%");
+            });
+        }
+
+        $pelanggans = $query->get();
+        $kategoris = Kategori::all();
+
+        return view('admin.pelanggan.index', compact('pelanggans', 'kategoris'));
+    }
 
     public function show($id)
     {
@@ -14,25 +39,6 @@ class PelangganController extends Controller
         return view('admin.pelanggan.show', compact('pelanggan'));
     }
 
-
-    // Tampilkan semua pelanggan (admin)
-    public function index(Request $request)
-{
-    $query = Pelanggan::query();
-
-    if ($request->filled('kategori')) {
-        $query->where('kategori', $request->kategori);
-    }
-
-    $pelanggans = $query->get();
-
-    // Ambil semua kategori untuk dropdown
-    $kategoris = \App\Models\Kategori::all();
-
-    return view('admin.pelanggan.index', compact('pelanggans', 'kategoris'));
-}
-
-    // Hapus pelanggan
     public function destroy(Pelanggan $pelanggan)
     {
         $pelanggan->delete();
diff --git a/backend/resources/views/admin/pelanggan/index.blade.php b/backend/resources/views/admin/pelanggan/index.blade.php
index 96e1d8d..d941d9a 100644
--- a/backend/resources/views/admin/pelanggan/index.blade.php
+++ b/backend/resources/views/admin/pelanggan/index.blade.php
@@ -3,153 +3,161 @@
 @section('title', 'Manajemen Pelanggan')
 
 @section('content')
-    <div class="container mx-auto py-4">
+<div class="container mx-auto py-4">
 
-       <!-- Header + Filter -->
-<div class="flex justify-between items-center mb-4">
-    <h3 class="text-xl font-bold">Manajemen Pelanggan</h3>
+    <!-- Header + Filter -->
+    <div class="flex justify-between items-center mb-4">
+        <h3 class="text-xl font-bold">Manajemen Pelanggan</h3>
 
-    <!-- Filter Kategori -->
-    <form method="GET" action="{{ route('admin.pelanggan.index') }}" class="flex space-x-2">
-        <select name="kategori" class="border border-gray-300 rounded px-3 py-2">
-            <option value="">-- Semua Kategori --</option>
-            @foreach($kategoris as $kategori)
-                <option value="{{ $kategori->nama }}" {{ request('kategori') == $kategori->nama ? 'selected' : '' }}>
-                    {{ $kategori->nama }}
-                </option>
-            @endforeach
-        </select>
-        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Filter</button>
-    </form>
+        <!-- Filter & Search -->
+        <form method="GET" action="{{ route('admin.pelanggan.index') }}" class="flex space-x-2">
+            <!-- Filter Kategori -->
+            <select name="kategori"
+                    class="border border-gray-300 rounded px-3 py-2"
+                    onchange="this.form.submit()">
+                <option value="">-- Semua Kategori --</option>
+                @foreach($kategoris as $kategori)
+                    <option value="{{ $kategori->nama }}" {{ request('kategori') == $kategori->nama ? 'selected' : '' }}>
+                        {{ $kategori->nama }}
+                    </option>
+                @endforeach
+            </select>
+
+            <!-- Search -->
+            <input type="text" name="search" value="{{ request('search') }}"
+                   placeholder="Cari nama / email / telepon..."
+                   class="border border-gray-300 rounded px-3 py-2 w-60">
+
+            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Cari</button>
+        </form>
+    </div>
+
+    <!-- Flash Message -->
+    @if (session('success'))
+        <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
+            {{ session('success') }}
+        </div>
+        <script>
+            setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
+        </script>
+    @endif
+
+    <!-- Tabel Pelanggan -->
+    <div class="bg-white rounded-lg shadow-sm">
+        <div class="p-4 overflow-x-auto">
+            <table class="w-full text-left border-collapse border border-gray-300">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="p-2 border border-gray-300 text-center w-16">No</th>
+                        <th class="p-2 border border-gray-300 text-center">Nama</th>
+                        <th class="p-2 border border-gray-300 text-center">Template</th>
+                        <th class="p-2 border border-gray-300 text-center">Kategori</th>
+                        <th class="p-2 border border-gray-300 text-center">Email</th>
+                        <th class="p-2 border border-gray-300 text-center">No. Telepon</th>
+                        <th class="p-2 border border-gray-300 text-center">Harga</th>
+                        <th class="p-2 border border-gray-300 text-center">Aksi</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @forelse($pelanggans as $key => $pelanggan)
+                        <tr>
+                            <td class="p-2 py-4 border border-gray-300 text-center">{{ $key + 1 }}</td>
+                            <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
+                            <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
+                            <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
+                            <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
+                            <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
+                            <td class="py-3 px-2 border border-gray-300 text-center">
+                                Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
+                            </td>
+                            <td class="p-2 border border-gray-300 text-center">
+                                <div class="flex justify-center space-x-2">
+                                    <a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"
+                                        class="text-blue-600 hover:underline flex items-center">
+                                        <i class="bi bi-eye mr-1"></i> Detail
+                                    </a>
+                                    <button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
+                                        data-id="{{ $pelanggan->id }}">
+                                        <i class="bi bi-trash mr-1"></i> Hapus
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr>
+                            <td colspan="8" class="p-2 text-center text-gray-500 border border-gray-300">
+                                Belum ada pelanggan
+                            </td>
+                        </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+    </div>
 </div>
 
-
-        <!-- Flash Message -->
-        @if (session('success'))
-            <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
-                {{ session('success') }}
+<!-- Modal Hapus Pelanggan -->
+@foreach ($pelanggans as $pelanggan)
+    <div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
+        <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div>
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+            <div class="p-4 border-b">
+                <h5 class="text-lg font-medium">Hapus Pelanggan</h5>
             </div>
-            <script>
-                setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
-            </script>
-        @endif
-
-        <!-- Tabel Pelanggan -->
-        <div class="bg-white rounded-lg shadow-sm">
-            <div class="p-4 overflow-x-auto">
-                <table class="w-full text-left border-collapse border border-gray-300">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="p-2 border border-gray-300 text-center w-16">Nomor</th>
-                            <th class="p-2 border border-gray-300 text-center">Nama</th>
-                            <th class="p-2 border border-gray-300 text-center">Nama template</th>
-                            <th class="p-2 border border-gray-300 text-center">Kategori</th>
-                            <th class="p-2 border border-gray-300 text-center">Email</th>
-                            <th class="p-2 border border-gray-300 text-center">No. Telepon</th>
-                            <th class="p-2 border border-gray-300 text-center">Harga</th>
-                            <th class="p-2 border border-gray-300 text-center">Aksi</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @forelse($pelanggans as $key => $pelanggan)
-                            <tr>
-                                <td class="p-2 py-4 border border-gray-300 text-center">{{ $key + 1 }}</td>
-                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
-                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
-                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
-                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
-                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
-                                <td class="py-3 px-2 border border-gray-300 text-center">
-                                    Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
-                                </td>
-                                <td class="p-2 border border-gray-300 text-center">
-                                    <div class="flex justify-center space-x-2">
-                                        <a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"
-                                            class="text-blue-600 hover:underline flex items-center">
-                                            <i class="bi bi-eye mr-1"></i> Detail
-                                        </a>
-                                        <button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
-                                            data-id="{{ $pelanggan->id }}">
-                                            <i class="bi bi-trash mr-1"></i> Hapus
-                                        </button>
-                                    </div>
-                                </td>
-                            </tr>
-                        @empty
-                            <tr>
-                                <td colspan="8" class="p-2 text-center text-gray-500 border border-gray-300">
-                                    Belum ada pelanggan
-                                </td>
-                            </tr>
-                        @endforelse
-                    </tbody>
-                </table>
+            <div class="p-4">
+                <p>Apakah Anda yakin ingin menghapus pelanggan <strong>{{ $pelanggan->nama_pemesan }}</strong>?</p>
+            </div>
+            <div class="p-4 border-t flex justify-end space-x-2">
+                <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
+                    data-id="{{ $pelanggan->id }}">Batal</button>
+                <form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST" class="inline">
+                    @csrf
+                    @method('DELETE')
+                    <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
+                </form>
             </div>
         </div>
     </div>
+@endforeach
 
-    <!-- Modal Hapus Pelanggan -->
-    @foreach ($pelanggans as $pelanggan)
-        <div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
-            <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div>
-            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
-                <div class="p-4 border-b">
-                    <h5 class="text-lg font-medium">Hapus Pelanggan</h5>
-                </div>
-                <div class="p-4">
-                    <p>Apakah Anda yakin ingin menghapus pelanggan <strong>{{ $pelanggan->nama }}</strong>?</p>
-                </div>
-                <div class="p-4 border-t flex justify-end space-x-2">
-                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
-                        data-id="{{ $pelanggan->id }}">Batal</button>
-                    <form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST" class="inline">
-                        @csrf
-                        @method('DELETE')
-                        <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    @endforeach
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
+        const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
+        const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
 
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
-            const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
-            const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
-
-            openDeleteBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const id = btn.dataset.id;
-                    const modal = document.getElementById('modalDelete' + id);
-                    if (modal) {
-                        modal.classList.remove('hidden');
-                        modal.classList.add('flex');
-                    }
-                });
-            });
-
-            closeDeleteBtns.forEach(btn => {
-                btn.addEventListener('click', () => {
-                    const id = btn.dataset.id;
-                    const modal = document.getElementById('modalDelete' + id);
-                    if (modal) {
-                        modal.classList.add('hidden');
-                        modal.classList.remove('flex');
-                    }
-                });
-            });
-
-            closeDeleteOverlays.forEach(overlay => {
-                overlay.addEventListener('click', () => {
-                    const id = overlay.dataset.id;
-                    const modal = document.getElementById('modalDelete' + id);
-                    if (modal) {
-                        modal.classList.add('hidden');
-                        modal.classList.remove('flex');
-                    }
-                });
+        openDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.remove('hidden');
+                    modal.classList.add('flex');
+                }
             });
         });
-    </script>
+
+        closeDeleteBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.add('hidden');
+                    modal.classList.remove('flex');
+                }
+            });
+        });
+
+        closeDeleteOverlays.forEach(overlay => {
+            overlay.addEventListener('click', () => {
+                const id = overlay.dataset.id;
+                const modal = document.getElementById('modalDelete' + id);
+                if (modal) {
+                    modal.classList.add('hidden');
+                    modal.classList.remove('flex');
+                }
+            });
+        });
+    });
+</script>
 @endsection