diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index b0e7e6d4..485ece27 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -2,13 +2,8 @@
 layout: skeleton
 ---
 
-{% from 'nav.njk' import nav_link with context %}
-{% set nav %}
-  {{ nav_link('/', false) }}
-  {{ nav_link('/foundations') }}
-  {{ nav_link('/components') }}
-  {{ nav_link('/usage') }}
-{% endset %}
+{% from 'macros.njk' import nav_link with context %}
+{% set nav %}{% include 'nav.njk' %}{% endset %}
 
 {% set toc = content | toc %}
 
@@ -23,12 +18,12 @@ layout: skeleton
       <div class="z-50 pointer-events-none responsive-container fixed h-full top-0 left-0 right-0 opacity-10">
         <div class="responsive-grid grid md:hidden h-full">
           {% for i in range(0, 6) %}
-            <div style="background-color: '#FF0000'"></div>
+            <div style="background-color: #FF0000"></div>
           {% endfor %}
         </div>
         <div class="responsive-grid hidden md:grid h-full">
           {% for i in range(0, 12) %}
-            <div style="background-color: '#FF0000'"></div>
+            <div style="background-color: #FF0000"></div>
           {% endfor %}
         </div>
       </div>
diff --git a/docs/_includes/macros.njk b/docs/_includes/macros.njk
index a4e1b404..ae6db7f0 100644
--- a/docs/_includes/macros.njk
+++ b/docs/_includes/macros.njk
@@ -1,3 +1,49 @@
+{% macro nav_link(url, deep=true) %}
+  {% set node = url | node(collections.all) %}
+  {% set children = node.data.page | children(collections.all) %}
+  <div class="mb-20">
+    <a
+      class="flex justify-center title-xs no-underline mb-20"
+      href="{{ url }}"
+      {% if node.data.page.url === page.url %}
+        aria-current="page"
+      {% endif %}
+    >
+      <div class="flex-auto">{{ node.data.title }}</div>
+      <div>
+        {% if deep and children.length %}
+          <sfgov-icon symbol="chevron-down" role="img" aria-label="arrow pointing down"></sfgov-icon>
+        {% endif %}
+      </div>
+    </a>
+    {% if deep %}
+      {% if url === '/' %}
+        {% set parent_active = page.url === url %}
+      {% else %}
+        {% set parent_active = page.url.startsWith(url) %}
+      {% endif %}
+      {% if parent_active %}
+        <ul class="m-0 p-0 list-none">
+          {% for child in children %}
+            {% set child_active = child.url === page.url %}
+            <li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
+              <a
+                href="{{ child.url }}"
+                {% if child_active %}
+                  aria-current="page"
+                {% endif %}
+                class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
+              >
+                {{ child.data.title }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    {% endif %}
+  </div>
+{% endmacro %}
+
 {% macro swatch(color, width, height) %}
   <div class="mr-20 mb-20">
     <h4 class="title-xs mt-0 mb-4">
diff --git a/docs/_includes/nav.njk b/docs/_includes/nav.njk
index 2cd35abd..4fe45556 100644
--- a/docs/_includes/nav.njk
+++ b/docs/_includes/nav.njk
@@ -1,45 +1,5 @@
-{% macro nav_link(url, deep=true) %}
-  {% set node = url | node(collections.all) %}
-  {% set children = node.data.page | children(collections.all) %}
-  <div class="mb-20">
-    <a
-      class="flex justify-center title-xs no-underline mb-20"
-      href="{{ url }}"
-      {% if node.data.page.url === page.url %}
-        aria-current="page"
-      {% endif %}
-    >
-      <div class="flex-auto">{{ node.data.title }}</div>
-      <div>
-        {% if deep and children.length %}
-          <sfgov-icon symbol="chevron-down" role="img" aria-label="arrow pointing down"></sfgov-icon>
-        {% endif %}
-      </div>
-    </a>
-    {% if deep %}
-      {% if url === '/' %}
-        {% set parent_active = page.url === url %}
-      {% else %}
-        {% set parent_active = page.url.startsWith(url) %}
-      {% endif %}
-      {% if parent_active %}
-        <ul class="m-0 p-0 list-none">
-          {% for child in children %}
-            {% set child_active = child.url === page.url %}
-            <li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
-              <a
-                href="{{ child.url }}"
-                {% if child_active %}
-                  aria-current="page"
-                {% endif %}
-                class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
-              >
-                {{ child.data.title }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    {% endif %}
-  </div>
-{% endmacro %}
+{{ nav_link('/', false) }}
+{{ nav_link('/foundations') }}
+{{ nav_link('/components') }}
+{{ nav_link('/resources') }}
+{{ nav_link('/usage') }}
diff --git a/package-lock.json b/package-lock.json
index 9025979b..429482df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sfgov-design-system",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "sfgov-design-system",
-      "version": "2.2.0",
+      "version": "2.2.1",
       "license": "MIT",
       "devDependencies": {
         "@11ty/eleventy": "^0.12.1",
diff --git a/package.json b/package.json
index 9e16905d..b8727ceb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sfgov-design-system",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "repository": "SFDigitalServices/design-system",
   "author": "City & County of San Francisco, California",
   "license": "MIT",