diff --git a/app/assets/stylesheets/components/area-list.scss b/app/assets/stylesheets/components/area-list.scss
index ad0484b36..acd9023c5 100644
--- a/app/assets/stylesheets/components/area-list.scss
+++ b/app/assets/stylesheets/components/area-list.scss
@@ -7,25 +7,28 @@
     display: inline-block;
     border: 2px solid $black;
     // Create space for the remove link on the right of the list item (including borders)
-    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 35px + (2 * 2px)) govuk-spacing(1) govuk-spacing(2);
+    padding: (govuk-spacing(1) + 1px) (govuk-spacing(2) + 37px) govuk-spacing(1) govuk-spacing(2);
     margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
     position: relative;
 
     &-remove {
 
-      display: block;
+      display: block; // fallback for browsers that don't support flexbox
+      display: flex;
+      // center SVG vertically and horizontally
+      align-items: center;
+      justify-content: center;
       position: absolute;
       top: -2px; // cover list-item border-top
       right: -2px; // cover list-item border-right
       bottom: -2px; // cover list-item border-bottom
-      width: 35px;
-      padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1); 
+      width: 37px;
+      padding: 0;
       border: 2px solid $govuk-blue;
       border-left: none;
       text-align: center;
-      text-decoration: none;
       font-size: inherit; // counter govuk-button styles
-      line-height: inherit; // counter govuk-button styles
+      line-height: 36px; // match area-list-item for browsers that don't support flexbox
 
       // set styles so they don't get overriden by govuk-button styles
       &,
@@ -54,15 +57,22 @@
 
       // set styles so they don't get overriden by govuk-button styles
       &,
+      &:focus,
       &:focus:not(:active):not(:hover) {
         box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
       }
 
       // set styles so they don't get overriden by govuk-button styles
+      &:focus,
       &:focus:not(:active):not(:hover) {
         border-color: $black;
       }
 
+      &:focus:hover {
+        background-color: $govuk-focus-colour;
+        color: $black;
+      }
+
       // show outline to make focus visible when background colours are overridden
       @media (-ms-high-contrast: active), (forced-colors: active) {
 
@@ -71,6 +81,14 @@
           outline: 3px solid transparent;
         }
 
+        // override hover styles when focused, to preserve dimensions and outline
+        &:focus:hover {
+          top: -2px;
+          right: -2px;
+          bottom: -2px;
+          width: 37px;
+        }
+
       }
     }
 
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 44bcb690f..d516f7326 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -32,11 +32,11 @@
         <li class="area-list-item">
           {{ area.name }}
           <a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
-            <svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
+            <svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
               <title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
-              <g transform="rotate(45),translate(1, -7.5)">
-                <line stroke-width="2" id="svg_1" y2="0" x2="7.5" y1="15" x1="7.5" stroke="currentColor" fill="none"/>
-                <line stroke-width="2" id="svg_3" y2="7.5" x2="0" y1="7.5" x1="15" stroke="currentColor" fill="none"/>
+              <g transform="rotate(45),translate(1, -6)">
+                <line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>
+                <line stroke-width="1.75" id="svg_3" y2="6" x2="0" y1="6" x1="12" stroke="currentColor" fill="none"/>
               </g>
             </svg>
           </a>