diff --git a/client/profile.html b/client/profile.html
index 0e2c441..f12d612 100644
--- a/client/profile.html
+++ b/client/profile.html
@@ -25,37 +25,37 @@
                         <th class="text-right">Rating</th>
                     </tr>
                 </thead>
-                <tbody id="categories">
-                    <script id="template" type="text/x-handlers-template">
-                            {{#each categories}}
-                            <tr>
-                                <td class="text-left">{{description}}</td>
-                                <td class="text-right">
-                                    <label class="radio-inline">
-                                        <input type="radio" name="category_{{id}}" value="1" {{checkMatch 1}}> Agree
-                                    </label>
-                                    <label class="radio-inline">
-                                        <input type="radio" name="category_{{id}}" value="0" {{checkMatch 0}}> Neither
-                                    </label>
-                                    <label class="radio-inline">
-                                        <input type="radio" name="category_{{id}}" value="-1" {{checkMatch -1}}> Disagree
-                                    </label>
-                                </td>
-                            </tr>
-                            {{/each}}
-                    </script>
-                </tbody>
+                <tbody id="categories"></tbody>
+                <script id="template" type="text/x-handlers-template">
+                    {{#each categories}}
+                    <tr>
+                        <td class="text-left">{{description}}</td>
+                        <td class="text-right">
+                            <label class="radio-inline">
+                                <input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="1" {{checkMatch 1}}> Agree
+                            </label>
+                            <label class="radio-inline">
+                                <input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="0" {{checkMatch 0}}> Neither
+                            </label>
+                            <label class="radio-inline">
+                                <input type="radio" name="category_{{@key}}" categoryId="{{@key}}" value="-1" {{checkMatch -1}}> Disagree
+                            </label>
+                        </td>
+                    </tr>
+                    {{/each}}
+                </script>
             </table>
 
             <!-- category adder -->
             <div class="input-group">
-                <input type="text" class="form-control" placeholder="New category description">
+                <input type="text" class="form-control" id="newCategory" placeholder="New category description">
                 <span class="input-group-btn">
-                    <button class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
+                    <button class="btn btn-primary" id="addCategory"><span class="glyphicon glyphicon-plus"></span></button>
                 </span>
             </div>
 
         </div>
+
         <script src="bower_components/jquery/dist/jquery.js"></script>
         <script src="bower_components/handlebars/handlebars.js"></script>
         <script src="bower_components/underscore/underscore.js"></script>
diff --git a/client/scripts/profile.js b/client/scripts/profile.js
index 7d7c206..1aed50a 100644
--- a/client/scripts/profile.js
+++ b/client/scripts/profile.js
@@ -20,29 +20,61 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-(function(hscd) {
+(function(categories) {
     'use strict';
 
-    function displayCategories(categories) {
+    function guid() {
+        function s4() {
+            return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+        }
+
+        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+    }
+
+    function transmitCategories() {
+        console.log(categories);
+    }
+
+    function displayCategories() {
         var template = Handlebars.compile($('#template').html());
+
         $('#categories').empty();
         $('#categories').append(template({categories: categories}));
+
+        $('#categories input:radio').change(function() {
+            categories[$(this).attr('categoryId')].value = parseInt(this.value);
+            transmitCategories();
+        });
+    }
+
+    function addCategory(description) {
+        description = description.trim();
+        if (!description) {
+            return;
+        }
+
+        categories[guid()] = {description: description, value: 0};
+
+        transmitCategories();
+        displayCategories();
     }
 
     function onReady() {
         Handlebars.registerHelper('checkMatch', function(value, options) {
-            return new Handlebars.SafeString(
-                value == this.value ? 'checked' : ''
-            );
+            return new Handlebars.SafeString(value == this.value ? 'checked' : '');
         });
 
-        var categories = [
-            {description: 'Description1', id: 0, value: -1},
-            {description: 'Description2', id: 1, value: 0},
-            {description: 'Description3', id: 2, value: 1},
-        ];
+        categories = {
+            0: {description: 'Description1', value: -1},
+            1: {description: 'Description2', value: 0},
+            2: {description: 'Description3', value: 1},
+        };
 
-        displayCategories(categories);
+        $('#addCategory').click(function() {
+            addCategory($('#newCategory').val());
+        });
+
+        displayCategories();
     }
 
     $(document).on({
@@ -50,4 +82,4 @@
         ajaxStop: function() { $('#spinner').hide(); },
         ready: onReady()
     });
-})();
+})(window.categories = window.categories || {});