diff --git a/app/javascript/controllers/number_question_controller.js b/app/javascript/controllers/number_question_controller.js
new file mode 100644
index 000000000..479aa5e32
--- /dev/null
+++ b/app/javascript/controllers/number_question_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  calculateFields() {
+    const affectedField = this.element.dataset.affected;
+    const fieldsToAdd = JSON.parse(this.element.dataset.calculated).map(x => `${x.replaceAll("_","-")}-field`);
+    const valuesToAdd = fieldsToAdd.map(x => document.getElementById(x).value).filter(x => x);
+    const newValue =  valuesToAdd.map(x => parseInt(x)).reduce((a, b) => a + b, 0);
+    const elementToUpdate = document.getElementById(affectedField);
+    elementToUpdate.value = newValue;
+  }
+}
diff --git a/app/views/form/_numeric_question.html.erb b/app/views/form/_numeric_question.html.erb
index b001f7467..f05f4a16f 100644
--- a/app/views/form/_numeric_question.html.erb
+++ b/app/views/form/_numeric_question.html.erb
@@ -2,5 +2,9 @@
     hint: { text: question["hint_text"] },
     label: { text: question["header"].html_safe, size: "l"},
     min: question["min"], max: question["max"], step: question["step"],
-    width: 20, :readonly => question["readonly"]
+    width: 20, :readonly => question["readonly"],
+    :"data-controller" => "number-question",
+    :"data-action"=> "number-question#calculateFields",
+    :"data-affected" => "#{question["result-field"].to_s.dasherize}-field",
+    :"data-calculated" => question["fields-to-add"].to_json
 %>
diff --git a/config/forms/2021_2022.json b/config/forms/2021_2022.json
index d1639e250..a5b3072ce 100644
--- a/config/forms/2021_2022.json
+++ b/config/forms/2021_2022.json
@@ -1144,7 +1144,9 @@
                   "hint_text": "Eligible for housing benefit or Universal Credit",
                   "type": "numeric",
                   "min": 0,
-                  "step": 1
+                  "step": 1,
+                  "fields-to-add": ["basic_rent", "service_charge", "personal_service_charge", "support_charge"],
+                  "result-field": "total_charge"
                 },
                 "service_charge": {
                   "check_answer_label": "Service Charge",
@@ -1152,7 +1154,9 @@
                   "hint_text": "Eligible for housing benefit or Universal Credit",
                   "type": "numeric",
                   "min": 0,
-                  "step": 1
+                  "step": 1,
+                  "fields-to-add": ["basic_rent", "service_charge", "personal_service_charge", "support_charge"],
+                  "result-field": "total_charge"
                 },
                 "personal_service_charge": {
                   "check_answer_label": "Personal Service Charge",
@@ -1160,7 +1164,9 @@
                   "hint_text": "Not eligible for housing benefit or Universal Credit. For example, hot water excluding water rates.",
                   "type": "numeric",
                   "min": 0,
-                  "step": 1
+                  "step": 1,
+                  "fields-to-add": ["basic_rent", "service_charge", "personal_service_charge", "support_charge"],
+                  "result-field": "total_charge"
                 },
                 "support_charge": {
                   "check_answer_label": "Support Charge",
@@ -1168,7 +1174,9 @@
                   "hint_text": "This is to fund housing-related support services included in the tenancy agreement",
                   "type": "numeric",
                   "min": 0,
-                  "step": 1
+                  "step": 1,
+                  "fields-to-add": ["basic_rent", "service_charge", "personal_service_charge", "support_charge"],
+                  "result-field": "total_charge"
                 },
                 "total_charge": {
                   "check_answer_label": "Total Charge",
diff --git a/spec/features/case_log_spec.rb b/spec/features/case_log_spec.rb
index 5faab619f..ddd14ae5f 100644
--- a/spec/features/case_log_spec.rb
+++ b/spec/features/case_log_spec.rb
@@ -114,6 +114,23 @@ RSpec.describe "Test Features" do
           }.from(original_value).to(answer)
         end
       end
+
+      it "updates total value of the rent", js: true do
+        visit("/case_logs/#{id}/rent")
+
+        fill_in("basic_rent", with: 3)
+        expect(page).to have_field("total-charge-field", with: "3")
+
+        fill_in("service_charge", with: 2)
+        expect(page).to have_field("total-charge-field", with: "5")
+
+        fill_in("personal_service_charge", with: 1)
+        expect(page).to have_field("total-charge-field", with: "6")
+
+        fill_in("support_charge", with: 4)
+        expect(page).to have_field("total-charge-field", with: "10")
+      end
+
     end
 
     describe "Back link directs correctly" do