From c7fab132abfe5647bb0e0d75d143a0858e94420b Mon Sep 17 00:00:00 2001
From: Aden Lindsay <140392385+AdenMGB@users.noreply.github.com>
Date: Wed, 4 Jun 2025 13:26:23 +0930
Subject: [PATCH] Many new improvments and features to the UI (#76)

* feat(general): many new improvments and features to the UI

* fix: fix lints and run preetier

* fix: furthermore fixes

* chore: fix preetier eslint issue

* stlye: reposition mark all as read button for better placement

* fix: fix inccorect positioning on the mark all as read buton, again

* fix: fix account related issue with predefined types and styling

* fix: fix notification button dissapearance & type definition

* fix: fix auth page styling

* stlye: fixed styling on users list

* fix: fix lint dead code collector

* fix: please the prettier gods

* fix(notifications): seriously serialising

* chore: please the prettier gods once again, o holy one

* fix: remove eslint thing, im blaming eslint for that one

---------

Co-authored-by: Aden <aden@adenmgb.com>
---
 pages/account/devices.vue                 | 175 ++++++-----
 pages/account/index.vue                   |  95 +++++-
 pages/account/notifications.vue           | 142 ++++++++-
 pages/admin/library/[id]/index.vue        |  20 +-
 pages/admin/library/index.vue             |  12 +-
 pages/admin/metadata/games/[id]/index.vue |  29 +-
 pages/admin/metadata/index.vue            |  11 +
 pages/admin/users/auth/index.vue          |  39 ++-
 pages/admin/users/auth/simple/index.vue   |   2 +-
 pages/admin/users/index.vue               | 167 +++++-----
 pages/auth/register.vue                   | 361 +++++++++++-----------
 11 files changed, 682 insertions(+), 371 deletions(-)

diff --git a/pages/account/devices.vue b/pages/account/devices.vue
index db50f7e1..f4f0ce16 100644
--- a/pages/account/devices.vue
+++ b/pages/account/devices.vue
@@ -1,90 +1,105 @@
 <template>
   <div>
-    <div class="sm:flex sm:items-center">
-      <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold text-zinc-100">Devices</h1>
-        <p class="mt-2 text-sm text-zinc-400">
-          All the devices authorized to access your Drop account.
-        </p>
-      </div>
+    <div class="mx-auto max-w-2xl lg:mx-0">
+      <h2
+        class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+      >
+        Devices
+      </h2>
+      <p
+        class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+      >
+        Manage the devices authorized to access your Drop account.
+      </p>
     </div>
-    <div class="mt-8 flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <table class="min-w-full divide-y divide-zinc-800">
-            <thead>
-              <tr>
-                <th
-                  scope="col"
-                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
-                >
-                  Name
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Platform
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Can Access
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Last Connected
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">Edit</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="client in clients"
-                :key="client.id"
-                class="even:bg-zinc-800"
+
+    <div
+      class="mt-8 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm"
+    >
+      <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-zinc-800">
+          <thead>
+            <tr class="bg-zinc-800/50">
+              <th
+                scope="col"
+                class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
               >
-                <td
-                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
+                Name
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                Platform
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                Capabilities
+              </th>
+              <th
+                scope="col"
+                class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+              >
+                Last Connected
+              </th>
+              <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                <span class="sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-zinc-800">
+            <tr
+              v-for="client in clients"
+              :key="client.id"
+              class="transition-colors duration-150 hover:bg-zinc-800/50"
+            >
+              <td
+                class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+              >
+                {{ client.name }}
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <span
+                  class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20"
                 >
-                  {{ client.name }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
                   {{ client.platform }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  <ul class="flex flex-col gap-y-2">
-                    <li
-                      v-for="capability in client.capabilities"
-                      :key="capability"
-                      class="inline-flex items-center gap-x-0.5"
-                    >
-                      <CheckIcon class="size-4" /> {{ capability }}
-                    </li>
-                  </ul>
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ DateTime.fromISO(client.lastConnected).toRelative() }}
-                </td>
-                <td
-                  class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
-                >
-                  <button
-                    class="text-red-600 hover:text-red-900"
-                    @click="() => revokeClientWrapper(client.id)"
+                </span>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                <div class="flex flex-wrap gap-2">
+                  <span
+                    v-for="capability in client.capabilities"
+                    :key="capability"
+                    class="inline-flex items-center gap-x-1 rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20"
                   >
-                    Revoke<span class="sr-only">, {{ client.name }}</span>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                    <CheckIcon class="size-3" />
+                    {{ capability }}
+                  </span>
+                </div>
+              </td>
+              <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                {{ DateTime.fromISO(client.lastConnected).toRelative() }}
+              </td>
+              <td
+                class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+              >
+                <button
+                  class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                  @click="() => revokeClientWrapper(client.id)"
+                >
+                  Revoke<span class="sr-only">, {{ client.name }}</span>
+                </button>
+              </td>
+            </tr>
+            <tr v-if="clients.length === 0">
+              <td colspan="5" class="py-8 text-center text-sm text-zinc-400">
+                No devices connected to your account.
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
diff --git a/pages/account/index.vue b/pages/account/index.vue
index 0ada1d8a..2358092d 100644
--- a/pages/account/index.vue
+++ b/pages/account/index.vue
@@ -1 +1,94 @@
-<template><div></div></template>
+<template>
+  <div>
+    <div v-if="user" class="mx-auto max-w-2xl lg:mx-0">
+      <h2
+        class="mt-2 text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+      >
+        Hello, {{ user.displayName }}!
+      </h2>
+      <p
+        class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+      >
+        Welcome to your Drop account. Here you can view and manage your account
+        information.
+      </p>
+    </div>
+
+    <div v-if="user" class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
+      <!-- Account Information Card -->
+      <div
+        class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
+      >
+        <div class="p-6">
+          <h3 class="text-base font-semibold text-zinc-100">
+            Account Information
+          </h3>
+          <dl class="mt-4 space-y-4">
+            <div class="flex justify-between">
+              <dt class="text-sm font-medium text-zinc-400">Username</dt>
+              <dd class="text-sm text-zinc-100">{{ user.username }}</dd>
+            </div>
+            <div class="flex justify-between">
+              <dt class="text-sm font-medium text-zinc-400">Email</dt>
+              <dd class="text-sm text-zinc-100">{{ user.email }}</dd>
+            </div>
+            <div class="flex justify-between">
+              <dt class="text-sm font-medium text-zinc-400">Account Type</dt>
+              <dd>
+                <span
+                  :class="[
+                    'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
+                    user.admin
+                      ? 'bg-blue-400/10 text-blue-400 ring-blue-400/20'
+                      : 'bg-zinc-400/10 text-zinc-400 ring-zinc-400/20',
+                  ]"
+                >
+                  {{ user.admin ? "Administrator" : "Standard User" }}
+                </span>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <!-- Account Actions Card -->
+      <div
+        class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
+      >
+        <div class="p-6">
+          <h3 class="text-base font-semibold text-zinc-100">Account Actions</h3>
+          <div class="mt-4 space-y-3">
+            <button
+              type="button"
+              class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+            >
+              Change Password
+            </button>
+            <button
+              type="button"
+              class="w-full inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+            >
+              Update Email
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex items-center justify-center min-h-[200px]">
+      <div class="text-zinc-400">Loading account information...</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "default",
+});
+
+useHead({
+  title: "Account",
+});
+
+// Fetch user data
+const user = await $dropFetch("/api/v1/user");
+</script>
diff --git a/pages/account/notifications.vue b/pages/account/notifications.vue
index 7b8b46cb..52f2a3e8 100644
--- a/pages/account/notifications.vue
+++ b/pages/account/notifications.vue
@@ -1,3 +1,143 @@
 <template>
-  <div></div>
+  <div>
+    <div class="border-b border-zinc-800 pb-4 w-full">
+      <div class="flex items-center justify-between w-full">
+        <h2
+          class="text-xl font-semibold tracking-tight text-zinc-100 sm:text-3xl"
+        >
+          Notifications
+        </h2>
+        <button
+          :disabled="notifications.length === 0"
+          class="inline-flex items-center justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-[1.02] hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800 disabled:hover:scale-100 disabled:hover:shadow-none"
+          @click="markAllAsRead"
+        >
+          <CheckIcon class="size-4" />
+          Mark all as read
+        </button>
+      </div>
+      <p
+        class="mt-2 text-pretty text-sm font-medium text-zinc-400 sm:text-md/8"
+      >
+        View and manage your notifications.
+      </p>
+    </div>
+
+    <div class="mt-4 space-y-4">
+      <div
+        v-for="notification in notifications"
+        :key="notification.id"
+        class="group relative overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50"
+        :class="{ 'opacity-75': notification.read }"
+      >
+        <div class="p-6">
+          <div class="flex items-start justify-between">
+            <div class="flex-1">
+              <h3 class="text-base font-semibold text-zinc-100">
+                {{ notification.title }}
+              </h3>
+              <p class="mt-1 text-sm text-zinc-400">
+                {{ notification.description }}
+              </p>
+              <div class="mt-4 flex flex-wrap gap-2">
+                <a
+                  v-for="action in notification.actions"
+                  :key="action"
+                  :href="action.split('|')[1]"
+                  class="inline-flex items-center rounded-md bg-blue-400/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-400/20 transition-all duration-200 hover:bg-blue-400/20 hover:scale-105 active:scale-95"
+                >
+                  {{ action.split("|")[0] }}
+                </a>
+              </div>
+            </div>
+            <div class="ml-4 flex flex-shrink-0 items-center gap-x-2">
+              <span class="text-xs text-zinc-500">
+                {{ DateTime.fromISO(notification.created).toRelative() }}
+              </span>
+              <button
+                v-if="!notification.read"
+                type="button"
+                class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20 transition-all duration-200 hover:bg-zinc-400/20 hover:scale-105 active:scale-95"
+                @click="markAsRead(notification.id)"
+              >
+                <CheckIcon class="size-3" />
+                Mark as read
+              </button>
+              <button
+                type="button"
+                class="inline-flex items-center rounded-md bg-red-400/10 px-2 py-1 text-xs font-medium text-red-400 ring-1 ring-inset ring-red-400/20 transition-all duration-200 hover:bg-red-400/20 hover:scale-105 active:scale-95"
+                @click="deleteNotification(notification.id)"
+              >
+                <TrashIcon class="size-3" />
+                Delete
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="notifications.length === 0"
+        class="rounded-xl border border-zinc-800 bg-zinc-900 p-8 text-center"
+      >
+        <p class="text-sm text-zinc-400">No notifications</p>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { CheckIcon, TrashIcon } from "@heroicons/vue/24/outline";
+import { DateTime } from "luxon";
+import type { Notification } from "~/prisma/client";
+import type { SerializeObject } from "nitropack";
+
+definePageMeta({
+  layout: "default",
+});
+
+useHead({
+  title: "Notifications",
+});
+
+// Fetch notifications
+const notifications = ref<SerializeObject<Notification>[]>([]);
+
+async function fetchNotifications() {
+  const { data } = await useFetch("/api/v1/notifications");
+  notifications.value = data.value || [];
+}
+
+// Initial fetch
+await fetchNotifications();
+
+// Mark a notification as read
+async function markAsRead(id: string) {
+  await $dropFetch(`/api/v1/notifications/${id}/read`, { method: "POST" });
+  const notification = notifications.value.find(
+    (n: SerializeObject<Notification>) => n.id === id,
+  );
+  if (notification) {
+    notification.read = true;
+  }
+}
+
+// Mark all notifications as read
+async function markAllAsRead() {
+  await $dropFetch("/api/v1/notifications/readall", { method: "POST" });
+  notifications.value.forEach((notification: SerializeObject<Notification>) => {
+    notification.read = true;
+  });
+}
+
+// Delete a notification
+async function deleteNotification(id: string) {
+  await $dropFetch(`/api/v1/notifications/${id}`, { method: "DELETE" });
+  const index = notifications.value.findIndex(
+    (n: SerializeObject<Notification>) => n.id === id,
+  );
+  if (index !== -1) {
+    notifications.value.splice(index, 1);
+  }
+}
+</script>
diff --git a/pages/admin/library/[id]/index.vue b/pages/admin/library/[id]/index.vue
index 83cb8100..4168e0d1 100644
--- a/pages/admin/library/[id]/index.vue
+++ b/pages/admin/library/[id]/index.vue
@@ -5,9 +5,18 @@
       v-if="game && unimportedVersions !== undefined"
       class="grow flex flex-col gap-y-8"
     >
-      <div
-        class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col"
-      ></div>
+      <div class="grow w-full h-full lg:pr-[30vw] px-6 py-4 flex flex-col">
+        <div
+          v-if="game.versions.length === 0"
+          class="flex flex-col items-center justify-center h-full text-zinc-400"
+        >
+          <InformationCircleIcon class="w-12 h-12 mb-2 text-zinc-400" />
+          <div class="font-semibold text-lg">No versions yet</div>
+          <div class="text-sm mt-1">
+            Import your first version to get started!
+          </div>
+        </div>
+      </div>
       <div
         class="lg:overflow-y-auto lg:border-l lg:border-zinc-800 lg:fixed lg:inset-y-0 lg:z-50 lg:w-[30vw] flex flex-col lg:right-0 gap-y-8 px-6 py-4"
       >
@@ -17,7 +26,7 @@
           <NuxtLink
             :href="`/admin/metadata/games/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
           >
             Open in Metadata
             <ArrowTopRightOnSquareIcon
@@ -29,7 +38,7 @@
           <NuxtLink
             :href="`/store/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
           >
             Open in Store
             <ArrowTopRightOnSquareIcon
@@ -135,6 +144,7 @@ import {
   ArrowTopRightOnSquareIcon,
   Bars3Icon,
   TrashIcon,
+  InformationCircleIcon,
 } from "@heroicons/vue/24/solid";
 
 definePageMeta({
diff --git a/pages/admin/library/index.vue b/pages/admin/library/index.vue
index c1a030eb..6118a0ff 100644
--- a/pages/admin/library/index.vue
+++ b/pages/admin/library/index.vue
@@ -12,7 +12,7 @@
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
         <NuxtLink
           to="/admin/library/sources"
-          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
         >
           Sources &rarr;
         </NuxtLink>
@@ -63,11 +63,11 @@
       <li
         v-for="game in filteredLibraryGames"
         :key="game.id"
-        class="col-span-1 flex flex-col justify-center divide-y divide-zinc-700 rounded-lg bg-zinc-950/20 text-left shadow"
+        class="col-span-1 flex flex-col justify-center divide-y divide-zinc-800 rounded-xl bg-zinc-950/30 text-left shadow-md border border-zinc-800 transition-all duration-200 hover:scale-102 hover:shadow-xl hover:bg-zinc-950/70 group"
       >
         <div class="flex flex-1 flex-row p-4 gap-x-4">
           <img
-            class="h-16 w-16 flex-shrink-0 rounded-md"
+            class="h-20 w-20 flex-shrink-0 rounded-xl shadow group-hover:shadow-lg transition-all duration-200 bg-zinc-900 object-cover border border-zinc-800"
             :src="useObject(game.mIconObjectId)"
             alt=""
           />
@@ -89,18 +89,18 @@
             <div class="mt-4 flex flex-col gap-y-1">
               <NuxtLink
                 :href="`/admin/library/${game.id}`"
-                class="w-fit rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="w-fit rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
               >
                 Open with Library &rarr;
               </NuxtLink>
               <NuxtLink
                 :href="`/admin/metadata/games/${game.id}`"
-                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700u focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="w-fit rounded-md bg-zinc-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
               >
                 Open with Metadata &rarr;
               </NuxtLink>
               <button
-                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                class="w-fit rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-red-500 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                 @click="() => deleteGame(game.id)"
               >
                 Delete
diff --git a/pages/admin/metadata/games/[id]/index.vue b/pages/admin/metadata/games/[id]/index.vue
index 415fe7e8..b9872a6c 100644
--- a/pages/admin/metadata/games/[id]/index.vue
+++ b/pages/admin/metadata/games/[id]/index.vue
@@ -77,7 +77,7 @@
                 >
                   <button
                     type="button"
-                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                    class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                     @click="() => removeImageFromCarousel(element)"
                   >
                     Remove image
@@ -182,7 +182,7 @@
           <NuxtLink
             :href="`/admin/library/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           >
             Open in Library
             <ArrowTopRightOnSquareIcon
@@ -194,7 +194,7 @@
           <NuxtLink
             :href="`/store/${game.id}`"
             type="button"
-            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            class="inline-flex w-fit items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
           >
             Open in Store
             <ArrowTopRightOnSquareIcon
@@ -245,7 +245,7 @@
                 <button
                   v-if="image !== game.mBannerObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateBannerImage(image)"
                 >
                   Set as banner
@@ -253,14 +253,14 @@
                 <button
                   v-if="image !== game.mCoverObjectId"
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                   @click="() => updateCoverImage(image)"
                 >
                   Set as cover
                 </button>
                 <button
                   type="button"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-red-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
                   @click="() => deleteImage(image)"
                 >
                   Delete image
@@ -298,7 +298,9 @@
     />
     <ModalTemplate v-model="showAddCarouselModal">
       <template #default>
-        <div class="grid grid-cols-2 grid-flow-dense gap-4">
+        <div
+          class="grid grid-cols-2 grid-flow-dense gap-4 max-h-[70vh] overflow-y-auto p-4"
+        >
           <div
             v-for="(image, imageIdx) in validAddCarouselImages"
             :key="imageIdx"
@@ -310,7 +312,7 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => addImageToCarousel(image)"
               >
                 Add
@@ -329,10 +331,10 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
-          Cancel
+          Close
         </button>
       </template>
     </ModalTemplate>
@@ -350,7 +352,7 @@
             >
               <button
                 type="button"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 transition-all duration-200 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                 @click="() => insertImageAtCursor(image)"
               >
                 Insert
@@ -369,7 +371,7 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showAddCarouselModal = false"
         >
           Cancel
@@ -447,7 +449,7 @@
         <button
           ref="cancelButtonRef"
           type="button"
-          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
+          class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95 sm:mt-0 sm:w-auto"
           @click="showEditCoreMetadata = false"
         >
           Cancel
@@ -713,7 +715,6 @@ async function uploadAfterImageUpload(result: Game) {
 }
 
 function addImageToCarousel(id: string) {
-  showAddCarouselModal.value = false;
   game.value.mImageCarouselObjectIds.push(id);
   updateImageCarousel();
 }
diff --git a/pages/admin/metadata/index.vue b/pages/admin/metadata/index.vue
index c4b351d1..1465bda9 100644
--- a/pages/admin/metadata/index.vue
+++ b/pages/admin/metadata/index.vue
@@ -20,6 +20,9 @@
         to="/admin/metadata/games"
         class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
       >
+        <RectangleStackIcon
+          class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
+        />
         <span
           class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
           >Games</span
@@ -29,6 +32,9 @@
         to="/admin/metadata/companies"
         class="transition group aspect-[3/2] flex flex-col justify-center items-center rounded-lg bg-zinc-950 hover:bg-zinc-950/50 shadow"
       >
+        <BuildingOffice2Icon
+          class="mb-2 h-12 w-12 text-zinc-500 group-hover:text-blue-500 transition-all duration-200"
+        />
         <span
           class="transition-all text-4xl font-bold text-zinc-400 group-hover:text-zinc-100 uppercase tracking-widest"
           >Companies</span
@@ -39,6 +45,11 @@
 </template>
 
 <script setup lang="ts">
+import {
+  RectangleStackIcon,
+  BuildingOffice2Icon,
+} from "@heroicons/vue/24/solid";
+
 definePageMeta({
   layout: "admin",
 });
diff --git a/pages/admin/users/auth/index.vue b/pages/admin/users/auth/index.vue
index 888a872f..72ad2a9b 100644
--- a/pages/admin/users/auth/index.vue
+++ b/pages/admin/users/auth/index.vue
@@ -21,20 +21,24 @@
       <li
         v-for="authMech in authenticationMechanisms"
         :key="authMech.name"
-        class="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
+        class="group overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-sm transition-all duration-200 hover:shadow-lg hover:shadow-zinc-900/50 hover:scale-[1.02] hover:border-zinc-700"
       >
         <div class="flex items-center gap-x-4 border-b border-zinc-800 p-6">
-          <component
-            :is="authMech.icon"
-            :alt="`${authMech.name} icon`"
-            class="h-8 w-8 flex-none rounded-lg text-zinc-100 object-cover"
-          />
+          <div
+            class="flex h-10 w-10 flex-none items-center justify-center rounded-lg bg-zinc-800/50 ring-1 ring-zinc-700/50 transition-all duration-200 group-hover:bg-zinc-800 group-hover:ring-zinc-600/50"
+          >
+            <component
+              :is="authMech.icon"
+              :alt="`${authMech.name} icon`"
+              class="h-6 w-6 text-zinc-100 transition-all duration-200 group-hover:scale-110"
+            />
+          </div>
           <div class="text-sm/6 font-medium text-zinc-100">
             {{ authMech.name }}
           </div>
           <Menu v-if="authMech.route" as="div" class="relative ml-auto">
             <MenuButton
-              class="-m-2.5 block p-2.5 text-gray-400 hover:text-gray-500"
+              class="-m-2.5 block p-2.5 text-zinc-400 hover:text-zinc-300 transition-colors duration-200"
             >
               <span class="sr-only">Open options</span>
               <EllipsisHorizontalIcon class="h-5 w-5" aria-hidden="true" />
@@ -55,7 +59,7 @@
                     :href="authMech.route"
                     :class="[
                       active ? 'bg-zinc-800 outline-none' : '',
-                      'block px-3 py-1 text-sm/6 text-zinc-100',
+                      'block px-3 py-1 text-sm/6 text-zinc-100 transition-colors duration-200',
                     ]"
                     >Configure<span class="sr-only"
                       >, {{ authMech.name }}</span
@@ -70,11 +74,18 @@
           <div class="flex justify-between gap-x-4 py-3">
             <dt class="text-zinc-400">Enabled</dt>
             <dd class="flex items-center">
-              <CheckIcon
-                v-if="authMech.enabled"
-                class="w-4 h-4 text-green-600"
-              />
-              <XMarkIcon v-else class="w-4 h-4 text-red-600" />
+              <span
+                :class="[
+                  'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
+                  authMech.enabled
+                    ? 'bg-green-400/10 text-green-400 ring-green-400/20'
+                    : 'bg-red-400/10 text-red-400 ring-red-400/20',
+                ]"
+              >
+                <CheckIcon v-if="authMech.enabled" class="w-4 h-4 mr-1" />
+                <XMarkIcon v-else class="w-4 h-4 mr-1" />
+                {{ authMech.enabled ? "Enabled" : "Disabled" }}
+              </span>
             </dd>
           </div>
           <div v-if="authMech.settings">
@@ -84,7 +95,7 @@
               class="flex flex-nowrap justify-between gap-x-4 py-2"
             >
               <dt class="text-zinc-400">{{ key }}</dt>
-              <dd class="text-gray-500 truncate">
+              <dd class="text-zinc-300 truncate">
                 {{ value }}
               </dd>
             </div>
diff --git a/pages/admin/users/auth/simple/index.vue b/pages/admin/users/auth/simple/index.vue
index f453e210..0d5b46b8 100644
--- a/pages/admin/users/auth/simple/index.vue
+++ b/pages/admin/users/auth/simple/index.vue
@@ -27,7 +27,7 @@
           <div class="ml-4 mt-2 shrink-0">
             <button
               type="button"
-              class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+              class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/25 active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
               @click="() => (createModalOpen = true)"
             >
               Create invitation
diff --git a/pages/admin/users/index.vue b/pages/admin/users/index.vue
index dbef2516..a2deb48f 100644
--- a/pages/admin/users/index.vue
+++ b/pages/admin/users/index.vue
@@ -11,7 +11,7 @@
       <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
         <NuxtLink
           to="/admin/users/auth"
-          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
         >
           Authentication &rarr;
         </NuxtLink>
@@ -20,77 +20,102 @@
     <div class="mt-8 flow-root">
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <table class="min-w-full divide-y divide-zinc-700">
-            <thead>
-              <tr>
-                <th
-                  scope="col"
-                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-3"
-                >
-                  Display Name
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Username
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Email
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Admin?
-                </th>
-                <th
-                  scope="col"
-                  class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
-                >
-                  Auth Options
-                </th>
-                <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-3">
-                  <span class="sr-only">Edit</span>
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="user in users" :key="user.id" class="even:bg-zinc-800">
-                <td
-                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
-                >
-                  {{ user.displayName }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ user.username }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ user.email }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ user.admin ? "Admin User" : "Normal user" }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{ user.authMecs.map((e) => e.mec).join(", ") }}
-                </td>
-                <td
-                  class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-3"
-                >
-                  <!--
-                  <NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
-                    >Edit<span class="sr-only"
-                      >, {{ user.displayName }}</span
-                    ></NuxtLink
+          <div
+            class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow"
+          >
+            <table class="min-w-full divide-y divide-zinc-700">
+              <thead>
+                <tr class="bg-zinc-800/50">
+                  <th
+                    scope="col"
+                    class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-zinc-100 sm:pl-6"
                   >
-                  -->
-                </td>
-              </tr>
-            </tbody>
-          </table>
+                    Display Name
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                  >
+                    Username
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                  >
+                    Email
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                  >
+                    Admin?
+                  </th>
+                  <th
+                    scope="col"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-zinc-100"
+                  >
+                    Auth Options
+                  </th>
+                  <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                    <span class="sr-only">Edit</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-zinc-700">
+                <tr
+                  v-for="user in users"
+                  :key="user.id"
+                  class="hover:bg-zinc-800/50 transition-colors duration-150"
+                >
+                  <td
+                    class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-6"
+                  >
+                    {{ user.displayName }}
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                    {{ user.username }}
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                    {{ user.email }}
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm">
+                    <span
+                      :class="[
+                        'inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset',
+                        user.admin
+                          ? 'bg-blue-400/10 text-blue-400 ring-blue-400/20'
+                          : 'bg-zinc-400/10 text-zinc-400 ring-zinc-400/20',
+                      ]"
+                    >
+                      {{ user.admin ? "Admin User" : "Normal user" }}
+                    </span>
+                  </td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
+                    <div class="flex flex-wrap gap-1">
+                      <span
+                        v-for="mec in user.authMecs"
+                        :key="mec.mec"
+                        class="inline-flex items-center rounded-md bg-zinc-400/10 px-2 py-1 text-xs font-medium text-zinc-400 ring-1 ring-inset ring-zinc-400/20"
+                      >
+                        {{ mec.mec }}
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
+                  >
+                    <!--
+                    <NuxtLink to="#" class="text-blue-600 hover:text-blue-500"
+                      >Edit<span class="sr-only"
+                        >, {{ user.displayName }}</span
+                      ></NuxtLink
+                    >
+                    -->
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/pages/auth/register.vue b/pages/auth/register.vue
index 14fd641e..a5fc2aa3 100644
--- a/pages/auth/register.vue
+++ b/pages/auth/register.vue
@@ -1,187 +1,192 @@
 <template>
-  <div
-    class="flex min-h-screen bg-zinc-950 flex-1 flex-col justify-center py-12 sm:px-6 lg:px-8"
-  >
-    <div class="sm:mx-auto sm:w-full sm:max-w-md">
-      <DropLogo class="mx-auto h-10 w-auto" />
-      <h2
-        class="mt-6 text-center text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
-      >
-        Create your Drop account
-      </h2>
-    </div>
+  <div class="flex min-h-screen flex-1 bg-zinc-900">
+    <div
+      class="flex flex-1 flex-col justify-center px-4 py-8 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
+    >
+      <div class="mx-auto w-full max-w-sm lg:w-96">
+        <div>
+          <DropLogo class="h-8 w-auto" />
+          <h2
+            class="mt-4 text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
+          >
+            Create your Drop account
+          </h2>
+          <p class="mt-1 text-sm leading-6 text-zinc-400">
+            Fill in your details below to create your account.
+          </p>
+        </div>
 
-    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
-      <div class="bg-zinc-900 px-6 py-12 shadow sm:rounded-lg sm:px-12">
-        <form class="space-y-6" @submit.prevent="() => register_wrapper()">
-          <div>
-            <label
-              for="display-name"
-              class="block text-sm font-medium leading-6 text-zinc-100"
-              >Display Name</label
-            >
-            <div class="mt-2">
-              <input
-                id="display-name"
-                v-model="displayName"
-                name="display-name"
-                type="text"
-                autocomplete="display-name"
-                required
-                placeholder="AwesomeDropGamer771"
-                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label
-              for="email"
-              class="block text-sm font-medium leading-6 text-zinc-100"
-              >Email address</label
-            >
-            <p
-              :class="[
-                validEmail ? 'text-blue-400' : 'text-red-500',
-                'block text-xs font-medium leading-6',
-              ]"
-            >
-              Must be in the format user@example.com
-            </p>
-            <div class="mt-2">
-              <input
-                id="email"
-                v-model="email"
-                name="email"
-                type="email"
-                autocomplete="email"
-                required
-                :disabled="!!invitation?.email"
-                placeholder="me@example.com"
-                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-
-          <div class="w-full h-px bg-zinc-700" />
-
-          <div>
-            <label
-              for="username"
-              class="block text-sm font-medium leading-6 text-zinc-100"
-              >Username</label
-            >
-            <p
-              :class="[
-                validUsername ? 'text-blue-400' : 'text-red-500',
-                'block text-xs font-medium leading-6',
-              ]"
-            >
-              Must be 5 or more characters, and lowercase
-            </p>
-            <div class="mt-2">
-              <input
-                id="username"
-                v-model="username"
-                name="username"
-                type="text"
-                autocomplete="username"
-                required
-                :disabled="!!invitation?.username"
-                placeholder="myUsername"
-                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-
-          <div class="w-full h-px bg-zinc-700" />
-
-          <div>
-            <label
-              for="password"
-              class="block text-sm font-medium leading-6 text-zinc-100"
-              >Password</label
-            >
-            <p
-              :class="[
-                validPassword ? 'text-blue-400' : 'text-red-500',
-                'block text-xs font-medium leading-6',
-              ]"
-            >
-              Must be 14 or more characters
-            </p>
-            <div class="mt-2">
-              <input
-                id="password"
-                v-model="password"
-                name="password"
-                type="password"
-                autocomplete="password"
-                required
-                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label
-              for="confirm-password"
-              class="block text-sm font-medium leading-6 text-zinc-100"
-              >Confirm Password</label
-            >
-            <p
-              :class="[
-                validConfirmPassword ? 'text-blue-400' : 'text-red-500',
-                'block text-xs font-medium leading-6',
-              ]"
-            >
-              Must be the same as above
-            </p>
-            <div class="mt-2">
-              <input
-                id="confirm-password"
-                v-model="confirmPassword"
-                name="confirm-password"
-                type="password"
-                autocomplete="confirm-password"
-                required
-                class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-              />
-            </div>
-          </div>
-
-          <div>
-            <LoadingButton type="submit" :loading="loading" class="w-full">
-              Create
-            </LoadingButton>
-          </div>
-
-          <div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
-            <div class="flex">
-              <div class="flex-shrink-0">
-                <XCircleIcon class="h-5 w-5 text-red-600" aria-hidden="true" />
+        <div class="mt-6">
+          <div class="bg-zinc-900">
+            <form class="space-y-4" @submit.prevent="() => register_wrapper()">
+              <div>
+                <label
+                  for="display-name"
+                  class="block text-sm font-medium leading-6 text-zinc-100"
+                  >Display Name</label
+                >
+                <div class="mt-1">
+                  <input
+                    id="display-name"
+                    v-model="displayName"
+                    name="display-name"
+                    type="text"
+                    autocomplete="display-name"
+                    required
+                    placeholder="AwesomeDropGamer771"
+                    class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
               </div>
-              <div class="ml-3">
-                <h3 class="text-sm font-medium text-red-600">
-                  {{ error }}
-                </h3>
+
+              <div>
+                <label
+                  for="email"
+                  class="block text-sm font-medium leading-6 text-zinc-100"
+                  >Email address</label
+                >
+                <p
+                  :class="[
+                    validEmail ? 'text-blue-400' : 'text-red-500',
+                    'block text-xs font-medium leading-6',
+                  ]"
+                >
+                  Must be in the format user@example.com
+                </p>
+                <div class="mt-1">
+                  <input
+                    id="email"
+                    v-model="email"
+                    name="email"
+                    type="email"
+                    autocomplete="email"
+                    required
+                    :disabled="!!invitation?.email"
+                    placeholder="me@example.com"
+                    class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
               </div>
-            </div>
+
+              <div class="w-full h-px bg-zinc-700" />
+
+              <div>
+                <label
+                  for="username"
+                  class="block text-sm font-medium leading-6 text-zinc-100"
+                  >Username</label
+                >
+                <p
+                  :class="[
+                    validUsername ? 'text-blue-400' : 'text-red-500',
+                    'block text-xs font-medium leading-6',
+                  ]"
+                >
+                  Must be 5 or more characters, and lowercase
+                </p>
+                <div class="mt-1">
+                  <input
+                    id="username"
+                    v-model="username"
+                    name="username"
+                    type="text"
+                    autocomplete="username"
+                    required
+                    :disabled="!!invitation?.username"
+                    placeholder="myUsername"
+                    class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
+              </div>
+
+              <div class="w-full h-px bg-zinc-700" />
+
+              <div>
+                <label
+                  for="password"
+                  class="block text-sm font-medium leading-6 text-zinc-100"
+                  >Password</label
+                >
+                <p
+                  :class="[
+                    validPassword ? 'text-blue-400' : 'text-red-500',
+                    'block text-xs font-medium leading-6',
+                  ]"
+                >
+                  Must be 14 or more characters
+                </p>
+                <div class="mt-1">
+                  <input
+                    id="password"
+                    v-model="password"
+                    name="password"
+                    type="password"
+                    autocomplete="password"
+                    required
+                    class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label
+                  for="confirm-password"
+                  class="block text-sm font-medium leading-6 text-zinc-100"
+                  >Confirm Password</label
+                >
+                <p
+                  :class="[
+                    validConfirmPassword ? 'text-blue-400' : 'text-red-500',
+                    'block text-xs font-medium leading-6',
+                  ]"
+                >
+                  Must be the same as above
+                </p>
+                <div class="mt-1">
+                  <input
+                    id="confirm-password"
+                    v-model="confirmPassword"
+                    name="confirm-password"
+                    type="password"
+                    autocomplete="confirm-password"
+                    required
+                    class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-800 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <LoadingButton type="submit" :loading="loading" class="w-full">
+                  Create
+                </LoadingButton>
+              </div>
+
+              <div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-3">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <XCircleIcon
+                      class="h-5 w-5 text-red-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-red-600">
+                      {{ error }}
+                    </h3>
+                  </div>
+                </div>
+              </div>
+            </form>
           </div>
-        </form>
+        </div>
       </div>
-
-      <!-- todo: feature to add custom text here -->
-      <p v-if="false" class="mt-10 text-center text-sm text-zinc-400">
-        What's Drop?
-        {{ " " }}
-        <NuxtLink
-          to="https://github.com/Drop-OSS/drop"
-          target="_blank"
-          class="font-semibold leading-6 text-blue-600 hover:text-blue-500"
-          >Check us out here &rarr;</NuxtLink
-        >
-      </p>
+    </div>
+    <div class="relative hidden w-0 flex-1 lg:block">
+      <img
+        src="/wallpapers/signin.jpg"
+        class="absolute inset-0 h-full w-full object-cover"
+        alt=""
+      />
     </div>
   </div>
 </template>