diff --git a/public/css/filters.styl b/public/css/filters.styl
index 6512c3e0b3..969629b421 100644
--- a/public/css/filters.styl
+++ b/public/css/filters.styl
@@ -1,25 +1,34 @@
 .filters
-  
-  margin-top: 5px
-  margin-bottom: 5px
-  
-  .filter-description
-    margin-top: 7px
-    margin-right: 7px
-    padding-left: 7px
-
+  padding-top: 1em
+  padding-bottom: 0.382em
+  margin-left: 0.382em
+  margin-right: 0em
+  ul, li
+    float: left
+  ul
+    list-style: none
+    margin-right: 1em 
+  .filters-controls
+    @extend $hrpg-button-bar
+    hrpg-button-bar-mixin($color-options-menu)
+    li
+      @extend $hrpg-button-master
+      hrpg-button-color-mixin($color-options-menu)
+  .filters-tags, .filters-edit
+    margin-bottom: 0.618em
+  .filters-tags
+    position: relative
+    left: -1em
+    @extend $hrpg-tag-master
+    hrpg-tag-color-mixin($color-filter-tag)
+    &.challenge
+      hrpg-tag-color-mixin($color-filter-tag-challenge)
+      form
+        display: none
   markdown
     display: inline-block
-
-  .glyphicon-bullhorn
-    margin-right: 5px
-
-  .input-group 
-    float: left
-    width: 1px // Trick for proper alignment
-    margin-left: 3px
-    margin-right: 3px
-    margin-top: 5px
-
-    .form-control
-      width: auto
\ No newline at end of file
+  .hrpg-input-group    
+    display: inline-block
+    margin-right: 0.618em
+    @extend $hrpg-button-with-input
+    hrpg-button-color-mixin($color-options-submenu)   
\ No newline at end of file
diff --git a/public/css/global-colors.styl b/public/css/global-colors.styl
index 3ab9f9bba1..3cffd54907 100644
--- a/public/css/global-colors.styl
+++ b/public/css/global-colors.styl
@@ -13,6 +13,10 @@ $color-herobox = desaturate(lighten($better, 16%),32%)
 $color-toolbar = lighten($color-herobox, 70%)
 $color-options-menu = lighten($color-herobox, 85%)
 $color-options-submenu = lighten($color-herobox, 75%)
-
 // button color variables
-$color-button-style-one = $best
\ No newline at end of file
+$color-button-style-one = $best
+// Task background
+$color-tasks = lighten($color-herobox, 65%)
+// Task filter colors
+$color-filter-tag = lighten($good,90%)
+$color-filter-tag-challenge = lighten($bad,90%)    
\ No newline at end of file
diff --git a/public/css/global-modules.styl b/public/css/global-modules.styl
index fcdd352a85..bd11a8256a 100644
--- a/public/css/global-modules.styl
+++ b/public/css/global-modules.styl
@@ -1,15 +1,16 @@
 // Buttons
 // The !important declarations override Bootstrap
 hrpg-button-color-mixin($hrpg-button-color)
-  > a, button
+  > a, > button
     background-color: $hrpg-button-color !important
-    color: darken($hrpg-button-color, 70%) !important 
-    border-color: darken($hrpg-button-color, 16.18%) !important
     &:active
       background-color: darken($hrpg-button-color, 10%) !important
     @media screen and (min-width:768px)
       &:hover
-        background-color: darken($hrpg-button-color, 3.82%) !important
+        background-color: darken($hrpg-button-color, 2.36%) !important
+  > a, > button, > input  
+    color: darken($hrpg-button-color, 70%) !important 
+    border-color: darken($hrpg-button-color, 16.18%) !important
   > a:nth-of-type(2)
       border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
   > div
@@ -37,13 +38,16 @@ hrpg-button-color-mixin($hrpg-button-color)
       border-color: darken($hrpg-button-color, 38.2%) !important
 $hrpg-button-master
   list-style: none
-  > a, button
+  > a, > button, > input
     display: inline-block !important
     padding: 0.25em 0.5em !important
     text-decoration:none
     font-size: 1em
     color:#222
     background-color: transparent
+    .glyphicon
+      position: relative
+      top: 0.132em
     &:active
       background-color: #aaa !important
     @media screen and (min-width:768px)
@@ -51,7 +55,7 @@ $hrpg-button-master
         background-color: #eee !important
 $hrpg-button
   @extend $hrpg-button-master
-  > a, button
+  > a, > button
     border: 1px solid #ccc !important
     border-radius: 0.382em !important
 $hrpg-button-call-to-action
@@ -65,6 +69,53 @@ $hrpg-button-toggle
     border-radius: 0.382em 0em 0em 0.382em !important
   > a:nth-of-type(2)
     border-radius: 0em 0.382em 0.382em 0em !important
+// Input + Button
+$hrpg-button-with-input
+  @extend $hrpg-button-master
+  border: none
+  border-radius: 0.382em
+  input, a, button
+    display: block
+    float: left
+    height: 2em
+  input
+    border: 1px solid #ccc
+    border-radius: 0.382em 0em 0em 0.382em
+    padding-left: 0.618em
+    &:hover
+      background-color: #f5f5f5 !important
+  a, button
+    border-width: 1px
+    border-color: #ccc
+    border-top-style: solid
+    border-right-style: solid
+    border-bottom-style: solid
+    border-left: none
+    border-radius: 0em 0.382em 0.382em 0em
+//Button bar
+hrpg-button-bar-mixin($hrpg-button-bar-color)
+  border-color: darken($hrpg-button-bar-color, 16.18)
+  li
+    border-right-color: darken($hrpg-button-bar-color,3.82%)
+  li:first-of-type
+    background-color: darken($hrpg-button-bar-color,6.18%)
+    color: darken($hrpg-button-bar-color,70%)
+    border-right-color: darken($hrpg-button-bar-color,16.18%)
+$hrpg-button-bar
+  border: 1px solid darken(#fff,16.18%)
+  border-radius: 0.382em
+  margin-bottom: 0.618em
+  li
+    border-right: 1px solid darken(#fff,3.82%)
+  li:first-of-type
+    color: darken(#fff,61.8%)
+    padding: 0.25em 0.5em
+    border-radius: 0.382em 0em 0em 0.382em
+    border-right: 1px solid darken(#fff,6.18%)
+  li:last-of-type
+    border-right: none
+    a
+      border-radius: 0em 0.382em 0.382em 0em
 // Labels
 hrpg-label-color-mixin($hrpg-label-color)
   color: lighten($hrpg-label-color, 90%) !important 
@@ -183,4 +234,69 @@ $hrpg-submenu
   li
     display: inline-block
     margin-right: 1em
-    margin-bottom: 1em
\ No newline at end of file
+    margin-bottom: 1em
+// Tags
+hrpg-tag-color-mixin($hrpg-tag-color)
+  background-color: darken($hrpg-tag-color,3.82%)
+  &.active
+    > a, > a span
+      color: darken($hrpg-tag-color,3.82%)
+      background-color: darken($hrpg-tag-color,32.8%)
+      &:before
+        border-right-color: darken($hrpg-tag-color,32.8%)
+  > a, > a span
+    color: darken($hrpg-tag-color,61.8%)
+    &:before
+      border-right-color: darken($hrpg-tag-color,3.82%)
+  @media screen and (min-width:768px)
+    &:hover, &:hover > a, &:hover > a span
+      //color: darken($hrpg-tag-color,3.82%)
+      background-color: darken($hrpg-tag-color,16.8%)
+    &:hover > a:before
+      border-right-color: darken($hrpg-tag-color,16.18%)
+    &.active:hover, &.active:hover > a, &.active:hover > a span
+      color: darken($hrpg-tag-color,3.82%)
+      background-color: darken($hrpg-tag-color,32.8%)
+    &.active:hover > a:before
+      border-right-color: darken($hrpg-tag-color,32.8%)
+
+$hrpg-tag-master
+  display: inline-block
+  position: relative
+  width: auto
+  margin-left: 1.618em
+  &.active > a
+    color: darken(#fff,3.82%)
+    background-color: darken(#fff,32.8%)
+    &:before
+      border-right-color: darken(#fff,32.8%)
+  a
+    display: inline-block
+    min-height: 2em
+    padding: 0.45em 0.618em 0.45em 0.382em
+    text-decoration:none
+    font-size: 1em
+    line-height: 1
+    color:#222
+    background-color: transparent
+    .glyphicon-bullhorn
+      margin-right: 0.618em
+      font-size: 0.8em
+      padding: 0;
+    &:before, &:after
+      display: block
+      content:'';
+      position: absolute
+      top: 0
+      left: -1.5em
+    &:before  
+      width: 0;
+      height: 0;
+      border-top: 1em solid transparent
+      border-right: 1.5em solid darken(#fff,3.82%)
+      border-bottom: 1em solid transparent
+    &:after
+      width: 0.75em;
+      min-height:2em;
+      background-color: #fff
+      z-index: 2
diff --git a/views/main/filters.jade b/views/main/filters.jade
index e356e552e5..6e75d9423d 100644
--- a/views/main/filters.jade
+++ b/views/main/filters.jade
@@ -1,29 +1,36 @@
 .container-fluid
-  .row 
+  .row
     .filters.col-md-12(ng-controller='FiltersCtrl')
-      .pull-left.filter-description
-        =env.t('tags')
-        |:
-      ul.nav.nav-pills
+      ul.filters-controls
+        li=env.t('tags')
+        //- Edit button
         li
-          a(rel='tooltip', title=env.t('editTags'), ng-click='saveOrEdit()')
-            span.glyphicon(ng-class='{"glyphicon-ok": _editing, "glyphicon-pencil": !_editing}')
-        li(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
-          .input-group(ng-show='_editing')
-            input.form-control.input-sm(type='text', ng-model='tag.name')
-            span.input-group-addon
-              a(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
-                span.glyphicon.glyphicon-trash
-          a(ng-hide='_editing', ng-click='toggleFilter(tag)')
+          a(ng-click='saveOrEdit()')
+            span(ng-if='_editing')=env.t('save')
+            span(ng-if='!_editing')=env.t('editTags')
+        li(ng-hide='_editing')
+          a(ng-click='areTagsHidden = !areTagsHidden')
+            span(ng-if='!areTagsHidden')=env.t('hideTags')
+            span(ng-if='areTagsHidden')=env.t('showTags')
+        //- Clear button
+        li(ng-hide='_editing')
+          a(ng-click='user.filters = {}')
+            span=env.t('clearTags')
+      ul(ng-if='!areTagsHidden || _editing')
+        //- Add new tag
+        li.filters-edit(ng-show='_editing', ng-submit='createTag(_newTag)')
+          form.hrpg-input-group
+            input(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
+            button(ng-click='createTag(_newTag)')=env.t('add')
+        li.filters-edit(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
+          //- Edit tags
+          form.hrpg-input-group(ng-show='_editing')
+            input(type='text', ng-model='tag.name')
+            button(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
+              span.glyphicon.glyphicon-trash
+          //- List of Tags
+        li.filters-tags(ng-if='!_editing', bindonce='user.tags', ng-class='{active: user.filters[tag.id], challenge: tag.challenge}', ng-repeat='tag in user.tags')
+          a(ng-click='toggleFilter(tag)')
             span.glyphicon.glyphicon-bullhorn(bo-if="tag.challenge")
             markdown(ng-model='tag.name')
-        li
-          form.form-inline(ng-show='_editing', ng-submit='createTag(_newTag)')
-            .input-group
-              input.form-control.input-sm(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
-              span.input-group-addon(ng-click='createTag(_newTag)')
-                =env.t('add')
-        // <li class="{#unless activeFilters(users[_userId].filters)}hidden{/}">
-        li
-          a(rel='tooltip', title=env.t('clearFilters'), ng-click='user.filters = {}')
-            span.glyphicon.glyphicon-remove-sign
+            // <li class="{#unless activeFilters(users[_userId].filters)}hidden{/}">
\ No newline at end of file