diff --git a/src/assets/images/catalog/diamond_info_illustration.gif b/src/assets/images/catalog/diamond_info_illustration.gif
new file mode 100644
index 00000000..d082ef4d
Binary files /dev/null and b/src/assets/images/catalog/diamond_info_illustration.gif differ
diff --git a/src/assets/styles/scrollbars.scss b/src/assets/styles/scrollbars.scss
index 19ad9c90..bc995b77 100644
--- a/src/assets/styles/scrollbars.scss
+++ b/src/assets/styles/scrollbars.scss
@@ -7,12 +7,13 @@
     border-radius: $border-radius;
     background: rgba($primary,.4);
     box-shadow:inset 1px 0 rgba($black,.2);
+    padding-top:3px;
 }
 
 ::-webkit-scrollbar-thumb {
     border-radius: $border-radius;
     background: #DCDCDC;
-    box-shadow:inset 1px 4px $white, inset -1px -4px rgba($black,.2), 0 1px rgba($black,.2);
+    box-shadow:inset 0px 4px $white, inset 0px -4px rgba($black,.2), 0 1px rgba($black,.2);
     width: 4px;
 }
 
diff --git a/src/views/catalog/CatalogMessageHandler.tsx b/src/views/catalog/CatalogMessageHandler.tsx
index c3825e3b..7afba364 100644
--- a/src/views/catalog/CatalogMessageHandler.tsx
+++ b/src/views/catalog/CatalogMessageHandler.tsx
@@ -31,6 +31,8 @@ export const CatalogMessageHandler: FC<CatalogMessageHandlerProps> = props =>
     {
         const parser = event.getParser();
 
+        console.log(parser)
+
         dispatchCatalogState({
             type: CatalogActions.SET_CATALOG_PAGE_PARSER,
             payload: {
diff --git a/src/views/catalog/views/page/layout/CatalogLayout.scss b/src/views/catalog/views/page/layout/CatalogLayout.scss
index 768a4b81..7482c804 100644
--- a/src/views/catalog/views/page/layout/CatalogLayout.scss
+++ b/src/views/catalog/views/page/layout/CatalogLayout.scss
@@ -6,3 +6,4 @@
 @import './spaces-new/CatalogLayoutSpacesView';
 @import './trophies/CatalogLayoutTrophiesView';
 @import './vip-buy/CatalogLayoutVipBuyView';
+@import './info-loyalty/CatalogLayoutInfoLoyaltyView.scss';
diff --git a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx
index 35d9a507..053e00cc 100644
--- a/src/views/catalog/views/page/layout/GetCatalogLayout.tsx
+++ b/src/views/catalog/views/page/layout/GetCatalogLayout.tsx
@@ -1,7 +1,9 @@
 import { ICatalogPageParser, RoomPreviewer } from 'nitro-renderer';
 import { CatalogLayoutDefaultView } from './default/CatalogLayoutDefaultView';
 import { CatalogLayoutFrontpage4View } from './frontpage4/CatalogLayoutFrontpage4View';
+import { CatalogLayoutInfoLoyaltyView } from './info-loyalty/CatalogLayoutInfoLoyaltyView';
 import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
+import { CatalogLayoutPets2View } from './pets2/CatalogLayoutPets2View';
 import { CatalogLayoutPets3View } from './pets3/CatalogLayoutPets3View';
 import { CatalogLayoutSingleBundleView } from './single-bundle/CatalogLayoutSingleBundleView';
 import { CatalogLayoutSpacesView } from './spaces-new/CatalogLayoutSpacesView';
@@ -10,16 +12,17 @@ import { CatalogLayoutVipBuyView } from './vip-buy/CatalogLayoutVipBuyView';
 
 export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer: RoomPreviewer): JSX.Element
 {
+
     switch(pageParser.layoutCode)
     {
         case 'frontpage_featured':
-            return null;
+            return null
         case 'frontpage4':
             return <CatalogLayoutFrontpage4View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets':
             return <CatalogLayoutPetView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets2':
-            return null;
+            return <CatalogLayoutPets2View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'pets3':
             return <CatalogLayoutPets3View roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'vip_buy':
@@ -41,7 +44,9 @@ export function GetCatalogLayout(pageParser: ICatalogPageParser, roomPreviewer:
         case 'spaces_new':
             return <CatalogLayoutSpacesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'trophies':
-            return <CatalogLayoutTrophiesView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
+            return <CatalogLayoutTrophiesView roomPreviewer={roomPreviewer} pageParser={pageParser} />;
+        case 'info_loyalty':
+            return <CatalogLayoutInfoLoyaltyView roomPreviewer={ roomPreviewer } pageParser={ pageParser } />;
         case 'bots':
         case 'default_3x3':
         default:
diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss
new file mode 100644
index 00000000..8bb939db
--- /dev/null
+++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.scss
@@ -0,0 +1,15 @@
+.nitro-catalog-layout-info-loyalty {
+
+    .info-loyalty-content {
+        background-repeat: no-repeat;
+        background-position: top right;
+        background-image: url('../../../../../../assets/images/catalog/diamond_info_illustration.gif');
+        padding-right:123px;
+    }
+
+    .info-image {
+        width: 123px;
+        height:350px;
+        background-image: url('../../../../../../assets/images/catalog/diamond_info_illustration.gif');
+    }
+}
diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx
new file mode 100644
index 00000000..bbca55b2
--- /dev/null
+++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutInfoLoyaltyViewProps } from './CatalogLayoutInfoLoyaltyView.types';
+
+export const CatalogLayoutInfoLoyaltyView: FC<CatalogLayoutInfoLoyaltyViewProps> = props =>
+{
+    const { pageParser = null } = props;
+    
+    return (
+        <div className="h-100 nitro-catalog-layout-info-loyalty text-black d-flex flex-row">
+            <div className="overflow-auto h-100 d-flex flex-column info-loyalty-content">
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 0) } } />
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts
new file mode 100644
index 00000000..81405a89
--- /dev/null
+++ b/src/views/catalog/views/page/layout/info-loyalty/CatalogLayoutInfoLoyaltyView.types.ts
@@ -0,0 +1,6 @@
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutInfoLoyaltyViewProps extends CatalogLayoutProps
+{
+    
+}
diff --git a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index 1b44e5c5..88c8f61a 100644
--- a/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/views/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -141,8 +141,8 @@ export const CatalogLayoutPetView: FC<CatalogLayoutPetViewProps> = props =>
 
     return (
         <div className="row h-100 nitro-catalog-layout-pets">
-            <div className="col-7">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
+            <div className="col-7 h-100">
+                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 h-100 overflow-auto catalog-offers-container single-bundle-items-container">
                     { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) =>
                         {
                             return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
new file mode 100644
index 00000000..1b85077d
--- /dev/null
+++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.scss
@@ -0,0 +1,2 @@
+.nitro-catalog-layout-pets2 {
+}
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
new file mode 100644
index 00000000..c2d0a31a
--- /dev/null
+++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.tsx
@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { GetCatalogPageImage, GetCatalogPageText } from '../../../../utils/CatalogUtilities';
+import { CatalogLayoutPets2ViewProps } from './CatalogLayoutPets2View.types';
+
+export const CatalogLayoutPets2View: FC<CatalogLayoutPets2ViewProps> = props =>
+{
+    const { pageParser = null } = props;
+    
+    return (
+        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
+            <div className="overflow-auto h-100 d-flex flex-column">
+                <div className="d-flex flex-row">
+                    <div className="d-block mb-1 me-1">
+                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+                    </div>
+                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
+                </div>
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
+                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
+            </div>
+        </div>
+    );
+}
diff --git a/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts
new file mode 100644
index 00000000..28a4c845
--- /dev/null
+++ b/src/views/catalog/views/page/layout/pets2/CatalogLayoutPets2View.types.ts
@@ -0,0 +1,6 @@
+import { CatalogLayoutProps } from '../CatalogLayout.types';
+
+export interface CatalogLayoutPets2ViewProps extends CatalogLayoutProps
+{
+    
+}
diff --git a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
index 78239150..ddcf3ef1 100644
--- a/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
+++ b/src/views/catalog/views/page/layout/pets3/CatalogLayoutPets3View.tsx
@@ -7,17 +7,16 @@ export const CatalogLayoutPets3View: FC<CatalogLayoutPets3ViewProps> = props =>
     const { pageParser = null } = props;
     
     return (
-        <div className="row h-100 nitro-catalog-layout-pets3">
-            <div className="col-7 text-black">
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 1) } } />
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
-                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 3) } } />
-            </div>
-            <div className="position-relative d-flex flex-column col-5 justify-content-center align-items-center">
-                <div className="d-block mb-2">
-                    <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+        <div className="h-100 nitro-catalog-layout-pets3 bg-muted p-1 rounded text-black">
+            <div className="overflow-auto h-100 d-flex flex-column">
+                <div className="d-flex flex-row">
+                    <div className="d-block mb-1 me-1">
+                        <img alt="" src={ GetCatalogPageImage(pageParser, 1) } />
+                    </div>
+                    <h6 className="align-self-center">{ GetCatalogPageText(pageParser, 1) }</h6>
                 </div>
-                <div className="fs-6 text-center text-black lh-sm overflow-hidden">{ GetCatalogPageText(pageParser, 0) }</div>
+                <div dangerouslySetInnerHTML={ {__html: GetCatalogPageText(pageParser, 2) } } />
+                {GetCatalogPageText(pageParser, 3) && <div className="mt-auto bg-secondary text-white rounded p-1 text-center" dangerouslySetInnerHTML={{ __html: GetCatalogPageText(pageParser, 3) }} />}
             </div>
         </div>
     );
diff --git a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
index 1e0d5058..9fd95fba 100644
--- a/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
+++ b/src/views/catalog/views/page/layout/single-bundle/CatalogLayoutSingleBundleView.tsx
@@ -13,8 +13,8 @@ export const CatalogLayoutSingleBundleView: FC<CatalogLayoutSingleBundleViewProp
 
     return (
         <div className="row h-100 nitro-catalog-layout-single-bundle">
-            <div className="col-7">
-                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container">
+            <div className="col-7 h-100">
+                <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container single-bundle-items-container h-100 overflow-auto">
                     { activeOffer && activeOffer.products && (activeOffer.products.length > 0) && activeOffer.products.map((product, index) =>
                         {
                             return <CatalogProductView key={ index } isActive={ false } product={ product } />
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
index 56e84b55..ce1e1c03 100644
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
+++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.scss
@@ -1,7 +1,3 @@
 .nitro-catalog-layout-spaces {
 
-    .catalog-offers-container {
-        height: 284px;
-        max-height: 284px;
-    }
 }
diff --git a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
index 6666bcac..b4baaffc 100644
--- a/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
+++ b/src/views/catalog/views/page/layout/spaces-new/CatalogLayoutSpacesView.tsx
@@ -70,7 +70,7 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutSpacesViewProps> = props =
 
     return (
         <div className="row h-100 nitro-catalog-layout-spaces">
-            <div className="col-7">
+            <div className="col-7 h-100 d-flex flex-column">
                 <div className="d-flex">
                     <div className="btn-group mx-auto mb-1 w-100">
                         { groupNames.map((name, index) =>
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
index b4e804ae..58637ed9 100644
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
+++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.scss
@@ -5,8 +5,4 @@
         resize: none;
     }
 
-    .catalog-offers-container {
-        height: 192px;
-        max-height: 192px;
-    }
 }
diff --git a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
index d282dc0f..a1b3acad 100644
--- a/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
+++ b/src/views/catalog/views/page/layout/trophies/CatalogLayoutTrophiesView.tsx
@@ -17,7 +17,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutTrophiesViewProps> = pro
 
     return (
         <div className="row h-100 nitro-catalog-layout-trophies">
-            <div className="d-flex flex-column col-7">
+            <div className="d-flex flex-column col-7 h-100">
                 <CatalogPageOffersView offers={ pageParser.offers } />
                 <div className="d-flex mt-2">
                     <textarea className="form-control w-100" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) }></textarea>
diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
index 1f10b035..8e997774 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
@@ -54,8 +54,8 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
 
     return (
         <div className="row h-100 nitro-catalog-layout-vip-buy">
-            <div className="col-7">
-                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container">
+            <div className="col-7 h-100">
+                <div className="row row-cols-1 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
                     { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                         {
                             return <div key={ index } className="col pe-1 pb-1 catalog-offer-item-container">
diff --git a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
index 9c67deed..89da4fa9 100644
--- a/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
+++ b/src/views/catalog/views/page/offers/CatalogPageOffersView.tsx
@@ -22,10 +22,22 @@ export const CatalogPageOffersView: FC<CatalogPageOffersViewProps> = props =>
     }, [ offers, dispatchCatalogState ]);
 
     return (
-        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100">
+        <div className="row row-cols-5 align-content-start g-0 mb-n1 w-100 catalog-offers-container h-100 overflow-auto">
             { offers && (offers.length > 0) && offers.map((offer, index) =>
                 {
                     return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+            })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+                        })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
+                        })}
+                        { offers && (offers.length > 0) && offers.map((offer, index) =>
+                {
+                    return <CatalogPageOfferView key={ index } isActive={ (activeOffer === offer) } offer={ offer } />
                 }) }
         </div>
     );