diff --git a/js/tabler.js b/js/tabler.js
index 79ebc0a96..ee9bc5440 100644
--- a/js/tabler.js
+++ b/js/tabler.js
@@ -1,3 +1,5 @@
+import { CountUp } from "countup.js";
+
 const tabler = {
   hexToRgbA: function(hex, opacity) {
     let c;
@@ -59,6 +61,19 @@ $(document).ready(function() {
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
 
+  /* 
+    CountUp
+  */
+  let countups = document.querySelectorAll("[data-countup]");
+  for(let i = 0;i<countups.length;i++){
+    let dataCountUp;
+    if(countups[i].getAttribute("data-countup") != ''){
+      dataCountUp = JSON.parse(countups[i].getAttribute("data-countup"));
+    }
+    let countup = new CountUp(countups[i],parseFloat(countups[i].innerText),dataCountUp);
+    countup.start();
+  }
+
   /*
   Imask plugin
    */
diff --git a/package.json b/package.json
index 66681d7d6..181e311b3 100644
--- a/package.json
+++ b/package.json
@@ -111,6 +111,7 @@
     "apexcharts": "3.11.2",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#c6cfc23",
+    "countup.js": "2.0.4",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",
diff --git a/pages/_data/libs.json b/pages/_data/libs.json
index 7edbc55b7..b3e6824a5 100644
--- a/pages/_data/libs.json
+++ b/pages/_data/libs.json
@@ -22,7 +22,8 @@
       "@fullcalendar/interaction/main.min.js",
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
-    ]
+    ],
+    "countup": "countup.js/dist/countUp.min.js"
   },
   "css": {
     "jqvmap": "jqvmap/dist/jqvmap.min.css",
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 89c2173c0..d31bbd0c8 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -136,6 +136,9 @@ docs:
     colors: 
       title: Colors
       url: docs/colors.html
+    countup:
+      title: Countup
+      url: docs/countup.html
     cursors: 
       title: Cursors
       url: docs/cursors.html
diff --git a/pages/_docs/countup.md b/pages/_docs/countup.md
new file mode 100644
index 000000000..f15779422
--- /dev/null
+++ b/pages/_docs/countup.md
@@ -0,0 +1,115 @@
+---
+title: Countup
+menu: docs.countup
+---
+
+Countups with many options that can be found [**here**](https://inorganik.github.io/countUp.js/)
+
+To make countup add `data-countup` to any html text tag.
+
+### Default countup
+
+Set number to count up.
+
+{% example %}
+    <h1 data-countup>30000</h1>
+{% endexample %}
+
+### Duration
+
+Set the `duration` of the countup. (2s is set by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"duration":4}'>30000</h1>
+    <h1 data-countup='{"duration":6}'>30000</h1>
+{% endexample %}
+
+### Starting value
+
+Set the start value of countup using `startVal`.
+If you set it bigger than the `count`, countup will run reverse.
+
+{% example %}
+    <h1 data-countup='{"startVal":12345}'>30000</h1>
+    <h1 data-countup='{"startVal":47655}'>30000</h1>
+{% endexample %}
+
+### Decimal places
+
+Set how many decimal places to show using `decimalPlaces`.
+
+{% example %}
+    <h1 data-countup>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
+{% endexample %}
+
+### Easing
+
+Disable easing using `"useEasing": false`. (`true` by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"useEasing": false}'>30000</h1>
+{% endexample %}
+
+### Use grouping
+
+Disable grouping using `"useGrouping": false`. (`true` by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"useGrouping": false}'>30000</h1>
+{% endexample %}
+
+### Separator
+
+Set seperator that seperates groups using `separator`. (`,` by default)
+
+{% example %}
+    <h1 data-countup>3000000</h1>
+    <h1 data-countup='{"separator":" "}'>3000000</h1>
+    <h1 data-countup='{"separator":"-"}'>3000000</h1>
+    <h1 data-countup='{"separator":":"}'>3000000</h1>
+{% endexample %}
+
+### Decimal separator
+
+Set decimal separator using `decimal`. (`.` by default)
+
+{% example %}
+    <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
+{% endexample %}
+
+### Prefix
+
+Set countup prefix using `prefix`.
+
+{% example %}
+    <h1 data-countup='{"prefix":"$"}'>30000</h1>
+    <h1 data-countup='{"prefix":"€"}'>30000</h1>
+    <h1 data-countup='{"prefix":"£"}'>30000</h1>
+{% endexample %}
+
+### Suffix
+
+Set countup suffix using `suffix`.
+
+{% example %}
+    <h1 data-countup='{"suffix":"%"}'>30</h1>
+    <h1 data-countup='{"suffix":"‰"}'>30</h1>
+    <h1 data-countup='{"suffix":"k"}'>30</h1>
+{% endexample %}
+
+Of course you can mix all of these:
+
+{% example %}
+    <h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+{% endexample %}
+
+To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
\ No newline at end of file
diff --git a/pages/tmp4.html b/pages/tmp4.html
new file mode 100644
index 000000000..36dc0c042
--- /dev/null
+++ b/pages/tmp4.html
@@ -0,0 +1,39 @@
+---
+tmp: true
+menu: a.c.d
+---
+
+
+<div class="card">
+    <div class="card-header">
+        <h2 class="card-title">CountUp</h2>
+    </div>
+	<div class="card-body">
+        <div class="row">
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup>30000</h1>
+                <small>(Default)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
+                <small>(Duration 10s)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
+                <small>(No comma)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
+                <small>(Space)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
+                <small>(Suffix)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
+                <small>(Prefix)</small>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file