diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 5a6c8581aa..277f57584e 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -24,6 +24,7 @@ import {
   saveCurrentPreviewItem as _saveCurrentPreviewItem,
   saveScreenApi as _saveScreenApi,
   regenerateCssForCurrentScreen,
+  regenerateCssForScreen,
   generateNewIdsForComponent,
   getComponentDefinition,
 } from "../storeUtils"
@@ -98,6 +99,29 @@ const setPackage = (store, initial) => async pkg => {
     },
   }
 
+  // if the app has just been created
+  // we need to build the CSS and save
+  if (pkg.justCreated) {
+    const generateInitialPageCss = async name => {
+      const page = pkg.pages[name]
+      regenerateCssForScreen(page)
+      for (let screen of page._screens) {
+        regenerateCssForScreen(screen)
+      }
+
+      await api.post(`/_builder/api/${pkg.application._id}/pages/${name}`, {
+        page: {
+          componentLibraries: pkg.application.componentLibraries,
+          ...page,
+        },
+        screens: page._screens,
+      })
+    }
+    generateInitialPageCss("main")
+    generateInitialPageCss("unauthenticated")
+    pkg.justCreated = false
+  }
+
   initial.libraries = pkg.application.componentLibraries
   initial.components = await fetchComponentLibDefinitions(pkg.application._id)
   initial.name = pkg.application.name
@@ -156,8 +180,8 @@ const createScreen = store => async screen => {
     state.currentPreviewItem = screen
     state.currentComponentInfo = screen.props
     state.currentFrontEndType = "screen"
-    savePromise = _saveScreen(store, state, screen)
     regenerateCssForCurrentScreen(state)
+    savePromise = _saveScreen(store, state, screen)
     return state
   })
   await savePromise
diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js
index 9111f06bd5..6155974d2b 100644
--- a/packages/builder/src/builderStore/storeUtils.js
+++ b/packages/builder/src/builderStore/storeUtils.js
@@ -79,10 +79,12 @@ export const walkProps = (props, action, cancelToken = null) => {
   }
 }
 
+export const regenerateCssForScreen = screen => {
+  screen._css = generate_screen_css([screen.props])
+}
+
 export const regenerateCssForCurrentScreen = state => {
-  state.currentPreviewItem._css = generate_screen_css([
-    state.currentPreviewItem.props,
-  ])
+  regenerateCssForScreen(state.currentPreviewItem)
   return state
 }
 
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index e171dc836e..7ee707d490 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -154,6 +154,7 @@
       const pkg = await applicationPkg.json()
       if (applicationPkg.ok) {
         backendUiStore.actions.reset()
+        pkg.justCreated = true
         await store.setPackage(pkg)
         automationStore.actions.fetch()
       } else {
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
index 74ec5694cd..8393299b12 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
@@ -11,6 +11,9 @@
 
   export let screens = []
 
+  $: sortedScreens = screens.sort(
+    (s1, s2) => s1.props._instanceName > s2.props._instanceName
+  )
   /* 
   Using a store here seems odd.... 
   have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
@@ -24,12 +27,15 @@
   const joinPath = join("/")
 
   const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
+    pipe(
+      name,
+      [
+        trimCharsStart("./"),
+        trimCharsStart("~/"),
+        trimCharsStart("../"),
+        trimChars(" "),
+      ]
+    )
 
   const changeScreen = screen => {
     store.setCurrentScreen(screen.props._instanceName)
@@ -38,7 +44,7 @@
 </script>
 
 <div class="root">
-  {#each screens as screen}
+  {#each sortedScreens as screen}
     <div
       class="budibase__nav-item screen-header-row"
       class:selected={$store.currentComponentInfo._id === screen.props._id}
diff --git a/packages/client/src/render/screenRouter.js b/packages/client/src/render/screenRouter.js
index e76c525174..164cd840aa 100644
--- a/packages/client/src/render/screenRouter.js
+++ b/packages/client/src/render/screenRouter.js
@@ -38,7 +38,9 @@ export const screenRouter = ({ screens, onScreenSelected, window }) => {
   function route(url) {
     const _url = makeRootedPath(url.state || url)
     current = routes.findIndex(
-      p => p !== "*" && new RegExp("^" + p + "$").test(_url)
+      p =>
+        p !== "*" &&
+        new RegExp("^" + p.toLowerCase() + "$").test(_url.toLowerCase())
     )
 
     const params = {}