diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index 4bbe4e541..1949da9b1 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -26,7 +26,14 @@
                 <ul>
                     <li><a class="{{ $page->getUrl() === '/' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/">Welcome</a></li>
                     <li><a class="{{ $page->getUrl() === '/installation' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/installation">Installation</a></li>
+                    <li><a class="{{ $page->getUrl() === '/changelog' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/changelog">Changelog</a></li>
+                </ul>
+                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Concepts</div>
+                <ul>
                     <li><a class="{{ $page->getUrl() === '/principles' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/principles">Principles</a></li>
+                    <li><a class="{{ $page->getUrl() === '/customization' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/customization">Customization</a></li>
+                    <li><a class="{{ $page->getUrl() === '/responsive' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/responsive">Responsive</a></li>
+                    <li><a class="{{ $page->getUrl() === '/colors' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/colors">Colors</a></li>
                 </ul>
                 <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Utilities</div>
                 <ul>
@@ -42,6 +49,11 @@
                     <li><a class="{{ $page->getUrl() === '/text' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/text">Text</a></li>
                     <li><a class="{{ $page->getUrl() === '/z-index' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/z-index">Z-Index</a></li>
                 </ul>
+                <div class="mt-8 mb-1 text-dark-softer text-uppercase text-xs">Components</div>
+                <ul>
+                    <li><a class="{{ $page->getUrl() === '/buttons' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/buttons">Buttons</a></li>
+                    <li><a class="{{ $page->getUrl() === '/forms' ? 'text-primary' : 'text-dark-soft' }}" href="{{ $page->baseUrl }}/forms">Forms</a></li>
+                </ul>
             </nav>
             <div class="p-12 constrain-lg markdown">
                 @yield('content')
diff --git a/docs/source/buttons.md b/docs/source/buttons.md
new file mode 100644
index 000000000..4c4fbbbeb
--- /dev/null
+++ b/docs/source/buttons.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Buttons"
+---
+
+# Buttons
diff --git a/docs/source/changelog.md b/docs/source/changelog.md
new file mode 100644
index 000000000..854778520
--- /dev/null
+++ b/docs/source/changelog.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Changelog"
+---
+
+# Changelog
diff --git a/docs/source/colors.md b/docs/source/colors.md
new file mode 100644
index 000000000..fd46b5032
--- /dev/null
+++ b/docs/source/colors.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Colors"
+---
+
+# Colors
diff --git a/docs/source/customization.md b/docs/source/customization.md
new file mode 100644
index 000000000..2e57013e0
--- /dev/null
+++ b/docs/source/customization.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Customization"
+---
+
+# Customization
diff --git a/docs/source/forms.md b/docs/source/forms.md
new file mode 100644
index 000000000..3c31ba8ca
--- /dev/null
+++ b/docs/source/forms.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Forms"
+---
+
+# Forms
diff --git a/docs/source/responsive.md b/docs/source/responsive.md
new file mode 100644
index 000000000..5c1f7fea4
--- /dev/null
+++ b/docs/source/responsive.md
@@ -0,0 +1,6 @@
+---
+extends: _layouts.master
+title: "Responsive"
+---
+
+# Responsive