diff --git a/chromebook-checkout-meteor/client/tabs.css b/chromebook-checkout-meteor/client/tabs.css
new file mode 100644
index 0000000..a165a9d
--- /dev/null
+++ b/chromebook-checkout-meteor/client/tabs.css
@@ -0,0 +1,34 @@
+.tabs-container
+ .tabs-list,
+.dynamicTabs-container .tabs-list {
+  text-align: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+.tabs-container
+ .tabs-list .tab-item,
+.dynamicTabs-container .tabs-list .tab-item {
+  font-weight: 600;
+  font-size: 13px;
+  float: left;
+  padding: 13px 22.57%;
+  margin: 0;
+  list-style: none;
+  cursor: pointer;
+}
+.tabs-container
+ .tabs-list .tab-item.active,
+.dynamicTabs-container .tabs-list .tab-item.active {
+  border-radius: top 5px;
+  border: 1px solid #ddd;
+  border-bottom: none;
+  margin-bottom: -1px !important;
+  padding: 13px 22% 14px 22% !important;
+  background-color: #fff;
+  color: #333;
+}
+.tabs-content-container {
+  padding: 12% 15px 15px 15px;
+}
+
diff --git a/chromebook-checkout-meteor/client/tabs.html b/chromebook-checkout-meteor/client/tabs.html
new file mode 100644
index 0000000..bb8fc7a
--- /dev/null
+++ b/chromebook-checkout-meteor/client/tabs.html
@@ -0,0 +1,15 @@
+<template name="teacherTabs">
+
+  <div class="tabs-container">
+  <!-- You can put the tabs anywhere and style them however you want! -->
+    <ul class="tabs-list">
+      {{#each tabs}}
+        <li class="tab-item {{activeTab slug}}">{{name}}</li>
+      {{/each}}
+    </ul>
+  </div>
+  <div class="tabs-content-container">
+      {{> UI.contentBlock}}
+    </div>
+
+</template>
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/teacher.html b/chromebook-checkout-meteor/client/teacher.html
index 3479b0f..0542b09 100644
--- a/chromebook-checkout-meteor/client/teacher.html
+++ b/chromebook-checkout-meteor/client/teacher.html
@@ -1,15 +1,17 @@
 <template name="teacher">
-  <div id="center">
-    {{#basicTabs tabs=tabs}}
-
-    <div>
-      {{> chromebook}}
-    </div>
+    <div id="center">
+      <h5 class="titleword">Chromebook Checkout</h5>
+        <div id="tabs">
+              {{#teacherTabs tabs=tabs}}
+           <div>
+              {{> chromebook}}
+           </div>
      
-   <div>
-      <h2>Bye</h2>
-    </div>
+            <div>
+              <h2>Bye</h2>
+            </div>
 
-    {{/basicTabs}}
-  </div>  
+               {{/teacherTabs}}
+        </div>
+    </div>  
 </template>
\ No newline at end of file
diff --git a/chromebook-checkout-meteor/client/teacher.js b/chromebook-checkout-meteor/client/teacher.js
index 9ea09f4..fe859e6 100644
--- a/chromebook-checkout-meteor/client/teacher.js
+++ b/chromebook-checkout-meteor/client/teacher.js
@@ -1,5 +1,5 @@
 ReactiveTabs.createInterface({
-  template: 'basicTabs',
+  template: 'teacherTabs',
   onChange: function (slug, template) {
     // This callback runs every time a tab changes.
     // The `template` instance is unique per {{#basicTabs}} block.