diff --git a/frontend/src/components/Gallery/AppBar/Search/Base.vue b/frontend/src/components/Gallery/AppBar/Search/Base.vue
new file mode 100644
index 000000000..aa7a27f49
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Search/Base.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import FilterBtn from "@/components/Gallery/AppBar/common/FilterBtn.vue";
+import FilterDrawer from "@/components/Gallery/AppBar/common/FilterDrawer/Base.vue";
+import GalleryViewBtn from "@/components/Gallery/AppBar/common/GalleryViewBtn.vue";
+import SearchTextField from "@/components/Gallery/AppBar/Search/SearchTextField.vue";
+import PlatformSelector from "@/components/Gallery/AppBar/Search/PlatformSelector.vue";
+import SelectingBtn from "@/components/Gallery/AppBar/common/SelectingBtn.vue";
+import SearchBtn from "@/components/Gallery/AppBar/Search/SearchBtn.vue";
+import { useDisplay } from "vuetify";
+import { useI18n } from "vue-i18n";
+
+// Props
+const { t } = useI18n();
+const { xs } = useDisplay();
+</script>
+
+<template>
+  <v-app-bar
+    id="gallery-app-bar"
+    elevation="0"
+    density="compact"
+    mode="shift"
+    app
+    fixed
+    top
+  >
+    <filter-btn />
+    <template v-if="!xs">
+      <search-text-field />
+      <platform-selector />
+    </template>
+    <template #append>
+      <search-btn v-if="!xs" />
+      <selecting-btn />
+      <gallery-view-btn />
+    </template>
+  </v-app-bar>
+
+  <filter-drawer />
+</template>
+
+<style scoped>
+#gallery-app-bar {
+  z-index: 999 !important;
+}
+</style>
diff --git a/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue b/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue
new file mode 100644
index 000000000..c3a2ecaec
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Search/PlatformSelector.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import PlatformIcon from "@/components/common/Platform/Icon.vue";
+import type { Platform } from "@/stores/platforms";
+import romApi from "@/services/api/rom";
+import storeRoms from "@/stores/roms";
+import storeGalleryFilter from "@/stores/galleryFilter";
+import type { Events } from "@/types/emitter";
+import { inject, ref } from "vue";
+import { useDisplay } from "vuetify";
+import type { Emitter } from "mitt";
+import { storeToRefs } from "pinia";
+import { useI18n } from "vue-i18n";
+
+// Props
+const { xs } = useDisplay();
+const { t } = useI18n();
+const romsStore = storeRoms();
+const emitter = inject<Emitter<Events>>("emitter");
+const searching = ref(false);
+const searched = ref(false);
+const selectedPlatform = ref<Platform | null>(null);
+const galleryFilterStore = storeGalleryFilter();
+const { filterPlatforms } = storeToRefs(galleryFilterStore);
+
+// Functions
+function setFilters() {
+  galleryFilterStore.setFilterGenres([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.genres.map((genre) => genre))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterFranchises([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.franchises.map((franchise) => franchise))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCompanies([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.companies.map((company) => company))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCollections([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.collections.map((collection) => collection))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterAgeRatings([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.age_ratings.map((ageRating) => ageRating))
+        .sort(),
+    ),
+  ]);
+}
+
+function filterRoms() {
+  if (selectedPlatform.value) {
+    romsStore.setFiltered(
+      romsStore.allRoms.filter(
+        (rom) => rom.platform_id === selectedPlatform.value?.id,
+      ),
+      galleryFilterStore,
+    );
+  } else {
+    romsStore.setFiltered(romsStore.allRoms, galleryFilterStore);
+  }
+  setFilters();
+}
+
+function clearFilter() {
+  selectedPlatform.value = null;
+  filterRoms();
+}
+</script>
+
+<template>
+  <v-select
+    :density="xs ? 'comfortable' : 'default'"
+    @click:clear="clearFilter"
+    :label="t('common.platform')"
+    class="bg-terciary"
+    item-title="platform_name"
+    :disabled="filterPlatforms.length == 0 || searching"
+    hide-details
+    rounded="0"
+    clearable
+    single-line
+    return-object
+    v-model="selectedPlatform"
+    @update:model-value="filterRoms"
+    :items="filterPlatforms"
+  >
+    <template #item="{ props, item }">
+      <v-list-item
+        class="py-2"
+        v-bind="props"
+        :title="item.raw.display_name ?? ''"
+      >
+        <template #prepend>
+          <platform-icon
+            :size="35"
+            :key="item.raw.slug"
+            :slug="item.raw.slug"
+            :name="item.raw.display_name"
+          />
+        </template>
+      </v-list-item>
+    </template>
+    <template #selection="{ item }">
+      <v-list-item class="px-0" :title="item.raw.display_name ?? ''">
+        <template #prepend>
+          <platform-icon
+            :size="35"
+            :key="item.raw.slug"
+            :slug="item.raw.slug"
+            :name="item.raw.display_name"
+          />
+        </template>
+      </v-list-item>
+    </template>
+  </v-select>
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue b/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue
new file mode 100644
index 000000000..4fbb31201
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Search/SearchBtn.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, inject } from "vue";
+import { useI18n } from "vue-i18n";
+import storeRoms from "@/stores/roms";
+import romApi from "@/services/api/rom";
+import storeGalleryFilter from "@/stores/galleryFilter";
+import { storeToRefs } from "pinia";
+import type { Platform } from "@/stores/platforms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+
+const romsStore = storeRoms();
+const { t } = useI18n();
+const searching = ref(false);
+const searched = ref(false);
+const searchedRoms = ref<Platform[]>([]);
+const selectedPlatform = ref<Platform | null>(null);
+const emitter = inject<Emitter<Events>>("emitter");
+const galleryFilterStore = storeGalleryFilter();
+const { searchText, filterPlatforms } = storeToRefs(galleryFilterStore);
+
+async function fetchRoms() {
+  if (searchText.value) {
+    const inputElement = document.getElementById("search-text-field");
+    inputElement?.blur();
+    searching.value = true;
+    searched.value = true;
+    await romApi
+      .getRoms({ searchTerm: searchText.value })
+      .then(({ data }) => {
+        data = data.sort((a, b) => {
+          return a.platform_name.localeCompare(b.platform_name);
+        });
+        romsStore.set(data);
+        romsStore.setFiltered(data, galleryFilterStore);
+      })
+      .catch((error) => {
+        emitter?.emit("snackbarShow", {
+          msg: `Couldn't fetch roms: ${error}`,
+          icon: "mdi-close-circle",
+          color: "red",
+          timeout: 4000,
+        });
+        console.error(`Couldn't fetch roms: ${error}`);
+      })
+      .finally(() => {
+        searching.value = false;
+      });
+    searching.value = false;
+    filterRoms();
+    galleryFilterStore.activeFilterDrawer = false;
+  }
+}
+
+function clearFilter() {
+  selectedPlatform.value = null;
+  fetchRoms();
+}
+
+function filterRoms() {
+  if (selectedPlatform.value) {
+    romsStore.setFiltered(
+      romsStore.allRoms.filter(
+        (rom) => rom.platform_id === selectedPlatform.value?.id,
+      ),
+      galleryFilterStore,
+    );
+  } else {
+    romsStore.setFiltered(romsStore.allRoms, galleryFilterStore);
+  }
+}
+</script>
+
+<template>
+  <v-btn
+    id="search-btn"
+    type="submit"
+    @click="fetchRoms"
+    class="bg-terciary"
+    rounded="0"
+    variant="text"
+    icon="mdi-magnify"
+    :disabled="searching || !searchText"
+  />
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue b/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue
new file mode 100644
index 000000000..35c7cf6f9
--- /dev/null
+++ b/frontend/src/components/Gallery/AppBar/Search/SearchTextField.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import romApi from "@/services/api/rom";
+import storeRoms from "@/stores/roms";
+import storeGalleryFilter from "@/stores/galleryFilter";
+import storePlatforms from "@/stores/platforms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { inject, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useDisplay } from "vuetify";
+import type { Platform } from "@/stores/platforms";
+import { useI18n } from "vue-i18n";
+
+// Props
+const { xs } = useDisplay();
+const { t } = useI18n();
+const romsStore = storeRoms();
+const emitter = inject<Emitter<Events>>("emitter");
+const searching = ref(false);
+const platformsStore = storePlatforms();
+const { allPlatforms } = storeToRefs(platformsStore);
+const galleryFilterStore = storeGalleryFilter();
+const { searchText, filterPlatforms } = storeToRefs(galleryFilterStore);
+
+// Functions
+function setFilters() {
+  galleryFilterStore.setFilterGenres([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.genres.map((genre) => genre))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterFranchises([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.franchises.map((franchise) => franchise))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCompanies([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.companies.map((company) => company))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCollections([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.collections.map((collection) => collection))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterAgeRatings([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.age_ratings.map((ageRating) => ageRating))
+        .sort(),
+    ),
+  ]);
+}
+
+async function fetchRoms() {
+  if (searchText.value) {
+    // Auto hide android keyboard
+    const inputElement = document.getElementById("search-text-field");
+    inputElement?.blur();
+    searching.value = true;
+    await romApi
+      .getRoms({ searchTerm: searchText.value })
+      .then(({ data }) => {
+        data = data.sort((a, b) => {
+          return a.platform_name.localeCompare(b.platform_name);
+        });
+        romsStore.set(data);
+        romsStore.setFiltered(data, galleryFilterStore);
+      })
+      .catch((error) => {
+        emitter?.emit("snackbarShow", {
+          msg: `Couldn't fetch roms: ${error}`,
+          icon: "mdi-close-circle",
+          color: "red",
+          timeout: 4000,
+        });
+        console.error(`Couldn't fetch roms: ${error}`);
+      })
+      .finally(() => {
+        searching.value = false;
+      });
+    galleryFilterStore.setFilterPlatforms([
+      ...new Map(
+        romsStore.filteredRoms.map((rom) => {
+          const platform = allPlatforms.value.find(
+            (p) => p.id === rom.platform_id,
+          );
+          return [rom.platform_name, platform];
+        }),
+      ).values(),
+    ] as Platform[]);
+    setFilters();
+    searching.value = false;
+    galleryFilterStore.activeFilterDrawer = false;
+  }
+}
+</script>
+
+<template>
+  <v-text-field
+    rounded="0"
+    :density="xs ? 'comfortable' : 'default'"
+    clearable
+    autofocus
+    @keyup.enter="fetchRoms"
+    v-model="searchText"
+    :disabled="searching"
+    :label="t('common.search')"
+    hide-details
+    class="bg-terciary"
+  />
+</template>
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
index 9b6a7e43c..be0775ea5 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterDrawer/Base.vue
@@ -4,17 +4,21 @@ import FilterMatchedBtn from "@/components/Gallery/AppBar/common/FilterDrawer/Fi
 import FilterFavouritesBtn from "@/components/Gallery/AppBar/common/FilterDrawer/FilterFavouritesBtn.vue";
 import FilterDuplicatesBtn from "@/components/Gallery/AppBar/common/FilterDrawer/FilterDuplicatesBtn.vue";
 import FilterTextField from "@/components/Gallery/AppBar/common/FilterTextField.vue";
+import PlatformSelector from "@/components/Gallery/AppBar/Search/PlatformSelector.vue";
+import SearchTextField from "@/components/Gallery/AppBar/Search/SearchTextField.vue";
+import SearchBtn from "@/components/Gallery/AppBar/Search/SearchBtn.vue";
 import storeGalleryFilter from "@/stores/galleryFilter";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { storeToRefs } from "pinia";
-import { inject, nextTick } from "vue";
+import { inject, nextTick, ref } from "vue";
 import { useDisplay } from "vuetify";
 import { useI18n } from "vue-i18n";
 
 // Props
 const { t } = useI18n();
 const { xs } = useDisplay();
+const viewportWidth = ref(window.innerWidth);
 const emitter = inject<Emitter<Events>>("emitter");
 const galleryFilterStore = storeGalleryFilter();
 const {
@@ -83,15 +87,34 @@ function resetFilters() {
 <template>
   <v-navigation-drawer
     floating
-    width="300"
     mobile
+    :width="xs ? viewportWidth : '350'"
     @update:model-value="galleryFilterStore.switchActiveFilterDrawer()"
     v-model="activeFilterDrawer"
   >
     <v-list>
-      <v-list-item v-if="xs">
-        <filter-text-field />
-      </v-list-item>
+      <template v-if="xs">
+        <template v-if="$route.name != 'search'">
+          <v-list-item>
+            <filter-text-field />
+          </v-list-item>
+        </template>
+        <template v-if="$route.name == 'search'">
+          <v-list-item>
+            <v-row no-gutters>
+              <v-col>
+                <search-text-field />
+              </v-col>
+              <v-col cols="auto">
+                <search-btn />
+              </v-col>
+            </v-row>
+          </v-list-item>
+          <v-list-item>
+            <platform-selector />
+          </v-list-item>
+        </template>
+      </template>
       <v-list-item>
         <filter-unmatched-btn />
         <filter-matched-btn class="mt-2" />
diff --git a/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue b/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
index e1933eb29..96e079a8e 100644
--- a/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
+++ b/frontend/src/components/Gallery/AppBar/common/FilterTextField.vue
@@ -11,20 +11,20 @@ import { useI18n } from "vue-i18n";
 const { t } = useI18n();
 const emitter = inject<Emitter<Events>>("emitter");
 const galleryFilterStore = storeGalleryFilter();
-const { filterSearch } = storeToRefs(galleryFilterStore);
+const { filterText } = storeToRefs(galleryFilterStore);
 
 const filterRoms = debounce(() => {
   emitter?.emit("filter", null);
 }, 500);
 
 function clear() {
-  filterSearch.value = "";
+  filterText.value = "";
 }
 </script>
 
 <template>
   <v-text-field
-    v-model="filterSearch"
+    v-model="filterText"
     prepend-inner-icon="mdi-filter-outline"
     :label="t('common.filter')"
     rounded="0"
diff --git a/frontend/src/components/common/EmptyCollection.vue b/frontend/src/components/common/EmptyStates/EmptyCollection.vue
similarity index 100%
rename from frontend/src/components/common/EmptyCollection.vue
rename to frontend/src/components/common/EmptyStates/EmptyCollection.vue
diff --git a/frontend/src/components/common/EmptyFirmware.vue b/frontend/src/components/common/EmptyStates/EmptyFirmware.vue
similarity index 100%
rename from frontend/src/components/common/EmptyFirmware.vue
rename to frontend/src/components/common/EmptyStates/EmptyFirmware.vue
diff --git a/frontend/src/components/common/EmptyGame.vue b/frontend/src/components/common/EmptyStates/EmptyGame.vue
similarity index 100%
rename from frontend/src/components/common/EmptyGame.vue
rename to frontend/src/components/common/EmptyStates/EmptyGame.vue
diff --git a/frontend/src/components/common/EmptyPlatform.vue b/frontend/src/components/common/EmptyStates/EmptyPlatform.vue
similarity index 100%
rename from frontend/src/components/common/EmptyPlatform.vue
rename to frontend/src/components/common/EmptyStates/EmptyPlatform.vue
diff --git a/frontend/src/components/common/EmptyStates/EmptySearch.vue b/frontend/src/components/common/EmptyStates/EmptySearch.vue
new file mode 100644
index 000000000..f6bac06d6
--- /dev/null
+++ b/frontend/src/components/common/EmptyStates/EmptySearch.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <v-empty-state>
+    <template #media>
+      <v-icon size="80">mdi-magnify</v-icon>
+    </template>
+    <template #title>
+      <div class="text-h5 font-weight-medium text-medium-emphasis">
+        {{ t("emptyStates.search-for-games") }}
+      </div>
+    </template>
+  </v-empty-state>
+</template>
diff --git a/frontend/src/components/common/Navigation/ScanBtn.vue b/frontend/src/components/common/Navigation/ScanBtn.vue
index 8079bb9a5..d398289c5 100644
--- a/frontend/src/components/common/Navigation/ScanBtn.vue
+++ b/frontend/src/components/common/Navigation/ScanBtn.vue
@@ -23,7 +23,7 @@ withDefaults(
 const navigationStore = storeNavigation();
 const auth = storeAuth();
 const galleryFilter = storeGalleryFilter();
-const isFiltered = normalizeString(galleryFilter.filterSearch).trim() != "";
+const isFiltered = normalizeString(galleryFilter.filterText).trim() != "";
 const emitter = inject<Emitter<Events>>("emitter");
 const scanningStore = storeScanning();
 const { scanningPlatforms, scanning } = storeToRefs(scanningStore);
diff --git a/frontend/src/components/common/Navigation/SearchBtn.vue b/frontend/src/components/common/Navigation/SearchBtn.vue
index d29ebc339..361f0f374 100644
--- a/frontend/src/components/common/Navigation/SearchBtn.vue
+++ b/frontend/src/components/common/Navigation/SearchBtn.vue
@@ -6,10 +6,9 @@ import { inject } from "vue";
 const emitter = inject<Emitter<Events>>("emitter");
 </script>
 <template>
-  <v-btn
-    icon="mdi-magnify"
-    variant="flat"
-    rounded="0"
-    @click="emitter?.emit('showSearchRomDialog', null)"
-  />
+  <v-btn icon variant="flat" rounded="0" :to="{ name: 'search' }"
+    ><v-icon :color="$route.name == 'search' ? 'romm-accent-1' : ''"
+      >mdi-magnify</v-icon
+    ></v-btn
+  >
 </template>
diff --git a/frontend/src/components/common/RDialog.vue b/frontend/src/components/common/RDialog.vue
index 960d4ed1a..d1ff7eb40 100644
--- a/frontend/src/components/common/RDialog.vue
+++ b/frontend/src/components/common/RDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import EmptyFirmware from "@/components/common/EmptyFirmware.vue";
-import EmptyGame from "@/components/common/EmptyGame.vue";
-import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
+import EmptyFirmware from "@/components/common/EmptyStates/EmptyFirmware.vue";
+import EmptyGame from "@/components/common/EmptyStates/EmptyGame.vue";
+import EmptyPlatform from "@/components/common/EmptyStates/EmptyPlatform.vue";
 import RIsotipo from "@/components/common/RIsotipo.vue";
 import { onMounted, ref, useSlots } from "vue";
 
diff --git a/frontend/src/locales/de_DE/emptyStates.json b/frontend/src/locales/de_DE/emptyStates.json
new file mode 100644
index 000000000..0a8c6c29b
--- /dev/null
+++ b/frontend/src/locales/de_DE/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Suche nach Spielen auf allen Plattformen"
+}
diff --git a/frontend/src/locales/en_GB/emptyStates.json b/frontend/src/locales/en_GB/emptyStates.json
new file mode 100644
index 000000000..297c9aaef
--- /dev/null
+++ b/frontend/src/locales/en_GB/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Search for games across all platforms"
+}
diff --git a/frontend/src/locales/en_US/emptyStates.json b/frontend/src/locales/en_US/emptyStates.json
new file mode 100644
index 000000000..297c9aaef
--- /dev/null
+++ b/frontend/src/locales/en_US/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Search for games across all platforms"
+}
diff --git a/frontend/src/locales/es_ES/emptyStates.json b/frontend/src/locales/es_ES/emptyStates.json
new file mode 100644
index 000000000..9f94b0b3d
--- /dev/null
+++ b/frontend/src/locales/es_ES/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Buscar juegos en todas las plataformas"
+}
diff --git a/frontend/src/locales/fr_FR/emptyStates.json b/frontend/src/locales/fr_FR/emptyStates.json
new file mode 100644
index 000000000..4ace9c095
--- /dev/null
+++ b/frontend/src/locales/fr_FR/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Rechercher des jeux sur toutes les plateformes"
+}
diff --git a/frontend/src/locales/pt_BR/emptyStates.json b/frontend/src/locales/pt_BR/emptyStates.json
new file mode 100644
index 000000000..814643934
--- /dev/null
+++ b/frontend/src/locales/pt_BR/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Pesquisar jogos em todas as plataformas"
+}
diff --git a/frontend/src/locales/ru_RU/emptyStates.json b/frontend/src/locales/ru_RU/emptyStates.json
new file mode 100644
index 000000000..09108d1d5
--- /dev/null
+++ b/frontend/src/locales/ru_RU/emptyStates.json
@@ -0,0 +1,3 @@
+{
+  "search-for-games": "Искать игры на всех платформах"
+}
diff --git a/frontend/src/plugins/router.ts b/frontend/src/plugins/router.ts
index f1c85bd89..968d1a524 100644
--- a/frontend/src/plugins/router.ts
+++ b/frontend/src/plugins/router.ts
@@ -37,6 +37,11 @@ const routes = [
         name: "home",
         component: () => import("@/views/Home.vue"),
       },
+      {
+        path: "search",
+        name: "search",
+        component: () => import("@/views/Gallery/Search.vue"),
+      },
       {
         path: "platform/:platform",
         name: "platform",
@@ -68,7 +73,7 @@ const routes = [
         component: () => import("@/views/Scan.vue"),
       },
       {
-        path: "/user-interface",
+        path: "user-interface",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
@@ -79,7 +84,7 @@ const routes = [
         ],
       },
       {
-        path: "/library-management",
+        path: "library-management",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
@@ -90,7 +95,7 @@ const routes = [
         ],
       },
       {
-        path: "/administration",
+        path: "administration",
         component: () => import("@/layouts/Settings.vue"),
         children: [
           {
diff --git a/frontend/src/stores/galleryFilter.ts b/frontend/src/stores/galleryFilter.ts
index 9da323ec9..33937eea1 100644
--- a/frontend/src/stores/galleryFilter.ts
+++ b/frontend/src/stores/galleryFilter.ts
@@ -1,6 +1,8 @@
-import { normalizeString } from "@/utils";
+import type { PlatformSchema } from "@/__generated__";
+import { normalizeString, romStatusMap } from "@/utils";
 import { defineStore } from "pinia";
-import { romStatusMap } from "@/utils";
+
+export type Platform = PlatformSchema;
 
 const filters = [
   "genres",
@@ -18,7 +20,9 @@ export type FilterType = (typeof filters)[number];
 export default defineStore("galleryFilter", {
   state: () => ({
     activeFilterDrawer: false,
-    filterSearch: "",
+    searchText: "",
+    filterPlatforms: [] as Platform[],
+    filterText: "",
     filters: filters,
     filterGenres: [] as string[],
     filterFranchises: [] as string[],
@@ -42,8 +46,8 @@ export default defineStore("galleryFilter", {
     switchActiveFilterDrawer() {
       this.activeFilterDrawer = !this.activeFilterDrawer;
     },
-    setFilterSearch(filterSearch: string) {
-      this.filterSearch = normalizeString(filterSearch);
+    setFilterPlatforms(platforms: Platform[]) {
+      this.filterPlatforms = platforms;
     },
     setFilterGenres(genres: string[]) {
       this.filterGenres = genres;
@@ -106,7 +110,7 @@ export default defineStore("galleryFilter", {
     },
     isFiltered() {
       return Boolean(
-        normalizeString(this.filterSearch).trim() != "" ||
+        normalizeString(this.filterText).trim() != "" ||
           this.filterUnmatched ||
           this.filterMatched ||
           this.filterFavourites ||
diff --git a/frontend/src/stores/roms.ts b/frontend/src/stores/roms.ts
index 4a9cc6857..ff787938b 100644
--- a/frontend/src/stores/roms.ts
+++ b/frontend/src/stores/roms.ts
@@ -129,8 +129,8 @@ export default defineStore("roms", {
     // Filter roms by gallery filter store state
     setFiltered(roms: SimpleRom[], galleryFilter: GalleryFilterStore) {
       this._filteredIDs = new Set(roms.map((rom) => rom.id));
-      if (galleryFilter.filterSearch) {
-        this._filterSearch(galleryFilter.filterSearch);
+      if (galleryFilter.filterText) {
+        this._filterText(galleryFilter.filterText);
       }
       if (galleryFilter.filterUnmatched) {
         this._filterUnmatched();
@@ -170,7 +170,7 @@ export default defineStore("roms", {
         );
       }
     },
-    _filterSearch(searchFilter: string) {
+    _filterText(searchFilter: string) {
       const bySearch = new Set(
         this.filteredRoms
           .filter(
diff --git a/frontend/src/views/Gallery/Collection.vue b/frontend/src/views/Gallery/Collection.vue
index 03d7467ea..56c2423c7 100644
--- a/frontend/src/views/Gallery/Collection.vue
+++ b/frontend/src/views/Gallery/Collection.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import GalleryAppBarCollection from "@/components/Gallery/AppBar/Collection/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
-import EmptyCollection from "@/components/common/EmptyCollection.vue";
-import EmptyGame from "@/components/common/EmptyGame.vue";
+import EmptyCollection from "@/components/common/EmptyStates/EmptyCollection.vue";
+import EmptyGame from "@/components/common/EmptyStates/EmptyGame.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
 import romApi from "@/services/api/rom";
@@ -56,7 +56,7 @@ async function fetchRoms() {
   await romApi
     .getRoms({
       collectionId: romsStore.currentCollection?.id,
-      searchTerm: normalizeString(galleryFilterStore.filterSearch),
+      searchTerm: normalizeString(galleryFilterStore.filterText),
     })
     .then(({ data }) => {
       romsStore.set(data);
@@ -204,6 +204,7 @@ function onScroll() {
 function resetGallery() {
   romsStore.reset();
   galleryFilterStore.reset();
+  galleryFilterStore.activeFilterDrawer = false;
   scrolledToTop.value = true;
   noCollectionError.value = false;
   itemsShown.value = itemsPerBatch.value;
diff --git a/frontend/src/views/Gallery/Platform.vue b/frontend/src/views/Gallery/Platform.vue
index e0fbebbb0..8c757cc53 100644
--- a/frontend/src/views/Gallery/Platform.vue
+++ b/frontend/src/views/Gallery/Platform.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import GalleryAppBar from "@/components/Gallery/AppBar/Platform/Base.vue";
 import FabOverlay from "@/components/Gallery/FabOverlay.vue";
-import EmptyGame from "@/components/common/EmptyGame.vue";
-import EmptyPlatform from "@/components/common/EmptyPlatform.vue";
+import EmptyGame from "@/components/common/EmptyStates/EmptyGame.vue";
+import EmptyPlatform from "@/components/common/EmptyStates/EmptyPlatform.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import GameDataTable from "@/components/common/Game/Table.vue";
 import romApi from "@/services/api/rom";
@@ -56,7 +56,7 @@ async function fetchRoms() {
   await romApi
     .getRoms({
       platformId: romsStore.currentPlatform?.id,
-      searchTerm: normalizeString(galleryFilterStore.filterSearch),
+      searchTerm: normalizeString(galleryFilterStore.filterText),
     })
     .then(({ data }) => {
       romsStore.set(data);
@@ -204,6 +204,7 @@ function onScroll() {
 function resetGallery() {
   romsStore.reset();
   galleryFilterStore.reset();
+  galleryFilterStore.activeFilterDrawer = false;
   scrolledToTop.value = true;
   noPlatformError.value = false;
   itemsShown.value = itemsPerBatch.value;
diff --git a/frontend/src/views/Gallery/Search.vue b/frontend/src/views/Gallery/Search.vue
new file mode 100644
index 000000000..0ec043aea
--- /dev/null
+++ b/frontend/src/views/Gallery/Search.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import GalleryAppBarSearch from "@/components/Gallery/AppBar/Search/Base.vue";
+import FabOverlay from "@/components/Gallery/FabOverlay.vue";
+import EmptySearch from "@/components/common/EmptyStates/EmptySearch.vue";
+import EmptyGame from "@/components/common/EmptyStates/EmptyGame.vue";
+import GameCard from "@/components/common/Game/Card/Base.vue";
+import GameDataTable from "@/components/common/Game/Table.vue";
+import storeGalleryFilter from "@/stores/galleryFilter";
+import storeGalleryView from "@/stores/galleryView";
+import storeRoms, { type SimpleRom } from "@/stores/roms";
+import type { Events } from "@/types/emitter";
+import type { Emitter } from "mitt";
+import { views } from "@/utils";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { inject, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useDisplay } from "vuetify";
+
+// Props
+const { smAndDown } = useDisplay();
+const galleryViewStore = storeGalleryView();
+const { scrolledToTop, currentView } = storeToRefs(galleryViewStore);
+const galleryFilterStore = storeGalleryFilter();
+const { searchText } = storeToRefs(galleryFilterStore);
+const romsStore = storeRoms();
+const {
+  allRoms,
+  filteredRoms,
+  selectedRoms,
+  currentPlatform,
+  currentCollection,
+  itemsPerBatch,
+  gettingRoms,
+} = storeToRefs(romsStore);
+const itemsShown = ref(itemsPerBatch.value);
+let timeout: ReturnType<typeof setTimeout>;
+const emitter = inject<Emitter<Events>>("emitter");
+emitter?.on("filter", onFilterChange);
+const { t } = useI18n();
+const router = useRouter();
+const initialSearch = ref(false);
+
+// Functions
+function setFilters() {
+  galleryFilterStore.setFilterGenres([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.genres.map((genre) => genre))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterFranchises([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.franchises.map((franchise) => franchise))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCompanies([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.companies.map((company) => company))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterCollections([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.collections.map((collection) => collection))
+        .sort(),
+    ),
+  ]);
+  galleryFilterStore.setFilterAgeRatings([
+    ...new Set(
+      romsStore.filteredRoms
+        .flatMap((rom) => rom.age_ratings.map((ageRating) => ageRating))
+        .sort(),
+    ),
+  ]);
+}
+
+async function onFilterChange() {
+  romsStore.setFiltered(allRoms.value, galleryFilterStore);
+  emitter?.emit("updateDataTablePages", null);
+}
+
+function onGameClick(emitData: { rom: SimpleRom; event: MouseEvent }) {
+  let index = filteredRoms.value.indexOf(emitData.rom);
+  if (
+    emitData.event.shiftKey ||
+    romsStore.selecting ||
+    romsStore.selectedRoms.length > 0
+  ) {
+    emitData.event.preventDefault();
+    emitData.event.stopPropagation();
+    if (!selectedRoms.value.includes(emitData.rom)) {
+      romsStore.addToSelection(emitData.rom);
+    } else {
+      romsStore.removeFromSelection(emitData.rom);
+    }
+    if (emitData.event.shiftKey) {
+      const [start, end] = [romsStore.lastSelectedIndex, index].sort(
+        (a, b) => a - b,
+      );
+      if (romsStore.selectedRoms.includes(emitData.rom)) {
+        for (let i = start + 1; i < end; i++) {
+          romsStore.addToSelection(filteredRoms.value[i]);
+        }
+      } else {
+        for (let i = start; i <= end; i++) {
+          romsStore.removeFromSelection(filteredRoms.value[i]);
+        }
+      }
+      romsStore.updateLastSelected(
+        romsStore.selectedRoms.includes(emitData.rom) ? index : index - 1,
+      );
+    } else {
+      romsStore.updateLastSelected(index);
+    }
+  } else 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 } });
+  }
+}
+
+function onGameTouchStart(emitData: { rom: SimpleRom; event: TouchEvent }) {
+  timeout = setTimeout(() => {
+    romsStore.addToSelection(emitData.rom);
+  }, 500);
+}
+
+function onGameTouchEnd() {
+  clearTimeout(timeout);
+}
+
+function onScroll() {
+  if (currentView.value != 2) {
+    window.setTimeout(async () => {
+      const { scrollTop, scrollHeight, clientHeight } =
+        document.documentElement;
+      scrolledToTop.value = scrollTop === 0;
+      const totalScrollableHeight = scrollHeight - clientHeight;
+      const ninetyPercentPoint = totalScrollableHeight * 0.9;
+      if (
+        scrollTop >= ninetyPercentPoint &&
+        itemsShown.value < filteredRoms.value.length
+      ) {
+        itemsShown.value = itemsShown.value + itemsPerBatch.value;
+        setFilters();
+        galleryViewStore.scroll = scrollHeight;
+      }
+    }, 100);
+    clearTimeout(timeout);
+  }
+}
+
+function resetGallery() {
+  romsStore.reset();
+  galleryFilterStore.reset();
+  galleryFilterStore.activeFilterDrawer = false;
+  scrolledToTop.value = true;
+  itemsShown.value = itemsPerBatch.value;
+}
+
+onMounted(async () => {
+  currentPlatform.value = null;
+  currentCollection.value = null;
+  resetGallery();
+  window.addEventListener("wheel", onScroll);
+  window.addEventListener("scroll", onScroll);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("wheel", onScroll);
+  window.removeEventListener("scroll", onScroll);
+  searchText.value = "";
+});
+</script>
+
+<template>
+  <gallery-app-bar-search />
+  <template v-if="filteredRoms.length > 0">
+    <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)"
+        :key="rom.id"
+        class="pa-1 align-self-end"
+        :cols="views[currentView]['size-cols']"
+        :sm="views[currentView]['size-sm']"
+        :md="views[currentView]['size-md']"
+        :lg="views[currentView]['size-lg']"
+        :xl="views[currentView]['size-xl']"
+      >
+        <game-card
+          :key="rom.updated_at"
+          :rom="rom"
+          title-on-hover
+          pointer-on-hover
+          with-link
+          show-flags
+          show-action-bar
+          show-fav
+          transform-scale
+          with-border
+          show-platform-icon
+          :with-border-romm-accent="
+            romsStore.isSimpleRom(rom) && selectedRoms?.includes(rom)
+          "
+          @click="onGameClick"
+          @touchstart="onGameTouchStart"
+          @touchend="onGameTouchEnd"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- 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>
+  <template v-else>
+    <empty-game
+      v-if="!gettingRoms && galleryFilterStore.isFiltered() && initialSearch"
+    />
+    <empty-search v-else-if="!initialSearch" />
+  </template>
+</template>
diff --git a/frontend/src/views/GameDetails.vue b/frontend/src/views/GameDetails.vue
index e612e9d81..04da549b4 100644
--- a/frontend/src/views/GameDetails.vue
+++ b/frontend/src/views/GameDetails.vue
@@ -9,7 +9,7 @@ import RelatedGames from "@/components/Details/RelatedGames.vue";
 import Saves from "@/components/Details/Saves.vue";
 import States from "@/components/Details/States.vue";
 import TitleInfo from "@/components/Details/Title.vue";
-import EmptyGame from "@/components/common/EmptyGame.vue";
+import EmptyGame from "@/components/common/EmptyStates/EmptyGame.vue";
 import GameCard from "@/components/common/Game/Card/Base.vue";
 import romApi from "@/services/api/rom";
 import storeDownload from "@/stores/download";