Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/UserController.java
===================================================================
--- phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/UserController.java	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/controllers/UserController.java	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -33,3 +33,14 @@
     }
 
+    @PutMapping(path = "/{userId}/editspecifications")
+    public ResponseEntity<Object> editSpecificationsForUser(@PathVariable("userId") Long userId,
+                                                            @RequestBody String specifications){
+        return userService.editSpecificationsForUser(userId,specifications);
+    }
+
+    @GetMapping(path = "/{userId}/getspecifications")
+    public String getSpecificationsForUser(@PathVariable("userId") Long userId){
+        return userService.getSpecificationsForUser(userId);
+    }
+
 }
Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/entities/User.java
===================================================================
--- phonelux-backend/src/main/java/finki/it/phoneluxbackend/entities/User.java	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/entities/User.java	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -69,4 +69,5 @@
     }
 
+
     public User(Long id, String firstName, String lastName, String email, UserRole userRole) {
         this.id = id;
Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java
===================================================================
--- phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/security/CustomAuthenticationFilter.java	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -52,4 +52,6 @@
                 .withClaim("name", user.getFirstName())
                 .withClaim("id", user.getId())
+//                .withClaim("pickedSpecifications",user.getSpecifications()!=null ?
+//                        user.getSpecifications() : "[]")
                 .sign(algorithm);
 
Index: phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java
===================================================================
--- phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-backend/src/main/java/finki/it/phoneluxbackend/services/UserService.java	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -85,5 +85,5 @@
         String name = decodedJWT.getClaim("name").as(String.class);
         Long id = decodedJWT.getClaim("id").as(Long.class);
-
+//        String pickedSpecifications = decodedJWT.getClaim("pickedSpecifications").as(String.class);
         return new User(id,name,role);
     }
@@ -175,3 +175,29 @@
         return ResponseEntity.ok().build();
     }
+
+    public ResponseEntity<Object> editSpecificationsForUser(Long userId, String specifications) {
+        boolean userExists = userRepository.existsById(userId);
+        if (!userExists)
+        {
+            return ResponseEntity.badRequest().body("User with id "+userId+" doesn't exist");
+        }
+        User user = userRepository.findById(userId).get();
+
+        user.setSpecifications(specifications);
+        userRepository.save(user);
+
+        return ResponseEntity.ok().build();
+    }
+
+    public String getSpecificationsForUser(Long userId) {
+        boolean userExists = userRepository.existsById(userId);
+        if (!userExists)
+        {
+            throw new UsernameNotFoundException("User with id "+userId+" doesn't exist");
+        }
+
+        User user = userRepository.findById(userId).get();
+
+        return user.getSpecifications() != null ? user.getSpecifications() : "[]";
+    }
 }
Index: phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/CheaperOffersComponent/CheaperOffersComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -19,5 +19,5 @@
 
     return (
-        <div>
+        <div className='cheaperoffers-modal-main'>
         <Modal 
           open={this.props.openModal}
Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -90,7 +90,8 @@
                         <th className='compare-offer-table-headers'>Цена</th>
                         {
-                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.price}</td>)
+                        this.state.offersToCompare.map((offer,idx) => <td key={idx}>{offer.price} ден.</td>)
                         }
                     </tr>
+                    { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>РАМ меморија</th>
@@ -99,5 +100,7 @@
                             offer.ram_memory == '' ? '/' : offer.ram_memory}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>РОМ меморија</th>
@@ -106,5 +109,7 @@
                             offer.rom_memory == '' ? '/' : offer.rom_memory}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Предна камера</th>
@@ -113,5 +118,7 @@
                             offer.front_camera == '' ? '/' : offer.front_camera}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Задна камера</th>
@@ -120,5 +127,7 @@
                             offer.back_camera == '' ? '/' : offer.back_camera}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Процесор</th>
@@ -127,5 +136,7 @@
                             offer.cpu == '' ? '/' : offer.cpu}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Чипсет</th>
@@ -134,5 +145,7 @@
                             offer.chipset == '' ? '/' : offer.chipset}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Оперативен систем</th>
@@ -141,5 +154,7 @@
                             offer.operating_system == '' ? '/' : offer.operating_system}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Батерија</th>
@@ -148,5 +163,7 @@
                             offer.battery == '' ? '/' : offer.battery}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
+                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Боја</th>
@@ -155,5 +172,6 @@
                             offer.color == '' ? '/' : offer.color}</td>)
                         }
-                    </tr>
+                    </tr> : <></>
+                    }
                 </tbody>
                 </table>
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -16,5 +16,4 @@
       super(props)
         const {type} = this.props
-        console.log(type)
       this.state = {
          pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -20,2 +20,18 @@
     overflow-y: scroll;
 }
+
+.pick-specifications-icon{
+    margin-left: 10px;
+}
+
+.pick-specifications-icon:hover{
+    cursor: pointer;
+}
+
+.specifications-filter-main{
+    display: flex;
+}
+.tippy-pick-specifications-icon{
+    width: fit-content;
+    text-align: center;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -3,4 +3,6 @@
 import './SortByComponent.css'
 import SpecificationsFilterComponent from './SpecificationsFilterComponent'
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
 
 export class SortByComponent extends Component {
@@ -10,5 +12,6 @@
     
       this.state = {
-         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
+         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular',
+         openModal: false
       }
     }
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -18,5 +18,8 @@
 .popover-specification-container{
     overflow-y: scroll;
-    height: 400px;
+    height: fit-content;
+    padding-bottom: 30px;
+    max-height: 400px;
+    
 }
 
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -8,4 +8,7 @@
 import FilterSelectComponent from './FilterSelectComponent';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import PickSpecificationComponent from '../PickSpecificationComponent/PickSpecificationComponent';
+import axios from 'axios';
+import UserContext from '../../context/UserContext';
 export class SpecificationsFilterComponent extends Component {
 
@@ -14,5 +17,6 @@
     
       this.state = {
-        anchorEl: null
+        anchorEl: null,
+        openModal: false,
       }
     }
@@ -29,4 +33,16 @@
       })
     };
+
+    handleModalClose = () =>{
+      this.setState({
+        openModal: false
+      })
+    }
+
+    handleModalOpen = () =>{
+        this.setState({
+            openModal: true
+        })
+    }
 
   render() {
@@ -53,15 +69,39 @@
         <div className='popover-specification-container'>
         <h2 className='popover-specification-container-header'>Филтер за спецификации</h2>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent>
-        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent>
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='ram'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='rom'></FilterSelectComponent> : <></>
+        } 
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='frontcamera'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='backcamera'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='chipset'></FilterSelectComponent> : <></>
+        }
+         { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='cpu'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='operatingsystem'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='color'></FilterSelectComponent> : <></>
+        }
+        { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
+        <FilterSelectComponent changeHandler={this.props.changeHandler} width={400} type='battery'></FilterSelectComponent> : <></>
+        }
         </div>
       </Popover>
+      <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
+        <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
+        </Tippy>
+        { this.context.userId != '' && <PickSpecificationComponent
+        openModal={this.state.openModal} 
+        handleClose={this.handleModalClose}/> }
       </div>
     )
@@ -69,4 +109,6 @@
 }
 
+SpecificationsFilterComponent.contextType = UserContext
+
 export default SpecificationsFilterComponent
 
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -220,5 +220,5 @@
   render() {
     // console.log(this.context)
-    // console.log(localStorage.getItem('token'))
+    console.log(localStorage.getItem('token'))
     // console.log(this.state)
     return (
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -121,10 +121,4 @@
           }
       })()}
-        {/* {
-          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' ?   
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -106,48 +106,66 @@
               this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
             </tr>
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Предна камера</td><td>{this.state.offer == null || 
               this.state.offer.front_camera == null ? '/' : this.state.offer.front_camera}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Задна камера</td><td>{this.state.offer == null || 
               this.state.offer.back_camera == null ? '/' : this.state.offer.back_camera}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РОМ меморија</td><td>{this.state.offer == null || 
               this.state.offer.rom_memory == null ? '/' : this.state.offer.rom_memory}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РАМ меморија</td><td>{this.state.offer == null || 
               this.state.offer.ram_memory == null ? '/' : this.state.offer.ram_memory}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
             <tr className='phone-offer-details-table-row'>
               <td>Оперативен систем</td><td>{this.state.offer == null || 
               this.state.offer.operating_system == null ? '/' : this.state.offer.operating_system}</td>
-            </tr>
+            </tr> : <></>
+             }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
             <tr className='phone-offer-details-table-row'>
               <td>Чипсет</td><td>{this.state.offer == null || 
               this.state.offer.chipset == null ? '/' : this.state.offer.chipset}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
             <tr className='phone-offer-details-table-row'>
               <td>Процесор</td><td>{this.state.offer == null || 
               this.state.offer.cpu == null ? '/' : this.state.offer.cpu}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
             <tr className='phone-offer-details-table-row'>
               <td>Батерија</td><td>{this.state.offer == null || 
               this.state.offer.battery == null ? '/' : this.state.offer.battery}</td>
-            </tr>
+            </tr> : <></>
+            }
 
+            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
             <tr className='phone-offer-details-table-row'>
               <td>Боја</td><td>{this.state.offer == null || 
               this.state.offer.color == null ? '/' : this.state.offer.color}</td>
-            </tr>
+            </tr> : <></>
+            }
 
             <tr className='phone-offer-details-table-row'>
Index: phonelux-frontend/src/components/PhonePageComponent.js
===================================================================
--- phonelux-frontend/src/components/PhonePageComponent.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/components/PhonePageComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -1,4 +1,5 @@
 import axios from 'axios'
 import React, { Component } from 'react'
+import UserContext from '../context/UserContext'
 import HeaderComponent from './HeaderComponent/HeaderComponent'
 import PhoneWithOffersComponent from './PhoneWithOffersComponent/PhoneWithOffersComponent'
@@ -34,4 +35,3 @@
   }
 }
-
 export default PhonePageComponent
Index: phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.css
===================================================================
--- phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.css	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
+++ phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.css	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -0,0 +1,45 @@
+.pick-specification-modal-box{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 24;
+    background-color: #e3f2e9;
+    width: 600px;
+    height: 500px;
+    overflow: scroll;
+    border: 1px solid black;
+}
+
+.pick-specification-modal-title{
+    padding: 30px;
+    text-align: center;
+    background-color: #B6E2C8;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.pick-specification-specs-wrapper h3{
+    text-align: center;
+}
+
+
+.pick-specification-specs-item{
+    background-color: #e3f2e9;
+    padding: 20px;
+    text-align: center;
+}
+.pick-specification-specs-item:hover{
+    background-color: #a6c9ab;
+    cursor: pointer;
+}
+
+.pick-specification-item-label span{
+    font-size: 20px;
+}
+
+.pick-specification-list{
+    background-color: #e3f2e9
+}
+
+
Index: phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.js
===================================================================
--- phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
+++ phonelux-frontend/src/components/PickSpecificationComponent/PickSpecificationComponent.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -0,0 +1,125 @@
+import { Box, Modal } from '@mui/material'
+import React, { Component } from 'react'
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import IconButton from '@mui/material/IconButton';
+import './PickSpecificationComponent.css'
+import UserContext from '../../context/UserContext';
+import axios from 'axios';
+
+export class PickSpecificationComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        checked: []
+      }
+    }
+
+    handleToggle = (value) => () => {
+        const currentIndex = this.state.checked.indexOf(value);
+        const newChecked = [...this.state.checked];
+    
+        if (currentIndex === -1) {
+          newChecked.push(value);
+        } else {
+          newChecked.splice(currentIndex, 1);
+        }
+
+       this.setState({
+        checked: newChecked
+       }, () => {
+        var config = {
+            method: 'put',
+            url: '/user/'+this.context.userId+'/editspecifications',
+            headers: { 
+              'Authorization': 'Bearer '+localStorage.getItem('token'), 
+              'Content-Type': 'text/plain'
+            },
+            data : this.state.checked
+          };
+
+          axios(config)
+          .then(response => {
+            localStorage.setItem('pickedSpecifications',this.state.checked)
+          })
+          .catch(function (error) {
+            console.log(error);
+          });
+       })
+      };
+
+      componentDidMount(){
+        var config = {
+            method: 'get',
+            url: '/user/'+this.context.userId+'/getspecifications',
+            headers: { 
+              'Authorization': 'Bearer '+localStorage.getItem('token')
+            }
+          };
+          
+          axios(config)
+          .then(response => {
+            this.setState({
+                checked: response.data
+            },() => {localStorage.setItem('pickedSpecifications',this.state.checked)})
+          })
+          .catch(function (error) {
+            console.log('error here',error);
+          });
+          
+      }
+    
+
+  render() {
+    return (
+     <div className='pick-specification-modal-main'>
+        <Modal 
+          open={this.props.openModal}
+          onClose={this.props.handleClose}
+        >
+          <Box className='pick-specification-modal-box'>
+            <div className='pick-specification-modal-title'>Изберете спецификации кои што сакате да се прикажани</div>
+             <List className='pick-specification-list' sx={{ width: '100%', bgcolor: 'background.paper' }}>
+                {['РАМ меморија', 'РОМ меморија', 'Предна камера', 'Задна камера',
+                'Чипсет', 'Процесор', 'Оперативен систем', 'Боја', 'Батерија'].map((value) => {
+                    const labelId = `checkbox-list-label-${value}`;
+        return (
+          <ListItem
+            className='pick-specification-specs-item'
+            key={value}
+            disablePadding
+          >
+            <ListItemButton role={undefined} onClick={this.handleToggle(value)} dense>
+              <ListItemIcon>
+                <Checkbox
+                  edge="start"
+                  checked={this.state.checked.indexOf(value) !== -1}
+                  tabIndex={-1}
+                  disableRipple
+                  inputProps={{ 'aria-labelledby': labelId }}
+                />
+              </ListItemIcon>
+              <ListItemText className='pick-specification-item-label' primary={value} />
+            </ListItemButton>
+          </ListItem>
+        );
+      })}
+    </List>
+          </Box>
+        </Modal>
+      </div>
+    )
+
+   
+  }
+}
+
+PickSpecificationComponent.contextType = UserContext
+
+export default PickSpecificationComponent
Index: phonelux-frontend/src/context/UserContext.js
===================================================================
--- phonelux-frontend/src/context/UserContext.js	(revision 436e0da3dac6a9709c3a2f2049ad88f43f78f9db)
+++ phonelux-frontend/src/context/UserContext.js	(revision 48f3030e929e5d3717498b6e78a9813429162fde)
@@ -26,10 +26,9 @@
                 userId: id,
                 name: firstName,
-                role: userRole
+                role: userRole,
              })
             }).catch(error => console.log(error))
         }
     }
-    
     
   render() {
@@ -39,5 +38,5 @@
         userId,
         name,
-        role
+        role,
       }}>
         {this.props.children}