diff --git a/UI/WebServerResources/fonts/FiraMono-Bold.eot b/UI/WebServerResources/fonts/FiraMono-Bold.eot
new file mode 100644
index 000000000..9b67e8eb3
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Bold.eot differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Bold.ttf b/UI/WebServerResources/fonts/FiraMono-Bold.ttf
new file mode 100644
index 000000000..b1f0aaf57
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Bold.ttf differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Bold.woff b/UI/WebServerResources/fonts/FiraMono-Bold.woff
new file mode 100644
index 000000000..a79e687de
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Bold.woff differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Medium.eot b/UI/WebServerResources/fonts/FiraMono-Medium.eot
new file mode 100644
index 000000000..bbde2c11d
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Medium.eot differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Medium.ttf b/UI/WebServerResources/fonts/FiraMono-Medium.ttf
new file mode 100644
index 000000000..f0c373f11
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Medium.ttf differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Medium.woff b/UI/WebServerResources/fonts/FiraMono-Medium.woff
new file mode 100644
index 000000000..c7cbe46bb
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Medium.woff differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Regular.eot b/UI/WebServerResources/fonts/FiraMono-Regular.eot
new file mode 100644
index 000000000..a18027214
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Regular.eot differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Regular.ttf b/UI/WebServerResources/fonts/FiraMono-Regular.ttf
new file mode 100644
index 000000000..c4f343286
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Regular.ttf differ
diff --git a/UI/WebServerResources/fonts/FiraMono-Regular.woff b/UI/WebServerResources/fonts/FiraMono-Regular.woff
new file mode 100644
index 000000000..51eb994bf
Binary files /dev/null and b/UI/WebServerResources/fonts/FiraMono-Regular.woff differ
diff --git a/UI/WebServerResources/fonts/Material-Design-Iconic-Font.eot b/UI/WebServerResources/fonts/Material-Design-Iconic-Font.eot
new file mode 100644
index 000000000..df3fa775b
Binary files /dev/null and b/UI/WebServerResources/fonts/Material-Design-Iconic-Font.eot differ
diff --git a/UI/WebServerResources/fonts/Material-Design-Iconic-Font.ttf b/UI/WebServerResources/fonts/Material-Design-Iconic-Font.ttf
new file mode 100644
index 000000000..b41cdc32b
Binary files /dev/null and b/UI/WebServerResources/fonts/Material-Design-Iconic-Font.ttf differ
diff --git a/UI/WebServerResources/scss/core/structure.scss b/UI/WebServerResources/scss/core/structure.scss
index 551345ae9..97bef1f17 100644
--- a/UI/WebServerResources/scss/core/structure.scss
+++ b/UI/WebServerResources/scss/core/structure.scss
@@ -1,316 +1,4 @@
-/**
-*
-* SOGo v3
-* ng-Material overrides and project variables
-* typography - definitions from http://www.google.com/design/spec/style/typography.html#typography-standard-styles
-**/
-
-// Google's Material design specs are in 'sp' or 'dp' which are not css units
-// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels'
-// (same as dp, but will be scaled by the user's font size preference)
-// Android gives a 160dpi  base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
-// We define a scaling factor in case we need to adjust
-// 'sp' equals 1/16rem, wich represents 1 css pixel
-// 'dp' is scale to 1 css-px according
-
-// We assume users are setting browser's base font-size according to their needs
-// The default rem size in use for most browsers is 16 css pixels
-// Body font size is defined as 100%, so it won't changege users'settings
-$sg-rem-base-value: 16 !global;
-$sg-sp-value: (1 / $sg-rem-base-value) !default; // sp value
-
-// Font-size basic scale (from Google)
-// NiceToHave : generate with a loop
-$sg-typo-scale: (
-  12,
-  14,
-  16,
-  20,
-  24,
-  34,
-  45,
-  56,
-  112
-) !global;
-
-// todo: fix that
-@function sg-font-sizes($size-list: $sg-typo-scale, $prefix: '$sg-font-size') {
-  @for $n from 1 to length($size-list) {
-    @return '#{$prefix}-#{$n}: sp-to-px( nth($size-list, $n) )';
-  }
-}
-
-// Basic typographic sizes
-// Fixme: add a rounding function
-
-$sg-font-size-1: nth($sg-typo-scale, 1) * 1px;
-$sg-font-size-2: nth($sg-typo-scale, 2) * 1px;
-$sg-font-size-3: nth($sg-typo-scale, 3) * 1px;
-$sg-font-size-4: nth($sg-typo-scale, 4) * 1px;
-$sg-font-size-5: nth($sg-typo-scale, 5) * 1px;
-$sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
-$sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
-$sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
-$sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
-
-$h1-font-size-base: $sg-font-size-9;
-$h1-margin-base: 0.67em 0;
-
-$h2-font-size-base: $sg-font-size-8;
-$h2-margin-base: 0.83em 0 !default;
-
-$h3-font-size-base: $sg-font-size-7;
-$h3-margin-base: 1em 0;
-
-$h4-font-size-base: $sg-font-size-6;
-$h4-margin-base: 1.33em 0;
-
-$h5-font-size-base: $sg-font-size-5;
-$h5-margin-base: 1.67em 0;
-
-$h6-font-size-base: $sg-font-size-4;
-$h6-margin-base: 2.33em 0;
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:focus {
-  outline: none;
-}
-
-html, body {
-  height: 100%;
-  //color: $foreground-primary-color;
-  //background: $background-color-base;
-
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  -webkit-touch-callout: none;
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-
-  p {
-    line-height: 1.846;
-  }
-}
-
-button,
-select,
-html,
-textarea,
-input {
-  font-family: $font-family;
-}
-
-body {
-  font-size: 100%;
-  margin: 0;
-  padding: 0;
-  outline: none;
-}
-
-.inset {
-  padding: 10px;
-}
-
-button {
-  font-family: $font-family;
-}
-
-a,
-a:-webkit-any-link {
-  background: transparent;
-  color: inherit;
-  outline: none;
-  text-decoration: none;
-}
-
-h1 {
-  font-size: $h1-font-size-base;
-  margin: $h1-margin-base;
-}
-h2 {
-  font-size: $h2-font-size-base;
-  margin: $h2-margin-base;
-}
-// Ad html selector to prevent angular-material.css from overriding our definition
-// fixme: remove this for production
-html h3 {
-  display: block;
-  @include margin-selectors();
-  font-size: $h3-font-size-base;
-  font-weight: 400;
-  margin: $h3-margin-base;
-}
-h4 {
-  font-size: $h4-font-size-base;
-  margin: $h4-margin-base;
-}
-h5 {
-  font-size: $h5-font-size-base;
-  margin: $h5-margin-base;
-}
-h6 {
-  font-size: $h6-font-size-base;
-  margin: $h6-margin-base;
-}
-
-select,
-button,
-textarea,
-input {
-  margin: 0;
-  font-size: 100%;
-  font-family: inherit;
-  vertical-align: baseline;
-}
-
-// Fix Android 4.0 button bugs
-input[type="reset"],
-input[type="submit"],
-html input[type="button"],
-button {
-  cursor: pointer;
-  -webkit-appearance: button;
-
-  &[disabled] {
-    cursor: default;
-  }
-}
-
-textarea {
-  vertical-align: top;
-  overflow: auto;
-}
-
-input {
-  &[type="radio"],
-  &[type="checkbox"] {
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  &[type="search"] {
-    -webkit-appearance: textfield;
-    box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-
-    &::-webkit-search-decoration,
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: none;
-    }
-  }
-}
-
-.md-shadow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-.md-shadow-bottom-z-1 {
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-.md-shadow-bottom-z-2 {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
-}
-
-.md-shadow-animated.md-shadow {
-  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/*
- * A container inside of a rippling element (eg a button),
- * which contains all of the individual ripples
- */
-.md-ripple-container {
-  pointer-events: none;
-  position: absolute;
-  overflow: hidden;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  transition: all 0.55s $swift-ease-out-timing-function;
-}
-
-.md-ripple {
-  position: absolute;
-  transform: scale(0);
-  transform-origin: 50% 50%;
-  opacity: 0;
-  border-radius: 50%;
-  &.md-ripple-placed {
-    transition: left 0.9s $swift-ease-out-timing-function,
-                top 0.9s $swift-ease-out-timing-function,
-                margin 0.65s $swift-ease-out-timing-function,
-                border 0.65s $swift-ease-out-timing-function,
-                width 0.65s $swift-ease-out-timing-function,
-                height 0.65s $swift-ease-out-timing-function,
-                opacity 0.65s $swift-ease-out-timing-function,
-                transform 0.65s $swift-ease-out-timing-function;
-  }
-  &.md-ripple-scaled {
-    transform: scale(1);
-  }
-  &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
-    opacity: 0.20;
-  }
-}
-
-md-tab {
-  > .md-ripple-container {
-    .md-ripple {
-      box-sizing: content-box;
-      background-color: transparent !important;
-      border-width: 0;
-      border-style: solid;
-      opacity: 0.20;
-      transform: none !important;
-      &.md-ripple-placed {}
-      &.md-ripple-scaled {}
-      &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
-        opacity: 0.20;
-      }
-    }
-  }
-}
-
-@function map-to-string($map) {
-  $map-str: '{';
-  $keys: map-keys($map);
-  $len: length($keys);
-  @for $i from 1 through $len {
-    $key: nth($keys, $i);
-    $value: map-get($map, $key);
-    $map-str: $map-str + '_' + $key + '_: _' + map-get($map, $key) + '_';
-    @if $i != $len {
-      $map-str: $map-str + ',';
-    }
-  }
-  @return $map-str + '}';
-}
-//.md-color-palette-definition {
-//  $content-rule: '{';
-//  $map-str: '';
-//  $keys: map-keys($colors);
-//  $len: length($keys);
-//  @for $i from 1 through $len {
-//    $key: nth($keys, $i);
-//    $value: map-get($colors, $key);
-//    $content-rule: $content-rule + '_' + $key + '_: ' + map-to-string($value);
-//    @if $i != $len {
-//      $content-rule: $content-rule + ',';
-//    }
-//  }
-//  $content-rule: $content-rule + '}';
-//  background-image: url("data:image/svg+xml;utf8,#{$content-rule}");
-//  display: none;
-//}
+/*! structure.scss - */
+// ngMaterial source for overrides
+// ----------------------------------------------------------------------------
+@import '../../angular-material/src/core/style/structure.scss';
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
new file mode 100644
index 000000000..041a170bc
--- /dev/null
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -0,0 +1,325 @@
+/*! typography.scss - */
+////
+/// SOGo
+/// Version: #{$Version}
+/// Module: typography
+///
+/// Main typography module file define basic typographic styles
+////
+
+// Fonts declaration
+// ----------------------------------------------------------------------------
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-Hair.eot');
+  src: url('fonts/FiraSans-Hair.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-Hair.woff') format('woff'),
+  url('fonts/FiraSans-Hair.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-Book.eot');
+  src: url('fonts/FiraSans-Book.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-Book.woff') format('woff'),
+  url('fonts/FiraSans-Book.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-Light.eot');
+  src: url('fonts/FiraSans-Light.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-Light.woff') format('woff'),
+  url('fonts/FiraSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-Regular.eot');
+  src: url('fonts/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-Regular.woff') format('woff'),
+  url('fonts/FiraSans-Regular.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-Thin.eot');
+  src: url('fonts/FiraSans-Thin.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-Thin.woff') format('woff'),
+  url('fonts/FiraSans-Thin.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-medium.eot');
+  src: url('fonts/FiraSans-medium.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-medium.woff') format('woff'),
+  url('fonts/FiraSans-medium.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-HairItalic.eot');
+  src: url('fonts/FiraSans-HairItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-HairItalic.woff2') format('woff2'),
+  url('fonts/FiraSans-HairItalic.woff') format('woff'),
+  url('fonts/FiraSans-HairItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-BookItalic.eot');
+  src: url('fonts/FiraSans-BookItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-BookItalic.woff') format('woff'),
+  url('fonts/FiraSans-BookItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-LightItalic.eot');
+  src: url('fonts/FiraSans-LightItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-LightItalic.woff') format('woff'),
+  url('fonts/FiraSans-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-RegularItalic.eot');
+  src: url('fonts/FiraSans-RegularItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-RegularItalic.woff') format('woff'),
+  url('fonts/FiraSans-RegularItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-ThinItalic.eot');
+  src: url('fonts/FiraSans-ThinItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-ThinItalic.woff') format('woff'),
+  url('fonts/FiraSans-ThinItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Fira sans';
+  src: url('fonts/FiraSans-mediumItalic.eot');
+  src: url('fonts/FiraSans-mediumItalic.eot?#iefix') format('embedded-opentype'),
+  url('fonts/FiraSans-mediumItalic.woff') format('woff'),
+  url('fonts/FiraSans-mediumItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+}
+
+// Google's Material design specs are in 'sp' or 'dp' which are not css units
+// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels'
+// (same as dp, but will be scaled by the user's font size preference)
+// Android gives a 160dpi  base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
+// We define a scaling factor in case we need to adjust
+// 'sp' equals 1/16rem, wich represents 1 css pixel
+// 'dp' is scale to 1 css-px according
+
+// We assume users are setting browser's base font-size according to their needs
+// The default rem size in use for most browsers is 16 css pixels
+// Body font size is defined as 100%, so it won't changege users'settings
+
+$sg-rem-Base-value: 16 !global;
+$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
+
+$sg-md-baseline: 4px;
+
+// Font-size basic scale (from Google)
+// NiceToHave : generate with a loop
+$sg-typo-scale: (
+    12,
+    14,
+    16,
+    20,
+    24,
+    34,
+    45,
+    56,
+    112
+) !global;
+
+// todo: fix that
+@function sg-font-sizes($size-List: $sg-typo-scale, $prefix: '$sg-font-size') {
+  @for $n from 1 to length($size-List) {
+    @return '#{$prefix}-#{$n}: sp-to-px( nth($size-List, $n) )';
+  }
+}
+
+// Basic typographic sizes
+// ----------------------------------------------------------------------------
+$sg-font-size-1: nth($sg-typo-scale, 1) * 1px;
+$sg-font-size-2: nth($sg-typo-scale, 2) * 1px;
+$sg-font-size-3: nth($sg-typo-scale, 3) * 1px;
+$sg-font-size-4: nth($sg-typo-scale, 4) * 1px;
+$sg-font-size-5: nth($sg-typo-scale, 5) * 1px;
+$sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
+$sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
+$sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
+$sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
+
+// Basic line heights
+// ----------------------------------------------------------------------------
+$sg-line-height-1: $sg-font-size-1 + $sg-md-baseline;
+$sg-line-height-2: 20px;
+$sg-line-height-3: 24px;
+$sg-line-height-4: $sg-font-size-4 + $sg-md-baseline;
+$sg-line-height-5: 32px;
+$sg-line-height-6: 40px;
+$sg-line-height-7: $sg-font-size-7 + $sg-md-baseline;
+$sg-line-height-8: $sg-font-size-8 + $sg-md-baseline;
+$sg-line-height-9: $sg-font-size-9 + $sg-md-baseline;
+// Font weights
+// Google Material Design specifications strongly recommend to avoid bold
+// font weight. Here are some variables to define weights more conveniently
+// ----------------------------------------------------------------------------
+$sg-font-light: 200;
+$sg-font-regular: 400;
+$sg-font-medium: 600;
+$sg-font-Bold: $sg-font-medium;
+
+// h elements definitions
+// ----------------------------------------------------------------------------
+$h1-font-size-Base: $sg-font-size-9;
+$h1-margin-Base: 0.67em 0;
+
+$h2-font-size-Base: $sg-font-size-8;
+$h2-margin-Base: 0.83em 0;
+
+$h3-font-size-Base: $sg-font-size-7;
+$h3-margin-Base: 1em 0;
+
+$h4-font-size-Base: $sg-font-size-6;
+$h4-margin-Base: 1.33em 0;
+
+$h5-font-size-Base: $sg-font-size-5;
+$h5-margin-Base: 1.67em 0;
+
+$h6-font-size-Base: $sg-font-size-4;
+$h6-margin-Base: 2.33em 0;
+
+/// Gogle Material Design Standard styles
+/// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
+//  -------------------------------------------------------------------------------------------------
+.sg-md {
+  &-.caption {
+    font-size: $sg-font-size-1;
+    line-height: $sg-line-height-1;
+    font-weight: $sg-font-regular;
+    white-space: nowrap;
+    }
+  &-.menu {
+    font-size: $sg-font-size-2;
+    line-height: $sg-line-height-1;
+    font-weight: $sg-font-medium;
+    white-space: nowrap;}
+  &-.button {
+    font-size: $sg-font-size-2;
+    line-height: $sg-line-height-1;
+    font-weight: $sg-font-medium;
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+  &-.body-1 {
+    font-size: $sg-font-size-1;
+    line-height: $sg-line-height-2;
+    font-weight: $sg-font-regular;
+    margin-top: ($sg-line-height-2 * -1);
+    margin-bottom: $sg-line-height-2;
+  }
+  /// @alias .body-1
+  &-.body-multi {
+    @extend .body-1;
+  }
+  &-.body-2 {
+    $lineHeight : $sg-line-height-2 + $sg-md-baseline;
+    font-size: $sg-font-size-1;
+    line-height: $lineHeight;
+    font-weight: $sg-font-medium;
+    margin-top: ($lineHeight * -1);
+    margin-bottom: $lineHeight;
+  }
+  &-.subhead-1 {
+    $lineHeight : $sg-line-height-3;
+    font-size: $sg-font-size-3;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    margin-top: ($lineHeight * -1);
+    margin-bottom: $lineHeight;
+  }
+  &-.subhead-2 {
+    $lineHeight : $sg-line-height-3 + $sg-md-baseline;
+    font-size: $sg-font-size-3;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    margin-top: ($lineHeight * -1);
+    margin-bottom: $lineHeight;
+  }
+  &-.title {
+    $lineHeight : $sg-line-height-4;
+    font-size: $sg-font-size-4;
+    line-height: $lineHeight;
+    font-weight: $sg-font-medium;
+    white-space: nowrap;
+  }
+  &-.headline {
+    $lineHeight : $sg-line-height-5;
+    font-size: $sg-font-size-5;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    margin-top: ($lineHeight * -1);
+    margin-bottom: $lineHeight;
+  }
+  &-.display-1 {
+    $lineHeight : $sg-line-height-6;
+    font-size: $sg-font-size-6;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    margin-top: ($lineHeight * -1);
+    margin-bottom: $lineHeight;
+  }
+  &-.display-2 {
+    $lineHeight: $sg-line-height-7;
+    font-size: $sg-font-size-7;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    white-space: nowrap;
+  }
+  &-.display-3 {
+    $lineHeight : $sg-line-height-8;
+    font-size: $sg-font-size-8;
+    line-height: $lineHeight;
+    font-weight: $sg-font-regular;
+    white-space: nowrap;
+  }
+  &-.display-4 {
+    $lineHeight : $sg-line-height-9;
+    font-size: $sg-font-size-9;
+    line-height: $lineHeight;
+    font-weight: $sg-font-light;
+    white-space: nowrap;
+  }
+}
+/// Some specification class names are counterintuitive. Here are some aliases
+// ----------------------------------------------------------------------------
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 7720af0b9..a73a846df 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -21,7 +21,7 @@ $foreground-primary-color: rgba($primary-color, 0.87);//override
 //$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
 //$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
 //$foreground-text-shadow: none !default;
-
+$bottombar-color: #212121;
 
 //$input-border-color: $foreground-secondary-color !default;
 //$input-disabled-border-color: $foreground-tertiary-color !default;
@@ -32,8 +32,7 @@ $foreground-primary-color: rgba($primary-color, 0.87);//override
 //$primary-color-palette: $color-light-blue !default;
 //$warn-color-palette: $color-red !default;
 //$primary-color-palette-contrast-color: white !default;
-//todo ; create grey map
-$bottombar-color: #121212;
+//todo ; create grey map$bottombar-color: #121212;
 
 // Layout
 // ------------------------------
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index bd79c213e..2dbe630ff 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -33,6 +33,7 @@
 @import 'core/mixins';
 @import 'core/structure';
 @import 'core/layout';
+@import 'core/typography/typography';