diff --git a/src/App.tsx b/src/App.tsx
index 9d3fd026..a947827a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
-import { AvatarRenderEvent, ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
+import { ConfigurationEvent, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent, WebGL } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetAvatarRenderManager, GetCommunication, GetConfiguration, GetNitroInstance } from './api';
+import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
 import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/main/MainView';
-import { DispatchUiEvent, UseAvatarEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
+import { DispatchUiEvent, UseConfigurationEvent, UseLocalizationEvent, UseMainEvent, UseRoomEngineEvent } from './hooks';
 
 export const App: FC<{}> = props =>
 {
@@ -35,10 +35,7 @@ export const App: FC<{}> = props =>
         return urls;
     }, []);
 
-    const loadPercent = useCallback(() =>
-    {
-        setPercent(percent + 16.66);
-    }, [setPercent,percent]);
+    const loadPercent = useCallback(() => setPercent(prevValue => (prevValue + 16.66)), []);
 
     const handler = useCallback((event: NitroEvent) =>
     {
@@ -70,10 +67,9 @@ export const App: FC<{}> = props =>
                 setMessage('Handshake Failed');
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
-                setMessage('Finishing Up');
                 loadPercent();
 
-                GetAvatarRenderManager().init();
+                GetNitroInstance().init();
 
                 if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'authentication', 'authok', []);
 				return;
@@ -89,24 +85,16 @@ export const App: FC<{}> = props =>
 
                 HabboWebTools.send(-1, 'client.init.handshake.fail');
                 return;
-            case AvatarRenderEvent.AVATAR_RENDER_READY:
-                GetNitroInstance().init();
-                loadPercent();
-                return;
             case RoomEngineEvent.ENGINE_INITIALIZED:
                 loadPercent();
-                setTimeout(() =>
-                { 
-                    setIsReady(true);
-                }, 200)
+
+                setTimeout(() => setIsReady(true), 200);
                 return;
             case NitroLocalizationEvent.LOADED:
                 GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
                 {
                     if(status)
                     {
-                        setMessage('Connecting');
-                        
                         GetCommunication().init();
 
                         loadPercent();
@@ -132,7 +120,6 @@ export const App: FC<{}> = props =>
     UseLocalizationEvent(NitroLocalizationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.LOADED, handler);
     UseConfigurationEvent(ConfigurationEvent.FAILED, handler);
-    UseAvatarEvent(AvatarRenderEvent.AVATAR_RENDER_READY, handler);
 
     if(!WebGL.isWebGLAvailable())
     {
diff --git a/src/components/loading/LoadingView.scss b/src/components/loading/LoadingView.scss
index 27b5a4b6..bd63beae 100644
--- a/src/components/loading/LoadingView.scss
+++ b/src/components/loading/LoadingView.scss
@@ -54,17 +54,11 @@
         }
     }
 
-    .logo {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        right: 0;
-        left: 0;
-        width: 35%;
-        height: 35%;
-        background: url('../../assets/images/nitro/nitro-light.svg') no-repeat center;
-        z-index: -1;
+    .nitro-logo {
+        width: 47px;
+        height: 65px;
+        background: transparent url('https://assets.nitrodev.co/logos/react-loader.png') no-repeat center;
+        z-index: 1;
     }
 
     .nitro-loading-bar {
diff --git a/src/components/loading/LoadingView.tsx b/src/components/loading/LoadingView.tsx
index 2f4a815e..bd6faef2 100644
--- a/src/components/loading/LoadingView.tsx
+++ b/src/components/loading/LoadingView.tsx
@@ -1,6 +1,6 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect } from 'react';
 import { NotificationUtilities } from '../../api';
-import { Base, Column } from '../../common';
+import { Base, Column, Text } from '../../common';
 
 interface LoadingViewProps
 {
@@ -12,7 +12,6 @@ interface LoadingViewProps
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
     const { isError = false, message = '', percent = 0 } = props;
-    const [ loadingShowing, setLoadingShowing ] = useState(false);
 
     useEffect(() =>
     {
@@ -20,35 +19,27 @@ export const LoadingView: FC<LoadingViewProps> = props =>
 
         NotificationUtilities.simpleAlert(message, null, null, null, 'Connection Error');
     }, [ isError, message ]);
-
-    useEffect(() =>
-    {
-        const timeout = setTimeout(() => setLoadingShowing(true), 500);
-
-        return () => clearTimeout(timeout);
-    }, []);
     
     return (
-        <Column position="relative" className="nitro-loading h-100">
-            <div className="container h-100">
-                <div className="row h-100 justify-content-center">
+        <Column fullHeight position="relative" className="nitro-loading">
+            <Base fullHeight className="container h-100">
+                <Column fullHeight alignItems="center" justifyContent="end">
                     <Base className="connecting-duck" />
-                    <div className="col-6 align-self-end text-center py-4">
+                    <Column size={ 6 } className="text-center py-4">
                         { isError && (message && message.length) ?
                             <Base className="fs-4 text-shadow">{message}</Base>
                             :
                             <>
-                                <Base className="fs-4 text-shadow">{percent.toFixed()}%</Base>
-                                <div className="nitro-loading-bar mt-4">
+                                <Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
+                                <div className="nitro-loading-bar mt-2">
                                     <div className="nitro-loading-bar-inner" style={{ 'width': `${ percent }%` }}/>
                                 </div>   
                             </>
                         }
                         
-                    </div>
-                </div>
-            </div>
-            
+                    </Column>
+                </Column>
+            </Base>
         </Column>
     );
 }