diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index a40391a06a..2c92ef02de 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -32,7 +32,7 @@ iframe[seamless]{
 div.problem-progress {
   display: inline-block;
   padding-left: 5px;
-  color: #999;
+  color: #666;
   font-weight: 100;
   font-size: em(16);
 }
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index b40c6d71f4..8f3b5e2ced 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -105,7 +105,7 @@ class @DiscussionUtil
       alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
       alertDiv.html(
         "<div class='inner-wrapper discussion-alert-wrapper'>" +
-        "  <button class='close-modal dismiss' aria-hidden='true'>&#10005;</button>" +
+        "  <button class='close-modal dismiss' aria-hidden='true'><i class='icon-remove'></i></button>" +
         "  <header><h2/><hr/></header>" +
         "  <p id='discussion-alert-message'/>" +
         "  <hr/>" +
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index cdf98d902d..32d4bd1873 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -285,10 +285,11 @@
 
 <section id="email-settings-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="email-settings-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -297,7 +298,7 @@
         ${_('Email Settings for {course_number}').format(course_number='<span id="email_settings_course_number"></span>')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -317,10 +318,11 @@
 
 <section id="password_reset_complete" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -329,7 +331,7 @@
         ${_('Password Reset Email Sent')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -346,10 +348,11 @@
 
 <section id="change_email" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_email_title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -358,7 +361,7 @@
         <span id="change_email_title">${_("Change Email")}</span>
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -389,10 +392,11 @@
 
 <section id="apply_name_change" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change-name-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -401,7 +405,7 @@
         ${_("Change your name")}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
@@ -431,10 +435,11 @@
 
 <section id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
   <div class="inner-wrapper" role="alertdialog" aria-labelledy="unenrollment-modal-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -443,7 +448,7 @@
         ${_('<span id="track-info"></span> {course_number}?  <span id="refund-info"></span>').format(course_number='<span id="unenroll_course_number"></span>')}
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index 5aaa38585e..1f48d8fe2d 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -2,12 +2,13 @@
 <%! from microsite_configuration import microsite %>
 
 <%! from django.core.urlresolvers import reverse %>
-<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
+<section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
   <div class="inner-wrapper">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i> 
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -43,26 +44,27 @@
 
 <script type="text/javascript">
   (function() {
-   $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
-     if(json.success) {
-       $("#password-reset").html(json.value);
-     } else {
-       if($('#pwd_error').length == 0) {
-         $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
-       }
-       $('#pwd_error').stop().css("display", "block");
-     }
-   });
+    $(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
+      if(json.success) {
+        $("#password-reset").html(json.value);
+      } else {
+        if($('#pwd_error').length == 0) {
+          $('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
+        }
+        $('#pwd_error').stop().css("display", "block");
+      }
+    });
 
-   // removing close link's default behavior
-   $('#login-modal .close-modal').click(function(e) {
-    e.preventDefault();
-   });
+    // removing close link's default behavior
+    $('#login-modal .close-modal').click(function(e) {
+     e.preventDefault();
+    });
 
-   var onModalClose = function() {
-        $("#forgot-password-modal").attr("aria-hidden", "true");
-        $("#forgot-password-link").focus();
+    var onModalClose = function() {
+      $("#forgot-password-modal").attr("aria-hidden", "true");
+      $("#forgot-password-link").focus();
     };
+    
     var cycle_modal_tab = function(from_element_name, to_element_name) {
       $(from_element_name).on('keydown', function(e) {
           var keyCode = e.keyCode || e.which;
@@ -74,10 +76,9 @@
       });
     };
     $("#forgot-password-modal .close-modal").click(onModalClose);
-    $("#forgot-password-modal").focus()
-    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email")
-    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button")
-    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal")
+    cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email");
+    cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button");
+    cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal");
 
     // Hitting the ESC key will exit the modal
     $("#forgot-password-modal").on("keydown", function(e) {
diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 8650e75a12..835797656f 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -18,10 +18,10 @@
   <div class="inner-wrapper" id="help_wrapper">
     ## TODO: find a way to refactor this
     <button class="close-modal "tabindex="0">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -69,10 +69,10 @@ discussion_link = get_discussion_link(course) if course else None
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
     <button class="close-modal">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -103,10 +103,10 @@ discussion_link = get_discussion_link(course) if course else None
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
     <button class="close-modal" tabindex="0">
-      &#10005;
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
diff --git a/lms/templates/login.html b/lms/templates/login.html
index 51c9f7f4ac..ec5da5ad50 100644
--- a/lms/templates/login.html
+++ b/lms/templates/login.html
@@ -24,8 +24,8 @@
       // new window/tab opening
       $('a[rel="external"], a[class="new-vp"]')
       .click( function() {
-      window.open( $(this).attr('href') );
-      return false;
+        window.open( $(this).attr('href') );
+        return false;
       });
 
       // form field label styling on focus
@@ -71,8 +71,9 @@
         }
       });
       $("#forgot-password-link").click(function() {
-        $("#forgot-password-modal .close-modal").focus()
-      })
+        $("#forgot-password-modal").show();
+        $("#forgot-password-modal .close-modal").focus();
+      });
 
     })(this);
 
@@ -137,7 +138,7 @@
             <label for="password">${_('Password')}</label>
             <input id="password" type="password" name="password" value="" required aria-required="true" />
             <span class="tip tip-input">
-              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" tabindex="-1" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
+              <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
             </span>
           </li>
         </ol>
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 9cacaff51c..6b2fd80c1f 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -5,10 +5,11 @@
 
 <section id="login-modal" class="modal login-modal">
   <div class="inner-wrapper">
-      <button class="close-modal">&#10005;
+      <button class="close-modal">
+        <i class="icon-remove"></i>
         <span class="sr">
           ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-          ${_('Close Modal')}
+          ${_('Close')}
       </span>
     </button>
 
diff --git a/lms/templates/modal/_modal-settings-language.html b/lms/templates/modal/_modal-settings-language.html
index 5c0be2e11c..b7fd01f38e 100644
--- a/lms/templates/modal/_modal-settings-language.html
+++ b/lms/templates/modal/_modal-settings-language.html
@@ -7,10 +7,11 @@
 
 <section id="change_language" class="modal modal-settings-language" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="change_language_title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
@@ -19,7 +20,7 @@
         <span id="change_language_title">${_("Change Preferred Language")}</span>
         <span class="sr">,
           ## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
-          ${_("modal open")}
+          ${_("window open")}
         </span>
       </h2>
       <hr/>
diff --git a/lms/templates/modal/accessible_confirm.html b/lms/templates/modal/accessible_confirm.html
index c73e66a16d..7de70a17ee 100644
--- a/lms/templates/modal/accessible_confirm.html
+++ b/lms/templates/modal/accessible_confirm.html
@@ -1,7 +1,8 @@
 <%! from django.utils.translation import ugettext as _ %>
 <div id="accessibile-confirm-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="accessibile-confirm-title">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
         ${_('Close Modal')}
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index 85c2732571..e5eb102eba 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -10,10 +10,11 @@
 
 <section id="signup-modal" class="modal signup-modal">
   <div class="inner-wrapper">
-    <button class="close-modal">&#10005;
+    <button class="close-modal">
+      <i class="icon-remove"></i>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
-        ${_('Close Modal')}
+        ${_('Close')}
       </span>
     </button>
 
diff --git a/lms/templates/wiki/edit.html b/lms/templates/wiki/edit.html
index 1f27157620..7cc21d6bbb 100644
--- a/lms/templates/wiki/edit.html
+++ b/lms/templates/wiki/edit.html
@@ -45,10 +45,10 @@
   </div>
   <section id="previewModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
 
diff --git a/lms/templates/wiki/history.html b/lms/templates/wiki/history.html
index 78f595a112..72f74fb15b 100644
--- a/lms/templates/wiki/history.html
+++ b/lms/templates/wiki/history.html
@@ -201,10 +201,10 @@
   <input type="hidden" name="r" value="" />
   <section id="previewRevisionModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
       <div class="modal-body">
@@ -232,10 +232,10 @@
 
   <section id="mergeModal" class="modal" aria-hidden="true">
     <div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
-      <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+      <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
       <header>
-        <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+        <h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "window open" %}</span></h2>
         <hr/>
       </header>
       <div class="modal-header">
diff --git a/lms/templates/wiki/includes/cheatsheet.html b/lms/templates/wiki/includes/cheatsheet.html
index 6ab8b60532..1e4916b936 100644
--- a/lms/templates/wiki/includes/cheatsheet.html
+++ b/lms/templates/wiki/includes/cheatsheet.html
@@ -1,10 +1,10 @@
 {% load i18n %}
 <section id="cheatsheetModal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
-    <button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
+    <button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
 
     <header>
-      <h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "modal open" %}</span></h2>
+      <h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "window open" %}</span></h2>
       <hr/>
     </header>
     <div id="cheatsheet-body" class="modal-body">