diff --git a/docs/_data/links.json b/docs/_data/links.json
index ce39a413..fbc04d99 100644
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -31,7 +31,7 @@
       "path": "/documentation/overview/customize"
     },
     "overview-classes": {
-      "name": "Classes",
+      "name": "CSS classes",
       "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
       "color": "link",
       "icon_brand": "true",
@@ -132,12 +132,12 @@
       "icon": "cogs",
       "path": "/documentation/modifiers"
     },
-    "modifiers-syntax": {
-      "name": "Syntax",
+    "overview-modifiers": {
+      "name": "Modifiers syntax",
       "subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
       "color": "orange",
       "icon": "code",
-      "path": "/documentation/modifiers/syntax"
+      "path": "/documentation/overview/modifiers"
     },
     "modifiers-helpers": {
       "name": "Helpers",
@@ -268,37 +268,44 @@
     "layout-container": {
       "name": "Container",
       "subtitle": "A simple <strong>container</strong> to center your content horizontally",
-      "path": "/documentation/layout/container"
+      "path": "/documentation/layout/container",
+      "icon": "arrows-alt-h"
     },
     "layout-level": {
       "name": "Level",
       "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
-      "path": "/documentation/layout/level"
+      "path": "/documentation/layout/level",
+      "icon": "ruler-horizontal"
     },
     "layout-media": {
       "name": "Media Object",
       "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
-      "path": "/documentation/layout/media-object"
+      "path": "/documentation/layout/media-object",
+      "icon": "th-list"
     },
     "layout-hero": {
       "name": "Hero",
       "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
-      "path": "/documentation/layout/hero"
+      "path": "/documentation/layout/hero",
+      "icon": "star"
     },
     "layout-section": {
       "name": "Section",
       "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
-      "path": "/documentation/layout/section"
+      "path": "/documentation/layout/section",
+      "icon": "square"
     },
     "layout-footer": {
       "name": "Footer",
       "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
-      "path": "/documentation/layout/footer"
+      "path": "/documentation/layout/footer",
+      "icon": "window-minimize"
     },
     "layout-tiles": {
       "name": "Tiles",
       "subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
-      "path": "/documentation/layout/tiles"
+      "path": "/documentation/layout/tiles",
+      "icon": "th"
     },
     "form": {
       "name": "Form",
@@ -620,9 +627,8 @@
     "bulma-start"
   ],
   "categories": {
-    "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
+    "overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
     "customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
-    "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
     "helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
     "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
     "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
diff --git a/docs/_includes/examples/navbar-bottom.html b/docs/_includes/examples/navbar-bottom.html
index ee78fa3b..85783b57 100644
--- a/docs/_includes/examples/navbar-bottom.html
+++ b/docs/_includes/examples/navbar-bottom.html
@@ -23,7 +23,7 @@
           <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
             Overview
           </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+          <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
             Modifiers
           </a>
           <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
diff --git a/docs/_includes/examples/navbar-color.html b/docs/_includes/examples/navbar-color.html
index bf2f43ad..4ced54b8 100644
--- a/docs/_includes/examples/navbar-color.html
+++ b/docs/_includes/examples/navbar-color.html
@@ -27,7 +27,7 @@
           <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
             Overview
           </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+          <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
             Modifiers
           </a>
           <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
diff --git a/docs/_includes/examples/navbar.html b/docs/_includes/examples/navbar.html
index 8e8a8ddd..d7775b84 100644
--- a/docs/_includes/examples/navbar.html
+++ b/docs/_includes/examples/navbar.html
@@ -23,7 +23,7 @@
           <a class="navbar-item" href="{{ site.url }}/documentation/overview/start/">
             Overview
           </a>
-          <a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
+          <a class="navbar-item" href="{{ site.url }}/documentation/overview/modifiers/">
             Modifiers
           </a>
           <a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
diff --git a/docs/_includes/snippets/getting-started.html b/docs/_includes/snippets/getting-started.html
index 07bdb23f..3efeb955 100644
--- a/docs/_includes/snippets/getting-started.html
+++ b/docs/_includes/snippets/getting-started.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Hello Bulma!</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">
-    <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
   </head>
   <body>
   <section class="section">
diff --git a/docs/_includes/subnav/subnav-modifiers.html b/docs/_includes/subnav/subnav-modifiers.html
index ddd8ae58..9bacd3a0 100644
--- a/docs/_includes/subnav/subnav-modifiers.html
+++ b/docs/_includes/subnav/subnav-modifiers.html
@@ -1,10 +1,10 @@
 <nav class="navbar has-shadow">
   <div class="container">
     <div class="navbar-tabs">
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modifiers/">
         Syntax
       </a>
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/helpers/">
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/helpers/">
         Helpers
       </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
diff --git a/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md
index 75acdba9..7130beac 100644
--- a/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md
+++ b/docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md
@@ -119,4 +119,4 @@ But you can also add the `is-multiline` **modifier** on the `columns` container,
 
 ### Helpers section
 
-While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/modifiers/helpers/)!
+While modifiers are specific to each Bulma element, **helpers** are general utility classes that can be applied on almost _any_ element. Check out the new [helpers documentation](/documentation/helpers/)!
diff --git a/docs/alternative-to-bootstrap.html b/docs/alternative-to-bootstrap.html
index 18ce2bd8..a26796d1 100644
--- a/docs/alternative-to-bootstrap.html
+++ b/docs/alternative-to-bootstrap.html
@@ -18,7 +18,7 @@ bulma:
 - type: "bulma"
   icon: "heart"
   title: "Easy-to-learn syntax"
-  content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/modifiers/syntax/)"
+  content: "With simple readable **class names** like `.button` or `.title`, and a straightforward **modifiers system** like `.is-primary` or `.is-large`, it's easy to pick up Bulma in **minutes**.<br>[More about modifiers](/documentation/overview/modifiers/)"
 - type: "bulma"
   icon: "font-awesome"
   icon_brand: true
@@ -27,7 +27,7 @@ bulma:
 - type: "bulma"
   icon: "plus"
   title: "100+ useful CSS helpers"
-  content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/modifiers/responsive-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/modifiers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/modifiers/helpers/)'
+  content: 'Bulma ships with more than **100 helpers** to specify color, display, and spacing.<br>[Responsive helpers](/documentation/helpers/visibility-helpers/) <span class="separator">–</span> [Typography helpers](/documentation/helpers/typography-helpers/) <span class="separator">–</span> [Other helpers](/documentation/helpers/)'
 - type: "bulma"
   icon: "code"
   title: "No JavaScript"
diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index 3dcd0353..848bc03c 100644
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -101,7 +101,7 @@ meta:
 
 <div class="content">
   <p>
-    Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
+    Since icon fonts are simply <strong>text</strong>, you can use the <a href="{{ site.url }}/documentation/helpers/color-helpers/">color helpers</a> to change the icon's color.
   </p>
 </div>
 
diff --git a/docs/documentation/overview/modifiers.html b/docs/documentation/overview/modifiers.html
new file mode 100644
index 00000000..ef3cac24
--- /dev/null
+++ b/docs/documentation/overview/modifiers.html
@@ -0,0 +1,229 @@
+---
+title: Modifiers syntax
+layout: documentation
+doc-tab: overview
+doc-subtab: modifiers
+breadcrumb:
+- home
+- documentation
+- overview
+- overview-modifiers
+---
+
+{% capture button_example %}
+<a class="button">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_primary_example %}
+<a class="button is-primary">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_colors %}
+<a class="button is-primary">
+  Button
+</a>
+<a class="button is-link">
+  Button
+</a>
+<a class="button is-info">
+  Button
+</a>
+<a class="button is-success">
+  Button
+</a>
+<a class="button is-warning">
+  Button
+</a>
+<a class="button is-danger">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_sizes %}
+<a class="button is-small">
+  Button
+</a>
+<a class="button">
+  Button
+</a>
+<a class="button is-medium">
+  Button
+</a>
+<a class="button is-large">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_states %}
+<a class="button is-primary is-outlined">
+  Button
+</a>
+<a class="button is-loading">
+  Button
+</a>
+<a class="button" disabled>
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_combinations %}
+<a class="button is-primary is-small" disabled>
+  Button
+</a>
+<a class="button is-info is-loading">
+  Button
+</a>
+<a class="button is-danger is-outlined is-large">
+  Button
+</a>
+{% endcapture %}
+
+<div class="columns">
+  <div class="column">
+    <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
+  </div>
+  <div class="column">
+    <p>
+      {{button_example}}
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{button_example}}{% endhighlight %}
+  </div>
+</div>
+<div class="columns">
+  <div class="column">
+    <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
+  </div>
+  <div class="column">
+    <p>
+      {{button_primary_example}}
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{button_primary_example}}{% endhighlight %}
+  </div>
+</div>
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>You can use one of the <strong>6 main colors</strong>:</p>
+      <ul>
+        <li><code>is-primary</code></li>
+        <li><code>is-link</code></li>
+        <li><code>is-info</code></li>
+        <li><code>is-success</code></li>
+        <li><code>is-warning</code></li>
+        <li><code>is-danger</code></li>
+      </ul>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-link">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-info">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-success">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-warning">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-danger">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    <div class="highlight-full">
+      {% highlight html %}{{ button_colors }}{% endhighlight %}
+    </div>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>You can also alter the <strong>size</strong>:</p>
+      <ul>
+        <li><code>is-small</code></li>
+        <li><code>is-medium</code></li>
+        <li><code>is-large</code></li>
+      </ul>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-small">Button</a>
+    </p>
+    <p class="field">
+      <a class="button">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-medium">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-large">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{ button_sizes }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
+      <ul>
+        <li><code>is-outlined</code></li>
+        <li><code>is-loading</code></li>
+        <li><code>[disabled]</code></li>
+      </ul>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary is-outlined">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-loading">Button</a>
+    </p>
+    <p class="field">
+      <a class="button" disabled>Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{ button_states }}{% endhighlight %}
+  </div>
+</div>
+
+<div class="columns">
+  <div class="column">
+    <div class="content">
+      As a result, it's very easy to <strong>combine modifiers:</strong>
+    </div>
+  </div>
+  <div class="column">
+    <p class="field">
+      <a class="button is-primary is-small" disabled>Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-info is-loading">Button</a>
+    </p>
+    <p class="field">
+      <a class="button is-danger is-outlined is-large">Button</a>
+    </p>
+  </div>
+  <div class="column is-half">
+    {% highlight html %}{{ button_combinations }}{% endhighlight %}
+  </div>
+</div>