diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/_checklists.scss
index ca5424967e..7a55e07101 100644
--- a/cms/static/sass/_checklists.scss
+++ b/cms/static/sass/_checklists.scss
@@ -21,6 +21,32 @@ body.course.checklists {
       margin-bottom: 0;
     }
 
+    // visual status
+    .viz-checklist-status {
+      @include text-hide();
+      @include size(100%,($baseline/4));
+      position: relative;
+      display: block;
+      margin: 0;
+      background: $gray-l4;
+
+      .viz-checklist-status-value {
+        @include transition(width 2s ease-in-out .25s);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 50%;
+        height: ($baseline/4);
+        background: $green;
+
+        .int {
+          @include text-sr();
+        }
+      }
+    }
+    // <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
+    // header/title
     header {
       @include clearfix();
       @include box-shadow(inset 0 -1px 1px $shadow-l1);
@@ -127,6 +153,13 @@ body.course.checklists {
     // state - completed
     &.is-completed {
       
+      .viz-checklist-status {
+
+        .viz-checklist-status-value {
+          width: 100%;
+        }
+      }
+
       header {
 
         .checklist-title, .icon-confirm {
@@ -273,10 +306,20 @@ body.course.checklists {
           color: $gray-l2;
         }
 
+        .task-actions {
+
+          .action-primary {
+            @include grey-button;
+            @include font-size(12);
+            font-weight: 600;
+            text-align: center;
+          }
+        }
+
         &:hover {
-          background: $blue-l5;
-          border-bottom-color: $blue-l4;
-          border-top-color: $blue-l4;
+          background: $gray-l5;
+          border-bottom-color: $gray-l4;
+          border-top-color: $gray-l4;
 
           .task-details {
             opacity:1.0;
diff --git a/cms/templates/ux-checklists.html b/cms/templates/ux-checklists.html
index 3f7a947111..833bbe000f 100644
--- a/cms/templates/ux-checklists.html
+++ b/cms/templates/ux-checklists.html
@@ -14,11 +14,17 @@
 
 <div class="wrapper-content wrapper">
   <section class="content">
+    <div class="introduction">
+      <p class="copy">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.<a href="" class="demo-checklistviz">Test Checklist Progress Visualization</a></p>
+    </div>
+
     <article class="content-primary" role="main">
       <form id="course-checklists" class="course-checklists" method="post" action="">
         <h2 class="title title-3 sr">Current Checklists</h2>
 
         <section class="course-checklist" id="course-checklist1">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Getting Started with Studio</h3>
             <span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
@@ -100,6 +106,8 @@
         </section>
 
         <section class="course-checklist" id="course-checklist2">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft a Rough Course Outline</h3>
             <span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">7</span></span>
@@ -238,6 +246,8 @@
         </section>
 
         <section class="course-checklist" id="course-checklist3">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Explore edX's Support Tools</h3>
             <span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
@@ -319,9 +329,10 @@
         </section>
 
         <section class="course-checklist" id="course-checklist4">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Draft your Course Introduction</h3>
-            <span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
           </header>
 
           <ul class="list list-tasks">
@@ -330,7 +341,7 @@
                 <input type="checkbox" class="task-input" name="course-checklist4-task1" id="course-checklist4-task1" value="course-checklist4-task1 complete">
 
                 <div class="task-details">
-                  <h4 class="task-name title title-3">Drafting a Course Description/h4>
+                  <h4 class="task-name title title-3">Drafting a Course Description</h4>
                   <p class="task-description">Courses on edX each have their own introduction page, including a course video, description, and more. Draft the introduction students will read before deciding to enroll in your course.</p>                  
                 </div>
               </label>
@@ -342,7 +353,7 @@
               </ul>
             </li>
 
-            <li class="task is-completed">
+            <li class="task">
               <label for="course-checklist4-task2">
                 <input type="checkbox" class="task-input" name="course-checklist4-task2" id="course-checklist4-task2" value="course-checklist4-task2 complete">
 
@@ -410,6 +421,8 @@
         <h2 class="title title-3 sr">Completed Checklists</h2>
 
         <section class="course-checklist is-completed" id="course-checklist5">
+          <span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
+
           <header>
             <h3 class="checklist-title title-2"><i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i> Completed Checklist Example</h3>
             <span class="checklist-status status">Tasks Completed: <span class="status-count">3</span>/<span class="status-amount">3</span></span>
@@ -558,6 +571,12 @@
       $(this).bind('click', toggleTask);
     });
 
+    // demo/proof of concept for visual progress
+    $('.demo-checklistviz').click(function(e){
+      (e).preventDefault();
+      $('#course-checklist1 .viz-checklist-status .viz-checklist-status-value').css('width','25%');
+    });
+
     function toggleChecklist(e) {
       (e).preventDefault();
       $(this).closest('.course-checklist').toggleClass('is-collapsed');