diff --git a/src/components/views/LocalModList.vue b/src/components/views/LocalModList.vue
index 7f21172cd..97f4fa9aa 100644
--- a/src/components/views/LocalModList.vue
+++ b/src/components/views/LocalModList.vue
@@ -37,88 +37,33 @@
             </div>
         </div>
 
-        <Modal v-show="showingDependencyList" v-if="selectedManifestMod !== null"
-               @close-modal="showingDependencyList = null" :open="showingDependencyList">
-            <template v-slot:title>
-                <p v-if="dependencyListDisplayType === 'disable'" class='card-header-title'>Disabling
-                    {{selectedManifestMod.getName()}}
-                </p>
-                <p v-if="dependencyListDisplayType === 'uninstall'" class='card-header-title'>Uninstalling
-                    {{selectedManifestMod.getName()}}
-                </p>
-                <p v-if="dependencyListDisplayType === 'view'" class='card-header-title'>Mods associated with
-                    {{selectedManifestMod.getName()}}
-                </p>
-            </template>
-            <template v-slot:body>
-                <div v-if="dependencyListDisplayType === 'disable'" class='notification is-warning'>
-                    <p>Other mods depend on this mod. Select <strong>Disable all</strong> to disable dependent mods which may cause errors.</p>
-                </div>
-                <div v-if="dependencyListDisplayType === 'uninstall'" class='notification is-warning'>
-                    <p>Other mods depend on this mod. Select <strong>Uninstall all</strong> to uninstall dependent mods which may cause errors.</p>
-                </div>
-                <p v-if="dependencyListDisplayType === 'disable'">Mods to be disabled:</p>
-                <p v-if="dependencyListDisplayType === 'uninstall'">Mods to be uninstalled:</p>
-                <br v-if="dependencyListDisplayType !== 'view'"/>
-                <div v-if="dependencyListDisplayType !== 'view'">
-                    <ul class="list">
-                        <li class="list-item">{{selectedManifestMod.getName()}}</li>
-                        <li class="list-item" v-for='(key, index) in getDependantList(selectedManifestMod)'
-                            :key='`dependant-${index}`'>
-                            {{key.getName()}}
-                        </li>
-                    </ul>
-                </div>
-                <div v-if="dependencyListDisplayType === 'view'">
-                    <div v-if="getDependencyList(selectedManifestMod).size > 0">
-                        <h3 class="subtitle is-5">Dependencies</h3>
-                        <ul class="list">
-                            <li class="list-item" v-for='(key, index) in getDependencyList(selectedManifestMod)'
-                                :key='`dependency-${index}`'>
-                                {{key.getName()}}
-                            </li>
-                        </ul>
-                    </div>
-                    <br v-if="getDependencyList(selectedManifestMod).size > 0"/>
-                    <div v-if="getDependantList(selectedManifestMod).size > 0">
-                        <h3 class="subtitle is-5">Dependants</h3>
-                        <ul class="list">
-                            <li class="list-item" v-for='(key, index) in getDependantList(selectedManifestMod)'
-                                :key='`dependant-${index}`'>
-                                {{key.getName()}}
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </template>
-            <template v-slot:footer>
-                <button v-if="dependencyListDisplayType === 'disable'" class="button is-info"
-                        @click="disableModWithDependents(selectedManifestMod)">
-                    Disable all (recommended)
-                </button>
-                <button v-if="dependencyListDisplayType === 'disable'" class="button"
-                        @click="disableModExcludeDependents(selectedManifestMod)">
-                    Disable {{selectedManifestMod.getName()}} only
-                </button>
-                <button v-if="dependencyListDisplayType === 'uninstall'" class="button is-info"
-                        :disabled="modBeingUninstalled !== null"
-                        @click="uninstallModWithDependents(selectedManifestMod)">
-                    Uninstall all (recommended)
-                </button>
-                <button v-if="dependencyListDisplayType === 'uninstall'" class="button"
-                        :disabled="modBeingUninstalled !== null"
-                        @click="uninstallModExcludeDependents(selectedManifestMod)">
-                    Uninstall {{selectedManifestMod.getName()}} only
-                </button>
-                <span v-if="modBeingUninstalled" class="tag is-warning margin-top--1rem margin-left">
-                    Uninstalling {{ modBeingUninstalled }}
-                </span>
-                <button v-if="dependencyListDisplayType === 'view'" class="button is-info"
-                        @click="selectedManifestMod = null">
-                    Done
-                </button>
-            </template>
-        </Modal>
+        <DisableModModal
+            v-if="dependencyListDisplayType === 'disable' && !!selectedManifestMod && showingDependencyList"
+            :on-close="() => { showingDependencyList = false; }"
+            :mod="selectedManifestMod"
+            :dependency-list="getDependencyList(selectedManifestMod)"
+            :dependants-list="getDependantList(selectedManifestMod)"
+            :mod-being-disabled="modBeingDisabled"
+            :on-disable-include-dependents ="disableModWithDependents"
+            :on-disable-exclude-dependents="disableModExcludeDependents"
+        />
+        <UninstallModModal
+            v-if="dependencyListDisplayType === 'uninstall' && !!selectedManifestMod && showingDependencyList"
+            :on-close="() => { showingDependencyList = false; }"
+            :mod="selectedManifestMod"
+            :dependency-list="getDependencyList(selectedManifestMod)"
+            :dependants-list="getDependantList(selectedManifestMod)"
+            :mod-being-uninstalled="modBeingUninstalled"
+            :on-uninstall-include-dependents="uninstallModWithDependents"
+            :on-uninstall-exclude-dependents="uninstallModExcludeDependents"
+        />
+        <AssociatedModsModal
+            v-if="dependencyListDisplayType === 'view' && !!selectedManifestMod && showingDependencyList"
+            :on-close="() => { showingDependencyList = false; }"
+            :mod="selectedManifestMod"
+            :dependency-list="getDependencyList(selectedManifestMod)"
+            :dependants-list="getDependantList(selectedManifestMod)"
+        />
 
         <slot name="above-list"></slot>
 
@@ -250,6 +195,9 @@ import ConflictManagementProvider from '../../providers/generic/installing/Confl
 import Draggable from 'vuedraggable';
 import DonateButton from '../../components/buttons/DonateButton.vue';
 import SearchUtils from '../../utils/SearchUtils';
+import AssociatedModsModal from './LocalModList/AssociatedModsModal.vue';
+import DisableModModal from './LocalModList/DisableModModal.vue';
+import UninstallModModal from './LocalModList/UninstallModModal.vue';
 
 @Component({
         components: {
@@ -258,7 +206,10 @@ import SearchUtils from '../../utils/SearchUtils';
             Link,
             ExpandableCard,
             Modal,
-            Draggable
+            Draggable,
+            AssociatedModsModal,
+            DisableModModal,
+            UninstallModModal,
         }
     })
     export default class LocalModList extends Vue {
@@ -282,6 +233,7 @@ import SearchUtils from '../../utils/SearchUtils';
         private selectedManifestMod: ManifestV2 | null = null;
         private dependencyListDisplayType: string = 'view';
         private modBeingUninstalled: string | null = null;
+        private modBeingDisabled: string | null = null;
 
         // Filtering
         private sortDisabledPosition: SortLocalDisabledMods = this.settings.getInstalledDisablePosition();
@@ -459,14 +411,18 @@ import SearchUtils from '../../utils/SearchUtils';
                 LoggerProvider.instance.Log(LogSeverity.ACTION_STOPPED, `${err.name}\n-> ${err.message}`);
             }
             this.selectedManifestMod = null;
+            this.modBeingDisabled = null;
         }
 
         async performDisable(mods: ManifestV2[]): Promise<R2Error | void> {
+            this.modBeingDisabled = null;
             for (let mod of mods) {
+                this.modBeingDisabled = mod.getName();
                 const disableErr: R2Error | void = await ProfileInstallerProvider.instance.disableMod(mod, this.contextProfile!);
                 if (disableErr instanceof R2Error) {
                     // Failed to disable
                     this.showingDependencyList = false;
+                    this.modBeingDisabled = null;
                     this.$emit('error', disableErr);
                     return disableErr;
                 }
@@ -477,9 +433,11 @@ import SearchUtils from '../../utils/SearchUtils';
             if (updatedList instanceof R2Error) {
                 // Failed to update mod list.
                 this.showingDependencyList = false;
+                this.modBeingDisabled = null;
                 this.$emit('error', updatedList);
                 return updatedList;
             }
+            this.modBeingDisabled = null;
             await this.updateModListAfterChange(updatedList);
         }
 
@@ -497,6 +455,7 @@ import SearchUtils from '../../utils/SearchUtils';
             let lastSuccess: ManifestV2[] | null = null;
             try {
                 for (const mod of modsToUninstall) {
+                    this.modBeingUninstalled = mod.getName();
                     const result = await this.performUninstallMod(mod, false);
                     if (result instanceof R2Error) {
                         this.$emit('error', result);
diff --git a/src/components/views/LocalModList/AssociatedModsModal.vue b/src/components/views/LocalModList/AssociatedModsModal.vue
new file mode 100644
index 000000000..e5fbee4f1
--- /dev/null
+++ b/src/components/views/LocalModList/AssociatedModsModal.vue
@@ -0,0 +1,62 @@
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Modal } from '../../all';
+import ManifestV2 from '../../../model/ManifestV2';
+
+@Component({
+    components: {Modal}
+})
+export default class AssociatedModsModal extends Vue {
+
+    @Prop({required: true})
+    readonly mod!: ManifestV2;
+
+    @Prop({required: true})
+    readonly dependencyList!: Set<ManifestV2>;
+
+    @Prop({required: true})
+    readonly dependantsList!: Set<ManifestV2>;
+
+    @Prop({required: true, type: Function})
+    readonly onClose!: () => void;
+}
+</script>
+<template>
+    <Modal :open="true" @close-modal="onClose">
+        <template v-slot:title>
+            <p class='card-header-title'>
+                Mods associated with {{mod.getName()}}
+            </p>
+        </template>
+        <template v-slot:body>
+            <div v-if="!!dependencyList.size">
+                <h3 class="subtitle is-5">Dependencies</h3>
+                <ul class="list">
+                    <li class="list-item" v-for='(key, index) in dependencyList'
+                        :key='`dependency-${index}`'>
+                        {{key.getName()}}
+                    </li>
+                </ul>
+            </div>
+            <br v-if="!!dependencyList.size"/>
+            <div v-if="!!dependantsList.size">
+                <h3 class="subtitle is-5">Dependants</h3>
+                <ul class="list">
+                    <li class="list-item" v-for='(key, index) in dependantsList'
+                        :key='`dependant-${index}`'>
+                        {{key.getName()}}
+                    </li>
+                </ul>
+            </div>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info" @click="onClose">
+                Done
+            </button>
+        </template>
+    </Modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/views/LocalModList/DisableModModal.vue b/src/components/views/LocalModList/DisableModModal.vue
new file mode 100644
index 000000000..5f68d1a57
--- /dev/null
+++ b/src/components/views/LocalModList/DisableModModal.vue
@@ -0,0 +1,77 @@
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Modal } from '../../all';
+import ManifestV2 from '../../../model/ManifestV2';
+
+@Component({
+    components: {Modal}
+})
+export default class DisableModModal extends Vue {
+
+    @Prop({required: true})
+    readonly mod!: ManifestV2;
+
+    @Prop({required: true})
+    readonly dependencyList!: Set<ManifestV2>;
+
+    @Prop({required: true})
+    readonly dependantsList!: Set<ManifestV2>;
+
+    @Prop({required: true})
+    readonly modBeingDisabled!: string | null;
+
+    @Prop({required: true, type: Function})
+    readonly onClose!: () => void;
+
+    @Prop({required: true, type: Function})
+    readonly onDisableIncludeDependents!: (mod: ManifestV2) => void;
+
+    @Prop({required: true, type: Function})
+    readonly onDisableExcludeDependents!: (mod: ManifestV2) => void;
+}
+</script>
+<template>
+    <Modal :open="true" @close-modal="onClose">
+        <template v-slot:title>
+            <p class='card-header-title'>Disabling
+                {{mod.getName()}}
+            </p>
+        </template>
+        <template v-slot:body>
+            <div class='notification is-warning'>
+                <p>
+                    Other mods depend on this mod. Select <strong>Disable all</strong>
+                    to disable dependent mods, otherwise they may cause errors.
+                </p>
+            </div>
+            <p>Mods to be disabled:</p>
+            <br/>
+            <div>
+                <ul class="list">
+                    <li class="list-item">{{mod.getName()}}</li>
+                    <li class="list-item" v-for='(key, index) in dependantsList'
+                        :key='`dependant-${index}`'>
+                        {{key.getName()}}
+                    </li>
+                </ul>
+            </div>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info"
+                    @click="onDisableIncludeDependents(mod)">
+                Disable all (recommended)
+            </button>
+            <button class="button"
+                    @click="onDisableExcludeDependents(mod)">
+                Disable {{mod.getName()}} only
+            </button>
+            <span v-if="modBeingDisabled" class="tag is-warning margin-top--1rem margin-left">
+                Disabling {{ modBeingDisabled }}
+            </span>
+        </template>
+    </Modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/components/views/LocalModList/UninstallModModal.vue b/src/components/views/LocalModList/UninstallModModal.vue
new file mode 100644
index 000000000..b0b205280
--- /dev/null
+++ b/src/components/views/LocalModList/UninstallModModal.vue
@@ -0,0 +1,79 @@
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Modal } from '../../all';
+import ManifestV2 from '../../../model/ManifestV2';
+
+@Component({
+    components: {Modal}
+})
+export default class UninstallModModal extends Vue {
+
+    @Prop({required: true})
+    readonly mod!: ManifestV2;
+
+    @Prop({required: true})
+    readonly dependencyList!: Set<ManifestV2>;
+
+    @Prop({required: true})
+    readonly dependantsList!: Set<ManifestV2>;
+
+    @Prop({required: true})
+    readonly modBeingUninstalled!: string | null;
+
+    @Prop({required: true, type: Function})
+    readonly onClose!: () => void;
+
+    @Prop({required: true, type: Function})
+    readonly onUninstallIncludeDependents!: (mod: ManifestV2) => void;
+
+    @Prop({required: true, type: Function})
+    readonly onUninstallExcludeDependents!: (mod: ManifestV2) => void;
+}
+</script>
+<template>
+    <Modal :open="true" @close-modal="onClose">
+        <template v-slot:title>
+            <p class='card-header-title'>
+                Uninstalling {{mod.getName()}}
+            </p>
+        </template>
+        <template v-slot:body>
+            <div class='notification is-warning'>
+                <p>
+                    Other mods depend on this mod. Select <strong>Uninstall all</strong>
+                    to uninstall dependent mods, otherwise they may cause errors.
+                </p>
+            </div>
+            <p>Mods to be uninstalled:</p>
+            <br/>
+            <div>
+                <ul class="list">
+                    <li class="list-item">{{mod.getName()}}</li>
+                    <li class="list-item" v-for='(key, index) in dependantsList'
+                        :key='`dependant-${index}`'>
+                        {{key.getName()}}
+                    </li>
+                </ul>
+            </div>
+        </template>
+        <template v-slot:footer>
+            <button class="button is-info"
+                    :disabled="modBeingUninstalled !== null"
+                    @click="onUninstallIncludeDependents(mod)">
+                Uninstall all (recommended)
+            </button>
+            <button class="button"
+                    :disabled="modBeingUninstalled !== null"
+                    @click="onUninstallExcludeDependents(mod)">
+                Uninstall {{mod.getName()}} only
+            </button>
+            <span v-if="modBeingUninstalled" class="tag is-warning margin-top--1rem margin-left">
+                Uninstalling {{ modBeingUninstalled }}
+            </span>
+        </template>
+    </Modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>