diff --git a/deploy/traction/values-development.yaml b/deploy/traction/values-development.yaml
index 4f2ee6fb8..c744d2db0 100644
--- a/deploy/traction/values-development.yaml
+++ b/deploy/traction/values-development.yaml
@@ -94,8 +94,8 @@ ui:
       showMessage: true
   oidc:
     active: true
-    authority: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm
-    jwksUri: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm/protocol/openid-connect/certs
+    authority: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz
+    jwksUri: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz/protocol/openid-connect/certs
     reservationForm: >-
       {
         "formDataSchema": {
diff --git a/deploy/traction/values-pr.yaml b/deploy/traction/values-pr.yaml
index 654662cdf..9d2ff097e 100644
--- a/deploy/traction/values-pr.yaml
+++ b/deploy/traction/values-pr.yaml
@@ -85,8 +85,8 @@ ui:
       showMessage: true
   oidc:
     active: true
-    authority: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm
-    jwksUri: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm/protocol/openid-connect/certs
+    authority: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz
+    jwksUri: https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz/protocol/openid-connect/certs
     reservationForm: >-
       {
         "formDataSchema": {
diff --git a/services/tenant-ui/config/default.json b/services/tenant-ui/config/default.json
index 034f72a7a..e21b49d96 100644
--- a/services/tenant-ui/config/default.json
+++ b/services/tenant-ui/config/default.json
@@ -15,7 +15,7 @@
     },
     "oidc": {
       "active": false,
-      "authority": "https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm",
+      "authority": "https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz",
       "client": "innkeeper-frontend",
       "label": "IDIR"
     },
@@ -53,8 +53,8 @@
     "staticFiles": "../../frontend/dist",
     "tractionUrl": "http://localhost:5100",
     "oidc": {
-      "jwksUri": "https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm/protocol/openid-connect/certs",
-      "realm": "digitaltrust-nrm",
+      "jwksUri": "https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz/protocol/openid-connect/certs",
+      "realm": "digitaltrust-citz",
       "roleName": "innkeeper"
     },
     "innkeeper": {
diff --git a/services/tenant-ui/frontend/src/components/common/ToggleJson.vue b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
new file mode 100644
index 000000000..35bc5a85d
--- /dev/null
+++ b/services/tenant-ui/frontend/src/components/common/ToggleJson.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="mt-2">
+    <div class="flex justify-content-end">
+      {{ $t('common.json') }}
+      <InputSwitch v-model="showRawJson" class="ml-1" @input="toggleJson" />
+    </div>
+    <div v-show="!showRawJson">
+      <slot></slot>
+    </div>
+    <div v-show="showRawJson">
+      <Textarea
+        id="credentialValuesEdit"
+        v-model="valuesJson"
+        :auto-resize="true"
+        rows="20"
+        cols="60"
+        class="w-full mt-1"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+// Libraries
+import { ref, defineExpose } from 'vue';
+// Source
+import InputSwitch from 'primevue/inputswitch';
+import Textarea from 'primevue/textarea';
+
+const showRawJson = ref<boolean>(false);
+const valuesJson = ref<string>('');
+
+// Undefined indicates that the conversion was a failure
+// note that indication of the error should be handled in the
+// toJson and fromJson using libraries like vue-toastification
+const props = defineProps<{
+  toJson: () => string | undefined;
+  fromJson: (jsonRepresentation: string) => T | undefined;
+}>();
+
+defineExpose({
+  showRawJson,
+  valuesJson,
+});
+
+const toggleJson = () => {
+  if (showRawJson.value) {
+    const res = props.toJson();
+    if (res) {
+      valuesJson.value = res;
+    } else {
+      showRawJson.value = !showRawJson.value;
+    }
+  } else {
+    if (!props.fromJson(valuesJson.value)) {
+      showRawJson.value = !showRawJson.value;
+    }
+  }
+};
+</script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
index 0ac7a0408..507611d52 100644
--- a/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/credentials/EnterCredentialValues.vue
@@ -11,43 +11,13 @@
   </div>
 
   <div class="field mt-5">
-    <!-- Label/toggle -->
-    <div class="flex justify-content-between">
-      <div class="flex justify-content-start">
-        <label for="credentialValuesEdit">
-          <strong>{{ $t('issue.credentialFieldValues') }}</strong>
-        </label>
-      </div>
-      <div class="flex justify-content-end">
-        {{ $t('common.json') }}
-        <InputSwitch v-model="showRawJson" class="ml-1" @input="toggleJson" />
-      </div>
-    </div>
-
-    <!-- Raw JSON input mode -->
-    <div v-show="showRawJson">
-      <Textarea
-        id="credentialValuesEdit"
-        v-model="credentialValuesJson"
-        :auto-resize="true"
-        rows="20"
-        cols="60"
-        class="w-full mt-1"
-      />
-
-      <div class="flex justify-content-end">
-        <small>
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
-          <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-          {{ $t('issue.version') }}:
-          {{ schemaForSelectedCred.schema.version }}
-        </small>
-      </div>
-    </div>
-
-    <!-- Dynamic Attribute field list -->
-    <div v-show="!showRawJson">
+    <ToggleJson
+      ref="jsonVal"
+      :to-json="credentialValueToJson"
+      :from-json="jsonToCredentialValue"
+      generic="CredentialValue[]"
+    >
+      <!-- Dynamic Attribute field list -->
       <div
         v-for="(item, index) in credentialValuesRaw"
         :key="item.name"
@@ -62,8 +32,16 @@
           class="w-full"
         />
       </div>
+    </ToggleJson>
+    <div class="flex justify-content-end">
+      <small>
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        {{ $t('issue.schema') }}: {{ schemaForSelectedCred.schema.name }}
+        <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+        {{ $t('issue.version') }}:
+        {{ schemaForSelectedCred.schema.version }}
+      </small>
     </div>
-
     <Button label="Save" class="mt-5 w-full" @click="saveCredValues" />
   </div>
 </template>
@@ -73,16 +51,20 @@
 import { onMounted, ref } from 'vue';
 // PrimeVue / Validation
 import Button from 'primevue/button';
-import InputSwitch from 'primevue/inputswitch';
 import InputText from 'primevue/inputtext';
-import Textarea from 'primevue/textarea';
 import { useToast } from 'vue-toastification';
+import { tryParseJson } from '@/helpers/jsonParsing';
+import ToggleJson from '@/components/common/ToggleJson.vue';
 
 const toast = useToast();
 
 // Props
+interface CredentialValue {
+  name: string;
+  value: string;
+}
 interface Props {
-  existingCredentialValues?: { name: string; value: string }[];
+  existingCredentialValues?: CredentialValue[];
   header: String;
   schemaForSelectedCred: any;
 }
@@ -91,58 +73,43 @@ const props = defineProps<Props>();
 const emit = defineEmits(['back', 'save']);
 
 // Fields
-const credentialValuesJson = ref('');
-const credentialValuesRaw = ref([] as { name: string; value: string }[]);
-
-const showRawJson = ref(false);
+const credentialValuesRaw = ref<CredentialValue[]>([]);
 
-// TODO: util function file
-function _tryParseJson(jsonString: string) {
-  try {
-    const o = JSON.parse(jsonString);
-    if (o && typeof o === 'object') {
-      return o;
-    }
-    return false;
-  } catch (e) {
-    return false;
-  }
-}
+const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
+  showRawJson: false,
+  valuesJson: '',
+});
 
-function _jsonToCredRaw() {
-  const parsed = _tryParseJson(credentialValuesJson.value);
+function jsonToCredentialValue(
+  jsonString: string
+): CredentialValue[] | undefined {
+  const parsed = tryParseJson<CredentialValue[]>(jsonString);
   if (parsed) {
-    credentialValuesRaw.value = JSON.parse(credentialValuesJson.value);
+    credentialValuesRaw.value = parsed;
+    return parsed;
   } else {
     toast.warning('The JSON you inputted has invalid syntax');
+    return undefined;
   }
 }
 
-const toggleJson = () => {
-  if (showRawJson.value) {
-    // Convert over to the json from what was entered on the fields
-    credentialValuesJson.value = JSON.stringify(
-      credentialValuesRaw.value,
-      undefined,
-      2
-    );
-  } else {
-    // Parse the entered JSON into fields, or ignore and warn if invalid syntax
-    _jsonToCredRaw();
-  }
-};
+function credentialValueToJson(): string | undefined {
+  // Convert over to the json from what was entered on the fields
+  const j = JSON.stringify(credentialValuesRaw.value, undefined, 2);
+  return j;
+}
 
 const saveCredValues = () => {
-  if (showRawJson.value) {
-    _jsonToCredRaw();
+  if (jsonVal.value.showRawJson) {
+    jsonToCredentialValue(jsonVal.value.valuesJson);
   }
   emit('save', credentialValuesRaw.value);
 };
 
-// Whnen the component is intialized set up the fields and raw JSON based
+// When the component is initialized set up the fields and raw JSON based
 // on the supplied schema and if there is existing values already
 onMounted(() => {
-  // Popuplate cred editor if it's not already been edited
+  // Populate cred editor if it's not already been edited
   if (!props.existingCredentialValues?.length) {
     const schemaFillIn = props.schemaForSelectedCred.schema.attrNames.map(
       (a: string) => {
@@ -158,10 +125,5 @@ onMounted(() => {
   } else {
     credentialValuesRaw.value = props.existingCredentialValues;
   }
-  credentialValuesJson.value = JSON.stringify(
-    credentialValuesRaw.value,
-    undefined,
-    2
-  );
 });
 </script>
diff --git a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
index e31864050..834ee6138 100644
--- a/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
+++ b/services/tenant-ui/frontend/src/components/issuance/schemas/CreateSchemaForm.vue
@@ -8,28 +8,38 @@
         <p style="font-weight: bold">{{ selectedSchema?.schema_id }}</p>
       </div>
       <div class="mt-2">
-        <!-- schema name -->
-        <ValidatedField
-          :placeholder="isCopy ? selectedSchema?.schema?.name : ''"
-          :field-name="'name'"
-          :label="$t('issue.schemaName')"
-          :loading="loading"
-          :submitted="submitted"
-          :validation="v$"
-          :advanced-is-error="isError"
-        />
-        <!-- schema version -->
-        <ValidatedField
-          :placeholder="isCopy ? selectedSchema?.schema?.version : ''"
-          :field-name="'version'"
-          :label="$t('issue.schemaVersion')"
-          :loading="loading"
-          :submitted="submitted"
-          :validation="v$"
-          :advanced-is-error="isError"
-        />
-        <!-- attributes -->
-        <Attributes ref="attributes" :initial-attributes="initialAttributes" />
+        <ToggleJson
+          ref="jsonVal"
+          :to-json="schemaToJson"
+          :from-json="jsonToSchema"
+          generic="SchemaSendRequest"
+        >
+          <!-- schema name -->
+          <ValidatedField
+            :placeholder="isCopy ? selectedSchema?.schema?.name : ''"
+            :field-name="'name'"
+            :label="$t('issue.schemaName')"
+            :loading="loading"
+            :submitted="submitted"
+            :validation="v$"
+            :advanced-is-error="isError"
+          />
+          <!-- schema version -->
+          <ValidatedField
+            :placeholder="isCopy ? selectedSchema?.schema?.version : ''"
+            :field-name="'version'"
+            :label="$t('issue.schemaVersion')"
+            :loading="loading"
+            :submitted="submitted"
+            :validation="v$"
+            :advanced-is-error="isError"
+          />
+          <!-- attributes -->
+          <Attributes
+            ref="attributes"
+            :initial-attributes="initialAttributes"
+          />
+        </ToggleJson>
         <Button
           type="submit"
           :label="t('configuration.schemas.create')"
@@ -54,10 +64,12 @@ import { useToast } from 'vue-toastification';
 // Source
 import ValidatedField from '@/components/common/ValidatedField.vue';
 import errorHandler from '@/helpers/errorHandler';
+import { tryParseJson } from '@/helpers/jsonParsing';
 import { useGovernanceStore } from '@/store';
 import { Attribute } from '@/types';
 import { SchemaSendRequest } from '@/types/acapyApi/acapyInterface';
 import Attributes from './Attributes.vue';
+import ToggleJson from '@/components/common/ToggleJson.vue';
 
 const toast = useToast();
 const { t } = useI18n();
@@ -66,8 +78,11 @@ const governanceStore = useGovernanceStore();
 const { loading, selectedSchema } = storeToRefs(useGovernanceStore());
 
 const emit = defineEmits(['closed', 'success']);
-const attributes = ref();
-
+const attributes = ref<{ attributes: Array<Attribute> }>({ attributes: [] });
+const jsonVal = ref<{ showRawJson: boolean; valuesJson: string }>({
+  showRawJson: false,
+  valuesJson: '',
+});
 const props = defineProps({
   isCopy: {
     type: Boolean,
@@ -155,33 +170,68 @@ if (props.isCopy) {
 
 const v$ = useVuelidate(rules, formFields);
 
+function convertToJson(): SchemaSendRequest | undefined {
+  const attributeNames = attributes.value?.attributes
+    .filter((x: Attribute) => x.name !== '')
+    .map((attribute: Attribute) => attribute.name);
+  return {
+    attributes: attributeNames ?? [],
+    schema_name: formFields.name || selectedSchema.value?.schema?.name || '',
+    schema_version:
+      formFields.version || selectedSchema.value?.schema?.version || '',
+  };
+}
+
+function schemaToJson(): string | undefined {
+  const rawJson: SchemaSendRequest | undefined = convertToJson();
+  if (rawJson) {
+    return JSON.stringify(rawJson, undefined, 2);
+  } else {
+    toast.error('Failed to convert to Json');
+    return undefined;
+  }
+}
+
+function jsonToSchema(jsonString: string): SchemaSendRequest | undefined {
+  const parsed = tryParseJson<SchemaSendRequest>(jsonString);
+  if (parsed) {
+    const newAt: Array<Attribute> = [
+      { name: '' },
+      ...parsed.attributes.map((a) => ({ name: a })),
+    ];
+    attributes.value.attributes = newAt;
+    formFields.name = parsed.schema_name;
+    formFields.version = parsed.schema_version;
+    return parsed;
+  } else {
+    toast.error('The JSON you inputted has invalid syntax');
+    return undefined;
+  }
+}
 // Form submission
 const submitted = ref(false);
 const handleSubmit = async (isFormValid: boolean) => {
   submitted.value = true;
 
-  if (!isFormValid) {
-    return;
-  }
   try {
-    const attributeNames = attributes.value?.attributes
-      .filter((x: Attribute) => x.name !== '')
-      .map((attribute: Attribute) => attribute.name);
+    if (!isFormValid) return;
+
+    const payload: SchemaSendRequest | undefined = jsonVal.value.showRawJson
+      ? jsonToSchema(jsonVal.value.valuesJson)
+      : convertToJson();
 
-    if (!attributeNames.length) {
+    if (!payload) return;
+
+    if (!payload.attributes.length) {
       toast.error(t('configuration.schemas.emptyAttributes'));
       return;
     }
 
-    const payload: SchemaSendRequest = {
-      attributes: attributeNames,
-      schema_name: formFields.name || selectedSchema.value?.schema?.name || '',
-      schema_version:
-        formFields.version || selectedSchema.value?.schema?.version || '',
-    };
-
-    await governanceStore.createSchema(payload);
-
+    if (payload) {
+      await governanceStore.createSchema(payload);
+    } else {
+      return;
+    }
     toast.success(t('configuration.schemas.postStart'));
     emit('success');
     emit('closed', payload);
diff --git a/services/tenant-ui/frontend/src/helpers/jsonParsing.ts b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
new file mode 100644
index 000000000..07878fe34
--- /dev/null
+++ b/services/tenant-ui/frontend/src/helpers/jsonParsing.ts
@@ -0,0 +1,11 @@
+export function tryParseJson<T>(jsonString: string): T | undefined {
+  try {
+    const o = JSON.parse(jsonString);
+    if (o && typeof o === 'object') {
+      return o;
+    }
+    return undefined;
+  } catch (e) {
+    return undefined;
+  }
+}
diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
index a7b923c00..6307672a9 100644
--- a/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
+++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/en.json
@@ -551,4 +551,4 @@
     "verification": "Verification",
     "verifications": "Verifications"
   }
-}
\ No newline at end of file
+}
diff --git a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
index 5308346c7..9c72863a7 100644
--- a/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
+++ b/services/tenant-ui/frontend/src/plugins/i18n/locales/fr.json
@@ -555,4 +555,4 @@
     },
     "tractionProxy": "Traction Proxy URL: <FR>"
   }
-}
\ No newline at end of file
+}
diff --git a/services/tenant-ui/frontend/test/__mocks__/api/responses/config.ts b/services/tenant-ui/frontend/test/__mocks__/api/responses/config.ts
index 3f69ede07..cdf5391aa 100644
--- a/services/tenant-ui/frontend/test/__mocks__/api/responses/config.ts
+++ b/services/tenant-ui/frontend/test/__mocks__/api/responses/config.ts
@@ -9,7 +9,7 @@ const config = {
     oidc: {
       active: false,
       authority:
-        'https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-nrm',
+        'https://dev.loginproxy.gov.bc.ca/auth/realms/digitaltrust-citz',
       client: 'innkeeper-frontend',
       label: 'IDIR',
     },
diff --git a/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
new file mode 100644
index 000000000..57a660dc3
--- /dev/null
+++ b/services/tenant-ui/frontend/test/components/common/ToggleJson.test.ts
@@ -0,0 +1,59 @@
+import CreateSchema from '@/components/issuance/schemas/CreateSchema.vue';
+import { shallowMount, mount, flushPromises } from '@vue/test-utils';
+import PrimeVue from 'primevue/config';
+import { describe, expect, test, vi } from 'vitest';
+import VueToastificationPlugin from 'vue-toastification';
+import { tryParseJson } from '@/helpers/jsonParsing';
+
+import ToggleJson from '@/components/common/ToggleJson.vue';
+
+const mountToggleJson = () =>
+  shallowMount(ToggleJson, {
+    props: {
+      toJson: () => {
+        return "{ 'testing': 1 }";
+      },
+      fromJson: (jsonRepresentation: string) => {
+        return tryParseJson<any>(jsonRepresentation);
+      },
+    },
+    slots: {
+      default: [CreateSchema, '<my-component />', 'text'],
+    },
+    global: {
+      plugins: [PrimeVue, VueToastificationPlugin],
+    },
+  });
+
+describe('Properly Toggle Json Input', () => {
+  test('reders properly', async () => {
+    const wrapper = mountToggleJson();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+  test('text area is only shown after input is toggled', async () => {
+    const wrapper = mountToggleJson();
+    const wrapperVm = wrapper.vm as any;
+    const toJson = vi.spyOn(wrapperVm.props, 'toJson');
+    const fromJson = vi.spyOn(wrapperVm.props, 'fromJson');
+
+    expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(false);
+    // showRawJson;
+    expect(wrapper.findComponent({ name: 'InputSwitch' }).exists()).toBe(true);
+
+    expect(wrapper.findComponent({ name: 'CreateSchema' }).exists()).toBe(true);
+    wrapperVm.showRawJson = true;
+    await wrapperVm.toggleJson();
+
+    await flushPromises();
+
+    wrapperVm.showRawJson = false;
+    await wrapperVm.toggleJson();
+
+    await flushPromises();
+
+    expect(wrapper.findComponent({ name: 'Textarea' }).isVisible()).toBe(true);
+    expect(toJson).toHaveBeenCalled();
+    expect(fromJson).toHaveBeenCalled();
+  });
+});