diff --git a/package.json b/package.json
index f2dd0752de007d5f58a07c968edd5504b574bf6f..1d29b65d6ba3de40141a286111a8d680e9e876e3 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "bootstrap": "twbs/bootstrap#af78de3",
     "countup.js": "2.0.4",
     "daterangepicker": "3.0.5",
+    "flatpickr": "^4.6.3",
     "fullcalendar": "3.10.1",
     "imask": "6.0.1",
     "jquery": "3.4.1",
diff --git a/pages/_data/libs.json b/pages/_data/libs.json
index db1ba2d73c1e1505c210d25595be4753a0a06972..947ae6ac697a7c8b40a1f359125c2c6db8298fc0 100644
--- a/pages/_data/libs.json
+++ b/pages/_data/libs.json
@@ -22,9 +22,9 @@
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
     ],
-    "daterangepicker": [
-      "daterangepicker/moment.min.js",
-      "daterangepicker/daterangepicker.js"
+    "flatpickr": [
+      "flatpickr/dist/flatpickr.min.js",
+      "flatpickr/dist/plugins/rangePlugin.js"
     ],
     "countup": "countup.js/dist/countUp.min.js",
     "nouislider": "nouislider/distribute/nouislider.min.js"
@@ -38,7 +38,7 @@
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
     ],
-    "daterangepicker": "daterangepicker/daterangepicker.css",
+    "flatpickr": "flatpickr/dist/flatpickr.min.css",
     "nouislider": "nouislider/distribute/nouislider.min.css"
   }
 }
diff --git a/pages/_includes/forms/form-elements-2.html b/pages/_includes/forms/form-elements-2.html
index 684ac530988a096ba88175e437cb822ac546f682..25eb47754c38d631bc76766a5f35ad56390a0061 100644
--- a/pages/_includes/forms/form-elements-2.html
+++ b/pages/_includes/forms/form-elements-2.html
@@ -1,3 +1,14 @@
+<div class="mb-3">
+	<label class="form-label">Form control rounded</label>
+	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
+	{% include ui/form/input-icon.html input-class="form-control-rounded" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Form control flush</label>
+	<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
+</div>
+
 <div class="mb-3">
    <label class="form-label">Input group</label>
    {% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}
diff --git a/pages/_includes/forms/form-elements-6.html b/pages/_includes/forms/form-elements-6.html
index 6069c2ceb1be9ab25923499c7a7c67d72a451c87..7c3c0a81cb0d3db943ec78f2a5a4ca03920e81ca 100644
--- a/pages/_includes/forms/form-elements-6.html
+++ b/pages/_includes/forms/form-elements-6.html
@@ -1,13 +1,23 @@
 {% include parts/input-datalist.html %}
 {% include parts/input-range.html %}
 
+<div class="mb-3">
+	<label class="form-label">Datepicker</label>
+	{% include ui/form/calendar.html class="mb-2" %}
+	{% include ui/form/calendar.html id="time" layout="icon" %}
+</div>
+
+<div class="mb-3">
+	<label class="form-label">Inline datepicker</label>
+	{% include ui/form/calendar.html id="inline" inline=true %}
+</div>
+
 <div class="mb-3">
 	<label class="form-label">Progress</label>
 	{% include ui/progress.html class="mb-2" %}
 	{% include ui/progress.html indeterminate=true color="green" %}
 </div>
 
-
 <div class="mb-3">
 	<label class="form-label">Form buttons</label>
 	<div class="btn-list">
@@ -16,17 +26,6 @@
 	</div>
 </div>
 
-<div class="mb-3">
-	<label class="form-label">Form control rounded</label>
-	<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
-	{% include ui/form/input-icon.html input-class="form-control-rounded" %}
-</div>
-
-<div class="mb-3">
-	<label class="form-label">Form control flush</label>
-	<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
-</div>
-
 <div class="mb-3">
 	<label class="form-label">Tags input</label>
 	{% include ui/form/selectize.html key="tags" %}
diff --git a/pages/_includes/ui/form/calendar.html b/pages/_includes/ui/form/calendar.html
new file mode 100644
index 0000000000000000000000000000000000000000..a9bc5c2904b6743cb4d5c8528a0b6c127f2ed018
--- /dev/null
+++ b/pages/_includes/ui/form/calendar.html
@@ -0,0 +1,40 @@
+{% assign type = include.type | default: 'date' %}
+{% assign placeholder = include.placeholder | default: 'Select a date' %}
+{% assign id = include.id | default: 'simple' %}
+
+{% capture input %}
+<input id="calendar-{{ id }}" type="{{ type }}" class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} />
+{% endcapture %}
+
+{% if include.inline %}
+	<div id="calendar-{{ id }}"></div>
+{% elsif include.layout == 'icon' %}
+	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
+		{{ input | replace: include.class, '' }}
+		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
+	</div>
+{% elsif include.layout == 'icon-prepend' %}
+	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
+		<span class="input-icon-addon">{% include ui/icon.html icon="calendar" %}</span>
+		{{ input | replace: include.class, ''  }}
+	</div>
+{% else %}
+	{{ input }}
+{% endif %}
+
+{% append_lib flatpickr %}
+{% capture_global scripts %}
+<script>
+	document.addEventListener("DOMContentLoaded", function () {
+		{% if jekyll.environment == 'development' %}
+		window.tabler_calendar = window.tabler_calendar || {};
+		{% endif %}
+
+		{% if jekyll.environment == 'development' %}window.tabler_calendar["chart-{{ id }}"] = {% endif %}flatpickr(document.getElementById('calendar-{{ id }}'), {
+			{% if include.inline %}
+			inline: true,
+			{% endif %}
+		});
+	});
+</script>
+{% endcapture_global %}
\ No newline at end of file
diff --git a/pages/tmp.html b/pages/tmp.html
index 60591d744267edbbd11b89c7e511079f64896342..cf800e124853ba6e39d24f044625d2c699c35035 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -3,6 +3,14 @@ menu: a.b.c
 ---
 
 <div class="row">
+	<div class="col-xl-4">
+		<div class="card">
+			<div class="card-body">
+
+			</div>
+		</div>
+	</div>
+
 	<div class="col-md-6 col-xl-4">
 		{% assign person = site.data.people[0] %}
 		<div class="card">
diff --git a/scss/_tabler-core.scss b/scss/_tabler-core.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b4a86ddab199f7c980f55f9a7cbd145a32ba0c68
--- /dev/null
+++ b/scss/_tabler-core.scss
@@ -0,0 +1,63 @@
+@import "config";
+@import "bootstrap-components";
+
+@import "fonts/webfonts";
+
+@import "layout/core";
+@import "layout/layout";
+@import "layout/navbar";
+@import "layout/sidenav";
+@import "layout/page";
+
+@import "ui/alerts";
+@import "ui/avatars";
+@import "ui/badges";
+@import "ui/breadcrumbs";
+@import "ui/buttons";
+@import "ui/calendars";
+@import "ui/cards";
+@import "ui/close";
+@import "ui/dropdowns";
+@import "ui/empty";
+@import "ui/grid";
+@import "ui/highlight";
+@import "ui/icons";
+@import "ui/forms";
+@import "ui/forms/form-icon";
+@import "ui/forms/form-colorinput";
+@import "ui/forms/form-imagecheck";
+@import "ui/forms/form-selectgroup";
+@import "ui/forms/form-custom";
+@import "ui/forms/validation";
+@import "ui/legend";
+@import "ui/lists";
+@import "ui/loaders";
+@import "ui/login";
+@import "ui/modals";
+@import "ui/nav";
+@import "ui/stars";
+@import "ui/pagination";
+@import "ui/popovers";
+@import "ui/progress";
+@import "ui/ribbons";
+@import "ui/stamps";
+@import "ui/steps";
+@import "ui/tables";
+@import "ui/toasts";
+@import "ui/toolbar";
+@import "ui/typo";
+@import "ui/charts";
+
+@import "ui/examples";
+
+@import "utils/border";
+@import "utils/background";
+@import "utils/colors";
+@import "utils/scroll";
+@import "utils/sizing";
+@import "utils/opacity";
+@import "utils/shadow";
+
+@import "rtl";
+
+@import "debug";
\ No newline at end of file
diff --git a/scss/_tabler-vendors.scss b/scss/_tabler-vendors.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80614449595de4a89af410bc9d87bbbca4bf3030
--- /dev/null
+++ b/scss/_tabler-vendors.scss
@@ -0,0 +1,7 @@
+@import "vendor/pace";
+@import "vendor/selectize";
+@import "vendor/jqvmap";
+@import "vendor/apexcharts";
+@import "vendor/fullcalendar";
+@import "vendor/flatpickr";
+@import "vendor/nouislider";
\ No newline at end of file
diff --git a/scss/tabler.scss b/scss/tabler.scss
index b8e6039715b3cf4540abf2a8a48c44bf88f70485..459bd0944279481e5694bf3459149e4ee76a7585 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -5,75 +5,9 @@
  * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  */
 
-@import "config";
-@import "bootstrap-components";
 
-@import "fonts/webfonts";
+@import "tabler-core";
+@import "tabler-vendors";
 
-@import "layout/core";
-@import "layout/layout";
-@import "layout/navbar";
-@import "layout/sidenav";
-@import "layout/page";
-
-@import "ui/alerts";
-@import "ui/avatars";
-@import "ui/badges";
-@import "ui/breadcrumbs";
-@import "ui/buttons";
-@import "ui/calendars";
-@import "ui/cards";
-@import "ui/close";
-@import "ui/dropdowns";
-@import "ui/empty";
-@import "ui/grid";
-@import "ui/highlight";
-@import "ui/icons";
-@import "ui/forms";
-@import "ui/forms/form-icon";
-@import "ui/forms/form-colorinput";
-@import "ui/forms/form-imagecheck";
-@import "ui/forms/form-selectgroup";
-@import "ui/forms/form-custom";
-@import "ui/forms/validation";
-@import "ui/legend";
-@import "ui/lists";
-@import "ui/loaders";
-@import "ui/login";
-@import "ui/modals";
-@import "ui/nav";
-@import "ui/stars";
-@import "ui/pagination";
-@import "ui/popovers";
-@import "ui/progress";
-@import "ui/ribbons";
-@import "ui/stamps";
-@import "ui/steps";
-@import "ui/tables";
-@import "ui/toasts";
-@import "ui/toolbar";
-@import "ui/typo";
-@import "ui/charts";
-
-@import "ui/examples";
-
-@import "vendor/pace";
-@import "vendor/selectize";
-@import "vendor/jqvmap";
-@import "vendor/apexcharts";
-@import "vendor/fullcalendar";
-@import "vendor/nouislider";
-
-@import "utils/border";
-@import "utils/background";
-@import "utils/colors";
-@import "utils/scroll";
-@import "utils/sizing";
-@import "utils/opacity";
-@import "utils/shadow";
-
-@import "rtl";
-
-@import "debug";
 
 
diff --git a/scss/ui/forms/_form-icon.scss b/scss/ui/forms/_form-icon.scss
index f09c2eaaf0213ab20e68d14adb619f92a9890868..be0d5fe54988a5aec124ed204b4a27a5cbfcd26c 100644
--- a/scss/ui/forms/_form-icon.scss
+++ b/scss/ui/forms/_form-icon.scss
@@ -24,11 +24,7 @@ Icon input
   min-width: 2.5rem;
   color: $text-muted;
   pointer-events: none;
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
+  font-size: 1.2em;
 
   &:last-child {
     right: 0;
diff --git a/scss/vendor/_flatpickr.scss b/scss/vendor/_flatpickr.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ad493fd2261e5dc41ab7c4f9271ad371aaa5bb53
--- /dev/null
+++ b/scss/vendor/_flatpickr.scss
@@ -0,0 +1,57 @@
+.flatpickr-input {
+  background: $input-bg !important;
+}
+
+.flatpickr-calendar {
+  border: $input-border-width solid $input-border-color;
+  border-radius: $input-border-radius;
+  padding: .5rem;
+
+  .flatpickr-innerContainer,
+  .flatpickr-rContainer,
+  .dayContainer,
+  .flatpickr-days {
+    width: 100%;
+  }
+
+  &.inline {
+    width: 100%;
+    box-shadow: none;
+
+    .dayContainer,
+    .flatpickr-day {
+      max-width: 100%;
+      min-width: 0;
+    }
+  }
+}
+
+.flatpickr-day {
+  color: inherit;
+  border-radius: $border-radius;
+  user-select: none;
+
+  &.today {
+    border-color: $border-color;
+  }
+
+  &.selected {
+    background-color: $primary;
+  }
+}
+
+span.flatpickr-weekday {
+  @include subheader;
+}
+
+.flatpickr-months {
+  .flatpickr-monthDropdown-months {
+    appearance: none;
+    font-weight: inherit;
+  }
+
+  .flatpickr-prev-month svg,
+  .flatpickr-next-month svg {
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/scss/vendor/_selectize.scss b/scss/vendor/_selectize.scss
index 8eeaff95ca285525d03aadb8c6f2feb2faf0221a..9a22e0b889a93ffb7e763258547bf33009ae3fbc 100644
--- a/scss/vendor/_selectize.scss
+++ b/scss/vendor/_selectize.scss
@@ -2,13 +2,19 @@
   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;
+  &.multi .selectize-input {
+    &.has-items {
+      padding-left: 6px;
+    }
+
+    > div {
+      font-size: $h5-font-size;
+      margin: 0 6px 2px 0;
+      padding: 2px 8px;
+      border-radius: $border-radius;
+      background-color: $gray-200;
+      color: inherit;
+    }
   }
 
   .remove {