diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
new file mode 100644
index 0000000000..aaf46d24db
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbappheader.directive.js
@@ -0,0 +1,65 @@
+(function () {
+    "use strict";
+
+    function AppHeaderDirective(eventsService, appState) {
+
+        function link(scope, el, attr, ctrl) {
+
+            var evts = [];
+
+            // the null is important because we do an explicit bool check on this in the view
+            // the avatar is by default the umbraco logo
+            scope.authenticated = null;
+            scope.avatar = [
+                { value: "assets/img/application/logo.png" },
+                { value: "assets/img/application/logo@2x.png" },
+                { value: "assets/img/application/logo@3x.png" }
+            ];
+
+            // when a user logs out or timesout
+            evts.push(eventsService.on("app.notAuthenticated", function() {
+                scope.authenticated = false;
+            }));
+
+            // when the application is ready and the user is authorized setup the data
+            evts.push(eventsService.on("app.ready", function(evt, data) {
+                scope.authenticated = true;
+            }));
+
+            // toggle the help dialog by raising the global app state to toggle the help drawer
+            scope.helpClick = function () {
+                var showDrawer = appState.getDrawerState("showDrawer");
+                var drawer = { view: "help", show: !showDrawer };
+                appState.setDrawerState("view", drawer.view);
+                appState.setDrawerState("showDrawer", drawer.show);
+            };
+
+            scope.avatarClick = function () {
+                scope.userDialog = {
+                    view: "user",
+                    show: true,
+                    close: function (oldModel) {
+                        scope.userDialog.show = false;
+                        scope.userDialog = null;
+                    }
+                };
+            };
+
+        }
+
+        var directive = {
+            transclude: true,
+            restrict: "E",
+            replace: true,
+            templateUrl: "views/components/application/umb-app-header.html",
+            link: link,
+            scope: {}
+        };
+
+        return directive;
+
+    }
+
+    angular.module("umbraco.directives").directive("umbAppHeader", AppHeaderDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
index 87e0cb62f4..fab05d8deb 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsections.directive.js
@@ -18,32 +18,21 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
             scope.showTray = false; //appState.getGlobalState("showTray");
             scope.stickyNavigation = appState.getGlobalState("stickyNavigation");
             scope.needTray = false;
-            scope.trayAnimation = function() {
-                if (scope.showTray) {
-                    return 'slide';
-                }
-                else if (scope.showTray === false) {
-                    return 'slide';
-                }
-                else {
-                    return '';
-                }
-            };
 
 			function loadSections(){
 			    sectionService.getSectionsForUser()
 					.then(function (result) {
 						scope.sections = result;
-						calculateHeight();
+						calculateWidth();
 					});
 			}
 
-			function calculateHeight(){
+			function calculateWidth(){
 				$timeout(function(){
-					//total height minus room for avatar and help icon
-					var height = $(window).height()-200;
+					//total width minus room for avatar, search, and help icon
+					var width = $(window).width()-200;
 					scope.totalSections = scope.sections.length;
-					scope.maxSections = Math.floor(height / 70);
+					scope.maxSections = Math.floor(width / 70);
 					scope.needTray = false;
 
 					if(scope.totalSections > scope.maxSections){
@@ -84,40 +73,7 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			});
 
 			//on page resize
-			window.onresize = calculateHeight;
-
-			scope.avatarClick = function(){
-
-                if(scope.helpDialog) {
-                    closeHelpDialog();
-                }
-
-                if(!scope.userDialog) {
-                    scope.userDialog = {
-                        view: "user",
-                        show: true,
-                        close: function(oldModel) {
-                            closeUserDialog();
-                        }
-                    };
-                } else {
-                    closeUserDialog();
-                }
-
-			};
-
-            function closeUserDialog() {
-                scope.userDialog.show = false;
-                scope.userDialog = null;
-            }
-
-            //toggle the help dialog by raising the global app state to toggle the help drawer
-            scope.helpClick = function () {
-                var showDrawer = appState.getDrawerState("showDrawer");
-                var drawer = { view: "help", show: !showDrawer };
-                appState.setDrawerState("view", drawer.view);
-                appState.setDrawerState("showDrawer", drawer.show);
-            };
+			window.onresize = calculateWidth;
 
 			scope.sectionClick = function (event, section) {
 
@@ -154,14 +110,6 @@ function sectionsDirective($timeout, $window, navigationService, treeService, se
 			};
 
 			scope.trayClick = function () {
-                // close dialogs
-			    if (scope.userDialog) {
-                    closeUserDialog();
-			    }
-			    if (scope.helpDialog) {
-                    closeHelpDialog();
-			    }
-
 			    if (appState.getGlobalState("showTray") === true) {
 			        navigationService.hideTray();
 			    } else {
diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
index b4536f0e35..70b729febf 100644
--- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
@@ -11,13 +11,7 @@
 function MainController($scope, $rootScope, $location, $routeParams, $timeout, $http, $log, appState, treeService, notificationsService, userService, navigationService, historyService, updateChecker, assetsService, eventsService, umbRequestHelper, tmhDynamicLocale, localStorageService, tourService) {
 
     //the null is important because we do an explicit bool check on this in the view
-    //the avatar is by default the umbraco logo    
     $scope.authenticated = null;
-    $scope.avatar = [
-        { value: "assets/img/application/logo.png" },
-        { value: "assets/img/application/logo@2x.png" },
-        { value: "assets/img/application/logo@3x.png" }
-    ];
     $scope.touchDevice = appState.getGlobalState("touchDevice");
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/application/grid.less b/src/Umbraco.Web.UI.Client/src/less/application/grid.less
index 2671adba32..1454684099 100644
--- a/src/Umbraco.Web.UI.Client/src/less/application/grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/application/grid.less
@@ -41,7 +41,10 @@ body {
 
 #mainwrapper {
   position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
+  top: 0; 
+  left: 0; 
+  right: 0; 
+  bottom: 0;
   margin: 0;
 }
 
@@ -51,11 +54,18 @@ body.umb-drawer-is-visible #mainwrapper{
 
 #contentwrapper, #contentcolumn {
   position: absolute;
-  top: 0px; bottom: 0px; right: 0px; left: 80px;
+  top: 0px;
+  bottom: 0px;
+  right: 0px; 
+  left: 0px;
   z-index: 10;
   margin: 0
 }
 
+#contentwrapper {
+    top: 60px;
+}
+
 #umb-notifications-wrapper {
     left: 80px;
 }
@@ -75,30 +85,9 @@ body.umb-drawer-is-visible #mainwrapper{
 #leftcolumn {
   height: 100%;
   z-index: 1100;
-  width: 80px;
   float: left;
   position: absolute;
-}
-
-#applications {
-  z-index: 1000;
-  height: 100%;
-  left: 0px;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  text-align: center;
-  box-shadow: -10px 0px 25px rgba(0, 0, 0, 0.3)
-}
-
-#applications-tray {
-  z-index: 900;
-  left: 80px;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  height: 100%;
-  text-align: center;
+  top: 60px;
 }
 
 #search-form {
@@ -135,7 +124,7 @@ body.umb-drawer-is-visible #mainwrapper{
 }
 
 #navigation {
-  left: 80px;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -216,7 +205,7 @@ body.umb-drawer-is-visible #mainwrapper{
 }
 
 @media (min-width: 1101px) {
-  #contentwrapper, #umb-notifications-wrapper {left: 440px;}
+  #contentwrapper, #umb-notifications-wrapper {left: 360px;}
   #speechbubble {left: 360px;}
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index d2a80d93aa..f0e4184e70 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -81,6 +81,7 @@
 @import "forms/umb-validation-label.less";
 
 // Umbraco Components
+@import "components/application/umb-app-header.less";
 @import "components/application/umb-tour.less";
 @import "components/application/umb-backdrop.less";
 @import "components/application/umb-drawer.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
new file mode 100644
index 0000000000..bf89c1664c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less
@@ -0,0 +1,35 @@
+.umb-app-header {
+    background: @purple;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    max-width: 100%;
+    height: 60px;
+    padding: 0 20px;
+}
+
+.umb-app-header__actions {
+    display: flex;
+    list-style: none;
+    align-items: center;
+    margin: 0;
+    margin-right: 10px;
+}
+
+.umb-app-header__action a {
+    color: @white;
+    opacity: 0.6;
+    font-size: 24px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+
+.umb-app-header__action a:hover,
+.umb-app-header__action a:focus {
+    opacity: 1;
+    outline: none;
+}
+
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
index 0fae291e72..48f13fb174 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-drawer.less
@@ -5,8 +5,8 @@
     left: 0;
     z-index: 10;
     width: @drawerWidth;
-    box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
     background: @gray-9;
+    box-shadow: inset -5px 0 20px rgba(0,0,0,.3);
 }
 
 .umb-drawer-view {
diff --git a/src/Umbraco.Web.UI.Client/src/less/sections.less b/src/Umbraco.Web.UI.Client/src/less/sections.less
index b4e4e2ffbc..1719faab9f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/sections.less
+++ b/src/Umbraco.Web.UI.Client/src/less/sections.less
@@ -3,184 +3,91 @@
 
 ul.sections {
 	margin: 0;
-	display: block;
-	background: @purple;
-	height: 100%;
-	width: 80px;
-    border-right: 1px solid @purple-d1;
+	display: flex;
+	margin-left: -20px;
 }
 
-ul.sections li {
-	display: block;
-	border-left: 4px @purple solid;
-	-webkit-transition: all .3s linear;
-	-moz-transition: all .3s linear;
-	transition: all .3s linear;
+ul.sections>li {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 20px;
+	position: relative;
 }
 
-ul.sections li [class^="icon-"], 
-ul.sections li [class*=" icon-"],
-ul.sections li img.icon-section {
-	font-size: 30px;
-    display: inline-block;
-	margin: 1px 0 0 0;
-	color: @purple-l2;
-	-webkit-transition: all .3s linear;
-	-moz-transition: all .3s linear;
-	transition: all .3s linear;
-
-    &, &:before {
-        line-height: 20px !important; /* set line-height to ensure all icons use same line-height */
-    }
-}
-
-ul.sections:hover li [class^="icon-"], 
-ul.sections:hover li [class*=" icon-"],
-ul.sections:hover li img.icon-section {
+ul.sections>li>a {
 	color: @white;
-}
-
-ul.sections li a {
-	display: block;
+	height: 60px;
+    display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
 	text-decoration: none;
-	text-align: center;
-	color: @white;
-	padding: 20px 4px 4px 0;
-	border-bottom: 1px solid @purple-d1;
+	outline: none;
+	cursor: pointer;
+}
+
+ul.sections>li>a .section__name {
+	opacity: 0.6;
+	transition: opacity .1s linear;
+}
+
+ul.sections>li>a::after {
+	content: "";
+	height: 4px;
 	width: 100%;
-	height: 100%;
-	margin: 0 0 0 -4px;
-    cursor: pointer; // make sure IE10 displays pointer cursor for expand and help sections. 
-}
-
-ul.sections a span {
-	font-size: 11px;
-	line-height: 1.4em;
+	background-color: @turquoise;
+	position: absolute;
+	bottom: -4px;
+	border-radius: 3px 3px 0 0;
 	opacity: 0;
-	-webkit-transition: all .3s linear;
-	-moz-transition: all .3s linear;
-	transition: all .3s linear;
-	display: block;
+	padding: 0 2px;
+	transition: all .2s linear;
 }
 
-ul.sections:hover a span {
-	opacity: 1
+ul.sections>li.current>a::after {
+	opacity: 1;
+	bottom: 0;
 }
 
-
-// Avatar, Section & Help icons
-// -------------------------
-
-ul.sections li.avatar {
-	height: 75px;
-	padding: 22px 0 2px 0;
-	text-align: center;
-	border-bottom: 1px solid @purple-d1;
-}
-
-ul.sections li.avatar a {
-	padding: 0;
-	border: none
-}
-
-ul.sections li.avatar a div {
-	border-radius: 50%;
-	width: 30px;
-    margin:0 auto;
-}
-
-ul.sections li.avatar a span {
+ul.sections>li.current>a .section__name,
+ul.sections>li>a:hover .section__name,
+ul.sections>li>a:focus .section__name {
 	opacity: 1;
 }
 
-.faded ul.sections li {
-	opacity: 0.4
-}
 
-ul.sections li.current {
-	background-color: @purple-d1;
-}
 
-ul.sections li.current, 
-ul.sections li:hover {
-    border-left: 4px @turquoise-d1 solid;
-}
+/* Sections tray */
 
-ul.sections li.avatar.current, 
-ul.sections li.avatar:hover {
-	border-left: 4px @purple solid;
-}
-
-ul.sections li.current a{
-    padding-left: 0px;
-}
-
-ul.sections li.current [class^="icon-"], 
-ul.sections li.current [class*=" icon-"],
-ul.sections li.current img.icon-section {
-	color: @white;
-}
-
-ul.sections li.help {	
-	margin: 0;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	display: block;
-	width: calc(100% - 5px); //subtract 4px orange border + 1px border-right for sections
-}
-
-ul.sections li.help a {
-	border-bottom: none;
-}
-
-@media (max-width: 500px) {
-    ul.sections li [class^="icon-"],
-    ul.sections li [class*=" icon-"] {
-        font-size: 25px;
-    }
-    ul.sections li:not(.avatar) a {
-        padding-top: 12px;
-        padding-bottom: 6px;
-
-        .icon, .icon-section {
-            display: inline-block;
-            padding-left: 2px;
-        }
-    }
-    ul.sections a span {
-        display:none;
-    }
-}
-
-// Section slide-out tray for additional apps
-// -------------------------
-li.expand a, li.expand{border: none !important;}
-
-li.expand {
-    > a > i.icon {
-        transition: all .3s linear;
-    }
-
-    &.open > a > i.icon {
-        transform: rotate(180deg);
-    }
+ul.sections>li.expand i {
+	height: 5px;
+    width: 5px;
+    border-radius: 50%;
+    background: #fff;
+    display: inline-block;
+    margin: 0 5px 0 0;
+    opacity: 0.6;
 }
 
 ul.sections-tray {
-	padding-top: 99px;
-	width: 80px;
-
-    & > li:first-child > a {
-        border-top: 1px solid @purple-d1;
-    }
-
-    & > li {
-        // 5px (instead of 4px) because of vertical border
-        border-left-width: 5px;
-        
-        &.current, &:hover {
-            border-left-width: 5px;
-        }
-    }
+	position: absolute;
+	top: 60px;
+	left: 0;
+	margin: 0;
+    list-style: none;
+	background: @purple;
+	z-index: 10000;
+	border-radius: 0 0 3px 3px;
 }
+
+ul.sections-tray>li>a {
+	padding: 8px 24px;
+	color: @white;
+	text-decoration: none;
+    display: block;
+}
+
+ul.sections-tray>li>a:hover {
+	background: @purple-l1;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
new file mode 100644
index 0000000000..5cac5422a5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html
@@ -0,0 +1,47 @@
+<div>
+
+    <div class="umb-app-header">
+        
+        <umb-sections
+            ng-if="authenticated"
+            sections="sections">
+        </umb-sections>
+
+        <div>
+            <ul class="umb-app-header__actions">
+                <li class="umb-app-header__action">
+                    <a href="#" hotkey="ctrl+space" ng-click="searchClick()" prevent-default>
+                        <i class="icon-search"></i>
+                    </a>
+                </li>
+                <li data-element="section-help" class="umb-app-header__action">
+                    <a href="#" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
+                        <i class="icon-help-alt"></i>
+                    </a>
+                </li>
+                <li class="umb-app-header__action">
+                    <a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
+                        <umb-avatar
+                            size="xs"
+                            color="secondary"
+                            name="{{user.name}}"
+                            img-src="{{avatar[0].value}}"
+                            img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
+                        </umb-avatar>
+                    </a>
+                </li>
+            </ul>
+        </div>
+
+    </div>
+
+    <umb-overlay
+        data-element="overlay-user"
+        ng-if="userDialog.show"
+        model="userDialog"
+        view="userDialog.view"
+        position="right">
+    </umb-overlay>
+
+</div>
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index d6eb3de3ef..86d00898c5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -1,9 +1,6 @@
 <div id="leftcolumn" ng-controller="Umbraco.NavigationController"
      ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
 
-  <umb-sections sections="sections" ng-if="authenticated">
-  </umb-sections>
-
   <!-- navigation container -->
   <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
index 9fa8fa6891..46643152a6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-sections.html
@@ -1,70 +1,33 @@
 <div>
     <div id="applications" ng-class="{faded:stickyNavigation}">
         <ul class="sections">
-            <li data-element="section-user" id="section-avatar" class="avatar">
-                <a href="#" ng-click="avatarClick()" hotkey="ctrl+shift+u" title="{{user.name}}" prevent-default>
-                    <umb-avatar
-                        size="xs"
-                        color="secondary"
-                        name="{{user.name}}"
-                        img-src="{{avatar[0].value}}"
-                        img-srcset="{{avatar[1].value}} 2x, {{avatar[2].value}} 3x">
-                    </umb-avatar>
-                </a>
-            </li>
+
             <li data-element="section-{{section.alias}}" ng-repeat="section in sections | limitTo: maxSections" ng-class="{current: section.alias == currentSection}">
                 <a href="#/{{section.alias}}"
                    ng-dblclick="sectionDblClick(section)"
                    ng-click="sectionClick($event, section)"
                    prevent-default>
-                    <section-icon icon="{{section.cssclass}}"></section-icon>
-                    <span>{{section.name}}</span>
+                    <span class="section__name">{{section.name}}</span>
                 </a>
             </li>
 
             <li data-element="section-expand" class="expand" ng-class="{ 'open': showTray === true }" ng-show="needTray">
-                <a href ng-click="trayClick()">
-                    <i class="icon icon-arrow-right"></i>
-                </a>
+                <a href ng-click="trayClick()"><i></i><i></i><i></i></a>
+
+                <ul id="applications-tray" class="sections-tray shadow-depth-2" ng-if="showTray" on-outside-click="trayClick()">
+                    <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
+                        <a href="#/{{section.alias}}"
+                            ng-dblclick="sectionDblClick(section)"
+                            ng-click="sectionClick($event, section)"
+                            prevent-default>
+                            <span class="section__name">{{section.name}}</span>
+                        </a>
+                    </li>
+                </ul>
+
             </li>
 
-            <li data-element="section-help" class="help">
-                <a href class="help" hotkey="ctrl+shift+h" ng-click="helpClick()" prevent-default>
-                    <i class="icon-help-alt"></i>
-                    <span><localize key="sections_help">Help</localize></span>
-                </a>
-            </li>
         </ul>
     </div>
 
-    <div id="applications-tray" ng-show="showTray" ng-animate="trayAnimation()" style="display: none;">
-        <ul class="sections sections-tray">
-            <li ng-repeat="section in sections | limitTo: overflowingSections" ng-class="{current: section.alias == currentSection}">
-                <a href="#/{{section.alias}}"
-                   ng-dblclick="sectionDblClick(section)"
-                   ng-click="sectionClick($event, section)"
-                   prevent-default>
-                    <section-icon icon="{{section.cssclass}}"></section-icon>
-                    <span>{{section.name}}</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-
-    <umb-overlay
-        data-element="overlay-help"
-        ng-if="helpDialog.show"
-        model="helpDialog"
-        view="helpDialog.view"
-        position="left">
-    </umb-overlay>
-
-    <umb-overlay
-        data-element="overlay-user"
-        ng-if="userDialog.show"
-        model="userDialog"
-        view="userDialog.view"
-        position="left">
-    </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
index 388ffcf6ba..a95f873754 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/umbraco/Views/Default.cshtml
@@ -60,6 +60,8 @@
         
         <div id="mainwrapper" class="clearfix" ng-click="closeDialogs($event)">
 
+            <umb-app-header></umb-app-header>
+
             <umb-navigation></umb-navigation>
 
             <section id="contentwrapper">