diff --git a/chromebook-checkout-meteor/client/admin.css b/chromebook-checkout-meteor/client/admin.css
deleted file mode 100644
index 5aa96f1..0000000
--- a/chromebook-checkout-meteor/client/admin.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.admintitle {
-	text-align: center;
-  margin-top: 0;
-}
-
-.content {
-  background-color: #F7F7FF;
-  border-radius:15px;
-  margin-left:auto;
-  margin-right:auto;
-  margin-top:5%;
-  margin-bottom:0;
-  height:auto;
-  max-width:60%;
-  box-shadow: 0px 5px 10px #222222;
-  padding-bottom:0;
-  padding-top:0;
-}
-
-.remove {
-  margin-bottom: 4%;
-}
-
-.yield:hover, .yieldc:hover{
-  color: #E14C2B;
-}
-
-.row {
-  min-width: 80%;
-}
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/admin.html b/chromebook-checkout-meteor/client/admin.html
old mode 100644
new mode 100755
index 3f0ab72..11b37d5
--- a/chromebook-checkout-meteor/client/admin.html
+++ b/chromebook-checkout-meteor/client/admin.html
@@ -1,6 +1,6 @@
 <template name="admin">
-  <div id="center">
-    <h5 class="admintitle">Admin Panel</h5>
+  <div id="main-center">
+    <h5 class="titleadmin">Admin Panel</h5>
     <div class="content">
       
               {{#teacherTabs tabs=tabs}}
diff --git a/chromebook-checkout-meteor/client/checkout.css b/chromebook-checkout-meteor/client/checkout.css
deleted file mode 100644
index 955c7d4..0000000
--- a/chromebook-checkout-meteor/client/checkout.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.center-box {
-background-color: #F7F7FF;
-border-radius:15px;
-margin-left:auto;
-margin-right:auto;
-margin-top:15%;
-height:auto;
-max-width:60%;
-box-shadow: 0px 5px 10px #222222;
-padding-bottom:0;
-padding-top:0;
-overflow-y: auto;
-margin-bottom: 25%;
-}
-
-.title {
-  display: inline;
-  min-width: 50%;
-}
-
-.titleword {
-  text-align: center;
-  margin-top: 0;
-}
-
-.row {
-  height: 10%;
-  display: flex;
-}
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/checkout.html b/chromebook-checkout-meteor/client/checkout.html
index 2856d0d..8291640 100644
--- a/chromebook-checkout-meteor/client/checkout.html
+++ b/chromebook-checkout-meteor/client/checkout.html
@@ -1,8 +1,10 @@
 <template name="checkout">
-    <div class="center-box">
-	    <div class="title">
-	      <h5 class="titleword">Chromebook Checkout</h5>
+    <div id="main-center">
+    	<div>
+	      <h5>Chromebook Checkout</h5>
 	    </div>
+	     <div id="border">
+	      <div id="chromebooks">
 	      {{#each chromebooks}}
 	    		<div class="row">
 	        	{{> chromebook}}
@@ -10,6 +12,9 @@
 	      		<!-- <i class="icons cross fa fa-exclamation-triangle fa-lg"></i> -->
      			</div>
 	      {{/each}}
+	  	  </div>
+	  	  </div>
+	  	  <i class="icons teacher fa fa-user"></i>	
 	      <i class="icons edit fa fa-pencil-square-o fa-lg"></i>
-    </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 1e02fba..54d9dda 100644
--- a/chromebook-checkout-meteor/client/checkout.js
+++ b/chromebook-checkout-meteor/client/checkout.js
@@ -32,5 +32,13 @@ Template.checkout.events({
     else {
       alert("Access Denied");
     }
+  },
+  'click .teacher': function() {
+    if (Roles.userIsInRole(Meteor.userId(), ['admin', 'teacher'])) {
+      Router.go('/teacher');
+    }
+    else {
+      alert("Access Denied");
+    }
   }
 });
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/initial.html b/chromebook-checkout-meteor/client/initial.html
index 7926c24..e7b5e9b 100644
--- a/chromebook-checkout-meteor/client/initial.html
+++ b/chromebook-checkout-meteor/client/initial.html
@@ -1,11 +1,8 @@
 <template name="initial">
-  <div id="center">
-    <div id="sign-in">
+    <div id="initial">
       <h5>Chromebook Checkout</h5>
       <button id="submit">Checkout!</button>
     </div>
     <p class="bottom">Checkout a chromebook.</p>
       <img class="chromeicon" src="ico/chrico.png">
-
-  </div>
 </template> 
diff --git a/chromebook-checkout-meteor/client/login.html b/chromebook-checkout-meteor/client/login.html
index fea2845..3ede111 100644
--- a/chromebook-checkout-meteor/client/login.html
+++ b/chromebook-checkout-meteor/client/login.html
@@ -1,11 +1,8 @@
 <template name="login">
-<div id="center">
-    <div id="sign-in">
+<div id="main-center">
       <h5>Chromebook Checkout</h5>
+      <div id="chromebooks">
       {{> loginButtons}}
-    </div>
-    <p class="bottom">Checkout a chromebook. 
-      <img class="chromeicon" src="ico/chrico.png">
-    </p>
+      </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/main.css b/chromebook-checkout-meteor/client/main.css
index b0a237c..48d1242 100644
--- a/chromebook-checkout-meteor/client/main.css
+++ b/chromebook-checkout-meteor/client/main.css
@@ -22,8 +22,8 @@ html {
   height: 30px;
   width: 30px;
   float: right;
-  margin-right: 41.4%;
-  margin-top: 0.5%;
+  margin-right: 37%;
+  margin-top: 0.75%;
 }
 
 body {
@@ -45,16 +45,12 @@ a {
   -moz-animation: neon1 1.5s ease-in-out infinite alternate;
   animation: neon1 1.5s ease-in-out infinite alternate; 
 }
-
-//Divs
-#main {
-}
-#sign-in {
+#initial {
   background-color: #F7F7FF;
   border-radius:15px;
   margin-left:auto;
   margin-right:auto;
-  margin-top:18%;
+  margin-top:23%;
   margin-bottom:0;
   height:auto;
   max-width:600px;
@@ -62,6 +58,57 @@ a {
   padding-bottom:0;
   padding-top:0;
 }
+#main-center {
+  background-color: #F7F7FF;
+  border-radius:15px;
+  margin-left:auto;
+  margin-right:auto;
+  margin-top:4%;
+  margin-bottom:0;
+  height:auto;
+  max-height:700px;
+  max-width:825px;
+  box-shadow: 0px 5px 10px #222222;
+  padding-bottom:0;
+  padding-top:0;
+}
+#chromebooks, #carts {
+  overflow: auto;
+  padding-top:.5%;
+  padding-bottom:.5%;
+  max-height:600px;
+}
+#tchromebooks {
+  overflow: auto;
+  padding-top:.5%;
+  padding-bottom:.5%;
+  max-height:500px;
+}
+#border {
+  padding: 0 15px 15px 15px;
+}
+.row {
+  height: 10%;
+  display: flex;
+}
+.tabs {
+  margin-top: 0;
+  padding-top: 0;
+}
+//Admin Panel
+.remove {
+  margin-bottom: 4%;
+}
+
+.yield:hover {
+  color: #E14C2B;
+}
+
+.row {
+  min-width: 80%;
+}
+
+
 button {
 	 background: #d94158;
   background-image: -webkit-linear-gradient(top, #d94158, #ad3838);
@@ -108,7 +155,7 @@ p {
 }
 p.bottom {
 	padding-top:0%;
-  margin-left:41.5%;
+  margin-left:37.5%;
   margin-right:auto;
 	color:#f7f7f7;
   max-width:325px;
@@ -135,10 +182,9 @@ padding-bottom:10px;
 h5{
 	margin-left:auto;
   margin-right:auto;
-  margin-top:12.5%;
+  margin-top:0.3%;
   margin-bottom:0.3%;
   color:#777;
-  max-width:300px;
   font-weight:10;
   padding-top:3%;
 }
diff --git a/chromebook-checkout-meteor/client/main.html b/chromebook-checkout-meteor/client/main.html
index fb46411..663547d 100644
--- a/chromebook-checkout-meteor/client/main.html
+++ b/chromebook-checkout-meteor/client/main.html
@@ -1,6 +1,7 @@
 <head>
   <title>IA Chromebook Checkout</title>
   <link rel="icon" href="ico/favicon.png">
+  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 </head>
 
 <body>
diff --git a/chromebook-checkout-meteor/client/tabs.css b/chromebook-checkout-meteor/client/tabs.css
index 8842264..396bc28 100644
--- a/chromebook-checkout-meteor/client/tabs.css
+++ b/chromebook-checkout-meteor/client/tabs.css
@@ -8,7 +8,7 @@
   font-weight: 600;
   font-size: 13px;
   float: left;
-  padding: 13px 22.57%;
+  padding: 13px 23.02%;
   margin: 0;
   list-style: none;
   cursor: pointer;
@@ -18,7 +18,7 @@
   border: 1px solid #ddd;
   border-bottom: none;
   margin-bottom: -1px !important;
-  padding: 13px 22% 14px 22% !important;
+  padding: 13px 23.03% 14px 23.03% !important;
   background-color: #fff;
   color: #333;
 }
diff --git a/chromebook-checkout-meteor/client/teacher.html b/chromebook-checkout-meteor/client/teacher.html
index dbe7b9e..df3530b 100644
--- a/chromebook-checkout-meteor/client/teacher.html
+++ b/chromebook-checkout-meteor/client/teacher.html
@@ -1,10 +1,10 @@
 <template name="teacher">
-    <div id="centerbox">
-      <h5 class="titleword">Chromebook Checkout</h5>
-        <div id="tabs">
+    <div id="main-center">
+      <h5>Chromebook Checkout</h5>
+          <div>
               {{#teacherTabs tabs=tabs}}
           <!-- Single -->
-           <div>
+           <div id="tchromebooks">
               {{#each chromebooks}}
                 <div class="row">
                   {{> chromebook}}
@@ -21,6 +21,6 @@
            </div>
 
                {{/teacherTabs}}
+            </div>
         </div>
-    </div>  
 </template>
\ No newline at end of file