diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index e6ac6ba74..0095c9071 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -55,6 +55,10 @@
 
     }
 
+    &:last-child {
+      margin-right: govuk-spacing(1) * 1.5;
+    }
+
     &--unremoveable {
       padding-right: govuk-spacing(2);
       background: $light-blue-25;
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 11f019393..026a80aa5 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -82,13 +82,13 @@
           {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</a>
         </li>
     {% if loop.last %}
+      </ul>
       {{ govukButton({
         "element": "a",
         "text": "Add another area",
         "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
         "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
       }) }}
-      </ul>
     {% endif %}
   {% else %}
     <p class="govuk-body">