diff --git a/src/components/CustomInstanceModal.vue b/src/components/CustomInstanceModal.vue
new file mode 100644
index 00000000..82f157ae
--- /dev/null
+++ b/src/components/CustomInstanceModal.vue
@@ -0,0 +1,111 @@
+<template>
+    <ModalComponent>
+        <h3 v-t="'Custom Instance'" class="font-bold my-4" />
+        <hr />
+        <div class="text-center">
+            <div v-if="customInstances.length" class="remove">
+                <select v-model="selectedInstance">
+                    <option
+                        v-for="(instance, index) in customInstances"
+                        :key="index"
+                        :value="index"
+                        v-text="instance.name"
+                    />
+                </select>
+                <div class="flex justify-end">
+                    <button @click="removeInstance" v-t="'Remove'" />
+                </div>
+            </div>
+            <form class="children:pb-3">
+                <div>
+                    <input v-model="name" class="input w-full" type="text" :placeholder="'Name'" :aria-label="'Name'" />
+                </div>
+                <div>
+                    <input
+                        v-model="url"
+                        class="input w-full"
+                        type="text"
+                        :placeholder="'Instance Api URL'"
+                        :aria-label="'Instance Api URL'"
+                        v-on:keyup.enter="addInstance"
+                    />
+                </div>
+                <div class="flex justify-end">
+                    <button @click.prevent="addInstance" v-t="'Add'" />
+                </div>
+            </form>
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+function isUrl(string) {
+    try {
+        return Boolean(new URL(string));
+    } catch (e) {
+        return false;
+    }
+}
+export default {
+    emits: ["removeInstance", "addInstance"],
+    data() {
+        return {
+            name: "",
+            url: "",
+            selectedInstance: -1,
+        };
+    },
+    methods: {
+        addInstance() {
+            if (this.testLocalStorage === null) {
+                alert("Local storage problem");
+                return null;
+            }
+            const newInstance = {
+                name: this.name,
+                api_url: this.url,
+            };
+            if (newInstance.name.length === 0) {
+                alert("Name cannot be empty");
+                return null;
+            }
+            if (!isUrl(newInstance.api_url)) {
+                alert("Not a valid URL");
+                return null;
+            }
+            fetch(newInstance.url + "/healthcheck")
+                .then(res => {
+                    if (!res.ok) {
+                        alert("Error Backend URL");
+                        return null;
+                    }
+                    this.$emit("addInstance", newInstance);
+                })
+                .catch(() => {
+                    alert("Cannot find URL");
+                    return null;
+                })
+                .finally(() => {
+                    return null;
+                });
+            return null;
+        },
+        removeInstance() {
+            if (this.testLocalStorage === null) {
+                alert("Local storage problem");
+                return null;
+            }
+            if (this.selectedInstance === -1) {
+                alert("SelectedInstance problem");
+                return null;
+            }
+            this.$emit("removeInstance", this.selectedInstance);
+        },
+    },
+    props: {
+        customInstances: [],
+    },
+    components: { ModalComponent },
+};
+</script>
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 5d2f66a9..287711e5 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -386,59 +386,21 @@
             </tr>
         </tbody>
     </table>
-    <ModalComponent v-if="showmodal" @close="showmodal = !showmodal">
-        <h3 v-t="'Custom Instance'" class="font-bold my-4" />
-        <hr />
-        <div class="text-center">
-            <div v-if="customInstances.length" class="remove">
-                <select v-model="selectedInstance">
-                    <option
-                        v-for="(instance, index) in customInstances"
-                        :key="index"
-                        :value="index"
-                        v-text="instance.name"
-                    />
-                </select>
-                <div class="flex justify-end">
-                    <button @click="removeInstance" v-t="'Remove'" />
-                </div>
-            </div>
-            <form class="children:pb-3">
-                <div>
-                    <input
-                        v-model="name"
-                        class="input w-full"
-                        type="text"
-                        :placeholder="'Name'"
-                        :aria-label="'Name'"
-                        v-on:keyup.enter="addInstance($event)"
-                    />
-                </div>
-                <div>
-                    <input
-                        v-model="url"
-                        class="input w-full"
-                        type="text"
-                        :placeholder="'Instance Api URL'"
-                        :aria-label="'Instance Api URL'"
-                        v-on:keyup.enter="addInstance($event)"
-                    />
-                </div>
-                <div class="flex justify-end">
-                    <button @click="addInstance($event)" v-t="'Add'" />
-                </div>
-            </form>
-        </div>
-    </ModalComponent>
+    <CustomInstanceModal
+        v-if="showmodal"
+        @close="showmodal = !showmodal"
+        @addInstance="addInstance"
+        @removeInstance="removeInstance"
+        :customInstances="customInstances"
+    />
 </template>
 
 <script>
 import CountryMap from "@/utils/CountryMaps/en.json";
-import ModalComponent from "./ModalComponent.vue";
+import CustomInstanceModal from "./CustomInstanceModal.vue";
 export default {
     data() {
         return {
-            selectedInstance: null,
             authInstance: false,
             selectedAuthInstance: null,
             instances: [],
@@ -632,48 +594,22 @@ export default {
             }
         }
     },
-    components: { ModalComponent },
+    components: { CustomInstanceModal },
     methods: {
-        removeInstance() {
-            if (this.testLocalStorage) {
-                this.customInstances.splice(this.selectedInstance, 1);
-                localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
-                location.reload();
+        removeInstance(selectedInstance) {
+            if (selectedInstance === null) {
+                return;
             }
+            this.customInstances.splice(selectedInstance, 1);
+            localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
         },
-        isUrl(string) {
-            try {
-                return Boolean(new URL(string));
-            } catch (e) {
-                return false;
-            }
-        },
-        addInstance(event) {
-            event.preventDefault();
-            if (this.testLocalStorage) {
-                if (!this.isUrl(this.url)) {
-                    alert("Not a valid URL");
-                    return;
-                }
-                const newInstance = {
-                    name: this.name,
-                    api_url: this.url,
-                };
-                fetch(this.url + "/healthcheck")
-                    .then(res => {
-                        if (!res.ok) {
-                            alert("Error Backend URL");
-                            return;
-                        }
-                        this.customInstances.push(newInstance);
-                        this.instances.push(newInstance);
-                        localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
-                    })
-                    .catch(() => {
-                        alert("Cannot find URL");
-                        return;
-                    });
+        addInstance(newInstance) {
+            if (newInstance === null) {
+                return;
             }
+            this.customInstances.push(newInstance);
+            this.instances.push(newInstance);
+            localStorage.setItem("custominstances", JSON.stringify(this.customInstances));
         },
         async onChange() {
             if (this.testLocalStorage) {