diff --git a/app/components/section-title/component.js b/app/components/section-title/component.js
index 3405f78a..61bcb435 100644
--- a/app/components/section-title/component.js
+++ b/app/components/section-title/component.js
@@ -13,18 +13,18 @@ export default Ember.Component.extend({
         // otherwise, check if a background color has been specified.
         // if so, use that. if not, use the branding background color
         // if text color is specified, use that. otherwise, use branding text color
-        const bgColor = this.get('layout.background_color') ? this.get('layout.background_color') : this.get('branding.colors.background');
-        const bgImage = this.get('layout.img_url');
+        const bgColor = this.get('layout.background-color') ? this.get('layout.background_color') : this.get('branding.colors.background');
+        const bgImage = this.get('layout.img-url');
         const bg = bgImage ? `background:url(${bgImage}) no-repeat left center; background-size: cover;` : `background-color:${bgColor};`;
-        let textColor = this.get('layout.text_color') ? this.get('layout.text_color') : this.get('branding.colors.text');
+        let textColor = this.get('layout.text-color') ? this.get('layout.text-color') : this.get('branding.colors.text');
         textColor = `color:${textColor};`;
         return Ember.String.htmlSafe(bg + textColor);
     }),
     titleColor: Ember.computed('layout', function() {
-        return Ember.String.htmlSafe(this.get('layout.title_color') ? `color: ${this.get('layout.title_color')};` : '');
+        return Ember.String.htmlSafe(this.get('layout.title-color') ? `color: ${this.get('layout.title-color')};` : '');
     }),
     taglineColor: Ember.computed('layout', function() {
-        return Ember.String.htmlSafe(this.get('layout.tagline_color') ? `color: ${this.get('layout.tagline_color')};` : '');
+        return Ember.String.htmlSafe(this.get('layout.tagline-color') ? `color: ${this.get('layout.tagline-color')};` : '');
     }),
     logoStyle: Ember.computed('branding.logo', function() {
         return Ember.String.htmlSafe(`background-image: url(${this.get('branding.logo.url')}); height: ${this.get('branding.logo.height')}`);