diff --git a/openxr_inventory/templates/base.jinja2.html b/openxr_inventory/templates/base.jinja2.html
index edfe9d4..d3c33ca 100644
--- a/openxr_inventory/templates/base.jinja2.html
+++ b/openxr_inventory/templates/base.jinja2.html
@@ -53,6 +53,11 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"
         integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
         crossorigin="anonymous"></script>
+    <script>
+        $(document).ready(function(){
+            $('[data-toggle="tooltip"]').tooltip();
+        });
+    </script>
 </body>
 
 </html>
diff --git a/openxr_inventory/templates/extension_support.jinja2.html b/openxr_inventory/templates/extension_support.jinja2.html
index 801fbbf..9ad1b10 100644
--- a/openxr_inventory/templates/extension_support.jinja2.html
+++ b/openxr_inventory/templates/extension_support.jinja2.html
@@ -41,79 +41,54 @@
   padding: 5px;
 }
 
+th.extname {
+  white-space: nowrap
+}
+
 {% endblock style %}
 
 {% block container_contents %}
-    <section id="extensions">
-
-        <!-- extension toc -->
-        <div class="jumbotron row">
-            <h2 id="extensions">Extensions</h2>
-            {% for col in extensions | slice(3) %}
-            <div class="col-md-4">
-                <ul class="list-unstyled">
-                    {% for extension_name in col %}
-                    <li><a href="#{{ extension_name }}">{{ extension_name }}</a></li>
-                    {% endfor %}
-                </ul>
-            </div>
-            {% endfor %}
-        </div>
 
-        {% for extension_name in extensions %}
-        {% set support = extension_support[extension_name] %}
-
-        <div class="row" id="{{ extension_name }}">
-            <h3>{{ extension_name }} ({{ support | length }} runtime{{ "s" if support | length != 1 }})</h3>
-            <p>
-                <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#{{extension_name}}">Specification
-                    for {{ extension_name }}</a>
-            </p>
-            <ul>
-                {% for runtime, entry in support | sort %}
-                <li><a href="#{{ runtime.stub }}">{{ runtime.vendor }} - {{ runtime.name }}</a></li>
-                {% endfor %}
-            </ul>
-        </div>
-        {% endfor %}
-    </section>
 
     <section>
-        <!-- runtime toc -->
-        <div id="runtimes" class="jumbotron row">
-            <h2>Runtimes</h2>
-
-            <ul class="list-unstyled">
-                {% for runtime in runtimes | sort %}
-                <li><a href="#{{ runtime.stub }}">{{ runtime.vendor }} - {{ runtime.name }}</a></li>
-                {% endfor %}
-            </ul>
-        </div>
 
         {% for runtime in runtimes %}
-        <div class="row" id="{{ runtime.stub }}">
-            <h3>{{ runtime.name }}</h3>
-            <ul>
-                <li>Vendor: {{ runtime.vendor }}</li>
-                {% if runtime.conformance_submission %}
-                <li>Most recent conformance submission: <a href="{{runtime.conformance_submission_url}}">#{{runtime.conformance_submission}}</a></li>
-                {% endif %}
-                {% if not runtime.conformance_submission %}
-                <li><strong>Not a conformant runtime</strong></li>
-                {% endif %}
-                {% if runtime.conformance_notes %}
-                <li>Conformance notes: {{ runtime.conformance_notes }}</li>
-                {% endif %}
-                <li>Supported extensions:
-                    <ul>
-                        {% for extension in runtime.extensions %}
-                        <li><a href="#{{extension.name}}">{{extension.name}}</a> {% if extension.notes %} - {{ extension.notes }} {% endif %} </li>
-                        {% endfor %}
-                    </ul>
-            </ul>
+        <div class="modal fade" id="runtime_{{runtime.stub}}_modal" tabindex="-1" role="dialog" aria-labelledby="runtime_{{runtime.stub}}_modal">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h3 class="modal-title">{{ runtime.name }}</h3>
+                    </div>
+                    <div class="modal-body">
+                        <ul>
+                            <li>Vendor: {{ runtime.vendor }}</li>
+                            {% if runtime.conformance_submission %}
+                            <li>Most recent conformance submission: <a href="{{runtime.conformance_submission_url}}">#{{runtime.conformance_submission}}</a></li>
+                            {% endif %}
+                            {% if not runtime.conformance_submission %}
+                            <li><strong>Not a conformant runtime</strong></li>
+                            {% endif %}
+                            {% if runtime.conformance_notes %}
+                            <li>Conformance notes: {{ runtime.conformance_notes }}</li>
+                            {% endif %}
+                            <li>
+                                Supported extensions:
+                                <ul>
+                                    {% for extension in runtime.extensions %}
+                                    <li><a href="#{{extension.name}}">{{extension.name}}</a> {% if extension.notes %} - {{ extension.notes }} {% endif %} </li>
+                                    {% endfor %}
+                                </ul>
+                        </ul>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
         </div>
         {% endfor %}
-    </section>
+</section>
 
     <section>
         <div id="matrix" class="jumbotron row">
@@ -125,20 +100,20 @@ <h2>Runtime support matrix</h2>
                     <th></th>
                     {% for runtime in runtimes | sort %}
                         {# pragmatic check if the runtime name fits in the layout or if it needs to be truncated and put the full name in tooltip #}
-                        {% if runtime.name|length < 34 %}
-                        <th class="rotate" style="border:none"><div><span>{{ runtime.name }}</span></div></th>
+                        {% if runtime.name|length <= 34 %}
+                        <th class="rotate" style="border:none"><div><span>{{ runtime.name }}</span><a role="button" data-toggle="modal" data-target="#runtime_{{runtime.stub}}_modal"> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a></div></th>
                         {% else %}
-                        <th class="rotate" style="border:none"><div><span><abbr title="{{runtime.name}}">{{ runtime.name|truncate(34, True) }}</abbr></span></div></th>
+                        <th class="rotate" style="border:none"><div><span><abbr title="{{runtime.name}}">{{ runtime.name|truncate(34, True) }}</abbr></span><a role="button" data-toggle="modal" data-target="#runtime_{{runtime.stub}}_modal"> <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a></div></th>
                         {% endif %}
                     {% endfor %}
                 </tr>
             </thead>
             <tbody>
-
                 {% macro extension_matrix_row(extension_name) %}
-                <tr>
+                {% set support = extension_support[extension_name] %}
+                <tr id="{{ extension_name }}">
                     <th class="extname">
-                        {{ extension_name }}
+                        <span data-toggle="tooltip" title="{{ support | length }} runtimes supports this extensions">{{ extension_name }}</span>
                         <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#{{extension_name}}" alt="speficication text">
                             <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
                         </a>
@@ -183,30 +158,32 @@ <h2>Runtime support matrix</h2>
                         </th>
 
                         {% for runtime in runtimes | sort %}
-                            <td class="text-center"></span></td>
+                            <td class="text-center"></td>
                         {% endfor %}
                     </tr>
 
                     {% for vc, environment_blend_modes in view_configurations.items() %}
                     <tr>
                         <th class="extname">
-                            &rarr; {{ vc }}
-                            <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#XrViewConfigurationType" alt="speficication text">
-                                <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
-                            </a>
+                                &rarr; {{ vc }}
+                                <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#XrViewConfigurationType" alt="speficication text">
+                                    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+                                </a>
                         </th>
 
                         {% for runtime in runtimes | sort %}
-                            <td class="text-center"></span></td>
+                            <td class="text-center"></td>
                         {% endfor %}
 
                         {% for ebm in environment_blend_modes %}
                         <tr>
                             <th class="extname">
-                                &rarr; &rarr; {{ ebm }}
-                                <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#XrEnvironmentBlendMode" alt="speficication text">
-                                    <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
-                                </a>
+                                <span>
+                                    &rarr; &rarr; {{ ebm }}
+                                    <a href="https://www.khronos.org/registry/OpenXR/specs/1.0/html/xrspec.html#XrEnvironmentBlendMode" alt="speficication text">
+                                        <span class="glyphicon glyphicon-link" aria-hidden="true"></span>
+                                    </a>
+                                </span>
                             </th>
                             {% for runtime in runtimes | sort %}
                                 {% if ff in form_factor_support[runtime.name] and vc in form_factor_support[runtime.name][ff] and ebm in form_factor_support[runtime.name][ff][vc] %}