diff --git a/allianceauth/framework/templates/framework/header/page-header.html b/allianceauth/framework/templates/framework/header/page-header.html
index ed067db3..d84868c2 100644
--- a/allianceauth/framework/templates/framework/header/page-header.html
+++ b/allianceauth/framework/templates/framework/header/page-header.html
@@ -7,7 +7,7 @@
 
         {% if subtitle %}
             <br>
-            <small>{{ subtitle }}</small>
+            <small class="text-muted">{{ subtitle }}</small>
         {% endif %}
     </h1>
 {% endif %}
diff --git a/docs/development/custom/framework/templates.md b/docs/development/custom/framework/templates.md
index bcbe19a2..51a5861d 100644
--- a/docs/development/custom/framework/templates.md
+++ b/docs/development/custom/framework/templates.md
@@ -38,7 +38,8 @@ To use it, you can use the following code in your template:
 {% block content %}
     <div>
         {% translate "My Page Header" as page_header %}
-        {% include "framework/header/page-header.html" with title=page_header %}
+        {% translate "My Page Header Subtitle" as optional_subtitle %}
+        {% include "framework/header/page-header.html" with title=page_header subtitle=optional_subtitle %}
 
         <p>My page content</p>
     </div>