diff --git a/.trunk/trunk.yaml b/.trunk/trunk.yaml
index b76ad3d43..781cf81b8 100644
--- a/.trunk/trunk.yaml
+++ b/.trunk/trunk.yaml
@@ -18,25 +18,25 @@ runtimes:
 # This is the section where you manage your linters. (https://docs.trunk.io/check/configuration)
 lint:
   enabled:
-    - markdownlint@0.42.0
-    - eslint@9.14.0
+    - markdownlint@0.43.0
+    - eslint@9.16.0
     - actionlint@1.7.4
-    - bandit@1.7.10
+    - bandit@1.8.0
     - black@24.10.0
-    - checkov@3.2.296
+    - checkov@3.2.332
     - git-diff-check
     - isort@5.13.2
     - mypy@1.13.0
     - osv-scanner@1.9.1
-    - oxipng@9.1.2
-    - prettier@3.3.3
-    - ruff@0.7.3
+    - oxipng@9.1.3
+    - prettier@3.4.2
+    - ruff@0.8.2
     - shellcheck@0.10.0
     - shfmt@3.6.0
     - svgo@3.3.2
     - taplo@0.9.3
     - trivy@0.56.2
-    - trufflehog@3.83.6
+    - trufflehog@3.85.0
     - yamllint@1.35.1
   ignore:
     - linters: [ALL]
diff --git a/.zed/settings.json b/.zed/settings.json
deleted file mode 100644
index c808db432..000000000
--- a/.zed/settings.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "languages": {
-    "Python": {
-      "tab_size": 4
-    },
-    "Vue.js": {
-      "tab_size": 2,
-      "formatter": {
-        "external": {
-          "command": "prettier",
-          "arguments": ["--stdin-filepath", "{buffer_path}"]
-        }
-      }
-    }
-  }
-}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
deleted file mode 100644
index 001e2c1ff..000000000
--- a/frontend/src/App.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-import Notification from "@/components/common/Notification.vue";
-import UploadInProgress from "@/components/common/UploadInProgress.vue";
-import api from "@/services/api/index";
-import userApi from "@/services/api/user";
-import storeAuth from "@/stores/auth";
-import storeConfig from "@/stores/config";
-import storeHeartbeat from "@/stores/heartbeat";
-import { onBeforeMount } from "vue";
-import router from "./plugins/router";
-
-// Props
-const heartbeat = storeHeartbeat();
-const auth = storeAuth();
-const configStore = storeConfig();
-
-onBeforeMount(() => {
-  api.get("/heartbeat").then(async ({ data: data }) => {
-    heartbeat.set(data);
-    if (heartbeat.value.SHOW_SETUP_WIZARD) {
-      router.push({ name: "setup" });
-    } else {
-      await userApi
-        .fetchCurrentUser()
-        .then(({ data: user }) => {
-          auth.setUser(user);
-        })
-        .catch((error) => {
-          console.error(error);
-        });
-
-      await api.get("/config").then(({ data: data }) => {
-        configStore.set(data);
-      });
-    }
-  });
-});
-</script>
-
-<template>
-  <v-app>
-    <v-main>
-      <notification />
-      <upload-in-progress />
-      <router-view />
-    </v-main>
-  </v-app>
-</template>
diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
new file mode 100644
index 000000000..325919e05
--- /dev/null
+++ b/frontend/src/RomM.vue
@@ -0,0 +1,7 @@
+<template>
+  <v-app>
+    <v-main class="h-100">
+      <router-view />
+    </v-main>
+  </v-app>
+</template>
diff --git a/frontend/src/components/Details/ActionBar.vue b/frontend/src/components/Details/ActionBar.vue
index a0d166512..c07f7558b 100644
--- a/frontend/src/components/Details/ActionBar.vue
+++ b/frontend/src/components/Details/ActionBar.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
+import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
-import type { DetailedRom } from "@/stores/roms";
 import storeHeartbeat from "@/stores/heartbeat";
+import type { DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import {
   getDownloadLink,
@@ -11,7 +12,7 @@ import {
   isRuffleEmulationSupported,
 } from "@/utils";
 import type { Emitter } from "mitt";
-import { inject, ref, computed } from "vue";
+import { computed, inject, ref } from "vue";
 
 // Props
 const props = defineProps<{ rom: DetailedRom }>();
@@ -54,67 +55,71 @@ async function copyDownloadLink(rom: DetailedRom) {
 </script>
 
 <template>
-  <v-btn-group divided density="compact" rounded="0" class="d-flex flex-row">
-    <v-btn
-      class="flex-grow-1"
-      :disabled="downloadStore.value.includes(rom.id)"
-      @click="
-        romApi.downloadRom({
-          rom,
-          files: downloadStore.filesToDownload,
-        })
-      "
-    >
-      <v-tooltip
-        activator="parent"
-        location="top"
-        transition="fade-transition"
-        open-delay="1000"
-        >Download game</v-tooltip
+  <div>
+    <v-btn-group divided density="compact" rounded="0" class="d-flex flex-row">
+      <v-btn
+        class="flex-grow-1"
+        :disabled="downloadStore.value.includes(rom.id)"
+        @click="
+          romApi.downloadRom({
+            rom,
+            files: downloadStore.filesToDownload,
+          })
+        "
       >
-      <v-icon icon="mdi-download" size="large" />
-    </v-btn>
-    <v-btn class="flex-grow-1" @click="copyDownloadLink(rom)">
-      <v-tooltip
-        activator="parent"
-        location="top"
-        transition="fade-transition"
-        open-delay="1000"
-        >Copy download link</v-tooltip
+        <v-tooltip
+          activator="parent"
+          location="top"
+          transition="fade-transition"
+          open-delay="1000"
+          >Download game</v-tooltip
+        >
+        <v-icon icon="mdi-download" size="large" />
+      </v-btn>
+      <v-btn class="flex-grow-1" @click="copyDownloadLink(rom)">
+        <v-tooltip
+          activator="parent"
+          location="top"
+          transition="fade-transition"
+          open-delay="1000"
+          >Copy download link</v-tooltip
+        >
+        <v-icon icon="mdi-content-copy" />
+      </v-btn>
+      <v-btn
+        v-if="ejsEmulationSupported"
+        class="flex-grow-1"
+        @click="
+          $router.push({
+            name: 'emulatorjs',
+            params: { rom: rom?.id },
+          })
+        "
       >
-      <v-icon icon="mdi-content-copy" />
-    </v-btn>
-    <v-btn
-      v-if="ejsEmulationSupported"
-      class="flex-grow-1"
-      @click="
-        $router.push({
-          name: 'emulatorjs',
-          params: { rom: rom?.id },
-        })
-      "
-    >
-      <v-icon :icon="playInfoIcon" />
-    </v-btn>
-    <v-btn
-      v-if="ruffleEmulationSupported"
-      class="flex-grow-1"
-      @click="
-        $router.push({
-          name: 'ruffle',
-          params: { rom: rom?.id },
-        })
-      "
-    >
-      <v-icon :icon="playInfoIcon" />
-    </v-btn>
-    <v-menu location="bottom">
-      <template #activator="{ props: menuProps }">
-        <v-btn class="flex-grow-1" v-bind="menuProps">
-          <v-icon icon="mdi-dots-vertical" size="large" />
-        </v-btn>
-      </template>
-      <admin-menu :rom="rom" />
-    </v-menu>
-  </v-btn-group>
+        <v-icon :icon="playInfoIcon" />
+      </v-btn>
+      <v-btn
+        v-if="ruffleEmulationSupported"
+        class="flex-grow-1"
+        @click="
+          $router.push({
+            name: 'ruffle',
+            params: { rom: rom?.id },
+          })
+        "
+      >
+        <v-icon :icon="playInfoIcon" />
+      </v-btn>
+      <v-menu location="bottom">
+        <template #activator="{ props: menuProps }">
+          <v-btn class="flex-grow-1" v-bind="menuProps">
+            <v-icon icon="mdi-dots-vertical" size="large" />
+          </v-btn>
+        </template>
+        <admin-menu :rom="rom" />
+      </v-menu>
+    </v-btn-group>
+
+    <copy-rom-download-link-dialog />
+  </div>
 </template>
diff --git a/frontend/src/components/Details/AdditionalContent.vue b/frontend/src/components/Details/AdditionalContent.vue
index 24e6ab483..294e65875 100644
--- a/frontend/src/components/Details/AdditionalContent.vue
+++ b/frontend/src/components/Details/AdditionalContent.vue
@@ -11,27 +11,8 @@ const combined = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col
-      class="pa-0"
-      cols="4"
-      sm="3"
-      lg="6"
-      xxl="4"
-      v-for="expansion in combined"
-    >
-      <a
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.igdb.com/games/${expansion.slug}`"
-        target="_blank"
-      >
-        <related-card :game="expansion" />
-      </a>
+    <v-col cols="4" sm="3" lg="6" class="pa-1" v-for="expansion in combined">
+      <related-card :game="expansion" />
     </v-col>
   </v-row>
 </template>
-<style scoped>
-.chip-type {
-  top: -0.1rem;
-  left: -0.1rem;
-}
-</style>
diff --git a/frontend/src/components/Details/Info/FileInfo.vue b/frontend/src/components/Details/Info/FileInfo.vue
index 18dac9539..e737ec339 100644
--- a/frontend/src/components/Details/Info/FileInfo.vue
+++ b/frontend/src/components/Details/Info/FileInfo.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import VersionSwitcher from "@/components/Details/VersionSwitcher.vue";
-import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeAuth from "@/stores/auth";
-import type { Collection } from "@/stores/collections";
 import storeDownload from "@/stores/download";
 import type { DetailedRom } from "@/stores/roms";
 import { formatBytes } from "@/utils";
@@ -12,14 +10,14 @@ import { ref, watch } from "vue";
 // Props
 const props = defineProps<{ rom: DetailedRom }>();
 const downloadStore = storeDownload();
-const auth = storeAuth();
 const romUser = ref(props.rom.rom_user);
+const romInfo = ref([
+  { label: "SHA-1", value: props.rom.sha1_hash },
+  { label: "MD5", value: props.rom.md5_hash },
+  { label: "CRC", value: props.rom.crc_hash },
+]);
 
 // Functions
-function collectionsWithoutFavourites(collections: Collection[]) {
-  return collections.filter((c) => c.name.toLowerCase() != "favourites");
-}
-
 async function toggleMainSibling() {
   romUser.value.is_main_sibling = !romUser.value.is_main_sibling;
   romApi.updateUserRomProps({
@@ -111,33 +109,26 @@ watch(
           <span>Info</span>
         </v-col>
         <v-col class="my-1">
-          <v-chip size="small" label>
-            Size: {{ formatBytes(rom.file_size_bytes) }}
-          </v-chip>
-          <v-chip
-            v-if="!rom.multi && rom.sha1_hash"
-            size="small"
-            label
-            class="ml-1"
-          >
-            SHA-1: {{ rom.sha1_hash }}
-          </v-chip>
-          <v-chip
-            v-if="!rom.multi && rom.md5_hash"
-            size="small"
-            label
-            class="ml-1"
-          >
-            MD5: {{ rom.md5_hash }}
-          </v-chip>
-          <v-chip
-            v-if="!rom.multi && rom.crc_hash"
-            size="small"
-            label
-            class="ml-1"
-          >
-            CRC: {{ rom.crc_hash }}
-          </v-chip>
+          <v-row no-gutters>
+            <v-col cols="12">
+              <v-chip size="small" class="mr-2 px-0" label>
+                <v-chip label>Size</v-chip
+                ><span class="px-2">{{
+                  formatBytes(rom.file_size_bytes)
+                }}</span>
+              </v-chip>
+            </v-col>
+            <v-col
+              v-for="info in romInfo"
+              v-if="!rom.multi && rom.sha1_hash"
+              cols="12"
+            >
+              <v-chip size="small" class="mt-1 mr-2 px-0" label>
+                <v-chip label>{{ info.label }}</v-chip
+                ><span class="px-2">{{ info.value }}</span>
+              </v-chip>
+            </v-col>
+          </v-row>
         </v-col>
       </v-row>
       <v-row v-if="rom.tags.length > 0" class="align-center my-3" no-gutters>
@@ -158,34 +149,6 @@ watch(
           </v-chip>
         </v-col>
       </v-row>
-      <v-row
-        v-if="
-          rom.user_collections &&
-          collectionsWithoutFavourites(rom.user_collections).length > 0
-        "
-        no-gutters
-        class="align-center my-3"
-      >
-        <v-col cols="3" xl="2">
-          <span>Collections</span>
-        </v-col>
-        <v-col>
-          <v-chip
-            v-for="collection in collectionsWithoutFavourites(
-              rom.user_collections,
-            )"
-            :to="{ name: 'collection', params: { collection: collection.id } }"
-            size="large"
-            class="mr-1 mt-1"
-            label
-          >
-            <template #prepend>
-              <r-avatar :size="25" :collection="collection" />
-            </template>
-            <span class="ml-2">{{ collection.name }}</span>
-          </v-chip>
-        </v-col>
-      </v-row>
     </v-col>
   </v-row>
 </template>
diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index e8fbf7a0e..a7fd6befa 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type FilterType } from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
+import RAvatar from "@/components/common/Collection/RAvatar.vue";
 import type { DetailedRom } from "@/stores/roms";
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
@@ -30,6 +31,35 @@ function onFilterClick(filter: FilterType, value: string) {
   <v-row no-gutters>
     <v-col>
       <v-divider class="mx-2 my-4" />
+      <v-row
+        v-if="rom.user_collections && rom.user_collections.length > 0"
+        no-gutters
+        class="align-center my-3"
+      >
+        <v-col cols="3" xl="2">
+          <span>RomM Collections</span>
+        </v-col>
+        <v-col>
+          <v-row no-gutters>
+            <v-col cols="12" v-for="collection in rom.user_collections">
+              <v-chip
+                :to="{
+                  name: 'collection',
+                  params: { collection: collection.id },
+                }"
+                size="large"
+                class="mr-1 mt-1 px-0"
+                label
+              >
+                <template #prepend>
+                  <r-avatar :size="38" :collection="collection" />
+                </template>
+                <span class="px-4">{{ collection.name }}</span>
+              </v-chip>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
       <template v-for="filter in filters" :key="filter">
         <v-row
           v-if="rom[filter].length > 0"
diff --git a/frontend/src/components/Details/Personal.vue b/frontend/src/components/Details/Personal.vue
index 8624f4768..53ac5644c 100644
--- a/frontend/src/components/Details/Personal.vue
+++ b/frontend/src/components/Details/Personal.vue
@@ -76,7 +76,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Backlogged</span
               ><span class="ml-2">{{
                 getEmojiForStatus("backlogged")
@@ -88,7 +88,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Now playing</span
               ><span class="ml-2">{{
                 getEmojiForStatus("now_playing")
@@ -100,7 +100,7 @@ watch(
             color="romm-accent-1"
             hide-details
           >
-            <template v-slot:label
+            <template #label
               ><span>Hidden</span
               ><span class="ml-2">{{
                 getEmojiForStatus("hidden")
@@ -190,13 +190,13 @@ watch(
               density="compact"
               class="mt-1"
             >
-              <template v-slot:selection="{ item }">
+              <template #selection="{ item }">
                 <span>{{ getEmojiForStatus(item.raw as RomUserStatus) }}</span
                 ><span class="ml-2">{{
                   getTextForStatus(item.raw as RomUserStatus)
                 }}</span>
               </template>
-              <template v-slot:item="{ item }">
+              <template #item="{ item }">
                 <v-list-item
                   link
                   rounded="0"
diff --git a/frontend/src/components/Details/RelatedGames.vue b/frontend/src/components/Details/RelatedGames.vue
index 17541c224..cfe368cc1 100644
--- a/frontend/src/components/Details/RelatedGames.vue
+++ b/frontend/src/components/Details/RelatedGames.vue
@@ -4,7 +4,7 @@ import type { DetailedRom } from "@/stores/roms";
 import { computed } from "vue";
 
 const props = defineProps<{ rom: DetailedRom }>();
-const games = computed(() => [
+const combined = computed(() => [
   ...(props.rom.igdb_metadata?.remakes ?? []),
   ...(props.rom.igdb_metadata?.remasters ?? []),
   ...(props.rom.igdb_metadata?.expanded_games ?? []),
@@ -12,7 +12,7 @@ const games = computed(() => [
 </script>
 <template>
   <v-row no-gutters>
-    <v-col cols="4" sm="3" md="6" v-for="game in games">
+    <v-col cols="4" sm="3" md="6" class="px-1" v-for="game in combined">
       <related-card :game="game" />
     </v-col>
   </v-row>
diff --git a/frontend/src/components/Details/Saves.vue b/frontend/src/components/Details/Saves.vue
index 094c405d7..e5a197b1f 100644
--- a/frontend/src/components/Details/Saves.vue
+++ b/frontend/src/components/Details/Saves.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SaveSchema } from "@/__generated__";
+import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import UploadSavesDialog from "@/components/common/Game/Dialog/Asset/UploadSaves.vue";
 import { type DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -196,6 +197,7 @@ onMounted(() => {
     </template>
   </v-data-table>
   <upload-saves-dialog />
+  <delete-asset-dialog />
 </template>
 <style scoped>
 .name-row {
diff --git a/frontend/src/components/Details/States.vue b/frontend/src/components/Details/States.vue
index b5c3a5a0d..023649a1d 100644
--- a/frontend/src/components/Details/States.vue
+++ b/frontend/src/components/Details/States.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { StateSchema } from "@/__generated__";
+import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
 import UploadStatesDialog from "@/components/common/Game/Dialog/Asset/UploadStates.vue";
 import { type DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
@@ -197,6 +198,7 @@ onMounted(() => {
     </template>
   </v-data-table>
   <upload-states-dialog />
+  <delete-asset-dialog />
 </template>
 <style scoped>
 .name-row {
diff --git a/frontend/src/components/Details/Title.vue b/frontend/src/components/Details/Title.vue
index 22df03ba2..e31b60a69 100644
--- a/frontend/src/components/Details/Title.vue
+++ b/frontend/src/components/Details/Title.vue
@@ -20,50 +20,94 @@ const releaseDate = new Date(
 const hasReleaseDate = Number(props.rom.first_release_date) > 0;
 </script>
 <template>
-  <v-row
-    class="text-white text-shadow"
-    :class="{ 'text-center mt-2': smAndDown }"
-    no-gutters
-  >
-    <v-col>
-      <v-list-item class="text-h5 font-weight-bold pl-0">
-        <span>{{ rom.name }}</span>
-        <fav-btn class="ml-1" :rom="rom" />
-      </v-list-item>
-    </v-col>
-  </v-row>
+  <div>
+    <v-row
+      class="text-white text-shadow"
+      :class="{ 'text-center my-4': smAndDown }"
+      no-gutters
+    >
+      <v-col>
+        <p class="text-h5 font-weight-bold pl-0">
+          <span>{{ rom.name }}</span>
+          <fav-btn class="ml-2" :rom="rom" />
+        </p>
+      </v-col>
+    </v-row>
 
-  <v-row
-    class="text-white text-shadow mt-2"
-    :class="{ 'text-center': smAndDown }"
-    no-gutters
-  >
-    <v-col>
-      <v-chip :to="{ name: 'platform', params: { platform: rom.platform_id } }">
-        {{ rom.platform_name }}
-        <platform-icon
-          :key="rom.platform_slug"
-          :slug="rom.platform_slug"
-          :name="rom.platform_name"
-          :size="30"
-          class="ml-2"
-        />
-      </v-chip>
-      <v-chip
-        v-if="hasReleaseDate && !smAndDown"
-        class="ml-1 font-italic"
-        size="x-small"
-      >
-        {{ releaseDate }}
-      </v-chip>
-      <v-chip
-        v-if="Number(rom.first_release_date) > 0 && smAndDown"
-        class="font-italic ml-1"
-        size="x-small"
-      >
-        {{ releaseDate }}
-      </v-chip>
-      <template v-if="!smAndDown">
+    <v-row
+      class="text-white text-shadow mt-2"
+      :class="{ 'text-center': smAndDown }"
+      no-gutters
+    >
+      <v-col>
+        <v-chip
+          :to="{ name: 'platform', params: { platform: rom.platform_id } }"
+        >
+          {{ rom.platform_name }}
+          <platform-icon
+            :key="rom.platform_slug"
+            :slug="rom.platform_slug"
+            :name="rom.platform_name"
+            :size="30"
+            class="ml-2"
+          />
+        </v-chip>
+        <v-chip
+          v-if="hasReleaseDate && !smAndDown"
+          class="ml-1 font-italic"
+          size="x-small"
+        >
+          {{ releaseDate }}
+        </v-chip>
+        <v-chip
+          v-if="Number(rom.first_release_date) > 0 && smAndDown"
+          class="font-italic ml-1"
+          size="x-small"
+        >
+          {{ releaseDate }}
+        </v-chip>
+        <template v-if="!smAndDown">
+          <v-chip
+            class="ml-1"
+            v-if="rom.regions.filter(identity).length > 0"
+            size="small"
+            :title="`Regions: ${rom.regions.join(', ')}`"
+          >
+            <span v-for="region in rom.regions" :key="region" class="px-1">{{
+              regionToEmoji(region)
+            }}</span>
+          </v-chip>
+          <v-chip
+            v-if="rom.languages.filter(identity).length > 0"
+            size="small"
+            class="ml-1"
+            :title="`Languages: ${rom.languages.join(', ')}`"
+          >
+            <span
+              v-for="language in rom.languages"
+              :key="language"
+              class="px-1"
+              >{{ languageToEmoji(language) }}</span
+            >
+          </v-chip>
+          <v-chip v-if="rom.revision" size="small" class="ml-1">
+            Revision {{ rom.revision }}
+          </v-chip>
+        </template>
+      </v-col>
+    </v-row>
+
+    <v-row
+      v-if="
+        smAndDown &&
+        rom.regions.filter(identity).length > 0 &&
+        rom.languages.filter(identity).length > 0 &&
+        rom.revision
+      "
+      class="text-white text-shadow mt-2 text-center"
+      no-gutters
+    >
+      <v-col>
         <v-chip
           class="ml-1"
           v-if="rom.regions.filter(identity).length > 0"
@@ -90,83 +134,46 @@ const hasReleaseDate = Number(props.rom.first_release_date) > 0;
         <v-chip v-if="rom.revision" size="small" class="ml-1">
           Revision {{ rom.revision }}
         </v-chip>
-      </template>
-    </v-col>
-  </v-row>
-
-  <v-row
-    v-if="
-      smAndDown &&
-      rom.regions.filter(identity).length > 0 &&
-      rom.languages.filter(identity).length > 0 &&
-      rom.revision
-    "
-    class="text-white text-shadow mt-2 text-center"
-    no-gutters
-  >
-    <v-col>
-      <v-chip
-        class="ml-1"
-        v-if="rom.regions.filter(identity).length > 0"
-        size="small"
-        :title="`Regions: ${rom.regions.join(', ')}`"
-      >
-        <span v-for="region in rom.regions" :key="region" class="px-1">{{
-          regionToEmoji(region)
-        }}</span>
-      </v-chip>
-      <v-chip
-        v-if="rom.languages.filter(identity).length > 0"
-        size="small"
-        class="ml-1"
-        :title="`Languages: ${rom.languages.join(', ')}`"
-      >
-        <span v-for="language in rom.languages" :key="language" class="px-1">{{
-          languageToEmoji(language)
-        }}</span>
-      </v-chip>
-      <v-chip v-if="rom.revision" size="small" class="ml-1">
-        Revision {{ rom.revision }}
-      </v-chip>
-    </v-col>
-  </v-row>
+      </v-col>
+    </v-row>
 
-  <v-row
-    v-if="rom.igdb_id || rom.moby_id"
-    class="text-white text-shadow mt-2"
-    :class="{ 'text-center': smAndDown }"
-    no-gutters
-  >
-    <v-col cols="12">
-      <a
-        v-if="rom.igdb_id"
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.igdb.com/games/${rom.slug}`"
-        target="_blank"
-      >
-        <v-chip size="x-small" @click.stop>
-          <span>IGDB</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>ID: {{ rom.igdb_id }}</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>Rating: {{ rom.igdb_metadata?.total_rating }}</span>
-        </v-chip>
-      </a>
-      <a
-        v-if="rom.moby_id"
-        style="text-decoration: none; color: inherit"
-        :href="`https://www.mobygames.com/game/${rom.moby_id}`"
-        target="_blank"
-        :class="{ 'ml-1': rom.igdb_id }"
-      >
-        <v-chip size="x-small" @click.stop>
-          <span>Mobygames</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>ID: {{ rom.moby_id }}</span>
-          <v-divider class="mx-2 border-opacity-25" vertical />
-          <span>Rating: {{ rom.moby_metadata?.moby_score }}</span>
-        </v-chip>
-      </a>
-    </v-col>
-  </v-row>
+    <v-row
+      v-if="rom.igdb_id || rom.moby_id"
+      class="text-white text-shadow mt-2"
+      :class="{ 'text-center': smAndDown }"
+      no-gutters
+    >
+      <v-col cols="12">
+        <a
+          v-if="rom.igdb_id"
+          style="text-decoration: none; color: inherit"
+          :href="`https://www.igdb.com/games/${rom.slug}`"
+          target="_blank"
+        >
+          <v-chip size="x-small" @click.stop>
+            <span>IGDB</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ rom.igdb_id }}</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>Rating: {{ rom.igdb_metadata?.total_rating }}</span>
+          </v-chip>
+        </a>
+        <a
+          v-if="rom.moby_id"
+          style="text-decoration: none; color: inherit"
+          :href="`https://www.mobygames.com/game/${rom.moby_id}`"
+          target="_blank"
+          :class="{ 'ml-1': rom.igdb_id }"
+        >
+          <v-chip size="x-small" @click.stop>
+            <span>Mobygames</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>ID: {{ rom.moby_id }}</span>
+            <v-divider class="mx-2 border-opacity-25" vertical />
+            <span>Rating: {{ rom.moby_metadata?.moby_score }}</span>
+          </v-chip>
+        </a>
+      </v-col>
+    </v-row>
+  </div>
 </template>
diff --git a/frontend/src/components/Gallery/AppBar/Collection/Base.vue b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
index 98f59a29a..5960cbff1 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/Base.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import CollectionInfoDrawer from "@/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue";
 import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
 import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
@@ -11,6 +12,7 @@ import storeRoms from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
+import storeNavigation from "@/stores/navigation";
 import { inject, ref } from "vue";
 import { useDisplay } from "vuetify";
 
@@ -21,29 +23,9 @@ const viewportWidth = ref(window.innerWidth);
 const auth = storeAuth();
 const romsStore = storeRoms();
 const { currentCollection } = storeToRefs(romsStore);
+const navigationStore = storeNavigation();
+const { activeCollectionInfoDrawer } = storeToRefs(navigationStore);
 const open = ref(false);
-const collectionInfoFields = [
-  {
-    key: "name",
-    label: "Name",
-  },
-  {
-    key: "description",
-    label: "Description",
-  },
-  {
-    key: "rom_count",
-    label: "Roms",
-  },
-  {
-    key: "user__username",
-    label: "Owner",
-  },
-  {
-    key: "is_public",
-    label: "Public",
-  },
-];
 </script>
 
 <template>
@@ -58,9 +40,9 @@ const collectionInfoFields = [
   >
     <template #prepend>
       <v-btn
-        :color="open ? 'romm-accent-1' : ''"
+        :color="activeCollectionInfoDrawer ? 'romm-accent-1' : ''"
         rounded="0"
-        @click="open = !open"
+        @click="navigationStore.swtichActiveCollectionInfoDrawer"
         icon="mdi-information"
       ></v-btn>
       <filter-btn />
@@ -72,91 +54,7 @@ const collectionInfoFields = [
     </template>
   </v-app-bar>
 
-  <v-navigation-drawer
-    v-model="open"
-    floating
-    mobile
-    :width="xs ? viewportWidth : '500'"
-    v-if="currentCollection"
-  >
-    <v-row no-gutters class="text-center justify-center align-center mt-4">
-      <v-col style="max-width: 240px">
-        <collection-card
-          :key="currentCollection.updated_at"
-          :collection="currentCollection"
-        />
-        <v-btn
-          rounded="4"
-          @click="
-            emitter?.emit('showEditCollectionDialog', { ...currentCollection })
-          "
-          class="mt-4 bg-terciary"
-        >
-          <template #prepend>
-            <v-icon>mdi-pencil-box</v-icon>
-          </template>
-          Edit collection
-        </v-btn>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="mt-4">
-      <v-col cols="12">
-        <v-card class="mx-4 bg-terciary" elevation="0">
-          <v-card-text class="pa-4">
-            <template
-              v-for="(field, index) in collectionInfoFields"
-              :key="field.key"
-            >
-              <div
-                v-if="
-                  currentCollection[field.key as keyof typeof currentCollection]
-                "
-                :class="{ 'mt-4': index !== 0 }"
-              >
-                <p class="text-subtitle-1 text-decoration-underline">
-                  {{ field.label }}
-                </p>
-                <p class="text-subtitle-2">
-                  {{
-                    currentCollection[
-                      field.key as keyof typeof currentCollection
-                    ]
-                  }}
-                </p>
-              </div>
-            </template>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-    <v-row no-gutters class="mt-4">
-      <v-col cols="12">
-        <r-section
-          v-if="auth.scopes.includes('collections.write')"
-          icon="mdi-alert"
-          icon-color="red"
-          title="Danger zone"
-          elevation="0"
-        >
-          <template #content>
-            <div class="text-center my-2">
-              <v-btn
-                class="text-romm-red bg-terciary"
-                variant="flat"
-                @click="
-                  emitter?.emit('showDeleteCollectionDialog', currentCollection)
-                "
-              >
-                <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
-                Delete collection
-              </v-btn>
-            </div>
-          </template>
-        </r-section>
-      </v-col>
-    </v-row>
-  </v-navigation-drawer>
-
+  <collection-info-drawer />
   <filter-drawer />
 </template>
 
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
new file mode 100644
index 000000000..534120d27
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import CollectionCard from "@/components/common/Collection/Card.vue";
+import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
+import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
+import RSection from "@/components/common/RSection.vue";
+import storeAuth from "@/stores/auth";
+import storeNavigation from "@/stores/navigation";
+import storeRoms from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { xs } = useDisplay();
+const emitter = inject<Emitter<Events>>("emitter");
+const viewportWidth = ref(window.innerWidth);
+const auth = storeAuth();
+const romsStore = storeRoms();
+const { currentCollection } = storeToRefs(romsStore);
+const navigationStore = storeNavigation();
+const { activeCollectionInfoDrawer } = storeToRefs(navigationStore);
+const collectionInfoFields = [
+  {
+    key: "rom_count",
+    label: "Roms",
+  },
+  {
+    key: "user__username",
+    label: "Owner",
+  },
+  {
+    key: "is_public",
+    label: "Public",
+  },
+];
+</script>
+
+<template>
+  <v-navigation-drawer
+    v-model="activeCollectionInfoDrawer"
+    floating
+    mobile
+    :width="xs ? viewportWidth : '500'"
+    v-if="currentCollection"
+  >
+    <v-row no-gutters class="justify-center align-center pa-4">
+      <v-col style="max-width: 240px" cols="12">
+        <div class="text-center justify-center align-center">
+          <collection-card
+            :key="currentCollection.updated_at"
+            :collection="currentCollection"
+          />
+        </div>
+        <div
+          class="text-center mt-4"
+          v-if="auth.scopes.includes('collections.write')"
+        >
+          <p class="text-h5 font-weight-bold pl-0">
+            <span>{{ currentCollection.name }}</span>
+          </p>
+          <p class="text-subtitle-2">
+            <span>{{ currentCollection.description }}</span>
+          </p>
+          <div class="mt-6">
+            <v-btn
+              v-if="currentCollection.user__username === auth.user?.username"
+              rounded="4"
+              @click="
+                emitter?.emit('showEditCollectionDialog', {
+                  ...currentCollection,
+                })
+              "
+              class="bg-terciary"
+            >
+              <template #prepend>
+                <v-icon>mdi-pencil-box</v-icon>
+              </template>
+              Edit collection
+            </v-btn>
+          </div>
+        </div>
+      </v-col>
+      <v-col cols="12">
+        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
+          <v-card-text class="pa-4">
+            <template
+              v-for="(field, index) in collectionInfoFields"
+              :key="field.key"
+            >
+              <div
+                v-if="
+                  currentCollection[field.key as keyof typeof currentCollection]
+                "
+                :class="{ 'mt-4': index !== 0 }"
+              >
+                <p class="text-subtitle-1 text-decoration-underline">
+                  {{ field.label }}
+                </p>
+                <p class="text-subtitle-2">
+                  {{
+                    currentCollection[
+                      field.key as keyof typeof currentCollection
+                    ]
+                  }}
+                </p>
+              </div>
+            </template>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+    <r-section
+      v-if="
+        auth.scopes.includes('collections.write') &&
+        currentCollection.user__username === auth.user?.username
+      "
+      icon="mdi-alert"
+      icon-color="red"
+      title="Danger zone"
+      elevation="0"
+    >
+      <template #content>
+        <div class="text-center">
+          <v-btn
+            class="text-romm-red bg-terciary ma-2"
+            variant="flat"
+            @click="
+              emitter?.emit('showDeleteCollectionDialog', currentCollection)
+            "
+          >
+            <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
+            Delete collection
+          </v-btn>
+        </div>
+      </template>
+    </r-section>
+  </v-navigation-drawer>
+
+  <edit-collection-dialog />
+  <delete-collection-dialog />
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
index 82444adc9..33466cf53 100644
--- a/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import RSection from "@/components/common/RSection.vue";
 import platformApi from "@/services/api/platform";
@@ -46,7 +47,6 @@ const aspectRatioOptions = computed(() => [
 ]);
 
 const platformInfoFields = [
-  { key: "name", label: "Name" },
   { key: "slug", label: "Slug" },
   { key: "fs_slug", label: "Filesystem folder name" },
   { key: "category", label: "Category" },
@@ -125,9 +125,9 @@ async function setAspectRatio() {
     :width="xs ? viewportWidth : '500'"
     v-if="currentPlatform"
   >
-    <v-row no-gutters class="justify-center align-center">
+    <v-row no-gutters class="justify-center align-center pa-4">
       <v-col cols="12">
-        <div class="text-center mt-2">
+        <div class="text-center justify-center align-center">
           <platform-icon
             :slug="currentPlatform.slug"
             :name="currentPlatform.name"
@@ -136,38 +136,43 @@ async function setAspectRatio() {
           />
         </div>
         <div
-          class="text-center mt-4"
+          class="text-center mt-2"
           v-if="auth.scopes.includes('platforms.write')"
         >
-          <v-btn
-            class="bg-terciary"
-            @click="emitter?.emit('showUploadRomDialog', currentPlatform)"
-          >
-            <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
-            Upload roms
-          </v-btn>
-          <v-btn
-            :disabled="scanning"
-            rounded="4"
-            :loading="scanning"
-            @click="scan"
-            class="ml-2 bg-terciary"
-          >
-            <template #prepend>
-              <v-icon :color="scanning ? '' : 'romm-accent-1'"
-                >mdi-magnify-scan</v-icon
-              >
-            </template>
-            Scan platform
-            <template #loader>
-              <v-progress-circular
-                color="romm-accent-1"
-                :width="2"
-                :size="20"
-                indeterminate
-              />
-            </template>
-          </v-btn>
+          <p class="text-h5 font-weight-bold pl-0">
+            <span>{{ currentPlatform.name }}</span>
+          </p>
+          <div class="mt-6">
+            <v-btn
+              class="bg-terciary"
+              @click="emitter?.emit('showUploadRomDialog', currentPlatform)"
+            >
+              <v-icon class="text-romm-green mr-2">mdi-upload</v-icon>
+              Upload roms
+            </v-btn>
+            <v-btn
+              :disabled="scanning"
+              rounded="4"
+              :loading="scanning"
+              @click="scan"
+              class="ml-2 bg-terciary"
+            >
+              <template #prepend>
+                <v-icon :color="scanning ? '' : 'romm-accent-1'"
+                  >mdi-magnify-scan</v-icon
+                >
+              </template>
+              Scan platform
+              <template #loader>
+                <v-progress-circular
+                  color="romm-accent-1"
+                  :width="2"
+                  :size="20"
+                  indeterminate
+                />
+              </template>
+            </v-btn>
+          </div>
         </div>
         <div class="mt-4 text-center">
           <a
@@ -194,7 +199,7 @@ async function setAspectRatio() {
             <span>ID: {{ currentPlatform.moby_id }}</span>
           </v-chip>
         </div>
-        <v-card class="mt-4 mx-4 bg-terciary fill-width" elevation="0">
+        <v-card class="mt-4 bg-terciary fill-width" elevation="0">
           <v-card-text class="pa-4">
             <template
               v-for="(field, index) in platformInfoFields"
@@ -220,78 +225,85 @@ async function setAspectRatio() {
         </v-card>
       </v-col>
     </v-row>
-    <v-row class="mt-4" no-gutters>
-      <v-col cols="12">
-        <r-section
-          v-if="auth.scopes.includes('platforms.write')"
-          icon="mdi-aspect-ratio"
-          title="UI Settings"
-          elevation="0"
+    <r-section
+      v-if="auth.scopes.includes('platforms.write')"
+      icon="mdi-cog"
+      title="Settings"
+      elevation="0"
+    >
+      <template #content>
+        <v-chip
+          label
+          variant="text"
+          class="ml-2"
+          prepend-icon="mdi-aspect-ratio"
+          >Cover style</v-chip
         >
-          <template #content>
-            <v-item-group
-              v-model="selectedAspectRatio"
-              mandatory
-              @update:model-value="setAspectRatio"
-            >
-              <v-row no-gutters class="text-center justify-center align-center">
-                <v-col class="ma-2" v-for="aspectRatio in aspectRatioOptions">
-                  <v-item v-slot="{ isSelected, toggle }">
-                    <v-card
-                      :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
-                      variant="outlined"
-                      @click="toggle"
-                    >
-                      <v-card-text
-                        class="pa-0 text-center align-center justify-center"
-                      >
-                        <v-img
-                          :aspect-ratio="aspectRatio.size"
-                          cover
-                          src="/assets/login_bg.png"
-                          :class="{ greyscale: !isSelected }"
-                          class="d-flex align-center justify-center"
-                        >
-                          <p class="text-h5 text-romm-white">
-                            {{ aspectRatio.name }}
-                          </p>
-                        </v-img>
-                        <p class="text-center mx-2 text-caption">
-                          {{ aspectRatio.source }}
-                        </p>
-                      </v-card-text>
-                    </v-card>
-                  </v-item>
-                </v-col>
-              </v-row>
-            </v-item-group>
-          </template>
-        </r-section>
-        <r-section
-          v-if="auth.scopes.includes('platforms.write')"
-          icon="mdi-alert"
-          icon-color="red"
-          title="Danger zone"
-          elevation="0"
+        <v-divider class="border-opacity-25 mx-2" />
+        <v-item-group
+          v-model="selectedAspectRatio"
+          mandatory
+          @update:model-value="setAspectRatio"
         >
-          <template #content>
-            <div class="text-center my-2">
-              <v-btn
-                class="text-romm-red bg-terciary"
-                variant="flat"
-                @click="
-                  emitter?.emit('showDeletePlatformDialog', currentPlatform)
-                "
-              >
-                <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
-                Delete platform
-              </v-btn>
-            </div>
-          </template>
-        </r-section>
-      </v-col>
-    </v-row>
+          <v-row
+            no-gutters
+            class="text-center justify-center align-center pa-2"
+          >
+            <v-col class="pa-2" v-for="aspectRatio in aspectRatioOptions">
+              <v-item v-slot="{ isSelected, toggle }">
+                <v-card
+                  :color="isSelected ? 'romm-accent-1' : 'romm-gray'"
+                  variant="outlined"
+                  @click="toggle"
+                >
+                  <v-card-text
+                    class="pa-0 text-center align-center justify-center"
+                  >
+                    <v-img
+                      :aspect-ratio="aspectRatio.size"
+                      cover
+                      src="/assets/login_bg.png"
+                      :class="{ greyscale: !isSelected }"
+                      class="d-flex align-center justify-center"
+                    >
+                      <p class="text-h5 text-romm-white">
+                        {{ aspectRatio.name }}
+                      </p>
+                    </v-img>
+                    <p class="text-center text-caption">
+                      {{ aspectRatio.source }}
+                    </p>
+                  </v-card-text>
+                </v-card>
+              </v-item>
+            </v-col>
+          </v-row>
+        </v-item-group>
+      </template>
+    </r-section>
+    <r-section
+      v-if="auth.scopes.includes('platforms.write')"
+      icon="mdi-alert"
+      icon-color="red"
+      title="Danger zone"
+      elevation="0"
+    >
+      <template #content>
+        <div class="text-center">
+          <v-btn
+            class="text-romm-red bg-terciary ma-2"
+            variant="flat"
+            @click="emitter?.emit('showDeletePlatformDialog', currentPlatform)"
+          >
+            <v-icon class="text-romm-red mr-2">mdi-delete</v-icon>
+            Delete platform
+          </v-btn>
+        </div>
+      </template>
+    </r-section>
   </v-navigation-drawer>
+
+  <delete-platform-dialog />
 </template>
 <style scoped>
 .platform-icon {
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/components/Home/Collections.vue
similarity index 73%
rename from frontend/src/layouts/Dashboard/Collections.vue
rename to frontend/src/components/Home/Collections.vue
index 6ddc3976f..286b4a344 100644
--- a/frontend/src/layouts/Dashboard/Collections.vue
+++ b/frontend/src/components/Home/Collections.vue
@@ -3,14 +3,21 @@ import CollectionCard from "@/components/common/Collection/Card.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeCollections from "@/stores/collections";
 import { views } from "@/utils";
+import { isNull } from "lodash";
 
 // Props
 const collections = storeCollections();
+const gridCollections = isNull(localStorage.getItem("settings.gridCollections"))
+  ? true
+  : localStorage.getItem("settings.gridCollections") === "true";
 </script>
 <template>
   <r-section icon="mdi-bookmark-box-multiple" title="Collections">
     <template #content>
-      <v-row no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': !gridCollections }"
+        no-gutters
+      >
         <v-col
           v-for="collection in collections.allCollections"
           :key="collection.name"
@@ -24,10 +31,10 @@ const collections = storeCollections();
           <collection-card
             show-rom-count
             show-title
-            transformScale
+            transform-scale
             :key="collection.updated_at"
             :collection="collection"
-            withLink
+            with-link
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/layouts/Dashboard/Platforms.vue b/frontend/src/components/Home/Platforms.vue
similarity index 74%
rename from frontend/src/layouts/Dashboard/Platforms.vue
rename to frontend/src/components/Home/Platforms.vue
index ad3bd1b9a..131b4d1c2 100644
--- a/frontend/src/layouts/Dashboard/Platforms.vue
+++ b/frontend/src/components/Home/Platforms.vue
@@ -2,15 +2,22 @@
 import PlatformCard from "@/components/common/Platform/Card.vue";
 import RSection from "@/components/common/RSection.vue";
 import storePlatforms from "@/stores/platforms";
+import { isNull } from "lodash";
 import { views } from "@/utils";
 
 // Props
 const platforms = storePlatforms();
+const gridPlatforms = isNull(localStorage.getItem("settings.gridPlatforms"))
+  ? true
+  : localStorage.getItem("settings.gridPlatforms") === "true";
 </script>
 <template>
   <r-section icon="mdi-controller" title="Platforms">
     <template #content>
-      <v-row no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': !gridPlatforms }"
+        no-gutters
+      >
         <v-col
           v-for="platform in platforms.filledPlatforms"
           :key="platform.slug"
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/components/Home/Recent.vue
similarity index 71%
rename from frontend/src/layouts/Dashboard/Recent.vue
rename to frontend/src/components/Home/Recent.vue
index b97d3bc22..1f3ecd2cf 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/components/Home/Recent.vue
@@ -5,29 +5,23 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
 import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
+import { isNull } from "lodash";
 
 // Props
 const romsStore = storeRoms();
 const { recentRoms } = storeToRefs(romsStore);
 const router = useRouter();
-
-// Functions
-function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
-  if (emitData.event.metaKey || emitData.event.ctrlKey) {
-    const link = router.resolve({
-      name: "rom",
-      params: { rom: emitData.rom.id },
-    });
-    window.open(link.href, "_blank");
-  } else {
-    router.push({ name: "rom", params: { rom: emitData.rom.id } });
-  }
-}
+const gridRecentRoms = isNull(localStorage.getItem("settings.gridRecentRoms"))
+  ? true
+  : localStorage.getItem("settings.gridRecentRoms") === "true";
 </script>
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
-      <v-row class="flex-nowrap overflow-x-auto align-center" no-gutters>
+      <v-row
+        :class="{ 'flex-nowrap overflow-x-auto': !gridRecentRoms }"
+        no-gutters
+      >
         <v-col
           v-for="rom in recentRoms"
           :key="rom.id"
@@ -41,10 +35,9 @@ function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
           <game-card
             :key="rom.updated_at"
             :rom="rom"
-            @click="onGameClick"
             title-on-hover
-            pointerOnHover
-            withLink
+            pointer-on-hover
+            with-link
             show-flags
             show-fav
             transform-scale
diff --git a/frontend/src/layouts/Dashboard/Stats.vue b/frontend/src/components/Home/Stats.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Stats.vue
rename to frontend/src/components/Home/Stats.vue
diff --git a/frontend/src/components/Settings/TaskOption.vue b/frontend/src/components/Settings/Administration/TaskOption.vue
similarity index 100%
rename from frontend/src/components/Settings/TaskOption.vue
rename to frontend/src/components/Settings/Administration/TaskOption.vue
diff --git a/frontend/src/layouts/Administration/Tasks.vue b/frontend/src/components/Settings/Administration/Tasks.vue
similarity index 97%
rename from frontend/src/layouts/Administration/Tasks.vue
rename to frontend/src/components/Settings/Administration/Tasks.vue
index 0264336a1..d18282295 100644
--- a/frontend/src/layouts/Administration/Tasks.vue
+++ b/frontend/src/components/Settings/Administration/Tasks.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Task from "@/components/Settings/TaskOption.vue";
+import Task from "@/components/Settings/Administration/TaskOption.vue";
 import RSection from "@/components/common/RSection.vue";
 import api from "@/services/api/index";
 import storeHeartbeat from "@/stores/heartbeat";
@@ -13,7 +13,6 @@ import { computed, inject } from "vue";
 const emitter = inject<Emitter<Events>>("emitter");
 const heartbeatStore = storeHeartbeat();
 const runningTasks = storeRunningTasks();
-
 const tasks = computed(() => [
   {
     title: heartbeatStore.value.WATCHER.TITLE,
@@ -47,7 +46,7 @@ const tasks = computed(() => [
   },
 ]);
 
-// Methods
+// Functions
 const runAllTasks = async () => {
   runningTasks.value = true;
   const result = await api.post("/tasks/run");
diff --git a/frontend/src/components/Administration/Users/Dialog/CreateUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
similarity index 100%
rename from frontend/src/components/Administration/Users/Dialog/CreateUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/CreateUser.vue
diff --git a/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
similarity index 96%
rename from frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
index e49fc418d..71da45d3a 100644
--- a/frontend/src/components/Administration/Users/Dialog/DeleteUser.vue
+++ b/frontend/src/components/Settings/Administration/Users/Dialog/DeleteUser.vue
@@ -2,7 +2,8 @@
 import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeUsers from "@/stores/users";
-import type { Events, UserItem } from "@/types/emitter";
+import type { Events } from "@/types/emitter";
+import type { UserItem } from "@/types/user";
 import { defaultAvatarPath } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
diff --git a/frontend/src/components/Administration/Users/Dialog/EditUser.vue b/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
similarity index 90%
rename from frontend/src/components/Administration/Users/Dialog/EditUser.vue
rename to frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
index d1198dbc1..ccdbdba16 100644
--- a/frontend/src/components/Administration/Users/Dialog/EditUser.vue
+++ b/frontend/src/components/Settings/Administration/Users/Dialog/EditUser.vue
@@ -3,7 +3,8 @@ import RDialog from "@/components/common/RDialog.vue";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeUsers from "@/stores/users";
-import type { Events, UserItem } from "@/types/emitter";
+import type { Events } from "@/types/emitter";
+import type { UserItem } from "@/types/user";
 import { defaultAvatarPath } from "@/utils";
 import type { Emitter } from "mitt";
 import { inject, ref } from "vue";
@@ -134,17 +135,16 @@ function closeDialog() {
               <v-avatar size="190" class="ml-4" v-bind="props">
                 <v-img
                   :src="
-                    imagePreviewUrl
-                      ? imagePreviewUrl
-                      : user.avatar_path
-                        ? `/assets/romm/assets/${user.avatar_path}?ts=${user.updated_at}`
-                        : defaultAvatarPath
+                    imagePreviewUrl ||
+                    (user.avatar_path
+                      ? `/assets/romm/assets/${user.avatar_path}?ts=${user.updated_at}`
+                      : defaultAvatarPath)
                   "
                 >
                   <v-fade-transition>
                     <div
                       v-if="isHovering"
-                      class="d-flex translucent edit-hover text-h4"
+                      class="d-flex translucent cursor-pointer h-100 align-center justify-center text-h4"
                       @click="triggerFileInput"
                     >
                       <v-icon>mdi-pencil</v-icon>
@@ -185,15 +185,3 @@ function closeDialog() {
     </template>
   </r-dialog>
 </template>
-
-<style scoped>
-.edit-hover {
-  align-items: center;
-  bottom: 0;
-  justify-content: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-</style>
diff --git a/frontend/src/components/Administration/Users/Table.vue b/frontend/src/components/Settings/Administration/Users/Table.vue
similarity index 95%
rename from frontend/src/components/Administration/Users/Table.vue
rename to frontend/src/components/Settings/Administration/Users/Table.vue
index 25697193c..6105d8054 100644
--- a/frontend/src/components/Administration/Users/Table.vue
+++ b/frontend/src/components/Settings/Administration/Users/Table.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CreateUserDialog from "@/components/Settings/Administration/Users/Dialog/CreateUser.vue";
+import DeleteUserDialog from "@/components/Settings/Administration/Users/Dialog/DeleteUser.vue";
 import RSection from "@/components/common/RSection.vue";
 import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
@@ -139,6 +141,7 @@ onMounted(() => {
         </template>
         <template #item.enabled="{ item }">
           <v-switch
+            inset
             v-model="item.enabled"
             color="romm-accent-1"
             :disabled="item.id == auth.user?.id"
@@ -194,4 +197,7 @@ onMounted(() => {
       </v-data-table>
     </template>
   </r-section>
+
+  <create-user-dialog />
+  <delete-user-dialog />
 </template>
diff --git a/frontend/src/components/Settings/Footer.vue b/frontend/src/components/Settings/Footer.vue
index 3dec00fe0..7afb1eadb 100644
--- a/frontend/src/components/Settings/Footer.vue
+++ b/frontend/src/components/Settings/Footer.vue
@@ -4,7 +4,11 @@ import storeHeartbeat from "@/stores/heartbeat";
 const heartbeatStore = storeHeartbeat();
 </script>
 <template>
-  <v-bottom-navigation :elevation="0" height="36" class="text-caption">
+  <v-bottom-navigation
+    :elevation="0"
+    height="36"
+    class="bg-terciary text-caption"
+  >
     <v-row class="align-center justify-center" no-gutters>
       <span class="text-romm-accent-1">RomM</span>
       <span class="ml-1">{{ heartbeatStore.value.VERSION }}</span>
diff --git a/frontend/src/components/Management/AddBtn.vue b/frontend/src/components/Settings/LibraryManagement/AddBtn.vue
similarity index 100%
rename from frontend/src/components/Management/AddBtn.vue
rename to frontend/src/components/Settings/LibraryManagement/AddBtn.vue
diff --git a/frontend/src/components/Management/Dialog/CreateExclusion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreateExclusion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreatePlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue
diff --git a/frontend/src/components/Management/Dialog/CreatePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/CreatePlatformVersion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue
diff --git a/frontend/src/components/Management/Dialog/DeletePlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/DeletePlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue
diff --git a/frontend/src/components/Management/Dialog/DeletePlatformVersion.vue b/frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
similarity index 100%
rename from frontend/src/components/Management/Dialog/DeletePlatformVersion.vue
rename to frontend/src/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue
diff --git a/frontend/src/layouts/Management/Excluded.vue b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
similarity index 90%
rename from frontend/src/layouts/Management/Excluded.vue
rename to frontend/src/components/Settings/LibraryManagement/Excluded.vue
index 4e6593184..6bae7f9f9 100644
--- a/frontend/src/layouts/Management/Excluded.vue
+++ b/frontend/src/components/Settings/LibraryManagement/Excluded.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import ExcludedCard from "@/components/Management/ExcludedCard.vue";
 import RSection from "@/components/common/RSection.vue";
+import CreateExclusionDialog from "@/components/Settings/LibraryManagement/Dialog/CreateExclusion.vue";
+import ExcludedCard from "@/components/Settings/LibraryManagement/ExcludedCard.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
 import { ref } from "vue";
@@ -74,4 +75,6 @@ const editable = ref(false);
       />
     </template>
   </r-section>
+
+  <create-exclusion-dialog />
 </template>
diff --git a/frontend/src/components/Management/ExcludedCard.vue b/frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
similarity index 100%
rename from frontend/src/components/Management/ExcludedCard.vue
rename to frontend/src/components/Settings/LibraryManagement/ExcludedCard.vue
diff --git a/frontend/src/components/Management/PlatformBindCard.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
similarity index 100%
rename from frontend/src/components/Management/PlatformBindCard.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformBindCard.vue
diff --git a/frontend/src/layouts/Management/PlatformBinding.vue b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
similarity index 81%
rename from frontend/src/layouts/Management/PlatformBinding.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
index 9b233ec7f..38c84b080 100644
--- a/frontend/src/layouts/Management/PlatformBinding.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformBinding.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import AddBtn from "@/components/Management/AddBtn.vue";
-import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
+import AddBtn from "@/components/Settings/LibraryManagement/AddBtn.vue";
+import CreatePlatformBindingDialog from "@/components/Settings/LibraryManagement/Dialog/CreatePlatformBinding.vue";
+import DeletePlatformBindingDialog from "@/components/Settings/LibraryManagement/Dialog/DeletePlatformBinding.vue";
+import PlatformBindCard from "@/components/Settings/LibraryManagement/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
@@ -74,4 +76,7 @@ const editable = ref(false);
       </v-row>
     </template>
   </r-section>
+
+  <create-platform-binding-dialog />
+  <delete-platform-binding-dialog />
 </template>
diff --git a/frontend/src/layouts/Management/PlatformVersions.vue b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
similarity index 81%
rename from frontend/src/layouts/Management/PlatformVersions.vue
rename to frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
index 09bc9bcce..73e5a36c7 100644
--- a/frontend/src/layouts/Management/PlatformVersions.vue
+++ b/frontend/src/components/Settings/LibraryManagement/PlatformVersions.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
-import AddBtn from "@/components/Management/AddBtn.vue";
-import PlatformBindCard from "@/components/Management/PlatformBindCard.vue";
+import AddBtn from "@/components/Settings/LibraryManagement/AddBtn.vue";
+import CreatePlatformVersionDialog from "@/components/Settings/LibraryManagement/Dialog/CreatePlatformVersion.vue";
+import DeletePlatformVersionDialog from "@/components/Settings/LibraryManagement/Dialog/DeletePlatformVersion.vue";
+import PlatformBindCard from "@/components/Settings/LibraryManagement/PlatformBindCard.vue";
 import RSection from "@/components/common/RSection.vue";
 import storeAuth from "@/stores/auth";
 import storeConfig from "@/stores/config";
@@ -74,4 +76,7 @@ const editable = ref(false);
       </v-row>
     </template>
   </r-section>
+
+  <create-platform-version-dialog />
+  <delete-platform-version-dialog />
 </template>
diff --git a/frontend/src/components/Settings/UserInterface/Interface.vue b/frontend/src/components/Settings/UserInterface/Interface.vue
new file mode 100644
index 000000000..51d8dba17
--- /dev/null
+++ b/frontend/src/components/Settings/UserInterface/Interface.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import InterfaceOption from "@/components/Settings/UserInterface/InterfaceOption.vue";
+import RSection from "@/components/common/RSection.vue";
+import { computed, ref } from "vue";
+import { isNull } from "lodash";
+
+// Initializing refs from localStorage
+const storedShowRecentRoms = localStorage.getItem("settings.showRecentRoms");
+const showRecentRomsRef = ref(
+  isNull(storedShowRecentRoms) ? true : storedShowRecentRoms === "true",
+);
+const storedGridRecentRoms = localStorage.getItem("settings.gridRecentRoms");
+const gridRecentRomsRef = ref(
+  isNull(storedGridRecentRoms) ? true : storedGridRecentRoms === "true",
+);
+const storedShowPlatforms = localStorage.getItem("settings.showPlatforms");
+const showPlatformsRef = ref(
+  isNull(storedShowPlatforms) ? true : storedShowPlatforms === "true",
+);
+const storedGridPlatforms = localStorage.getItem("settings.gridPlatforms");
+const gridPlatformsRef = ref(
+  isNull(storedGridPlatforms) ? true : storedGridPlatforms === "true",
+);
+const storedShowCollections = localStorage.getItem("settings.showCollections");
+const showCollectionsRef = ref(
+  isNull(storedShowCollections) ? true : storedShowCollections === "true",
+);
+const storedGridCollections = localStorage.getItem("settings.gridCollections");
+const gridCollectionsRef = ref(
+  isNull(storedGridCollections) ? true : storedGridCollections === "true",
+);
+
+const storedGroupRoms = localStorage.getItem("settings.groupRoms");
+const groupRomsRef = ref(
+  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
+);
+const storedSiblings = localStorage.getItem("settings.showSiblings");
+const siblingsRef = ref(
+  isNull(storedSiblings) ? true : storedSiblings === "true",
+);
+const storedRegions = localStorage.getItem("settings.showRegions");
+const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
+const storedLanguages = localStorage.getItem("settings.showLanguages");
+const languagesRef = ref(
+  isNull(storedLanguages) ? true : storedLanguages === "true",
+);
+const storedStatus = localStorage.getItem("settings.showStatus");
+const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
+
+const homeOptions = computed(() => [
+  {
+    title: "Show recently added roms",
+    description: "Show recently added roms section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showRecentRomsRef,
+    modelTrigger: toggleShowRecentRoms,
+  },
+  {
+    title: "Recently added roms as grid",
+    description: "View recently added rom cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showRecentRomsRef.value,
+    model: gridRecentRomsRef,
+    modelTrigger: toggleGridRecentRoms,
+  },
+  {
+    title: "Show platforms",
+    description: "Show platform section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showPlatformsRef,
+    modelTrigger: toggleShowPlatforms,
+  },
+  {
+    title: "Platforms as grid",
+    description: "View platform cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showPlatformsRef.value,
+    model: gridPlatformsRef,
+    modelTrigger: toggleGridPlatforms,
+  },
+  {
+    title: "Show collections",
+    description: "Show collections section at the home page",
+    iconEnabled: "mdi-checkbox-marked-outline",
+    iconDisabled: "mdi-checkbox-blank-outline",
+    model: showCollectionsRef,
+    modelTrigger: toggleShowCollections,
+  },
+  {
+    title: "Collections a grid",
+    description: "View collection cards as a grid at the home page",
+    iconEnabled: "mdi-view-comfy",
+    iconDisabled: "mdi-view-column",
+    disabled: !showCollectionsRef.value,
+    model: gridCollectionsRef,
+    modelTrigger: toggleGridCollections,
+  },
+]);
+
+const galleryOptions = computed(() => [
+  {
+    title: "Group roms",
+    description: "Group versions of the same rom together in the gallery",
+    iconEnabled: "mdi-group",
+    iconDisabled: "mdi-ungroup",
+    model: groupRomsRef,
+    modelTrigger: toggleGroupRoms,
+  },
+  {
+    title: "Show siblings",
+    description:
+      'Show siblings count in the gallery when "Group roms" option is enabled',
+    iconEnabled: "mdi-account-group-outline",
+    iconDisabled: "mdi-account-outline",
+    model: siblingsRef,
+    disabled: !groupRomsRef.value,
+    modelTrigger: toggleSiblings,
+  },
+  {
+    title: "Show regions",
+    description: "Show region flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: regionsRef,
+    modelTrigger: toggleRegions,
+  },
+  {
+    title: "Show languages",
+    description: "Show language flags in the gallery",
+    iconEnabled: "mdi-flag-outline",
+    iconDisabled: "mdi-flag-off-outline",
+    model: languagesRef,
+    modelTrigger: toggleLanguages,
+  },
+  {
+    title: "Show status",
+    description:
+      "Show status icons in the gallery (backlogged, playing, completed, etc)",
+    iconEnabled: "mdi-check-circle-outline",
+    iconDisabled: "mdi-close-circle-outline",
+    model: statusRef,
+    modelTrigger: toggleStatus,
+  },
+]);
+
+// Functions to update localStorage
+const toggleShowRecentRoms = (value: boolean) => {
+  showRecentRomsRef.value = value;
+  localStorage.setItem("settings.showRecentRoms", value.toString());
+};
+const toggleGridRecentRoms = (value: boolean) => {
+  gridRecentRomsRef.value = value;
+  localStorage.setItem("settings.gridRecentRoms", value.toString());
+};
+const toggleShowPlatforms = (value: boolean) => {
+  showPlatformsRef.value = value;
+  localStorage.setItem("settings.showPlatforms", value.toString());
+};
+const toggleGridPlatforms = (value: boolean) => {
+  gridPlatformsRef.value = value;
+  localStorage.setItem("settings.gridPlatforms", value.toString());
+};
+const toggleShowCollections = (value: boolean) => {
+  showCollectionsRef.value = value;
+  localStorage.setItem("settings.showCollections", value.toString());
+};
+const toggleGridCollections = (value: boolean) => {
+  gridCollectionsRef.value = value;
+  localStorage.setItem("settings.gridCollections", value.toString());
+};
+
+const toggleGroupRoms = (value: boolean) => {
+  groupRomsRef.value = value;
+  localStorage.setItem("settings.groupRoms", value.toString());
+};
+
+const toggleSiblings = (value: boolean) => {
+  siblingsRef.value = value;
+  localStorage.setItem("settings.showSiblings", value.toString());
+};
+
+const toggleRegions = (value: boolean) => {
+  regionsRef.value = value;
+  localStorage.setItem("settings.showRegions", value.toString());
+};
+
+const toggleLanguages = (value: boolean) => {
+  languagesRef.value = value;
+  localStorage.setItem("settings.showLanguages", value.toString());
+};
+
+const toggleStatus = (value: boolean) => {
+  statusRef.value = value;
+  localStorage.setItem("settings.showStatus", value.toString());
+};
+</script>
+<template>
+  <r-section icon="mdi-palette-swatch-outline" title="Interface">
+    <template #content>
+      <v-chip label variant="text" prepend-icon="mdi-home" class="ml-2"
+        >Home</v-chip
+      >
+      <v-divider class="border-opacity-25 mx-2" />
+      <v-row class="py-1" no-gutters>
+        <v-col
+          cols="12"
+          md="6"
+          v-for="option in homeOptions"
+          :key="option.title"
+        >
+          <interface-option
+            class="mx-2"
+            :disabled="option.disabled"
+            :title="option.title"
+            :description="option.description"
+            :icon="
+              option.model.value ? option.iconEnabled : option.iconDisabled
+            "
+            v-model="option.model.value"
+            @update:model-value="option.modelTrigger"
+          />
+        </v-col>
+      </v-row>
+      <v-chip
+        label
+        variant="text"
+        prepend-icon="mdi-view-grid"
+        class="ml-2 mt-4"
+        >Gallery</v-chip
+      >
+      <v-divider class="border-opacity-25 mx-2" />
+      <v-row class="py-1" no-gutters>
+        <v-col
+          cols="12"
+          md="6"
+          v-for="option in galleryOptions"
+          :key="option.title"
+        >
+          <interface-option
+            class="mx-2"
+            :disabled="option.disabled"
+            :title="option.title"
+            :description="option.description"
+            :icon="
+              option.model.value ? option.iconEnabled : option.iconDisabled
+            "
+            v-model="option.model.value"
+            @update:model-value="option.modelTrigger"
+          />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
+</template>
diff --git a/frontend/src/components/Settings/InterfaceOption.vue b/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
similarity index 98%
rename from frontend/src/components/Settings/InterfaceOption.vue
rename to frontend/src/components/Settings/UserInterface/InterfaceOption.vue
index e35bc96ae..bfdfa6b92 100644
--- a/frontend/src/components/Settings/InterfaceOption.vue
+++ b/frontend/src/components/Settings/UserInterface/InterfaceOption.vue
@@ -29,6 +29,7 @@ const emit = defineEmits(["update:modelValue"]);
 
       <template #append>
         <v-switch
+          inset
           :model-value="modelValue"
           @update:model-value="(value) => emit('update:modelValue', value)"
           :class="{ 'pr-16': !xs }"
diff --git a/frontend/src/layouts/Settings/Theme.vue b/frontend/src/components/Settings/UserInterface/Theme.vue
similarity index 95%
rename from frontend/src/layouts/Settings/Theme.vue
rename to frontend/src/components/Settings/UserInterface/Theme.vue
index ef5ffdba7..71b0410e7 100644
--- a/frontend/src/layouts/Settings/Theme.vue
+++ b/frontend/src/components/Settings/UserInterface/Theme.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import ThemeOption from "@/components/Settings/ThemeOption.vue";
+import ThemeOption from "@/components/Settings/UserInterface/ThemeOption.vue";
 import RSection from "@/components/common/RSection.vue";
 import { autoThemeKey, themes } from "@/styles/themes";
 import { isKeyof } from "@/types";
 import { computed, ref } from "vue";
 import { useTheme } from "vuetify";
 
+// Props
 const theme = useTheme();
 const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
 const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
@@ -23,7 +24,6 @@ const themeOptions = computed(() => [
     icon: "mdi-theme-light-dark",
   },
 ]);
-
 // Functions
 function toggleTheme() {
   localStorage.setItem("settings.theme", selectedTheme.value.toString());
@@ -35,7 +35,6 @@ function toggleTheme() {
   }
 }
 </script>
-
 <template>
   <r-section icon="mdi-brush-variant" title="Theme">
     <template #content>
diff --git a/frontend/src/components/Settings/ThemeOption.vue b/frontend/src/components/Settings/UserInterface/ThemeOption.vue
similarity index 100%
rename from frontend/src/components/Settings/ThemeOption.vue
rename to frontend/src/components/Settings/UserInterface/ThemeOption.vue
diff --git a/frontend/src/components/common/Collection/Dialog/AddRoms.vue b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
index aafd72931..f7295f5c7 100644
--- a/frontend/src/components/common/Collection/Dialog/AddRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/AddRoms.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import RAvatarCollection from "@/components/common/Collection/RAvatar.vue";
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import CollectionListItem from "@/components/common/Collection/ListItem.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import type { UpdatedCollection } from "@/services/api/collection";
 import collectionApi from "@/services/api/collection";
@@ -110,21 +111,21 @@ function closeDialog() {
         clearable
       >
         <template #item="{ props, item }">
-          <v-list-item
-            class="py-4"
+          <collection-list-item
+            :collection="item.raw"
             v-bind="props"
-            :title="item.raw.name ?? ''"
-            :subtitle="item.raw.description"
-          >
-            <template #prepend>
-              <r-avatar-collection :collection="item.raw" />
-            </template>
-            <template #append>
-              <v-chip class="ml-2" size="x-small" label>
-                {{ item.raw.rom_count }}
-              </v-chip>
-            </template>
-          </v-list-item>
+            :with-title="false"
+          />
+        </template>
+        <template #chip="{ item }">
+          <v-chip class="pl-0" label>
+            <r-avatar-collection
+              :collection="item.raw"
+              :size="35"
+              class="mr-2"
+            />
+            {{ item.raw.name }}
+          </v-chip>
         </template>
       </v-autocomplete>
     </template>
@@ -140,14 +141,7 @@ function closeDialog() {
         hide-default-header
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar-rom :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="item" with-filename />
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index 8507ea346..b7759e951 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -158,10 +158,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          collection.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: collection.name as string,
+                          aspectRatio: null,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
index 537b542ba..629b3b099 100644
--- a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -47,7 +47,7 @@ async function deleteCollection() {
       return;
     });
 
-  await router.push({ name: "dashboard" });
+  await router.push({ name: "home" });
 
   collectionsStore.remove(collection.value);
   emitter?.emit("refreshDrawer", null);
@@ -71,7 +71,7 @@ function closeDialog() {
       <v-row class="justify-center align-center pa-2" no-gutters>
         <span>Removing collection</span>
         <r-avatar class="ml-1" :collection="collection" />
-        <span class="ml-1 text-romm-accent-1">{{ collection.name }}</span>
+        <span class="ml-1 text-romm-accent-1">{{ collection.name }}.</span>
         <span class="ml-1">from RomM. Do you confirm?</span>
       </v-row>
     </template>
diff --git a/frontend/src/components/common/Collection/Dialog/EditCollection.vue b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
index 91085b872..71859cdc6 100644
--- a/frontend/src/components/common/Collection/Dialog/EditCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/EditCollection.vue
@@ -12,7 +12,7 @@ import { useDisplay, useTheme } from "vuetify";
 
 // Props
 const theme = useTheme();
-const { mdAndUp } = useDisplay();
+const { smAndDown, mdAndUp, lgAndUp } = useDisplay();
 const show = ref(false);
 const storeCollection = collectionStore();
 const collection = ref<UpdatedCollection>({} as UpdatedCollection);
@@ -106,12 +106,12 @@ function closeDialog() {
     @close="closeDialog"
     v-model="show"
     icon="mdi-pencil-box"
-    :width="mdAndUp ? '55vw' : '95vw'"
+    :width="lgAndUp ? '65vw' : '95vw'"
   >
     <template #content>
       <v-row class="align-center pa-2" no-gutters>
-        <v-col cols="12" lg="7" xl="9">
-          <v-row class="pa-2" no-gutters>
+        <v-col cols="12" md="8" xl="9">
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="collection.name"
@@ -124,7 +124,7 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-text-field
                 v-model="collection.description"
@@ -137,25 +137,33 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
-          <v-row class="pa-2" no-gutters>
+          <v-row class="px-2" no-gutters>
             <v-col>
               <v-switch
                 v-model="collection.is_public"
+                color="romm-accent-1"
+                class="px-2"
+                false-icon="mdi-lock"
+                true-icon="mdi-lock-open"
+                inset
+                hide-details
+                message="Public (visible to everyone)"
                 :label="
                   collection.is_public
                     ? 'Public (visible to everyone)'
                     : 'Private (only visible to me)'
                 "
-                color="romm-accent-1"
-                class="px-2"
-                hide-details
               />
             </v-col>
           </v-row>
         </v-col>
-        <v-col>
-          <v-row class="pa-2 justify-center" no-gutters>
-            <v-col class="cover">
+        <v-col cols="12" md="4" xl="3">
+          <v-row
+            class="justify-center"
+            :class="{ 'mt-4': smAndDown }"
+            no-gutters
+          >
+            <v-col style="max-width: 240px">
               <collection-card
                 :key="collection.updated_at"
                 :show-title="false"
@@ -172,10 +180,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          collection.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: collection.name as string,
+                          aspectRatio: null,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
@@ -211,9 +219,7 @@ function closeDialog() {
           </v-row>
         </v-col>
       </v-row>
-    </template>
-    <template #append>
-      <v-row class="justify-center mt-4 mb-2" no-gutters>
+      <v-row class="justify-center pa-2 mt-1" no-gutters>
         <v-btn-group divided density="compact">
           <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
           <v-btn class="text-romm-green bg-terciary" @click="editCollection">
@@ -224,11 +230,3 @@ function closeDialog() {
     </template>
   </r-dialog>
 </template>
-<style scoped>
-.cover {
-  min-width: 240px;
-  min-height: 330px;
-  max-width: 240px;
-  max-height: 330px;
-}
-</style>
diff --git a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
index 34f144b70..a99581db4 100644
--- a/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
+++ b/frontend/src/components/common/Collection/Dialog/RemoveRoms.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import router from "@/plugins/router";
 import collectionApi from "@/services/api/collection";
@@ -66,7 +66,7 @@ async function removeRomsFromCollection() {
       emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
       romsStore.resetSelection();
       if (selectedCollection.value?.roms.length == 0) {
-        router.push({ name: "dashboard" });
+        router.push({ name: "home" });
       }
       closeDialog();
     });
@@ -118,14 +118,7 @@ function closeDialog() {
         hide-default-header
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar-rom :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="item" with-filename />
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
index 5e0f52f3f..6176bc6a1 100644
--- a/frontend/src/components/common/Collection/ListItem.vue
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -3,29 +3,50 @@ import type { Collection } from "@/stores/collections";
 import RAvatar from "@/components/common/Collection/RAvatar.vue";
 
 // Props
-defineProps<{ collection: Collection }>();
+withDefaults(
+  defineProps<{
+    collection: Collection;
+    withTitle?: boolean;
+    withDescription?: boolean;
+    withRomCount?: boolean;
+    withLink?: boolean;
+  }>(),
+  {
+    withTitle: true,
+    withDescription: true,
+    withRomCount: true,
+    withLink: false,
+  },
+);
 </script>
 
 <template>
   <v-list-item
     :key="collection.id"
-    :to="{ name: 'collection', params: { collection: collection.id } }"
+    v-bind="{
+      ...(withLink && collection
+        ? {
+            to: { name: 'collection', params: { collection: collection.id } },
+          }
+        : {}),
+    }"
     :value="collection.name"
+    class="py-1 pl-1"
   >
     <template #prepend>
-      <r-avatar :collection="collection" />
+      <r-avatar :size="75" :collection="collection" />
     </template>
-    <v-row no-gutters
+    <v-row v-if="withTitle" no-gutters
       ><v-col
         ><span class="text-body-1">{{ collection.name }}</span></v-col
       ></v-row
     >
-    <v-row no-gutters>
+    <v-row v-if="withDescription" no-gutters>
       <v-col>
         <span class="text-caption text-grey">{{ collection.description }}</span>
       </v-col>
     </v-row>
-    <template #append>
+    <template v-if="withRomCount" #append>
       <v-chip class="ml-2" size="x-small" label>
         {{ collection.rom_count }}
       </v-chip>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index ed287828e..9e149d315 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -18,6 +18,8 @@ const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
     aspectRatio?: string | number;
+    width?: string | number;
+    height?: string | number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;
@@ -28,11 +30,13 @@ const props = withDefaults(
     showFav?: boolean;
     withBorder?: boolean;
     withBorderRommAccent?: boolean;
-    withLink: boolean;
+    withLink?: boolean;
     src?: string;
   }>(),
   {
     aspectRatio: undefined,
+    width: undefined,
+    height: undefined,
     transformScale: false,
     titleOnHover: false,
     showFlags: false,
@@ -63,7 +67,6 @@ const handleTouchEnd = (event: TouchEvent) => {
   emit("touchend", { event: event, rom: props.rom });
 };
 const downloadStore = storeDownload();
-const card = ref();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
 const collectionsStore = storeCollections();
@@ -79,6 +82,10 @@ const computedAspectRatio = computed(() => {
 <template>
   <v-hover v-slot="{ isHovering, props: hoverProps }">
     <v-card
+      :minWidth="width"
+      :maxWidth="width"
+      :minHeight="height"
+      :maxHeight="height"
       v-bind="{
         ...hoverProps,
         ...(withLink && rom && romsStore.isSimpleRom(rom)
@@ -110,23 +117,19 @@ const computedAspectRatio = computed(() => {
             @touchend="handleTouchEnd"
             v-bind="hoverProps"
             :class="{ pointer: pointerOnHover }"
-            ref="card"
             cover
             :key="romsStore.isSimpleRom(rom) ? rom.updated_at : ''"
             :src="
-              src
-                ? src
-                : romsStore.isSimpleRom(rom)
-                  ? !rom.igdb_id && !rom.moby_id && !rom.has_cover
-                    ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
-                    : (rom.igdb_id || rom.moby_id) && !rom.has_cover
-                      ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-                      : `/assets/romm/resources/${rom.path_cover_l}?ts=${rom.updated_at}`
-                  : !rom.igdb_url_cover && !rom.moby_url_cover
+              src ||
+              (romsStore.isSimpleRom(rom)
+                ? !rom.igdb_id && !rom.moby_id && !rom.has_cover
+                  ? `/assets/default/cover/big_${theme.global.name.value}_unmatched.png`
+                  : (rom.igdb_id || rom.moby_id) && !rom.has_cover
                     ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-                    : rom.igdb_url_cover
-                      ? rom.igdb_url_cover
-                      : rom.moby_url_cover
+                    : `/assets/romm/resources/${rom.path_cover_l}?ts=${rom.updated_at}`
+                : !rom.igdb_url_cover && !rom.moby_url_cover
+                  ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+                  : rom.igdb_url_cover || rom.moby_url_cover)
             "
             :lazy-src="
               romsStore.isSimpleRom(rom)
@@ -137,9 +140,7 @@ const computedAspectRatio = computed(() => {
                     : `/assets/romm/resources/${rom.path_cover_s}?ts=${rom.updated_at}`
                 : !rom.igdb_url_cover && !rom.moby_url_cover
                   ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-                  : rom.igdb_url_cover
-                    ? rom.igdb_url_cover
-                    : rom.moby_url_cover
+                  : rom.igdb_url_cover || rom.moby_url_cover
             "
             :aspect-ratio="computedAspectRatio"
           >
@@ -155,10 +156,6 @@ const computedAspectRatio = computed(() => {
                         !rom.moby_url_cover)
                     "
                     class="translucent-dark text-caption text-white"
-                    :class="{
-                      'text-truncate':
-                        galleryViewStore.currentView == 0 && !isHovering,
-                    }"
                   >
                     <v-list-item>{{ rom.name }}</v-list-item>
                   </div>
@@ -209,7 +206,7 @@ const computedAspectRatio = computed(() => {
               class="position-absolute append-inner-left"
               v-if="!showPlatformIcon"
             >
-              <slot name="append-inner-left"> </slot>
+              <slot name="append-inner-left"></slot>
             </div>
             <div class="position-absolute append-inner-right" v-if="!showFav">
               <slot name="append-inner-right"> </slot>
diff --git a/frontend/src/components/common/Game/Card/Related.vue b/frontend/src/components/common/Game/Card/Related.vue
index 3be15c761..cb94ecb05 100644
--- a/frontend/src/components/common/Game/Card/Related.vue
+++ b/frontend/src/components/common/Game/Card/Related.vue
@@ -9,49 +9,41 @@ const props = defineProps<{
 }>();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
-const handleClick = () => {
-  if (props.game.slug) {
-    window.open(
-      `https://www.igdb.com/games/${props.game.slug}`,
-      "_blank",
-      "noopener noreferrer",
-    );
-  }
-};
 </script>
 
 <template>
-  <v-card class="ma-1" v-on:click="handleClick">
-    <v-tooltip
-      activator="parent"
-      location="top"
-      class="tooltip"
-      transition="fade-transition"
-      open-delay="1000"
-      >{{ game.name }}</v-tooltip
-    >
-    <!-- TODO: fix aspect ratio -->
-    <v-img
-      v-bind="props"
-      :src="
-        `${game.cover_url}`
-          ? `https:${game.cover_url.replace('t_thumb', 't_cover_big')}`
-          : `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
-      "
-      :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
-      cover
-      lazy
-      ><v-chip
-        class="px-2 position-absolute chip-type text-white translucent-dark"
-        density="compact"
-        label
+  <a :href="`https://www.igdb.com/games/${game.slug}`" target="_blank">
+    <v-card>
+      <v-tooltip
+        activator="parent"
+        location="top"
+        class="tooltip"
+        transition="fade-transition"
+        open-delay="1000"
+        >{{ game.name }}</v-tooltip
       >
-        <span>
-          {{ game.type }}
-        </span>
-      </v-chip></v-img
-    >
-  </v-card>
+      <v-img
+        v-bind="props"
+        :src="
+          game.cover_url ||
+          `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+        "
+        :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
+        cover
+        lazy
+        ><v-chip
+          class="px-2 position-absolute chip-type text-white translucent-dark"
+          density="compact"
+          rounded="0"
+          label
+        >
+          <span>
+            {{ game.type }}
+          </span>
+        </v-chip></v-img
+      >
+    </v-card>
+  </a>
 </template>
 <style scoped>
 .chip-type {
diff --git a/frontend/src/components/common/Game/Dialog/DeleteRom.vue b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
index ad01c72ca..6a43e8f5e 100644
--- a/frontend/src/components/common/Game/Dialog/DeleteRom.vue
+++ b/frontend/src/components/common/Game/Dialog/DeleteRom.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -122,53 +122,17 @@ function closeDialog() {
         show-select
       >
         <template #item.name="{ item }">
-          <v-list-item class="px-0">
-            <template #prepend>
-              <r-avatar :rom="item" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ item.name }}</v-col></v-row
-            >
-            <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters
-              ><v-col class="text-romm-accent-1"
-                >{{ item.file_name
-                }}<v-chip
-                  v-if="romsToDeleteFromFs.includes(item.id) && smAndUp"
-                  label
-                  size="x-small"
-                  class="text-romm-red ml-1"
-                >
-                  Removing from filesystem
-                </v-chip></v-col
-              ></v-row
-            >
-            <v-row
-              v-if="romsToDeleteFromFs.includes(item.id) && !smAndUp"
-              no-gutters
-            >
-              <v-col>
-                <v-chip label size="x-small" class="text-romm-red">
-                  Removing from filesystem
-                </v-chip>
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col>
-                <v-chip v-if="!smAndUp" size="x-small" label
-                  >{{ formatBytes(item.file_size_bytes) }}
-                </v-chip>
-              </v-col>
-            </v-row>
-            <template #append>
-              <v-row no-gutters v-if="smAndUp">
+          <rom-list-item :rom="item" with-filename>
+            <template #append-body>
+              <v-row v-if="romsToDeleteFromFs.includes(item.id)" no-gutters>
                 <v-col>
-                  <v-chip size="x-small" label>{{
-                    formatBytes(item.file_size_bytes)
-                  }}</v-chip>
+                  <v-chip label size="x-small" class="text-romm-red">
+                    Removing from filesystem
+                  </v-chip>
                 </v-col>
               </v-row>
             </template>
-          </v-list-item>
+          </rom-list-item>
         </template>
         <template #bottom>
           <v-divider />
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index 364a5b217..2a623a217 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -2,7 +2,9 @@
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi, { type UpdateRom } from "@/services/api/rom";
+import storeGalleryView from "@/stores/galleryView";
 import storeHeartbeat from "@/stores/heartbeat";
+import storePlatforms from "@/stores/platforms";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -20,6 +22,8 @@ const rom = ref<UpdateRom>();
 const romsStore = storeRoms();
 const imagePreviewUrl = ref<string | undefined>("");
 const removeCover = ref(false);
+const platfotmsStore = storePlatforms();
+const galleryViewStore = storeGalleryView();
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showEditRomDialog", (romToEdit: UpdateRom | undefined) => {
   show.value = true;
@@ -31,6 +35,12 @@ emitter?.on("updateUrlCover", (url_cover) => {
   rom.value.url_cover = url_cover;
   setArtwork(url_cover);
 });
+const computedAspectRatio = computed(() => {
+  const ratio = rom.value?.platform_id
+    ? platfotmsStore.getAspectRatio(rom.value?.platform_id)
+    : galleryViewStore.defaultAspectRatioCover;
+  return parseFloat(ratio.toString());
+});
 
 // Functions
 function triggerFileInput() {
@@ -198,34 +208,14 @@ function closeDialog() {
               />
             </v-col>
           </v-row>
+        </v-col>
+        <v-col cols="12" md="4" xl="3">
           <v-row
-            v-if="mdAndUp"
-            class="justify-space-between mt-4 mb-2 mx-2"
+            class="justify-center"
+            :class="{ 'mt-4': smAndDown }"
             no-gutters
           >
-            <v-btn-group divided density="compact">
-              <v-btn
-                :disabled="noMetadataMatch"
-                :class="` ${
-                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
-                }`"
-                variant="flat"
-                @click="unmatchRom"
-              >
-                Unmatch Rom
-              </v-btn>
-            </v-btn-group>
-            <v-btn-group divided density="compact">
-              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-                Save
-              </v-btn>
-            </v-btn-group>
-          </v-row>
-        </v-col>
-        <v-col cols="12" md="4" xl="3">
-          <v-row class="justify-center" no-gutters>
-            <v-col style="max-width: 240px" :class="{ 'my-4': smAndDown }">
+            <v-col style="max-width: 240px">
               <game-card :rom="rom" :src="imagePreviewUrl">
                 <template #append-inner-right>
                   <v-btn-group rounded="0" divided density="compact">
@@ -236,10 +226,10 @@ function closeDialog() {
                       size="small"
                       class="translucent-dark"
                       @click="
-                        emitter?.emit(
-                          'showSearchCoverDialog',
-                          rom.name as string,
-                        )
+                        emitter?.emit('showSearchCoverDialog', {
+                          term: rom.name as string,
+                          aspectRatio: computedAspectRatio,
+                        })
                       "
                     >
                       <v-icon size="large">mdi-image-search-outline</v-icon>
@@ -273,28 +263,24 @@ function closeDialog() {
               </game-card>
             </v-col>
           </v-row>
-          <v-row v-if="smAndDown" class="justify-space-between pa-2" no-gutters>
-            <v-btn-group divided density="compact" class="my-1">
-              <v-btn
-                :disabled="noMetadataMatch"
-                :class="` ${
-                  noMetadataMatch ? '' : 'bg-terciary text-romm-red'
-                }`"
-                variant="flat"
-                @click="unmatchRom"
-              >
-                Unmatch Rom
-              </v-btn>
-            </v-btn-group>
-            <v-btn-group divided density="compact" class="my-1">
-              <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
-              <v-btn class="text-romm-green bg-terciary" @click="updateRom">
-                Save
-              </v-btn>
-            </v-btn-group>
-          </v-row>
         </v-col>
       </v-row>
+      <v-row class="justify-space-between px-4 py-2 mt-1" no-gutters>
+        <v-btn
+          :disabled="noMetadataMatch"
+          :class="` ${noMetadataMatch ? '' : 'bg-terciary text-romm-red'}`"
+          variant="flat"
+          @click="unmatchRom"
+        >
+          Unmatch Rom
+        </v-btn>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="text-romm-green bg-terciary" @click="updateRom">
+            Save
+          </v-btn>
+        </v-btn-group>
+      </v-row>
     </template>
   </r-dialog>
 </template>
diff --git a/frontend/src/components/common/Game/Dialog/MatchRom.vue b/frontend/src/components/common/Game/Dialog/MatchRom.vue
index d301dd32e..27f1b6fc1 100644
--- a/frontend/src/components/common/Game/Dialog/MatchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/MatchRom.vue
@@ -244,10 +244,13 @@ onBeforeUnmount(() => {
           <v-avatar
             @click="toggleSourceFilter('IGDB')"
             v-bind="props"
-            class="ml-3 source-filter"
+            class="ml-3 cursor-pointer opacity-40"
             :class="{
-              filtered: isIGDBFiltered,
-              disabled: !heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
+              'opacity-100':
+                isIGDBFiltered &&
+                heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
+              'cursor-not-allowed':
+                !heartbeat.value.METADATA_SOURCES.IGDB_API_ENABLED,
             }"
             size="30"
             rounded="1"
@@ -270,10 +273,13 @@ onBeforeUnmount(() => {
           <v-avatar
             @click="toggleSourceFilter('Mobygames')"
             v-bind="props"
-            class="ml-3 source-filter"
+            class="ml-3 cursor-pointer opacity-40"
             :class="{
-              filtered: isMobyFiltered,
-              disabled: !heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
+              'opacity-100':
+                isMobyFiltered &&
+                heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
+              'cursor-not-allowed':
+                !heartbeat.value.METADATA_SOURCES.MOBY_API_ENABLED,
             }"
             size="30"
             rounded="1"
@@ -322,7 +328,7 @@ onBeforeUnmount(() => {
       </v-row>
     </template>
     <template #content>
-      <v-row v-show="!showSelectSource" no-gutters>
+      <v-row class="align-content-start" v-show="!showSelectSource" no-gutters>
         <v-col
           class="pa-1"
           cols="4"
@@ -335,9 +341,8 @@ onBeforeUnmount(() => {
             v-if="rom"
             @click="showSources(matchedRom)"
             :rom="matchedRom"
-            title-on-footer
-            transform-scale
-            title-on-hover
+            transformScale
+            titleOnHover
             pointerOnHover
           />
         </v-col>
@@ -372,16 +377,10 @@ onBeforeUnmount(() => {
           </v-col>
           <v-col cols="12">
             <v-row class="justify-center mt-4" no-gutters>
-              <v-col
-                :class="{
-                  'source-cover-desktop': !xs,
-                  'source-cover-mobile': xs,
-                }"
-                class="pa-1"
-                v-for="source in sources"
-              >
+              <v-col class="pa-1" cols="auto" v-for="source in sources">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card
+                    :width="xs ? 150 : 220"
                     v-bind="props"
                     class="transform-scale mx-2"
                     :class="{
@@ -495,28 +494,3 @@ onBeforeUnmount(() => {
     </template>
   </r-dialog>
 </template>
-
-<style scoped>
-.source-filter {
-  cursor: pointer;
-  opacity: 0.4;
-}
-.source-filter.filtered {
-  opacity: 1;
-}
-.source-filter.disabled {
-  cursor: not-allowed !important;
-  opacity: 0.4 !important;
-}
-.select-source-dialog {
-  z-index: 9999 !important;
-}
-.source-cover-desktop {
-  min-width: 220px;
-  max-width: 220px;
-}
-.source-cover-mobile {
-  min-width: 150px;
-  max-width: 150px;
-}
-</style>
diff --git a/frontend/src/components/common/Game/Dialog/SearchRom.vue b/frontend/src/components/common/Game/Dialog/SearchRom.vue
index ece56ddf3..58c17110c 100644
--- a/frontend/src/components/common/Game/Dialog/SearchRom.vue
+++ b/frontend/src/components/common/Game/Dialog/SearchRom.vue
@@ -200,11 +200,11 @@ onBeforeUnmount(() => {
             title-on-hover
             pointerOnHover
             withLink
-            show-flags
-            show-fav
-            transform-scale
-            show-action-bar
-            show-platform-icon
+            showFlags
+            showFav
+            transformScale
+            showActionBar
+            showPlatformIcon
           />
         </v-col>
       </v-row>
diff --git a/frontend/src/components/common/Game/ListItem.vue b/frontend/src/components/common/Game/ListItem.vue
new file mode 100644
index 000000000..6f1db5fff
--- /dev/null
+++ b/frontend/src/components/common/Game/ListItem.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { SimpleRom } from "@/stores/roms";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import { formatBytes } from "@/utils";
+import { useDisplay } from "vuetify";
+
+// Props
+withDefaults(
+  defineProps<{
+    rom: SimpleRom;
+    withAvatar?: boolean;
+    withName?: boolean;
+    withFilename?: boolean;
+    withSize?: boolean;
+    withLink?: boolean;
+  }>(),
+  {
+    withAvatar: true,
+    withName: true,
+    withFilename: false,
+    withSize: true,
+    withLink: false,
+  },
+);
+</script>
+<template>
+  <v-list-item
+    v-bind="{
+      ...(withLink && rom
+        ? {
+            to: { name: 'rom', params: { rom: rom.id } },
+          }
+        : {}),
+    }"
+  >
+    <template v-if="withAvatar" #prepend>
+      <slot name="prepend"></slot>
+      <r-avatar-rom :rom="rom" />
+    </template>
+    <v-row v-if="withName" no-gutters
+      ><v-col>{{ rom.name }}</v-col></v-row
+    >
+    <v-row v-if="withFilename" no-gutters
+      ><v-col class="text-romm-accent-1">{{ rom.file_name }}</v-col></v-row
+    >
+    <slot name="append-body"></slot>
+    <template #append>
+      <v-row no-gutters>
+        <v-col v-if="withSize" cols="auto">
+          <v-chip size="x-small" label>{{
+            formatBytes(rom.file_size_bytes)
+          }}</v-chip>
+        </v-col>
+        <v-col>
+          <slot name="append"></slot>
+        </v-col>
+      </v-row>
+    </template>
+  </v-list-item>
+</template>
diff --git a/frontend/src/components/common/Game/Table.vue b/frontend/src/components/common/Game/Table.vue
index 150ee7f7c..f1e02ba9e 100644
--- a/frontend/src/components/common/Game/Table.vue
+++ b/frontend/src/components/common/Game/Table.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import AdminMenu from "@/components/common/Game/AdminMenu.vue";
 import FavBtn from "@/components/common/Game/FavBtn.vue";
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
@@ -154,10 +154,10 @@ onMounted(() => {
       <td class="name-row">
         <v-list-item class="px-0">
           <template #prepend>
-            <r-avatar :rom="item" />
+            <r-avatar-rom :rom="item" />
           </template>
-          <v-row no-gutters
-            ><v-col>{{ item.name }}</v-col></v-row
+          <v-row no-gutters>
+            <v-col>{{ item.name }}</v-col></v-row
           >
           <v-row no-gutters
             ><v-col class="text-romm-accent-1">{{
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index 665f271d2..2086a87c7 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import CollectionListItem from "@/components/common/Collection/ListItem.vue";
 import storeCollections from "@/stores/collections";
+import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
 import storeNavigation from "@/stores/navigation";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
@@ -50,6 +51,7 @@ function clear() {
       <collection-list-item
         v-for="collection in filteredCollections"
         :collection="collection"
+        with-link
       />
     </v-list>
     <template #append>
@@ -65,4 +67,6 @@ function clear() {
       >
     </template>
   </v-navigation-drawer>
+
+  <create-collection-dialog />
 </template>
diff --git a/frontend/src/components/common/Navigation/HomeBtn.vue b/frontend/src/components/common/Navigation/HomeBtn.vue
index 808c01ed0..6c95ed294 100644
--- a/frontend/src/components/common/Navigation/HomeBtn.vue
+++ b/frontend/src/components/common/Navigation/HomeBtn.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import RommIso from "@/components/common/RommIso.vue";
+import RIsotipo from "@/components/common/RIsotipo.vue";
 import storeNavigation from "@/stores/navigation";
 
 const homeUrl = ref(`${location.protocol}//${location.host}`);
 const navigationStore = storeNavigation();
 </script>
 <template>
-  <a
-    @click.prevent
-    style="text-decoration: none; color: inherit"
-    :href="homeUrl"
-  >
-    <v-hover v-slot="{ isHovering, props: hoverProps }">
-      <romm-iso
-        @click="navigationStore.goHome"
-        v-bind="hoverProps"
-        class="pointer"
-        :class="{ 'border-romm-accent-1': isHovering }"
-        :size="35"
-      />
-    </v-hover>
-  </a>
+  <r-isotipo
+    :to="homeUrl"
+    @click="navigationStore.goHome"
+    class="cursor-pointer"
+    :size="40"
+  />
 </template>
+
+<style scoped>
+.v-avatar {
+  transition: filter 0.15s ease-in-out;
+}
+.v-avatar:hover,
+.v-avatar.active {
+  filter: drop-shadow(0px 0px 2px rgba(var(--v-theme-romm-accent-1)));
+}
+</style>
diff --git a/frontend/src/components/common/Navigation/MainAppBar.vue b/frontend/src/components/common/Navigation/MainAppBar.vue
index 6b4327f1d..3066e8415 100644
--- a/frontend/src/components/common/Navigation/MainAppBar.vue
+++ b/frontend/src/components/common/Navigation/MainAppBar.vue
@@ -6,9 +6,25 @@ import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
 import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
 import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
 import UserBtn from "@/components/common/Navigation/UserBtn.vue";
+import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
+import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
+import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
+import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
+import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
+import storeNavigation from "@/stores/navigation";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
+
+// Props
+const { smAndDown } = useDisplay();
+const navigationStore = storeNavigation();
+const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
+  storeToRefs(navigationStore);
 </script>
 <template>
+  <!-- Mobile app bar -->
   <v-app-bar
+    v-if="smAndDown"
     elevation="0"
     class="bg-primary justify-center px-1"
     mode="shift"
@@ -32,4 +48,40 @@ import UserBtn from "@/components/common/Navigation/UserBtn.vue";
       <user-btn />
     </template>
   </v-app-bar>
+
+  <!-- Desktop app bar -->
+  <v-navigation-drawer
+    v-else
+    permanent
+    rail
+    :floating="
+      activePlatformsDrawer || activeCollectionsDrawer || activeSettingsDrawer
+    "
+    rail-width="60"
+  >
+    <template #prepend>
+      <v-row no-gutters class="my-2 justify-center">
+        <home-btn />
+      </v-row>
+    </template>
+
+    <v-divider opacity="0" class="my-4" />
+    <search-btn block />
+    <platforms-btn block />
+    <collections-btn block />
+    <v-divider opacity="0" class="my-3" />
+    <upload-btn block />
+    <scan-btn block />
+    <template #append>
+      <v-row no-gutters class="my-2 justify-center">
+        <user-btn />
+      </v-row>
+    </template>
+  </v-navigation-drawer>
+
+  <search-rom-dialog />
+  <platforms-drawer />
+  <collections-drawer />
+  <upload-rom-dialog />
+  <settings-drawer />
 </template>
diff --git a/frontend/src/components/common/Navigation/MainDrawer.vue b/frontend/src/components/common/Navigation/MainDrawer.vue
deleted file mode 100644
index 57137581d..000000000
--- a/frontend/src/components/common/Navigation/MainDrawer.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import HomeBtn from "@/components/common/Navigation/HomeBtn.vue";
-import PlatformsBtn from "@/components/common/Navigation/PlatformsBtn.vue";
-import CollectionsBtn from "@/components/common/Navigation/CollectionsBtn.vue";
-import ScanBtn from "@/components/common/Navigation/ScanBtn.vue";
-import SearchBtn from "@/components/common/Navigation/SearchBtn.vue";
-import UploadBtn from "@/components/common/Navigation/UploadBtn.vue";
-import UserBtn from "@/components/common/Navigation/UserBtn.vue";
-import storeNavigation from "@/stores/navigation";
-import { storeToRefs } from "pinia";
-
-// Props
-const navigationStore = storeNavigation();
-const { activePlatformsDrawer, activeCollectionsDrawer, activeSettingsDrawer } =
-  storeToRefs(navigationStore);
-</script>
-<template>
-  <v-navigation-drawer
-    permanent
-    rail
-    :floating="
-      activePlatformsDrawer || activeCollectionsDrawer || activeSettingsDrawer
-    "
-    rail-width="60"
-  >
-    <template #prepend>
-      <v-row no-gutters class="my-2 justify-center">
-        <home-btn />
-      </v-row>
-    </template>
-
-    <v-divider opacity="0" class="my-4" />
-    <search-btn block />
-    <platforms-btn block />
-    <collections-btn block />
-    <v-divider opacity="0" class="my-3" />
-    <upload-btn block />
-    <scan-btn block />
-    <template #append>
-      <v-row no-gutters class="my-2 justify-center">
-        <user-btn />
-      </v-row>
-    </template>
-  </v-navigation-drawer>
-</template>
diff --git a/frontend/src/components/common/Navigation/SettingsDrawer.vue b/frontend/src/components/common/Navigation/SettingsDrawer.vue
index cb99c62d2..7cd2b0a4b 100644
--- a/frontend/src/components/common/Navigation/SettingsDrawer.vue
+++ b/frontend/src/components/common/Navigation/SettingsDrawer.vue
@@ -72,13 +72,13 @@ async function logout() {
         append-icon="mdi-account"
         >Profile</v-list-item
       >
-      <v-list-item :to="{ name: 'settings' }" append-icon="mdi-palette"
-        >UI Settings</v-list-item
+      <v-list-item :to="{ name: 'userInterface' }" append-icon="mdi-palette"
+        >User Interface</v-list-item
       >
       <v-list-item
         v-if="scopes.includes('platforms.write')"
         append-icon="mdi-table-cog"
-        :to="{ name: 'management' }"
+        :to="{ name: 'libraryManagement' }"
         >Library Management
       </v-list-item>
       <v-list-item
diff --git a/frontend/src/components/common/Navigation/UserBtn.vue b/frontend/src/components/common/Navigation/UserBtn.vue
index f0ba93d8a..73caf36d1 100644
--- a/frontend/src/components/common/Navigation/UserBtn.vue
+++ b/frontend/src/components/common/Navigation/UserBtn.vue
@@ -13,7 +13,7 @@ const { user } = storeToRefs(auth);
   <v-avatar
     @click="navigationStore.switchActiveSettingsDrawer"
     class="pointer"
-    size="35"
+    :size="40"
     :class="{ active: navigationStore.activeSettingsDrawer }"
   >
     <v-img
diff --git a/frontend/src/components/common/NewVersion.vue b/frontend/src/components/common/NewVersionDialog.vue
similarity index 100%
rename from frontend/src/components/common/NewVersion.vue
rename to frontend/src/components/common/NewVersionDialog.vue
diff --git a/frontend/src/components/common/Notification.vue b/frontend/src/components/common/Notifications/Notification.vue
similarity index 100%
rename from frontend/src/components/common/Notification.vue
rename to frontend/src/components/common/Notifications/Notification.vue
diff --git a/frontend/src/components/common/UploadInProgress.vue b/frontend/src/components/common/Notifications/UploadProgress.vue
similarity index 98%
rename from frontend/src/components/common/UploadInProgress.vue
rename to frontend/src/components/common/Notifications/UploadProgress.vue
index 8acb5c402..162312fd6 100644
--- a/frontend/src/components/common/UploadInProgress.vue
+++ b/frontend/src/components/common/Notifications/UploadProgress.vue
@@ -5,11 +5,13 @@ import { storeToRefs } from "pinia";
 import { ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 
+// Props
 const { xs } = useDisplay();
 const uploadStore = storeUpload();
 const { files } = storeToRefs(uploadStore);
 const show = ref(false);
 
+// Functions
 function clearFinished() {
   uploadStore.clearFinished();
 }
@@ -24,7 +26,7 @@ watch(files, (newList) => {
     id="upload-in-progress"
     v-model="show"
     transition="scroll-y-transition"
-    :timeout="100000000000"
+    :timeout="-1"
     absolute
     :location="xs ? 'bottom' : 'bottom right'"
     class="mb-4 mr-4"
diff --git a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
index c34d661f1..4d3837de8 100644
--- a/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
+++ b/frontend/src/components/common/Platform/Dialog/DeletePlatform.vue
@@ -43,7 +43,7 @@ async function deletePlatform() {
       return;
     });
 
-  await router.push({ name: "dashboard" });
+  await router.push({ name: "home" });
 
   platformsStore.remove(platform.value);
   emitter?.emit("refreshDrawer", null);
diff --git a/frontend/src/components/common/Platform/ListItem.vue b/frontend/src/components/common/Platform/ListItem.vue
index bdced0c83..392dbc11c 100644
--- a/frontend/src/components/common/Platform/ListItem.vue
+++ b/frontend/src/components/common/Platform/ListItem.vue
@@ -13,12 +13,14 @@ withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
     :key="platform.slug"
     :to="{ name: 'platform', params: { platform: platform.id } }"
     :value="platform.slug"
+    class="py-0"
   >
     <template #prepend>
       <platform-icon
         :key="platform.slug"
         :slug="platform.slug"
         :name="platform.name"
+        :size="50"
       >
         <v-tooltip
           location="bottom"
diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index 9bd0be430..960d4ed1a 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -2,7 +2,7 @@
 import EmptyFirmware from "@/components/common/EmptyFirmware.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
 import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
-import RommIso from "@/components/common/RommIso.vue";
+import RIsotipo from "@/components/common/RIsotipo.vue";
 import { onMounted, ref, useSlots } from "vue";
 
 // Props
@@ -65,7 +65,7 @@ onMounted(() => {
     <v-card rounded="0" :min-height="height" :max-height="height">
       <v-toolbar density="compact" class="bg-terciary">
         <v-icon v-if="icon" :icon="icon" class="ml-5" />
-        <romm-iso :size="30" class="mx-4" v-if="showRommIcon" />
+        <r-isotipo :size="30" class="mx-4" v-if="showRommIcon" />
         <slot name="header"></slot>
         <template #append>
           <v-btn
diff --git a/frontend/src/components/common/RommIso.vue b/frontend/src/components/common/RIsotipo.vue
similarity index 100%
rename from frontend/src/components/common/RommIso.vue
rename to frontend/src/components/common/RIsotipo.vue
diff --git a/frontend/src/components/common/RommLogo.vue b/frontend/src/components/common/RLogotipo.vue
similarity index 100%
rename from frontend/src/components/common/RommLogo.vue
rename to frontend/src/components/common/RLogotipo.vue
diff --git a/frontend/src/components/common/SearchCover.vue b/frontend/src/components/common/SearchCover.vue
index 1af108689..d394bc504 100644
--- a/frontend/src/components/common/SearchCover.vue
+++ b/frontend/src/components/common/SearchCover.vue
@@ -2,11 +2,12 @@
 import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
 import sgdbApi from "@/services/api/sgdb";
+import storeGalleryView from "@/stores/galleryView";
+import storePlatforms from "@/stores/platforms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
 import { useDisplay } from "vuetify";
-import storeGalleryView from "@/stores/galleryView";
 
 // Props
 const { lgAndUp } = useDisplay();
@@ -19,9 +20,14 @@ const filteredCovers = ref<SearchCoverSchema[]>();
 const galleryViewStore = storeGalleryView();
 const panels = ref([0]);
 const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("showSearchCoverDialog", (term) => {
+const coverAspectRatio = ref(
+  parseFloat(galleryViewStore.defaultAspectRatioCover.toString()),
+);
+emitter?.on("showSearchCoverDialog", ({ term, aspectRatio = null }) => {
   searchTerm.value = term;
   show.value = true;
+  // TODO: set default aspect ratio to 2/3
+  if (aspectRatio) coverAspectRatio.value = aspectRatio;
   if (searchTerm.value) searchCovers();
 });
 
@@ -168,7 +174,7 @@ onBeforeUnmount(() => {
               <v-list-item class="pa-0">{{ game.name }}</v-list-item>
             </v-row>
           </v-expansion-panel-title>
-          <v-expansion-panel-text class="pa-0">
+          <v-expansion-panel-text class="py-1">
             <v-row no-gutters>
               <v-col
                 class="pa-1"
@@ -184,7 +190,7 @@ onBeforeUnmount(() => {
                     :class="{ 'on-hover': isHovering }"
                     class="transform-scale pointer"
                     @click="selectCover(resource.url)"
-                    :aspect-ratio="galleryViewStore.defaultAspectRatioCover"
+                    :aspect-ratio="coverAspectRatio"
                     :src="resource.thumb"
                     cover
                   >
@@ -218,3 +224,8 @@ onBeforeUnmount(() => {
     </template>
   </r-dialog>
 </template>
+<style lang="css">
+.v-expansion-panel-text__wrapper {
+  padding: 0px !important;
+}
+</style>
diff --git a/frontend/src/components/common/LoadingView.vue b/frontend/src/components/common/ViewLoader.vue
similarity index 93%
rename from frontend/src/components/common/LoadingView.vue
rename to frontend/src/components/common/ViewLoader.vue
index a4d316a79..00aa794c3 100644
--- a/frontend/src/components/common/LoadingView.vue
+++ b/frontend/src/components/common/ViewLoader.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, inject } from "vue";
-import type { Emitter } from "mitt";
 import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
 
+// Props
 const show = ref(false);
 const scrim = ref(false);
-
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("showLoadingDialog", (args) => {
   show.value = args.loading;
diff --git a/frontend/src/layouts/Auth.vue b/frontend/src/layouts/Auth.vue
new file mode 100644
index 000000000..d9c281ad6
--- /dev/null
+++ b/frontend/src/layouts/Auth.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Notification from "@/components/common/Notifications/Notification.vue";
+import storeHeartbeat from "@/stores/heartbeat";
+
+// Props
+const heartbeatStore = storeHeartbeat();
+</script>
+
+<template>
+  <span class="h-100 w-100 position-absolute" id="bg" />
+  <notification />
+  <v-container class="fill-height justify-center">
+    <router-view />
+  </v-container>
+  <div id="version" class="position-absolute">
+    <span class="text-white text-shadow">{{
+      heartbeatStore.value.VERSION
+    }}</span>
+  </div>
+</template>
+
+<style scoped>
+#bg {
+  background: url("/assets/login_bg.png") center center;
+  background-size: cover;
+}
+#version {
+  text-shadow:
+    1px 1px 1px #000000,
+    0 0 1px #000000;
+  bottom: 0.3rem;
+  right: 0.5rem;
+}
+</style>
diff --git a/frontend/src/layouts/Main.vue b/frontend/src/layouts/Main.vue
new file mode 100644
index 000000000..6802677c1
--- /dev/null
+++ b/frontend/src/layouts/Main.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import EditUserDialog from "@/components/Settings/Administration/Users/Dialog/EditUser.vue";
+import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
+import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
+import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
+import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
+import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
+import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
+import NewVersionDialog from "@/components/common/NewVersionDialog.vue";
+import Notification from "@/components/common/Notifications/Notification.vue";
+import UploadProgress from "@/components/common/Notifications/UploadProgress.vue";
+import SearchCoverDialog from "@/components/common/SearchCover.vue";
+import ViewLoader from "@/components/common/ViewLoader.vue";
+import router from "@/plugins/router";
+import collectionApi from "@/services/api/collection";
+import api from "@/services/api/index";
+import platformApi from "@/services/api/platform";
+import userApi from "@/services/api/user";
+import storeAuth from "@/stores/auth";
+import storeCollections from "@/stores/collections";
+import storeConfig from "@/stores/config";
+import storeHeartbeat from "@/stores/heartbeat";
+import storeNavigation from "@/stores/navigation";
+import storePlatforms from "@/stores/platforms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, onBeforeMount } from "vue";
+
+// Props
+const heartbeat = storeHeartbeat();
+const configStore = storeConfig();
+const navigationStore = storeNavigation();
+const auth = storeAuth();
+const platformsStore = storePlatforms();
+const collectionsStore = storeCollections();
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("refreshDrawer", async () => {
+  const { data: platformData } = await platformApi.getPlatforms();
+  platformsStore.set(platformData);
+});
+
+// Functions
+onBeforeMount(async () => {
+  await api.get("/heartbeat").then(async ({ data: data }) => {
+    heartbeat.set(data);
+    if (heartbeat.value.SHOW_SETUP_WIZARD) {
+      router.push({ name: "setup" });
+    } else {
+      await userApi
+        .fetchCurrentUser()
+        .then(({ data: user }) => {
+          auth.setUser(user);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+
+      await api.get("/config").then(({ data: data }) => {
+        configStore.set(data);
+      });
+    }
+  });
+
+  await platformApi
+    .getPlatforms()
+    .then(({ data: platforms }) => {
+      platformsStore.set(platforms);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+  await collectionApi
+    .getCollections()
+    .then(({ data: collections }) => {
+      collectionsStore.set(collections);
+      collectionsStore.setFavCollection(
+        collections.find(
+          (collection) => collection.name.toLowerCase() === "favourites",
+        ),
+      );
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+  navigationStore.resetDrawers();
+});
+</script>
+
+<template>
+  <notification />
+
+  <main-app-bar />
+
+  <view-loader />
+  <router-view />
+
+  <match-rom-dialog />
+  <edit-rom-dialog />
+  <search-cover-dialog />
+  <add-roms-to-collection-dialog />
+  <remove-roms-from-collection-dialog />
+  <delete-rom-dialog />
+  <edit-user-dialog />
+
+  <new-version-dialog />
+  <upload-progress />
+</template>
diff --git a/frontend/src/layouts/Settings.vue b/frontend/src/layouts/Settings.vue
new file mode 100644
index 000000000..3e42fa4e5
--- /dev/null
+++ b/frontend/src/layouts/Settings.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import RFooter from "@/components/Settings/Footer.vue";
+</script>
+
+<template>
+  <router-view />
+  <r-footer />
+</template>
diff --git a/frontend/src/layouts/Settings/Interface.vue b/frontend/src/layouts/Settings/Interface.vue
deleted file mode 100644
index d2c0daf44..000000000
--- a/frontend/src/layouts/Settings/Interface.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import InterfaceOption from "@/components/Settings/InterfaceOption.vue";
-import RSection from "@/components/common/RSection.vue";
-import { isNull } from "lodash";
-import { computed, ref } from "vue";
-
-// Initializing refs from localStorage
-const storedGroupRoms = localStorage.getItem("settings.groupRoms");
-const groupRomsRef = ref(
-  isNull(storedGroupRoms) ? true : storedGroupRoms === "true",
-);
-
-const storedSiblings = localStorage.getItem("settings.showSiblings");
-const siblingsRef = ref(
-  isNull(storedSiblings) ? true : storedSiblings === "true",
-);
-
-const storedRegions = localStorage.getItem("settings.showRegions");
-const regionsRef = ref(isNull(storedRegions) ? true : storedRegions === "true");
-
-const storedLanguages = localStorage.getItem("settings.showLanguages");
-const languagesRef = ref(
-  isNull(storedLanguages) ? true : storedLanguages === "true",
-);
-
-const storedStatus = localStorage.getItem("settings.showStatus");
-const statusRef = ref(isNull(storedStatus) ? true : storedStatus === "true");
-
-// Functions to update localStorage
-const toggleGroupRoms = (value: boolean) => {
-  groupRomsRef.value = value;
-  localStorage.setItem("settings.groupRoms", value.toString());
-};
-
-const toggleSiblings = (value: boolean) => {
-  siblingsRef.value = value;
-  localStorage.setItem("settings.showSiblings", value.toString());
-};
-
-const toggleRegions = (value: boolean) => {
-  regionsRef.value = value;
-  localStorage.setItem("settings.showRegions", value.toString());
-};
-
-const toggleLanguages = (value: boolean) => {
-  languagesRef.value = value;
-  localStorage.setItem("settings.showLanguages", value.toString());
-};
-
-const toggleStatus = (value: boolean) => {
-  statusRef.value = value;
-  localStorage.setItem("settings.showStatus", value.toString());
-};
-
-const options = computed(() => [
-  {
-    title: "Group roms",
-    description: "Group versions of the same rom together in the gallery",
-    iconEnabled: "mdi-group",
-    iconDisabled: "mdi-ungroup",
-    model: groupRomsRef,
-    modelTrigger: toggleGroupRoms,
-  },
-  {
-    title: "Show siblings",
-    description:
-      'Show siblings count in the gallery when "Group roms" option is enabled',
-    iconEnabled: "mdi-account-group-outline",
-    iconDisabled: "mdi-account-outline",
-    model: siblingsRef,
-    disabled: !groupRomsRef.value,
-    modelTrigger: toggleSiblings,
-  },
-  {
-    title: "Show regions",
-    description: "Show region flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: regionsRef,
-    modelTrigger: toggleRegions,
-  },
-  {
-    title: "Show languages",
-    description: "Show language flags in the gallery",
-    iconEnabled: "mdi-flag-outline",
-    iconDisabled: "mdi-flag-off-outline",
-    model: languagesRef,
-    modelTrigger: toggleLanguages,
-  },
-  {
-    title: "Show status",
-    description:
-      "Show status icons in the gallery (backlogged, playing, completed, etc)",
-    iconEnabled: "mdi-check-circle-outline",
-    iconDisabled: "mdi-close-circle-outline",
-    model: statusRef,
-    modelTrigger: toggleStatus,
-  },
-]);
-</script>
-
-<template>
-  <r-section icon="mdi-palette-swatch-outline" title="Interface">
-    <template #content>
-      <v-row no-gutters>
-        <v-col cols="12" md="6" v-for="option in options" :key="option.title">
-          <interface-option
-            class="mx-2"
-            :disabled="option.disabled"
-            :title="option.title"
-            :description="option.description"
-            :icon="
-              option.model.value ? option.iconEnabled : option.iconDisabled
-            "
-            v-model="option.model.value"
-            @update:model-value="option.modelTrigger"
-          />
-        </v-col>
-      </v-row>
-    </template>
-  </r-section>
-</template>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 6ee4c59cb..e587c5181 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,17 +1,14 @@
 import { registerPlugins } from "@/plugins";
+import "@/styles/common.css";
 import "@/styles/fonts.css";
 import "@/styles/scrollbar.css";
-import "@/styles/common.css";
 import type { Events } from "@/types/emitter";
 import mitt from "mitt";
 import { createApp } from "vue";
-import App from "./App.vue";
+import App from "@/RomM.vue";
 
 const emitter = mitt<Events>();
-
 const app = createApp(App);
-
 registerPlugins(app);
-
 app.provide("emitter", emitter);
 app.mount("#app");
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index 52a8eaed4..f1c85bd89 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -4,74 +4,106 @@ import storeHeartbeat from "@/stores/heartbeat";
 
 const routes = [
   {
-    path: "/login",
-    name: "login",
-    component: () => import("@/views/Login.vue"),
+    path: "/setup",
+    name: "setupView",
+    component: () => import("@/layouts/Auth.vue"),
+    children: [
+      {
+        path: "",
+        name: "setup",
+        component: () => import("@/views/Auth/Setup.vue"),
+      },
+    ],
   },
   {
-    path: "/setup",
-    name: "setup",
-    component: () => import("@/views/Setup.vue"),
+    path: "/login",
+    name: "loginView",
+    component: () => import("@/layouts/Auth.vue"),
+    children: [
+      {
+        path: "",
+        name: "login",
+        component: () => import("@/views/Auth/Login.vue"),
+      },
+    ],
   },
   {
     path: "/",
-    name: "home",
-    component: () => import("@/views/Home.vue"),
+    name: "main",
+    component: () => import("@/layouts/Main.vue"),
     children: [
       {
-        path: "/",
-        name: "dashboard",
-        component: () => import("@/views/Dashboard.vue"),
+        path: "",
+        name: "home",
+        component: () => import("@/views/Home.vue"),
       },
       {
-        path: "/platform/:platform",
+        path: "platform/:platform",
         name: "platform",
         component: () => import("@/views/Gallery/Platform.vue"),
       },
       {
-        path: "/collection/:collection",
+        path: "collection/:collection",
         name: "collection",
         component: () => import("@/views/Gallery/Collection.vue"),
       },
       {
-        path: "/rom/:rom",
+        path: "rom/:rom",
         name: "rom",
         component: () => import("@/views/GameDetails.vue"),
       },
       {
-        path: "/rom/:rom/ejs",
+        path: "rom/:rom/ejs",
         name: "emulatorjs",
-        component: () => import("@/views/EmulatorJS/Base.vue"),
+        component: () => import("@/views/Player/EmulatorJS/Base.vue"),
       },
       {
-        path: "/rom/:rom/ruffle",
+        path: "rom/:rom/ruffle",
         name: "ruffle",
-        component: () => import("@/views/RuffleRS/Base.vue"),
+        component: () => import("@/views/Player/RuffleRS/Base.vue"),
       },
       {
-        path: "/scan",
+        path: "scan",
         name: "scan",
         component: () => import("@/views/Scan.vue"),
       },
       {
-        path: "/management",
-        name: "management",
-        component: () => import("@/views/Management.vue"),
+        path: "/user-interface",
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
+          {
+            path: "",
+            name: "userInterface",
+            component: () => import("@/views/Settings/UserInterface.vue"),
+          },
+        ],
       },
       {
-        path: "/settings",
-        name: "settings",
-        component: () => import("@/views/Settings.vue"),
+        path: "/library-management",
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
+          {
+            path: "",
+            name: "libraryManagement",
+            component: () => import("@/views/Settings/LibraryManagement.vue"),
+          },
+        ],
       },
       {
         path: "/administration",
-        name: "administration",
-        component: () => import("@/views/Administration.vue"),
+        component: () => import("@/layouts/Settings.vue"),
+        children: [
+          {
+            path: "",
+            name: "administration",
+            component: () => import("@/views/Settings/Administration.vue"),
+          },
+        ],
       },
       {
-        path: "/:pathMatch(.*)*",
+        path: ":pathMatch(.*)*",
         name: "noMatch",
-        component: () => import("@/views/Dashboard.vue"),
+        component: () => import("@/views/Home.vue"),
       },
     ],
   },
@@ -82,17 +114,17 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, _from, next) => {
+router.beforeEach(async (to, _from, next) => {
   const heartbeat = storeHeartbeat();
   if (to.name == "setup" && !heartbeat.value.SHOW_SETUP_WIZARD) {
-    next({ name: "dashboard" });
+    next({ name: "home" });
   } else {
     next();
   }
 });
 
 router.afterEach(() => {
-  // Scroll to top to avoid annoying behaviour in mobile
+  // Scroll to top to avoid annoying behaviour on mobile
   window.scrollTo({ top: 0, left: 0 });
 });
 
diff --git a/frontend/src/stores/navigation.ts b/frontend/src/stores/navigation.ts
index f948cf72a..aa4c4d86a 100644
--- a/frontend/src/stores/navigation.ts
+++ b/frontend/src/stores/navigation.ts
@@ -6,6 +6,7 @@ export default defineStore("navigation", {
     activeCollectionsDrawer: false,
     activeSettingsDrawer: false,
     activePlatformInfoDrawer: false,
+    activeCollectionInfoDrawer: false,
   }),
 
   actions: {
@@ -25,9 +26,13 @@ export default defineStore("navigation", {
       this.resetDrawersExcept("activePlatformInfoDrawer");
       this.activePlatformInfoDrawer = !this.activePlatformInfoDrawer;
     },
+    swtichActiveCollectionInfoDrawer() {
+      this.resetDrawersExcept("activeCollectionInfoDrawer");
+      this.activeCollectionInfoDrawer = !this.activeCollectionInfoDrawer;
+    },
     goHome() {
       this.resetDrawers();
-      this.$router.push({ name: "dashboard" });
+      this.$router.push({ name: "home" });
     },
     goScan() {
       this.resetDrawers();
@@ -38,6 +43,7 @@ export default defineStore("navigation", {
       this.activeCollectionsDrawer = false;
       this.activeSettingsDrawer = false;
       this.activePlatformInfoDrawer = false;
+      this.activeCollectionInfoDrawer = false;
     },
     resetDrawersExcept(drawer: string) {
       this.activePlatformsDrawer =
@@ -52,6 +58,10 @@ export default defineStore("navigation", {
         drawer === "activePlatformInfoDrawer"
           ? this.activePlatformInfoDrawer
           : false;
+      this.activeCollectionInfoDrawer =
+        drawer === "activeCollectionInfoDrawer"
+          ? this.activeCollectionInfoDrawer
+          : false;
     },
   },
 });
diff --git a/frontend/src/styles/common.css b/frontend/src/styles/common.css
index e754663f8..feee58f3c 100644
--- a/frontend/src/styles/common.css
+++ b/frontend/src/styles/common.css
@@ -8,6 +8,9 @@ body {
     1px 1px 3px #000000,
     0 0 3px #000000 !important;
 }
+.v-progress-linear {
+  z-index: 9999 !important;
+}
 .translucent {
   backdrop-filter: blur(3px) !important;
   text-shadow:
@@ -66,14 +69,3 @@ body {
 #main-app-bar ~ #gallery-app-bar {
   top: 45px !important;
 }
-/*
-Calculation to fix 100dvh:
-main-app-bar -> 45px
-gallery-app-bar -> 48px
-*/
-.fill-height-desktop {
-  height: calc(100dvh - 48px) !important;
-}
-.fill-height-mobile {
-  height: calc(100dvh - 45px - 48px) !important;
-}
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index f7ca33e13..e95f3b301 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -4,11 +4,6 @@ import type { Platform } from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { User } from "@/stores/users";
 
-export type UserItem = User & {
-  password: string;
-  avatar?: File;
-};
-
 export type SnackbarStatus = {
   id?: number;
   msg: string;
@@ -25,7 +20,7 @@ export type Events = {
   showRemoveFromCollectionDialog: SimpleRom[];
   showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
-  showSearchCoverDialog: string;
+  showSearchCoverDialog: { term: string; aspectRatio: number | null };
   updateUrlCover: string;
   showSearchRomDialog: null;
   showEditRomDialog: SimpleRom;
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
new file mode 100644
index 000000000..a05129b33
--- /dev/null
+++ b/frontend/src/types/user.d.ts
@@ -0,0 +1,4 @@
+export type UserItem = User & {
+  password: string;
+  avatar?: File;
+};
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index faee99ca9..642802ad4 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -3,6 +3,9 @@ import type { SimpleRom } from "@/stores/roms";
 import type { Heartbeat } from "@/stores/heartbeat";
 import type { RomUserStatus } from "@/__generated__";
 
+/**
+ * Views configuration object.
+ */
 export const views: Record<
   number,
   {
@@ -44,8 +47,17 @@ export const views: Record<
   },
 };
 
+/**
+ * Default path for user avatars.
+ */
 export const defaultAvatarPath = "/assets/default/user.png";
 
+/**
+ * Normalize a string by converting it to lowercase and removing diacritics.
+ *
+ * @param s The string to normalize.
+ * @returns The normalized string.
+ */
 export function normalizeString(s: string) {
   return s
     .toLowerCase()
@@ -53,6 +65,12 @@ export function normalizeString(s: string) {
     .replace(/[\u0300-\u036f]/g, "");
 }
 
+/**
+ * Convert a cron expression to a human-readable string.
+ *
+ * @param expression The cron expression to convert.
+ * @returns The human-readable string.
+ */
 export function convertCronExperssion(expression: string) {
   let convertedExpression = cronstrue.toString(expression, { verbose: true });
   convertedExpression =
@@ -61,6 +79,13 @@ export function convertCronExperssion(expression: string) {
   return convertedExpression;
 }
 
+/**
+ * Generate a download link for ROM content.
+ *
+ * @param rom The ROM object.
+ * @param files Optional array of file names to include in the download.
+ * @returns The download link.
+ */
 export function getDownloadLink({
   rom,
   files = [],
@@ -82,8 +107,7 @@ export function getDownloadLink({
  *
  * @param bytes Number of bytes.
  * @param decimals Number of decimal places to display.
- *
- * @return Formatted string.
+ * @returns Formatted string.
  */
 export function formatBytes(bytes: number, decimals = 2) {
   if (bytes === 0) return "0 Bytes";
@@ -95,11 +119,10 @@ export function formatBytes(bytes: number, decimals = 2) {
 }
 
 /**
+ * Format a timestamp to a human-readable string.
  *
- * Format timestamp to human-readable text
- *
- * @param string timestamp
- * @returns string Formatted timestamp
+ * @param timestamp The timestamp to format.
+ * @returns The formatted timestamp.
  */
 export function formatTimestamp(timestamp: string | null) {
   if (!timestamp) return "-";
@@ -108,6 +131,12 @@ export function formatTimestamp(timestamp: string | null) {
   return date.toLocaleString("en-GB");
 }
 
+/**
+ * Convert a region code to an emoji.
+ *
+ * @param region The region code.
+ * @returns The corresponding emoji.
+ */
 export function regionToEmoji(region: string) {
   switch (region.toLowerCase()) {
     case "as":
@@ -203,6 +232,12 @@ export function regionToEmoji(region: string) {
   }
 }
 
+/**
+ * Convert a language code to an emoji.
+ *
+ * @param language The language code.
+ * @returns The corresponding emoji.
+ */
 export function languageToEmoji(language: string) {
   switch (language.toLowerCase()) {
     case "ar":
@@ -264,6 +299,9 @@ export function languageToEmoji(language: string) {
   }
 }
 
+/**
+ * Map of supported EJS cores for each platform.
+ */
 const _EJS_CORES_MAP = {
   "3do": ["opera"],
   amiga: ["puae"],
@@ -343,10 +381,23 @@ const _EJS_CORES_MAP = {
 
 export type EJSPlatformSlug = keyof typeof _EJS_CORES_MAP;
 
+/**
+ * Get the supported EJS cores for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @returns An array of supported cores.
+ */
 export function getSupportedEJSCores(platformSlug: string) {
   return _EJS_CORES_MAP[platformSlug.toLowerCase() as EJSPlatformSlug] || [];
 }
 
+/**
+ * Check if EJS emulation is supported for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @param heartbeat The heartbeat object.
+ * @returns True if supported, false otherwise.
+ */
 export function isEJSEmulationSupported(
   platformSlug: string,
   heartbeat: Heartbeat,
@@ -357,6 +408,13 @@ export function isEJSEmulationSupported(
   );
 }
 
+/**
+ * Check if Ruffle emulation is supported for a given platform.
+ *
+ * @param platformSlug The platform slug.
+ * @param heartbeat The heartbeat object.
+ * @returns True if supported, false otherwise.
+ */
 export function isRuffleEmulationSupported(
   platformSlug: string,
   heartbeat: Heartbeat,
@@ -369,6 +427,9 @@ export function isRuffleEmulationSupported(
 
 type PlayingStatus = RomUserStatus | "backlogged" | "now_playing" | "hidden";
 
+/**
+ * Array of difficulty emojis.
+ */
 export const difficultyEmojis = [
   "😴",
   "🥱",
@@ -382,6 +443,9 @@ export const difficultyEmojis = [
   "😵",
 ];
 
+/**
+ * Map of ROM statuses to their corresponding emoji and text.
+ */
 export const romStatusMap: Record<
   PlayingStatus,
   { emoji: string; text: string }
@@ -396,10 +460,19 @@ export const romStatusMap: Record<
   hidden: { emoji: "👻", text: "Hidden" },
 };
 
+/**
+ * Inverse map of ROM statuses from text to status key.
+ */
 const inverseRomStatusMap = Object.fromEntries(
   Object.entries(romStatusMap).map(([key, value]) => [value.text, key]),
 ) as Record<string, PlayingStatus>;
 
+/**
+ * Get the emoji for a given ROM status.
+ *
+ * @param status The ROM status.
+ * @returns The corresponding emoji.
+ */
 export function getEmojiForStatus(status: PlayingStatus) {
   if (status) {
     return romStatusMap[status].emoji;
@@ -408,6 +481,12 @@ export function getEmojiForStatus(status: PlayingStatus) {
   }
 }
 
+/**
+ * Get the text for a given ROM status.
+ *
+ * @param status The ROM status.
+ * @returns The corresponding text.
+ */
 export function getTextForStatus(status: PlayingStatus) {
   if (status) {
     return romStatusMap[status].text;
@@ -416,6 +495,12 @@ export function getTextForStatus(status: PlayingStatus) {
   }
 }
 
+/**
+ * Get the status key for a given text.
+ *
+ * @param text The text to convert.
+ * @returns The corresponding status key.
+ */
 export function getStatusKeyForText(text: string) {
   return inverseRomStatusMap[text];
 }
diff --git a/frontend/src/views/Auth/Login.vue b/frontend/src/views/Auth/Login.vue
new file mode 100644
index 000000000..da11ce94e
--- /dev/null
+++ b/frontend/src/views/Auth/Login.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import identityApi from "@/services/api/identity";
+import { refetchCSRFToken } from "@/services/api/index";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useRouter } from "vue-router";
+
+// Props
+const emitter = inject<Emitter<Events>>("emitter");
+const router = useRouter();
+const username = ref("");
+const password = ref("");
+const visiblePassword = ref(false);
+const logging = ref(false);
+
+// Functions
+async function login() {
+  logging.value = true;
+
+  await identityApi
+    .login(username.value, password.value)
+    .then(async () => {
+      await refetchCSRFToken();
+      const params = new URLSearchParams(window.location.search);
+      router.push(params.get("next") ?? "/");
+    })
+    .catch(({ response, message }) => {
+      const errorMessage =
+        response.data?.detail ||
+        response.data ||
+        message ||
+        response.statusText;
+      emitter?.emit("snackbarShow", {
+        msg: `Unable to login: ${errorMessage}`,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      console.error(
+        `[${response.status} ${response.statusText}] ${errorMessage}`,
+      );
+    })
+    .finally(() => {
+      logging.value = false;
+    });
+}
+</script>
+
+<template>
+  <v-card class="translucent-dark py-8 px-5" width="500">
+    <v-img src="/assets/isotipo.svg" class="mx-auto" width="150" />
+    <v-row class="text-white justify-center mt-2" no-gutters>
+      <v-col cols="10">
+        <v-form @submit.prevent="login">
+          <v-text-field
+            v-model="username"
+            label="Username"
+            type="text"
+            required
+            autocomplete="on"
+            prepend-inner-icon="mdi-account"
+            variant="underlined"
+          />
+          <v-text-field
+            v-model="password"
+            label="Password"
+            :type="visiblePassword ? 'text' : 'password'"
+            required
+            autocomplete="on"
+            prepend-inner-icon="mdi-lock"
+            :append-inner-icon="visiblePassword ? 'mdi-eye-off' : 'mdi-eye'"
+            @click:append-inner="visiblePassword = !visiblePassword"
+            variant="underlined"
+          />
+          <v-btn
+            type="submit"
+            class="bg-terciary"
+            block
+            :loading="logging"
+            :disabled="logging || !username || !password"
+            :variant="!username || !password ? 'text' : 'flat'"
+          >
+            <span>Login</span>
+            <template #append>
+              <v-icon class="text-romm-accent-1"
+                >mdi-chevron-right-circle-outline</v-icon
+              >
+            </template>
+            <template #loader>
+              <v-progress-circular
+                color="romm-accent-1"
+                :width="2"
+                :size="20"
+                indeterminate
+              />
+            </template>
+          </v-btn>
+        </v-form>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
diff --git a/frontend/src/views/Auth/Setup.vue b/frontend/src/views/Auth/Setup.vue
new file mode 100644
index 000000000..8fecf8f5f
--- /dev/null
+++ b/frontend/src/views/Auth/Setup.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import router from "@/plugins/router";
+import { refetchCSRFToken } from "@/services/api/index";
+import userApi from "@/services/api/user";
+import storeHeartbeat from "@/stores/heartbeat";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { computed, inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { xs } = useDisplay();
+const emitter = inject<Emitter<Events>>("emitter");
+const heartbeat = storeHeartbeat();
+const visiblePassword = ref(false);
+// Use a computed property to reactively update metadataOptions based on heartbeat
+const metadataOptions = computed(() => [
+  {
+    name: "IGDB",
+    value: "igdb",
+    logo_path: "/assets/scrappers/igdb.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.IGDB_API_ENABLED,
+  },
+  {
+    name: "MobyGames",
+    value: "moby",
+    logo_path: "/assets/scrappers/moby.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.MOBY_API_ENABLED,
+  },
+  {
+    name: "SteamgridDB",
+    value: "sgdb",
+    logo_path: "/assets/scrappers/sgdb.png",
+    disabled: !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED,
+  },
+]);
+const defaultAdminUser = ref({
+  username: "",
+  password: "",
+  role: "admin",
+});
+const step = ref(1); // 1: Create admin user, 2: Check metadata sources, 3: Finish
+const filledAdminUser = computed(
+  () =>
+    defaultAdminUser.value.username != "" &&
+    defaultAdminUser.value.password != "",
+);
+const isFirstStep = computed(() => step.value == 1);
+const isLastStep = computed(() => step.value == 2);
+
+// Functions
+async function finishWizard() {
+  await userApi
+    .createUser(defaultAdminUser.value)
+    .then(async () => {
+      await refetchCSRFToken();
+      router.push({ name: "login" });
+    })
+    .catch(({ response, message }) => {
+      emitter?.emit("snackbarShow", {
+        msg: `Unable to create user: ${
+          response?.data?.detail || response?.statusText || message
+        }`,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+    });
+}
+</script>
+
+<template>
+  <v-card class="translucent-dark px-3" width="700">
+    <v-img src="/assets/isotipo.svg" class="mx-auto mt-6" width="70" />
+    <v-stepper :mobile="xs" class="bg-transparent" v-model="step" flat>
+      <template #default="{ prev, next }">
+        <v-stepper-header>
+          <v-stepper-item :value="1">
+            <template #title>
+              <span class="text-white text-shadow">Create an admin user</span>
+            </template>
+          </v-stepper-item>
+
+          <v-divider></v-divider>
+
+          <v-stepper-item :value="2">
+            <template #title>
+              <span class="text-white text-shadow">Check metadata sources</span>
+            </template>
+          </v-stepper-item>
+        </v-stepper-header>
+
+        <v-stepper-window>
+          <v-stepper-window-item :value="1" :key="1">
+            <v-row no-gutters>
+              <v-col>
+                <v-row v-if="xs" no-gutters class="text-center">
+                  <v-col>
+                    <span>Create an admin user</span>
+                  </v-col>
+                </v-row>
+                <v-row class="text-white justify-center mt-3" no-gutters>
+                  <v-col cols="10" md="8">
+                    <v-form @submit.prevent>
+                      <v-text-field
+                        v-model="defaultAdminUser.username"
+                        label="Username"
+                        type="text"
+                        required
+                        autocomplete="on"
+                        prepend-inner-icon="mdi-account"
+                        variant="underlined"
+                      />
+                      <v-text-field
+                        v-model="defaultAdminUser.password"
+                        label="Password"
+                        :type="visiblePassword ? 'text' : 'password'"
+                        required
+                        autocomplete="on"
+                        prepend-inner-icon="mdi-lock"
+                        :append-inner-icon="
+                          visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
+                        "
+                        @click:append-inner="visiblePassword = !visiblePassword"
+                        variant="underlined"
+                      />
+                    </v-form>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-stepper-window-item>
+
+          <v-stepper-window-item :value="2" :key="2">
+            <v-row no-gutters>
+              <v-col>
+                <v-row v-if="xs" no-gutters class="text-center mb-6">
+                  <v-col>
+                    <span>Check metadata sources</span>
+                  </v-col>
+                </v-row>
+                <v-row class="justify-center align-center" no-gutters>
+                  <v-col :max-width="300" id="sources">
+                    <v-list-item
+                      v-for="source in metadataOptions"
+                      class="text-white text-shadow"
+                      :title="source.name"
+                      :subtitle="
+                        source.disabled ? 'API key missing or invalid' : ''
+                      "
+                    >
+                      <template #prepend>
+                        <v-avatar size="30" rounded="1">
+                          <v-img :src="source.logo_path" />
+                        </v-avatar>
+                      </template>
+                      <template #append>
+                        <span class="ml-2" v-if="source.disabled">❌</span>
+                        <span class="ml-2" v-else>✅</span>
+                      </template>
+                    </v-list-item>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-stepper-window-item>
+        </v-stepper-window>
+
+        <v-stepper-actions :disabled="!filledAdminUser">
+          <template #prev>
+            <v-btn
+              class="text-white text-shadow"
+              :ripple="false"
+              :disabled="isFirstStep"
+              @click="prev"
+            >
+              {{ isFirstStep ? "" : "previous" }}
+            </v-btn>
+          </template>
+          <template #next>
+            <v-btn
+              class="text-white text-shadow"
+              @click="!isLastStep ? next() : finishWizard()"
+            >
+              {{ !isLastStep ? "Next" : "Finish" }}
+            </v-btn>
+          </template>
+        </v-stepper-actions>
+      </template>
+    </v-stepper>
+  </v-card>
+</template>
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
deleted file mode 100644
index ad0814bac..000000000
--- a/frontend/src/views/Dashboard.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import Collections from "@/layouts/Dashboard/Collections.vue";
-import Platforms from "@/layouts/Dashboard/Platforms.vue";
-import recentlyAdded from "@/layouts/Dashboard/Recent.vue";
-import Stats from "@/layouts/Dashboard/Stats.vue";
-import romApi from "@/services/api/rom";
-import storeCollections from "@/stores/collections";
-import storePlatforms from "@/stores/platforms";
-import storeRoms from "@/stores/roms";
-import { storeToRefs } from "pinia";
-import { onMounted } from "vue";
-
-// Props
-const romsStore = storeRoms();
-const { recentRoms } = storeToRefs(romsStore);
-const platforms = storePlatforms();
-const { filledPlatforms } = storeToRefs(platforms);
-const collections = storeCollections();
-const { allCollections } = storeToRefs(collections);
-
-// Functions
-onMounted(async () => {
-  await romApi
-    .getRecentRoms()
-    .then(({ data: recentData }) => {
-      romsStore.setRecentRoms(recentData);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-});
-</script>
-
-<template>
-  <stats />
-  <recently-added v-if="recentRoms.length > 0" />
-  <platforms v-if="filledPlatforms.length > 0" />
-  <collections v-if="allCollections.length > 0" />
-</template>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 519eb21c0..03d7467ea 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -287,16 +287,11 @@ onBeforeUnmount(() => {
   <template v-if="!noCollectionError">
     <gallery-app-bar-collection />
     <template v-if="filteredRoms.length > 0">
-      <v-row
-        no-gutters
-        class="overflow-hidden align-center"
-        :class="{ 'pa-1': currentView != 2 }"
-      >
+      <v-row v-show="currentView != 2" class="pa-1" no-gutters>
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
           v-for="rom in filteredRoms.slice(0, itemsShown)"
-          v-show="currentView != 2"
           :key="rom.id"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
@@ -309,13 +304,13 @@ onBeforeUnmount(() => {
             :key="rom.updated_at"
             :rom="rom"
             title-on-hover
-            pointerOnHover
-            withLink
+            pointer-on-hover
+            with-link
             show-flags
             show-action-bar
+            show-fav
             transform-scale
             with-border
-            show-fav
             show-platform-icon
             :with-border-romm-accent="
               romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
@@ -325,16 +320,11 @@ onBeforeUnmount(() => {
             @touchend="onGameTouchEnd"
           />
         </v-col>
+      </v-row>
 
-        <!-- Gallery list view -->
-        <v-col v-show="currentView == 2">
-          <game-data-table
-            :class="{
-              'fill-height-desktop': !smAndDown,
-              'fill-height-mobile': smAndDown,
-            }"
-          />
-        </v-col>
+      <!-- Gallery list view -->
+      <v-row v-show="currentView == 2" class="h-100" no-gutters>
+        <game-data-table class="fill-height" />
       </v-row>
       <fab-overlay />
     </template>
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index a10351305..e0fbebbb0 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -43,6 +43,7 @@ let timeout: ReturnType<typeof setTimeout>;
 const emitter = inject<Emitter<Events>>("emitter");
 emitter?.on("filter", onFilterChange);
 
+// Functions
 async function fetchRoms() {
   if (gettingRoms.value) return;
 
@@ -303,16 +304,11 @@ onBeforeUnmount(() => {
   <template v-if="!noPlatformError">
     <gallery-app-bar />
     <template v-if="filteredRoms.length > 0">
-      <v-row
-        no-gutters
-        class="overflow-hidden"
-        :class="{ 'pa-1': currentView != 2 }"
-      >
+      <v-row v-show="currentView != 2" class="pa-1" no-gutters>
         <!-- Gallery cards view -->
         <!-- v-show instead of v-if to avoid recalculate on view change -->
         <v-col
           v-for="rom in filteredRoms.slice(0, itemsShown)"
-          v-show="currentView != 2"
           :key="rom.id"
           class="pa-1 align-self-end"
           :cols="views[currentView]['size-cols']"
@@ -326,8 +322,8 @@ onBeforeUnmount(() => {
             :key="rom.updated_at"
             :rom="rom"
             title-on-hover
-            pointerOnHover
-            withLink
+            pointer-on-hover
+            with-link
             show-flags
             show-action-bar
             show-fav
@@ -341,16 +337,11 @@ onBeforeUnmount(() => {
             @touchend="onGameTouchEnd"
           />
         </v-col>
+      </v-row>
 
-        <!-- Gallery list view -->
-        <v-col v-show="currentView == 2">
-          <game-data-table
-            :class="{
-              'fill-height-desktop': !smAndDown,
-              'fill-height-mobile': smAndDown,
-            }"
-          />
-        </v-col>
+      <!-- Gallery list view -->
+      <v-row v-show="currentView == 2" class="h-100" no-gutters>
+        <game-data-table class="h-100" />
       </v-row>
       <fab-overlay />
     </template>
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index de1a32fd2..347e77030 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -7,7 +7,6 @@ import GameInfo from "@/components/Details/Info/GameInfo.vue";
 import Personal from "@/components/Details/Personal.vue";
 import RelatedGames from "@/components/Details/RelatedGames.vue";
 import Saves from "@/components/Details/Saves.vue";
-import storePlatforms from "@/stores/platforms";
 import States from "@/components/Details/States.vue";
 import TitleInfo from "@/components/Details/Title.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
@@ -37,7 +36,6 @@ const { smAndDown, mdAndDown, mdAndUp, lgAndUp } = useDisplay();
 const emitter = inject<Emitter<Events>>("emitter");
 const noRomError = ref(false);
 const romsStore = storeRoms();
-const platfotmsStore = storePlatforms();
 const { currentRom, gettingRoms } = storeToRefs(romsStore);
 
 async function fetchDetails() {
@@ -89,63 +87,36 @@ watch(
   <template v-if="currentRom && !gettingRoms">
     <background-header />
 
-    <v-row
-      class="px-5"
-      :class="{
-        'ml-6': mdAndUp,
-        'justify-center': smAndDown,
-      }"
-      no-gutters
-    >
-      <v-col
-        class="cover"
-        :class="{
-          'cover-desktop': mdAndUp,
-        }"
-        :style="
-          smAndDown
-            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
-              ? 'margin-top: -220px;'
-              : 'margin-top: -280px;'
-            : ''
-        "
-      >
-        <game-card :key="currentRom.updated_at" :rom="currentRom" />
-        <action-bar class="mt-2" :rom="currentRom" />
-        <related-games v-if="mdAndUp" class="mt-3" :rom="currentRom" />
+    <v-row class="px-5" no-gutters :class="{ 'justify-center': smAndDown }">
+      <v-col cols="auto">
+        <v-container :width="270" id="artwork-container" class="pa-0">
+          <game-card
+            :show-not-identified="false"
+            :key="currentRom.updated_at"
+            :rom="currentRom"
+          />
+          <action-bar class="mt-2" :rom="currentRom" />
+          <related-games v-if="mdAndUp" class="mt-4" :rom="currentRom" />
+        </v-container>
       </v-col>
 
-      <v-col
-        cols="12"
-        md="8"
-        class="px-5"
-        :class="{
-          'info-lg': mdAndUp,
-        }"
-        :style="
-          smAndDown
-            ? platfotmsStore.getAspectRatio(currentRom.platform_id) == 1 / 1
-              ? 'margin-top: -40px;'
-              : 'margin-top: 100px;'
-            : ''
-        "
-      >
+      <v-col>
         <div
-          class="px-3 pb-3"
-          :class="{
-            'position-absolute title-desktop': mdAndUp,
-            'justify-center': smAndDown,
-          }"
+          class="ml-4"
+          :class="{ 'position-absolute title-desktop': mdAndUp }"
         >
           <title-info :rom="currentRom" />
         </div>
         <v-row
-          :class="{
-            'justify-center': smAndDown,
-          }"
+          :class="{ 'px-4': mdAndUp, 'justify-center': smAndDown }"
           no-gutters
         >
-          <v-tabs v-model="tab" slider-color="romm-accent-1" rounded="0">
+          <v-tabs
+            v-model="tab"
+            slider-color="romm-accent-1"
+            :class="{ 'mt-4': smAndDown }"
+            rounded="0"
+          >
             <v-tab value="details" rounded="0"> Details </v-tab>
             <v-tab value="saves" rounded="0"> Saves </v-tab>
             <v-tab value="states" rounded="0"> States </v-tab>
@@ -176,12 +147,10 @@ watch(
               Related Games
             </v-tab>
           </v-tabs>
-        </v-row>
-        <v-row no-gutters class="mb-4">
-          <v-col cols="12">
+          <v-col cols="12" class="px-2">
             <v-window disabled v-model="tab" class="py-2">
               <v-window-item value="details">
-                <v-row no-gutters :class="{ 'mx-2': mdAndUp }">
+                <v-row no-gutters>
                   <v-col>
                     <file-info :rom="currentRom" />
                     <game-info :rom="currentRom" />
@@ -227,11 +196,11 @@ watch(
         </v-row>
       </v-col>
 
-      <template v-if="lgAndUp">
-        <v-col>
-          <additional-content :rom="currentRom" />
-        </v-col>
-      </template>
+      <v-col cols="auto" v-if="lgAndUp">
+        <v-container :width="270" class="pa-0">
+          <additional-content class="mt-2" :rom="currentRom" />
+        </v-container>
+      </v-col>
     </v-row>
   </template>
 
@@ -239,20 +208,10 @@ watch(
 </template>
 
 <style scoped>
-.cover {
-  min-width: 270px;
-  min-height: 360px;
-  max-width: 270px;
-  max-height: 360px;
-}
-.cover-desktop {
-  margin-top: -230px;
-}
 .title-desktop {
   margin-top: -190px;
-  margin-left: -20px;
 }
-.info-mobile {
-  margin-top: 100px;
+#artwork-container {
+  margin-top: -230px;
 }
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index a139734b4..9b2a5b1ae 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,122 +1,49 @@
 <script setup lang="ts">
-import CreateUserDialog from "@/components/Administration/Users/Dialog/CreateUser.vue";
-import DeleteUserDialog from "@/components/Administration/Users/Dialog/DeleteUser.vue";
-import EditUserDialog from "@/components/Administration/Users/Dialog/EditUser.vue";
-import CreateExclusionDialog from "@/components/Management/Dialog/CreateExclusion.vue";
-import CreatePlatformBindingDialog from "@/components/Management/Dialog/CreatePlatformBinding.vue";
-import CreatePlatformVersionDialog from "@/components/Management/Dialog/CreatePlatformVersion.vue";
-import DeletePlatformBindingDialog from "@/components/Management/Dialog/DeletePlatformBinding.vue";
-import DeletePlatformVersionDialog from "@/components/Management/Dialog/DeletePlatformVersion.vue";
-import AddRomsToCollectionDialog from "@/components/common/Collection/Dialog/AddRoms.vue";
-import CreateCollectionDialog from "@/components/common/Collection/Dialog/CreateCollection.vue";
-import DeleteCollectionDialog from "@/components/common/Collection/Dialog/DeleteCollection.vue";
-import EditCollectionDialog from "@/components/common/Collection/Dialog/EditCollection.vue";
-import RemoveRomsFromCollectionDialog from "@/components/common/Collection/Dialog/RemoveRoms.vue";
-import DeleteAssetDialog from "@/components/common/Game/Dialog/Asset/DeleteAssets.vue";
-import CopyRomDownloadLinkDialog from "@/components/common/Game/Dialog/CopyDownloadLink.vue";
-import DeleteRomDialog from "@/components/common/Game/Dialog/DeleteRom.vue";
-import EditRomDialog from "@/components/common/Game/Dialog/EditRom.vue";
-import MatchRomDialog from "@/components/common/Game/Dialog/MatchRom.vue";
-import SearchRomDialog from "@/components/common/Game/Dialog/SearchRom.vue";
-import UploadRomDialog from "@/components/common/Game/Dialog/UploadRom.vue";
-import LoadingView from "@/components/common/LoadingView.vue";
-import CollectionsDrawer from "@/components/common/Navigation/CollectionsDrawer.vue";
-import MainAppBar from "@/components/common/Navigation/MainAppBar.vue";
-import MainDrawer from "@/components/common/Navigation/MainDrawer.vue";
-import PlatformsDrawer from "@/components/common/Navigation/PlatformsDrawer.vue";
-import SettingsDrawer from "@/components/common/Navigation/SettingsDrawer.vue";
-import NewVersion from "@/components/common/NewVersion.vue";
-import DeletePlatformDialog from "@/components/common/Platform/Dialog/DeletePlatform.vue";
-import SearchCoverDialog from "@/components/common/SearchCover.vue";
-import collectionApi from "@/services/api/collection";
-import platformApi from "@/services/api/platform";
-import storeAuth from "@/stores/auth";
+import Collections from "@/components/Home/Collections.vue";
+import Platforms from "@/components/Home/Platforms.vue";
+import RecentlyAdded from "@/components/Home/Recent.vue";
+import Stats from "@/components/Home/Stats.vue";
+import romApi from "@/services/api/rom";
 import storeCollections from "@/stores/collections";
-import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { inject, onBeforeMount } from "vue";
-import { useDisplay } from "vuetify";
+import storeRoms from "@/stores/roms";
+import { storeToRefs } from "pinia";
+import { onMounted } from "vue";
+import { isNull } from "lodash";
 
 // Props
-const { smAndDown } = useDisplay();
-const navigationStore = storeNavigation();
-const auth = storeAuth();
-const platformsStore = storePlatforms();
-const collectionsStore = storeCollections();
-const emitter = inject<Emitter<Events>>("emitter");
-emitter?.on("refreshDrawer", async () => {
-  const { data: platformData } = await platformApi.getPlatforms();
-  platformsStore.set(platformData);
-});
-
-onBeforeMount(async () => {
-  await platformApi
-    .getPlatforms()
-    .then(({ data: platforms }) => {
-      platformsStore.set(platforms);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-  await collectionApi
-    .getCollections()
-    .then(({ data: collections }) => {
-      collectionsStore.set(collections);
-      collectionsStore.setFavCollection(
-        collections.find(
-          (collection) => collection.name.toLowerCase() === "favourites",
-        ),
-      );
+const romsStore = storeRoms();
+const { recentRoms } = storeToRefs(romsStore);
+const platforms = storePlatforms();
+const { filledPlatforms } = storeToRefs(platforms);
+const collections = storeCollections();
+const { allCollections } = storeToRefs(collections);
+const showRecentRoms = isNull(localStorage.getItem("settings.showRecentRoms"))
+  ? true
+  : localStorage.getItem("settings.showRecentRoms") === "true";
+const showPlatforms = isNull(localStorage.getItem("settings.showPlatforms"))
+  ? true
+  : localStorage.getItem("settings.showPlatforms") === "true";
+const showCollections = isNull(localStorage.getItem("settings.showCollections"))
+  ? true
+  : localStorage.getItem("settings.showCollections") === "true";
+
+// Functions
+onMounted(async () => {
+  await romApi
+    .getRecentRoms()
+    .then(({ data: recentData }) => {
+      romsStore.setRecentRoms(recentData);
     })
     .catch((error) => {
       console.error(error);
     });
-  navigationStore.resetDrawers();
 });
 </script>
 
 <template>
-  <main-drawer v-if="!smAndDown" />
-
-  <main-app-bar v-if="smAndDown" />
-
-  <platforms-drawer />
-
-  <collections-drawer />
-
-  <settings-drawer />
-
-  <new-version />
-  <router-view />
-
-  <delete-platform-dialog />
-  <create-collection-dialog />
-  <edit-collection-dialog />
-  <add-roms-to-collection-dialog />
-  <remove-roms-from-collection-dialog />
-  <delete-collection-dialog />
-  <search-rom-dialog />
-  <match-rom-dialog />
-  <search-cover-dialog />
-  <copy-rom-download-link-dialog />
-  <upload-rom-dialog />
-  <edit-rom-dialog />
-  <delete-rom-dialog />
-  <delete-asset-dialog />
-  <create-platform-binding-dialog />
-  <delete-platform-binding-dialog />
-  <create-platform-version-dialog />
-  <delete-platform-version-dialog />
-  <create-exclusion-dialog />
-  <create-user-dialog />
-  <edit-user-dialog />
-  <delete-user-dialog />
-  <loading-view />
+  <stats />
+  <recently-added v-if="recentRoms.length > 0 && showRecentRoms" />
+  <platforms v-if="filledPlatforms.length > 0 && showPlatforms" />
+  <collections v-if="allCollections.length > 0 && showCollections" />
 </template>
-<style scoped>
-.v-progress-linear {
-  z-index: 9999 !important;
-}
-</style>
diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
deleted file mode 100644
index ab89c816d..000000000
--- a/frontend/src/views/Login.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import identityApi from "@/services/api/identity";
-import { refetchCSRFToken } from "@/services/api/index";
-import storeHeartbeat from "@/stores/heartbeat";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { inject, ref } from "vue";
-import { useRouter } from "vue-router";
-
-// Props
-const heartbeatStore = storeHeartbeat();
-const emitter = inject<Emitter<Events>>("emitter");
-const router = useRouter();
-const username = ref("");
-const password = ref("");
-const visiblePassword = ref(false);
-const logging = ref(false);
-
-async function login() {
-  logging.value = true;
-
-  await identityApi
-    .login(username.value, password.value)
-    .then(async () => {
-      // Refetch CSRF token
-      await refetchCSRFToken();
-
-      const params = new URLSearchParams(window.location.search);
-      router.push(params.get("next") ?? "/");
-    })
-    .catch(({ response, message }) => {
-      const errorMessage =
-        response.data?.detail ||
-        response.data ||
-        message ||
-        response.statusText;
-
-      emitter?.emit("snackbarShow", {
-        msg: `Unable to login: ${errorMessage}`,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-
-      console.error(
-        `[${response.status} ${response.statusText}] ${errorMessage}`,
-      );
-    })
-    .finally(() => {
-      logging.value = false;
-    });
-}
-</script>
-
-<template>
-  <span id="bg" />
-
-  <v-container class="fill-height justify-center">
-    <v-card class="translucent-dark py-8 px-5" width="500">
-      <v-row no-gutters>
-        <v-col>
-          <v-img src="/assets/isotipo.svg" class="mx-auto" width="150" />
-
-          <v-row class="text-white justify-center mt-2" no-gutters>
-            <v-col cols="10" md="8">
-              <v-form @submit.prevent>
-                <v-text-field
-                  v-model="username"
-                  autocomplete="on"
-                  required
-                  prepend-inner-icon="mdi-account"
-                  type="text"
-                  label="Username"
-                  variant="underlined"
-                />
-                <v-text-field
-                  v-model="password"
-                  autocomplete="on"
-                  required
-                  prepend-inner-icon="mdi-lock"
-                  :type="visiblePassword ? 'text' : 'password'"
-                  label="Password"
-                  variant="underlined"
-                  :append-inner-icon="
-                    visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
-                  "
-                  @click:append-inner="visiblePassword = !visiblePassword"
-                />
-                <v-btn
-                  type="submit"
-                  :disabled="logging || !username || !password"
-                  :variant="!username || !password ? 'text' : 'flat'"
-                  class="bg-terciary"
-                  block
-                  :loading="logging"
-                  @click="login()"
-                >
-                  <span>Login</span>
-                  <template #append>
-                    <v-icon class="text-romm-accent-1"
-                      >mdi-chevron-right-circle-outline</v-icon
-                    >
-                  </template>
-                  <template #loader>
-                    <v-progress-circular
-                      color="romm-accent-1"
-                      :width="2"
-                      :size="20"
-                      indeterminate
-                    />
-                  </template>
-                </v-btn>
-              </v-form>
-            </v-col>
-          </v-row>
-        </v-col>
-      </v-row>
-    </v-card>
-
-    <div id="version" class="position-absolute">
-      <span class="text-white text-shadow">{{
-        heartbeatStore.value.VERSION
-      }}</span>
-    </div>
-  </v-container>
-</template>
-
-<style>
-#bg {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: url("/assets/login_bg.png") center center;
-  background-size: cover;
-}
-#version {
-  bottom: 0.3rem;
-  right: 0.5rem;
-}
-</style>
diff --git a/frontend/src/views/Management.vue b/frontend/src/views/Management.vue
deleted file mode 100644
index f3ed83279..000000000
--- a/frontend/src/views/Management.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import Excluded from "@/layouts/Management/Excluded.vue";
-import PlatformBinding from "@/layouts/Management/PlatformBinding.vue";
-import PlatformVersions from "@/layouts/Management/PlatformVersions.vue";
-</script>
-
-<template>
-  <platform-binding />
-  <platform-versions />
-  <excluded />
-</template>
diff --git a/frontend/src/views/EmulatorJS/Base.vue b/frontend/src/views/Player/EmulatorJS/Base.vue
similarity index 95%
rename from frontend/src/views/EmulatorJS/Base.vue
rename to frontend/src/views/Player/EmulatorJS/Base.vue
index 954aab42c..33a37a610 100644
--- a/frontend/src/views/EmulatorJS/Base.vue
+++ b/frontend/src/views/Player/EmulatorJS/Base.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { FirmwareSchema, SaveSchema, StateSchema } from "@/__generated__";
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import firmwareApi from "@/services/api/firmware";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
 import { formatBytes, formatTimestamp, getSupportedEJSCores } from "@/utils";
-import Player from "@/views/EmulatorJS/Player.vue";
+import Player from "@/views/Player/EmulatorJS/Player.vue";
 import { isNull } from "lodash";
 import { storeToRefs } from "pinia";
 import { onMounted, ref } from "vue";
@@ -131,19 +131,7 @@ onMounted(async () => {
             src="/assets/emulatorjs/powered_by_emulatorjs.png"
           />
           <v-divider class="my-4" />
-          <v-list-item class="px-2">
-            <template #prepend>
-              <r-avatar :rom="rom" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ rom.name }}</v-col></v-row
-            >
-            <v-row no-gutters
-              ><v-col class="text-romm-accent-1">{{
-                rom.file_name
-              }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="rom" with-filename />
           <v-divider class="my-4" />
           <v-select
             v-if="supportedCores.length > 1"
diff --git a/frontend/src/views/EmulatorJS/Player.vue b/frontend/src/views/Player/EmulatorJS/Player.vue
similarity index 100%
rename from frontend/src/views/EmulatorJS/Player.vue
rename to frontend/src/views/Player/EmulatorJS/Player.vue
diff --git a/frontend/src/views/RuffleRS/Base.vue b/frontend/src/views/Player/RuffleRS/Base.vue
similarity index 90%
rename from frontend/src/views/RuffleRS/Base.vue
rename to frontend/src/views/Player/RuffleRS/Base.vue
index 229a88737..abe7f1170 100644
--- a/frontend/src/views/RuffleRS/Base.vue
+++ b/frontend/src/views/Player/RuffleRS/Base.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import romApi from "@/services/api/rom";
 import storeGalleryView from "@/stores/galleryView";
 import type { DetailedRom } from "@/stores/roms";
@@ -96,24 +96,12 @@ onMounted(async () => {
             src="/assets/ruffle/powered_by_ruffle.png"
           />
           <v-divider class="my-4" />
-          <v-list-item class="px-2">
-            <template #prepend>
-              <r-avatar :rom="rom" />
-            </template>
-            <v-row no-gutters
-              ><v-col>{{ rom.name }}</v-col></v-row
-            >
-            <v-row no-gutters
-              ><v-col class="text-romm-accent-1">{{
-                rom.file_name
-              }}</v-col></v-row
-            >
-          </v-list-item>
+          <rom-list-item :rom="rom" with-filename />
+          <v-divider class="my-4" />
         </v-col>
       </v-row>
-      <v-row class="px-3 py-3 text-center" no-gutters>
+      <v-row class="px-3 text-center" no-gutters>
         <v-col>
-          <v-divider class="my-4" />
           <v-row class="align-center" no-gutters>
             <v-col>
               <v-btn
diff --git a/frontend/src/views/Scan.vue b/frontend/src/views/Scan.vue
index 95df10486..1168a5609 100644
--- a/frontend/src/views/Scan.vue
+++ b/frontend/src/views/Scan.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import RAvatar from "@/components/common/Game/RAvatar.vue";
+import RAvatarRom from "@/components/common/Game/RAvatar.vue";
+import RomListItem from "@/components/common/Game/ListItem.vue";
 import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import socket from "@/services/socket";
 import storeHeartbeat from "@/stores/heartbeat";
@@ -99,13 +100,14 @@ async function stopScan() {
   <v-row class="align-center pt-4 px-4" no-gutters>
     <!-- Platform selector -->
     <v-col cols="12" md="5" lg="6" class="px-1">
+      <!-- TODO: add 'ALL' default option -->
       <v-select
-        :menu-props="{ maxHeight: 650 }"
-        prepend-inner-icon="mdi-controller"
         v-model="platformsToScan"
+        :items="platforms.allPlatforms"
+        :menu-props="{ maxHeight: 650 }"
         label="Platforms"
         item-title="name"
-        :items="platforms.allPlatforms"
+        prepend-inner-icon="mdi-controller"
         variant="outlined"
         density="comfortable"
         multiple
@@ -116,8 +118,8 @@ async function stopScan() {
       >
         <template #item="{ props, item }">
           <v-list-item
-            class="py-4"
             v-bind="props"
+            class="py-4"
             :title="item.raw.name ?? ''"
             :subtitle="item.raw.fs_slug"
           >
@@ -152,13 +154,13 @@ async function stopScan() {
     </v-col>
 
     <!-- Source options -->
-    <v-col class="px-1" cols="12" md="5" lg="4" :class="{ 'mt-3': smAndDown }">
+    <v-col cols="12" md="5" lg="4" class="px-1" :class="{ 'mt-3': smAndDown }">
       <v-select
-        prepend-inner-icon="mdi-database-search"
         v-model="metadataSources"
+        :items="metadataOptions"
         label="Metadata sources"
         item-title="name"
-        :items="metadataOptions"
+        prepend-inner-icon="mdi-database-search"
         variant="outlined"
         density="comfortable"
         multiple
@@ -195,16 +197,17 @@ async function stopScan() {
         </template>
       </v-select>
     </v-col>
+
     <!-- Scan options -->
-    <v-col class="px-1" cols="12" md="2" :class="{ 'mt-3': smAndDown }">
+    <v-col cols="12" md="2" class="px-1" :class="{ 'mt-3': smAndDown }">
       <v-select
-        prepend-inner-icon="mdi-magnify-scan"
         v-model="scanType"
+        :items="scanOptions"
+        label="Scan option"
+        prepend-inner-icon="mdi-magnify-scan"
         hide-details
         density="comfortable"
         variant="outlined"
-        label="Scan option"
-        :items="scanOptions"
       >
         <template #item="{ props, item }">
           <v-list-item v-bind="props" :subtitle="item.raw.subtitle" />
@@ -221,9 +224,9 @@ async function stopScan() {
   >
     <v-btn
       :disabled="scanning"
+      :loading="scanning"
       rounded="4"
       height="40"
-      :loading="scanning"
       @click="scan()"
     >
       <template #prepend>
@@ -258,11 +261,12 @@ async function stopScan() {
       rounded="4"
       height="40"
       class="ml-2"
-      :to="{ name: 'management' }"
+      :to="{ name: 'libraryManagement' }"
     >
       Manage
     </v-btn>
   </v-row>
+
   <v-row
     v-if="metadataSources.length == 0"
     no-gutters
@@ -292,7 +296,7 @@ async function stopScan() {
   >
     <v-card-text class="pa-0">
       <v-expansion-panels
-        :model-value="panels"
+        v-model="panels"
         multiple
         flat
         rounded="0"
@@ -326,28 +330,23 @@ async function stopScan() {
             </v-list-item>
           </v-expansion-panel-title>
           <v-expansion-panel-text class="bg-terciary">
-            <v-list-item
+            <rom-list-item
               v-for="rom in platform.roms"
-              :key="rom.id"
-              class="text-body-2 romm-grey px-10 py-2"
-              :to="{ name: 'rom', params: { rom: rom.id } }"
+              class="pa-4"
+              :rom="rom"
+              with-link
+              with-filename
             >
-              <template #prepend>
-                <r-avatar :rom="rom" />
-              </template>
-              <v-row no-gutters>
-                <span
-                  :class="{ 'text-romm-red': !rom.igdb_id && !rom.moby_id }"
-                  >{{ rom.name }}</span
+              <template #append-body>
+                <v-chip
+                  v-if="!rom.igdb_id && !rom.moby_id"
+                  color="red"
+                  size="x-small"
+                  label
+                  >Not identified<v-icon class="ml-1">mdi-close</v-icon></v-chip
                 >
-                <span v-if="!rom.igdb_id && !rom.moby_id" class="ml-1">❌</span>
-              </v-row>
-              <v-row no-gutters>
-                <v-col class="text-romm-accent-1">
-                  {{ rom.file_name }}
-                </v-col>
-              </v-row>
-            </v-list-item>
+              </template>
+            </rom-list-item>
             <v-list-item
               v-if="platform.roms.length == 0"
               class="text-center mt-2"
@@ -366,7 +365,8 @@ async function stopScan() {
     :elevation="0"
     height="40"
     class="text-caption align-center"
-    ><v-chip variant="outlined" color="terciary" class="px-1">
+  >
+    <v-chip variant="outlined" color="terciary" class="px-1">
       <v-icon class="text-white"> mdi-information </v-icon>
       <v-chip
         v-if="scanningPlatforms.length > 0"
@@ -376,10 +376,12 @@ async function stopScan() {
         class="ml-1 my-1"
       >
         <v-icon left>mdi-controller</v-icon>
-        <span>&nbsp;Platforms: {{ scanningPlatforms.length }} scanned</span>
+        <span clasS="ml-2"
+          >Platforms: {{ scanningPlatforms.length }} scanned</span
+        >
         <span v-if="!xs">, with {{ scanStats.added_platforms }} new</span>
         <span v-if="!xs"
-          >&nbsp;and {{ scanStats.metadata_platforms }} identified</span
+          >and {{ scanStats.metadata_platforms }} identified</span
         >
       </v-chip>
       <v-chip
@@ -390,7 +392,7 @@ async function stopScan() {
         class="ml-1 my-1"
       >
         <v-icon left> mdi-disc </v-icon>
-        <span>&nbsp; Roms: {{ scanStats.scanned_roms }} scanned</span>
+        <span class="ml-2">Roms: {{ scanStats.scanned_roms }} scanned</span>
         <span v-if="!xs">, with {{ scanStats.added_roms }} new</span>
         <span v-if="!xs"
           >&nbsp;and {{ scanStats.metadata_roms }} identified</span
@@ -399,3 +401,8 @@ async function stopScan() {
     </v-chip>
   </v-bottom-navigation>
 </template>
+<style lang="css">
+.v-expansion-panel-text__wrapper {
+  padding: 0px;
+}
+</style>
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
deleted file mode 100644
index 84411ceea..000000000
--- a/frontend/src/views/Settings.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import RFooter from "@/components/Settings/Footer.vue";
-import Interface from "@/layouts/Settings/Interface.vue";
-import Theme from "@/layouts/Settings/Theme.vue";
-
-// Props
-</script>
-<template>
-  <theme />
-  <interface />
-  <r-footer />
-</template>
diff --git a/frontend/src/views/Administration.vue b/frontend/src/views/Settings/Administration.vue
similarity index 58%
rename from frontend/src/views/Administration.vue
rename to frontend/src/views/Settings/Administration.vue
index 3e8f5abcf..34266b998 100644
--- a/frontend/src/views/Administration.vue
+++ b/frontend/src/views/Settings/Administration.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import UsersTable from "@/components/Administration/Users/Table.vue";
-import Tasks from "@/layouts/Administration/Tasks.vue";
+import UsersTable from "@/components/Settings/Administration/Users/Table.vue";
+import Tasks from "@/components/Settings/Administration/Tasks.vue";
 import storeAuth from "@/stores/auth";
 
 // Props
diff --git a/frontend/src/views/Settings/LibraryManagement.vue b/frontend/src/views/Settings/LibraryManagement.vue
new file mode 100644
index 000000000..3a7c6be2d
--- /dev/null
+++ b/frontend/src/views/Settings/LibraryManagement.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import Excluded from "@/components/Settings/LibraryManagement/Excluded.vue";
+import PlatformBinding from "@/components/Settings/LibraryManagement/PlatformBinding.vue";
+import PlatformVersions from "@/components/Settings/LibraryManagement/PlatformVersions.vue";
+</script>
+
+<template>
+  <platform-binding />
+  <platform-versions />
+  <excluded />
+</template>
diff --git a/frontend/src/views/Settings/UserInterface.vue b/frontend/src/views/Settings/UserInterface.vue
new file mode 100644
index 000000000..dc874d4f0
--- /dev/null
+++ b/frontend/src/views/Settings/UserInterface.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import Theme from "@/components/Settings/UserInterface/Theme.vue";
+import Interface from "@/components/Settings/UserInterface/Interface.vue";
+</script>
+<template>
+  <theme />
+  <interface />
+</template>
diff --git a/frontend/src/views/Setup.vue b/frontend/src/views/Setup.vue
deleted file mode 100644
index fad9421ec..000000000
--- a/frontend/src/views/Setup.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<script setup lang="ts">
-import router from "@/plugins/router";
-import { refetchCSRFToken } from "@/services/api/index";
-import userApi from "@/services/api/user";
-import storeHeartbeat from "@/stores/heartbeat";
-import type { Events } from "@/types/emitter";
-import type { Emitter } from "mitt";
-import { computed, inject, ref } from "vue";
-import { useDisplay } from "vuetify";
-
-// Props
-const { xs, smAndDown } = useDisplay();
-const emitter = inject<Emitter<Events>>("emitter");
-const heartbeat = storeHeartbeat();
-const visiblePassword = ref(false);
-// Use a computed property to reactively update metadataOptions based on heartbeat
-const metadataOptions = computed(() => [
-  {
-    name: "IGDB",
-    value: "igdb",
-    logo_path: "/assets/scrappers/igdb.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.IGDB_API_ENABLED,
-  },
-  {
-    name: "MobyGames",
-    value: "moby",
-    logo_path: "/assets/scrappers/moby.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.MOBY_API_ENABLED,
-  },
-  {
-    name: "SteamgridDB",
-    value: "sgdb",
-    logo_path: "/assets/scrappers/sgdb.png",
-    disabled: !heartbeat.value.METADATA_SOURCES?.STEAMGRIDDB_ENABLED,
-  },
-]);
-const defaultAdminUser = ref({
-  username: "",
-  password: "",
-  role: "admin",
-});
-const step = ref(1);
-const filledAdminUser = computed(
-  () =>
-    defaultAdminUser.value.username != "" &&
-    defaultAdminUser.value.password != "",
-);
-const isFirstStep = computed(() => step.value == 1);
-const isLastStep = computed(() => step.value == 2);
-
-async function finishWizard() {
-  await userApi
-    .createUser(defaultAdminUser.value)
-    .then(async () => {
-      await refetchCSRFToken();
-      router.push({ name: "login" });
-    })
-    .catch(({ response, message }) => {
-      emitter?.emit("snackbarShow", {
-        msg: `Unable to create user: ${
-          response?.data?.detail || response?.statusText || message
-        }`,
-        icon: "mdi-close-circle",
-        color: "red",
-      });
-    });
-}
-</script>
-
-<template>
-  <span id="bg" />
-
-  <v-container class="fill-height justify-center">
-    <v-card class="translucent-dark px-3" elevation="0">
-      <v-img src="/assets/isotipo.svg" class="mx-auto mt-4" width="70" />
-      <v-stepper
-        :mobile="smAndDown"
-        class="bg-transparent"
-        :width="xs ? '' : smAndDown ? 400 : 700"
-        max-width="700"
-        v-model="step"
-        flat
-      >
-        <template v-slot:default="{ prev, next }">
-          <v-stepper-header>
-            <v-stepper-item
-              class="text-white text-shadow"
-              title="Create an admin user"
-              :value="1"
-            ></v-stepper-item>
-
-            <v-divider></v-divider>
-
-            <v-stepper-item
-              class="text-white text-shadow"
-              title="Check metadata sources"
-              :value="2"
-            ></v-stepper-item>
-
-            <!-- <v-divider></v-divider> -->
-
-            <!-- <v-stepper-item title="Finish" :value="3"></v-stepper-item> -->
-          </v-stepper-header>
-
-          <v-stepper-window>
-            <v-stepper-window-item :value="1" :key="1">
-              <v-row no-gutters>
-                <v-col>
-                  <v-row v-if="smAndDown" no-gutters class="text-center mb-6">
-                    <v-col>
-                      <span>Create an admin user</span>
-                    </v-col>
-                  </v-row>
-                  <v-row class="text-white justify-center mt-3" no-gutters>
-                    <v-col cols="10" md="8">
-                      <v-form @submit.prevent>
-                        <v-text-field
-                          v-model="defaultAdminUser.username"
-                          required
-                          prepend-inner-icon="mdi-account"
-                          type="text"
-                          label="Username"
-                          variant="underlined"
-                        />
-                        <v-text-field
-                          v-model="defaultAdminUser.password"
-                          required
-                          prepend-inner-icon="mdi-lock"
-                          :type="visiblePassword ? 'text' : 'password'"
-                          label="Password"
-                          variant="underlined"
-                          :append-inner-icon="
-                            visiblePassword ? 'mdi-eye-off' : 'mdi-eye'
-                          "
-                          @click:append-inner="
-                            visiblePassword = !visiblePassword
-                          "
-                        />
-                      </v-form>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item>
-
-            <v-stepper-window-item :value="2" :key="2">
-              <v-row no-gutters>
-                <v-col>
-                  <v-row v-if="smAndDown" no-gutters class="text-center mb-6">
-                    <v-col>
-                      <span>Check metadata sources</span>
-                    </v-col>
-                  </v-row>
-                  <v-row class="justify-center align-center" no-gutters>
-                    <v-col id="sources">
-                      <v-list-item
-                        v-for="source in metadataOptions"
-                        class="text-white text-shadow"
-                        :title="source.name"
-                        :subtitle="
-                          source.disabled ? 'API key missing or invalid' : ''
-                        "
-                      >
-                        <template #prepend>
-                          <v-avatar size="30" rounded="1">
-                            <v-img :src="source.logo_path" />
-                          </v-avatar>
-                        </template>
-                        <template #append>
-                          <span class="ml-2" v-if="source.disabled">❌</span>
-                          <span class="ml-2" v-else>✅</span>
-                        </template>
-                      </v-list-item>
-                    </v-col>
-                  </v-row>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item>
-
-            <!-- <v-stepper-window-item :value="3" :key="3">
-              <v-row class="text-center" no-gutters>
-                <v-col>
-                  <span>Finished!</span>
-                </v-col>
-              </v-row>
-            </v-stepper-window-item> -->
-          </v-stepper-window>
-
-          <v-stepper-actions :disabled="!filledAdminUser">
-            <template #prev>
-              <v-btn
-                class="text-white text-shadow"
-                :ripple="false"
-                :disabled="isFirstStep"
-                @click="prev"
-                >{{ isFirstStep ? "" : "previous" }}</v-btn
-              >
-            </template>
-            <template #next>
-              <v-btn
-                class="text-white text-shadow"
-                @click="!isLastStep ? next() : finishWizard()"
-                >{{ !isLastStep ? "Next" : "Finish" }}</v-btn
-              >
-            </template>
-          </v-stepper-actions>
-        </template>
-      </v-stepper>
-    </v-card>
-
-    <div id="version" class="position-absolute">
-      <span class="text-white">{{ heartbeat.value.VERSION }}</span>
-    </div>
-  </v-container>
-</template>
-
-<style>
-#bg {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background: url("/assets/login_bg.png") center center;
-  background-size: cover;
-}
-#sources {
-  max-width: 300px;
-}
-#version {
-  text-shadow:
-    1px 1px 1px #000000,
-    0 0 1px #000000;
-  bottom: 0.3rem;
-  right: 0.5rem;
-}
-</style>