diff --git a/babybuddy/static_src/scss/forms.scss b/babybuddy/static_src/scss/forms.scss
index 3a0d8705..0af94158 100644
--- a/babybuddy/static_src/scss/forms.scss
+++ b/babybuddy/static_src/scss/forms.scss
@@ -53,8 +53,18 @@
     }
 }
 
-form .row details {
+@include media-breakpoint-down(md) {
+    .advanced-fields__summary {
+        text-align: center;
+    }
+}
+
+.advanced-fields__summary > * {
+    display: inline
+}
+
+.advanced-fields {
     // removing this causes slight mis-alignment between fields in the details and the rest of the fields 
     //on the form at the left hand side of the box
     padding-right: 0;
-}
\ No newline at end of file
+}
diff --git a/core/templates/forms/layouts/advanced.html b/core/templates/forms/layouts/advanced.html
index 2513befa..51219e0f 100644
--- a/core/templates/forms/layouts/advanced.html
+++ b/core/templates/forms/layouts/advanced.html
@@ -1,7 +1,10 @@
+{% load i18n %}
 <div class="row">
     <div class="row mb-3">
-        <details ontoggle="rememberAdvancedToggle(event)">
-            <summary>Advanced</summary>
+        <details ontoggle="rememberAdvancedToggle(event)" class="advanced-fields">
+            <summary class="advanced-fields__summary">
+                <h4>{% trans "Advanced Fields" %}</h4>
+            </summary>
             {% for field in fieldset.fields %}
                 <div class="row">{% include "babybuddy/form_field.html" %}</div>
             {% endfor %}