diff --git a/app/services/ui.js b/app/services/ui.js
index d23544904a..e3dff74988 100644
--- a/app/services/ui.js
+++ b/app/services/ui.js
@@ -2,22 +2,28 @@ import Service, {inject as service} from '@ember/service';
 import {get} from '@ember/object';
 import {not, or, reads} from '@ember/object/computed';
 
-function updateBodyClasses(transition) {
+function collectMetadataClasses(transition, prop) {
     let oldClasses = [];
     let newClasses = [];
     let {from, to} = transition;
 
     while (from) {
-        oldClasses = oldClasses.concat(get(from, 'metadata.bodyClasses') || []);
+        oldClasses = oldClasses.concat(get(from, `metadata.${prop}`) || []);
         from = from.parent;
     }
 
     while (to) {
-        newClasses = newClasses.concat(get(to, 'metadata.bodyClasses') || []);
+        newClasses = newClasses.concat(get(to, `metadata.${prop}`) || []);
         to = to.parent;
     }
 
+    return {oldClasses, newClasses};
+}
+
+function updateBodyClasses(transition) {
     let {body} = document;
+    let {oldClasses, newClasses} = collectMetadataClasses(transition, 'bodyClasses');
+
     oldClasses.forEach((oldClass) => {
         body.classList.remove(oldClass);
     });
@@ -34,6 +40,7 @@ export default Service.extend({
     isFullScreen: false,
     showMobileMenu: false,
     showSettingsMenu: false,
+    mainClass: '',
 
     hasSideNav: not('isSideNavHidden'),
     isMobile: reads('mediaQueries.isMobile'),
@@ -41,8 +48,12 @@ export default Service.extend({
 
     init() {
         this._super(...arguments);
+
         this.router.on('routeDidChange', (transition) => {
             updateBodyClasses(transition);
+
+            let {newClasses: mainClasses} = collectMetadataClasses(transition, 'mainClasses');
+            this.set('mainClass', mainClasses.join(' '));
         });
     },
 
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 8e07a1ef85..6afa48379a 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -10,7 +10,7 @@
             }}
         {{/if}}
 
-        <main class="gh-main" role="main">
+        <main class="gh-main {{this.ui.mainClass}}" role="main">
             {{outlet}}
         </main>