diff --git a/chromebook-checkout-meteor/.meteor/packages b/chromebook-checkout-meteor/.meteor/packages
index 99704e0..fe09757 100644
--- a/chromebook-checkout-meteor/.meteor/packages
+++ b/chromebook-checkout-meteor/.meteor/packages
@@ -7,3 +7,5 @@
 meteor-platform
 autopublish
 insecure
+iron:router
+momentjs:moment
diff --git a/chromebook-checkout-meteor/.meteor/versions b/chromebook-checkout-meteor/.meteor/versions
index 149aa49..58fb60f 100644
--- a/chromebook-checkout-meteor/.meteor/versions
+++ b/chromebook-checkout-meteor/.meteor/versions
@@ -19,6 +19,14 @@ htmljs@1.0.3
 http@1.0.9
 id-map@1.0.2
 insecure@1.0.2
+iron:controller@1.0.6
+iron:core@1.0.6
+iron:dynamic-template@1.0.6
+iron:layout@1.0.6
+iron:location@1.0.6
+iron:middleware-stack@1.0.6
+iron:router@1.0.6
+iron:url@1.0.6
 jquery@1.0.2
 json@1.0.2
 launch-screen@1.0.1
@@ -29,6 +37,7 @@ meteor-platform@1.2.1
 minifiers@1.1.3
 minimongo@1.0.6
 mobile-status-bar@1.0.2
+momentjs:moment@2.8.4
 mongo@1.0.10
 observe-sequence@1.0.4
 ordered-dict@1.0.2
diff --git a/chromebook-checkout-meteor/client/checkout.css b/chromebook-checkout-meteor/client/checkout.css
new file mode 100644
index 0000000..ad6f36d
--- /dev/null
+++ b/chromebook-checkout-meteor/client/checkout.css
@@ -0,0 +1,4 @@
+.chromebook:hover {
+  box-shadow: 5px 0 12px #919191, -5px 0 12px #919191;
+  outline: #25abd9 solid 3px;
+}
diff --git a/chromebook-checkout-meteor/client/checkout.html b/chromebook-checkout-meteor/client/checkout.html
new file mode 100644
index 0000000..6721830
--- /dev/null
+++ b/chromebook-checkout-meteor/client/checkout.html
@@ -0,0 +1,11 @@
+<template name="checkout">
+  <div id="center">
+    <div id="sign-in">
+      <h5>Chromebook Checkout</h5>
+      {{#each chromebooks}}
+      	{{> chromebook}}
+      {{/each}}
+      <button id="submit">Checkout!</button>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/checkout.js b/chromebook-checkout-meteor/client/checkout.js
new file mode 100644
index 0000000..6f59776
--- /dev/null
+++ b/chromebook-checkout-meteor/client/checkout.js
@@ -0,0 +1,5 @@
+Template.checkout.helpers({
+  chromebooks: function() {
+    return Chromebooks.find();
+  }
+});
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/chromebook.css b/chromebook-checkout-meteor/client/chromebook.css
new file mode 100644
index 0000000..c27c483
--- /dev/null
+++ b/chromebook-checkout-meteor/client/chromebook.css
@@ -0,0 +1,22 @@
+.chromebook {
+  font-family: Lato;
+  padding-left:2%;
+  margin-left:3%;
+  margin-right:0.5%;
+  margin-top:.7%;
+  margin-bottom:.7%;
+  box-shadow: 3px 3px 10px #c2c2c2;
+  color: #000000;
+}
+
+.available {
+	background-color:#72D376;
+}
+
+.checkedout {
+	background-color:#F9DB45;
+}
+
+.unavailable {
+	background-color:#E14C2B;
+}
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/chromebook.html b/chromebook-checkout-meteor/client/chromebook.html
new file mode 100644
index 0000000..dea6631
--- /dev/null
+++ b/chromebook-checkout-meteor/client/chromebook.html
@@ -0,0 +1,5 @@
+<template name="chromebook">
+  <div class="chromebook {{status_class}}">
+  	<p>Chromebook #{{number}} <span class="time">{{time_ago}}</span></p>
+  </div>
+</template>
diff --git a/chromebook-checkout-meteor/client/chromebook.js b/chromebook-checkout-meteor/client/chromebook.js
new file mode 100644
index 0000000..9b7ef04
--- /dev/null
+++ b/chromebook-checkout-meteor/client/chromebook.js
@@ -0,0 +1,29 @@
+var statusmap = {
+  0: "available",
+  1: "checkedout",
+  2: "unavailable"
+}
+
+Template.chromebook.helpers({
+  status_class: function() {
+    return statusmap[this.status];
+  },
+  time_ago: function() {
+    if (this.last_checkout === null) {
+      return "";
+    } else {
+      return moment(this.last_checkout).fromNow();      
+    }
+  }
+});
+
+Template.chromebook.events({
+  'click .available': function() {
+    Chromebooks.update(this._id, {$set: {status: 1}});
+    Chromebooks.update(this._id, {$set: {last_checkout: new Date()}});
+  },
+  'click .checkedout': function() {
+    Chromebooks.update(this._id, {$set: {status: 0}});
+    Chromebooks.update(this._id, {$set: {last_checkout: null}});
+  }
+});
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/main.html b/chromebook-checkout-meteor/client/main.html
index e999a62..fb46411 100644
--- a/chromebook-checkout-meteor/client/main.html
+++ b/chromebook-checkout-meteor/client/main.html
@@ -1,8 +1,7 @@
 <head>
   <title>IA Chromebook Checkout</title>
-  <link rel="icon" href="../resources/ico/favicon.png">
+  <link rel="icon" href="ico/favicon.png">
 </head>
 
 <body>
-  {{> initial}}
 </body>
diff --git a/chromebook-checkout-meteor/client/router.js b/chromebook-checkout-meteor/client/router.js
new file mode 100644
index 0000000..134c56d
--- /dev/null
+++ b/chromebook-checkout-meteor/client/router.js
@@ -0,0 +1,5 @@
+Router.route('/', function() {
+	this.render("initial");
+})
+
+Router.route('/checkout');
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/collections/chromebooks.js b/chromebook-checkout-meteor/collections/chromebooks.js
new file mode 100644
index 0000000..4969269
--- /dev/null
+++ b/chromebook-checkout-meteor/collections/chromebooks.js
@@ -0,0 +1 @@
+Chromebooks = new Mongo.Collection("chromebook");
\ No newline at end of file