diff --git a/app/react/components/pixi/tile-layer.jsx b/app/react/components/pixi/tile-layer.jsx
index 87920f9..ac6aefe 100644
--- a/app/react/components/pixi/tile-layer.jsx
+++ b/app/react/components/pixi/tile-layer.jsx
@@ -1,30 +1,61 @@
 import {RenderTexture} from '@pixi/core';
 import {Container} from '@pixi/display';
+import {Graphics} from '@pixi/graphics';
 import {PixiComponent, useApp} from '@pixi/react';
 import {Sprite} from '@pixi/sprite';
 import '@pixi/spritesheet'; // NECESSARY!
 import {CompositeTilemap} from '@pixi/tilemap';
 
 import {useAsset} from '@/react/context/assets.js';
-import {CHUNK_SIZE} from '@/util/constants.js';
+import {CHUNK_SIZE, RESOLUTION} from '@/util/constants.js';
 
 import {deferredLighting} from './lights.js';
 
 const TileLayerInternal = PixiComponent('TileLayer', {
   create: ({group, tileLayer}) => {
     const container = new Container();
-    const cy = Math.ceil(tileLayer.area.y / CHUNK_SIZE);
-    const cx = Math.ceil(tileLayer.area.x / CHUNK_SIZE);
+    const {area, tileSize} = tileLayer;
+    const g = new Graphics();
+    g.beginFill(group === deferredLighting.diffuseGroup ? 0x000000 : 0x7777ff);
+    // outer frame
+    g.drawRect(
+      -RESOLUTION.x / 2,
+      -RESOLUTION.y / 2,
+      area.x * tileSize.x + RESOLUTION.x,
+      RESOLUTION.y / 2,
+    );
+    g.drawRect(
+      -RESOLUTION.x / 2,
+      -RESOLUTION.y / 2,
+      RESOLUTION.x / 2,
+      area.y * tileSize.y + RESOLUTION.y,
+    );
+    g.drawRect(
+      area.x * tileSize.x,
+      0,
+      RESOLUTION.x / 2,
+      area.y * tileSize.y,
+    );
+    g.drawRect(
+      0,
+      area.y * tileSize.y,
+      area.x * tileSize.x,
+      RESOLUTION.y / 2,
+    );
+    g.parentGroup = group;
+    container.addChild(g);
+    const cy = Math.ceil(area.y / CHUNK_SIZE);
+    const cx = Math.ceil(area.x / CHUNK_SIZE);
     for (let iy = 0; iy < cy; ++iy) {
       for (let ix = 0; ix < cx; ++ix) {
         const tilemap = new CompositeTilemap();
         const renderTexture = RenderTexture.create({
-          width: tileLayer.tileSize.x * CHUNK_SIZE,
-          height: tileLayer.tileSize.y * CHUNK_SIZE,
+          width: tileSize.x * CHUNK_SIZE,
+          height: tileSize.y * CHUNK_SIZE,
         });
         const sprite = new Sprite(renderTexture);
-        sprite.x = tileLayer.tileSize.x * CHUNK_SIZE * ix;
-        sprite.y = tileLayer.tileSize.y * CHUNK_SIZE * iy;
+        sprite.x = tileSize.x * CHUNK_SIZE * ix;
+        sprite.y = tileSize.y * CHUNK_SIZE * iy;
         sprite.parentGroup = group;
         sprite.tilemap = tilemap;
         container.addChild(sprite);
@@ -41,7 +72,7 @@ const TileLayerInternal = PixiComponent('TileLayer', {
     }
     for (const i in tileLayer.$$chunks) {
       if (!oldTileLayer || oldTileLayer.$$chunks[i] !== tileLayer.$$chunks[i]) {
-        const {texture, tilemap} = container.children[i];
+        const {texture, tilemap} = container.children[parseInt(i) + 1];
         tilemap.clear();
         const ax = Math.ceil(tileLayer.area.x / CHUNK_SIZE);
         const cy = Math.floor(i / ax);