diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx
index 5d978f16e5..d6daf4f16b 100644
--- a/packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx
@@ -31,7 +31,7 @@ import {
   ModalDialog,
   ModalDialogType,
 } from "@docspace/shared/components/modal-dialog";
-import { mobile, tablet } from "@docspace/shared/utils";
+import { mobile, tablet, isMobile } from "@docspace/shared/utils";
 import { Button, ButtonSize } from "@docspace/shared/components/button";
 import RoomLogoCover from "./sub-components/RoomLogoCover";
 
@@ -44,14 +44,17 @@ const StyledModalDialog = styled(ModalDialog)`
       width: 464px;
     }
 
-    @media ${mobile} {
-      width: 100vw;
-    }
-
     .modal-body {
       padding: 0;
       padding-left: 14px;
     }
+
+    @media ${mobile} {
+      width: 100vw;
+      .modal-body {
+        padding: 0px 16px 8px;
+      }
+    }
   }
 `;
 
@@ -62,7 +65,8 @@ const RoomLogoCoverDialog = () => {
       visible
       autoMaxHeight
       // onClose={onClose}
-      displayType={ModalDialogType.modal}
+      displayType={isMobile() ? ModalDialogType.aside : ModalDialogType.modal}
+      withBodyScroll
     >
       <ModalDialog.Header>{t("RoomCover")}</ModalDialog.Header>
       <ModalDialog.Body>
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx
index cf59f2f1f7..52350316ac 100644
--- a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx
@@ -28,11 +28,11 @@ import { inject, observer } from "mobx-react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 
-import { mobile, tablet } from "@docspace/shared/utils";
+import { mobile, tablet, isMobile } from "@docspace/shared/utils";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
 import { CustomLogo } from "./CustomLogo";
-import { SelectColor } from "./SelectColor";
+import { SelectColor } from "./SelectColor/SelectColor";
 import { SelectIcon } from "./SelectIcon";
 
 const logoColors = [
@@ -96,29 +96,41 @@ const RoomLogoCover = (props) => {
 
   const scrollRef = useRef(null);
 
+  const selectContainerBody = (
+    <>
+      <div className="color-select-container">
+        <SelectColor
+          t={t}
+          selectedColor={color}
+          logoColors={logoColors}
+          onChangeColor={setColor}
+        />
+      </div>
+      <div className="icon-select-container">
+        <SelectIcon
+          t={t}
+          withoutIcon={withoutIcon}
+          setIcon={setIcon}
+          setWithoutIcon={setWithoutIcon}
+        />
+      </div>
+    </>
+  );
+
   return (
     <RoomLogoCoverContainer>
       <div className="room-logo-container">
         <CustomLogo icon={icon} color={color} withoutIcon={withoutIcon} />
       </div>
-      <Scrollbar style={{ height: "400px" }} ref={scrollRef}>
-        <div className="color-select-container">
-          <SelectColor
-            t={t}
-            selectedColor={color}
-            logoColors={logoColors}
-            onChangeColor={setColor}
-          />
-        </div>
-        <div className="icon-select-container">
-          <SelectIcon
-            t={t}
-            withoutIcon={withoutIcon}
-            setIcon={setIcon}
-            setWithoutIcon={setWithoutIcon}
-          />
-        </div>
-      </Scrollbar>
+      <div className="select-container">
+        {isMobile() ? (
+          selectContainerBody
+        ) : (
+          <Scrollbar ref={scrollRef} style={{ height: "400px" }}>
+            {selectContainerBody}
+          </Scrollbar>
+        )}
+      </div>
     </RoomLogoCoverContainer>
   );
 };