diff --git a/README.md b/README.md
index 53041a2..e4a65bc 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,20 @@ bootstrap-notify
 
 Bootstrap alert system made better.
 
-### Contributors
+# Copyright
 
-* Nijiko Yonskai <http://twitter.com/nijikokun>
+    Copyright 2013 Nijiko Yonskai @nijikokun
+    Copyright 2012 Goodybag, Inc.
 
-
-Copyright 2012 Goodybag, Inc.
\ No newline at end of file
+# License
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    
+    http://www.apache.org/licenses/LICENSE-2.0
+    
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
diff --git a/component.json b/component.json
new file mode 100644
index 0000000..8c858f8
--- /dev/null
+++ b/component.json
@@ -0,0 +1,11 @@
+{
+  "name": "bootstrap-notify",
+  "version": "1.0.0",
+  "main": "js/bootstrap-notify.js",
+  "dependencies": {},
+  "description": "Bootstrap alert system made better.",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nijikokun/bootstrap-notify.git"
+  }
+}
\ No newline at end of file
diff --git a/css/bootstrap-notify.css b/css/bootstrap-notify.css
index a2d6877..cce0288 100644
--- a/css/bootstrap-notify.css
+++ b/css/bootstrap-notify.css
@@ -1,31 +1,6 @@
-.notifications {
-  position: fixed;
-}
-
-/* Positioning */ 
-.notifications.top-right {
-  right: 10px;
-  top: 25px;
-}
-
-.notifications.top-left {
-  left: 10px;
-  top: 25px;
-}
-
-.notifications.bottom-left {
-  left: 10px;
-  bottom: 25px;
-}
-
-.notifications.bottom-right {
-  right: 10px;
-  bottom: 25px;
-}
-
-/* Notification Element */
-.notifications > div {
-  position: relative;
-  z-index: 9999;
-  margin: 5px 0px;
-}
\ No newline at end of file
+.notifications{position:fixed;z-index:9999;}.notifications.top-right{right:10px;top:25px;}
+.notifications.top-left{left:10px;top:25px;}
+.notifications.bottom-left{left:10px;bottom:25px;}
+.notifications.bottom-right{right:10px;bottom:25px;}
+.notifications>div{position:relative;z-index:9999;margin:5px 0px;}
+.notifications.center{top:48%;left:0;width:100%;}.notifications.center>div{margin:5px auto;width:20%;text-align:center;}
diff --git a/css/bootstrap-notify.less b/css/bootstrap-notify.less
new file mode 100644
index 0000000..baea76d
--- /dev/null
+++ b/css/bootstrap-notify.less
@@ -0,0 +1,56 @@
+/**
+ * Bootstrap-notify.less
+ *
+ * @author Vitaly @Laboratory
+ * @author Nijiko Yonskai
+ * @copyright 2012 Vitaly
+ * @copyright 2013 Nijiko Yonskai
+ */
+
+@right: 10px;
+@left: @right;
+@top: 25px;
+@bottom: @top;
+
+.notifications {
+  position: fixed;
+  z-index:9999;
+
+  &.top-right {
+    right: @right;
+    top: @top;
+  }
+
+  &.top-left {
+    left: @left;
+    top: @top;
+  }
+
+  &.bottom-left {
+    left: @left;
+    bottom: @bottom;
+  }
+
+  &.bottom-right {
+    right: @right;
+    bottom: @bottom;
+  }
+
+  > div {
+    position: relative;
+    z-index: 9999;
+    margin: 5px 0px;
+  }
+
+  &.center {
+    top: 48%;
+    left: 0;
+    width: 100%;
+
+    > div {
+      margin: 5px auto;
+      width: 20%;
+      text-align: center;
+    }
+  }
+}
diff --git a/css/styles/alert-bangtidy.less b/css/styles/alert-bangtidy.less
new file mode 100644
index 0000000..06ae6bf
--- /dev/null
+++ b/css/styles/alert-bangtidy.less
@@ -0,0 +1,45 @@
+/**
+ * bangTidy2 Style - Ported from Growl Style
+ * Ported and Cleaned By Nijikokun @nijikokun
+ * Less By Vitaly @Laboratory
+ * Original Author Daryl Ginn
+ * Based On http://dribbble.com/shots/527056-Growl-Theme-2
+ *
+ * To use, for style use: bangTidy
+ *
+ */
+
+@glossLight: rgba(0, 0, 0, 0.80);
+@glossDark: rgba(0, 0, 0, 0.88);
+@box_shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+@text_shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+@border_radius: 4px;
+
+.alert-bangTidy {
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: @glossLight;
+  background: -moz-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @glossLight), color-stop(100%, @glossDark));
+  background: -webkit-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -o-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: -ms-linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  background: linear-gradient(top, @glossLight 0%, @glossDark 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@{glossLight}', endColorstr = '@{glossDark}', GradientType = 0);
+  border: 1px solid #000;
+  -webkit-box-shadow: @box_shadow;
+  -moz-box-shadow: @box_shadow;
+  -o-box-shadow: @box_shadow;
+  box-shadow: @box_shadow;
+  -webkit-border-radius: @border_radius;
+  -moz-border-radius: @border_radius;
+  -o-border-radius: @border_radius;
+  border-radius: @border_radius;
+  overflow: hidden;
+  color: white;
+  -webkit-text-shadow: @text_shadow;
+  -moz-text-shadow: @text_shadow;
+  -o-text-shadow: @text_shadow;
+  text-shadow: @text_shadow;
+  -webkit-font-smoothing: antialiased;
+}
\ No newline at end of file
diff --git a/css/styles/alert-blackgloss.css b/css/styles/alert-blackgloss.css
index 89c3d8b..4ec0078 100644
--- a/css/styles/alert-blackgloss.css
+++ b/css/styles/alert-blackgloss.css
@@ -11,33 +11,6 @@
  *   The gloss is only supported in webkit based browsers. 
  *   Chrome and Safari.
  */
-@-webkit-keyframes notification {
-	0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
-	70% { -webkit-transform: rotateY(20deg); opacity: .8; }
-	90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
-	100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
-}
-
-@-moz-keyframes notification {
-	0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
-	70% { -webkit-transform: rotateY(20deg); opacity: .8; }
-	90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
-	100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
-}
-
-@-o-keyframes notification {
-	0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
-	70% { -webkit-transform: rotateY(20deg); opacity: .8; }
-	90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
-	100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
-}
-
-keyframes notification {
-	0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
-	70% { -webkit-transform: rotateY(20deg); opacity: .8; }
-	90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
-	100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
-}
 
 /* Webkit Only */
 .alert-blackgloss:before {
@@ -57,11 +30,6 @@ keyframes notification {
 }
 
 .alert-blackgloss {
-	-webkit-animation: notification .75s linear;
-	-moz-animation: notification .75s linear;
-	-ms-animation: notification .75s linear;
-	-o-animation: notification .75s linear;
-	animation: notification .75s linear;
 	background: rgba(0,0,0,1);
 	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
 	-moz-box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.1);
diff --git a/css/styles/alert-notification-animations.css b/css/styles/alert-notification-animations.css
new file mode 100644
index 0000000..e5ed32f
--- /dev/null
+++ b/css/styles/alert-notification-animations.css
@@ -0,0 +1,55 @@
+/* ## Notification Keyframe Animations
+ *
+ * ## Usage
+ *
+ * ```css
+ *  -webkit-animation: notification .75s linear;
+ *  -moz-animation: notification .75s linear;
+ *  -ms-animation: notification .75s linear;
+ *  -o-animation: notification .75s linear;
+ *  animation: notification .75s linear;
+ * ```
+ */
+
+@-webkit-keyframes notification {
+  0% { -webkit-transform: rotateY(-90deg); opacity: 0; }
+  70% { -webkit-transform: rotateY(20deg); opacity: .8; }
+  90% { -webkit-transform: rotateY(-10deg); opacity: 1; }
+  100% { -webkit-transform: rotateY(-0deg); opacity: 1; }
+}
+
+@-moz-keyframes notification {
+  0% { -moz-transform: rotateY(-90deg); opacity: 0; }
+  70% { -moz-transform: rotateY(20deg); opacity: .8; }
+  90% { -moz-transform: rotateY(-10deg); opacity: 1; }
+  100% { -moz-transform: rotateY(-0deg); opacity: 1; }
+}
+
+@-ms-keyframes notification {
+  0% { -ms-transform: rotateY(-90deg); opacity: 0; }
+  70% { -ms-transform: rotateY(20deg); opacity: .8; }
+  90% { -ms-transform: rotateY(-10deg); opacity: 1; }
+  100% { -ms-transform: rotateY(-0deg); opacity: 1; }
+}
+
+@-o-keyframes notification {
+  0% { -o-transform: rotateY(-90deg); opacity: 0; }
+  70% { -o-transform: rotateY(20deg); opacity: .8; }
+  90% { -o-transform: rotateY(-10deg); opacity: 1; }
+  100% { -o-transform: rotateY(-0deg); opacity: 1; }
+}
+
+keyframes notification {
+  0% { transform: rotateY(-90deg); opacity: 0; }
+  70% { transform: rotateY(20deg); opacity: .8; }
+  90% { transform: rotateY(-10deg); opacity: 1; }
+  100% { transform: rotateY(-0deg); opacity: 1; }
+}
+
+.notifications > div {
+  -webkit-animation: notification .75s linear;
+  -moz-animation: notification .75s linear;
+  -ms-animation: notification .75s linear;
+  -o-animation: notification .75s linear;
+  animation: notification .75s linear;
+}
\ No newline at end of file
diff --git a/examples/index.html b/examples/index.html
index 4d8c362..9e322f5 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -11,20 +11,21 @@
     <link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet">
     <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
     <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
-    
+
     <!-- Notify CSS -->
     <link href="../css/bootstrap-notify.css" rel="stylesheet">
 
     <!-- Custom Styles -->
     <link href="../css/styles/alert-bangtidy.css" rel="stylesheet">
     <link href="../css/styles/alert-blackgloss.css" rel="stylesheet">
-    
+    <link href="../css/styles/alert-notification-animations.css" rel="stylesheet">
+
     <style>
       body {
         margin-bottom: 50px;
       }
     </style>
-    
+
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
@@ -41,9 +42,9 @@
           <div class="span3">
             <iframe src="http://nijikokun.github.com/github-buttons/github-btn.html?user=Nijikokun&repo=bootstrap-notify&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
             <iframe src="http://nijikokun.github.com/github-buttons/github-btn.html?user=Nijikokun&repo=bootstrap-notify&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110px" height="20px"></iframe>
-            
+
             <br />
-            
+
             <a href="https://twitter.com/share" class="twitter-share-button" data-via="vizualover" data-related="nijikokun" data-hashtags="twitterextensions">Tweet</a>
           </div>
 
@@ -72,7 +73,7 @@ <h4>Html:</h4>
 </pre>
 
           <h5>Position Options:</h5>
-          
+
           <p>Notifications supports four different position classes, only if utilizing the css file provided.</p>
 
           <table class="table table-bordered table-striped">
@@ -104,6 +105,11 @@ <h5>Position Options:</h5>
                 <td>bottom-right</td>
                 <td>Notifications will appear fixed in the bottom-right corner</td>
               </tr>
+              <tr>
+                <td>Center</td>
+                <td>center</td>
+                <td>Notifications will appear centered on the screen</td>
+              </tr>
             </tbody>
           </table>
 
@@ -160,7 +166,7 @@ <h5>Options:</h5>
                 <td>...</td>
                 <td>
                   <p>Text to show on alert, you can use either html or text. HTML will override text.</p>
-                  <p>Object structure: <code>message: { html: false, text: 'This is a message.' }</code></p> 
+                  <p>Object structure: <code>message: { html: false, text: 'This is a message.' }</code></p>
                 </td>
               </tr>
               <tr>
@@ -175,6 +181,12 @@ <h5>Options:</h5>
                 <td>...</td>
                 <td>Called after alert closes.</td>
               </tr>
+              <tr>
+                <td>icon</td>
+                <td>string</td>
+                <td>...</td>
+                <td>Bootstrap icon to display in the notification, omit <code>icon-</code> from icon name.</td>
+              </tr>
             </tbody>
           </table>
         </div>
@@ -182,7 +194,7 @@ <h5>Options:</h5>
       <div class="row">
         <div class="span3">
           <div class="span12">&nbsp;</div>
-          
+
           <div class="span3">
             <button class='btn show-bangTidy'>bangTidy</button>
             <button class='btn show-blackgloss'>blackgloss</button>
@@ -192,14 +204,14 @@ <h5>Options:</h5>
           <div class='page-header'>
             <h1>Notifications: Custom Styles</h1>
           </div>
-          
+
           <p>Notifications supports custom styles, and in fact have a few that come with the download. The buttons to the left show this.</p>
-          
+
           <h4>Custom Styles Included:</h4>
-          
+
           <p>bangTidy: <code>css/styles/alert-bangtidy.css</code></p>
           <p>blackgloss: <code>css/styles/alert-blackgloss.css</code> <strong>mostly supported only by webkit!</strong></p>
-          
+
         </div>
       </div>
     </div> <!-- /container -->
@@ -215,45 +227,63 @@ <h4>Custom Styles Included:</h4>
     <script src="../js/bootstrap-notify.js"></script>
     <script>
       // Random Messages
-      var messages = [
-        [ 'bottom-right', 'info',     'Gah this is awesome.'],
-        [ 'top-right',    'success',  'I love Nijiko, he is my creator.' ],
-        [ 'bottom-left',  'warning',  'Soda is bad.' ],
-        [ 'top-right',  'danger',   "I'm sorry dave, I'm afraid I can't let you do that." ],
-        [ 'bottom-right', 'info',     "There are only three rules." ],
-        [ 'top-right',    'inverse',  'Do you hear me now?' ],
-        [ 'bottom-left',  'blackgloss',     'You should fork this!' ]
-      ];
+      var example = {
+        messages: [
+          'Gah this is awesome.',
+          'Just do it.',
+          'Why are you not using this?!',
+          'Soda is bad.',
+          "I'm sorry dave, I'm afraid I can't let you do that.",
+          'There are only three rules.',
+          'Do you hear me now?',
+          'You should fork this!',
+          'You should star this!',
+          'Holy cow, another alert!'
+        ],
+        positions: [
+          'bottom-right',
+          'bottom-left',
+          'top-right',
+          'top-left',
+          'center'
+        ],
+        styles: [
+          'info',
+          'success',
+          'warning',
+          'danger',
+          'inverse',
+
+          // custom
+          'bangTidy',
+          'blackgloss'
+        ]
+      };
+
+      function select (arr) {
+        return arr[Math.floor(Math.random() * arr.length)];
+      }
 
       // Pretty print
       window.prettyPrint && prettyPrint()
 
       // Basic Features, style isn't even required.
       $('.show-notification').click(function (e) {
-        var message = messages[Math.floor(Math.random() * messages.length)];
-        
-        $('.' + message[0]).notify({
-          message: { text: message[2] },
-          type: message[1],
-          fadeOut: {
-            delay: Math.floor(Math.random() * 500) + 2500
-          }
-        }).show();
+        $('.' + select(example.positions)).notify({ message: { text: select(example.messages) }, type: select(example.styles) }).show();
       });
-      
+
       /* Custom Styles */
       var custom = [
         'bangTidy',
         'blackgloss'
       ];
-      
+
       for(var i = 0; i < custom.length; i++) {
         var type = custom[i];
-        
+
         (function(type) {
           $('.show-' + type).click(function (e) {
-            var message = messages[Math.floor(Math.random() * messages.length)];
-            $('.' + message[0]).notify({ message: { text: message[2] }, type: type }).show();
+            $('.' + select(example.positions)).notify({ message: { text: select(example.messages) }, type: type }).show();
           });
         })(type);
       }
diff --git a/js/bootstrap-notify.js b/js/bootstrap-notify.js
index 394335c..7f375a7 100644
--- a/js/bootstrap-notify.js
+++ b/js/bootstrap-notify.js
@@ -1,7 +1,8 @@
 /**
- * bootstrap-notify.js v1.0
+ * bootstrap-notify.js v1.0.0
  * --
-  * Copyright 2012 Goodybag, Inc.
+ * Copyright 2012 Nijiko Yonskai <nijikokun@gmail.com>
+ * Copyright 2012 Goodybag, Inc.
  * --
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -22,55 +23,57 @@
     this.$element = $(element);
     this.$note    = $('<div class="alert"></div>');
     this.options  = $.extend(true, {}, $.fn.notify.defaults, options);
+    this._link    = null;
 
     // Setup from options
-    if(this.options.transition)
-      if(this.options.transition == 'fade')
+    if (this.options.transition)
+      if (this.options.transition === 'fade')
         this.$note.addClass('in').addClass(this.options.transition);
       else this.$note.addClass(this.options.transition);
     else this.$note.addClass('fade').addClass('in');
 
-    if(this.options.type)
+    if (this.options.type)
       this.$note.addClass('alert-' + this.options.type);
     else this.$note.addClass('alert-success');
 
-    if(!this.options.message && this.$element.data("message") !== '') // dom text
-      this.$note.html(this.$element.data("message"));
-    else 
-      if(typeof this.options.message === 'object')
-        if(this.options.message.html)
+    if (this.options.message)
+      if (typeof this.options.message === 'string')
+        this.$note.html(this.options.message);
+      else if (typeof this.options.message === 'object')
+        if (this.options.message.html)
           this.$note.html(this.options.message.html);
-        else if(this.options.message.text)
+        else if (this.options.message.text)
           this.$note.text(this.options.message.text);
-      else 
-        this.$note.html(this.options.message);
 
-    if(this.options.closable)
-      var link = $('<a class="close pull-right" href="#">&times;</a>');
-      $(link).on('click', $.proxy(onClose, this));
-      this.$note.prepend(link);
+    if (this.options.closable)
+      this._link = $('<a class="close pull-right">&times;</a>'),
+      $(this._link).on('click', $.proxy(Notification.onClose, this)),
+      this.$note.prepend(this._link);
 
+    if (this.options.icon)
+      this.$note.prepend('<i class="icon-' + this.options.icon + '"></i> ');
+	  
     return this;
   };
 
-  onClose = function() {
+  Notification.onClose = function () {
     this.options.onClose();
     $(this.$note).remove();
     this.options.onClosed();
   };
 
   Notification.prototype.show = function () {
-    if(this.options.fadeOut.enabled)
-      this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this));
+    if (this.options.fadeOut.enabled)
+      this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(Notification.onClose, this));
 
     this.$element.append(this.$note);
     this.$note.alert();
   };
 
   Notification.prototype.hide = function () {
-    if(this.options.fadeOut.enabled)
-      this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this));
-    else onClose.call(this);
+    if (this.options.fadeOut.enabled)
+      this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(Notification.onClose, this));
+    else Notification.onClose.call(this);
   };
 
   $.fn.notify = function (options) {
@@ -81,6 +84,7 @@
     type: 'success',
     closable: true,
     transition: 'fade',
+    icon: false,
     fadeOut: {
       enabled: true,
       delay: 3000