diff --git a/.env b/.env
index 222554ad..45bac475 100644
--- a/.env
+++ b/.env
@@ -1,10 +1,14 @@
+#VITE_API_COSMOS="http://lxgr.xyz:1317"
+#VITE_WS_TENDERMINT="http://lxgr.xyz:26657"
+#VITE_APP_FAUCET="http://lxgr.xyz:4500/claimTokens"
+
 VITE_API_COSMOS="https://cardchain.crowdcontrol.network/cosmos/"
 VITE_WS_TENDERMINT="https://cardchain.crowdcontrol.network/tendermint/"
 VITE_APP_FAUCET="https://cardchain.crowdcontrol.network/faucet/claimTokens"
 
 VITE_APP_FAUCET_SITEKEY="ea68532a-a9e6-4f99-9361-db90a3071b72"
 VITE_APP_ADDRESS_PREFIX=cc
-VITE_APP_CHAIN_ID="cardtestnet-5"
+VITE_APP_CHAIN_ID="cardtestnet-6"
 VITE_APP_CHAIN_NAME="Cardchain"
 VITE_APP_CARDIMG_MAXKB=500
 VITE_APP_CARDIMG_SIZE_X=840
diff --git a/.env.development b/.env.development
index abf872a8..b54247c6 100644
--- a/.env.development
+++ b/.env.development
@@ -4,7 +4,7 @@
 
 VITE_APP_FAUCET_SITEKEY="ea68532a-a9e6-4f99-9361-db90a3071b72"
 VITE_APP_ADDRESS_PREFIX=cc
-VITE_APP_CHAIN_ID="cardtestnet-5"
+VITE_APP_CHAIN_ID="carddevnet-2"
 VITE_APP_CHAIN_NAME="Cardchain"
 VITE_APP_CARDIMG_MAXKB=500
 VITE_APP_CARDIMG_SIZE_X=840
diff --git a/.fleet/settings.json b/.fleet/settings.json
index 0c004c80..5f57065e 100644
--- a/.fleet/settings.json
+++ b/.fleet/settings.json
@@ -1,3 +1,3 @@
 {
-    "backend.maxHeapSizeMb": 896
+    "backend.maxHeapSizeMb": 1568
 }
\ No newline at end of file
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 111b79bc..e99eb7e8 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -2,21 +2,25 @@ on:
   pull_request:
     types: [opened, labeled, unlabeled, synchronize]
   workflow_dispatch:
-env:
-  # Setting an environment variable with the value of a configuration variable
-  tag_name: ${{
-    contains(github.event.pull_request.labels.*.name, 'deploy_5173') && 'deploy_5173' || 
-    (contains(github.event.pull_request.labels.*.name, 'deploy_5174') && 'deploy_5175' || '')
-    }}
+
 
 
 jobs:
   run_pull:
-    if: ${{ env.tag_name != '' }}
     name: run pull
     runs-on: ubuntu-latest
+    env:
+      # Setting an environment variable with the value of a configuration variable
+      LABEL: ${{
+        contains(github.event.pull_request.labels.*.name, 'deploy_5173') && 'deploy_5173' || 
+        (contains(github.event.pull_request.labels.*.name, 'deploy_5174') && 'deploy_5174' || 'none')
+        }}
     
     steps:
+    - name: exit
+      if: ${{ env.LABEL == 'none' }}
+      run: |
+        exit 1
     - name: install ssh keys
       # check this thread to understand why its needed:
       # https://stackoverflow.com/a/70447517
@@ -26,6 +30,6 @@ jobs:
         echo "${{ secrets.LXGR_DEPLOY_PRIV }}" > ~/.ssh/id_rsa
         ssh-keyscan -H ${{ secrets.LXGR_HOST }} > ~/.ssh/known_hosts
     - name: connect and pull
-      run: ssh ${{ secrets.LXGR_USER }}@${{ secrets.LXGR_HOST }} "cd ~/$tag_name && git fetch && git checkout ${{ github.event.pull_request.base.ref }} && git pull && npm i && exit"
+      run: ssh ${{ secrets.LXGR_USER }}@${{ secrets.LXGR_HOST }} "cd ~/$LABEL && git fetch && git checkout ${{ github.event.pull_request.head.ref }} && git pull && npm i && npm run build && chgrp -R www-data ~/$LABEL && exit"
     - name: cleanup
       run: rm -rf ~/.ssh
diff --git a/package-lock.json b/package-lock.json
index 0f770c58..06910303 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,8 @@
       "dependencies": {
         "@cosmjs/encoding": "^0.29.3",
         "@cosmjs/launchpad": "^0.27.0",
-        "@cosmjs/proto-signing": "^0.27.0",
-        "@cosmjs/stargate": "^0.27.0",
+        "@cosmjs/proto-signing": "^0.27.1",
+        "@cosmjs/stargate": "^0.27.1",
         "@hcaptcha/vue3-hcaptcha": "^1.0.1",
         "@headlessui/tailwindcss": "^0.2.0",
         "@headlessui/vue": "^1.7.16",
@@ -22,8 +22,8 @@
         "@tanstack/vue-query": "^4.13.5",
         "axios": "^1.5.1",
         "bignumber.js": "^9.1.0",
-        "crypto-js": "^4.1.1",
-        "decentralcardgame-cardchain-client-ts": "^0.0.17",
+        "crypto-js": "^4.2.0",
+        "decentralcardgame-cardchain-client-ts": "0.0.25",
         "long": "^5.2.0",
         "merge-images": "^2.0.0",
         "pinia": "^2.0.23",
@@ -59,7 +59,7 @@
         "sass": "^1.55.0",
         "tailwindcss": "^3.3.3",
         "typescript": "~4.8.4",
-        "vite": "^4.4.9",
+        "vite": "^4.5.0",
         "vue-tsc": "^1.0.9"
       },
       "engines": {
@@ -2435,9 +2435,9 @@
       }
     },
     "node_modules/crypto-js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
-      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
@@ -2498,13 +2498,13 @@
       }
     },
     "node_modules/decentralcardgame-cardchain-client-ts": {
-      "version": "0.0.17",
-      "resolved": "https://registry.npmjs.org/decentralcardgame-cardchain-client-ts/-/decentralcardgame-cardchain-client-ts-0.0.17.tgz",
-      "integrity": "sha512-Bn1WcdiDeC3fTNvmIWcGlWhSIafZHPwZiIkeUzYJYKqqtoZzU58m01bmUhphZJJ9YZ/mlNBKg+XZhUEOo7r9NQ==",
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/decentralcardgame-cardchain-client-ts/-/decentralcardgame-cardchain-client-ts-0.0.25.tgz",
+      "integrity": "sha512-ahZOiz03yeuQdLNW6pCpf+7ga7OrWBmJexYcFEA6pBcyN8LdpWzpTIbwLbTuewRRfWy6RpL55Jyb6U3nwvc1lQ==",
       "dependencies": {
         "@cosmjs/amino": "0.29.5",
-        "@cosmjs/proto-signing": "0.27.0",
-        "@cosmjs/stargate": "0.27.0",
+        "@cosmjs/proto-signing": "0.27.1",
+        "@cosmjs/stargate": "0.27.1",
         "@keplr-wallet/types": "^0.12.28",
         "axios": "0.21.4",
         "buffer": "^6.0.3",
@@ -2512,8 +2512,8 @@
       },
       "peerDependencies": {
         "@cosmjs/amino": "0.29.5",
-        "@cosmjs/proto-signing": "0.27.0",
-        "@cosmjs/stargate": "0.27.0"
+        "@cosmjs/proto-signing": "0.27.1",
+        "@cosmjs/stargate": "0.27.1"
       }
     },
     "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/amino": {
@@ -2564,194 +2564,6 @@
       "resolved": "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.29.5.tgz",
       "integrity": "sha512-m7h+RXDUxOzEOGt4P+3OVPX7PuakZT3GBmaM/Y2u+abN3xZkziykD/NvedYFvvCCdQo714XcGl33bwifS9FZPQ=="
     },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/crypto": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/crypto/-/crypto-0.27.0.tgz",
-      "integrity": "sha512-JTPHINCYZ+mnsxrfv8ZBHsFWgB7EGooa5SD0lQFhkCVX/FC3sqxuFNv6TZU5bVVU71DUSqXTMXF5m9kAMzPUkw==",
-      "dependencies": {
-        "@cosmjs/encoding": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "@cosmjs/utils": "0.27.0",
-        "bip39": "^3.0.2",
-        "bn.js": "^5.2.0",
-        "elliptic": "^6.5.3",
-        "js-sha3": "^0.8.0",
-        "libsodium-wrappers": "^0.7.6",
-        "ripemd160": "^2.0.2",
-        "sha.js": "^2.4.11"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/encoding": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/encoding/-/encoding-0.27.0.tgz",
-      "integrity": "sha512-cCT8X/NUAGXOe14F/k2GE6N9btjrOqALBilUPIn5CL4OEGxvRTPD59nWSACu0iafCGz10Tw3LPcouuYPtZmkbg==",
-      "dependencies": {
-        "base64-js": "^1.3.0",
-        "bech32": "^1.1.4",
-        "readonly-date": "^1.0.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/json-rpc": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/json-rpc/-/json-rpc-0.27.0.tgz",
-      "integrity": "sha512-Q6na5KPYDD90QhlPZTInquwBycDjvhZvWwpV1TppDd2Em8S1FfN3ePiV2YCf4XzXREU5YPFSHzh5MHK/WhQY3w==",
-      "dependencies": {
-        "@cosmjs/stream": "0.27.0",
-        "xstream": "^11.14.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/math": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/math/-/math-0.27.0.tgz",
-      "integrity": "sha512-+WsrdXojqpUL6l2LKOWYgiAJIDD0faONNtnjb1kpS1btSzZe1Ns+RdygG6QZLLvZuxMfkEzE54ZXDKPD5MhVPA==",
-      "dependencies": {
-        "bn.js": "^5.2.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/proto-signing": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/proto-signing/-/proto-signing-0.27.0.tgz",
-      "integrity": "sha512-ODqnmY/ElmcEYu6HbDmeGce4KacgzSVGQzvGodZidC1RR9EYociuweBPNwSHqBPolC6PQPI/QGc83m/mbih2xw==",
-      "dependencies": {
-        "@cosmjs/amino": "0.27.0",
-        "@cosmjs/crypto": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "cosmjs-types": "^0.4.0",
-        "long": "^4.0.0",
-        "protobufjs": "~6.10.2"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/proto-signing/node_modules/@cosmjs/amino": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/amino/-/amino-0.27.0.tgz",
-      "integrity": "sha512-ybyzRkGrRija1bjGjGP7sAp2ulPA2/S2wMY2pehB7b6ZR8dpwveCjz/IqFWC5KBxz6KZf5MuaONOY+t1kkjsfw==",
-      "dependencies": {
-        "@cosmjs/crypto": "0.27.0",
-        "@cosmjs/encoding": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "@cosmjs/utils": "0.27.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/proto-signing/node_modules/protobufjs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.3.tgz",
-      "integrity": "sha512-yvAslS0hNdBhlSKckI4R1l7wunVilX66uvrjzE4MimiAt7/qw1nLpMhZrn/ObuUTM/c3Xnfl01LYMdcSJe6dwg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@protobufjs/aspromise": "^1.1.2",
-        "@protobufjs/base64": "^1.1.2",
-        "@protobufjs/codegen": "^2.0.4",
-        "@protobufjs/eventemitter": "^1.1.0",
-        "@protobufjs/fetch": "^1.1.0",
-        "@protobufjs/float": "^1.0.2",
-        "@protobufjs/inquire": "^1.1.0",
-        "@protobufjs/path": "^1.1.2",
-        "@protobufjs/pool": "^1.1.0",
-        "@protobufjs/utf8": "^1.1.0",
-        "@types/long": "^4.0.1",
-        "@types/node": "^13.7.0",
-        "long": "^4.0.0"
-      },
-      "bin": {
-        "pbjs": "bin/pbjs",
-        "pbts": "bin/pbts"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/socket": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/socket/-/socket-0.27.0.tgz",
-      "integrity": "sha512-lOd0s6gLyjdjcs8xnYuS2IXRqBLUrI76Bek5wsia+m5CyUvHjRbbd7+nZiznbtVjApBlIwHGkiklLg3/byxkAA==",
-      "dependencies": {
-        "@cosmjs/stream": "0.27.0",
-        "isomorphic-ws": "^4.0.1",
-        "ws": "^7",
-        "xstream": "^11.14.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/stargate": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/stargate/-/stargate-0.27.0.tgz",
-      "integrity": "sha512-Fiqk8rIpB4emzC/P7/+ZPPJV9aG6KJhVuOF4D8c1j1Bv8fVs1XqC6NgsY6elTLXl38pgXt7REn6VYzAdZwrHXQ==",
-      "dependencies": {
-        "@confio/ics23": "^0.6.3",
-        "@cosmjs/amino": "0.27.0",
-        "@cosmjs/encoding": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "@cosmjs/proto-signing": "0.27.0",
-        "@cosmjs/stream": "0.27.0",
-        "@cosmjs/tendermint-rpc": "0.27.0",
-        "@cosmjs/utils": "0.27.0",
-        "cosmjs-types": "^0.4.0",
-        "long": "^4.0.0",
-        "protobufjs": "~6.10.2",
-        "xstream": "^11.14.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/stargate/node_modules/@cosmjs/amino": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/amino/-/amino-0.27.0.tgz",
-      "integrity": "sha512-ybyzRkGrRija1bjGjGP7sAp2ulPA2/S2wMY2pehB7b6ZR8dpwveCjz/IqFWC5KBxz6KZf5MuaONOY+t1kkjsfw==",
-      "dependencies": {
-        "@cosmjs/crypto": "0.27.0",
-        "@cosmjs/encoding": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "@cosmjs/utils": "0.27.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/stargate/node_modules/protobufjs": {
-      "version": "6.10.3",
-      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.3.tgz",
-      "integrity": "sha512-yvAslS0hNdBhlSKckI4R1l7wunVilX66uvrjzE4MimiAt7/qw1nLpMhZrn/ObuUTM/c3Xnfl01LYMdcSJe6dwg==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@protobufjs/aspromise": "^1.1.2",
-        "@protobufjs/base64": "^1.1.2",
-        "@protobufjs/codegen": "^2.0.4",
-        "@protobufjs/eventemitter": "^1.1.0",
-        "@protobufjs/fetch": "^1.1.0",
-        "@protobufjs/float": "^1.0.2",
-        "@protobufjs/inquire": "^1.1.0",
-        "@protobufjs/path": "^1.1.2",
-        "@protobufjs/pool": "^1.1.0",
-        "@protobufjs/utf8": "^1.1.0",
-        "@types/long": "^4.0.1",
-        "@types/node": "^13.7.0",
-        "long": "^4.0.0"
-      },
-      "bin": {
-        "pbjs": "bin/pbjs",
-        "pbts": "bin/pbts"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/stream": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/stream/-/stream-0.27.0.tgz",
-      "integrity": "sha512-D9mXHqS6y7xrThhUg5SCvMjiVQ8ph9f7gAuWlrXhqVJ5FqrP6OyTGRbVyGGM91d5Jj7N7oidQ+hOfc34vKFgeg==",
-      "dependencies": {
-        "xstream": "^11.14.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/tendermint-rpc": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/tendermint-rpc/-/tendermint-rpc-0.27.0.tgz",
-      "integrity": "sha512-WFcJ2/UF76fBBVzPRiHJoC/GCKvgt0mb7+ewgpwKBeEcYwfj5qb1QreGBbHn/UZx9QSsF9jhI5k7SmNdglC3cA==",
-      "dependencies": {
-        "@cosmjs/crypto": "0.27.0",
-        "@cosmjs/encoding": "0.27.0",
-        "@cosmjs/json-rpc": "0.27.0",
-        "@cosmjs/math": "0.27.0",
-        "@cosmjs/socket": "0.27.0",
-        "@cosmjs/stream": "0.27.0",
-        "axios": "^0.21.2",
-        "readonly-date": "^1.0.0",
-        "xstream": "^11.14.0"
-      }
-    },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@cosmjs/utils": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/@cosmjs/utils/-/utils-0.27.0.tgz",
-      "integrity": "sha512-UC1eWY9isDQm6POy6GaTmYtbPVY5dkywdjW8Qzj+JNMhbhMM0KHuI4pHwjv5TPXSO/Ba2z10MTnD9nUlZtDwtA=="
-    },
     "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@keplr-wallet/types": {
       "version": "0.12.35",
       "resolved": "https://registry.npmjs.org/@keplr-wallet/types/-/types-0.12.35.tgz",
@@ -2760,11 +2572,6 @@
         "long": "^4.0.0"
       }
     },
-    "node_modules/decentralcardgame-cardchain-client-ts/node_modules/@types/node": {
-      "version": "13.13.52",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz",
-      "integrity": "sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ=="
-    },
     "node_modules/decentralcardgame-cardchain-client-ts/node_modules/axios": {
       "version": "0.21.4",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
@@ -6189,9 +5996,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
+      "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index d0b29c72..1cdf9c95 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "dependencies": {
     "@cosmjs/encoding": "^0.29.3",
     "@cosmjs/launchpad": "^0.27.0",
-    "@cosmjs/stargate": "^0.27.0",
-    "@cosmjs/proto-signing": "^0.27.0",
+    "@cosmjs/proto-signing": "^0.27.1",
+    "@cosmjs/stargate": "^0.27.1",
     "@hcaptcha/vue3-hcaptcha": "^1.0.1",
     "@headlessui/tailwindcss": "^0.2.0",
     "@headlessui/vue": "^1.7.16",
@@ -13,8 +13,8 @@
     "@tanstack/vue-query": "^4.13.5",
     "axios": "^1.5.1",
     "bignumber.js": "^9.1.0",
-    "crypto-js": "^4.1.1",
-    "decentralcardgame-cardchain-client-ts": "^0.0.17",
+    "crypto-js": "^4.2.0",
+    "decentralcardgame-cardchain-client-ts": "0.0.25",
     "long": "^5.2.0",
     "merge-images": "^2.0.0",
     "pinia": "^2.0.23",
@@ -50,7 +50,7 @@
     "sass": "^1.55.0",
     "tailwindcss": "^3.3.3",
     "typescript": "~4.8.4",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vue-tsc": "^1.0.9"
   },
   "name": "@decentralcardgame/frontend",
diff --git a/public/icon/abilities/avatar.svg b/public/icon/abilities/avatar.svg
new file mode 100644
index 00000000..0ddc20e9
--- /dev/null
+++ b/public/icon/abilities/avatar.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<polygon points="135,247.5 169.6,175.1 107,102.7 133.3,54.9 204.1,119.1 258.5,25.3 317.7,68.1 270,158.6 349,213 286.4,303.5 
+	214,231.1 166.3,308.4 136.6,254.1 "/>
+<path d="M407,216.2l-52.8,164.9l-87.8-66.7l-104.2,29.7c-6,16.5-15.5,47.8-15.5,47.8L125,331.3l-33-20l-8,62l82.9,78.4l201.8,4.5
+	l79.5-136.8L407,216.2z"/>
+<path d="M400,62.3l-49,29l-53,57l30,27l59-3l47-101L400,62.3z M386.9,108.1c-1.4,5.5-11,41.2-11,41.2l-44-6.9l30.2-34.3
+	C362.2,108.1,388.3,102.6,386.9,108.1z"/>
+<path d="M112,150.3l-40-13l-20,24l3,39l57,9l34-37L112,150.3z M85,188.3l-11-21l20-7l21,18L85,188.3z"/>
+</svg>
diff --git a/public/icon/abilities/powerstone.svg b/public/icon/abilities/powerstone.svg
new file mode 100644
index 00000000..8c11cbf9
--- /dev/null
+++ b/public/icon/abilities/powerstone.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<polygon points="205.2,485.4 261.5,343.4 354,413.3 "/>
+<polygon points="199,477.3 221,419.3 188,361.3 158,412.3 "/>
+<polygon points="196.9,345.5 226,188.3 254,334.3 "/>
+<polygon points="362.8,410.2 269,339.3 287,133.3 337,142.3 "/>
+<polygon points="283,120.3 241.6,21.3 332,130.3 "/>
+<polygon points="225,112.3 275,128.3 260,303.3 "/>
+<polygon points="212,105.3 238,26.3 152,133.2 "/>
+<polygon points="153,144.3 213,117.3 222,163.3 188.6,345.5 152,395.3 "/>
+</svg>
diff --git a/src/components/elements/EncounterVotingComponent.vue b/src/components/elements/EncounterVotingComponent.vue
index 3e2aafd8..2c5b5de2 100644
--- a/src/components/elements/EncounterVotingComponent.vue
+++ b/src/components/elements/EncounterVotingComponent.vue
@@ -1,69 +1,60 @@
 <template>
   <div align="center">
     <div class="voter ccbutton">
-      <br>
+      <br />
       <h1>Vote Encounters</h1>
       <p>Vote on cards that you enountered in-game.</p>
       <p>To make your votes take effect, you have to send them to the chain.</p>
-      <br>
+      <br />
       <div>
         <div class="InfoContainer">
-          <div v-if="status === Status.VOTING" class="ELement Info">
-            <h3>{{ currentCard.CardName }}</h3>
-            <p v-if="currentCard.FlavourText" class="FlavourText">
-              "{{ currentCard.FlavourText }}"
+          <div v-if="!loggedIn" class="ELement">
+            <p>You cannot vote on cards. Please login with your wallet.</p>
+          </div>
+          <div v-if="current" class="ELement Info">
+            <h3>{{ state.currentCard.CardName }}</h3>
+            <p v-if="state.currentCard.FlavourText" class="FlavourText">
+              "{{ state.currentCard.FlavourText }}"
             </p>
-            <br>
+            <br />
             <h3>Advanced Card Information</h3>
             <p>
-              Votepool: {{ votePool }} <br>
-              Status: {{ currentCard.status }} <br>
+              Votepool: {{ votePool }} <br />
+              Status: {{ state.currentCard.status }} <br />
             </p>
-            <br><br>
-            <keyword-component :keywords="currentCard.Keywords" />
+            <br /><br />
+            <keyword-component :keywords="state.currentCard.Keywords" />
           </div>
-          <div v-if="status === Status.VOTING" class="ELement">
-            <CardComponent :model="currentCard" :image-u-r-l="currentCard.image" />
+          <div v-if="typeof current !== 'undefined'" class="ELement">
+            <CardComponent
+              :model="state.currentCard"
+              :image-u-r-l="state.currentCard.image"
+            />
           </div>
-          <div v-if="status === Status.NOVOTESLEFT" class="ELement">
-            <img style="max-width:25em;" src="@/assets/icon/noCard.png">
-            <br><br>
-            <p>It seams like you have voted on all cards you've encountered. Come back here, when you've played more
-              matches.</p>
+          <div v-if="loggedIn && !cardsLeft.length && isEmpty" class="ELement">
+            <img style="max-width: 25em" src="@/assets/icon/noCard.png" />
+            <br /><br />
+            <p>
+              It seams like you have voted on all cards you've encountered. Come
+              back here, when you've played more matches.
+            </p>
           </div>
-          <div v-if="status === Status.READY_TO_SEND" class="ELement">
+          <div v-if="loggedIn && !cardsLeft.length && !isEmpty" class="ELement">
             To make your votes take effect, you have to send them to the chain.
-            <button @click="sendToChain()">
-              Send votes to chain
-            </button>
-          </div>
-          <div v-if="status === Status.NOTLOGGEDIN" class="ELement">
-            <p>You cannot vote on cards. Please login with your wallet.</p>
-          </div>
-          <div v-if="status === Status.UNREGISTERED">
-            <p>You are not registered. To vote on cards you have to register, press the Join button to register.</p>
-            <p>Afer registering it might take a few seconds until your account becomes active.</p>
+            <button @click="sendToChain()">Send votes to chain</button>
           </div>
         </div>
       </div>
 
-      <br>
-      <div v-if="status === Status.VOTING" class="button-container">
-        <button @click="vote('fair_enough')">
-          Fair Enough
-        </button>
-        <button @click="vote('overpowered')">
-          Overpowered
-        </button>
-        <button @click="vote('underpowered')">
-          Underpowered
-        </button>
-        <button @click="vote('inappropriate')">
-          Inappropriate
-        </button>
+      <br />
+      <div v-if="cardsLeft.length" class="button-container">
+        <button @click="vote(VoteType.fairEnough)">Fair Enough</button>
+        <button @click="vote(VoteType.overpowered)">Overpowered</button>
+        <button @click="vote(VoteType.underpowered)">Underpowered</button>
+        <button @click="vote(VoteType.inappropriate)">Inappropriate</button>
         <button
-          v-if="!isEmpty()"
-          style="margin-left: 50px;"
+          v-if="!isEmpty"
+          style="margin-left: 50px"
           @click="sendToChain()"
         >
           Send votes to chain
@@ -73,8 +64,7 @@
   </div>
 </template>
 
-<script lang="ts">
-import * as R from "ramda";
+<script setup lang="ts">
 import CardComponent from "@/components/elements/CardComponent.vue";
 import KeywordComponent from "@/components/elements/KeywordComponent.vue";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
@@ -82,176 +72,61 @@ import { Card } from "@/model/Card";
 import { useAddress } from "@/def-composables/useAddress";
 import { useNotifications } from "@/def-composables/useNotifications";
 import { useQuery } from "@/def-composables/useQuery";
-import { useTx } from "@/def-composables/useTx";
 import { useVoting } from "@/def-composables/useVoting";
-import type { CardchainVoteRight } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/rest";
+import { computed, onMounted, reactive, watch } from "vue";
+import { VoteType } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
+import { useCards } from "@/def-composables/useCards";
+
+const { loggedIn } = useLoggedIn();
+const { address } = useAddress();
+const { queryQCard } = useQuery();
+const { notifySuccess } = useNotifications();
+const { getCard } = useCards()
+const { add, send, isEmpty, cardsLeft, current, next } = useVoting();
+
+const initialState: {
+  currentCard: Card;
+} = {
+  currentCard: new Card(),
+};
 
-const Status = {
-  "VOTING": 0,
-  "UNREGISTERED": 1,
-  "NOVOTESLEFT": 2,
-  "NOTLOGGEDIN": 3,
-  "READY_TO_SEND": 4,
-}
+const state = reactive(initialState);
+const votePool = computed(() => state.currentCard.votePool.normalize().pretty())
 
-export default {
-  name: "EncounterVotingComponent",
-  components: { CardComponent, KeywordComponent },
-  data() {
-    return {
-      status: Status.NOTLOGGEDIN,
-      Status: Status,
-      voteRights: new Array<CardchainVoteRight>(),
-      cards: new Array<Card>(),
-      currentCard: new Card(),
-      votePool: "",
-      config: {
-        minThrowOutDistance: 250,
-        maxThrowOutDistance: 300
-      }
-    }
-  },
-  setup() {
-    const { loggedIn } = useLoggedIn()
-    const { address } = useAddress()
-    const { queryQCards, queryQCard, queryQVotableCards } = useQuery()
-    const { notifyInfo, notifyFail, notifySuccess } = useNotifications()
-    const { voteCard } = useTx()
-    const { add, send, isEmpty, filterCards } = useVoting()
+const vote = (type: VoteType) => add(current.value!, type);
 
-    return { loggedIn, address, queryQVotableCards, queryQCards, notifyInfo, queryQCard, voteCard, add, send, isEmpty, filterCards, notifyFail, notifySuccess}
-  },
-  watch: {
-    loggedIn() {
-      if (this.loggedIn) {
-        this.init();
+const loadCard = () => {
+  if (current.value) {
+    getCard(current.value!).then((parsedCard: Card) => {
+      if (parsedCard) {
+        state.currentCard = parsedCard;
       } else {
-        this.status = Status.NOTLOGGEDIN
+        console.error("card could not be parsed", parsedCard);
       }
-    }
-  },
-  mounted() {
-    if (this.loggedIn) {
-      this.init();
-    } else {
-      this.notifyInfo("Not logged in", "You must login to be able to vote.");
-    }
-  },
-  methods: {
-    init() {
-      this.queryQVotableCards(this.address)
-        .then(res => {
-          let voteRights = this.filterCards(res.voteRights)
-          this.queryQCards("playable")
-            .then(cards => {
-              console.log("getVotableCards:", res);
-              if (res.voteRights) {
-                this.voteRights = voteRights;
-
-                let cleaned = [];
-                for (let i = 0; i < this.voteRights.length; i++) {
-                  if (cards.cardsList.includes(this.voteRights[i].cardId)) {
-                    cleaned.push(this.voteRights[i]);
-                  }
-                }
-
-                this.voteRights = cleaned;
-                this.status = Status.VOTING
-
-                if (this.voteRights.length > 0) {
-                  console.log("voteRights:", this.voteRights);
+    });
+  }
+  if (next.value) {
+    getCard(next.value!)
+  }
+};
 
-                  this.getNextCard();
-                } else {
-                  this.status = Status.NOVOTESLEFT
-                }
-              } else if (res.unregistered === true) {
-                this.status = Status.UNREGISTERED
-                this.notifyFail("NOT REGISTERED", "You are not registered in the blockchain. Please register to obtain voting rights.");
-              } else if (res.noVoteRights === true) {
-                this.status = Status.NOVOTESLEFT
-                this.notifyInfo("No Vote Rights", "You do not have any voting rights, therefore you cannot vote on cards.");
-              } else if (res.voteRights === null) {
-                if (!this.isEmpty()) {
-                  this.status = Status.READY_TO_SEND
-                  console.log("ready to send");
-                } else {
-                  this.status = Status.NOVOTESLEFT
-                  console.log("no more voting rights");
-                }
-              } else {
-                this.status = Status.NOVOTESLEFT
-                console.error("getVotableCards returned non-readable data: ", res);
-              }
-            });
-        })
-        .catch(res => {
-          this.notifyFail("OH NOES", res);
-        });
-    },
-    vote(type: string) {
-      this.add(this.currentCard.id, type)
-      console.log("vote cast for cardid", this.currentCard.id, "voted: ", type);
+onMounted(() => {
+  if (loggedIn.value) {
+    loadCard();
+  }
+});
 
-      if (R.isEmpty(this.cards)) {
-        if (!R.isEmpty(this.voteRights)) {
-          this.getNextCard()
-        } else {
-          if (!this.isEmpty()) {
-            this.status = Status.READY_TO_SEND
-            console.log("ready to send");
-          } else {
-            this.status = Status.NOVOTESLEFT
-            console.log("no more voting rights");
-          }
-        }
-      } else {
-        this.showNextCard();
-      }
-    },
-    getNextCard() {
-      console.log("votingRights.length:", this.voteRights.length);
-      if (this.voteRights.length > 0) {
-        let nextCard = this.voteRights.at(-1)!;
-        console.log("nextCard", nextCard);
-        this.voteRights = R.dropLast(1, this.voteRights);
+watch(current, loadCard);
 
-        this.queryQCard(nextCard.cardId)
-          .then((parsedCard: Card) => {
-            console.log("currentCard", parsedCard);
-            if (parsedCard) {
-              this.cards.push(parsedCard);
-              this.cards.at(-1)!.id = parseInt(nextCard.cardId!);
-            } else {
-              console.error("card could not be parsed", parsedCard);
-            }
-            this.showNextCard()
-          });
-      } else {
-        console.error("no cards left");
-      }
-    },
-    showNextCard() {
-      if (R.isEmpty(this.cards)) {
-        if (!this.isEmpty()) {
-          this.status = Status.READY_TO_SEND
-          return
-        }
-        this.status = Status.NOVOTESLEFT
-        return
-      }
-      this.currentCard = this.cards.at(-1)!;
-      this.votePool = this.currentCard.votePool.normalize().pretty();
-      this.cards = R.dropLast(1, this.cards);
+const sendToChain = () => {
+  send(
+    () => {
+      notifySuccess("Success!", "Voted succesfully!");
     },
-    sendToChain() {
-      this.send(_ => {
-        this.notifySuccess("Success!", "Voted succesfully!")
-        if (this.voteRights.length == 0)
-          this.status = Status.NOVOTESLEFT
-      }, err => {console.log(err)})
+    (err) => {
+      console.log(err);
     }
-  }
+  );
 };
 </script>
 
diff --git a/src/components/elements/GalleryComponent.vue b/src/components/elements/GalleryComponent.vue
new file mode 100644
index 00000000..43ba523d
--- /dev/null
+++ b/src/components/elements/GalleryComponent.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="gallery__view">
+    <div
+      v-for="card in state.cards"
+      :key="card.id"
+      @click="showGalleryModal(card)"
+    >
+      <div class="cardContainer" @click="showGalleryModal(card)">
+        <div class="cardContainer--element">
+          <CardComponent
+            :model="card"
+            :image-u-r-l="card.image"
+            hover-behavior="none"
+            class="gallery__view__card"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="button-container button-container--bottom ccbutton">
+    <button v-show="state.pageId > 0" @click="prevPage">back</button>
+    <button v-show="state.pageId + 1 <= maxPageID" @click="nextPage">
+      next
+    </button>
+  </div>
+  <div
+    v-if="state.isGalleryModalVisible"
+    class="container-modal"
+    @click="closeGalleryModal"
+  >
+    <div class="ability-modal-container">
+      <GalleryModal
+        :keyword-descriptions="state.keywordDescriptions"
+        :model="state.clickedCard"
+        :image-u-r-l="state.clickedCard.image"
+        @close="closeGalleryModal"
+        @cardview="cardview"
+        @edit="edit"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GalleryModal from "@/components/modals/GalleryModal.vue";
+import { computed, reactive, watch } from "vue";
+import { useLastInputEvent } from "@/def-composables/useLastInputEvent";
+import { useCards } from "@/def-composables/useCards";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
+import { Card } from "@/model/Card";
+import CardComponent from "@/components/elements/CardComponent.vue";
+import { useCardsRules } from "@/def-composables/useCardRules";
+import { useCardCreatorCards } from "@/def-composables/useCardCreatorCards";
+
+const { lastInputEvent } = useLastInputEvent();
+const { getCard } = useCards();
+const { rules } = useCardsRules();
+const { editCard } = useCardCreatorCards();
+const router = useRouter();
+
+const props = withDefaults(
+  defineProps<{
+    allCardIds: Array<number>;
+    cardsPerPage: number;
+    cardCallback: (card: Card) => void
+  }>(),
+  {
+    allCardIds: () => [],
+    cardsPerPage: 100,
+    cardCallback: () => {}
+  }
+);
+
+const initialState: {
+  clickedCard: Card;
+  isGalleryModalVisible: boolean;
+  pageId: number;
+  cards: Array<Card>;
+  leavePageLock: boolean;
+  keywordDescriptions: string[][];
+} = {
+  clickedCard: new Card(),
+  isGalleryModalVisible: false,
+  pageId: 0,
+  cards: [],
+  leavePageLock: false,
+  keywordDescriptions: [],
+};
+
+const state = reactive(initialState);
+
+const cardIdsOnPage = computed(() => {
+  let r = props.allCardIds.slice(
+    state.pageId * props.cardsPerPage,
+    (state.pageId + 1) * props.cardsPerPage
+  );
+  console.log(r);
+  return r;
+});
+
+const maxPageID = computed(() =>
+  Math.ceil(props.allCardIds.length / props.cardsPerPage) - 1
+);
+
+onBeforeRouteLeave((to, from, next) => {
+  if (state.leavePageLock) next(false);
+  else next();
+});
+
+watch(cardIdsOnPage, (cardIds) => {
+  state.cards = [];
+  cardIds.forEach(loadCard);
+});
+
+watch(lastInputEvent, (event) => {
+  if (event.which == 5) {
+    state.leavePageLock = true; // Forward Mouse special button
+    nextPage();
+  } else if (event.which == 4) {
+    // Backward Mouse special button
+    state.leavePageLock = true;
+    prevPage();
+  } else {
+    state.leavePageLock = false;
+  }
+});
+
+const edit = () => {
+  editCard.card.value = state.clickedCard;
+  router.push("cardCreator");
+};
+
+const showGalleryModal = (card: Card) => {
+  state.clickedCard = card;
+  state.isGalleryModalVisible = true;
+
+  state.keywordDescriptions = [];
+  const firstLetterToLower = (s: string) => {
+    return s[0].toLowerCase() + s.substring(1);
+  };
+  state.clickedCard.Keywords.forEach((ability) => {
+    ability.forEach((keyword) => {
+      state.keywordDescriptions.push([
+        keyword,
+        rules.value.definitions[firstLetterToLower(keyword)].description,
+      ]);
+    });
+  });
+};
+
+const loadCard = async (cardId: number) => {
+  let card: Card = await getCard(cardId);
+  props.cardCallback(card)
+  if (card.Content) {
+    state.cards.push(card);
+  } else if (!card.owner) {
+    console.error("card without content and owner: ", card);
+  } else {
+    console.error("card without content: ", card);
+  }
+  return card;
+};
+
+const nextPage = () => {
+  if (state.pageId + 1 <= maxPageID.value) state.pageId += 1;
+};
+
+const prevPage = () => {
+  if (state.pageId > 0) state.pageId -= 1;
+};
+
+const cardview = () => router.push("cardview/" + state.clickedCard.id);
+
+const closeGalleryModal = () => (state.isGalleryModalVisible = false);
+</script>
+
+<style scoped lang="scss">
+@import "@/scss/variables";
+
+.gallery__view {
+  margin: 1rem 0;
+  text-shadow: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-template-rows: auto;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+}
+
+.ability-modal-container {
+  margin: 5vh auto auto;
+  max-width: 800px;
+  max-height: 95vh;
+  @media (max-width: 480px) {
+    margin-top: 0;
+    max-height: 300vh;
+    height: auto;
+  }
+  //OLD:
+  // position: relative;
+  z-index: 3;
+}
+
+.cardContainer--element {
+  position: relative;
+  flex-grow: 1;
+  max-width: 350px;
+}
+
+.button-container--bottom {
+  margin-top: 2rem;
+}
+</style>
diff --git a/src/components/modals/AirdropsModal.vue b/src/components/modals/AirdropsModal.vue
index 2eece77d..38627ee9 100644
--- a/src/components/modals/AirdropsModal.vue
+++ b/src/components/modals/AirdropsModal.vue
@@ -9,7 +9,6 @@
         aria-labelledby="modalTitle"
         class="modal"
         role="dialog"
-        @click.stop="doNothing"
       >
         <header
           id="modalTitle"
@@ -112,7 +111,7 @@ export default {
         user: {
           text: "Create a user.",
           linkText: "",
-          linkData: 'user'
+          linkData: 'UserView'
         },
         buy: {
           text: "Buy a ",
@@ -138,7 +137,7 @@ export default {
       })
       .then(data => {
         queryParams().then(res => {
-          this.isValid = (+data.result.sync_info.latest_block_height < +res.data.params.airDropMaxBlockHeight)
+          this.isValid = (+data.result.sync_info.latest_block_height < +res.params.airDropMaxBlockHeight)
         })
       })
       .catch(error => console.log(error))
diff --git a/src/components/modals/ChoosePBModal.vue b/src/components/modals/ChoosePBModal.vue
index c28e8bb1..2168b50b 100644
--- a/src/components/modals/ChoosePBModal.vue
+++ b/src/components/modals/ChoosePBModal.vue
@@ -1,22 +1,14 @@
 <template>
   <transition name="modal-fade">
-    <div
-      class="modal__backdrop"
-      style="z-index: 1000;"
-    >
+    <div class="modal__backdrop" style="z-index: 1000">
       <div
         aria-describedby="modalDescription"
         aria-labelledby="modalTitle"
         class="modal"
         role="dialog"
       >
-        <header
-          id="modalTitle"
-          class="modal__header"
-        >
-          <slot name="header">
-            Choose profile card
-          </slot>
+        <header id="modalTitle" class="modal__header">
+          <slot name="header"> Choose profile card</slot>
           <button
             aria-label="Close modal"
             type="button"
@@ -27,15 +19,8 @@
           </button>
         </header>
         <div class="modal__body input--transfer">
-          <div
-            v-for="obj in images"
-            :key="obj"
-            class="sppBox"
-          >
-            <img
-              :src="obj.img"
-              @click="send(obj.id)"
-            >
+          <div v-for="obj in state.images" :key="obj" class="sppBox">
+            <img :src="obj.img" @click="send(obj.id)" />
           </div>
         </div>
       </div>
@@ -43,73 +28,69 @@
   </transition>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUser } from "@/def-composables/useUser";
-import { useQuery } from "@/def-composables/useQuery";
 import { useTx } from "@/def-composables/useTx";
 import type { Card } from "@/model/Card";
+import { onMounted, reactive } from "vue";
+import { useCards } from "@/def-composables/useCards";
+
+const { setProfileCard } = useTx();
+const { queryUser } = useUser();
+const { getCard } = useCards()
+const emit = defineEmits(["close"]);
 
 class Pic {
-  id: number
-  img: string
+  id: number;
+  img: string;
 
   constructor(id: number, img: string) {
-    this.id = id
-    this.img = img
+    this.id = id;
+    this.img = img;
   }
-
 }
 
-export default {
-  name: 'ChoosePBModal',
-  props: {
-    cards: {
-      type: Array<number>,
-      default() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      images: new Array<Pic>()
-    }
-  },
-  setup() {
-    const { queryQCard } = useQuery();
-    const { setProfileCard } = useTx();
-    const { queryUser } = useUser()
-
-    return { queryQCard, setProfileCard, queryUser };
-  },
-  mounted() {
-    for (let i = 0; i < this.cards.length; i++) {
-      this.getCard(this.cards[i])
-    }
-    console.log(this.cards)
-  },
-  methods: {
-    async getCard(id: number) {
-      this.queryQCard(id).then((res: Card) => {
-        console.log(res)
-        if (["permanent", "trial"].includes(res.status)) {
-          this.images.push(new Pic(id, res.image))
-        }
-      })
-    },
-    close() {
-      this.$emit('close')
-    },
-    send(id: number) {
-      this.setProfileCard(id, (res) => {
-        console.log(res)
-        this.queryUser()
-        this.close()
-      }, () => {})
-    }
+const props = withDefaults(
+  defineProps<{
+    cardIds: number[];
+  }>(),
+  {
+    cardIds: () => [],
   }
+);
+
+const initialState: {
+  images: Array<Pic>;
+} = {
+  images: new Array<Pic>(),
+};
+
+const state = reactive(initialState);
+
+onMounted(() => {
+  props.cardIds.map(id => loadCard(id))
+})
+
+const loadCard = (id: number) => {
+  getCard(id).then((card: Card) => {
+    if (["permanent", "trial"].includes(card.status)) {
+      state.images.push(new Pic(id, card.image));
+    }
+  });
 }
 
+const close = () => emit("close")
+
+const send = (id: number) => {
+  setProfileCard(
+    id,
+    (res) => {
+      queryUser();
+      close();
+    },
+    console.log
+  );
+}
 </script>
 
 <style lang="scss">
@@ -124,6 +105,7 @@ export default {
     text-align: right;
     background-color: lightgray;
   }
+
   select {
     color: $black;
     background-color: lightgray;
@@ -139,14 +121,16 @@ export default {
   display: inline-block;
   border-radius: 50%;
   box-shadow: 2px 2px 4px;
+
   img {
     background-color: transparent;
     object-fit: contain;
     padding-top: -10%;
     width: 100%;
     cursor: pointer;
-  };
+  }
 }
+
 .sppBox:hover {
   box-shadow: 4px 4px 8px;
 }
diff --git a/src/components/modals/GalleryModal.vue b/src/components/modals/GalleryModal.vue
index 2f26738c..6f5d77e6 100644
--- a/src/components/modals/GalleryModal.vue
+++ b/src/components/modals/GalleryModal.vue
@@ -95,10 +95,7 @@
                 aria-label="Close modal"
                 class="choice-grid__button"
                 type="button"
-                @click="
-                  voteUP();
-                  close();
-                "
+                @click="vote(VoteType.underpowered)"
               >
                 Vote Underpowered
               </button>
@@ -108,10 +105,7 @@
                 aria-label="Close modal"
                 class="choice-grid__button"
                 type="button"
-                @click="
-                  voteOP();
-                  close();
-                "
+                @click="vote(VoteType.overpowered)"
               >
                 Vote Overpowered
               </button>
@@ -121,10 +115,7 @@
                 aria-label="Close modal"
                 class="choice-grid__button"
                 type="button"
-                @click="
-                  voteFair();
-                  close();
-                "
+                @click="vote(VoteType.fairEnough)"
               >
                 Vote Fair Enough
               </button>
@@ -134,10 +125,7 @@
                 aria-label="Close modal"
                 class="choice-grid__button"
                 type="button"
-                @click="
-                  voteInappropriate();
-                  close();
-                "
+                @click="vote(VoteType.inappropriate)"
               >
                 Vote Inappropriate
               </button>
@@ -173,35 +161,25 @@ import { useLastInputEvent } from "@/def-composables/useLastInputEvent";
 import TransferCardModal from "./TransferCardModal.vue";
 import { useUser } from "@/def-composables/useUser";
 import { Card } from "@/model/Card";
-import { reactive, watch } from "vue";
+import { computed, reactive, watch } from "vue";
+import { useVoting } from "@/def-composables/useVoting";
+import { VoteType } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
+import { useAddress } from "@/def-composables/useAddress";
 
+const { add, send, isEmpty, cardsLeft, current } = useVoting();
 const { lastInputEvent } = useLastInputEvent();
 const { queryCoins, queryUser } = useUser();
+const { address } = useAddress()
 
-const emit = defineEmits([
-  "close",
-  "download",
-  "cardview",
-  "edit",
-  "voteOP",
-  "voteUP",
-  "voteFair",
-  "voteInappropriate",
-]);
+const emit = defineEmits(["close", "cardview", "edit"]);
 
 const props = withDefaults(
   defineProps<{
-    canVote: boolean;
-    isOwner: boolean;
-    isArtist: boolean;
-    keywordDescriptions: Array<string>;
+    keywordDescriptions: Array<Array<string>>;
     model: Card;
     imageURL: string;
   }>(),
   {
-    canVote: false,
-    isOwner: false,
-    isArtist: false,
     keywordDescriptions: () => [],
     model: () => new Card(),
     imageURL: "",
@@ -214,6 +192,9 @@ const initialState: {
   isModalVisible: false,
 };
 
+const canVote = computed(() => cardsLeft.value.includes(Number(props.model.id)))
+const isOwner = computed(() => props.model.owner == address.value)
+const isArtist = computed(() => props.model.artist == address.value)
 const state = reactive(initialState);
 
 watch(lastInputEvent, (event) => {
@@ -223,13 +204,20 @@ watch(lastInputEvent, (event) => {
 });
 
 const close = () => emit("close");
-const download = () => emit("download");
 const cardview = () => emit("cardview");
 const edit = () => emit("edit");
-const voteOP = () => emit("voteOP");
-const voteUP = () => emit("voteUP");
-const voteFair = () => emit("voteFair");
-const voteInappropriate = () => emit("voteInappropriate");
+
+const vote = (type: VoteType) => {
+  add(props.model.id, type);
+  send(
+    () => {
+    },
+    (err) => {
+      console.log(err);
+    }
+  );
+  close();
+};
 const showModal = () => {
   state.isModalVisible = true;
 };
diff --git a/src/components/modals/_modal.scss b/src/components/modals/_modal.scss
index 4deffbac..2f3796d1 100644
--- a/src/components/modals/_modal.scss
+++ b/src/components/modals/_modal.scss
@@ -10,6 +10,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 
   @media (max-width: 480px) {
     position: static;
diff --git a/src/def-composables/useCards.ts b/src/def-composables/useCards.ts
new file mode 100644
index 00000000..9e8a740b
--- /dev/null
+++ b/src/def-composables/useCards.ts
@@ -0,0 +1,25 @@
+import { useQuery } from "@/def-composables/useQuery";
+import type { Card } from "@/model/Card";
+import { ref, type Ref } from "vue";
+
+const { queryQCard } = useQuery()
+
+const state: Ref<{[key: number]: Card}> = ref({})
+
+const updateCard = async (id: number) => {
+  const card: Card = await queryQCard(id)
+  card.id = id
+  state.value[id] = card
+  return card
+}
+
+const getCard = async (id: number) => {
+  if (Object.keys(state.value).includes(""+id)) {
+    return state.value[id]
+  }
+  return await updateCard(id)
+}
+
+export const useCards = () => {
+  return { getCard, updateCard }
+}
\ No newline at end of file
diff --git a/src/def-composables/useProfilePic.ts b/src/def-composables/useProfilePic.ts
index fbd68f21..06c57a1b 100644
--- a/src/def-composables/useProfilePic.ts
+++ b/src/def-composables/useProfilePic.ts
@@ -1,14 +1,13 @@
-import type { User } from "@/model/User"
-import { ref, watch, type Ref } from "vue";
-import { useQuery } from "./useQuery"
-import type { Card } from "@/model/Card"
+import { ref, watch } from "vue";
 import { useAddress } from "./useAddress"
 import { useUser } from "./useUser";
+import type { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
+import { useCards } from "@/def-composables/useCards";
 
 const useProfilePicInstance = () => {
-  const { queryQCard } = useQuery()
   const { address } = useAddress()
   const { user } = useUser()
+  const { getCard } = useCards()
   const loggedInProfilePic = ref("spinner.svg")
 
   watch(user, (u) => {
@@ -22,22 +21,21 @@ const useProfilePicInstance = () => {
     return "Avatar" + myRandom + ".png"
   }
 
-  const getImg = (user: User, address: string) => {
-    console.log(user)
+  const getImg = async (user: User, address: string) => {
+    console.log(user);
     if (user.profileCard != 0) {
-      return queryQCard(user.profileCard).then((card: Card) => {
-        if (card === null) {
-          return getDefaultImg(address)
-        } else {
-          return card.image
-        }
-      })
+      let card = await getCard(user.profileCard);
+      if (card === null) {
+        return getDefaultImg(address);
+      } else {
+        return card.image;
+      }
     } else {
-      return Promise.resolve(getDefaultImg(address))
+      return Promise.resolve(getDefaultImg(address));
     }
-  }
+  };
 
-  return { getImg, loggedInProfilePic }
+  return { getImg, loggedInProfilePic };
 }
 
 let instance: ReturnType<typeof useProfilePicInstance>;
diff --git a/src/def-composables/useQuery.ts b/src/def-composables/useQuery.ts
index a10473cd..f5029e18 100644
--- a/src/def-composables/useQuery.ts
+++ b/src/def-composables/useQuery.ts
@@ -1,8 +1,8 @@
 import { useClient } from "@/composables/useClient";
 import type { AxiosResponse } from "axios";
 import { ChainCard, Card } from "@/model/Card";
-import { User } from "@/model/User";
 import { Coin } from "@/model/Coin";
+import type { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 
 
 const handlers: { [key: string]: (res: AxiosResponse) => any } = {
@@ -13,7 +13,7 @@ const handlers: { [key: string]: (res: AxiosResponse) => any } = {
     return ChainCard.from(res.data).toCard();
   },
   queryQUser: (res): User => {
-    return User.from(res.data);
+    return res.data;
   },
   queryAllBalances: (res) => {
     let coins: Coin[] = [];
@@ -47,10 +47,10 @@ const useQueryInstance = () => {
   const unified = Object.assign(client.CosmosBankV1Beta1.query, client.DecentralCardGameCardchainCardchain.query, client.CosmosAuthzV1Beta1.query);
   const keys = Object.keys(unified);
 
-  let queries: { [id: string]: (args: any) => Promise<any> } = {};
+  let queries: { [id: string]: (...args: any[]) => Promise<any> } = {};
 
   keys.forEach(key => {
-    queries[key] = (...args: any) => {
+    queries[key] = (...args: any[]) => {
       return new Promise((myResolve, _) => {
         myResolve((unified as any)[key](...args).then(handlers.hasOwnProperty(key) ? handlers[key] : handlers.defaultHandler));
       });
diff --git a/src/def-composables/useUser.ts b/src/def-composables/useUser.ts
index 564b4420..f6155aca 100644
--- a/src/def-composables/useUser.ts
+++ b/src/def-composables/useUser.ts
@@ -1,15 +1,15 @@
-import { User } from "@/model/User"
 import { ref, type Ref, watch } from "vue";
 import { useQuery } from "./useQuery"
 import { useAddress } from "./useAddress"
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import type { Coin } from "@/model/Coin";
+import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 
 const useUserInstance = () => {
   const { queryQUser, queryAllBalances } = useQuery()
   const { address } = useAddress()
   const { loggedIn } = useLoggedIn()
-  const user: Ref<User> = ref(new User())
+  const user: Ref<User> = ref(User.fromPartial({}))
   const coins: Ref<Array<Coin>> = ref([])
 
   watch(loggedIn, (val) => {
diff --git a/src/def-composables/useVoting.ts b/src/def-composables/useVoting.ts
index d9d56876..0389c0af 100644
--- a/src/def-composables/useVoting.ts
+++ b/src/def-composables/useVoting.ts
@@ -1,70 +1,58 @@
 import { useTx } from "@/def-composables/useTx";
-import { ref, watch, type Ref } from "vue";
-import * as R from 'ramda'
+import { ref, watch, type Ref, computed } from "vue";
+import * as R from "ramda";
 import type { SingleVote } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain";
-import type { CardchainVoteRight } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/rest";
+import type { VoteType } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
+import { useUser } from "./useUser";
 
 const KEY = "votingList";
-
-const useVotingInstance = () => {
-  const { multiVoteCard } = useTx();
-
-  let stored = window.localStorage.getItem(KEY);
-  const votes: Ref<SingleVote[]> = ref(
-    stored ? Object.assign([], JSON.parse(stored)) : []
-  );
-
-  watch(
-    () => R.clone(votes.value),
-    (currentValue) => {
-      console.log(currentValue);
-      window.localStorage.setItem(KEY, JSON.stringify(currentValue));
-    }
-  );
-
-  const send = (then: (res: any) => void, err: (res: any) => void) => {
-    console.log("send", votes.value)
-    multiVoteCard(
-      votes.value,
-      (res: any) => {
+const { multiVoteCard } = useTx();
+const { user, queryUser } = useUser();
+
+let stored = window.localStorage.getItem(KEY);
+const votes: Ref<SingleVote[]> = ref(
+  stored ? Object.assign([], JSON.parse(stored)) : []
+);
+const votableCards = computed(() => user.value.votableCards.map(v => Number(v)));
+const cardsLeft = computed(() => {
+  let taken = votes.value.map((v) => v.cardId);
+  return votableCards.value.filter((v) => !taken.includes(v));
+});
+const current = computed(() => cardsLeft.value.at(0));
+const next = computed(() => cardsLeft.value.at(1));
+
+watch(
+  () => R.clone(votes.value),
+  (currentValue) => {
+    console.log("Saving current votes: ", currentValue);
+    window.localStorage.setItem(KEY, JSON.stringify(currentValue));
+  }
+);
+
+const send = (then: (res: any) => void, err: (res: any) => void) => {
+  console.log("send", votes.value);
+  multiVoteCard(
+    votes.value,
+    (res: any) => {
+      queryUser().then(() => {
         votes.value = [];
-        then(res);
-      },
-      err
-    );
-    votes.value = []
-  };
-
-  const add = (cardId: number, voteType: string) => {
-    votes.value.push({
-      cardId,
-      voteType,
-    });
-  };
-
-  const isEmpty = () => {
-    return votes.value.length == 0;
-  };
-
-  const filterCards = (voteRights: CardchainVoteRight[]) => {
-    return voteRights.filter((right: CardchainVoteRight) => {
-      for (const vote of votes.value) {
-        if (right.cardId == vote.cardId.toString()) {
-          return false;
-        }
-      }
-      return true;
-    });
-  };
+      });
+      then(res);
+    },
+    err
+  );
+};
 
-  return { add, send, isEmpty, filterCards };
+const add = (cardId: number, voteType: VoteType) => {
+  console.log("vote ", voteType, " for ", cardId);
+  votes.value.push({
+    cardId,
+    voteType,
+  });
 };
 
-let instance: ReturnType<typeof useVotingInstance>;
+const isEmpty = computed(() => votes.value.length == 0);
 
 export const useVoting = () => {
-  if (!instance) {
-    instance = useVotingInstance();
-  }
-  return instance;
+  return { add, send, isEmpty, current, next, cardsLeft };
 };
diff --git a/src/model/Card.ts b/src/model/Card.ts
index ce74a97f..a37e6a64 100644
--- a/src/model/Card.ts
+++ b/src/model/Card.ts
@@ -104,6 +104,11 @@ export class Card {
   balanceAnchor: boolean = false;
   hash: string = "";
 
+  // Values used for nerfstatus
+  isBanned = false
+  isNerfed = false
+  isBuffed = false
+
   static from(json: any): Card {
     return Object.assign(new Card(), json);
   }
@@ -112,6 +117,20 @@ export class Card {
     return this.id != -1
   }
 
+  setNerfStatus(status: NerfStatus) {
+    switch(status) {
+      case NerfStatus.BANNED:
+        this.isBanned = true
+        break
+      case NerfStatus.BUFFED:
+        this.isBuffed = true
+        break
+      case NerfStatus.NERFED:
+        this.isNerfed = true
+        break
+    }
+  }
+
   toChainCard(): ChainCard {
     console.log("trying to parse ", this);
     let cardContent = Object.assign(new CardContent(), {
@@ -211,3 +230,15 @@ class CardContent {
   Keywords: Array<string> = [];
   Effects: Array<any> = [];
 }
+
+export enum NerfStatus {
+  BANNED = 0,
+  BUFFED = 1,
+  NERFED = 2,
+}
+
+export namespace NerfStatus {
+  export function fromString(status: string): NerfStatus | undefined {
+    return {bann: NerfStatus.BANNED, buff: NerfStatus.BUFFED, nerf: NerfStatus.NERFED}[status]
+  }
+}
diff --git a/src/model/User.ts b/src/model/User.ts
deleted file mode 100644
index 01da7317..00000000
--- a/src/model/User.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export class User {
-  ReportMatches: boolean = false
-  airDrops: AirDrops = new AirDrops()
-  alias: string = ""
-  biography: string = ""
-  boosterPacks: Array<any> = []
-  cards: Array<number> = []
-  councilParticipation: CouncilParticipation = new CouncilParticipation()
-  ownedCardSchemes: Array<number> = []
-  CouncilStatus: string = ""
-  ownedPrototypes: Array<number> = []
-  profileCard: number = 0
-  voteRights: Array<any> = []
-  website: string = ""
-
-  static from(json: any) {
-    let user: User = Object.assign(new User(), json);
-    user.airDrops = AirDrops.from(json.airDrops)
-    //user.councilParticipation = CouncilParticipation.from(json.councilParticipation)
-    return user
-  }
-}
-
-class AirDrops {
-  vote: boolean = false
-  create: boolean = false
-  buy: boolean = false
-  play: boolean = false
-  user: boolean = false
-
-  static from(json: any) {
-    return Object.assign(new AirDrops(), json);
-  }
-}
-
-class CouncilParticipation {
-  council: number = 0
-  status: string = ""
-
-  static from(json: any) {
-    let cp = Object.assign(new CouncilParticipation(), json);
-    cp.council = parseInt(json.council)
-    return cp
-  }
-}
\ No newline at end of file
diff --git a/src/views/AdvancedCardViewPage.vue b/src/views/AdvancedCardViewPage.vue
index 5d5f82b6..451090a3 100644
--- a/src/views/AdvancedCardViewPage.vue
+++ b/src/views/AdvancedCardViewPage.vue
@@ -1,121 +1,90 @@
 <template>
   <div align="center">
     <h1 class="header__h2">
-      {{ card.CardName }}
+      {{ state.card.CardName }}
     </h1>
-    <a
-      v-if="card.FlavourText"
-      class="FlavourText"
-    >"{{ card.FlavourText }}"</a>
-    <br><br>
+    <a v-if="state.card.FlavourText" class="FlavourText">"{{ state.card.FlavourText }}"</a>
+    <br /><br />
     <div class="Container">
       <!-- Keyword Element -->
-      <div
-        class="Element"
-        align="left"
-      >
+      <div class="Element" align="left">
         <h3>Used Keywords</h3>
-        <br>
-        <keyword-component
-          :keywords="card.Keywords"
-        />
+        <br />
+        <keyword-component :keywords="state.card.Keywords" />
       </div>
       <!-- Card Element -->
       <div class="ELement">
-        <CardComponent
-          :id="'card'"
-          :model="card"
-          :image-u-r-l="card.image"
-        />
+        <CardComponent :id="'card'" :model="state.card" :image-u-r-l="state.card.image" />
       </div>
       <!-- Basic Element -->
-      <div
-        class="Element"
-        align="left"
-      >
+      <div class="Element" align="left">
         <!-- General -->
         <h3>Advanced Card Information</h3>
         <a>
-          Votepool: {{ card.votePool.normalize().pretty() }} <br>
-          Status: {{ card.status }} <br>
-          Notes: {{ card.notes }} <br>
+          Votepool: {{ state.card.votePool.normalize().pretty() }} <br />
+          Status: {{ state.card.status }} <br />
+          Notes: {{ state.card.notes }} <br />
           Owner:
           <router-link
-            v-if="card.owner"
-            :to="{name: 'UserView', params: {id: card.owner} }"
+            v-if="state.card.owner"
+            :to="{ name: 'UserView', params: { id: state.card.owner } }"
           >
-            {{ card.owner }}
+            {{ state.card.owner }}
           </router-link>
-          <br>
+          <br />
           Artist:
           <router-link
-            v-if="card.artist"
-            :to="{name: 'UserView', params: {id: card.artist} }"
+            v-if="state.card.artist"
+            :to="{ name: 'UserView', params: { id: state.card.artist } }"
           >
-            {{ card.artist }}
-          </router-link>
-        </a><br> <br>
+            {{ state.card.artist }}
+          </router-link> </a
+        ><br />
+        <br />
         <!-- Voting -->
         <h3>Latest Voting Results</h3>
         <a>
-          Inappropriate Votes: {{ card.inappropriateVotes }} <br>
-          Underpowered Votes: {{ card.underpoweredVotes }} <br>
-          Overpowered Votes: {{ card.overpoweredVotes }} <br>
-          Fair Enough Votes: {{ card.fairEnoughVotes }} <br>
-          Nerflevel: {{ card.nerflevel }} <br>
-        </a> <br>
+          Inappropriate Votes: {{ state.card.inappropriateVotes }} <br />
+          Underpowered Votes: {{ state.card.underpoweredVotes }} <br />
+          Overpowered Votes: {{ state.card.overpoweredVotes }} <br />
+          Fair Enough Votes: {{ state.card.fairEnoughVotes }} <br />
+          Nerflevel: {{ state.card.nerflevel }} <br />
+        </a>
+        <br />
         <div class="ccbutton">
-          <button
-            v-if="canVote"
-            @click="vote('underpowered');"
-          >
+          <button v-if="canVote" @click="vote(VoteType.underpowered)">
             Vote Underpowered
           </button>
-          <button
-            v-if="canVote"
-            @click="vote('overpowered');"
-          >
+          <button v-if="canVote" @click="vote(VoteType.overpowered)">
             Vote Overpowered
           </button>
           <button
             v-if="canVote"
             class="btn--default"
-            @click="vote('fair_enough');"
+            @click="vote(VoteType.fairEnough)"
           >
             Vote Fair Enough
           </button>
           <button
             v-if="canVote"
             class="btn--default"
-            @click="vote('inappropriate');"
+            @click="vote(VoteType.inappropriate)"
           >
             Vote Inappropriate
           </button>
-          <br><br>
-          <button
-            v-if="isArtist"
-            class="btn--default"
-            @click="edit();"
-          >
+          <br /><br />
+          <button v-if="isArtist" class="btn--default" @click="edit()">
             Edit artwork
           </button>
-          <button
-            v-if="isOwner"
-            class="btn--default"
-            @click="edit();"
-          >
+          <button v-if="isOwner" class="btn--default" @click="edit()">
             Edit card
           </button>
-          <button
-            v-if="isOwner"
-            class="btn--default"
-            @click="showModal()"
-          >
+          <button v-if="isOwner" class="btn--default" @click="showModal()">
             Transfer card
           </button>
           <TransferCardModal
-            v-show="isModalVisible"
-            :card="String(id)"
+            v-show="state.isModalVisible"
+            :card="String(state.id)"
             @close="closeModal"
           />
         </div>
@@ -124,112 +93,76 @@
   </div>
 </template>
 
-<script lang="ts">
-import * as R from "ramda";
+<script setup lang="ts">
 import CardComponent from "@/components/elements/CardComponent.vue";
 import TransferCardModal from "@/components/modals/TransferCardModal.vue";
 import KeywordComponent from "@/components/elements/KeywordComponent.vue";
-import { useTx } from "@/def-composables/useTx";
 import { useQuery } from "@/def-composables/useQuery";
 import { useAddress } from "@/def-composables/useAddress";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { Card } from "@/model/Card";
 import { useCardCreatorCards } from "@/def-composables/useCardCreatorCards";
+import { computed, onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import {
+  VoteType
+} from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting";
+import { useVoting } from "@/def-composables/useVoting";
+import { useCards } from "@/def-composables/useCards";
 
+const { queryQCard } = useQuery();
+const { editCard } = useCardCreatorCards();
+const { address } = useAddress();
+const { loggedIn } = useLoggedIn();
+const { add, send, isEmpty, cardsLeft, current } = useVoting();
+const { getCard } = useCards()
+const route = useRoute();
+const router = useRouter()
 
-export default {
-  name: "CardView",
-  components: { CardComponent, TransferCardModal, KeywordComponent },
-  data() {
-    return {
-      isModalVisible: false,
-      id: 0,
-      isOwner: false,
-      isArtist: false,
-      canVote: false,
-      card: new Card()
-    };
-  },
-  setup() {
-    const { voteCard } = useTx();
-    const { queryQCard, queryQVotableCards } = useQuery();
-    const { editCard } = useCardCreatorCards();
-    const { address } = useAddress();
-    const { loggedIn } = useLoggedIn();
+const initialState: {
+  isModalVisible: boolean;
+  id: number;
+  card: Card;
+} = {
+  isModalVisible: false,
+  id: -1,
+  card: new Card(),
+};
 
-    return { voteCard, address, loggedIn, queryQCard, queryQVotableCards, cardCreatorEditCard: editCard.card };
-  },
-  watch: {
-    loggedIn() {
-      if (this.loggedIn) {
-        this.loadVotableCards();
-      } else {
-        this.isOwner = false;
-        this.isArtist = false;
-        this.canVote = false;
-      }
-    }
-  },
-  mounted() {
-    this.id = parseInt(String(this.$route.params.id));
-    if (!isNaN(this.id)) {
-      this.getCard();
-    }
-  },
-  methods: {
-    loadVotableCards() {
-      this.isOwner = this.card.owner === this.address;
-      this.isArtist = this.card.artist === this.address;
-      this.queryQVotableCards(this.address)
-        .then(res => {
-          console.log(res);
-          let votableCards = [];
-          if (!res.noVoteRights) {
-            votableCards = res.voteRights;
-          }
-          this.canVote = false;
-          if (!R.isEmpty(votableCards)) {
-            for (let i = 0; i < votableCards.length; i++) {
-              if (votableCards[i].cardId == this.id) {
-                this.canVote = true;
-                break;
-              }
-            }
-          }
-        });
-    },
-    getCard() {
-      this.queryQCard(this.id)
-        .then((res: Card) => {
-          this.card = res;
-          if (this.loggedIn) {
-            this.loadVotableCards();
-          }
-        })
-        .catch(err => {
-          console.log(err);
-          this.$router.push({ name: "NotFound" });
-        });
-    },
-    vote(type) {
-      this.voteCard(this.id, type, _ => {
-        this.loadVotableCards();
-      }, () => {
-      });
-    },
-    edit() {
-      this.card.id = this.id;
-      this.cardCreatorEditCard = this.card;
-      this.$router.push("/cardCreator");
-    },
-    showModal() {
-      this.isModalVisible = true;
-    },
-    closeModal() {
-      this.isModalVisible = false;
-      this.getCard();
-    }
+const state = reactive(initialState);
+const canVote = computed(() => cardsLeft.value.includes(state.id))
+const isOwner = computed(() => state.card.owner === address.value && loggedIn.value);
+const isArtist = computed(() => state.card.artist === address.value && loggedIn.value)
+
+onMounted(() => {
+  state.id = parseInt(route.params.id as string);
+  if (!isNaN(state.id)) {
+    loadCard();
   }
+});
+
+const loadCard = async () => {
+  state.card = await getCard(state.id)
+};
+const vote = (type: VoteType) => {
+  add(state.id, type);
+  send(
+    () => {},
+    (err) => {
+      console.log(err);
+    }
+  );
+  close();
+};
+const edit = () => {
+  state.card.id = state.id;
+  editCard.card.value = state.card;
+  router.push("/cardCreator");
+};
+const showModal = () => state.isModalVisible = true
+const closeModal = () => {
+  state.isModalVisible = false;
+  loadCard();
 };
 </script>
 
@@ -266,5 +199,4 @@ h3 {
     color: white;
   }
 }
-
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/CardCreatorPage.vue b/src/views/CardCreatorPage.vue
index f8eb3bea..8cf8bb8f 100644
--- a/src/views/CardCreatorPage.vue
+++ b/src/views/CardCreatorPage.vue
@@ -1083,7 +1083,7 @@ export default {
         )
         return
       }
-      if (this.designateArtist && !this.$cardChain.validAddress(this.artistAddress)) {
+      if (this.designateArtist && !validAddress(this.artistAddress)) {
         this.notifyFail(
           "Invalid Address",
           "The address given for designated artist is invalid."
diff --git a/src/views/GalleryPage.vue b/src/views/GalleryPage.vue
index 4370e14c..f5f1142f 100644
--- a/src/views/GalleryPage.vue
+++ b/src/views/GalleryPage.vue
@@ -1,21 +1,14 @@
 <template>
   <div class="gallery">
-    <h2 class="header__h2">
-      Gallery
-    </h2>
+    <h2 class="header__h2">Gallery</h2>
     <p class="header__p">
       In the gallery, you can view cards that were created by the community.
     </p>
-    <br>
-    <div
-      v-show="galleryFilters.visible"
-      class="gallery__filter-box ccbutton"
-    >
+    <br />
+    <div v-show="galleryFilters.visible" class="gallery__filter-box ccbutton">
       <div class="gallery__filter__item">
         <select v-model="galleryFilters.status">
-          <option value="">
-            any card status
-          </option>
+          <option value="">any card status</option>
           <option>Prototype</option>
           <option>Trial</option>
           <option>Permanent</option>
@@ -25,9 +18,7 @@
       </div>
       <div class="gallery__filter__item">
         <select v-model="galleryFilters.cardType">
-          <option value="">
-            any card type
-          </option>
+          <option value="">any card type</option>
           <option>Headquarter</option>
           <option>Entity</option>
           <option>Action</option>
@@ -36,9 +27,7 @@
       </div>
       <div class="gallery__filter__item">
         <select v-model="galleryFilters.sortBy">
-          <option value="">
-            default sort
-          </option>
+          <option value="">default sort</option>
           <option>Name (A-Z)</option>
           <option>Name (Z-A)</option>
           <option>Casting Cost (↑)</option>
@@ -52,7 +41,7 @@
           <input
             v-model="galleryFilters.nameContains"
             placeholder="Name contains"
-          >
+          />
         </div>
       </div>
       <div>
@@ -60,21 +49,21 @@
           <input
             v-model="galleryFilters.keywordsContains"
             placeholder="Ability/Effect contains"
-          >
+          />
         </div>
       </div>
       <div class="gallery__filter__item">
         <input
           v-model="galleryFilters.notesContains"
           placeholder="Notes contain"
-        >
+        />
       </div>
       <div class="gallery__filter__item">
         <input
           v-model="galleryFilters.owner"
           placeholder="Owner is"
-          @click="galleryFilters.owner = getOwnAddress()"
-        >
+          @click="galleryFilters.owner = address"
+        />
       </div>
 
       <div class="gallery__filter__item">
@@ -84,10 +73,12 @@
               v-model="galleryFilters.classesVisible"
               class="gallery-checkbox"
               type="checkbox"
-              @input="galleryFilters.classesVisible = !galleryFilters.classesVisible "
-            >
+              @input="
+                galleryFilters.classesVisible = !galleryFilters.classesVisible
+              "
+            />
             Filter classes
-            <br>
+            <br />
           </label>
         </div>
 
@@ -96,33 +87,42 @@
           class="clickable-option"
           @click="galleryFilters.classORLogic = !galleryFilters.classORLogic"
         >
-          <br><br>
-          {{ galleryFilters.classORLogic? "Any: " : "All: " }}
+          <br /><br />
+          {{ galleryFilters.classORLogic ? "Any: " : "All: " }}
         </span>
         <span
           v-if="galleryFilters.classesVisible"
-          :class="{ 'clickable-option': true, 'negated': !galleryFilters.mysticism }"
+          :class="{
+            'clickable-option': true,
+            negated: !galleryFilters.mysticism,
+          }"
           @click="galleryFilters.mysticism = !galleryFilters.mysticism"
         >
           Mysticism
         </span>
         <span
           v-if="galleryFilters.classesVisible"
-          :class="{ 'clickable-option': true, 'negated': !galleryFilters.technology }"
+          :class="{
+            'clickable-option': true,
+            negated: !galleryFilters.technology,
+          }"
           @click="galleryFilters.technology = !galleryFilters.technology"
         >
           Technology
         </span>
         <span
           v-if="galleryFilters.classesVisible"
-          :class="{ 'clickable-option': true, 'negated': !galleryFilters.nature }"
+          :class="{ 'clickable-option': true, negated: !galleryFilters.nature }"
           @click="galleryFilters.nature = !galleryFilters.nature"
         >
           Nature
         </span>
         <span
           v-if="galleryFilters.classesVisible"
-          :class="{ 'clickable-option': true, 'negated': !galleryFilters.culture }"
+          :class="{
+            'clickable-option': true,
+            negated: !galleryFilters.culture,
+          }"
           @click="galleryFilters.culture = !galleryFilters.culture"
         >
           Culture
@@ -133,429 +133,177 @@
         <input
           placeholder="cards per page"
           @input="galleryFilters.cardsPerPage = $event.target.value"
-        >
+        />
       </div>
       <div class="gallery__filter__item">
-        <button
-          @click="resetFilters"
-        >
-          Clear Filters
-        </button>
+        <button @click="resetFilters">Clear Filters</button>
       </div>
       <div class="gallery__filter__item">
-        <button @click="loadCardList">
-          Apply
-        </button>
+        <button @click="loadCardList">Apply</button>
       </div>
     </div>
     <div class="button-container button-container--top ccbutton">
-      <button
-        v-show="browsingBackward"
-        @click="prevPage"
-      >
-        back
-      </button>
-      <button
-        @click="toggleGalleryFilters"
-      >
+      <button @click="toggleGalleryFilters">
         {{ galleryFilters.visible ? "hide" : "show" }}
         filters
       </button>
+      <button v-show="loggedIn" @click="loadMyCardList()">My Cards</button>
       <button
-        v-show="loggedIn"
-        @click="loadMyCardList()"
-      >
-        My Cards
-      </button>
-      <button
-        v-show="$route.query.notesContains!='Finished'"
+        v-show="$route.query.notesContains != 'Finished'"
         @click="loadSpecialCardList('Finished')"
       >
         Alpha Set
       </button>
       <button
-        v-show="$route.query.notesContains=='Finished'"
+        v-show="$route.query.notesContains == 'Finished'"
         @click="loadSpecialCardList('')"
       >
         All Cards
       </button>
-      <button
-        v-show="browsingForward"
-        @click="nextPage"
-      >
-        next
-      </button>
-    </div>
-    <div class="gallery__view">
-      <div
-        v-for="(card, index) in cards"
-        :key="index"
-        @click="
-          clickedIndex = index;
-          showGalleryModal();
-        "
-      >
-        <div
-          class="cardContainer"
-          @click="
-            showGalleryModal();
-            clickedIndex = index;
-          "
-        >
-          <div class="cardContainer--element">
-            <CardComponent
-              :id="'card' + index"
-              :model="card"
-              :image-u-r-l="card.image"
-              hover-behavior="none"
-              class="gallery__view__card"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="button-container button-container--bottom ccbutton">
-      <button
-        v-show="browsingBackward"
-        @click="prevPage"
-      >
-        back
-      </button>
-      <button
-        v-show="browsingForward"
-        @click="nextPage"
-      >
-        next
-      </button>
-    </div>
-    <div
-      v-if="isGalleryModalVisible"
-      class="container-modal"
-      @click="closeGalleryModal"
-    >
-      <div class="ability-modal-container">
-        <GalleryModal
-          :can-vote="canVote"
-          :is-owner="isOwner"
-          :is-artist="isArtist"
-          :keyword-descriptions="keywordDescriptions"
-          :model="cards[clickedIndex]"
-          :image-u-r-l="cards[clickedIndex].image"
-          @close="closeGalleryModal"
-          @download="downloadPng"
-          @cardview="cardview"
-          @edit="edit"
-          @voteOP="vote('overpowered')"
-          @voteUP="vote('underpowered')"
-          @voteFair="vote('fair_enough')"
-          @voteInappropriate="vote('inappropriate')"
-        />
-      </div>
     </div>
+    <GalleryComponent
+      :cards-per-page="galleryFilters.cardsPerPage"
+      :all-card-ids="state.cardList"
+    />
   </div>
 </template>
 
-<script lang=ts>
+<script setup lang="ts">
 import * as R from "ramda";
-import GalleryModal from "@/components/modals/GalleryModal.vue";
-import CardComponent from "@/components/elements/CardComponent.vue";
-import { saveCardAsPng } from "@/components/utils/utils.js";
 import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useAddress } from "@/def-composables/useAddress";
-import { useGalleryFilters, resetGalleryFilters } from "@/def-composables/useGalleryFilters";
-import { useLastInputEvent } from '@/def-composables/useLastInputEvent.ts'
+import { useGalleryFilters } from "@/def-composables/useGalleryFilters";
 import { useQuery } from "@/def-composables/useQuery";
-import { useCardsRules } from "@/def-composables/useCardRules";
-import { useCardCreatorCards } from "@/def-composables/useCardCreatorCards";
-
-const { queryQCards, queryQCard } = useQuery()
-
-export default {
-  name: "GalleryPage",
-  components: { CardComponent, GalleryModal },
-  beforeRouteLeave(to, from, next) {
-    if (this.leavePageLock) next(false);
-    else next();
-  },
-  data() {
-    return {
-      clickedIndex: 0,
-      isGalleryModalVisible: false,
-      pageId: 0,
-      cardList: [],
-      cards: [],
-      browsingForward: true,
-      browsingBackward: true,
-      canVote: false,
-      isOwner: false,
-      isArtist: false,
-      leavePageLock: false,
-      keywordDescriptions: [],
-      votableCards: []
-    };
-  },
-  // this watch together with the following beforeRouteLeave make browsing
-  // through the Gallery with mouse back and forward (x1, x2) buttons possible
-  watch: {
-    lastInputEvent() {
-      let event = this.lastInputEvent;
-
-      if (event.which == 5) {
-        this.leavePageLock = true // Forward Mouse special button
-        this.nextPage()
-      } else if (event.which == 4) { // Backward Mouse special button
-        this.leavePageLock = true
-        this.prevPage()
-      } else if (event.which == 13) { // Enter
-        this.loadCardList()
-      } else {
-        this.leavePageLock = false
-      }
-    },
-    loggedIn (_, newLoggedIn) {
-      if (newLoggedIn) {
-        this.loadVotableCards()
-      }
-    }
-  },
-  setup() {
-    const { loggedIn } = useLoggedIn()
-    const { address } = useAddress()
-    const { rules } = useCardsRules()
-    const { editCard } = useCardCreatorCards()
-    const { queryQVotableCards } = useQuery()
-    const { galleryFilters, toggleGalleryFilters, resetGalleryFilters } = useGalleryFilters
-    const { lastInputEvent } = useLastInputEvent()
+import { onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import GalleryComponent from "@/components/elements/GalleryComponent.vue";
+
+const { queryQCards } = useQuery();
+const { loggedIn } = useLoggedIn();
+const { address } = useAddress();
+const { galleryFilters, toggleGalleryFilters, resetGalleryFilters } =
+  useGalleryFilters;
+const route = useRoute();
+const router = useRouter();
+
+type PageQuery = {
+  status: string;
+  owner: string;
+  cardType: string;
+  classes: string;
+  sortBy: string;
+  nameContains: string;
+  keywordsContains: string;
+  notesContains: string;
+};
 
-    return { lastInputEvent, loggedIn, address, queryQVotableCards, galleryFilters, toggleGalleryFilters, resetGalleryFilters, cardRules: rules, cardCreatorEditCard: editCard.card }
-  },
-  mounted() {
+const initialState: {
+  cardList: Array<number>;
+} = {
+  cardList: [],
+};
 
-    console.log("Yees galleryFilters", this.galleryFilters)
+const state = reactive(initialState);
 
-    let query = this.$route.query
-    if (!R.isEmpty(query)) {
-      if (query.cardList) {
-        this.cardList = query.cardList
-        this.fillPage()
-      } else {
-        this.loadQueryCardList(this.normalizeQuery(query))
-      }
+onMounted(() => {
+  if (!R.isEmpty(route.query)) {
+    if (route.query.cardList) {
+      state.cardList = (route.query.cardList as string[]).map((v) => Number(v));
     } else {
-      this.loadCardList()
+      loadQueryCardList(normalizeQuery(route.query as PageQuery));
     }
+  } else {
+    loadCardList();
+  }
+});
+
+
+const loadCardList = () => loadQueryCardList(getDefaultQuery())
+
+const normalizeQuery = (query: PageQuery): PageQuery => {
+  return {
+    status: query.status ? query.status.toLowerCase() : "playable", // default playable
+    owner: query.owner ? query.owner : "",
+    cardType: query.cardType ? query.cardType : "",
+    classes: query.classes ? query.classes : "",
+    sortBy: query.sortBy
+      ? query.sortBy.replace(/\s+/g, "").replace(/\(.*?\)/g, "")
+      : "",
+    nameContains: query.nameContains ? query.nameContains : "",
+    keywordsContains: query.keywordsContains ? query.keywordsContains : "",
+    notesContains: query.notesContains
+      ? query.notesContains
+      : query.status ||
+        query.owner ||
+        query.cardType ||
+        query.classes ||
+        query.sortBy ||
+        query.nameContains ||
+        query.keywordsContains ||
+        query.notesContains
+      ? ""
+      : loggedIn.value
+      ? ""
+      : "Finished", // non-logged in users (noobs), without any filters, will only see the alpha set
+  };
+};
 
-    this.loadVotableCards()
-  },
-  methods: {
-    loadVotableCards() {
-      if(this.loggedIn) {
-        this.queryQVotableCards(this.address)
-        .then((res) => {
-          if (res.noVoteRights) {
-            this.votableCards = []
-          } else {
-            this.votableCards = res
-          }
-        })
-      }
-      else {
-        this.votableCards = [];
-      }
-
-    },
-    loadCardList() {
-      let query = this.getDefaultQuery()
-      this.loadQueryCardList(query)
-    },
-    getCard(currentId) {
-      let cardId = this.cardList[
-        this.cardList.length - 1 - this.pageId - currentId
-      ];
-      return queryQCard(cardId)
-        .then((res) => {
-          let card = res
-          card.id = cardId
-          if (card.Content) {
-            let candidate = card
-            this.cards.push(candidate)
-            return candidate
-          } else if (!card.owner) {
-            console.error("card without content and owner: ", res)
-            return res
-          } else {
-            console.error("card without content: ", res)
-            return res
-          }
-        })
-    },
-    normalizeQuery(query) {
-      return {
-        status: query.status ? query.status.toLowerCase() : "playable", // default playable
-        owner: query.owner ? query.owner : "",
-        cardType: query.cardType ? query.cardType : "",
-        classes: query.classes ? query.classes : "",
-        sortBy: query.sortBy ? query.sortBy.replace(/\s+/g, "").replace(/\(.*?\)/g, "") : "",
-        nameContains: query.nameContains ? query.nameContains : "",
-        keywordsContains: query.keywordsContains ? query.keywordsContains : "",
-        notesContains: query.notesContains ? query.notesContains :
-          query.status || query.owner || query.cardType || query.classes || query.sortBy || query.nameContains || query.keywordsContains || query.notesContains ? "" :
-          this.loggedIn ? "" : "Finished" // non-logged in users (noobs), without any filters, will only see the alpha set
-      }
-    },
-    fillPage() {
-      if (this.pageId + this.galleryFilters.cardsPerPage >= this.cardList.length)
-        this.browsingForward = false;
-      else this.browsingForward = true;
-      if (this.pageId <= 0) this.browsingBackward = false;
-      else this.browsingBackward = true;
-
-      let requestedCards = R.map(n => this.getCard(n),
-          R.times(R.identity, R.min(this.galleryFilters.cardsPerPage, this.cardList.length - this.pageId))
-        )
-
-      Promise.all(requestedCards)
-      .then((res) => {
-        // here the asynchronous order of this.cards gets overwritten by the ordered requestedCards,
-        // therefore the clickedindex must be adjusted (if something was clicked)
-        if (!R.equals(this.cards[this.clickedIndex], res[this.clickedIndex] )) {
-          this.clickedIndex = R.findIndex(R.propEq('id', this.cards[this.clickedIndex].id))(res)
-        }
-        this.cards = res
-        console.log("cards on page", this.cards)
-        console.log("all card names:", R.pluck("CardName", res))
-      })
-      .catch(res => {
-        console.error("NOT ALL CARDS WERE PROPERLY LOADED")
-        console.log("all card names:", R.pluck("CardName", res))
-      })
-    },
-    nextPage() {
-      if (!this.browsingForward) return;
-
-      this.pageId += this.galleryFilters.cardsPerPage;
-      this.cards = [];
-      this.fillPage();
-      window.scrollTo(0, 0)
-    },
-    prevPage() {
-      if (!this.browsingBackward) return;
-
-      this.pageId -= this.galleryFilters.cardsPerPage;
-      this.cards = [];
-      this.fillPage();
-      window.scrollTo(0, 0);
-    },
-    showGalleryModal() {
-      this.isGalleryModalVisible = true
-
-      if (!R.isEmpty(this.votableCards)) {
-        this.canVote = R.any(
-          (x) => x == this.cards[this.clickedIndex].id,
-          R.pluck("cardId", this.votableCards.voteRights)
-        )
-      }
-
-      this.isOwner =
-        this.cards[this.clickedIndex].owner === this.address
-
-      this.keywordDescriptions = []
-      let firstLetterToLower = string => {
-        return string[0].toLowerCase() + string.substring(1)
-      }
-      this.cards[this.clickedIndex].Keywords.forEach(ability => {
-        ability.forEach(keyword => {
-          this.keywordDescriptions.push([keyword, this.cardRules.definitions[firstLetterToLower(keyword)].description])
-        })
-      })
-    },
-    closeGalleryModal() {
-      this.isGalleryModalVisible = false;
-    },
-    loadMyCardList() {
-      this.loadSpecialCardList(this.galleryFilters.notes, this.address)
-    },
-    getDefaultQuery() {
-      let classes =
-        (this.galleryFilters.classORLogic ? "OR," : "") +
-        (this.galleryFilters.mysticism ? "Mysticism," : "") +
-        (this.galleryFilters.nature ? "Nature," : "") +
-        (this.galleryFilters.technology ? "Technology," : "") +
-        (this.galleryFilters.culture ? "Culture," : "")
+const loadMyCardList = () =>
+  loadSpecialCardList(galleryFilters.notesContains, address.value);
+const getDefaultQuery = (): PageQuery => {
+  let classes =
+    (galleryFilters.classORLogic ? "OR," : "") +
+    (galleryFilters.mysticism ? "Mysticism," : "") +
+    (galleryFilters.nature ? "Nature," : "") +
+    (galleryFilters.technology ? "Technology," : "") +
+    (galleryFilters.culture ? "Culture," : "");
+
+  let q = galleryFilters;
+  q.classes = q.classesVisible ? classes : "";
+  return normalizeQuery(q);
+};
+const loadSpecialCardList = (notes: string, owner: string = "") => {
+  let q = getDefaultQuery();
+  q.notesContains = notes;
+  if (owner) {
+    q.owner = owner;
+  }
+  loadQueryCardList(q);
+};
+const loadQueryCardList = (query: PageQuery) => {
+  router.push({ path: "gallery", query: query });
+
+  let requestedCards = [
+    queryQCards(query.status, {
+      owner: query.owner,
+      cardType: query.cardType,
+      classes: query.classes,
+      sortBy: query.sortBy,
+      nameContains: query.nameContains,
+      keywordsContains: query.keywordsContains,
+      notesContains: query.notesContains,
+    }),
+  ];
+  Promise.all(requestedCards)
+    .then((res) => {
+      let cardList: number[] = R.reduce<unknown, number[]>(
+        R.concat,
+        [],
+        R.pluck("cardsList", res)
+      );
 
-      let query = this.galleryFilters
-      query.classes = query.classesVisible ? classes : ""
-      return this.normalizeQuery(query)
-    },
-    loadSpecialCardList(notes, owner) {
-      var query = this.getDefaultQuery()
-      query.notesContains = notes
-      if (owner) {
-        query.owner = owner
+      if (R.any((x) => R.includes(x, galleryFilters.sortBy), ["A-Z", "↑"])) {
+        state.cardList = R.reverse(cardList).map((v) => Number(v));
+      } else {
+        state.cardList = R.reverse(cardList);
       }
-      this.loadQueryCardList(query)
-    },
-    loadQueryCardList(query) {
-      this.$router.push({ path: 'gallery', query: query })
-
-      let requestedCards = [
-        queryQCards(
-        query.status,
-        {
-          owner: query.owner,
-          cardType: query.cardType,
-          classes: query.classes,
-          sortBy: query.sortBy,
-          nameContains: query.nameContains,
-          keywordsContains: query.keywordsContains,
-          notesContains: query.notesContains
-        }
-      )
-      ]
-      Promise.all(requestedCards)
-      .then((res) => {
-        let cardList = R.reduce(R.concat, [], R.pluck("cardsList", res))
-
-        if (R.any(x => R.includes(x, this.galleryFilters.sortBy), ["A-Z", "↑"])) {
-          this.cardList = R.reverse(cardList)
-        }
-        else {
-          this.cardList = cardList
-        }
-        this.pageId = 0
-        this.cards = []
-      })
-      .then(() => {
-        this.fillPage()
-      })
-    },
-    edit() {
-      this.cardCreatorEditCard = this.cards[this.clickedIndex]
-      this.$router.push("cardCreator")
-    },
-    cardview() {
-      this.$router.push('cardview/' + this.cards[this.clickedIndex].id)
-    },
-    downloadPng() {
-      saveCardAsPng(
-        document.getElementById("card" + this.clickedIndex),
-        this.cards[this.clickedIndex].CardName
-      );
-    },
-    vote(type) {
-      this.add(this.cards[this.clickedIndex].id, type)
-      this.notifyInfo("Vote saved", "Don't forget to send your votes on the Voting page!")
-    },
-    getOwnAddress() {
-      return this.address // TODO is this needed?
-    },
-    resetFilters() {
-      console.log("reset filters")
-      this.resetGalleryFilters()
+    })
+};
 
-      this.loadCardList()
-    },
-  },
+const resetFilters = () => {
+  console.log("reset filters");
+  resetGalleryFilters();
+  loadCardList();
 };
 </script>
 
@@ -616,19 +364,10 @@ export default {
   display: flex;
 }
 
-.cardContainer--element {
-  position: relative;
-  flex-grow: 1;
-  max-width: 350px;
-}
-
 .button-container--top {
   margin-bottom: 2rem;
 }
 
-.button-container--bottom {
-  margin-top: 2rem;
-}
 .container-modal {
   position: fixed;
   z-index: 4;
@@ -639,31 +378,18 @@ export default {
   background-color: rgba(0, 0, 0, 0.5);
   transition: opacity 0.3s ease;
   @media (max-width: 480px) {
-    bottom:0;
+    bottom: 0;
     overflow-y: scroll;
   }
 }
+
 .gallery-checkbox {
   position: absolute;
   display: inline-block;
   margin-left: -25px;
 }
+
 .gallery-checkbox__label {
-margin-left: 25px;
+  margin-left: 25px;
 }
-.ability-modal-container {
-  margin: auto;
-  margin-top: 5vh;
-  max-width: 800px;
-  max-height: 95vh;
-  @media (max-width: 480px) {
-    margin-top: 0;
-    max-height:300vh;
-    height:auto;
-  }
-  //OLD:
-  // position: relative;
-   z-index: 3;
-}
-
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/UserView.vue b/src/views/UserView.vue
index b136dc5c..4c365929 100644
--- a/src/views/UserView.vue
+++ b/src/views/UserView.vue
@@ -3,7 +3,7 @@
     <div class="ppBox">
       <div v-show="state.img">
         <div class="ppImage">
-          <img :src="state.img"/>
+          <img :src="state.img" />
         </div>
         <button v-if="state.userIsUser" @click="showChooseModal">
           <img src="@/assets/edit.svg" />
@@ -60,7 +60,7 @@
 
       <br />
       <div>
-        Vote rights: {{ state.user.voteRights.length }} <br />
+        Vote rights: {{ state.user.votableCards.length }} <br />
         <button v-if="state.userIsUser" @click="$router.push({ name: 'Vote' })">
           Vote
         </button>
@@ -76,7 +76,12 @@
           </div>
         </div>
         <br />
-        <button v-if="state.userIsUser" type="button" class="btn" @click="showModal">
+        <button
+          v-if="state.userIsUser"
+          type="button"
+          class="btn"
+          @click="showModal"
+        >
           Transfer
         </button>
       </div>
@@ -96,7 +101,7 @@
       <GrantModal v-if="state.isGrantModalVisible" @close="closeGrantModal" />
       <ChoosePBModal
         v-if="state.isChooseModalVisible"
-        :cards="state.user.ownedPrototypes"
+        :cardIds="state.user.ownedPrototypes"
         @close="closeChooseModal"
       />
       <AirdropsModal
@@ -118,13 +123,19 @@ import { useLoggedIn } from "@/def-composables/useLoggedIn";
 import { useQuery } from "@/def-composables/useQuery";
 import { validAddress } from "@/utils/validation";
 import { useTx } from "@/def-composables/useTx";
-import { User } from "@/model/User";
 import { useProfilePic } from "@/def-composables/useProfilePic";
 import type { Coin } from "@/model/Coin";
 import { normalizeCoins } from "@/utils/utils";
-import { computed, type ComputedRef, onMounted, reactive, type Ref, ref, watch } from "vue";
+import {
+  computed,
+  type ComputedRef,
+  onMounted,
+  reactive,
+  watch,
+} from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useUser } from "@/def-composables/useUser";
+import { User } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/user";
 
 const { queryQUser, queryAllBalances } = useQuery();
 const { registerForCouncil, rewokeCouncilRegistration } = useTx();
@@ -132,7 +143,7 @@ const { address } = useAddress();
 const { loggedIn } = useLoggedIn();
 const { getImg } = useProfilePic();
 const { user, coins, queryCoins, queryUser } = useUser();
-const { loggedInProfilePic } = useProfilePic()
+const { loggedInProfilePic } = useProfilePic();
 const route = useRoute();
 const router = useRouter();
 
@@ -144,15 +155,15 @@ const initialState: {
   addr: string;
   user: User;
   coins: Array<Coin>;
-  userIsUser: ComputedRef<boolean>
-  img: string
+  userIsUser: ComputedRef<boolean>;
+  img: string;
 } = {
   isChooseModalVisible: false,
   isAirdropsModalVisible: false,
   isModalVisible: false,
   isGrantModalVisible: false,
   addr: "",
-  user: new User(),
+  user: User.fromPartial({}),
   coins: new Array<Coin>(),
   userIsUser: computed(() => loggedIn.value && state.addr == address.value),
   img: "jaja",
@@ -168,7 +179,7 @@ watch(coins, (val) => {
 });
 watch(loggedInProfilePic, (val) => {
   if (state.userIsUser) state.img = val;
-})
+});
 
 const init = () => {
   let id = route.params.id.toString();
@@ -186,7 +197,7 @@ const init = () => {
   if (state.userIsUser) {
     state.user = user.value;
     state.coins = normalizeCoins(coins.value);
-    state.img = loggedInProfilePic.value
+    state.img = loggedInProfilePic.value;
   }
 
   if (!validAddress(state.addr)) {
@@ -198,7 +209,7 @@ const init = () => {
   getCoins();
 };
 
-onMounted(init)
+onMounted(init);
 
 const getUser = () => {
   if (state.userIsUser) {
@@ -206,8 +217,8 @@ const getUser = () => {
   } else {
     queryQUser(state.addr).then((user) => {
       state.user = user;
-      getImg(state.user, state.addr).then(img => {
-        state.img = img
+      getImg(state.user, state.addr).then((img) => {
+        state.img = img;
       });
     });
   }
diff --git a/src/views/VotingResultsPage.vue b/src/views/VotingResultsPage.vue
index 65e67140..e189ef6c 100644
--- a/src/views/VotingResultsPage.vue
+++ b/src/views/VotingResultsPage.vue
@@ -1,409 +1,66 @@
 <template>
   <div class="gallery">
-    <h2 class="header__h2">
-      Voting Results
-    </h2>
+    <h2 class="header__h2">Voting Results</h2>
     <p class="header__p">
-      Here you can see the outome of the last week's voting. <br><br>
-      Total Votes: {{ TotalVotes }} <br>
-      Total <b>Fair Enough</b> Votes: {{ TotalFairEnoughVotes }} <br>
-      Total <b>Inappropriate</b> Votes: {{ TotalInappropriateVotes }} <br>
-      Total <b>Overpowered</b> Votes: {{ TotalOverpoweredVotes }} <br>
-      Total <b>Underpowered</b> Votes: {{ TotalUnderpoweredVotes }} <br> <br>
-      Nerfed Mana Costs are <span style="color: #ff0000">red</span> and buffed Mana Costs are <span style="color: #3CB38F">green</span>. <br>
+      Here you can see the outome of the last week's voting. <br /><br />
+      Total Votes: {{ state.data.totalVotes }} <br />
+      Total <b>Fair Enough</b> Votes: {{ state.data.totalFairEnoughVotes }} <br />
+      Total <b>Inappropriate</b> Votes: {{ state.data.totalInappropriateVotes }}
+      <br />
+      Total <b>Overpowered</b> Votes: {{ state.data.totalOverpoweredVotes }} <br />
+      Total <b>Underpowered</b> Votes: {{ state.data.totalUnderpoweredVotes }} <br />
+      <br />
+      Nerfed Mana Costs are <span style="color: #ff0000">red</span> and buffed
+      Mana Costs are <span style="color: #3cb38f">green</span>. <br />
       Banned Cards have their Mana Cost removed.
     </p>
-    <br>
-    <div class="button-container button-container--top">
-      <button
-        v-show="browsingBackward"
-        @click="prevPage"
-      >
-        back
-      </button>
-      <button
-        v-show="browsingForward"
-        @click="nextPage"
-      >
-        next
-      </button>
-    </div>
-
-    <div class="gallery__view">
-      <div
-        v-for="(card, index) in cards"
-        :key="index"
-        @click="
-          clickedIndex = index;
-          showGalleryModal();
-        "
-      >
-        <div
-          class="cardContainer"
-          @click="
-            showGalleryModal();
-            clickedIndex = index;
-          "
-        >
-          <div class="cardContainer--element">
-            <CardComponent
-              :id="'card' + index"
-              :model="card"
-              :image-u-r-l="card.image"
-              hover-behavior="none"
-              class="gallery__view__card"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="button-container button-container--bottom">
-      <button
-        v-show="browsingBackward"
-        @click="prevPage"
-      >
-        back
-      </button>
-      <button
-        v-show="browsingForward"
-        @click="nextPage"
-      >
-        next
-      </button>
-    </div>
-    <div
-      v-if="isGalleryModalVisible"
-      class="container-modal"
-      @click="closeGalleryModal"
-    >
-      <div class="ability-modal-container">
-        <GalleryModal
-          :can-vote="canVote"
-          :is-owner="isOwner"
-          :is-artist="isArtist"
-          :keyword-descriptions="keywordDescriptions"
-          :model="cards[clickedIndex]"
-          :image-u-r-l="cards[clickedIndex].image"
-          @close="closeGalleryModal"
-          @download="downloadPng"
-          @cardview="cardview"
-          @edit="edit"
-          @voteOP="vote('overpowered')"
-          @voteUP="vote('underpowered')"
-          @voteFair="vote('fair_enough')"
-          @voteInappropriate="vote('inappropriate')"
-        />
-      </div>
-    </div>
+    <br />
+    <GalleryComponent
+      :cards-per-page="50"
+      :all-card-ids="state.cardList"
+      :card-callback="cardCallback"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import * as R from "ramda";
+<script setup lang="ts">
+import { VotingResults } from "decentralcardgame-cardchain-client-ts/DecentralCardGame.cardchain.cardchain/types/cardchain/cardchain/voting"
 import { useQuery } from "@/def-composables/useQuery";
-import GalleryModal from "@/components/modals/GalleryModal.vue";
-import CardComponent from "@/components/elements/CardComponent.vue";
-import { useLastInputEvent } from '@/def-composables/useLastInputEvent'
-import { saveCardAsPng } from "@/components/utils/utils.js";
 import { useAddress } from "@/def-composables/useAddress";
 import { useVoting } from "@/def-composables/useVoting";
-import { useNotifications } from "@/def-composables/useNotifications";
-import { useGalleryFilters } from "@/def-composables/useGalleryFilters";
-const { notifyInfo, notifyFail, notifySuccess } = useNotifications()
-const { queryQCards, queryQCard } = useQuery()
-const { add } = useVoting()
-
-export default {
-  name: "VotingResultsPage",
-  components: { CardComponent, GalleryModal },
-  beforeRouteLeave(to, from, next) {
-    if (this.leavePageLock) next(false);
-    else next();
-  },
-  data() {
-    return {
-      clickedIndex: 0,
-      isGalleryModalVisible: false,
-      pageId: 0,
-      cardList: [],
-      cards: [],
-      browsingForward: true,
-      browsingBackward: true,
-      votableCards: [],
-      canVote: false,
-      isOwner: false,
-      isArtist: false,
-      leavePageLock: false,
-      keywordDescriptions: [],
-      TotalVotes: 0,
-      TotalFairEnoughVotes: 0,
-      TotalInappropriateVotes: 0,
-      TotalOverpoweredVotes: 0,
-      TotalUnderpoweredVotes: 0,
-    };
-  },
-  setup() {
-    const { address } = useAddress()
-    const { lastInputEvent } = useLastInputEvent()
-    const { queryQVotingResults } = useQuery()
-    const { galleryFilters } = useGalleryFilters
-    const { editCard } = useCardCreatorCards()
-
-    return { lastInputEvent, address, queryQVotingResults, cardCreatorEditCard: editCard.card  }
-  },
-  // this watch together with the following beforeRouteLeave make browsing
-  // through the Gallery with mouse back and forward (x1, x2) buttons possible
-  watch: {
-    lastInputEvent() {
-      let event = this.lastInputEvent;
-
-      if (event.which == 5) {
-        this.leavePageLock = true
-        this.nextPage()
-      } else if (event.which == 4) {
-        this.leavePageLock = true
-        this.prevPage()
-      } else if (event.which == 13) {
-        this.loadCardList()
-      } else {
-        this.leavePageLock = false
-      }
-    },
-  },
-  mounted() {
-    this.loadCardList()
-  },
-  methods: {
-    loadCardList() {
-      console.log(this.queryQVotingResults)
-      return this.queryQVotingResults({})
-        .then((res) => {
-          console.log("res", res)
-          this.TotalVotes = res.lastVotingResults.totalVotes
-          this.TotalFairEnoughVotes = res.lastVotingResults.totalFairEnoughVotes
-          this.TotalInappropriateVotes = res.lastVotingResults.totalInappropriateVotes
-          this.TotalOverpoweredVotes = res.lastVotingResults.totalOverpoweredVotes
-          this.TotalUnderpoweredVotes = res.lastVotingResults.totalUnderpoweredVotes
-          this.cardList = res.lastVotingResults.cardResults
-        })
-        .then(() => {
-          this.fillPage()
-        });
-    },
-    getCard(currentId) {
-      let cardId = this.cardList[
-        this.cardList.length - 1 - this.pageId - currentId
-      ].cardId
-      return queryQCard(cardId)
-        .then((res) => {
-          let card = res
-          card.id = cardId
-          if (card.content) {
-            let candidate = card
-            candidate.isNerfed = this.cardList[this.cardList.length - 1 - this.pageId - currentId].result === 'nerf'
-            candidate.isBuffed = this.cardList[this.cardList.length - 1 - this.pageId - currentId].result === 'buff'
-            candidate.isBanned = this.cardList[this.cardList.length - 1 - this.pageId - currentId].result === 'ban'
-            this.cards.push(candidate)
-            return candidate
-          } else if (!card.owner) {
-            console.error("card without content and owner: ", res)
-            return res
-          } else {
-            console.error("card without content: ", res)
-            return res
-          }
-        })
-    },
-    fillPage() {
-      if (this.pageId + this.galleryFilters.cardsPerPage >= this.cardList.length)
-        this.browsingForward = false;
-      else this.browsingForward = true;
-      if (this.pageId <= 0) this.browsingBackward = false;
-      else this.browsingBackward = true;
-
-      let requestedCards = R.map(n => this.getCard(n),
-          R.times(R.identity, R.min(this.galleryFilters.cardsPerPage, this.cardList.length - this.pageId))
-        )
-
-      Promise.all(requestedCards)
-      .then((res) => {
-        // here the asynchronous order of this.cards gets overwritten by the ordered requestedCards,
-        // therefore the clickedindex must be adjusted (if something was clicked)
-        if (!R.equals(this.cards[this.clickedIndex], res[this.clickedIndex] )) {
-          this.clickedIndex = R.findIndex(R.propEq('id', this.cards[this.clickedIndex].id))(res)
-        }
-        this.cards = res
-      })
-      console.log("all cards:", this.cards)
-    },
-    nextPage() {
-      if (!this.browsingForward) return;
-
-      this.pageId += this.galleryFilters.cardsPerPage;
-      this.cards = [];
-      this.fillPage();
-      window.scrollTo(0, 0)
-    },
-    prevPage() {
-      if (!this.browsingBackward) return;
-
-      this.pageId -= this.galleryFilters.cardsPerPage;
-      this.cards = [];
-      this.fillPage();
-      window.scrollTo(0, 0);
-    },
-    showGalleryModal() {
-      this.isGalleryModalVisible = true
-
-      this.canVote = R.any(
-        (x) => x == this.cards[this.clickedIndex].id,
-        R.pluck("cardId", this.votableCards)
-      )
-
-      this.isOwner = this.cards[this.clickedIndex].owner === this.address
-      this.isArtist = this.cards[this.clickedIndex].artist === this.address
-
-      this.keywordDescriptions = []
-      let firstLetterToLower = string => {
-        return string[0].toLowerCase() + string.substring(1)
-      }
-      this.cards[this.clickedIndex].Keywords.forEach(ability => {
-        ability.forEach(keyword => {
-          this.keywordDescriptions.push([keyword, this.$rulesDefinitions[firstLetterToLower(keyword)].description])
-        })
-      })
-    },
-    closeGalleryModal() {
-      this.isGalleryModalVisible = false;
-    },
-    edit() {
-      this.cardCreatorEditCard = this.cards[this.clickedIndex]
-      this.$router.push("cardCreator")
-    },
-    cardview() {
-      this.$router.push('cardview/' + this.cards[this.clickedIndex].id)
-    },
-    downloadPng() {
-      saveCardAsPng(
-        document.getElementById("card" + this.clickedIndex),
-        this.cards[this.clickedIndex].CardName
-      );
-    },
-    vote(type) {
-      this.add(this.cards[this.clickedIndex].id, type)
-      this.notifyInfo("Vote saved", "Don't forget to send your votes on the Voting page!")
-    },
-  },
+import GalleryComponent from "@/components/elements/GalleryComponent.vue";
+import { onMounted, reactive } from "vue";
+import { type Card, NerfStatus } from "@/model/Card";
+
+const { add } = useVoting();
+
+const { address } = useAddress();
+const { queryQVotingResults } = useQuery();
+
+const initialState: {
+  data: VotingResults
+  cardList: Array<number>;
+  idsWithStatus: {[id: number]: NerfStatus}
+} = {
+  cardList: [],
+  data: VotingResults.fromPartial({}),
+  idsWithStatus: {}
 };
-</script>
-
-<style scoped lang="scss">
-@import "../scss/variables";
-
-.gallery__view {
-  margin: 1rem 0;
-  text-shadow: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-template-rows: auto;
-  grid-column-gap: 2rem;
-  grid-row-gap: 2rem;
-}
-
-.gallery__view__card:hover {
-  cursor: pointer;
-}
-
-.gallery__filter-box {
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-  border: $border-thickness solid $white;
-  padding: 1rem;
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  grid-template-rows: auto;
-  grid-column-gap: 4rem;
-  grid-row-gap: 1rem;
-}
 
-.gallery__filter__item {
-  width: 20%;
-}
-
-.no--wrap {
-  display: inline;
-  float: left;
-  white-space: nowrap;
-}
-
-.clickable-option {
-  display: inline;
-  white-space: nowrap;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.negated {
-  text-decoration: line-through;
-  font-weight: normal;
-}
-
-.cardContainer {
-  position: relative;
-  display: flex;
-}
+const state = reactive(initialState);
 
-.cardContainer--element {
-  position: relative;
-  flex-grow: 1;
-  max-width: 300px;
-}
-
-
-
-.button-container--top {
-  margin-bottom: 2rem;
-}
+onMounted(() => {
+  queryQVotingResults()
+    .then((res) => {
+      console.log("res", res);
+      state.data = res.lastVotingResults
+      state.cardList = state.data.cardResults.map(v => v.cardId)
+      state.idsWithStatus = Object.fromEntries(state.data.cardResults.map(v => [v.cardId, NerfStatus.fromString(v.result)!]))
+    })
+})
 
-.button-container--bottom {
-  margin-top: 2rem;
-}
-.container-modal {
-  position: fixed;
-  z-index: 4;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  transition: opacity 0.3s ease;
-  @media (max-width: 480px) {
-    bottom:0;
-    overflow-y: scroll;
-  }
-}
-.gallery-checkbox {
-  position: absolute;
-  display: inline-block;
-  margin-left: -25px;
-}
-.gallery-checkbox__label {
-margin-left: 25px;
-}
-.ability-modal-container {
-  margin: auto;
-  margin-top: 5vh;
-  max-width: 800px;
-  max-height: 95vh;
-  @media (max-width: 480px) {
-    margin-top: 0;
-    max-height:300vh;
-    height:auto;
-  }
-  //OLD:
-  // position: relative;
-   z-index: 3;
+const cardCallback = (card: Card) => {
+  card.setNerfStatus(state.idsWithStatus[card.id])
 }
 
-</style>
+</script>
\ No newline at end of file