Index: sources/client/src/components/admin/EmployeeEdit/index.js
===================================================================
--- sources/client/src/components/admin/EmployeeEdit/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeEdit/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+
+import {
+    EmployeeEditWrapper,
+    Title,
+    RowWrapper,
+    LabelAndInputWrapper,
+    Label,
+    StandardInputField,
+    Dropdown,
+    DropdownOption,
+    SwitchRowWrapper,
+    SwitchTitle,
+    SwitchLabelAndInputWrapper,
+    AccountSwitch,
+    BackAndSaveChangesButtonsWrapper,
+    DeleteButton,
+    BackButton,
+    SaveChangesButton,
+    VisibilityIcon,
+    VisibilityOffIcon
+} from './styles';
+
+import IconButton from '@mui/material/IconButton';
+
+import {
+    employeeStatus
+} from '../../../config/enums';
+
+import {
+    employees
+} from '../EmployeesTable/mockData';
+
+const EmployeeEdit = () => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    let history = useHistory();
+    let { employeeId } = useParams();
+    employeeId = parseInt(employeeId);
+
+    const employee = employees.find(e => e.id === employeeId);
+    const { data: employeeEditableData, onFormChange: setEmployeeEditableData } = useForm({ ...employee, confirmPassword: employee.password });
+    const [accStatus, setAccStatus] = useState(employee ? employee.accountActive : false);
+
+    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 onSaveChanges = () => {
+        const changedEmployee = {
+            ...employeeEditableData,
+            accountActive: accStatus
+        }
+        console.log('Changed employee: ', changedEmployee);
+    }
+
+    const onDeleteEmployee = () => {
+        console.log(`Empoyee with ${employee.id} is deleted`);
+    }
+
+    return <EmployeeEditWrapper>
+        <Title variant='h5'>Uredi vraboten</Title>
+        <RowWrapper>
+            <LabelAndInputWrapper>
+                <Label>Ime</Label>
+                <StandardInputField
+                    value={employeeEditableData?.firstName ?? ''}
+                    name='firstName'
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+            <LabelAndInputWrapper>
+                <Label>Prezime</Label>
+                <StandardInputField
+                    value={employeeEditableData?.lastName ?? ''}
+                    name='lastName'
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+        </RowWrapper>
+        <RowWrapper>
+            <LabelAndInputWrapper>
+                <Label>Email</Label>
+                <StandardInputField
+                    value={employeeEditableData?.email ?? ''}
+                    name='email'
+                    type='email'
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+            <LabelAndInputWrapper>
+                <Label>Telefon</Label>
+                <StandardInputField
+                    value={employeeEditableData?.phoneNumber ?? ''}
+                    name='phoneNumber'
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+        </RowWrapper>
+        <RowWrapper>
+            <LabelAndInputWrapper>
+                <Label>Lozinka</Label>
+                <StandardInputField
+                    value={employeeEditableData?.password ?? ''}
+                    name='password'
+                    type={isPasswordVisible ? 'text' : 'password'}
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+            <IconButton sx={{ marginTop: '23px' }} onClick={() => setIsPasswordVisible(!isPasswordVisible)}>
+                {
+                    isPasswordVisible ?
+                        <VisibilityIcon />
+                        :
+                        <VisibilityOffIcon />
+                }
+            </IconButton>
+            <LabelAndInputWrapper>
+                <Label>Potvrdi lozinka</Label>
+                <StandardInputField
+                    value={employeeEditableData?.confirmPassword ?? ''}
+                    name='confirmPassword'
+                    type={isPasswordVisible ? 'text' : 'password'}
+                    onChange={setEmployeeEditableData}
+                />
+            </LabelAndInputWrapper>
+        </RowWrapper>
+        <RowWrapper>
+            <LabelAndInputWrapper>
+                <Label>Odgovoren za</Label>
+                <Dropdown
+                    value={employeeEditableData?.zone !== '' ? employeeEditableData?.zone : zoneOptions[0].value}
+                    name='zone'
+                    onChange={setEmployeeEditableData}
+                >
+                    {
+                        zoneOptions.map(option => <DropdownOption value={option.value} key={option.value}>{option.text}</DropdownOption>)
+                    }
+                </Dropdown>
+            </LabelAndInputWrapper>
+            <LabelAndInputWrapper>
+                <Label>Status</Label>
+                <Dropdown
+                    value={employeeEditableData?.status !== '' ? employeeEditableData?.status : statusOptions[0].value}
+                    name='status'
+                    onChange={setEmployeeEditableData}
+                >
+                    {
+                        statusOptions.map(option => <DropdownOption value={option.value} key={option.value}>{option.text}</DropdownOption>)
+                    }
+                </Dropdown>
+            </LabelAndInputWrapper>
+        </RowWrapper>
+        <SwitchRowWrapper>
+            <SwitchTitle>Akaunt</SwitchTitle>
+            <SwitchLabelAndInputWrapper>
+                <Label>Aktiven:</Label>
+                <AccountSwitch
+                    checked={accStatus}
+                    value={accStatus}
+                    name='accountActive'
+                    onClick={() => setAccStatus(!accStatus)}
+                />
+            </SwitchLabelAndInputWrapper>
+        </SwitchRowWrapper>
+        <RowWrapper>
+            <DeleteButton onClick={onDeleteEmployee}>
+                Izbrisi vraboten
+            </DeleteButton>
+            <BackAndSaveChangesButtonsWrapper>
+                <BackButton onClick={() => history.push('/employees')}>
+                    Vrati se nazad
+                </BackButton>
+                <SaveChangesButton onClick={onSaveChanges}>
+                    Zacuvaj gi promenti
+                </SaveChangesButton>
+            </BackAndSaveChangesButtonsWrapper>
+        </RowWrapper>
+    </EmployeeEditWrapper>
+};
+
+export default EmployeeEdit;
Index: sources/client/src/components/admin/EmployeeEdit/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeeEdit/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeeEdit/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,143 @@
+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};
+`;
+
+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;
+`;
+
+export const LabelAndInputWrapper = styled.div`
+
+`;
+
+export const Label = styled(InputLabel).attrs({
+
+})``;
+
+export const StandardInputField = styled(TextField).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const VisibilityIcon = styled(VIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const VisibilityOffIcon = styled(VOffIcon).attrs({
+    sx: {
+        fontSize: '2rem'
+    }
+})``;
+
+export const Dropdown = styled(Select).attrs({
+
+})`
+    width: 300px;
+`;
+
+export const DropdownOption = styled(MenuItem).attrs({
+
+})``;
+
+export const SwitchRowWrapper = styled.div`
+    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;
+`;
+
+export const SwitchLabelAndInputWrapper = styled.div`
+    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 BackAndSaveChangesButtonsWrapper = styled.div`
+
+`;
+
+export const DeleteButton = styled(Button).attrs(props => ({
+    variant: 'contained',
+    sx: {
+        backgroundColor: `${props.theme.palette.error.main}`
+    }
+}))`
+    :hover {
+        background-color: ${props => props.theme.palette.error.dark};
+    }
+`;
+
+export const BackButton = styled(Button).attrs({
+    variant: 'outlined'
+})`
+    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}`
+    }
+}))`
+    padding: 10px 16px;
+    :hover {
+        background-color: ${props => props.theme.palette.primary.dark}
+    }
+`;
