diff --git a/app/ayanova/src/api/apiutil.js b/app/ayanova/src/api/apiutil.js
index 123eea22..e079acad 100644
--- a/app/ayanova/src/api/apiutil.js
+++ b/app/ayanova/src/api/apiutil.js
@@ -1,6 +1,22 @@
 /* Xeslint-disable */
 import store from "../store";
 
+var stringifyPrimitive = function(v) {
+  switch (typeof v) {
+    case "string":
+      return v;
+
+    case "boolean":
+      return v ? "true" : "false";
+
+    case "number":
+      return isFinite(v) ? v : "";
+
+    default:
+      return "";
+  }
+};
+
 export default {
   status(response) {
     if (response.status >= 200 && response.status < 300) {
@@ -34,7 +50,7 @@ export default {
       "Content-Type": "application/json"
     };
   },
-  fetchPostNoAuth(data) {
+  fetchPostNoAuthOptions(data) {
     return {
       method: "post",
       mode: "cors",
@@ -42,7 +58,7 @@ export default {
       body: JSON.stringify(data)
     };
   },
-  fetchPost(data) {
+  fetchPostOptions(data) {
     return {
       method: "post",
       mode: "cors",
@@ -50,7 +66,7 @@ export default {
       body: JSON.stringify(data)
     };
   },
-  fetch() {
+  fetchGetOptions() {
     /* GET WITH AUTH */
     return {
       method: "get",
@@ -84,5 +100,37 @@ export default {
       }
     }
     return store.state.apiUrl + apiPath;
+  },
+  buildQuery(obj, sep, eq, name) {
+    sep = sep || "&";
+    eq = eq || "=";
+    if (obj === null) {
+      obj = undefined;
+    }
+
+    if (typeof obj === "object") {
+      return Object.keys(obj)
+        .map(function(k) {
+          var ks = encodeURIComponent(stringifyPrimitive(k)) + eq;
+          if (Array.isArray(obj[k])) {
+            return obj[k]
+              .map(function(v) {
+                return ks + encodeURIComponent(stringifyPrimitive(v));
+              })
+              .join(sep);
+          } else {
+            return ks + encodeURIComponent(stringifyPrimitive(obj[k]));
+          }
+        })
+        .filter(Boolean)
+        .join(sep);
+    }
+
+    if (!name) return "";
+    return (
+      encodeURIComponent(stringifyPrimitive(name)) +
+      eq +
+      encodeURIComponent(stringifyPrimitive(obj))
+    );
   }
 };
diff --git a/app/ayanova/src/api/auth.js b/app/ayanova/src/api/auth.js
index d3718a61..1be8526b 100644
--- a/app/ayanova/src/api/auth.js
+++ b/app/ayanova/src/api/auth.js
@@ -6,7 +6,7 @@ export default {
   async authenticate(login, password) {
     return fetch(
       apiUtil.APIUrl("auth"),
-      apiUtil.fetchPostNoAuth({
+      apiUtil.fetchPostNoAuthOptions({
         login: login,
         password: password
       })
diff --git a/app/ayanova/src/api/locale.js b/app/ayanova/src/api/locale.js
index 6abf90d7..540924a7 100644
--- a/app/ayanova/src/api/locale.js
+++ b/app/ayanova/src/api/locale.js
@@ -25,7 +25,7 @@ export default {
         return;
       }
       //step 2: get it
-      fetch(apiUtil.APIUrl("locale/subset"), apiUtil.fetchPost(needIt))
+      fetch(apiUtil.APIUrl("locale/subset"), apiUtil.fetchPostOptions(needIt))
         .then(apiUtil.status)
         .then(apiUtil.json)
         .then(response => {
diff --git a/app/ayanova/src/api/pagedlist.js b/app/ayanova/src/api/pagedlist.js
new file mode 100644
index 00000000..1bb177fc
--- /dev/null
+++ b/app/ayanova/src/api/pagedlist.js
@@ -0,0 +1,29 @@
+/* xeslint-disable */
+import apiUtil from "./apiutil";
+export default {
+  fetch(route, listOptions) {
+    // listOptions;
+
+    // var futureWithSortExampleListOptions = {
+    //   offset: 5,
+    //   limit: 5,
+    //   sortBy: "name",
+    //   descending: false
+    // };
+    // exampleListOptions;
+
+    var listUrl = route + apiUtil.buildQuery(listOptions);
+
+    return new Promise(function(resolve, reject) {
+      fetch(apiUtil.APIUrl(listUrl), apiUtil.fetchGetOptions())
+        .then(apiUtil.status)
+        .then(apiUtil.json)
+        .then(response => {
+          resolve(response);
+        })
+        .catch(function(error) {
+          reject(error);
+        });
+    });
+  }
+};
diff --git a/app/ayanova/src/components/widgetlist.vue b/app/ayanova/src/components/widgetlist.vue
index a380866c..711ab2e7 100644
--- a/app/ayanova/src/components/widgetlist.vue
+++ b/app/ayanova/src/components/widgetlist.vue
@@ -2,9 +2,9 @@
   <v-flex xs12 md4>
     <v-data-table
       :headers="headers"
-      :items="desserts"
+      :items="Items"
       :pagination.sync="pagination"
-      :total-items="totalDesserts"
+      :total-items="totalItems"
       :loading="loading"
       class="elevation-1"
     >
@@ -22,25 +22,26 @@
 
 
 <script>
+import pagedList from "../api/pagedlist";
 export default {
   data() {
     return {
-      totalDesserts: 0,
-      desserts: [],
+      totalItems: 0,
+      Items: [],
       loading: true,
       pagination: {},
       headers: [
         {
-          text: "Dessert (100g serving)",
+          text: "Widget",
           align: "left",
           sortable: false,
           value: "name"
         },
-        { text: "Calories", value: "calories" },
-        { text: "Fat (g)", value: "fat" },
-        { text: "Carbs (g)", value: "carbs" },
-        { text: "Protein (g)", value: "protein" },
-        { text: "Iron (%)", value: "iron" }
+        { text: "Serial", value: "serial" },
+        { text: "Price", value: "dollarAmount" },
+        { text: "Active", value: "active" },
+        { text: "Roles", value: "roles" },
+        { text: "Start date", value: "startDate" }
       ]
     };
   },
@@ -48,153 +49,62 @@ export default {
     pagination: {
       handler() {
         this.getDataFromApi().then(data => {
-          this.desserts = data.items;
-          this.totalDesserts = data.total;
+          this.Items = data.items;
+          this.totalItems = data.total;
         });
       },
       deep: true
     }
   },
   mounted() {
-    this.getDataFromApi().then(data => {
-      this.desserts = data.items;
-      this.totalDesserts = data.total;
+    this.loading = true;
+    pagedList.fetch("Widget/ListWidgets", { Offset: 5, Limit: 5 }).then(res => {
+      this.loading = false;
+      this.Items = res.data;
+      this.totalItems = res.paging.count;
     });
+
+    // this.getDataFromApi().then(data => {
+    //   this.Items = data.items;
+    //   this.totalItems = data.total;
+    // });
   },
   methods: {
-    getDataFromApi() {
-      this.loading = true;
-      // eslint-disable-next-line
-      return new Promise((resolve, reject) => {
-        const { sortBy, descending, page, rowsPerPage } = this.pagination;
-
-        let items = this.getDesserts();
-        const total = items.length;
-
-        if (this.pagination.sortBy) {
-          items = items.sort((a, b) => {
-            const sortA = a[sortBy];
-            const sortB = b[sortBy];
-
-            if (descending) {
-              if (sortA < sortB) return 1;
-              if (sortA > sortB) return -1;
-              return 0;
-            } else {
-              if (sortA < sortB) return -1;
-              if (sortA > sortB) return 1;
-              return 0;
-            }
-          });
-        }
-
-        if (rowsPerPage > 0) {
-          items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
-        }
-
-        setTimeout(() => {
-          this.loading = false;
-          resolve({
-            items,
-            total
-          });
-        }, 1000);
-      });
-    },
-    getDesserts() {
-      return [
-        {
-          value: false,
-          name: "Frozen Yogurt",
-          calories: 159,
-          fat: 6.0,
-          carbs: 24,
-          protein: 4.0,
-          iron: "1%"
-        },
-        {
-          value: false,
-          name: "Ice cream sandwich",
-          calories: 237,
-          fat: 9.0,
-          carbs: 37,
-          protein: 4.3,
-          iron: "1%"
-        },
-        {
-          value: false,
-          name: "Eclair",
-          calories: 262,
-          fat: 16.0,
-          carbs: 23,
-          protein: 6.0,
-          iron: "7%"
-        },
-        {
-          value: false,
-          name: "Cupcake",
-          calories: 305,
-          fat: 3.7,
-          carbs: 67,
-          protein: 4.3,
-          iron: "8%"
-        },
-        {
-          value: false,
-          name: "Gingerbread",
-          calories: 356,
-          fat: 16.0,
-          carbs: 49,
-          protein: 3.9,
-          iron: "16%"
-        },
-        {
-          value: false,
-          name: "Jelly bean",
-          calories: 375,
-          fat: 0.0,
-          carbs: 94,
-          protein: 0.0,
-          iron: "0%"
-        },
-        {
-          value: false,
-          name: "Lollipop",
-          calories: 392,
-          fat: 0.2,
-          carbs: 98,
-          protein: 0,
-          iron: "2%"
-        },
-        {
-          value: false,
-          name: "Honeycomb",
-          calories: 408,
-          fat: 3.2,
-          carbs: 87,
-          protein: 6.5,
-          iron: "45%"
-        },
-        {
-          value: false,
-          name: "Donut",
-          calories: 452,
-          fat: 25.0,
-          carbs: 51,
-          protein: 4.9,
-          iron: "22%"
-        },
-        {
-          value: false,
-          name: "KitKat",
-          calories: 518,
-          fat: 26.0,
-          carbs: 65,
-          protein: 7,
-          iron: "6%"
-        }
-      ];
-    }
+    // getDataFromApi() {
+    //   //http://localhost:7575/api/v8.0/Widget/ListWidgets?Offset=5&Limit=5
+    //   this.loading = true;
+    //   // eslint-disable-next-line
+    //   return new Promise((resolve, reject) => {
+    //     const { sortBy, descending, page, rowsPerPage } = this.pagination;
+    //     let items = this.getItems();
+    //     const total = items.length;
+    //     if (this.pagination.sortBy) {
+    //       items = items.sort((a, b) => {
+    //         const sortA = a[sortBy];
+    //         const sortB = b[sortBy];
+    //         if (descending) {
+    //           if (sortA < sortB) return 1;
+    //           if (sortA > sortB) return -1;
+    //           return 0;
+    //         } else {
+    //           if (sortA < sortB) return -1;
+    //           if (sortA > sortB) return 1;
+    //           return 0;
+    //         }
+    //       });
+    //     }
+    //     if (rowsPerPage > 0) {
+    //       items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+    //     }
+    //     setTimeout(() => {
+    //       this.loading = false;
+    //       resolve({
+    //         items,
+    //         total
+    //       });
+    //     }, 1000);
+    //   });
+    // }
   }
 };
 </script>
diff --git a/devdocs/todo.txt b/devdocs/todo.txt
index bb8ac3c9..d1a3ae42 100644
--- a/devdocs/todo.txt
+++ b/devdocs/todo.txt
@@ -32,7 +32,7 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
 
 UI TODO ITEMS
 	- Make the copyright banner at bottom left aligned, right now it seems weird in small iPhone size when it breaks to two lines (make text smaller?)
-
+	- Change favicon to be AyaNova not VUE
 
 
 - Stage 2 AFTER POSTED TEST ROUND COMPLETED