diff --git a/cms/static/img/explanation-example.png b/cms/static/img/explanation-example.png
index 2dbc2b3b96..94db245515 100644
Binary files a/cms/static/img/explanation-example.png and b/cms/static/img/explanation-example.png differ
diff --git a/cms/templates/widgets/problem-edit.html b/cms/templates/widgets/problem-edit.html
index d17bc21d3c..1026981fba 100644
--- a/cms/templates/widgets/problem-edit.html
+++ b/cms/templates/widgets/problem-edit.html
@@ -35,7 +35,7 @@
         <div class="cheatsheet-wrapper">
             <div class="row">
                 <h6>Header</h6>
-                <div class="col sample">
+                <div class="col sample header">
                     <img src="/static/img/header-example.png" />
                 </div>
                 <div class="col">
@@ -46,7 +46,7 @@
             </div>
             <div class="row">
                 <h6>Multiple Choice</h6>
-                <div class="col sample">
+                <div class="col sample multiple-choice">
                     <img src="/static/img/choice-example.png" />
                 </div>
                 <div class="col">
@@ -57,7 +57,7 @@
             </div>
             <div class="row">
                 <h6>Check Multiple</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/multi-example.png" />
                 </div>
                 <div class="col">
@@ -68,7 +68,7 @@
             </div>
             <div class="row">
                 <h6>String Response</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/string-example.png" />
                 </div>
                 <div class="col">
@@ -77,7 +77,7 @@
             </div>
             <div class="row">
                 <h6>Numerical Response</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/number-example.png" />
                 </div>
                 <div class="col">
@@ -86,7 +86,7 @@
             </div>
             <div class="row">
                 <h6>Option Response</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/select-example.png" />
                 </div>
                 <div class="col">
@@ -95,14 +95,11 @@
             </div>
             <div class="row">
                 <h6>Explanation</h6>
-                <div class="col sample">
+                <div class="col sample explanation">
                     <img src="/static/img/explanation-example.png" />
                 </div>
                 <div class="col">
-<pre><code>[explanation]
-A short explanation of the answer.
-[explanation]
-</code></pre>
+                    <pre><code>[explanation] A short explanation of the answer. [explanation]</code></pre>
                 </div>
             </div>
         </div>
diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss
index 659f5becf9..9f80cce5ad 100644
--- a/common/lib/xmodule/xmodule/css/problem/edit.scss
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -71,13 +71,15 @@
   left: 100%;
   width: 0;
   border-radius: 0 3px 3px 0;
-  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 15px);
+  @include linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 4px);
   background-color: #fff;
   overflow: hidden;
   @include transition(width .3s);
 
   &.shown {
     width: 300px;
+    height: 100%;
+    overflow-y: scroll;
   }
 
   .cheatsheet-wrapper {