diff --git a/js/components/forms/funding.js b/js/components/forms/funding.js
new file mode 100644
index 00000000..7311b8e5
--- /dev/null
+++ b/js/components/forms/funding.js
@@ -0,0 +1,69 @@
+import createNumberMask from 'text-mask-addons/dist/createNumberMask'
+import { conformToMask } from 'vue-text-mask'
+
+import FormMixin from '../../mixins/form'
+import textinput from '../text_input'
+
+export default {
+  name: 'funding',
+
+  mixins: [FormMixin],
+
+  components: {
+    textinput,
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    const {
+      clin_01 = 0,
+      clin_02 = 0,
+      clin_03 = 0,
+      clin_04 = 0,
+    } = this.initialData
+
+    return {
+      clin_01,
+      clin_02,
+      clin_03,
+      clin_04,
+    }
+  },
+
+  computed: {
+    totalBudget: function () {
+      return [this.clin_01, this.clin_02, this.clin_03, this.clin_04].reduce(
+        function(acc, curr) {
+          curr = curr === null ? 0 : parseInt(curr)
+          return acc + curr;
+        }, 0
+      )
+    },
+    totalBudgetStr: function () {
+      return this.formatDollars(this.totalBudget);
+    },
+  },
+
+  methods: {
+    formatDollars: function (intValue) {
+      const mask = createNumberMask({ prefix: '$', allowDecimal: true })
+      return conformToMask(intValue.toString(), mask).conformedValue
+    },
+    updateBudget: function() {
+      document.querySelector('#to-target').innerText = this.totalBudgetStr
+    }
+  },
+
+  watch: {
+    clin_01: 'updateBudget',
+    clin_02: 'updateBudget',
+    clin_03: 'updateBudget',
+    clin_04: 'updateBudget',
+  }
+}
diff --git a/js/index.js b/js/index.js
index c31f8273..1cfea514 100644
--- a/js/index.js
+++ b/js/index.js
@@ -15,6 +15,7 @@ import toggler from './components/toggler'
 import NewProject from './components/forms/new_project'
 import EditEnvironmentRole from './components/forms/edit_environment_role'
 import EditProjectRoles from './components/forms/edit_project_roles'
+import funding from './components/forms/funding'
 import Modal from './mixins/modal'
 import selector from './components/selector'
 import BudgetChart from './components/charts/budget_chart'
@@ -52,6 +53,7 @@ const app = new Vue({
     EditProjectRoles,
     RequestsList,
     ConfirmationPopover,
+    funding,
   },
 
   mounted: function() {
diff --git a/templates/task_orders/new/funding.html b/templates/task_orders/new/funding.html
index 4cc4b57c..7be4e397 100644
--- a/templates/task_orders/new/funding.html
+++ b/templates/task_orders/new/funding.html
@@ -12,68 +12,84 @@
 
 {% include "fragments/flash.html" %}
 
-<!-- Get Funding Section					 -->
-<h3>Period of Performance</h3>
+<funding inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+<div>
+  <!-- Get Funding Section           -->
+  <h3>Period of Performance</h3>
 
-<p>Choose the dates your task order will cover.</p>
+  <p>Choose the dates your task order will cover.</p>
 
-<p>
-Because your funds will be lost if you don’t use them, we strongly recommend
-submitting small, short-duration task orders, usually a three month period.
-We’ll notify you when your period of performance is nearing the end so you can
-request your next set of funds with a new task order.
-</p>
+  <p>
+  Because your funds will be lost if you don’t use them, we strongly recommend
+  submitting small, short-duration task orders, usually a three month period.
+  We’ll notify you when your period of performance is nearing the end so you can
+  request your next set of funds with a new task order.
+  </p>
 
-{{ DateInput(form.start_date, placeholder='MM / DD / YYYY', validation='date') }}
-{{ DateInput(form.end_date, placeholder='MM / DD / YYYY', validation='date') }}
+  {{ DateInput(form.start_date, placeholder='MM / DD / YYYY', validation='date') }}
+  {{ DateInput(form.end_date, placeholder='MM / DD / YYYY', validation='date') }}
 
-<hr>
-<h3>Cloud Usage Estimate</h3>
+  <hr>
+  <h3>Cloud Usage Estimate</h3>
 
-<p>
+  <p>
   Calculate how much your cloud usage will cost. A technical representative
   should help you complete this calculation.
   <a href="{{ url_for('atst.jedi_csp_calculator') }}">
     Cloud Service Provider's estimate calculator
   </a>
-</p>
-<h4>Upload a copy of your CSP Cost Estimate Research</h4>
+  </p>
+  <h4>Upload a copy of your CSP Cost Estimate Research</h4>
 
-<p>
-Upload your anticipated cloud usage from the CSP tool linked above. PDFs and
-screengrabs of the tool are sufficient.
-</p>
-<p>
-This is only an estimation tool to help you make and informed evaluation of
-what you expect to use. While you're tied to the dollar amount you specify in
-your task order, you're not obligated by the resources you indicate in the
-calculator.
-</p>
-<input type="file">
+  <p>
+  Upload your anticipated cloud usage from the CSP tool linked above. PDFs and
+  screengrabs of the tool are sufficient.
+  </p>
+  <p>
+  This is only an estimation tool to help you make and informed evaluation of
+  what you expect to use. While you're tied to the dollar amount you specify in
+  your task order, you're not obligated by the resources you indicate in the
+  calculator.
+  </p>
+  <input type="file">
 
-<hr>
-<h3>Cloud Usage Calculations</h3>
-<p>
-Enter the results of your cloud usage calculations. These will correspond with
-your task order's period of performance.
-</p>
-<h4>Cloud Offerings</h4>
-<p>
-Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) offerings
-</p>
+  <hr>
+  <h3>Cloud Usage Calculations</h3>
+  <p>
+  Enter the results of your cloud usage calculations. These will correspond with
+  your task order's period of performance.
+  </p>
+  <h4>Cloud Offerings</h4>
+  <p>
+  Infrastructure as a Service (IaaS) and Platform as a Service (PaaS) offerings
+  </p>
 
-{{ TextInput(form.clin_01, validation='dollars') }}
-{{ TextInput(form.clin_02, validation='dollars') }}
-
-<h4>Cloud Support and Assistance</h4>
-<p>
-Technical guidance from the cloud service provider, including architecture,
-configuration of IaaS and PaaS, integration, troubleshooting assistance, and
-other services.
-</p>
-{{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
-{{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
-<p>Total Task Order Value</p>
+  {{ TextInput(form.clin_01, validation='dollars') }}
+  {{ TextInput(form.clin_02, validation='dollars') }}
 
+  <h4>Cloud Support and Assistance</h4>
+  <p>
+  Technical guidance from the cloud service provider, including architecture,
+  configuration of IaaS and PaaS, integration, troubleshooting assistance, and
+  other services.
+  </p>
+  {{ TextInput(form.clin_03, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
+  {{ TextInput(form.clin_04, validation='dollars', tooltip='The cloud support and assistance packages cannot be used as a primary development resource.') }}
+</div>
+</funding>
 
 {% endblock %}
+
+{% block next %}
+<div class="row">
+  <div class="col col--grow">
+    <p>Total Task Order Value:<br><span id="to-target"></span></p>
+  </div>
+  <div class="col col--grow">
+    {{ super() }}
+  </div>
+</div>
+{% endblock %}
+
+
+