diff --git a/Resources/views/widget/heatmap.html.twig b/Resources/views/widget/heatmap.html.twig
index af546a5..65c11a9 100644
--- a/Resources/views/widget/heatmap.html.twig
+++ b/Resources/views/widget/heatmap.html.twig
@@ -3,8 +3,21 @@
         {{ title }}
     {% endblock %}
     {% block box_body %}
-        <div id="heatmap-container" data-url="{{ path('heatmap_data') }}" style="min-height: 150px; padding: 1rem;">
-            <p style="color: var(--bs-secondary);">Heatmap visualization coming in Phase 3</p>
+        <link rel="stylesheet" href="{{ asset('bundles/kimaiheatmap/heatmap.css') }}">
+        <div id="heatmap-container"
+             data-url="{{ path('heatmap_data') }}"
+             style="min-height: 150px; overflow-x: auto;">
         </div>
+        <script src="{{ asset('bundles/kimaiheatmap/heatmap.js') }}"></script>
+        <script type="text/javascript">
+            var initHeatmap = function() {
+                KimaiHeatmap.init(document.getElementById('heatmap-container'));
+            };
+            {% if kimai_context is defined and kimai_context.javascriptRequest %}
+                initHeatmap();
+            {% else %}
+                document.addEventListener('kimai.initialized', initHeatmap);
+            {% endif %}
+        </script>
     {% endblock %}
 {% endembed %}