Index: phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,42 @@
+.cheaperoffers-modal-box{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 24;
+    background-color: white;
+    width: fit-content;
+    height: 500px;
+    overflow: scroll;
+}
+
+.cheaperoffers-table{
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.cheaperoffers-table-head{
+    background-color: #a6c9ab;
+    font-size: 18px;
+    width: 100%;
+}
+
+.cheaperoffers-table-head th{
+    background-color: #a6c9ab;
+}
+
+.cheaperoffers-table-row{
+    width: 100%;
+} 
+
+.cheaperoffers-table-row td{
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.cheaperoffers-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+
+
Index: phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import "./CheaperOffersComponent.css"
+import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent';
+import { Link } from 'react-router-dom';
+
+
+export class CheaperOffersComponent extends Component {
+constructor(props) {
+  super(props)
+
+  this.state = {
+
+  }
+}
+
+  render() {
+
+    return (
+        <div>
+        <Modal 
+          open={this.props.openModal}
+          onClose={this.props.handleClose}
+          aria-labelledby="cheaperoffers-modal-title"
+          aria-describedby="cheaperoffers-modal-description"
+        >
+          <Box className='cheaperoffers-modal-box'>
+          <table cellPadding={20} className='cheaperoffers-table'>
+            <thead className='cheaperoffers-table-head'>
+              <tr>
+              <th>Продавница</th>
+              <th>Име на понуда</th>
+              <th>Цена</th>
+              <th>Поевтина за</th>
+              <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.props.cheaperOffers.map((offer,idx) => 
+                <tr key={idx} className='cheaperoffers-table-row'>
+                  <td>{offer.offer_shop}</td>
+                  <td><a href={offer.offer_url}>{offer.offer_name}</a></td>
+                  <td>{offer.price} ден.</td>
+                  <td><b>{this.props.openedOfferPrice-offer.price} ден.</b></td>
+                  <td>
+                    <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+offer.id}>
+                      <button className='phone-offer-specifications-button'>Спецификации</button>
+                    </Link>
+                  </td>
+                </tr>
+                ) 
+              }
+            </tbody>
+          </table>
+          </Box>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default CheaperOffersComponent
+
+
Index: phonelux-frontend/src/components/DataManager.js
===================================================================
--- phonelux-frontend/src/components/DataManager.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import React from 'react'
-
-class DataManager{
-
-    filters = null;
-
-    setFilters = (filters) => {
-        this.filters = filters
-    }
-
-
-}
-
-
-const Data = new DataManager();
-
-export default Data;
Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,69 @@
+.edit-offer-table th{
+    text-align: center;
+    font-size: 38px;
+    padding: 20px;
+}
+
+.edit-offer-component-main{
+    width: 100%;
+}
+
+.edit-offer-table thead tr{
+    background-color: #a6c9ab;
+}
+
+.edit-offer-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.edit-offer-table-row{
+    border: 1px solid gainsboro;
+}
+
+.edit-offer-table{
+    border-collapse: collapse;
+    width: 80%;
+    table-layout: fixed;
+}
+
+.edit-offer-table-row td{
+    text-align: center;
+    word-wrap: break-word;
+    font-size: 22px;
+    padding: 20px;
+}
+
+.edit-offer-table-wrapper{
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+    margin-bottom: 50px;
+}
+
+.edit-offer-textarea{
+    max-width: 100%;
+    min-width: 100%;
+    font-size: 22px;
+}
+
+.edit-offer-price-input{
+    width: 20%;
+    font-size: 22px;
+    background-color: rgb(238, 240, 238);
+    border: 1px solid black;
+    text-align: center;
+
+}
+
+.edit-offer-price-span{
+    margin-left: 10px;
+}
+
+.edit-offer-table-textarea{
+    max-width: 100%;
+    min-width: 100%;
+    max-height: 100px;
+    min-height: 100px;
+    background-color: rgb(230, 232, 230);
+    font-size: 22px;
+}
Index: phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/EditOfferComponent/EditOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,113 @@
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import './EditOfferComponent.css'
+
+export class EditOfferComponent extends Component {
+
+    constructor(props) {
+      super(props)
+      this.state = {
+         offerId: window.location.href.split('/')[5],
+         offer: {}
+      }
+    }
+
+    componentDidMount(){
+        var config = {
+            method: 'get',
+            url: '/phoneoffer/'+this.state.offerId,
+            headers: { }
+          };
+          
+          axios(config)
+          .then(response => {
+            this.setState({
+                offer: response.data
+            })
+          })
+          .catch(error => {
+            console.log(error);
+          });
+          
+    }
+    
+  render() {
+    return (
+      <div className='edit-offer-component-main'>
+        <HeaderComponent/>
+        <div className='edit-offer-table-wrapper'>
+            <table className='edit-offer-table'>
+                <thead>
+                    <tr><th colSpan={2}>Измени детали за понудата</th></tr>
+                </thead>
+                <tbody>
+                    <tr className='edit-offer-table-row'>
+                        <td>Име на понуда</td>
+                        <td><a href={this.state.offer == null || this.state.offer.offer_url == null ? 
+              '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 
+              '/' : this.state.offer.offer_name}</a></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Продавница</td>
+                        <td>{this.state.offer == null || 
+              this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Цена</td>
+                        <td><input value={this.state.offer == null || 
+              this.state.offer.price == null ? '/' : this.state.offer.price} className='edit-offer-price-input'/><span className='edit-offer-price-span'>ден.</span></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Предна камера</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Задна камера</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>РОМ меморија</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>РАМ меморија</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Оперативен систем</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Чипсет</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Процесор</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Батерија</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Боја</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                    <tr className='edit-offer-table-row'>
+                        <td>Опис</td>
+                        <td><textarea className='edit-offer-table-textarea'></textarea></td>
+                    </tr>
+                </tbody>
+            </table>
+
+        </div>
+
+
+      </div>
+      
+    )
+  }
+}
+
+export default EditOfferComponent
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -7,9 +7,9 @@
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import InputBase from '@mui/material/InputBase';
 import Badge from '@mui/material/Badge';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 import MenuIcon from '@mui/icons-material/Menu';
+import InputBase from '@mui/material/InputBase';
 import SearchIcon from '@mui/icons-material/Search';
 import AccountCircle from '@mui/icons-material/AccountCircle';
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -9,4 +9,5 @@
     height: 200px;
     margin-top: -65px;
+    cursor: pointer;
 }
 
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -6,4 +6,9 @@
 
 export default class HeaderComponent extends Component {
+
+
+  redirectToHomepage = () =>{
+    window.location.href = "/"
+  }
   render() {
     return (
@@ -13,7 +18,7 @@
       </div>
       <div className='header-component'>
-          <Link style={{ textDecoration: 'none' }} to={"/"}>
-        <img src={logo}></img>
-        </Link>
+          {/* <Link style={{ textDecoration: 'none' }} to={"/"}> */}
+        <img className='phonelux-logo' onClick={this.redirectToHomepage} src={logo}></img>
+        {/* </Link> */}
       </div>
       </>
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -1,3 +1,4 @@
 import React, { Component } from 'react'
+import UserContext from '../context/UserContext'
 import GroupedFiltersComponent from './GroupedFiltersComponent/GroupedFiltersComponent'
 import HeaderComponent from './HeaderComponent/HeaderComponent'
@@ -49,5 +50,5 @@
 
   }
-
+  
   if(e.hasOwnProperty('sortBy'))
   {
@@ -60,4 +61,6 @@
 
   render() {
+    console.log(this.context)
+    console.log(localStorage.getItem('token'))
     return (
         <>
@@ -70,3 +73,6 @@
 }
 
+HomepageComponent.contextType = UserContext
+
+
 export default HomepageComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -6,6 +6,4 @@
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-
-
 
 export class LoginFormComponent extends Component {
@@ -44,6 +42,8 @@
       axios(config)
       .then((response) => {
+        const {access_token} = response.data
        // store access token in local storage, redirect to homepage
-       console.log(response.data)
+      localStorage.setItem('token', access_token)
+      window.location.href="/"
       })
       .catch((error) => {
@@ -64,6 +64,4 @@
 
 render() {
-
-  const {email,password} = this.state
 
   return (
@@ -108,3 +106,4 @@
 }
 
+
 export default LoginFormComponent
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -9,8 +9,23 @@
 }
 
+.navbar-logout-box-icon{
+    font-size: 40px;
+    margin-top: 10px;
+}
+
 .navbar-account-box-icon:hover{
     cursor: pointer;
 }
 
+.navbar-logout-box-icon:hover{
+    cursor: pointer;
+}
 
-/* style={{ fontSize: '50px', marginTop: '10px' }} */
+.navbar-favouriteoffers-icon:hover{
+    cursor: pointer;
+}
+
+.navbar-superadmin-icon:hover{
+    cursor: pointer;
+}
+
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -8,4 +8,7 @@
 import PersonIcon from '@mui/icons-material/Person';
 import LogoutIcon from '@mui/icons-material/Logout';
+import StarsIcon from '@mui/icons-material/Stars';
+import UserContext from '../../context/UserContext';
+import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
 
 export class NavbarComponent extends Component {
@@ -15,6 +18,11 @@
     
       this.state = {
-         profileSectionOpen: false
+        
       }
+    }
+
+    logOut = () => {
+      localStorage.clear()
+      window.location.href = "/"
     }
     
@@ -22,9 +30,31 @@
     return (
       <div className='phonelux-navbar'>
+         {
+          localStorage.getItem('token') && this.context.role == 'SUPERADMIN' ? 
+          <Tippy placement='bottom' content='Менаџмент со корисници'>
+            <Link style={{color: 'black'}} to={"/management/users"}>
+              <SupervisorAccountIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-superadmin-icon'/>
+            </Link>
+          </Tippy> : <></>
+        }
+        {
+          localStorage.getItem('token') ? 
+          <Tippy placement='bottom' content='Омилени понуди'>
+            <Link style={{color: 'black'}} to={"/user/"+this.context.userId+"/favouriteoffers"}>
+              <StarsIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-favouriteoffers-icon'/>
+            </Link>
+          </Tippy> : <></>
+        }
+
+        { localStorage.getItem('token') ?
+        <Tippy placement='bottom' content='Одјави се'>
+        <LogoutIcon onClick={this.logOut} style={{fontSize: '40px', marginTop: '10px' }} className='navbar-logout-box-icon'/>
+        </Tippy> 
+        : 
         <Tippy placement='bottom' content='Најави се'>
         <Link style={{color: 'black'}} to={"/login"}> <PersonIcon  style={{fontSize: '50px', marginTop: '10px' }} className='navbar-account-box-icon'/></Link>
         </Tippy>
+        }
 
-        {/* favourite offers icon goes here */}
 
       </div>
@@ -33,3 +63,5 @@
 }
 
+NavbarComponent.contextType = UserContext
+
 export default NavbarComponent
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -27,2 +27,10 @@
     transition: box-shadow 0.5s, background-color 0.5s ;
 }
+
+.phone-offer-favouriteoffer-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-cheaperoffers-icon{
+    cursor: pointer;
+}
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -2,4 +2,11 @@
 import { Link } from 'react-router-dom'
 import './PhoneOfferComponent.css'
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import StarIcon from '@mui/icons-material/Star';
+import Tippy from '@tippyjs/react';
+import axios from 'axios';
+import UserContext from '../../context/UserContext';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CheckIcon from '@mui/icons-material/Check';
 
 export class PhoneOfferComponent extends Component {
@@ -12,8 +19,60 @@
       }
     }
+
+    addToFavourite = () => {
+      var config = {
+        method: 'put',
+        url: '/user/'+this.context.userId+'/addoffer/'+this.props.id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+
+      axios(config)
+      .then(response => {
+        this.props.getFavouriteOffersForLoggedUser()
+      })
+      .catch(error => {
+        console.log(error)
+      })
+    }
+
+    removeFromFavourite = () => {
+      var config = {
+        method: 'put',
+        url: '/user/'+this.context.userId+'/removeoffer/'+this.props.id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+
+      axios(config)
+      .then(response => {
+        this.props.getFavouriteOffersForLoggedUser()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+
+    getCheaperOffers = () =>{
+      var config = {
+        method: 'get',
+        url: '/phoneoffer/'+this.props.id+'/cheaperoffers',
+        headers: { }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.props.handleOpen(response.data,this.props.price)
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
     
     
   render() {
-    // console.log(this.props)
     return (
       <tr className='phone-with-offers-table-row'>
@@ -22,4 +81,27 @@
       <td>{this.props.price} ден.</td>
       <td>
+        {
+          window.location.href.split('/')[5] == 'favouriteoffers' ?   
+          <Tippy placement='bottom' content='Прикажи поевтини понуди'>
+            <VisibilityIcon onClick={this.getCheaperOffers} className='phone-offer-cheaperoffers-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy> : <></>
+        }
+        {
+          localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length == 0? 
+          <Tippy placement='bottom' content='Додади во омилени понуди'>
+          <StarBorderIcon onClick={this.addToFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          : <></>
+        }
+
+        {
+          localStorage.getItem('token') && this.props.loggedUserFavouriteOffers.filter(offer => offer.id == this.props.id).length != 0? 
+          <Tippy placement='bottom' content='Избриши од омилени понуди'>
+          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          : <></>
+        }
+
+
         <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
           <button className='phone-offer-specifications-button'>Спецификации</button>
@@ -31,4 +113,5 @@
 }
 
+PhoneOfferComponent.contextType = UserContext
 export default PhoneOfferComponent
 
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -19,5 +19,4 @@
 .phone-offer-details-table-row{
     border: 1px solid gainsboro;
-
 }
 
@@ -67,5 +66,32 @@
 .phone-offer-details-last-updated-wrapper{
     display: flex;
+    width: 100%;
     justify-content: start;
+    align-items: center;
+}
+
+.phone-offer-details-edit-header{
+    width: 100%;
+    margin-left: 20px;
+    padding-top: 10px;
+    border: 1px solid black;
+    background-color:  rgb(232, 243, 121);
+    border-radius: 30px;
+    text-align: center; 
+    padding: 10px;
+}
+
+.phone-offer-details-edit-header:hover{
+    cursor: pointer;
+    background-color: rgb(212, 219, 140);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;    
+}
+
+.link-offer-edit{
+    width: 15%;
+    height: fit-content;
+    text-decoration: none;
+    display: flex;
 }
 
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -3,4 +3,6 @@
 import './PhoneOfferDetailsComponent.css'
 import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import UserContext from '../../context/UserContext'
+import { Link } from 'react-router-dom'
 
 
@@ -26,5 +28,4 @@
 
   render() {
-    console.log(this.state)
     return (
       <div className='phone-offer-details-main'>
@@ -33,4 +34,10 @@
           <h3 className='phone-offer-details-last-updated-header'>Последно ажурирана: {this.state.offer == null || 
           this.state.offer.last_updated == null ? '#' : this.state.offer.last_updated.split('T')[0]}</h3>
+          {
+            localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
+            <Link className='link-offer-edit' style={{color:'black'}} to={'/admin/editoffer/'+this.state.offerId}>
+              <h3 className='phone-offer-details-edit-header'>Измени понуда</h3>
+              </Link> : <></>
+          }
         </div>
         <div className='phone-offer-details-table-wrapper'>
@@ -116,3 +123,5 @@
 }
 
+PhoneOfferDetailsComponent.contextType = UserContext
+
 export default PhoneOfferDetailsComponent
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -69,2 +69,4 @@
     border-radius: 50px;
 }
+
+
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -5,4 +5,6 @@
 import './PhoneWithOffersComponent.css'
 import phoneImg from '../../images/phone.png'
+import UserContext from '../../context/UserContext'
+
 
 export class PhoneWithOffersComponent extends Component {
@@ -12,5 +14,6 @@
     
       this.state = {
-         phone_offers: []
+         phone_offers: [],
+         loggedUserFavouriteOffers: []
       }
     }
@@ -21,6 +24,29 @@
           this.setState({
               phone_offers: response.data
+          }, this.getFavouriteOffersForLoggedUser)
+      }).catch(error => console.log(error))
+    }
+
+    getFavouriteOffersForLoggedUser = () => {
+      if(localStorage.getItem('token'))
+      {
+        var config = {
+          method: 'get',
+          url: '/user/'+this.context.userId+'/favouriteoffers',
+          headers: { 
+            'Authorization': 'Bearer '+localStorage.getItem('token')
+          }
+        };
+        
+        axios(config)
+        .then(response => {
+          this.setState({
+            loggedUserFavouriteOffers: response.data
           })
-      }).catch(error => console.log(error))
+        })
+        .catch(error => {
+          console.log(error);
+        });
+      }
     }
 
@@ -60,5 +86,6 @@
                 this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
                 is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
-                price={offer.price} offer_url={offer.offer_url}
+                price={offer.price} offer_url={offer.offer_url} loggedUserFavouriteOffers={this.state.loggedUserFavouriteOffers}
+                getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
                 />) 
               }
@@ -73,3 +100,5 @@
 }
 
+PhoneWithOffersComponent.contextType = UserContext
+
 export default PhoneWithOffersComponent
Index: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css
===================================================================
--- phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,56 @@
+.superadmin-section-header{
+    background-color: #B6E2C8;
+    justify-content: center;
+    align-content: center;
+    margin-top: -30px;
+    width: 100%;
+    display: flex;
+    font-size: 18px;
+}
+.superadmin-section-header-text{
+    width: fit-content;
+}
+
+.superadmin-section-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.superadmin-section-table{
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.superadmin-section-table-row{
+    border: 1px solid gainsboro;
+    padding: 20px ;
+    font-size: 18px;
+}
+
+.superadmin-section-table td{
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.superadmin-section-table-head{
+    background-color: #a6c9ab;
+    font-size: 22px;
+}
+
+.superadmin-section-table-head th{
+    word-wrap: break-word;
+    width: 100%;
+}
+.search-user-field{
+    /* display: flex;
+    height: fit-content;
+    border-radius: 20px; */
+    border: 1px solid rgb(131, 125, 125);
+    width: 100%;
+}
+
+.search-user-input{
+margin:5px;
+width: 100%;
+}
+
Index: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js
===================================================================
--- phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,201 @@
+import { Pagination } from '@mui/material'
+import { styled, alpha } from '@mui/material/styles';
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import UserComponent from '../UserComponent/UserComponent'
+import "./SuperAdminComponent.css"
+import SearchIcon from '@mui/icons-material/Search';
+import InputBase from '@mui/material/InputBase';
+
+
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.white, 0.15),
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.common.white, 0.25),
+  },
+  marginRight: theme.spacing(2),
+  marginLeft: 0,
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    marginLeft: theme.spacing(3),
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: '20ch',
+    },
+  },
+}));
+
+
+export class SuperAdminComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         users: [],
+         currentUsers: [],
+         usersPerPage:10,
+         numberOfPages: 0,
+         currentPage: 1,
+        //  numberOfUsers: 0,
+        //  numberOfAdmins: 0
+      }
+    }
+
+    componentDidMount(){
+      this.getUsers()
+    }
+
+    addAdmin = (id) => {
+      var config = {
+        method: 'put',
+        url: '/management/addadmin/'+id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getUsers()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+
+    }
+
+    removeAdmin = (id) => {
+      var config = {
+        method: 'put',
+        url: '/management/removeadmin/'+id,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.getUsers()
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+    getUsers = (filter) =>{
+      let queryParams = '?'
+      if(filter)
+      {
+        queryParams+='searchValue='+filter
+      }
+      var config = {
+        method: 'get',
+        url: '/management/users'+queryParams,
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+      
+      axios(config)
+      .then(response => {
+        this.setState({
+          users: response.data,
+          // numberOfUsers: response.data.filter(user => user.userRole == 'USER').length,
+          // numberOfAdmins: response.data.filter(user => user.userRole == 'ADMIN').length,
+          numberOfPages: Math.ceil(response.data.length / this.state.usersPerPage)
+        },(e) => this.setNewPage(e,this.state.currentPage))
+      })
+      .catch(error => {
+        console.log(error);
+      });
+    }
+
+    setNewPage = (event,page) => {
+
+      const indexOfLastUser = parseInt(page) * this.state.usersPerPage;
+      const indexOfFirstUser = indexOfLastUser - this.state.usersPerPage;
+  
+      const currUsers = this.state.users.slice(indexOfFirstUser, indexOfLastUser)
+  
+      this.setState({
+        currentPage: parseInt(page),
+        currentUsers: currUsers
+      })
+  
+    }
+    
+  render() {
+    return (
+      <div className='superadmin-section-main'>
+        <HeaderComponent/>
+        <div className='superadmin-section-header'>
+          <h1 className='superadmin-section-header-text'>
+            Менаџмент со корисници
+          </h1>
+        </div>
+        <div className='superadmin-users-section'>
+
+          <table cellPadding={20} className='superadmin-section-table'>
+            <thead className='superadmin-section-table-head'>
+              <tr>
+              <th>Име</th>
+              <th>Презиме</th>
+              <th>Е-маил адреса</th>
+              <th>Привилегии</th>
+              <th>
+              <Search onChange={(event) => this.getUsers(event.target.value)} className="search-user-field">
+                <SearchIconWrapper id="search-user-iconwrapper">
+                  <SearchIcon />
+                </SearchIconWrapper>
+                <StyledInputBase
+                  className="search-user-input"
+                  placeholder="Пребарувај…"
+                  inputProps={{ 'aria-label': 'search' }}/>  
+              </Search>
+              </th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.currentUsers.map((user,idx) => <UserComponent key={idx} id={user.id} firstname={user.firstName} 
+                lastname={user.lastName} email={user.email} role={user.userRole} addAdmin={this.addAdmin} removeAdmin={this.removeAdmin}/>) 
+              }
+            </tbody>
+          </table>
+
+        </div>
+        <div className='pagination-wrapper'>
+         <Pagination className='superadmin-users-pagination' onChange={this.setNewPage} page={this.state.currentPage}
+          count={this.state.numberOfPages} color="primary" />
+      </div>
+      </div>
+    )
+  }
+}
+
+export default SuperAdminComponent
Index: phonelux-frontend/src/components/UserComponent/UserComponent.css
===================================================================
--- phonelux-frontend/src/components/UserComponent/UserComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/UserComponent/UserComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,29 @@
+.superadmin-addadmin-button{
+    font-size: 15px;
+    background-color: #B6E2C8;
+    width: 100%;
+    border-radius: 20px;
+    border: 1px solid black;
+}
+
+.superadmin-addadmin-button:hover{
+    cursor: pointer;
+    background-color: rgb(166, 201, 171);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
+
+.superadmin-removeadmin-button{    
+    font-size: 15px;
+    width: 100%;
+    border-radius: 20px;
+    border: 2px solid red;
+    background-color: rgb(243, 203, 203);
+}
+
+.superadmin-removeadmin-button:hover{
+    cursor: pointer;
+    background-color: rgb(228, 179, 179);
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    transition: box-shadow 0.5s, background-color 0.5s ;
+}
Index: phonelux-frontend/src/components/UserComponent/UserComponent.js
===================================================================
--- phonelux-frontend/src/components/UserComponent/UserComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/UserComponent/UserComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import './UserComponent.css'
+
+export class UserComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         
+      }
+    }
+
+    
+  render() {
+    return (
+      <tr className='superadmin-section-table-row'>
+        <td>{this.props.firstname}</td>
+        <td>{this.props.lastname}</td>
+        <td>{this.props.email}</td>
+        <td>{this.props.role == 'USER' ? 'Регистриран корисник' : 'Администратор'}</td>
+        <td>{
+        this.props.role == 'USER' ? 
+        <button onClick={() => this.props.addAdmin(this.props.id)} className='superadmin-addadmin-button'>
+          Додај админ привилегии
+        </button> :
+         <button onClick={() => this.props.removeAdmin(this.props.id)} className='superadmin-removeadmin-button'>
+          Одземи админ привилегии
+         </button>
+      }</td>
+      </tr>
+    )
+  }
+}
+
+export default UserComponent
Index: phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,13 @@
+.user-favourite-offers-header{
+    background-color: #B6E2C8;
+    justify-content: center;
+    align-content: center;
+    margin-top: -30px;
+    width: 100%;
+    display: flex;
+    font-size: 18px;
+}
+.user-favourite-offers-header-text{
+    width: fit-content;
+}
+
Index: phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/UserFavouriteOffersComponent/UserFavouriteOffersComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
@@ -0,0 +1,105 @@
+import axios from 'axios'
+import React, { Component } from 'react'
+import UserContext from '../../context/UserContext'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+import "./UserFavouriteOffersComponent.css"
+import StarIcon from '@mui/icons-material/Star';
+import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
+import CheaperOffersComponent from '../CheaperOffersComponent/CheaperOffersComponent'
+
+export class UserFavouriteOffersComponent extends Component {
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         userFavouriteOffers: [],
+         openModal : false,
+         cheaperOffers: [],
+         openedOfferPrice: 0,
+      }
+    }
+
+    componentDidMount(){
+      this.getFavouriteOffersForLoggedUser()
+    }
+
+    getFavouriteOffersForLoggedUser = () => {
+      var config = {
+        method: 'get',
+        url: '/user/'+this.context.userId+'/favouriteoffers',
+        headers: { 
+          'Authorization': 'Bearer '+localStorage.getItem('token')
+        }
+      };
+
+      axios(config)
+      .then(response => {
+        this.setState({
+          userFavouriteOffers: response.data
+        })
+      })
+      .catch(error => {
+        console.log(error)
+      })
+    }
+
+    handleClose = () =>{
+      this.setState({
+        openModal: false
+      })
+    }
+
+    handleOpen = (cheaperOffersToShow,offer_price) =>{
+      this.setState({
+        openModal: true,
+        cheaperOffers: cheaperOffersToShow,
+        openedOfferPrice: offer_price
+      })
+    }
+    
+  render() {
+  
+
+    return (
+      <div className='user-favourite-offers-main'>
+        <HeaderComponent/>
+        <div className='user-favourite-offers-header'>
+          <StarIcon style={{fontSize: '50px', marginTop: '20px', marginRight: '10px'}}/>
+          <h1 className='user-favourite-offers-header-text'>
+            Омилени понуди
+          </h1>
+          <StarIcon style={{fontSize: '50px', marginTop: '20px', marginLeft: '10px'}}/>
+          </div>
+          <table cellPadding={20} className='phone-with-offers-table'>
+            <thead className='phone-with-offers-table-head'>
+              <tr>
+              <th>Продавница</th>
+              <th>Име на понуда</th>
+              <th>Цена</th>
+              <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.userFavouriteOffers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
+                is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
+                price={offer.price} offer_url={offer.offer_url} handleOpen={this.handleOpen} 
+                loggedUserFavouriteOffers={this.state.userFavouriteOffers}
+                getFavouriteOffersForLoggedUser={this.getFavouriteOffersForLoggedUser}
+                />) 
+              }
+            </tbody>
+          </table>
+          <CheaperOffersComponent
+           cheaperOffers={this.state.cheaperOffers} 
+          openModal={this.state.openModal} 
+          handleClose={this.handleClose}
+          openedOfferPrice={this.state.openedOfferPrice}/>
+      </div>
+
+    )
+  }
+}
+
+UserFavouriteOffersComponent.contextType = UserContext
+export default UserFavouriteOffersComponent
