diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 227437675..425510b94 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -43,4 +43,6 @@
 @import "steps/*";
 @import "themes/*";
 
+@import "navigation/*";
+
 @import "*"
diff --git a/app/assets/stylesheets/navigation/general.scss b/app/assets/stylesheets/navigation/general.scss
new file mode 100644
index 000000000..aa079d312
--- /dev/null
+++ b/app/assets/stylesheets/navigation/general.scss
@@ -0,0 +1,69 @@
+.sci--layout {
+  --breadcrumbs-navigation: 56px;
+  --left-navigation: 83px;
+  --navigator-navigation: 280px;
+  --top-navigation: 52px;
+  display: grid;
+  grid-template-areas: "top top top"
+                       "left breadcrumbs breadcrumbs"
+                       "left navigator content";
+  grid-template-columns: var(--left-navigation) var(--navigator-navigation) auto;
+  grid-template-rows: var(--top-navigation) var(--breadcrumbs-navigation) auto;
+  height: 100vh;
+  position: relative;
+  transition: .4s $timing-function-standard;
+  width: 100%;
+
+  &[data-breadcrumbs-collapsed="true"] {
+    --breadcrumbs-navigation: 0px;
+  }
+
+  &[data-navigator-collapsed="true"] {
+    --navigator-navigation: 0px;
+  }
+
+  .sci--layout-navigation-top {
+    grid-area: top;
+    height: var(--top-navigation);
+    position: fixed;
+    width: 100vw;
+    z-index: 600;
+  }
+
+  .sci--layout-navigation-left {
+    grid-area: left;
+    height: calc(100vh - var(--top-navigation));
+    left: 0;
+    position: fixed;
+    top: var(--top-navigation);
+    width: var(--left-navigation);
+    z-index: 600;
+  }
+
+  .sci--layout-navigation-navigator {
+    grid-area: navigator;
+    height: calc(100vh - var(--top-navigation) - var(--breadcrumbs-navigation));
+    left: var(--left-navigation);
+    position: fixed;
+    top: calc(var(--top-navigation) + var(--breadcrumbs-navigation));
+    transition: .4s $timing-function-standard;
+    width: var(--navigator-navigation);
+    z-index: 550;
+  }
+
+  .sci--layout-navigation-breadcrumbs {
+    grid-area: breadcrumbs;
+    height: var(--breadcrumbs-navigation);
+    left: var(--left-navigation);
+    position: fixed;
+    top: var(--top-navigation);
+    transition: .4s $timing-function-standard;
+    width: calc(100vw - var(--left-navigation));
+    z-index: 600;
+  }
+
+  .sci--layout-content {
+    grid-area: content;
+    padding: 0 1em;
+  }
+}
diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss
index 5fb5c9b1a..2d77e4dc0 100644
--- a/app/assets/stylesheets/themes/menu_bar.scss
+++ b/app/assets/stylesheets/themes/menu_bar.scss
@@ -7,13 +7,6 @@
 
 .menu-bar {
   background-color: $color-white;
-  box-shadow: $flyout-shadow;
-  height: 100%;
-  left: 0;
-  padding-bottom: 50px;
-  position: fixed;
-  width: var(--menu-bar-width);
-  z-index: 1001;
 
   .scroll-wrapper {
     height: 100%;
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index a00535b6b..3751dde5f 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -55,7 +55,35 @@
     <span style="display: none;" data-hook="body-js"></span>
     <span style="display: none;" data-hook="application-body-html"></span>
 
-    <%= render "shared/navigation" %>
+
+    <div class="sci--layout" data-breadcrumbs-collapsed="true" data-navigator-collapsed="<%= !content_for?(:sidebar_title) %>">
+      <div class="sci--layout-navigation-top">
+        <%= render "shared/navigation/top" %>
+      </div>
+      <div class="sci--layout-navigation-left">
+        <%= render "shared/navigation/left" if user_signed_in? %>
+      </div>
+      <div class="sci--layout-navigation-navigator">
+        <%= render "shared/navigation/navigator" %>
+      </div>
+      <div class="sci--layout-navigation-breadcrumbs">
+        <%= render "shared/navigation/breadcrumbs" %>
+      </div>
+      <div class="sci--layout-content">
+        <% if user_signed_in? && current_user.teams.blank? && !(activities_are_selected? || settings_are_selected?) %>
+          <!-- If member of no teams -->
+          <div id="no-teams-jumbotron" class="jumbotron">
+            <h2><%=t 'general.no_teams.title' %></h2>
+            <p data-hook="general-no-teams-text"><%=t 'general.no_teams.text' %></p>
+          </div>
+        <% else %>
+          <%= yield :content %>
+        <% end %>
+      </div>
+    </div>
+
+    <%= render partial: 'shared/flash_alerts',
+                 locals: { flash: flash, notice: notice, alert: alert } %>
 
     <% if user_signed_in? %>
       <%= render "shared/about_modal" %>
@@ -73,23 +101,6 @@
       <%= render partial: "/system_notifications/system_notification_modal", locals: { notification: nil} %>
     <% end %>
 
-    <%= render partial: 'shared/flash_alerts',
-                 locals: { flash: flash, notice: notice, alert: alert } %>
-
-    <%= render "shared/left_menu_bar" if user_signed_in? %>
-
-    <div id="content-wrapper">
-      <% if user_signed_in? && current_user.teams.blank? && !(activities_are_selected? || settings_are_selected?) %>
-        <!-- If member of no teams -->
-        <div id="no-teams-jumbotron" class="jumbotron">
-          <h2><%=t 'general.no_teams.title' %></h2>
-          <p data-hook="general-no-teams-text"><%=t 'general.no_teams.text' %></p>
-        </div>
-      <% else %>
-        <%= yield :content %>
-      <% end %>
-    </div>
-
     <span style="display: none;" data-hook="application-body-end-html"></span>
 
     <script data-hook="footer-js">
diff --git a/app/views/layouts/fluid.html.erb b/app/views/layouts/fluid.html.erb
index 04a85fcd5..47ad8fd96 100644
--- a/app/views/layouts/fluid.html.erb
+++ b/app/views/layouts/fluid.html.erb
@@ -1,25 +1,7 @@
 <% content_for :content do %>
-    <div class="container-fluid" id="wrapper">
-      <div id="sidebar-wrapper" class="sidebar-container <%= yield :sidebar_wrapper_class %>" data-sidebar-url="<%= yield :sidebar_url %>">
-
-        <div class="sidebar-header">
-          <div class="sidebar-title">
-            <%= yield :sidebar_title %>
-          </div>
-          <i class="fas fa-times close-sidebar"></i>
-        </div>
-        <div class="fas fa-angle-double-right show-sidebar"></div>
-        <div class="sidebar-body">
-          <%= yield :sidebar %>
-        </div>
-        <div class="sidebar-footer">
-          <%= yield :sidebar_footer %>
-        </div>
-      </div>
-      <%= yield :secondary_navigation %>
-      <div class="container-fluid <%= yield :container_class %>" id="fluid-content">
-        <%= yield %>
-      </div>
-    </div>
+  <%= yield :secondary_navigation %>
+  <div class="container-fluid <%= yield :container_class %>" id="fluid-content">
+    <%= yield %>
+  </div>
 <% end %>
 <%= render template: 'layouts/application' %>
diff --git a/app/views/shared/navigation/_breadcrumbs.html.erb b/app/views/shared/navigation/_breadcrumbs.html.erb
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/navigation/_left.html.erb
similarity index 100%
rename from app/views/shared/_left_menu_bar.html.erb
rename to app/views/shared/navigation/_left.html.erb
diff --git a/app/views/shared/navigation/_navigator.html.erb b/app/views/shared/navigation/_navigator.html.erb
new file mode 100644
index 000000000..fbabb3bba
--- /dev/null
+++ b/app/views/shared/navigation/_navigator.html.erb
@@ -0,0 +1,17 @@
+<% if content_for?(:sidebar_title) %>
+  <div id="sidebar-wrapper" class="sidebar-container <%= yield :sidebar_wrapper_class %>" data-sidebar-url="<%= yield :sidebar_url %>">
+    <div class="sidebar-header">
+      <div class="sidebar-title">
+        <%= yield :sidebar_title %>
+      </div>
+      <i class="fas fa-times close-sidebar"></i>
+    </div>
+    <div class="fas fa-angle-double-right show-sidebar"></div>
+    <div class="sidebar-body">
+      <%= yield :sidebar %>
+    </div>
+    <div class="sidebar-footer">
+      <%= yield :sidebar_footer %>
+    </div>
+  </div>
+<% end %>
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/navigation/_top.html.erb
similarity index 98%
rename from app/views/shared/_navigation.html.erb
rename to app/views/shared/navigation/_top.html.erb
index c34af43ce..fa52b3ea2 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/navigation/_top.html.erb
@@ -1,6 +1,3 @@
-<nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
-  <div class="container-fluid">
-
     <!-- header -->
     <div class="navbar-header">
       <% if user_signed_in? %>
@@ -188,8 +185,6 @@
       </ul>
     </div>
     <% end %>
-  </div>
-</nav>
 <div id="loading-animation"></div>
 
 <%= javascript_include_tag("system_notifications/index") %>