diff --git a/backend/alembic/versions/0022_collections_.py b/backend/alembic/versions/0022_collections_.py
index 351780eed..b67a3a0c8 100644
--- a/backend/alembic/versions/0022_collections_.py
+++ b/backend/alembic/versions/0022_collections_.py
@@ -24,7 +24,8 @@ def upgrade() -> None:
         sa.Column("id", sa.Integer(), autoincrement=True, nullable=False),
         sa.Column("name", sa.String(length=400), nullable=False),
         sa.Column("description", sa.Text(), nullable=True),
-        sa.Column("logo_path", sa.String(length=1000), nullable=True),
+        sa.Column("path_cover_l", sa.String(length=1000), nullable=True),
+        sa.Column("path_cover_s", sa.String(length=1000), nullable=True),
         sa.Column("roms", sa.JSON(), nullable=False),
         sa.Column("user_id", sa.Integer(), nullable=False),
         sa.Column("is_public", sa.Boolean(), nullable=False),
diff --git a/backend/endpoints/collections.py b/backend/endpoints/collections.py
index 1f0622a63..f6b39531c 100644
--- a/backend/endpoints/collections.py
+++ b/backend/endpoints/collections.py
@@ -1,11 +1,14 @@
 from decorators.auth import protected_route
 from endpoints.responses import MessageResponse
 from endpoints.responses.collection import CollectionSchema
-from exceptions.endpoint_exceptions import CollectionNotFoundInDatabaseException
+from exceptions.endpoint_exceptions import (
+    CollectionAlreadyExistsException,
+    CollectionNotFoundInDatabaseException,
+)
 from fastapi import APIRouter, Request
 from handler.database import db_collection_handler
-from handler.filesystem import fs_collection_handler
 from logger.logger import log
+from models.collection import Collection
 
 router = APIRouter()
 
@@ -22,11 +25,18 @@ async def add_collection(request: Request) -> CollectionSchema:
     """
 
     data = await request.json()
-    cleaned_data = {}
-    cleaned_data["name"] = data["name"]
-    cleaned_data["description"] = data["description"]
-    cleaned_data["user_id"] = request.user.id
-    return fs_collection_handler.add_collection(cleaned_data)
+    cleaned_data = {
+        "name": data["name"],
+        "description": data["description"],
+        "user_id": request.user.id,
+    }
+    collection_db = db_collection_handler.get_collection_by_name(
+        cleaned_data["name"], request.user.id
+    )
+    if collection_db:
+        raise CollectionAlreadyExistsException(cleaned_data["name"])
+    collection = Collection(**cleaned_data)
+    return db_collection_handler.add_collection(collection)
 
 
 @protected_route(router.get, "/collections", ["collections.read"])
@@ -41,7 +51,7 @@ def get_collections(request: Request) -> list[CollectionSchema]:
         list[CollectionSchema]: List of collections
     """
 
-    return db_collection_handler.get_collections()
+    return db_collection_handler.get_collections(user_id=request.user.id)
 
 
 @protected_route(router.get, "/collections/{id}", ["collections.read"])
diff --git a/backend/endpoints/platform.py b/backend/endpoints/platform.py
index 85b018451..b701e66b1 100644
--- a/backend/endpoints/platform.py
+++ b/backend/endpoints/platform.py
@@ -34,8 +34,7 @@ async def add_platforms(request: Request) -> PlatformSchema:
     except PlatformAlreadyExistsException:
         log.info(f"Detected platform: {fs_slug}")
     scanned_platform = scan_platform(fs_slug, [fs_slug])
-    platform = db_platform_handler.add_platform(scanned_platform)
-    return platform
+    return db_platform_handler.add_platform(scanned_platform)
 
 
 @protected_route(router.get, "/platforms", ["platforms.read"])
diff --git a/backend/endpoints/responses/collection.py b/backend/endpoints/responses/collection.py
index c6d5d8383..d6e8d15cc 100644
--- a/backend/endpoints/responses/collection.py
+++ b/backend/endpoints/responses/collection.py
@@ -7,8 +7,9 @@ class CollectionSchema(BaseModel):
     id: int
     name: str
     description: str
-    logo_path: str = ""
-    roms: set[int] = {}
+    path_cover_l: str | None
+    path_cover_s: str | None
+    roms: set[int]
     rom_count: int
     user_id: int
     user__username: str
diff --git a/backend/endpoints/rom.py b/backend/endpoints/rom.py
index 907afad42..f02e26c9e 100644
--- a/backend/endpoints/rom.py
+++ b/backend/endpoints/rom.py
@@ -94,6 +94,7 @@ def add_roms(
 def get_roms(
     request: Request,
     platform_id: int | None = None,
+    collection_id: int | None = None,
     search_term: str = "",
     limit: int | None = None,
     order_by: str = "name",
@@ -108,8 +109,10 @@ def get_roms(
     Returns:
         list[RomSchema]: List of roms stored in the database
     """
+
     db_roms = db_rom_handler.get_roms(
         platform_id=platform_id,
+        collection_id=collection_id,
         search_term=search_term.lower(),
         order_by=order_by.lower(),
         order_dir=order_dir.lower(),
diff --git a/backend/handler/auth/base_handler.py b/backend/handler/auth/base_handler.py
index 3127d0cf0..c2350aab1 100644
--- a/backend/handler/auth/base_handler.py
+++ b/backend/handler/auth/base_handler.py
@@ -24,6 +24,8 @@
     "firmware.read": "View firmware",
     "roms.user.read": "View user-rom properties",
     "roms.user.write": "Modify user-rom properties",
+    "collections.read": "View collections",
+    "collections.write": "Modify collections",
 }
 
 WRITE_SCOPES_MAP: Final = {
diff --git a/backend/handler/database/__init__.py b/backend/handler/database/__init__.py
index e09b022bc..65816f359 100644
--- a/backend/handler/database/__init__.py
+++ b/backend/handler/database/__init__.py
@@ -1,3 +1,4 @@
+from .collections_handler import DBCollectionsHandler
 from .firmware_handler import DBFirmwareHandler
 from .platforms_handler import DBPlatformsHandler
 from .roms_handler import DBRomsHandler
@@ -15,3 +16,4 @@
 db_state_handler = DBStatesHandler()
 db_stats_handler = DBStatsHandler()
 db_user_handler = DBUsersHandler()
+db_collection_handler = DBCollectionsHandler()
diff --git a/backend/handler/database/collections_handler.py b/backend/handler/database/collections_handler.py
index a8812b05e..1a439aa01 100644
--- a/backend/handler/database/collections_handler.py
+++ b/backend/handler/database/collections_handler.py
@@ -1,8 +1,7 @@
 from decorators.database import begin_session
 from models.collection import Collection
-from models.rom import Rom
-from sqlalchemy import Select, delete, or_, select
-from sqlalchemy.orm import Query, Session
+from sqlalchemy import Select, and_, delete, or_, select
+from sqlalchemy.orm import Session
 
 from .base_handler import DBBaseHandler
 
@@ -10,23 +9,34 @@
 class DBCollectionsHandler(DBBaseHandler):
     @begin_session
     def add_collection(
-        self, data: dict, query: Query = None, session: Session = None
+        self, collection: Collection, session: Session = None
     ) -> Collection | None:
-        collection = session.merge(**data)
+        collection = session.merge(collection)
         session.flush()
+        return session.scalar(select(Collection).filter_by(id=collection.id).limit(1))
 
-        return session.scalar(query.filter_by(id=collection.id).limit(1))
+    @begin_session
+    def get_collection(self, id: int, session: Session = None) -> Collection | None:
+        return session.scalar(select(Collection).filter_by(id=id).limit(1))
 
     @begin_session
-    def get_collection(
-        self, id: int, *, query: Query = None, session: Session = None
+    def get_collection_by_name(
+        self, name: str, user_id: int, session: Session = None
     ) -> Collection | None:
-        return session.scalar(query.filter_by(id=id).limit(1))
+        return session.scalar(
+            select(Collection).filter_by(name=name, user_id=user_id).limit(1)
+        )
 
     @begin_session
-    def get_collections(self, *, session: Session = None) -> Select[tuple[Collection]]:
+    def get_collections(
+        self, user_id: int, session: Session = None
+    ) -> Select[tuple[Collection]]:
         return (
-            session.scalars(select(Collection).order_by(Collection.name.asc()))  # type: ignore[attr-defined]
+            session.scalars(
+                select(Collection)
+                .filter_by(user_id=user_id)
+                .order_by(Collection.name.asc())
+            )  # type: ignore[attr-defined]
             .unique()
             .all()
         )
diff --git a/backend/handler/database/roms_handler.py b/backend/handler/database/roms_handler.py
index 998fa714d..5fa17e399 100644
--- a/backend/handler/database/roms_handler.py
+++ b/backend/handler/database/roms_handler.py
@@ -1,6 +1,7 @@
 import functools
 
 from decorators.database import begin_session
+from models.collection import Collection
 from models.rom import Rom, RomUser
 from sqlalchemy import and_, delete, func, or_, select, update
 from sqlalchemy.orm import Query, Session, selectinload
@@ -44,10 +45,26 @@ def wrapper(*args, **kwargs):
 
 
 class DBRomsHandler(DBBaseHandler):
-    def _filter(self, data, platform_id: int | None, search_term: str):
+    def _filter(
+        self,
+        data,
+        platform_id: int | None,
+        collection_id: int | None,
+        search_term: str,
+        session: Session,
+    ):
         if platform_id:
             data = data.filter(Rom.platform_id == platform_id)
 
+        elif collection_id:
+            collection = (
+                session.query(Collection)
+                .filter(Collection.id == collection_id)
+                .one_or_none()
+            )
+            if collection:
+                data = data.filter(Rom.id.in_(collection.roms))
+
         if search_term:
             data = data.filter(
                 or_(
@@ -90,6 +107,7 @@ def get_roms(
         self,
         *,
         platform_id: int | None = None,
+        collection_id: int | None = None,
         search_term: str = "",
         order_by: str = "name",
         order_dir: str = "asc",
@@ -97,17 +115,12 @@ def get_roms(
         query: Query = None,
         session: Session = None,
     ) -> list[Rom]:
-        return (
-            session.scalars(
-                self._order(
-                    self._filter(query, platform_id, search_term),
-                    order_by,
-                    order_dir,
-                ).limit(limit)
-            )
-            .unique()
-            .all()
+        filtered_query = self._filter(
+            query, platform_id, collection_id, search_term, session
         )
+        ordered_query = self._order(filtered_query, order_by, order_dir)
+        limited_query = ordered_query.limit(limit)
+        return session.scalars(limited_query).unique().all()
 
     @begin_session
     @with_details
diff --git a/backend/main.py b/backend/main.py
index 65f89020d..5f006f900 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -8,6 +8,7 @@
 from config import DEV_HOST, DEV_PORT, DISABLE_CSRF_PROTECTION, ROMM_AUTH_SECRET_KEY
 from endpoints import (
     auth,
+    collections,
     config,
     feeds,
     firmware,
@@ -93,6 +94,7 @@ async def lifespan(app: FastAPI):
 app.include_router(raw.router)
 app.include_router(screenshots.router)
 app.include_router(firmware.router)
+app.include_router(collections.router)
 
 app.mount("/ws", socket_handler.socket_app)
 
diff --git a/backend/models/collection.py b/backend/models/collection.py
index bbac97d26..4d46cd3ea 100644
--- a/backend/models/collection.py
+++ b/backend/models/collection.py
@@ -13,7 +13,9 @@ class Collection(BaseModel):
 
     name: Mapped[str] = mapped_column(String(length=400))
     description: Mapped[str | None] = mapped_column(Text)
-    logo_path: Mapped[str | None] = mapped_column(String(length=1000), default="")
+
+    path_cover_l: Mapped[str | None] = mapped_column(Text, default="")
+    path_cover_s: Mapped[str | None] = mapped_column(Text, default="")
 
     roms: Mapped[set[int]] = mapped_column(
         JSON, default=[], doc="Rom id's that belong to this collection"
diff --git a/backend/models/user.py b/backend/models/user.py
index c86c2d80d..c1d80f34f 100644
--- a/backend/models/user.py
+++ b/backend/models/user.py
@@ -11,6 +11,7 @@
 
 if TYPE_CHECKING:
     from models.assets import Save, Screenshot, State
+    from models.collection import Collection
     from models.rom import RomUser
 
 
@@ -40,6 +41,7 @@ class User(BaseModel, SimpleUser):
     states: Mapped[list[State]] = relationship(back_populates="user")
     screenshots: Mapped[list[Screenshot]] = relationship(back_populates="user")
     rom_users: Mapped[list[RomUser]] = relationship(back_populates="user")
+    collections: Mapped[list[Collection]] = relationship(back_populates="user")
 
     @property
     def oauth_scopes(self):
diff --git a/frontend/src/__generated__/index.ts b/frontend/src/__generated__/index.ts
index 37f066c7f..5ea59a9cd 100644
--- a/frontend/src/__generated__/index.ts
+++ b/frontend/src/__generated__/index.ts
@@ -13,6 +13,7 @@ export type { Body_add_states_states_post } from "./models/Body_add_states_state
 export type { Body_token_token_post } from "./models/Body_token_token_post";
 export type { Body_update_rom_roms__id__put } from "./models/Body_update_rom_roms__id__put";
 export type { Body_update_user_users__id__put } from "./models/Body_update_user_users__id__put";
+export type { CollectionSchema } from "./models/CollectionSchema";
 export type { ConfigResponse } from "./models/ConfigResponse";
 export type { DetailedRomSchema } from "./models/DetailedRomSchema";
 export type { FirmwareSchema } from "./models/FirmwareSchema";
diff --git a/frontend/src/__generated__/models/CollectionSchema.ts b/frontend/src/__generated__/models/CollectionSchema.ts
new file mode 100644
index 000000000..481255ea9
--- /dev/null
+++ b/frontend/src/__generated__/models/CollectionSchema.ts
@@ -0,0 +1,19 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type CollectionSchema = {
+  id: number;
+  name: string;
+  description: string;
+  path_cover_l: string | null;
+  path_cover_s: string | null;
+  roms: Array<number>;
+  rom_count: number;
+  user_id: number;
+  user__username: string;
+  is_public: boolean;
+  created_at: string;
+  updated_at: string;
+};
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
new file mode 100644
index 000000000..23be015c9
--- /dev/null
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Collection } from "@/stores/collections";
+import CollectionCover from "@/components/common/Collection/Cover.vue";
+
+defineProps<{ collection: Collection }>();
+</script>
+
+<template>
+  <v-hover v-slot="{ isHovering, props }">
+    <v-card
+      v-bind="props"
+      class="bg-terciary transform-scale"
+      :class="{ 'on-hover': isHovering }"
+      :elevation="isHovering ? 20 : 3"
+      :to="{ name: 'collection', params: { collection: collection.id } }"
+    >
+      <v-card-text>
+        <v-row class="pa-1 justify-center bg-primary">
+          <div
+            :title="collection.name?.toString()"
+            class="px-2 text-truncate text-caption"
+          >
+            {{ collection.name }}
+          </div>
+        </v-row>
+        <v-row>
+          <collection-cover :collection="collection" />
+          <v-chip
+            class="bg-chip position-absolute"
+            size="x-small"
+            style="bottom: 0.5rem; right: 0.5rem"
+            label
+          >
+            {{ collection.rom_count }}
+          </v-chip>
+        </v-row>
+      </v-card-text>
+    </v-card>
+  </v-hover>
+</template>
diff --git a/frontend/src/components/common/Collection/Cover.vue b/frontend/src/components/common/Collection/Cover.vue
new file mode 100644
index 000000000..00b946c99
--- /dev/null
+++ b/frontend/src/components/common/Collection/Cover.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Collection } from "@/stores/collections";
+import { useTheme } from "vuetify";
+
+defineProps<{ collection: Collection }>();
+const theme = useTheme();
+</script>
+
+<template>
+  <v-img
+    :aspect-ratio="2 / 3"
+    :src="
+      collection.path_cover_l ??
+      `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
+    "
+    :lazy-src="
+      collection.path_cover_s ??
+      `/assets/default/cover/small_${theme.global.name.value}_missing_cover.png`
+    "
+    cover
+  >
+    <template #error>
+      <v-img
+        :aspect-ratio="2 / 3"
+        src="assets/default/cover/big_dark_empty.png"
+        cover
+      >
+      </v-img>
+    </template>
+  </v-img>
+</template>
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
new file mode 100644
index 000000000..fe8bb2a55
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
+import storeRoms from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import { formatBytes } from "@/utils";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { inject, nextTick, ref, watch } from "vue";
+import { useDisplay } from "vuetify";
+
+// Props
+const { xs, mdAndUp } = useDisplay();
+const show = ref(false);
+const romsStore = storeRoms();
+const { currentCollection } = storeToRefs(romsStore);
+const filesToUpload = ref<File[]>([]);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("addFirmwareDialog", () => {
+  updateDataTablePages();
+  show.value = true;
+  nextTick(() => triggerFileInput());
+});
+const HEADERS = [
+  {
+    title: "Name",
+    align: "start",
+    sortable: true,
+    key: "name",
+  },
+  { title: "", align: "end", key: "actions", sortable: false },
+] as const;
+const page = ref(1);
+const itemsPerPage = ref(10);
+const pageCount = ref(0);
+const PER_PAGE_OPTIONS = [10, 25, 50, 100];
+
+// Functions
+function triggerFileInput() {
+  const fileInput = document.getElementById("file-input");
+  fileInput?.click();
+  updateDataTablePages();
+}
+
+function removeFileFromFileInput(file: string) {
+  filesToUpload.value = filesToUpload.value.filter((f) => f.name !== file);
+  updateDataTablePages();
+  if (filesToUpload.value.length == 0) {
+    closeDialog();
+  }
+}
+
+function uploadFirmware() {
+  if (!currentCollection.value) return;
+
+  emitter?.emit("snackbarShow", {
+    msg: `Uploading ${filesToUpload.value.length} states to ${currentCollection.value.name}...`,
+    icon: "mdi-loading mdi-spin",
+    color: "romm-accent-1",
+  });
+
+  closeDialog();
+}
+
+function checkAddedFiles() {
+  updateDataTablePages();
+  if (filesToUpload.value.length == 0) {
+    closeDialog();
+  }
+}
+
+function closeDialog() {
+  show.value = false;
+  filesToUpload.value = [];
+}
+
+function updateDataTablePages() {
+  pageCount.value = Math.ceil(filesToUpload.value.length / itemsPerPage.value);
+}
+watch(itemsPerPage, async () => {
+  updateDataTablePages();
+});
+</script>
+
+<template>
+  <r-dialog
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-memory"
+    empty-state-type="firmware"
+    scroll-content
+    :width="mdAndUp ? '50vw' : '95vw'"
+  >
+    <template #content>
+      <v-row class="align-center" no-gutters>
+        <v-file-input
+          id="file-input"
+          v-model="filesToUpload"
+          class="file-input"
+          multiple
+          required
+          @update:model-value="checkAddedFiles"
+          @keyup.enter="uploadFirmware"
+        />
+        <v-data-table
+          v-if="filesToUpload.length > 0"
+          :item-value="(item) => item.name"
+          :items="filesToUpload"
+          :width="mdAndUp ? '60vw' : '95vw'"
+          :items-per-page="itemsPerPage"
+          :items-per-page-options="PER_PAGE_OPTIONS"
+          :headers="HEADERS"
+          v-model:page="page"
+          hide-default-header
+        >
+          <template #item.name="{ item }">
+            <v-list-item class="px-0">
+              <v-row no-gutters
+                ><v-col>{{ item.name }}</v-col></v-row
+              >
+              <v-row v-if="xs" no-gutters>
+                <v-col>
+                  <v-chip class="ml-2" size="x-small" label>{{
+                    formatBytes(item.size)
+                  }}</v-chip>
+                </v-col>
+              </v-row>
+              <template #append>
+                <v-chip v-if="!xs" class="ml-2" size="x-small" label>{{
+                  formatBytes(item.size)
+                }}</v-chip>
+              </template>
+            </v-list-item>
+          </template>
+          <template #item.actions="{ item }">
+            <v-btn-group divided density="compact">
+              <v-btn @click="removeFileFromFileInput(item.name)">
+                <v-icon class="text-romm-red"> mdi-close </v-icon>
+              </v-btn>
+            </v-btn-group>
+          </template>
+          <template #bottom>
+            <v-divider />
+            <v-row no-gutters class="pt-2 align-center justify-center">
+              <v-col class="px-6">
+                <v-pagination
+                  v-model="page"
+                  rounded="0"
+                  :show-first-last-page="true"
+                  active-color="romm-accent-1"
+                  :length="pageCount"
+                />
+              </v-col>
+              <v-col cols="5" sm="3" xl="2">
+                <v-select
+                  v-model="itemsPerPage"
+                  class="pa-2"
+                  label="Files per page"
+                  density="compact"
+                  variant="outlined"
+                  :items="PER_PAGE_OPTIONS"
+                  hide-details
+                />
+              </v-col>
+            </v-row>
+          </template>
+        </v-data-table>
+      </v-row>
+    </template>
+
+    <template #append>
+      <v-row class="justify-center my-2" no-gutters>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn
+            class="bg-terciary text-romm-green"
+            :disabled="filesToUpload.length == 0 || !currentCollection"
+            :variant="
+              filesToUpload.length == 0 || !currentCollection ? 'plain' : 'flat'
+            "
+            @click="uploadFirmware"
+          >
+            Upload
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
new file mode 100644
index 000000000..0e60798b9
--- /dev/null
+++ b/frontend/src/components/common/Collection/Dialog/DeleteCollection.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import RDialog from "@/components/common/RDialog.vue";
+import collectionApi from "@/services/api/collection";
+import storeCollections, { type Collection } from "@/stores/collections";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+import CollectionIcon from "@/components/common/Collection/Icon.vue";
+
+const router = useRouter();
+const { lgAndUp } = useDisplay();
+const collectionsStore = storeCollections();
+const collection = ref<Collection | null>(null);
+const show = ref(false);
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("showDeleteCollectionDialog", (collectionToDelete) => {
+  collection.value = collectionToDelete;
+  show.value = true;
+});
+
+async function deleteCollection() {
+  if (!collection.value) return;
+
+  show.value = false;
+  await collectionApi
+    .deleteCollection({ collection: collection.value })
+    .then((response) => {
+      emitter?.emit("snackbarShow", {
+        msg: response.data.msg,
+        icon: "mdi-check-bold",
+        color: "green",
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    });
+
+  await router.push({ name: "dashboard" });
+
+  collectionsStore.remove(collection.value);
+  emitter?.emit("refreshDrawer", null);
+  closeDialog();
+}
+
+function closeDialog() {
+  show.value = false;
+}
+</script>
+<template>
+  <r-dialog
+    v-if="collection"
+    @close="closeDialog"
+    v-model="show"
+    icon="mdi-delete"
+    scroll-content
+    :width="lgAndUp ? '50vw' : '95vw'"
+  >
+    <template #content>
+      <v-row class="justify-center align-center pa-2" no-gutters>
+        <span class="mr-1">Removing collection</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>
+    <template #append>
+      <v-row class="justify-center pa-2" no-gutters>
+        <v-btn-group divided density="compact">
+          <v-btn class="bg-terciary" @click="closeDialog"> Cancel </v-btn>
+          <v-btn class="bg-terciary text-romm-red" @click="deleteCollection">
+            Confirm
+          </v-btn>
+        </v-btn-group>
+      </v-row>
+    </template>
+  </r-dialog>
+</template>
diff --git a/frontend/src/components/common/Collection/ListItem.vue b/frontend/src/components/common/Collection/ListItem.vue
new file mode 100644
index 000000000..384159ce2
--- /dev/null
+++ b/frontend/src/components/common/Collection/ListItem.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import type { Platform } from "@/stores/platforms";
+
+// Props
+withDefaults(defineProps<{ platform: Platform; rail?: boolean }>(), {
+  rail: false,
+});
+</script>
+
+<template>
+  <v-list-item
+    :key="platform.slug"
+    :to="{ name: 'platform', params: { platform: platform.id } }"
+    :value="platform.slug"
+  >
+    <template #prepend>
+      <platform-icon :key="platform.slug" :slug="platform.slug"
+        ><v-tooltip
+          location="bottom"
+          class="tooltip"
+          transition="fade-transition"
+          text="Not found"
+          open-delay="500"
+          ><template #activator="{ props }">
+            <div
+              v-if="!platform.igdb_id && !platform.moby_id"
+              v-bind="props"
+              class="not-found-icon"
+            >
+              ⚠️
+            </div>
+          </template>
+        </v-tooltip></platform-icon
+      >
+    </template>
+    <v-row no-gutters
+      ><v-col
+        ><span class="text-body-1">{{ platform.name }}</span></v-col
+      ></v-row
+    >
+    <v-row no-gutters>
+      <v-col>
+        <span class="text-caption text-grey">{{ platform.fs_slug }}</span>
+      </v-col>
+    </v-row>
+    <template #append>
+      <v-chip class="ml-2" size="x-small" label>
+        {{ platform.rom_count }}
+      </v-chip>
+    </template>
+  </v-list-item>
+</template>
+
+<style scoped>
+.not-found-icon {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>
diff --git a/frontend/src/components/common/EmptyCollection.vue b/frontend/src/components/common/EmptyCollection.vue
new file mode 100644
index 000000000..5185b2bb6
--- /dev/null
+++ b/frontend/src/components/common/EmptyCollection.vue
@@ -0,0 +1,8 @@
+<template>
+  <v-empty-state
+    headline="Whoops, 404"
+    title="Collection not found"
+    text="The collection you were looking for does not exist"
+    icon="mdi-rhombus-split"
+  ></v-empty-state>
+</template>
diff --git a/frontend/src/components/common/Navigation/CollectionsDrawer.vue b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
index bf3baed36..cd5ed5bef 100644
--- a/frontend/src/components/common/Navigation/CollectionsDrawer.vue
+++ b/frontend/src/components/common/Navigation/CollectionsDrawer.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import collectionApi from "@/services/api/collection";
+import storeCollections from "@/stores/collections";
 import storeNavigation from "@/stores/navigation";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import storeCollections from "@/stores/collections";
+import { inject, onMounted, ref } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -10,11 +14,54 @@ const { smAndDown } = useDisplay();
 const collectionsStore = storeCollections();
 const { filteredCollections, searchText } = storeToRefs(collectionsStore);
 const { activeCollectionsDrawer } = storeToRefs(navigationStore);
+const collectionName = ref("favourites");
+const collectionDescription = ref("my favourites collection");
+const emitter = inject<Emitter<Events>>("emitter");
 
 // Functions
+async function addCollection() {
+  await collectionApi
+    .createCollection({
+      name: collectionName.value,
+      description: collectionDescription.value,
+    })
+    .then(({ data }) => {
+      collectionsStore.add(data);
+      emitter?.emit("snackbarShow", {
+        msg: `Collection ${collectionName.value} created successfully!`,
+        icon: "mdi-check-bold",
+        color: "green",
+        timeout: 2000,
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+      emitter?.emit("snackbarShow", {
+        msg: error.response.data.detail,
+        icon: "mdi-close-circle",
+        color: "red",
+      });
+      return;
+    })
+    .finally(() => {
+      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+    });
+}
+
 function clear() {
   searchText.value = "";
 }
+
+onMounted(async () => {
+  await collectionApi
+    .getCollections()
+    .then(({ data: collections }) => {
+      collectionsStore.set(collections);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
 </script>
 <template>
   <v-navigation-drawer
@@ -65,10 +112,12 @@ function clear() {
     </v-list>
     <template #append>
       <v-btn
+        @click="addCollection()"
         variant="tonal"
         color="romm-accent-1"
         prepend-icon="mdi-plus"
         size="large"
+        rounded="0"
         block
         >Add Collection</v-btn
       >
diff --git a/frontend/src/layouts/Dashboard/Collections.vue b/frontend/src/layouts/Dashboard/Collections.vue
new file mode 100644
index 000000000..a82b48c17
--- /dev/null
+++ b/frontend/src/layouts/Dashboard/Collections.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import CollectionCard from "@/components/common/Collection/Card.vue";
+import RSection from "@/components/common/RSection.vue";
+import storeCollections from "@/stores/collections";
+import { views } from "@/utils";
+
+// Props
+const collections = storeCollections();
+</script>
+<template>
+  <r-section icon="mdi-bookmark-box-multiple" title="Collections">
+    <template #content>
+      <v-row no-gutters>
+        <v-col
+          v-for="collection in collections.all"
+          :key="collection.name"
+          class="pa-1"
+          :cols="views[0]['size-cols']"
+          :sm="views[0]['size-sm']"
+          :md="views[0]['size-md']"
+          :lg="views[0]['size-lg']"
+          :xl="views[0]['size-xl']"
+        >
+          <collection-card :key="collection.name" :collection="collection" />
+        </v-col>
+      </v-row>
+    </template>
+  </r-section>
+</template>
diff --git a/frontend/src/layouts/Dashboard/Recent.vue b/frontend/src/layouts/Dashboard/Recent.vue
index f7a924777..d44ddab71 100644
--- a/frontend/src/layouts/Dashboard/Recent.vue
+++ b/frontend/src/layouts/Dashboard/Recent.vue
@@ -1,38 +1,27 @@
 <script setup lang="ts">
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import RSection from "@/components/common/RSection.vue";
-import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import { views } from "@/utils";
-import { onMounted } from "vue";
+import { storeToRefs } from "pinia";
 import { useRouter } from "vue-router";
 
 // Props
 const romsStore = storeRoms();
+const { recentRoms } = storeToRefs(romsStore)
 const router = useRouter();
 
 // Functions
 function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
   router.push({ name: "rom", params: { rom: emitData.rom.id } });
 }
-
-onMounted(() => {
-  romApi
-    .getRecentRoms()
-    .then(({ data: recentData }) => {
-      romsStore.setRecentRoms(recentData);
-    })
-    .catch((error) => {
-      console.error(error);
-    });
-});
 </script>
 <template>
   <r-section icon="mdi-shimmer" title="Recently added">
     <template #content>
       <v-row class="flex-nowrap overflow-x-auto" no-gutters>
         <v-col
-          v-for="rom in romsStore.recentRoms"
+          v-for="rom in recentRoms"
           :key="rom.id"
           class="px-1 pt-1 pb-2"
           :cols="views[0]['size-cols']"
@@ -54,5 +43,4 @@ onMounted(() => {
       <!-- TODO: Add a button to upload roms if no roms were uploaded in the last 30 days -->
     </template>
   </r-section>
-
 </template>
diff --git a/frontend/src/layouts/Dashboard/Summary.vue b/frontend/src/layouts/Dashboard/Stats.vue
similarity index 100%
rename from frontend/src/layouts/Dashboard/Summary.vue
rename to frontend/src/layouts/Dashboard/Stats.vue
diff --git a/frontend/src/services/api/collection.ts b/frontend/src/services/api/collection.ts
new file mode 100644
index 000000000..641fba367
--- /dev/null
+++ b/frontend/src/services/api/collection.ts
@@ -0,0 +1,49 @@
+import type { MessageResponse } from "@/__generated__";
+import api from "@/services/api/index";
+import type { Collection } from "@/stores/collections";
+
+export const collectionApi = api;
+
+async function createCollection({
+  name,
+  description,
+}: {
+  name: string;
+  description: string;
+}): Promise<{ data: Collection }> {
+  return api.post("/collections", { name: name, description: description });
+}
+
+async function getCollections(): Promise<{ data: Collection[] }> {
+  return api.get("/collections");
+}
+
+async function getCollection(
+  id: number | undefined,
+): Promise<{ data: Collection }> {
+  return api.get(`/collections/${id}`);
+}
+
+async function updateCollection({
+  collection,
+}: {
+  collection: Collection;
+}): Promise<{ data: MessageResponse }> {
+  return api.delete(`/collections/${collection.id}`);
+}
+
+async function deleteCollection({
+  collection,
+}: {
+  collection: Collection;
+}): Promise<{ data: MessageResponse }> {
+  return api.delete(`/collections/${collection.id}`);
+}
+
+export default {
+  createCollection,
+  getCollections,
+  getCollection,
+  updateCollection,
+  deleteCollection,
+};
diff --git a/frontend/src/services/api/rom.ts b/frontend/src/services/api/rom.ts
index 828e0979d..228543c8e 100644
--- a/frontend/src/services/api/rom.ts
+++ b/frontend/src/services/api/rom.ts
@@ -32,11 +32,13 @@ async function uploadRoms({
 
 async function getRoms({
   platformId = null,
+  collectionId = null,
   searchTerm = "",
   orderBy = "name",
   orderDir = "asc",
 }: {
   platformId?: number | null;
+  collectionId?: number | null;
   searchTerm?: string | null;
   orderBy?: string | null;
   orderDir?: string | null;
@@ -44,6 +46,7 @@ async function getRoms({
   return api.get(`/roms`, {
     params: {
       platform_id: platformId,
+      collection_id: collectionId,
       search_term: searchTerm,
       order_by: orderBy,
       order_dir: orderDir,
diff --git a/frontend/src/stores/collections.ts b/frontend/src/stores/collections.ts
index d37516435..f0bc87bbd 100644
--- a/frontend/src/stores/collections.ts
+++ b/frontend/src/stores/collections.ts
@@ -7,116 +7,14 @@ export type Collection = CollectionSchema;
 export default defineStore("collections", {
   state: () => {
     return {
-      all: [
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 3,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-        {
-          name: "Favourites",
-          description: "My favourites collection",
-          rom_count: 10,
-          id: 0,
-        },
-        {
-          name: "Nintendo",
-          description: "Nintendo collection",
-          rom_count: 7,
-          id: 1,
-        },
-        {
-          name: "Sony",
-          description: "Sony collection",
-          rom_count: 20,
-          id: 2,
-        },
-        {
-          name: "Sega",
-          description: "Sega collection",
-          rom_count: 0,
-          id: 2,
-        },
-      ] as Collection[],
+      all: [] as Collection[],
       searchText: "" as string,
     };
   },
   getters: {
-    totalGames: ({ all: value }) =>
-      value.reduce((count, p) => count + p.rom_count, 0),
-    filledCollections: ({ all }) => all.filter((p) => p.rom_count > 0),
     filteredCollections: ({ all, searchText }) =>
-      all.filter(
-        (p) =>
-          p.rom_count > 0 &&
-          p.name.toLowerCase().includes(searchText.toLowerCase()),
+      all.filter((p) =>
+        p.name.toLowerCase().includes(searchText.toLowerCase()),
       ),
   },
   actions: {
@@ -131,14 +29,14 @@ export default defineStore("collections", {
     },
     add(collection: Collection) {
       this.all.push(collection);
-      // this._reorder();
+      this._reorder();
     },
     exists(collection: Collection) {
-      return this.all.filter((p) => p.fs_slug == collection.fs_slug).length > 0;
+      return this.all.filter((p) => p.name == collection.name).length > 0;
     },
     remove(collection: Collection) {
       this.all = this.all.filter((p) => {
-        return p.slug !== collection.slug;
+        return p.name !== collection.name;
       });
     },
     get(collectionId: number) {
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index 2f13ea14b..53386e0bc 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -1,6 +1,7 @@
 import type { SearchRomSchema } from "@/__generated__";
 import type { DetailedRomSchema, RomSchema } from "@/__generated__/";
 import { type Platform } from "@/stores/platforms";
+import { type Collection } from "@/stores/collections";
 import type { ExtractPiniaStoreType } from "@/types";
 import { groupBy, uniqBy } from "lodash";
 import { nanoid } from "nanoid";
@@ -18,6 +19,7 @@ export type DetailedRom = DetailedRomSchema;
 export default defineStore("roms", {
   state: () => ({
     currentPlatform: null as Platform | null,
+    currentCollection: null as Collection | null,
     allRoms: [] as SimpleRom[],
     _grouped: [] as SimpleRom[],
     _filteredIDs: [] as number[],
@@ -84,6 +86,9 @@ export default defineStore("roms", {
     setRecentRoms(roms: SimpleRom[]) {
       this.recentRoms = roms;
     },
+    setCurrentCollection(collection: Collection) {
+      this.currentCollection = collection;
+    },
     set(roms: SimpleRom[]) {
       this.allRoms = roms;
       this._reorder();
diff --git a/frontend/src/types/emitter.d.ts b/frontend/src/types/emitter.d.ts
index f89124ffc..0fe73d2e3 100644
--- a/frontend/src/types/emitter.d.ts
+++ b/frontend/src/types/emitter.d.ts
@@ -1,4 +1,5 @@
 import type { SaveSchema, StateSchema } from "@/__generated__";
+import type { Collection } from "@/stores/collections";
 import type { Platform } from "@/stores/platforms";
 import type { SimpleRom } from "@/stores/roms";
 import type { User } from "@/stores/users";
@@ -18,6 +19,7 @@ export type SnackbarStatus = {
 
 export type Events = {
   showDeletePlatformDialog: Platform;
+  showDeleteCollectionDialog: Collection;
   showMatchRomDialog: SimpleRom;
   showSearchCoverDialog: SimpleRom;
   showSearchRomDialog: null;
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index bfb9f46f7..3d4c4434e 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -1,11 +1,39 @@
 <script setup lang="ts">
-import dashboardPlatforms from "@/layouts/Dashboard/Platforms.vue";
+import Collections from "@/layouts/Dashboard/Collections.vue";
+import Platforms from "@/layouts/Dashboard/Platforms.vue";
 import recentlyAdded from "@/layouts/Dashboard/Recent.vue";
-import dashboardSummary from "@/layouts/Dashboard/Summary.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 { all } = storeToRefs(collections);
+
+// Functions
+onMounted(async () => {
+  await romApi
+    .getRecentRoms()
+    .then(({ data: recentData }) => {
+      romsStore.setRecentRoms(recentData);
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+});
 </script>
 
 <template>
-  <dashboard-summary />
-  <recently-added />
-  <dashboard-platforms />
+  <stats />
+  <recently-added v-if="recentRoms.length > 0" />
+  <platforms v-if="filledPlatforms.length > 0" />
+  <collections v-if="all.length > 0" />
 </template>
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index c39277cdf..abc7a5907 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -2,15 +2,15 @@
 import GalleryAppBar from "@/components/Gallery/AppBar/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
 import EmptyGame from "@/components/common/EmptyGame.vue";
-import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
+import EmptyCollection from "@/components/common/EmptyCollection.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameCardFlags from "@/components/common/Game/Card/Flags.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
-import platformApi from "@/services/api/platform";
+import collectionApi from "@/services/api/collection";
 import romApi from "@/services/api/rom";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import storeGalleryView from "@/stores/galleryView";
-import storePlatforms from "@/stores/platforms";
+import storeCollections from "@/stores/collections";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import { normalizeString, views } from "@/utils";
@@ -26,18 +26,18 @@ const route = useRoute();
 const galleryViewStore = storeGalleryView();
 const galleryFilterStore = storeGalleryFilter();
 const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
-const platforms = storePlatforms();
+const collections = storeCollections();
 const romsStore = storeRoms();
 const {
   allRoms,
   filteredRoms,
   selectedRoms,
-  currentPlatform,
+  currentCollection,
   itemsPerBatch,
   gettingRoms,
 } = storeToRefs(romsStore);
 const itemsShown = ref(itemsPerBatch.value);
-const noPlatformError = ref(false);
+const noCollectionError = ref(false);
 const router = useRouter();
 let timeout: ReturnType<typeof setTimeout>;
 const emitter = inject<Emitter<Events>>("emitter");
@@ -55,7 +55,7 @@ async function fetchRoms() {
 
   await romApi
     .getRoms({
-      platformId: romsStore.currentPlatform?.id,
+      collectionId: romsStore.currentCollection?.id,
       searchTerm: normalizeString(galleryFilterStore.filterSearch),
     })
     .then(({ data }) => {
@@ -64,15 +64,15 @@ async function fetchRoms() {
     })
     .catch((error) => {
       emitter?.emit("snackbarShow", {
-        msg: `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`,
+        msg: `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`,
         icon: "mdi-close-circle",
         color: "red",
         timeout: 4000,
       });
       console.error(
-        `Couldn't fetch roms for platform ID ${currentPlatform.value?.id}: ${error}`
+        `Couldn't fetch roms for collection ID ${currentCollection.value?.id}: ${error}`
       );
-      noPlatformError.value = true;
+      noCollectionError.value = true;
     })
     .finally(() => {
       gettingRoms.value = false;
@@ -193,29 +193,29 @@ function resetGallery() {
   romsStore.reset();
   galleryFilterStore.reset();
   scrolledToTop.value = true;
-  noPlatformError.value = false;
+  noCollectionError.value = false;
   itemsShown.value = itemsPerBatch.value;
 }
 
 onMounted(async () => {
-  const routePlatformId = Number(route.params.collection);
-  const routePlatform = platforms.get(routePlatformId);
+  const routeCollectionId = Number(route.params.collection);
+  const routeCollection = collections.get(routeCollectionId);
 
-  if (!routePlatform) {
-    await platformApi
-      .getPlatform(routePlatformId)
+  if (!routeCollection) {
+    await collectionApi
+      .getCollection(routeCollectionId)
       .then((data) => {
-        platforms.add(data.data);
-        romsStore.setCurrentPlatform(data.data);
+        collections.add(data.data);
+        romsStore.setCurrentCollection(data.data);
       })
       .catch((error) => {
         console.log(error);
-        noPlatformError.value = true;
+        noCollectionError.value = true;
       });
   } else {
-    romsStore.setCurrentPlatform(routePlatform);
+    romsStore.setCurrentCollection(routeCollection);
   }
-  if (!noPlatformError.value) {
+  if (!noCollectionError.value) {
     resetGallery();
     await fetchRoms();
     setFilters();
@@ -226,18 +226,18 @@ onMounted(async () => {
 
 onBeforeRouteUpdate(async (to, from) => {
   // Triggers when change param of the same route
-  // Reset store if switching to another platform
+  // Reset store if switching to another collection
   if (to.path === from.path) return;
 
   resetGallery();
 
-  const routePlatformId = Number(to.params.collection);
-  const routePlatform = platforms.get(routePlatformId);
-  if (!routePlatform) {
-    const { data } = await platformApi.getPlatform(routePlatformId);
-    platforms.add(data);
+  const routeCollectionId = Number(to.params.collection);
+  const routeCollection = collections.get(routeCollectionId);
+  if (!routeCollection) {
+    const { data } = await collectionApi.getCollection(routeCollectionId);
+    collections.add(data);
   } else {
-    romsStore.setCurrentPlatform(routePlatform);
+    romsStore.setCurrentCollection(routeCollection);
   }
 
   await fetchRoms();
@@ -251,7 +251,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <template v-if="!noPlatformError">
+  <template v-if="!noCollectionError">
     <gallery-app-bar />
     <template v-if="filteredRoms.length > 0">
       <v-row
@@ -308,5 +308,5 @@ onBeforeUnmount(() => {
     </template>
   </template>
 
-  <empty-platform v-else />
+  <empty-collection v-else />
 </template>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 9286f15e0..f93bff9d9 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -28,6 +28,7 @@ import userApi from "@/services/api/user";
 import storeAuth from "@/stores/auth";
 import storeNavigation from "@/stores/navigation";
 import storePlatforms from "@/stores/platforms";
+import storeRoms from "@/stores/roms";
 import storeScanning from "@/stores/scanning";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";