diff --git a/package.json b/package.json
index 1cdc3a3b0b22ac2c35ce28304d4a7a2a651f623c..be93f58d44f30d443507fb5ba0fbf39e67b1fc90 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
     "@fullcalendar/timegrid": "4.3.0",
     "apexcharts": "3.11.2",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#bd27834",
+    "bootstrap": "twbs/bootstrap#e2530d3",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",
diff --git a/pages/_data/selects.yml b/pages/_data/selects.yml
index 9bcc496208a46d29c8428a752960cea8f618afb7..8d5480145334ddc16ec2ca4d35908ac12d3a54f4 100644
--- a/pages/_data/selects.yml
+++ b/pages/_data/selects.yml
@@ -11,6 +11,7 @@ users:
       name: Nikola Tesla
 
 tags:
+  max-items: 3
   value: dev, test
   options:
     - dev
@@ -22,16 +23,16 @@ countries:
   options:
     pl:
       name: Poland
-      image: img/flags/pl.svg
+      flag: pl
     de:
       name: Germany
-      image: img/flags/de.svg
+      flag: de
     cz:
       name: Czech Republic
-      image: img/flags/cz.svg
+      flag: cz
     br:
       name: Brazil
-      image: img/flags/br.svg
+      flag: br
 
 people:
   value: 4
diff --git a/pages/_includes/cards/invoices.html b/pages/_includes/cards/invoices.html
index 33c11bfc8ba95efc06f3e974011e46b96cf82f2e..beaa8bbd501a703d559c6bc29cdd7e99e731c895 100644
--- a/pages/_includes/cards/invoices.html
+++ b/pages/_includes/cards/invoices.html
@@ -1,84 +1,82 @@
 <div class="card">
-      <div class="card-header">
-         <h3 class="card-title">Invoices</h3>
-      </div>
-      <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap overflow-hidden">
-   
-         <div class="mb-0">
-            Show
-            <div class="mx-2 d-inline-block" style="width: 4rem;">
-               <input type="text" class="form-control" value="8">
-            </div>
-            entries
-         </div>
-         
-         <div class="mb-0 ml-4">
-               Serach:
-               <div class="ml-2 d-inline-block" style="width: 10rem;">
-                  <input type="text" class="form-control">
-               </div>
-         </div>
-   
-      </div>
-      <div class="table-responsive">
-         <table class="table card-table table-vcenter text-nowrap datatable">
-            <thead>
-               <tr>
-                  <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
-                  <th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
-                  <th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
-                  <th></th>
-                  <th></th>
-               </tr>
-            </thead>
-   
-            <tbody>
-            {% for invoice in site.data.invoices limit: 8 %}
-            <tr>
-               <td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
-               <td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
-               <td><a href="invoice.html" class="text-reset">{{ invoice.name }}</a></td>
-               <td>
-                  {% include ui/flag.html flag=invoice.country %}
-                  {{ invoice.client }}
-               </td>
-               <td>
-                  {{ invoice.vat-no }}
-               </td>
-               <td>
-                  {{ invoice.date }}
-               </td>
-               <td>
-                  <span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
-               </td>
-               <td>{{ invoice.price }}</td>
-   
-               <td class="text-right">
-                  <button class="btn btn-secondary btn-sm align-text-top">Manage</button> 
-                  <span class="dropdown ml-1">
-                     <button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
-                     {% include ui/dropdown-menu.html %}
-                  </span>
-               </td>
-               <td style="padding-right: 1rem;">
-                  {% include ui/icon.html icon="edit" class="icon-sm float-right" %}
-               </td>
-            </tr>
-            {% endfor %}
-            </tbody>
-         </table>
-      </div>
-      <div class="card-body d-flex justify-content-between flex-nowrap table-responsive border-bottom text-nowrap">
-         <div class="mb-0 d-flex align-items-center">
-            <p class="mb-0 align-middle">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
-         </div>
-         <div class="mb-0 ml-4">
-               <a href="#" class="btn btn-secondary disabled">Previous</a><a href="#" class="btn btn-primary ml-2">1</a><a href="#" class="btn btn-secondary ml-2">2</a><a href="#" class="btn btn-secondary ml-2 font-weight-bold text-secondary">Next</a>
-         </div>
-      </div>
-   </div>
+	<div class="card-header">
+		<h3 class="card-title">Invoices</h3>
+	</div>
+	<div class="card-body border-bottom py-3">
+
+		<div class="d-flex">
+			<div class="mb-0">
+				Show
+				<div class="mx-2 d-inline-block">
+					<input type="text" class="form-control form-control-sm" value="8" size="3">
+				</div>
+				entries
+			</div>
+
+			<div class="mb-0 ml-auto">
+				Search:
+				<div class="ml-2 d-inline-block">
+					<input type="text" class="form-control form-control-sm">
+				</div>
+			</div>
+		</div>
+
+	</div>
+	<div class="table-responsive">
+		<table class="table card-table table-vcenter text-nowrap datatable">
+			<thead>
+			<tr>
+				<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
+				<th class="w-1p">No. {% include ui/icon.html icon="chevron-up" class="icon-sm text-dark icon-thick" %}</th>
+				<th>Invoice Subject {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>Client {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>VAT No. {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>Created {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>Status {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th>Price {% include ui/icon.html icon="code" class="icon-sm" %}</th>
+				<th></th>
+				<th></th>
+			</tr>
+			</thead>
+
+			<tbody>
+			{% for invoice in site.data.invoices limit: 8 %}
+			<tr>
+				<td><input class="form-check-input m-0 align-middle" type="checkbox"></td>
+				<td><span class="text-muted">00{{ forloop.index | plus: 1400 }}</span></td>
+				<td><a href="invoice.html" class="text-reset" tabindex="-1">{{ invoice.name }}</a></td>
+				<td>
+					{% include ui/flag.html flag=invoice.country %}
+					{{ invoice.client }}
+				</td>
+				<td>
+					{{ invoice.vat-no }}
+				</td>
+				<td>
+					{{ invoice.date }}
+				</td>
+				<td>
+					<span class="status-icon bg-{{ invoice.status }}"></span> {{ invoice.status-name }}
+				</td>
+				<td>{{ invoice.price }}</td>
+
+				<td class="text-right">
+					<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
+					<span class="dropdown ml-1">
+						<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+						{% include ui/dropdown-menu.html %}
+					</span>
+				</td>
+				<td>
+					{% include ui/icon.html icon="edit" class="icon-sm float-right" %}
+				</td>
+			</tr>
+			{% endfor %}
+			</tbody>
+		</table>
+	</div>
+	<div class="card-footer d-flex align-items-center border-top-0">
+		<p class="m-0 text-muted">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+		{% include ui/pagination.html class="m-0 ml-auto" %}
+	</div>
+</div>
diff --git a/pages/_includes/parts/buttons-table.html b/pages/_includes/parts/buttons-table.html
index ca77de37788775d89453afd7c7f06be2b16a30ba..068a1c63631fe211f50fbedb256a3d16c6032b3a 100644
--- a/pages/_includes/parts/buttons-table.html
+++ b/pages/_includes/parts/buttons-table.html
@@ -24,8 +24,8 @@
                   {% endif %}
 
                   {% assign text = type[1].title %}
-
-                  {% include ui/button.html block=true class=class icon=icon icon-only=icon-only text=text %}
+                  {% assign color = type[0] %}
+                  {% include ui/button.html block=true color=false class=class icon=icon icon-only=icon-only text=text %}
                </div>
                {% endif %}
          {% endfor %}
diff --git a/pages/_includes/ui/button.html b/pages/_includes/ui/button.html
index b1d85a2ecd8f81a4a3d9680aec069cdcfe1a040a..15bd5e47913a52221d603f707d15aae68083436b 100644
--- a/pages/_includes/ui/button.html
+++ b/pages/_includes/ui/button.html
@@ -1,6 +1,9 @@
 {% removeemptylines %}
 {% assign spinner-class = false %}
 {% assign color = include.color | default: 'secondary' %}
+{% if include.color == false %}
+{% assign color = null %}
+{% endif %}
 {% assign provider = include.provider | default: 'fe' %}
 {% if include.text %}{% assign spinner-class="mr-2" %}{% endif %}
 {% assign e = include.element | default: 'a' %}
diff --git a/pages/_includes/ui/form/selectize.html b/pages/_includes/ui/form/selectize.html
index b0d28fdabde6797326622edea46cead081f6bf42..84f86b4e3a5f9fd13f1e5ffcaa68383389eca102 100644
--- a/pages/_includes/ui/form/selectize.html
+++ b/pages/_includes/ui/form/selectize.html
@@ -2,32 +2,55 @@
 {% assign data = site.data.selects[key] %}
 {% assign options = data.options %}
 <select name="{{ key }}" id="select-{{ key }}" class="form-select">
-   {% if options == 'people' %}
-      {% for person in site.data.people limit: 20 %}
-      <option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
-      {% endfor %}
+	{% if options == 'people' %}
+		{% for person in site.data.people limit: 20 %}
+		<option value="{{ person.id }}" data-data='{"image": "{{ site.base }}/{{ person.photo }}"}'{% if person.id == value %} selected{% endif %}>{{ person.full_name }}</option>
+		{% endfor %}
 
-   {% else %}
-      {% for option in options %}
-      {% if option[1] %}
-         {% assign value = option[0] %}
-         {% assign name = option[1].name %}
-         {% assign all-data = option[1] %}
-      {% else %}
-      {% assign value = option %}
-      {% assign name = option %}
-      {% endif %}
-      <option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
-      {% endfor %}
+	{% else %}
+		{% for option in options %}
+		{% if option[1] %}
+			{% assign value = option[0] %}
+			{% assign name = option[1].name %}
+			{% assign all-data = option[1] %}
+		{% else %}
+		{% assign value = option %}
+		{% assign name = option %}
+		{% endif %}
+		<option value="{{ value }}"{% if all-data.image %} data-data='{"image": "{{ site.base }}/{{ all-data.image }}"}'{% elsif all-data.flag %} data-data='{"flag": "{{ all-data.flag }}"}'{% endif %}{% if data.value == value %} selected{% endif %}>{{ name }}</option>
+		{% endfor %}
 
-   {% endif %}
+	{% endif %}
 </select>
 
 {% append_lib selectize %}
 {% capture_global scripts %}
 <script>
-   $(document).ready(function(){
-	   $('#select-{{ key }}').selectize({});
-   });
+	$(document).ready(function () {
+		$('#select-{{ key }}').selectize({
+		{% if key == "countries" %}
+			render: {
+				option: function (data, escape) {
+					return '<div class="option"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
+				},
+				item: function (data, escape) {
+					return '<div class="d-flex align-items-center"><span class="flag flag-' + data.flag + ' mr-2 ml-n1"></span>' + escape(data.text) + '</div>';
+				}
+			}
+		{% elsif key == "people" %}
+			render: {
+				option: function (data, escape) {
+					return '<div class="option"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
+				},
+				item: function (data, escape) {
+					return '<div class="d-flex align-items-center"><span class="avatar avatar-xs rounded mr-2 ml-n1" style="background-image: url({{ site.base }}/' + data.image + ')"></span>' + escape(data.text) + '</div>';
+				}
+			}
+		{% endif %}
+		{% if data.max-items %}
+			maxItems: {{ data.max-items }}
+		{% endif %}
+		});
+	});
 </script>
 {% endcapture_global %}
diff --git a/pages/_includes/parts/pagination.html b/pages/_includes/ui/pagination.html
similarity index 100%
rename from pages/_includes/parts/pagination.html
rename to pages/_includes/ui/pagination.html
diff --git a/pages/gallery.html b/pages/gallery.html
index d876d332da7659b331c691c1cb82769f88515d6f..a6a9f49951fd3f2e33771305f3e5e84dc8a0f18a 100644
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -25,5 +25,5 @@ menu: gallery
 </div>
 
 <div class="d-flex">
-   {% include parts/pagination.html class="ml-auto" %}
+   {% include ui/pagination.html class="ml-auto" %}
 </div>
diff --git a/pages/pagination.html b/pages/pagination.html
index 067ae83a0238793cb900c6e4f1b8dc3a26beb046..313e97c24066d4626f4ac6a8fefc2a66c7febbdd 100644
--- a/pages/pagination.html
+++ b/pages/pagination.html
@@ -4,15 +4,15 @@ title: Pagination
 
 
 {% card %}
-   {% include parts/pagination.html %}
-   {% include parts/pagination.html icons=true %}
+   {% include ui/pagination.html %}
+   {% include ui/pagination.html icons=true %}
 {% endcard %}
 
 
 {% card %}
-   {% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
+   {% include ui/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
 {% endcard %}
 
 <div>
-   {% include parts/pagination.html icons=true %}
+   {% include ui/pagination.html icons=true %}
 </div>
diff --git a/pages/tmp4.html b/pages/tmp4.html
new file mode 100644
index 0000000000000000000000000000000000000000..41d9bd04943f104b374acad53f29b1cb2ce815ac
--- /dev/null
+++ b/pages/tmp4.html
@@ -0,0 +1,24 @@
+---
+tmp: true
+---
+
+<div class="mb-3">
+	<label class="form-label">Tags</label>
+	{% include ui/form/selectize.html key="tags" %}
+
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Top person</label>
+	{% include ui/form/selectize.html key="users" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Users list</label>
+	{% include ui/form/selectize.html key="people" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Countries</label>
+	{% include ui/form/selectize.html key="countries" %}
+</div>
diff --git a/pages/users.html b/pages/users.html
index 7527d66bf158ed9c6203150e458a86c2abc5d2cf..dcd957ff34bb8ca70968c609a9498d14a5fd2c58 100644
--- a/pages/users.html
+++ b/pages/users.html
@@ -52,5 +52,5 @@ menu: base.users
 </div>
 
 <div class="d-flex">
-   {% include parts/pagination.html class="ml-auto" %}
+   {% include ui/pagination.html class="ml-auto" %}
 </div>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 526d0be6666cb1de108efb58e9dfb4a11c9b0faa..4c70617bbdf23e5994e36ad03e4382eb6a5958b6 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -18,14 +18,14 @@ $icon-fonts: () !default;
 // COLORS
 $theme-color-interval: 10% !default;
 
-$light-black: rgba(0, 0, 0, .4) !default;
-$light-white: rgba(255, 255, 255, .4) !default;
-$min-black: rgba(135, 150, 165, .032) !default;
-$min-white: rgba(255, 255, 255, .032) !default;
-
 $light: #f5f7fb !default;
 $dark: #354052 !default;
 
+$light-black: rgba($dark, .4) !default;
+$light-white: rgba($light, .4) !default;
+$min-black: rgba($dark, .02) !default;
+$min-white: rgba($light, .02) !default;
+
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
 $gray-300: mix($light, $dark, 94%) !default;
@@ -52,7 +52,7 @@ $black: #000000 !default;
 $white: #ffffff !default;
 
 $primary: $blue !default;
-$secondary: $white !default;
+$secondary: $gray-800 !default;
 $success: $green !default;
 $info: $azure !default;
 $warning: $yellow !default;
@@ -102,6 +102,7 @@ $colors: (
 ) !default;
 
 $avatar-sizes: (
+  "xs": 1.5rem,
   "sm": 2rem,
   "md": 3rem,
   "lg": 4.5rem,
@@ -200,6 +201,7 @@ $badge-font-weight: $font-weight-bold !default;
 $badge-empty-size: .5rem !default;
 
 //buttons
+$input-color: $body-color !default;
 $input-btn-line-height: (22/15) !default;
 $input-btn-font-size: $font-size-base !default;
 
@@ -216,7 +218,7 @@ $input-height-sm: null !default;
 $input-height-lg: null !default;
 
 $btn-padding-x: 1rem !default;
-$btn-font-weight: $font-weight-bold !default;
+$btn-font-weight: 500 !default;
 $btn-border-radius: 3px !default;
 
 //cards
diff --git a/scss/ui/_buttons.scss b/scss/ui/_buttons.scss
index 77673c7c22aaab56688a7eab9c5e197e77d2a108..5f513b3b61bd64dda35537cb00cee76e2c97f2f9 100644
--- a/scss/ui/_buttons.scss
+++ b/scss/ui/_buttons.scss
@@ -1,5 +1,5 @@
 .btn-secondary {
-  @include button-variant($secondary, $border-color, $body-color);
+  @include button-variant($white, $border-color, $secondary);
 }
 
 .btn {
diff --git a/scss/vendor/_selectize.scss b/scss/vendor/_selectize.scss
index 8163712eb6ea43f409bde3894aff44e381ac75bd..681f43d0017a40fa982e5cef13f82fbb3626369c 100644
--- a/scss/vendor/_selectize.scss
+++ b/scss/vendor/_selectize.scss
@@ -1,9 +1,20 @@
 .selectize-control {
   padding: 0;
   border: 0;
+
+  &.multi .selectize-input > div {
+    font-size: $h5-font-size;
+    margin: 0 8px 2px 0;
+    padding: 2px 8px;
+    border-radius: $border-radius;
+    background-color: $gray-200;
+    color: inherit;
+  }
 }
 
 .selectize-input {
+  display: flex !important;
+  height: 100%;
   border: 1px solid $border-color;
   padding: $input-padding-y $input-padding-x;
   font-size: $input-font-size;