diff --git a/packages/stark-core/assets/css/pre-load-style.css b/packages/stark-core/assets/css/pre-load-style.css
new file mode 100644
index 0000000000..7ef6ca3da0
--- /dev/null
+++ b/packages/stark-core/assets/css/pre-load-style.css
@@ -0,0 +1,93 @@
+/* Hide the app / loader / browser warning until it is determined if JS is enabled and the if the browser is compatible  */
+.stark-app,
+.stark-loading,
+.stark-browser-warning {
+  display: none;
+}
+
+.stark-browser-outdated .stark-browser-warning {
+  display: block;
+}
+
+.stark-browser-ok .stark-app {
+  display: flex;
+}
+
+.stark-browser-ok .stark-loading {
+  display: block;
+}
+
+.stark-preload-ui-page h1 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 32px;
+  margin: 0 0 16px;
+}
+
+.stark-preload-ui-page {
+  color: black;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+    sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  max-width: 100%;
+  width: 500px;
+  overflow: hidden;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
+
+  margin: 16px auto;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.stark-preload-ui-page header {
+  padding: 16px;
+  background: #143e74 url("/assets/stark-core/logo/stark_header_bg.png") top right no-repeat;
+  border-radius: 2px 2px 0 0;
+}
+
+.stark-preload-ui-page header i {
+  margin: auto;
+  display: block;
+  width: 200px;
+  height: 60px;
+  background: url("/assets/stark-core/logo/stark_logo_transparent.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.stark-preload-ui-page .content {
+  display: block;
+  padding: 16px;
+  background: #fff;
+}
+
+.stark-preload-ui-page .stark-loading-icon {
+  margin: 0 auto 8px auto;
+  display: block;
+  width: 64px;
+  height: 64px;
+  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUwIDUwIj48cGF0aCBmaWxsPSIjN2ZiYWUzIiBkPSJNMjUuMjUxLDYuNDYxYy0xMC4zMTgsMC0xOC42ODMsOC4zNjUtMTguNjgzLDE4LjY4M2g0LjA2OGMwLTguMDcxLDYuNTQzLTE0LjYxNSwxNC42MTUtMTQuNjE1VjYuNDYxeiI+PC9wYXRoPjwvc3ZnPg==");
+  /*	Base64 created from SVG on this site: http://www.opinionatedgeek.com/DotNet/Tools/Base64Encode/	and from this source:
+          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" x="0" y="0" viewBox="0 0 50 50"><path fill="#7fbae3" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"></path></svg>
+          */
+  fill: currentColor;
+  transform-origin: 50% 50%;
+  animation: loader-spin 0.8s linear infinite;
+}
+
+@keyframes loader-spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/stark-core/assets/logo/stark_header_bg.png b/packages/stark-core/assets/logo/stark_header_bg.png
new file mode 100644
index 0000000000..a9d50fd52a
Binary files /dev/null and b/packages/stark-core/assets/logo/stark_header_bg.png differ
diff --git a/packages/stark-ui/assets/styles/_base.scss b/packages/stark-ui/assets/styles/_base.scss
index 19ccb1ad59..b66c15b816 100644
--- a/packages/stark-ui/assets/styles/_base.scss
+++ b/packages/stark-ui/assets/styles/_base.scss
@@ -53,9 +53,6 @@ body {
     display: flex;
     flex-direction: column;
     height: 100%;
-    &:not(.stark-init) {
-      overflow-y: hidden;
-    }
     & .content-wrapper {
       flex: 1;
       display: flex;
diff --git a/showcase/src/index.html b/showcase/src/index.html
index b3b99b17e2..2c5bbe4a7a 100644
--- a/showcase/src/index.html
+++ b/showcase/src/index.html
@@ -6,7 +6,7 @@
 	<meta charset="utf-8">
 	<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
 
-	<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
+	<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">
 
 	<% if (webpackConfig.htmlElements.headTags) { %>
 	<!--Configured Head Tags  -->
@@ -14,6 +14,8 @@
 	<% } %>
 
 	<!-- Stylesheets -->
+	<!-- The stylesheet should be loaded before angular is initialized -->
+	<link rel="stylesheet" href="/assets/stark-core/css/pre-load-style.css">
 	<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->
 
 	<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
@@ -30,75 +32,71 @@
 	<% } %>
 	<% } %>
 </head>
-
 <body class="">
 
-<!-- FIXME reimplement these functionalities -->
-<!-- the 'stark-init'/'stark-exit' class is set when the current route state is a child of starkAppInit/starkAppExit -->
-<!--
-<div class="stark-message stark-js-error-messages" role="alertdialog" aria-busy="true" aria-live="assertive">
-	<header><i></i></header>
-	<content>
-		<div class="stark-msg-no-js">
-			<h1>No JavaScript</h1>
-			<p>You must have javascript enabled!</p>
+	<noscript>
+		<div class="stark-no-js-warning stark-preload-ui-page"
+			 role="alertdialog"
+			 aria-busy="true"
+			 aria-live="assertive">
+			<header><i></i></header>
+			<div class="content">
+				<h1>No JavaScript</h1>
+				<p>You must have JavaScript enabled!</p>
+			</div>
 		</div>
-		<div class="stark-msg-outdated">
+	</noscript>
+
+	<div class="stark-browser-warning stark-preload-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
+		<header><i></i></header>
+		<div class="content">
 			<h1>Browser not supported</h1>
-			<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to
-				improve your experience.</p>
+			<p>You are using an <strong>outdated</strong> browser. Please
+				<a href="http://browsehappy.com"
+				   target="_blank"
+				   rel="noreferrer noopenenr">
+					upgrade your browser
+				</a>
+			   to improve your experience.</p>
 		</div>
-	</content>
-</div>
--->
-
-<!-- the 'stark-init'/'stark-exit' class is set when the current route state is a child of starkAppInit/starkAppExit -->
-<!--
-<app class="stark-app" ui-sref-active="{'stark-init': 'starkAppInit.**', 'stark-exit': 'starkAppExit.**'}"></app>
--->
-
-<!--
-<script nonce="cefb24121ec5443c8819cc7c5e33c4a2">
-	/* remove the no-js message and if compatible browser: display the app */
-	if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
-		document.body.classList.add("stark-browser-ok");
-	} else {
-		document.body.className += " stark-outdated-browser";
-		var starkApp = document.getElementsByClassName("stark-app")[0];
-		if (starkApp) {
-			document.body.removeChild(starkApp);
-		}
-		var starkInitView = document.getElementsByClassName("stark-login-container")[0];
-		if (starkInitView) {
-			document.body.removeChild(starkInitView);
-		}
-	}
-</script>
--->
+	</div>
 
-<!-- <app>
-	<div class="stark-message stark-loading" role="alertdialog" aria-busy="true" aria-live="assertive">
-		<header><i></i></header>
-		<content>
-			<div class="stark-msg-loading">
+	<app class="stark-app">
+		<div class="stark-loading stark-preload-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
+			<header><i></i></header>
+			<divs class="content">
 				<div class="stark-loading-icon"></div>
 				<h1>Loading...</h1>
-			</div>
-		</content>
-	</div>
-</app> -->
-<app>Loading...</app>
+			</divs>
+		</div>
+	</app>
+
+	<script>
+		/*see if the browser is compatible*/
+		if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
+			/*remove the warning and display the app if the browser is up to date */
+			var browserWarning = document.getElementsByClassName("stark-browser-warning")[0];
+			if (browserWarning) document.body.removeChild(browserWarning);
+
+			document.body.classList.add("stark-browser-ok");
+		} else {
+			/* remove the app and show the browser warning if the browser is outdated*/
+			document.body.className += "stark-browser-outdated";
 
-<% if (htmlWebpackPlugin.options.dllFiles) { %>  <!-- dllFiles will be filled in by the Dll plugin -->
-<!-- Webpack DLL JS files -->
-<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
-<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
-<% } %>
-<% } %>
+			var starkApp = document.getElementsByClassName("stark-app")[0];
+			if (starkApp) document.body.removeChild(starkApp);
 
-<!-- CSS will be injected by webpack here -->
-<!-- Preload link tags will be injected by webpack here -->
-<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
+		}
+	</script>
+	<% if (htmlWebpackPlugin.options.dllFiles) { %>  <!-- dllFiles will be filled in by the Dll plugin -->
+	<!-- Webpack DLL JS files -->
+	<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
+	<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
+	<% } %>
+	<% } %>
 
+	<!-- CSS will be injected by webpack here -->
+	<!-- Preload link tags will be injected by webpack here -->
+	<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
 </body>
 </html>
diff --git a/starter/src/index.html b/starter/src/index.html
index 73db830b90..2c5bbe4a7a 100644
--- a/starter/src/index.html
+++ b/starter/src/index.html
@@ -6,7 +6,7 @@
 	<meta charset="utf-8">
 	<title><%= htmlWebpackPlugin.options.starkAppMetadata.name %></title>
 
-	<meta name="description" content="{%= htmlWebpackPlugin.options.starkAppMetadata.description %}">
+	<meta name="description" content="<%= htmlWebpackPlugin.options.starkAppMetadata.description %>">
 
 	<% if (webpackConfig.htmlElements.headTags) { %>
 	<!--Configured Head Tags  -->
@@ -14,6 +14,8 @@
 	<% } %>
 
 	<!-- Stylesheets -->
+	<!-- The stylesheet should be loaded before angular is initialized -->
+	<link rel="stylesheet" href="/assets/stark-core/css/pre-load-style.css">
 	<!-- Generated CSS stylesheets will be added by webpack: extract-text-webpack-plugin -->
 
 	<!-- move the block of webpack dev server to the <head> section and change the IF conditions -->
@@ -30,20 +32,71 @@
 	<% } %>
 	<% } %>
 </head>
-
 <body class="">
 
-<app>Loading...</app>
+	<noscript>
+		<div class="stark-no-js-warning stark-preload-ui-page"
+			 role="alertdialog"
+			 aria-busy="true"
+			 aria-live="assertive">
+			<header><i></i></header>
+			<div class="content">
+				<h1>No JavaScript</h1>
+				<p>You must have JavaScript enabled!</p>
+			</div>
+		</div>
+	</noscript>
+
+	<div class="stark-browser-warning stark-preload-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
+		<header><i></i></header>
+		<div class="content">
+			<h1>Browser not supported</h1>
+			<p>You are using an <strong>outdated</strong> browser. Please
+				<a href="http://browsehappy.com"
+				   target="_blank"
+				   rel="noreferrer noopenenr">
+					upgrade your browser
+				</a>
+			   to improve your experience.</p>
+		</div>
+	</div>
+
+	<app class="stark-app">
+		<div class="stark-loading stark-preload-ui-page" role="alertdialog" aria-busy="true" aria-live="assertive">
+			<header><i></i></header>
+			<divs class="content">
+				<div class="stark-loading-icon"></div>
+				<h1>Loading...</h1>
+			</divs>
+		</div>
+	</app>
+
+	<script>
+		/*see if the browser is compatible*/
+		if ("querySelector" in document && "classList" in document.body && /*@cc_on!@*/false === false) {
+			/*remove the warning and display the app if the browser is up to date */
+			var browserWarning = document.getElementsByClassName("stark-browser-warning")[0];
+			if (browserWarning) document.body.removeChild(browserWarning);
+
+			document.body.classList.add("stark-browser-ok");
+		} else {
+			/* remove the app and show the browser warning if the browser is outdated*/
+			document.body.className += "stark-browser-outdated";
 
-<% if (htmlWebpackPlugin.options.dllFiles) { %>  <!-- dllFiles will be filled in by the Dll plugin -->
-<!-- Webpack DLL JS files -->
-<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
-<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
-<% } %>
-<% } %>
+			var starkApp = document.getElementsByClassName("stark-app")[0];
+			if (starkApp) document.body.removeChild(starkApp);
+
+		}
+	</script>
+	<% if (htmlWebpackPlugin.options.dllFiles) { %>  <!-- dllFiles will be filled in by the Dll plugin -->
+	<!-- Webpack DLL JS files -->
+	<% for (let i = 0; i < htmlWebpackPlugin.options.dllFiles.js.length; ++i) { %>
+	<script type="text/javascript" src="<%= htmlWebpackPlugin.options.dllFiles.js[i] %>"></script>
+	<% } %>
+	<% } %>
 
-<!-- CSS will be injected by webpack here -->
-<!-- Preload link tags will be injected by webpack here -->
-<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
+	<!-- CSS will be injected by webpack here -->
+	<!-- Preload link tags will be injected by webpack here -->
+	<!-- Generated bundle scripts will be injected by webpack here: html-webpack-plugin -->
 </body>
 </html>