diff --git a/pages/_data/docs.yml b/pages/_data/docs.yml
index 114812776..9e1d977ff 100644
--- a/pages/_data/docs.yml
+++ b/pages/_data/docs.yml
@@ -6,6 +6,7 @@
 - page: buttons
 - page: cards
 - page: carousel
+- page: charts
 - page: divider
 - page: flags
 - page: form-elements
diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md
index e81bd611e..0df07b3e5 100644
--- a/pages/_docs/alerts.md
+++ b/pages/_docs/alerts.md
@@ -31,7 +31,7 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 {% endexample %}
 
 
-## Closing Alerts
+## Dismissible Alerts
 
 {% example %}
 {% for variant in site.variants %}
@@ -49,6 +49,27 @@ Add the `alert-link` class to any links inside the alert box to create "matching
 	{% capture variant-text %}
 		This is a {{ variant.name }} alert — check it out!
 	{% endcapture %}
-	{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text close=true %}
+	{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text %}
 {% endfor %}
 {% endexample %}
+
+## Alert with avatar
+{% assign person = site.data.people[1] %}
+{% example %}
+{% for variant in site.variants %}
+	{% capture variant-text %}
+		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+	{% endcapture %}
+	{% include ui/alert.html type=variant.name text=variant-text avatar=true person=person %}
+{% endfor %}
+{% endexample %}
+
+## Alert with buttons
+{% example %}
+ {% capture variant-text %}
+ 	<h3>Some Title</h3>
+ 	<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+ {% endcapture %}
+ {% include ui/alert.html type='success' close=true text=variant-text buttons=true %}
+{% endexample %}
+
diff --git a/pages/_docs/charts.md b/pages/_docs/charts.md
new file mode 100644
index 000000000..fd473069e
--- /dev/null
+++ b/pages/_docs/charts.md
@@ -0,0 +1,24 @@
+---
+title: Charts
+menu: docs.charts
+---
+
+### c3.js charts 
+
+{% for chart in site.data.charts %}
+{% if chart[1].display %}
+{% example html %}
+{% assign data = chart[0] %}
+{% assign key = 'chart-' | append: data %}
+	<div class="card">
+		<div class="card-header">
+			<h3 class="card-title">{{ chart[1].name }} {{ chart[0] }}</h3>
+		</div>
+		<div class="card-body">
+			<div id="{{ key }}" style="height: 16rem"></div>
+		</div>
+	</div>
+	{% include js/charts.html id=key chart-id=data %}
+{% endexample %}
+{% endif %}
+{% endfor %}
diff --git a/pages/_includes/ui/alert.html b/pages/_includes/ui/alert.html
index ff2d6e60e..4dd1c28ab 100644
--- a/pages/_includes/ui/alert.html
+++ b/pages/_includes/ui/alert.html
@@ -1,4 +1,13 @@
-<div class="alert alert-{{ include.type | default: 'primary'}}" role="alert">
+{% assign person = include.person %}
+<div class="alert alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
+   {% if include.avatar %}{% include ui/avatar.html person=person  %}{% endif %}
+   {% if include.icon %}{% include ui/icon.html icon=include.icon class="mr-1" %}{% endif %} {{ include.text | default:
+   "This is a custom alert box!" }}
+   {% if include.buttons %}
+   <div class="btn-list">
+      <a href="#" class="btn btn-success">Save changes</a>
+      <a href="#" class="btn btn-secondary">Cancel</a>
+   </div>
+   {% endif %}
    {% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
-	{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {{ include.text | default: "This is a custom alert box!" }}
 </div>
diff --git a/pages/timeline.html b/pages/timeline.html
index 0317435d0..facb5ce03 100644
--- a/pages/timeline.html
+++ b/pages/timeline.html
@@ -1,6 +1,7 @@
 ---
 title: Timeline
 page-title: Timeline
+done: true
 ---
 
 <div class="row">
diff --git a/scss/tabler.scss b/scss/tabler.scss
index bd35acaf7..19505557c 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -28,6 +28,7 @@
 @import "ui/buttons";
 @import "ui/cards";
 @import "ui/avatars";
+@import "ui/alerts";
 @import "ui/inputs";
 @import "ui/inputs.custom";
 @import "ui/media";
diff --git a/scss/ui/_alerts.scss b/scss/ui/_alerts.scss
new file mode 100644
index 000000000..8ac096405
--- /dev/null
+++ b/scss/ui/_alerts.scss
@@ -0,0 +1,9 @@
+.alert-avatar {
+  padding-left: 3.75rem;
+
+  .avatar {
+    position: absolute;
+    top: .5rem;
+    left: .75rem;
+  }
+}