diff --git a/modules/audit/pages/audit/system-audit/view(default).phtml b/modules/audit/pages/audit/system-audit/view(default).phtml
index 55bee26..30c988c 100644
--- a/modules/audit/pages/audit/system-audit/view(default).phtml
+++ b/modules/audit/pages/audit/system-audit/view(default).phtml
@@ -22,6 +22,7 @@ if ($metadataJson !== '') {
 }
 
 $requestId = trim((string) ($auditLog['request_id'] ?? ''));
+$requestIdDisplay = $requestId !== '' ? substr($requestId, 0, 10) : '-';
 $eventType = trim((string) ($auditLog['event_type'] ?? ''));
 $channel = strtoupper(trim((string) ($auditLog['channel'] ?? '')));
 $errorCode = trim((string) ($auditLog['error_code'] ?? ''));
@@ -30,7 +31,9 @@ $path = trim((string) ($auditLog['path'] ?? ''));
 $targetType = trim((string) ($auditLog['target_type'] ?? ''));
 $targetUuid = trim((string) ($auditLog['target_uuid'] ?? ''));
 $ipHash = trim((string) ($auditLog['ip_hash'] ?? ''));
+$ipHashDisplay = $ipHash !== '' ? substr($ipHash, 0, 16) . '...' : '-';
 $userAgentHash = trim((string) ($auditLog['user_agent_hash'] ?? ''));
+$userAgentHashDisplay = $userAgentHash !== '' ? substr($userAgentHash, 0, 16) . '...' : '-';
 
 $actorLabel = trim((string) ($auditLog['actor_user_display_name'] ?? ''));
 $actorEmail = trim((string) ($auditLog['actor_user_email'] ?? ''));
@@ -56,87 +59,89 @@ if ($tenantLabel === '') {
     ?>
 
     <div class="app-details-content">
-      <details open>
-        <summary><?php e(t('Event details')); ?></summary>
-        <hr>
-        <div class="grid">
-          <div>
-            <small><?php e(t('Event type')); ?></small>
-            <p><code><?php e($eventType !== '' ? $eventType : '-'); ?></code></p>
+      <details class="app-details-card" open>
+        <summary>
+          <span class="app-details-card-summary-title"><?php e(t('Event details')); ?></span>
+          <span class="app-details-card-summary-meta">
+            <span class="badge" data-variant="<?php e($outcomeVariant); ?>"><?php e(t($outcome->labelToken())); ?></span>
+          </span>
+        </summary>
+        <div class="app-details-card-container">
+          <div class="grid">
+            <div>
+              <small><?php e(t('Event type')); ?></small>
+              <p><code><?php e($eventType !== '' ? $eventType : '-'); ?></code></p>
+            </div>
+            <div>
+              <small><?php e(t('Channel')); ?></small>
+              <p><?php e($channel !== '' ? $channel : '-'); ?></p>
+            </div>
           </div>
-          <div>
-            <small><?php e(t('Outcome')); ?></small>
-            <p><span class="badge" data-variant="<?php e($outcomeVariant); ?>"><?php e(t($outcome->labelToken())); ?></span></p>
-          </div>
-        </div>
-        <div class="grid">
-          <div>
-            <small><?php e(t('Channel')); ?></small>
-            <p><?php e($channel !== '' ? $channel : '-'); ?></p>
-          </div>
-          <div>
-            <small><?php e(t('Error code')); ?></small>
-            <p><?php e($errorCode !== '' ? $errorCode : '-'); ?></p>
-          </div>
-        </div>
-        <?php if ($method !== '' || $path !== ''): ?>
           <div class="grid">
             <div>
               <small><?php e(t('Method')); ?></small>
-              <p><?php e($method !== '' ? $method : '-'); ?></p>
+              <p><span class="badge" data-variant="neutral"><?php e($method !== '' ? $method : '-'); ?></span></p>
             </div>
             <div>
-              <small><?php e(t('Path')); ?></small>
-              <p><code><?php e($path !== '' ? $path : '-'); ?></code></p>
+              <small><?php e(t('Error code')); ?></small>
+              <p><?php e($errorCode !== '' ? $errorCode : '-'); ?></p>
             </div>
           </div>
-        <?php endif; ?>
-      </details>
-
-      <hr>
-      <details>
-        <summary><?php e(t('Scope')); ?></summary>
-        <hr>
-        <div class="grid">
           <div>
-            <small><?php e(t('Actor')); ?></small>
-            <p>
-              <?php if (!empty($auditLog['actor_user_uuid'])): ?>
-                <a href="admin/users/edit/<?php e($auditLog['actor_user_uuid']); ?>"><?php e($actorLabel); ?></a>
-              <?php else: ?>
-                <?php e($actorLabel); ?>
-              <?php endif; ?>
-            </p>
-          </div>
-          <div>
-            <small><?php e(t('Actor tenant')); ?></small>
-            <p>
-              <?php if (!empty($auditLog['actor_tenant_uuid'])): ?>
-                <a href="admin/tenants/edit/<?php e($auditLog['actor_tenant_uuid']); ?>"><?php e($tenantLabel); ?></a>
-              <?php else: ?>
-                <?php e($tenantLabel); ?>
-              <?php endif; ?>
-            </p>
+            <small><?php e(t('Path')); ?></small>
+            <p><code><?php e($path !== '' ? $path : '-'); ?></code></p>
           </div>
         </div>
-        <div class="grid">
-          <div>
-            <small><?php e(t('Target type')); ?></small>
-            <p><?php e($targetType !== '' ? $targetType : '-'); ?></p>
+      </details>
+
+      <details class="app-details-card" open>
+        <summary>
+          <span class="app-details-card-summary-title"><?php e(t('Scope')); ?></span>
+        </summary>
+        <div class="app-details-card-container">
+          <div class="grid">
+            <div>
+              <small><?php e(t('Actor')); ?></small>
+              <p>
+                <?php if (!empty($auditLog['actor_user_uuid'])): ?>
+                  <a href="admin/users/edit/<?php e($auditLog['actor_user_uuid']); ?>"><?php e($actorLabel); ?></a>
+                <?php else: ?>
+                  <?php e($actorLabel); ?>
+                <?php endif; ?>
+              </p>
+            </div>
+            <div>
+              <small><?php e(t('Actor tenant')); ?></small>
+              <p>
+                <?php if (!empty($auditLog['actor_tenant_uuid'])): ?>
+                  <a href="admin/tenants/edit/<?php e($auditLog['actor_tenant_uuid']); ?>"><?php e($tenantLabel); ?></a>
+                <?php else: ?>
+                  <?php e($tenantLabel); ?>
+                <?php endif; ?>
+              </p>
+            </div>
           </div>
-          <div>
-            <small><?php e(t('Target UUID')); ?></small>
-            <p><code><?php e($targetUuid !== '' ? $targetUuid : '-'); ?></code></p>
+          <div class="grid">
+            <div>
+              <small><?php e(t('Target type')); ?></small>
+              <p><?php e($targetType !== '' ? $targetType : '-'); ?></p>
+            </div>
+            <div>
+              <small><?php e(t('Target UUID')); ?></small>
+              <p><code><?php e($targetUuid !== '' ? $targetUuid : '-'); ?></code></p>
+            </div>
           </div>
         </div>
       </details>
 
       <?php if ($metadataPretty !== '-'): ?>
-        <hr>
-        <details>
-          <summary><?php e(t('Metadata')); ?></summary>
-          <hr>
-          <textarea readonly rows="14"><?php e($metadataPretty); ?></textarea>
+        <details class="app-details-card">
+          <summary>
+            <span class="app-details-card-summary-title"><?php e(t('Metadata')); ?></span>
+          </summary>
+          <div class="app-details-card-container">
+            <pre><code><?php e($metadataPretty); ?></code></pre>
+          </div>
         </details>
       <?php endif; ?>
     </div>
@@ -167,17 +172,25 @@ if ($tenantLabel === '') {
         <small><?php e(t('Request ID')); ?></small>
         <p>
           <span class="badge" data-variant="neutral" data-copy="true" data-copy-value="<?php e($requestId); ?>">
-            <?php e($requestId !== '' ? substr($requestId, 0, 10) : '-'); ?>
+            <?php e($requestIdDisplay); ?>
           </span>
         </p>
       </div>
       <div>
         <small><?php e(t('IP hash')); ?></small>
-        <p><code><?php e($ipHash !== '' ? substr($ipHash, 0, 16) . '...' : '-'); ?></code></p>
+        <p>
+          <span class="badge" data-variant="neutral" data-copy="true" data-copy-value="<?php e($ipHash); ?>">
+            <?php e($ipHashDisplay); ?>
+          </span>
+        </p>
       </div>
       <div>
         <small><?php e(t('User agent hash')); ?></small>
-        <p><code><?php e($userAgentHash !== '' ? substr($userAgentHash, 0, 16) . '...' : '-'); ?></code></p>
+        <p>
+          <span class="badge" data-variant="neutral" data-copy="true" data-copy-value="<?php e($userAgentHash); ?>">
+            <?php e($userAgentHashDisplay); ?>
+          </span>
+        </p>
       </div>
     </div>
   </aside>