diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
new file mode 100644
index 00000000..ce9301af
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelEditor.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { defineProps, ref } from "vue";
+
+import NonLocalizedString from "@/arches_lingo/components/generic/NonLocalizedString.vue";
+
+// import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
+
+import { EDIT } from "@/arches_lingo/constants.ts";
+
+import type { AppellativeStatus } from "@/arches_lingo/types.ts";
+
+const props = withDefaults(
+    defineProps<{
+        value?: AppellativeStatus;
+    }>(),
+    {
+        value: () => ({}) as AppellativeStatus,
+    },
+);
+
+const appellative_status = ref(props.value);
+
+function onUpdate(newValue: string) {
+    // handle the update
+    console.log("Update new value here!" + newValue);
+}
+</script>
+
+<template>
+    <!-- Label: string -->
+    <label for="">{{ $gettext("Label") }}</label>
+    <NonLocalizedString
+        :value="
+            appellative_status?.appellative_status_ascribed_name_content ?? ''
+        "
+        :mode="EDIT"
+        @update="onUpdate"
+    />
+    <!-- Label Language: reference datatype -->
+    <label for="">{{ $gettext("Label Language") }}</label>
+
+    <!-- Label Type: reference datatype -->
+    <label for="">{{ $gettext("Label Type") }}</label>
+
+    <!-- Label Status: reference datatype -->
+    <label for="">{{ $gettext("Label Status") }}</label>
+
+    <!-- Label Status Metatype: reference datatype -->
+    <label for="">{{ $gettext("Label Metatype") }}</label>
+
+    <!-- Label Temporal Validity Start: date -->
+    <label for="">{{ $gettext("Label Temporal Validity Start") }}</label>
+
+    <!-- Label Temporal Validity End: date -->
+    <label for="">{{ $gettext("Label Temporal Validity End") }}</label>
+
+    <!-- Contributor: resource instance -->
+    <label for="">{{ $gettext("Contributor") }}</label>
+
+    <!-- Sources: resource instance -->
+    <label for="">{{ $gettext("Sources") }}</label>
+
+    <!-- Warrant Type: reference datatype -->
+    <label for="">{{ $gettext("Warrant Type") }}</label>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
index ae304908..e72e6863 100644
--- a/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
+++ b/arches_lingo/src/arches_lingo/components/generic/LabelViewer.vue
@@ -7,8 +7,8 @@ import Button from "primevue/button";
 import ConfirmDialog from "primevue/confirmdialog";
 import { useConfirm } from "primevue/useconfirm";
 
-import ControlledListItem from "@/arches_lingo/components/generic/ControlledListItem.vue";
-import ResourceInstanceRelationships from "@/arches_lingo/components/generic/ResourceInstanceRelationships.vue";
+import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
+import ResourceInstanceRelationshipsViewer from "@/arches_lingo/components/generic/resource-instance-relationships/ResourceInstanceRelationshipsViewer.vue";
 
 import type { AppellativeStatus } from "@/arches_lingo/types";
 
@@ -73,13 +73,13 @@ function confirmDelete(tileId: string) {
             sortable
         >
             <template #body="slotProps">
-                <ControlledListItem
+                <ReferenceDatatypeViewer
                     :value="
                         (slotProps.data as AppellativeStatus)
                             .appellative_status_ascribed_relation
                     "
                 >
-                </ControlledListItem>
+                </ReferenceDatatypeViewer>
             </template>
         </Column>
         <Column
@@ -88,13 +88,13 @@ function confirmDelete(tileId: string) {
             sortable
         >
             <template #body="slotProps">
-                <ControlledListItem
+                <ReferenceDatatypeViewer
                     :value="
                         (slotProps.data as AppellativeStatus)
                             .appellative_status_ascribed_name_language
                     "
                 >
-                </ControlledListItem>
+                </ReferenceDatatypeViewer>
             </template>
         </Column>
         <Column>
diff --git a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
index d7366ffa..37900eae 100644
--- a/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
+++ b/arches_lingo/src/arches_lingo/components/scheme/report/SchemeLabel.vue
@@ -2,18 +2,19 @@
 import { useGettext } from "vue3-gettext";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
+import { useToast } from "primevue/usetoast";
+
+import { VIEW, EDIT, OPEN_EDITOR } from "@/arches_lingo/constants.ts";
+import { deleteSchemeLabelTile, fetchSchemeLabel } from "@/arches_lingo/api.ts";
+import LabelViewer from "@/arches_lingo/components/generic/LabelViewer.vue";
+import LabelEditor from "@/arches_lingo/components/generic/LabelEditor.vue";
+import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
 
-import { VIEW, EDIT, OPEN_EDITOR, ERROR } from "@/arches_lingo/constants.ts";
 import type {
     DataComponentMode,
     SchemeInstance,
 } from "@/arches_lingo/types.ts";
-import { deleteSchemeLabelTile, fetchSchemeLabel } from "@/arches_lingo/api.ts";
-import SchemeReportSection from "@/arches_lingo/components/scheme/report/SchemeSection.vue";
-import LabelViewer from "@/arches_lingo/components/generic/LabelViewer.vue";
-import { useToast } from "primevue/usetoast";
 
-const schemeInstance = ref<SchemeInstance>();
 const { $gettext } = useGettext();
 const toast = useToast();
 const route = useRoute();
@@ -22,12 +23,16 @@ withDefaults(
     defineProps<{
         mode?: DataComponentMode;
         tileId?: string | null;
+        args?: Array<object>;
+        // todo for Johnathan - if obj empty, create new tile
+        // if obj has values, load those values into the form
     }>(),
     {
         mode: VIEW,
         tileId: null, // editor arg specifying what tile to operate on.
     },
 );
+const schemeInstance = ref<SchemeInstance>();
 
 defineExpose({ save, getSectionValue });
 
@@ -112,7 +117,14 @@ async function save() {
             ></LabelViewer>
         </SchemeReportSection>
     </div>
-    <div v-if="mode === EDIT"><!-- todo for Johnathan-->abc</div>
+    <div v-if="mode === EDIT">
+        <div
+            v-for="appellative_status in schemeInstance?.appellative_status"
+            :key="appellative_status.tileid"
+        >
+            <LabelEditor :value="appellative_status"></LabelEditor>
+        </div>
+    </div>
 </template>
 <style scoped>
 :deep(.drawer) {