diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
index bc036e7780..b0deea6b3c 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
@@ -16,10 +16,11 @@ export const StyledPreview = styled.div`
   display: flex;
 
   .article {
-    width: 251px;
+    width: 211px;
     background: ${(props) => props.theme.article.background};
     padding: 0 20px;
-    border-radius: 0 0 12px 12px;
+    border: none;
+    border-radius: 0 0 0 12px;
 
     .logo {
       padding: 22px 0;
@@ -39,5 +40,33 @@ export const StyledPreview = styled.div`
         color: ${(props) => props.theme.mainButton.textColor};
       }
     }
+
+    .catalog-header {
+      color: ${(props) => props.theme.article.catalogItemHeader};
+      padding-left: 12px;
+      padding-bottom: 4px;
+    }
+
+    .item {
+      display: flex;
+      gap: 8px;
+      padding: 10px 0 10px 10px;
+      border-radius: 3px;
+
+      .label {
+        color: ${(props) => props.theme.article.catalogItemText};
+      }
+    }
+
+    .item-active {
+      background: ${(props) => props.theme.article.catalogItemActiveBackground};
+    }
+  }
+
+  .body {
+    width: 69px;
+    background: ${(props) => props.theme.backgroundColor};
+    border: none;
+    border-radius: 0 0 12px 0;
   }
 `;
diff --git a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js
index 63dc95c4bb..0de2581c21 100644
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js
@@ -41,7 +41,29 @@ const ThemePreview = (props) => {
               </Text>
               <img src="/static/images/triangle-main-button.svg" />
             </button>
+            <Text fontSize="11px" fontWeight={600} className="catalog-header">
+              {t("Common:Rooms")}
+            </Text>
+            <div className="item">
+              <img src="/static/images/catalog.user.react.svg" />
+              <Text className="label" fontWeight={600}>
+                Personal
+              </Text>
+            </div>
+            <div className="item item-active">
+              <img src="/static/images/catalog.folder.react.svg" />
+              <Text className="label" fontWeight={600}>
+                Shared
+              </Text>
+            </div>
+            <div className="item">
+              <img src="/static/images/catalog.archive.react.svg" />
+              <Text className="label" fontWeight={600}>
+                Archived
+              </Text>
+            </div>
           </div>
+          <div className="body"></div>
         </StyledPreview>
       </ThemeProvider>
     </StyledWrapper>