diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js
index c65379d59..fe20c1a79 100644
--- a/app/assets/javascripts/fileUpload.js
+++ b/app/assets/javascripts/fileUpload.js
@@ -6,13 +6,17 @@
     this.submit = () => this.$form.trigger('submit');
 
     this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
-      <a href="" class='file-upload-button-cancel'>Cancel upload</a>
+      <a href="" class='govuk-button govuk-button--warning govuk-!-margin-right-1'>Cancel upload</a>
     `);
 
     this.start = function(component) {
 
       this.$form = $(component);
 
+      // The label gets styled like a button and is used to hide the native file upload control. This is so that
+      // users see a button that looks like the others on the site.
+      this.$form.find('label.file-upload-button').addClass('govuk-button govuk-!-margin-right-1');
+
       // Clear the form if the user navigates back to the page
       $(window).on("pageshow", () => this.$form[0].reset());
 
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index c4d5b89c8..35adb510e 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -28,18 +28,6 @@
 
     }
 
-    &-button {
-      @include button($button-colour);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
-    &-button-cancel {
-      @include button($error-colour);
-      display: inline-block;
-      margin-right: 5px;
-    }
-
     &-filename {
       @include bold-19;
       display: inline-block;
diff --git a/app/templates/components/file-upload.html b/app/templates/components/file-upload.html
index edadbc3be..647629248 100644
--- a/app/templates/components/file-upload.html
+++ b/app/templates/components/file-upload.html
@@ -1,3 +1,5 @@
+{% from "components/button/macro.njk" import govukButton %}
+
 {% macro file_upload(
   field,
   action=None,
@@ -35,6 +37,6 @@
     {% endif %}
     <label class="file-upload-filename" for="{{ field.name }}"></label>
     <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-    <button type="submit" class="file-upload-submit">Submit</button>
+    {{ govukButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
   </form>
 {% endmacro %}
diff --git a/tests/javascripts/fileUpload.test.js b/tests/javascripts/fileUpload.test.js
index 0d8727c7c..224a9ea16 100644
--- a/tests/javascripts/fileUpload.test.js
+++ b/tests/javascripts/fileUpload.test.js
@@ -26,7 +26,7 @@ describe('File upload', () => {
           Upload logo
         </label>
         <label class="file-upload-filename" for="file"></label>
-        <button type="submit" class="file-upload-submit">Submit</button>
+        <button type="submit" class="govuk-button file-upload-submit">Submit</button>
       </form>`;
 
     form = document.querySelector('form');