diff --git a/ayanova/src/api/errorhandler.js b/ayanova/src/api/errorhandler.js
index 622f9654..5ef357d3 100644
--- a/ayanova/src/api/errorhandler.js
+++ b/ayanova/src/api/errorhandler.js
@@ -30,7 +30,7 @@ function dealWithError(msg, vm) {
       "DEV ERROR errorHandler::devShowUnknownError - unexpected error: \r\n" +
       msg;
     // eslint-disable-next-line no-console
-    console.Error(errMsg);
+    console.error(errMsg);
     console.trace();
     debugger;
     window.$gz.eventBus.$emit("notify-error", "Dev error see log / console");
diff --git a/ayanova/src/api/gzapi.js b/ayanova/src/api/gzapi.js
index 47f86e24..3bfc044d 100644
--- a/ayanova/src/api/gzapi.js
+++ b/ayanova/src/api/gzapi.js
@@ -24,7 +24,7 @@ function stringifyPrimitive(v) {
 function devShowUnknownError(error) {
   if (window.$gz.errorHandler.devMode) {
     // eslint-disable-next-line
-    console.Error("gzapi::devShowUnknownError, error is:", error);
+    console.error("gzapi::devShowUnknownError, error is:", error);
 
     console.trace();
     debugger;
diff --git a/ayanova/src/views/home-user-settings.vue b/ayanova/src/views/home-user-settings.vue
index 6f67a6f3..e5ff289d 100644
--- a/ayanova/src/views/home-user-settings.vue
+++ b/ayanova/src/views/home-user-settings.vue
@@ -1,27 +1,385 @@
 <template>
-  <div>
-    User's preferred languages:
-    {{ userLanguage }}
-  </div>
+  <v-container>
+    <v-row v-if="formState.ready">
+      <v-col>
+        <v-form ref="form">
+          <v-row>
+            <v-col cols="12" mt-1 mb-2>
+              <v-alert
+                ref="errorbox"
+                v-show="formState.errorBoxMessage"
+                color="error"
+                icon="fa-exclamation-circle "
+                transition="scale-transition"
+                class="multi-line"
+                outlined
+                >{{ formState.errorBoxMessage }}</v-alert
+              >
+            </v-col>
+            FIELDS HERE
+          </v-row>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
-import UnderConstruction from "../components/underconstruction.vue";
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  Xeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+// import UnderConstruction from "../components/underconstruction.vue";
+
+// export default {
+//   data() {
+//     return {
+//       userLanguage: window.$gz.locale.getBrowserLanguages()
+//     };
+//   },
+//   components: {},
+//   beforeCreate() {
+//     window.$gz.eventBus.$emit("menu-change", {
+//       isMain: true,
+//       icon: "user-cog",
+//       title: window.$gz.locale.get("UserSettings"),
+//       helpUrl: "form-home-user-settings"
+//     });
+//   }
+// };
+const FORM_KEY = "home-user-settings";
+const API_BASE_URL = "Useroptions/";
+const FORM_CUSTOM_TEMPLATE_KEY = "Useroptions";
 
 export default {
-  data() {
-    return {
-      userLanguage: window.$gz.locale.getBrowserLanguages()
-    };
+  created() {
+    var vm = this;
+    initForm(vm)
+      .then(() => {
+        vm.rights = window.$gz.role.getRights(window.$gz.type.UserOptions);
+        vm.formState.ready = true;
+        window.$gz.eventBus.$on("menu-click", clickHandler);
+        //UserOptions never creates a new one so this code is a little different than other forms
+        //id 0 means create a new record don't load one
+        if (vm.$route.params.recordid != 0) {
+          vm.getDataFromApi(vm.$route.params.recordid);
+        } else {
+          throw "home-user-settings:created() - recordId is zero which is not valid for this type of object";
+        }
+      })
+      .catch(err => {
+        vm.formState.ready = true;
+        window.$gz.errorHandler.handleFormError(err, vm);
+      });
+  },
+  beforeRouteUpdate(to, from, next) {
+    //This triggers a fetch of the data when the ID value changes on the route
+    //which happens on duplicate, submit new record and change of active record id (backward nav/forward nav etc)
+    if (to.params.recordid != 0) {
+      this.getDataFromApi(to.params.recordid);
+    }
+    next();
+    // react to route changes...
+    // don't forget to call next()
+  },
+  beforeRouteLeave(to, from, next) {
+    if (this.formState.dirty) {
+      window.$gz.dialog.confirmLeaveUnsaved().then(dialogResult => {
+        if (dialogResult == true) {
+          next();
+        } else {
+          next(false);
+        }
+      });
+    } else {
+      next();
+    }
+  },
+  beforeDestroy() {
+    window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   components: {},
-  beforeCreate() {
-    window.$gz.eventBus.$emit("menu-change", {
-      isMain: true,
-      icon: "user-cog",
-      title: window.$gz.locale.get("UserSettings"),
-      helpUrl: "form-home-user-settings"
-    });
+  data() {
+    return {
+      formCustomTemplateKey: FORM_CUSTOM_TEMPLATE_KEY,
+      // pickLists: {
+      //   usertypes: []
+      // },
+      obj: {
+        /* //-------------
+        [EmailAddress]
+        public string EmailAddress { get; set; }
+     
+    
+     [MaxLength(12)]
+        public string UiColor { get; set; }
+
+        //browser forced overrides
+        public string LanguageOverride { get; set; }
+        public string TimeZoneOverride { get; set; }
+        public string CurrencyName { get; set; }
+        public bool Hour12 { get; set; } */
+
+        id: 0,
+        concurrencyToken: 0,
+        emailAddress: null,
+        uiColor: null,
+        languageOverride: null,
+        timeZoneOverride: null,
+        currencName: null,
+        hour12: null
+      },
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true,
+        errorBoxMessage: null,
+        appError: null,
+        serverError: {}
+      },
+      rights: window.$gz.role.defaultRightsObject()
+    };
+  },
+  //WATCHERS
+  watch: {
+    formState: {
+      handler: function(val) {
+        //,oldval is available here too if necessary
+        if (this.formState.loading) {
+          return;
+        }
+
+        //enable / disable save button
+        var canSave = val.dirty && val.valid && !val.readOnly;
+        if (canSave) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
+  methods: {
+    lt(ltKey) {
+      return window.$gz.locale.get(ltKey);
+    },
+    locale() {
+      return window.$gz.locale;
+    },
+    form() {
+      return window.$gz.form;
+    },
+    onChange(ref) {
+      if (!this.formState.loading && !this.formState.readOnly) {
+        window.$gz.form.onChange(this, ref);
+      }
+    },
+    getDataFromApi(recordId) {
+      var vm = this;
+      vm.formState.loading = true;
+      if (!recordId) {
+        throw FORM_KEY + "::getDataFromApi -> Missing recordID!";
+      }
+      var url = API_BASE_URL + recordId;
+
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+
+      window.$gz.api
+        .get(url)
+        .then(res => {
+          if (res.error != undefined) {
+            //Not found?
+            if (res.error.code == "2010") {
+              //notify not found error then navigate backwards
+              window.$gz.dialog
+                .displayLTErrorMessage("ErrorAPI2010")
+                .then(() => {
+                  // navigate backwards
+                  vm.$router.go(-1);
+                });
+            }
+            vm.formState.serverError = res.error;
+            window.$gz.form.setErrorBoxErrors(vm);
+          } else {
+            vm.obj = res.data;
+
+            //Update the form status
+            window.$gz.form.setFormState({
+              vm: vm,
+              dirty: false,
+              valid: true,
+              loading: false,
+              readOnly: res.readOnly ? true : false
+            });
+            //modify the menu as necessary
+            generateMenu(vm, res.readOnly);
+          }
+        })
+        .catch(function handleGetDataFromAPIError(error) {
+          //Update the form status
+          window.$gz.form.setFormState({
+            vm: vm,
+            loading: false
+          });
+          window.$gz.errorHandler.handleFormError(error, vm);
+        });
+    },
+    submit() {
+      var vm = this;
+      if (vm.canSave) {
+        vm.formState.loading = true;
+
+        var url = API_BASE_URL + vm.$route.params.recordid;
+
+        //clear any errors vm might be around from previous submit
+        window.$gz.form.deleteAllErrorBoxErrors(vm);
+        window.$gz.api
+          .upsert(url, vm.obj)
+          .then(res => {
+            vm.formState.loading = false;
+            if (res.error != undefined) {
+              vm.formState.serverError = res.error;
+              window.$gz.form.setErrorBoxErrors(vm);
+            } else {
+              //UserOptions is never a POST as it always exists and can't be deleted so always a PUT
+
+              //Handle "put" of an existing record (UPDATE)
+              vm.obj.concurrencyToken = res.data.concurrencyToken;
+              window.$gz.form.setFormState({
+                vm: vm,
+                dirty: false
+              });
+            }
+          })
+          .catch(function handleSubmitError(error) {
+            vm.formState.loading = false;
+            window.$gz.errorHandler.handleFormError(error, vm);
+          });
+      }
+    }
   }
 };
+
+/////////////////////////////
+//
+//
+function clickHandler(menuItem) {
+  if (!menuItem) {
+    return;
+  }
+  var m = window.$gz.menu.parseMenuItem(menuItem);
+  if (m.owner == FORM_KEY && !m.disabled) {
+    switch (m.key) {
+      case "save":
+        m.vm.submit();
+        break;
+
+      default:
+        window.$gz.eventBus.$emit(
+          "notify-warning",
+          FORM_KEY + "::context click: [" + m.key + "]"
+        );
+    }
+  }
+}
+
+//////////////////////
+//
+//
+function generateMenu(vm) {
+  var menuOptions = {
+    isMain: true,
+    icon: "user-cog",
+    title: window.$gz.locale.get("UserSettings"),
+    helpUrl: "form-home-user-settings",
+    formData: {
+      formKey: FORM_KEY,
+      ayaType: window.$gz.type.UserOptions
+    },
+    menuItems: []
+  };
+
+  if (vm.rights.change) {
+    menuOptions.menuItems.push({
+      title: window.$gz.locale.get("Save"),
+      icon: "save",
+      surface: true,
+      key: FORM_KEY + ":save",
+      vm: vm
+    });
+  }
+
+  window.$gz.eventBus.$emit("menu-change", menuOptions);
+}
+
+/////////////////////////////////
+//
+//
+function initForm(vm) {
+  return new Promise(function(resolve, reject) {
+    (async function() {
+      try {
+        await fetchUILocalizedText(vm);
+        await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY);
+        await populatePickLists(vm);
+      } catch (err) {
+        reject(err);
+      }
+      resolve();
+    })();
+  });
+}
+
+//////////////////////////////////////////////////////////
+//
+// Ensures UI localized text is available
+//
+function fetchUILocalizedText(vm) {
+  return window.$gz.locale.fetch([
+    "Widget",
+    "WidgetName",
+    "WidgetSerial",
+    "WidgetDollarAmount",
+    "WidgetCount",
+    "WidgetUserType",
+    "WidgetStartDate",
+    "WidgetEndDate",
+    "WidgetNotes",
+    "WidgetCustom1",
+    "WidgetCustom2",
+    "WidgetCustom3",
+    "WidgetCustom4",
+    "WidgetCustom5",
+    "WidgetCustom6",
+    "WidgetCustom7",
+    "WidgetCustom8",
+    "WidgetCustom9",
+    "WidgetCustom10",
+    "WidgetCustom11",
+    "WidgetCustom12",
+    "WidgetCustom13",
+    "WidgetCustom14",
+    "WidgetCustom15",
+    "WidgetCustom16"
+  ]);
+}
+
+//////////////////////
+//
+//
+function populatePickLists(vm) {
+  //ensure the pick lists required are pre-fetched
+  return window.$gz.enums.fetchEnumList("usertype").then(() => {
+    vm.pickLists.usertypes = window.$gz.enums.getPickList("usertype");
+  });
+}
 </script>
+
+<style></style>