diff --git a/src/web/build_details.rs b/src/web/build_details.rs
index 8b0c1a4ec..25aadd3c5 100644
--- a/src/web/build_details.rs
+++ b/src/web/build_details.rs
@@ -8,7 +8,7 @@ use crate::{
         extractors::{DbConnection, Path},
         file::File,
         filters,
-        page::templates::{RenderRegular, RenderSolid},
+        page::templates::{RenderBrands, RenderRegular, RenderSolid},
     },
 };
 use anyhow::Context as _;
diff --git a/src/web/builds.rs b/src/web/builds.rs
index 0aec466ca..a8c1261dd 100644
--- a/src/web/builds.rs
+++ b/src/web/builds.rs
@@ -13,7 +13,7 @@ use crate::{
         error::{AxumResult, EscapedURI},
         extractors::{DbConnection, Path},
         filters, match_version,
-        page::templates::{RenderRegular, RenderSolid},
+        page::templates::{RenderBrands, RenderRegular, RenderSolid},
     },
 };
 use anyhow::{Result, anyhow};
diff --git a/src/web/crate_details.rs b/src/web/crate_details.rs
index e0fae9766..5cd1a0808 100644
--- a/src/web/crate_details.rs
+++ b/src/web/crate_details.rs
@@ -12,7 +12,7 @@ use crate::{
         cache::CachePolicy,
         error::{AxumNope, AxumResult, EscapedURI},
         extractors::{DbConnection, Path},
-        page::templates::{RenderRegular, RenderSolid, filters},
+        page::templates::{RenderBrands, RenderRegular, RenderSolid, filters},
         rustdoc::RustdocHtmlParams,
     },
 };
diff --git a/src/web/features.rs b/src/web/features.rs
index 4b8b2c1f9..98d1b64b3 100644
--- a/src/web/features.rs
+++ b/src/web/features.rs
@@ -9,7 +9,7 @@ use crate::{
         filters,
         headers::CanonicalUrl,
         match_version,
-        page::templates::{RenderRegular, RenderSolid},
+        page::templates::{RenderBrands, RenderRegular, RenderSolid},
     },
 };
 use anyhow::anyhow;
diff --git a/src/web/mod.rs b/src/web/mod.rs
index 7bd83b9bb..8a879525d 100644
--- a/src/web/mod.rs
+++ b/src/web/mod.rs
@@ -8,7 +8,7 @@ use crate::db::ReleaseId;
 use crate::db::types::BuildStatus;
 use crate::utils::get_correct_docsrs_style_file;
 use crate::utils::report_error;
-use crate::web::page::templates::{RenderSolid, filters};
+use crate::web::page::templates::{RenderBrands, RenderSolid, filters};
 use anyhow::{Context as _, Result, anyhow, bail};
 use askama::Template;
 use axum_extra::middleware::option_layer;
diff --git a/src/web/releases.rs b/src/web/releases.rs
index 6cbc6eecf..2696f26c5 100644
--- a/src/web/releases.rs
+++ b/src/web/releases.rs
@@ -10,7 +10,7 @@ use crate::{
         error::{AxumNope, AxumResult},
         extractors::{DbConnection, Path},
         match_version,
-        page::templates::{RenderRegular, RenderSolid, filters},
+        page::templates::{RenderBrands, RenderRegular, RenderSolid, filters},
     },
 };
 use anyhow::{Context as _, Result, anyhow};
diff --git a/src/web/rustdoc.rs b/src/web/rustdoc.rs
index a29f9884c..e8481e8e8 100644
--- a/src/web/rustdoc.rs
+++ b/src/web/rustdoc.rs
@@ -20,7 +20,7 @@ use crate::{
         match_version,
         page::{
             TemplateData,
-            templates::{RenderRegular, RenderSolid, filters},
+            templates::{RenderBrands, RenderRegular, RenderSolid, filters},
         },
     },
 };
diff --git a/src/web/sitemap.rs b/src/web/sitemap.rs
index bb704aabd..ad0c2e824 100644
--- a/src/web/sitemap.rs
+++ b/src/web/sitemap.rs
@@ -129,9 +129,7 @@ macro_rules! about_page {
     ($ty:ident, $template:literal) => {
         #[derive(Template)]
         #[template(path = $template)]
-        struct $ty {
-            active_tab: &'static str,
-        }
+        struct $ty;
 
         impl_axum_webpage! { $ty }
     };
@@ -151,30 +149,12 @@ pub(crate) async fn about_handler(subpage: Option<Path<String>>) -> AxumResult<i
     };
 
     let response = match &subpage[..] {
-        "about" | "index" => AboutPage {
-            active_tab: "index",
-        }
-        .into_response(),
-        "badges" => AboutPageBadges {
-            active_tab: "badges",
-        }
-        .into_response(),
-        "metadata" => AboutPageMetadata {
-            active_tab: "metadata",
-        }
-        .into_response(),
-        "redirections" => AboutPageRedirection {
-            active_tab: "redirections",
-        }
-        .into_response(),
-        "download" => AboutPageDownload {
-            active_tab: "download",
-        }
-        .into_response(),
-        "rustdoc-json" => AboutPageRustdocJson {
-            active_tab: "rustdoc-json",
-        }
-        .into_response(),
+        "about" | "index" => AboutPage.into_response(),
+        "badges" => AboutPageBadges.into_response(),
+        "metadata" => AboutPageMetadata.into_response(),
+        "redirections" => AboutPageRedirection.into_response(),
+        "download" => AboutPageDownload.into_response(),
+        "rustdoc-json" => AboutPageRustdocJson.into_response(),
         _ => {
             let msg = "This /about page does not exist. \
                 Perhaps you are interested in <a href=\"https://github.com/rust-lang/docs.rs/tree/master/templates/core/about\">creating</a> it?";
diff --git a/templates/about-base.html b/templates/about-base.html
index 8eb4ed0b9..d0859942f 100644
--- a/templates/about-base.html
+++ b/templates/about-base.html
@@ -4,47 +4,6 @@
 centered
 {%- endblock body_classes -%}
 
-{% block header %}
-    <div class="docsrs-package-container">
-        <div class="container">
-            <div class="description-container">
-                <h1 id="crate-title" class="no-description">Docs.rs documentation</h1>
-                <div class="pure-menu pure-menu-horizontal">
-                    <ul class="pure-menu-list">
-                        {% set text = crate::icons::IconCircleInfo.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>About</span>"|format(text) %}
-                        {% call macros::active_link(expected="index", href="/about", text=text) %}
-
-                        {% set text = crate::icons::IconFonticons.render_brands(false, false, "") %}
-                        {% set text = "{} <span class='title'>Badges</span>"|format(text) %}
-                        {% call macros::active_link(expected="badges", href="/about/badges", text=text) %}
-
-                        {% set text = crate::icons::IconGears.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>Builds</span>"|format(text) %}
-                        {% call macros::active_link(expected="builds", href="/about/builds", text=text) %}
-
-                        {% set text = crate::icons::IconTable.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>Metadata</span>"|format(text) %}
-                        {% call macros::active_link(expected="metadata", href="/about/metadata", text=text) %}
-
-                        {% set text = crate::icons::IconRoad.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>Shorthand URLs</span>"|format(text) %}
-                        {% call macros::active_link(expected="redirections", href="/about/redirections", text=text) %}
-
-                        {% set text = crate::icons::IconDownload.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>Download</span>"|format(text) %}
-                        {% call macros::active_link(expected="download", href="/about/download", text=text) %}
-
-                        {% set text = crate::icons::IconFileCode.render_solid(false, false, "") %}
-                        {% set text = "{} <span class='title'>Rustdoc JSON</span>"|format(text) %}
-                        {% call macros::active_link(expected="rustdoc-json", href="/about/rustdoc-json", text=text) %}
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}
-
 {%- block topbar -%}
     {% let search_query = Some(String::new()) %}
     {%- include "header/topbar.html" -%}
diff --git a/templates/header/topbar_end.html b/templates/header/topbar_end.html
index 96cf7b202..3dc5c1185 100644
--- a/templates/header/topbar_end.html
+++ b/templates/header/topbar_end.html
@@ -9,22 +9,53 @@
                     The docs.rs dropdown menu
                     #}<li class="pure-menu-item pure-menu-has-children">
                         <a href="#" class="pure-menu-link" aria-label="docs.rs">docs.rs</a>
-                        <ul class="pure-menu-children">
-                            {% call macros::menu_link(
+                        <ul class="pure-menu-children aligned-icons">
+                            {%- call macros::menu_link_with_icon_solid(
                                 href="/about",
                                 text="About docs.rs",
-                                target="",
-                            ) %}
-                            {% call macros::menu_link(
-                                href="https://foundation.rust-lang.org/policies/privacy-policy/#docs.rs",
-                                text="Privacy policy",
-                                target="_blank"
-                            ) %}
-                            {% call macros::menu_link(
+                                icon=crate::icons::IconCircleInfo,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_brand(
+                                href="/about/badges",
+                                text="Badges",
+                                icon=crate::icons::IconFonticons,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="/about/builds",
+                                text="Builds",
+                                icon=crate::icons::IconGears,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="/about/metadata",
+                                text="Metadata",
+                                icon=crate::icons::IconTable,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="/about/redirections",
+                                text="Shorthand URLs",
+                                icon=crate::icons::IconRoad,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="/about/download",
+                                text="Download",
+                                icon=crate::icons::IconDownload,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="/about/rustdoc-json",
+                                text="Rustdoc JSON",
+                                icon=crate::icons::IconFileCode,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
                                 href="/releases/queue",
                                 text="Build queue",
-                                target="",
-                            ) %}
+                                icon=crate::icons::IconGears,
+                            ) -%}
+                            {%- call macros::menu_link_with_icon_solid(
+                                href="https://foundation.rust-lang.org/policies/privacy-policy/#docs.rs",
+                                text="Privacy policy",
+                                icon=crate::icons::IconShieldHalved,
+                                target="_blank",
+                            ) -%}
                         </ul>
                     </li>
                 </ul>
diff --git a/templates/macros.html b/templates/macros.html
index 94f48f21b..9a0888142 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -1,18 +1,3 @@
-{#
-    Creates a list entry for active tabs. When the active tab is the same as `expected`, it will show the current tab as active.
-    * `expected` A string that represents the current tab, when `active_tab == expected` the current will be shown as active
-    * `href` A string used as the tab's link
-    * `text` A string used as the tab's text
-#}
-{% macro active_link(expected, href, text) %}
-    <li class="pure-menu-item">
-        <a class="pure-menu-link {% if active_tab == *expected %} pure-menu-active {% endif %}" href="{{ href }}">
-            {# safe: allow passing in HTML #}
-            {{ text|safe }}
-        </a>
-    </li>
-{% endmacro active_link %}
-
 {#
     Creates a list entry
     * `href` A string used as the tab's link
@@ -20,13 +5,27 @@
     * `target` An optional target
     * `extra_classes` Optional extra css classes
 #}
-{% macro menu_link(href, text, target) %}
-    <li class="pure-menu-item">
-        <a class="pure-menu-link" href="{{ href }}" {% if !target.is_empty() -%} target="{{ target }}" {%- endif %}>
-            {{ text }}
-        </a>
+{% macro menu_link(href, text, target, icon="") -%}
+    <li class="pure-menu-item"> {#- -#}
+        <a class="pure-menu-link" href="{{ href }}"{% if !target.is_empty() %} target="{{ target }}" {%- endif %}>{{ text }}</a> {#- -#}
+    </li>
+{%- endmacro menu_link %}
+
+{% macro menu_link_with_icon_solid(href, text, icon, target="") -%}
+    <li class="pure-menu-item"> {#- -#}
+        <a class="pure-menu-link" href="{{ href }}"{% if !target.is_empty() %} target="{{ target }}" {%- endif %}>
+            {{- icon.render_solid(false, false, "") }} {{ text -}}
+        </a> {#- -#}
+    </li>
+{%- endmacro menu_link_with_icon_solid %}
+
+{% macro menu_link_with_icon_brand(href, text, icon) -%}
+    <li class="pure-menu-item"> {#- -#}
+        <a class="pure-menu-link" href="{{ href }}">
+            {{- icon.render_brands(false, false, "") }} {{ text -}}
+        </a> {#- -#}
     </li>
-{% endmacro menu_link %}
+{%- endmacro menu_link_with_icon_brand %}
 
 {#
     Creates a formatted table showing the resource limits of a crate
diff --git a/templates/style/style.scss b/templates/style/style.scss
index 953cb4b8c..53b08423f 100644
--- a/templates/style/style.scss
+++ b/templates/style/style.scss
@@ -210,6 +210,15 @@ div.container {
     text-align: left;
 }
 
+ul.aligned-icons .fa {
+    width: 1.5em;
+    display: inline-flex;
+}
+
+ul.aligned-icons .fa::before {
+    margin: 0 auto;
+}
+
 body.centered div.container {
     margin: 0 auto;
 }