diff --git a/assets/docs/scss/custom/structure/_content.scss b/assets/docs/scss/custom/structure/_content.scss
index 6a5b0456..59c000e9 100644
--- a/assets/docs/scss/custom/structure/_content.scss
+++ b/assets/docs/scss/custom/structure/_content.scss
@@ -257,6 +257,33 @@ i {
     }
 }
 
+
+// goat diagrams
+figure.goat.svg-container {
+
+    padding: 0.1rem;
+    align-items: center;
+    width: 100%;
+    @include media-breakpoint-up(md) {
+        width: auto;
+        padding:.5rem;
+        padding-left: auto;
+        padding-right: auto;
+    }
+    @include media-breakpoint-up(lg) {
+        padding: 1rem;
+    }
+    svg {
+        width:100%;
+        @include media-breakpoint-up(lg) {
+            max-width: 60rem;
+        }
+        font-family: var(--bs-font-monospace);
+        font-size: 0.7rem;
+    }
+}
+
+
 // Chroma Highlighter CSS
 .docs-content .main-content td pre {
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index d14f0fda..396bb88f 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -27,25 +27,17 @@ $font-family-monospace:  {{ .Site.Params.mono_font | default "SFMono-Regular, Me
 // Structure
 @import "custom/structure/general";
 @import "custom/structure/topbar";
-// @import "custom/structure/content";
-// @import "custom/structure/sidebar-layouts";
-// @import "custom/structure/doc-nav";
-// @import "custom/structure/toc-layouts";
 @import "custom/structure/footer";
 
-// // Components
+// Components
 @import "custom/components/buttons";
 @import "custom/components/badge";
-@import "custom/components/backgrounds";
-// @import "custom/components/alerts";
-// @import "custom/components/card";
 
-// // Pages
+// Pages
 // @import "custom/pages/blog";
 
 @import "custom/pages/features";
 @import "custom/pages/helper";
 @import "custom/pages/hero";
-{{ if ($.Scratch.Get "image_compare_enabled") }}@import "custom/pages/image-compare-viewer";{{ end }}
+@import "custom/pages/image-compare-viewer";
 
-// @import "custom/pages/simplebar";
diff --git a/layouts/docs/_markup/render-codeblock-goat.html b/layouts/docs/_markup/render-codeblock-goat.html
new file mode 100644
index 00000000..b1107e24
--- /dev/null
+++ b/layouts/docs/_markup/render-codeblock-goat.html
@@ -0,0 +1,18 @@
+{{ $width := .Attributes.width }}
+{{ $height := .Attributes.height }}
+{{ $class := .Attributes.class | default "" }}
+<figure class="goat svg-container {{ $class }}">
+  {{ with diagrams.Goat .Inner }}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMinYMin"
+      {{ if or $width $height }}
+        {{ with $width }}width="{{ . }}"{{ end }}
+        {{ with $height }}height="{{ . }}"{{ end }}
+      {{ else }}
+        viewBox="0 0 {{ .Width }} {{ .Height }}"
+      {{ end }}>
+          {{ .Inner }}
+    </svg>
+  {{ end }}
+</figure>
\ No newline at end of file