diff --git a/sites/diverseeducation.com/server/styles/components/awards.scss b/sites/diverseeducation.com/server/styles/components/awards.scss
index ad923e25..145a60c9 100644
--- a/sites/diverseeducation.com/server/styles/components/awards.scss
+++ b/sites/diverseeducation.com/server/styles/components/awards.scss
@@ -22,6 +22,60 @@
   }
 }
 
+.site-navbar__items--other-years-dropdown {
+  top: 35px;
+  display: none;
+  flex-direction: column;
+  z-index: 160000;
+  background: #fff;
+  border: solid 1px $gray-200;
+  width: 200px;
+  padding: map-get($spacers, 2);
+  box-shadow: $theme-box-shadow-lg;
+  li {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.site-navbar__items--other-years-dropdown-open {
+  display: flex;
+}
+
+.btn--other-years-dropdown {
+  @include skin-button($style: "secondary");
+  padding: 0 12px 0 10px;
+  min-width: 40px;
+  height: 40px;
+  font-size: 1rem;
+  color: $white;
+  border-radius: 4px;
+  outline-color: none;
+  box-shadow: none;
+  border: 1px solid $white;
+  background-color: $secondary;
+  &:hover,
+  &:focus {
+    color: $white;
+    border: 1px solid $white;
+    background-color: $secondary;
+    border: 1px solid $white;
+    svg {
+      fill: $white;;
+    }
+  }
+  :first-child {
+    margin-right: 2px;
+  }
+  svg {
+    display: inline-block;
+    width: 12px;
+    height: 1.25rem;
+    fill: $white !important;
+    vertical-align: sub;
+  }
+}
+
+
 @import "./awards/mppw";
 @import "./awards/arthur-ashe";
 @import "./awards/emerging-scholars";
diff --git a/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko b/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko
index e0085afb..246bc36c 100644
--- a/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko
+++ b/sites/diverseeducation.com/server/templates/static-pages/mppwcc-yearly.marko
@@ -50,18 +50,20 @@ $ const mpprecommendationsSrc = currentYearData ? currentYearData.mpprecommendat
         </div><br/>
         <div class="row" align="center">
           <div class="col">
-            <div>
-              <h4 style="bold">
-                Other Years
-              </h4>
-              <for|year| of=Object.keys(config).reverse()>
-                <if(year !== currentYear)>
-                  <a href=`/awards-honors/mppwcc/${year}`>
-                    ${year}
-                  </a>&nbsp;
-                </if>
-              </for>
-            </div>
+            <theme-menu-toggle-button
+              class="site-navbar__toggler btn btn--other-years-dropdown"
+              targets=[".site-navbar__items--other-years-dropdown"]
+              toggle-class="site-navbar__items--other-years-dropdown-open"
+              icon-modifiers=["sm"]
+              after="Other Years"
+              icon-name="plus"
+              expanded-icon-name="dash"
+            />
+            $ const otherYearsItems = Object.keys(config).reverse().map((year) => ({ href: `/awards-honors/mppwcc/${year}`, label: year }));
+            <theme-site-navbar-items
+              items=otherYearsItems
+              modifiers=["other-years-dropdown"]
+            />
           </div>
         </div>
       </@section>
diff --git a/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko b/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko
index 3ed67bee..f0c1a8dc 100644
--- a/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko
+++ b/sites/diverseeducation.com/server/templates/static-pages/mppwsa-yearly.marko
@@ -80,21 +80,23 @@ $ const nationalPerspective = currentYearData ? currentYearData.nationalPerspect
           </div>
           <div class="row" align="center">
             <div class="col">
-              <div>
-                <h4 style="bold">
-                  Other Years
-                </h4>
-                <for|year| of=Object.keys(config).reverse()>
-                  <if(year !== currentYear)>
-                    <a href=`/awards-honors/mppwsa/${year}`>
-                      ${year}
-                    </a>&nbsp;
-                  </if>
-                </for>
-              </div>
+              <theme-menu-toggle-button
+                class="site-navbar__toggler btn btn--other-years-dropdown"
+                targets=[".site-navbar__items--other-years-dropdown"]
+                toggle-class="site-navbar__items--other-years-dropdown-open"
+                icon-modifiers=["sm"]
+                after="Other Years"
+                icon-name="plus"
+                expanded-icon-name="dash"
+              />
+              $ const otherYearsItems = Object.keys(config).reverse().map((year) => ({ href: `/awards-honors/mppwcc/${year}`, label: year }));
+              <theme-site-navbar-items
+                items=otherYearsItems
+                modifiers=["other-years-dropdown"]
+              />
             </div>
           </div>
-        </@section>
+          </@section>
         <@section modifiers=["card-deck"]>
         $ const tableOneLabels = Object.values(getAsObject(currentYearData, "tableLabels.tableOne"));
         <if(currentYearData && tableOneLabels.length)>
@@ -132,12 +134,12 @@ $ const nationalPerspective = currentYearData ? currentYearData.nationalPerspect
             <thead>
               <tr>
                 <h3 style='color:#2A96B4;'> HONORABLE MENTION </h3>
-                <td width="400"><b>Institution</b></td> 
+                <td width="400"><b>Institution</b></td>
                 <for|label| of=tableHMLabels>
                   <td width="200">
                     <b>${label}</b>
                   </td>
-                </for> 
+                </for>
               </tr>
             </thead>
             <if(hminstitutions.length)>
diff --git a/sites/diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko b/sites/diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko
index e7557932..77999188 100644
--- a/sites/diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko
+++ b/sites/diverseeducation.com/server/templates/website-section/awards-honors/top-women/index.marko
@@ -54,13 +54,6 @@ $ const queryParams = {
         </if>
       </div>
     </div><br/>
-    <div class="row" align="center">
-      <div class="col">
-        <h4 style="bold">
-          Other Years
-        </h4>
-      </div>
-    </div>
     <div class="row" align="center">
       <div class="col">
         <marko-web-query|{ node }|
@@ -69,15 +62,20 @@ $ const queryParams = {
         >
         $ const year = 2024; //current/active year
         $ const children = getAsArray(node, "children.edges").map(({ node }) => node).filter(({ name })=> parseInt(name) <= year);
-          <marko-web-node-list>
-            <@nodes|{ nodes }| nodes=children modifiers=["flush-x"]>
-              <div align="center">
-                <for|node| of=nodes>
-                  <marko-web-link title=node.name href=`/${node.alias}`>${node.name}</marko-web-link>&nbsp
-                </for>
-              </div>
-            </@nodes>
-          </marko-web-node-list>
+        <theme-menu-toggle-button
+          class="site-navbar__toggler btn btn--other-years-dropdown"
+          targets=[".site-navbar__items--other-years-dropdown"]
+          toggle-class="site-navbar__items--other-years-dropdown-open"
+          icon-modifiers=["sm"]
+          after="Other Years"
+          icon-name="plus"
+          expanded-icon-name="dash"
+        />
+        $ const otherYearsItems = children.map((childNode) => ({ href: `/${childNode.alias}`, label: childNode.name }));
+        <theme-site-navbar-items
+          items=otherYearsItems
+          modifiers=["other-years-dropdown"]
+        />
         </marko-web-query>
       </div>
     </div>