diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 3cdd355530e3..33596242a27d 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -3504,29 +3504,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   margin-right: 15px;
 }
 
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -3551,6 +3528,29 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   width: 100%;
 }
 
+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-96 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4035,29 +4035,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   margin-right: 15px;
 }
 
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -4082,6 +4059,29 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
   width: 100%;
 }
 
+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-96 {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
index 8521c926594d..0de2f833a5a6 100644
--- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
+++ b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
@@ -326,6 +326,51 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 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-11 {
   position: fixed;
   left: 0;
@@ -350,6 +395,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(-80vw);
   -ms-transform: translateX(-80vw);
@@ -357,6 +403,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   left: 0;
 }
 
+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -388,6 +442,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 100%;
   -webkit-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
@@ -395,6 +450,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   left: 0;
 }
 
+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
   background: deepskyblue;
   position: absolute;
@@ -426,6 +489,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(80vw);
   -ms-transform: translateX(80vw);
@@ -433,6 +497,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   right: 0;
 }
 
+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
   background: orangered;
   position: absolute;
@@ -467,6 +539,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }
 
 .emotion-10 > * {
@@ -528,22 +602,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
     <div
       class="emotion-5"
     >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
         >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
   "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
       </div>
     </div>
   </div>
@@ -553,17 +625,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
     <button
       class="emotion-7"
     >
-      Nav
+      Sidebar
     </button>
     <button
-      class="emotion-7"
+      class="emotion-8"
     >
-      Preview
+      Canvas
     </button>
     <button
       class="emotion-7"
     >
-      Panel
+      Addons
     </button>
   </nav>
 </div>
@@ -639,6 +711,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(-80vw);
   -ms-transform: translateX(-80vw);
@@ -646,6 +719,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   left: 0;
 }
 
+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -677,6 +758,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 100%;
   -webkit-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
@@ -684,6 +766,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   left: 0;
 }
 
+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
   background: deepskyblue;
   position: absolute;
@@ -715,6 +805,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(80vw);
   -ms-transform: translateX(80vw);
@@ -722,6 +813,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   right: 0;
 }
 
+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
   background: orangered;
   position: absolute;
@@ -756,6 +855,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }
 
 .emotion-10 > * {
@@ -817,22 +918,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
     <div
       class="emotion-5"
     >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
         >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
   "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
       </div>
     </div>
   </div>
@@ -842,17 +941,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
     <button
       class="emotion-7"
     >
-      Nav
+      Sidebar
     </button>
     <button
       class="emotion-7"
     >
-      Preview
+      Canvas
     </button>
     <button
       class="emotion-7"
     >
-      Panel
+      Addons
     </button>
   </nav>
 </div>
@@ -928,6 +1027,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(-80vw);
   -ms-transform: translateX(-80vw);
@@ -935,6 +1035,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   left: 0;
 }
 
+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -966,6 +1074,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 100%;
   -webkit-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
@@ -973,6 +1082,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   left: 0;
 }
 
+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
   background: deepskyblue;
   position: absolute;
@@ -1004,6 +1121,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(80vw);
   -ms-transform: translateX(80vw);
@@ -1011,6 +1129,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   right: 0;
 }
 
+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
   background: orangered;
   position: absolute;
@@ -1045,6 +1171,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }
 
 .emotion-10 > * {
@@ -1106,22 +1234,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
     <div
       class="emotion-5"
     >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
         >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
   "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
       </div>
     </div>
   </div>
@@ -1131,17 +1257,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
     <button
       class="emotion-7"
     >
-      Nav
+      Sidebar
     </button>
     <button
       class="emotion-7"
     >
-      Preview
+      Canvas
     </button>
     <button
       class="emotion-7"
     >
-      Panel
+      Addons
     </button>
   </nav>
 </div>
@@ -1217,6 +1343,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(-80vw);
   -ms-transform: translateX(-80vw);
@@ -1224,6 +1351,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   left: 0;
 }
 
+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
   background: hotpink;
   position: absolute;
@@ -1255,6 +1390,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 100%;
   -webkit-transform: translateX(0) scale(1);
   -ms-transform: translateX(0) scale(1);
@@ -1262,6 +1398,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   left: 0;
 }
 
+.emotion-4:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
   background: deepskyblue;
   position: absolute;
@@ -1293,6 +1437,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   position: absolute;
   top: 0;
   height: 100%;
+  background: #FFFFFF;
   width: 80vw;
   -webkit-transform: translateX(80vw);
   -ms-transform: translateX(80vw);
@@ -1300,6 +1445,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   right: 0;
 }
 
+.emotion-6:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-5 {
   background: orangered;
   position: absolute;
@@ -1334,6 +1487,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }
 
 .emotion-10 > * {
@@ -1434,23 +1589,19 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
       class="emotion-6"
     >
       <div
-        hidden=""
+        class="emotion-5"
+        color="orangered"
       >
-        <div
-          class="emotion-5"
-          color="orangered"
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
         >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
   "hidden": true
 }
-          </pre>
-        </div>
+        </pre>
       </div>
     </div>
   </div>
@@ -1460,7 +1611,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
     <button
       class="emotion-8"
     >
-      Nav
+      Sidebar
     </button>
     <button
       class="emotion-8"
diff --git a/lib/ui/src/components/layout/mobile.js b/lib/ui/src/components/layout/mobile.js
index 597fa9482a95..8a3be8a67956 100644
--- a/lib/ui/src/components/layout/mobile.js
+++ b/lib/ui/src/components/layout/mobile.js
@@ -12,6 +12,15 @@ const Pane = styled.div(
     top: 0,
     height: '100%',
   },
+  ({ theme }) => ({
+    background: theme.background.content,
+    '&:nth-of-type(1)': {
+      borderRight: `1px solid ${theme.appBorderColor}`,
+    },
+    '&:nth-of-type(3)': {
+      borderLeft: `1px solid ${theme.appBorderColor}`,
+    },
+  }),
   ({ index }) => {
     switch (index) {
       case 0: {
@@ -93,18 +102,24 @@ Panels.Container = styled.div({
   height: 'calc(100% - 40px)',
 });
 
-const Bar = styled.nav({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  width: '100vw',
-  height: 40,
-  display: 'flex',
+const Bar = styled.nav(
+  {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    width: '100vw',
+    height: 40,
+    display: 'flex',
+    boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',
 
-  '& > *': {
-    flex: 1,
+    '& > *': {
+      flex: 1,
+    },
   },
-});
+  ({ theme }) => ({
+    background: theme.barBg,
+  })
+);
 
 // eslint-disable-next-line react/no-multi-comp
 class Mobile extends Component {
@@ -138,20 +153,25 @@ class Mobile extends Component {
               <Route key={key}>{content()}</Route>
             ))}
           </div>
-          <div hidden={!viewMode}>
-            <Panel hidden={!viewMode} />
-          </div>
+          <Panel hidden={!viewMode} />
         </Panels>
         <Bar active={active}>
-          <TabButton onClick={() => this.setState({ active: 0 })}>Nav</TabButton>
-          <TabButton onClick={() => this.setState({ active: 1 })}>
-            {viewMode ? 'Preview' : null}
+          <TabButton onClick={() => this.setState({ active: 0 })} active={active === 0}>
+            Sidebar
+          </TabButton>
+          <TabButton
+            onClick={() => this.setState({ active: 1 })}
+            active={active === 1 || active === false}
+          >
+            {viewMode ? 'Canvas' : null}
             {pages.map(({ key, route: Route }) => (
               <Route key={key}>{key}</Route>
             ))}
           </TabButton>
           {viewMode ? (
-            <TabButton onClick={() => this.setState({ active: 2 })}>Panel</TabButton>
+            <TabButton onClick={() => this.setState({ active: 2 })} active={active === 2}>
+              Addons
+            </TabButton>
           ) : null}
         </Bar>
       </Root>
diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
index 64a6e9de7402..05d29aa2388c 100644
--- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
+++ b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
@@ -254,6 +254,12 @@ exports[`Storyshots UI|Panel default 1`] = `
   width: 15px;
 }
 
+@media (max-width:599px) {
+  .emotion-6 {
+    display: none;
+  }
+}
+
 .emotion-5 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
diff --git a/lib/ui/src/components/panel/panel.js b/lib/ui/src/components/panel/panel.js
index 75984a3d7dc9..1c9cf0c70268 100644
--- a/lib/ui/src/components/panel/panel.js
+++ b/lib/ui/src/components/panel/panel.js
@@ -1,7 +1,15 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';
 
+const DesktopOnlyIconButton = styled(IconButton)({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
 class SafeTab extends Component {
   constructor(props) {
     super(props);
@@ -45,12 +53,20 @@ const AddonPanel = React.memo(({ panels, actions, selectedPanel, panelPosition }
     flex
     tools={
       <Fragment>
-        <IconButton key="position" onClick={actions.togglePosition} title="Change orientation">
+        <DesktopOnlyIconButton
+          key="position"
+          onClick={actions.togglePosition}
+          title="Change orientation"
+        >
           <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
-        </IconButton>
-        <IconButton key="visibility" onClick={actions.toggleVisibility} title="Hide addons">
+        </DesktopOnlyIconButton>
+        <DesktopOnlyIconButton
+          key="visibility"
+          onClick={actions.toggleVisibility}
+          title="Hide addons"
+        >
           <Icons icon="close" />
-        </IconButton>
+        </DesktopOnlyIconButton>
       </Fragment>
     }
     id="storybook-panel-root"
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
index 58d47410daad..bfa51224a2a4 100644
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
@@ -51,7 +51,7 @@ Array [
   margin-right: 15px;
 }
 
-.emotion-2 {
+.emotion-16 {
   height: 40px;
   background: none;
   color: inherit;
@@ -64,16 +64,22 @@ Array [
   transition: color 0.2s linear,border-bottom-color 0.2s linear;
 }
 
-.emotion-2:hover,
-.emotion-2:focus {
+.emotion-16:hover,
+.emotion-16:focus {
   outline: 0 none;
   color: #1EA7FD;
 }
 
-.emotion-2 > svg {
+.emotion-16 > svg {
   width: 15px;
 }
 
+@media (max-width:599px) {
+  .emotion-16 {
+    display: none;
+  }
+}
+
 .emotion-1 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -165,6 +171,29 @@ Array [
   visibility: hidden;
 }
 
+.emotion-2 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-2 > svg {
+  width: 15px;
+}
+
 .emotion-9 {
   width: 1px;
   height: 24px;
@@ -260,7 +289,7 @@ Array [
         title="side right"
       >
         <button
-          class="emotion-2"
+          class="emotion-16"
           title="Go full screen"
         >
           <svg
@@ -514,7 +543,7 @@ Array [
   margin-right: 15px;
 }
 
-.emotion-8 {
+.emotion-22 {
   height: 40px;
   background: none;
   color: inherit;
@@ -527,16 +556,22 @@ Array [
   transition: color 0.2s linear,border-bottom-color 0.2s linear;
 }
 
-.emotion-8:hover,
-.emotion-8:focus {
+.emotion-22:hover,
+.emotion-22:focus {
   outline: 0 none;
   color: #1EA7FD;
 }
 
-.emotion-8 > svg {
+.emotion-22 > svg {
   width: 15px;
 }
 
+@media (max-width:599px) {
+  .emotion-22 {
+    display: none;
+  }
+}
+
 .emotion-7 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -628,6 +663,29 @@ Array [
   visibility: hidden;
 }
 
+.emotion-8 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-8:hover,
+.emotion-8:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-8 > svg {
+  width: 15px;
+}
+
 .emotion-5 {
   width: 1px;
   height: 24px;
@@ -757,7 +815,7 @@ Array [
         title="side right"
       >
         <button
-          class="emotion-8"
+          class="emotion-22"
           title="Go full screen"
         >
           <svg
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index ffae2aeceeb0..0f9c477d8711 100644
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@@ -3,6 +3,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import memoize from 'memoizerific';
 
+import { styled } from '@storybook/theming';
 import { SET_CURRENT_STORY } from '@storybook/core-events';
 import { types } from '@storybook/addons';
 import { Icons, IconButton, TabButton, TabBar, interleaveSeparators } from '@storybook/components';
@@ -18,6 +19,13 @@ import { Grid, Background, BackgroundProvider, BackgroundConsumer } from './back
 
 import { IFrame } from './iframe';
 
+const DesktopOnlyIconButton = styled(IconButton)({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
 const renderIframe = (storyId, id, baseUrl) => (
   <IFrame
     key="iframe"
@@ -122,9 +130,13 @@ const getTools = memoize(10)(
       {
         match: p => p.viewMode === 'story',
         render: () => (
-          <IconButton key="full" onClick={actions.toggleFullscreen} title="Go full screen">
+          <DesktopOnlyIconButton
+            key="full"
+            onClick={actions.toggleFullscreen}
+            title="Go full screen"
+          >
             <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
-          </IconButton>
+          </DesktopOnlyIconButton>
         ),
       },
       {
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 3078db253789..813e83d8f1ab 100644
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
@@ -186,29 +186,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   margin-right: 15px;
 }
 
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -233,6 +210,29 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
   width: 100%;
 }
 
+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-14 {
   display: inline-block;
   -webkit-transition: all 150ms ease-out;
@@ -755,29 +755,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   margin-right: 15px;
 }
 
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -802,6 +779,29 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
   width: 100%;
 }
 
+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-38 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2143,29 +2143,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
   margin-right: 15px;
 }
 
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
   shape-rendering: inherit;
   -webkit-transform: translate3d(0,0,0);
@@ -2190,6 +2167,29 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
   width: 100%;
 }
 
+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;