--- a/cms/app-client/app/styles/results.scss	Thu Jan 07 17:46:50 2016 +0100
+++ b/cms/app-client/app/styles/results.scss	Thu Jan 07 17:47:22 2016 +0100
@@ -10,27 +10,63 @@
   border-top: none;
 }
 
+.result-header .filters{
+  display: inline-block;
+  border-radius: 5px;
+  padding: 1px 5px;
+  color: #fff;
+}
+.result-header .filters.location{
+  background-color: #3985AB;
+}
+.result-header .filters.langue{
+  background-color: #B94A43;
+}
+.result-header .filters.discours{
+  background-color: #468842;
+}
+.result-header .filters.date{
+  background-color: #E50086;
+}
+.result-header .filters.thematique{
+  background-color: #F89406;
+}
+.result-header .fa{
+  display: inline-block;
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+  cursor: pointer;
+}
+
 .result-list{
   flex: 1 1 auto;
   float: left;
   overflow: auto;
-  border-left: none;
-  border-top: none;
+  border: none;
+  padding: 10px;
   margin-bottom: 10px;
+  background: #eeeeee;
 }
 
 .result-item {
-  border: 1px solid black;
   margin-bottom: 1px;
   height: 64px;
   cursor: pointer;
   padding: 5px;
   overflow: hidden;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  color: #777;
+  transition: all 0.4s ease 0s;
 }
 .result-item:hover {
-  box-shadow: inset -1px -1px 5px 0px rgba(0,0,0,0.75);
+  // box-shadow: -1px -1px 5px 0px rgba(0,0,0,0.75);
 }
 .result-item.details {
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 1rem 0rem;
+  z-index: 200;
   height: inherit;
 }
 
@@ -38,16 +74,6 @@
   margin-top: 10px;
 }
 
-.result-item .play-icon {
-  float: right;
-  background: url('images/play-button.png') no-repeat;
-  background-size: 20px;
-  height: 20px;
-  width: 20px;
-  cursor: pointer;
-  margin: 4px 7px 0 0;
+.result-item.playing .fa {
+  // background: url('images/playing.gif') no-repeat;
 }
-.result-item.playing .play-icon {
-  background: url('images/playing.gif') no-repeat;
-  margin: 6px 5px 0 0;
-}

--- a/cms/app-client/app/templates/results.hbs	Thu Jan 07 17:46:50 2016 +0100
+++ b/cms/app-client/app/templates/results.hbs	Thu Jan 07 17:47:22 2016 +0100
@@ -1,28 +1,30 @@
 <div class="result-header">
   <h2>This is the results</h2>
   <p>
-    Tags:
+    Filtres:
     {{#if location}}
-      <span>{{location}}<button {{action 'deleteTag' 'location'}}>✗</button></span>
+      <span class="filters location">{{location}}<span class="fa fa-times" {{action 'deleteTag' 'location'}}></span></span>
     {{/if}}
     {{#if langue}}
-      <span>{{langue}}<button {{action 'deleteTag' 'langue'}}>✗</button></span>
+      <span class="filters langue">{{langue}}<span class="fa fa-times" {{action 'deleteTag' 'langue'}}></span></span>
     {{/if}}
     {{#if discours}}
-      <span>{{discours}}<button {{action 'deleteTag' 'discours'}}>✗</button></span>
+      <span class="filters discours">{{discours}}<span class="fa fa-times" {{action 'deleteTag' 'discours'}}></span></span>
     {{/if}}
     {{#if date}}
-      <span>{{date}}<button {{action 'deleteTag' 'date'}}>✗</button></span>
+      {{#each date as |item| }}
+        <span class="filters date">{{item}}<span class="fa fa-times" {{action 'deleteTag' 'date' item }}></span></span>
+      {{/each}}
     {{/if}}
     {{#if thematique}}
-      <span>{{thematique}}<button {{action 'deleteTag' 'thematique'}}>✗</button></span>
+      <span class="filters thematique">{{thematique}}<span class="fa fa-times" {{action 'deleteTag' 'thematique'}}></span></span>
     {{/if}}
   </p>
 </div>
 <div class='result-list'>
   {{#each filteredSounds as |item| }}
     <div id="{{item.id}}" {{action "details" item}} class='result-item'>
-      <span class="play-icon" {{action 'play' item}}></span>
+      <span class="fa fa-play-circle fa-lg fa-fw pull-right" {{action 'play' item}}></span>
       <strong>{{ item.title }}</strong> - {{item.interviewer}}
       <div class="description">
         {{item.description}}

--- a/cms/app-client/bower.json	Thu Jan 07 17:46:50 2016 +0100
+++ b/cms/app-client/bower.json	Thu Jan 07 17:47:22 2016 +0100
@@ -13,6 +13,7 @@
     "loader.js": "ember-cli/loader.js#3.2.1",
     "qunit": "~1.18.0",
     "bootstrap-sass": "~3.3.5",
-    "ammap3": "~3.17.3"
+    "ammap3": "~3.17.3",
+    "font-awesome": "~4.4.0"
   }
 }

--- a/cms/app-client/package.json	Thu Jan 07 17:46:50 2016 +0100
+++ b/cms/app-client/package.json	Thu Jan 07 17:47:22 2016 +0100
@@ -25,6 +25,7 @@
     "ember-cli-babel": "^5.1.3",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.1",
+    "ember-cli-font-awesome": "1.3.0",
     "ember-cli-htmlbars": "0.7.9",
     "ember-cli-htmlbars-inline-precompile": "^0.2.0",
     "ember-cli-ic-ajax": "0.2.1",