diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index 02d4b907b..098023911 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -1,7 +1,21 @@
+mentions:
+  stacked: true
+  datetime: true
+  show-x: true
+  series:
+    - name: Web
+      data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
+      color: blue
+    - name: Social
+      data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
+      color: blue-300
+    - name: Other
+      data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
+      color: green-200
+
 completion-tasks:
   demo: true
-  type: bar
-  days-labels-count: 7
+  datetime: true
   debug: true
   series:
     - name: Tasks completion
@@ -43,6 +57,8 @@ completion-tasks7:
 
 completion-tasks8:
   demo: true
+  datetime: true
+  type: bar
   series:
     - data: [155, 65, 465, 265, 225, 325, 80]
     - data: [113, 42, 65, 54, 76, 65, 35]
@@ -81,14 +97,14 @@ total-sales:
       color: blue
       data: 44
     - name: Affilliate
-      color: green
+      color: blue-300
       data: 55
-    - name: Sponsored
-      color: red
-      data: 35
     - name: E-mail
-      color: yellow
+      color: green-200
       data: 12
+    - name: Other
+      color: gray-300
+      data: 2
 
 campaigns:
   type: radialBar
@@ -132,7 +148,7 @@ development-activity:
   remove-padding: true
   legend-position: 'top'
   sparkline: true
-  days-labels-count: 30
+  datetime: true
   series:
     - name: 'Purchases'
       color: blue
@@ -140,7 +156,6 @@ development-activity:
 
 line:
   type: line
-  show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']
   series:
     - name: Development
@@ -157,7 +172,6 @@ line-stroke:
   demo: true
   type: line
   stroke-curve: straight
-  show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
   series:
     - name: Development
@@ -174,7 +188,6 @@ stepline:
   demo: true
   type: line
   stroke-curve: stepline
-  show-grid: true
   series:
     - name: Development
       color: orange
@@ -186,7 +199,6 @@ temperature:
   show-labels: true
   show-data-labels: true
   show-markers: true
-  show-grid: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   series:
     - name: Tokyo
@@ -320,7 +332,7 @@ combination:
 
 revenue-bg:
   type: area
-  days-labels-count: 30
+  datetime: true
   sparkline: true
   series:
     - name: Profits
@@ -328,7 +340,7 @@ revenue-bg:
 
 new-clients:
   type: line
-  days-labels-count: 30
+  datetime: true
   sparkline: true
   stroke-width: [2, 1]
   stroke-dash: [0, 3]
@@ -342,7 +354,7 @@ new-clients:
 
 active-users:
   type: bar
-  days-labels-count: 30
+  datetime: true
   sparkline: true
   series:
     - name: Profits
diff --git a/pages/_includes/cards/charts/active-users.html b/pages/_includes/cards/charts/active-users.html
index 41b987ed1..2fdd02551 100644
--- a/pages/_includes/cards/charts/active-users.html
+++ b/pages/_includes/cards/charts/active-users.html
@@ -1,7 +1,7 @@
 <div class="card">
    <div class="card-body">
-      <div class="d-flex">
-         <div>Active users</div>
+      <div class="d-flex align-items-center">
+         <div class="subheader">Active users</div>
          <div class="ml-auto">
             {% include parts/dropdown/days.html %}
          </div>
diff --git a/pages/_includes/cards/charts/new-clients.html b/pages/_includes/cards/charts/new-clients.html
index 8bee88329..a9d580670 100644
--- a/pages/_includes/cards/charts/new-clients.html
+++ b/pages/_includes/cards/charts/new-clients.html
@@ -1,7 +1,7 @@
 <div class="card">
    <div class="card-body">
-      <div class="d-flex">
-         <div>New clients</div>
+      <div class="d-flex align-items-center">
+         <div class="subheader">New clients</div>
          <div class="ml-auto">
             {% include parts/dropdown/days.html %}
          </div>
diff --git a/pages/_includes/cards/charts/revenue.html b/pages/_includes/cards/charts/revenue.html
index fa41c8b22..7e170d50f 100644
--- a/pages/_includes/cards/charts/revenue.html
+++ b/pages/_includes/cards/charts/revenue.html
@@ -1,7 +1,7 @@
 <div class="card">
    <div class="card-body">
-      <div class="d-flex">
-         <div>Revenue</div>
+      <div class="d-flex align-items-center">
+         <div class="subheader">Revenue</div>
          <div class="ml-auto">
             {% include parts/dropdown/days.html %}
          </div>
diff --git a/pages/_includes/cards/charts/sales.html b/pages/_includes/cards/charts/sales.html
index 07301d02a..92e63783d 100644
--- a/pages/_includes/cards/charts/sales.html
+++ b/pages/_includes/cards/charts/sales.html
@@ -1,7 +1,7 @@
 <div class="card">
    <div class="card-body">
-      <div class="d-flex">
-         <div>Sales</div>
+      <div class="d-flex align-items-center">
+         <div class="subheader">Sales</div>
          <div class="ml-auto">
             {% include parts/dropdown/days.html %}
          </div>
diff --git a/pages/_includes/cards/map.html b/pages/_includes/cards/map.html
index bd7766125..2be93e4dc 100644
--- a/pages/_includes/cards/map.html
+++ b/pages/_includes/cards/map.html
@@ -1,12 +1,9 @@
 {% assign map = include.map | default: "world" %}
 <div class="card">
-   {% if include.title %}
-   <div class="card-header">
-      <h3 class="card-title">{{ include.title }}</h3>
-   </div>
-   {% endif %}
-   <div class="card-body">
-
-      {% include ui/map.html map-id=map color="blue" %}
-   </div>
+	<div class="card-body">
+		{% if include.title %}
+			<h3 class="card-title">{{ include.title }}</h3>
+		{% endif %}
+		{% include ui/map.html map-id=map color="blue" height=15 %}
+	</div>
 </div>
diff --git a/pages/_includes/layout/homepage.html b/pages/_includes/layout/homepage.html
index cfd0f514d..fe77b2898 100644
--- a/pages/_includes/layout/homepage.html
+++ b/pages/_includes/layout/homepage.html
@@ -13,6 +13,19 @@
 	  {% include cards/charts/active-users.html %}
 	</div>
 
+	<div class="col-7">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Traffic summary</h3>
+				{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
+			</div>
+		</div>
+	</div>
+
+	<div class="col-5">
+		{% include cards/map.html title="Top countries" %}
+	</div>
+
 	<div class="col-lg-6">
 		<div class="row row-cards">
 			<div class="col-sm-6">
@@ -33,23 +46,10 @@
 			</div>
 		</div>
 	</div>
-	<div class="col-lg-6">
-		{% include cards/map.html title="Top users" %}
-	</div>
 
 	<div class="col-lg-6">
 		{% include cards/development-activity.html %}
 	</div>
-	<div class="col-lg-6">
-		<div class="row row-deck row-cards">
-			<div class="col-md-12">
-				{% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
-			</div>
-			<div class="col-md-12">
-				{% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
-			</div>
-		</div>
-	</div>
 
 	<div class="col-sm-6 col-xl-3">
 		{% include cards/small-stats.html color="blue" icon="dollar-sign" count="132" subtitle="Sales" description="12 waiting payments" %}
diff --git a/pages/_includes/ui/chart.html b/pages/_includes/ui/chart.html
index f94d0be38..592178a2b 100644
--- a/pages/_includes/ui/chart.html
+++ b/pages/_includes/ui/chart.html
@@ -4,8 +4,11 @@
 {% assign class = include.class %}
 
 {% if include['size'] == 'sm' %}
-{% assign class = class | append: ' chart-sm' | strip %}
-{% assign height = 2.5 %}
+	{% assign class = class | append: ' chart-sm' | strip %}
+	{% assign height = 2.5 %}
+{% elsif include['size'] == 'lg' %}
+	{% assign class = class | append: ' chart-lg' | strip %}
+	{% assign height = 15 %}
 {% endif %}
 
 {% if data %}
@@ -17,16 +20,17 @@
 
 {% append_lib apexcharts %}
 {% capture script %}
+{% assign chart-type = data.type | default: 'bar' %}
 <script>
 	// @formatter:off
 	document.addEventListener("DOMContentLoaded", function () {
 		{% 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 | default: 'bar' }}",
+				type: "{{ chart-type }}",
 				fontFamily: 'inherit',
 				height: {{ height | times: 16 }},
 
@@ -52,23 +56,28 @@
 				{% endif %}
 			},
 
-			{% if data.type == 'bar' and data.horizontal %}
+			{% if chart-type == 'bar' %}
 			plotOptions: {
 				bar: {
+					{% if data.horizontal %}
+					barHeight: '50%',
 			 		horizontal: true,
+					{% else %}
+					columnWidth: '50%',
+					{% endif %}
 				}
 			},
 			{% endif %}
 
-			{% if data.datalabels %}
+			{% if chart-type == 'bar' or chart-type == 'area' %}
 			dataLabels: {
-				enabled: true,
+				enabled: {% if data.datalabels %}true{% else %}false{% endif %},
 			},
 			{% endif %}
 
 			fill: {
-				opacity: {% if data.type == 'area' %}.16{% else %}1{% endif %},
-				{% if data.type == 'area' %}type: 'solid'{% endif %}
+				opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
+				{% if chart-type == 'area' %}type: 'solid'{% endif %}
 			},
 
 			{% if data.title %}
@@ -83,7 +92,7 @@
 			},
 			{% endif %}
 
-			{% if data.type == 'area' or data.type == 'line' %}
+			{% if chart-type == 'area' or chart-type == 'line' %}
 			stroke: {
 				width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
 				{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
@@ -93,7 +102,7 @@
 			{% endif %}
 
 			{% if data.series %}
-			{% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
+			{% if chart-type == 'pie' or chart-type == 'donut' or chart-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 %}],
 
@@ -104,11 +113,28 @@
 			{% endif %}
 			{% endif %}
 
-			{% if data.show - grid %}
 			grid: {
-				show: true,
+				{% unless data.sparkline %}
+				padding: {
+					top: -20,
+					right: 0,
+					left: -4,
+					bottom: -8
+				},
+				{% endunless %}
+				{% if data.hide-grid %}
+				show: false,
+				{% else %}
+				strokeDashArray: 4,
+				{% if data.show-x %}
+				xaxis: {
+					lines: {
+						show: true
+					}
+				},
+				{% endif %}
+				{% endif %}
 			},
-			{% endif %}
 
 			{% if data.show-data-labels %}
 			dataLabels: {
@@ -116,34 +142,83 @@
 			},
 			{% endif %}
 
-			{% if data.categories or data.days-labels-count %}
+			{% if data.categories or data.datetime %}
 			xaxis: {
+				labels: {
+					padding: 0
+				},
+				tooltip: {
+					enabled: false
+				},
+				{% if chart-type == 'area' or chart-type == 'bar' %}
+				axisBorder: {
+					show: false,
+				},
+				{% endif %}
 				{% if data.categories %}
 				categories: [{% for category in data.categories %}"{{ category }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
-			{% endif %}
+				{% endif %}
 
-			{% if data.days-labels-count %}
-				type: 'datetime', {% endif %}
+				{% if data.datetime %}
+				type: 'datetime',
+				{% endif %}
 			},
 			{% endif %}
 
-			{% if data.days-labels-count %}
-			labels: [...Array({{ data.days-labels-count }}).keys()].map(n => '2019-09-' + (n + 1)),
+			{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
+			yaxis: {
+				labels: {
+					padding: 4
+				},
+				{% if data.y-title %}
+				title: {
+					text: '{{ data.y-title | escape }}'
+				}
+				{% endif %}
+			},
+			{% endunless %}
+
+			{% if data.datetime %}
+			{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
+			{% assign days-count = data.series[0].data.size %}
+
+			labels: [
+				{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
+			],
 			{% endif %}
 
 			{% if data.series %}
 			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'blue' %}"{{ color | tabler_color }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
 			{% endif %}
 
-			{% unless data.show-legend %}
 			legend: {
+				{% if include.legend %}
+				show: true,
+				position: 'bottom',
+				height: 32,
+				offsetY: -12,
+				markers: {
+					width: 8,
+					height: 8,
+					radius: 100,
+				},
+				itemMargin: {
+					horizontal: 8,
+				},
+				{% else %}
 				show: false,
+				{% endif %}
 			},
-			{% endunless %}
 
-			{% if data.hide-tooltip %}
+			{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
 			tooltip: {
-				enabled: false
+				{% if data.hide-tooltip %}
+				enabled: false,
+				{% endif %}
+
+				{% if chart-type == 'pie' or chart-type == 'donut' %}
+				fillSeriesColor: false
+				{% endif %}
 			},
 			{% endif %}
 
diff --git a/pages/_plugins/jekyll-filters.rb b/pages/_plugins/jekyll-filters.rb
index 78127e0dc..f5dde7566 100644
--- a/pages/_plugins/jekyll-filters.rb
+++ b/pages/_plugins/jekyll-filters.rb
@@ -1,3 +1,5 @@
+require 'date'
+
 module Jekyll
   module JekyllFilter
     def to_pretty_time(value)
@@ -108,6 +110,10 @@ module Jekyll
     def miliseconds_to_minutes(miliseconds)
       seconds_to_minutes(miliseconds.to_i / 1000)
     end
+
+    def timestamp_to_date(timestamp)
+      DateTime.strptime(timestamp.to_s, '%s').strftime('%F')
+    end
   end
 end
 
diff --git a/pages/tmp2.html b/pages/tmp2.html
index f0f28c3da..c4bb54525 100644
--- a/pages/tmp2.html
+++ b/pages/tmp2.html
@@ -5,17 +5,26 @@ page-title: Search results
 
 
 <div class="row row-cards">
-	<div class="col-sm-6">
+	<div class="col-lg-12">
 		<div class="card">
 			<div class="card-body">
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
+				{% include ui/chart.html chart-id="mentions" size="lg" legend=true %}
 			</div>
 		</div>
 	</div>
 	<div class="col-sm-6">
 		<div class="card">
 			<div class="card-body">
-				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat
+				soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-6">
+		<div class="card">
+			<div class="card-body">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut expedita fugit ipsa placeat quibusdam repellat
+				soluta ut. Architecto cum cupiditate, distinctio fugit hic laboriosam magni optio quibusdam, quis, rem sed.
 			</div>
 		</div>
 	</div>
diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss
index 60ccd662f..fa80c8694 100644
--- a/scss/ui/_charts.scss
+++ b/scss/ui/_charts.scss
@@ -9,15 +9,19 @@
 
 .chart-sm {
   height: 2.5rem;
-  //outline: 1px solid red;
+}
+
+.chart-lg {
+  height: 15rem;
 }
 
 .chart-square {
   height: 5.75rem;
-  //outline: 1px solid red;
 }
 
-
+/**
+Chart sparkline
+ */
 .chart-sparkline {
   position: relative;
   width: 4rem;
@@ -48,4 +52,4 @@
     width: 1rem;
     height: 1rem;
   }
-}
+}
\ No newline at end of file
diff --git a/scss/vendor/_apexcharts.scss b/scss/vendor/_apexcharts.scss
index 7855b70e7..59abff355 100644
--- a/scss/vendor/_apexcharts.scss
+++ b/scss/vendor/_apexcharts.scss
@@ -29,3 +29,9 @@
   width: .5rem;
   height: .5rem;
 }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: $gray-300;
+}