diff --git a/app/assets/images/exclamation.svg b/app/assets/images/exclamation.svg
index 5998192ad..e530210e1 100644
--- a/app/assets/images/exclamation.svg
+++ b/app/assets/images/exclamation.svg
@@ -1,26 +1,26 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 17.5 14.5" width="17.5" height="14.5" style="enable-background:new 0 0 17.5 14.5;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:#0B0B0B;}
+	.st0{display:none;}
+	.st1{display:inline;fill:#BCBCBC;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#6F777B;}
 </style>
-<path class="st0" d="M8.6,3.9l5.3,8.6H3.5L8.6,3.9 M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
-<g>
-	<circle class="st0" cx="8.8" cy="10.9" r="1.1"/>
-	<path d="M8.8,9.8c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1s1.1-0.5,1.1-1.1C9.8,10.3,9.4,9.8,8.8,9.8L8.8,9.8z"/>
+<g id="Layer_3" class="st0">
+	<rect x="-1.6" y="-0.8" class="st1" width="20.1" height="17.8"/>
 </g>
-<polygon class="st0" points="8.2,6.4 9.3,6.4 9.7,6.8 9.6,9.3 8.7,9.1 8,9.3 7.8,6.9 "/>
-<g>
+<g id="Layer_1">
+	<path class="st2" d="M8.6,0L0,14.5h17.5L8.6,0L8.6,0z"/>
+	<g>
+		<circle class="st2" cx="8.8" cy="10.9" r="1.1"/>
+	</g>
 </g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
+<g id="Layer_2">
+	<path class="st3" d="M8.8,10.3c-0.8,0-1.5,0.7-1.5,1.5c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5C10.2,11,9.6,10.3,8.8,10.3L8.8,10.3z
+		"/>
+	<path class="st3" d="M10.1,5.8C10.2,6.6,9.8,9,9.8,9S9.4,9,8.8,9C8.3,9,7.8,9,7.8,9S7.3,6.7,7.3,6c0,0,0-1.6,1.4-1.6
+		C10.1,4.4,10.1,5.8,10.1,5.8z"/>
 </g>
 </svg>
diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index 66769111b..1397d6b06 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -64,7 +64,10 @@
     &--unremoveable {
       padding-right: govuk-spacing(2);
       background: $light-blue-25;
-      margin-right: govuk-spacing(3);
+      color: mix($black, $govuk-blue, 66%);
+      border-color: $light-blue-25;
+      margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
+      font-weight: bold;
     }
 
   }
@@ -75,17 +78,17 @@
 
 }
 
-#map {
+#area-list-map {
   z-index: 50;
   margin-bottom: govuk-spacing(4);
 }
 
-.area-key {
+.area-list-key {
 
   display: inline-block;
   position: relative;
   margin-right: govuk-spacing(3);
-  margin-bottom: govuk-spacing(5);
+  margin-bottom: govuk-spacing(4);
   height: govuk-spacing(7);
   padding-left: govuk-spacing(8);
   line-height: govuk-spacing(7);
@@ -129,3 +132,21 @@
   }
 
 }
+
+.area-list-map-details {
+
+  .govuk-details__summary {
+    display: block;
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+    margin-top: 1px;
+  }
+
+  .govuk-details__text {
+    padding: 0;
+    border: none;
+    border-bottom: 1px solid $border-colour;
+    margin-top: -1px;
+  }
+
+}
diff --git a/app/assets/stylesheets/components/broadcast-message.scss b/app/assets/stylesheets/components/broadcast-message.scss
index 4ccf1a423..d9e51f85f 100644
--- a/app/assets/stylesheets/components/broadcast-message.scss
+++ b/app/assets/stylesheets/components/broadcast-message.scss
@@ -1,33 +1,37 @@
-.broadcast-message-wrapper {
+.broadcast-message {
 
-  position: relative;
-  width: 100%;
-  max-width: 464px;
-  box-sizing: border-box;
-  padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
-  background: $panel-colour;
-  border: 2px solid $black;
-  border-radius: 5px;
-  white-space: normal;
-  margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
-  clear: both;
-  word-wrap: break-word;
+  &-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 464px;
+    box-sizing: border-box;
+    padding: govuk-spacing(9) govuk-spacing(3) govuk-spacing(3) govuk-spacing(3);
+    background: $panel-colour;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
+    border-radius: 5px;
+    white-space: normal;
+    margin: govuk-spacing(2) 0 govuk-spacing(4) 0;
+    clear: both;
+    word-wrap: break-word;
+  }
 
-  &:before {
-    content: "Emergency alert";
+  &-heading {
     display: block;
-    border-bottom: 2px solid $black;
     position: absolute;
-    top: govuk-spacing(2);
+    top: 0;
     left: 0;
-    padding: 2px govuk-spacing(3) govuk-spacing(2) 45px;
+    padding: govuk-spacing(2) + 1px govuk-spacing(3) (govuk-spacing(2) - 1px) 46px;
     width: 100%;
     box-sizing: border-box;
     font-weight: bold;
-    background: file-url('exclamation.svg');
-    background-size: 20px;
+    background: $grey-1 file-url('exclamation.svg');
+    color: $white;
+    background-size: 22px;
     background-repeat: no-repeat;
-    background-position: govuk-spacing(3) 3px;
+    background-position: govuk-spacing(3) 11px;
+    border-top-right-radius: 5px;
+    border-top-left-radius: 5px;
+    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
   }
 
 }
diff --git a/app/templates/views/broadcast/macros/area-map.html b/app/templates/views/broadcast/macros/area-map.html
index 32b0ce8ee..196f4c447 100644
--- a/app/templates/views/broadcast/macros/area-map.html
+++ b/app/templates/views/broadcast/macros/area-map.html
@@ -1,7 +1,7 @@
 {% macro map(broadcast_message) %}
-  <div id="map"></div>
+  <div id="area-list-map"></div>
   <ul>
-    <li class="area-key area-key--certain">
+    <li class="area-list-key area-list-key--certain">
       <span class="visually-hidden">
         An area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.estimated_area) }} square miles
       </span>
@@ -9,7 +9,7 @@
       <span class="visually-hidden">the</span>
       alert
     </li>
-    <li class="area-key area-key--likely">
+    <li class="area-list-key area-list-key--likely">
       <span class="visually-hidden">
         An extra area of {{ "{:,.1f}".format(broadcast_message.simple_polygons.bleed.estimated_area - broadcast_message.simple_polygons.estimated_area) }} square miles is
       </span>
@@ -19,7 +19,7 @@
       </span>
       alert
     </li>
-    <li class="area-key area-key--phone-estimate">
+    <li class="area-list-key area-list-key--phone-estimate">
       {% if broadcast_message.count_of_phones == broadcast_message.count_of_phones_likely %}
         {{ broadcast_message.count_of_phones|format_thousands }} phones estimated
       {% else %}
diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index b557e9445..871145332 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -20,7 +20,7 @@
     polygons.push(
       L.polygon({{polygon}}, {
         color: '#0b0b0c',
-        fillColor: '#005ea5',
+        fillColor: '#2B8CC4',
         fillOpacity: 0.3,
         weight: 2
       })
@@ -28,7 +28,7 @@
   {% endfor %}
 
 
-  var mapElement = document.getElementById('map');
+  var mapElement = document.getElementById('area-list-map');
 
   // if element is inside a details element then to make the map render correctly we open the details element
   // and set up the map before closing the details map after
@@ -41,7 +41,7 @@
   mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
 
   var mymap = L.map(
-    'map',
+    'area-list-map',
     {
       scrollWheelZoom: false
     }
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 9e1efad65..327355ac5 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -53,7 +53,7 @@
 
   {% if broadcast_message.areas %}
     {{ map(broadcast_message) }}
-    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get">
+    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
       {{ page_footer('Continue to preview') }}
     </form>
   {% endif %}
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 236090bc5..b474da754 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -138,10 +138,12 @@
     {% endif %}
   {% endfor %}
 
-  {{ govukDetails({
-    "summaryText": "Show map",
-    "html": map(broadcast_message)
-  }) }}
+  <div class="area-list-map-details">
+    {{ govukDetails({
+      "summaryText": "Show map of areas",
+      "html": map(broadcast_message)
+    }) }}
+  </div>
 
   {{ broadcast_message.template|string }}
 
diff --git a/requirements-app.txt b/requirements-app.txt
index 555515483..01532ed9c 100644
--- a/requirements-app.txt
+++ b/requirements-app.txt
@@ -24,7 +24,7 @@ Shapely==1.7.1
 awscli-cwlogs>=1.4,<1.5
 itsdangerous==1.1.0
 
-git+https://github.com/alphagov/notifications-utils.git@42.2.1#egg=notifications-utils==42.2.1
+git+https://github.com/alphagov/notifications-utils.git@42.2.2#egg=notifications-utils==42.2.2
 git+https://github.com/alphagov/govuk-frontend-jinja.git@v0.5.1-alpha#egg=govuk-frontend-jinja==0.5.1-alpha
 
 # gds-metrics requires prometheseus 0.2.0, override that requirement as later versions bring significant performance gains
diff --git a/requirements.txt b/requirements.txt
index a29cf753b..25fad9075 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -26,7 +26,7 @@ Shapely==1.7.1
 awscli-cwlogs>=1.4,<1.5
 itsdangerous==1.1.0
 
-git+https://github.com/alphagov/notifications-utils.git@42.2.1#egg=notifications-utils==42.2.1
+git+https://github.com/alphagov/notifications-utils.git@42.2.2#egg=notifications-utils==42.2.2
 git+https://github.com/alphagov/govuk-frontend-jinja.git@v0.5.1-alpha#egg=govuk-frontend-jinja==0.5.1-alpha
 
 # gds-metrics requires prometheseus 0.2.0, override that requirement as later versions bring significant performance gains
@@ -34,10 +34,10 @@ prometheus-client==0.8.0
 gds-metrics==0.2.4
 
 ## The following requirements were added by pip freeze:
-awscli==1.18.154
+awscli==1.18.157
 bleach==3.1.4
 boto3==1.10.38
-botocore==1.18.13
+botocore==1.18.16
 cachetools==4.1.0
 certifi==2020.6.20
 chardet==3.0.4
diff --git a/tests/app/main/views/test_broadcast.py b/tests/app/main/views/test_broadcast.py
index 2c8b534ec..bba981f2f 100644
--- a/tests/app/main/views/test_broadcast.py
+++ b/tests/app/main/views/test_broadcast.py
@@ -430,11 +430,11 @@ def test_preview_broadcast_areas_page(
         for item in page.select('ul.area-list li.area-list-item')
     ] == areas_listed
 
-    assert len(page.select('#map')) == 1
+    assert len(page.select('#area-list-map')) == 1
 
     assert [
         normalize_spaces(item.text)
-        for item in page.select('ul li.area-key')
+        for item in page.select('ul li.area-list-key')
     ] == estimates
 
 
@@ -968,9 +968,16 @@ def test_preview_broadcast_message_page(
         'Scotland',
     ]
 
+    assert normalize_spaces(
+        page.select_one('h2.broadcast-message-heading').text
+    ) == (
+        'Emergency alert'
+    )
+
     assert normalize_spaces(
         page.select_one('.broadcast-message-wrapper').text
     ) == (
+        'Emergency alert '
         'This is a test'
     )
 
diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py
index afd12d037..8dc5daeb1 100644
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -784,6 +784,7 @@ def test_view_broadcast_template(
     ) == (
         normalize_spaces(page.select_one('.broadcast-message-wrapper').text)
     ) == (
+        'Emergency alert '
         'This is a test'
     )