diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66356bd..79413e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 0.4.0 - November 6 2023
+
+- Show amount of unread messages per chat
+- More intuitive chat UI
+- Fix default profile avatars
+
 ## 0.3.4 - October 25 2023
 
 - Add interface methods for getting amount of unread messages
diff --git a/packages/flutter_community_chat/pubspec.yaml b/packages/flutter_community_chat/pubspec.yaml
index 51b24c7..36aa766 100644
--- a/packages/flutter_community_chat/pubspec.yaml
+++ b/packages/flutter_community_chat/pubspec.yaml
@@ -4,7 +4,7 @@
 
 name: flutter_community_chat
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 
 publish_to: none
 
@@ -19,12 +19,12 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_view
-       ref: 0.3.4
+       ref: 0.4.0
   flutter_community_chat_interface:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0
diff --git a/packages/flutter_community_chat_firebase/lib/service/firebase_chat_service.dart b/packages/flutter_community_chat_firebase/lib/service/firebase_chat_service.dart
index adc3554..02921ec 100644
--- a/packages/flutter_community_chat_firebase/lib/service/firebase_chat_service.dart
+++ b/packages/flutter_community_chat_firebase/lib/service/firebase_chat_service.dart
@@ -29,6 +29,24 @@ class FirebaseChatService implements ChatService {
     _options = options ?? const FirebaseChatOptions();
   }
 
+  StreamSubscription<DocumentSnapshot> _addUnreadChatSubscription(
+    String chatId,
+    String userId,
+    Function(int) onUnreadChatsUpdated,
+  ) {
+    var snapshots = _db
+        .collection(_options.usersCollectionName)
+        .doc(userId)
+        .collection('chats')
+        .doc(chatId)
+        .snapshots();
+
+    return snapshots.listen((snapshot) {
+      var data = snapshot.data();
+      onUnreadChatsUpdated(data?['amount_unread_messages'] ?? 0);
+    });
+  }
+
   StreamSubscription<QuerySnapshot> _addChatSubscription(
     List<String> chatIds,
     Function(List<ChatModel>) onReceivedChats,
@@ -79,6 +97,8 @@ class FirebaseChatService implements ChatService {
             );
           }
         }
+        ChatModel? chatModel;
+
         if (chatData.personal) {
           var otherUserId = List<String>.from(chatData.users).firstWhere(
             (element) => element != currentUser?.id,
@@ -86,18 +106,16 @@ class FirebaseChatService implements ChatService {
           var otherUser = await _userService.getUser(otherUserId);
 
           if (otherUser != null) {
-            chats.add(
-              PersonalChatModel(
-                id: chatDoc.id,
-                user: otherUser,
-                lastMessage: messages.isNotEmpty ? messages.last : null,
-                messages: messages,
-                lastUsed: chatData.lastUsed == null
-                    ? null
-                    : DateTime.fromMillisecondsSinceEpoch(
-                        chatData.lastUsed!.millisecondsSinceEpoch,
-                      ),
-              ),
+            chatModel = PersonalChatModel(
+              id: chatDoc.id,
+              user: otherUser,
+              lastMessage: messages.isNotEmpty ? messages.last : null,
+              messages: messages,
+              lastUsed: chatData.lastUsed == null
+                  ? null
+                  : DateTime.fromMillisecondsSinceEpoch(
+                      chatData.lastUsed!.millisecondsSinceEpoch,
+                    ),
             );
           }
         } else {
@@ -109,22 +127,39 @@ class FirebaseChatService implements ChatService {
               users.add(user);
             }
           }
-          chats.add(
-            GroupChatModel(
-              id: chatDoc.id,
-              title: chatData.title ?? '',
-              imageUrl: chatData.imageUrl ?? '',
-              lastMessage: messages.isNotEmpty ? messages.last : null,
-              messages: messages,
-              users: users,
-              lastUsed: chatData.lastUsed == null
-                  ? null
-                  : DateTime.fromMillisecondsSinceEpoch(
-                      chatData.lastUsed!.millisecondsSinceEpoch,
-                    ),
-            ),
+          chatModel = GroupChatModel(
+            id: chatDoc.id,
+            title: chatData.title ?? '',
+            imageUrl: chatData.imageUrl ?? '',
+            lastMessage: messages.isNotEmpty ? messages.last : null,
+            messages: messages,
+            users: users,
+            lastUsed: chatData.lastUsed == null
+                ? null
+                : DateTime.fromMillisecondsSinceEpoch(
+                    chatData.lastUsed!.millisecondsSinceEpoch,
+                  ),
           );
         }
+        if (chatModel != null) {
+          _addUnreadChatSubscription(chatModel.id ?? '', currentUser?.id ?? '',
+              (unreadMessages) {
+            // the chatmodel should be updated to reflect the amount of unread messages
+            if (chatModel is PersonalChatModel) {
+              chatModel = (chatModel as PersonalChatModel)
+                  .copyWith(unreadMessages: unreadMessages);
+            } else if (chatModel is GroupChatModel) {
+              chatModel = (chatModel as GroupChatModel)
+                  .copyWith(unreadMessages: unreadMessages);
+            }
+
+            chats = chats
+                .map((chat) => chat.id == chatModel?.id ? chatModel! : chat)
+                .toList();
+            onReceivedChats(chats);
+          });
+          chats.add(chatModel!);
+        }
       }
       onReceivedChats(chats);
     });
diff --git a/packages/flutter_community_chat_firebase/pubspec.yaml b/packages/flutter_community_chat_firebase/pubspec.yaml
index 9983944..8685b7a 100644
--- a/packages/flutter_community_chat_firebase/pubspec.yaml
+++ b/packages/flutter_community_chat_firebase/pubspec.yaml
@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_firebase
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 publish_to: none
 
 environment:
@@ -23,7 +23,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0
diff --git a/packages/flutter_community_chat_interface/lib/src/model/chat.dart b/packages/flutter_community_chat_interface/lib/src/model/chat.dart
index 7f2c1d4..0b39a27 100644
--- a/packages/flutter_community_chat_interface/lib/src/model/chat.dart
+++ b/packages/flutter_community_chat_interface/lib/src/model/chat.dart
@@ -8,12 +8,14 @@ abstract class ChatModel {
   ChatModel({
     this.id,
     this.messages = const [],
+    this.unreadMessages,
     this.lastUsed,
     this.lastMessage,
   });
 
   String? id;
   List<ChatMessageModel>? messages;
+  int? unreadMessages;
   DateTime? lastUsed;
   ChatMessageModel? lastMessage;
 }
diff --git a/packages/flutter_community_chat_interface/lib/src/model/group_chat.dart b/packages/flutter_community_chat_interface/lib/src/model/group_chat.dart
index 934f9dc..cdb816e 100644
--- a/packages/flutter_community_chat_interface/lib/src/model/group_chat.dart
+++ b/packages/flutter_community_chat_interface/lib/src/model/group_chat.dart
@@ -13,9 +13,31 @@ class GroupChatModel extends ChatModel {
     super.messages,
     super.lastUsed,
     super.lastMessage,
+    super.unreadMessages,
   });
 
   final String title;
   final String imageUrl;
   final List<ChatUserModel> users;
+
+  GroupChatModel copyWith({
+    String? id,
+    List<ChatMessageModel>? messages,
+    int? unreadMessages,
+    DateTime? lastUsed,
+    ChatMessageModel? lastMessage,
+    String? title,
+    String? imageUrl,
+    List<ChatUserModel>? users,
+  }) =>
+      GroupChatModel(
+        id: id ?? this.id,
+        messages: messages ?? this.messages,
+        unreadMessages: unreadMessages ?? this.unreadMessages,
+        lastUsed: lastUsed ?? this.lastUsed,
+        lastMessage: lastMessage ?? this.lastMessage,
+        title: title ?? this.title,
+        imageUrl: imageUrl ?? this.imageUrl,
+        users: users ?? this.users,
+      );
 }
diff --git a/packages/flutter_community_chat_interface/lib/src/model/personal_chat.dart b/packages/flutter_community_chat_interface/lib/src/model/personal_chat.dart
index 4e3d161..0733907 100644
--- a/packages/flutter_community_chat_interface/lib/src/model/personal_chat.dart
+++ b/packages/flutter_community_chat_interface/lib/src/model/personal_chat.dart
@@ -9,9 +9,27 @@ class PersonalChatModel extends ChatModel {
     required this.user,
     super.id,
     super.messages,
+    super.unreadMessages,
     super.lastUsed,
     super.lastMessage,
   });
 
   final ChatUserModel user;
+
+  PersonalChatModel copyWith({
+    String? id,
+    List<ChatMessageModel>? messages,
+    int? unreadMessages,
+    DateTime? lastUsed,
+    ChatMessageModel? lastMessage,
+    ChatUserModel? user,
+  }) =>
+      PersonalChatModel(
+        id: id ?? this.id,
+        messages: messages ?? this.messages,
+        unreadMessages: unreadMessages ?? this.unreadMessages,
+        lastUsed: lastUsed ?? this.lastUsed,
+        lastMessage: lastMessage ?? this.lastMessage,
+        user: user ?? this.user,
+      );
 }
diff --git a/packages/flutter_community_chat_interface/pubspec.yaml b/packages/flutter_community_chat_interface/pubspec.yaml
index 4d0faf1..32d7f6d 100644
--- a/packages/flutter_community_chat_interface/pubspec.yaml
+++ b/packages/flutter_community_chat_interface/pubspec.yaml
@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_interface
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 publish_to: none
 
 environment:
diff --git a/packages/flutter_community_chat_view/example/lib/main.dart b/packages/flutter_community_chat_view/example/lib/main.dart
index 782a0dc..f07cec9 100644
--- a/packages/flutter_community_chat_view/example/lib/main.dart
+++ b/packages/flutter_community_chat_view/example/lib/main.dart
@@ -41,7 +41,22 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
       sender: janUser,
       text: 'Met mij gaat het goed, dankje!',
       timestamp: DateTime.now().subtract(const Duration(days: 2)),
-    )
+    ),
+    ChatTextMessageModel(
+      sender: pietUser,
+      text: 'Mooi zo!',
+      timestamp: DateTime.now().subtract(const Duration(days: 1)),
+    ),
+    ChatTextMessageModel(
+      sender: pietUser,
+      text: 'Hoe gaat het?',
+      timestamp: DateTime.now(),
+    ),
+    ChatTextMessageModel(
+      sender: janUser,
+      text: 'Met mij gaat het goed, dankje!',
+      timestamp: DateTime.now().subtract(const Duration(days: 2)),
+    ),
   ];
 
   static final chat = PersonalChatModel(
diff --git a/packages/flutter_community_chat_view/example/pubspec.yaml b/packages/flutter_community_chat_view/example/pubspec.yaml
index 8532342..e612f19 100644
--- a/packages/flutter_community_chat_view/example/pubspec.yaml
+++ b/packages/flutter_community_chat_view/example/pubspec.yaml
@@ -18,7 +18,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_view
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_test:
diff --git a/packages/flutter_community_chat_view/lib/src/components/chat_detail_row.dart b/packages/flutter_community_chat_view/lib/src/components/chat_detail_row.dart
index caf8055..cf14149 100644
--- a/packages/flutter_community_chat_view/lib/src/components/chat_detail_row.dart
+++ b/packages/flutter_community_chat_view/lib/src/components/chat_detail_row.dart
@@ -4,17 +4,23 @@
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_community_chat_interface/flutter_community_chat_interface.dart';
+import 'package:flutter_community_chat_view/flutter_community_chat_view.dart';
 import 'package:flutter_community_chat_view/src/components/chat_image.dart';
 import 'package:flutter_community_chat_view/src/services/date_formatter.dart';
 
 class ChatDetailRow extends StatefulWidget {
   const ChatDetailRow({
+    required this.translations,
+    required this.isFirstMessage,
     required this.message,
+    required this.userAvatarBuilder,
     super.key,
   });
 
+  final ChatTranslations translations;
+  final bool isFirstMessage;
   final ChatMessageModel message;
+  final UserAvatarBuilder userAvatarBuilder;
 
   @override
   State<ChatDetailRow> createState() => _ChatDetailRowState();
@@ -25,14 +31,23 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
 
   @override
   Widget build(BuildContext context) => Padding(
-        padding: const EdgeInsets.only(bottom: 43.0),
+        padding: EdgeInsets.only(top: widget.isFirstMessage ? 25.0 : 0),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Padding(
-              padding: const EdgeInsets.only(left: 10.0),
-              child: ChatImage(
-                image: widget.message.sender.imageUrl,
+            Opacity(
+              opacity: widget.isFirstMessage ? 1 : 0,
+              child: Padding(
+                padding: const EdgeInsets.only(left: 10.0),
+                child: widget.message.sender.imageUrl != null &&
+                        widget.message.sender.imageUrl!.isNotEmpty
+                    ? ChatImage(
+                        image: widget.message.sender.imageUrl!,
+                      )
+                    : widget.userAvatarBuilder(
+                        widget.message.sender,
+                        30,
+                      ),
               ),
             ),
             Expanded(
@@ -43,13 +58,33 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     mainAxisAlignment: MainAxisAlignment.start,
                     children: [
-                      Text(
-                        widget.message.sender.fullName?.toUpperCase() ?? '',
-                        style: const TextStyle(
-                          fontSize: 14,
-                          fontWeight: FontWeight.w500,
+                      if (widget.isFirstMessage)
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Text(
+                              widget.message.sender.fullName?.toUpperCase() ??
+                                  widget.translations.anonymousUser,
+                              style: const TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.w500,
+                              ),
+                            ),
+                            Padding(
+                              padding: const EdgeInsets.only(top: 5.0),
+                              child: Text(
+                                _dateFormatter.format(
+                                  date: widget.message.timestamp,
+                                  showFullDate: true,
+                                ),
+                                style: const TextStyle(
+                                  fontSize: 12,
+                                  color: Color(0xFFBBBBBB),
+                                ),
+                              ),
+                            ),
+                          ],
                         ),
-                      ),
                       Padding(
                         padding: const EdgeInsets.only(top: 3.0),
                         child: widget.message is ChatTextMessageModel
@@ -65,19 +100,6 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                                         .imageUrl,
                               ),
                       ),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 5.0),
-                        child: Text(
-                          _dateFormatter.format(
-                            date: widget.message.timestamp,
-                            showFullDate: true,
-                          ),
-                          style: const TextStyle(
-                            fontSize: 12,
-                            color: Color(0xFFBBBBBB),
-                          ),
-                        ),
-                      ),
                     ],
                   ),
                 ),
diff --git a/packages/flutter_community_chat_view/lib/src/components/chat_image.dart b/packages/flutter_community_chat_view/lib/src/components/chat_image.dart
index c1696f3..83e3bb0 100644
--- a/packages/flutter_community_chat_view/lib/src/components/chat_image.dart
+++ b/packages/flutter_community_chat_view/lib/src/components/chat_image.dart
@@ -7,12 +7,12 @@ import 'package:flutter/material.dart';
 
 class ChatImage extends StatelessWidget {
   const ChatImage({
-    super.key,
-    this.image,
+    required this.image,
     this.size = 40,
+    super.key,
   });
 
-  final String? image;
+  final String image;
   final double size;
 
   @override
@@ -24,11 +24,9 @@ class ChatImage extends StatelessWidget {
         ),
         width: size,
         height: size,
-        child: image == null || image!.isEmpty
-            ? const Center(child: Icon(Icons.person))
-            : CachedNetworkImage(
-                imageUrl: image!,
-                fit: BoxFit.cover,
-              ),
+        child: CachedNetworkImage(
+          imageUrl: image,
+          fit: BoxFit.cover,
+        ),
       );
 }
diff --git a/packages/flutter_community_chat_view/lib/src/components/chat_row.dart b/packages/flutter_community_chat_view/lib/src/components/chat_row.dart
index 9a699cf..5b87f54 100644
--- a/packages/flutter_community_chat_view/lib/src/components/chat_row.dart
+++ b/packages/flutter_community_chat_view/lib/src/components/chat_row.dart
@@ -7,12 +7,14 @@ import 'package:flutter/material.dart';
 class ChatRow extends StatelessWidget {
   const ChatRow({
     required this.title,
+    this.unreadMessages = 0,
     this.lastUsed,
     this.subTitle,
     this.avatar,
     super.key,
   });
   final String title;
+  final int unreadMessages;
   final Widget? avatar;
   final String? subTitle;
   final String? lastUsed;
@@ -35,9 +37,11 @@ class ChatRow extends StatelessWidget {
                     title,
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
-                    style: const TextStyle(
+                    style: TextStyle(
                       fontSize: 18,
-                      fontWeight: FontWeight.w500,
+                      fontWeight: unreadMessages > 0
+                          ? FontWeight.w600
+                          : FontWeight.w400,
                     ),
                   ),
                   if (subTitle != null)
@@ -45,8 +49,11 @@ class ChatRow extends StatelessWidget {
                       padding: const EdgeInsets.only(top: 3.0),
                       child: Text(
                         subTitle!,
-                        style: const TextStyle(
+                        style: TextStyle(
                           fontSize: 16,
+                          fontWeight: unreadMessages > 0
+                              ? FontWeight.w600
+                              : FontWeight.w400,
                         ),
                         overflow: TextOverflow.ellipsis,
                         maxLines: 1,
@@ -56,12 +63,39 @@ class ChatRow extends StatelessWidget {
               ),
             ),
           ),
-          Text(
-            lastUsed ?? '',
-            style: const TextStyle(
-              color: Color(0xFFBBBBBB),
-              fontSize: 14,
-            ),
+          Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
+              Text(
+                lastUsed ?? '',
+                style: const TextStyle(
+                  color: Color(0xFFBBBBBB),
+                  fontSize: 14,
+                ),
+              ),
+              if (unreadMessages > 0) ...[
+                Padding(
+                  padding: const EdgeInsets.only(top: 4.0),
+                  child: Container(
+                    width: 20,
+                    height: 20,
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).colorScheme.primary,
+                      shape: BoxShape.circle,
+                    ),
+                    child: Center(
+                      child: Text(
+                        unreadMessages.toString(),
+                        style: const TextStyle(
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ],
           ),
         ],
       );
diff --git a/packages/flutter_community_chat_view/lib/src/config/chat_options.dart b/packages/flutter_community_chat_view/lib/src/config/chat_options.dart
index f75a928..187132d 100644
--- a/packages/flutter_community_chat_view/lib/src/config/chat_options.dart
+++ b/packages/flutter_community_chat_view/lib/src/config/chat_options.dart
@@ -100,7 +100,7 @@ Widget _createUserAvatar(
   double size,
 ) =>
     ChatImage(
-      image: user.imageUrl,
+      image: user.imageUrl ?? '',
       size: size,
     );
 Widget _createGroupAvatar(
diff --git a/packages/flutter_community_chat_view/lib/src/config/chat_translations.dart b/packages/flutter_community_chat_view/lib/src/config/chat_translations.dart
index 3759912..c353391 100644
--- a/packages/flutter_community_chat_view/lib/src/config/chat_translations.dart
+++ b/packages/flutter_community_chat_view/lib/src/config/chat_translations.dart
@@ -5,6 +5,7 @@
 class ChatTranslations {
   const ChatTranslations({
     this.chatsTitle = 'Chats',
+    this.chatsUnread = 'unread',
     this.newChatButton = 'Start chat',
     this.newChatTitle = 'Start chat',
     this.image = 'Image',
@@ -19,9 +20,11 @@ class ChatTranslations {
     this.deleteChatModalCancel = 'Cancel',
     this.deleteChatModalConfirm = 'Delete',
     this.noUsersFound = 'No users found',
+    this.anonymousUser = 'Anonymous user',
   });
 
   final String chatsTitle;
+  final String chatsUnread;
   final String newChatButton;
   final String newChatTitle;
   final String deleteChatButton;
@@ -35,4 +38,7 @@ class ChatTranslations {
   final String deleteChatModalCancel;
   final String deleteChatModalConfirm;
   final String noUsersFound;
+
+  /// Shown when the user has no name
+  final String anonymousUser;
 }
diff --git a/packages/flutter_community_chat_view/lib/src/screens/chat_detail_screen.dart b/packages/flutter_community_chat_view/lib/src/screens/chat_detail_screen.dart
index 0db1157..7301f1a 100644
--- a/packages/flutter_community_chat_view/lib/src/screens/chat_detail_screen.dart
+++ b/packages/flutter_community_chat_view/lib/src/screens/chat_detail_screen.dart
@@ -50,8 +50,8 @@ class ChatDetailScreen extends StatefulWidget {
 
 class _ChatDetailScreenState extends State<ChatDetailScreen> {
   // stream listener that needs to be disposed later
-  late StreamSubscription<List<ChatMessageModel>>? _chatMessagesSubscription;
-  late Stream<List<ChatMessageModel>>? _chatMessages;
+  StreamSubscription<List<ChatMessageModel>>? _chatMessagesSubscription;
+  Stream<List<ChatMessageModel>>? _chatMessages;
 
   @override
   void initState() {
@@ -67,10 +67,11 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
         widget.onReadChat(widget.chat!);
       }
     });
-    // set the chat to read when opening the screen
-    if (widget.chat != null) {
-      widget.onReadChat(widget.chat!);
-    }
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (widget.chat != null) {
+        widget.onReadChat(widget.chat!);
+      }
+    });
   }
 
   @override
@@ -135,7 +136,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
                                   ? (widget.chat! as PersonalChatModel)
                                           .user
                                           .fullName ??
-                                      ''
+                                      widget.translations.anonymousUser
                                   : '',
                           style: const TextStyle(fontSize: 18),
                         ),
@@ -150,18 +151,31 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           Expanded(
             child: StreamBuilder<List<ChatMessageModel>>(
               stream: _chatMessages,
-              builder: (BuildContext context, snapshot) => ListView(
-                reverse: true,
-                padding: const EdgeInsets.only(top: 24.0),
-                children: [
-                  for (var message
-                      in (snapshot.data ?? widget.chat?.messages ?? [])
-                          .reversed)
+              builder: (BuildContext context, snapshot) {
+                var messages = snapshot.data ?? widget.chat?.messages ?? [];
+                ChatMessageModel? lastMessage;
+                var messageWidgets = <Widget>[];
+
+                for (var message in messages) {
+                  var isFirstMessage = lastMessage == null ||
+                      lastMessage.sender.id != message.sender.id;
+                  messageWidgets.add(
                     ChatDetailRow(
+                      translations: widget.translations,
                       message: message,
+                      isFirstMessage: isFirstMessage,
+                      userAvatarBuilder: widget.options.userAvatarBuilder,
                     ),
-                ],
-              ),
+                  );
+                  lastMessage = message;
+                }
+
+                return ListView(
+                  reverse: true,
+                  padding: const EdgeInsets.only(top: 24.0),
+                  children: messageWidgets.reversed.toList(),
+                );
+              },
             ),
           ),
           if (widget.chat != null)
diff --git a/packages/flutter_community_chat_view/lib/src/screens/chat_screen.dart b/packages/flutter_community_chat_view/lib/src/screens/chat_screen.dart
index 7fdfa29..9174ff9 100644
--- a/packages/flutter_community_chat_view/lib/src/screens/chat_screen.dart
+++ b/packages/flutter_community_chat_view/lib/src/screens/chat_screen.dart
@@ -13,6 +13,7 @@ class ChatScreen extends StatefulWidget {
     required this.onPressStartChat,
     required this.onPressChat,
     required this.onDeleteChat,
+    this.unreadChats,
     this.translations = const ChatTranslations(),
     super.key,
   });
@@ -20,6 +21,7 @@ class ChatScreen extends StatefulWidget {
   final ChatOptions options;
   final ChatTranslations translations;
   final Stream<List<ChatModel>> chats;
+  final Stream<int>? unreadChats;
   final VoidCallback? onPressStartChat;
   final void Function(ChatModel chat) onDeleteChat;
   final void Function(ChatModel chat) onPressChat;
@@ -37,6 +39,27 @@ class _ChatScreenState extends State<ChatScreen> {
     return widget.options.scaffoldBuilder(
       AppBar(
         title: Text(translations.chatsTitle),
+        centerTitle: true,
+        actions: widget.unreadChats != null
+            ? [
+                StreamBuilder<int>(
+                  stream: widget.unreadChats,
+                  builder: (BuildContext context, snapshot) => Align(
+                    alignment: Alignment.centerRight,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 22.0),
+                      child: Text(
+                        '${snapshot.data ?? 0} ${translations.chatsUnread}',
+                        style: const TextStyle(
+                          color: Color(0xFFBBBBBB),
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ]
+            : [],
       ),
       Column(
         children: [
@@ -99,12 +122,15 @@ class _ChatScreenState extends State<ChatScreen> {
                               child: widget.options.chatRowContainerBuilder(
                                 (chat is PersonalChatModel)
                                     ? ChatRow(
+                                        unreadMessages:
+                                            chat.unreadMessages ?? 0,
                                         avatar:
                                             widget.options.userAvatarBuilder(
                                           chat.user,
                                           40.0,
                                         ),
-                                        title: chat.user.fullName ?? '',
+                                        title: chat.user.fullName ??
+                                            translations.anonymousUser,
                                         subTitle: chat.lastMessage != null
                                             ? chat.lastMessage
                                                     is ChatTextMessageModel
@@ -122,6 +148,8 @@ class _ChatScreenState extends State<ChatScreen> {
                                       )
                                     : ChatRow(
                                         title: (chat as GroupChatModel).title,
+                                        unreadMessages:
+                                            chat.unreadMessages ?? 0,
                                         subTitle: chat.lastMessage != null
                                             ? chat.lastMessage
                                                     is ChatTextMessageModel
diff --git a/packages/flutter_community_chat_view/lib/src/screens/new_chat_screen.dart b/packages/flutter_community_chat_view/lib/src/screens/new_chat_screen.dart
index c8772e7..ead3c6c 100644
--- a/packages/flutter_community_chat_view/lib/src/screens/new_chat_screen.dart
+++ b/packages/flutter_community_chat_view/lib/src/screens/new_chat_screen.dart
@@ -90,7 +90,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                           user,
                           40.0,
                         ),
-                        title: user.fullName ?? '',
+                        title:
+                            user.fullName ?? widget.translations.anonymousUser,
                       ),
                     ),
                     onTap: () => widget.onPressCreateChat(user),
diff --git a/packages/flutter_community_chat_view/pubspec.yaml b/packages/flutter_community_chat_view/pubspec.yaml
index e7e690a..3ff8110 100644
--- a/packages/flutter_community_chat_view/pubspec.yaml
+++ b/packages/flutter_community_chat_view/pubspec.yaml
@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_view
 description: A standard flutter package.
-version: 0.3.4
+version: 0.4.0
 
 publish_to: none
 
@@ -20,7 +20,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
   cached_network_image: ^3.2.2
   flutter_image_picker:
     git: