diff --git a/src/scss/layout/_all.scss b/src/scss/layout/_all.scss
new file mode 100644
index 0000000..1122ffe
--- /dev/null
+++ b/src/scss/layout/_all.scss
@@ -0,0 +1,2 @@
+@import 'header';
+@import 'navigation';
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
new file mode 100644
index 0000000..9bbe7e8
--- /dev/null
+++ b/src/scss/layout/_header.scss
@@ -0,0 +1,51 @@
+
+$logoHeight: 40px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+  position: fixed;
+  top:0;
+  left: 0;
+  right:0;
+  z-index: 100;
+}
+.app__version {
+  margin-left: 1em;
+  display: none;
+  @include mediaQuery(x-small) {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+header {
+  position: relative;
+  background: $black;
+  color: $white;
+  padding: .8em;
+
+  .logo__wrapper {
+    display: inline-block;
+  }
+
+  #header__logo {
+    vertical-align: middle;
+    margin-right: 1em;
+    float: left;
+    height:$logoHeight; //required for <SVG> logos - can remove if using img
+    max-height: $logoMaxHeight;
+    max-width: $logoMaxWidth;
+    width: auto;
+  }
+
+}
+
+.header__functions-wrapper {
+  color: $white;
+  background: green;
+  padding: 1em 1.1em;
+  box-sizing: border-box;
+  display: block;
+}
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
new file mode 100644
index 0000000..024e869
--- /dev/null
+++ b/src/scss/layout/_navigation.scss
@@ -0,0 +1,86 @@
+#nav__top-level {
+  background: $black;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  list-style-type: none;
+  margin: 0;
+  li { margin: 0; }
+  .button, button, a {
+    background: transparent;
+    height: auto;
+    border: 0;
+    color: $white;
+    fill: $white;
+    width: 100%;
+    padding: 1em;
+    display: block;
+    text-align: center;
+    margin-bottom: 0;
+    white-space: normal;
+    .nav__icon {
+      color: $white;
+      max-height: 40px;
+      stroke-width: .5;
+      margin-bottom: -.5em;
+    }
+    a {
+      margin-bottom: 5px;
+    }
+    p {
+      margin: 0;
+      font-size: .9em;
+      line-height:1.2rem;
+    }
+
+    .nav__icon-help__outer {
+      fill: transparent;
+      stroke: $white;
+      stroke-miterlimit: 10;
+      stroke-width: 1px;
+    }
+    .nav__icon-help__Inner {
+      fill: $white;
+    }
+    &:hover {
+      background: $white;
+      fill: $black;
+      color: $black;
+      padding: 1em;
+      border-radius: 0;
+      .nav__icon-help__outer {
+        stroke: $black;
+      }
+      .nav__icon-help__inner {
+        fill: $black;
+      }
+    }
+  }
+  .opened {
+    background: $white;
+    fill: $black;
+    color: $black;
+  }
+}
+
+.nav__second-level {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 97;
+  display: block;
+  background: $white;
+  padding: 10px .6em;
+  margin: 0;
+  list-style-type: none;
+  transition: all ease-out 0.5s;
+  box-shadow: 0 2px 5px 0 $black;
+  &.opened {
+    transition: all ease-out .8s;
+
+  }
+}