diff --git a/package.json b/package.json
index aa620e8..6a36ea1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "bulk-load",
     "description": "Bulk importing made easy",
-    "version": "3.24.2",
+    "version": "3.24.3",
     "license": "GPL-3.0",
     "author": "EyeSeeTea team",
     "homepage": ".",
diff --git a/src/webapp/components/template-selector/TemplateSelector.tsx b/src/webapp/components/template-selector/TemplateSelector.tsx
index f44bb20..7d60984 100644
--- a/src/webapp/components/template-selector/TemplateSelector.tsx
+++ b/src/webapp/components/template-selector/TemplateSelector.tsx
@@ -176,7 +176,7 @@ export const TemplateSelector = ({
     };
 
     const onTemplateChange = ({ value }: SelectOption) => {
-        const [dataFormId, templateId] = value.split("-");
+        const [dataFormId, templateId] = value.split(/-(.+)/).map(str => str.trim());
 
         if (dataSource) {
             const {
@@ -429,7 +429,7 @@ export const TemplateSelector = ({
                 />
             )}
 
-            {themeOptions.length > 0 && state.templateType !== "custom" && (
+            {themeOptions.length > 0 && (
                 <div className={classes.row}>
                     <div className={classes.select}>
                         <Select
@@ -600,10 +600,12 @@ function modelToSelectOption<T extends { id: string; name: string }>(array: T[])
 }
 
 function dataFormsToSelectOptions(forms: DataFormTemplate[]) {
-    return forms.map(form => ({
-        value: getOptionValue(form),
-        label: form.name,
-    }));
+    return forms
+        .map(form => ({
+            value: getOptionValue(form),
+            label: form.name,
+        }))
+        .sort((formA, formB) => formA.label.localeCompare(formB.label));
 }
 
 function getOptionValue<T extends { id: Id; templateId: Id }>(form: T) {