diff --git a/assets/scss/bergamot.scss b/assets/scss/bergamot.scss
index 13d54bf..826b1f0 100644
--- a/assets/scss/bergamot.scss
+++ b/assets/scss/bergamot.scss
@@ -1,6 +1,78 @@
 @import "variables.scss";
 @import "mixins.scss";
 
+.bergamot-exercise {
+    @include bordered-block;
+    padding: 1em;
+    counter-increment: bergamot-exercise;
+
+    .bergamot-root {
+        border: none;
+        padding: 0;
+        margin-top: 1em;
+    }
+
+
+    .bergamot-exercise-label {
+        .bergamot-exercise-number::after {
+            content: "Exercise " counter(bergamot-exercise);
+            font-weight: bold;
+            text-decoration: underline;
+        }
+    }
+
+    .bergamot-button {
+        @include bordered-block;
+        padding: 0.25em;
+        padding-left: 1em;
+        padding-right: 1em;
+        background-color: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition: 0.25s;
+        font-family: $font-body;
+        @include var(color, text-color);
+
+        &.bergamot-hidden {
+            display: none;
+        }
+
+        .feather {
+            margin-right: 0.5em;
+        }
+    }
+
+    .bergamot-play {
+        .feather { color: $primary-color; }
+        &:hover, &:focus {
+            .feather { color: lighten($primary-color, 20%); }
+        }
+    }
+
+    .bergamot-reset {
+        .feather { color: #0099CC; }
+        &:hover, &:focus {
+            .feather { color: lighten(#0099CC, 20%); }
+        }
+
+        svg {
+            fill: none;
+        }
+    }
+
+    .bergamot-close {
+        .feather { color: tomato; }
+        &:hover, &:focus {
+            .feather { color: lighten(tomato, 20%); }
+        }
+    }
+
+    .bergamot-button-group {
+        margin-top: 0.5em;
+    }
+}
+
 .bergamot-root {
     @include bordered-block;
     padding: 1em;
diff --git a/layouts/shortcodes/bergamot_exercise.html b/layouts/shortcodes/bergamot_exercise.html
new file mode 100644
index 0000000..67244d2
--- /dev/null
+++ b/layouts/shortcodes/bergamot_exercise.html
@@ -0,0 +1,18 @@
+<div class="bergamot-exercise">
+    <span class="bergamot-exercise-label">
+        {{ partial "icon.html" "edit-2" }}
+        <span class="bergamot-exercise-number"></span>
+        {{ if or (eq (.Get "label") "") (eq (.Get "label") nil) }}{{ else }}({{ .Get "label" }}){{ end }}:
+    </span>
+    {{ .Inner }}
+
+    <div class="bergamot-button-group">
+        {{ if or (eq (.Get "preset") "") (eq (.Get "preset") nil) }}
+        {{ else }}
+        <button class="bergamot-button bergamot-play" onclick='window.Bergamot.runPreset(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}", "{{ .Get "preset" }}")'>{{ partial "icon.html" "play" }}Start Bergamot</button>
+        <button class="bergamot-button bergamot-close bergamot-hidden" onclick='window.Bergamot.close(this.parentElement, "bergamot-widget-container-{{ .Get "id" }}")'>{{ partial "icon.html" "x" }}Close Bergamot</button>
+        {{ end }}
+    </div>
+
+    <div id="bergamot-widget-container-{{ .Get "id" }}"></div>
+</div>
diff --git a/layouts/shortcodes/bergamot_preset.html b/layouts/shortcodes/bergamot_preset.html
new file mode 100644
index 0000000..8da76ee
--- /dev/null
+++ b/layouts/shortcodes/bergamot_preset.html
@@ -0,0 +1,6 @@
+<script>
+    window.Bergamot.presets['{{ .Get "name" }}'] = {
+        rules: '{{ .Inner }}',
+        inputPrompt: '{{ .Get "prompt" }}',
+    };
+</script>