diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 3099455b0..15abb962c 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -30,19 +30,10 @@ jobs:
           node-version: "16.19.0"
 
       - name: Install Dependencies
-        run: yarn
-
-      - name: Build Storybook
-        run: yarn build:storybook
-        working-directory: packages/react
-
-      - name: Build UI-Elements
-        run: yarn build:storybook
-        working-directory: packages/ui-elements
+        run: yarn install
 
-      - name: Build Layout Editor
-        run: npm run build
-        working-directory: packages/layout_editor
+      - name: Build Packages
+        run: yarn build && yarn build:storybook
 
       - name: Setup Node.js for Docs
         uses: actions/setup-node@v4
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
index 9b9c57306..9fbd803c1 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -41,14 +41,18 @@ export const MessageAggregator = ({
 
   const noMessages = messageList?.length === 0 || !messageRendered;
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
-
   return (
     <ViewComponent
       title={title}
       iconName={iconName}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
-      style={{ padding: 0 }}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
index 1f18222e3..4156b6199 100644
--- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
+++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.styles.js
@@ -8,7 +8,10 @@ const getMessageAggregatorStyles = () => {
       flex-direction: column;
       justify-content: initial;
       align-items: initial;
-      max-width: 100%;
+      width: 300px;
+      @media (max-width: 780px) {
+        width: 100vw;
+      }
     `,
 
     noMessageStyles: css`
diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js
index 504b0f4ba..20e98d9b1 100644
--- a/packages/react/src/views/RoomInformation/RoomInformation.js
+++ b/packages/react/src/views/RoomInformation/RoomInformation.js
@@ -6,6 +6,7 @@ import {
   Sidebar,
   Popup,
   useComponentOverrides,
+  useTheme,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { useChannelStore } from '../../store';
@@ -23,6 +24,7 @@ const Roominfo = () => {
     return `${host}/avatar/${channelname}`;
   };
 
+  const { theme } = useTheme();
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
 
   return (
@@ -30,6 +32,12 @@ const Roominfo = () => {
       title="Room Information"
       iconName="info"
       onClose={() => setExclusiveState(null)}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
@@ -41,6 +49,9 @@ const Roominfo = () => {
           padding: 0 1rem 1rem;
           margin: 0 auto;
           overflow: auto;
+          @media (max-width: 780px) {
+            width: 100vw;
+          }
         `}
       >
         <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />
diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js
index c52f48c9d..e41fcd202 100644
--- a/packages/react/src/views/RoomMembers/RoomMember.js
+++ b/packages/react/src/views/RoomMembers/RoomMember.js
@@ -23,16 +23,13 @@ const RoomMembers = ({ members }) => {
   const { host } = ECOptions;
   const { theme } = useTheme();
   const styles = getRoomMemberStyles(theme);
-
   const toggleInviteView = useInviteStore((state) => state.toggleInviteView);
   const showInvite = useInviteStore((state) => state.showInvite);
   const [isLoading, setIsLoading] = useState(true);
   const { variantOverrides } = useComponentOverrides('RoomMember');
   const viewType = variantOverrides.viewType || 'Sidebar';
-
   const [userInfo, setUserInfo] = useState(null);
   const setExclusiveState = useSetExclusiveState();
-
   useEffect(() => {
     const getUserInfo = async () => {
       try {
@@ -50,11 +47,18 @@ const RoomMembers = ({ members }) => {
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
+
   return (
     <ViewComponent
       title="Members"
       iconName="members"
       onClose={() => setExclusiveState(null)}
+      style={{
+        backgroundColor: theme.colors.background,
+        position: 'absolute',
+        right: 0,
+        zIndex: 1001,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,
diff --git a/packages/react/src/views/RoomMembers/RoomMembers.styles.js b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
index 68d3307f5..618ceb616 100644
--- a/packages/react/src/views/RoomMembers/RoomMembers.styles.js
+++ b/packages/react/src/views/RoomMembers/RoomMembers.styles.js
@@ -6,9 +6,12 @@ export const getRoomMemberStyles = () => {
       display: flex;
       flex-direction: column;
       overflow: auto;
-      width: 100%;
       justify-content: center;
-      padding: 0 1rem 1rem;
+      padding: 0 2rem 1rem;
+      width: 300px;
+      @media (max-width: 780px) {
+        width: 100vw;
+      }
     `,
   };