diff --git a/src/_managerinf/ManagerInformation.ts b/src/_managerinf/ManagerInformation.ts
index 1fa431ef2..862df1ffb 100644
--- a/src/_managerinf/ManagerInformation.ts
+++ b/src/_managerinf/ManagerInformation.ts
@@ -4,4 +4,5 @@ export default class ManagerInformation {
     public static VERSION: VersionNumber = new VersionNumber('3.2.18');
     public static IS_PORTABLE: boolean = false;
     public static APP_NAME: string = "r2modman";
+    public static WIKI_GAME_DIRECTORY_HELP_URL = "https://github.com/ebkr/r2modmanPlus/wiki/Why-aren't-my-mods-working%3F#games-via-steam";
 }
diff --git a/src/components/composables/SettingSearchComposable.ts b/src/components/composables/SettingSearchComposable.ts
new file mode 100644
index 000000000..3f008eaa3
--- /dev/null
+++ b/src/components/composables/SettingSearchComposable.ts
@@ -0,0 +1,31 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue';
+
+import SearchUtils from '../../utils/SearchUtils';
+
+export type SettingSearchPhrases = MaybeRefOrGetter<(string | undefined | null)[]>;
+
+function isNonEmptyPhrase(phrase: string | undefined | null): phrase is string {
+    return phrase !== null && phrase !== undefined && phrase !== '';
+}
+
+export function useSettingSearch(
+    searchTerm: MaybeRefOrGetter<string | undefined>,
+    keyPhrases: SettingSearchPhrases
+): { isVisible: ComputedRef<boolean> } {
+    const isVisible = computed<boolean>(() => {
+        const activeSearchTerm = toValue(searchTerm);
+        if (!activeSearchTerm) {
+            return true;
+        }
+
+        const searchKeys = SearchUtils.makeKeys(activeSearchTerm);
+
+        const resolvedPhrases = toValue(keyPhrases);
+        const nonEmptyPhrases = resolvedPhrases.filter(isNonEmptyPhrase);
+        const searchableText = nonEmptyPhrases.join(' ');
+
+        return SearchUtils.isSearched(searchKeys, searchableText);
+    });
+
+    return { isVisible };
+}
diff --git a/src/components/modals/DependencyStringsModal.vue b/src/components/modals/DependencyStringsModal.vue
new file mode 100644
index 000000000..8c6997007
--- /dev/null
+++ b/src/components/modals/DependencyStringsModal.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManifestV2 from '../../model/ManifestV2';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isDependencyStringsModalOpen);
+const localModList = computed<ManifestV2[]>(() => store.state.profile.modList);
+
+function close() {
+    store.commit('closeDependencyStringsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="dependency-strings-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Dependency string list</h2>
+        </template>
+        <template v-slot:body>
+            <ul>
+                <li v-for="(mod, index) in localModList" :key="`dep-str-${index}`">
+                    {{ mod.getName() }}-{{ mod.getVersionNumber().toString() }}
+                </li>
+            </ul>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">Close</button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/IncorrectGameDirectoryModal.vue b/src/components/modals/IncorrectGameDirectoryModal.vue
new file mode 100644
index 000000000..3f67b826b
--- /dev/null
+++ b/src/components/modals/IncorrectGameDirectoryModal.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import Game from '../../model/game/Game';
+
+const store = getStore<State>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const isOpen = computed(() => store.state.modals.isIncorrectGameDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectGameDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-game-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the {{ activeGame.displayName }} folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The selected executable must be any of the following:</p>
+            <ul class="list">
+                <li v-for="exe in activeGame.exeName"><strong>{{ exe }}</strong></li>
+            </ul>
+            <p class="margin-top">If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/IncorrectSteamDirectoryModal.vue b/src/components/modals/IncorrectSteamDirectoryModal.vue
new file mode 100644
index 000000000..b09ac29cd
--- /dev/null
+++ b/src/components/modals/IncorrectSteamDirectoryModal.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import ModalCard from '../../components/ModalCard.vue';
+import { computed } from 'vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isIncorrectSteamDirectoryModalOpen);
+
+function close() {
+    store.commit("closeIncorrectSteamDirectoryModal");
+}
+</script>
+
+<template>
+    <ModalCard id="incorrect-steam-directory-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Failed to set the Steam folder</h2>
+        </template>
+        <template v-slot:body>
+            <p>The Steam executable was not selected.</p>
+            <p>If this error has appeared but the executable is correct, please run as administrator.</p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/LaunchArgumentsModal.vue b/src/components/modals/LaunchArgumentsModal.vue
new file mode 100644
index 000000000..33d13b8c6
--- /dev/null
+++ b/src/components/modals/LaunchArgumentsModal.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+import ManagerSettings from '../../r2mm/manager/ManagerSettings';
+import GameInstructions from '../../r2mm/launching/instructions/GameInstructions';
+import GameRunnerProvider from '../../providers/generic/game/GameRunnerProvider';
+import GameInstructionParser from '../../r2mm/launching/instructions/GameInstructionParser';
+import R2Error from '../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isLaunchArgumentsModalOpen);
+
+const activeGame = computed(() => store.state.activeGame);
+const profile = computed(() => store.getters['profile/activeProfile']);
+
+const settings = ref<ManagerSettings | null>(null);
+const launchArguments = ref<string>('');
+const doorstopTarget = ref<string>('');
+const vanillaLaunchArgs = ref<string>('');
+
+async function load() {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    launchArguments.value = settings.value.getContext().gameSpecific.launchParameters;
+
+    GameInstructions.getInstructionsForGame(activeGame.value, profile.value).then(instructions => {
+        vanillaLaunchArgs.value = instructions.vanillaParameterList.map(value => `"${value}"`).join(' ');
+    });
+
+    GameRunnerProvider.instance.getGameArguments(activeGame.value, profile.value).then(target => {
+        if (target instanceof R2Error) {
+            doorstopTarget.value = '';
+        } else {
+            GameInstructionParser.parseList(target, activeGame.value, profile.value).then(instructions => {
+                if (instructions instanceof R2Error) {
+                    throw instructions;
+                }
+                doorstopTarget.value = instructions.map(value => `"${value}"`).join(' ');
+            });
+        }
+    });
+}
+
+watch(isOpen, (open) => {
+    if (open) {
+        load();
+    }
+});
+
+async function updateLaunchArguments() {
+    if (settings.value) {
+        await settings.value.setLaunchParameters(launchArguments.value);
+    }
+    close();
+}
+
+function close() {
+    store.commit('closeLaunchArgumentsModal');
+}
+</script>
+
+<template>
+    <ModalCard id="launch-arguments-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Set custom launch arguments</h2>
+        </template>
+        <template v-slot:body>
+            <p>Some arguments are provided by default:</p>
+            <br/>
+            <p>Modded:
+                <br/>
+                <code v-if="doorstopTarget.length > 0">{{ doorstopTarget }}</code>
+                <code v-else>These arguments will be available after installing a mod loader.</code>
+            </p>
+            <br/>
+            <p>Vanilla:
+                <br/>
+                <code>{{ vanillaLaunchArgs }}</code>
+            </p>
+            <br/>
+            <p>
+                <strong>Please note that these are called against the Steam executable. Be careful when
+                    entering custom launch arguments.</strong>
+            </p>
+            <br/>
+            <input
+                v-model="launchArguments"
+                id="launch-arguments-modal-input"
+                class="input"
+                placeholder="Enter arguments"
+                autocomplete="off"
+            />
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="updateLaunchArguments">
+                Update launch arguments
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/modals/SteamInstallationValidationModal.vue b/src/components/modals/SteamInstallationValidationModal.vue
new file mode 100644
index 000000000..5da627642
--- /dev/null
+++ b/src/components/modals/SteamInstallationValidationModal.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import ModalCard from '../../components/ModalCard.vue';
+import { getStore } from '../../providers/generic/store/StoreProvider';
+import { State } from '../../store';
+
+const store = getStore<State>();
+
+const isOpen = computed(() => store.state.modals.isSteamInstallationValidationModalOpen);
+const activeGame = computed(() => store.state.activeGame);
+
+function close() {
+    store.commit('closeSteamInstallationValidationModal');
+}
+</script>
+
+<template>
+    <ModalCard id="steam-installation-validation-modal" v-show="isOpen" :is-active="isOpen" @close-modal="close">
+        <template v-slot:header>
+            <h2 class="modal-title">Clearing the {{ activeGame.displayName }} installation directory</h2>
+        </template>
+        <template v-slot:body>
+            <div class="notification is-warning">
+                <p>
+                    You will not be able to launch the game until
+                    Steam has verified the integrity of the game files.
+                </p>
+            </div>
+            <p>
+                Steam will be started and will attempt to verify the
+                integrity of {{ activeGame.displayName }}.
+            </p>
+            <br/>
+            <p>
+                Please check the Steam window for validation progress.
+                If the window has not yet appeared, please be patient.
+            </p>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="close">
+                I understand
+            </button>
+        </template>
+    </ModalCard>
+</template>
diff --git a/src/components/settings-components/SettingsItem.vue b/src/components/settings-components/SettingsItem.vue
deleted file mode 100644
index 9b28b8f16..000000000
--- a/src/components/settings-components/SettingsItem.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import Timeout = NodeJS.Timeout;
-import { onMounted, ref, onUnmounted } from 'vue';
-
-type SettingsItemProps = {
-    action?: string;
-    description?: string;
-    value?: () => Promise<any>;
-    icon?: string;
-}
-
-const reactiveValue = ref<any | null>(null);
-const timeout = ref<Timeout | null>(null);
-
-const props = withDefaults(defineProps<SettingsItemProps>(), {
-    action: '',
-    description: '',
-    icon: '',
-    value: Promise.resolve
-});
-
-const emits = defineEmits<{
-    (e: 'click'): void;
-}>();
-
-onMounted(async () => {
-    if (timeout.value !== null) {
-        clearInterval(timeout.value);
-    }
-    props.value().then(value => reactiveValue.value = value);
-    timeout.value = setInterval(() => {
-        props.value().then(value => reactiveValue.value = value);
-    }, 1000);
-});
-
-onUnmounted(() => {
-    if (timeout.value !== null) {
-        clearInterval(timeout.value);
-        timeout.value = null;
-    }
-})
-
-function emitClick() {
-    emits('click');
-    setTimeout(() => {
-        props.value().then(value => reactiveValue.value = value);
-    }, 20);
-}
-
-</script>
-
-<template>
-    <a class="panel-block is-block settings-panel" @click="emitClick()">
-        <span class="icon is-pulled-right">
-            <i :class="['fas', icon]" aria-hidden="true"></i>
-        </span>
-        <div class="settings-panel__content">
-            <p class="title is-6 is-marginless">{{action}}</p>
-            <p class="subtitle is-italic is-bold is-6 is-marginless">{{description}}</p>
-            <p class="subtitle is-6 text-grey" v-if="reactiveValue !== null">{{reactiveValue}}</p>
-        </div>
-    </a>
-</template>
diff --git a/src/components/settings-components/SettingsSection.vue b/src/components/settings-components/SettingsSection.vue
new file mode 100644
index 000000000..147b509e2
--- /dev/null
+++ b/src/components/settings-components/SettingsSection.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { provide, toRef } from 'vue';
+
+const props = defineProps<{ name: string }>();
+
+provide('settingsCategory', toRef(props, 'name'));
+</script>
+
+<template>
+    <section>
+        <slot></slot>
+    </section>
+</template>
diff --git a/src/components/settings-components/SettingsView.vue b/src/components/settings-components/SettingsView.vue
index e804198fa..0c5ce4101 100644
--- a/src/components/settings-components/SettingsView.vue
+++ b/src/components/settings-components/SettingsView.vue
@@ -1,434 +1,129 @@
 <script lang="ts" setup>
-import SettingsItem from './SettingsItem.vue';
-import SettingsRow from '../../model/settings/SettingsRow';
-import ManagerSettings from '../../r2mm/manager/ManagerSettings';
-import GameDirectoryResolverProvider from '../../providers/ror2/game/GameDirectoryResolverProvider';
-import R2Error from '../../model/errors/R2Error';
-import PathResolver from '../../r2mm/manager/PathResolver';
-import LogOutputProvider from '../../providers/ror2/data/LogOutputProvider';
+import { computed, ref } from 'vue';
 import VersionNumber from '../../model/VersionNumber';
 import ManagerInformation from '../../_managerinf/ManagerInformation';
-import { Hero } from '../all';
-import ProfileModList from '../../r2mm/mods/ProfileModList';
-import { Platform } from '../../model/schema/ThunderstoreSchema';
-import moment from 'moment';
-import CdnProvider from '../../providers/generic/connection/CdnProvider';
-import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
-import VueRouter from 'vue-router';
-import {getLaunchType, LaunchType} from "../../model/real_enums/launch/LaunchType";
-import {LaunchTypeModalOpen} from "../../components/modals/launch-type/LaunchTypeRefs";
 import appWindow from '../../providers/node/app/app_window';
+import { Hero } from '../all';
+import SettingsSection from './SettingsSection.vue';
+import GameDirectory from './entries/GameDirectory.vue';
+import DataDirectory from './entries/DataDirectory.vue';
+import SteamDirectory from './entries/SteamDirectory.vue';
+import ExportProfile from './entries/ExportProfile.vue';
+import Theme from './entries/Theme.vue';
+import ExpandCards from './entries/ExpandCards.vue';
+import FunkyMode from './entries/FunkyMode.vue';
+import OnlineModList from './entries/OnlineModList.vue';
+import ModState from './entries/ModState.vue';
+import UpdateAllMods from './entries/UpdateAllMods.vue';
+import ModCache from './entries/ModCache.vue';
+import CopyLogToClipboard from './entries/CopyLogToClipboard.vue';
+import CopyTroubleshooting from './entries/CopyTroubleshooting.vue';
+import ImportLocalMod from './entries/ImportLocalMod.vue';
+import ToggleCdn from './entries/ToggleCdn.vue';
+import LaunchArguments from './entries/LaunchArguments.vue';
+import ShowDependencyStrings from './entries/ShowDependencyStrings.vue';
+import ResetGameInstallation from './entries/ResetGameInstallation.vue';
+import ChangeLaunchBehaviour from './entries/ChangeLaunchBehaviour.vue';
+
+const searchTerm = ref<string>('');
 
-const store = getStore<State>();
-let router!: VueRouter;
-
-onMounted(() => {
-    router = getCurrentInstance()!.proxy.$router;
-})
-
-const activeTab = ref<string>('All');
-const tabs = ref<string[]>(['All', 'Profile', 'Locations', 'Debugging', 'Modpacks', 'Other']);
-const logOutput = ref<LogOutputProvider>(LogOutputProvider.instance);
-const search = ref<string>('');
 const managerVersionNumber = ref<VersionNumber>(ManagerInformation.VERSION);
-const searchableSettings = ref<SettingsRow[]>([]);
-
-const activeGame = computed(() => store.state.activeGame);
-const settings = computed(() => store.getters['settings']);
-const localModList = computed(() => store.state.profile.modList);
 const appName = computed(() => ManagerInformation.APP_NAME);
 
-let settingsList = [
-    new SettingsRow(
-        'Locations',
-        'Browse data folder',
-        'Open the folder where mods are stored for all games and profiles.',
-        async () => PathResolver.ROOT,
-        'fa-door-open',
-        () => {
-            emitInvoke('BrowseDataFolder');
-        }
-    ),
-    new SettingsRow(
-        'Locations',
-        `Change ${activeGame.value.displayName} folder`,
-        `Change the location of the ${activeGame.value.displayName} folder that ${appName.value} uses.`,
-        async () => {
-            if (settings.value.getContext().gameSpecific.gameDirectory !== null) {
-                const directory = await GameDirectoryResolverProvider.instance.getDirectory(activeGame.value);
-                if (!(directory instanceof R2Error)) {
-                    return directory;
-                }
-            }
-            return 'Please set manually';
-        },
-        'fa-folder-open',
-        () => {
-            if (Platform.XBOX_GAME_PASS == activeGame.value.activePlatform.storePlatform) {
-                emitInvoke('ChangeGameDirectoryGamePass');
-            }
-            else {
-                emitInvoke('ChangeGameDirectory');
-            }
-        }
-    ),
-    new SettingsRow(
-        'Locations',
-        'Browse profile folder',
-        'Open the folder where mods are stored for the current profile.',
-        async () => {
-            return store.getters['profile/activeProfile'].getProfilePath();
-        },
-        'fa-door-open',
-        () => emitInvoke('BrowseProfileFolder')
-    ),
-    new SettingsRow(
-        'Locations',
-        'Change data folder',
-        'Change the folder where mods are stored for all games and profiles. The folder will not be deleted, and existing profiles will not carry across.',
-        async () => {
-            return PathResolver.ROOT;
-        },
-        'fa-folder-open',
-        () => emitInvoke('ChangeDataFolder')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Copy log file contents to clipboard',
-        'Copy the text inside the LogOutput.log file to the clipboard, with Discord formatting.',
-        async () => logOutput.value.exists ? 'Log file exists' : 'Log file does not exist',
-        'fa-clipboard',
-        () => {
-            if (logOutput.value.exists) {
-                emitInvoke('CopyLogToClipboard')
-            }
-        }
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Copy troubleshooting information to clipboard',
-        'Copy settings and other information to the clipboard, with Discord formatting.',
-        async () => 'Share this information when requesting support on Discord.',
-        'fa-clipboard',
-        () => emitInvoke('CopyTroubleshootingInfoToClipboard')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Toggle download cache',
-        'Downloading a mod will ignore mods stored in the cache. Mods will still be placed in the cache.',
-        async () => {
-            return store.state.download.ignoreCache
-                ? 'Current: cache is disabled'
-                : 'Current: cache is enabled (recommended)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('ToggleDownloadCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Set launch parameters',
-        'Provide custom arguments used to start the game.',
-        async () => 'These commands are used against the Steam executable on game startup',
-        'fa-wrench',
-        () => emitInvoke('SetLaunchParameters')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Clean mod cache',
-        'Free extra space caused by cached mods that are not currently in a profile.',
-        async () => 'Check all profiles for unused mods and clear cache',
-        'fa-trash',
-        () => emitInvoke('CleanCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Clean online mod list',
-        'Deletes local copy of mod list, forcing the next refresh to fetch a new one.',
-        async () => store.dispatch('tsMods/getActiveGameCacheStatus'),
-        'fa-trash',
-        () => store.dispatch('tsMods/resetActiveGameCache')
-    ),
-    new SettingsRow(
-        'Debugging',
-        'Toggle preferred Thunderstore CDN',
-        'Switch the CDN until app is restarted. This might bypass issues with downloading mods.',
-        async () => `Current: ${CdnProvider.current.label} (${CdnProvider.current.url})`,
-        'fa-exchange-alt',
-        CdnProvider.togglePreferredCdn
-    ),
-    new SettingsRow(
-        'Profile',
-        'Change profile',
-        'Change the mod profile.',
-        async () => {
-            return `Current profile: ${store.getters['profile/activeProfile'].getProfileName()}`
-        },
-        'fa-file-import',
-        () => emitInvoke('ChangeProfile')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Enable all mods',
-        'Enable all mods for the current profile',
-        async () => `${localModList.value.length - ProfileModList.getDisabledModCount(localModList.value)}/${localModList.value.length} enabled`,
-        'fa-file-import',
-        () => emitInvoke('EnableAll')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Disable all mods',
-        'Disable all mods for the current profile',
-        async () => `${ProfileModList.getDisabledModCount(localModList.value)}/${localModList.value.length} disabled`,
-        'fa-file-import',
-        () => emitInvoke('DisableAll')
-    ),
-    new SettingsRow(
-        'Profile',
-        'Import local mod',
-        'Install a mod offline from your files.',
-        async () => 'Not all mods can be installed locally',
-        'fa-file-import',
-        () => store.commit("openLocalFileImportModal")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Export profile as a file',
-        'Export your mod list and configs as a file.',
-        async () => 'The exported file can be shared with friends to get an identical profile quickly and easily',
-        'fa-file-export',
-        () => store.dispatch("profileExport/exportProfileAsFile")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Export profile as a code',
-        'Export your mod list and configs as a code.',
-        async () => 'The exported code can be shared with friends to get an identical profile quickly and easily',
-        'fa-file-export',
-        () => store.dispatch("profileExport/exportProfileAsCode")
-    ),
-    new SettingsRow(
-        'Profile',
-        'Update all mods',
-        'Quickly update every installed mod to their latest versions.',
-        async () => {
-            const outdatedMods = store.getters['profile/modsWithUpdates'];
-            if (outdatedMods.length === 1) {
-                return "1 mod has an update available";
-            }
-            return `${outdatedMods.length} mods have an update available`;
-        },
-        'fa-cloud-upload-alt',
-        () => emitInvoke('UpdateAllMods')
-    ),
-    new SettingsRow(
-        'Other',
-        'Toggle funky mode',
-        'Enable/disable funky mode.',
-        async () => {
-            return settings.value.getContext().global.funkyModeEnabled
-                ? 'Current: enabled'
-                : 'Current: disabled (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('ToggleFunkyMode')
-    ),
-    new SettingsRow(
-        'Other',
-        'Switch theme',
-        'Switch between light and dark themes.',
-        async () => {
-            return settings.value.getContext().global.darkTheme
-                ? 'Current: dark theme'
-                : 'Current: light theme (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('SwitchTheme')
-    ),
-    new SettingsRow(
-        'Other',
-        'Switch card display type',
-        'Switch between expanded or collapsed cards.',
-        async () => {
-            return settings.value.getContext().global.expandedCards
-                ? 'Current: expanded'
-                : 'Current: collapsed (default)';
-        },
-        'fa-exchange-alt',
-        () => emitInvoke('SwitchCard')
-    ),
-    new SettingsRow(
-        'Other',
-        'Refresh online mod list',
-        'Check for any new mod releases.',
-        async () => {
-                if (store.state.tsMods.isThunderstoreModListUpdateInProgress) {
-                    return store.state.tsMods.thunderstoreModListUpdateStatus || "Refreshing...";
-                }
-                if (store.state.tsMods.thunderstoreModListUpdateError) {
-                    return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
-                }
-                if (store.getters['download/activeDownloadCount'] > 0) {
-                    return "Refreshing the mod list is disabled while there are active downloads.";
-                }
-                if (store.state.tsMods.modsLastUpdated !== undefined) {
-                    return "Cache date: " + moment(store.state.tsMods.modsLastUpdated).format("MMMM Do YYYY, h:mm:ss a");
-                }
-                return "No API information available";
-            },
-        'fa-exchange-alt',
-        async () => await store.dispatch("tsMods/syncPackageList")
-    ),
-    new SettingsRow(
-      'Other',
-      'Change game',
-      'Change the current game',
-      async () => "",
-        'fa-gamepad',
-        async () => {
-            await ManagerSettings.resetDefaults();
-            await router.push({name: 'index'});
-        }
-    ),
-    new SettingsRow(
-        'Modpacks',
-        'Show dependency strings',
-        'View a list of installed mods with their version strings. Used inside the dependencies array inside the manifest.json file.',
-        async () => `Show dependency strings for ${localModList.value.length} mod(s)`,
-        'fa-file-alt',
-        () => emitInvoke('ShowDependencyStrings')
-    ),
-];
-
-watch(search, () => {
-    searchableSettings.value = settingsList
-        .filter(value =>
-            value.action.toLowerCase().indexOf(search.value.toLowerCase()) >= 0
-            || value.description.toLowerCase().indexOf(search.value.toLowerCase()) >= 0);
-});
-
-function getFilteredSettings() {
-    return searchableSettings.value.filter(value => value.group.toLowerCase() === activeTab.value.toLowerCase())
-        .sort((a, b) => a.action.localeCompare(b.action));
-}
-
-onMounted(async () => {
-    if ([Platform.STEAM, Platform.STEAM_DIRECT].includes(activeGame.value.activePlatform.storePlatform)) {
-        settingsList.push(
-            new SettingsRow(
-                'Locations',
-                'Change Steam folder',
-                `Change the location of the Steam folder that ${appName.value} uses.`,
-                async () => {
-                    if (settings.value.getContext().global.steamDirectory !== null) {
-                        const directory = await GameDirectoryResolverProvider.instance.getSteamDirectory();
-                        if (!(directory instanceof R2Error)) {
-                            return directory;
-                        }
-                    }
-                    return 'Please set manually';
-                },
-                'fa-folder-open',
-                () => emitInvoke('ChangeSteamDirectory')
-            ),
-            new SettingsRow(
-                'Debugging',
-                `Reset ${activeGame.value.displayName} installation`,
-                'Fix problems caused by corrupted files or files left over from manual modding attempts.',
-                async () => `This will delete all contents of the ${activeGame.value.steamFolderName} folder, and verify the files through Steam`,
-                'fa-wrench',
-                () => emitInvoke('ValidateSteamInstallation')
-            )
-        )
-    }
-
-    if (['linux', 'darwin'].includes(appWindow.getPlatform()) && activeGame.value.activePlatform.storePlatform === Platform.STEAM) {
-        settingsList.push(
-            new SettingsRow(
-                'Debugging',
-                'Change launch behaviour',
-                'Select specific launch behaviour such as forcing Steam to launch with Proton',
-                async () => {
-                    const launchType = await getLaunchType(activeGame.value);
-                    return `The current launch behaviour is set to: ${launchType}`;
-                },
-                'fa-gamepad',
-                () => {
-                    LaunchTypeModalOpen.value = true;
-                }
-            )
-        );
-    }
-    settingsList = settingsList.sort((a, b) => a.action.localeCompare(b.action));
-    searchableSettings.value = settingsList;
+const store = getStore<State>();
+const isSteamGame = computed<boolean>(() => store.state.activeGame.isInstalledViaSteam);
+const isSteamAndNotWindows = computed<boolean>(() => ['linux', 'darwin'].includes(appWindow.getPlatform()) && isSteamGame.value);
 
-    const gameDirectory = await GameDirectoryResolverProvider.instance.getDirectory(activeGame.value);
-    if (!(gameDirectory instanceof R2Error)) {
-        await settings.value.setGameDirectory(gameDirectory);
-    }
+const categories = ['All', 'Directories', 'Profile', 'Appearance', 'Debugging', 'Modpacks', 'Other'] as const;
+type Category = typeof categories[number];
 
-    const steamDirectory = await GameDirectoryResolverProvider.instance.getSteamDirectory();
-    if (!(steamDirectory instanceof R2Error)) {
-        await settings.value.setSteamDirectory(steamDirectory);
-    }
-});
+const activeCategory = ref<Category>('All');
 
-function changeTab(tab: string) {
-    activeTab.value = tab;
+function isVisible(section: Category): boolean {
+    return activeCategory.value === 'All' || activeCategory.value === section;
 }
-
-const emits = defineEmits<{
-    (e: 'setting-invoked', setting: string): void;
-}>();
-
-function emitInvoke(invoked: string) {
-    emits('setting-invoked', invoked);
-}
-
 </script>
 
 <template>
     <div id="settings-view">
-        <Hero title='Settings'
-              :subtitle='`Advanced options for ${appName}: ` + managerVersionNumber.toString()'
-              heroType='primary'/>
-        <div class="margin-right">
-            <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
-                <div class='border-at-bottom'>
-                    <div class='card is-shadowless is-square'>
-                        <div class='card-header-title'>
-                            <span class="non-selectable margin-right">Search:</span>
-                            <input v-model='search' class="input" type="text" placeholder="Search for a setting"/>
+        <Hero
+            title="Settings"
+            :subtitle="`Advanced options for ${appName}: ${managerVersionNumber.toString()}`"
+            heroType="primary"
+        />
+        <div class="settings-shell">
+            <aside class="menu settings-nav">
+                <p class="menu-label">Sections</p>
+                <ul class="menu-list">
+                    <li v-for="category in categories" :key="category">
+                        <a
+                            :class="{ 'is-active': activeCategory === category }"
+                            @click="activeCategory = category"
+                        >
+                            {{ category }}
+                        </a>
+                    </li>
+                </ul>
+            </aside>
+
+            <div class="settings-list">
+
+                <div class="sticky-top sticky-top--opaque sticky-top--no-shadow sticky-top--no-padding">
+                    <div class='border-at-bottom'>
+                        <div class='card is-shadowless is-square'>
+                            <div class='card-header-title'>
+                                <span class="non-selectable margin-right">Search:</span>
+                                <input v-model='searchTerm' class="input" type="text" placeholder="Search for a setting"/>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="tabs">
-                    <ul>
-                        <li v-for="(key, index) in tabs" :key="`tab-${key}`"
-                            :class="[{'is-active': activeTab === key}]"
-                            @click="changeTab(key)">
-                            <a>{{key}}</a>
-                        </li>
-                    </ul>
-                </div>
+
+                <SettingsSection v-if="isVisible('Directories')" name="Directories">
+                    <DataDirectory :search-term="searchTerm"/>
+                        <GameDirectory :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <SteamDirectory :search-term="searchTerm"/>
+                    </template>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Profile')" name="Profile">
+                    <ExportProfile :search-term="searchTerm"/>
+                    <ModState :search-term="searchTerm"/>
+                    <UpdateAllMods :search-term="searchTerm"/>
+                    <ImportLocalMod :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Appearance')" name="Appearance">
+                    <Theme :search-term="searchTerm"/>
+                    <ExpandCards :search-term="searchTerm"/>
+                    <FunkyMode :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Debugging')" name="Debugging">
+                    <LaunchArguments :search-term="searchTerm"/>
+                    <template v-if="isSteamGame">
+                        <ResetGameInstallation :search-term="searchTerm"/>
+                    </template>
+                    <template v-if="isSteamAndNotWindows">
+                        <ChangeLaunchBehaviour :search-term="searchTerm"/>
+                    </template>
+                    <CopyLogToClipboard :search-term="searchTerm"/>
+                    <CopyTroubleshooting :search-term="searchTerm"/>
+                    <ModCache :search-term="searchTerm"/>
+                    <ToggleCdn :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Modpacks')" name="Modpacks">
+                    <ShowDependencyStrings :search-term="searchTerm"/>
+                </SettingsSection>
+
+                <SettingsSection v-if="isVisible('Other')" name="Other">
+                    <OnlineModList :search-term="searchTerm"/>
+                </SettingsSection>
             </div>
-            <template v-if="activeTab === 'All'">
-                <SettingsItem v-for="(key, _) in searchableSettings" :key="`setting-${key.action}`"
-                              :action="key.action"
-                              :description="key.description"
-                              :value="key.value"
-                              :icon="key.icon"
-                              @click="key.clickAction()"/>
-            </template>
-            <template v-else>
-                <SettingsItem v-for="(key, _) in getFilteredSettings()" :key="`setting-${key.action}`"
-                              :action="key.action"
-                              :description="key.description"
-                              :value="key.value"
-                              :icon="key.icon"
-                              @click="key.clickAction()"/>
-            </template>
         </div>
     </div>
 </template>
@@ -439,6 +134,29 @@ function emitInvoke(invoked: string) {
     display: flex;
     flex-direction: column;
     flex: 1;
+    min-height: 0;
     overflow-y: auto;
 }
+
+.settings-shell {
+    display: flex;
+    align-items: flex-start;
+    flex: 1 0 auto;
+}
+
+.settings-nav {
+    flex: 0 0 200px;
+    padding: 1.25rem 1rem;
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    max-height: 100vh;
+    overflow-y: auto;
+}
+
+.settings-list {
+    flex: 1;
+    min-width: 0;
+    padding: 1rem 1.25rem 1rem;
+}
 </style>
diff --git a/src/components/settings-components/SettingsViewWrapper.vue b/src/components/settings-components/SettingsViewWrapper.vue
new file mode 100644
index 000000000..b3fc4770d
--- /dev/null
+++ b/src/components/settings-components/SettingsViewWrapper.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { inject, ref, type Ref } from 'vue';
+
+const category = inject<Ref<string>>('settingsCategory', ref(''));
+</script>
+
+<template>
+    <div class="settings-entry">
+        <p v-if="category" class="settings-entry__caption">{{ category }}</p>
+        <p class="settings-entry__title">
+            <slot name="title"></slot>
+        </p>
+        <p v-if="$slots.description" class="settings-entry__description">
+            <slot name="description"></slot>
+        </p>
+        <div class="settings-entry__control">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.settings-entry {
+    display: flex;
+    flex-direction: column;
+    padding: 1.1rem 0;
+    border-bottom: 1px solid var(--border, #e1e1e1);
+
+    &__caption {
+        font-size: 0.7rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--text-secondary, #6b6464);
+        margin-bottom: 0.2rem;
+    }
+
+    &__title {
+        font-size: 0.95rem;
+        font-weight: 600;
+        color: var(--text-strong, #363636);
+        margin-bottom: 0.35rem;
+        line-height: 1.35;
+    }
+
+    &__description {
+        font-size: 0.9rem;
+        color: var(--text-secondary, #6b6464);
+        line-height: 1.45;
+        margin-bottom: 0.6rem;
+        max-width: 46rem;
+    }
+
+    &__control {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+
+        :deep(.switch) {
+            position: relative;
+            max-width: 0;
+        }
+
+        :deep(.setting-column) {
+            display: flex;
+            flex-direction: column;
+            gap: 0.6rem;
+            flex: 1;
+        }
+
+        :deep(.setting-row) {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+
+        :deep(.setting-label) {
+            flex: 0 0 6.5rem;
+            font-size: 0.9rem;
+            color: var(--text-secondary, #6b6464);
+        }
+
+        :deep(.setting-input) {
+            flex: 1;
+            min-width: 14rem;
+            max-width: 35rem;
+        }
+
+        :deep(.setting-hint) {
+            font-size: 0.85rem;
+            color: var(--text-secondary, #6b6464);
+        }
+    }
+}
+</style>
diff --git a/src/components/settings-components/entries/ChangeLaunchBehaviour.vue b/src/components/settings-components/entries/ChangeLaunchBehaviour.vue
new file mode 100644
index 000000000..acba75d43
--- /dev/null
+++ b/src/components/settings-components/entries/ChangeLaunchBehaviour.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import { getLaunchType, LaunchType } from '../../../model/real_enums/launch/LaunchType';
+import { LaunchTypeModalOpen } from '../../modals/launch-type/LaunchTypeRefs';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const launchType = ref<LaunchType>(LaunchType.AUTO);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Change launch behaviour',
+    'Set launch mode',
+    'Proton',
+    'Native',
+    'Auto',
+    launchType.value,
+]);
+
+async function refreshLaunchType() {
+    launchType.value = await getLaunchType(activeGame.value);
+}
+
+onMounted(refreshLaunchType);
+watch(activeGame, refreshLaunchType);
+
+watch(LaunchTypeModalOpen, (open) => {
+    if (!open) {
+        refreshLaunchType();
+    }
+});
+
+function openLaunchTypeModal() {
+    LaunchTypeModalOpen.value = true;
+}
+</script>
+
+<template>
+    <SettingsViewWrapper >
+        <template #title>Change launch behaviour</template>
+        <template #description>
+            <p>Select a specific launch behaviour. You can tell the manager that a game is explicitly using either Native or Proton.</p>
+            <p>The current launch behaviour is set to: <strong>{{ launchType }}</strong>.</p>
+        </template>
+        <button class="button" @click="openLaunchTypeModal">Change launch behaviour</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/CleanOnlineModListCache.vue b/src/components/settings-components/entries/CleanOnlineModListCache.vue
new file mode 100644
index 000000000..70c049f23
--- /dev/null
+++ b/src/components/settings-components/entries/CleanOnlineModListCache.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCleaning = ref<boolean>(false);
+const cacheStatus = ref<string>('');
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Clean online mod list cache',
+    'Reset mod list cache',
+    'Clean',
+]);
+
+async function refreshStatus() {
+    try {
+        cacheStatus.value = await store.dispatch('tsMods/getActiveGameCacheStatus');
+    } catch (e) {
+        cacheStatus.value = '';
+    }
+}
+
+onMounted(refreshStatus);
+
+async function cleanOnlineModList() {
+    isCleaning.value = true;
+    try {
+        await store.dispatch('tsMods/resetActiveGameCache');
+        await refreshStatus();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Clean online mod list cache</template>
+        <template #description>
+            Deletes the local copy of the mod list and retrieves a new one.
+            <template v-if="cacheStatus">{{ cacheStatus }}</template>
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCleaning }"
+            :disabled="isCleaning"
+            @click="cleanOnlineModList"
+        >
+            Clean online mod list
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/CopyLogToClipboard.vue b/src/components/settings-components/entries/CopyLogToClipboard.vue
new file mode 100644
index 000000000..ca330b7fa
--- /dev/null
+++ b/src/components/settings-components/entries/CopyLogToClipboard.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import path from '../../../providers/node/path/path';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import { PackageLoader } from '../../../model/schema/ThunderstoreSchema';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed(() => store.state.activeGame);
+const profile = computed(() => store.getters['profile/activeProfile']);
+const isCopying = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Copy log file contents to clipboard',
+    'LogOutput',
+    'LogOutput.txt',
+    'Discord',
+]);
+
+async function copyLogToClipboard() {
+    isCopying.value = true;
+    try {
+        const fs = FsProvider.instance;
+        let logOutputPath = "";
+        switch (activeGame.value.packageLoader) {
+            case PackageLoader.BEPINEX:
+            case PackageLoader.BEPISLOADER:
+                logOutputPath = path.join(profile.value.getProfilePath(), "BepInEx", "LogOutput.log");
+                break;
+            case PackageLoader.MELONLOADER:
+                logOutputPath = path.join(profile.value.getProfilePath(), "MelonLoader", "Latest.log");
+                break;
+            case PackageLoader.RETURN_OF_MODDING:
+                logOutputPath = path.join(profile.value.getProfilePath(), "ReturnOfModding", "LogOutput.log");
+                break;
+            case PackageLoader.GDWEAVE:
+                logOutputPath = path.join(profile.value.getProfilePath(), "GDWeave", "GDWeave.log");
+                break;
+            case PackageLoader.UMM:
+                logOutputPath = path.join(profile.value.getProfilePath(), "UMM", "Core", "Log.txt");
+                break;
+            case PackageLoader.RIVET:
+                logOutputPath = path.join(profile.value.getProfilePath(), "Rivet", "RivetLoader.log");
+                break;
+        }
+        const text = (await fs.readFile(logOutputPath)).toString();
+        if (text.length >= 1992) {
+            InteractionProvider.instance.copyToClipboard(text);
+        } else {
+            InteractionProvider.instance.copyToClipboard("```\n" + text + "\n```");
+        }
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to copy the log to the clipboard'));
+    } finally {
+        isCopying.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Copy log to clipboard</template>
+        <template #description>
+            Copy the contents of the log file to your clipboard, formatted for Discord.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCopying }"
+            :disabled="isCopying"
+            @click="copyLogToClipboard"
+        >
+            Copy log to clipboard
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/CopyTroubleshooting.vue b/src/components/settings-components/entries/CopyTroubleshooting.vue
new file mode 100644
index 000000000..84c08492d
--- /dev/null
+++ b/src/components/settings-components/entries/CopyTroubleshooting.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isCopying = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Copy troubleshooting information to clipboard',
+    'Discord',
+    'support',
+]);
+
+async function copyTroubleshootingInfoToClipboard() {
+    isCopying.value = true;
+    try {
+        const content = await store.dispatch('profile/generateTroubleshootingString');
+        InteractionProvider.instance.copyToClipboard('```' + content + '```');
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to copy troubleshooting information'));
+    } finally {
+        isCopying.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Copy troubleshooting info to clipboard</template>
+        <template #description>
+            Copy settings and other information to your clipboard, formatted for Discord. Share this when requesting support.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isCopying }"
+            :disabled="isCopying"
+            @click="copyTroubleshootingInfoToClipboard"
+        >
+            Copy troubleshooting info to clipboard
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/DataDirectory.vue b/src/components/settings-components/entries/DataDirectory.vue
new file mode 100644
index 000000000..e83620da2
--- /dev/null
+++ b/src/components/settings-components/entries/DataDirectory.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import PathResolver from '../../../r2mm/manager/PathResolver';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import { DataFolderProvider } from '../../../providers/ror2/system/DataFolderProvider';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import Game from '../../../model/game/Game';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import R2Error from '../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const dataDirectory = ref<string>(PathResolver.ROOT || 'Not set');
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const profileDirectory = computed<string>(() =>
+    store.getters['profile/activeProfile']?.getProfilePath() || 'Not set'
+);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Data and profile directories',
+    dataDirectory.value,
+    profileDirectory.value,
+    'Change',
+    'Browse',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+});
+
+async function changeDataFolder() {
+    try {
+        const folder = await DataFolderProvider.instance.showSelectionDialog();
+
+        if (folder === null) {
+            return;
+        }
+
+        await DataFolderProvider.instance.throwForInvalidFolder(folder);
+        await DataFolderProvider.instance.writeOverrideFile(folder);
+        await settings.value!.setDataDirectory(folder);
+        InteractionProvider.instance.restartApp();
+    } catch(err) {
+        store.commit("error/handleError", R2Error.fromThrownValue(err));
+        return
+    }
+}
+
+function browseDataFolder() {
+    if (PathResolver.ROOT) {
+        LinkProvider.instance.openLink(PathResolver.ROOT);
+    }
+}
+
+function browseProfileFolder() {
+    const profilePath = store.getters['profile/activeProfile']?.getProfilePath();
+    if (profilePath) {
+        LinkProvider.instance.openLink(profilePath);
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Data and profile directories</template>
+        <template #description>
+            The folder where mods are stored for all games and profiles.
+            The folder will not be deleted, and existing profiles will not carry across.
+        </template>
+        <div class="setting-column">
+            <div class="setting-row">
+                <label class="setting-label">Data folder</label>
+                <input
+                    class="input setting-input"
+                    type="text"
+                    :value="dataDirectory"
+                    readonly
+                />
+                <button class="button" @click="changeDataFolder">Change</button>
+                <button class="button" @click="browseDataFolder">Browse</button>
+            </div>
+            <div class="setting-row">
+                <label class="setting-label">Profile folder</label>
+                <input
+                    class="input setting-input"
+                    type="text"
+                    :value="profileDirectory"
+                    readonly
+                />
+                <button class="button" @click="browseProfileFolder">Browse</button>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/DownloadCache.vue b/src/components/settings-components/entries/DownloadCache.vue
new file mode 100644
index 000000000..bec936163
--- /dev/null
+++ b/src/components/settings-components/entries/DownloadCache.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Toggle download cache',
+    'Download cache',
+    'Toggle',
+]);
+
+async function toggleCache() {
+    await store.dispatch('download/toggleIgnoreCache');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Download cache</template>
+        <template #description>
+            When enabled, downloads will be skipped if an existing copy is already cache.
+        </template>
+        <div class="field" @click.prevent.stop="toggleCache">
+            <input
+                id="toggle-download-cache"
+                type="checkbox"
+                :class="['switch', { 'is-info': cacheEnabled }]"
+                :checked="cacheEnabled"
+            />
+            <label for="toggle-download-cache">{{ cacheEnabled ? 'Enabled (recommended)' : 'Disabled' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style scoped lang="scss">
+.switch {
+    position: relative;
+}
+</style>
diff --git a/src/components/settings-components/entries/ExpandCards.vue b/src/components/settings-components/entries/ExpandCards.vue
new file mode 100644
index 000000000..fedb0da36
--- /dev/null
+++ b/src/components/settings-components/entries/ExpandCards.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const settings = ref<ManagerSettings | null>(null);
+const expandedCards = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Expand cards by default',
+    'Toggle',
+    'Collapsed',
+    'Expanded',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    expandedCards.value = settings.value.getContext().global.expandedCards;
+});
+
+async function setExpanded(expanded: boolean) {
+    expandedCards.value = expanded;
+    if (expanded) {
+        await settings.value?.expandCards();
+    } else {
+        await settings.value?.collapseCards();
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Expand cards by default</template>
+        <template #description>
+            Show mod cards fully expanded rather than collapsed when opening a mod list.
+        </template>
+        <div class="field" @click.prevent.stop="setExpanded(!expandedCards)">
+            <input
+                id="switch-expand-cards"
+                type="checkbox"
+                :class="['switch', { 'is-info': expandedCards }]"
+                :checked="expandedCards"
+            />
+            <label for="switch-expand-cards">{{ expandedCards ? 'Expanded' : 'Collapsed' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ExportProfile.vue b/src/components/settings-components/entries/ExportProfile.vue
new file mode 100644
index 000000000..ca3d661c3
--- /dev/null
+++ b/src/components/settings-components/entries/ExportProfile.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import R2Error from '../../../model/errors/R2Error';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeExport = ref<'file' | 'code' | null>(null);
+const isExporting = computed(() => activeExport.value !== null);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Export profile',
+    'As file',
+    'As code',
+]);
+
+async function exportProfile(as: 'file' | 'code', action: string) {
+    if (isExporting.value) {
+        return;
+    }
+    activeExport.value = as;
+    try {
+        await store.dispatch(action);
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e));
+    } finally {
+        activeExport.value = null;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Export profile</template>
+        <template #description>
+            Export your mod list and configs to share with friends and get an identical profile quickly and easily.
+        </template>
+        <div class="setting-row">
+            <button
+                class="button"
+                :class="{ 'is-loading': activeExport === 'file' }"
+                :disabled="isExporting"
+                @click="exportProfile('file', 'profileExport/exportProfileAsFile')"
+            >
+                As a file
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': activeExport === 'code' }"
+                :disabled="isExporting"
+                @click="exportProfile('code', 'profileExport/exportProfileAsCode')"
+            >
+                As a code
+            </button>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/FunkyMode.vue b/src/components/settings-components/entries/FunkyMode.vue
new file mode 100644
index 000000000..0a63008f6
--- /dev/null
+++ b/src/components/settings-components/entries/FunkyMode.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+const settings = ref<ManagerSettings | null>(null);
+const funkyModeEnabled = ref<boolean>(false);
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Enable funky mode',
+    'Toggle',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    funkyModeEnabled.value = settings.value.getContext().global.funkyModeEnabled;
+});
+
+async function setFunkyMode(enabled: boolean) {
+    funkyModeEnabled.value = enabled;
+    await settings.value?.setFunkyMode(enabled);
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Enable funky mode</template>
+        <template #description>
+        It's funky mode.
+        </template>
+        <div class="field" @click.prevent.stop="setFunkyMode(!funkyModeEnabled)">
+            <input
+                id="switch-funky-mode"
+                type="checkbox"
+                :class="['switch', { 'is-info': funkyModeEnabled }]"
+                :checked="funkyModeEnabled"
+            />
+            <label for="switch-funky-mode">{{ funkyModeEnabled ? 'Enabled' : 'Disabled' }}</label>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/GameDirectory.vue b/src/components/settings-components/entries/GameDirectory.vue
new file mode 100644
index 000000000..57bcf411f
--- /dev/null
+++ b/src/components/settings-components/entries/GameDirectory.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import { computed, onMounted, ref, watch } from 'vue';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { StorePlatform } from '../../../model/platform/StorePlatform';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import path from '../../../providers/node/path/path';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import AppWindow from '../../../providers/node/app/app_window';
+import os from '../../../providers/node/os/os';
+import R2Error from '../../../model/errors/R2Error';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import ManagerInformation from '../../../_managerinf/ManagerInformation';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const gameDirectory = ref<string>('Not set');
+
+function syncGameDirectory() {
+    gameDirectory.value = settings.value?.getContext().gameSpecific.gameDirectory || 'Not set';
+}
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    `${activeGame.value.displayName} folder`,
+    gameDirectory.value,
+    'Change',
+    'Browse',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncGameDirectory();
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncGameDirectory();
+});
+
+function changeGameInstallDirectory() {
+    if (StorePlatform[activeGame.value!.activePlatform.storePlatform] === StorePlatform['xbox-game-pass']) {
+        changeGameInstallDirectoryGamePass();
+    } else {
+        changeGameInstallDirectoryGeneral();
+    }
+}
+
+function changeGameInstallDirectoryGeneral() {
+    const ror2Directory: string = settings.value!.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
+    InteractionProvider.instance.selectFile({
+        title: `Locate ${activeGame.value.displayName} Executable`,
+        // Lazy reduce. Assume Linux name and Windows name are identical besides extension.
+        // Should fix if needed, although unlikely.
+        filters: (activeGame.value.exeName.map(value => {
+            const nameSplit = value.split(".");
+            return [{
+                name: nameSplit[0],
+                extensions: [nameSplit[1]]
+            }] as any
+        }).reduce((previousValue, currentValue) => {
+            previousValue[0].extensions = [...previousValue[0].extensions, ...currentValue[0].extensions];
+            return previousValue;
+        })),
+        defaultPath: ror2Directory,
+        buttonLabel: 'Select Executable'
+    }).then(async files => {
+        if (files.length === 1) {
+            try {
+                const containsGameExecutable = activeGame.value.exeName.find(exeName => path.basename(files[0]!).toLowerCase() === exeName.toLowerCase()) !== undefined
+                if (containsGameExecutable) {
+                    await settings.value!.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                    syncGameDirectory();
+                } else {
+                    store.commit('openIncorrectGameDirectoryModal');
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
+}
+
+function changeGameInstallDirectoryGamePass() {
+    const ror2Directory: string = settings.value!.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
+    InteractionProvider.instance.selectFile({
+        title: `Locate gamelaunchhelper Executable`,
+        filters: [{ name: "gamelaunchhelper", extensions: ["exe"] }],
+        defaultPath: ror2Directory,
+        buttonLabel: 'Select Executable'
+    }).then(async files => {
+        if (files.length === 1) {
+            try {
+                const containsGameExecutable = (path.basename(files[0]!).toLowerCase() === "gamelaunchhelper.exe");
+                if (containsGameExecutable) {
+                    await settings.value!.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                    syncGameDirectory();
+                } else {
+                    throw new Error("The selected executable is not gamelaunchhelper.exe");
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
+}
+
+function computeDefaultInstallDirectory(): string {
+    switch(AppWindow.getPlatform()){
+        case 'win32':
+            return path.resolve(
+                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
+                'Steam', 'steamapps', 'common', activeGame.value.steamFolderName
+            );
+        case 'linux':
+            return path.resolve(os.homedir(), '.local', 'share', 'Steam', 'steamapps', 'common', activeGame.value.steamFolderName);
+        case 'darwin':
+            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam',
+                'steamapps', 'common', activeGame.value.steamFolderName);
+        default:
+            return '';
+    }
+}
+
+function browseDirectory() {
+    if (settings.value?.getContext().gameSpecific.gameDirectory) {
+        LinkProvider.instance.openLink(settings.value?.getContext().gameSpecific.gameDirectory!)
+    }
+}
+
+function openHelpLink() {
+    LinkProvider.instance.openLink(ManagerInformation.WIKI_GAME_DIRECTORY_HELP_URL);
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>{{ activeGame.displayName }} folder</template>
+        <template #description>
+            The game directory is required to place the appropriate files correctly.
+            <span v-if="StorePlatform[activeGame.activePlatform.storePlatform] === StorePlatform.steam">
+                However <code class="code">{{ activeGame.displayName }}</code> will launch without mods if this is not set appropriately.
+            </span>
+        </template>
+        <div class="setting-column">
+            <div class="setting-row">
+                <input
+                    class="input setting-input"
+                    type="text"
+                    :value="gameDirectory"
+                    readonly
+                />
+                <button class="button" @click="changeGameInstallDirectory">Change</button>
+                <button class="button" @click="browseDirectory">Browse</button>
+            </div>
+            <a href="#" class="help-link" @click.prevent.stop="openHelpLink">I'm not sure what this should be</a>
+        </div>
+    </SettingsViewWrapper>
+</template>
+
+<style lang="scss" scoped>
+.help-link {
+    font-size: 0.9rem;
+    align-self: flex-start;
+}
+</style>
diff --git a/src/components/settings-components/entries/ImportLocalMod.vue b/src/components/settings-components/entries/ImportLocalMod.vue
new file mode 100644
index 000000000..b6dc70798
--- /dev/null
+++ b/src/components/settings-components/entries/ImportLocalMod.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Import local mod',
+    'Install offline',
+    'Import'
+]);
+
+function importLocalMod() {
+    store.commit('openLocalFileImportModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Import local mod</template>
+        <template #description>
+            Install a mod offline from your files. Not all mods can be installed locally.
+        </template>
+        <button class="button" @click="importLocalMod">Import local mod</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/LaunchArguments.vue b/src/components/settings-components/entries/LaunchArguments.vue
new file mode 100644
index 000000000..96fc49bc2
--- /dev/null
+++ b/src/components/settings-components/entries/LaunchArguments.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Set custom launch arguments',
+    'Launch parameters',
+]);
+
+function openLaunchArguments() {
+    store.commit('openLaunchArgumentsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Launch arguments</template>
+        <template #description>
+            Provide custom arguments that are added when starting the game.
+        </template>
+        <button class="button" @click="openLaunchArguments">Set launch arguments</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ModCache.vue b/src/components/settings-components/entries/ModCache.vue
new file mode 100644
index 000000000..3083cfce0
--- /dev/null
+++ b/src/components/settings-components/entries/ModCache.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import CacheUtil from '../../../r2mm/mods/CacheUtil';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const cacheEnabled = computed<boolean>(() => !store.state.download.ignoreCache);
+const isCleaning = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Mod cache',
+    'Download cache',
+    'Reuse cached downloads',
+    'Toggle',
+    'Clean mod cache',
+    'Free space',
+]);
+
+async function toggleCache() {
+    await store.dispatch('download/toggleIgnoreCache');
+}
+
+async function cleanCache() {
+    isCleaning.value = true;
+    try {
+        await CacheUtil.clean();
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the mod cache'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Mod cache</template>
+        <template #description>
+            Downloaded mods are kept in a cache so that they don't need to be downloaded again.
+        </template>
+        <div class="setting-column">
+            <div class="field" @click.prevent.stop="toggleCache">
+                <input
+                    id="toggle-download-cache"
+                    type="checkbox"
+                    :class="['switch', { 'is-info': cacheEnabled }]"
+                    :checked="cacheEnabled"
+                />
+                <label for="toggle-download-cache">
+                    {{ cacheEnabled ? 'Enabled' : 'Disabled' }}
+                </label>
+                <p class="setting-hint" @click.stop.prevent>{{ cacheEnabled ? 'Reusing cached downloads (recommended)' : 'Ignores the cache when downloading mods. Re-downloads each time.' }}</p>
+                <p class="setting-hint" v-if="!cacheEnabled" @click.stop.prevent>Mods will still be written to the cache and will continue to use disk space.</p>
+            </div>
+            <div class="setting-row">
+                <button
+                    class="button"
+                    :class="{ 'is-loading': isCleaning }"
+                    :disabled="isCleaning"
+                    @click="cleanCache"
+                >
+                    Clean cache
+                </button>
+                <span class="setting-hint">Removes cached mods that aren't in any profile to free up storage space.</span>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ModState.vue b/src/components/settings-components/entries/ModState.vue
new file mode 100644
index 000000000..16d0c3e92
--- /dev/null
+++ b/src/components/settings-components/entries/ModState.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import R2Error from '../../../model/errors/R2Error';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import { useRouter } from 'vue-router';
+import ManifestV2 from '../../../model/ManifestV2';
+
+const store = getStore<State>();
+const router = useRouter();
+const isEnablingState = ref<boolean>(false);
+const isDisablingState = ref<boolean>(false);
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const localModList = computed<ManifestV2[]>(() => store.state.profile.modList);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Change mod state',
+    'Toggle',
+    'Enable all mods',
+    'Disable all mods',
+]);
+
+const numberEnabled = computed<number>(() => localModList.value.filter(mod => mod.isEnabled()).length);
+const numberDisabled = computed<number>(() => localModList.value.length - numberEnabled.value);
+
+const statusText = computed<string>(() => {
+    if (numberEnabled.value === localModList.value.length) {
+        return 'All of your mods are currently enabled.';
+    }
+    if (numberDisabled.value === localModList.value.length) {
+        return 'All of your mods are currently disabled.';
+    }
+    return `You have ${numberDisabled.value} mod${numberDisabled.value > 1 ? 's' : ''} disabled.`;
+});
+
+async function enableAllMods() {
+    isEnablingState.value = true;
+    await store.dispatch(
+        "profile/enableModsOnActiveProfile",
+        {mods: localModList.value}
+    );
+    isEnablingState.value = false;
+    await router.push({name: "manager.installed"});
+}
+
+async function disableAllMods() {
+    isDisablingState.value = true;
+    await store.dispatch(
+        "profile/disableModsFromActiveProfile",
+        {mods: localModList.value}
+    );
+    isDisablingState.value = false;
+    await router.push({name: "manager.installed"});
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Change mod state</template>
+        <template #description>
+        <p>Enable / disable all of the mods on your profile</p>
+        <p>{{ statusText }}</p>
+        </template>
+        <div class="setting-row">
+            <button
+                class="button"
+                :class="{ 'is-loading': isEnablingState }"
+                :disabled="isEnablingState || isDisablingState"
+                @click="enableAllMods"
+            >
+                Enable all mods
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': isDisablingState }"
+                :disabled="isEnablingState || isDisablingState"
+                @click="disableAllMods"
+            >
+                Disable all mods
+            </button>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/OnlineModList.vue b/src/components/settings-components/entries/OnlineModList.vue
new file mode 100644
index 000000000..c144a2f63
--- /dev/null
+++ b/src/components/settings-components/entries/OnlineModList.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import moment from 'moment';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
+const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
+const isCleaning = ref<boolean>(false);
+
+const status = computed<string>(() => {
+    if (isRefreshing.value) {
+        return store.state.tsMods.thunderstoreModListUpdateStatus || 'Refreshing...';
+    }
+    if (store.state.tsMods.thunderstoreModListUpdateError) {
+        return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
+    }
+    if (hasActiveDownloads.value) {
+        return 'Refreshing the mod list is disabled while there are active downloads.';
+    }
+    if (store.state.tsMods.modsLastUpdated !== undefined) {
+        return 'Last updated on: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
+    }
+    return 'No API information available';
+});
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Refresh online mod list',
+    'Check for new mod releases',
+    'Clean online mod list cache',
+    'Reset mod list cache',
+]);
+
+async function refresh() {
+    if (isRefreshing.value || hasActiveDownloads.value) {
+        return;
+    }
+    await store.dispatch('tsMods/syncPackageList');
+}
+
+async function cleanCache() {
+    if (isRefreshing.value || isCleaning.value) {
+        return;
+    }
+    isCleaning.value = true;
+    try {
+        await store.dispatch('tsMods/resetActiveGameCache');
+    } catch (e) {
+        store.commit('error/handleError', R2Error.fromThrownValue(e, 'Failed to clean the online mod list'));
+    } finally {
+        isCleaning.value = false;
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Online mod list</template>
+        <template #description>
+        <p>
+            Check for new mod releases, or clear the local copy.
+        </p>
+        <p>{{ status }}</p>
+        </template>
+        <div class="setting-row">
+            <button
+                class="button"
+                :class="{ 'is-loading': isRefreshing && !isCleaning }"
+                :disabled="isRefreshing || hasActiveDownloads"
+                @click="refresh"
+            >
+                Refresh
+            </button>
+            <button
+                class="button"
+                :class="{ 'is-loading': isCleaning }"
+                :disabled="isRefreshing || isCleaning"
+                @click="cleanCache"
+            >
+                Delete copy
+            </button>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/RefreshOnlineModList.vue b/src/components/settings-components/entries/RefreshOnlineModList.vue
new file mode 100644
index 000000000..f6814da7c
--- /dev/null
+++ b/src/components/settings-components/entries/RefreshOnlineModList.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import moment from 'moment';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from 'src/components/composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Refresh online mod list',
+    'Check for new mod releases',
+]);
+
+const isRefreshing = computed<boolean>(() => store.state.tsMods.isThunderstoreModListUpdateInProgress);
+const hasActiveDownloads = computed<boolean>(() => store.getters['download/activeDownloadCount'] > 0);
+
+const status = computed<string>(() => {
+    if (isRefreshing.value) {
+        return store.state.tsMods.thunderstoreModListUpdateStatus || 'Refreshing...';
+    }
+    if (store.state.tsMods.thunderstoreModListUpdateError) {
+        return `Error refreshing the mod list: ${store.state.tsMods.thunderstoreModListUpdateError.message}`;
+    }
+    if (hasActiveDownloads.value) {
+        return 'Refreshing the mod list is disabled while there are active downloads.';
+    }
+    if (store.state.tsMods.modsLastUpdated !== undefined) {
+        return 'Cache date: ' + moment(store.state.tsMods.modsLastUpdated).format('MMMM Do YYYY, h:mm:ss a');
+    }
+    return 'No API information available';
+});
+
+async function refresh() {
+    if (isRefreshing.value || hasActiveDownloads.value) {
+        return;
+    }
+    await store.dispatch('tsMods/syncPackageList');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Refresh online mod list</template>
+        <template #description>
+            Check for any new mod releases. {{ status }}
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isRefreshing }"
+            :disabled="isRefreshing || hasActiveDownloads"
+            @click="refresh"
+        >
+            Refresh
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ResetGameInstallation.vue b/src/components/settings-components/entries/ResetGameInstallation.vue
new file mode 100644
index 000000000..41b2c9773
--- /dev/null
+++ b/src/components/settings-components/entries/ResetGameInstallation.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import { SteamInstallationValidator } from '../../../r2mm/manager/SteamInstallationValidator';
+import R2Error from '../../../model/errors/R2Error';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const activeGame = computed(() => store.state.activeGame);
+const isValidating = ref<boolean>(false);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    `Reset ${activeGame.value.displayName} installation`,
+    'Validate installation',
+    'Verify integrity',
+    'Corrupted files',
+]);
+
+async function validateSteamInstallation() {
+    isValidating.value = true;
+    const res = await SteamInstallationValidator.validateInstallation(activeGame.value);
+    isValidating.value = false;
+    if (res instanceof R2Error) {
+        store.commit('error/handleError', res);
+    } else {
+        store.commit('openSteamInstallationValidationModal');
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Reset {{ activeGame.displayName }} installation</template>
+        <template #description>
+            Fix problems caused by corrupted files or files left over from manual modding attempts.
+            This will delete all contents of the <code class="code">{{ activeGame.steamFolderName }}</code> folder and will
+            verify files through Steam.
+        </template>
+        <button
+            class="button"
+            :class="{ 'is-loading': isValidating }"
+            :disabled="isValidating"
+            @click="validateSteamInstallation"
+        >
+            Reset installation
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ShowDependencyStrings.vue b/src/components/settings-components/entries/ShowDependencyStrings.vue
new file mode 100644
index 000000000..6209c1a85
--- /dev/null
+++ b/src/components/settings-components/entries/ShowDependencyStrings.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const modCount = computed<number>(() => store.state.profile.modList.length);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Show dependency strings',
+    'Dependency',
+]);
+
+function showDependencyStrings() {
+    store.commit('openDependencyStringsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Show dependency strings</template>
+        <template #description>
+            View a list of installed mods with their version strings, as used inside the dependencies array of a
+            manifest.json file. Shows dependency strings for {{ modCount }} mod(s).
+        </template>
+        <button class="button" @click="showDependencyStrings">Show dependency strings</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/SteamDirectory.vue b/src/components/settings-components/entries/SteamDirectory.vue
new file mode 100644
index 000000000..8dcabfaa7
--- /dev/null
+++ b/src/components/settings-components/entries/SteamDirectory.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import Game from '../../../model/game/Game';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import InteractionProvider from '../../../providers/ror2/system/InteractionProvider';
+import path from '../../../providers/node/path/path';
+import FsProvider from '../../../providers/generic/file/FsProvider';
+import LinkProvider from '../../../providers/components/LinkProvider';
+import AppWindow from '../../../providers/node/app/app_window';
+import os from '../../../providers/node/os/os';
+import R2Error from '../../../model/errors/R2Error';
+import ManagerInformation from '../../../_managerinf/ManagerInformation';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const appName = ManagerInformation.APP_NAME;
+const activeGame = computed<Game>(() => store.state.activeGame);
+const settings = ref<ManagerSettings | null>(null);
+
+const steamDirectory = ref<string>('Not set');
+
+function syncSteamDirectory() {
+    steamDirectory.value = settings.value?.getContext().global.steamDirectory || 'Not set';
+}
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Change Steam folder',
+    'Change Steam directory',
+    steamDirectory.value,
+    'Browse'
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncSteamDirectory();
+});
+
+watch(activeGame, async () => {
+    settings.value = await ManagerSettings.getSingleton(activeGame.value);
+    syncSteamDirectory();
+});
+
+function computeDefaultSteamDirectory(): string {
+    switch (AppWindow.getPlatform()) {
+        case 'win32':
+            return path.resolve(
+                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
+                'Steam'
+            );
+        case 'linux':
+            return path.resolve(os.homedir(), '.local', 'share', 'Steam');
+        case 'darwin':
+            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam');
+        default:
+            return '';
+    }
+}
+
+async function checkIfSteamExecutableIsValid(file: string): Promise<boolean> {
+    switch (AppWindow.getPlatform()) {
+        case 'win32':
+            return path.basename(file).toLowerCase() === "steam.exe";
+        case 'linux':
+            return path.basename(file).toLowerCase() === "steam.sh";
+        case 'darwin':
+            return path.basename(file).toLowerCase() === 'steam.app';
+        default:
+            return true;
+    }
+}
+
+function changeSteamDirectory() {
+    const steamDir: string = settings.value!.getContext().global.steamDirectory || computeDefaultSteamDirectory();
+    InteractionProvider.instance.selectFile({
+        title: 'Locate Steam Executable',
+        defaultPath: steamDir,
+        filters: [{ name: "steam", extensions: ["exe", "sh", "app"] }],
+        buttonLabel: 'Select Executable'
+    }).then(async files => {
+        if (files.length === 1) {
+            try {
+                if (await checkIfSteamExecutableIsValid(files[0]!)) {
+                    await settings.value!.setSteamDirectory(path.dirname(await FsProvider.instance.realpath(files[0]!)));
+                    syncSteamDirectory();
+                } else {
+                    store.commit('openIncorrectSteamDirectoryModal');
+                }
+            } catch (e) {
+                const err = R2Error.fromThrownValue(e, 'Failed to change the Steam folder');
+                store.commit('error/handleError', err);
+            }
+        }
+    });
+}
+
+function browseDirectory() {
+    const dir = settings.value?.getContext().global.steamDirectory;
+    if (dir) {
+        LinkProvider.instance.openLink(dir);
+    }
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Steam folder</template>
+        <template #description>
+            Change the location of the Steam folder that {{ appName }} uses.
+        </template>
+        <div class="setting-column">
+            <div class="setting-row">
+                <input
+                    class="input setting-input"
+                    type="text"
+                    :value="steamDirectory"
+                    readonly
+                />
+                <button class="button" @click="changeSteamDirectory">Change</button>
+                <button class="button" @click="browseDirectory">Browse</button>
+            </div>
+        </div>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/Theme.vue b/src/components/settings-components/entries/Theme.vue
new file mode 100644
index 000000000..957034c7b
--- /dev/null
+++ b/src/components/settings-components/entries/Theme.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
+import ThemeManager from '../../../r2mm/manager/ThemeManager';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+const settings = ref<ManagerSettings | null>(null);
+const theme = ref<'light' | 'dark'>('dark');
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Theme',
+    'Light',
+    'Dark',
+    'Appearance',
+]);
+
+onMounted(async () => {
+    settings.value = await ManagerSettings.getSingleton(store.state.activeGame);
+    theme.value = settings.value.getContext().global.darkTheme ? 'dark' : 'light';
+});
+
+async function setTheme(value: 'light' | 'dark') {
+    theme.value = value;
+    const dark = value === 'dark';
+    if (settings.value && settings.value.getContext().global.darkTheme !== dark) {
+        await settings.value.toggleDarkTheme();
+    }
+    await ThemeManager.apply();
+    document.documentElement.classList.toggle('html--dark', dark);
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Theme</template>
+        <template #description>
+            Choose between a light or dark appearance for the manager.
+        </template>
+        <select
+            class="select"
+            :value="theme"
+            @change="setTheme(($event.target as HTMLSelectElement).value as 'light' | 'dark')"
+        >
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </select>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/ToggleCdn.vue b/src/components/settings-components/entries/ToggleCdn.vue
new file mode 100644
index 000000000..64fb7c027
--- /dev/null
+++ b/src/components/settings-components/entries/ToggleCdn.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+import CdnProvider from '../../../providers/generic/connection/CdnProvider';
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const currentCdn = ref(CdnProvider.current);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, () => [
+    'Toggle preferred Thunderstore CDN',
+    'CDN',
+    currentCdn.value.label,
+    currentCdn.value.url,
+]);
+
+function toggleCdn() {
+    CdnProvider.togglePreferredCdn();
+    currentCdn.value = CdnProvider.current;
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Toggle preferred Thunderstore CDN</template>
+        <template #description>
+            Switch the CDN until the app is restarted. This might bypass issues with downloading mods.
+            Current: {{ currentCdn.label }}<template v-if="currentCdn.url"> ({{ currentCdn.url }})</template>.
+        </template>
+        <button class="button" @click="toggleCdn">Toggle preferred CDN</button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/components/settings-components/entries/UpdateAllMods.vue b/src/components/settings-components/entries/UpdateAllMods.vue
new file mode 100644
index 000000000..481bd2174
--- /dev/null
+++ b/src/components/settings-components/entries/UpdateAllMods.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getStore } from '../../../providers/generic/store/StoreProvider';
+import { State } from '../../../store';
+import SettingsViewWrapper from '../SettingsViewWrapper.vue';
+import { useSettingSearch } from '../../composables/SettingSearchComposable';
+
+const store = getStore<State>();
+
+const props = defineProps<{
+    searchTerm?: string;
+}>();
+
+const outdatedCount = computed<number>(() => store.getters['profile/modsWithUpdates'].length);
+
+const statusText = computed<string>(() =>
+    outdatedCount.value === 1
+        ? '1 mod has an update available.'
+        : `${outdatedCount.value} mods have an update available.`
+);
+
+const { isVisible } = useSettingSearch(() => props.searchTerm, [
+    'Update all mods',
+    'Update'
+]);
+
+function updateAllMods() {
+    store.commit('openUpdateAllModsModal');
+}
+</script>
+
+<template>
+    <SettingsViewWrapper v-show="isVisible">
+        <template #title>Update all mods</template>
+        <template #description>
+            Quickly update every installed mod to their latest versions. {{ statusText }}
+        </template>
+        <button
+            class="button"
+            :disabled="outdatedCount === 0"
+            @click="updateAllMods"
+        >
+            Update all mods
+        </button>
+    </SettingsViewWrapper>
+</template>
diff --git a/src/pages/Manager.vue b/src/pages/Manager.vue
index 6fa87189f..78a8fbc09 100644
--- a/src/pages/Manager.vue
+++ b/src/pages/Manager.vue
@@ -1,118 +1,12 @@
 <template>
     <ManagerActivityBar />
 	<div class="manager-main-view">
-		<div id='steamIncorrectDir' :class="['modal', {'is-active':(showSteamIncorrectDirectoryModal !== false)}]">
-			<div class="modal-background" @click="showSteamIncorrectDirectoryModal = false"></div>
-			<div class='modal-content'>
-				<div class='notification is-danger'>
-					<h3 class='title'>Failed to set the Steam folder</h3>
-					<p>The steam executable was not selected.</p>
-					<p>If this error has appeared but the executable is correct, please run as administrator.</p>
-				</div>
-			</div>
-			<button class="modal-close is-large" aria-label="close"
-			        @click="showSteamIncorrectDirectoryModal = false"></button>
-		</div>
-		<div id='ror2IncorrectDir' :class="['modal', {'is-active':(showRor2IncorrectDirectoryModal !== false)}]">
-			<div class="modal-background" @click="showRor2IncorrectDirectoryModal = false"></div>
-			<div class='modal-content'>
-				<div class='notification is-danger'>
-					<h3 class='title'>Failed to set the {{ activeGame.displayName }} folder</h3>
-					<p>The executable must be either of the following: "{{ activeGame.exeName.join('", "') }}".</p>
-					<p>If this error has appeared but the executable is correct, please run as administrator.</p>
-				</div>
-			</div>
-			<button class="modal-close is-large" aria-label="close"
-			        @click="showRor2IncorrectDirectoryModal = false"></button>
-		</div>
-		<ModalCard id="steam-installation-validation-modal" :is-active="isValidatingSteamInstallation" @close-modal="closeSteamInstallationValidationModal" :can-close="true">
-			<template v-slot:header>
-				<h2 class='modal-title'>Clearing the {{activeGame.displayName}} installation directory</h2>
-			</template>
-			<template v-slot:body>
-				<div class='notification is-warning'>
-					<p>
-						You will not not be able to launch the game until
-						Steam has verified the integrity of the game files.
-					</p>
-				</div>
-				<p>
-					Steam will be started and will attempt to verify the
-					integrity of {{ activeGame.displayName }}.
-				</p>
-				<br/>
-				<p>
-					Please check the Steam window for validation progress.
-					If the window has not yet appeared, please be patient.
-				</p>
-			</template>
-			<template v-slot:footer>
-				<button class="button is-info" @click="closeSteamInstallationValidationModal()">
-					I understand
-				</button>
-			</template>
-		</ModalCard>
-        <ModalCard id="dependency-strings-modal" :is-active="showDependencyStrings" @close-modal="showDependencyStrings = false;" :can-close="true">
-            <template v-slot:header>
-                <h2 class='modal-title'>Dependency string list</h2>
-            </template>
-            <template v-slot:body>
-                <ul>
-                    <li v-for="(key, index) in localModList" :key="`dep-str-${index}`">
-                        {{key.getName()}}-{{key.getVersionNumber().toString()}}
-                    </li>
-                </ul>
-            </template>
-            <template v-slot:footer>
-                <button class="button is-info"
-                        @click="showDependencyStrings = false;">
-                    Close
-                </button>
-            </template>
-        </ModalCard>
-		<ModalCard id="launch-parameters-modal" :is-active="showLaunchParameterModal" @close-modal="() => {showLaunchParameterModal = false;}" :can-close="true">
-			<template v-slot:header>
-				<h2 class='modal-title'>Set custom launch parameters</h2>
-			</template>
-			<template v-slot:body>
-				<p>Some arguments are provided by default:</p>
-				<br/>
-				<p>Modded:
-					<br/>
-					<code v-if="doorstopTarget.length > 0">
-						{{ doorstopTarget }}
-					</code>
-                    <code v-else>These parameters will be available after installing a mod loader.</code>
-				</p>
-				<br/>
-				<p>Vanilla:
-					<br>
-					<code>
-						{{ vanillaLaunchArgs }}
-					</code>
-				</p>
-				<br/>
-				<p>
-					<strong>Please note that these are called against the Steam executable. Be careful when
-						entering custom launch parameters.</strong>
-				</p>
-				<br/>
-				<input
-					v-model='launchParametersModel'
-					id='launch-parameters-modal-input'
-					class='input'
-					placeholder='Enter parameters'
-					autocomplete='off'
-				/>
-			</template>
-			<template v-slot:footer>
-				<button class='button is-info' @click='updateLaunchParameters()'>
-					Update launch parameters
-				</button>
-			</template>
-		</ModalCard>
-
         <CategoryFilterModal />
+        <IncorrectGameDirectoryModal />
+        <IncorrectSteamDirectoryModal />
+        <LaunchArgumentsModal />
+        <DependencyStringsModal />
+        <SteamInstallationValidationModal />
         <SortModal />
         <LocalFileImportModal :visible="importingLocalMod" @close-modal="importingLocalMod = false" />
         <ProfileCodeExportModal />
@@ -122,29 +16,20 @@
         <LaunchTypeModal v-if="canRenderLaunchTypeModal()" />
 
         <div class="router-view">
-            <router-view name="subview" v-on:setting-invoked="handleSettingsCallbacks($event)" />
+            <router-view name="subview" />
         </div>
     </div>
 </template>
 
 <script lang='ts' setup>
-import { computed, onMounted, ref } from 'vue';
-import PathResolver from '../r2mm/manager/PathResolver';
-import { SteamInstallationValidator } from '../r2mm/manager/SteamInstallationValidator';
-import R2Error from '../model/errors/R2Error';
-import ThemeManager from '../r2mm/manager/ThemeManager';
-import { DataFolderProvider } from '../providers/ror2/system/DataFolderProvider';
-import InteractionProvider from '../providers/ror2/system/InteractionProvider';
-import os from '../providers/node/os/os';
-import FsProvider from '../providers/generic/file/FsProvider';
-import CacheUtil from '../r2mm/mods/CacheUtil';
-import LinkProvider from '../providers/components/LinkProvider';
-import GameRunnerProvider from '../providers/generic/game/GameRunnerProvider';
+import { ref } from 'vue';
 import LocalFileImportModal from '../components/importing/LocalFileImportModal.vue';
-import { PackageLoader } from '../model/schema/ThunderstoreSchema';
-import GameInstructions from '../r2mm/launching/instructions/GameInstructions';
 import CategoryFilterModal from '../components/modals/CategoryFilterModal.vue';
-import ModalCard from '../components/ModalCard.vue';
+import IncorrectGameDirectoryModal from '../components/modals/IncorrectGameDirectoryModal.vue';
+import IncorrectSteamDirectoryModal from '../components/modals/IncorrectSteamDirectoryModal.vue';
+import DependencyStringsModal from '../components/modals/DependencyStringsModal.vue';
+import SteamInstallationValidationModal from '../components/modals/SteamInstallationValidationModal.vue';
+import LaunchArgumentsModal from '../components/modals/LaunchArgumentsModal.vue';
 import ProfileCodeExportModal from '../components/modals/ProfileCodeExportModal.vue';
 import SortModal from '../components/modals/SortModal.vue';
 import DownloadModVersionSelectModal from '../components/views/DownloadModVersionSelectModal.vue';
@@ -152,369 +37,20 @@ import DownloadProgressModal from '../components/views/DownloadProgressModal.vue
 import UpdateAllInstalledModsModal from '../components/views/UpdateAllInstalledModsModal.vue';
 import { getStore } from '../providers/generic/store/StoreProvider';
 import { State } from '../store';
-import { useRouter } from 'vue-router';
-import path from '../providers/node/path/path';
 import LaunchTypeModal from "../components/modals/launch-type/LaunchTypeModal.vue";
 import appWindow from '../providers/node/app/app_window';
-import GameInstructionParser from "../r2mm/launching/instructions/GameInstructionParser";
 import ManagerActivityBar from '../components/navigation/ManagerActivityBar.vue';
 
 const store = getStore<State>();
-const router = useRouter();
 
-const isValidatingSteamInstallation = ref<boolean>(false);
-const showSteamIncorrectDirectoryModal = ref<boolean>(false);
-const showRor2IncorrectDirectoryModal = ref<boolean>(false);
-const launchParametersModel = ref<string>('');
-const showLaunchParameterModal = ref<boolean>(false);
-const showDependencyStrings = ref<boolean>(false);
 const importingLocalMod = ref<boolean>(false);
-const doorstopTarget = ref<string>("");
-const vanillaLaunchArgs = ref<string>("");
-
-const activeGame = computed(() => store.state.activeGame);
-const settings = computed(() => store.getters['settings']);
-const profile = computed(() => store.getters['profile/activeProfile']);
-const localModList = computed(() => store.state.profile.modList);
 
 function canRenderLaunchTypeModal() {
     return ['linux', 'darwin'].includes(appWindow.getPlatform());
 }
 
-function closeSteamInstallationValidationModal() {
-    isValidatingSteamInstallation.value = false;
-}
-
-async function validateSteamInstallation() {
-    const res = await SteamInstallationValidator.validateInstallation(activeGame.value);
-    if (res instanceof R2Error) {
-        store.commit('error/handleError', res);
-    } else {
-        isValidatingSteamInstallation.value = true;
-    }
-}
-
-function computeDefaultInstallDirectory(): string {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.resolve(
-                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
-                'Steam', 'steamapps', 'common', activeGame.value.steamFolderName
-            );
-        case 'linux':
-            return path.resolve(os.homedir(), '.local', 'share', 'Steam', 'steamapps', 'common', activeGame.value.steamFolderName);
-        case 'darwin':
-            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam',
-                'steamapps', 'common', activeGame.value.steamFolderName);
-        default:
-            return '';
-    }
-}
-
-function changeGameInstallDirectory() {
-    const ror2Directory: string = settings.value.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
-    InteractionProvider.instance.selectFile({
-        title: `Locate ${activeGame.value.displayName} Executable`,
-        // Lazy reduce. Assume Linux name and Windows name are identical besides extension.
-        // Should fix if needed, although unlikely.
-        filters: (activeGame.value.exeName.map(value => {
-            const nameSplit = value.split(".");
-            return [{
-                name: nameSplit[0],
-                extensions: [nameSplit[1]]
-            }]
-        }).reduce((previousValue, currentValue) => {
-            previousValue[0].extensions = [...previousValue[0].extensions, ...currentValue[0].extensions];
-            return previousValue;
-        })),
-        defaultPath: ror2Directory,
-        buttonLabel: 'Select Executable'
-    }).then(async files => {
-        if (files.length === 1) {
-            try {
-                const containsGameExecutable = activeGame.value.exeName.find(exeName => path.basename(files[0]).toLowerCase() === exeName.toLowerCase()) !== undefined
-                if (containsGameExecutable) {
-                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
-                } else {
-                    showRor2IncorrectDirectoryModal.value = true;
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
-function changeGameInstallDirectoryGamePass() {
-    const ror2Directory: string = settings.value.getContext().gameSpecific.gameDirectory || computeDefaultInstallDirectory();
-    InteractionProvider.instance.selectFile({
-        title: `Locate gamelaunchhelper Executable`,
-        filters: [{ name: "gamelaunchhelper", extensions: ["exe"] }],
-        defaultPath: ror2Directory,
-        buttonLabel: 'Select Executable'
-    }).then(async files => {
-        if (files.length === 1) {
-            try {
-                const containsGameExecutable = (path.basename(files[0]).toLowerCase() === "gamelaunchhelper.exe");
-                if (containsGameExecutable) {
-                    await settings.value.setGameDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
-                } else {
-                    throw new Error("The selected executable is not gamelaunchhelper.exe");
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the game folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
-function computeDefaultSteamDirectory(): string {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.resolve(
-                process.env['ProgramFiles(x86)'] || process.env.PROGRAMFILES || 'C:\\Program Files (x86)',
-                'Steam'
-            );
-        case 'linux':
-            return path.resolve(os.homedir(), '.local', 'share', 'Steam');
-        case 'darwin':
-            return path.resolve(os.homedir(), 'Library', 'Application Support', 'Steam');
-        default:
-            return '';
-    }
-}
-
-async function checkIfSteamExecutableIsValid(file: string): Promise<boolean> {
-    switch(appWindow.getPlatform()){
-        case 'win32':
-            return path.basename(file).toLowerCase() === "steam.exe"
-        case 'linux':
-            return path.basename(file).toLowerCase() === "steam.sh"
-        case 'darwin':
-            return path.basename(file).toLowerCase() === 'steam.app'
-        default:
-            return true;
-    }
-}
-
-function changeSteamDirectory() {
-    const steamDir: string = settings.value.getContext().global.steamDirectory || computeDefaultSteamDirectory();
-    InteractionProvider.instance.selectFile({
-        title: 'Locate Steam Executable',
-        defaultPath: steamDir,
-        filters: [{name: "steam", extensions: ["exe", "sh", "app"]}],
-        buttonLabel: 'Select Executable'
-    }).then(async files => {
-        if (files.length === 1) {
-            try {
-                if (await checkIfSteamExecutableIsValid(files[0])) {
-                    await settings.value.setSteamDirectory(path.dirname(await FsProvider.instance.realpath(files[0])));
-                } else {
-                    showSteamIncorrectDirectoryModal.value = true;
-                }
-            } catch (e) {
-                const err = R2Error.fromThrownValue(e, 'Failed to change the Steam folder');
-                store.commit('error/handleError', err);
-            }
-        }
-    });
-}
-
-function setFunkyMode(value: boolean) {
-    settings.value.setFunkyMode(value);
-}
-
-function browseDataFolder() {
-    LinkProvider.instance.openLink('file://' + PathResolver.ROOT);
-}
-
-function browseProfileFolder() {
-    LinkProvider.instance.openLink('file://' + profile.value.getProfilePath());
-}
-
-function toggleCardExpanded(expanded: boolean) {
-    if (expanded) {
-        settings.value.expandCards();
-    } else {
-        settings.value.collapseCards();
-    }
-    router.push({name: "manager.installed"});
-}
-
-async function toggleDarkTheme() {
-    await settings.value.toggleDarkTheme();
-    ThemeManager.apply();
-}
-
-function showLaunchParameters() {
-    GameInstructions.getInstructionsForGame(activeGame.value, profile.value).then(instructions => {
-        vanillaLaunchArgs.value = instructions.vanillaParameterList.map(value => `"${value}"`).join(' ');
-    });
-
-    GameRunnerProvider.instance.getGameArguments(activeGame.value, profile.value).then(target => {
-        if (target instanceof R2Error) {
-            doorstopTarget.value = "";
-        } else {
-            GameInstructionParser.parseList(target, activeGame.value, profile.value)
-                .then(instructions => {
-                    if (instructions instanceof R2Error) {
-                        throw instructions;
-                    }
-                    doorstopTarget.value = instructions.map(value => `"${value}"`).join(' ');
-                })
-        }
-    });
-
-    launchParametersModel.value = settings.value.getContext().gameSpecific.launchParameters;
-    showLaunchParameterModal.value = true;
-}
-
-function updateLaunchParameters() {
-    settings.value.setLaunchParameters(launchParametersModel.value);
-    showLaunchParameterModal.value = false;
-}
-
-async function copyLogToClipboard() {
-    const fs = FsProvider.instance;
-    let logOutputPath = "";
-    switch (activeGame.value.packageLoader) {
-        case PackageLoader.BEPINEX:
-        case PackageLoader.BEPISLOADER:
-            logOutputPath = path.join(profile.value.getProfilePath(), "BepInEx", "LogOutput.log");
-            break;
-        case PackageLoader.MELONLOADER:
-            logOutputPath = path.join(profile.value.getProfilePath(), "MelonLoader", "Latest.log");
-            break;
-        case PackageLoader.RETURN_OF_MODDING:
-            logOutputPath = path.join(profile.value.getProfilePath(), "ReturnOfModding", "LogOutput.log");
-            break;
-        case PackageLoader.GDWEAVE:
-            logOutputPath = path.join(profile.value.getProfilePath(), "GDWeave", "GDWeave.log");
-            break;
-        case PackageLoader.UMM:
-            logOutputPath = path.join(profile.value.getProfilePath(), "UMM", "Core", "Log.txt");
-            break;
-        case PackageLoader.RIVET:
-            logOutputPath = path.join(profile.value.getProfilePath(), "Rivet", "RivetLoader.log");
-            break;
-    }
-    const text = (await fs.readFile(logOutputPath)).toString();
-    if (text.length >= 1992) {
-        InteractionProvider.instance.copyToClipboard(text);
-    } else {
-        InteractionProvider.instance.copyToClipboard("```\n" + text + "\n```");
-    }
-}
-
-async function copyTroubleshootingInfoToClipboard() {
-    const content = await store.dispatch('profile/generateTroubleshootingString');
-    InteractionProvider.instance.copyToClipboard('```' + content + '```');
-}
-
-async function changeDataFolder() {
-    try {
-        const folder = await DataFolderProvider.instance.showSelectionDialog();
-
-        if (folder === null) {
-            return;
-        }
-
-        await DataFolderProvider.instance.throwForInvalidFolder(folder);
-        await DataFolderProvider.instance.writeOverrideFile(folder);
-        await settings.value.setDataDirectory(folder);
-        InteractionProvider.instance.restartApp();
-    } catch(err) {
-        store.commit("error/handleError", R2Error.fromThrownValue(err));
-        return
-    }
-}
-
-async function handleSettingsCallbacks(invokedSetting: any) {
-    switch(invokedSetting) {
-        case "BrowseDataFolder":
-            browseDataFolder();
-            break;
-        case "BrowseProfileFolder":
-            browseProfileFolder();
-            break;
-        case "ChangeGameDirectory":
-            changeGameInstallDirectory();
-            break;
-        case "ChangeGameDirectoryGamePass":
-            changeGameInstallDirectoryGamePass();
-            break;
-        case "ChangeSteamDirectory":
-            changeSteamDirectory();
-            break;
-        case "CopyLogToClipboard":
-            copyLogToClipboard();
-            break;
-        case "CopyTroubleshootingInfoToClipboard":
-            copyTroubleshootingInfoToClipboard();
-            break;
-        case "ToggleDownloadCache":
-            await store.dispatch('download/toggleIgnoreCache');
-            break;
-        case "ValidateSteamInstallation":
-            validateSteamInstallation();
-            break;
-        case "SetLaunchParameters":
-            showLaunchParameters();
-            break;
-        case "ChangeProfile":
-            router.push({name: "profiles"});
-            break;
-        case "ImportLocalMod":
-            importingLocalMod.value = true;
-            break;
-        case "ToggleFunkyMode":
-            setFunkyMode(!settings.value.getContext().global.funkyModeEnabled);
-            break;
-        case "SwitchTheme":
-            toggleDarkTheme();
-            document.documentElement.classList.toggle('html--dark', settings.value.getContext().global.darkTheme);
-            break;
-        case "SwitchCard":
-            toggleCardExpanded(!settings.value.getContext().global.expandedCards);
-            break;
-        case "EnableAll":
-            await store.dispatch(
-                "profile/enableModsOnActiveProfile",
-                {mods: localModList.value}
-            );
-            await router.push({name: "manager.installed"});
-            break;
-        case "DisableAll":
-            await store.dispatch(
-                "profile/disableModsFromActiveProfile",
-                {mods: localModList.value}
-            );
-            await router.push({name: "manager.installed"});
-            break;
-        case "UpdateAllMods":
-            store.commit("openUpdateAllModsModal");
-            break;
-        case "ShowDependencyStrings":
-            showDependencyStrings.value = true;
-            break;
-        case "ChangeDataFolder":
-            await changeDataFolder();
-            break;
-        case "CleanCache":
-            CacheUtil.clean();
-            break;
-    }
-}
-
 store.dispatch('profile/loadOrderingSettings');
 store.commit('modFilters/reset');
-
-onMounted(async () => {
-    launchParametersModel.value = settings.value.getContext().gameSpecific.launchParameters;
-})
-
 </script>
 
 <style lang="scss">
diff --git a/src/store/modules/ModalsModule.ts b/src/store/modules/ModalsModule.ts
index 5b7e6b5aa..a1b22528d 100644
--- a/src/store/modules/ModalsModule.ts
+++ b/src/store/modules/ModalsModule.ts
@@ -21,6 +21,11 @@ interface State {
     uninstallModModalMod: ManifestV2 | null;
     isProfileCodeExportModalOpen: boolean;
     isLocalFileImportModalOpen: boolean;
+    isIncorrectGameDirectoryModalOpen: boolean;
+    isIncorrectSteamDirectoryModalOpen: boolean;
+    isDependencyStringsModalOpen: boolean;
+    isSteamInstallationValidationModalOpen: boolean;
+    isLaunchArgumentsModalOpen: boolean;
 }
 
 export default {
@@ -44,6 +49,11 @@ export default {
         uninstallModModalMod: null,
         isProfileCodeExportModalOpen: false,
         isLocalFileImportModalOpen: false,
+        isIncorrectGameDirectoryModalOpen: false,
+        isIncorrectSteamDirectoryModalOpen: false,
+        isDependencyStringsModalOpen: false,
+        isSteamInstallationValidationModalOpen: false,
+        isLaunchArgumentsModalOpen: false,
     }),
 
     mutations: {
@@ -111,6 +121,26 @@ export default {
             state.isLocalFileImportModalOpen = false;
         },
 
+        closeIncorrectGameDirectoryModal: function(state: State): void {
+            state.isIncorrectGameDirectoryModalOpen = false;
+        },
+
+        closeIncorrectSteamDirectoryModal: function(state: State): void {
+            state.isIncorrectSteamDirectoryModalOpen = false;
+        },
+
+        closeDependencyStringsModal: function(state: State): void {
+            state.isDependencyStringsModalOpen = false;
+        },
+
+        closeSteamInstallationValidationModal: function(state: State): void {
+            state.isSteamInstallationValidationModalOpen = false;
+        },
+
+        closeLaunchArgumentsModal: function(state: State): void {
+            state.isLaunchArgumentsModalOpen = false;
+        },
+
         openAssociatedModsModal: function(state: State, mod: ManifestV2): void {
             state.associatedModsModalMod = mod;
             state.isAssociatedModsModOpen = true;
@@ -174,5 +204,25 @@ export default {
         openLocalFileImportModal: function(state: State): void {
             state.isLocalFileImportModalOpen = true;
         },
+
+        openIncorrectGameDirectoryModal: function(state: State): void {
+            state.isIncorrectGameDirectoryModalOpen = true;
+        },
+
+        openIncorrectSteamDirectoryModal: function(state: State): void {
+            state.isIncorrectSteamDirectoryModalOpen = true;
+        },
+
+        openDependencyStringsModal: function(state: State): void {
+            state.isDependencyStringsModalOpen = true;
+        },
+
+        openSteamInstallationValidationModal: function(state: State): void {
+            state.isSteamInstallationValidationModalOpen = true;
+        },
+
+        openLaunchArgumentsModal: function(state: State): void {
+            state.isLaunchArgumentsModalOpen = true;
+        },
     }
 }
diff --git a/src/utils/SearchUtils.ts b/src/utils/SearchUtils.ts
index 41d483966..c47541048 100644
--- a/src/utils/SearchUtils.ts
+++ b/src/utils/SearchUtils.ts
@@ -3,9 +3,13 @@ export default class SearchUtils {
         return search.trim().toLowerCase().split(' ');
     }
 
-    public static isSearched(keys: string[], name: string, description: string) {
+    public static isSearched(keys: string[], name: string, description?: string) {
         name = name.toLowerCase();
-        description = description.toLowerCase();
+        if (description) {
+            description = description.toLowerCase();
+        } else {
+            description = '';
+        }
         return keys.every(i => name.indexOf(i) >= 0 || description.indexOf(i) >= 0);
     }
 }