diff --git a/app/templates/components/components/inset-text/template.njk b/app/templates/components/components/inset-text/template.njk
index ade008fed..9e0e6fcdf 100644
--- a/app/templates/components/components/inset-text/template.njk
+++ b/app/templates/components/components/inset-text/template.njk
@@ -1,4 +1,4 @@
-<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-inset-text {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div {%- if params.id %} id="{{ params.id }}"{% endif %} class="bg-base-lightest padding-y-1 padding-x-2 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {{ params.html | safe if params.html else params.text }}
 </div>
diff --git a/app/templates/partials/templates/guidance-character-count.html b/app/templates/partials/templates/guidance-character-count.html
index d99cc087a..4cf377621 100644
--- a/app/templates/partials/templates/guidance-character-count.html
+++ b/app/templates/partials/templates/guidance-character-count.html
@@ -1,8 +1,14 @@
-<h2 class="font-body-lg">Message length</h2>
-<p class="usa-body">
-  If your message is long then it will
-  cost more.
-</p>
-<p class="usa-body">
-  See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
-</p>
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="message-length">
+    Message length
+  </button>
+</h3>
+<div id="message-length" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    If your message is long then it will
+    cost more.
+  </p>
+  <p class="usa-body">
+    See <a class="usa-link" href="{{ url_for('.pricing') }}">pricing</a> for details.
+  </p>
+</div>
diff --git a/app/templates/partials/templates/guidance-links.html b/app/templates/partials/templates/guidance-links.html
index 6ed7a2d68..231902d22 100644
--- a/app/templates/partials/templates/guidance-links.html
+++ b/app/templates/partials/templates/guidance-links.html
@@ -1,9 +1,15 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">Links and URLs</h2>
-<p class="bottom-gutter-1-3">
-  Always use full URLs, starting with https://. For example:
-{{ usaInsetText({
-  "text": "Apply now at https://www.usa.gov/example",
-  "classes": "usa-body"})
-}}
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="links-and-urls">
+    Links and URLs
+  </button>
+</h3>
+<div id="links-and-urls" class="usa-accordion__content usa-prose">
+  <p>
+    Always use full URLs, starting with https://. For example:
+    {{ usaInsetText({
+    "text": "Apply now at https://www.usa.gov/example",
+    "classes": "usa-body"})
+    }}
+</div>
\ No newline at end of file
diff --git a/app/templates/partials/templates/guidance-optional-content.html b/app/templates/partials/templates/guidance-optional-content.html
index 8c97be5b3..d3bc0dba5 100644
--- a/app/templates/partials/templates/guidance-optional-content.html
+++ b/app/templates/partials/templates/guidance-optional-content.html
@@ -1,21 +1,25 @@
 {% from "components/components/inset-text/macro.njk" import usaInsetText %}
 
-<h2 class="font-body-lg">
-  Optional content
-</h2>
-<p class="usa-body">
-  Use double brackets and ‘??’ to define optional content.
-</p>
-<p class="bottom-gutter-1-3">
-  For example if you only want to show something to people who are under
-  18:
-</p>
-{{ usaInsetText({
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="m-a2">
+    Optional content
+  </button>
+</h3>
+<div id="m-a2" class="usa-accordion__content usa-prose">
+  <p class="usa-body">
+    Use double brackets and ‘??’ to define optional content.
+  </p>
+  <p class="bottom-gutter-1-3">
+    For example if you only want to show something to people who are under
+    18:
+  </p>
+  {{ usaInsetText({
   "text": "((under18??Please get your application signed by a parent or
   guardian.))",
   "classes": "usa-body"})
-}}
-<p class="usa-body">
-  For each person you send this message to, specify ‘yes’ or ‘no’ to
-  show or hide this content.
-</p>
+  }}
+  <p class="usa-body">
+    For each person you send this message to, specify ‘yes’ or ‘no’ to
+    show or hide this content.
+  </p>
+</div>
diff --git a/app/templates/partials/templates/guidance-personalisation.html b/app/templates/partials/templates/guidance-personalisation.html
deleted file mode 100644
index c995e5e5e..000000000
--- a/app/templates/partials/templates/guidance-personalisation.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% from "components/components/inset-text/macro.njk" import usaInsetText %}
-
-<h2 class="font-body-lg">
-  Personalization
-</h2>
-<p class="bottom-gutter-1-3">
-  Use double brackets to personalize your message:
-</p>
-{{ usaInsetText({
-  "text": "Hello ((first name)), your reference is ((ref number))",
-  "classes": ""})
-}}
diff --git a/app/templates/partials/templates/guidance-personalization.html b/app/templates/partials/templates/guidance-personalization.html
new file mode 100644
index 000000000..bc6a358a5
--- /dev/null
+++ b/app/templates/partials/templates/guidance-personalization.html
@@ -0,0 +1,17 @@
+{% from "components/components/inset-text/macro.njk" import usaInsetText %}
+
+<h3 class="usa-accordion__heading">
+  <button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="personalization">
+    Personalization
+  </button>
+</h3>
+<div id="personalization" class="usa-accordion__content usa-prose">
+  <p class="bottom-gutter-1-3">
+    Use double brackets to personalize your message:
+  </p>
+  {{ usaInsetText({
+    "text": "Hello ((first name)), your reference is ((ref number))",
+    "classes": ""})
+  }}
+</div>
+
diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html
index b61c9098c..d658bb6de 100644
--- a/app/templates/views/edit-email-template.html
+++ b/app/templates/views/edit-email-template.html
@@ -37,7 +37,7 @@
         </div>
         <div class="grid-col-12">
           {% include "partials/templates/guidance-formatting.html" %}
-          {% include "partials/templates/guidance-personalisation.html" %}
+          {% include "partials/templates/guidance-personalization.html" %}
           {% include "partials/templates/guidance-optional-content.html" %}
           {% include "partials/templates/guidance-links.html" %}
           {% include "partials/templates/guidance-send-a-document.html" %}
diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html
index 0c22a8bc5..319fbe37e 100644
--- a/app/templates/views/edit-sms-template.html
+++ b/app/templates/views/edit-sms-template.html
@@ -20,11 +20,9 @@
 
     {{ page_header('{} text message template'.format(heading_action)) }}
 
-    {{ usaAlert({
-      "type": "info",
-      "text": "Don't worry, saving the template will not send",
-      "classes": "margin-top-2 usa-button--secondary"
-    }) }}
+    <a class="usa-link display-inline-flex margin-top-05" href="#help">
+      How to customize your message
+    </a>
 
     {% if current_service.prefix_sms %}
       {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
@@ -32,7 +30,7 @@
 
     {% call form_wrapper() %}
       <div class="grid-row">
-        <div class="grid-col-8">
+        <div class="tablet:grid-col-8 mobile-lg:grid-col-12">
           {{ form.name(param_extensions={
             "extra_form_group_classes": "margin-bottom-2",
             "hint": {"text": "Your recipients will not see this"}
@@ -50,22 +48,36 @@
             {{ form.process_type }}
           {% endif %}
         </div>
-        <div class="grid-col-12">
-          <div class="template-content-count">
-            <div data-module="update-status" data-target="template_content" data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}" aria-live="polite">
-              &nbsp;
+        <div class="grid-row">
+          <div class="grid-col-12">
+            <div class="template-content-count">
+              <div data-module="update-status" data-target="template_content"
+                data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}"
+                aria-live="polite">
+                &nbsp;
+              </div>
             </div>
           </div>
-          {{ page_footer('Save') }}
-          <p class="usa-hint">
-            After saving, you'll have the option to send 🚀
-          </p>
         </div>
-        <div class="grid-col-12">
-          {% include "partials/templates/guidance-personalisation.html" %}
-          {% include "partials/templates/guidance-optional-content.html" %}
-          {% include "partials/templates/guidance-links.html" %}
-          {% include "partials/templates/guidance-character-count.html" %}
+        <div class="grid-row width-full">
+            <div class="tablet:grid-col-2 mobile-lg:grid-col-12">
+              {{ page_footer('Save') }}
+            </div>
+          <div class="tablet:grid-col-10 mobile-lg:grid-col-12">
+              <p class="usa-hint margin-top-5 tablet:margin-left-neg-2">
+                After saving, you'll have the option to send.
+              </p>
+          </div>
+        </div>
+      
+        <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
+          <h2 id="help" class="font-body-xl margin-top-2">How to customize your message</h2>
+          <div class="usa-accordion usa-accordion--bordered usa-accordion--multiselectable" data-allow-multiple>
+            {% include "partials/templates/guidance-personalization.html" %}
+            {% include "partials/templates/guidance-optional-content.html" %}
+            {% include "partials/templates/guidance-links.html" %}
+            {% include "partials/templates/guidance-character-count.html" %}
+          </div>
         </div>
       </div>
     {% endcall %}