diff --git a/docs/_data/backers.json b/docs/_data/backers.json
new file mode 100644
index 00000000..6a22e3f1
--- /dev/null
+++ b/docs/_data/backers.json
@@ -0,0 +1,42 @@
+{
+  "30": [
+    {
+      "FirstName": "Adrian",
+      "LastName": "Ocneanu",
+      "Pledge": 30,
+      "Twitter": ""
+    }
+  ],
+  "10": [
+    {
+      "FirstName": "Niklas",
+      "LastName": "",
+      "Pledge": 10,
+      "Twitter": "paradoxxger"
+    },
+    {
+      "FirstName": "dansup",
+      "LastName": "",
+      "Pledge": 10,
+      "Twitter": "dsup"
+    },
+    {
+      "FirstName": "Wikiki",
+      "LastName": "",
+      "Pledge": 10,
+      "Twitter": ""
+    },
+    {
+      "FirstName": "Peter",
+      "LastName": "Ryszkiewicz",
+      "Pledge": 10,
+      "Twitter": ""
+    },
+    {
+      "FirstName": "Michael",
+      "LastName": "Schinis",
+      "Pledge": 10,
+      "Twitter": ""
+    }
+  ]
+}
diff --git a/docs/_includes/elements/patreon-item.html b/docs/_includes/elements/patreon-item.html
new file mode 100644
index 00000000..1a80f0f3
--- /dev/null
+++ b/docs/_includes/elements/patreon-item.html
@@ -0,0 +1,8 @@
+<li>
+  {{ backer.FirstName }} {{ backer.LastName }}
+  {% if backer.Twitter != "" %}
+    <a href="https://twitter.com/{{ backer.Twitter }}" target="_blank">
+      @{{ backer.Twitter }}
+    </a>
+  {% endif %}
+</li>
diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 9c5b953b..8f3dc89c 100644
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -117,6 +117,14 @@
           More
         </div>
         <div id="moreDropdown" class="navbar-dropdown {% if include.boxed %}is-boxed{% endif %}">
+          <a class="navbar-item {% if page.route == 'backers' %}is-active{% endif %}" href="{{ site.url }}/backers/">
+            <p>
+              <strong>Patreon backers</strong>
+              <br>
+              <small>Everyone who is supporting Bulma</small>
+            </p>
+          </a>
+          <hr class="navbar-divider">
           <a class="navbar-item {% if page.route == 'bulma-start' %}is-active{% endif %}" href="{{ site.url }}/bulma-start/">
             <p>
               <strong>Bulma start</strong>
diff --git a/docs/_sass/patreon.sass b/docs/_sass/patreon.sass
index 8922a49e..74a0613e 100644
--- a/docs/_sass/patreon.sass
+++ b/docs/_sass/patreon.sass
@@ -21,6 +21,9 @@
   img
     max-height: 100%
 
+.hero.bd-is-patreon
+  background-color: $patreon
+
 +from(480px)
   .bd-patreon-text
     margin-right: 1rem
diff --git a/docs/backers.html b/docs/backers.html
new file mode 100644
index 00000000..7495a54b
--- /dev/null
+++ b/docs/backers.html
@@ -0,0 +1,52 @@
+---
+title: Backers via Patreon
+layout: default
+route: backers
+---
+
+{% include navbar.html id="BackersNavbar" %}
+
+<section class="hero is-primary bd-is-patreon">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-vcentered">
+        <div class="column">
+          <h1 class="title">
+            Backers via Patreon
+          </h1>
+          <p class="subtitle">
+            Everyone who is supporting Bulma
+          </p>
+        </div>
+        <div class="column is-narrow">
+          {% include carbon.html %}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="section">
+  <div class="container">
+    <h2 class="title is-5">
+      Generous backers via Patreon ($30+)
+    </h2>
+    <div class="content">
+      <ul>
+        {% for backer in site.data.backers.30 reversed %}
+          {% include elements/patreon-item.html %}
+        {% endfor %}
+      </ul>
+    </div>
+    <h2 class="title is-5">
+      Backers via Patreon ($10+)
+    </h2>
+    <div class="content">
+      <ul>
+        {% for backer in site.data.backers.10 reversed %}
+          {% include elements/patreon-item.html %}
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</section>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 91b5d36b..611fc5bb 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -13289,6 +13289,10 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   max-height: 100%;
 }
 
+.hero.bd-is-patreon {
+  background-color: #f96854;
+}
+
 @media screen and (min-width: 480px) {
   .bd-patreon-text {
     margin-right: 1rem;