diff --git a/packages/app/src/components/app/play/renderable.jsx b/packages/app/src/components/app/play/renderable.jsx
index d6d0ee7..dec970f 100644
--- a/packages/app/src/components/app/play/renderable.jsx
+++ b/packages/app/src/components/app/play/renderable.jsx
@@ -18,7 +18,7 @@ const RoomStage = () => {
       setCamera(selfEntity.camera);
     }
   }, [selfEntity]);
-  return <RoomRenderable camera={camera} className={styles.stage} room={room} />;
+  return <RoomRenderable camera={camera} styles={styles} room={room} />;
 };
 
 export default RoomStage;
diff --git a/packages/app/src/components/app/play/renderable.module.scss b/packages/app/src/components/app/play/renderable.module.scss
index 5381189..95262bf 100644
--- a/packages/app/src/components/app/play/renderable.module.scss
+++ b/packages/app/src/components/app/play/renderable.module.scss
@@ -1,8 +1,13 @@
 .stage {
+  display: inline-block;
   left: 50%;
+  line-height: 0;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
+  canvas {
+    image-rendering: pixelated;
+  }
   @media (max-aspect-ratio: 16/9) {
     &,
     & > [class],
@@ -18,3 +23,14 @@
     }
   }
 }
+
+.canvas {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+  justify-content: space-around;
+  position: relative;
+  width: 100%;
+  line-height: 0;
+}