Index: sources/client/src/screens/AdminHomeScreen/index.js
===================================================================
--- sources/client/src/screens/AdminHomeScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/AdminHomeScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,125 @@
+import { Route, Switch, Redirect } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
+
+import {
+  Container,
+  Header,
+  TitleAndLogoWrapper,
+  LogoWrapper,
+  Logo,
+  HeaderTitle,
+  UserNameAndLogoutWrapper,
+  UserName,
+  LogoutIcon,
+  HeaderAndMainSectionWrapper,
+  SideMenu,
+  DashboardIcon,
+  SupervisorAccountIcon,
+  MainSection,
+  DividerUnderHeader,
+  UserIcon,
+} from './styles';
+
+import IconButton from '@mui/material/IconButton';
+
+import logo from '../../resources/logo_2_transparent_bg.jpg';
+import { roles } from '../../config/enums';
+import DestinationComponent from '../../utils/DestinationComponent';
+import onClickRouting from '../../utils/onClickRouting';
+
+import ParkingZones from '../../components/admin/ParkingZones';
+import EmployeesTable from '../../components/admin/EmployeesTable';
+import EmployeeEdit from '../../components/admin/EmployeeEdit';
+import EmployeeCreate from '../../components/admin/EmployeeCreate';
+import ParkingZone from '../../components/admin/ParkingZone';
+
+const ToParkingZones = new DestinationComponent('/', ParkingZones, true);
+const ToEmployeesTable = new DestinationComponent(
+  '/employees',
+  EmployeesTable,
+  true
+);
+const ToEmployeeCreate = new DestinationComponent(
+  '/employees/create',
+  EmployeeCreate,
+  true
+);
+const ToEmployeeEdit = new DestinationComponent(
+  '/employees/:employeeId',
+  EmployeeEdit,
+  true
+);
+const ToParkingZone = new DestinationComponent(
+  '/zone/:zone_id',
+  ParkingZone,
+  true
+);
+
+const adminRoutes = [
+  ToParkingZones,
+  ToEmployeesTable,
+  ToEmployeeCreate,
+  ToEmployeeEdit,
+  ToParkingZone,
+];
+
+const employeeRoutes = [ToParkingZones, ToParkingZone];
+
+const AdminHomeScreen = (props) => {
+  let history = useHistory();
+  const user = {
+    role: 'ROLE_ADMIN',
+  };
+
+  let routes = user.role === roles.admin ? adminRoutes : employeeRoutes;
+
+  return (
+    <Container>
+      <SideMenu>
+        <IconButton onClick={() => onClickRouting('/', history)}>
+          <DashboardIcon />
+        </IconButton>
+        {user.role === roles.admin ? (
+          <IconButton onClick={() => onClickRouting('/employees', history)}>
+            <SupervisorAccountIcon />
+          </IconButton>
+        ) : null}
+      </SideMenu>
+
+      <HeaderAndMainSectionWrapper>
+        <Header>
+          <TitleAndLogoWrapper>
+            <LogoWrapper>
+              <Logo src={logo} />
+            </LogoWrapper>
+            <HeaderTitle>Park Up</HeaderTitle>
+          </TitleAndLogoWrapper>
+
+          <UserNameAndLogoutWrapper>
+            <UserIcon />
+            <UserName>Viktor Tasevski</UserName>
+            <IconButton>
+              <LogoutIcon />
+            </IconButton>
+          </UserNameAndLogoutWrapper>
+        </Header>
+        <DividerUnderHeader />
+        <MainSection>
+          <Switch>
+            {routes?.map((route, index) => (
+              <Route
+                key={index}
+                path={route.path}
+                component={route.component}
+                exact={route.exact}
+              />
+            ))}
+            <Redirect to='/' />
+          </Switch>
+        </MainSection>
+      </HeaderAndMainSectionWrapper>
+    </Container>
+  );
+};
+
+export default AdminHomeScreen;
Index: sources/client/src/screens/AdminHomeScreen/styles.js
===================================================================
--- sources/client/src/screens/AdminHomeScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/AdminHomeScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,129 @@
+import styled from 'styled-components';
+import { Typography } from '@mui/material';
+import { Divider } from '@mui/material';
+
+import Logout from '@mui/icons-material/Logout';
+import Dashboard from '@mui/icons-material/Dashboard';
+import SupervisorAccount from '@mui/icons-material/SupervisorAccount';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  flex: 1;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px 30px;
+`;
+
+export const DividerUnderHeader = styled(Divider).attrs({
+  variant: 'middle',
+  sx: {
+    margin: '0 25px',
+    borderWidth: '2px',
+    borderBottomWidth: 'thin',
+  },
+})``;
+
+export const TitleAndLogoWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const HeaderTitle = styled(Typography).attrs({
+  variant: 'h1',
+  fontWeight: 600,
+})`
+  color: ${(props) => props.theme.palette.primary.main};
+  font-size: 2.5rem;
+  display: flex;
+`;
+
+export const Logo = styled.img`
+  width: 100%;
+  height: 100%;
+`;
+
+export const LogoWrapper = styled.div`
+  height: 100%;
+  width: 50px;
+`;
+
+export const UserNameAndLogoutWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const UserName = styled(Typography).attrs({
+  variant: 'h3',
+})`
+  margin-left: 10px;
+  margin-right: 20px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: ${(props) => props.theme.palette.primary.main};
+`;
+
+export const LogoutIcon = styled(Logout).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: `${props.theme.palette.error.light}`,
+  },
+}))``;
+
+export const HeaderAndMainSectionWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+`;
+
+export const SideMenu = styled.div`
+  flex-direction: column;
+  height: 100%;
+  width: 70px;
+  padding: 20px 10px 0 10px;
+  border-right: 1px solid grey;
+  background-color: ${(props) => props.theme.palette.primary.main};
+`;
+
+export const DashboardIcon = styled(Dashboard).attrs((props) => ({
+  sx: {
+    fontSize: 35,
+    color: props.theme.palette.background.white,
+  },
+}))`
+  margin-bottom: 15px;
+`;
+
+export const SupervisorAccountIcon = styled(SupervisorAccount).attrs(
+  (props) => ({
+    sx: {
+      fontSize: 35,
+      color: props.theme.palette.background.white,
+    },
+  })
+)``;
+
+export const UserIcon = styled(AccountCircleIcon).attrs((props) => ({
+  sx: {
+    fontSize: 30,
+    color: `${props.theme.palette.primary.main}`,
+  },
+}))``;
+
+export const MainSection = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 20px 0px;
+  display: flex;
+  flex-direction: column;
+`;
Index: sources/client/src/screens/LoginScreen/index.js
===================================================================
--- sources/client/src/screens/LoginScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/LoginScreen/index.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,25 @@
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { ScreenWrapper, LoginWrapper, Logo, LogoWrapper } from './styles';
+
+import logo from '../../resources/logo.jpg';
+import Login from '../../components/Login';
+
+const LoginScreen = () => {
+  return (
+    <ScreenWrapper>
+      <LoginWrapper>
+        <LogoWrapper>
+          <Logo src={logo} />
+        </LogoWrapper>
+        <Switch>
+          <Route exact path='/' component={Login} />
+          {/* <Route exact path='/login-guest' component={LoginGuest} /> */}
+          {/* <Route exact path='/register' component={Register} /> */}
+          <Redirect to='/' />
+        </Switch>
+      </LoginWrapper>
+    </ScreenWrapper>
+  );
+};
+
+export default LoginScreen;
Index: sources/client/src/screens/LoginScreen/styles.js
===================================================================
--- sources/client/src/screens/LoginScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
+++ sources/client/src/screens/LoginScreen/styles.js	(revision 3a58bd6bf544fa7b651adb99848f686e7fd5d273)
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import backgroundImage from '../../resources/login_background.jpg';
+
+export const ScreenWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+`;
+
+export const LoginWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 500px;
+  height: 100vh;
+  background-image: url(${backgroundImage});
+  position: relative;
+  border-radius: 10px;
+
+  @media (min-width: 450px) {
+    max-height: 750px;
+  }
+`;
+
+export const LogoWrapper = styled.div`
+  width: 100%;
+  height: 200px;
+  margin-bottom: 40px;
+`;
+
+export const Logo = styled.img`
+  width: 100%;
+  height: 100%;
+`;
