Index: sources/client/src/components/Auth/Login/index.js
===================================================================
--- sources/client/src/components/Auth/Login/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/Login/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,70 @@
+import { Link, useHistory } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useLogin from '../../../hooks/useLogin';
+
+import {
+  CredentialsWrapper,
+  DividerButtons,
+  DividerText,
+  Input,
+  LockIcon,
+  PersonIcon,
+  SignInButton,
+  ButtonsWrapper,
+  RegisterText,
+} from './styles';
+
+const Login = () => {
+  const { loginUser } = useLogin();
+  const { data, onFormChange } = useForm({
+    email: '',
+    password: '',
+  });
+  let history = useHistory();
+  const handleSignIn = () => {
+    loginUser({ email: data.email, password: data.password });
+  };
+  return (
+    <>
+      <CredentialsWrapper>
+        <Input
+          name='email'
+          placeholder='Емаил'
+          value={data.email}
+          onChange={onFormChange}
+          InputProps={{
+            startAdornment: <PersonIcon />,
+          }}
+        />
+        <Input
+          name='password'
+          value={data.password}
+          placeholder='Лозинка'
+          onChange={onFormChange}
+          InputProps={{
+            startAdornment: <LockIcon />,
+          }}
+          type='password'
+        />
+      </CredentialsWrapper>
+      <ButtonsWrapper>
+        <SignInButton onClick={handleSignIn}>НАЈАВА</SignInButton>
+        <DividerButtons>
+          <DividerText>ИЛИ</DividerText>
+        </DividerButtons>
+        <SignInButton onClick={() => history.push('/login-guest')}>
+          НАЈАВА КАКО ГОСТИН
+        </SignInButton>
+        {/* TODO Neka nosi do '/login-guest'*/}
+      </ButtonsWrapper>
+      <RegisterText>
+        {' '}
+        {/* TODO Neka nosi do '/register' */}
+        Немате Профил?
+        <Link to='/register'>Регистрирај се!</Link>
+      </RegisterText>
+    </>
+  );
+};
+
+export default Login;
Index: sources/client/src/components/Auth/Login/styles.js
===================================================================
--- sources/client/src/components/Auth/Login/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/Login/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,110 @@
+import { Button } from '@mui/material';
+import Divider from '@mui/material/Divider';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import LIcon from '@mui/icons-material/Lock';
+import styled from 'styled-components';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '25px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      opacity: 0.6;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  padding: 30px 0px;
+`;
+export const SignInButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const DividerButtons = styled(Divider).attrs({
+  sx: {},
+})`
+  align-items: center;
+  // margin-bottom: 15px;
+  ::before,
+  ::after {
+    border-top: 2px solid white;
+  }
+`;
+
+export const DividerText = styled.p`
+  color: white;
+`;
+
+export const RegisterText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/LoginGuest/index.js
===================================================================
--- sources/client/src/components/Auth/LoginGuest/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/LoginGuest/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useLoginGuest from '../../../hooks/useLoginGuest';
+
+import {
+  CredentialsWrapper,
+  Input,
+  PersonIcon,
+  PhoneIcon,
+  CarIcon,
+  SignInButton,
+  LoginText,
+} from './styles';
+
+const LoginGuest = () => {
+  const {loginGuest} = useLoginGuest();
+  const { data, onFormChange } = useForm({
+    mobile: '',
+    email: '',
+    plate: '',
+  });
+  return (
+      <>
+          <CredentialsWrapper>
+              <Input
+                  name='mobile'
+                  placeholder='Телефонски број'
+                  value={data.mobile}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PhoneIcon />,
+                  }}
+              />
+              <Input
+                  name='email'
+                  placeholder='Емаил адреса'
+                  value={data.email}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PersonIcon />,
+                  }}
+              />
+              <Input
+                  name='plate'
+                  placeholder='Таблица...SK-8190-AV'
+                  value={data.plate}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <CarIcon />,
+                  }}
+              />
+          </CredentialsWrapper>
+          <SignInButton onClick={() => loginGuest({ credentials: data })}>
+              НАЈАВА КАКО ГОСТИН
+          </SignInButton>
+          <LoginText>
+              Имате Профил? <Link to='/login'>Најавете се!</Link>
+          </LoginText>
+      </>
+  );
+};
+
+export default LoginGuest;
Index: sources/client/src/components/Auth/LoginGuest/styles.js
===================================================================
--- sources/client/src/components/Auth/LoginGuest/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/LoginGuest/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,98 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhIcon from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '25px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      color: white;
+      opacity: 0.6;
+    }
+  }
+
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const CarIcon = styled(DirectionsCarIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const SignInButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  margin-top: 50px;
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const LoginText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/Register/index.js
===================================================================
--- sources/client/src/components/Auth/Register/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/Register/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import useForm from '../../../hooks/useForm';
+import useRegisterUser from '../../../hooks/useRegisterUser';
+import {
+  CredentialsWrapper,
+  Input,
+  LockIcon,
+  PersonIcon,
+  PhoneIcon,
+  RegisterButton,
+  FullNameWrapper,
+  LoginText,
+} from './styles';
+
+const Register = () => {
+  const { registerUser } = useRegisterUser();
+  const { data, onFormChange } = useForm({
+    firstName: '',
+    lastName: '',
+    email: '',
+    mobile: '',
+    password: '',
+  });
+  return (
+      <>
+          <CredentialsWrapper>
+              <FullNameWrapper>
+                  <Input
+                      name='firstName'
+                      placeholder='Име'
+                      style={{
+                          width: '49%',
+                      }}
+                      value={data.firstName}
+                      onChange={onFormChange}
+                  />
+                  <Input
+                      name='lastName'
+                      placeholder='Презиме'
+                      style={{
+                          width: '49%',
+                      }}
+                      value={data.lastName}
+                      onChange={onFormChange}
+                  />
+              </FullNameWrapper>
+              <Input
+                  name='mobile'
+                  placeholder='Телефонски број'
+                  value={data.mobile}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PhoneIcon />,
+                  }}
+              />
+              <Input
+                  name='email'
+                  placeholder='Емаил адреса'
+                  value={data.email}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <PersonIcon />,
+                  }}
+              />
+              <Input
+                  name='password'
+                  placeholder='Лозинка'
+                  value={data.password}
+                  onChange={onFormChange}
+                  InputProps={{
+                      startAdornment: <LockIcon />,
+                  }}
+                  type='password'
+              />
+          </CredentialsWrapper>
+          <RegisterButton onClick={() => registerUser(data)}>
+              Регистрирај се
+          </RegisterButton>
+          <LoginText>
+              Имате Профил? <Link to='/login'>Најавете се!</Link>
+          </LoginText>
+      </>
+  );
+};
+
+export default Register;
Index: sources/client/src/components/Auth/Register/styles.js
===================================================================
--- sources/client/src/components/Auth/Register/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/Register/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import { Button } from '@mui/material';
+import PhIcon from '@mui/icons-material/Phone';
+import TextField from '@mui/material/TextField';
+import PIcon from '@mui/icons-material/Person';
+import LIcon from '@mui/icons-material/Lock';
+
+export const CredentialsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 25px 15px 25px;
+`;
+
+export const Input = styled(TextField).attrs({
+  fullWidth: true,
+  sx: {
+    marginTop: '20px',
+  },
+})`
+  > div {
+    padding-left: 10px;
+  }
+  input {
+    color: white;
+    font-size: 1.2rem;
+    padding-left: 10px;
+
+    ::placeholder {
+      opacity: 0.6;
+    }
+  }
+  fieldset {
+    border: 0;
+    border-bottom: 4px solid white;
+    border-radius: 25px;
+    padding: 0 10px;
+  }
+`;
+
+export const LockIcon = styled(LIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PersonIcon = styled(PIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const PhoneIcon = styled(PhIcon).attrs({
+  sx: {
+    fontSize: '2rem',
+    color: 'white',
+  },
+})``;
+
+export const RegisterButton = styled(Button).attrs((props) => ({
+  variant: 'contained',
+  size: 'large',
+  width: '50%',
+  sx: {
+    width: '70%',
+    backgroundColor: 'white',
+  },
+}))`
+  margin-top: 30px;
+  box-shadow: 5px 5px 10px ${(props) => props.theme.palette.background.shadow};
+  align-self: center;
+  color: ${(props) => props.theme.palette.primary.main};
+  border-radius: 15px;
+  font-weight: 600;
+  :hover {
+    background-color: ${(props) => props.theme.palette.background.whiteSmoke};
+  }
+`;
+
+export const FullNameWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const LoginText = styled.p`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: white;
+
+  a {
+    margin-left: 10px;
+    text-decoration: none;
+    color: ${(props) => props.theme.palette.third.main};
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+`;
Index: sources/client/src/components/Auth/index.js
===================================================================
--- sources/client/src/components/Auth/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/index.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,23 @@
+import { Switch, Route, Redirect } from 'react-router-dom';
+import { AuthWrapper } from './styles';
+
+import Login from './Login';
+import LoginGuest from './LoginGuest';
+import Register from './Register';
+import MapUsers from '../user/MapUsers';
+
+const Auth = () => {
+    return (
+        <AuthWrapper>
+            <Switch>
+                <Route exact path='/login' component={Login} />
+                <Route exact path='/login-guest' component={LoginGuest} />
+                <Route exact path='/register' component={Register} />
+                <Route exact path={'/'} component={MapUsers} />
+                <Redirect to='/' />
+            </Switch>
+        </AuthWrapper>
+    );
+};
+
+export default Auth;
Index: sources/client/src/components/Auth/styles.js
===================================================================
--- sources/client/src/components/Auth/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
+++ sources/client/src/components/Auth/styles.js	(revision bc20307a9fafa202ad52835e03582454a2a4242d)
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import backgroundImage from '../../resources/login_background.jpg';
+import { mobile_max_width } from '../../config/utilities';
+
+export const AuthWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 500px;
+  // background-image: url(${backgroundImage});
+  border-radius: 10px;
+  // height: calc(100vh - 266px);
+  @media (min-width: ${mobile_max_width}px) {
+    max-height: 750px;
+  }
+`;
