diff --git a/public/directives/index.js b/public/directives/index.js
index 78d66ac26c..91d9f92c5c 100644
--- a/public/directives/index.js
+++ b/public/directives/index.js
@@ -18,3 +18,4 @@ import './wz-welcome-card/wz-welcome-card';
 import './wz-no-config/wz-no-config';
 import './wz-config-item/wz-config-item';
 import './wz-config-item/wz-config-item.less';
+import './wz-config-viewer/wz-config-viewer';
\ No newline at end of file
diff --git a/public/directives/wz-config-viewer/wz-config-viewer.html b/public/directives/wz-config-viewer/wz-config-viewer.html
new file mode 100644
index 0000000000..68026add18
--- /dev/null
+++ b/public/directives/wz-config-viewer/wz-config-viewer.html
@@ -0,0 +1,53 @@
+<div layout="row">
+<!-- JSON card -->
+<md-card flex="auto" class="wz-md-card" ng-if="jsoncontent">
+    <md-card-content flex layout="column">
+        <div layout="row" layout-align="start center">
+            <div>
+                <span class="font-size-16">JSON viewer</span>
+                <div class="wz-margin-top-10">
+                    <span class="md-subheader small">View this configuration in raw JSON format</span>
+                </div>
+            </div>
+            <span flex></span>
+            <span ng-class="jsoncontent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="callgetjson()">JSON</span>
+            <span class="small">&nbsp;&centerdot;&nbsp;</span>
+            <span ng-class="xmlcontent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="callgetxml()">XML</span>
+        </div>
+        <md-divider class="wz-margin-top-10"></md-divider>
+
+        <!-- The JSON viewer -->
+        <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
+            <pre><code wz-dynamic="jsoncontent"></code></pre>
+        </div>
+        <!-- End JSON viewer -->
+    </md-card-content>
+</md-card>
+<!-- End JSON card -->
+
+<!-- XML card -->
+<md-card flex="auto" class="wz-md-card" ng-if="xmlcontent">
+    <md-card-content flex layout="column">
+        <div layout="row" layout-align="start center">
+            <div>
+                <span class="font-size-16">XML viewer</span>
+                <div class="wz-margin-top-10">
+                    <span class="md-subheader small">View this configuration in raw XML format</span>
+                </div>
+            </div>
+            <span flex></span>
+            <span ng-class="jsoncontent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="callgetjson()">JSON</span>
+            <span class="small">&nbsp;&centerdot;&nbsp;</span>
+            <span ng-class="xmlcontent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="callgetxml()">XML</span>
+        </div>
+        <md-divider class="wz-margin-top-10"></md-divider>
+
+        <!-- The XML viewer -->
+        <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
+            <pre>{{ xmlcontent }}</pre>
+        </div>
+        <!-- End XML viewer -->
+    </md-card-content>
+</md-card>
+<!-- End XML card -->
+</div>
\ No newline at end of file
diff --git a/public/directives/wz-config-viewer/wz-config-viewer.js b/public/directives/wz-config-viewer/wz-config-viewer.js
new file mode 100644
index 0000000000..6dcd5d3ad0
--- /dev/null
+++ b/public/directives/wz-config-viewer/wz-config-viewer.js
@@ -0,0 +1,39 @@
+/*
+ * Wazuh app - Wazuh config viewer directive
+ * Copyright (C) 2018 Wazuh, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * Find more information about this on the LICENSE file.
+ */
+
+import template from './wz-config-viewer.html';
+import { uiModules } from 'ui/modules';
+
+const app = uiModules.get('app/wazuh', []);
+
+class WzConfigViewer {
+  constructor() {
+    this.restrict = 'E';
+    this.scope = {
+      getjson: '&',
+      getxml: '&',
+      jsoncontent: '=jsoncontent',
+      xmlcontent: '=xmlcontent'
+    };
+    this.replace = true;
+    this.template = template;
+  }
+
+  link(scope, elm, attrs) {
+    scope.callgetjson = () => {
+      scope.getjson();
+    };
+    scope.callgetxml = () => scope.getxml();
+  }
+}
+
+app.directive('wzConfigViewer', () => new WzConfigViewer());
diff --git a/public/templates/management/configuration/active-response/active-response.html b/public/templates/management/configuration/active-response/active-response.html
index 58851d31f9..f5aa0b9f00 100644
--- a/public/templates/management/configuration/active-response/active-response.html
+++ b/public/templates/management/configuration/active-response/active-response.html
@@ -92,57 +92,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/active-response/agents-active-response.html b/public/templates/management/configuration/active-response/agents-active-response.html
index 3ec5d523fc..f6a0c12d92 100644
--- a/public/templates/management/configuration/active-response/agents-active-response.html
+++ b/public/templates/management/configuration/active-response/agents-active-response.html
@@ -60,57 +60,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/active-response/commands.html b/public/templates/management/configuration/active-response/commands.html
index 0774e93fe1..c85b6c8056 100644
--- a/public/templates/management/configuration/active-response/commands.html
+++ b/public/templates/management/configuration/active-response/commands.html
@@ -79,57 +79,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/agentless/agentless.html b/public/templates/management/configuration/agentless/agentless.html
index c7653e7db8..44e61bb62f 100644
--- a/public/templates/management/configuration/agentless/agentless.html
+++ b/public/templates/management/configuration/agentless/agentless.html
@@ -92,57 +92,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/alerts/email-alerts.html b/public/templates/management/configuration/alerts/email-alerts.html
index 75b117edda..ade7a26183 100644
--- a/public/templates/management/configuration/alerts/email-alerts.html
+++ b/public/templates/management/configuration/alerts/email-alerts.html
@@ -90,57 +90,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/alerts/general-alerts.html b/public/templates/management/configuration/alerts/general-alerts.html
index 1af1d03f3a..5a45e95eeb 100644
--- a/public/templates/management/configuration/alerts/general-alerts.html
+++ b/public/templates/management/configuration/alerts/general-alerts.html
@@ -54,57 +54,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/alerts/labels.html b/public/templates/management/configuration/alerts/labels.html
index 7a46527363..3805f10211 100644
--- a/public/templates/management/configuration/alerts/labels.html
+++ b/public/templates/management/configuration/alerts/labels.html
@@ -51,57 +51,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/alerts/reports.html b/public/templates/management/configuration/alerts/reports.html
index 42e85b290f..dee1498a14 100644
--- a/public/templates/management/configuration/alerts/reports.html
+++ b/public/templates/management/configuration/alerts/reports.html
@@ -101,57 +101,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/alerts/syslog.html b/public/templates/management/configuration/alerts/syslog.html
index 4db4f91b4e..b535546e37 100644
--- a/public/templates/management/configuration/alerts/syslog.html
+++ b/public/templates/management/configuration/alerts/syslog.html
@@ -66,57 +66,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/amazon-s3/amazon-s3.foot b/public/templates/management/configuration/amazon-s3/amazon-s3.foot
index 1d9458f153..ee5366c4b7 100644
--- a/public/templates/management/configuration/amazon-s3/amazon-s3.foot
+++ b/public/templates/management/configuration/amazon-s3/amazon-s3.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/cis-cat/cis-cat.foot b/public/templates/management/configuration/cis-cat/cis-cat.foot
index 25061d70a9..f50cd93b27 100644
--- a/public/templates/management/configuration/cis-cat/cis-cat.foot
+++ b/public/templates/management/configuration/cis-cat/cis-cat.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/client-buffer/client-buffer.html b/public/templates/management/configuration/client-buffer/client-buffer.html
index dfc751ef26..9b2e5f74f0 100644
--- a/public/templates/management/configuration/client-buffer/client-buffer.html
+++ b/public/templates/management/configuration/client-buffer/client-buffer.html
@@ -72,57 +72,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/client/client.html b/public/templates/management/configuration/client/client.html
index 387c64e3d0..7f65206871 100644
--- a/public/templates/management/configuration/client/client.html
+++ b/public/templates/management/configuration/client/client.html
@@ -108,57 +108,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/cluster/cluster.html b/public/templates/management/configuration/cluster/cluster.html
index ade7f57f45..dad920333c 100644
--- a/public/templates/management/configuration/cluster/cluster.html
+++ b/public/templates/management/configuration/cluster/cluster.html
@@ -85,57 +85,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/database-output/database-output.html b/public/templates/management/configuration/database-output/database-output.html
index ab13827f86..6665306d09 100644
--- a/public/templates/management/configuration/database-output/database-output.html
+++ b/public/templates/management/configuration/database-output/database-output.html
@@ -67,57 +67,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/global-configuration/global.html b/public/templates/management/configuration/global-configuration/global.html
index 0cf4555ced..19b30a633c 100644
--- a/public/templates/management/configuration/global-configuration/global.html
+++ b/public/templates/management/configuration/global-configuration/global.html
@@ -189,57 +189,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/global-configuration/remote.html b/public/templates/management/configuration/global-configuration/remote.html
index 9f99e12c78..55a33ebcfa 100644
--- a/public/templates/management/configuration/global-configuration/remote.html
+++ b/public/templates/management/configuration/global-configuration/remote.html
@@ -76,57 +76,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/integrations/integrations.html b/public/templates/management/configuration/integrations/integrations.html
index 0bd638e052..ed2848372f 100644
--- a/public/templates/management/configuration/integrations/integrations.html
+++ b/public/templates/management/configuration/integrations/integrations.html
@@ -147,57 +147,7 @@
             </md-card>
             <!-- End VirusTotal integration card -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/integrity-monitoring/integrity-monitoring.foot b/public/templates/management/configuration/integrity-monitoring/integrity-monitoring.foot
index 94ce6e8754..786b0f5656 100644
--- a/public/templates/management/configuration/integrity-monitoring/integrity-monitoring.foot
+++ b/public/templates/management/configuration/integrity-monitoring/integrity-monitoring.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/inventory/inventory.html b/public/templates/management/configuration/inventory/inventory.html
index dff3c913fd..a153fab499 100644
--- a/public/templates/management/configuration/inventory/inventory.html
+++ b/public/templates/management/configuration/inventory/inventory.html
@@ -116,57 +116,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/log-collection/localfile.html b/public/templates/management/configuration/log-collection/localfile.html
index 2fe7ebc8a9..3db3c267f8 100644
--- a/public/templates/management/configuration/log-collection/localfile.html
+++ b/public/templates/management/configuration/log-collection/localfile.html
@@ -101,57 +101,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/log-collection/socket.html b/public/templates/management/configuration/log-collection/socket.html
index 3570552d4e..371460023a 100644
--- a/public/templates/management/configuration/log-collection/socket.html
+++ b/public/templates/management/configuration/log-collection/socket.html
@@ -75,57 +75,7 @@
         </md-card>
         <!-- End main card with all the settings -->
 
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/open-scap/open-scap.foot b/public/templates/management/configuration/open-scap/open-scap.foot
index 9f3a3dd8c0..f54ddb5681 100644
--- a/public/templates/management/configuration/open-scap/open-scap.foot
+++ b/public/templates/management/configuration/open-scap/open-scap.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/osquery/osquery.html b/public/templates/management/configuration/osquery/osquery.html
index c66ab8a9ea..1c37e1ac67 100644
--- a/public/templates/management/configuration/osquery/osquery.html
+++ b/public/templates/management/configuration/osquery/osquery.html
@@ -111,57 +111,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/policy-monitoring/policy-monitoring.foot b/public/templates/management/configuration/policy-monitoring/policy-monitoring.foot
index 1f9a91abdb..0ffc1abe76 100644
--- a/public/templates/management/configuration/policy-monitoring/policy-monitoring.foot
+++ b/public/templates/management/configuration/policy-monitoring/policy-monitoring.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/registration-service/registration-service.html b/public/templates/management/configuration/registration-service/registration-service.html
index a51d870b89..bb7d75bc9d 100644
--- a/public/templates/management/configuration/registration-service/registration-service.html
+++ b/public/templates/management/configuration/registration-service/registration-service.html
@@ -123,57 +123,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->
diff --git a/public/templates/management/configuration/ruleset/ruleset.foot b/public/templates/management/configuration/ruleset/ruleset.foot
index 41c7813571..ae459a0caf 100644
--- a/public/templates/management/configuration/ruleset/ruleset.foot
+++ b/public/templates/management/configuration/ruleset/ruleset.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/vulnerabilities/vulnerabilities.foot b/public/templates/management/configuration/vulnerabilities/vulnerabilities.foot
index 2f8fae3215..0926a1b7ce 100644
--- a/public/templates/management/configuration/vulnerabilities/vulnerabilities.foot
+++ b/public/templates/management/configuration/vulnerabilities/vulnerabilities.foot
@@ -1,54 +1,4 @@
-        <!-- JSON card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">JSON viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw JSON format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The JSON viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre><code wz-dynamic="JSONContent"></code></pre>
-                </div>
-                <!-- End JSON viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End JSON card -->
-
-        <!-- XML card -->
-        <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-            <md-card-content flex layout="column">
-                <div layout="row" layout-align="start center">
-                    <div>
-                        <span class="font-size-16">XML viewer</span>
-                        <div class="wz-margin-top-10">
-                            <span class="md-subheader small">View this configuration in raw XML format</span>
-                        </div>
-                    </div>
-                    <span flex></span>
-                    <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                    <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                    <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-
-                <!-- The XML viewer -->
-                <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                    <pre>{{ XMLContent }}</pre>
-                </div>
-                <!-- End XML viewer -->
-            </md-card-content>
-        </md-card>
-        <!-- End XML card -->
+        <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
     </div>
     <!-- End main content section -->
diff --git a/public/templates/management/configuration/wazuh-commands/wazuh-commands.html b/public/templates/management/configuration/wazuh-commands/wazuh-commands.html
index eb3aaf44ae..49414b0fef 100644
--- a/public/templates/management/configuration/wazuh-commands/wazuh-commands.html
+++ b/public/templates/management/configuration/wazuh-commands/wazuh-commands.html
@@ -119,57 +119,7 @@
             </md-card>
             <!-- End main card with all the settings -->
 
-            <!-- JSON card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">JSON viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw JSON format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The JSON viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre><code wz-dynamic="JSONContent"></code></pre>
-                    </div>
-                    <!-- End JSON viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End JSON card -->
-
-            <!-- XML card -->
-            <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
-                <md-card-content flex layout="column">
-                    <div layout="row" layout-align="start center">
-                        <div>
-                            <span class="font-size-16">XML viewer</span>
-                            <div class="wz-margin-top-10">
-                                <span class="md-subheader small">View this configuration in raw XML format</span>
-                            </div>
-                        </div>
-                        <span flex></span>
-                        <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
-                        <span class="small">&nbsp;&centerdot;&nbsp;</span>
-                        <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
-                    </div>
-                    <md-divider class="wz-margin-top-10"></md-divider>
-
-                    <!-- The XML viewer -->
-                    <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
-                        <pre>{{ XMLContent }}</pre>
-                    </div>
-                    <!-- End XML viewer -->
-                </md-card-content>
-            </md-card>
-            <!-- End XML card -->
+            <wz-config-viewer flex getjson="getJSON()" getxml="getXML()" jsoncontent="JSONContent" xmlcontent="XMLContent" />
 
         </div>
         <!-- End main content section -->