diff --git a/backend/app/app.go b/backend/app/app.go
index 445c7de..c8d5329 100644
--- a/backend/app/app.go
+++ b/backend/app/app.go
@@ -53,10 +53,6 @@ func (u *Utils) WalkDirExt(root string, exts []string) ([]string, error) {
 	return backend.WalkDirExt(root, exts)
 }
 
-func (u *Utils) ReadFile(path string) (*string, error) {
-	return backend.ReadFile(path)
-}
-
 func (app *Application) GetSettings() *AppSettings {
 	return app.Settings
 }
diff --git a/backend/common/profile/manager.go b/backend/common/profile/manager.go
index 2f779b2..b1eafff 100644
--- a/backend/common/profile/manager.go
+++ b/backend/common/profile/manager.go
@@ -1,4 +1,113 @@
 package profile
 
-type ModStore map[string]IMod
-type ProfileStore = map[string]Profile
+import (
+	"encoding/json"
+	"modm8/backend"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+// type ModStore map[string]IMod
+// type ProfileStore = map[string]Profile
+
+type ProfileManager struct{}
+
+func NewManager() *ProfileManager {
+	return &ProfileManager{}
+}
+
+type ProfileMods struct {
+	Thunderstore []string `json:"thunderstore"`
+	Nexus        []string `json:"nexus"`
+}
+
+type ProfileManifest struct {
+	Mods ProfileMods `json:"mods"`
+}
+
+func (pm *ProfileManager) GetProfiles(gameTitle string) (map[string]ProfileManifest, error) {
+	return GetProfiles(gameTitle)
+}
+
+func (pm *ProfileManager) GetProfile(gameTitle, profileName string) (*ProfileManifest, error) {
+	return GetManifest(gameTitle, profileName)
+}
+
+func (pm *ProfileManager) SaveProfile(gameTitle, profileName string, prof ProfileManifest) error {
+	return SaveManifest(gameTitle, profileName, prof)
+}
+
+func PathToProfilesDir(gameTitle string) string {
+	cacheDir, _ := os.UserConfigDir()
+	path := filepath.Join(cacheDir, "modm8", "Games", gameTitle, "Profiles")
+
+	return path
+}
+
+func PathToProfile(gameTitle, profileName string) string {
+	return filepath.Join(PathToProfilesDir(gameTitle), profileName+".prof")
+}
+
+func GetProfileNames(gameTitle string) ([]string, error) {
+	profDir := PathToProfilesDir(gameTitle)
+
+	// The user probably hasn't created a profiles yet.
+	exists, _ := backend.ExistsAtPath(profDir)
+	if !exists {
+		return []string{}, nil
+	}
+
+	paths, err := backend.WalkDirExt(profDir, []string{"prof"})
+	if err != nil {
+		return []string{}, err
+	}
+
+	var names []string
+	for _, path := range paths {
+		name := strings.Replace(filepath.Base(path), ".prof", "", -1)
+		names = append(names, name)
+	}
+
+	return names, nil
+}
+
+func SaveManifest(gameTitle, profileName string, prof ProfileManifest) error {
+	data, err := json.Marshal(prof)
+	if err != nil {
+		return err
+	}
+
+	return backend.SaveFile(PathToProfile(gameTitle, profileName), data)
+}
+
+func GetManifest(gameTitle, profileName string) (*ProfileManifest, error) {
+	contents, err := backend.ReadFile(PathToProfile(gameTitle, profileName))
+	if err != nil {
+		return nil, err
+	}
+
+	var manifest ProfileManifest
+	if err := json.Unmarshal(contents, &manifest); err != nil {
+		return nil, err
+	}
+
+	return &manifest, nil
+}
+
+func GetProfiles(gameTitle string) (map[string]ProfileManifest, error) {
+	profNames, err := GetProfileNames(gameTitle)
+	if err != nil {
+		return nil, err
+	}
+
+	profiles := make(map[string]ProfileManifest)
+	for _, name := range profNames {
+		manifest, _ := GetManifest(gameTitle, name)
+		if manifest != nil {
+			profiles[name] = *manifest
+		}
+	}
+
+	return profiles, err
+}
diff --git a/backend/common/profile/profile.go b/backend/common/profile/profile.go
index 870881c..ba5bc3e 100644
--- a/backend/common/profile/profile.go
+++ b/backend/common/profile/profile.go
@@ -1,23 +1,27 @@
 package profile
 
-type Profile struct {
-	Name       string   `json:"name" mapstructure:"name"`
-	Favourited bool     `json:"favourited" mapstructure:"favourited"`
-	Mods       ModStore `json:"mods" mapstructure:"mods"`
-}
+// type Profile struct {
+// 	Name string `json:"name" mapstructure:"name"`
+// 	//Favourited bool     `json:"favourited" mapstructure:"favourited"`
+// 	Mods ModStore `json:"mods" mapstructure:"mods"`
+// }
 
-func NewProfile(name string) Profile {
-	return Profile{
-		Name:       name,
-		Favourited: false,
-		Mods:       ModStore{},
-	}
-}
+// func NewProfile(name string) Profile {
+// 	return Profile{
+// 		Name: name,
+// 		//Favourited: false,
+// 		Mods: ModStore{},
+// 	}
+// }
 
-func (p *Profile) Favourite() {
-	p.Favourited = true
-}
+// func (p *Profile) AddMod(name string, mod IMod) {
+// 	p.Mods[name] = mod
+// }
 
-func (p *Profile) AddMod(name string, mod IMod) {
-	p.Mods[name] = mod
-}
+// func (p *Profile) Rename(name string) {
+// 	p.Name = name
+// }
+
+// // func (p *Profile) Favourite() {
+// // 	p.Favourited = true
+// // }
diff --git a/backend/game/bepinex.go b/backend/game/bepinex.go
index 187e268..ce3db6e 100644
--- a/backend/game/bepinex.go
+++ b/backend/game/bepinex.go
@@ -45,7 +45,8 @@ func ParseBepinexConfig(path string) (*BepinexConfig, error) {
 		acceptableValues = make([]string, 0)
 	}
 
-	lines := strings.Split(*contents, "\n")
+	lines := strings.Split(string(contents), "\n")
+
 	for _, line := range lines {
 		line = strings.TrimSpace(line)
 
diff --git a/backend/game/loader.go b/backend/game/loader.go
index 3b55d6a..cee67dd 100644
--- a/backend/game/loader.go
+++ b/backend/game/loader.go
@@ -27,7 +27,7 @@ type LoaderPackageInfo struct {
 	RootDirName        *string
 }
 
-// Note: Since Go can't do overloading, recommended version is kwargs - but only the first element will matter.
+// Note: Since Go can't do overloading, recommendedVer is kwargs - but only the first element will matter.
 func NewLoaderPackageInfo(loaderType ModLoader, rootDirName string, recommendedVer ...*semver.Version) LoaderPackageInfo {
 	var version *semver.Version
 	if len(recommendedVer) > 0 {
diff --git a/backend/tests/profile_test.go b/backend/tests/profile_test.go
new file mode 100644
index 0000000..f813817
--- /dev/null
+++ b/backend/tests/profile_test.go
@@ -0,0 +1,27 @@
+package backend
+
+import (
+	"modm8/backend/common/profile"
+	"testing"
+)
+
+func TestWriteProfile(t *testing.T) {
+	manifest := profile.ProfileManifest{
+		Mods: profile.ProfileMods{
+			Thunderstore: []string{"example-ts-mod-4.2.0"},
+			Nexus:        []string{"example-nexus-mod-6.9.0"},
+		},
+	}
+
+	err := profile.SaveManifest("Lethal Company", "test", manifest)
+	if err != nil {
+		t.Fatal(err)
+	}
+}
+
+func TestReadProfile(t *testing.T) {
+	_, err := profile.GetManifest("Lethal Company", "test")
+	if err != nil {
+		t.Fatal(err)
+	}
+}
diff --git a/backend/thunderstore/api.go b/backend/thunderstore/api.go
index 85a0115..5ac0f86 100644
--- a/backend/thunderstore/api.go
+++ b/backend/thunderstore/api.go
@@ -39,7 +39,7 @@ var CurModCacheDir string
 
 func ModCacheDir(gameTitle string) string {
 	cacheDir, _ := os.UserConfigDir()
-	return filepath.Join(cacheDir, "modm8", "Thunderstore", gameTitle, "ModCache")
+	return filepath.Join(cacheDir, "modm8", "Games", gameTitle, "ModCache")
 }
 
 type StrippedPackage struct {
diff --git a/backend/util.go b/backend/util.go
index fa72b3c..57e64ee 100644
--- a/backend/util.go
+++ b/backend/util.go
@@ -1,7 +1,6 @@
 package backend
 
 import (
-	"io/fs"
 	"os"
 	"path/filepath"
 	"strings"
@@ -9,8 +8,8 @@ import (
 
 func WalkDirExt(root string, exts []string) ([]string, error) {
 	var files []string
-	err := filepath.WalkDir(root, func(path string, d fs.DirEntry, err error) error {
-		if !d.IsDir() {
+	err := filepath.WalkDir(root, func(path string, entry os.DirEntry, err error) error {
+		if !entry.IsDir() {
 			for _, s := range exts {
 				if strings.HasSuffix(path, "."+s) {
 					files = append(files, path)
@@ -40,14 +39,12 @@ func ExistsAtPath(absPath string) (bool, error) {
 	return err == nil, err
 }
 
-func ReadFile(path string) (*string, error) {
-	content, err := os.ReadFile(filepath.Clean(path))
-	if err != nil {
-		return nil, nil
-	}
+func ReadFile(path string) ([]byte, error) {
+	return os.ReadFile(filepath.Clean(path))
+}
 
-	out := string(content)
-	return &out, nil
+func SaveFile(path string, data []byte) error {
+	return os.WriteFile(filepath.Clean(path), data, os.ModePerm)
 }
 
 func ContainsEqualFold(arr []string, item string) bool {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1d829aa..375d23a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -23,19 +23,19 @@ const { setMaxThreads } = useAppStore()
 const onKeydown = (event: KeyboardEvent) => {
     console.log('Keydown fired!\n', event.key)
 
-    const openDialogs = getOpenDialogs()
-    if (openDialogs.length > 0) {
-        for (const dialog of openDialogs) {
-            dialog.visible.value = false
+    if (event.key == "Escape") {
+        const openDialogs = getOpenDialogs()
+        if (openDialogs.length > 0) {
+            for (const dialog of openDialogs) {
+                dialog.visible.value = false
+            }
+        
+            return
         }
 
-        return
+        // No dialogs open + ESC -> open settings overlay.
+        // settingsDialog.setVisible(!settingsDialog.visible.value)
     }
-
-    // No dialogs open + pressing ESC -> open settings overlay.
-    // if (event.key == 'Escape') {
-    //     settingsDialog.setVisible(!settingsDialog.visible.value)
-    // }
 }
 
 onMounted(async () => {
@@ -45,7 +45,6 @@ onMounted(async () => {
     // We don't use `navigator.hardwareConcurrency` as it is known to be unreliable.
     setMaxThreads(await NumCPU())
 
-    // Add keydown event listener when the app mounts
     window.addEventListener('keydown', onKeydown)
 })
 
diff --git a/frontend/src/assets/styles/global.css b/frontend/src/assets/styles/global.css
index 89ab324..65455a4 100644
--- a/frontend/src/assets/styles/global.css
+++ b/frontend/src/assets/styles/global.css
@@ -27,18 +27,19 @@
 }
 
 html {
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
 
 body {
-    width: 100vw;
-    height: 100vh;
     position: relative;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
 }
 
 body::before {
diff --git a/frontend/src/components/reusable/PlatformSelectPanels.vue b/frontend/src/components/reusable/PlatformSelectPanels.vue
index a7a9aea..1c0f72e 100644
--- a/frontend/src/components/reusable/PlatformSelectPanels.vue
+++ b/frontend/src/components/reusable/PlatformSelectPanels.vue
@@ -3,7 +3,7 @@ import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 //import OutlineHoverButton from "./OutlineHoverButton.vue"
 
-const props = defineEmits(['selectThunderstore', 'selectNexus'])
+const emit = defineEmits(['selectThunderstore', 'selectNexus'])
 </script>
 
 <template>
@@ -17,7 +17,7 @@ const props = defineEmits(['selectThunderstore', 'selectNexus'])
         <div class="blur w-full h-full">
             <div class="flex column panel-text">
                 Thunderstore
-                <Button class="mt-3" label="Select" @click="$emit('selectThunderstore')"/>
+                <Button class="mt-3" label="Select" @click="emit('selectThunderstore')"/>
             </div>
         </div>
     </SplitterPanel>
@@ -26,7 +26,7 @@ const props = defineEmits(['selectThunderstore', 'selectNexus'])
         <div class="blur w-full h-full">
             <div class="flex column panel-text">
                 Nexus Mods
-                <Button class="mt-3" label="Select" @click="$emit('selectNexus')"/>
+                <Button class="mt-3" label="Select" @click="emit('selectNexus')"/>
             </div>
         </div>
     </SplitterPanel>
diff --git a/frontend/src/components/reusable/Viewport.vue b/frontend/src/components/reusable/Viewport.vue
index cd6c324..f393c4c 100644
--- a/frontend/src/components/reusable/Viewport.vue
+++ b/frontend/src/components/reusable/Viewport.vue
@@ -6,6 +6,8 @@ const appStore = useAppStore()
 const { 
     sidebarWidth 
 } = storeToRefs(appStore)
+
+const topbarHeight = '30px'
 </script>
 
 <template>
@@ -16,6 +18,7 @@ const {
 
 <style scoped>
 .viewport {
+    max-height: calc(100vh - v-bind(topbarHeight));
     margin-left: calc(v-bind(sidebarWidth) + 20px);
     margin-right: 20px;
 }
diff --git a/frontend/src/components/selected-game/ProfileManager.vue b/frontend/src/components/selected-game/ProfileManager.vue
index 983a9d1..b2ec6fd 100644
--- a/frontend/src/components/selected-game/ProfileManager.vue
+++ b/frontend/src/components/selected-game/ProfileManager.vue
@@ -1,132 +1,143 @@
 <script lang="ts" setup>
-import DataView from 'primevue/dataview'
-//import Toolbar from 'primevue/toolbar'
+import Listbox, { ListboxChangeEvent } from 'primevue/listbox'
 
-import { ref } from 'vue'
 import { t } from '@i18n'
 import { tooltipOpts } from '@frontend/src/util'
+import { Profile } from '@types'
 
-interface Profile {
-    name: string
-    mods: {
-        thunderstore?: string[]
-        nexus?: string[]
-    }
+import { useProfileStore } from '@stores'
+import { storeToRefs } from 'pinia'
+import { onMounted } from 'vue'
+
+const profileStore = useProfileStore()
+
+const { setSelectedProfile, initProfiles } = profileStore
+const { profiles, selectedProfile } = storeToRefs(profileStore)
+
+const getModsAmount = (prof: Profile) => {
+    const tsAmt = prof.mods.thunderstore?.length ?? 0
+    const nexusAmt = prof.mods.nexus?.length ?? 0
+
+    return tsAmt + nexusAmt
 }
 
-const selectedProfile = ref<Profile>({
-    name: "Default", 
-    mods: {}
-})
+const emit = defineEmits(['profileSelected'])
 
-const profiles = ref<Profile[]>([
-    { name: 'Default', mods: {} },
-    { name: 'testing', mods: {} },
-    { name: 'MEGALOPHOBIA', mods: {} },
-    { name: 'big futa cock mods', mods: {} },
-])
+const onChange = (e: ListboxChangeEvent) => {
+    setSelectedProfile(e.value)
+    emit('profileSelected', e.value)
+}
+
+onMounted(async () => {
+    await initProfiles()
+})
 </script>
 
 <template>
 <div class="profile-manager">
-    <p class="header mt-4 mb-1">{{ t('selected-game.profile-manager.header') }}</p>
-    
-    <DataView class="profile-manager-list" data-key="profile-manager-list" layout="list">
+    <p class="header">{{ t('selected-game.profile-manager.header') }}</p>
+
+    <div class="flex row gap-2">
+        <InputText class="w-full" :placeholder="t('selected-game.profile-manager.search-placeholder')"/>
+
+        <Dropdown :options="['hi']">
+
+        </Dropdown>
+    </div>
+
+    <Listbox class="profile-list" 
+        :modelValue="selectedProfile" :options="profiles" optionLabel="name" 
+        @change="onChange"
+    >
         <template #header>
-            <div class="flex column">
+            <div class="flex justify-content-between">
                 <div class="flex row gap-1">
-                    <Button 
+                    <Button
                         icon="pi pi-plus" severity="primary"
-                        v-tooltip.top="tooltipOpts($t('selected-game.profile-manager.new-profile'))"
+                        v-tooltip.top="tooltipOpts(t('selected-game.profile-manager.new-profile'))"
                     />
+                </div>
 
-                    <Button 
+                <div class="flex row gap-1">
+                    <!-- <Button 
                         icon="pi pi-download" severity="secondary"
-                        v-tooltip.top="tooltipOpts($t('keywords.import'))"
+                        v-tooltip.top="tooltipOpts(t('keywords.import'))"
                     />
-    
+
                     <Button 
                         icon="pi pi-upload" severity="secondary"
-                        v-tooltip.top="tooltipOpts($t('keywords.export'))"
-                    />
+                        v-tooltip.top="tooltipOpts(t('keywords.export'))"
+                    /> -->
 
-                    <InputText class="w-8" :placeholder="t('selected-game.profile-manager.search-placeholder')"/>
+                    <Button 
+                        icon="pi pi-refresh" severity="secondary"
+                        v-tooltip.top="tooltipOpts(t('keywords.refresh'))"
+                        @click="initProfiles()"
+                    />
                 </div>
             </div>
         </template>
 
         <template #empty>
-            <div></div>
-        </template>
-    </DataView>
-
-    <!-- <Card class="selector-card">
-        <template #title>
-            <Toolbar>
-                <template #start>
-                    <Button :label="$t('keywords.new')" icon="pi pi-plus" class="mr-2" severity="primary"/>
-                </template>
-            
-                <template #end>
-                    <div class="flex row gap-1">
-                        <Button 
-                            icon="pi pi-download" severity="secondary"
-                            v-tooltip.top="tooltipOpts($t('keywords.import'))"
-                        />
-
-                        <Button 
-                            icon="pi pi-upload" severity="secondary"
-                            v-tooltip.top="tooltipOpts($t('keywords.export'))"
-                        />
-                    </div>
-                    
-                </template>
-            </Toolbar>
+            <div class="flex column justify-content-center align-items-center mt-1">
+                <div style="font-weight: 500; color: var(--p-primary-color);">No profiles exist yet.</div>
+                <div style="font-weight: 350; color: lightgrey;">Click the plus icon to get started!</div>
+
+                <img class="mt-2" src="https://cdn.7tv.app/emote/01G7YR9X5G0003Z50SB3FM5WR4/3x.webp"></img>
+            </div>
         </template>
 
-        <template #content>
-            <List filter class="selector-list w-full" v-model="selectedProfile" 
-                :options="profiles" optionLabel="name"
-            />
+        <template #option="{ option: profile }">
+            <div class="flex row w-full justify-content-between align-items-center">
+                <div>[{{getModsAmount(profile)}}] {{ profile.name }}</div>
+                
+                <div class="flex gap-1">
+                    <Button style="width: 34px; height: 32px;" icon="pi pi-pencil" severity="secondacry"></Button>
+                    <Button style="width: 34px; height: 32px;" icon="pi pi-trash" severity="danger"></Button>
+                </div>
+            </div>
         </template>
-    </Card> -->
+    </Listbox>
 </div>
 </template>
 
 <style scoped>
 .profile-manager {
-    margin: 0px 10px 0px 30px;
+    margin: 30px 10px 20px 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
 }
 
-:deep(.p-dataview-header) {
-    margin: 0 !important;
+.profile-list {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    margin-top: 10px;
+    border: var(--border-faint);
 }
 
-.header {
-    font-size: 28px;
-    font-weight: 540;
-    user-select: none;
-}
-
-.selector-card {
-    height: 100% !important;
-    background: none;
+:deep(.p-listbox-list) {
+    padding: 0;
 }
 
-:deep(.p-toolbar) {
-    background: none;
+:deep(.p-listbox-list-container) {
+    overflow: scroll;
+    scrollbar-width: none;
 }
 
-.selector-card :deep(.p-card-body) {
-    padding: 0rem;
-    gap: 10px;
+:deep(.p-listbox-option) {
+    padding: 10px 5px 10px 5px;
 }
 
-.selector-list {
-    background: none; 
+:deep(.p-listbox-header) {
+    padding: 5px 0px 5px 0px;
 }
 
-:deep(.selector-list > *) {
-    background: none; 
+.header {
+    font-size: 32px;
+    font-weight: 540;
+    user-select: none;
+    margin: 0px 0px 15px 0px;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json
index 150df09..91c5102 100644
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -52,7 +52,8 @@
     "cancel": "Stornieren",
     "import": "Import",
     "export": "Export",
-    "refresh": "Aktualisieren"
+    "refresh": "Aktualisieren",
+    "uninstall": "Deinstallieren"
   },
   "languages": {
     "en": "Englisch",
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index f85ece8..17d3bd4 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -81,7 +81,8 @@
     "install": "Install",
     "cancel": "Cancel",
     "import": "Import",
-    "export": "Export"
+    "export": "Export",
+    "uninstall": "Uninstall"
   },
   "languages": {
     "en": "English",
diff --git a/frontend/src/i18n/locales/es.json b/frontend/src/i18n/locales/es.json
index 3886d57..b52728d 100644
--- a/frontend/src/i18n/locales/es.json
+++ b/frontend/src/i18n/locales/es.json
@@ -52,7 +52,8 @@
     "cancel": "Cancelar",
     "import": "Importar",
     "export": "Exportar",
-    "refresh": "Refrescar"
+    "refresh": "Refrescar",
+    "uninstall": "Desinstalar"
   },
   "languages": {
     "en": "Inglés",
diff --git a/frontend/src/i18n/locales/fr.json b/frontend/src/i18n/locales/fr.json
index 74fbaa1..d545fb6 100644
--- a/frontend/src/i18n/locales/fr.json
+++ b/frontend/src/i18n/locales/fr.json
@@ -52,7 +52,8 @@
     "cancel": "Annuler",
     "import": "Importer",
     "export": "Exporter",
-    "refresh": "Rafraîchir"
+    "refresh": "Rafraîchir",
+    "uninstall": "Désinstaller"
   },
   "languages": {
     "en": "Anglais",
diff --git a/frontend/src/i18n/locales/it.json b/frontend/src/i18n/locales/it.json
index 87bd2e2..b06fe7b 100644
--- a/frontend/src/i18n/locales/it.json
+++ b/frontend/src/i18n/locales/it.json
@@ -52,7 +52,8 @@
     "cancel": "Cancellare",
     "import": "Importare",
     "export": "Esportare",
-    "refresh": "Aggiorna"
+    "refresh": "Aggiorna",
+    "uninstall": "Disinstallare"
   },
   "languages": {
     "en": "Inglese",
diff --git a/frontend/src/stores/game.ts b/frontend/src/stores/game.ts
index 26f4a55..b484a46 100644
--- a/frontend/src/stores/game.ts
+++ b/frontend/src/stores/game.ts
@@ -18,13 +18,12 @@ export interface GameState {
 
 export const useGameStore = defineStore('GameStore', () => {
     //#region State
+    const games = ref<Map<string, ThunderstoreGame>>(new Map())
     const selectedGame = ref<ThunderstoreGame>({
         title: 'Placeholder',
         identifier: '',
         steamID: 0,
     })
-
-    const games = ref<Map<string, ThunderstoreGame>>(new Map())
     //#endregion
 
     //#region Getters
diff --git a/frontend/src/stores/profile.ts b/frontend/src/stores/profile.ts
index 5a75c92..231632d 100644
--- a/frontend/src/stores/profile.ts
+++ b/frontend/src/stores/profile.ts
@@ -1,10 +1,46 @@
 import { defineStore } from "pinia"
+import { ref } from "vue"
+
+import { Nullable, Profile } from "@types"
+import { useGameStore } from "@stores"
+
+import { GetProfiles } from "@backend/profile/ProfileManager.js"
 
 export interface ProfileState {
-    // TODO: Create 'Profile' type and replace `any`
-    profiles: Map<string, any>
+    profiles: Map<string, Profile>
 }
 
+// const mockProfiles = [
+//     { name: 'Default', mods: { thunderstore: ['Owen3H-CSync'] } },
+//     { name: 'testing', mods: {} },
+//     { name: 'MEGALOPHOBIA', mods: {} },
+//     { name: 'big futa cock mods', mods: {} }
+// ]
+
 export const useProfileStore = defineStore("ProfileStore", () => {
-    return {}
+    const gameStore = useGameStore()
+
+    // Key is the identifier of the game the profiles exist on.
+    const profiles = ref<Profile[]>()
+    const selectedProfile = ref<Nullable<Profile>>()
+
+    function setSelectedProfile(prof: Profile) {
+        selectedProfile.value = profiles.value?.find(p => p.name == prof.name) ?? prof
+    }
+
+    async function initProfiles() {
+        try {
+            let profs = await GetProfiles(gameStore.selectedGame.title)
+            profiles.value = Object.entries(profs).map(([key, value]) => ({ ...value, name: key }))
+        } catch (e: any) {
+            console.error(e)
+        }
+    }
+
+    return {
+        profiles,
+        selectedProfile,
+        setSelectedProfile,
+        initProfiles
+    }
 })
\ No newline at end of file
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
index 0cae5f1..ad4d78a 100644
--- a/frontend/src/stores/settings.ts
+++ b/frontend/src/stores/settings.ts
@@ -6,7 +6,6 @@ import {
     SetGPUAccel, 
     SetLocale,
     SetNexusPersonalKey,
-    SetTheme, 
     SetThreads,
     SetUpdateBehaviour,
     SetGameSelectionLayout
@@ -14,12 +13,6 @@ import {
 
 import type { app } from "@backend/models.js"
 
-//import type { Theme } from "@types"
-
-// export interface SettingsState {
-
-// }
-
 export const useSettingsStore = defineStore("SettingsStore", () => {
     //#region State
     const general = ref({
@@ -40,7 +33,7 @@ export const useSettingsStore = defineStore("SettingsStore", () => {
     //#endregion
 
     //#region Actions
-
+    
     // 'Save' here means updating the viper config in the backend. Refer to the 'settings.go' file.
     function setLocale(code: string, save = true) {
         general.value.locale = code
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 8329db6..9313363 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,5 +2,6 @@ export * from './settings'
 export * from './primevue'
 export * from './game'
 export * from './thunderstore'
+export * from './profile'
 
 export declare type Nullable<T = void> = T | null | undefined
\ No newline at end of file
diff --git a/frontend/src/types/profile.ts b/frontend/src/types/profile.ts
new file mode 100644
index 0000000..3273d0d
--- /dev/null
+++ b/frontend/src/types/profile.ts
@@ -0,0 +1,7 @@
+export interface Profile {
+    name: string
+    mods: {
+        thunderstore?: string[]
+        nexus?: string[]
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/views/GameSelection.vue b/frontend/src/views/GameSelection.vue
index 41607bf..b0869b8 100644
--- a/frontend/src/views/GameSelection.vue
+++ b/frontend/src/views/GameSelection.vue
@@ -187,208 +187,208 @@ onMounted(async () => {
 </script>
 
 <template>
-    <Viewport class="flex-span column">
-        <h2 class="header no-select">{{ t('game-selection.header') }}</h2>
-
-        <div class="card no-drag">
-            <!-- While loading, show a skeleton of a grid. -->
-            <DataView v-if="loading" data-key="game-selection-loading" layout="grid">
-                <template #empty>
-                    <div class="grid grid-nogutter pt-1">
-                        <div v-for="i in 15" :key="i" class="grid-item col-2 sm:col-6 md:col-5 lg:col-2 xl:col-2">
-                            <div class="flex flex-column p-3">
-                                <div class="flex flex-column align-items-center pb-2">
-                                    <Skeleton width="8rem" height="2.3rem" />
-                                </div>
-                
-                                <div class="flex justify-content-center border-round">
-                                    <Skeleton width="75%" height="16.5rem" />
-                                </div>
-                
-                                <div class="flex flex-column align-items-center pt-2">
-                                    <div class="flex flex-column gap-2">
-                                        <div class="flex flex-row gap-2 justify-content-center">
-                                            <Skeleton width="2.5rem" height="2rem" />
-                                            <Skeleton width="2.5rem" height="2rem" />
-                                        </div>
-
-                                        <div class="flex gap-2 justify-content-center align-items-baseline">
-                                            <Skeleton width="16rem" height="2.5rem" />
-                                        </div>
+<Viewport class="flex-full column">
+    <h2 class="header no-select">{{ t('game-selection.header') }}</h2>
+
+    <div class="card no-drag">
+        <!-- While loading, show a skeleton of a grid. -->
+        <DataView v-if="loading" data-key="game-selection-loading" layout="grid">
+            <template #empty>
+                <div class="grid grid-nogutter pt-1">
+                    <div v-for="i in 15" :key="i" class="grid-item col-2 sm:col-6 md:col-5 lg:col-2 xl:col-2">
+                        <div class="flex flex-column p-3">
+                            <div class="flex flex-column align-items-center pb-2">
+                                <Skeleton width="8rem" height="2.3rem" />
+                            </div>
+            
+                            <div class="flex justify-content-center border-round">
+                                <Skeleton width="75%" height="16.5rem" />
+                            </div>
+            
+                            <div class="flex flex-column align-items-center pt-2">
+                                <div class="flex flex-column gap-2">
+                                    <div class="flex flex-row gap-2 justify-content-center">
+                                        <Skeleton width="2.5rem" height="2rem" />
+                                        <Skeleton width="2.5rem" height="2rem" />
+                                    </div>
+
+                                    <div class="flex gap-2 justify-content-center align-items-baseline">
+                                        <Skeleton width="16rem" height="2.5rem" />
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </template>
-            </DataView>
-
-            <!-- Finished loading, render the DataView with proper info -->
-            <DataView v-else lazy data-key="game-selection" :value="getGames()" :layout="layout">
-                <template #empty>
-                    <div v-if="selectedFilter.label == 'FAVOURITES'" class="dataview-empty">
-                        <p>No games favourited!</p>
-                    </div>
-                    <div v-else-if="selectedFilter.label == 'INSTALLED'" class="dataview-empty">
-                        <p>No games installed!</p>
-                    </div>
-                    <div v-else-if="searchInput && searchInput.length > 0" class="dataview-empty flex flex-column">
-                        <p>{{ `${t('game-selection.empty-results')}.` }}</p>
-
-                        <!-- Sadge -->
-                        <!-- <img class="pt-3" src="https://cdn.7tv.app/emote/603cac391cd55c0014d989be/2x.png"> -->
+                </div>
+            </template>
+        </DataView>
+
+        <!-- Finished loading, render the DataView with proper info -->
+        <DataView v-else lazy data-key="game-selection" :value="getGames()" :layout="layout">
+            <template #empty>
+                <div v-if="selectedFilter.label == 'FAVOURITES'" class="dataview-empty">
+                    <p>No games favourited!</p>
+                </div>
+                <div v-else-if="selectedFilter.label == 'INSTALLED'" class="dataview-empty">
+                    <p>No games installed!</p>
+                </div>
+                <div v-else-if="searchInput && searchInput.length > 0" class="dataview-empty flex flex-column">
+                    <p>{{ `${t('game-selection.empty-results')}.` }}</p>
+
+                    <!-- Sadge -->
+                    <!-- <img class="pt-3" src="https://cdn.7tv.app/emote/603cac391cd55c0014d989be/2x.png"> -->
+
+                    <!-- modCheck -->
+                    <img class="pt-3" src="https://cdn.7tv.app/emote/60abf171870d317bef23d399/2x.gif">
+                </div>
+                <div v-else class="dataview-empty flex flex-column">
+                    <p>No games available! Something probably went wrong.</p>
+                </div>
+            </template>
+
+            <!-- Header (filter, search, layout) -->
+            <template #header>
+                <div class="flex flex-row justify-content-between align-items-center">
+                    <div class="flex row gap-2">
+                        <div class="searchbar">
+                            <IconField iconPosition="left">
+                                <InputIcon class="pi pi-search"/>
+                                <InputText type="text" :placeholder="t('game-selection.search-placeholder')" v-model="searchInput"/>
+                            </IconField>
+                        </div>
 
-                        <!-- modCheck -->
-                        <img class="pt-3" src="https://cdn.7tv.app/emote/60abf171870d317bef23d399/2x.gif">
+                        <Dropdown checkmark
+                            class="no-drag filter-dropdown"
+                            :options="filters"
+                            v-model="selectedFilter"
+                        >
+                            <template #option="selectedItem: OptionItem<ValueItemLabeled<string>>">
+                                <div class="flex no-drag align-items-center">
+                                    <div class="no-select">{{ selectedItem.option.value }}</div>
+                                </div>
+                            </template>
+                            
+                            <template #value="selectedItem: ValueItem<ValueItemLabeled<string>>">
+                                <div v-if="selectedItem.value" class="flex align-items-center">
+                                    <div>{{ selectedItem.value.value }}</div>
+                                </div>
+                            </template>
+                        </Dropdown>
                     </div>
-                    <div v-else class="dataview-empty flex flex-column">
-                        <p>No games available! Something probably went wrong.</p>
+                    
+                    <div class="flex row layout-btns">
+                        <SelectButton v-model="layout" :options="options" :allowEmpty="false">
+                            <template #option="{ option }">
+                                <i :class="[option === 'list' ? 'pi pi-list' : 'pi pi-th-large']" />
+                            </template>
+                        </SelectButton>
                     </div>
-                </template>
-
-                <!-- Header (filter, search, layout) -->
-                <template #header>
-                    <div class="flex flex-row justify-content-between align-items-center">
-                        <div class="flex row gap-2">
-                            <div class="searchbar">
-                                <IconField iconPosition="left">
-                                    <InputIcon class="pi pi-search"/>
-                                    <InputText type="text" :placeholder="t('game-selection.search-placeholder')" v-model="searchInput"/>
-                                </IconField>
+                </div>
+            </template>
+
+            <!-- Grid layout -->
+            <template #grid>
+                <div class="scrollable-grid grid grid-nogutter">
+                    <div v-for="(game, index) in getGames()" :key="index" class="grid-item border-faint col-6 sm:col-6 md:col-4 lg:col-3 xl:col-2">
+                        <div class="flex column game-card gap-2">
+                            <div class="flex column align-items-center">
+                                <div class="game-grid-title">{{ game.title }}</div>
                             </div>
-    
-                            <Dropdown checkmark
-                                class="no-drag filter-dropdown"
-                                :options="filters"
-                                v-model="selectedFilter"
-                            >
-                                <template #option="selectedItem: OptionItem<ValueItemLabeled<string>>">
-                                    <div class="flex no-drag align-items-center">
-                                        <div class="no-select">{{ selectedItem.option.value }}</div>
-                                    </div>
-                                </template>
-                                
-                                <template #value="selectedItem: ValueItem<ValueItemLabeled<string>>">
-                                    <div v-if="selectedItem.value" class="flex align-items-center">
-                                        <div>{{ selectedItem.value.value }}</div>
-                                    </div>
-                                </template>
-                            </Dropdown>
-                        </div>
-                        
-                        <div class="flex row layout-btns">
-                            <SelectButton v-model="layout" :options="options" :allowEmpty="false">
-                                <template #option="{ option }">
-                                    <i :class="[option === 'list' ? 'pi pi-list' : 'pi pi-th-large']" />
-                                </template>
-                            </SelectButton>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- Grid layout -->
-                <template #grid>
-                    <div class="scrollable-grid grid grid-nogutter">
-                        <div v-for="(game, index) in getGames()" :key="index" class="grid-item border-faint col-6 sm:col-6 md:col-4 lg:col-3 xl:col-2">
-                            <div class="flex column game-card gap-2">
-                                <div class="flex column align-items-center">
-                                    <div class="game-grid-title">{{ game.title }}</div>
-                                </div>
 
-                                <div class="flex column relative mx-auto">
-                                    <img class="game-grid-thumbnail" :src="getThumbnail(game)"/>
-
-                                    <!-- <div class="flex gap-2 justify-content-center align-items-baseline mt-2 mb-3">
-                                        <p class="m-0" style="font-size: 16px">{{ t('game-selection.bepinex-setup') }}</p>
-                                        <i
-                                            :class="['pi', game.bepinexSetup ? 'pi-check' : 'pi-times']" 
-                                            :style="{ color: game.bepinexSetup  ? 'lime' : 'red' }"
-                                        />
-                                    </div> -->
-                                </div>
+                            <div class="flex column relative mx-auto">
+                                <img class="game-grid-thumbnail" :src="getThumbnail(game)"/>
 
-                                <div class="flex row justify-content-center gap-2">
-                                    <Button outlined plain
-                                        v-tooltip.top="tooltipOpts(game.favourited ? t('keywords.unfavourite') : t('keywords.favourite'))"
-                                        :icon="game.favourited ? 'pi pi-heart-fill' : 'pi pi-heart'"
-                                        :style="game.favourited ? { color: 'var(--primary-color)' } : {}"
-                                        @click="toggleFavouriteGame(game.identifier)"
+                                <!-- <div class="flex gap-2 justify-content-center align-items-baseline mt-2 mb-3">
+                                    <p class="m-0" style="font-size: 16px">{{ t('game-selection.bepinex-setup') }}</p>
+                                    <i
+                                        :class="['pi', game.bepinexSetup ? 'pi-check' : 'pi-times']" 
+                                        :style="{ color: game.bepinexSetup  ? 'lime' : 'red' }"
                                     />
+                                </div> -->
+                            </div>
 
-                                    <Button outlined plain
-                                        v-if="game.installed"
-                                        v-tooltip.top="tooltipOpts(t('tooltips.game-selection.open-folder-location'))"
-                                        icon="pi pi-folder" @click="openLink(`file://${game.path}`)"
-                                    />
-                                </div>
+                            <div class="flex row justify-content-center gap-2">
+                                <Button outlined plain
+                                    v-tooltip.top="tooltipOpts(game.favourited ? t('keywords.unfavourite') : t('keywords.favourite'))"
+                                    :icon="game.favourited ? 'pi pi-heart-fill' : 'pi pi-heart'"
+                                    :style="game.favourited ? { color: 'var(--primary-color)' } : {}"
+                                    @click="toggleFavouriteGame(game.identifier)"
+                                />
+
+                                <Button outlined plain
+                                    v-if="game.installed"
+                                    v-tooltip.top="tooltipOpts(t('tooltips.game-selection.open-folder-location'))"
+                                    icon="pi pi-folder" @click="openLink(`file://${game.path}`)"
+                                />
+                            </div>
 
-                                <div class="grid-item-bottom-row justify-content-center">
-                                    <Button severity="primary"
-                                        class="grid-select-game-btn"
-                                        :label="t('game-selection.select-button')" 
-                                        @click="selectGame(game)"
-                                    />
-                                </div>
+                            <div class="grid-item-bottom-row justify-content-center">
+                                <Button severity="primary"
+                                    class="grid-select-game-btn"
+                                    :label="t('game-selection.select-button')" 
+                                    @click="selectGame(game)"
+                                />
                             </div>
                         </div>
                     </div>
-                </template>
-
-                <!-- List layout -->
-                <template #list>
-                    <div class="scrollable-list list-nogutter" ref="scrollableList" tabindex="0" @wheel.prevent="handleScroll">
-                        <div 
-                            v-for="(game, index) in getGames()" class="snap-top col-12" 
-                            :key="index" :ref="el => gameElements[index] = el"
-                        >
-                            <div class="flex flex-column sm:flex-row sm:align-items-center p-2 gap-4" :class="{ 'border-top-faint': index !== 0 }">
-                                <img class="game-list-thumbnail fadeinleft fadeinleft-thumbnail block xl:block mx-auto w-full" :src="getThumbnail(game)"/>
-
-                                <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1">
-                                    <div class="fadeinleft fadeinleft-title flex flex-row md:flex-column justify-content-between align-items-start gap-1">
-                                        <div class="game-list-title">{{ game.title }}</div>
-
-                                        <div class="flex gap-2 justify-content-center align-items-baseline">
-                                            <p class="m-0" style="font-size: 16px">{{ t('game-selection.bepinex-setup') }}</p>
-                                            <i
-                                                :class="['pi', game.installed ? 'pi-check' : 'pi-times']" 
-                                                :style="{ color: game.installed ? 'lime' : 'red' }"
-                                            />
-                                        </div>
+                </div>
+            </template>
+
+            <!-- List layout -->
+            <template #list>
+                <div class="scrollable-list list-nogutter" ref="scrollableList" tabindex="0" @wheel.prevent="handleScroll">
+                    <div 
+                        v-for="(game, index) in getGames()" class="snap-top col-12" 
+                        :key="index" :ref="el => gameElements[index] = el"
+                    >
+                        <div class="flex flex-column sm:flex-row sm:align-items-center p-2 gap-4" :class="{ 'border-top-faint': index !== 0 }">
+                            <img class="game-list-thumbnail fadeinleft fadeinleft-thumbnail block xl:block mx-auto w-full" :src="getThumbnail(game)"/>
+
+                            <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1">
+                                <div class="fadeinleft fadeinleft-title flex flex-row md:flex-column justify-content-between align-items-start gap-1">
+                                    <div class="game-list-title">{{ game.title }}</div>
+
+                                    <div class="flex gap-2 justify-content-center align-items-baseline">
+                                        <p class="m-0" style="font-size: 16px">{{ t('game-selection.bepinex-setup') }}</p>
+                                        <i
+                                            :class="['pi', game.installed ? 'pi-check' : 'pi-times']" 
+                                            :style="{ color: game.installed ? 'lime' : 'red' }"
+                                        />
                                     </div>
+                                </div>
+
+                                <div class="flex flex-column md:align-items-end gap-5">
+                                    <div class="flex flex-row md:flex-row gap-2">
+                                        <Button
+                                            outlined plain
+                                            icon="pi pi-folder"
+                                            v-if="game.installed"
+                                            v-tooltip.top="tooltipOpts(t('tooltips.game-selection.open-folder-location'))"
+                                            @click="openLink(`file://${game.path}`)"
+                                        />
 
-                                    <div class="flex flex-column md:align-items-end gap-5">
-                                        <div class="flex flex-row md:flex-row gap-2">
-                                            <Button
-                                                outlined plain
-                                                icon="pi pi-folder"
-                                                v-if="game.installed"
-                                                v-tooltip.top="tooltipOpts(t('tooltips.game-selection.open-folder-location'))"
-                                                @click="openLink(`file://${game.path}`)"
-                                            />
-
-                                            <Button
-                                                outlined plain
-                                                :icon="game.favourited ? 'pi pi-heart-fill' : 'pi pi-heart'"
-                                                :style="game.favourited ? { color: 'var(--primary-color)' } : {}"
-                                                @click="toggleFavouriteGame(game.identifier)"
-                                            />
-
-                                            <Button
-                                                :label="t('game-selection.select-button')"
-                                                class="list-select-game-btn flex-auto md:flex-initial"
-                                                @click="selectGame(game)"
-                                            />
-                                        </div>
+                                        <Button
+                                            outlined plain
+                                            :icon="game.favourited ? 'pi pi-heart-fill' : 'pi pi-heart'"
+                                            :style="game.favourited ? { color: 'var(--primary-color)' } : {}"
+                                            @click="toggleFavouriteGame(game.identifier)"
+                                        />
+
+                                        <Button
+                                            :label="t('game-selection.select-button')"
+                                            class="list-select-game-btn flex-auto md:flex-initial"
+                                            @click="selectGame(game)"
+                                        />
                                     </div>
                                 </div>
-                            </div>  
-                        </div>
+                            </div>
+                        </div>  
                     </div>
-                </template>
-            </DataView>
-        </div>
-    </Viewport>
+                </div>
+            </template>
+        </DataView>
+    </div>
+</Viewport>
 </template>
 
 <style scoped>
@@ -417,7 +417,7 @@ onMounted(async () => {
 .scrollable-grid {
     overflow-y: scroll;
     scrollbar-width: none;
-    max-height: calc(100vh - 145px); /* TODO: Investigate why 100vh alone prevents scrolling to bottom. */
+    max-height: calc(100vh - 140px); /* TODO: Investigate why 100vh alone prevents scrolling to bottom. */
 }
 
 .grid-item {
diff --git a/frontend/src/views/SelectedGame.vue b/frontend/src/views/SelectedGame.vue
index 9084de6..f9bdbfe 100644
--- a/frontend/src/views/SelectedGame.vue
+++ b/frontend/src/views/SelectedGame.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from "vue"
+import { computed, nextTick, onMounted, ref } from "vue"
 
 import Skeleton from 'primevue/skeleton'
 import Tag from 'primevue/tag'
@@ -12,6 +12,7 @@ import { GetLatestPackageVersion, GetStrippedPackages } from '@backend/thunderst
 import { thunderstore, v1 } from "@backend/models"
 import { InstallByName } from '@backend/thunderstore/API.js'
 
+import { Viewport } from '@components'
 import { useDialog } from '@composables'
 import {
     ProfileManager,
@@ -20,13 +21,13 @@ import {
 } from "@components"
 
 import type { Package, Nullable } from "@types"
-import { useAppStore, useGameStore } from "@stores"
+import { useProfileStore, useGameStore } from "@stores"
 
 import { debounce } from "../util"
 import { storeToRefs } from "pinia"
 
-const appStore = useAppStore()
-const { sidebarWidth } = storeToRefs(appStore)
+const profileStore = useProfileStore()
+const { selectedProfile } = storeToRefs(profileStore)
 
 const gameStore = useGameStore()
 const { selectedGame, updateModCache } = gameStore
@@ -43,7 +44,9 @@ const first = ref(0) // Starting index of the current page
 const modElements = ref<any[]>([])
 const scrollIndex = ref(0)
 
-const mods = ref<thunderstore.StrippedPackage[]>([])
+const mods = computed(() => activeTabIndex.value == 0 ? filterByProfile(allMods.value) : allMods.value)
+
+const allMods = ref<thunderstore.StrippedPackage[]>([])
 const currentPageMods = ref<Package[]>([])
 
 const installing = ref(false)
@@ -56,11 +59,9 @@ const tabs = ref([
     //{ label: 'Nexus', icon: 'pi pi-globe' } // Uncomment when Nexus is implemented.
 ])
 
-const onTabChange = (e: TabMenuChangeEvent) => {
+const onTabChange = async (e: TabMenuChangeEvent) => {
     activeTabIndex.value = e.index
-
-    if (e.index == 1) refreshMods(false)
-    else mods.value = []
+    await updatePage(0, ROWS)
 }
 
 /** 
@@ -84,7 +85,7 @@ const refreshMods = async (fetch: boolean) => {
         }
     }
 
-    mods.value = getMods()
+    allMods.value = getMods()
     await updatePage(0, ROWS)
 
     // We are done regardless of outcome, stop loading.
@@ -142,6 +143,10 @@ const filterBySearch = (mods: thunderstore.StrippedPackage[]) => {
     })
 }
 
+const filterByProfile = (mods: thunderstore.StrippedPackage[]) => {
+    return mods.filter(mod => selectedProfile.value?.mods.thunderstore?.includes(mod.full_name))
+}
+
 const getMods = (searchFilter = true, defaultSort = true) => {
     if (!selectedGame.modCache) return []
     const mods = searchFilter ? filterBySearch(selectedGame.modCache) : selectedGame.modCache
@@ -158,7 +163,7 @@ const onInputChange = async () => {
     // No input, no need to debounce.
     if (!searchInput.value?.trim()) {
         // Show all mods without filtering.
-        mods.value = getMods(false)
+        allMods.value = getMods(false)
         return await updatePage(0, ROWS)
     }
 
@@ -211,7 +216,7 @@ const handleScroll = (e: WheelEvent) => {
 </script>
 
 <template>
-<div :class="['selected-game', { 'no-drag': configEditorDialog.visible || installingModDialog.visible }]">
+<Viewport :class="['selected-game', { 'no-drag': configEditorDialog.visible || installingModDialog.visible }]">
     <div class="flex row">
         <div class="flex column">
             <Card class="selected-game-card no-drag">
@@ -254,7 +259,7 @@ const handleScroll = (e: WheelEvent) => {
                 </template>
             </Card>
 
-            <ProfileManager/>
+            <ProfileManager @profileSelected="updatePage(0, ROWS)"/>
         </div>
     
         <div class="flex mod-list-container">
@@ -263,7 +268,7 @@ const handleScroll = (e: WheelEvent) => {
                 <template #empty>
                     <div class="list-nogutter pt-4">
                         <div v-for="i in 6" :key="i" class="loading-list-item">
-                            <div style="width: 1280px;" class="flex flex-row ml-1 p-3 border-faint border-round">
+                            <div style="width: 1280px;" class="flex flex-row ml-1 p-3 border-top-faint border-round">
                                 <Skeleton size="6.5rem"/> <!-- Thumbnail -->
                                 
                                 <div class="flex column gap-1 ml-2">
@@ -289,7 +294,7 @@ const handleScroll = (e: WheelEvent) => {
                 v-else lazy stripedRows
                 layout="list" data-key="mod-list"
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink"
-                :paginator="mods.length > 0" :rows="ROWS"
+                :paginator="mods.length > ROWS" :rows="ROWS"
                 :value="mods" @page="onPageChange" :first="first"
             >
                 <template #empty>
@@ -362,7 +367,11 @@ const handleScroll = (e: WheelEvent) => {
 
                                         <div class="mod-list-bottom-row"> 
                                             <div class="flex row gap-2">
-                                                <Button plain class="btn w-full" icon="pi pi-download"
+                                                <Button v-if="activeTabIndex == 0" class="btn w-full"
+                                                    severity="danger" icon="pi pi-trash"
+                                                    :label="$t('keywords.uninstall')"
+                                                />
+                                                <Button v-else class="btn w-full" icon="pi pi-download"
                                                     :label="$t('keywords.install')" @click="installMod(mod.full_name)"
                                                 />
 
@@ -399,7 +408,7 @@ const handleScroll = (e: WheelEvent) => {
 
         <ConfigEditorOverlay :dialog="configEditorDialog" :selectedGame="selectedGame"/>
     </div>
-</div>
+</Viewport>
 </template>
 
 <style scoped>
@@ -411,15 +420,19 @@ const handleScroll = (e: WheelEvent) => {
 .selected-game {
     display: flex;
     flex-direction: column;
-    margin-left: v-bind(sidebarWidth); /* Account for sidebar */
     margin-top: 30px;
 }
 
+.selected-game > :first-child {
+    height: calc(100vh - 30px);
+}
+
 .selected-game-card {
-    background: none;
-    box-shadow: none;
+    margin: 0px 10px 0px 10px;
     width: max-content;
     flex-shrink: 0;
+    background: none;
+    box-shadow: none;
 }
 
 .selected-game-card-header {
@@ -431,7 +444,6 @@ const handleScroll = (e: WheelEvent) => {
 }
 
 .selected-game-card :deep(.p-card-body) {
-    margin: 0px 20px 0px 30px;
     padding: 0px;
 }
 
@@ -559,6 +571,7 @@ const handleScroll = (e: WheelEvent) => {
 
 :deep(.p-dataview-paginator-bottom) {
     border: none;
+    justify-self: center;
 }
 
 .list-item {
@@ -574,12 +587,4 @@ const handleScroll = (e: WheelEvent) => {
     padding-bottom: 15px;
     padding-top: 0px;
 }
-
-:deep(.p-tabmenu-nav) {
-    background: none;
-}
-
-:deep(.p-menuitem-link) {
-    background: none;
-}
 </style>
\ No newline at end of file
diff --git a/main.go b/main.go
index a74f12a..90892ca 100644
--- a/main.go
+++ b/main.go
@@ -13,6 +13,7 @@ import (
 	"github.com/wailsapp/wails/v2/pkg/options/windows"
 
 	"modm8/backend/app"
+	"modm8/backend/common/profile"
 	"modm8/backend/game"
 	"modm8/backend/nexus"
 	"modm8/backend/thunderstore"
@@ -72,6 +73,7 @@ func main() {
 	tsAPI := thunderstore.NewAPI(modm8.Ctx)
 	tsTools := thunderstore.NewTools()
 
+	profileManager := profile.NewManager()
 	gameManager := game.NewManager()
 	steamRunner := steam.NewRunner()
 
@@ -105,6 +107,7 @@ func main() {
 			tsTools,
 			nexusAPI,
 			gameManager,
+			profileManager,
 			steamRunner,
 		},
 		EnumBind: IList{