diff --git a/content/experiment-control/artiq.md b/content/experiment-control/artiq.md
index 26e0dc0..6c6b0b6 100644
--- a/content/experiment-control/artiq.md
+++ b/content/experiment-control/artiq.md
@@ -52,6 +52,10 @@ Technologies employed include <a href="http://python.org/" target="_blank" rel="
 
 
 
+{{ layout_centered_img(title="Grafana linked to ARTIQ, monitoring an Opticlock ion trap", src='images/grafana@2x.png', popup='images/origin/grafana.png', alt='grafana', shadow=true) }}
+
+
+
 {{ layout_centered_img(src='images/comp@2x.png', alt='comp') }}
 
 
diff --git a/static/images/grafana@2x.png b/static/images/grafana@2x.png
new file mode 100644
index 0000000..2c96f11
Binary files /dev/null and b/static/images/grafana@2x.png differ
diff --git a/static/images/origin/grafana.png b/static/images/origin/grafana.png
new file mode 100644
index 0000000..4c2ba93
Binary files /dev/null and b/static/images/origin/grafana.png differ
diff --git a/templates/shortcodes/layout_centered_img.html b/templates/shortcodes/layout_centered_img.html
index 0307e63..2d9cef4 100644
--- a/templates/shortcodes/layout_centered_img.html
+++ b/templates/shortcodes/layout_centered_img.html
@@ -1,8 +1,14 @@
 <div class="{% if css %}{{ css }}{% else %}row d-flex align-items-center mt-5 mb-5{% endif %}">
 
-  <div class="col-12 text-center">
+  <div class="col-12 col-md-8 mx-auto text-center">
 
-    <img class="img-fluid" {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=popup, cachebust=true) }}"{% endif %} src="{{ get_url(path=src) }}" alt="{{ alt }}">
+    {% if title %}<h5>{{ title }}</h5>{% endif %}
+
+    <div class="card {% if shadow %}shadow{% endif %}">
+
+      <img class="card-img-top img-fluid" {% if popup %}data-popup="true" data-nsrc="{{ get_url(path=popup, cachebust=true) }}"{% endif %} src="{{ get_url(path=src) }}" alt="{{ alt }}">
+
+    </div>
 
   </div>