diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index ab9bd641..e11592f3 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -1,5 +1,5 @@
 import { Select } from "antd";
-import { map } from "lodash-es";
+import { map, sortBy } from "lodash-es";
 import { Dictionary, RecipeManifest } from "../../types";
 
 interface DropdownProps {
@@ -15,13 +15,14 @@ const Dropdown = (props: DropdownProps): JSX.Element => {
         label: opt.displayName || key,
         value: opt.recipeId,
     }));
+    const sortedOptions = sortBy(selectOptions, "label");
 
     return (
         <Select
             defaultValue={defaultValue}
             onChange={onChange}
             placeholder={placeholder}
-            options={selectOptions}
+            options={sortedOptions}
             style={{ width: "100%", paddingLeft: 5 }}
         />
     );
diff --git a/src/utils/firebase.ts b/src/utils/firebase.ts
index e2056f04..14474031 100644
--- a/src/utils/firebase.ts
+++ b/src/utils/firebase.ts
@@ -13,6 +13,7 @@ import {
     Timestamp,
     deleteDoc,
 } from "firebase/firestore";
+import { sortBy } from "lodash-es";
 import {
     FIREBASE_CONFIG,
     FIRESTORE_COLLECTIONS,
@@ -162,7 +163,8 @@ const getEditableFieldsList = async (
         conversion_factor: doc.data().conversion_factor,
         unit: doc.data().unit,
     }));
-    return docs;
+    const sortedDocs = sortBy(docs, "name");
+    return sortedDocs;
 };
 
 /**