Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,16 +1,17 @@
-#priceContainer{
+.sliderPriceContainer{
     display: flex;
+
 }
 
-#slider{
-    margin-top: 20px;
+#priceSlider{
+    margin-top: 15px;
 }
 
-#box{
+.sliderBox{
     margin-left: 20px;
 }
 
-#priceLabel{
-    margin-top: 23px;
+.sliderPriceLabel{
+    margin-top: 20px;
     font-size: 17px;
 }
Index: phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterPriceComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -3,30 +3,65 @@
 import Slider from '@mui/material/Slider';
 import "./FilterPriceComponent.css"
+import axios from 'axios';
 
-function valuetext(value) {
-  return `${value}°C`;
-}
+export class FilterPriceComponent extends React.Component {
 
-export default function RangeSlider() {
-  const [value, setValue] = React.useState([20, 37]);
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      value: [1000,150000],
+      minValue: 0,
+      maxValue: 0
+    }
+  }
 
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
+  componentDidMount(){
+
+
+  axios.get('/lowestPrice')
+    .then(response => this.setState({minValue: response.data}))
+    .catch(error => console.log(error)) 
+
+    axios.get('/highestPrice')
+    .then(response => this.setState({
+      maxValue: response.data,
+    }))
+    .catch(error => console.log(error))
+
+  }
+
+  changeValue = (event, newValue) => {
+    this.setState({
+      value: newValue
+    });
   };
 
-  return (
-    <div id="priceContainer">
-      <label id="priceLabel">Цена:</label>
-    <Box id="box" sx={{ width: 350 }}>
+  handleChange = () => {
+    this.props.changeHandler({priceRange: this.state.value.join('-')})
+  }
+
+
+  render() {
+    return (
+      <div className="sliderPriceContainer">
+      <label className="sliderPriceLabel">Цена:</label>
+    <Box className="sliderBox" sx={{ width: 280 }}>
       <Slider
-      id="slider"
+      id="priceSlider"
         getAriaLabel={() => 'Price range'}
-        value={value}
-        onChange={handleChange}
+        value={this.state.value}
+        onChange={this.changeValue}
+        onChangeCommitted={this.handleChange}
         valueLabelDisplay="auto"
-        getAriaValueText={valuetext}
+        min={this.state.minValue}
+        max={this.state.maxValue}
       />
     </Box>
     </div>
   );
+  }
 }
+
+export default FilterPriceComponent
+
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,4 +1,8 @@
-#demo-multiple-checkbox{
-    margin-top: 10px;
+.input-select-label{
+    margin-top: -5px;
 }
 
+.input-select-option fieldset{
+    border-radius: 20px;
+
+}
Index: phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/FilterSelectComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,2 +1,3 @@
+
 import * as React from 'react';
 import OutlinedInput from '@mui/material/OutlinedInput';
@@ -8,66 +9,100 @@
 import Checkbox from '@mui/material/Checkbox';
 import "./FilterSelectComponent.css"
+import axios from 'axios';
 
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
-      width: 250,
-    },
-  },
-};
+export class FilterSelectComponent extends React.Component {
 
-const categories = [
-  'Category1',
-  'Category2',
-  'Category3',
-  'Category4',
-  'Category5',
-  'Category6',
-  'Category7',
-  'Category8',
-  'Category9',
-  'Category10',
-];
+    constructor(props) {
+      super(props)
+        
+      this.state = {
+         pickedItems: [],
+         items: [],
+         type: '',
+         ITEM_HEIGHT: 48,
+         ITEM_PADDING_TOP: 8,
+         MenuProps: {}
+      }
+ 
+    }
 
-export default function MultipleSelectCheckmarks() {
-  const [category, setCategory] = React.useState([]);
+    componentDidMount(){
+        this.state.MenuProps = {
+            PaperProps: {
+              style: {
+                maxHeight: this.state.ITEM_HEIGHT * 5.5 + this.state.ITEM_PADDING_TOP,
+                width: 250,
+              },
+            },
+        }
 
-  const handleChange = (event) => {
-    const {
-      target: { value },
-    } = event;
-    setCategory(
-      // On autofill we get a stringified value.
-      typeof value === 'string' ? value.split(',') : value,
-    );
-  };
 
-  return (
-    <div>
-      <FormControl id="form" sx={{ m: 1, width: 200 }}>
-        <InputLabel id="demo-multiple-checkbox-label">Category</InputLabel>
-        <Select
-          size={"small"}
-          labelId="demo-multiple-checkbox-label"
-          id="demo-multiple-checkbox"
-          multiple
-          value={category}
-          onChange={handleChange}
-          input={<OutlinedInput label="Category" />}  // tuka odi soodvetno imeto na filter
-          renderValue={(selected) => selected.join(', ')}
-          MenuProps={MenuProps}
->
-          {categories.map((cat) => (
-            <MenuItem key={cat} value={cat}>
-              <Checkbox checked={category.indexOf(cat) > -1} />
-              <ListItemText primary={cat} />
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    </div>
-  );
+        let endpoint 
+        if(this.props.type == 'brands')
+        {
+          endpoint = '/brands'
+          this.setState({
+            type: 'Брендови'
+          })
+        }
+        else{
+          endpoint = '/shops'
+          this.setState({
+            type: 'Продавници'
+          })
+        }
+
+        axios.get(endpoint)
+        .then(response => this.setState({items: response.data}))
+        .catch(error => console.log(error))
+    }
+
+    handleChange = (event) => {
+       let value = event.target.value
+        this.setState({
+            pickedItems: typeof value === 'string' ? value.split(',') : value
+        }, ()=>{
+          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(',')})
+          }
+          
+        })
+      };
+
+
+  render() {
+    return (
+        <div>
+        <FormControl className="form-select-component" sx={{ m: 1, width: 200 }}>
+          <InputLabel className="input-select-label">{this.state.type}</InputLabel>
+          <Select
+            size={"small"}
+            labelId="input-label-id"
+            className="input-select-option"
+            multiple
+            value={this.state.pickedItems}
+            onChange={this.handleChange}
+            input={<OutlinedInput className='inner-input-selectfilter' label={this.state.type} />} 
+            renderValue={(selected) => selected.join(', ')}
+            MenuProps={this.state.MenuProps}
+  >
+            {this.state.items.map((item) => (
+              <MenuItem key={item} value={item}>
+                <Checkbox checked={this.state.pickedItems.indexOf(item) > -1} />
+                <ListItemText primary={item} />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </div>
+    )
+  }
 }
+
+export default FilterSelectComponent
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,5 +1,14 @@
-#searchfield{
-    display: flex;
-    border-radius: 20px;
-    height: fit-content;
+.search-phone-field{
+        /* display: flex;
+        height: fit-content;
+        border-radius: 20px; */
+        border: 1px solid rgb(131, 125, 125);
 }
+
+.search-phone-input{
+    margin:5px;
+}
+
+
+
+
Index: phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/FiltersComponents/SearchFieldComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -59,15 +59,27 @@
 
 export default class SearchFieldComponent extends Component {
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+       
+    }
+  }
+
+  handleChange = (event) => {
+    this.props.changeHandler({searchValue: event.target.value})
+  }
+  
   render() {
     return (
-        <Search id="searchfield">
+        <Search onChange={this.handleChange} className="search-phone-field">
         <SearchIconWrapper id="iconwrapper">
           <SearchIcon />
         </SearchIconWrapper>
         <StyledInputBase
-        id="search"
+          className="search-phone-input"
           placeholder="Пребарувај…"
           inputProps={{ 'aria-label': 'search' }}
-        />
+        />  
       </Search>
     )
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,12 @@
+.sortby-component-wrapper{
+    display: flex;
+    justify-content: end;
+    padding: 20px;
+    background-color: #DEE4E1
+}
+
+.sortby-component-select{
+    font-size: 15px;
+    width: 15%;
+    background-color: #e6f8ef;
+}
Index: phonelux-frontend/src/components/FiltersComponents/SortByComponent.js
===================================================================
--- phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/FiltersComponents/SortByComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,31 @@
+import React, { Component } from 'react'
+import './SortByComponent.css'
+
+export class SortByComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         sortBy: 'mostPopular'
+      }
+    }
+
+    handleChange = (e) => {
+      this.props.changeHandler({sortBy: e.target.value})
+    }
+
+    render() {
+    return (
+        <div className="sortby-component-wrapper">
+        <select defaultValue={'mostPopular'} onChange={this.handleChange} className='sortby-component-select'>
+          <option value="mostPopular">Најпопуларно</option>
+          <option value="ascending">Цена: Ниска {'>'} Висока</option>
+          <option value="descending">Цена: Висока {'>'} Ниска</option>
+        </select>
+      </div>
+    )
+  }
+}
+
+export default SortByComponent
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,19 +1,6 @@
-#filtersDiv{
-    background-color: #91AD7E;
+.grouped-filters-component{
+    background-color: #a6c9ab;
     display: flex;
-}
-
-/* #filtersDiv > div{
-    margin-left: 30px;
-} */
-
-
-#filtersDiv > div{
-    margin-left: 30px;
-}
-
-#filtersDiv > div:nth-of-type(4){
-    margin-top: 15px;
-    margin-left: 200px;
+    padding: 20px;
 }
 
Index: phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js
===================================================================
--- phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/GroupedFiltersComponent/GroupedFiltersComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -8,15 +8,49 @@
 import FilterPriceComponent from "../FiltersComponents/FilterPriceComponent"
 import SearchFieldComponent from '../FiltersComponents/SearchFieldComponent';
+import { Grid } from '@mui/material';
+import SortByComponent from '../FiltersComponents/SortByComponent';
 
 export default class GroupedFiltersComponent extends Component {
+
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      
+    }
+  }
+  
+
+  componentDidMount(){
+  
+  }
+
   render() {
     return (
-      <div id="filtersDiv">
-       <FilterSelectComponent/>
-       <FilterSelectComponent/>
-       <FilterPriceComponent/>
-       <SearchFieldComponent/>
+      <>
+      <div className="grouped-filters-component">
+        <Grid container spacing={5}>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterSelectComponent changeHandler={this.props.passFilters} type='shops'/>
+          </Grid>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterSelectComponent changeHandler={this.props.passFilters} type='brands'/>
+          </Grid>
+
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <FilterPriceComponent changeHandler={this.props.passFilters}/>
+          </Grid> 
+       
+          <Grid className='filterscomponent-grid-item' item xs={6} sm={4} md={3}>
+            <SearchFieldComponent changeHandler={this.props.passFilters} />
+          </Grid>
+       </Grid>
       </div>
+      <SortByComponent changeHandler={this.props.passFilters}/>
+      </>
     )
   }
+
 }
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,3 +1,3 @@
-#header{
+.header-component{
     background-color: #B6E2C8;
     display: flex;
@@ -5,5 +5,5 @@
 }
 
-#header img{
+.header-component img{
     width: 310px;
     height: 200px;
Index: phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js
===================================================================
--- phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ phonelux-frontend/src/components/HeaderComponent/HeaderComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
-import logo from '../../logo_phonelux.png'
+import { Link } from 'react-router-dom'
+import logo from '../../images/logo_phonelux.png'
 import './HeaderComponent.css'
 
@@ -6,6 +7,8 @@
   render() {
     return (
-      <div id='header'>
+      <div className='header-component'>
+          <Link style={{ textDecoration: 'none' }} to={"/"}>
         <img src={logo}></img>
+        </Link>
       </div>
     )
Index: phonelux-frontend/src/components/HomepageComponent.js
===================================================================
--- phonelux-frontend/src/components/HomepageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/HomepageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,69 @@
+import React, { Component } from 'react'
+import GroupedFiltersComponent from './GroupedFiltersComponent/GroupedFiltersComponent'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import PhoneCardGridComponent from './PhoneCardGridComponent/PhoneCardGridComponent'
+
+export class HomepageComponent extends Component {
+
+constructor(props) {
+  super(props)
+
+  this.state = {
+    shops: null,
+    brands: null,
+    priceRange: null,
+    searchValue: null,
+    sortBy: null
+  }
+}
+
+changeFilters = (e) => {
+
+  if(e.hasOwnProperty('priceRange'))
+  {
+    this.setState({
+      priceRange: e.priceRange
+    })
+  }
+
+  if(e.hasOwnProperty('shops'))
+  {
+    this.setState({
+      shops: e.shops
+    })
+  }
+
+  if(e.hasOwnProperty('brands'))
+  {
+    this.setState({
+      brands: e.brands
+    })
+  }
+
+  if(e.hasOwnProperty('searchValue'))
+  {
+    this.setState({
+      searchValue: e.searchValue
+    })
+  }
+
+  if(e.hasOwnProperty('sortBy'))
+  {
+    this.setState({
+      sortBy: e.sortBy
+    })
+  }
+}
+
+  render() {
+    return (
+        <>
+        <HeaderComponent/>
+        <GroupedFiltersComponent passFilters={this.changeFilters}/>
+        <PhoneCardGridComponent/>
+        </>
+    )
+  }
+}
+
+export default HomepageComponent
Index: phonelux-frontend/src/components/Layout.js
===================================================================
--- phonelux-frontend/src/components/Layout.js	(revision dfd5d87e3f5f69d6d595f8987195c739e3aa6466)
+++ 	(revision )
@@ -1,11 +1,0 @@
-import React, { Component } from 'react'
-
-export default class Layout extends Component {
-  render() {
-    return (
-      <div>
-        
-      </div>
-    )
-  }
-}
Index: phonelux-frontend/src/components/LoginPageComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginPageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginPageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import LoginFormComponent from './LoginRegisterComponents/LoginFormComponent'
+
+export class LoginPageComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         
+      }
+    }
+    
+
+  render() {
+    return (
+      <>
+        <HeaderComponent/>
+        <LoginFormComponent/>
+      </>
+    )
+  }
+}
+
+export default LoginPageComponent
Index: phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js
===================================================================
--- phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/LoginRegisterComponents/InputFormComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+
+export class InputFormComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         focused: false
+      }
+    }
+
+    handleFocus = (e) => {
+        this.setState({
+            focused: true
+        })
+    }
+
+  render() {
+
+    const {errorMessage,setValue, ...inputProps} = this.props
+
+
+    return (
+      <div className='inputform-validation-container'>
+        <input className = 'validation-inputs'  onChange={(e) => this.props.setValue(e)}
+        {...inputProps}
+        onBlur={this.handleFocus}
+        focused={this.state.focused.toString()}
+        />
+        <span className='form-error-span'>{this.props.errorMessage}</span>
+      </div>
+    )
+  }
+}
+
+export default InputFormComponent
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,146 @@
+.loginform-main-div {
+  text-align: center;
+  justify-content: center;
+  display: flex; 
+  padding-top: 40px;
+  padding-bottom: 90px;
+  background-color: #e1e3eb;
+  height: 100%;
+}
+
+
+.loginform-sub-main-div{
+  display: flex;
+  justify-content: center;
+  height: fit-content;
+  width: fit-content;
+  box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+  padding-top: 30px;
+  border-radius: 60px; 
+  background-color: white;
+  width: 65%;
+
+}
+.loginform-imgs-div {
+    padding-top: 20px;
+    justify-content: center;
+    display: flex;
+  }
+.loginform-image-container {
+  background-color: rgb(223, 221, 221); 
+  border-radius: 150px;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 115px;
+  width: 115px;
+}
+.loginform-profile-img {
+  height: 100px;
+  width: 100px;
+  border-radius: 130px;
+} 
+
+.loginform-sub-main-div > div{
+  margin-bottom: 50px;
+  margin-left: 80px;
+  margin-right: 80px;
+}
+
+.loginform-email-input > .inputform-validation-container > .validation-inputs{
+  width: 50%;
+}
+
+.loginform-password-input > .inputform-validation-container > .validation-inputs{
+  width: 50%;
+}
+
+.validation-inputs{
+    width: 100%;
+    height: 50px;
+    border-radius: 60px;
+    box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+    border: none;
+    outline: none;
+    background-color: #fff;
+}
+
+
+.inputform-validation-container{
+  width: 100%;
+  justify-content: center;
+}
+
+
+.validation-inputs{
+    padding-left: 20px;
+    font-size: 22px;
+    width: 100%;
+}
+
+
+.loginform-button{
+    width: 80%;
+    height: 50px;
+    border-radius: 60px;
+    background-color: #91AD7E ;
+    color: white;
+    font-size: 25px;
+    border: none;
+    margin-top: 30px;
+}
+
+.loginform-button:hover{
+  background-color: #5c6b52 ;
+  cursor:pointer;
+}
+
+.form-error-span{
+  font-size: 12px;
+  padding: 3px;
+  color:red;
+  display: block;
+  justify-content: center;
+  display: none;
+}
+
+.loginform-sub-main-div > div{
+  width: 90%;
+}
+
+.loginform-button{
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.inputform-validation-container input:invalid[focused="true"] ~ span{
+  display: block;
+}
+
+.loginform-password-input{
+  margin-top: 15px;
+}
+
+.inputform-validation-container input:invalid[focused="true"]{
+  border: 1px solid red;
+}
+
+.form-error-span{
+  width: 100%;
+}
+
+.register-link{
+    font-size: 25px;
+    font-weight: 400;
+    color: rgb(53, 99, 70);
+    text-decoration: none;
+    color: blue;
+}
+ .register-link > a{
+     color: rgb(53, 99, 70);
+     text-decoration: none;
+ }
+
+ .register-link > a:hover{
+  color: blue;
+ }
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import EmailIcon from '@mui/icons-material/Email';
+import "./LoginFormComponent.css"
+import InputFormComponent from './InputFormComponent';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+
+
+export class LoginFormComponent extends Component {
+
+  constructor(props) {
+    super(props)
+  
+    this.state = {
+      email: '',
+      password: '',
+    }
+  }
+  
+  changeHandler = (e) =>{
+      this.setState({[e.target.name] : e.target.value})
+  }
+
+  submitHandler = (e) => {
+      e.preventDefault()
+      var qs = require('qs');
+      var dataToSend = qs.stringify({
+        'email': this.state.email,
+        'password': this.state.password
+      });
+
+      var config = {
+        method: 'post',
+        url: '/login',
+        headers: { 
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        data : dataToSend
+      };
+
+      axios(config)
+      .then(function (response) {
+        console.log(response.data);
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+  }
+
+  setValue = (e) => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+ 
+  }
+  
+
+render() {
+
+  const {email,password} = this.state
+
+  return (
+      <div className="loginform-main-div">
+       <div className="loginform-sub-main-div">
+         <div>
+
+           <div className="loginform-imgs-div">
+             <div className="loginform-image-container">
+               <img src={profileIcon} alt="profile" className="loginform-profile-img"/>
+             </div>
+           </div>
+  
+           <form onSubmit={this.submitHandler}>
+             <h1>Најава</h1>
+
+             <div className='loginform-email-input'>
+             <InputFormComponent type='text' placeholder='Е-маил адреса' name='email' required={true}
+              setValue={this.setValue} errorMessage='Полето е задолжително!'/>
+             </div>
+  
+             <div className="loginform-password-input">
+              <InputFormComponent type='password' placeholder='Лозинка' name='password' 
+               setValue={this.setValue} required={true}
+                errorMessage='Полето е задолжително!'/>
+             </div>
+
+  
+            <div className="loginform-button-wrapper">
+            <button className='loginform-button' type="submit">Најави се</button>
+            </div>  
+           </form>
+           <p className='register-link'><Link to={"/register"}><a>Регистрирај се</a></Link></p>
+  
+         </div>
+         
+       </div>
+      </div>
+    );
+}
+}
+
+export default LoginFormComponent
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,161 @@
+.registerform-main-div {
+    text-align: center;
+    justify-content: center;
+    display: flex; 
+    padding-top: 40px;
+    padding-bottom: 90px;
+    background-color: #e1e3eb;
+    height: 100%;
+  }
+  body{height: 100%;}
+
+  .registerform-sub-main-div{
+    display: flex;
+    justify-content: center;
+    height: fit-content;
+    width: fit-content;
+    box-shadow: 11px 12px 13px 12px rgb(207, 207, 207);
+    padding-top: 30px;
+    border-radius: 60px; 
+    background-color: white;
+    width: 65%;
+
+  }
+  .registerform-imgs-div {
+      padding-top: 20px;
+      justify-content: center;
+      display: flex;
+    }
+  .registerform-image-container {
+    background-color: rgb(223, 221, 221); 
+    border-radius: 150px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 115px;
+    width: 115px;
+  }
+  .registerform-profile-img {
+    height: 100px;
+    width: 100px;
+    border-radius: 130px;
+  } 
+
+  .registerform-sub-main-div > div{
+    margin-bottom: 50px;
+    margin-left: 80px;
+    margin-right: 80px;
+  }
+
+  .validation-inputs{
+      width: 300px;
+      height: 50px;
+      border-radius: 60px;
+      box-shadow: inset 0px 0px 25px 0px rgb(197, 189, 189);
+      border: none;
+      outline: none;
+      background-color: #fff;
+  }
+
+
+  .registerform-name-lastname div{
+    width: 50%;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .registerform-name-lastname{
+    display: flex;
+  }
+
+  .registerform-name-lastname input{
+    width: 90%;
+  }
+
+  .registerform-confirm-password-input{
+    padding-top: 20px;
+    width: 100%;
+  }
+
+  .inputform-validation-container{
+    width: 100%;
+  }
+
+
+  .validation-inputs{
+      padding-left: 20px;
+      font-size: 22px;
+      width: 100%;
+  }
+
+  .registerform-password-input > .inputform-validation-container > .validation-inputs{
+    width: 50%;
+  }
+
+  .registerform-password-input{
+    margin-top: 20px;
+    width: 100%;
+}
+
+.registerform-email-input{
+    padding-top: 20px;
+    width: 100%;
+}
+
+.lastname-input{
+    padding-top: 20px;
+}
+
+.registerform-confirm-password-input input{
+  width: 50%;
+}
+
+.password-input input{
+width: 50%;
+} 
+
+.registerform-email-input input{
+  width: 50%;
+}
+
+
+  .registerform-button{
+      width: 80%;
+      height: 50px;
+      border-radius: 60px;
+      background-color: #91AD7E ;
+      color: white;
+      font-size: 25px;
+      border: none;
+      margin-top: 30px;
+  }
+
+  .registerform-button:hover{
+    background-color: #5c6b52 ;
+    cursor:pointer;
+  }
+
+  .form-error-span{
+    font-size: 12px;
+    padding: 3px;
+    color:red;
+    display: block;
+    justify-content: center;
+    display: none;
+  }
+
+  .inputform-validation-container input:invalid[focused="true"] ~ span{
+    display: block;
+  }
+
+  .inputform-validation-container  input:invalid[focused="true"]{
+    border: 1px solid red;
+  }
+
+
+  .form-error-span{
+    width: 100%;
+  }
+
+
+
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,121 @@
+import React, { Component } from 'react'
+import profileIcon from "../../images/profileicon.png";
+import "./RegisterFormComponent.css"
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import InputFormComponent from './InputFormComponent';
+import { Input } from '@mui/material';
+import axios from 'axios';
+
+
+export class RegisterFormComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        password: '',
+        confirmPassword:'',
+      }
+    }
+  
+    submitHandler = (e) => {
+        e.preventDefault()
+
+        let dataToSend = JSON.stringify({
+          "firstName": this.state.firstName,
+          "lastName": this.state.lastName,
+          "email": this.state.email,
+          "password": this.state.password
+        });
+
+        let config = {
+          method: 'post',
+          url: '/registration',
+          headers: { 
+            'Content-Type': 'application/json'
+          },
+          data : dataToSend
+        };
+
+        axios(config)
+        .then(function (response) {
+          console.log(response);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+
+    }
+
+    setValue = (e) => {
+      this.setState({
+        [e.target.name]: e.target.value
+      })
+    }
+
+
+    
+
+  render() {
+
+    const {firstName,lastName,email,password,confirmPassword} = this.state
+
+    return (
+        <div className="registerform-main-div">
+         <div className="registerform-sub-main-div">
+           <div>
+
+             <div className="registerform-imgs-div">
+               <div className="registerform-image-container">
+                 <img src={profileIcon} alt="profile" className="registerform-profile-img"/>
+               </div>
+             </div>
+    
+             <form onSubmit={this.submitHandler}>
+               <h1>Регистрација</h1>
+
+               <div className='registerform-name-lastname'>
+                 <InputFormComponent type='text' placeholder='Име' name='firstName' required={true}
+                 setValue={this.setValue} errorMessage='Името е задолжително!'/>
+
+                 <InputFormComponent type='text' placeholder='Презиме' name='lastName' required={true}
+                 setValue={this.setValue}  errorMessage='Презимето е задолжително!'/>
+               </div>
+               
+               <div className='registerform-email-input'>
+               <InputFormComponent type='email' placeholder='Е-маил адреса' name='email' required={true}
+                setValue={this.setValue} errorMessage='Погрешен формат на е-маил адреса!'/>
+               </div>
+    
+               <div className="registerform-password-input">
+                <InputFormComponent type='password' placeholder='Лозинка' name='password' 
+                 setValue={this.setValue} pattern='^(?=.*[0-9])(?=.*[A-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,}$' required={true}
+                  errorMessage='Лозинката мора да има должина најмалку 8 карактери, 
+                 да содржи најмалку една голема буква, еден број и еден посебен знак!'/>
+               </div>
+
+               <div className="registerform-confirm-password-input">
+               <InputFormComponent type='password' placeholder='Потврди лозинка' name='confirmPassword' required={true} 
+               pattern={this.state.password}
+               setValue={this.setValue} errorMessage='Лозинките не се исти!'/>
+               </div>
+    
+              <div className="registerform-button-wrapper">
+              <button className='registerform-button' type="submit">Регистрирај се</button>
+              </div>  
+               
+             </form>
+    
+           </div>
+           
+         </div>
+        </div>
+      );
+  }
+}
+
+export default RegisterFormComponent
Index: phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css
===================================================================
--- phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PaginationComponent/PaginationComponent.css	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,7 @@
+.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)
+++ phonelux-frontend/src/components/PaginationComponent/PaginationComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,26 @@
+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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,52 @@
+.phonecard{
+    background-color: #B6E2C8;
+    padding:15px;
+    justify-items: center;
+    width: 250px;
+    height: 400px;
+    border-radius: 25px;
+}
+
+.phonecard:hover{
+    background-color: #84c69f;
+    cursor: pointer;
+}
+
+.phonecard img{
+    width: 200px;
+    height: 250px;
+    border-radius: 25px;
+    margin-left: 25px;
+}
+
+.phonecard-paper{
+    width: fit-content;
+    border-radius: 25px;    
+}
+
+.phonecard-lowestprice-header, .phonecard-totaloffers-header{
+    margin-top: -10px;
+    color: rgb(34, 106, 106);
+    text-align: center;
+}
+
+.phonecard-model-header{
+    text-align: center;
+}
+
+
+.phonecard-lowestprice{
+    font-size: 20px;
+}
+
+.phonecard-totaloffers{
+    font-size: 20px;
+}
+
+.phonecard > h5 > p{
+    display: inline;
+}
+
+.phonecard > h6 > 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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+import './PhoneCardComponent.css'
+import Paper from '@mui/material/Paper';
+import { Link } from 'react-router-dom';
+
+export class PhoneCardComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         
+      }
+    }
+
+  
+    
+  render() {
+    return (
+      <Link style={{ textDecoration: 'none' }} to={"phones/"+this.props.id}>
+      <Paper sx={{borderRadius: '50px'}} className='phonecard-paper' elevation={3}>
+      <div className='phonecard'>
+        <img src={this.props.image_url}/>
+        <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>
+      </div>
+      </Paper>
+      </Link>
+    )
+  }
+}
+
+export default PhoneCardComponent
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,17 @@
+
+
+.phonecardgrid-wrapper{  
+    background-color: #DEE4E1;
+}
+
+
+.phonecardgrid-grid-container{
+    width: fit-content;
+}
+
+.phonecardgrid-item{
+    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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,93 @@
+import { Grid } 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'
+import './PhoneCardGridComponent.css'
+import phoneImage from '../../images/phone.png'
+
+export class PhoneCardGridComponent extends Component {
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      phones: [],
+      loading: true,
+      currentPage: 1,
+      phonesPerPage: 12,
+      numberOfPages: 0,
+      currentPhones: []
+    }
+
+  }
+
+  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))
+      }
+      )
+      .catch(error => console.log(error))
+  }
+
+  setNewPage = (newPage) => {
+    if(newPage == '')
+    {
+      newPage = this.state.currentPage-1
+    }
+
+    if(newPage == '')
+    {
+      newPage = this.state.currentPage+1
+    }
+
+
+    const indexOfLastPhone = parseInt(newPage) * this.state.phonesPerPage;
+    const indexOfFirstPhone = indexOfLastPhone - this.state.phonesPerPage;
+
+    const currPhones = this.state.phones.slice(indexOfFirstPhone, indexOfLastPhone)
+
+    this.setState({
+      currentPage: parseInt(newPage),
+      currentPhones: currPhones
+    })
+
+  }
+
+  render() {
+    return (
+      <div className='phonecardgrid-wrapper'>
+      <Grid className='phonecardgrid-grid-container' 
+      container 
+      alignItems="center"
+      justifyItems="center"
+       spacing={2}>
+
+        {this.state.currentPhones.map((phone) => <Grid className='phonecardgrid-item' item md={3}>
+          <PhoneCardComponent key={phone.id} 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>
+    )
+  }
+}
+
+export default PhoneCardGridComponent
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+
+export class PhoneOfferComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+       
+      }
+    }
+    
+    
+  render() {
+    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>{this.props.price} ден.</td>
+      <td></td>
+      </tr>
+    )
+  }
+}
+
+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/PhonePageComponent.js
===================================================================
--- phonelux-frontend/src/components/PhonePageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/PhonePageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,36 @@
+import axios from 'axios'
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import PhoneWithOffersComponent from './PhoneWithOffersComponent/PhoneWithOffersComponent'
+
+export class PhonePageComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+        phoneId: window.location.href.split('/')[4],
+        phone: null
+      }
+    }
+
+    componentDidMount(){
+        axios.get('/phones/'+this.state.phoneId)
+        .then(response => {
+            this.setState({
+                phone: response.data
+            })
+        }).catch(error => console.log(error))
+    }
+
+  render() {
+    return (
+      <>
+      <HeaderComponent/>
+      <PhoneWithOffersComponent phoneId={this.state.phoneId} {...this.state.phone}/>   
+      </>
+    )
+  }
+}
+
+export default PhonePageComponent
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,52 @@
+.phone-with-offers-sub-main{
+    background-color: #DEE4E1;
+}
+
+.phone-with-offers-totaloffers-div{
+    display: flex;
+    justify-content: end;
+}
+
+.phone-with-offers-totaloffers-div > h3{
+    margin-right: 30px;
+}
+
+.phone-with-offers-image-wrapper{
+    display: flex; 
+    justify-content: center;
+}
+
+.phone-with-offers-image{
+    width: 250px;
+    height: 300px;
+}
+
+.phone-with-offers-table-row:nth-of-type(even){
+    background-color: #DEE4E1;
+}
+
+.phone-with-offers-model-wrapper{
+    display: flex;
+    justify-content: center;
+}
+
+.phone-with-offers-table{
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.phone-with-offers-table-row{
+    border: 1px solid gainsboro;
+    padding: 20px ;
+}
+
+.phone-with-offers-table td{
+    text-align: center;
+    word-wrap: break-word;
+}
+
+.phone-with-offers-table-head{
+    background-color: #a6c9ab;
+    font-size: 22px;
+}
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 dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,75 @@
+import { Paper } from '@mui/material'
+import axios from 'axios'
+import React, { Component } from 'react'
+import PhoneOfferComponent from '../PhoneOfferComponent/PhoneOfferComponent'
+import './PhoneWithOffersComponent.css'
+import phoneImg from '../../images/phone.png'
+
+export class PhoneWithOffersComponent extends Component {
+
+    constructor(props) {
+      super(props)
+    
+      this.state = {
+         phone_offers: []
+      }
+    }
+
+    componentDidMount(){
+      axios.get('/phones/offers/'+this.props.phoneId)
+      .then(response => {
+          this.setState({
+              phone_offers: response.data
+          })
+      }).catch(error => console.log(error))
+    }
+
+  render() {
+    return ( 
+      <div className='phone-with-offers-main'>
+
+        <div className='phone-with-offers-sub-main'>
+            <div className='phone-with-offers-totaloffers-div'>
+                <h3>Понуди: {this.props.total_offers}</h3>
+            </div>
+
+            <div className='phone-with-offers-image-wrapper'>
+              <Paper className='phone-with-offers-paper' elevation={5}>
+                <img className='phone-with-offers-image' src={this.props.image_url == null ? phoneImg : this.props.image_url}/>
+                </Paper>
+            </div>
+
+            <div className='phone-with-offers-model-wrapper'>
+            <h1>{this.props.model}</h1>
+            </div>
+        </div>
+
+        <div className='phone-with-offers-section'>
+
+          <table cellPadding={20} className='phone-with-offers-table'>
+            <thead className='phone-with-offers-table-head'>
+              <tr>
+              <th>Продавница</th>
+              <th>Име на понуда</th>
+              <th>Цена</th>
+              <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {
+                this.state.phone_offers.map((offer) => <PhoneOfferComponent key={offer.offer_id} 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}
+                />) 
+              }
+            </tbody>
+          </table>
+
+        </div>
+
+      </div>
+    )
+  }
+}
+
+export default PhoneWithOffersComponent
Index: phonelux-frontend/src/components/RegisterPageComponent.js
===================================================================
--- phonelux-frontend/src/components/RegisterPageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
+++ phonelux-frontend/src/components/RegisterPageComponent.js	(revision dbd483418f962e3b40992a977eef4ece28007aa2)
@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import HeaderComponent from './HeaderComponent/HeaderComponent'
+import RegisterFormComponent from './LoginRegisterComponents/RegisterFormComponent'
+
+export class RegisterPageComponent extends Component {
+  render() {
+    return (
+      <>
+        <HeaderComponent/>
+        <RegisterFormComponent/>
+      </>
+    )
+  }
+}
+
+export default RegisterPageComponent
