diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts
index c68e9d1930..6081d33e8e 100644
--- a/ionic/components/nav/nav-controller.ts
+++ b/ionic/components/nav/nav-controller.ts
@@ -8,7 +8,7 @@ import {Keyboard} from '../../util/keyboard';
 import {ViewController} from './view-controller';
 import {Animation} from '../../animations/animation';
 import {SwipeBackGesture} from './swipe-back';
-import {isBoolean, array} from '../../util/util';
+import {isBoolean, array, pascalCaseToDashCase} from '../../util/util';
 import {raf, rafFrames} from '../../util/dom';
 
 /**
@@ -920,6 +920,10 @@ export class NavController extends Ion {
       let pageElementRef = this._viewManager.getHostElement(hostViewRef);
       let component = this._viewManager.getComponent(pageElementRef);
 
+      // auto-add page css className created from component JS class name
+      let cssClassName = pascalCaseToDashCase(viewCtrl.componentType.name);
+      this._renderer.setElementClass(pageElementRef, cssClassName, true);
+
       viewCtrl.addDestroy(() => {
         // ensure the element is cleaned up for when the view pool reuses this element
         this._renderer.setElementAttribute(pageElementRef, 'class', null);