diff --git a/chromebook-checkout-meteor/.meteor/packages b/chromebook-checkout-meteor/.meteor/packages
index 0c6661b..1f85f91 100644
--- a/chromebook-checkout-meteor/.meteor/packages
+++ b/chromebook-checkout-meteor/.meteor/packages
@@ -12,3 +12,4 @@ accounts-google
 accounts-ui
 alanning:roles
 mrt:purecss
+fortawesome:fontawesome
diff --git a/chromebook-checkout-meteor/.meteor/versions b/chromebook-checkout-meteor/.meteor/versions
index 15fc234..e4ff5bb 100644
--- a/chromebook-checkout-meteor/.meteor/versions
+++ b/chromebook-checkout-meteor/.meteor/versions
@@ -18,6 +18,7 @@ deps@1.0.6
 ejson@1.0.5
 fastclick@1.0.2
 follower-livedata@1.0.3
+fortawesome:fontawesome@4.2.0_2
 geojson-utils@1.0.2
 google@1.1.3
 html-tools@1.0.3
diff --git a/chromebook-checkout-meteor/client/checkout.css b/chromebook-checkout-meteor/client/checkout.css
index ad6f36d..3d1ade0 100644
--- a/chromebook-checkout-meteor/client/checkout.css
+++ b/chromebook-checkout-meteor/client/checkout.css
@@ -1,4 +1,27 @@
-.chromebook:hover {
-  box-shadow: 5px 0 12px #919191, -5px 0 12px #919191;
-  outline: #25abd9 solid 3px;
+.center-box {
+background-color: #F7F7FF;
+border-radius:15px;
+margin-left:auto;
+margin-right:auto;
+margin-top:18%;
+margin-bottom:0;
+height:auto;
+max-width:60%;
+box-shadow: 0px 5px 10px #222222;
+padding-bottom:0;
+padding-top:0;
+}
+
+.title {
+  display: inline;
+  min-width: 50%;
+}
+
+.titleword {
+  text-align: center;
+}
+
+.row {
+  height: 10%;
+  display: flex;
 }
diff --git a/chromebook-checkout-meteor/client/checkout.html b/chromebook-checkout-meteor/client/checkout.html
index 6721830..c5ab430 100644
--- a/chromebook-checkout-meteor/client/checkout.html
+++ b/chromebook-checkout-meteor/client/checkout.html
@@ -1,11 +1,15 @@
 <template name="checkout">
-  <div id="center">
-    <div id="sign-in">
-      <h5>Chromebook Checkout</h5>
-      {{#each chromebooks}}
-      	{{> chromebook}}
-      {{/each}}
-      <button id="submit">Checkout!</button>
+    <div class="center-box">
+	    <div class="title">
+	      <h5 class="titleword">Chromebook Checkout</h5>
+	    </div>
+	      {{#each chromebooks}}
+	    		<div class="row">
+	        	{{> chromebook}}
+	      		<i class="icons cross fa fa-exclamation-triangle fa-lg"></i>
+	      		<!-- fa-times -->
+<!-- 	      		<i class="icons edit fa fa-pencil-square-o"></i> -->
+     			</div>
+	      {{/each}}
     </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
index 6f59776..25ba41e 100644
--- a/chromebook-checkout-meteor/client/checkout.js
+++ b/chromebook-checkout-meteor/client/checkout.js
@@ -2,4 +2,27 @@ Template.checkout.helpers({
   chromebooks: function() {
     return Chromebooks.find();
   }
+});
+
+
+Template.checkout.events({
+  'click .cross' : function() {
+    if (Roles.userIsInRole(Meteor.userId(), ['admin'])) {
+      if (this.status === 0) {
+        Chromebooks.update(this._id, {$set: {status: 2}});
+        Chromebooks.update(this._id, {$set: {user: null}});
+      }
+      else if (this.status ===1) {
+        Chromebooks.update(this._id, {$set: {status: 2}});
+      }
+      else {
+        Chromebooks.update(this._id, {$set: {status: 0}});
+        Chromebooks.update(this._id, {$set: {last_checkout: null}});
+        Chromebooks.update(this._id, {$set: {userid: null}});
+      }
+    }
+    else {
+      alert("Access Denied");
+    }
+  }
 });
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/chromebook.css b/chromebook-checkout-meteor/client/chromebook.css
index 04fd7d1..a158978 100644
--- a/chromebook-checkout-meteor/client/chromebook.css
+++ b/chromebook-checkout-meteor/client/chromebook.css
@@ -11,18 +11,41 @@ body {
   font-family: Lato;
   padding-left:2%;
   margin-left:3%;
-  margin-right:3%;
   margin-bottom: 3%;
   box-shadow: 3px 3px 10px #c2c2c2;
   color: #000000;
   height: 10%;
+  max-width: 80%;
+  min-width: 80%;
 }
 
+.chromebook:hover {
+  box-shadow: 5px 0 12px #919191, -5px 0 12px #919191;
+  outline: #25abd9 solid 3px;
+}
+
+
 .timestamp {
   color: #6D6E6D;
   float: right;
 }
 
+.icons {
+  float: right;
+  margin-top: 2.5%;
+  margin-left: 2%;
+  color: #5A5A5A;
+  transition: color 0.5s;
+}
+
+/*.edit:hover {
+  color: #25abd9;
+}*/
+
+.cross:hover {
+  color: #E14C2B;
+}
+
 .user {
   font-size: 65%;
   margin-top: 2%;
@@ -30,6 +53,7 @@ body {
   margin-bottom: 0%;
   text-align: right;
   padding-right: 10%;
+  transition: color 0.5s;
 }
 .time {
   margin-top: 0%;
@@ -37,16 +61,24 @@ body {
   text-align: right;
   padding-right: 10%;
   margin-bottom: 0%;
+  transition: color 0.5s;
 }
 
 .available {
   background-color:#72D376;
+  transition: background-color 1s;
 }
 
 .checkedout {
   background-color:#F9DB45;
+  transition: background-color 1s;
 }
 
 .unavailable {
   background-color:#E14C2B;
-}
\ No newline at end of file
+  transition: background-color 1s;
+}
+
+.unavailable .user, .unavailable .time {
+  color: white;
+}
diff --git a/chromebook-checkout-meteor/client/chromebook.html b/chromebook-checkout-meteor/client/chromebook.html
index 8aade37..fd61b35 100644
--- a/chromebook-checkout-meteor/client/chromebook.html
+++ b/chromebook-checkout-meteor/client/chromebook.html
@@ -1,11 +1,14 @@
 <template name="chromebook">
-  <div class="chromebook {{status_class}}">
-  	<p class="pure-u-3-5">Chromebook #{{number}}</p> 
-  	  {{#if status }}
-  	  	<div class="timestamp pure-u-2-5">
-  	  		<p class="user"> <b>{{user}}</b></p>
-  	  		<p class="time">{{time_ago}}</p>
-  	  	</div>
-  	  {{/if}}
-  </div>
+    <div class="chromebook {{status_class}}">
+      <p class="pure-u-3-5">Chromebook #{{number}}</p> 
+        {{#if status }}
+          <div class="timestamp pure-u-2-5">
+            <p class="user"> <b>{{user}}</b></p>
+            <p class="time">{{time_ago}}</p>
+          </div>
+          <!-- <div class="cross pure-u-2-5">
+              <i class="fa fa-times"></i>
+          </div> -->
+        {{/if}}
+    </div>
 </template>
diff --git a/chromebook-checkout-meteor/client/chromebook.js b/chromebook-checkout-meteor/client/chromebook.js
index b0890df..217d880 100644
--- a/chromebook-checkout-meteor/client/chromebook.js
+++ b/chromebook-checkout-meteor/client/chromebook.js
@@ -23,7 +23,8 @@ Template.chromebook.helpers({
 
 Template.chromebook.events({
   'click .available': function() {
-    if (Chromebooks.findOne({userid: Meteor.userId()}) === undefined) {
+    if ((Chromebooks.findOne({userid: Meteor.userId()}) === undefined) 
+    || (Roles.userIsInRole(Meteor.userId(), ['admin', 'teacher']))) {
       Chromebooks.update(this._id, {$set: {status: 1}});
       Chromebooks.update(this._id, {$set: {last_checkout: new Date()}});
       Chromebooks.update(this._id, {$set: {userid: Meteor.userId()}});
diff --git a/chromebook-checkout-meteor/server/users.js b/chromebook-checkout-meteor/server/users.js
index 11ec99f..142b1d9 100644
--- a/chromebook-checkout-meteor/server/users.js
+++ b/chromebook-checkout-meteor/server/users.js
@@ -1,18 +1,4 @@
 Meteor.publish('chromebook', function() {
-  // return Chromebooks.find({}, {fields: {number: 1, status: 1, userid: 1, last_checkout: 1}});
-
-  // var user = Meteor.user();
-  // console.log("user:", user);
-  // var field;
-
-  // if (user && user.roles[0] == 'admin') {
-  //   field = {number: 1, status: 1, userid: 1, last_checkout: 1, serial: 1};
-  // }
-  // else {
-  //   field = {number: 1, status: 1, userid: 1, last_checkout: 1};
-  // }
-  // console.log("field:", field);
-  // return Chromebooks.find({}, {fields: field});
 
   if (Roles.userIsInRole(this.userId, ['admin'])) {
 
@@ -44,15 +30,19 @@ for (var i = 0; i < adminusers.length; i++) {
   }
 };
 
-// Accounts.validateNewUser(function (user) {
-//   var loggedInUser = Meteor.user();
-
-//   if (Roles.userIsInRole(loggedInUser, ['admin'])) {
-//     return true;
-//   }
-
-//   throw new Meteor.Error(403, "Not authorized to create new users");
-// });
+var teachers = [
+  // Add all Teachers here
+  "mminer@bloomfield.org",
+  "qalieh.yaman90@bloomfield.org",
+  "ruhelski@bloomfield.org"
+];
+for (var i = 0; i < teachers.length; i++) {
+  var teacher = teachers[i];
+  if (Meteor.users.findOne({"services.google.email": teacher}) != undefined) {
+    var userID = Meteor.users.findOne({"services.google.email": teacher})._id;
+    Meteor.users.update(userID, {$set: {roles: ['teacher']}});
+  }
+};
 
 Meteor.methods({
   deleteUser: function (targetUserId, group) {