diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index f131e5b9b..0be3c7e09 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -6,274 +6,361 @@
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
-  <div class="editor">
-    <div class="header">
-      <h1 data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-      <h6>{{card.$description()}}
-      <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
-      </h6>
-    </div>
-    <form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
+  <md-content md-scroll-y="true" >
+    <div class="editor md-padding">
+      <div class="header">
+        <h1 data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
+        <h6>{{card.$description()}}
+          <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
+        </h6>
+      </div>
+
+      <form name="cardForm" data-ng-show="card.$isCard()" data-ng-submit="save(cardForm)">
       <div class="buttonsToolbar">
-        <span class="button tiny radius secondary" data-ng-click="cancel()"><i class="icon-arrow-left"><!-- cancel --></i> <var:string label:value="Cancel"/></span>
-        <span class="button tiny radius secondary" data-ng-click="reset()"><i class="icon-undo"><!-- reset --></i> <var:string label:value="Reset"/></span>
-        <button class="button tiny radius" type="submit"><i class="icon-checkmark"><!-- save --></i> <var:string label:value="Save"/></button>
+        <span class="button tiny radius secondary" data-ng-click="cancel()">
+          <i class="icon-arrow-left"><!-- cancel --></i>
+          <var:string label:value="Cancel"/>
+        </span>
+        <span class="button tiny radius secondary" data-ng-click="reset()">
+          <i class="icon-undo"><!-- reset --></i>
+          <var:string label:value="Reset"/>
+        </span>
+        <button class="button tiny radius" type="submit">
+          <i class="icon-checkmark"><!-- save --></i>
+          <var:string label:value="Save"/>
+        </button>
+      </div>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name=""/>
+        </div>
+        <label>
+          <var:string label:value="Display"/>
+        </label>
+        <input type="text" ng-maxlength="30" data-ng-model="card.fn"/>
+      </md-input-container>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <label class="">
+          <var:string label:value="Firstname"/>
+        </label>
+        <input type="text" data-ng-model="card.givenname"/>
+      </md-input-container>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <label class="right inline">
+          <var:string label:value="Lastname"/>
+        </label>
+        <input type="text" data-ng-model="card.sn"/>
+      </md-input-container>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <label class="right inline">
+          <var:string label:value="Nickname"/>
+        </label>
+        <input type="text" data-ng-model="card.nickname"/>
+      </md-input-container>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <label class="right inline">
+          <var:string label:value="Organization"/>
+        </label>
+        <input type="text" data-ng-model="card.org"/>
+      </md-input-container>
+      <md-input-container>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <label class="right inline">
+          <var:string label:value="Title"/>
+        </label>
+        <input type="text" data-ng-model="card.title"/>
+      </md-input-container>
+
+      <!-- org units -->
+
+      <div class="section">
+        <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="icon-minus"><!-- remove --></i>
+            </span>
+          </div>
+          <div class="key">
+            <md-input-container>
+            <label class="right inline">
+              <var:string label:value="Organization Unit"/>
+            </label>
+          </div>
+          <div class="value">
+            <input type="text" label:placeholder="unit" data-ng-model="unit.value"
+                   data-sg-focus-on="orgUnit_{{$index}}"/>
+          </md-input-container>
+
+        </div>
       </div>
       <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addOrgUnit()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="Add Organizational Unit"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- birthday -->
+    <div class="attr">
+      <div class="action">
+        <var:entity const:name="nbsp"/>
+      </div>
+      <div class="key">
+        <label class="right inline">
+          <var:string label:value="Birthday"/>
+        </label>
+      </div>
+      <div class="value">
+        <input type="text" data-ng-model="card.birthday"/>
+      </div>
+    </div>
+    <!-- categories -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="category in card.categories">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('categories', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
         <div class="key">
-          <label class="right inline"><var:string label:value="Display"/></label>
+          <label class="right inline">
+            <var:string label:value="Category"/>
+          </label>
+        </div>
+        <div class="value">
+          <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"/>
+        </div>
+      </div>
+      <div class="attr">
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addCategory()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="New Category"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- emails -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="email in card.emails">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('emails', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
+        <div class="key">
+          <select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
+            <!-- email types -->
+          </select>
+        </div>
+        <div class="value">
+          <input type="email" label:placeholder="email address" data-ng-model="email.value"
+                 data-sg-focus-on="email_{{$index}}"/>
+        </div>
+      </div>
+      <div class="attr">
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addEmail()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="New Email Address"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- phones -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="phone in card.phones">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('phones', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
+        <div class="key">
+          <select class="text-right" data-ng-model="phone.type" data-ng-options="type for type in allTelTypes">
+            <!-- phone types -->
+          </select>
+        </div>
+        <div class="value">
+          <input type="text" label:placeholder="phone number" data-ng-model="phone.value"
+                 data-sg-focus-on="phone_{{$index}}"/>
+        </div>
+      </div>
+      <div class="attr">
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addPhone()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="New Phone Number"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- urls -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="url in card.urls">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('urls', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
+        <div class="key">
+          <select class="text-right" data-ng-model="url.type" data-ng-options="type for type in allUrlTypes">
+            <!-- url types -->
+          </select>
+        </div>
+        <div class="value">
+          <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
+        </div>
+      </div>
+      <div class="attr">
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addUrl()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="New URL"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- addresses -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="address in card.addresses">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('addresses', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
+        <div class="key">
+          <select class="text-right" data-ng-model="address.type" data-ng-options="type for type in allAddressTypes">
+            <!-- address types -->
+          </select>
+        </div>
+        <div class="value compact">
+          <input type="text" label:placeholder="street" data-ng-model="address.street"
+                 data-sg-focus-on="address_{{$index}}"/>
+          <input type="text" data-ng-model="address.street2"/>
+          <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
+          <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
+          <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
+          <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
+          <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
+        </div>
+      </div>
+      <div class="attr">
+        <div class="value single">
+          <span class="button secondary outline tiny" data-ng-click="addAddress()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="New Address"/>
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- note -->
+    <div class="attr">
+      <div class="action">
+        <var:entity const:name="nbsp"/>
+      </div>
+      <div class="key">
+        <label class="right inline">
+          <var:string label:value="Note"/>
+        </label>
+      </div>
+      <div class="value">
+        <textarea data-ng-model="card.note"><!-- note --></textarea>
+      </div>
+    </div>
+  </form>
+  <form name="listForm" data-ng-show="card.$isList()" data-ng-submit="save(listForm)">
+    <div class="buttonsToolbar">
+      <span class="button tiny radius secondary" data-ng-click="cancel()">
+        <i class="icon-arrow-left"><!-- cancel --></i>
+        <var:string label:value="Cancel"/>
+      </span>
+      <span class="button tiny radius secondary" data-ng-click="reset()">
+        <i class="icon-undo"><!-- reset --></i>
+        <var:string label:value="Reset"/>
+      </span>
+      <button class="button tiny radius" type="submit">
+        <i class="icon-checkmark"><!-- save --></i>
+        <var:string label:value="Save"/>
+      </button>
+    </div>
+    <div class="section">
+      <div class="attr">
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
+        <div class="key">
+          <label class="right inline">
+            <var:string label:value="Display"/>
+          </label>
         </div>
         <div class="value">
           <input type="text" data-ng-model="card.fn"/>
         </div>
       </div>
       <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
+        <div class="action">
+          <var:entity const:name="nbsp"/>
+        </div>
         <div class="key">
-          <label class="right inline"><var:string label:value="Firstname"/></label>
-        </div>
-        <div class="value">
-          <input type="text" data-ng-model="card.givenname"/>
-        </div>
-      </div>
-      <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
-        <div class="key">
-          <label class="right inline"><var:string label:value="Lastname"/></label>
-        </div>
-        <div class="value">
-          <input type="text" data-ng-model="card.sn"/>
-        </div>
-      </div>
-      <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
-        <div class="key">
-          <label class="right inline"><var:string label:value="Nickname"/></label>
+          <label class="right inline">
+            <var:string label:value="Nickname"/>
+          </label>
         </div>
         <div class="value">
           <input type="text" data-ng-model="card.nickname"/>
         </div>
       </div>
-      <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
+    </div>
+    <!-- list members -->
+    <div class="section">
+      <div class="attr" data-ng-repeat="ref in card.refs">
+        <div class="action">
+          <span class="button alert icon" data-ng-click="card.$delete('refs', $index)">
+            <i class="icon-minus"><!-- remove --></i>
+          </span>
+        </div>
         <div class="key">
-          <label class="right inline"><var:string label:value="Organization"/></label>
+          <label class="right inline">
+            <var:string label:value="Member"/>
+          </label>
         </div>
         <div class="value">
-          <input type="text" data-ng-model="card.org"/>
+          <input type="text" label:placeholder="email address"
+                 data-ng-model="ref.email"
+                 data-sg-focus-on="ref_{{$index}}"
+                 data-typeahead="card.$preferredEmail($viewValue) as card.$shortFormat($viewValue) for card in addressbook.$filter($viewValue, {dry: true, excludeLists: true})"
+                 data-typeahead-on-select="card.$updateMember($index, $model, $item)"/>
         </div>
       </div>
       <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
-        <div class="key">
-          <label class="right inline"><var:string label:value="Title"/></label>
-        </div>
-        <div class="value">
-          <input type="text" data-ng-model="card.title"/>
+        <div class="value single">
+          <span class="button outline secondary tiny" data-ng-click="addMember()">
+            <i class="icon-plus"><!-- new --></i>
+            <var:string label:value="Add Member"/>
+          </span>
         </div>
       </div>
-      <!-- org units -->
-      <div class="section">
-        <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="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <label class="right inline"><var:string label:value="Organization Unit"/></label>
-          </div>
-          <div class="value">
-            <input type="text" label:placeholder="unit" data-ng-model="unit.value" data-sg-focus-on="orgUnit_{{$index}}"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addOrgUnit()"><i class="icon-plus"><!-- new --></i> <var:string label:value="Add Organizational Unit"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- birthday -->
-      <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
-        <div class="key">
-          <label class="right inline"><var:string label:value="Birthday"/></label>
-        </div>
-        <div class="value">
-          <input type="text" data-ng-model="card.birthday"/>
-        </div>
-      </div>
-      <!-- categories -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="category in card.categories">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('categories', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <label class="right inline"><var:string label:value="Category"/></label>
-          </div>
-          <div class="value">
-            <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"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addCategory()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Category"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- emails -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="email in card.emails">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('emails', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <select class="text-right" data-ng-model="email.type" data-ng-options="type for type in allEmailTypes">
-              <!-- email types -->
-            </select>
-          </div>
-          <div class="value">
-            <input type="email" label:placeholder="email address" data-ng-model="email.value" data-sg-focus-on="email_{{$index}}"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addEmail()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Email Address"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- phones -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="phone in card.phones">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('phones', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <select class="text-right" data-ng-model="phone.type" data-ng-options="type for type in allTelTypes">
-              <!-- phone types -->
-            </select>
-          </div>
-          <div class="value">
-            <input type="text" label:placeholder="phone number" data-ng-model="phone.value" data-sg-focus-on="phone_{{$index}}"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addPhone()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Phone Number"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- urls -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="url in card.urls">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('urls', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <select class="text-right" data-ng-model="url.type" data-ng-options="type for type in allUrlTypes">
-              <!-- url types -->
-            </select>
-          </div>
-          <div class="value">
-            <input type="url" label:placeholder="URL" data-ng-model="url.value" data-sg-focus-on="url_{{$index}}"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addUrl()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New URL"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- addresses -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="address in card.addresses">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('addresses', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <select class="text-right" data-ng-model="address.type" data-ng-options="type for type in allAddressTypes">
-              <!-- address types -->
-            </select>
-          </div>
-          <div class="value compact">
-            <input type="text" label:placeholder="street" data-ng-model="address.street" data-sg-focus-on="address_{{$index}}"/>
-            <input type="text" data-ng-model="address.street2"/>
-            <input type="text" label:placeholder="Postoffice" data-ng-model="address.postoffice"/>
-            <input type="text" label:placeholder="City" data-ng-model="address.locality"/>
-            <input type="text" label:placeholder="Region" data-ng-model="address.region"/>
-            <input type="text" label:placeholder="Country" data-ng-model="address.country"/>
-            <input type="text" label:placeholder="Postal Code" data-ng-model="address.postalcode"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button secondary outline tiny" data-ng-click="addAddress()"><i class="icon-plus"><!-- new --></i> <var:string label:value="New Address"/></span>
-          </div>
-        </div>
-      </div>
-      <!-- note -->
-      <div class="attr">
-        <div class="action"><var:entity const:name="nbsp"/></div>
-        <div class="key">
-          <label class="right inline"><var:string label:value="Note"/></label>
-        </div>
-        <div class="value">
-          <textarea data-ng-model="card.note"><!-- note --></textarea>
-        </div>
-      </div>
-    </form>
-    <form name="listForm" data-ng-show="card.$isList()" data-ng-submit="save(listForm)">
-      <div class="buttonsToolbar">
-        <span class="button tiny radius secondary" data-ng-click="cancel()"><i class="icon-arrow-left"><!-- cancel --></i> <var:string label:value="Cancel"/></span>
-        <span class="button tiny radius secondary" data-ng-click="reset()"><i class="icon-undo"><!-- reset --></i> <var:string label:value="Reset"/></span>
-        <button class="button tiny radius" type="submit"><i class="icon-checkmark"><!-- save --></i> <var:string label:value="Save"/></button>
-      </div>
-      <div class="section">
-        <div class="attr">
-          <div class="action"><var:entity const:name="nbsp"/></div>
-          <div class="key">
-            <label class="right inline"><var:string label:value="Display"/></label>
-          </div>
-          <div class="value">
-            <input type="text" data-ng-model="card.fn"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="action"><var:entity const:name="nbsp"/></div>
-          <div class="key">
-            <label class="right inline"><var:string label:value="Nickname"/></label>
-          </div>
-          <div class="value">
-            <input type="text" data-ng-model="card.nickname"/>
-          </div>
-        </div>
-      </div>
-      <!-- list members -->
-      <div class="section">
-        <div class="attr" data-ng-repeat="ref in card.refs">
-          <div class="action">
-            <span class="button alert icon" data-ng-click="card.$delete('refs', $index)"><i class="icon-minus"><!-- remove --></i></span>
-          </div>
-          <div class="key">
-            <label class="right inline"><var:string label:value="Member"/></label>
-          </div>
-          <div class="value">
-            <input type="text" label:placeholder="email address"
-                   data-ng-model="ref.email"
-                   data-sg-focus-on="ref_{{$index}}"
-                   data-typeahead="card.$preferredEmail($viewValue) as card.$shortFormat($viewValue) for card in addressbook.$filter($viewValue, {dry: true, excludeLists: true})"
-                   data-typeahead-on-select="card.$updateMember($index, $model, $item)"/>
-          </div>
-        </div>
-        <div class="attr">
-          <div class="value single">
-            <span class="button outline secondary tiny" data-ng-click="addMember()"><i class="icon-plus"><!-- new --></i> <var:string label:value="Add Member"/></span>
-          </div>
-        </div>
-      </div>
-    </form>
-  </div>
-</container>
+    </div>
+  </form>
+</md-content>
+
+        </container>