diff --git a/frontend/app/public/cylinder11.jpg b/frontend/app/public/cylinder11.jpg
deleted file mode 100644
index 6e45971..0000000
Binary files a/frontend/app/public/cylinder11.jpg and /dev/null differ
diff --git a/frontend/app/public/moustache.png b/frontend/app/public/moustache.png
deleted file mode 100644
index a697ab7..0000000
Binary files a/frontend/app/public/moustache.png and /dev/null differ
diff --git a/frontend/app/public/user-cylinder.jpg b/frontend/app/public/user-cylinder.jpg
deleted file mode 100644
index 2cea898..0000000
Binary files a/frontend/app/public/user-cylinder.jpg and /dev/null differ
diff --git a/frontend/app/public/test.png b/frontend/app/public/user-cylinder.png
similarity index 100%
rename from frontend/app/public/test.png
rename to frontend/app/public/user-cylinder.png
diff --git a/frontend/app/src/components/Popup.vue b/frontend/app/src/components/Popup.vue
index ebda978..87b65e2 100644
--- a/frontend/app/src/components/Popup.vue
+++ b/frontend/app/src/components/Popup.vue
@@ -1,7 +1,7 @@
 <template>
     <v-dialog max-width="600px" v-model="dialog">
         <!-- to widac na przycisku -->
-        <v-btn flat slot="activator" class="grey lighten-2" >Dodaj Nową Kartę</v-btn>
+        <v-btn flat slot="activator" class="success primary--text" >Dodaj Nową Kartę</v-btn>
         <v-card>
             <v-card-title>
                 <!-- to widac w wyswietlanym oknie -->
@@ -11,11 +11,6 @@
                 <v-form class="px-3" ref="form">
                     <v-text-field label="title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
                     <v-textarea label="Information" v-model="content" prepend-icon="edit" :rules="inputRules"></v-textarea>
-                    
-                    <v-menu>
-                        <v-text-field  :rules="inputRules" :value="formattedDate" slot="activator" label="Due data" prepend-icon="date_range"></v-text-field>
-                        <v-date-picker v-model="due"></v-date-picker>
-                    </v-menu>
                     <v-spacer></v-spacer>
                     
                     <v-btn flat class="success mx-0 mt-3" @click="submit" :loading="loading">Add Project</v-btn>
diff --git a/frontend/app/src/views/Cards.vue b/frontend/app/src/views/Cards.vue
index e5617d6..d67093c 100644
--- a/frontend/app/src/views/Cards.vue
+++ b/frontend/app/src/views/Cards.vue
@@ -1,127 +1,117 @@
-
 <template>
-  <div class="cards">
-    <v-container>
-        <!-- widok gentelmana, ktory wybiera karty -->
-        <div id="gentelmanView" v-show="gentelaman">
-            <v-layout column align-center>
-                <!-- karta pytanie na srodku -->
-                <v-flex class="mt-5">
-                    <div class="cardQuestion">
-                        <div class="card-main">
-                            <v-avatar size ="100">
-                                <img src="/moustache-white.png">
-                            </v-avatar>
-                            <p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
-                        </div>
-                    </div>
-                </v-flex>
-                <v-flex class="mb-3">
-                    <Popup @projectAdded="snackbar = true"/>
-                </v-flex>
-            </v-layout>
-            <v-layout row wrap>
-            <v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
-                <v-card flat class="text-xs-center ma-3">
-                <v-responsive class="pt-4">
-                    <v-card-text class="ml-5 pl-5">
+  <div class="dashboard">
+    <h1 class="subheading grey--text">Dashboard </h1>
 
-                    <div class="card">
-                        <div class="card-main">
-                            <v-avatar size ="100" color="white mb-1">
-                                <img src="/moustache-black.png">
-                            </v-avatar>
-                            <p class = "pa-1">{{ card.text }}</p>
-                        </div>
-                    </div>
-                <!-- karty odpowiedzi  -->
-                </v-card-text>
-                </v-responsive>
-                <v-card-actions>
-                    <v-btn flat color="grey">
-                    <!-- <v-icon small left>thumb_up</v-icon> -->
-                        <!-- <v-icon small left>check</v-icon> -->
-                        <v-icon small left>thumb_up_alt</v-icon>
-                    <span>Najlepsza!</span>
-                    </v-btn>
-                </v-card-actions>
-                </v-card>
+    <v-container fluid class="my-5">
 
-            </v-flex>
-            </v-layout>
-        </div>
-        <!-- Widok gracz, ktory daje swoje karty -->
-        <div id="user_view" v-show="!gentelaman">
-            <h1>Uzytkownik</h1>
-        </div>
+      <v-layout row class="mb-3">
+        <v-tooltip top>
+          <v-btn small flat color="grey" @click="sortBy('question')" slot="activator">
+            <v-icon left small>live_help</v-icon>
+            <span class="caption text-lowercase">Karty pytania</span>
+          </v-btn>
+          <span>Sortuj według kart pytań</span>
+        </v-tooltip>
+
+        <v-tooltip top>
+          <v-btn small flat color="grey" @click="sortBy('answer')" slot="activator">
+            <v-icon left small>note</v-icon>
+            <span class="caption text-lowercase">Karty Odpowiedzi</span>
+          </v-btn>
+          <span>Sortujwedług kart Odpowiedzi</span>
+        </v-tooltip>
+      </v-layout>
+
+
+      <!-- pa-3 jest już nie potrzebne w <v-card> lepiej to wyglada jak sa koloery na samym brzegu-->
+      <v-card  flat v-for="card in cards" :key="card.text">
+        <!-- dynamiczne budowanie stringa bedącego wartością klasy - składnia z $ i ciapki ukosne -->
+        <v-layout row wrap :class="`pa-3 cardType ${card.type}`">
+          
+          <v-flex xs12 md6>
+           <div class="caption grey--text">Project title</div>
+           <div>{{card.text}}</div>
+          </v-flex>
+          
+          <v-flex xs6 sm4 md2>
+           <div class="caption grey--text">Dodana</div>
+           <div>{{card.due}}</div>
+          </v-flex>
+
+          <v-flex xs6 sm4 md2>
+            <div class="right">
+              <v-chip small :class="`${card.type} caption my-2`">{{card.type}}</v-chip>
+            </div>
+          </v-flex>
+        </v-layout>
+        <!-- Dodanie po każdym elemncie cienkiej poziomej linii oddzielajacej komponenty -->
+        <v-divider></v-divider>
+      </v-card>
+  
     </v-container>
+  
   </div>
 </template>
 
 <script>
-export default {
-    data(){
-      return{
-          gentelaman: true,
-          cards: [
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-        ],
-        questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
 
-      }
+export default {
+  data(){
+    return{
+      cards: [
+          {due: 'data jakas', text: 'jakis tekst karta pytanie1', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie2', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie3', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie4', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie5', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie6', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie7', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie8', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie9', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie10', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie0', type:'question'},
+
+
+
+
+        {due: 'data jakas', text: 'karta odpowiedz jakis tekst', type:'answer'}
+      ]
     }
+  },
+  methods:{
+    sortBy(prop){
+        //sortowanie po typie karty
+        console.log("prop:", prop)
+      this.cards.filter( obj => {
+          return obj.type === prop
+      })
+    }
+  },
+  created() {
+      console.log("Pobranie wszsytkich kard z bazy")
+  }
 }
 </script>
 
-
 <style>
-.card {
-  width: 200px;                 /* Set width of cards */
-  height: 300px;
-  border: 5px solid #212121;    /* Set up Border */
-  border-radius: 20px;           /* Slightly Curve edges */
-  overflow: hidden;             /* Fixes the corners
-
-  display: flex;                /* Children use Flexbox */
-  flex-direction: column;       /* Rotate Axis */
+.cardType.question{
+  border-left: 5px solid #212121;
 }
 
-.cardQuestion{
-  background: #212121;
-  width: 200px;                 /* Set width of cards */
-  height: 300px;
-  border: 5px solid black;    /* Set up Border */
-  border-radius: 20px;           /* Slightly Curve edges */
-  overflow: hidden;             /* Fixes the corners
-
-  display: flex;                /* Children use Flexbox */
-  flex-direction: column;       /* Rotate Axis */
+.v-chip.question{
+  background:#212121;
+  color: white;
 }
 
-
-.card-main {
-  display: flex;              /* Children use Flexbox */
-  flex-direction: column;     /* Rotate Axis to Vertical */
-  justify-content: center;    /* Group Children in Center */
-  align-items: center;        /* Group Children in Center (+axis) */
-  padding: 15px 0;            /* Add padding to the top/bottom */
+.cardType.answer{
+  border-left: 5px solid #B0BEC5;
 }
 
-.material-icons {
-  font-size: 36px;
-  color: #D32F2F;
-  margin-bottom: 5px;
+.v-chip.answer{
+  background: #CFD8DC;
+  color: black;
+
 }
 
-
-.main-description {
-  color: #D32F2F;
-  font-size: 12px;
-  text-align: center;
-}
 </style>
+
diff --git a/frontend/app/src/views/Game.vue b/frontend/app/src/views/Game.vue
index 86ca531..e5617d6 100644
--- a/frontend/app/src/views/Game.vue
+++ b/frontend/app/src/views/Game.vue
@@ -1,3 +1,127 @@
+
 <template>
-    <h1>Cała planasza gry z kartami</h1>
+  <div class="cards">
+    <v-container>
+        <!-- widok gentelmana, ktory wybiera karty -->
+        <div id="gentelmanView" v-show="gentelaman">
+            <v-layout column align-center>
+                <!-- karta pytanie na srodku -->
+                <v-flex class="mt-5">
+                    <div class="cardQuestion">
+                        <div class="card-main">
+                            <v-avatar size ="100">
+                                <img src="/moustache-white.png">
+                            </v-avatar>
+                            <p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
+                        </div>
+                    </div>
+                </v-flex>
+                <v-flex class="mb-3">
+                    <Popup @projectAdded="snackbar = true"/>
+                </v-flex>
+            </v-layout>
+            <v-layout row wrap>
+            <v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
+                <v-card flat class="text-xs-center ma-3">
+                <v-responsive class="pt-4">
+                    <v-card-text class="ml-5 pl-5">
+
+                    <div class="card">
+                        <div class="card-main">
+                            <v-avatar size ="100" color="white mb-1">
+                                <img src="/moustache-black.png">
+                            </v-avatar>
+                            <p class = "pa-1">{{ card.text }}</p>
+                        </div>
+                    </div>
+                <!-- karty odpowiedzi  -->
+                </v-card-text>
+                </v-responsive>
+                <v-card-actions>
+                    <v-btn flat color="grey">
+                    <!-- <v-icon small left>thumb_up</v-icon> -->
+                        <!-- <v-icon small left>check</v-icon> -->
+                        <v-icon small left>thumb_up_alt</v-icon>
+                    <span>Najlepsza!</span>
+                    </v-btn>
+                </v-card-actions>
+                </v-card>
+
+            </v-flex>
+            </v-layout>
+        </div>
+        <!-- Widok gracz, ktory daje swoje karty -->
+        <div id="user_view" v-show="!gentelaman">
+            <h1>Uzytkownik</h1>
+        </div>
+    </v-container>
+  </div>
 </template>
+
+<script>
+export default {
+    data(){
+      return{
+          gentelaman: true,
+          cards: [
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+        ],
+        questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
+
+      }
+    }
+}
+</script>
+
+
+<style>
+.card {
+  width: 200px;                 /* Set width of cards */
+  height: 300px;
+  border: 5px solid #212121;    /* Set up Border */
+  border-radius: 20px;           /* Slightly Curve edges */
+  overflow: hidden;             /* Fixes the corners
+
+  display: flex;                /* Children use Flexbox */
+  flex-direction: column;       /* Rotate Axis */
+}
+
+.cardQuestion{
+  background: #212121;
+  width: 200px;                 /* Set width of cards */
+  height: 300px;
+  border: 5px solid black;    /* Set up Border */
+  border-radius: 20px;           /* Slightly Curve edges */
+  overflow: hidden;             /* Fixes the corners
+
+  display: flex;                /* Children use Flexbox */
+  flex-direction: column;       /* Rotate Axis */
+}
+
+
+.card-main {
+  display: flex;              /* Children use Flexbox */
+  flex-direction: column;     /* Rotate Axis to Vertical */
+  justify-content: center;    /* Group Children in Center */
+  align-items: center;        /* Group Children in Center (+axis) */
+  padding: 15px 0;            /* Add padding to the top/bottom */
+}
+
+.material-icons {
+  font-size: 36px;
+  color: #D32F2F;
+  margin-bottom: 5px;
+}
+
+
+.main-description {
+  color: #D32F2F;
+  font-size: 12px;
+  text-align: center;
+}
+</style>
diff --git a/frontend/app/src/views/Users.vue b/frontend/app/src/views/Users.vue
index 3a64b19..79bdc12 100644
--- a/frontend/app/src/views/Users.vue
+++ b/frontend/app/src/views/Users.vue
@@ -8,7 +8,7 @@
             <v-card flat class="text-xs-center ma-3">
               <v-responsive class="pt-4">
                   <v-avatar size="100" class="grey lighten-2">
-                    <img :src="person.avatar">
+                    <img :src="userAvatar">
                   </v-avatar>
               </v-responsive>
               <v-card-text>
@@ -35,9 +35,10 @@
   export default {
     data(){
       return{
+          userAvatar: '/user-cylinder.png',
           team: [
           { name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.jpg'},
-          { name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.jpg'},
+          { name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.png'},
           { name: 'Jeż', role: 'Web developer', avatar:'/test.png'},
           { name: 'Miro', role: 'Social media maverick', avatar:'/user-cylinder.jpg' },
           { name: 'Wilk', role: 'Sales guru', avatar:'/user-cylinder.jpg'},