diff --git a/web/components/Filters.js b/web/components/Filters.js
index 74dac2b..5fe3ce3 100644
--- a/web/components/Filters.js
+++ b/web/components/Filters.js
@@ -24,8 +24,8 @@ export default class Filters extends React.Component {
             CIJENA
           </div>
 
-          <div className="filter-content">
-            od <input></input> od <input></input>
+          <div className="filter-content value-between-box">
+            izmedju <input></input> i <input></input>
           </div>
 
         </div>
@@ -54,9 +54,9 @@ export default class Filters extends React.Component {
           <div className="filter-title">
             KVADRATA
           </div>
-          <div className="filter-content">
-              od <input></input>
-              do <input></input>
+          <div className="filter-content value-between-box">
+              izmedju <input></input>
+              i <input></input>
           </div>
         </div>
         <div className="filter-row filter-property-rooms">
diff --git a/web/components/ListingDetails.js b/web/components/ListingDetails.js
index e69de29..52a16b1 100644
--- a/web/components/ListingDetails.js
+++ b/web/components/ListingDetails.js
@@ -0,0 +1,84 @@
+import React from 'react';
+
+export default class ListingDetails extends React.Component {
+  onBackClick() {
+    if (this.props.onBackClick) {
+      this.props.onBackClick();
+    }
+  }
+  render() {
+    return (
+      <div className="ld-container">
+        <div className="ld-header">
+          <div className="back-to-results">
+            <button className="back-to-results-btn"
+              onClick={this.onBackClick.bind(this)}>
+              <i className="fa fa-arrow-left" aria-hidden="true"></i>
+              <span>
+                Nazad na rezultate
+              </span>
+            </button>
+          </div>
+          <button className="hide-listing">
+            <i className="fa fa-thumbs-o-down" aria-hidden="true"></i>
+
+            <span>
+              Sakrij
+            </span>
+          </button>
+        </div>
+
+        <div className="ld-details">
+          <div className="ld-image-container">
+            <img src="https://d1qwdw9cs0do74.cloudfront.net/150698038/640x480"></img>
+          </div>
+          <div className="ld-price-address-box">
+            <div className="ld-price">
+              120 000 KM
+            </div>
+
+            <div className="ld-address">
+              <div className="">Hakije Turajlica 4</div>
+              <div className="">Novi Grad, Sarajevo</div>
+            </div>
+          </div>
+
+          <div className="ld-features">
+            <div className="ld-feature-box">
+              <i className="fa fa-bed"></i>
+              4 sobe
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              88m2
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              1. sprat
+            </div>
+            <div className="ld-feature-box">
+              <i className="fa fa-home"></i>
+              Balkon
+            </div>
+          </div>
+          <div className="ld-check-availability">
+            <button>Kontaktiraj</button>
+          </div>
+          <div className="ld-description">
+            Agencija "Nekretnina", (www.nekretnina.ba), prodaje komforan trosoban stan, 67m2, na veoma lijepoj lokaciji, Dobrinja 3. Stan se nalazi na visokom prizemlju stambene zgrade od samo četiri etaže. 
+            Sastoji se od: Ulaznog hodnika, dnevnog boravka, kuhinje, trpezarije, iz koje se izlazi na balkon, dvije spavaće sobe i kupatila. Stan je dvostran a posjeduje i podrumsku prostoriju. Veoma miran kvart sa odličnim komšilukom, okružen šetalištima i parkovima za djecu, sa javnim i privatnim parkingom. Stan zahtjeva dodatna ulaganja po vlastitom izboru i odlična je ponuda za višečlanu porodicu. 
+            Stan je trenutno bez namještaja i kuhinje, spreman za obnovu i useljenje.
+              U neposrednoj blizini se nalaze sve važnije ustanove, osnovna i srednja škola, Peta gimnazija, vrtići, uslužne djelatnosti te gradski saobraćaj. Molimo sve ozbiljno zainteresovane osobe da se jave za dodatne informacije.
+                Želite kvalitetno investirati u nekretnine? Nazovite nas!
+          </div>
+          <div className="ld-read-more">
+            <a href="">Procitajte vise</a>
+          </div>
+
+          <div className="ld-footer">
+          </div>
+        </div>
+      </div>);
+  }
+}
+
diff --git a/web/components/Listings.js b/web/components/Listings.js
index 4624580..b4fd032 100644
--- a/web/components/Listings.js
+++ b/web/components/Listings.js
@@ -1,28 +1,30 @@
 import React from 'react';
 
 export default class Listings extends React.Component {
+  onListingClick() {
+    if (this.props.onListingClick) {
+      this.props.onListingClick();
+    }
+  }
   render() {
 
     return (
       <div className="listings">
         <div className="listings-header">
-          <div className="select-group">
-            <select name="listings-type" id="listings-type">
-              <option value="cijena">Cijena: od najmanje</option>
-            </select>
+          <div className="select-container">
+            <div className="select-group">
+              <select name="listings-type" id="listings-type">
+                <option value="cijena">Cijena: od najmanje</option>
+              </select>
+            </div>
           </div>
           <div className="listings-count">
             322 rezultata
           </div>
-          <div className="listings-options">
-            <div className="lo-list"></div>
-            <div className="lo-grid"></div>
-            <div className="lo-single"></div>
-          </div>
         </div>
 
         <div className="listings-items">
-          <div className="property-list-item">
+          <div className="property-list-item" onClick={this.onListingClick.bind(this)}>
             <div className="pli-image">
               <img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
               </div>
@@ -42,7 +44,7 @@ export default class Listings extends React.Component {
             </div>
             <div className="property-list-item">
               <div className="pli-image">
-                <img src="https://d37lj287rvypnj.cloudfront.net/150225204/medium" alt=""></img>
+                <img src="https://d37lj287rvypnj.cloudfront.net/151086207/medium" alt=""></img>
                 </div>
                 <div className="pli-details">
                   <div className="price">12 000 KM</div>
diff --git a/web/components/Main.js b/web/components/Main.js
index 33bebe5..c4dfe66 100644
--- a/web/components/Main.js
+++ b/web/components/Main.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import Filters from './Filters';
 import Listings from './Listings';
+import ListingDetails from './ListingDetails';
 import { pacSelectFirst } from '../helpers/googleMaps';
 
 class Main extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      listingDetails: false
     };
   }
 
@@ -74,9 +76,40 @@ class Main extends React.Component {
     });
   }
 
+  onListingClick() {
+    this.setState({
+      listingDetails: true
+    })
+  }
+
+  onBackClick() {
+    this.setState({
+      listingDetails: false
+    })
+  }
+
+  renderRightContent() {
+
+    const children = [];
+
+    if (this.state.listingDetails) {
+      children.push(<ListingDetails onBackClick={this.onBackClick.bind(this)}/>);
+    } else {
+      children.push(<Filters onClose={this.onCloseClick.bind(this)}/>);
+      children.push(<Listings onListingClick={this.onListingClick.bind(this)}/>);
+    }
+    const content = (
+      <div className="right-content">
+        {children}
+      </div>);
+
+    return content;
+  }
+
   render() {
     const leftStyle  = {};
     const rightStyle = {};
+    const listingDetails = true;
 
     let leftClass    = 'left-base';
     let rightClass   = 'right-base';
@@ -107,10 +140,7 @@ class Main extends React.Component {
         </div>
 
         <div id="right" style={rightStyle} className={rightClass}>
-          <div className="right-content">
-            <Filters onClose={this.onCloseClick.bind(this)}/>
-            <Listings />
-          </div>
+          {this.renderRightContent()}
         </div>
 
         <div id="left" style={leftStyle} className={leftClass}>
diff --git a/web/dist/main.css b/web/dist/main.css
index e4e2af1..2c5e5df 100644
--- a/web/dist/main.css
+++ b/web/dist/main.css
@@ -3,6 +3,8 @@ body {
   height: 100%;
   font-family: "Arimo", "Roboto" , Helvetica, Arial, sans-serif;
   color: #333333;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
 }
 
 html {
@@ -202,7 +204,7 @@ html {
 .filter-btn {
   display: inline-block;
   border: 1px solid #b6d53b;;
-  padding: 6px 12px;
+  padding: 8px 12px;
   cursor: pointer;
   margin: 0 6px 6px 0;
   color: #2d3138;
@@ -216,7 +218,12 @@ html {
   flex-grow: 1;
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 35px;
+}
+
+.value-between-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .property-type-btn {
@@ -280,6 +287,8 @@ html {
 .listings-header {
   padding: 10px 0;
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 #listings-type {
@@ -296,6 +305,10 @@ html {
   width: 101%;
 }
 
+.select-container {
+  width: 100%;
+}
+
 .select-group {
   position: relative;
   display: inline-flex;
@@ -311,24 +324,12 @@ html {
 }
 
 .listings-count {
-  display: inline-block;
-  width: 274px;
+  right: 5px;
   color: #878698;
   font-size: 16px;
-  text-align: center;
   letter-spacing: .5px;
-  vertical-align: middle;
-}
-
-.listings-options {
-  position: absolute;
-  right: 0;
-  top: 0;
-  right: 0;
-  display: flex;
-  height: 100%;
-  vertical-align: middle;
-  align-items: center;
+  min-width: 150px;
+  text-align: right;
 }
 
 .property-list-item {
@@ -354,7 +355,7 @@ html {
   display:  flex;
   flex-direction: column;
   flex: 3 3;
-  letter-spacing: 1.4px;
+  letter-spacing: 1px;
 }
 
 .price {
@@ -411,7 +412,7 @@ html {
     background: #fff;
     cursor: pointer;
     border-radius: 3px;
-    height: 100%;
+    height: inherit;
   }
 
   .property-list-item:hover {
@@ -423,7 +424,7 @@ html {
   }
 
   .description {
-    font-size: 20px;
+    font-size: 18px;
     margin-top: 15px;
   }
 
@@ -542,4 +543,170 @@ html {
   .filter-property-types .filter-content {
     width: 100%;
   }
+
+  .value-between-box {
+    justify-content: space-around;
+  }
+}
+
+/*
+ * Listing details
+ */
+
+.ld-container {
+  margin: 10px;
+}
+
+.ld-header {
+  display: flex;
+}
+
+.ld-header .back-to-results {
+  width: 100%;
+}
+
+.back-to-results-btn {
+  width: 215px;
+  padding: 5.5px 10px;
+  border: 1px solid #e6e6e6;
+  font-size: 16px;
+  letter-spacing: .26px;
+  border-radius: 3px;
+  background: #fff;
+  color: #5ab8f8;
+  cursor: pointer;
+}
+
+.hide-btn {
+
+}
+
+.back-to-results-btn span {
+  padding-left: 5px;
+}
+
+.ld-header .hide-listing {
+  max-width: 100px;
+  text-align: right;
+}
+
+.ld-details {
+  border: 1px solid #e6e6e6;
+  padding: 0 10px;
+  margin-top: 15px;
+}
+
+.ld-image-container {
+  height: 375px;
+  width: 500px;
+  text-align: center;
+}
+
+.ld-image-container img {
+  width: 100%;
+  height: 100%;
+}
+
+.ld-price-address-box {
+  padding-top: 20px;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.ld-price {
+  font-size: 28px;
+  border-right: 1px solid #e6e6e6;
+  flex: 3 3;
+}
+
+.ld-address {
+  flex: 5 5;
+  padding-left: 15px;
+  line-height: 1.5;
+}
+
+.ld-features {
+  border-top: 1px solid #e6e6e6;
+  border-bottom: 1px solid #e6e6e6;
+  padding: 15px 0;
+  margin-top: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.ld-feature-box {
+  flex: 1 1;
+  text-align: center;
+}
+
+.ld-feature-box i {
+  display: block;
+  font-size: 32px;
+}
+
+.ld-description {
+  line-height: 2;
+  font-size: 14px;
+  position: relative;
+  max-height: 7em;
+  overflow: hidden;
+}
+
+.ld-description:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+  content: '';
+  pointer-events: none;
+  background-image: #fff;
+  background-image: -webkit-gradient(bottom,from(#fff),to(hsla(0,0%,100%,0)));
+  background-image: -webkit-linear-gradient(bottom,#fff,hsla(0,0%,100%,0));
+}
+
+.ld-check-availability {
+  text-align: center;
+  margin: 0 25px;
+  padding: 15px 0;
+}
+
+.ld-check-availability button {
+  font-size: 18px;
+  padding: 15px 0;
+  background-color: #51bc6a;
+  color: #ffffff;
+  border-radius: 3px;
+  width: 242px;
+  letter-spacing: 0.4px;
+  border: 1px solid  #51bc6a;
+  cursor: pointer;
+}
+
+.ld-read-more {
+  text-align: center;
+  padding: 20px;
+}
+
+.ld-read-more a {
+  text-decoration: none;
+  color: green;
+}
+
+
+@media (max-width: 768px) {
+  .ld-image-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .ld-price {
+    font-size: 18px;
+    min-width: 110px;
+  }
+
+  .ld-address {
+
+  }
 }