diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 246b10c84..cd02c820b 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -14,7 +14,7 @@
     var contactFolders = <var:string value="contactFolders" const:escapeHTML="NO" />;
   </script>
 
-  <main class="view md-layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>
+  <main class="view layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>
 
   <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxContactFoldersView">
@@ -172,7 +172,7 @@
     <!-- </div> -->
     </md-sidenav>
 
-    <section layout="column" class="sg-app-content md-layout-fill" ui-view="addressbook"><!-- contacts list --></section>
+    <section layout="column" class="sg-app-content layout-fill" ui-view="addressbook"><!-- contacts list --></section>
   </script>
 
   <script type="text/ng-template" id="addressbook">
@@ -371,8 +371,9 @@
         </md-content>
       </div>
 
-      <div id="detailView" class="view-detail ng-cloak" layout="column" ui-view="card"
-           ng-show="addressbook.selectedFolder.selectedCard"><!-- card view --></div>
+      <div id="detailView" class="view-detail ng-cloak" layout="column">
+        <md-card class="viewer" ui-view="card"><!-- card view --></md-card>
+      </div>
 
     </div>
   </script>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index e3a563c30..882bd71d9 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -221,13 +221,13 @@
 
   Templates script tag wrappers go next
 -->
-  <main class="view md-layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>
+  <main class="view layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>
 
 <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxMailMainFrame">
 
     <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
       <md-content md-scroll-y="md-scroll-y" class="md-flex">
         <section ng-repeat="account in app.accounts track by account.id">
@@ -342,7 +342,7 @@
       </md-content>
     </md-sidenav>
 
-    <section layout="column" class="sg-app-content md-layout-fill" ui-view="mailbox"><!-- messages list --></section>
+    <section layout="column" class="sg-app-content layout-fill" ui-view="mailbox"><!-- messages list --></section>
   </script>
 
   <script type="text/ng-template" id="UIxMailFolderTemplate">
diff --git a/UI/Templates/MainUI/SOGoRootPage.wox b/UI/Templates/MainUI/SOGoRootPage.wox
index bda38017b..db61e6eb7 100644
--- a/UI/Templates/MainUI/SOGoRootPage.wox
+++ b/UI/Templates/MainUI/SOGoRootPage.wox
@@ -15,7 +15,7 @@
       MUST be the first html element after body
       SHOULD  be a main tag (with role="main")
   -->
-  <main class="view md-layout-fill md-layout-padding" ui-view="login" layout="row" layout-align="center start">
+  <main class="view layout-fill layout-padding" ui-view="login" layout="row" layout-align="center start">
     <md-content class="md-padding" md-scroll-y="true">
       <div class="sg-login" ng-controller="LoginController as app">
 
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index c0d575f1e..2af5d7ed3 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -10,7 +10,7 @@
     title="title"
     const:jsFiles="Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js">
 
-  <main class="view md-layout-fill" ui-view="preferences" layout="row"
+  <main class="view layout-fill" ui-view="preferences" layout="row"
         ng-controller="navController"><!-- preferences --> </main>
 
   <script type="text/javascript">
@@ -54,7 +54,7 @@
       </md-content>
     </md-sidenav>
 
-    <section  layout="column" class="md-layout-fill">
+    <section  layout="column" class="layout-fill">
 
       <!-- TOP RIGHT TOOLBAR -->
       <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index c42bd0a86..36ea6b086 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -138,7 +138,7 @@
     </div>
     -->
 
-  <main class="view md-layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
+  <main class="view layout-fill" ui-view="calendars" layout="row" ng-controller="navController"><!-- calendars list --></main>
 
   <script type = "text/ng-template" id="UIxCalMainFrame">
     <!-- calendars colors -->
@@ -308,7 +308,7 @@
     </md-sidenav>
 
     <!-- Main section -->
-    <section layout="column" class="sg-app-content md-layout-fill"
+    <section layout="column" class="sg-app-content layout-fill"
              ng-controller="CalendarListController as list">
       <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">