diff --git a/docs/release-notes/version-3.1.md b/docs/release-notes/version-3.1.md
index 649bb8ce8..c13a5df1f 100644
--- a/docs/release-notes/version-3.1.md
+++ b/docs/release-notes/version-3.1.md
@@ -7,6 +7,7 @@
 * [#8246](https://github.com/netbox-community/netbox/issues/8246) - Show human-friendly values for commit rates in circuits table
 * [#8262](https://github.com/netbox-community/netbox/issues/8262) - Add cable count to tenant stats
 * [#8265](https://github.com/netbox-community/netbox/issues/8265) - Add Stackwise-n interface types
+* [#8302](https://github.com/netbox-community/netbox/issues/8302) - Linkify role column in device & VM tables
 
 ### Bug Fixes
 
diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index a53e70f51..9e85e4754 100644
Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ
diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index 29c3ad3c7..49b8aae73 100644
Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ
diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css
index 23d0be306..a90c88398 100644
Binary files a/netbox/project-static/dist/netbox-print.css and b/netbox/project-static/dist/netbox-print.css differ
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index f8e8c3420..a54b6c324 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -597,6 +597,10 @@ span.color-label {
   box-shadow: $box-shadow-sm;
 }
 
+.badge a {
+  color: inherit;
+}
+
 .btn {
   white-space: nowrap;
 }
diff --git a/netbox/utilities/tables.py b/netbox/utilities/tables.py
index 9000af110..c640e0e85 100644
--- a/netbox/utilities/tables.py
+++ b/netbox/utilities/tables.py
@@ -330,15 +330,15 @@ class ColoredLabelColumn(tables.TemplateColumn):
     Render a colored label (e.g. for DeviceRoles).
     """
     template_code = """
-    {% load helpers %}
-    {% if value %}
-    <span class="badge" style="color: {{ value.color|fgcolor }}; background-color: #{{ value.color }}">
-      {{ value }}
-    </span>
-    {% else %}
-    &mdash;
-    {% endif %}
-    """
+{% load helpers %}
+  {% if value %}
+  <span class="badge" style="color: {{ value.color|fgcolor }}; background-color: #{{ value.color }}">
+    <a href="{{ value.get_absolute_url }}">{{ value }}</a>
+  </span>
+{% else %}
+  &mdash;
+{% endif %}
+"""
 
     def __init__(self, *args, **kwargs):
         super().__init__(template_code=self.template_code, *args, **kwargs)