diff --git a/package.json b/package.json
index 2a7822a..ae0e5a4 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@pandacss/dev": "^0.45.2",
@@ -31,6 +32,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^10.0.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.8",
     "typescript": "^5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de5f1e8..fb1478b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
       react-icons:
         specifier: ^5.3.0
         version: 5.3.0(react@18.3.1)
+      uuid:
+        specifier: ^10.0.0
+        version: 10.0.0
     devDependencies:
       '@pandacss/dev':
         specifier: ^0.45.2
@@ -63,6 +66,9 @@ importers:
       '@types/react-dom':
         specifier: ^18
         version: 18.3.0
+      '@types/uuid':
+        specifier: ^10.0.0
+        version: 10.0.0
       eslint:
         specifier: ^8
         version: 8.57.0
@@ -682,6 +688,9 @@ packages:
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
+  '@types/uuid@10.0.0':
+    resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==}
+
   '@typescript-eslint/eslint-plugin@7.2.0':
     resolution: {integrity: sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2323,6 +2332,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
+    hasBin: true
+
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
@@ -2963,6 +2976,8 @@ snapshots:
 
   '@types/semver@7.5.8': {}
 
+  '@types/uuid@10.0.0': {}
+
   '@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)':
     dependencies:
       '@eslint-community/regexpp': 4.11.0
@@ -4834,6 +4849,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@10.0.0: {}
+
   which-boxed-primitive@1.0.2:
     dependencies:
       is-bigint: 1.0.4
diff --git a/src/components/molecules/LoadDeck/index.tsx b/src/components/molecules/LoadDeck/index.tsx
index 29d3346..b117c7e 100644
--- a/src/components/molecules/LoadDeck/index.tsx
+++ b/src/components/molecules/LoadDeck/index.tsx
@@ -6,6 +6,8 @@ import { useState } from "react";
 import { Box, Flex } from "styled-system/jsx";
 import { button, input } from "styled-system/recipes";
 
+import { v4 as uuid } from "uuid";
+
 export const LoadDeck = (props: GameStateActions) => {
   const [deckId, setDeckId] = useState<string>("");
   const { data: deck } = useCuriosaDeck(deckId);
@@ -27,7 +29,7 @@ export const LoadDeck = (props: GameStateActions) => {
         })).map(
           (rest, index) =>
             ({
-              id: rest.identifier + index + Date.now(),
+              id: rest.identifier + index + uuid(),
               img: rest.identifier,
               type: "site",
             }) as GameCard,
@@ -40,9 +42,9 @@ export const LoadDeck = (props: GameStateActions) => {
           ...spell,
           quantity: undefined, // Remove the quantity field
         })).map(
-          (rest, i) =>
+          (rest) =>
             ({
-              id: rest.identifier + i + Date.now(),
+              id: rest.identifier + uuid(),
               img: rest.identifier,
               type: "minion",
             }) as GameCard,
@@ -53,7 +55,7 @@ export const LoadDeck = (props: GameStateActions) => {
     newGrid[GRIDS.HAND] = deck?.avatar?.map(
       (avatar) =>
         ({
-          id: avatar.identifier,
+          id: avatar.identifier + "-avatar-" + uuid(),
           img: avatar.identifier,
           type: "avatar",
         }) as GameCard,
diff --git a/src/components/organisms/GameBoard/index.tsx b/src/components/organisms/GameBoard/index.tsx
index 46bbd69..0a5d304 100644
--- a/src/components/organisms/GameBoard/index.tsx
+++ b/src/components/organisms/GameBoard/index.tsx
@@ -133,6 +133,7 @@ const SortItemWrapper = ({
         e.preventDefault();
         setPreview(true);
       }}
+      data-testid={"sortable-item-wrapper-" + card.id}
       style={{
         height: heightCalc() + 7 + "px",
         transform: isTapped ? "rotate(5deg)" : "",
@@ -142,6 +143,7 @@ const SortItemWrapper = ({
     >
       <SortableItem
         key={`card-${gridIndex}-${cardIndex}`}
+        data-testid={"sortable-item-" + card.id}
         id={card.id}
         gridIndex={gridIndex}
         index={cardIndex}