Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.css	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -71,2 +71,6 @@
 }
 
+.show-all-specs-icon:hover{
+    cursor: pointer;
+}
+
Index: phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/CompareOffersComponent/CompareOffersComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -6,4 +6,6 @@
 import axios from 'axios';
 import Tippy from '@tippyjs/react';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 export class CompareOffersComponent extends Component {
@@ -13,5 +15,6 @@
     
       this.state = {
-         offersToCompare: []
+         offersToCompare: [],
+         showAllSpecs : false
       }
     }
@@ -48,7 +51,12 @@
     }
 
+    changeShownSpecs = () => {
+        this.setState({
+            showAllSpecs: !this.state.showAllSpecs
+        })
+    }
+
     
   render() {
-    console.log(this.state)
     return (
       <div className='compare-offers-main'>
@@ -65,5 +73,15 @@
                 <tbody>
                     <tr className='compare-offers-table-row'>
-                        <th className='compare-offer-table-headers'></th>
+                        <th className='compare-offer-table-headers'>
+                            {
+                                this.state.showAllSpecs ? 
+                            <Tippy placement='bottom' content='Прикажи ги избраните спецификации'>
+                                <VisibilityOffIcon className='show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+                            </Tippy> :
+                            <Tippy placement='bottom' content='Прикажи ги сите спецификации'>
+                                <VisibilityIcon className='show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+                            </Tippy>
+                            }
+                        </th>
                         {
                             this.state.offersToCompare.map((offer,idx) => 
@@ -93,5 +111,7 @@
                         }
                     </tr>
-                    { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
+                    { this.state.showAllSpecs ||
+                    !localStorage.getItem('pickedSpecifications') || 
+                    localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>РАМ меморија</th>
@@ -102,5 +122,7 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || 
+                     localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>РОМ меморија</th>
@@ -111,5 +133,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Предна камера</th>
@@ -120,5 +143,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Задна камера</th>
@@ -129,5 +153,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Процесор</th>
@@ -138,5 +163,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Чипсет</th>
@@ -147,5 +173,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Оперативен систем</th>
@@ -156,5 +183,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Батерија</th>
@@ -165,5 +193,6 @@
                     </tr> : <></>
                     }
-                     { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
+                     { this.state.showAllSpecs ||
+                     !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
                     <tr className='compare-offers-table-row'>
                         <th className='compare-offer-table-headers'>Боја</th>
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.css	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -6,12 +6,12 @@
     padding: 5px;
     margin-right: auto;
-    margin-left: 10px;
     height: fit-content;
     margin-top: 0px;
     padding-top: 5px;
-    width: 100%;
+    width: 50%;
     text-align: center;
     display: flex;
     justify-content: center;
+    word-break:break-all;
 }
 
@@ -36,5 +36,40 @@
 }
 
+.specifications-filter-icon-header{
+   margin-top: -3px;
+}
+
 .specifications-filter-popover{
     text-align: center;
 }
+
+
+.pick-specifications-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: 50%;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    word-break:break-all;
+}
+
+.pick-specifications-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-main{
+    width: 45%;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/FiltersComponents/SpecificationsFilterComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -11,4 +11,5 @@
 import axios from 'axios';
 import UserContext from '../../context/UserContext';
+import SettingsIcon from '@mui/icons-material/Settings';
 export class SpecificationsFilterComponent extends Component {
 
@@ -53,5 +54,6 @@
     return (
       <div className='specifications-filter-main'>
-        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>Спецификации
+        <h4 aria-describedby={id} className='specifications-filter-header' onClick={this.handleClick}>
+          <FilterAltIcon className='specifications-filter-icon-header'/>Филтер за спецификации
         <ArrowDropDownIcon style={{marginTop:'-2px'}}/>
         </h4>
@@ -98,7 +100,7 @@
         </div>
       </Popover>
-      <Tippy className='tippy-pick-specifications-icon' placement='bottom' content='Изберете спецификации за приказ'>
-        <FilterAltIcon onClick={this.handleModalOpen} style={{fontSize: '35px'}} className='pick-specifications-icon'></FilterAltIcon>
-        </Tippy>
+        <h4 aria-describedby={id} className='pick-specifications-header' onClick={this.handleModalOpen}>
+          <SettingsIcon className='specifications-filter-icon-header'/>Спецификации за приказ
+        </h4>
         { this.context.userId != '' && <PickSpecificationComponent
         openModal={this.state.openModal} 
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -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/NavbarComponent/NavbarComponent.js
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -11,5 +11,5 @@
 import UserContext from '../../context/UserContext';
 import SupervisorAccountIcon from '@mui/icons-material/SupervisorAccount';
-import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
+import CompareIcon from '@mui/icons-material/Compare';
 
 export class NavbarComponent extends Component {
@@ -43,5 +43,5 @@
           <Tippy placement='bottom' content='Споредба на мобилни телефони'>
             <Link style={{color: 'black'}} to={"/compareoffers"}>
-              <PhoneIphoneIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/>
+              <CompareIcon style={{fontSize: '40px', marginTop: '10px', marginRight: '10px' }} className='navbar-comparephone-icon'/>
             </Link>
           </Tippy> : <></>
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -43,6 +43,4 @@
         filters += 'sortBy='+localStorage.getItem('sortBy')+'&'
       } 
-
-      // dodaj filtri za specifikacija i sredi go sortBy
 
       return filters
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -131,3 +131,13 @@
 }
 
+.offerdetails-show-all-specs-icon:hover{
+    cursor: pointer;
+}
 
+.offerdetails-show-all-specs-icon{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+
+
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision 895cd8764a7d97717d7e3eb6f4248a199d3623f5)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision fd5b100c1a316b5c886ba2b92de69042a34fde9a)
@@ -7,4 +7,6 @@
 import { Link } from 'react-router-dom'
 import Tippy from '@tippyjs/react'
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 
@@ -16,5 +18,6 @@
       this.state = {
         offerId: window.location.href.split('/')[4],
-        offer: null
+        offer: null,
+        showAllSpecs: false
       }
     }
@@ -51,4 +54,11 @@
     }
 
+
+    changeShownSpecs = () => {
+      this.setState({
+          showAllSpecs: !this.state.showAllSpecs
+      })
+  }
+
   render() {
     console.log(this.state)
@@ -59,4 +69,15 @@
           <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.state.showAllSpecs ? 
+              <Tippy placement='bottom' content='Прикажи ги избраните спецификации'>
+                 <VisibilityOffIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+              </Tippy> :
+              <Tippy placement='bottom' content='Прикажи ги сите спецификации'>
+                <VisibilityIcon className='offerdetails-show-all-specs-icon' onClick={this.changeShownSpecs} style={{fontSize: '45px'}}/>
+              </Tippy> : <></>
+          }
+
           {
             localStorage.getItem('token') && (this.context.role == 'ADMIN' || this.context.role == 'SUPERADMIN') ?
@@ -106,5 +127,6 @@
               this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
             </tr>
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
+            { this.state.showAllSpecs || 
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Предна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Предна камера</td><td>{this.state.offer == null || 
@@ -113,5 +135,6 @@
             }
 
-             { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
+             { this.state.showAllSpecs || 
+             !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Задна камера") ?
             <tr className='phone-offer-details-table-row'>
               <td>Задна камера</td><td>{this.state.offer == null || 
@@ -120,5 +143,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РОМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РОМ меморија</td><td>{this.state.offer == null || 
@@ -127,5 +151,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("РАМ меморија") ?
             <tr className='phone-offer-details-table-row'>
               <td>РАМ меморија</td><td>{this.state.offer == null || 
@@ -134,5 +159,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Оперативен систем") ?
             <tr className='phone-offer-details-table-row'>
               <td>Оперативен систем</td><td>{this.state.offer == null || 
@@ -141,5 +167,6 @@
              }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Чипсет") ?
             <tr className='phone-offer-details-table-row'>
               <td>Чипсет</td><td>{this.state.offer == null || 
@@ -148,5 +175,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Процесор") ?
             <tr className='phone-offer-details-table-row'>
               <td>Процесор</td><td>{this.state.offer == null || 
@@ -155,5 +183,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Батерија") ?
             <tr className='phone-offer-details-table-row'>
               <td>Батерија</td><td>{this.state.offer == null || 
@@ -162,5 +191,6 @@
             }
 
-            { !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
+            { this.state.showAllSpecs ||
+            !localStorage.getItem('pickedSpecifications') || localStorage.getItem('pickedSpecifications').includes("Боја") ?
             <tr className='phone-offer-details-table-row'>
               <td>Боја</td><td>{this.state.offer == null ||