diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss
index c4973317..8cda46bf 100644
--- a/src/views/hotel-view/HotelView.scss
+++ b/src/views/hotel-view/HotelView.scss
@@ -95,3 +95,4 @@
 
 @import './views/widgets/promo-article/PromoArticleWidgetView.scss';
 @import './views/widgets/bonus-rare/BonusRareWidgetView.scss';
+@import './views/widgets/hall-of-fame/HallOfFameWidgetView.scss';
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
new file mode 100644
index 00000000..f1b8c806
--- /dev/null
+++ b/src/views/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
@@ -0,0 +1,15 @@
+.hall-of-fame {
+  .hof-user-container {
+    display:inline-flex;
+    height: 100%;
+
+    .hof-tooltip {
+      position: absolute;
+      display: inline;
+    }
+    .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 82300041..8d527340 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,6 +1,7 @@
 import { CommunityGoalHallOfFameData, CommunityGoalHallOfFameMessageEvent, GetCommunityGoalHallOfFameMessageComposer } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../../hooks/messages/message-event';
+import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { HallOfFameWidgetViewProps } from './HallOfFameWidgetView.types';
 
 export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
@@ -19,12 +20,17 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
   }, []);
 
   CreateMessageHook(CommunityGoalHallOfFameMessageEvent, onCommunityGoalHallOfFameMessageEvent);
-  
-  if(!data) return null;
-  
+
+  if (!data) return null;
+
   return (
     <div className="hall-of-fame widget">
-      <h1>showing hall of fame for event: {data ? data.goalCode : 'empty'}</h1>
+      {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>
   );
 }