diff --git a/lms/templates/verify_student/photo_verification.html b/lms/templates/verify_student/photo_verification.html
new file mode 100644
index 0000000000..fb098d3c65
--- /dev/null
+++ b/lms/templates/verify_student/photo_verification.html
@@ -0,0 +1,318 @@
+<%! from django.utils.translation import ugettext as _ %>
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+
+<%block name="bodyclass">register verification photos</%block>
+
+<%block name="js_extra">
+<!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
+<script type="text/javascript">
+
+  function hasGetUserMedia() {
+    // Note: Opera is unprefixed.
+    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
+              navigator.mozGetUserMedia || navigator.msGetUserMedia);
+  }
+
+  var onFailSoHard = function(e) {
+    console.log('Failed to get camera access!', e);
+  };
+
+  /*
+  // Not showing vendor prefixes.
+  navigator.getUserMedia({video: true }, function(localMediaStream) {
+    var video = document.querySelector('video');
+    video.src = window.URL.createObjectURL(localMediaStream);
+
+    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
+    // See crbug.com/110938.
+    video.onloadedmetadata = function(e) {
+      // Ready to go. Do some stuff.
+    };
+  }, onFailSoHard);
+  */
+
+  $(document).ready(function() {
+    $( ".carousel-nav" ).addClass('sr');
+
+    window.URL = window.URL || window.webkitURL;
+    navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
+                              navigator.mozGetUserMedia || navigator.msGetUserMedia;
+
+    var video = document.querySelector('video');
+
+    if (navigator.getUserMedia) {
+      navigator.getUserMedia({audio: true, video: true}, function(stream) {
+        video.src = window.URL.createObjectURL(stream);
+      }, onFailSoHard);
+    } else {
+      video.src = 'somevideo.webm'; // fallback.
+    }
+
+  });
+
+</script>
+</%block>
+
+
+<%block name="content">
+<div class="container">
+
+  <header class="page-header">
+    <h2 class="title">You are registering for ${course_name} (ID Verified)</h2>
+  </header>
+
+  <section class="progress">
+  <h3 class="sr">Your Progress</h3>
+  <ol>
+    <li class="progress-step current" id="progress-step1"><span class="sr">Current: </span>Step 1 Take Your Photo</li>
+    <li class="progress-step" id="progress-step2">Step 2 ID Photo</li>
+    <li class="progress-step" id="progress-step3">Step 3 Review</li>
+    <li class="progress-step" id="progress-step4">Step 4 Payment</li>
+    <li class="progress-step" id="progress-step5">Finished Confirmation</li>
+  </ol>
+  </section>
+
+
+
+  <section class="wrapper carousel"  data-transition="slide">
+    <div id="wrapper-facephoto" class="block-photo">
+      <h3 class="title">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 class="wrapper-up">
+
+        <div id="facecam" class="cam">
+          <div class="placeholder-cam">
+          <!-- cam image -->
+          <p>cam image</p>
+          </div>
+
+          <div class="controls photo-controls">
+            <ul class="controls-list">
+              <li class="control control-do">
+                <a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
+              </li>
+              <li class="control control-redo">
+                <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
+              </li>
+              <li class="control control-approve">
+                <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+
+        <div class="photo-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>
+
+      <div class="wrapper-down">
+        <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 class="next" href="#next" aria-hidden="true" title="Next">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>
+
+
+
+
+    <div id="wrapper-idphoto" class="block-photo">
+      <h3 class="title">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 class="wrapper-up">
+
+        <div id="idcam" class="cam">
+
+          <div class="placeholder-cam">
+            <video autoplay></video>
+          <p>cam image</p>
+          </div>
+
+          <div class="controls photo-controls">
+            <ul class="controls-list">
+              <li class="control control-do">
+                <a class="action action-do" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
+              </li>
+              <li class="control control-redo">
+                <a class="action action-redo" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
+              </li>
+              <li class="control control-approve">
+                <a class="action action-approve" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
+              </li>
+            </ul>
+          </div>
+
+        </div>
+
+        <div class="photo-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>
+
+      <div class="wrapper-down">
+
+        <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 class="next" href="#next" aria-hidden="true" title="Next">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>
+
+
+
+    <div id="wrapper-review" class="block-photo">
+      <h3 class="title">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, <b>${user_full_name}</b>, matches your ID. We will also use this as the name on your certificate.</p>
+        <p><a href="#">Edit my name</a></p>
+      </div>
+
+      <div class="wrapper-up">
+        <div id="review-facephoto" class="review-photo">
+          <div class="placeholder-photo">
+           <video autoplay></video>
+          </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-idphoto" class="review-photo">
+          <div class="placeholder-photo">
+            <video autoplay></video>
+          </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>
+
+
+
+
+      <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">
+            <form method="post">
+              <!-- <a href="#">Go to Step 4: Secure Payment</a> -->
+
+              <input type="submit" value="Go to Step 4" name="payment">
+            </form>
+            <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>
+
+
+</div>
+
+
+
+<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="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
+    <i class="icon-remove-sign"></i>
+    <span class="label">close</span>
+  </a>
+</section>
+
+
+</%block>