diff --git a/_sass/components/_toolkit.scss b/_sass/components/_toolkit.scss
index 874856d1d3..feeaf90093 100644
--- a/_sass/components/_toolkit.scss
+++ b/_sass/components/_toolkit.scss
@@ -151,6 +151,12 @@
 
 .toolkit__card-list {
     margin-bottom: 10rem;
+    @media (min-width: 1232px) and (max-width: 1400px) {
+        padding-top: 1.7rem;
+    }
+    @media #{$bp-desktop-large-up} {
+        padding-top: 1.7rem;
+    }
 }
 
 @media only screen and (max-width: 1430px) {
diff --git a/pages/toolkit.html b/pages/toolkit.html
index fa96580a8d..799bfb6a3c 100644
--- a/pages/toolkit.html
+++ b/pages/toolkit.html
@@ -2,14 +2,17 @@
 layout: default
 title: Toolkit
 permalink: /toolkit/
---- 
+---
 <!-- Header banner -->
 <div class="header-container flex-container">
     <div class="header-text">
         <h1 class="title1">Our Toolkit</h1>
         <p>Toolkit implies that there is one set of tools that is perfect for the job you are tackling!
-            What you will find here are tools we have found to be effective. Think of this as the most awesome collective tool shed!
-            Here you can find, share, and suggest tools that are of use to the open source civic tech software community.</p>
+            What you will find here are tools we have found to be effective. Think of this as the most awesome
+            collective tool shed!
+            Here you can find, share, and suggest tools that are of use to the open source civic tech software
+            community.
+        </p>
     </div>
     <img class="header-hero-image" src="/assets/images/toolkit/toolkit-hero.svg" alt="" />
 </div>
@@ -18,14 +21,15 @@ <h1 class="title1">Our Toolkit</h1>
     {% assign category_list = "All, Development, Design, Project Management, Professional Development" | split: ", " %}
     {% for category in category_list %}
         {% if category == "All" %}
-            <a href="#{{category | replace: ' ', '+'}}"  class="toolkit-header__banner-item selected-category">{{category}}</a>
+            <a href="#{{category | replace: ' ', '+'}}" class="toolkit-header__banner-item selected-category">{{category}}</a>
         {% else %}
-            <a href="#{{category | replace: ' ', '+'}}"  class="toolkit-header__banner-item">{{ category }}</a>    
+            <a href="#{{category | replace: ' ', '+'}}" class="toolkit-header__banner-item">{{ category }}</a>
         {% endif %}
     {% endfor %}
 </div>
 
 <div class="toolkit-background content-section">
+  <a class="anchor" id="guides"></a>
   <div class="toolkit__card-list">
     <div class="toolkit-flex-container">
       <div class="suggest-guide-group">
@@ -47,88 +51,93 @@ <h2 class="title3">Guides</h2>
                     {%- include guide-card.html guide=item -%}
                 {%- endif -%}
             {%- endfor -%}
+        </div>
     </div>
-  </div>
 
-  <script>
-      //add listener for click in banner, and toggle classes for filters.
-      document.querySelectorAll(".toolkit-header__banner-item").forEach(filter => {
-          filter.addEventListener('click', function(event) {
-              let thisCategory = event.currentTarget;
-              let otherCategories = event.currentTarget.parentElement.children;
-              
-              if (thisCategory.classList.contains('selected-category')) {
-                  return;
-              } else {
-                  Array.from(otherCategories).forEach((category) => {
-                  if (category.classList.contains('selected-category')) {
-                      category.classList.remove('selected-category');
-                  return; }
-                  });
+    <script>
+        //add listener for click in banner, and toggle classes for filters.
+        document.querySelectorAll(".toolkit-header__banner-item").forEach(filter => {
+            filter.addEventListener('click', function (event) {
+                let thisCategory = event.currentTarget;
+                let otherCategories = event.currentTarget.parentElement.children;
+
+                if (thisCategory.classList.contains('selected-category')) {
+                    return;
+                } else {
+                    Array.from(otherCategories).forEach((category) => {
+                        if (category.classList.contains('selected-category')) {
+                            category.classList.remove('selected-category');
+                            return;
+                        }
+                    });
 
-              thisCategory.classList.toggle('selected-category');  
-              }
-          });
-      });
-      //add handler for dropdown navigation selection
+                    thisCategory.classList.toggle('selected-category');  
+                }
+            });
+        });
+        //add handler for dropdown navigation selection
         document.getElementById("dropdown-select").onchange = function() {
             window.location.href = this.value;
         }
 
-          //add listener for url change and toggle visible cards.
-          window.addEventListener("hashchange", hashFilter);
-          function hashFilter(e) {
-              let currentHash = location.hash.split('#')[1].replace("+", "").toLowerCase();
+        //add listener for url change and toggle visible cards.
+        window.addEventListener("hashchange", hashFilter);
+        function hashFilter(e) {
+            let currentHash = location.hash.split('#')[1].replace("+", "").toLowerCase();
 
-              let cardContainers = document.querySelectorAll("[data-article-type]");
-              cardContainers.forEach((card) => {
-                  if(currentHash == 'all'){
-                      card.style.display = 'block';
-                  return;
-                  }
-                  card.dataset.articleType == currentHash ? card.style.display = "block" : card.style.display = "none";
-              });
-          } 
-  </script>
+            let cardContainers = document.querySelectorAll("[data-article-type]");
+            let guidesCategories = ["all", "development", "design", "projectmanagement", "professionaldevelopment"]
+            if(guidesCategories.includes(currentHash)){
+                cardContainers.forEach((card) => {
+                    if (currentHash == 'all') {
+                        card.style.display = 'block';
+                        return;
+                    }
+                    card.dataset.articleType == currentHash ? card.style.display = "block" : card.style.display = "none";
+                });
+            }
+        } 
+    </script>
 
-  <div class="toolkit__card-list">
-    <div class="toolkit-flex-container">
-      <div class="suggest-guide-group">
-        <h2 class="external-resources-text title3">External Resources</h2>
-        <button class="btn btn-primary btn-md-narrow">Suggest a resource</button>
-      </div>
-        <!-- Searching through toolkitResources collection -->
-      <div class="external-resource-container">
-        {%- for item in site.data.internal.toolkitresources -%}
-        {%- if item.display ==  true -%}
-        <div class="toolkit-flex-item section-container">
-          {%- if item.svg -%}
-          <div class="toolkit-flex-item-img-container resource-svg-icons">
-              {% include {{ item.svg }} %}
-          </div>
-          {%- endif -%}
+    <a class="anchor" id="external-resources"></a>
+    <div class="toolkit__card-list">
+        <div class="toolkit-flex-container">
+            <div class="suggest-guide-group">
+                <h2 class="external-resources-text title3">External Resources</h2>
+                <button class="btn btn-primary btn-md-narrow">Suggest a resource</button>
+            </div>
+            <!-- Searching through toolkitResources collection -->
+            <div class="external-resource-container">
+                {%- for item in site.data.internal.toolkitresources -%}
+                {%- if item.display == true -%}
+                <div class="toolkit-flex-item section-container">
+                    {%- if item.svg -%}
+                    <div class="toolkit-flex-item-img-container resource-svg-icons">
+                        {% include {{ item.svg }} %}
+                    </div>
+                    {%- endif -%}
 
-          <div class="toolkit-info-container">
-              <h3><a href="{{item.provider-link}}" target="_blank">{{ item.title }}</a></h3>
-              <p>{{ item.description }}</p>
-          </div>
-          <a href="{{item.provider-link}}" class="toolkit-flex-item-status" target="_blank">
-              {% include {{ item.link-svg }} %}
-          </a>
+                    <div class="toolkit-info-container">
+                        <h3><a href="{{item.provider-link}}" target="_blank">{{ item.title }}</a></h3>
+                        <p>{{ item.description }}</p>
+                    </div>
+                    <a href="{{item.provider-link}}" class="toolkit-flex-item-status" target="_blank">
+                        {% include {{ item.link-svg }} %}
+                    </a>
+                </div>
+                {%- endif -%}
+                {%- endfor -%}
+            </div>
         </div>
-        {%- endif -%}
-        {%- endfor -%}
-      </div>
     </div>
-  </div>
-</div>    
+</div>
 
 <script>
-// Add margin to the bottom of cards with status text
-let statusElements = document.getElementsByClassName("toolkit-flex-item-status");
-for(let i = 0; i < statusElements.length; i++){
-    let parent = statusElements[i].parentElement;
-    let infoContainer = parent.getElementsByClassName("toolkit-info-container");
-    infoContainer[0].style["margin-bottom"] = "3.5rem";
-}
+    // Add margin to the bottom of cards with status text
+    let statusElements = document.getElementsByClassName("toolkit-flex-item-status");
+    for (let i = 0; i < statusElements.length; i++) {
+        let parent = statusElements[i].parentElement;
+        let infoContainer = parent.getElementsByClassName("toolkit-info-container");
+        infoContainer[0].style["margin-bottom"] = "3.5rem";
+    }
 </script>
\ No newline at end of file