diff --git a/amd/src/report-viewer-components.js b/amd/src/report-viewer-components.js
index 83538f8..4631f5b 100644
--- a/amd/src/report-viewer-components.js
+++ b/amd/src/report-viewer-components.js
@@ -1315,14 +1315,14 @@ export default {
             },
             template: `
             <b-card no-body :class="'r-item-competency '+ (value.course.amteacher?'r-course-am-teacher':'')">
-                <b-row no-gutters>
-                    <b-col md="1">
+                <div class='d-flex flex-wrap mr-0 ml-0'>
+                    <div>
                         <span 
                             :title="text['coursetiming_'+value.course.timing]" 
                             v-b-popover.hover.top="startdate+' - '+enddate" 
                             :class="'r-timing-indicator timing-'+value.course.timing"></span>
-                    </b-col>
-                    <b-col md="11">
+                    </div>
+                    <div class="flex-fill">
                         <b-card-body class="align-items-center">
                             <a  v-b-modal="'r-item-course-details-'+value.id" 
                                 :href="(!guestmode)?('/course/view.php?id='+value.course.id):'#'"
@@ -1331,7 +1331,7 @@ export default {
                             <r-completion-circle class="r-course-graded" :disabled="!isCompletable"
                                 v-model="progress_circle"></r-completion-circle>
                         </b-card-body>
-                    </b-col>
+                    </div>
                 </b-row>
                 <b-modal
                     v-if="true"
diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index e6c3136..3edc20c 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -2535,7 +2535,6 @@ export default {
             },
             template: `
             <div class="t-item-base" :id="'studyitem-'+value.id">
-                <t-item-competency  v-model="value"  v-if="value.type == 'competency'"   ></t-item-competency>
                 <t-item-course      v-model="value"  v-if="value.type == 'course'"
                     :plan='plan' ></t-item-course>
                 <t-item-junction    v-model="value"  v-if="value.type == 'junction'"     ></t-item-junction>
@@ -2624,39 +2623,6 @@ export default {
             `,
         });
 
-        Vue.component('t-item-competency', {
-            props: {
-                'value' :{
-                    type: Object,
-                    default: function(){ return null;},
-                },
-            },
-            data() {
-                return {
-                    dragLine: null,
-                };
-            },
-            methods: {
-            },
-            template: `
-            <b-card no-body class="t-item-competency">
-                <b-card-body>
-                <a :id="'t-item-competency-details-'+value.id" href="#" 
-                    ><i class="fa fa-chevron-down">{{ value.competency.shortname }}</i> </a>
-                </b-card-body>
-                <b-popover
-                    placement="bottom" 
-                    :target="'t-item-competency-details-'+value.id" 
-                    :title="value.competency.shortname+' - ' + value.competency.idnumber" 
-                    triggers="click">
-                    <ul class="t-item-module-children">
-                        <li v-for="g in value.competency.children">{{g.shortname}}</li>
-                    </ul>
-                </b-popover>        
-            </b-card>
-            `,
-        });
-
         Vue.component('t-item-course', {
             props: {
                 'value' :{
@@ -2767,14 +2733,14 @@ export default {
             },
             template: `
             <b-card no-body class="t-item-course">
-                <b-row no-gutters>
-                    <b-col md="1">
+                <div class='d-flex flex-wrap mr-0 ml-0'>
+                    <div>
                         <span 
                             :title="text['coursetiming_'+value.course.timing]" 
                             v-b-popover.hover.top="startdate+' - '+enddate" 
                             :class="'t-timing-indicator timing-'+value.course.timing"></span>
-                    </b-col>
-                    <b-col md="11">
+                    </div>
+                    <div class="flex-fill">
                         <b-card-body class="align-items-center">
                             <a  class="t-item-course-config"
                                 v-b-modal="'t-item-course-config-'+value.id" 
@@ -2785,8 +2751,8 @@ export default {
                                 :href="'/course/view.php?id='+value.course.id"
                                 @click.prevent.stop="">{{ value.course.displayname }}</a>
                         </b-card-body>
-                    </b-col>
-                </b-row>
+                    </div>
+                </div>
                 <b-modal
                     :id="'t-item-course-config-'+value.id" 
                     :title="value.course.displayname + ' - ' + value.course.fullname"