diff --git a/css/main.css b/css/main.css
index 682d1ef..83ffe77 100644
--- a/css/main.css
+++ b/css/main.css
@@ -108,6 +108,10 @@ body{
     text-align:center;
 }
 
+p.middle{
+    
+}
+
 #tupperware{
     margin:0 auto;
     width:100%;
diff --git a/index.html b/index.html
index e547b35..6ff7c19 100644
--- a/index.html
+++ b/index.html
@@ -20,17 +20,18 @@
     
 
         <div id="password" class="">
+            <smile-to-unlock-hider></smile-to-unlock-hider>
+            <smile-to-unlock api-key="1fd73c6345e449ee8f8b0febc33cf300"></smile-to-unlock>
             <!-- some webcam video link -->
-            <h1>How 'bout a smile?</h1>
-            <p>Smile for the camera to enter the page</p>
+            <!--<h1>How 'bout a smile?</h1>
+            <p>Smile for the camera to enter the page</p>-->
             
         </div>
 
 
         <div id="tupperware" class="hidden">
 
-            <smile-to-unlock-hider></smile-to-unlock-hider>
-            <smile-to-unlock api-key="1fd73c6345e449ee8f8b0febc33cf300"></smile-to-unlock>
+            
 
             <div id="content" class="clearfix">
                 <header>
@@ -67,6 +68,10 @@ <h3>Add a student</h3>
         // This event is sent when the user has smiled
                     locker.addEventListener("userSmiled", function (ev) {
                         console.log(ev.detail.score);
+                        document.querySelector('#password').classList.add('hidden');
+                        document.querySelector('#tupperware').classList.remove('hidden');
+
+
 
           // Hide the hider so we show the content
                         hider.hide();