diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 1a8d54926..f19cc9f9c 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -1,3 +1,3 @@
 $(() => GOVUK.modules.start());
 
-$(() => new GOVUK.SelectionButtons('.block-label input'));
+$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));
diff --git a/app/assets/stylesheets/components/sms-message.scss b/app/assets/stylesheets/components/sms-message.scss
index a429edbaa..a72e7c939 100644
--- a/app/assets/stylesheets/components/sms-message.scss
+++ b/app/assets/stylesheets/components/sms-message.scss
@@ -1,53 +1,63 @@
-.sms-message {
-
-  position: relative;
+%sms-message-wrapper,
+.sms-message-wrapper {
+  width: 100%;
+  box-sizing: border-box;
+  padding: $gutter/2;
+  background: $panel-colour;
+  border: 1px solid $panel-colour;
+  border-radius: 5px;
+  white-space: normal;
   margin: 0 0 $gutter 0;
+}
+
+.sms-message-wrapper-with-radio {
+  @extend %sms-message-wrapper;
+  padding-left: 45px;
+  cursor: pointer;
+}
+
+.sms-message-recipient {
+  @include copy-19;
+  color: $secondary-text-colour;
+  margin: -$gutter-half 0 $gutter 0;
+}
+
+.sms-message-name {
+  @include bold-19;
+  margin: 30px 0 10px 0;
+}
+
+.sms-message-picker {
+  display: block;
+  margin: 7px 0 0 0;
+  position: absolute;
+  left: 15px;
+  top: 50%;
+  z-index: 50;
+}
+
+label.sms-message-option {
+
+  display: block;
+  position: relative;
+
+  &.selected {
+
+    .sms-message-wrapper-with-radio {
+      background: $white;
+      border: 1px solid $text-colour;
+    }
 
-  &:before {
-    content: '';
-    position: absolute;
-    z-index: 10;
-    bottom: -12px;
-    right: 5px;
-    width: 20px;
-    height: 25px;
-    border-radius: 100%;
-    background: $panel-colour;
   }
 
-  &:after {
-    content: '';
-    position: absolute;
-    z-index: 20;
-    bottom: -15px;
-    right: -5px;
-    border-radius: 100%;
-    width: 20px;
-    height: 20px;
-    background: $white;
-  }
+  &.focused {
 
-  &-wrapper {
-    width: 100%;
-    display: inline-block;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 30;
-    padding: $gutter/2;
-    background: $panel-colour;
-    border-radius: 5px;
-    white-space: normal;
-  }
+    outline: none;
 
-  &-recipient {
-    @include copy-19;
-    color: $secondary-text-colour;
-    margin: -$gutter-half 0 $gutter 0;
-  }
+    .sms-message-wrapper-with-radio {
+      box-shadow: 0 0 0 3px $yellow;
+    }
 
-  &-name {
-    @include bold-19;
-    margin: 50px 0 10px 0;
   }
 
 }
diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html
index d3ac7c6da..85ec76dd6 100644
--- a/app/templates/admin_template.html
+++ b/app/templates/admin_template.html
@@ -55,8 +55,10 @@
             <summary class="dropdown-toggle">
               Service name
             </summary>
-            <a href="#">Switch to A N Other service</a>
-            <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+            <div>
+              <a href="#">Switch to A N Other service</a>
+              <a href="{{ url_for('.add_service') }}">Add a new service to GOV.UK Notify</a>
+            </div>
           </details>
         </div>
         <div class="column-half management-navigation-account">
diff --git a/app/templates/components/sms-message.html b/app/templates/components/sms-message.html
index a04a47c62..38d41f486 100644
--- a/app/templates/components/sms-message.html
+++ b/app/templates/components/sms-message.html
@@ -1,4 +1,9 @@
-{% macro sms_message(body, recipient=None, name=None, edit_link=None) %}
+{% macro sms_message(
+  body, recipient=None, name=None, edit_link=None, input_name=None, input_index=None
+) %}
+  {% if input_name %}
+    <label class="sms-message-option" for="{{ input_name }}-{{ input_index }}">
+  {% endif %}
   {% if name %}
     <h3 class="sms-message-name">
       {% if edit_link %}
@@ -8,14 +13,18 @@
       {% endif %}
     </h3>
   {% endif %}
-  <div class="sms-message">
-    <div class="sms-message-wrapper">
-      {{ body|placeholders }}
-    </div>
+  {% if input_name %}
+    <input class="sms-message-picker" type="radio" id="{{ input_name }}-{{ input_index }}" name="{{ input_name }}" />
+  {% endif %}
+  <div class="sms-message-wrapper{% if input_name %}-with-radio{% endif %}">
+    {{ body|placeholders }}
   </div>
   {% if recipient %}
     <p class="sms-message-recipient">
       {{ recipient }}
     </p>
   {% endif %}
+  {% if input_name %}
+    </label>
+  {% endif %}
 {% endmacro %}
diff --git a/app/templates/views/send-sms.html b/app/templates/views/send-sms.html
index 338497756..e9cdefea8 100644
--- a/app/templates/views/send-sms.html
+++ b/app/templates/views/send-sms.html
@@ -10,35 +10,40 @@
 {% block maincolumn_content %}
   <form method="POST" enctype="multipart/form-data">
 
-    <h1 class="heading-xlarge">Send text messages</h1>
+    <div class="grid-row">
+      <div class="column-three-quarters">
 
-    <fieldset class='form-group'>
-      <legend class="heading-medium">1. Choose text message template</legend>
-      {% for template in message_templates %}
-        <label class="block-label" for="template-{{loop.index}}">
-          {{ template.name }}
-          <input type="radio" name="template" id="template-{{loop.index}}" value="{{ template.name }}" />
-        </label>
-      {% endfor %}
-    </fieldset>
+        <h1 class="heading-xlarge">Send text messages</h1>
 
-    <p>
-      or <a href="{{ url_for('.add_service_template', service_id=service_id) }}">create a new template</a>
-    </p>
+        <fieldset class='form-group'>
+          <legend class="heading-medium">1. Choose text message template</legend>
+          {% for template in message_templates %}
+            {{ sms_message(
+              template.body, name=template.name, input_name='template', input_index=loop.index
+            ) }}
+          {% endfor %}
+        </fieldset>
 
-    <h2 class="heading-medium">2. Add recipients</h2>
+        <p>
+          or <a href="{{ url_for(".add_template", service_id=service_id) }}">create a new template</a>
+        </p>
 
-    <p>
-      Upload a CSV file to add your recipients’ details.
-    </p>
-    <p>
-      You can also <a href="#">download an example CSV</a>.
-    </p>
-    <p>
-      {{textbox(form.file)}}
-    </p>
+        <h2 class="heading-medium">2. Add recipients</h2>
 
-    {{ page_footer("Continue") }}
+        <p>
+          Upload a CSV file to add your recipients’ details.
+        </p>
+        <p>
+          You can also <a href="#">download an example CSV</a>.
+        </p>
+        <p>
+          {{textbox(form.file)}}
+        </p>
+
+        {{ page_footer("Continue") }}
+
+      </div>
+    </div>
 
   </form>