diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 53a27fd97..dfcc185ab 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -1,8 +1,8 @@
 <?xml version='1.0' standalone='yes'?>
 <container xmlns="http://www.w3.org/1999/xhtml" xmlns:var="http://www.skyrix.com/od/binding" xmlns:const="http://www.skyrix.com/od/constant" xmlns:label="OGo:label">
 
-  <div class="md-whiteframe-z1">
-    <md-content md-scroll-y="true" class="md-padding bg-sogoPaper-50">
+
+    <md-content md-scroll-y="true" class="md-padding md-whiteframe-z1 bg-sogoPaper-50">
       <div class="editor md-padding">
         <hgroup class="header">
           <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
@@ -367,7 +367,7 @@
         </form>
       </div>
     </md-content>
-  </div>
+
 
 
 </container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 7f3fa8bf9..c1113191f 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -288,8 +288,9 @@
             </md-item>
           </md-list>
         </md-content>
-        <!-- This extra container prevent card from being stretch by layout-fill -->
-        <div ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
+        <!-- This extra container is used to animate views transitions
+             double quotes in ng-animate is not a typo                         -->
+        <div class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
       </div>
 
     </section>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 77a0e34fc..045038843 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -40,7 +40,8 @@
       </md-item>
     </md-list>
   </md-content>
-
-    <div layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
+  <!-- This extra container is used to animate views transitions
+       double quotes in ng-animate is not a typo                         -->
+    <div class="view-detail" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
 
 </container>
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index e6c186a98..a46574766 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -1,32 +1,4 @@
 
-[id="messagesList"] {
-  flex: 0 0 $listView-width;
-
-}
-[ui-view="message"] {
-  flex: 1 2 $detailView-width;
-  min-width: ($detailView-width - $pitch);
-  max-width: ($detailView-width + $pitch);
-  margin: 0 auto;
-  &.ng-enter {
-    border: 4px solid red;
-    transition: all 1s linear;
-    &.ng-enter-active {
-      border: 4px solid green;
-      transition: all 1s linear;
-    }
-  }
-  &.ng-leave {
-    border: 4px solid blue;
-    transition: all 1s linear;
-    &.ng-leave-active {
-      border: 4px solid blue;
-      transition: all 1s linear;
-      filter: opacity(0);
-    }
-  }
-}
-
 // Message view header
 // Could be made into a more generic component
 // ----------------------------------------------------------------------------
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index d9380f4a1..27151f078 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -12,4 +12,48 @@
 
 .view[layout=row] {
   max-height: 100%;
+}
+// We make intensive use of the list/detail view pattern, here are some base
+// definitions for this
+// ----------------------------------------------------------------------------
+
+// Variables
+$listView-width: grid-step(6) !global;
+$detailView-width: grid-step(8) !global;
+
+[id="messagesList"] {
+  flex: 0 0 $listView-width;
+
+}
+
+.view-detail {
+  flex: 1 2 $detailView-width;
+  min-width: ($detailView-width - $pitch);
+  max-width: ($detailView-width + $pitch);
+  margin: 0 auto;
+}
+
+
+[ui-view="message"] {
+
+  &.ng-enter {
+    border: 4px solid red;
+    transition: all 1s linear;
+
+    &.ng-enter-active {
+      border: 4px solid green;
+      transition: all 1s linear;
+    }
+  }
+
+  &.ng-leave {
+    border: 4px solid blue;
+    transition: all 1s linear;
+
+    &.ng-leave-active {
+      border: 4px solid blue;
+      transition: all 1s linear;
+      filter: opacity(0);
+    }
+  }
 }
\ No newline at end of file