diff --git a/src/components/app/app.scss b/src/components/app/app.scss
index de7b25921c..3466c29cd6 100644
--- a/src/components/app/app.scss
+++ b/src/components/app/app.scss
@@ -449,3 +449,11 @@ ion-footer {
     }
   }
 }
+
+
+// Core Components
+// --------------------------------------------------
+
+ion-badge {
+  visibility: hidden;
+}
diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss
index 0c1d0fa451..bcc0ebf8ce 100644
--- a/src/components/badge/badge.ios.scss
+++ b/src/components/badge/badge.ios.scss
@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.ios";
+@import "./badge";
+
 
 // iOS Badge
 // --------------------------------------------------
diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss
index 958c62ed16..ac9680a815 100644
--- a/src/components/badge/badge.md.scss
+++ b/src/components/badge/badge.md.scss
@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.md";
+@import "./badge";
+
 
 // Material Design Badge
 // --------------------------------------------------
diff --git a/src/components/badge/badge.module.ts b/src/components/badge/badge.module.ts
deleted file mode 100644
index 2d25b5623b..0000000000
--- a/src/components/badge/badge.module.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Badge } from './badge';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Badge
-  ],
-  exports: [
-    Badge
-  ]
-})
-export class BadgeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BadgeModule, providers: []
-    };
-  }
-}
diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss
index 3c983f64b2..4e1eaa6daf 100644
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -1,5 +1,6 @@
 @import "../../themes/ionic.globals";
 
+
 // Badge
 // --------------------------------------------------
 
@@ -10,9 +11,14 @@ $badge-font-size:                 1.3rem !default;
 $badge-font-weight:               bold !default;
 
 
-ion-badge {
+ion-badge,
+:host {
   display: inline-block;
+  visibility: inherit !important;
+  contain: layout content;
+}
 
+.badge {
   padding: 3px 8px;
 
   min-width: 10px;
@@ -26,6 +32,7 @@ ion-badge {
   vertical-align: baseline;
 }
 
-ion-badge:empty {
+ion-badge:empty,
+:host(:empty) {
   display: none;
 }
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index be7a271b0e..b268116e8e 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,23 +1,12 @@
-import { Directive, ElementRef, Renderer } from '@angular/core';
-
-import { Config } from '../../config/config';
-import { Ion } from '../ion';
+import { Component } from '../../util/decorators';
 
 
-/**
-  * @name Badge
-  * @module ionic
-  * @description
-  * Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.
-  * @see {@link /docs/components/#badges Badges Component Docs}
- */
-@Directive({
-  selector: 'ion-badge'
-})
-export class Badge extends Ion {
-
-  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
-    super(config, elementRef, renderer, 'badge');
+@Component({
+  tag: 'ion-badge',
+  styleUrls: {
+    ios: 'badge.ios.scss',
+    md: 'badge.md.scss',
+    wp: 'badge.wp.scss'
   }
-
-}
+})
+export class Badge {}
diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss
index 9c86c3e126..b860dc5a87 100644
--- a/src/components/badge/badge.wp.scss
+++ b/src/components/badge/badge.wp.scss
@@ -1,4 +1,6 @@
 @import "../../themes/ionic.globals.wp";
+@import "./badge";
+
 
 // Windows Badge
 // --------------------------------------------------
diff --git a/src/components/badge/test/basic/app/app.module.ts b/src/components/badge/test/basic/app/app.module.ts
index a4c605fe0d..df836f7612 100644
--- a/src/components/badge/test/basic/app/app.module.ts
+++ b/src/components/badge/test/basic/app/app.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule } from '../../../../..';
 
@@ -14,6 +14,7 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
     IonicModule.forRoot(AppComponent),
     PageOneModule
   ],
-  bootstrap: [IonicApp]
+  bootstrap: [IonicApp],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class AppModule {}
diff --git a/src/components/badge/test/basic/pages/page-one/page-one.module.ts b/src/components/badge/test/basic/pages/page-one/page-one.module.ts
index 8b48a5850d..ea5c47c577 100644
--- a/src/components/badge/test/basic/pages/page-one/page-one.module.ts
+++ b/src/components/badge/test/basic/pages/page-one/page-one.module.ts
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { IonicPageModule } from '../../../../../..';
 
 import { PageOne } from './page-one';
@@ -12,6 +12,9 @@ import { PageOne } from './page-one';
   ],
   entryComponents: [
     PageOne,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class PageOneModule {}
diff --git a/src/components/tabs/tabs.module.ts b/src/components/tabs/tabs.module.ts
index bb742fadd6..ec64c0e3dd 100644
--- a/src/components/tabs/tabs.module.ts
+++ b/src/components/tabs/tabs.module.ts
@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
-import { BadgeModule } from '../badge/badge.module';
 import { IconModule } from '../icon/icon.module';
 
 import { Tab } from './tab';
@@ -12,7 +11,6 @@ import { Tabs } from './tabs';
 /** @hidden */
 @NgModule({
   imports: [
-    BadgeModule,
     CommonModule,
     IconModule
   ],
@@ -27,7 +25,8 @@ import { Tabs } from './tabs';
     TabButton,
     TabHighlight,
     Tabs
-  ]
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class TabsModule {
   public static forRoot(): ModuleWithProviders {
diff --git a/src/index.ts b/src/index.ts
index 1ba51ef8ef..2ef30497f6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@
 /**
  * Import Angular
  */
-import { ANALYZE_FOR_ENTRY_COMPONENTS, APP_INITIALIZER, ComponentFactoryResolver, Inject, Injector, ModuleWithProviders, NgModule, NgZone, Optional } from '@angular/core';
+import { ANALYZE_FOR_ENTRY_COMPONENTS, APP_INITIALIZER, ComponentFactoryResolver, CUSTOM_ELEMENTS_SCHEMA, Inject, Injector, ModuleWithProviders, NgModule, NgZone, Optional } from '@angular/core';
 import { APP_BASE_HREF, Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy, PlatformLocation } from '@angular/common';
 import { DOCUMENT } from '@angular/platform-browser';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -38,6 +38,7 @@ import { PickerController } from './components/picker/picker-controller';
 import { Platform, setupPlatform } from './platform/platform';
 import { PlatformConfigToken, providePlatformConfigs } from './platform/platform-registry';
 import { PopoverController } from './components/popover/popover-controller';
+import { setupCore } from './util/ionic-core';
 import { TapClick, setupTapClick } from './tap-click/tap-click';
 import { ToastController } from './components/toast/toast-controller';
 import { registerModeConfigs } from './config/mode-registry';
@@ -53,7 +54,6 @@ import { AlertModule } from './components/alert/alert.module';
 import { AppModule } from './components/app/app.module';
 import { AvatarModule } from './components/avatar/avatar.module';
 import { BackdropModule } from './components/backdrop/backdrop.module';
-import { BadgeModule } from './components/badge/badge.module';
 import { ButtonModule } from './components/button/button.module';
 import { CardModule } from './components/card/card.module';
 import { CheckboxModule } from './components/checkbox/checkbox.module';
@@ -107,7 +107,6 @@ export { AlertModule } from './components/alert/alert.module';
 export { AppModule } from './components/app/app.module';
 export { AvatarModule } from './components/avatar/avatar.module';
 export { BackdropModule } from './components/backdrop/backdrop.module';
-export { BadgeModule } from './components/badge/badge.module';
 export { ButtonModule } from './components/button/button.module';
 export { CardModule } from './components/card/card.module';
 export { CheckboxModule } from './components/checkbox/checkbox.module';
@@ -164,7 +163,6 @@ export { AlertOptions, AlertInputOptions } from './components/alert/alert-option
 export { App } from './components/app/app';
 export { Avatar } from './components/avatar/avatar';
 export { Backdrop } from './components/backdrop/backdrop';
-export { Badge } from './components/badge/badge';
 export { Button } from './components/button/button';
 export { Card } from './components/card/card';
 export { CardContent } from './components/card/card-content';
@@ -248,6 +246,7 @@ export { Slide } from './components/slides/slide';
 export { Slides } from './components/slides/slides';
 export { Spinner } from './components/spinner/spinner';
 export { SplitPane, RootNode } from './components/split-pane/split-pane';
+export { setupCore } from './util/ionic-core';
 export { Tab } from './components/tabs/tab';
 export { TabButton } from './components/tabs/tab-button';
 export { TabHighlight } from './components/tabs/tab-highlight';
@@ -378,7 +377,6 @@ export { IonicGestureConfig } from './gestures/gesture-config';
     AppModule.forRoot(),
     AvatarModule.forRoot(),
     BackdropModule.forRoot(),
-    BadgeModule.forRoot(),
     ButtonModule.forRoot(),
     CardModule.forRoot(),
     CheckboxModule.forRoot(),
@@ -433,7 +431,6 @@ export { IonicGestureConfig } from './gestures/gesture-config';
     AppModule,
     AvatarModule,
     BackdropModule,
-    BadgeModule,
     ButtonModule,
     CardModule,
     CheckboxModule,
@@ -477,6 +474,9 @@ export { IonicGestureConfig } from './gestures/gesture-config';
     ToolbarModule,
     TypographyModule,
     VirtualScrollModule
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
   ]
 })
 export class IonicModule {
@@ -509,6 +509,7 @@ export class IonicModule {
         { provide: APP_INITIALIZER, useFactory: setupProvideEvents, deps: [ Platform, DomController ], multi: true },
         { provide: APP_INITIALIZER, useFactory: setupTapClick, deps: [ Config, Platform, DomController, App, NgZone, GestureController ], multi: true },
         { provide: APP_INITIALIZER, useFactory: setupPreloading, deps: [ Config, DeepLinkConfigToken, ModuleLoader, NgZone ], multi: true },
+        { provide: APP_INITIALIZER, useFactory: setupCore, deps: [ Config, Platform, DomController, NgZone ], multi: true },
 
         // useClass
         // { provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig },
diff --git a/tsconfig.json b/tsconfig.json
index 7823d30a72..9b52d21156 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,9 @@
     "src/**/*.ts",
     "demos/src/**/*.ts"
   ],
+  "exclude": [
+    "src/badge/**/*"
+  ],
   "compileOnSave": false,
   "buildOnSave": false,
   "atom": {