diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
index 8f01a53e5cfa..08fb8b206595 100644
--- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
+++ b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
@@ -1716,7 +1716,7 @@ exports[`Storyshots UI|Layout/Desktop page 1`] = `
 `;
 
 exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
-.emotion-7 {
+.emotion-8 {
   white-space: normal;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1752,16 +1752,16 @@ exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
   border-bottom-color: transparent;
 }
 
-.emotion-7:empty {
+.emotion-8:empty {
   display: none;
 }
 
-.emotion-7:focus {
+.emotion-8:focus {
   outline: 0 none;
   border-bottom-color: #1EA7FD;
 }
 
-.emotion-8 {
+.emotion-7 {
   white-space: normal;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1797,11 +1797,11 @@ exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
-.emotion-8:empty {
+.emotion-7:empty {
   display: none;
 }
 
-.emotion-8:focus {
+.emotion-7:focus {
   outline: 0 none;
   border-bottom-color: #1EA7FD;
 }
@@ -1909,6 +1909,9 @@ exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
   -ms-transform: translateX(-80vw);
   transform: translateX(-80vw);
   left: 0;
+  -webkit-transform: translateX(-0px);
+  -ms-transform: translateX(-0px);
+  transform: translateX(-0px);
 }
 
 .emotion-1:nth-of-type(1) {
@@ -1933,6 +1936,9 @@ exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
   -ms-transform: translateX(0) scale(1);
   transform: translateX(0) scale(1);
   left: 0;
+  -webkit-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
+  -ms-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
+  transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
 }
 
 .emotion-3:nth-of-type(1) {
@@ -2071,7 +2077,7 @@ exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
       Canvas
     </button>
     <button
-      class="emotion-7"
+      class="emotion-8"
     >
       Addons
     </button>
@@ -2125,6 +2131,51 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-8 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-8:empty {
+  display: none;
+}
+
+.emotion-8:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -2214,7 +2265,7 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
   height: calc(100% - 40px);
 }
 
-.emotion-1 {
+.emotion-5 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2224,21 +2275,41 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
   overflow: auto;
   background: #FFFFFF;
   width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
+  -webkit-transform: translateX(80vw);
+  -ms-transform: translateX(80vw);
+  transform: translateX(80vw);
+  right: 0;
 }
 
-.emotion-1:nth-of-type(1) {
+.emotion-5:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-1:nth-of-type(3) {
+.emotion-5:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-3 {
+.emotion-10 {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
+}
+
+.emotion-10 > * {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-1 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2247,22 +2318,22 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
   height: 100%;
   overflow: auto;
   background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
+  width: 80vw;
+  -webkit-transform: translateX(-80vw);
+  -ms-transform: translateX(-80vw);
+  transform: translateX(-80vw);
   left: 0;
 }
 
-.emotion-3:nth-of-type(1) {
+.emotion-1:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-3:nth-of-type(3) {
+.emotion-1:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-5 {
+.emotion-3 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2271,41 +2342,21 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
   height: 100%;
   overflow: auto;
   background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
+  width: 100%;
+  -webkit-transform: translateX(0) scale(1);
+  -ms-transform: translateX(0) scale(1);
+  transform: translateX(0) scale(1);
+  left: 0;
 }
 
-.emotion-5:nth-of-type(1) {
+.emotion-3:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-5:nth-of-type(3) {
+.emotion-3:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-10 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-10 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div
   class="emotion-11"
 >
@@ -2385,7 +2436,7 @@ exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
       Sidebar
     </button>
     <button
-      class="emotion-7"
+      class="emotion-8"
     >
       Canvas
     </button>
@@ -2444,6 +2495,51 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-9 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-9:empty {
+  display: none;
+}
+
+.emotion-9:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -2533,6 +2629,26 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
   height: calc(100% - 40px);
 }
 
+.emotion-10 {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
+}
+
+.emotion-10 > * {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
 .emotion-1 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
@@ -2571,6 +2687,9 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
   -ms-transform: translateX(0) scale(1);
   transform: translateX(0) scale(1);
   left: 0;
+  -webkit-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
+  -ms-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
+  transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
 }
 
 .emotion-3:nth-of-type(1) {
@@ -2595,6 +2714,9 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
   -ms-transform: translateX(80vw);
   transform: translateX(80vw);
   right: 0;
+  -webkit-transform: translateX(0px);
+  -ms-transform: translateX(0px);
+  transform: translateX(0px);
 }
 
 .emotion-5:nth-of-type(1) {
@@ -2605,26 +2727,6 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-10 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-10 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div
   class="emotion-11"
 >
@@ -2709,7 +2811,7 @@ exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
       Canvas
     </button>
     <button
-      class="emotion-7"
+      class="emotion-9"
     >
       Addons
     </button>
@@ -2763,6 +2865,51 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   border-bottom-color: #1EA7FD;
 }
 
+.emotion-9 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-9:empty {
+  display: none;
+}
+
+.emotion-9:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -2876,7 +3023,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   height: calc(100% - 40px);
 }
 
-.emotion-1 {
+.emotion-6 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2886,21 +3033,41 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   overflow: auto;
   background: #FFFFFF;
   width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
+  -webkit-transform: translateX(80vw);
+  -ms-transform: translateX(80vw);
+  transform: translateX(80vw);
+  right: 0;
 }
 
-.emotion-1:nth-of-type(1) {
+.emotion-6:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-1:nth-of-type(3) {
+.emotion-6:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-4 {
+.emotion-11 {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 40px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
+}
+
+.emotion-11 > * {
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-1 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2909,22 +3076,22 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   height: 100%;
   overflow: auto;
   background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
+  width: 80vw;
+  -webkit-transform: translateX(-80vw);
+  -ms-transform: translateX(-80vw);
+  transform: translateX(-80vw);
   left: 0;
 }
 
-.emotion-4:nth-of-type(1) {
+.emotion-1:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-4:nth-of-type(3) {
+.emotion-1:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-6 {
+.emotion-4 {
   -webkit-transition: -webkit-transform .2s ease;
   -webkit-transition: transform .2s ease;
   transition: transform .2s ease;
@@ -2933,41 +3100,21 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
   height: 100%;
   overflow: auto;
   background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
+  width: 100%;
+  -webkit-transform: translateX(0) scale(1);
+  -ms-transform: translateX(0) scale(1);
+  transform: translateX(0) scale(1);
+  left: 0;
 }
 
-.emotion-6:nth-of-type(1) {
+.emotion-4:nth-of-type(1) {
   border-right: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-6:nth-of-type(3) {
+.emotion-4:nth-of-type(3) {
   border-left: 1px solid rgba(0,0,0,.1);
 }
 
-.emotion-11 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-11 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
 <div
   class="emotion-12"
 >
@@ -3060,7 +3207,7 @@ exports[`Storyshots UI|Layout/Mobile page 1`] = `
       Sidebar
     </button>
     <button
-      class="emotion-8"
+      class="emotion-9"
     >
       Canvassettings
     </button>
diff --git a/lib/ui/src/components/layout/mobile.js b/lib/ui/src/components/layout/mobile.js
index f1eb234f660a..88157dd660ad 100644
--- a/lib/ui/src/components/layout/mobile.js
+++ b/lib/ui/src/components/layout/mobile.js
@@ -129,7 +129,7 @@ class Mobile extends Component {
 
     const { options } = props;
     this.state = {
-      active: !!options.initialActive,
+      active: options.initialActive,
     };
   }