diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
new file mode 100644
index 0000000..c20707e
--- /dev/null
+++ b/frontend/src/components/Card.vue
@@ -0,0 +1,52 @@
+<template>
+  <v-list-tile avatar>
+    <v-list-tile-avatar :color="color">
+      <span class="headline font-weight-bold white--text">{{ dbentry.cost }}</span>
+    </v-list-tile-avatar>
+
+    <v-list-tile-content>
+      <v-list-tile-title class="body-2">{{ dbentry.name }}</v-list-tile-title>
+      <v-list-tile-sub-title>{{ serial }}</v-list-tile-sub-title>
+    </v-list-tile-content>
+
+    <v-list-tile-avatar>
+      <span class="subheading">{{ count }}</span>
+    </v-list-tile-avatar>
+  </v-list-tile>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+
+  props: {
+    count: Number,
+    serial: String,
+    dbentry: Object
+  },
+
+  computed: {
+    color() {
+      switch (this.dbentry.element.toLowerCase()) {
+        case 'fire':
+          return '#d41'
+        case 'ice':
+          return '#7ac'
+        case 'wind':
+          return '#596'
+        case 'earth':
+          return '#db1'
+        case 'lightning':
+          return '#859'
+        case 'water':
+          return '#57a'
+        case 'light':
+          return '#888'
+        case 'dark':
+        default:
+          return '#333'
+      }
+    }
+  }
+}
+</script>
diff --git a/frontend/src/components/Deck.vue b/frontend/src/components/Deck.vue
index ea512be..6ae7878 100644
--- a/frontend/src/components/Deck.vue
+++ b/frontend/src/components/Deck.vue
@@ -10,23 +10,17 @@
 
     <v-container grid-list-md fluid>
       <v-layout row wrap>
-        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm4>
+        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
           <v-card>
             <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
             <v-list dense subheader>
-              <v-list-tile v-for="card in part.cards" :key="card.serial" avatar>
-                <v-list-tile-avatar color="yellow">
-                  <span>{{ card.dbentry.cost }}</span>
-                </v-list-tile-avatar>
-
-                <v-list-tile-content>
-                  <v-list-tile-title>{{ card.dbentry.name }}</v-list-tile-title>
-                </v-list-tile-content>
-
-                <v-list-tile-avatar>
-                  <span>{{ card.count }}</span>
-                </v-list-tile-avatar>
-              </v-list-tile>
+              <Card
+                v-for="card in part.cards"
+                :key="card.serial"
+                :count="card.count"
+                :serial="card.serial"
+                :dbentry="card.dbentry"
+              ></Card>
             </v-list>
           </v-card>
         </v-flex>
@@ -36,6 +30,8 @@
 </template>
 
 <script>
+import Card from './Card.vue'
+
 export default {
   name: 'Deck',
 
@@ -43,6 +39,10 @@ export default {
     deck: Object
   },
 
+  components: {
+    Card
+  },
+
   computed: {
     deck_parts() {
       let retval = {
diff --git a/frontend/src/components/DeckList.vue b/frontend/src/components/DeckList.vue
index 921b9e8..1563e1d 100644
--- a/frontend/src/components/DeckList.vue
+++ b/frontend/src/components/DeckList.vue
@@ -7,7 +7,7 @@
 <script>
 import CardsDB from '@/plugins/ffdecks'
 
-import Deck from '@/components/Deck.vue'
+import Deck from './Deck.vue'
 
 export default {
   name: 'DeckList',