diff --git a/static/css/main.css b/static/css/main.css
index dec19351..7dd9aada 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -4,6 +4,7 @@ body {
   margin-left: 20px;
   margin-top: 15px;
   margin-right: 20px;
+  height: auto;
 }
 
 label {
diff --git a/static/javascript/launch.js b/static/javascript/launch.js
index d938fff2..89650518 100644
--- a/static/javascript/launch.js
+++ b/static/javascript/launch.js
@@ -142,6 +142,8 @@ let supplementaryDataSets = null;
 // We always need survey_id from top-level schema metadata for SDS retrieval
 let schemaSurveyId = null;
 
+const supplementaryDataSection = document.querySelector("#supplementary_data");
+
 function clearSurveyMetadataFields() {
   document
     .querySelector("#survey-type-metadata-accordion")
@@ -398,10 +400,6 @@ function showCIRMetdata(cirInstrumentId, cirSchema) {
 function updateSDSDropdown() {
   const surveyId = schemaSurveyId;
   const periodId = document.getElementById("period_id")?.value;
-
-  const supplementaryDataSection = document.querySelector(
-    "#supplementary_data",
-  );
   const sdsDatasetIdElement = document.querySelector("#sds_dataset_id");
   loadSDSDatasetMetadata(surveyId, periodId)
     .then((sds_metadata_response) => {
@@ -527,19 +525,18 @@ function loadSupplementaryDataInfo() {
     "sds_dataset_version",
   ];
 
-  const sdsMetadataSection = document.querySelector("#supplementary_data");
   const sdsMetadataField = (key) =>
-    `<div class="ons-field ons-field--inline">${getLabelFor(key)}${getInputField(key, "text", selectedDataset[key], true)}</div>`;
-
-  if (sdsMetadataSection.contains(document.querySelector("#sds_dataset_id"))) {
-    sdsMetadataSection.innerHTML += sdsDatasetMetadataKeys
-      .map(sdsMetadataField)
-      .join("");
-  } else {
-    sdsMetadataSection.innerHTML = sdsDatasetMetadataKeys
-      .map(sdsMetadataField)
-      .join("");
-  }
+    `<div class="ons-field ons-field--inline" data-sds-metadata-key>${getLabelFor(key)}${getInputField(key, "text", selectedDataset[key], true)}</div>`;
+
+  const supplementaryDataFields = document
+    .createRange()
+    .createContextualFragment(
+      sdsDatasetMetadataKeys.map(sdsMetadataField).join(""),
+    );
+  supplementaryDataSection
+    .querySelectorAll(".ons-field[data-sds-metadata-key]")
+    .forEach((sds_value) => sds_value.remove());
+  supplementaryDataSection.appendChild(supplementaryDataFields);
 }
 
 function uuid(el_id) {
diff --git a/templates/launch.html b/templates/launch.html
index 2895d2ae..714101be 100644
--- a/templates/launch.html
+++ b/templates/launch.html
@@ -9,8 +9,8 @@
             <div class="ons-grid__col ons-col-6@xl">
                 <div class="ons-pl-grid-col">
                     <h1 class="ons-u-fs-xxl">Launch a survey</h1>
-                    <hr class="ons-u-mb-m">
-                    <h2 class="ons-u-fs-m">Launch Pattern:</h2>
+                    <hr>
+                    <h2 class="ons-u-mt-s ons-u-fs-m">Launch Pattern:</h2>
                     <div class="ons-field ons-field--inline">
                         <label class="ons-label" for="launch_pattern">Version</label>
                         <select id="launch_pattern"
@@ -20,7 +20,7 @@ <h2 class="ons-u-fs-m">Launch Pattern:</h2>
                             <option value="v2" selected>v2</option>
                         </select>
                     </div>
-                    <hr class="ons-u-mb-m">
+                    <hr>
                     <h2 class="ons-u-mt-s ons-u-fs-m">Launch by Schema Name:</h2>
                     <div class="ons-field ons-field--inline">
                         <label class="ons-label" for="schema_name">Schemas</label>
@@ -38,7 +38,7 @@ <h2 class="ons-u-mt-s ons-u-fs-m">Launch by Schema Name:</h2>
                             {{ end }}
                         </select>
                     </div>
-                    <hr class="ons-u-mb-m">
+                    <hr>
                     <h2 class="ons-u-mt-s ons-u-fs-m">Launch Remote Schemas:</h2>
                     <div class="ons-field ons-field--inline">
                         <label class="ons-label" for="remote-schema-survey-type">Survey Type</label>
@@ -87,8 +87,7 @@ <h2 class="ons-u-mt-s ons-u-fs-m">Launch Remote Schemas:</h2>
                             <span class="ons-btn__inner"><span class="ons-btn__text">Load Metadata</span></span>
                         </button>
                     </div>
-                    <hr>
-                    <h2 class="ons-u-mt-m">Survey Actions</h2>
+                    <hr class="ons-u-mb-m">
                     <div class="ons-btn-group">
                         <button id="submit-btn"
                                 type="submit"
@@ -222,9 +221,7 @@ <h2 class="ons-details__title">Supplementary Data</h2>
                         </div>
                         <div id="sds-metadata-accordion-content"
                              class="ons-details__content ons-js-details-content ons-u-mb-m">
-                            <div class="supplementary-data">
-                                <div id="supplementary_data"></div>
-                            </div>
+                            <div id="supplementary_data"></div>
                         </div>
                     </div>
                     <div id="required-metadata-accordion"