diff --git a/doc/newClassDiagram.md b/doc/newClassDiagram.md
new file mode 100644
index 0000000..dbc29e9
--- /dev/null
+++ b/doc/newClassDiagram.md
@@ -0,0 +1,18 @@
+# Class diagram
+
+```mermaid
+
+---
+title: Diagramme de classe final (ne prenant en compte que les "cards")
+---
+
+classDiagram
+
+    
+    class Card{
+        attributes
+        +getAttributes()
+        +isEqual()
+    }
+
+```
diff --git a/doc/oldClassDiagram copy.md b/doc/oldClassDiagram copy.md
new file mode 100644
index 0000000..c32b951
--- /dev/null
+++ b/doc/oldClassDiagram copy.md	
@@ -0,0 +1,62 @@
+# Class diagram
+
+```mermaid
+
+---
+title: Diagramme de classe initial (ne prenant en compte que les "cards")
+---
+
+classDiagram
+    Card <|-- Card4WithNoOutline
+    Card <|-- Card4WithNoShape
+    Card <|-- Card4WithNoNumber
+    Card <|-- Card4WithNoColor
+    Card <|-- Card4WithNoFilling
+
+    
+    class Card{
+        +getAttributes()
+        +isEqual()
+    }
+    class Card4WithNoOutline{
+        -string color
+        -string shape
+        -string number
+        -string filling
+        +getAttributes()
+        +isEqual()
+    }
+    class Card4WithNoShape{
+        -string color
+        -string outline
+        -string number
+        -string filling
+        +getAttributes()
+        +isEqual()
+    }
+    class Card4WithNoColor{
+        -string outline
+        -string shape
+        -string number
+        -string filling
+        +getAttributes()
+        +isEqual()
+    }
+    class Card4WithNoNumber{
+        -string color
+        -string shape
+        -string outline
+        -string filling
+        +getAttributes()
+        +isEqual()
+    }
+    class Card4WithNoFilling{
+        -string color
+        -string shape
+        -string number
+        -string outline
+        +getAttributes()
+        +isEqual()
+    }
+
+```
diff --git a/styles/game.css b/styles/game.css
new file mode 100644
index 0000000..95f7b7f
--- /dev/null
+++ b/styles/game.css
@@ -0,0 +1,11 @@
+.description{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 2rem  4rem  2rem  4rem;
+}
+
+h2{
+    font-size: 28px;
+}
\ No newline at end of file
diff --git a/views/card-module.js b/views/card-module.js
new file mode 100644
index 0000000..5e737e9
--- /dev/null
+++ b/views/card-module.js
@@ -0,0 +1,20 @@
+export default{
+    emits:['selected'],
+    props: ['card','id'],
+    data: function(){
+        return{
+            idUsed:"id"+this.id,
+            isClicked:false,
+        }
+    },
+    methods:{
+        clicked() {
+            this.$emit('selected',this.id);
+        }
+    },
+    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>
+    `
+}
\ No newline at end of file
diff --git a/views/deck-module.js b/views/deck-module.js
new file mode 100644
index 0000000..ffa7a17
--- /dev/null
+++ b/views/deck-module.js
@@ -0,0 +1,69 @@
+export default{
+    emits:[],
+    props:{
+        deckR:Deck,
+        idRoom:String,
+        mode:String//true for chrono
+    },
+    data: function(){
+        return{
+            card:new Card({"filling":"empty"}),
+            id:0,
+            deck : new Deck([0,1,2,3],3),
+            selectedCards:[],
+            nbCardsSelected:0,
+            connected:'7/8',
+            timer:'10.51',
+        }
+    },
+    methods:{
+        selected(id){
+            if(this.nbCardsSelected>=this.deck.nbCards){
+                this.set();
+                console.log("deb")
+            }
+            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%");
+                    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%");
+                    this.nbCardsSelected+=1
+                    if(this.nbCardsSelected==this.deck.nbCards){
+                        console.log("this.selectedCards.length",this.selectedCards.length)
+                        this.set();
+                    }
+                }
+            }
+        },
+        set(){
+            console.log("Check Set")
+            let checkSet=true;
+            if(checkSet){
+                console.log("this.selectedCards.length",this.selectedCards.length)
+                this.deck.checkSet(this.selectedCards);
+                this.nbCardsSelected=0;
+                this.selectedCards.splice(0,this.selectedCards.length+1)
+            }
+        },
+    },
+    template:`
+    <div class="description">
+        <h2>Room: {{idRoom}}</h2>
+        <h2 v-if="mode">{{timer}}</h2>
+        <h2 v-else="!mode"> Remaining cards: {{deck.remainingCards.length}}/{{deck.allCards.length}}</h2>
+        <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>
+    `
+}
\ No newline at end of file
diff --git a/views/game.html b/views/game.html
index f692682..a18093e 100644
--- a/views/game.html
+++ b/views/game.html
@@ -8,21 +8,22 @@
     <!-- <base href="https://codefirst.iut.uca.fr/containers/HyperSet-hyperset/"> -->
     <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">
 </head>
 
 
 <header>
     <ul id="nav-bar">
-        <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
-        <li><a href="./views/cards-test.html">Card Test</a></li>
-        <li><a href="./views/tutorial.html">Tutorial</a></li>
-        <li><a href="./views/leaderboard.html">Leaderboard</a></li>
-        <li><a href="./views/about.html">About</a></li>
+        <li><a href="/index.html">Home</a></li> <!-- maybe put a logo -->
+        <li><a href="/views/cards-test.html">Card Test</a></li>
+        <li><a href="/views/tutorial.html">Tutorial</a></li>
+        <li><a href="/views/leaderboard.html">Leaderboard</a></li>
+        <li><a href="/views/about.html">About</a></li>
     </ul>
 </header>
 <body>
     <div id="app">
-        <h1>Game - test </h1>
+        <deck-module id-room="00000" :mode=false></deck-module>
     </div>
     <section>
     </section>
@@ -33,7 +34,10 @@
     <script src="/src/Model/Factory.js"></script>
     <script src="/src/Model/Deck.js"></script>
     <script type="module">
+
         import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
+        import CardModule from '/views/card-module.js';
+        import DeckModule from '/views/deck-module.js';
         const app = createApp({
             created(){},
             data(){
@@ -43,7 +47,8 @@
                 myFun:function(){}
             }
         });
-        //app.component('FormAddArticle', FormAddArticle);
+        app.component('CardModule', CardModule);
+        app.component('DeckModule', DeckModule);
         app.mount('#app');
     </script>
 </body>