diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
index ef2b747528b7c..9a990eb86f5ce 100644
--- a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
+++ b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
@@ -11,17 +11,19 @@
     </h2>
     <a
       v-for="settingsSection in settingsSections"
-      :id="settingsSection.type"
+      ref="linkRefs"
       :key="settingsSection.type"
       class="title"
+      :class="{ active: activeSection === settingsSection.type }"
       href="javascript:;"
-      @click.stop="goToSettingsSection(settingsSection.type)"
-      @keydown.enter.stop="goToSettingsSection(settingsSection.type)"
+      :data-section="settingsSection.type"
+      @click.stop="goToSettingsSection"
+      @keydown.enter.stop="goToSettingsSection"
     >
       <div class="titleContent">
         <div class="iconAndTitleText">
           <FontAwesomeIcon
-            :icon="['fas', settingsSection.icon]"
+            :icon="settingsSection.icon"
             class="titleIcon"
           />
           {{ settingsSection.title }}
@@ -34,22 +36,38 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { useTemplateRef } from 'vue'
 
 defineProps({
   settingsSections: {
     type: Array,
     required: true
+  },
+  activeSection: {
+    type: String,
+    default: null
   }
 })
 
 const emit = defineEmits(['navigate-to-section'])
 
 /**
- * @param {string} sectionType
+ * @param {PointerEvent | KeyboardEvent} event
  */
-function goToSettingsSection(sectionType) {
-  emit('navigate-to-section', sectionType)
+function goToSettingsSection(event) {
+  emit('navigate-to-section', event.currentTarget.dataset.section)
 }
+
+const linkRefs = useTemplateRef('linkRefs')
+
+defineExpose({
+  /**
+   * @param {string} name
+   */
+  focusLink: (name) => {
+    linkRefs.value.find((link) => link.dataset.section === name)?.focus()
+  }
+})
 </script>
 
 <style scoped src="./FtSettingsMenu.css" />
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
deleted file mode 100644
index a037d6cc767a6..0000000000000
--- a/src/renderer/views/Settings/Settings.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import { defineComponent, nextTick } from 'vue'
-import { mapActions } from 'vuex'
-import GeneralSettings from '../../components/GeneralSettings/GeneralSettings.vue'
-import ThemeSettings from '../../components/ThemeSettings.vue'
-import PlayerSettings from '../../components/PlayerSettings/PlayerSettings.vue'
-import ExternalPlayerSettings from '../../components/ExternalPlayerSettings.vue'
-import SubscriptionSettings from '../../components/SubscriptionSettings/SubscriptionSettings.vue'
-import PrivacySettings from '../../components/PrivacySettings.vue'
-import DataSettings from '../../components/DataSettings/DataSettings.vue'
-import DistractionSettings from '../../components/DistractionSettings/DistractionSettings.vue'
-import ProxySettings from '../../components/ProxySettings/ProxySettings.vue'
-import SponsorBlockSettings from '../../components/SponsorBlockSettings.vue'
-import ParentalControlSettings from '../../components/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/FtToggleSwitch/FtToggleSwitch.vue'
-import FtButton from '../../components/FtButton/FtButton.vue'
-import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
-
-const ACTIVE_CLASS_NAME = 'active'
-const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
-
-export default defineComponent({
-  name: 'Settings',
-  components: {
-    'general-settings': GeneralSettings,
-    'theme-settings': ThemeSettings,
-    'player-settings': PlayerSettings,
-    'subscription-settings': SubscriptionSettings,
-    'privacy-settings': PrivacySettings,
-    'data-settings': DataSettings,
-    'distraction-settings': DistractionSettings,
-    'sponsor-block-settings': SponsorBlockSettings,
-    'parental-control-settings': ParentalControlSettings,
-    'password-settings': PasswordSettings,
-    'password-dialog': PasswordDialog,
-    'ft-button': FtButton,
-    'ft-toggle-switch': FtToggleSwitch,
-    'ft-settings-menu': FtSettingsMenu,
-    ...(process.env.IS_ELECTRON
-      ? {
-          'proxy-settings': ProxySettings,
-          'external-player-settings': ExternalPlayerSettings,
-          'experimental-settings': ExperimentalSettings
-        }
-      : {})
-  },
-  data: function () {
-    return {
-      usingElectron: process.env.IS_ELECTRON,
-      isInDesktopView: true,
-      settingsSectionTypeOpenInMobile: null,
-      unlocked: false
-    }
-  },
-  computed: {
-    locale: function() {
-      return this.$i18n.locale
-    },
-
-    settingsPassword: function () {
-      return this.$store.getters.getSettingsPassword
-    },
-
-    settingsSectionSortEnabled: function () {
-      return this.$store.getters.getSettingsSectionSortEnabled
-    },
-
-    settingsComponentsData: function () {
-      const settingsComponentsData = [
-        {
-          type: 'theme-settings',
-          title: this.$t('Settings.Theme Settings.Theme Settings'),
-          icon: 'display'
-        },
-        {
-          type: 'player-settings',
-          title: this.$t('Settings.Player Settings.Player Settings'),
-          icon: 'circle-play'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [{
-              type: 'external-player-settings',
-              title: this.$t('Settings.External Player Settings.External Player Settings'),
-              icon: 'clapperboard'
-            }]
-          : []),
-        {
-          type: 'subscription-settings',
-          title: this.$t('Settings.Subscription Settings.Subscription Settings'),
-          icon: 'play'
-        },
-        {
-          type: 'distraction-settings',
-          title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings'),
-          icon: 'eye-slash'
-        },
-        {
-          type: 'parental-control-settings',
-          title: this.$t('Settings.Parental Control Settings.Parental Control Settings'),
-          icon: 'user-lock'
-        },
-        {
-          type: 'privacy-settings',
-          title: this.$t('Settings.Privacy Settings.Privacy Settings'),
-          icon: 'lock'
-        },
-        {
-          type: 'data-settings',
-          title: this.$t('Settings.Data Settings.Data Settings'),
-          icon: 'database'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [
-              {
-                type: 'proxy-settings',
-                title: this.$t('Settings.Proxy Settings.Proxy Settings'),
-                icon: 'network-wired',
-              }
-            ]
-          : []),
-        {
-          type: 'sponsor-block-settings',
-          title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
-          // TODO: replace with SponsorBlock icon
-          icon: 'shield'
-        },
-        {
-          type: 'password-settings',
-          title: this.$t('Settings.Password Settings.Password Settings'),
-          icon: 'key'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [{
-              type: 'experimental-settings',
-              title: this.$t('Settings.Experimental Settings.Experimental Settings'),
-              icon: 'flask'
-            }]
-          : []),
-      ]
-      return settingsComponentsData
-    },
-
-    settingsSectionComponents: function () {
-      let settingsSections = this.settingsComponentsData
-      if (this.settingsSectionSortEnabled) {
-        settingsSections = settingsSections.toSorted((a, b) => {
-          return a.title.toLowerCase().localeCompare(b.title.toLowerCase(), this.locale)
-        })
-      }
-
-      // ensure General Settings is placed first regardless of sorting
-      const generalSettingsEntry = {
-        type: 'general-settings',
-        title: this.$t('Settings.General Settings.General Settings'),
-        icon: 'border-all'
-      }
-
-      return [generalSettingsEntry, ...settingsSections]
-    },
-  },
-  created: function () {
-    if (this.settingsPassword === '') {
-      this.unlocked = true
-    }
-  },
-  mounted: function () {
-    if (this.unlocked) {
-      this.handleMounted()
-    }
-  },
-  beforeUnmount: function () {
-    document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    handleMounted: function () {
-      this.handleResize()
-      window.addEventListener('resize', this.handleResize)
-      document.addEventListener('scroll', this.markScrolledToSectionAsActive)
-
-      // mark first section as active before any scrolling has taken place
-      if (this.settingsSectionComponents.length > 0) {
-        const firstSection = document.getElementById(this.settingsSectionComponents[0].type)
-        firstSection.classList.add(ACTIVE_CLASS_NAME)
-      }
-    },
-
-    handleUnlock: function () {
-      this.unlocked = true
-
-      nextTick(() => {
-        this.handleMounted()
-      })
-    },
-
-    navigateToSection: function(sectionType) {
-      if (this.isInDesktopView) {
-        nextTick(() => {
-          const sectionElement = this.$refs[sectionType][0].$el
-          sectionElement.scrollIntoView()
-
-          const sectionHeading = sectionElement.firstChild.firstChild
-          sectionHeading.tabIndex = 0
-          sectionHeading.focus()
-          sectionHeading.tabIndex = -1
-        })
-      } else {
-        this.settingsSectionTypeOpenInMobile = sectionType
-      }
-    },
-
-    returnToSettingsMenu: function () {
-      const openSection = this.settingsSectionTypeOpenInMobile
-      this.settingsSectionTypeOpenInMobile = null
-
-      // focus the corresponding Settings Menu title
-      nextTick(() => document.getElementById(openSection)?.focus())
-    },
-
-    /* Set the current section to be shown as active in the Settings Menu
-    * if it is the lowest section within the top quarter of the viewport (25vh) */
-    markScrolledToSectionAsActive: function() {
-      const scrollY = window.scrollY + innerHeight / 4
-      this.settingsSectionComponents.forEach((section) => {
-        const sectionElement = this.$refs[section.type][0].$el
-        const sectionHeight = sectionElement.offsetHeight
-        const sectionTop = sectionElement.offsetTop
-        const correspondingMenuLink = document.getElementById(section.type)
-
-        if (this.isInDesktopView && scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
-          correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
-        } else {
-          correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
-        }
-      })
-    },
-
-    handleResize: function () {
-      const wasNotInDesktopView = !this.isInDesktopView
-      this.isInDesktopView = window.innerWidth > SETTINGS_MOBILE_WIDTH_THRESHOLD
-
-      // navigate to section that was open in mobile or desktop view, if any
-      if (this.isInDesktopView && wasNotInDesktopView && this.settingsSectionTypeOpenInMobile != null) {
-        this.navigateToSection(this.settingsSectionTypeOpenInMobile)
-        this.settingsSectionTypeOpenInMobile = null
-      } else if (!this.isInDesktopView && !wasNotInDesktopView) {
-        const activeMenuLink = document.querySelector(`.settingsMenu .title.${ACTIVE_CLASS_NAME}`)
-        if (!activeMenuLink) {
-          return
-        }
-
-        const sectionType = activeMenuLink.id
-        this.navigateToSection(sectionType)
-      }
-    },
-
-    ...mapActions([
-      'showKeyboardShortcutPrompt',
-      'updateSettingsSectionSortEnabled'
-    ])
-  }
-})
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 3a11018f091f4..354586bb29d4e 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -4,19 +4,21 @@
       <div v-show="settingsSectionTypeOpenInMobile != null">
         <button
           class="returnToMenuMobileButton"
-          :aria-label="$t('Settings.Return to Settings Menu')"
-          :title="$t('Settings.Return to Settings Menu')"
+          :aria-label="t('Settings.Return to Settings Menu')"
+          :title="t('Settings.Return to Settings Menu')"
           @click="returnToSettingsMenu"
         >
-          <font-awesome-icon
+          <FontAwesomeIcon
             class="returnToMenuMobileIcon"
             :icon="['fas', 'angle-left']"
           />
         </button>
       </div>
-      <ft-settings-menu
+      <FtSettingsMenu
         v-show="isInDesktopView || settingsSectionTypeOpenInMobile == null"
+        ref="menuRef"
         :settings-sections="settingsSectionComponents"
+        :active-section="activeSection"
         @navigate-to-section="navigateToSection"
       />
       <div
@@ -24,41 +26,297 @@
         class="settingsContent"
       >
         <div class="switchRow">
-          <ft-button
-            v-if="usingElectron"
-            :label="$t('KeyboardShortcutPrompt.Show Keyboard Shortcuts')"
+          <FtButton
+            v-if="USING_ELECTRON"
+            :label="t('KeyboardShortcutPrompt.Show Keyboard Shortcuts')"
             :icon="['fas', 'keyboard']"
             @click="showKeyboardShortcutPrompt"
           />
-          <ft-toggle-switch
+          <FtToggleSwitch
             class="settingsToggle"
-            :label="$t('Settings.Sort Settings Sections (A-Z)')"
+            :label="t('Settings.Sort Settings Sections (A-Z)')"
             :default-value="settingsSectionSortEnabled"
-            :compact="false"
             @change="updateSettingsSectionSortEnabled"
           />
         </div>
         <div class="settingsSections">
-          <template
-            v-for="(settingsComponent) in settingsSectionComponents"
-            :key="settingsComponent.type"
-          >
-            <component
-              :is="settingsComponent.type"
-              :ref="settingsComponent.type"
-              :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== settingsComponent.type }"
-              class="section"
-            />
-          </template>
+          <component
+            :is="section.component"
+            v-for="section in settingsSectionComponents"
+            :key="section.type"
+            ref="sectionRefs"
+            class="section"
+            :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== section.type }"
+            :data-section="section.type"
+          />
         </div>
       </div>
     </template>
-    <password-dialog
+    <PasswordDialog
       v-else
       @unlocked="handleUnlock"
     />
   </div>
 </template>
 
-<script src="./Settings.js" />
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import GeneralSettings from '../../components/GeneralSettings/GeneralSettings.vue'
+import ThemeSettings from '../../components/ThemeSettings.vue'
+import PlayerSettings from '../../components/PlayerSettings/PlayerSettings.vue'
+import ExternalPlayerSettings from '../../components/ExternalPlayerSettings.vue'
+import SubscriptionSettings from '../../components/SubscriptionSettings/SubscriptionSettings.vue'
+import PrivacySettings from '../../components/PrivacySettings.vue'
+import DataSettings from '../../components/DataSettings/DataSettings.vue'
+import DistractionSettings from '../../components/DistractionSettings/DistractionSettings.vue'
+import ProxySettings from '../../components/ProxySettings/ProxySettings.vue'
+import SponsorBlockSettings from '../../components/SponsorBlockSettings.vue'
+import ParentalControlSettings from '../../components/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/FtToggleSwitch/FtToggleSwitch.vue'
+import FtButton from '../../components/FtButton/FtButton.vue'
+import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
+
+import store from '../../store/index'
+
+const USING_ELECTRON = !!process.env.IS_ELECTRON
+const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
+
+const { locale, t } = useI18n()
+
+const isInDesktopView = ref(true)
+const settingsSectionTypeOpenInMobile = ref(null)
+const activeSection = ref(null)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const settingsSectionSortEnabled = computed(() => store.getters.getSettingsSectionSortEnabled)
+
+const settingsComponentsData = computed(() => {
+  return [
+    {
+      type: 'theme',
+      title: t('Settings.Theme Settings.Theme Settings'),
+      icon: ['fas', 'display'],
+      component: ThemeSettings
+    },
+    {
+      type: 'player',
+      title: t('Settings.Player Settings.Player Settings'),
+      icon: ['fas', 'circle-play'],
+      component: PlayerSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [{
+          type: 'external-player',
+          title: t('Settings.External Player Settings.External Player Settings'),
+          icon: ['fas', 'clapperboard'],
+          component: ExternalPlayerSettings
+        }]
+      : []),
+    {
+      type: 'subscription',
+      title: t('Settings.Subscription Settings.Subscription Settings'),
+      icon: ['fas', 'play'],
+      component: SubscriptionSettings
+    },
+    {
+      type: 'distraction',
+      title: t('Settings.Distraction Free Settings.Distraction Free Settings'),
+      icon: ['fas', 'eye-slash'],
+      component: DistractionSettings
+    },
+    {
+      type: 'parental-control',
+      title: t('Settings.Parental Control Settings.Parental Control Settings'),
+      icon: ['fas', 'user-lock'],
+      component: ParentalControlSettings
+    },
+    {
+      type: 'privacy',
+      title: t('Settings.Privacy Settings.Privacy Settings'),
+      icon: ['fas', 'lock'],
+      component: PrivacySettings
+    },
+    {
+      type: 'data',
+      title: t('Settings.Data Settings.Data Settings'),
+      icon: ['fas', 'database'],
+      component: DataSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [
+          {
+            type: 'proxy',
+            title: t('Settings.Proxy Settings.Proxy Settings'),
+            icon: ['fas', 'network-wired'],
+            component: ProxySettings
+          }
+        ]
+      : []),
+    {
+      type: 'sponsor-block',
+      title: t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+      // TODO: replace with SponsorBlock icon
+      icon: ['fas', 'shield'],
+      component: SponsorBlockSettings
+    },
+    {
+      type: 'password',
+      title: t('Settings.Password Settings.Password Settings'),
+      icon: ['fas', 'key'],
+      component: PasswordSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [{
+          type: 'experimental',
+          title: t('Settings.Experimental Settings.Experimental Settings'),
+          icon: ['fas', 'flask'],
+          component: ExperimentalSettings
+        }]
+      : []),
+  ]
+})
+
+const collator = computed(() => {
+  return new Intl.Collator([locale.value, 'en'], { sensitivity: 'base' })
+})
+
+const settingsSectionComponents = computed(() => {
+  let settingsSections = settingsComponentsData.value
+
+  if (settingsSectionSortEnabled.value) {
+    const collator_ = collator.value
+
+    settingsSections = settingsSections.toSorted((a, b) => {
+      return collator_.compare(a.title, b.title)
+    })
+  }
+
+  // ensure General Settings is placed first regardless of sorting
+  const generalSettingsEntry = {
+    type: 'general',
+    title: t('Settings.General Settings.General Settings'),
+    icon: ['fas', 'border-all'],
+    component: GeneralSettings
+  }
+
+  return [generalSettingsEntry, ...settingsSections]
+})
+
+const unlocked = ref(store.getters.getSettingsPassword === '')
+
+if (unlocked.value) {
+  onMounted(handleMounted)
+}
+
+function handleUnlock() {
+  unlocked.value = true
+
+  nextTick(() => {
+    handleMounted()
+  })
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('scroll', markScrolledToSectionAsActive)
+  window.removeEventListener('resize', handleResize)
+})
+
+function showKeyboardShortcutPrompt() {
+  store.dispatch('showKeyboardShortcutPrompt')
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateSettingsSectionSortEnabled(value) {
+  store.dispatch('updateSettingsSectionSortEnabled', value)
+}
+
+function handleMounted() {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+  document.addEventListener('scroll', markScrolledToSectionAsActive)
+
+  // mark first section as active before any scrolling has taken place
+  activeSection.value = settingsSectionComponents.value[0].type
+}
+
+const sectionRefs = useTemplateRef('sectionRefs')
+
+/**
+ * @param {string} sectionType
+ */
+function navigateToSection(sectionType) {
+  if (isInDesktopView.value) {
+    nextTick(() => {
+      const sectionElement = sectionRefs.value.find(sectionRef => {
+        return sectionRef.$el.dataset.section === sectionType
+      })?.$el
+      sectionElement.scrollIntoView()
+
+      const sectionHeading = sectionElement.firstChild.firstChild
+      sectionHeading.tabIndex = 0
+      sectionHeading.focus()
+      sectionHeading.tabIndex = -1
+    })
+  } else {
+    settingsSectionTypeOpenInMobile.value = sectionType
+  }
+}
+
+const menuRef = useTemplateRef('menuRef')
+
+function returnToSettingsMenu() {
+  const openSection = settingsSectionTypeOpenInMobile.value
+  settingsSectionTypeOpenInMobile.value = null
+
+  // focus the corresponding Settings Menu title
+  nextTick(() => {
+    return menuRef.value?.focusLink(openSection)
+  })
+}
+
+/* Set the current section to be shown as active in the Settings Menu
+* if it is the lowest section within the top quarter of the viewport (25vh) */
+function markScrolledToSectionAsActive() {
+  if (!isInDesktopView.value) {
+    activeSection.value = null
+    return
+  }
+
+  const scrollY = window.scrollY + window.innerHeight / 4
+
+  for (const sectionRef of sectionRefs.value) {
+    const sectionElement = sectionRef.$el
+
+    const sectionHeight = sectionElement.offsetHeight
+    const sectionTop = sectionElement.offsetTop
+
+    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+      activeSection.value = sectionElement.dataset.section
+      break
+    }
+  }
+}
+
+function handleResize() {
+  const wasNotInDesktopView = !isInDesktopView.value
+  isInDesktopView.value = window.innerWidth > SETTINGS_MOBILE_WIDTH_THRESHOLD
+
+  // navigate to section that was open in mobile or desktop view, if any
+  if (isInDesktopView.value && wasNotInDesktopView && settingsSectionTypeOpenInMobile.value != null) {
+    navigateToSection(settingsSectionTypeOpenInMobile.value)
+    settingsSectionTypeOpenInMobile.value = null
+  } else if (!isInDesktopView.value && !wasNotInDesktopView && activeSection.value) {
+    navigateToSection(activeSection.value)
+  }
+}
+</script>
+
 <style scoped src="./Settings.css" />