diff --git a/.gitignore b/.gitignore
index 03ea074b7..cc8700842 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ tmp/
 .DS_Store
 /Gemfile.lock
 /dist/
+/_site/
diff --git a/pages/_includes/cards/small-stats-3.html b/pages/_includes/cards/small-stats-3.html
index 27465bfe8..440ca32bc 100644
--- a/pages/_includes/cards/small-stats-3.html
+++ b/pages/_includes/cards/small-stats-3.html
@@ -4,9 +4,9 @@
          {{ include.percentage }}%
 
          {% if include.percentage > 0 %}
-            {% include ui/icon.html icon="arrow-up-right" %}
+            {% include ui/icon.html icon="arrow-up-right" class="icon-thin" %}
          {% elsif include.percentage < 0 %}
-            {% include ui/icon.html icon="arrow-down-right" %}
+            {% include ui/icon.html icon="arrow-down-right" class="icon-thin" %}
          {% endif %}
       </div>
       <div class="h1 m-0">{{ include.number }}</div>
diff --git a/pages/_includes/layout/debug-footer.html b/pages/_includes/layout/debug-footer.html
index e4d27e6fb..c700126b9 100644
--- a/pages/_includes/layout/debug-footer.html
+++ b/pages/_includes/layout/debug-footer.html
@@ -1,7 +1,7 @@
 <div class="debug">
 	<a href="#" data-debug="dark">Dark mode</a>
 	<a href="#" data-debug="rtl">RTL mode</a>
-	<a href="#" data-debug="code">Disable code</a>
+	<a href="#" data-debug="code">Show cards code</a>
 	<a href="#" data-debug="folded">Folded sidebar</a>
 	<a href="#" data-debug="fullscreen">Fullscreen</a>
 	<a href="#" data-debug="header-sticky">Sticky header</a>
@@ -36,8 +36,8 @@
 		border-radius: 50%;
 	}
 
-	body.disable-debug-code .card-debug {
-		display: none;
+	body.show-debug-code .card-debug {
+		display: block;
 	}
 
 	@media (max-width: 991.98px) {
@@ -46,7 +46,7 @@
 		}
 	}
 
-	body.disable-debug-code a[data-debug="code"]:after,
+	body.show-debug-code a[data-debug="code"]:after,
 	html[dir="rtl"] a[data-debug="rtl"]:after,
 	body.theme-dark a[data-debug="dark"]:after,
 	:fullscreen a[data-debug="fullscreen"]:after,
@@ -70,7 +70,7 @@
 		        return false;
 	        })
 	        .on('click', '[data-debug="code"]', function (e) {
-		        $body.toggleClass('disable-debug-code');
+		        $body.toggleClass('show-debug-code');
 
 		        e.preventDefault();
 		        return false;
diff --git a/pages/_includes/layout/debug-header.html b/pages/_includes/layout/debug-header.html
index f8f062391..02ed76ad2 100644
--- a/pages/_includes/layout/debug-header.html
+++ b/pages/_includes/layout/debug-header.html
@@ -5,6 +5,7 @@
 		top: 0;
 		line-height: 1;
 		font-size: 11px;
+      display: none;
 	}
 
 	.card-debug a {
diff --git a/pages/_includes/parts/dropdown/days.html b/pages/_includes/parts/dropdown/days.html
new file mode 100644
index 000000000..8ef5ed7ee
--- /dev/null
+++ b/pages/_includes/parts/dropdown/days.html
@@ -0,0 +1,10 @@
+<div class="dropdown">
+   <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      {{ include.value | default: 'Last 7 days' }}
+   </a>
+   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+      <a class="dropdown-item active" href="#">Last 7 days</a>
+      <a class="dropdown-item" href="#">Last 30 days</a>
+      <a class="dropdown-item" href="#">Last 3 months</a>
+   </div>
+</div>
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
new file mode 100644
index 000000000..302854a75
--- /dev/null
+++ b/pages/cards-stats.html
@@ -0,0 +1,73 @@
+---
+title: Cards stats
+layout: default
+---
+
+<div class="row">
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">Sales</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">75%</div>
+            <div class="d-flex mb-2">
+               <div>Conversion rate</div>
+               <div class="ml-auto text-green">
+                  24% {% include ui/icon.html icon="trending-up" class="ml-1 icon-thin" %}
+               </div>
+            </div>
+            {% include ui/progress.html percentage=75 color="blue" size="sm" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">Revenue</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">$452,300</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">New clients</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">6,782</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" color="purple" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div class="d-flex">
+               <div class="text-muted">New clients</div>
+               <div class="ml-auto">
+                  {% include parts/dropdown/days.html %}
+               </div>
+            </div>
+            <div class="h1 mb-3">184,730</div>
+            {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-sm-6 col-md-4 col-lg-3">5</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">6</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">7</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">8</div>
+</div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d2fc41a45..f353a6e98 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -107,7 +107,7 @@ $avatar-sizes: (
 
 $font-size-base: .9375rem !default;
 $font-weight-base: 400 !default;
-$line-height-base: (24 / 16) !default;
+$line-height-base: (24 / 15) !default;
 
 $border-radius: 3px !default;
 
@@ -115,7 +115,7 @@ $h1-font-size: 1.875rem !default;
 $h2-font-size: 1.625rem !default;
 $h3-font-size: 1.25rem !default;
 $h4-font-size: 1.125rem !default;
-$h5-font-size: 1rem !default;
+$h5-font-size: $font-size-base !default;
 $h6-font-size: .875rem !default;
 
 $ribbon-margin: .25rem !default;
diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss
index 8502de888..89ff2235d 100644
--- a/scss/ui/_charts.scss
+++ b/scss/ui/_charts.scss
@@ -16,6 +16,7 @@
   position: relative;
   width: 4rem;
   height: 2.5rem;
+  line-height: 1;
 }
 
 .sparkline-square {
diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss
index 799430661..04054b9e9 100644
--- a/scss/ui/_icons.scss
+++ b/scss/ui/_icons.scss
@@ -18,7 +18,7 @@
 }
 
 .icon-thin {
-  stroke-width: 1;
+  stroke-width: 1.5px;
 }
 
 .icon-filled {
diff --git a/scss/ui/_progress.scss b/scss/ui/_progress.scss
index b450bdf8d..18809f774 100644
--- a/scss/ui/_progress.scss
+++ b/scss/ui/_progress.scss
@@ -6,3 +6,7 @@
 .progress-xs {
   height: .25rem;
 }
+
+.progress-sm {
+  height: .5rem;
+}
diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss
index 6e04dbe20..789c0d3ef 100644
--- a/scss/ui/_typo.scss
+++ b/scss/ui/_typo.scss
@@ -18,6 +18,7 @@ h6,
 .h4,
 .h5,
 .h6 {
+
   a {
     color: inherit;
   }
diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss
index 82847ef9d..e35841802 100644
--- a/scss/utils/_text.scss
+++ b/scss/utils/_text.scss
@@ -3,14 +3,12 @@
 .text-inherit { color: inherit !important; }
 .text-default { color: $body-color !important; }
 
-.text-sm	{ font-size: .75rem !important; }
-.text-base	{ font-size: 1rem !important; }
-.text-lg	{ font-size: 1.125rem !important; }
-.text-xl	{ font-size: 1.25rem !important; }
-.text-2xl	{ font-size: 1.5rem !important; }
-.text-3xl	{ font-size: 1.875rem !important; }
-.text-4xl	{ font-size: 2.25rem !important; }
-.text-5xl	{ font-size: 3rem !important; }
+.text-h6	{ font-size: $h6-font-size !important; }
+.text-h5	{ font-size: $h5-font-size !important; }
+.text-h4	{ font-size: $h4-font-size !important; }
+.text-h3	{ font-size: $h3-font-size !important; }
+.text-h2	{ font-size: $h2-font-size !important; }
+.text-h1	{ font-size: $h1-font-size !important; }
 
 .text-muted-light { color: $text-muted-light !important; }