diff --git a/src/components/spawn-controller.js b/src/components/spawn-controller.js
new file mode 100644
index 0000000000000000000000000000000000000000..7cdb0b409e05c20cad61a4dfd8ea1ddb62918d4d
--- /dev/null
+++ b/src/components/spawn-controller.js
@@ -0,0 +1,25 @@
+AFRAME.registerComponent('spawn-controller', {
+  schema: {
+    radius: {type: 'number', default: 1},
+  },
+
+  init: function() {
+    var el = this.el;
+    var center = el.getAttribute('position');
+
+    var angleRad = Math.random() * 2 * Math.PI;
+    var circlePoint = this.getPointOnCircle(this.data.radius, angleRad);
+    var worldPoint = {x: circlePoint.x + center.x, y: center.y, z: circlePoint.z + center.z};
+    el.setAttribute('position', worldPoint);
+
+    var angleDeg = angleRad * THREE.Math.RAD2DEG;
+    var angleToCenter = -1 * angleDeg + 90;
+    el.setAttribute('rotation', {x: 0, y: angleToCenter, z: 0});
+  },
+
+  getPointOnCircle: function (radius, angleRad) {
+    var x = Math.cos(angleRad)*radius;
+    var z = Math.sin(angleRad)*radius;
+    return {x: x, z: z};
+  }
+});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 64feef0d6d91f8b6de4a9dbfa0a4a5f299ed4415..0d4e04c91a232b5122efe6744cd080a6563b7f28 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,11 +23,12 @@ import "./components/split-axis-events";
 import "./components/networked-video-player";
 import "./components/offset-relative-to";
 import "./components/cached-gltf-model";
+import "./components/spawn-controller";
 import "./systems/personal-space-bubble";
 
 import registerNetworkScheams from "./network-schemas";
 import registerInputMappings from "./input-mappings";
-import { promptForName, getCookie, parseJwt, getSpawnPositionInCircle, getRotationToTarget } from "./utils";
+import { promptForName, getCookie, parseJwt } from "./utils";
 import Config from "./config";
 
 registerNetworkScheams();
@@ -94,15 +95,6 @@ window.App = {
     const myNametag = document.querySelector("#player-rig .nametag");
     myNametag.setAttribute("text", "value", username);
 
-    //change spawn position & rotation
-    const myHead = document.querySelector("#player-rig #head");
-    let rotation = Math.random() * 2 * Math.PI;
-    let position = myHead.getAttribute("position");
-    let newPosition = getSpawnPositionInCircle(0, 0, 4, rotation);
-    newPosition.y = position.y;
-    myHead.setAttribute("position", newPosition);
-    myHead.setAttribute("rotation", getRotationToTarget(newPosition, {x:0, y:0, z:0}));
-
     scene.addEventListener("action_share_screen", shareScreen);
 
     const mediaStream = await navigator.mediaDevices.getUserMedia({
diff --git a/src/utils.js b/src/utils.js
index a939eb6b0b814bc58be0706d9014bf61739e3df1..b37764120a388120c89392fb6b9b97f31dd59578 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -187,24 +187,3 @@ export function parseJwt (token) {
   var base64 = base64Url.replace('-', '+').replace('_', '/');
   return JSON.parse(window.atob(base64));
 }
-
-export function getSpawnPositionInCircle(originX, originZ, radius, rotation) {
-  let x = originX + radius * Math.cos(rotation);
-  let z = originZ + radius * Math.sin(rotation);
-
-  return {x: x, z: z};
-}
-
-export function getRotationToTarget(eye, target) {
-  let m4 = new THREE.Matrix4();
-  eye = new THREE.Vector3(eye.x, eye.y, eye.z);
-  target = new THREE.Vector3(target.x, target.y, target.z);
-  m4.lookAt(eye, target, new THREE.Vector3(0,1,0));
-  let euler = new THREE.Euler();
-  euler.setFromRotationMatrix(m4, "YXZ");
-  return {x: 0, y:(toDegrees(euler.y) + 360) % 360, z:0};
-}
-
-export function toDegrees(angle) {
-  return angle * (180 / Math.PI);
-}
diff --git a/templates/room.hbs b/templates/room.hbs
index 9db46f2fd02ca944db2cab9f6226f7f4b6913a85..92b4d9250bb8c33a054792719f072d168b487fdc 100644
--- a/templates/room.hbs
+++ b/templates/room.hbs
@@ -119,6 +119,7 @@
                 personal-space-bubble
                 look-controls
                 networked="template: #head-template; showLocalTemplate: false;" 
+                spawn-controller="radius: 4"
             ></a-entity>
 
             <a-entity