diff --git a/packages/builder/src/builderStore/loadComponentLibraries.js b/packages/builder/src/builderStore/loadComponentLibraries.js
index ed720ad6c0..1bd30a5582 100644
--- a/packages/builder/src/builderStore/loadComponentLibraries.js
+++ b/packages/builder/src/builderStore/loadComponentLibraries.js
@@ -1,6 +1,11 @@
+import { flatten, values, uniq, map } from "lodash/fp"
+import { pipe } from "../common/core"
+
 export const loadLibs = async (appName, appPackage) => {
   const allLibraries = {}
-  for (let lib of appPackage.pages.componentLibraries) {
+
+  for (let lib of libsFromPages(appPackage.pages)) {
+    
     const libModule = await import(makeLibraryUrl(appName, lib))
     allLibraries[lib] = libModule
   }
@@ -10,7 +15,7 @@ export const loadLibs = async (appName, appPackage) => {
 
 export const loadLibUrls = (appName, appPackage) => {
   const allLibraries = []
-  for (let lib of appPackage.pages.componentLibraries) {
+  for (let lib of libsFromPages(appPackage.pages)) {
     const libUrl = makeLibraryUrl(appName, lib)
     allLibraries.push({ libName: lib, importPath: libUrl })
   }
@@ -25,3 +30,11 @@ export const loadLib = async (appName, lib, allLibs) => {
 
 export const makeLibraryUrl = (appName, lib) =>
   `/_builder/${appName}/componentlibrary?lib=${encodeURI(lib)}`
+
+export const libsFromPages = pages => pipe(pages, [
+  values,
+  map(p => p.componentLibraries),
+  flatten,
+  uniq
+])
+
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js
index 70207314ac..9245e2c9b5 100644
--- a/packages/builder/src/builderStore/store.js
+++ b/packages/builder/src/builderStore/store.js
@@ -140,8 +140,6 @@ const initialise = (store, initial) => async () => {
   ])
 
   pkg.pages = {
-    componentLibraries: ["@budibase/standard-components"],
-    stylesheets: [],
     main: {
       ...pkg.pages.main,
       _screens: Object.values(main_screens),
diff --git a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
index 6e1de3db6f..b15ecc341d 100644
--- a/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/userInterface/ComponentsHierarchyChildren.svelte
@@ -38,7 +38,7 @@
         class="item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 67}px">
-        <span class="item-name">{get_capitalised_name(component._component)}</span>
+        <div>{get_capitalised_name(component._component)}</div>
         <div class="reorder-buttons">
           {#if index > 0}
           <button on:click|stopPropagation={() => onMoveUpComponent(component)}>
@@ -87,8 +87,8 @@
   }
 
   .item {
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr auto auto auto;
     padding: 0px 5px 0px 67px;
     margin: auto 0px;
     border-radius: 3px;
@@ -96,14 +96,10 @@
     align-items: center;
   }
 
-  .item > span {
-    width: 1px;
-    flex: 1 1 auto;
-  }
-
   .item button {
     display: none;
     height: 20px;
+    width: 30px;
     color: var(--slate);
     padding: 0px 5px;
   }
@@ -136,7 +132,8 @@
 
   .reorder-buttons > button {
     flex: 1 1 auto;
-    height: 17px
+    height: 17px;
+    width: 30px;
   }
 
 </style>
diff --git a/packages/builder/src/userInterface/SettingsView.svelte b/packages/builder/src/userInterface/SettingsView.svelte
index 13f970a63c..bc7441561d 100644
--- a/packages/builder/src/userInterface/SettingsView.svelte
+++ b/packages/builder/src/userInterface/SettingsView.svelte
@@ -5,7 +5,7 @@
   import IconButton from "../common/IconButton.svelte"
   import { libraryDependencies } from "./pagesParsing/findDependencies"
   import UIkit from "uikit"
-
+  import { libsFromPages } from "../builderStore/loadComponentLibraries"
   let addNewLib = ""
   let addNewStylesheet = ""
   let modalElement
@@ -61,7 +61,7 @@
             <Button color="primary-outline" on:click={addLib}>Add</Button>
           </span>
         </p>
-        {#each $store.pages.componentLibraries as lib}
+        {#each $store.pages[$store.currentPageName].componentLibraries as lib}
           <div>
             <span class="row-text">{lib}</span>
             <IconButton icon="x" on:click={() => removeLibrary(lib)} />
@@ -79,7 +79,7 @@
             </Button>
           </span>
         </p>
-        {#each $store.pages.stylesheets as stylesheet}
+        {#each $store.pages[$store.currentPageName].stylesheets as stylesheet}
           <div>
             <span class="row-text">{stylesheet}</span>
             <IconButton
diff --git a/packages/cli/src/commands/new/appPackageTemplate/package.json b/packages/cli/src/commands/new/appPackageTemplate/package.json
index a0f58b7239..53db27f272 100644
--- a/packages/cli/src/commands/new/appPackageTemplate/package.json
+++ b/packages/cli/src/commands/new/appPackageTemplate/package.json
@@ -8,6 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@budibase/standard-components": "^0.0.3"
+    "@budibase/standard-components": "^0.0.3",
+    "@budibase/materialdesign-components": "^0.0.16"
   }
 }
diff --git a/packages/cli/src/commands/new/appPackageTemplate/pages.json b/packages/cli/src/commands/new/appPackageTemplate/pages.json
deleted file mode 100644
index 5c0076fe4b..0000000000
--- a/packages/cli/src/commands/new/appPackageTemplate/pages.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "main": {
-    "index": {},
-    "appBody": ""
-  },
-  "unauthenticated": {
-    "index": {},
-    "appBody": ""
-  },
-  "componentLibraries": [
-    "@budibase/standard-components"
-  ],
-  "stylesheets": []
-}
diff --git a/packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json b/packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json
index c725d5bdf6..89a23a78e5 100644
--- a/packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json
+++ b/packages/cli/src/commands/new/appPackageTemplate/pages/main/page.json
@@ -2,7 +2,7 @@
 	"title": "Test App",
 	"favicon": "./_shared/favicon.png",
 	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
 		"_component": "@budibase/standard-components/container",
 		"_children": [],
diff --git a/packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json
index 7023bf9af7..14d0301c24 100644
--- a/packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json
+++ b/packages/cli/src/commands/new/appPackageTemplate/pages/unauthenticated/page.json
@@ -2,7 +2,7 @@
 	"title": "Test App",
 	"favicon": "./_shared/favicon.png",
 	"stylesheets": [],
-	"componentLibraries": ["@budibase/standard-components"],
+	"componentLibraries": ["@budibase/standard-components", "@budibase/materialdesign-components"],
 	"props" : {
 		"_component": "@budibase/standard-components/container",
 		"_children": [],
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index a469e85754..a93b5602a7 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -36,7 +36,7 @@
   "keywords": [
     "svelte"
   ],
-  "version": "0.0.15",
+  "version": "0.0.16",
   "license": "MIT",
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
   "dependencies": {
diff --git a/packages/materialdesign-components/scripts/publishDev.js b/packages/materialdesign-components/scripts/publishDev.js
index bdc85aacc5..a199b51226 100644
--- a/packages/materialdesign-components/scripts/publishDev.js
+++ b/packages/materialdesign-components/scripts/publishDev.js
@@ -26,7 +26,7 @@ const publicMain = appName =>
     "lib",
     "node_modules",
     "@budibase",
-    "standard-components"
+    "materialdesign-components"
   )
 const publicUnauth = appName =>
   join(
@@ -37,7 +37,7 @@ const publicUnauth = appName =>
     "lib",
     "node_modules",
     "@budibase",
-    "standard-components"
+    "materialdesign-components"
   )
 const nodeModulesDist = appName =>
   join(
@@ -45,11 +45,18 @@ const nodeModulesDist = appName =>
     appName,
     "node_modules",
     "@budibase",
-    "standard-components",
+    "materialdesign-components",
     "dist"
   )
+
 const nodeModules = appName =>
-  join(appPackages, appName, "node_modules", "@budibase", "standard-components")
+  join(
+    appPackages,
+    appName,
+    "node_modules",
+    "@budibase",
+    "materialdesign-components"
+  )
 
 ;(async () => {
   const apps = await readdir(appPackages)