diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx
index 5d4cfec1..0850fe48 100644
--- a/src/components/DynamicForm.tsx
+++ b/src/components/DynamicForm.tsx
@@ -5,6 +5,7 @@ import { Theme as MaterialUITheme } from '@rjsf/mui';
 import { withTheme } from '@rjsf/core';
 import MultiSelectCheckboxes from './MultiSelectCheckboxes';
 import CustomRadioWidget from './CustomRadioWidget';
+import MultiSelectDropdown from './MultiSelectDropdown';
 import { RJSFSchema, RegistryFieldsType, WidgetProps } from '@rjsf/utils';
 import { useTranslation } from 'next-i18next';
 import { Button, Divider } from '@mui/material';
@@ -44,6 +45,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
   const widgets = {
     MultiSelectCheckboxes: MultiSelectCheckboxes,
     CustomRadioWidget: CustomRadioWidget,
+    MultiSelectDropdown: MultiSelectDropdown,
   };
   const { t } = useTranslation();
 
diff --git a/src/components/GeneratedSchemas.ts b/src/components/GeneratedSchemas.ts
index 04c49791..3339c6c0 100644
--- a/src/components/GeneratedSchemas.ts
+++ b/src/components/GeneratedSchemas.ts
@@ -149,7 +149,7 @@ export const GenerateSchemaAndUiSchema = (
       if (maxSelections) {
         fieldSchema.maxItems = maxSelections;
       }
-      fieldUiSchema['ui:widget'] = 'select';
+      fieldUiSchema['ui:widget'] = 'MultiSelectDropdown';
     }
 
     if (!isMultiSelect && type === 'drop_down') {
diff --git a/src/components/ManageUser.tsx b/src/components/ManageUser.tsx
index d0a6729d..17386c40 100644
--- a/src/components/ManageUser.tsx
+++ b/src/components/ManageUser.tsx
@@ -460,6 +460,7 @@ const manageUsers: React.FC<ManageUsersProps> = ({
     setOpenFacilitatorModal(false);
   };
 
+  const handleDeleteUser = () => {};
   return (
     <>
       {/* <Header /> */}
@@ -776,6 +777,7 @@ const manageUsers: React.FC<ManageUsersProps> = ({
               userId={userId}
               open={openDeleteUserModal}
               onClose={handleCloseModal}
+              onUserDelete={handleDeleteUser}
             />
             <SimpleModal
               primaryText={t('COMMON.OK')}
diff --git a/src/components/MultiSelectDropdown.tsx b/src/components/MultiSelectDropdown.tsx
new file mode 100644
index 00000000..97e735fa
--- /dev/null
+++ b/src/components/MultiSelectDropdown.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import TextField from '@mui/material/TextField';
+import { WidgetProps } from '@rjsf/utils';
+
+const MultiSelectDropdown: React.FC<WidgetProps> = ({
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  onChange,
+  schema,
+}) => {
+  const handleChange = (event: any) => {
+    onChange(event.target.value);
+  };
+
+  const isEnumArray = (items: any): items is { enum: any[] } => {
+    return items && Array.isArray(items.enum);
+  };
+
+  const selectOptions = isEnumArray(schema?.items)
+    ? schema.items.enum.map((val, index) => ({
+        value: val,
+        label: schema.enumNames ? schema.enumNames[index] : val,
+      }))
+    : [];
+
+  return (
+    <TextField
+      select
+      label={schema?.title}
+      value={value || []}
+      onChange={handleChange}
+      variant="outlined"
+      SelectProps={{
+        multiple: true,
+        renderValue: (selected) =>
+          (selected as string[])
+            .map(
+              (val) =>
+                selectOptions?.find((opt: any) => opt.value === val)?.label
+            )
+            .join(', '),
+      }}
+      InputLabelProps={{ required: required }}
+      fullWidth
+      disabled={disabled || readonly}
+    >
+      {selectOptions?.map((option: any) => (
+        <MenuItem key={option.value} value={option.value}>
+          <ListItemText primary={option.label} />
+        </MenuItem>
+      ))}
+    </TextField>
+  );
+};
+
+export default MultiSelectDropdown;