diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..7366e9c
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+VITE_API_URL="http://10.5.7.231:8000/"
+VITE_API_KEY="your_api_key_should_be_here"
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..08c09ee
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,2 @@
+VITE_API_URL="https://restfulsleep.phaseii.network"
+VITE_API_KEY="your_api_key_should_be_here"
\ No newline at end of file
diff --git a/index.html b/index.html
index 4bd707a..dd9934f 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,40 @@
     <link rel="icon" href="/favicon.png">
     <title>PhaseWeb 3</title>
 
+    <style>
+      body {
+        background-color: #ffffff;
+      }
+      
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: #1f2937;
+        }
+      }
+    </style>
+  
+    <script>
+      var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
+      var current = 0;
+    
+      var keyHandler = function (event) {
+        if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
+          current = 0;
+          return;
+        }
+    
+        current++;
+    
+        if (pattern.length === current) {
+          current = 0;
+          document.getElementById('audio').play();
+          window.alert('+30 lives.');
+        }
+    
+      };
+    
+      document.addEventListener('keydown', keyHandler, false);
+    </script>
   </head>
   <body class="scroll-smooth">
     <noscript>
@@ -15,41 +49,6 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
-    <audio id="audio" src="/assets/sounds/konami.mp3" class="hidden" />
+    <audio id="audio" src="/assets/sounds/konami.mp3" class="hidden">
   </body>
-
-  <style>
-    body {
-      background-color: #ffffff;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-      body {
-        background-color: #1f2937;
-      }
-    }
-  </style>
-
-  <script>
-    var pattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];
-  var current = 0;
-
-  var keyHandler = function (event) {
-    if (pattern.indexOf(event.key) < 0 || event.key !== pattern[current]) {
-      current = 0;
-      return;
-    }
-
-    current++;
-
-    if (pattern.length === current) {
-      current = 0;
-      document.getElementById('audio').play();
-      window.alert('+30 lives.');
-    }
-
-  };
-
-  document.addEventListener('keydown', keyHandler, false);
-  </script>
 </html>
diff --git a/package-lock.json b/package-lock.json
index ff1c276..d32631c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,11 +12,15 @@
         "@rushstack/eslint-patch": "^1.1.4",
         "axios": "^0.27.0",
         "chart.js": "^3.6.0",
+        "crypto-js": "^4.2.0",
+        "dotenv": "^16.4.5",
+        "js-cookie": "^3.0.5",
         "numeral": "^2.0.6",
         "particles.js": "^2.0.0",
         "pinia": "^2.0.13",
         "vue": "^3.0.0",
-        "vue-router": "^4.0.0"
+        "vue-router": "^4.0.0",
+        "vue3-easy-data-table": "^1.5.47"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.4",
@@ -654,9 +658,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001554",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
-      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
+      "version": "1.0.30001628",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
+      "integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
       "dev": true,
       "funding": [
         {
@@ -791,6 +795,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "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",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -863,6 +872,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.567",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
@@ -1568,9 +1588,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -1840,6 +1860,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-sdsl": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
@@ -2926,9 +2954,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
-      "integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.10.tgz",
+      "integrity": "sha512-Dx3olBo/ODNiMVk/cA5Yft9Ws+snLOXrhLtrI3F4XLt4syz2Yg8fayZMWScPKoz12v5BUv7VEmQHnsfpY80fYw==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.15.9",
@@ -3024,6 +3052,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-easy-data-table": {
+      "version": "1.5.47",
+      "resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.47.tgz",
+      "integrity": "sha512-q0bZBlWIwQ3FIhB+F98ylFPfBJWiS3Xv7QqBe3xS5MbRNZP96RFjaQn7C0Pi0J/aaucNW8gFWxPyh9NESS1ehw==",
+      "dependencies": {
+        "vue": "^3.2.45"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3542,9 +3578,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001554",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
-      "integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
+      "version": "1.0.30001628",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
+      "integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
       "dev": true
     },
     "chalk": {
@@ -3635,6 +3671,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-js": {
+      "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=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3687,6 +3728,11 @@
         "esutils": "^2.0.2"
       }
     },
+    "dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg=="
+    },
     "electron-to-chromium": {
       "version": "1.4.567",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.567.tgz",
@@ -4118,9 +4164,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
     },
     "form-data": {
       "version": "4.0.0",
@@ -4305,6 +4351,11 @@
       "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
+    },
     "js-sdsl": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
@@ -5016,9 +5067,9 @@
       "dev": true
     },
     "vite": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
-      "integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.10.tgz",
+      "integrity": "sha512-Dx3olBo/ODNiMVk/cA5Yft9Ws+snLOXrhLtrI3F4XLt4syz2Yg8fayZMWScPKoz12v5BUv7VEmQHnsfpY80fYw==",
       "dev": true,
       "requires": {
         "esbuild": "^0.15.9",
@@ -5063,6 +5114,14 @@
         "@vue/devtools-api": "^6.4.5"
       }
     },
+    "vue3-easy-data-table": {
+      "version": "1.5.47",
+      "resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.47.tgz",
+      "integrity": "sha512-q0bZBlWIwQ3FIhB+F98ylFPfBJWiS3Xv7QqBe3xS5MbRNZP96RFjaQn7C0Pi0J/aaucNW8gFWxPyh9NESS1ehw==",
+      "requires": {
+        "vue": "^3.2.45"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 2b17282..9198a6b 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,15 @@
     "@rushstack/eslint-patch": "^1.1.4",
     "axios": "^0.27.0",
     "chart.js": "^3.6.0",
+    "crypto-js": "^4.2.0",
+    "dotenv": "^16.4.5",
+    "js-cookie": "^3.0.5",
     "numeral": "^2.0.6",
     "particles.js": "^2.0.0",
     "pinia": "^2.0.13",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0"
+    "vue-router": "^4.0.0",
+    "vue3-easy-data-table": "^1.5.47"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",
diff --git a/public/assets/card/bst.png b/public/assets/card/bst.png
new file mode 100644
index 0000000..75785f8
Binary files /dev/null and b/public/assets/card/bst.png differ
diff --git a/public/assets/card/carpet.png b/public/assets/card/carpet.png
new file mode 100644
index 0000000..7858c40
Binary files /dev/null and b/public/assets/card/carpet.png differ
diff --git a/public/assets/card/dancerush.png b/public/assets/card/dancerush.png
new file mode 100644
index 0000000..d388248
Binary files /dev/null and b/public/assets/card/dancerush.png differ
diff --git a/public/assets/card/danevo.png b/public/assets/card/danevo.png
new file mode 100644
index 0000000..dfee480
Binary files /dev/null and b/public/assets/card/danevo.png differ
diff --git a/public/assets/card/loveplus.png b/public/assets/card/loveplus.png
new file mode 100644
index 0000000..e81955d
Binary files /dev/null and b/public/assets/card/loveplus.png differ
diff --git a/public/assets/card/museca.png b/public/assets/card/museca.png
new file mode 100644
index 0000000..bd68d5d
Binary files /dev/null and b/public/assets/card/museca.png differ
diff --git a/public/assets/card/newbishi.png b/public/assets/card/newbishi.png
new file mode 100644
index 0000000..2b5ccba
Binary files /dev/null and b/public/assets/card/newbishi.png differ
diff --git a/public/assets/card/nost.png b/public/assets/card/nost.png
new file mode 100644
index 0000000..2b5ccba
Binary files /dev/null and b/public/assets/card/nost.png differ
diff --git a/public/assets/card/reflec.png b/public/assets/card/reflec.png
new file mode 100644
index 0000000..ad012ae
Binary files /dev/null and b/public/assets/card/reflec.png differ
diff --git a/public/assets/card/time.png b/public/assets/card/time.png
new file mode 100644
index 0000000..2c0c278
Binary files /dev/null and b/public/assets/card/time.png differ
diff --git a/public/assets/card/tsum.png b/public/assets/card/tsum.png
new file mode 100644
index 0000000..b7ad9ef
Binary files /dev/null and b/public/assets/card/tsum.png differ
diff --git a/public/assets/games/bst/card/1.png b/public/assets/games/bst/card/1.png
new file mode 100644
index 0000000..77414ca
Binary files /dev/null and b/public/assets/games/bst/card/1.png differ
diff --git a/public/assets/games/bst/card/2.png b/public/assets/games/bst/card/2.png
new file mode 100644
index 0000000..fd663e6
Binary files /dev/null and b/public/assets/games/bst/card/2.png differ
diff --git a/public/assets/games/dancerush/card/1.png b/public/assets/games/dancerush/card/1.png
new file mode 100644
index 0000000..d388248
Binary files /dev/null and b/public/assets/games/dancerush/card/1.png differ
diff --git a/public/assets/games/danevo/card/1.png b/public/assets/games/danevo/card/1.png
new file mode 100644
index 0000000..dfee480
Binary files /dev/null and b/public/assets/games/danevo/card/1.png differ
diff --git a/public/assets/games/ddr/card/11.png b/public/assets/games/ddr/card/11.png
new file mode 100644
index 0000000..619c0e8
Binary files /dev/null and b/public/assets/games/ddr/card/11.png differ
diff --git a/public/assets/games/ddr/card/12.png b/public/assets/games/ddr/card/12.png
new file mode 100644
index 0000000..c694469
Binary files /dev/null and b/public/assets/games/ddr/card/12.png differ
diff --git a/public/assets/games/ddrclass/card/10.png b/public/assets/games/ddrclass/card/10.png
new file mode 100644
index 0000000..494b4f3
Binary files /dev/null and b/public/assets/games/ddrclass/card/10.png differ
diff --git a/public/assets/games/ddrclass/card/9.png b/public/assets/games/ddrclass/card/9.png
new file mode 100644
index 0000000..33eceaa
Binary files /dev/null and b/public/assets/games/ddrclass/card/9.png differ
diff --git a/public/assets/games/ddromni/card/13.png b/public/assets/games/ddromni/card/13.png
new file mode 100644
index 0000000..e4c5033
Binary files /dev/null and b/public/assets/games/ddromni/card/13.png differ
diff --git a/public/assets/games/ddromni/card/14.png b/public/assets/games/ddromni/card/14.png
new file mode 100644
index 0000000..3f01749
Binary files /dev/null and b/public/assets/games/ddromni/card/14.png differ
diff --git a/public/assets/games/ddromni/card/15.png b/public/assets/games/ddromni/card/15.png
new file mode 100644
index 0000000..3f01749
Binary files /dev/null and b/public/assets/games/ddromni/card/15.png differ
diff --git a/public/assets/games/ddromni/card/16.png b/public/assets/games/ddromni/card/16.png
new file mode 100644
index 0000000..99e8b1c
Binary files /dev/null and b/public/assets/games/ddromni/card/16.png differ
diff --git a/public/assets/games/ddromni/card/17.png b/public/assets/games/ddromni/card/17.png
new file mode 100644
index 0000000..3a986fb
Binary files /dev/null and b/public/assets/games/ddromni/card/17.png differ
diff --git a/public/assets/games/ddromni/card/18.png b/public/assets/games/ddromni/card/18.png
new file mode 100644
index 0000000..3ab6eb3
Binary files /dev/null and b/public/assets/games/ddromni/card/18.png differ
diff --git a/public/assets/games/ddromni/card/19.png b/public/assets/games/ddromni/card/19.png
new file mode 100644
index 0000000..2e445e2
Binary files /dev/null and b/public/assets/games/ddromni/card/19.png differ
diff --git a/public/assets/games/gitadora_dm/card/1.png b/public/assets/games/gitadora_dm/card/1.png
new file mode 100644
index 0000000..2904b55
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/1.png differ
diff --git a/public/assets/games/gitadora_dm/card/2.png b/public/assets/games/gitadora_dm/card/2.png
new file mode 100644
index 0000000..76b2e7f
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/2.png differ
diff --git a/public/assets/games/gitadora_dm/card/3.png b/public/assets/games/gitadora_dm/card/3.png
new file mode 100644
index 0000000..a1feaa3
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/3.png differ
diff --git a/public/assets/games/gitadora_dm/card/4.png b/public/assets/games/gitadora_dm/card/4.png
new file mode 100644
index 0000000..b31a757
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/4.png differ
diff --git a/public/assets/games/gitadora_dm/card/5.png b/public/assets/games/gitadora_dm/card/5.png
new file mode 100644
index 0000000..08d6d60
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/5.png differ
diff --git a/public/assets/games/gitadora_dm/card/6.png b/public/assets/games/gitadora_dm/card/6.png
new file mode 100644
index 0000000..7df8a14
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/6.png differ
diff --git a/public/assets/games/gitadora_dm/card/7.png b/public/assets/games/gitadora_dm/card/7.png
new file mode 100644
index 0000000..d25fef0
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/7.png differ
diff --git a/public/assets/games/gitadora_dm/card/8.png b/public/assets/games/gitadora_dm/card/8.png
new file mode 100644
index 0000000..6baf8c7
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/8.png differ
diff --git a/public/assets/games/gitadora_dm/card/9.png b/public/assets/games/gitadora_dm/card/9.png
new file mode 100644
index 0000000..0ad9c3c
Binary files /dev/null and b/public/assets/games/gitadora_dm/card/9.png differ
diff --git a/public/assets/games/gitadora_gf/card/1.png b/public/assets/games/gitadora_gf/card/1.png
new file mode 100644
index 0000000..2904b55
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/1.png differ
diff --git a/public/assets/games/gitadora_gf/card/2.png b/public/assets/games/gitadora_gf/card/2.png
new file mode 100644
index 0000000..76b2e7f
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/2.png differ
diff --git a/public/assets/games/gitadora_gf/card/3.png b/public/assets/games/gitadora_gf/card/3.png
new file mode 100644
index 0000000..a1feaa3
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/3.png differ
diff --git a/public/assets/games/gitadora_gf/card/4.png b/public/assets/games/gitadora_gf/card/4.png
new file mode 100644
index 0000000..b31a757
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/4.png differ
diff --git a/public/assets/games/gitadora_gf/card/5.png b/public/assets/games/gitadora_gf/card/5.png
new file mode 100644
index 0000000..7562076
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/5.png differ
diff --git a/public/assets/games/gitadora_gf/card/6.png b/public/assets/games/gitadora_gf/card/6.png
new file mode 100644
index 0000000..7df8a14
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/6.png differ
diff --git a/public/assets/games/gitadora_gf/card/7.png b/public/assets/games/gitadora_gf/card/7.png
new file mode 100644
index 0000000..d25fef0
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/7.png differ
diff --git a/public/assets/games/gitadora_gf/card/8.png b/public/assets/games/gitadora_gf/card/8.png
new file mode 100644
index 0000000..6baf8c7
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/8.png differ
diff --git a/public/assets/games/gitadora_gf/card/9.png b/public/assets/games/gitadora_gf/card/9.png
new file mode 100644
index 0000000..0ad9c3c
Binary files /dev/null and b/public/assets/games/gitadora_gf/card/9.png differ
diff --git a/public/assets/games/iidxclass/card/14.png b/public/assets/games/iidxclass/card/14.png
new file mode 100644
index 0000000..2970b23
Binary files /dev/null and b/public/assets/games/iidxclass/card/14.png differ
diff --git a/public/assets/games/iidxclass/card/15.png b/public/assets/games/iidxclass/card/15.png
new file mode 100644
index 0000000..6b92f71
Binary files /dev/null and b/public/assets/games/iidxclass/card/15.png differ
diff --git a/public/assets/games/iidxclass/card/16.png b/public/assets/games/iidxclass/card/16.png
new file mode 100644
index 0000000..6f81f9e
Binary files /dev/null and b/public/assets/games/iidxclass/card/16.png differ
diff --git a/public/assets/games/iidxclass/card/17.png b/public/assets/games/iidxclass/card/17.png
new file mode 100644
index 0000000..b7d3e3f
Binary files /dev/null and b/public/assets/games/iidxclass/card/17.png differ
diff --git a/public/assets/games/iidx/card/18.png b/public/assets/games/iidxclass/card/18.png
similarity index 100%
rename from public/assets/games/iidx/card/18.png
rename to public/assets/games/iidxclass/card/18.png
diff --git a/public/assets/games/jubeat/card/1.png b/public/assets/games/jubeat/card/1.png
new file mode 100644
index 0000000..bb8624f
Binary files /dev/null and b/public/assets/games/jubeat/card/1.png differ
diff --git a/public/assets/games/jubeat/card/10.png b/public/assets/games/jubeat/card/10.png
index 604b43f..117f383 100644
Binary files a/public/assets/games/jubeat/card/10.png and b/public/assets/games/jubeat/card/10.png differ
diff --git a/public/assets/games/jubeat/card/11.png b/public/assets/games/jubeat/card/11.png
new file mode 100644
index 0000000..ac56800
Binary files /dev/null and b/public/assets/games/jubeat/card/11.png differ
diff --git a/public/assets/games/jubeat/card/12.png b/public/assets/games/jubeat/card/12.png
new file mode 100644
index 0000000..ae4cd97
Binary files /dev/null and b/public/assets/games/jubeat/card/12.png differ
diff --git a/public/assets/games/jubeat/card/14.png b/public/assets/games/jubeat/card/14.png
new file mode 100644
index 0000000..8a61c74
Binary files /dev/null and b/public/assets/games/jubeat/card/14.png differ
diff --git a/public/assets/games/jubeat/card/2.png b/public/assets/games/jubeat/card/2.png
index 3385f2c..61b7540 100644
Binary files a/public/assets/games/jubeat/card/2.png and b/public/assets/games/jubeat/card/2.png differ
diff --git a/public/assets/games/jubeat/card/3.png b/public/assets/games/jubeat/card/3.png
index 3385f2c..13b1b39 100644
Binary files a/public/assets/games/jubeat/card/3.png and b/public/assets/games/jubeat/card/3.png differ
diff --git a/public/assets/games/jubeat/card/4.png b/public/assets/games/jubeat/card/4.png
new file mode 100644
index 0000000..11f22f3
Binary files /dev/null and b/public/assets/games/jubeat/card/4.png differ
diff --git a/public/assets/games/jubeat/card/5.png b/public/assets/games/jubeat/card/5.png
new file mode 100644
index 0000000..15cdaab
Binary files /dev/null and b/public/assets/games/jubeat/card/5.png differ
diff --git a/public/assets/games/jubeat/card/6.png b/public/assets/games/jubeat/card/6.png
new file mode 100644
index 0000000..d2e8b25
Binary files /dev/null and b/public/assets/games/jubeat/card/6.png differ
diff --git a/public/assets/games/jubeat/card/7.png b/public/assets/games/jubeat/card/7.png
new file mode 100644
index 0000000..d2e8b25
Binary files /dev/null and b/public/assets/games/jubeat/card/7.png differ
diff --git a/public/assets/games/jubeat/card/8.png b/public/assets/games/jubeat/card/8.png
new file mode 100644
index 0000000..6d39c3f
Binary files /dev/null and b/public/assets/games/jubeat/card/8.png differ
diff --git a/public/assets/games/jubeat/card/9.png b/public/assets/games/jubeat/card/9.png
new file mode 100644
index 0000000..c1840a8
Binary files /dev/null and b/public/assets/games/jubeat/card/9.png differ
diff --git a/public/assets/games/loveplus/card/1.png b/public/assets/games/loveplus/card/1.png
new file mode 100644
index 0000000..e81955d
Binary files /dev/null and b/public/assets/games/loveplus/card/1.png differ
diff --git a/public/assets/games/loveplus/card/2.png b/public/assets/games/loveplus/card/2.png
new file mode 100644
index 0000000..e81955d
Binary files /dev/null and b/public/assets/games/loveplus/card/2.png differ
diff --git a/public/assets/games/reflec/card/1.png b/public/assets/games/reflec/card/1.png
new file mode 100644
index 0000000..ad012ae
Binary files /dev/null and b/public/assets/games/reflec/card/1.png differ
diff --git a/public/assets/games/reflec/card/2.png b/public/assets/games/reflec/card/2.png
new file mode 100644
index 0000000..ee4dd28
Binary files /dev/null and b/public/assets/games/reflec/card/2.png differ
diff --git a/public/assets/games/reflec/card/3.png b/public/assets/games/reflec/card/3.png
new file mode 100644
index 0000000..1f67894
Binary files /dev/null and b/public/assets/games/reflec/card/3.png differ
diff --git a/public/assets/games/reflec/card/3_a.png b/public/assets/games/reflec/card/3_a.png
new file mode 100644
index 0000000..09c133f
Binary files /dev/null and b/public/assets/games/reflec/card/3_a.png differ
diff --git a/public/assets/games/reflec/card/3_sp.png b/public/assets/games/reflec/card/3_sp.png
new file mode 100644
index 0000000..cd430df
Binary files /dev/null and b/public/assets/games/reflec/card/3_sp.png differ
diff --git a/public/assets/games/reflec/card/3_su.png b/public/assets/games/reflec/card/3_su.png
new file mode 100644
index 0000000..7e7b561
Binary files /dev/null and b/public/assets/games/reflec/card/3_su.png differ
diff --git a/public/assets/games/reflec/card/3_w.png b/public/assets/games/reflec/card/3_w.png
new file mode 100644
index 0000000..962d9cc
Binary files /dev/null and b/public/assets/games/reflec/card/3_w.png differ
diff --git a/public/assets/games/reflec/card/4.png b/public/assets/games/reflec/card/4.png
new file mode 100644
index 0000000..549e46e
Binary files /dev/null and b/public/assets/games/reflec/card/4.png differ
diff --git a/public/assets/games/reflec/card/5.png b/public/assets/games/reflec/card/5.png
new file mode 100644
index 0000000..93f17e2
Binary files /dev/null and b/public/assets/games/reflec/card/5.png differ
diff --git a/public/assets/games/reflec/card/6.png b/public/assets/games/reflec/card/6.png
new file mode 100644
index 0000000..f734b96
Binary files /dev/null and b/public/assets/games/reflec/card/6.png differ
diff --git a/public/assets/games/reflec/card/rb2_2.png b/public/assets/games/reflec/card/rb2_2.png
new file mode 100644
index 0000000..cf06b79
Binary files /dev/null and b/public/assets/games/reflec/card/rb2_2.png differ
diff --git a/public/assets/games/tsum/card/1.png b/public/assets/games/tsum/card/1.png
new file mode 100644
index 0000000..b7ad9ef
Binary files /dev/null and b/public/assets/games/tsum/card/1.png differ
diff --git a/public/assets/icon/bishi.png b/public/assets/icon/bishi.png
new file mode 100644
index 0000000..40de7f1
Binary files /dev/null and b/public/assets/icon/bishi.png differ
diff --git a/public/assets/icon/bst.png b/public/assets/icon/bst.png
new file mode 100644
index 0000000..c20e274
Binary files /dev/null and b/public/assets/icon/bst.png differ
diff --git a/public/assets/icon/dancerush.png b/public/assets/icon/dancerush.png
new file mode 100644
index 0000000..1a00987
Binary files /dev/null and b/public/assets/icon/dancerush.png differ
diff --git a/public/assets/icon/danevo.png b/public/assets/icon/danevo.png
new file mode 100644
index 0000000..2ca4b00
Binary files /dev/null and b/public/assets/icon/danevo.png differ
diff --git a/public/assets/icon/loveplus.png b/public/assets/icon/loveplus.png
new file mode 100644
index 0000000..bf4f95d
Binary files /dev/null and b/public/assets/icon/loveplus.png differ
diff --git a/public/assets/icon/museca.png b/public/assets/icon/museca.png
new file mode 100644
index 0000000..7aa25cb
Binary files /dev/null and b/public/assets/icon/museca.png differ
diff --git a/public/assets/icon/newbishi.png b/public/assets/icon/newbishi.png
new file mode 100644
index 0000000..40de7f1
Binary files /dev/null and b/public/assets/icon/newbishi.png differ
diff --git a/public/assets/icon/nost.png b/public/assets/icon/nost.png
new file mode 100644
index 0000000..40de7f1
Binary files /dev/null and b/public/assets/icon/nost.png differ
diff --git a/public/assets/icon/reflec.png b/public/assets/icon/reflec.png
new file mode 100644
index 0000000..40de7f1
Binary files /dev/null and b/public/assets/icon/reflec.png differ
diff --git a/public/assets/icon/tsum.png b/public/assets/icon/tsum.png
new file mode 100644
index 0000000..8864f3d
Binary files /dev/null and b/public/assets/icon/tsum.png differ
diff --git a/public/data-sources/clients.json b/public/data-sources/clients.json
deleted file mode 100644
index 15040c8..0000000
--- a/public/data-sources/clients.json
+++ /dev/null
@@ -1 +0,0 @@
-{"data":[{"id":19,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Howell-Hand.svg","login":"percy64","name":"Howell Hand","company":"Kiehn-Green","city":"Emelyside","progress":70,"created":"Mar 3, 2021","created_mm_dd_yyyy":"03-03-2021"},{"id":11,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Hope-Howe.svg","login":"dare.concepcion","name":"Hope Howe","company":"Nolan Inc","city":"Paristown","progress":68,"created":"Dec 1, 2021","created_mm_dd_yyyy":"12-01-2021"},{"id":32,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Nelson-Jerde.svg","login":"geovanni.kessler","name":"Nelson Jerde","company":"Nitzsche LLC","city":"Jailynbury","progress":49,"created":"May 18, 2021","created_mm_dd_yyyy":"05-18-2021"},{"id":22,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Kim-Weimann.svg","login":"macejkovic.dashawn","name":"Kim Weimann","company":"Brown-Lueilwitz","city":"New Emie","progress":38,"created":"May 4, 2021","created_mm_dd_yyyy":"05-04-2021"},{"id":34,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Justice-OReilly.svg","login":"hilpert.leora","name":"Justice O'Reilly","company":"Lakin-Muller","city":"New Kacie","progress":38,"created":"Mar 27, 2021","created_mm_dd_yyyy":"03-27-2021"},{"id":48,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Adrienne-Mayer-III.svg","login":"ferry.sophia","name":"Adrienne Mayer III","company":"Kozey, McLaughlin and Kuhn","city":"Howardbury","progress":39,"created":"Mar 29, 2021","created_mm_dd_yyyy":"03-29-2021"},{"id":20,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Julien-Ebert.svg","login":"gokuneva","name":"Mr. Julien Ebert","company":"Cormier LLC","city":"South Serenaburgh","progress":29,"created":"Jun 25, 2021","created_mm_dd_yyyy":"06-25-2021"},{"id":47,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lenna-Smitham.svg","login":"paolo.walter","name":"Lenna Smitham","company":"King Inc","city":"McCulloughfort","progress":59,"created":"Oct 8, 2021","created_mm_dd_yyyy":"10-08-2021"},{"id":24,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Travis-Davis.svg","login":"lkessler","name":"Travis Davis","company":"Leannon and Sons","city":"West Frankton","progress":52,"created":"Oct 20, 2021","created_mm_dd_yyyy":"10-20-2021"},{"id":49,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Prof.-Esteban-Steuber.svg","login":"shana.lang","name":"Prof. Esteban Steuber","company":"Langosh-Ernser","city":"East Sedrick","progress":34,"created":"May 16, 2021","created_mm_dd_yyyy":"05-16-2021"},{"id":36,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Russell-Goodwin-V.svg","login":"jewel07","name":"Russell Goodwin V","company":"Nolan-Stracke","city":"Williamsonmouth","progress":55,"created":"Apr 22, 2021","created_mm_dd_yyyy":"04-22-2021"},{"id":33,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Cassidy-Wiegand-DVM.svg","login":"burnice.okuneva","name":"Ms. Cassidy Wiegand DVM","company":"Kuhlman-Hahn","city":"New Ruthiehaven","progress":76,"created":"Sep 16, 2021","created_mm_dd_yyyy":"09-16-2021"},{"id":44,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Watson-Brakus-PhD.svg","login":"oconnell.juanita","name":"Mr. Watson Brakus PhD","company":"Osinski, Bins and Kuhn","city":"Lake Gloria","progress":58,"created":"Jun 22, 2021","created_mm_dd_yyyy":"06-22-2021"},{"id":46,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Mr.-Garrison-Friesen-V.svg","login":"vgutmann","name":"Mr. Garrison Friesen V","company":"VonRueden, Rippin and Pfeffer","city":"Port Cieloport","progress":39,"created":"Oct 19, 2021","created_mm_dd_yyyy":"10-19-2021"},{"id":14,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Sister-Morar.svg","login":"veum.lucio","name":"Ms. Sister Morar","company":"Gusikowski, Altenwerth and Abbott","city":"Lake Macville","progress":34,"created":"Jun 11, 2021","created_mm_dd_yyyy":"06-11-2021"},{"id":40,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Ms.-Laisha-Reinger.svg","login":"edietrich","name":"Ms. Laisha Reinger","company":"Boehm PLC","city":"West Alexiemouth","progress":73,"created":"Nov 2, 2021","created_mm_dd_yyyy":"11-02-2021"},{"id":5,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Cameron-Lind.svg","login":"mose44","name":"Cameron Lind","company":"Tremblay, Padberg and Pouros","city":"Naderview","progress":59,"created":"Sep 14, 2021","created_mm_dd_yyyy":"09-14-2021"},{"id":43,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Sarai-Little.svg","login":"rau.abelardo","name":"Sarai Little","company":"Deckow LLC","city":"Jeanieborough","progress":49,"created":"Jun 13, 2021","created_mm_dd_yyyy":"06-13-2021"},{"id":2,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Shyann-Kautzer.svg","login":"imurazik","name":"Shyann Kautzer","company":"Osinski, Boehm and Kihn","city":"New Alvera","progress":41,"created":"Feb 15, 2021","created_mm_dd_yyyy":"02-15-2021"},{"id":15,"avatar":"https:\/\/avatars.dicebear.com\/v2\/gridy\/Lorna-Christiansen.svg","login":"annalise97","name":"Lorna Christiansen","company":"Altenwerth-Friesen","city":"Port Elbertland","progress":36,"created":"Mar 9, 2021","created_mm_dd_yyyy":"03-09-2021"}]}
diff --git a/public/data-sources/history.json b/public/data-sources/history.json
deleted file mode 100644
index 9456e6b..0000000
--- a/public/data-sources/history.json
+++ /dev/null
@@ -1 +0,0 @@
-{"data":[{"amount":375.53,"account":"45721474","name":"Home Loan Account","date":"3 days ago","type":"deposit","business":"Turcotte"},{"amount":470.26,"account":"94486537","name":"Savings Account","date":"3 days ago","type":"payment","business":"Murazik - Graham"},{"amount":971.34,"account":"63189893","name":"Checking Account","date":"5 days ago","type":"invoice","business":"Fahey - Keebler"},{"amount":374.63,"account":"74828780","name":"Auto Loan Account","date":"7 days ago","type":"withdrawal","business":"Collier - Hintz"}]}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 766863b..6dc5234 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,3 +5,48 @@ import { RouterView } from "vue-router";
 <template>
   <RouterView :key="$route.fullPath" />
 </template>
+
+<style>
+.customize-table {
+  --easy-table-border: 1px solid #1f2937;
+  --easy-table-row-border: 1px solid #445269;
+
+  --easy-table-header-font-size: 15px;
+  --easy-table-header-height: 50px;
+  --easy-table-header-font-color: #c1cad4;
+  --easy-table-header-background-color: #0f172a;
+
+  --easy-table-header-item-padding: 10px 15px;
+
+  --easy-table-body-even-row-font-color: #fff;
+  --easy-table-body-even-row-background-color: #475569;
+
+  --easy-table-body-row-font-color: #c0c7d2;
+  --easy-table-body-row-background-color: #334155;
+  --easy-table-body-row-height: 50px;
+  --easy-table-body-row-font-size: 15px;
+
+  --easy-table-body-row-hover-font-color: #c0c7d2;
+  --easy-table-body-row-hover-background-color: #475569;
+
+  --easy-table-body-item-padding: 10px 15px;
+
+  --easy-table-footer-background-color: #0f172a;
+  --easy-table-footer-font-color: #c0c7d2;
+  --easy-table-footer-click-button-color: #c0c7d2;
+  --easy-table-footer-font-size: 14px;
+  --easy-table-footer-padding: 0px 10px;
+  --easy-table-footer-height: 50px;
+
+  --easy-table-rows-per-page-selector-width: 70px;
+  --easy-table-rows-per-page-selector-option-padding: 10px;
+  --easy-table-rows-per-page-selector-z-index: 1;
+
+  --easy-table-scrollbar-track-color: #2d3a4f;
+  --easy-table-scrollbar-color: #2d3a4f;
+  --easy-table-scrollbar-thumb-color: #4c5d7a;
+  --easy-table-scrollbar-corner-color: #2d3a4f;
+
+  --easy-table-loading-mask-background-color: #2d3a4f;
+}
+</style>
diff --git a/src/colors.js b/src/colors.js
index d78fb66..43f2f45 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -48,7 +48,7 @@ export const getButtonColor = (
       success: "ring-emerald-300 dark:ring-emerald-700",
       danger: "ring-red-300 dark:ring-red-700",
       warning: "ring-yellow-300 dark:ring-yellow-700",
-      info: "ring-blue-300 dark:ring-blue-700",
+      info: "ring-blue-300 dark:ring-blue-800",
     },
     active: {
       white: "bg-gray-100",
@@ -65,10 +65,10 @@ export const getButtonColor = (
       whiteDark: "bg-white text-black dark:bg-slate-900 dark:text-white",
       lightDark: "bg-gray-100 text-black dark:bg-slate-800 dark:text-white",
       contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
-      success: "bg-emerald-600 dark:bg-emerald-500 text-white",
-      danger: "bg-red-600 dark:bg-red-500 text-white",
-      warning: "bg-yellow-600 dark:bg-yellow-500 text-white",
-      info: "bg-blue-600 dark:bg-blue-500 text-white",
+      success: "bg-emerald-600 dark:bg-emerald-700 text-white",
+      danger: "bg-red-600 dark:bg-red-800 text-white",
+      warning: "bg-yellow-600 dark:bg-yellow-700 text-white",
+      info: "bg-blue-600 dark:bg-blue-900 text-white",
     },
     bgHover: {
       white: "hover:bg-gray-100",
diff --git a/src/components/ArcadeCard.vue b/src/components/ArcadeCard.vue
index 7f1f068..6b84e8c 100644
--- a/src/components/ArcadeCard.vue
+++ b/src/components/ArcadeCard.vue
@@ -1,87 +1,130 @@
 <script setup>
-import { mdiTestTube, mdiStoreOutline, mdiHomeOutline } from "@mdi/js";
-import { getArea } from "@/constants/area";
+import {
+  mdiTestTube,
+  mdiHomeOutline,
+  mdiNewspaperVariantMultiple,
+  mdiGamepad,
+  mdiCashRegister,
+  mdiHome,
+} from "@mdi/js";
+import { ref } from "vue";
+// import { getArea } from "@/constants/area";
 import BaseLevel from "@/components/BaseLevel.vue";
-import CardBox from "@/components/CardBox.vue";
+import BaseButton from "@/components/BaseButton.vue";
 import PillTag from "@/components/PillTag.vue";
 
 const props = defineProps({
   useSmall: {
     type: Boolean,
     required: false,
-    default: true,
+    default: false,
   },
-  arcadeData: {
+  arcade: {
     type: Object,
     required: true,
   },
 });
 
-function getCardStyle(game) {
-  if (game !== null) {
+var arcadeData = ref(props.arcade.data);
+function getCardStyle(path) {
+  if (path !== null) {
     return `
-      background-image: url('${game}');
+      background-image: url('${path}');
       background-size: cover;
       background-repeat: no-repeat;
     `;
   }
 }
 
-const areaData = getArea(props.arcadeData.area);
+// const areaData = getArea(props.arcadeData.area);
 </script>
 
 <template>
-  <CardBox :style="getCardStyle(arcadeData.image)">
+  <div
+    :style="getCardStyle('/assets/card/carpet.png')"
+    class="rounded-2xl mb-6 w-full"
+  >
     <BaseLevel
       type="justify-center"
-      class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
+      class="bg-white dark:bg-slate-900/90 rounded-2xl p-6 w-full"
     >
-      <div class="space-y-3 text-center">
-        <h1 class="text-2xl lg:text-3xl font-bold">{{ arcadeData.name }}</h1>
+      <div class="space-y-3 text-center w-full">
+        <h1 class="text-2xl lg:text-3xl font-bold">{{ arcade.name }}</h1>
         <div class="flex gap-2 justify-center items-center">
-          <h2 class="text-2xl md:text-3xl font-bold lg:hidden">
+          <!-- <h2 class="text-2xl md:text-3xl font-bold lg:hidden">
             {{ areaData.flag }}
-          </h2>
+          </h2> -->
           <h2 class="text-xl md:text-2xl font-bold">
-            {{ areaData.name }}
+            {{ arcade.description }}
           </h2>
         </div>
-        <hr class="border-t border-1 w-full" />
-        <p class="text-lg">
-          Managed by
-          <span
-            v-for="(user, index) in arcadeData.admins"
-            :key="index"
-            class="font-bold"
-          >
-            <span v-if="index === 0">{{ user }}</span>
-            <span v-else-if="index >= arcadeData.admins.length - 1"
-              >, <span class="font-normal">and</span> {{ user }}.</span
-            >
-            <span v-else>, {{ user }}</span>
-          </span>
-        </p>
         <div class="flex flex-wrap gap-4 place-content-center">
           <PillTag
-            v-if="arcadeData.beta"
+            v-if="arcadeData.is_beta"
             label="Beta Enabled"
             color="warning"
             :icon="mdiTestTube"
           />
-          <PillTag
-            v-if="arcadeData.public"
-            label="Public Arcade"
-            color="success"
-            :icon="mdiStoreOutline"
-          />
-          <PillTag
-            v-if="!arcadeData.public"
-            label="Private Arcade"
+          <PillTag label="Private Arcade" color="info" :icon="mdiHomeOutline" />
+        </div>
+
+        <hr class="border-t border-1 w-full" />
+        <p v-if="arcade.owners && arcade.owners.length" class="text-lg">
+          Managed by
+          <span
+            v-for="(owner, index) in arcade.owners"
+            :key="owner.username"
+            class="font-bold"
+          >
+            <template v-if="arcade.owners.length === 2 && index === 0">{{
+              owner.username
+            }}</template>
+            <template v-else-if="arcade.owners.length === 2 && index === 1">
+              <span class="font-normal"> and</span>
+              {{ owner.username }}.</template
+            >
+            <template v-else-if="index === 0">{{ owner.username }}</template>
+            <template v-else-if="index === arcade.owners.length - 1"
+              >, <span class="font-normal"> and</span>
+              {{ owner.username }}.</template
+            >
+            <template v-else>, {{ owner.username }}</template>
+          </span>
+        </p>
+
+        <div
+          v-if="!useSmall"
+          class="md:w-full grid grid-cols-1 md:grid-cols-3 gap-3"
+        >
+          <BaseButton
+            :href="`/#/arcade/${arcade.id}/events`"
+            :icon="mdiNewspaperVariantMultiple"
             color="info"
-            :icon="mdiHomeOutline"
+            label="Event Settings"
+          />
+          <BaseButton
+            :href="`/#/arcade/${arcade.id}/machines`"
+            :icon="mdiGamepad"
+            color="info"
+            label="Machine List"
+          />
+          <BaseButton
+            :href="`/#/arcade/${arcade.id}/paseli`"
+            :icon="mdiCashRegister"
+            color="info"
+            label="PASELI"
+          />
+        </div>
+        <div v-if="useSmall" class="w-full flex justify-center">
+          <BaseButton
+            :href="`/#/arcade/${arcade.id}`"
+            :icon="mdiHome"
+            color="info"
+            label="Arcade Home"
+            class="w-full md:w-[150px]"
           />
         </div>
       </div>
     </BaseLevel>
-  </CardBox>
+  </div>
 </template>
diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 3ab96e1..ba99612 100644
--- a/src/components/BaseButton.vue
+++ b/src/components/BaseButton.vue
@@ -47,7 +47,7 @@ const props = defineProps({
   },
   outline: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   active: Boolean,
   disabled: Boolean,
diff --git a/src/components/Cards/CardBoxNews.vue b/src/components/Cards/CardBoxNews.vue
index 4ddf8b0..6290c36 100644
--- a/src/components/Cards/CardBoxNews.vue
+++ b/src/components/Cards/CardBoxNews.vue
@@ -49,7 +49,6 @@ function openNewsView() {
       <div
         class="outline outline-green-900/50 hover:scale-[1.01] hover:shadow-xl hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-10"
       >
-        <p class="text-sm font-bold">Unread</p>
         <p class="text-sm">{{ props.date }}</p>
         <hr class="pb-1" />
         <h2 class="text-xl pb-2">{{ props.title }}</h2>
diff --git a/src/components/Cards/EmblemCardBox.vue b/src/components/Cards/EmblemCardBox.vue
new file mode 100644
index 0000000..c97f8f8
--- /dev/null
+++ b/src/components/Cards/EmblemCardBox.vue
@@ -0,0 +1,132 @@
+<script setup>
+import axios from "axios";
+import { watch, ref, reactive } from "vue";
+import BaseButton from "@/components/BaseButton.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import UserEmblem from "@/components/UserEmblem.vue";
+import PillTag from "@/components/PillTag.vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+});
+
+const userProfile = ref(props.profile);
+const version = ref(props.version);
+const emblemKey = ref(0);
+
+const newEmblem = reactive(formatEmblem(userProfile.value?.last?.emblem));
+const emblemSettings = ref([]);
+
+watch(
+  () => props.version,
+  () => {
+    userProfile.value = props.profile;
+    version.value = props.version;
+    loadEmblemSettings();
+    newEmblem.value = formatEmblem(userProfile.value.last?.emblem);
+  }
+);
+
+watch(
+  newEmblem,
+  () => {
+    emblemKey.value++;
+  },
+  { deep: true }
+);
+
+loadEmblemSettings();
+function loadEmblemSettings() {
+  axios
+    .get(
+      `https://web3.phaseii.network/gameassets/emblems/${version.value}.json`
+    )
+    .then((r) => {
+      if (r.data) {
+        emblemSettings.value = r.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
+}
+
+function formatEmblem(emblem) {
+  if (emblem) {
+    return {
+      background: emblem[0],
+      main: emblem[1],
+      ornament: emblem[2],
+      effect: emblem[3],
+      speech_bubble: emblem[4],
+    };
+  } else {
+    return {
+      background: 0,
+      main: 0,
+      ornament: 0,
+      effect: 0,
+      speech_bubble: 0,
+    };
+  }
+}
+
+function encodeEmblem(emblem) {
+  if (emblem) {
+    return [
+      emblem.background,
+      emblem.main,
+      emblem.ornament,
+      emblem.effect,
+      emblem.speech_bubble,
+    ];
+  } else {
+    return [0, 0, 0, 0, 0];
+  }
+}
+</script>
+
+<template>
+  <CardBox class="mt-6">
+    <PillTag color="info" label="Emblem" class="mb-2" />
+    <div class="grid md:grid-cols-2 space-y-6 align-center">
+      <div>
+        <FormField
+          v-for="option of emblemSettings"
+          :key="option.id"
+          :label="option.name"
+          :help="option.help"
+        >
+          <FormControl
+            v-model="newEmblem[option.id]"
+            :options="option.options"
+          />
+        </FormField>
+      </div>
+      <div class="place-self-center">
+        <UserEmblem
+          :key="emblemKey"
+          :version="version"
+          :profile="{ last: { emblem: encodeEmblem(newEmblem) } }"
+          :size="300"
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="space-x-2">
+        <BaseButton type="submit" color="success" label="Save" />
+        <BaseButton type="submit" color="danger" label="Revert" />
+      </div>
+    </template>
+  </CardBox>
+</template>
diff --git a/src/components/Cards/ProfileCard.vue b/src/components/Cards/ProfileCard.vue
index 491bd49..2c18f93 100644
--- a/src/components/Cards/ProfileCard.vue
+++ b/src/components/Cards/ProfileCard.vue
@@ -8,6 +8,8 @@ import {
 import { dashCode } from "@/constants/userData";
 import { getGameInfo } from "@/constants";
 import BaseButton from "@/components/BaseButton.vue";
+import UserEmblem from "@/components/UserEmblem.vue";
+import UserQpro from "@/components/UserQpro.vue";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor.js";
 
 const props = defineProps({
@@ -15,6 +17,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  version: {
+    type: Number,
+    default: null,
+  },
   profile: {
     type: Object,
     required: true,
@@ -26,13 +32,10 @@ const props = defineProps({
 });
 
 function colorText() {
-  if (props.profile.stats) {
-    const stats = props.profile.stats;
-    if (stats.jubility) {
-      return getJubilityColor(stats.jubility);
-    } else if (stats.skillPoints) {
-      return getGitadoraColor(stats.skillPoints);
-    }
+  if (props.profile.jubility) {
+    return getJubilityColor(props.profile.jubility);
+  } else if (props.profile.records) {
+    return getGitadoraColor(props.profile.records.skill);
   }
 }
 
@@ -40,46 +43,79 @@ const thisGame = getGameInfo(props.game);
 </script>
 
 <template>
-  <div class="flex content-center justify-center items-center">
-    <img v-if="profile.avatar" class="h-40" :src="profile.avatar" />
+  <div class="content-center justify-center items-center">
+    <div
+      class="md:flex md:space-x-12 md:justify-center md:items-center grid grid-cols-1 text-center"
+    >
+      <UserEmblem
+        v-if="game == 'jubeat' && version >= 10 && profile.last?.emblem"
+        :version="version"
+        :profile="profile"
+        class="place-self-center pb-6 md:pb-0"
+      />
+      <UserQpro
+        v-if="game == 'iidx' && version >= 20 && profile.qpro"
+        :version="version"
+        :profile="profile"
+        class="place-self-center pb-6 md:pb-0"
+      />
+      <div class="drop-shadow-xl">
+        <h1 :class="colorText()" class="text-4xl md:text-5xl font-bold">
+          {{ profile.username }}
+        </h1>
+        <p class="text-xl font-mono">{{ dashCode(profile.extid) }}</p>
+      </div>
+    </div>
     <div class="space-y-2 text-center md:text-left lg:mx-12 p-2">
-      <h1 :class="colorText()" class="text-3xl md:text-4xl font-bold">
-        {{ profile.name }}
-      </h1>
-      <p class="text-xl font-mono">{{ dashCode(profile.extid) }}</p>
-      <p class="text-md md:text-lg">
-        Last played at <b>{{ profile.last.arcade }}</b> on
-        <b>{{ profile.last.date }}</b>
-      </p>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div class="pt-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
         <BaseButton
           v-if="!useSmall && game"
           :icon="mdiAccountDetails"
-          :href="`/#/games/${game}/profiles/${profile.id}`"
+          :href="`/#/games/${game}/profiles/${profile.userId}`"
+          :outline="false"
           color="info"
           label="View Profile"
         />
         <BaseButton
           v-if="!useSmall && game"
           :icon="mdiCog"
-          :href="`/#/games/${game}/profiles/${profile.id}/edit`"
+          :href="`/#/games/${game}/edit`"
+          :outline="false"
           color="info"
           label="Edit Profile"
         />
         <BaseButton
           v-if="!useSmall && !thisGame.noScores"
-          :href="`/#/games/${game}/scores/${profile.id}`"
+          :href="`/#/games/${game}/scores/${profile.userId}`"
           :icon="mdiPlaylistMusicOutline"
+          :outline="false"
           color="info"
           label="My Scores"
         />
         <BaseButton
           v-if="!useSmall && !thisGame.noRecords"
-          :href="`/#/games/${game}/records/${profile.id}`"
+          :href="`/#/games/${game}/records/${profile.userId}`"
           :icon="mdiFormatListText"
+          :outline="false"
           color="info"
           label="My Records"
         />
+        <BaseButton
+          v-if="!useSmall && !thisGame.noScores"
+          :href="`/#/games/${game}/scores`"
+          :icon="mdiPlaylistMusicOutline"
+          :outline="false"
+          color="info"
+          label="Network Scores"
+        />
+        <BaseButton
+          v-if="!useSmall && !thisGame.noRecords"
+          :href="`/#/games/${game}/records`"
+          :icon="mdiFormatListText"
+          :outline="false"
+          color="info"
+          label="Network Records"
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/Cards/QproCardBox.vue b/src/components/Cards/QproCardBox.vue
new file mode 100644
index 0000000..042864a
--- /dev/null
+++ b/src/components/Cards/QproCardBox.vue
@@ -0,0 +1,102 @@
+<script setup>
+import axios from "axios";
+import { watch, ref, reactive } from "vue";
+import BaseButton from "@/components/BaseButton.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormField from "@/components/FormField.vue";
+import FormControl from "@/components/FormControl.vue";
+import UserQpro from "@/components/UserQpro.vue";
+import PillTag from "@/components/PillTag.vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+});
+
+const userProfile = ref(props.profile);
+const version = ref(props.version);
+const QproKey = ref(0);
+
+const newQpro = reactive(
+  userProfile.value?.qpro ?? { head: 0, hair: 0, face: 0, body: 0, hand: 0 }
+);
+const QproSettings = ref([]);
+
+watch(
+  () => props.version,
+  () => {
+    userProfile.value = props.profile;
+    loadQproSettings();
+    newQpro.value = userProfile.value?.qpro;
+  }
+);
+
+watch(
+  () => props.version,
+  () => {
+    version.value = props.version;
+  }
+);
+
+watch(
+  newQpro,
+  () => {
+    QproKey.value++;
+  },
+  { deep: true }
+);
+
+loadQproSettings();
+function loadQproSettings() {
+  axios
+    .get(`https://web3.phaseii.network/gameassets/qpro/${version.value}.json`)
+    .then((r) => {
+      if (r.data) {
+        QproSettings.value = r.data;
+      }
+    })
+    .catch((error) => {
+      console.log(error.message);
+    });
+}
+</script>
+
+<template>
+  <CardBox class="mt-6">
+    <PillTag color="info" label="QPro" class="mb-2" />
+    <div class="grid md:grid-cols-2 space-y-6 align-center">
+      <div>
+        <FormField
+          v-for="option of QproSettings"
+          :key="option.id"
+          :label="option.name"
+          :help="option.help"
+        >
+          <FormControl v-model="newQpro[option.id]" :options="option.options" />
+        </FormField>
+      </div>
+      <div class="place-self-center">
+        <UserQpro
+          :key="QproKey"
+          :version="version"
+          :profile="{ qpro: newQpro }"
+          style="scale: 1.9"
+          class="my-16 mb-10"
+        />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="space-x-2">
+        <BaseButton type="submit" color="success" label="Save" />
+        <BaseButton type="submit" color="danger" label="Revert" />
+      </div>
+    </template>
+  </CardBox>
+</template>
diff --git a/src/components/GeneralTable.vue b/src/components/GeneralTable.vue
new file mode 100644
index 0000000..15246c4
--- /dev/null
+++ b/src/components/GeneralTable.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+// eslint-disable-next-line vue/require-prop-types
+defineProps(["headers", "items"]);
+const emits = defineEmits(["row-clicked"]);
+
+const handleRowClick = (item) => {
+  emits("row-clicked", item);
+};
+</script>
+
+<template>
+  <EasyDataTable
+    :headers="headers"
+    :items="items"
+    theme-color="#c0c7d2"
+    table-class-name="customize-table"
+    header-text-direction="left"
+    body-text-direction="left"
+    @click-row="handleRowClick"
+  >
+    <template #loading>
+      <div class="text-center align-center grid">
+        <img
+          class="rounded-full place-self-center"
+          src="/icon.gif"
+          width="60"
+        />
+        <h1 class="text-lg text-gray-100">Loading</h1>
+      </div>
+    </template>
+
+    <template #empty-message>
+      <h1 class="text-xl text-gray-100">No data to show... 😔</h1>
+    </template>
+  </EasyDataTable>
+</template>
diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
index 69c7a09..5d132ba 100644
--- a/src/components/LoadingModal.vue
+++ b/src/components/LoadingModal.vue
@@ -39,7 +39,7 @@ defineProps({
           width="70"
         />
         <h1 class="text-xl md:text-2xl">
-          {{ isSave ? `Saving...` : `Loading...` }}
+          {{ isSave ? `Submitting...` : `Loading...` }}
         </h1>
         <p class="text-lg md:text-xl">Please wait</p>
       </div>
diff --git a/src/components/Tables/TablePlayers.vue b/src/components/Tables/TablePlayers.vue
deleted file mode 100644
index 1c1fad5..0000000
--- a/src/components/Tables/TablePlayers.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<script setup>
-import { computed, ref } from "vue";
-import { useMainStore } from "@/stores/main";
-import BaseLevel from "@/components/BaseLevel.vue";
-import BaseButtons from "@/components/BaseButtons.vue";
-import BaseButton from "@/components/BaseButton.vue";
-
-const mainStore = useMainStore();
-
-const items = computed(() => mainStore.clients);
-
-const perPage = ref(5);
-
-const currentPage = ref(0);
-
-const itemsPaginated = computed(() =>
-  items.value.slice(
-    perPage.value * currentPage.value,
-    perPage.value * (currentPage.value + 1)
-  )
-);
-
-const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
-
-const currentPageHuman = computed(() => currentPage.value + 1);
-
-const pagesList = computed(() => {
-  const pagesList = [];
-
-  for (let i = 0; i < numPages.value; i++) {
-    pagesList.push(i);
-  }
-
-  return pagesList;
-});
-</script>
-
-<template>
-  <table>
-    <thead>
-      <tr>
-        <th>Username</th>
-        <th>Rival ID</th>
-        <th>Creation Date</th>
-        <th>Last Played</th>
-        <th>Last Arcade</th>
-        <th>Play Count</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-for="client in itemsPaginated"
-        :key="client.id"
-        class="border-b-[12px] lg:border-b-0"
-      >
-        <td data-label="Username">TRMAZI</td>
-        <td data-label="Rival ID">1234-5678</td>
-        <td data-label="Creation Date">10/22/2022</td>
-        <td data-label="Last Played">10/22/2022</td>
-        <td data-label="Last Arcade">Ho-House</td>
-        <td data-label="Play Count" class="lg:w-32">466</td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
-    <BaseLevel>
-      <BaseButtons>
-        <BaseButton
-          v-for="page in pagesList"
-          :key="page"
-          :active="page === currentPage"
-          :label="page + 1"
-          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
-          small
-          @click="currentPage = page"
-        />
-      </BaseButtons>
-      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
-    </BaseLevel>
-  </div>
-</template>
diff --git a/src/components/Tables/TableSampleClients.vue b/src/components/Tables/TableSampleClients.vue
deleted file mode 100644
index 4d1a3df..0000000
--- a/src/components/Tables/TableSampleClients.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<script setup>
-import { computed, ref } from "vue";
-import { useMainStore } from "@/stores/main";
-import { mdiEye, mdiTrashCan } from "@mdi/js";
-import CardBoxModal from "@/components/CardBoxModal.vue";
-import TableCheckboxCell from "@/components/TableCheckboxCell.vue";
-import BaseLevel from "@/components/BaseLevel.vue";
-import BaseButtons from "@/components/BaseButtons.vue";
-import BaseButton from "@/components/BaseButton.vue";
-import UserAvatar from "@/components/UserAvatar.vue";
-
-defineProps({
-  checkable: Boolean,
-});
-
-const mainStore = useMainStore();
-
-const items = computed(() => mainStore.clients);
-
-const isModalActive = ref(false);
-
-const isModalDangerActive = ref(false);
-
-const perPage = ref(5);
-
-const currentPage = ref(0);
-
-const checkedRows = ref([]);
-
-const itemsPaginated = computed(() =>
-  items.value.slice(
-    perPage.value * currentPage.value,
-    perPage.value * (currentPage.value + 1)
-  )
-);
-
-const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
-
-const currentPageHuman = computed(() => currentPage.value + 1);
-
-const pagesList = computed(() => {
-  const pagesList = [];
-
-  for (let i = 0; i < numPages.value; i++) {
-    pagesList.push(i);
-  }
-
-  return pagesList;
-});
-
-const remove = (arr, cb) => {
-  const newArr = [];
-
-  arr.forEach((item) => {
-    if (!cb(item)) {
-      newArr.push(item);
-    }
-  });
-
-  return newArr;
-};
-
-const checked = (isChecked, client) => {
-  if (isChecked) {
-    checkedRows.value.push(client);
-  } else {
-    checkedRows.value = remove(
-      checkedRows.value,
-      (row) => row.id === client.id
-    );
-  }
-};
-</script>
-
-<template>
-  <CardBoxModal v-model="isModalActive" title="Sample modal">
-    <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
-    <p>This is sample modal</p>
-  </CardBoxModal>
-
-  <CardBoxModal
-    v-model="isModalDangerActive"
-    title="Please confirm"
-    button="danger"
-    has-cancel
-  >
-    <p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
-    <p>This is sample modal</p>
-  </CardBoxModal>
-
-  <div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
-    <span
-      v-for="checkedRow in checkedRows"
-      :key="checkedRow.id"
-      class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700"
-    >
-      {{ checkedRow.name }}
-    </span>
-  </div>
-
-  <table>
-    <thead>
-      <tr>
-        <th v-if="checkable" />
-        <th />
-        <th>Name</th>
-        <th>Company</th>
-        <th>City</th>
-        <th>Progress</th>
-        <th>Created</th>
-        <th />
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="client in itemsPaginated" :key="client.id">
-        <TableCheckboxCell
-          v-if="checkable"
-          @checked="checked($event, client)"
-        />
-        <td class="border-b-0 lg:w-6 before:hidden">
-          <UserAvatar
-            :username="client.name"
-            class="w-24 h-24 mx-auto lg:w-6 lg:h-6"
-          />
-        </td>
-        <td data-label="Name">
-          {{ client.name }}
-        </td>
-        <td data-label="Company">
-          {{ client.company }}
-        </td>
-        <td data-label="City">
-          {{ client.city }}
-        </td>
-        <td data-label="Progress" class="lg:w-32">
-          <progress
-            class="flex w-2/5 self-center lg:w-full"
-            max="100"
-            :value="client.progress"
-          >
-            {{ client.progress }}
-          </progress>
-        </td>
-        <td data-label="Created" class="lg:w-1 whitespace-nowrap">
-          <small
-            class="text-gray-500 dark:text-slate-400"
-            :title="client.created"
-            >{{ client.created }}</small
-          >
-        </td>
-        <td class="before:hidden lg:w-1 whitespace-nowrap">
-          <BaseButtons type="justify-start lg:justify-end" no-wrap>
-            <BaseButton
-              color="info"
-              :icon="mdiEye"
-              small
-              @click="isModalActive = true"
-            />
-            <BaseButton
-              color="danger"
-              :icon="mdiTrashCan"
-              small
-              @click="isModalDangerActive = true"
-            />
-          </BaseButtons>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
-    <BaseLevel>
-      <BaseButtons>
-        <BaseButton
-          v-for="page in pagesList"
-          :key="page"
-          :active="page === currentPage"
-          :label="page + 1"
-          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
-          small
-          @click="currentPage = page"
-        />
-      </BaseButtons>
-      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
-    </BaseLevel>
-  </div>
-</template>
diff --git a/src/components/Tables/TableScores.vue b/src/components/Tables/TableScores.vue
deleted file mode 100644
index e1cf00b..0000000
--- a/src/components/Tables/TableScores.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script setup>
-import { reactive } from "vue";
-import BaseLevel from "@/components/BaseLevel.vue";
-import BaseButtons from "@/components/BaseButtons.vue";
-import BaseButton from "@/components/BaseButton.vue";
-import CardBoxComponentEmpty from "../CardBoxComponentEmpty.vue";
-
-defineProps({
-  game: {
-    type: String,
-    required: true,
-  },
-  isPersonal: {
-    type: Boolean,
-    default: false,
-  },
-  entries: {
-    type: Array,
-    required: true,
-  },
-});
-
-const currentPage = reactive(0);
-</script>
-
-<template>
-  <table v-if="entries && entries.length">
-    <thead>
-      <tr>
-        <th v-if="!isPersonal">Player</th>
-        <th>Timestamp</th>
-        <th>Song</th>
-        <th>Chart</th>
-        <th>Score</th>
-        <th>Arcade</th>
-      </tr>
-    </thead>
-    <tbody class="space-y">
-      <tr
-        v-for="score of entries"
-        :key="score.id"
-        class="border-b-[12px] lg:border-b-0"
-      >
-        <td v-if="!isPersonal" data-label="Player">
-          <a
-            class="grid grid-cols-1 hover:underline decoration-blue-700"
-            :href="`/#/games/${game}/profiles/${score.playerId}`"
-          >
-            {{ score.player }}
-          </a>
-        </td>
-
-        <td data-label="Timestamp">{{ score.timestamp }}</td>
-
-        <td v-if="score.song" data-label="Song">
-          <a
-            class="grid grid-cols-1 hover:underline decoration-blue-700"
-            :href="`/#/songs/${game}/${score.song.id}`"
-          >
-            <h2 class="italic">{{ score.song.name }}</h2>
-            <h2>{{ score.song.artist }}</h2>
-          </a>
-        </td>
-
-        <td v-if="score.song" data-label="Chart">
-          <div class="grid grid-cols-1">
-            <h2>{{ score.song.chart }}</h2>
-            <h2>Difficulty: {{ score.song.difficulty }}</h2>
-          </div>
-        </td>
-
-        <td data-label="Score">
-          <div class="grid grid-cols-1">
-            <h2>Grade: {{ score.grade }}</h2>
-            <h2>Points: {{ score.points }}</h2>
-            <h2>Max Combo: {{ score.combo }}</h2>
-          </div>
-        </td>
-
-        <td v-if="score.location" data-label="Arcade">
-          <div class="grid grid-cols-1">
-            <h2>{{ score.location.arcade }}</h2>
-            <h2>Played on: {{ score.location.type }}</h2>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-  <div
-    v-if="entries && entries.length"
-    class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800"
-  >
-    <BaseLevel>
-      <BaseButtons>
-        <BaseButton
-          v-for="page in 0"
-          :key="page"
-          :active="page === currentPage"
-          :label="page + 1"
-          :color="page === currentPage ? 'lightDark' : 'whiteDark'"
-          small
-          @click="currentPage = page"
-        />
-      </BaseButtons>
-      <small>Page {{ currentPageHuman }} of {{ numPages }}</small>
-    </BaseLevel>
-  </div>
-  <CardBoxComponentEmpty v-else />
-</template>
diff --git a/src/components/UserAvatar.vue b/src/components/UserAvatar.vue
index f380776..c1ba462 100644
--- a/src/components/UserAvatar.vue
+++ b/src/components/UserAvatar.vue
@@ -25,14 +25,16 @@ const username = computed(() => props.username);
       <img
         :src="avatar"
         :alt="username"
+        width="200"
+        height="200"
         class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden"
       />
-      <img
+      <!-- <img
         src="/assets/border/pride.png"
         alt="border"
         class="absolute inset-0 w-full h-full overflow-hidden scale-[1.02]"
         style="object-fit: fill"
-      />
+      /> -->
     </div>
     <slot />
   </div>
diff --git a/src/components/UserCard.vue b/src/components/UserCard.vue
index 2709cb9..fd054aa 100644
--- a/src/components/UserCard.vue
+++ b/src/components/UserCard.vue
@@ -2,11 +2,11 @@
 import { useMainStore } from "@/stores/main";
 import {
   mdiSecurity,
-  mdiTestTube,
-  mdiAccountStar,
-  mdiCodeBraces,
+  // mdiTestTube,
+  // mdiAccountStar,
+  // mdiCodeBraces,
   mdiAccountOff,
-  mdiAccountCheck,
+  // mdiAccountCheck,
 } from "@mdi/js";
 import BaseLevel from "@/components/BaseLevel.vue";
 import UserAvatarCurrentUser from "@/components/UserAvatarCurrentUser.vue";
@@ -32,11 +32,11 @@ const mainStore = useMainStore();
 
 const greeting = GetRandomMessage();
 
-var last = {
-  game: "beatmaniaIIDX",
-  version: "22 PENDUAL",
-  arcade: "Ho-House",
-};
+// var last = {
+//   game: "beatmaniaIIDX",
+//   version: "22 PENDUAL",
+//   arcade: "Ho-House",
+// };
 
 function getCardStyle(game) {
   if (game !== null) {
@@ -50,7 +50,7 @@ function getCardStyle(game) {
 </script>
 
 <template>
-  <CardBox :style="getCardStyle('iidx')">
+  <CardBox :style="getCardStyle(mainStore.userCardStyle)">
     <BaseLevel
       type="justify-around lg:justify-center md:space-x-4 lg:space-x-0"
       class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
@@ -66,24 +66,29 @@ function getCardStyle(game) {
             <b>{{ mainStore.userName }}</b>
           </h1>
           <p v-if="useSmall && !evenSmaller" class="text-md md:text-lg">
-            Last seen playing <b>{{ last.game }} {{ last.version }}</b> at
-            <b>{{ last.arcade }}</b>
+            <!-- Last seen playing <b>{{ last.game }} {{ last.version }}</b> at
+            <b>{{ last.arcade }}</b> -->
           </p>
         </div>
         <div
           v-if="!evenSmaller"
-          class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-2 flex flex-wrap gap-4 md:place-content-start place-content-center"
+          class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-1 flex flex-wrap gap-4 md:place-content-start place-content-center"
         >
-          <PillTag label="System Admin" color="danger" :icon="mdiSecurity" />
-          <PillTag label="Beta Tester" color="warning" :icon="mdiTestTube" />
-          <PillTag label="Veteran" color="success" :icon="mdiAccountStar" />
-          <PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" />
-          <PillTag label="Private Profile" color="info" :icon="mdiAccountOff" />
           <PillTag
+            v-if="mainStore.userAdmin"
+            label="System Admin"
+            color="danger"
+            :icon="mdiSecurity"
+          />
+          <!-- <PillTag label="Beta Tester" color="warning" :icon="mdiTestTube" />
+          <PillTag label="Veteran" color="success" :icon="mdiAccountStar" />
+          <PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" /> -->
+          <PillTag label="Private Profile" color="info" :icon="mdiAccountOff" />
+          <!-- <PillTag
             label="Public Profile"
             color="success"
             :icon="mdiAccountCheck"
-          />
+          /> -->
         </div>
       </div>
       <div v-if="!useSmall" class="text-center md:text-right">
diff --git a/src/components/UserEmblem.vue b/src/components/UserEmblem.vue
new file mode 100644
index 0000000..6c4afb3
--- /dev/null
+++ b/src/components/UserEmblem.vue
@@ -0,0 +1,82 @@
+<script setup>
+import { computed, watch, ref } from "vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+  size: {
+    type: Number,
+    default: 128,
+  },
+});
+
+const userProfile = ref(props.profile);
+userProfile.value.emblem = formatEmblem(userProfile.value.last?.emblem);
+const version = ref(props.version);
+
+watch(
+  () => props.version,
+  () => {
+    userProfile.value = props.profile;
+    userProfile.value.emblem = formatEmblem(userProfile.value.last?.emblem);
+  }
+);
+
+watch(
+  () => props.version,
+  () => {
+    version.value = props.version;
+  }
+);
+
+const valid_emblem_options = [
+  "background",
+  "main",
+  "ornament",
+  "effect",
+  "speech_bubble",
+];
+
+const emblemImages = computed(() => {
+  return valid_emblem_options.map((option) => {
+    const templatePath = "https://web3.phaseii.network/gameassets/emblems";
+    return `${templatePath}/${version.value}/${userProfile.value.emblem?.[option]}.png`;
+  });
+});
+
+function formatEmblem(emblem) {
+  if (emblem) {
+    return {
+      background: emblem[0],
+      main: emblem[1],
+      ornament: emblem[2],
+      effect: emblem[3],
+      speech_bubble: emblem[4],
+    };
+  }
+}
+</script>
+
+<template>
+  <div class="inner">
+    <div :style="`position: relative; width: ${size}px; height: ${size}px`">
+      <div
+        v-for="(src, index) in emblemImages"
+        :key="index"
+        style="position: absolute"
+      >
+        <img
+          :src="src"
+          :style="`width: ${size}px; height: ${size}px`"
+          class="drop-shadow-lg"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/UserQpro.vue b/src/components/UserQpro.vue
new file mode 100644
index 0000000..01be9d4
--- /dev/null
+++ b/src/components/UserQpro.vue
@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed, defineProps } from "vue";
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: null,
+  },
+  version: {
+    type: Number,
+    default: 14,
+  },
+  size: {
+    type: Number,
+    default: 128,
+  },
+});
+
+const userProfile = ref(props.profile);
+
+const assetPaths = computed(() => {
+  const templatePath = `https://web3.phaseii.network/gameassets/qpro/${props.version}`;
+  return {
+    head: `${templatePath}/head/${userProfile.value.qpro?.head}`,
+    hair: `${templatePath}/hair/${userProfile.value.qpro?.hair}`,
+    face: `${templatePath}/face/${userProfile.value.qpro?.face}`,
+    body: `${templatePath}/body/${userProfile.value.qpro?.body}`,
+    hand: `${templatePath}/hand/${userProfile.value.qpro?.hand}`,
+  };
+});
+</script>
+
+<template>
+  <div
+    class="justify-center items-center mb-4 md:mb-0 drop-shadow-xl"
+    :style="{ width: `${props.size}px`, height: `${props.size}px` }"
+  >
+    <div class="qpro-character relative w-full h-full">
+      <!-- Hair Back -->
+      <img
+        class="qpro-hair-back absolute"
+        :src="assetPaths.hair + '_b.png'"
+        alt="Hair Back"
+        style="top: -22px; left: 6px; width: 90px"
+      />
+
+      <!-- Right Arm -->
+      <img
+        class="qpro-arm-right-upper absolute"
+        :src="assetPaths.body + '_arm_r_upper.png'"
+        alt="Right Arm Upper"
+        style="top: 33px; left: -15px; width: 70px"
+      />
+      <img
+        class="qpro-arm-right-lower absolute"
+        :src="assetPaths.body + '_arm_r_lower.png'"
+        alt="Right Arm Lower"
+        style="top: 33px; left: -15px; width: 70px"
+      />
+
+      <!-- Legs -->
+      <img
+        class="qpro-leg-left-upper absolute"
+        :src="assetPaths.body + '_leg_l_upper.png'"
+        alt="Left Leg Upper"
+        style="top: 70px; left: 42px; width: 55px"
+      />
+      <img
+        class="qpro-leg-left-lower absolute"
+        :src="assetPaths.body + '_leg_l_lower.png'"
+        alt="Left Leg Lower"
+        style="top: 70px; left: 42px; width: 55px"
+      />
+      <img
+        class="qpro-leg-right-upper absolute"
+        :src="assetPaths.body + '_leg_r_upper.png'"
+        alt="Right Leg Upper"
+        style="top: 67px; left: 12px; width: 55px"
+      />
+      <img
+        class="qpro-leg-right-lower absolute"
+        :src="assetPaths.body + '_leg_r_lower.png'"
+        alt="Right Leg Lower"
+        style="top: 67px; left: 12px; width: 55px"
+      />
+
+      <!-- Body -->
+      <img
+        class="qpro-body-back absolute"
+        :src="assetPaths.body + '_b.png'"
+        alt="Body Back"
+        style="top: -45px; left: -6px; width: 400px"
+      />
+      <img
+        class="qpro-body-front absolute"
+        :src="assetPaths.body + '_f.png'"
+        alt="Body Front"
+        style="top: -45px; left: -6px; width: 400px"
+      />
+
+      <!-- Head Back -->
+      <img
+        class="qpro-head-back absolute"
+        :src="assetPaths.head + '_b.png'"
+        alt="Head Back"
+        style="top: -20px; left: 15px; width: 80px"
+      />
+
+      <!-- Face -->
+      <img
+        class="qpro-face absolute"
+        :src="assetPaths.face + '.png'"
+        alt="Face"
+        style="top: -5px; left: 30px; width: 50px"
+      />
+
+      <!-- Hair Front -->
+      <img
+        class="qpro-hair-front absolute"
+        :src="assetPaths.hair + '_f.png'"
+        alt="Hair Front"
+        style="top: -23px; left: 9px; width: 96px"
+      />
+
+      <!-- Left Arm -->
+      <img
+        class="qpro-arm-left-upper absolute"
+        :src="assetPaths.body + '_arm_l_upper.png'"
+        alt="Left Arm Upper"
+        style="top: 35px; left: 53px; width: 70px"
+      />
+      <img
+        class="qpro-arm-left-lower absolute"
+        :src="assetPaths.body + '_arm_l_lower.png'"
+        alt="Left Arm Lower"
+        style="top: 35px; left: 53px; width: 70px"
+      />
+
+      <!-- Hands -->
+      <img
+        class="qpro-hand-left absolute"
+        :src="assetPaths.hand + '_l.png'"
+        alt="Left Hand"
+        style="top: -25px; left: 45px; width: 70px"
+      />
+      <img
+        class="qpro-hand-right absolute"
+        :src="assetPaths.hand + '_r.png'"
+        alt="Right Hand"
+        style="top: 0px; left: -13px; width: 70px"
+      />
+
+      <!-- Head Front -->
+      <img
+        class="qpro-head-front absolute"
+        :src="assetPaths.head + '_f.png'"
+        alt="Head Front"
+        style="top: -20px; left: 15px; width: 80px"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qpro-character img {
+  width: auto;
+  height: auto;
+}
+</style>
diff --git a/src/constants/danClass.js b/src/constants/danClass.js
index c5c2c04..fea27fd 100644
--- a/src/constants/danClass.js
+++ b/src/constants/danClass.js
@@ -1,5 +1,7 @@
 export class IIDXDanConstants {
   static danList = [
+    { id: 0, label: "--", short: "--" },
+
     { id: 100, label: "7th Kyu (七級)", short: "七級" },
     { id: 200, label: "6th Kyu (六級)", short: "六級" },
     { id: 300, label: "5th Kyu (五級)", short: "五級" },
@@ -24,9 +26,8 @@ export class IIDXDanConstants {
 }
 
 export function getIIDXDan(level) {
-  var val = IIDXDanConstants.danList.find((x) => x.id == level);
-  if (!val) {
-    val = { id: 0, label: "--", short: "--" };
+  if (level == 0) {
+    return { id: 0, label: "--", short: "--" };
   }
-  return val;
+  return IIDXDanConstants.danList.find((x) => x.id == level);
 }
diff --git a/src/constants/ddrSettings.js b/src/constants/ddrSettings.js
new file mode 100644
index 0000000..a1c6798
--- /dev/null
+++ b/src/constants/ddrSettings.js
@@ -0,0 +1,40 @@
+export const DDRSettings = [
+  {
+    id: "fastSlow",
+    name: "Fast/Slow Display",
+    help: "Enable or disable displaying of Fast/Slow",
+    type: Boolean,
+  },
+  {
+    id: "comboPosition",
+    name: "Combo Position",
+    help: "Change order of the combo and notes",
+    type: Boolean,
+  },
+  {
+    id: "weight",
+    name: "Weight (kg)",
+    help: "Set your weight for in-game workout mode",
+    type: Number,
+  },
+  {
+    id: "dancer",
+    name: "Character",
+    help: "Set your background dancer",
+    type: Array,
+    options: [
+      { id: 0, label: "Afro" },
+      { id: 1, label: "Emi" },
+    ],
+  },
+  {
+    id: "arrow",
+    name: "Arrow Skin",
+    help: "Set your arrow skin",
+    type: Array,
+    options: [
+      { id: 0, label: "Normal" },
+      { id: 1, label: "Classic" },
+    ],
+  },
+];
diff --git a/src/constants/greetings.json b/src/constants/greetings.json
index 5d02daf..bebb2f1 100644
--- a/src/constants/greetings.json
+++ b/src/constants/greetings.json
@@ -148,5 +148,145 @@
         "author": "Trmazi",
         "header": "<username> is the DJ of this gig!",
         "comment": "Are you good, or are you cool?"
+    },
+    {
+        "author": "Yonokid",
+        "header": "<username>. In the WebbedUI. Straight up \"Phase'n it\".",
+        "comment": "and by \"it\", haha, well, let's justr say; My II"
+    },
+    {
+        "author": "SQWERLY!",
+        "header": "<username> always told me that it was just a phase…",
+        "comment": "It wasn't a Phase, it was a PhaseII!"
+    },
+    {
+        "author": "yaladre",
+        "header": "<username>, is your refrigerator running?",
+        "comment": "Because you better go catch it!"
+    },
+    {
+        "author": "Kuusetsu",
+        "header": "If C's get degrees, <username>",
+        "comment": "You'd still fail."
+    },
+    {
+        "author": "Azui",
+        "header": "Ready to break the future, <username>?",
+        "comment": "All your MFCs are belong to us!"
+    },
+    {
+        "author": "towelie",
+        "header": "Don't forget to bring a towel, <username>!",
+        "comment": ""
+    },
+    {
+        "author": "barru",
+        "header": "Reject modernity, <username>.",
+        "comment": "Embrace BEMANI."
+    },
+    {
+        "author": "barru",
+        "header": "Insert <username>'s greeting here",
+        "comment": "Insert caption here"
+    },
+    {
+        "author": "barru",
+        "header": "Welcome back, <username>!",
+        "comment": "We’re glad to have you."
+    },
+    {
+        "author": "barru",
+        "header": "Nice scores, <username>!",
+        "comment": "You never fail to impress."
+    },
+    {
+        "author": "Galexion",
+        "header": "Initializing User <username>...",
+        "comment": "Communicating With Server... Please Wait..."
+    },
+    {
+        "author": "Roganis",
+        "header": "If Phase is so cool, why didn't they make a second one, <username>?",
+        "comment": "Spoiler alert : they did."
+    },
+    {
+        "author": "Shilofax",
+        "header": "Hello, <username>!",
+        "comment": "May we interest you in a Comcast outage?"
+    },
+    {
+        "author": "Nevy",
+        "header": "Answer the question, <username>.",
+        "comment": "Why was nibs banned?"
+    },
+    {
+        "author": "barru",
+        "header": "Go For The Top, <username>!",
+        "comment": "You can do it."
+    },
+    {
+        "author": "TOPET",
+        "header": "Welcome to PhaseII, <username>!",
+        "comment": "Thank You For Playing!"
+    },
+    {
+        "author": "Manamaster",
+        "header": "Are you excited for IIDX 40 <username>?",
+        "comment": "Lawnmower Edition! So hyped!"
+    },
+    {
+        "author": "Manamaster",
+        "header": "Have you heard of Beatcraft Cyclon <username>?",
+        "comment": "It's super good I swear. You should play it. You really should."
+    },
+    {
+        "author": "Azui",
+        "header": "Do you think about me, <username>?",
+        "comment": "-EGOISM 440-"
+    },
+    {
+        "author": "Manamaster",
+        "header": "Go for Infini-Dan <username>!",
+        "comment": "You can do it!"
+    },
+    {
+        "author": "Manamaster",
+        "header": "Have you played portal on the Xbox 360 <username>?",
+        "comment": "Its ffffffrrrrrreeeeeeeeeee"
+    },
+    {
+        "author": "Ho",
+        "header": "You showed us the ultimate <username>! Thank you very much.",
+        "comment": "I can't stop crying buckets of tears! *sobs*"
+    },
+    {
+        "author": "Ho",
+        "header": "I can see a dream in your dance. I can see <username> in your dance.",
+        "comment": "We can call it \"our hope.\""
+    },
+    {
+        "author": "Ho",
+        "header": "Your thundering sound became the flash <username> that pierces soul of crowd,",
+        "comment": "get the whole world into the Voltex...next generation music game."
+    },
+    {
+        "author": "snowy324",
+        "header": "R U ready 2 go insida DJ Box, <username>?",
+        "comment": "~EZ2DJ was there~"
+    },
+    {
+        "author": "Ho",
+        "header": "Don't talk about data, <username>.",
+        "comment": "Konmai will sue!"
+    },
+    {
+        "author": "Ho",
+        "header": "A real-time dance music game hard and fat. That's <username>!!",
+        "comment": "They're too cool!"
+    },
+    {
+        "author": "Ho",
+        "header": "Dancing Stage featuring <username>'s RAVE",
+        "comment": "ミッキーたちのDJで踊ろう!"
     }
 ]
\ No newline at end of file
diff --git a/src/constants/iidxSettings.js b/src/constants/iidxSettings.js
new file mode 100644
index 0000000..77d87e8
--- /dev/null
+++ b/src/constants/iidxSettings.js
@@ -0,0 +1,40 @@
+export const IIDXSettings = [
+  {
+    id: "fastSlow",
+    name: "Fast/Slow Display",
+    help: "Enable or disable displaying of Fast/Slow",
+    type: Boolean,
+  },
+  {
+    id: "comboPosition",
+    name: "Combo Position",
+    help: "Change order of the combo and notes",
+    type: Boolean,
+  },
+  {
+    id: "weight",
+    name: "Weight (kg)",
+    help: "Set your weight for in-game workout mode",
+    type: Number,
+  },
+  {
+    id: "dancer",
+    name: "Character",
+    help: "Set your background dancer",
+    type: Array,
+    options: [
+      { id: 0, label: "Afro" },
+      { id: 1, label: "Emi" },
+    ],
+  },
+  {
+    id: "arrow",
+    name: "Arrow Skin",
+    help: "Set your arrow skin",
+    type: Array,
+    options: [
+      { id: 0, label: "Normal" },
+      { id: 1, label: "Classic" },
+    ],
+  },
+];
diff --git a/src/constants/index.js b/src/constants/index.js
index 5f15202..2706c10 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -214,6 +214,7 @@ export class VersionConstants {
   static POPN_MUSIC_USANEKO = 24;
   static POPN_MUSIC_PEACE = 25;
   static POPN_MUSIC_KAIMEI_RIDDLES = 26;
+  static POPN_MUSIC_UNILAB = 27;
 
   static QMA = 1;
   static QMA_II = 2;
@@ -327,6 +328,10 @@ export const gameData = [
     icon: null,
     cardBG: null,
     noRivals: true,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.BEATSTREAM,
@@ -346,6 +351,11 @@ export const gameData = [
     noRivals: true,
     noScores: true,
     noRecords: true,
+    skip: true,
+    playerHeaders: [
+      { text: "Region", value: "region", sortable: true, width: 100 },
+      { text: "Home Arcade", value: "homeArcade", sortable: true, width: 150 },
+    ],
   },
   {
     id: GameConstants.BISHI_BASHI_NEW,
@@ -365,6 +375,7 @@ export const gameData = [
     noRivals: true,
     noScores: true,
     noRecords: true,
+    skip: true,
   },
   {
     id: GameConstants.DANCE_RUSH,
@@ -372,6 +383,10 @@ export const gameData = [
     icon: null,
     cardBG: null,
     noRivals: true,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.DANCE_RUSH_STARDOM,
@@ -385,6 +400,11 @@ export const gameData = [
     shortName: "DDR",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "EX Score", value: "exscore" },
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.DDR_1ST_MIX,
@@ -520,6 +540,11 @@ export const gameData = [
     name: "DDR OmniMIX",
     icon: "/assets/icon/ddr.png",
     cardBG: "/assets/card/ddr.png",
+    scoreHeaders: [
+      { text: "EX Score", value: "exscore" },
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.DDR_1ST_MIX,
@@ -600,6 +625,21 @@ export const gameData = [
     name: "DRUMMANIA",
     icon: null,
     cardBG: null,
+    playerHeaders: [
+      { text: "SKILL LEVEL", value: "skill.level", sortable: true, width: 120 },
+      {
+        text: "SKILL POINT",
+        value: "skill.point",
+        sortable: true,
+        width: 150,
+      },
+    ],
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+      { text: "Skill %", value: "skill.perc" },
+      { text: "Skill Point", value: "skill.point" },
+    ],
     versions: [
       {
         id: VersionConstants.DRUMMANIA_1ST,
@@ -720,6 +760,20 @@ export const gameData = [
     icon: null,
     cardBG: null,
     noRivals: true,
+    playerHeaders: [
+      {
+        text: "SKILL POINT",
+        value: "skill.point",
+        sortable: true,
+        width: 150,
+      },
+    ],
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+      { text: "Skill %", value: "skill.perc" },
+      { text: "Skill Point", value: "skill.point" },
+    ],
     versions: GITADORA_VERSION_DATA,
   },
   {
@@ -728,6 +782,20 @@ export const gameData = [
     icon: null,
     cardBG: null,
     noRivals: true,
+    playerHeaders: [
+      {
+        text: "SKILL POINT",
+        value: "skill.point",
+        sortable: true,
+        width: 150,
+      },
+    ],
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+      { text: "Skill %", value: "skill.perc" },
+      { text: "Skill Point", value: "skill.point" },
+    ],
     versions: GITADORA_VERSION_DATA,
   },
   {
@@ -735,6 +803,21 @@ export const gameData = [
     name: "GUITAR FREAKS",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+      { text: "Skill %", value: "skill.perc" },
+      { text: "Skill Point", value: "skill.point" },
+    ],
+    playerHeaders: [
+      { text: "SKILL LEVEL", value: "skill.level", sortable: true, width: 120 },
+      {
+        text: "SKILL POINT",
+        value: "skill.point",
+        sortable: true,
+        width: 150,
+      },
+    ],
     versions: [
       {
         id: VersionConstants.GUITARFREAKS_1ST,
@@ -820,6 +903,29 @@ export const gameData = [
     shortName: "IIDX",
     icon: "/assets/icon/iidx.png",
     cardBG: "/assets/card/iidx.png",
+    scoreHeaders: [
+      { text: "EX Score", value: "exscore" },
+      { text: "Combos", value: "combo" },
+      { text: "Misses", value: "misses" },
+      { text: "Halo", value: "halo" },
+      { text: "Gauge %", value: "gauge" },
+    ],
+    playerHeaders: [
+      { text: "SP DAN", value: "sgrade", width: 100 },
+      { text: "DP DAN", value: "dgrade", width: 100 },
+      {
+        text: "SP DJPOINT",
+        value: "stats.single_dj_points",
+        sortable: true,
+        width: 150,
+      },
+      {
+        text: "DP DJPOINT",
+        value: "stats.double_dj_points",
+        sortable: true,
+        width: 150,
+      },
+    ],
     versions: [
       {
         id: VersionConstants.IIDX,
@@ -951,6 +1057,22 @@ export const gameData = [
     noRivals: true,
     noScores: true,
     noRecords: true,
+    playerHeaders: [
+      { text: "SP DAN", value: "sgrade", width: 100 },
+      { text: "DP DAN", value: "dgrade", width: 100 },
+      {
+        text: "SP DJPOINT",
+        value: "stats.single_dj_points",
+        sortable: true,
+        width: 150,
+      },
+      {
+        text: "DP DJPOINT",
+        value: "stats.double_dj_points",
+        sortable: true,
+        width: 150,
+      },
+    ],
     versions: [
       {
         id: VersionConstants.IIDX,
@@ -1035,6 +1157,14 @@ export const gameData = [
     name: "jubeat",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+      { text: "Music Rate", value: "rate" },
+    ],
+    playerHeaders: [
+      { text: "Jubility", value: "jubility", sortable: true, width: 120 },
+    ],
     versions: [
       {
         id: VersionConstants.JUBEAT,
@@ -1102,6 +1232,10 @@ export const gameData = [
     noRivals: true,
     noScores: true,
     noRecords: true,
+    skip: true,
+    playerHeaders: [
+      { text: "Girlfriend", value: "gf", sortable: true, width: 100 },
+    ],
     versions: [
       {
         id: VersionConstants.LOVEPLUS_ARCADE,
@@ -1128,6 +1262,10 @@ export const gameData = [
     name: "Museca",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.MUSECA,
@@ -1144,6 +1282,10 @@ export const gameData = [
     name: "Nostalgia",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.NOSTALGIA,
@@ -1199,6 +1341,10 @@ export const gameData = [
     shortName: "pop'n",
     icon: "/assets/icon/popn.png",
     cardBG: "/assets/card/popn.png",
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.POPN_MUSIC,
@@ -1304,6 +1450,10 @@ export const gameData = [
         id: VersionConstants.POPN_MUSIC_KAIMEI_RIDDLES,
         label: "解明リドルズ (Kaimei riddles)",
       },
+      {
+        id: VersionConstants.POPN_MUSIC_UNILAB,
+        label: "UniLab",
+      },
     ],
   },
   {
@@ -1321,6 +1471,11 @@ export const gameData = [
     name: "ReflecBeat",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Misses", value: "misses" },
+      { text: "Halo", value: "halo" },
+    ],
     versions: [
       {
         id: VersionConstants.REFLEC_BEAT,
@@ -1364,6 +1519,14 @@ export const gameData = [
     shortName: "SDVX",
     icon: null,
     cardBG: null,
+    scoreHeaders: [
+      { text: "Combos", value: "combo" },
+      { text: "Halo", value: "halo" },
+    ],
+    playerHeaders: [
+      { text: "Skill Level", value: "skillLevel", sortable: true, width: 100 },
+      { text: "VOLFORCE", value: "vf", sortable: true, width: 100 },
+    ],
     versions: [
       {
         id: VersionConstants.SDVX_BOOTH,
@@ -1391,65 +1554,25 @@ export const gameData = [
       },
     ],
   },
-];
-
-export const arcadeList = [
   {
-    id: 0,
-    name: "Speakeasy Smashcade",
-    area: "US-IL",
-    image: "https://i.imgur.com/HApAZgW.gif",
-    address: null,
-    show_address: false,
-    public: true,
-    beta: true,
-    paseli: true,
-    infinite_paseli: true,
-    maintenance: false,
-    admins: ["Trmazi", "SpeakEZ", "kohai"],
+    id: GameConstants.TSUMTSUM,
+    name: "Tsum Tsum",
+    icon: "/assets/icon/tsum.png",
+    cardBG: "/assets/card/tsum.png",
+    skip: false,
+    noRivals: true,
+    noScores: false,
+    noRecords: true,
   },
   {
-    id: 1,
-    name: "Boss Battle Games",
-    area: "US-IN",
-    image:
-      "https://scontent-ord5-2.xx.fbcdn.net/v/t1.6435-9/118871039_2818450415068886_7737385160957713953_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=8bfeb9&_nc_ohc=W8tEpuL3C14AX8XL09Z&_nc_ht=scontent-ord5-2.xx&oh=00_AfAneLjV1pukiSgE7S0Q6e-g6VFYEHSyFVk-kQh5elofJw&oe=64B49BD7",
-    address: "6020 E. 82nd St, Indianapolis, Indiana 46250",
-    show_address: true,
-    public: true,
-    beta: true,
-    paseli: true,
-    infinite_paseli: false,
-    maintenance: false,
-    admins: ["Trmazi", "Pat", "Jeff"],
-  },
-  {
-    id: 2,
-    name: "BladeCN",
-    area: "GB",
-    image:
-      "https://media.discordapp.net/attachments/717595745275871232/1119697819020824616/image.png",
-    address: "6020 E. 82nd St",
-    show_address: false,
-    public: true,
-    beta: false,
-    paseli: true,
-    infinite_paseli: true,
-    maintenance: false,
-    admins: ["blade"],
-  },
-  {
-    id: 3,
-    name: "GhettoCade",
-    area: "US-IN",
-    image: "https://ik.imagekit.io/suedbykonami/arcade/card/IMG_7096.jpg",
-    show_address: false,
-    public: true,
-    beta: true,
-    paseli: true,
-    infinite_paseli: true,
-    maintenance: false,
-    admins: ["Trmazi"],
+    id: GameConstants.ROAD_FIGHTERS,
+    name: "Road Fighters 3D",
+    icon: "/assets/icon/rf.png",
+    cardBG: "/assets/card/rf.png",
+    skip: true,
+    noRivals: true,
+    noScores: true,
+    noRecords: true,
   },
 ];
 
diff --git a/src/css/_table.css b/src/css/_table.css
deleted file mode 100644
index 962b9af..0000000
--- a/src/css/_table.css
+++ /dev/null
@@ -1,48 +0,0 @@
-@layer base {
-  table {
-    @apply w-full;
-  }
-  
-  thead {
-    @apply hidden lg:table-header-group;
-  }
-  
-  tr {
-    @apply max-w-full block relative border-b-4 border-gray-100
-      lg:table-row lg:border-b-0 dark:border-slate-800;
-  }
-  
-  tr:last-child {
-    @apply border-b-0;
-  }
-  
-  td:not(:first-child) {
-    @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
-  }
-  
-  th {
-    @apply lg:text-left lg:p-3;
-  }
-  
-  td {
-    @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
-      lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
-  }
-  
-  td:last-child {
-    @apply border-b-0;
-  }
-  
-  tbody tr, tbody tr:nth-child(odd) {
-    @apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
-  }
-  
-  tbody tr:nth-child(odd) {
-    @apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
-  }
-  
-  td:before {
-    content: attr(data-label);
-    @apply font-semibold pr-3 text-left lg:hidden;
-  }
-}
diff --git a/src/css/main.css b/src/css/main.css
index 248523a..5a97b3d 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -5,7 +5,6 @@
 @import "_checkbox-radio-switch.css";
 @import "_progress.css";
 @import "_scrollbars.css";
-@import "_table.css";
 
 .scale-enter-active,
 .scale-leave-active {
@@ -20,10 +19,4 @@
 
 img {
   pointer-events: none;
-}
-
-body {
-  -webkit-user-select: none; /* Safari */
-  -ms-user-select: none; /* IE 10 and IE 11 */
-  user-select: none; /* Standard syntax */
 }
\ No newline at end of file
diff --git a/src/layouts/LayoutAuthenticated.vue b/src/layouts/LayoutAuthenticated.vue
index e843156..609d853 100644
--- a/src/layouts/LayoutAuthenticated.vue
+++ b/src/layouts/LayoutAuthenticated.vue
@@ -1,8 +1,14 @@
 <script setup>
-import { mdiForwardburger, mdiBackburger, mdiMenu } from "@mdi/js";
-import { ref } from "vue";
+import {
+  mdiForwardburger,
+  mdiBackburger,
+  mdiMenu,
+  mdiMonitor,
+  mdiStoreCog,
+  mdiGamepad,
+} from "@mdi/js";
+import { ref, watch, onMounted, computed } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import menuAside from "@/menuAside.js";
 import menuNavBar from "@/menuNavBar.js";
 import { useMainStore } from "@/stores/main.js";
 import { useStyleStore } from "@/stores/style.js";
@@ -12,21 +18,85 @@ import NavBar from "@/components/NavBar.vue";
 import NavBarItemPlain from "@/components/NavBarItemPlain.vue";
 import AsideMenu from "@/components/Menus/AsideMenu.vue";
 import FooterBar from "@/components/FooterBar.vue";
+import { loadUserAuthKey, deleteUserAuthKey } from "@/stores/auth";
+import { gameData } from "@/constants";
 
-useMainStore().setUser({
-  name: "Trmazi",
-  email: "sex@sex.com",
-  avatar:
-    "https://cdn.discordapp.com/avatars/372530806628941824/a2d1b66d0e2100a571305b8281c26f8b",
+const router = useRouter();
+const route = useRoute();
+const userKey = loadUserAuthKey();
+
+if (!userKey) {
+  router.push({
+    name: "login",
+  });
+}
+
+const mainStore = useMainStore();
+onMounted(async () => {
+  try {
+    const validSession = await mainStore.loadUser();
+    if (!validSession) {
+      mainStore.deleteUserSession();
+      deleteUserAuthKey();
+      router.push({
+        name: "login",
+      });
+    }
+  } catch (error) {
+    console.error("Failed to check SessionID:", error);
+    mainStore.deleteUserSession();
+    deleteUserAuthKey();
+    router.push({
+      name: "login",
+    });
+  }
 });
 
+const loading = ref(mainStore.isLoading);
+const saving = ref(mainStore.isSaving);
+const errorCode = ref(mainStore.errorCode);
+const userLoaded = ref(mainStore.userLoaded);
+const userArcades = ref(mainStore.userArcades);
+
+watch(
+  () => mainStore.isLoading,
+  (newValue) => {
+    loading.value = newValue;
+  }
+);
+
+watch(
+  () => mainStore.isSaving,
+  (newValue) => {
+    saving.value = newValue;
+  }
+);
+
+watch(
+  () => mainStore.errorCode,
+  (newValue) => {
+    errorCode.value = newValue;
+  }
+);
+
+watch(
+  () => mainStore.userLoaded,
+  (newValue) => {
+    userLoaded.value = newValue;
+  }
+);
+
+watch(
+  () => mainStore.userArcades,
+  (newValue) => {
+    userArcades.value = newValue;
+  }
+);
+
 const layoutAsidePadding = "xl:pl-60";
 
 const styleStore = useStyleStore();
 
-const router = useRouter();
-const route = useRoute();
-
 const isAsideMobileExpanded = ref(false);
 const isAsideLgActive = ref(false);
 
@@ -37,12 +107,38 @@ router.beforeEach(() => {
 
 const menuClick = (event, item) => {
   if (item.isLogout) {
-    //
+    deleteUserAuthKey();
+    router.push({
+      name: "login",
+    });
   }
 };
 
-const active = false;
-const isSave = true;
+const menuAside = computed(() => {
+  const sortedGames = gameData
+    .filter((game) => !game.skip)
+    .map((game) => ({
+      label: game.shortName || game.name,
+      to: `/games/${game.id}`,
+    }));
+
+  const sortedArcades = mainStore.userArcades.map((arcade) => ({
+    label: arcade.name,
+    to: `/arcade/${arcade.id}`,
+    // menu: [
+    //   { label: "Overview", to: `/arcade/${arcade.id}` },
+    //   { label: "Event Settings", to: `/arcade/${arcade.id}/events` },
+    //   { label: "Machine List", to: `/arcade/${arcade.id}/machines` },
+    //   { label: "PASELI", to: `/arcade/${arcade.id}/paseli` },
+    // ],
+  }));
+
+  return [
+    { to: "/", icon: mdiMonitor, label: "Dashboard" },
+    { label: "My Arcades", icon: mdiStoreCog, menu: sortedArcades },
+    { label: "Games", icon: mdiGamepad, menu: sortedGames },
+  ];
+});
 </script>
 
 <template>
@@ -54,12 +150,17 @@ const isSave = true;
     }"
   >
     <LoadingModal
-      :active="active"
-      :is-save="isSave"
+      :active="loading || saving"
+      :is-save="saving"
+      :error-code="errorCode"
       class="transition-opacity duration-300 ease-out"
-      :class="{ 'opacity-100': active, 'opacity-0': !active }"
+      :class="{
+        'opacity-100': loading || saving,
+        'opacity-0': !loading && !saving,
+      }"
     />
     <div
+      v-if="userLoaded"
       :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
       class="pt-14 min-h-screen w-screen lg:w-auto bg-gradient-to-b from-slate-900 from-5% via-slate-800 via-10% to-slate-800 to-85% dark:text-slate-100"
     >
@@ -145,4 +246,12 @@ const isSave = true;
   animation-name: fadeInUp;
   -webkit-animation-name: fadeInUp;
 }
+
+.arrow {
+  color: white;
+}
+
+.next-page__click-button {
+  color: white;
+}
 </style>
diff --git a/src/layouts/LayoutGuest.vue b/src/layouts/LayoutGuest.vue
index f3e78d8..3377eea 100644
--- a/src/layouts/LayoutGuest.vue
+++ b/src/layouts/LayoutGuest.vue
@@ -39,6 +39,7 @@ const styleStore = useStyleStore();
   }
 }
 
+/* Define animated class */
 .animated {
   animation-duration: 0.7s;
   animation-fill-mode: both;
@@ -46,6 +47,7 @@ const styleStore = useStyleStore();
   -webkit-animation-fill-mode: both;
 }
 
+/* Define custom class for fade in animation */
 .animatedFadeInUp {
   opacity: 0;
 }
@@ -55,4 +57,14 @@ const styleStore = useStyleStore();
   animation-name: fadeInUp;
   -webkit-animation-name: fadeInUp;
 }
+
+/* Media query for smaller screens */
+@media screen and (max-width: 768px) {
+  .animatedFadeInUp,
+  .fadeInUp {
+    opacity: 1;
+    animation-name: none !important;
+    -webkit-animation-name: none !important;
+  }
+}
 </style>
diff --git a/src/main.js b/src/main.js
index dc607e9..1c8f577 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,42 +1,29 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import Vue3EasyDataTable from "vue3-easy-data-table";
+import "vue3-easy-data-table/dist/style.css";
 
 import App from "./App.vue";
 import router from "./router";
 import { useMainStore } from "@/stores/main.js";
-// import { useStyleStore } from "@/stores/style.js";
-// import { styleKey } from "@/config.js";
 
 import "./css/main.css";
 
-/* Init Pinia */
 const pinia = createPinia();
 
-/* Create Vue app */
-createApp(App).use(router).use(pinia).mount("#app");
+const app = createApp(App);
 
-/* Init Pinia stores */
-const mainStore = useMainStore(pinia);
-// const styleStore = useStyleStore(pinia);
+app.use(router);
+app.use(pinia);
 
-/* Fetch sample data */
-mainStore.fetch("clients");
-mainStore.fetch("history");
+app.component("EasyDataTable", Vue3EasyDataTable);
 
-/* App style 
-styleStore.setStyle(localStorage[styleKey] ?? "basic");
-*/
+app.mount("#app");
 
-/* Dark mode 
-styleStore.setDarkMode(
-  window.matchMedia("(prefers-color-scheme: dark)").matches
-);
-*/
+useMainStore(pinia);
 
-/* Default title tag */
 const defaultDocumentTitle = "PhaseII eAmusement Network";
 
-/* Set document title from route meta */
 router.afterEach((to) => {
   document.title = to.meta?.title
     ? `${to.meta.title} — ${defaultDocumentTitle}`
diff --git a/src/menuAside.js b/src/menuAside.js
deleted file mode 100644
index 72fb0cf..0000000
--- a/src/menuAside.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  mdiMonitor,
-  mdiNewspaperVariant,
-  mdiStorefront,
-  mdiStoreCog,
-  mdiGamepad,
-} from "@mdi/js";
-
-import { gameData, arcadeList } from "./constants";
-
-var sortedMenu = [];
-for (const game of gameData) {
-  if (!game.skip) {
-    const menuItems = [
-      "overview",
-      "rivals",
-      "net_records",
-      "net_scores",
-      "my_records",
-      "my_scores",
-    ];
-    var menu = [];
-
-    for (const item of menuItems) {
-      if (item === "overview") {
-        menu.push({ label: "Overview", to: `/games/${game.id}` });
-      } else if (item == "rivals" && !game.noRivals) {
-        menu.push({ label: "Rivals", to: `/games/${game.id}/rivals` });
-      } else if (item == "net_records" && !game.noRecords) {
-        menu.push({
-          label: "Network Records",
-          to: `/games/${game.id}/records`,
-        });
-      } else if (item == "net_scores" && !game.noScores) {
-        menu.push({
-          label: "Network Scores",
-          to: `/games/${game.id}/scores`,
-        });
-      } else if (item == "my_records" && !game.noRecords) {
-        menu.push({
-          label: "Personal Records",
-          to: `/games/${game.id}/records/1`,
-        });
-      } else if (item == "my_scores" && !game.noScores) {
-        menu.push({
-          label: "Personal Scores",
-          to: `/games/${game.id}/scores/1`,
-        });
-      }
-    }
-
-    sortedMenu.push({
-      label: game.shortName ? game.shortName : game.name,
-      menu: menu,
-    });
-  }
-}
-
-var sortedArcades = [];
-for (const arcade of arcadeList) {
-  if (!arcade.skip) {
-    sortedArcades.push({
-      label: arcade.name,
-      menu: [
-        { label: "Overview", to: `/arcade/${arcade.id}` },
-        { label: "Event Settings", to: `/arcade/${arcade.id}/events` },
-        { label: "Machine List", to: `/arcade/${arcade.id}/machines` },
-        { label: "PASELI", to: `/arcade/${arcade.id}/paseli` },
-      ],
-    });
-  }
-}
-
-export default [
-  {
-    to: "/",
-    icon: mdiMonitor,
-    label: "Dashboard",
-  },
-  {
-    to: "/news",
-    icon: mdiNewspaperVariant,
-    label: "News",
-  },
-  {
-    to: "/arcades",
-    icon: mdiStorefront,
-    label: "Public Arcades",
-  },
-  {
-    label: "My Arcades",
-    icon: mdiStoreCog,
-    menu: sortedArcades,
-  },
-  {
-    label: "Games",
-    icon: mdiGamepad,
-    menu: sortedMenu,
-  },
-];
diff --git a/src/menuNavBar.js b/src/menuNavBar.js
index f559d66..108753e 100644
--- a/src/menuNavBar.js
+++ b/src/menuNavBar.js
@@ -1,10 +1,7 @@
 import {
-  mdiCogs,
   mdiAccount,
   mdiLogout,
   mdiServerNetwork,
-  mdiBrushOutline,
-  mdiFlagCheckered,
   mdiCardAccountDetailsOutline,
 } from "@mdi/js";
 
@@ -17,11 +14,6 @@ export default [
         label: "Settings",
         to: "/profile",
       },
-      {
-        icon: mdiBrushOutline,
-        label: "Customizations",
-        to: "/profile/customize",
-      },
       {
         icon: mdiServerNetwork,
         label: "Integrations",
@@ -34,15 +26,15 @@ export default [
       },
     ],
   },
-  {
-    to: "/goals",
-    icon: mdiFlagCheckered,
-    label: "Goals",
-  },
-  {
-    icon: mdiCogs,
-    label: "Edit Dashboard",
-  },
+  // {
+  //   to: "/goals",
+  //   icon: mdiFlagCheckered,
+  //   label: "Goals",
+  // },
+  // {
+  //   icon: mdiCogs,
+  //   label: "Edit Dashboard",
+  // },
   {
     icon: mdiLogout,
     label: "Log out",
diff --git a/src/router/index.js b/src/router/index.js
index 7344eec..ec98f36 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,14 +10,6 @@ const routes = [
     name: "dashboard",
     component: Home,
   },
-  {
-    meta: {
-      title: "News",
-    },
-    path: "/news",
-    name: "news",
-    component: () => import("@/views/NewsView.vue"),
-  },
   {
     meta: {
       title: "News Post",
@@ -42,14 +34,14 @@ const routes = [
     name: "register",
     component: () => import("@/views/Auth/RegisterView.vue"),
   },
-  {
-    meta: {
-      title: "Reset Password",
-    },
-    path: "/auth/reset",
-    name: "reset_pass",
-    component: () => import("@/views/Auth/ResetView.vue"),
-  },
+  // {
+  //   meta: {
+  //     title: "Reset Password",
+  //   },
+  //   path: "/auth/reset",
+  //   name: "reset_pass",
+  //   component: () => import("@/views/Auth/ResetView.vue"),
+  // },
   {
     meta: {
       title: "Profile",
@@ -58,14 +50,14 @@ const routes = [
     name: "profile",
     component: () => import("@/views/Profile/ProfileView.vue"),
   },
-  {
-    meta: {
-      title: "Customizations",
-    },
-    path: "/profile/customize",
-    name: "profile_customizations",
-    component: () => import("@/views/Profile/CustomizeView.vue"),
-  },
+  // {
+  //   meta: {
+  //     title: "Customizations",
+  //   },
+  //   path: "/profile/customize",
+  //   name: "profile_customizations",
+  //   component: () => import("@/views/Profile/CustomizeView.vue"),
+  // },
   {
     meta: {
       title: "Integrations",
@@ -82,14 +74,14 @@ const routes = [
     name: "profile_cards",
     component: () => import("@/views/Profile/CardsView.vue"),
   },
-  {
-    meta: {
-      title: "Goals",
-    },
-    path: "/goals",
-    name: "profile_goals",
-    component: () => import("@/views/Profile/GoalsView.vue"),
-  },
+  // {
+  //   meta: {
+  //     title: "Goals",
+  //   },
+  //   path: "/goals",
+  //   name: "profile_goals",
+  //   component: () => import("@/views/Profile/GoalsView.vue"),
+  // },
   {
     meta: {
       title: "View Profile",
@@ -101,14 +93,14 @@ const routes = [
       hotReload: true, // disables Hot Reload
     },
   },
-  {
-    meta: {
-      title: "Public Arcades",
-    },
-    path: "/arcades",
-    name: "arcade_list",
-    component: () => import("@/views/ArcadesView.vue"),
-  },
+  // {
+  //   meta: {
+  //     title: "Public Arcades",
+  //   },
+  //   path: "/arcades",
+  //   name: "arcade_list",
+  //   component: () => import("@/views/ArcadesView.vue"),
+  // },
   {
     meta: {
       title: "Arcade Overview",
@@ -165,7 +157,7 @@ const routes = [
     meta: {
       title: "View Profile",
     },
-    path: "/games/:game/profiles/:userID/",
+    path: "/games/:game/profiles/:userId/",
     name: "game_profile",
     component: () => import("@/views/Game/PlayerView.vue"),
     options: {
@@ -176,7 +168,7 @@ const routes = [
     meta: {
       title: "Edit Profile",
     },
-    path: "/games/:game/profiles/:userID/edit",
+    path: "/games/:game/edit",
     name: "edit_profile",
     component: () => import("@/views/Game/EditView.vue"),
     options: {
@@ -194,28 +186,28 @@ const routes = [
       hotReload: true, // disables Hot Reload
     },
   },
-  {
-    meta: {
-      title: "View Scores",
-    },
-    path: "/games/:game/scores/:userID",
-    name: "personal_scores",
-    component: () => import("@/views/Game/PersonalScores.vue"),
-    options: {
-      hotReload: true, // disables Hot Reload
-    },
-  },
-  {
-    meta: {
-      title: "Network Scores",
-    },
-    path: "/games/:game/scores",
-    name: "all_scores",
-    component: () => import("@/views/Game/NetworkScores.vue"),
-    options: {
-      hotReload: true, // disables Hot Reload
-    },
-  },
+  // {
+  //   meta: {
+  //     title: "View Scores",
+  //   },
+  //   path: "/games/:game/scores/:userId",
+  //   name: "personal_scores",
+  //   component: () => import("@/views/Game/PersonalScores.vue"),
+  //   options: {
+  //     hotReload: true, // disables Hot Reload
+  //   },
+  // },
+  // {
+  //   meta: {
+  //     title: "Network Scores",
+  //   },
+  //   path: "/games/:game/scores",
+  //   name: "all_scores",
+  //   component: () => import("@/views/Game/NetworkScores.vue"),
+  //   options: {
+  //     hotReload: true, // disables Hot Reload
+  //   },
+  // },
   {
     meta: {
       title: "Error",
diff --git a/src/stores/auth/index.js b/src/stores/auth/index.js
new file mode 100644
index 0000000..35da0cd
--- /dev/null
+++ b/src/stores/auth/index.js
@@ -0,0 +1,31 @@
+import Cookies from "js-cookie";
+
+export function loadUserAuthKey() {
+  try {
+    const encryptedKey = Cookies.get("userAuthKey");
+    return encryptedKey;
+  } catch (error) {
+    this.errorCode = error.message;
+    throw error;
+  }
+}
+
+export function saveUserAuthKey(sessionId, expires) {
+  try {
+    Cookies.set("userAuthKey", sessionId, {
+      expires: expires,
+    });
+  } catch (error) {
+    this.errorCode = error.message;
+    throw error;
+  }
+}
+
+export function deleteUserAuthKey() {
+  try {
+    Cookies.remove("userAuthKey");
+  } catch (error) {
+    this.errorCode = error.message;
+    throw error;
+  }
+}
diff --git a/src/stores/main.js b/src/stores/main.js
index 7fd3b2f..38f0fb4 100644
--- a/src/stores/main.js
+++ b/src/stores/main.js
@@ -1,22 +1,40 @@
 import { defineStore } from "pinia";
 import axios from "axios";
+import { loadUserAuthKey, saveUserAuthKey } from "@/stores/auth";
 
 export const useMainStore = defineStore("main", {
   state: () => ({
     /* User */
+    userId: null,
     userName: null,
     userEmail: null,
     userAvatar: null,
+    userAdmin: false,
+    userCardStyle: null,
+    userData: null,
+    userProfiles: [],
+    userArcades: [],
+    profiles: {},
 
     /* Field focus with ctrl+k (to register only once) */
     isFieldFocusRegistered: false,
 
-    /* Sample data (commonly used) */
-    clients: [],
-    history: [],
+    /* Authentication keys */
+    userAuthKey: null, // Will be loaded and decrypted from cookies
+
+    /* Loading state */
+    isLoading: false,
+    isSaving: false,
+    errorCode: null,
+
+    /* User Loaded state */
+    userLoaded: false,
   }),
   actions: {
     setUser(payload) {
+      if (payload.id) {
+        this.userId = payload.id;
+      }
       if (payload.name) {
         this.userName = payload.name;
       }
@@ -26,6 +44,21 @@ export const useMainStore = defineStore("main", {
       if (payload.avatar) {
         this.userAvatar = payload.avatar;
       }
+      if (payload.admin) {
+        this.userAdmin = payload.admin;
+      }
+      if (payload.data) {
+        this.userData = payload.data;
+      }
+      if (payload.cardStyle) {
+        this.userCardStyle = payload.cardStyle;
+      }
+      if (payload.profiles) {
+        this.userProfiles = payload.profiles;
+      }
+      if (payload.arcades) {
+        this.userArcades = payload.arcades;
+      }
     },
 
     fetch(sampleDataKey) {
@@ -40,5 +73,230 @@ export const useMainStore = defineStore("main", {
           alert(error.message);
         });
     },
+
+    async callApi(endpoint, method = "GET", data = null) {
+      const apiServer = import.meta.env.VITE_API_URL;
+      const apiKey = import.meta.env.VITE_API_KEY;
+      let loadingTimeout;
+
+      const startLoading = () => {
+        loadingTimeout = setTimeout(() => {
+          if (method === "GET") {
+            this.isLoading = true;
+          }
+        }, 200); // Wait for .2 seconds before showing loading modal
+      };
+
+      // Start loading after the specified delay
+      startLoading();
+
+      const headers = {
+        "App-Auth-Key": apiKey,
+        "User-Auth-Key": loadUserAuthKey(),
+      };
+
+      const url = `${apiServer}/v1${endpoint}`;
+
+      const config = {
+        method,
+        url: url,
+        headers,
+      };
+
+      if (data) {
+        config.data = data;
+      }
+
+      try {
+        const response = await axios(config);
+        if (response.data.status === "error") {
+          this.errorCode = response.data.error_code;
+          this.isSaving = false;
+          this.isLoading = true;
+          return null;
+        }
+        this.isLoading = false; // reset flags
+        this.isSaving = false;
+        return response.data;
+      } catch (error) {
+        this.errorCode = error.message;
+        this.isSaving = false;
+        throw error;
+      } finally {
+        clearTimeout(loadingTimeout);
+      }
+    },
+
+    async fetchAllNews() {
+      try {
+        const data = await this.callApi("/news/getAllNews");
+        return data.slice(0, 2);
+      } catch (error) {
+        console.log("Error fetching news:", error);
+        throw error;
+      }
+    },
+
+    async fetchNews(newsID) {
+      try {
+        const data = await this.callApi(`/news/getNews/${newsID}`);
+        return data;
+      } catch (error) {
+        console.log("Error fetching news:", error);
+        throw error;
+      }
+    },
+
+    async checkUserSession() {
+      const request = {
+        sessionId: loadUserAuthKey(),
+      };
+
+      try {
+        const data = await this.callApi(`/auth/checkSession`, "POST", request);
+        return data;
+      } catch (error) {
+        console.log("Error checking session:", error);
+        throw error;
+      }
+    },
+
+    async deleteUserSession() {
+      const request = {
+        sessionId: loadUserAuthKey(),
+      };
+
+      try {
+        const data = await this.callApi(`/auth/deleteSession`, "POST", request);
+        console.log(data);
+        return data;
+      } catch (error) {
+        console.log("Error deleting session:", error);
+        throw error;
+      }
+    },
+
+    async createUserSession(username, password, remember) {
+      const request = {
+        username: username,
+        password: password,
+      };
+
+      try {
+        const data = await this.callApi(`/auth/createSession`, "POST", request);
+        if (data && data.status === "success") {
+          saveUserAuthKey(data.sessionId, remember ? 30 : 1);
+          return true;
+        } else {
+          alert(this.errorCode);
+          return false;
+        }
+      } catch (error) {
+        console.log("Error creating session:", error);
+        throw error;
+      }
+    },
+
+    async loadUser() {
+      try {
+        const validSession = await this.checkUserSession();
+        if (validSession && validSession.activeSession && !this.userLoaded) {
+          const userId = validSession.userId;
+          if (userId) {
+            const response = await this.callApi(`/user/${userId}`);
+            var user = response.user;
+            this.setUser({
+              id: userId,
+              name: user.name,
+              email: user.email,
+              avatar: user.avatar,
+              admin: user.admin,
+              data: user.data,
+              cardStyle: "time",
+              profiles: user.profiles,
+              arcades: user.arcades,
+            });
+            this.userLoaded = true;
+            return true;
+          }
+        } else if (this.userLoaded) {
+          // User cache is up to date. Don't load.
+          return true;
+        }
+        return false;
+      } catch (error) {
+        console.log("Error loading user:", error);
+        throw error;
+      }
+    },
+
+    async getUser(userId) {
+      try {
+        const data = await this.callApi(`/user/${userId}`);
+        return data.user;
+      } catch (error) {
+        console.log("Error fetching user:", error);
+        throw error;
+      }
+    },
+
+    async getCards() {
+      try {
+        const data = await this.callApi(`/user/cards`);
+        return data.cards;
+      } catch (error) {
+        console.log("Error fetching cards:", error);
+        throw error;
+      }
+    },
+
+    async getArcade(arcadeId) {
+      try {
+        const data = await this.callApi(`/arcade/${arcadeId}`);
+        return data.arcade;
+      } catch (error) {
+        console.log("Error fetching arcade:", error);
+        throw error;
+      }
+    },
+
+    async getPaseliData(arcadeId) {
+      try {
+        const data = await this.callApi(`/arcade/${arcadeId}/paseli`);
+        return data.data;
+      } catch (error) {
+        console.log("Error fetching PASELI:", error);
+        throw error;
+      }
+    },
+
+    async getGameProfiles(game) {
+      try {
+        const data = await this.callApi(`/game/${game}/profiles`);
+        return data.data;
+      } catch (error) {
+        console.log("Error fetching profiles:", error);
+        throw error;
+      }
+    },
+
+    async getUserProfile(game, version, userId = null) {
+      if (!userId) {
+        while (!this.userId) {
+          await new Promise((resolve) => setTimeout(resolve, 200));
+        }
+        userId = this.userId;
+      }
+
+      try {
+        const data = await this.callApi(
+          `/profile/${game}?version=${version}&userId=${userId}`
+        );
+        return data.data;
+      } catch (error) {
+        console.log("Error fetching profile:", error);
+        throw error;
+      }
+    },
   },
 });
diff --git a/src/stores/news/index.js b/src/stores/news/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/Arcade/ArcadeView.vue b/src/views/Arcade/ArcadeView.vue
index 787d520..19c46f8 100644
--- a/src/views/Arcade/ArcadeView.vue
+++ b/src/views/Arcade/ArcadeView.vue
@@ -1,103 +1,122 @@
 <script setup>
 import { useRoute } from "vue-router";
-import { mdiStore, mdiChartTimelineVariant } from "@mdi/js";
+import { ref, onMounted } from "vue";
+import { mdiStore } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import ArcadeCard from "@/components/ArcadeCard.vue";
 import CardBox from "@/components/CardBox.vue";
-import FormField from "@/components/FormField.vue";
-import FormFilePicker from "@/components/FormFilePicker.vue";
+// import FormField from "@/components/FormField.vue";
+// import FormFilePicker from "@/components/FormFilePicker.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
-import FormControl from "@/components/FormControl.vue";
+// import FormControl from "@/components/FormControl.vue";
 import PillTag from "@/components/PillTag.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import CardBoxWidget from "@/components/CardBoxWidget.vue";
-import { arcadeList } from "@/constants";
-import { listCodes } from "@/constants/area";
+// import CardBoxWidget from "@/components/CardBoxWidget.vue";
+// import { listCodes } from "@/constants/area";
+
+import { useMainStore } from "@/stores/main";
+const mainStore = useMainStore();
+const arcadeData = ref({});
+const loading = ref(true);
 
 const $route = useRoute();
-const arcadeID = parseInt($route.params.id);
+const arcadeId = parseInt($route.params.id);
 
-const thisArcade = arcadeList.find((x) => x.id === arcadeID);
+onMounted(async () => {
+  try {
+    const data = await mainStore.getArcade(arcadeId);
+    arcadeData.value = data;
+    loading.value = false;
+  } catch (error) {
+    console.log("Failed to fetch arcade data:", error);
+  }
+});
 </script>
 
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <ArcadeCard class="mb-6" :arcade-data="thisArcade" />
+      <template v-if="!loading">
+        <ArcadeCard class="mb-6" :arcade="arcadeData" />
 
-      <SectionTitleLine :icon="mdiStore" title="Admin Overview" main />
+        <SectionTitleLine :icon="mdiStore" title="Admin Overview" main />
 
-      <CardBox is-form class="mb-6" @submit.prevent="">
-        <PillTag color="info" label="General Settings" class="mb-4" />
-        <div class="grid gap-4 grid-cols-2 md:grid-cols-4 mb-4">
-          <FormCheckRadio
-            :model-value="thisArcade.public"
-            :input-value="thisArcade.public"
+        <CardBox is-form class="mb-6" @submit.prevent="">
+          <PillTag color="info" label="General Settings" class="mb-4" />
+          <div class="grid gap-4 grid-cols-2 md:grid-cols-4 mb-4">
+            <!-- <FormCheckRadio
+            :model-value="arcadeData.public"
+            :input-value="arcadeData.public"
             name="public"
             type="switch"
             label="Public Arcade"
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
-          />
-          <FormCheckRadio
-            :model-value="thisArcade.paseli"
-            :input-value="thisArcade.paseli"
-            name="paseli"
-            type="switch"
-            label="PASELI"
-            class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
-          />
-          <FormCheckRadio
-            :model-value="thisArcade.infinite_paseli"
-            :input-value="thisArcade.infinite_paseli"
-            name="infinite_paseli"
-            type="switch"
-            label="Infinite PASELI"
-            class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
-          />
-          <FormCheckRadio
-            :model-value="thisArcade.maintenance"
-            :input-value="thisArcade.maintenance"
-            name="maintenance"
-            type="switch"
-            label="Maintenance Mode"
-            class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
-          />
-        </div>
-        <BaseButton color="success" type="submit" label="Save" :small="false" />
-      </CardBox>
-
-      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 mb-6">
-        <CardBox>
-          <h1 class="text-lg md:text-xl">OpenVPN Configuration</h1>
-          <p class="pb-1 dark:text-white/50">
-            Use this to export your VPN config.
-          </p>
+          /> -->
+            <FormCheckRadio
+              :model-value="arcadeData.data.paseli_enabled"
+              :input-value="arcadeData.data.paseli_enabled"
+              name="paseli_enabled"
+              type="switch"
+              label="PASELI"
+              class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
+            />
+            <FormCheckRadio
+              :model-value="arcadeData.data.paseli_infinite"
+              :input-value="arcadeData.data.paseli_infinite"
+              name="paseli_infinite"
+              type="switch"
+              label="Infinite PASELI"
+              class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
+            />
+            <FormCheckRadio
+              :model-value="arcadeData.data.maint"
+              :input-value="arcadeData.data.maint"
+              name="maint"
+              type="switch"
+              label="Maintenance Mode"
+              class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
+            />
+          </div>
           <BaseButton
-            :small="false"
             color="success"
-            class="my-2"
-            label="Export"
-          />
-        </CardBox>
-
-        <CardBox>
-          <h1 class="text-lg md:text-xl">Cover Photo</h1>
-          <p class="pb-1 dark:text-white/50">
-            NSFW = BAN. Children use this server. 60MB max.
-          </p>
-          <FormFilePicker label="Upload" name="upload" accept="image/*" />
-
-          <BaseButton
-            :small="false"
-            color="success"
-            class="mt-4"
+            type="submit"
             label="Save"
+            :small="false"
           />
         </CardBox>
 
-        <CardBox>
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 mb-6">
+          <CardBox>
+            <h1 class="text-lg md:text-xl">OpenVPN Configuration</h1>
+            <p class="pb-1 dark:text-white/50">
+              Use this to export your VPN config.
+            </p>
+            <BaseButton
+              :small="false"
+              color="success"
+              class="my-2"
+              label="Export"
+            />
+          </CardBox>
+
+          <!-- <CardBox>
+            <h1 class="text-lg md:text-xl">Cover Photo</h1>
+            <p class="pb-1 dark:text-white/50">
+              NSFW = BAN. Children use this server. 60MB max.
+            </p>
+            <FormFilePicker label="Upload" name="upload" accept="image/*" />
+
+            <BaseButton
+              :small="false"
+              color="success"
+              class="mt-4"
+              label="Save"
+            />
+          </CardBox> -->
+
+          <!-- <CardBox>
           <h1 class="text-lg md:text-xl mb-2">Location Settings</h1>
 
           <FormField label="Area" help="Set your arcade's area.">
@@ -134,41 +153,42 @@ const thisArcade = arcadeList.find((x) => x.id === arcadeID);
             class="mt-4"
             label="Save"
           />
-        </CardBox>
-      </div>
+        </CardBox> -->
+        </div>
 
-      <SectionTitleLine
-        :icon="mdiChartTimelineVariant"
-        title="Arcade Overview"
-        main
-      />
+        <!-- <SectionTitleLine
+          :icon="mdiChartTimelineVariant"
+          title="Arcade Overview"
+          main
+        />
 
-      <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 mb-6">
-        <CardBoxWidget
-          trend="12% (from last week)"
-          trend-type="up"
-          :number="37"
-          label="Arcade Scores (This Week)"
-        />
-        <CardBoxWidget
-          trend="40% (from last month)"
-          trend-type="up"
-          :number="3"
-          label="Unique Games (All Time)"
-        />
-        <CardBoxWidget
-          trend="No new players this week"
-          :number="2"
-          label="Unique Players (All Time)"
-        />
-        <CardBoxWidget
-          trend="40% (from last month)"
-          trend-type="up"
-          :number="123456789"
-          :prefix="'¥'"
-          label="PASELI Spent (This Month)"
-        />
-      </div>
+        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 mb-6">
+          <CardBoxWidget
+            trend="12% (from last week)"
+            trend-type="up"
+            :number="37"
+            label="Arcade Scores (This Week)"
+          />
+          <CardBoxWidget
+            trend="40% (from last month)"
+            trend-type="up"
+            :number="3"
+            label="Unique Games (All Time)"
+          />
+          <CardBoxWidget
+            trend="No new players this week"
+            :number="2"
+            label="Unique Players (All Time)"
+          />
+          <CardBoxWidget
+            trend="40% (from last month)"
+            trend-type="up"
+            :number="123456789"
+            :prefix="'¥'"
+            label="PASELI Spent (This Month)"
+          />
+        </div> -->
+      </template>
     </SectionMain>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/Arcade/EventView.vue b/src/views/Arcade/EventView.vue
index 1e4519e..ff9729d 100644
--- a/src/views/Arcade/EventView.vue
+++ b/src/views/Arcade/EventView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, watch } from "vue";
+import { reactive, ref, watch, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { mdiNewspaperVariantMultiple } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
@@ -11,11 +11,25 @@ import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import { arcadeList, gameData, getGameInfo } from "@/constants";
+import { gameData, getGameInfo } from "@/constants";
+import { useMainStore } from "@/stores/main";
+
+const mainStore = useMainStore();
+const arcadeData = ref({});
+const loading = ref(true);
 
 const $route = useRoute();
-const arcadeID = parseInt($route.params.id);
-const thisArcade = arcadeList.find((x) => x.id === arcadeID);
+const arcadeId = parseInt($route.params.id);
+
+onMounted(async () => {
+  try {
+    const data = await mainStore.getArcade(arcadeId);
+    arcadeData.value = data;
+    loading.value = false;
+  } catch (error) {
+    console.log("Failed to fetch arcade data:", error);
+  }
+});
 
 const eventSettings = [
   {
@@ -161,83 +175,85 @@ watch(
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <ArcadeCard class="mb-6" :arcade-data="thisArcade" />
-      <SectionTitleLine
-        :icon="mdiNewspaperVariantMultiple"
-        title="Game Event Settings"
-        main
-      />
+      <template v-if="!loading">
+        <ArcadeCard class="mb-6" :arcade="arcadeData" :use-small="true" />
+        <SectionTitleLine
+          :icon="mdiNewspaperVariantMultiple"
+          title="Game Event Settings"
+          main
+        />
 
-      <CardBox class="mb-6">
-        <div class="mb-4">
-          <FormField
-            label="Select Game"
-            help="Pick a game and version to get started."
-          >
-            <div class="grid md:grid-cols-2 gap-4">
-              <div>
-                <p class="pb-2 text-lg">Game</p>
-                <FormControl
-                  v-model="filterForm.game"
-                  name="game"
-                  :options="makeGameOptions()"
-                />
+        <CardBox class="mb-6">
+          <div class="mb-4">
+            <FormField
+              label="Select Game"
+              help="Pick a game and version to get started."
+            >
+              <div class="grid md:grid-cols-2 gap-4">
+                <div>
+                  <p class="pb-2 text-lg">Game</p>
+                  <FormControl
+                    v-model="filterForm.game"
+                    name="game"
+                    :options="makeGameOptions()"
+                  />
+                </div>
+                <div v-if="filterForm.game">
+                  <p class="pb-2 text-lg">Version</p>
+                  <FormControl
+                    v-model="filterForm.version"
+                    name="version"
+                    :options="makeVersionOptions()"
+                  />
+                </div>
               </div>
-              <div v-if="filterForm.game">
-                <p class="pb-2 text-lg">Version</p>
-                <FormControl
-                  v-model="filterForm.version"
-                  name="version"
-                  :options="makeVersionOptions()"
-                />
-              </div>
-            </div>
-          </FormField>
-        </div>
+            </FormField>
+          </div>
 
-        <div v-if="filterForm.game && filterForm.version">
-          <h2 class="text-xl">
-            Settings for
-            <b>{{ getCurrentGameVersion() }}</b>
-          </h2>
-          <hr class="pb-1 my-2" />
+          <div v-if="filterForm.game && filterForm.version">
+            <h2 class="text-xl">
+              Settings for
+              <b>{{ getCurrentGameVersion() }}</b>
+            </h2>
+            <hr class="pb-1 my-2" />
 
-          <FormField
-            v-for="setting in getGameSettings().settings"
-            :key="setting.id"
-            :label="setting.name"
-            :help="setting.tooltip"
-          >
-            <FormControl
-              v-if="setting.type == String"
-              v-model="setting.value"
-              :model-value="setting.value"
-              :name="setting.keyId"
-              placeholder="Not Set"
+            <FormField
+              v-for="setting in getGameSettings().settings"
+              :key="setting.id"
+              :label="setting.name"
+              :help="setting.tooltip"
+            >
+              <FormControl
+                v-if="setting.type == String"
+                v-model="setting.value"
+                :model-value="setting.value"
+                :name="setting.keyId"
+                placeholder="Not Set"
+              />
+              <FormCheckRadio
+                v-else-if="setting.type == Boolean"
+                v-model="setting.value"
+                :input-value="setting.value"
+                type="switch"
+                :name="setting.keyId"
+              />
+              <FormControl
+                v-if="setting.type == Array"
+                v-model="setting.options[setting.value]"
+                :name="setting.keyId"
+                :options="setting.options"
+                placeholder="Select..."
+              />
+            </FormField>
+            <BaseButton
+              color="success"
+              type="submit"
+              label="Save"
+              :small="false"
             />
-            <FormCheckRadio
-              v-else-if="setting.type == Boolean"
-              v-model="setting.value"
-              :input-value="setting.value"
-              type="switch"
-              :name="setting.keyId"
-            />
-            <FormControl
-              v-if="setting.type == Array"
-              v-model="setting.options[setting.value]"
-              :name="setting.keyId"
-              :options="setting.options"
-              placeholder="Select..."
-            />
-          </FormField>
-          <BaseButton
-            color="success"
-            type="submit"
-            label="Save"
-            :small="false"
-          />
-        </div>
-      </CardBox>
+          </div>
+        </CardBox>
+      </template>
     </SectionMain>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/Arcade/MachinesView.vue b/src/views/Arcade/MachinesView.vue
index d23a449..513474b 100644
--- a/src/views/Arcade/MachinesView.vue
+++ b/src/views/Arcade/MachinesView.vue
@@ -1,34 +1,54 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { mdiGamepad } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
-import TableMachines from "@/components/Tables/TableMachine.vue";
 import CardBox from "@/components/CardBox.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import ArcadeCard from "@/components/ArcadeCard.vue";
-import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
-import { arcadeList } from "@/constants";
+import GeneralTable from "@/components/GeneralTable.vue";
+import { useMainStore } from "@/stores/main";
+
+const mainStore = useMainStore();
+const arcadeData = ref({});
+const loading = ref(true);
 
 const $route = useRoute();
-const arcadeID = parseInt($route.params.id);
+const arcadeId = parseInt($route.params.id);
 
-const thisArcade = arcadeList.find((x) => x.id === arcadeID);
+onMounted(async () => {
+  try {
+    const data = await mainStore.getArcade(arcadeId);
+    arcadeData.value = data;
+    loading.value = false;
+  } catch (error) {
+    console.log("Failed to fetch arcade data:", error);
+  }
+});
 
-const machineList = [
+const headers = [
   {
-    id: 0,
-    pcbid: "1A2B3C4D0000",
-    name: "Test PCBID",
-    ota: false,
-    cabinet: false,
+    text: "PCBID",
+    value: "pcbId",
+    width: 200,
   },
   {
-    id: 1,
-    pcbid: "1E2R3G3F4JJ0",
-    name: "Other PCBID",
-    ota: true,
-    cabinet: true,
+    text: "Name",
+    value: "description",
+    width: 200,
+  },
+  {
+    text: "Port",
+    value: "port",
+    sortable: true,
+    width: 120,
+  },
+  {
+    text: "OTA",
+    value: "ota",
+    sortable: true,
+    width: 120,
   },
 ];
 </script>
@@ -36,13 +56,20 @@ const machineList = [
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <ArcadeCard class="mb-6" :arcade-data="thisArcade" />
-      <SectionTitleLine :icon="mdiGamepad" title="Machines" main />
+      <template v-if="!loading">
+        <ArcadeCard class="mb-6" :arcade="arcadeData" :use-small="true" />
+        <SectionTitleLine :icon="mdiGamepad" title="Machines" main />
 
-      <CardBox class="mb-6" has-table>
-        <TableMachines v-if="machineList.length" :machines="machineList" />
-        <CardBoxComponentEmpty v-if="!machineList.length" />
-      </CardBox>
+        <CardBox has-table>
+          <div
+            class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+          >
+            <div class="w-full">
+              <GeneralTable :headers="headers" :items="arcadeData.machines" />
+            </div>
+          </div>
+        </CardBox>
+      </template>
     </SectionMain>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/Arcade/PaseliView.vue b/src/views/Arcade/PaseliView.vue
index 8e94cf2..71bfb1a 100644
--- a/src/views/Arcade/PaseliView.vue
+++ b/src/views/Arcade/PaseliView.vue
@@ -1,55 +1,128 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { mdiCashRegister, mdiAccountCash } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
-import TablePaseli from "@/components/Tables/TablePaseli.vue";
+import GeneralTable from "@/components/GeneralTable.vue";
 import CardBox from "@/components/CardBox.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import ArcadeCard from "@/components/ArcadeCard.vue";
-import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
-import { arcadeList } from "../../constants";
+import { useMainStore } from "@/stores/main";
+
+const mainStore = useMainStore();
+const arcadeData = ref({});
+const paseliData = ref({});
+const loading = ref(true);
 
 const $route = useRoute();
-const arcadeID = parseInt($route.params.id);
+const arcadeId = parseInt($route.params.id);
 
-const thisArcade = arcadeList.find((x) => x.id === arcadeID);
+onMounted(async () => {
+  try {
+    const loadArcadeData = await mainStore.getArcade(arcadeId);
+    const loadPaseliData = await mainStore.getPaseliData(arcadeId);
+    arcadeData.value = loadArcadeData;
+    paseliData.value = loadPaseliData;
+    loading.value = false;
+  } catch (error) {
+    console.log("Failed to fetch arcade data:", error);
+  }
+});
 
-var transactions = [
+const transactionHeaders = [
   {
-    id: 0,
-    value: -300,
-    timestamp: "7/13/2023 1:27 PM",
-    machine: "SDVX",
-    reason: "/eacoin/nstart",
-    user: "Trmazi",
+    text: "Timestamp",
+    value: "timestamp",
+    width: 200,
+  },
+  {
+    text: "Amount",
+    value: "data.delta",
+    width: 200,
+  },
+  {
+    text: "Remaining Balance",
+    value: "data.balance",
+    width: 200,
+  },
+  {
+    text: "Reason",
+    value: "data.reason",
+    width: 200,
   },
 ];
+
+const balanceHeaders = [
+  {
+    text: "Player",
+    value: "username",
+  },
+  {
+    text: "Balance",
+    value: "balance",
+  },
+];
+
+function filterTransactions(transactions) {
+  var filteredTransactions = [];
+  for (var transaction of JSON.parse(JSON.stringify(transactions))) {
+    if (transaction.timestamp) {
+      const date = new Date(transaction.timestamp * 1000);
+      transaction.timestamp = date.toLocaleString();
+    }
+
+    filteredTransactions.push(transaction);
+  }
+
+  return filteredTransactions;
+}
 </script>
 
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <ArcadeCard class="mb-6" :arcade-data="thisArcade" />
-      <SectionTitleLine
-        :icon="mdiAccountCash"
-        title="Player PASELI Balances"
-        main
-      />
-      <CardBox class="mb-6" has-table>
-        <TablePaseli v-if="transactions.length" :transactions="transactions" />
-        <CardBoxComponentEmpty v-if="!transactions.length" />
-      </CardBox>
+      <template
+        v-if="!loading && paseliData.balances && paseliData.transactions"
+      >
+        <ArcadeCard class="mb-6" :arcade="arcadeData" :use-small="true" />
+        <SectionTitleLine
+          :icon="mdiAccountCash"
+          title="Player PASELI Balances"
+          main
+        />
+        <CardBox has-table>
+          <div
+            class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+          >
+            <div class="w-full">
+              <GeneralTable
+                :headers="balanceHeaders"
+                :items="paseliData.balances"
+              />
+            </div>
+          </div>
+        </CardBox>
 
-      <SectionTitleLine
-        :icon="mdiCashRegister"
-        title="PASELI Transaction History"
-        main
-      />
-      <CardBox class="mb-6" has-table>
-        <TablePaseli v-if="transactions.length" :transactions="transactions" />
-        <CardBoxComponentEmpty v-if="!transactions.length" />
-      </CardBox>
+        <SectionTitleLine
+          :icon="mdiCashRegister"
+          title="PASELI Transaction History"
+          main
+          class="pt-6"
+        />
+        <CardBox has-table>
+          <div
+            class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+          >
+            <div class="w-full">
+              <GeneralTable
+                :headers="transactionHeaders"
+                :items="filterTransactions(paseliData.transactions)"
+              />
+            </div>
+          </div>
+        </CardBox>
+      </template>
     </SectionMain>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/ArcadesView.vue b/src/views/ArcadesView.vue
index 3f7596e..32249d2 100644
--- a/src/views/ArcadesView.vue
+++ b/src/views/ArcadesView.vue
@@ -8,7 +8,6 @@ import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
 import CardBoxArcade from "@/components/Cards/CardBoxArcade.vue";
 import FormField from "@/components/FormField.vue";
 import FormControl from "@/components/FormControl.vue";
-import { arcadeList } from "@/constants";
 </script>
 
 <script>
@@ -18,9 +17,7 @@ const filterForm = reactive({
 
 export default {
   data() {
-    return {
-      arcadeData: arcadeList,
-    };
+    return {};
   },
   methods: {
     filterArcade() {
diff --git a/src/views/Auth/LoginView.vue b/src/views/Auth/LoginView.vue
index 0f7c25b..ba84af4 100644
--- a/src/views/Auth/LoginView.vue
+++ b/src/views/Auth/LoginView.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { reactive } from "vue";
 import { useRouter } from "vue-router";
 import { mdiAccount, mdiAsterisk } from "@mdi/js";
+import { reactive } from "vue";
+import { useMainStore } from "@/stores/main.js";
 import CardBox from "@/components/CardBox.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormField from "@/components/FormField.vue";
@@ -9,17 +10,31 @@ import FormControl from "@/components/FormControl.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import LayoutGuest from "@/layouts/LayoutGuest.vue";
 
+const router = useRouter();
+const mainStore = useMainStore();
+
+// Reactive form data
 const form = reactive({
-  login: "john.doe",
-  pass: "highly-secure-password-fYjUw-",
+  login: "",
+  pass: "",
   remember: true,
   spinin: false,
 });
 
-const router = useRouter();
+const submit = async () => {
+  if (!form.login || !form.pass) {
+    alert("Please fill in all fields.");
+    return;
+  }
 
-const submit = () => {
-  router.push("/");
+  const response = await mainStore.createUserSession(
+    form.login,
+    form.pass,
+    form.remember
+  );
+  if (response) {
+    router.push("/");
+  }
 };
 </script>
 
@@ -55,6 +70,7 @@ const submit = () => {
                 :icon="mdiAccount"
                 name="login"
                 autocomplete="username"
+                required
               />
             </FormField>
 
@@ -65,6 +81,7 @@ const submit = () => {
                 type="password"
                 name="password"
                 autocomplete="current-password"
+                required
               />
             </FormField>
 
@@ -89,12 +106,12 @@ const submit = () => {
                 href="/#/auth/register"
               />
 
-              <h2>Forgot Password?</h2>
+              <!-- <h2>Forgot Password?</h2>
               <BaseButton
                 label="Password Reset"
                 color="warning"
                 href="/#/auth/reset"
-              />
+              /> -->
             </div>
           </div>
         </div>
diff --git a/src/views/Auth/RegisterView.vue b/src/views/Auth/RegisterView.vue
index c8e24fc..668c2ff 100644
--- a/src/views/Auth/RegisterView.vue
+++ b/src/views/Auth/RegisterView.vue
@@ -2,6 +2,7 @@
 import { reactive } from "vue";
 import { useRouter } from "vue-router";
 import { mdiAccount, mdiAsterisk } from "@mdi/js";
+import Cookies from "js-cookie";
 import CardBox from "@/components/CardBox.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormField from "@/components/FormField.vue";
@@ -9,18 +10,67 @@ import FormControl from "@/components/FormControl.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import LayoutGuest from "@/layouts/LayoutGuest.vue";
 
+const router = useRouter();
+
+function validateEmail(email) {
+  var re = /\S+@\S+\.\S+/;
+  return re.test(email);
+}
+
+const submit = async () => {
+  if (
+    !form.username ||
+    !form.email ||
+    !form.pass ||
+    !form.pass_conf ||
+    !form.pin ||
+    !form.cardId
+  ) {
+    alert("Please fill in all fields.");
+    return;
+  }
+
+  if (!validateEmail(form.email)) {
+    alert("Please use a valid email.");
+    return;
+  }
+
+  if (form.pass !== form.pass_conf) {
+    alert("Passwords do not match!");
+    return;
+  }
+
+  // Simulate login API call
+  const response = await fakeLoginAPI(form.username, form.pass);
+  if (response.success) {
+    console.log(response);
+    Cookies.set("userAuthKey", response.authKey, {
+      expires: form.remember ? 30 : 0,
+    });
+    router.push("/");
+  } else {
+    alert("Create failed. Please try again."); // Show error message
+  }
+};
+
+// Simulated login API function
+const fakeLoginAPI = async (username, password) => {
+  // Simulate API call delay
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  // Simulated success response with generated auth key
+  return { success: true, authKey: "generatedAuthKey123" };
+};
+
 const form = reactive({
   username: "",
   email: "",
   pass: "",
+  pass_conf: "",
+  pin: "",
+  cardId: "",
   remember: true,
 });
-
-const router = useRouter();
-
-const submit = () => {
-  router.push("/");
-};
 </script>
 
 <template>
@@ -75,7 +125,7 @@ const submit = () => {
 
             <FormField label="Password Confirmation">
               <FormControl
-                v-model="form.pass"
+                v-model="form.pass_conf"
                 :icon="mdiAsterisk"
                 type="password"
                 name="password"
@@ -85,7 +135,7 @@ const submit = () => {
 
             <FormField label="Card ID">
               <FormControl
-                v-model="form.email"
+                v-model="form.cardId"
                 :icon="mdiAccount"
                 name="card"
                 autocomplete="card"
@@ -94,7 +144,7 @@ const submit = () => {
 
             <FormField label="Game PIN">
               <FormControl
-                v-model="form.pass"
+                v-model="form.pin"
                 :icon="mdiAsterisk"
                 type="password"
                 name="password"
diff --git a/src/views/Game/EditView.vue b/src/views/Game/EditView.vue
index cefd30a..b73c69d 100644
--- a/src/views/Game/EditView.vue
+++ b/src/views/Game/EditView.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { reactive } from "vue";
+import { reactive, onMounted, watch, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useMainStore } from "@/stores/main";
 import { mdiAccountTieHat, mdiBackburger } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBox from "@/components/CardBox.vue";
@@ -11,10 +12,14 @@ import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import FormField from "@/components/FormField.vue";
 import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormControl from "@/components/FormControl.vue";
+import EmblemCardBox from "@/components/Cards/EmblemCardBox.vue";
+import QproCardBox from "@/components/Cards/QproCardBox.vue";
+import PillTag from "@/components/PillTag.vue";
 import { getGameInfo } from "@/constants";
 
 const $route = useRoute();
 const $router = useRouter();
+const mainStore = useMainStore();
 var gameID = null;
 var thisGame = null;
 
@@ -22,85 +27,12 @@ const versionForm = reactive({
   currentVersion: null,
 });
 
-const settings = [
-  {
-    id: "username",
-    name: "Username",
-    help: "Set your username for this profile",
-    type: String,
-  },
-  {
-    id: "fastSlow",
-    name: "Fast/Slow Display",
-    help: "Enable or disable displaying of Fast/Slow",
-    type: Boolean,
-  },
-  {
-    id: "comboPosition",
-    name: "Combo Position",
-    help: "Change order of the combo and notes",
-    type: Boolean,
-  },
-  {
-    id: "weight",
-    name: "Weight (kg)",
-    help: "Set your weight for in-game workout mode",
-    type: Number,
-  },
-  {
-    id: "dancer",
-    name: "Character",
-    help: "Set your background dancer",
-    type: Array,
-    options: [
-      { id: 0, label: "Afro" },
-      { id: 1, label: "Emi" },
-    ],
-  },
-  {
-    id: "arrow",
-    name: "Arrow Skin",
-    help: "Set your arrow skin",
-    type: Array,
-    options: [
-      { id: 0, label: "Normal" },
-      { id: 1, label: "Classic" },
-    ],
-  },
-];
-
-const profile = {
-  id: 1,
-  name: "Trmazi",
-  extid: 12345678,
-  avatar:
-    "https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
-  last: {
-    arcade: "GhettoCade",
-    date: "7/16/2023",
-  },
-  stats: {
-    firstPlay: "1/14/2021",
-    singlePlays: 165,
-    singleDan: 1900,
-    singlePoint: 1877,
-    doublePlays: 15,
-    doubleDan: 0,
-    doublePoint: 187,
-    skillPoints: 950000,
-  },
-};
-
-const userSettings = reactive({
-  username: "TRMAZI",
-  fastSlow: true,
-  comboPosition: false,
-  weight: 100,
-  dancer: 0,
-  arrow: 1,
-  guideLines: 0,
-  filter: 3,
-});
+watch(
+  () => versionForm.currentVersion,
+  () => {
+    loadProfile();
+  }
+);
 
 gameID = $route.params.game;
 thisGame = getGameInfo(gameID);
@@ -118,6 +50,21 @@ if (!thisGame.versions) {
   versionForm.currentVersion = 1;
 }
 
+const myProfile = ref(null);
+
+onMounted(() => {
+  loadProfile();
+});
+
+var settings = [
+  {
+    id: "name",
+    name: "Username",
+    help: "Set your username for this profile",
+    type: String,
+  },
+];
+
 function getSources() {
   var sources = null;
   if (!versionForm.currentVersion) {
@@ -135,6 +82,33 @@ function getCardStyle() {
       background-repeat: no-repeat;
     `;
 }
+
+function filterVersions(haveVersions) {
+  var filtered = [];
+  for (const version of thisGame.versions) {
+    if (haveVersions.includes(version.id)) {
+      filtered.push(version);
+    }
+  }
+  return filtered;
+}
+
+async function loadProfile() {
+  try {
+    myProfile.value = null;
+    const data = await mainStore.getUserProfile(
+      gameID,
+      versionForm.currentVersion
+    );
+    myProfile.value = data;
+
+    if (data && !versionForm.currentVersion) {
+      versionForm.currentVersion = data.versions[data.versions.length - 1];
+    }
+  } catch (error) {
+    console.error("Failed to fetch user profile data:", error);
+  }
+}
 </script>
 
 <template>
@@ -149,7 +123,7 @@ function getCardStyle() {
           label="Go Back"
         />
         <div
-          v-if="thisGame.versions"
+          v-if="thisGame.versions && myProfile"
           class="mt-2 md:mt-0 md:w-1/3 md:text-right"
         >
           <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
@@ -157,7 +131,7 @@ function getCardStyle() {
           </h2>
           <FormControl
             v-model="versionForm.currentVersion"
-            :options="thisGame.versions"
+            :options="filterVersions(myProfile.versions)"
           />
         </div>
       </div>
@@ -174,14 +148,21 @@ function getCardStyle() {
       >
         <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
           <div class="w-full">
-            <ProfileCard use-small :profile="profile" />
+            <ProfileCard
+              v-if="myProfile"
+              use-small
+              :game="gameID"
+              :profile="myProfile"
+              :version="versionForm.currentVersion"
+            />
           </div>
         </div>
       </div>
 
-      <div v-if="versionForm.currentVersion">
+      <div v-if="versionForm.currentVersion && myProfile">
         <CardBox>
           <div>
+            <PillTag color="info" label="General" class="mb-2" />
             <FormField
               v-for="setting of settings"
               :key="setting.id"
@@ -190,29 +171,29 @@ function getCardStyle() {
             >
               <FormControl
                 v-if="setting.type == String"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
               />
 
               <FormControl
                 v-if="setting.type == Number"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
                 type="number"
               />
 
               <FormControl
                 v-if="setting.type == Array"
                 :options="setting.options"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
-                :selected="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
+                :selected="myProfile[setting.id]"
               />
 
               <FormCheckRadio
                 v-if="setting.type == Boolean"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
                 type="switch"
               />
             </FormField>
@@ -225,6 +206,23 @@ function getCardStyle() {
             </div>
           </template>
         </CardBox>
+        <EmblemCardBox
+          v-if="
+            gameID == 'jubeat' &&
+            versionForm.currentVersion >= 10 &&
+            myProfile.last?.emblem
+          "
+          :profile="myProfile"
+          :version="versionForm.currentVersion"
+        />
+        <QproCardBox
+          v-if="
+            (gameID == 'iidx' || gameID == 'iidxclass') &&
+            versionForm.currentVersion >= 19
+          "
+          :profile="myProfile"
+          :version="versionForm.currentVersion"
+        />
       </div>
     </SectionMain>
   </LayoutAuthenticated>
diff --git a/src/views/Game/GameView.vue b/src/views/Game/GameView.vue
index bf16ba5..e6d582c 100644
--- a/src/views/Game/GameView.vue
+++ b/src/views/Game/GameView.vue
@@ -1,8 +1,14 @@
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { mdiAccountMultiple } from "@mdi/js";
+import {
+  mdiAccountMultiple,
+  mdiPlaylistMusicOutline,
+  mdiFormatListText,
+} from "@mdi/js";
+import { useMainStore } from "@/stores/main";
 import SectionMain from "@/components/SectionMain.vue";
+import BaseButton from "@/components/BaseButton.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import GameTitleLine from "@/components/GameTitleLine.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
@@ -10,11 +16,14 @@ import CardBox from "@/components/CardBox.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
 import FormControl from "@/components/FormControl.vue";
 import ProfileCard from "@/components/Cards/ProfileCard.vue";
-import TablePlayers from "@/components/Tables/TablePlayers.vue";
+import GeneralTable from "@/components/GeneralTable.vue";
 import { getGameInfo } from "@/constants";
+import { dashCode } from "@/constants/userData";
+import { getIIDXDan } from "@/constants/danClass";
 
 const $route = useRoute();
 const $router = useRouter();
+const mainStore = useMainStore();
 var gameID = null;
 var thisGame = null;
 
@@ -22,37 +31,17 @@ const versionForm = reactive({
   currentVersion: null,
 });
 
-const profile = {
-  id: 1,
-  name: "Trmazi",
-  extid: 12345678,
-  avatar:
-    "https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
-  last: {
-    arcade: "GhettoCade",
-    date: "7/16/2023",
-  },
-  stats: {
-    firstPlay: "1/14/2021",
-    singlePlays: 165,
-    singleDan: 1900,
-    singlePoint: 1877,
-    doublePlays: 15,
-    doubleDan: 0,
-    doublePoint: 187,
-    skillPoints: 3723,
-    jubility: 7690,
-  },
-};
+watch(
+  () => versionForm.currentVersion,
+  () => {
+    loadProfile();
+  }
+);
 
 gameID = $route.params.id;
 thisGame = getGameInfo(gameID);
 
-if (!thisGame.versions) {
-  versionForm.currentVersion = 1;
-}
-
-if (!thisGame) {
+if (thisGame == null) {
   $router.push({
     name: "ErrorPage",
     params: {
@@ -61,6 +50,41 @@ if (!thisGame) {
   });
 }
 
+const myProfile = ref(null);
+const profiles = ref([]);
+
+onMounted(async () => {
+  try {
+    const data = await mainStore.getGameProfiles(gameID);
+    profiles.value = formatProfiles(data);
+  } catch (error) {
+    console.error("Failed to fetch profile data:", error);
+  }
+
+  loadProfile();
+});
+
+if (!thisGame.versions) {
+  versionForm.currentVersion = 1;
+}
+
+async function loadProfile() {
+  try {
+    myProfile.value = null;
+    const data = await mainStore.getUserProfile(
+      gameID,
+      versionForm.currentVersion
+    );
+    myProfile.value = data;
+
+    if (data && !versionForm.currentVersion) {
+      versionForm.currentVersion = data.versions[data.versions.length - 1];
+    }
+  } catch (error) {
+    console.error("Failed to fetch user profile data:", error);
+  }
+}
+
 function getSources() {
   var sources = null;
   if (!versionForm.currentVersion) {
@@ -78,6 +102,79 @@ function getCardStyle() {
       background-repeat: no-repeat;
     `;
 }
+
+const headers = [];
+headers.push({
+  text: "Player",
+  value: "username",
+  sortable: true,
+  width: 120,
+});
+
+if (!thisGame.noRivals) {
+  headers.push({ text: "Rival ID", value: "extid", width: 100 });
+}
+
+headers.push(
+  { text: "Last Play", value: "stats.last_play_timestamp", width: 150 },
+  { text: "Last Arcade", value: "stats.last_play_arcade", width: 150 },
+  { text: "Plays", value: "stats.total_plays", sortable: true, width: 50 }
+  // { text: "Last Arcade", value: "last.arcade", sortable: true, width: 150 }
+);
+
+if (thisGame.playerHeaders) {
+  for (var header of thisGame.playerHeaders) {
+    headers.push(header);
+  }
+}
+
+function formatProfiles(profiles) {
+  var formattedItems = [];
+  for (var item of profiles) {
+    if (item.extid) {
+      item.extid = dashCode(item.extid);
+    }
+
+    if (item.stats) {
+      if (item.stats.last_play_timestamp) {
+        const date = new Date(item.stats.last_play_timestamp * 1000);
+        item.stats.last_play_timestamp = date.toLocaleString();
+      }
+
+      if (item.sgrade) {
+        item.sgrade = getIIDXDan(item.sgrade).short;
+      }
+
+      if (item.dgrade) {
+        item.dgrade = getIIDXDan(item.dgrade).short;
+      }
+    }
+
+    formattedItems.push(item);
+  }
+
+  formattedItems.sort((a, b) => {
+    const totalPlaysA = a.stats ? a.stats.total_plays || 0 : 0;
+    const totalPlaysB = b.stats ? b.stats.total_plays || 0 : 0;
+    return totalPlaysB - totalPlaysA; // Sort in descending order
+  });
+  return formattedItems;
+}
+
+function filterVersions(haveVersions) {
+  var filtered = [];
+  for (const version of thisGame.versions) {
+    if (haveVersions.includes(version.id)) {
+      filtered.push(version);
+    }
+  }
+  return filtered;
+}
+
+const navigateToProfile = (item) => {
+  const userID = item.userId;
+  $router.push(`/games/${gameID}/profiles/${userID}`);
+};
 </script>
 
 <template>
@@ -87,33 +184,62 @@ function getCardStyle() {
         <div class="bg-white dark:bg-slate-900/90 rounded-2xl p-3">
           <div class="w-full">
             <div
-              class="md:flex pb-6 md:px-5 md:space-x-10 md:justify-between md:items-center"
+              class="md:flex md:px-5 md:space-x-10 md:justify-between md:items-center"
             >
               <GameTitleLine :path="thisGame.icon" :title="thisGame.name" />
-              <div v-if="thisGame.versions" class="md:w-1/3 md:text-right">
+              <div
+                v-if="thisGame.versions && myProfile"
+                class="md:w-1/3 md:text-right"
+              >
                 <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
                   Select Version
                 </h2>
                 <FormControl
                   v-model="versionForm.currentVersion"
-                  :options="thisGame.versions"
+                  :options="filterVersions(myProfile.versions)"
                 />
               </div>
             </div>
           </div>
-          <div class="w-full">
-            <ProfileCard :game="gameID" :profile="profile">
-              <div class="grid grid-cols-1 gap-6 lg:grid-cols-4 pt-6">
-                <CardBoxWidget :number="3733" label="Scores (All Versions)" />
-                <CardBoxWidget :number="1244" label="Plays (All Versions)" />
+          <div v-if="myProfile" class="w-full pt-6">
+            <ProfileCard
+              :game="gameID"
+              :version="versionForm.currentVersion"
+              :profile="myProfile"
+            >
+              <div class="grid grid-cols-2 gap-6 pt-6">
                 <CardBoxWidget
-                  prefix="#"
-                  :number="43"
-                  suffix=" / 300"
-                  label="Ranking (All Versions)"
+                  :number="myProfile.stats.total_plays"
+                  label="Plays"
                 />
-                <CardBoxWidget :number="2" label="Rivals" /></div
-            ></ProfileCard>
+
+                <template v-if="myProfile.records">
+                  <CardBoxWidget
+                    v-if="myProfile.records.skill"
+                    :number="myProfile.records.skill / 100"
+                    label="Skill Points"
+                  />
+                </template>
+              </div>
+            </ProfileCard>
+          </div>
+          <div v-else class="md:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-3">
+            <BaseButton
+              v-if="!thisGame.noScores"
+              :href="`/#/games/${gameID}/scores`"
+              :icon="mdiPlaylistMusicOutline"
+              :outline="false"
+              color="info"
+              label="Network Scores"
+            />
+            <BaseButton
+              v-if="!thisGame.noRecords"
+              :href="`/#/games/${gameID}/records`"
+              :icon="mdiFormatListText"
+              :outline="false"
+              color="info"
+              label="Network Records"
+            />
           </div>
         </div>
       </div>
@@ -124,7 +250,12 @@ function getCardStyle() {
           class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
         >
           <div class="w-full">
-            <TablePlayers />
+            <GeneralTable
+              :headers="headers"
+              :items="profiles"
+              :path="`/#/${gameID}/profiles/`"
+              @row-clicked="navigateToProfile"
+            />
           </div>
         </div>
       </CardBox>
diff --git a/src/views/Game/NetworkScores.vue b/src/views/Game/NetworkScores.vue
index a52fe3e..2c7cb22 100644
--- a/src/views/Game/NetworkScores.vue
+++ b/src/views/Game/NetworkScores.vue
@@ -4,7 +4,7 @@ import { mdiCounter, mdiBackburger } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
-import TableScores from "@/components/Tables/TableScores.vue";
+import GeneralTable from "@/components/GeneralTable.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import { getGameInfo } from "@/constants";
@@ -26,71 +26,111 @@ if (!thisGame) {
   });
 }
 
+const headers = [
+  { text: "Player", value: "username", width: 100 },
+  { text: "Timestamp", value: "timestamp", width: 150 },
+  { text: "Song", value: "song.title", width: 180 },
+  { text: "Artist", value: "song.artist", width: 180 },
+  { text: "Chart", value: "song.chart", width: 100 },
+  { text: "Grade", value: "grade", width: 80 },
+  { text: "¥ Score", value: "points", width: 100 },
+];
+
+if (thisGame.scoreHeaders) {
+  for (var header of thisGame.scoreHeaders) {
+    headers.push(header);
+  }
+}
+
+headers.push({ text: "Type", value: "type", width: 80 });
+
 const scores = [
   {
-    id: 1,
-    player: "TRMAZI",
-    playerId: 1,
-    timestamp: "2023.05.30 12:00:39 AM",
-    isHighScore: false,
+    timestamp: 1649542921,
+    username: "TRMAZI",
     song: {
       id: 10741,
-      name: "100 Sec. Kitchen Battle!!",
-      artist: "Orange Lounge",
-      chart: "SP EXPERT",
-      difficulty: "12",
-    },
-    grade: "B+",
-    points: 787690,
-    combo: 42,
-    location: {
-      arcade: "Ho-House",
-      type: "Cab",
+      title: "Colorful Days ~NEWラブプラス メインテーマ~",
+      artist: "高嶺愛花＆小早川凛子＆姉ヶ崎寧々",
+      chart: "SP EXPERT\n★12",
+      difficulty: 12,
     },
+    grade: "AAA",
+    points: "1,000,000",
+    exscore: 1000,
+    combo: 1000,
+    halo: "MFC",
+    type: "Cab",
+    raised: true,
   },
   {
-    id: 1,
-    player: "BARRU",
-    playerId: 2,
-    timestamp: "2023.05.30 12:00:39 AM",
-    isHighScore: false,
+    timestamp: 1649542921,
+    username: "TRMAZI",
     song: {
       id: 10741,
-      name: "100 Sec. Kitchen Battle!!",
-      artist: "Orange Lounge",
-      chart: "SP EXPERT",
-      difficulty: "12",
-    },
-    grade: "B+",
-    points: 787690,
-    combo: 42,
-    location: {
-      arcade: "Ho-House",
-      type: "Cab",
+      title: "Colorful Days ～NEWラブプラス メインテーマ～",
+      artist: "高嶺愛花＆小早川凛子＆姉ヶ崎寧々",
+      chart: "SP EXPERT\n★12",
+      difficulty: 12,
     },
+    grade: "AAA",
+    points: "1,000,000",
+    exscore: 1000,
+    combo: 1000,
+    halo: "MFC",
+    type: "Cab",
+    raised: true,
   },
   {
-    id: 1,
-    player: "HO",
-    playerId: 3,
-    timestamp: "2023.05.30 12:00:39 AM",
-    isHighScore: false,
+    timestamp: 1649542921,
+    username: "TRMAZI",
     song: {
       id: 10741,
-      name: "100 Sec. Kitchen Battle!!",
-      artist: "Orange Lounge",
-      chart: "SP EXPERT",
-      difficulty: "12",
+      title: "Colorful Days ～NEWラブプラス メインテーマ～",
+      artist: "高嶺愛花＆小早川凛子＆姉ヶ崎寧々",
+      chart: "SP EXPERT\n★12",
+      difficulty: 12,
     },
-    grade: "B+",
-    points: 787690,
-    combo: 42,
-    location: {
-      arcade: "Ho-House",
-      type: "Cab",
+    grade: "AAA",
+    points: "1,000,000",
+    exscore: 1000,
+    combo: 1000,
+    halo: "MFC",
+    type: "Cab",
+    raised: true,
+  },
+  {
+    timestamp: 1649542921,
+    username: "TRMAZI",
+    song: {
+      id: 10741,
+      title: "Colorful Days ～NEWラブプラス メインテーマ～",
+      artist: "高嶺愛花＆小早川凛子＆姉ヶ崎寧々",
+      chart: "SP EXPERT\n★12",
+      difficulty: 12,
     },
+    grade: "AAA",
+    points: "1,000,000",
+    exscore: 1000,
+    combo: 1000,
+    halo: "MFC",
+    type: "Cab",
+    raised: true,
   },
 ];
+
+var formattedItems = [];
+for (var item of scores) {
+  if (item.timestamp) {
+    const date = new Date(item.timestamp * 1000);
+    item.timestamp = date.toLocaleString();
+    if (item.raised) {
+      item.timestamp = `${item.timestamp}\nNew High Score!`;
+    }
+  }
+
+  formattedItems.push(item);
+}
 </script>
 
 <template>
@@ -115,7 +155,7 @@ const scores = [
       />
 
       <CardBox has-table>
-        <TableScores :game="gameID" :entries="scores" />
+        <GeneralTable :headers="headers" :items="scores" />
       </CardBox>
     </SectionMain>
   </LayoutAuthenticated>
diff --git a/src/views/Game/PersonalScores.vue b/src/views/Game/PersonalScores.vue
index 73cc264..b04d373 100644
--- a/src/views/Game/PersonalScores.vue
+++ b/src/views/Game/PersonalScores.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { useRoute, useRouter } from "vue-router";
-import { mdiCounter, mdiBackburger } from "@mdi/js";
+import { mdiCounter, mdiBackburger, mdiHome } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
-import TableScores from "@/components/Tables/TableScores.vue";
+import GeneralTable from "@/components/GeneralTable.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import { getGameInfo } from "@/constants";
@@ -31,40 +31,79 @@ const profile = {
   name: "TRMAZI",
 };
 
+const headers = [
+  { text: "Timestamp", value: "timestamp", width: 150 },
+  { text: "Song", value: "song.title", width: 180 },
+  { text: "Artist", value: "song.artist", width: 180 },
+  { text: "Chart", value: "song.chart", width: 100 },
+  { text: "Grade", value: "grade", width: 80 },
+  { text: "¥ Score", value: "points", width: 100 },
+];
+
+if (thisGame.scoreHeaders) {
+  for (var header of thisGame.scoreHeaders) {
+    headers.push(header);
+  }
+}
+
+headers.push({ text: "Type", value: "type", width: 80 });
+
 const scores = [
   {
-    id: 1,
-    player: "TRMAZI",
-    timestamp: "2023.05.30 12:00:39 AM",
-    isHighScore: false,
+    timestamp: 1649542921,
     song: {
       id: 10741,
-      name: "100 Sec. Kitchen Battle!!",
-      artist: "Orange Lounge",
-      chart: "SP EXPERT",
-      difficulty: "12",
-    },
-    grade: "B+",
-    points: 787690,
-    combo: 42,
-    location: {
-      arcade: "Ho-House",
-      type: "Cab",
+      title: "Colorful Days ~NEWラブプラス メインテーマ~",
+      artist: "高嶺愛花＆小早川凛子＆姉ヶ崎寧々",
+      chart: "SP EXPERT\n★12",
+      difficulty: 12,
     },
+    grade: "AAA",
+    points: "1,000,000",
+    exscore: 1000,
+    combo: 1000,
+    halo: "MFC",
+    type: "Cab",
+    raised: true,
   },
 ];
+
+var formattedItems = [];
+for (var item of scores) {
+  if (item.timestamp) {
+    const date = new Date(item.timestamp * 1000);
+    item.timestamp = date.toLocaleString();
+    if (item.raised) {
+      item.timestamp = `${item.timestamp}\nNew High Score!`;
+    }
+  }
+
+  formattedItems.push(item);
+}
 </script>
 
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <BaseButton
-        :icon="mdiBackburger"
-        :href="`/#/games/${gameID}/profiles/${profile.id}`"
-        class="w-full md:w-auto mb-6"
-        color="info"
-        label="Back to Profile"
-      />
+      <div class="grid grid-cols-1 md:max-w-[180px] space-y-3 mb-5">
+        <BaseButton
+          :icon="mdiBackburger"
+          :href="`/#/games/${gameID}/profiles/${profile.id}`"
+          class="w-full md:w-auto"
+          color="info"
+          :label="`${profile.name}'s Profile`"
+        />
+
+        <BaseButton
+          :icon="mdiHome"
+          :href="`/#/games/${gameID}`"
+          class="w-full md:w-auto"
+          color="info"
+          :label="`${
+            thisGame.shortName ? thisGame.shortName : thisGame.name
+          } Home`"
+        />
+      </div>
 
       <SectionTitleLine
         :icon="mdiCounter"
@@ -75,7 +114,7 @@ const scores = [
       />
 
       <CardBox has-table>
-        <TableScores is-personal :game="gameID" :entries="scores" />
+        <GeneralTable :headers="headers" :items="formattedItems" />
       </CardBox>
     </SectionMain>
   </LayoutAuthenticated>
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
index c37dd0f..55bab36 100644
--- a/src/views/Game/PlayerView.vue
+++ b/src/views/Game/PlayerView.vue
@@ -1,6 +1,7 @@
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useMainStore } from "@/stores/main";
 import {
   mdiAccountOutline,
   mdiBackburger,
@@ -20,99 +21,13 @@ import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor";
 
 const $route = useRoute();
 const $router = useRouter();
+const mainStore = useMainStore();
 var gameID = null;
 var thisGame = null;
-
-const versionForm = reactive({
-  currentVersion: null,
-});
-
-const profile = {
-  id: 1,
-  name: "Trmazi",
-  extid: 12345678,
-  avatar:
-    "https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
-  last: {
-    arcade: "GhettoCade",
-    date: "7/16/2023",
-  },
-  stats: {
-    firstPlay: "1/14/2021",
-    singlePlays: 165,
-    singleDan: 1900,
-    singlePoint: 1877,
-    doublePlays: 15,
-    doubleDan: 0,
-    doublePoint: 187,
-    skillPoints: 193090,
-    jubility: 7600,
-  },
-};
-
-const loadStats = [
-  {
-    id: 0,
-    label: "Register Date",
-    type: String,
-    span: "md:col-span-2",
-    key: "firstPlay",
-  },
-  {
-    id: 1,
-    label: "Single Plays",
-    type: Number,
-    key: "singlePlays",
-  },
-  {
-    id: 2,
-    label: "Single Dan",
-    type: String,
-    key: "singleDan",
-    isIIDXDan: true,
-  },
-  {
-    id: 3,
-    label: "Single DJ POINT",
-    type: Number,
-    key: "singlePoint",
-  },
-  {
-    id: 4,
-    label: "Double Plays",
-    type: Number,
-    key: "doublePlays",
-  },
-  {
-    id: 5,
-    label: "Double Dan",
-    type: String,
-    key: "doubleDan",
-    isIIDXDan: true,
-  },
-  {
-    id: 6,
-    label: "Double DJ POINT",
-    type: Number,
-    key: "doublePoint",
-  },
-  {
-    id: 7,
-    label: "SKILL Points",
-    type: Number,
-    key: "skillPoints",
-    isSkill: true,
-  },
-  {
-    id: 8,
-    label: "Jubility",
-    type: Number,
-    key: "jubility",
-    isJubility: true,
-  },
-];
+var profileUserId = null;
 
 gameID = $route.params.game;
+profileUserId = $route.params.userId;
 thisGame = getGameInfo(gameID);
 
 if (!thisGame) {
@@ -124,10 +39,102 @@ if (!thisGame) {
   });
 }
 
+const versionForm = reactive({
+  currentVersion: null,
+});
+
+watch(
+  () => versionForm.currentVersion,
+  () => {
+    loadProfile();
+  }
+);
+
+const myProfile = ref(null);
+
+onMounted(async () => {
+  loadProfile();
+});
+
 if (!thisGame.versions) {
   versionForm.currentVersion = 1;
 }
 
+async function loadProfile() {
+  try {
+    myProfile.value = null;
+    const data = await mainStore.getUserProfile(
+      gameID,
+      versionForm.currentVersion,
+      profileUserId
+    );
+    myProfile.value = formatProfile(data);
+
+    if (data && !versionForm.currentVersion) {
+      versionForm.currentVersion = data.versions[data.versions.length - 1];
+    }
+  } catch (error) {
+    console.error("Failed to fetch user profile data:", error);
+  }
+}
+
+var loadStats = [
+  {
+    label: "Register Date",
+    type: String,
+    span: "md:col-span-2",
+    key: "first_play_timestamp",
+  },
+  {
+    label: "Last Play",
+    type: String,
+    span: "md:col-span-2",
+    key: "last_play_timestamp",
+  },
+  {
+    label: "First Arcade",
+    type: String,
+    span: "md:col-span-2",
+    key: "first_play_arcade",
+  },
+  {
+    label: "Last Arcade",
+    type: String,
+    span: "md:col-span-2",
+    key: "last_play_arcade",
+  },
+  {
+    label: "Total Plays",
+    type: Number,
+    key: "total_plays",
+  },
+  {
+    label: "EXP",
+    type: Number,
+    key: "exp",
+  },
+  {
+    label: "SP Plays",
+    type: Number,
+    key: "single_plays",
+  },
+  {
+    label: "DP Plays",
+    type: Number,
+    key: "double_plays",
+  },
+  {
+    label: "SP DJPOINT",
+    type: Number,
+    key: "single_dj_points",
+  },
+  {
+    label: "DP DJPOINT",
+    type: Number,
+    key: "double_dj_points",
+  },
+];
+
 function getSources() {
   var sources = null;
   if (!versionForm.currentVersion) {
@@ -146,7 +153,28 @@ function getCardStyle() {
     `;
 }
 
-function returnNumber(stat) {
+function colorText(stat, profile) {
+  if (profile) {
+    if (stat.isSkill && profile.jubility) {
+      return getGitadoraColor(profile.jubility);
+    } else if (stat.isJubility && profile.records.skill) {
+      return getJubilityColor(profile.records.skill);
+    }
+  }
+  return "";
+}
+
+function filterVersions(haveVersions) {
+  var filtered = [];
+  for (const version of thisGame.versions) {
+    if (haveVersions.includes(version.id)) {
+      filtered.push(version);
+    }
+  }
+  return filtered;
+}
+
+function returnNumber(stat, profile) {
   if (stat.isSkill) {
     return profile.stats[stat.key] / 100;
   } else if (stat.isJubility) {
@@ -156,91 +184,143 @@ function returnNumber(stat) {
   return profile.stats[stat.key];
 }
 
-function colorText(stat) {
-  if (stat.isSkill) {
-    return getGitadoraColor(profile.stats[stat.key]);
-  } else if (stat.isJubility) {
-    return getJubilityColor(profile.stats[stat.key]);
+function formatNumber(number, tenth) {
+  if (!tenth) {
+    return number / 100;
+  } else {
+    return number / 10;
   }
-  return "";
+}
+
+function formatProfile(profile) {
+  if (profile.stats) {
+    if (profile.stats.first_play_timestamp) {
+      const date = new Date(profile.stats.first_play_timestamp * 1000);
+      profile.stats.first_play_timestamp = date.toLocaleString();
+    }
+
+    if (profile.stats.last_play_timestamp) {
+      const date = new Date(profile.stats.last_play_timestamp * 1000);
+      profile.stats.last_play_timestamp = date.toLocaleString();
+    }
+
+    if (profile.dp) {
+      if (profile.dp.dan !== undefined) {
+        profile.dp.dan = getIIDXDan(profile.dp.dan).short;
+      }
+    }
+  }
+
+  return profile;
 }
 </script>
 
 <template>
   <LayoutAuthenticated>
-    <SectionMain>
-      <div class="md:flex pb-6 md:justify-between md:items-center">
-        <BaseButton
-          :icon="mdiBackburger"
-          :href="`/#/games/${gameID}`"
-          class="w-full md:w-auto"
-          color="info"
-          label="Go Back"
-        />
-        <div
-          v-if="thisGame.versions"
-          class="mt-2 md:mt-0 md:w-1/3 md:text-right"
-        >
-          <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
-            Select Version
-          </h2>
-          <FormControl
-            v-model="versionForm.currentVersion"
-            :options="thisGame.versions"
+    <template v-if="myProfile">
+      <SectionMain>
+        <div class="md:flex pb-6 md:justify-between md:items-center">
+          <BaseButton
+            :icon="mdiBackburger"
+            :href="`/#/games/${gameID}`"
+            class="w-full md:w-auto"
+            color="info"
+            :label="`${
+              thisGame.shortName ? thisGame.shortName : thisGame.name
+            } Home`"
           />
-        </div>
-      </div>
-      <SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
-      <div
-        v-if="versionForm.currentVersion"
-        :style="getCardStyle()"
-        class="rounded-2xl mb-6"
-      >
-        <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
-          <div class="w-full">
-            <ProfileCard use-small :profile="profile">
-              <div class="my-4 w-full flex gap-2 justify-center">
-                <BaseButton
-                  :href="`/#/games/${gameID}/scores/${profile.id}`"
-                  :icon="mdiPlaylistMusicOutline"
-                  class="w-full md:w-auto"
-                  color="info"
-                  label="View Scores"
-                />
 
-                <BaseButton
-                  :href="`/#/games/${gameID}/records/${profile.id}`"
-                  :icon="mdiFormatListText"
-                  class="w-full md:w-auto"
-                  color="info"
-                  label="View Records"
-                />
-              </div>
-              <div class="my-6 grid grid-cols-1 md:grid-cols-4 gap-6">
-                <CardBoxWidget
-                  v-for="stat in loadStats"
-                  :key="stat.id"
-                  :class="stat.span"
-                  :label="stat.label"
-                  :number="stat.type == Number ? returnNumber(stat) : None"
-                  :num-color="colorText(stat)"
-                >
-                  {{
-                    stat.type == String && !stat.isIIDXDan && !stat.isSkill
-                      ? profile.stats[stat.key]
-                      : None
-                  }}
-                  {{
-                    stat.type == String && stat.isIIDXDan
-                      ? getIIDXDan(profile.stats[stat.key]).label
-                      : None
-                  }}
-                </CardBoxWidget>
-              </div>
-            </ProfileCard>
+          <div
+            v-if="thisGame.versions && myProfile"
+            class="mt-2 md:mt-0 md:w-1/3 md:text-right"
+          >
+            <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
+              Select Version
+            </h2>
+            <FormControl
+              v-model="versionForm.currentVersion"
+              :options="filterVersions(myProfile.versions)"
+            />
           </div>
         </div>
-      </div>
-    </SectionMain>
+        <SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
+        <div
+          v-if="versionForm.currentVersion && myProfile"
+          :style="getCardStyle()"
+          class="rounded-2xl mb-6"
+        >
+          <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
+            <div class="w-full">
+              <ProfileCard
+                use-small
+                :game="gameID"
+                :version="versionForm.currentVersion"
+                :profile="myProfile"
+              >
+                <div class="md:w-1/3 grid grid-cols-1 md:grid-cols-2 gap-3">
+                  <BaseButton
+                    :href="`/#/games/${gameID}/scores/${myProfile.userId}`"
+                    :icon="mdiPlaylistMusicOutline"
+                    class="w-full md:w-auto"
+                    color="info"
+                    label="View Scores"
+                  />
+
+                  <BaseButton
+                    :href="`/#/games/${gameID}/records/${myProfile.userId}`"
+                    :icon="mdiFormatListText"
+                    class="w-full md:w-auto"
+                    color="info"
+                    label="View Records"
+                  />
+                </div>
+              </ProfileCard>
+            </div>
+          </div>
+        </div>
+        <div class="my-6 grid grid-cols-1 md:grid-cols-4 gap-6">
+          <template v-for="stat in loadStats" :key="stat">
+            <CardBoxWidget
+              v-if="myProfile.stats[stat.key]"
+              :class="stat.span"
+              :label="stat.label"
+              :number="
+                stat.type == Number ? returnNumber(stat, myProfile) : null
+              "
+              :num-color="colorText(stat)"
+            >
+              {{ stat.type == String ? myProfile.stats[stat.key] : null }}
+              <!-- {{
+                      stat.type == String && stat.isIIDXDan
+                        ? getIIDXDan(myProfile[stat.key]).label
+                        : None
+                    }} -->
+            </CardBoxWidget>
+          </template>
+          <CardBoxWidget
+            v-if="myProfile.skill"
+            label="Skill Points"
+            :number="formatNumber(myProfile.skill, false)"
+            :num-color="getGitadoraColor(myProfile.skill)"
+          />
+          <CardBoxWidget
+            v-if="myProfile.profile_skill"
+            label="Skill Level"
+            :number="myProfile.profile_skill"
+          />
+          <CardBoxWidget
+            v-if="myProfile.deller"
+            label="Deller"
+            :number="myProfile.deller"
+          />
+          <CardBoxWidget v-if="myProfile.sgrade" label="SP DAN">{{
+            getIIDXDan(myProfile.sgrade).label
+          }}</CardBoxWidget>
+          <CardBoxWidget v-if="myProfile.dgrade" label="DP DAN">{{
+            getIIDXDan(myProfile.dgrade).label
+          }}</CardBoxWidget>
+        </div>
+      </SectionMain>
+    </template>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c843fe6..814e3d6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,29 +1,32 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { computed, ref, onMounted, watch } from "vue";
 import {
-  mdiAccountMultipleOutline,
-  mdiChartTimelineVariant,
-  mdiReload,
-  mdiChartBellCurveCumulative,
+  // mdiReload,
+  // mdiChartBellCurveCumulative,
   mdiGamepad,
-  mdiTestTube,
-  mdiFlagCheckered,
+  // mdiTestTube,
+  mdiNewspaperVariant,
+  mdiChartTimelineVariant,
 } from "@mdi/js";
 import UserCard from "@/components/UserCard.vue";
 import * as chartConfig from "@/components/Charts/chart.config.js";
-import LineChart from "@/components/Charts/LineChart.vue";
+// import LineChart from "@/components/Charts/LineChart.vue";
 import SectionMain from "@/components/SectionMain.vue";
+//import CardBox from "@/components/CardBox.vue";
 import CardBoxWidget from "@/components/CardBoxWidget.vue";
-import CardBox from "@/components/CardBox.vue";
-import BaseButton from "@/components/BaseButton.vue";
+// import BaseButton from "@/components/BaseButton.vue";
 import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
-import PillTag from "@/components/PillTag.vue";
-import TableRivalsFull from "@/components/Tables/TableRivalsFull.vue";
-import TableGoals from "@/components/Tables/TableGoals.vue";
-import NotificationBar from "@/components/NotificationBar.vue";
-import { GameConstants } from "@/constants";
+// import PillTag from "@/components/PillTag.vue";
+
+// Public beta news data
+import CardBoxNews from "@/components/Cards/CardBoxNews.vue";
+import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
+import { getGameInfo } from "@/constants";
+import { useMainStore } from "@/stores/main";
+const mainStore = useMainStore();
+var newsData = ref([]);
 
 const chartData = ref(null);
 
@@ -31,53 +34,69 @@ const fillChartData = () => {
   chartData.value = chartConfig.sampleChartData();
 };
 
-onMounted(() => {
+onMounted(async () => {
   fillChartData();
+  try {
+    const data = await mainStore.fetchAllNews();
+    newsData.value = data;
+  } catch (error) {
+    console.error("Failed to fetch news data:", error);
+  }
 });
 
-const setGoals = [
-  {
-    game: "DanceDance Revolution",
-    type: "Rank",
-    goal: "Top 10 Ranking",
-    status: "#10 of 132",
-    deadline: "3 Weeks",
-  },
-  {
-    game: "pop'n music",
-    type: "Plays",
-    goal: "100 Plays",
-    status: "2 Plays Since Creation",
-    deadline: "1 Week",
-  },
-];
+function humanReadableTime(timestamp) {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleString();
+}
 
-const gameStats = [
-  {
-    id: GameConstants.IIDX,
-    username: "DJ. TRMAZI",
-    type: "ranking",
-    value: "#22 of 330",
-  },
-  {
-    id: GameConstants.DDR,
-    username: "TRMAZI",
-    type: "scores",
-    value: 233,
-  },
-  {
-    id: GameConstants.POPN_MUSIC,
-    username: "TRMAZI",
-    type: "plays",
-    value: 69,
-  },
-  {
-    id: GameConstants.SDVX,
-    username: "TRMAZI",
-    type: "scores",
-    value: 420,
-  },
-];
+// const setGoals = [
+//   {
+//     game: "DanceDance Revolution",
+//     type: "Rank",
+//     goal: "Top 10 Ranking",
+//     status: "#10 of 132",
+//     deadline: "3 Weeks",
+//   },
+//   {
+//     game: "pop'n music",
+//     type: "Plays",
+//     goal: "100 Plays",
+//     status: "2 Plays Since Creation",
+//     deadline: "1 Week",
+//   },
+// ];
+
+const userProfiles = ref(mainStore.userProfiles);
+watch(
+  () => mainStore.userProfiles,
+  (newValue) => {
+    userProfiles.value = newValue;
+  }
+);
+
+const cumulativePlays = computed(() => {
+  return userProfiles.value.reduce(
+    (total, user) => total + user.data.total_plays,
+    0
+  );
+});
+
+// const sortedUserProfiles = computed(() => {
+//   return [...userProfiles.value].sort(
+//     (a, b) => b.data.last_play_timestamp - a.data.last_play_timestamp
+//   );
+// });
+
+function filterUserProfiles(userProfiles) {
+  var filteredProfiles = [];
+  for (const profile of userProfiles) {
+    const game = getGameInfo(profile.game);
+    if (game && !game.skip) {
+      filteredProfiles.push(profile);
+    }
+  }
+  return filteredProfiles;
+}
 </script>
 
 <template>
@@ -86,65 +105,66 @@ const gameStats = [
       <h2 class="pb-4 text-4xl lg:text-5xl">Welcome to <samp>PhaseII</samp></h2>
       <UserCard class="mb-6" />
 
-      <div class="my-6">
+      <!-- For public beta, we'll load the news here. -->
+      <SectionTitleLine :icon="mdiNewspaperVariant" title="Network News" main />
+
+      <div v-if="newsData.length" class="grid gap-4 grid-cols-1 w-full pb-4">
+        <CardBoxNews
+          v-for="news of newsData"
+          :id="news.id"
+          :key="news.id"
+          :title="news.title"
+          :content="news.body"
+          :date="humanReadableTime(news.timestamp)"
+          :cover="news.data.img"
+          class="w-full h-full"
+        />
+      </div>
+      <CardBoxComponentEmpty v-if="!newsData || !newsData.length" />
+
+      <!-- <div class="my-6">
         <NotificationBar color="info">
           You have unread news!
           <template #right>
             <a href="#/news" class="text-blue-300 hover:underline">View now</a>
           </template>
         </NotificationBar>
-      </div>
+      </div> -->
 
       <SectionTitleLine
         :icon="mdiChartTimelineVariant"
         title="Quick Stats"
         main
       />
-
-      <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
-        <CardBoxWidget
-          trend="12% (from last week)"
-          trend-type="up"
-          :number="37"
-          label="Scores (This week)"
-        />
-        <CardBoxWidget
-          trend="12%"
-          trend-type="down"
-          :number="770"
-          :prefix="'¢'"
-          label="PhaseCoin"
-        />
-        <CardBoxWidget
-          trend="None Completed"
-          trend-type="alert"
-          :number="2"
-          label="Active Goals"
-        />
+      <div
+        class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 mb-6"
+      >
+        <CardBoxWidget :number="cumulativePlays" label="Cumulative Plays" />
+        <CardBoxWidget :number="userProfiles.length" label="Games Played" />
       </div>
 
-      <SectionTitleLine :icon="mdiGamepad" title="Game Stats" main />
+      <SectionTitleLine :icon="mdiGamepad" title="Showcase" main />
       <div
-        class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
+        class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 mb-5"
       >
         <CardBoxGameStat
-          v-for="stat of gameStats"
-          :key="stat.id"
-          :game="stat.id"
-          :value="stat.value"
-          :profile-name="stat.username"
-          :type="stat.type"
+          v-for="profile of filterUserProfiles(userProfiles)"
+          :key="profile.game"
+          :game="profile.game"
+          :value="profile.data.total_plays"
+          profile-name=" "
+          type="plays"
         />
       </div>
 
-      <SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" main />
+      <!-- <SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" main />
       <div class="mb-6">
         <CardBox has-table>
           <TableGoals :goals="setGoals" />
         </CardBox>
-      </div>
+      </div> -->
 
-      <SectionTitleLine
+      <!-- <SectionTitleLine
         :icon="mdiChartBellCurveCumulative"
         title="Play Trends"
         main
@@ -165,12 +185,12 @@ const gameStats = [
         <div v-if="chartData">
           <line-chart :data="chartData" class="h-96" />
         </div>
-      </CardBox>
+      </CardBox> -->
 
-      <SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
+      <!-- <SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
       <CardBox has-table>
         <TableRivalsFull />
-      </CardBox>
+      </CardBox> -->
     </SectionMain>
   </LayoutAuthenticated>
 </template>
diff --git a/src/views/NewsView.vue b/src/views/NewsView.vue
index c09ee31..204249c 100644
--- a/src/views/NewsView.vue
+++ b/src/views/NewsView.vue
@@ -1,13 +1,29 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { mdiNewspaperVariant } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
 import CardBoxNews from "@/components/Cards/CardBoxNews.vue";
-import testNews from "@/constants/news.json";
 
-const newsData = testNews;
+import { useMainStore } from "@/stores/main";
+const mainStore = useMainStore();
+var newsData = ref([]);
+
+onMounted(async () => {
+  try {
+    const data = await mainStore.fetchAllNews();
+    newsData.value = data;
+  } catch (error) {
+    console.error("Failed to fetch news data:", error);
+  }
+});
+
+function humanReadableTime(timestamp) {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleString();
+}
 </script>
 
 <template>
@@ -22,7 +38,7 @@ const newsData = testNews;
           :key="news.id"
           :title="news.title"
           :content="news.content"
-          :date="news.timestamp"
+          :date="humanReadableTime(news.timestamp)"
           :cover="news.cover"
           class="w-full h-full"
         />
diff --git a/src/views/PostView.vue b/src/views/PostView.vue
index f1b2c33..d595781 100644
--- a/src/views/PostView.vue
+++ b/src/views/PostView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { mdiBackburger } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
@@ -6,18 +7,27 @@ import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseButtons from "@/components/BaseButtons.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import testNews from "@/constants/news.json";
+import { useMainStore } from "@/stores/main";
 const $route = useRoute();
 const $router = useRouter();
 const newsID = parseInt($route.params.id);
 
-const NewsData = testNews;
-const thisNews = NewsData.find((x) => x.id === newsID);
+const mainStore = useMainStore();
+var thisNews = ref({ data: {} });
+var newsBody = ref("");
 
-const newsBody = thisNews.content.split("\n");
+onMounted(async () => {
+  try {
+    const data = await mainStore.fetchNews(newsID);
+    thisNews.value = data.news;
+    newsBody.value = data.news.body.split("\n");
+  } catch (error) {
+    console.error("Failed to fetch news data:", error);
+  }
+});
 
 function goBack() {
-  $router.push("/news");
+  $router.push("/");
 }
 </script>
 
@@ -25,10 +35,10 @@ function goBack() {
   <LayoutAuthenticated>
     <SectionMain>
       <transition>
-        <CardBox has-table>
+        <CardBox v-if="thisNews != {}" has-table>
           <div class="flex flex-col items-center">
             <img
-              :src="thisNews.cover"
+              :src="thisNews.data.img"
               class="rounded-t-2xl md:rounded-2xl md:w-1/2 md:m-4"
             />
           </div>
@@ -52,7 +62,7 @@ function goBack() {
           <template #footer>
             <BaseButtons>
               <BaseButton
-                label="News"
+                label="Home"
                 color="info"
                 :icon="mdiBackburger"
                 icon-size="20"
diff --git a/src/views/Profile/CardsView.vue b/src/views/Profile/CardsView.vue
index 6e27d12..7e49fc2 100644
--- a/src/views/Profile/CardsView.vue
+++ b/src/views/Profile/CardsView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { ref, onMounted } from "vue";
 import { mdiCardAccountDetailsOutline } from "@mdi/js";
 import { dashCode } from "@/constants/userData.js";
 import SectionMain from "@/components/SectionMain.vue";
@@ -7,13 +8,29 @@ import UserCard from "@/components/UserCard.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 
-const myCards = [
-  "YRZ2FGHW24JJTU2E",
-  "Z1Y0WWAMXGRMZY26",
-  "1RJKZLBFKSK2AB2F",
-  "R1Y4H1J7GSUZSR2P",
-  "7JNC815MHXU33222",
-];
+import { useMainStore } from "@/stores/main";
+const mainStore = useMainStore();
+var cardData = ref([]);
+
+onMounted(async () => {
+  try {
+    const data = await mainStore.getCards();
+    cardData.value = data;
+  } catch (error) {
+    console.error("Failed to fetch card data:", error);
+  }
+});
+
+const copyToClipboard = (text) => {
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      alert("Copied to clipboard!");
+    })
+    .catch(() => {
+      alert("Failed to copy to clipboard!");
+    });
+};
 </script>
 
 <template>
@@ -32,19 +49,29 @@ const myCards = [
 
       <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
         <div
-          v-for="card of myCards"
-          :key="card"
+          v-for="card of cardData"
+          :key="card.id"
           class="grid dark:bg-slate-900/70 rounded-2xl p-5"
         >
           <div class="flex justify-between md:grid md:gap-2 mb-4 items-center">
             <img src="/assets/passes/generic.png" class="w-24 md:w-auto" />
-            <h1 class="text-xl text-center font-mono">{{ dashCode(card) }}</h1>
+            <h1 class="text-xl text-center font-mono">
+              {{ dashCode(card.encoded) }}
+            </h1>
           </div>
 
           <div class="grid grid-cols-3 md:grid-cols-2 gap-2">
-            <BaseButton type="submit" color="info" label="Copy AC" />
-            <BaseButton type="submit" color="info" label="Copy NFC-ID" />
-            <BaseButton type="submit" color="danger" label="Delete" />
+            <BaseButton
+              color="info"
+              label="Copy AC"
+              @click="copyToClipboard(card.encoded)"
+            />
+            <BaseButton
+              color="info"
+              label="Copy NFC-ID"
+              @click="copyToClipboard(card.id)"
+            />
+            <BaseButton color="danger" label="Delete" />
           </div>
         </div>
       </div>
diff --git a/src/views/Profile/IntegrationView.vue b/src/views/Profile/IntegrationView.vue
index c97b968..7a027f3 100644
--- a/src/views/Profile/IntegrationView.vue
+++ b/src/views/Profile/IntegrationView.vue
@@ -1,10 +1,7 @@
 <script setup>
-import {
-  mdiServerNetwork,
-  mdiMessage,
-  mdiScoreboard,
-  mdiTournament,
-} from "@mdi/js";
+import { useMainStore } from "@/stores/main";
+import { ref, watch } from "vue";
+import { mdiServerNetwork, mdiMessage, mdiScoreboard } from "@mdi/js";
 import SectionMain from "@/components/SectionMain.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseButton from "@/components/BaseButton.vue";
@@ -12,6 +9,16 @@ import UserCard from "@/components/UserCard.vue";
 import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
 import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import PillTag from "@/components/PillTag.vue";
+
+const mainStore = useMainStore();
+
+const userData = ref(mainStore.userData);
+watch(
+  () => mainStore.userData,
+  (newValue) => {
+    userData.value = newValue;
+  }
+);
 </script>
 
 <template>
@@ -33,14 +40,39 @@ import PillTag from "@/components/PillTag.vue";
             class="mb-2"
           />
 
-          <h1 class="text-lg">Discord is linked to <b>@trmazi</b></h1>
-          <h1 class="text-lg">Discord isn't linked!</h1>
+          <h1
+            v-if="userData.discord && userData.discord.linked"
+            class="text-lg"
+          >
+            Discord is linked to <b>{{ userData.discord.username }}</b>
+          </h1>
+          <h1
+            v-if="!userData.discord || !userData.discord.linked"
+            class="text-lg"
+          >
+            Discord isn't linked!
+          </h1>
 
           <template #footer>
             <div class="space-x-2">
-              <BaseButton type="submit" color="success" label="Link Now" />
-              <BaseButton type="submit" color="info" label="Relink" />
-              <BaseButton type="submit" color="danger" label="Unlink" />
+              <BaseButton
+                v-if="!userData.discord || !userData.discord.linked"
+                type="submit"
+                color="success"
+                label="Link Now"
+              />
+              <BaseButton
+                v-if="userData.discord && userData.discord.linked"
+                type="submit"
+                color="info"
+                label="Relink"
+              />
+              <BaseButton
+                v-if="userData.discord && userData.discord.linked"
+                type="submit"
+                color="danger"
+                label="Unlink"
+              />
             </div>
           </template>
         </CardBox>
@@ -53,19 +85,38 @@ import PillTag from "@/components/PillTag.vue";
             class="mb-2"
           />
 
-          <h1 class="text-lg">Kamaitachi is linked to <b>@trmazi</b></h1>
-          <h1 class="text-lg">Kamaitachi isn't linked!</h1>
+          <h1 v-if="userData.tachi && userData.tachi.linked" class="text-lg">
+            Kamaitachi is linked to <b>{{ userData.tachi.username }}</b>
+          </h1>
+          <h1 v-if="!userData.tachi || !userData.tachi.linked" class="text-lg">
+            Kamaitachi isn't linked!
+          </h1>
 
           <template #footer>
             <div class="space-x-2">
-              <BaseButton type="submit" color="success" label="Link Now" />
-              <BaseButton type="submit" color="info" label="Relink" />
-              <BaseButton type="submit" color="danger" label="Unlink" />
+              <BaseButton
+                v-if="!userData.tachi || !userData.tachi.linked"
+                type="submit"
+                color="success"
+                label="Link Now"
+              />
+              <BaseButton
+                v-if="userData.tachi && userData.tachi.linked"
+                type="submit"
+                color="info"
+                label="Relink"
+              />
+              <BaseButton
+                v-if="userData.tachi && userData.tachi.linked"
+                type="submit"
+                color="danger"
+                label="Unlink"
+              />
             </div>
           </template>
         </CardBox>
 
-        <CardBox>
+        <!-- <CardBox>
           <PillTag
             :icon="mdiTournament"
             color="info"
@@ -83,7 +134,7 @@ import PillTag from "@/components/PillTag.vue";
               <BaseButton type="submit" color="danger" label="Unlink" />
             </div>
           </template>
-        </CardBox>
+        </CardBox> -->
       </div>
     </SectionMain>
   </LayoutAuthenticated>
diff --git a/src/views/Profile/ProfileView.vue b/src/views/Profile/ProfileView.vue
index 66d0209..ae0e6d4 100644
--- a/src/views/Profile/ProfileView.vue
+++ b/src/views/Profile/ProfileView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive } from "vue";
+import { reactive, ref, watch } from "vue";
 import { useMainStore } from "@/stores/main";
 import {
   mdiAccount,
@@ -11,7 +11,7 @@ import SectionMain from "@/components/SectionMain.vue";
 import CardBox from "@/components/CardBox.vue";
 import BaseDivider from "@/components/BaseDivider.vue";
 import FormField from "@/components/FormField.vue";
-import FormCheckRadio from "@/components/FormCheckRadio.vue";
+// import FormCheckRadio from "@/components/FormCheckRadio.vue";
 import FormControl from "@/components/FormControl.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import UserCard from "@/components/UserCard.vue";
@@ -20,10 +20,25 @@ import SectionTitleLine from "@/components/SectionTitleLine.vue";
 import PillTag from "@/components/PillTag.vue";
 
 const mainStore = useMainStore();
+const userName = ref(mainStore.userName);
+const userEmail = ref(mainStore.userEmail);
+
+watch(
+  () => mainStore.userName,
+  (newValue) => {
+    userName.value = newValue;
+  }
+);
+watch(
+  () => mainStore.userEmail,
+  (newValue) => {
+    userEmail.value = newValue;
+  }
+);
 
 const profileForm = reactive({
-  name: mainStore.userName,
-  email: mainStore.userEmail,
+  name: "",
+  email: "",
   pin: "****",
 });
 
@@ -48,7 +63,7 @@ const submitPass = () => {
       <UserCard class="mb-6" use-small even-smaller />
       <SectionTitleLine :icon="mdiAccount" title="Profile Settings" main />
 
-      <CardBox is-form class="mb-6" @submit.prevent="">
+      <!-- <CardBox is-form class="mb-6" @submit.prevent="">
         <PillTag color="info" label="Discord Notifications" class="mb-4" />
         <div class="grid gap-4 grid-cols-2 md:grid-cols-4">
           <FormCheckRadio
@@ -80,14 +95,14 @@ const submitPass = () => {
             class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
           />
         </div>
-      </CardBox>
+      </CardBox> -->
 
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <CardBox is-form class="row-span-1" @submit.prevent="submitProfile">
           <PillTag color="info" label="General" class="mb-2" />
           <FormField label="Username">
             <FormControl
-              v-model="profileForm.name"
+              v-model="userName"
               :icon="mdiAccount"
               name="username"
               required
@@ -96,10 +111,10 @@ const submitPass = () => {
           </FormField>
           <FormField
             label="E-mail"
-            help="Used for Gravatar and Password Resetting"
+            help="Not currently used, but will be soon™️"
           >
             <FormControl
-              v-model="profileForm.email"
+              v-model="userEmail"
               :icon="mdiMail"
               type="email"
               name="email"
@@ -119,12 +134,12 @@ const submitPass = () => {
             />
           </FormField>
 
-          <FormField
+          <!-- <FormField
             label="Public Profile"
             help="Allow your profile to be seen publicly"
           >
             <FormCheckRadio name="system" :model-value="true" type="switch" />
-          </FormField>
+          </FormField> -->
 
           <template #footer>
             <BaseButton color="success" type="submit" label="Update" />
diff --git a/vite.config.js b/vite.config.js
index d76ac77..35422c6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,10 @@
 import { fileURLToPath, URL } from "node:url";
-
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import dotenv from "dotenv";
+
+// Load .env file
+dotenv.config();
 
 // https://vitejs.dev/config/
 export default defineConfig({
