diff --git a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee
index e3191a17d1..2ce25ece47 100644
--- a/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee
+++ b/app/assets/javascripts/admin/enterprises/controllers/enterprise_controller.js.coffee
@@ -74,9 +74,6 @@ angular.module("admin.enterprises")
     $scope.removePromoImage = ->
       $scope.performEnterpriseAction("removePromoImage", "immediate_promo_image_removal_warning", "removed_promo_image_successfully")
 
-    $scope.removeTermsAndConditions = ->
-      $scope.performEnterpriseAction("removeTermsAndConditions", "immediate_terms_and_conditions_removal_warning", "removed_terms_and_conditions_successfully")
-
     $scope.performEnterpriseAction = (enterpriseActionName, warning_message_key, success_message_key) ->
       return unless confirm($scope.translation(warning_message_key))
 
diff --git a/app/assets/javascripts/admin/enterprises/directives/terms_and_conditions_warning.js.coffee b/app/assets/javascripts/admin/enterprises/directives/terms_and_conditions_warning.js.coffee
deleted file mode 100644
index 72a1df7393..0000000000
--- a/app/assets/javascripts/admin/enterprises/directives/terms_and_conditions_warning.js.coffee
+++ /dev/null
@@ -1,32 +0,0 @@
-angular.module("admin.enterprises").directive 'termsAndConditionsWarning', ($rootScope, $compile, $templateCache, DialogDefaults, $timeout) ->
-  restrict: 'A'
-  scope: true
-
-  link: (scope, element, attr) ->
-    # This file input click handler will hold the browser file input dialog and show a warning modal
-    scope.hold_file_input_and_show_warning_modal = (event) ->
-      event.preventDefault()
-      scope.template = $compile($templateCache.get('admin/modals/terms_and_conditions_warning.html'))(scope)
-      if scope.template.dialog
-        scope.template.dialog(DialogDefaults)
-        scope.template.dialog('open')
-      $rootScope.$evalAsync()
-
-    element.bind 'click', scope.hold_file_input_and_show_warning_modal
-
-    # When the user presses continue in the warning modal, we open the browser file input dialog
-    scope.continue = ->
-      scope.template.dialog('close')
-      $rootScope.$evalAsync()
-
-      # unbind warning modal handler and click file input again to open the browser file input dialog
-      element.unbind('click').trigger('click')
-      # afterwards, bind warning modal handler again so that the warning is shown the next time
-      $timeout ->
-        element.bind 'click', scope.hold_file_input_and_show_warning_modal
-      return
-
-    scope.close = ->
-      scope.template.dialog('close')
-      $rootScope.$evalAsync()
-      return
diff --git a/app/assets/javascripts/admin/resources/resources/enterprise_resource.js.coffee b/app/assets/javascripts/admin/resources/resources/enterprise_resource.js.coffee
index f3d2128e20..383f6b100f 100644
--- a/app/assets/javascripts/admin/resources/resources/enterprise_resource.js.coffee
+++ b/app/assets/javascripts/admin/resources/resources/enterprise_resource.js.coffee
@@ -14,7 +14,4 @@ angular.module("admin.resources").factory 'EnterpriseResource', ($resource) ->
     'removePromoImage':
       url: '/api/v0/enterprises/:id/promo_image.json'
       method: 'DELETE'
-    'removeTermsAndConditions':
-      url: '/api/v0/enterprises/:id/terms_and_conditions.json'
-      method: 'DELETE'
   })
diff --git a/app/assets/javascripts/admin/resources/services/enterprises.js.coffee b/app/assets/javascripts/admin/resources/services/enterprises.js.coffee
index 7adb4c33f7..19c7714973 100644
--- a/app/assets/javascripts/admin/resources/services/enterprises.js.coffee
+++ b/app/assets/javascripts/admin/resources/services/enterprises.js.coffee
@@ -63,4 +63,3 @@ angular.module("admin.resources").factory 'Enterprises', ($q, $filter, Enterpris
 
     removeLogo: performActionOnEnterpriseResource(EnterpriseResource.removeLogo)
     removePromoImage: performActionOnEnterpriseResource(EnterpriseResource.removePromoImage)
-    removeTermsAndConditions: performActionOnEnterpriseResource(EnterpriseResource.removeTermsAndConditions)
diff --git a/app/assets/javascripts/templates/admin/modals/terms_and_conditions_warning.html.haml b/app/assets/javascripts/templates/admin/modals/terms_and_conditions_warning.html.haml
deleted file mode 100644
index 13eed6fe85..0000000000
--- a/app/assets/javascripts/templates/admin/modals/terms_and_conditions_warning.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-%div
-  .margin-bottom-30.text-center
-    .text-big
-      {{ 'js.admin.modals.terms_and_conditions_warning.title' | t }}
-  .margin-bottom-30
-    %p
-      {{ 'js.admin.modals.terms_and_conditions_warning.message_1' | t }}
-  .margin-bottom-30
-    %p
-      {{ 'js.admin.modals.terms_and_conditions_warning.message_2' | t }}
-
-  .text-center
-    %input.button.red{ type: 'button', value: t('js.admin.modals.close'), ng: { click: 'close()' } }
-    %input.button.red{ type: 'button', value: t('js.admin.modals.continue'), ng: { click: 'continue()' } }
diff --git a/app/reflexes/enterprise_edit_reflex.rb b/app/reflexes/enterprise_edit_reflex.rb
new file mode 100644
index 0000000000..15fe5a68b1
--- /dev/null
+++ b/app/reflexes/enterprise_edit_reflex.rb
@@ -0,0 +1,12 @@
+# frozen_string_literal: false
+
+class EnterpriseEditReflex < ApplicationReflex
+  delegate :current_user, to: :connection
+
+  def remove_terms_and_conditions
+    @enterprise = Enterprise.find(element.dataset['enterprise-id'])
+    ability = Spree::Ability.new(current_user).can? :remove_terms_and_conditions, @enterprise
+    throw :forbidden unless ability
+    @enterprise.terms_and_conditions.purge_later
+  end
+end
diff --git a/app/views/admin/enterprises/form/_business_details.html.haml b/app/views/admin/enterprises/form/_business_details.html.haml
index b39773b5ad..abd2a4f594 100644
--- a/app/views/admin/enterprises/form/_business_details.html.haml
+++ b/app/views/admin/enterprises/form/_business_details.html.haml
@@ -31,23 +31,42 @@
     = f.label :invoice_text, t('.invoice_text')
   .omega.eight.columns
     = f.text_area :invoice_text, style: "width: 100%; height: 100px;"
-
-.row
+.row{ data: { controller: 'terms-and-conditions', "terms-and-conditions-message-value": t('js.admin.enterprises.form.images.immediate_terms_and_conditions_removal_warning') } }
   .alpha.three.columns
     = f.label :terms_and_conditions, t('.terms_and_conditions')
     %i.text-big.icon-question-sign{ "data-controller": "help-modal-link", "data-action": "click->help-modal-link#open", "data-help-modal-link-target-value": "terms_and_conditions_info_modal" }
 
-  .omega.eight.columns
-    %a{ href: '{{ Enterprise.terms_and_conditions }}', target: '_blank', ng: { if: 'Enterprise.terms_and_conditions' } }
-      = '{{ Enterprise.terms_and_conditions_file_name }}'
-      = t('.uploaded_on')
-      = '{{ Enterprise.terms_and_conditions_updated_at }}'
+  .omega.eight.columns#terms_and_conditions{data: { 'reflex-root': '#terms_and_conditions' } }
+    - if @enterprise.terms_and_conditions.attached?
+      = link_to "#{@enterprise.terms_and_conditions.blob.filename} #{ t('.uploaded_on') } #{@enterprise.terms_and_conditions.blob.created_at}", url_for(@enterprise.terms_and_conditions), target: '_blank'
+
+    %div
+      .button.small{ data: { controller: 'help-modal-link', action: 'click->help-modal-link#open', "help-modal-link-target-value": "terms_and_conditions_warning_modal" } }
+        = t('.upload')
+      %span{ data: { "terms-and-conditions-target": "filename" } }
+      = f.file_field :terms_and_conditions, accept: 'application/pdf', style: 'display: none;', data: { "terms-and-conditions-target": "fileinput" }
+      
     .pad-top
-      = f.file_field :terms_and_conditions, accept: 'application/pdf', 'terms-and-conditions-warning' => 'true'
-    .pad-top
-      %a.button.red{ href: '', ng: {click: 'removeTermsAndConditions()', if: 'Enterprise.terms_and_conditions'} }
+    - if @enterprise.terms_and_conditions.attached?
+      %a.button.red{ href: '#', data: {  action: 'click->terms-and-conditions#remove', "terms-and-conditions-message-value": t('js.admin.enterprises.form.images.immediate_terms_and_conditions_removal_warning'), 'enterprise-id': @enterprise.id}}
         = t('.remove_terms_and_conditions')
 
+  = render HelpModalComponent.new(id: "terms_and_conditions_warning_modal", close_button: false ) do
+    %div
+      .margin-bottom-30.text-center
+        .text-big{ style: 'color: red'}
+          = t('js.admin.modals.terms_and_conditions_warning.title')
+      .margin-bottom-30
+        %p
+          = t('js.admin.modals.terms_and_conditions_warning.message_1')
+      .margin-bottom-30
+        %p
+          = t('js.admin.modals.terms_and_conditions_warning.message_2')
+
+      .text-center
+        %input.button.red{ type: 'button', value: t('js.admin.modals.close'), "data-action": "click->help-modal#close"}
+        %input.button.red{ type: 'button', value: t('js.admin.modals.continue'), "data-action": "click->help-modal#close click->terms-and-conditions#add" }
+
 
 = f.fields_for :business_address, @enterprise.business_address || @enterprise.build_business_address do |bf|
   %fieldset.alpha.no-border-bottom
@@ -63,13 +82,12 @@
     %legend= t('.invoice_item_sorting_legend')
   .three.columns.alpha
     %label= t('.sort_items_by_supplier?')
-    %div{'ofn-with-tip' => t('.sort_items_by_supplier_tip')}
-      %a= t 'admin.whats_this'
+    = render partial: 'admin/shared/tooltip', locals: {tooltip_text: t('.sort_items_by_supplier_tip')}
   .three.columns
-    = f.radio_button :preferred_invoice_order_by_supplier, true, 'ng-model' => 'Enterprise.preferred_invoice_order_by_supplier', 'ng-value' => 'true'
+    = f.radio_button :preferred_invoice_order_by_supplier, true
     = f.label :preffered_invoice_order_by_supplier, t('.enabled'), value: :true
   .five.columns.omega
-    = f.radio_button :preferred_invoice_order_by_supplier, false, 'ng-model' => 'Enterprise.preferred_invoice_order_by_supplier', 'ng-value' => 'false'
+    = f.radio_button :preferred_invoice_order_by_supplier, false
     = f.label :preferred_invoice_order_by_name, t('.disabled'), value: :false
 
 = render HelpModalComponent.new(id: "terms_and_conditions_info_modal") do
diff --git a/app/webpacker/controllers/terms_and_conditions_controller.js b/app/webpacker/controllers/terms_and_conditions_controller.js
new file mode 100644
index 0000000000..a98e0faa83
--- /dev/null
+++ b/app/webpacker/controllers/terms_and_conditions_controller.js
@@ -0,0 +1,30 @@
+import ApplicationController from "./application_controller";
+
+export default class extends ApplicationController {
+  static targets = ["filename", "fileinput"];
+  static values = {
+    message: String,
+  };
+
+  connect() {
+    super.connect();
+    this.fileinputTarget.addEventListener("change", (event) => {
+      this.filenameTarget.innerText = event.target.files[0].name;
+    });
+  }
+
+  remove(event) {
+    let confirmation = confirm(this.messageValue);
+    if (confirmation) {
+      location.hash = "";
+      this.stimulate(
+        "EnterpriseEdit#remove_terms_and_conditions",
+        event.target
+      );
+    }
+  }
+
+  add() {
+    this.fileinputTarget.click();
+  }
+}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 761411574e..9c6294d884 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -936,6 +936,7 @@ en:
           legend: "Address"
         business_details:
           legend: "Business Details"
+          upload: 'upload'
           abn: ABN
           abn_placeholder: eg. 99 123 456 789
           acn: ACN
diff --git a/spec/javascripts/unit/admin/enterprises/directives/terms_and_conditions_warning_spec.js.coffee b/spec/javascripts/unit/admin/enterprises/directives/terms_and_conditions_warning_spec.js.coffee
deleted file mode 100644
index b7647024e2..0000000000
--- a/spec/javascripts/unit/admin/enterprises/directives/terms_and_conditions_warning_spec.js.coffee
+++ /dev/null
@@ -1,18 +0,0 @@
-describe "termsAndConditionsWarning", ->
-  element = null
-  templatecache = null
-
-  beforeEach ->
-    module('admin.enterprises')
-
-    inject ($rootScope, $compile, $templateCache) ->
-      templatecache = $templateCache
-      el = angular.element("<input terms-and-conditions-warning=\"true\"></input>")
-      element = $compile(el)($rootScope)
-      $rootScope.$digest()
-
-  describe "terms and conditions warning", ->
-    it "should load template", ->
-      spyOn(templatecache, 'get')
-      element.triggerHandler('click');
-      expect(templatecache.get).toHaveBeenCalledWith('admin/modals/terms_and_conditions_warning.html')
diff --git a/spec/system/admin/enterprises/terms_and_conditions_spec.rb b/spec/system/admin/enterprises/terms_and_conditions_spec.rb
index 385c0f079d..7599259688 100644
--- a/spec/system/admin/enterprises/terms_and_conditions_spec.rb
+++ b/spec/system/admin/enterprises/terms_and_conditions_spec.rb
@@ -31,7 +31,7 @@ describe "Uploading Terms and Conditions PDF" do
         go_to_business_details
 
         # Add PDF
-        attach_file "enterprise[terms_and_conditions]", original_terms
+        attach_file "enterprise[terms_and_conditions]", original_terms, make_visible: true
 
         time = Time.zone.local(2002, 4, 13, 0, 0, 0)
         Timecop.freeze(run_time = time) do
@@ -46,7 +46,7 @@ describe "Uploading Terms and Conditions PDF" do
         expect(page).to have_content time.strftime("%F %T")
 
         # Replace PDF
-        attach_file "enterprise[terms_and_conditions]", updated_terms
+        attach_file "enterprise[terms_and_conditions]", updated_terms, make_visible: true
         click_button "Update"
         expect(page).
           to have_content "Enterprise \"#{distributor.name}\" has been successfully updated!"