diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
index ba967d51e9..c484735696 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.scss
@@ -154,6 +154,41 @@
       }
     }
 
+    .tb-callout {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 16px;
+      border-radius: 4px;
+      border: 1px solid;
+      margin: 12px 0;
+      font-size: 14px;
+      line-height: 20px;
+
+      .tb-callout-icon {
+        font-size: 20px;
+        flex-shrink: 0;
+      }
+
+      &.tb-callout-note {
+        background: #e3f2fd;
+        border-color: #90caf9;
+        color: #1565c0;
+      }
+
+      &.tb-callout-warn {
+        background: #fff8e1;
+        border-color: #ffe082;
+        color: #f57f17;
+      }
+
+      &.tb-callout-error {
+        background: #fce4ec;
+        border-color: #ef9a9a;
+        color: #c62828;
+      }
+    }
+
     .tb-gallery {
       display: flex;
       flex-wrap: wrap;
diff --git a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
index be0465a137..66b8a82b01 100644
--- a/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/iot-hub/device-install-dialog/device-install-dialog.component.ts
@@ -394,6 +394,14 @@ export class TbDeviceInstallDialogComponent extends DialogComponent<TbDeviceInst
       if (key === 'gateway.downloadButton') {
         return '<a href="#" data-action="download-gateway-docker-compose" class="tb-download-btn">⬇ Download docker-compose.yml</a>';
       }
+      // Callout boxes: ${note(...)}, ${warn(...)}, ${error(...)}
+      const calloutMatch = key.match(/^(note|warn|error)\((.+)\)$/s);
+      if (calloutMatch) {
+        const type = calloutMatch[1];
+        const text = calloutMatch[2];
+        const icons: Record<string, string> = { note: 'info_outline', warn: 'warning_amber', error: 'error_outline' };
+        return `<div class="tb-callout tb-callout-${type}"><i class="material-icons tb-callout-icon">${icons[type]}</i><span class="tb-callout-text">${text}</span></div>`;
+      }
       // Image gallery: ${images.gallery(path1,path2,path3)}
       const galleryMatch = key.match(/^images\.gallery\((.+)\)$/);
       if (galleryMatch) {