child: Column(

children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      transaction.title,
                      style: theme.textTheme.subtitle1,
                    ),
                    Text(
                      formattedAmount,
                      style: theme.textTheme.subtitle1,
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      dateFormatter.format(transaction.date),
                      style: theme.textTheme.caption,
                    ),
                    Text(
                      transaction.categoryName,
                      style: theme.textTheme.caption,
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
diff --git a/finance_app/lib/widgets/transaction_list_item.dart b/finance_app/lib/widgets/transaction_list_item.dart
index 1a2b3c4..a49954e 100644
--- a/finance_app/lib/widgets/transaction_list_item.dart
+++ b/finance_app/lib/widgets/transaction_list_item.dart
@@ -1,4 +1,4 @@
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 import 'package:finance_app/models/transaction.dart';
 import 'package:finance_app/utils/category_utils.dart';
@@ -18,10 +18,10 @@ class TransactionListItem extends StatelessWidget {
     final theme = Theme.of(context);
     final bool isIncome = transaction.type == 'income';

-    // Get category details ONLY for expense
-    final categoryDetails = !isIncome
-        ? CategoryUtils.getCategoryDetails(transaction.categoryName)
-        : null; // No specific category details needed for income display
+    // Get category details from the transaction's category reference
+    final categoryDetails = !isIncome && transaction.category != null
+        ? (iconCode: transaction.category!.iconCode, colorCode: transaction.category!.colorCode)
+        : null;

     // Format dates
     final dateFormatter = DateFormat.MMMd(); // e.g., Sep 10
@@ -51,8 +51,8 @@ class TransactionListItem extends StatelessWidget {
         : (isDark ? Colors.redAccent.shade100 : Colors.red.shade700); // Red for expense

     // Leading icon configuration
-    IconData leadingIconData = isIncome ? Icons.arrow_downward_rounded : (categoryDetails?.iconCode ?? Icons.error_outline); // Default icon for expense if details missing
-    Color leadingIconColor = isIncome ? amountColor : (categoryDetails?.colorCode ?? Colors.grey);
+    IconData leadingIconData = isIncome ? Icons.arrow_downward_rounded : (transaction.category?.iconCode ?? Icons.error_outline);
+    Color leadingIconColor = isIncome ? amountColor : (transaction.category?.colorCode ?? Colors.grey);
     Color leadingBackgroundColor = leadingIconColor.withOpacity(isDark ? 0.25 : 0.18);

     return Card(
refactor: update transaction list item to use category reference

finance_app/lib/widgets/transaction_list_item.dart

@@ -18,10 +18,10 @@ class TransactionListItem extends StatelessWidget {
     final theme = Theme.of(context);
     final bool isIncome = transaction.type == 'income';
 
-    // Get category details ONLY for expenses
-    final categoryDetails = !isIncome
-        ? CategoryUtils.getCategoryDetails(transaction.categoryName)
-        : null; // No specific category details needed for income display
+    // Get category details from the transaction's category reference
+    final categoryDetails = !isIncome && transaction.category != null
+        ? (iconCode: transaction.category!.iconCode, colorCode: transaction.category!.colorCode)
+        : null;
 
     // Format dates
     final dateFormatter = DateFormat.MMMd(); // e.g., Sep 10
@@ -51,8 +51,12 @@ class TransactionListItem extends StatelessWidget {
         : (isDark ? Colors.redAccent.shade100 : Colors.red.shade700); // Red for expense
 
     // Leading Icon configuration
-    IconData leadingIconData = isIncome ? Icons.arrow_downward_rounded : (categoryDetails?.iconCode ?? Icons.error_outline); // Default icon for expense if details missing
-    Color leadingIconColor = isIncome ? amountColor : (categoryDetails?.colorCode ?? Colors.grey);
+    IconData leadingIconData = isIncome 
+        ? Icons.arrow_downward_rounded 
+        : (transaction.category?.iconCode ?? Icons.error_outline);
+    Color leadingIconColor = isIncome 
+        ? amountColor 
+        : (transaction.category?.colorCode ?? Colors.grey);
     Color leadingBackgroundColor = leadingIconColor.withOpacity(isDark ? 0.25 : 0.18);
 
     return Card(