diff --git a/components/layout/README.md b/components/layout/README.md
index 49c53c68..915f2497 100644
--- a/components/layout/README.md
+++ b/components/layout/README.md
@@ -48,6 +48,7 @@ We move then entire group around while maintaining the layout:
 | plane    | Which plane direction for 2D layout. Can be `xy`, `yz`, or `xz` (for type `box`, `circle`, `line`) | `xy`          |
 | radius   | Radius in meters (for type `circle`, `cube`, `dodecahedron`, `pyramid`.                            | 1             |
 | reverse  | Whether to reverse direction of layout.                                                            | false         |
+| angle    | For type `circle`, set this to position items `angle` degrees apart                                | false         |
 
 ### Usage
 
diff --git a/components/layout/dist/aframe-layout-component.js b/components/layout/dist/aframe-layout-component.js
index 70e2d03e..f7b56c6f 100644
--- a/components/layout/dist/aframe-layout-component.js
+++ b/components/layout/dist/aframe-layout-component.js
@@ -56,7 +56,9 @@
 	    radius: {default: 1, min: 0, if: {type: ['circle', 'cube', 'dodecahedron', 'pyramid']}},
 	    reverse: {default: false},
 	    type: {default: 'line', oneOf: ['box', 'circle', 'cube', 'dodecahedron', 'line',
-	                                    'pyramid']}
+	                                    'pyramid']},
+	    fill: {default: true, if: {type: ['circle']}},
+	    angle: {type: 'number', default: false, min:0, max: 360, if: {type: ['circle']}}
 	  },
 
 	  /**
@@ -187,7 +189,14 @@
 	  var positions = [];
 
 	  for (var i = 0; i < numChildren; i++) {
-	    var rad = i * (2 * Math.PI) / numChildren;
+	    var rad;
+
+	    if (isNaN(data.angle)) {
+	      rad = i * (2 * Math.PI) / numChildren;
+	    } else {
+	      rad = i * data.angle * 0.01745329252; // angle to radian
+	    }
+
 	    var position = [
 	      startPosition.x,
 	      startPosition.y,
diff --git a/components/layout/dist/aframe-layout-component.min.js b/components/layout/dist/aframe-layout-component.min.js
index d46d765b..e7fac041 100644
--- a/components/layout/dist/aframe-layout-component.min.js
+++ b/components/layout/dist/aframe-layout-component.min.js
@@ -1 +1 @@
-!function(e){function i(n){if(t[n])return t[n].exports;var r=t[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,i),r.loaded=!0,r.exports}var t={};return i.m=e,i.c=t,i.p="",i(0)}([function(e,i){function t(e,i,t){for(var n,r=[],a=Math.ceil(i/e.columns),o=0;o<a;o++)for(var s=0;s<e.columns;s++)n=[0,0,0],0===e.plane.indexOf("x")&&(n[0]=s*e.margin),0===e.plane.indexOf("y")&&(n[1]=s*e.margin),1===e.plane.indexOf("y")&&(n[1]=o*e.margin),1===e.plane.indexOf("z")&&(n[2]=o*e.margin),r.push(n);return r}function n(e,i,t){for(var n=[],r=0;r<i;r++){var a=r*(2*Math.PI)/i,o=[t.x,t.y,t.z];0===e.plane.indexOf("x")&&(o[0]+=e.radius*Math.cos(a)),0===e.plane.indexOf("y")&&(o[1]+=e.radius*Math.cos(a)),1===e.plane.indexOf("y")&&(o[1]+=e.radius*Math.sin(a)),1===e.plane.indexOf("z")&&(o[2]+=e.radius*Math.sin(a)),n.push(o)}return n}function r(e,i,n){return e.columns=i,t(e,i,n)}function a(e,i,t){return d([[1,0,0],[0,1,0],[0,0,1],[-1,0,0],[0,-1,0],[0,0,-1]],t,e.radius/2)}function o(e,i,t){var n=(1+Math.sqrt(5))/2,r=1/n,a=2-n,o=-1*r,s=-1*a;return d([[-1,a,0],[-1,s,0],[0,-1,a],[0,-1,s],[0,1,a],[0,1,s],[1,a,0],[1,s,0],[r,r,r],[r,r,o],[r,o,r],[r,o,o],[a,0,1],[a,0,-1],[o,r,r],[o,r,o],[o,o,r],[o,o,o],[s,0,1],[s,0,-1]],t,e.radius/2)}function s(e,i,t){var n=Math.sqrt(3),r=-1/Math.sqrt(3),a=2*Math.sqrt(2/3);return d([[0,0,n+r],[-1,0,r],[1,0,r],[0,a,0]],t,e.radius/2)}function d(e,i,t){return i=[i.x,i.y,i.z],e.map(function(e){return e.map(function(e,n){return e*t+i[n]})})}function c(e,i){e.forEach(function(e,t){var n=i[t];e.setAttribute("position",{x:n[0],y:n[1],z:n[2]})})}AFRAME.registerComponent("layout",{schema:{columns:{default:1,min:0,if:{type:["box"]}},margin:{default:1,min:0,if:{type:["box","line"]}},plane:{default:"xy"},radius:{default:1,min:0,if:{type:["circle","cube","dodecahedron","pyramid"]}},reverse:{default:!1},type:{default:"line",oneOf:["box","circle","cube","dodecahedron","line","pyramid"]}},init:function(){var e=this,i=this.el;this.children=i.getChildEntities(),this.initialPositions=[],this.children.forEach(function(i){function t(){var t=i.getAttribute("position");e.initialPositions.push([t.x,t.y,t.z])}return i.hasLoaded?t():void i.addEventListener("loaded",t)}),i.addEventListener("child-attached",function(t){t.detail.el.parentNode===i&&(e.children.push(t.detail.el),e.update())}),i.addEventListener("child-detached",function(i){e.children.indexOf(i.detail.el)!==-1&&(e.children.splice(e.children.indexOf(i.detail.el),1),e.initialPositions.splice(e.children.indexOf(i.detail.el),1),e.update())})},update:function(e){var i,d,l=this.children,u=this.data,h=this.el,f=l.length,p=h.getAttribute("position");switch(u.type){case"box":i=t;break;case"circle":i=n;break;case"cube":i=a;break;case"dodecahedron":i=o;break;case"pyramid":i=s;break;default:i=r}d=i(u,f,p),u.reverse&&d.reverse(),c(l,d)},remove:function(){this.el.removeEventListener("child-attached",this.childAttachedCallback),c(this.children,this.initialPositions)}}),e.exports.getBoxPositions=t,e.exports.getCirclePositions=n,e.exports.getLinePositions=r,e.exports.getCubePositions=a,e.exports.getDodecahedronPositions=o,e.exports.getPyramidPositions=s}]);
\ No newline at end of file
+!function(e){function i(n){if(t[n])return t[n].exports;var r=t[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,i),r.loaded=!0,r.exports}var t={};return i.m=e,i.c=t,i.p="",i(0)}([function(e,i){function t(e,i,t){for(var n,r=[],a=Math.ceil(i/e.columns),o=0;o<a;o++)for(var s=0;s<e.columns;s++)n=[0,0,0],0===e.plane.indexOf("x")&&(n[0]=s*e.margin),0===e.plane.indexOf("y")&&(n[1]=s*e.margin),1===e.plane.indexOf("y")&&(n[1]=o*e.margin),1===e.plane.indexOf("z")&&(n[2]=o*e.margin),r.push(n);return r}function n(e,i,t){for(var n=[],r=0;r<i;r++){var a;a=isNaN(e.angle)?r*(2*Math.PI)/i:r*e.angle*.01745329252;var o=[t.x,t.y,t.z];0===e.plane.indexOf("x")&&(o[0]+=e.radius*Math.cos(a)),0===e.plane.indexOf("y")&&(o[1]+=e.radius*Math.cos(a)),1===e.plane.indexOf("y")&&(o[1]+=e.radius*Math.sin(a)),1===e.plane.indexOf("z")&&(o[2]+=e.radius*Math.sin(a)),n.push(o)}return n}function r(e,i,n){return e.columns=i,t(e,i,n)}function a(e,i,t){return d([[1,0,0],[0,1,0],[0,0,1],[-1,0,0],[0,-1,0],[0,0,-1]],t,e.radius/2)}function o(e,i,t){var n=(1+Math.sqrt(5))/2,r=1/n,a=2-n,o=-1*r,s=-1*a;return d([[-1,a,0],[-1,s,0],[0,-1,a],[0,-1,s],[0,1,a],[0,1,s],[1,a,0],[1,s,0],[r,r,r],[r,r,o],[r,o,r],[r,o,o],[a,0,1],[a,0,-1],[o,r,r],[o,r,o],[o,o,r],[o,o,o],[s,0,1],[s,0,-1]],t,e.radius/2)}function s(e,i,t){var n=Math.sqrt(3),r=-1/Math.sqrt(3),a=2*Math.sqrt(2/3);return d([[0,0,n+r],[-1,0,r],[1,0,r],[0,a,0]],t,e.radius/2)}function d(e,i,t){return i=[i.x,i.y,i.z],e.map(function(e){return e.map(function(e,n){return e*t+i[n]})})}function l(e,i){e.forEach(function(e,t){var n=i[t];e.setAttribute("position",{x:n[0],y:n[1],z:n[2]})})}AFRAME.registerComponent("layout",{schema:{columns:{default:1,min:0,if:{type:["box"]}},margin:{default:1,min:0,if:{type:["box","line"]}},plane:{default:"xy"},radius:{default:1,min:0,if:{type:["circle","cube","dodecahedron","pyramid"]}},reverse:{default:!1},type:{default:"line",oneOf:["box","circle","cube","dodecahedron","line","pyramid"]},fill:{default:!0,if:{type:["circle"]}},angle:{type:"number",default:!1,min:0,max:360,if:{type:["circle"]}}},init:function(){var e=this,i=this.el;this.children=i.getChildEntities(),this.initialPositions=[],this.children.forEach(function(i){function t(){var t=i.getAttribute("position");e.initialPositions.push([t.x,t.y,t.z])}return i.hasLoaded?t():void i.addEventListener("loaded",t)}),i.addEventListener("child-attached",function(t){t.detail.el.parentNode===i&&(e.children.push(t.detail.el),e.update())}),i.addEventListener("child-detached",function(i){e.children.indexOf(i.detail.el)!==-1&&(e.children.splice(e.children.indexOf(i.detail.el),1),e.initialPositions.splice(e.children.indexOf(i.detail.el),1),e.update())})},update:function(e){var i,d,c=this.children,u=this.data,f=this.el,h=c.length,p=f.getAttribute("position");switch(u.type){case"box":i=t;break;case"circle":i=n;break;case"cube":i=a;break;case"dodecahedron":i=o;break;case"pyramid":i=s;break;default:i=r}d=i(u,h,p),u.reverse&&d.reverse(),l(c,d)},remove:function(){this.el.removeEventListener("child-attached",this.childAttachedCallback),l(this.children,this.initialPositions)}}),e.exports.getBoxPositions=t,e.exports.getCirclePositions=n,e.exports.getLinePositions=r,e.exports.getCubePositions=a,e.exports.getDodecahedronPositions=o,e.exports.getPyramidPositions=s}]);
\ No newline at end of file
diff --git a/components/layout/examples/circle-angle/index.html b/components/layout/examples/circle-angle/index.html
new file mode 100644
index 00000000..198eec45
--- /dev/null
+++ b/components/layout/examples/circle-angle/index.html
@@ -0,0 +1,56 @@
+<html>
+  <head>
+    <title>Circle Layout Angle</title>
+    <meta name="description" content="Circular layout of boxes"></meta>
+    <meta property="og:image" content="https://raw.githubusercontent.com/ngokevin/kframe/master/components/layout/examples/circle/preview.png"></meta>
+    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
+    <script src="../../dist/aframe-layout-component.min.js"></script>
+  </head>
+  <body>
+    <a-scene>
+      <a-assets>
+        <a-mixin id="cube" geometry="primitive: box; depth: 1; height: 1; width: 1"
+                 material="color: #FFFBE0">
+        </a-mixin>
+        <a-mixin id="secondary" material="color: #FFB400"></a-mixin>
+      </a-assets>
+
+      <a-entity geometry="primitive: sphere; radius: 1000"
+                material="color: #2994B2; shader: flat" scale="1 1 -1">
+      </a-entity>
+
+      <a-entity layout="type: circle; radius: 2.5; angle: 50;" position="0 0 -5">
+        <a-animation attribute="rotation" dur="5000" easing="linear"
+                     repeat="indefinite" to="0 360 360">
+        </a-animation>
+        <a-entity mixin="cube"></a-entity>
+        <a-entity mixin="cube"></a-entity>
+        <a-entity mixin="cube"></a-entity>
+      </a-entity>
+
+      <a-entity layout="type: circle; radius: 3; angle: 30;" position="0 0 -5">
+        <a-animation attribute="rotation" dur="5000" easing="linear"
+                     repeat="indefinite" to="360 0 360">
+        </a-animation>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+        <a-entity mixin="cube secondary"></a-entity>
+      </a-entity>
+    </a-scene>
+
+    <!--githubcorner-->
+    <a href="https://github.com/ngokevin/kframe/tree/master/components/layout/examples/circle/" class="github-corner">
+      <svg width="80" height="80" viewBox="0 0 250 250" style="fill: #111; color: #EFEFEF; position: fixed; bottom: 0; border: 0; left: 0; transform: rotate(180deg); opacity: 0.8">
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+      </svg>
+    </a>
+    <style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+    </style>
+    <!--endgithubcorner-->
+  </body>
+</html>
diff --git a/components/layout/examples/circle-angle/preview.png b/components/layout/examples/circle-angle/preview.png
new file mode 100644
index 00000000..2c0c3226
Binary files /dev/null and b/components/layout/examples/circle-angle/preview.png differ
diff --git a/components/layout/index.html b/components/layout/index.html
index f8ddd816..b9c87aca 100644
--- a/components/layout/index.html
+++ b/components/layout/index.html
@@ -88,8 +88,14 @@ <h3>Circle Layout - Planes</h3>
         <li>
           <a href="examples/circle/" style="background-color: #222; background-image: url(examples/circle/preview.png)"></a>
           <h3>Circle Layout</h3>
-          <p>Circular layout of boxes</p>
+          <p>Circular layout of boxes, fills circle (default)</p>
         </li>
+
+      <li>
+        <a href="examples/circle-angle/" style="background-color: #222; background-image: url(examples/circle-angle/preview.png)"></a>
+        <h3>Circle Layout - Angle</h3>
+        <p>Circular layout of boxes with supplied angle</p>
+      </li>
       
         <li>
           <a href="examples/cube/" style="background-color: #222; background-image: url(examples/cube/preview.png)"></a>
diff --git a/components/layout/index.js b/components/layout/index.js
index fb1ace39..a5b928d1 100644
--- a/components/layout/index.js
+++ b/components/layout/index.js
@@ -10,7 +10,9 @@ AFRAME.registerComponent('layout', {
     radius: {default: 1, min: 0, if: {type: ['circle', 'cube', 'dodecahedron', 'pyramid']}},
     reverse: {default: false},
     type: {default: 'line', oneOf: ['box', 'circle', 'cube', 'dodecahedron', 'line',
-                                    'pyramid']}
+                                    'pyramid']},
+    fill: {default: true, if: {type: ['circle']}},
+    angle: {type: 'number', default: false, min:0, max: 360, if: {type: ['circle']}}
   },
 
   /**
@@ -141,7 +143,14 @@ function getCirclePositions (data, numChildren, startPosition) {
   var positions = [];
 
   for (var i = 0; i < numChildren; i++) {
-    var rad = i * (2 * Math.PI) / numChildren;
+    var rad;
+
+    if (isNaN(data.angle)) {
+      rad = i * (2 * Math.PI) / numChildren;
+    } else {
+      rad = i * data.angle * 0.01745329252; // angle to radian
+    }
+
     var position = [
       startPosition.x,
       startPosition.y,