diff --git a/themes/vocabulary_theme/templates/page-with-toc.html b/themes/vocabulary_theme/templates/page-with-toc.html
index b9145d67..762cf7c1 100644
--- a/themes/vocabulary_theme/templates/page-with-toc.html
+++ b/themes/vocabulary_theme/templates/page-with-toc.html
@@ -3,144 +3,145 @@
 {% block title %}{{ this.title }}{% endblock %}
 
 {% block body %}
-  <div class="code-guidelines">
-    <header class="header">
-      <div class="container is-paddingless">
-        <h1>{{ this.title }}</h1>
-        <div class="description column is-9 is-paddingless">
-          {{ this.description }}
-        </div>
-      </div>
-    </header>
-    <div class="container code-guidelines-body">
-      <div class="columns">
-        <div class="column is-one-quarter">
-          <div class="row">
-            {% if this.is_child_of('/contributing-code') %}
-              <aside class="menu sidebar-menu">
-                <ul class="menu-list">
-                  {% for href, title in [
+ <header>
+  <h1>{{ this.title }}</h1>
+  <p> {{ this.description }} </p>
+</header>
+
+<aside class="sidebar">
+    {% if this.is_child_of('/contributing-code') %}
+        <nav class="filter-menu" aria-labelledby="contributing-code">
+            <h2>Contributing Code</h2>
+            <ul>
+                {% for href, title in [
                     ['/contributing-code/projects', 'Project List'],
                     ['/contributing-code/issue-finder', 'Issue Finder'],
                     ['/contributing-code', 'Contribution Guidelines'],
                     ['/contributing-code/usability', 'Usability'],
-                  ] %}
+                ] %}
                     <li>
-                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
-                    {% if (href == '/contributing-code') %}
-                      <ul>
-                      {% for href, title in [
-                        ['/contributing-code/foundational-tech', 'Foundational technologies'],
-                        ['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
-                        ['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
-                        ['/contributing-code/repo-labels', 'Repository Labels'],
-                        ['/contributing-code/documentation-guidelines', 'Documentation Guidelines'],
-                        ['/contributing-code/javascript-guidelines', 'JavaScript Guidelines'],
-                        ['/contributing-code/python-guidelines', 'Python Guidelines'],
-                        ['/contributing-code/translation-guide', 'Translation Guide'],
-                      ] %}
-                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
-                      {% endfor %}
-                      </ul>
-                    {% endif %}
+                        <a href="{{ href|url }}">{{ title }}</a>
+                        {% if href == '/contributing-code' %}
+                            <ul>
+                                {% for href, title in [
+                                    ['/contributing-code/foundational-tech', 'Foundational technologies'],
+                                    ['/contributing-code/pr-guidelines', 'Pull Request Guidelines'],
+                                    ['/contributing-code/github-repo-guidelines', 'GitHub Repo Guidelines'],
+                                    ['/contributing-code/repo-labels', 'Repository Labels'],
+                                    ['/contributing-code/documentation-guidelines', 'Documentation Guidelines'],
+                                    ['/contributing-code/javascript-guidelines', 'JavaScript Guidelines'],
+                                    ['/contributing-code/python-guidelines', 'Python Guidelines'],
+                                    ['/contributing-code/translation-guide', 'Translation Guide'],
+                                ] %}
+                                    <li>
+                                        <a href="{{ href|url }}">
+                                        {{ title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
                     </li>
-                    {% if (href != '/contributing-code/usability') %}
-                      <hr class="divider">
-                    {% endif %}
-                  {% endfor %}
-                </ul>
-              </aside>
-            {% elif this.is_child_of('/community') %}
-              <aside class="menu sidebar-menu">
-                <ul class="menu-list">
-                  {% for href, title in [
+                {% endfor %}
+            </ul>
+        </nav>
+    {% elif this.is_child_of('/community') %}
+        <nav class="filter-menu" aria-labelledby="community">
+            <h2>Community</h2>
+            <ul>
+                {% for href, title in [
                     ['/community', 'Join the Community'],
                     ['/community/community-team', 'Community Team'],
                     ['/community/write-a-blog-post', 'Write a Blog Post'],
                     ['/community/code-of-conduct', 'Code of Conduct'],
                     ['/community/supporters', 'Supporters'],
-                  ] %}
+                ] %}
                     <li>
-                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
-                    {% if (href == '/community/community-team') %}
-                      <ul>
-                      {% for href, title in [
-                        ['/community/community-team/members', 'Community Team Members'],
-                        ['/community/community-team/project-roles', 'Project Roles'],
-                        ['/community/community-team/community-building-roles', 'Community Building Roles'],
-                        ['/community/community-team/engagement-channels', 'Engagement Channels'],
-                      ] %}
-                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
-                      {% endfor %}
-                      </ul>
-                    {% endif %}
-                    {% if (href == '/community/code-of-conduct') %}
-                      <ul>
-                        <li><a class="{% if this._path == '/community/code-of-conduct/enforcement' %} is-active {% endif%} link" href="{{ '/community/code-of-conduct/enforcement'|url }}"><i class="icon circle-filled"></i>Code of Conduct Enforcement</a></li>
-                      </ul>
-                    {% endif %}
+                        <a href="{{ href|url }}">{{ title }}</a>
+                        {% if href == '/community/community-team' %}
+                            <ul>
+                                {% for href, title in [
+                                    ['/community/community-team/members', 'Community Team Members'],
+                                    ['/community/community-team/project-roles', 'Project Roles'],
+                                    ['/community/community-team/community-building-roles', 'Community Building Roles'],
+                                    ['/community/community-team/engagement-channels', 'Engagement Channels'],
+                                ] %}
+                                    <li>
+                                        <a  href="{{ href|url }}">
+                                        {{ title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% elif href == '/community/code-of-conduct' %}
+                            <ul>
+                                <li>
+                                    <a href="{{ '/community/code-of-conduct/enforcement'|url }}">
+                                      Code of Conduct Enforcement
+                                    </a>
+                                </li>
+                            </ul>
+                        {% endif %}
                     </li>
-                    {% if (href != '/community/supporters') %}
-                      <hr class="divider">
-                    {% endif %}
-                  {% endfor %}
-                  </li>
-                </ul>
-              </aside>
-            {% elif this.is_child_of('/programs') %}
-              <aside class="menu sidebar-menu">
-                <ul class="menu-list">
-                  {% for href, title in [
+                {% endfor %}
+            </ul>
+        </nav>
+    {% elif this.is_child_of('/programs') %}
+        <nav class="filter-menu" aria-labelledby="programs">
+            <h2>Programs</h2>
+            <ul>
+                {% for href, title in [
                     ['/programs', 'Overview'],
                     ['/programs/project-ideas', 'Project Ideas'],
                     ['/programs/history', 'History'],
-                  ] %}
+                ] %}
                     <li>
-                    <a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}">{{ title }}</a>
-                    {% if (href == '/programs') %}
-                      <ul>
-                      {% for href, title in [
-                        ['/programs/applicant-guide', 'Applicant Guide'],
-                        ['/programs/contrib-guide', 'Contributor Guide'],
-                        ['/programs/lead-guide', 'Project Lead Guide'],
-                      ] %}
-                        <li><a class="{% if this.path == href %} is-active {% endif%} link" href="{{ href|url }}"><i class="icon circle-filled"></i>{{ title }}</a></li>
-                      {% endfor %}
-                      </ul>
-                    {% endif %}
+                        <a href="{{ href|url }}">{{ title }}</a>
+                        {% if href == '/programs' %}
+                            <ul>
+                                {% for href, title in [
+                                    ['/programs/applicant-guide', 'Applicant Guide'],
+                                    ['/programs/contrib-guide', 'Contributor Guide'],
+                                    ['/programs/lead-guide', 'Project Lead Guide'],
+                                ] %}
+                                    <li>
+                                        <a href="{{ href|url }}">
+                                          {{ title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endif %}
                     </li>
-                    {% if (href != '/programs/history') %}
-                      <hr class="divider">
-                    {% endif %}
-                  {% endfor %}
-                </ul>
-              </aside>
-            {% endif %}
-          </div>
-          <div class="row padding-bottom-normal sticky-top">
-            <h4 class="b-header">On this page</h4>
-            <aside class="menu table-of-contents">
-              <ul class="menu-list">
-                {% for item in this.body.toc %}
-                  <li>
-                    <a class="link" href="#{{ item.anchor }}">{{ item.title }}</a>
+                {% endfor %}
+            </ul>
+        </nav>
+    {% endif %}
+    <nav class="filter-menu" aria-labelledby="on-this-page">
+        <h2>On this page</h2>
+        <ul>
+            {% for item in this.body.toc %}
+                <li>
+                    <a href="#{{ item.anchor }}">{{ item.title }}</a>
                     {% if item.children and not this.is_long_page %}
-                      <ul>
-                        {% for subitem in item.children %}
-                          <li><a class="link" href="#{{ subitem.anchor }}"><i class="icon circle-filled"></i>{{ subitem.title }}</a></li>
-                        {% endfor %}
-                      </ul>
+                        <ul>
+                            {% for subitem in item.children %}
+                                <li>
+                                    <a href="#{{ subitem.anchor }}">
+                                      {{ subitem.title }}
+                                    </a>
+                                </li>
+                            {% endfor %}
+                        </ul>
                     {% endif %}
-                  </li>
-                {% endfor %}
-              </ul>
-            </aside>
-          </div>
-        </div>
-        <div class="column content is-three-quarters">
-          {{ this.body }}
-        </div>
-      </div>
-    </div>
-  </div>
+                </li>
+            {% endfor %}
+        </ul>
+    </nav>
+</aside>
+
+<div class="content">
+    {{ this.body }}
+</div>
+
 {% endblock %}