diff --git a/index.html b/index.html
index 8ca916a..4bd707a 100644
--- a/index.html
+++ b/index.html
@@ -8,13 +8,14 @@
     <title>PhaseWeb 3</title>
 
   </head>
-  <body>
+  <body class="scroll-smooth">
     <noscript>
       <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <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" />
   </body>
 
   <style>
@@ -28,4 +29,27 @@
       }
     }
   </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/public/assets/games/ddr/12.png b/public/assets/games/ddr/12.png
new file mode 100644
index 0000000..ba4df0e
Binary files /dev/null and b/public/assets/games/ddr/12.png differ
diff --git a/public/assets/games/ddr/13.png b/public/assets/games/ddr/13.png
new file mode 100644
index 0000000..2727f6b
Binary files /dev/null and b/public/assets/games/ddr/13.png differ
diff --git a/public/assets/games/ddr/14.png b/public/assets/games/ddr/14.png
new file mode 100644
index 0000000..8f3778e
Binary files /dev/null and b/public/assets/games/ddr/14.png differ
diff --git a/public/assets/games/ddr/15.png b/public/assets/games/ddr/15.png
new file mode 100644
index 0000000..8f3778e
Binary files /dev/null and b/public/assets/games/ddr/15.png differ
diff --git a/public/assets/games/ddr/16.png b/public/assets/games/ddr/16.png
new file mode 100644
index 0000000..ee4fe56
Binary files /dev/null and b/public/assets/games/ddr/16.png differ
diff --git a/public/assets/games/ddr/17.png b/public/assets/games/ddr/17.png
new file mode 100644
index 0000000..be2ba55
Binary files /dev/null and b/public/assets/games/ddr/17.png differ
diff --git a/public/assets/games/ddr/18.png b/public/assets/games/ddr/18.png
new file mode 100644
index 0000000..f5dc855
Binary files /dev/null and b/public/assets/games/ddr/18.png differ
diff --git a/public/assets/games/ddr/19.png b/public/assets/games/ddr/19.png
new file mode 100644
index 0000000..197d0dc
Binary files /dev/null and b/public/assets/games/ddr/19.png differ
diff --git a/public/assets/games/ddr/card/13.png b/public/assets/games/ddr/card/13.png
new file mode 100644
index 0000000..e4c5033
Binary files /dev/null and b/public/assets/games/ddr/card/13.png differ
diff --git a/public/assets/games/ddr/card/14.png b/public/assets/games/ddr/card/14.png
new file mode 100644
index 0000000..3f01749
Binary files /dev/null and b/public/assets/games/ddr/card/14.png differ
diff --git a/public/assets/games/ddr/card/15.png b/public/assets/games/ddr/card/15.png
new file mode 100644
index 0000000..3f01749
Binary files /dev/null and b/public/assets/games/ddr/card/15.png differ
diff --git a/public/assets/games/ddr/card/16.png b/public/assets/games/ddr/card/16.png
new file mode 100644
index 0000000..99e8b1c
Binary files /dev/null and b/public/assets/games/ddr/card/16.png differ
diff --git a/public/assets/games/ddr/card/17.png b/public/assets/games/ddr/card/17.png
new file mode 100644
index 0000000..3a986fb
Binary files /dev/null and b/public/assets/games/ddr/card/17.png differ
diff --git a/public/assets/games/ddr/card/18.png b/public/assets/games/ddr/card/18.png
new file mode 100644
index 0000000..3ab6eb3
Binary files /dev/null and b/public/assets/games/ddr/card/18.png differ
diff --git a/public/assets/games/ddr/card/19.png b/public/assets/games/ddr/card/19.png
new file mode 100644
index 0000000..2e445e2
Binary files /dev/null and b/public/assets/games/ddr/card/19.png differ
diff --git a/public/assets/games/iidx/18.png b/public/assets/games/iidx/18.png
new file mode 100644
index 0000000..9fe8f77
Binary files /dev/null and b/public/assets/games/iidx/18.png differ
diff --git a/public/assets/games/iidx/card/18.png b/public/assets/games/iidx/card/18.png
new file mode 100644
index 0000000..cdc7c0b
Binary files /dev/null and b/public/assets/games/iidx/card/18.png differ
diff --git a/public/assets/games/jubeat/10.png b/public/assets/games/jubeat/10.png
new file mode 100644
index 0000000..31917ed
Binary files /dev/null and b/public/assets/games/jubeat/10.png differ
diff --git a/public/assets/games/jubeat/13.png b/public/assets/games/jubeat/13.png
new file mode 100644
index 0000000..d72a940
Binary files /dev/null and b/public/assets/games/jubeat/13.png differ
diff --git a/public/assets/games/jubeat/2.png b/public/assets/games/jubeat/2.png
new file mode 100644
index 0000000..97a895c
Binary files /dev/null and b/public/assets/games/jubeat/2.png differ
diff --git a/public/assets/games/jubeat/3.png b/public/assets/games/jubeat/3.png
new file mode 100644
index 0000000..97a895c
Binary files /dev/null and b/public/assets/games/jubeat/3.png differ
diff --git a/public/assets/games/jubeat/card/10.png b/public/assets/games/jubeat/card/10.png
new file mode 100644
index 0000000..604b43f
Binary files /dev/null and b/public/assets/games/jubeat/card/10.png differ
diff --git a/public/assets/games/jubeat/card/13.png b/public/assets/games/jubeat/card/13.png
new file mode 100644
index 0000000..60ccbca
Binary files /dev/null and b/public/assets/games/jubeat/card/13.png differ
diff --git a/public/assets/games/jubeat/card/2.png b/public/assets/games/jubeat/card/2.png
new file mode 100644
index 0000000..3385f2c
Binary files /dev/null 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
new file mode 100644
index 0000000..3385f2c
Binary files /dev/null and b/public/assets/games/jubeat/card/3.png differ
diff --git a/public/assets/games/sdvx/chara/rias.webp b/public/assets/games/sdvx/chara/rias.webp
new file mode 100644
index 0000000..c947b37
Binary files /dev/null and b/public/assets/games/sdvx/chara/rias.webp differ
diff --git a/public/assets/sounds/konami.mp3 b/public/assets/sounds/konami.mp3
new file mode 100644
index 0000000..6f235e9
Binary files /dev/null and b/public/assets/sounds/konami.mp3 differ
diff --git a/src/components/Cards/ProfileCard.vue b/src/components/Cards/ProfileCard.vue
new file mode 100644
index 0000000..a8059d7
--- /dev/null
+++ b/src/components/Cards/ProfileCard.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { mdiCog } from "@mdi/js";
+import CardBoxWidget from "@/components/CardBoxWidget.vue";
+import BaseButton from "@/components/BaseButton.vue";
+
+defineProps({
+  useQpro: {
+    type: Boolean,
+    default: false,
+  },
+  avatar: {
+    type: String,
+    default: null,
+  },
+  useSmall: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+var last = {
+  arcade: "Ho-House",
+};
+</script>
+
+<template>
+  <div class="flex justify-center items-center">
+    <img v-if="avatar" class="h-40" :src="avatar" />
+    <div class="space-y-2 text-left lg:mx-12 p-2">
+      <h1 class="text-3xl md:text-4xl font-bold">TRMAZI</h1>
+      <p class="text-xl ordinal slashed-zero">1234-5678</p>
+      <p class="text-md md:text-lg">
+        Last played at <b>{{ last.arcade }}</b> on <b>10/22/2022</b>
+      </p>
+      <BaseButton
+        v-if="!useSmall"
+        :icon="mdiCog"
+        href="/#/games/ddr/profiles/1"
+        color="info"
+        label="Edit Profile"
+      />
+    </div>
+  </div>
+  <div v-if="!useSmall" 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)" />
+    <CardBoxWidget
+      prefix="#"
+      :number="43"
+      suffix=" / 300"
+      label="Ranking (All Versions)"
+    />
+    <CardBoxWidget :number="2" label="Rivals" />
+  </div>
+</template>
diff --git a/src/components/FormControl.vue b/src/components/FormControl.vue
index c7a8a2f..1284310 100644
--- a/src/components/FormControl.vue
+++ b/src/components/FormControl.vue
@@ -137,7 +137,7 @@ if (props.ctrlKFocus) {
       <option
         v-for="option in options"
         :key="option.id ?? option"
-        :value="option"
+        :value="option.id ?? option"
       >
         {{ option.label ?? option }}
       </option>
diff --git a/src/components/GameCard.vue b/src/components/GameCard.vue
new file mode 100644
index 0000000..d609961
--- /dev/null
+++ b/src/components/GameCard.vue
@@ -0,0 +1,27 @@
+<script setup>
+import BaseLevel from "@/components/BaseLevel.vue";
+import CardBox from "@/components/CardBox.vue";
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  card: {
+    type: String,
+    required: true,
+  },
+});
+
+function getCardStyle() {
+  return `
+    background-image: url('${props.card}');
+    background-size: cover;
+    background-repeat: no-repeat;
+  `;
+}
+</script>
+
+<template>
+  
+</template>
diff --git a/src/components/GameIcon.vue b/src/components/GameIcon.vue
index 3877d95..8724035 100644
--- a/src/components/GameIcon.vue
+++ b/src/components/GameIcon.vue
@@ -23,7 +23,7 @@ const spanClass = computed(
 
 <template>
   <span :class="spanClass">
-    <img :src="path" class="rounded-full" :class="w + ' ' + h" />
+    <img :src="path" class="rounded-full" :class="`${w}`" />
     <slot />
   </span>
 </template>
diff --git a/src/components/GameTitleLine.vue b/src/components/GameTitleLine.vue
new file mode 100644
index 0000000..4475ca3
--- /dev/null
+++ b/src/components/GameTitleLine.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { useSlots, computed } from "vue";
+import GameIcon from "./GameIcon.vue";
+
+defineProps({
+  path: {
+    type: String,
+    default: null,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const hasSlot = computed(() => useSlots().default);
+</script>
+
+<template>
+  <section class="pt-6 mb-6 flex items-center justify-between">
+    <div class="flex items-center justify-start space-x-2">
+      <GameIcon :path="path" class="w-12 h-12 p-1 drop-shadow-md" />
+      <h1 class="text-2xl md:text-3xl leading-tight">
+        {{ title }}
+      </h1>
+    </div>
+    <slot v-if="hasSlot" />
+  </section>
+</template>
diff --git a/src/components/Tables/TablePlayers.vue b/src/components/Tables/TablePlayers.vue
new file mode 100644
index 0000000..d3a465b
--- /dev/null
+++ b/src/components/Tables/TablePlayers.vue
@@ -0,0 +1,77 @@
+<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">
+        <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/constants/index.js b/src/constants/index.js
index 14253d0..eb23865 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -284,39 +284,39 @@ export function GetRandomMessage() {
 const GITADORA_VERSION_DATA = [
   {
     id: VersionConstants.GITADORA,
-    name: "Original",
+    label: "Original",
   },
   {
     id: VersionConstants.GITADORA_OVERDRIVE,
-    name: "OverDrive",
+    label: "OverDrive",
   },
   {
     id: VersionConstants.GITADORA_TRIBOOST,
-    name: "Tri-Boost",
+    label: "Tri-Boost",
   },
   {
     id: VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
-    name: "Tri-Boost RE:Evolve",
+    label: "Tri-Boost RE:Evolve",
   },
   {
     id: VersionConstants.GITADORA_MATIXX,
-    name: "Matixx",
+    label: "Matixx",
   },
   {
     id: VersionConstants.GITADORA_EXCHAIN,
-    name: "EXCHAIN",
+    label: "EXCHAIN",
   },
   {
     id: VersionConstants.GITADORA_NEXTAGE,
-    name: "Nex+Age",
+    label: "Nex+Age",
   },
   {
     id: VersionConstants.GITADORA_HIGH_VOLTAGE,
-    name: "HIGH-VOLTAGE",
+    label: "HIGH-VOLTAGE",
   },
   {
     id: VersionConstants.GITADORA_FUZZUP,
-    name: "FUZZUP",
+    label: "FUZZUP",
   },
 ];
 
@@ -329,11 +329,11 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.BEATSTREAM,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.BEATSTREAM_2,
-        name: "アニムトライヴ",
+        label: "アニムトライヴ",
       },
     ],
   },
@@ -364,91 +364,92 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.DANCE_RUSH_STARDOM,
-        name: "STARDOM",
+        label: "STARDOM",
       },
     ],
   },
   {
     id: GameConstants.DDR,
-    name: "DanceDance Revolution",
+    name: "DanceDanceRevolution",
+    shortName: "DDR",
     icon: null,
     cardBG: null,
     versions: [
       {
         id: VersionConstants.DDR_1ST_MIX,
-        name: "1ST MIX",
+        label: "1ST MIX",
       },
       {
         id: VersionConstants.DDR_2ND_MIX,
-        name: "2ND MIX",
+        label: "2ND MIX",
       },
       {
         id: VersionConstants.DDR_3RD_MIX,
-        name: "3RD MIX",
+        label: "3RD MIX",
       },
       {
         id: VersionConstants.DDR_4TH_MIX,
-        name: "4TH MIX",
+        label: "4TH MIX",
       },
       {
         id: VersionConstants.DDR_5TH_MIX,
-        name: "5TH MIX",
+        label: "5TH MIX",
       },
       {
         id: VersionConstants.DDR_MAX,
-        name: "MAX",
+        label: "MAX",
       },
       {
         id: VersionConstants.DDR_MAX2,
-        name: "MAX 2",
+        label: "MAX 2",
       },
       {
         id: VersionConstants.DDR_EXTREME,
-        name: "EXTREME",
+        label: "EXTREME",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA,
-        name: "SuperNOVA",
+        label: "SuperNOVA",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA_2,
-        name: "SuperNOVA 2",
+        label: "SuperNOVA 2",
       },
       {
         id: VersionConstants.DDR_X,
-        name: "X",
+        label: "X",
       },
       {
         id: VersionConstants.DDR_X2,
-        name: "X2",
+        label: "X2",
       },
       {
         id: VersionConstants.DDR_X3_VS_2ND_MIX,
-        name: "X3 vs. 2ND MIX",
+        label: "X3 vs. 2ND MIX",
       },
       {
         id: VersionConstants.DDR_2013,
-        name: "(2013)",
+        label: "(2013)",
       },
       {
         id: VersionConstants.DDR_2014,
-        name: "(2014)",
+        label: "(2014)",
       },
       {
         id: VersionConstants.DDR_ACE,
-        name: "A",
+        label: "Ace",
       },
       {
         id: VersionConstants.DDR_A20,
-        name: "A20",
+        label: "A20",
       },
       {
         id: VersionConstants.DDR_A20_PLUS,
-        name: "A20 PLUS",
+        label: "A20 PLUS",
       },
       {
         id: VersionConstants.DDR_A3,
-        name: "A3",
+        label: "A3",
       },
     ],
   },
@@ -460,43 +461,43 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.DDR_1ST_MIX,
-        name: "1ST MIX",
+        label: "1ST MIX",
       },
       {
         id: VersionConstants.DDR_2ND_MIX,
-        name: "2ND MIX",
+        label: "2ND MIX",
       },
       {
         id: VersionConstants.DDR_3RD_MIX,
-        name: "3RD MIX",
+        label: "3RD MIX",
       },
       {
         id: VersionConstants.DDR_4TH_MIX,
-        name: "4TH MIX",
+        label: "4TH MIX",
       },
       {
         id: VersionConstants.DDR_5TH_MIX,
-        name: "5TH MIX",
+        label: "5TH MIX",
       },
       {
         id: VersionConstants.DDR_MAX,
-        name: "MAX",
+        label: "MAX",
       },
       {
         id: VersionConstants.DDR_MAX2,
-        name: "MAX 2",
+        label: "MAX 2",
       },
       {
         id: VersionConstants.DDR_EXTREME,
-        name: "EXTREME",
+        label: "EXTREME",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA,
-        name: "SuperNOVA",
+        label: "SuperNOVA",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA_2,
-        name: "SuperNOVA 2",
+        label: "SuperNOVA 2",
       },
     ],
   },
@@ -508,75 +509,75 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.DDR_1ST_MIX,
-        name: "1ST MIX",
+        label: "1ST MIX",
       },
       {
         id: VersionConstants.DDR_2ND_MIX,
-        name: "2ND MIX",
+        label: "2ND MIX",
       },
       {
         id: VersionConstants.DDR_3RD_MIX,
-        name: "3RD MIX",
+        label: "3RD MIX",
       },
       {
         id: VersionConstants.DDR_4TH_MIX,
-        name: "4TH MIX",
+        label: "4TH MIX",
       },
       {
         id: VersionConstants.DDR_5TH_MIX,
-        name: "5TH MIX",
+        label: "5TH MIX",
       },
       {
         id: VersionConstants.DDR_MAX,
-        name: "MAX",
+        label: "MAX",
       },
       {
         id: VersionConstants.DDR_MAX2,
-        name: "MAX 2",
+        label: "MAX 2",
       },
       {
         id: VersionConstants.DDR_EXTREME,
-        name: "EXTREME",
+        label: "EXTREME",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA,
-        name: "SuperNOVA",
+        label: "SuperNOVA",
       },
       {
         id: VersionConstants.DDR_SUPERNOVA_2,
-        name: "SuperNOVA 2",
+        label: "SuperNOVA 2",
       },
       {
         id: VersionConstants.DDR_X,
-        name: "X",
+        label: "X",
       },
       {
         id: VersionConstants.DDR_X2,
-        name: "X2",
+        label: "X2",
       },
       {
         id: VersionConstants.DDR_X3_VS_2ND_MIX,
-        name: "X3 vs. 2ND MIX",
+        label: "X3 vs. 2ND MIX",
       },
       {
         id: VersionConstants.DDR_2013,
-        name: "(2013)",
+        label: "(2013)",
       },
       {
         id: VersionConstants.DDR_2014,
-        name: "(2014)",
+        label: "(2014)",
       },
       {
         id: VersionConstants.DDR_ACE,
-        name: "A",
+        label: "A",
       },
       {
         id: VersionConstants.DDR_A20,
-        name: "A20",
+        label: "A20",
       },
       {
         id: VersionConstants.DDR_A20_PLUS,
-        name: "OmniMIX (A20 PLUS)",
+        label: "OmniMIX (A20 PLUS)",
       },
     ],
   },
@@ -588,75 +589,75 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.DRUMMANIA_1ST,
-        name: "1ST MIX",
+        label: "1ST MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_2ND,
-        name: "2ND MIX",
+        label: "2ND MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_3RD,
-        name: "3RD MIX",
+        label: "3RD MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_4TH,
-        name: "4TH MIX",
+        label: "4TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_5TH,
-        name: "5TH MIX",
+        label: "5TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_6TH,
-        name: "6TH MIX",
+        label: "6TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_7TH,
-        name: "7TH MIX",
+        label: "7TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_8TH,
-        name: "8TH MIX",
+        label: "8TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_9TH,
-        name: "9TH MIX",
+        label: "9TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_10TH,
-        name: "10TH MIX",
+        label: "10TH MIX",
       },
       {
         id: VersionConstants.DRUMMANIA_V,
-        name: "V",
+        label: "V",
       },
       {
         id: VersionConstants.DRUMMANIA_V2,
-        name: "V2",
+        label: "V2",
       },
       {
         id: VersionConstants.DRUMMANIA_V3,
-        name: "V3",
+        label: "V3",
       },
       {
         id: VersionConstants.DRUMMANIA_V4,
-        name: "V4",
+        label: "V4",
       },
       {
         id: VersionConstants.DRUMMANIA_V5,
-        name: "V5",
+        label: "V5",
       },
       {
         id: VersionConstants.DRUMMANIA_V6,
-        name: "V6",
+        label: "V6",
       },
       {
         id: VersionConstants.DRUMMANIA_V7,
-        name: "V7",
+        label: "V7",
       },
       {
         id: VersionConstants.DRUMMANIA_V8,
-        name: "V8",
+        label: "V8",
       },
     ],
   },
@@ -669,11 +670,11 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.EEMALL,
-        name: "1st Avenue",
+        label: "1st Avenue",
       },
       {
         id: VersionConstants.EEMALL_2ND,
-        name: "2nd Avenue",
+        label: "2nd Avenue",
       },
     ],
   },
@@ -685,11 +686,11 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.FUTURETOMTOM,
-        name: "Ver 1",
+        label: "Ver 1",
       },
       {
         id: VersionConstants.FUTURETOMTOM_VER2,
-        name: "Ver 2",
+        label: "Ver 2",
       },
     ],
   },
@@ -715,207 +716,208 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.GUITARFREAKS_1ST,
-        name: "1ST MIX",
+        label: "1ST MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_2ND,
-        name: "2ND MIX",
+        label: "2ND MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_3RD,
-        name: "3RD MIX",
+        label: "3RD MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_4TH,
-        name: "4TH MIX",
+        label: "4TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_5TH,
-        name: "5TH MIX",
+        label: "5TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_6TH,
-        name: "6TH MIX",
+        label: "6TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_7TH,
-        name: "7TH MIX",
+        label: "7TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_8TH,
-        name: "8TH MIX",
+        label: "8TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_9TH,
-        name: "9TH MIX",
+        label: "9TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_10TH,
-        name: "10TH MIX",
+        label: "10TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_11TH,
-        name: "11TH MIX",
+        label: "11TH MIX",
       },
       {
         id: VersionConstants.GUITARFREAKS_V,
-        name: "V",
+        label: "V",
       },
       {
         id: VersionConstants.GUITARFREAKS_V2,
-        name: "V2",
+        label: "V2",
       },
       {
         id: VersionConstants.GUITARFREAKS_V3,
-        name: "V3",
+        label: "V3",
       },
       {
         id: VersionConstants.GUITARFREAKS_V4,
-        name: "V4",
+        label: "V4",
       },
       {
         id: VersionConstants.GUITARFREAKS_V5,
-        name: "V5",
+        label: "V5",
       },
       {
         id: VersionConstants.GUITARFREAKS_V6,
-        name: "V6",
+        label: "V6",
       },
       {
         id: VersionConstants.GUITARFREAKS_V7,
-        name: "V7",
+        label: "V7",
       },
       {
         id: VersionConstants.GUITARFREAKS_V8,
-        name: "V8",
+        label: "V8",
       },
     ],
   },
   {
     id: GameConstants.IIDX,
     name: "beatmaniaIIDX",
+    shortName: "IIDX",
     icon: "/assets/icon/iidx.png",
     cardBG: "/assets/card/iidx.png",
     versions: [
       {
         id: VersionConstants.IIDX,
-        name: "1st Style",
+        label: "1st Style",
       },
       {
         id: VersionConstants.IIDX_2ND_STYLE,
-        name: "2nd Style",
+        label: "2nd Style",
       },
       {
         id: VersionConstants.IIDX_3RD_STYLE,
-        name: "3rd Style",
+        label: "3rd Style",
       },
       {
         id: VersionConstants.IIDX_4TH_STYLE,
-        name: "4th Style",
+        label: "4th Style",
       },
       {
         id: VersionConstants.IIDX_5TH_STYLE,
-        name: "5th Style",
+        label: "5th Style",
       },
       {
         id: VersionConstants.IIDX_6TH_STYLE,
-        name: "6th Style",
+        label: "6th Style",
       },
       {
         id: VersionConstants.IIDX_7TH_STYLE,
-        name: "7th Style",
+        label: "7th Style",
       },
       {
         id: VersionConstants.IIDX_8TH_STYLE,
-        name: "8th Style",
+        label: "8th Style",
       },
       {
         id: VersionConstants.IIDX_9TH_STYLE,
-        name: "9th Style",
+        label: "9th Style",
       },
       {
         id: VersionConstants.IIDX_10TH_STYLE,
-        name: "10th Style",
+        label: "10th Style",
       },
       {
         id: VersionConstants.IIDX_RED,
-        name: "RED",
+        label: "RED",
       },
       {
         id: VersionConstants.IIDX_HAPPY_SKY,
-        name: "HAPPY SKY",
+        label: "HAPPY SKY",
       },
       {
         id: VersionConstants.IIDX_DISTORTED,
-        name: "DistorteD",
+        label: "DistorteD",
       },
       {
         id: VersionConstants.IIDX_GOLD,
-        name: "GOLD",
+        label: "GOLD",
       },
       {
         id: VersionConstants.IIDX_DJ_TROOPERS,
-        name: "DJ TROOPERS",
+        label: "DJ TROOPERS",
       },
       {
         id: VersionConstants.IIDX_EMPRESS,
-        name: "EMPRESS",
+        label: "EMPRESS",
       },
       {
         id: VersionConstants.IIDX_SIRIUS,
-        name: "SIRIUS",
+        label: "SIRIUS",
       },
       {
         id: VersionConstants.IIDX_RESORT_ANTHEM,
-        name: "Resort Anthem",
+        label: "Resort Anthem",
       },
       {
         id: VersionConstants.IIDX_LINCLE,
-        name: "Lincle",
+        label: "Lincle",
       },
       {
         id: VersionConstants.IIDX_TRICORO,
-        name: "tricoro",
+        label: "tricoro",
       },
       {
         id: VersionConstants.IIDX_SPADA,
-        name: "SPADA",
+        label: "SPADA",
       },
       {
         id: VersionConstants.IIDX_PENDUAL,
-        name: "PENDUAL",
+        label: "PENDUAL",
       },
       {
         id: VersionConstants.IIDX_COPULA,
-        name: "COPULA",
+        label: "COPULA",
       },
       {
         id: VersionConstants.IIDX_SINOBUZ,
-        name: "SINOBUZ",
+        label: "SINOBUZ",
       },
       {
         id: VersionConstants.IIDX_CANNON_BALLERS,
-        name: "CANNON BALLERS",
+        label: "CANNON BALLERS",
       },
       {
         id: VersionConstants.IIDX_ROOTAGE,
-        name: "ROOTAGE",
+        label: "ROOTAGE",
       },
       {
         id: VersionConstants.IIDX_HEROIC_VERSE,
-        name: "HEROIC VERSE",
+        label: "HEROIC VERSE",
       },
       {
         id: VersionConstants.IIDX_BISTROVER,
-        name: "BISTROVER",
+        label: "BISTROVER",
       },
       {
         id: VersionConstants.IIDX_CASTHOUR,
-        name: "CastHour",
+        label: "CastHour",
       },
       {
         id: VersionConstants.IIDX_RESIDENT,
-        name: "RESIDENT",
+        label: "RESIDENT",
       },
     ],
   },
@@ -927,79 +929,79 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.IIDX,
-        name: "1st Style",
+        label: "1st Style",
       },
       {
         id: VersionConstants.IIDX_2ND_STYLE,
-        name: "2nd Style",
+        label: "2nd Style",
       },
       {
         id: VersionConstants.IIDX_3RD_STYLE,
-        name: "3rd Style",
+        label: "3rd Style",
       },
       {
         id: VersionConstants.IIDX_4TH_STYLE,
-        name: "4th Style",
+        label: "4th Style",
       },
       {
         id: VersionConstants.IIDX_5TH_STYLE,
-        name: "5th Style",
+        label: "5th Style",
       },
       {
         id: VersionConstants.IIDX_6TH_STYLE,
-        name: "6th Style",
+        label: "6th Style",
       },
       {
         id: VersionConstants.IIDX_7TH_STYLE,
-        name: "7th Style",
+        label: "7th Style",
       },
       {
         id: VersionConstants.IIDX_8TH_STYLE,
-        name: "8th Style",
+        label: "8th Style",
       },
       {
         id: VersionConstants.IIDX_9TH_STYLE,
-        name: "9th Style",
+        label: "9th Style",
       },
       {
         id: VersionConstants.IIDX_10TH_STYLE,
-        name: "10th Style",
+        label: "10th Style",
       },
       {
         id: VersionConstants.IIDX_RED,
-        name: "RED",
+        label: "RED",
       },
       {
         id: VersionConstants.IIDX_HAPPY_SKY,
-        name: "HAPPY SKY",
+        label: "HAPPY SKY",
       },
       {
         id: VersionConstants.IIDX_DISTORTED,
-        name: "DistorteD",
+        label: "DistorteD",
       },
       {
         id: VersionConstants.IIDX_GOLD,
-        name: "GOLD",
+        label: "GOLD",
       },
       {
         id: VersionConstants.IIDX_DJ_TROOPERS,
-        name: "DJ TROOPERS",
+        label: "DJ TROOPERS",
       },
       {
         id: VersionConstants.IIDX_EMPRESS,
-        name: "EMPRESS",
+        label: "EMPRESS",
       },
       {
         id: VersionConstants.IIDX_SIRIUS,
-        name: "SIRIUS",
+        label: "SIRIUS",
       },
       {
         id: VersionConstants.IIDX_RESORT_ANTHEM,
-        name: "Resort Anthem",
+        label: "Resort Anthem",
       },
       {
         id: VersionConstants.IIDX_LINCLE,
-        name: "Lincle",
+        label: "Lincle",
       },
     ],
   },
@@ -1011,59 +1013,59 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.JUBEAT,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.JUBEAT_RIPPLES,
-        name: "Ripples",
+        label: "Ripples",
       },
       {
         id: VersionConstants.JUBEAT_RIPPLES_APPEND,
-        name: "Ripples (Append)",
+        label: "Ripples (Append)",
       },
       {
         id: VersionConstants.JUBEAT_KNIT,
-        name: "Knit",
+        label: "Knit",
       },
       {
         id: VersionConstants.JUBEAT_KNIT_APPEND,
-        name: "Knit (Append)",
+        label: "Knit (Append)",
       },
       {
         id: VersionConstants.JUBEAT_COPIOUS,
-        name: "Copious",
+        label: "Copious",
       },
       {
         id: VersionConstants.JUBEAT_COPIOUS_APPEND,
-        name: "Copious (Append)",
+        label: "Copious (Append)",
       },
       {
         id: VersionConstants.JUBEAT_SAUCER,
-        name: "Saucer",
+        label: "Saucer",
       },
       {
         id: VersionConstants.JUBEAT_SAUCER_FULFILL,
-        name: "Saucer Fulfill",
+        label: "Saucer Fulfill",
       },
       {
         id: VersionConstants.JUBEAT_PROP,
-        name: "Prop",
+        label: "Prop",
       },
       {
         id: VersionConstants.JUBEAT_QUBELL,
-        name: "Qubell",
+        label: "Qubell",
       },
       {
         id: VersionConstants.JUBEAT_CLAN,
-        name: "Clan",
+        label: "Clan",
       },
       {
         id: VersionConstants.JUBEAT_FESTO,
-        name: "Festo",
+        label: "Festo",
       },
       {
         id: VersionConstants.JUBEAT_AVE,
-        name: "Avenue",
+        label: "Avenue",
       },
     ],
   },
@@ -1076,11 +1078,11 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.LOVEPLUS_ARCADE,
-        name: "Medal",
+        label: "Medal",
       },
       {
         id: VersionConstants.LOVEPLUS_CC,
-        name: "Colorful Clip",
+        label: "Colorful Clip",
       },
     ],
   },
@@ -1099,11 +1101,11 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.MUSECA,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.MUSECA_1_PLUS,
-        name: "1 + 1/2",
+        label: "1 + 1/2",
       },
     ],
   },
@@ -1115,19 +1117,19 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.NOSTALGIA,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.NOSTALGIA_FORTE,
-        name: "Forte",
+        label: "Forte",
       },
       {
         id: VersionConstants.NOSTALGIA_OP_2,
-        name: "OP.2",
+        label: "OP.2",
       },
       {
         id: VersionConstants.NOSTALGIA_OP_3,
-        name: "OP.3",
+        label: "OP.3",
       },
     ],
   },
@@ -1155,112 +1157,113 @@ export const gameData = [
   {
     id: GameConstants.POPN_MUSIC,
     name: "pop'n music",
+    shortName: "pop'n",
     icon: "/assets/icon/popn.png",
     cardBG: "/assets/card/popn.png",
     versions: [
       {
         id: VersionConstants.POPN_MUSIC,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.POPN_MUSIC_2,
-        name: "2",
+        label: "2",
       },
       {
         id: VersionConstants.POPN_MUSIC_3,
-        name: "3",
+        label: "3",
       },
       {
         id: VersionConstants.POPN_MUSIC_4,
-        name: "4",
+        label: "4",
       },
       {
         id: VersionConstants.POPN_MUSIC_5,
-        name: "5",
+        label: "5",
       },
       {
         id: VersionConstants.POPN_MUSIC_6,
-        name: "6",
+        label: "6",
       },
       {
         id: VersionConstants.POPN_MUSIC_7,
-        name: "7",
+        label: "7",
       },
       {
         id: VersionConstants.POPN_MUSIC_8,
-        name: "8",
+        label: "8",
       },
       {
         id: VersionConstants.POPN_MUSIC_9,
-        name: "9",
+        label: "9",
       },
       {
         id: VersionConstants.POPN_MUSIC_10,
-        name: "10",
+        label: "10",
       },
       {
         id: VersionConstants.POPN_MUSIC_11,
-        name: "11",
+        label: "11",
       },
       {
         id: VersionConstants.POPN_MUSIC_IROHA,
-        name: "いろは (Iroha)",
+        label: "いろは (Iroha)",
       },
       {
         id: VersionConstants.POPN_MUSIC_CARNIVAL,
-        name: "カーニバル (Carnival)",
+        label: "カーニバル (Carnival)",
       },
       {
         id: VersionConstants.POPN_MUSIC_FEVER,
-        name: "FEVER!",
+        label: "FEVER!",
       },
       {
         id: VersionConstants.POPN_MUSIC_ADVENTURE,
-        name: "ADVENTURE",
+        label: "ADVENTURE",
       },
       {
         id: VersionConstants.POPN_MUSIC_PARTY,
-        name: "PARTY♪",
+        label: "PARTY♪",
       },
       {
         id: VersionConstants.POPN_MUSIC_THE_MOVIE,
-        name: "THE MOVIE",
+        label: "THE MOVIE",
       },
       {
         id: VersionConstants.POPN_MUSIC_SENGOKU_RETSUDEN,
-        name: "せんごく列伝 (Sengoku Retsuden)",
+        label: "せんごく列伝 (Sengoku Retsuden)",
       },
       {
         id: VersionConstants.POPN_MUSIC_TUNE_STREET,
-        name: "TUNE STREET",
+        label: "TUNE STREET",
       },
       {
         id: VersionConstants.POPN_MUSIC_FANTASIA,
-        name: "fantasia",
+        label: "fantasia",
       },
       {
         id: VersionConstants.POPN_MUSIC_SUNNY_PARK,
-        name: "Sunny Park",
+        label: "Sunny Park",
       },
       {
         id: VersionConstants.POPN_MUSIC_LAPISTORIA,
-        name: "ラピストリア (Lapistoria)",
+        label: "ラピストリア (Lapistoria)",
       },
       {
         id: VersionConstants.POPN_MUSIC_ECLALE,
-        name: "éclale",
+        label: "éclale",
       },
       {
         id: VersionConstants.POPN_MUSIC_USANEKO,
-        name: "うさぎと猫と少年の夢 (Usaneko)",
+        label: "うさぎと猫と少年の夢 (Usaneko)",
       },
       {
         id: VersionConstants.POPN_MUSIC_PEACE,
-        name: "peace",
+        label: "peace",
       },
       {
         id: VersionConstants.POPN_MUSIC_KAIMEI_RIDDLES,
-        name: "解明リドルズ (Kaimei riddles)",
+        label: "解明リドルズ (Kaimei riddles)",
       },
     ],
   },
@@ -1279,27 +1282,27 @@ export const gameData = [
     versions: [
       {
         id: VersionConstants.REFLEC_BEAT,
-        name: "Original",
+        label: "Original",
       },
       {
         id: VersionConstants.REFLEC_BEAT_LIMELIGHT,
-        name: "Limelight",
+        label: "Limelight",
       },
       {
         id: VersionConstants.REFLEC_BEAT_COLETTE,
-        name: "Colette",
+        label: "Colette",
       },
       {
         id: VersionConstants.REFLEC_BEAT_GROOVIN,
-        name: "groovin'!!",
+        label: "groovin'!!",
       },
       {
         id: VersionConstants.REFLEC_BEAT_VOLZZA,
-        name: "VOLZZA",
+        label: "VOLZZA",
       },
       {
         id: VersionConstants.REFLEC_BEAT_VOLZZA_2,
-        name: "VOLZZA 2",
+        label: "VOLZZA 2",
       },
     ],
   },
@@ -1313,32 +1316,33 @@ export const gameData = [
   {
     id: GameConstants.SDVX,
     name: "SOUND VOLTEX",
+    shortName: "SDVX",
     icon: null,
     cardBG: null,
     versions: [
       {
         id: VersionConstants.SDVX_BOOTH,
-        name: "BOOTH",
+        label: "BOOTH",
       },
       {
         id: VersionConstants.SDVX_INFINITE_INFECTION,
-        name: "-II- Infinite Infection",
+        label: "-II- Infinite Infection",
       },
       {
         id: VersionConstants.SDVX_GRAVITY_WARS,
-        name: "GRAVITY WARS",
+        label: "GRAVITY WARS",
       },
       {
         id: VersionConstants.SDVX_HEAVENLY_HAVEN,
-        name: "HEAVENLY HAVEN",
+        label: "HEAVENLY HAVEN",
       },
       {
         id: VersionConstants.SDVX_VIVID_WAVE,
-        name: "VIVID WAVE",
+        label: "VIVID WAVE",
       },
       {
         id: VersionConstants.SDVX_EXCEED_GEAR,
-        name: "EXCEED GEAR",
+        label: "EXCEED GEAR",
       },
     ],
   },
diff --git a/src/layouts/LayoutAuthenticated.vue b/src/layouts/LayoutAuthenticated.vue
index 3dd8983..dc3e030 100644
--- a/src/layouts/LayoutAuthenticated.vue
+++ b/src/layouts/LayoutAuthenticated.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { mdiForwardburger, mdiBackburger, mdiMenu } from "@mdi/js";
 import { ref } from "vue";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import menuAside from "@/menuAside.js";
 import menuNavBar from "@/menuNavBar.js";
 import { useMainStore } from "@/stores/main.js";
@@ -24,6 +24,7 @@ const layoutAsidePadding = "xl:pl-60";
 const styleStore = useStyleStore();
 
 const router = useRouter();
+const route = useRoute();
 
 const isAsideMobileExpanded = ref(false);
 const isAsideLgActive = ref(false);
@@ -42,6 +43,7 @@ const menuClick = (event, item) => {
 
 <template>
   <div
+    :key="route.fullPath"
     :class="{
       dark: styleStore.darkMode,
       'overflow-hidden lg:overflow-visible': isAsideMobileExpanded,
@@ -49,7 +51,7 @@ const menuClick = (event, item) => {
   >
     <div
       :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
-      class="pt-14 min-h-screen w-screen transition-position lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
+      class="pt-14 min-h-screen w-screen lg:w-auto bg-gray-50 dark:bg-slate-800 dark:text-slate-100"
     >
       <NavBar
         :menu="menuNavBar"
@@ -83,8 +85,53 @@ const menuClick = (event, item) => {
         @menu-click="menuClick"
         @aside-lg-close-click="isAsideLgActive = false"
       />
-      <slot />
-      <FooterBar />
+      <div class="animated animatedFadeInUp fadeInUp">
+        <slot />
+        <FooterBar />
+      </div>
     </div>
   </div>
 </template>
+
+<style>
+/* Animation */
+
+@keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeInUp {
+  from {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+.animated {
+  animation-duration: 0.7s;
+  animation-fill-mode: both;
+  -webkit-animation-duration: 0.7s;
+  -webkit-animation-fill-mode: both;
+}
+
+.animatedFadeInUp {
+  opacity: 0;
+}
+
+.fadeInUp {
+  opacity: 0;
+  animation-name: fadeInUp;
+  -webkit-animation-name: fadeInUp;
+}
+</style>
diff --git a/src/menuAside.js b/src/menuAside.js
index 1bacdc3..16d551c 100644
--- a/src/menuAside.js
+++ b/src/menuAside.js
@@ -12,13 +12,13 @@ var sortedMenu = [];
 for (const game of gameData) {
   if (!game.skip) {
     sortedMenu.push({
-      label: game.name,
+      label: game.shortName ? game.shortName : game.name,
       menu: [
-        { label: "Overview", to: `/${game.id}` },
-        { label: "Network Records", to: `/${game.id}/records/all` },
-        { label: "Network Scores", to: `/${game.id}/scores/all` },
-        { label: "Personal Records", to: `/${game.id}/records/personal` },
-        { label: "Personal Scores", to: `/${game.id}/scores/personal` },
+        { label: "Overview", to: `/games/${game.id}` },
+        { label: "Network Records", to: `/games/${game.id}/records/all` },
+        { label: "Network Scores", to: `/games/${game.id}/scores/all` },
+        { label: "Personal Records", to: `/games/${game.id}/records/personal` },
+        { label: "Personal Scores", to: `/games/${game.id}/scores/personal` },
       ],
     });
   }
diff --git a/src/router/index.js b/src/router/index.js
index 9342c1d..340f6cf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -142,6 +142,28 @@ const routes = [
       hotReload: true, // disables Hot Reload
     },
   },
+  {
+    meta: {
+      title: "Game Overview",
+    },
+    path: "/games/:id/",
+    name: "game_page",
+    component: () => import("@/views/Game/GameView.vue"),
+    options: {
+      hotReload: true, // disables Hot Reload
+    },
+  },
+  {
+    meta: {
+      title: "View Profile",
+    },
+    path: "/games/:game/profiles/:userID/",
+    name: "game_profile",
+    component: () => import("@/views/Game/PlayerView.vue"),
+    options: {
+      hotReload: true, // disables Hot Reload
+    },
+  },
   {
     meta: {
       title: "Error",
diff --git a/src/views/Arcade/EventView.vue b/src/views/Arcade/EventView.vue
index 37c069d..f66494e 100644
--- a/src/views/Arcade/EventView.vue
+++ b/src/views/Arcade/EventView.vue
@@ -11,7 +11,7 @@ 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, getGameTitle, getGameInfo } from "@/constants";
+import { arcadeList, gameData, getGameInfo } from "@/constants";
 
 const $route = useRoute();
 const arcadeID = parseInt($route.params.id);
@@ -48,15 +48,15 @@ const eventSettings = [
         options: [
           {
             id: 0,
-            name: "No Event",
+            label: "No Event",
           },
           {
             id: 1,
-            name: "Chrono Seeker",
+            label: "Chrono Seeker",
           },
           {
             id: 2,
-            name: "QPronicle Chord",
+            label: "QPronicle Chord",
           },
         ],
         value: 1,
@@ -84,33 +84,6 @@ const filterForm = reactive({
   version: null,
 });
 
-function listGames() {
-  var games = [];
-  for (const object of eventSettings) {
-    const gameName = getGameInfo(object.game).name;
-    if (games[gameName] == undefined) {
-      games.push(gameName);
-    }
-  }
-
-  return games;
-}
-
-function listVersions() {
-  var versions = [];
-  for (const object of eventSettings) {
-    if (object.game == getGameInfo(filterForm.game).id) {
-      const gameObject = getGameInfo(object.game);
-      const version = object.version;
-      if (versions[version] == undefined) {
-        versions.push(gameObject.versions.find((x) => x.id == version).name);
-      }
-    }
-  }
-
-  return versions;
-}
-
 function getGameSettings() {
   const gameObject = getGameInfo(filterForm.game);
   const version = gameObject.versions.find((x) => x.name == filterForm.version);
@@ -151,7 +124,7 @@ watch(
                 <FormControl
                   v-model="filterForm.game"
                   name="game"
-                  :options="listGames()"
+                  :options="gameData"
                 />
               </div>
               <div v-if="filterForm.game">
diff --git a/src/views/Auth/LoginView.vue b/src/views/Auth/LoginView.vue
index 1ab5d79..8cc572a 100644
--- a/src/views/Auth/LoginView.vue
+++ b/src/views/Auth/LoginView.vue
@@ -39,10 +39,10 @@ const submit = () => {
             <p class="text-sm text-gray-700 dark:text-white/75">
               Spinnin' since 2021
             </p>
-            <hr class="border-t border-1 my-1 w-full" />
+            <hr class="border-r-1 my-1 w-full" />
             <p class="text-lg relative bottom-0">Please log in.</p>
           </div>
-          <div class="md:border-r md:border-1"></div>
+          <div class="md:border-r" />
           <div>
             <FormField label="Username">
               <FormControl
@@ -74,7 +74,7 @@ const submit = () => {
               <BaseButton label="Log In" color="success" @click="submit()" />
             </div>
 
-            <hr class="border-t border-1 my-4 w-full" />
+            <hr class="border-t my-4 w-full" />
 
             <div class="flex flex-col gap-2 my-4">
               <h2>Not Registered?</h2>
diff --git a/src/views/Game/GameView.vue b/src/views/Game/GameView.vue
new file mode 100644
index 0000000..447ce61
--- /dev/null
+++ b/src/views/Game/GameView.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { mdiAccountMultiple } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import GameTitleLine from "@/components/GameTitleLine.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import CardBox from "@/components/CardBox.vue";
+import FormControl from "@/components/FormControl.vue";
+import ProfileCard from "@/components/Cards/ProfileCard.vue";
+import TablePlayers from "@/components/Tables/TablePlayers.vue";
+import { getGameInfo } from "@/constants";
+
+const $route = useRoute();
+const $router = useRouter();
+var gameID = null;
+var thisGame = null;
+
+const versionForm = reactive({
+  currentVersion: null,
+});
+
+gameID = $route.params.id;
+thisGame = getGameInfo(gameID);
+
+if (!thisGame) {
+  $router.push({
+    name: "ErrorPage",
+    params: {
+      catchAll: "404",
+    },
+  });
+}
+
+function getSources() {
+  var sources = null;
+  if (!versionForm.currentVersion) {
+    sources = thisGame.cardBG;
+  } else {
+    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.png`;
+  }
+  return sources;
+}
+
+function getCardStyle() {
+  return `
+      background-image: url('${getSources()}');
+      background-size: cover;
+      background-repeat: no-repeat;
+    `;
+}
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <div :style="getCardStyle()" class="rounded-2xl mb-6">
+        <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"
+            >
+              <GameTitleLine :path="thisGame.icon" :title="thisGame.name" />
+              <div 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"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="w-full">
+            <ProfileCard
+              avatar="https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/"
+            />
+          </div>
+        </div>
+      </div>
+
+      <SectionTitleLine :icon="mdiAccountMultiple" title="All Players" main />
+      <CardBox has-table>
+        <div
+          class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
+        >
+          <div class="w-full">
+            <TablePlayers />
+          </div>
+        </div>
+      </CardBox>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/src/views/Game/PlayerView.vue b/src/views/Game/PlayerView.vue
new file mode 100644
index 0000000..15c1892
--- /dev/null
+++ b/src/views/Game/PlayerView.vue
@@ -0,0 +1,208 @@
+<script setup>
+import { reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { mdiAccountTieHat, mdiBackburger } from "@mdi/js";
+import SectionMain from "@/components/SectionMain.vue";
+import CardBox from "@/components/CardBox.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import ProfileCard from "@/components/Cards/ProfileCard.vue";
+import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
+import SectionTitleLine from "@/components/SectionTitleLine.vue";
+import GameTitleLine from "@/components/GameTitleLine.vue";
+import FormField from "@/components/FormField.vue";
+import FormCheckRadio from "@/components/FormCheckRadio.vue";
+import FormControl from "@/components/FormControl.vue";
+import { getGameInfo } from "@/constants";
+
+const $route = useRoute();
+const $router = useRouter();
+var gameID = null;
+var thisGame = null;
+
+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 userSettings = reactive({
+  username: "TRMAZI",
+  fastSlow: true,
+  comboPosition: false,
+  weight: 100,
+  dancer: 0,
+  arrow: 1,
+  guideLines: 0,
+  filter: 3,
+});
+
+gameID = $route.params.game;
+thisGame = getGameInfo(gameID);
+
+if (!thisGame) {
+  $router.push({
+    name: "ErrorPage",
+    params: {
+      catchAll: "404",
+    },
+  });
+}
+
+function getSources() {
+  var sources = null;
+  if (!versionForm.currentVersion) {
+    sources = thisGame.cardBG;
+  } else {
+    sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.png`;
+  }
+  return sources;
+}
+
+function getCardStyle() {
+  return `
+      background-image: url('${getSources()}');
+      background-size: cover;
+      background-repeat: no-repeat;
+    `;
+}
+</script>
+
+<template>
+  <LayoutAuthenticated>
+    <SectionMain>
+      <div :style="getCardStyle()" class="rounded-2xl mb-6">
+        <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"
+            >
+              <GameTitleLine :path="thisGame.icon" :title="thisGame.name" />
+              <div 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"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="w-full">
+            <ProfileCard
+              v-if="versionForm.currentVersion"
+              use-small
+              avatar="https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/"
+            />
+          </div>
+          <BaseButton
+            :icon="mdiBackburger"
+            :href="'/#/games/' + gameID"
+            class="mt-2"
+            color="info"
+            label="Go Back"
+          />
+        </div>
+      </div>
+      <SectionTitleLine
+        v-if="versionForm.currentVersion"
+        :icon="mdiAccountTieHat"
+        title="Profile Customizations"
+        main
+      />
+
+      <div v-if="versionForm.currentVersion">
+        <CardBox>
+          <div>
+            <FormField
+              v-for="setting of settings"
+              :key="setting.id"
+              :label="setting.name"
+              :help="setting.help"
+            >
+              <FormControl
+                v-if="setting.type == String"
+                :v-model="userSettings[setting.id]"
+                :model-value="userSettings[setting.id]"
+              />
+
+              <FormControl
+                v-if="setting.type == Number"
+                :v-model="userSettings[setting.id]"
+                :model-value="userSettings[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]"
+              />
+
+              <FormCheckRadio
+                v-if="setting.type == Boolean"
+                :v-model="userSettings[setting.id]"
+                :model-value="userSettings[setting.id]"
+                type="switch"
+              />
+            </FormField>
+          </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>
+      </div>
+    </SectionMain>
+  </LayoutAuthenticated>
+</template>
diff --git a/src/views/Profile/CustomizeView.vue b/src/views/Profile/CustomizeView.vue
index 8e39cc8..bd62543 100644
--- a/src/views/Profile/CustomizeView.vue
+++ b/src/views/Profile/CustomizeView.vue
@@ -12,7 +12,7 @@ import FormControl from "@/components/FormControl.vue";
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <UserCard class="mb-6" use-small />
+      <UserCard class="mb-6" use-small even-smaller />
       <SectionTitleLine
         :icon="mdiAccountTieHat"
         title="Profile Customizations"
@@ -21,7 +21,7 @@ import FormControl from "@/components/FormControl.vue";
 
       <div>
         <CardBox>
-          <div class="grid grid-cols-3 gap-6">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div>
               <h2 class="text-lg mb-2">Avatar Source</h2>
               <FormControl
diff --git a/src/views/Profile/GoalsView.vue b/src/views/Profile/GoalsView.vue
index 5feec77..259f080 100644
--- a/src/views/Profile/GoalsView.vue
+++ b/src/views/Profile/GoalsView.vue
@@ -194,8 +194,8 @@ const setGoals = [
             </p>
           </div>
 
-          <template v-if="createGoal()" #footer>
-            <div class="space-x-2">
+          <template #footer>
+            <div v-if="formData.deadline !== '...'" class="space-x-2">
               <BaseButton
                 type="submit"
                 color="success"
diff --git a/src/views/Profile/IntegrationView.vue b/src/views/Profile/IntegrationView.vue
index 16f03d1..c97b968 100644
--- a/src/views/Profile/IntegrationView.vue
+++ b/src/views/Profile/IntegrationView.vue
@@ -17,7 +17,7 @@ import PillTag from "@/components/PillTag.vue";
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <UserCard class="mb-6" use-small />
+      <UserCard class="mb-6" use-small even-smaller />
       <SectionTitleLine
         :icon="mdiServerNetwork"
         title="Server Integrations"
diff --git a/src/views/Profile/ProfileView.vue b/src/views/Profile/ProfileView.vue
index cbbc7ee..66d0209 100644
--- a/src/views/Profile/ProfileView.vue
+++ b/src/views/Profile/ProfileView.vue
@@ -45,7 +45,7 @@ const submitPass = () => {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <UserCard class="mb-6" use-small />
+      <UserCard class="mb-6" use-small even-smaller />
       <SectionTitleLine :icon="mdiAccount" title="Profile Settings" main />
 
       <CardBox is-form class="mb-6" @submit.prevent="">
