diff --git a/rhodecode/templates/debug_style/alerts.html b/rhodecode/templates/debug_style/alerts.html
new file mode 100644
--- /dev/null
+++ b/rhodecode/templates/debug_style/alerts.html
@@ -0,0 +1,75 @@
+## -*- coding: utf-8 -*-
+<%inherit file="/debug_style/index.html"/>
+
+<%def name="breadcrumbs_links()">
+    ${h.link_to(_('Style'), h.url('debug_style_home'))}
+    &raquo;
+    ${c.active}
+</%def>
+
+
+<%def name="real_main()">
+<div class="box">
+    <div class="title">
+        ${self.breadcrumbs()}
+    </div>
+
+    <div class='sidebar-col-wrapper'>
+
+      ${self.sidebar()}
+
+      <div class="main-content">
+
+        <h3>Alert Messages</h3>
+        <p>
+          Alert messages are produced using the custom Polymer element
+          <code>rhodecode-toast</code> which is passed a message and level.
+        </p>
+  
+        <div class="bs-example">
+          <p> There are four types of alert levels:</p>
+          <div class="alert alert-success">
+            "success" is used when an action is completed as expected<br/>
+            ex. updated settings, deletion of a repo/user
+          </div>
+          <div class="alert alert-warning">
+            "warning" is for notification of impending issues<br/>
+            ex. a gist which was updated elsewhere during editing, disk out of space
+          </div>
+          <div class="alert alert-error">
+            "error" should be used for unexpected results and actions which
+            are not successful<br/>
+            ex. a form not submitted, repo creation failure
+          </div>
+          <div class="alert alert-info">
+            "info" is used for non-critical information<br/>
+            ex. notification of new messages, invitations to chat
+          </div>
+        </div>
+
+        <p><br/>
+          Whether singular or multiple, alerts are grouped into a dismissable
+          panel with a single "Close" button underneath.
+        </p>
+        <a class="btn btn-default" id="test-notification">Test Notification</a>
+  
+        <script type="text/javascript">
+          $('#test-notification').on('click', function(e){
+            var levels = ['info', 'error', 'warning', 'success'];
+            var level = levels[Math.floor(Math.random()*levels.length)];
+            var payload = {
+              message: {
+                message: 'This is a test ' +level+ ' notification.',
+                level: level,
+                force: true
+              }
+            };
+            $.Topic('/notifications').publish(payload);
+          });
+        </script>
+
+      </div>
+      </div>  <!-- .main-content  -->
+    </div>
+  </div> <!-- .box -->
+</%def>
diff --git a/rhodecode/templates/debug_style/index.html b/rhodecode/templates/debug_style/index.html
--- a/rhodecode/templates/debug_style/index.html
+++ b/rhodecode/templates/debug_style/index.html
@@ -56,6 +56,7 @@
           <li class="${'active' if c.active=='forms' else ''}"><a href="${h.url('debug_style_template', t_path='forms.html')}">${_('Forms')}</a></li>
           <li class="${'active' if c.active=='buttons' else ''}"><a href="${h.url('debug_style_template', t_path='buttons.html')}">${_('Buttons')}</a></li>
           <li class="${'active' if c.active=='labels' else ''}"><a href="${h.url('debug_style_template', t_path='labels.html')}">${_('Labels')}</a></li>
+          <li class="${'active' if c.active=='alerts' else ''}"><a href="${h.url('debug_style_template', t_path='alerts.html')}">${_('Alerts')}</a></li>
           <li class="${'active' if c.active=='tables' else ''}"><a href="${h.url('debug_style_template', t_path='tables.html')}">${_('Tables')}</a></li>
           <li class="${'active' if c.active=='tables-wide' else ''}"><a href="${h.url('debug_style_template', t_path='tables-wide.html')}">${_('Tables wide')}</a></li>
           <li class="${'active' if c.active=='collapsable-content' else ''}"><a href="${h.url('debug_style_template', t_path='collapsable-content.html')}">${_('Collapsable Content')}</a></li>
diff --git a/rhodecode/templates/debug_style/labels.html b/rhodecode/templates/debug_style/labels.html
--- a/rhodecode/templates/debug_style/labels.html
+++ b/rhodecode/templates/debug_style/labels.html
@@ -19,65 +19,45 @@
       ${self.sidebar()}
 
       <div class="main-content">
-
-        <h2>Label</h2>
-
+        <h2>Labels</h2>
+  
         <h3>Labels used for tags, branches and bookmarks</h3>
+  
+        <div class="bs-example">
+          <ul class="metatag-list">
+            <li>
+              <span class="tagtag tag" title="Tag tip">
+                <a href="/fake-link"><i class="icon-tag"></i>tip</a>
+              </span>
+            </li>
+            <li>
+              <span class="branchtag tag" title="Branch default">
+               <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
+              </span>
+            </li>
+            <li>
+              <span class="bookmarktag tag" title="Bookmark example">
+               <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
+              </span>
+            </li>
+          </ul>
 
-        <ul>
-          <li>
-            <span class="tagtag tag" title="Tag tip">
-              <a href="/fake-link"><i class="icon-tag"></i>tip</a>
-            </span>
-          </li>
-          <li>
-            <span class="branchtag tag" title="Branch default">
-             <a href="/fake-link"><i class="icon-code-fork"></i>default</a>
-            </span>
-          </li>
-          <li>
-            <span class="bookmarktag tag" title="Bookmark example">
-             <a href="/fake-link"><i class="icon-bookmark"></i>example</a>
-            </span>
-          </li>
-        </ul>
+        </div>
 
         <h3>Labels used in tables</h3>
-
-        <ul class="metatag-list">
-            <li>[default] <span class="metatag" tag="default">default</span></li>
-            <li>[featured] <span class="metatag" tag="featured">featured</span></li>
-            <li>[stale] <span class="metatag" tag="stale">stale</span></li>
-            <li>[dead] <span class="metatag" tag="dead">dead</span></li>
-            <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
-            <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
-            <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
-            <li>[recommends =&gt; Repo] <span class="metatag" tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
-            <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
-        </ul>
-
-        <h3>Flash Messages</h3>
-          <div class="flash_msg">
-
-            <div class="alert alert-dismissable alert-success">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert-warning">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert-error">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-            <div class="alert alert-dismissable alert">
-              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-              Updated VCS settings
-            </div>
-
-
-</div>
+        <div class="bs-example">
+          <ul class="metatag-list">
+              <li>[default] <span class="metatag" tag="default">default</span></li>
+              <li>[featured] <span class="metatag" tag="featured">featured</span></li>
+              <li>[stale] <span class="metatag" tag="stale">stale</span></li>
+              <li>[dead] <span class="metatag" tag="dead">dead</span></li>
+              <li>[lang =&gt; lang] <span class="metatag" tag="lang">lang</span></li>
+              <li>[license =&gt; License] <span class="metatag" tag="license"><a href="http://www.opensource.org/licenses/License">License</a></span></li>
+              <li>[requires =&gt; Repo] <span class="metatag" tag="requires">requires =&gt; <a href="#">Repo</a></span></li>
+              <li>[recommends =&gt; Repo] <span class="metatag" tag="recommends">recommends =&gt; <a href="#">Repo</a></span></li>
+              <li>[see =&gt; URI] <span class="metatag" tag="see">see =&gt; <a href="#">URI</a></span></li>
+          </ul>
+        </div>
       </div>  <!-- .main-content  -->
     </div>
   </div> <!-- .box -->