diff --git a/app/assets/javascripts/listEntry.js b/app/assets/javascripts/listEntry.js
index cca48c9c0..5b5592dd5 100644
--- a/app/assets/javascripts/listEntry.js
+++ b/app/assets/javascripts/listEntry.js
@@ -27,13 +27,13 @@
   ListEntry.optionalAttributes = ['aria-describedby'];
   ListEntry.prototype.entryTemplate = Hogan.compile(
     '<div class="list-entry">' +
-      '<label for="{{{id}}}" class="text-box-number-label">' +
+      '<label for="{{{id}}}" class="govuk-input--numbered__label">' +
         '<span class="govuk-visually-hidden">{{listItemName}} number </span>{{number}}.' +
       '</label>' +
       '<input' +
-        ' name="{{name}}-{{index}}"' +
+        ' name="{{name}}"' +
         ' id="{{id}}"' +
-        ' value="{{value}}"' +
+        ' {{#value}}value="{{value}}{{/value}}"' +
         ' {{{sharedAttributes}}}' +
       '/>' +
       '{{#button}}' +
@@ -122,7 +122,7 @@
     if ("undefined" === typeof num) {
       return pattern;
     } else {
-      return "input-" + pattern + "-" + num;
+      return pattern + "-" + num;
     }
   };
   ListEntry.prototype.bindEvents = function () {
@@ -179,7 +179,7 @@
             'id' : this.getId(entryNumber),
             'number' : entryNumber,
             'index': idx,
-            'name' : this.getId(),
+            'name' : this.getId(entryNumber),
             'value' : entry,
             'listItemName' : this.listItemName,
             'sharedAttributes': this.sharedAttributes
diff --git a/app/assets/stylesheets/components/list-entry.scss b/app/assets/stylesheets/components/list-entry.scss
index b4927b2e4..c37729f1e 100644
--- a/app/assets/stylesheets/components/list-entry.scss
+++ b/app/assets/stylesheets/components/list-entry.scss
@@ -4,6 +4,11 @@
     vertical-align: middle;
     margin-bottom: 15px;
     position: relative;
+
+    // move the left border, signifying the error, out of the main column
+    .govuk-form-group--error {
+      margin-left: ($govuk-border-width + $govuk-gutter-half) * -1;
+    }
   }
 
   &__button--remove,
@@ -31,26 +36,4 @@
     margin: 0 0 20px 0;
   }
 
-  .form-control {
-    padding-left: 1.84em;
-    width: 100%;
-    margin-bottom: 0;
-
-    @include media(desktop) {
-      @include inline-block;
-    }
-  }
-
-  .text-box-number-label {
-    @include core-19;
-    float: left;
-    width: 1.6em;
-    margin: 6px -1.6em 0 0;
-    position: relative;
-    left: 10px;
-    color: $secondary-text-colour;
-    font-weight: bold;
-    pointer-events: none;
-  }
-
 }
diff --git a/app/assets/stylesheets/govuk-frontend/extensions.scss b/app/assets/stylesheets/govuk-frontend/extensions.scss
index 8197b34ad..9b37b3789 100644
--- a/app/assets/stylesheets/govuk-frontend/extensions.scss
+++ b/app/assets/stylesheets/govuk-frontend/extensions.scss
@@ -52,3 +52,32 @@ $govuk-grid-widths: (
 .govuk-input--width-6 {
   max-width: 14ex;
 }
+
+// extensions to govuk-input to allow numbering by label
+.govuk-input--numbered {
+  padding-left: 1.84em;
+
+  @include media(desktop) {
+    @include inline-block;
+  }
+}
+
+.govuk-input--numbered__label {
+  float: left;
+  width: 1.6em;
+  margin: 8px -1.6em 0 0;
+  position: relative;
+  left: 10px;
+  color: $govuk-secondary-text-colour;
+  font-weight: bold;
+  pointer-events: none;
+}
+
+.govuk-input--numbered__label--error {
+  position: absolute;
+  bottom: 10px;
+
+  @include govuk-media-query(desktop) {
+    bottom: 7px;
+  }
+}
diff --git a/app/main/forms.py b/app/main/forms.py
index ac46ec725..8c9dd43c9 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -546,15 +546,16 @@ class StripWhitespaceForm(Form):
             return bound
 
 
-class StripWhitespaceStringField(StringField):
-    def __init__(self, label=None, **kwargs):
+class StripWhitespaceStringField(GovukTextInputField):
+    def __init__(self, label=None, param_extensions=None, **kwargs):
         kwargs['filters'] = tuple(chain(
             kwargs.get('filters', ()),
             (
                 strip_whitespace,
             ),
         ))
-        super(StringField, self).__init__(label, **kwargs)
+        super(GovukTextInputField, self).__init__(label, **kwargs)
+        self.param_extensions = param_extensions
 
 
 class PostalAddressField(TextAreaField):
@@ -1701,7 +1702,7 @@ class PDFUploadForm(StripWhitespaceForm):
     )
 
 
-class EmailFieldInGuestList(EmailField, StripWhitespaceStringField):
+class EmailFieldInGuestList(GovukEmailField, StripWhitespaceStringField):
     pass
 
 
diff --git a/app/templates/components/list-entry.html b/app/templates/components/list-entry.html
index 56d2e7e54..375bd8838 100644
--- a/app/templates/components/list-entry.html
+++ b/app/templates/components/list-entry.html
@@ -1,3 +1,6 @@
+{% from "vendor/govuk-frontend/components/fieldset/macro.njk" import govukFieldset %}
+{% from "vendor/govuk-frontend/components/error-message/macro.njk" import govukErrorMessage %}
+
 {% macro list_entry(
   field,
   item_name,
@@ -5,45 +8,53 @@
   autocomplete=True
 ) %}
 
-  {% if error %}
-    <div class="validation-wrapper">
-  {% endif %}
-    <fieldset class="form-group{% if field.errors %} form-group-error{% endif %}" id="{{ field.name }}">
-      <legend>
-        <span class="form-label">
-          {{ field.label.text }}
-          {% if hint %}
-            <span class="form-hint">
-              {{ hint }}
-            </span>
-          {% endif %}
-          {% if field.errors %}
-            <span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0][0] }}" data-error-label="{{ field.name }}">
-              {{ field.errors[0][0] }}
-            </span>
-          {% endif %}
-        </label>
-      </legend>
-      <div class="input-list" data-module="list-entry" data-list-item-name="{{ item_name }}" id="list-entry-{{ field.name }}">
-        {% for index in range(0, field.entries|length) %}
-          <div class="list-entry">
-            <label for="input-{{ field.name }}-{{ index }}" class="text-box-number-label">
-              <span class="govuk-visually-hidden">{{ item_name }} number </span>{{ index + 1 }}.
-            </label>
-            <input
-              type="text"
-              name="{{ field.name }}-{{ index }}"
-              id="input-{{ field.name }}-{{ index }}"
-              class="form-control form-control-1-1"
-              value="{{ field.data[index] }}"
-              {% if not autocomplete %}autocomplete="off"{% endif %}
-            />
-          </div>
-        {% endfor %}
+  <div class="govuk-form-group">
+    {% if hint %}
+      {% set attributes = {"aria-describedby": field.name + '-hint'} %}
+    {% else %}
+      {% set attributes = {} %}
+    {% endif %}
+    {% call govukFieldset({
+        "legend": {
+          "text": field.label.text,
+          "isPageHeading": False
+        },
+        "attributes": attributes
+      })
+    %}
+    {% if hint %}
+      <div id="{{ field.name }}-hint" class="govuk-hint">
+        {{ hint }}
       </div>
-    </fieldset>
-  {% if error %}
+    {% endif %}
+    <div class="input-list" data-module="list-entry" data-list-item-name="{{ item_name }}" id="list-entry-{{ field.name }}">
+      {% for entry in field.entries %}
+        <div class="list-entry">
+          {% if not autocomplete %}
+            {% set autocomplete = "off" %}
+          {% else %}
+            {% set autocomplete = "" %}
+          {% endif %}
+          {% if entry.errors %}
+            {% set label_classes = "govuk-input--numbered__label govuk-input--numbered__label--error" %}
+          {% else %}
+            {% set label_classes = "govuk-input--numbered__label" %}
+          {% endif %}
+          {% set field_name = field.name + "-" + loop.index|string %}
+          {{ entry(param_extensions={
+            "id": "input-" + field_name,
+            "name": field_name,
+            "label": {
+              "html": '<span class="govuk-visually-hidden">' + item_name + ' number </span>' + loop.index|string + '.',
+              "classes": label_classes
+            },
+            "classes": "govuk-input--numbered govuk-!-width-full",
+            "value": field.data[loop.index0],
+            "autocomplete": autocomplete
+          }) }}
+        </div>
+      {% endfor %}
     </div>
-  {% endif %}
+  {% endcall %}
 
 {% endmacro %}
diff --git a/tests/app/main/views/organisations/test_organisation.py b/tests/app/main/views/organisations/test_organisation.py
index 9457c2f61..4aff7ba3a 100644
--- a/tests/app/main/views/organisations/test_organisation.py
+++ b/tests/app/main/views/organisations/test_organisation.py
@@ -902,27 +902,27 @@ def test_view_organisation_domains(
         org_id=ORGANISATION_ID,
     )
 
-    assert [textbox['value'] for textbox in page.select('input[type=text]')] == [
+    assert [textbox.get('value') for textbox in page.select('input[type=text]')] == [
         'example.gov.uk',
         'test.example.gov.uk',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
+        None,
     ]
 
 
diff --git a/tests/app/main/views/test_api_integration.py b/tests/app/main/views/test_api_integration.py
index c3ecce6c4..17a9a361d 100644
--- a/tests/app/main/views/test_api_integration.py
+++ b/tests/app/main/views/test_api_integration.py
@@ -412,7 +412,7 @@ def test_route_invalid_permissions(
             service_one)
 
 
-def test_should_show_whitelist_page(
+def test_should_show_guestlist_page(
     client_request,
     mock_login,
     api_user_active,
@@ -424,14 +424,14 @@ def test_should_show_whitelist_page(
         'main.guest_list',
         service_id=SERVICE_ONE_ID,
     )
-    textboxes = page.find_all('input', {'type': 'text'})
+    textboxes = page.find_all('input', {'class': 'govuk-input'})
     for index, value in enumerate(
-        ['test@example.com'] + [''] * 4 + ['07900900000'] + [''] * 4
+        ['test@example.com'] + [None] * 4 + ['07900900000'] + [None] * 4
     ):
-        assert textboxes[index]['value'] == value
+        assert textboxes[index].get('value') == value
 
 
-def test_should_update_whitelist(
+def test_should_update_guestlist(
     client_request,
     mock_update_guest_list,
 ):
@@ -453,7 +453,7 @@ def test_should_update_whitelist(
         'phone_numbers': ['07900900000', '+1800-555-555']})
 
 
-def test_should_validate_whitelist_items(
+def test_should_validate_guestlist_items(
     client_request,
     mock_update_guest_list,
 ):
diff --git a/tests/javascripts/listEntry.test.js b/tests/javascripts/listEntry.test.js
index 03f18e737..3ebfbb5a0 100644
--- a/tests/javascripts/listEntry.test.js
+++ b/tests/javascripts/listEntry.test.js
@@ -49,10 +49,12 @@ describe("List entry", () => {
       for (let idx = 0; idx < 10; idx++) {
         result += `
             <div class="list-entry">
-              <label for="input-domains-${idx}" class="text-box-number-label">
-                <span class="visuallyhidden">domain number </span>${idx + 1}.
-              </label>
-              <input type="text" name="domains-${idx}" id="input-domains-${idx}" class="form-control form-control-1-1" value="" autocomplete="off">
+              <div class="govuk-form-group">
+                <label for="domains-${idx + 1}" class="govuk-label govuk-input--numbered__label">
+                  <span class="govuk-visually-hidden">domain number </span>${idx + 1}.
+                </label>
+                <input type="text" name="domains-${idx + 1}" id="domains-${idx + 1}" class="govuk-input govuk-input--numbered govuk-!-width-full" autocomplete="off">
+              </div>
             </div>`;
       }
 
@@ -60,15 +62,14 @@ describe("List entry", () => {
     };
 
     document.body.innerHTML =
-      `<fieldset class="form-group" id="domains">
-        <legend>
-          <span class="form-label">
-            Domain names
-            <span class="form-hint">
-              For example cabinet-office.gov.uk
-            </span>
+      `<fieldset class="govuk-form-group" aria-describedby="domains-hint">
+        <legend class="govuk-fieldset__legend">
+          Domain names
           </span>
         </legend>
+        <span id="domains-hint" class="govuk-hint">
+          For example cabinet-office.gov.uk
+        </span>
         <div class="input-list" data-module="list-entry" data-list-item-name="domain" id="list-entry-domains">
           ${entries()} }
         </div>
@@ -180,6 +181,31 @@ describe("List entry", () => {
 
     });
 
+    test("Should copy all unique attributes into the new fields", () => {
+      name_value_pairs = [];
+
+      inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
+
+        name_value_pairs.push({
+          'name': field.getAttribute('name'),
+          'value': field.getAttribute('value')
+        });
+
+      });
+
+      // start module
+      window.GOVUK.modules.start();
+
+      // re-select fields, based on updated DOM
+      fields = inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
+
+        expect(field.getAttribute('name')).toEqual(name_value_pairs[idx].name);
+        expect(field.getAttribute('value')).toEqual(name_value_pairs[idx].value);
+
+      });
+
+    });
+
     test("Should copy all shared attributes into the new fields", () => {
 
       inputList.querySelectorAll('.list-entry input[type=text]').forEach((field, idx) => {
@@ -223,7 +249,7 @@ describe("List entry", () => {
       triggerEvent(inputList.querySelectorAll('.input-list__button--remove')[0], 'click');
 
       const newNums = Array.from(
-                        inputList.querySelectorAll('.text-box-number-label')
+                        inputList.querySelectorAll('.govuk-input--numbered__label')
                       )
                       .map((itemNum, idx) => {
                         return parseInt(itemNum.lastChild.nodeValue, 10);