diff --git a/UI/.gitignore b/UI/.gitignore
new file mode 100644
index 000000000..95e53a20a
--- /dev/null
+++ b/UI/.gitignore
@@ -0,0 +1,6 @@
+# Created by .ignore support plugin (hsz.mobi)
+WebServerResources/css
+WebServerResources/scss/.sass-cache
+WebServerResources/css/styles.css
+WebServerResources/css/styles.css.map
+WebServerResources/.sass-cache
\ No newline at end of file
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 52130e9af..f688f147c 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -2,34 +2,34 @@
 <container
     xmlns = "http://www.w3.org/1999/xhtml"
     >
-  <md-content class="md-whiteframe-z2" flex ="40" style="min-width: 300px; position: relative;" id = "messagesList">
+  <md-content class="md-whiteframe-z2" flex="40" style="min-width: 300px; position: relative;" id="messagesList">
     <style>
       .vs-repeat-repeated-element {
-      width: 100%;
+        width: 100%;
       }
     </style>
     <header class="md-background sg-md-subheader sg-avatar-left">
       <h2 class="sg-md-subhead-solo md-primary md-hue-3">Unread Messages</h2>
     </header>
 
-    <md-list data-vs-repeat = "72"
-        data-vs-scroll-parent = "#messagesList">
-      <md-item ng-repeat = "currentMessage in mailbox.$messages track by currentMessage.id"
-          data-ng-class = "{unread: !currentMessage.isread}">
+    <md-list data-vs-repeat="72"
+        data-vs-scroll-parent="#messagesList">
+      <md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
+          data-ng-class="{unread: !currentMessage.isread}">
         <md-item-content>
-          <div class = "md-tile-left">
+          <div class="md-tile-left">
             <!--avatar-->
           </div>
-          <div class = "sg-tile-content">
-            <a data-ui-sref = "mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
-                data-ui-sref-active = "_selected">
-              <div class = "sg-md-subhead-multi">
+          <div class="sg-tile-content">
+            <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
+                data-ui-sref-active="_selected">
+              <div class="sg-md-subhead-multi">
                 {{currentMessage.$shortAddress('from')}}
               </div>
-              <span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
-              <div class = "sg-md-body-multi">{{currentMessage.subject}}</div>
-              <i class = "icon-ion-refresh"
-                  data-ng-hide = "mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
+              <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
+              <div class="sg-md-body-multi">{{currentMessage.subject}}</div>
+              <i class="icon-ion-refresh"
+                  data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
             </a>
           </div>
         </md-item-content>
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 2a56cd68c..8936e4f96 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -174,6 +174,7 @@
           <script type = "text/javascript" rsrc:src = "js/Common/ui.js"><!-- space --></script>
           <script type = "text/javascript" rsrc:src = "js/Common/ui-common.js"><!-- space --></script>
           <script type = "text/javascript" rsrc:src = "js/Common/ui-desktop.js"><!-- space --></script>
+          <script type = "text/javascript" rsrc:src = "md-colors/colors.js"><!-- space --></script>
 
           <var:if condition = "hasProductSpecificJavaScript">
             <script type = "text/javascript"
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js
index 7e79b0d08..7640671e6 100644
--- a/UI/WebServerResources/js/Common/ui.js
+++ b/UI/WebServerResources/js/Common/ui.js
@@ -10,7 +10,7 @@
  */
 (function () {
   'use strict';
-  angular.module('SOGo.UI', ['ngMaterial'])
+  angular.module('SOGo.UI', ['ngMaterial', 'mdColors'])
 
       .config(function ($mdThemingProvider) {
 
@@ -119,7 +119,9 @@
                 $log.debug("close RIGHT is done");
               });
         };
-      });
+      })
+
+  .controller('ColorController', ColorController);
 
 })();
 
diff --git a/UI/WebServerResources/md-colors/README.md b/UI/WebServerResources/md-colors/README.md
new file mode 100755
index 000000000..7dcea5a0a
--- /dev/null
+++ b/UI/WebServerResources/md-colors/README.md
@@ -0,0 +1,3 @@
+Adapted from : http://plnkr.co/edit/SHkXcAQDNPHWloBnVxrw?p=preview
+
+Author : Sander Elias (https://github.com/SanderElias)
\ No newline at end of file
diff --git a/UI/WebServerResources/md-colors/colors.js b/UI/WebServerResources/md-colors/colors.js
new file mode 100755
index 000000000..2ba9893e0
--- /dev/null
+++ b/UI/WebServerResources/md-colors/colors.js
@@ -0,0 +1,106 @@
+(function () {
+    "use strict";
+
+    //module global to keep an reference to the dynamic style sheet
+    var customSheet;
+    //module global to available color pallettes
+    var colorStore = {};
+    
+    angular
+        .module('mdColors',['ngMaterial'])
+        .service("ThemeColors", ThemeColors)
+        .config(configColors)
+        .run(loadDefaults);
+        
+    configColors.$inject = ['$mdThemingProvider'];
+    function configColors($mdThemingProvider) {
+        //fetch the colores out of the themeing provider
+        //console.log($mdThemingProvider._THEMES.default.colors.primary.name)
+        Object.keys($mdThemingProvider._PALETTES).forEach(parsePallete);
+        return;
+        
+        // clone the pallete colors to the colorStore var
+        function parsePallete(palleteName) {
+            var pallete = $mdThemingProvider._PALETTES[palleteName];
+            var colors  = [];
+            colorStore[palleteName]=colors;
+            Object.keys(pallete).forEach(copyColors);
+            return ;
+            
+            function copyColors(colorName) {
+                // use an regex to look for hex colors, ignore the rest
+                if (/#[0-9A-Fa-f]{6}|0-9A-Fa-f]{8}\b/.exec(pallete[colorName])) {
+                    colors.push({color:colorName,value:pallete[colorName]});
+                }
+            }
+        }
+    }
+    
+    loadDefaults.$inject=['ThemeColors'];
+    function loadDefaults(ThemeColors) {
+        // this sets the default that is stored in the config-fase into the service!
+        ThemeColors.themes=Object.keys(colorStore);
+        ThemeColors.loadColors('amber');
+    }
+    
+    ThemeColors.$inject = ['$interpolate'];
+    function ThemeColors ($interpolate) {
+        // wrap all of the above up in a reusable service.
+        var service        = this;
+        service.theme      = 'amber';
+        service.colors     = [];
+        service.themes     = [];
+        service.loadColors = loadColors;
+        
+        return service;
+        
+        function loadColors(newPallete) {
+            service.theme=newPallete;
+            service.colors=colorStore[newPallete];
+            createStyleSheet();    
+        }
+        
+        function createStyleSheet () {
+            var colors = service.colors;
+            var fg, bg;
+            if (typeof customSheet === 'undefined') {
+                // use closure for caching the styleSheet
+                newStyleSheet();
+            } else {
+                // remove existing rules
+                // TODO: look into disabling/enabling pre-build style-guides
+                //       in stead of delete and recreate!
+                while (customSheet.cssRules.length > 0 ) {
+                    customSheet.deleteRule(0);
+                }
+            }
+    
+            // set up interpolation functions to build css rules.
+            fg  = $interpolate('.md-fg-{{color}} { color:{{value}};}');
+            bg  = $interpolate('.md-bg-{{color}} { background-color:{{value}};}');
+    
+            colors.forEach(function (color) {
+                // insert foreground color rule
+                customSheet.insertRule(fg(color));
+                // insert background color rule
+                customSheet.insertRule(bg(color));
+            });
+        }
+    }        
+        
+    function newStyleSheet() {
+        // function to ad an dynamic style-sheet to the document
+        var style   = document.createElement("style");
+        style.title = 'Dynamic Generated my Angular-Material';
+        // WebKit hack... (not sure if still needed)
+        style.appendChild(document.createTextNode(""));
+
+        document.head.appendChild(style);
+        // store the sheet in the closure for reuse
+        // creating a new sheet is a 'costly' operation, and I
+        // just need one.
+        customSheet = style.sheet;
+        return style.sheet;
+    }
+
+}());
\ No newline at end of file
diff --git a/UI/WebServerResources/md-colors/index.html b/UI/WebServerResources/md-colors/index.html
new file mode 100755
index 000000000..a8f95249e
--- /dev/null
+++ b/UI/WebServerResources/md-colors/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html ng-app="myPlunk" ng-strict-di="">
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>MD Template</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=yes" />
+    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css" />
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body ng-controller="AppController as vm">
+    <md-toolbar>
+        <div class="md-toolbar-tools">
+            <span>Hello angular {{vm.version}}</span>
+        </div>
+    </md-toolbar>
+
+
+    <md-card>
+        <h2 class='md-bg-500 title md-hue-1'>Color Pallete Sample</h2>
+
+        <md-card-content>
+            <p>This is a sample that goes with <a href="https://github.com/angular/material/issues/1269">this github issue</a></p>
+
+            <select ng-model='vm.th.theme' ng-options='color for color in vm.th.themes' ng-change='vm.th.loadColors(vm.th.theme);'>
+            </select>
+
+            <div>
+                <h4>Select a color-theme above!</h4>
+                <p>This wil override the md-bg-[colorname] and md-fg-[colorname] css-rules.</p>
+            </div>
+
+            <table>
+
+                <tr>
+                    <th>color</th>
+                    <th>className</th>
+                    <th>result</th>
+                    <th>classname</th>
+                    <th>result</th>
+                </tr>
+
+                <tr ng-repeat='color in vm.th.colors'>
+                    <td>{{color.color}}</td>
+                    <td>md-fg-{{color.color}}:</td>
+                    <td>
+                        <div class="md-fg-{{color.color}}">Foreground</div>
+                    </td>
+                    <td>md-bg-{{color.color}}:</td>
+                    <td>
+                        <div class="md-bg-{{color.color}}">Background</div>
+                    </td>
+                </tr>
+
+            </table>
+            <p>Those color will be available application wide, and will not change with local themes.</p>
+        </md-card-content>
+    </md-card>
+
+
+
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-aria.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-animate.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-messages.min.js"></script>
+    <script src="//code.angularjs.org/1.3.10/i18n/angular-locale_nl-nl.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script>
+    <script src="colors.js"></script>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/UI/WebServerResources/md-colors/script.js b/UI/WebServerResources/md-colors/script.js
new file mode 100755
index 000000000..064f579c4
--- /dev/null
+++ b/UI/WebServerResources/md-colors/script.js
@@ -0,0 +1,20 @@
+(function() {
+   "use strict";
+   //Use an IIFE
+
+   AppController.$inject = ['ThemeColors']
+   function AppController(ThemeColors) {
+      this.version = angular.version.full + " " + angular.version.codeName;
+      
+      this.th = ThemeColors;
+   }
+   
+ 
+   //Hook up all my function into angular
+   angular.module('myPlunk', [
+      'ngMaterial',
+      'mdColors'
+   ])
+      .controller('AppController', AppController)
+ 
+}());
\ No newline at end of file