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
 
