diff --git a/frontend/CHANGELOG.md b/frontend/CHANGELOG.md
index f0a97a5508..2da0a08f3f 100644
--- a/frontend/CHANGELOG.md
+++ b/frontend/CHANGELOG.md
@@ -8,6 +8,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 The latest version of this document is always available in
 [releases](https://github.com/Unleash/unleash-frontend/releases).
 
+# 4.1.0-beta.1
+- Feat/new navigation (#314)
+
 # 4.0.5 fix: run use effect when value changes, not object (#315)
 - fix: run use effect when value changes, not object (#315)
 - fix: add flex wrap
diff --git a/frontend/package.json b/frontend/package.json
index 099321fb8b..8156df89c8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "unleash-frontend",
   "description": "unleash your features",
-  "version": "4.0.5",
+  "version": "4.0.10",
   "keywords": [
     "unleash",
     "feature toggle",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 377011c949..3006ccce7d 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -8,8 +8,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="unleash" />
         <title>Unleash - Enterprise ready feature toggles</title>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link
-            href="https://fonts.googleapis.com/icon?family=Material+Icons"
+            href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
             rel="stylesheet"
         />
     </head>
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 0ab5cdcfd6..d72c55a6ec 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1,45 +1,3 @@
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 300;
-    src: url('./assets/fonts/Roboto-300.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 400;
-    src: url('./assets/fonts/Roboto-400.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 500;
-    src: url('./assets/fonts/Roboto-500.ttf');
-}
-
-@font-face {
-    font-family: 'Roboto';
-    font-weight: 700;
-    src: url('./assets/fonts/Roboto-700.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 400;
-    src: url('./assets/fonts/Sen-Regular.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 500;
-    src: url('./assets/fonts/Sen-Bold.ttf');
-}
-
-@font-face {
-    font-family: 'Sen';
-    font-weight: 700;
-    src: url('./assets/fonts/Sen-ExtraBold.ttf');
-}
-
 * {
     box-sizing: border-box;
 }
@@ -52,7 +10,7 @@ html {
 
 body {
     height: 100%;
-    /* font-family: 'Sen'; */
+    font-family: 'Sen', sans-serif;
 }
 
 .MuiButton-root {
diff --git a/frontend/src/component/Reporting/ReportCard/ReportCard.module.scss b/frontend/src/component/Reporting/ReportCard/ReportCard.module.scss
index 7f76b5dd12..c22181a065 100644
--- a/frontend/src/component/Reporting/ReportCard/ReportCard.module.scss
+++ b/frontend/src/component/Reporting/ReportCard/ReportCard.module.scss
@@ -6,7 +6,7 @@
 
 .header {
     font-size: var(--h1-size);
-    font-weight: 500;
+    font-weight: 'bold';
     margin: 0 0 0.5rem 0;
 }
 
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.module.scss b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.module.scss
index b86dfe94d4..5a6f4b5275 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.module.scss
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.module.scss
@@ -27,7 +27,7 @@
 .reportToggleListHeading {
     font-size: var(--h1-size);
     margin: 0;
-    font-weight: 500;
+    font-weight: 'bold';
 }
 
 .reportingToggleTable {
diff --git a/frontend/src/component/Reporting/Reporting.module.scss b/frontend/src/component/Reporting/Reporting.module.scss
index 65aeff8b69..0b8e7dbb12 100644
--- a/frontend/src/component/Reporting/Reporting.module.scss
+++ b/frontend/src/component/Reporting/Reporting.module.scss
@@ -1,6 +1,6 @@
 .header {
     font-size: var(--h1-size);
-    font-weight: 500;
+    font-weight: 700;
     margin: 0 0 0.5rem 0;
 }
 
@@ -137,7 +137,7 @@
 .reportToggleListHeading {
     font-size: var(--h1-size);
     margin: 0;
-    font-weight: 500;
+    font-weight: 'bold';
 }
 
 .reportingToggleTable {
diff --git a/frontend/src/component/archive/archive.module.scss b/frontend/src/component/archive/archive.module.scss
index aadacd0034..eee33f7c27 100644
--- a/frontend/src/component/archive/archive.module.scss
+++ b/frontend/src/component/archive/archive.module.scss
@@ -3,7 +3,6 @@
     color: rgba(0, 0, 0, 0.54);
     align-items: center;
     padding: 0 16px 0 18px;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 }
 
 .listItemToggle {
@@ -16,7 +15,7 @@
     flex-shrink: 0;
     margin-right: 2px;
 }
-.listItemRevive{
+.listItemRevive {
     width: 5%;
     flex-shrink: 0;
     margin-right: 10%;
@@ -36,5 +35,3 @@
     float: right;
     margin-left: 8px !important;
 }
-
-
diff --git a/frontend/src/component/common/HeaderTitle/styles.js b/frontend/src/component/common/HeaderTitle/styles.js
index 44f6a9189c..cbf50c4b66 100644
--- a/frontend/src/component/common/HeaderTitle/styles.js
+++ b/frontend/src/component/common/HeaderTitle/styles.js
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
     },
     headerTitle: {
         fontSize: theme.fontSizes.mainHeader,
-        fontWeight: 500,
+        fontWeight: 'normal',
     },
     headerActions: {
         position: 'absolute',
diff --git a/frontend/src/component/common/common.module.scss b/frontend/src/component/common/common.module.scss
index 9cb2fa3b00..896769c8b5 100644
--- a/frontend/src/component/common/common.module.scss
+++ b/frontend/src/component/common/common.module.scss
@@ -83,7 +83,7 @@
 
 .toggleName {
     color: #37474f !important;
-    font-weight: 500;
+    font-weight: 700;
 }
 
 .toolbar {
diff --git a/frontend/src/component/feature/project-select-component.jsx b/frontend/src/component/feature/project-select-component.jsx
index 71575b3ad1..3c5af96313 100644
--- a/frontend/src/component/feature/project-select-component.jsx
+++ b/frontend/src/component/feature/project-select-component.jsx
@@ -29,7 +29,7 @@ class ProjectSelectComponent extends Component {
         if (filter) {
             options = projects
                 .filter(project => {
-                    return filter(project);
+                    return filter(project.id);
                 })
                 .map(formatOption);
         } else {
diff --git a/frontend/src/component/feature/variant/update-variant-container.jsx b/frontend/src/component/feature/variant/update-variant-container.jsx
index 063cb5cd3a..2ccd749a3f 100644
--- a/frontend/src/component/feature/variant/update-variant-container.jsx
+++ b/frontend/src/component/feature/variant/update-variant-container.jsx
@@ -16,9 +16,14 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     addVariant: variant => {
         const { featureToggle } = ownProps;
         const currentVariants = featureToggle.variants || [];
-        const stickiness = currentVariants[0].stickiness || 'default';
+        let stickiness;
+        if (currentVariants.length > 0) {
+            stickiness = currentVariants[0].stickiness || 'default';
+        } else {
+            stickiness = 'default'
+        }
         variant.stickiness = stickiness;
-        
+
         const variants = [...currentVariants, variant];
         updateWeight(variants, 1000);
         return requestUpdateFeatureToggleVariants(
diff --git a/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap b/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
index 04e47b5ae0..11841023e0 100644
--- a/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
+++ b/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
@@ -264,7 +264,7 @@ exports[`renders correctly with one feature 1`] = `
         onTouchStart={[Function]}
         style={
           Object {
-            "fontWeight": "500",
+            "fontWeight": "bold",
           }
         }
         tabIndex={0}
diff --git a/frontend/src/component/feature/view/status-update-component.jsx b/frontend/src/component/feature/view/status-update-component.jsx
index c5a1fd8c92..8a350169c2 100644
--- a/frontend/src/component/feature/view/status-update-component.jsx
+++ b/frontend/src/component/feature/view/status-update-component.jsx
@@ -31,7 +31,7 @@ export default function StatusUpdateComponent({ stale, updateStale }) {
             renderOptions={renderOptions}
             id="feature-stale-dropdown"
             label={stale ? 'STALE' : 'ACTIVE'}
-            style={{ fontWeight: '500' }}
+            style={{ fontWeight: 'bold' }}
         />
     );
 }
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
index 45f9a4c8cc..84a78ceaa1 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
@@ -36,7 +36,7 @@ export const useStyles = makeStyles(theme => ({
             display: 'none',
         },
         fontSize: '2rem',
-        fontWeight: '300',
+        fontWeight: 'normal',
     },
     logoContainer: {
         position: 'absolute',
diff --git a/frontend/src/themes/main-theme.js b/frontend/src/themes/main-theme.js
index 437afc4930..96238d5091 100644
--- a/frontend/src/themes/main-theme.js
+++ b/frontend/src/themes/main-theme.js
@@ -3,6 +3,8 @@ import { createMuiTheme } from '@material-ui/core/styles';
 const theme = createMuiTheme({
     typography: {
         fontFamily: ['Sen', 'Roboto, sans-serif'],
+        fontWeightBold: '700',
+        fontWeightMedium: '700',
     },
     palette: {
         primary: {
@@ -108,8 +110,8 @@ const theme = createMuiTheme({
     fontWeight: {
         thin: '300',
         medium: '400',
-        semi: '500',
-        bold: '600',
+        semi: '700',
+        bold: '700',
     },
 });
 
diff --git a/frontend/src/utils/project-filter-generator.ts b/frontend/src/utils/project-filter-generator.ts
index 0ce34c3e98..d8c6dc101f 100644
--- a/frontend/src/utils/project-filter-generator.ts
+++ b/frontend/src/utils/project-filter-generator.ts
@@ -23,14 +23,7 @@ export const projectFilterGenerator = (
         },
         {}
     );
-    return (project: string) => {
-        if (admin) {
-            return true;
-        }
-
-        if (permissionMap[project]) {
-            return true;
-        }
-        return false;
+    return (projectId: string) => {
+        return admin || permissionMap[projectId]
     };
 };