diff --git a/frontend/app/public/cylinder11.jpg b/frontend/app/public/cylinder11.jpg
new file mode 100644
index 0000000..6e45971
Binary files /dev/null and b/frontend/app/public/cylinder11.jpg differ
diff --git a/frontend/app/public/moustache-black.png b/frontend/app/public/moustache-black.png
new file mode 100644
index 0000000..30b7289
Binary files /dev/null and b/frontend/app/public/moustache-black.png differ
diff --git a/frontend/app/public/moustache-white.png b/frontend/app/public/moustache-white.png
new file mode 100644
index 0000000..60e6aef
Binary files /dev/null and b/frontend/app/public/moustache-white.png differ
diff --git a/frontend/app/public/moustache.png b/frontend/app/public/moustache.png
new file mode 100644
index 0000000..a697ab7
Binary files /dev/null and b/frontend/app/public/moustache.png differ
diff --git a/frontend/app/public/test.png b/frontend/app/public/test.png
new file mode 100644
index 0000000..4871a04
Binary files /dev/null and b/frontend/app/public/test.png differ
diff --git a/frontend/app/public/user-cylinder.jpg b/frontend/app/public/user-cylinder.jpg
new file mode 100644
index 0000000..2cea898
Binary files /dev/null and b/frontend/app/public/user-cylinder.jpg differ
diff --git a/frontend/app/src/views/Cards.vue b/frontend/app/src/views/Cards.vue
index 16f6329..e5617d6 100644
--- a/frontend/app/src/views/Cards.vue
+++ b/frontend/app/src/views/Cards.vue
@@ -1,3 +1,127 @@
+
 <template>
-    <h1>Karty z bazy</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 6a4a014..3a64b19 100644
--- a/frontend/app/src/views/Users.vue
+++ b/frontend/app/src/views/Users.vue
@@ -1,3 +1,50 @@
 <template>
-    <h1>KWszyscy zatrejestrowani użytkownicy</h1>
+  <div class="team">
+    <h1 class="subheading grey--text">Wszyscy Dżentelmani</h1>
+
+    <v-container class="my-5">
+        <v-layout row wrap>
+          <v-flex xs12 sm6 md4 lg3 v-for="person in team" :key="person.name">
+            <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">
+                  </v-avatar>
+              </v-responsive>
+              <v-card-text>
+                <div class="subheading">{{ person.name }}</div>
+                <div class="grey--text">{{ person.role }}</div>
+                <div class="grey--text">Liczba wygranych partii</div>
+              </v-card-text>
+              <v-card-actions>
+                <v-btn flat color="grey">
+                  <v-icon small left>message</v-icon>
+                  <span>Message</span>
+                </v-btn>
+              </v-card-actions>
+            </v-card>
+
+          </v-flex>
+        </v-layout>
+    </v-container>
+  </div>
 </template>
+
+<script>
+
+  export default {
+    data(){
+      return{
+          team: [
+          { name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.jpg'},
+          { name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.jpg'},
+          { 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'},
+        ]
+      }
+    }
+
+  }
+</script>
+