Index: phonelux-frontend/src/App.js
===================================================================
--- phonelux-frontend/src/App.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/App.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -1,17 +1,10 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import './App.css';
-import GroupedFiltersComponent from "./components/GroupedFiltersComponent/GroupedFiltersComponent";
-import HeaderComponent from "./components/HeaderComponent/HeaderComponent";
-import InputFormComponent from "./components/LoginRegisterComponents/InputFormComponent";
-import LoginFormComponent from "./components/LoginRegisterComponents/LoginFormComponent";
-import RegisterFormComponent from "./components/LoginRegisterComponents/RegisterFormComponent";
-import PaginationComponent from "./components/PaginationComponent/PaginationComponent"
-import PhoneCardComponent from "./components/PhoneCardComponent/PhoneCardComponent";
-import PhoneCardGridComponent from "./components/PhoneCardGridComponent/PhoneCardGridComponent";
 import HomepageComponent from "./components/HomepageComponent"
 import PhonePageComponent from "./components/PhonePageComponent";
-import SortByComponent from "./components/FiltersComponents/SortByComponent";
 import LoginPageComponent from "./components/LoginPageComponent"
 import RegisterPageComponent from "./components/RegisterPageComponent";
+import PhoneOfferDetailsComponent from "./components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent";
+
 
 
@@ -21,11 +14,9 @@
     <BrowserRouter>
       <Routes>
-        {/* { <Route path="/" element={<PhoneCardComponent 
-        image_url='https://admin.ledikom.mk/uploads/items/411/1641668143apple-iphone-13-pro-max-1-250x300-pad.jpg?v=1'
-        model='Apple iPhone 13 Pro Max' price='75000'/>}/> } */}
         <Route path="/" element={<HomepageComponent/>}/> 
         <Route path="/login" element={<LoginPageComponent/>}/>
         <Route path="/register" element={<RegisterPageComponent/>}/> 
         <Route path="/phones/:phoneId" element={<PhonePageComponent/>} />
+        <Route path="/phoneoffer/:offerId" element={<PhoneOfferDetailsComponent/>} />
 
       </Routes>
Index: phonelux-frontend/src/components/DataManager.js
===================================================================
--- phonelux-frontend/src/components/DataManager.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/DataManager.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,17 @@
+import React from 'react'
+
+class DataManager{
+
+    filters = null;
+
+    setFilters = (filters) => {
+        this.filters = filters
+    }
+
+
+}
+
+
+const Data = new DataManager();
+
+export default Data;
Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -18,5 +18,4 @@
 
   componentDidMount(){
-
 
   axios.get('/lowestPrice')
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -10,3 +10,4 @@
     width: 15%;
     background-color: #e6f8ef;
+    margin-right: 15px;
 }
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -21,8 +21,4 @@
   }
   
-
-  componentDidMount(){
-  
-  }
 
   render() {
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -8,3 +8,11 @@
     width: 310px;
     height: 200px;
+    margin-top: -65px;
 }
+
+.homepage-navbar-component{
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    background-color: #B6E2C8;
+}
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -2,4 +2,5 @@
 import { Link } from 'react-router-dom'
 import logo from '../../images/logo_phonelux.png'
+import NavbarComponent from '../NavbarComponent/NavbarComponent'
 import './HeaderComponent.css'
 
@@ -7,4 +8,8 @@
   render() {
     return (
+      <>
+      <div className='homepage-navbar-component'>
+        <NavbarComponent/>
+      </div>
       <div className='header-component'>
           <Link style={{ textDecoration: 'none' }} to={"/"}>
@@ -12,4 +17,5 @@
         </Link>
       </div>
+      </>
     )
   }
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -3,4 +3,5 @@
 import HeaderComponent from './HeaderComponent/HeaderComponent'
 import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent'
+
 
 export class HomepageComponent extends Component {
@@ -10,9 +11,9 @@
 
   this.state = {
-    shops: null,
-    brands: null,
-    priceRange: null,
-    searchValue: null,
-    sortBy: null
+    shops: '',
+    brands: '',
+    priceRange: '',
+    searchValue: '',
+    sortBy: 'mostPopular'
   }
 }
@@ -46,4 +47,5 @@
       searchValue: e.searchValue
     })
+
   }
 
@@ -56,4 +58,5 @@
 }
 
+
   render() {
     return (
@@ -61,5 +64,5 @@
         <HeaderComponent/>
         <GroupedFiltersComponent passFilters={this.changeFilters}/>
-        <PhoneCardGridComponent/>
+        <PhoneCardGridComponent {...this.state}/>
         </>
     )
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -16,5 +16,5 @@
   width: fit-content;
   box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
-  padding-top: 30px;
+  padding-top: 20px;
   border-radius: 60px; 
   background-color: white;
@@ -23,5 +23,5 @@
 }
 .loginform-imgs-div {
-    padding-top: 20px;
+    padding-top: 10px;
     justify-content: center;
     display: flex;
@@ -43,5 +43,5 @@
 
 .loginform-sub-main-div > div{
-  margin-bottom: 50px;
+  margin-bottom: 30px;
   margin-left: 80px;
   margin-right: 80px;
@@ -137,10 +137,27 @@
     color: blue;
 }
- .register-link > a{
-     color: rgb(53, 99, 70);
-     text-decoration: none;
+
+
+
+ .registerform-link{
+  color: rgb(53, 99, 70);
+  text-decoration: none;
  }
 
- .register-link > a:hover{
-  color: blue;
+ .registerform-link:hover{
+   color: blue;
  }
+
+ .loginform-message-wrapper{
+  display: flex;
+  justify-content: center;
+ }
+
+ .loginform-error-message{
+  color: red;
+  border: 1px solid red;
+  width: fit-content;
+  padding: 10px;
+  border-radius: 50px;
+  background-color: rgb(251, 224, 224);
+ }
Index: phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/LoginFormComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -17,4 +17,5 @@
       email: '',
       password: '',
+      serverResponse: ''
     }
   }
@@ -42,9 +43,12 @@
 
       axios(config)
-      .then(function (response) {
-        console.log(response.data);
+      .then((response) => {
+       // store access token in local storage, redirect to homepage
+       console.log(response.data)
       })
-      .catch(function (error) {
-        console.log(error);
+      .catch((error) => {
+        this.setState({
+          serverResponse: 'error'
+        })
       });
 
@@ -67,5 +71,6 @@
        <div className="loginform-sub-main-div">
          <div>
-
+          {this.state.serverResponse == 'error' ? <div className='loginform-message-wrapper'>
+                          <h5 className='loginform-error-message'>Невалидна е-маил адреса или лозинка!</h5></div> : <></>}
            <div className="loginform-imgs-div">
              <div className="loginform-image-container">
@@ -93,5 +98,5 @@
             </div>  
            </form>
-           <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
+           <p className='register-link'><Link className='registerform-link' to={"/register"}>Регистрирај се</Link></p>
   
          </div>
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -23,5 +23,5 @@
   }
   .registerform-imgs-div {
-      padding-top: 20px;
+      padding-top: 5px;
       justify-content: center;
       display: flex;
@@ -158,4 +158,26 @@
   }
 
+  .registerform-message-wrapper{
+    display: flex;
+    justify-content: center;
+  }
+
+  .registerform-error-message{
+    color: red;
+    border: 1px solid red;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: rgb(251, 224, 224);
+  }
+
+  .registerform-success-message{
+    color: green;
+    border: 1px solid green;
+    width: fit-content;
+    padding: 10px;
+    border-radius: 50px;
+    background-color: #B6E2C8;
+  }
 
 
Index: phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/RegisterFormComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -20,4 +20,5 @@
         password: '',
         confirmPassword:'',
+        serverResponse: ''
       }
     }
@@ -43,9 +44,13 @@
 
         axios(config)
-        .then(function (response) {
-          console.log(response);
+        .then((response) => {
+          this.setState({
+            serverResponse: response.data
+          })
         })
-        .catch(function (error) {
-          console.log(error);
+        .catch((error) => {
+          this.setState({
+            serverResponse: error.response.data
+          })
         });
 
@@ -59,6 +64,4 @@
 
 
-    
-
   render() {
 
@@ -69,4 +72,24 @@
          <div className="registerform-sub-main-div">
            <div>
+
+            {(() => {
+              if(this.state.serverResponse == '')
+              {
+                return <></> 
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('Error'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-error-message'>{this.state.serverResponse.split(':')[1]}</h5> </div>
+              }
+
+              if(this.state.serverResponse != '' && this.state.serverResponse.includes('token'))
+              {
+                return <div className='registerform-message-wrapper'>
+                          <h5 className='registerform-success-message'>Вашата регистрација е во тек. Потврдете на вашата е-маил адреса!</h5> </div>
+              }
+
+            })()}
 
              <div className="registerform-imgs-div">
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,16 @@
+.phonelux-navbar{
+    width: fit-content;
+    margin-right: 20px;
+}
+
+.navbar-account-box-icon{
+    font-size: 50px;
+    margin-top: 10px;
+}
+
+.navbar-account-box-icon:hover{
+    cursor: pointer;
+}
+
+
+/* style={{ fontSize: '50px', marginTop: '10px' }} */
Index: phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js
===================================================================
--- phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/NavbarComponent/NavbarComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import './NavbarComponent.css'
+import AccountBoxIcon from '@mui/icons-material/AccountBox';
+import { style } from '@mui/system';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css'
+import { Link } from 'react-router-dom';
+import PersonIcon from '@mui/icons-material/Person';
+import LogoutIcon from '@mui/icons-material/Logout';
+
+export class NavbarComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         profileSectionOpen: false
+      }
+    }
+    
+  render() {
+    return (
+      <div className='phonelux-navbar'>
+        <Tippy placement='bottom' content='Најави се'>
+        <Link style={{color: 'black'}} to={"/login"}> <PersonIcon  style={{fontSize: '50px', marginTop: '10px' }} className='navbar-account-box-icon'/></Link>
+        </Tippy>
+
+        {/* favourite offers icon goes here */}
+
+      </div>
+    )
+  }
+}
+
+export default NavbarComponent
Index: phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css
===================================================================
--- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ 	(revision )
@@ -1,7 +1,0 @@
-.pagination-wrapper{
-    margin-top: 40px;
-    padding-bottom: 40px;
-    display: flex;
-    justify-content: center;
-}
-
Index: phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js
===================================================================
--- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ 	(revision )
@@ -1,26 +1,0 @@
-import * as React from 'react';
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
-import "./PaginationComponent.css"
-
-export class PaginationComponent extends React.Component {
-    constructor(props) {
-      super(props)
-    
-      this.state = {
-         
-      }
-    }
-
-  render() {
-    return (
-      <div className='pagination-wrapper'>
-         <Pagination className='paginationcomponent-pagination' onChange={(event) => this.props.changePageHandler(event.currentTarget.textContent)} 
-         count={this.props.numberOfPages} color="primary" />
-      </div>
-    )
-  }
-}
-
-export default PaginationComponent
-
Index: phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -1,14 +1,20 @@
 .phonecard{
-    background-color: #B6E2C8;
+    /* background-color: #B6E2C8; */
     padding:15px;
     justify-items: center;
+    padding-top: 35px;
     width: 250px;
     height: 400px;
     border-radius: 25px;
+    border: 3px solid #B6E2C8;
+    border-radius: 50px;
 }
 
 .phonecard:hover{
-    background-color: #84c69f;
+    /* background-color: #B6E2C8; */
     cursor: pointer;
+    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 ;
+    border-radius: 50px;
 }
 
@@ -26,11 +32,20 @@
 
 .phonecard-lowestprice-header, .phonecard-totaloffers-header{
-    margin-top: -10px;
-    color: rgb(34, 106, 106);
-    text-align: center;
+    margin-top: 20px;
+    text-align: right;
+}
+
+.phonecard-totaloffers-header{
+    margin-top: -15px;
 }
 
 .phonecard-model-header{
     text-align: center;
+    border: 1px solid rgb(161, 165, 163);
+    border-radius: 20px 100px;
+    background-color: rgb(222, 228, 225);
+    padding: 5px;
+    padding-right: 10px;
+    
 }
 
@@ -44,4 +59,12 @@
 }
 
+.phonecard-lowestprice-header{
+    /* color: rgb(24, 117, 24); */
+}
+
+.phonecard-totaloffers-header{
+    /* color: rgb(24, 117, 24); */
+}
+
 .phonecard > h5 > p{
     display: inline;
Index: phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardComponent/PhoneCardComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -24,5 +24,5 @@
         <h3 className='phonecard-model-header'>{this.props.model}</h3>
         <h5 className='phonecard-lowestprice-header'>Најниска цена: <p className='phonecard-lowestprice'>{this.props.lowestPrice}</p> ден.</h5>
-        <h6 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h6>
+        <h5 className='phonecard-totaloffers-header'>Вкупно понуди: <p className='phonecard-totaloffers'>{this.props.total_offers}</p></h5>
       </div>
       </Paper>
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -15,3 +15,11 @@
 }
 
+.pagination-wrapper{
+    margin-top: 40px;
+    padding-bottom: 40px;
+    display: flex;
+    justify-content: center;
+}
 
+
+
Index: phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneCardGridComponent/PhoneCardGridComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -1,6 +1,5 @@
-import { Grid } from '@mui/material'
+import { Grid, Pagination } from '@mui/material'
 import axios from 'axios'
 import React, { Component } from 'react'
-import PaginationComponent from '../PaginationComponent/PaginationComponent'
 import '../PhoneCardComponent/PhoneCardComponent'
 import PhoneCardComponent from '../PhoneCardComponent/PhoneCardComponent'
@@ -15,5 +14,4 @@
     this.state = {
       phones: [],
-      loading: true,
       currentPage: 1,
       phonesPerPage: 12,
@@ -24,13 +22,50 @@
   }
 
+  componentDidUpdate(prevProps) {
+    if(JSON.stringify(prevProps) != JSON.stringify(this.props)){
+      let filters = '?'
+
+      if(this.props.shops)
+      {
+        filters += 'shops='+this.props.shops+'&'
+      }
+      if(this.props.brands)
+      {
+        filters += 'brands='+this.props.brands+'&'
+      }
+      if(this.props.priceRange)
+      {
+        filters += 'priceRange='+this.props.priceRange+'&'
+      }
+      if(this.props.searchValue)
+      {
+        filters += 'searchValue='+this.props.searchValue+'&'
+      }
+
+      if(this.props.sortBy)
+      {
+        filters += 'sortBy='+this.props.sortBy+'&'
+      }
+
+      axios.get('/phones'+filters)
+      .then(response => {
+        this.setState({
+          phones: response.data,
+          numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
+        },(e) => this.setNewPage(e,this.state.currentPage))
+      }
+      )
+      .catch(error => console.log(error))
+      console.log(filters)
+    }
+  }
+
   componentDidMount() {
-
     axios.get('/phones')
       .then(response => {
         this.setState({
           phones: response.data,
-          loading: false,
           numberOfPages: Math.ceil(response.data.length / this.state.phonesPerPage)
-        },() => this.setNewPage(this.state.currentPage))
+        },(e) => this.setNewPage(e,this.state.currentPage))
       }
       )
@@ -38,17 +73,8 @@
   }
 
-  setNewPage = (newPage) => {
-    if(newPage == '')
-    {
-      newPage = this.state.currentPage-1
-    }
 
-    if(newPage == '')
-    {
-      newPage = this.state.currentPage+1
-    }
+  setNewPage = (event,page) => {
 
-
-    const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
+    const indexOfLastPhone = parseInt(page) * this.state.phonesPerPage;
     const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
 
@@ -56,5 +82,5 @@
 
     this.setState({
-      currentPage: parseInt(newPage),
+      currentPage: parseInt(page),
       currentPhones: currPhones
     })
@@ -63,4 +89,5 @@
 
   render() {
+
     return (
       <div className='phonecardgrid-wrapper'>
@@ -71,19 +98,15 @@
        spacing={2}>
 
-        {this.state.currentPhones.map((phone) => <Grid className='phonecardgrid-item' item md={3}>
-          <PhoneCardComponent key={phone.id} id={phone.id} brand={phone.brand}
+        {this.state.currentPhones.map((phone,idx) => <Grid key={idx} className='phonecardgrid-item' item md={3}>
+          <PhoneCardComponent id={phone.id} brand={phone.brand}
           model={phone.model} image_url={phone.image_url == null ? phoneImage : phone.image_url} total_offers={phone.total_offers} lowestPrice={phone.lowestPrice}/></Grid>)}
 
-        {/* <Grid item xs={12} md={12}>
-        <PaginationComponent
-          currentPage={this.state.currentPage}
-          changePageHandler={this.setNewPage}
-          numberOfPages={this.state.numberOfPages} />
-          </Grid> */}
       </Grid>
-      <PaginationComponent
-          currentPage={this.state.currentPage}
-          changePageHandler={this.setNewPage}
-          numberOfPages={this.state.numberOfPages} />
+
+      <div className='pagination-wrapper'>
+         <Pagination className='paginationcomponent-pagination' onChange={this.setNewPage} page={this.state.currentPage}
+          count={this.state.numberOfPages} color="primary" />
+      </div>
+
       </div>
     )
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,28 @@
+.phone-with-offers-table-row{
+    font-size: 18px;
+}
+
+.phone-with-offers-table-row > td:first-of-type {
+    font-weight: bold;
+}
+
+.phone-offer-specifications-button{
+    font-size: 17px;
+    padding: 10px;
+    background-color: #B6E2C8;
+    border-radius: 20px;
+    border: 1px solid black;
+}
+
+.phone-with-offers-table-row td:last-of-type{
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.phone-offer-specifications-button: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 ;
+}
Index: phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneOfferComponent/PhoneOfferComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -1,3 +1,5 @@
 import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+import './PhoneOfferComponent.css'
 
 export class PhoneOfferComponent extends Component {
@@ -13,11 +15,15 @@
     
   render() {
-    console.log(this.props)
+    // console.log(this.props)
     return (
       <tr className='phone-with-offers-table-row'>
       <td>{this.props.offer_shop}</td>
-      <td><a href={this.props.offer_url}>{this.props.offer_name}</a></td>
+      <td><a style={{ textDecoration: 'none' }} href={this.props.offer_url}>{this.props.offer_name}</a></td>
       <td>{this.props.price} ден.</td>
-      <td></td>
+      <td>
+        <Link style={{ textDecoration: 'none' }} to={"/phoneoffer/"+this.props.id}>
+          <button className='phone-offer-specifications-button'>Спецификации</button>
+        </Link>
+        </td>
       </tr>
     )
@@ -27,24 +33,2 @@
 export default PhoneOfferComponent
 
-
-
-
-// back_camera: null
-// battery: null
-// chipset: null
-// color: null
-// cpu: null
-// front_camera: null
-// id: 486
-// image_url: "https://setec.mk/image/cache/catalog/Product/51841_0-228x228.jpg"
-// is_validated: false
-// last_updated: "2022-07-26T22:00:00.000+00:00"
-// offer_description: "Apple iPhone 13 128GB Midnight, GSM/CDMA/HSPA/EVDO/LTE/ 5G, Display: Super Retina XDR OLED; HDR10; Dolby Vision; 800 nits (HBM); 1200 nit…"
-// offer_name: "Apple iPhone 13 128GB Midnight"
-// offer_shop: "Setec"
-// offer_shop_code: "51841"
-// offer_url: "https://setec.mk/index.php?route=product/product&path=10066_10067&product_id=51841"
-// operating_system: null
-// price: 63990
-// ram_memory: null
-// rom_memory: null
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,72 @@
+.phone-offer-details-main{
+    width: 100%;
+}
+
+.phone-offer-details-table th{
+    text-align: center;
+    font-size: 38px;
+    padding: 20px;
+}
+
+.phone-offer-details-table thead tr{
+    background-color: #a6c9ab;
+}
+
+.phone-offer-details-table-row:nth-of-type(even){
+    background-color: #eef2f0;
+}
+
+.phone-offer-details-table-row{
+    border: 1px solid gainsboro;
+
+}
+
+.phone-offer-details-table{
+    border-collapse: collapse;
+    width: 80%;
+    table-layout: fixed;
+}
+
+.phone-offer-details-table-row td{
+    text-align: center;
+    word-wrap: break-word;
+    font-size: 22px;
+    padding: 20px;
+}
+
+.phone-offer-details-table-wrapper{
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.phone-offer-details-table-section{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 50px;
+}
+
+.phone-offer-details-table-row td a{
+    text-decoration: none;
+}
+
+.phone-offer-details-table-row td a:hover{
+    color: rgb(40, 117, 40);
+}
+
+.phone-offer-details-last-updated-header{
+    width: 25%;
+    margin-left: 20px;
+    padding: 10px;
+    border: 1px solid rgb(199, 193, 193);
+    background-color: #B6E2C8;
+    border-radius: 50px;
+    text-align: center;
+}
+
+.phone-offer-details-last-updated-wrapper{
+    display: flex;
+    justify-content: start;
+}
+
+
Index: phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
+++ phonelux-frontend/src/components/PhoneOfferDetailsComponent/PhoneOfferDetailsComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -0,0 +1,118 @@
+import React, { Component } from 'react'
+import axios from 'axios'
+import './PhoneOfferDetailsComponent.css'
+import HeaderComponent from '../HeaderComponent/HeaderComponent'
+
+
+export class PhoneOfferDetailsComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        offerId: window.location.href.split('/')[4],
+        offer: null
+      }
+    }
+
+    componentDidMount(){
+        axios.get('/phoneoffer/'+this.state.offerId)
+        .then(response => {
+            this.setState({
+                offer: response.data
+            })
+        }).catch(error => console.log(error))
+    }
+
+  render() {
+    console.log(this.state)
+    return (
+      <div className='phone-offer-details-main'>
+        <HeaderComponent/>
+        <div className='phone-offer-details-last-updated-wrapper'>
+          <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>
+        </div>
+        <div className='phone-offer-details-table-wrapper'>
+        <div className='phone-offer-details-table-section'>
+        <table className='phone-offer-details-table'>
+          <thead>
+          <tr><th colSpan={2}>Детали за понудата</th></tr>
+          </thead>
+          <tbody>
+            <tr className='phone-offer-details-table-row'>
+              <td>Понуда</td><td><a href={this.state.offer == null || this.state.offer.offer_url == null ? 
+              '#' : this.state.offer.offer_url}>{this.state.offer == null || this.state.offer.offer_name == null ? 
+              '/' : this.state.offer.offer_name}</a></td>
+            </tr>
+
+            <tr className='phone-offer-details-table-row'>
+              <td>Продавница</td><td>{this.state.offer == null || 
+              this.state.offer.offer_shop == null ? '/' : this.state.offer.offer_shop}</td>
+            </tr>
+
+            <tr className='phone-offer-details-table-row'>
+              <td>Цена</td><td>{this.state.offer == null || 
+              this.state.offer.price == null ? '/' : this.state.offer.price+' ден.'}</td>
+            </tr>
+            <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 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 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 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 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 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 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 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 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 className='phone-offer-details-table-row'>
+              <td>Опис</td><td>{this.state.offer == null || 
+              this.state.offer.offer_description == null ? '/' : this.state.offer.offer_description}</td>
+            </tr>
+            
+          </tbody>
+        </table>
+        </div>
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default PhoneOfferDetailsComponent
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.css	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -23,5 +23,5 @@
 
 .phone-with-offers-table-row:nth-of-type(even){
-    background-color: #DEE4E1;
+    background-color: #eef2f0;
 }
 
@@ -51,2 +51,20 @@
     font-size: 22px;
 }
+
+.phone-with-offers-model-header{
+    border: 1px solid gray;
+    padding: 10px;
+    padding-left: 50px;
+    padding-right: 50px;
+    border-radius: 10px 60px;
+    box-shadow: inset 0px 0px 25px 0px rgb(120, 190, 139);
+    outline: none;
+    background-color: #c4f3d8;
+}
+
+.phone-with-offers-totaloffers-header{
+    padding: 10px;
+    border: 1px solid rgb(199, 193, 193);
+    background-color: #B6E2C8;
+    border-radius: 50px;
+}
Index: phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js
===================================================================
--- phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhoneWithOffersComponent/PhoneWithOffersComponent.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -31,5 +31,5 @@
         <div className='phone-with-offers-sub-main'>
             <div className='phone-with-offers-totaloffers-div'>
-                <h3>Понуди: {this.props.total_offers}</h3>
+                <h3 className='phone-with-offers-totaloffers-header'>Понуди: {this.props.total_offers}</h3>
             </div>
 
@@ -41,5 +41,5 @@
 
             <div className='phone-with-offers-model-wrapper'>
-            <h1>{this.props.model}</h1>
+            <h1 className='phone-with-offers-model-header'>{this.props.model}</h1>
             </div>
         </div>
@@ -58,5 +58,5 @@
             <tbody>
               {
-                this.state.phone_offers.map((offer) => <PhoneOfferComponent key={offer.offer_id} id={offer.id}
+                this.state.phone_offers.map((offer,idx) => <PhoneOfferComponent key={idx} id={offer.id}
                 is_validated={offer.is_validated} offer_shop={offer.offer_shop} offer_name={offer.offer_name}
                 price={offer.price} offer_url={offer.offer_url}
Index: phonelux-frontend/src/index.js
===================================================================
--- phonelux-frontend/src/index.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/index.js	(revision e5b84dc652434cab61718f38889fc36867569866)
@@ -4,5 +4,7 @@
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import Data from './components/DataManager';
 
+window.Data = Data;
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
