diff --git a/src/components/catalog/views/page/layout/CatalogLayout.scss b/src/components/catalog/views/page/layout/CatalogLayout.scss
index e72a9379..bc476e25 100644
--- a/src/components/catalog/views/page/layout/CatalogLayout.scss
+++ b/src/components/catalog/views/page/layout/CatalogLayout.scss
@@ -36,6 +36,14 @@
     }
 }
 
+.nitro-catalog-layout-vip-gifts-grid {
+
+    .layout-grid-item {
+        height: 55px !important;
+        max-height: 55px !important;
+    }
+}
+
 .nitro-catalog-layout-marketplace-post-offer {
     width: $marketplace-post-offer-width;
     height: $marketplace-post-offer-height;
diff --git a/src/components/catalog/common/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx b/src/components/catalog/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx
similarity index 100%
rename from src/components/catalog/common/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx
rename to src/components/catalog/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx
diff --git a/src/components/catalog/common/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
similarity index 67%
rename from src/components/catalog/common/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
rename to src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
index be60d347..f3ad28ea 100644
--- a/src/components/catalog/common/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
@@ -1,21 +1,16 @@
 import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { LocalizeText } from '../../../../../../api';
+import { Grid } from '../../../../../../common/Grid';
+import { Text } from '../../../../../../common/Text';
 import { SendMessageHook } from '../../../../../../hooks';
-import { NitroCardGridView } from '../../../../../../layout';
-import { NitroLayoutBase } from '../../../../../../layout/base';
-import { NotificationUtilities } from '../../../../../notification-center/common/NotificationUtilities';
+import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
 import { useCatalogContext } from '../../../../context/CatalogContext';
 import { CatalogActions } from '../../../../reducers/CatalogReducer';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
-import { VipGiftItem } from './gift-item/VipGiftItemView';
+import { VipGiftItem } from './VipGiftItemView';
 
-export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
-{
-
-}
-
-export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props =>
+export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
 {
     const { catalogState, dispatchCatalogState } = useCatalogContext();
     
@@ -64,10 +59,10 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = pro
     
     return (
         <>
-        <NitroLayoutBase className='text-black'>{giftsAvailable()}</NitroLayoutBase>
-        <NitroCardGridView columns={1} className='text-black'>
-            { catalogState.clubGifts && catalogState.clubGifts.offers.map( (offer, index) => <VipGiftItem key={index} offer={offer} isAvailable={ catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && catalogState.clubGifts.giftsAvailable > 0} onSelect={selectGift}/>)}
-        </NitroCardGridView>
+            <Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
+            <Grid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
+                { (catalogState.clubGifts.offers.length > 0) && catalogState.clubGifts.offers.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && (catalogState.clubGifts.giftsAvailable > 0)) } onSelect={ selectGift }/>) }
+            </Grid>
         </>
     )
 }
diff --git a/src/components/catalog/common/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
similarity index 63%
rename from src/components/catalog/common/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx
rename to src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
index 2bb32ba0..61e683ac 100644
--- a/src/components/catalog/common/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx
+++ b/src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
@@ -1,8 +1,11 @@
 import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../../api';
-import { NitroCardGridItemView } from '../../../../../../../layout';
-import { ProductImageUtility } from '../../../../../../notification-center/common/ProductImageUtility';
+import { LocalizeText } from '../../../../../../api';
+import { Button } from '../../../../../../common/Button';
+import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem';
+import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
+import { Text } from '../../../../../../common/Text';
+import { ProductImageUtility } from '../../../../../../views/notification-center/common/ProductImageUtility';
 
 export interface VipGiftItemViewProps
 {
@@ -47,15 +50,12 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
     }, [offer]);
 
     return (
-        <NitroCardGridItemView className='w-100 vip-gift-item align-items-center'>
-            <img src={ getImageUrlForOffer() } className='mx-3' alt='' />
-            <div className='h-100 flex-grow-1 justify-content-center '>
-                <div className='fw-bold'>{getItemTitle()}</div>
-                <div className='fst-italic fs-6'>{getItemDesc()}</div>
-            </div>
-            <div className='btn-group-vertical mx-1 gap-2'>
-                <button className='btn btn-secondary btn-sm' disabled={!isAvailable} onClick={() => onSelect(offer.localizationId)}>{ LocalizeText('catalog.club_gift.select') }</button>
-            </div>
-        </NitroCardGridItemView>
-    )
+        <LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
+            <LayoutImage imageUrl={ getImageUrlForOffer() } fit={ false } style={ { width: 50, height: 50 } } />
+            <Text grow fontWeight="bold">{ getItemTitle() }</Text>
+            <Button variant="secondary" size="sm" onClick={ () => onSelect(offer.localizationId) }>
+                { LocalizeText('catalog.club_gift.select') }
+            </Button>
+        </LayoutGridItem>
+    );
 }