diff --git a/app/assets/javascripts/previewPane.js b/app/assets/javascripts/previewPane.js
index 6f376dd51..2dac47421 100644
--- a/app/assets/javascripts/previewPane.js
+++ b/app/assets/javascripts/previewPane.js
@@ -10,7 +10,7 @@
 
   branding_style = branding_style.val();
 
-  const $paneWrapper = $('<div class="column-full"></div>');
+  const $paneWrapper = $('<div class="govuk-grid-column-full"></div>');
   const $form = $('form');
   const previewType = $form.data('previewType');
   const $previewPane = $(`<iframe src="/_${previewType}?${buildQueryString(['branding_style', branding_style])}" class="branding-preview"></iframe>`);
diff --git a/app/templates/views/organisations/organisation/settings/preview-email-branding.html b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
index ab303e6f6..4e6186831 100644
--- a/app/templates/views/organisations/organisation/settings/preview-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-email-branding.html
@@ -10,7 +10,7 @@
 
   <h1 class="heading-large">Preview email branding</h1>
   <div class="govuk-grid-row">
-    <div class="column-full">
+    <div class="govuk-grid-column-full">
       <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group">
diff --git a/app/templates/views/organisations/organisation/settings/preview-letter-branding.html b/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
index d7c2e03f2..3b0504596 100644
--- a/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
+++ b/app/templates/views/organisations/organisation/settings/preview-letter-branding.html
@@ -9,7 +9,7 @@
 
   <h1 class="heading-large">Preview letter branding</h1>
   <div class="govuk-grid-row">
-    <div class="column-full">
+    <div class="govuk-grid-column-full">
       <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group">
diff --git a/app/templates/views/organisations/organisation/settings/set-email-branding.html b/app/templates/views/organisations/organisation/settings/set-email-branding.html
index aae66e3a1..f61b40fe6 100644
--- a/app/templates/views/organisations/organisation/settings/set-email-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-email-branding.html
@@ -17,11 +17,11 @@
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
     <div class="govuk-grid-row">
-      <div class="column-full preview-pane">
+      <div class="govuk-grid-column-full preview-pane">
       </div>
     </div>
     <div class="govuk-grid-row">
-      <div class="column-full">
+      <div class="govuk-grid-column-full">
         {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search branding styles by name') }}
         {{ radios(form.branding_style) }}
       </div>
diff --git a/app/templates/views/organisations/organisation/settings/set-letter-branding.html b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
index aeb2e3ceb..f93673799 100644
--- a/app/templates/views/organisations/organisation/settings/set-letter-branding.html
+++ b/app/templates/views/organisations/organisation/settings/set-letter-branding.html
@@ -17,11 +17,11 @@
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
     <div class="govuk-grid-row">
-      <div class="column-full preview-pane">
+      <div class="govuk-grid-column-full preview-pane">
       </div>
     </div>
     <div class="govuk-grid-row">
-      <div class="column-full">
+      <div class="govuk-grid-column-full">
         {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
         {{ radios(form.branding_style, hide_legend=True) }}
       </div>
diff --git a/app/templates/views/service-settings/data-retention.html b/app/templates/views/service-settings/data-retention.html
index 04a0a4655..69635ed99 100644
--- a/app/templates/views/service-settings/data-retention.html
+++ b/app/templates/views/service-settings/data-retention.html
@@ -25,7 +25,7 @@
   </div>
   </div>
   <div class="govuk-grid-row bottom-gutter">
-      <div class="column-full">
+      <div class="govuk-grid-column-full">
           By default data is kept for 7 days
       </div>
   </div>
diff --git a/app/templates/views/service-settings/preview-email-branding.html b/app/templates/views/service-settings/preview-email-branding.html
index 641f23329..d0149947d 100644
--- a/app/templates/views/service-settings/preview-email-branding.html
+++ b/app/templates/views/service-settings/preview-email-branding.html
@@ -10,7 +10,7 @@
 
   <h1 class="heading-large">Preview email branding</h1>
   <div class="govuk-grid-row">
-    <div class="column-full">
+    <div class="govuk-grid-column-full">
       <iframe src="{{ url_for('main.email_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group">
diff --git a/app/templates/views/service-settings/preview-letter-branding.html b/app/templates/views/service-settings/preview-letter-branding.html
index f4da0f8e1..a65d6c432 100644
--- a/app/templates/views/service-settings/preview-letter-branding.html
+++ b/app/templates/views/service-settings/preview-letter-branding.html
@@ -10,7 +10,7 @@
 
   <h1 class="heading-large">Preview letter branding</h1>
   <div class="govuk-grid-row">
-    <div class="column-full">
+    <div class="govuk-grid-column-full">
       <iframe src="{{ url_for('main.letter_template', branding_style=form.branding_style.data) }}" class="branding-preview"></iframe>
       {% call form_wrapper(action=action) %}
         <div class="form-group">
diff --git a/app/templates/views/service-settings/set-email-branding.html b/app/templates/views/service-settings/set-email-branding.html
index 367ba8d9b..4de59364d 100644
--- a/app/templates/views/service-settings/set-email-branding.html
+++ b/app/templates/views/service-settings/set-email-branding.html
@@ -17,11 +17,11 @@
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'email'}) %}
     <div class="govuk-grid-row">
-      <div class="column-full preview-pane">
+      <div class="govuk-grid-column-full preview-pane">
       </div>
     </div>
     <div class="govuk-grid-row">
-      <div class="column-full">
+      <div class="govuk-grid-column-full">
         {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search branding styles by name') }}
         {{ radios(form.branding_style) }}
       </div>
diff --git a/app/templates/views/service-settings/set-letter-branding.html b/app/templates/views/service-settings/set-letter-branding.html
index f64239261..455dcad65 100644
--- a/app/templates/views/service-settings/set-letter-branding.html
+++ b/app/templates/views/service-settings/set-letter-branding.html
@@ -17,11 +17,11 @@
   ) }}
   {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
     <div class="govuk-grid-row">
-      <div class="column-full preview-pane">
+      <div class="govuk-grid-column-full preview-pane">
       </div>
     </div>
     <div class="govuk-grid-row">
-      <div class="column-full">
+      <div class="govuk-grid-column-full">
         {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
         {{ radios(form.branding_style, hide_legend=True) }}
       </div>
diff --git a/tests/javascripts/previewPane.test.js b/tests/javascripts/previewPane.test.js
index f2c8ea590..f6cccc34c 100644
--- a/tests/javascripts/previewPane.test.js
+++ b/tests/javascripts/previewPane.test.js
@@ -63,7 +63,7 @@ describe('Preview pane', () => {
       `<form method="post" action="${emailPageURL}" autocomplete="off" data-preview-type="email" novalidate>
         <div class="govuk-grid-row"></div>
         <div class="govuk-grid-row">
-          <div class="column-full">
+          <div class="govuk-grid-column-full">
             <div data-module="autofocus">
               <div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice">
                 <div class="form-group">
@@ -81,7 +81,7 @@ describe('Preview pane', () => {
         </div>
       </form>`;
 
-    document.querySelector('.column-full').appendChild(helpers.getRadioGroup(brands));
+    document.querySelector('.govuk-grid-column-full').appendChild(helpers.getRadioGroup(brands));
     form = document.querySelector('form');
     radios = form.querySelector('fieldset');