diff --git a/assets/cat-bonus.png b/assets/cat-bonus.png
new file mode 100644
index 0000000..678d877
Binary files /dev/null and b/assets/cat-bonus.png differ
diff --git a/assets/cat-hiburan.png b/assets/cat-hiburan.png
new file mode 100644
index 0000000..81360a1
Binary files /dev/null and b/assets/cat-hiburan.png differ
diff --git a/assets/cat-kesehatan.png b/assets/cat-kesehatan.png
new file mode 100644
index 0000000..bf3f24d
Binary files /dev/null and b/assets/cat-kesehatan.png differ
diff --git a/assets/cat-lain-expense.png b/assets/cat-lain-expense.png
new file mode 100644
index 0000000..e9de194
Binary files /dev/null and b/assets/cat-lain-expense.png differ
diff --git a/assets/cat-lain-income.png b/assets/cat-lain-income.png
new file mode 100644
index 0000000..72eb0a8
Binary files /dev/null and b/assets/cat-lain-income.png differ
diff --git a/assets/cat-tagihan.png b/assets/cat-tagihan.png
new file mode 100644
index 0000000..46da9cc
Binary files /dev/null and b/assets/cat-tagihan.png differ
diff --git a/src/screens/AddTransactionScreen.tsx b/src/screens/AddTransactionScreen.tsx
index 13e5b0e..b354ea7 100644
--- a/src/screens/AddTransactionScreen.tsx
+++ b/src/screens/AddTransactionScreen.tsx
@@ -187,7 +187,7 @@ export function AddTransactionScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}
diff --git a/src/screens/DashboardScreen.tsx b/src/screens/DashboardScreen.tsx
index 55bdda9..e1de830 100644
--- a/src/screens/DashboardScreen.tsx
+++ b/src/screens/DashboardScreen.tsx
@@ -158,7 +158,9 @@ export function DashboardScreen() {
   const remainingDays = totalDays - dayOfMonth;
   const perDay = dayOfMonth > 0 ? compare.current / dayOfMonth : 0;
   const projection = Math.round(compare.current + perDay * remainingDays);
-  const topIcon3d = topCategory ? getCategoryIcon3d(topCategory.categoryName) : null;
+  const topIcon3d = topCategory
+    ? getCategoryIcon3d(topCategory.categoryName, 'expense')
+    : null;
 
   // Saldo cukup berapa hari (rata-rata pengeluaran harian bulan ini)
   const avgDailyExpense = dayOfMonth > 0 ? monthExpense / dayOfMonth : 0;
@@ -646,7 +648,7 @@ export function DashboardScreen() {
           </View>
         ) : (
           recent.map((t) => {
-            const icon3d = getCategoryIcon3d(t.categoryName);
+            const icon3d = getCategoryIcon3d(t.categoryName, t.type);
             return (
               <View key={t.id} style={[styles.card, styles.txRow]}>
                 <View
diff --git a/src/screens/EditTransactionScreen.tsx b/src/screens/EditTransactionScreen.tsx
index 9d5091e..0e8f171 100644
--- a/src/screens/EditTransactionScreen.tsx
+++ b/src/screens/EditTransactionScreen.tsx
@@ -181,7 +181,7 @@ export function EditTransactionScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}
diff --git a/src/screens/HistoryScreen.tsx b/src/screens/HistoryScreen.tsx
index 1cf0977..7f73d6a 100644
--- a/src/screens/HistoryScreen.tsx
+++ b/src/screens/HistoryScreen.tsx
@@ -239,7 +239,7 @@ export function HistoryScreen() {
           </View>
         }
         renderItem={({ item }) => {
-          const icon3d = getCategoryIcon3d(item.categoryName);
+          const icon3d = getCategoryIcon3d(item.categoryName, item.type);
           return (
             <SwipeableRow
               onEdit={() =>
diff --git a/src/screens/RecurringFormScreen.tsx b/src/screens/RecurringFormScreen.tsx
index da75434..0511b9f 100644
--- a/src/screens/RecurringFormScreen.tsx
+++ b/src/screens/RecurringFormScreen.tsx
@@ -165,7 +165,7 @@ export function RecurringFormScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}
diff --git a/src/utils/categoryIcons3d.ts b/src/utils/categoryIcons3d.ts
index 3994a59..d8e7f94 100644
--- a/src/utils/categoryIcons3d.ts
+++ b/src/utils/categoryIcons3d.ts
@@ -1,15 +1,26 @@
 /**
  * Mapping kategori -> icon 3D.
+ * Key: `${type}:${name}` (karena ada kategori "Lainnya" di income & expense).
  * Kategori yang belum punya versi 3D otomatis fallback ke emoji.
  */
 export const CATEGORY_3D: Record<string, any> = {
-  Makanan: require('../../assets/cat-makanan.png'),
-  Transportasi: require('../../assets/cat-transportasi.png'),
-  Belanja: require('../../assets/cat-belanja.png'),
-  Gaji: require('../../assets/cat-gaji.png'),
+  'expense:Makanan': require('../../assets/cat-makanan.png'),
+  'expense:Transportasi': require('../../assets/cat-transportasi.png'),
+  'expense:Belanja': require('../../assets/cat-belanja.png'),
+  'expense:Tagihan': require('../../assets/cat-tagihan.png'),
+  'expense:Kesehatan': require('../../assets/cat-kesehatan.png'),
+  'expense:Hiburan': require('../../assets/cat-hiburan.png'),
+  'expense:Lainnya': require('../../assets/cat-lain-expense.png'),
+  'income:Gaji': require('../../assets/cat-gaji.png'),
+  'income:Bonus / THR': require('../../assets/cat-bonus.png'),
+  'income:Lainnya': require('../../assets/cat-lain-income.png'),
 };
 
-export function getCategoryIcon3d(categoryName: string | null): any | null {
+export function getCategoryIcon3d(
+  categoryName: string | null,
+  type?: string
+): any | null {
   if (!categoryName) return null;
-  return CATEGORY_3D[categoryName] ?? null;
+  const key = type ? `${type}:${categoryName}` : categoryName;
+  return CATEGORY_3D[key] ?? null;
 }