diff --git a/templates/network_check_tmpl.j2 b/templates/network_check_tmpl.j2
index 553b554..9f0f556 100644
--- a/templates/network_check_tmpl.j2
+++ b/templates/network_check_tmpl.j2
@@ -2,207 +2,120 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Model Tree Changes</title>
+    <title>Nodes and Networks report</title>
+    {% include 'common_styles.j2' %}
+    {% include 'common_scripts.j2' %}
     <style>
-        body {
-            font-family: Verdana, Geneva, Tahoma, sans-serif;
-            font-size: 90% !important;
+        table.cluster_nodes {
+            width: 90%;
+            margin-left: 5%;
+            margin-right: 5%;
         }
-        .dot_green {
-            float: left;
-            color: green;
-            margin-right: 0.5em;
-            margin-top: 0.2em;
-        }
-        .dot_red {
-            float: left;
-            color: red;
-            margin-right: 0.5em;
-            margin-top: 0.2em;
-        }
-        .dot_empty {
-            float: left;
-            color: darkgray;
-            margin-right: 0.5em;
-            margin-top: 0.2em;
-        }
-        /* Style the tab */
-        .tab {
-            float: left;
-            width: 130px;
-            border: 1px solid #fff;
-            background-color: #efe;
-        }
-
-        /* Style the buttons that are used to open the tab content */
-        .tab button {
+    
+        /* Node rows*/
+		.node {
+			display: inline-block;
+			background-color: white;
+		}
+		
+        tr.node > td {
             display: block;
-            background-color: inherit;
-            color: Black;
-            border: none;
-            outline: none;
-            font-family: "Lucida Console", Monaco, monospace;
-            text-align: left;
-            cursor: pointer;
-            transition: 0.3s;
-            font-size: 1.3em;
-            width: 100%;
-            padding: 1px;
-            margin: 1px;
-        }
-
-        button > div.node_name {
             float: left;
-            font-size: 1.3em;
-        }
-
-        .smallgreytext {
-            float: right;
-            font-size: 0.7em;
-            color: gray;
-        }
-
-        /* Change background color of buttons on hover */
-        .tab button:hover {
-            background-color: #7b7;
-        }
-
-        /* Create an active/current "tab button" class */
-        .tab button.active {
-            background-color: #8c8;
-            color: white;
-        }
-
-        /* Style the tab content */
-        .tabcontent {
-            display: none;
-            position: absolute;
-            font-size: 1em;
-            padding: 0.5em;
-            right: -10%;
-            top: 0%;
-            transform: translateX(-12%);
-            width: calc(100% - 170px);
-            overflow-x: scroll;
-            overflow-wrap: break-word;
-        }
-
-        table {
-            border: 0 hidden;
-            width: 100%;
-        }
-        tr:nth-child(even) {
-            background-color: #fff;
-        }
-        tr:nth-child(odd) {
-            background-color: #ddd;
-        }
-        .Header {
-            background-color: #bbb;
-            color: Black;
-            width: 30%;
-            text-align: center;
-        }
-        .param {
-            font-size: 0.8em;
-            color: #555;
-            padding-left: 50px;
-            padding-right: 10px;
-        }
-        .class_file {
-            font-size: 0.8em;
-            font-weight: bold;
-            min-width: 300px;
-            text-align: left;
+            padding: 1px;
+            padding-left: 5px;
+            padding-right: 5px;
             color: black;
+            background-color: #A1BbA1;
+            text-align: center;
+            margin: 2px;
         }
-
-        .pkgName {
-            font-size: 1em;
-            padding-left: 10px;
-            max-width: 800px;
+        
+        .meters {
+			display: inline-block;        
         }
-
-        .version {
-            font-size: 1em;
-            text-align: left;
-            max-width: 400px;
-            overflow-wrap: break-word;
+        
+        td.meters > .meter {
+            display: block;
+            float: left;
         }
-
-        .differ {
-            background-color: #eaa;
-        }
-        /* Tooltip container */
-        .tooltip {
-            position: relative;
-            display: inline-block;
-            border-bottom: 1px dotted black;
-        }
-
-        .tooltip .tooltiptext {
-            visibility: hidden;
-            background-color: black;
-            font-family: "Lucida Console", Monaco, monospace;
-            font-size: 0.5em;
-            width: auto;
-            color: #fff;
-            border-radius: 6px;
-            padding: 5px 5px;
-
-            /* Position the tooltip */
-            position: absolute;
-            z-index: 1;
-        }
-
-        .tooltip:hover .tooltiptext {
-            visibility: visible;
-        }
-
     </style>
-    <script language="JavaScript">
-        function init() {
-            // Declare all variables
-            var i, tabcontent, tablinks;
-
-            // Get all elements with class="tabcontent" and hide them
-            tabcontent = document.getElementsByClassName("tabcontent");
-            for (i = 1; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-            tabcontent[0].style.display = "block";
-
-            // Get all elements with class="tablinks" and remove the class "active"
-            tablinks = document.getElementsByClassName("tablinks");
-            for (i = 1; i < tablinks.length; i++) {
-                tablinks[i].className = tablinks[i].className.replace(" active", "");
-            }
-            tablinks[0].className += " active";
-
-        }
-        function openTab(evt, tabName) {
-            // Declare all variables
-            var i, tabcontent, tablinks;
-
-            // Get all elements with class="tabcontent" and hide them
-            tabcontent = document.getElementsByClassName("tabcontent");
-            for (i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-
-            // Get all elements with class="tablinks" and remove the class "active"
-            tablinks = document.getElementsByClassName("tablinks");
-            for (i = 0; i < tablinks.length; i++) {
-                tablinks[i].className = tablinks[i].className.replace(" active", "");
-            }
-
-            // Show the current tab, and add an "active" class to the link that opened the tab
-            document.getElementById(tabName).style.display = "block";
-            evt.currentTarget.className += " active";
-        }
-    </script>
 </head>
 <body onload="init()">
 
+<div class="header">
+    <div class="label">OpenStack release:</div>
+    <div class="text">{{ openstack_release }}</div>
+    <div class="label">MCP Version:</div>
+    <div class="text">{{ mcp_release }}</div>
+    <div class="label date">generated on: {{ gen_date }}</div>
+</div>
+
+<div class="bar">
+    <button class="bar-item" onclick="openBar(event, 'nodes')">Nodes</button>
+    <button class="bar-item" onclick="openBar(event, 'networks')">Networks</button>
+    <button class="bar-item" onclick="openBar(event, 'services')">Other</button>
+</div>
+
+{% macro nodes_page(nodes, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+    <h5>{{ caller() }}</h5>
+    <hr>
+    <table class="cluster_nodes">
+    {% for node in nodes.keys() | sort %}
+        {% set _ndat = nodes[node] %}
+        <tr class="node virt">
+            <td class="status">{{ _ndat['status'] }}</td>
+            <td class="name">{{ node }}</td>
+            <td class="role">{{ _ndat['role'] }}</td>
+            <td class="vendor">QEMU</td>
+            <td class="meter cpu">vCPU: 12</td>
+            <td class="meter ram">RAM: 500GB</td>
+            <td class="meter disk">VDA: 150/140/135</td>
+        </tr>
+    {% endfor %}
+    </table>
+    <hr>
+</div>
+{% endmacro %}
+
+{% macro networks_page(networks, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+    <h5>{{ caller() }}</h5>
+    <hr>
+    <table class="networks">
+        <tr class="subnet">192.168.10.0/24</tr>
+        <tr class="net collapsable">
+            <td class="status">UP</td>
+            <td class="name">cfg01.internal.net</td>
+            <td class="ip">192.168.10.11</td>
+            <td class="param">1500</td>
+        </tr>
+    </table>
+    <hr>
+</div>
+{% endmacro %}
+
+{% macro services_page(services, id_label) %}
+<div id="{{ id_label }}" class="barcontent">
+    <h5>{{ caller() }}</h5>
+    <hr>
+</div>
+{% endmacro %}
+
+<!-- Cluster nodes page -->
+{% call nodes_page(nodes, "nodes") %}
+    Cluster nodes status and simple meterings
+{% endcall %}
+
+<!-- Cluster nodes page -->
+{% call networks_page(networks, "networks") %}
+    Networks in the cluster
+{% endcall %}
+
+<!-- Cluster nodes page -->
+{% call services_page(services, "services") %}
+    Services status in the cluster
+{% endcall %}
+
 </body>
 </html>
\ No newline at end of file