diff --git a/app/models/form/question.rb b/app/models/form/question.rb
index 4282e0f21..1ed53b2de 100644
--- a/app/models/form/question.rb
+++ b/app/models/form/question.rb
@@ -3,7 +3,7 @@ class Form::Question
                 :type, :min, :max, :step, :width, :fields_to_add, :result_field,
                 :conditional_for, :readonly, :answer_options, :page, :check_answer_label,
                 :inferred_answers, :hidden_in_check_answers, :inferred_check_answers_value,
-                :guidance_partial, :prefix, :suffix, :requires_js
+                :guidance_partial, :prefix, :suffix, :requires_js, :fields_added
 
   def initialize(id, hsh, page)
     @id = id
@@ -27,6 +27,7 @@ class Form::Question
     @prefix = hsh["prefix"]
     @suffix = hsh["suffix"]
     @requires_js = hsh["requires_js"]
+    @fields_added = hsh["fields_added"]
     @page = page
   end
 
diff --git a/app/views/form/_numeric_output_question.html.erb b/app/views/form/_numeric_output_question.html.erb
new file mode 100644
index 000000000..01527be09
--- /dev/null
+++ b/app/views/form/_numeric_output_question.html.erb
@@ -0,0 +1,22 @@
+<%= render partial: "form/guidance/#{question.guidance_partial}" if question.guidance_partial %>
+
+<div class="govuk-form-group">
+  <label class="govuk-label govuk-label--<%= label_size(page_header, conditional) %>" for="case-log-<%= question.id %>-field">
+    <%= question.header.html_safe %>
+  </label>
+  <div class="govuk-hint">
+    <%= question.hint_text %>
+  </div>
+  <div class="govuk-input__wrapper">
+    <span class="govuk-input__prefix"><%= question.prefix %></span>
+    <output id="case-log-<%= question.id %>-field"
+            class="govuk-input govuk-input--width-<%= question.width %> app-input--output"
+            min="<%= question.min %>"
+            step="<%= question.step %>"
+            type="number"
+            name="case_log[tcharge]"
+            for="<%= question.fields_added.present? ? question.fields_added.map { |x| "case-log-#{x}-field"}.join(" ") : "" %>">
+      <%= case_log[question.id] %></output>
+    <span class="govuk-input__suffix"><%= question.suffix %></span>
+  </div>
+</div>
diff --git a/app/views/form/page.html.erb b/app/views/form/page.html.erb
index 8961f2edc..29c784b43 100644
--- a/app/views/form/page.html.erb
+++ b/app/views/form/page.html.erb
@@ -37,7 +37,7 @@
             <% if question.read_only? %>
               <hr class="govuk-section-break govuk-section-break--visible govuk-section-break--m">
             <% end %>
-            <%= render partial: "form/#{question.type}_question", locals: { question: question, caption_text: @subsection.label, page_header: @page.header, f: f, conditional: false } %>
+            <%= render partial: "form/#{question.type}_question", locals: { question: question, caption_text: @subsection.label, page_header: @page.header, case_log: @case_log, f: f, conditional: false } %>
           </div>
         <% end %>
 
diff --git a/app/webpacker/styles/_input.scss b/app/webpacker/styles/_input.scss
new file mode 100644
index 000000000..0e88983e6
--- /dev/null
+++ b/app/webpacker/styles/_input.scss
@@ -0,0 +1,3 @@
+.app-input--output {
+  background-color: #f3f2f1;
+}
diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss
index 551101152..d1079a7d5 100644
--- a/app/webpacker/styles/application.scss
+++ b/app/webpacker/styles/application.scss
@@ -15,6 +15,7 @@ $govuk-image-url-function: frontend-image-url;
 @import 'task-list';
 @import 'tab-navigation';
 @import 'accessible-autocomplete';
+@import "input";
 
 $govuk-global-styles: true;
 
diff --git a/config/forms/2021_2022.json b/config/forms/2021_2022.json
index d66d94974..e0ea5b7b2 100644
--- a/config/forms/2021_2022.json
+++ b/config/forms/2021_2022.json
@@ -2778,14 +2778,15 @@
                   "check_answer_label": "Household rent and charges",
                   "header": "Total charge",
                   "hint_text": "This is the total for rent and all charges.",
-                  "type": "numeric",
+                  "type": "numeric_output",
                   "min": 0,
                   "step": 1,
                   "width": 5,
                   "prefix": "£",
                   "suffix": " every week",
                   "readonly": true,
-                  "requires_js": true
+                  "requires_js": true,
+                  "fields_added": ["brent", "scharge", "pscharge", "supcharg"]
                 }
               },
               "depends_on" : [{
@@ -2952,14 +2953,15 @@
                   "check_answer_label": "Household rent and charges",
                   "header": "Total charge",
                   "hint_text": "This is the total for rent and all charges.",
-                  "type": "numeric",
+                  "type": "numeric_output",
                   "min": 0,
                   "step": 1,
                   "width": 5,
                   "prefix": "£",
                   "suffix": " every 2 weeks",
                   "readonly": true,
-                  "requires_js": true
+                  "requires_js": true,
+                  "fields_added": ["brent", "scharge", "pscharge", "supcharg"]
                 }
               },
               "depends_on" : [{
@@ -3045,14 +3047,15 @@
                   "check_answer_label": "Household rent and charges",
                   "header": "Total charge",
                   "hint_text": "This is the total for rent and all charges.",
-                  "type": "numeric",
+                  "type": "numeric_output",
                   "min": 0,
                   "step": 1,
                   "width": 5,
                   "prefix": "£",
                   "suffix": " every 4 weeks",
                   "readonly": true,
-                  "requires_js": true
+                  "requires_js": true,
+                  "fields_added": ["brent", "scharge", "pscharge", "supcharg"]
                 }
               },
               "depends_on" : [{
@@ -3138,14 +3141,15 @@
                   "check_answer_label": "Household rent and charges",
                   "header": "Total charge",
                   "hint_text": "This is the total for rent and all charges.",
-                  "type": "numeric",
+                  "type": "numeric_output",
                   "min": 0,
                   "step": 1,
                   "width": 5,
                   "prefix": "£",
                   "suffix": " every month",
                   "readonly": true,
-                  "requires_js": true
+                  "requires_js": true,
+                  "fields_added": ["brent", "scharge", "pscharge", "supcharg"]
                 }
               },
               "depends_on" : [{
diff --git a/spec/features/form/saving_data_spec.rb b/spec/features/form/saving_data_spec.rb
index 2c27dfda3..b803a14b3 100644
--- a/spec/features/form/saving_data_spec.rb
+++ b/spec/features/form/saving_data_spec.rb
@@ -61,16 +61,16 @@ RSpec.describe "Form Saving Data" do
     visit("/logs/#{id}/rent")
 
     fill_in("case-log-brent-field", with: 3.02)
-    expect(page).to have_field("case-log-tcharge-field", with: "3.02")
+    expect(page.find("#case-log-tcharge-field")).to have_content("3.02")
 
     fill_in("case-log-scharge-field", with: 2.8)
-    expect(page).to have_field("case-log-tcharge-field", with: "5.82")
+    expect(page.find("#case-log-tcharge-field")).to have_content("5.82")
 
     fill_in("case-log-pscharge-field", with: 1)
-    expect(page).to have_field("case-log-tcharge-field", with: "6.82")
+    expect(page.find("#case-log-tcharge-field")).to have_content("6.82")
 
     fill_in("case-log-supcharg-field", with: 4.11)
-    expect(page).to have_field("case-log-tcharge-field", with: "10.93")
+    expect(page.find("#case-log-tcharge-field")).to have_content("10.93")
   end
 
   it "displays number answers in inputs if they are already saved" do
diff --git a/spec/fixtures/forms/2021_2022.json b/spec/fixtures/forms/2021_2022.json
index 35dacfa62..490009f70 100644
--- a/spec/fixtures/forms/2021_2022.json
+++ b/spec/fixtures/forms/2021_2022.json
@@ -516,7 +516,7 @@
                     "check_answer_label": "Total Charge",
                     "header": "Total charge?",
                     "hint_text": "This is the total of rent and all charges",
-                    "type": "numeric",
+                    "type": "numeric_output",
                     "min": 0,
                     "step": 1,
                     "width": 4,