diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
index b33e2c00..4818ebd3 100644
--- a/ayanova/src/components/work-order-state.vue
+++ b/ayanova/src/components/work-order-state.vue
@@ -15,7 +15,7 @@
     </template>
 
     <template v-if="canAdd">
-      <div class="xmt-5">
+      <div>
         <v-autocomplete
           v-model="selectedStatus"
           :items="pvm.selectLists.allowedwostatus"
@@ -23,6 +23,7 @@
           item-value="id"
           append-outer-icon="$ayiPlus"
           @click:append-outer="addState()"
+          dense
         >
           <template v-slot:item="data">
             <v-list-item-avatar>
@@ -63,9 +64,7 @@
     Also a button to show more info which pops up a dialog showing the entire state history in a data table 
 
     TODO: POC for now don't worry about rights to unset / set certain states, just hook it up for testing
-    todo: show completing states with a checkmark icon, show locking states with a lock icon
-    todo: show states in color as selected (but in some way that is contrasting to avoid invisibility)
-    todo: show current state separate from selection box, selection box only shows available to user states
+   
     todo: it must be clear to user why they can not change if they have too low a role to change, perhaps text under state instead of selector box that says "Only select roles can change this state"
 
     -->
@@ -99,7 +98,14 @@ export default {
 
   methods: {
     addState() {
-      console.log("ADD STATE");
+      if (this.selectedStatus != null) {
+        this.value.states.push({
+          workOrderStatusId: this.selectedStatus,
+          userId: window.$gz.store.state.userId,
+          created: window.$gz.locale.nowUTC8601String()
+        });
+        this.pvm.formState.dirty = true;
+      }
     },
     form() {
       return window.$gz.form;