diff --git a/src/components/batch/BatchIngest.vue b/src/components/batch/BatchIngest.vue
index 285ca374..0a777945 100644
--- a/src/components/batch/BatchIngest.vue
+++ b/src/components/batch/BatchIngest.vue
@@ -102,53 +102,54 @@
         </div>
       </div>
       <modal class="my-modal" v-if="showModal" @close="reset()">
-        <h3
-          slot="header"
-          v-if="validationResponse && !validationResponse.success"
-        >
-          Batch Ingest Errors
-        </h3>
-        <h3 slot="header" v-else>Batch Submitted Successfully!</h3>
-        <div slot="body">
-          <div
-            v-if="
-              validationResponse &&
-                !validationResponse.success &&
-                validationResponse.validationErrors.length > 0
-            "
-            class="batch-errors"
-          >
-            <p>There is an error validating your batch.</p>
-            <ul>
-              <li
-                class="error-li"
-                v-for="(error, index) in validationResponse.validationErrors"
-                v-bind:key="index"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <div
-            v-else-if="validationResponse && !validationResponse.success"
-            class="batch-errors"
-          >
-            <p>There is an error processing your batch.</p>
-            <ul>
-              <li
-                class="error-li"
-                v-for="(error, index) in validationResponse.processingErrors"
-                v-bind:key="index"
-              >
-                {{ error }}
-              </li>
-            </ul>
-          </div>
-          <div v-else>
-            Your batch has been successfully submitted and all files are ready
-            to be submitted to a workflow.
+        <template #header>
+          <h3 v-if="validationResponse && !validationResponse.success">
+            Batch Ingest Errors
+          </h3>
+          <h3 v-else>Batch Submitted Successfully!</h3>
+        </template>
+        <template #body>
+          <div>
+            <div
+              v-if="
+                validationResponse &&
+                  !validationResponse.success &&
+                  validationResponse.validationErrors.length > 0
+              "
+              class="batch-errors"
+            >
+              <p>There is an error validating your batch.</p>
+              <ul>
+                <li
+                  class="error-li"
+                  v-for="(error, index) in validationResponse.validationErrors"
+                  v-bind:key="index"
+                >
+                  {{ error }}
+                </li>
+              </ul>
+            </div>
+            <div
+              v-else-if="validationResponse && !validationResponse.success"
+              class="batch-errors"
+            >
+              <p>There is an error processing your batch.</p>
+              <ul>
+                <li
+                  class="error-li"
+                  v-for="(error, index) in validationResponse.processingErrors"
+                  v-bind:key="index"
+                >
+                  {{ error }}
+                </li>
+              </ul>
+            </div>
+            <div v-else>
+              Your batch has been successfully submitted and all files are ready
+              to be submitted to a workflow.
+            </div>
           </div>
-        </div>
+        </template>
       </modal>
     </div>
   </div>
diff --git a/src/components/deliverables/Deliverables.vue b/src/components/deliverables/Deliverables.vue
index 08ee159b..1f1ed2a6 100644
--- a/src/components/deliverables/Deliverables.vue
+++ b/src/components/deliverables/Deliverables.vue
@@ -101,106 +101,110 @@
               </div>
             </div>
             <modal class="my-modal" v-if="showModal" @close="showModal = false">
-              <h3 slot="header">Search</h3>
-              <div slot="body">
-                <div class="input-group mb-3">
-                  <input
-                    v-model="searchWord"
-                    type="text"
-                    class="form-control"
-                    placeholder="Search"
-                    v-on:keyup.enter="searchKeyUp"
-                    v-on:keyup.down="onArrowDown"
-                    ref="searchInput"
-                    tabindex="0"
-                  />
-                  <div class="input-group-append">
-                    <button
-                      v-on:click="searchFiles"
-                      class="btn btn-success"
-                      type="button"
+              <template #header><h3>Search</h3></template>
+              <template #body>
+                <div>
+                  <div class="input-group mb-3">
+                    <input
+                      v-model="searchWord"
+                      type="text"
+                      class="form-control"
+                      placeholder="Search"
+                      v-on:keyup.enter="searchKeyUp"
+                      v-on:keyup.down="onArrowDown"
+                      ref="searchInput"
+                      tabindex="0"
+                    />
+                    <div class="input-group-append">
+                      <button
+                        v-on:click="searchFiles"
+                        class="btn btn-success"
+                        type="button"
+                      >
+                        Go
+                      </button>
+                    </div>
+                  </div>
+                  <div class="scrollDiv">
+                    <table
+                      id="myTable"
+                      data-detail-view="true"
+                      class="table"
+                      ref="tbl"
                     >
-                      Go
-                    </button>
+                      <thead>
+                        <tr>
+                          <th data-sortable="true" data-field="collectionName">
+                            Collection
+                          </th>
+                          <th data-sortable="true" data-field="itemName">Item</th>
+                          <th data-sortable="true" data-field="externalSource">
+                            External Source
+                          </th>
+                          <th data-sortable="true" data-field="externalId">
+                            External ID
+                          </th>
+                          <th data-sortable="true" data-field="primaryfileName">
+                            Content File
+                          </th>
+                          <th
+                            data-sortable="true"
+                            data-field="primaryfileOriginalname"
+                          >
+                            Filename
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr
+                          class="deliverables-search"
+                          v-for="(pfile, index) in searchedPfiles"
+                          v-bind:key="index"
+                          :ref="'row' + index"
+                          tabindex="0"
+                          v-on:keyup.down="onArrowDown"
+                          v-on:keyup.up="onArrowUp"
+                          v-on:click="rowClicked(index)"
+                          :class="{
+                            'table-dark': rowSelected(pfile.primaryfileId),
+                          }"
+                        >
+                          <td>{{ pfile.collectionName }}</td>
+                          <td>{{ pfile.itemName }}</td>
+                          <td>{{ pfile.externalSource }}</td>
+                          <td>{{ pfile.externalId }}</td>
+                          <td>{{ pfile.primaryfileName }}</td>
+                          <td
+                            style="max-width: 30px !important; overflow-wrap: break-word;"
+                          >
+                            {{ pfile.primaryfileOriginalname }}
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
                   </div>
                 </div>
-                <div class="scrollDiv">
-                  <table
-                    id="myTable"
-                    data-detail-view="true"
-                    class="table"
-                    ref="tbl"
+              </template>
+              <template #footer>
+                <slot class="my-modal-footer">
+                  <button
+                    type="button"
+                    class="btn btn-outline pull-left"
+                    data-dismiss="modal"
+                    v-on:click="close()"
+                    aria-label="Close"
                   >
-                    <thead>
-                      <tr>
-                        <th data-sortable="true" data-field="collectionName">
-                          Collection
-                        </th>
-                        <th data-sortable="true" data-field="itemName">Item</th>
-                        <th data-sortable="true" data-field="externalSource">
-                          External Source
-                        </th>
-                        <th data-sortable="true" data-field="externalId">
-                          External ID
-                        </th>
-                        <th data-sortable="true" data-field="primaryfileName">
-                          Content File
-                        </th>
-                        <th
-                          data-sortable="true"
-                          data-field="primaryfileOriginalname"
-                        >
-                          Filename
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr
-                        class="deliverables-search"
-                        v-for="(pfile, index) in searchedPfiles"
-                        v-bind:key="index"
-                        :ref="'row' + index"
-                        tabindex="0"
-                        v-on:keyup.down="onArrowDown"
-                        v-on:keyup.up="onArrowUp"
-                        v-on:click="rowClicked(index)"
-                        :class="{
-                          'table-dark': rowSelected(pfile.primaryfileId),
-                        }"
-                      >
-                        <td>{{ pfile.collectionName }}</td>
-                        <td>{{ pfile.itemName }}</td>
-                        <td>{{ pfile.externalSource }}</td>
-                        <td>{{ pfile.externalId }}</td>
-                        <td>{{ pfile.primaryfileName }}</td>
-                        <td
-                          style="max-width: 30px !important; overflow-wrap: break-word;"
-                        >
-                          {{ pfile.primaryfileOriginalname }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <slot slot="footer" class="my-modal-footer">
-                <button
-                  type="button"
-                  class="btn btn-outline pull-left"
-                  data-dismiss="modal"
-                  v-on:click="close()"
-                  aria-label="Close"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-primary"
-                  v-on:click="done()"
-                >
-                  Done
-                </button>
-              </slot>
+                    Cancel
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-primary"
+                    v-on:click="done()"
+                  >
+                    Done
+                  </button>
+                </slot>
+              </template>
             </modal>
           </main>
         </div>
diff --git a/src/components/hmgm/NerEditor.vue b/src/components/hmgm/NerEditor.vue
index 3cf2300f..cdf96d7c 100644
--- a/src/components/hmgm/NerEditor.vue
+++ b/src/components/hmgm/NerEditor.vue
@@ -46,17 +46,17 @@
       </div>
     </div>
     <modal v-if="showResponse" @close="modalDismiss">
-      <h3 slot="header">{{ responseHeader }}</h3>
-      <div slot="body">
+      <template #header><h3>{{ responseHeader }}</h3></template>
+      <template #body><div>
         {{ responseBody }}
-      </div>
+      </div></template>
     </modal>
     <modal v-if="showConfirm" @close="showConfirm = false">
-      <h3 slot="header">{{ confirmHeader }}</h3>
-      <div slot="body">
+      <template #header><h3>{{ confirmHeader }}</h3></template>
+      <template #body><div>
         {{ confirmBody }}
-      </div>
-      <div slot="footer" class="action-buttons">
+      </div>></template>
+      <template #footer><div class="action-buttons">
         <input
           type="button"
           class="secondary-button"
@@ -69,7 +69,7 @@
           v-on:click="onConfirm"
           value="Continue"
         />
-      </div>
+      </div></template>
     </modal>
     <token-validator
       v-if="showTokenValidator"
diff --git a/src/components/hmgm/TokenValidator.vue b/src/components/hmgm/TokenValidator.vue
index 8f35396c..6a5b584b 100644
--- a/src/components/hmgm/TokenValidator.vue
+++ b/src/components/hmgm/TokenValidator.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <modal class="my-modal">
-      <h5 slot="header">Authentication Required</h5>
-      <div slot="body">
+      <template #header><h5>Authentication Required</h5></template>
+      <template #body><div>
         Enter the editor password to view the page:
         <div class="form-input">
           <label class="form-errors" v-if="invalidInput"
@@ -14,15 +14,15 @@
             v-on:keyup.enter="submitToken"
           />
         </div>
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="primary-button"
           value="Submit"
           v-on:click="submitToken"
         />
-      </div>
+      </div></template>
     </modal>
   </div>
 </template>
diff --git a/src/components/hmgm/TranscriptEditor.vue b/src/components/hmgm/TranscriptEditor.vue
index 3cdb0208..7da948d2 100644
--- a/src/components/hmgm/TranscriptEditor.vue
+++ b/src/components/hmgm/TranscriptEditor.vue
@@ -46,17 +46,17 @@
       </div>
     </div>
     <modal v-if="showModal" @close="modalDismiss" class="my-modal">
-      <h5 slot="header">{{ modalHeader }}</h5>
-      <div slot="body">
+      <template #header><h5>{{ modalHeader }}</h5></template>
+      <template #body><div>
         {{ modalBody }}
-      </div>
+      </div>></template>
     </modal>
     <modal v-if="showSaveModal" @close="saveModalCancel" class="my-modal">
-      <h5 slot="header">Save and close?</h5>
-      <div slot="body">
+      <template #header><h5>Save and close?</h5></template>
+      <template #body><div>
         Are you sure you want to save the transcript and exit this page?
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
@@ -69,14 +69,14 @@
           v-on:click="saveModal"
           value="Yes"
         />
-      </div>
+      </div></template>
     </modal>
     <modal v-if="showResetModal" @close="resetModalCancel" class="my-modal">
-      <h5 slot="header">Reset the transcript?</h5>
-      <div slot="body">
+      <template #header><h5>Reset the transcript?</h5></template>
+      <template #body><div>
         Are you sure you want to reset the transcript to the original text?
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
@@ -89,18 +89,18 @@
           v-on:click="resetModalYes"
           value="Yes"
         />
-      </div>
+      </div></template>
     </modal>
     <modal
       v-if="showCompleteModal"
       @close="completeModalCancel"
       class="my-modal"
     >
-      <h5 slot="header">Complete?</h5>
-      <div slot="body">
+      <template #header><h5>Complete?</h5></template>
+      <template #body><div>
         Are you sure you want to complete the transcript and exit the page?
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
@@ -113,7 +113,7 @@
           v-on:click="completeModalYes"
           value="Yes"
         />
-      </div>
+      </div></template>
     </modal>
     <token-validator
       v-if="showTokenValidator"
diff --git a/src/components/workflow/SaveBundle.vue b/src/components/workflow/SaveBundle.vue
index 558d4d80..64c6df25 100644
--- a/src/components/workflow/SaveBundle.vue
+++ b/src/components/workflow/SaveBundle.vue
@@ -6,8 +6,8 @@
       @close="workflowSubmission.showSaveBundle = false"
       class="my-modal"
     >
-      <h3 slot="header">Save file selection as a bundle</h3>
-      <div slot="body" class="input-group mb-3">
+      <template #header><h3>Save file selection as a bundle</h3></template>
+      <template #body><div class="input-group mb-3">
         <form>
           <div class="form-group">
             <label for="name">Bundle Name</label>
@@ -36,8 +36,8 @@
             />
           </div>
         </form>
-      </div>
-      <div slot="footer" class="action-buttons">
+      </div></template>
+      <template #footer><div class="action-buttons">
         <input
           type="button"
           class="secondary-button"
@@ -50,7 +50,7 @@
           v-on:click="saveBundle"
           value="Save Selection"
         />
-      </div>
+      </div></template>
     </modal>
 
     <modal
@@ -59,13 +59,13 @@
       @close="showConfirmUpdate = false"
       class="my-modal"
     >
-      <h3 slot="header">Confirm</h3>
-      <div slot="body">
+      <template #header><h3>Confirm</h3></template>
+      <template #body><div>
         A bundle owned by you with name "{{ bundle.name }}" and description "{{
           bundle.description
         }}" already exists, do you want to overwrite it?
-      </div>
-      <div slot="footer" class="action-buttons">
+      </div>></template>
+      <template #footer><div class="action-buttons">
         <input
           type="button"
           class="secondary-button"
@@ -78,7 +78,7 @@
           v-on:click="updateConfirmed"
           value="Yes"
         />
-      </div>
+      </div></template>
     </modal>
 
     <modal
@@ -87,18 +87,18 @@
       @close="showResponse = false"
       class="my-modal"
     >
-      <h3 slot="header">{{ responseHeader }}</h3>
-      <div slot="body">
+      <template #header><h3>{{ responseHeader }}</h3></template>
+      <template #body><div>
         {{ responseText }}
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
           v-on:click="showResponse = false"
           value="Ok"
         />
-      </div>
+      </div></template>
     </modal>
   </div>
 </template>
diff --git a/src/components/workflow/SelectBundle.vue b/src/components/workflow/SelectBundle.vue
index ad60386d..0f148ec7 100644
--- a/src/components/workflow/SelectBundle.vue
+++ b/src/components/workflow/SelectBundle.vue
@@ -6,8 +6,8 @@
       @close="workflowSubmission.showSelectBundle = false"
       class="my-modal"
     >
-      <h3 slot="header">Select content files from saved bundles</h3>
-      <div slot="body" class="input-group mb-3">
+      <template #header><h3>Select content files from saved bundles</h3></template>
+      <template #body><div class="input-group mb-3">
         <div
           id="accordion"
           v-if="bundles && bundles.length > 0"
@@ -140,15 +140,15 @@
         <div v-else>
           No Bundles found
         </div>
-      </div>
-      <div slot="footer">
+      </div></template>
+      <template #footer><div>
         <input
           type="button"
           class="btn btn-primary btn-md"
           v-on:click="workflowSubmission.showSelectBundle = false"
           value="Done"
         />
-      </div>
+      </div></template>
     </modal>
 
     <modal
@@ -157,18 +157,18 @@
       @close="workflowSubmission.showBundleError = false"
       class="my-modal"
     >
-      <h3 slot="header">{{ responseHeader }}</h3>
-      <div slot="body">
+      <template #header><h3>{{ responseHeader }}</h3></template>
+      <template #body><div>
         {{ responseText }}
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
           v-on:click="workflowSubmission.showBundleError = false"
           value="Ok"
         />
-      </div>
+      </div></template>
     </modal>
   </div>
 </template>
diff --git a/src/components/workflow/SelectWorkflow.vue b/src/components/workflow/SelectWorkflow.vue
index 81b3d448..2e7f8363 100644
--- a/src/components/workflow/SelectWorkflow.vue
+++ b/src/components/workflow/SelectWorkflow.vue
@@ -230,8 +230,8 @@
       </div>
     </div>
     <modal v-if="showModal" @close="showModal = false" class="my-modal">
-      <h3 slot="header">{{ modalHeader }}</h3>
-      <div slot="body">
+      <template #header><h3>{{ modalHeader }}</h3></template>
+      <template #body><div>
         <div v-for="(modalText, index) in modalTextList" :key="index">
           <div
             v-if="
@@ -263,15 +263,15 @@
             <div class="col-md-12 error-item">Error: {{ error.error }}</div>
           </div>
         </div>
-      </div>
-      <div slot="footer">
+      </div>></template>
+      <template #footer><div>
         <input
           type="button"
           class="secondary-button"
           v-on:click="handleSuccess"
           value="Ok"
         />
-      </div>
+      </div></template>
     </modal>
     <SaveBundle />
     <div>
diff --git a/src/components/workflow/WorkflowEditor.vue b/src/components/workflow/WorkflowEditor.vue
index 28936f70..719dad03 100644
--- a/src/components/workflow/WorkflowEditor.vue
+++ b/src/components/workflow/WorkflowEditor.vue
@@ -45,12 +45,6 @@
           </button>
         </template>
       </b-modal>
-      <!-- <modal v-if="showValidation" @close="modalDismiss">
-      <h3 slot="header">{{validationHeader}}</h3>
-      <div slot="body">
-        {{validationErrors}}
-      </div>
-    </modal> -->
     </main>
   </div>
 </template>