diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/ExperimentalSettings/ExperimentalSettings.css
similarity index 100%
rename from src/renderer/components/experimental-settings/experimental-settings.css
rename to src/renderer/components/ExperimentalSettings/ExperimentalSettings.css
diff --git a/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue b/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue
new file mode 100644
index 000000000..792dd4353
--- /dev/null
+++ b/src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue
@@ -0,0 +1,78 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Experimental Settings.Experimental Settings')"
+  >
+    <p class="experimental-warning">
+      {{ $t('Settings.Experimental Settings.Warning') }}
+    </p>
+    <FtFlexBox>
+      <FtToggleSwitch
+        tooltip-position="top"
+        :label="$t('Settings.Experimental Settings.Replace HTTP Cache')"
+        compact
+        :default-value="replaceHttpCache"
+        :disabled="replaceHttpCacheLoading"
+        :tooltip="$t('Tooltips.Experimental Settings.Replace HTTP Cache')"
+        @change="handleRestartPrompt"
+      />
+    </FtFlexBox>
+    <FtPrompt
+      v-if="showRestartPrompt"
+      :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
+      :option-names="[$t('Yes, Restart'), $t('Cancel')]"
+      :option-values="['restart', 'cancel']"
+      @click="handleReplaceHttpCache"
+    />
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
+
+import { IpcChannels } from '../../../constants'
+
+const replaceHttpCacheLoading = ref(true)
+const replaceHttpCache = ref(false)
+const showRestartPrompt = ref(false)
+
+onMounted(async () => {
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    replaceHttpCache.value = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
+  }
+
+  replaceHttpCacheLoading.value = false
+})
+
+/**
+ * @param {boolean} value
+ */
+function handleRestartPrompt(value) {
+  replaceHttpCache.value = value
+  showRestartPrompt.value = true
+}
+
+/**
+ * @param {'restart' | 'cancel' | null} value
+ */
+function handleReplaceHttpCache(value) {
+  showRestartPrompt.value = false
+
+  if (value === null || value === 'cancel') {
+    replaceHttpCache.value = !replaceHttpCache.value
+    return
+  }
+
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
+  }
+}
+</script>
+
+<style scoped src="./ExperimentalSettings.css" />
diff --git a/src/renderer/components/ParentalControlSettings/ParentalControlSettings.vue b/src/renderer/components/ParentalControlSettings/ParentalControlSettings.vue
new file mode 100644
index 000000000..2d3433a90
--- /dev/null
+++ b/src/renderer/components/ParentalControlSettings/ParentalControlSettings.vue
@@ -0,0 +1,72 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Parental Control Settings.Parental Control Settings')"
+  >
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
+          compact
+          :default-value="hideUnsubscribeButton"
+          @change="updateHideUnsubscribeButton"
+        />
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
+          compact
+          :default-value="showFamilyFriendlyOnly"
+          @change="updateShowFamilyFriendlyOnly"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Hide Search Bar')"
+          compact
+          :default-value="hideSearchBar"
+          @change="updateHideSearchBar"
+        />
+      </div>
+    </div>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+
+import store from '../../store/index'
+
+const hideSearchBar = computed(() => {
+  return store.getters.getHideSearchBar
+})
+
+const hideUnsubscribeButton = computed(() => {
+  return store.getters.getHideUnsubscribeButton
+})
+
+const showFamilyFriendlyOnly = computed(() => {
+  return store.getters.getShowFamilyFriendlyOnly
+})
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSearchBar(value) {
+  store.dispatch('updateHideSearchBar', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateHideUnsubscribeButton(value) {
+  store.dispatch('updateHideUnsubscribeButton', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateShowFamilyFriendlyOnly(value) {
+  store.dispatch('updateShowFamilyFriendlyOnly', value)
+}
+</script>
diff --git a/src/renderer/components/experimental-settings/experimental-settings.js b/src/renderer/components/experimental-settings/experimental-settings.js
deleted file mode 100644
index 652c94f75..000000000
--- a/src/renderer/components/experimental-settings/experimental-settings.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineComponent } from 'vue'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtPrompt from '../ft-prompt/ft-prompt.vue'
-import { IpcChannels } from '../../../constants'
-
-export default defineComponent({
-  name: 'ExperimentalSettings',
-  components: {
-    'ft-settings-section': FtSettingsSection,
-    'ft-flex-box': FtFlexBox,
-    'ft-toggle-switch': FtToggleSwitch,
-    'ft-prompt': FtPrompt
-  },
-  data: function () {
-    return {
-      replaceHttpCacheLoading: true,
-      replaceHttpCache: false,
-      showRestartPrompt: false
-    }
-  },
-  mounted: async function () {
-    if (process.env.IS_ELECTRON) {
-      const { ipcRenderer } = require('electron')
-      this.replaceHttpCache = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
-    }
-
-    this.replaceHttpCacheLoading = false
-  },
-  methods: {
-    handleRestartPrompt: function (value) {
-      this.replaceHttpCache = value
-      this.showRestartPrompt = true
-    },
-
-    handleReplaceHttpCache: function (value) {
-      this.showRestartPrompt = false
-
-      if (value === null || value === 'cancel') {
-        this.replaceHttpCache = !this.replaceHttpCache
-        return
-      }
-
-      if (process.env.IS_ELECTRON) {
-        const { ipcRenderer } = require('electron')
-        ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
-      }
-    }
-  }
-})
diff --git a/src/renderer/components/experimental-settings/experimental-settings.vue b/src/renderer/components/experimental-settings/experimental-settings.vue
deleted file mode 100644
index 1f0d61f64..000000000
--- a/src/renderer/components/experimental-settings/experimental-settings.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <ft-settings-section
-    :title="$t('Settings.Experimental Settings.Experimental Settings')"
-  >
-    <p class="experimental-warning">
-      {{ $t('Settings.Experimental Settings.Warning') }}
-    </p>
-    <ft-flex-box>
-      <ft-toggle-switch
-        tooltip-position="top"
-        :label="$t('Settings.Experimental Settings.Replace HTTP Cache')"
-        :compact="true"
-        :default-value="replaceHttpCache"
-        :disabled="replaceHttpCacheLoading"
-        :tooltip="$t('Tooltips.Experimental Settings.Replace HTTP Cache')"
-        @change="handleRestartPrompt"
-      />
-    </ft-flex-box>
-    <ft-prompt
-      v-if="showRestartPrompt"
-      :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
-      :option-names="[$t('Yes, Restart'), $t('Cancel')]"
-      :option-values="['restart', 'cancel']"
-      @click="handleReplaceHttpCache"
-    />
-  </ft-settings-section>
-</template>
-
-<script src="./experimental-settings.js" />
-<style scoped src="./experimental-settings.css" />
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.js b/src/renderer/components/parental-control-settings/parental-control-settings.js
deleted file mode 100644
index fd064ae63..000000000
--- a/src/renderer/components/parental-control-settings/parental-control-settings.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
-import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-
-export default defineComponent({
-  name: 'ParentalControlSettings',
-  components: {
-    'ft-settings-section': FtSettingsSection,
-    'ft-toggle-switch': FtToggleSwitch
-  },
-  computed: {
-    hideSearchBar: function () {
-      return this.$store.getters.getHideSearchBar
-    },
-    hideUnsubscribeButton: function() {
-      return this.$store.getters.getHideUnsubscribeButton
-    },
-    showFamilyFriendlyOnly: function() {
-      return this.$store.getters.getShowFamilyFriendlyOnly
-    }
-  },
-  methods: {
-    ...mapActions([
-      'updateHideSearchBar',
-      'updateHideUnsubscribeButton',
-      'updateShowFamilyFriendlyOnly'
-    ])
-  }
-})
diff --git a/src/renderer/components/parental-control-settings/parental-control-settings.vue b/src/renderer/components/parental-control-settings/parental-control-settings.vue
deleted file mode 100644
index 2d5485c48..000000000
--- a/src/renderer/components/parental-control-settings/parental-control-settings.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <ft-settings-section
-    :title="$t('Settings.Parental Control Settings.Parental Control Settings')"
-  >
-    <div class="switchColumnGrid">
-      <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
-          :compact="true"
-          :default-value="hideUnsubscribeButton"
-          @change="updateHideUnsubscribeButton"
-        />
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
-          :compact="true"
-          :default-value="showFamilyFriendlyOnly"
-          @change="updateShowFamilyFriendlyOnly"
-        />
-      </div>
-      <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.Parental Control Settings.Hide Search Bar')"
-          :compact="true"
-          :default-value="hideSearchBar"
-          @change="updateHideSearchBar"
-        />
-      </div>
-    </div>
-  </ft-settings-section>
-</template>
-
-<script src="./parental-control-settings.js" />
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 6972bdadf..16e4e7ab7 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -11,8 +11,8 @@ import DataSettings from '../../components/data-settings/data-settings.vue'
 import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'
 import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
 import SponsorBlockSettings from '../../components/sponsor-block-settings/sponsor-block-settings.vue'
-import ParentControlSettings from '../../components/parental-control-settings/parental-control-settings.vue'
-import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
+import ParentalControlSettings from '../../components/ParentalControlSettings/ParentalControlSettings.vue'
+import ExperimentalSettings from '../../components/ExperimentalSettings/ExperimentalSettings.vue'
 import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
 import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
@@ -32,7 +32,7 @@ export default defineComponent({
     'data-settings': DataSettings,
     'distraction-settings': DistractionSettings,
     'sponsor-block-settings': SponsorBlockSettings,
-    'parental-control-settings': ParentControlSettings,
+    'parental-control-settings': ParentalControlSettings,
     'password-settings': PasswordSettings,
     'password-dialog': PasswordDialog,
     'ft-toggle-switch': FtToggleSwitch,