diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
index de42d5893..adb0e5507 100644
--- a/docs/_includes/layouts/component.njk
+++ b/docs/_includes/layouts/component.njk
@@ -1,6 +1,10 @@
 {% extends "./base.njk" %}
 
+{% import "./macros/tier.njk" as macros %}
+
+
 {% block content %}
+     {{ macros.tierLabel(tier, tierMessage, tierLink, tierUrl) }}
     <div class="app-layout__content">
         <h1 class="govuk-heading-xl">
           {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
diff --git a/docs/_includes/layouts/macros/tier.njk b/docs/_includes/layouts/macros/tier.njk
new file mode 100644
index 000000000..3433df896
--- /dev/null
+++ b/docs/_includes/layouts/macros/tier.njk
@@ -0,0 +1,27 @@
+{% macro tierLabel(tier, tierMessage, tierLink, tierUrl) %}
+  {% if tier %}
+    {% set tierClass = {
+      "Reviewed": "govuk-tag--green",
+      "Due for review": "govuk-tag--orange",
+      "Community component": "govuk-tag--light-blue",
+      "Archived": "govuk-tag--grey"
+    }[tier] or "" %}
+
+    <div class="app-tier">
+      <p class="govuk-phase-banner__content govuk-!-margin-bottom-0">
+        <span class="govuk-tag govuk-phase-banner__content__tag {{ tierClass }}">
+          {{ tier }}
+        </span>
+
+        {% if tierMessage %}
+          <span class="govuk-phase-banner__text">
+            {{ tierMessage }} 
+            {% if tierLink %}
+              <a class="govuk-link" href="{{ tierUrl | default('#') }}">{{ tierLink }}</a>
+            {% endif %}
+          </span>
+        {% endif %}
+      </p>
+    </div>
+  {% endif %}
+{% endmacro %}
diff --git a/docs/assets/stylesheets/application.scss b/docs/assets/stylesheets/application.scss
index e246e74d4..a19c74d0a 100755
--- a/docs/assets/stylesheets/application.scss
+++ b/docs/assets/stylesheets/application.scss
@@ -29,6 +29,7 @@ $govuk-assets-path: "../" !default;
 @import "./components/page";
 @import "./components/menu-toggle";
 @import "./components/app-card";
+@import "./components/tier";
 @import "./components/documentation_tabs";
 
 @view-transition {
diff --git a/docs/assets/stylesheets/components/_tier.scss b/docs/assets/stylesheets/components/_tier.scss
new file mode 100644
index 000000000..1f3a2d6e7
--- /dev/null
+++ b/docs/assets/stylesheets/components/_tier.scss
@@ -0,0 +1,17 @@
+.app-tier {
+  background-color: govuk-colour("white");
+  padding: govuk-spacing(2) govuk-spacing(4);
+  border-bottom: 1px solid $govuk-border-colour;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  @include govuk-media-query($until: desktop) {
+    position: relative;
+  }
+  p {
+    @include govuk-font($size: 16, $line-height: 20px);
+    @include govuk-media-query($until: desktop) {
+      @include govuk-font($size: 14, $line-height: 16px);
+    }
+  }
+}
diff --git a/docs/components/add-another.md b/docs/components/add-another.md
index 4c486e31b..442b592af 100644
--- a/docs/components/add-another.md
+++ b/docs/components/add-another.md
@@ -1,6 +1,10 @@
 ---
 layout: layouts/component.njk
 title: Add another
+tier: "Archived"
+tierMessage: "Created: Aug 2024"
+tierLink: "Learn more about 'reviewed' components."
+tierUrl: "#"
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/686
 eleventyNavigation:
diff --git a/docs/components/badge.md b/docs/components/badge.md
index fa5b83e7a..ec30c932d 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -2,6 +2,10 @@
 layout: layouts/component.njk
 title: Badge
 type: component
+tier: "Reviewed"
+tierMessage: "Created: Aug 2024"
+tierLink: "Learn more about 'reviewed' components."
+tierUrl: "#"
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/687
 eleventyNavigation:
   parent: Components