diff --git a/ram/portal/templates/cards/roster.html b/ram/portal/templates/cards/roster.html
index b30456f..4915334 100644
--- a/ram/portal/templates/cards/roster.html
+++ b/ram/portal/templates/cards/roster.html
@@ -1,4 +1,6 @@
 {% load static %}
+{% load dcc %}
+
         <div class="col">
           <div class="card shadow-sm">
             {% if d.item.image.exists %}
@@ -75,7 +77,7 @@
                   </tr>
                   <tr>
                     <th scope="row">DCC</th>
-                    <td>{{ d.item.dcc|safe }}</td>
+                    <td>{% dcc d.item %}</td>
                   </tr>
                 </tbody>
               </table>
diff --git a/ram/portal/templates/rollingstock.html b/ram/portal/templates/rollingstock.html
index 3bfc32f..0b63f37 100644
--- a/ram/portal/templates/rollingstock.html
+++ b/ram/portal/templates/rollingstock.html
@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load dcc %}
 
         {% block header %}
         {% if rolling_stock.tags.all %}
@@ -142,7 +143,9 @@
                   <table class="table table-striped">
                     <thead>
                       <tr>
-                        <th colspan="2" scope="row">DCC data</th>
+                        <th colspan="2" scope="row">DCC data
+                          <span class="mt-1 float-end">{% dcc rolling_stock %}</span>
+                        </th>
                       </tr>
                     </thead>
                     <tbody class="table-group-divider">
@@ -153,11 +156,15 @@
                       {% if rolling_stock.decoder %}
                       <tr>
                         <th scope="row">Decoder</th>
-                        <td>{{ rolling_stock.decoder }}
+                        <td>{{ rolling_stock.decoder }}</td>
+                      </tr>
+                      <tr>
+                        <th scope="row">Sound</th>
+                        <td>
                         {% if rolling_stock.decoder.sound %}
-                        | <span class="badge text-bg-secondary">
-                        <abbr title="Sound decoder"<i class="bi bi-volume-up-fill"></i></abbr>
-                        </span>
+                          <i class="bi bi-check-circle-fill text-success"></i>
+                        {% else %}
+                          <i class="bi bi-x-circle-fill text-secondary"></i>
                         {% endif %}
                         </td>
                       </tr>
@@ -345,12 +352,14 @@
                   <table class="table table-striped">
                     <thead>
                       <tr>
-                        <th colspan="2" scope="row">Decoder data</th>
+                        <th colspan="2" scope="row">Decoder data
+                            <span class="mt-1 float-end">{% dcc rolling_stock %}</span>
+                        </th>
                       </tr>
                     </thead>
                     <tbody class="table-group-divider">
                       <tr>
-                        <th scope="row">Interface</th>
+                        <th class="w-33" scope="row">Interface</th>
                         <td>{{ rolling_stock.get_decoder_interface }}</td>
                       </tr>
                       <tr>
@@ -359,18 +368,31 @@
                       </tr>
                       <tr>
                         <th scope="row">Name</th>
-                        <td>{{ rolling_stock.decoder.name }}
-                        {% if rolling_stock.decoder.sound %}
-                        | <span class="badge text-bg-secondary">
-                        <abbr title="Sound decoder"<i class="bi bi-volume-up-fill"></i></abbr>
-                        </span>
-                        {% endif %}
-                        </td>
+                        <td>{{ rolling_stock.decoder.name }}</td>
                       </tr>
                       <tr>
                         <th scope="row">Version</th>
                         <td>{{ rolling_stock.decoder.version | default:"-"}}</td>
                       </tr>
+                      <tr>
+                        <th scope="row">Sound</th>
+                        <td>
+                        {% if rolling_stock.decoder.sound %}
+                          <i class="bi bi-check-circle-fill text-success"></i>
+                        {% else %}
+                          <i class="bi bi-x-circle-fill text-secondary"></i>
+                        {% endif %}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <table class="table table-striped">
+                    <thead>
+                      <tr>
+                        <th colspan="2" scope="row">Decoder configuration</th>
+                      </tr>
+                    </thead>
+                    <tbody class="table-group-divider">
                       <tr>
                         <th class="w-33" scope="row">Address</th>
                         <td>{{ rolling_stock.address }}</td>
diff --git a/ram/portal/templatetags/dcc.py b/ram/portal/templatetags/dcc.py
new file mode 100644
index 0000000..d8996b0
--- /dev/null
+++ b/ram/portal/templatetags/dcc.py
@@ -0,0 +1,36 @@
+from django import template
+from django.utils.html import format_html
+
+register = template.Library()
+
+
+@register.simple_tag
+def dcc(object):
+    socket = (
+        '<i class="bi bi-ban small"></i>'
+    )
+    decoder = ''
+    if object.decoder_interface is not None:
+        socket = (
+            f'<abbr title="{object.get_decoder_interface()}">'
+            f'<i class="bi bi-dice-6"></i></abbr>'
+        )
+    if object.decoder:
+        if object.decoder.sound:
+            decoder = (
+                f'<abbr title="{object.decoder}">'
+                '<i class="bi bi-volume-up-fill"></i></abbr>'
+            )
+        else:
+            decoder = (
+                f'<abbr title="{object.decoder}'
+                f'({object.get_decoder_interface()})">'
+                '<i class="bi bi-cpu-fill"></i></abbr>'
+            )
+
+    if decoder:
+        return format_html(
+            f'{socket} <i class="bi bi-arrow-bar-left"></i> {decoder}'
+        )
+
+    return format_html(socket)
diff --git a/ram/ram/__init__.py b/ram/ram/__init__.py
index 7e21cdd..684a865 100644
--- a/ram/ram/__init__.py
+++ b/ram/ram/__init__.py
@@ -1,4 +1,4 @@
 from ram.utils import git_suffix
 
-__version__ = "0.17.11"
+__version__ = "0.17.12"
 __version__ += git_suffix(__file__)