diff --git a/site/client/app/modules/deck-builder/components/deck-builder.js b/site/client/app/modules/deck-builder/components/deck-builder.js
index 8d47dac..733bd0c 100644
--- a/site/client/app/modules/deck-builder/components/deck-builder.js
+++ b/site/client/app/modules/deck-builder/components/deck-builder.js
@@ -8,21 +8,28 @@ module.exports = {
   data: function() {
     return {
       cards: [],
-      deck: []
+      deck: [],
+
+      leaders: [],
+      leader: null,
+
+      factionFilter: 'Northern Realm'
     }
   },
 
   ready: function() {
-    this.cards = $.map(cards, function(n) {
-      if(n.faction == 'Northern Realm' && n.type != 3) return n;
-    });
+    this.cards = cards;
+  },
 
-    $.map(deck, (n, i) => {
-      if(i == 'northern_realm') {
-        for(var m in n) {
-          this.deck.push(this.cards[m]);
-        }
-      }
-    });
+  methods: {
+    changeDeck: function(deck) {
+      $('.all-cards').addClass('remove');
+      this.factionFilter = deck;
+      $('.all-cards').scrollTop(0);
+
+      setTimeout(function() {
+        $('.all-cards').removeClass('remove');
+      }, 600);
+    }
   }
 };
\ No newline at end of file
diff --git a/site/client/app/modules/deck-builder/views/deck-builder.html b/site/client/app/modules/deck-builder/views/deck-builder.html
index 9724016..f1de554 100644
--- a/site/client/app/modules/deck-builder/views/deck-builder.html
+++ b/site/client/app/modules/deck-builder/views/deck-builder.html
@@ -1,11 +1,14 @@
-<div class="heading">Nord Deck</div>
+<div class="heading">
+  <a v-class="active: factionFilter == 'Northern Realm'" v-on="click: changeDeck('Northern Realm')">Northern Realm</a>
+  <a v-class="active: factionFilter == 'scoiatael'" v-on="click: changeDeck('sco bla')">Scoia'tael</a>
+  <a v-class="active: factionFilter == 'monster'" v-on="click: changeDeck('monster')">Monster</a>
+</div>
 
 <div class="all-cards-wrap">
   <div class="all-cards">
-
     <div class="clear-space"></div>
 
-    <div class="card-wrap" v-repeat="card: cards">
+    <div class="card-wrap" v-repeat="card: cards | filterBy factionFilter in faction">
       <div class="bla ani"></div>
       <div class="card-img card" v-style="background-image: 'url(http://80.240.132.120/gwent/assets/cards/' + card.img + '.png)'"></div>
       <div class="shadow"></div>
@@ -15,11 +18,17 @@
     <div class="clear-space"></div>
 
   </div>
+  <div class="shadow-all-cards"></div>
 </div>
 
-  <!--div class="line"></div-->
-
   <style>
+
+    .shadow-all-cards {
+      height: 60px;
+      float: left;
+      width: 100%;
+    }
+
 .container-content {
   padding: 0;
 }
@@ -28,4 +37,8 @@
       float: left;
       overflow: hidden;
     }
+
+    .remove {
+      opacity: 0;
+    }
   </style>
\ No newline at end of file
diff --git a/site/client/assets/sass/_modal.scss b/site/client/assets/sass/_modal.scss
index 933c9d0..6beff83 100644
--- a/site/client/assets/sass/_modal.scss
+++ b/site/client/assets/sass/_modal.scss
@@ -18,7 +18,7 @@
   right: 0;
   bottom: 0;
   background: rgba(14, 27, 43, .5);
-  z-index: 10;
+  z-index: 9999;
   opacity: 0;
   visibility: hidden;
 
diff --git a/site/client/assets/sass/_shame_cards.scss b/site/client/assets/sass/_shame_cards.scss
index de56eab..8578306 100644
--- a/site/client/assets/sass/_shame_cards.scss
+++ b/site/client/assets/sass/_shame_cards.scss
@@ -218,6 +218,18 @@
   background: -ms-linear-gradient(top, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%);
   background: linear-gradient(to bottom, rgba(8,13,20,1) 0%,rgba(8,13,20,1) 36%,rgba(8,13,20,0.85) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#080d14', endColorstr='#d9080d14',GradientType=0 );
+
+  a {
+    font-size: 17px;
+    color: #435365;
+    margin: 0 0 0 30px;
+    font-weight: 600;
+    cursor: pointer;
+
+    &.active {
+      color: #c3cdd8;
+    }
+  }
 }
 
 .clear-space {