diff --git a/client/src/App.vue b/client/src/App.vue
index 3d244dc..6d99128 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -15,6 +15,9 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 500px;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
diff --git a/client/src/components/chainetv.vue b/client/src/components/chainetv.vue
index 879de5d..7d28ec4 100644
--- a/client/src/components/chainetv.vue
+++ b/client/src/components/chainetv.vue
@@ -1,21 +1,36 @@
 <template>
   <div>
     <h1>ChaineTV</h1>
-      <div>
-        <input v-on:keyup.enter="checkchaine()" name="chaine-input" v-model=chaine type="text">
-      </div>
-      <div>
-        <button v-on:click="checkchaine()">search</button>
+      <div class="form">
+        <div>
+          <input v-on:keyup.enter="checkchaine()" name="chaine-input" v-model=chaine type="text">
+        </div>
+        <div>
+          <button v-on:click="checkchaine()">search</button>
 
-        <button v-on:click="parsechaine()">update chaine</button>
+          <button v-on:click="parsechaine()">update chaine</button>
+        </div>
       </div>
       <div >
         <ul v-if="arrayresultchaines">
           <li v-for="result in arrayresultchaines" v-bind:key="result.chaine"  >
-            {{result.chaine}} : {{result.name}}
+            <h3>{{result.chaine}} : {{result.name}}</h3>
+            <ul v-if="result.emission!='can\'t find channel'">
+              <li><h4><a target="_blank" :href="result.emission.href">{{result.emission.title}}</a></h4></li>
+              <li><img :src="result.emission.img"></li>
+              <li><p>{{result.emission.synopsis}}</p></li>
+              <ul v-if="result.emission.casting.length!=0" class="casting">
+                <h4>casting:</h4>
+                  <li v-for="(actor,index) in result.emission.casting" v-bind:key="index" >
+                    <i><a target="_blank" :href="'https://fr.wikipedia.org/wiki/'+actor.replace(' ','_')">{{actor}}</a></i>
+                  </li>
+              </ul>
+            </ul>
+            <p v-else>{{result.emission}}</p>
+
           </li>
         </ul>
-       
+
       </div>
   </div>
 </template>
@@ -27,51 +42,63 @@ export default {
   name: 'chainetv',
   data() {
     return {
-      arrayresultchaines: [],
+      arrayresultchaines: [ ],
       chaine: '',
     };
   },
   methods: {
     getchaine(num) {
-      
+
       let path = process.env.ROOT_API + '/api/v1/chaine/';
-      path += num;
-      axios.get(path)
+      axios.get(path + num)
         .then((res) => {
-          this.arrayresultchaines.push({"chaine":num,"name":res.data});
-          
+          if(res.status===200){
+            axios.get(path + num + "/emission")
+              .then((res_emission) => {
+                
+                this.arrayresultchaines.push({"chaine":num,"name":res.data,"emission":res_emission.data});
+                console.log(this.arrayresultchaines)
+              })
+              .catch((error) => {
+                  this.arrayresultchaines.push({"chaine":num,"name":res.data});
+
+              });
+          }else if(res.status===204){
+              this.arrayresultchaines.push({"chaine":num,"name":"inconnue"});
+          }
         })
         .catch((error) => {
           // eslint-disable-next-line
           console.error(error);
         });
+
     },
     checkchaine() {
-      if (this.chaine == ""){
-        alert("rentrer un numéro")
-        return
+      if (this.chaine === ""){
+        alert("rentrer un numéro");
+        return;
       }
       this.arrayresultchaines=[];
-      const arraychaine=this.chaine.split(' ');
+      const arraychaine=[...new Set(this.chaine.split(' '))];
 
       arraychaine.forEach(element => {
         if (element != ""){
           this.getchaine(element);
         }
       });
-      
+
     },
     parsechaine() {
       const path = process.env.ROOT_API + '/api/v1/chaine/';
       axios.put(path)
         .then((res) => {
           if (res.data=='OK'){
-            
+             alert("update database OK");
           }
         })
         .catch((res) => {
           // eslint-disable-next-line
-          alert("error during database update")
+          alert("error during database update");
           console.error(res);
         });
     },
@@ -84,11 +111,21 @@ h1, h2 {
   font-size: 2em;
   font-weight: bold;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
 }
+ul.casting>li{
+list-style-type: initial;
+text-align: justify
+}
 
+p {
+ 
+text-align: justify
+ 
+}
 input[type=text] {
 
   border-radius: 4px;
@@ -99,7 +136,9 @@ input[type=text] {
 input[type=text]:focus {
   border: 2px solid rgb(30, 66, 230);
 }
-
+img{
+  
+}
 button {
   background-color: #4CAF50;
   border: none;
diff --git a/client/src/components/ping.vue b/client/src/components/ping.vue
index 71c6b92..fd2e45b 100644
--- a/client/src/components/ping.vue
+++ b/client/src/components/ping.vue
@@ -35,6 +35,7 @@ export default {
 <style scoped>
 h1, h2 {
   font-weight: normal;
+  text-align: center;
 }
 ul {
   list-style-type: none;