diff --git a/app/ayanova/src/components/desertlist.vue b/app/ayanova/src/components/desertlist.vue
index fad9ad14..b53c8377 100644
--- a/app/ayanova/src/components/desertlist.vue
+++ b/app/ayanova/src/components/desertlist.vue
@@ -1,27 +1,28 @@
 <template>
-    <div>
-        <v-data-table
-            :headers="headers"
-            :items="desserts"
-            :pagination.sync="pagination"
-            :total-items="totalDesserts"
-            :loading="loading"
-            class="elevation-1"
-        >
-            <template slot="items" slot-scope="props">
-                <td>{{ props.item.name }}</td>
-                <td class="text-xs-right">{{ props.item.calories }}</td>
-                <td class="text-xs-right">{{ props.item.fat }}</td>
-                <td class="text-xs-right">{{ props.item.carbs }}</td>
-                <td class="text-xs-right">{{ props.item.protein }}</td>
-                <td class="text-xs-right">{{ props.item.iron }}</td>
-            </template>
-        </v-data-table>
-    </div>
+  <div>
+    <v-data-table
+      :headers="headers"
+      :items="desserts"
+      :pagination.sync="pagination"
+      :total-items="totalDesserts"
+      :loading="loading"
+      class="elevation-1"
+    >
+      <template slot="items" slot-scope="props">
+        <td>{{ props.item.name }}</td>
+        <td class="text-xs-right">{{ props.item.calories }}</td>
+        <td class="text-xs-right">{{ props.item.fat }}</td>
+        <td class="text-xs-right">{{ props.item.carbs }}</td>
+        <td class="text-xs-right">{{ props.item.protein }}</td>
+        <td class="text-xs-right">{{ props.item.iron }}</td>
+      </template>
+    </v-data-table>
+  </div>
 </template>
 
 
 <script>
+//https://vuetifyjs.com/en/components/data-tables#example-server
 export default {
   data() {
     return {
diff --git a/app/ayanova/src/components/inventorypartassemblytop.vue b/app/ayanova/src/components/inventorypartassemblytop.vue
new file mode 100644
index 00000000..1a35870b
--- /dev/null
+++ b/app/ayanova/src/components/inventorypartassemblytop.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-container>
+        <v-layout text-xs-center wrap="">
+            <v-flex mb-4>
+                <h1 class="display-2 font-weight-bold mb-3">TOP Part assembly</h1>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+};
+</script>
+
+<style>
+</style>
diff --git a/app/ayanova/src/components/inventoryparttop.vue b/app/ayanova/src/components/inventoryparttop.vue
new file mode 100644
index 00000000..046fa284
--- /dev/null
+++ b/app/ayanova/src/components/inventoryparttop.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-container>
+        <v-layout text-xs-center wrap="">
+            <v-flex mb-4>
+                <h1 class="display-2 font-weight-bold mb-3">TOP Parts</h1>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+};
+</script>
+
+<style>
+</style>
diff --git a/app/ayanova/src/components/inventorypotop.vue b/app/ayanova/src/components/inventorypotop.vue
new file mode 100644
index 00000000..65eeb16c
--- /dev/null
+++ b/app/ayanova/src/components/inventorypotop.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-container>
+        <v-layout text-xs-center wrap="">
+            <v-flex mb-4>
+                <h1 class="display-2 font-weight-bold mb-3">TOP Purchase orders</h1>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+};
+</script>
+
+<style>
+</style>
diff --git a/app/ayanova/src/components/inventorywarehousetop.vue b/app/ayanova/src/components/inventorywarehousetop.vue
new file mode 100644
index 00000000..6155e316
--- /dev/null
+++ b/app/ayanova/src/components/inventorywarehousetop.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-container>
+        <v-layout text-xs-center wrap="">
+            <v-flex mb-4>
+                <h1 class="display-2 font-weight-bold mb-3">Top Warehouses</h1>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+};
+</script>
+
+<style>
+</style>
diff --git a/app/ayanova/src/components/inventorywidgettop.vue b/app/ayanova/src/components/inventorywidgettop.vue
new file mode 100644
index 00000000..31cc99e1
--- /dev/null
+++ b/app/ayanova/src/components/inventorywidgettop.vue
@@ -0,0 +1,18 @@
+<template>
+    <v-container>
+        <v-layout text-xs-center wrap="">
+            <v-flex mb-4>
+                <h1 class="display-2 font-weight-bold mb-3">TOP WIDGET</h1>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+};
+</script>
+
+<style>
+</style>
diff --git a/app/ayanova/src/router.js b/app/ayanova/src/router.js
index 6cc87ac2..e22e0bc1 100644
--- a/app/ayanova/src/router.js
+++ b/app/ayanova/src/router.js
@@ -46,6 +46,12 @@ export default new Router({
       path: "/log",
       name: "log",
       component: () => import(/* webpackChunkName: "log" */ "./views/log.vue")
+    },
+    {
+      path: "/inventory",
+      name: "inventory",
+      component: () =>
+        import(/* webpackChunkName: "inventory" */ "./views/inventory.vue")
     }
   ]
 });
diff --git a/app/ayanova/src/views/inventory.vue b/app/ayanova/src/views/inventory.vue
new file mode 100644
index 00000000..176085e8
--- /dev/null
+++ b/app/ayanova/src/views/inventory.vue
@@ -0,0 +1,60 @@
+<template>
+    <v-layout row>
+        <WidgetTop/>
+        <PartTop/>
+        <PartAssemblyTop/>
+        <WarehouseTop/>
+        <POTop/>
+    </v-layout>
+</template>
+
+<script>
+/*  xeslint-disable */
+import WidgetTop from "../components/inventorywidgettop";
+import WarehouseTop from "../components/inventorywarehousetop";
+import POTop from "../components/inventorypotop";
+import PartTop from "../components/inventoryparttop";
+import PartAssemblyTop from "../components/inventorypartassemblytop";
+/*
+HMMM?? - Maybe top level category is "part" and inventory is a sub item like the rest since they all revolve around parts but are not all inventory
+*/
+
+// - PART REQUESTS OVERVIEW ETC....
+//   - PART ASSEMBLIES
+//   - PART CATEGORIES
+//   - PART WAREHOUSES
+// - PARTS
+// - Part inventory
+// - Part inventory adjustments
+
+//import store from "../store";
+import lt from "../api/locale";
+//import _ from "../utils/libs/lodash.js";
+export default {
+  components: {
+    WidgetTop,
+    WarehouseTop,
+    POTop,
+    PartTop,
+    PartAssemblyTop
+  },
+  data() {
+    return {};
+  },
+  beforeRouteEnter(to, from, next) {
+    //get lt, roles, populate top level components accordingly
+    lt.fetch(["Inventory"]).then(() => {
+      next();
+    });
+  },
+  mounted() {},
+  methods: {
+    lt: function(key) {
+      return lt.get(key);
+    }
+  }
+};
+</script>
+
+<style>
+</style>
diff --git a/devdocs/specs/core-ui-design.txt b/devdocs/specs/core-ui-design.txt
index 784c1220..a2d9b84b 100644
--- a/devdocs/specs/core-ui-design.txt
+++ b/devdocs/specs/core-ui-design.txt
@@ -33,6 +33,29 @@ Requirements
         - or for a Ops person they can plunk down on their dashboard a current server status widget or active jobs widget etc
 
 
+EXAMPLE UI INTERACTION ELEMENTS:
+=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=
+CATEGORY NAV MENU ITEM -> SHOWS TOP LEVEL UI COMPONENT SPACE / PAGE
+   TOP PAGE -> SHOWS TOP LEVEL WIDGETS FOR THAT CATEGORY WHICH ARE USED TO DRILL DOWN INTO WHATEVER YOU WANT TO DO WITH IT
+    TOP WIDGETS -> SHOW SUMMARY INFO WITH OPTIONS FOR ACTIONS ON THAT ITEM
+
+EXAMPLE:
+SELECT NAV.INVENTORY -> SHOWS MULTIPLE TOP LEVEL UI WIDGETS RELATED TO INVENTORY: 
+  - PARTS OVERVIEW WITH SUMMARY DATA OF TOP LEVEL INTEREST
+    - LINKS TO: CREATE, LIST, REPORT, GRAPHS (BASED ON ROLES), PLUGINS THAT AFFECT ALL INVENTORY
+      - LIST OPTION: SHOWS LIST OF PARTS WITH ABILITY TO EDIT, DELETE, MASS SELECT AND CHANGE (plugins, delete, tag etc), FILTER BY TAG, DATE RANGE, SORT ETC
+  - PO OVERVIEW WITH SUMMARY DATA OF TOP LEVEL INTEREST
+    - LINKS TO: CREATE, LIST, REPORTS, GRAPHS (ROLES CONTROLLED)
+  - PART REQUESTS OVERVIEW ETC....
+  - PART ASSEMBLIES
+  - PART CATEGORIES
+  - PART WAREHOUSES
+
+
+
+
+
+
 Graphics and themes for AyaNova
     - No bitmap graphics, vector only!!   
     - For the manual and docs will use material theme with MKDOCS generator.
diff --git a/devdocs/todo.txt b/devdocs/todo.txt
index 9f5b8c96..4cd7a930 100644
--- a/devdocs/todo.txt
+++ b/devdocs/todo.txt
@@ -4,10 +4,9 @@ Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOiIxNTQyNjY5Njc3IiwiZXhwIjoi
 
 
 ## IMMEDIATE ITEMS
-
-	- Colors
-		- what are the application colors going to be and start using them now.
+	
 	- 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
 			- Stored locally with client so each client app can have individual settings (i.e. phone vs desktop can have alternate settings for same user)