diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 4068a9aab..f6e616240 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -10,85 +10,85 @@
         </h6>
       </hgroup>
   <form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
-      <md-input-container class="PseudoField">
+      <md-input-container class="pseudo-input">
         <var:entity const:name="nbsp"/>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Display"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
         </p>
       </md-input-container>
-      <md-input-container class="PseudoField">
+      <md-input-container class="pseudo-input">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Firstname"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.givenname"/>
         </p>
       </md-input-container>
-      <div class="PseudoField">
+      <div class="pseudo-input">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Lastname"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.sn"/>
         </p>
       </div>
-      <div class="PseudoField">
+      <div class="pseudo-input">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Nickname"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.nickname"/>
         </p>
 
       </div>
-      <div class="PseudoField">
+      <div class="pseudo-input">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Organization"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.org"/>
         </p>
 
       </div>
-      <div class="PseudoField">
+      <div class="pseudo-input">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
-        <label class="PseudoField-label">
+        <label class="pseudo-input-label">
           <var:string label:value="Title"/>
         </label>
-        <p class="PseudoField-inputLike--underline">
+        <p class="pseudo-input-inputLike--underline">
           <input type="text" data-ng-model="card.title"/>
         </p>
 
       </div>
 
       <!-- org units -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
       <div class="attr" data-ng-repeat="unit in card.orgUnits">
         <div class="action">
           <span class="button alert icon" data-ng-click="card.$delete('orgUnits', $index)">
             <i class="md-icon-remove-circle-outline"><!-- remove --></i>
           </span>
         </div>
-        <md-input-container class="PseudoField">
+        <md-input-container class="pseudo-input">
           <div class="key">
-            <label class="PseudoField-label">
+            <label class="pseudo-input-label">
               <var:string label:value="Organization Unit"/>
             </label>
           </div>
@@ -109,18 +109,18 @@
     </div>
     
     <!-- birthday -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
       <div class="attr">
         <div class="action">
           <var:entity const:name="nbsp"/>
         </div>
         <div class="key">
-          <label class="PseudoField-label">
+          <label class="pseudo-input-label">
             <var:string label:value="Birthday"/>
           </label>
         </div>
         <div class="value">
-          <p class="PseudoField-inputLike--underline">
+          <p class="pseudo-input-inputLike--underline">
             <input type="date" data-ng-model="card.birthday"/>
           </p>
         </div>
@@ -128,21 +128,21 @@
     </div>
 
     <!-- categories -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
 
         <!-- if there's some categories, here they are (this is sort of a template) -->
         <div class="attr" data-ng-repeat="category in card.categories">
 
-          <div class="PseudoField">
+          <div class="pseudo-input">
             <i class="md-icon-remove-circle-outline"
                data-ng-click="card.$delete('categories', $index)"><!-- remove --></i>
             <div class="key">
-              <label class="PseudoField-label md-flex">
+              <label class="pseudo-input-label md-flex">
                 <var:string label:value="Category"/>
               </label>
             </div>
             <div class="value">
-              <p class="PseudoField-inputLike--underline">
+              <p class="pseudo-input-inputLike--underline">
                 <input type="text" label:placeholder="category" data-ng-model="category.value"
                        data-sg-focus-on="category_{{$index}}" />
                        <!--data-typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
@@ -163,7 +163,7 @@
     </div>
 
     <!-- emails -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
     <div class="section">
       <div class="attr" data-ng-repeat="email in card.emails">
         <div class="action">
@@ -178,7 +178,7 @@
 
         </div>
         <div class="value">
-          <p class="PseudoField-inputLike--underline">
+          <p class="pseudo-input-inputLike--underline">
             <input type="email" label:placeholder="email address" data-ng-model="email.value"
                    data-sg-focus-on="email_{{$index}}"/>
           </p>
@@ -195,7 +195,7 @@
     </div>
     </div>
     <!-- phones -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
       <div class="section">
         <div class="attr" data-ng-repeat="phone in card.phones">
           <div class="action">
@@ -209,7 +209,7 @@
             </select>
           </div>
           <div class="value">
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="phone number" data-ng-model="phone.value"
                      data-sg-focus-on="phone_{{$index}}"/>
             </p>
@@ -227,7 +227,7 @@
     </div>
 
     <!-- urls -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
       <div class="section">
         <div class="attr" data-ng-repeat="url in card.urls">
           <div class="action">
@@ -241,7 +241,7 @@
             </select>
           </div>
           <div class="value">
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
             </p>
           </div>
@@ -258,7 +258,7 @@
     </div>
 
     <!-- addresses -->
-    <div class="PseudoField">
+    <div class="pseudo-input">
       <div class="section">
         <div class="attr" data-ng-repeat="address in card.addresses">
           <div class="action">
@@ -272,32 +272,32 @@
             </select>
           </div>
           <div class="value compact">
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="street" data-ng-model="address.street"
                      data-sg-focus-on="address_{{$index}}"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" data-ng-model="address.street2"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
             </p>
 
-            <p class="PseudoField-inputLike--underline">
+            <p class="pseudo-input-inputLike--underline">
               <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
             </p>
 
@@ -320,7 +320,7 @@
         <var:entity const:name="nbsp"/>
       </div>
       <div class="key">
-        <label class="PseudoField-label right inline">
+        <label class="pseudo-input-label right inline">
           <var:string label:value="Note"/>
         </label>
       </div>
@@ -364,7 +364,7 @@
           <var:entity const:name="nbsp"/>
         </div>
         <div class="key">
-          <label class="PseudoField-label right inline">
+          <label class="pseudo-input-label right inline">
             <var:string label:value="Display"/>
           </label>
         </div>
@@ -377,7 +377,7 @@
           <var:entity const:name="nbsp"/>
         </div>
         <div class="key">
-          <label class="PseudoField-label right inline">
+          <label class="pseudo-input-label right inline">
             <var:string label:value="Nickname"/>
           </label>
         </div>
@@ -395,7 +395,7 @@
           </span>
         </div>
         <div class="key">
-          <label class="PseudoField-label right inline">
+          <label class="pseudo-input-label right inline">
             <var:string label:value="Member"/>
           </label>
         </div>
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 89f934cd3..f2a0da6fe 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -8,35 +8,36 @@
   <md-card class="viewer">
     <md-card-content>
       <header>
+        <div class="sg-avatar">
+          <!--avatar--><!-- currentCard.tag = vcard || vlist -->
+        </div>
         <div class="msg-header-content">
-          <h1 class="sg-md-display-1" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-subheader-1">{{card.$description()}}
+          <h1 class="sg-md-display-2--light" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
+          <h6 class="sg-md-display-2-subheader">{{card.$description()}}
             <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
           </h6>
         </div>
-
         <div class="sg-icon-bar">
           <span data-ng-show="addressbook.isEditable">
             <a class="button tiny radius" data-ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
               <i class="md-icon-create"><!-- edit --></i>
             </a>
-            <span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
-              <i class="md-icon-delete"><!-- delete --></i>
-            </span>
+          </span>
+          <span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
+            <i class="md-icon-delete"><!-- delete --></i>
           </span>
         </div>
       </header>
+      <md-divider class="md-inset"><!-- divider --></md-divider>
+      <section class="msg-body">
 
-
-      <section class="content">
-
-        <div class="attr" data-ng-show="card.birthday">
+        <div class="pseudo-input-container" data-ng-show="card.birthday">
           <div class="key">
-            <label class="PseudoField-label">
+            <label class="pseudo-input-label">
               <var:string label:value="Birthday"/>
             </label>
           </div>
-          <div class="value">
+          <div class="pseudo-input-field">
             <span>{{card.$birthday() | date}}</span>
           </div>
         </div>
@@ -44,7 +45,7 @@
         <div class="section" data-ng-repeat="ref in card.refs track by ref.reference">
           <!-- list members -->
 
-          <div class="attr">
+          <div class="pseudo-input-container">
             <div class="value single">
               <a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: ref.reference})">
                 {{ref.$fullname()}}
@@ -59,13 +60,13 @@
           </div>
 
           <div class="section">
-            <div class="attr" data-ng-repeat="email in card.emails">
+            <div class="pseudo-input-container" data-ng-repeat="email in card.emails">
               <div class="key">
-                <label class="PseudoField-label"><var:entity const:name="nbsp"/>{{email.type}}
+                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}
                 </label>
               </div>
 
-              <div class="value">
+              <div class="pseudo-input-field">
                 <a href="mailto:{{email.value}}">{{email.value}}</a>
               </div>
 
@@ -75,47 +76,47 @@
 
 
         <div class="section" data-ng-show="card.phones.length > 0">
-          <div class="attr" data-ng-repeat="phone in card.phones">
+          <div class="pseudo-input-container" data-ng-repeat="phone in card.phones">
             <div class="key">
-              <label class="PseudoField-label">{{phone.type}}</label>
+              <label class="pseudo-input-label">{{phone.type}}</label>
             </div>
 
-            <div class="value">
+            <div class="pseudo-input-field">
               <a href="tel:{{phone.value}}">{{phone.value}}</a>
             </div>
 
           </div>
         </div>
         <div class="section" data-ng-show="card.urls">
-          <div class="attr" data-ng-repeat="url in card.urls">
+          <div class="pseudo-input-container" data-ng-repeat="url in card.urls">
             <div class="key">
-              <label class="PseudoField-label"><var:entity const:name="nbsp"/>{{url.type}}
+              <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
               </label>
             </div>
 
-            <div class="value">
+            <div class="pseudo-input-field">
               <a href="#" data-ng-href="{{url.value}}">{{url.value}}</a>
             </div>
 
           </div>
         </div>
         <div class="section" data-ng-show="card.addresses">
-          <div class="attr" data-ng-repeat="address in card.addresses">
+          <div class="pseudo-input-container" data-ng-repeat="address in card.addresses">
             <div class="key">
-              <label class="PseudoField-label">{{address.type}}</label>
+              <label class="pseudo-input-label">{{address.type}}</label>
             </div>
-            <div class="value">
+            <div class="pseudo-input-field">
               <div data-sg-address="address"><!-- address --></div>
             </div>
           </div>
         </div>
-        <div class="attr" data-ng-show="card.note">
+        <div class="pseudo-input-container" data-ng-show="card.note">
           <div class="key">
-            <label class="PseudoField-label">
+            <label class="pseudo-input-label">
               <var:string label:value="Note"/>
             </label>
           </div>
-          <div class="value">
+          <div class="pseudo-input-field">
             <div data-ng-bind-html="card.note"><!-- note --></div>
           </div>
         </div>
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index bf41f8bb6..5b1249374 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -39,7 +39,7 @@
         <label class="pseudo-input-label">
           <var:string label:value="Cc"/>
         </label>
-        <div class="PseudoField-inputLike">
+        <div class="pseudo-input-inputLike">
           <tags-input type="text" name="cc"
                       ng-model="message.editable.cc"
                       label:placeholder="Add a recipient">
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index fd6257dd9..0acd61817 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -33,7 +33,7 @@
 
 <!--      <p class="flags">
         &lt;!&ndash; Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place&ndash;&gt;
-        <span class="PseudoField-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
+        <span class="pseudo-input-label" data-ng-repeat="flag in message.flags">{{flag}}</span>
       </p>
 -->
 
diff --git a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
index e415e6254..554fea053 100644
--- a/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
+++ b/UI/WebServerResources/scss/components/autoScrollList/autoScrollList.scss
@@ -87,4 +87,5 @@
 .sg-avatar {
   @extend .md-tile-left;
   margin-right: 0;
+  margin-left: 0;
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/divider/divider.scss b/UI/WebServerResources/scss/components/divider/divider.scss
index 4dc99186c..8dab46449 100644
--- a/UI/WebServerResources/scss/components/divider/divider.scss
+++ b/UI/WebServerResources/scss/components/divider/divider.scss
@@ -5,7 +5,7 @@ md-divider {
   border-top: 1px solid;
   margin: 0;
 
-  &[md-inset] {
-    margin-left: $baseline-grid * 9; // fix for vs-repeat
+  &.md-inset {
+    margin-left: $baseline-grid * 9;
   }
 }
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 8e2f973e4..5ef11d48f 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -10,7 +10,7 @@ md-toolbar {
 }
 header {
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: stretch;
   justify-content: space-between;
   display: flex;
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography/typography.scss
index bbe07f771..eae205390 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography/typography.scss
@@ -214,7 +214,8 @@ $sg-line-height-9: $sg-font-size-9 + $sg-md-typo-baseline;
 // 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-thin: 200;
+$sg-font-light: 300;
 $sg-font-regular: 400;
 $sg-font-medium: 600;
 $sg-font-bold: $sg-font-medium;
@@ -360,6 +361,12 @@ h6 {
     font-weight: $sg-font-regular;
     white-space: nowrap;
   }
+  .#{$md}-display-2--light {
+       $lineHeight: $sg-line-height-7;
+       font-size: $sg-font-size-7;
+       line-height: $lineHeight;
+       font-weight: $sg-font-light;
+   }
   .#{$md}-display-3 {
     $lineHeight : $sg-line-height-8;
     font-size: $sg-font-size-8;
@@ -374,7 +381,11 @@ h6 {
     font-weight: $sg-font-light;
     white-space: nowrap;
   }
-
+  .#{$md}-display-2-subheader {
+    @extend .#{$md}-title;
+    margin-bottom: $mg;
+    font-weight: $sg-font-thin;
+  }
   a,
   a:hover,
   a:active,