diff --git a/frontend/src/components/general/ControlButtons.vue b/frontend/src/components/general/ControlButtons.vue
index 92265b0..ff1c4fb 100644
--- a/frontend/src/components/general/ControlButtons.vue
+++ b/frontend/src/components/general/ControlButtons.vue
@@ -7,22 +7,19 @@ import {
     WindowIsMaximised,
 } from '@runtime'
 
-let windowMaximised: boolean
-
 const CustomMinimise = async () => {
     const maximised = await WindowIsMaximised() 
+    
     if (maximised) WindowUnmaximise()
     else WindowMaximise()
-
-    windowMaximised = maximised
 }
 </script>
 
 <template>
-<div class="control-buttons no-drag gap-2">
+<div class="control-buttons no-drag gap-1">
     <Button text icon="pi pi-minus" @click="WindowMinimise"/>
-    <Button text :icon="`pi ${windowMaximised ? 'pi-minimise' : 'pi-expand'}`" @click="CustomMinimise"/>
-    <Button text icon="pi pi-times" @click="Quit"/>
+    <Button text icon="pi pi-expand" @click="CustomMinimise"/>
+    <Button text icon="pi pi-times" class="exit-btn" @click="Quit"/>
 </div>
 </template>
 
@@ -34,7 +31,7 @@ const CustomMinimise = async () => {
     display: flex;
     align-items: center;
     margin-right: 5px;
-    margin-top: 2px;
+    margin-top: 5px;
     /* border-left: rgba(211, 211, 211, 0.823) 1px solid; */
     /* border-bottom: rgba(211, 211, 211, 0.823) 1px solid; */
     /* border-bottom-left-radius: 5px; */
@@ -47,12 +44,20 @@ const CustomMinimise = async () => {
 
 .control-buttons .p-button {
     cursor: pointer;
-    color: rgba(201, 201, 201, 0.905);
-    width: 30px;
+    color: rgba(201, 201, 201, 0.8);
+    width: 32px;
+    padding: 0.25rem;
 }
 
-.control-buttons :hover {
-    color: rgba(166, 105, 246, 0.863);
-    background-color: transparent;
+.control-buttons :nth-child(1) :hover {
+    color: rgba(166, 105, 246, 1);
+}
+
+.control-buttons :nth-child(2) :hover {
+    color: rgba(166, 105, 246, 1);
+}
+
+.control-buttons :nth-child(3) :hover {
+    color: rgba(255, 93, 93, 1);
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue
index 6e48f0f..38b95ed 100644
--- a/frontend/src/components/general/Sidebar.vue
+++ b/frontend/src/components/general/Sidebar.vue
@@ -82,7 +82,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     height: 100vh;
     width: 75px;
     border-right: rgba(255, 255, 255, 0.45) 1px outset;
-    background-color: rgb(28, 29, 33);
+    background-color: #202125;
     padding-left: 15px;
     padding-right: 15px;
 }
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index 555e1c2..beff376 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -4,7 +4,7 @@ export { default as Sidebar } from './general/Sidebar.vue'
 
 export { default as CardOverlay } from './reusable/CardOverlay.vue'
 
-export { default as ModListDropdown } from './selected-game/ModListDropdown.vue'
+export { default as ModListFilter } from './selected-game/ModListFilter.vue'
 export { default as ProfileManager } from './selected-game/ProfileManager.vue'
 export { default as ConfigEditLayout } from './selected-game/ConfigEditLayout.vue'
 export { default as ConfigEditorOverlay } from './selected-game/ConfigEditorOverlay.vue'
diff --git a/frontend/src/components/selected-game/ConfigEditorOverlay.vue b/frontend/src/components/selected-game/ConfigEditorOverlay.vue
index cd48464..f3f8324 100644
--- a/frontend/src/components/selected-game/ConfigEditorOverlay.vue
+++ b/frontend/src/components/selected-game/ConfigEditorOverlay.vue
@@ -76,9 +76,9 @@ const dialogStyle = () => {
 <template>
 <CardOverlay class="no-drag"
     :dialogStyle="dialogStyle()"
-    v-model:visible="dialog.visible"
-    v-model:closable="dialog.closable"
-    v-model:draggable="dialog.draggable"
+    v-model:visible="dialog.visible.value"
+    v-model:closable="dialog.closable.value"
+    v-model:draggable="dialog.draggable.value"
 >
     <template #cardContent>
         <div v-if="!selectedConfig" class="flex flex-column" style="max-height: calc(100vh - 180px);">
diff --git a/frontend/src/components/selected-game/ModInstallationOverlay.vue b/frontend/src/components/selected-game/ModInstallationOverlay.vue
index 7123940..3533c84 100644
--- a/frontend/src/components/selected-game/ModInstallationOverlay.vue
+++ b/frontend/src/components/selected-game/ModInstallationOverlay.vue
@@ -2,11 +2,12 @@
 import { v1 } from "@backend/models"
 import { CardOverlay } from "@components"
 import { Dialog } from "@composables"
+import { Nullable } from "primevue/ts-helpers"
 
 const props = defineProps<{
     dialog: Dialog
     installing: boolean
-    lastInstalledMod: v1.PackageVersion
+    lastInstalledMod: Nullable<v1.PackageVersion>
 }>()
 
 const installStatus = () => props.installing ? "Installing..." : "Installed"
@@ -15,15 +16,14 @@ const installStatus = () => props.installing ? "Installing..." : "Installed"
 <template>
 <CardOverlay
     class="installing-mod-card no-drag"
-    v-model:visible="dialog.visible"
-    v-model:closable="dialog.closable"
-    v-model:draggable="dialog.draggable"
+    v-model:visible="dialog.visible.value"
+    v-model:closable="dialog.closable.value"
+    v-model:draggable="dialog.draggable.value"
 >
     <template #cardContent>
         <div class="flex column justify-content-center align-items-baseline">
             <h1 class="mb-0 mt-2">{{ installStatus() }} </h1>
-            <p class="mt-1 mb-1" style="font-size: 18px">{{ lastInstalledMod.name }}</p>
-
+            <p v-if="lastInstalledMod" class="mt-1 mb-1" style="font-size: 18px">{{ lastInstalledMod.name }}</p>
         </div>
     </template>
 
diff --git a/frontend/src/components/selected-game/ModListDropdown.vue b/frontend/src/components/selected-game/ModListFilter.vue
similarity index 100%
rename from frontend/src/components/selected-game/ModListDropdown.vue
rename to frontend/src/components/selected-game/ModListFilter.vue
diff --git a/frontend/src/views/GameSelection.vue b/frontend/src/views/GameSelection.vue
index 295ee33..c5b71f3 100644
--- a/frontend/src/views/GameSelection.vue
+++ b/frontend/src/views/GameSelection.vue
@@ -292,9 +292,6 @@ onMounted(async () => {
                                                 :label="$t('game-selection.select-button')" 
                                                 @click="selectGame(game)"
                                             />
-
-
-
                                         </div>
                                     </div>
                                 </div>
@@ -366,10 +363,10 @@ onMounted(async () => {
 .game-selection .header {
     text-wrap: wrap;
     text-align: center;
-    font-size: 33px;
+    font-size: 32px;
     font-weight: 420;
-    margin: 40px 0px 10px 0px;
-    padding: 0px 20px 0px 20px; /* Makes text get wrapped earlier */
+    margin: 35px 0px 10px 0px;
+    padding: 0px 20px 0px 20px; /* Make the text get wrap earlier */
 }
 
 .game-container {
diff --git a/frontend/src/views/SelectedGame.vue b/frontend/src/views/SelectedGame.vue
index 88ed84d..8976238 100644
--- a/frontend/src/views/SelectedGame.vue
+++ b/frontend/src/views/SelectedGame.vue
@@ -37,6 +37,7 @@ const ROWS = 40
 
 const loading = ref(false)
 const searchInput: Ref<Nullable<string>> = ref(null)
+const first = ref(0) // Starting index of the current page
 
 const mods: Ref<thunderstore.StrippedPackage[]> = ref([])
 const currentPageMods: Ref<Package[]> = ref([])
@@ -48,36 +49,50 @@ const activeTabIndex = ref(0)
 const tabs = ref([
     { label: 'This Profile', icon: 'pi pi-box' },
     { label: 'Thunderstore', icon: 'pi pi-globe' },
-    { label: 'Nexus', icon: 'pi pi-globe' }
+    //{ label: 'Nexus', icon: 'pi pi-globe' } // Uncomment when Nexus is implemented.
 ])
 
 const onTabChange = (e: TabMenuChangeEvent) => {
     activeTabIndex.value = e.index
-}
 
-onMounted(async () => {
-    // Ensure no overlays are still shown when opening.
-    configEditorDialog.setVisible(false)
-    installingModDialog.setVisible(false)
+    if (e.index == 1) refreshMods(false)
+    else mods.value = []
+}
 
-    const t0 = performance.now()
-    loading.value = true
+/** 
+ * Refreshes the page with the currently cached mods.
+ * @param fetch Whether to fetch mods from the API and update the cache (if isnt populated already) before refreshing the page.
+*/
+const refreshMods = async (fetch: boolean) => {
+    if (fetch && !selectedGame.modCache) {
+        loading.value = true // Fetching might take a while, let the user know we are doing something.
 
-    if (!selectedGame.modCache) {
-        console.log(`Putting ${selectedGame.identifier} mods into cache...`)
+        try {
+            const t0 = performance.now()
 
-        const pkgs = await GetStrippedPackages(selectedGame.identifier, false)
-        updateModCache(pkgs)
+            const pkgs = await GetStrippedPackages(selectedGame.identifier, false)
+            console.log(`[${selectedGame.identifier}] Putting mods into cache...`)
 
-        console.log(`Cached ${pkgs?.length} mods. Took: ${performance.now() - t0}ms`)
-    } else {
-        console.log(`Got ${selectedGame.modCache.length} mods from cache. Took: ${performance.now() - t0}ms`)
+            updateModCache(pkgs)
+            console.log(`Cached ${pkgs.length} mods. Took: ${performance.now() - t0}ms`)
+        } catch(e: any) {
+            console.error(`[${selectedGame.identifier}] Failed to update mod cache!\n${e.message}`)
+        }
     }
 
     mods.value = getMods()
     await updatePage(0, ROWS)
 
+    // We are done regardless of outcome, stop loading.
     loading.value = false
+}
+
+onMounted(async () => {
+    // Ensure no overlays are still shown.
+    configEditorDialog.setVisible(false)
+    installingModDialog.setVisible(false)
+
+    //await refreshMods(true)
 })
 
 const latestModVersion = (mod: thunderstore.StrippedPackage) => 
@@ -91,8 +106,10 @@ const startVanilla = () => Steam.LaunchGame(selectedGame.steamID, ["--doorstop-e
 const startModded = () => Steam.LaunchGame(selectedGame.steamID, ["--doorstop-enable", "true"])
 
 const onPageChange = (e: DataViewPageEvent) => updatePage(e.first, e.rows)
-const updatePage = async (first: number, rows: number) => {
-    const filtered = mods.value.slice(first, first + rows) as Package[]
+const updatePage = async (newFirst: number, rows: number) => {
+    first.value = newFirst
+
+    const filtered = mods.value.slice(newFirst, newFirst + rows) as Package[]
 
     // TODO: This could be potentially VERY slow. Consider replacing with Map/Set instead.
     const promises = filtered.map(async mod => {
@@ -146,10 +163,7 @@ const onInputChange = async () => {
     debouncedSearch()
 }
 
-const debouncedSearch = debounce(async () => {
-    mods.value = getMods()
-    await updatePage(0, ROWS)
-}, 250)
+const debouncedSearch = debounce(() => refreshMods(false), 250)
 
 const installMod = async (fullName: string) => {
     installing.value = true
@@ -162,7 +176,7 @@ const installMod = async (fullName: string) => {
         lastInstalledMod.value = await InstallByName(selectedGame.title, selectedGame.identifier, fullName)
         console.info(`Installed mod: ${fullName}. Took ${((performance.now() - start) / 1000).toFixed(2)}s`)
     } catch(e: any) {
-        console.error(`Failed to install mod.\n${e.message}`)
+        console.error(`[${selectedGame.identifier}] Failed to install mod.\n${e.message}`)
     }
 
     installing.value = false
@@ -250,26 +264,33 @@ const installMod = async (fullName: string) => {
                 layout="list" data-key="mod-list"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
                 :paginator="mods.length > 0" :rows="ROWS"
-                :value="mods" @page="onPageChange"
+                :value="mods" @page="onPageChange" :first="first"
             >
                 <template #empty>
                     <div v-if="hasSearchInput()" class="pl-2">
-                        <h2>{{ $t('selected-game.empty-results') }}.</h2>
+                        <h2 class="m-0 mt-1">{{ $t('selected-game.empty-results') }}.</h2>
 
                         <!-- Sadge -->
-                        <img class="pt-3" src="https://cdn.7tv.app/emote/603cac391cd55c0014d989be/3x.png">
+                        <img class="mt-2" src="https://cdn.7tv.app/emote/603cac391cd55c0014d989be/3x.png">
                     </div>
 
                     <!-- TODO: If failed, make this show regardless of search input. --> 
                     <div v-else>
-                        <h2 style="padding-top: 15px; font-size: 22px; margin: 0 auto;">
-                            No mods available! Something probably went wrong.
+                        <h2 v-if="activeTabIndex == 0" class="ml-1" style="color: orange; font-size: 24px; margin: 0;">
+                            No mods installed.
                         </h2>
+
+                        <div v-else class="ml-1">
+                            <h2 class="mb-2" style="color: red; font-size: 24px; margin: 0 auto;">
+                                No mods available! Something probably went wrong.
+                            </h2>
+                            <Button class="mt-1" label="Refresh" icon="pi pi-refresh" @click="refreshMods(true)"/>
+                        </div>
                     </div>
                 </template>
         
                 <template #header>
-                    <div class="flex row align-items-center">
+                    <div class="flex row align-items-center gap-2">
                         <div class="searchbar no-drag">
                             <IconField iconPosition="left">
                                 <InputIcon class="pi pi-search"></InputIcon>
@@ -279,10 +300,9 @@ const installMod = async (fullName: string) => {
                             </IconField>
                         </div>
 
-                        <div class="ml-2 justify-self-end">
+                        <div class="justify-self-end">
                             <TabMenu :model="tabs" @tab-change="onTabChange"/>
                         </div>
-
                         <!-- <div class="flex row">
                             <ModListDropdown>
                                 
@@ -505,7 +525,6 @@ const installMod = async (fullName: string) => {
 .list-item {
     display: flex;
     width: 100vw;
-    height: 115px;
     padding-bottom: 15px;
     padding-top: 0px;
 }