diff --git a/changes/20194-sort-label-names-in-ui b/changes/20194-sort-label-names-in-ui
new file mode 100644
index 0000000000..2f27f77f0b
--- /dev/null
+++ b/changes/20194-sort-label-names-in-ui
@@ -0,0 +1 @@
+- display the label names case-insensitive alphabetical order in the fleet UI
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
index 88b7e96ed9..12191a9641 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/CustomSettings/components/ProfileUploader/components/AddProfileModal/AddProfileModal.tsx
@@ -7,7 +7,7 @@ import { NotificationContext } from "context/notification";
 import { IApiError } from "interfaces/errors";
 import { ILabelSummary } from "interfaces/label";
 
-import labelsAPI from "services/entities/labels";
+import labelsAPI, { getCustomLabels } from "services/entities/labels";
 import mdmAPI from "services/entities/mdm";
 
 // @ts-ignore
@@ -250,10 +250,7 @@ const AddProfileModal = ({
     isError: isErrorLabels,
   } = useQuery<ILabelSummary[], Error>(
     ["custom_labels"],
-    () =>
-      labelsAPI
-        .summary()
-        .then((res) => res.labels.filter((l) => l.label_type !== "builtin")),
+    () => labelsAPI.summary().then((res) => getCustomLabels(res.labels)),
 
     {
       enabled: isPremiumTier,
diff --git a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
index b6aad87e53..746a2b6ddb 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
+++ b/frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/helpers.ts
@@ -1,4 +1,6 @@
 import { ILabel } from "interfaces/label";
+import { getCustomLabels } from "services/entities/labels";
+
 import { EMPTY_OPTION, FILTERED_LINUX, NO_LABELS_OPTION } from "./constants";
 
 export interface IEmptyOption {
@@ -27,7 +29,7 @@ const createOptionGroup = (
 /** Will create the custom label group options and handles when no labels have been created yet or
  * will filter by the desired search query */
 const createCustomLabelOptions = (labels: ILabel[], query: string) => {
-  const customLabels = labels.filter((label) => label.label_type === "regular");
+  const customLabels = getCustomLabels(labels);
 
   let customLabelGroupOptions: ILabel[] | IEmptyOption[];
   if (customLabels.length === 0) {
diff --git a/frontend/services/entities/labels.ts b/frontend/services/entities/labels.ts
index 7a58cb9a04..5ce8d04938 100644
--- a/frontend/services/entities/labels.ts
+++ b/frontend/services/entities/labels.ts
@@ -49,6 +49,28 @@ const generateCreateLabelBody = (
 
 const generateUpdateLabelBody = generateCreateLabelBody;
 
+/** gets the custom label and returns them in case-insensitive alphabetical
+ * ascending order by label name. (e.g. [A, B, C, a, b, c] => [A, a, B, b, C, c])
+ */
+export const getCustomLabels = <T extends { label_type: string; name: string }>(
+  labels: T[]
+) => {
+  if (labels.length === 0) {
+    return [];
+  }
+
+  return labels
+    .filter((label) => label.label_type === "regular")
+    .sort((a, b) => {
+      // Found this technique here
+      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+      // This is a case insensitive sort
+      return a.name.localeCompare(b.name, undefined, {
+        sensitivity: "base",
+      });
+    });
+};
+
 export default {
   create: (
     formData: IDynamicLabelFormData | IManualLabelFormData