diff --git a/_config.yml b/_config.yml
index e5254349..81414885 100644
--- a/_config.yml
+++ b/_config.yml
@@ -34,7 +34,7 @@ social_image_path: /assets/brand/bootstrap-social.png
 current_version:  4.0.0-beta.4
 docs_version:     4.0
 repo:             https://github.com/FezVrasta/bootstrap-material-design
-gitter:           https://gitter.im/FezVrasta/bootstrap-material-design
+spectrum:         https://spectrum.chat/bootstrap-md
 
 download:
   source:         https://github.com/FezVrasta/bootstrap-material-design/releases
diff --git a/_includes/docs-navbar.html b/_includes/docs-navbar.html
index ab29a960..99094d0f 100755
--- a/_includes/docs-navbar.html
+++ b/_includes/docs-navbar.html
@@ -49,8 +49,8 @@
       </a>
     </li>
     <li class="nav-item">
-      <a class="nav-link p-2" href="{{ site.gitter }}" target="_blank" rel="noopener" aria-label="Gitter">
-        {% include icons/gitter.svg class="navbar-nav-svg" %}
+      <a class="nav-link p-2" href="{{ site.spectrum }}" target="_blank" rel="noopener" aria-label="Spectrum">
+        {% include icons/spectrum.svg class="navbar-nav-svg" %}
       </a>
     </li>
   </ul>
diff --git a/_includes/icons/gitter.svg b/_includes/icons/gitter.svg
deleted file mode 100644
index 0934be9c..00000000
--- a/_includes/icons/gitter.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Gitter</title>
-<rect x="115.9" y="26.2" width="40" height="297.6" fill="currentColor"/>
-<rect x="358.9" y="94.5" width="40" height="229.3" fill="currentColor"/>
-<rect x="196.4" y="94.5" width="40" height="391.3" fill="currentColor"/>
-<rect x="277.9" y="94.5" width="40" height="391.3" fill="currentColor"/>
-</svg>
diff --git a/_includes/icons/spectrum.svg b/_includes/icons/spectrum.svg
new file mode 100644
index 00000000..1300f9f6
--- /dev/null
+++ b/_includes/icons/spectrum.svg
@@ -0,0 +1,3 @@
+<svg{% if include.class %} class="{{ include.class }}"{% endif %} xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} focusable="false"><title>Spectrum</title>
+  <path fill="currentColor" fill-rule="evenodd" d="M256,51.2C21.5,51.2,0,83.4,0,222.2c0,94.2,9.7,139.3,89.1,158.7l0,0v58.4c0.5,12.4,11,22.1,23.5,21.6c4-0.2,8-1.4,11.4-3.6l98.8-63.5H256c234.5,0,256-32.3,256-171.5S490.5,51.2,256,51.2z M144.9,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C177.9,251,163,265.5,144.9,265.2C144.9,265.2,144.9,265.2,144.9,265.2zM256,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C289,251,274.1,265.5,256,265.2C256,265.2,256,265.2,256,265.2z M367.1,265.2c-17.8-0.6-31.8-15.5-31.2-33.3c0.6-17.8,15.5-31.8,33.3-31.2c17.4,0.6,31.2,14.8,31.2,32.2C400.1,251,385.2,265.5,367.1,265.2C367.1,265.2,367.1,265.2,367.1,265.2z" />
+</svg>