diff --git a/ietf/doc/templatetags/document_type_badge.py b/ietf/doc/templatetags/document_type_badge.py
new file mode 100644
index 000000000..a82c606ff
--- /dev/null
+++ b/ietf/doc/templatetags/document_type_badge.py
@@ -0,0 +1,29 @@
+# Copyright The IETF Trust 2015-2020, All Rights Reserved
+from django import template
+from django.conf import settings
+from django.template.loader import render_to_string
+from ietf.utils.log import log
+
+register = template.Library()
+
+
+@register.simple_tag
+def document_type_badge(doc, snapshot, submission, resurrected_by):
+    context = {"doc": doc, "snapshot": snapshot, "submission": submission, "resurrected_by": resurrected_by}
+    if doc.type_id == "rfc":
+        return render_to_string(
+            "doc/badge/doc-badge-rfc.html",
+            context,
+        )
+    elif doc.type_id == "draft":
+        return render_to_string(
+            "doc/badge/doc-badge-draft.html",
+            context,
+        )
+    else:
+        error_message = f"Unsupported document type {doc.type_id}."
+        if settings.SERVER_MODE != 'production':
+            raise ValueError(error_message)
+        else:
+            log(error_message)
+        return ""
diff --git a/ietf/static/css/document_html.scss b/ietf/static/css/document_html.scss
index 0b5a70f12..47ef8d64b 100644
--- a/ietf/static/css/document_html.scss
+++ b/ietf/static/css/document_html.scss
@@ -320,6 +320,11 @@ tbody.meta tr {
     background-color: $danger;
 }
 
+.badge-generic {
+    color: white;
+    background-color: $danger;
+}
+
 #toc-nav {
     width: inherit;
     overscroll-behavior-y: none; // Prevent overscrolling from scrolling the main content
diff --git a/ietf/templates/doc/badge/doc-badge-draft.html b/ietf/templates/doc/badge/doc-badge-draft.html
new file mode 100644
index 000000000..f7f66b6c5
--- /dev/null
+++ b/ietf/templates/doc/badge/doc-badge-draft.html
@@ -0,0 +1,16 @@
+{% load origin %}
+{% load static %}
+{% load ietf_filters %}
+{% load person_filters %}
+{% origin %}
+{# Non-RFC #}
+
+{% if doc.became_rfc %} 
+    <div{% if document_html %} class="alert alert-warning small"{% endif %}>This is an older version of an Internet-Draft that was ultimately published as <a href="{% if document_html %}{% url 'ietf.doc.views_doc.document_html' name=doc.became_rfc.name %}{% else %}{% url 'ietf.doc.views_doc.document_main' name=doc.became_rfc.name %}{% endif %}">{{doc.became_rfc.name|prettystdname}}</a>.</div>
+{% elif snapshot and doc.rev != latest_rev  %}
+    <div{% if document_html %} class="alert alert-warning small p-2 mt-2"{% endif %}>This is an older version of an Internet-Draft whose latest revision state is "{{ doc.doc.get_state }}".</div>
+{% else %}
+    <span class="{% if doc.get_state_slug == 'active' %}text-success{% elif doc.get_state_slug == 'expired' or doc.get_state_slug == 'repl' %}text-danger{% endif %}">{% if snapshot and doc.rev == latest_rev %}{{ doc.doc.get_state }}{% else %}{{ doc.get_state }}{% endif %} Internet-Draft</span>
+    {% if submission %}({{ submission|safe }}){% endif %}
+    {% if resurrected_by %}- resurrect requested by {{ resurrected_by }}{% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/ietf/templates/doc/badge/doc-badge-rfc.html b/ietf/templates/doc/badge/doc-badge-rfc.html
new file mode 100644
index 000000000..780f14a54
--- /dev/null
+++ b/ietf/templates/doc/badge/doc-badge-rfc.html
@@ -0,0 +1,13 @@
+{% load origin %}
+{% load static %}
+{% load ietf_filters %}
+{% load person_filters %}
+{% origin %}
+
+<span class="text-success">RFC
+    {% if not document_html %}
+    - {{ doc.std_level }}
+    {% else %}
+        <span class="badge rounded-pill badge-{% if not snapshot %}{{ doc|std_level_to_label_format }}{% else %}generic{% endif %}">{{ doc.std_level }}</span>
+    {% endif %}
+</span>
diff --git a/ietf/templates/doc/document_html.html b/ietf/templates/doc/document_html.html
index 3eabe2ebb..a85b1f531 100644
--- a/ietf/templates/doc/document_html.html
+++ b/ietf/templates/doc/document_html.html
@@ -4,6 +4,7 @@
 {% load origin %}
 {% load static %}
 {% load ietf_filters textfilters %}
+{% load document_type_badge %}
 {% load django_vite %}
 {% origin %}
 <html data-bs-theme="auto" lang="en">
@@ -107,6 +108,7 @@
                     {{ doc.name }}-{{ doc.rev }}
                 {% endif %}
                 <br class="d-sm-none">
+
                 <span class="ms-sm-3 badge rounded-pill badge-{% if not snapshot %}{{ doc|std_level_to_label_format }}{% else %}draft{% endif %}">
                     {% if not snapshot %}
                         {{ doc.std_level }}
@@ -185,13 +187,7 @@
                                     {{ doc.name }}-{{ doc.rev }}
                                 {% endif %}
                                 <br>
-                                <span class="badge rounded-pill badge-{% if not snapshot %}{{ doc|std_level_to_label_format }}{% else %}draft{% endif %}">
-                                    {% if not snapshot %}
-                                        {{ doc.std_level }}
-                                    {% else %}
-                                        Internet-Draft
-                                    {% endif %}
-                                </span>
+                                {% document_type_badge doc snapshot submission resurrected_by %}
                             </p>
                         </div>
                         {% if request.COOKIES.htmlconf and request.COOKIES.htmlconf != 'html' and html %}
diff --git a/ietf/templates/doc/document_info.html b/ietf/templates/doc/document_info.html
index 97cd49cf7..71050f9d4 100644
--- a/ietf/templates/doc/document_info.html
+++ b/ietf/templates/doc/document_info.html
@@ -3,6 +3,7 @@
 {% load static %}
 {% load ietf_filters %}
 {% load person_filters %}
+{% load document_type_badge %}
 {% origin %}
 
 <tbody class="meta align-top {% if not document_html %} border-top{% endif %}">
@@ -11,14 +12,8 @@
         <th scope="row">{% if document_html %}Document type{% else %}Type{% endif %}</th>
         <td class="edit"></td>
         <td>
+            {% document_type_badge doc snapshot submission resurrected_by %}
             {% if doc.type_id == "rfc" %}
-                <span class="text-success">RFC
-                    {% if not document_html %}
-                    - {{ doc.std_level }}
-                    {% else %}
-                        <span class="badge rounded-pill badge-{% if not snapshot %}{{ doc|std_level_to_label_format }}{% else %}draft{% endif %}">{{ doc.std_level }}</span>
-                    {% endif %}
-                </span>
                 {% if doc.pub_date %}
                     {% if document_html %}<br>{% else %}({% endif %}{{ doc.pub_date|date:"F Y" }}{% if not document_html %}){% endif %}
                 {% else %}
@@ -59,16 +54,6 @@
                         {% if submission %}({{ submission|safe }}){% endif %}
                     </div>
                 {% endif %}
-            {% else %}
-                {% if doc.became_rfc %} 
-                   <div{% if document_html %} class="alert alert-warning small"{% endif %}>This is an older version of an Internet-Draft that was ultimately published as <a href="{% if document_html %}{% url 'ietf.doc.views_doc.document_html' name=doc.became_rfc.name %}{% else %}{% url 'ietf.doc.views_doc.document_main' name=doc.became_rfc.name %}{% endif %}">{{doc.became_rfc.name|prettystdname}}</a>.</div>
-                {% elif snapshot and doc.rev != latest_rev  %}
-                    <div{% if document_html %} class="alert alert-warning small p-2 mt-2"{% endif %}>This is an older version of an Internet-Draft whose latest revision state is "{{ doc.doc.get_state }}".</div>
-                 {% else %}
-                    <span class="{% if doc.get_state_slug == 'active' %}text-success{% elif doc.get_state_slug == 'expired' or doc.get_state_slug == 'repl' %}text-danger{% endif %}">{% if snapshot and doc.rev == latest_rev %}{{ doc.doc.get_state }}{% else %}{{ doc.get_state }}{% endif %} Internet-Draft</span>
-                    {% if submission %}({{ submission|safe }}){% endif %}
-                    {% if resurrected_by %}- resurrect requested by {{ resurrected_by }}{% endif %}
-                {% endif %}
             {% endif %}
             {% if doc.get_state_slug != "active" and doc.get_state_slug != "rfc" and doc.type_id != "rfc" %}
                 <div class="badge rounded-pill text-bg-warning{% if not document_html %} float-end{% endif %}">