diff --git a/src/renderer/components/ft-instance-selector/ft-instance-selector.js b/src/renderer/components/ft-instance-selector/ft-instance-selector.js
new file mode 100644
index 000000000..3725f8fb1
--- /dev/null
+++ b/src/renderer/components/ft-instance-selector/ft-instance-selector.js
@@ -0,0 +1,50 @@
+import { defineComponent } from 'vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default defineComponent({
+  name: 'FtInstanceSelector',
+  components: {
+    'ft-button': FtButton,
+    'ft-flex-box': FtFlexBox,
+    'ft-input': FtInput
+  },
+  props: {
+    placeholder: {
+      type: String,
+      required: true
+    },
+    tooltip: {
+      type: String,
+      required: true
+    },
+    backendType: {
+      type: String,
+      required: true
+    },
+    currentInstance: {
+      type: String,
+      required: true
+    },
+    instanceList: {
+      type: Array,
+      required: true
+    },
+    defaultInstance: {
+      type: String,
+      required: true
+    }
+  },
+  methods: {
+    handleInstanceInput: function (inputData) {
+      this.$emit('input', inputData)
+    },
+    setDefaultInstance: function () {
+      this.$emit('setDefaultInstance')
+    },
+    clearDefaultInstance: function () {
+      this.$emit('clearDefaultInstance')
+    }
+  }
+})
diff --git a/src/renderer/components/ft-instance-selector/ft-instance-selector.vue b/src/renderer/components/ft-instance-selector/ft-instance-selector.vue
new file mode 100644
index 000000000..a644cd6a9
--- /dev/null
+++ b/src/renderer/components/ft-instance-selector/ft-instance-selector.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <ft-flex-box
+      class="settingsFlexStart460px"
+    >
+      <ft-input
+        :placeholder="placeholder"
+        :show-action-button="false"
+        :show-label="true"
+        :value="currentInstance"
+        :data-list="instanceList"
+        :tooltip="$t('Tooltips.General Settings.Piped Instance')"
+        @input="handleInstanceInput"
+      />
+    </ft-flex-box>
+    <ft-flex-box>
+      <div v-if="backendType === 'piped'">
+        <a href="https://github.com/TeamPiped/Piped/wiki/Instances">
+          {{ $t('Settings.General Settings.View all Piped instance information') }}
+        </a>
+      </div>
+      <div
+        v-else
+      >
+        <a
+          href="https://api.invidious.io"
+        >
+          {{ $t('Settings.General Settings.View all Invidious instance information') }}
+        </a>
+      </div>
+    </ft-flex-box>
+    <p
+      v-if="defaultInstance !== ''"
+      class="center"
+    >
+      {{ $t('Settings.General Settings.The currently set default instance is {instance}', {
+        instance: defaultInstance
+      }) }}
+    </p>
+    <template v-else>
+      <p
+        class="center"
+      >
+        {{ $t('Settings.General Settings.No default instance has been set') }}
+      </p>
+      <p
+        class="center"
+      >
+        {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
+      </p>
+    </template>
+    <ft-flex-box>
+      <ft-button
+        :label="$t('Settings.General Settings.Set Current Instance as Default')"
+        @click="setDefaultInstance"
+      />
+      <ft-button
+        :label="$t('Settings.General Settings.Clear Default Instance')"
+        @click="clearDefaultInstance"
+      />
+    </ft-flex-box>
+  </div>
+</template>
+
+<script src="./ft-instance-selector"></script>
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index c521554cb..d45595b4f 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -2,10 +2,8 @@ import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
-import FtInput from '../ft-input/ft-input.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtButton from '../ft-button/ft-button.vue'
+import FtInstanceSelector from '../ft-instance-selector/ft-instance-selector.vue'
 
 import debounce from 'lodash.debounce'
 import { showToast } from '../../helpers/utils'
@@ -15,10 +13,8 @@ export default defineComponent({
   components: {
     'ft-settings-section': FtSettingsSection,
     'ft-select': FtSelect,
-    'ft-input': FtInput,
     'ft-toggle-switch': FtToggleSwitch,
-    'ft-flex-box': FtFlexBox,
-    'ft-button': FtButton
+    'ft-instance-selector': FtInstanceSelector
   },
   data: function () {
     return {
@@ -202,7 +198,7 @@ export default defineComponent({
       this.setCurrentPipedInstanceBounce(input)
     },
 
-    handleSetDefaultInstanceClick: function () {
+    handleSetDefaultInvidiousInstanceClick: function () {
       const instance = this.currentInvidiousInstance
       this.updateDefaultInvidiousInstance(instance)
 
@@ -218,7 +214,7 @@ export default defineComponent({
       showToast(message)
     },
 
-    handleClearDefaultInstanceClick: function () {
+    handleClearDefaultInvidiousInstanceClick: function () {
       this.updateDefaultInvidiousInstance('')
       showToast(this.$t('Default Invidious instance has been cleared'))
     },
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index fb2e2c628..aff1b17c0 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -99,102 +99,57 @@
         @change="updateExternalLinkHandling"
       />
     </div>
-    <div
-      v-if="backendPreference === 'invidious' || fallbackPreference === 'invidious'"
+    <template
+      v-if="backendPreference === 'piped'"
     >
-      <ft-flex-box class="settingsFlexStart460px">
-        <ft-input
-          :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
-          :show-action-button="false"
-          :show-label="true"
-          :value="currentInvidiousInstance"
-          :data-list="invidiousInstancesList"
-          :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
-          @input="handleInvidiousInstanceInput"
-        />
-      </ft-flex-box>
-      <ft-flex-box>
-        <div>
-          <a
-            href="https://api.invidious.io"
-          >
-            {{ $t('Settings.General Settings.View all Invidious instance information') }}
-          </a>
-        </div>
-      </ft-flex-box>
-      <p
-        v-if="defaultInvidiousInstance !== ''"
-        class="center"
+      <ft-instance-selector
+        :backend-type="'piped'"
+        :placeholder="$t('Settings.General Settings.Current Piped Instance')"
+        :tooltip="$t('Tooltips.General Settings.Piped Instance')"
+        :instance-list="pipedInstancesList"
+        :current-instance="currentPipedInstance"
+        :default-instance="defaultPipedInstance"
+        @input="handlePipedInstanceInput"
+        @setDefaultInstance="handleSetDefaultPipedInstanceClick"
+        @cclearDefaultInstance="handleClearDefaultPipedInstanceClick"
+      />
+      <br
+        v-if="(backendFallback && fallbackPreference === 'invidious')"
       >
-        {{ $t('Settings.General Settings.The currently set default instance is {instance}', { instance: defaultInvidiousInstance }) }}
-      </p>
-      <template v-else>
-        <p class="center">
-          {{ $t('Settings.General Settings.No default instance has been set') }}
-        </p>
-        <p class="center">
-          {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
-        </p>
-      </template>
-      <ft-flex-box>
-        <ft-button
-          :label="$t('Settings.General Settings.Set Current Instance as Default')"
-          @click="handleSetDefaultInstanceClick"
-        />
-        <ft-button
-          :label="$t('Settings.General Settings.Clear Default Instance')"
-          @click="handleClearDefaultInstanceClick"
-        />
-      </ft-flex-box>
-    </div>
-    <div
-      v-if="backendPreference === 'piped' || fallbackPreference === 'piped'"
+    </template>
+    <template
+      v-if="(backendFallback && fallbackPreference === 'invidious') || backendPreference == 'invidious'"
     >
-      <ft-flex-box class="settingsFlexStart460px">
-        <ft-input
-          :placeholder="$t('Settings.General Settings.Current Piped Instance')"
-          :show-action-button="false"
-          :show-label="true"
-          :value="currentPipedInstance"
-          :data-list="pipedInstancesList"
-          :tooltip="$t('Tooltips.General Settings.Piped Instance')"
-          @input="handlePipedInstanceInput"
-        />
-      </ft-flex-box>
-      <ft-flex-box>
-        <div>
-          <a
-            href="https://github.com/TeamPiped/Piped/wiki/Instances"
-          >
-            {{ $t('Settings.General Settings.View all Piped instance information') }}
-          </a>
-        </div>
-      </ft-flex-box>
-      <p
-        v-if="defaultPipedInstance !== ''"
-        class="center"
+      <ft-instance-selector
+        :backend-type="'invidious'"
+        :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
+        :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
+        :instance-list="invidiousInstancesList"
+        :current-instance="currentInvidiousInstance"
+        :default-instance="defaultInvidiousInstance"
+        @input="handleInvidiousInstanceInput"
+        @setDefaultInstance="handleSetDefaultInvidiousInstanceClick"
+        @clearDefaultInstance="handleClearDefaultInvidiousInstanceClick"
+      />
+      <br
+        v-if="(backendFallback && fallbackPreference === 'piped')"
       >
-        {{ $t('Settings.General Settings.The currently set default instance is {instance}', { instance: defaultPipedInstance }) }}
-      </p>
-      <template v-else>
-        <p class="center">
-          {{ $t('Settings.General Settings.No default instance has been set') }}
-        </p>
-        <p class="center">
-          {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
-        </p>
-      </template>
-      <ft-flex-box>
-        <ft-button
-          :label="$t('Settings.General Settings.Set Current Instance as Default')"
-          @click="handleSetDefaultPipedInstanceClick"
-        />
-        <ft-button
-          :label="$t('Settings.General Settings.Clear Default Instance')"
-          @click="handleClearDefaultPipedInstanceClick"
-        />
-      </ft-flex-box>
-    </div>
+    </template>
+    <template
+      v-if="backendFallback && fallbackPreference === 'piped'"
+    >
+      <ft-instance-selector
+        :backend-type="'piped'"
+        :placeholder="$t('Settings.General Settings.Current Piped Instance')"
+        :tooltip="$t('Tooltips.General Settings.Piped Instance')"
+        :instance-list="pipedInstancesList"
+        :current-instance="currentPipedInstance"
+        :default-instance="defaultPipedInstance"
+        @input="handlePipedInstanceInput"
+        @setDefaultInstance="handleSetDefaultPipedInstanceClick"
+        @cclearDefaultInstance="handleClearDefaultPipedInstanceClick"
+      />
+    </template>
   </ft-settings-section>
 </template>