diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index f6f6f20c7c..ecb7b5d33c 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -13,12 +13,12 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
-        
+
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
           node-version: 16.19.0
-          
+
       - name: Cache dependencies
         uses: actions/cache@v3
         with:
@@ -26,32 +26,32 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
-            
+
       - name: Install dependencies
         run: yarn install
-        
+
       - name: Build the project
         run: yarn build
-        
+
       - name: Get installed Playwright version
         id: playwright-version
         run: echo "version=$(yarn why --json @playwright/test | grep -h 'workspace:.' | jq --raw-output '.children[].locator' | sed -e 's/@playwright\/test@.*://')" >> $GITHUB_OUTPUT
-        
+
       - uses: actions/cache@v3
         id: playwright-cache
         with:
-          path: '~/.cache/ms-playwright'
-          key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
+          path: "~/.cache/ms-playwright"
+          key: "${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}"
           restore-keys: |
             ${{ runner.os }}-playwright-
-            
+
       - name: Install Playwright's dependencies
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
-        
+
       - name: Run Playwright tests
         run: cd packages/e2e-react && npx playwright test
-        
+
       - name: Upload Playwright report
         uses: actions/upload-artifact@v4
         if: always()
diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
index 2c007f1a71..ae306f2f77 100644
--- a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
+++ b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -93,6 +93,9 @@ const AttachmentPreview = () => {
           <Box
             css={css`
               margin: 30px;
+              @media (max-width: 768px) {
+                margin: 25px;
+              }
             `}
           >
             <Box css={styles.inputContainer}>
@@ -160,6 +163,9 @@ const AttachmentPreview = () => {
       <Modal.Footer
         css={css`
           margin-top: 1.5rem;
+          @media (max-width: 768px) {
+            margin-top: 0rem;
+          }
         `}
       >
         <Button type="secondary" onClick={toggle}>
diff --git a/packages/react/src/views/AttachmentPreview/PreviewType/audio.js b/packages/react/src/views/AttachmentPreview/PreviewType/audio.js
index da4bbe9fff..a24d921522 100644
--- a/packages/react/src/views/AttachmentPreview/PreviewType/audio.js
+++ b/packages/react/src/views/AttachmentPreview/PreviewType/audio.js
@@ -1,11 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
 
 function PreviewAudio({ previewURL }) {
   return (
-    <Box>
-      <audio src={previewURL} width="100%" controls />
+    <Box
+      css={css`
+        width: 100%;
+
+        @media (max-width: 320px) {
+          max-width: 250px;
+          margin: 0 auto;
+        }
+
+        @media (max-width: 420px) {
+          max-width: 280px;
+          margin: 0 auto;
+        }
+        @media (min-width: 481px) and (max-width: 600px) {
+          width: ;
+        }
+
+        audio {
+          width: 100%;
+          max-width: 100%;
+          @media (max-width: 600px) {
+            max-width: 80%;
+          }
+        }
+      `}
+    >
+      <audio src={previewURL} controls />
     </Box>
   );
 }
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index b193d06922..5898fb9fb6 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -62,6 +62,7 @@ export const getChatInputStyles = (theme) => {
         font-size: 18px;
       }
     `,
+
     quoteContainer: css`
       max-height: 300px;
       overflow: scroll;
@@ -165,6 +166,7 @@ export const getInsertLinkModalStyles = (theme) => {
       gap: 0.5rem;
       margin: 1rem 0;
     `,
+
     modalFooter: css`
       padding: 0.75rem 1rem;
     `,
diff --git a/packages/react/src/views/EmojiPicker/EmojiPicker.js b/packages/react/src/views/EmojiPicker/EmojiPicker.js
index 6501eb8320..258b4b73b6 100644
--- a/packages/react/src/views/EmojiPicker/EmojiPicker.js
+++ b/packages/react/src/views/EmojiPicker/EmojiPicker.js
@@ -25,7 +25,16 @@ const CustomEmojiPicker = ({
 
   return (
     <Popup
-      positionStyles={positionStyles}
+      positionStyles={css`
+        ${positionStyles}
+        @media (max-width: 500px) {
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          top: auto;
+        }
+      `}
       wrapperId={wrapperId}
       onClose={onClose}
       height="auto"
@@ -34,7 +43,7 @@ const CustomEmojiPicker = ({
       <Box css={styles.emojiPicker}>
         <EmojiPicker
           height={400}
-          width={350}
+          width="100%"
           onEmojiClick={handleEmojiClick}
           previewConfig={previewConfig}
           searchDisabled={false}
diff --git a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
index 72350e13ee..542ac7671c 100644
--- a/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
+++ b/packages/react/src/views/EmojiPicker/EmojiPicker.styles.js
@@ -15,6 +15,9 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
         --epr-category-label-bg-color: ${theme.colors.background};
         --epr-category-icon-active-color: ${theme.colors.secondary};
         --epr-emoji-size: 25px;
+        @media(max-width:500px){
+        --epr-emoji-size: 30px;
+        }
         --epr-category-navigation-button-size: 20px;
         --epr-emoji-gap: 10px;
 
@@ -60,6 +63,7 @@ const getEmojiPickerStyles = ({ theme, mode }) => {
         --epr-preview-z-index: 6;
         --epr-search-input-bg-color: ${calculatedColors};
 
+               }
         /* Use these properties of color if needed ->
 
       --epr-shadow: 'theme-color';
diff --git a/packages/react/src/views/FileMessage/Files.styles.js b/packages/react/src/views/FileMessage/Files.styles.js
index 3b59460bdb..d021f7147b 100644
--- a/packages/react/src/views/FileMessage/Files.styles.js
+++ b/packages/react/src/views/FileMessage/Files.styles.js
@@ -113,6 +113,11 @@ export const fileDisplayStyles = {
     text-overflow: ellipsis;
     white-space: nowrap;
     padding: 0 0.5rem 0.5rem;
+    @media (max-width: 600px) {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+    }
   `,
 
   centeredColumnStyles: css`
diff --git a/packages/react/src/views/LoginForm/LoginForm.js b/packages/react/src/views/LoginForm/LoginForm.js
index 1285e5e1eb..7258cba9b0 100644
--- a/packages/react/src/views/LoginForm/LoginForm.js
+++ b/packages/react/src/views/LoginForm/LoginForm.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import {
-  GenericModal,
+  Modal,
   Box,
   Button,
   Input,
@@ -83,52 +83,64 @@ export default function LoginForm() {
 
   return isLoginModalOpen ? (
     <>
-      <GenericModal
-        variant="info"
-        title="Login"
-        icon="key"
-        onClose={handleClose}
-      >
-        <Box>
-          {fields.map((field, index) => (
-            <Box key={index} css={styles.fieldContainer}>
-              <Box css={styles.fieldLabel}>{field.label}</Box>
-              <Box css={styles.fieldRow}>
-                <Input
-                  type={field.type || 'text'}
-                  onChange={field.onChange}
-                  placeholder={field.placeholder}
-                  onKeyPress={handleKeyPress}
-                  style={{
-                    ...(field.error && {
-                      borderColor: theme.colors.destructive,
-                      outline: 'none',
-                    }),
-                  }}
-                />
-                {field.label === 'Password' && (
+      <Modal variant="info" onClose={handleClose} css={styles.modal}>
+        <Modal.Header>
+          <Modal.Title css={styles.modalTitle}>
+            <Icon
+              name="key"
+              size="1.25rem"
+              css={css`
+                margin-right: 0.5rem;
+              `}
+            />{' '}
+            Login
+          </Modal.Title>
+          <Modal.Close onClick={handleClose} />
+        </Modal.Header>
+        <Modal.Content>
+          <Box>
+            {fields.map((field, index) => (
+              <Box key={index} css={styles.fieldContainer}>
+                <Box css={styles.fieldLabel}>{field.label}</Box>
+                <Box css={styles.fieldRow}>
+                  <Input
+                    type={field.type || 'text'}
+                    onChange={field.onChange}
+                    placeholder={field.placeholder}
+                    onKeyPress={handleKeyPress}
+                    style={{
+                      ...(field.error && {
+                        borderColor: theme.colors.destructive,
+                        outline: 'none',
+                      }),
+                    }}
+                  />
+                  {field.label === 'Password' && (
+                    <Box
+                      type="button"
+                      css={styles.passwordEye}
+                      onClick={handleTogglePassword}
+                    >
+                      <Icon name={iconName} size="1.25rem" />
+                    </Box>
+                  )}
+                </Box>
+                {field.error && (
                   <Box
-                    type="button"
-                    css={styles.passwordEye}
-                    onClick={handleTogglePassword}
+                    is="span"
+                    css={css`
+                      color: ${theme.colors.destructive};
+                      font-size: 13px;
+                    `}
                   >
-                    <Icon name={iconName} size="1.25rem" />
+                    This field is required
                   </Box>
                 )}
               </Box>
-              {field.error && (
-                <Box
-                  is="span"
-                  css={css`
-                    color: ${theme.colors.destructive};
-                    font-size: 13px;
-                  `}
-                >
-                  This field is required
-                </Box>
-              )}
-            </Box>
-          ))}
+            ))}
+          </Box>
+        </Modal.Content>
+        <Modal.Footer>
           <Button
             type="primary"
             onClick={handleSubmit}
@@ -138,8 +150,8 @@ export default function LoginForm() {
           >
             Login
           </Button>
-        </Box>
-      </GenericModal>
+        </Modal.Footer>
+      </Modal>
     </>
   ) : null;
 }
diff --git a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
index 5f87c0b5e4..3bb1115040 100644
--- a/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
+++ b/packages/react/src/views/Message/BubbleVariant/Bubble.styles.js
@@ -167,6 +167,9 @@ export const getBubbleStylesMe = (theme) => {
       .ec-message-body:hover & {
         left: auto;
         right: calc(100% - 20px);
+        @media (max-width: 600px) {
+          right: 0;
+        }
       }
     `,
 
@@ -181,7 +184,7 @@ export const getBubbleStylesMe = (theme) => {
 
     emojiPickerStylesMe: css`
       left: auto;
-      right: calc(100% + 5px);
+      right: 0;
     `,
   };
 
diff --git a/packages/react/src/views/ReportMessage/MessageReportWindow.js b/packages/react/src/views/ReportMessage/MessageReportWindow.js
index 33957e72ea..5984bcc28e 100644
--- a/packages/react/src/views/ReportMessage/MessageReportWindow.js
+++ b/packages/react/src/views/ReportMessage/MessageReportWindow.js
@@ -18,7 +18,7 @@ const MessageReportWindow = ({ messageId }) => {
       <Box css={styles.conatiner}>
         <Input
           textArea
-          placeholder="Why do you want to report this message?"
+          placeholder="Reason for reporting?"
           onChange={(e) => {
             setDescription(e.target.value);
           }}
diff --git a/packages/ui-elements/src/components/Modal/Modal.styles.js b/packages/ui-elements/src/components/Modal/Modal.styles.js
index 6ee34dad82..e5d1d0c0b6 100644
--- a/packages/ui-elements/src/components/Modal/Modal.styles.js
+++ b/packages/ui-elements/src/components/Modal/Modal.styles.js
@@ -20,6 +20,27 @@ export const getModalstyles = (theme) => {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      @media (max-width: 320px) {
+        width: 90%;
+        padding: 0.3rem;
+        border-radius: 10px;
+      }
+      @media (min-width: 321px) and (max-width: 390px) {
+        width: 85%;
+        border-radius: 10px;
+      }
+      @media (min-width: 391px) and (max-width: 480px) {
+        width: 70%;
+        border-radius: 15px;
+      }
+      @media (min-width: 481px) and (max-width: 600px) {
+        width: 60%;
+        border-radius: 10px;
+      }
+      @media (min-width: 601px) and (max-width: 768px) {
+        width: 65%;
+        border-radius: 12px;
+      }
     `,
   };
 
@@ -31,6 +52,9 @@ export const ModalContentStyles = {
     position: relative;
     overflow-y: auto;
     overflow-x: hidden;
+    @media (max-width: 320px) {
+      font-size: 1rem;
+    }
   `,
 };
 
@@ -65,6 +89,19 @@ export const ModalFooterStyles = {
     justify-content: flex-end;
     width: 100%;
     gap: 0.5rem;
+    @media (max-width: 420px) {
+      padding: 0.5rem;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    button {
+      margin-left: 0.5rem;
+      @media (max-width: 420px) {
+        margin-left: 0;
+        width: 100%;
+        font-weight: 1.2rem;
+      }
+    }
   `,
 };
 
@@ -74,6 +111,20 @@ export const ModalHeaderStyles = {
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
+    icon {
+      @media (max-width: 320px) {
+        size: 1rem;
+      }
+      @media (min-width: 321px) and (max-width: 390px) {
+        font-size: 1.3rem;
+      }
+      @media (min-width: 391px) and (max-width: 480px) {
+        font-size: 1.1rem;
+      }
+      @media (min-width: 481px) and (max-width: 600px) {
+        font-size: 1.2rem;
+      }
+    }
   `,
 };
 
@@ -94,6 +145,22 @@ export const ModalTitleStyles = {
     white-space: nowrap;
     display: flex;
     align-items: center;
+    @media (max-width: 320px) {
+      font-size: 1.2rem;
+      margin: 0.15rem !important;
+    }
+    @media (min-width: 321px) and (max-width: 390px) {
+      font-size: 1.2rem;
+    }
+    @media (min-width: 391px) and (max-width: 480px) {
+      font-size: 1.3rem;
+    }
+    @media (min-width: 481px) and (max-width: 600px) {
+      font-size: 1.3rem;
+    }
+    @media (min-width: 601px) and (max-width: 768px) {
+      font-size: 1.2rem;
+    }
   `,
 };
 
diff --git a/packages/ui-elements/src/components/Modal/ModalClose.js b/packages/ui-elements/src/components/Modal/ModalClose.js
index 90f82f2d81..cae00b3802 100644
--- a/packages/ui-elements/src/components/Modal/ModalClose.js
+++ b/packages/ui-elements/src/components/Modal/ModalClose.js
@@ -18,6 +18,10 @@ export const ModalClose = ({
     <Box
       css={css`
         margin: 0.25rem !important;
+        @media (max-width: 320px) {
+          margin: 0.2rem;
+          size: 0.2rem;
+        }
       `}
       className={`ec-modal-close ${className} ${classNames}`}
       style={{ ...style, ...styleOverrides }}