diff --git a/docs/customization/cbl/.pages b/docs/customization/cbl/.pages
new file mode 100644
index 000000000..135f14916
--- /dev/null
+++ b/docs/customization/cbl/.pages
@@ -0,0 +1 @@
+title: CBL
diff --git a/docs/customization/cbl/ratings.md b/docs/customization/cbl/ratings.md
new file mode 100644
index 000000000..938b4f765
--- /dev/null
+++ b/docs/customization/cbl/ratings.md
@@ -0,0 +1,33 @@
+# Ratings
+
+## Options
+
+### `minRating`
+
+- Default: `5`
+- The lowest rating presented on the primary scale
+
+### `maxRating`
+
+- Default: `12`
+- The highest rating presented on the primary scale
+
+### `menuRatings`
+
+- Default: `[4, 3, 2, 1]`
+- The ratings available on the secondary scale available under the menu button
+
+### `enableMissing`
+
+- Default: `true`
+- Whether the `M` value is available on the primary scale
+
+### `enableDidNotMeet`
+
+- Default: `true`
+- Whether the `DNM` value is available on the primary scale
+
+### `enableCheckmark`
+
+- Default: `true`
+- Whether the checkmark value is available on the primary scale
diff --git a/php-classes/Slate/CBL/Demonstrations/DidNotMeetDemonstrationSkill.php b/php-classes/Slate/CBL/Demonstrations/DidNotMeetDemonstrationSkill.php
new file mode 100644
index 000000000..f9c985408
--- /dev/null
+++ b/php-classes/Slate/CBL/Demonstrations/DidNotMeetDemonstrationSkill.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace Slate\CBL\Demonstrations;
+
+
+class DidNotMeetDemonstrationSkill extends DemonstrationSkill
+{
+
+}
\ No newline at end of file
diff --git a/php-classes/Slate/CBL/Demonstrations/MissingDemonstrationSkill.php b/php-classes/Slate/CBL/Demonstrations/MissingDemonstrationSkill.php
new file mode 100644
index 000000000..e2974f63a
--- /dev/null
+++ b/php-classes/Slate/CBL/Demonstrations/MissingDemonstrationSkill.php
@@ -0,0 +1,9 @@
+<?php
+
+namespace Slate\CBL\Demonstrations;
+
+
+class MissingDemonstrationSkill extends DemonstrationSkill
+{
+
+}
\ No newline at end of file
diff --git a/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-dnm.php b/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-dnm.php
new file mode 100644
index 000000000..35c032a9d
--- /dev/null
+++ b/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-dnm.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Slate\CBL\Demonstrations;
+
+
+$tableName = DemonstrationSkill::$tableName;
+$historyTableName = DemonstrationSkill::getHistoryTableName();
+
+// skip if table doesn't exist
+if (!static::tableExists($tableName)) {
+    printf("Skipping migration because table `%s` does not yet exist\n", $tableName);
+    return static::STATUS_SKIPPED;
+}
+
+// skip if Class column already contains DidNotMeet subclass
+if (static::hasColumnEnumValue($tableName, 'Class', DidNotMeetDemonstrationSkill::class)) {
+    printf("Skipping migration because column `%s`.`Class` already has value '%s'\n", $tableName, DidNotMeetDemonstrationSkill::class);
+    return static::STATUS_SKIPPED;
+}
+
+// add new Class value
+static::addColumnEnumValue($tableName, 'Class', DidNotMeetDemonstrationSkill::class);
+static::addColumnEnumValue($historyTableName, 'Class', DidNotMeetDemonstrationSkill::class);
diff --git a/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-missing.php b/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-missing.php
new file mode 100644
index 000000000..a68cb7d68
--- /dev/null
+++ b/php-migrations/Slate/CBL/Demonstrations/20210328_demoskill-subclass-missing.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Slate\CBL\Demonstrations;
+
+use DB;
+
+
+$tableName = DemonstrationSkill::$tableName;
+$historyTableName = DemonstrationSkill::getHistoryTableName();
+
+// skip if table doesn't exist
+if (!static::tableExists($tableName)) {
+    printf("Skipping migration because table `%s` does not yet exist\n", $tableName);
+    return static::STATUS_SKIPPED;
+}
+
+// skip if Class column already contains Missing subclass
+if (static::hasColumnEnumValue($tableName, 'Class', MissingDemonstrationSkill::class)) {
+    printf("Skipping migration because column `%s`.`Class` already has value '%s'\n", $tableName, MissingDemonstrationSkill::class);
+    return static::STATUS_SKIPPED;
+}
+
+// add new Class value
+static::addColumnEnumValue($tableName, 'Class', MissingDemonstrationSkill::class);
+static::addColumnEnumValue($historyTableName, 'Class', MissingDemonstrationSkill::class);
+
+// migrate legacy missing demonstrations
+DB::nonQuery(
+    'UPDATE `%s` SET Class = "%s", DemonstratedLevel = NULL WHERE Class = "%s" AND DemonstratedLevel = 0',
+    [
+        $tableName,
+        DB::escape(MissingDemonstrationSkill::class),
+        DB::escape(DemonstrationSkill::class)
+    ]
+);
+printf(
+    "Updated %u DemonstrationSkill records with Rating = 0 to MissingDemonstrationSkill class\n",
+    DB::affectedRows()
+);
diff --git a/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js b/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js
index 06f8d3c76..f4b999089 100644
--- a/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js
+++ b/sencha-workspace/SlateDemonstrationsTeacher/app/controller/Demonstrations.js
@@ -86,7 +86,7 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
             modal: true,
             layout: 'fit',
             minWidth: 300,
-            width: 600,
+            width: 960,
             minHeight: 600,
 
             mainView: {
@@ -316,7 +316,7 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
 
 
         // fetch demonstration and show window
-        if (!demonstration || (typeof demonstration == 'object' && !demonstration.isModel)) {
+        if (!demonstration || typeof demonstration == 'object' && !demonstration.isModel) {
             demonstration = DemonstrationModel.create(Ext.apply({
                 Class: 'Slate\\CBL\\Demonstrations\\ExperienceDemonstration',
                 Demonstrated: new Date()
@@ -350,4 +350,4 @@ Ext.define('SlateDemonstrationsTeacher.controller.Demonstrations', {
             Ext.Logger.error('Invalid demonstration option');
         }
     }
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/SlateTasksTeacher/app/controller/StudentTasks.js b/sencha-workspace/SlateTasksTeacher/app/controller/StudentTasks.js
index 8acd4f4ee..a95edd729 100644
--- a/sencha-workspace/SlateTasksTeacher/app/controller/StudentTasks.js
+++ b/sencha-workspace/SlateTasksTeacher/app/controller/StudentTasks.js
@@ -71,7 +71,7 @@ Ext.define('SlateTasksTeacher.controller.StudentTasks', {
             modal: true,
             layout: 'fit',
             minWidth: 300,
-            width: 600,
+            width: 960,
             minHeight: 200,
 
             mainView: {
@@ -318,4 +318,4 @@ Ext.define('SlateTasksTeacher.controller.StudentTasks', {
             }
         });
     }
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/AbstractSkillsField.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/AbstractSkillsField.js
index 7ecdff7f8..f36101b44 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/AbstractSkillsField.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/AbstractSkillsField.js
@@ -40,6 +40,7 @@ Ext.define('Slate.cbl.field.ratings.AbstractSkillsField', {
 
         return {
             ID: demonstrationSkill.ID || null,
+            Class: demonstrationSkill.Class || 'Slate\\CBL\\Demonstrations\\DemonstrationSkill',
             SkillID: demonstrationSkill.SkillID,
             TargetLevel: demonstrationSkill.TargetLevel || null,
             DemonstratedLevel: demonstrationSkill.DemonstratedLevel,
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js
new file mode 100644
index 000000000..9580ad293
--- /dev/null
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.js
@@ -0,0 +1,329 @@
+Ext.define('Slate.cbl.field.ratings.Rater', {
+    extend: 'Slate.ui.form.ContainerField',
+    xtype: 'slate-cbl-ratings-rater',
+    requires: [
+        'Ext.button.Button',
+        'Ext.button.Segmented',
+        'Ext.form.Label',
+        'Ext.util.Format',
+
+        /* global Slate */
+        'Slate.cbl.model.Skill',
+        'Slate.cbl.util.Config',
+    ],
+
+
+    isRatingField: true,
+
+
+    statics: {
+        menuGlyph: 'xf0c9', // fa-bars
+    },
+
+
+    config: {
+        // configuration:
+        minRating: 5,
+        maxRating: 12,
+        menuRatings: [4, 3, 2, 1],
+
+        enableMissing: true,
+        enableDidNotMeet: true,
+        enableCheckmark: true,
+
+        // state:
+        skill: null,
+        level: null,
+
+        // subcomponents:
+        label: false,
+    },
+
+
+    componentCls: 'slate-cbl-ratings-rater',
+    items: [{
+        xtype: 'container',
+        layout: 'hbox',
+        margin: '4 0',
+        items: [{
+            xtype: 'button',
+            scale: 'large',
+            text: 'Clear',
+            cls: 'slate-cbl-ratings-rater-clear-btn',
+            style: {
+                borderRadius: '99px',
+            },
+        }, {
+            flex: 1,
+
+            xtype: 'segmentedbutton',
+            margin: '0 0 0 16',
+            defaults: {
+                scale: 'large',
+            }
+        }],
+    }],
+
+
+    // config handlers
+    updateLevel: function(level, oldLevel) {
+        var me = this;
+
+        if (oldLevel) {
+            me.removeCls('cbl-level-'+oldLevel);
+        }
+
+        if (level) {
+            me.addCls('cbl-level-'+level);
+        }
+
+        me.setDisabled(!level);
+    },
+
+    applySkill: function(skill, oldSkill) {
+        if (!skill) {
+            return null;
+        }
+
+        if (!skill.isModel) {
+            if (oldSkill && skill.ID == oldSkill.getId()) {
+                oldSkill.set(skill, { dirty: false });
+                return oldSkill;
+            }
+
+            skill = Slate.cbl.model.Skill.create(skill);
+        }
+
+        return skill;
+    },
+
+    updateSkill: function(skill) {
+        this.setLabel(skill ? skill.get('Code') + '—' + skill.get('Descriptor') : null);
+    },
+
+    applyLabel: function(labelCmp, oldLabelCmp) {
+        if (!labelCmp || typeof labelCmp == 'boolean') {
+            labelCmp = {
+                hidden: !labelCmp
+            };
+        } else if (typeof labelCmp == 'string') {
+            labelCmp = {
+                text: labelCmp
+            };
+        }
+
+        if (Ext.isSimpleObject(labelCmp)) {
+            Ext.applyIf(labelCmp, {
+                cls: 'x-form-item-label',
+            });
+        }
+
+        return Ext.factory(labelCmp, 'Ext.form.Label', oldLabelCmp);
+    },
+
+
+    // field lifecycle
+    initValue: function() {
+        var me = this,
+            value = me.normalizeValue(me.value);
+
+        me.value = value;
+
+        // normalize twice so value/originalValue aren't references to same object instance
+        me.originalValue = me.normalizeValue(value);
+
+        me.loadValue();
+    },
+
+    normalizeValue: function(value) {
+        var me = this,
+            maxValue = me.maxValue,
+            rating = value.DemonstratedLevel;
+
+        if (!rating && rating !== 0) {
+            rating = null;
+        } else {
+            rating = Math.round(rating);
+    
+            if (rating >= maxValue) {
+                rating = maxValue;
+            } else if (rating < me.minValue && me.getMenuRatings().indexOf(rating) == -1) {
+                rating = null;
+            }
+        }
+
+        // IMPORTANT: return a fresh object
+        return {
+            Class: value.Class || null,
+            DemonstratedLevel: rating,
+            TargetLevel: value.TargetLevel || null,
+        };
+    },
+
+    isEqual: function(value1, value2) {
+        if (!value1 || !value2) {
+            return false;
+        }
+
+        if (value1.Class != value2.Class) {
+            return false;
+        }
+
+        if (value1.TargetLevel != value2.TargetLevel) {
+            return false;
+        }
+
+        if (value1.DemonstratedLevel != value2.DemonstratedLevel) {
+            return false;
+        }
+
+        return true;
+    },
+
+    onChange: function(value, oldValue) {
+        this.loadValue();
+        this.callParent(arguments);
+    },
+
+    loadValue: function() {
+        var me = this,
+            value = me.value;
+
+        console.info('loadValue', value);
+        me.setLevel(value.TargetLevel);
+        me.segmentedBtn.setValue(value.DemonstratedLevel);
+    },
+
+
+    // component lifecycle
+    initItems: function() {
+        var me = this,
+            minRating = me.getMinRating(),
+            maxRating = me.getMaxRating(),
+            menuRatingItemsCfg = [],
+            menuRatings = me.getMenuRatings(),
+            menuRatingsLength = menuRatings && menuRatings.length,
+            menuRatingsIndex = 0,
+            rating, segmentedBtn;
+
+        me.callParent();
+
+        // grab references to pre-configured items
+        segmentedBtn = me.segmentedBtn = me.down('segmentedbutton');
+
+        // insert config-managed label component
+        me.items.insert(0, me.getLabel());
+
+        // insert menu ratings button
+        if (menuRatingsLength) {
+            for (; menuRatingsIndex < menuRatingsLength; menuRatingsIndex++) {
+                rating = menuRatings[menuRatingsIndex];
+
+                menuRatingItemsCfg.push({
+                    value: rating,
+                    text: Ext.util.Format.htmlEncode(Slate.cbl.util.Config.getAbbreviationForRating(rating)),
+                    tooltip: Slate.cbl.util.Config.getTitleForRating(rating),
+                    tooltipType: 'title'
+                });
+            }
+
+            me.menuBtn = segmentedBtn.add({
+                value: 'MENU',
+                cls: 'slate-cbl-ratings-rater-menu-btn',
+                glyph: this.self.menuGlyph,
+                menu: {
+                    items: menuRatingItemsCfg,
+                    plain: true,
+                    defaultType: 'menucheckitem',
+                    defaults: {
+                        group: 'rating',
+                        listeners: {
+                            checkchange: function(menuItem, checked) {
+                                if (!checked) {
+                                    return; // ignore uncheck events
+                                }
+
+                                var menuBtn = me.menuBtn;
+
+                                Ext.suspendLayouts();
+                                menuBtn.value = menuItem.value;
+                                menuBtn.setGlyph(null);
+                                menuBtn.setText(String(menuItem.value));
+                                menuBtn.setPressed(true);
+                                me.segmentedBtn.setValue(menuItem.value);
+                                Ext.resumeLayouts(true);
+                            }
+                        }
+                    },
+                    listeners: {
+                        beforeshow: function(menu) {
+                            menu.setWidth(me.menuBtn.getWidth())
+                        }
+                    }
+                },
+                listeners: {
+                    beforetoggle: function(btn, pressed) {
+                        var checkedItem;
+                        
+                        // return menu button back to MENU value on un-press
+                        if (!pressed && btn === me.menuBtn && btn.value != 'MENU') {
+                            Ext.suspendLayouts();
+                            btn.value = 'MENU';
+                            btn.setText(null);
+                            btn.setGlyph(me.self.menuGlyph);
+                            checkedItem = btn.menu.down('[checked]');
+                            if (checkedItem) {
+                                checkedItem.setChecked(false, true);
+                            }
+                            Ext.resumeLayouts(true);
+                        }
+
+                        // prevent selecting menu button with no value set yet
+                        if (pressed && btn.value == 'MENU') {
+                            return false;
+                        }
+                    }
+                }
+            });
+        }
+
+        // insert M and DNM buttons
+        if (me.getEnableMissing()) {
+            segmentedBtn.add({
+                value: 'M',
+                text: Ext.util.Format.htmlEncode(Slate.cbl.util.Config.getAbbreviationForRating('M')),
+                tooltip: Slate.cbl.util.Config.getTitleForRating('M'),
+                tooltipType: 'title'
+            });
+        }
+
+        if (me.getEnableDidNotMeet()) {
+            segmentedBtn.add({
+                value: 'DNM',
+                text: Ext.util.Format.htmlEncode(Slate.cbl.util.Config.getAbbreviationForRating('DNM')),
+                tooltip: Slate.cbl.util.Config.getTitleForRating('DNM'),
+                tooltipType: 'title'
+            });
+        }
+
+        // insert min->max rating buttons
+        for (rating = minRating; rating <= maxRating; rating++) {
+            segmentedBtn.add({
+                value: rating,
+                text: Ext.util.Format.htmlEncode(Slate.cbl.util.Config.getAbbreviationForRating(rating)),
+                tooltip: Slate.cbl.util.Config.getTitleForRating(rating),
+                tooltipType: 'title'
+            });
+        }
+
+        // insert checkmark button
+        if (me.getEnableCheckmark()) {
+            segmentedBtn.add({
+                value: 'CHECK',
+                glyph: 'xf00c', // fa-check
+                tooltip: Slate.cbl.util.Config.getTitleForRating('CHECK'),
+                tooltipType: 'title'
+            });
+        }
+    },
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss
new file mode 100644
index 000000000..1b1c10b94
--- /dev/null
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/Rater.scss
@@ -0,0 +1,84 @@
+.slate-cbl-ratings-rater {
+  .x-btn-icon-el-default-large.x-btn-glyph {
+    // TODO replace selector?
+    font-size: 14px;
+    opacity: 0.9;
+  }
+
+  .x-segmented-button-item-horizontal {
+    border-left: 1px solid rgba(black, 0.15);
+
+    .x-btn-inner {
+      padding: 0;
+    }
+
+    &:first-child {
+      border-left: 0;
+    }
+  }
+
+  @for $n from 1 through length($level-colors) {
+    $color: nth($level-colors, $n);
+    $color-dark: nth($level-colors-dark, $n);
+    $color-medium: nth($level-colors-medium, $n);
+    $color-light: nth($level-colors-light, $n);
+    $color-shadow: darken($color-dark, 5%);
+
+    &.cbl-level-#{$n} {
+      .x-btn {
+        background-color: $color-light;
+        border-bottom-color: $color-shadow;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
+
+        &:hover,
+        &:focus,
+        &.x-btn-over,
+        &.x-btn-focus {
+          background-color: $color-medium;
+          background-image: none;
+        }
+
+        &.x-btn-pressed {
+          background-color: $color-dark;
+          background-image: linear-gradient(to bottom, $color, $color-dark);
+          border-color: $color-shadow;
+
+          + .x-segmented-button-item-horizontal {
+            border-left-color: $color-shadow;
+          }
+        }
+
+        .x-btn-inner {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+
+.slate-cbl-ratings-rater-clear-btn {
+  .x-btn-inner {
+    font-size: 13px;
+    text-transform: uppercase;
+  }
+}
+
+.slate-cbl-ratings-rater-menu-btn {
+  // match the framework selectors
+
+  .x-btn-arrow-right > .x-btn-icon.x-btn-no-text.x-btn-button-default-large {
+    padding-right: 0;
+  }
+
+  .x-btn-wrap-default-large.x-btn-arrow-right:after {
+    background: none;
+    color: white;
+    content: '\f0d7'; // fa-caret-down
+    font-family: FontAwesome;
+    font-size: 14px;
+    margin: 0 4px;
+    opacity: 0.6;
+    padding: 0;
+    width: 14px;
+  }
+}
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsCompetency.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsCompetency.js
index be9b5335d..4353a872a 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsCompetency.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsCompetency.js
@@ -5,9 +5,10 @@ Ext.define('Slate.cbl.field.ratings.SkillsCompetency', {
         'Ext.util.Format',
 
         /* global Slate */
+        'Slate.cbl.field.ratings.Rater',
         'Slate.cbl.model.Competency',
         'Slate.sorter.Code',
-        'Slate.ui.override.AddSorted'
+        'Slate.ui.override.AddSorted',
     ],
 
 
@@ -20,7 +21,7 @@ Ext.define('Slate.cbl.field.ratings.SkillsCompetency', {
 
     // container properties
     layout: 'anchor',
-    defaultType: 'slate-cbl-ratings-slider',
+    defaultType: 'slate-cbl-ratings-rater',
     defaults: {
         anchor: '100%',
         excludeForm: true // exclude from any parent forms
@@ -170,4 +171,4 @@ Ext.define('Slate.cbl.field.ratings.SkillsCompetency', {
             }
         });
     }
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsField.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsField.js
index 5ce49e821..9a1c87ea8 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsField.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/SkillsField.js
@@ -14,7 +14,7 @@ Ext.define('Slate.cbl.field.ratings.SkillsField', {
         'Slate.cbl.store.Competencies',
         'Slate.cbl.store.StudentCompetencies',
         'Slate.cbl.field.ratings.SkillsCompetency',
-        'Slate.cbl.field.ratings.Slider',
+        'Slate.cbl.field.ratings.Rater',
         'Slate.cbl.field.SkillsSelector',
 
         'Jarvus.override.data.RequireLoadedStores',
@@ -275,7 +275,7 @@ Ext.define('Slate.cbl.field.ratings.SkillsField', {
     onRatingChange: function(ratingSlider, rating) {
         var me = this;
 
-        me.setSkillValue(ratingSlider.getSkill().getId(), rating, ratingSlider.getLevel());
+        me.setSkillValue(rating`Slider`.getSkill().getId(), rating, ratingSlider.getLevel());
 
         me.validate();
         me.checkDirty();
@@ -578,4 +578,4 @@ Ext.define('Slate.cbl.field.ratings.SkillsField', {
         // clear queue immediately after request is executed
         studentCompetenciesLoadQueue.length = 0;
     }
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js
index 9191afcd4..e53de03b5 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/Slider.js
@@ -459,4 +459,4 @@ Ext.define('Slate.cbl.field.ratings.Slider', {
 }, function(Slider) {
     // make this class statically observable so instances can monitor other instances for tip showing
     Ext.util.Observable.observe(Slider);
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetenciesField.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetenciesField.js
index dbd0f4454..3b44513a3 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetenciesField.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetenciesField.js
@@ -210,7 +210,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetenciesField', {
             i = 0, skill;
 
         for (; i < length; i++) {
-            skill = card.query('field')[i].getSkill();
+            skill = fields[i].getSkill();
 
             if (skill) {
                 me.removeSkillValue(skill.getId());
@@ -291,7 +291,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetenciesField', {
                 permanentCards.push(competencyId);
             }
 
-            card.setSkillValue(skillId, skillData.DemonstratedLevel, skillData.TargetLevel);
+            card.setSkillValue(skillId, skillData);
             skillIds.push(skillId);
         }
 
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js
index 3606b2b8a..179661972 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.js
@@ -7,7 +7,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
     requires: [
         /* global Slate */
         'Slate.cbl.model.StudentCompetency',
-        'Slate.cbl.field.ratings.Slider'
+        'Slate.cbl.field.ratings.Rater',
     ],
 
 
@@ -35,10 +35,10 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
 
     // component configuration
     componentCls: 'slate-cbl-ratings-studentcompetency',
-    padding: '16 75',
+    padding: '16',
 
     // container configuration
-    defaultType: 'slate-cbl-ratings-slider',
+    defaultType: 'slate-cbl-ratings-rater',
     layout: 'anchor',
     defaults: {
         anchor: '100%',
@@ -48,13 +48,27 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
         {
             dock: 'top',
 
-            xtype: 'component',
-            itemId: 'competencyInfo',
+            xtype: 'container',
+            layout: 'hbox',
             hidden: true,
-            tpl: [
-                '<h4 class="competency-descriptor">{Descriptor}</h4>',
-                '<blockquote class="competency-statement">{Statement}</blockquote>'
-            ]
+            itemId: 'competencyInfo',
+            items: [{
+                flex: 1,
+                xtype: 'component',
+                itemId: 'competencyInfoHeader',
+                tpl: [
+                    '<header class="competency-header">',
+                        '<h4 class="competency-descriptor">{Descriptor}</h4>',
+                        '<blockquote class="competency-statement">{Statement}</blockquote>',
+                    '</header>',
+                ]
+            }, {
+                xtype: 'button',
+                margin: '0 0 0 16',
+                text: 'Remove',
+                tooltip: 'Remove this competency from the demonstration',
+                glyph: 'xf00d', // fa-times
+            }],
         }
     ],
 
@@ -81,6 +95,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
     updateStudentCompetency: function(studentCompetency) {
         var me = this,
             competencyInfoCmp = me.getDockedComponent('competencyInfo'),
+            competencyInfoHeader = competencyInfoCmp.getComponent('competencyInfoHeader'),
             skillValueQueue = me.skillValueQueue,
             skillFieldsMap = me.skillFieldsMap = {},
             currentLevel, competencyData, skills,
@@ -94,7 +109,7 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
             currentLevel = studentCompetency.get('Level');
             competencyData = studentCompetency.get('Competency');
             me.setSelectedCompetency(competencyData.Code);
-            competencyInfoCmp.setData(competencyData);
+            competencyInfoHeader.setData(competencyData);
             competencyInfoCmp.show();
 
             skills = competencyData.Skills || [];
@@ -110,8 +125,9 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
 
                 skillFieldsMap[skillId] = me.add({
                     skill: skill,
-                    level: value ? value.Level : currentLevel,
-                    value: value ? value.Rating : null,
+                    value: value
+                        ? value
+                        : { TargetLevel: currentLevel },
 
                     listeners: {
                         scope: me,
@@ -237,19 +253,15 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
         });
     },
 
-    setSkillValue: function(skillId, rating, level) {
+    setSkillValue: function(skillId, value) {
         var me = this,
             skillFieldsMap = me.skillFieldsMap,
             skillField = skillFieldsMap && skillFieldsMap[skillId];
 
         if (skillField && me.isStudentCompetencyLoaded()) {
-            skillField.setLevel(level);
-            skillField.setValue(rating);
+            skillField.setValue(value);
         } else {
-            me.skillValueQueue[skillId] = {
-                Rating: rating,
-                Level: level
-            };
+            me.skillValueQueue[skillId] = value;
         }
     },
 
@@ -269,4 +281,4 @@ Ext.define('Slate.cbl.field.ratings.StudentCompetency', {
             }
         }
     }
-});
\ No newline at end of file
+});
diff --git a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss
index a5acb09cf..819c31cc3 100644
--- a/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss
+++ b/sencha-workspace/packages/slate-cbl/src/field/ratings/StudentCompetency.scss
@@ -1,13 +1,18 @@
 .slate-cbl-ratings-studentcompetency {
+    .competency-header {
+        max-width: 480px;
+    }
+
     h4 {
-        margin: 0 0 .25em;
+        margin: .375em 0 .25em;
     }
 
     .competency-statement {
         border: none;
         color: #666;
         font-style: italic;
-        margin: 0;
+        line-height: (4/3);
+        margin: 0 0 .5em;
         padding: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/sencha-workspace/packages/slate-cbl/src/util/Config.js b/sencha-workspace/packages/slate-cbl/src/util/Config.js
index cd0d9c9d6..b3167fd86 100644
--- a/sencha-workspace/packages/slate-cbl/src/util/Config.js
+++ b/sencha-workspace/packages/slate-cbl/src/util/Config.js
@@ -21,7 +21,20 @@ Ext.define('Slate.cbl.util.Config', {
                 abbreviation: 'P4'
             }
         },
-        ratings: {}
+        ratings: {
+            M: {
+                title: 'Missing',
+                abbreviation: 'M'
+            },
+            DNM: {
+                title: 'Did Not Meet',
+                abbreviation: 'DNM'
+            },
+            CHECK: {
+                title: 'Complete w/o rating',
+                abbreviation: 'CHK'
+            }
+        }
     },
 
 
@@ -64,7 +77,7 @@ Ext.define('Slate.cbl.util.Config', {
             return ratingConfig.title || ratingConfig.abbreviation;
         }
 
-        return rating == '0' ? 'M' : rating;
+        return String(rating);
     },
 
     getAbbreviationForRating: function(rating) {
@@ -73,6 +86,7 @@ Ext.define('Slate.cbl.util.Config', {
         if (ratingConfig) {
             return ratingConfig.abbreviation || ratingConfig.title;
         }
-        return rating == '0' ? 'M' : rating;
+
+        return String(rating);
     }
 });
\ No newline at end of file