diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/RoomLogoCoverDialog.types.ts b/packages/client/src/components/dialogs/RoomLogoCoverDialog/RoomLogoCoverDialog.types.ts
new file mode 100644
index 0000000000..06e5f6cd1f
--- /dev/null
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/RoomLogoCoverDialog.types.ts
@@ -0,0 +1,38 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { Dispatch, SetStateAction } from "react";
+import type { TTranslation } from "@docspace/shared/types";
+
+export interface CustomLogoProps {
+  color?: string;
+}
+
+export interface SelectColorProps {
+  t: TTranslation;
+  logoColors: string[];
+  onChangeColor: Dispatch<SetStateAction<string>>;
+}
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/CustomLogo.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/CustomLogo.tsx
new file mode 100644
index 0000000000..5bb4efd6ce
--- /dev/null
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/CustomLogo.tsx
@@ -0,0 +1,40 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import React from "react";
+import styled from "styled-components";
+import { CustomLogoProps } from "../RoomLogoCoverDialog.types";
+
+const StyledLogo = styled.div`
+  background-color: ${(props) => props.color};
+  width: 96px;
+  height: 96px;
+  border-radius: 16px;
+`;
+
+export const CustomLogo = ({ color }: CustomLogoProps) => {
+  return <StyledLogo color={color} />;
+};
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx
new file mode 100644
index 0000000000..d064d4cc36
--- /dev/null
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx
@@ -0,0 +1,110 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+import React, { useState } from "react";
+import { inject, observer } from "mobx-react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { RoomLogoCoverProps } from "./RoomLogoCover.types";
+
+import { CustomLogo } from "./CustomLogo";
+import { SelectColor } from "./SelectColor";
+
+const logoColors = [
+  "#FF6680",
+  "#FF8F40",
+  "#F2D230",
+  "#61C059",
+  "#70E096",
+  "#1FCECB",
+  "#5CC3F7",
+  "#6191F2",
+  "#7757D9",
+  "#B679F2",
+  "#FF7FD4",
+];
+
+const RoomLogoCoverContainer = styled.div`
+  .room-logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .color-name {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .colors-container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+`;
+
+const RoomLogoCover = (props) => {
+  // const { appearanceTheme } = props;
+  const { t } = useTranslation(["Common"]);
+
+  const [color, setColor] = useState<string>(logoColors[3]); // set room icon default color
+
+  // const onChangeColor: React.MouseEvent = (color: string) => {
+  //   setColor(color);
+  // };
+
+  return (
+    <RoomLogoCoverContainer>
+      <div className="room-logo-container">
+        <CustomLogo color={color} />
+      </div>
+      <div className="color-select-container">
+        <SelectColor t={t} logoColors={logoColors} onChangeColor={setColor} />
+      </div>
+    </RoomLogoCoverContainer>
+  );
+};
+
+export default inject<TStore>(({ settingsStore }) => {
+  const {
+    appearanceTheme,
+    //   selectedThemeId,
+
+    // getAppearanceTheme,
+    // currentColorScheme,
+
+    //  theme,
+  } = settingsStore;
+
+  return {
+    appearanceTheme,
+    //  selectedThemeId,
+
+    // getAppearanceTheme,
+    //  currentColorScheme,
+
+    //   theme,
+  };
+})(observer(RoomLogoCover));
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor.tsx
new file mode 100644
index 0000000000..ebf988e37b
--- /dev/null
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor.tsx
@@ -0,0 +1,85 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import React from "react";
+import styled, { css } from "styled-components";
+import { IconButton } from "@docspace/shared/components/icon-button";
+import PlusSvgUrl from "PUBLIC_DIR/images/icons/16/button.plus.react.svg?url";
+import { SelectColorProps } from "../RoomLogoCoverDialog.types";
+
+interface ColorItemProps {
+  isEmptyColor?: boolean;
+}
+
+const StyledColorItem = styled.div<ColorItemProps>`
+  width: 30px;
+  height: 30px;
+  margin-right: 10px;
+  margin-top: 8px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color};
+
+  ${(props) =>
+    props.isEmptyColor &&
+    css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `}
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const SelectColor = ({
+  t,
+  logoColors,
+  onChangeColor,
+}: SelectColorProps) => {
+  return (
+    <>
+      <div className="color-name">{t("Common:Color")}</div>
+      <div className="colors-container">
+        {logoColors.map((color) => (
+          <StyledColorItem
+            key={color}
+            color={color}
+            onClick={() => onChangeColor(color)}
+          />
+        ))}
+        <StyledColorItem isEmptyColor>
+          <IconButton
+            className="select-color-plus-icon"
+            size={16}
+            iconName={PlusSvgUrl}
+            isFill
+          />
+        </StyledColorItem>
+      </div>
+    </>
+  );
+};