diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 187352614..705774d31 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, inject, onMounted } from "vue"
 import { useTheme, useDisplay } from "vuetify"
-import { fetchPlatforms } from '@/services/api.js'
+import { fetchPlatformsApi } from '@/services/api.js'
 import { storePlatforms } from '@/stores/platforms.js'
 import { storeScanning } from '@/stores/scanning.js'
 import Drawer from '@/components/Drawer/Base.vue'
@@ -19,7 +19,7 @@ useTheme().global.name.value = localStorage.getItem('theme') || 'rommDark'
 // Event listeners bus
 const emitter = inject('emitter')
 emitter.on('refresPlatforms', () => {
-  fetchPlatforms()
+  fetchPlatformsApi()
     .then((res) => { platforms.set(res.data.data) })
     .catch((error) => { console.log(error);console.log("Couldn't fetch platforms") })
     refresPlatforms.value = !refresPlatforms.value
@@ -29,9 +29,9 @@ emitter.on('refreshGallery', () => {
   refreshGallery.value = !refreshGallery.value
 })
 
-// Startup
+
 onMounted(() => {
-  fetchPlatforms()
+  fetchPlatformsApi()
     .then((res) => { platforms.set(res.data.data) })
     .catch((error) => { console.log(error);console.log("Couldn't fetch platforms") })
 })
@@ -40,26 +40,25 @@ onMounted(() => {
 <template>
   <v-app>
 
-    <notification class="mt-6"/>
+    <notification id="notification" class="mt-6"/>
+
+    <v-progress-linear id="scan-progress-bar" color="rommAccent1" :active="scanning.value" :indeterminate="true" absolute fixed/>
 
-    <v-progress-linear class="scan-progress-bar" color="rommAccent1" :active="scanning.value" :indeterminate="true" absolute/>
+    <drawer id="drawer" :key="refresPlatforms"/>
 
-    <drawer :key="refresPlatforms"/>
+    <app-bar v-if="mdAndDown"/>
 
     <v-main>
-      <v-container class="pa-0" fluid>
-        <app-bar v-if="mdAndDown"/>
+      <v-container id="main-container" class="pa-1" fluid>
         <router-view :key="refreshGallery"/>
       </v-container>
     </v-main>
 
-
   </v-app>
 </template>
 
 <style>
 @import '@/styles/scrollbar.css';
-.scan-progress-bar {
-  z-index: 1000 !important;
-}
+#scan-progress-bar { z-index: 1000 !important; }
+#main-container { height: 100%; }
 </style>
diff --git a/frontend/src/components/Drawer/Platform.vue b/frontend/src/components/Drawer/Platform.vue
index 4c362b275..1eaec57b3 100644
--- a/frontend/src/components/Drawer/Platform.vue
+++ b/frontend/src/components/Drawer/Platform.vue
@@ -7,7 +7,7 @@ const props = defineProps(['platform', 'rail'])
     <v-list-item :to="`/platform/${platform.slug}`" :value="platform.slug" :key="platform" class="pt-4 pb-4 bg-terciary">
         <span class="text-body-2 text-truncate">{{ rail ? '' : platform.name }}</span>
         <template v-slot:prepend>
-            <v-avatar :rounded="0" size="40"><v-img :src="'/assets/platforms/'+platform.slug+'.ico'"></v-img></v-avatar>
+            <v-avatar :rounded="0" size="40"><v-img :src="`/assets/platforms/${platform.slug}.ico`"></v-img></v-avatar>
         </template>
         <template v-slot:append>
             <v-chip class="ml-4 bg-chip" size="x-small" label>{{ platform.n_roms }}</v-chip>
diff --git a/frontend/src/components/GameDetails/BackgroundHeader.vue b/frontend/src/components/GameDetails/BackgroundHeader.vue
index 2387dcec6..536b75912 100644
--- a/frontend/src/components/GameDetails/BackgroundHeader.vue
+++ b/frontend/src/components/GameDetails/BackgroundHeader.vue
@@ -4,7 +4,7 @@ const props = defineProps(['rom'])
 
 <template>
     <v-card class="header-background" position="absolute" rounded="0" flat>
-        <v-img :src="'/assets/romm/resources/'+rom.path_cover_s" class="header-background-img" cover/>
+        <v-img :src="`/assets/romm/resources/${rom.path_cover_s}?reload=${Date.now()}`" class="header-background-img" cover/>
     </v-card>
 </template>
 
diff --git a/frontend/src/components/GameGallery/Card/Cover.vue b/frontend/src/components/GameGallery/Card/Cover.vue
index d3eaea0b4..f2d1e4628 100644
--- a/frontend/src/components/GameGallery/Card/Cover.vue
+++ b/frontend/src/components/GameGallery/Card/Cover.vue
@@ -1,6 +1,7 @@
 <script setup>
 // Props
 const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
+const forceImgReload = Date.now()
 </script>
 
 <template>
@@ -11,8 +12,8 @@ const props = defineProps(['rom', 'isHovering', 'hoverProps', 'size'])
             :value="rom.id"
             :key="rom.id"
             v-bind="hoverProps"
-            :src="'/assets/romm/resources/'+rom.path_cover_l"
-            :lazy-src="'/assets/romm/resources/'+rom.path_cover_s"
+            :src="`/assets/romm/resources/${rom.path_cover_l}?reload=${forceImgReload}`"
+            :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
             class="cover"
             cover>
             <template v-slot:placeholder>
diff --git a/frontend/src/components/GameGallery/ListItem/Item.vue b/frontend/src/components/GameGallery/ListItem/Item.vue
index 2e5a01333..bd05949eb 100644
--- a/frontend/src/components/GameGallery/ListItem/Item.vue
+++ b/frontend/src/components/GameGallery/ListItem/Item.vue
@@ -5,6 +5,7 @@ import { storeDownloading } from '@/stores/downloading.js'
 
 // Props
 const props = defineProps(['rom'])
+const forceImgReload = Date.now()
 const saveFiles = ref(false)
 const downloading = storeDownloading()
 
@@ -32,8 +33,8 @@ const emitter = inject('emitter')
                     <v-avatar :rounded="0">
                         <v-progress-linear color="rommAccent1" :active="downloading.value.includes(rom.file_name)" :indeterminate="true" absolute/>
                         <v-img
-                        :src="'/assets/romm/resources/'+rom.path_cover_s"
-                        :lazy-src="'/assets/romm/resources/'+rom.path_cover_s"
+                        :src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
+                        :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${forceImgReload}`"
                         min-height="150"/>
                     </v-avatar>
                 </template>
diff --git a/frontend/src/components/Home/Platform.vue b/frontend/src/components/Home/Platform.vue
index b9a865545..40ac64b65 100644
--- a/frontend/src/components/Home/Platform.vue
+++ b/frontend/src/components/Home/Platform.vue
@@ -2,12 +2,12 @@
 import { ref } from 'vue'
 
 const props = defineProps(['platform'])
-const platformIconUrl = ref('/assets/platforms/' + props.platform.slug + '.ico')
+const platformIconUrl = ref(`/assets/platforms/${props.platform.slug}.ico`)
 const platformIconNotFound = () => { platformIconUrl.value = '/assets/platforms/default.ico' }
 </script>
 
 <template>
-    <router-link style="text-decoration: none; color: inherit;" :to="`/platform/${platform.slug}`">
+    <router-link id="router-link" :to="`/platform/${platform.slug}`">
         <v-hover v-slot="{ isHovering, props }">
             <v-card v-bind="props" :class="{ 'on-hover': isHovering }" :elevation="isHovering ? 20 : 3">
                 <v-card-text>
@@ -29,4 +29,8 @@ const platformIconNotFound = () => { platformIconUrl.value = '/assets/platforms/
 </template>
 
 <style scoped>
+#router-link{
+    text-decoration: none;
+    color: inherit;
+}
 </style>
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index c669f3b65..2a6bac24e 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -1,6 +1,26 @@
 import axios from 'axios'
 
 
-export async function fetchPlatforms () {
+export async function fetchPlatformsApi () {
     return axios.get('/api/platforms')
 }
+
+export async function fetchRomsApi (platform) {
+    return axios.get(`/api/platforms/${platform}/roms`)
+}
+
+export async function fetchRomApi (platform, rom) {
+    return axios.get(`/api/platforms/${platform}/roms/${rom}`)
+}
+
+export async function updateRomApi (rom, updatedRom) {
+    return axios.patch(`/api/platforms/${rom.p_slug}/roms/${rom.id}`, { updatedRom: updatedRom })
+}
+
+export async function deleteRomApi (rom, deleteFromFs) {
+    return axios.delete(`/api/platforms/${rom.p_slug}/roms/${rom.id}?filesystem=${deleteFromFs}`)
+}
+
+export async function searchRomApi (searchTerm, searchBy, rom) {
+    return axios.put(`/api/search/roms/igdb?search_term=${searchTerm}&search_by=${searchBy}`, { rom: rom })
+}
diff --git a/frontend/src/services/download.js b/frontend/src/services/download.js
index 750759997..236d217f4 100644
--- a/frontend/src/services/download.js
+++ b/frontend/src/services/download.js
@@ -6,16 +6,16 @@ const downloading = storeDownloading()
 
 export async function downloadRom(rom, emitter, filesToDownload=[]) {
     downloading.add(rom.file_name)
-    emitter.emit('snackbarScan', {'msg': "Downloading "+rom.file_name+"...", 'icon': 'mdi-download', 'color': 'green'})
+    emitter.emit('snackbarScan', {'msg': `Downloading ${rom.file_name}...`, 'icon': 'mdi-download', 'color': 'green'})
     if(rom.multi){
         const zip = new JSZip()
-        var zipFilename = rom.file_name+".zip"
+        var zipFilename = `${rom.file_name}.zip`
         var files = []
         filesToDownload.forEach(f => {files.push(f)})
         if (files.length == 0){ files = rom.files }
         var count = 0
         files.forEach(async function (file_part) {
-            var file_full_path = "/assets/romm/library/"+rom.file_path+"/"+rom.file_name+"/"+file_part
+            var file_full_path = `/assets/romm/library/${rom.file_path}/${rom.file_name}/${file_part}`
             var file = await fetch(file_full_path)
             var fileBlob = await file.blob()
             var f = zip.folder(rom.file_name);
@@ -25,7 +25,7 @@ export async function downloadRom(rom, emitter, filesToDownload=[]) {
         })
     }
     else{
-        var file_full_path = "/assets/romm/library/"+rom.file_path+"/"+rom.file_name
+        var file_full_path = `/assets/romm/library/${rom.file_path}/${rom.file_name}`
         var file = await fetch(file_full_path)
         var fileBlob = await file.blob()
         saveAs(fileBlob, rom.file_name)
@@ -33,4 +33,4 @@ export async function downloadRom(rom, emitter, filesToDownload=[]) {
     downloading.remove(rom.file_name)
 }
 
-export async function downloadSave(rom) { console.log("Downloading "+rom.file_name+" save file") }
\ No newline at end of file
+export async function downloadSave(rom) { console.log(`Downloading ${rom.file_name} save file`) }
\ No newline at end of file
diff --git a/frontend/src/styles/scrollbar.css b/frontend/src/styles/scrollbar.css
index b136c4bd6..e8b528d89 100644
--- a/frontend/src/styles/scrollbar.css
+++ b/frontend/src/styles/scrollbar.css
@@ -1,12 +1,12 @@
 /* Firefox */
 * {
-    scrollbar-width: none;
+    scrollbar-width: thin;
     scrollbar-color: #6e6e6e rgba(0, 0, 0, 0);;
 }
   
 /* Chrome, Edge, and Safari */
 *::-webkit-scrollbar {
-    width: 0px;
+    width: 3px;
 }
 
 *::-webkit-scrollbar-track {
diff --git a/frontend/src/views/Details.vue b/frontend/src/views/Details.vue
index 99fa4a1c6..82a67f43d 100644
--- a/frontend/src/views/Details.vue
+++ b/frontend/src/views/Details.vue
@@ -1,8 +1,8 @@
 <script setup>
-import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useDisplay } from "vuetify"
+import { fetchRomApi, updateRomApi, deleteRomApi, searchRomApi } from '@/services/api.js'
 import { downloadRom, downloadSave } from '@/services/download.js'
 import { storeDownloading } from '@/stores/downloading.js'
 import BackgroundHeader from '@/components/GameDetails/BackgroundHeader.vue'
@@ -37,11 +37,11 @@ const emitter = inject('emitter')
 async function searchRomIGDB() {
     searching.value = true
     dialogSearchRom.value = true
-    await axios.put('/api/search/roms/igdb?search_term='+searchTerm.value+'&search_by='+searchBy.value, {
-        rom: rom.value
-    }).then((response) => {
+    await searchRomApi(searchTerm.value, searchBy.value, rom.value)
+    .then((response) => {
         matchedRoms.value = response.data.data
-    }).catch((error) => {console.log(error)})
+    })
+    .catch((error) => {console.log(error)})
     searching.value = false
 }
 
@@ -55,11 +55,12 @@ async function updateRom(updatedData={...updatedRom.value}) {
     updatedRom.value.url_screenshots = updatedData.url_screenshots
     updatedRom.value.r_name = updatedData.r_name
     if (renameAsIGDB.value) { updatedRom.value.file_name = updatedRom.value.file_name.replace(updatedRom.value.file_name_no_tags, updatedData.r_name) }
-    await axios.patch('/api/platforms/'+rom.value.p_slug+'/roms/'+rom.value.id, { updatedRom: updatedRom.value }).then((response) => {
+    await updateRomApi(rom.value, updatedRom.value)
+    .then((response) => {
         rom.value = response.data.data
         updatedRom.value = {...response.data.data}
         emitter.emit('snackbarScan', {'msg': response.data.msg, 'icon': 'mdi-check-bold', 'color': 'green'})
-        router.push('/platform/'+rom.value.p_slug+'/'+rom.value.id)
+        emitter.emit('refreshGallery')
     }).catch((error) => {
         emitter.emit('snackbarScan', {'msg': error.response.data.detail, 'icon': 'mdi-close-circle', 'color': 'red'})
     })
@@ -69,22 +70,22 @@ async function updateRom(updatedData={...updatedRom.value}) {
 }
 
 async function deleteRom() {
-    await axios.delete('/api/platforms/'+rom.value.p_slug+'/roms/'+rom.value.id+'?filesystem='+deleteFromFs.value)
+    await deleteRomApi(rom.value.p_slug, deleteFromFs.value)
     .then((response) => {
         emitter.emit('snackbarScan', {'msg': response.data.msg, 'icon': 'mdi-check-bold', 'color': 'green'})
-        router.push('/platform/'+rom.value.p_slug)
+        router.push(`/platform/${rom.value.p_slug}`)
     }).catch((error) => {
         console.log(error)
         emitter.emit('snackbarScan', {'msg': error.response.data.detail, 'icon': 'mdi-close-circle', 'color': 'red'})
-        if (error.response.status == 404) { router.push('/platform/'+rom.value.p_slug) }
+        if (error.response.status == 404) { router.push(`/platform/${rom.value.p_slug}`) }
     })
     dialogDeleteRom.value = false
 }
 
-async function rescan() { console.log("rescan "+rom.value.id) }
 
 onMounted(() => {
-    axios.get(`/api/platforms/${route.params.platform}/roms/${route.params.rom}`).then(response => {
+    fetchRomApi(route.params.platform, route.params.rom)
+    .then(response => {
         rom.value = response.data.data
         updatedRom.value = {...response.data.data}
         loading.value = false
@@ -102,7 +103,7 @@ onMounted(() => {
                 <v-row>
                     <v-col>
                         <v-card elevation="2" :loading="downloading.value.includes(rom.file_name) ? 'rommAccent1': null">
-                            <v-img :src="'/assets/romm/resources/'+rom.path_cover_l" :lazy-src="'/assets/romm/resources/'+rom.path_cover_s" cover>
+                            <v-img :src="`/assets/romm/resources/${rom.path_cover_l}?reload=${Date.now()}`" :lazy-src="`/assets/romm/resources/${rom.path_cover_s}?reload=${Date.now()}`" cover>
                                 <template v-slot:placeholder>
                                     <div class="d-flex align-center justify-center fill-height">
                                         <v-progress-circular color="rommAccent1" :width="2" :size="20" indeterminate/>
@@ -183,7 +184,7 @@ onMounted(() => {
                             <v-row v-if="rom.r_igdb_id!=''" class="d-flex align-center text-body-1 mt-0">
                                 <v-col cols="3" xs="3" sm="2" md="2" lg="2" class="font-weight-medium"><span>IGDB</span></v-col>
                                 <v-col>
-                                    <v-chip variant="outlined" :href="'https://www.igdb.com/games/'+rom.r_slug" label>{{ rom.r_igdb_id }}</v-chip>
+                                    <v-chip variant="outlined" :href="`https://www.igdb.com/games/${rom.r_slug}`" label>{{ rom.r_igdb_id }}</v-chip>
                                 </v-col>
                             </v-row>
                             <v-row v-if="rom.tags.length>0" class="d-flex align-center text-body-1 mt-0">
@@ -197,7 +198,7 @@ onMounted(() => {
                         <v-window-item value="screenshots">
                             <v-row class="d-flex mt-2">
                                 <v-carousel hide-delimiter-background delimiter-icon="mdi-square" class="bg-rommBlack" show-arrows="hover" height="400">
-                                    <v-carousel-item v-for="screenshot in rom.path_screenshots" :src="'/assets/romm/resources/'+screenshot"/>
+                                    <v-carousel-item v-for="screenshot in rom.path_screenshots" :src="`/assets/romm/resources/${screenshot}`"/>
                                 </v-carousel>
                             </v-row>
                         </v-window-item>
diff --git a/frontend/src/views/Gallery.vue b/frontend/src/views/Gallery.vue
index a5c5fb1e1..b5326a3fc 100644
--- a/frontend/src/views/Gallery.vue
+++ b/frontend/src/views/Gallery.vue
@@ -1,9 +1,9 @@
 <script setup>
-import axios from 'axios'
 import { ref, inject, onMounted } from 'vue'
 import { onBeforeRouteUpdate, useRoute } from 'vue-router'
 import { io } from "socket.io-client";
 import { views } from '@/utils/utils.js'
+import { fetchRomsApi } from '@/services/api.js'
 import { storeFilter } from '@/stores/filter.js'
 import { storeGalleryView } from '@/stores/galleryView.js'
 import { normalizeString } from '@/utils/utils.js'
@@ -15,26 +15,33 @@ import GameListItem from '@/components/GameGallery/ListItem/Item.vue'
 import { storeScanning } from '@/stores/scanning.js'
 
 
+import { useDisplay } from "vuetify"
+import { downloadRom, downloadSave } from '@/services/download.js'
+import { storeDownloading } from '@/stores/downloading.js'
+import BackgroundHeader from '@/components/GameDetails/BackgroundHeader.vue'
+const { xs, mdAndDown, lgAndUp } = useDisplay()
+
+
 // Props
+const route = useRoute()
+// const sections = ['roms', 'firmwares']
+const currentSection = ref('roms')
 const roms = ref([])
 const gettingRoms = ref(false)
 const filter = storeFilter()
-const galleryView = storeGalleryView()
-const route = useRoute()
 const romsFiltered = ref([])
 // const firmwares = ["firmware_base", "firmware_bios"]
-// const sections = ['roms', 'firmwares']
-const currentSection = ref('roms')
+const galleryView = storeGalleryView()
 const scanning = storeScanning()
 
 // Event listeners bus
 const emitter = inject('emitter')
 emitter.on('filter', () => { filterRoms() })
 
-
+// Functions
 async function scan() {
     scanning.set(true);
-    emitter.emit('snackbarScan', {'msg': "Scanning "+route.params.platform+"...", 'icon': 'mdi-check-bold', 'color': 'green'})
+    emitter.emit('snackbarScan', {'msg': `Scanning ${route.params.platform}...`, 'icon': 'mdi-check-bold', 'color': 'green'})
     const socket = io({ path: '/ws/socket.io/', transports: ['websocket', 'polling'] })    
     socket.on("done", () => {
         scanning.set(false)
@@ -44,13 +51,12 @@ async function scan() {
     })
     socket.on("done_ko", (msg) => {
         scanning.set(false)
-        emitter.emit('snackbarScan', {'msg': "Scan couldn't be completed. Something went wrong: "+msg, 'icon': 'mdi-close-circle', 'color': 'red'})
+        emitter.emit('snackbarScan', {'msg': `Scan couldn't be completed. Something went wrong: ${msg}`, 'icon': 'mdi-close-circle', 'color': 'red'})
         socket.close()
     })
     socket.emit("scan", JSON.stringify([route.params.platform]), false)
 }
 
-
 function filterRoms() {
     romsFiltered.value = roms.value.filter(rom => {
         return normalizeString(rom.file_name).includes(filter.value)
@@ -59,10 +65,12 @@ function filterRoms() {
 
 async function fetchRoms(platform) {
     gettingRoms.value = true
-    await axios.get('/api/platforms/'+platform+'/roms').then((response) => {
-        roms.value = response.data.data
-        filterRoms()
-    }).catch((error) => {console.log(error)})
+    await fetchRomsApi(platform)
+        .then((response) => {
+            roms.value = response.data.data
+            filterRoms()
+        })
+    .catch((error) => {console.log(error);console.log(`Couldn't fetch roms for ${platform}`)})
     gettingRoms.value = false
 }
 
@@ -72,73 +80,63 @@ onBeforeRouteUpdate(async (to, _) => { fetchRoms(to.params.platform) })
 
 <template>
     
-    <v-app-bar class="gallery-app-bar" elevation="0" density="compact">
+    <v-app-bar id="gallery-app-bar" elevation="0" density="compact">
         <!-- <v-select item-title="name" :items="sections" v-model="currentSection" hide-details/> -->
         <filter-bar/>
         <gallery-view-btn/>
         <v-btn @click="scan" rounded="0" variant="text" class="mr-0" icon="mdi-magnify-scan"/>
     </v-app-bar>
-
-    <v-row v-show="currentSection == 'roms'" no-gutters>
-
-        <v-row v-show="!gettingRoms && galleryView.value != 2 && roms.length>0" class="pa-1" no-gutters>
-            <v-col v-for="rom in romsFiltered" class="pa-1"
-                :key="rom.file_name"
-                :cols="views[galleryView.value]['size-cols']"
-                :xs="views[galleryView.value]['size-xs']"
-                :sm="views[galleryView.value]['size-sm']"
-                :md="views[galleryView.value]['size-md']"
-                :lg="views[galleryView.value]['size-lg']">
-                <game-card :rom="rom"/>
-            </v-col>
-        </v-row>
-
-        <v-row v-show="!gettingRoms && galleryView.value == 2 && roms.length>0" class="pa-1" no-gutters>
-            <v-col class="pa-1"
-                :cols="views[galleryView.value]['size-cols']"
-                :xs="views[galleryView.value]['size-xs']"
-                :sm="views[galleryView.value]['size-sm']"
-                :md="views[galleryView.value]['size-md']"
-                :lg="views[galleryView.value]['size-lg']">
-                <v-table class="bg-secondary">
-                    <game-list-header />
-                    <v-divider class="border-opacity-100 mb-4 ml-2 mr-2" color="rommAccent1" :thickness="1"/>
-                    <tbody>
-                        <game-list-item v-for="rom in romsFiltered" :key="rom.file_name" :rom="rom"/>
-                    </tbody>
-                </v-table>
-            </v-col>
+    
+    <template v-if="gettingRoms">
+        <v-row class="fill-height justify-center align-center" no-gutters>
+            <v-progress-circular color="rommAccent1" :width="3" :size="70" indeterminate/>
         </v-row>
+    </template>
+    <template v-else>
+        <template v-if="roms.length>0">
+
+            <v-row v-show="galleryView.value != 2" id="card-view" no-gutters>
+                <v-col v-for="rom in romsFiltered" class="pa-1" :key="rom.file_name"
+                    :cols="views[galleryView.value]['size-cols']"
+                    :xs="views[galleryView.value]['size-xs']"
+                    :sm="views[galleryView.value]['size-sm']"
+                    :md="views[galleryView.value]['size-md']"
+                    :lg="views[galleryView.value]['size-lg']">
+                    <game-card :rom="rom"/>
+                </v-col>
+            </v-row>
+
+            <v-row v-show="galleryView.value == 2" id="list-view" no-gutters>
+                <v-col
+                    :cols="views[galleryView.value]['size-cols']"
+                    :xs="views[galleryView.value]['size-xs']"
+                    :sm="views[galleryView.value]['size-sm']"
+                    :md="views[galleryView.value]['size-md']"
+                    :lg="views[galleryView.value]['size-lg']">
+                    <v-table class="bg-secondary">
+                        <game-list-header/>
+                        <v-divider class="border-opacity-100 mb-4 ml-2 mr-2" color="rommAccent1" :thickness="1"/>
+                        <tbody>
+                            <game-list-item v-for="rom in romsFiltered" :key="rom.file_name" :rom="rom"/>
+                        </tbody>
+                    </v-table>
+                </v-col>
+            </v-row>
+
+        </template>
+
+        <template v-else>
+
+            <v-row class="fill-height justify-center align-center" no-gutters>
+                <div class="text-h6">Feels cold here... <v-icon>mdi-emoticon-sad</v-icon></div>
+            </v-row>
+
+        </template>
         
-        <v-row v-if="!gettingRoms && roms.length==0" no-gutters>
-            <div class="text-h6 mt-16 mx-auto">Feels cold here... <v-icon>mdi-emoticon-sad</v-icon></div>
-        </v-row>
-
-        <v-row v-if="gettingRoms" no-gutters>
-            <v-progress-circular class="mt-16 mx-auto" color="rommAccent1" :width="3" :size="70" indeterminate/>
-        </v-row>
-
-    </v-row>
-    
-    <!-- <v-row v-show="currentSection == 'firmwares'" no-gutters>
-        <v-col v-for="firmware in firmwares" class="pa-1"
-            :key="firmware"
-            :cols="views[galleryView.value]['size-cols']"
-            :xs="views[galleryView.value]['size-xs']"
-            :sm="views[galleryView.value]['size-sm']"
-            :md="views[galleryView.value]['size-md']"
-            :lg="views[galleryView.value]['size-lg']">
-            <v-card>
-                <v-card-text>
-                    <span>{{ firmware }}</span>
-                </v-card-text>
-            </v-card>
-        </v-col>
-    </v-row> -->
+    </template>
 
 </template>
+
 <style scoped>
-.gallery-app-bar {
-    z-index: 999 !important;
-}
+#gallery-app-bar { z-index: 999 !important; }
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index cabc23a73..429d2c602 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -5,37 +5,48 @@ import { views } from '@/utils/utils.js'
 import Platform from '@/components/Home/Platform.vue'
 import { storePlatforms } from '@/stores/platforms.js'
 
+// Props
 const platforms = storePlatforms()
 const totalGames = ref(platforms.value.reduce((count, p) => { return count + p.n_roms }, 0))
 const { lgAndUp } = useDisplay()
 </script>
 
 <template>
-    <v-col>
-        <v-card class="mx-auto mt-10 mb-10" max-width="1000" variant="text">
-            <v-img :height="lgAndUp ? 220 : 95" src="/assets/romm_complete.svg" cover />
-        </v-card>
 
-        <v-row no-gutters class="mt-4">
-            <v-chip class="ma-2 bg-chip" label>
-                <span class="text-overline">{{ platforms.value.length }} platforms</span>
-            </v-chip>
-            <v-chip class="ma-2 bg-chip" label>
-                <span class="text-overline">{{ totalGames }} games</span>
-            </v-chip>
+        <v-row id="home-header-logo" class="pa-2" no-gutters>
+            <v-spacer/>
+            <v-col cols="12" xs="12" sm="10" md="10" lg="10">
+                <v-img :height="lgAndUp ? 200 : 150" src="/assets/romm_complete.svg" cover />
+            </v-col>
+            <v-spacer/>
         </v-row>
 
-        <v-row class="ml-3 mt-6" no-gutters>
+        <v-row id="home-chips" class="pa-2" no-gutters>
+            <v-spacer/>
+            <v-col cols="12" xs="12" sm="10" md="10" lg="10" class="d-flex justify-center">
+                <v-chip-group>
+                    <v-chip class="bg-chip" label>
+                        <span class="text-overline">{{ platforms.value.length }} platforms</span>
+                    </v-chip>
+                    <v-chip class="bg-chip" label>
+                        <span class="text-overline">{{ totalGames }} games</span>
+                    </v-chip>
+                </v-chip-group>
+            </v-col>
+            <v-spacer/>
+        </v-row>
+
+        <v-row id="platforms-title" class="pa-2" no-gutters>
             <v-avatar :rounded="0" size="auto"><v-icon>mdi-controller</v-icon></v-avatar>
             <span class="text-h6 ml-2">Platforms</span>
+            <v-divider class="border-opacity-25"/>
         </v-row>
 
-        <v-row class="pa-1" no-gutters>
+        <v-row id="platforms-cards" class="pa-2" no-gutters>
             <v-col v-for="platform in platforms.value" class="pa-1" :key="platform.slug"
                 :cols="views[0]['size-cols']" :xs="views[0]['size-xs']" :sm="views[0]['size-sm']" :md="views[0]['size-md']" :lg="views[0]['size-lg']">
-                <platform :platform="platform" :key="platform.slug" />
+                <platform :platform="platform" :key="platform.slug"/>
             </v-col>
         </v-row>
-
-    </v-col>
+    
 </template>
diff --git a/frontend/src/views/library/Scan.vue b/frontend/src/views/library/Scan.vue
index f2ba65d79..dbc82ecf2 100644
--- a/frontend/src/views/library/Scan.vue
+++ b/frontend/src/views/library/Scan.vue
@@ -31,7 +31,7 @@ async function scan() {
     })
     socket.on("done_ko", (msg) => {
         scanning.set(false)
-        emitter.emit('snackbarScan', {'msg': "Scan couldn't be completed. Something went wrong: "+msg, 'icon': 'mdi-close-circle', 'color': 'red'})
+        emitter.emit('snackbarScan', {'msg': `Scan couldn't be completed. Something went wrong: ${msg}`, 'icon': 'mdi-close-circle', 'color': 'red'})
         socket.close()
     })
     socket.emit("scan", JSON.stringify(platformsToScan.value.map(p => p.fs_slug)), completeRescan.value)
@@ -40,8 +40,7 @@ async function scan() {
 
 <template>
 
-    <div class="ma-5">
-        <v-row no-gutters>
+        <v-row class="pa-4" no-gutters>
             <v-select
                 label="Platforms"
                 item-title="name"
@@ -57,7 +56,7 @@ async function scan() {
                 chips/>
         </v-row>
 
-        <v-row class="mb-4" no-gutters>
+        <v-row class="pa-4" no-gutters>
             <v-checkbox
                 v-model="completeRescan"
                 label="Complete Rescan"
@@ -66,7 +65,7 @@ async function scan() {
                 persistent-hint/>
         </v-row>
 
-        <v-row class="mb-4" no-gutters>
+        <v-row class="pa-4" no-gutters>
             <v-btn
                 @click="scan()"
                 :disabled="scanning.value"
@@ -83,13 +82,14 @@ async function scan() {
             </v-btn>
         </v-row>
 
+        <v-divider class="border-opacity-100 ma-4" color="rommAccent1" :thickness="1"/>
+
         <v-row no-gutters class="align-center pa-4" v-for="d in scannedPlatforms">
-            <v-col  class="pa-0 ma-0">
-                <v-avatar :rounded="0" size="40"><v-img :src="'/assets/platforms/'+d['p_slug']+'.ico'"></v-img></v-avatar>
+            <v-col>
+                <v-avatar :rounded="0" size="40"><v-img :src="`/assets/platforms/${d['p_slug']}.ico`"></v-img></v-avatar>
                 <span class="text-body-2 ml-5"> {{ d['p_name'] }}</span>
                 <v-list-item v-for="r in d['r']" class="text-body-2" disabled> - {{ r }}</v-list-item>
             </v-col>
         </v-row>
-    </div>
 
 </template>
\ No newline at end of file
diff --git a/frontend/src/views/settings/ControlPanel.vue b/frontend/src/views/settings/ControlPanel.vue
index b4867c6b1..9440a5507 100644
--- a/frontend/src/views/settings/ControlPanel.vue
+++ b/frontend/src/views/settings/ControlPanel.vue
@@ -16,27 +16,31 @@ function toggleTheme() {
 </script>
 <template>
 
-    <v-tabs v-model="tab" slider-color="rommAccent1" class="bg-primary">
-        <v-tab value="general" rounded="0" disabled>General<span class="text-caption text-truncate ml-1">[comming soon]</span></v-tab>
-        <v-tab value="ui" rounded="0">User Interface</v-tab>
-    </v-tabs>
+    <v-app-bar elevation="0" density="compact">
+        <v-tabs v-model="tab" slider-color="rommAccent1" class="bg-primary">
+            <v-tab value="general" rounded="0" disabled>General<span class="text-caption text-truncate ml-1">[comming soon]</span></v-tab>
+            <v-tab value="ui" rounded="0">User Interface</v-tab>
+        </v-tabs>
+    </v-app-bar>
+
     <v-window v-model="tab">
         <v-window-item value="general"/>
-        <v-window-item value="ui" class="pa-2">
-            <v-row no-gutters>
+        <v-window-item value="ui">
+            <v-row class="pa-4" no-gutters>
                 <v-switch
-                @change="toggleTheme()"
-                v-model="darkMode"
-                class="ml-2"
-                prepend-icon="mdi-theme-light-dark"
-                hide-details
-                inset/>
+                    @change="toggleTheme()"
+                    v-model="darkMode"
+                    prepend-icon="mdi-theme-light-dark"
+                    hide-details
+                    inset/>
             </v-row>
         </v-window-item>
     </v-window>
 
-    <v-bottom-navigation :elevation="0" height="36" class="text-caption align-center">
-        <span class="text-rommAccent1 ml-2">RomM</span><span class="ml-1">v{{ ROMM_VERSION }}</span>
+    <v-bottom-navigation :elevation="0" height="36" class="text-caption">
+        <v-row class="align-center justify-center" no-gutters>
+            <span class="text-rommAccent1">RomM</span><span class="ml-1">v{{ ROMM_VERSION }}</span>
+        </v-row>
     </v-bottom-navigation>
 
 </template>