diff --git a/src/renderer/components/password-dialog/password-dialog.css b/src/renderer/components/PasswordDialog/PasswordDialog.css
similarity index 100%
rename from src/renderer/components/password-dialog/password-dialog.css
rename to src/renderer/components/PasswordDialog/PasswordDialog.css
diff --git a/src/renderer/components/PasswordDialog/PasswordDialog.vue b/src/renderer/components/PasswordDialog/PasswordDialog.vue
new file mode 100644
index 0000000000000..c7e7fcbbf9093
--- /dev/null
+++ b/src/renderer/components/PasswordDialog/PasswordDialog.vue
@@ -0,0 +1,45 @@
+<template>
+  <FtCard
+    class="card"
+  >
+    <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
+
+    <FtInput
+      ref="password"
+      :placeholder="$t('Settings.Password Dialog.Password')"
+      :show-action-button="false"
+      input-type="password"
+      class="passwordInput"
+      @input="handlePasswordInput"
+    />
+  </FtCard>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+
+import FtCard from '../ft-card/ft-card.vue'
+import FtInput from '../ft-input/ft-input.vue'
+
+import store from '../../store/index'
+
+const emit = defineEmits(['unlocked'])
+
+const password = ref(null)
+
+onMounted(() => {
+  password.value.focus()
+})
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+function handlePasswordInput(input) {
+  if (input === settingsPassword.value) {
+    emit('unlocked')
+  }
+}
+</script>
+
+<style scoped src="./PasswordDialog.css" />
diff --git a/src/renderer/components/password-settings/password-settings.css b/src/renderer/components/PasswordSettings/PasswordSettings.css
similarity index 100%
rename from src/renderer/components/password-settings/password-settings.css
rename to src/renderer/components/PasswordSettings/PasswordSettings.css
diff --git a/src/renderer/components/PasswordSettings/PasswordSettings.vue b/src/renderer/components/PasswordSettings/PasswordSettings.vue
new file mode 100644
index 0000000000000..ccd3b6dacc139
--- /dev/null
+++ b/src/renderer/components/PasswordSettings/PasswordSettings.vue
@@ -0,0 +1,67 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Password Settings.Password Settings')"
+  >
+    <FtFlexBox
+      v-if="hasStoredPassword"
+      class="settingsFlexStart460px"
+    >
+      <FtButton
+        :label="$t('Settings.Password Settings.Remove Password')"
+        @click="handleRemovePassword"
+      />
+    </FtFlexBox>
+    <FtFlexBox
+      v-else
+      class="settingsFlexStart460px"
+    >
+      <FtInput
+        :placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
+        :show-action-button="false"
+        show-label
+        input-type="password"
+        :value="password"
+        @input="e => password = e"
+        @keydown.enter.native="handleSetPassword"
+      />
+      <FtButton
+        class="centerButton"
+        :label="$t('Settings.Password Settings.Set Password')"
+        @click="handleSetPassword"
+      />
+    </FtFlexBox>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+import store from '../../store/index'
+
+const settingsPassword = computed(() => {
+  return store.getters.getSettingsPassword
+})
+
+const hasStoredPassword = computed(() => {
+  return settingsPassword.value !== ''
+})
+
+const password = ref('')
+
+function handleSetPassword() {
+  store.dispatch('updateSettingsPassword', password.value)
+  password.value = ''
+}
+
+function handleRemovePassword() {
+  store.dispatch('updateSettingsPassword', '')
+  password.value = ''
+}
+</script>
+
+<style scoped src="./PasswordSettings.css" />
diff --git a/src/renderer/components/password-dialog/password-dialog.js b/src/renderer/components/password-dialog/password-dialog.js
deleted file mode 100644
index ed4b5e99cafe3..0000000000000
--- a/src/renderer/components/password-dialog/password-dialog.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue'
-import FtCard from '../ft-card/ft-card.vue'
-import FtInput from '../ft-input/ft-input.vue'
-
-export default defineComponent({
-  name: 'PasswordDialog',
-  components: {
-    'ft-input': FtInput,
-    'ft-card': FtCard
-  },
-  emits: ['unlocked'],
-  computed: {
-    settingsPassword: function () {
-      return this.$store.getters.getSettingsPassword
-    }
-  },
-  mounted: function () {
-    this.$refs.password.focus()
-  },
-  methods: {
-    handlePasswordInput: function (input) {
-      if (input === this.settingsPassword) {
-        this.$emit('unlocked')
-      }
-    }
-  }
-})
diff --git a/src/renderer/components/password-dialog/password-dialog.vue b/src/renderer/components/password-dialog/password-dialog.vue
deleted file mode 100644
index 89858f2106e8a..0000000000000
--- a/src/renderer/components/password-dialog/password-dialog.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <ft-card
-    class="card"
-  >
-    <h3>{{ $t("Settings.Password Dialog.Enter Password To Unlock") }}</h3>
-
-    <ft-input
-      ref="password"
-      :placeholder="$t('Settings.Password Dialog.Password')"
-      :show-action-button="false"
-      input-type="password"
-      class="passwordInput"
-      @input="handlePasswordInput"
-    />
-  </ft-card>
-</template>
-
-<script src="./password-dialog.js" />
-<style scoped src="./password-dialog.css" />
diff --git a/src/renderer/components/password-settings/password-settings.js b/src/renderer/components/password-settings/password-settings.js
deleted file mode 100644
index 079bbbf480378..0000000000000
--- a/src/renderer/components/password-settings/password-settings.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
-import FtInput from '../ft-input/ft-input.vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtButton from '../ft-button/ft-button.vue'
-
-export default defineComponent({
-  name: 'PasswordSettings',
-  components: {
-    'ft-settings-section': FtSettingsSection,
-    'ft-input': FtInput,
-    'ft-flex-box': FtFlexBox,
-    'ft-button': FtButton,
-  },
-  data: function() {
-    return {
-      password: '',
-    }
-  },
-  computed: {
-    settingsPassword: function() {
-      return this.$store.getters.getSettingsPassword
-    },
-    hasStoredPassword: function() {
-      return this.settingsPassword !== ''
-    }
-  },
-  methods: {
-    handleSetPassword: function () {
-      this.updateSettingsPassword(this.password)
-      this.password = ''
-    },
-    handleRemovePassword: function () {
-      this.updateSettingsPassword('')
-      this.password = ''
-    },
-    ...mapActions([
-      'updateSettingsPassword'
-    ])
-  }
-})
diff --git a/src/renderer/components/password-settings/password-settings.vue b/src/renderer/components/password-settings/password-settings.vue
deleted file mode 100644
index 42c1745faef61..0000000000000
--- a/src/renderer/components/password-settings/password-settings.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <ft-settings-section
-    :title="$t('Settings.Password Settings.Password Settings')"
-  >
-    <ft-flex-box
-      v-if="hasStoredPassword"
-      class="settingsFlexStart460px"
-    >
-      <ft-button
-        :label="$t('Settings.Password Settings.Remove Password')"
-        @click="handleRemovePassword"
-      />
-    </ft-flex-box>
-    <ft-flex-box
-      v-else
-      class="settingsFlexStart460px"
-    >
-      <ft-input
-        :placeholder="$t('Settings.Password Settings.Set Password To Prevent Access')"
-        :show-action-button="false"
-        :show-label="true"
-        input-type="password"
-        :value="password"
-        @input="e => password = e"
-        @keydown.enter.native="handleSetPassword"
-      />
-      <ft-button
-        class="centerButton"
-        :label="$t('Settings.Password Settings.Set Password')"
-        @click="handleSetPassword"
-      />
-    </ft-flex-box>
-  </ft-settings-section>
-</template>
-
-<script src="./password-settings.js" />
-<style scoped src="./password-settings.css" />
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index f6aa58bbf447a..6972bdadfcfa5 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -13,8 +13,8 @@ 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 PasswordSettings from '../../components/password-settings/password-settings.vue'
-import PasswordDialog from '../../components/password-dialog/password-dialog.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'
 import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'