diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss
index 9d9ce2489..ef04b0a93 100644
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -36,44 +36,10 @@
 
     }
 
-    &-edit-link {
-
-      text-align: right;
-      position: absolute;
-      top: -25px;
-      right: -135px;
-
-      a {
-
-        &:before {
-          content: "";
-          display: block;
-
-          position: absolute;
-
-          top: -1 * govuk-spacing(3) - 1;
-          right: 0;
-          bottom: -1 * govuk-spacing(3);
-          left: -1 * govuk-spacing(3);
-
-          background: transparent;
-        }
-
-        &:active:before,
-        &:focus:before {
-          border-color: $yellow;
-          border-style: solid;
-          border-width: 15px 3px 15px 15px;
-          right: -3px;
-        }
-
-      }
-
-    }
-
     &-hint {
       color: #6F777B;
       padding-top: 5px;
+      margin: 0;
     }
 
   }
diff --git a/app/assets/stylesheets/views/users.scss b/app/assets/stylesheets/views/users.scss
index 4abef1993..a30f04741 100644
--- a/app/assets/stylesheets/views/users.scss
+++ b/app/assets/stylesheets/views/users.scss
@@ -7,17 +7,14 @@ $item-top-padding: govuk-spacing(3);
 
   &-item {
 
-    padding: $item-top-padding 150px govuk-spacing(3) 0;
+    padding: govuk-spacing(3) 0px;
     border-top: 1px solid $border-colour;
-    position: relative;
 
     &-heading {
 
       padding-right: govuk-spacing(3);
-      white-space: nowrap;
       overflow: hidden;
-      text-overflow: ellipsis;
-      color: $secondary-text-colour;  // So the ellipsis is grey
+      overflow-wrap: break-word;
 
       .heading-small {
         color: $black;
@@ -29,13 +26,61 @@ $item-top-padding: govuk-spacing(3);
       border-bottom: 1px solid $border-colour;
     }
 
+    & :last-child {
+      margin-bottom: 0;
+    }
+
+    &-blank {
+
+      margin-bottom: govuk-spacing(3);
+
+      @include govuk-media-query($from: tablet) {
+        margin-bottom: 0;
+      }
+
+    }
+
   }
 
   &-edit-link {
-    text-align: right;
-    position: absolute;
-    top: $item-top-padding;
-    right: 0px;
+
+    position: relative;
+    display: block;
+    margin: govuk-spacing(3) 0 govuk-spacing(3);
+
+    @include govuk-media-query($from: tablet) {
+      float: right;
+      margin: 0;
+    }
+
+    &:before {
+      content: "";
+      display: block;
+
+      position: absolute;
+
+      top: -1 * govuk-spacing(3) - 1;
+      right: 0;
+      bottom: -1 * govuk-spacing(3);
+      left: -1 * govuk-spacing(3);
+
+      background: transparent;
+    }
+
+    &:active:before,
+    &:focus:before {
+      border-color: $yellow;
+      border-style: solid;
+      border-width: 15px 3px;
+      right: -3px;
+      left: -3px;
+
+      @include govuk-media-query($from: tablet) {
+        border-width: 15px 3px 15px 15px;
+        left: -15px;
+      }
+    }
+
   }
 
 }
diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html
index 663d8ccb5..f8c9d858b 100644
--- a/app/templates/views/manage-users.html
+++ b/app/templates/views/manage-users.html
@@ -22,33 +22,35 @@
   <div class="user-list">
     {% for user in users %}
       <div class="user-list-item">
-        <h2 class="user-list-item-heading" title="{{ user.email_address }}">
-          {%- if user.name -%}
-            <span class="heading-small live-search-relevant">{{ user.name }}</span>&ensp;
-          {%- endif -%}
-          <span class="hint">
-            {%- if user.status == 'pending' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span> (invited)
-            {%- elif user.status == 'cancelled' -%}
-              <span class="live-search-relevant">{{ user.email_address }}</span> (cancelled invite)
-            {%- elif user.id == current_user.id -%}
-              <span class="live-search-relevant">(you)</span>
-            {% else %}
-              <span class="live-search-relevant">{{ user.email_address }}</span>
-            {% endif %}
-          </span>
-        </h2>
-        <ul class="tick-cross-list govuk-grid-row">
-          <div class="tick-cross-list-permissions govuk-grid-column-three-quarters">
-            {% for permission, label in permissions %}
-              {{ tick_cross(
-                user.has_permission_for_service(current_service.id, permission),
-                label
-              ) }}
-            {% endfor %}
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-three-quarters">
+            <h2 class="user-list-item-heading" title="{{ user.email_address }}">
+              {%- if user.name -%}
+              <span class="heading-small live-search-relevant">{{ user.name }}</span>&ensp;
+              {%- endif -%}
+              <span class="hint">
+              {%- if user.status == 'pending' -%}
+                <span class="live-search-relevant">{{ user.email_address }}</span> (invited)
+              {%- elif user.status == 'cancelled' -%}
+                <span class="live-search-relevant">{{ user.email_address }}</span> (cancelled invite)
+              {%- elif user.id == current_user.id -%}
+                <span class="live-search-relevant">(you)</span>
+              {% else %}
+                <span class="live-search-relevant">{{ user.email_address }}</span>
+              {% endif %}
+              </span>
+            </h2>
+            <ul class="tick-cross-list-permissions">
+              {% for permission, label in permissions %}
+                {{ tick_cross(
+                  user.has_permission_for_service(current_service.id, permission),
+                  label
+                ) }}
+              {% endfor %}
+            </ul>
             {# only show if the service has folders #}
             {% if current_service.all_template_folders %}
-              <div class="tick-cross-list-hint">
+              <p class="govuk-body tick-cross-list-hint">
                 {% set folder_count = user.template_folders_for_service(current_service) | length %}
 
                 {% if folder_count == 0 %}
@@ -58,28 +60,28 @@
                 {% else %}
                   Can see all folders
                 {% endif%}
-              </div>
+              </p>
             {% endif %}
             {% if current_service.has_permission('email_auth') %}
-              <div class="tick-cross-list-hint">
+              <p class="govuk-body tick-cross-list-hint">
                 {% if user.auth_type == 'sms_auth' %}
                   Signs in with a text message code
                 {% else %}
                   Signs in with an email link
                 {% endif %}
-              </div>
+              </p>
             {% endif %}
-          </div>
-          {% if current_user.has_permissions('manage_service') %}
-            <li class="tick-cross-list-edit-link">
-              {% if user.status == 'pending' %}
-                <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="govuk-visually-hidden"> for {{ user.email_address }}</span></a>
-              {% elif user.state == 'active' and current_user.id != user.id %}
-                <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="govuk-visually-hidden"> for {{ user.name }} {{ user.email_address }}</span></a>
+            </div>
+            <div class="govuk-grid-column-one-quarter">
+              {% if current_user.has_permissions('manage_service') %}
+                {% if user.status == 'pending' %}
+                  <a class="user-list-edit-link govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="govuk-visually-hidden"> for {{ user.email_address }}</span></a>
+                {% elif user.state == 'active' and current_user.id != user.id %}
+                  <a class="user-list-edit-link govuk-link govuk-link--no-visited-state" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="govuk-visually-hidden"> for {{ user.name }} {{ user.email_address }}</span></a>
+                {% endif %}
               {% endif %}
-            </li>
-          {% endif %}
-        </ul>
+            </div>
+          </div>
       </div>
     {% endfor %}
   </div>
diff --git a/app/templates/views/organisations/organisation/users/index.html b/app/templates/views/organisations/organisation/users/index.html
index 7adb139f9..543bf1b6e 100644
--- a/app/templates/views/organisations/organisation/users/index.html
+++ b/app/templates/views/organisations/organisation/users/index.html
@@ -1,7 +1,6 @@
 {% extends "org_template.html" %}
 {% from "components/table.html" import list_table, row, field, hidden_field_heading %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/tick-cross.html" import tick_cross %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/button/macro.njk" import govukButton %}
@@ -25,29 +24,31 @@
   <div class="user-list">
     {% for user in users %}
       <div class="user-list-item">
-        <h2 class="user-list-item-heading">
-          {%- if user.name -%}
-            <span class="heading-small">{{ user.name }}</span>&ensp;
-          {%- endif -%}
-          <span class="hint">
-            {%- if user.status == 'pending' -%}
-              {{ user.email_address }} (invited)
-            {%- elif user.status == 'cancelled' -%}
-              {{ user.email_address }} (cancelled invite)
-            {%- elif user.id == current_user.id -%}
-              (you)
-            {% else %}
-              {{ user.email_address }}
-            {% endif %}
-          </span>
-        </h2>
-        <ul class="tick-cross-list">
-          <li class="tick-cross-list-edit-link">
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-three-quarters">
+            <h2 class="user-list-item-heading">
+              {%- if user.name -%}
+                <span class="heading-small">{{ user.name }}</span>&ensp;
+              {%- endif -%}
+              <span class="hint">
+                {%- if user.status == 'pending' -%}
+                  {{ user.email_address }} (invited)
+                {%- elif user.status == 'cancelled' -%}
+                  {{ user.email_address }} (cancelled invite)
+                {%- elif user.id == current_user.id -%}
+                  (you)
+                {% else %}
+                  {{ user.email_address }}
+                {% endif %}
+              </span>
+            </h2>
+          </div>
+          <div class="govuk-grid-column-one-quarter">
             {% if user.status == 'pending' %}
-              <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation</a>
+              <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation</a>
             {% endif %}
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     {% endfor %}
   </div>
diff --git a/app/templates/views/service-settings/data-retention.html b/app/templates/views/service-settings/data-retention.html
index d47e8cb49..ebd48ea76 100644
--- a/app/templates/views/service-settings/data-retention.html
+++ b/app/templates/views/service-settings/data-retention.html
@@ -29,27 +29,28 @@
           By default data is kept for 7 days
       </div>
   </div>
-  <div class="user-list">
-    {% if not current_service.data_retention %}
+  {% if not current_service.data_retention %}
+    <div class="user-list">
       <div class="user-list-item">
-        <span class="hint">You have not added any data retention</span>
+        <p class="govuk-body user-list-item-blank hint">You have not added any data retention</p>
       </div>
-    {% endif %}
-       {% call mapping_table(
-        caption='Data retention',
-        field_headings=['Label', 'Value', 'Action'],
-        field_headings_visible=False,
-        caption_visible=False
-      ) %}
-        {% for item in current_service.data_retention %}
-            {% call row() %}
-              {{ text_field(item.notification_type | format_notification_type)}}
-              {{ text_field(item.days_of_retention) }}
-              {{ edit_field('Change', url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=item.id)) }}
-            {% endcall %}
+    </div>
+  {% else %}
+     {% call mapping_table(
+      caption='Data retention',
+      field_headings=['Label', 'Value', 'Action'],
+      field_headings_visible=False,
+      caption_visible=False
+    ) %}
+      {% for item in current_service.data_retention %}
+          {% call row() %}
+            {{ text_field(item.notification_type | format_notification_type)}}
+            {{ text_field(item.days_of_retention) }}
+            {{ edit_field('Change', url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=item.id)) }}
+          {% endcall %}
 
-        {% endfor %}
-      {% endcall %}
-  </div>
+      {% endfor %}
+    {% endcall %}
+  {% endif %}
 
 {% endblock %}
diff --git a/app/templates/views/service-settings/email_reply_to.html b/app/templates/views/service-settings/email_reply_to.html
index 60c88d6bb..958cba3ed 100644
--- a/app/templates/views/service-settings/email_reply_to.html
+++ b/app/templates/views/service-settings/email_reply_to.html
@@ -18,24 +18,34 @@
   <div class="user-list">
     {% if not current_service.email_reply_to_addresses %}
       <div class="user-list-item">
-        <span class="hint">You have not added any reply-to email addresses yet</span>
+        <p class="govuk-body user-list-item-blank hint">You have not added any reply-to email addresses yet</p>
       </div>
     {% endif %}
     {% for item in current_service.email_reply_to_addresses %}
       <div class="user-list-item">
-        <h2 class="user-list-item-heading">
-          <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
-            {%- if item.is_default -%}
-              (default)
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-three-quarters">
+            <h2 class="user-list-item-heading">
+              <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
+                {%- if item.is_default -%}
+                  (default)
+                {% endif %}
+              </span>
+            </h2>
+          </div>
+          <div class="govuk-grid-column-one-quarter">
+            {% if current_user.has_permissions('manage_service') %}
+              <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
             {% endif %}
-          </span>
-        </h2>
-        {% if current_user.has_permissions('manage_service') %}
-          <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
-        {% endif %}
-        {% if current_service.count_email_reply_to_addresses > 1 %}
-          {{ api_key(item.id, name=item.email_address, thing="ID") }}
-        {% endif %}
+          </div>
+        </div>
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-full">
+            {% if current_service.count_email_reply_to_addresses > 1 %}
+              {{ api_key(item.id, name=item.email_address, thing="ID") }}
+            {% endif %}
+          </div>
+        </div>
       </div>
     {% endfor %}
   </div>
diff --git a/app/templates/views/service-settings/letter-contact-details.html b/app/templates/views/service-settings/letter-contact-details.html
index 0cf921156..a16ea0e1e 100644
--- a/app/templates/views/service-settings/letter-contact-details.html
+++ b/app/templates/views/service-settings/letter-contact-details.html
@@ -18,30 +18,41 @@
   </div>
   <div class="user-list">
     <div class="user-list-item">
-      <span class="hint">
-        Blank
-        {% if current_service.default_letter_contact_block %}
-          {% if current_user.has_permissions('manage_service') %}
-            <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_make_blank_default_letter_contact', service_id =current_service.id) }}">Make default</a>
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-three-quarters">
+          <p class="user-list-item-blank govuk-body hint">
+            Blank
+            {% if not current_service.default_letter_contact_block %}
+              (default)
+            {% endif %}
+          </p>
+        </div>
+        <div class="govuk-grid-column-one-quarter">
+          {% if current_service.default_letter_contact_block and current_user.has_permissions('manage_service') %}
+              <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_make_blank_default_letter_contact', service_id =current_service.id) }}">Make default</a>
           {% endif %}
-        {% else %}
-          (default)
-        {% endif %}
-      </span>
+        </div>
+      </div>
     </div>
     {% for item in letter_contact_details %}
       <div class="user-list-item">
-        <p class="govuk-body">
-          {{ item.contact_block | nl2br }}
-        </p>
-        <p class="hint">
-          {%- if item.is_default -%}
-            (default)
-          {% endif %}
-        </p>
-        {% if current_user.has_permissions('manage_service') %}
-        <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
-        {% endif %}
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-three-quarters">
+            <p class="govuk-body">
+              {{ item.contact_block | nl2br }}
+            </p>
+            <p class="govuk-body hint">
+              {%- if item.is_default -%}
+                (default)
+              {% endif %}
+            </p>
+          </div>
+          <div class="govuk-grid-column-one-quarter">
+            {% if current_user.has_permissions('manage_service') %}
+            <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
+            {% endif %}
+          </div>
+        </div>
         {% if letter_contact_details|length  > 1 %}
           {% set first_line_of_contact_block = item.contact_block|normalise_lines|first %}
           {{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }}
diff --git a/app/templates/views/service-settings/sms-senders.html b/app/templates/views/service-settings/sms-senders.html
index aa7d9806f..20c84d646 100644
--- a/app/templates/views/service-settings/sms-senders.html
+++ b/app/templates/views/service-settings/sms-senders.html
@@ -18,23 +18,29 @@
   <div class="user-list">
     {% if not current_service.sms_senders %}
       <div class="user-list-item">
-        <span class="hint">You have not added any text message senders yet</span>
+        <p class="govuk-body user-list-item-blank hint">You have not added any text message senders yet</p>
       </div>
     {% endif %}
     {% for item in current_service.sms_senders_with_hints %}
       <div class="user-list-item">
-        <h2 class="user-list-item-heading">
-          <span class="heading-small">{{ item.sms_sender }}</span>
-          {% if item.hint %}
-            &ensp;
-            <span class="hint">
-              {{ item.hint }}
-            </span>
-          {% endif %}
-        </h2>
-        {% if current_user.has_permissions('manage_service') %}
-          <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a>
-        {% endif %}
+        <div class="govuk-grid-row">
+          <div class="govuk-grid-column-three-quarters">
+            <h2 class="user-list-item-heading">
+              <span class="heading-small">{{ item.sms_sender }}</span>
+              {% if item.hint %}
+                &ensp;
+                <span class="hint">
+                  {{ item.hint }}
+                </span>
+              {% endif %}
+            </h2>
+          </div>
+          <div class="govuk-grid-column-one-quarter">
+            {% if current_user.has_permissions('manage_service') %}
+              <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a>
+            {% endif %}
+          </div>
+        </div>
         {% if current_service.count_sms_senders > 1 %}
           {{ api_key(item.id, name=item.sms_sender, thing="ID") }}
         {% endif %}
diff --git a/tests/app/main/views/organisations/test_organisation_invites.py b/tests/app/main/views/organisations/test_organisation_invites.py
index d32748310..9a80301aa 100644
--- a/tests/app/main/views/organisations/test_organisation_invites.py
+++ b/tests/app/main/views/organisations/test_organisation_invites.py
@@ -28,7 +28,7 @@ def test_view_team_members(
         ) == 'Test User {}'.format(i + 1)
 
     assert normalize_spaces(
-        page.select('.tick-cross-list-edit-link')[0].text
+        page.select('.user-list-edit-link')[0].text
     ) == 'Cancel invitation'