diff --git a/src/scss/default.scss b/src/scss/default.scss
index b8445fb7..961fabc7 100644
--- a/src/scss/default.scss
+++ b/src/scss/default.scss
@@ -5,14 +5,18 @@ $item-vertical-spacing: 4px !default;
 $item-border-radius: 5px !default;
 
 // groups
-$group-background-color: rgba(250, 240, 210, .5) !default;
-$group-border-color: #DCC896 !default;
+// $group-background-color: rgba(250, 240, 210, .5) !default;
+$group-background-color: #f1f2f6 !default;
+// $group-border-color: #DCC896 !default;
+$group-border-color: #cad3df !default;
 $group-border: 1px solid $group-border-color !default;
 $group-padding: 10px !default;
 
 // rules
-$rule-background-color: rgba(255, 255, 255, .9) !default;
-$rule-border-color: #EEE !default;
+// $rule-background-color: rgba(255, 255, 255, .9) !default;
+$rule-background-color: #fff !default;
+// $rule-border-color: #EEE !default;
+$rule-border-color: #cad3df !default;
 $rule-border: 1px solid $rule-border-color !default;
 $rule-padding: 5px !default;
 // scss-lint:disable ColorVariable
@@ -53,8 +57,12 @@ $ticks-position: 5px, 10px !default;
 
     padding: $group-padding;
     padding-bottom: #{$group-padding - $item-vertical-spacing};
-    border: $group-border;
+    border: 0;
     background: $group-background-color;
+
+    .btn.btn-xs {
+      background-color: rgb(255, 255, 255);
+    }
   }
 
   .rules-group-header {
@@ -82,7 +90,7 @@ $ticks-position: 5px, 10px !default;
 
   .rules-list {
     list-style: none;
-    padding: 0 0 0 #{nth($ticks-position, 1) + nth($ticks-position, 2)};
+    padding: 0 0 0 0;
     margin: 0;
   }
 
@@ -94,9 +102,15 @@ $ticks-position: 5px, 10px !default;
     .rule-operator-container,
     .rule-value-container {
       @extend %rule-component;
+      margin: 9px 0 9px 0;
+      min-width: 90px;
+
+      md-select {
+        width: 100%;
+      }
     }
   }
-
+  
   .rule-value-container {
     border-left: $rule-value-separator;
     padding-left: 5px;
@@ -135,41 +149,41 @@ $ticks-position: 5px, 10px !default;
   }
 
   // TICKS
-  .rules-list>* {
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      left: #{-1 * nth($ticks-position, 2)};
-      width: nth($ticks-position, 2);
-      height: calc(50% + #{$item-vertical-spacing});
-      border-color: $ticks-color;
-      border-style: solid;
-    }
-
-    &::before {
-      top: #{-2 * $ticks-width};
-      border-width: 0 0 $ticks-width $ticks-width;
-    }
-
-    &::after {
-      top: 50%;
-      border-width: 0 0 0 $ticks-width;
-    }
-
-    &:first-child::before {
-      top: #{-$group-padding - $ticks-width};
-      height: calc(50% + #{$group-padding + $item-vertical-spacing});
-    }
-
-    &:last-child::before {
-      border-radius: 0 0 0 #{2 * $ticks-width};
-    }
-
-    &:last-child::after {
-      display: none;
-    }
-  }
+  // .rules-list>* {
+  //   &::before,
+  //   &::after {
+  //     content: '';
+  //     position: absolute;
+  //     left: #{-1 * nth($ticks-position, 2)};
+  //     width: nth($ticks-position, 2);
+  //     height: calc(50% + #{$item-vertical-spacing});
+  //     border-color: $ticks-color;
+  //     border-style: solid;
+  //   }
+
+  //   &::before {
+  //     top: #{-2 * $ticks-width};
+  //     border-width: 0 0 $ticks-width $ticks-width;
+  //   }
+
+  //   &::after {
+  //     top: 50%;
+  //     border-width: 0 0 0 $ticks-width;
+  //   }
+
+  //   &:first-child::before {
+  //     top: #{-$group-padding - $ticks-width};
+  //     height: calc(50% + #{$group-padding + $item-vertical-spacing});
+  //   }
+
+  //   &:last-child::before {
+  //     border-radius: 0 0 0 #{2 * $ticks-width};
+  //   }
+
+  //   &:last-child::after {
+  //     display: none;
+  //   }
+  // }
 }
 
 // import
diff --git a/src/template.js b/src/template.js
index 40b52ce1..ec5908c6 100644
--- a/src/template.js
+++ b/src/template.js
@@ -1,43 +1,20 @@
 QueryBuilder.templates.group = '\
 <dl id="{{= it.group_id }}" class="rules-group-container"> \
-  <dt class="rules-group-header"> \
-    <div class="btn-group pull-right group-actions"> \
-      <button type="button" class="btn btn-xs btn-success" data-add="rule"> \
-        <i class="{{= it.icons.add_rule }}"></i> {{= it.translate("add_rule") }} \
-      </button> \
-      {{? it.settings.allow_groups===-1 || it.settings.allow_groups>=it.level }} \
-        <button type="button" class="btn btn-xs btn-success" data-add="group"> \
-          <i class="{{= it.icons.add_group }}"></i> {{= it.translate("add_group") }} \
-        </button> \
-      {{?}} \
-      {{? it.level>1 }} \
-        <button type="button" class="btn btn-xs btn-danger" data-delete="group"> \
-          <i class="{{= it.icons.remove_group }}"></i> {{= it.translate("delete_group") }} \
-        </button> \
-      {{?}} \
-    </div> \
-    <div class="btn-group group-conditions"> \
-      {{~ it.conditions: condition }} \
-        <label class="btn btn-xs btn-primary"> \
-          <input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"> {{= it.translate("conditions", condition) }} \
-        </label> \
-      {{~}} \
-    </div> \
-    {{? it.settings.display_errors }} \
-      <div class="error-container"><i class="{{= it.icons.error }}"></i></div> \
-    {{?}} \
-  </dt> \
   <dd class=rules-group-body> \
     <ul class=rules-list></ul> \
   </dd> \
+  <button type="button" class="btn btn-xs" data-add="rule"> \
+    <i class="{{= it.icons.add_rule }}"></i> {{= it.translate("add_rule") }} \
+  </button> \
 </dl>';
 
 QueryBuilder.templates.rule = '\
 <li id="{{= it.rule_id }}" class="rule-container"> \
   <div class="rule-header"> \
     <div class="btn-group pull-right rule-actions"> \
-      <button type="button" class="btn btn-xs btn-danger" data-delete="rule"> \
-        <i class="{{= it.icons.remove_rule }}"></i> {{= it.translate("delete_rule") }} \
+      <button type="button" class="btn btn-xs" data-delete="rule"> \
+        <i class="{{= it.icons.remove_rule }}"></i> \
+        <!-- original content {{= it.translate("delete_rule") }} --> \
       </button> \
     </div> \
   </div> \
@@ -51,6 +28,28 @@ QueryBuilder.templates.rule = '\
 
 QueryBuilder.templates.filterSelect = '\
 {{ var optgroup = null; }} \
+<md-input-container name="{{= it.rule.id }}_filter">\
+    <md-select class="form-control" name="{{= it.rule.id }}_filter" ng-change="test(\'{{= it.rule.id }}_filter\')" ng-model="filterSelect_{{= it.rule.id }}" aria-label="{{= it.rule.id }}" placeholder="{{= it.settings.select_placeholder }}" flex> \
+        {{? it.settings.display_empty_filter }} \
+            <md-option value="-1">{{= it.settings.select_placeholder }}</md-option>\
+        {{?}}\
+        {{~ it.filters: filter }} \
+            {{? optgroup !== filter.optgroup }} \
+                {{? optgroup !== null }}\
+                    </optgroup>\
+                {{?}} \
+                {{? (optgroup = filter.optgroup) !== null }} \
+                    <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
+                {{?}} \
+            {{?}} \
+            <md-option value="{{=filter.label}}">{{= it.translate(filter.label) }}</md-option> \
+        {{~}} \
+        {{? optgroup !== null }}\
+            </optgroup>\
+        {{?}} \
+    </md-select>\
+</md-input-container>\
+{{ var optgroup = null; }} \
 <select class="form-control" name="{{= it.rule.id }}_filter"> \
   {{? it.settings.display_empty_filter }} \
     <option value="-1">{{= it.settings.select_placeholder }}</option> \
@@ -66,26 +65,32 @@ QueryBuilder.templates.filterSelect = '\
   {{~}} \
   {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';
+// ';
 
 QueryBuilder.templates.operatorSelect = '\
-{{? it.operators.length === 1 }} \
-<span> \
-{{= it.translate("operators", it.operators[0].type) }} \
-</span> \
-{{?}} \
-{{ var optgroup = null; }} \
-<select class="form-control {{? it.operators.length === 1 }}hide{{?}}" name="{{= it.rule.id }}_operator"> \
-  {{~ it.operators: operator }} \
-    {{? optgroup !== operator.optgroup }} \
-      {{? optgroup !== null }}</optgroup>{{?}} \
-      {{? (optgroup = operator.optgroup) !== null }} \
-        <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
-      {{?}} \
+<md-input-container>\
+    {{? it.operators.length === 1 }} \
+        <span> \
+            {{= it.translate("operators", it.operators[0].type) }} \
+        </span> \
     {{?}} \
-    <option value="{{= operator.type }}">{{= it.translate("operators", operator.type) }}</option> \
-  {{~}} \
-  {{? optgroup !== null }}</optgroup>{{?}} \
-</select>';
+    {{ var optgroup = null; }} \
+    <md-select class="form-control {{? it.operators.length === 1 }}hide{{?}}" name="{{= it.rule.id }}_operator" aria-label="{{= it.rule.id }}_operator" ng-model="operatorSelect_{{= it.rule.id }}" placeholder="{{= it.settings.select_placeholder }}" flex>\
+        {{~ it.operators: operator}}\
+            {{? optgroup !== operator.optgroup }} \
+                {{? optgroup !== null }}\
+                    </optgroup>\
+                {{?}} \
+                {{? (optgroup = operator.optgroup) !== null }} \
+                    <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
+                {{?}} \
+            {{?}} \
+            <md-option value="{{=operator.type}}">{{= it.translate("operators", operator.type) }}</md-option>\
+        {{~}}\
+        {{? optgroup !== null }}</optgroup>{{?}} \
+    </md-select>\
+</md-input-container>\
+';
 
 /**
  * Returns group's HTML