diff --git a/src/views/ChatRoom/Body/Body.js b/src/views/ChatRoom/Body/Body.js
index 195b90b..257e4c3 100644
--- a/src/views/ChatRoom/Body/Body.js
+++ b/src/views/ChatRoom/Body/Body.js
@@ -24,12 +24,12 @@ class Body extends Component {
       video: null,
       music: null,
       document: null,
-      footer: 'normal',
+      footer: 'suggest',
       suggest: [
-        { id: 0, text: 'سلام' },
-        { id: 1, text: 'وقت بخیر' },
-        { id: 2, text: 'لطفا بامن تماس بگیر' },
-        { id: 3, text: 'متشکرم' },
+        [{ id: 0, text: 'سلام' }],
+        [{ id: 1, text: 'وقت بخیر' }],
+        [{ id: 2, text: 'لطفا بامن تماس بگیر' }],
+        [{ id: 3, text: 'متشکرم' }],
       ],
     };
   }
@@ -340,11 +340,16 @@ class Body extends Component {
     let chatroom = document.getElementById('chatroom');
     chatroom.scrollTop = chatroom.scrollHeight + 40;
   }
+  randomColor() {
+    let hex = Math.floor(Math.random() * 0x999999);
+    let color = '#' + hex.toString(16);
 
+    return color;
+  }
   render() {
     const { setPage, chatInfo, messageList, userId } = this.props;
     const userIdx = {};
-    chatInfo.users.map((e) => (userIdx[e.id] = e));
+    chatInfo.users.map((e) => (userIdx[e.id] = { ...e, color: this.randomColor() }));
     console.log({ userId });
     return (
       <div className="chat-body d-flex flex-column">
diff --git a/src/views/ChatRoom/Body/Body.scss b/src/views/ChatRoom/Body/Body.scss
index 9e536c5..3b90810 100644
--- a/src/views/ChatRoom/Body/Body.scss
+++ b/src/views/ChatRoom/Body/Body.scss
@@ -1,4 +1,16 @@
 @media screen and (max-width: 4500px) {
+  .chat-body .MuiAvatar-circle {
+    box-shadow: 0px 0px 0px 2px #fff;
+    border: 3px solid #ffffff66;
+    width: 60px;
+    height: 60px;
+    top: 20px;
+    z-index: 30;
+    font-family: 'IRANSansNumeralBold';
+    & div {
+      font-family: 'IRANSansNumeralBold';
+    }
+  }
   .chat-body {
     background-color: rgb(210, 196, 214);
     justify-content: flex-start;
diff --git a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
index 01d801d..449605b 100644
--- a/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
+++ b/src/views/ChatRoom/Body/ChatSuggest/ChatSuggest.js
@@ -1,31 +1,30 @@
 import React, { Component } from 'react';
 import Carousel from 'react-elastic-carousel';
 import './ChatSuggest.scss';
-export default class ChatSuggest extends Component {
-  render() {
-    const { suggest } = this.props;
-    return (
-      <div className="chat-suggest portrait-slider d-flex flex-column">
-        <Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
-          {suggest.map((row, i) => (
-            <Row row={row} key={i} />
-          ))}
-        </Carousel>
-      </div>
-    );
-  }
+export default function suggetbar({ suggest }) {
+  return (
+    <div className="chat-suggest portrait-slider d-flex flex-column">
+      <Carousel itemsToShow={1} isRTL={true} enableTilt={true} showArrows={false}>
+        {suggest.map((row, i) => (
+          <Row row={row} key={i} />
+        ))}
+      </Carousel>
+    </div>
+  );
 }
 
-const Row = (row) => {
+const Row = ({ row }) => {
   return (
     <div className="chat-suggest__row d-flex">
-      {row.map((item, i) => (
+      <Suggest item={row[0]} />
+      {/* {row.map((item, i) => (
         <Suggest item={item} key={i} />
-      ))}
+      ))} */}
     </div>
   );
 };
 
 const Suggest = (item) => {
+  console.log(item.text);
   return <div className="chat-suggest__row--item d-flex">{item.text}</div>;
 };
diff --git a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
index 244c0a9..c422318 100644
--- a/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
+++ b/src/views/ChatRoom/Body/Message/DraggableMessage/DraggableMessage.js
@@ -2,6 +2,7 @@ import React, { Component, useEffect } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import Avatar from '@material-ui/core/Avatar';
 
 export default class DraggableMessage extends Component {
   state = {
@@ -24,11 +25,23 @@ export default class DraggableMessage extends Component {
           marginLeft: isSelf ? 40 : 0,
         }}
       >
-        <img
+        <Avatar
+          alt={user.name}
+          src={window.baseURL + '/file/download/' + user.fileId}
+          className=""
+          style={{ backgroundColor: user.color }}
+        >
+          {user.name
+            .split(' ')
+            .map((e) => e.slice(0, 1))
+            .join(' ')}
+        </Avatar>
+
+        {/* <img
           src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
-        />
+        /> */}
         <div className="message-2d__text d-flex">
           {message.text !== null ? (
             <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
diff --git a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
index 3c28d79..b50f3b6 100644
--- a/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
+++ b/src/views/ChatRoom/Body/Message/Message2D/Message2D.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Avatar from '@material-ui/core/Avatar';
 
 import './Message2D.scss';
 
@@ -13,11 +14,22 @@ export default class Message2D extends Component {
           marginLeft: isSelf ? 40 : 0,
         }}
       >
-        <img
+        <Avatar
+          alt={user.name}
+          src={window.baseURL + '/file/download/' + user.fileId}
+          className=""
+          style={{ backgroundColor: user.color }}
+        >
+          {user.name
+            .split(' ')
+            .map((e) => e.slice(0, 1))
+            .join(' ')}
+        </Avatar>
+        {/* <img
           src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
-        />
+        /> */}
         <div className="message-2d__text d-flex">
           {message.text !== null ? (
             <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
diff --git a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
index 2ce8fcb..e8d0c92 100644
--- a/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
+++ b/src/views/ChatRoom/Body/Message/NormalMessage/NormalMessage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactAudioPlayer from 'react-audio-player';
 import ReactPlayer from 'react-player';
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
+import Avatar from '@material-ui/core/Avatar';
 
 import './NormalMessage.scss';
 
@@ -17,11 +18,22 @@ export default class NormalMessage extends Component {
           filter: document !== null ? 'blur(16px)' : 'blur(0px)',
         }}
       >
-        <img
+        <Avatar
+          alt={user.name}
+          src={window.baseURL + '/file/download/' + user.fileId}
+          className=""
+          style={{ backgroundColor: user.color }}
+        >
+          {user.name
+            .split(' ')
+            .map((e) => e.slice(0, 1))
+            .join(' ')}
+        </Avatar>
+        {/* <img
           src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
-        />
+        /> */}
         <div
           className={
             message.voice === null &&
diff --git a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
index fd21558..8fc11ad 100644
--- a/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
+++ b/src/views/ChatRoom/Body/Message/RadioMessage/RadioMessage.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import Avatar from '@material-ui/core/Avatar';
 
 export default class RadioMessage extends Component {
   constructor(props) {
@@ -25,11 +26,22 @@ export default class RadioMessage extends Component {
           marginLeft: isSelf ? 40 : 0,
         }}
       >
-        <img
+        <Avatar
+          alt={user.name}
+          src={window.baseURL + '/file/download/' + user.fileId}
+          className=""
+          style={{ backgroundColor: user.color }}
+        >
+          {user.name
+            .split(' ')
+            .map((e) => e.slice(0, 1))
+            .join(' ')}
+        </Avatar>
+        {/* <img
           src={window.baseURL + '/file/download/' + user.fileId}
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
-        />
+        /> */}
         <div className="message-2d__text d-flex">
           {message.text !== null ? (
             <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>
@@ -56,16 +68,16 @@ const Row = (props) => {
     <div
       onClick={() => this.handleRadioChange(item.name)}
       className="message-2d__options--row d-flex"
-      style={{
-        // backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
-        // color: item.name === this.state.value ? 'white' : 'black',
-      }}
-    >
-      {
-        props.list.map((item) => (
-          <Item item={item} />
-        )) 
+      style={
+        {
+          // backgroundColor: item.name === this.state.value ? '#0000cc' : 'rgba(153, 153, 153, 0.87)',
+          // color: item.name === this.state.value ? 'white' : 'black',
+        }
       }
+    >
+      {props.list.map((item) => (
+        <Item item={item} />
+      ))}
     </div>
   );
 };
diff --git a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js b/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
index 3cc00fc..8614776 100644
--- a/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
+++ b/src/views/ChatRoom/Body/Message/SliderMessage/SliderMessage.js
@@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid';
 import Slider from '@material-ui/core/Slider';
 import Input from '@material-ui/core/Input';
 import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
-
+import Avatar from '@material-ui/core/Avatar';
 export default class SliderMessage extends Component {
   constructor(props) {
     super(props);
@@ -41,11 +41,22 @@ export default class SliderMessage extends Component {
           marginLeft: isSelf ? 40 : 0,
         }}
       >
-        <img
+        <Avatar
+          alt={user.name}
           src={window.baseURL + '/file/download/' + user.fileId}
+          className=""
+          style={{ backgroundColor: user.color }}
+        >
+          {user.name
+            .split(' ')
+            .map((e) => e.slice(0, 1))
+            .join(' ')}
+        </Avatar>
+        {/* <img 
+          
           style={{ alignSelf: isSelf ? 'flex-end' : 'flex-start' }}
           alt={message.id}
-        />
+        /> */}
         <div className="message-2d__text d-flex">
           {message.text !== null ? (
             <p id="3" style={{ color: isSelf ? 'white' : 'black' }}>