Index: sources/client/src/components/admin/EmployeeCreate/index.js
===================================================================
--- sources/client/src/components/admin/EmployeeCreate/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeCreate/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -4,197 +4,242 @@
 
 import {
-  EmployeeEditWrapper,
-  Title,
-  RowWrapper,
-  LabelAndInputWrapper,
-  Label,
-  StandardInputField,
-  Dropdown,
-  DropdownOption,
-  SwitchRowWrapper,
-  SwitchTitle,
-  SwitchLabelAndInputWrapper,
-  AccountSwitch,
-  BackButton,
-  SaveChangesButton,
-  VisibilityIcon,
-  VisibilityOffIcon,
+    EmployeeEditWrapper,
+    Title,
+    RowWrapper,
+    LabelAndInputWrapper,
+    Label,
+    StandardInputField,
+    Dropdown,
+    DropdownOption,
+    SwitchRowWrapper,
+    SwitchTitle,
+    SwitchLabelAndInputWrapper,
+    AccountSwitch,
+    BackButton,
+    SaveChangesButton,
+    VisibilityIcon,
+    VisibilityOffIcon,
 } from './styles';
 
 import IconButton from '@mui/material/IconButton';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
 
 import { employeeStatus } from '../../../config/enums';
+import useGetData from '../../../hooks/useGetData';
+import useCreateEmployee from '../../../hooks/useCreateEmployee';
 
 import { defaultUser } from '../../../config/defaultUser';
 
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: 220,
+        },
+    },
+};
+
 const EmployeeCreate = () => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  let history = useHistory();
-
-  const { data: employeeEditableData, onFormChange: setEmployeeEditableData } =
-    useForm({ ...defaultUser, confirmPassword: defaultUser.password });
-  const [accStatus, setAccStatus] = useState(defaultUser.accountActive);
-
-  const zoneOptions = [
-    {
-      text: 'Nitu edna zona',
-      value: 'none',
-    },
-    {
-      text: 'Zona 1',
-      value: 'zone1',
-    },
-    {
-      text: 'Zona 2',
-      value: 'zone2',
-    },
-    {
-      text: 'Zona 3',
-      value: 'zone3',
-    },
-    {
-      text: 'Zona 4',
-      value: 'zone4',
-    },
-    {
-      text: 'Zona 5',
-      value: 'zone5',
-    },
-  ];
-
-  const statusOptions = Object.keys(employeeStatus).map((key) => {
-    return {
-      text: employeeStatus[key],
-      value: key,
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    let history = useHistory();
+    const { data: zoneOptions, isLoading: isLoadingZonesData } = useGetData({
+        url: `/parkingZone/parkingZoneNames`,
+    });
+    const { createEmployee } = useCreateEmployee();
+    const {
+        data: employeeEditableData,
+        onFormChange: setEmployeeEditableData,
+    } = useForm({ ...defaultUser });
+    const [accStatus, setAccStatus] = useState(defaultUser.locked);
+    const {
+        data: { confirmPassword },
+        onFormChange: setConfirmPassword,
+    } = useForm({
+        confirmPassword: defaultUser.password,
+    });
+    const [zones, setZones] = useState(defaultUser.parkingZones); // TODO RENAME ZONE TO ZONES
+    console.log(zones);
+    const statusOptions = Object.keys(employeeStatus).map((key) => {
+        return {
+            text: employeeStatus[key],
+            value: key,
+        };
+    });
+
+    const onCreateEmployee = () => {
+        if (zones.length === 1 && zones[0] === 'NONE') {
+            zones.shift();
+        }
+        console.log(`Confirm password: ${confirmPassword}`);
+        const changedEmployee = {
+            ...employeeEditableData,
+            locked: accStatus,
+            parkingZones: zones,
+            confirmPass: confirmPassword,
+        };
+        createEmployee({ employee: changedEmployee });
     };
-  });
-
-  const onCreateEmployee = () => {
-    const changedEmployee = {
-      ...employeeEditableData,
-      accountActive: accStatus,
+    const handleZonesChange = (event) => {
+        const {
+            target: { value },
+        } = event;
+        if (value.length > 1 && value[0] === 'NONE') {
+            value.shift();
+        }
+        setZones(
+            typeof value === 'string'
+                ? value.split(', ')
+                : value.length === 0
+                ? ['NONE']
+                : value
+        );
     };
-    console.log('Created employee: ', changedEmployee);
-  };
-
-  return (
-    <EmployeeEditWrapper>
-      <Title variant='h5'>Создади вработен</Title>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Име</Label>
-          <StandardInputField
-            value={employeeEditableData.firstName}
-            name='firstName'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Презиме</Label>
-          <StandardInputField
-            value={employeeEditableData.lastName}
-            name='lastName'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Емаил</Label>
-          <StandardInputField
-            value={employeeEditableData.email}
-            name='email'
-            type='email'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Телефон</Label>
-          <StandardInputField
-            value={employeeEditableData.phoneNumber}
-            name='phoneNumber'
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Лозинка</Label>
-          <StandardInputField
-            value={employeeEditableData.password}
-            name='password'
-            type={isPasswordVisible ? 'text' : 'password'}
-            $autoComplete={true}
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-        <IconButton
-          sx={{ marginTop: '23px' }}
-          onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-        >
-          {isPasswordVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
-        </IconButton>
-        <LabelAndInputWrapper>
-          <Label>Потврди лозинка</Label>
-          <StandardInputField
-            value={employeeEditableData.confirmPassword}
-            name='confirmPassword'
-            type={isPasswordVisible ? 'text' : 'password'}
-            onChange={setEmployeeEditableData}
-          />
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <RowWrapper>
-        <LabelAndInputWrapper>
-          <Label>Одговорен за</Label>
-          <Dropdown
-            value={employeeEditableData.zone}
-            name='zone'
-            onChange={setEmployeeEditableData}
-          >
-            {zoneOptions.map((option) => (
-              <DropdownOption value={option.value} key={option.value}>
-                {option.text}
-              </DropdownOption>
-            ))}
-          </Dropdown>
-        </LabelAndInputWrapper>
-        <LabelAndInputWrapper>
-          <Label>Статус</Label>
-          <Dropdown
-            value={employeeEditableData.status}
-            name='status'
-            onChange={setEmployeeEditableData}
-          >
-            {statusOptions.map((option) => (
-              <DropdownOption value={option.value} key={option.value}>
-                {option.text}
-              </DropdownOption>
-            ))}
-          </Dropdown>
-        </LabelAndInputWrapper>
-      </RowWrapper>
-      <SwitchRowWrapper>
-        <SwitchTitle>Акаунт</SwitchTitle>
-        <SwitchLabelAndInputWrapper>
-          <Label>Активен:</Label>
-          <AccountSwitch
-            checked={accStatus}
-            value={accStatus}
-            name='accountActive'
-            onClick={() => setAccStatus(!accStatus)}
-          />
-        </SwitchLabelAndInputWrapper>
-      </SwitchRowWrapper>
-      <RowWrapper>
-        <BackButton onClick={() => history.push('/employees')}>
-          Врати се назад
-        </BackButton>
-        <SaveChangesButton onClick={onCreateEmployee}>
-          Создади вработен
-        </SaveChangesButton>
-      </RowWrapper>
-    </EmployeeEditWrapper>
-  );
+    return (
+        <EmployeeEditWrapper>
+            <Title variant='h5'>Создади вработен</Title>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Име</Label>
+                    <StandardInputField
+                        value={employeeEditableData.firstName}
+                        name='firstName'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Презиме</Label>
+                    <StandardInputField
+                        value={employeeEditableData.lastName}
+                        name='lastName'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Емаил</Label>
+                    <StandardInputField
+                        value={employeeEditableData.email}
+                        name='email'
+                        type='email'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Телефон</Label>
+                    <StandardInputField
+                        value={employeeEditableData.mobile}
+                        name='mobile'
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Лозинка</Label>
+                    <StandardInputField
+                        value={employeeEditableData.password}
+                        name='password'
+                        type={isPasswordVisible ? 'text' : 'password'}
+                        $autoComplete={true}
+                        onChange={setEmployeeEditableData}
+                    />
+                </LabelAndInputWrapper>
+                <IconButton
+                    sx={{ marginTop: '23px' }}
+                    onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+                >
+                    {isPasswordVisible ? (
+                        <VisibilityIcon />
+                    ) : (
+                        <VisibilityOffIcon />
+                    )}
+                </IconButton>
+                <LabelAndInputWrapper>
+                    <Label>Потврди лозинка</Label>
+                    <StandardInputField
+                        value={confirmPassword}
+                        name='confirmPassword'
+                        type={isPasswordVisible ? 'text' : 'password'}
+                        onChange={setConfirmPassword}
+                    />
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <RowWrapper>
+                {isLoadingZonesData ? (
+                    <AbsoluteLoader
+                        containerStyle={{
+                            position: 'absolute',
+                            left: '310px',
+                            bottom: '5px',
+                            width: '40px',
+                            height: '40px',
+                        }}
+                    />
+                ) : null}
+                <LabelAndInputWrapper>
+                    <Label>Одговорен за</Label>
+                    <Dropdown
+                        multiple
+                        value={zones}
+                        onChange={handleZonesChange}
+                        renderValue={(selected) => {
+                            return selected.join(', ');
+                        }}
+                        MenuProps={MenuProps}
+                    >
+                        {!isLoadingZonesData &&
+                            zoneOptions.map((zone) => (
+                                <DropdownOption value={zone} key={zone}>
+                                    <Checkbox
+                                        checked={zones.indexOf(zone) > -1}
+                                    />
+                                    <ListItemText primary={zone} />
+                                </DropdownOption>
+                            ))}
+                    </Dropdown>
+                </LabelAndInputWrapper>
+                <LabelAndInputWrapper>
+                    <Label>Статус</Label>
+                    <Dropdown
+                        value={employeeEditableData.status}
+                        name='status'
+                        onChange={setEmployeeEditableData}
+                        MenuProps={MenuProps}
+                    >
+                        {statusOptions.map((option) => (
+                            <DropdownOption
+                                value={option.value}
+                                key={option.value}
+                            >
+                                {option.text}
+                            </DropdownOption>
+                        ))}
+                    </Dropdown>
+                </LabelAndInputWrapper>
+            </RowWrapper>
+            <SwitchRowWrapper>
+                <SwitchTitle>Акаунт</SwitchTitle>
+                <SwitchLabelAndInputWrapper>
+                    <Label>Активен:</Label>
+                    <AccountSwitch
+                        checked={!accStatus}
+                        value={accStatus}
+                        name='locked'
+                        onClick={() => setAccStatus(!accStatus)}
+                    />
+                </SwitchLabelAndInputWrapper>
+            </SwitchRowWrapper>
+            <RowWrapper>
+                <BackButton onClick={() => history.push('/employees')}>
+                    Врати се назад
+                </BackButton>
+                <SaveChangesButton onClick={onCreateEmployee}>
+                    Создади вработен
+                </SaveChangesButton>
+            </RowWrapper>
+        </EmployeeEditWrapper>
+    );
 };
 
Index: sources/client/src/components/admin/EmployeeCreate/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeeCreate/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeCreate/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -1,127 +1,132 @@
-import styled from "styled-components";
-import { Button, InputLabel, MenuItem, Select, Switch, TextField, Typography } from "@mui/material";
+import styled from 'styled-components';
+import {
+  Button,
+  InputLabel,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+} from '@mui/material';
 import VIcon from '@mui/icons-material/Visibility';
 import VOffIcon from '@mui/icons-material/VisibilityOff';
 
 export const EmployeeEditWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    max-width: 800px;
-    border: 1px solid whiteSmoke;
-    border-radius: 10px;
-    padding: 10px 20px;
-    margin-top: 20px;
-    margin-left: 30px;
-    background-color: white;
-    box-shadow: 15px 15px 10px ${props => props.theme.palette.background.shadow};
+  display: flex;
+  flex-direction: column;
+  max-width: 800px;
+  border: 1px solid whiteSmoke;
+  border-radius: 10px;
+  padding: 10px 20px;
+  margin-top: 20px;
+  margin-left: 30px;
+  background-color: white;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
 `;
 
-export const Title = styled(Typography).attrs({
-
-})`
-    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
-    padding-bottom: 10px;
-    margin-bottom: 15px;
+export const Title = styled(Typography).attrs({})`
+  border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+  padding-bottom: 10px;
+  margin-bottom: 15px;
 `;
 
 export const RowWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 25px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  position: relative;
 `;
 
-export const LabelAndInputWrapper = styled.div`
+export const LabelAndInputWrapper = styled.div``;
 
-`;
+export const Label = styled(InputLabel).attrs({})``;
 
-export const Label = styled(InputLabel).attrs({
-
-})``;
-
-export const StandardInputField = styled(TextField).attrs({
-
-})`
-    width: 300px;
+export const StandardInputField = styled(TextField).attrs({})`
+  width: 300px;
 `;
 
 export const VisibilityIcon = styled(VIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
 export const VisibilityOffIcon = styled(VOffIcon).attrs({
-    sx: {
-        fontSize: '2rem'
-    }
+  sx: {
+    fontSize: '2rem',
+  },
 })``;
 
-export const Dropdown = styled(Select).attrs({
-
-})`
-    width: 300px;
+export const Dropdown = styled(Select).attrs({})`
+  width: 300px;
 `;
 
-export const DropdownOption = styled(MenuItem).attrs({
-
-})``;
+export const DropdownOption = styled(MenuItem).attrs({})`
+  > span {
+    color: ${(props) => props.theme.palette.primary.main};
+    svg {
+      color: ${(props) => props.theme.palette.primary.main};
+    }
+  }
+  > div > span {
+    font-size: 1.3rem;
+  }
+`;
 
 export const SwitchRowWrapper = styled.div`
-    text-align: center;
-    margin-top: 10px;
-    margin-bottom: 50px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 50px;
 `;
 
 export const SwitchTitle = styled.p`
-    font-size: 18px;
-    font-weight: 600;
-    margin: 0;
-    margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  margin-bottom: 5px;
 `;
 
 export const SwitchLabelAndInputWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 `;
 
-export const AccountSwitch = styled(Switch).attrs(props => ({
-}))`
-    .MuiSwitch-switchBase {
-        color: red;
-    }
-    .MuiSwitch-track {
-        background-color: red;
-    }
-    .MuiSwitch-switchBase.Mui-checked {
-        color: ${props => props.theme.palette.primary.main};
-    }
-    .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
-        background-color: ${props => props.theme.palette.primary.main};
-    }
+export const AccountSwitch = styled(Switch).attrs((props) => ({}))`
+  .MuiSwitch-switchBase {
+    color: red;
+  }
+  .MuiSwitch-track {
+    background-color: red;
+  }
+  .MuiSwitch-switchBase.Mui-checked {
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+  .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
+    background-color: ${(props) => props.theme.palette.primary.main};
+  }
 `;
 
 export const BackButton = styled(Button).attrs({
-    variant: 'outlined'
+  variant: 'outlined',
 })`
-    margin-right: 15px;
-    :hover {
-        border: 2px solid;
-        font-weight: 600;
-    }
+  margin-right: 15px;
+  :hover {
+    border: 2px solid;
+    font-weight: 600;
+  }
 `;
 
-export const SaveChangesButton = styled(Button).attrs(props => ({
-    variant: 'contained',
-    sx: {
-        backgroundColor: `${props.theme.palette.primary.main}`
-    }
+export const SaveChangesButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
 }))`
-    padding: 10px 16px;
-    :hover {
-        background-color: ${props => props.theme.palette.primary.dark}
-    }
+  padding: 10px 16px;
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
 `;
