diff --git a/.env.template b/.env.template
index d0eca992..562ac3c7 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.15 - Environment Configuration
+# MiroTalk P2P v.1.8.16 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 9635aec2..1f060c3f 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.15 - Configuration File
+ * MiroTalk P2P v.1.8.16 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index 9c7f66db..5a89f49d 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.15
+ * @version 1.8.16
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index 5c8a35e5..67d751c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.8.15",
+    "version": "1.8.16",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.8.15",
+            "version": "1.8.16",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.6.0",
diff --git a/package.json b/package.json
index 52a5772b..47fffe16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.15",
+    "version": "1.8.16",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/client.css b/public/css/client.css
index f692e9cd..3a238742 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -3109,15 +3109,82 @@ button {
 .extra-info-container {
     margin-top: 15px;
     border-radius: 8px;
-    background: var(--body-bg);
+    background: transparent;
 }
 
 #extraInfo {
-    padding: 10px;
-    font-size: 14px;
-    color: #fff;
-    /* background: var(--select-bg); */
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.extra-info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 4px 0;
+}
+
+.extra-info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 7px 10px;
     border-radius: 10px;
+    border: var(--border);
+    background: var(--select-bg);
+    font-size: 0.82rem;
+}
+
+.extra-info-label {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: rgba(255, 255, 255, 0.55);
+    white-space: nowrap;
+    min-width: 70px;
+}
+
+.extra-info-label i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    font-size: 0.85rem;
+    line-height: 1;
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.extra-info-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    line-height: 1;
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.extra-info-values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    justify-content: flex-end;
+}
+
+.extra-info-badge {
+    display: inline-block;
+    padding: 2px 9px;
+    border-radius: 20px;
+    background: transparent;
+    border: var(--border);
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.78rem;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
 }
 
 /*--------------------------------------------------------------
diff --git a/public/js/brand.js b/public/js/brand.js
index 6306391e..b988c60d 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.15',
+        title: 'WebRTC P2P v1.8.16',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 74b19f1a..c7154e07 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.8.15
+ * @version 1.8.16
  *
  */
 
@@ -107,6 +107,12 @@ const icons = {
     codecs: '<i class="fa-solid fa-film"></i>',
     theme: '<i class="fas fa-fill-drip"></i>',
     close: '<i class="fas fa-times"></i>',
+    infoBrowser: '<i class="fa-solid fa-globe"></i>',
+    infoCpu: '<i class="fa-solid fa-microchip"></i>',
+    infoDevice: '<i class="fa-solid fa-laptop"></i>',
+    infoEngine: '<i class="fa-solid fa-gear"></i>',
+    infoOs: '<i class="fa-solid fa-layer-group"></i>',
+    infoDefault: '<i class="fa-solid fa-circle-info"></i>',
 };
 
 // Whiteboard and fileSharing
@@ -1007,10 +1013,37 @@ function getInfo() {
             os: filterUnknown(parserResult.os),
         };
 
-        // Convert the filtered result to a readable JSON string
-        const resultString = JSON.stringify(filteredResult, null, 2);
+        const sectionMeta = {
+            browser: { iconMarkup: icons.infoBrowser, label: 'Browser' },
+            cpu: { iconMarkup: icons.infoCpu, label: 'CPU info' },
+            device: { iconMarkup: icons.infoDevice, label: 'Device' },
+            engine: { iconMarkup: icons.infoEngine, label: 'Engine' },
+            os: { iconMarkup: icons.infoOs, label: 'OS info' },
+        };
 
-        extraInfo.innerText = resultString;
+        const rows = Object.entries(filteredResult)
+            .filter(([, data]) => Object.keys(data).length > 0)
+            .map(([section, data]) => {
+                const { iconMarkup, label } = sectionMeta[section] || {
+                    iconMarkup: icons.infoDefault,
+                    label: section,
+                };
+                const badges = Object.entries(data)
+                    .filter(([key]) => key !== 'major')
+                    .map(([, val]) => `<span class="extra-info-badge">${val}</span>`)
+                    .join('');
+                return `
+                    <div class="extra-info-row extra-info-row--${section}">
+                        <div class="extra-info-label">
+                            ${iconMarkup}
+                            <span>${label}</span>
+                        </div>
+                        <div class="extra-info-values">${badges}</div>
+                    </div>`;
+            })
+            .join('');
+
+        extraInfo.innerHTML = `<div class="extra-info-grid">${rows}</div>`;
 
         return parserResult;
     } catch (error) {
@@ -15499,7 +15532,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.15',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.16',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/views/client.html b/public/views/client.html
index 11f13f29..9adac418 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -1079,7 +1079,7 @@ access to use this app.
                             <p>Extra info:</p>
                         </div>
                         <div class="extra-info-container">
-                            <pre id="extraInfo"></pre>
+                            <div id="extraInfo"></div>
                         </div>
                     </div>