diff --git a/sass/components/_example.scss b/sass/components/_example.scss
index 199a2215f0..8b454406a3 100644
--- a/sass/components/_example.scss
+++ b/sass/components/_example.scss
@@ -47,6 +47,11 @@
     text-align: right;
   }
 
+  &__explanation {
+    padding-inline: 16px;
+    margin-block: 32px;
+  }
+
   &__code-tabs {
     margin-top: 16px;
   }
diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
index 2825057401..8f7d6e7165 100644
--- a/sass/components/_tabs.scss
+++ b/sass/components/_tabs.scss
@@ -17,6 +17,7 @@
     padding: 12px $h-padding;
     position: relative;
     border-radius: 8px;
+    user-select: none;
 
     &:hover {
       background-color: var(--tabs-bg-hover-color);
@@ -38,6 +39,10 @@
       right: $h-padding;
       transition: background-color $duration;
     }
+
+    code {
+      font-size: 0.9em;
+    }
   }
 
   &__panel {
diff --git a/templates/layouts/example.html b/templates/layouts/example.html
index 7105551770..7ad1fe50fa 100644
--- a/templates/layouts/example.html
+++ b/templates/layouts/example.html
@@ -24,11 +24,15 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
         {% block callout %}{% endblock callout %}
       </aside>
     </div>
-    
+    {% if page.content %}
+      <div class="example__explanation media-content">
+        {{ page.content | safe }}
+      </div>
+    {% endif %}
     <div class="example__code-tabs tabs">
       {% set filename = page.extra.code_path | split(pat="/") | last %}
       <input class="tabs__radio" name="tabs" tabindex="1" type="radio" id="tab0" checked="checked">
-      <label class="tabs__label" for="tab0">{{ filename }}</label>
+      <label class="tabs__label" for="tab0"><code>{{ filename }}</code></label>
       <div class="tabs__panel" tabindex="1">
         <div class="example__code media-content">
           {% set code = load_data(path=page.extra.code_path) %}
@@ -39,7 +43,7 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
       
       {% for shader in page.extra.shader_code_paths %}
         <input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
-        <label class="tabs__label" for="tab{{ loop.index }}">{{ shader }}</label>
+        <label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
         <div class="tabs__panel" tabindex="1">
           <div class="example__code media-content">
             {% set code = load_data(path="static/assets/examples/" ~ shader) %}