diff --git a/packages/react/src/components/AllThreads/AllThreads.js b/packages/react/src/components/AllThreads/AllThreads.js
index 389b5034b..9255231df 100644
--- a/packages/react/src/components/AllThreads/AllThreads.js
+++ b/packages/react/src/components/AllThreads/AllThreads.js
@@ -3,7 +3,6 @@ import { css } from '@emotion/react';
 import classes from './AllThreads.module.css';
 import { Icon } from '../Icon';
 import { Box } from '../Box';
-import { ActionButton } from '../ActionButton';
 import {
   useMessageStore,
   useUserStore,
@@ -14,6 +13,7 @@ import { MessageMetrics } from '../Message/MessageMetrics';
 import MessageAvatarContainer from '../Message/MessageAvatarContainer';
 import MessageBodyContainer from '../Message/MessageBodyContainer';
 import MessageHeader from '../Message/MessageHeader';
+import Sidebar from '../Sidebar/Sidebar';
 
 const MessageCss = css`
   display: flex;
@@ -65,115 +65,86 @@ const AllThreads = () => {
   );
 
   return (
-    <Box className={classes.component}>
-      <Box className={classes.wrapContainer}>
-        <Box style={{ padding: '16px' }}>
-          <Box
-            css={css`
-              display: flex;
-            `}
-          >
-            <h3 style={{ display: 'contents' }}>
-              <Icon
-                name="thread"
-                size="1.25rem"
-                style={{ padding: '0px 20px 20px 0px' }}
-              />
-              <Box
-                css={css`
-                  width: 100%;
-                  color: #4a4a4a;
-                `}
-              >
-                Threads
-              </Box>
-              <ActionButton onClick={toggleShowAllThreads} ghost size="small">
-                <Icon name="cross" size="1.25rem" />
-              </ActionButton>
-            </h3>
-          </Box>
+    <Sidebar
+      title="Threads"
+      iconName="thread"
+      setShowWindow={setShowAllThreads}
+    >
+      <Box
+        className={classes.searchContainer}
+        style={{ border: '2px solid #ddd', position: 'relative' }}
+      >
+        <input
+          placeholder="Search Messages"
+          onChange={handleInputChange}
+          className={classes.textInput}
+        />
 
+        <Icon
+          name="magnifier"
+          size="1.25rem"
+          style={{ padding: '0.125em', cursor: 'pointer' }}
+        />
+      </Box>
+
+      <Box
+        style={{
+          flex: '1',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
+          alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
+        }}
+      >
+        {filteredThreads.length === 0 ? (
           <Box
-            className={classes.searchContainer}
-            style={{ border: '2px solid #ddd', position: 'relative' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              color: '#4a4a4a',
+            }}
           >
-            <input
-              placeholder="Search Messages"
-              onChange={handleInputChange}
-              className={classes.textInput}
-            />
-
-            <Icon
-              name="magnifier"
-              size="1.25rem"
-              style={{ padding: '0.125em', cursor: 'pointer' }}
-            />
+            <Icon name="magnifier" size="3rem" style={{ padding: '0.5rem' }} />
+            <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+              No threads found
+            </span>
           </Box>
-        </Box>
-
-        <Box
-          style={{
-            flex: '1',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: filteredThreads.length === 0 ? 'center' : 'initial',
-            alignItems: filteredThreads.length === 0 ? 'center' : 'initial',
-          }}
-        >
-          {filteredThreads.length === 0 ? (
-            <Box
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                color: '#4a4a4a',
-              }}
-            >
-              <Icon
-                name="magnifier"
-                size="3rem"
-                style={{ padding: '0.5rem' }}
-              />
-              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                No threads found
-              </span>
-            </Box>
-          ) : (
-            filteredThreads.map(
-              (message) =>
-                !message.t &&
-                message.tcount && (
-                  <Box
-                    key={message._id}
-                    css={MessageCss}
-                    onClick={handleOpenThread(message)}
-                  >
-                    {showAvatar && (
-                      <MessageAvatarContainer
-                        message={message}
-                        sequential={false}
-                        isStarred={false}
-                      />
-                    )}
-                    <MessageBodyContainer>
-                      <MessageHeader message={message} isTimeStamped={false} />
+        ) : (
+          filteredThreads.map(
+            (message) =>
+              !message.t &&
+              message.tcount && (
+                <Box
+                  key={message._id}
+                  css={MessageCss}
+                  onClick={handleOpenThread(message)}
+                >
+                  {showAvatar && (
+                    <MessageAvatarContainer
+                      message={message}
+                      sequential={false}
+                      isStarred={false}
+                    />
+                  )}
+                  <MessageBodyContainer>
+                    <MessageHeader message={message} isTimeStamped={false} />
 
-                      <MessageBody>
-                        {message.attachments && message.attachments.length > 0
-                          ? message.file.name
-                          : message.msg}
-                      </MessageBody>
+                    <MessageBody>
+                      {message.attachments && message.attachments.length > 0
+                        ? message.file.name
+                        : message.msg}
+                    </MessageBody>
 
-                      <MessageMetrics message={message} isReplyButton={false} />
-                    </MessageBodyContainer>
-                  </Box>
-                )
-            )
-          )}
-        </Box>
+                    <MessageMetrics message={message} isReplyButton={false} />
+                  </MessageBodyContainer>
+                </Box>
+              )
+          )
+        )}
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 
diff --git a/packages/react/src/components/RoomInformation/RoomInformation.js b/packages/react/src/components/RoomInformation/RoomInformation.js
index 059403dfd..dd3146f36 100644
--- a/packages/react/src/components/RoomInformation/RoomInformation.js
+++ b/packages/react/src/components/RoomInformation/RoomInformation.js
@@ -2,11 +2,9 @@ import React, { useContext } from 'react';
 import { css } from '@emotion/react';
 import { Avatar } from '../Avatar/Avatar';
 import RCContext from '../../context/RCInstance';
-import classes from './RoomInformation.module.css';
 import { useChannelStore } from '../../store';
-import { Icon } from '../Icon';
 import { Box } from '../Box';
-import { ActionButton } from '../ActionButton';
+import Sidebar from '../Sidebar/Sidebar';
 
 const Roominfo = () => {
   const { RCInstance } = useContext(RCContext);
@@ -17,41 +15,17 @@ const Roominfo = () => {
     (state) => state.setShowChannelinfo
   );
 
-  const toggleshowRoominfo = () => {
-    setShowChannelinfo(false);
-  };
-
   const getChannelAvatarURL = (channelname) => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
   };
-  return (
-    <Box className={classes.component} style={{ padding: '16px' }}>
-      <Box
-        css={css`
-          display: flex;
-        `}
-      >
-        <h3 style={{ display: 'contents' }}>
-          <Icon
-            name="info"
-            size="1.25rem"
-            style={{ padding: '0px 20px 20px 0px' }}
-          />
-          <Box
-            css={css`
-              width: 100%;
-              color: #4a4a4a;
-            `}
-          >
-            Room Information
-          </Box>
-          <ActionButton onClick={toggleshowRoominfo} ghost size="small">
-            <Icon name="cross" size="1.25rem" />
-          </ActionButton>
-        </h3>
-      </Box>
 
+  return (
+    <Sidebar
+      title="Room Information"
+      iconName="info"
+      setShowWindow={setShowChannelinfo}
+    >
       <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />
       <Box
         css={css`
@@ -81,7 +55,7 @@ const Roominfo = () => {
           {channelInfo.description}
         </Box>
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 export default Roominfo;
diff --git a/packages/react/src/components/RoomMembers/RoomMember.js b/packages/react/src/components/RoomMembers/RoomMember.js
index ae0d9440b..6dcce6b28 100644
--- a/packages/react/src/components/RoomMembers/RoomMember.js
+++ b/packages/react/src/components/RoomMembers/RoomMember.js
@@ -10,6 +10,7 @@ import { Button } from '../Button';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
+import Sidebar from '../Sidebar/Sidebar';
 
 const RoomMembers = ({ members }) => {
   const { RCInstance } = useContext(RCContext);
@@ -43,20 +44,11 @@ const RoomMembers = ({ members }) => {
   if (showInvite) return <InviteMembers inviteData={inviteData} />;
 
   return (
-    <Box className={classes.modal} style={{ padding: '16px' }}>
-      <Box style={{ display: 'flex' }}>
-        <h3 style={{ display: 'contents' }}>
-          <Icon
-            name="members"
-            size="1.25rem"
-            style={{ padding: '0px 20px 20px 0px' }}
-          />
-          <Box style={{ color: '#4a4a4a', width: '80%' }}>Members</Box>
-          <ActionButton onClick={toggleShowMembers} ghost size="small">
-            <Icon name="cross" size="1.25rem" />
-          </ActionButton>
-        </h3>
-      </Box>
+    <Sidebar
+      title="Members"
+      iconName="members"
+      setShowWindow={toggleShowMembers}
+    >
       <Box className={classes.container}>
         {members.map((member) => (
           <RoomMemberItem user={member} host={host} key={member._id} />
@@ -74,7 +66,7 @@ const RoomMembers = ({ members }) => {
           <Icon size="1em" name="link" /> Invite Link
         </Button>
       )}
-    </Box>
+    </Sidebar>
   );
 };
 export default RoomMembers;
diff --git a/packages/react/src/components/SearchMessage/SearchMessage.js b/packages/react/src/components/SearchMessage/SearchMessage.js
index 06d289734..bfb2af30e 100644
--- a/packages/react/src/components/SearchMessage/SearchMessage.js
+++ b/packages/react/src/components/SearchMessage/SearchMessage.js
@@ -6,18 +6,14 @@ import classes from './SearchMessage.module.css';
 import { useSearchMessageStore } from '../../store';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
-import { ActionButton } from '../ActionButton';
 import { MessageDivider } from '../Message/MessageDivider';
 import { Message } from '../Message';
+import Sidebar from '../Sidebar/Sidebar';
 
 const Search = () => {
   const { RCInstance } = useContext(RCContext);
   const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
 
-  const toggleShowSearch = () => {
-    setShowSearch(false);
-  };
-
   const [text, setText] = useState('');
   const [messageList, setMessageList] = useState([]);
 
@@ -53,104 +49,83 @@ const Search = () => {
     !previous || !isSameDay(new Date(current.ts), new Date(previous.ts));
 
   return (
-    <Box className={classes.searchBar} style={{ padding: '1rem' }}>
-      <Box className={classes.wrapContainer}>
-        <Box
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: '0.5rem',
-            marginBottom: '1rem',
-          }}
-        >
-          <h3 style={{ display: 'contents' }}>
-            <Icon name="magnifier" size="1.25rem" />
-            <Box style={{ color: '#4a4a4a', width: '80%' }}>
-              Search Messages
-            </Box>
-            <ActionButton onClick={toggleShowSearch} ghost size="small">
-              <Icon name="cross" />
-            </ActionButton>
-          </h3>
-        </Box>
-        <Box
-          className={classes.container}
-          style={{
-            border: '2px solid #ddd',
-            position: 'relative',
-            marginBottom: '1rem',
-          }}
-        >
-          <input
-            placeholder="Search Message"
-            onChange={handleInputChange}
-            className={classes.textInput}
-          />
+    <Sidebar
+      title="Search Messages"
+      iconName="magnifier"
+      setShowWindow={setShowSearch}
+    >
+      <Box
+        className={classes.container}
+        style={{
+          border: '2px solid #ddd',
+          position: 'relative',
+          marginBottom: '1rem',
+        }}
+      >
+        <input
+          placeholder="Search Message"
+          onChange={handleInputChange}
+          className={classes.textInput}
+        />
 
-          <Icon
-            name="magnifier"
-            size="1.25rem"
-            style={{ padding: '0.125em', cursor: 'pointer' }}
-          />
-        </Box>
-        <Box
-          style={{
-            flex: '1',
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: messageList.length === 0 ? 'center' : 'initial',
-            alignItems: messageList.length === 0 ? 'center' : 'initial',
-          }}
-        >
-          {messageList.length === 0 ? (
-            <Box
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                color: '#4a4a4a',
-              }}
-            >
-              <Icon
-                name="magnifier"
-                size="3rem"
-                style={{ padding: '0.5rem' }}
-              />
-              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                No results found
-              </span>
-            </Box>
-          ) : (
-            messageList.map((msg, index, arr) => {
-              const prev = arr[index + 1];
-              const newDay = isMessageNewDay(msg, prev);
-              return (
-                <Box key={msg._id}>
-                  {newDay && (
-                    <Box style={{ paddingTop: '0.5rem' }}>
-                      <MessageDivider>
-                        {format(new Date(msg.ts), 'MMMM d, yyyy')}
-                      </MessageDivider>
-                    </Box>
-                  )}
-                  <Message
-                    key={msg._id}
-                    message={msg}
-                    newDay={false}
-                    sequential={false}
-                    variant="default"
-                    showAvatar
-                    showToolbox={false}
-                  />
-                </Box>
-              );
-            })
-          )}
-        </Box>
+        <Icon
+          name="magnifier"
+          size="1.25rem"
+          style={{ padding: '0.125em', cursor: 'pointer' }}
+        />
+      </Box>
+      <Box
+        style={{
+          flex: '1',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: messageList.length === 0 ? 'center' : 'initial',
+          alignItems: messageList.length === 0 ? 'center' : 'initial',
+        }}
+      >
+        {messageList.length === 0 ? (
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              color: '#4a4a4a',
+            }}
+          >
+            <Icon name="magnifier" size="3rem" style={{ padding: '0.5rem' }} />
+            <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+              No results found
+            </span>
+          </Box>
+        ) : (
+          messageList.map((msg, index, arr) => {
+            const prev = arr[index + 1];
+            const newDay = isMessageNewDay(msg, prev);
+            return (
+              <Box key={msg._id}>
+                {newDay && (
+                  <Box style={{ paddingTop: '0.5rem' }}>
+                    <MessageDivider>
+                      {format(new Date(msg.ts), 'MMMM d, yyyy')}
+                    </MessageDivider>
+                  </Box>
+                )}
+                <Message
+                  key={msg._id}
+                  message={msg}
+                  newDay={false}
+                  sequential={false}
+                  variant="default"
+                  showAvatar
+                  showToolbox={false}
+                />
+              </Box>
+            );
+          })
+        )}
       </Box>
-    </Box>
+    </Sidebar>
   );
 };
 export default Search;
diff --git a/packages/react/src/components/SearchMessage/SearchMessage.module.css b/packages/react/src/components/SearchMessage/SearchMessage.module.css
index a90e7f4c6..cb98500b9 100644
--- a/packages/react/src/components/SearchMessage/SearchMessage.module.css
+++ b/packages/react/src/components/SearchMessage/SearchMessage.module.css
@@ -1,22 +1,3 @@
-.searchBar {
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 350px;
-  height: 100%;
-  overflow-x: scroll;
-  overflow-y: scroll;
-  background-color: white;
-  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
-  z-index: 100;
-}
-
-.wrapContainer {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
 .container {
   display: flex;
   align-items: center;
diff --git a/packages/react/src/components/Sidebar/Sidebar.js b/packages/react/src/components/Sidebar/Sidebar.js
new file mode 100644
index 000000000..59851417f
--- /dev/null
+++ b/packages/react/src/components/Sidebar/Sidebar.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import classes from './Sidebar.module.css';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { ActionButton } from '../ActionButton';
+
+const Sidebar = ({ title, iconName, setShowWindow, children }) => {
+  return (
+    <Box className={classes.sidebar}>
+      <Box className={classes.sidebarContainer}>
+        <Box className={classes.sidebarHeader}>
+          <h3 style={{ display: 'contents' }}>
+            <Icon
+              name={iconName}
+              size="1.25rem"
+              className={classes.sidebarIcon}
+            />
+            <Box className={classes.sidebarTitle}>{title}</Box>
+            <ActionButton
+              onClick={() => setShowWindow(false)}
+              ghost
+              size="small"
+            >
+              <Icon name="cross" />
+            </ActionButton>
+          </h3>
+        </Box>
+      </Box>
+      {children}
+    </Box>
+  );
+};
+export default Sidebar;
diff --git a/packages/react/src/components/Sidebar/Sidebar.module.css b/packages/react/src/components/Sidebar/Sidebar.module.css
new file mode 100644
index 000000000..2c03abfeb
--- /dev/null
+++ b/packages/react/src/components/Sidebar/Sidebar.module.css
@@ -0,0 +1,44 @@
+.sidebar {
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 350px;
+  height: 100%;
+  overflow-x: scroll;
+  overflow-y: scroll;
+  background-color: white;
+  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
+  z-index: 100;
+  padding: 1rem;
+}
+
+.sidebarContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebarHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem
+}
+
+.sidebarTitle {
+  color: #4a4a4a;
+  width: 80%;
+}
+
+.sidebarIcon {
+  size: 1.25rem;
+  padding: 0 0.5 0.5 0rem;
+}
+
+@media (max-width: 550px) {
+  .sidebar {
+    width: 100vw;
+  }
+}
+
diff --git a/packages/react/src/components/UserMentions/UserMentions.js b/packages/react/src/components/UserMentions/UserMentions.js
index 1bd655aa6..304803387 100644
--- a/packages/react/src/components/UserMentions/UserMentions.js
+++ b/packages/react/src/components/UserMentions/UserMentions.js
@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 import { isSameDay, format } from 'date-fns';
-import classes from './UserMentions.module.css';
 import { Icon } from '../Icon';
 import { Box } from '../Box';
 import { Attachments } from '../Attachments';
-import { ActionButton } from '../ActionButton';
 import { useMessageStore, useUserStore, useMentionsStore } from '../../store';
 import { MessageBody } from '../Message/MessageBody';
 import { MessageMetrics } from '../Message/MessageMetrics';
@@ -15,6 +13,7 @@ import { MessageDivider } from '../Message/MessageDivider';
 import MessageAvatarContainer from '../Message/MessageAvatarContainer';
 import MessageBodyContainer from '../Message/MessageBodyContainer';
 import MessageHeader from '../Message/MessageHeader';
+import Sidebar from '../Sidebar/Sidebar';
 
 const MessageCss = css`
   display: flex;
@@ -65,115 +64,86 @@ const UserMentions = () => {
   }, [RCInstance, setMentionedMessages]);
 
   return (
-    <Box className={classes.component}>
-      <Box className={classes.wrapContainer}>
-        <Box style={{ padding: '16px' }}>
-          <Box
-            css={css`
-              display: flex;
-            `}
-          >
-            <h3 style={{ display: 'contents' }}>
+    <Sidebar title="Mentions" iconName="at" setShowWindow={setShowMentions}>
+      {isLoaded && (
+        <Box
+          style={{
+            flex: '1',
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent:
+              mentionedMessages.length === 0 ? 'center' : 'initial',
+            alignItems: mentionedMessages.length === 0 ? 'center' : 'initial',
+          }}
+        >
+          {mentionedMessages.length === 0 ? (
+            <Box
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                color: '#4a4a4a',
+              }}
+            >
               <Icon
-                name="at"
-                size="1.25rem"
-                style={{ padding: '0px 20px 20px 0px' }}
+                name="magnifier"
+                size="3rem"
+                style={{ padding: '0.5rem' }}
               />
-              <Box
-                css={css`
-                  width: 100%;
-                  color: #4a4a4a;
-                `}
-              >
-                Mentions
-              </Box>
-              <ActionButton onClick={toggleShowMentions} ghost size="small">
-                <Icon name="cross" size="1.25rem" />
-              </ActionButton>
-            </h3>
-          </Box>
-        </Box>
+              <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
+                No mentions found
+              </span>
+            </Box>
+          ) : (
+            mentionedMessages.map((message, index, arr) => {
+              const newDay =
+                index === 0 || isMessageNewDay(message, arr[index - 1]);
+              return (
+                <React.Fragment key={message._id}>
+                  {newDay ? (
+                    <MessageDivider>
+                      {format(new Date(message.ts), 'MMMM d, yyyy')}
+                    </MessageDivider>
+                  ) : null}
+                  <Box css={MessageCss}>
+                    {showAvatar && (
+                      <MessageAvatarContainer
+                        message={message}
+                        sequential={false}
+                        isStarred={false}
+                      />
+                    )}
+                    <MessageBodyContainer>
+                      <MessageHeader message={message} />
 
-        {isLoaded && (
-          <Box
-            style={{
-              flex: '1',
-              overflow: 'auto',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent:
-                mentionedMessages.length === 0 ? 'center' : 'initial',
-              alignItems: mentionedMessages.length === 0 ? 'center' : 'initial',
-            }}
-          >
-            {mentionedMessages.length === 0 ? (
-              <Box
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  color: '#4a4a4a',
-                }}
-              >
-                <Icon
-                  name="magnifier"
-                  size="3rem"
-                  style={{ padding: '0.5rem' }}
-                />
-                <span style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
-                  No mentions found
-                </span>
-              </Box>
-            ) : (
-              mentionedMessages.map((message, index, arr) => {
-                const newDay =
-                  index === 0 || isMessageNewDay(message, arr[index - 1]);
-                return (
-                  <React.Fragment key={message._id}>
-                    {newDay ? (
-                      <MessageDivider>
-                        {format(new Date(message.ts), 'MMMM d, yyyy')}
-                      </MessageDivider>
-                    ) : null}
-                    <Box css={MessageCss}>
-                      {showAvatar && (
-                        <MessageAvatarContainer
+                      <MessageBody>
+                        {message.attachments &&
+                        message.attachments.length > 0 ? (
+                          <>
+                            <Markdown body={message} isReaction={false} />
+                            <Attachments attachments={message.attachments} />
+                          </>
+                        ) : (
+                          <Markdown body={message} isReaction={false} />
+                        )}
+                      </MessageBody>
+
+                      {!message.t && message.tcount && (
+                        <MessageMetrics
                           message={message}
-                          sequential={false}
-                          isStarred={false}
+                          handleOpenThread={handleOpenThread}
                         />
                       )}
-                      <MessageBodyContainer>
-                        <MessageHeader message={message} />
-
-                        <MessageBody>
-                          {message.attachments &&
-                          message.attachments.length > 0 ? (
-                            <>
-                              <Markdown body={message} isReaction={false} />
-                              <Attachments attachments={message.attachments} />
-                            </>
-                          ) : (
-                            <Markdown body={message} isReaction={false} />
-                          )}
-                        </MessageBody>
-
-                        {!message.t && message.tcount && (
-                          <MessageMetrics
-                            message={message}
-                            handleOpenThread={handleOpenThread}
-                          />
-                        )}
-                      </MessageBodyContainer>
-                    </Box>
-                  </React.Fragment>
-                );
-              })
-            )}
-          </Box>
-        )}
-      </Box>
-    </Box>
+                    </MessageBodyContainer>
+                  </Box>
+                </React.Fragment>
+              );
+            })
+          )}
+        </Box>
+      )}
+    </Sidebar>
   );
 };
 
diff --git a/packages/react/src/components/UserMentions/UserMentions.module.css b/packages/react/src/components/UserMentions/UserMentions.module.css
deleted file mode 100644
index cca051f27..000000000
--- a/packages/react/src/components/UserMentions/UserMentions.module.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.component {
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 350px;
-  height: 100%;
-  overflow: hidden;
-  background-color: white;
-  box-shadow: -1px 0px 5px rgb(0 0 0 / 25%);
-  z-index: 100;
-}
-.wrapContainer {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-@media (max-width: 550px) {
-  .component {
-    width: 100vw;
-  }
-}