diff --git a/.hgignore b/.hgignore
--- a/.hgignore
+++ b/.hgignore
@@ -8,6 +8,7 @@ syntax: glob
 *.swp
 *.tox
 *.DS_Store*
+rhodecode/public/js/src/components/**/*.css
 
 syntax: regexp
 
diff --git a/Gruntfile.js b/Gruntfile.js
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -129,13 +129,22 @@ module.exports = function(grunt) {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less",
           "<%= dirs.css %>/style-polymer.css": "<%= dirs.css %>/polymer.less"
         }
+      },
+      components: {
+        files: [{
+          cwd: '<%= dirs.js.src %>/components/',
+          dest: '<%= dirs.js.src %>/components/',
+          src: ['**/*.less'],
+          expand: true,
+          ext: '.css'
+        }]
       }
     },
 
     watch: {
       less: {
         files: ["<%= dirs.css %>/*.less"],
-        tasks: ["less:development", 'concat:polymercss', "vulcanize"]
+        tasks: ["less:development", 'less:components', 'concat:polymercss', "vulcanize"]
       },
       js: {
         files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/*.*"],
@@ -174,5 +183,5 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-crisper');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['less:production', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
 };
diff --git a/rhodecode/public/css/polymer.less b/rhodecode/public/css/polymer.less
--- a/rhodecode/public/css/polymer.less
+++ b/rhodecode/public/css/polymer.less
@@ -13,21 +13,3 @@
 @import 'examples';
 @import 'login';
 @import 'comments';
-
-
-.toast-level {
-  display: inline-block;
-  min-width: 100px;
-  font-weight: bold;
-  text-transform: uppercase;
-  &.info, &.success {
-    color: #0ac878;
-  }
-  &.error, &.danger {
-    color: #e85e4d;
-  }
-  &.warning {
-    color: #ffc854;
-  }
-}
-
diff --git a/rhodecode/public/js/src/components/rhodecode-toast.html b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
rename from rhodecode/public/js/src/components/rhodecode-toast.html
rename to rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
--- a/rhodecode/public/js/src/components/rhodecode-toast.html
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html
@@ -1,35 +1,9 @@
-<link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="rhodecode-unsafe-html.html">
+<link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
-        <style include="shared-styles"></style>
-
-        <style>
-            paper-toast{
-                width: 100%;
-                min-width: 400px;
-                --paper-toast-background-color: #ffffff;
-                --paper-toast-color: #000000;
-            }
-            paper-toast a{
-                font-weight: bold
-            }
+        <link rel="stylesheet" href="rhodecode-toast.css">
 
-            .toast-message-holder {
-                width: calc(100% - 150px);
-                display: inline-block;
-            }
-            .toast-close {
-                display: inline-block;
-                width: 145px;
-                text-align: right;
-                float: right;
-            }
-            .toast-notification {
-                padding: 10px 0 10px 0;
-            }
-
-        </style>
         <paper-toast id="p-toast" duration="0"  horizontal-offset="100" horizontal-align="auto" vertical-align="top" always-on-top>
             <div class="toast-message-holder">
                 <template is="dom-repeat" items="{{toasts}}">
@@ -45,35 +19,5 @@
         </paper-toast>
     </template>
 
-    <script>
-        Polymer({
-            is: 'rhodecode-toast',
-            properties: {
-                toasts: {
-                    type: Array,
-                    value: function(){
-                        return []
-                    }
-                }
-            },
-            observers: [
-                '_changedToasts(toasts.splices)'
-            ],
-            ready: function(){
-
-            },
-
-            _changedToasts: function(newValue, oldValue){
-                this.$['p-toast'].notifyResize();
-            },
-            dismissNotifications: function(){
-                this.$['p-toast'].close();
-                this.splice('toasts', 0);
-            },
-            open: function(){
-                this.$['p-toast'].open();
-            },
-            _gettext: _gettext
-        });
-    </script>
+    <script src="rhodecode-toast.js"></script>
 </dom-module>
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
new file mode 100644
--- /dev/null
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.js
@@ -0,0 +1,29 @@
+Polymer({
+    is: 'rhodecode-toast',
+    properties: {
+        toasts: {
+            type: Array,
+            value: function(){
+                return []
+            }
+        }
+    },
+    observers: [
+        '_changedToasts(toasts.splices)'
+    ],
+    ready: function(){
+
+    },
+
+    _changedToasts: function(newValue, oldValue){
+        this.$['p-toast'].notifyResize();
+    },
+    dismissNotifications: function(){
+        this.$['p-toast'].close();
+        this.splice('toasts', 0);
+    },
+    open: function(){
+        this.$['p-toast'].open();
+    },
+    _gettext: _gettext
+});
diff --git a/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less
new file mode 100644
--- /dev/null
+++ b/rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.less
@@ -0,0 +1,39 @@
+paper-toast{
+    width: 100%;
+    min-width: 400px;
+    --paper-toast-background-color: #ffffff;
+    --paper-toast-color: #000000;
+}
+paper-toast a{
+    font-weight: bold
+}
+
+.toast-message-holder {
+    width: ~'calc(100% - 150px)';
+    display: inline-block;
+}
+.toast-close {
+    display: inline-block;
+    width: 145px;
+    text-align: right;
+    float: right;
+}
+.toast-notification {
+    padding: 10px 0 10px 0;
+}
+
+.toast-level {
+    display: inline-block;
+    min-width: 100px;
+    font-weight: bold;
+    text-transform: uppercase;
+    &.info, &.success {
+        color: #0ac878;
+    }
+    &.error, &.danger {
+        color: #e85e4d;
+    }
+    &.warning {
+        color: #ffc854;
+    }
+}
diff --git a/rhodecode/public/js/src/components/rhodecode-unsafe-html.html b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html
rename from rhodecode/public/js/src/components/rhodecode-unsafe-html.html
rename to rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html
--- a/rhodecode/public/js/src/components/rhodecode-unsafe-html.html
+++ b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html
@@ -1,22 +1,9 @@
-<link rel="import" href="../../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
 
 <dom-module id="rhodecode-unsafe-html">
     <template>
         <style include="shared-styles"></style>
         <content></content>
     </template>
-    <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
-              text: {
-                  type: String,
-                  observer: '_handleText'
-              }
-            },
-            _handleText: function(newVal, oldVal){
-                this.innerHTML = this.text;
-            }
-        })
-    </script>
+    <script src="rhodecode-unsafe-html.js"></script>
 </dom-module>
diff --git a/rhodecode/public/js/src/components/rhodecode-unsafe-html.html b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
copy from rhodecode/public/js/src/components/rhodecode-unsafe-html.html
copy to rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
--- a/rhodecode/public/js/src/components/rhodecode-unsafe-html.html
+++ b/rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.js
@@ -1,22 +1,12 @@
-<link rel="import" href="../../../../../bower_components/polymer/polymer.html">
-
-<dom-module id="rhodecode-unsafe-html">
-    <template>
-        <style include="shared-styles"></style>
-        <content></content>
-    </template>
-    <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
-              text: {
-                  type: String,
-                  observer: '_handleText'
-              }
-            },
-            _handleText: function(newVal, oldVal){
-                this.innerHTML = this.text;
-            }
-        })
-    </script>
-</dom-module>
+Polymer({
+    is: 'rhodecode-unsafe-html',
+    properties: {
+        text: {
+            type: String,
+            observer: '_handleText'
+        }
+    },
+    _handleText: function(newVal, oldVal){
+        this.innerHTML = this.text;
+    }
+})
diff --git a/rhodecode/public/js/src/components/shared-components.html b/rhodecode/public/js/src/components/shared-components.html
--- a/rhodecode/public/js/src/components/shared-components.html
+++ b/rhodecode/public/js/src/components/shared-components.html
@@ -5,5 +5,5 @@
 <link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">
 <link rel="import" href="shared-styles.html">
-<link rel="import" href="rhodecode-toast.html">
-<link rel="import" href="rhodecode-unsafe-html.html">
+<link rel="import" href="rhodecode-toast/rhodecode-toast.html">
+<link rel="import" href="rhodecode-unsafe-html/rhodecode-unsafe-html.html">