diff --git a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
index 0281249b6..239197f47 100644
--- a/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatProfile/ChatProfile.tsx
@@ -219,10 +219,11 @@ export const ChatProfile: React.FC<IChatProfile> = ({
     return (
       <Container theme={theme}>
         {/* For showing Chat Profile */}
-        <Section gap="10px">
+        <AddonComponentSection>
           {chatProfileLeftHelperComponent && (
             <Section
               cursor="pointer"
+              flex="none"
               maxHeight="1.75rem"
               overflow="hidden"
               justifyContent="center"
@@ -249,10 +250,10 @@ export const ChatProfile: React.FC<IChatProfile> = ({
             }}
             loading={initialized.loading || initialized.profile.recipient === '' || initialized.profile.icon === ''}
           />
-        </Section>
+        </AddonComponentSection>
 
         {/* For showing group related icons and menu */}
-        <Section
+        <AddonComponentSection
           zIndex="unset"
           flexDirection="row"
           gap="10px"
@@ -265,6 +266,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
               cursor="pointer"
               maxHeight="1.75rem"
               overflow="hidden"
+              flex="none"
             >
               {chatProfileRightHelperComponent}
             </Section>
@@ -322,7 +324,7 @@ export const ChatProfile: React.FC<IChatProfile> = ({
               )}
             </ImageItem>
           )}
-        </Section>
+        </AddonComponentSection>
 
         {/* For showing chat info modal | modal && */}
         {modal &&
@@ -352,6 +354,8 @@ export const ChatProfile: React.FC<IChatProfile> = ({
 
 const Container = styled(Section)`
   width: auto;
+  max-width: 100%;
+  overflow: hidden;
   background: ${(props) => props.theme.backgroundColor.chatProfileBackground};
   border: ${(props) => props.theme.border?.chatProfile};
   border-radius: ${(props) => props.theme.borderRadius?.chatProfile};
@@ -362,7 +366,14 @@ const Container = styled(Section)`
   padding: 6px;
   box-sizing: border-box;
   align-self: stretch;
-  box-sizing: border-box;
+`;
+
+const AddonComponentSection = styled(Section)`
+  gap: 10px;
+
+  @media ${device.mobileL} {
+    gap: 5px;
+  } ;
 `;
 
 const ImageItem = styled.div`
diff --git a/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx
index 87fa3d8d6..43a59fc24 100644
--- a/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatView/ChatViewComponent.tsx
@@ -119,7 +119,8 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
           )}
 
           {/* Load ChatViewList if in options */}
-          <Section
+          {/* TODO Create theme from styled and then extend theme to have tablet and mobile sizes */}
+          <ChatViewSection
             flex="1 1 auto"
             overflow="hidden"
             padding={theme.padding?.chatViewListPadding}
@@ -136,21 +137,12 @@ export const ChatViewComponent: React.FC<IChatViewComponentProps> = (options: IC
                 chatId={initialized.derivedChatId}
               />
             )}
-          </Section>
-
-          {/* Check if user is not in read mode */}
-          {/* This will probably be not needed anymore */}
-          {/* {!signer && !(!!account && !!pgpPrivateKey) && !isConnected && (
-            <Section flex="0 1 auto">
-              <Span></Span>
-            </Section>
-          )} */}
+          </ChatViewSection>
 
           {/* Load MessageInput if in options and user is present */}
           {messageInput && user && (
             <Section
               flex="0 1 auto"
-              position="static"
               zIndex="2"
               padding={theme.padding?.messageInputPadding}
               margin={theme.margin?.messageInputMargin}
@@ -182,3 +174,9 @@ const Conatiner = styled(Section)<IThemeProps>`
   border: ${(props) => props.theme.border?.chatViewComponent};
   box-sizing: border-box;
 `;
+
+const ChatViewSection = styled(Section)<IThemeProps>`
+  @media (${device.mobileL}) {
+    margin: 0;
+  }
+`;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
index a73d28ee3..ae086669f 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/FrameRenderer.tsx
@@ -523,4 +523,5 @@ const FrameInput = styled.input<FrameInputProps>`
 
 const PreviewAnchor = styled(Anchor)`
   text-decoration: none;
+  align-self: flex-end;
 `;
diff --git a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
index 7aef928b0..1d1517cb8 100644
--- a/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
+++ b/packages/uiweb/src/lib/components/chat/ChatViewBubble/cards/message/MessageCard.tsx
@@ -287,7 +287,7 @@ const MessageCardSection = styled(Section)`
   &.video,
   &.frame {
     max-width: 512px;
-    min-width: 240px;
+    min-width: 200px;
 
     & > ${MessageSection} {
       width: 100%;
diff --git a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
index 9aaa33add..f81639c56 100644
--- a/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
+++ b/packages/uiweb/src/lib/components/chat/MessageInput/MessageInput.tsx
@@ -550,126 +550,119 @@ export const MessageInput: React.FC<MessageInputProps> = ({
           </>
         ) : null}
         {user && !user?.readmode() && (((isRules ? verified : true) && isMember) || (chatInfo && !groupInfo)) && (
-          <>
-            <Section
-              gap="8px"
-              flex="1"
-              position="static"
-            >
-              {emoji && (
-                <Div
-                  width="25px"
-                  cursor="pointer"
-                  height="25px"
-                  alignSelf="end"
-                  onClick={() => setShowEmojis(!showEmojis)}
-                >
-                  <EmojiIcon color={theme.iconColor?.emoji} />
-                </Div>
-              )}
-              {showEmojis && (
-                <Section
-                  ref={modalRef}
-                  position="absolute"
-                  bottom="2.5rem"
-                  left="2.5rem"
-                  zIndex="700"
-                >
-                  <EmojiPicker
-                    width={isMobile ? 260 : 320}
-                    height={370}
-                    onEmojiClick={addEmoji}
+          <SendSection flex="1">
+            {emoji && (
+              <Div
+                width="25px"
+                cursor="pointer"
+                height="25px"
+                alignSelf="end"
+                onClick={() => setShowEmojis(!showEmojis)}
+              >
+                <EmojiIcon color={theme.iconColor?.emoji} />
+              </Div>
+            )}
+            {showEmojis && (
+              <Section
+                ref={modalRef}
+                position="absolute"
+                bottom="2.5rem"
+                left="2.5rem"
+                zIndex="700"
+              >
+                <EmojiPicker
+                  width={isMobile ? 260 : 320}
+                  height={370}
+                  onEmojiClick={addEmoji}
+                />
+              </Section>
+            )}
+
+            <MultiLineInput
+              disabled={loading ? true : false}
+              theme={theme}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !event.shiftKey) {
+                  event.preventDefault();
+                  sendTextMsg();
+                }
+              }}
+              placeholder="Type your message..."
+              onChange={(e) => onChangeTypedMessage(e.target.value)}
+              value={typedMessage}
+              ref={textAreaRef}
+              rows={1}
+            />
+            {gif && (
+              <Section
+                width="30px"
+                height="24px"
+                cursor="pointer"
+                alignSelf="end"
+                onClick={() => setGifOpen(!gifOpen)}
+              >
+                <GifIcon />
+              </Section>
+            )}
+            {gifOpen && (
+              <Section
+                position="absolute"
+                bottom="2.5rem"
+                zIndex="1"
+                right={isMobile ? '7rem' : '8rem'}
+                ref={modalRef}
+              >
+                <GifPicker
+                  onGifClick={sendGIF}
+                  width={isMobile ? 260 : 320}
+                  height={370}
+                  tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
+                />
+              </Section>
+            )}
+            <Section onClick={handleUploadFile}>
+              {!fileUploading && file && (
+                <>
+                  <Section
+                    width="18px"
+                    height="24px"
+                    cursor="pointer"
+                    alignSelf="end"
+                  >
+                    <AttachmentIcon color={theme.iconColor?.attachment} />
+                  </Section>
+                  <FileInput
+                    type="file"
+                    ref={fileUploadInputRef}
+                    onChange={(e) => uploadFile(e)}
                   />
-                </Section>
+                </>
               )}
-              <MultiLineInput
-                disabled={loading ? true : false}
-                theme={theme}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' && !event.shiftKey) {
-                    event.preventDefault();
-                    sendTextMsg();
-                  }
-                }}
-                placeholder="Type your message..."
-                onChange={(e) => onChangeTypedMessage(e.target.value)}
-                value={typedMessage}
-                ref={textAreaRef}
-                rows={1}
-              />
             </Section>
-            <SendSection position="static">
-              {gif && (
-                <Section
-                  width="30px"
-                  height="24px"
-                  cursor="pointer"
-                  alignSelf="end"
-                  onClick={() => setGifOpen(!gifOpen)}
-                >
-                  <GifIcon />
-                </Section>
-              )}
-              {gifOpen && (
-                <Section
-                  position="absolute"
-                  bottom="2.5rem"
-                  zIndex="1"
-                  right={isMobile ? '7rem' : '8rem'}
-                  ref={modalRef}
-                >
-                  <GifPicker
-                    onGifClick={sendGIF}
-                    width={isMobile ? 260 : 320}
-                    height={370}
-                    tenorApiKey={String(PUBLIC_GOOGLE_TOKEN)}
-                  />
-                </Section>
-              )}
-              <Section onClick={handleUploadFile}>
-                {!fileUploading && file && (
-                  <>
-                    <Section
-                      width="18px"
-                      height="24px"
-                      cursor="pointer"
-                      alignSelf="end"
-                    >
-                      <AttachmentIcon color={theme.iconColor?.attachment} />
-                    </Section>
-                    <FileInput
-                      type="file"
-                      ref={fileUploadInputRef}
-                      onChange={(e) => uploadFile(e)}
-                    />
-                  </>
-                )}
+            {!(loading || fileUploading) && (
+              <Section
+                cursor="pointer"
+                alignSelf="end"
+                height="20px"
+                width="22px"
+                onClick={() => sendTextMsg()}
+              >
+                <SendCompIcon color={theme.iconColor?.sendButton} />
               </Section>
-              {!(loading || fileUploading) && (
-                <Section
-                  cursor="pointer"
-                  alignSelf="end"
-                  height="20px"
-                  width="22px"
-                  onClick={() => sendTextMsg()}
-                >
-                  <SendCompIcon color={theme.iconColor?.sendButton} />
-                </Section>
-              )}
+            )}
 
-              {(loading || fileUploading) && (
-                <Section
-                  alignSelf="end"
-                  height="24px"
-                >
-                  <Spinner
-                    color={theme.spinnerColor}
-                    size="22"
-                  />
-                </Section>
-              )}
-            </SendSection>
-          </>
+            {(loading || fileUploading) && (
+              <Section
+                alignSelf="end"
+                height="24px"
+              >
+                <Spinner
+                  color={theme.spinnerColor}
+                  size="22"
+                />
+              </Section>
+            )}
+          </SendSection>
         )}
       </TypebarSection>
     </MessageInputContainer>
@@ -696,9 +689,9 @@ const MessageInputContainer = styled(Section)`
 `;
 
 const SendSection = styled(Section)`
-  gap: 11.5px;
+  gap: 12px;
   @media ${device.mobileL} {
-    gap: 7.5px;
+    gap: 8px;
   }
 `;
 const MultiLineInput = styled.textarea<IThemeProps>`
@@ -717,7 +710,8 @@ const MultiLineInput = styled.textarea<IThemeProps>`
   padding-right: 5px;
   align-self: end;
   @media ${device.mobileL} {
-    font-size: 14px;
+    font-size: 16px;
+    width: 100%;
   }
   &&::-webkit-scrollbar {
     width: 4px;
diff --git a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
index 34ebf5db5..d11c75c3b 100644
--- a/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
+++ b/packages/uiweb/src/lib/components/chat/reusables/ProfileContainer.tsx
@@ -65,10 +65,11 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
       <Section
         height={customStyle?.imgHeight ?? '48px'}
         width={customStyle?.imgHeight ?? '48px'}
-        borderRadius="100%"
-        overflow="hidden"
         margin="0px 12px 0px 0px"
         position="relative"
+        flex="none"
+        borderRadius="100%"
+        overflow="hidden"
         className={loading ? 'skeleton' : ''}
       >
         {member?.icon && (
@@ -105,7 +106,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
               fontWeight={customStyle?.fontWeight ?? '400'}
               color={customStyle?.textColor ?? theme.textColor?.modalSubHeadingText}
               position="relative"
-              cursor="pointer"
+              textAlign="left"
             >
               {member.name && member.web3Name ? member.name : member.name || member.web3Name}
             </Span>
@@ -117,7 +118,7 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
               gap="5px"
               cursor="pointer"
               minHeight="22px"
-              minWidth="180px"
+              minWidth="140px"
               onMouseEnter={() => {
                 const text = member.chatId === member.recipient ? 'Copy Chat ID' : 'Copy Wallet';
                 setCopyText(text);
@@ -140,6 +141,8 @@ export const ProfileContainer = ({ theme, member, copy, customStyle, loading }:
                 position="relative"
                 whiteSpace="nowrap"
                 cursor="pointer"
+                textWrap="wrap"
+                textAlign="left"
               >
                 {member?.name && member?.web3Name
                   ? `${member?.web3Name} | ${member.abbrRecipient}`
diff --git a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
index 3efd64a4d..5ab16ba78 100644
--- a/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
+++ b/packages/uiweb/src/lib/components/reusables/sharedStyling.tsx
@@ -167,6 +167,7 @@ type SpanStyleProps = {
   cursor?: string;
   whiteSpace?: string;
   visibility?: string;
+  textWrap?: string;
 };
 
 export const Span = styled.span<SpanStyleProps>`
@@ -194,6 +195,7 @@ export const Span = styled.span<SpanStyleProps>`
   z-index: ${(props) => props.zIndex || 'auto'};
   max-width: ${(props) => props.maxWidth || 'initial'};
   white-space: ${(props) => props.whiteSpace || 'normal'};
+  text-wrap: ${(props) => props.textWrap || 'normal'};
 
   &.skeleton {
     > * {