diff --git a/js/components/forms/details_of_use.js b/js/components/forms/details_of_use.js
new file mode 100644
index 00000000..bcd06361
--- /dev/null
+++ b/js/components/forms/details_of_use.js
@@ -0,0 +1,43 @@
+import textinput from '../text_input'
+import optionsinput from '../options_input'
+
+export default {
+  name: 'details-of-use',
+
+  components: {
+    textinput,
+    optionsinput,
+  },
+
+  props: {
+    initialData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  data: function () {
+    return {
+      jedi_migration: this.initialData.jedi_migration
+    }
+  },
+
+  mounted: function () {
+    this.$root.$on('field-change', this.handleFieldChange)
+  },
+
+  computed: {
+    isJediMigration: function () {
+      return this.jedi_migration === 'yes'
+    }
+  },
+
+  methods: {
+    handleFieldChange: function (event) {
+      const { value, name } = event
+      if (typeof this[name] !== undefined) {
+        this[name] = value
+      }
+    },
+  }
+}
diff --git a/js/index.js b/js/index.js
index 1259a285..7e833bc0 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,12 +3,14 @@ import Vue from 'vue/dist/vue'
 
 import optionsinput from './components/options_input'
 import textinput from './components/text_input'
+import DetailsOfUse from './components/forms/details_of_use'
 
 const app = new Vue({
   el: '#app-root',
   components: {
     optionsinput,
     textinput,
+    DetailsOfUse,
   },
   methods: {
     closeModal: function(name) {
diff --git a/templates/requests/screen-1.html b/templates/requests/screen-1.html
index 5f6bbf9f..971a738b 100644
--- a/templates/requests/screen-1.html
+++ b/templates/requests/screen-1.html
@@ -17,32 +17,38 @@
   ) }}
 {% endif %}
 
+<details-of-use inline-template v-bind:initial-data='{{ f.data }}'>
+  <div>
 
-<p>We’d like to know a little about how you plan to use JEDI Cloud services to process your request. Please answer the following questions to the best of your ability. Note that the CCPO does not directly help with migrating systems to JEDI Cloud. These questions are for learning about your cloud readiness and financial usage of the JEDI Cloud; your estimates will not be used for any department level reporting.</p>
-<p><em>All fields are required, unless specified optional.</em></p>
+    <p>We’d like to know a little about how you plan to use JEDI Cloud services to process your request. Please answer the following questions to the best of your ability. Note that the CCPO does not directly help with migrating systems to JEDI Cloud. These questions are for learning about your cloud readiness and financial usage of the JEDI Cloud; your estimates will not be used for any department level reporting.</p>
+    <p><em>All fields are required, unless specified optional.</em></p>
 
-<h2>General</h2>
-{{ OptionsInput(f.dod_component) }}
-{{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
+    <h2>General</h2>
+    {{ OptionsInput(f.dod_component) }}
+    {{ TextInput(f.jedi_usage, paragraph=True, placeholder="e.g. We are migrating XYZ application to the cloud so that...") }}
 
-<h2>Cloud Readiness</h2>
-{{ TextInput(f.num_software_systems, validation='integer') }}
-{{ OptionsInput(f.jedi_migration) }}
-{{ OptionsInput(f.rationalization_software_systems) }}
-{{ OptionsInput(f.technical_support_team) }}
-{{ OptionsInput(f.organization_providing_assistance) }}
-{{ OptionsInput(f.engineering_assessment) }}
-{{ OptionsInput(f.data_transfers) }}
-{{ OptionsInput(f.expected_completion_date) }}
-{{ OptionsInput(f.cloud_native) }}
+    <h2>Cloud Readiness</h2>
+    {{ TextInput(f.num_software_systems, validation='integer') }}
+    {{ OptionsInput(f.jedi_migration) }}
+    <template v-if='isJediMigration' v-cloak>
+      {{ OptionsInput(f.rationalization_software_systems) }}
+      {{ OptionsInput(f.technical_support_team) }}
+      {{ OptionsInput(f.organization_providing_assistance) }}
+      {{ OptionsInput(f.engineering_assessment) }}
+      {{ OptionsInput(f.data_transfers) }}
+      {{ OptionsInput(f.expected_completion_date) }}
+      {{ OptionsInput(f.cloud_native) }}
+    </template>
 
-<h2>Financial Usage</h2>
-{{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
-<p>So this means you are spending approximately <b>$X</b> annually</p>
-{{ TextInput(f.dollar_value, validation='dollars') }}
-{{ TextInput(f.number_user_sessions, validation='integer') }}
-{{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
-{{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
+    <h2>Financial Usage</h2>
+    {{ TextInput(f.estimated_monthly_spend, validation='dollars') }}
+    <p>So this means you are spending approximately <b>$X</b> annually</p>
+    {{ TextInput(f.dollar_value, validation='dollars') }}
+    {{ TextInput(f.number_user_sessions, validation='integer') }}
+    {{ TextInput(f.average_daily_traffic, placeholder='Gigabytes per day', validation='gigabytes') }}
+    {{ TextInput(f.start_date, validation='date', placeholder='MM / DD / YYYY') }}
 
+  </div>
+</details-of-use>
 
 {% endblock %}