diff --git a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
index 3ffebeee8..77dad7173 100644
--- a/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
+++ b/frontend/src/Components/Filter/Builder/FilterBuilderRow.js
@@ -11,11 +11,11 @@ import DateFilterBuilderRowValue from './DateFilterBuilderRowValue';
 import FilterBuilderRowValueConnector from './FilterBuilderRowValueConnector';
 import HistoryEventTypeFilterBuilderRowValue from './HistoryEventTypeFilterBuilderRowValue';
 import IndexerFilterBuilderRowValueConnector from './IndexerFilterBuilderRowValueConnector';
-import MetadataProfileFilterBuilderRowValueConnector from './MetadataProfileFilterBuilderRowValueConnector';
+import MetadataProfileFilterBuilderRowValue from './MetadataProfileFilterBuilderRowValue';
 import MonitorNewItemsFilterBuilderRowValue from './MonitorNewItemsFilterBuilderRowValue';
 import ProtocolFilterBuilderRowValue from './ProtocolFilterBuilderRowValue';
 import QualityFilterBuilderRowValueConnector from './QualityFilterBuilderRowValueConnector';
-import QualityProfileFilterBuilderRowValueConnector from './QualityProfileFilterBuilderRowValueConnector';
+import QualityProfileFilterBuilderRowValue from './QualityProfileFilterBuilderRowValue';
 import TagFilterBuilderRowValueConnector from './TagFilterBuilderRowValueConnector';
 import styles from './FilterBuilderRow.css';
 
@@ -68,7 +68,7 @@ function getRowValueConnector(selectedFilterBuilderProp) {
       return IndexerFilterBuilderRowValueConnector;
 
     case filterBuilderValueTypes.METADATA_PROFILE:
-      return MetadataProfileFilterBuilderRowValueConnector;
+      return MetadataProfileFilterBuilderRowValue;
 
     case filterBuilderValueTypes.MONITOR_NEW_ITEMS:
       return MonitorNewItemsFilterBuilderRowValue;
@@ -80,7 +80,7 @@ function getRowValueConnector(selectedFilterBuilderProp) {
       return QualityFilterBuilderRowValueConnector;
 
     case filterBuilderValueTypes.QUALITY_PROFILE:
-      return QualityProfileFilterBuilderRowValueConnector;
+      return QualityProfileFilterBuilderRowValue;
 
     case filterBuilderValueTypes.ARTIST:
       return ArtistFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValue.tsx
new file mode 100644
index 000000000..bbd9a8274
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValue.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterBuilderRowValueProps from 'Components/Filter/Builder/FilterBuilderRowValueProps';
+import sortByProp from 'Utilities/Array/sortByProp';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createMetadataProfilesSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.metadataProfiles.items,
+    (metadataProfiles) => {
+      return metadataProfiles;
+    }
+  );
+}
+
+function MetadataProfileFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  const metadataProfiles = useSelector(createMetadataProfilesSelector());
+
+  const tagList = metadataProfiles
+    .map(({ id, name }) => ({ id, name }))
+    .sort(sortByProp('name'));
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default MetadataProfileFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValueConnector.js
deleted file mode 100644
index 89d6c06b3..000000000
--- a/frontend/src/Components/Filter/Builder/MetadataProfileFilterBuilderRowValueConnector.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.metadataProfiles,
-    (metadataProfiles) => {
-      const tagList = metadataProfiles.items.map((metadataProfile) => {
-        const {
-          id,
-          name
-        } = metadataProfile;
-
-        return {
-          id,
-          name
-        };
-      });
-
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(FilterBuilderRowValue);
diff --git a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx
new file mode 100644
index 000000000..50036cb90
--- /dev/null
+++ b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValue.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+import FilterBuilderRowValueProps from 'Components/Filter/Builder/FilterBuilderRowValueProps';
+import sortByProp from 'Utilities/Array/sortByProp';
+import FilterBuilderRowValue from './FilterBuilderRowValue';
+
+function createQualityProfilesSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.qualityProfiles.items,
+    (qualityProfiles) => {
+      return qualityProfiles;
+    }
+  );
+}
+
+function QualityProfileFilterBuilderRowValue(
+  props: FilterBuilderRowValueProps
+) {
+  const qualityProfiles = useSelector(createQualityProfilesSelector());
+
+  const tagList = qualityProfiles
+    .map(({ id, name }) => ({ id, name }))
+    .sort(sortByProp('name'));
+
+  return <FilterBuilderRowValue {...props} tagList={tagList} />;
+}
+
+export default QualityProfileFilterBuilderRowValue;
diff --git a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js b/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js
deleted file mode 100644
index 4a8b82283..000000000
--- a/frontend/src/Components/Filter/Builder/QualityProfileFilterBuilderRowValueConnector.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import FilterBuilderRowValue from './FilterBuilderRowValue';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.qualityProfiles,
-    (qualityProfiles) => {
-      const tagList = qualityProfiles.items.map((qualityProfile) => {
-        const {
-          id,
-          name
-        } = qualityProfile;
-
-        return {
-          id,
-          name
-        };
-      });
-
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(FilterBuilderRowValue);