diff --git a/components/game/Card.vue b/components/game/Card.vue
index a4eb3d6..7e79230 100644
--- a/components/game/Card.vue
+++ b/components/game/Card.vue
@@ -1,31 +1,260 @@
-<script lang="ts">
-import { cards } from "~/services/loadCards";
+<script setup lang="ts">
+export interface Props {
+  uuid?: string;
+  cardId: number | undefined;
+  locked?: boolean;
+  wrapped?: boolean;
+  tilted?: boolean;
+  interactible?: boolean;
+  noEffects?: boolean;
+  used_effects_indexes?: number[];
+  discardable?: boolean;
+}
 
-export default {
-  props: {
-    cardId: {
-      required: true,
-      type: Number,
-    },
-    used_effects_indexes: {
-      default: [],
-      type: Array,
-    },
-  },
-  data() {
-    return { cards };
-  },
-  beforeCreate() {
-    console.log(cards);
-    (this as any).component = () => cards[this.cardId];
-  },
-};
+const props = withDefaults(defineProps<Props>(), {
+  wrapped: () => false,
+  tilted: () => true,
+  locked: () => true,
+  interactible: () => true,
+  noEffects: () => false,
+  discardable: () => false,
+});
+
+const emit = defineEmits([
+  "click",
+  "effectClick",
+  "drop",
+  "move",
+  "startMove",
+  "stopMove",
+]);
+
+const settingsStore = useSettingsStore();
+
+const childCount = ref<number>(0);
+
+const extension = computed(() => {
+  if (settingsStore.cardStyle == CardStyles.SVG) {
+    return ".svg";
+  }
+  return ".png";
+});
+
+function cardClick() {
+  if (!props.cardId) return;
+  emit("click");
+}
+
+const isZooming = ref<boolean>(false);
+
+function mouseenter(e: MouseEvent) {
+  // User is Right Clicking
+  if ((e.buttons & 2) == 2) {
+    isZooming.value = true;
+  }
+
+  // goStore.hoveredCard = props.card_id
+}
+function mouseleave(e: MouseEvent) {
+  isZooming.value = false;
+}
+
+function rightClickDown(e: MouseEvent) {
+  isZooming.value = true;
+}
+
+function rightClickUp(e: MouseEvent) {
+  isZooming.value = false;
+}
 </script>
 
 <template>
-  <Component
-    :is="cards[cardId]"
-    :cardId="cardId"
-    :used_effects_indexes="used_effects_indexes"
-  />
+  <div
+    ref="cardHTMLElement"
+    class="card"
+    :class="{
+      active: childCount > 0,
+      wrapped,
+      unlocked: !props.locked,
+      zoom: isZooming,
+      no_effects: noEffects || !props.locked,
+      discardable,
+    }"
+    @contextmenu.prevent="false"
+    @mousedown.right="rightClickDown"
+    @mouseup.right="rightClickUp"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
+    <template v-if="props.cardId">
+      <GameCardAtom
+        v-if="settingsStore.cardStyle == CardStyles.SVG"
+        :cardId="props.cardId"
+        :used_effects_indexes="used_effects_indexes"
+        @effectClick="emit('effectClick', $event)"
+      ></GameCardAtom>
+      <div id="overlay">
+        <slot></slot>
+      </div>
+    </template>
+
+    <img
+      :class="`card_image`"
+      v-else
+      :src="'/cards/background.png'"
+      draggable="false"
+    />
+  </div>
 </template>
+
+<style scoped>
+/* .card.dragging {
+  transform: translateX(v-bind("translateX + 'px'"))
+    translateY(v-bind("translateY + 'px'"));
+  cursor: grabbing;
+  z-index: 999;
+} */
+
+/* .card.dragging > svg {
+  transform: scale(110%);
+} */
+
+.card.active {
+  cursor: pointer;
+}
+
+.card_image {
+  max-height: var(--max-height);
+  z-index: 1;
+  height: var(--max-height);
+}
+
+.card.wrapped {
+  height: 1px;
+  margin: 0;
+}
+
+.card.wrapped .card_image {
+  filter: drop-shadow(0.5px 0.5px 0.5px gray)
+    drop-shadow(-0.5px -0.5px 0.5px gray);
+}
+
+.card.zoom {
+  transform: scale(200%);
+  z-index: 10;
+}
+
+#contextMenuButtons {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  word-break: break-word;
+  bottom: 0;
+  width: 99%;
+  transform: translateY(-0px);
+  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
+}
+
+.card.active:hover #contextMenuButtons {
+  transform: translateY(100%);
+}
+</style>
+<style>
+.card.no_effects svg > * {
+  pointer-events: none;
+}
+
+#contextMenuButtons > * {
+  flex: 1;
+  border-radius: 12px;
+  min-height: 50px;
+}
+
+@keyframes gelatine {
+  from,
+  to {
+  }
+
+  25% {
+    transform: scale(1, 1.5);
+  }
+
+  50% {
+    transform: scale(1.5, 1);
+  }
+
+  75% {
+    transform: scale(1.1, 1.3);
+  }
+}
+
+.svg_resource_icon {
+  cursor: pointer;
+  animation: gelatine 0.3s normal;
+  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.svg_resource_icon:active {
+  animation: none;
+}
+
+.svg_resource_icon:hover {
+  transform: scale(130%);
+}
+
+.used {
+  opacity: 0.2;
+  filter: grayscale(0.6);
+  pointer-events: none;
+}
+
+.svg_effect text {
+  cursor: pointer;
+}
+
+.card {
+  --max-height: 250px;
+  --max-width: 179px;
+  --margin-bottom: calc(var(--max-height) * 0.05);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+  margin-top: var(--margin-bottom);
+  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  pointer-events: all;
+  max-height: var(--max-height);
+  max-width: var(--max-width);
+  /* cursor: grab; */
+}
+
+.card:not(svg) {
+  cursor: grab;
+}
+
+#overlay {
+  position: absolute;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
+}
+
+.card.unlocked {
+  margin-top: 0px;
+  margin-bottom: var(--margin-bottom);
+  transform: translateY(calc(var(--margin-bottom) * -0.25));
+  filter: drop-shadow(
+    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
+  );
+  cursor: pointer;
+}
+
+.card.discardable {
+  cursor: not-allowed;
+}
+
+.card.discardable svg {
+  pointer-events: none;
+}
+</style>
diff --git a/components/game/card/Atom.vue b/components/game/card/Atom.vue
new file mode 100644
index 0000000..b149f4c
--- /dev/null
+++ b/components/game/card/Atom.vue
@@ -0,0 +1,30 @@
+<script lang="ts">
+import { cards } from "~/services/loadCards";
+
+export default {
+  props: {
+    cardId: {
+      required: true,
+      type: Number,
+    },
+    used_effects_indexes: {
+      default: [],
+      type: Array,
+    },
+  },
+  data() {
+    return { cards };
+  },
+  beforeCreate() {
+    (this as any).component = () => cards[this.cardId];
+  },
+};
+</script>
+
+<template>
+  <Component
+    :is="cards[cardId]"
+    :cardId="cardId"
+    :used_effects_indexes="used_effects_indexes"
+  />
+</template>
diff --git a/components/game/card/Grouped.vue b/components/game/card/Grouped.vue
index 0a193e8..ee7bfbe 100644
--- a/components/game/card/Grouped.vue
+++ b/components/game/card/Grouped.vue
@@ -137,14 +137,14 @@ function discardCardClick(card: Card) {
     :class="{ wrapped, rotate: container.shuffling }"
   >
     <TransitionGroup name="list">
-      <GameCardPreview
+      <GameCard
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
         v-for="(c, i) in cards"
-        :card_id="c?.cardId"
+        :cardId="c?.cardId"
+        :uuid="c._id"
         :wrapped="wrapped"
         :key="c?._id || i"
-        :card="c"
         :locked="
           !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
         "
@@ -198,7 +198,7 @@ function discardCardClick(card: Card) {
         >
           Discard
         </button>
-      </GameCardPreview>
+      </GameCard>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
   </div>
diff --git a/components/game/card/Preview.vue b/components/game/card/Preview.vue
deleted file mode 100644
index 198d397..0000000
--- a/components/game/card/Preview.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup lang="ts">
-export interface Props {
-  uuid?: string;
-  cardId?: number;
-  locked?: boolean;
-  wrapped?: boolean;
-  tilted?: boolean;
-  interactible?: boolean;
-  noEffects?: boolean;
-  used_effects_indexes?: number[];
-  discardable?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  wrapped: () => false,
-  tilted: () => true,
-  locked: () => true,
-  interactible: () => true,
-  noEffects: () => false,
-  discardable: () => false,
-});
-
-const emit = defineEmits([
-  "click",
-  "effectClick",
-  "drop",
-  "move",
-  "startMove",
-  "stopMove",
-]);
-
-const settingsStore = useSettingsStore();
-
-const childCount = ref<number>(0);
-
-const extension = computed(() => {
-  if (settingsStore.cardStyle == CardStyles.SVG) {
-    return ".svg";
-  }
-  return ".png";
-});
-
-function cardClick() {
-  if (!props.cardId) return;
-  emit("click");
-}
-
-const isZooming = ref<boolean>(false);
-
-function mouseenter(e: MouseEvent) {
-  // User is Right Clicking
-  if ((e.buttons & 2) == 2) {
-    isZooming.value = true;
-  }
-
-  // goStore.hoveredCard = props.card_id
-}
-function mouseleave(e: MouseEvent) {
-  isZooming.value = false;
-}
-
-function rightClickDown(e: MouseEvent) {
-  isZooming.value = true;
-}
-
-function rightClickUp(e: MouseEvent) {
-  isZooming.value = false;
-}
-</script>
-
-<template>
-  <div
-    ref="cardHTMLElement"
-    class="card"
-    :class="{
-      active: childCount > 0,
-      wrapped,
-      unlocked: !props.locked,
-      zoom: isZooming,
-      no_effects: noEffects || !props.locked,
-      discardable,
-    }"
-    @contextmenu.prevent="false"
-    @mousedown.right="rightClickDown"
-    @mouseup.right="rightClickUp"
-    @mouseenter="mouseenter"
-    @mouseleave="mouseleave"
-  >
-    <template v-if="props.cardId">
-      <GameCard
-        v-if="settingsStore.cardStyle == CardStyles.SVG"
-        :cardId="props.cardId"
-        :used_effects_indexes="used_effects_indexes"
-        @effectClick="emit('effectClick', $event)"
-      ></GameCard>
-      <div id="overlay">
-        <slot></slot>
-      </div>
-    </template>
-
-    <img
-      :class="`card_image`"
-      v-else
-      :src="'/cards/background.png'"
-      draggable="false"
-    />
-  </div>
-</template>
-
-<style scoped>
-/* .card.dragging {
-  transform: translateX(v-bind("translateX + 'px'"))
-    translateY(v-bind("translateY + 'px'"));
-  cursor: grabbing;
-  z-index: 999;
-} */
-
-/* .card.dragging > svg {
-  transform: scale(110%);
-} */
-
-.card.active {
-  cursor: pointer;
-}
-
-.card_image {
-  max-height: var(--max-height);
-  z-index: 1;
-  height: var(--max-height);
-}
-
-.card.wrapped {
-  height: 1px;
-  margin: 0;
-}
-
-.card.wrapped .card_image {
-  filter: drop-shadow(0.5px 0.5px 0.5px gray)
-    drop-shadow(-0.5px -0.5px 0.5px gray);
-}
-
-.card.zoom {
-  transform: scale(200%);
-  z-index: 10;
-}
-
-#contextMenuButtons {
-  position: absolute;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  word-break: break-word;
-  bottom: 0;
-  width: 99%;
-  transform: translateY(-0px);
-  transition: 0.1s transform cubic-bezier(1, 1.81, 0.59, 1.42);
-}
-
-.card.active:hover #contextMenuButtons {
-  transform: translateY(100%);
-}
-</style>
-<style>
-.card.no_effects svg > * {
-  pointer-events: none;
-}
-
-#contextMenuButtons > * {
-  flex: 1;
-  border-radius: 12px;
-  min-height: 50px;
-}
-
-@keyframes gelatine {
-  from,
-  to {
-  }
-
-  25% {
-    transform: scale(1, 1.5);
-  }
-
-  50% {
-    transform: scale(1.5, 1);
-  }
-
-  75% {
-    transform: scale(1.1, 1.3);
-  }
-}
-
-.svg_resource_icon {
-  cursor: pointer;
-  animation: gelatine 0.3s normal;
-  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.svg_resource_icon:active {
-  animation: none;
-}
-
-.svg_resource_icon:hover {
-  transform: scale(130%);
-}
-
-.used {
-  opacity: 0.2;
-  filter: grayscale(0.6);
-  pointer-events: none;
-}
-
-.svg_effect text {
-  cursor: pointer;
-}
-
-.card {
-  --max-height: 250px;
-  --max-width: 179px;
-  --margin-bottom: calc(var(--max-height) * 0.05);
-  position: relative;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0px;
-  margin-top: var(--margin-bottom);
-  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  pointer-events: all;
-  max-height: var(--max-height);
-  max-width: var(--max-width);
-  /* cursor: grab; */
-}
-
-.card:not(svg) {
-  cursor: grab;
-}
-
-#overlay {
-  position: absolute;
-  top: 20%;
-  width: calc(100% - 8%);
-  height: 49%;
-}
-
-.card.unlocked {
-  margin-top: 0px;
-  margin-bottom: var(--margin-bottom);
-  transform: translateY(calc(var(--margin-bottom) * -0.25));
-  filter: drop-shadow(
-    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
-  );
-  cursor: pointer;
-}
-
-.card.discardable {
-  cursor: not-allowed;
-}
-
-.card.discardable svg {
-  pointer-events: none;
-}
-</style>
diff --git a/components/game/overlay/Discard.vue b/components/game/overlay/Discard.vue
index 9f58925..98d9712 100644
--- a/components/game/overlay/Discard.vue
+++ b/components/game/overlay/Discard.vue
@@ -50,7 +50,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
     <span>Discard of {{ player.user.username }}</span>
 
     <div class="discard_unwrapped" @click.stop>
-      <GameCardPreview
+      <GameCardGrouped
         :container="discard"
         :wrapped="false"
         :hidden="false"
@@ -58,7 +58,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
         :noEffects="true"
         :playingTurn="game.currentTurn"
         @tokenClick="tokenClick"
-      ></GameCardPreview>
+      ></GameCardGrouped>
     </div>
   </div>
 </template>
diff --git a/pages/rules.vue b/pages/rules.vue
index 2276204..d0130eb 100644
--- a/pages/rules.vue
+++ b/pages/rules.vue
@@ -31,10 +31,10 @@ const router = useRouter();
         <p>&#8203;</p>
         <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
         <div class="card-row">
-          <GameCardPreview :card_id="6" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="36" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="6" :tilted="false"></GameCard>
+          <GameCard :cardId="19" :tilted="false"></GameCard>
+          <GameCard :cardId="36" :tilted="false"></GameCard>
+          <GameCard :cardId="46" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <hr />
@@ -60,10 +60,7 @@ const router = useRouter();
           "deck" et ce qui nous permet de le "build".
         </p>
         <div class="card-row">
-          <GameCardPreview
-            :card_id="undefined"
-            :tilted="false"
-          ></GameCardPreview>
+          <GameCard :cardId="undefined" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <p>
@@ -90,10 +87,10 @@ const router = useRouter();
           <li>1x Dégats (2)</li>
         </ul>
         <div class="card-row">
-          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="59" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="58" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="57" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="56" :tilted="false"></GameCard>
+          <GameCard :cardId="59" :tilted="false"></GameCard>
+          <GameCard :cardId="58" :tilted="false"></GameCard>
+          <GameCard :cardId="57" :tilted="false"></GameCard>
         </div>
         <p>
           La pioche est formée au hasard: on peut donc avoir une main de départ
@@ -115,15 +112,15 @@ const router = useRouter();
           champions.
         </p>
         <div class="card-row">
-          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="43" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="56" :tilted="false"></GameCard>
+          <GameCard :cardId="52" :tilted="false"></GameCard>
+          <GameCard :cardId="43" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <h3>Objets & actions</h3>
         <div class="card-row">
-          <GameCardPreview :card_id="56" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="56" :tilted="false"></GameCard>
+          <GameCard :cardId="52" :tilted="false"></GameCard>
         </div>
         <p>
           Par simplicité, disons que les objets et les actions sont pareil: on
@@ -132,7 +129,7 @@ const router = useRouter();
         </p>
         <h3>Champions (& gardes)</h3>
         <div class="card-row">
-          <GameCardPreview :card_id="43" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="43" :tilted="false"></GameCard>
         </div>
         <p>
           Les champions sont un peu plus complexes: ils restent sur le terrain,
@@ -153,7 +150,7 @@ const router = useRouter();
           de dégats pendant un tour, et un peu le tour d'après pour les tuer.
         </p>
         <div class="card-row">
-          <GameCardPreview :card_id="49" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="49" :tilted="false"></GameCard>
         </div>
         <p>
           Par ailleurs, certains champions sont des Gardes
@@ -183,10 +180,10 @@ const router = useRouter();
           exclusivement à accomplir ce but: acheter des cartes.
         </p>
         <div class="card-row">
-          <GameCardPreview :card_id="6" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="36" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="6" :tilted="false"></GameCard>
+          <GameCard :cardId="19" :tilted="false"></GameCard>
+          <GameCard :cardId="36" :tilted="false"></GameCard>
+          <GameCard :cardId="46" :tilted="false"></GameCard>
         </div>
         <p>
           Un marché est mis à disposition de tous les joueurs, mettant à
@@ -211,9 +208,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <GameCardPreview :card_id="13" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="3" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="1" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="13" :tilted="false"></GameCard>
+          <GameCard :cardId="3" :tilted="false"></GameCard>
+          <GameCard :cardId="1" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <p>
@@ -225,9 +222,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <GameCardPreview :card_id="39" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="34" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="40" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="39" :tilted="false"></GameCard>
+          <GameCard :cardId="34" :tilted="false"></GameCard>
+          <GameCard :cardId="40" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <p>
@@ -240,9 +237,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <GameCardPreview :card_id="52" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="46" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="47" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="52" :tilted="false"></GameCard>
+          <GameCard :cardId="46" :tilted="false"></GameCard>
+          <GameCard :cardId="47" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <p>
@@ -255,9 +252,9 @@ const router = useRouter();
         </p>
         <p>&#8203;</p>
         <div class="card-row">
-          <GameCardPreview :card_id="24" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="25" :tilted="false"></GameCardPreview>
-          <GameCardPreview :card_id="19" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="24" :tilted="false"></GameCard>
+          <GameCard :cardId="25" :tilted="false"></GameCard>
+          <GameCard :cardId="19" :tilted="false"></GameCard>
         </div>
         <p>&#8203;</p>
         <p>
@@ -275,7 +272,7 @@ const router = useRouter();
           Les effets de cartes peuvent se déclencher pour 3 raisons différentes.
         </p>
         <div class="card-row">
-          <GameCardPreview :card_id="14" :tilted="false"></GameCardPreview>
+          <GameCard :cardId="14" :tilted="false"></GameCard>
         </div>
         <p>Sur cette carte, on peut voir les trois en même temps.</p>
         <p>La 1ère ligne s'active tout le temps.</p>
diff --git a/pages/test.vue b/pages/test.vue
index 1c10032..bd26b4d 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -6,6 +6,6 @@ config.public.welcomeMessage;
 <template>
   <div>
     {{ config.public.welcomeMessage }}
-    <GameCardPreview :cardId="6" :tilted="false"></GameCardPreview>
+    <GameCard :cardId="6" :tilted="false"></GameCard>
   </div>
 </template>