Index: sources/client/src/components/admin/EmployeesTable/index.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,122 @@
+import { useHistory } from 'react-router';
+
+import {
+  TableContainer,
+  TableHeaderWrapper,
+  TableTitle,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+  ButtonTableCell,
+  ToggleAccoutStatusButton,
+  CreateEmployeeButton,
+  AddIcon,
+  SearchField,
+  IdentityIcon,
+} from './styles';
+
+import InputAdornment from '@mui/material/InputAdornment';
+
+import { employeeStatus, accountStatus } from '../../../config/enums';
+
+import { employees } from './mockData';
+import { useState } from 'react';
+
+const EmployeesTable = () => {
+  let history = useHistory();
+  const [filteredEmployees, setFilteredEmployees] = useState(employees);
+  const [search, setSearch] = useState('');
+
+  const onRowClick = (id) => {
+    history.push(`/employees/${id}`);
+  };
+
+  const onAccountStatusClick = (event, id) => {
+    event.stopPropagation();
+    console.log(`Disable or activate user acc with id: ${id}`);
+  };
+
+  const onChangeSearch = (e) => {
+    let newSearchValue = e.target.value;
+    setSearch(newSearchValue);
+    const filteredData = employees.filter((employee) =>
+      employee.firstName
+        .concat(` ${employee.lastName}`)
+        .toLowerCase()
+        .includes(newSearchValue.trim().toLowerCase())
+    );
+
+    setFilteredEmployees(filteredData);
+  };
+
+  return (
+    <TableContainer>
+      <TableHeaderWrapper>
+        <TableTitle variant='h5'>Вработени</TableTitle>
+        <SearchField
+          value={search}
+          onChange={(e) => onChangeSearch(e)}
+          placeholder='Пребарај...'
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position='start'>
+                <IdentityIcon />
+              </InputAdornment>
+            ),
+          }}
+        />
+        <CreateEmployeeButton onClick={() => history.push('/employees/create')}>
+          <AddIcon />
+          Додади вработен
+        </CreateEmployeeButton>
+      </TableHeaderWrapper>
+      <Table aria-label='simple table'>
+        <TableHead>
+          <TableRow>
+            <TableCell align='left'>Емаил</TableCell>
+            <TableCell align='center'>Име и Презиме</TableCell>
+            <TableCell align='center'>Зона</TableCell>
+            <TableCell align='center'>Телефон</TableCell>
+            <TableCell align='center'>Статус</TableCell>
+            <TableCell align='center'>Акаунт</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {filteredEmployees.map((employeeData) => (
+            <TableRow
+              key={employeeData.id}
+              onClick={() => onRowClick(employeeData.id)}
+            >
+              <TableCell align='left'>{employeeData.email}</TableCell>
+              <TableCell align='center'>
+                {employeeData.firstName} {employeeData.lastName}
+              </TableCell>
+              <TableCell align='center'>{employeeData.zone}</TableCell>
+              <TableCell align='center'>{employeeData.phoneNumber}</TableCell>
+              <TableCell align='center'>
+                {employeeStatus[employeeData.status]}
+              </TableCell>
+              <ButtonTableCell align='center'>
+                <ToggleAccoutStatusButton
+                  onClick={(event) =>
+                    onAccountStatusClick(event, employeeData.id)
+                  }
+                  $enabled={employeeData.accountActive}
+                >
+                  {/* $ added because https://styled-components.com/docs/api#transient-props*/}
+                  {employeeData.accountActive
+                    ? accountStatus.enabled
+                    : accountStatus.disabled}
+                </ToggleAccoutStatusButton>
+              </ButtonTableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default EmployeesTable;
Index: sources/client/src/components/admin/EmployeesTable/mockData.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/mockData.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,57 @@
+export const employees = [
+    {
+        id: 1,
+        email: 'viktor-tasevski@hotmail.com',
+        password: '123',
+        firstName: 'Viktor',
+        lastName: 'Tasevski',
+        zone: 'zone1',
+        phoneNumber: '072500000',
+        status: 'vacation',
+        accountActive: true
+    },
+    {
+        id: 2,
+        email: 'andrejTav@gmail.com',
+        password: '123',
+        firstName: 'Andrej',
+        lastName: 'Tavcioski',
+        zone: 'zone2',
+        phoneNumber: '070350123',
+        status: 'working',
+        accountActive: true
+    },
+    {
+        id: 3,
+        email: 'david.trajkovski@yahoo.com',
+        password: '123',
+        firstName: 'David',
+        lastName: 'Trajkovski',
+        zone: 'zone3',
+        phoneNumber: '078123321',
+        status: 'working',
+        accountActive: true
+    },
+    {
+        id: 4,
+        email: 'poc@gmail.com',
+        password: '123',
+        firstName: 'Nekoj od',
+        lastName: 'POC',
+        zone: 'zone4',
+        phoneNumber: '223305',
+        status: 'notWorking',
+        accountActive: true
+    },
+    {
+        id: 5,
+        email: 'silbo@outlook.com',
+        password: '123',
+        firstName: 'Nekoj od',
+        lastName: 'Silbo',
+        zone: 'zone5',
+        phoneNumber: '071206205',
+        status: 'notWorking',
+        accountActive: false
+    }
+];
Index: sources/client/src/components/admin/EmployeesTable/styles.js
===================================================================
--- sources/client/src/components/admin/EmployeesTable/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/components/admin/EmployeesTable/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,148 @@
+import styled from 'styled-components';
+import T from '@mui/material/Table';
+import TH from '@mui/material/TableHead';
+import TContainer from '@mui/material/TableContainer';
+import TR from '@mui/material/TableRow';
+import TB from '@mui/material/TableBody';
+import TC from '@mui/material/TableCell';
+
+import Button from '@mui/material/Button';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+import TextField from '@mui/material/TextField';
+import PermIdentityIcon from '@mui/icons-material/PermIdentity';
+
+import Paper from '@mui/material/Paper';
+import { Typography } from '@mui/material';
+
+export const TableContainer = styled(TContainer).attrs({
+  component: Paper,
+})`
+  max-width: 1000px;
+  margin-top: 20px;
+  margin-left: 30px;
+  box-shadow: 15px 15px 10px ${(props) => props.theme.palette.background.shadow};
+`;
+
+export const TableHeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-content: center;
+  width: 100%;
+  border: 1px solid grey;
+  border-bottom: none;
+  padding: 10px 16px;
+  background-color: ${(props) => props.theme.palette.grey[400]};
+`;
+
+export const TableTitle = styled(Typography).attrs({
+  variant: 'h4',
+})`
+  font-size: 2rem;
+  font-weight: 600;
+`;
+
+export const CreateEmployeeButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  sx: {
+    backgroundColor: `${props.theme.palette.primary.main}`,
+  },
+}))`
+  padding-left: 11px;
+
+  :hover {
+    background-color: ${(props) => props.theme.palette.primary.dark};
+  }
+`;
+
+export const AddIcon = styled(AddCircleOutlineIcon)`
+  margin-right: 11px;
+`;
+
+export const Table = styled(T).attrs({})`
+  th,
+  td {
+    padding: 20px;
+    font-size: 1rem;
+  }
+`;
+
+export const IdentityIcon = styled(PermIdentityIcon).attrs((props) => ({
+  sx: {
+    color: `${props.theme.palette.primary.dark}`,
+  },
+}))``;
+
+export const TableHead = styled(TH).attrs({})`
+  tr {
+    background-color: ${(props) => `${props.theme.palette.grey[900]}`};
+    th {
+      color: white;
+    }
+  }
+`;
+
+export const TableRow = styled(TR).attrs({})``;
+
+export const TableBody = styled(TB).attrs({})`
+  tr:last-child td,
+  tr:last-child th {
+    border: none;
+  }
+
+  tr:nth-of-type(odd) {
+    background-color: ${(props) => `${props.theme.palette.grey[400]}`};
+    :hover {
+      cursor: pointer;
+      background-color: ${(props) => `${props.theme.palette.grey[500]}`};
+    }
+  }
+
+  tr:nth-of-type(even) {
+    background-color: ${(props) => `${props.theme.palette.grey[200]}`};
+    :hover {
+      cursor: pointer;
+      background-color: ${(props) => `${props.theme.palette.grey[300]}`};
+    }
+  }
+`;
+
+export const TableCell = styled(TC).attrs({})``;
+
+export const ButtonTableCell = styled(TC).attrs({
+  sx: {
+    padding: 0,
+  },
+})`
+  z-index: 100;
+`;
+
+export const ToggleAccoutStatusButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'medium',
+  sx: {
+    backgroundColor: props.$enabled
+      ? `${props.theme.palette.primary.main}`
+      : `${props.theme.palette.error.main}`,
+  },
+}))`
+  :hover {
+    background-color: ${(props) =>
+      props.$enabled
+        ? `${props.theme.palette.primary.light}`
+        : `${props.theme.palette.error.light}`};
+  }
+`;
+
+export const SearchField = styled(TextField).attrs({
+  variant: 'standard',
+})`
+  > div:before {
+    border-bottom: 1px solid ${(props) => props.theme.palette.primary.dark};
+  }
+  input {
+    color: ${(props) => props.theme.palette.primary.dark};
+    font-weight: 600;
+  }
+`;
