diff --git a/README.md b/README.md
index 486c40e..03b33dc 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@ There are currently no official releases. You can download dev builds under the
 
 ## Building from source
 1. Clone this repository.
-2. Install [Go](https://go.dev/doc/install), [Bun](https://bun.sh) and [Wails](https://wails.io/docs/gettingstarted/installation).
+2. Install dependencies ([Node 20+](https://nodejs.org/en/download), [Bun](https://bun.sh), [Go](https://go.dev/doc/install), [Wails](https://wails.io/docs/gettingstarted/installation)).
 3. Run one of the following commands:
    - `wails build` - Generates an executable in **/build/bin**.
    - `wails dev` - Opens a preview of the app with DevTools enabled.
diff --git a/frontend/bun.lockb b/frontend/bun.lockb
index a8cc3c4..7d7128b 100644
Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ
diff --git a/frontend/index.html b/frontend/index.html
index 8bf2350..39d40a0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,8 +5,8 @@
 
         <meta charset="UTF-8"/>
         <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
-        
-        <link id="theme-link" rel="stylesheet" href="./src/assets/themes/aura-dark-purple/theme.css">
+
+        <!-- <link id="theme-link" rel="stylesheet" href="./src/assets/themes/aura-dark-purple/theme.css"> -->
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     </head>
     
diff --git a/frontend/package.json b/frontend/package.json
index c731301..7a21d28 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,34 +8,35 @@
     "reinstall": "bun run clean && bun i",
     "copy-themes": "copy-folder ./node_modules/primevue/resources/themes ./src/assets/themes --summary",
     "dev": "bunx vite",
-    "build": "bun run copy-themes && bunx vite build",
+    "build": "bunx vite build",
     "typecheck": "bunx vue-tsc --noEmit",
     "ci": "bun i && bun run typecheck",
     "lint": "bunx eslint ./src"
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
-    "compare-versions": "^6.1.0",
-    "pinia": "^2.1.7",
+    "@primevue/themes": "^4.1.1",
+    "compare-versions": "^6.1.1",
+    "pinia": "^2.2.4",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
-    "primevue": "^3.52.0",
-    "vue": "^3.4.26",
-    "vue-i18n": "9",
-    "vue-router": "4"
+    "primevue": "^4.1",
+    "vue": "^3.5.12",
+    "vue-i18n": "10",
+    "vue-router": "4.4.5"
   },
   "devDependencies": {
     "@babel/types": "^7.18.10",
     "@types/node": "^22.2.0",
-    "@vitejs/plugin-vue": "^3.0.3",
-    "copy-folder-util": "^1.1.3",
+    "@vitejs/plugin-vue": "latest",
+    "copy-folder-util": "^1.1.4",
     "rimraf": "latest",
     "typescript": "latest",
     "vite": "latest",
     "vue-tsc": "latest",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "eslint": "^8.49.0",
+    "@typescript-eslint/eslint-plugin": "latest",
+    "@typescript-eslint/parser": "latest",
+    "eslint": "latest",
     "eslint-plugin-named-import-spacing": "^1.0.3"
   },
   "optionalDependencies": {
diff --git a/frontend/src/assets/fonts/Inter-italic.var.woff2 b/frontend/src/assets/fonts/Inter-italic.var.woff2
new file mode 100644
index 0000000..b826d5a
Binary files /dev/null and b/frontend/src/assets/fonts/Inter-italic.var.woff2 differ
diff --git a/frontend/src/assets/fonts/Inter-roman.var.woff2 b/frontend/src/assets/fonts/Inter-roman.var.woff2
new file mode 100644
index 0000000..6a256a0
Binary files /dev/null and b/frontend/src/assets/fonts/Inter-roman.var.woff2 differ
diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index c1fdf10..7fa2f55 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -1,3 +1,29 @@
+:root {
+    font-family: "Inter var", sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    font-variation-settings: normal;
+    --font-family: "Inter var", sans-serif;
+    --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+}
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 200 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+    font-family: "Inter var";
+    font-weight: 200 900;
+    font-display: swap;
+    font-style: italic;
+    font-named-instance: "Italic";
+    src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
 html {
     width: 100%;
     height: 100%;
@@ -11,6 +37,7 @@ body {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    
 }
 
 body::before {
@@ -20,10 +47,14 @@ body::before {
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgb(12, 12, 14);
+    background-color: rgba(14, 14, 16);
     z-index: -1;
 }
 
+a {
+    text-decoration: none;
+}
+
 .flex-span {
     display: flex;
     width: 100vw;
diff --git a/frontend/src/components/general/AppInfoOverlay.vue b/frontend/src/components/general/AppInfoOverlay.vue
index a2c2841..5854bb3 100644
--- a/frontend/src/components/general/AppInfoOverlay.vue
+++ b/frontend/src/components/general/AppInfoOverlay.vue
@@ -39,7 +39,7 @@ const {
                         <div class="flex row gap-1">
                             <Button class="outlined-btn w-6" severity="help" 
                                 icon="pi pi-heart-fill" label="Donate"
-                                as="a" href="https://github.com/sponsors/Owen3H" target="_blank" rel="noopener" 
+                                href="https://github.com/sponsors/Owen3H" as="a" target="_blank" rel="noopener"
                             />
     
                             <Button class="outlined-btn w-full" severity="primary"
diff --git a/frontend/src/components/general/Sidebar.vue b/frontend/src/components/general/Sidebar.vue
index 38b95ed..fb67128 100644
--- a/frontend/src/components/general/Sidebar.vue
+++ b/frontend/src/components/general/Sidebar.vue
@@ -42,7 +42,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 
         <div class="top flex column">
             <Button 
-                plain severity="secondary"
+                severity="secondary"
                 class="btn margin-lr no-drag" icon="pi pi-wrench"
                 v-tooltip="tooltipOpts(t('tooltips.sidebar.mod-dev-tools'))"
                 @click="ModDevTools"
@@ -54,15 +54,15 @@ const ModDevTools = () => router.push('/mod-dev-tools')
         <div class="spacer"></div>
  
         <div class="bottom flex column">
-            <Button outlined
-                class="btn-no-outline margin-lr no-drag"
+            <Button severity="secondary"
+                class="btn margin-lr no-drag"
                 icon="pi pi-info-circle"
                 @click="appInfo.setVisible()"
             />
 
             <!-- <Button text class="btn margin-lr no-drag" :icon="themeMode === 'dark' ? 'pi pi-sun' : 'pi pi-moon'" @click="ToggleThemeMode"/> -->
             <Button
-                plain severity="secondary"
+                severity="secondary"
                 class="btn margin-lr spin-hover no-drag" icon="pi pi-cog" 
                 v-tooltip="tooltipOpts(t('keywords.settings'))"
                 @click="settings.setVisible()"
@@ -81,10 +81,8 @@ const ModDevTools = () => router.push('/mod-dev-tools')
     z-index: 999;
     height: 100vh;
     width: 75px;
-    border-right: rgba(255, 255, 255, 0.45) 1px outset;
+    border-right: 1px outset rgba(255, 255, 255, 0.45);
     background-color: #202125;
-    padding-left: 15px;
-    padding-right: 15px;
 }
 
 .sidebar img {
@@ -99,13 +97,7 @@ const ModDevTools = () => router.push('/mod-dev-tools')
 .btn {
     position: relative;
     border-radius: 3px;
-    border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.btn-no-outline {
-    position: relative;
-    border-radius: 3px;
-    border: none;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
 }
 
 .top .p-button {
diff --git a/frontend/src/components/selected-game/ConfigEditLayout.vue b/frontend/src/components/selected-game/ConfigEditLayout.vue
index 739b1e3..fcc3479 100644
--- a/frontend/src/components/selected-game/ConfigEditLayout.vue
+++ b/frontend/src/components/selected-game/ConfigEditLayout.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { game } from '@backend/models'
 import { computed } from 'vue'
 
 import Divider from 'primevue/divider'
-import { Nullable } from 'primevue/ts-helpers'
+
+import { game } from '@backend/models'
+import type { Nullable } from '@types'
 
 interface ConfigProps {
     config: game.BepinexConfig
@@ -85,7 +86,7 @@ const asBool = (str: string) => {
                     </div>
 
                     <div>
-                        <InputSwitch v-if="isBool(entry.default_value)" v-model="entry.checked"/>
+                        <ToggleSwitch v-if="isBool(entry.default_value)" v-model="entry.checked"/>
                         <InputText v-else class="ml-3 flex-grow-1" style="font-size: 16px;" :value="entry.value"/>
                     </div>
                 </div>
diff --git a/frontend/src/components/selected-game/ConfigEditorOverlay.vue b/frontend/src/components/selected-game/ConfigEditorOverlay.vue
index 0ea363b..4caafe3 100644
--- a/frontend/src/components/selected-game/ConfigEditorOverlay.vue
+++ b/frontend/src/components/selected-game/ConfigEditorOverlay.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { type Ref, ref, watch } from 'vue'
-import type { Nullable } from 'primevue/ts-helpers'
+import { ref, watch } from 'vue'
 
 import { BepinexConfigFiles, ParseBepinexConfig } from '@backend/game/GameManager'
 import { game } from '@backend/models'
@@ -10,12 +9,12 @@ import { CardOverlay, ConfigEditLayout } from '@components'
 
 import { t } from '@i18n'
 import { openLink } from "../../util"
-import type { ThunderstoreGame } from '@types'
+import type { ThunderstoreGame, Nullable } from '@types'
 
-const selectedConfig: Ref<Nullable<game.BepinexConfig>> = ref(null)
-const selectedConfigName: Ref<Nullable<string>> = ref(null)
+const selectedConfig = ref<Nullable<game.BepinexConfig>>(null)
+const selectedConfigName = ref<Nullable<string>>(null)
 
-const configFiles: Ref<string[]> = ref([])
+const configFiles = ref<string[]>([])
 
 const props = defineProps<{
     dialog: Dialog
diff --git a/frontend/src/components/selected-game/ModInstallationOverlay.vue b/frontend/src/components/selected-game/ModInstallationOverlay.vue
index 3533c84..2f00d13 100644
--- a/frontend/src/components/selected-game/ModInstallationOverlay.vue
+++ b/frontend/src/components/selected-game/ModInstallationOverlay.vue
@@ -2,7 +2,7 @@
 import { v1 } from "@backend/models"
 import { CardOverlay } from "@components"
 import { Dialog } from "@composables"
-import { Nullable } from "primevue/ts-helpers"
+import type { Nullable } from "@types"
 
 const props = defineProps<{
     dialog: Dialog
diff --git a/frontend/src/components/selected-game/ModListFilter.vue b/frontend/src/components/selected-game/ModListFilter.vue
index 048add4..ae2b589 100644
--- a/frontend/src/components/selected-game/ModListFilter.vue
+++ b/frontend/src/components/selected-game/ModListFilter.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { computed, ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { ValueItemLabeled } from '@types'
 
-const filters: ComputedRef<{ label: string, value: string }[]> = computed(() => [{ 
+const filters = computed<ValueItemLabeled<string>[]>(() => [{ 
     label: "Most Rated",
     value: "most-rated"
 }, {
@@ -17,17 +18,13 @@ const filters: ComputedRef<{ label: string, value: string }[]> = computed(() =>
 </script>
 
 <template>
-    <Dropdown 
-        class="no-drag"
-        :options="filters"
-        @change=""
-    >
+    <Dropdown  class="no-drag" :options="filters" @change="">
         <template #option>
             
         </template>
 
         <template #value>
-
+            
         </template>
     </Dropdown>
 </template>
diff --git a/frontend/src/components/selected-game/ProfileManager.vue b/frontend/src/components/selected-game/ProfileManager.vue
index e017051..983a9d1 100644
--- a/frontend/src/components/selected-game/ProfileManager.vue
+++ b/frontend/src/components/selected-game/ProfileManager.vue
@@ -2,7 +2,7 @@
 import DataView from 'primevue/dataview'
 //import Toolbar from 'primevue/toolbar'
 
-import { Ref, ref } from 'vue'
+import { ref } from 'vue'
 import { t } from '@i18n'
 import { tooltipOpts } from '@frontend/src/util'
 
@@ -14,12 +14,12 @@ interface Profile {
     }
 }
 
-const selectedProfile: Ref<Profile> = ref({
+const selectedProfile = ref<Profile>({
     name: "Default", 
     mods: {}
 })
 
-const profiles: Ref<Profile[]> = ref([
+const profiles = ref<Profile[]>([
     { name: 'Default', mods: {} },
     { name: 'testing', mods: {} },
     { name: 'MEGALOPHOBIA', mods: {} },
diff --git a/frontend/src/components/settings/SettingsOverlay.vue b/frontend/src/components/settings/SettingsOverlay.vue
index a9a1d1f..2807042 100644
--- a/frontend/src/components/settings/SettingsOverlay.vue
+++ b/frontend/src/components/settings/SettingsOverlay.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Ref, computed, ref, watch } from "vue"
+import { computed, ref, watch } from "vue"
 import { storeToRefs } from "pinia"
 
 import { app } from "@backend/models"
@@ -49,12 +49,12 @@ const setAccel = (value: boolean) => {
 //#region Update Behaviour
 type Behaviour = ValueItemLabeled<app.UpdateBehaviour>
 
-const updateBehaviour: Ref<Behaviour> = ref({ 
+const updateBehaviour = ref<Behaviour>({ 
     label: t('settings.update-behaviour.option-1'),
     value: app.UpdateBehaviour.AUTO
 })
 
-const behaviours: Ref<Behaviour[]> = computed(() => [{
+const behaviours = computed<Behaviour[]>(() => [{
     label: t('settings.update-behaviour.option-1'),
     value: app.UpdateBehaviour.AUTO
 }, {
@@ -138,7 +138,7 @@ const dividerAlignment: Alignment = "center"
                         <h3>{{ $t('settings.animations-enabled') }}</h3>
                     </div>
                     <div class="flex-item">
-                        <InputSwitch 
+                        <ToggleSwitch 
                             v-model="animationsEnabled" 
                             @update:model-value="setAnimationsEnabled(animationsEnabled)"
                         />
@@ -158,7 +158,7 @@ const dividerAlignment: Alignment = "center"
                         <h3>{{ $t('settings.gpu-acceleration') }}</h3>
                     </div>
                     <div class="flex-item">
-                        <InputSwitch 
+                        <ToggleSwitch 
                             v-model="accelChecked" 
                             @update:model-value="setAccel(accelChecked)"
                         />
diff --git a/frontend/src/components/settings/ThemeDropdown.vue b/frontend/src/components/settings/ThemeDropdown.vue
index 1d377a6..79029fd 100644
--- a/frontend/src/components/settings/ThemeDropdown.vue
+++ b/frontend/src/components/settings/ThemeDropdown.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ComputedRef, computed } from 'vue'
+import { computed } from 'vue'
 import { usePrimeVue } from 'primevue/config'
 
 import { useSettingsStore } from '@stores'
@@ -14,8 +14,8 @@ const currentTheme = () => {
     return general.theme as Theme || groupedThemes.value[0]
 }
 
-const selectedTheme: ComputedRef<Theme> = computed(currentTheme)
-const groupedThemes: ComputedRef<ThemeGroup[]> = computed(() => [{
+const selectedTheme = computed<Theme>(currentTheme)
+const groupedThemes = computed<ThemeGroup[]>(() => [{
     label: 'Aura Purple',
     themes: [{
         label: 'Dark',
@@ -35,12 +35,13 @@ const groupedThemes: ComputedRef<ThemeGroup[]> = computed(() => [{
     }]
 }])
 
-const PrimeVue = usePrimeVue()
+//const PrimeVue = usePrimeVue()
 
 const change = (e: ChangeEvent<Theme>) => {
     const newTheme = e.value
     
-    PrimeVue.changeTheme(currentTheme().value, newTheme.value, 'theme-link')
+    // TODO: Use presets instead
+    //PrimeVue.changeTheme(currentTheme().value, newTheme.value, 'theme-link')
 
     const { setTheme } = useSettingsStore()
     setTheme(newTheme)
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9e5c780..01f36cc 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import Aura from '@primevue/themes/aura'
 
 import { createPinia } from 'pinia'
 import i18n from "./i18n"
@@ -13,9 +14,9 @@ import Button from 'primevue/button'
 import Dialog from 'primevue/dialog'
 import Card from 'primevue/card'
 
-import Dropdown from 'primevue/dropdown'
+import Dropdown from 'primevue/select'
 
-import InputSwitch from 'primevue/inputswitch'
+import ToggleSwitch from 'primevue/toggleswitch'
 import InputText from 'primevue/inputtext'
 import InputIcon from 'primevue/inputicon'
 import IconField from 'primevue/iconfield'
@@ -26,26 +27,82 @@ import Tooltip from 'primevue/tooltip'
 //#region Import styles
 import "primeflex/primeflex.css"
 import "primeicons/primeicons.css"
-//import "@mdi/font/css/materialdesignicons.css";
 
 import './assets/styles/global.css'
 import "./assets/styles/flags.css"
+
+import { definePreset } from '@primevue/themes'
+import { PresetOptions } from '@types'
 //#endregion
 
 const pinia = createPinia()
 const app = createApp(App)
 
+type AuraOptions = PresetOptions<Aura.PrimitiveDesignTokens, Aura.SemanticDesignTokens>
+
+const palettes = {
+    zinc: {
+        0: '#ffffff',
+        50: '{zinc.50}',
+        100: '{zinc.100}',
+        200: '{zinc.200}',
+        300: '{zinc.300}',
+        400: '{zinc.400}',
+        500: '{zinc.500}',
+        600: '{zinc.600}',
+        700: '{zinc.700}',
+        800: '{zinc.800}',
+        900: '{zinc.900}',
+        950: '{zinc.950}'
+    },
+    violet: {
+        50: '{violet.50}',
+        100: '{violet.100}',
+        200: '{violet.200}',
+        300: '{violet.300}',
+        400: '{violet.400}',
+        500: '{violet.500}',
+        600: '{violet.600}',
+        700: '{violet.700}',
+        800: '{violet.800}',
+        900: '{violet.900}',
+        950: '{violet.950}'
+    }
+}
+
+// PrimeVue v4 does not provide typings for actions currently.
+const defineAuraPreset = (opts: AuraOptions) => definePreset(Aura, opts)
+const AuraViolet = defineAuraPreset({
+    semantic: {
+        primary: palettes.violet,
+        colorScheme: {
+            light: {
+                surface: palettes.zinc
+            },
+            dark: {
+                surface: palettes.zinc
+            }
+        }
+    }
+})
+
 app.use(pinia)
 app.use(i18n)
 app.use(router)
-app.use(PrimeVue, { ripple: true })
+app.use(PrimeVue, { 
+    ripple: true,
+    theme: {
+        preset: AuraViolet
+    }
+})
 
 app.component('Dialog', Dialog)
 app.component('Card', Card)
 
 app.component('Button', Button)
 app.component('Dropdown', Dropdown)
-app.component('InputSwitch', InputSwitch)
+app.component('ToggleSwitch', ToggleSwitch)
+
 app.component('InputText', InputText)
 app.component('InputIcon', InputIcon)
 app.component('IconField', IconField)
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 7b1f6e0..8329db6 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -1,4 +1,6 @@
 export * from './settings'
 export * from './primevue'
 export * from './game'
-export * from './thunderstore'
\ No newline at end of file
+export * from './thunderstore'
+
+export declare type Nullable<T = void> = T | null | undefined
\ No newline at end of file
diff --git a/frontend/src/types/primevue.ts b/frontend/src/types/primevue.ts
index d5cb835..f5c7cd1 100644
--- a/frontend/src/types/primevue.ts
+++ b/frontend/src/types/primevue.ts
@@ -33,4 +33,17 @@ export interface BreadcrumbPage {
     icon?: string
     class?: string
     style?: string
+}
+
+export interface SemanticColorScheme {
+    colorScheme?: {
+        light?: any
+        dark?: any
+    }
+}
+
+export interface PresetOptions<PrimitiveTokens, SemanticTokens> {
+    primitive?: Partial<PrimitiveTokens>
+    semantic?: Partial<SemanticTokens> & SemanticColorScheme
+    [key: string]: any // For 'components' etc.
 }
\ No newline at end of file
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index b05c9ae..35ecdaf 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -31,7 +31,7 @@ async function getPackages() {
 </script>
 
 <template>
-<div class="dashboard flex-full column">
+<!-- <div class="dashboard flex-full column">
     <TabView>
         <TabPanel header="Thunderstore">
             <div class="search-user-packages">
@@ -40,7 +40,7 @@ async function getPackages() {
                 <div id="input" class="input-box no-drag">
                     <FloatLabel>
                         <InputText id="name" v-model="data.name" autocomplete="off"/>
-                        <!-- <label for="name">Owner</label> -->
+                        // <label for="name">Owner</label>
                     
                         <Button class="search-btn" severity="help" outlined icon="pi pi-search" @click="getPackages"/>
                     </FloatLabel>
@@ -53,7 +53,7 @@ async function getPackages() {
             <p class="m-0">buh</p>
         </TabPanel>
     </TabView>
-</div>
+</div> -->
 </template>
 
 <!-- #region Style -->
diff --git a/frontend/src/views/GameSelection.vue b/frontend/src/views/GameSelection.vue
index a7134b9..f9d151f 100644
--- a/frontend/src/views/GameSelection.vue
+++ b/frontend/src/views/GameSelection.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { 
-    type Ref, ref, 
-    type ComputedRef, computed, 
+    ref, computed, 
     nextTick, onMounted
 } from 'vue'
 
 import DataView from 'primevue/dataview'
-import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'
+import SelectButton from 'primevue/selectbutton'
 import Skeleton from 'primevue/skeleton'
 
 // TODO: Replace with real external service.
@@ -16,10 +15,9 @@ import type {
     ThunderstoreGame, 
     Layout, OptionItem, 
     ValueItem, ValueItemLabeled,
+    Nullable,
 } from '@types'
 
-import type { Nullable } from 'primevue/ts-helpers'
-
 import { t } from '@i18n'
 import { tooltipOpts, openLink } from "../../src/util"
 
@@ -40,17 +38,19 @@ const {
 } = store
 
 const loading = ref(true)
-const searchInput: Ref<Nullable<string>> = ref(null)
-const layout: Ref<Layout> = ref('grid')
+const searchInput = ref<Nullable<string>>(null)
+
+const layout = ref<Layout>('grid')
+const options = ref(['list', 'grid'])
 
 const scrollableList = ref<HTMLElement | null>(null)
 
-const selectedFilter: Ref<ValueItemLabeled<string>> = ref({
+const selectedFilter = ref<ValueItemLabeled<string>>({
     label: "ALL",
     value: t('keywords.all')
 })
 
-const filters: ComputedRef<ValueItemLabeled<string>[]> = computed(() => [{
+const filters = computed<ValueItemLabeled<string>[]>(() => [{
     label: "ALL",
     value: t('keywords.all')
 }, {
@@ -260,11 +260,11 @@ onMounted(async () => {
                         </div>
                         
                         <div class="flex flex-row">
-                            <DataViewLayoutOptions v-model="layout">
-                                <template #listicon>
-                                    <div class="pi pi-list"></div>
+                            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                                <template #option="{ option }">
+                                    <i :class="[option === 'list' ? 'pi pi-list' : 'pi pi-th-large']" />
                                 </template>
-                            </DataViewLayoutOptions>
+                            </SelectButton>
                         </div>
                     </div>
                 </template>
@@ -273,7 +273,7 @@ onMounted(async () => {
                 <template #grid>
                     <div class="scrollable-grid grid grid-nogutter">
                         <div v-for="(game, index) in getGames()" :key="index" class="grid-item col-2 sm:col-5 md:col-4 lg:col-3 xl:col-2">
-                            <div class="flex flex-column border-1 p-3 surface-border border-round">
+                            <div class="flex flex-column game-card">
                                 <div class="flex flex-column align-items-center interact-section pb-3">
                                     <div class="game-grid-title">{{ game.title }}</div>
                                 </div>
@@ -392,9 +392,9 @@ onMounted(async () => {
 .game-selection .header {
     text-wrap: wrap;
     text-align: center;
-    font-size: 32px;
-    font-weight: 420;
-    margin: 35px 0px 10px 0px;
+    font-size: 36px;
+    font-weight: 450;
+    margin: 30px 0px 10px 0px;
     padding: 0px 20px 0px 20px; /* Make the text get wrap earlier */
 }
 
@@ -403,6 +403,11 @@ onMounted(async () => {
     margin-right: 50px;
 }
 
+.game-card {
+    border-radius: 4px;
+    padding: 10px;
+}
+
 .snap-top {
     height: 160px;
 }
@@ -431,13 +436,13 @@ onMounted(async () => {
     max-width: 105px;
     min-width: 35px;
     opacity: 0;
-    border-radius: 3px;
+    border-radius: 2px;
 }
 
 .game-grid-thumbnail {
     user-select: none;
-    width: 180px;
-    border-radius: 3px;
+    width: 190px;
+    border-radius: 4px;
 }
 
 .game-list-title {
diff --git a/frontend/src/views/ModDevTools.vue b/frontend/src/views/ModDevTools.vue
index 9393699..e9f76ec 100644
--- a/frontend/src/views/ModDevTools.vue
+++ b/frontend/src/views/ModDevTools.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from "vue"
 
-//import FileUpload from 'primevue/fileupload'
+import FileUpload from 'primevue/fileupload'
+import DataView from 'primevue/dataview'
 
 import { TSPackageManifest, TSPackageFile } from '@types'
 import { experimental } from '@frontend/wailsjs/go/models'
@@ -33,30 +34,30 @@ const items = ref([{
 </script>
 
 <template>
-    <div class="mod-dev-tools flex-span column">
-        <DataView dataKey="dev-package-list"></DataView>
-    </div>
+<div class="mod-dev-tools column mt-5 pl-5">
+    <div class="mb-4">
+        <FileUpload
+            name="demo[]"
+            accept=".zip"
+            :multiple="false"
+            :maxFileSize="1000000"
+            :showUploadButton="false"
+            @select=""
+        >
+            <template #content>
+                <div class="pi pi-upload">
+                    
+                </div>
+            </template>
     
-<div class="card no-drag">
-    <FileUpload
-        name="demo[]"
-        accept=".zip"
-        :multiple="false"
-        :maxFileSize="1000000"
-        :showUploadButton="false"
-        @select=""
-    >
-        <template #content>
-            <div class="pi pi-upload">
-
-            </div>
-        </template>
-
-        <template #empty>
-            <p>Drag and drop your mod zip file here.</p>
-        </template>
+            <template #empty>
+                <p>Drag and drop your mod zip file here.</p>
+            </template>
+    
+        </FileUpload>
+    </div>
 
-    </FileUpload>
+    <DataView dataKey="dev-package-list"></DataView>
 </div>
 </template>
 
diff --git a/frontend/src/views/SelectedGame.vue b/frontend/src/views/SelectedGame.vue
index 34affd8..3b4d70f 100644
--- a/frontend/src/views/SelectedGame.vue
+++ b/frontend/src/views/SelectedGame.vue
@@ -1,12 +1,9 @@
 <script lang="ts" setup>
 import { nextTick, onMounted, ref } from "vue"
-import type { Ref } from "vue"
 
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
 
-import type { Nullable } from "primevue/ts-helpers"
-
 import DataView, { DataViewPageEvent } from 'primevue/dataview'
 import TabMenu, { TabMenuChangeEvent } from 'primevue/tabmenu'
 
@@ -22,7 +19,7 @@ import {
     ConfigEditorOverlay
 } from "@components"
 
-import type { Package } from "@types"
+import type { Package, Nullable } from "@types"
 import { useGameStore } from "@stores"
 
 import { debounce } from "../util"
@@ -36,17 +33,17 @@ const installingModDialog = useDialog('selected-game-installing-mod')
 const ROWS = 40
 
 const loading = ref(false)
-const searchInput: Ref<Nullable<string>> = ref(null)
+const searchInput = ref<Nullable<string>>(null)
 const first = ref(0) // Starting index of the current page
 
 const modElements = ref<any[]>([])
 const scrollIndex = ref(0)
 
-const mods: Ref<thunderstore.StrippedPackage[]> = ref([])
-const currentPageMods: Ref<Package[]> = ref([])
+const mods = ref<thunderstore.StrippedPackage[]>([])
+const currentPageMods= ref<Package[]>([])
 
 const installing = ref(false)
-const lastInstalledMod: Ref<Nullable<v1.PackageVersion>> = ref(null)
+const lastInstalledMod = ref<Nullable<v1.PackageVersion>>(null)
 
 const activeTabIndex = ref(0)
 const tabs = ref([