diff --git a/app/Http/Controllers/Admin/Master/ProductController.php b/app/Http/Controllers/Admin/Master/ProductController.php
index 0b478f1..cfb5128 100644
--- a/app/Http/Controllers/Admin/Master/ProductController.php
+++ b/app/Http/Controllers/Admin/Master/ProductController.php
@@ -19,6 +19,7 @@ public function index(): Response
     {
         return Inertia::render('admin/master/product/index', [
             'products' => Product::with(['prices', 'categories'])->latest()->get(),
+            'categories' => Category::active()->get(),
         ]);
     }
 
diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx
index 45d21fd..676831a 100644
--- a/resources/js/pages/admin/master/product/index.tsx
+++ b/resources/js/pages/admin/master/product/index.tsx
@@ -1,5 +1,5 @@
 import { Head, router, Link } from '@inertiajs/react';
-import type { Product } from '@/types';
+import type { Product, Category } from '@/types';
 import { ColumnDef } from '@tanstack/react-table';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -25,7 +25,7 @@ import {
     AlertDialogTitle,
 } from "@/components/ui/alert-dialog"
 
-export default function ProductIndex({ products }: { products: Product[] }) {
+export default function ProductIndex({ products, categories }: { products: Product[], categories: Category[] }) {
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
     const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
     const [productToDelete, setProductToDelete] = useState<Product | null>(null);
@@ -88,6 +88,11 @@ export default function ProductIndex({ products }: { products: Product[] }) {
                 )
             },
             meta: { title: "Kategori" },
+            filterFn: (row, id, value) => {
+                const categories = row.getValue(id) as Category[];
+                if (!categories) return false;
+                return categories.some(cat => String(cat.id) === String(value));
+            },
             cell: ({ row }) => {
                 const product = row.original;
                 return (
@@ -184,7 +189,15 @@ export default function ProductIndex({ products }: { products: Product[] }) {
                                     { label: 'Aktif', value: 'true' },
                                     { label: 'Tidak Aktif', value: 'false' },
                                 ]
-                            }
+                            },
+                            {
+                                columnId: 'categories',
+                                title: 'Kategori',
+                                options: categories.map((category) => ({
+                                    label: category.name,
+                                    value: String(category.id),
+                                })),
+                            },
                         ]}
                         bulkActions={[
                             {
diff --git a/resources/js/types/category.ts b/resources/js/types/category.ts
index 0fd1a2d..ed65b22 100644
--- a/resources/js/types/category.ts
+++ b/resources/js/types/category.ts
@@ -1,6 +1,6 @@
 export interface Category {
     id: number;
-    title: string;
+    name: string;
     slug: string;
     is_active: boolean;
     created_at: string;