diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index 01123dafbe..c0e1b1473d 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -1,6 +1,13 @@
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import { css } from '@emotion/react';
-import { Box, Icon, Button, Input, Modal } from '@embeddedchat/ui-elements';
+import {
+  Box,
+  Icon,
+  Button,
+  Input,
+  Modal,
+  useTheme,
+} from '@embeddedchat/ui-elements';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 import CheckPreviewType from './CheckPreviewType';
 import RCContext from '../../context/RCInstance';
@@ -14,6 +21,7 @@ import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 const AttachmentPreview = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
   const styles = getAttachmentPreviewStyles();
+  const { theme } = useTheme();
 
   const toggle = useAttachmentWindowStore((state) => state.toggle);
   const data = useAttachmentWindowStore((state) => state.data);
@@ -109,47 +117,74 @@ const AttachmentPreview = () => {
             css={css`
               text-align: center;
               margin-top: 1rem;
+              display: flex;
+              justify-content: center;
+              padding: 0 50px 0 50px;
             `}
           >
             <CheckPreviewType data={data} />
           </Box>
           <Box
             css={css`
-              margin: 30px;
+              margin: 10px;
             `}
           >
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-name"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File name
-              </Box>
+              </label>
               <Input
                 onChange={(e) => {
                   handleFileName(e);
                 }}
                 value={fileName}
+                id="file-name"
                 type="text"
-                css={styles.input}
                 placeholder="name"
+                css={css`
+                  ${styles.input}
+                  &:focus {
+                    border-color: ${fileName === ''
+                      ? theme.colors.destructive
+                      : theme.colors.ring};
+                    transition: border 0.1s ease-in;
+                  }
+                `}
               />
+              {fileName === '' && (
+                <Box
+                  css={css`
+                    color: red;
+                    margin-top: 0.5rem;
+                    font-size: 0.65rem;
+                  `}
+                >
+                  The field File name is required.
+                </Box>
+              )}
               <TypingUsers />
             </Box>
 
             <Box css={styles.inputContainer}>
-              <Box
-                is="span"
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label
+                htmlFor="file-description"
                 css={css`
                   font-weight: 550;
                   margin-bottom: 0.5rem;
+                  font-size: 0.8rem;
                 `}
               >
                 File description
-              </Box>
+              </label>
               <Box css={styles.fileDescription}>
                 <Box css={styles.mentionListContainer}>
                   {showMembersList && (
@@ -171,9 +206,16 @@ const AttachmentPreview = () => {
                   onChange={(e) => {
                     handleFileDescription(e);
                   }}
+                  id="file-description"
                   type="text"
-                  css={styles.input}
                   placeholder="Description"
+                  css={css`
+                    ${styles.input}
+                    &:focus {
+                      border: ${theme.colors.ring};
+                      transition: border 0.9s ease-in, border 0.9s ease-out;
+                    }
+                  `}
                   ref={messageRef}
                 />
               </Box>
@@ -184,16 +226,19 @@ const AttachmentPreview = () => {
 
       <Modal.Footer
         css={css`
-          margin-top: 1.5rem;
+          margin-bottom: 1rem;
+          padding-right: 1rem;
         `}
       >
         <Button type="secondary" onClick={toggle}>
           Cancel
         </Button>
         <Button
-          disabled={isPending}
+          disabled={isPending || fileName === ''}
           onClick={() => {
-            submit();
+            if (fileName !== '') {
+              submit();
+            }
           }}
         >
           {isPending ? 'Sending...' : 'Send'}
diff --git a/packages/react/src/views/Message/MessageHeader.js b/packages/react/src/views/Message/MessageHeader.js
index a93a46e243..0ba0fae294 100644
--- a/packages/react/src/views/Message/MessageHeader.js
+++ b/packages/react/src/views/Message/MessageHeader.js
@@ -13,6 +13,7 @@ import { useMemberStore, useUserStore } from '../../store';
 import { getMessageHeaderStyles } from './Message.styles';
 import useDisplayNameColor from '../../hooks/useDisplayNameColor';
 import { useRCContext } from '../../context/RCInstance';
+import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const MessageHeader = ({
   message,
@@ -99,6 +100,17 @@ const MessageHeader = ({
     }
   };
 
+  const setExclusiveState = useSetExclusiveState();
+  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
+    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
+    setCurrentUser: state.setCurrentUser,
+  }));
+
+  const handleUsernameClick = () => {
+    setExclusiveState(setShowCurrentUserInfo);
+    setCurrentUser(message?.u);
+  };
+
   return (
     <Box
       css={styles.header}
@@ -108,13 +120,14 @@ const MessageHeader = ({
       {showDisplayName && showName && (
         <Box
           is="span"
-          css={styles.name}
+          css={[styles.name, { cursor: 'pointer' }]}
           className={appendClassNames('ec-message-header-name')}
           style={
             displayNameVariant === 'colorize'
               ? { color: getDisplayNameColor(message.u.username) }
               : null
           }
+          onClick={handleUsernameClick}
         >
           {message.u?._id === 'rocket.cat'
             ? message.u.username
@@ -124,13 +137,14 @@ const MessageHeader = ({
       {showDisplayName && showUsername && (
         <Box
           is="span"
-          css={styles.userName}
+          css={[styles.userName, { cursor: 'pointer' }]}
           className={appendClassNames('ec-message-header-username')}
           style={
             displayNameVariant === 'colorize'
               ? { color: getDisplayNameColor(message.u.username) }
               : null
           }
+          onClick={handleUsernameClick}
         >
           @{message.u.username}
         </Box>
diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
index 75bdc7467d..29322ff2b2 100644
--- a/packages/react/src/views/Message/MessageToolbox.js
+++ b/packages/react/src/views/Message/MessageToolbox.js
@@ -9,6 +9,7 @@ import {
   appendClassNames,
   useTheme,
 } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 import RCContext from '../../context/RCInstance';
 import { EmojiPicker } from '../EmojiPicker';
 import { getMessageToolboxStyles } from './Message.styles';
@@ -148,7 +149,7 @@ export const MessageToolbox = ({
         label: 'Add reaction',
         id: 'reaction',
         onClick: () => setEmojiOpen(true),
-        iconName: 'emoji',
+        iconName: 'reaction',
         visible: true,
       },
       pin: {
@@ -284,75 +285,46 @@ export const MessageToolbox = ({
       {showDeleteModal && (
         <Modal onClose={handleOnClose}>
           <Modal.Header>
-            <Modal.Title>
-              <Icon
-                name="trash"
-                size="1.25rem"
-                style={{ marginRight: '0.5rem' }}
-              />{' '}
-              Delete this message?
-            </Modal.Title>
+            <Box
+              css={css`
+                margin: 0.6rem 0px 0rem 0.45rem;
+              `}
+            >
+              <Modal.Title>
+                <Icon
+                  name="trash"
+                  size="1.35rem"
+                  style={{ marginRight: '0.2rem', color: 'red' }}
+                />
+                Are you sure?
+              </Modal.Title>
+            </Box>
             <Modal.Close onClick={handleOnClose} />
           </Modal.Header>
           <Modal.Content
             style={{
-              overflow: 'scroll',
               whiteSpace: 'wrap',
-              padding: '1rem',
               maxHeight: '50vh',
+              overflow: 'hidden',
             }}
           >
-            {message.file ? (
-              message.file.type.startsWith('image/') ? (
-                <div>
-                  <img
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    alt={message.file.name}
-                    style={{ maxWidth: '100px', maxHeight: '100px' }}
-                  />
-                  <div>{`${message.file.name} (${(
-                    message.file.size / 1024
-                  ).toFixed(2)} kB)`}</div>
-                </div>
-              ) : message.file.type.startsWith('video/') ? (
-                <video
-                  controls
-                  style={{ maxWidth: '100%', maxHeight: '200px' }}
-                >
-                  <source
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    type={message.file.type}
-                  />
-                  Your browser does not support the video tag.
-                </video>
-              ) : message.file.type.startsWith('audio/') ? (
-                <audio controls style={{ maxWidth: '100%' }}>
-                  <source
-                    src={`${instanceHost}/file-upload/${message.file._id}/${message.file.name}`}
-                    type={message.file.type}
-                  />
-                  Your browser does not support the audio element.
-                </audio>
-              ) : (
-                <Markdown body={message} md={message.md} isReaction={false} />
-              )
-            ) : (
-              <Markdown body={message} md={message.md} isReaction={false} />
-            )}
-            {message.attachments &&
-              message.attachments.length > 0 &&
-              message.msg &&
-              message.msg[0] === '[' &&
-              message.attachments.map((attachment, index) => (
-                <Attachment
-                  key={index}
-                  attachment={attachment}
-                  type={attachment.type}
-                  host={instanceHost}
-                />
-              ))}
+            <Box
+              css={css`
+                margin-top: 1.5rem;
+                font-size: 0.9rem;
+                margin-left: 1rem;
+                margin-down: 1rem;
+              `}
+            >
+              You will not be able to recover this message!
+            </Box>
           </Modal.Content>
-          <Modal.Footer>
+          <Modal.Footer
+            style={{
+              marginTop: '1rem',
+              padding: '0.5rem 1rem',
+            }}
+          >
             <Button type="secondary" onClick={handleOnClose}>
               Cancel
             </Button>
@@ -363,7 +335,7 @@ export const MessageToolbox = ({
                 handleOnClose();
               }}
             >
-              Delete message
+              Yes, delete
             </Button>
           </Modal.Footer>
         </Modal>
diff --git a/packages/react/src/views/UserInformation/UserInformation.js b/packages/react/src/views/UserInformation/UserInformation.js
index d03232d651..894b8b77c8 100644
--- a/packages/react/src/views/UserInformation/UserInformation.js
+++ b/packages/react/src/views/UserInformation/UserInformation.js
@@ -29,6 +29,8 @@ const UserInformation = () => {
   const styles = getUserInformationStyles(theme);
   const [currentUserInfo, setCurrentUserInfo] = useState({});
   const [isUserInfoFetched, setIsUserInfoFetched] = useState(false);
+  const [error, setError] = useState(null);
+  const [loader, setLoader] = useState(true);
   const currentUser = useUserStore((state) => state.currentUser);
   const currentUserRoles = useUserStore((state) => state.roles);
   const viewUserFullInfoRoles = useUserStore(
@@ -51,6 +53,10 @@ const UserInformation = () => {
         if (res?.user) {
           setCurrentUserInfo(res.user);
           setIsUserInfoFetched(true);
+          setLoader(false);
+        } else {
+          setError('No user found');
+          setLoader(false);
         }
       } catch (err) {
         console.error('Error fetching current user info', err);
@@ -58,7 +64,7 @@ const UserInformation = () => {
     };
 
     getCurrentUserInfo();
-  }, [RCInstance, setCurrentUserInfo]);
+  }, [RCInstance, setCurrentUserInfo, currentUser._id]);
 
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
@@ -77,6 +83,9 @@ const UserInformation = () => {
           }
         : {})}
     >
+      <Box css={styles.centeredColumnStyles}>
+        {loader ? <Throbber /> : null}
+      </Box>
       {isUserInfoFetched ? (
         <Box css={styles.userSidebar}>
           <Avatar
@@ -216,11 +225,22 @@ const UserInformation = () => {
             />
           </Box>
         </Box>
-      ) : (
-        <Box css={styles.centeredColumnStyles}>
-          <Throbber />
+      ) : error ? (
+        <Box
+          css={css`
+            margin: 16px;
+            margin-top: 210px;
+            text-align: center;
+            font-weight: bold;
+            font-size: 1.15rem;
+          `}
+        >
+          <Icon name="user" size="2rem" />
+          <br />
+          No Info Found
+          <br />
         </Box>
-      )}
+      ) : null}
     </ViewComponent>
   );
 };
diff --git a/packages/ui-elements/src/components/Icon/icons/Reaction.js b/packages/ui-elements/src/components/Icon/icons/Reaction.js
new file mode 100644
index 0000000000..d327ea48ca
--- /dev/null
+++ b/packages/ui-elements/src/components/Icon/icons/Reaction.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Pin = (props) => (
+  <svg
+    id="add-reaction"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M16.5953757,3.40462428 L18.3063584,3.40462428 C18.6894461,3.40462428 19,3.71517821 19,4.0982659 L19,4.0982659 C19,4.48135358 18.6894461,4.79190751 18.3063584,4.79190751 L16.5953757,4.79190751 L16.5953757,6.50289017 C16.5953757,6.88597786 16.2848218,7.19653179 15.9017341,7.19653179 L15.9017341,7.19653179 C15.5186464,7.19653179 15.2080925,6.88597786 15.2080925,6.50289017 L15.2080925,4.79190751 L13.4971098,4.79190751 C13.1140221,4.79190751 12.8034682,4.48135358 12.8034682,4.0982659 L12.8034682,4.0982659 C12.8034682,3.71517821 13.1140221,3.40462428 13.4971098,3.40462428 L15.2080925,3.40462428 L15.2080925,1.69364162 C15.2080925,1.31055393 15.5186464,1 15.9017341,1 L15.9017341,1 C16.2848218,1 16.5953757,1.31055393 16.5953757,1.69364162 L16.5953757,3.40462428 Z M12.017341,8.90751445 C11.5065575,8.90751445 11.0924855,8.49344254 11.0924855,7.98265896 C11.0924855,7.47187538 11.5065575,7.05780347 12.017341,7.05780347 C12.5281246,7.05780347 12.9421965,7.47187538 12.9421965,7.98265896 C12.9421965,8.49344254 12.5281246,8.90751445 12.017341,8.90751445 Z M8.31791908,8.90751445 C7.80713549,8.90751445 7.39306358,8.49344254 7.39306358,7.98265896 C7.39306358,7.47187538 7.80713549,7.05780347 8.31791908,7.05780347 C8.82870266,7.05780347 9.24277457,7.47187538 9.24277457,7.98265896 C9.24277457,8.49344254 8.82870266,8.90751445 8.31791908,8.90751445 Z M10.1676301,2.66473988 L10.1676301,4.05202312 C9.61809223,4.08150564 9.2125803,4.12425249 8.95109428,4.18026366 C6.34285047,4.73895811 4.38728324,7.05729042 4.38728324,9.83236994 C4.38728324,13.0247673 6.97523266,15.6127168 10.1676301,15.6127168 C12.9433379,15.6127168 15.2620917,13.6562638 15.8201156,11.0471339 C15.8759626,10.786012 15.9185831,10.3810907 15.9479769,9.83236994 L17.3352601,9.83236994 C17.3079241,10.4226104 17.2681043,10.8593182 17.2158007,11.1424932 C16.6001927,14.4754291 13.678734,17 10.1676301,17 C6.20905728,17 3,13.7909427 3,9.83236994 C3,6.33988881 5.49786142,3.43081447 8.80454201,2.79418918 C9.09873901,2.73754831 9.55310169,2.69439855 10.1676301,2.66473988 Z M7.60608545,11.8421707 L7.60608545,11.8421707 C7.87462322,11.5736329 8.29676713,11.535532 8.60904766,11.7516475 C8.71317478,11.8236717 8.8046355,11.8792946 8.8834474,11.9184909 C9.71644214,12.3327715 10.7016538,12.3365544 11.5374284,11.9298396 C11.6220117,11.8886787 11.7206771,11.8291344 11.8334246,11.7512069 L11.8334275,11.7512111 C12.1462696,11.5349845 12.5689492,11.5732617 12.8378582,11.8421707 L12.8378582,11.8421707 C13.0797095,12.084022 13.0797095,12.4761405 12.8378582,12.7179919 C12.8163559,12.7394941 12.7932992,12.7593834 12.7688751,12.7774985 C12.5123387,12.9678207 12.2963037,13.1050136 12.1207954,13.1891112 C10.8663293,13.7902084 9.38556873,13.7614468 8.15275845,13.1028262 C8.02025806,13.0320388 7.86012034,12.926009 7.6723453,12.7847368 L7.67235924,12.7847182 C7.39618546,12.5769394 7.34074042,12.1846182 7.54851928,11.9084445 C7.56613295,11.8850329 7.58536899,11.8628871 7.60608545,11.8421707 Z" />
+  </svg>
+);
+
+export default Pin;
diff --git a/packages/ui-elements/src/components/Icon/icons/index.js b/packages/ui-elements/src/components/Icon/icons/index.js
index 234251edab..becd103142 100644
--- a/packages/ui-elements/src/components/Icon/icons/index.js
+++ b/packages/ui-elements/src/components/Icon/icons/index.js
@@ -2,6 +2,7 @@ import File from './File';
 import Mobile from './Mobile';
 import Star from './Star';
 import Pin from './Pin';
+import Reaction from './Reaction';
 import ReplyDirectly from './ReplyDirectly';
 import Hash from './Hash';
 import HashLock from './HashLock';
@@ -70,6 +71,7 @@ const icons = {
   mobile: Mobile,
   star: Star,
   pin: Pin,
+  reaction: Reaction,
   'reply-directly': ReplyDirectly,
   hash: Hash,
   hash_lock: HashLock,
diff --git a/packages/ui-elements/tools/icons-generator.js b/packages/ui-elements/tools/icons-generator.js
index d12396c2b1..b01de21d8f 100644
--- a/packages/ui-elements/tools/icons-generator.js
+++ b/packages/ui-elements/tools/icons-generator.js
@@ -18,6 +18,7 @@ const iconsList = [
   'circle-check',
   'send',
   'emoji',
+  'reaction',
   'plus',
   'thread',
   'user',