diff --git a/ui/app/app.js b/ui/app/app.js
index 8aae38067..01e36cc62 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -122,9 +122,9 @@ App.prototype.renderAppBar = function () {
           background: props.isUnlocked ? 'white' : 'none',
           height: '36px',
           position: 'relative',
-          zIndex: 2,
+          zIndex: 10,
         },
-      }, props.isUnlocked && [
+      }, [
 
         h('div', {
           style: {
@@ -159,14 +159,14 @@ App.prototype.renderAppBar = function () {
         ]),
 
         // metamask name
-        h('h1', {
+        props.isUnlocked && h('h1', {
           style: {
             position: 'relative',
             left: '9px',
           },
         }, 'MetaMask'),
 
-        h('div', {
+        props.isUnlocked && h('div', {
           style: {
             display: 'flex',
             flexDirection: 'row',
@@ -175,7 +175,7 @@ App.prototype.renderAppBar = function () {
         }, [
 
           // small accounts nav
-          h(Tooltip, { title: 'Switch Accounts' }, [
+          props.isUnlocked && h(Tooltip, { title: 'Switch Accounts' }, [
             h('img.cursor-pointer.color-orange', {
               src: 'images/switch_acc.svg',
               style: {
@@ -190,7 +190,7 @@ App.prototype.renderAppBar = function () {
           ]),
 
           // hamburger
-          h(SandwichExpando, {
+          props.isUnlocked && h(SandwichExpando, {
             width: 16,
             barHeight: 2,
             padding: 0,
diff --git a/ui/app/components/mascot.js b/ui/app/components/mascot.js
index f015d0c4d..973ec2cad 100644
--- a/ui/app/components/mascot.js
+++ b/ui/app/components/mascot.js
@@ -27,7 +27,7 @@ Mascot.prototype.render = function () {
   this.handleAnimationEvents()
 
   return h('#metamask-mascot-container', {
-    style: { zIndex: 2 },
+    style: { zIndex: 0 },
   })
 }