diff --git a/src/app/payments/columns.tsx b/src/app/payments/columns.tsx
index b092e50..32a2157 100644
--- a/src/app/payments/columns.tsx
+++ b/src/app/payments/columns.tsx
@@ -50,7 +50,15 @@ export const columns = (
             header: 'Category',
             cell: ({row}) => {
                 const category = categories.find((category) => category.id === row.original.categoryId);
-                return category?.name ?? '-';
+                return (
+                    <div className="flex items-center space-x-4">
+                        <svg className="h-5" fill={category?.color} viewBox="0 0 20 20"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="10" cy="10" r="10"/>
+                        </svg>
+                        <p>{category?.name ?? '-'}</p>
+                    </div>
+                );
             },
         },
         {