diff --git a/arches_lingo/src/arches_lingo/api.ts b/arches_lingo/src/arches_lingo/api.ts
index d28c04d8..b57b5936 100644
--- a/arches_lingo/src/arches_lingo/api.ts
+++ b/arches_lingo/src/arches_lingo/api.ts
@@ -145,3 +145,10 @@ export const fetchSchemes = async () => {
     if (!response.ok) throw new Error(parsed.message || response.statusText);
     return parsed;
 };
+
+export const fetchControlledListOptions = async (controlledListId: string) => {
+    const response = await fetch(arches.urls.controlled_list(controlledListId));
+    const parsed = await response.json();
+    if (!response.ok) throw new Error(parsed.message || response.statusText);
+    return parsed;
+};
diff --git a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue b/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
deleted file mode 100644
index 2dc64268..00000000
--- a/arches_lingo/src/arches_lingo/components/generic/ControlledListItem.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type {
-    ControlledListItem,
-    DataComponentMode,
-} from "@/arches_lingo/types";
-import ControlledListItemViewer from "@/arches_lingo/components/generic/controlled-list-item/ControlledListItemViewer.vue";
-import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
-
-const { mode = VIEW } = defineProps<{
-    mode?: DataComponentMode;
-    value?: ControlledListItem | ControlledListItem[];
-}>();
-defineEmits(["update"]);
-</script>
-<template>
-    <div>
-        <div v-if="mode === VIEW">
-            <ControlledListItemViewer :value="value" />
-        </div>
-        <div v-if="mode === EDIT"></div>
-    </div>
-</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
new file mode 100644
index 00000000..e9aa4dad
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/ReferenceDatatype.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type {
+    ControlledListItem,
+    DataComponentMode,
+} from "@/arches_lingo/types";
+import ReferenceDatatypeViewer from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue";
+import ReferenceDatatypeEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue";
+import ReferenceDatatypeListEditor from "@/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue";
+import { EDIT, VIEW } from "@/arches_lingo/constants.ts";
+
+const { mode = VIEW } = defineProps<{
+    mode?: DataComponentMode;
+    value?: ControlledListItem | ControlledListItem[];
+    multiValue?: string;
+    options?: ControlledListItem[];
+}>();
+const emits = defineEmits(["update"]);
+const onUpdate = (val: ControlledListItem) => {
+    emits("update", val);
+};
+</script>
+<template>
+    <div>
+        <div v-if="mode === VIEW">
+            <ReferenceDatatypeViewer :value="value" />
+        </div>
+        <div v-if="mode === EDIT && multiValue === '1'">
+            <ReferenceDatatypeEditor
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+        <div v-if="mode === EDIT && multiValue === 'n'">
+            <ReferenceDatatypeListEditor
+                :value="value"
+                @update="onUpdate"
+            />
+        </div>
+    </div>
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
new file mode 100644
index 00000000..1ff3fb0e
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeEditor.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+// import { computed, inject, toRef } from "vue";
+import { computed, toRef } from "vue";
+import Select from "primevue/select";
+// import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+// import { systemLanguageKey } from "@/arches_references/constants.ts";
+
+import type { ControlledListItem } from "@/arches_lingo/types";
+// import type { Language } from "@/arches_vue_utils/types.ts";
+
+// const systemLanguage = inject(systemLanguageKey) as Language;
+
+const props = withDefaults(
+    defineProps<{
+        val?: ControlledListItem;
+        options?: ControlledListItem[];
+    }>(),
+    {
+        options: () => [],
+    },
+);
+
+console.log(props);
+
+const emit = defineEmits(["update"]);
+const valRef = toRef(props, "val");
+const value = computed({
+    get() {
+        return valRef.value;
+    },
+    set(value) {
+        emit("update", value);
+    },
+});
+// const getOptionLabels = (value) => {
+//     return getItemLabel(value, selectedLanguage.value.code, systemLanguage.code)
+//         .value;
+// };
+// :optionLabel="getOptionLabels"
+</script>
+<template>
+    <Select
+        v-model="value"
+        :show-toggle-all="!!options?.length"
+        :options
+        :pt="{
+            emptyMessage: { style: { fontFamily: 'sans-serif' } },
+            option: { style: { fontFamily: 'sans-serif' } },
+        }"
+        :placeholder="$gettext('Select References')"
+    />
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue
new file mode 100644
index 00000000..c9e0228e
--- /dev/null
+++ b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeListEditor.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, toRef } from "vue";
+import MultiSelect from "primevue/multiselect";
+// import { getItemLabel } from "@/arches_vue_utils/utils.ts";
+
+import type { ControlledListItem } from "@/arches_lingo/types";
+
+const props = withDefaults(
+    defineProps<{
+        val?: ControlledListItem;
+        options?: ControlledListItem[];
+    }>(),
+    {
+        options: () => [],
+    },
+);
+
+const emit = defineEmits(["update"]);
+
+const valRef = toRef(props, "val");
+
+const value = computed({
+    get() {
+        return valRef.value;
+    },
+    set(value) {
+        emit("update", value);
+    },
+});
+// const getOptionLabels = (option: ControlledListItem) => {
+//     return getItemLabel(option);
+// };
+// :option-label="getOptionLabels"
+</script>
+<template>
+    <MultiSelect
+        v-model="value"
+        :show-toggle-all="!!options?.length"
+        :options
+        :pt="{
+            emptyMessage: { style: { fontFamily: 'sans-serif' } },
+            option: { style: { fontFamily: 'sans-serif' } },
+        }"
+        :placeholder="$gettext('Select References')"
+    />
+</template>
diff --git a/arches_lingo/src/arches_lingo/components/generic/controlled-list-item/ControlledListItemViewer.vue b/arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue
similarity index 100%
rename from arches_lingo/src/arches_lingo/components/generic/controlled-list-item/ControlledListItemViewer.vue
rename to arches_lingo/src/arches_lingo/components/generic/reference-datatype/ReferenceDatatypeViewer.vue
diff --git a/arches_lingo/src/arches_lingo/constants.ts b/arches_lingo/src/arches_lingo/constants.ts
index a197c2a7..287ce935 100644
--- a/arches_lingo/src/arches_lingo/constants.ts
+++ b/arches_lingo/src/arches_lingo/constants.ts
@@ -28,3 +28,5 @@ export const ENGLISH = {
     name: "English",
     scope: "system",
 };
+
+export const LANGUAGE_CONTROLLED_LIST = "55ce793b-a51a-4b25-811d-d08ea797f8c3";
diff --git a/arches_lingo/src/arches_lingo/types.ts b/arches_lingo/src/arches_lingo/types.ts
index 6021cecc..f39e2073 100644
--- a/arches_lingo/src/arches_lingo/types.ts
+++ b/arches_lingo/src/arches_lingo/types.ts
@@ -46,6 +46,7 @@ export interface ControlledListeItemLabelValue {
 }
 
 export interface ControlledListItem {
+    item_id: string;
     list_id: string;
     uri: string;
     sortorder: number;