diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 6ea57a2a..465c50b7 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -55,11 +55,14 @@ todo: v8 migrate additions
 
 ## CLIENT MISC ITEMS
 
-todo: be sure top address items in case https://rockfish.ayanova.com/default.htm#!/rfcaseEdit/3864 
+todo: be sure to address items in case https://rockfish.ayanova.com/default.htm#!/rfcaseEdit/3864 
 	before next update to server / windows build for Joyce
 
 todo: Re-test reporting on linux, just updated puppeteer sharp and it might be affected due to newer chromium
 
+todo: double check main page boilerplate stuff is up to date 2021
+	https://www.matuzo.at/blog/html-boilerplate/
+
 todo: REPORTING
 	naming of things is confusing possibly prepare code should use same names as ayreportdata etc so users aren't confused
 	also it should be named to indicate the server is modifying the data before it's sent to the template
diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
index d7be0524..11812654 100644
--- a/ayanova/src/components/work-order-state.vue
+++ b/ayanova/src/components/work-order-state.vue
@@ -25,10 +25,70 @@
       <v-dialog v-model="openDialog" max-width="600px">
         <v-card>
           <v-card-title>
-            <span class="headline">title</span>
+            <span class="headline">{{ $ay.t("WorkOrderStatus") }}</span>
           </v-card-title>
           <v-card-text>
-            card text
+            {{ value.states }}
+            <!-- <v-list>
+              <v-list-item
+                v-for="item in reportList"
+                :key="item.id"
+                @click="renderReport(item.id)"
+              >
+                <v-list-item-title>{{ item.name }}</v-list-item-title>
+                <v-list-item-action>
+                  <v-btn icon @click.stop="editReport(item.id)">
+                    <v-icon color="primary">$ayiEdit</v-icon>
+                  </v-btn>
+                </v-list-item-action>
+              </v-list-item>
+            </v-list> -->
+
+            <template v-if="canAdd">
+              <div>
+                <v-autocomplete
+                  v-model="selectedStatus"
+                  :items="pvm.selectLists.allowedwostatus"
+                  item-text="name"
+                  item-value="id"
+                  append-outer-icon="$ayiPlus"
+                  @click:append-outer="addState()"
+                  dense
+                >
+                  <template v-slot:item="data">
+                    <v-list-item-avatar>
+                      <v-icon :color="data.item.color">$ayiFlag</v-icon>
+                    </v-list-item-avatar>
+                    <v-list-item-content>
+                      <v-list-item-title
+                        ><span class="text-subtitle-2">{{
+                          data.item.name
+                        }}</span
+                        ><v-icon
+                          small
+                          color="disabled"
+                          class="ml-2"
+                          v-if="data.item.locked"
+                          >$ayiLock</v-icon
+                        >
+                        <v-icon
+                          color="disabled"
+                          class="ml-1"
+                          small
+                          v-if="data.item.completed"
+                          >$ayiCheckCircle</v-icon
+                        ></v-list-item-title
+                      >
+
+                      <v-list-item-subtitle>
+                        {{ data.item.notes }}</v-list-item-subtitle
+                      >
+                    </v-list-item-content>
+                    <v-list-item-action> </v-list-item-action>
+                  </template>
+                </v-autocomplete>
+              </div>
+            </template>
             <!-- <v-select
               v-model="moveType"
               :items="selectLists.objectTypes"