diff --git a/resources/js/pages/admin/system/form-histories/attribute-changes-dialog.tsx b/resources/js/pages/admin/system/form-histories/attribute-changes-dialog.tsx
index 62ee4e2..90344a1 100644
--- a/resources/js/pages/admin/system/form-histories/attribute-changes-dialog.tsx
+++ b/resources/js/pages/admin/system/form-histories/attribute-changes-dialog.tsx
@@ -47,11 +47,38 @@ function renderValue(value: unknown): React.ReactNode {
             return <span className="text-muted-foreground">-</span>;
         }
 
-        return value.join(', ');
+        if (value.every((item) => typeof item !== 'object' || item === null)) {
+            return value.join(', ');
+        }
+
+        return (
+            <div className="space-y-2">
+                {value.map((item, index) => (
+                    <div key={index} className="rounded border border-border/50 px-2 py-1">
+                        {renderValue(item)}
+                    </div>
+                ))}
+            </div>
+        );
     }
 
     if (typeof value === 'object') {
-        return JSON.stringify(value);
+        const entries = Object.entries(value as Record<string, unknown>);
+
+        if (entries.length === 0) {
+            return <span className="text-muted-foreground">-</span>;
+        }
+
+        return (
+            <div className="space-y-0.5">
+                {entries.map(([key, val]) => (
+                    <div key={key}>
+                        <span className="text-muted-foreground">{key}:</span>{' '}
+                        {renderValue(val)}
+                    </div>
+                ))}
+            </div>
+        );
     }
 
     return String(value);