diff --git a/demos/mobileapp/app.css b/demos/mobileapp/app.css
index 7ae82e0a90..a6057da981 100644
--- a/demos/mobileapp/app.css
+++ b/demos/mobileapp/app.css
@@ -3,6 +3,10 @@
 	font-family: sans-serif;
 }
 
+.d-list {
+	border: none;
+}
+
 .pageHeader, .pageFooter{
 	background-color: #1AA1E1;
 	color: white;
@@ -11,6 +15,7 @@
 .pageHeader {
 	border-bottom: 2px solid black;
 	padding: 0.3em;
+	height: 60px;
 }
 
 .pageFooter {
@@ -23,16 +28,28 @@
 	text-align: center;
 }
 
-button{
-	width: 32px;
-	height: 32px;
+.appButton, .appButton2 {
+	border: none;
+	background-color: white;
+	font-weight: bold;
+	min-width: 50px;
+	cursor: pointer;
+	padding: 10px 10px 10px 10px;
+	font-size: 110%;
 }
 
-.titleStyle{
-	font-size: 1.5em;
-	text-align: center;
-	padding-top: 0.2em;
+.appButton2 {
+	background-color: #1AA1E1;
+	color: white;
+	margin: 0 30% 0 30%;
+}
 
+.titleStyle {
+	text-align: center;
+	margin-top: auto;
+	margin-bottom: auto;
+	font-weight: bold;
+	font-size: 150%;
 	/* One line title with ellipsis if needed */
 	white-space: nowrap;
 	text-overflow: ellipsis;
diff --git a/demos/mobileapp/app.html b/demos/mobileapp/app.html
index 3deb9fb8f0..f461360ceb 100644
--- a/demos/mobileapp/app.html
+++ b/demos/mobileapp/app.html
@@ -9,9 +9,12 @@
 
 	<link rel="stylesheet" href="../../../delite/themes/defaultapp.css">
 	<link rel="stylesheet" href="app.css">
-
-	<!-- For testing purposes.  Real applications should load the AMD loader directly -->
-	<script type="text/javascript" src="../../tests/boilerplate.js"></script>
+	<script type="text/javascript" src="../../../requirejs/require.js"></script>
+	<script type="text/javascript">
+		require.config({
+			baseUrl: "../../../"
+		});
+	</script>
 
 	<script type="text/javascript">
 		require([
@@ -19,7 +22,6 @@
 			"deliteful/ViewStack",
 			"deliteful/SidePane",
 			"deliteful/LinearLayout",
-			"deliteful/Button",
 			"deliteful/list/List",
 			"delite/css!deliteful/ViewStack/transitions/fade_css",
 			"requirejs-domready/domReady!"
@@ -28,11 +30,15 @@
 			for (var i = 1; i < 100; i++){
 				list.store.add({label: "Item #" + i});
 			}
-			menulist.store.add({label: "List A", target:"aaa"});
-			menulist.store.add({label: "List B", target:"bbb"});
+			menulist.store.add({label: "View A", target:"aaa"});
+			menulist.store.add({label: "View B", target:"bbb"});
+			menulist.store.add({label: "View C", target:"ccc"});
+			menulist.store.add({label: "View D", target:"ddd"});
 			var actionHandler = function(event, list) {
 				var renderer = list.getEnclosingRenderer(event.target);
-				vs.show(renderer.item.target, {transition: "fade"});
+				if (renderer) {
+					vs.show(renderer.item.target, {transition: "fade"});
+				}
 			};
 
 			menulist.on("click", function (event) {
@@ -46,18 +52,19 @@
 <d-side-pane mode="push" position="start" id="leftPane">
 	<d-linear-layout class="height100">
 		<d-linear-layout vertical="false" class="pageHeader">
-			<div><button is="d-button" onclick="leftPane.hide()"></button></div>
 			<div class="fill titleStyle">Menu</div>
-			<div><button is="d-button" onclick="leftStack.show(settings)"></button></div>
 		</d-linear-layout>
-
 		<d-view-stack id="leftStack" class="width100 fill" style="background-color: white">
-			<div style="height: 100%" id="menu">
-				<d-list style="height: 100%" id="menulist" targetAttr="target"></d-list>
-			</div>
-			<div id="settings" style="text-align: center">
-				<button is="d-button" onclick="leftStack.show(menu, {reverse:true})"></button>
-			</div>
+			<d-linear-layout id="menu">
+				<div class="fill">
+					<d-list style="height: 100%" id="menulist" targetAttr="target"></d-list>
+				</div>
+				<button class="appButton2" onclick="leftStack.show('settings')">&gt;</button>
+			</d-linear-layout>
+			<d-linear-layout id="settings" style="background-color: #bce8f1">
+				<div class="fill"><div class="titleStyle">Page 2</div></div>
+				<button class="appButton2" onclick="leftStack.show('menu', {reverse:true})">&lt;</button>
+			</d-linear-layout>
 		</d-view-stack>
 	</d-linear-layout>
 </d-side-pane>
@@ -66,9 +73,8 @@
 <d-linear-layout class="page width100 height100">
 	<!-- Header -->
 	<d-linear-layout vertical="false" class="pageHeader">
-		<div><button is="d-button" onclick="leftPane.show()"></button></div>
+		<button class="appButton" onclick="leftPane.toggle()">Menu</button>
 		<div class="fill titleStyle">Deliteful Mobile App</div>
-		<div><button is="d-button"></button></div>
 	</d-linear-layout>
 	<!-- Main content (ViewStack) -->
 	<d-view-stack id="vs" class="fill">
@@ -87,10 +93,10 @@
 	</d-view-stack>
 	<!-- Footer -->
 	<d-linear-layout vertical="false" class="pageFooter">
-		<div class="fill"><button is="d-button" onclick="vs.show(aaa)"></button></div>
-		<div class="fill"><button is="d-button" onclick="vs.show(bbb)"></button></div>
-		<div class="fill"><button is="d-button" onclick="vs.show(ccc)"></button></div>
-		<div class="fill"><button is="d-button" onclick="vs.show(ddd)"></button></div>
+		<div class="fill"><button class="appButton" onclick="vs.show(aaa)">A</button></div>
+		<div class="fill"><button class="appButton" onclick="vs.show(bbb)">B</button></div>
+		<div class="fill"><button class="appButton" onclick="vs.show(ccc)">C</button></div>
+		<div class="fill"><button class="appButton" onclick="vs.show(ddd)">D</button></div>
 	</d-linear-layout>
 </d-linear-layout>
 </body>