diff --git a/lms/templates/verify_student/face_upload.html b/lms/templates/verify_student/face_upload.html
index 6338750c06..662934c20d 100644
--- a/lms/templates/verify_student/face_upload.html
+++ b/lms/templates/verify_student/face_upload.html
@@ -3,9 +3,249 @@
 <%inherit file="../main.html" />
 
 <%block name="content">
+<div class="container">
 
-<h1>Face Upload!</h1>
+  <header class="page-header">
+    <h2 class="title">You are registering for [coursename] (ID Verified)</h2>
+  </header>
 
-<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>
+  <section class="progress">
+  <h3 class="sr">Your Progress</h3>
+  <ol>
+    <li class="progress-step1"><span class="current">Current: </span>Step 1 Take Your Photo</li>
+    <li class="progress-step2">Step 2 ID Photo</li>
+    <li class="progress-step3">Step 3 Review</li>
+    <li class="progress-step4">Step 4 Payment</li>
+    <li class="progress-step5">Finished Confirmation</li>
+  </ol>
+  </section>
+
+
+
+  <section id="wrapper">
+    <div id="wrapper-facephoto">
+      <h3>Take Your Photo</h3>
+      <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
+
+      <div id="facecam">
+
+        <div class="placeholder-cam">
+        <!-- cam image -->
+        </div>
+
+        <div class="controls photo-controls">
+          <ul>
+            <li class="ctrl-do">
+              <a class="action action-do" href="">Take photo</a>
+            </li>
+          </ul>
+
+          <ul>
+            <li class="ctrl-redo">
+              <a class="action action-redo" href="">Retake</a>
+            </li>
+            <li class="ctrl-approve">
+              <a class="action action-approve" href="">Looks good</a>
+            </li>
+          </ul>
+
+          <ul>
+            <li class="ctrl-redo">
+              <a class="action action-redo"  href="">Retake</a>
+            </li>
+            <li class="ctrl-approve is-approved">
+              <a class="action action-approve" href="">Looks good</a>
+            </li>
+          </ul>
+        </div>
+
+      </div>
+
+      <div class="tips facetips">
+        <h4>Tips on taking a successful photo</h4>
+        <ul>
+          <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
+          <li>Maecenas faucibus mollis interdum.</li>
+          <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
+          <li>Cras mattis consectetur purus sit amet fermentum.</li>
+        </ul>
+      </div>
+
+      <div class="faq facefaq">
+        <h4 class="sr">Common Questions</h4>
+        <dl>
+          <dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
+            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
+          <dt>Vestibulum id ligula porta felis euismod semper.</dt>
+          <dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
+            <dd>Aenean eu leo quam.</dd>
+          <dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
+            <dd>Maecenas faucibus mollis interdum.</dd>
+        </dl>
+      </div>
+
+      <div class="actions">
+        <ul>
+          <li class="action action-next">
+            <a href="#">Go to Step 2: Take ID Photo</a>
+            <p class="tips">Once you verify your photo looks good, you can move on to step 2.</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+
+
+
+    <div id="wrapper-idphoto">
+      <h3>Take Your Photo</h3>
+      <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
+
+      <div id="idcam">
+
+        <div class="placeholder-cam">
+        <!-- cam image -->
+        </div>
+
+        <div class="controls photo-controls">
+          <a href="">Take photo</a>
+
+          <a href="">Retake</a>
+          <a class="" href="">Looks good</a>
+
+          <a class="clicked" href="">Looks good</a>
+        </div>
+
+      </div>
+
+      <div class="tips idtips">
+        <h4>Tips on taking a successful photo</h4>
+        <ul>
+          <li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
+          <li>Maecenas faucibus mollis interdum.</li>
+          <li>Nullam id dolor id nibh ultricies vehicula ut id elit.</li>
+          <li>Cras mattis consectetur purus sit amet fermentum.</li>
+        </ul>
+      </div>
+
+      <div class="faq idfaq">
+        <h4 class="sr">Common Questions</h4>
+        <dl>
+          <dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
+            <dd>Aenean eu leo quam.</dd>
+          <dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
+            <dd>Maecenas faucibus mollis interdum.</dd>
+          <dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt>
+            <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
+          <dt>Vestibulum id ligula porta felis euismod semper.</dt>
+        </dl>
+      </div>
+
+      <div class="actions">
+        <ul>
+          <li class="action action-next">
+            <a href="#">Go to Step 3: Review Your Info</a>
+            <p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+
+
+    <div id="wrapper-review">
+      <h3>Verify Your Submission</h3>
+      <p>Make sure we can verify your identity with the photos and information below.</p>
+
+      <div class="review-name">
+        <h3>Check Your Name</h3>
+        <p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
+        <p><a href="#">Edit my name</a></p>
+
+        <section id="edit-name" class="modal">
+        <header>
+          <h4>${_("Edit Your Full Name")}</h4>
+        </header>
+          <form id="course-checklists" class="course-checklists" method="post" action="">
+            <div role="alert" class="status message submission-error" tabindex="-1">
+              <p class="message-title">${_("The following error occured while editing your name:")}
+                <span class="message-copy"> </span>
+              </p>
+            </div>
+            <p>
+              <label for="name">${_('Full Name')}</label>
+              <input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
+            </p>
+
+            <div class="actions">
+              <button class="action action-primary" type="submit">${_("Save")}</button>
+              <button class="action action-secondary action-cancel">${_("Cancel")}</button>
+            </div>
+          </form>
+          <a href="#" rel="view" class="action action-close action-editname-close">
+            <i class="icon-remove-sign"></i>
+            <span class="label">close</span>
+          </a>
+        </section>
+      </div>
+
+      <div id="review-facephoto">
+        <div class="placeholder-photo">
+        <!-- photo image -->
+        </div>
+
+        <h4>The photo above needs to meet the following requirements:</h4>
+        <ul>
+          <li>Be well lit</li>
+          <li>Show your whole face</li>
+          <li>Match your ID</li>
+        </ul>
+      </div>
+
+      <div id="review-facephoto">
+        <div class="placeholder-photo">
+        <!-- photo image -->
+        </div>
+
+        <h4>The photo above needs to meet the following requirements:</h4>
+        <ul>
+          <li>Be readable (not too far away, no glare)</li>
+          <li>Show your name</li>
+          <li>Match the photo of your face and your name above</li>
+        </ul>
+      </div>
+
+
+
+
+      <div class="next">
+
+        <p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
+
+
+        <input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
+
+      <div class="actions">
+        <ul>
+          <li class="action action-next">
+            <a href="#">Go to Step 4: Secure Payment</a>
+            <p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+
+
+
+  <section class="support">
+    <p>More questions? <a rel="external" href="">Check out our FAQs.</a></p>
+    <p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
+  </section>
+
+
+
+  <!--<a href="${reverse('verify_student/photo_id_upload')}">Upload Photo ID</a>-->
+</div>
 
 </%block>