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
