diff --git a/app/ayanova/src/api/apimeta.js b/app/ayanova/src/api/apimeta.js
index c7fc85bf..0baaf956 100644
--- a/app/ayanova/src/api/apimeta.js
+++ b/app/ayanova/src/api/apimeta.js
@@ -5,7 +5,7 @@ export default {
   fetchAPIInfo() {
     return new Promise(function(resolve, reject) {
       //step 2: get it
-      fetch(apiUtil.APIUrl("ServerInfo"), apiUtil.fetch())
+      fetch(apiUtil.APIUrl("ServerInfo"), apiUtil.fetchGetOptions())
         .then(apiUtil.status)
         .then(apiUtil.json)
         .then(response => {
diff --git a/app/ayanova/src/components/widgetlist.vue b/app/ayanova/src/components/widgetlist.vue
index 2d4aa39c..e2674762 100644
--- a/app/ayanova/src/components/widgetlist.vue
+++ b/app/ayanova/src/components/widgetlist.vue
@@ -1,30 +1,84 @@
 <template>
-  <v-flex xs12 md4>
-    <v-data-table
-      v-model="selected"
-      :headers="headers"
-      :items="Items"
-      item-key="id"
-      :pagination.sync="pagination"
-      :total-items="totalItems"
-      :loading="loading"
-      class="elevation-1"
-      select-all
-    >
-      <template slot="items" slot-scope="props">
-        <td>
-          <v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
-        </td>
-        <td>
-          <div style="width:200px;">{{ props.item.name }}</div>
-        </td>
-        <td class="text-xs-left">{{ props.item.serial }}</td>
-        <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
-        <td class="text-xs-left">{{ props.item.active }}</td>
-        <td class="text-xs-left">{{ props.item.roles }}</td>
-        <td class="text-xs-left">{{ props.item.startDate }}</td>
-      </template>
-    </v-data-table>
+  <v-flex xs12 md12>
+    <div>
+      <v-toolbar flat color="white">
+        <v-toolbar-title>Widgets</v-toolbar-title>
+        <v-divider class="mx-2" inset vertical></v-divider>
+        <v-spacer></v-spacer>
+        <v-dialog v-model="dialog" max-width="500px">
+          <v-btn slot="activator" icon large dark class="mb-2">
+            <v-icon large color="secondary">fa-plus-circle</v-icon>
+          </v-btn>
+          <v-card>
+            <v-card-title>
+              <span class="headline">{{ formTitle }}</span>
+            </v-card-title>
+            <v-card-text>
+              <v-container grid-list-md>
+                <v-layout wrap="">
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.name" label="Name"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.serial" label="Serial"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.dollarAmount" label="Price"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.active" label="Active"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.roles" label="Roles"></v-text-field>
+                  </v-flex>
+                  <v-flex xs12 sm6 md4>
+                    <v-text-field v-model="editedItem.startDate" label="Start date"></v-text-field>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn icon large dark @click="close">
+                <v-icon large color="secondary">fa-plus-circle</v-icon>
+              </v-btn>
+              <v-btn icon large dark @click="save">
+                <v-icon large color="secondary">fa-plus-circle</v-icon>
+              </v-btn>
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-toolbar>
+      <v-data-table
+        v-model="selected"
+        :headers="headers"
+        :items="Items"
+        item-key="id"
+        :pagination.sync="pagination"
+        :total-items="totalItems"
+        :loading="loading"
+        class="elevation-1"
+        select-all
+      >
+        <template slot="items" slot-scope="props">
+          <td>
+            <v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
+          </td>
+          <td>
+            <div style="width:200px;">{{ props.item.name }}</div>
+          </td>
+          <td class="text-xs-left">{{ props.item.serial }}</td>
+          <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
+          <td class="text-xs-left">{{ props.item.active }}</td>
+          <td class="text-xs-left">{{ props.item.roles }}</td>
+          <td class="text-xs-left">{{ props.item.startDate }}</td>
+          <td class="justify-center layout px-0">
+            <v-icon small class="mr-3" @click="editItem(props.item)">fa-pencil-alt</v-icon>
+            <v-icon small class="mr-3" @click="deleteItem(props.item)">fa-trash-alt</v-icon>
+          </td>
+        </template>
+      </v-data-table>
+    </div>
   </v-flex>
 </template>
 
@@ -35,6 +89,24 @@ import pagedList from "../api/pagedlist";
 export default {
   data() {
     return {
+      dialog: false,
+      editedIndex: -1,
+      editedItem: {
+        name: "",
+        serial: 0,
+        dollarAmount: 0,
+        active: true,
+        roles: 0,
+        startDate: undefined
+      },
+      defaultItem: {
+        name: "",
+        serial: 0,
+        dollarAmount: 0,
+        active: true,
+        roles: 0,
+        startDate: new Date()
+      },
       totalItems: 0,
       Items: [],
       loading: true,
@@ -73,6 +145,11 @@ export default {
   mounted() {
     this.getDataFromApi();
   },
+  computed: {
+    formTitle() {
+      return this.editedIndex === -1 ? "New Item" : "Edit Item";
+    }
+  },
   methods: {
     toggleAll() {
       if (this.selected.length) this.selected = [];
@@ -97,6 +174,35 @@ export default {
         this.Items = res.data;
         this.totalItems = res.paging.count;
       });
+    },
+
+    editItem(item) {
+      this.editedIndex = this.Items.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.dialog = true;
+    },
+
+    deleteItem(item) {
+      const index = this.desserts.indexOf(item);
+      confirm("Are you sure you want to delete this item?") &&
+        this.desserts.splice(index, 1);
+    },
+
+    close() {
+      this.dialog = false;
+      setTimeout(() => {
+        this.editedItem = Object.assign({}, this.defaultItem);
+        this.editedIndex = -1;
+      }, 300);
+    },
+
+    save() {
+      if (this.editedIndex > -1) {
+        Object.assign(this.desserts[this.editedIndex], this.editedItem);
+      } else {
+        this.desserts.push(this.editedItem);
+      }
+      this.close();
     }
   }
 };
diff --git a/devdocs/todo.txt b/devdocs/todo.txt
index 9184ed5c..7093e5e3 100644
--- a/devdocs/todo.txt
+++ b/devdocs/todo.txt
@@ -7,17 +7,18 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
 
 	- Make the following widgets for small screen, drag out size and see what can be done to benefit medium+ sizes, so two sizes for now
 	- Just get basic Functionality working then iterate rather than trying to plabn out everything at once!!
+	- Mockup filter popup dialog or filter in place near header with expansion thing
+	- Edit dialog or edit in place?
 
-	- Widget list component that works with real data
-		- https://vuetifyjs.com/en/components/data-tables#example-server
-		- Displays as a smaller item with maybe a count of widgets only that is expandable into a list of widgets
-		- paging, sorting, filtering (by tag), items per page
+	- Widget list component that works with real data	
+		- paging, sorting, filtering (columns and by tag), items per page
+			- Single column sorting only
 			- Filter by popup dialog
 				- generic dialog that accepts a object specifying column names and types and builds a UI with the options on it 
 				- when applied it saves it as an object that is sent up to the server for each column sorted on in query string
 				- Server list needs to accept those options and sort accordingly.
-					- are we getting into huge territory needing more advanced utility at server?
-			- Saved as a whole grid component? or Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
+					- are we getting into huge territory needing more advanced utility at server for querying from client?
+			- Saved filter as a whole grid component? or Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)
 				or both saveable as a pick item from teh main or as a whole preset grid widget? TIME TO MARKET!!!
 		- Each item can be edited if they have the rights or viewed etc by opening into crud component
 			- List should remember where the user was when they go to edit and back again