diff --git a/src/api/navigator/index.ts b/src/api/navigator/index.ts
index 77b0a417..bceb33e4 100644
--- a/src/api/navigator/index.ts
+++ b/src/api/navigator/index.ts
@@ -7,7 +7,6 @@ export * from './IRoomModel';
 export * from './IRoomModerationSettings';
 export * from './NavigatorSearchResultViewDisplayMode';
 export * from './RoomInfoData';
-export * from './RoomSettingsData';
 export * from './RoomSettingsUtils';
 export * from './SearchFilterOptions';
 export * from './TryVisitRoom';
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
index d502f86a..9feaba62 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutColorGroupingView.tsx
@@ -1,4 +1,16 @@
-import { FC, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ColorConverter, IFurnitureData } from '@nitrots/nitro-renderer';
+import { FC, useMemo, useState } from 'react';
+import { IPurchasableOffer } from '../../../../../api';
+import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../common';
+import { useCatalog } from '../../../../../hooks';
+import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
+import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
+import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';
+import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
+import { CatalogSpinnerWidgetView } from '../widgets/CatalogSpinnerWidgetView';
+import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
+import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export interface CatalogLayoutColorGroupViewProps extends CatalogLayoutProps
@@ -10,79 +22,153 @@ export const CatalogLayoutColorGroupingView : FC<CatalogLayoutColorGroupViewProp
 {
     const { page = null } = props;
     const [ colorableItems, setColorableItems ] = useState<Map<string, number[]>>(new Map<string, number[]>());
+    const { currentOffer = null, setCurrentOffer = null } = useCatalog();
+    const [ colorsShowing, setColorsShowing ] = useState<boolean>(false);
 
-    // const offers = useMemo(() =>
-    // {
-    //     const offers: CatalogPageMessageOfferData[] = [];
-    //     const addedColorableItems = new Map<string, boolean>();
+    const sortByColorIndex = (a: IPurchasableOffer, b: IPurchasableOffer) =>
+    {
+        if (((!(a.product.furnitureData.colorIndex)) || (!(b.product.furnitureData.colorIndex))))
+        {
+            return 1;
+        }
+        if (a.product.furnitureData.colorIndex > b.product.furnitureData.colorIndex)
+        {
+            return 1;
+        }
+        if (a == b)
+        {
+            return 0;
+        }
+        return -1;
+    }
 
-    //     pageParser.offers.forEach(offer =>
-    //     {
-    //         const product = offer.products[0];
-    //         if(!product) return;
-            
-    //         let furniData: IFurnitureData = null;
+    const sortyByFurnitureClassName = (a: IPurchasableOffer, b: IPurchasableOffer) =>
+    {
+        if (a.product.furnitureData.className > b.product.furnitureData.className)
+        {
+            return 1;
+        }
+        if (a == b)
+        {
+            return 0;
+        }
+        return -1;
+    }
 
-    //         if(product.productType === ProductTypeEnum.FLOOR)
-    //         {
-    //             furniData = GetSessionDataManager().getFloorItemData(product.furniClassId);
-    //         }
-    //         else if(product.productType === ProductTypeEnum.WALL)
-    //         {
-    //             furniData = GetSessionDataManager().getWallItemData(product.furniClassId);
-    //         }
+    const selectOffer = (offer: IPurchasableOffer) =>
+    {
+        offer.activate();
+        setCurrentOffer(offer);
+    }
 
-    //         if(((!(furniData)) || ((furniData.fullName.indexOf('*') === -1))))
-    //         {
-    //             offers.push(offer);
-    //         }
-    //         else
-    //         {
-    //             const name = furniData.fullName.split('*')[0];
-    //             const colorIndex = parseInt(furniData.fullName.split('*')[1]);
+    const selectColor = (colorIndex: number, productName: string) =>
+    {
+        const fullName = `${ productName }*${ colorIndex }`;
+        const index = page.offers.findIndex(offer => offer.product.furnitureData.fullName === fullName);
+        if (index > -1)
+        {
+            selectOffer(page.offers[index]);
+        }
+    }
 
-    //             if(!colorableItems[name])
-    //             {
-    //                 colorableItems[name] = [];
-    //             }
+    const offers = useMemo(() =>
+    {
+        const offers: IPurchasableOffer[] = [];
+        const addedColorableItems = new Map<string, boolean>();
 
-    //             let selectedColor = 0;
-    //             if(furniData.colors)
-    //             {
-    //                 for(let color of furniData.colors)
-    //                 {
-    //                     if(color !== 0xFFFFFF)
-    //                     {
-    //                         selectedColor = color;
-    //                     }
-    //                 }
-    //                 if(colorableItems[name].indexOf(selectedColor) === -1)
-    //                 {
-    //                     colorableItems[name][colorIndex] = selectedColor;
-    //                 }
-    //             }
+        page.offers.sort(sortByColorIndex);
 
-    //             if(!addedColorableItems.has(name))
-    //             {
-    //                 offers.push(offer);
-    //                 addedColorableItems.set(name, true);
-    //             }
-    //         }
-    //     });
-    //     console.log(colorableItems);
-    //     return offers;
-    // }, [colorableItems, pageParser.offers]);
+        let selectedColor = 0;
 
-    return null;
+        page.offers.forEach(offer =>
+        {
+            if(!offer.product) return;
 
-    // return (
-    //     <NitroLayoutGrid>
-    //         <NitroLayoutGridColumn size={ 7 }>
-    //             <CatalogPageOffersView offers={ offers } />
-    //         </NitroLayoutGridColumn>
-    //         <NitroLayoutGridColumn size={ 5 }>
-                
-    //         </NitroLayoutGridColumn>
-    //     </NitroLayoutGrid>
-    // );
+            let furniData: IFurnitureData = offer.product.furnitureData;
+
+            if(((!(furniData)) || (!furniData.hasIndexedColor)))
+            {
+                offers.push(offer);
+            }
+            else
+            {
+                const name = furniData.fullName.split('*')[0];
+                const colorIndex = parseInt(furniData.fullName.split('*')[1]);
+
+                if(!colorableItems.has(name))
+                {
+                    colorableItems.set(name, []);
+                }
+
+                if(furniData.colors)
+                {
+                    for(let color of furniData.colors)
+                    {
+                        if(color !== 0xFFFFFF)
+                        {
+                            selectedColor = color;
+                        }
+                    }
+
+                    if(colorableItems.get(name).indexOf(selectedColor) === -1)
+                    {
+                        colorableItems.get(name)[colorIndex] = selectedColor;
+                    }
+
+                }
+
+                if(!addedColorableItems.has(name))
+                {
+                    offers.push(offer);
+                    addedColorableItems.set(name, true);
+                }
+            }
+        });
+        offers.sort(sortyByFurnitureClassName);
+        return offers;
+    }, [ colorableItems, page.offers ]);
+
+    return (
+        <Grid>
+            <Column size={ 7 } overflow="hidden">
+                <AutoGrid columnCount={ 5 }>
+                    { (!colorsShowing || !currentOffer || !colorableItems.has(currentOffer.product.furnitureData.className)) &&
+                        offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.product.furnitureData.hasIndexedColor ? currentOffer.product.furnitureData.className === offer.product.furnitureData.className : currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer }/>)
+                    }
+                    { (colorsShowing && currentOffer && colorableItems.has(currentOffer.product.furnitureData.className)) &&
+                        colorableItems.get(currentOffer.product.furnitureData.className).map((color, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (currentOffer.product.furnitureData.colorIndex === index) } itemColor={ ColorConverter.int2rgb(color) } className="clear-bg" onClick={ event => selectColor(index, currentOffer.product.furnitureData.className) } />)
+                    }
+                </AutoGrid>
+            </Column>
+            <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                { !currentOffer &&
+                    <>
+                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
+                        <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
+                    </> }
+                { currentOffer &&
+                    <>
+                        <Base position="relative" overflow="hidden">
+                            <CatalogViewProductWidgetView />
+                            <CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
+                            <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-1 end-1" />
+                            { currentOffer.product.furnitureData.hasIndexedColor &&
+                                <Button position="absolute" className="bottom-1 start-1" onClick={ event =>setColorsShowing(prev => !prev) }>
+                                    <FontAwesomeIcon icon="fill-drip" />
+                                </Button> }
+                        </Base>
+                        <Column grow gap={ 1 }>
+                            <Text grow truncate>{ currentOffer.localizationName }</Text>
+                            <Flex justifyContent="between">
+                                <Column gap={ 1 }>
+                                    <CatalogSpinnerWidgetView />
+                                </Column>
+                                <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
+                            </Flex>
+                            <CatalogPurchaseWidgetView />
+                        </Column>
+                    </> }
+            </Column>
+        </Grid>
+    );
 }
diff --git a/src/components/catalog/views/page/layout/GetCatalogLayout.tsx b/src/components/catalog/views/page/layout/GetCatalogLayout.tsx
index 2f5afd1c..c80e162b 100644
--- a/src/components/catalog/views/page/layout/GetCatalogLayout.tsx
+++ b/src/components/catalog/views/page/layout/GetCatalogLayout.tsx
@@ -1,6 +1,7 @@
 import { ICatalogPage } from '../../../../../api';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView';
+import { CatalogLayoutColorGroupingView } from './CatalogLayoutColorGroupingView';
 import { CatalogLayoutDefaultView } from './CatalogLayoutDefaultView';
 import { CatalogLayouGuildCustomFurniView } from './CatalogLayoutGuildCustomFurniView';
 import { CatalogLayouGuildForumView } from './CatalogLayoutGuildForumView';
@@ -23,7 +24,7 @@ import { CatalogLayoutVipGiftsView } from './vip-gifts/CatalogLayoutVipGiftsView
 export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void) =>
 {
     if(!page) return null;
-    
+
     const layoutProps: CatalogLayoutProps = { page, hideNavigation };
 
     switch(page.layoutCode)
@@ -66,8 +67,8 @@ export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void)
             return <CatalogLayoutBadgeDisplayView { ...layoutProps } />;
         case 'roomads':
             return <CatalogLayoutRoomAdsView { ...layoutProps } />;
-        //case 'default_3x3_color_grouping':
-        //return <CatalogLayoutColorGroupingView { ...layoutProps } />;
+        case 'default_3x3_color_grouping':
+            return <CatalogLayoutColorGroupingView { ...layoutProps } />;
         case 'bots':
         case 'default_3x3':
         default: