diff --git a/public/configuration.json b/public/configuration.json
index 4a81f531..d93080f3 100644
--- a/public/configuration.json
+++ b/public/configuration.json
@@ -92,8 +92,8 @@
             "slot.1.widget": "promoarticle",
             "slot.1.conf": "",
             "slot.2.widget": "widgetcontainer",
-            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,btn:HelloHELLO,btnLink:https://google.com/",
-            "slot.3.widget": "",
+            "slot.2.conf": "image:${image.library.url}web_promo_small/spromo_Canal_Bundle.png,texts:2021NitroPromo,btnLink:https://google.com",
+            "slot.3.widget": "promoarticle",
             "slot.3.conf": "",
             "slot.4.widget": "",
             "slot.4.conf": "",
diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx
index d2abb427..dd83ed44 100644
--- a/src/views/hotel-view/HotelView.tsx
+++ b/src/views/hotel-view/HotelView.tsx
@@ -52,25 +52,25 @@ export const HotelView: FC<HotelViewProps> = props =>
                                 widgetSlot={ 2 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']}
-                                className="col-6"
+                                className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 3 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf']}
-                                className="col-6"
+                                className="col-5"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 4 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf']}
-                                className="col-6"
+                                className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 5 }
                                 widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget']}
                                 widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf']}
-                                className="col-6"
+                                className="col-5"
                             />
                         </div>
                         <WidgetSlotView
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
index f1b8c806..74fa0189 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
+++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
@@ -1,15 +1,61 @@
 .hall-of-fame {
-  .hof-user-container {
-    display:inline-flex;
-    height: 100%;
+    background-color: rgba($black,.3);
+    border-radius: $border-radius;
+    display: inline-block;
 
-    .hof-tooltip {
-      position: absolute;
-      display: inline;
+    .hof-user-container {
+        display:inline-flex;
+        height: 100%;
+        position: relative;
+
+        &:hover {
+            .hof-tooltip {
+                display: block;
+            }
+        }
+
+        .hof-tooltip {
+            position: absolute;
+            display: inline;
+            z-index: 2;
+            display: none;
+            background-color: #1c323f;
+            border: 2px solid rgba($white, 0.5);
+            border-radius: $border-radius;
+            bottom:calc(100% - 20px);
+            left: 0;
+            right: 0;
+            margin: auto;
+            padding:2px;
+            color: #fff;
+
+            .hof-tooltip-content {
+                padding:3px;
+                background-color: #3d5f6e;
+            }
+
+            &:after {
+                content: "";
+                position: absolute;
+                bottom: -7px;
+                left: 0;
+                right: 0;
+                margin: auto;
+                height: 10px;
+                width: 10px;
+                transform: rotate(45deg);
+                border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
+                border-style: solid;
+                border-width: 5px;
+            }
+        }
+
+        .avatar-image {
+            position:relative;
+            display:inline;
+            left:0;
+            top:0;
+            z-index: 1;
+        }
     }
-    .avatar-image {
-      position:relative;
-      display:inline;
-    }
-  }
 }
diff --git a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
index 8d527340..c56ea2ea 100644
--- a/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
+++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
@@ -1,36 +1,42 @@
 import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
 export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
 {
-  const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
+    const [data, setData] = useState<CommunityGoalHallOfFameData>(null);
 
-  useEffect(() =>
-  {
-    SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
-  }, [props.conf]);
+    useEffect(() =>
+    {
+        SendMessageHook(new GetCommunityGoalHallOfFameMessageComposer(props.conf));
+    }, [props.conf]);
 
-  const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
-  {
-    const parser = event.getParser();
-    setData(parser.data);
-  }, []);
+    const onCommunityGoalHallOfFameMessageEvent = useCallback((event: CommunityGoalHallOfFameMessageEvent) =>
+    {
+        const parser = event.getParser();
+        setData(parser.data);
+    }, []);
 
-  CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
+    CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
 
-  if (!data) return null;
+    if (!data) return null;
 
-  return (
-    <div className="hall-of-fame widget">
-      {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
-      <div className="hof-user-container">
-        <div className="hof-tooltip">{entry.userName}</div>
-        <AvatarImageView figure={entry.figure} direction={2} key={ind} />
-      </div>
-      )}
-    </div>
-  );
+    return (
+        <div className="hall-of-fame widget">
+        {data.hof && (data.hof.length > 0) && data.hof.map((entry, ind) =>
+            <div className="hof-user-container cursor-pointer">
+                <div className="hof-tooltip">
+                    <div className="hof-tooltip-content">
+                        <div className="fw-bold">{ind + 1}. { entry.userName }</div>
+                        <div className="muted fst-italic small text-center">{LocalizeText('landing.view.competition.hof.points', ['points'], [entry.currentScore.toString()])}</div>
+                    </div>
+                </div>
+                <AvatarImageView figure={entry.figure} direction={2} key={ind} />
+            </div>
+        )}
+        </div>
+    );
 }
diff --git a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
index 5b110db6..f124ab60 100644
--- a/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
+++ b/src/views/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx
@@ -30,7 +30,7 @@ export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
   	if (!articles) return null;
 
   	return (
-		<div className="promo-articles widget">
+		<div className="promo-articles widget mb-2">
 			<div className="d-flex flex-row align-items-center w-100 mb-1">
 				<small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
 			  	<hr className="w-100 my-0"/>
diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx
index d8a903ef..9541333f 100644
--- a/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx
+++ b/src/views/hotel-view/views/widgets/widgetcontainer/WIdgetContainerView.tsx
@@ -1,5 +1,6 @@
 import { FC, useCallback, useMemo } from 'react';
 import { GetConfigurationManager } from '../../../../../api/core/';
+import { LocalizeText } from '../../../../../utils/LocalizeText';
 import { WidgetContainerViewProps } from './WidgetContainerView.types';
 
 export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
@@ -40,8 +41,13 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
     }, [ config ]);
 
   	return (
-        <div className="widgetcontainer widget">
-            { getOption('image') }
+        <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
+            <div className="widgetcontainer-image flex-shrink-0" style={{ backgroundImage: `url(${getOption('image')})` }} />
+            <div className="d-flex flex-column align-self-center">
+                <h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
+                <i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
+                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto">{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
+            </div>
     	</div>
   	);
 }
diff --git a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss
index e69de29b..131b5603 100644
--- a/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss
+++ b/src/views/hotel-view/views/widgets/widgetcontainer/WidgetContainerView.scss
@@ -0,0 +1,9 @@
+.widgetcontainer {
+    .widgetcontainer-image {
+        width: 150px;
+        height: 150px;
+        margin-right: 10px;
+        background-repeat: no-repeat;
+        background-position: top center;
+    }
+}