diff --git a/device/templates/device_web.html b/device/templates/device_web.html
index 919dec7..539c2f9 100644
--- a/device/templates/device_web.html
+++ b/device/templates/device_web.html
@@ -1,173 +1,193 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ title }} - {{ object.type }}</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
     <style>
-        body {
-            font-size: .875rem;
-            background-color: #f8f9fa;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-        }
-        .custom-container {
-            background-color: #ffffff;
-            border-radius: 10px;
-            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-            margin-top: 30px;
-            flex-grow: 1;
-        }
-        .section-title {
-            color: #7a9f4f;
-            border-bottom: 2px solid #9cc666;
-            padding-bottom: 10px;
-            margin-bottom: 20px;
-            font-size: 1.5em;
-        }
-        .info-row {
-            margin-bottom: 10px;
-        }
-        .info-label {
-            font-weight: bold;
-            color: #545f71;
-        }
-        .info-value {
-            color: #333;
-        }
-        .component-card {
-            background-color: #f8f9fa;
-            border-left: 4px solid #9cc666;
-            margin-bottom: 15px;
-            transition: all 0.3s ease;
-        }
-        .component-card:hover {
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            transform: translateY(-2px);
-        }
-        .hash-value {
-            word-break: break-all;
-            background-color: #f3f3f3;
-            padding: 5px;
-            border-radius: 4px;
-            font-family: monospace;
-            font-size: 0.9em;
-            border: 1px solid #e0e0e0;
-        }
-        .card-title {
-            color: #9cc666;
-        }
-        .btn-primary {
-            background-color: #9cc666;
-            border-color: #9cc666;
-            padding: 0.1em 2em;
-            font-weight: 700;
-        }
-        .btn-primary:hover {
-            background-color: #8ab555;
-            border-color: #8ab555;
-        }
-        .btn-green-user {
-            background-color: #c7e3a3;
-        }
-        .btn-grey {
-            background-color: #f3f3f3;
-        }
-        footer {
-            background-color: #545f71;
-            color: #ffffff;
-            text-align: center;
-            padding: 10px 0;
-            margin-top: 20px;
-        }
+      body {
+        font-size: 0.875rem;
+        background-color: #f8f9fa;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+      .custom-container {
+        background-color: #ffffff;
+        border-radius: 10px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        padding: 30px;
+        margin-top: 30px;
+        flex-grow: 1;
+      }
+      .section-title {
+        color: #7a9f4f;
+        border-bottom: 2px solid #9cc666;
+        padding-bottom: 10px;
+        margin-bottom: 20px;
+        font-size: 1.5em;
+      }
+      .info-row {
+        margin-bottom: 10px;
+      }
+      .info-label {
+        font-weight: bold;
+        color: #545f71;
+      }
+      .info-value {
+        color: #333;
+      }
+      .component-card {
+        background-color: #f8f9fa;
+        border-left: 4px solid #9cc666;
+        margin-bottom: 15px;
+        transition: all 0.3s ease;
+      }
+      .component-card:hover {
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+      }
+      .hash-value {
+        word-break: break-all;
+        background-color: #f3f3f3;
+        padding: 5px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.9em;
+        border: 1px solid #e0e0e0;
+      }
+      .card-title {
+        color: #9cc666;
+      }
+      .btn-primary {
+        background-color: #9cc666;
+        border-color: #9cc666;
+        padding: 0.1em 2em;
+        font-weight: 700;
+      }
+      .btn-primary:hover {
+        background-color: #8ab555;
+        border-color: #8ab555;
+      }
+      .btn-green-user {
+        background-color: #c7e3a3;
+      }
+      .btn-grey {
+        background-color: #f3f3f3;
+      }
+      footer {
+        background-color: #545f71;
+        color: #ffffff;
+        text-align: center;
+        padding: 10px 0;
+        margin-top: 20px;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="container custom-container">
-        <h1 class="text-center mb-4" style="color: #545f71;">{{ title }} - {{ object.type }}</h1>
+      <h1 class="text-center mb-4" style="color: #545f71;">{{ title }} - {{ object.type }}</h1>
 
-        <div class="row">
-            <div class="col-lg-6">
-                <h2 class="section-title">Details</h2>
-                <div class="info-row row">
-                    <div class="col-md-4 info-label">Phid</div>
-                    <div class="col-md-8 info-value">
-                        <div class="hash-value">{{ object.id }}</div>
-                    </div>
-                </div>
-                <div class="info-row row">
-                    <div class="col-md-4 info-label">Type</div>
-                    <div class="col-md-8 info-value">{{ object.type }}</div>
-                </div>
-
-                {% if object.is_websnapshot %}
-                    {% for k, v in object.last_user_evidence %}
-                        <div class="info-row row">
-                            <div class="col-md-4 info-label">{{ k }}</div>
-                            <div class="col-md-8 info-value">{{ v|default:'' }}</div>
-                        </div>
-                    {% endfor %}
-                {% else %}
-                    <div class="info-row row">
-                        <div class="col-md-4 info-label">Manufacturer</div>
-                        <div class="col-md-8 info-value">{{ object.manufacturer|default:'' }}</div>
-                    </div>
-                    <div class="info-row row">
-                        <div class="col-md-4 info-label">Model</div>
-                        <div class="col-md-8 info-value">{{ object.model|default:'' }}</div>
-                    </div>
-                    <div class="info-row row">
-                        <div class="col-md-4 info-label">Serial Number</div>
-                        <div class="col-md-8 info-value">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
-                    </div>
-                {% endif %}
+      <div class="row">
+        <div class="col-lg-6">
+          <h2 class="section-title">Details</h2>
+          <div class="info-row row">
+            <div class="col-md-4 info-label">Phid</div>
+            <div class="col-md-8 info-value">
+              <div class="hash-value">{{ object.id }}</div>
             </div>
+          </div>
+          <div class="info-row row">
+            <div class="col-md-4 info-label">Type</div>
+            <div class="col-md-8 info-value">{{ object.type }}</div>
+          </div>
 
-            <div class="col-lg-6">
-                <h2 class="section-title">Identifiers</h2>
-                {% for chid in object.hids %}
-                    <div class="info-row">
-                        <div class="hash-value">{{ chid|default:'' }}</div>
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-
-        <h2 class="section-title mt-5">Components</h2>
-        <div class="row">
-            {% for c in object.last_evidence.doc.components %}
-                <div class="col-md-6 mb-3">
-                    <div class="card component-card">
-                        <div class="card-body">
-                            <h5 class="card-title">{{ c.type }}</h5>
-                            <p class="card-text">
-                                <strong>Manufacturer:</strong> {{ c.manufacturer }}<br>
-                                <strong>Model:</strong> {{ c.model }}<br>
-                                <strong>Serial Number:</strong> {{ c.serialNumber }}
-                            </p>
-                            <small class="text-muted">{{ evidence.created }}</small>
-                        </div>
-                    </div>
-                </div>
+          {% if object.is_websnapshot %}
+            {% for k, v in object.last_user_evidence %}
+              <div class="info-row row">
+                <div class="col-md-4 info-label">{{ k }}</div>
+                <div class="col-md-8 info-value">{{ v|default:'' }}</div>
+              </div>
             {% endfor %}
+          {% else %}
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Manufacturer</div>
+              <div class="col-md-8 info-value">{{ object.manufacturer|default:'' }}</div>
+            </div>
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Model</div>
+              <div class="col-md-8 info-value">{{ object.model|default:'' }}</div>
+            </div>
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Serial Number</div>
+              <div class="col-md-8 info-value">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
+            </div>
+          {% endif %}
         </div>
 
-        <h2 class="section-title mt-5">Last Evidence Snapshot</h2>
-        <div class="card">
-            <div class="card-body">
-                <p class="card-text">{{ snapshot }}</p>
+        <div class="col-lg-6">
+          <h2 class="section-title">Identifiers</h2>
+          {% for chid in object.hids %}
+            <div class="info-row">
+              <div class="hash-value">{{ chid|default:'' }}</div>
             </div>
+          {% endfor %}
         </div>
+      </div>
+
+      <h2 class="section-title mt-5">Components</h2>
+      <div class="row">
+        {% comment %}Iterates over legacy snapshot components{% endcomment %}
+        {% for component in object.last_evidence.doc.components %}
+          <div class="col-md-6 mb-3">
+            <div class="card component-card">
+              <div class="card-body">
+                <h5 class="card-title">{{ component.type }}</h5>
+                <p class="card-text">
+                  <strong>Manufacturer:</strong> {{ component.manufacturer }}<br />
+                  <strong>Model:</strong> {{ component.model }}<br />
+                  <strong>Serial Number:</strong> {{ component.serialNumber }}
+                </p>
+                <small class="text-muted">{{ component.created }}</small>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+        {% comment %}Iterates over new snapshot components{% endcomment %}
+        {% for component in object.components %}
+          <div class="col-md-6 mb-3">
+            <div class="card component-card">
+              <div class="card-body">
+                <h5 class="card-title">{{ component.type }}</h5>
+                <p class="card-text">
+                  {% for component_key, component_value in component.items %}
+                    {% if component_key not in 'actions,type' %}
+                      <strong>{{ component_key }}:</strong> {{ component_value }}<br />
+                    {% endif %}
+                  {% endfor %}
+                </p>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+
+      <h2 class="section-title mt-5">Last Evidence Snapshot</h2>
+      <div class="card">
+        <div class="card-body">
+          <p class="card-text">{{ snapshot }}</p>
+        </div>
+      </div>
     </div>
 
     <footer>
-        <p>&copy; {% now "Y" %} eReuse. All rights reserved.</p>
+      <p>
+        &copy;{% now 'Y' %}eReuse. All rights reserved.
+      </p>
     </footer>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
