diff --git a/public/configuration.json b/public/configuration.json
index 0b81659c..848496e5 100644
--- a/public/configuration.json
+++ b/public/configuration.json
@@ -45,8 +45,8 @@
         "sun": "${asset.url}/images/reception/sun.png",
         "drape": "${asset.url}/images/reception/drape.png",
         "left": "${asset.url}/images/reception/ts.png",
-        "right": "${asset.url}/images/reception/us_right.png",
-        "right.repeat": "${asset.url}/images/reception/us_top_right.png"
+        "right": "${asset.url}/images/reception/US_right.png",
+        "right.repeat": "${asset.url}/images/reception/US_top_right.png"
     },
     "achievements.unseen.ignored": ["ACH_AllTimeHotelPresence"],
     "avatareditor.show.clubitems.dimmed": true,
@@ -54,7 +54,7 @@
     "chat.history.max.items": 100,
     "animation.fps": 24,
     "limits.fps": true,
-    "system.dispatcher.log": false,
+    "system.dispatcher.log": true,
     "system.currency.types": [
         -1,
         0,
diff --git a/public/index.html b/public/index.html
index 728a8776..96b28ae5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="root" class="w-100 h-100"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/App.tsx b/src/App.tsx
index 04bdc19b..52576f6a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,5 @@
-import { ConfigurationEvent, NitroEvent } from 'nitro-renderer';
-import { NitroCommunicationDemoEvent } from 'nitro-renderer/src/nitro/communication/demo/NitroCommunicationDemoEvent';
-import { LegacyExternalInterface } from 'nitro-renderer/src/nitro/externalInterface/LegacyExternalInterface';
-import { NitroLocalizationEvent } from 'nitro-renderer/src/nitro/localization/NitroLocalizationEvent';
-import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
-import { RoomEngineEvent } from 'nitro-renderer/src/nitro/room/events/RoomEngineEvent';
-import { WebGL } from 'nitro-renderer/src/nitro/utils/WebGL';
-import { useState } from 'react';
+import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, RoomEngineEvent, WebGL } from 'nitro-renderer';
+import { useCallback, useState } from 'react';
 import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
@@ -41,7 +35,7 @@ export function App(): JSX.Element
         return urls;
     }
 
-    const handler = (event: NitroEvent) =>
+    const handler = useCallback((event: NitroEvent) =>
     {
         switch(event.type)
         {
@@ -105,7 +99,7 @@ export function App(): JSX.Element
                 });
                 return;
         }
-    };
+    }, []);
 
     useMainEvent(Nitro.WEBGL_UNAVAILABLE, handler);
     useMainEvent(Nitro.WEBGL_CONTEXT_LOST, handler);
diff --git a/src/index.scss b/src/index.scss
index e677bdde..51663e79 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -26,4 +26,5 @@ $infostand-zindex: 30;
 $chat-zindex: 20;
 $highscore-zindex: 19;
 
+@import './transitions/TransitionStyles.scss';
 @import './views/Styles.scss';
diff --git a/src/transitions/TransitionStyles.scss b/src/transitions/TransitionStyles.scss
new file mode 100644
index 00000000..4c2e7b9f
--- /dev/null
+++ b/src/transitions/TransitionStyles.scss
@@ -0,0 +1,26 @@
+@keyframes slideDown {
+    from {
+        top: -100%;
+    }
+    to {
+        top: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        bottom: -100%;
+    }
+    to {
+        bottom: 0;
+    }
+}
+
+@keyframes slideRight {
+    from {
+        right: -100%;
+    }
+    to {
+        right: 0;
+    }
+}
diff --git a/src/views/hotel-view/HotelView.scss b/src/views/hotel-view/HotelView.scss
index e69de29b..c33e619e 100644
--- a/src/views/hotel-view/HotelView.scss
+++ b/src/views/hotel-view/HotelView.scss
@@ -0,0 +1,76 @@
+.nitro-hotel-view {
+    display: block;
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	background: rgba($black, 1);
+	
+	.avatar-image {
+		bottom: 12px;
+		left: 63px;
+		position: absolute;
+		z-index: 1;
+	}
+
+	.background {
+		height: 100%;
+		width: 100%;
+		background-position: left;
+		background-repeat: repeat-y;
+	}
+
+	.drape {
+        width: 100%;
+        height: 100%;
+		left: 0px;
+		top: 0;
+		animation-iteration-count: 1;
+		animation-name: slideDown;
+		animation-duration: 1s;
+		z-index: 3;
+        background-repeat: no-repeat;
+	}
+
+	.sun {
+        width: 100%;
+        height: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+        background-repeat: no-repeat;
+	}
+
+	.left {
+        width: 100%;
+        height: 100%;
+		bottom: 0;
+		left: 0;
+		animation-iteration-count: 1;
+		animation-name: slideUp;
+		animation-duration: 1s;
+        background-repeat: no-repeat;
+	}
+
+	.right {
+        width: 100%;
+        height: 100%;
+		right: 0;
+		bottom: 0;
+		animation-iteration-count: 1;
+		animation-name: slideUp;
+		animation-duration: 1s;
+        background-repeat: no-repeat;
+	}
+
+	.right-repeat {
+        width: 100%;
+        height: 100%;
+		right: 0;
+		top: 0;
+		animation-iteration-count: 1;
+		animation-name: slideRight;
+		animation-duration: 1s;
+        background-repeat: no-repeat;
+	}
+}
diff --git a/src/views/hotel-view/HotelView.tsx b/src/views/hotel-view/HotelView.tsx
index 23affb72..bcd72b6d 100644
--- a/src/views/hotel-view/HotelView.tsx
+++ b/src/views/hotel-view/HotelView.tsx
@@ -1,8 +1,24 @@
+import { Nitro } from 'nitro-renderer';
 import { HotelViewProps } from './HotelView.types';
 
 export function HotelView(props: HotelViewProps): JSX.Element
 {
+    const backgroundColor = Nitro.instance.getConfiguration('hotelview.images')['background.colour'];
+    const background      = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['background']);
+    const sun             = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['sun']);
+    const drape           = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['drape']);
+    const left            = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['left']);
+    const rightRepeat     = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right.repeat']);
+    const right           = Nitro.instance.core.configuration.interpolate(Nitro.instance.getConfiguration('hotelview.images')['right']);
+    
     return (
-        <div>hotel view</div>
+        <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
+            <div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />
+            <div className="sun position-absolute" style={ (sun && sun.length) ? { backgroundImage: `url(${ sun })` } : {} } />
+            <div className="drape position-absolute" style={ (drape && drape.length) ? { backgroundImage: `url(${ drape })` } : {} } />
+            <div className="left position-absolute" style={ (left && left.length) ? { backgroundImage: `url(${ left })` } : {} } />
+            {/* <div className="right-repeat position-absolute" style={ (rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${ rightRepeat })` } : {} } />
+            <div className="right position-absolute" style={ (right && right.length) ? { backgroundImage: `url(${ right })` } : {} } /> */}
+        </div>
     );
 }
