diff --git a/src/Model/Deck.js b/src/Model/Deck.js
index 07aedc6..83e9123 100755
--- a/src/Model/Deck.js
+++ b/src/Model/Deck.js
@@ -93,6 +93,7 @@ class Deck {
    * @author Bastien Jacquelin
    */
   removeFromoutputCards(selectedCards) {//working✅
+    console.log(JSON.parse(JSON.stringify(selectedCards)))
     let set = [];
     selectedCards.forEach(element => {
       for (let i = 0; i < this.outputCards.length; i++) {
diff --git a/src/Model/card-to-html.js b/src/Model/card-to-html.js
index bfd0957..e5bbb1f 100755
--- a/src/Model/card-to-html.js
+++ b/src/Model/card-to-html.js
@@ -1,7 +1,7 @@
 class CardToHtml {
   
   static create(card) {
-    const gameWindow = document.querySelector('#main');
+    // const gamewindow = document.querySelector('#main');
     const div = document.createElement('div');
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 
@@ -23,7 +23,8 @@ class CardToHtml {
       div.appendChild(svg.cloneNode(true))
     }
 
-    gameWindow.appendChild(div);    
+    // gamewindow.appendChild(div);
+    return div;
   }
 
   static createPath(shape,color,filling,outline,step) {
@@ -41,17 +42,17 @@ class CardToHtml {
 
     // Add lots of attributes
     path.setAttribute("d",SHAPE_PATH[shape]);
-    path.setAttribute('stroke',`#${color}`);
-    path.setAttribute('fill',`#${color}`);
+    path.setAttribute('stroke',`${color}`);
+    path.setAttribute('fill',`${color}`);
     path.setAttribute('stroke-width','18');
 
     // Case shape do not have color
-    if(filling === 'none') {
+    if(filling === 'none' || filling === 'empty') {
       path.setAttribute('fill','none');
     }
 
     // Add svg attributes for shape outline
-    if(outline !== null) {
+    if(outline !== null && outline!==undefined) {
       Object.keys(OUTLINE_SPEC[outline]).forEach(function(k) {
         path.setAttribute(k,OUTLINE_SPEC[outline][k]);
       });
diff --git a/styles/card.css b/styles/card.css
index 1b3c395..546028d 100755
--- a/styles/card.css
+++ b/styles/card.css
@@ -3,15 +3,20 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  height: 10rem;
-  min-width: 20rem;
-  padding: 3em;
-  margin: 1.7rem; /* for better display */
+  height: 8rem;
+  min-width: 18rem;
+  padding: 1.5em;
+  margin: 1.2rem; /* for better display */
   border: 0.3em solid black;
   border-radius: 2em;
   background-color: white;
 }
 
+svg {
+  height: 12vh;
+  width: 6vh;
+}
+
 .item {
   margin: 1rem;
 }
diff --git a/views/card-module.js b/views/card-module.js
index 5e737e9..d7c7e30 100644
--- a/views/card-module.js
+++ b/views/card-module.js
@@ -5,16 +5,30 @@ export default{
         return{
             idUsed:"id"+this.id,
             isClicked:false,
+            svgCard: CardToHtml.create(this.card)
         }
     },
     methods:{
         clicked() {
             this.$emit('selected',this.id);
-        }
+        },
+    },
+    
+    // display svg card on component apparition
+    mounted() {
+        const cardDiv = document.querySelector(`#${this.idUsed}`);
+        cardDiv.appendChild(this.svgCard);
+    },
+
+    // change svg card when card object is updated
+    beforeUpdate() {
+        this.svgCard = CardToHtml.create(this.card)
+        const cardDiv = document.querySelector(`#${this.idUsed}`);
+        cardDiv.querySelector('.card').remove();
+        cardDiv.appendChild(this.svgCard);
     },
     template:`
-    <div v-bind:id="idUsed" v-bind:style="{border: '2px solid black', color: 'red', fontSize: '20px', cursor: 'pointer',width:'100%',height:'100%' }" v-on:click="clicked">
-        {{card.attributes}}
+    <div v-bind:id="idUsed" v-on:click="clicked">
     </div>
     `
 }
\ No newline at end of file
diff --git a/views/cards-test.html b/views/cards-test.html
index 377b027..57c7f1c 100755
--- a/views/cards-test.html
+++ b/views/cards-test.html
@@ -110,28 +110,29 @@
   <script src="../src/Model/Const.js"></script>
   <script src="../src/Model/card-to-html.js"></script>
   <script>
-    const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
-    const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
-    const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
-    const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
-    const testCard5 = new Card({shape: 'triangle', color: '79ec36', number: 3, filling: 'none', outline: 'spade'});
-    const testCard6 = new Card({shape: 'squiggle', color: '008000', number: 1, filling: 'dot', outline: 'dot'});
-    const testCard7 = new Card({shape: 'diamond', color: 'ff0000', number: 5, filling: 'stripe', outline: null});
+    // const testCard1 = new Card({shape: 'diamond', color: 'ed5467', number: 2, filling: 'grid', outline: 'rect'})
+    // const testCard2 = new Card({shape: 'star', color: '78ef56', number: 3, filling: 'dot', outline: 'dot'});
+    // const testCard3 = new Card({shape: 'squiggle', color: '79ec36', number: 2, filling: 'stripe', outline: 'spade'});
+    // const testCard4 = new Card({shape: 'oval', color: '79ec36', number: 3, filling: 'full', outline: 'full'});
+    // const testCard5 = new Card({shape: 'triangle', color: '79ec36', number: 3, filling: 'none', outline: 'spade'});
+    // const testCard6 = new Card({shape: 'squiggle', color: '008000', number: 1, filling: 'dot', outline: 'dot'});
+    // const testCard7 = new Card({shape: 'diamond', color: 'ff0000', number: 5, filling: 'stripe', outline: null});
 
-    const c1 = new Card({shape: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
-    const c2 = new Card({shape: 'oval', color: '008000', number: 2, filling: 'full', outline: null})
-    const c3 = new Card({shape: 'oval', color: '800080', number: 3, filling: 'full', outline: null})
+    // const c1 = new Card({shape: 'oval', color: 'FF0000', number: 1, filling: 'full', outline: null})
+    // const c2 = new Card({shape: 'oval', color: '008000', number: 2, filling: 'full', outline: null})
+    // const c3 = new Card({shape: 'oval', color: '800080', number: 3, filling: 'full', outline: null})
+
+    const c1 = new Card({shape: 'diamond', color: 'green', number: 3, filling: 'empty', outline: null})
+    const c2 = new Card({shape: 'squiggle', color: 'blue', number: 1, filling: 'stripe', outline: null})
+    const c3 = new Card({shape: 'squiggle', color: 'blue', number: 2, filling: 'stripe', outline: null})
+    const c4 = new Card({shape: 'diamond', color: 'green', number: 2, filling: 'empty', outline: null})
+    const c5 = new Card({shape: 'oval', color: 'red', number: 2, filling: 'full', outline: null})
 
-    // CardToHtml.create(testCard1);
-    // CardToHtml.create(testCard2);
-    // CardToHtml.create(testCard3);
-    // CardToHtml.create(testCard4);
-    // CardToHtml.create(testCard5);
-    // CardToHtml.create(testCard6);
-    //CardToHtml.create(testCard7);
     CardToHtml.create(c1);
     CardToHtml.create(c2);
     CardToHtml.create(c3);
+    CardToHtml.create(c4);
+    CardToHtml.create(c5);
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/deck-module.js b/views/deck-module.js
index ffa7a17..54f7212 100644
--- a/views/deck-module.js
+++ b/views/deck-module.js
@@ -18,6 +18,7 @@ export default{
     },
     methods:{
         selected(id){
+            console.log(id);
             if(this.nbCardsSelected>=this.deck.nbCards){
                 this.set();
                 console.log("deb")
@@ -25,14 +26,14 @@ export default{
             else{
                 if(this.selectedCards[id]!=null){
                     console.log("deselec")
-                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid black; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    document.querySelector(`#id${id}`).setAttribute("style","border: none;cursor: pointer;");
                     this.nbCardsSelected-=1
                     this.selectedCards[id]=null
                 }
                 else{
                     console.log("Selec")
                     this.selectedCards[id]=this.deck.outputCards[id-1]
-                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; color: red; fontSize: 20px; cursor: pointer; width:100%; height:100%");
+                    document.querySelector(`#id${id}`).setAttribute("style","border: 2px solid red; cursor: pointer;");
                     this.nbCardsSelected+=1
                     if(this.nbCardsSelected==this.deck.nbCards){
                         console.log("this.selectedCards.length",this.selectedCards.length)
@@ -60,10 +61,8 @@ export default{
         <h2>Players: {{connected}}</h2>
     </div>
     
-    <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 25rem 20px 20px'}">
-        <div class="Cardframe" v-bind:style="{ width:'12%', height:'15rem', margin:'2% 2% 2% 2%'}" v-for="n in deck.outputCards.length">
-            <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1]></card-module>
-        </div>
+    <div v-bind:style="{border: '3px solid black', fontSize: '20px', display:'flex', 'flex-wrap':'wrap',margin:'1rem 18rem 20px 20px'}">
+            <card-module @selected='selected' :id=n :card=this.deck.outputCards[n-1] v-for="n in deck.outputCards.length"/>
     </div>
     `
 }
\ No newline at end of file
diff --git a/views/game.html b/views/game.html
index a18093e..430713b 100644
--- a/views/game.html
+++ b/views/game.html
@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="/styles/style.css">
     <link rel="stylesheet" type="text/css" href="/styles/index.css">
     <link rel="stylesheet" type="text/css" href="/styles/game.css">
+    <link rel="stylesheet" type="text/css" href="/styles/card.css">
 </head>
 
 
@@ -22,11 +23,73 @@
     </ul>
 </header>
 <body>
+    <svg width="200" height="400" style="position: fixed; z-index: -1">
+        <defs>
+          <pattern
+            id="pattern-stripe"
+            width="2"
+            height="20"
+            patternUnits="userSpaceOnUse"
+          >
+            <rect width="2" height="8" fill="#fff" />
+          </pattern>
+    
+          <pattern
+            id="pattern-grid"
+            width="30"
+            height="30"
+            patternUnits="userSpaceOnUse"
+          >
+            <rect width="7.5" height="30" fill="#fff" />
+            <rect width="30" height="7.5" fill="#fff" />
+          </pattern>
+    
+          <pattern
+            id="pattern-dot"
+            width="40"
+            height="40"
+            patternUnits="userSpaceOnUse"
+          >
+            <circle cx="18" cy="18" r="12" fill="#fff" />
+          </pattern>
+    
+          <mask id="mask-stripped">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-stripe)"
+            />
+          </mask>
+    
+          <mask id="mask-pointed">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-dot)"
+            />
+          </mask>
+    
+          <mask id="mask-squared">
+            <rect
+              x="0"
+              y="0"
+              width="200"
+              height="400"
+              fill="url(#pattern-grid)"
+            />
+          </mask>
+        </defs>
+      </svg>
     <div id="app">
         <deck-module id-room="00000" :mode=false></deck-module>
     </div>
     <section>
     </section>
+    <script src="/src/Model/card-to-html.js"></script>
     <script src="/src/Model/Exceptions.js"></script>
     <script src="/src/Model/Card.js"></script>
     <script src="/src/algo.js"></script>