diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 8fd94e3b..af72efc0 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -1694,6 +1694,10 @@ $pedagogy-white-text: #f0f0f0;
       margin-top: 0px;
     }
 
+    &.grade-without-star {
+      display: none
+    }
+
     @media screen and (max-width: $large-devices){
       &.star-not-checked {
         margin-left: 5px;
@@ -1705,6 +1709,15 @@ $pedagogy-white-text: #f0f0f0;
       }
     }
 
+    @media screen and (max-width: $small-devices){
+      &.grade-without-star {
+        display: block;
+      }
+      &.grade-with-star {
+        display: none;
+      }
+    }
+
   #dynamic_view {
     font-size: 1.1em;
 
diff --git a/pedagogy/templates/pedagogy/macros.jinja b/pedagogy/templates/pedagogy/macros.jinja
index 20cb23c3..ea1874e8 100644
--- a/pedagogy/templates/pedagogy/macros.jinja
+++ b/pedagogy/templates/pedagogy/macros.jinja
@@ -3,11 +3,12 @@
     {% if grade >= 0 %}
         {% for i in range(5) %}
             {% if i <= grade %}
-                <span class="fa fa-star pedagogy star-checked"></span>
+                <span class="fa fa-star pedagogy star-checked grade-with-star"></span>
             {% else %}
-                <span class="fa fa-star pedagogy star-not-checked"></span>
+                <span class="fa fa-star pedagogy star-not-checked grade-with-star"></span>
             {% endif %}
         {% endfor %}
+        <span class="pedagogy grade-without-star">{{ grade }}/5</span>
     {% else %}
         <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
     {% endif %}