diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 3946d5641..6003102f3 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -900,3 +900,9 @@ tr:nth-child(odd) td.db-filled {
     display: block;
   }
 }
+
+label.environment-option-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/breeding-insight/dao/ExperimentDAO.ts b/src/breeding-insight/dao/ExperimentDAO.ts
index 42b336b0f..c344fa5c8 100644
--- a/src/breeding-insight/dao/ExperimentDAO.ts
+++ b/src/breeding-insight/dao/ExperimentDAO.ts
@@ -19,8 +19,6 @@ import {BiResponse, Response} from "@/breeding-insight/model/BiResponse";
 import * as api from "@/util/api";
 import {Result, ResultGenerator} from "@/breeding-insight/model/Result";
 import {Trial} from "@/breeding-insight/model/Trial.ts";
-import * as UUID from "uuid";
-import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {DatasetModel} from "@/breeding-insight/model/DatasetModel";
 
 export class ExperimentDAO {
diff --git a/src/breeding-insight/dao/StudyDAO.ts b/src/breeding-insight/dao/StudyDAO.ts
index 0d2e5e928..331444d7e 100644
--- a/src/breeding-insight/dao/StudyDAO.ts
+++ b/src/breeding-insight/dao/StudyDAO.ts
@@ -23,15 +23,18 @@ import {BrAPIDAOUtil} from "@/breeding-insight/dao/BrAPIDAOUtil";
 
 export class StudyDAO {
 
-  static async getAllForTrial(programId: string, trialId: string): Promise<Result<Error, BiResponse>> {
+  static async getAllForTrial(programId: string, externalReferenceId: string): Promise<Result<Error, BiResponse>> {
+    // Use GET endpoint to get all Studies for a single Trial by external reference.
+    const { data } = await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/studies`,
+      method: 'get',
+      params: {
+        externalReferenceId: externalReferenceId,
+        externalReferenceSource: `${process.env.VUE_APP_BI_REFERENCE_SOURCE}/trials`,
+        pageSize: 1000000 }
+    }) as Response;
 
-    const body = {
-      trialDbIds: [
-        trialId
-      ]
-    };
-
-    return await BrAPIDAOUtil.search(`${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/brapi/v2/search/studies`, body);
+    return ResultGenerator.success(new BiResponse(data));
   }
 
   static async getAll(programId: string, paginationQuery: PaginationQuery, full : boolean): Promise<Result<Error, BiResponse>> {
diff --git a/src/breeding-insight/model/EnvironmentOption.ts b/src/breeding-insight/model/EnvironmentOption.ts
deleted file mode 100644
index a7646bafe..000000000
--- a/src/breeding-insight/model/EnvironmentOption.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * See the NOTICE file distributed with this work for additional information
- * regarding copyright ownership.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import {SelectOption} from "@/breeding-insight/model/SelectOption";
-
-export class EnvironmentOption implements SelectOption<string, string> {
-    static all = new EnvironmentOption("All", "all");
-
-    name: string;
-    id: string;
-
-    constructor(name: string, id: string) {
-        this.name = name;
-        this.id = id;
-    }
-}
\ No newline at end of file
diff --git a/src/breeding-insight/model/ExperimentExportOptions.ts b/src/breeding-insight/model/ExperimentExportOptions.ts
index c1c7734ab..6476c079a 100644
--- a/src/breeding-insight/model/ExperimentExportOptions.ts
+++ b/src/breeding-insight/model/ExperimentExportOptions.ts
@@ -17,15 +17,15 @@
 
 import {FileTypeOption} from "@/breeding-insight/model/FileTypeOption";
 import {ExperimentDatasetOption} from "@/breeding-insight/model/ExperimentDatasetOption";
-import {EnvironmentOption} from "@/breeding-insight/model/EnvironmentOption";
 
 // Stores the user selected options for Experiment Observation file export.
 export class ExperimentExportOptions {
 
     public fileExtension: string = FileTypeOption.xls.id;
     public dataset: string = ExperimentDatasetOption.observations.id;
-    public environments: string[] = [EnvironmentOption.all.id];
-    public includeTimestamps: string = 'Yes';
+    public environments: string[] = [];
+    public allEnvironments: boolean = false;
+    public includeTimestamps: string = 'No';
 
     public timestampsTrueFalseString(): string {
         if (this.includeTimestamps.toLowerCase() === 'yes')
diff --git a/src/breeding-insight/model/Study.ts b/src/breeding-insight/model/Study.ts
index 56861c702..c3fcea8d0 100644
--- a/src/breeding-insight/model/Study.ts
+++ b/src/breeding-insight/model/Study.ts
@@ -15,6 +15,8 @@
  * limitations under the License.
  */
 
+import {ExternalReferences} from "@/breeding-insight/brapi/model/externalReferences";
+
 export class Study {
   id?: string;
   name?: string;
@@ -24,6 +26,8 @@ export class Study {
   endDate?: Date | null;
   location?: string;
   active?: boolean;
+  externalReferences?: ExternalReferences;
+
 
   constructor(id?: string,
               name?: string,
@@ -32,7 +36,8 @@ export class Study {
               startDate?: string,
               endDate?: string,
               location?: string,
-              active?: boolean
+              active?: boolean,
+              externalReferences?: ExternalReferences
               ) {
     this.id = id;
     this.name = name;
@@ -50,13 +55,14 @@ export class Study {
     } else {
       this.active = true;
     }
+    this.externalReferences = externalReferences;
   }
 
   static assign(study: Study): Study {
     const start: string | undefined = study.startDate ? study.startDate.toISOString() : undefined;
     const end: string | undefined = study.endDate ? study.endDate.toISOString() : undefined;    
 
-    return new Study(study.id, study.name, study.description, study.type, start, end, study.location, study.active);
+    return new Study(study.id, study.name, study.description, study.type, start, end, study.location, study.active, study.externalReferences);
   }
 
   equals(study?: Study): boolean {
diff --git a/src/breeding-insight/service/BrAPIService.ts b/src/breeding-insight/service/BrAPIService.ts
index 94dcb115e..cc277d0b7 100644
--- a/src/breeding-insight/service/BrAPIService.ts
+++ b/src/breeding-insight/service/BrAPIService.ts
@@ -44,7 +44,7 @@ export class BrAPIService {
       params['sortOrder'] = sort.order;
     }
     if (pagination.page || pagination.page == 0) { //have to account for 0-index pagination since 0 falsy
-      params ['page'] = pagination.page;
+      params['page'] = pagination.page;
     }
     if (pagination.pageSize) {
       params['pageSize'] = pagination.pageSize;
diff --git a/src/breeding-insight/service/ProgramService.ts b/src/breeding-insight/service/ProgramService.ts
index ec20f3e2d..7bcacff21 100644
--- a/src/breeding-insight/service/ProgramService.ts
+++ b/src/breeding-insight/service/ProgramService.ts
@@ -38,7 +38,7 @@ export class ProgramService {
       if (program.id === undefined) {
         ProgramDAO.create(program).then((biResponse) => {
           const result: any = biResponse.result;
-          const newProgram = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl);
+          const newProgram = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl, result.key);
           resolve(newProgram);
 
         }).catch((error) => {
@@ -68,7 +68,7 @@ export class ProgramService {
       if (program.id) {
         ProgramDAO.update(program.id, program).then((biResponse) => {
           const result: any = biResponse.result;
-          const newProgram = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl);
+          const newProgram = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl, result.key);
           resolve(newProgram);
 
         }).catch((error) => reject(error));
@@ -125,7 +125,7 @@ export class ProgramService {
 
       ProgramDAO.getOne(programId).then((biResponse) => {
         const result = biResponse.result;
-        const program = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl);
+        const program = new Program(result.id, result.name, result.species.id, result.numUsers, result.brapiUrl, result.key);
         resolve(program);
       }).catch((error) => reject(error));
 
diff --git a/src/breeding-insight/service/StudyService.ts b/src/breeding-insight/service/StudyService.ts
index 85a9f643c..6eb4eb408 100644
--- a/src/breeding-insight/service/StudyService.ts
+++ b/src/breeding-insight/service/StudyService.ts
@@ -21,10 +21,11 @@ import {BiResponse, Metadata} from "@/breeding-insight/model/BiResponse";
 import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
 import {PaginationUtilities} from "@/breeding-insight/model/view_models/PaginationUtilities";
 import {Result, ResultGenerator } from "@/breeding-insight/model/Result";
+import {Trial} from "@/breeding-insight/model/Trial";
+import {BrAPIUtils} from "@/breeding-insight/utils/BrAPIUtils";
 
 export class StudyService {
-  
-  static async getAll(programId: string, trialId?: string, paginationQuery?: PaginationQuery, full?: boolean): Promise<Result<Error, [Study[], Metadata]>> {
+  static async getAll(programId: string, trial?: Trial, paginationQuery?: PaginationQuery, full?: boolean): Promise<Result<Error, [Study[], Metadata]>> {
 
     if (paginationQuery === undefined){
       paginationQuery = new PaginationQuery(0, 0, true);
@@ -38,8 +39,11 @@ export class StudyService {
       if(!programId) throw new Error('missing or invalid program id');
       
       let response: Result<Error, BiResponse>;
-      if (trialId) {
-        response = await StudyDAO.getAllForTrial(programId, trialId) as Result<Error, BiResponse>;
+      if (trial !== undefined && trial.externalReferences !== undefined) {
+        let externalReferenceId = BrAPIUtils.getBreedingInsightId(trial.externalReferences, '/trials');
+        // Throw if trial is missing ExternalReferenceId.
+        if (externalReferenceId === undefined) throw new Error("Trial is missing external reference.");
+        response = await StudyDAO.getAllForTrial(programId, externalReferenceId) as Result<Error, BiResponse>;
       } else {
         response = await StudyDAO.getAll(programId, paginationQuery, full) as Result<Error, BiResponse>;
       }
@@ -52,7 +56,7 @@ export class StudyService {
         
         data = PaginationUtilities.mockSortRecords(data);
         studies = data.map((study: any) => {
-          return new Study(study.studyDbId, study.studyName, study.studyDescription, study.studyType, study.startDate, study.endDate, study.locationName, study.active);
+          return new Study(study.studyDbId, study.studyName, study.studyDescription, study.studyType, study.startDate, study.endDate, study.locationName, study.active, study.externalReferences);
         });
 
         let newPagination;
diff --git a/src/components/experiments/ExperimentObservationsDownloadButton.vue b/src/components/experiments/ExperimentObservationsDownloadButton.vue
index af899fa31..14f87d0fe 100644
--- a/src/components/experiments/ExperimentObservationsDownloadButton.vue
+++ b/src/components/experiments/ExperimentObservationsDownloadButton.vue
@@ -17,7 +17,7 @@
 
 <template>
   <DownloadButton
-    v-bind:unique-id="trialDbId"
+    v-bind:unique-id="trialId"
     v-bind:modal-title="modalTitle"
     v-bind:download="downloadList"
     v-bind:anchor-class="anchorClass"
@@ -26,17 +26,17 @@
   >
     <template #form>
       <div class="columns mb-4">
-        <!-- DatasetModel Select -->
+        <!-- Dataset Select -->
         <div class="column control">
           <div class="field">
             <label
               class="label"
-              v-bind:for="`dataset-select-${trialDbId}`"
-            ><span>DatasetModel</span></label>
+              v-bind:for="`dataset-select-${trialId}`"
+            ><span>Dataset</span></label>
             <div class="control">
               <div class="select">
                 <select
-                  v-bind:id="`dataset-select-${trialDbId}`"
+                  v-bind:id="`dataset-select-${trialId}`"
                   v-model="fileOptions.dataset"
                 >
                   <option
@@ -57,16 +57,29 @@
             <legend class="label required">
               <span class="required">Environment(s)</span>
             </legend>
+            <div class="control">
+              <label
+                class="checkbox environment-option-label"
+              >
+                <input
+                  v-model="fileOptions.allEnvironments"
+                  type="checkbox"
+                  value="all"
+                >
+                All Environments
+              </label>
+            </div>
             <div
               v-for="option in environmentOptions"
               v-bind:key="option.id"
               class="control"
             >
-              <label class="checkbox">
+              <label class="checkbox environment-option-label">
                 <input
                   v-model="fileOptions.environments"
                   type="checkbox"
                   v-bind:value="option.id"
+                  v-bind:disabled="fileOptions.allEnvironments"
                 >
                 {{ option.name }}
               </label>
@@ -92,7 +105,7 @@
             </legend>
             <div class="field">
               <input
-                v-bind:id="`timestamps-switch-${trialDbId}`"
+                v-bind:id="`timestamps-switch-${trialId}`"
                 v-model="fileOptions.includeTimestamps"
                 type="checkbox"
                 true-value="Yes"
@@ -101,8 +114,8 @@
                 class="switch is-info is-rounded"
               >
               <label
-                v-bind:id="`timestamps-label-${trialDbId}`"
-                v-bind:for="`timestamps-switch-${trialDbId}`"
+                v-bind:id="`timestamps-label-${trialId}`"
+                v-bind:for="`timestamps-switch-${trialId}`"
               >{{ fileOptions.includeTimestamps }}</label>
             </div>
           </fieldset>
@@ -145,9 +158,14 @@ import {Program} from "@/breeding-insight/model/Program";
 import {ExperimentExportOptions} from "@/breeding-insight/model/ExperimentExportOptions";
 import {FileTypeOption} from "@/breeding-insight/model/FileTypeOption";
 import {ExperimentDatasetOption} from "@/breeding-insight/model/ExperimentDatasetOption";
-import {EnvironmentOption} from "@/breeding-insight/model/EnvironmentOption";
 import {AlertTriangleIcon} from 'vue-feather-icons';
 import DownloadButton from "@/components/DownloadButton.vue";
+import {Trial} from "@/breeding-insight/model/Trial";
+import {Metadata} from "@/breeding-insight/model/BiResponse";
+import {Study} from "@/breeding-insight/model/Study";
+import {StudyService} from "@/breeding-insight/service/StudyService";
+import {Result} from "@/breeding-insight/model/Result";
+import {BrAPIUtils} from "@/breeding-insight/utils/BrAPIUtils";
 
 @Component({
   mixins: [validationMixin],
@@ -163,7 +181,9 @@ export default class ExperimentObservationsDownloadButton extends Vue {
   @Prop()
   active!: boolean;
   @Prop()
-  trialDbId!: string;
+  trialId!: string;
+  @Prop()
+  experiment!: Trial;
   @Prop()
   modalTitle?: string;
   @Prop()
@@ -174,7 +194,21 @@ export default class ExperimentObservationsDownloadButton extends Vue {
   private showEnvironmentsValidationError: boolean = false;
   private fileExtensionOptions: object[] = Object.values(FileTypeOption);
   private datasetOptions: object[] = Object.values(ExperimentDatasetOption);
-  private environmentOptions: object[] = Object.values(EnvironmentOption);
+  private environmentOptions: object[] = [];
+
+  async mounted() {
+    // Fetch all environments (studies) for this experiment.
+    try {
+      const response: Result<Error, [Study[], Metadata]> = await StudyService.getAll(this.activeProgram!.id!, this.experiment);
+      if(response.isErr()) throw response.value;
+      let [studies, metadata] = response.value;
+      // Set environment options.
+      this.environmentOptions = studies.map((s) => ({id: BrAPIUtils.getBreedingInsightId(s.externalReferences!, '/studies'), name: s.name}));
+    } catch (error) {
+      // Display error that studies cannot be loaded
+      this.$emit('show-error-notification', 'Error while trying to load studies');
+    }
+  }
 
   downloadList(): boolean {
     // Validate selected options.
@@ -185,13 +219,12 @@ export default class ExperimentObservationsDownloadButton extends Vue {
             + '/v1/programs/'
             + this.activeProgram.id
             + '/experiments/'
-            + this.trialDbId
+            + this.trialId
             + '/export?fileExtension='
             + this.fileOptions.fileExtension
             + '&dataset='
             + this.fileOptions.dataset
-            // + '&environments='
-            // + this.fileOptions.environments
+            + (this.fileOptions.allEnvironments ? '' : ('&environments=' + this.fileOptions.environments))
             + '&includeTimestamps='
             + this.fileOptions.timestampsTrueFalseString(),
             '_blank');
@@ -209,7 +242,8 @@ export default class ExperimentObservationsDownloadButton extends Vue {
   }
 
   validateOptions(): boolean {
-    if (this.fileOptions.environments.length === 0){
+    // Either "All environments" or one or more specific environments must be selected.
+    if (this.fileOptions.environments.length === 0 && !this.fileOptions.allEnvironments){
       this.$emit('show-error-notification', 'One or more environments must be selected.');
       this.showEnvironmentsValidationError = true;
       return false;
diff --git a/src/components/experiments/ExperimentsObservationsTable.vue b/src/components/experiments/ExperimentsObservationsTable.vue
index 88acd7034..12757f5ec 100644
--- a/src/components/experiments/ExperimentsObservationsTable.vue
+++ b/src/components/experiments/ExperimentsObservationsTable.vue
@@ -54,8 +54,9 @@
       </b-table-column>
       <b-table-column field="data.listDbId" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         <ExperimentObservationsDownloadButton
+          v-bind:experiment="props.row.data"
           v-bind:modal-title="`Download ${props.row.data.trialName}`"
-          v-bind:trial-db-id="BrAPIUtils.getBreedingInsightId(props.row.data.externalReferences, '/trials')"
+          v-bind:trial-id="BrAPIUtils.getBreedingInsightId(props.row.data.externalReferences, '/trials')"
           v-on:show-error-notification="$emit('show-error-notification', $event)"
         >
           Download
diff --git a/src/components/observations/ObservationsListTable.vue b/src/components/observations/ObservationsListTable.vue
deleted file mode 100644
index cfbdb3596..000000000
--- a/src/components/observations/ObservationsListTable.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <section id="observationsTableLabel">
-    <WarningModal
-      v-bind:active.sync="deactivateActive"
-      v-bind:msg-title="deactivateWarningTitle"
-      v-on:deactivate="deactivateActive = false"
-    >
-      <section>
-        <p class="has-text-dark">
-          Program-related data referencing this observation will not be affected by this change.
-        </p>
-      </section>
-      <div class="columns">
-        <div class="column is-whole has-text-centered buttons">
-          <button v-on:click="modalDeleteHandler()" class="button is-danger"><strong>Yes, remove</strong></button>
-          <button v-on:click="deactivateActive = false" class="button">Cancel</button>
-        </div>
-      </div>              
-    </WarningModal>
-
-    <ExpandableTable
-      v-bind:records.sync="observations"
-      v-bind:loading="this.observationsLoading"
-      v-bind:row-validations="observationValidations"
-      v-bind:pagination="paginationController"
-      v-bind:data-form-state="editObservationFormState"
-      v-on:submit="updateObservation($event)"
-      v-on:remove="displayWarning($event)"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-      <b-table-column field="data.germplasmName" label="Germplasm" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.germplasmName }}</p>
-      </b-table-column>
-      <b-table-column field="data.observationUnitName" label="Observation Unit" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.observationUnitName }}</p>
-      </b-table-column>
-      <b-table-column field="data.observationVariableName" label="Trait" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.observationVariableName }}</p>
-      </b-table-column>
-      <b-table-column field="data.value" label="Value" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.value }}</p>
-      </b-table-column>
-      <b-table-column field="data.season" label="Season" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <template v-if="props.row.data.season.id">
-          <template v-if="(props.row.data.season.name != props.row.data.season.year)" >
-            <p>{{ props.row.data.season.name + " - " + props.row.data.season.year }}</p>
-          </template>
-          <template v-else>
-            <p>{{ props.row.data.season.name}}</p>
-          </template>
-        </template>
-      </b-table-column>
-      <b-table-column :custom-sort="sortTimestamp" label="Timestamp" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.timeStamp | dmyFormat}}</p>
-      </b-table-column>
-      <b-table-column field="data.collector" label="Collector" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.collector }}</p>
-      </b-table-column>
-      <b-table-column field="data.uploadedBy" label="Uploaded By" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <p>{{ props.row.data.uploadedBy }}</p>
-      </b-table-column>
-      <template v-slot:edit="{editData, validations}">
-        <div class="columns">
-          <div class="column is-two-fifths">
-            <BasicInputField
-              v-model="editData.name"
-              v-bind:validations="validations.name"
-              v-bind:field-name="'Name'"
-              v-bind:field-help="'Observation name as preferred. All Unicode special characters accepted.'"
-            />
-          </div>
-        </div>
-      </template>
-      <template v-slot:emptyMessage>
-          <p class="has-text-weight-bold">
-            No observations are currently defined for this program.
-          </p>
-      </template>
-    </ExpandableTable>
-  </section>
-</template>
-
-<script lang="ts">
-  import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
-  import WarningModal from '@/components/modals/WarningModal.vue'
-  import {PlusCircleIcon} from 'vue-feather-icons'
-  import {validationMixin} from 'vuelidate';
-  import {Validations} from 'vuelidate-property-decorators'
-  import {required} from 'vuelidate/lib/validators'
-  import { mapGetters } from 'vuex'
-  import {Program} from "@/breeding-insight/model/Program";
-  import NewDataForm from '@/components/forms/NewDataForm.vue'
-  import BasicInputField from "@/components/forms/BasicInputField.vue";
-  import {ObservationService} from "@/breeding-insight/service/ObservationService";
-  import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
-  import TableColumn from "@/components/tables/TableColumn.vue";
-  import {Metadata} from "@/breeding-insight/model/BiResponse";
-  import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
-  import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
-  import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
-  import {Observation} from '@/breeding-insight/model/Observation'
-  import {Result, Err, Success, ResultGenerator } from "@/breeding-insight/model/Result";
-  import { dmyFormat } from '@/breeding-insight/utils/filters';
-  import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
-  import {DataType, Scale} from "@/breeding-insight/model/Scale";
-  import {Method, MethodClass} from "@/breeding-insight/model/Method";
-
-@Component({
-  mixins: [validationMixin],
-  components: { ExpandableTable, NewDataForm, BasicInputField, EmptyTableMessage, TableColumn,
-                WarningModal, 
-                PlusCircleIcon },
-  computed: {
-    ...mapGetters([
-      'activeProgram'
-    ])
-  },
-  filters: {
-    dmyFormat
-  }
-})
-export default class ObservationsTable extends Vue {
-
-  private activeProgram?: Program;
-  private programId?: string = this.$route.params.programId;
-  private studyId?: string = this.$route.params.studyId;
-  private observations: Observation[] = [];
-  private deactivateActive: boolean = false;
-  private newObservationActive: boolean = false;
-  private deactivateWarningTitle: string = "Remove location from Program name?";
-  private newObservation = new Observation();
-  private programName: string = "Program Name";
-  private deleteObservation?: Observation;
-
-  private observationsLoading = true;
-
-  private paginationController: PaginationController = new PaginationController();
-
-  private newObservationFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
-  private editObservationFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
-
-  observationValidations = {
-    name: {required}
-  }
-
-  mounted() {
-    this.getObservations();
-  }
-
-  @Watch('paginationController', { deep: true})
-  async getObservations() {
-    let currentCall = this.paginationController.currentCall
-    let paginationQuery: PaginationQuery = this.paginationController.getPaginationSelections();
-    if(currentCall && currentCall!.page == paginationQuery.page && currentCall!.pageSize == paginationQuery.pageSize && currentCall!.showAll == paginationQuery.showAll) {
-      return;
-    }
-    this.paginationController.setCurrentCall(paginationQuery);
-
-    try {
-      const response: Result<Error, [Observation[], Metadata]> = await ObservationService.getByStudy(this.programId!, this.studyId!, paginationQuery);
-      if(response.isErr()) throw response.value;
-      let [observations, metadata] = response.value;
-
-      if (this.paginationController.matchesCurrentRequest(metadata.pagination)) {
-        this.observations = observations;
-        this.paginationController.setPaginationInfo(metadata.pagination);
-      }
-    } catch (err) {
-      // Display error that observations cannot be loaded
-      this.$emit('show-error-notification', 'Error while trying to load observations');
-    } finally {
-      this.observationsLoading = false;
-    }
-  }
-
-  createObservation() {
-    this.newObservationActive = true;
-  }
-
-//   updateObservation(updatedObservation: Observation) {
-
-//     ObservationService.update(updatedObservation).then(() => {
-//       this.getObservations();
-//       this.$emit('show-success-notification', 'Success! ' + updatedObservation.observationName + ' updated.');
-// }).catch((error: any) => {
-//       this.$emit('show-error-notification', error['errorMessage']);
-//     }).finally(() => this.editObservationFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT));
-
-//   }
-
-  saveObservation() {
-
-    // this.newObservation.id = this.activeProgram!.id;
-
-    // ObservationService.create(this.newObservation).then((observation: Observation) => {
-    //   this.paginationController.updatePage(1);
-    //   this.getObservations();
-    //   this.$emit('show-success-notification', 'Success! ' + this.newObservation.observationName + ' added.');
-    //   this.newObservation = new Observation();
-    //   this.newObservationActive = false;
-    // }).catch((error) => {
-    //   this.$emit('show-error-notification', error['errorMessage']);
-    // }).finally(() => this.newObservationFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT))
-
-  }
-
-  cancelNewObservation() {
-    this.newObservation = new Observation();
-    this.newObservationActive = false;
-  }
-
-  displayWarning(observation: Observation) {
-
-    if (observation){
-      this.deleteObservation = observation;
-      this.deactivateWarningTitle = "Remove " + observation.value + " from " + this.activeProgram!.name + "?";
-      this.deactivateActive = true;
-    } else {
-      Vue.$log.error('Could not find object to delete')
-    }
-  }
-
-  sortTimestamp(a: any, b: any, isAsc: boolean) {
-    if(isAsc) {
-      return dmyFormat(a.data.timeStamp)!.localeCompare(dmyFormat(b.data.timeStamp)!);
-    } else {
-      return dmyFormat(b.data.timeStamp)!.localeCompare(dmyFormat(a.data.timeStamp)!);
-    }
-  }
-
-  // modalDeleteHandler() {
-  //   this.deactivateActive = false;
-
-  //   if (this.deleteObservation) {
-  //     if (this.deleteObservation.id) {
-  //       if (this.deleteObservation.observationName) {
-  //         const deleteId: string = this.deleteObservation.id;
-  //         const deleteName: string = this.deleteObservation.observationName;
-  //         ObservationService.delete(this.activeProgram!.id!, deleteId).then(() => {
-  //           this.getObservations();
-  //           this.$emit('show-success-notification', `${deleteName} removed from program`);
-  //         }).catch((error) => {
-  //           this.$emit('show-error-notification', error['errorMessage']);
-  //         })
-  //         return;
-  //       }
-  //     }
-  //   }
-  //   this.$emit('show-error-notification', `Unable to remove observation`);
-  // }
-
-}
-
-</script>
diff --git a/src/components/trials/StudiesListTable.vue b/src/components/trials/StudiesListTable.vue
deleted file mode 100644
index 28cfd9377..000000000
--- a/src/components/trials/StudiesListTable.vue
+++ /dev/null
@@ -1,431 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <section id="studyTableLabel">
-    <WarningModal
-      v-bind:active.sync="deactivateActive"
-      v-bind:msg-title="deactivateWarningTitle"
-      v-on:deactivate="deactivateActive = false"
-    >
-      <section>
-        <p class="has-text-dark" :class="this.$modalTextClass">
-          Program-related data referencing this study will not be affected by this change.
-        </p>
-      </section>
-      <div class="columns">
-        <div class="column is-whole has-text-centered buttons">
-          <button
-            class="button is-danger"
-            v-on:click="modalDeleteHandler"
-          >
-            <strong>Yes, {{ focusStudy.active ? 'archive' : 'restore' }}</strong>
-          </button>
-          <button
-            class="button"
-            v-on:click="deactivateActive = false"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>              
-    </WarningModal>
-
-    <!-- <div class="columns has-text-right mb-0"> -->
-    <!--   <div class="column"> -->
-    <!--     <button -->
-    <!--         data-testid="newDataForm" -->
-    <!--         v-show="!newStudyActive & studies.length > 0" -->
-    <!--         class="button is-primary has-text-weight-bold" -->
-    <!--         v-on:click="activateNewStudyForm" -->
-    <!--     > -->
-    <!--     <span class="icon is-small"> -->
-    <!--       <PlusCircleIcon -->
-    <!--           size="1.5x" -->
-    <!--           aria-hidden="true" -->
-    <!--       /> -->
-    <!--     </span> -->
-    <!--       <span> -->
-    <!--       New Study -->
-    <!--     </span> -->
-    <!--     </button> -->
-    <!--   </div> -->
-    <!-- </div> -->
-
-    <NewDataForm
-        v-if="newStudyActive"
-        v-bind:new-record.sync="newStudy"
-        v-bind:data-form-state="newStudyFormState"
-        v-on:submit="saveStudy"
-        v-on:cancel="cancelNewStudy"
-        v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-      <!-- <template v-slot="validations"> -->
-      <!--   <BaseStudyForm -->
-      <!--       v-on:trait-change="newStudy = $event" -->
-      <!--       v-bind:trait="newStudy" -->
-      <!--       v-bind:scale-options="scaleClassOptions" -->
-      <!--       v-bind:method-options="methodClassOptions" -->
-      <!--       v-bind:program-observation-levels="observationLevelOptions" -->
-      <!--       v-bind:validation-handler="validationHandler" -->
-      <!--   ></BaseStudyForm> -->
-      <!-- </template> -->
-    </NewDataForm>
-
-    <SidePanelTable
-      ref="sidePanelTable"
-      v-bind:records="studies"
-      v-bind:pagination="studiesPagination"
-      v-bind:auto-handle-close-panel-event="false"
-      v-bind:side-panel-state="studySidePanelState"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-      v-on:paginate="paginationController.updatePage($event)"
-      v-on:paginate-toggle-all="paginationController.toggleShowAll()"
-      v-on:paginate-page-size="paginationController.updatePageSize($event)"
-    >
-
-      <!-- 
-        Table row column slot specification
-        data: T
-      -->
-      <template v-slot:columns="data">
-        <TableColumn name="name" v-bind:label="'Name'">
-          <b-button
-              size="is-small"
-              class="archive-tag"
-              v-if="!data.active && data.active !== undefined">
-            Archived
-          </b-button>
-          {{ data.name }}
-        </TableColumn>
-        <TableColumn name="location" v-bind:label="'location'" v-bind:visible="!studySidePanelState.collapseColumns">
-          {{ data.location }}
-        </TableColumn>        
-        <TableColumn name="start date" v-bind:label="'Start'" v-bind:visible="!studySidePanelState.collapseColumns">
-          {{ data.startDate | dmyFormat }}
-        </TableColumn>
-        <TableColumn name="end date" v-bind:label="'End'" v-bind:visible="!studySidePanelState.collapseColumns">
-          {{ data.endDate | dmyFormat }}
-        </TableColumn>        
-      </template>
-
-      <!-- 
-        Side panel data slot specification
-        data: T
-      -->
-      <template v-slot:side-panel="{tableRow}">
-        <StudyDetailPanel
-          v-bind:data="studySidePanelState.openedRow"
-          v-bind:edit-active="studySidePanelState.editActive"
-          v-bind:editable="currentStudyEditable"
-          v-bind:loading-editable="loadingStudyEditable"
-          v-bind:edit-form-state="studySidePanelState.dataFormState"
-          v-bind:validation-handler="editValidationHandler"
-          v-bind:archivable="true"
-          v-on:activate-edit="activateEdit($event)"
-          v-on:deactivate-edit="studySidePanelState.bus.$emit(studySidePanelState.closePanelEvent)"
-          v-on:study-change="editStudy = Study.assign({...$event})"
-          v-on:submit="updateStudy"
-          v-on:archive="activateArchive($event)"
-          v-on:restore="activateArchive($event)"
-        />
-      </template>
-
-      <template v-slot:emptyMessage>
-        <EmptyTableMessage
-            v-bind:button-view-toggle="!newStudyActive"
-            v-bind:button-text="'New Study'"
-            v-on:newClick="activateNewStudyForm"
-        >
-          <p class="has-text-weight-bold">
-            No studies are currently defined for this trial.
-          </p>
-          Create new studies by clicking "New Study".
-        </EmptyTableMessage>
-      </template>
-    </SidePanelTable>
-  </section>
-</template>
-
-<script lang="ts">
-import {Component, Vue, Watch} from 'vue-property-decorator'
-import WarningModal from '@/components/modals/WarningModal.vue'
-import {PlusCircleIcon} from 'vue-feather-icons'
-import {validationMixin} from 'vuelidate';
-import {Study} from '@/breeding-insight/model/Study'
-import { mapGetters } from 'vuex'
-import {Program} from "@/breeding-insight/model/Program";
-import NewDataForm from '@/components/forms/NewDataForm.vue'
-import BasicInputField from "@/components/forms/BasicInputField.vue";
-import SidePanelTable from "@/components/tables/SidePanelTable.vue";
-import StudyDetailPanel from "@/components/trials/StudyDetailPanel.vue";
-import {StudyService} from "@/breeding-insight/service/StudyService";
-import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
-import TableColumn from "@/components/tables/TableColumn.vue";
-import {Metadata, Pagination} from "@/breeding-insight/model/BiResponse";
-import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
-import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
-import { StringFormatters } from '@/breeding-insight/utils/StringFormatters';
-import BaseStudyForm from "@/components/trials/forms/BaseStudyForm.vue";
-import {ValidationError} from "@/breeding-insight/model/errors/ValidationError";
-import {ProgramService} from "@/breeding-insight/service/ProgramService";
-import {MethodClass} from "@/breeding-insight/model/Method";
-import {DataType, Scale} from "@/breeding-insight/model/Scale";
-import {SidePanelTableEventBusHandler} from "@/components/tables/SidePanelTableEventBus";
-import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
-import { dmyFormat } from '@/breeding-insight/utils/filters';
-import {Result} from '@/breeding-insight/model/Result';
-
-@Component({
-  mixins: [validationMixin],
-  components: {
-    BaseStudyForm, NewDataForm, BasicInputField, SidePanelTable, EmptyTableMessage, TableColumn,
-                WarningModal, StudyDetailPanel,
-                PlusCircleIcon },
-  computed: {
-    ...mapGetters([
-      'activeProgram'
-    ])
-  },
-  data: () => ({StringFormatters}),
-  filters: {
-    dmyFormat
-  }
-})
-
-export default class StudyTable extends Vue {
-
-  private activeProgram?: Program;
-  private studies: Study[] = [];
-  private trialId: string = this.$route.params.trialId;
-  private methodClassOptions: string[] = Object.values(MethodClass);
-  private observationLevelOptions?: string[];
-  private scaleClassOptions: string[] = Object.values(DataType);
-  private editStudy?: Study;
-  private originalStudy?: Study;
-  private newStudy: Study = new Study();
-  private currentStudyEditable = false;
-  private loadingStudyEditable = true;
-
-  // New study form
-  private newStudyActive: boolean = false;
-  private validationHandler: ValidationError = new ValidationError();
-  private newStudyFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
-
-  // Side panel table
-  private studySidePanelState: SidePanelTableEventBusHandler = new SidePanelTableEventBusHandler();
-
-  // Edit form
-  private editValidationHandler: ValidationError = new ValidationError();
-
-  // Archive study
-  private focusStudy: Study = new Study();
-  private deactivateWarningTitle = 'Archive study in this trial?';
-  private deactivateActive: boolean = false;
-
-  // TODO: Move these into an event bus in the future
-  private studiesPagination?: Pagination = new Pagination();
-  private paginationController: PaginationController = new PaginationController();
-
-  mounted() {
-    this.getStudies();
-
-    // Events
-    this.studySidePanelState.bus.$on(this.studySidePanelState.requestClosePanelEvent, (showWarningEvent: Function, confirmCloseEvent: Function) => {
-      if (this.editStudy && !this.editStudy.equals(this.originalStudy)) {
-        showWarningEvent();
-      } else {
-        confirmCloseEvent();
-      }
-    });
-    // this.studySidePanelState.bus.$on(this.studySidePanelState.confirmCloseEditEvent, () => {
-    //   this.clearSelectedRow();
-    // });
-
-    // this.studySidePanelState.bus.$on(this.studySidePanelState.selectRowEvent, (row: any) => {
-    //   this.editable(row);
-    // })
-  }
-
-  @Watch('paginationController', { deep: true})
-  async getStudies() {
-
-    let currentCall = this.paginationController.currentCall
-    let paginationQuery: PaginationQuery = this.paginationController.getPaginationSelections();
-    if(currentCall && currentCall!.page == paginationQuery.page && currentCall!.pageSize == paginationQuery.pageSize && currentCall!.showAll == paginationQuery.showAll) {
-      return;
-    }
-    this.paginationController.setCurrentCall(paginationQuery);
-
-    try {
-      const response: Result<Error, [Study[], Metadata]> = await StudyService.getAll(this.activeProgram!.id!, this.trialId!, paginationQuery);
-      if(response.isErr()) throw response.value;
-      let [studies, metadata] = response.value;
-
-      if (this.paginationController.matchesCurrentRequest(metadata.pagination)) {
-        this.studies = studies;
-        this.paginationController.setPaginationInfo(metadata.pagination);
-      }
-    } catch (error) {
-      // Display error that studies cannot be loaded
-      this.$emit('show-error-notification', 'Error while trying to load studies');
-    }
-  }
-
-  // async editable(study: Study) {
-  //   let studyEditable = false;
-  //   this.loadingStudyEditable = true;
-  //   try {
-  //     const [editable] = await StudyService.getStudyEditable(this.activeProgram!.id!, study.id!) as [boolean, Metadata]
-  //     studyEditable = editable;
-  //     this.currentStudyEditable = studyEditable;
-  //   } catch (error) {
-  //     // Display error that studies cannot be loaded
-  //     this.$emit('show-error-notification', 'Error getting editable status');
-  //     throw error;
-  //   } finally {
-  //     this.loadingStudyEditable = false;
-  //   }
-  // }
-
-  // activateArchive(focusStudy: Study){
-  //   if (focusStudy.active) {
-  //     this.deactivateWarningTitle = `Archive "${focusStudy.studyName}" in ${this.activeProgram!.name!}?`;
-  //   } else {
-  //     this.deactivateWarningTitle = `Restore "${focusStudy.studyName}" to ${this.activeProgram!.name!}?`;
-  //   }
-  //   this.focusStudy = focusStudy;
-  //   this.deactivateActive = true;
-  // }
-
-  async modalDeleteHandler(){
-  //   try {
-  //     const studyClone = JSON.parse(JSON.stringify(this.focusStudy));
-  //     studyClone.active = !studyClone.active;
-  //     const updatedStudy: Study = await StudyService.archiveStudy(this.activeProgram!.id!, studyClone);
-
-  //     // Replace studies in queried studies
-  //     const studyIndex = this.studies.findIndex(study => study.id === updatedStudy.id);
-  //     if (studyIndex !== -1) { this.studies.splice(studyIndex, 1, updatedStudy); }
-
-  //     this.deactivateActive = false;
-  //     this.paginationController.updatePage(1);
-  //     this.traitSidePanelState.bus.$emit(this.studySidePanelState.closePanelEvent);
-  //     this.$emit('show-success-notification', `"${studyClone.studyName}" successfully ${ studyClone.active ? 'restored' : 'archived'}`);
-  //   } catch(err) {
-  //     this.$log.error(err);
-  //     this.$emit('show-error-notification', `"${this.focusStudy.studyName}" could not be ${ this.focusStudy.active ? 'archived' : 'restored'}`);
-  //   }
-  }
-
-  // activateEdit(editStudy: Study) {
-  //   this.studySidePanelState.bus.$emit(this.studySidePanelState.activateEditEvent);
-  //   this.originalStudy = Study.assign({...editStudy} as Study);
-  //   this.editStudy = Study.assign({...editStudy} as Study);
-  // }
-
-  activateNewStudyForm() {
-    this.studySidePanelState.bus.$emit(this.studySidePanelState.closePanelEvent, () => { this.newStudyActive = true; });
-  }
-
-  // clearSelectedRow() {
-  //   this.editStudy = undefined;
-  //   this.originalStudy = undefined;
-  //   this.editValidationHandler = new ValidationError();
-  // }
-
-  // async saveStudy() {
-  //   try {
-  //     this.validationHandler = new ValidationError();
-  //     await StudyService.createStudies(this.activeProgram!.id!, [this.newStudy]);
-  //     this.$emit('show-success-notification', 'Study creation successful.');
-  //     this.getStudies();
-  //     await this.getObservationLevels();
-  //     this.newStudy = new Study();
-  //     this.newStudyActive = false;
-  //   } catch (error) {
-  //     if (error instanceof ValidationError) {
-  //       this.validationHandler = error;
-  //       const deletions: string[] = this.processValidationErrors(this.validationHandler, this.newStudy);
-  //       this.$emit('show-error-notification', `Error creating study. ${this.validationHandler.condenseErrorsSingleRow(deletions)}`);
-  //     } else {
-  //       this.$emit('show-error-notification', 'Error creating study.');
-  //     }
-  //   } finally {
-  //     this.newTraitFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT);
-  //   }
-  // }
-
-  // processValidationErrors(handler: ValidationError, study: Study): string[] {
-
-  //   // // Set up overrides for error messages
-  //   // let deletions: string[] = [];
-  //   // //TODO: Move this into the class perhaps
-  //   // if (!study.scale!.dataType) {
-  //   //   // Remove scale name error
-  //   //   deletions.push('scale.scaleName');
-  //   // } else if (Scale.dataTypeEquals(trait.scale!.dataType!, DataType.Numerical)) {
-  //   //   // Rename scale name to unit
-  //   //   handler.overrideMessage(0, 'scale.scaleName', 'Missing unit', 400);
-  //   // } else if (Scale.dataTypeEquals(trait.scale!.dataType!, DataType.Duration)) {
-  //   //   // Rename scale name to unit of time
-  //   //   handler.overrideMessage(0, 'scale.scaleName', 'Missing unit of time', 400);
-  //   // }
-  //   // return deletions;
-  // }
-
-  async updateStudy() {
-    // try {
-    //   this.editValidationHandler = new ValidationError();
-    //   const [data] = await StudyService.updateStudies(this.activeProgram!.id!, [this.editStudy!]) as [Study[], Metadata];
-
-    //   // Temporary: Only update the given study.
-    //   // TODO: Select all studies and find the edited study within results to keep row open
-    //   if (data.length > 0){
-    //     const studyInd = this.studies.findIndex(study => study.id === data[0].id);
-    //     const studyCopy = [...this.studies];
-    //     if (studyInd >= 0) {
-    //       studyCopy[studyInd] = {...data[0]} as Study;
-    //     }
-    //     this.studies = studyCopy;
-    //   }
-
-    //   this.studySidePanelState.bus.$emit(this.studySidePanelState.successEditEvent, data[0]);
-    //   this.clearSelectedRow();
-    //   await this.getObservationLevels();
-    //   this.$emit('show-success-notification', 'Study edit successful.');
-    // } catch (error) {
-    //   if (error instanceof ValidationError) {
-    //     this.editValidationHandler = error;
-    //     const deletions: string[] = this.processValidationErrors(this.editValidationHandler, this.editStudy!);
-    //     this.$emit('show-error-notification', `Error updating study. ${this.editValidationHandler.condenseErrorsSingleRow(deletions)}`);
-    //   } else {
-    //     this.$emit('show-error-notification', error);
-    //   }
-    // } finally {
-    //   this.studySidePanelState.dataFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT);
-    // }
-  }
-
-  // cancelNewStudy() {
-  //   this.newStudy = new Study();
-  //   this.validationHandler = new ValidationError();
-  //   this.newStudyActive = false;
-  // }
-}
-
-</script>
diff --git a/src/components/trials/StudyDetailPanel.vue b/src/components/trials/StudyDetailPanel.vue
deleted file mode 100644
index c609c9ebe..000000000
--- a/src/components/trials/StudyDetailPanel.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="is-full-length">
-    <template v-if="data && !editActive">
-      <p v-if="data.name" class="is-size-5 has-text-weight-bold mb-0">{{ data.name }}</p>
-      <p v-if="data.description">{{ data.description }}</p>
-      <p v-if="data.type" class="is-size-5 has-text-weight-bold mb-0">Type</p>
-      <p v-if="data.type">{{ data.type }}</p>
-      <p v-if="data.location" class="is-size-5 has-text-weight-bold mb-0">Location</p>
-      <p v-if="data.location">{{ data.location }}</p>
-      <p v-if="data.startDate" class="is-size-5 has-text-weight-bold mb-0">Start</p>
-      <p v-if="data.startDate">{{ data.startDate | dmyFormat }}</p>
-      <p v-if="data.endDate" class="is-size-5 has-text-weight-bold mb-0">End</p>
-      <p v-if="data.endDate">{{ data.endDate | dmyFormat }}</p>
-      <p>
-        <router-link v-bind:to="{name: 'observations', params: {programId: activeProgram.id, studyId: data.id}}">
-          Observations
-        </router-link>
-      </p>
-      <p v-if="!data.active">Status: Archived</p>
-      
-      <article v-if="!editable && !loadingEditable" class="message is-info">
-        <div class="message-body">
-          <div class="media">
-            <figure class="media-left">
-              <p class="image is-24x24">
-                <help-circle-icon size="1.5x"></help-circle-icon>
-              </p>
-            </figure>
-            <div class="media-content">
-              <div class="has-text-dark">
-                Not editable because this trait has associated experiment data.
-              </div>
-            </div>
-          </div>
-        </div>
-      </article>
-
-      <!-- maybe break out controls for reuse eventually -->
-      <div class="columns is-mobile is-centered pt-6">
-        <div class="column is-narrow">
-          <a
-            v-if="editable && !loadingEditable"
-            v-on:click="$emit('activate-edit', data)"
-            v-on:keypress.enter.space="$emit('activate-edit', data)"
-            tabindex="0"
-          >
-            Edit
-          </a>
-        </div>
-        <div class="column is-narrow">
-        </div>
-      </div>
-    </template>
-    <template v-if="data && editActive">
-      <EditDataForm
-        v-on:cancel="$emit('deactivate-edit')"
-        v-on:submit="$emit('submit')"
-        v-bind:edit-record.sync="editTrait"
-        v-bind:data-form-state="editFormState"
-      >
-        <BaseTraitForm
-            v-bind:trait.sync="editTrait"
-            v-bind:edit-format="true"
-            v-on:trait-change="traitUpdate($event)"
-            v-bind:scale-options="scaleClassOptions"
-            v-bind:method-options="methodClassOptions"
-            v-bind:program-observation-levels="observationLevelOptions"
-            v-bind:validation-handler="validationHandler"
-        ></BaseTraitForm>
-      </EditDataForm>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-
-  import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
-  import SidePanel from '@/components/tables/SidePanel.vue'
-  import {Trait} from '@/breeding-insight/model/Trait'
-  import {Scale, DataType} from '@/breeding-insight/model/Scale'
-  import {Method, MethodClass} from '@/breeding-insight/model/Method'
-  import {StringFormatters} from '@/breeding-insight/utils/StringFormatters'
-  import {ValidationError} from "@/breeding-insight/model/errors/ValidationError";
-  import BaseTraitForm from "@/components/trait/forms/BaseTraitForm.vue";
-  import EditDataForm from "@/components/forms/EditDataForm.vue";
-  import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
-  import { HelpCircleIcon } from 'vue-feather-icons'
-  import ProgressBar from '@/components/forms/ProgressBar.vue'
-  import { dmyFormat } from '@/breeding-insight/utils/filters';
-  import { mapGetters } from 'vuex';
-
-  @Component({
-    components: {EditDataForm, SidePanel, BaseTraitForm, HelpCircleIcon, ProgressBar},
-data: () => ({DataType, MethodClass, Scale, Method}),
-    computed: {
-      ...mapGetters([
-        'activeProgram'
-      ])
-    },
-    filters: {
-      dmyFormat
-    }
-  })
-  export default class TraitDetailPanel extends Vue {
-
-    @Prop()
-    private data!: Trait;
-    @Prop()
-    private observationLevelOptions!: string[];
-    @Prop({default: false})
-    private editActive!: boolean;
-    @Prop()
-    private editable!: boolean | undefined;
-    @Prop({default: true})
-    private loadingEditable!: boolean;
-    @Prop({default: false})
-    private archivable!: boolean;
-    @Prop()
-    private editFormState!: DataFormEventBusHandler
-    @Prop()
-    private validationHandler!: ValidationError;
-
-    private editTrait: Trait | null = null;
-    private scalePostfix = new Set<string>().add(DataType.Ordinal).add(DataType.Nominal);
-
-    // Variables for edit form
-    private methodClassOptions: string[] = Object.values(MethodClass);
-    private scaleClassOptions: string[] = Object.values(DataType);
-
-    // @Watch('editActive', {immediate: true})
-    // watchEdit() {
-    //   if (this.editActive){
-    //     this.editTrait = Trait.assign({...this.data} as Trait);
-    //   } else {
-    //     this.editTrait = null;
-    //   }
-
-    // }
-
-    // public traitUpdate(trait: Trait) {
-    //   this.editTrait = trait;
-    //   this.$emit('trait-change', this.editTrait);
-    // }
-
-    // abbreviationsSynonymsString(synonymsMaxLength: number) : string | undefined {
-    //   let abbSyn = "";
-    //   if (this.data && this.data.abbreviations && this.data.abbreviations.length > 0) {
-    //     abbSyn = this.data.abbreviations[0];
-    //   }
-    //   if (this.data && this.data.synonyms && this.data.synonyms.length > 0) {
-    //     // Up to synonymsMaxLength synonyms will be shown before , ... cutoff
-    //     const synonyms = this.data.synonyms.slice(0, Math.min(this.data.synonyms.length, synonymsMaxLength)).join(", ");
-    //     abbSyn = (abbSyn === "") ? synonyms : abbSyn + ", " + synonyms;
-    //     if (this.data.synonyms.length > synonymsMaxLength && this.data.synonyms.length !== 1) {
-    //       abbSyn = abbSyn + ", ...";
-    //     }
-    //   }
-
-    //   return abbSyn === "" ? undefined : abbSyn;
-    // }
-
-    // get scaleType() {
-    //   if (this.data && this.data.scale && this.data.scale.dataType) {
-    //     return this.data.scale.dataType;
-    //   }
-    //   return undefined;
-    // }
-
-    // get methodClass() {
-    //   if (this.data && this.data.method && this.data.method.methodClass) {
-    //     return this.data.method.methodClass;
-    //   }
-    //   return undefined;
-    // }
-
-    // get scaleTypeString() {
-    //   if (this.data && this.data.programObservationLevel && this.data.method && this.data.scale) {
-    //     let str = this.data.programObservationLevel.name + " " +
-    //               this.data.method.methodClass + " using " +
-    //               StringFormatters.toStartCase(this.data.scale.dataType!);
-    //     const postfix = this.scalePostFix(this.data.scale.dataType!);
-    //     if (postfix !== "") {
-    //       str = str + " " + postfix;
-    //     }
-    //     return str;
-    //   }
-    //   return undefined;
-    // }
-
-    // scalePostFix(dataType: string) : string {
-    //   if (this.scalePostfix.has(dataType.toUpperCase())) {
-    //     return "Scale";
-    //   } else if (Scale.dataTypeEquals(dataType, DataType.Numerical)) {
-    //     return "Units";
-    //   } else {
-    //     return "";
-    //   }
-    // }
-
-    valueOrNA(value: any) {
-      return value !== undefined ? value: "NA";
-    }
-    
-  }
-</script>
-
diff --git a/src/components/trials/TrialsAndStudiesBase.vue b/src/components/trials/TrialsAndStudiesBase.vue
deleted file mode 100644
index c057b770c..000000000
--- a/src/components/trials/TrialsAndStudiesBase.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<script lang="ts">
-
-  import {Component, Vue} from "vue-property-decorator";
-  import {processProgramNavigation} from "@/router/guards";
-
-  @Component({
-    beforeRouteUpdate: processProgramNavigation
-  })
-  export default class TrialsAndStudiesBase extends Vue {
-  }
-</script>
diff --git a/src/components/trials/TrialsTable.vue b/src/components/trials/TrialsTable.vue
deleted file mode 100644
index de18ddcc6..000000000
--- a/src/components/trials/TrialsTable.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <section id="trialsTableLabel">
-    <WarningModal
-      v-bind:active.sync="deactivateActive"
-      v-bind:msg-title="deactivateWarningTitle"
-      v-on:deactivate="deactivateActive = false"
-    >
-      <section>
-        <p class="has-text-dark" :class="this.$modalTextClass">
-          Program-related data referencing this trial will not be affected by this change.
-        </p>
-      </section>
-      <div class="columns">
-        <div class="column is-whole has-text-centered buttons">
-          <button v-on:click="modalDeleteHandler()" class="button is-danger"><strong>Yes, remove</strong></button>
-          <button v-on:click="deactivateActive = false" class="button">Cancel</button>
-        </div>
-      </div>              
-    </WarningModal>
-
-    <button
-      v-if="$ability.can('create', 'Trial')"
-      data-testid="newDataForm"
-      v-show="!newTrialActive"
-      class="button is-primary has-text-weight-bold is-pulled-right"
-      v-on:click="newTrialActive = true"
-    >
-      <span class="icon is-small">
-        <PlusCircleIcon
-          size="1.5x"
-          aria-hidden="true"
-        />
-      </span>
-      <span>
-        New Trial
-      </span>
-    </button>
-
-    <div class="is-clearfix"></div>
-
-    <NewDataForm
-      v-if="newTrialActive"
-      v-bind:row-validations="trialValidations"
-      v-bind:new-record.sync="newTrial"
-      v-bind:data-form-state="newTrialFormState"
-      v-on:submit="saveTrial"
-      v-on:cancel="cancelTrial"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-      <template v-slot="validations">
-        <div class="columns">
-          <div class="column is-two-fifths">
-            <BasicInputField
-              v-model="newTrial.name"
-              v-bind:validations="validations.name"
-              v-bind:field-name="'Name'"
-              v-bind:field-help="'Trial name as preferred. All Unicode special characters accepted.'"
-              :placeholder="'New Trial Name'"
-            />
-          </div>
-        </div>
-      </template>
-    </NewDataForm>
-
-    <ExpandableTable
-      v-bind:records.sync="trials"
-      v-bind:loading="this.trialsLoading"
-      v-bind:row-validations="trialValidations"
-      v-bind:editable="$ability.can('update', 'Trial')"
-      v-bind:archivable="$ability.can('archive', 'Trial')"
-      v-bind:pagination="paginationController"
-      v-bind:data-form-state="editTrialFormState"
-      v-on:submit="updateTrial($event)"
-      v-on:remove="displayWarning($event)"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-      <b-table-column :custom-sort="sortTrialName" label="Name" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <router-link
-          :to="{name: 'studies', params: { trialId: props.row.data.id, programId: activeProgram.id }}">
-          {{ props.row.data.trialName }}
-        </router-link>
-      </b-table-column>
-      <template v-slot:edit="{editData, validations}">
-        <div class="columns">
-          <div class="column is-two-fifths">
-            <BasicInputField
-              v-model="editData.name"
-              v-bind:validations="validations.name"
-              v-bind:field-name="'Name'"
-              v-bind:field-help="'Trial name as preferred. All Unicode special characters accepted.'"
-            />
-          </div>
-        </div>
-      </template>
-      <template v-slot:emptyMessage>
-          <p class="has-text-weight-bold">
-            No trials are currently defined for this program.
-          </p>
-          Trials are used to create studies.<br>
-          You can add, edit, and delete trials from this panel.
-      </template>
-    </ExpandableTable>
-  </section>
-</template>
-
-<script lang="ts">
-  import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
-  import WarningModal from '@/components/modals/WarningModal.vue'
-  import {PlusCircleIcon} from 'vue-feather-icons'
-  import {validationMixin} from 'vuelidate';
-  import {Validations} from 'vuelidate-property-decorators'
-  import {required} from 'vuelidate/lib/validators'
-  import { mapGetters } from 'vuex'
-  import {Program} from "@/breeding-insight/model/Program";
-  import NewDataForm from '@/components/forms/NewDataForm.vue'
-  import BasicInputField from "@/components/forms/BasicInputField.vue";
-  import {TrialService} from "@/breeding-insight/service/TrialService";
-  import EmptyTableMessage from "@/components/tables/EmtpyTableMessage.vue";
-  import TableColumn from "@/components/tables/TableColumn.vue";
-  import {Metadata} from "@/breeding-insight/model/BiResponse";
-  import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
-  import {PaginationQuery} from "@/breeding-insight/model/PaginationQuery";
-  import { DataFormEventBusHandler } from '@/components/forms/DataFormEventBusHandler';
-  import {Trial} from '@/breeding-insight/model/Trial'
-  import {Result, Err, Success, ResultGenerator } from "@/breeding-insight/model/Result";
-  import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
-
-@Component({
-  mixins: [validationMixin],
-  components: { ExpandableTable, NewDataForm, BasicInputField, EmptyTableMessage, TableColumn,
-                WarningModal, 
-                PlusCircleIcon },
-  computed: {
-    ...mapGetters([
-      'activeProgram'
-    ])
-  }
-})
-export default class TrialsTable extends Vue {
-
-  private activeProgram?: Program;
-  private trials: Trial[] = [];
-  private deactivateActive: boolean = false;
-  private newTrialActive: boolean = false;
-  private deactivateWarningTitle: string = "Remove location from Program name?";
-  private newTrial = new Trial();
-  private programName: string = "Program Name";
-  private deleteTrial?: Trial;
-
-  private trialsLoading = true;
-
-  private paginationController: PaginationController = new PaginationController();
-
-  private newTrialFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
-  private editTrialFormState: DataFormEventBusHandler = new DataFormEventBusHandler();
-
-  trialValidations = {
-    name: {required}
-  }
-
-  mounted() {
-    this.getTrials();
-  }
-
-  @Watch('paginationController', { deep: true})
-  async getTrials() {
-    let currentCall = this.paginationController.currentCall
-    let paginationQuery: PaginationQuery = this.paginationController.getPaginationSelections();
-    if(currentCall && currentCall!.page == paginationQuery.page && currentCall!.pageSize == paginationQuery.pageSize && currentCall!.showAll == paginationQuery.showAll) {
-      return;
-    }
-    this.paginationController.setCurrentCall(paginationQuery);
-
-    try {
-      const response: Result<Error, [Trial[], Metadata]> = await TrialService.getAll(this.activeProgram!.id!, paginationQuery);
-      if(response.isErr()) throw response.value;
-      let [trials, metadata] = response.value;
-
-      if (this.paginationController.matchesCurrentRequest(metadata.pagination)) {
-        this.trials = trials;
-        this.paginationController.setPaginationInfo(metadata.pagination);
-      }
-    } catch (err) {
-      // Display error that trials cannot be loaded
-      this.$emit('show-error-notification', 'Error while trying to load trials');
-    } finally {
-      this.trialsLoading=false;
-    }
-  }
-
-  createTrial() {
-    this.newTrialActive = true;
-  }
-
-//   updateTrial(updatedTrial: Trial) {
-
-//     TrialService.update(updatedTrial).then(() => {
-//       this.getTrials();
-//       this.$emit('show-success-notification', 'Success! ' + updatedTrial.trialName + ' updated.');
-// }).catch((error: any) => {
-//       this.$emit('show-error-notification', error['errorMessage']);
-//     }).finally(() => this.editTrialFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT));
-
-//   }
-
-  saveTrial() {
-
-    // this.newTrial.id = this.activeProgram!.id;
-
-    // TrialService.create(this.newTrial).then((trial: Trial) => {
-    //   this.paginationController.updatePage(1);
-    //   this.getTrials();
-    //   this.$emit('show-success-notification', 'Success! ' + this.newTrial.trialName + ' added.');
-    //   this.newTrial = new Trial();
-    //   this.newTrialActive = false;
-    // }).catch((error) => {
-    //   this.$emit('show-error-notification', error['errorMessage']);
-    // }).finally(() => this.newTrialFormState.bus.$emit(DataFormEventBusHandler.SAVE_COMPLETE_EVENT))
-
-  }
-
-  cancelNewTrial() {
-    this.newTrial = new Trial();
-    this.newTrialActive = false;
-  }
-
-  displayWarning(trial: Trial) {
-
-    if (trial){
-      this.deleteTrial = trial;
-      this.deactivateWarningTitle = "Remove " + trial.trialName + " from " + this.activeProgram!.name + "?";
-      this.deactivateActive = true;
-    } else {
-      Vue.$log.error('Could not find object to delete')
-    }
-  }
-
-  sortTrialName(a: any, b: any, isAsc: boolean) {
-    if(isAsc) {
-      return a.data.trialName!.localeCompare(b.data.trialName!);
-    } else {
-      return b.data.trialName!.localeCompare(a.data.trialName!);
-    }
-  }
-
-  // modalDeleteHandler() {
-  //   this.deactivateActive = false;
-
-  //   if (this.deleteTrial) {
-  //     if (this.deleteTrial.id) {
-  //       if (this.deleteTrial.trialName) {
-  //         const deleteId: string = this.deleteTrial.id;
-  //         const deleteName: string = this.deleteTrial.trialName;
-  //         TrialService.delete(this.activeProgram!.id!, deleteId).then(() => {
-  //           this.getTrials();
-  //           this.$emit('show-success-notification', `${deleteName} removed from program`);
-  //         }).catch((error) => {
-  //           this.$emit('show-error-notification', error['errorMessage']);
-  //         })
-  //         return;
-  //       }
-  //     }
-  //   }
-  //   this.$emit('show-error-notification', `Unable to remove trial`);
-  // }
-
-}
-
-</script>
diff --git a/src/components/trials/forms/BaseStudyForm.vue b/src/components/trials/forms/BaseStudyForm.vue
deleted file mode 100644
index 25af2660a..000000000
--- a/src/components/trials/forms/BaseStudyForm.vue
+++ /dev/null
@@ -1,286 +0,0 @@
-<template>
-  <div class="columns is-multiline">
-    <div class="column" v-bind:class="{'is-full': editFormat}">
-      <BasicInputField
-        v-bind:value="trait.traitName"
-        v-bind:field-name="'Trait name'"
-        v-bind:field-help="'All unicode characters are accepted.'"
-        v-bind:placeholder="'Trait Name'"
-        v-bind:server-validations="validationHandler.getValidation(0, TraitError.TraitName)"
-        v-on:input="trait.traitName = $event"
-      />
-      <div class="sentence-input">
-        <p class="is-input-prepend mt-3">
-          is collected on
-        </p>
-        <AutoCompleteField
-          v-bind:options="programObservationLevels"
-          v-bind:value="trait.programObservationLevel ? trait.programObservationLevel.name : undefined"
-          v-bind:field-name="'Observation Level'"
-          v-bind:show-label="false"
-          v-bind:server-validations="validationHandler.getValidation(0, TraitError.ObservationLevel)"
-          v-on:input="setObservationLevel($event)"
-        />
-      </div>
-      <div class="sentence-input">
-        <p class="is-input-prepend mt-3">
-          by
-        </p>
-        <BasicSelectField
-          v-bind:selected-id="trait.method.methodClass"
-          v-bind:options="methodOptions"
-          v-bind:field-name="'Method'"
-          v-bind:show-label="false"
-          v-bind:server-validations="validationHandler.getValidation(0, TraitError.MethodClass)"
-          v-on:input="setMethodClass($event)"
-        />
-      </div>
-      <div class="sentence-input">
-        <p class="is-input-prepend mt-3">
-          using
-        </p>
-        <BasicSelectField
-          v-bind:selected-id="StringFormatters.toStartCase(trait.scale.dataType)"
-          v-bind:options="getScaleOptions()"
-          v-bind:field-name="'Scale'"
-          v-bind:show-label="false"
-          v-bind:field-help="'Note: additional options for this field will appear after selection'"
-          v-bind:server-validations="validationHandler.getValidation(0, TraitError.ScaleType)"
-          v-on:input="setScaleClass($event)"
-        />
-      </div>
-
-      <!-- Formula -->
-      <template v-if="trait.method && trait.method.methodClass === MethodClass.Computation">
-        <BasicInputField
-            v-bind:value="trait.method.formula"
-            v-bind:field-name="'Formula'"
-            v-bind:field-help="'Operations accepted: *^.+/(); calculations will use FOIL order of operations.'"
-            v-bind:placeholder="'Number of flowers on single plant / 100'"
-            v-bind:server-validations="validationHandler.getValidation(0, TraitError.MethodFormula)"
-            v-on:input="trait.method.formula = $event"
-        />
-      </template>
-
-      <!-- Scale options -->
-      <template v-if="trait.scale && (Scale.dataTypeEquals(trait.scale.dataType, DataType.Ordinal) || Scale.dataTypeEquals(trait.scale.dataType, DataType.Nominal))">
-        <CategoryTraitForm
-          v-bind:data="trait.scale.categories"
-          v-on:update="setCategories($event)"
-          v-bind:type="trait.scale.dataType"
-          v-bind:validation-handler="validationHandler"
-          v-bind:validation-index="0"
-        />
-      </template>
-      <template v-if="trait.scale && Scale.dataTypeEquals(trait.scale.dataType, DataType.Text)">
-        <TextTraitForm />
-      </template>
-      <template v-if="trait.scale && Scale.dataTypeEquals(trait.scale.dataType, DataType.Date)">
-        <DateTraitForm />
-      </template>
-      <template v-if="trait.scale && Scale.dataTypeEquals(trait.scale.dataType, DataType.Numerical)">
-        <NumericalTraitForm
-          v-bind:unit="trait.scale.scaleName"
-          v-bind:decimal-places="trait.scale.decimalPlaces"
-          v-bind:valid-min="trait.scale.validValueMin"
-          v-bind:valid-max="trait.scale.validValueMax"
-          v-on:unit-change="trait.scale.scaleName = $event"
-          v-on:decimal-change="trait.scale.decimalPlaces = $event"
-          v-on:min-change="trait.scale.validValueMin = $event"
-          v-on:max-change="trait.scale.validValueMax = $event"
-          v-bind:validation-handler="validationHandler"
-          v-bind:validation-index="0"
-        />
-      </template>
-    </div>
-
-    <div class="divider is-vertical" />
-
-    <!-- Right Side -->
-    <div class="column" v-bind:class="{'is-full': editFormat}">
-      <BasicInputField
-        v-bind:value="trait.method.description"
-        v-bind:field-name="'Description of collection method'"
-        v-bind:field-help="'All unicode characters are accepted.'"
-        v-bind:placeholder="'Trait Name'"
-        v-bind:server-validations="validationHandler.getValidation(0, TraitError.MethodDescription)"
-        v-on:input="trait.method.description = $event"
-      />
-
-      <BasicInputField
-        v-bind:value="trait.abbreviations ? trait.abbreviations.join(';') : undefined"
-        v-bind:field-name="'Abbreviation(s)'"
-        v-bind:field-help="'Semicolon separated list, with primary abbreviation as first term.'"
-        v-bind:server-validations="validationHandler.getValidation(0, TraitError.Abbreviations)"
-        v-on:input="setAbbreviations($event)"
-      />
-
-      <BasicInputField
-        v-bind:value="trait.synonyms ? trait.synonyms.join(';') : undefined"
-        v-bind:field-name="'Synonyms'"
-        v-bind:field-help="'Semicolon separated list.'"
-        v-on:input="trait.synonyms = parseSemiColonList($event)"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {Component, Prop, Vue, Watch} from 'vue-property-decorator'
-import BasicInputField from "@/components/forms/BasicInputField.vue";
-import BasicSelectField from "@/components/forms/BasicSelectField.vue";
-import {Trait} from "@/breeding-insight/model/Trait";
-import {Method, MethodClass} from "@/breeding-insight/model/Method";
-import { Scale, DataType } from '@/breeding-insight/model/Scale';
-import { ProgramObservationLevel } from '@/breeding-insight/model/ProgramObservationLevel';
-import OrdinalTraitForm from "@/components/trait/forms/CategoryTraitForm.vue";
-import TextTraitForm from "@/components/trait/forms/TextTraitForm.vue";
-import DateTraitForm from "@/components/trait/forms/DateTraitForm.vue";
-import DurationTraitForm from "@/components/trait/forms/DurationTraitForm.vue";
-import NumericalTraitForm from "@/components/trait/forms/NumericalTraitForm.vue";
-import CategoryTraitForm from "@/components/trait/forms/CategoryTraitForm.vue";
-import {TraitError} from "@/breeding-insight/model/errors/TraitError";
-import {ValidationError} from "@/breeding-insight/model/errors/ValidationError";
-import AutoCompleteField from "@/components/forms/AutoCompleteField.vue";
-import { StringFormatters } from '@/breeding-insight/utils/StringFormatters';
-import {Category} from "@/breeding-insight/model/Category";
-
-@Component({
-  components: {
-    AutoCompleteField,
-    CategoryTraitForm,
-    NumericalTraitForm,
-    DurationTraitForm, DateTraitForm, TextTraitForm, OrdinalTraitForm, BasicSelectField, BasicInputField},
-  data: () => ({DataType, MethodClass, TraitError, StringFormatters, Scale})
-})
-export default class BaseTraitForm extends Vue {
-  @Prop()
-  programObservationLevels?: string[];
-  @Prop()
-  methodOptions?: string[];
-  @Prop()
-  scaleOptions?: string[];
-  @Prop()
-  validationHandler!: ValidationError;
-  @Prop({default: () => new Trait()})
-  trait!: Trait;
-  @Prop({default: false})
-  editFormat!: boolean;
-
-  name: string = '';
-  private methodHistory: {[key: string]: Method} = {};
-  private scaleHistory: {[key: string]: Scale} = {};
-
-  created() {
-    if (!this.trait.method) {
-      this.trait.method = new Method();
-    }
-    if (!this.trait.scale){
-      this.trait.scale = new Scale();
-    }
-  }
-
-  @Watch('trait', {deep: true})
-  emitTrait(val: Trait) {
-    this.$emit('trait-change', val);
-  }
-
-  getScaleOptions() {
-    if (this.trait.method && this.trait.method!.methodClass === MethodClass.Computation) {
-      return [DataType.Numerical];
-    } else {
-      return this.scaleOptions;
-    }
-  }
-
-  setMethodClass(value: string) {
-    // Save our current method
-    if (this.trait!.method!.methodClass) {
-      this.methodHistory[this.trait!.method!.methodClass] = {...this.trait!.method!} as Method;
-    }
-
-    // Set the new method class and get formula history if available
-    this.trait!.method!.methodClass = value;
-    if (this.methodHistory[value]) {
-      this.trait.method!.formula = this.methodHistory[value].formula;
-    } else {
-      this.trait.method!.formula = undefined;
-    }
-
-    // Computation method class is always numerical
-    if (this.trait!.method!.methodClass === MethodClass.Computation) {
-      this.setScaleClass(DataType.Numerical);
-    }
-  }
-
-  setScaleClass(value: string) {
-
-    // Save history of current scale class
-    if (this.trait.scale!.dataType) {
-      // Nominal and ordinal save histories
-      if (Scale.dataTypeEquals(this.trait.scale!.dataType, DataType.Nominal) ||
-        Scale.dataTypeEquals(this.trait.scale!.dataType, DataType.Ordinal))
-      {
-        this.scaleHistory[DataType.Ordinal.toLowerCase()] = Scale.assign({...this.trait.scale!} as Scale);
-      } else {
-        this.scaleHistory[this.trait.scale!.dataType.toLowerCase()] = Scale.assign({...this.trait.scale!} as Scale);
-      }
-    }
-
-    // Look in history for existing scale
-    if ((Scale.dataTypeEquals(value, DataType.Nominal) || Scale.dataTypeEquals(value, DataType.Ordinal)) &&
-      this.scaleHistory[DataType.Ordinal.toLowerCase()])
-    {
-      this.trait.scale = this.scaleHistory[DataType.Ordinal.toLowerCase()];
-
-      if (Scale.dataTypeEquals(value, DataType.Nominal)) {
-        // Clear the labels
-        if (this.trait.scale.categories) {
-          this.trait.scale.categories.forEach(category => category.label = undefined);
-        }
-      } else {
-        if (this.trait.scale.categories) {
-          this.trait.scale.categories.forEach((category, index) => category.label = index.toString());
-        }
-      }
-    } else if (this.scaleHistory[value.toLowerCase()]) {
-      this.trait.scale = this.scaleHistory[value.toLowerCase()];
-      this.trait.scale.dataType = value;
-      this.trait!.scale!.scaleName = value;
-    } else {
-      // No history
-      this.trait.scale = new Scale();
-      this.trait.scale.dataType = value;
-
-      // Allow for units in the numerical and duration traits
-      if (Scale.dataTypeEquals(value, DataType.Numerical)) {
-        this.trait!.scale!.scaleName = undefined;
-      } else {
-        this.trait!.scale!.scaleName = value;
-      }
-    }
-
-  }
-
-  setCategories(categories: Category[]) {
-    this.trait.scale!.categories = categories;
-    this.emitTrait(this.trait);
-  }
-
-  setObservationLevel(value: string) {
-    this.trait!.programObservationLevel = new ProgramObservationLevel(value);
-  }
-  setAbbreviations(value: string) {
-    const abbreviations = this.parseSemiColonList(value);
-  }
-
-  parseSemiColonList(value: string): string[] {
-    return value.split(';');
-  }
-}
-
-</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 61a46bd72..c8ef5d7d4 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,10 +24,8 @@ import NotAuthorized from '@/views/NotAuthorized.vue'
 import BrapiAuthorize from '@/views/BrAPI/BrapiAuthorize.vue'
 import BrAPIInfo from '@/views/BrAPI/BrAPIInfo.vue'
 import ProgramManagement from '@/views/program/ProgramManagement.vue'
-import ExperimentDetails from "@/views/experiments-and-observations/ExperimentDetails";
+import ExperimentDetails from "@/views/experiments-and-observations/ExperimentDetails.vue";
 import Dataset from "@/views/import/Dataset.vue";
-import StudiesList from "@/views/trials-and-studies/StudiesList.vue";
-import ObservationsList from '@/views/observations/ObservationsList.vue';
 import AdminProgramManagement from '@/views/admin/AdminProgramManagement.vue'
 import AdminUserManagement from '@/views/admin/AdminUserManagement.vue'
 import BrAPIImporter from '@/views/import/BrAPIImporter.vue'
@@ -120,9 +118,11 @@ const routes = [
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
-  { path: '/admin',
+  {
+    path: '/admin',
     name: 'admin',
-    redirect: '/admin/programs' },
+    redirect: '/admin/programs'
+  },
   {
     path: '/admin/programs',
     name: 'admin-programs',
@@ -156,25 +156,6 @@ const routes = [
     component: Home,
     beforeEnter: processProgramNavigation,
   },
-  {
-    path: '/programs/:programId/study/:studyId/observations',
-    name: 'observations',
-    component: ObservationsList,
-    meta: {
-      title: 'Observations',
-      layout: layouts.userSideBar
-    },
-    beforeEnter: processProgramNavigation
-  },
-  {
-    path: '/programs/:programId/trial/:trialId/studies',
-    name: 'studies',
-    meta: {
-      title: 'Studies',
-      layout: layouts.userSideBar
-    },
-    component: StudiesList
-  },
   {
     path: '/programs/:programId/experiments-observations',
     name: 'experiments-observations',
diff --git a/src/store/index.ts b/src/store/index.ts
index e216d9be2..8d2b1b0b4 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -73,7 +73,6 @@ const store: StoreOptions<RootState> = {
     successNotificationMsg: state => {
       return state.successNotificationMsg;
     },
-
     isInfoNotificationActive: state => {
       return state.infoNotificationActive;
     },
diff --git a/src/views/experiments-and-observations/ExperimentDetails.vue b/src/views/experiments-and-observations/ExperimentDetails.vue
index 9ec9d423d..343f9a1d3 100644
--- a/src/views/experiments-and-observations/ExperimentDetails.vue
+++ b/src/views/experiments-and-observations/ExperimentDetails.vue
@@ -33,8 +33,9 @@
         </router-link>
 
         <ExperimentObservationsDownloadButton
+            v-bind:experiment="experiment"
             v-bind:modal-title="`Download ${experiment.trialName}`"
-            v-bind:trial-db-id="experimentUUID"
+            v-bind:trial-id="experimentUUID"
             v-on:show-error-notification ="$emit('show-error-notification', $event)"
             anchor-class="button is-primary is-outlined"
         >
@@ -75,7 +76,7 @@
           <router-link
               v-bind:to="{name: 'experiment_obs_dataset', params: {programId: activeProgram.id, experimentId: experimentUUID, datasetId: 'observation'}}"
               tag="li" active-class="is-active">
-            <a>Observation DatasetModel</a>
+            <a>Observation Dataset</a>
           </router-link>
           <!--TODO: Will need to loop through a list of datasets and add a tab for each.-->
         </ul>
@@ -95,13 +96,13 @@
 import {Component, Watch} from "vue-property-decorator";
 import {mapGetters} from "vuex";
 import {PlusCircleIcon} from 'vue-feather-icons'
-import TrialsAndStudiesBase from "@/components/trials/TrialsAndStudiesBase.vue";
 import {Program} from "@/breeding-insight/model/Program";
 import {Result} from "@/breeding-insight/model/Result";
 import {ExperimentService} from "@/breeding-insight/service/ExperimentService";
 import ClickOutside from 'vue-click-outside';
 import {Trial} from "@/breeding-insight/model/Trial";
 import ExperimentObservationsDownloadButton from "@/components/experiments/ExperimentObservationsDownloadButton.vue";
+import ProgramsBase from "@/components/program/ProgramsBase.vue";
 
 @Component({
   components: {
@@ -117,7 +118,7 @@ import ExperimentObservationsDownloadButton from "@/components/experiments/Exper
     ClickOutside
   }
 })
-export default class ExperimentDetails extends TrialsAndStudiesBase {
+export default class ExperimentDetails extends ProgramsBase {
   private activeProgram: Program;
   private experiment: Trial;
   private experimentLoading: boolean = true;
@@ -176,14 +177,5 @@ export default class ExperimentDetails extends TrialsAndStudiesBase {
       this.experimentLoading = false;
     }
   }
-
-  downloadFile(){
-    alert("'Download file' is not yet implemented.");
-    this.actionSelectActive = false;
-  }
-  hideActionSelector(){
-    this.actionSelectActive = false;
-  }
-
 }
 </script>
\ No newline at end of file
diff --git a/src/views/experiments-and-observations/ExperimentsAndObservations.vue b/src/views/experiments-and-observations/ExperimentsAndObservations.vue
index 139c99cf4..6dc37e256 100644
--- a/src/views/experiments-and-observations/ExperimentsAndObservations.vue
+++ b/src/views/experiments-and-observations/ExperimentsAndObservations.vue
@@ -50,11 +50,11 @@ import ExperimentsObservationsTable from '@/components/experiments/ExperimentsOb
 import {PlusCircleIcon} from 'vue-feather-icons'
 import {mapGetters} from "vuex";
 import {Program} from "@/breeding-insight/model/Program";
-import TrialsAndStudiesBase from "@/components/trials/TrialsAndStudiesBase.vue";
 import {ExperimentSort, ExperimentSortField} from "@/breeding-insight/model/Sort";
 import {PaginationController} from "@/breeding-insight/model/view_models/PaginationController";
 import {BiResponse} from "@/breeding-insight/model/BiResponse";
 import {BrAPIService, BrAPIType} from "@/breeding-insight/service/BrAPIService";
+import ProgramsBase from "@/components/program/ProgramsBase.vue";
 
 @Component({
   components: {
@@ -66,7 +66,7 @@ import {BrAPIService, BrAPIType} from "@/breeding-insight/service/BrAPIService";
     ])
   }
 })
-export default class ExperimentsAndObservations extends TrialsAndStudiesBase {
+export default class ExperimentsAndObservations extends ProgramsBase {
 
   private activeProgram?: Program;
 
diff --git a/src/views/import/Dataset.vue b/src/views/import/Dataset.vue
index 5beba3189..8644384d5 100644
--- a/src/views/import/Dataset.vue
+++ b/src/views/import/Dataset.vue
@@ -50,7 +50,7 @@ import {DatasetModel} from "@/breeding-insight/model/DatasetModel";
 import {ExperimentService} from "@/breeding-insight/service/ExperimentService";
 import {Program} from "@/breeding-insight/model/Program";
 import {mapGetters} from "vuex";
-import {Trial} from '@/breeding-insight/model/Trial';
+import {Trial} from "@/breeding-insight/model/Trial";
 
 @Component({
   computed: {
diff --git a/src/views/observations/ObservationsList.vue b/src/views/observations/ObservationsList.vue
deleted file mode 100644
index eb090ea3d..000000000
--- a/src/views/observations/ObservationsList.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="observations-list">
-    <h1 class="title">{{title}}</h1>
-    <ObservationsListTable
-    v-on:show-success-notification="$emit('show-success-notification', $event)"
-    v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-    </ObservationsListTable>
-  </div>
-</template>
-
-<script lang="ts">
-  import {Component} from 'vue-property-decorator'
-  import ObservationsListTable from '@/components/observations/ObservationsListTable.vue'
-  import ProgramsBase from "@/components/program/ProgramsBase.vue";
-  import {Study} from '@/breeding-insight/model/Study';
-  import {StudyService} from '@/breeding-insight/service/StudyService';
-  import {Result} from '@/breeding-insight/model/Result';
-
-  @Component({
-    components: {
-      ObservationsListTable
-    }
-  })
-
-  export default class ObservationsList extends ProgramsBase {
-    private study: Study =  new Study();
-    private programId?: string = this.$route.params.programId;
-    private studyId?: string = this.$route.params.studyId;
-    private title: string = 'All Observations';
-
-    mounted() {
-      if (this.$route.params.studyId) this.getStudy();
-    } 
-
-    async getStudy() {
-      try {
-        const response: Result<Error, Study> = await StudyService.getById(this.programId, this.studyId!);
-        if(response.isErr()) throw response.value;
-        this.study = response.value;
-        this.title = `Observations in ${this.study.name}`;
-      } catch (error) {
-        this.$emit('show-error-notification', 'Error while trying to load studies');
-      }
-    }
-  }
-
-</script>
diff --git a/src/views/trials-and-studies/StudiesList.vue b/src/views/trials-and-studies/StudiesList.vue
deleted file mode 100644
index 65ed34ae5..000000000
--- a/src/views/trials-and-studies/StudiesList.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="studies-list">
-    <h1 class="title">{{title}}</h1>
-    <StudiesListTable
-    v-on:show-success-notification="$emit('show-success-notification', $event)"
-    v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-    </StudiesListTable>
-  </div>
-</template>
-
-<script lang="ts">
-  import { Component } from 'vue-property-decorator'
-  import StudiesListTable from '@/components/trials/StudiesListTable.vue'
-  import ProgramsBase from "@/components/program/ProgramsBase.vue";
-  import {Trial} from '@/breeding-insight/model/Trial';
-  import {TrialService} from '@/breeding-insight/service/TrialService';
-  import {Metadata} from "@/breeding-insight/model/BiResponse";
-  import { mapGetters } from 'vuex'
-  import {Result} from '@/breeding-insight/model/Result';
-  import {Program} from "@/breeding-insight/model/Program";
-
-  @Component({
-    components: {
-      StudiesListTable
-    },
-    computed: {
-      ...mapGetters([
-      'activeProgram'
-      ])
-    }
-  })
-
-  export default class StudiesList extends ProgramsBase {
-    private trial: Trial =  new Trial();
-    private activeProgram?: Program;
-    private trialId?: string = this.$route.params.trialId;
-    private title: string = 'All Studies';
-
-    mounted() {
-      if (this.$route.params.trialId) this.getTrial();
-    } 
-
-    async getTrial() {
-      try {
-        const response: Result<Error, Trial> = await TrialService.getById(this.activeProgram!.id, this.trialId!);
-        if(response.isErr()) throw response.value;
-        this.trial = response.value;
-        this.title = `Studies in ${this.trial.trialName}`;
-      } catch (error) {
-        this.$emit('show-error-notification', 'Error while trying to load studies');
-      }
-    }
-  }
-</script>
diff --git a/src/views/trials-and-studies/Trials.vue b/src/views/trials-and-studies/Trials.vue
deleted file mode 100644
index 458f11197..000000000
--- a/src/views/trials-and-studies/Trials.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div id="trials">
-    <h1 class="title">All Trials</h1>
-    <TrialsTable
-      v-on:show-success-notification="$emit('show-success-notification', $event)"
-      v-on:show-error-notification="$emit('show-error-notification', $event)"
-    >
-    </TrialsTable>
-  </div>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator'
-  import TrialsTable from "@/components/trials/TrialsTable.vue"
-  import TrialsAndStudiesBase from "@/components/trials/TrialsAndStudiesBase.vue";
-
-  @Component({
-    components: {
-      TrialsTable
-    }
-  })
-  export default class Trials extends TrialsAndStudiesBase {
-
-  }
-</script>
diff --git a/src/views/trials-and-studies/TrialsAndStudies.vue b/src/views/trials-and-studies/TrialsAndStudies.vue
deleted file mode 100644
index 63e57babc..000000000
--- a/src/views/trials-and-studies/TrialsAndStudies.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<!--
-  - See the NOTICE file distributed with this work for additional information
-  - regarding copyright ownership.
-  -
-  - Licensed under the Apache License, Version 2.0 (the "License");
-  - you may not use this file except in compliance with the License.
-  - You may obtain a copy of the License at
-  -
-  -     http://www.apache.org/licenses/LICENSE-2.0
-  -
-  - Unless required by applicable law or agreed to in writing, software
-  - distributed under the License is distributed on an "AS IS" BASIS,
-  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  - See the License for the specific language governing permissions and
-  - limitations under the License.
-  -->
-
-<template>
-  <div class="trials-studies">
-    <h1 class="title">
-      Trials and Studies
-    </h1>
-
-    <section>
-      <nav class="tabs is-boxed">
-        <ul>
-          <router-link
-            v-bind:to="{name: 'trials-list', params: {programId: activeProgram.id}}"
-            tag="li"
-            active-class="is-active"
-          >
-            <a>Trials</a>
-          </router-link>
-          <router-link
-            v-bind:to="{name: 'studies-list', params: {programId: activeProgram.id}}"
-            tag="li"
-            active-class="is-active"
-          >
-            <a>Studies</a>
-          </router-link>
-        </ul>
-      </nav>
-    </section>
-
-    <div class="tab-content">
-      <router-view
-        @show-success-notification="$emit('show-success-notification', $event)"
-        @show-info-notification="$emit('show-info-notification', $event)"
-        @show-error-notification="$emit('show-error-notification', $event)"
-      />
-    </div>      
-  </div>
-</template>
-
-<script lang="ts">
-  import { Component, Prop, Vue } from 'vue-property-decorator'
-  import StudiesListTable from '@/components/trials/StudiesListTable.vue';
-  import TrialsTable from '@/components/trials/TrialsTable.vue';
-  import {mapGetters} from "vuex";
-  import {Program} from "@/breeding-insight/model/Program";
-  import TrialsAndStudiesBase from "@/components/trials/TrialsAndStudiesBase.vue";
-
-  @Component({
-    components: {
-      StudiesListTable, TrialsTable
-    },
-    computed: {
-      ...mapGetters([
-        'activeProgram'
-      ])
-    }
-  })
-  export default class TrialsAndStudies extends TrialsAndStudiesBase {
-
-    private activeProgram?: Program;
-
-  }
-</script>