diff --git a/public/index.html b/public/index.html
index 06f5fd117c90c8fd7e19e1609ec25f69d7f80c92..40272b64d520f88cd056ee074e34c06db09cef25 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,18 +26,19 @@ async function activateXR() {
 // The cube will have a different color on each side.
 const materials = [
   new THREE.MeshNormalMaterial({color: 0xff0000}),
-  new THREE.MeshNormalMaterial({color: 0xff0000}),
-  new THREE.MeshNormalMaterial({color: 0xff0000}),
-  new THREE.MeshNormalMaterial({color: 0xff0000}),
-  new THREE.MeshNormalMaterial({color: 0xff0000}),
+  new THREE.MeshNormalMaterial({color: 0x0000ff}),
+  new THREE.MeshNormalMaterial({color: 0x00ff00}),
+  new THREE.MeshNormalMaterial({color: 0xff00ff}),
+  new THREE.MeshNormalMaterial({color: 0x00ffff}),
   new THREE.MeshNormalMaterial({color: 0xffff00})
 ];
 
 // Create the cube and add it to the demo scene.
-const cube = new THREE.Mesh(new THREE.SphereGeometry(0.2, 0.2, 0.2), materials);
+const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
 cube.position.set(1, 1, 1);
 scene.add(cube);
 
+
 // Set up the WebGLRenderer, which handles rendering to the session's base layer.
 const renderer = new THREE.WebGLRenderer({
   alpha: true,