Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -11,5 +11,6 @@
   
     this.state = {
-      value: [1000,150000],
+      value: localStorage.getItem('priceRange') ? [parseInt(localStorage.getItem('priceRange').split('-')[0]), 
+      parseInt(localStorage.getItem('priceRange').split('-')[1])] : [1000,150000],
       minValue: 0,
       maxValue: 0
@@ -39,4 +40,5 @@
   handleChange = () => {
     this.props.changeHandler({priceRange: this.state.value.join('-')})
+    localStorage.setItem('priceRange',this.state.value.join('-'))
   }
 
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -7,2 +7,6 @@
 
 }
+
+.list-item-text-filters span{
+    overflow-x: scroll;
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -15,7 +15,8 @@
     constructor(props) {
       super(props)
-        
+        const {type} = this.props
+        console.log(type)
       this.state = {
-         pickedItems: [],
+         pickedItems: localStorage.getItem(type) ? localStorage.getItem(type).split(',') : [],
          items: [],
          type: '',
@@ -37,18 +38,87 @@
         }
 
-
         let endpoint 
-        if(this.props.type == 'brands')
-        {
-          endpoint = '/brands'
+        switch (this.props.type) {
+
+          case 'brands':
+            endpoint = '/brands'
           this.setState({
             type: 'Брендови'
           })
-        }
-        else{
-          endpoint = '/shops'
+            break;
+          case 'shops':
+            endpoint = '/shops'
           this.setState({
             type: 'Продавници'
           })
+            break;
+
+          case 'ram':
+            endpoint = '/specifications/ram'
+          this.setState({
+            type: 'РАМ меморија'
+          })
+            break;
+
+          case 'rom':
+            endpoint = '/specifications/rom'
+          this.setState({
+            type: 'РОМ меморија'
+          })
+            break;
+
+           case 'frontcamera':
+            endpoint = '/specifications/frontcamera'
+          this.setState({
+            type: 'Предна камера'
+          })
+            break;
+
+           case 'backcamera':
+            endpoint = '/specifications/backcamera'
+          this.setState({
+            type: 'Задна камера'
+          })
+            break;
+
+             case 'chipset':
+            endpoint = '/specifications/chipset'
+          this.setState({
+            type: 'Чипсет'
+          })
+            break;
+
+           case 'cpu':
+            endpoint = '/specifications/cpu'
+          this.setState({
+            type: 'Процесор'
+          })
+            break;
+
+
+         case 'operatingsystem':
+            endpoint = '/specifications/operatingsystem'
+          this.setState({
+            type: 'Оперативен систем'
+          })
+            break;
+
+
+         case 'color':
+            endpoint = '/specifications/color'
+          this.setState({
+            type: 'Боја'
+          })
+            break;
+
+            case 'battery':
+              endpoint = '/specifications/battery'
+            this.setState({
+              type: 'Батерија'
+            })
+              break;
+
+          default:
+            break;
         }
 
@@ -63,22 +133,82 @@
             pickedItems: typeof value === 'string' ? value.split(',') : value
         }, ()=>{
-          if(this.props.type == 'brands')
-          {
-            this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+
+          switch (this.props.type) {
+            case 'brands':
+              this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+              localStorage.setItem('brands', this.state.pickedItems.join(','))
+              break;
+
+            case 'shops':
+              this.props.changeHandler({shops: this.state.pickedItems.join(',')})
+              localStorage.setItem('shops', this.state.pickedItems.join(','))
+              break;
+
+            case 'ram':
+              this.props.changeHandler({ram: this.state.pickedItems.join(',')})
+              localStorage.setItem('ram', this.state.pickedItems.join(','))
+              break;
+            case 'rom':
+              this.props.changeHandler({rom: this.state.pickedItems.join(',')})
+              localStorage.setItem('rom', this.state.pickedItems.join(','))
+              break;
+            case 'frontcamera':
+              this.props.changeHandler({frontcamera: this.state.pickedItems.join(',')})
+              localStorage.setItem('frontcamera', this.state.pickedItems.join(','))
+              break;
+
+            case 'backcamera':
+              this.props.changeHandler({backcamera: this.state.pickedItems.join(',')})
+              localStorage.setItem('backcamera', this.state.pickedItems.join(','))
+              break;
+
+            case 'chipset':
+              this.props.changeHandler({chipset: this.state.pickedItems.join(',')})
+              localStorage.setItem('chipset', this.state.pickedItems.join(','))
+              break;
+
+            case 'cpu':
+              this.props.changeHandler({cpu: this.state.pickedItems.join(',')})
+              localStorage.setItem('cpu', this.state.pickedItems.join(','))
+              break;
+
+            case 'operatingsystem':
+              this.props.changeHandler({operatingsystem: this.state.pickedItems.join(',')})
+              localStorage.setItem('operatingsystem', this.state.pickedItems.join(','))
+              break;
+
+            case 'color':
+              this.props.changeHandler({color: this.state.pickedItems.join(',')})
+              localStorage.setItem('color', this.state.pickedItems.join(','))
+              break;
+
+            case 'battery':
+              this.props.changeHandler({battery: this.state.pickedItems.join(',')})
+              localStorage.setItem('battery', this.state.pickedItems.join(','))
+              break;
+
+            default:
+              break;
           }
+          // if(this.props.type == 'brands')
+          // {
+          //   this.props.changeHandler({brands: this.state.pickedItems.join(',')})
+          // }
           
-          if(this.props.type == 'shops')
-          {
-            this.props.changeHandler({shops: this.state.pickedItems.join(',')})
-          }
+          // if(this.props.type == 'shops')
+          // {
+          //   this.props.changeHandler({shops: this.state.pickedItems.join(',')})
+          // }
           
         })
+
+
       };
-
+    // sx={{ m: 1, width: 250 }} kaj formcontrol
 
   render() {
     return (
         <div>
-        <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
+        <FormControl className="form-select-component" sx={{ m: 1, width: this.props.width}}>
           <InputLabel className="input-select-label">{this.state.type}</InputLabel>
           <Select
@@ -94,7 +224,7 @@
   >
             {this.state.items.map((item) => (
-              <MenuItem key={item} value={item}>
+              <MenuItem key={item} value={item} > 
                 <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
-                <ListItemText primary={item} />
+                <ListItemText className='list-item-text-filters' primary={item} />
               </MenuItem>
             ))}
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -63,5 +63,5 @@
   
     this.state = {
-       
+
     }
   }
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -1,5 +1,5 @@
 .sortby-component-wrapper{
     display: flex;
-    justify-content: end;
+    justify-content: space-between;
     padding: 20px;
     background-color: #DEE4E1
@@ -11,3 +11,11 @@
     background-color: #e6f8ef;
     margin-right: 15px;
+    height: 50%;
+    margin-left: auto;
 }
+
+
+.popover-specification-container{
+    height: 500px;
+    overflow-y: scroll;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision 7e88e4629bb341cb3730a26b5197ab06068ce0db)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -1,4 +1,6 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
 import './SortByComponent.css'
+import SpecificationsFilterComponent from './SpecificationsFilterComponent'
 
 export class SortByComponent extends Component {
@@ -8,5 +10,5 @@
     
       this.state = {
-         sortBy: 'mostPopular'
+         sortBy: localStorage.getItem('sortBy') ? localStorage.getItem('sortBy') : 'mostPopular'
       }
     }
@@ -14,4 +16,5 @@
     handleChange = (e) => {
       this.props.changeHandler({sortBy: e.target.value})
+      localStorage.setItem('sortBy',e.target.value)
     }
 
@@ -19,5 +22,6 @@
     return (
         <div className="sortby-component-wrapper">
-        <select defaultValue={'mostPopular'} onChange={this.handleChange} className='sortby-component-select'>
+        {localStorage.getItem('token') ? <SpecificationsFilterComponent changeHandler={this.props.changeHandler}/> : <></>}
+        <select defaultValue={this.state.sortBy} onChange={this.handleChange} className='sortby-component-select'>
           <option value="mostPopular">Најпопуларно</option>
           <option value="ascending">Цена: Ниска {'>'} Висока</option>
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -0,0 +1,37 @@
+.specifications-filter-header{
+    background-color: #B6E2C8;
+    border: 1px solid black;
+    width: fit-content;
+    border-radius: 20px;
+    padding: 5px;
+    margin-right: auto;
+    margin-left: 10px;
+    height: fit-content;
+    margin-top: 0px;
+    padding-top: 5px;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+}
+
+.popover-specification-container{
+    overflow-y: scroll;
+    height: 400px;
+}
+
+.popover-specification-container-header{
+    /* color: #B6E2C8; */
+    margin: 30px;
+}
+
+.specifications-filter-header: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 ;
+}
+
+.specifications-filter-popover{
+    text-align: center;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision d66b8ebb46c9e4a4056ded9adde5e33dcaaf6b44)
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import './SpecificationsFilterComponent.css'
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import Tippy from '@tippyjs/react';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import FilterSelectComponent from './FilterSelectComponent';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+export class SpecificationsFilterComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        anchorEl: null
+      }
+    }
+
+    handleClick = (event) => {
+      this.setState({
+        anchorEl: event.currentTarget
+      })
+    };
+
+    handleClose = () => {
+      this.setState({
+        anchorEl: null
+      })
+    };
+
+  render() {
+
+    const open = Boolean(this.state.anchorEl);
+    const id = open ? 'specifications-popover' : undefined;
+
+    return (
+      <div className='specifications-filter-main'>
+        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации
+        <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
+        </h4>
+      <Popover
+        className='specifications-filter-popover'
+        id={id}
+        open={open}
+        anchorEl={this.state.anchorEl}
+        onClose={this.handleClose}
+        anchorOrigin={{
+          vertical: 'center',
+          horizontal: 'right',
+        }}
+      >
+        <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>
+        </div>
+      </Popover>
+      </div>
+    )
+  }
+}
+
+export default SpecificationsFilterComponent
+
