diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index dde64cfc..9e5fe9d7 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -89,8 +89,7 @@
         .icon-hc-banner {
             width: 68px;
             height: 40px;
-            background: url("../../assets/images/catalog/hc_big.png") center
-                no-repeat;
+            background: url("../../assets/images/catalog/hc_big.png") center no-repeat;
         }
     }
 }
@@ -122,10 +121,4 @@
 .nitro-catalog-header {
     width: 290px;
     height: 60px;
-    align-self: center;
-
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-    flex-shrink: 0;
 }
diff --git a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
index e6f02bc2..b51f01b4 100644
--- a/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
+++ b/src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
@@ -1,33 +1,26 @@
-import { FC, useEffect, useMemo, useRef } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { GetConfiguration } from '../../../../api';
-import { Base } from '../../../../common';
+import { Flex } from '../../../../common';
 
 export interface CatalogHeaderViewProps
 {
-    image?: string;
+    imageUrl?: string;
 }
 
 export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
 {
-    let { image = null } = props;
+    const { imageUrl = null } = props;
+    const [ displayImageUrl, setDisplayImageUrl ] = useState('');
 
-    const imageEl = useRef<HTMLImageElement>();
-
-    const fallback = useMemo(()=>
+    useEffect(() =>
     {
-        return ((GetConfiguration<string>('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder'));
-    },[])
+        setDisplayImageUrl(imageUrl ?? GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder'));
+    }, [ imageUrl ]);
 
-    useEffect(()=> 
-    {
-        if(image == null && imageEl !== null) imageEl.current.src = fallback;
-    },[ image, imageEl,fallback ])
-
-    return <Base className="nitro-catalog-header">
-        <img ref={ imageEl } src={ image } onError={ ({ currentTarget }) => 
+    return <Flex center shrink className="nitro-catalog-header">
+        <img src={ displayImageUrl } onError={ ({ currentTarget }) => 
         {
-            currentTarget.src = fallback;
-        }
-        } />
-    </Base>;
+            currentTarget.src = GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
+        } } />
+    </Flex>;
 }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index adde3fb8..79979a53 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { GetConfiguration, ProductTypeEnum } from '../../../../../api';
-import { Column, Flex, Grid, Text } from '../../../../../common';
+import { Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
@@ -15,43 +15,45 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
 export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 {
     const { page = null } = props;
-    const { currentOffer = null,currentPage } = useCatalog();
+    const { currentOffer = null, currentPage = null } = useCatalog();
 
     return (
         <>
             <Grid>
                 <Column size={ 7 } overflow="hidden">
-                    { GetConfiguration('catalog.headers') && <CatalogHeaderView image={ currentPage.localization.getImage(0) }/> }
+                    { GetConfiguration('catalog.headers') &&
+                        <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
                     <CatalogItemGridWidgetView />
                 </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) } } />
-                    </> }
+                        <>
+                            { !!page.localization.getImage(1) && 
+                                <LayoutImage imageUrl={ page.localization.getImage(1) } /> }
+                            <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
+                        </> }
                     { currentOffer &&
-                    <>
-                        <Flex center overflow="hidden" style={ { height: 140 } }>
-                            { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
-                                <>
-                                    <CatalogViewProductWidgetView />
-                                    <CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
-                                    <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
-                                </> }
-                            { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
-                        </Flex>
-                        <Column grow gap={ 1 }>
-                            <Text grow truncate>{ currentOffer.localizationName }</Text>
-                            <Flex justifyContent="between">
-                                <Column gap={ 1 }>
-                                    <CatalogSpinnerWidgetView />
-                                </Column>
-                                <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
+                        <>
+                            <Flex center overflow="hidden" style={ { height: 140 } }>
+                                { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
+                                    <>
+                                        <CatalogViewProductWidgetView />
+                                        <CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
+                                        <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
+                                    </> }
+                                { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                             </Flex>
-                            <CatalogPurchaseWidgetView />
-                        </Column>
-                    </> }
+                            <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>
         </>