diff --git a/src/common/layout/LayoutFurniImageView.tsx b/src/common/layout/LayoutFurniImageView.tsx
index 3c6b984..8b17723 100644
--- a/src/common/layout/LayoutFurniImageView.tsx
+++ b/src/common/layout/LayoutFurniImageView.tsx
@@ -45,15 +45,7 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
         let imageResult: ImageResult = null;
 
         const listener: IGetImageListener = {
-            imageReady: (id, texture, image) =>
-            {
-                if(!image && texture)
-                {
-                    image = TextureUtils.generateImage(texture);
-                }
-
-                image.onload = () => setImageElement(image);
-            },
+            imageReady: async (id, texture, image) => setImageElement(await TextureUtils.generateImage(texture)),
             imageFailed: null
         };
 
@@ -67,12 +59,9 @@ export const LayoutFurniImageView: FC<LayoutFurniImageViewProps> = props =>
                 break;
         }
 
-        if(imageResult)
-        {
-            const image = imageResult.getImage();
+        if(!imageResult) return;
 
-            image.onload = () => setImageElement(image);
-        }
+        (async () => setImageElement(await TextureUtils.generateImage(imageResult.data)))();
     }, [ productType, productClassId, direction, extraData ]);
 
     if(!imageElement) return null;
diff --git a/src/common/layout/LayoutPetImageView.tsx b/src/common/layout/LayoutPetImageView.tsx
index b6f5f65..e052ddf 100644
--- a/src/common/layout/LayoutPetImageView.tsx
+++ b/src/common/layout/LayoutPetImageView.tsx
@@ -67,7 +67,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
         if(petTypeId === 16) petHeadOnly = false;
 
         const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor1, new Vector3d((direction * 45)), 64, {
-            imageReady: (id, texture, image) =>
+            imageReady: async (id, texture, image) =>
             {
                 if(isDisposed.current) return;
 
@@ -80,7 +80,7 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
 
                 else if(texture)
                 {
-                    setPetUrl(TextureUtils.generateImageUrl(texture));
+                    setPetUrl(await TextureUtils.generateImageUrl(texture));
                     setWidth(texture.width);
                     setHeight(texture.height);
                 }
@@ -93,14 +93,17 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
 
         if(imageResult)
         {
-            const image = imageResult.getImage();
-
-            if(image)
+            (async () =>
             {
-                setPetUrl(image.src);
-                setWidth(image.width);
-                setHeight(image.height);
-            }
+                const image = await imageResult.getImage();
+
+                if(image)
+                {
+                    setPetUrl(image.src);
+                    setWidth(image.width);
+                    setHeight(image.height);
+                }
+            })();
         }
     }, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]);
 
diff --git a/src/common/layout/LayoutRoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx
index 69fbea8..e6a005b 100644
--- a/src/common/layout/LayoutRoomPreviewerView.tsx
+++ b/src/common/layout/LayoutRoomPreviewerView.tsx
@@ -1,5 +1,5 @@
-import { ColorConverter, GetTicker, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, ReactNode, useEffect, useRef, useState } from 'react';
+import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
 
 export interface LayoutRoomPreviewerViewProps
 {
@@ -11,7 +11,6 @@ export interface LayoutRoomPreviewerViewProps
 export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
     const { roomPreviewer = null, height = 0, children = null } = props;
-    const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
     const elementRef = useRef<HTMLDivElement>();
 
     const onClick = (event: MouseEvent<HTMLDivElement>) =>
@@ -24,44 +23,33 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
 
     useEffect(() =>
     {
-        if(!roomPreviewer) return;
+        if(!elementRef) return;
 
-        const update = (time: number) =>
+        const width = elementRef.current.parentElement.clientWidth;
+        const texture = TextureUtils.createRenderTexture(width, height);
+
+        const update = async (ticker: NitroTicker) =>
         {
-            if(!roomPreviewer || !renderingCanvas || !elementRef.current) return;
+            if(!roomPreviewer || !elementRef.current) return;
         
             roomPreviewer.updatePreviewRoomView();
 
+            const renderingCanvas = roomPreviewer.getRenderingCanvas();
+
             if(!renderingCanvas.canvasUpdated) return;
 
-            elementRef.current.style.backgroundImage = `url(${ TextureUtils.generateImageUrl(renderingCanvas.master) })`;
-        }
+            GetRenderer().render({
+                target: texture,
+                container: renderingCanvas.master,
+                clear: true
+            });
 
-        if(!renderingCanvas)
-        {
-            if(elementRef.current && roomPreviewer)
-            {
-                const computed = document.defaultView.getComputedStyle(elementRef.current, null);
+            let canvas = GetRenderer().texture.generateCanvas(texture);
+            const base64 = canvas.toDataURL('image/png');
+    
+            canvas = null;
 
-                let backgroundColor = computed.backgroundColor;
-
-                backgroundColor = ColorConverter.rgbStringToHex(backgroundColor);
-                backgroundColor = backgroundColor.replace('#', '0x');
-
-                roomPreviewer.backgroundColor = parseInt(backgroundColor, 16);
-
-                const width = elementRef.current.parentElement.clientWidth;
-                
-                roomPreviewer.getRoomCanvas(width, height);
-
-                const canvas = roomPreviewer.getRenderingCanvas();
-
-                setRenderingCanvas(canvas);
-
-                canvas.canvasUpdated = true;
-
-                update(-1);
-            }
+            elementRef.current.style.backgroundImage = `url(${ base64 })`;
         }
 
         GetTicker().add(update);
@@ -74,19 +62,22 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
 
             roomPreviewer.modifyRoomCanvas(width, height);
 
-            update(-1);
+            update(GetTicker());
         });
+
+        roomPreviewer.getRoomCanvas(width, height);
         
         resizeObserver.observe(elementRef.current);
 
         return () =>
         {
+            GetTicker().remove(update);
+
             resizeObserver.disconnect();
 
-            GetTicker().remove(update);
+            texture.destroy(true);
         }
-
-    }, [ renderingCanvas, roomPreviewer, elementRef, height ]);
+    }, [ roomPreviewer, elementRef, height ]);
 
     return (
         <div className="room-preview-container">