diff --git a/templates/task_orders/step_3.html b/templates/task_orders/step_3.html
index c15533d2..433ae7a5 100644
--- a/templates/task_orders/step_3.html
+++ b/templates/task_orders/step_3.html
@@ -51,17 +51,13 @@
 {% endmacro %}
 
 {% macro CLINFields(fields, index) %}
-  {% if index != 0 %}
-    <hr>
-  {% endif %}
-
   <clin-fields
     v-bind:initial-clin-index='{{ index }}'
     v-bind:initial-loa-count="{{ fields.loas.data | length or 0 }}"
     v-bind:initial-clin-type="'{{ fields.jedi_clin_type.data }}'"
     v-bind:initial-amount='{{ fields.obligated_amount.data or 0 }}'
     inline-template>
-    <div>
+    <div class="card">
       <div class="form-row">
         <div class="form-col form-col--two-thirds">
           {{ OptionsInput(fields.jedi_clin_type, watch=True) }}
@@ -106,131 +102,128 @@
           {{ CLINFields(clin, index=loop.index - 1) }}
         {% endfor %}
 
-      <div v-for="clin in clins">
-        <hr v-if="clinIndex !== 0">
-        <clin-fields
-          v-bind:initial-clin-index='clinIndex'
-          v-bind:initial-clin-type="'JEDI_CLIN_1'"
-          inline-template>
-          <div>
-            <div class="form-row">
-              <div class="form-col form-col--two-thirds">
-                <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
-                  <div class="usa-input">
-                    <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
-                        <legend>
-                          <div class="usa-input__title">
-                            {{ 'task_orders.form.clin_type_label' | translate }}
-                          </div>
-                        </legend>
-                        <select :id='name' :name='name'>
-                          <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
-                          <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
-                          <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
-                          <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
-                        </select>
-                    </fieldset>
-                  </div>
-                </optionsinput>
+        <div v-for="clin in clins">
+          <clin-fields
+            v-bind:initial-clin-index='clinIndex'
+            v-bind:initial-clin-type="'JEDI_CLIN_1'"
+            inline-template>
+            <div class="card">
+              <div class="form-row">
+                <div class="form-col form-col--two-thirds">
+                  <optionsinput :name="'clins-' + clinIndex + '-jedi_clin_type'" :watch='true' :optional='false' inline-template>
+                    <div class="usa-input">
+                      <fieldset data-ally-disabled="true" class="usa-input__choices" v-on:change="onInput">
+                          <legend>
+                            <div class="usa-input__title">
+                              {{ 'task_orders.form.clin_type_label' | translate }}
+                            </div>
+                          </legend>
+                          <select :id='name' :name='name'>
+                            <option value="JEDI_CLIN_1">{{ "forms.task_order.clin_01_label" | translate }}</option>
+                            <option value="JEDI_CLIN_2">{{ "forms.task_order.clin_02_label" | translate }}</option>
+                            <option value="JEDI_CLIN_3">{{ "forms.task_order.clin_03_label" | translate }}</option>
+                            <option value="JEDI_CLIN_4">{{ "forms.task_order.clin_04_label" | translate }}</option>
+                          </select>
+                      </fieldset>
+                    </div>
+                  </optionsinput>
+                </div>
+                <div class="form-col form-col--third">
+                  <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
+                    <div class="usa-input">
+                      <label :for="name">
+                        <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
+                        <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
+                        <div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
+                      </label>
+
+                      <masked-input
+                        v-on:input='onInput'
+                        v-on:blur='onBlur'
+                        v-on:change='onChange'
+                        v-bind:value='value'
+                        v-bind:mask='mask'
+                        v-bind:pipe='pipe'
+                        v-bind:keep-char-positions='keepCharPositions'
+                        v-bind:aria-invalid='showError'
+                        type='text'
+                        :id='name'
+                        ref='input'>
+                      </masked-input>
+
+                      <input type='hidden' v-bind:value='rawValue' :name='name' />
+
+                      <template v-if='showError'>
+                        <span class='usa-input__message' v-html='validationError'></span>
+                      </template>
+                      <template v-else>
+                        <span class='usa-input__message'></span>
+                      </template>
+                    </div>
+                  </textinput>
+                </div>
               </div>
-              <div class="form-col form-col--third">
-                <textinput :name="'clins-' + clinIndex + '-number'" :watch='true' inline-template>
-                  <div class="usa-input">
-                    <label :for="name">
-                      <span v-show='showError'>{{ Icon('alert',classes="icon-validation") }}</span>
-                      <span v-show='showValid'>{{ Icon('ok',classes="icon-validation") }}</span>
-                      <div class="usa-input__title">{{ 'task_orders.form.clin_number_label' | translate }}</div>
-                    </label>
-
-                    <masked-input
-                      v-on:input='onInput'
-                      v-on:blur='onBlur'
-                      v-on:change='onChange'
-                      v-bind:value='value'
-                      v-bind:mask='mask'
-                      v-bind:pipe='pipe'
-                      v-bind:keep-char-positions='keepCharPositions'
-                      v-bind:aria-invalid='showError'
-                      type='text'
-                      :id='name'
-                      ref='input'>
-                    </masked-input>
-
-                    <input type='hidden' v-bind:value='rawValue' :name='name' />
-
-                    <template v-if='showError'>
-                      <span class='usa-input__message' v-html='validationError'></span>
-                    </template>
-                    <template v-else>
-                      <span class='usa-input__message'></span>
-                    </template>
-                  </div>
-                </textinput>
 
+              <div class="usa-input">
+                <fieldset class="usa-input__choices task-order__loa-fieldset">
+                  <legend>
+                    <div class="usa-input__title">
+                      {{ 'task_orders.form.loa_label' | translate }}
+                    </div>
+                  </legend>
+                  {{ LOAInput() }}
+                </fieldset>
               </div>
-            </div>
 
-            <div class="usa-input">
-              <fieldset class="usa-input__choices task-order__loa-fieldset">
-                <legend>
-                  <div class="usa-input__title">
-                    {{ 'task_orders.form.loa_label' | translate }}
-                  </div>
-                </legend>
-                {{ LOAInput() }}
-              </fieldset>
-            </div>
+              <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
+                <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
+                  <legend>
+                    <div class="usa-input__title">
+                      {{ 'task_orders.form.pop_start' | translate }}
+                    </div>
+                  </legend>
 
-            <date-selector :name-tag="'clins-' + clinIndex + '-start_date'" :watch='true' :optional='false' inline-template>
-              <fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid }">
-                <legend>
-                  <div class="usa-input__title">
-                    {{ 'task_orders.form.pop_start' | translate }}
-                  </div>
-                </legend>
+                  <div class="date-picker-component">
+                    <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
-                <div class="date-picker-component">
-                  <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
+                    <div class="usa-form-group usa-form-group-month">
+                      <label>{{ 'components.date_selector.month' | translate }}</label>
+                      <input
+                        name="date-month"
+                        max="12"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                        v-model="month"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
-                  <div class="usa-form-group usa-form-group-month">
-                    <label>{{ 'components.date_selector.month' | translate }}</label>
-                    <input
-                      name="date-month"
-                      max="12"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                      v-model="month"
-                      v-on:change="onInput"
-                    />
-                  </div>
+                    <div class="usa-form-group usa-form-group-day">
+                      <label>{{ 'components.date_selector.day' | translate }}</label>
+                      <input
+                        name="date-day"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                        v-bind:max="daysMaxCalculation"
+                        v-model="day"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
-                  <div class="usa-form-group usa-form-group-day">
-                    <label>{{ 'components.date_selector.day' | translate }}</label>
-                    <input
-                      name="date-day"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                      v-bind:max="daysMaxCalculation"
-                      v-model="day"
-                      v-on:change="onInput"
-                    />
-                  </div>
-
-                  <div class="usa-form-group usa-form-group-year">
-                    <label>{{ 'components.date_selector.year' | translate }}</label>
-                    <input
-                      name="date-year"
-                      maxlength="4"
-                      type="number"
-                      v-model="year"
-                      v-on:change="onInput"
-                    />
-
-                  </div>
+                    <div class="usa-form-group usa-form-group-year">
+                      <label>{{ 'components.date_selector.year' | translate }}</label>
+                      <input
+                        name="date-year"
+                        maxlength="4"
+                        type="number"
+                        v-model="year"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     {{ Icon("ok", classes="icon--green") }}
@@ -250,45 +243,44 @@
                 <div class="date-picker-component">
                   <input :name="name" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
 
-                  <div class="usa-form-group usa-form-group-month">
-                    <label>{{ 'components.date_selector.month' | translate }}</label>
-                    <input
-                      name="date-month"
-                      max="12"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
-                      v-model="month"
-                      v-on:change="onInput"
-                    />
-                  </div>
+                    <div class="usa-form-group usa-form-group-month">
+                      <label>{{ 'components.date_selector.month' | translate }}</label>
+                      <input
+                        name="date-month"
+                        max="12"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
+                        v-model="month"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
-                  <div class="usa-form-group usa-form-group-day">
-                    <label>{{ 'components.date_selector.day' | translate }}</label>
-                    <input
-                      name="date-day"
-                      maxlength="2"
-                      min="1"
-                      type="number"
-                      v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
-                      v-bind:max="daysMaxCalculation"
-                      v-model="day"
-                      v-on:change="onInput"
-                    />
-                  </div>
+                    <div class="usa-form-group usa-form-group-day">
+                      <label>{{ 'components.date_selector.day' | translate }}</label>
+                      <input
+                        name="date-day"
+                        maxlength="2"
+                        min="1"
+                        type="number"
+                        v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
+                        v-bind:max="daysMaxCalculation"
+                        v-model="day"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
-                  <div class="usa-form-group usa-form-group-year">
-                    <label>{{ 'components.date_selector.year' | translate }}</label>
-                    <input
-                      name="date-year"
-                      maxlength="4"
-                      type="number"
-                      v-model="year"
-                      v-on:change="onInput"
-                    />
-
-                  </div>
+                    <div class="usa-form-group usa-form-group-year">
+                      <label>{{ 'components.date_selector.year' | translate }}</label>
+                      <input
+                        name="date-year"
+                        maxlength="4"
+                        type="number"
+                        v-model="year"
+                        v-on:change="onInput"
+                        />
+                    </div>
 
                   <div class="usa-form-group-date-ok" v-if="isDateValid">
                     {{ Icon("ok", classes="icon--green") }}