diff --git a/layouts/partials/extend_head.html b/layouts/partials/extend_head.html
index 029ae66..92e6b72 100644
--- a/layouts/partials/extend_head.html
+++ b/layouts/partials/extend_head.html
@@ -12,4 +12,15 @@
         g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s);
     })();
 </script>
+{{ if .Params.load_vega }}
+<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+{{ end }}
+<style>
+    .vega-embed {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.19);
+        margin: 10px;
+    }
+</style>
 <!-- End Matomo Code -->
\ No newline at end of file
diff --git a/layouts/shortcodes/vega-lite.html b/layouts/shortcodes/vega-lite.html
new file mode 100644
index 0000000..4633fb4
--- /dev/null
+++ b/layouts/shortcodes/vega-lite.html
@@ -0,0 +1,9 @@
+<!-- Create a unique ID for the div where the Vega-Lite visualization will be rendered -->
+<div class="vegaVis" id="{{ .Get "id" | default "vega-lite-vis" }}"></div>
+<script>
+  const spec = {{ .Inner | safeJS }};
+  spec['width'] =  {{ .Get "width" | default 700}};
+  spec['height'] = {{ .Get "height" | default 300}};
+  vegaEmbed('#{{ .Get "id" | default "vega-lite-vis" }}', spec, {"actions": false}).catch(console.error);
+
+</script>