diff --git a/common/lib/capa/templates/textinput.html b/common/lib/capa/templates/textinput.html
index 9736199f02..0ba27c6938 100644
--- a/common/lib/capa/templates/textinput.html
+++ b/common/lib/capa/templates/textinput.html
@@ -1,22 +1,36 @@
 <section id="textinput_${id}" class="textinput">
+    % if state == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif state == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif state == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif state == 'incomplete':
+    <div class="incorrect" id="status_${id}">
+    % endif
+
   <input type="text" name="input_${id}" id="input_${id}" value="${value}"
    % if size:
    size="${size}"
    % endif
    />
 
-  <span id="answer_${id}"></span>
+      <p class="status">
+        % if state == 'unsubmitted':
+        unanswered
+        % elif state == 'correct':
+        correct
+        % elif state == 'incorrect':
+        incorrect
+        % elif state == 'incomplete':
+        incomplete
+        % endif
+      </p>
+
+  <p id="answer_${id}" class="answer"></p>
 
-  % if state == 'unsubmitted':
-  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
-  % elif state == 'correct':
-  <span class="correct" id="status_${id}"></span>
-  % elif state == 'incorrect':
-  <span class="incorrect" id="status_${id}"></span>
-  % elif state == 'incomplete':
-  <span class="incorrect" id="status_${id}"></span>
-  % endif
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
+</div>
 </section>
diff --git a/common/lib/capa/templates/textinput_dynamath.html b/common/lib/capa/templates/textinput_dynamath.html
index 41b9c5d172..2fc44c9d3e 100644
--- a/common/lib/capa/templates/textinput_dynamath.html
+++ b/common/lib/capa/templates/textinput_dynamath.html
@@ -2,34 +2,36 @@
 ### version of textline.html which does dynammic math
 ###
 <section class="text-input-dynamath">
-  <table style="display:inline; vertical-align:middle;">
-    <tr>
-      <td>
-        <input type="text" name="input_${id}" id="input_${id}" value="${value}" class="math" size="${size if size else ''}" />
-      </td>
-      <td>
-        <span id="answer_${id}"></span>
+    % if state == 'unsubmitted':
+    <div class="unanswered" id="status_${id}">
+    % elif state == 'correct':
+    <div class="correct" id="status_${id}">
+    % elif state == 'incorrect':
+    <div class="incorrect" id="status_${id}">
+    % elif state == 'incomplete':
+    <div class="incorrect" id="status_${id}">
+    % endif
 
+      <input type="text" name="input_${id}" id="input_${id}" value="${value}" class="math" size="${size if size else ''}" />
+
+      <p class="status">
         % if state == 'unsubmitted':
-        <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+        unanswered
         % elif state == 'correct':
-        <span class="correct" id="status_${id}"></span>
+        correct
         % elif state == 'incorrect':
-        <span class="incorrect" id="status_${id}"></span>
+        incorrect
         % elif state == 'incomplete':
-        <span class="incorrect" id="status_${id}"></span>
+        incomplete
         % endif
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <span id="display_${id}">`{::}`</span>
-      </td>
-      <td>
+      </p>
+
+      <p id="answer_${id}" class="answer"></p>
+
+      <div id="display_${id}" class="equation">`{::}`</div>
+
+    </div>
         <textarea style="display:none" id="input_${id}_dynamath" name="input_${id}_dynamath">  </textarea>
-      </td>
-    </tr>
-  </table>
   % if msg:
       <span class="message">${msg|n}</span>
   % endif
diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss
index c493202e33..ebae48bec6 100644
--- a/lms/static/sass/application.scss
+++ b/lms/static/sass/application.scss
@@ -7,7 +7,7 @@
 @import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
 
 // pages
-@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
+@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier", "courseware/problems";
 @import "textbook";
 @import "info";
 @import "profile";
diff --git a/lms/static/sass/courseware/_courseware.scss b/lms/static/sass/courseware/_courseware.scss
index c886177437..cc822c6d77 100644
--- a/lms/static/sass/courseware/_courseware.scss
+++ b/lms/static/sass/courseware/_courseware.scss
@@ -38,142 +38,6 @@ div.course-wrapper {
       }
     }
 
-    .problem-set {
-      position: relative;
-      @extend .clearfix;
-
-      h2 {
-        margin-top: 0;
-        margin-bottom: 15px;
-        width: flex-grid(2, 9);
-        padding-right: flex-gutter(9);
-        border-right: 1px dashed #ddd;
-        @include box-sizing(border-box);
-        display: table-cell;
-        vertical-align: top;
-
-        &.problem-header {
-          section.staff {
-            margin-top: 30px;
-            font-size: 80%;
-          }
-        }
-
-        @media screen and (max-width:1120px) {
-          display: block;
-          width: auto;
-          border-right: 0;
-        }
-
-        @media print {
-          display: block;
-          width: auto;
-          border-right: 0;
-        }
-      }
-
-      section.problem {
-        display: table-cell;
-        width: flex-grid(7, 9);
-        padding-left: flex-gutter(9);
-
-        @media screen and (max-width:1120px) {
-          display: block;
-          width: auto;
-          padding: 0;
-        }
-
-        @media print {
-          display: block;
-          width: auto;
-          padding: 0;
-
-          canvas, img {
-            page-break-inside: avoid;
-          }
-        }
-
-        span {
-          &.unanswered, &.ui-icon-bullet {
-            @include inline-block();
-            background: url('../images/unanswered-icon.png') center center no-repeat;
-            height: 14px;
-            position: relative;
-            top: 4px;
-            width: 14px;
-          }
-
-          &.correct, &.ui-icon-check {
-            @include inline-block();
-            background: url('../images/correct-icon.png') center center no-repeat;
-            height: 20px;
-            position: relative;
-            top: 6px;
-            width: 25px;
-          }
-
-          &.incorrect, &.ui-icon-close {
-            @include inline-block();
-            background: url('../images/incorrect-icon.png') center center no-repeat;
-            height: 20px;
-            width: 20px;
-            position: relative;
-            top: 6px;
-          }
-        }
-      }
-
-      div {
-        > span {
-          display: block;
-          margin-bottom: lh(.5);
-
-          &[answer] {
-            border-top: 1px solid #ededed;
-            border-bottom: 1px solid #ededed;
-            background: #f3f3f3;
-            margin: 0 (-(lh()));
-            padding: lh(.5) lh();
-          }
-        }
-      }
-
-      input[type="text"] {
-        display: inline-block;
-        width: 50%;
-      }
-
-      center {
-        display: block;
-        margin: lh() 0;
-        border: 1px solid #ccc;
-        padding: lh();
-      }
-
-      section.action {
-        margin-top: lh();
-
-        input[type="button"] {
-          padding: lh(.4) lh();
-          text-shadow: 0 -1px 0 #666;
-        }
-      }
-    }
-
-    section.problems-wrapper, div#seq_content {
-      @extend .problem-set;
-    }
-
-    section.problems-wrapper {
-      display: table;
-      width: 100%;
-
-      @media screen and (max-width:1120px) {
-        display: block;
-        width: auto;
-      }
-    }
-
     div#seq_content {
       h1 {
         background: none;
diff --git a/lms/static/sass/courseware/_problems.scss b/lms/static/sass/courseware/_problems.scss
new file mode 100644
index 0000000000..0b056ca549
--- /dev/null
+++ b/lms/static/sass/courseware/_problems.scss
@@ -0,0 +1,292 @@
+section.problem-set {
+  position: relative;
+  @extend .clearfix;
+
+  h2 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    width: flex-grid(2, 9);
+    padding-right: flex-gutter(9);
+    border-right: 1px dashed #ddd;
+    @include box-sizing(border-box);
+    display: table-cell;
+    vertical-align: top;
+
+    &.problem-header {
+      section.staff {
+        margin-top: 30px;
+        font-size: 80%;
+      }
+    }
+
+    @media screen and (max-width:1120px) {
+      display: block;
+      width: auto;
+      border-right: 0;
+    }
+
+    @media print {
+      display: block;
+      width: auto;
+      border-right: 0;
+    }
+  }
+
+  section.problem {
+    display: table-cell;
+    width: flex-grid(7, 9);
+    padding-left: flex-gutter(9);
+
+    @media screen and (max-width:1120px) {
+      display: block;
+      width: auto;
+      padding: 0;
+    }
+
+    @media print {
+      display: block;
+      width: auto;
+      padding: 0;
+
+      canvas, img {
+        page-break-inside: avoid;
+      }
+    }
+
+
+    div {
+      p.status {
+        text-indent: -9999px;
+        margin: -1px 0 0 10px;
+      }
+
+      &.unanswered {
+        p.status {
+          @include inline-block();
+          background: url('../images/unanswered-icon.png') center center no-repeat;
+          height: 14px;
+          width: 14px;
+        }
+      }
+
+      &.correct, &.ui-icon-check {
+        p.status {
+          @include inline-block();
+          background: url('../images/correct-icon.png') center center no-repeat;
+          height: 20px;
+          width: 25px;
+        }
+
+        input {
+          border-color: green;
+        }
+      }
+
+      &.incorrect, &.ui-icon-close {
+        p.status {
+          @include inline-block();
+          background: url('../images/incorrect-icon.png') center center no-repeat;
+          height: 20px;
+          width: 20px;
+          text-indent: -9999px;
+        }
+
+        input {
+          border-color: red;
+        }
+      }
+
+      > span {
+        display: block;
+        margin-bottom: lh(.5);
+      }
+
+      p.answer {
+        @include inline-block();
+        margin-bottom: 0;
+        margin-left: 10px;
+
+        &:before {
+          content: "Answer: ";
+          font-weight: bold;
+          display: inline;
+
+        }
+        &:empty {
+          &:before {
+            display: none;
+          }
+        }
+      }
+
+      div.equation {
+        clear: both;
+        padding: 6px;
+        background: #eee;
+
+        span {
+          margin-bottom: 0;
+        }
+      }
+
+      span {
+        &.unanswered, &.ui-icon-bullet {
+          @include inline-block();
+          background: url('../images/unanswered-icon.png') center center no-repeat;
+          height: 14px;
+          position: relative;
+          top: 4px;
+          width: 14px;
+        }
+
+        &.correct, &.ui-icon-check {
+          @include inline-block();
+          background: url('../images/correct-icon.png') center center no-repeat;
+          height: 20px;
+          position: relative;
+          top: 6px;
+          width: 25px;
+        }
+
+        &.incorrect, &.ui-icon-close {
+          @include inline-block();
+          background: url('../images/incorrect-icon.png') center center no-repeat;
+          height: 20px;
+          width: 20px;
+          position: relative;
+          top: 6px;
+        }
+      }
+    }
+
+    ul {
+      list-style: disc outside none;
+      margin-bottom: lh();
+      margin-left: .75em;
+      margin-left: .75rem;
+    }
+
+    ol {
+      list-style: decimal outside none;
+      margin-bottom: lh();
+      margin-left: .75em;
+      margin-left: .75rem;
+    }
+
+    dl {
+      line-height: 1.4em;
+    }
+
+    dl dt {
+      font-weight: bold;
+    }
+
+    dl dd {
+      margin-bottom: 0;
+    }
+
+    dd {
+      margin-left: .5em;
+      margin-left: .5rem;
+    }
+
+    li {
+      line-height: 1.4em;
+      margin-bottom: lh(.5);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    p {
+      margin-bottom: lh();
+    }
+
+    table {
+      margin-bottom: lh();
+      width: 100%;
+      border: 1px solid #ddd;
+      border-collapse: collapse;
+
+      th {
+        border-bottom: 2px solid #ccc;
+        font-weight: bold;
+        text-align: left;
+      }
+
+      td {
+        border: 1px solid #ddd;
+      }
+
+      caption, th, td {
+        padding: .25em .75em .25em 0;
+        padding: .25rem .75rem .25rem 0;
+      }
+
+      caption {
+        background: #f1f1f1;
+        margin-bottom: .75em;
+        margin-bottom: .75rem;
+        padding: .75em 0;
+        padding: .75rem 0;
+      }
+
+      tr, td, th {
+        vertical-align: middle;
+      }
+
+    }
+
+    hr {
+      background: #ddd;
+      border: none;
+      clear: both;
+      color: #ddd;
+      float: none;
+      height: 1px;
+      margin: 0 0 .75rem;
+      width: 100%;
+    }
+
+    .hidden {
+      display: none;
+      visibility: hidden;
+    }
+
+    input[type="text"] {
+      display: inline-block;
+      width: 50%;
+    }
+
+    center {
+      display: block;
+      margin: lh() 0;
+      border: 1px solid #ccc;
+      padding: lh();
+    }
+  }
+
+  section.action {
+    margin-top: lh(.5);
+
+    input[type="button"] {
+      padding: lh(.4) lh();
+      text-shadow: 0 -1px 0 #666;
+    }
+  }
+}
+
+section.problems-wrapper, div#seq_content {
+  @extend .problem-set;
+}
+
+section.problems-wrapper {
+  display: table;
+  width: 100%;
+
+  @media screen and (max-width:1120px) {
+    display: block;
+    width: auto;
+  }
+}