diff --git a/src/components/BotChat/widgets/ErrorWidgetCard.tsx b/src/components/BotChat/widgets/ErrorWidgetCard.tsx
index a411d6b..75363fd 100644
--- a/src/components/BotChat/widgets/ErrorWidgetCard.tsx
+++ b/src/components/BotChat/widgets/ErrorWidgetCard.tsx
@@ -41,12 +41,14 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#FFE5E5',
+    backgroundColor: '#FFFFFF',
     borderRadius: 12,
     padding: 12,
     marginVertical: 8,
-    borderWidth: 1,
-    borderColor: '#FFCCCC',
+    borderWidth: 1.5,
+    borderColor: '#E1E5E9',
+    borderLeftWidth: 4,
+    borderLeftColor: '#FF3B30',
   },
   iconContainer: {
     marginRight: 12,
diff --git a/src/components/BotChat/widgets/InlineCategoryList.tsx b/src/components/BotChat/widgets/InlineCategoryList.tsx
index 5fc4fb1..5e8be1d 100644
--- a/src/components/BotChat/widgets/InlineCategoryList.tsx
+++ b/src/components/BotChat/widgets/InlineCategoryList.tsx
@@ -82,7 +82,7 @@ const InlineCategoryList: React.FC<InlineCategoryListProps> = React.memo(({ widg
             )}
 
             {/* Arrow icon */}
-            <Ionicons name="chevron-forward" size={20} color="#CCCCCC" />
+            <Ionicons name="chevron-forward" size={20} color="#999999" />
           </TouchableOpacity>
         );
       })}
@@ -96,7 +96,7 @@ const styles = StyleSheet.create({
     marginVertical: 4,
   },
   emptyContainer: {
-    backgroundColor: '#F5F5F5',
+    backgroundColor: '#F8F8F8',
     borderRadius: 12,
     padding: 16,
     alignItems: 'center',
diff --git a/src/components/BotChat/widgets/InlineTaskPreview.tsx b/src/components/BotChat/widgets/InlineTaskPreview.tsx
index da2ccb3..c4ac14e 100644
--- a/src/components/BotChat/widgets/InlineTaskPreview.tsx
+++ b/src/components/BotChat/widgets/InlineTaskPreview.tsx
@@ -100,7 +100,7 @@ const styles = StyleSheet.create({
     marginVertical: 4,
   },
   emptyContainer: {
-    backgroundColor: '#F5F5F5',
+    backgroundColor: '#F8F8F8',
     borderRadius: 12,
     padding: 16,
     alignItems: 'center',
@@ -112,11 +112,13 @@ const styles = StyleSheet.create({
     fontStyle: 'italic',
   },
   moreTasksContainer: {
-    backgroundColor: '#F0F0F0',
+    backgroundColor: '#FFFFFF',
     borderRadius: 8,
     padding: 12,
     alignItems: 'center',
     marginTop: 4,
+    borderWidth: 1,
+    borderColor: '#E1E5E9',
   },
   moreTasksText: {
     fontSize: 13,
diff --git a/src/components/BotChat/widgets/ItemDetailModal.tsx b/src/components/BotChat/widgets/ItemDetailModal.tsx
index 8d4c635..dc5968d 100644
--- a/src/components/BotChat/widgets/ItemDetailModal.tsx
+++ b/src/components/BotChat/widgets/ItemDetailModal.tsx
@@ -230,7 +230,7 @@ const ItemDetailModal: React.FC<ItemDetailModalProps> = ({
                     : 'document-text'
                 }
                 size={48}
-                color={itemType === 'note' ? '#FFFFFF' : '#007AFF'}
+                color={itemType === 'note' ? '#FFFFFF' : '#000000'}
               />
             </View>
           </View>
@@ -316,7 +316,7 @@ const styles = StyleSheet.create({
     width: 100,
     height: 100,
     borderRadius: 50,
-    backgroundColor: '#E5F1FF',
+    backgroundColor: '#F0F0F0',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -347,12 +347,12 @@ const styles = StyleSheet.create({
     lineHeight: 24,
   },
   completedText: {
-    color: '#34C759',
+    color: '#000000',
     fontWeight: '600',
   },
   categoryBadge: {
     alignSelf: 'flex-start',
-    backgroundColor: '#E5F1FF',
+    backgroundColor: '#F0F0F0',
     borderRadius: 12,
     paddingHorizontal: 12,
     paddingVertical: 6,
@@ -360,7 +360,7 @@ const styles = StyleSheet.create({
   categoryBadgeText: {
     fontSize: 14,
     fontWeight: '600',
-    color: '#007AFF',
+    color: '#000000',
   },
   actionsContainer: {
     paddingHorizontal: 16,
@@ -379,10 +379,10 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   primaryButton: {
-    backgroundColor: '#007AFF',
+    backgroundColor: '#000000',
   },
   destructiveButton: {
-    backgroundColor: '#FF3B30',
+    backgroundColor: '#666666',
   },
   actionButtonText: {
     fontSize: 16,
diff --git a/src/components/BotChat/widgets/VisualizationModal.tsx b/src/components/BotChat/widgets/VisualizationModal.tsx
index bd02102..e8dc066 100644
--- a/src/components/BotChat/widgets/VisualizationModal.tsx
+++ b/src/components/BotChat/widgets/VisualizationModal.tsx
@@ -15,6 +15,7 @@ import { VisualizationModalProps, TaskListItem } from '../types';
 import Task from '../../Task/Task';
 import { Task as TaskType } from '../../../services/taskService';
 import CalendarGrid from '../../Calendar/CalendarGrid';
+import Category from '../../Category/Category';
 import dayjs from 'dayjs';
 
 /**
@@ -239,63 +240,26 @@ const VisualizationModal: React.FC<VisualizationModalProps> = ({
     }
 
     if (isCategoryList) {
-      // Usa imageUrl solo se è un URL valido (inizia con http/https/file://)
-      // Altrimenti lascia undefined per usare l'icona predefinita
-      const validImageUrl = item.imageUrl || item.icon;
-      const isValidUrl = validImageUrl && (
-        validImageUrl.startsWith('http://') ||
-        validImageUrl.startsWith('https://') ||
-        validImageUrl.startsWith('file://')
-      );
-
       return (
-        <TouchableOpacity
+        <Category
           key={index}
-          style={styles.categoryCard}
-          activeOpacity={0.7}
-          onPress={() => {
-            console.log('[VisualizationModal] Category pressed:', item.name);
-            console.log('[VisualizationModal] onCategoryPress available:', !!onCategoryPress);
-            if (onCategoryPress) {
-              onCategoryPress(item);
-            } else {
-              console.warn('[VisualizationModal] onCategoryPress is not defined!');
-            }
+          title={item.name}
+          description={item.description}
+          imageUrl={item.imageUrl || item.icon}
+          categoryId={item.id || item.category_id}
+          isShared={item.isShared || item.is_shared}
+          isOwned={item.isOwned !== undefined ? item.isOwned : true}
+          ownerName={item.ownerName || item.owner_name}
+          permissionLevel={item.permissionLevel || item.permission_level || "READ_WRITE"}
+          onDelete={() => {
+            // Refresh modal data if needed
+            console.log('[VisualizationModal] Category deleted:', item.name);
           }}
-        >
-          <View style={styles.categoryIconContainer}>
-            {isValidUrl ? (
-              <Image source={{ uri: validImageUrl }} style={styles.categoryImage} />
-            ) : (
-              <Ionicons name="folder" size={32} color="#007AFF" />
-            )}
-          </View>
-          <View style={styles.categoryTextContainer}>
-            <Text style={styles.categoryTitle} numberOfLines={1}>
-              {item.name}
-            </Text>
-            {item.description && (
-              <Text style={styles.categoryDescription} numberOfLines={2}>
-                {item.description}
-              </Text>
-            )}
-            <View style={styles.categoryMetaContainer}>
-              <View style={styles.categoryTaskCount}>
-                <Ionicons name="list-outline" size={14} color="#666666" />
-                <Text style={styles.categoryTaskCountText}>
-                  {item.taskCount || item.task_count || 0} task
-                </Text>
-              </View>
-              {item.isShared && (
-                <View style={styles.categorySharedBadge}>
-                  <Ionicons name="people-outline" size={14} color="#007AFF" />
-                  <Text style={styles.categorySharedText}>Condiviso</Text>
-                </View>
-              )}
-            </View>
-          </View>
-          <Ionicons name="chevron-forward" size={20} color="#C7C7CC" />
-        </TouchableOpacity>
+          onEdit={() => {
+            // Refresh modal data if needed
+            console.log('[VisualizationModal] Category edited:', item.name);
+          }}
+        />
       );
     }
 
@@ -815,85 +779,6 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontFamily: 'System',
   },
-  // Stili per le category card personalizzate nella chat
-  categoryCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#FFFFFF',
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 14,
-    marginBottom: 12,
-    marginHorizontal: 16,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 1,
-    borderWidth: 1.5,
-    borderColor: '#E1E5E9',
-  },
-  categoryIconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: '#E5F1FF',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-    overflow: 'hidden',
-  },
-  categoryImage: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-  },
-  categoryTextContainer: {
-    flex: 1,
-  },
-  categoryTitle: {
-    fontSize: 17,
-    fontWeight: '600',
-    color: '#000000',
-    marginBottom: 4,
-    fontFamily: 'System',
-  },
-  categoryDescription: {
-    fontSize: 14,
-    color: '#666666',
-    marginBottom: 6,
-    fontFamily: 'System',
-  },
-  categoryMetaContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  categoryTaskCount: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  categoryTaskCountText: {
-    fontSize: 13,
-    color: '#666666',
-    fontFamily: 'System',
-  },
-  categorySharedBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    backgroundColor: '#E5F1FF',
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 8,
-  },
-  categorySharedText: {
-    fontSize: 12,
-    color: '#007AFF',
-    fontWeight: '600',
-    fontFamily: 'System',
-  },
 });
 
 export default VisualizationModal;