diff --git a/templates/pkg_versions_tmpl.j2 b/templates/pkg_versions_tmpl.j2
new file mode 100644
index 0000000..3c61745
--- /dev/null
+++ b/templates/pkg_versions_tmpl.j2
@@ -0,0 +1,269 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cloud Package versions check</title>
+    <style>
+        body {
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            font-size: 90% !important;
+        }
+        .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 {
+            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;
+        }
+        .pkgName {
+            font-size: 1em;
+            padding-left: 10px;
+        }
+
+        .version {
+            font-size: 1.1em;
+            text-align: 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="tab">
+{% for node_name in nodes.keys() | sort %}
+    {% if nodes[node_name] | is_active %}
+  <button class="tablinks" onclick="openTab(event, '{{ node_name | shortname }}')">
+    <div class="dot_green">&#9679;</div>
+    <div class="node_name">{{ node_name | shortname }}</div>
+    <div class="smallgreytext">({{ counters[node_name]['package_diff'] }} / {{ counters[node_name]['packages'] }})</div>
+  </button>
+    {% endif %}    
+{% endfor %}
+{% for node_name in nodes.keys() | sort %}
+    {% if not nodes[node_name] | is_active %}
+  <button class="tablinks" onclick="openTab(event, '{{ node_name | shortname }}')">
+    <div class="dot_empty">&#9675;</div>
+    <div class="node_name">{{ node_name | shortname }}</div>
+    <div class="smallgreytext">({{ counters[node_name]['package_diff'] }} / {{ counters[node_name]['packages'] }})</div>
+  </button>
+    {% endif %}    
+{% endfor %}
+</div>
+{% for node_name in nodes.keys() | sort %}
+<div id="{{ node_name | shortname }}" class="tabcontent">
+    <table class="pkgversions">
+        <tbody>
+        <tr>
+            <td class="Header">Package name</td>
+            <td class="Header">Installed</td>
+            <td class="Header">Candidate</td>
+        </tr>
+        <tr><td colspan=3>Package with different versions uniq for this node</td></tr>
+        {% for package_name in nodes[node_name]['packages'] | sort %}
+            {% if not nodes[node_name]['packages'][package_name]['is_equal'] %}
+            {% if nodes[node_name]['packages'][package_name]['fail_uniq'] %}
+        <tr>
+            <td class="pkgName">{{ package_name }}</td>
+            <td class="version differ">
+                <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }}
+                    <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre>
+                </div>
+            </td>
+            <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td>
+        </tr>
+            {% endif %}
+            {% endif %}
+        {% endfor %}
+        <tr><td colspan=3>Packages with different versions on nodes with similar role</td></tr>
+        {% for package_name in nodes[node_name]['packages'] | sort %}
+            {% if not nodes[node_name]['packages'][package_name]['is_equal'] %}
+            {% if not nodes[node_name]['packages'][package_name]['fail_uniq'] %}
+        <tr>
+            <td class="pkgName">{{ package_name }}</td>
+            <td class="version differ">
+                <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }}
+                    <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre>
+                </div>
+            </td>
+            <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td>
+        </tr>
+            {% endif %}
+            {% endif %}
+        {% endfor %}
+        <tr><td colspan=3>Packages with same versions: installed vs candidate</td></tr>
+        {% for package_name in nodes[node_name]['packages'] | sort %}
+            {% if nodes[node_name]['packages'][package_name] | is_equal %}
+        <tr>
+            <td class="pkgName">{{ package_name }}</td>
+            <td class="version">
+                <div class="tooltip">{{ nodes[node_name]['packages'][package_name]['installed'] }}
+                    <pre class="tooltiptext">{{ nodes[node_name]['packages'][package_name]['raw'] | linebreaks }}</pre>
+                </div>
+            </td>
+            <td class="version">{{ nodes[node_name]['packages'][package_name]['candidate'] }}</td>
+        </tr>
+            {% endif %}
+        {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endfor %}
+</body>
+</html>
\ No newline at end of file