diff --git a/README.md b/README.md
index 60504a8adf7..f9dd2d8e08d 100644
--- a/README.md
+++ b/README.md
@@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 
 We have a badge! Link it to your live Storybook example.
 
-![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)
+![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)
 
 ```md
-[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
+[![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)](link to site)
 ```
 
 If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
index 9940d899440..ea4ce8e1c8a 100755
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@@ -58,10 +58,11 @@ addParameters({
   a11y: {
     // ... axe options
     element: '#root', // optional selector which element to inspect
+    config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
   },
 });
 
-
 storiesOf('button', module)
   .add('Accessible', () => (
     <button style={{ backgroundColor: 'black', color: 'white', }}>
diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js
index 2a480ebacc2..375b9a723d4 100644
--- a/addons/a11y/src/components/ColorBlindness.js
+++ b/addons/a11y/src/components/ColorBlindness.js
@@ -18,6 +18,9 @@ const ColorIcon = styled.span(
   },
   ({ filter }) => ({
     filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
   })
 );
 
diff --git a/addons/a11y/src/index.js b/addons/a11y/src/index.js
index 475b5a69e22..8875e938a7b 100644
--- a/addons/a11y/src/index.js
+++ b/addons/a11y/src/index.js
@@ -9,7 +9,7 @@ import EVENTS, { PARAM_KEY } from './constants';
 
 const channel = addons.getChannel();
 let progress = Promise.resolve();
-let options;
+let setup;
 
 const getElement = () => {
   const storyRoot = document.getElementById('story-root');
@@ -24,13 +24,20 @@ const report = input => {
   channel.emit(EVENTS.RESULT, input);
 };
 
-const run = o => {
+const run = (c, o) => {
   progress = progress.then(() => {
     axe.reset();
-    if (o) {
-      axe.configure(o);
+    if (c) {
+      axe.configure(c);
     }
-    return axe.run(getElement()).then(report);
+    return axe
+      .run(
+        getElement(),
+        o || {
+          restoreScroll: true,
+        }
+      )
+      .then(report);
   });
 };
 
@@ -41,14 +48,14 @@ export const withA11Y = makeDecorator({
   allowDeprecatedUsage: false,
 
   wrapper: (getStory, context, opt) => {
-    options = opt.parameters || opt.options;
+    setup = opt.parameters || opt.options;
 
     return getStory(context);
   },
 });
 
-channel.on(STORY_RENDERED, () => run(options));
-channel.on(EVENTS.REQUEST, () => run(options));
+channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
+channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
@@ -63,7 +70,7 @@ export const checkA11y = deprecate(
 // TODO: REMOVE at v6.0.0
 export const configureA11y = deprecate(
   config => {
-    options = config;
+    setup = config;
   },
   stripIndents`
     configureA11y is deprecated, please configure addon-a11y using the addParameter api:
diff --git a/addons/backgrounds/src/components/ColorIcon.tsx b/addons/backgrounds/src/components/ColorIcon.tsx
index aabdce3ffd4..00da34e6fd1 100644
--- a/addons/backgrounds/src/components/ColorIcon.tsx
+++ b/addons/backgrounds/src/components/ColorIcon.tsx
@@ -1,9 +1,14 @@
 import { styled } from '@storybook/theming';
 
-export const ColorIcon = styled.span(({ background }: { background: string }) => ({
-  borderRadius: '1rem',
-  display: 'block',
-  height: '1rem',
-  width: '1rem',
-  background,
-}));
+export const ColorIcon = styled.span(
+  ({ background }: { background: string }) => ({
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
+    background,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  }),
+);
diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
index b9b4b3450c6..76f0011a804 100644
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -8,7 +8,7 @@ import { SET_STORIES } from '@storybook/core-events';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components';
+import { ColorIcon } from '../components/ColorIcon';
 import { BackgroundConfig, BackgroundSelectorItem } from '../models';
 
 const iframeId = 'storybook-preview-background';
diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.js
index 333fbe831bd..d0042f2ea6c 100644
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.js
@@ -20,7 +20,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
   onClick: () => {
     change({ selected: id, expanded: false });
   },
-  right: `${value.width}-${value.height}`,
+  right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
   value,
 }));
 
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index cefbf2d199d..422c06024d5 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -41,7 +41,13 @@ addDecorator(storyFn => (
 ));
 
 addParameters({
-  a11y: {},
+  a11y: {
+    configure: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
   options: {
     name: 'Storybook',
     hierarchySeparator: /\/|\./,
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
new file mode 100644
index 00000000000..8b1e255497b
--- /dev/null
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+  title: 'Core|Scroll',
+};
+
+export const story1 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story1.title = 'story with 100vh padding 1';
+
+export const story2 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story2.title = 'story with 100vh padding 2';
diff --git a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
index 542e51cfc04..be34263df94 100644
--- a/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
@@ -2641,7 +2641,19 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
     "hierarchySeparator": {},
     "name": "Storybook"
   },
-  "a11y": {},
+  "a11y": {
+    "configure": {},
+    "options": {
+      "checks": {
+        "color-contrast": {
+          "options": {
+            "noScroll": true
+          }
+        }
+      },
+      "restoreScroll": true
+    }
+  },
   "viewports": {
     "iphone5": {
       "name": "iPhone 5",
@@ -2811,6 +2823,34 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
 </pre>
 `;
 
+exports[`Storyshots Core|Scroll story with 100vh padding 1 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
+exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
 exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
 .emotion-1 {
   display: block;
@@ -3504,29 +3544,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 +3568,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 +4075,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 +4099,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/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index feccd7e9f92..f28d06e5e06 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@storybook/channels": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
     "global": "^4.3.2",
     "telejson": "^1.0.1"
   },
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index 90f23cc4968..25d672a6e23 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -1,5 +1,7 @@
 import { window, document } from 'global';
 import Channel, { ChannelEvent, ChannelHandler } from '@storybook/channels';
+import { logger } from '@storybook/client-logger';
+
 import { isJSON, parse, stringify } from 'telejson';
 
 interface RawEvent {
@@ -90,15 +92,12 @@ export class PostmsgTransport {
       const { data } = rawEvent;
       const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;
       if (key === KEY) {
-        // tslint:disable-next-line no-console
-        console.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
+        logger.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
         this.handler(event);
       }
     } catch (error) {
-      // tslint:disable-next-line no-console
-      console.error(error);
-      // tslint:disable-next-line no-debugger
-      debugger;
+      logger.error(error);
+      // debugger;
     }
   }
 }
diff --git a/lib/client-logger/src/index.test.ts b/lib/client-logger/src/index.test.ts
index ee9eaf5dfa8..0d2bc5782bc 100644
--- a/lib/client-logger/src/index.test.ts
+++ b/lib/client-logger/src/index.test.ts
@@ -3,17 +3,29 @@ import { logger } from '.';
 describe('client-logger', () => {
   const initialConsole = { ...global.console };
   beforeEach(() => {
+    global.console.debug = jest.fn();
     global.console.log = jest.fn();
+    global.console.info = jest.fn();
     global.console.warn = jest.fn();
     global.console.error = jest.fn();
   });
   afterAll(() => {
     global.console = initialConsole;
   });
+  it('should have an debug method that displays the message in red, with a trace', () => {
+    const message = 'debug message';
+    logger.debug(message);
+    expect(global.console.debug).toHaveBeenCalledWith(message);
+  });
+  it('should have an log method that displays the message in red, with a trace', () => {
+    const message = 'log message';
+    logger.log(message);
+    expect(global.console.log).toHaveBeenCalledWith(message);
+  });
   it('should have an info method that displays the message', () => {
     const message = 'information';
     logger.info(message);
-    expect(global.console.log).toHaveBeenCalledWith(message);
+    expect(global.console.info).toHaveBeenCalledWith(message);
   });
   it('should have a warning method that displays the message in yellow, with a trace', () => {
     const message = 'warning message';
diff --git a/lib/client-logger/src/index.ts b/lib/client-logger/src/index.ts
index 77a01d8b4d4..c501e05b99e 100644
--- a/lib/client-logger/src/index.ts
+++ b/lib/client-logger/src/index.ts
@@ -1,7 +1,11 @@
 const { console } = global;
 
+/* tslint:disable: no-console */
+
 export const logger = {
-  info: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
+  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
   warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
   error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 670293398e9..deaa08b6774 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -131,11 +131,6 @@ export default function start(render, { decorateStory } = {}) {
         return;
       }
 
-      if (!forceRender) {
-        // Scroll to top of the page when changing story
-        document.documentElement.scrollTop = 0;
-      }
-
       if (!forceRender && previousKind && previousStory) {
         addons.getChannel().emit(Events.STORY_CHANGED, id);
       }
@@ -155,6 +150,10 @@ export default function start(render, { decorateStory } = {}) {
     previousRevision = revision;
     previousKind = kind;
     previousStory = name;
+
+    if (!forceRender) {
+      document.documentElement.scrollTop = 0;
+    }
   };
 
   // initialize the UI
diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
index 8521c926594..0de2f833a5a 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-8"
+    >
+      Canvas
     </button>
     <button
       class="emotion-7"
     >
-      Preview
-    </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 597fa9482a9..8a3be8a6795 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 66dd9e3268c..17181209d86 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 75984a3d7dc..1c9cf0c7026 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 e2e905e565b..00ace1845d2 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;
@@ -500,7 +529,7 @@ Array [
   margin-right: 15px;
 }
 
-.emotion-8 {
+.emotion-22 {
   height: 40px;
   background: none;
   color: inherit;
@@ -513,16 +542,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);
@@ -614,6 +649,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;
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index 81f6e188949..0c5813f1a8a 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, Separator } 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"
@@ -128,13 +136,13 @@ const getTools = memoize(10)(
       {
         match: p => p.viewMode === 'story',
         render: () => (
-          <IconButton
-            key="opener"
-            onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
-            title="Open story in new tab"
+          <DesktopOnlyIconButton
+            key="full"
+            onClick={actions.toggleFullscreen}
+            title="Go full screen"
           >
-            <Icons icon="share" />
-          </IconButton>
+            <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
+          </DesktopOnlyIconButton>
         ),
       },
       {
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
index 1979486b9a8..871c8913c45 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;
@@ -753,29 +753,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);
@@ -800,6 +777,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;
@@ -2139,29 +2139,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);
@@ -2186,6 +2163,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;