diff --git a/index.html b/index.html
index 88a6852..68227c0 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,46 @@
     <title>Particle Clicker</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <style>
+      #Detector img {
+        border-radius: 10px;
+        cursor: pointer;
+        width: 200px;
+      }
+    </style>
   </head>
   <body>
 
+  <div id="Detector" ng-controller="DetectorController as dc">
+    <img ng-click="dc.click()" src="assets/detector.png" alt="Your detector. Click on it to generate events.">
+  </div>
+
+  <div id="Lab" ng-controller="LabController as lc">
+    <h1>{{ lc.lab.name }}</h1>
+    <p>Data: {{ lc.lab.data }}</p>
+    <p>Reputation: {{ lc.lab.reputation }}</p>
+    <p>Money: {{ lc.lab.money }}</p>
+  </div>
+  
+  <div id="Research" ng-controller="ResearchController as rc">
+    <h1>Research</h1>
+    <div class="research-item" ng-repeat="r in rc.research" ng-show="r.is_available()">
+      <h2>{{ r.name }}</h2>
+      <p ng-show="r.level > 0">{{ r.description }} Level: {{ r.level }}</p>
+      <button ng-click="r.research()">Research ({{ r.cost }})</button>
+    </div>
+  </div>
+
+  <div id="HR" ng-controller="HRController as hrc">
+    <h1>HR Department</h1>
+    <div class="hr-item" ng-repeat="w in hrc.workers">
+      <h2>{{ w.name }}</h2>
+      <p ng-show="w.hired > 0">{{ w.description }} You have {{ w.hired }} of them working for you.</p>
+      <button ng-click="w.hire()">Hire ({{ w.cost }})</button>
+    </div>
+  </div>
+
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
     <script src="js/game.js"></script>
diff --git a/js/game.js b/js/game.js
index fb5c6cd..e954577 100644
--- a/js/game.js
+++ b/js/game.js
@@ -1,4 +1,7 @@
 'use strict';
+
+var DEBUG = true;
+
 (function () {
   var loadJsonFile = function(filename) {
     var res;
@@ -12,14 +15,92 @@
     return res;
   }
 
+  var lab = {
+    name: 'My Awesome Lab',
+    data: 0,
+    reputation: 0,
+    money: 0,
+    getGrant: function () {
+      this.money += this.reputation * 10;  // TODO: adjust factor
+    },
+    acquire: function (amount) {
+      this.data += amount;
+    },
+    research: function (cost, reputation) {
+      if (this.data >= cost) {
+        this.data -= cost;
+        this.reputation += reputation;
+        return true;
+      }
+      return false;
+    },
+    buy: function(cost) {
+      if (this.money >= cost) {
+        this.money -= cost;
+        return true;
+      }
+      return false;
+    },
+    sell: function(cost) {
+      this.money += cost;
+    }
+  };
+
+  /* Construct research object from json file.
+   * Additional attribute level keeps track of the current upgrade status.
+   * Also add functionality to research each item.
+   */
+  var research = loadJsonFile('json/research.json');
+  research.map(function (item) {  // define additional stuff on the objects
+    item.level = 0;
+    item.is_available = function () {
+      return this.level > 0 || lab.data > item.cost * .9;
+    };
+    item.research = function () {
+      if (lab.research(this.cost, this.reputation)) {
+        this.level++;
+      }
+    }
+  });
+  if (DEBUG) console.log(research);
 
-  var discoveries = loadJsonFile('json/discoveries.json');
   var workers = loadJsonFile('json/workers.json');
-
-  console.log(discoveries);
-  console.log(workers);
+  workers.map(function (worker) {
+    worker.hired = 0;
+    worker.hire = function() {
+      if (lab.buy(this.cost)) {
+        this.hired++;
+      }
+    };
+  });
 
   var app = angular.module('particleClicker', []);
+
+  app.controller('DetectorController', function () {
+    this.click = function () {
+      lab.acquire(1);
+    };
+  });
+
+  app.controller('LabController', ['$interval', function ($interval) {
+    this.lab = lab;
+    $interval(function () {  // one tick
+      lab.getGrant();
+      var sum = 0;
+      for (var i = 0; i < workers.length; i++) {
+        sum += workers[i].hired * workers[i].rate;
+      }
+      lab.acquire(sum);
+    }, 1000);
+  }]);
+
+  app.controller('ResearchController', function () {
+    this.research = research;
+  });
+
+  app.controller('HRController', function () {
+    this.workers = workers;
+  });
 })();
 
 
diff --git a/json/discoveries.json b/json/discoveries.json
deleted file mode 100644
index ba4b3f0..0000000
--- a/json/discoveries.json
+++ /dev/null
@@ -1,11 +0,0 @@
-[
-  {
-    "name": "W-Boson",
-    "description": "The W-Boson is the carrier boson of the weak force.",
-    "research": {
-      "reputation": 1,
-      "cost": 100
-    },
-    "histogram": {}
-  }
-]
