diff --git a/client/src/components/CustomSelect.tsx b/client/src/components/CustomSelect.tsx
index fc377db..c696eab 100644
--- a/client/src/components/CustomSelect.tsx
+++ b/client/src/components/CustomSelect.tsx
@@ -15,29 +15,139 @@
  * License along with this program.  If not, see
  * <https://www.gnu.org/licenses/>.
  */
+import { Box, InputBase, InputBaseProps, styled, useAutocomplete } from '@mui/material';
+import { MUIStyledCommonProps } from '@mui/system';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
-import { MenuItem, MenuItemProps, Select, SelectProps } from '@mui/material';
+import { ArrowHeadDown, ArrowHeadUp } from './SvgIcon';
 
-export interface CustomSelectOption {
+export interface SelectOption<Payload> {
   label: string;
-  value: MenuItemProps['value'];
+  payload: Payload;
 }
 
-export interface CustomSelectProps extends Omit<SelectProps, 'label'> {
-  value: CustomSelectOption['value'];
-  options: CustomSelectOption[];
-  onChange: SelectProps['onChange'];
-}
+const width = '250px';
 
-const CustomSelect = ({ value, options, onChange }: CustomSelectProps) => {
+type InputProps = InputBaseProps & {
+  popupOpen: boolean; // Sometimes the popover is opened but the Input is not focused
+};
+
+const Input = styled(({ popupOpen, ...props }: InputProps) => <InputBase {...props} />)(({ theme, popupOpen }) => ({
+  width,
+  height: '46px',
+  borderRadius: '5px',
+  border: `1px solid ${popupOpen ? theme.palette.primary.dark : '#0056995C'}`,
+  boxSizing: 'border-box',
+  fontSize: '15px',
+  padding: '16px',
+  color: theme.palette.primary.dark,
+  fontWeight: 'medium',
+  '&.Mui-focused': {
+    // Sometimes the popover is closed but the Input is still focused
+    borderColor: theme.palette.primary.dark,
+    color: 'black',
+  },
+  '&::placeholder': {
+    color: '#666666',
+  },
+  '&.MuiInputBase-sizeSmall': {
+    height: '36px',
+  },
+}));
+
+const Listbox = styled('ul')(({ theme }) => ({
+  width,
+  maxHeight: '230px',
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  paddingTop: '5px',
+  paddingBottom: '8.5px',
+  zIndex: 1,
+  position: 'absolute',
+  top: '-5px',
+  listStyle: 'none',
+  backgroundColor: 'white',
+  overflow: 'auto',
+  border: `1px solid ${theme.palette.primary.dark}`,
+  borderEndEndRadius: '5px',
+  borderEndStartRadius: '5px',
+  borderTop: 'none',
+}));
+
+const Option = styled('li')(({ theme }) => ({
+  paddingLeft: '16px',
+  paddingRight: '16px',
+  paddingTop: '7.5px',
+  paddingBottom: '7.5px',
+  fontSize: '15px',
+  '&.Mui-focused': {
+    backgroundColor: theme.palette.primary.light,
+    color: theme.palette.primary.dark,
+    cursor: 'pointer',
+  },
+}));
+
+const getArrowStyles = ({ theme }: MUIStyledCommonProps) => ({
+  height: '6px',
+  color: theme?.palette.primary.dark,
+  '&:hover': {
+    cursor: 'pointer',
+  },
+});
+const StyledArrowHeadUp = styled(ArrowHeadUp)(getArrowStyles);
+const StyledArrowHeadDown = styled(ArrowHeadDown)(getArrowStyles);
+
+export type CustomSelectProps<OptionPayload> = {
+  option?: SelectOption<OptionPayload>;
+  options: SelectOption<OptionPayload>[];
+  onChange: (newValue: SelectOption<OptionPayload> | null) => void;
+  size?: 'small' | 'medium';
+};
+
+export const CustomSelect = <OptionPayload,>({ option, options, onChange, size }: CustomSelectProps<OptionPayload>) => {
+  const { t } = useTranslation();
+
+  const [open, setOpen] = useState(false);
+
+  const { getRootProps, getInputProps, getListboxProps, getOptionProps, groupedOptions, popupOpen } = useAutocomplete<
+    SelectOption<OptionPayload>
+  >({
+    value: option,
+    options,
+    getOptionLabel: (option) => option.label,
+    onChange: (_, value) => onChange(value),
+    openOnFocus: true,
+    open,
+    onOpen: () => setOpen(true),
+    onClose: () => setOpen(false),
+  });
+
   return (
-    <Select onChange={onChange} value={value}>
-      {options.map((option) => (
-        <MenuItem key={option.label} value={option.value}>
-          {option.label}
-        </MenuItem>
-      ))}
-    </Select>
+    <div>
+      <Box {...getRootProps()}>
+        <Input
+          inputProps={getInputProps()}
+          placeholder={t('select_placeholder')}
+          endAdornment={popupOpen ? <StyledArrowHeadUp /> : <StyledArrowHeadDown />}
+          size={size}
+          // onMouseDown fires before onBlur, contrary to onClick which fires after and causes glitches
+          onMouseDown={() => setOpen(!popupOpen)}
+          popupOpen={popupOpen}
+        />
+      </Box>
+      <Box position="relative">
+        {groupedOptions.length > 0 ? (
+          <Listbox {...getListboxProps()}>
+            {(groupedOptions as SelectOption<OptionPayload>[]).map((option, index) => (
+              <Option key={option.label} {...getOptionProps({ option, index })}>
+                {option.label}
+              </Option>
+            ))}
+          </Listbox>
+        ) : null}
+      </Box>
+    </div>
   );
 };
-export { CustomSelect };