diff --git a/src/app/core/alert/alert.html b/src/app/core/alert/alert.html
new file mode 100644
index 0000000..20f3f5c
--- /dev/null
+++ b/src/app/core/alert/alert.html
@@ -0,0 +1,6 @@
+<div ng-cloak class="alert alert-{{vm.config.type}}" ng-hide="!vm.show">
+    <button type="button" class="close" ng-if="vm.config.closeBtn" ng-click="vm.dismiss()">
+        <span aria-hidden="true">&times;</span>
+    </button>
+    <p ng-transclude></p>
+</div>
\ No newline at end of file
diff --git a/src/app/core/alert/alert.ts b/src/app/core/alert/alert.ts
new file mode 100644
index 0000000..6c64015
--- /dev/null
+++ b/src/app/core/alert/alert.ts
@@ -0,0 +1,53 @@
+export interface IXosAlertConfig {
+  type: string;
+  closeBtn?: boolean;
+  autoHide?: number;
+}
+
+class AlertCtrl {
+
+  static $inject = ['$timeout'];
+
+  public config: any;
+  public show: boolean;
+  public dismiss: () => void;
+
+  constructor (
+    private $timeout: ng.ITimeoutService
+  ) {
+
+  }
+
+  $onInit() {
+    if (!angular.isDefined(this.config)) {
+      throw new Error('[xosAlert] Please provide a configuration via the "config" attribute');
+    }
+
+    // default the value to true
+    this.show = this.show !== false;
+
+    this.dismiss = () => {
+      this.show = false;
+    };
+
+    console.log(this.config);
+    if (this.config.autoHide) {
+
+      let to = this.$timeout(() => {
+        this.dismiss();
+        this.$timeout.cancel(to);
+      }, this.config.autoHide);
+    }
+  }
+}
+
+export const xosAlert: angular.IComponentOptions = {
+  template: require('./alert.html'),
+  controllerAs: 'vm',
+  controller: AlertCtrl,
+  transclude: true,
+  bindings: {
+    config: '=',
+    show: '=',
+  }
+};