diff --git a/benchtop-fe/package-lock.json b/benchtop-fe/package-lock.json
index 1434980..bbbb888 100644
--- a/benchtop-fe/package-lock.json
+++ b/benchtop-fe/package-lock.json
@@ -12,8 +12,7 @@
         "@vuepic/vue-datepicker": "^7.0.0",
         "vls": "^0.8.5",
         "volar-service-vetur": "^0.0.13",
-        "vue": "^3.3.4",
-        "vue-upload-component": "^3.1.8"
+        "vue": "^3.3.4"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
@@ -2513,11 +2512,6 @@
         "eslint": ">=6.0.0"
       }
     },
-    "node_modules/vue-upload-component": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/vue-upload-component/-/vue-upload-component-3.1.8.tgz",
-      "integrity": "sha512-8LHCrgmEZPg+1hbkKjQgMce2uasmGLEnIsLE8YG+vNyfNDuaQA71T+5t6kdDSG/szeh+E8mjb26uEd9WkVSFtg=="
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/benchtop-fe/package.json b/benchtop-fe/package.json
index 4d6ecb1..9cc46a5 100644
--- a/benchtop-fe/package.json
+++ b/benchtop-fe/package.json
@@ -13,8 +13,7 @@
     "@vuepic/vue-datepicker": "^7.0.0",
     "vls": "^0.8.5",
     "volar-service-vetur": "^0.0.13",
-    "vue": "^3.3.4",
-    "vue-upload-component": "^3.1.8"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
diff --git a/benchtop-fe/public/funky-lines.webp b/benchtop-fe/public/funky-lines.webp
new file mode 100644
index 0000000..9385220
Binary files /dev/null and b/benchtop-fe/public/funky-lines.webp differ
diff --git a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
index abae57e..f204175 100644
--- a/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
+++ b/benchtop-fe/src/components/CalibrationDevice/NewCalibrationDeviceForm.vue
@@ -3,49 +3,93 @@
   <div class="card-body">
     <table class="table">
       <tbody>
-      <tr>
-        <td><h3>Calibration Date</h3>
-          <VueDatePicker v-model="calibration_date" inline auto-apply :flow="flow"></VueDatePicker>
-        </td>
-        <td><h3>Calibration Due Date</h3>
-          <VueDatePicker v-model="calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker>
-        </td>
-      </tr>
-      <tr>
-        <td>Model</td>
-        <td>
-          <input type="text" name="calibration_model" maxlength="100" v-model="calibration_model" required
-                 id="id_calibration_model">
-        </td>
-      </tr>
-      <tr>
-        <td>Serial #</td>
-        <td>
-          <input type="text" name="calibration_serial" maxlength="100" v-model="calibration_serial" required
-                 id="id_calibration_serial">
-        </td>
-      </tr>
+        <tr>
+          <td>
+            <h3>Calibration Date</h3>
+            <VueDatePicker
+              v-model="date"
+              inline
+              auto-apply
+              :flow="flow"
+            ></VueDatePicker>
+          </td>
+          <td>
+            <h3>Calibration Due Date</h3>
+            <VueDatePicker
+              v-model="due_date"
+              inline
+              auto-apply
+              :flow="flow"
+            ></VueDatePicker>
+          </td>
+        </tr>
+        <tr>
+          <td>Model</td>
+          <td>
+            <input
+              type="text"
+              name="model"
+              maxlength="100"
+              v-model="model"
+              required
+              id="id_model"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Serial #</td>
+          <td>
+            <input
+              type="text"
+              name="serial"
+              maxlength="100"
+              v-model="serial"
+              required
+              id="id_serial"
+            />
+          </td>
+        </tr>
 
-      <tr>
-        <td>Cert ID</td>
-        <td>
-          <input type="text" name="calibration_cert_id" maxlength="100" v-model="calibration_cert_id" required
-                 id="id_calibration_cert_id">
-        </td>
-      </tr>
+        <tr>
+          <td>Cert ID</td>
+          <td>
+            <input
+              type="text"
+              name="cert_id"
+              maxlength="100"
+              v-model="cert_id"
+              required
+              id="id_cert_id"
+            />
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
 </template>
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref, defineEmits, watchEffect } from "vue";
 
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
-const calibration_model = ref( "")
-const calibration_serial = ref( "")
-const calibration_cert_id = ref( "")
-const calibration_due_date = ref( "")
-const calibration_date = ref( "")
-const flow = ref( ['year', 'month', 'calendar'])
-</script>
\ No newline at end of file
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+
+const
+  model = ref(""),
+  serial = ref(""),
+  cert_id = ref(""),
+  due_date = ref(""),
+  date = ref("")
+
+const flow = ref(["year", "month", "calendar"]);
+
+const emit = defineEmits();
+watchEffect(() => {
+  emit("new-calibration-form", {
+    model,
+    serial,
+    cert_id,
+    due_date,
+    date,
+  });
+});
+</script>
diff --git a/benchtop-fe/src/components/CustomerForm.vue b/benchtop-fe/src/components/CustomerForm.vue
index 125ee24..aee8b30 100644
--- a/benchtop-fe/src/components/CustomerForm.vue
+++ b/benchtop-fe/src/components/CustomerForm.vue
@@ -34,10 +34,21 @@
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref, watchEffect } from 'vue'
 
-const customer_name = ref("")
-const onsite_cal = ref(false)
-const control_doc = ref("")
-const technician = ref("")
+const
+  customer_name = ref(""),
+  onsite_cal = ref(false),
+  control_doc = ref(""),
+  technician = ref("")
+
+const emit = defineEmits();
+watchEffect(() => {
+  emit("customer-form", {
+    customer_name,
+    onsite_cal,
+    control_doc,
+    technician,
+  });
+});
 </script>
\ No newline at end of file
diff --git a/benchtop-fe/src/components/EnvironmentForm.vue b/benchtop-fe/src/components/EnvironmentForm.vue
index de7e39a..8d3de13 100644
--- a/benchtop-fe/src/components/EnvironmentForm.vue
+++ b/benchtop-fe/src/components/EnvironmentForm.vue
@@ -6,14 +6,14 @@
       <tr>
         <td>Accuracy</td>
         <td>
-          <input type="number" name="accuracy" step="0.01" v-model="accuracy" required id="id_accuracy">
+          <input type="number" name="accuracy" step="0.001" v-model="accuracy" required id="id_accuracy">
         </td>
       </tr>
       <tr>
-        <td>Barometric Pressure (mbar)</td>
+        <td>Barometric Pressure (psi)</td>
         <td>
-          <input type="number" name="barometric_pressure" step="0.01" max="1100" min="800" v-model="barometric_pressure"
-                 required id="id_barometric_pressure">
+          <input type="number" name="pressure" step="0.01" max="1000" min="0" v-model="pressure"
+                 required id="id_pressure">
         </td>
       </tr>
       <tr>
@@ -24,7 +24,7 @@
         </td>
       </tr>
       <tr>
-        <td>Humidity</td>
+        <td>Humidity (%RH)</td>
         <td>
           <input type="number" name="humidity" step="0.01" max="100.0" min="0.0" v-model="humidity" required
                  id="id_humidity">
@@ -35,10 +35,21 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref, defineEmits, watchEffect } from 'vue'
 
-const accuracy = ref(0.05)
-const barometric_pressure = ref(1013.25)
-const temperature = ref(50.0)
-const humidity = ref(50.0)
+const
+  accuracy = ref(0.05),
+  pressure = ref(14.7),
+  temperature = ref(50.0),
+  humidity = ref(50.0)
+
+const emit = defineEmits();
+watchEffect(() => {
+  emit("environment-form", {
+    accuracy,
+    pressure,
+    temperature,
+    humidity,
+  });
+});
 </script>
\ No newline at end of file
diff --git a/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue b/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
index 3f14a7a..4390cc9 100644
--- a/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
+++ b/benchtop-fe/src/components/Instrument/NewInstrumentForm.vue
@@ -3,65 +3,121 @@
   <div class="card-body">
     <table class="table">
       <tbody>
-
-      <tr>
-        <td><h3>Calibration Date</h3>
-          <VueDatePicker v-model="instrument_calibration_date" inline auto-apply :flow="flow"></VueDatePicker>
-        </td>
-        <td><h3>Calibration Due Date</h3>
-          <VueDatePicker v-model="instrument_calibration_due_date" inline auto-apply :flow="flow"></VueDatePicker>
-        </td>
-      </tr>
-      <tr>
-        <td>Model</td>
-        <td>
-          <input type="text" name="instrument_model" maxlength="256" v-model="instrument_model" required
-                 id="id_instrument_model">
-        </td>
-      </tr>
-      <tr>
-        <td>Serial Number</td>
-        <td>
-          <input type="text" name="serial_number" maxlength="256" v-model="serial_number" required
-                 id="id_serial_number">
-        </td>
-      </tr>
-      <tr>
-        <td>Channel</td>
-        <td>
-          <input type="text" name="channel" maxlength="256" v-model="channel" required id="id_channel">
-        </td>
-      </tr>
-      <tr>
-        <td>Transducer Model</td>
-        <td>
-          <input type="text" name="transducer_model" maxlength="256" v-model="transducer_model" required
-                 id="id_transducer_model">
-        </td>
-      </tr>
-      <tr>
-        <td>Transducer Span</td>
-        <td>
-          <input type="text" name="transducer_span" maxlength="256" v-model="transducer_span" required
-                 id="id_transducer_span">
-        </td>
-      </tr>
+        <tr>
+          <td>
+            <h3>Calibration Date</h3>
+            <VueDatePicker
+              v-model="date"
+              inline
+              auto-apply
+              :flow="flow"
+            ></VueDatePicker>
+          </td>
+          <td>
+            <h3>Calibration Due Date</h3>
+            <VueDatePicker
+              v-model="due_date"
+              inline
+              auto-apply
+              :flow="flow"
+            ></VueDatePicker>
+          </td>
+        </tr>
+        <tr>
+          <td>Model</td>
+          <td>
+            <input
+              type="text"
+              name="model"
+              maxlength="256"
+              v-model="model"
+              required
+              id="id_model"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Serial Number</td>
+          <td>
+            <input
+              type="text"
+              name="serial_number"
+              maxlength="256"
+              v-model="serial_number"
+              required
+              id="id_serial_number"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Channel</td>
+          <td>
+            <input
+              type="text"
+              name="channel"
+              maxlength="256"
+              v-model="channel"
+              required
+              id="id_channel"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Transducer Model</td>
+          <td>
+            <input
+              type="text"
+              name="transducer_model"
+              maxlength="256"
+              v-model="transducer_model"
+              required
+              id="id_transducer_model"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>Transducer Span</td>
+          <td>
+            <input
+              type="text"
+              name="transducer_span"
+              maxlength="256"
+              v-model="transducer_span"
+              required
+              id="id_transducer_span"
+            />
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
 </template>
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref, defineEmits, watchEffect } from "vue";
 
-import VueDatePicker from '@vuepic/vue-datepicker';
-import '@vuepic/vue-datepicker/dist/main.css';
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
 
-const channel = ref("")
-const serial_number = ref("")
-const instrument_model = ref("")
-const transducer_model = ref("")
-const transducer_span = ref("")
-const instrument_calibration_due_date = ref("")
-const instrument_calibration_date = ref("")
-const flow = ['year', 'month', 'calendar']
-</script>
\ No newline at end of file
+const
+  channel = ref(""),
+  serial_number = ref(""),
+  model = ref(""),
+  transducer_model = ref(""),
+  transducer_span = ref(""),
+  due_date = ref(""),
+  date = ref(""),
+  flow = ["year", "month", "calendar"]
+
+const emit = defineEmits();
+watchEffect(() => {
+  emit("new-instrument-form", {
+    channel,
+    serial_number,
+    model,
+    transducer_model,
+    transducer_span,
+    due_date,
+    date,
+  });
+});
+</script>
diff --git a/benchtop-fe/src/components/Sheet.vue b/benchtop-fe/src/components/Sheet.vue
index 286ddb8..a48d686 100644
--- a/benchtop-fe/src/components/Sheet.vue
+++ b/benchtop-fe/src/components/Sheet.vue
@@ -7,19 +7,18 @@
 
   <div class="container">
     <div class="item card">
-      <CustomerForm />
+      <CustomerForm @customerForm="customerForm" />
     </div>
     <div class="item card">
-      <EnvironmentForm />
+      <EnvironmentForm @environmentForm="environmentForm" />
     </div>
 
     <div class="item card">
-      <NewInstrumentForm />
+      <NewInstrumentForm @newInstrumentForm="newInstrumentForm" />
     </div>
     <div class="item card">
-      <NewCalibrationDeviceForm />
+      <NewCalibrationDeviceForm @newCalibrationForm="newCalibrationForm" />
     </div>
-
   </div>
 </template>
 
@@ -32,12 +31,51 @@ import NewCalibrationDeviceForm from "./CalibrationDevice/NewCalibrationDeviceFo
 import EnvironmentForm from "./EnvironmentForm.vue";
 import UploadForm from "./UploadForm.vue";
 
-const upload_form_data = ref();
+const
+  upload_form_data = ref(),
+  calibration_form_data = ref(),
+  customer_form_data = ref(),
+  environment_form_data = ref(),
+  new_instrument_form_data = ref(),
+  instrument_form_data = ref(),
+  new_calibration_form_data = ref()
+
 
 const uploadForm = (form) => {
   upload_form_data.value = form;
-}
+};
 
+const customerForm = (form) => {
+  customer_form_data.value = form;
+};
 
-const emits = defineEmits(["uploadForm"]);
+const environmentForm = (form) => {
+  environment_form_data.value = form;
+};
+
+const newInstrumentForm = (form) => {
+  new_instrument_form_data.value = form;
+};
+
+const instrumentForm = (form) => {
+  instrument_form_data.value = form;
+};
+
+const newCalibrationForm = (form) => {
+  new_calibration_form_data.value = form;
+};
+
+const calibrationForm = (form) => {
+  calibration_form_data.value = form;
+};
+
+const emits = defineEmits([
+  "uploadForm",
+  "customerForm",
+  "environmentForm",
+  "instrumentForm",
+  "newInstrumentForm",
+  "calibrationForm",
+  "newCalibrationForm",
+]);
 </script>
diff --git a/benchtop-fe/src/components/UploadForm.vue b/benchtop-fe/src/components/UploadForm.vue
index d5acf60..3172ea2 100644
--- a/benchtop-fe/src/components/UploadForm.vue
+++ b/benchtop-fe/src/components/UploadForm.vue
@@ -81,10 +81,11 @@
 <script setup>
 import { ref, computed, watchEffect } from "vue";
 
-const report_type = ref("");
-const files = ref([]);
-const current_file = ref(null);
-const doc = ref();
+const
+  report_type = ref(""),
+  files = ref([]),
+  current_file = ref(null),
+  doc = ref();
 
 const showUpload = computed({
   get() {
diff --git a/benchtop-fe/src/components/_UploadForm.vue b/benchtop-fe/src/components/_UploadForm.vue
deleted file mode 100644
index a8e94ce..0000000
--- a/benchtop-fe/src/components/_UploadForm.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div class="card-header">Report Uploads</div>
-  <div class="card-body">
-    <table class="table">
-      <tbody>
-      <tr>
-        <td>Report Type</td>
-        <td>
-          <select name="report_type" v-model="report_type" required id="id_report_type">
-            <option value="" selected>---------</option>
-            <option value="TV">Transducer Verify</option>
-            <option value="HC">Hardware Calibration</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td colspan=2>
-          <ul>
-            <li v-for="file in files" :key="file.id">
-              {{ file.name }}
-                <label>
-                  <input type="radio" name="alignment" value="both" @change="kindChange('both', file)"> Both
-                </label>
-                <label>
-                    <input type="radio" name="alignment" value="left" @change="kindChange('left', file)"> As Left
-                </label>
-                <label>
-                    <input type="radio" name="alignment" value="found" @change="kindChange('found', file)"> As Found
-                </label>
-            </li>
-          </ul>
-          <file-upload
-              class="btn btn-primary"
-              post-action="/upload/post"
-              extensions="txt"
-              accept="text/plain"
-              :multiple="true"
-              :size="1024 * 1024 * 10"
-              v-model="files"
-              @input-filter="inputFilter"
-              @input-file="inputFile"
-              ref="upload">
-            <i class="fa fa-plus"></i>
-            Select files
-          </file-upload>
-
- <button type="button" class="btn btn-success" v-if="!upload || !upload.active" @click.prevent="upload.active = true">
-          <i class="fa fa-arrow-up" aria-hidden="true"></i>
-          Start Upload
-        </button>
-        <button type="button" class="btn btn-danger"  v-else @click.prevent="upload.active = false">
-          <i class="fa fa-stop" aria-hidden="true"></i>
-          Stop Upload
-        </button>
-
-        </td>
-      </tr>
-      <tr>
-        <td>&nbsp;</td>
-        <td align="right">
-          <input type="submit" value="Generate PDF and Label">
-        </td>
-      </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-
-
-<script setup>
-import { ref, defineProps } from 'vue'
-import {VueUploadComponent as FileUpload} from 'vue-upload-component'
-
-const report_type = ref('')
-const files = ref([])
-const upload = ref(null)
-
-const inputFile = (newFile, oldFile) => {
-  if (newFile && oldFile && !newFile.active && oldFile.active) {
-    // Get response data
-    console.log('response', newFile.response)
-    if (newFile.xhr) {
-      // Get the response status code
-      console.log('status', newFile.xhr.status)
-    }
-  }
-}
-
-const inputFilter = (newFile, oldFile, prevent) => {
-  if (newFile && !oldFile) {
-    // Filter non-image file
-    if (!/\.(txt)$/i.test(newFile.name)) {
-      return prevent()
-    }
-  }
-
-  // Create a blob field
-  newFile.blob = ''
-  const URL = window.URL || window.webkitURL
-  if (URL && URL.createObjectURL) {
-    newFile.blob = URL.createObjectURL(newFile.file)
-  }
-  console.log(URL)
-}
-
-const kindChange = (opt, file) => {
-  // Change the file kind metadata, (both, as found, as left) for the uploaded file
-  file.kind = opt
-  console.log(file)
-}
-</script>
\ No newline at end of file
diff --git a/benchtop-fe/src/style.css b/benchtop-fe/src/style.css
index cbec394..4539eb0 100644
--- a/benchtop-fe/src/style.css
+++ b/benchtop-fe/src/style.css
@@ -1,5 +1,6 @@
 body {
   margin: 1rem;
+  background: url("/public/funky-lines.webp")
 }
 
 .card {
@@ -7,6 +8,9 @@ body {
 }
 .card-header{
     font-size: 2rem;
+    color:black;
+    font-weight: bold;
+
 }
 
 .container {
@@ -15,7 +19,7 @@ body {
   align-content: space-between;
   /* Your container needs a fixed height, and it
    * needs to be taller than your tallest column. */
-  height: 1300px;
+  height: 1200px;
 
   border-radius: 3px;
   counter-reset: items;
@@ -34,7 +38,7 @@ body {
     0 8px 8px rgba(0,90,250,0.05),
     0 16px 16px rgba(0,90,250,0.05);
   color: #fff;
-  padding: 15px;
+  /* padding: 15px; */
   box-sizing: border-box;
 }
 .item::before {
@@ -53,4 +57,6 @@ body {
   width: 0;
   order: 2;
 }
-h3 { text-align: center; }
\ No newline at end of file
+h3 {
+  text-align: center;
+}
\ No newline at end of file