diff --git a/lib/models/contact_model.dart b/lib/models/contact_model.dart
index ae96ec6..3708d69 100644
--- a/lib/models/contact_model.dart
+++ b/lib/models/contact_model.dart
@@ -11,12 +11,12 @@ class FriendSetting {
 }
 
 class GroupChatSetting {
-  String nameRemark = '';
-  String myRemark = '';
+  String groupChatRemark = '';
+  String remarkInGroupChat = '';
 
   GroupChatSetting.fromJson(Map<String, dynamic> json) {
-    nameRemark = json['nameRemark'] ?? '';
-    myRemark = json['myRemark'] ?? '';
+    groupChatRemark = json['groupChatRemark'] ?? '';
+    remarkInGroupChat = json['remarkInGroupChat'] ?? '';
   }
 }
 
@@ -82,7 +82,7 @@ class Contact extends ChangeNotifier {
 
   void addGroupChat(String groupChatId) {
     groupChats[groupChatId] =
-        GroupChatSetting.fromJson({'nameRemark': '', 'myRemark': ''});
+        GroupChatSetting.fromJson({'groupChatRemark': '', 'remarkInGroupChat': ''});
     groupChatCount += 1;
     notifyListeners();
   }
@@ -93,11 +93,11 @@ class Contact extends ChangeNotifier {
     String newValue,
   ) {
     switch (setting) {
-      case 'nameRemark':
-        groupChats[groupChatId]!.nameRemark = newValue;
+      case 'groupChatRemark':
+        groupChats[groupChatId]!.groupChatRemark = newValue;
         break;
-      case 'myRemark':
-        groupChats[groupChatId]!.myRemark = newValue;
+      case 'remarkInGroupChat':
+        groupChats[groupChatId]!.remarkInGroupChat = newValue;
         break;
     }
 
@@ -171,12 +171,12 @@ class GroupChatProfile {
 }
 
 class GroupChatMemberNameAvatar {
-  String remark = '';
+  String remarkInGroupChat = '';
   String nickname = '';
   String avatar = '';
 
   GroupChatMemberNameAvatar.fromJson(Map<String, dynamic> json) {
-    remark = json['remark'] ?? '';
+    remarkInGroupChat = json['remarkInGroupChat'] ?? '';
     nickname = json['nickname'] ?? '';
     avatar = json['avatar'] ?? '';
   }
diff --git a/lib/models/websocket_model.dart b/lib/models/websocket_model.dart
index 3d17564..9f62d63 100644
--- a/lib/models/websocket_model.dart
+++ b/lib/models/websocket_model.dart
@@ -347,6 +347,16 @@ void receiveGroupChatMsg(
   ChatSetting? chatSetting = chatSettingBox.get(groupChatId);
   DateTime dateTime = DateTime.parse(msg['dateTime'] as String);
 
+  getIt.get<ContactAccountProfile>().addGroupChatMemberProfile(
+    groupChatId,
+    msg['senderId'],
+    {
+      'avatar': msg['avatar'],
+      'nickname': msg['nickname'],
+      'remarkInGroupChat': msg['remarkInGroupChat'],
+    },
+  );
+
   if (chatSetting == null) {
     chatSettingBox.put(
       groupChatId,
@@ -393,39 +403,17 @@ void receiveGroupChatMsg(
   late String name;
 
   if (getIt.get<Contact>().friends.containsKey(senderId)) {
-    name = getIt.get<Contact>().friends[senderId]!.friendRemark.isEmpty
-        ? getIt.get<ContactAccountProfile>().friends[senderId]!.nickname
-        : getIt.get<Contact>().friends[senderId]!.friendRemark;
-  } else if (getIt
-      .get<ContactAccountProfile>()
-      .grouChatMemberProfiles
-      .containsKey(groupChatId)) {
-    if (getIt
-        .get<ContactAccountProfile>()
-        .grouChatMemberProfiles[groupChatId]!
-        .containsKey(senderId)) {
-      name = getIt
-              .get<ContactAccountProfile>()
-              .grouChatMemberProfiles[groupChatId]![senderId]!
-              .remark
-              .isEmpty
-          ? getIt
-                  .get<ContactAccountProfile>()
-                  .grouChatMemberProfiles[groupChatId]![senderId]!
-                  .nickname
-                  .isEmpty
-              ? senderId.substring(0, 6)
-              : getIt
-                  .get<ContactAccountProfile>()
-                  .grouChatMemberProfiles[groupChatId]![senderId]!
-                  .nickname
-          : getIt
-              .get<ContactAccountProfile>()
-              .grouChatMemberProfiles[groupChatId]![senderId]!
-              .remark;
+    if (getIt.get<Contact>().friends[senderId]!.friendRemark.isNotEmpty) {
+      name = getIt.get<Contact>().friends[senderId]!.friendRemark;
+    } else if ((msg['remarkInGroupChat'] as String).isNotEmpty) {
+      name = msg['remarkInGroupChat'];
+    } else {
+      name = msg['nickname'];
     }
   } else {
-    name = senderId.substring(0, 6);
+    name = (msg['remarkInGroupChat'] as String).isNotEmpty
+        ? msg['remarkInGroupChat']
+        : msg['nickname'];
   }
 
   String routeName = getIt.get<RouteState>().currentPathName;
diff --git a/lib/notification_api.dart b/lib/notification_api.dart
index 80d3654..1547f5c 100755
--- a/lib/notification_api.dart
+++ b/lib/notification_api.dart
@@ -295,9 +295,9 @@ class NotificationAPI {
       );
     } else {
       String groupChatName =
-          getIt.get<Contact>().groupChats[groupChatId]!.nameRemark.isEmpty
+          getIt.get<Contact>().groupChats[groupChatId]!.groupChatRemark.isEmpty
               ? getIt.get<ContactAccountProfile>().groupChats[groupChatId]!.name
-              : getIt.get<Contact>().groupChats[groupChatId]!.nameRemark;
+              : getIt.get<Contact>().groupChats[groupChatId]!.groupChatRemark;
       messagingStyle = MessagingStyleInformation(
         person,
         messages: messages[groupChatId]!.$2,
diff --git a/lib/router/contact_router.dart b/lib/router/contact_router.dart
index 0e66a01..6761726 100644
--- a/lib/router/contact_router.dart
+++ b/lib/router/contact_router.dart
@@ -187,7 +187,7 @@ final contactRouter = GoRoute(
           builder: (context, state) {
             return ChangeGroupChatRemarkScreen(
               groupChatId: state.queryParameters['groupChatId']!,
-              nameRemark: state.queryParameters['nameRemark']!,
+              nameRemark: state.queryParameters['groupChatRemark']!,
             );
           },
         ),
@@ -198,7 +198,7 @@ final contactRouter = GoRoute(
           builder: (context, state) {
             return ChangeMyRemarkScreen(
               groupChatId: state.queryParameters['groupChatId']!,
-              myRemark: state.queryParameters['myRemark']!,
+              myRemark: state.queryParameters['remarkInGroupChat']!,
             );
           },
         ),
diff --git a/lib/screens/chat/components/group_chat_chat_tile.dart b/lib/screens/chat/components/group_chat_chat_tile.dart
index aefcfe8..f41fd33 100755
--- a/lib/screens/chat/components/group_chat_chat_tile.dart
+++ b/lib/screens/chat/components/group_chat_chat_tile.dart
@@ -38,14 +38,14 @@ class GroupChatChatTile extends StatefulWidget {
 class _GroupChatChatTileState extends State<GroupChatChatTile> {
   @override
   Widget build(BuildContext context) {
+    Box<ChatSetting> chatSettingBox = Hive.box('chat_setting');
+    ChatSetting chatSetting = chatSettingBox.getAt(widget.index)!;
     return Slidable(
       key: const ValueKey(0),
       endActionPane: ActionPane(
         motion: const BehindMotion(),
         dismissible: DismissiblePane(
           onDismissed: () {
-            Box<ChatSetting> chatSettingBox = Hive.box('chat_setting');
-            ChatSetting chatSetting = chatSettingBox.getAt(widget.index)!;
             chatSetting.isOpen = false;
             chatSettingBox.put(widget.contactId, chatSetting);
           },
@@ -59,11 +59,14 @@ class _GroupChatChatTileState extends State<GroupChatChatTile> {
             label: '置顶',
           ),
           SlidableAction(
-            onPressed: (BuildContext context) {},
+            onPressed: (BuildContext context) {
+              chatSetting.isHideMsg = !chatSetting.isHideMsg;
+              chatSettingBox.put(widget.contactId, chatSetting);
+            },
             foregroundColor: kContentColorDark,
             backgroundColor: kPrimaryColor,
             icon: Icons.remove_red_eye,
-            label: '隐藏消息',
+            label: chatSetting.isHideMsg ? '显示消息' : '隐藏消息',
             flex: 1,
           ),
         ],
@@ -102,7 +105,7 @@ class _GroupChatChatTileState extends State<GroupChatChatTile> {
                 getIt
                         .get<Contact>()
                         .groupChats[widget.contactId]!
-                        .nameRemark
+                        .groupChatRemark
                         .isEmpty
                     ? getIt
                         .get<ContactAccountProfile>()
@@ -111,7 +114,7 @@ class _GroupChatChatTileState extends State<GroupChatChatTile> {
                     : getIt
                         .get<Contact>()
                         .groupChats[widget.contactId]!
-                        .nameRemark,
+                        .groupChatRemark,
                 overflow: TextOverflow.ellipsis,
               ),
             ),
diff --git a/lib/screens/contact/components/group_chat_tile.dart b/lib/screens/contact/components/group_chat_tile.dart
index 605e6f7..f33b296 100755
--- a/lib/screens/contact/components/group_chat_tile.dart
+++ b/lib/screens/contact/components/group_chat_tile.dart
@@ -39,9 +39,16 @@ class GroupChatTile extends StatelessWidget {
               width: 10.0,
             ),
             Text(
-              getIt.get<Contact>().groupChats[groupChatId]!.nameRemark.isEmpty
+              getIt
+                      .get<Contact>()
+                      .groupChats[groupChatId]!
+                      .groupChatRemark
+                      .isEmpty
                   ? getIt<ContactAccountProfile>().groupChats[groupChatId]!.name
-                  : getIt.get<Contact>().groupChats[groupChatId]!.nameRemark,
+                  : getIt
+                      .get<Contact>()
+                      .groupChats[groupChatId]!
+                      .groupChatRemark,
               overflow: TextOverflow.ellipsis,
               style: const TextStyle(fontSize: 17),
             ),
diff --git a/lib/screens/group_chat_profile/change_group_chat_screen/change_group_chat_remark_screen.dart b/lib/screens/group_chat_profile/change_group_chat_screen/change_group_chat_remark_screen.dart
index 167a806..32cd751 100644
--- a/lib/screens/group_chat_profile/change_group_chat_screen/change_group_chat_remark_screen.dart
+++ b/lib/screens/group_chat_profile/change_group_chat_screen/change_group_chat_remark_screen.dart
@@ -106,7 +106,7 @@ class _ChangeGroupChatRemarkScreenState
                   ).show(context);
 
                   getIt.get<Contact>().changeGroupChatSetting(
-                        'nameRemark',
+                        'groupChatRemark',
                         widget.groupChatId,
                         _controller.text,
                       );
diff --git a/lib/screens/group_chat_profile/change_group_chat_screen/change_my_remark_screen.dart b/lib/screens/group_chat_profile/change_group_chat_screen/change_my_remark_screen.dart
index 6a6adce..c598a59 100644
--- a/lib/screens/group_chat_profile/change_group_chat_screen/change_my_remark_screen.dart
+++ b/lib/screens/group_chat_profile/change_group_chat_screen/change_my_remark_screen.dart
@@ -104,7 +104,7 @@ class _ChangeMyRemarkScreenState extends State<ChangeMyRemarkScreen> {
                   ).show(context);
 
                   getIt.get<Contact>().changeGroupChatSetting(
-                        'myRemark',
+                        'remarkInGroupChat',
                         widget.groupChatId,
                         _controller.text,
                       );
diff --git a/lib/screens/group_chat_profile/group_chat_profile_screen.dart b/lib/screens/group_chat_profile/group_chat_profile_screen.dart
index c20f2de..f16c9ae 100755
--- a/lib/screens/group_chat_profile/group_chat_profile_screen.dart
+++ b/lib/screens/group_chat_profile/group_chat_profile_screen.dart
@@ -82,7 +82,7 @@ class _GroupChatProfileScreenState extends State<GroupChatProfileScreen> {
                     getIt
                             .get<Contact>()
                             .groupChats[widget.groupChatId]!
-                            .nameRemark
+                            .groupChatRemark
                             .isEmpty
                         ? getIt
                             .get<ContactAccountProfile>()
@@ -91,7 +91,7 @@ class _GroupChatProfileScreenState extends State<GroupChatProfileScreen> {
                         : getIt
                             .get<Contact>()
                             .groupChats[widget.groupChatId]!
-                            .nameRemark,
+                            .groupChatRemark,
                     style: const TextStyle(fontSize: 18),
                   ),
                   subtitle: Text(widget.groupChatId),
@@ -206,10 +206,10 @@ class _GroupChatProfileScreenState extends State<GroupChatProfileScreen> {
                 onTap: () {
                   final query = {
                     'groupChatId': widget.groupChatId,
-                    'myRemark': getIt
+                    'remarkInGroupChat': getIt
                         .get<Contact>()
                         .groupChats[widget.groupChatId]!
-                        .myRemark,
+                        .remarkInGroupChat,
                   };
                   context.pushNamed(
                     'ChangeMyRemark',
@@ -220,16 +220,16 @@ class _GroupChatProfileScreenState extends State<GroupChatProfileScreen> {
                 info: getIt
                     .get<Contact>()
                     .groupChats[widget.groupChatId]!
-                    .myRemark,
+                    .remarkInGroupChat,
               ),
               GroupChatProfileTile(
                 onTap: () {
                   final query = {
                     'groupChatId': widget.groupChatId,
-                    'nameRemark': getIt
+                    'groupChatRemark': getIt
                         .get<Contact>()
                         .groupChats[widget.groupChatId]!
-                        .nameRemark,
+                        .groupChatRemark,
                   };
                   context.pushNamed(
                     'ChangeGroupChatRemark',
@@ -240,7 +240,7 @@ class _GroupChatProfileScreenState extends State<GroupChatProfileScreen> {
                 info: getIt
                     .get<Contact>()
                     .groupChats[widget.groupChatId]!
-                    .nameRemark,
+                    .groupChatRemark,
               ),
               const GroupChatProfileHeader(
                 header: '聊天记录',
diff --git a/lib/screens/message/components/group_chat_message_bubble.dart b/lib/screens/message/components/group_chat_message_bubble.dart
index a486a6b..316fbd2 100755
--- a/lib/screens/message/components/group_chat_message_bubble.dart
+++ b/lib/screens/message/components/group_chat_message_bubble.dart
@@ -10,7 +10,6 @@ import 'package:together_mobile/database/box_type.dart';
 import 'package:together_mobile/models/contact_model.dart';
 import 'package:together_mobile/models/init_get_it.dart';
 import 'package:together_mobile/models/user_model.dart';
-import 'package:together_mobile/request/group_chat.dart';
 import 'package:together_mobile/request/server.dart';
 
 class GroupChatMessageBubble extends StatefulWidget {
@@ -42,44 +41,44 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
   final List<Timer> _timerList = [];
   late bool _isHideMsg;
 
-  Future<bool> _getMemberGroupChatProfile() async {
-    if (widget.senderId == getIt.get<UserAccount>().id) {
-      // myself or already have profile
-      return Future(() => true);
-    }
-    if (getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles
-            .containsKey(widget.contactId) &&
-        getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles[widget.contactId]!
-            .containsKey(widget.senderId)) {
-      return Future(() => true);
-    } else {
-      Map<String, dynamic> res;
-      if (getIt.get<Contact>().friends.containsKey(widget.senderId)) {
-        // my friend
-        res = await getGroupChatMemberNameAvatar(
-          widget.contactId,
-          widget.senderId,
-          true,
-        );
-      } else {
-        res = await getGroupChatMemberNameAvatar(
-          widget.contactId,
-          widget.senderId,
-          false,
-        );
-      }
-      getIt.get<ContactAccountProfile>().addGroupChatMemberProfile(
-            widget.contactId,
-            widget.senderId,
-            res['data'],
-          );
-      return Future(() => true);
-    }
-  }
+  // Future<bool> _getMemberGroupChatProfile() async {
+  //   if (widget.senderId == getIt.get<UserAccount>().id) {
+  //     // myself or already have profile
+  //     return Future(() => true);
+  //   }
+  //   if (getIt
+  //           .get<ContactAccountProfile>()
+  //           .grouChatMemberProfiles
+  //           .containsKey(widget.contactId) &&
+  //       getIt
+  //           .get<ContactAccountProfile>()
+  //           .grouChatMemberProfiles[widget.contactId]!
+  //           .containsKey(widget.senderId)) {
+  //     return Future(() => true);
+  //   } else {
+  //     Map<String, dynamic> res;
+  //     if (getIt.get<Contact>().friends.containsKey(widget.senderId)) {
+  //       // my friend
+  //       res = await getGroupChatMemberNameAvatar(
+  //         widget.contactId,
+  //         widget.senderId,
+  //         true,
+  //       );
+  //     } else {
+  //       res = await getGroupChatMemberNameAvatar(
+  //         widget.contactId,
+  //         widget.senderId,
+  //         false,
+  //       );
+  //     }
+  //     getIt.get<ContactAccountProfile>().addGroupChatMemberProfile(
+  //           widget.contactId,
+  //           widget.senderId,
+  //           res['data'],
+  //         );
+  //     return Future(() => true);
+  //   }
+  // }
 
   @override
   void initState() {
@@ -128,15 +127,19 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
 
   @override
   void dispose() {
-    super.dispose();
     for (var element in _timerList) {
       element.cancel();
     }
+
+    super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    bool isFriend = getIt.get<Contact>().friends.containsKey(widget.senderId);
+    bool isOther = widget.senderId != getIt.get<UserAccount>().id;
+    // Because myself is also in `friends` map
+    bool isFriend =
+        getIt.get<Contact>().friends.containsKey(widget.senderId) && isOther;
 
     return Container(
       padding: const EdgeInsets.symmetric(
@@ -157,57 +160,20 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
               ),
             ),
           Row(
-            textDirection: widget.senderId != getIt.get<UserAccount>().id
-                ? TextDirection.ltr
-                : TextDirection.rtl,
+            textDirection: isOther ? TextDirection.ltr : TextDirection.rtl,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              widget.senderId != getIt.get<UserAccount>().id
-                  ? FutureBuilder(
-                      future: _getMemberGroupChatProfile(),
-                      builder: (context, snapshot) {
-                        return _showAvatar(snapshot, isFriend);
-                      },
-                    )
-                  : getIt.get<UserProfile>().avatar.isNotEmpty
-                      ? CircleAvatar(
-                          backgroundImage: CachedNetworkImageProvider(
-                            '$userAvatarsUrl/${getIt.get<UserProfile>().avatar}',
-                          ),
-                        )
-                      : const CircleAvatar(
-                          backgroundImage:
-                              AssetImage('assets/images/user_4.png'),
-                        ),
+              _showAvatar(isOther),
               const SizedBox(
                 width: 10,
               ),
               Expanded(
                 child: Column(
-                  crossAxisAlignment:
-                      widget.senderId != getIt.get<UserAccount>().id
-                          ? CrossAxisAlignment.start
-                          : CrossAxisAlignment.end,
+                  crossAxisAlignment: isOther
+                      ? CrossAxisAlignment.start
+                      : CrossAxisAlignment.end,
                   children: [
-                    widget.senderId == getIt.get<UserAccount>().id
-                        ? getIt
-                                .get<Contact>()
-                                .groupChats[widget.contactId]!
-                                .myRemark
-                                .isEmpty
-                            ? Text(getIt.get<UserProfile>().nickname)
-                            : Text(
-                                getIt
-                                    .get<Contact>()
-                                    .groupChats[widget.contactId]!
-                                    .myRemark,
-                              )
-                        : FutureBuilder(
-                            future: _getMemberGroupChatProfile(),
-                            builder: (context, snapshot) {
-                              return _showName(snapshot, isFriend);
-                            },
-                          ),
+                    _showName(isOther, isFriend),
                     const SizedBox(
                       height: 5,
                     ),
@@ -224,8 +190,10 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
+                            if (_isHideMsg) const Text('消息已隐藏'),
+
                             // text message content
-                            if (widget.text.isNotEmpty)
+                            if (widget.text.isNotEmpty && !_isHideMsg)
                               Text(
                                 widget.text,
                                 textWidthBasis: TextWidthBasis.longestLine,
@@ -234,7 +202,7 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
                               height: 10,
                             ),
                             // image content if have
-                            if (widget.attachments.isNotEmpty)
+                            if (widget.attachments.isNotEmpty && !_isHideMsg)
                               ...List.generate(
                                 widget.attachments.length,
                                 (int index) {
@@ -287,190 +255,79 @@ class _GroupChatMessageBubbleState extends State<GroupChatMessageBubble> {
     );
   }
 
-  CircleAvatar _showAvatar(AsyncSnapshot snapshot, bool isFriend) {
-    if (snapshot.hasData) {
-      if (isFriend) {
-        String avatar =
-            getIt.get<ContactAccountProfile>().friends[widget.senderId]!.avatar;
-        return avatar.isEmpty
-            ? CircleAvatar(
-                child: Image.asset('assets/images/user_4.png'),
-              )
-            : CircleAvatar(
-                backgroundImage: CachedNetworkImageProvider(
-                  '$userAvatarsUrl/$avatar',
-                ),
-              );
-      } else {
-        String avatar = getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-            .avatar;
-        return avatar.isEmpty
-            ? CircleAvatar(
-                child: Image.asset('assets/images/user_4.png'),
-              )
-            : CircleAvatar(
-                backgroundImage: CachedNetworkImageProvider(
-                  '$userAvatarsUrl/$avatar',
-                ),
-              );
-      }
-    } else {
-      // fix the bug that when the future return, the avatar will flash
-      if (isFriend) {
-        String avatar =
-            getIt.get<ContactAccountProfile>().friends[widget.senderId]!.avatar;
-        return avatar.isEmpty
-            ? CircleAvatar(
-                child: Image.asset('assets/images/user_4.png'),
-              )
-            : CircleAvatar(
-                backgroundImage: CachedNetworkImageProvider(
-                  '$userAvatarsUrl/$avatar',
-                ),
-              );
-      } else {
-        if (getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles
-            .containsKey(widget.contactId)) {
-          if (getIt
-              .get<ContactAccountProfile>()
-              .grouChatMemberProfiles[widget.contactId]!
-              .containsKey(widget.senderId)) {
-            String avatar = getIt
-                .get<ContactAccountProfile>()
-                .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-                .avatar;
-            return avatar.isNotEmpty
-                ? CircleAvatar(
-                    backgroundImage: CachedNetworkImageProvider(
-                      '$userAvatarsUrl/$avatar',
-                    ),
-                  )
-                : const CircleAvatar(
-                    backgroundImage: AssetImage(
-                      'assets/images/user_4.png',
-                    ),
-                  );
-          } else {
-            return const CircleAvatar(
-              backgroundImage: AssetImage(
-                'assets/images/user_4.png',
+  CircleAvatar _showAvatar(bool isOther) {
+    if (isOther) {
+      print(isOther);
+      String avatar = getIt
+          .get<ContactAccountProfile>()
+          .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
+          .avatar;
+      return avatar.isEmpty
+          ? CircleAvatar(
+              child: Image.asset('assets/images/user_4.png'),
+            )
+          : CircleAvatar(
+              backgroundImage: CachedNetworkImageProvider(
+                '$userAvatarsUrl/$avatar',
+              ),
+            );
+    } else {
+      String avatar = getIt.get<UserProfile>().avatar;
+      return avatar.isEmpty
+          ? CircleAvatar(
+              child: Image.asset('assets/images/user_4.png'),
+            )
+          : CircleAvatar(
+              backgroundImage: CachedNetworkImageProvider(
+                '$userAvatarsUrl/$avatar',
               ),
             );
-          }
-        } else {
-          return const CircleAvatar(
-            backgroundImage: AssetImage(
-              'assets/images/user_4.png',
-            ),
-          );
-        }
-      }
     }
   }
 
-  Text _showName(AsyncSnapshot snapshot, bool isFriend) {
-    if (snapshot.hasData) {
-      if (isFriend) {
-        String friendRemark =
-            getIt.get<Contact>().friends[widget.senderId]!.friendRemark;
-        String remarkInGroupChat = getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-            .remark;
+  Text _showName(bool isOther, bool isFriend) {
+    if (isFriend) {
+      String friendRemark =
+          getIt.get<Contact>().friends[widget.senderId]!.friendRemark;
 
-        return friendRemark.isEmpty
-            ? remarkInGroupChat.isEmpty
-                ? Text(
-                    getIt
-                        .get<ContactAccountProfile>()
-                        .friends[widget.senderId]!
-                        .nickname,
-                  )
-                : Text(remarkInGroupChat)
-            : Text(friendRemark);
+      if (friendRemark.isNotEmpty) {
+        return Text(friendRemark);
+      }
+
+      String remarkInGroupChat = getIt
+          .get<ContactAccountProfile>()
+          .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
+          .remarkInGroupChat;
+
+      if (remarkInGroupChat.isNotEmpty) {
+        return Text(remarkInGroupChat);
       } else {
-        String remarkInGroupChat = getIt
+        return Text(remarkInGroupChat = getIt
             .get<ContactAccountProfile>()
             .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-            .remark;
+            .nickname);
+      }
+    } else if (isOther) {
+      String remarkInGroupChat = getIt
+          .get<ContactAccountProfile>()
+          .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
+          .remarkInGroupChat;
 
-        return remarkInGroupChat.isEmpty
-            ? Text(
-                getIt
-                    .get<ContactAccountProfile>()
-                    .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-                    .nickname,
-              )
-            : Text(remarkInGroupChat);
+      if (remarkInGroupChat.isNotEmpty) {
+        return Text(remarkInGroupChat);
+      } else {
+        return Text(remarkInGroupChat = getIt
+            .get<ContactAccountProfile>()
+            .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
+            .nickname);
       }
     } else {
-      // fix the bug that when the future return, the name will flash
-      if (isFriend) {
-        String friendRemark =
-            getIt.get<Contact>().friends[widget.senderId]!.friendRemark;
+      String remarkInGroupChat =
+          getIt.get<Contact>().groupChats[widget.contactId]!.remarkInGroupChat;
 
-        if (friendRemark.isNotEmpty) {
-          return Text(friendRemark);
-        } else {
-          if (getIt
-                  .get<ContactAccountProfile>()
-                  .grouChatMemberProfiles
-                  .containsKey(widget.contactId) &&
-              getIt
-                  .get<ContactAccountProfile>()
-                  .grouChatMemberProfiles[widget.contactId]!
-                  .containsKey(widget.senderId)) {
-            String remarkInGroupChat = getIt
-                .get<ContactAccountProfile>()
-                .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-                .remark;
-            String nickname = getIt
-                .get<ContactAccountProfile>()
-                .friends[widget.senderId]!
-                .nickname;
-
-            return remarkInGroupChat.isEmpty
-                ? Text(nickname)
-                : Text(remarkInGroupChat);
-          } else {
-            return Text(widget.senderId.substring(0, 5));
-          }
-        }
-      } else {
-        if (getIt
-            .get<ContactAccountProfile>()
-            .grouChatMemberProfiles
-            .containsKey(widget.contactId)) {
-          if (getIt
-              .get<ContactAccountProfile>()
-              .grouChatMemberProfiles[widget.contactId]!
-              .containsKey(widget.senderId)) {
-            String remarkInGroupChat = getIt
-                .get<ContactAccountProfile>()
-                .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-                .remark;
-            String nickname = getIt
-                .get<ContactAccountProfile>()
-                .grouChatMemberProfiles[widget.contactId]![widget.senderId]!
-                .nickname;
-            return remarkInGroupChat.isNotEmpty
-                ? Text(remarkInGroupChat)
-                : Text(nickname);
-          } else {
-            return Text(
-              widget.senderId.substring(0, 5),
-            );
-          }
-        } else {
-          return Text(
-            widget.senderId.substring(0, 5),
-          );
-        }
-      }
+      return remarkInGroupChat.isNotEmpty
+          ? Text(remarkInGroupChat)
+          : Text(getIt.get<UserProfile>().nickname);
     }
   }
 }
diff --git a/lib/screens/message/components/message_input_box.dart b/lib/screens/message/components/message_input_box.dart
index db679ea..cd71599 100755
--- a/lib/screens/message/components/message_input_box.dart
+++ b/lib/screens/message/components/message_input_box.dart
@@ -272,22 +272,9 @@ class _MessageInputBoxState extends State<MessageInputBox> {
       'isShowTime': isShowTime,
     };
 
-    final msg2 = {
-      'type': 'text/multipart',
-      'msgId': msgId,
-      'senderId': senderId,
-      'text': text,
-      'attachments': attachments,
-      'dateTime': now.toString(),
-      'isShowTime': isShowTime,
-    };
-
     if (widget.chatType == 0) {
       msg['event'] = 'friend-chat-msg';
       msg['receiverId'] = widget.contactId;
-      msg2['event'] = 'friend-chat-msg';
-      msg2['receiverId'] = getIt.get<UserAccount>().id;
-      // getIt.get<WebSocketManager>().channel.sink.add(json.encode(msg2));
       getIt.get<WebSocketManager>().channel.sink.add(json.encode(msg));
       if (attachments.isNotEmpty) {
         String baseImageDir = getIt.get<UserProfile>().baseImageDir;
@@ -305,22 +292,6 @@ class _MessageInputBoxState extends State<MessageInputBox> {
         for (final data in encodedDatas) {
           getIt.get<WebSocketManager>().channel.sink.add(data);
         }
-        // for (var i = 0; i < attachments.length; i++) {
-        //   Uint8List bytes = await _imageFileList[i].readAsBytes();
-        //   File file = File('$baseImageDir/${attachments[i]}');
-        //   file.createSync(recursive: true);
-        //   file.writeAsBytes(bytes);
-        //   getIt.get<WebSocketManager>().channel.sink.add(
-        //         json.encode(
-        //           {
-        //             'event': 'friend-chat-image',
-        //             'receiverId': widget.contactId,
-        //             'filename': attachments[i],
-        //             'bytes': bytes,
-        //           },
-        //         ),
-        //       );
-        // }
       }
     } else {
       String baseImageDir = getIt.get<UserProfile>().baseImageDir;
@@ -332,6 +303,10 @@ class _MessageInputBoxState extends State<MessageInputBox> {
       msg['event'] = 'group-chat-msg';
       msg['groupChatId'] = widget.contactId;
       msg['receiverIds'] = receiverIds;
+      msg['nickname'] = getIt.get<UserProfile>().nickname;
+      msg['remarkInGroupChat'] =
+          getIt.get<Contact>().groupChats[widget.contactId]!.remarkInGroupChat;
+      msg['avatar'] = getIt.get<UserProfile>().avatar;
       getIt.get<WebSocketManager>().channel.sink.add(json.encode(msg));
       if (attachments.isNotEmpty) {
         List<String> encodedDatas = await compute(
@@ -348,24 +323,6 @@ class _MessageInputBoxState extends State<MessageInputBox> {
         for (final data in encodedDatas) {
           getIt.get<WebSocketManager>().channel.sink.add(data);
         }
-        // String baseImageDir = getIt.get<UserProfile>().baseImageDir;
-        // for (var i = 0; i < attachments.length; i++) {
-        //   Uint8List bytes = await _imageFileList[i].readAsBytes();
-        //   File file = File('$baseImageDir/${attachments[i]}');
-        //   file.createSync(recursive: true);
-        //   file.writeAsBytes(bytes);
-        //   getIt.get<WebSocketManager>().channel.sink.add(
-        //         json.encode(
-        //           {
-        //             'event': 'group-chat-image',
-        //             'groupChatId': widget.contactId,
-        //             'receiverIds': receiverIds,
-        //             'filename': attachments[i],
-        //             'bytes': bytes,
-        //           },
-        //         ),
-        //       );
-        // }
       }
     }
 
diff --git a/lib/screens/message/group_chat_message_screen.dart b/lib/screens/message/group_chat_message_screen.dart
index 73ee02b..7ac015e 100755
--- a/lib/screens/message/group_chat_message_screen.dart
+++ b/lib/screens/message/group_chat_message_screen.dart
@@ -57,7 +57,7 @@ class _GroupChatMessageScreenState extends State<GroupChatMessageScreen> {
         title: getIt
                 .get<Contact>()
                 .groupChats[widget.groupChatId]!
-                .nameRemark
+                .groupChatRemark
                 .isEmpty
             ? Text(
                 getIt
@@ -66,7 +66,10 @@ class _GroupChatMessageScreenState extends State<GroupChatMessageScreen> {
                     .name,
               )
             : Text(
-                getIt.get<Contact>().groupChats[widget.groupChatId]!.nameRemark,
+                getIt
+                    .get<Contact>()
+                    .groupChats[widget.groupChatId]!
+                    .groupChatRemark,
               ),
         centerTitle: true,
         actions: [