diff --git a/frontend/src/components/Details/BackgroundHeader.vue b/frontend/src/components/Details/BackgroundHeader.vue
index e6004792a..252e71efe 100644
--- a/frontend/src/components/Details/BackgroundHeader.vue
+++ b/frontend/src/components/Details/BackgroundHeader.vue
@@ -3,9 +3,14 @@ import storeRoms from "@/stores/roms";
import { getMissingCoverImage, getUnmatchedCoverImage } from "@/utils/covers";
import { storeToRefs } from "pinia";
import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
const romsStore = storeRoms();
-const { currentRom } = storeToRefs(romsStore);
+const { currentRom, filteredRoms } = storeToRefs(romsStore);
+const router = useRouter();
+const { smAndUp } = useDisplay();
+
const missingCoverImage = computed(() =>
getMissingCoverImage(
currentRom.value?.name || currentRom.value?.fs_name || "",
@@ -16,6 +21,22 @@ const unmatchedCoverImage = computed(() =>
currentRom.value?.name || currentRom.value?.fs_name || "",
),
);
+
+const currentRomIndex = computed(() =>
+ filteredRoms.value.findIndex((rom) => rom.id === currentRom.value?.id),
+);
+
+function previousRom() {
+ if (currentRomIndex.value > 0) {
+ router.push(`/rom/${filteredRoms.value[currentRomIndex.value - 1].id}`);
+ }
+}
+
+function nextRom() {
+ if (currentRomIndex.value < filteredRoms.value.length - 1) {
+ router.push(`/rom/${filteredRoms.value[currentRomIndex.value + 1].id}`);
+ }
+}
@@ -38,6 +59,29 @@ const unmatchedCoverImage = computed(() =>
+
+
+ mdi-arrow-left
+
+
+ mdi-arrow-right
+
+
diff --git a/frontend/src/components/Details/Info/GameInfo.vue b/frontend/src/components/Details/Info/GameInfo.vue
index 2c3d23a62..a7de8b490 100644
--- a/frontend/src/components/Details/Info/GameInfo.vue
+++ b/frontend/src/components/Details/Info/GameInfo.vue
@@ -1,8 +1,7 @@