diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.styled.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.styled.tsx
index 422dd1718b..210bf7f0b0 100644
--- a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.styled.tsx
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.styled.tsx
@@ -86,7 +86,8 @@ const StyledColorItem = styled.div<ColorItemProps>`
   ${(props) =>
     props.isSelected &&
     css`
-      background-color: #f3f4f4;
+      background-color: ${(props) =>
+        props.theme.logoCover.selectColor.backgroundColor};
     `}
 
   &:hover {
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.tsx
index 5c759ee1a0..40c306d8ed 100644
--- a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.tsx
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectColor/SelectColor.tsx
@@ -25,9 +25,8 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React, { useState, useRef } from "react";
-import styled, { css } from "styled-components";
 
-import { mobile, tablet, isMobile } from "@docspace/shared/utils";
+import { isMobile } from "@docspace/shared/utils";
 
 import {
   ModalDialog,
diff --git a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectIcon.tsx b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectIcon.tsx
index c6cc84ec84..963a02c211 100644
--- a/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectIcon.tsx
+++ b/packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/SelectIcon.tsx
@@ -27,6 +27,7 @@
 import React from "react";
 
 import styled, { css } from "styled-components";
+import hexRgb from "hex-rgb";
 import { mobile, tablet } from "@docspace/shared/utils";
 
 import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme";
@@ -47,19 +48,20 @@ const StyledWithoutIcon = styled.div<WithoutIconProps>`
   font-weight: 600;
   line-height: 20px;
   user-select: none;
-  padding: 4px 16px;
-  color: #657077;
-  background-color: #eceef1;
-  border: 1px solid rgb(236, 238, 241);
+  padding: 3px 15px;
+  color: ${(props) => props.theme.logoCover.textColor};
+  background-color: ${(props) => props.theme.logoCover.selectedBackgroundColor};
+  border: 1px solid ${(props) => props.theme.logoCover.selectedBorderColor};
   border-radius: 16px;
   &:hover {
     cursor: pointer;
   }
 
   ${(props) =>
-    props.isSelected &&
+    !props.isSelected &&
     css`
-      background-color: #fff;
+      background-color: ${(props) => props.theme.logoCover.backgroundColor};
+      border: 1px solid ${(props) => props.theme.logoCover.borderColor};
     `}
 `;
 
@@ -111,6 +113,7 @@ export const SelectIcon = ({
               className="cover-icon"
               size={20}
               alt="cover-icon"
+              color={"#657077"}
             />
           </StyledIconContainer>
         ))}