diff --git a/src/App.vue b/src/App.vue
index 2246669..a2c1558 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@
 
 <style lang="scss">
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
new file mode 100644
index 0000000..df4c9d4
--- /dev/null
+++ b/src/components/CardComponent.vue
@@ -0,0 +1,42 @@
+<template>
+    <div class="card" :class="{black: !isBlack}">
+        <span class="text">{{ text }}</span>
+        <span class="bottom-text">Cards Against Idiots</span>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Component, Prop, Vue } from "vue-property-decorator";
+
+    @Component
+    export default class CardComponent extends Vue {
+        @Prop()
+        private text!: string;
+
+        @Prop()
+        private isBlack!: boolean;
+    }
+</script>
+
+<style scoped>
+.card{
+    width: 13em;
+    height: 17em;
+    border: solid black;
+    border-radius: 12px;
+    padding-top: 1em;
+    background: white;
+}
+
+.bottom-text {
+    display: block;
+    position: relative;
+    top: 13em;
+    font-style: italic;
+}
+
+.black {
+    background-color: black;
+    color: white;
+}
+</style>
diff --git a/src/components/StackedCards.vue b/src/components/StackedCards.vue
new file mode 100644
index 0000000..075de02
--- /dev/null
+++ b/src/components/StackedCards.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <card-component :text="text[0]" class="c1" isBlack="false" />
+        <card-component :text="text[1]" class="c2" v-if="this.text.length > 1" isBlack="false"/>
+        <card-component :text="text[2]" class="c3" v-if="this.text.length > 2" isBlack="false"/>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import CardComponent from "./CardComponent.vue";
+@Component({
+    components: {CardComponent},
+})
+export default class StackedCards extends Vue {
+    @Prop()
+    private text!: string[];
+
+}
+</script>
+
+<style scoped>
+.c2{
+    position: relative;
+    top: -15em;
+    left: 0.3em;
+}
+
+.c3 {
+    position: relative;
+    top: -30em;
+    left: 0.6em;
+}
+</style>
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 69b2cb8..c568647 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -40,7 +40,7 @@ import { Card } from "../models/Card";
 import { Answer } from "../models/Answer";
 
 @Component({
-  name: "Game",
+  components: {Card},
 })
 export default class GameVueView extends Vue {
   private game: Game = {};
diff --git a/src/views/JoinRoom.vue b/src/views/JoinRoom.vue
index aef8fb6..8875962 100644
--- a/src/views/JoinRoom.vue
+++ b/src/views/JoinRoom.vue
@@ -14,19 +14,25 @@
     <input id="code" type="text" v-model="code" placeholder="Optional room code" minlength="4" />
 
     <button @click="checkRoom" id="join">Join!</button>
+
+    <stacked-cards :text="texts" />
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { axios_api } from "../util/api";
 import {Room} from "../models/Room";
+import CardComponent from "@/components/CardComponent.vue";
+import StackedCards from "@/components/StackedCards.vue";
 
 @Component({
   name: "JoinRoom",
+  components: {StackedCards, CardComponent},
 })
 export default class JoinRoom extends Vue {
   private code: string = "";
   private name: string = "";
+  private texts: string[] = ["a", "b", "c"];
 
   private checkRoom() {
     if (this.name.length < 1 || this.name.length > 25) {
diff --git a/yarn.lock b/yarn.lock
index be37d0c..d8989fd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1210,9 +1210,9 @@ ajv-errors@^1.0.0:
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
 ajv-keywords@^3.1.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
-  integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
 ajv@^6.1.0, ajv@^6.5.5:
   version "6.10.1"
@@ -1290,9 +1290,9 @@ anymatch@^2.0.0:
     normalize-path "^2.1.1"
 
 anymatch@^3.0.1:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.0.2.tgz#ddb3a8495d44875423af7b919aace11e91732a41"
-  integrity sha512-rUe9SxpRQlVg4EM8It7JMNWWYHAirTPpbTuvaSKybb5IejNgWB3PGBBX9rrPKDx2pM/p3Wh+7+ASaWRyyAbxmQ==
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.0.3.tgz#2fb624fe0e84bccab00afee3d0006ed310f22f09"
+  integrity sha512-c6IvoeBECQlMVuYUjSwimnhmztImpErfxJzWZhIQinIvQWoGOnB0dLIgifbPHQt5heS6mNlaZG16f06H3C8t1g==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -1418,7 +1418,7 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-async-each@^1.0.1, async-each@^1.0.3:
+async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
   integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
@@ -1953,18 +1953,17 @@ check-types@^8.0.3:
   integrity sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==
 
 "chokidar@>=2.0.0 <4.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.1.tgz#98fe9aa476c55d9aea7841d6325ffdb30e95b40c"
-  integrity sha512-2ww34sJWehnbpV0Q4k4V5Hh7juo7po6z7LUWkcIQnSGN1lHOL8GGtLtfwabKvLFQw/hbSUQ0u6V7OgGYgBzlkQ==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.0.2.tgz#0d1cd6d04eb2df0327446188cd13736a3367d681"
+  integrity sha512-c4PR2egjNjI1um6bamCQ6bUNPDiyofNQruHvKgHQ4gDUP/ITSVSzNsiI5OWtHOsX323i5ha/kk4YmOZ1Ktg7KA==
   dependencies:
     anymatch "^3.0.1"
-    async-each "^1.0.3"
     braces "^3.0.2"
     glob-parent "^5.0.0"
     is-binary-path "^2.1.0"
     is-glob "^4.0.1"
     normalize-path "^3.0.0"
-    readdirp "^3.0.2"
+    readdirp "^3.1.1"
   optionalDependencies:
     fsevents "^2.0.6"
 
@@ -6425,10 +6424,10 @@ readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-readdirp@^3.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.0.3.tgz#6300e1ca8e3ec6fcf064b7cd09e6e4b948d42e27"
-  integrity sha512-ucnUgJo2W/AC6s+dT0RS0rQOQi6PmniKgSqkF1Ung2UAkAqEUcqRVTzi+eWvTMbxicWDKHkbHJvvk98y1+de/w==
+readdirp@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.1.1.tgz#b158123ac343c8b0f31d65680269cc0fc1025db1"
+  integrity sha512-XXdSXZrQuvqoETj50+JAitxz1UPdt5dupjT6T5nVB+WvjMv2XKYj+s7hPeAVCXvmJrL36O4YYyWlIC3an2ePiQ==
   dependencies:
     picomatch "^2.0.4"