diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
new file mode 100644
index 000000000..24046d611
--- /dev/null
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -0,0 +1,64 @@
+.area-list {
+
+  &-item {
+
+    display: inline-block;
+    border: 2px solid $black;
+    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px) govuk-spacing(1) govuk-spacing(2);
+    margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
+    position: relative;
+
+    &-remove {
+
+      font-size: 0;
+
+      &:before {
+        content: "×";
+        display: block;
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        bottom: -2px;
+        width: 35px;
+        background: $govuk-blue;
+        color: $white;
+        box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
+        border: 2px solid $govuk-blue;
+        border-left: none;
+        font-size: 24px;
+        font-weight: normal;
+        line-height: 40px;
+        text-align: center;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &:focus {
+
+        &:before {
+          color: $light-blue-25;
+        }
+
+      }
+
+      &:focus {
+
+        outline: none;
+
+        &:before {
+          background: $focus-colour;
+          color: $black;
+          border-color: $black;
+        }
+
+      }
+
+    }
+
+  }
+
+  .govuk-button {
+    margin-left: 3px;
+  }
+
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 2a9ae48ae..5f08c25fe 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -70,6 +70,7 @@ $path: '/static/images/';
 @import 'components/preview-pane';
 @import 'components/task-list';
 @import 'components/loading-indicator';
+@import 'components/area-list';
 
 @import 'views/dashboard';
 @import 'views/users';
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 2793bff16..8599a7f67 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -14,6 +14,7 @@
     #map {
       z-index: 50;
       margin-bottom: 30px;
+      border: 1px solid #b1b4b6;
     }
   </style>
 {% endblock %}
@@ -37,12 +38,20 @@
 
     {% for area in area_polygons %}
       polygons.push(
-        L.polygon({{area}})
+        L.polygon({{area}}, {
+          color: '#0b0b0c', // $black
+          fillColor: '#2B8CC4', // $light-blue
+          fillOpacity: 0.2,
+          weight: 2
+        })
       );
     {% endfor %}
 
     var polygonGroup = L.featureGroup(polygons).addTo(mymap);
-    mymap.fitBounds(polygonGroup.getBounds());
+    mymap.fitBounds(
+      polygonGroup.getBounds(),
+      {padding: [5, 5]}
+    );
 
   </script>
 {% endblock %}
@@ -52,16 +61,20 @@
   {{ page_header("Choose where to broadcast to", back_link="{{ url_for('.broadcast', service_id=current_service.id) }}") }}
 
   {% for area in selected %}
-    {{ area.name }} (<a href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>)&ensp;
+    {% if loop.first %}
+      <ul class="area-list">
+    {% endif %}
+        <li class="area-list-item">
+          {{ area.name }} <a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, area_slug=area.id) }}">remove</a>
+        </li>
     {% if loop.last %}
-      <p class="govuk-body">
-        {{ govukButton({
-          "element": "a",
-          "text": "Add another area",
-          "href": url_for('.choose_broadcast_library', service_id=current_service.id),
-          "classes": "govuk-button--secondary govuk-!-margin-top-2"
-        }) }}
-      </p>
+      {{ govukButton({
+        "element": "a",
+        "text": "Add another area",
+        "href": url_for('.choose_broadcast_library', service_id=current_service.id),
+        "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
+      }) }}
+      </ul>
     {% endif %}
   {% else %}
     <p class="govuk-body">
diff --git a/app/templates/views/broadcast/preview-message.html b/app/templates/views/broadcast/preview-message.html
index 7a7ecf719..fe595c850 100644
--- a/app/templates/views/broadcast/preview-message.html
+++ b/app/templates/views/broadcast/preview-message.html
@@ -13,12 +13,12 @@
 
   {{ page_header("Preview message", back_link=url_for('.preview_broadcast_areas', service_id=current_service.id)) }}
 
-  {% for region in selected %}
+  {% for area in selected %}
     {% if loop.first %}
-      <ul class="region-list">
+      <ul class="area-list">
     {% endif %}
-        <li class="region-list-item">
-          {{ region.name }}
+        <li class="area-list-item">
+          {{ area.name }}
         </li>
     {% if loop.last %}
       </ul>