diff --git a/src/app/core/app-dynamic-component-manifests.ts b/src/app/core/app-dynamic-component-manifests.ts
index c4d5b13bf..542acd5db 100644
--- a/src/app/core/app-dynamic-component-manifests.ts
+++ b/src/app/core/app-dynamic-component-manifests.ts
@@ -1,434 +1,452 @@
 import {
-  LazyLoadedComponentManifest
+    LazyLoadedComponentManifest
 } from './dynamic-component-loader/dynamic-component-manifest';
 
 export const dynamicComponentManifests: LazyLoadedComponentManifest[] = [
-  {
-    componentId: 'structure-details',
-    path: 'structure-details',
-    loadChildren: () => import('./substance-details/structure-details/structure-details.module')
-      .then(m => m.StructureDetailsModule),
-  },
-  {
-    componentId: 'substance-audit-info',
-    path: 'substance-audit-info',
-    loadChildren: () => import('./substance-details/substance-audit-info/substance-audit-info.module')
-      .then(m => m.SubstanceAuditInfoModule),
-  },
-  {
-    componentId: 'substance-codes',
-    path: 'substance-codes',
-    loadChildren: () => import('./substance-details/substance-codes/substance-codes.module')
-      .then(m => m.SubstanceCodesModule),
-  },
-  {
-    componentId: 'substance-subunits',
-    path: 'substance-subunits',
-    loadChildren: () => import('./substance-details/substance-subunits/substance-subunits.module')
-      .then(m => m.SubstanceSubunitsModule),
-  },
-  {
-    componentId: 'substance-moieties',
-    path: 'substance-moieties',
-    loadChildren: () => import('./substance-details/substance-moieties/substance-moieties.module')
-      .then(m => m.SubstanceMoietiesModule),
-  },
-  {
-    componentId: 'substance-names',
-    path: 'substance-names',
-    loadChildren: () => import('./substance-details/substance-names/substance-names.module')
-      .then(m => m.SubstanceNamesModule),
-  },
-  {
-    componentId: 'substance-notes',
-    path: 'substance-notes',
-    loadChildren: () => import('./substance-details/substance-notes/substance-notes.module')
-      .then(m => m.SubstanceNotesModule),
-  },
-  {
-    componentId: 'substance-overview',
-    path: 'substance-overview',
-    loadChildren: () => import('./substance-details/substance-overview/substance-overview.module')
-      .then(m => m.SubstanceOverviewModule),
-  },
-  {
-    componentId: 'substance-references',
-    path: 'substance-references',
-    loadChildren: () => import('./substance-details/substance-references/substance-references.module')
-      .then(m => m.SubstanceReferencesModule),
-  },
-  {
-    componentId: 'substance-relationships-visualization',
-    path: 'substance-relationships-visualization',
-    loadChildren: () => import('./substance-details/substance-relationships-visualization/substance-relationships-visualization.module')
-      .then(m => m.SubstanceRelationshipsVisualizationModule),
-  },
-  {
-    componentId: 'substance-relationships',
-    path: 'substance-relationships',
-    loadChildren: () => import('./substance-details/substance-relationships/substance-relationships.module')
-      .then(m => m.SubstanceRelationshipsModule),
-  },
-  {
-    componentId: 'substance-concept-definition',
-    path: 'substance-concept-definition',
-    loadChildren: () => import('./substance-details/substance-concept-definition/substance-concept-definition.module')
-      .then(m => m.SubstanceConceptDefinitionModule),
-  },
-  {
-    componentId: 'substance-polymer-structure',
-    path: 'substance-polymer-structure',
-    loadChildren: () => import('./substance-details/substance-polymer-structure/substance-polymer-structure.module')
-      .then(m => m.SubstancePolymerStructureModule),
-  },
-  {
-    componentId: 'substance-monomers',
-    path: 'substance-monomers',
-    loadChildren: () => import('./substance-details/substance-monomers/substance-monomers.module')
-      .then(m => m.SubstanceMonomersModule),
-  },
-  {
-    componentId: 'substance-structural-units',
-    path: 'substance-structural-units',
-    loadChildren: () => import('./substance-details/substance-structural-units/substance-structural-units.module')
-      .then(m => m.SubstanceStructuralUnitsModule),
-  },
-  {
-    componentId: 'substance-mixture-components',
-    path: 'substance-mixture-components',
-    loadChildren: () => import('./substance-details/substance-mixture-components/substance-mixture-components.module')
-      .then(m => m.SubstanceMixtureComponentsModule),
-  },
-  {
-    componentId: 'substance-modifications',
-    path: 'substance-modifications',
-    loadChildren: () => import('./substance-details/substance-modifications/substance-modifications.module')
-      .then(m => m.SubstanceModificationsModule),
-  },
-  {
-    componentId: 'substance-disulfide-links',
-    path: 'substance-disulfide-links',
-    loadChildren: () => import('./substance-details/substance-disulfide-links/substance-disulfide-links.module')
-      .then(m => m.SubstanceDisulfideLinksModule),
-  },
-  {
-    componentId: 'substance-other-links',
-    path: 'substance-other-links',
-    loadChildren: () => import('./substance-details/substance-other-links/substance-other-links.module')
-      .then(m => m.SubstanceOtherLinksModule),
-  },
-  {
-    componentId: 'substance-glycosylation',
-    path: 'substance-glycosylation',
-    loadChildren: () => import('./substance-details/substance-glycosylation/substance-glycosylation.module')
-      .then(m => m.SubstanceGlycosylationModule),
-  },
-  {
-    componentId: 'substance-na-sugars',
-    path: 'substance-na-sugars',
-    loadChildren: () => import('./substance-details/substance-na-sugars/substance-na-sugars.module')
-      .then(m => m.SubstanceNaSugarsModule),
-  },
-  {
-    componentId: 'substance-na-linkages',
-    path: 'substance-na-linkages',
-    loadChildren: () => import('./substance-details/substance-na-linkages/substance-na-linkages.module')
-      .then(m => m.SubstanceNaLinkagesModule),
-  },
-  {
-    componentId: 'substance-properties',
-    path: 'substance-properties',
-    loadChildren: () => import('./substance-details/substance-properties/substance-properties.module')
-      .then(m => m.SubstancePropertiesModule),
-  },
-  {
-    componentId: 'substance-constituents',
-    path: 'substance-constituents',
-    loadChildren: () => import('./substance-details/substance-constituents/substance-constituents.module')
-      .then(m => m.SubstanceConstituentsModule),
-  },
-  {
-    componentId: 'substance-primary-definition',
-    path: 'substance-primary-definition',
-    loadChildren: () => import('./substance-details/substance-primary-definition/substance-primary-definition.module')
-      .then(m => m.SubstancePrimaryDefinitionModule),
-  },
-  {
-    componentId: 'substance-alternative-definition',
-    path: 'substance-alternative-definition',
-    loadChildren: () => import('./substance-details/substance-alternative-definition/substance-alternative-definition.module')
-      .then(m => m.SubstanceAlternativeDefinitionModule),
-  },
-  {
-    componentId: 'substance-variant-concepts',
-    path: 'substance-variant-concepts',
-    loadChildren: () => import('./substance-details/substance-variant-concepts/substance-variant-concepts.module')
-      .then(m => m.SubstanceVariantConceptsModule),
-  },
-  {
-    componentId: 'substance-mixture-source',
-    path: 'substance-mixture-source',
-    loadChildren: () => import('./substance-details/substance-mixture-source/substance-mixture-source.module')
-      .then(m => m.SubstanceMixtureSourceModule),
-  },
-  {
-    componentId: 'substance-mixture-parent',
-    path: 'substance-mixture-parent',
-    loadChildren: () => import('./substance-details/substance-mixture-parent/substance-mixture-parent.module')
-      .then(m => m.SubstanceMixtureParentModule),
-  },
-  {
-    componentId: 'substance-hierarchy',
-    path: 'substance-hierarchy',
-    loadChildren: () => import('./substance-details/substance-hierarchy/substance-hierarchy.module')
-      .then(m => m.SubstanceHierarchyModule),
-  },
-  {
-    componentId: 'substance-history',
-    path: 'substance-history',
-    loadChildren: () => import('./substance-details/substance-history/substance-history.module')
-      .then(m => m.SubstanceHistoryModule),
-  },
-  {
-    componentId: 'substance-ssg-parent-substance',
-    path: 'substance-ssg-parent-substance',
-    loadChildren: () => import('./substance-details/substance-ssg-parent-substance/substance-ssg-parent-substance.module')
-      .then(m => m.SubstanceSsgParentSubstanceModule),
-  },
-  {
-    componentId: 'substance-ssg1-parent',
-    path: 'substance-ssg1-parent',
-    loadChildren: () => import('./substance-details/substance-ssg1-parent/substance-ssg1-parent.module')
-      .then(m => m.SubstanceSsg1ParentModule),
-  },
-  {
-    componentId: 'substance-ssg-grade',
-    path: 'substance-ssg-grade',
-    loadChildren: () => import('./substance-details/substance-ssg-grade/substance-ssg-grade.module')
-      .then(m => m.SubstanceSsgGradeModule),
-  },
-  {
-    componentId: 'substance-ssg-definition',
-    path: 'substance-ssg-definition',
-    loadChildren: () => import('./substance-details/substance-ssg-definition/substance-ssg-definition.module')
-      .then(m => m.SubstanceSsgDefinitionModule),
-  },
-  {
-    componentId: 'substance-dependencies-image',
-    path: 'substance-dependencies-image',
-    loadChildren: () => import('./substance-details/substance-dependencies-image/substance-dependencies-image.module')
-      .then(m => m.SubstanceDependenciesImageModule),
-  },
-  {
-    componentId: 'substance-form-definition',
-    path: 'substance-form-definition',
-    loadChildren: () => import('./substance-form/substance-form-definition/substance-form-definition.module')
-      .then(m => m.SubstanceFormDefinitionModule),
-  },
-  {
-    componentId: 'substance-form-references',
-    path: 'substance-form-references',
-    loadChildren: () => import('./substance-form/references/substance-form-references.module')
-      .then(m => m.SubstanceFormReferencesModule),
-  },
-  {
-    componentId: 'substance-form-names',
-    path: 'substance-form-names',
-    loadChildren: () => import('./substance-form/names/substance-form-names.module')
-      .then(m => m.SubstanceFormNamesModule),
-  },
-  {
-    componentId: 'substance-form-structure',
-    path: 'substance-form-structure',
-    loadChildren: () => import('./substance-form/structure/substance-form-structure.module')
-      .then(m => m.SubstanceFormStructureModule),
-  },
-  {
-    componentId: 'substance-form-moieties',
-    path: 'substance-form-moieties',
-    loadChildren: () => import('./substance-form/moieties/substance-form-moieties.module')
-      .then(m => m.SubstanceFormMoietiesModule),
-  },
-  {
-    componentId: 'substance-form-codes-card',
-    path: 'substance-form-codes-card',
-    loadChildren: () => import('./substance-form/codes/substance-form-codes.module')
-      .then(m => m.SubstanceFormCodesModule),
-  },
-  {
-    componentId: 'substance-form-relationships',
-    path: 'substance-form-relationships',
-    loadChildren: () => import('./substance-form/relationships/substance-form-relationships.module')
-      .then(m => m.SubstanceFormRelationshipsModule),
-  },
-  {
-    componentId: 'substance-form-notes',
-    path: 'substance-form-notes',
-    loadChildren: () => import('./substance-form/notes/substance-form-notes.module')
-      .then(m => m.SubstanceFormNotesModule),
-  },
-  {
-    componentId: 'substance-form-properties',
-    path: 'substance-form-properties',
-    loadChildren: () => import('./substance-form/properties/substance-form-properties.module')
-      .then(m => m.SubstanceFormPropertiesModule)
-  },
-  {
-    componentId: 'substance-form-subunits',
-    path: 'substance-form-subunits',
-    loadChildren: () => import('./substance-form/substance-form-subunits/substance-form-subunits.module')
-      .then(m => m.SubstanceFormSubunitsModule)
-  },
-  {
-    componentId: 'substance-form-other-links',
-    path: 'substance-form-other-links',
-    loadChildren: () => import('./substance-form/other-links/substance-form-other-links.module')
-      .then(m => m.SubstanceFormOtherLinksModule)
-  },
-  {
-    componentId: 'substance-form-disulfide-links',
-    path: 'substance-form-disulfide-links',
-    loadChildren: () => import('./substance-form/disulfide-links/substance-form-disulfide-links.module')
-      .then(m => m.SubstanceFormDisulfideLinksModule)
-  },
-  {
-    componentId: 'substance-form-glycosylation',
-    path: 'substance-form-glycosylation',
-    loadChildren: () => import('./substance-form/glycosylation/substance-form-glycosylation.module')
-      .then(m => m.SubstanceFormGlycosylationModule)
-  },
-  {
-    componentId: 'substance-form-structural-modifications',
-    path: 'substance-form-structural-modifications',
-    loadChildren: () => import('./substance-form/structural-modifications/substance-form-structural-modifications.module')
-      .then(m => m.SubstanceFormStructuralModificationsModule)
-  },
-  {
-    componentId: 'substance-form-agent-modifications-card',
-    path: 'substance-form-agent-modifications-card',
-    loadChildren: () => import('./substance-form/agent-modifications/substance-form-agent-modifications.module')
-      .then(m => m.SubstanceFormAgentModificationsModule)
-  },
-  {
-    componentId: 'substance-form-physical-modifications',
-    path: 'substance-form-physical-modifications',
-    loadChildren: () => import('./substance-form/physical-modifications/substance-form-physical-modifications.module')
-      .then(m => m.SubstanceFormPhysicalModificationsModule)
-  },
-  {
-    componentId: 'substance-form-protein-details',
-    path: 'substance-form-protein-details',
-    loadChildren: () => import('./substance-form/protein-details/substance-form-protein-details.module')
-      .then(m => m.SubstanceFormProteinDetailsModule)
-  },
-  {
-    componentId: 'nucleic-acid-details-form',
-    path: 'nucleic-acid-details-form',
-    loadChildren: () => import('./substance-form/nucleic-acid-details-form/nucleic-acid-details-form.module')
-      .then(m => m.NucleicAcidDetailsFormModule)
-  },
-  {
-    componentId: 'substance-form-links',
-    path: 'substance-form-links',
-    loadChildren: () => import('./substance-form/links/substance-form-links.module')
-      .then(m => m.SubstanceFormLinksModule)
-  },
-  {
-    componentId: 'substance-form-sugars',
-    path: 'substance-form-sugars',
-    loadChildren: () => import('./substance-form/substance-form-sugars/substance-form-sugars.module')
-      .then(m => m.SubstanceFormSugarsModule)
-  },
-  {
-    componentId: 'substance-form-mixture-details',
-    path: 'substance-form-mixture-details',
-    loadChildren: () => import('./substance-form/mixture-details/substance-form-mixture-details.module')
-      .then(m => m.SubstanceFormMixtureDetailsModule)
-  },
-  {
-    componentId: 'substance-form-mixture-components',
-    path: 'substance-form-mixture-components',
-    loadChildren: () => import('./substance-form/mixture-components/substance-form-mixture-components.module')
-      .then(m => m.SubstanceFormMixtureComponentsModule)
-  },
-  {
-    componentId: 'substance-form-structurally-diverse-source',
-    path: 'substance-form-structurally-diverse-source',
-    loadChildren: () =>
-    import('./substance-form/structurally-diverse/substance-form-structurally-diverse-source/substance-form-structurally-diverse-source.module')
-      .then(m => m.SubstanceFormStructurallyDiverseSourceModule)
-  },
-  {
-    componentId: 'substance-form-structurally-diverse-organism',
-    path: 'substance-form-structurally-diverse-organism',
-    loadChildren: () =>
-    import('./substance-form/structurally-diverse/substance-form-structurally-diverse-organism/substance-form-structurally-diverse-organism.module')
-      .then(m => m.SubstanceFormStructurallyDiverseOrganismModule)
-  },
-  {
-    componentId: 'substance-form-constituents',
-    path: 'substance-form-constituents',
-    loadChildren: () => import('./substance-form/constituents/substance-form-constituents.module')
-      .then(m => m.SubstanceFormConstituentsModule)
-  },
-  {
-    componentId: 'substance-form-polymer-classification',
-    path: 'substance-form-polymer-classification',
-    loadChildren: () => import('./substance-form/polymer-classification/substance-form-polymer-classification.module')
-      .then(m => m.SubstanceFormPolymerClassificationModule)
-  },
-  {
-    componentId: 'substance-form-monomers',
-    path: 'substance-form-monomers',
-    loadChildren: () => import('./substance-form/monomers/substance-form-monomers.module')
-      .then(m => m.SubstanceFormMonomersModule)
-  },
-  {
-    componentId: 'substance-form-structural-units',
-    path: 'substance-form-structural-units',
-    loadChildren: () => import('./substance-form/structural-units/substance-form-structural-units.module')
-      .then(m => m.SubstanceFormStructuralUnitsModule)
-  },
-  {
-    componentId: 'substance-form-change-reason',
-    path: 'substance-form-change-reason',
-    loadChildren: () => import('./substance-form/substance-form-change-reason/substance-form-change-reason.module')
-      .then(m => m.SubstanceFormChangeReasonModule),
-  },
-  {
-    componentId: 'substance-form-ssg-parent-substance',
-    path: 'ssg-parent-substance-form',
-    loadChildren: () => import('./substance-form/ssg-parent-substance-form/ssg-parent-substance-form.module')
-      .then(m => m.SsgParentSubstanceFormModule)
-  },
-  {
-    componentId: 'substance-form-ssg-grade',
-    path: 'ssg-grade-form',
-    loadChildren: () => import('./substance-form/ssg-grade-form/ssg-grade-form.module')
-      .then(m => m.SsgGradeFormModule)
-  },
-  {
-    componentId: 'substance-form-ssg-definition',
-    path: 'ssg-definition-form',
-    loadChildren: () => import('./substance-form/ssg-definition-form/ssg-definition-form.module')
-      .then(m => m.SsgDefinitionFormModule)
-  },
-  {
-    componentId: 'substance-form-ssg4m-process',
-    path: 'ssg4m-process-form',
-    loadChildren: () => import('./substance-ssg4m/ssg4m-process/substance-form-ssg4m-process.module')
-      .then(m => m.SubstanceSsg4mProcessModule)
-  },
-  {
-    componentId: 'substance-form-ssg2-manufacturing',
-    path: 'substance-form-ssg2-manufacturing',
-    loadChildren: () => import('./substance-ssg2/ssg2-manufacturing/ssg2-manufacturing.module')
-      .then(m => m.Ssg2ManufacturingModule)
-  },
-  {
-    componentId: 'substance-form-ssg2-overview',
-    path: 'substance-form-ssg2-overview',
-    loadChildren: () => import('./substance-ssg2/ssg2-overview-form/ssg2-overview-form.module')
-      .then(m => m.Ssg2OverviewFormModule)
-  }
+    {
+        componentId: 'structure-details',
+        path: 'structure-details',
+        loadChildren: () => import('./substance-details/structure-details/structure-details.module')
+            .then(m => m.StructureDetailsModule),
+    },
+    {
+        componentId: 'substance-audit-info',
+        path: 'substance-audit-info',
+        loadChildren: () => import('./substance-details/substance-audit-info/substance-audit-info.module')
+            .then(m => m.SubstanceAuditInfoModule),
+    },
+    {
+        componentId: 'substance-codes',
+        path: 'substance-codes',
+        loadChildren: () => import('./substance-details/substance-codes/substance-codes.module')
+            .then(m => m.SubstanceCodesModule),
+    },
+    {
+        componentId: 'substance-subunits',
+        path: 'substance-subunits',
+        loadChildren: () => import('./substance-details/substance-subunits/substance-subunits.module')
+            .then(m => m.SubstanceSubunitsModule),
+    },
+    {
+        componentId: 'substance-moieties',
+        path: 'substance-moieties',
+        loadChildren: () => import('./substance-details/substance-moieties/substance-moieties.module')
+            .then(m => m.SubstanceMoietiesModule),
+    },
+    {
+        componentId: 'substance-names',
+        path: 'substance-names',
+        loadChildren: () => import('./substance-details/substance-names/substance-names.module')
+            .then(m => m.SubstanceNamesModule),
+    },
+    {
+        componentId: 'substance-notes',
+        path: 'substance-notes',
+        loadChildren: () => import('./substance-details/substance-notes/substance-notes.module')
+            .then(m => m.SubstanceNotesModule),
+    },
+    {
+        componentId: 'substance-overview',
+        path: 'substance-overview',
+        loadChildren: () => import('./substance-details/substance-overview/substance-overview.module')
+            .then(m => m.SubstanceOverviewModule),
+    },
+    {
+        componentId: 'substance-references',
+        path: 'substance-references',
+        loadChildren: () => import('./substance-details/substance-references/substance-references.module')
+            .then(m => m.SubstanceReferencesModule),
+    },
+    {
+        componentId: 'substance-relationships-visualization',
+        path: 'substance-relationships-visualization',
+        loadChildren: () => import('./substance-details/substance-relationships-visualization/substance-relationships-visualization.module')
+            .then(m => m.SubstanceRelationshipsVisualizationModule),
+    },
+    {
+        componentId: 'substance-relationships',
+        path: 'substance-relationships',
+        loadChildren: () => import('./substance-details/substance-relationships/substance-relationships.module')
+            .then(m => m.SubstanceRelationshipsModule),
+    },
+    {
+        componentId: 'substance-concept-definition',
+        path: 'substance-concept-definition',
+        loadChildren: () => import('./substance-details/substance-concept-definition/substance-concept-definition.module')
+            .then(m => m.SubstanceConceptDefinitionModule),
+    },
+    {
+        componentId: 'substance-polymer-structure',
+        path: 'substance-polymer-structure',
+        loadChildren: () => import('./substance-details/substance-polymer-structure/substance-polymer-structure.module')
+            .then(m => m.SubstancePolymerStructureModule),
+    },
+    {
+        componentId: 'substance-monomers',
+        path: 'substance-monomers',
+        loadChildren: () => import('./substance-details/substance-monomers/substance-monomers.module')
+            .then(m => m.SubstanceMonomersModule),
+    },
+    {
+        componentId: 'substance-structural-units',
+        path: 'substance-structural-units',
+        loadChildren: () => import('./substance-details/substance-structural-units/substance-structural-units.module')
+            .then(m => m.SubstanceStructuralUnitsModule),
+    },
+    {
+        componentId: 'substance-mixture-components',
+        path: 'substance-mixture-components',
+        loadChildren: () => import('./substance-details/substance-mixture-components/substance-mixture-components.module')
+            .then(m => m.SubstanceMixtureComponentsModule),
+    },
+    {
+        componentId: 'substance-modifications',
+        path: 'substance-modifications',
+        loadChildren: () => import('./substance-details/substance-modifications/substance-modifications.module')
+            .then(m => m.SubstanceModificationsModule),
+    },
+    {
+        componentId: 'substance-disulfide-links',
+        path: 'substance-disulfide-links',
+        loadChildren: () => import('./substance-details/substance-disulfide-links/substance-disulfide-links.module')
+            .then(m => m.SubstanceDisulfideLinksModule),
+    },
+    {
+        componentId: 'substance-other-links',
+        path: 'substance-other-links',
+        loadChildren: () => import('./substance-details/substance-other-links/substance-other-links.module')
+            .then(m => m.SubstanceOtherLinksModule),
+    },
+    {
+        componentId: 'substance-glycosylation',
+        path: 'substance-glycosylation',
+        loadChildren: () => import('./substance-details/substance-glycosylation/substance-glycosylation.module')
+            .then(m => m.SubstanceGlycosylationModule),
+    },
+    {
+        componentId: 'substance-na-sugars',
+        path: 'substance-na-sugars',
+        loadChildren: () => import('./substance-details/substance-na-sugars/substance-na-sugars.module')
+            .then(m => m.SubstanceNaSugarsModule),
+    },
+    {
+        componentId: 'substance-na-linkages',
+        path: 'substance-na-linkages',
+        loadChildren: () => import('./substance-details/substance-na-linkages/substance-na-linkages.module')
+            .then(m => m.SubstanceNaLinkagesModule),
+    },
+    {
+        componentId: 'substance-properties',
+        path: 'substance-properties',
+        loadChildren: () => import('./substance-details/substance-properties/substance-properties.module')
+            .then(m => m.SubstancePropertiesModule),
+    },
+    {
+        componentId: 'substance-constituents',
+        path: 'substance-constituents',
+        loadChildren: () => import('./substance-details/substance-constituents/substance-constituents.module')
+            .then(m => m.SubstanceConstituentsModule),
+    },
+    {
+        componentId: 'substance-primary-definition',
+        path: 'substance-primary-definition',
+        loadChildren: () => import('./substance-details/substance-primary-definition/substance-primary-definition.module')
+            .then(m => m.SubstancePrimaryDefinitionModule),
+    },
+    {
+        componentId: 'substance-alternative-definition',
+        path: 'substance-alternative-definition',
+        loadChildren: () => import('./substance-details/substance-alternative-definition/substance-alternative-definition.module')
+            .then(m => m.SubstanceAlternativeDefinitionModule),
+    },
+    {
+        componentId: 'substance-variant-concepts',
+        path: 'substance-variant-concepts',
+        loadChildren: () => import('./substance-details/substance-variant-concepts/substance-variant-concepts.module')
+            .then(m => m.SubstanceVariantConceptsModule),
+    },
+    {
+        componentId: 'substance-mixture-source',
+        path: 'substance-mixture-source',
+        loadChildren: () => import('./substance-details/substance-mixture-source/substance-mixture-source.module')
+            .then(m => m.SubstanceMixtureSourceModule),
+    },
+    {
+        componentId: 'substance-mixture-parent',
+        path: 'substance-mixture-parent',
+        loadChildren: () => import('./substance-details/substance-mixture-parent/substance-mixture-parent.module')
+            .then(m => m.SubstanceMixtureParentModule),
+    },
+    {
+        componentId: 'substance-hierarchy',
+        path: 'substance-hierarchy',
+        loadChildren: () => import('./substance-details/substance-hierarchy/substance-hierarchy.module')
+            .then(m => m.SubstanceHierarchyModule),
+    },
+    {
+        componentId: 'substance-history',
+        path: 'substance-history',
+        loadChildren: () => import('./substance-details/substance-history/substance-history.module')
+            .then(m => m.SubstanceHistoryModule),
+    },
+    {
+        componentId: 'substance-ssg-parent-substance',
+        path: 'substance-ssg-parent-substance',
+        loadChildren: () => import('./substance-details/substance-ssg-parent-substance/substance-ssg-parent-substance.module')
+            .then(m => m.SubstanceSsgParentSubstanceModule),
+    },
+    {
+        componentId: 'substance-ssg1-parent',
+        path: 'substance-ssg1-parent',
+        loadChildren: () => import('./substance-details/substance-ssg1-parent/substance-ssg1-parent.module')
+            .then(m => m.SubstanceSsg1ParentModule),
+    },
+    {
+        componentId: 'substance-ssg-grade',
+        path: 'substance-ssg-grade',
+        loadChildren: () => import('./substance-details/substance-ssg-grade/substance-ssg-grade.module')
+            .then(m => m.SubstanceSsgGradeModule),
+    },
+    {
+        componentId: 'substance-ssg-definition',
+        path: 'substance-ssg-definition',
+        loadChildren: () => import('./substance-details/substance-ssg-definition/substance-ssg-definition.module')
+            .then(m => m.SubstanceSsgDefinitionModule),
+    },
+    {
+        componentId: 'substance-dependencies-image',
+        path: 'substance-dependencies-image',
+        loadChildren: () => import('./substance-details/substance-dependencies-image/substance-dependencies-image.module')
+            .then(m => m.SubstanceDependenciesImageModule),
+    },
+    {
+        componentId: 'substance-form-definition',
+        path: 'substance-form-definition',
+        loadChildren: () => import('./substance-form/substance-form-definition/substance-form-definition.module')
+            .then(m => m.SubstanceFormDefinitionModule),
+    },
+    {
+        componentId: 'substance-form-references',
+        path: 'substance-form-references',
+        loadChildren: () => import('./substance-form/references/substance-form-references.module')
+            .then(m => m.SubstanceFormReferencesModule),
+    },
+  {
+    componentId: 'substance-form-simplified-references',
+    path: 'substance-form-simplified-references',
+    loadChildren: () => import('./substance-form/simplified-references/substance-form-simplified-references.module')
+      .then(m => m.SubstanceFormSimplifiedReferencesModule),
+  },
+    {
+        componentId: 'substance-form-names',
+        path: 'substance-form-names',
+        loadChildren: () => import('./substance-form/names/substance-form-names.module')
+            .then(m => m.SubstanceFormNamesModule),
+    },
+    {
+        componentId: 'substance-form-simplified-names',
+        path: 'substance-form-simplified-names',
+        loadChildren: () => import('./substance-form/simplified-names/substance-form-simplified-names.module')
+            .then(m => m.SubstanceFormSimplifiedNamesModule),
+    },
+    {
+        componentId: 'substance-form-structure',
+        path: 'substance-form-structure',
+        loadChildren: () => import('./substance-form/structure/substance-form-structure.module')
+            .then(m => m.SubstanceFormStructureModule),
+    },
+    {
+        componentId: 'substance-form-moieties',
+        path: 'substance-form-moieties',
+        loadChildren: () => import('./substance-form/moieties/substance-form-moieties.module')
+            .then(m => m.SubstanceFormMoietiesModule),
+    },
+    {
+        componentId: 'substance-form-codes-card',
+        path: 'substance-form-codes-card',
+        loadChildren: () => import('./substance-form/codes/substance-form-codes.module')
+            .then(m => m.SubstanceFormCodesModule),
+    },
+    {
+      componentId: 'substance-form-simplified-codes-card',
+      path: 'substance-form-simplified-codes-card',
+      loadChildren: () => import('./substance-form/simplified-codes/substance-form-simplified-codes.module')
+        .then(m => m.SubstanceFormSimplifiedCodesModule),
+    },
+    {
+        componentId: 'substance-form-relationships',
+        path: 'substance-form-relationships',
+        loadChildren: () => import('./substance-form/relationships/substance-form-relationships.module')
+            .then(m => m.SubstanceFormRelationshipsModule),
+    },
+    {
+        componentId: 'substance-form-notes',
+        path: 'substance-form-notes',
+        loadChildren: () => import('./substance-form/notes/substance-form-notes.module')
+            .then(m => m.SubstanceFormNotesModule),
+    },
+    {
+        componentId: 'substance-form-properties',
+        path: 'substance-form-properties',
+        loadChildren: () => import('./substance-form/properties/substance-form-properties.module')
+            .then(m => m.SubstanceFormPropertiesModule)
+    },
+    {
+        componentId: 'substance-form-subunits',
+        path: 'substance-form-subunits',
+        loadChildren: () => import('./substance-form/substance-form-subunits/substance-form-subunits.module')
+            .then(m => m.SubstanceFormSubunitsModule)
+    },
+    {
+        componentId: 'substance-form-other-links',
+        path: 'substance-form-other-links',
+        loadChildren: () => import('./substance-form/other-links/substance-form-other-links.module')
+            .then(m => m.SubstanceFormOtherLinksModule)
+    },
+    {
+        componentId: 'substance-form-disulfide-links',
+        path: 'substance-form-disulfide-links',
+        loadChildren: () => import('./substance-form/disulfide-links/substance-form-disulfide-links.module')
+            .then(m => m.SubstanceFormDisulfideLinksModule)
+    },
+    {
+        componentId: 'substance-form-glycosylation',
+        path: 'substance-form-glycosylation',
+        loadChildren: () => import('./substance-form/glycosylation/substance-form-glycosylation.module')
+            .then(m => m.SubstanceFormGlycosylationModule)
+    },
+    {
+        componentId: 'substance-form-structural-modifications',
+        path: 'substance-form-structural-modifications',
+        loadChildren: () => import('./substance-form/structural-modifications/substance-form-structural-modifications.module')
+            .then(m => m.SubstanceFormStructuralModificationsModule)
+    },
+    {
+        componentId: 'substance-form-agent-modifications-card',
+        path: 'substance-form-agent-modifications-card',
+        loadChildren: () => import('./substance-form/agent-modifications/substance-form-agent-modifications.module')
+            .then(m => m.SubstanceFormAgentModificationsModule)
+    },
+    {
+        componentId: 'substance-form-physical-modifications',
+        path: 'substance-form-physical-modifications',
+        loadChildren: () => import('./substance-form/physical-modifications/substance-form-physical-modifications.module')
+            .then(m => m.SubstanceFormPhysicalModificationsModule)
+    },
+    {
+        componentId: 'substance-form-protein-details',
+        path: 'substance-form-protein-details',
+        loadChildren: () => import('./substance-form/protein-details/substance-form-protein-details.module')
+            .then(m => m.SubstanceFormProteinDetailsModule)
+    },
+    {
+        componentId: 'nucleic-acid-details-form',
+        path: 'nucleic-acid-details-form',
+        loadChildren: () => import('./substance-form/nucleic-acid-details-form/nucleic-acid-details-form.module')
+            .then(m => m.NucleicAcidDetailsFormModule)
+    },
+    {
+        componentId: 'substance-form-links',
+        path: 'substance-form-links',
+        loadChildren: () => import('./substance-form/links/substance-form-links.module')
+            .then(m => m.SubstanceFormLinksModule)
+    },
+    {
+        componentId: 'substance-form-sugars',
+        path: 'substance-form-sugars',
+        loadChildren: () => import('./substance-form/substance-form-sugars/substance-form-sugars.module')
+            .then(m => m.SubstanceFormSugarsModule)
+    },
+    {
+        componentId: 'substance-form-mixture-details',
+        path: 'substance-form-mixture-details',
+        loadChildren: () => import('./substance-form/mixture-details/substance-form-mixture-details.module')
+            .then(m => m.SubstanceFormMixtureDetailsModule)
+    },
+    {
+        componentId: 'substance-form-mixture-components',
+        path: 'substance-form-mixture-components',
+        loadChildren: () => import('./substance-form/mixture-components/substance-form-mixture-components.module')
+            .then(m => m.SubstanceFormMixtureComponentsModule)
+    },
+    {
+        componentId: 'substance-form-structurally-diverse-source',
+        path: 'substance-form-structurally-diverse-source',
+        loadChildren: () =>
+            import('./substance-form/structurally-diverse/substance-form-structurally-diverse-source/substance-form-structurally-diverse-source.module')
+                .then(m => m.SubstanceFormStructurallyDiverseSourceModule)
+    },
+    {
+        componentId: 'substance-form-structurally-diverse-organism',
+        path: 'substance-form-structurally-diverse-organism',
+        loadChildren: () =>
+            import('./substance-form/structurally-diverse/substance-form-structurally-diverse-organism/substance-form-structurally-diverse-organism.module')
+                .then(m => m.SubstanceFormStructurallyDiverseOrganismModule)
+    },
+    {
+        componentId: 'substance-form-constituents',
+        path: 'substance-form-constituents',
+        loadChildren: () => import('./substance-form/constituents/substance-form-constituents.module')
+            .then(m => m.SubstanceFormConstituentsModule)
+    },
+    {
+        componentId: 'substance-form-polymer-classification',
+        path: 'substance-form-polymer-classification',
+        loadChildren: () => import('./substance-form/polymer-classification/substance-form-polymer-classification.module')
+            .then(m => m.SubstanceFormPolymerClassificationModule)
+    },
+    {
+        componentId: 'substance-form-monomers',
+        path: 'substance-form-monomers',
+        loadChildren: () => import('./substance-form/monomers/substance-form-monomers.module')
+            .then(m => m.SubstanceFormMonomersModule)
+    },
+    {
+        componentId: 'substance-form-structural-units',
+        path: 'substance-form-structural-units',
+        loadChildren: () => import('./substance-form/structural-units/substance-form-structural-units.module')
+            .then(m => m.SubstanceFormStructuralUnitsModule)
+    },
+    {
+        componentId: 'substance-form-change-reason',
+        path: 'substance-form-change-reason',
+        loadChildren: () => import('./substance-form/substance-form-change-reason/substance-form-change-reason.module')
+            .then(m => m.SubstanceFormChangeReasonModule),
+    },
+    {
+        componentId: 'substance-form-ssg-parent-substance',
+        path: 'ssg-parent-substance-form',
+        loadChildren: () => import('./substance-form/ssg-parent-substance-form/ssg-parent-substance-form.module')
+            .then(m => m.SsgParentSubstanceFormModule)
+    },
+    {
+        componentId: 'substance-form-ssg-grade',
+        path: 'ssg-grade-form',
+        loadChildren: () => import('./substance-form/ssg-grade-form/ssg-grade-form.module')
+            .then(m => m.SsgGradeFormModule)
+    },
+    {
+        componentId: 'substance-form-ssg-definition',
+        path: 'ssg-definition-form',
+        loadChildren: () => import('./substance-form/ssg-definition-form/ssg-definition-form.module')
+            .then(m => m.SsgDefinitionFormModule)
+    },
+    {
+        componentId: 'substance-form-ssg4m-process',
+        path: 'ssg4m-process-form',
+        loadChildren: () => import('./substance-ssg4m/ssg4m-process/substance-form-ssg4m-process.module')
+            .then(m => m.SubstanceSsg4mProcessModule)
+    },
+    {
+        componentId: 'substance-form-ssg2-manufacturing',
+        path: 'substance-form-ssg2-manufacturing',
+        loadChildren: () => import('./substance-ssg2/ssg2-manufacturing/ssg2-manufacturing.module')
+            .then(m => m.Ssg2ManufacturingModule)
+    },
+    {
+        componentId: 'substance-form-ssg2-overview',
+        path: 'substance-form-ssg2-overview',
+        loadChildren: () => import('./substance-ssg2/ssg2-overview-form/ssg2-overview-form.module')
+            .then(m => m.Ssg2OverviewFormModule)
+    }
 ];
diff --git a/src/app/core/config/nav-items.constant.ts b/src/app/core/config/nav-items.constant.ts
index e65eb82b1..73637e1a2 100644
--- a/src/app/core/config/nav-items.constant.ts
+++ b/src/app/core/config/nav-items.constant.ts
@@ -10,6 +10,11 @@ export const navItems: Array<NavItem> = [
                 path: 'substances/register/chemical',
                 order: 10
             },
+          {
+                display: 'Chemical (Simplified)',
+                path: 'substances/register/chemical-simplified',
+                order: 10
+            },
             {
                 display: 'Protein',
                 path: 'substances/register/protein',
diff --git a/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts b/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts
index 0ba2f9dca..b115481e1 100644
--- a/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts
+++ b/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts
@@ -19,7 +19,6 @@ export class SubstanceCardBaseFilteredList<T> extends SubstanceFormBase {
     }
 
     pageChange(pageEvent?: PageEvent, analyticsEventCategory?: string): void {
-
         if (pageEvent != null) {
 
             let eventAction;
diff --git a/src/app/core/substance-form/cv-input/cv-input.component.html b/src/app/core/substance-form/cv-input/cv-input.component.html
index a7603d2ff..8f2f7a802 100644
--- a/src/app/core/substance-form/cv-input/cv-input.component.html
+++ b/src/app/core/substance-form/cv-input/cv-input.component.html
@@ -4,7 +4,7 @@
   <mat-label>{{title}} {{required? ' *':''}}</mat-label>
   <mat-select [(ngModel)]="privateMod" name="term" (ngModelChange)="select($event)" [disabled] = "disable">
     <mat-option [value] = 'null' *ngIf = "privateMod" ><span class = 'deselect' >Clear selection</span></mat-option>
-  <mat-option *ngFor="let term of vocabulary" [value]=" term.value">
+  <mat-option *ngFor="let term of vocabulary" [value]="term.value">
     {{term.display}}
   </mat-option>
   <mat-option *ngIf = "privateMod && !inCV(  vocabulary, privateMod) && privateMod !== ''"
diff --git a/src/app/core/substance-form/cv-input/cv-input.component.ts b/src/app/core/substance-form/cv-input/cv-input.component.ts
index 9d74cdba9..af7f0bc48 100644
--- a/src/app/core/substance-form/cv-input/cv-input.component.ts
+++ b/src/app/core/substance-form/cv-input/cv-input.component.ts
@@ -48,7 +48,8 @@ export class CvInputComponent implements OnInit, OnDestroy {
     if (this.vocabulary) {
       this.vocabulary = this.addOtherOption(this.vocabulary, this.privateMod);
     } else if (this.key) {
-      this.dictionary = this.dictionaryService.getDictionaryRow(this.key);
+      this.dictionary = this.
+      dictionaryService.getDictionaryRow(this.key);
       if (!this.title) {
         this.title = this.dictionary.fieldName;
       }
@@ -126,10 +127,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
 
   openDialog(vocab: any, term: string): void {
     let thisy = window.pageYOffset;
-    window.scroll({ 
-      top: 0, 
-      left: 0, 
-      behavior: 'auto' 
+    window.scroll({
+      top: 0,
+      left: 0,
+      behavior: 'auto'
 });
 
    // this.overlayContainer = this.overlayContainerService.getContainerElement();
@@ -143,10 +144,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
       });
       this.overlayContainer.style.zIndex = '1005';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
-      window.scroll({ 
-        top: thisy, 
-        left: 0, 
-        behavior: 'auto' 
+      window.scroll({
+        top: thisy,
+        left: 0,
+        behavior: 'auto'
   });
       this.overlayContainer.style.zIndex = null;
       if (response ) {
@@ -164,10 +165,10 @@ export class CvInputComponent implements OnInit, OnDestroy {
   //    this.overlayContainer.style.zIndex = '1002';
     const dialogSubscription = dialogRef.afterClosed().subscribe(response => {
    //   this.overlayContainer.style.zIndex = null;
-   window.scroll({ 
-    top: thisy, 
-    left: 0, 
-    behavior: 'auto' 
+   window.scroll({
+    top: thisy,
+    left: 0,
+    behavior: 'auto'
 });
       if (response ) {
         this.privateMod = response.display;
diff --git a/src/app/core/substance-form/form-sections.constant.ts b/src/app/core/substance-form/form-sections.constant.ts
index 2832f4dc0..dcf39c6ce 100644
--- a/src/app/core/substance-form/form-sections.constant.ts
+++ b/src/app/core/substance-form/form-sections.constant.ts
@@ -2,13 +2,16 @@ export const formSections: { [substanceType: string]: Array<string> } = {
     chemical: [
         'substance-form-definition',
         'substance-form-names',
+        'substance-form-simplified-names',
         'substance-form-structure',
         'substance-form-moieties',
         'substance-form-codes-card',
+        'substance-form-simplified-codes-card',
         'substance-form-relationships',
         'substance-form-notes',
         'substance-form-properties',
         'substance-form-references',
+        'substance-form-simplified-references',
         'substance-form-change-reason'
     ],
   protein: [
@@ -140,3 +143,4 @@ export const formSections: { [substanceType: string]: Array<string> } = {
     'substance-form-ssg4m-process',
   ]
 };
+
diff --git a/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts b/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts
index 6f74cab45..1ba750e33 100644
--- a/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts
+++ b/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts
@@ -55,8 +55,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy {
       }
     });
     this.substanceFormReferencesService.emitReferencesUpdate();
-
-
   }
 
   applyToAllWithoutRef(): void {
@@ -108,7 +106,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy {
         }
       }
     });
-
     }
 
   applyToAllDomainWithoutRef(domainKey: string): void {
diff --git a/src/app/core/substance-form/references/substance-form-references.module.ts b/src/app/core/substance-form/references/substance-form-references.module.ts
index fb56b6a33..85a7d158a 100644
--- a/src/app/core/substance-form/references/substance-form-references.module.ts
+++ b/src/app/core/substance-form/references/substance-form-references.module.ts
@@ -1,16 +1,17 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SubstanceFormReferencesCardComponent } from './substance-form-references-card.component';
-import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module';
+import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader';
 import { SubstanceFormModule } from '../substance-form.module';
 import { MatDividerModule } from '@angular/material/divider';
-import { ScrollToModule } from '../../scroll-to/scroll-to.module';
+import { ScrollToModule } from '@gsrs-core/scroll-to';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatInputModule } from '@angular/material/input';
+import {ReferenceFormComponent} from "./reference-form.component";
 
 @NgModule({
   imports: [
@@ -27,8 +28,12 @@ import { MatInputModule } from '@angular/material/input';
     MatPaginatorModule,
     MatInputModule
   ],
+  exports:[
+    ReferenceFormComponent,
+  ],
   declarations: [
     SubstanceFormReferencesCardComponent,
+    ReferenceFormComponent
   ]
 })
 export class SubstanceFormReferencesModule { }
diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.html b/src/app/core/substance-form/simplified-codes/code-form.component.html
new file mode 100644
index 000000000..7b53abc28
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/code-form.component.html
@@ -0,0 +1,29 @@
+<div class="code-form-container">
+  <div *ngIf="code.$$deletedCode" class="notification-backdrop">
+    Deleted&nbsp;
+    <button mat-icon-button matTooltip="Undo" (click)="undoDelete()">
+      <mat-icon svgIcon="undo"></mat-icon>
+    </button>
+  </div>
+
+  <div class="form-row">
+    <div class="delete-container">
+      <button mat-icon-button matTooltip="Delete code" (click)="deleteCode()">
+        <mat-icon svgIcon="delete_forever"></mat-icon>
+      </button>
+    </div>
+
+    <app-cv-input required='true' class="code-system" key='Code System' title="Code System" name="code"
+                  [model]="code.codeSystem" (valueChange)="setCodeSystemType($event)">
+    </app-cv-input>
+
+    <mat-form-field class="code">
+      <input matInput placeholder="Code" [(ngModel)]="code.code" required name="code"/>
+    </mat-form-field>
+
+    <div>
+      <app-access-manager (accessOut)="updateAccess($event)" [access]="code.access">
+      </app-access-manager>
+    </div>
+  </div>
+</div>
diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.scss b/src/app/core/substance-form/simplified-codes/code-form.component.scss
new file mode 100644
index 000000000..7ef73c8a6
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/code-form.component.scss
@@ -0,0 +1,73 @@
+.code-form-container {
+  padding: 10px 3px 4px 3px;
+    position: relative;
+}
+
+.collapse {
+  padding: 10px 5px 6px 5px;
+    position: relative;
+}
+
+.resolve {
+  padding: 0 20px 20px 0;
+  color: var(--primary-color);
+}
+
+.notification-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    z-index: 10;
+    background-color: var(--notif-backdrop-bg-color);
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bold;
+    color: var(--notif-backdrop-color);
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    align-items: flex-end;
+
+    .delete-container {
+        padding: 0 10px 8px 0;
+    }
+
+    .code-system,.code{
+        flex-grow: 1;
+        padding-right: 15px;
+    }
+
+    .code-text, .url {
+        flex-grow: 1;
+    }
+}
+
+.key-value-pair {
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+
+    .key {
+        font-size: 11px;
+        padding-bottom: 3.5px;
+        line-height: 11px;
+        color: var(--dark-label-color);
+        font-weight: 400;
+        font-family: Roboto, "Helvetica Neue", sans-serif;
+    }
+
+    .value {
+        font-size: 15.5px;
+    }
+}
+
+.references-container {
+    width: 100%;
+}
diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts b/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts
new file mode 100644
index 000000000..8b52f5c3f
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CodeFormComponent } from './code-form.component';
+
+describe('CodeFormComponent', () => {
+  let component: CodeFormComponent;
+  let fixture: ComponentFixture<CodeFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CodeFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CodeFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.ts b/src/app/core/substance-form/simplified-codes/code-form.component.ts
new file mode 100644
index 000000000..c1a1ebeab
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/code-form.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
+import { SubstanceCode } from '@gsrs-core/substance';
+import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary';
+import { VocabularyTerm } from '@gsrs-core/controlled-vocabulary';
+import { UtilsService } from '@gsrs-core/utils';
+
+@Component({
+  selector: 'app-code-form',
+  templateUrl: './code-form.component.html',
+  styleUrls: ['./code-form.component.scss']
+})
+export class CodeFormComponent implements OnInit {
+  private privateCode: SubstanceCode;
+  @Output() codeDeleted = new EventEmitter<SubstanceCode>();
+  codeSystemList: Array<VocabularyTerm> = [];
+  codeSystemDictionary: { [termValue: string]: VocabularyTerm };
+  codeSystemType: string;
+  codeTypeList: Array<VocabularyTerm> = [];
+  deleteTimer: any;
+
+  constructor(
+    private cvService: ControlledVocabularyService,
+    private utilsService: UtilsService
+  ) { }
+
+  ngOnInit() {
+    this.getVocabularies();
+
+    // Protected access by default.
+    this.privateCode.access = ["protected"]
+  }
+
+  @Input()
+  set code(code: SubstanceCode) {
+    this.privateCode = code;
+  }
+
+  get code(): SubstanceCode {
+    return this.privateCode;
+  }
+
+  getVocabularies(): void {
+    this.cvService.getDomainVocabulary('CODE_SYSTEM', 'CODE_TYPE').subscribe(response => {
+      this.codeSystemList = response['CODE_SYSTEM'].list;
+      this.codeSystemDictionary = response['CODE_SYSTEM'].dictionary;
+      this.setCodeSystemType();
+      this.codeTypeList = response['CODE_TYPE'].list;
+    });
+  }
+
+  deleteCode(): void {
+    this.privateCode.$$deletedCode = this.utilsService.newUUID();
+    if (!this.privateCode.codeSystem
+      && !this.privateCode.type
+      && !this.privateCode.code
+    ) {
+      this.deleteTimer = setTimeout(() => {
+        this.codeDeleted.emit(this.privateCode);
+      }, 2000);
+    }
+  }
+
+  trimWhitespace(value) {
+    this.code.url = value;
+    this.privateCode.url = this.privateCode.url.replace(/[\u200A|\u2009|\u2006|\u2008]/g, ' ').trim();
+    this.privateCode.url = value.trim().trim().trim();
+  }
+
+  undoDelete(): void {
+    clearTimeout(this.deleteTimer);
+    delete this.privateCode.$$deletedCode;
+  }
+
+  setCodeSystemType(event?: any): void {
+    if (event) {
+      this.code.codeSystem = event;
+    }
+    if (this.privateCode != null && this.codeSystemDictionary != null) {
+      this.codeSystemType = this.codeSystemDictionary[this.privateCode.codeSystem]
+        && this.codeSystemDictionary[this.privateCode.codeSystem].systemCategory || '';
+    }
+  }
+
+  updateAccess(access: Array<string>): void {
+    this.code.access = access;
+  }
+
+}
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html
new file mode 100644
index 000000000..dee60caa7
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html
@@ -0,0 +1,18 @@
+<div class="flex-row">
+  <mat-form-field [floatLabel]="'never'" class="search" *ngIf="codes && codes.length > pageSize">
+    <input matInput placeholder="Search" [formControl]="searchControl">
+  </mat-form-field>
+  <span class="middle-fill"></span>
+</div>
+
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
+    (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+<div class="code" *ngFor="let code of paged; last as isLast; index as index" appScrollToTarget
+  [id]="'substance-code-' + index">
+  <app-code-form [code]="code" (codeDeleted)="deleteCode($event)" [show] = "expanded"></app-code-form>
+  <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
+</div>
+<mat-paginator *ngIf="codes && codes.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true"
+  (page)="pageChange($event, analyticsEventCategory)" [pageSizeOptions]="[5, 10, 25, 100]">
+</mat-paginator>
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss
new file mode 100644
index 000000000..be13a5bc0
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss
@@ -0,0 +1,41 @@
+.mat-divider.mat-divider-inset {
+    margin-left: 0;
+}
+
+.mat-divider {
+    border-top-color: var(--text-color);
+}
+
+.code {
+
+    &:nth-child(odd) {
+        background-color: var(--nth-child-color-2);
+
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-3);
+            }
+        }
+    }
+
+    &:nth-child(even) {
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-1);
+            }
+        }
+    }
+
+    ::ng-deep {
+        .mat-expansion-panel, .mat-table, textarea {
+            background-color: var(--regular-transparent-color);
+        }
+    }
+}
+
+.search {
+    width: 400px;
+    max-width: 100%;
+}
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts
new file mode 100644
index 000000000..00636964b
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubstanceFormSimplifiedCodesCardComponent } from './substance-form-simplified-codes-card.component';
+
+describe('SubstanceFormCodesCardComponent', () => {
+  let component: SubstanceFormSimplifiedCodesCardComponent;
+  let fixture: ComponentFixture<SubstanceFormSimplifiedCodesCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubstanceFormSimplifiedCodesCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubstanceFormSimplifiedCodesCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts
new file mode 100644
index 000000000..73ea10416
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list';
+import { SubstanceFormService } from '../substance-form.service';
+import { SubstanceCode } from '@gsrs-core/substance/substance.model';
+import { ScrollToService } from '../../scroll-to/scroll-to.service';
+import { GoogleAnalyticsService } from '@gsrs-core/google-analytics';
+import { Subscription } from 'rxjs';
+import { SubstanceFormCodesService } from '../codes/substance-form-codes.service';
+
+@Component({
+  selector: 'app-substance-form-codes-card',
+  templateUrl: './substance-form-simplified-codes-card.component.html',
+  styleUrls: ['./substance-form-simplified-codes-card.component.scss']
+})
+export class SubstanceFormSimplifiedCodesCardComponent extends SubstanceCardBaseFilteredList<SubstanceCode>
+  implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList {
+
+  codes: Array<SubstanceCode>;
+  private subscriptions: Array<Subscription> = [];
+  pageSize = 10;
+  expanded = true;
+  validate = false;
+
+  constructor(
+    private substanceFormCodesService: SubstanceFormCodesService,
+    private substanceFormService: SubstanceFormService,
+    private scrollToService: ScrollToService,
+    public gaService: GoogleAnalyticsService
+  ) {
+    super(gaService);
+    this.analyticsEventCategory = 'substance form codes';
+  }
+
+  ngOnInit() {
+    this.menuLabelUpdate.emit('Codes');
+  }
+
+  collapse() {
+    this.expanded = !this.expanded;
+  }
+
+  ngAfterViewInit() {
+    const definitionSubscription = this.substanceFormService.definition.subscribe( level => {
+      if (level.definitionType && level.definitionType === 'ALTERNATIVE') {
+      //  this.canAddItemUpdate.emit(false);
+        this.hiddenStateUpdate.emit(true);
+      } else {
+        this.canAddItemUpdate.emit(true);
+        this.hiddenStateUpdate.emit(false);
+      }
+    });
+    this.subscriptions.push(definitionSubscription);
+    const codesSubscription = this.substanceFormCodesService.substanceCodes.subscribe(codes => {
+      this.codes = codes;
+      this.filtered = codes;
+      const searchSubscription = this.searchControl.valueChanges.subscribe(value => {
+        this.filterList(value, this.codes, this.analyticsEventCategory);
+      }, error => {
+        console.log(error);
+      });
+      this.subscriptions.push(searchSubscription);
+      this.page = 0;
+      this.pageChange();
+    });
+    this.subscriptions.push(codesSubscription);
+  }
+
+  ngOnDestroy() {
+    this.componentDestroyed.emit();
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+
+  addItem(): void {
+    this.addCode();
+  }
+
+  addCode(): void {
+    this.substanceFormCodesService.addSubstanceCode();
+    setTimeout(() => {
+      this.scrollToService.scrollToElement(`substance-code-0`, 'center');
+    });
+  }
+
+  deleteCode(code: SubstanceCode): void {
+    this.substanceFormCodesService.deleteSubstanceCode(code);
+  }
+
+}
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts
new file mode 100644
index 000000000..f6bce4a3a
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts
@@ -0,0 +1,13 @@
+import { SubstanceFormSimplifiedCodesModule } from './substance-form-simplified-codes.module';
+
+describe('SubstanceFormCodesModule', () => {
+  let substanceFormCodesModule: SubstanceFormSimplifiedCodesModule;
+
+  beforeEach(() => {
+    substanceFormCodesModule = new SubstanceFormSimplifiedCodesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(substanceFormCodesModule).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts
new file mode 100644
index 000000000..5414f38a7
--- /dev/null
+++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SubstanceFormSimplifiedCodesCardComponent } from './substance-form-simplified-codes-card.component';
+import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader';
+import { SubstanceFormModule } from '../substance-form.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { ScrollToModule } from '@gsrs-core/scroll-to';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatInputModule } from '@angular/material/input';
+import { CodeFormComponent } from './code-form.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedCodesCardComponent),
+    SubstanceFormModule,
+    MatDividerModule,
+    MatIconModule,
+    MatButtonModule,
+    ScrollToModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatPaginatorModule,
+    MatInputModule,
+    MatTooltipModule
+  ],
+  declarations: [
+    SubstanceFormSimplifiedCodesCardComponent,
+    CodeFormComponent
+  ]
+})
+export class SubstanceFormSimplifiedCodesModule { }
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html
new file mode 100644
index 000000000..30089d6ef
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/name-form.component.html
@@ -0,0 +1,34 @@
+<div class="name-form-container" [ngClass] = "!viewFull? 'collapse':'name-form-container'" >
+  <div *ngIf="name.$$deletedCode" class="notification-backdrop">
+    Deleted&nbsp;
+    <button mat-icon-button matTooltip="Undo" (click)="undoDelete()">
+      <mat-icon svgIcon="undo"></mat-icon>
+    </button>
+  </div>
+
+  <div class="form-row">
+    <div class="delete-container">
+      <button mat-icon-button matTooltip="Delete name" (click)="deleteName()">
+        <mat-icon svgIcon="delete_forever"></mat-icon>
+      </button>
+    </div>
+
+    <mat-form-field class="name">
+      <textarea matInput class="text-area" placeholder="Name" [(ngModel)]="name.name" required name="name" (keypress)="preventNewLine($event)"></textarea>
+    </mat-form-field>
+
+    <a class="resolve" *ngIf="name.name && name.name.length > 0 && substanceType === 'structure'"
+       (click)="resolve()">resolve</a>
+
+    <app-cv-input required='true' class="name-type" key="Name Type Code" title="Type" [model]="name.type"
+      (valueChange)="name.type = $event">
+    </app-cv-input>
+
+    <div>
+      <app-access-manager  (accessOut)="updateAccess($event)" [access]="name.access">
+      </app-access-manager>
+    </div>
+  </div>
+</div>
+
+
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.scss b/src/app/core/substance-form/simplified-names/name-form.component.scss
new file mode 100644
index 000000000..277f9e8fb
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/name-form.component.scss
@@ -0,0 +1,61 @@
+.name-form-container {
+    padding: 10px 3px 4px 3px;
+    position: relative;
+}
+
+.collapse {
+    padding: 10px 5px 6px 5px;
+    position: relative;
+}
+
+.resolve {
+  padding: 0 20px 20px 0;
+  color: var(--primary-color);
+}
+
+.text-area{
+  height:12px
+}
+
+.notification-backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    z-index: 10;
+    background-color: var(--notif-backdrop-bg-color);
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+    font-weight: bold;
+    color: var(--notif-backdrop-color);
+}
+
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .delete-container {
+        padding: 0 10px 8px 0;
+    }
+
+    .checkbox-container, .radio-container {
+        padding-bottom: 18px;
+    }
+
+    .radio-container, .checkbox-container {
+        padding-right: 15px;
+    }
+
+    .name, .tags, .domains {
+        flex-grow: 1;
+        padding-right: 15px;
+    }
+
+    .jurisdiction {
+        flex-grow: 1;
+    }
+}
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.spec.ts b/src/app/core/substance-form/simplified-names/name-form.component.spec.ts
new file mode 100644
index 000000000..0bb9a7372
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/name-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NameFormComponent } from './name-form.component';
+
+describe('NameFormComponent', () => {
+  let component: NameFormComponent;
+  let fixture: ComponentFixture<NameFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NameFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NameFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.ts b/src/app/core/substance-form/simplified-names/name-form.component.ts
new file mode 100644
index 000000000..b1ce8e718
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/name-form.component.ts
@@ -0,0 +1,164 @@
+import {Component, OnInit, Input, Output, EventEmitter, OnDestroy} from '@angular/core';
+import {SubstanceName, SubstanceNameOrg} from '../../substance/substance.model';
+import {ControlledVocabularyService} from '../../controlled-vocabulary/controlled-vocabulary.service';
+import {FormControl} from '@angular/forms';
+import {MatRadioChange} from '@angular/material/radio';
+import {UtilsService} from '../../utils/utils.service';
+import {Subscription} from 'rxjs';
+import {NameResolverDialogComponent} from '@gsrs-core/name-resolver/name-resolver-dialog.component';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {MatDialog} from '@angular/material/dialog';
+import {SubstanceFormService} from '@gsrs-core/substance-form/substance-form.service';
+import {SubstanceFormNamesService} from '@gsrs-core/substance-form/names/substance-form-names.service';
+
+@Component({
+  selector: 'app-name-form',
+  templateUrl: './name-form.component.html',
+  styleUrls: ['./name-form.component.scss']
+})
+export class NameFormComponent implements OnInit, OnDestroy {
+  private privateName: SubstanceName;
+  @Output() priorityUpdate = new EventEmitter<SubstanceName>();
+  @Output() nameDeleted = new EventEmitter<SubstanceName>();
+  nameControl = new FormControl('');
+  nameTypeControl = new FormControl('');
+  deleteTimer: any;
+  private subscriptions: Array<Subscription> = [];
+  overlayContainer: HTMLElement;
+  substanceType = '';
+  viewFull = true;
+  showStd = false;
+
+  constructor(
+    private cvService: ControlledVocabularyService,
+    private utilsService: UtilsService,
+    private dialog: MatDialog,
+    private substanceFormService: SubstanceFormService,
+    private overlayContainerService: OverlayContainer,
+    private nameFormService: SubstanceFormNamesService
+  ) {
+  }
+
+  ngOnInit() {
+    this.overlayContainer = this.overlayContainerService.getContainerElement();
+    const definition = this.substanceFormService.definition.subscribe(def => {
+      this.substanceType = def.substanceClass;
+    });
+    definition.unsubscribe();
+
+    // Protected access by default.
+    this.privateName.access = ["protected"]
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+
+  @Input()
+  set show(val: boolean) {
+    if (val != null) {
+      this.viewFull = val;
+    }
+  }
+
+  get show(): boolean {
+    return this.viewFull || null;
+  }
+
+  @Input()
+  set standardized(val: boolean) {
+    if (val != null) {
+      this.showStd = val;
+    }
+  }
+
+  get standardized(): boolean {
+    return this.showStd;
+  }
+
+  @Input()
+  set name(name: SubstanceName) {
+    if (name != null) {
+      this.privateName = name;
+      if (!this.privateName.languages || this.privateName.languages.length === 0) {
+        this.privateName.languages = ['en'];
+      }
+      if (!this.privateName.type) {
+        this.privateName.type = 'cn';
+      }
+    }
+  }
+
+  get name(): SubstanceName {
+    return this.privateName || {};
+  }
+
+  priorityUpdated(event: MatRadioChange) {
+    this.privateName.displayName = (event.value === 'true');
+    this.priorityUpdate.emit(this.privateName);
+  }
+
+  updateAccess(access: Array<string>): void {
+    this.privateName.access = access;
+  }
+
+  updateLanguages(languages: Array<string>): void {
+    this.privateName.languages = languages;
+  }
+
+  updateDomains(domains: Array<string>): void {
+    this.privateName.domains = domains;
+  }
+
+  updateJurisdiction(jurisdiction: Array<string>): void {
+    this.privateName.nameJurisdiction = jurisdiction;
+  }
+
+  deleteName(): void {
+    this.privateName.$$deletedCode = this.utilsService.newUUID();
+
+    if (!this.privateName.name
+      && !this.privateName.type
+    ) {
+      this.deleteTimer = setTimeout(() => {
+        this.nameDeleted.emit(this.privateName);
+      }, 2000);
+    }
+  }
+
+  undoDelete(): void {
+    clearTimeout(this.deleteTimer);
+    delete this.privateName.$$deletedCode;
+  }
+
+  resolve(): void {
+    const dialogRef = this.dialog.open(NameResolverDialogComponent, {
+      height: 'auto',
+      width: '800px',
+      data: {'name': this.privateName.name}
+    });
+    this.overlayContainer.style.zIndex = '1002';
+    dialogRef.afterClosed().subscribe((molfile?: string) => {
+      this.overlayContainer.style.zIndex = null;
+      if (molfile != null && molfile !== '') {
+        this.substanceFormService.resolvedName(molfile);
+      }
+    }, () => {
+    });
+  }
+
+  getNameOrgs(name: SubstanceName): Array<SubstanceNameOrg> {
+    if (!name.nameOrgs) {
+      name.nameOrgs = [];
+    }
+    return name.nameOrgs as Array<SubstanceNameOrg>;
+  }
+
+  preventNewLine(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+    }
+  }
+}
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html
new file mode 100644
index 000000000..3b160412e
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html
@@ -0,0 +1,17 @@
+<div class="flex-row">
+  <mat-form-field [floatLabel]="'never'" class="search" *ngIf="names && names.length > pageSize">
+    <input matInput placeholder="Search" [formControl]="searchControl">
+  </mat-form-field>
+  <span class="middle-fill"></span>
+</div>
+
+<mat-paginator *ngIf="names && names.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+    [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+<div class="name" *ngFor="let name of paged; last as isLast; index as index" appScrollToTarget [id]="'substance-name-' + index">
+  <app-name-form [name]="name" (priorityUpdate)="priorityUpdated($event)" (nameDeleted)="deleteName($event)" [standardized] = "showStd"></app-name-form>
+  <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
+</div>
+<mat-paginator *ngIf="names && names.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="10" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+  [pageSizeOptions]="[5, 10, 25, 100]">
+</mat-paginator>
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss
new file mode 100644
index 000000000..3712397b3
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss
@@ -0,0 +1,41 @@
+.mat-divider.mat-divider-inset {
+    margin-left: 0;
+}
+
+.mat-divider {
+    border-top-color: var(--text-color);
+}
+
+.name {
+
+    &:nth-child(odd) {
+        background-color: var(--nth-child-color-2);
+
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-3);
+            }
+        }
+    }
+
+    &:nth-child(even) {
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-1);
+            }
+        }
+    }
+
+    ::ng-deep {
+        .mat-expansion-panel, .mat-table, textarea {
+            background-color: var(--regular-transparent-color);
+        }
+    }
+}
+
+.search {
+    width: 400px;
+    max-width: 100%;
+}
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts
new file mode 100644
index 000000000..f0d4edb51
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubstanceFormSimplifiedNamesCardComponent } from './substance-form-simplified-names-card.component';
+
+describe('SubstanceFormNamesComponent', () => {
+  let component: SubstanceFormSimplifiedNamesCardComponent;
+  let fixture: ComponentFixture<SubstanceFormSimplifiedNamesCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubstanceFormSimplifiedNamesCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubstanceFormSimplifiedNamesCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts
new file mode 100644
index 000000000..733f49237
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts
@@ -0,0 +1,106 @@
+import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list';
+import { SubstanceName } from '@gsrs-core/substance/substance.model';
+import { SubstanceFormService } from '../substance-form.service';
+import { ScrollToService } from '../../scroll-to/scroll-to.service';
+import { GoogleAnalyticsService } from '@gsrs-core/google-analytics';
+import { Subscription } from 'rxjs';
+import { ConfigService } from '@gsrs-core/config';
+import {SubstanceFormNamesService} from "@gsrs-core/substance-form/names/substance-form-names.service";
+
+@Component({
+  selector: 'app-substance-form-names-card',
+  templateUrl: './substance-form-simplified-names-card.component.html',
+  styleUrls: ['./substance-form-simplified-names-card.component.scss']
+})
+export class SubstanceFormSimplifiedNamesCardComponent
+  extends SubstanceCardBaseFilteredList<SubstanceName>
+  implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList {
+  names: Array<SubstanceName>;
+  private subscriptions: Array<Subscription> = [];
+  pageSize = 10;
+  showStd = true;
+  appId: string;
+  standardizeButton = false;
+
+  constructor(
+    private substanceFormNamesService: SubstanceFormNamesService,
+    private substanceFormService: SubstanceFormService,
+    private scrollToService: ScrollToService,
+    public gaService: GoogleAnalyticsService,
+    private configService: ConfigService,
+
+  ) {
+    super(gaService);
+    this.analyticsEventCategory = 'substance form names';
+  }
+
+  ngOnInit() {
+    this.menuLabelUpdate.emit('Substance Names');
+    this.appId = this.configService.environment.appId;
+    this.standardizeButton = this.configService.configData.showNameStandardizeButton || false;
+    const definitionSubscription = this.substanceFormService.definition.subscribe( level => {
+      if (level.definitionType && level.definitionType === 'ALTERNATIVE') {
+      //  this.canAddItemUpdate.emit(false);
+        this.hiddenStateUpdate.emit(true);
+      } else {
+        this.canAddItemUpdate.emit(true);
+        this.hiddenStateUpdate.emit(false);
+      }
+      });
+    this.subscriptions.push(definitionSubscription);
+    const namesSubscription = this.substanceFormNamesService.substanceNames.subscribe(names => {
+      this.names = names;
+      this.filtered = names;
+      const searchSubscription = this.searchControl.valueChanges.subscribe(value => {
+        this.filterList(value, this.names, this.analyticsEventCategory);
+      }, error => {
+        console.log(error);
+      });
+      this.subscriptions.push(searchSubscription);
+      this.page = 0;
+      this.pageChange();
+    });
+    this.subscriptions.push(namesSubscription);
+  }
+
+  ngAfterViewInit() {
+
+  }
+
+  standardize(): void {
+    // We currently only want the back-end to standardize names
+   // this.substanceFormNamesService.standardizeNames();
+  }
+
+  ngOnDestroy() {
+    this.componentDestroyed.emit();
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+
+  addItem(): void {
+    this.addName();
+  }
+
+  addName(): void {
+    this.substanceFormNamesService.addSubstanceName();
+    setTimeout(() => {
+      this.scrollToService.scrollToElement(`substance-name-0`, 'center');
+    });
+  }
+
+  priorityUpdated(updatedName: SubstanceName): void {
+    this.names.forEach(name => {
+      if (name !== updatedName) {
+        name.displayName = false;
+      }
+    });
+  }
+
+  deleteName(name: SubstanceName): void {
+    this.substanceFormNamesService.deleteSubstanceName(name);
+  }
+
+}
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts
new file mode 100644
index 000000000..38073a873
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts
@@ -0,0 +1,13 @@
+import { SubstanceFormSimplifiedNamesModule } from './substance-form-simplified-names.module';
+
+describe('SubstanceFormNamesModule', () => {
+  let substanceFormNamesModule: SubstanceFormSimplifiedNamesModule;
+
+  beforeEach(() => {
+    substanceFormNamesModule = new SubstanceFormSimplifiedNamesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(substanceFormNamesModule).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts
new file mode 100644
index 000000000..fd10a31e0
--- /dev/null
+++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts
@@ -0,0 +1,53 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SubstanceFormSimplifiedNamesCardComponent } from './substance-form-simplified-names-card.component';
+import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module';
+import { SubstanceFormModule } from '../substance-form.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { ScrollToModule } from '../../scroll-to/scroll-to.module';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatInputModule } from '@angular/material/input';
+import { NameFormComponent } from './name-form.component';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatBadgeModule} from '@angular/material/badge';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatTableModule} from '@angular/material/table';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-display.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedNamesCardComponent),
+    SubstanceFormModule,
+    MatDividerModule,
+    MatIconModule,
+    MatButtonModule,
+    ScrollToModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatPaginatorModule,
+    MatInputModule,
+    MatRadioModule,
+    MatCheckboxModule,
+    MatExpansionModule,
+    MatTableModule,
+    MatBadgeModule,
+    MatSelectModule,
+    MatTooltipModule,
+    ElementLabelDisplayModule
+  ],
+  declarations: [
+    SubstanceFormSimplifiedNamesCardComponent,
+    NameFormComponent,
+  ]
+})
+export class SubstanceFormSimplifiedNamesModule { }
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.html b/src/app/core/substance-form/simplified-references/reference-form.component.html
new file mode 100644
index 000000000..e90bf788e
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/reference-form.component.html
@@ -0,0 +1,29 @@
+<div class="reference-form-container">
+  <div *ngIf="reference.$$deletedCode" class="notification-backdrop">
+    Deleted&nbsp;
+    <button mat-icon-button matTooltip="Undo" (click)="undoDelete()">
+      <mat-icon svgIcon="undo"></mat-icon>
+    </button>
+  </div>
+
+  <div class="form-row">
+    <div class="delete-container" *ngIf="reference.uuid">
+      <button mat-icon-button matTooltip="Delete reference" (click)="deleteReference()">
+        <mat-icon svgIcon="delete_forever"></mat-icon>
+      </button>
+    </div>
+
+    <app-cv-input required = 'true' class="source-type" domain = 'DOCUMENT_TYPE'  title = "Source Type" [model] = "reference.docType"
+                  (valueChange)= "setSourceType($event)">
+    </app-cv-input>
+
+    <mat-form-field class="citation">
+      <input matInput placeholder="Source Text/Citation" [(ngModel)]="reference.citation" required name="citation" />
+    </mat-form-field>
+
+    <div>
+      <app-access-manager (accessOut)="updateAccess($event)" [access]="reference.access">
+      </app-access-manager>
+    </div>
+  </div>
+</div>
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.scss b/src/app/core/substance-form/simplified-references/reference-form.component.scss
new file mode 100644
index 000000000..80106660b
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/reference-form.component.scss
@@ -0,0 +1,93 @@
+.reference-form-container {
+  padding: 10px 3px 4px 3px;
+  position: relative;
+}
+
+.notification-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  z-index: 10;
+  background-color: var(--notif-backdrop-bg-color);
+  justify-content: center;
+  align-items: center;
+  font-size: 30px;
+  font-weight: bold;
+  color: var(--notif-backdrop-color);
+}
+
+.form-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 10px;
+  align-items: flex-end;
+
+  .delete-container {
+    padding: 0 10px 8px 0;
+  }
+
+  .source-type, .citation{
+    flex-grow: 1;
+    padding-right: 15px;
+  }
+}
+
+.form-actions {
+  justify-content: flex-start;
+  margin: 5px 0 10px 0;
+}
+
+.url {
+  width: 30%;
+}
+
+.tags {
+  width: 40%;
+}
+
+.previous-ref {
+  margin: auto;
+  width: 90%;
+}
+
+
+.spinner {
+  height: 20px;
+  width: 20px;
+}
+
+.loading-container {
+  display: flex;
+  text-align: center;
+  height: 26px;
+}
+
+.spinner-container {
+  height: 20px;
+  width: 20px;
+  margin-right: 5px;
+
+}
+
+.progress-spinner {
+  margin: auto;
+}
+
+
+.mat-progress-spinner {
+  height: 20px !important;
+  width: 20px !important;
+
+  ::ng-deep svg {
+    height: 20px !important;
+    width: 20px !important;
+  }
+
+  svg {
+    height: 20px !important;
+    width: 20px !important;
+  }
+}
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts b/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts
new file mode 100644
index 000000000..23eb8ea47
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReferenceFormComponent } from './reference-form.component';
+
+describe('ReferenceFormComponent', () => {
+  let component: ReferenceFormComponent;
+  let fixture: ComponentFixture<ReferenceFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReferenceFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReferenceFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.ts b/src/app/core/substance-form/simplified-references/reference-form.component.ts
new file mode 100644
index 000000000..252e58008
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/reference-form.component.ts
@@ -0,0 +1,150 @@
+import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { SubstanceReference } from '@gsrs-core/substance';
+import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary';
+import { UtilsService } from '@gsrs-core/utils';
+import { SubstanceFormService } from '../substance-form.service';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { MatDialog } from '@angular/material/dialog';
+import { PreviousReferencesDialogComponent } from '@gsrs-core/substance-form/references/previous-references/previous-references-dialog/previous-references-dialog.component';
+import { Subscription } from 'rxjs';
+import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/references/substance-form-references.service";
+
+@Component({
+  selector: 'app-reference-form',
+  templateUrl: './reference-form.component.html',
+  styleUrls: ['./reference-form.component.scss']
+})
+export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() reference: SubstanceReference;
+  @Output() referenceDeleted = new EventEmitter<SubstanceReference>();
+  @Input() hideDelete = false;
+  private overlayContainer: HTMLElement;
+  deleteTimer: any;
+  showPrev = false;
+  loading = false;
+  error = false;
+  private subscriptions: Array<Subscription> = [];
+  constructor(
+    private utilsService: UtilsService,
+    private substanceFormReferencesService: SubstanceFormReferencesService,
+    private dialog: MatDialog,
+    private overlayContainerService: OverlayContainer,
+    private substanceFormService: SubstanceFormService
+  ) { }
+
+  ngOnInit() {
+    this.overlayContainer = this.overlayContainerService.getContainerElement();
+
+    // Private domain by default.
+    this.reference.publicDomain = false;
+
+    // Protected access by default.
+    this.reference.access = ["protected"]
+  }
+
+  ngAfterViewInit() {
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+
+  updateAccess(access: Array<string>): void {
+    this.reference.access = access;
+  }
+
+  setSourceType(event?: any): void {
+    if (event) {
+      this.reference.docType = event;
+      // Mirror source type to citation.
+      this.reference.citation = event
+    }
+  }
+
+  updateTags(tags: Array<string>): void {
+    this.reference.tags = tags;
+  }
+
+  get isValid(): boolean {
+    if (this.reference.docType
+      && this.reference.citation) {
+        return true;
+    } else {
+      return false;
+    }
+  }
+
+  deleteReference(): void {
+    this.reference.$$deletedCode = this.utilsService.newUUID();
+    if (!this.reference.docType
+      && !this.reference.citation
+      && !this.reference.uploadedFile
+    ) {
+      this.deleteTimer = setTimeout(() => {
+        this.referenceDeleted.emit(this.reference);
+      }, 2000);
+    } else {
+      this.substanceFormReferencesService.emitReferencesUpdate();
+    }
+  }
+
+  undoDelete(): void {
+    clearTimeout(this.deleteTimer);
+    delete this.reference.$$deletedCode;
+    this.substanceFormReferencesService.emitReferencesUpdate();
+  }
+
+  fileSelected(file: File): void {
+    this.error = false;
+    if (file != null) {
+      this.loading = true;
+      this.utilsService.uploadFile(file).subscribe(response => {
+        this.reference.uploadedFile = response;
+        this.loading = false;
+
+      }, error => {
+        this.loading = false;
+        this.error = true;
+
+      });
+    }
+  }
+
+  openPreviousDialog(): void {
+      const dialogRef = this.dialog.open(PreviousReferencesDialogComponent, {
+        data: {},
+        width: '990px'
+      });
+      this.overlayContainer.style.zIndex = '1002';
+      const dialogSubscription = dialogRef.afterClosed().subscribe(ref => {
+        this.overlayContainer.style.zIndex = null;
+       if (ref) {
+         if (ref.citation && ref.citation !== '' && ref.docType && ref.docType !== '') {
+          this.fillReference(ref);
+        }
+       }
+      });
+      this.subscriptions.push(dialogSubscription);
+    }
+
+    fillReference(ref: SubstanceReference) {
+      this.showPrev = false;
+      this.reference.access = ref.access;
+      this.reference.citation = ref.citation;
+      this.reference.deprecated = ref.deprecated;
+      this.reference.docType = ref.docType;
+      this.reference.publicDomain = ref.publicDomain;
+      this.reference.tags = ref.tags;
+      this.reference.uploadedFile = ref.uploadedFile;
+      this.reference.url = ref.url || null;
+      this.reference.id = ref.id || null;
+    }
+
+  downloadDocument(url: string): void {
+    this.substanceFormService.bypassUpdateCheck();
+    window.open(url);
+  }
+
+}
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html
new file mode 100644
index 000000000..35b20b58e
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html
@@ -0,0 +1,17 @@
+<div class="flex-row">
+  <mat-form-field [floatLabel]="'never'" class="search" *ngIf="references && references.length > pageSize">
+    <input matInput placeholder="Search" [formControl]="searchControl">
+  </mat-form-field>
+  <span class="middle-fill"></span>
+</div>
+<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+    [pageSizeOptions]="[5, 10, 25, 100]">
+  </mat-paginator>
+<div class="reference" *ngFor="let reference of paged; last as isLast" [id]="reference.uuid" appScrollToTarget>
+  <app-reference-form [reference]="reference" (referenceDeleted)="deleteReference($event)"></app-reference-form>
+  <mat-divider class="form-divider" [inset]="true" *ngIf="!isLast"></mat-divider>
+</div>
+<mat-paginator *ngIf="references && references.length > 5" [length]="filtered && filtered.length || 0" [pageIndex]="page" [pageSize]="5" showFirstLastButtons="true" (page)="pageChange($event, analyticsEventCategory)"
+  [pageSizeOptions]="[5, 10, 25, 100]">
+</mat-paginator>
+
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss
new file mode 100644
index 000000000..faa967e92
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss
@@ -0,0 +1,35 @@
+.mat-divider.mat-divider-inset {
+    margin-left: 0;
+}
+
+.mat-divider {
+    border-top-color: var(--text-color);
+}
+
+.reference {
+
+    &:nth-child(odd) {
+        background-color: var(--nth-child-color-2);
+
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-3);
+            }
+        }
+    }
+
+    &:nth-child(even) {
+        ::ng-deep {
+
+            .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover {
+                background-color: var(--nth-child-color-1);
+            }
+        }
+    }
+}
+
+.search {
+    width: 400px;
+    max-width: 100%;
+}
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts
new file mode 100644
index 000000000..5d3c469d1
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubstanceFormSimplifiedReferencesCardComponent } from './substance-form-simplified-references-card.component';
+
+describe('SubstanceFormSimplifiedReferencesCardComponent', () => {
+  let component: SubstanceFormSimplifiedReferencesCardComponent;
+  let fixture: ComponentFixture<SubstanceFormSimplifiedReferencesCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubstanceFormSimplifiedReferencesCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubstanceFormSimplifiedReferencesCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts
new file mode 100644
index 000000000..5b755d537
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts
@@ -0,0 +1,111 @@
+import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list';
+import { SubstanceReference } from '@gsrs-core/substance/substance.model';
+import { MatDialog } from '@angular/material/dialog';
+import { ScrollToService } from '../../scroll-to/scroll-to.service';
+import { GoogleAnalyticsService } from '@gsrs-core/google-analytics';
+import { Subscription } from 'rxjs';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/references/substance-form-references.service";
+import {DomainsWithReferences} from "@gsrs-core/substance-form/references/domain-references/domain.references.model";
+import { domainKeys } from '../references/domain-references/domain-keys.constant';
+import {take} from "rxjs/operators";
+
+@Component({
+  selector: 'app-substance-form-references-card',
+  templateUrl: './substance-form-simplified-references-card.component.html',
+  styleUrls: ['./substance-form-simplified-references-card.component.scss']
+})
+export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCardBaseFilteredList<SubstanceReference>
+  implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList {
+  references: Array<SubstanceReference>;
+  private domainKeys = domainKeys;
+  private domainsWithReferences: DomainsWithReferences;
+  private subscriptions: Array<Subscription> = [];
+  private overlayContainer: HTMLElement;
+
+  constructor(
+    private substanceFormReferencesService: SubstanceFormReferencesService,
+    private dialog: MatDialog,
+    private scrollToService: ScrollToService,
+    public gaService: GoogleAnalyticsService,
+    private overlayContainerService: OverlayContainer
+  ) {
+    super(gaService);
+    this.analyticsEventCategory = 'substance form references';
+  }
+
+  ngOnInit() {
+    this.canAddItemUpdate.emit(true);
+    this.menuLabelUpdate.emit('References');
+    this.overlayContainer = this.overlayContainerService.getContainerElement();
+  }
+
+  ngAfterViewInit() {
+    const referencesSubscription = this.substanceFormReferencesService.substanceReferences.subscribe(references => {
+      this.references = references;
+      this.filtered = references;
+      const searchSubscription = this.searchControl.valueChanges.subscribe(value => {
+        this.filterList(value, this.references, this.analyticsEventCategory);
+      }, error => {
+        console.log(error);
+      });
+      this.subscriptions.push(searchSubscription);
+      this.page = 0;
+      this.pageChange();
+    });
+
+    const domainsSubscription = this.substanceFormReferencesService.domainsWithReferences.pipe(take(1)).subscribe(domainsWithReferences => {
+      this.domainsWithReferences = domainsWithReferences;
+    });
+
+    this.subscriptions.push(referencesSubscription);
+    this.subscriptions.push(domainsSubscription);
+  }
+
+  ngOnDestroy() {
+    this.componentDestroyed.emit();
+    this.subscriptions.forEach(subscription => {
+      subscription.unsubscribe();
+    });
+  }
+  addItem(): void {
+    this.addSubstanceReference();
+  }
+
+  addSubstanceReference(): void {
+    const addedReference = this.substanceFormReferencesService.addSubstanceReference({});
+    this.applyToAll(addedReference.uuid)
+
+    setTimeout(() => {
+      this.scrollToService.scrollToElement(addedReference.uuid, 'center');
+    }, 10);
+  }
+
+  deleteReference(reference: SubstanceReference): void {
+    this.substanceFormReferencesService.deleteSubstanceReference(reference);
+  }
+
+  applyToAll(uuid: string): void {
+    this.applyReference(this.domainsWithReferences.definition.domain, uuid);
+    this.domainKeys.map(key=>this.domainsWithReferences[key]?.domains).forEach(domains => {
+      if (domains) {
+        domains.forEach((domain: any) => {
+          this.applyReference(domain, uuid);
+        });
+      }
+    });
+
+    this.substanceFormReferencesService.emitReferencesUpdate();
+  }
+
+  applyReference(domain: any, uuid: string): void {
+    if (!domain.references) {
+      domain.references = [];
+    }
+
+    if (domain.references.indexOf(uuid) === -1) {
+      domain.references.push(uuid);
+    }
+  }
+}
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts
new file mode 100644
index 000000000..e21e0c09e
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts
@@ -0,0 +1,13 @@
+import { SubstanceFormSimplifiedReferencesModule } from './substance-form-simplified-references.module';
+
+describe('SubstanceFormSimplifiedReferencesModule', () => {
+  let substanceFormReferencesModule: SubstanceFormSimplifiedReferencesModule;
+
+  beforeEach(() => {
+    substanceFormReferencesModule = new SubstanceFormSimplifiedReferencesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(substanceFormReferencesModule).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts
new file mode 100644
index 000000000..e21e0c09e
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts
@@ -0,0 +1,13 @@
+import { SubstanceFormSimplifiedReferencesModule } from './substance-form-simplified-references.module';
+
+describe('SubstanceFormSimplifiedReferencesModule', () => {
+  let substanceFormReferencesModule: SubstanceFormSimplifiedReferencesModule;
+
+  beforeEach(() => {
+    substanceFormReferencesModule = new SubstanceFormSimplifiedReferencesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(substanceFormReferencesModule).toBeTruthy();
+  });
+});
diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts
new file mode 100644
index 000000000..323cc4e3c
--- /dev/null
+++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SubstanceFormSimplifiedReferencesCardComponent } from './substance-form-simplified-references-card.component';
+import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader';
+import { SubstanceFormModule } from '../substance-form.module';
+import { MatDividerModule } from '@angular/material/divider';
+import { ScrollToModule } from '@gsrs-core/scroll-to';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatInputModule } from '@angular/material/input';
+import {ReferenceFormComponent} from "./reference-form.component";
+import {MatTooltipModule} from "@angular/material/tooltip";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedReferencesCardComponent),
+    MatDividerModule,
+    ScrollToModule,
+    MatIconModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    FormsModule,
+    MatPaginatorModule,
+    MatInputModule,
+    SubstanceFormModule,
+    MatTooltipModule
+  ],
+  declarations: [
+    SubstanceFormSimplifiedReferencesCardComponent,
+    ReferenceFormComponent
+  ]
+})
+export class SubstanceFormSimplifiedReferencesModule { }
diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html
index 42736605e..87aeaf57f 100644
--- a/src/app/core/substance-form/substance-form.component.html
+++ b/src/app/core/substance-form/substance-form.component.html
@@ -1,149 +1,171 @@
+x
 <div (click)="showHidePopup()" id="overlay" [ngClass]="{'hide': !hidePopup}"></div>
 <div class="center-screen" [ngClass]="{'hide': !hidePopup}">
   <span class="close-out" (click)="showHidePopup()">x</span>
-  <img (click)="showHidePopup()" class = "image-popped-up" appSubstanceImage [entityId]="unit && (unit.uuid || (unit._structure && unit._structure.id))">
+  <img (click)="showHidePopup()" class="image-popped-up" appSubstanceImage
+       [entityId]="unit && (unit.uuid || (unit._structure && unit._structure.id))">
 </div>
-<div class="top-fixed">
-  <div class="actions-container">
+<div *ngIf="!simplifiedForm; else simplifiedActionsComponent">
+  <div class="top-fixed">
+    <div class="actions-container">
       <button mat-flat-button color="primary" (click)="saveDraft()">Save Draft</button>
-      <button mat-flat-button color="primary" class="draft-button" (click)="showDrafts()">Show Drafts <span class="chip">{{draftCount}}</span></button>
-
-    <button mat-flat-button color="primary" class="json-button" (click)="showJSON()">Show JSON</button>
-    <button mat-flat-button color="primary" class="import-button" (click)="importDialog()">Import JSON</button>
-
-    <button mat-flat-button class="hide-show-messages" (click)="toggleValidation()" [disabled]="isLoading"
-      *ngIf="(validationMessages && validationMessages.length > 0)">
-      {{showSubmissionMessages ? 'Hide' : 'Show'}} messages
-      <mat-icon [svgIcon]="showSubmissionMessages ? 'chevron_up' : 'chevron_down'"></mat-icon>
-    </button>
-    <div *ngIf="isAdmin === true || isUpdater === true" class="advanced-features">
-      <div class="admin-functions">
-        <mat-form-field>
-          <mat-label>Advanced Features</mat-label>
-          <mat-select name="Feature" [ngModel]="feature" (openedChange)="openedChange($event)"
-            (selectionChange)="useFeature($event)" disableOptionCentering>
-            <ng-container >
-              <mat-option value="changeClass" [disabled]="!id">
-                Change Substance Class
-              </mat-option>
-              <mat-option value="approved" [disabled]="status === 'approved'">
-                Change Status to approved
-              </mat-option>
-              <mat-option value="pending" [disabled]="status === 'pending'">
-                Change Status to pending
-              </mat-option>
-              <mat-option value="setPrivate">
-                Set Definition to private
-              </mat-option>
-              <mat-option value="setPublic">
-                Set Definition to public
-              </mat-option>
-              <mat-option value="unapprove">
-                Un-approve record (Remove approval ID)
-              </mat-option>
-              <mat-option value="changeApproval" [disabled]="!id || status === 'pending' || (substanceClass === 'concept' && UNII === 'non-approved record')">
-                Change Approval ID
-              </mat-option>
-              <mat-option value="concept" [disabled]="substanceClass != 'concept'">
-                Set concept status to non-approved
-              </mat-option>
-              <mat-option value="merge">
-                Merge subconcept
-              </mat-option>
-              <mat-option value="switch">
-                Switch primary and alt definitions
-              </mat-option>
-            </ng-container>
-            <ng-container *ngIf="isAdmin === true || isUpdater === true">
-              <mat-option value="glyco" [disabled]="substanceClass !== 'protein'">
-                Predict N-Glycosylation Sites 
-              </mat-option>
-              <mat-option value="disulfide" [disabled]="substanceClass != 'protein'">
-                Predict disulfide links by monoclonal antibody type
-              </mat-option>
-              <mat-option value="fragment" [disabled]="substanceClass != 'protein' && substanceClass != 'nucleicAcid' ">
-                Register a Fragment
-              </mat-option>
+      <button mat-flat-button color="primary" class="draft-button" (click)="showDrafts()">Show Drafts <span
+        class="chip">{{ draftCount }}</span></button>
+
+      <button mat-flat-button color="primary" class="json-button" (click)="showJSON()">Show JSON</button>
+      <button mat-flat-button color="primary" class="import-button" (click)="importDialog()">Import JSON</button>
+
+      <button mat-flat-button class="hide-show-messages" (click)="toggleValidation()" [disabled]="isLoading"
+              *ngIf="(validationMessages && validationMessages.length > 0)">
+        {{ showSubmissionMessages ? 'Hide' : 'Show' }} messages
+        <mat-icon [svgIcon]="showSubmissionMessages ? 'chevron_up' : 'chevron_down'"></mat-icon>
+      </button>
+      <div *ngIf="isAdmin === true || isUpdater === true" class="advanced-features">
+        <div class="admin-functions">
+          <mat-form-field>
+            <mat-label>Advanced Features</mat-label>
+            <mat-select name="Feature" [ngModel]="feature" (openedChange)="openedChange($event)"
+                        (selectionChange)="useFeature($event)" disableOptionCentering>
+              <ng-container>
+                <mat-option value="changeClass" [disabled]="!id">
+                  Change Substance Class
+                </mat-option>
+                <mat-option value="approved" [disabled]="status === 'approved'">
+                  Change Status to approved
+                </mat-option>
+                <mat-option value="pending" [disabled]="status === 'pending'">
+                  Change Status to pending
+                </mat-option>
+                <mat-option value="setPrivate">
+                  Set Definition to private
+                </mat-option>
+                <mat-option value="setPublic">
+                  Set Definition to public
+                </mat-option>
+                <mat-option value="unapprove">
+                  Un-approve record (Remove approval ID)
+                </mat-option>
+                <mat-option value="changeApproval"
+                            [disabled]="!id || status === 'pending' || (substanceClass === 'concept' && UNII === 'non-approved record')">
+                  Change Approval ID
+                </mat-option>
+                <mat-option value="concept" [disabled]="substanceClass != 'concept'">
+                  Set concept status to non-approved
+                </mat-option>
+                <mat-option value="merge">
+                  Merge subconcept
+                </mat-option>
+                <mat-option value="switch">
+                  Switch primary and alt definitions
+                </mat-option>
+              </ng-container>
+              <ng-container *ngIf="isAdmin === true || isUpdater === true">
+                <mat-option value="glyco" [disabled]="substanceClass !== 'protein'">
+                  Predict N-Glycosylation Sites
+                </mat-option>
+                <mat-option value="disulfide" [disabled]="substanceClass != 'protein'">
+                  Predict disulfide links by monoclonal antibody type
+                </mat-option>
+                <mat-option value="fragment"
+                            [disabled]="substanceClass != 'protein' && substanceClass != 'nucleicAcid' ">
+                  Register a Fragment
+                </mat-option>
               <mat-option value="regenRefs" >
                 Regenerate reference UUIDs
               </mat-option>
             </ng-container>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <ng-template #demo>
-        <div mat-dialog-header>Saved Drafts</div>
-        <div mat-dialog-content>
-            <div class = "form-row">
-                <div class = "cell"><mat-icon svgIcon="delete_forever"></mat-icon></div>
-                <div class = "cell"><a>d706be08-4015-4fa2-80e6-567cf7e2e23f</a></div>
-                <div class = "cell">April 1, 2022 08:05</div>
-                <div class = "cell"><button mat-button mat-primary-button>Load Draft</button></div>
-              </div> 
-              <div class = "form-row">
-                  <div class = "cell"><mat-icon svgIcon="delete_forever"></mat-icon></div>
-                  <div class = "cell"><a>d706be08-4015-4fa2-80e6-567cf7e2e23f</a></div>
-                  <div class = "cell">April 1, 2022 08:00</div>
-                  <div class = "cell"><button mat-button mat-primary-button>Load Draft</button></div>
-                </div> 
-
-              <div class = "form-row">
-                  <div class = "cell"><mat-icon svgIcon="delete_forever"></mat-icon></div>
-                  <div class = "cell">register = protein</div>
-                  <div class = "cell">April 1, 2022 08:00</div>
-                  <div class = "cell"><button mat-button mat-primary-button>Load Draft</button></div>
-                </div> 
-
-                
+            </mat-select>
+          </mat-form-field>
         </div>
-          
-        <div mat-dialog-actions>
+        <ng-template #demo>
+          <div mat-dialog-header>Saved Drafts</div>
+          <div mat-dialog-content>
+            <div class="form-row">
+              <div class="cell">
+                <mat-icon svgIcon="delete_forever"></mat-icon>
+              </div>
+              <div class="cell"><a>d706be08-4015-4fa2-80e6-567cf7e2e23f</a></div>
+              <div class="cell">April 1, 2022 08:05</div>
+              <div class="cell">
+                <button mat-button mat-primary-button>Load Draft</button>
+              </div>
+            </div>
+            <div class="form-row">
+              <div class="cell">
+                <mat-icon svgIcon="delete_forever"></mat-icon>
+              </div>
+              <div class="cell"><a>d706be08-4015-4fa2-80e6-567cf7e2e23f</a></div>
+              <div class="cell">April 1, 2022 08:00</div>
+              <div class="cell">
+                <button mat-button mat-primary-button>Load Draft</button>
+              </div>
+            </div>
+
+            <div class="form-row">
+              <div class="cell">
+                <mat-icon svgIcon="delete_forever"></mat-icon>
+              </div>
+              <div class="cell">register = protein</div>
+              <div class="cell">April 1, 2022 08:00</div>
+              <div class="cell">
+                <button mat-button mat-primary-button>Load Draft</button>
+              </div>
+            </div>
+
+
+          </div>
+
+          <div mat-dialog-actions>
             <span class="middle-fill"></span>
-            <button class="mat-raised-button mat-primary" mat-dialog-close (click) = "dialogRef.close()">Close</button>
+            <button class="mat-raised-button mat-primary" mat-dialog-close (click)="dialogRef.close()">Close</button>
           </div>
-      </ng-template>
-      
-
-      <div class="changeClass advanced" *ngIf="feature === 'changeClass'">
-        <mat-form-field>
-          <mat-label>New Class</mat-label>
-          <mat-select name="definitionType" (selectionChange)="changeClass($event)"
-            (openedChange)="openedChange($event)" disableOptionCentering>
-            <mat-option *ngFor="let class of classes" [value]="class" [disabled]="class === substanceClass">
-              {{class}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+        </ng-template>
+
+
+        <div class="changeClass advanced" *ngIf="feature === 'changeClass'">
+          <mat-form-field>
+            <mat-label>New Class</mat-label>
+            <mat-select name="definitionType" (selectionChange)="changeClass($event)"
+                        (openedChange)="openedChange($event)" disableOptionCentering>
+              <mat-option *ngFor="let class of classes" [value]="class" [disabled]="class === substanceClass">
+                {{ class }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
       </div>
-    </div>
-    <span class="middle-fill"></span>
-    <button mat-flat-button color="primary" class="validate-button" (click)="validate()">Validate and Submit</button>
-    <button mat-flat-button color="primary" class="validate-button" [disabled]="!canApprove || approving"
-      *ngIf="definition && definition.substanceClass!=='concept' && !definition.approvalID && !imported && definitionType !== 'ALTERNATIVE'"
-      (click)="validate('approval')">Approve</button>
+      <span class="middle-fill"></span>
+      <button mat-flat-button color="primary" class="validate-button" (click)="validate()">Validate and Submit</button>
+      <button mat-flat-button color="primary" class="validate-button" [disabled]="!canApprove || approving"
+              *ngIf="definition && definition.substanceClass!=='concept' && !definition.approvalID && !imported && definitionType !== 'ALTERNATIVE'"
+              (click)="validate('approval')">Approve
+      </button>
 
+    </div>
   </div>
+
   <div [ngClass]="{'submission-messages': true, collapsed: !showSubmissionMessages, expanded: showSubmissionMessages}">
     <div class="submission-message" *ngIf="submissionMessage">
-      {{submissionMessage}}
+      {{ submissionMessage }}
     </div>
     <div *ngIf="validationMessages">
       <span *ngIf=" validationMessages.length > 0">
         <div class="submission-message" *ngIf='!serverError && !approving'>
           Please correct or dismiss the following errors and submit again:
         </div>
-        <div class="validation-message" *ngFor="let message of validationMessages; index as i" >
-          <span class = "validation-body" >
-          <div class="message-type" [ngClass]="{'error-message': message.messageType == 'ERROR', 'warning-message': message.messageType == 'WARNING', 'notice-message': message.messageType == 'NOTICE'}">
-            {{message.messageType}}</div>
-          <div class="message">{{message.message}}<span *ngFor="let link of message.links"><br />
+        <div class="validation-message" *ngFor="let message of validationMessages; index as i">
+          <span class="validation-body">
+          <div class="message-type"
+               [ngClass]="{'error-message': message.messageType == 'ERROR', 'warning-message': message.messageType == 'WARNING', 'notice-message': message.messageType == 'NOTICE'}">
+            {{ message.messageType }}</div>
+          <div class="message">{{ message.message }}<span *ngFor="let link of message.links"><br/>
               <a [href]="fixLink(link.href)" class="internal-link"
-                target="_blank">{{link.text}}</a></span>
+                 target="_blank">{{ link.text }}</a></span>
           </div>
         </span>
-        <span class = "validation-dismiss">
+        <span class="validation-dismiss">
           <button mat-icon-button matTooltip="Dismiss" *ngIf="message.messageType != 'ERROR' && !approving"
-            (click)="dismissValidationMessage(i)">
+                  (click)="dismissValidationMessage(i)">
             <mat-icon svgIcon="cancel"></mat-icon>
           </button>
         </span>
@@ -152,33 +174,41 @@
       <div class="dismiss-container">
         <span class="middle-fill"></span>
         <button mat-flat-button color="primary" *ngIf="!approving" (click)="submit()"
-          [disabled]="isLoading || (this.validationResult === false)">{{validationMessages && validationMessages.length > 0?'Dismiss All and ':''}}
-          Submit</button>
-          <button mat-flat-button *ngIf="!approving" (click)="showSubmissionMessages = false"
-           >
-          Cancel</button> 
+                [disabled]="isLoading || (this.validationResult === false)">{{ validationMessages && validationMessages.length > 0 ? 'Dismiss All and ' : '' }}
+          Submit
+        </button>
+        <button mat-flat-button *ngIf="!approving" (click)="showSubmissionMessages = false"
+        >
+          Cancel
+        </button>
         <button mat-flat-button color="primary" *ngIf="approving" (click)="approve()"
-          [disabled]="isLoading || !canApprove"> Confirm Approval</button>
+                [disabled]="isLoading || !canApprove"> Confirm Approval
+        </button>
 
       </div>
     </div>
   </div>
 </div>
-<div class="form-content-container">
+
+<div [ngClass]="!simplifiedForm ? 'form-content-container' : 'small-form-content-container'">
   <div class="scrollable-container">
     <div class="cards-container">
       <mat-accordion multi="true">
-        <mat-expansion-panel #expansionPanel [expanded]="expandedComponents.indexOf(section.dynamicComponentName) > -1"
-          *ngFor="let section of formSections; index as index; last as isLast" [id]="section.dynamicComponentName"
-          [ngClass]="{'hidden': section.isHidden}">
+        <mat-expansion-panel #expansionPanel
+                             [class.small-mat-expansion-panel-spacing]="simplifiedForm"
+                             [expanded]="expandedComponents.indexOf(section.dynamicComponentName) > -1"
+                             *ngFor="let section of formSections; index as index; last as isLast"
+                             [id]="section.dynamicComponentName"
+                             [ngClass]="{'hidden': section.isHidden}">
           <mat-expansion-panel-header>
             <mat-panel-title>
-              <h2>{{section.menuLabel}}</h2>
+              <h2>{{ section.menuLabel }}</h2>
               <div class="middle-fill"></div>
               <div *ngIf="section.canAddItem">
-                <button mat-flat-button color="primary" id = "Add new {{section.menuLabel}}" (click)="section.addItem(); $event.stopPropagation()"
-                  matTooltip="Add new {{section.menuLabel}}">
-                  Add {{section.menuLabel}}
+                <button mat-flat-button color="primary" id="Add new {{section.menuLabel}}"
+                        (click)="section.addItem(); $event.stopPropagation()"
+                        matTooltip="Add new {{section.menuLabel}}">
+                  Add {{ section.menuLabel }}
                   <mat-icon svgIcon="add_circle_outline"></mat-icon>
                 </button>
               </div>
@@ -190,3 +220,103 @@ <h2>{{section.menuLabel}}</h2>
     </div>
   </div>
 </div>
+
+
+<!--Simplified actions-component-->
+<ng-template #simplifiedActionsComponent>
+  <div class="top-fixed small-top-fixed">
+    <div class="actions-container small-actions-container">
+      <button mat-flat-button color="primary" class="small-button" (click)="saveDraft()">Save Draft</button>
+      <button mat-flat-button color="primary" class="draft-button small-button" (click)="showDrafts()">Show Drafts <span
+        class="chip">{{ draftCount }}</span></button>
+
+      <button mat-flat-button color="primary" class="json-button small-button" (click)="showJSON()">Show JSON</button>
+      <button mat-flat-button color="primary" class="import-button small-button" (click)="importDialog()">Import JSON
+      </button>
+
+      <button mat-flat-button class="hide-show-messages small-button" (click)="toggleValidation()"
+              [disabled]="isLoading"
+              *ngIf="(validationMessages && validationMessages.length > 0)">
+        {{ showSubmissionMessages ? 'Hide' : 'Show' }} messages
+        <mat-icon [svgIcon]="showSubmissionMessages ? 'chevron_up' : 'chevron_down'"></mat-icon>
+      </button>
+      <div *ngIf="isAdmin === true || isUpdater === true" class="advanced-features">
+        <div class="admin-functions">
+          <mat-form-field>
+            <mat-label>Advanced Features</mat-label>
+            <mat-select name="Feature" [ngModel]="feature" (openedChange)="openedChange($event)"
+                        (selectionChange)="useFeature($event)" disableOptionCentering>
+              <ng-container>
+                <mat-option value="changeClass" [disabled]="!id">
+                  Change Substance Class
+                </mat-option>
+                <mat-option value="approved" [disabled]="status === 'approved'">
+                  Change Status to approved
+                </mat-option>
+                <mat-option value="pending" [disabled]="status === 'pending'">
+                  Change Status to pending
+                </mat-option>
+                <mat-option value="setPrivate">
+                  Set Definition to private
+                </mat-option>
+                <mat-option value="setPublic">
+                  Set Definition to public
+                </mat-option>
+                <mat-option value="unapprove">
+                  Un-approve record (Remove approval ID)
+                </mat-option>
+                <mat-option value="changeApproval"
+                            [disabled]="!id || status === 'pending' || (substanceClass === 'concept' && UNII === 'non-approved record')">
+                  Change Approval ID
+                </mat-option>
+                <mat-option value="concept" [disabled]="substanceClass != 'concept'">
+                  Set concept status to non-approved
+                </mat-option>
+                <mat-option value="merge">
+                  Merge subconcept
+                </mat-option>
+                <mat-option value="switch">
+                  Switch primary and alt definitions
+                </mat-option>
+              </ng-container>
+              <ng-container *ngIf="isAdmin === true || isUpdater === true">
+                <mat-option value="glyco" [disabled]="substanceClass !== 'protein'">
+                  Predict N-Glycosylation Sites
+                </mat-option>
+                <mat-option value="disulfide" [disabled]="substanceClass != 'protein'">
+                  Predict disulfide links by monoclonal antibody type
+                </mat-option>
+                <mat-option value="fragment"
+                            [disabled]="substanceClass != 'protein' && substanceClass != 'nucleicAcid' ">
+                  Register a Fragment
+                </mat-option>
+              </ng-container>
+            </mat-select>
+          </mat-form-field>
+        </div>
+
+        <div class="changeClass advanced" *ngIf="feature === 'changeClass'">
+          <mat-form-field>
+            <mat-label>New Class</mat-label>
+            <mat-select name="definitionType" (selectionChange)="changeClass($event)"
+                        (openedChange)="openedChange($event)" disableOptionCentering>
+              <mat-option *ngFor="let class of classes" [value]="class" [disabled]="class === substanceClass">
+                {{ class }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+      </div>
+      <span class="middle-fill"></span>
+      <button mat-flat-button color="primary" class="validate-button small-button" (click)="validate()">Validate and
+        Submit
+      </button>
+      <button mat-flat-button color="primary" class="validate-button small-button" [disabled]="!canApprove || approving"
+              *ngIf="definition && definition.substanceClass!=='concept' && !definition.approvalID && !imported && definitionType !== 'ALTERNATIVE'"
+              (click)="validate('approval')">Approve
+      </button>
+
+    </div>
+  </div>
+</ng-template>
+
diff --git a/src/app/core/substance-form/substance-form.component.scss b/src/app/core/substance-form/substance-form.component.scss
index 24a8cadae..c1d720cf0 100644
--- a/src/app/core/substance-form/substance-form.component.scss
+++ b/src/app/core/substance-form/substance-form.component.scss
@@ -3,7 +3,7 @@
   display: block; /* Hidden by default */
   width: 100%; /* Full width (cover the whole page) */
   height: 100%; /* Full height (cover the whole page) */
-  top: 0; 
+  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
@@ -11,9 +11,11 @@
   z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
   cursor: pointer; /* Add a pointer on hover */
 }
+
 .hide {
-  display: none!important;
+  display: none !important;
 }
+
 .center-screen {
   z-index: 2;
   position: fixed;
@@ -25,45 +27,51 @@
   margin-right: -50%;
   transform: translate(-50%, -50%);
 }
+
 .center-screen img {
   transition-duration: 4s;
   margin: 0 auto;
   display: block;
 }
+
 .center-screen img:hover {
   transform: scale(1.7);
   -webkit-transform: scale(1.7);
   -moz-transform: scale(1.7);
   z-index: 0;
 }
+
 .image-popped-up {
   width: 100%;
   height: 100%;
   padding: 10px;
 }
+
 .close-out {
   padding: 10px;
   float: right;
   font-weight: 500;
   cursor: pointer;
 }
+
 .top-fixed {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    top: 64px;
-    width: 100%;
-    background-color: var(--regular-white-color);
-    align-items: center;
-    justify-content: center;
-    box-shadow:     0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3);
-    z-index: 1001;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 64px;
+  width: 100%;
+  background-color: var(--regular-white-color);
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3);
+  z-index: 1001;
 }
 
 .cdk-overlay-pane {
   z-index: 1005;
 }
-mat-select-panel{
+
+mat-select-panel {
   z-index: 1005;
 }
 
@@ -83,50 +91,57 @@ mat-select-panel{
 ::ng-deep .mat-form-field-wrapper {
   padding-bottom: 5px;
 }
+
 .advanced-features {
   z-index: 2000 !important;
 
-  display:flex;
+  display: flex;
   flex-direction: row;
   padding-left: 10px;
 }
+
 ::ng-deep .cdk-overlay-pane {
   margin-top: 20px !important;
 }
 
 .form-content-container {
-    // position: fixed;
-    // top: 121px;
-    // right: 0;
-    // bottom: 0;
-    // left: 0;
-    overflow: hidden;
-    padding-top: 121px;
+  overflow: hidden;
+  padding-top: 121px;
+}
+
+
+.small-form-content-container {
+  overflow: hidden;
+  padding-top: 90px;
 }
 
 .actions-container {
-    max-width: 1128px;
-    width: 100%;
-    background-color: var(--regular-white-color);
-    padding: 10px;
-    display: flex;
+  max-width: 1128px;
+  width: 100%;
+  background-color: var(--regular-white-color);
+  padding: 10px;
+  display: flex;
+}
+
+.small-actions-container {
+  padding: 10px;
 }
 
 .mat-accordion {
-    width: 100%;
-    max-width: 1020px;
-    box-sizing: border-box;
+  width: 100%;
+  max-width: 1020px;
+  box-sizing: border-box;
 }
 
 .hidden {
-    display: none !important;
+  display: none !important;
 }
 
 .validation-body {
-  max-width:95%;
-   display:flex;
-   max-width: 960px;
-word-break: break-word;
+  max-width: 95%;
+  display: flex;
+  max-width: 960px;
+  word-break: break-word;
 }
 
 .validation-dismiss {
@@ -167,8 +182,8 @@ word-break: break-word;
       text-transform: uppercase;
       font-weight: 500;
       margin-right: 20px;
-      padding:10px;
-      border-radius:3px;
+      padding: 10px;
+      border-radius: 3px;
       height: 40px;
       min-width: 95px;
     }
@@ -198,14 +213,14 @@ word-break: break-word;
 
 }
 
-.validate-button{
-  margin-left:15px;
-}
-
 .mat-expansion-panel-header-title {
   align-items: center;
 }
 
+.small-mat-expansion-panel-spacing {
+    margin: 10px;
+}
+
 .hide-show-messages {
   margin-left: 10px;
   border: 1px solid;
@@ -215,6 +230,10 @@ word-break: break-word;
   color: var(--link-primary-color);
 }
 
+.validate-button {
+  margin-left: 15px;
+}
+
 .import-button {
   margin-left: 15px;
 }
@@ -227,6 +246,15 @@ word-break: break-word;
   margin-left: 15px;
 }
 
+.small-button {
+  height: 30px;
+  font-size: 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
 .chip {
   background-color: var(--regular-white-color);
   border-radius: 50%;
diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts
index 7ec705670..e169af017 100644
--- a/src/app/core/substance-form/substance-form.component.ts
+++ b/src/app/core/substance-form/substance-form.component.ts
@@ -5,41 +5,49 @@ import {
   ViewChildren,
   ViewContainerRef,
   QueryList,
-  OnDestroy, HostListener
+  OnDestroy, HostListener, Input, Output
 } from '@angular/core';
-import { formSections } from './form-sections.constant';
-import { ActivatedRoute, Router, RouterEvent, NavigationStart, NavigationEnd } from '@angular/router';
-import { SubstanceService } from '../substance/substance.service';
-import { LoadingService } from '../loading/loading.service';
-import { MainNotificationService } from '../main-notification/main-notification.service';
-import { AppNotification, NotificationType } from '../main-notification/notification.model';
-import { DynamicComponentLoader } from '../dynamic-component-loader/dynamic-component-loader.service';
-import { GoogleAnalyticsService } from '../google-analytics/google-analytics.service';
-import { SubstanceFormSection } from './substance-form-section';
-import { SubstanceFormService } from './substance-form.service';
-import { ValidationMessage, SubstanceFormResults, SubstanceFormDefinition } from './substance-form.model';
-import { Subscription, Observable } from 'rxjs';
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { MatDialog } from '@angular/material/dialog';
-import { JsonDialogComponent } from '@gsrs-core/substance-form/json-dialog/json-dialog.component';
+import {formSections} from './form-sections.constant';
+import {ActivatedRoute, Router, RouterEvent, NavigationStart, NavigationEnd} from '@angular/router';
+import {SubstanceService} from '../substance/substance.service';
+import {LoadingService} from '../loading/loading.service';
+import {MainNotificationService} from '../main-notification/main-notification.service';
+import {AppNotification, NotificationType} from '../main-notification/notification.model';
+import {DynamicComponentLoader} from '../dynamic-component-loader/dynamic-component-loader.service';
+import {GoogleAnalyticsService} from '../google-analytics/google-analytics.service';
+import {SubstanceFormSection} from './substance-form-section';
+import {SubstanceFormService} from './substance-form.service';
+import {ValidationMessage, SubstanceFormResults, SubstanceFormDefinition} from './substance-form.model';
+import {Subscription, Observable} from 'rxjs';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {MatDialog} from '@angular/material/dialog';
+import {JsonDialogComponent} from '@gsrs-core/substance-form/json-dialog/json-dialog.component';
 import * as _ from 'lodash';
 import * as defiant from '../../../../node_modules/defiant.js/dist/defiant.min.js';
-import { Title } from '@angular/platform-browser';
-import { AuthService } from '@gsrs-core/auth';
-import { take, map } from 'rxjs/operators';
-import { MatExpansionPanel } from '@angular/material/expansion';
-import { SubmitSuccessDialogComponent } from './submit-success-dialog/submit-success-dialog.component';
-import {MergeConceptDialogComponent} from '@gsrs-core/substance-form/merge-concept-dialog/merge-concept-dialog.component';
-import {DefinitionSwitchDialogComponent} from '@gsrs-core/substance-form/definition-switch-dialog/definition-switch-dialog.component';
-import { SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component';
-import { StructuralUnit } from '@gsrs-core/substance';
-import { ConfigService } from '@gsrs-core/config';
-import { FragmentWizardComponent } from '@gsrs-core/admin/fragment-wizard/fragment-wizard.component';
-import { SubstanceDraftsComponent } from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component';
-import { UtilsService } from '@gsrs-core/utils';
-import { ungzip, deflate, inflate } from 'pako';
-import { Buffer } from 'buffer';
-import { AdminService } from '@gsrs-core/admin/admin.service';
+import {Title} from '@angular/platform-browser';
+import {AuthService} from '@gsrs-core/auth';
+import {take, map} from 'rxjs/operators';
+import {MatExpansionPanel} from '@angular/material/expansion';
+import {SubmitSuccessDialogComponent} from './submit-success-dialog/submit-success-dialog.component';
+import {
+  MergeConceptDialogComponent
+} from '@gsrs-core/substance-form/merge-concept-dialog/merge-concept-dialog.component';
+import {
+  DefinitionSwitchDialogComponent
+} from '@gsrs-core/substance-form/definition-switch-dialog/definition-switch-dialog.component';
+import {
+  SubstanceEditImportDialogComponent
+} from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component';
+import {StructuralUnit} from '@gsrs-core/substance';
+import {ConfigService} from '@gsrs-core/config';
+import {FragmentWizardComponent} from '@gsrs-core/admin/fragment-wizard/fragment-wizard.component';
+import {SubstanceDraftsComponent} from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component';
+import {UtilsService} from '@gsrs-core/utils';
+import {ungzip, deflate, inflate} from 'pako';
+import {Buffer} from 'buffer';
+import {AdminService} from '@gsrs-core/admin/admin.service';
+import {MatButtonToggleChange} from "@angular/material/button-toggle";
+import {tr} from "cronstrue/dist/i18n/locales/tr";
 
 
 @Component({
@@ -48,24 +56,31 @@ import { AdminService } from '@gsrs-core/admin/admin.service';
   styleUrls: ['./substance-form.component.scss']
 })
 export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy {
+  private static simplifiedSuffix = '-simplified';
+
+  @Input()
+  simplifiedForm = false
+
   isLoading = true;
   id?: string;
-  formSections: Array< SubstanceFormSection > = [];
-  @ViewChildren('dynamicComponent', { read: ViewContainerRef }) dynamicComponents: QueryList<ViewContainerRef>;
-  @ViewChildren('expansionPanel', { read: MatExpansionPanel }) matExpansionPanels: QueryList<MatExpansionPanel>;
+  formSections: Array<SubstanceFormSection> = [];
+  @ViewChildren('dynamicComponent', {read: ViewContainerRef}) dynamicComponents: QueryList<ViewContainerRef>;
+  @ViewChildren('expansionPanel', {read: MatExpansionPanel}) matExpansionPanels: QueryList<MatExpansionPanel>;
   private subClass: string;
   definitionType: string;
   expandedComponents = [
     'substance-form-definition',
+    'substance-form-simplified-names',
+    'substance-form-simplified-codes-card',
     'substance-form-structure',
     'substance-form-moieties',
     'substance-form-references'
   ];
   showSubmissionMessages = false;
   submissionMessage: string;
-  validationMessages: Array< ValidationMessage >;
+  validationMessages: Array<ValidationMessage>;
   validationResult = false;
-  private subscriptions: Array< Subscription > = [];
+  private subscriptions: Array<Subscription> = [];
   copy: string;
   private overlayContainer: HTMLElement;
   serverError: boolean;
@@ -96,12 +111,13 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
     'specifiedSubstanceG1',
     'specifiedSubstanceG2',
     'specifiedSubstanceG3'];
-    imported = false;
-    forceChange = false;
-    sameSubstance = false;
-    UNII: string;
-    approvalType = 'lastEditedBy';
-    previousState: number;
+  imported = false;
+  forceChange = false;
+  sameSubstance = false;
+  UNII: string;
+  approvalType = 'lastEditedBy';
+  previousState: number;
+
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -119,10 +135,10 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
     private titleService: Title,
     private utilsService: UtilsService
   ) {
-    this.substanceService.showImagePopup.subscribe (data => {
+    this.substanceService.showImagePopup.subscribe(data => {
       this.hidePopup = data;
     })
-    this.substanceService.imagePopupUnit.subscribe (data => {
+    this.substanceService.imagePopupUnit.subscribe(data => {
       this.unit = data;
     })
   }
@@ -169,53 +185,51 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
 
 
       if (response) {
-           this.loadingService.setLoading(true);
-         //  console.log(response.json);
-
-          const read = response.substance;
-           if (this.id && read.uuid && this.id === read.uuid) {
-             this.substanceFormService.importSubstance(read, 'update');
-             this.submissionMessage = null;
-             this.validationMessages = [];
-             this.showSubmissionMessages = false;
-             setTimeout(() => {
-               this.loadingService.setLoading(false);
-               this.isLoading = false;
-               this.overlayContainer.style.zIndex = null;
-             }, 1000);
-           }else if (response.uuid && response.uuid != 'register'){
-             const url = '/substances/' + response.uuid + '/edit?action=import&source=draft';
-            this.router.navigateByUrl(url, { state: { record: response.substance } });
-           } else {
-             setTimeout(() => {
-               this.overlayContainer.style.zIndex = null;
-               this.router.onSameUrlNavigation = 'reload';
-               this.loadingService.setLoading(false);
-               this.router.onSameUrlNavigation = 'reload';
-              this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', { state: { record: response.substance } });
-
-             }, 1000);
-           }
-          }
+        this.loadingService.setLoading(true);
+        const read = response.substance;
+        if (this.id && read.uuid && this.id === read.uuid) {
+          this.substanceFormService.importSubstance(read, 'update');
+          this.submissionMessage = null;
+          this.validationMessages = [];
+          this.showSubmissionMessages = false;
+          setTimeout(() => {
+            this.loadingService.setLoading(false);
+            this.isLoading = false;
+            this.overlayContainer.style.zIndex = null;
+          }, 1000);
+        } else if (response.uuid && response.uuid != 'register') {
+          const url = '/substances/' + response.uuid + '/edit?action=import&source=draft';
+          this.router.navigateByUrl(url, {state: {record: response.substance}});
+        } else {
+          setTimeout(() => {
+            this.overlayContainer.style.zIndex = null;
+            this.router.onSameUrlNavigation = 'reload';
+            this.loadingService.setLoading(false);
+            this.router.onSameUrlNavigation = 'reload';
+            this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', {state: {record: response.substance}});
 
-          let keys = Object.keys(localStorage);
-          let i = keys.length;
-          this.draftCount =0;
-          this.drafts = [];
-
-          while ( i-- ) {
-            if (keys[i].startsWith('gsrs-draft-')){
-              const entry = JSON.parse(localStorage.getItem(keys[i]));
-              entry.key = keys[i];
-              if (this.id && entry.uuid === this.id) {
-                this.draftCount++;
-              } else if (!this.id && entry.type ===  (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') {
-                this.draftCount++;
-              }
-              this.drafts.push( entry );
+          }, 1000);
+        }
+      }
 
-            }
+      let keys = Object.keys(localStorage);
+      let i = keys.length;
+      this.draftCount = 0;
+      this.drafts = [];
+
+      while (i--) {
+        if (keys[i].startsWith('gsrs-draft-')) {
+          const entry = JSON.parse(localStorage.getItem(keys[i]));
+          entry.key = keys[i];
+          if (this.id && entry.uuid === this.id) {
+            this.draftCount++;
+          } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') {
+            this.draftCount++;
           }
+          this.drafts.push(entry);
+
+        }
+      }
     });
   }
 
@@ -230,13 +244,13 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
 
     const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => {
       if (response) {
-     //   this.overlayContainer.style.zIndex = null;
+        //   this.overlayContainer.style.zIndex = null;
         this.loadingService.setLoading(true);
 
         // attempting to reload a substance without a router refresh has proven to cause issues with the relationship dropdowns
         // There are probably other components affected. There is an issue with subscriptions likely due to some OnInit not firing
 
-       const read = JSON.parse(response);
+        const read = JSON.parse(response);
         if (this.id && read.uuid && this.id === read.uuid) {
           this.substanceFormService.importSubstance(read, 'update');
           this.submissionMessage = null;
@@ -247,37 +261,36 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
             this.isLoading = false;
             this.overlayContainer.style.zIndex = null;
           }, 1000);
-      /*   } else {
-        if ( read.substanceClass === this.substanceClass) {
-          this.imported = true;
-          this.substanceFormService.importSubstance(read);
-          this.submissionMessage = null;
-          this.validationMessages = [];
-          this.showSubmissionMessages = false;
-          this.loadingService.setLoading(false);
-          this.isLoading = false;*/
+          /*   } else {
+            if ( read.substanceClass === this.substanceClass) {
+              this.imported = true;
+              this.substanceFormService.importSubstance(read);
+              this.submissionMessage = null;
+              this.validationMessages = [];
+              this.showSubmissionMessages = false;
+              this.loadingService.setLoading(false);
+              this.isLoading = false;*/
         } else {
           setTimeout(() => {
             this.overlayContainer.style.zIndex = null;
             this.router.onSameUrlNavigation = 'reload';
             this.loadingService.setLoading(false);
-           this.router.navigateByUrl('/substances/register?action=import', { state: { record: response } });
+            this.router.navigateByUrl('/substances/register?action=import', {state: {record: response}});
 
           }, 1000);
         }
-       }
-     // }
+      }
+      // }
     });
 
   }
 
   test() {
     this.router.navigated = false;
-        this.router.navigate([this.router.url]);
+    this.router.navigate([this.router.url]);
   }
 
 
-
   ngOnInit() {
     this.loadingService.setLoading(true);
     if (this.configService.configData && this.configService.configData.approvalType) {
@@ -298,7 +311,7 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
 
         if (params['id']) {
 
-          if(action && action === 'import' && window.history.state) {
+          if (action && action === 'import' && window.history.state) {
             const record = window.history.state;
             this.imported = true;
 
@@ -323,57 +336,65 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
             this.getDetailsFromImport(record.record);
             this.gaService.sendPageView(`Substance Register`);
 
-          }  else if (this.activatedRoute.snapshot.queryParams['stagingID']) {
+          } else if (this.activatedRoute.snapshot.queryParams['stagingID']) {
             this.substanceService.GetStagedRecord(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => {
               response.uuid = null;
 
 
-                if (response._name){
-                  let name = response._name;
-                  response.names.forEach(current => {
-                    if (current.displayName && current.stdName) {
-                      name = current.stdName;
-                    }
-                  });
-                  name = name.replace(/<[^>]*>?/gm, '');
-                  this.titleService.setTitle('Edit - ' + name);
-                }
-                if (response) {
-                  this.definitionType = response.definitionType;
-                  this.substanceClass = response.substanceClass;
-                  this.status = response.status;
-                  this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => {
-                    this.setFormSections(formSections[response.substanceClass]);
-                    this.isLoading = false;
-                    this.loadingService.setLoading(false);
-                  });
+              if (response._name) {
+                let name = response._name;
+                response.names.forEach(current => {
+                  if (current.displayName && current.stdName) {
+                    name = current.stdName;
+                  }
+                });
+                name = name.replace(/<[^>]*>?/gm, '');
+                this.titleService.setTitle('Edit - ' + name);
+              }
+              if (response) {
+                this.definitionType = response.definitionType;
+                this.substanceClass = response.substanceClass;
+                this.status = response.status;
+                this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => {
+                  this.setFormSections(formSections[response.substanceClass]);
+                  this.isLoading = false;
+                  this.loadingService.setLoading(false);
+                });
 
               }
             }, error => {
               this.isLoading = false;
               this.loadingService.setLoading(false);
-              });
-       }  else {
-          this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null;
-          if (this.copy) {
-            const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null;
-            this.getPartialSubstanceDetails(this.copy, copyType);
-            this.gaService.sendPageView(`Substance Register`);
+            });
           } else {
-            setTimeout(() => {
+            this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null;
+            if (this.copy) {
+              const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null;
+              this.getPartialSubstanceDetails(this.copy, copyType);
               this.gaService.sendPageView(`Substance Register`);
-              this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical';
-              this.substanceClass = this.subClass;
-              this.titleService.setTitle('Register - ' + this.subClass);
-              this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => {
-                this.setFormSections(formSections[this.subClass]);
-                this.loadingService.setLoading(false);
-                this.isLoading = false;
+            } else {
+              setTimeout(() => {
+                let type = this.activatedRoute.snapshot.params['type'] || 'chemical';
+                let defaultValues = false
+                if (type.endsWith(SubstanceFormComponent.simplifiedSuffix)){
+                  this.simplifiedForm = true
+                  defaultValues = true
+                  type = type.slice(0, -SubstanceFormComponent.simplifiedSuffix.length)
+                }
+
+                this.gaService.sendPageView(`Substance Register`);
+                this.subClass = type;
+                this.substanceClass = type;
+                this.titleService.setTitle('Register - ' + this.subClass);
 
+                this.substanceFormService.loadSubstance(this.subClass,undefined,undefined,undefined, defaultValues).pipe(take(1)).subscribe(() => {
+                  this.setFormSections(formSections[this.subClass]);
+                  this.loadingService.setLoading(false);
+                  this.isLoading = false;
+                });
               });
-            });
+            }
           }
-        }
 
 
         }
@@ -400,139 +421,135 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy
 
       });
     });
+  }
 
+  isBase64(str) {
+    let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+    let result = decodeURIComponent(str);
+    return base64regex.test(str);
+  }
 
-
-}
-
-isBase64(str) {
-  let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
-  let result = decodeURIComponent(str);
-  return base64regex.test(str);
-}
-
-setStructureFromUrl(structure: string, type: string):void {
-  // check if structureUR is encoded molfile or raw smiles string, then import into form
-  /*structure = this.gunzip(structure);
-    structure = decodeURIComponent(structure);
-    this.substanceFormService.importStructure(structure, 'molfile');*/
+  setStructureFromUrl(structure: string, type: string): void {
+    // check if structureUR is encoded molfile or raw smiles string, then import into form
+    /*structure = this.gunzip(structure);
+      structure = decodeURIComponent(structure);
+      this.substanceFormService.importStructure(structure, 'molfile');*/
     this.substanceFormService.importStructure(structure, 'smiles');
 
-}
-
-
+  }
 
-gunzip(t): string{
 
-   const gezipedData = Buffer.from(t, 'base64')
-const gzipedDataArray = Uint8Array.from(gezipedData);
-const ungzipedData = ungzip(gzipedDataArray);
-return new TextDecoder().decode(ungzipedData);
-}
+  gunzip(t): string {
+    const gezipedData = Buffer.from(t, 'base64')
+    const gzipedDataArray = Uint8Array.from(gezipedData);
+    const ungzipedData = ungzip(gzipedDataArray);
+    return new TextDecoder().decode(ungzipedData);
+  }
 
-getDrafts() {
-  let keys = Object.keys(localStorage);
+  getDrafts() {
+    let keys = Object.keys(localStorage);
     let i = keys.length;
     this.drafts = [];
     let temp = 0;
-    while ( i-- ) {
-      if (keys[i].startsWith('gsrs-draft-')){
+    while (i--) {
+      if (keys[i].startsWith('gsrs-draft-')) {
         const entry = JSON.parse(localStorage.getItem(keys[i]));
         entry.key = keys[i];
         if (this.id && entry.uuid === this.id) {
           temp++;
-         // this.draftCount++;
+          // this.draftCount++;
         } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') {
           temp++;
-        //  this.draftCount++;
+          //  this.draftCount++;
         }
-        this.drafts.push( entry );
+        this.drafts.push(entry);
 
       }
     }
     this.draftCount = temp;
-}
+  }
 
   ngAfterViewInit(): void {
     this.getDrafts();
     // set structure based on smiles or molfile
     const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null;
     if (structure) {
-     let decode = decodeURIComponent(structure);
-     console.log(decode);
+      let decode = decodeURIComponent(structure);
       setTimeout(() => {
         this.setStructureFromUrl(decode, 'molfile');
       });
     }
     const json = this.activatedRoute.snapshot.queryParams['jsonStructure'] || null;
     // TODO add json support
- //   this.setStructureFromUrl(structure, 'json');
+    //   this.setStructureFromUrl(structure, 'json');
     if (json) {
-     let decode = decodeURI(json);
+      let decode = decodeURI(json);
     }
 
 
-
     const subscription = this.dynamicComponents.changes
       .subscribe(() => {
 
         const total = this.formSections.length;
         let finished = 0;
         if (!this.forceChange) {
-           this.loadingService.setLoading(true);
-           const startTime = new Date();
-        this.dynamicComponents.forEach((cRef, index) => {
-          this.dynamicComponentLoader
-            .getComponentFactory<any>(this.formSections[index].dynamicComponentName)
-            .subscribe(componentFactory => {
-              this.loadingService.setLoading(true);
-              this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory);
-              this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex);
-              this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => {
-                this.formSections[index].menuLabel = label;
-              });
-              const hiddenStateSubscription =
-                this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => {
-                  this.formSections[index].isHidden = isHidden;
+          this.loadingService.setLoading(true);
+          const startTime = new Date();
+          this.dynamicComponents.forEach((cRef, index) => {
+            this.dynamicComponentLoader
+              .getComponentFactory<any>(this.formSections[index].dynamicComponentName)
+              .subscribe(componentFactory => {
+                this.loadingService.setLoading(true);
+                this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory);
+                this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex);
+                this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => {
+                  this.formSections[index].menuLabel = label;
                 });
-              this.subscriptions.push(hiddenStateSubscription);
-              this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => {
-                this.formSections[index].canAddItem = isList;
-                if (isList) {
-                  const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => {
-                    this.formSections[index].matExpansionPanel.open();
-                    this.formSections[index].dynamicComponentRef.instance.addItem();
-                  });
-                  this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => {
-                    aieSubscription.unsubscribe();
+                const hiddenStateSubscription =
+                  this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => {
+                    this.formSections[index].isHidden = isHidden;
                   });
-                }
-              });
-              this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges();
-              finished++;
-              if (finished >= total) {
-                this.loadingService.setLoading(false);
-              } else {
-                const currentTime = new Date();
-                if (currentTime.getTime() - startTime.getTime() > 12000) {
-                  if (confirm('There was a network error while fetching files, would you like to refresh?')) {
-                    window.location.reload();
+                this.subscriptions.push(hiddenStateSubscription);
+                this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => {
+                  this.formSections[index].canAddItem = isList;
+                  if (isList) {
+                    const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => {
+                      this.formSections[index].matExpansionPanel.open();
+                      this.formSections[index].dynamicComponentRef.instance.addItem();
+                    });
+                    this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => {
+                      aieSubscription.unsubscribe();
+                    });
+                  }
+                });
+                this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges();
+                finished++;
+                if (finished >= total) {
+                  this.loadingService.setLoading(false);
+                } else {
+                  const currentTime = new Date();
+                  if (currentTime.getTime() - startTime.getTime() > 12000) {
+                    if (confirm('There was a network error while fetching files, would you like to refresh?')) {
+                      window.location.reload();
+                    }
                   }
                 }
-              }
-            setTimeout(() => {
-              this.loadingService.setLoading(false);
-              this.UNII = this.substanceFormService.getUNII();
-            }, 5);
-            });
-        });
-       // this.loadingService.setLoading(false);
+                setTimeout(() => {
+                  this.loadingService.setLoading(false);
+                  this.UNII = this.substanceFormService.getUNII();
+                }, 5);
 
-      }
+                this.updateHiddenFormSections()
+              });
+          });
+          // this.loadingService.setLoading(false);
+
+        }
         subscription.unsubscribe();
         setTimeout(() => {
 
-        this.autoSave();},10000);
+          this.autoSave();
+        }, 10000);
 
       });
   }
@@ -551,9 +568,11 @@ getDrafts() {
       this.glyco();
     } else if (this.feature === 'disulfide') {
       this.disulfide();
-    } if (this.feature === 'concept') {
+    }
+    if (this.feature === 'concept') {
       this.concept();
-    } if (this.feature === 'unapprove') {
+    }
+    if (this.feature === 'unapprove') {
       if (confirm('Are you sure you\'d like to remove the approvalID?')) {
         this.substanceFormService.unapproveRecord();
       }
@@ -593,8 +612,6 @@ getDrafts() {
       this.regenRefs();
     }
 
-
-
   }
 
   openFragmentDialog(): void {
@@ -611,7 +628,7 @@ getDrafts() {
   }
 
   changeClass(type: any): void {
-    this.router.navigate(['/substances', this.id, 'edit'], { queryParams: { switch: type.value } });
+    this.router.navigate(['/substances', this.id, 'edit'], {queryParams: {switch: type.value}});
     this.feature = undefined;
   }
 
@@ -638,9 +655,7 @@ getDrafts() {
   regenRefs(): void {
     this.substanceFormService.referenceScrub();
     this.feature = undefined;
-  }
-
-  ngOnDestroy(): void {
+  }ngOnDestroy(): void {
     // this.substanceFormService.unloadSubstance();
     this.subscriptions.forEach(subscription => {
       subscription.unsubscribe();
@@ -652,42 +667,42 @@ getDrafts() {
     if (action && action === 'import') {
       return false;
     }
-   const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null;
-    if (staging && staging.length > 0 ) {
+    const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null;
+    if (staging && staging.length > 0) {
       return false
     }
     // if config var set and set to 'createdBy then set approval button enabled if user is not creator
-    if(this.approvalType === 'createdBy') {
-        if (this.definition && this.definition.createdBy && this.user) {
-          const creator = this.definition.createdBy;
-          if (!creator) {
-            return false;
-          }
-          if (this.definition.status === 'approved') {
-            return false;
-          }
-          if (creator === this.user) {
-            return false;
-          }
-          return true;
+    if (this.approvalType === 'createdBy') {
+      if (this.definition && this.definition.createdBy && this.user) {
+        const creator = this.definition.createdBy;
+        if (!creator) {
+          return false;
+        }
+        if (this.definition.status === 'approved') {
+          return false;
+        }
+        if (creator === this.user) {
+          return false;
+        }
+        return true;
 
+      }
+      return false;
+      //default to 'lastEditedBy' if not set in config
+    } else {
+      if (this.definition && this.definition.lastEditedBy && this.user) {
+        const lastEdit = this.definition.lastEditedBy;
+        if (!lastEdit) {
+          return false;
         }
-        return false;
-        //default to 'lastEditedBy' if not set in config
-      } else {
-        if (this.definition && this.definition.lastEditedBy && this.user) {
-           const lastEdit = this.definition.lastEditedBy;
-          if (!lastEdit) {
-            return false;
-          }
-          if (this.definition.status === 'approved') {
-            return false;
+        if (this.definition.status === 'approved') {
+          return false;
 
-          }
-          if (lastEdit === this.user) {
-            return false;
-          }
-          return true;
+        }
+        if (lastEdit === this.user) {
+          return false;
+        }
+        return true;
       }
     }
 
@@ -707,7 +722,7 @@ getDrafts() {
 
   getSubstanceDetails(newType?: string): void {
     this.substanceService.getSubstanceDetails(this.id).pipe(take(1)).subscribe(response => {
-      if (response._name){
+      if (response._name) {
         let name = response._name;
         response.names.forEach(current => {
           if (current.displayName && current.stdName) {
@@ -750,8 +765,8 @@ getDrafts() {
   }
 
   getDetailsFromImport(state: any, same?: boolean) {
-    if(!this.jsonValid(state)) {
-      state  = JSON.stringify(state);
+    if (!this.jsonValid(state)) {
+      state = JSON.stringify(state);
     }
     if (state && this.jsonValid(state)) {
       const response = JSON.parse(state);
@@ -762,41 +777,43 @@ getDrafts() {
       this.substanceFormService.loadSubstance(response.substanceClass, response, 'import').pipe(take(1)).subscribe(() => {
         this.setFormSections(formSections[response.substanceClass]);
         if (!same) {
-        setTimeout(() => {
-          this.forceChange = true;
-          this.dynamicComponents.forEach((cRef, index) => {
-            this.dynamicComponentLoader
-              .getComponentFactory<any>(this.formSections[index].dynamicComponentName)
-              .subscribe(componentFactory => {
-                this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory);
-                this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex);
-                this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => {
-                  this.formSections[index].menuLabel = label;
-                });
-                const hiddenStateSubscription =
-                  this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => {
-                    this.formSections[index].isHidden = isHidden;
+          setTimeout(() => {
+            this.forceChange = true;
+            this.dynamicComponents.forEach((cRef, index) => {
+              this.dynamicComponentLoader
+                .getComponentFactory<any>(this.formSections[index].dynamicComponentName)
+                .subscribe(componentFactory => {
+                  this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory);
+                  this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex);
+                  this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => {
+                    this.formSections[index].menuLabel = label;
                   });
-                this.subscriptions.push(hiddenStateSubscription);
-                this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => {
-                  this.formSections[index].canAddItem = isList;
-                  if (isList) {
-                    const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => {
-                      this.formSections[index].matExpansionPanel.open();
-                      this.formSections[index].dynamicComponentRef.instance.addItem();
+                  const hiddenStateSubscription =
+                    this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => {
+                      this.formSections[index].isHidden = isHidden;
                     });
-                    this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => {
-                      aieSubscription.unsubscribe();
-                    });
-                  }
+                  this.subscriptions.push(hiddenStateSubscription);
+                  this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => {
+                    this.formSections[index].canAddItem = isList;
+                    if (isList) {
+                      const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => {
+                        this.formSections[index].matExpansionPanel.open();
+                        this.formSections[index].dynamicComponentRef.instance.addItem();
+                      });
+                      this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => {
+                        aieSubscription.unsubscribe();
+                      });
+                    }
+                  });
+                  this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges();
+
+                  this.updateHiddenFormSections()
                 });
-                this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges();
-              });
-          });
+            });
 
-          this.canApprove = false;
-        });
-      }
+            this.canApprove = false;
+          });
+        }
       }, error => {
         this.loadingService.setLoading(false);
       });
@@ -840,10 +857,10 @@ getDrafts() {
     this.formSections = [];
     sectionNames.forEach(sectionName => {
       const formSection = new SubstanceFormSection(sectionName);
-     /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' &&
-        (formSection.dynamicComponentName === 'substance-form-names'
-          || formSection.dynamicComponentName === 'substance-form-codes-card'))) {
-      } */
+      /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' &&
+         (formSection.dynamicComponentName === 'substance-form-names'
+           || formSection.dynamicComponentName === 'substance-form-codes-card'))) {
+       } */
       this.formSections.push(formSection);
     });
   }
@@ -858,7 +875,7 @@ getDrafts() {
     setTimeout(() => {
       this.router.navigate(['/substances/register']);
       this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => {
-        this.setFormSections(formSections.chemical);
+        this.setFormSections(formSections.chemical)
         this.loadingService.setLoading(false);
         this.isLoading = false;
       });
@@ -871,13 +888,16 @@ getDrafts() {
     } else {
       this.approving = false;
     }
+
+    this.substanceFormService.validationMutations()
+
     this.isLoading = true;
     this.serverError = false;
     this.loadingService.setLoading(true);
     this.substanceFormService.validateSubstance().pipe(take(1)).subscribe(results => {
       this.submissionMessage = null;
       this.validationMessages = results.validationMessages.filter(
-        message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'|| message.messageType.toUpperCase() === 'NOTICE');
+        message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING' || message.messageType.toUpperCase() === 'NOTICE');
       this.validationResult = results.valid;
       this.showSubmissionMessages = true;
       this.loadingService.setLoading(false);
@@ -899,14 +919,14 @@ getDrafts() {
     this.isLoading = true;
     this.loadingService.setLoading(true);
     this.substanceFormService.approveSubstance().pipe(take(1)).subscribe(response => {
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.validationMessages = null;
-      this.openSuccessDialog({ type: 'approve' });
-      this.submissionMessage = 'Substance was approved successfully';
-      this.showSubmissionMessages = true;
-      this.validationResult = false;
-    },
+        this.loadingService.setLoading(false);
+        this.isLoading = false;
+        this.validationMessages = null;
+        this.openSuccessDialog({ type: 'approve'});
+        this.submissionMessage = 'Substance was approved successfully';
+        this.showSubmissionMessages = true;
+        this.validationResult = false;
+      },
       (error: SubstanceFormResults) => {
         this.showSubmissionMessages = true;
         this.loadingService.setLoading(false);
@@ -942,37 +962,37 @@ getDrafts() {
     if (this.activatedRoute.snapshot.queryParams['stagingID']) {
       this.submitStaging();
     } else {
-    this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => {
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.validationMessages = null;
-      this.showSubmissionMessages = false;
-      this.submissionMessage = '';
-      if (!this.id) {
-        this.id = response.uuid;
-      }
-      this.openSuccessDialog({ type: 'submit', fileUrl: response.fileUrl });
-    }, (error: SubstanceFormResults) => {
-      this.showSubmissionMessages = true;
-      this.loadingService.setLoading(false);
-      this.isLoading = false;
-      this.submissionMessage = null;
-      if (error.validationMessages && error.validationMessages.length) {
-        this.validationResult = error.isSuccessfull;
-        this.validationMessages = error.validationMessages
-          .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING');
+      this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => {
+        this.loadingService.setLoading(false);
+        this.isLoading = false;
+        this.validationMessages = null;
+        this.showSubmissionMessages = false;
+        this.submissionMessage = '';
+        if (!this.id) {
+          this.id = response.uuid;
+        }
+        this.openSuccessDialog({ type: 'submit', fileUrl: response.fileUrl });
+      }, (error: SubstanceFormResults) => {
         this.showSubmissionMessages = true;
-      } else {
-        this.submissionMessage = 'There was a problem with your submission';
-        this.addServerError(error.serverError);
-        setTimeout(() => {
-          this.showSubmissionMessages = false;
-          this.submissionMessage = null;
-        }, 8000);
-      }
-    });
+        this.loadingService.setLoading(false);
+        this.isLoading = false;
+        this.submissionMessage = null;
+        if (error.validationMessages && error.validationMessages.length) {
+          this.validationResult = error.isSuccessfull;
+          this.validationMessages = error.validationMessages
+            .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING');
+          this.showSubmissionMessages = true;
+        } else {
+          this.submissionMessage = 'There was a problem with your submission';
+          this.addServerError(error.serverError);
+          setTimeout(() => {
+            this.showSubmissionMessages = false;
+            this.submissionMessage = null;
+          }, 8000);
+        }
+      });
 
-  }
+    }
   }
 
   dismissValidationMessage(index: number) {
@@ -1030,18 +1050,19 @@ getDrafts() {
   }
 
   //generate new uuid string for following scubber functions
-  guid() {
-    function s4() {
-      return Math.floor((1 + Math.random()) * 0x10000)
-        .toString(16)
-        .substring(1);
+     guid() {
+      function s4() {
+        return Math.floor((1 + Math.random()) * 0x10000)
+          .toString(16)
+          .substring(1);
+
+    }
+      return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
+        s4() + '-' + s4() + s4() + s4();
     }
-    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
-      s4() + '-' + s4() + s4() + s4();
-  }
 
   scrub(oldraw: any, importType?: string): any {
-    
+
     const old = oldraw;
 
     const idHolders = defiant.json.search(old, '//*[id]');
@@ -1080,7 +1101,9 @@ getDrafts() {
       const refs = refHolders[i].references;
       for (let j = 0; j < refs.length; j++) {
         const or = refs[j];
-        if (typeof or === 'object') { continue; }
+        if (typeof or === 'object') {
+          continue;
+        }
         refs[j] = _map[or];
       }
     }
@@ -1089,11 +1112,11 @@ getDrafts() {
     if (this.configService.configData && this.configService.configData.filteredDuplicationCodes) {
       remove = this.configService.configData.filteredDuplicationCodes;
     }
-      remove.forEach(code => {
-        _.remove(old.codes, {
-          codeSystem: code
-        });
-      })
+    remove.forEach(code => {
+      _.remove(old.codes, {
+        codeSystem: code
+      });
+    })
 
     const createHolders = defiant.json.search(old, '//*[created]');
     for (let i = 0; i < createHolders.length; i++) {
@@ -1138,7 +1161,9 @@ getDrafts() {
         const refs = refHolders2[i].references;
         for (let j = 0; j < refs.length; j++) {
           const or = refs[j];
-          if (typeof or === 'object') { continue; }
+          if (typeof or === 'object') {
+            continue;
+          }
           refSet[or] = true;
         }
       }
@@ -1168,6 +1193,7 @@ getDrafts() {
       },
       disableClose: true
     });
+
     this.overlayContainer.style.zIndex = '1002';
 
     const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe((response?: 'continue' | 'browse' | 'view' | 'staging') => {
@@ -1204,16 +1230,16 @@ getDrafts() {
     });
     this.subscriptions.push(dialogSubscription);
 
-}
+  }
 
 
-mergeConcept() {
-  this.feature = undefined;
-  const dialogRef = this.dialog.open(MergeConceptDialogComponent, {
-    width: '900px', data: {uuid: this.id}
-  });
-  this.overlayContainer.style.zIndex = '1002';
-}
+  mergeConcept() {
+    this.feature = undefined;
+    const dialogRef = this.dialog.open(MergeConceptDialogComponent, {
+      width: '900px', data: {uuid: this.id}
+    });
+    this.overlayContainer.style.zIndex = '1002';
+  }
 
   definitionSwitch() {
     this.feature = undefined;
@@ -1227,6 +1253,21 @@ mergeConcept() {
     return this.substanceService.oldLinkFix(link);
   }
 
+  updateHiddenFormSections() {
+    for (const s of this.formSections) {
+      if (['substance-form-structure'].includes(s.dynamicComponentName)) {
+        s.isHidden = false
+        continue
+      }
+
+      if (['substance-form-simplified-names','substance-form-simplified-codes-card','substance-form-simplified-references'].includes(s.dynamicComponentName)) {
+        s.isHidden = !this.simplifiedForm
+        continue
+      }
+
+      s.isHidden = this.simplifiedForm
+    }
+  }
 
   saveDraft(auto?: boolean) {
     const json = this.substanceFormService.cleanSubstance();
@@ -1243,7 +1284,7 @@ mergeConcept() {
     if (!primary && json.names.length > 0) {
       primary = json.names[0].name;
     }
-    if(!auto) {
+    if (!auto) {
       const file = 'gsrs-draft-' + time;
 
       let draft = {
@@ -1256,8 +1297,8 @@ mergeConcept() {
         'file': file
       }
 
-     localStorage.setItem(file, JSON.stringify(draft));
-     this.draftCount++;
+      localStorage.setItem(file, JSON.stringify(draft));
+      this.draftCount++;
 
     } else {
       this.getDrafts();
@@ -1283,26 +1324,24 @@ mergeConcept() {
       let file = 'gsrs-draft-auto';
 
       if (!auto1) {
-         file = 'gsrs-draft-auto1';
+        file = 'gsrs-draft-auto1';
         this.draftCount++;
 
       } else if (!auto2) {
-         file = 'gsrs-draft-auto2';
+        file = 'gsrs-draft-auto2';
         this.draftCount++;
 
       } else if (!auto3) {
-         file = 'gsrs-draft-auto3';
+        file = 'gsrs-draft-auto3';
         this.draftCount++;
 
       } else {
-          if(auto1.date < auto2.date && auto1.date < auto3.date) {
-             file = 'gsrs-draft-auto1';
-        }
-        else if (auto2.date < auto1.date && auto2.date < auto3.date) {
-           file = 'gsrs-draft-auto2';
-        }
-        else {
-           file = 'gsrs-draft-auto3';
+        if (auto1.date < auto2.date && auto1.date < auto3.date) {
+          file = 'gsrs-draft-auto1';
+        } else if (auto2.date < auto1.date && auto2.date < auto3.date) {
+          file = 'gsrs-draft-auto2';
+        } else {
+          file = 'gsrs-draft-auto3';
         }
       }
 
@@ -1316,7 +1355,8 @@ mergeConcept() {
         'file': file
       }
 
-     localStorage.setItem(file, JSON.stringify(draft));
+      localStorage.setItem(file, JSON.stringify(draft));
+
 
     }
   }
diff --git a/src/app/core/substance-form/substance-form.module.ts b/src/app/core/substance-form/substance-form.module.ts
index 8fa5a7b9e..674c55ec4 100644
--- a/src/app/core/substance-form/substance-form.module.ts
+++ b/src/app/core/substance-form/substance-form.module.ts
@@ -17,7 +17,6 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { ScrollToModule } from '../scroll-to/scroll-to.module';
 import { DomainReferencesComponent } from './references/domain-references/domain-references.component';
-import { ReferenceFormComponent } from './references/reference-form.component';
 import { RefernceFormDialogComponent } from './references/references-dialogs/refernce-form-dialog.component';
 import { ReuseReferencesDialogComponent } from './references/references-dialogs/reuse-references-dialog.component';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -82,7 +81,6 @@ import { PreviousReferencesComponent } from '@gsrs-core/substance-form/reference
 import { PreviousReferencesDialogComponent } from '@gsrs-core/substance-form/references/previous-references/previous-references-dialog/previous-references-dialog.component';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { CopyDisulfideDialogComponent } from '@gsrs-core/substance-form/copy-disulfide-dialog/copy-disulfide-dialog.component';
-import { FragmentWizardComponent } from '@gsrs-core/admin/fragment-wizard/fragment-wizard.component';
 import { SubstanceDraftsComponent } from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component';
 import { MatSortModule } from '@angular/material/sort';
 import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-display.module';
@@ -128,7 +126,6 @@ import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-displa
     AccessManagerComponent,
     TagSelectorComponent,
     DomainReferencesComponent,
-    ReferenceFormComponent,
     RefernceFormDialogComponent,
     PreviousReferencesComponent,
     ReuseReferencesDialogComponent,
@@ -154,13 +151,12 @@ import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-displa
     DefinitionSwitchDialogComponent,
     PreviousReferencesDialogComponent,
     CopyDisulfideDialogComponent,
-    SubstanceDraftsComponent
+    SubstanceDraftsComponent,
   ],
   exports: [
     SubstanceFormComponent,
     AccessManagerComponent,
     DomainReferencesComponent,
-    ReferenceFormComponent,
     PreviousReferencesComponent,
     RefernceFormDialogComponent,
     ReuseReferencesDialogComponent,
diff --git a/src/app/core/substance-form/substance-form.service.ts b/src/app/core/substance-form/substance-form.service.ts
index 93642c907..cd7f37015 100644
--- a/src/app/core/substance-form/substance-form.service.ts
+++ b/src/app/core/substance-form/substance-form.service.ts
@@ -1,4 +1,4 @@
-import { Injectable, OnDestroy } from '@angular/core';
+import {Injectable, OnDestroy} from '@angular/core';
 import {
   SubstanceDetail,
   SubstanceName,
@@ -20,15 +20,15 @@ import {
   SubstanceFormDefinition,
   SubstanceFormResults, SubunitSequence, ValidationResults, ValidationMessage
 } from './substance-form.model';
-import { Observable, Subject, ReplaySubject, Subscription } from 'rxjs';
-import { SubstanceService } from '../substance/substance.service';
-import { UtilsService } from '../utils/utils.service';
-import { StructureService } from '@gsrs-core/structure';
+import {Observable, Subject, ReplaySubject, Subscription} from 'rxjs';
+import {SubstanceService} from '../substance/substance.service';
+import {UtilsService} from '../utils/utils.service';
+import {StructureService} from '@gsrs-core/structure';
 import * as _ from 'lodash';
 import * as defiant from '../../../../node_modules/defiant.js/dist/defiant.min.js';
 
-import { take } from 'rxjs/operators';
-import { AdminService } from '@gsrs-core/admin/admin.service';
+import {take} from 'rxjs/operators';
+import {AdminService} from '@gsrs-core/admin/admin.service';
 
 @Injectable()
 export class SubstanceFormService implements OnDestroy {
@@ -81,9 +81,9 @@ export class SubstanceFormService implements OnDestroy {
   setStoredRelated(substance: SubstanceSummary, header: string) {
     this.storedRelated[header] = substance;
 
-    }
+  }
 
-  loadSubstance(substanceClass: string = 'chemical', substance?: SubstanceDetail, method?: string, mergeConcept?: boolean): Observable<void> {
+  loadSubstance(substanceClass: string = 'chemical', substance?: SubstanceDetail, method?: string, mergeConcept?: boolean, defaultValues?: boolean): Observable<void> {
     if (method) {
       this.method = method;
     } else {
@@ -104,23 +104,35 @@ export class SubstanceFormService implements OnDestroy {
       } else {
         // the second case happens in the forms sometimes but really shouldn't
         if (substanceClass === 'chemical' || substanceClass === 'structure') {
-          this.privateSubstance = {
-            substanceClass: 'chemical',
-            references: [],
-            names: [],
-            structure: {
-              molfile: '\n\n\n  0  0  0  0  0  0            999 V2000\nM  END'
-            },
-            codes: [],
-            relationships: [],
-            properties: []
-          };
+          this.privateSubstance = defaultValues ?
+            {
+              substanceClass: 'chemical',
+              references: [],
+              names: [{name: "", access:["protected"]}],
+              structure: {
+                molfile: '\n\n\n  0  0  0  0  0  0            999 V2000\nM  END'
+              },
+              codes: [{codeSystem: "CAS", access:["protected"]}],
+              relationships: [],
+              properties: []
+            } :
+            {
+              substanceClass: 'chemical',
+              references: [],
+              names: [],
+              structure: {
+                molfile: '\n\n\n  0  0  0  0  0  0            999 V2000\nM  END'
+              },
+              codes: [],
+              relationships: [],
+              properties: []
+            };
         } else if (substanceClass === 'protein') {
           this.privateSubstance = {
             substanceClass: 'protein',
             references: [],
             names: [],
-            protein: { proteinType: '' },
+            protein: {proteinType: ''},
             codes: [],
             relationships: [],
             properties: []
@@ -189,8 +201,8 @@ export class SubstanceFormService implements OnDestroy {
             names: [],
             specifiedSubstanceG3: {
               parentSubstance: {},
-              definition: { references: [] },
-              grade: { references: [] }
+              definition: {references: []},
+              grade: {references: []}
             },
             codes: [],
             properties: []
@@ -201,7 +213,8 @@ export class SubstanceFormService implements OnDestroy {
             // references: [],
             specifiedSubstanceG4m: {
               parentSubstance: {},
-              process: [{"processName": "Process 1",
+              process: [{
+                "processName": "Process 1",
                 sites: [{
                   stages: [{
                     "stageNumber": "1",
@@ -255,7 +268,7 @@ export class SubstanceFormService implements OnDestroy {
       this.subClass = this.privateSubstance.substanceClass;
 
       // Only these two substance classes differ from
-      // the name of their JSON defintional element
+      // the name of their JSON definitional element
       // That's why they are used as exceptions
 
       if (this.subClass === 'chemical') {
@@ -397,7 +410,7 @@ export class SubstanceFormService implements OnDestroy {
     if (newClass === 'chemical') {
       substance.structure = {};
     } else if (newClass === 'protein') {
-      substance.protein = { proteinType: '' };
+      substance.protein = {proteinType: ''};
 
     } else if (newClass === 'nucleicAcid') {
       substance.nucleicAcid = {};
@@ -409,8 +422,7 @@ export class SubstanceFormService implements OnDestroy {
         $$diverseType: 'whole'
       };
     } else if (newClass === 'specifiedSubstanceG1') {
-      substance.specifiedSubstance = {
-      };
+      substance.specifiedSubstance = {};
     } else if (newClass === 'polymer') {
       substance.polymer = {
         idealizedStructure: {},
@@ -439,6 +451,7 @@ export class SubstanceFormService implements OnDestroy {
     } else {
     }
   }
+
   setPrivate(e) {
     e.access = ['protected'];
     alert('Substance definition now set to protected, please submit to save change');
@@ -680,7 +693,7 @@ export class SubstanceFormService implements OnDestroy {
           if (link.sites) {
             link.sites.forEach(site => {
               if (site.subunitIndex && site.residueIndex) {
-                const newLink: DisplaySite = { residue: site.residueIndex, subunit: site.subunitIndex, type: 'other' };
+                const newLink: DisplaySite = {residue: site.residueIndex, subunit: site.subunitIndex, type: 'other'};
                 allSitesArr.push(newLink);
               }
             });
@@ -748,7 +761,7 @@ export class SubstanceFormService implements OnDestroy {
             const sites = f.split('-');
             const subunitIndex = Number(sites[0].split('_')[0]);
             for (let i = Number(sites[0].split('_')[1]); i <= Number(sites[1].split('_')[1]); i++) {
-              const newLink: DisplaySite = { residue: Number(i), subunit: subunitIndex, type: 'feature' };
+              const newLink: DisplaySite = {residue: Number(i), subunit: subunitIndex, type: 'feature'};
               allSitesArr.push(newLink);
             }
           });
@@ -782,7 +795,7 @@ export class SubstanceFormService implements OnDestroy {
     return new Observable(observer => {
       this.ready().subscribe(substance => {
         if (this.privateSubstance.nucleicAcid == null) {
-          this.privateSubstance.nucleicAcid = { nucleicAcidType: '' };
+          this.privateSubstance.nucleicAcid = {nucleicAcidType: ''};
 
         }
         observer.next(this.privateSubstance.nucleicAcid);
@@ -1137,7 +1150,7 @@ export class SubstanceFormService implements OnDestroy {
           for (let j = 0; j < sequence.length; j++) {
             const site = sequence[j];
             if (site.toUpperCase() === 'C') {
-              available.push({ 'residueIndex': (j + 1), 'subunitIndex': (i + 1) });
+              available.push({'residueIndex': (j + 1), 'subunitIndex': (i + 1)});
             }
           }
         }
@@ -1228,7 +1241,6 @@ export class SubstanceFormService implements OnDestroy {
   }
 
 
-
   // end change reason
 
   validateSubstance(): Observable<ValidationResults> {
@@ -1309,7 +1321,7 @@ export class SubstanceFormService implements OnDestroy {
             for (let i = 0; i < substanceCopy.modifications.physicalModifications.length; i++) {
               const prop = substanceCopy.modifications.physicalModifications[i];
               let present = false;
-              if (prop && prop.parameters){
+              if (prop && prop.parameters) {
                 prop.parameters.forEach(param => {
                   if (param.parameterName) {
                     present = true;
@@ -1452,7 +1464,10 @@ export class SubstanceFormService implements OnDestroy {
     return substanceCopy;
   }
 
-  private cleanObject(substanceProperty: any, deletedUuids: Array<string> = []): { deletedUuids: Array<string>, isDeleted: boolean } {
+  private cleanObject(substanceProperty: any, deletedUuids: Array<string> = []): {
+    deletedUuids: Array<string>,
+    isDeleted: boolean
+  } {
     if (Object.prototype.toString.call(substanceProperty) === '[object Object]') {
 
       const hasDeleletedCode = substanceProperty.$$deletedCode != null;
@@ -1507,7 +1522,7 @@ export class SubstanceFormService implements OnDestroy {
 
   importStructure(structure, type) {
     // import a structure from mol or smiles
-    if(this.privateSubstance) {
+    if (this.privateSubstance) {
       if (type === 'molfile') {
         this.privateSubstance.structure.molfile = structure;
         this.substanceEmitter.next(this.privateSubstance);
@@ -1516,15 +1531,15 @@ export class SubstanceFormService implements OnDestroy {
 
         this.structureService.interpretStructure(structure).pipe(take(1)).subscribe(response => {
           if (response && response.structure && response.structure.molfile) {
-          this.privateSubstance.structure.molfile = response.structure.molfile;
-          this.substanceEmitter.next(this.privateSubstance);
+            this.privateSubstance.structure.molfile = response.structure.molfile;
+            this.substanceEmitter.next(this.privateSubstance);
           }
         });
       }
     } else {
       // service substance loaded improperly
     }
-    
+
   }
 
   approveSubstance(): Observable<any> {
@@ -1578,10 +1593,10 @@ export class SubstanceFormService implements OnDestroy {
     const substanceCopy = this.cleanSubstance();
     return new Observable(observer => {
 
-    this.adminService.updateStagingArea(id, substanceCopy).subscribe(response => {
-      console.log(response);
+      this.adminService.updateStagingArea(id, substanceCopy).subscribe(response => {
+        console.log(response);
         observer.next(response);
-          observer.complete();
+        observer.complete();
       }, error => {
         console.log(error);
         observer.error(error);
@@ -1737,7 +1752,7 @@ export class SubstanceFormService implements OnDestroy {
         this.privateSubstance.protein.glycosylation.OGlycosylationSites.concat(data.links);
       this.emitGlycosylationUpdate();
     } else if (data.siteType === 'disulfide') {
-      const newLink: Link = { sites: data.links };
+      const newLink: Link = {sites: data.links};
       this.privateSubstance.protein.disulfideLinks.unshift(newLink);
       this.emitDisulfideLinkUpdate();
 
@@ -1869,16 +1884,16 @@ export class SubstanceFormService implements OnDestroy {
     ('IGG4	0-1,11-12,13-31,14-15,18-19,2-26,20-21,22-23,24-25,27-28,29-30,3-4,5-16,6-17,7-8,9-10\n' +
       'IGG2	0-1,11-12,13-14,15-35,16-17,2-30,22-23,24-25,26-27,28-29,3-4,31-32,33-34,5-18,6-19,7-20,8-21,9-10\n' +
       'IGG1	0-1,11-12,13-14,15-31,18-19,2-3,20-21,22-23,24-25,27-28,29-30,4-26,5-16,6-17,7-8,9-10').split('\n').map(function (s) {
-        const tup = s.split('\t');
+      const tup = s.split('\t');
 
-        const list = _.chain(tup[1].split(',')).map(function (t) {
-          return _.map(t.split('-'), function (temp) {
-            return +temp - 0;
-          });
-        }).value();
+      const list = _.chain(tup[1].split(',')).map(function (t) {
+        return _.map(t.split('-'), function (temp) {
+          return +temp - 0;
+        });
+      }).value();
 
-        KNOWN_DISULFIDE_PATTERNS[tup[0]] = list;
-      });
+      KNOWN_DISULFIDE_PATTERNS[tup[0]] = list;
+    });
     const proteinSubstance = this.privateSubstance;
     const prot = proteinSubstance.protein;
     const pattern = KNOWN_DISULFIDE_PATTERNS[prot.proteinSubType];
@@ -2013,6 +2028,11 @@ export class SubstanceFormService implements OnDestroy {
 
   }
 
+  validationMutations() {
+    this.privateSubstance.names = this.privateSubstance.names.filter(x => x.name)
+    this.privateSubstance.codes = this.privateSubstance.codes.filter(x => x.code)
+    this.substanceEmitter.next(this.privateSubstance);
+  }
   guid() {
     function s4() {
       return Math.floor((1 + Math.random()) * 0x10000)
@@ -2032,8 +2052,8 @@ export class SubstanceFormService implements OnDestroy {
         ref.uuid = nid;
     });
 
-    const uuidHolders = defiant.json.search(old, '//*[uuid]');    
-    
+    const uuidHolders = defiant.json.search(old, '//*[uuid]');
+
     const refHolders = defiant.json.search(old, '//*[references]');
 
     for (let i = 0; i < refHolders.length; i++) {
@@ -2080,7 +2100,6 @@ export class SubstanceFormService implements OnDestroy {
 }
 
 
-
 interface DisplaySite {
   type: string;
   subunit: number;