diff --git a/packages/unleash-frontend-next/src/App.jsx b/packages/unleash-frontend-next/src/App.jsx
index 0ee89fbfd8..62e766288f 100644
--- a/packages/unleash-frontend-next/src/App.jsx
+++ b/packages/unleash-frontend-next/src/App.jsx
@@ -22,7 +22,8 @@ export default class App extends Component {
                 <Layout>
                     <NavDrawer
                         active={this.state.drawerActive}
-                        permanentAt="sm" style={{ width: '200px' }}>
+                        permanentAt="sm" style={{ width: '200px' }}
+                    >
                         <Navigation />
                     </NavDrawer>
                     <Panel scrollY={false}>
diff --git a/packages/unleash-frontend-next/src/theme/_config.scss b/packages/unleash-frontend-next/src/theme/_config.scss
index 8a351a4106..dfb00ac58b 100644
--- a/packages/unleash-frontend-next/src/theme/_config.scss
+++ b/packages/unleash-frontend-next/src/theme/_config.scss
@@ -1,8 +1,24 @@
 @import "~react-toolbox/lib/colors";
+@import "~react-toolbox/lib/globals";
 
 $color-primary:$palette-blue-400;
 $color-primary-dark: $palette-blue-700;
 
+$appbar-height: 4.4 * $unit !default;
+$appbar-height-m-portrait: 5.6 * $unit !default;
+$appbar-height-m-landscape: 4.8 * $unit !default;
+
+$navigation-drawer-desktop-width: 3 * $standard-increment-desktop !default;
+$navigation-drawer-max-desktop-width: 40 * $unit !default;
+
+// Mobile:
+// Width = Screen width − 56 dp
+// Maximum width: 320dp
+$navigation-drawer-mobile-width: 5 * $standard-increment-mobile !default;
+
+// sass doesn't like use of variable here: calc(100% - $standard-increment-mobile);
+$navigation-drawer-max-mobile-width: calc(100% - 5.6rem) !default;
+
 body {
     padding: 0;
     margin: 0;