diff --git a/atst/domain/csp/files.py b/atst/domain/csp/files.py
index 9fbb545e..905eee30 100644
--- a/atst/domain/csp/files.py
+++ b/atst/domain/csp/files.py
@@ -8,7 +8,7 @@ from atst.domain.exceptions import UploadError
 
 
 class FileProviderInterface:
-    _PERMITTED_MIMETYPES = ["application/pdf"]
+    _PERMITTED_MIMETYPES = ["application/pdf", "image/png"]
 
     def _enforce_mimetype(self, fyle):
         # TODO: for hardening, we should probably use a better library for
diff --git a/atst/domain/task_orders.py b/atst/domain/task_orders.py
index 95a20d62..65e9b8dd 100644
--- a/atst/domain/task_orders.py
+++ b/atst/domain/task_orders.py
@@ -25,7 +25,7 @@ class TaskOrders(object):
         ],
         "funding": [
             "performance_length",
-            # "pdf",
+            "csp_estimate",
             "clin_01",
             "clin_02",
             "clin_03",
diff --git a/atst/forms/task_order.py b/atst/forms/task_order.py
index 5d1157d6..83cf127c 100644
--- a/atst/forms/task_order.py
+++ b/atst/forms/task_order.py
@@ -11,6 +11,7 @@ from wtforms.fields import (
 from wtforms.fields.html5 import DateField, TelField
 from wtforms.widgets import ListWidget, CheckboxInput
 from wtforms.validators import Length
+from flask_wtf.file import FileAllowed
 
 from atst.forms.validators import IsNumber, PhoneNumber, RequiredIf
 
@@ -86,9 +87,14 @@ class FundingForm(CacheableForm):
     end_date = DateField(
         translate("forms.task_order.end_date_label"), format="%m/%d/%Y"
     )
-    pdf = FileField(
-        translate("forms.task_order.pdf_label"),
-        description=translate("forms.task_order.pdf_description"),
+    csp_estimate = FileField(
+        translate("forms.task_order.csp_estimate_label"),
+        description=translate("forms.task_order.csp_estimate_description"),
+        validators=[
+            FileAllowed(
+                ["pdf", "png"], translate("forms.task_order.file_format_not_allowed")
+            )
+        ],
     )
     clin_01 = IntegerField(translate("forms.task_order.clin_01_label"))
     clin_02 = IntegerField(translate("forms.task_order.clin_02_label"))
diff --git a/js/components/forms/funding.js b/js/components/forms/funding.js
index d75ee74b..cad96abc 100644
--- a/js/components/forms/funding.js
+++ b/js/components/forms/funding.js
@@ -19,6 +19,10 @@ export default {
     initialData: {
       type: Object,
       default: () => ({})
+    },
+    uploadErrors: {
+      type: Array,
+      default: () => ([])
     }
   },
 
@@ -28,6 +32,7 @@ export default {
       clin_02 = 0,
       clin_03 = 0,
       clin_04 = 0,
+      csp_estimate,
     } = this.initialData
 
     return {
@@ -35,6 +40,7 @@ export default {
       clin_02,
       clin_03,
       clin_04,
+      showUpload: !csp_estimate || this.uploadErrors.length > 0
     }
   },
 
@@ -57,6 +63,9 @@ export default {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
     },
+    showUploadInput: function() {
+      this.showUpload = true
+    },
     updateBudget: function() {
       document.querySelector('#to-target').innerText = this.totalBudgetStr
     }
diff --git a/templates/task_orders/new/funding.html b/templates/task_orders/new/funding.html
index be24a652..3f026272 100644
--- a/templates/task_orders/new/funding.html
+++ b/templates/task_orders/new/funding.html
@@ -12,7 +12,11 @@
 
 {% block form %}
 
-<funding inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+<funding
+  inline-template
+  v-bind:initial-data='{{ form.data|mixedContentToJson }}'
+  v-bind:upload-errors='{{ form.csp_estimate.errors | list }}'
+  >
   <div>
     <!-- Get Funding Section           -->
     <h3 class="subheading">{{ "task_orders.new.funding.performance_period_title" | translate }}</h3>
@@ -28,13 +32,22 @@
       {{ Icon("link")}} Cloud Service Provider's estimate calculator
     </a></p>
     <p>{{ "task_orders.new.funding.estimate_usage_paragraph" | translate }}</p>
-    <div class="usa-input">
-      <div class="usa-input__title">
-        {{ form.pdf.label }}
+    <template v-if="showUpload">
+      <div class="usa-input {% if form.csp_estimate.errors %} usa-input--error {% endif %}">
+        {{ form.csp_estimate.label }}
+        {{ form.csp_estimate.description }}
+        {{ form.csp_estimate }}
+        {% for error in form.csp_estimate.errors %}
+          <span class="usa-input__message">{{error}}</span>
+        {% endfor %}
       </div>
-      {{ form.pdf.description }}
-      <input type="file" disabled="disabled" />
-    </div>
+    </template>
+    <template v-else>
+      <p>Uploaded {{ form.csp_estimate.data.filename }}</p>
+      <div>
+        <button type="button" v-on:click="showUploadInput">Change</button>
+      </div>
+    </template>
 
     <hr>
 
diff --git a/tests/fixtures/sample.png b/tests/fixtures/sample.png
new file mode 100644
index 00000000..49909d23
Binary files /dev/null and b/tests/fixtures/sample.png differ
diff --git a/translations.yaml b/translations.yaml
index f7af1404..1ab325b3 100644
--- a/translations.yaml
+++ b/translations.yaml
@@ -214,8 +214,9 @@ forms:
       label: Period of Performance length
     start_date_label: Start Date
     end_date_label: End Date
-    pdf_label: Upload a copy of your CSP Cost Estimate Research
-    pdf_description: Upload a PDF or screenshot of your usage estimate from the calculator.
+    csp_estimate_label: Upload a copy of your CSP Cost Estimate Research
+    csp_estimate_description: Upload a PDF or screenshot of your usage estimate from the calculator.
+    file_format_not_allowed: Only PDF or PNG files can be uploaded.
     clin_01_label: 'CLIN 01 : Unclassified'
     clin_02_label: 'CLIN 02: Classified'
     clin_03_label: 'CLIN 03: Unclassified'