diff --git a/completion/classes/manager.php b/completion/classes/manager.php
index d6bcada047f..236ac8fb0fe 100644
--- a/completion/classes/manager.php
+++ b/completion/classes/manager.php
@@ -135,7 +135,7 @@ class manager {
 
             case COMPLETION_TRACKING_MANUAL:
                 $strings['string'] = get_string('manual');
-                $strings['icon'] = $OUTPUT->pix_url('i/completion-manual-enabled')->out();
+                $strings['icon'] = $OUTPUT->pix_icon('i/completion-manual-y', get_string('completion_manual', 'completion'));
                 break;
 
             case COMPLETION_TRACKING_AUTOMATIC:
@@ -148,7 +148,7 @@ class manager {
                     }
                 }
 
-                $strings['icon'] = $OUTPUT->pix_url('i/completion-auto-enabled')->out();
+                $strings['icon'] = $OUTPUT->pix_icon('i/completion-auto-y', get_string('completion_automatic', 'completion'));
                 break;
 
             default:
@@ -213,7 +213,7 @@ class manager {
         $canmanage = has_capability('moodle/course:manageactivities', $coursecontext);
         $course = get_course($this->courseid);
         foreach ($data->modules as $module) {
-            $module->icon = $OUTPUT->pix_url('icon', $module->name)->out();
+            $module->icon = $OUTPUT->image_url('icon', $module->name)->out();
             $module->formattedname = format_string(get_string('modulenameplural', 'mod_' . $module->name),
                 true, ['context' => $coursecontext]);
             $module->canmanage = $canmanage && \course_allowed_module($course, $module->name);
diff --git a/course/templates/activityinstance.mustache b/course/templates/activityinstance.mustache
index fab2fe96798..552641709d6 100644
--- a/course/templates/activityinstance.mustache
+++ b/course/templates/activityinstance.mustache
@@ -33,7 +33,7 @@
     }
 }}
 {{#activities}}
-<div class="row m-b-1">
+<div class="row m-b-1 row-fluid">
     <div class="activityinstance col-sm-6 span6">
         <div class="mod-indent-outer"></div>
         <div>
@@ -47,16 +47,16 @@
                 </a>
         </div>
     </div>
-    <div class="activity-completionstatus col-sm-6" id="completionstatus_{{cmid}}">
-        <div class="col-sm-1">
+    <div class="activity-completionstatus col-sm-6 span6" id="completionstatus_{{cmid}}">
+        <div class="col-sm-1 span1  p-l-0">
             {{#completionstatus.icon}}
-                <img src="{{completionstatus.icon}}" class="m-r-2" alt=" " role="presentation">
+                {{{completionstatus.icon}}}
             {{/completionstatus.icon}}
             {{^completionstatus.icon}}
                 <span class="m-r-3"></span>
             {{/completionstatus.icon}}
         </div>
-        <div class="col-sm-11">
+        <div class="col-sm-11 span11  p-l-0">
             <span class="text-muted muted">{{{completionstatus.string}}}</span>
         </div>
     </div>
diff --git a/course/templates/defaultactivitycompletion.mustache b/course/templates/defaultactivitycompletion.mustache
index 2c1346beccb..88a94635fd6 100644
--- a/course/templates/defaultactivitycompletion.mustache
+++ b/course/templates/defaultactivitycompletion.mustache
@@ -60,23 +60,23 @@
         {{#modules}}
             {{#canmanage}}
              <div class="module-section m-b-1">
-                <div class="row m-b-1">
-                    <div class="col-sm-6">
+                <div class="row m-b-1 row-fluid">
+                    <div class="col-sm-6 span6">
                         <label class="accesshide" for="modtype_{{id}}">Select {{formattedname}}</label>
                         <input id="modtype_{{id}}" type="checkbox" class="m-r-1" name="modids[]" value="{{id}}" aria-label="{{#str}}checkactivity, completion, {{formattedname}}{{/str}}">
                         <img src="{{icon}}" alt=" " role="presentation" />
                         <span>{{formattedname}}</span>
                     </div>
-                    <div class="activity-completionstatus col-sm-6">
-                        <div class="col-sm-1">
+                    <div class="activity-completionstatus col-sm-6 span6">
+                        <div class="col-sm-1 span1 p-l-0">
                             {{#completionstatus.icon}}
-                                <img src="{{completionstatus.icon}}" class="m-r-2" alt=" " role="presentation">
+                                {{{completionstatus.icon}}}
                             {{/completionstatus.icon}}
                             {{^completionstatus.icon}}
                                 <span class="m-r-3"></span>
                             {{/completionstatus.icon}}
                         </div>
-                        <div class="col-sm-11">
+                        <div class="col-sm-11 span11 p-l-0">
                             <span class="text-muted muted">{{{completionstatus.string}}}</span>
                         </div>
                     </div>