diff --git a/packages/stream_chat/CHANGELOG.md b/packages/stream_chat/CHANGELOG.md
index 4b5d3f383..6ada6131f 100644
--- a/packages/stream_chat/CHANGELOG.md
+++ b/packages/stream_chat/CHANGELOG.md
@@ -1,3 +1,10 @@
+## Upcoming
+
+🐞 Fixed
+
+- Fixed user's ID from being inadvertently used as their display name during the WebSocket
+  connection process. [[#2447]](https://github.com/GetStream/stream-chat-flutter/issues/2447)
+
 ## 9.20.0
 
 ✅ Added
diff --git a/packages/stream_chat/lib/src/ws/connect_user_details.dart b/packages/stream_chat/lib/src/ws/connect_user_details.dart
index 91ce19ce8..3a4e9764e 100644
--- a/packages/stream_chat/lib/src/ws/connect_user_details.dart
+++ b/packages/stream_chat/lib/src/ws/connect_user_details.dart
@@ -1,6 +1,7 @@
 import 'package:json_annotation/json_annotation.dart';
 import 'package:stream_chat/src/core/models/own_user.dart';
 import 'package:stream_chat/src/core/models/privacy_settings.dart';
+import 'package:stream_chat/src/core/util/extension.dart';
 import 'package:stream_chat/src/core/util/serializer.dart';
 
 part 'connect_user_details.g.dart';
@@ -35,7 +36,8 @@ class ConnectUserDetails {
   factory ConnectUserDetails.fromOwnUser(OwnUser user) {
     return ConnectUserDetails(
       id: user.id,
-      name: user.name,
+      // Using extraData value in order to not use id as name.
+      name: user.extraData['name'].safeCast<String>(),
       image: user.image,
       language: user.language,
       invisible: user.invisible,
diff --git a/packages/stream_chat_flutter/lib/src/attachment/thumbnail/image_attachment_thumbnail.dart b/packages/stream_chat_flutter/lib/src/attachment/thumbnail/image_attachment_thumbnail.dart
index 069fbe203..55474beae 100644
--- a/packages/stream_chat_flutter/lib/src/attachment/thumbnail/image_attachment_thumbnail.dart
+++ b/packages/stream_chat_flutter/lib/src/attachment/thumbnail/image_attachment_thumbnail.dart
@@ -90,7 +90,8 @@ class StreamImageAttachmentThumbnail extends StatelessWidget {
 
         // If the remote image URL is available, we can directly show it using
         // the _RemoteImageAttachment widget.
-        if (image.thumbUrl ?? image.imageUrl case final imageUrl?) {
+        final imageUrl = image.thumbUrl ?? image.imageUrl ?? image.assetUrl;
+        if (imageUrl case final imageUrl?) {
           var resizedImageUrl = imageUrl;
           if (effectiveThumbnailSize case final thumbnailSize?) {
             resizedImageUrl = imageUrl.getResizedImageUrl(