diff --git a/.editorconfig b/.editorconfig
index d41b743d8..24c3d45f8 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,8 +10,8 @@ indent_style=tab
 tab_width=3
 
 [*.html]
-indent_style=space
 indent_size=3
+insert_final_newline=false
 
 [*.md]
 indent_style=tab
@@ -20,12 +20,3 @@ tab_width=3
 [*.js.map]
 indent_style=tab
 indent_size=3
-
-[{*.css,*.scss}]
-indent_style=space
-indent_size=2
-insert_final_newline = true
-
-[{*.yml,*.yaml}]
-indent_style=space
-indent_size=2
diff --git a/.github/no-response.yml b/.github/no-response.yml
new file mode 100644
index 000000000..27ccae058
--- /dev/null
+++ b/.github/no-response.yml
@@ -0,0 +1,10 @@
+# Configuration for probot-no-response - https://github.com/probot/no-response
+
+daysUntilClose: 28
+
+closeComment: >
+  This issue has been automatically closed because there has been no response
+  to our request for more information from the original author. With only the
+  information that is currently in the issue, we don't have enough information
+  to take action. Please reach out if you have or find the answers we need so
+  that we can investigate further.
diff --git a/README.md b/README.md
index 798e5260c..03302542b 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
 
 <strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
 
-![Tabler preview](https://tabler.github.io/img/dashboard-preview.png)
+![Tabler preview](https://raw.githubusercontent.com/tabler/tabler/dev/static/img/tabler-preview.png)
 
 ## Status
 
diff --git a/js/tabler-charts.js b/js/tabler-charts.js
index 8d9a34bd1..1cada1a26 100644
--- a/js/tabler-charts.js
+++ b/js/tabler-charts.js
@@ -84,6 +84,9 @@ if (window.Apex) {
         dataLabels: {
           minAngleToShowLabel: 10,
         },
+        donut: {
+          size: '80%'
+        }
       },
     },
 
diff --git a/package.json b/package.json
index 51b4fb91a..a20f7af26 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,10 @@
   "bugs": {
     "url": "https://github.com/tabler/tabler/issues"
   },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/codecalm"
+  },
   "engines": {
     "node": ">=10"
   },
@@ -69,19 +73,19 @@
     "bundlesize": "0.18.0",
     "clean-css-cli": "4.3.0",
     "cross-env": "6.0.3",
-    "eslint": "6.7.1",
+    "eslint": "6.7.2",
     "eslint-config-xo": "0.27.2",
     "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-unicorn": "13.0.0",
+    "eslint-plugin-unicorn": "14.0.1",
     "glob": "^7.1.6",
-    "http-server": "0.11.1",
+    "http-server": "0.12.0",
     "icon-font-generator": "2.1.10",
     "node-sass": "4.13.0",
     "node-sass-package-importer": "5.3.2",
     "nodemon": "^2.0.1",
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
-    "rollup": "1.27.5",
+    "rollup": "1.27.7",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.1",
     "rollup-plugin-commonjs": "10.1.0",
@@ -91,7 +95,7 @@
     "stylelint": "12.0.0",
     "stylelint-config-twbs-bootstrap": "1.0.0",
     "svgo": "1.3.2",
-    "terser": "4.4.0",
+    "terser": "4.4.1",
     "yaml": "1.7.2"
   },
   "dependencies": {
diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index dda7bb82e..b52d9efd8 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -1,5 +1,43 @@
+total-sales:
+  type: donut
+  demo: true
+  sparkline: true
+  hide-legend: true
+  name: Total sales
+  series:
+    - name: Direct
+      color: blue
+      data: 44
+    - name: Affilliate
+      color: green
+      data: 55
+    - name: Sponsored
+      color: red
+      data: 35
+    - name: E-mail
+      color: yellow
+      data: 12
+
+campaigns:
+  name: Campaigns
+  demo: true
+  type: radialBar
+  sparkline: true
+  hide-legend: true
+  series:
+    - name: Total Sent
+      color: blue
+      data: 44
+    - name: Reached
+      color: blue-light
+      data: 36
+    - name: Opened
+      color: blue-lighten
+      data: 18
+
 tasks:
   name: Tasks
+  demo: true
   type: line
   categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
   groups: [1, 2, 3]
@@ -36,7 +74,7 @@ development-activity:
 
 line:
   name: Employment Growth
-  display: true
+  demo: true
   type: line
   show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']
@@ -53,7 +91,7 @@ line:
 
 line-stroke:
   name: Line chart
-  display: true
+  demo: true
   type: line
   stroke-curve: straight
   hide-legend: true
@@ -72,7 +110,7 @@ line-stroke:
 
 stepline:
   name: Stepline
-  display: true
+  demo: true
   type: line
   hide-legend: true
   stroke-curve: stepline
@@ -84,7 +122,7 @@ stepline:
 
 temperature:
   name: Monthly Average Temperature
-  display: true
+  demo: true
   type: line
   show-labels: true
   show-data-labels: true
@@ -103,7 +141,7 @@ temperature:
 
 area:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -118,7 +156,7 @@ area:
 
 area-spline:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   spline: true
   hide-legend: true
@@ -134,12 +172,11 @@ area-spline:
 
 area-spline-stacked:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   spline: true
   hide-legend: true
   stacked: true
-#  groups: [1, 2]
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -152,7 +189,7 @@ area-spline-stacked:
 
 spline:
   name: Wind speed during two days
-  display: true
+  demo: true
   type: line
   spline: true
   show-labels: true
@@ -169,7 +206,7 @@ spline:
 
 spline-rotated:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: line
   spline: true
   rotated: true
@@ -186,7 +223,7 @@ spline-rotated:
 
 bar:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -200,7 +237,7 @@ bar:
 
 bar-rotated:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   rotated: true
   hide-legend: true
@@ -216,10 +253,9 @@ bar-rotated:
 
 bar-stacked:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   stacked: true
-#  groups: [1, 2]
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
@@ -233,7 +269,7 @@ bar-stacked:
 
 pie:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: pie
   hide-legend: true
   show-data-labels: true
@@ -241,35 +277,35 @@ pie:
   series:
     - name: A
       color: blue-darker
-      data: [63]
+      data: 63
     - name: B
       color: blue
-      data: [44]
+      data: 44
     - name: C
       color: blue-light
-      data: [12]
+      data: 12
     - name: D
       color: blue-lighter
-      data: [14]
+      data: 14
 
 donut:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: donut
   sparkline: true
   hide-legend: true
   series:
     - name: Maximum
       color: green
-      data: [63]
+      data: 63
     - name: Minimum
       color: green-light
-      data: [37]
+      data: 37
 
 
 scatter:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: scatter
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -284,7 +320,7 @@ scatter:
 
 combination:
   name: Combination chart
-  display: true
+  demo: true
   type: bar
   types:
     2: 'line'
@@ -376,14 +412,13 @@ devices:
   type: donut
   sparkline: true
   hide-legend: true
-  sparkline: true
   series:
     - name: a
       color: blue-dark
-      data: [23]
+      data: 23
     - name: b
       color: blue
-      data: [54]
+      data: 54
     - name: c
       color: blue-light
-      data: [34]
+      data: 34
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index d974fd63c..966329320 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
 {% include ui/avatar.html person-id=3 %}
 {% endexample %}
 
+### Avatar image
+
+Set an image as the background.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=1 %}
+{% include ui/avatar.html person-id=3 %}
+{% include ui/avatar.html person-id=4 %}
+{% endexample %}
+
+### Initials
+
+You can easily use initials instead of images.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" %}
+{% include ui/avatar.html placeholder="CD" %}
+{% include ui/avatar.html placeholder="EF" %}
+{% include ui/avatar.html placeholder="GH" %}
+{% include ui/avatar.html placeholder="IJ" %}
+{% endexample %}
+
+### Avatar icons
+
+You can also use icons in avatars.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html icon="user" %}
+{% include ui/avatar.html icon="plus" %}
+{% include ui/avatar.html icon="user-plus" %}
+{% endexample %}
+
+### Avatar initials color
+
+Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" color="green" %}
+{% include ui/avatar.html placeholder="CD" color="red" %}
+{% include ui/avatar.html placeholder="EF" color="yellow" %}
+{% include ui/avatar.html placeholder="GH" color="blue" %}
+{% include ui/avatar.html placeholder="IJ" color="purple" %}
+{% endexample %}
+
 ### Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endexample %}
 
-### Initials
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html placeholder="AB" size="xl" %}
-{% include ui/avatar.html placeholder="CD" size="lg" %}
-{% include ui/avatar.html placeholder="EF" size="md" %}
-{% include ui/avatar.html placeholder="GH" %}
-{% include ui/avatar.html placeholder="IJ" size="sm" %}
-{% endexample %}
-
-
-### Avatar initials color
-
-[See more]({% docs_url colors %})
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html placeholder="AB" color="green" %}
-{% include ui/avatar.html placeholder="CD" color="red" %}
-{% include ui/avatar.html placeholder="EF" color="yellow" %}
-{% include ui/avatar.html placeholder="GH" color="blue" %}
-{% include ui/avatar.html placeholder="IJ" color="purple" %}
-{% endexample %}
-
-### Avatar initials icons
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html icon="user" %}
-{% include ui/avatar.html icon="plus" %}
-{% include ui/avatar.html icon="user-plus" %}
-{% endexample %}
-
 ### Avatars list
 
+You can easily create a list of avatars.
+
 {% example %}
 {% include ui/avatar-list.html %}
 {% endexample %}
 
+### Stacked list
+
+Make the list stack when it reaches a certain length.
+
 {% example %}
 <div class="avatar-list avatar-list-stacked">
   {% for person in site.data.people limit: 5 offset: 30 %}
@@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
   {% endfor %}
   <span class="avatar" element="a">+8</span>
 </div>
-{% endexample %}
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_docs/charts.md b/pages/_docs/charts.md
index dc254571f..31a879a6e 100644
--- a/pages/_docs/charts.md
+++ b/pages/_docs/charts.md
@@ -18,7 +18,7 @@ menu: docs.charts
 			<div id="{{ key }}" style="height: 16rem"></div>
 		</div>
 	</div>
-	{% include ui/chart.html id=key chart-id=data %}
+	{% include ui/chart.html id=key chart-id=data show-scripts=true %}
 {% endexample %}
 {% endif %}
 {% endfor %}
diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md
index 09e4fbd79..43394535c 100644
--- a/pages/_docs/flags.md
+++ b/pages/_docs/flags.md
@@ -15,6 +15,8 @@ done: true
 
 ### Flag sizes
 
+Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
+
 {% example html %}
 {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
 {% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,8 @@ done: true
 
 ### Types
 
+To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
+
 <table>
 {% for flag in site.data.flags %}
 <tr>
diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md
index 5fe18237a..5067c3ae5 100644
--- a/pages/_docs/ribbons.md
+++ b/pages/_docs/ribbons.md
@@ -12,24 +12,39 @@ new: true
 
 ### Ribbon position
 
+You can easily change the position of a ribbon by adding a class to the element.
+
+    `ribbon-top` - moves it to the top
+    `ribbon-right` - moves it to the right
+    `ribbon-bottom` - moves it to the bottom
+    `ribbon-left` - moves it to the lefg
+
+You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html top=true left=true %}
 {% endexample %}
 
 ### Ribbon color
 
+Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html color="red" %}
 {% endexample %}
 
 ### Ribbon text
 
+Set your own text in a ribbon.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html color="green" text="-50%" %}
 {% endexample %}
 
 ### Ribbon style
 
+Change the style of a ribbon. 
+
 {% example html columns=1 %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
 {% endexample %}
diff --git a/pages/_includes/cards/charts/active-users.html b/pages/_includes/cards/charts/active-users.html
index 8588f0427..41b987ed1 100644
--- a/pages/_includes/cards/charts/active-users.html
+++ b/pages/_includes/cards/charts/active-users.html
@@ -13,6 +13,6 @@
          </div>
       </div>
 
-      {% include ui/chart.html chart-id="active-users" class="chart-sm" %}
+      {% include ui/chart.html chart-id="active-users" size="sm" %}
    </div>
 </div>
diff --git a/pages/_includes/cards/charts/card.html b/pages/_includes/cards/charts/card.html
deleted file mode 100644
index 65610037c..000000000
--- a/pages/_includes/cards/charts/card.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% assign data = site.data.charts[include.chart-id] %}
-{% assign height = include.height | default: 10 %}
-<div class="card">
-   <div class="card-body">
-      {% if include.title %}
-         <h3 class="card-title">{{ include.title }}</h3>
-      {% endif %}
-      {% include ui/chart.html height=height chart-id=include.chart-id %}
-   </div>
-</div>
diff --git a/pages/_includes/cards/charts/new-clients.html b/pages/_includes/cards/charts/new-clients.html
index 444267b23..8bee88329 100644
--- a/pages/_includes/cards/charts/new-clients.html
+++ b/pages/_includes/cards/charts/new-clients.html
@@ -13,6 +13,6 @@
          </div>
       </div>
 
-      {% include ui/chart.html chart-id="new-clients" class="chart-sm" %}
+      {% include ui/chart.html chart-id="new-clients" size="sm" %}
    </div>
 </div>
diff --git a/pages/_includes/cards/charts/revenue.html b/pages/_includes/cards/charts/revenue.html
index 00f2f8a1b..fa41c8b22 100644
--- a/pages/_includes/cards/charts/revenue.html
+++ b/pages/_includes/cards/charts/revenue.html
@@ -13,5 +13,5 @@
          </div>
       </div>
    </div>
-   {% include ui/chart.html chart-id="revenue-bg" class="card-chart" %}
+   {% include ui/chart.html chart-id="revenue-bg" size="sm" %}
 </div>
diff --git a/pages/_includes/cards/charts/total-sales.html b/pages/_includes/cards/charts/total-sales.html
new file mode 100644
index 000000000..ae44620a0
--- /dev/null
+++ b/pages/_includes/cards/charts/total-sales.html
@@ -0,0 +1,9 @@
+<div class="card">
+   <div class="card-body">
+      {% include ui/card-dropdown.html %}
+      <h3 class="card-title">Total sales</h3>
+
+      {% include ui/chart.html chart-id="total-sales" height=15 %}
+      {% include ui/chart.html chart-id="campaigns" height=15 %}
+   </div>
+</div>
diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html
index 689040b24..91c4be70f 100644
--- a/pages/_includes/cards/invoices.html
+++ b/pages/_includes/cards/invoices.html
@@ -3,7 +3,7 @@
       <h3 class="card-title">Invoices</h3>
    </div>
    <div class="table-responsive">
-      <table class="table card-table table-vcenter text-nowrap datatable">
+      <table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
          <thead>
             <tr>
                <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html
index 64d3e084b..b52493991 100644
--- a/pages/_includes/layout/homepage.html
+++ b/pages/_includes/layout/homepage.html
@@ -43,10 +43,10 @@
    <div class="col-lg-6">
       <div class="row row-deck">
          <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="temperature" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
          </div>
          <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="donut" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
          </div>
       </div>
    </div>
diff --git a/pages/_includes/ui/card-dropdown.html b/pages/_includes/ui/card-dropdown.html
new file mode 100644
index 000000000..14a61459f
--- /dev/null
+++ b/pages/_includes/ui/card-dropdown.html
@@ -0,0 +1,12 @@
+{% assign menu = include.menu | default: 'Import,Export,Download,Another action' | split: ',' %}
+{% assign icon = include.icon | default: 'more-horizontal' %}
+<div class="dropdown float-right">
+   <a href="#" class="card-drop" data-toggle="dropdown" aria-expanded="false">
+      {% include_cached ui/icon.html icon=icon %}
+   </a>
+   <div class="dropdown-menu dropdown-menu-right">
+      {% for item in menu %}
+      <a href="#" class="dropdown-item">{{ item }}</a>
+      {% endfor %}
+   </div>
+</div>
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html
index 34c4165b0..93965d516 100644
--- a/pages/_includes/ui/chart.html
+++ b/pages/_includes/ui/chart.html
@@ -1,32 +1,38 @@
 {% assign data = site.data.charts[include.chart-id] %}
 {% assign id = include.id | default: include.chart-id %}
-{% assign height = include.height %}
+{% assign height = include.height | default: 10 %}
+{% assign class = include.class | default: '' %}
+
+{% if include['size'] == 'sm' %}
+   {% assign class = class | append: ' chart-sm' | strip %}
+   {% assign height = 2.5 %}
+{% endif %}
 
 {% if data %}
-<div id="chart-{{ id }}"{% if include.class %} class="{{ include.class }}"{% endif %}{% if height %} style="height: {% if height == '100%' %}100%{% else %}{{ height }}rem{% endif %}"{% endif %}></div>
-{% capture_global scripts %}
+<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
+
+{% capture script %}
 <script>
-document.addEventListener("DOMContentLoaded", function(event) {
-   {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
-   
-   var chartEl = document.getElementById('chart-{{ id }}');
-   window.ApexCharts && chartEl && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(chartEl, {
-      chart: {
-         type: '{{ data.type }}',
-         height: chartEl.offsetHeight,
-         {% if data.sparkline %}
-         sparkline: {
-            enabled: true
-         },
-         {% endif %}
-         {% if data.stacked %}
-         stacked: true,
-         {% endif %}
+   document.addEventListener("DOMContentLoaded", function(event) {
+      {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
+
+      window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
+         chart: {
+            type: '{{ data.type }}',
+            height: {{ height | times: 16 }},
+      {% if data.sparkline %}
+      sparkline: {
+         enabled: true
+      },
+      {% endif %}
+      {% if data.stacked %}
+      stacked: true,
+      {% endif %}
       },
 
       {% if data.type == 'area' %}
       fill: {
-        opacity: .16
+         opacity: .16
       },
       {% endif %}
 
@@ -49,22 +55,18 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
 
       {% if data.series %}
-      {% if data.type == 'pie' or data.type == 'donut' %}
-      series: [{% for serie in data.series %}{{ serie.data[0] }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+      {% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
+      series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
+      labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
+
       {% else %}
       series: [{% for serie in data.series %}{
          name: '{{ serie.name }}',
-         data: [{{ serie.data | join: ', '}}]
+            data: [{{ serie.data | join: ', '}}]
       }{% unless forloop.last %},{% endunless %}{% endfor %}],
       {% endif %}
       {% endif %}
 
-      {% if data.type == 'pie' or data.type == 'donut' %}
-      pie: {
-         height: chartEl.offsetHeight
-      },
-      {% endif %}
-
       {% if data.show-grid %}
       grid: {
          show: true,
@@ -103,7 +105,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
       {% endif %}
 
       {% if data.series %}
-      colors: [ {% for serie in data.series %}
+      colors: [
+         {% for serie in data.series %}
          {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
       ],
       {% endif %}
@@ -132,7 +135,16 @@ document.addEventListener("DOMContentLoaded", function(event) {
       },
       {% endif %}
    })).render();
-});
+   });
 </script>
-{% endcapture_global %}
+{% endcapture %}
+
+{% if include.show-scripts %}
+   {{ script }}
+{% else %}
+   {% capture_global scripts %}
+      {{ script }}
+   {% endcapture_global %}
+{% endif %}
+
 {% endif %}
diff --git a/pages/_includes/ui/map.html b/pages/_includes/ui/map.html
index cf82165a1..4702b4db8 100644
--- a/pages/_includes/ui/map.html
+++ b/pages/_includes/ui/map.html
@@ -5,7 +5,7 @@
 
 {% if data %}
 <div id="map-{{ id }}" style="height: {{ height }}rem"></div>
-{% capture_global scripts %}
+{% capture script %}
 <script>
 	{% if jekyll.environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
 
@@ -29,5 +29,13 @@
 		});
 	});
 </script>
-{% endcapture_global %}
+{% endcapture %}
+
+{% if include.show-scripts %}
+   {{ script }}
+{% else %}
+   {% capture_global scripts %}
+      {{ script }}
+   {% endcapture_global %}
+{% endif %}
 {% endif %}
diff --git a/pages/_includes/ui/trending.html b/pages/_includes/ui/trending.html
index 4dde92488..6da49b830 100644
--- a/pages/_includes/ui/trending.html
+++ b/pages/_includes/ui/trending.html
@@ -11,5 +11,5 @@
 {% endif %}
 
 <span class="text-{{ color }} d-inline-flex align-items-center leading-none{% if include.class %} {{ include.class }}{% endif %}">
-   {{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" %}
+   {{ value }}% {% include_cached ui/icon.html icon=icon class="icon-thin" class="ml-1" %}
 </span>
diff --git a/pages/charts.html b/pages/charts.html
index 1f26188a9..d04d73415 100644
--- a/pages/charts.html
+++ b/pages/charts.html
@@ -1,16 +1,25 @@
 ---
 title: Charts
+page-title: Charts
 menu: charts
 ---
 
 <div class="row">
    {% for chart in site.data.charts %}
-   {% if chart[1].display %}
-   {% assign chart-name = chart[0] %}
+   {% if chart[1].demo %}
+   {% assign chart-id = chart[0] %}
    <div class="col-lg-6 col-xl-4">
-      {% include cards/charts/card.html chart-id=chart-name %}
+      <div class="card">
+         {% if chart[1].name %}
+         <div class="card-header">
+            <h3 class="card-title">{{ chart[1].name }}</h3>
+         </div>
+         {% endif %}
+         <div class="card-body">
+            {% include ui/chart.html chart-id=chart-id height=15 %}
+         </div>
+      </div>
    </div>
    {% endif %}
    {% endfor %}
-
 </div>
diff --git a/pages/tmp.html b/pages/tmp.html
index b436148d2..5441c9a54 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -1,6 +1,14 @@
 ---
 ---
 
+<div class="row">
+   <div class="col-4">
+      {% include cards/charts/total-sales.html %}
+   </div>
+   <div class="col-8">
+
+   </div>
+</div>
 <div class="row">
    <div class="col-md-6">
       {% include cards/user-info.html %}
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 12375da31..a2f3d03f4 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -89,7 +89,7 @@
 .card-cover {
   position: relative;
   padding: $card-spacer-y $card-spacer-x;
-  background: #666 no-repeat center/cover;
+  background: #666666 no-repeat center/cover;
 
   &::before {
     position: absolute;
@@ -198,6 +198,17 @@ Card optinos
   color: $text-muted;
 }
 
+.card-drop {
+  line-height: 1;
+  color: $text-muted;
+
+  .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke-width: 1;
+  }
+}
+
 /**
 Card status
  */
@@ -275,7 +286,7 @@ Card code
 
   pre {
     margin: 0;
-    color: #fff;
+    color: #ffffff;
     text-shadow: none;
     background: transparent;
   }
@@ -304,7 +315,7 @@ Card profile
   max-width: 6rem;
   margin-top: -5rem;
   margin-bottom: 1rem;
-  border: 3px solid #fff;
+  border: 3px solid #ffffff;
   border-radius: 100%;
   box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
 }
diff --git a/static/img/sample.jpg b/static/img/sample.jpg
deleted file mode 100644
index 2a5ce3792..000000000
Binary files a/static/img/sample.jpg and /dev/null differ
diff --git a/static/img/tabler-preview.png b/static/img/tabler-preview.png
new file mode 100644
index 000000000..daa76f81b
Binary files /dev/null and b/static/img/tabler-preview.png differ