diff --git a/index.html b/index.html
index 9bdb5c4..82584ce 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TroisJS App</title>
+    <title>Minecraft Armor Stand</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index d4a758c..b28624f 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "troisjs-app",
+  "name": "minecraft-armorstand",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.vue b/src/App.vue
index cdd42c3..bb96948 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,59 @@
 <template>
-    <div class="flex">
-        <div class="flex-1 h-screen">
-            <Scene :rot="roty" />
+    <div>
+        <div class="w-3/5 h-screen float-left">
+            <Scene :armorstand="armorstand" />
         </div>
-        <div class="flex-none w-60">
-            <h1>{{ roty }}</h1>
-            <input type="range" min="0" max="100" v-model="roty" />
+        <div class="w-2/5 float-right">
+            <table>
+                <tr>
+                    <td>Rotation</td>
+                    <td colspan="3">
+                        <input @dblclick="() => armorstand.rotation = 0" class="w-full" type="range" min="-180" max="180" v-model="armorstand.rotation" />
+                    </td>
+                </tr>
+                <RotationSliderRow label="Head" :rotation="armorstand.head" />
+            </table>
         </div>
     </div>
 </template>
 
 <script>
 import Scene from "./Scene.vue"
+import RotationSliderRow from "./RotationSliderRow.vue"
+
+// The Armorstand will hold all attributes for an armor stand.
+class Armorstand {
+    constructor() {
+        // Rotation values for the body parts
+        this.rotation = 0
+        this.head = { x: 0, y: 0, z: 0 }
+        this.body = { x: 0, y: 0, z: 0 }
+        this.legLeft = { x: 0, y: 0, z: 0 }
+        this.legRight = { x: 0, y: 0, z: 0 }
+        this.armLeft = { x: 0, y: 0, z: 0 }
+        this.armRight = { x: 0, y: 0, z: 0 }
+
+        // Boolean attributes
+        this.invisible = false
+        this.invulnerable = false
+        this.persistenceRequired = false
+        this.noBasePlate = false
+        this.noGravity = false
+        this.showArms = false
+        this.small = false
+        this.marker = false
+        this.centerCorrected = false
+
+        // TODO Lots more to come
+    }
+}
 
 export default {
     data() {
         return {
-            roty: 0,
+            armorstand: new Armorstand(),
         }
     },
-    components: {Scene},
+    components: { Scene, RotationSliderRow },
 }
 </script>
diff --git a/src/RotationSliderRow.vue b/src/RotationSliderRow.vue
new file mode 100644
index 0000000..0db3c5e
--- /dev/null
+++ b/src/RotationSliderRow.vue
@@ -0,0 +1,41 @@
+<template>
+    <tr>
+        <td>{{label}}</td>
+        <td>
+            <input
+                class="w-full"
+                @dblclick="() => rotation.x = 0"
+                type="range"
+                min="-180"
+                max="180"
+                v-model="rotation.x"
+            />
+        </td>
+        <td>
+            <input
+                class="w-full"
+                @dblclick="() => rotation.y = 0"
+                type="range"
+                min="-180"
+                max="180"
+                v-model="rotation.y"
+            />
+        </td>
+        <td>
+            <input
+                class="w-full"
+                @dblclick="() => rotation.z = 0"
+                type="range"
+                min="-180"
+                max="180"
+                v-model="rotation.z"
+            />
+        </td>
+    </tr>
+</template>
+
+<script>
+export default {
+    props: ["rotation", "label"],
+}
+</script>
\ No newline at end of file
diff --git a/src/Scene.vue b/src/Scene.vue
index 6339489..1a2676b 100644
--- a/src/Scene.vue
+++ b/src/Scene.vue
@@ -4,7 +4,7 @@
         <Scene>
             <AmbientLight :intensity="0.3" />
             <DirectionalLight :intensity="1" :position="{ x: 10, y: 9 }" />
-            <Box ref="box" :rotation="{ y: rot / Math.PI / 4 }">
+            <Box ref="box" :rotation="scaledRotation">
                 <LambertMaterial />
             </Box>
         </Scene>
@@ -13,10 +13,10 @@
   
 <script>
 
-import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from 'troisjs';
+import { Box, Camera, LambertMaterial, AmbientLight, Renderer, Scene } from "troisjs";
 
 export default {
-    props: ["rot"],
+    props: ["armorstand"],
     mounted() {
         // const renderer = this.$refs.renderer
         // const box = this.$refs.box.mesh
@@ -24,6 +24,15 @@ export default {
         //     box.rotation.x += 0.01
         // })
     },
+    computed: {
+        scaledRotation: function() {
+            return {
+                x: this.armorstand.head.x / 180 * Math.PI,
+                y: this.armorstand.head.y / 180 * Math.PI,
+                z: this.armorstand.head.z / 180 * Math.PI,
+            }
+        }
+    },
     components: { Box, Camera, LambertMaterial, Renderer, Scene },
 }
 </script>
diff --git a/src/main.js b/src/main.js
index d2bc50d..7732129 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
-import { createApp } from 'troisjs'
-import App from './App.vue'
+import { createApp } from "troisjs"
+import App from "./App.vue"
 import "./main.css"
 
-createApp(App).mount('#app')
+createApp(App).mount("#app")
