diff --git a/js/app/charts.js b/js/app/charts.js
index 1bb9013d87e53995a9ddf5ed19e957741270ef0e..2fd1eae7fa6bcf10db3c5925d364b244442cdb8a 100644
--- a/js/app/charts.js
+++ b/js/app/charts.js
@@ -41,48 +41,89 @@
 
 
 /*
-Apexcharts default configuration
+charts default configuration
  */
 if (window.Apex) {
-  Apex.grid = {
-    padding: {
-      right: 0,
-      left: 0,
-      bottom: 0,
-      top: 0
-    }
-  };
 
-  Apex.dataLabels = {
-    enabled: false
-  };
+  window.Apex = {
+    grid: {
+      show: false,
+      padding: {
+        right: 0,
+        left: 0,
+        bottom: 0,
+        top: 0
+      }
+    },
 
-  Apex.plotOptions = {
-    pie: {
-      expandOnClick: false,
+    dataLabels: {
+      enabled: false
     },
-  };
 
-  Apex.chart = {
-    toolbar: {
-      show: false,
+    plotOptions: {
+      pie: {
+        expandOnClick: false,
+      },
+    },
+
+    chart: {
+      toolbar: {
+        show: false,
+      },
+      zoom: {
+        enabled: false
+      },
+      animations: {
+        enabled: false,
+      }
+    },
+
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+
+    fill: {
+      type: 'solid',
+      opacity: 1
     },
-    animations: {
-      enabled: false,
-    }
-  };
 
-  Apex.stroke = {
-    width: 2,
-    curve: 'smooth',
-  };
+    markers: {
+      strokeWidth: 1
+    },
+
+    legend: {
+      show: false
+    },
 
-  Apex.fill = {
-    type: 'solid',
-    opacity: 1
-  };
+    title: {
+      style: {
+        fontSize: '14px',
+        fontFamily: 'inherit'
+      }
+    },
+
+    tooltip: {
+      fillSeriesColor: false
+    },
 
-  Apex.legend = {
-    show: false
-  };
+    xaxis: {
+      labels: {
+        show: false
+      },
+      tooltip: {
+        enabled: false
+      },
+      axisBorder: {
+        show: false
+      }
+    },
+
+    yaxis: {
+      show: false,
+      labels: {
+        show: false
+      }
+    }
+  }
 }
diff --git a/pages/_data/charts.yml b/pages/_data/charts.yml
index 7706c8ea388d1ddb272b6bf1550ad5d06a7e2e5d..3986032e626a606dda255a568fc09814e24ddd9b 100644
--- a/pages/_data/charts.yml
+++ b/pages/_data/charts.yml
@@ -330,12 +330,13 @@ usd-eur:
   series:
     - name: USD/EUR
       color: black
-      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444, 1.1371]
+      data: [1.1241, 1.0972, 1.0601, 1.0516, 1.2795, 1.0573, 1.065, 1.1892, 1.1243, 1.1421, 1.1835, 1.1917, 1.1811, 1.1649, 1.1888, 1.1995, 1.2412, 1.2193, 1.2325, 1.2077, 1.1692, 1.168, 1.1686, 1.1601, 1.1608, 1.1317, 1.0318, 1.1465, 1.1444]
 
 devices:
   type: donut
   sparkline: true
   hide-legend: true
+  sparkline: true
   series:
     - name: a
       color: blue-dark
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
new file mode 100644
index 0000000000000000000000000000000000000000..82f14b71d0a596d844dbe4babec1c555b481c060
--- /dev/null
+++ b/pages/_docs/avatars.md
@@ -0,0 +1,99 @@
+---
+title: Avatars
+description: Create and group avatars of various shapes and sizes with one component.
+---
+
+### Default markup
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=1 %}
+{% include ui/avatar.html person-id=2 %}
+{% include ui/avatar.html person-id=3 %}
+{% 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.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=10 size="xl" %}
+{% include ui/avatar.html person-id=9 size="lg" %}
+{% include ui/avatar.html person-id=8 size="md" %}
+{% include ui/avatar.html person-id=7 %}
+{% include ui/avatar.html person-id=6 size="sm" %}
+{% endexample %}
+
+### Avatar status
+
+Add an online or offline status indicator to show user's availability.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=11 %}
+{% include ui/avatar.html person-id=12 status="danger" %}
+{% include ui/avatar.html person-id=13 status="success" %}
+{% include ui/avatar.html person-id=14 status="warning" %}
+{% include ui/avatar.html person-id=15 status="info" %}
+{% include ui/avatar.html person-id=16 status="gray" %}
+{% endexample %}
+
+### Avatar shape
+
+Change the shape of an avatar with the default Bootstrap image classes.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=17 %}
+{% include ui/avatar.html person-id=18 shape="rounded" %}
+{% include ui/avatar.html person-id=19 shape="rounded-circle" %}
+{% include ui/avatar.html person-id=20 shape="rounded-0" %}
+{% 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
+
+{% example html %}
+<div class="avatar-list">
+{% for person in site.data.people limit: 5 offset: 20 %}
+  {% include ui/avatar.html person=person %}
+{% endfor %}
+</div>
+{% endexample %}
+
+{% example html %}
+<div class="avatar-list avatar-list-stacked">
+  {% for person in site.data.people limit: 5 offset: 30 %}
+  {% include ui/avatar.html person=person element="a" %}
+  {% endfor %}
+  <span class="avatar" element="a">+8</span>
+</div>
+{% endexample %}
diff --git a/pages/_docs/index.md b/pages/_docs/index.md
index d961f53c04c79a1a8e5223e218824a1ff5cdb94c..bbd3d41815f2a7af7921aabe526015bcf5d55985 100644
--- a/pages/_docs/index.md
+++ b/pages/_docs/index.md
@@ -26,9 +26,6 @@ When completed, you'll be able to run the various commands provided from the com
 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
 3. Any change in `/src` directory will build application and refresh the page.
 
-<div class="alert alert-warning">
-<strong>Warning!</strong> all changes made in <code>_site/</code> folder would be overwriten on application build.
-</div>
 
 ### Bugs and feature requests
 
diff --git a/pages/_includes/js/charts.html b/pages/_includes/js/charts.html
index 7488bc3ac6c4ffa2eaead0abe13875084bf0ae68..5e13958e491ff876f81a36b440987f3e5d10b239 100644
--- a/pages/_includes/js/charts.html
+++ b/pages/_includes/js/charts.html
@@ -4,7 +4,9 @@
 {% if data %}
 <script>
 $(document).ready(function(){
-   window.ApexCharts && (new ApexCharts(document.getElementById('{{ include.id }}'), {
+   window.chart = window.chart || {};
+
+   window.ApexCharts && (window.chart["{{ include.chart-id }}"] = new ApexCharts(document.getElementById('{{ include.id }}'), {
       chart: {
          type: '{{ data.type }}',
          height: document.getElementById('{{ include.id }}').offsetHeight,
diff --git a/pages/_includes/parts/navbar.html b/pages/_includes/parts/navbar.html
index e1490b39098b5dbe3252b7431c2e288135d626d4..cea753f70d8ea07b90350cdb45f69b9a1fe3518e 100644
--- a/pages/_includes/parts/navbar.html
+++ b/pages/_includes/parts/navbar.html
@@ -12,7 +12,7 @@
       <a href="{{ site.base }}" class="navbar-brand text-inherit">
          {% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
          {% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
-         {% if include.logo %}<img src="./img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
+         {% if include.logo %}<img src="{{ site.base }}/img/tabler.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
          {% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
       </a>
 
diff --git a/pages/_includes/parts/pagination.html b/pages/_includes/parts/pagination.html
index fa5ed37714f84c34f66a0b5d700753626b1bca84..9a54a9072be48b376296c0541f8248ed3be3b82e 100644
--- a/pages/_includes/parts/pagination.html
+++ b/pages/_includes/parts/pagination.html
@@ -7,7 +7,7 @@
             <div class="page-item-subtitle">Previous</div>
             <div class="page-item-title">{{ include.prev-description }}</div>
          {% else %}
-            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}Prev{% endif %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}{% include ui/icon.html icon="chevron-left" %} Prev{% endif %}
          {% endif %}
       </a>
    </li>
@@ -23,7 +23,7 @@
             <div class="page-item-subtitle">Next</div>
             <div class="page-item-title">{{ include.next-description }}</div>
          {% else %}
-            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next{% endif %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next {% include ui/icon.html icon="chevron-right" %}{% endif %}
          {% endif %}
       </a>
    </li>
diff --git a/pages/_includes/ui/avatar.html b/pages/_includes/ui/avatar.html
index 87fa6eb244d51fe7c252c558f27760668622c8d8..eac4b4a52602a393b5528e9c77b25d2c621e95ca 100644
--- a/pages/_includes/ui/avatar.html
+++ b/pages/_includes/ui/avatar.html
@@ -15,5 +15,5 @@
 	{% endunless %}
 {% endif %}
 {% assign element = include.element | default: 'span' %}
-<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
+<{{ element }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ site.base }}{{ src }})"{% endif %}>{% if include.status %}<span class="avatar-status bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include ui/icon.html icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}   {% include ui/icon.html icon=include.icon class="avatar-icon" %}{% endif %}</{{ element }}>
 {% endremoveemptylines %}
diff --git a/pages/_includes/ui/icon.html b/pages/_includes/ui/icon.html
index 6b9aeec645a6cdd1566fbeb64a6961609b51bd05..9b64d91f5bcff01415bcc090f0fe2eea401f0222 100644
--- a/pages/_includes/ui/icon.html
+++ b/pages/_includes/ui/icon.html
@@ -1,4 +1,5 @@
 {% capture class %}{% if include.class %} {{ include.class }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}{% endcapture %}
+{% assign class = class | strip %}
 {% capture i %}
 {% include icons/{{ include.icon }}.svg %}
 {% endcapture %}
diff --git a/pages/_plugins/jekyll-base.rb b/pages/_plugins/jekyll-base.rb
index 5f07b8c661de56385a26343c8cd3d70ab65598e9..74fbfbb7628145a0cf1e24a78eb3979d2051d76c 100644
--- a/pages/_plugins/jekyll-base.rb
+++ b/pages/_plugins/jekyll-base.rb
@@ -15,7 +15,6 @@ def get_dir(dir)
 end
 
 module Jekyll
-
   Jekyll::Hooks.register :pages, :pre_render do |page, jekyll|
     jekyll.site['base'] = get_dir(page.dir)
   end
diff --git a/pages/_plugins/jekyll-tags.rb b/pages/_plugins/jekyll-tags.rb
index 6bb16c4b09c3aec9fea19328464003c7728c97e3..4eff94f8c64daf075016948ec2df00bad60a86ab 100644
--- a/pages/_plugins/jekyll-tags.rb
+++ b/pages/_plugins/jekyll-tags.rb
@@ -1,3 +1,6 @@
+require 'pathname'
+
+
 module Jekyll
   module Tags
     class RemoveEmptyLines < Liquid::Block
@@ -10,9 +13,21 @@ module Jekyll
       def render(context)
         super.strip.gsub /^[\t\s]*$\n/, ''
       end
-
     end
 
+    class DocsUrl < Liquid::Tag
+      def initialize(tag_name, path, tokens)
+        super
+        @path = path.strip
+      end
+
+      def render(context)
+        url = context.environments.first.page.url.sub!(/^\//, '')
+        pageDir = Pathname(url).parent
+
+        ('./' + Pathname('docs/' + @path + '.html').relative_path_from(pageDir).to_s).gsub(/^\.\/\.\./, "..")
+      end
+    end
 
     class CardBlock < Liquid::Block
       def initialize(tag_name, params, tokens)
@@ -38,6 +53,8 @@ module Jekyll
         card_text += super + "\n"
         card_text += '</div>' + "\n"
         card_text += '</div>'
+
+        card_text
       end
     end
   end
@@ -45,3 +62,5 @@ end
 
 Liquid::Template.register_tag('removeemptylines', Jekyll::Tags::RemoveEmptyLines)
 Liquid::Template.register_tag('card', Jekyll::Tags::CardBlock)
+Liquid::Template.register_tag('docs_url', Jekyll::Tags::DocsUrl)
+
diff --git a/pages/avatars.html b/pages/avatars.html
deleted file mode 100644
index 10466f66ab8480aef17c1d018573a2fc490542a9..0000000000000000000000000000000000000000
--- a/pages/avatars.html
+++ /dev/null
@@ -1,84 +0,0 @@
----
----
-
-
-<h1>Simple avatars</h1>
-<div>
-	{% include ui/avatar.html person-id=1 %}
-	{% include ui/avatar.html person-id=2 %}
-	{% include ui/avatar.html person-id=3 %}
-	{% include ui/avatar.html person-id=4 %}
-	{% include ui/avatar.html person-id=5 %}
-</div>
-
-<div>
-	<h1>Avatar size</h1>
-	{% include ui/avatar.html person-id=6 size="sm" %}
-	{% include ui/avatar.html person-id=7 %}
-	{% include ui/avatar.html person-id=9 size="lg" %}
-	{% include ui/avatar.html person-id=10 size="xl" %}
-</div>
-
-<div>
-	{% include ui/avatar.html person-id=11 %}
-	{% include ui/avatar.html person-id=12 status="danger" %}
-	{% include ui/avatar.html person-id=13 status="success" %}
-	{% include ui/avatar.html person-id=14 status="warning" %}
-	{% include ui/avatar.html person-id=15 status="info" %}
-	{% include ui/avatar.html person-id=16 status="gray" %}
-</div>
-
-<div>
-	<h1>Avatar placeholders</h1>
-	{% include ui/avatar.html placeholder="ąę" %}
-	{% include ui/avatar.html placeholder="AB" %}
-	{% include ui/avatar.html placeholder="ć" %}
-	{% include ui/avatar.html placeholder="ы" %}
-</div>
-<div>
-	{% include ui/avatar.html icon="bell" %}
-	{% include ui/avatar.html icon="circle" %}
-	{% include ui/avatar.html icon="disc" %}
-	{% include ui/avatar.html icon="twitter" class="bg-twitter text-white" %}
-</div>
-<div>
-	<span class="avatar avatar-blue">NG</span>
-	<span class="avatar avatar-azure">AM</span>
-	<span class="avatar avatar-indigo">RB</span>
-	<span class="avatar avatar-purple">PR</span>
-	<span class="avatar avatar-pink">WH</span>
-	<span class="avatar avatar-red">MR</span>
-	<span class="avatar avatar-orange">DB</span>
-	<span class="avatar avatar-yellow">PP</span>
-	<span class="avatar avatar-lime">JR</span>
-	<span class="avatar avatar-green">RB</span>
-	<span class="avatar avatar-teal">KH</span>
-	<span class="avatar avatar-cyan">BK</span>
-	<span class="avatar avatar-gray">CA</span>
-	<span class="avatar avatar-gray-dark">CW</span>
-</div>
-
-<div>
-	<h1>Avatars list</h1>
-	<div class="avatar-list">
-		{% include ui/avatar.html person-id=17 %}
-		{% include ui/avatar.html person-id=18 %}
-		{% include ui/avatar.html person-id=19 %}
-		{% include ui/avatar.html person-id=20 %}
-		{% include ui/avatar.html person-id=21 %}
-		{% include ui/avatar.html person-id=22 %}
-	</div>
-</div>
-
-<div>
-	<div class="avatar-list avatar-list-stacked">
-		{% include ui/avatar.html person-id=23 %}
-		{% include ui/avatar.html person-id=24 %}
-		{% include ui/avatar.html person-id=25 %}
-		{% include ui/avatar.html person-id=26 %}
-		{% include ui/avatar.html person-id=27 %}
-		{% include ui/avatar.html person-id=28 %}
-		<span class="avatar">+8</span>
-	</div>
-
-</div>
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
index daedeffb254d8f2473f4cec81901f5e4f1bf2052..a09f80a08ea0434ba958554d856351ac861c3185 100644
--- a/pages/cards-stats.html
+++ b/pages/cards-stats.html
@@ -133,8 +133,10 @@ layout: default
          <div class="card-body">
             <div>Traffic monitor</div>
             <div class="row">
-               <div class="col-6">
-                 Lorem ipsum dolor sit amet, consectetur
+               <div class="col-6 align-self-end">
+                  Desktop<br />
+                  Mobile<br/>
+                  Tablet
                </div>
                <div class="col-6">
                   <div class="chart-square" id="chart-devices"></div>
@@ -144,7 +146,7 @@ layout: default
          </div>
       </div>
    </div>
-   <div class="col-sm-6 col-md-4 col-lg-3">
+   <div class="col-sm-12 col-lg-6">
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
@@ -160,7 +162,7 @@ layout: default
                </div>
             </div>
 
-            <div class="chart-sm" id="chart-usd-eur"></div>
+            <div class="chart-sm" id="chart-usd-eur" style="height: 10rem"></div>
             {% include js/charts.html id="chart-usd-eur" chart-id="usd-eur" %}
          </div>
       </div>
diff --git a/pages/pagination.html b/pages/pagination.html
index 0a52c5ce9f7a4f3066709bdd8658dfcf6ec884c3..067ae83a0238793cb900c6e4f1b8dc3a26beb046 100644
--- a/pages/pagination.html
+++ b/pages/pagination.html
@@ -12,3 +12,7 @@ title: Pagination
 {% card %}
    {% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
 {% endcard %}
+
+<div>
+   {% include parts/pagination.html icons=true %}
+</div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 897d8987479c44eab10565c40cbdd2a311852673..f68397ec08145e60c766668001294af98f93469d 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -97,11 +97,10 @@ $colors: (
 ) !default;
 
 $avatar-sizes: (
-  ("xs", 1.25rem, 1rem),
-  ("sm", 1.5rem, 1rem),
-  ("md", 2.5rem, 1rem),
-  ("lg", 3.75rem, 1.25rem),
-  ("xl", 5rem, 2rem)
+  "sm": 1.25rem,
+  "md": 3rem,
+  "lg": 4.5rem,
+  "xl": 6rem
 ) !default;
 
 $font-size-base: .9375rem !default;
@@ -159,7 +158,9 @@ $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
 $pagination-padding-x: .25rem !default;
 $pagination-color: $text-muted !default;
-$pagination-disabled-color: $text-muted-light !default;
+$pagination-bg: transparent !default;
+$pagination-disabled-bg: transparent !default;
+$pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
 //docelowo przeniesc gdzieindziej
 $yiq-contrasted-threshold: 200 !default;
diff --git a/scss/ui/_avatars.scss b/scss/ui/_avatars.scss
index 449f7a0a21f327c6cbd69ac382d13fafbecbbee0..37ffb7dc64a9d13507ad5c73970f68d7b6c11bff 100644
--- a/scss/ui/_avatars.scss
+++ b/scss/ui/_avatars.scss
@@ -5,7 +5,7 @@
   height: 2rem;
   font-size: .875rem;
   font-weight: 400;
-  line-height: 2.5rem;
+  line-height: 2rem;
   color: $text-muted-light;
   text-align: center;
   text-transform: uppercase;
@@ -13,12 +13,23 @@
   user-select: none;
   background: $body-bg no-repeat center/cover;
   border-radius: 50%;
+
+  .icon {
+    font-size: 1.25em;
+  }
+
+  @at-root a#{&} {
+    cursor: pointer;
+  }
 }
 
-.avatar-icon {
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: text-bottom;
+@each $avatar-size, $size in $avatar-sizes {
+  .avatar-#{$avatar-size} {
+    width: $size;
+    height: $size;
+    line-height: $size;
+    font-size: $size / 2;
+  }
 }
 
 .avatar-status {
@@ -32,20 +43,6 @@
   border-radius: 50%;
 }
 
-.avatar-thumb {
-  margin: 4px;
-  box-shadow: 0 0 0 4px rgba(255, 255, 255, .4);
-}
-
-@each $avatar-size, $size, $font-size in $avatar-sizes {
-  .avatar-#{$avatar-size} {
-    width: $size;
-    height: $size;
-    font-size: $font-size;
-    line-height: $size;
-  }
-}
-
 .avatar-list {
   padding: 0;
   margin: 0 0 -.5rem;
@@ -58,6 +55,13 @@
       margin-right: .5rem;
     }
   }
+
+  a.avatar {
+
+    &:hover {
+      z-index: 1;
+    }
+  }
 }
 
 .avatar-list-stacked {
@@ -69,10 +73,3 @@
     box-shadow: 0 0 0 2px #fff;
   }
 }
-
-@each $vendor, $color in $colors {
-  .avatar-#{$vendor} {
-    color: $color;
-    background-color: rgba($color, .3);
-  }
-}
diff --git a/scss/ui/_charts.scss b/scss/ui/_charts.scss
index 7c2918ad7918bbb091b797a77e162baa1d98a8b1..deb83aff943ddb34b4783b96098157820c7bd334 100644
--- a/scss/ui/_charts.scss
+++ b/scss/ui/_charts.scss
@@ -9,11 +9,12 @@
 
 .chart-sm {
   height: 2.5rem;
+  //outline: 1px solid red;
 }
 
 .chart-square {
   height: 5.75rem;
-  outline: 1px solid red;
+  //outline: 1px solid red;
 }
 
 .chart-placeholder {
diff --git a/scss/ui/_examples.scss b/scss/ui/_examples.scss
index 4ee56f3301bc27b3328574f9b2d40bc497928ead..64839218d96000dfa203b85258ae7e676f8a735b 100644
--- a/scss/ui/_examples.scss
+++ b/scss/ui/_examples.scss
@@ -1,8 +1,8 @@
 .example {
   padding: 1.5rem;
-  font-size: px2rem(15px);
   border: 1px solid $border-color;
   border-radius: 3px 3px 0 0;
+  margin: 1rem 0 0;
 }
 
 .example-bg {
diff --git a/scss/ui/_icons.scss b/scss/ui/_icons.scss
index 04054b9e95cf5de22bef1426ba01c0cdc822f086..c3fb0aa29c16f1e09af1a346440fb0c4f54d977c 100644
--- a/scss/ui/_icons.scss
+++ b/scss/ui/_icons.scss
@@ -2,7 +2,7 @@
   width: 1em;
   height: 1em;
   font-size: 1em;
-  vertical-align: -2px;
+  vertical-align: -.2em;
 }
 
 .icon-md {
diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss
index 0c4bcff64f9c7ce232822c0b5153a17a67a34cd7..cd8fc4e0531ca30cee9db9f0e1cbeb883aed2a54 100644
--- a/scss/utils/_text.scss
+++ b/scss/utils/_text.scss
@@ -61,7 +61,7 @@
     h5,
     h6 {
       margin-top: 1.5em;
-      font-weight: 400;
+      font-weight: 600;
     }
   }