diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 8e0e312..35145c5 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -234,8 +234,6 @@ onUnmounted(() => {
     @mouseenter="mouseenter"
     @mouseleave="mouseleave"
   >
-    <div id="overlay"><slot></slot></div>
-
     <template v-if="props.card_id">
       <!-- <svg
         width="180"
@@ -270,7 +268,7 @@ onUnmounted(() => {
         "
         draggable="false"
       />
-      <div></div>
+      <div id="overlay"><slot></slot></div>
     </template>
 
     <img
@@ -301,7 +299,9 @@ onUnmounted(() => {
 
 #overlay {
   position: absolute;
-  z-index: 111;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
 }
 
 .card.unlocked {
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index d0595b1..6e418fc 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { delay } from "~/netcode/events";
-import type { Card, Container, PlayingTurn } from "~/netcode/interfaces";
+import type {
+  Card,
+  Container,
+  Effect,
+  PlayingTurn,
+} from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   container: Container;
@@ -8,12 +14,14 @@ export interface Props {
   wrapped?: boolean;
   hidden?: boolean;
   noEffects?: boolean;
+  tokens?: Effect[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   wrapped: () => false,
   hidden: () => false,
   noEffects: () => false,
+  tokens: () => [],
 });
 
 const emit = defineEmits(["cardClick", "effectClick"]);
@@ -34,6 +42,7 @@ const animationSpeed = computed(() => settingsStore.animationSpeed + "ms");
 const shuffleAnimationSpeed = computed(
   () => settingsStore.animationSpeed * 2 + "ms"
 );
+
 function populateContainer() {}
 
 // const rotate = ref(false);
@@ -89,14 +98,16 @@ onUnmounted(() => {
 });
 
 const interval = ref<ReturnType<typeof setInterval>>();
-function startMove() {
-  interval.value = setInterval(() => {
-    props.container.cards.sort((a, b) => Math.random() - 0.5);
-  }, 1000);
-}
-function stopMove() {
-  clearInterval(interval.value);
-}
+// function startMove() {
+//   interval.value = setInterval(() => {
+//     props.container.cards.sort((a, b) => Math.random() - 0.5);
+//   }, 1000);
+// }
+// function stopMove() {
+//   clearInterval(interval.value);
+// }
+
+function useToken(token: Effect, card: Card) {}
 </script>
 
 <template>
@@ -108,8 +119,6 @@ function stopMove() {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
-        @startMove="startMove"
-        @stopMove="stopMove"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"
@@ -126,6 +135,12 @@ function stopMove() {
         },[] as number[])"
         :noEffects="noEffects"
       >
+        <template v-for="t in tokens">
+          <TokenComponent
+            :token="t"
+            @useToken="useToken(t, c)"
+          ></TokenComponent>
+        </template>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index c9766ff..ae58416 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { buyCard, buyGem } from "~/netcode";
-import type { Container, Game } from "~/netcode/interfaces";
+import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   game: Game;
@@ -27,6 +28,25 @@ function marketCardClick(e: string) {
 function fireGemCardClick(e: string) {
   buyGem(props.game._id);
 }
+
+const marketTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.STACK_NEXT_ACTION_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
+
+const gemsTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
 </script>
 
 <template>
@@ -41,13 +61,16 @@ function fireGemCardClick(e: string) {
       :container="market"
       @cardClick="marketCardClick"
       :noEffects="true"
-    ></CardsGrouped>
+      :tokens="marketTokens"
+    >
+    </CardsGrouped>
     <div class="separator"></div>
     <CardsGrouped
       :container="fire_gems"
       :wrapped="true"
       @cardClick="fireGemCardClick"
       :noEffects="true"
+      :tokens="gemsTokens"
     ></CardsGrouped>
   </div>
 </template>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 20fa2ca..166cf9b 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
-import type { Game, Player } from "~/netcode/interfaces";
+import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
 export interface Props {
@@ -37,8 +37,13 @@ const isSelf = computed(
 );
 const isSelfTurn = computed(() => isSelf && isPlayerTurn);
 
+const cardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [CardEffects.SACRIFICE, CardEffects.PREPARE].includes(t.effect)
+  )
+);
+
 const warningText = ref("Effets restants!");
-const turnStore = useTurnStore();
 
 // const make_discard = (target: Player) =>
 //     clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
@@ -172,6 +177,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
         :playingTurn="props.game.currentTurn"
         @cardClick="boardCardClick"
         @effectClick="effectClick"
+        :tokens="cardTokens"
       >
       </CardsGrouped>
 
diff --git a/components/tokens/TokenComponent.vue b/components/tokens/TokenComponent.vue
new file mode 100644
index 0000000..65b8520
--- /dev/null
+++ b/components/tokens/TokenComponent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Effect } from "~/netcode/interfaces";
+
+type Props = {
+  token: Effect;
+};
+const props = defineProps<Props>();
+
+const emit = defineEmits(["useToken"]);
+
+function onClick(e: MouseEvent) {
+  emit("useToken", props.token);
+}
+</script>
+
+<template>
+  <div @click.stop="onClick" @mousedown.left.stop="" id="token">
+    {{ props.token.effect }}
+  </div>
+</template>
+
+<style scoped>
+#token {
+  width: 50px;
+  height: 50px;
+  background: white;
+  border: 1px solid white;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: 0.2s all;
+  border-radius: 15px;
+}
+
+#token:hover {
+  border: 1px solid red;
+}
+</style>
diff --git a/netcode/interfaces.ts b/netcode/interfaces.ts
index 4f49097..4c4d8b3 100644
--- a/netcode/interfaces.ts
+++ b/netcode/interfaces.ts
@@ -1,3 +1,46 @@
+export enum CardEffects {
+  //Base
+  GOLD = "gold",
+  DAMAGE = "damage",
+  HEAL = "heal",
+  PREPARE = "prepare",
+  STUN = "stun",
+  SACRIFICE = "sacrifice",
+  DRAW = "draw",
+  DRAW_AND_DISCARD = "draw_and_discard",
+  MAKE_DISCARD = "make_discard",
+  RESTACK_DISCARDED_CHAMPION = "restack_discarded_champion",
+  RESTACK_DISCARDED_CARD = "restack_discarded_card",
+  STACK_NEXT_ACTION_BOUGHT = "stack_next_action_bought",
+  STACK_NEXT_CARD_BOUGHT = "stack_next_card_bought",
+  PLAY_NEXT_CARD_BOUGHT = "play_next_card_bought",
+
+  //DLCs
+  BUY_FOR_FREE = "buy_for_free",
+
+  //Journeys
+  DAMAGE_ALL_CHAMPIONS = "damage_all_champions",
+
+  //Journeys: Hunters
+  DISCARD_X_AND_DRAW_X = "discard_x_and_draw_x",
+  PREPARE_ANOTHER_CHAMPION = "prepare_another_champion",
+  //Journey: Travelers
+  PREPARE_ALL_CHAMPIONS = "prepare_all_champions",
+  CHEAPER_CHAMPION = "cheaper_champion",
+  CHEAPER_CHAMPIONS_PASSIVE = "cheaper_champions_passive",
+  CHEAPER_ACTION = "cheaper_action",
+  CONTROL_OPPOSING_CHAMPION_PASSIVE = "control_opposing_champion_passive",
+
+  RESTACK_DISCARDED_ACTION = "restack_discarded_action",
+
+  //Ancestry
+  KEEP_IN_HAND = "keep_in_hand",
+  BUY_GEM_FOR_FREE = "buy_gem_for_free",
+  CHEAPER_SKILLS_PASSIVE = "cheaper_skills_passive",
+  CHEAPER_CARD_IF_HIGHER_PRICE = "cheaper_card_if_higher_price",
+  PICK_FACTION = "pick_faction",
+}
+
 export interface GameObject {
   _id: string;
 }
@@ -47,7 +90,9 @@ export interface Container extends GameObject {
   shuffling?: boolean;
 }
 
-export interface Effect extends GameObject {}
+export interface Effect extends GameObject {
+  effect: CardEffects;
+}
 export interface Card extends GameObject {
   cardId: number;
   effects: Effect[];
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 0ac058b..7fc468d 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -171,6 +171,14 @@ eventSource.addEventListener("message", async (message) => {
       current_game.currentTurn.lockedEffects.push(data.effect);
       await delay(settingsStore.animationSpeed);
     });
+  } else if (data.type == "unlockEffect") {
+    queueAction(async () => {
+      const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
+        data.effect
+      );
+      current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
+      await delay(settingsStore.animationSpeed);
+    });
   } else if (data.type == "currentTurn.updateGold") {
     queueAction(async () => {
       console.log(`adding gold amount : ` + data.operation);
@@ -298,7 +306,6 @@ onUnmounted(() => {
       :fire_gems="game.fireGems"
       :marketStack="game.marketStack"
     ></MarketCards>
-    <div id="turnStats">{{ game.currentTurn.tokens }}</div>
     <div id="player_list_container">
       <div id="player_list">
         <PlayerListElement