diff --git a/README.md b/README.md
index 3451299683a0ebf70c51ce9ffb5d43efc351b992..b6316873c752d86fe0d85c98f68044d37b4906bc 100644
--- a/README.md
+++ b/README.md
@@ -73,7 +73,7 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 
 ## Contributors
 
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+This project exists thanks to all the people who contribute. [[Contribute](https://github.com/tabler/tabler/graphs/contributors)].
 <a href="https://github.com/tabler/tabler/graphs/contributors"><img src="https://opencollective.com/tabler/contributors.svg?width=890&button=false"></a>
 
 ## Backers
diff --git a/js/tabler.js b/js/tabler.js
index f356d55b0de06b4ad033e71d745fcb94f13c0f97..e4dc211734b17bbbc6a659c839d756a108c3231c 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -35,6 +35,10 @@ const tabler = {
 $(document).ready(function () {
 	const $body = $('body');
 
+  // $('[data-toggle="tooltip"]').tooltip();
+  
+  $('[data-toggle="toast"]').toast();
+  
 	$body.on('click', '[data-toggle="menubar"]', function (e) {
 		$body.toggleClass('aside-visible');
 
diff --git a/package.json b/package.json
index 6577b974ec40b7eb9401c843502141b4965a4367..207ab03514f1e036a5b0fa01532b1750ef938356 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#46f086c",
     "countup.js": "2.0.4",
+    "daterangepicker": "3.0.5",
     "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 b3e6824a5475ad4dabd1269bcfe33a7a756eb010..a9537bc95a20004ddfd47132afd51af7f3698833 100644
--- a/pages/_data/libs.json
+++ b/pages/_data/libs.json
@@ -23,6 +23,10 @@
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
     ],
+    "daterangepicker": [
+      "daterangepicker/moment.min.js",
+      "daterangepicker/daterangepicker.js"
+    ],
     "countup": "countup.js/dist/countUp.min.js"
   },
   "css": {
@@ -33,6 +37,7 @@
       "@fullcalendar/daygrid/main.min.css",
       "@fullcalendar/timegrid/main.min.css",
       "@fullcalendar/list/main.min.css"
-    ]
+    ],
+    "daterangepicker": "daterangepicker/daterangepicker.css"
   }
 }
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index 1e5598f6b8791bfff46bc3ba241c0f7cc069e2ce..faf9efda27457fdb977f32a2921288d0aabb2150 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -5,10 +5,25 @@ description: The toast component is like an alert box that is only shown for a c
 bootstrap-link: components/toasts/
 ---
 
-
-
 ### Default markup
 
 {% example %}
 {% include ui/toast.html %}
 {% endexample %}
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
+
+{% example html class=bg-gray %}
+{% include ui/toast.html %}
+{% endexample %}
+
+### Stacking toasts
+
+If you want to stack toasts just put them in the same container.
+
+{% example %}
+{% include ui/toast.html person-id=3 %}
+{% include ui/toast.html date="7 mins ago" text="This is another toast message." %}
+{% endexample %}
\ No newline at end of file
diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html
index dd034fe769cb7570f7a6267aa26813c5cd3fef4c..00da6780fc3046dac0e23bd4058048f33c4acd1d 100644
--- a/pages/_includes/layout/js.html
+++ b/pages/_includes/layout/js.html
@@ -8,4 +8,5 @@
 {% endfor %}
 
 <!-- Tabler Core -->
+
 <script src="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/js/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.js?{{ site.time | date: '%s' }}"></script>
diff --git a/pages/_includes/ui/toast.html b/pages/_includes/ui/toast.html
index fd0227a9c714569b42ead438557acbea57ce2093..ded90207e4b7aecf26179d0b5236906cde238dae 100644
--- a/pages/_includes/ui/toast.html
+++ b/pages/_includes/ui/toast.html
@@ -1,6 +1,6 @@
 {% assign person-id = include.person-id | default: 2 %}
 {% assign person = site.data.people[person-id] %}
-<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
    <div class="toast-header">
       {% include ui/avatar.html person=person class="mr-2" size="sm" %}
       <strong class="mr-auto">{{ person.full_name }}</strong>
@@ -10,6 +10,6 @@
       </button>
    </div>
    <div class="toast-body">
-      Hello, world! This is a toast message.
+      {{ include.text | default: 'Hello, world! This is a toast message.' }}
    </div>
 </div>
diff --git a/pages/_plugins/jekyll-example.rb b/pages/_plugins/jekyll-example.rb
index d4325087f1b0a9f9cfd56a6340165fbe947e794a..185e53d3c8a1bd21868fd9521fd8e7e941f91351 100644
--- a/pages/_plugins/jekyll-example.rb
+++ b/pages/_plugins/jekyll-example.rb
@@ -82,7 +82,7 @@ Valid syntax: example <lang> [id=foo]
     def example(output)
       output = output.gsub(/<hide>/, "").gsub(/<\/hide>/, "")
 
-      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
+      "<div class=\"example" + (@options[:columns] ? " example-bg" : "") + (@options[:class] ? " " + @options[:class] : "") + "\"" + (@options[:id] ? " data-example-id=\"#{@options[:id]}\"" : "") + ">\n" + (@options[:columns] ? "<div class=\"example-column example-column-" + @options[:columns] + "\">\n" : "") + (@options[:wrapper] ? "<div class=\"" + @options[:wrapper] + "\">\n" : "") + (@options[:"max-width"] ? "<div style=\"max-width: " + @options[:"max-width"] + "px; margin: 0 auto;\">\n" : "") + output + (@options[:wrapper] ? "\n</div>" : "") + (@options[:columns] ? "\n</div>" : "") + (@options[:"max-width"] ? "\n</div>" : "") + "\n</div>"
     end
 
   end
diff --git a/pages/tmp.html b/pages/tmp.html
index bd28673113c66a514c1444521c21896dbc6f5465..00dc727aa972a01ffe3c5747ec84bd0d3a68ae2e 100644
--- a/pages/tmp.html
+++ b/pages/tmp.html
@@ -58,4 +58,13 @@ menu: a.b.c
 		{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
 	</div>
 </div>
-
+<div class="row">
+   <div class="col-10 col-sm-8 col-md-6 col-lg-4">
+      <div class="card">
+         <div class="card-body d-flex justify-content-between table-responsive">
+            <p class="mb-0 mr-3 d-flex align-items-center text-nowrap">Pick date:</p>
+            <input type="text" name="dates" class="form-control text-center ml-4" size="20">
+         </div>
+      </div>
+   </div>
+</div>
\ No newline at end of file
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 38d47342f5e16c5add152bd82551de47bfb8648f..11b78db14634b2f50233f7ab57bc71e76ab5eca0 100644
--- a/scss/ui/_forms.scss
+++ b/scss/ui/_forms.scss
@@ -35,6 +35,9 @@ Form control
     color: $text-muted;
     user-select: none;
   }
+  &[size]{
+    width: auto;
+  }
 }
 
 .form-control-light {
diff --git a/scss/ui/_toasts.scss b/scss/ui/_toasts.scss
index 80e5271a71786aa7da50b70f55a9dcb8fc4ccd60..cf264fd4e6d4f5a96396bbdaf490a7bc5aed560a 100644
--- a/scss/ui/_toasts.scss
+++ b/scss/ui/_toasts.scss
@@ -1,3 +1,6 @@
 .toast-header {
   user-select: none;
 }
+.toast button[data-dismiss="toast"]{
+  outline: none;
+}