Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
@@ -35,2 +35,26 @@
     cursor: pointer;
 }
+
+.phone-offer-compare-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-remove-favouriteoffer-icon{
+    color: rgb(226, 213, 39);
+}
+
+.phone-offer-compare-selected-icon:hover{
+    cursor: pointer;
+}
+
+.phone-offer-compare-selected-icon{
+    color: rgb(226, 213, 39);
+}
+
+
+
+
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
@@ -9,4 +9,6 @@
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import CheckIcon from '@mui/icons-material/Check';
+import CompareIcon from '@mui/icons-material/Compare';
+import BookmarkRemoveIcon from '@mui/icons-material/BookmarkRemove';
 
 export class PhoneOfferComponent extends Component {
@@ -16,5 +18,4 @@
     
       this.state = {
-       
       }
     }
@@ -72,4 +73,22 @@
       });
     }
+
+    handleOfferCompare = () => {
+      let offersToCompare = []
+     if(localStorage.getItem('offersToCompare'))
+     {
+      offersToCompare = JSON.parse(localStorage.getItem('offersToCompare'))
+     }
+
+     if(!offersToCompare.includes(this.props.id) && offersToCompare.length<5)
+     {
+      offersToCompare.push(this.props.id)
+     }
+     else{
+      offersToCompare = offersToCompare.filter(offer => offer != this.props.id)
+     }
+     localStorage.setItem('offersToCompare', JSON.stringify(offersToCompare))
+     this.forceUpdate()
+    }
     
     
@@ -81,4 +100,31 @@
       <td>{this.props.price} ден.</td>
       <td>
+
+        {/* if else jsx syntax here to add icon */}
+
+        {(() => {
+          if(!localStorage.getItem('token'))
+          {
+            return <></>
+          }
+
+          if(localStorage.getItem('offersToCompare') && localStorage.getItem('offersToCompare').includes(this.props.id))
+          {
+            return  <Tippy placement='bottom' content='Избриши понуда за споредба'>
+                      <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-selected-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+                    </Tippy>
+          }
+          else{
+            return  <Tippy placement='bottom' content='Додади понуда за споредба'>
+            <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+          </Tippy>
+          }
+      })()}
+        {/* {
+          localStorage.getItem('token') && !localStorage.getItem('offersToCompare').includes(this.props.id)? 
+          <Tippy placement='bottom' content='Додади понуда за споредба'>
+          <CompareIcon onClick={this.handleOfferCompare} className='phone-offer-compare-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
+        </Tippy> : <></>
+        } */}
         {
           window.location.href.split('/')[5] == 'favouriteoffers' ?   
@@ -98,5 +144,5 @@
           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' }}/>
+          <StarIcon onClick={this.removeFromFavourite} className='phone-offer-remove-favouriteoffer-icon' style={{fontSize: '40px', marginRight: '10px' }}/>
           </Tippy>
           : <></>
@@ -105,5 +151,5 @@
 
         <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
-          <button className='phone-offer-specifications-button'>Спецификации</button>
+          <button className='phone-offer-specifications-button'><b>Спецификации</b></button>
         </Link>
         </td>
