diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 09978ab00d..7bae7984e7 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -199,6 +199,20 @@ body.md {
   border-top: 24px solid black;
 }
 
+body.ios{
+  border-top: 10px solid #F8F8F8;
+}
+
+body.ios backdrop {
+  top: -10px;
+  height: 105%;
+}
+
+body.md backdrop {
+  top: -24px;
+  height: 107%;
+}
+ 
 body.md img#md-only {
   display: block !important;
   position: absolute;
@@ -207,5 +221,13 @@ body.md img#md-only {
   height: auto;
 }
 
+body.ios img#ios-only {
+  display: block !important;
+  position: absolute;
+  top: -6px;
+  width: 100%;
+  height: auto;
+  z-index: 9999;
+}
 
 
diff --git a/demos/component-docs/img/ios-statusbar.png b/demos/component-docs/img/ios-statusbar.png
new file mode 100644
index 0000000000..9ee6b323f0
Binary files /dev/null and b/demos/component-docs/img/ios-statusbar.png differ
diff --git a/demos/component-docs/index.ts b/demos/component-docs/index.ts
index ae087060be..dd24b099bb 100644
--- a/demos/component-docs/index.ts
+++ b/demos/component-docs/index.ts
@@ -5,7 +5,10 @@ import * as helpers from './helpers';
 
 
 @App({
-  template: '<img src="img/android-statusbar-blue.png" style="display:none" id="md-only"><ion-nav id="nav" [root]="rootPage" #content></ion-nav><ion-overlay></ion-overlay>',
+  template: '<img src="img/android-statusbar-blue.png" style="display:none" id="md-only">' +
+            '<img src="img/ios-statusbar.png" style="display:none" id="ios-only">' +
+            '<ion-nav id="nav" [root]="rootPage" #content></ion-nav>' +
+            '<ion-overlay></ion-overlay>',
 })
 class DemoApp {