diff --git a/index.html b/index.html
index 31831da..f67e3be 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
         src="https://cdn.glitch.com/e8742440-f85d-495a-8f52-6f066f464880%2FAMB_Suburbs_Afternoon_Woods_Spring_Small_ST_MKH8050-30shortened_amplified.mp3?v=1599596031022"
         crossorigin="anonymous"></audio>
       <a-mixin id="voxel" scale="0.5 0.5 0.5" geometry="primitive: box; height: 0.25; width: 0.25; depth: 0.25" material="shader: standard"
-        set-model-from-state not-snap="offset: 0.125 0.05 0.125; snap: 0.25 0.25 0.25"></a-mixin>
+        set-model-from-state snap="offset: 0.125; snap: 0.25"></a-mixin>
       <a-mixin id="hoverEffect"
         animation__mouseenter="property: components.material.material.color; type: color; from: #444; to: #FFF; dur: 200; startEvents: mouseenter"
         animation__mouseleave="property: components.material.material.color; type: color; from: #FFF; to: #444; dur: 200; startEvents: mouseleave"
@@ -59,12 +59,13 @@
       sound="src: #click-ogg; on: cursormoved; poolSize: 10;"
       set-rotation-from-anchor></a-entity>
 
+    <!-- <a-entity id="world-grid"
+      gridhelper="size:5;divisions:10;colorGrid:#000000;colorCenterLine:#222222;"></a-entity> -->
+
     <a-entity id="city-container" anchored="persistent: true">
-      <a-entity position="0 0.06 0"
+      <a-entity id="ground" grid-cursor="allowFrom: .can-select" sound="src: #select6-ogg; on: click; poolSize: 6;"
+        geometry="primitive: box; height: 0.1; width: 5; depth: 5;" class="collidable spawnable" material="visible:false"
         gridhelper="size:5;divisions:20;colorGrid:#660066;colorCenterLine:#FF5555;"></a-entity>
-      <a-cylinder id="ground" class="collidable spawnable" radius="32" height="0.1" grid-cursor="allowFrom: .can-select"
-      material="visible:false"
-        sound="src: #select6-ogg; on: click; poolSize: 6;"></a-cylinder>
 
       <a-entity id="whiteboard" rotation="0 -70 0" scale="0.8 0.8 0.8" position="-0.5 -0.046 -4">
         <a-entity id="whiteboard-model" scale="0.15 0.15 0.2"
diff --git a/src/app/intersection-spawn.js b/src/app/intersection-spawn.js
index 01332e8..ce5d0ee 100644
--- a/src/app/intersection-spawn.js
+++ b/src/app/intersection-spawn.js
@@ -8,12 +8,14 @@
 AFRAME.registerComponent('intersection-spawn', {
   schema: {
     default: '',
-    parse: AFRAME.utils.styleParser.parse
+    parse: AFRAME.utils.styleParser.parse,
   },
 
   init: function () {
     const data = this.data;
     const el = this.el;
+    this.helperVector = new THREE.Vector3();
+    this.targetEl = document.querySelector('#city-container');
 
     el.addEventListener(data.event, evt => {
       // don't spawn if class specified in objects property but it is not matched intersected element
@@ -22,8 +24,8 @@ AFRAME.registerComponent('intersection-spawn', {
       // Create element.
       const spawnEl = document.createElement('a-entity');
 
-      // Snap intersection point to grid and offset from center.
-      spawnEl.setAttribute('position', evt.detail.intersection.point);
+      // // Snap intersection point to grid and offset from center.
+      // spawnEl.setAttribute('position', evt.detail.intersection.point);
 
       // Set components and properties.
       Object.keys(data).forEach(name => {
@@ -31,8 +33,18 @@ AFRAME.registerComponent('intersection-spawn', {
         AFRAME.utils.entity.setComponentProperty(spawnEl, name, data[name]); // is setAttribute a new version of "set component property"?
       });
 
-      // Append to scene.
-      el.sceneEl.appendChild(spawnEl); // check for another entity in identical position before spawning; change its color instead
+      const _worldToLocal = (originalPosition, targetEl) => {
+        // snap the intersection location to the gridlines
+        const helperVector = this.helperVector;
+        helperVector.copy(originalPosition);
+        targetEl.object3D.worldToLocal(helperVector);
+        return helperVector;
+      };
+
+      const localPos = _worldToLocal(evt.detail.intersection.point, this.targetEl); // convert world intersection position to local position
+      spawnEl.setAttribute('position', localPos)
+      this.targetEl.appendChild(spawnEl);
+
     });
   }
 });
\ No newline at end of file
diff --git a/src/app/snap.js b/src/app/snap.js
index 3650a8f..b9fa272 100644
--- a/src/app/snap.js
+++ b/src/app/snap.js
@@ -1,33 +1,84 @@
 /**
  * Snap entity to the closest interval specified by `snap`.
  * Offset entity by `offset`.
+ * If localId provided, then use the entity returned as the local reference space
  */
 AFRAME.registerComponent('snap', {
   dependencies: ['position'],
 
   schema: {
-    offset: {type: 'vec3'},
-    snap: {type: 'vec3'}
+    offset: {type: 'number'},
+    snap: {type: 'number'},
+    localId: {type: 'selector'}
   },
 
   init: function () {
     var self = this;
+    this.helperVector = new THREE.Vector3();
     this.originalPos = this.el.getAttribute('position');
     this.el.addEventListener('componentchanged', function (evt) {
       if (evt.detail.name === 'position') {
         self.update()
       };
     });
+    this.localEl = null;
+    if (!!this.data.anchorId) {
+      this.localEl = document.querySelector(this.data.localId)
+    }
   },
 
   update: function () {
+    // this element should be a child of the parent anchor container
+    // then use snapper as usual
     const data = this.data;
 
-    const pos = AFRAME.utils.clone(this.originalPos);
-    pos.x = Math.floor(pos.x / data.snap.x) * data.snap.x + data.offset.x;
-    pos.y = Math.floor(pos.y / data.snap.y) * data.snap.y + data.offset.y;
-    pos.z = Math.floor(pos.z / data.snap.z) * data.snap.z + data.offset.z;
+    // const pos = AFRAME.utils.clone(this.originalPos);
+    // pos.x = Math.floor(pos.x / data.snap) * data.snap + data.offset.x;
+    // pos.y = Math.floor(pos.y / data.snap) * data.snap + data.offset.y;
+    // pos.z = Math.floor(pos.z / data.snap) * data.snap + data.offset.z;
+
+    // this.el.setAttribute('position', pos);
+
+    const _snapper = (originalPosition, offset, snap) => {
+      // snap the intersection location to the gridlines
+      const helperVector = this.helperVector;
+      helperVector.copy(originalPosition);
+
+      helperVector.x = Math.floor(helperVector.x / snap) * snap + offset;
+      helperVector.y = Math.floor(helperVector.y / snap) * snap + offset;
+      helperVector.z = Math.floor(helperVector.z / snap) * snap + offset;
+      return helperVector;
+    };
+
+    const _worldToLocal = (originalPosition) => {
+      // snap the intersection location to the gridlines
+      const helperVector = this.helperVector;
+      helperVector.copy(originalPosition);
+      this.el.object3D.worldToLocal(helperVector);
+      return helperVector;
+    };
+
+    const _convertLocalToWorld = (localPosition) => {
+      // Use Three.js's localToWorld method to convert the position
+      const worldPosition = new THREE.Vector3();
+      worldPosition.copy(localPosition);
+      this.el.object3D.localToWorld(worldPosition);
+    
+      return worldPosition;
+    }
+
+    let snapPos;
+    if (this.localEl && this.localEl.object3D) {
+      // this.el.object3D.quaternion.copy(this.anchorEl.object3D.quaternion); copy from 
+      const localPos = _worldToLocal(this.localEl.object3D.position); // convert world object from which to localize (anchor) to local position of this object
+      const localSnapPos = _snapper(localPos, this.data.offset, this.data.snap); // use snapping logic which assumes local intersection
+      snapPos = _convertLocalToWorld(localSnapPos); // world snap position
+    } else {
+      snapPos = _snapper(this.el.object3D.position, this.data.offset, this.data.snap);
+    }
+
+    this.el.object3D.position.copy(snapPos);
+
 
-    this.el.setAttribute('position', pos);
   }
 });
\ No newline at end of file