diff --git a/kdm.py b/kdm.py
index 28ceef2..4e4cf12 100644
--- a/kdm.py
+++ b/kdm.py
@@ -13,4 +13,4 @@ def show_entries():
   return render_template('index.html')
   
 if __name__ == "__main__":
-  app.run()
\ No newline at end of file
+  app.run(host='0.0.0.0')
\ No newline at end of file
diff --git a/static/javascript/kdm.js b/static/javascript/kdm.js
index 52c8d2b..400ec17 100644
--- a/static/javascript/kdm.js
+++ b/static/javascript/kdm.js
@@ -13,21 +13,20 @@
     .module('kdm')
     .run(run);
     
-    run.$inject = ['$rootScope'];
-    jsonify.$inject = ['$rootScope'];
+    run.$inject = ['$rootScope', '$parse'];
     
     function jsonify(scope) {
-        console.log(scope.kdm);
-        return JSON.stringify(scope.kdm);
+        console.log(scope.tabs);
+        return JSON.stringify(scope.tabs);
     }
     
     function load(scope, json) {
         var parsed = JSON.parse(json);
-        scope.kdm = parsed;
+        scope.tabs = parsed;
         scope.$apply();
     }
     
-    function run($rootScope) {
+    function run($rootScope, $parse) {
         $rootScope.jsonify = function() {
             return jsonify($rootScope);
         }
@@ -35,10 +34,73 @@
         $rootScope.load = function(json) {
             load($rootScope, json);
         }
+
+        $rootScope.addChar = function(json) {
+            addNewChar($rootScope);
+        }
         
-        // TODO: Can we make this nicer? too many lines :(
+        $rootScope.tabs = [];
+        
+        addToTabs($rootScope, createEmptyCharSheet("tab-0"));
+    
+    }
+
+    function addNewChar(scope) {
+        var id = "tab-" + scope.tabs.length;
+        addToTabs(scope, createEmptyCharSheet(id));
+    }
+    
+    function addToTabs(scope, kdm) {
+        var tabs = scope.tabs;
+        tabs.push(kdm);
+        var lastIndex = tabs.length - 1;
+        
+        if (kdm.type === "char") {
+            scope.$watch('tabs[' + lastIndex + '].courage.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].understanding.levels', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].age', watchCheckboxArray, true);
+            scope.$watch('tabs[' + lastIndex + '].weapon.levels', watchCheckboxArray, true);
+        }
+    }
+    
+    function watchCheckboxArray(newVal, oldVal) {
+        if (newVal !== oldVal) 
+        {
+            // find the changed index
+            var index = -1;
+            for (var i = 0; i < newVal.length; i++) 
+            {
+                if (oldVal[i].value !== newVal[i].value) {
+                    index = i;
+                    break;
+                }
+            }
+            
+            if (index === -1) {
+                return;
+            }
+            
+            var value = newVal[index].value;
+            if (value) {
+                for (var i = 0; i < index; i++) {
+                    newVal[i].value = true;
+                }
+            } else {
+                for (var i = newVal.length - 1; i > index; i--) {
+                    newVal[i].value = false;
+                }
+            }
+        }
+    }
+    
+    function createEmptyCharSheet(id) {
         
         var kdm = {};
+        kdm.id = id;
+        kdm.type = "char";
+        kdm.template = "static/templates/char.html"
+        
+        // TODO: Can we make this nicer? too many lines :(
         
         // NAME
         var name = {};
@@ -215,107 +277,6 @@
         records.push(abilitiesImpairments);
         
         kdm.records = records;
-        
-        $rootScope.kdm = kdm;
-        
-        $rootScope.$watch('kdm.courage.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.courage.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.courage.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
-        
-        $rootScope.$watch('kdm.understanding.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.understanding.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.understanding.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
-
-        $rootScope.$watch('kdm.age', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.age[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.age[i].value = false;
-                    }
-                }
-            }
-        }, true);
-
-        $rootScope.$watch('kdm.weapon.levels', function(newVal, oldVal) {
-            if (newVal !== oldVal) 
-            {
-                // find the changed index
-                var index = -1;
-                for (var i = 0; i < newVal.length; i++) 
-                {
-                    if (oldVal[i].value !== newVal[i].value) {
-                        index = i;
-                        break;
-                    }
-                }
-                var value = newVal[index].value;
-                if (value) {
-                    for (var i = 0; i < index; i++) {
-                        $rootScope.kdm.weapon.levels[i].value = true;
-                    }
-                } else {
-                    for (var i = newVal.length - 1; i > index; i--) {
-                        $rootScope.kdm.weapon.levels[i].value = false;
-                    }
-                }
-            }
-        }, true);
+        return kdm;
     }
 })();
diff --git a/static/templates/char.html b/static/templates/char.html
new file mode 100644
index 0000000..fb82bb3
--- /dev/null
+++ b/static/templates/char.html
@@ -0,0 +1,22 @@
+<div class="row">
+  <div class="col-xs-5">
+    <ng-include src="'static/templates/char/name.html'"></ng-include>
+    <ng-include src="'static/templates/char/survival.html'"></ng-include>
+    <ng-include src="'static/templates/char/attributes.html'"></ng-include>
+    <ng-include src="'static/templates/char/brain.html'"></ng-include>
+    <ng-include src="'static/templates/char/armour.html'"></ng-include>
+  </div>
+  <div class="col-xs-5 col-xs-offset-1">
+    <ng-include src="'static/templates/char/age.html'"></ng-include>
+    <ng-include src="'static/templates/char/weapons.html'"></ng-include>
+    <div class="row element bordered" style="padding: 0px;">
+      <div class="col-xs-6" style="padding: 0px;">
+        <ng-include src="'static/templates/char/courage.html'"></ng-include>
+      </div>
+      <div class="col-xs-6" style="border-left: 1px solid black; padding: 0px">
+        <ng-include src="'static/templates/char/understanding.html'"></ng-include>
+      </div>
+    </div>
+    <ng-include src="'static/templates/char/record.html'"></ng-include>
+  </div>
+</div>
\ No newline at end of file
diff --git a/static/templates/age.html b/static/templates/char/age.html
similarity index 88%
rename from static/templates/age.html
rename to static/templates/char/age.html
index a4ccdc4..a9bad0d 100644
--- a/static/templates/age.html
+++ b/static/templates/char/age.html
@@ -1,16 +1,16 @@
 <div class="row element">
-  <div class="col-md-4">
+  <div class="col-xs-4">
     Hunt XP
   </div>
-  <div class="col-md-8">
-    <label ng-repeat="agebox in kdm.age track by $index"  for="age-{{$index}}">
-      <input type="checkbox" ng-class="{level: agebox.level, retire: agebox.retire}" ng-model="agebox.value" id="age-{{$index}}"><span></span>
+  <div class="col-xs-8">
+    <label ng-repeat="agebox in kdm.age">
+      <input type="checkbox" ng-class="{level: agebox.level, retire: agebox.retire}" ng-model="agebox.value"><span></span>
     </label>
   </div>
 </div>
 <div class="row">
   <hr style="margin: 0px">
-  <div class="col-md-12" style="padding-left: 5px; padding-right: 5px;">
+  <div class="col-xs-12" style="padding-left: 5px; padding-right: 5px;">
     <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
     <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.age[1].value">
     <img src="static/images/book-closed.svg" width="15" height="15" ng-hide="kdm.age[1].value">
diff --git a/static/templates/armour.html b/static/templates/char/armour.html
similarity index 80%
rename from static/templates/armour.html
rename to static/templates/char/armour.html
index f4ca592..6a0abc3 100644
--- a/static/templates/armour.html
+++ b/static/templates/char/armour.html
@@ -1,36 +1,36 @@
 <div class="row element" ng-repeat="area in kdm.armour">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <div class="row fill-vertical">
-      <div class="col-md-2">
+      <div class="col-xs-2">
         <div class="sheild">
           <input type="text" size="1" placeholder="0" ng-model="area.value" maxlength="2" size="2">
         </div>
       </div>
 
-      <div class="col-md-8">
+      <div class="col-xs-8">
         <div class="row">
-          <div class="col-md-12">
+          <div class="col-xs-12">
           <img src="static/images/{{area.name | lowercase}}.svg" width="20" height="20">
             <big><strong>{{area.name}}</strong></big>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12">
+          <div class="col-xs-12">
             <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
             Heavy Injury: Knocked Down
           </div>
         </div>
       </div>
 
-      <div class="col-md-2">
+      <div class="col-xs-2">
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <label ng-show="area.light != undefined" >
               <input type="checkbox" ng-model="area.light">
               <span></span>
             </label>
           </div>
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <label>
               <input type="checkbox" ng-model="area.heavy" class="level">
               <span></span>
@@ -38,10 +38,10 @@
           </div>
         </div>
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-xs-6">
             <p ng-show="area.light != undefined">L</p>
           </div>
-          <div class="col-md-6">
+          <div class="col-xs-6">
             H
           </div>
         </div>
diff --git a/static/templates/attributes.html b/static/templates/char/attributes.html
similarity index 67%
rename from static/templates/attributes.html
rename to static/templates/char/attributes.html
index 43ee5ca..31a8222 100644
--- a/static/templates/attributes.html
+++ b/static/templates/char/attributes.html
@@ -1,12 +1,12 @@
 <div class="row bordered element" style="padding: 0px;">
-  <div class="col-md-2" ng-repeat="attr in kdm.attrs" style="padding: 5px" ng-class="{attr:!$first}">
+  <div class="col-xs-2" ng-repeat="attr in kdm.attrs" style="padding: 5px" ng-class="{attr:!$first}">
     <div class="row">
-      <div class="col-md-12 attr-val">
+      <div class="col-xs-12 attr-val">
         <input type="text" size="1" ng-model="attr.value">
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12 attr-name">
+      <div class="col-xs-12 attr-name">
         <small>{{attr.name}}</small>
       </div>
     </div>
diff --git a/static/templates/brain.html b/static/templates/char/brain.html
similarity index 65%
rename from static/templates/brain.html
rename to static/templates/char/brain.html
index 88c31cc..48f0cbe 100644
--- a/static/templates/brain.html
+++ b/static/templates/char/brain.html
@@ -1,31 +1,32 @@
 <div class="row bordered element" style="padding: 0px;">
-  <div class="col-md-2">
+  <div class="col-xs-2">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
+        <br />
         <input type="text" size="1" placeholder="0" ng-model="kdm.brain.value">
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <small>Insanity</small>
       </div>
     </div>
   </div>
   
-  <div class="col-md-9"  style="border-left: 1px solid black; padding: 5px">
+  <div class="col-xs-9"  style="border-left: 1px solid black; padding: 5px">
     <div class="row">
-      <div class="col-md-12">
-        <h3>Brain</h3>
+      <div class="col-xs-12">
+        <big><strong>Brain</strong></big>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         If your insanity is 3+, you are <b>insane</b>
       </div>
     </div>
   </div>
   
-  <div class="col-md-1">
+  <div class="col-xs-1">
     <label>
       <input type="checkbox" ng-model="kdm.brain.wound">
       <span></span>
diff --git a/static/templates/courage.html b/static/templates/char/courage.html
similarity index 82%
rename from static/templates/courage.html
rename to static/templates/char/courage.html
index bd65768..5b78031 100644
--- a/static/templates/courage.html
+++ b/static/templates/char/courage.html
@@ -1,12 +1,12 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <strong>Courage</strong>
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label ng-repeat="level in kdm.courage.levels">
           <input type="checkbox" ng-class="{level : level.level}" ng-model="level.value">
           <span></span>
@@ -14,14 +14,14 @@
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
-        <div class="col-md-5" style="padding-left: 5px; padding-right: 5px;">
+      <div class="col-xs-12">
+        <div class="col-xs-5" style="padding-left: 5px; padding-right: 5px;">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.courage.levels[2].value">
           <img src="static/images/book-closed.svg" width="15" height="15" ng-hide="kdm.courage.levels[2].value">
           <small>Bold</small>
         </div>
-        <div class="col-md-7" style="padding-left: 5px; padding-right: 5px;">
+        <div class="col-xs-7" style="padding-left: 5px; padding-right: 5px;">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.courage.levels[8].value">
@@ -31,34 +31,34 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <hr>
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="courage" value="stalwart" ng-model="kdm.courage.bold"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <small><strong>Stalwart</strong>: can't be knocked down by brain trauma or intimidate.</small>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="courage" value="prepared" ng-model="kdm.courage.bold"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <hr style="margin: 0px">
             <small><strong>Prepared</strong>: Add Hunt XP to your roll when determining a straggler.</small>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="courage" value="matchmaker" ng-model="kdm.courage.bold"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <hr style="margin: 0px">
             <small><strong>Matchmaker</strong>: Spend 1 endeavor to trigger intimacy story event.</small>
           </div>
diff --git a/static/templates/name.html b/static/templates/char/name.html
similarity index 87%
rename from static/templates/name.html
rename to static/templates/char/name.html
index adf23d1..e4afed5 100644
--- a/static/templates/name.html
+++ b/static/templates/char/name.html
@@ -1,14 +1,14 @@
 <div class="row element">
-  <div class="col-md-9">
+  <div class="col-xs-9">
       Name <input type="text" placeholder="Name" class="noborder" ng-model="kdm.name.name">
   </div>
-  <div class="col-md-3">
+  <div class="col-xs-3">
     <label class="radio-inline"><input type="radio" name="sex" value="m" ng-model="kdm.name.sex" class="radio-box"><span></span>M</label>
     <label class="radio-inline"><input type="radio" name="sex" value="f" ng-model="kdm.name.sex" class="radio-box"><span></span>F</label>
   </div>
 </div>
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <hr style="margin: 0px">
     <small>When you name your survivor they gain +1 <b>survival</b></small>
   </div>
diff --git a/static/templates/record.html b/static/templates/char/record.html
similarity index 79%
rename from static/templates/record.html
rename to static/templates/char/record.html
index 7159375..3baacbe 100644
--- a/static/templates/record.html
+++ b/static/templates/char/record.html
@@ -1,16 +1,16 @@
 <div class="row element" ng-repeat="record in kdm.records">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-xs-6">
         <big>{{record.name}}</big> <small>{{record.limit}}</small>
       </div>
-      <div class="col-md-6 right-align" ng-show="record.checkbox">
+      <div class="col-xs-6 right-align" ng-show="record.checkbox">
         <label><input type="checkbox" ng-model="record.checkbox.value"><span></span></label><span class="glyphicon glyphicon-lock" aria-hidden="true"></span><small>{{record.checkbox.text}}</small>
       </div>
     </div>
     
     <div class="row" ng-repeat="n in record.lines track by $index">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <input type="text" class="underlined fullwidth" ng-model="record.lines[$index]">
       </div>
     </div>
diff --git a/static/templates/survival.html b/static/templates/char/survival.html
similarity index 79%
rename from static/templates/survival.html
rename to static/templates/char/survival.html
index 014c864..1e3a3e0 100644
--- a/static/templates/survival.html
+++ b/static/templates/char/survival.html
@@ -1,17 +1,17 @@
 <div class="row bordered element">
-  <div class="col-md-2" >
+  <div class="col-xs-2" >
     <br />
     <input type="text" size="1" placeholder="0"  ng-model="kdm.survival.value" class="survival">
   </div>
   
-  <div class="col-md-7">
+  <div class="col-xs-7">
     <div class="row">
-      <div class="col-md-12">
-        <h3>Survival</h3>
+      <div class="col-xs-12">
+        <big><strong>Survival</strong></big>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label>
           <input type="checkbox" ng-model="kdm.survival.cannotspend">
           <span></span>
@@ -21,27 +21,27 @@ <h3>Survival</h3>
     </div>
   </div>
   
-  <div class="col-md-3">
+  <div class="col-xs-3">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
         Dodge
       </div>
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label>
           <input type="checkbox" ng-model="kdm.survival.encourage" class="mini">
           <span></span>
         </label>
         Encourage
       </div>
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label>
           <input type="checkbox" ng-model="kdm.survival.surge" class="mini">
           <span></span>
         </label>
         Surge
       </div>
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label>
           <input type="checkbox" ng-model="kdm.survival.dash" class="mini">
           <span></span>
diff --git a/static/templates/understanding.html b/static/templates/char/understanding.html
similarity index 83%
rename from static/templates/understanding.html
rename to static/templates/char/understanding.html
index e1ca6b2..6f7762a 100644
--- a/static/templates/understanding.html
+++ b/static/templates/char/understanding.html
@@ -1,12 +1,12 @@
 <div class="row">
-  <div class="col-md-12">
+  <div class="col-xs-12">
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <strong>Understanding</strong>
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label ng-repeat="level in kdm.understanding.levels" >
           <input type="checkbox" ng-class="{level : level.level}" ng-model="level.value">
           <span></span>
@@ -14,14 +14,14 @@
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
-        <div class="col-md-5" style="padding-left: 5px; padding-right: 5px;">
+      <div class="col-xs-12">
+        <div class="col-xs-5" style="padding-left: 5px; padding-right: 5px;">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.understanding.levels[2].value">
           <img src="static/images/book-closed.svg" width="15" height="15" ng-hide="kdm.understanding.levels[2].value">
           <small>Insight</small>
         </div>
-        <div class="col-md-7" style="padding-left: 5px; padding-right: 5px;">
+        <div class="col-xs-7" style="padding-left: 5px; padding-right: 5px;">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img src="static/images/book-open.svg" width="15" height="15" ng-show="kdm.understanding.levels[8].value">
@@ -31,34 +31,34 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <hr>
       </div>
     </div>
     <div class="row" style="padding: 5px">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="understanding" value="analyze" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <small><strong>Analyze</strong>: Look at top AI card and return it to the top of the deck.</small>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="understanding" value="explore" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <hr style="margin: 0px">
             <small><strong>Explore</strong>: Add +2 to your <strong>investigate</strong> roll result.</small>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-2">
+          <div class="col-xs-2">
             <label><input type="radio" name="understanding" value="tinker" ng-model="kdm.understanding.insight"><span></span></label>
           </div>
-          <div class="col-md-10">
+          <div class="col-xs-10">
             <hr style="margin: 0px">
             <small><strong>Tinker</strong>: +1 endeavor when a returning survivor.</small>
           </div>
diff --git a/static/templates/weapons.html b/static/templates/char/weapons.html
similarity index 78%
rename from static/templates/weapons.html
rename to static/templates/char/weapons.html
index 88d44b0..b8bf78e 100644
--- a/static/templates/weapons.html
+++ b/static/templates/char/weapons.html
@@ -1,27 +1,27 @@
 <div class="row bordered element">
-  <div class="col-md-6">
+  <div class="col-xs-6">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <big>Weapon Proficieny</big>
       </div>
     </div>
     <div class="row">
-      <div class="col-md-2">
+      <div class="col-xs-2">
         <small><strong>Type: </strong> </small>
       </div>
-      <div class="col-md-10">
+      <div class="col-xs-10">
         <input type="text" class="underlined fullwidth" ng-model="kdm.weapon.type">
       </div>
     </div>
     <div class="row">
-      <div class="col-md-10 col-md-offset-2">
+      <div class="col-xs-10 col-xs-offset-2">
         <small>Select Before Hunt</small>
       </div>
     </div>
   </div>
-  <div class="col-md-6">
+  <div class="col-xs-6">
     <div class="row">
-      <div class="col-md-12">
+      <div class="col-xs-12">
         <label ng-repeat="level in kdm.weapon.levels" >
           <input type="checkbox" ng-class="{level : level.level}" ng-model="level.value">
           <span></span>
@@ -29,12 +29,12 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-md-12">
-        <div class="col-md-6">
+      <div class="col-xs-12">
+        <div class="col-xs-6">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <small>Specialist</small>
         </div>
-        <div class="col-md-6">
+        <div class="col-xs-6">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <img class="filled-square" src="static/images/filled-square.svg" width="10" height="10">
           <small>Master</small>
diff --git a/templates/index.html b/templates/index.html
index f96768b..0360081 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,33 +8,33 @@
     <link rel="stylesheet" href="static/kdm.css">
   </head>
   <body>
+    {% raw %}
     <div ng-view class="container">
+    
+      <ul class="nav nav-tabs">
+        <li ng-repeat="tab in tabs">
+          <a data-toggle="tab" href="#{{tab.id}}">{{tab.name.name ? tab.name.name : "Unnamed"}}</a>
+        </li>
+      </ul>
+      
       <div class="row">
-        <div class="col-md-5">
-          <ng-include src="'static/templates/name.html'"></ng-include>
-          <ng-include src="'static/templates/survival.html'"></ng-include>
-          <ng-include src="'static/templates/attributes.html'"></ng-include>
-          <ng-include src="'static/templates/brain.html'"></ng-include>
-          <ng-include src="'static/templates/armour.html'"></ng-include>
+        <div class="col-md-12">
           <button id="savejson">To JSON</button>
           <button id="loadjson">From JSON</button>
+          <button id="loadjson" ng-click="addChar()">Add char</button>
         </div>
-        <div class="col-md-5 col-md-offset-1">
-          <ng-include src="'static/templates/age.html'"></ng-include>
-          <ng-include src="'static/templates/weapons.html'"></ng-include>
-          <div class="row element bordered" style="padding: 0px;">
-            <div class="col-md-6" style="padding: 0px;">
-              <ng-include src="'static/templates/courage.html'"></ng-include>
-            </div>
-            <div class="col-md-6" style="border-left: 1px solid black; padding: 0px">
-              <ng-include src="'static/templates/understanding.html'"></ng-include>
-            </div>
-          </div>
-          <ng-include src="'static/templates/record.html'"></ng-include>
-        </div>
       </div>
     </div>
     
+    
+    <div class="tab-content">
+      <div ng-repeat="kdm in tabs" id="{{kdm.id}}" class="tab-pane container">
+        <div ng-include="kdm.template"></div>
+      </div>
+    </div>
+    {% endraw %}
+    
+    
     <div id="load-dialog" title="From JSON">
       <p>Paste JSON below</p>
       <textarea rows="10" id="loadjson"></textarea>
@@ -45,9 +45,10 @@
       <textarea rows="10" id="savejson" disabled="true"></textarea>
     </div>
     
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
+    
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
     
     <script type="text/javascript" src='static/javascript/kdm.js'></script>