diff --git a/graphql/schema.graphql b/graphql/schema.graphql
index 4ec5315..663dd34 100644
--- a/graphql/schema.graphql
+++ b/graphql/schema.graphql
@@ -3,6 +3,7 @@ type Building {
   street_number: String,
   street_name: String,
   building_name: String,
+  display_name: String,
   postcode: String,
   ward: String,
   conservation_area: String,
diff --git a/helpers/createDataObj.js b/helpers/createDataObj.js
index ebb7510..e038770 100644
--- a/helpers/createDataObj.js
+++ b/helpers/createDataObj.js
@@ -1,10 +1,19 @@
 const createDataObj = (data) => {
   return data.map((item, i) => {
+
+    let display_name;
+    if (item['Lower Case Building Name']) {
+      display_name = item['Lower Case Building Name']
+    } else {
+      display_name = item['Lower Case Street Name'];
+    }
+
     return {
       id: ++i,
       street_number: item['Street Number'],
       street_name: item['Lower Case Street Name'],
       building_name: item['Lower Case Building Name'],
+      display_name: display_name,
       postcode: item['Post Code'],
       ward: item['Ward'],
       conservation_area: item['Conservation Area'],
diff --git a/middleware/graphql.js b/middleware/graphql.js
index 6adc65e..5cb3f8d 100644
--- a/middleware/graphql.js
+++ b/middleware/graphql.js
@@ -9,7 +9,7 @@ const grapqlSchema = buildSchema(
 );
 
 const getBuildings = async () => {
-  return await islington.find().sort({ id: 1 });
+  return await islington.find().sort({ display_name: 1 });
 };
 
 module.exports = graphqlHTTP({
diff --git a/models/islington.js b/models/islington.js
index 650555d..d36bfd7 100644
--- a/models/islington.js
+++ b/models/islington.js
@@ -20,6 +20,7 @@ const islingtonSchema = new Schema({
   street_number: String,
   street_name: String,
   building_name: String,
+  display_name: String,
   postcode: String,
   ward: String,
   conservation_area: String,
diff --git a/src/components/App.js b/src/components/App.js
index 1ee643d..ef2c39f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -50,7 +50,7 @@ class App extends Component {
       this.setState({
         building: building,
         mapCenter: [building.longitude, building.latitude],
-        mapZoom: [15.5],
+        mapZoom: 15.5,
       })
     }
 
@@ -64,7 +64,8 @@ class App extends Component {
   isHomePage = () => {
     this.setState({
       isHome: true,
-      isAbout: false
+      isAbout: false,
+      building: {}
     });
   }
 
@@ -145,6 +146,7 @@ const query = gql`
       postcode
       ward
       building_name
+      display_name
       conservation_area
       date_built_actual
       date_built_estimate
diff --git a/src/components/BuildingDetails.js b/src/components/BuildingDetails.js
index 675a00f..57176d6 100644
--- a/src/components/BuildingDetails.js
+++ b/src/components/BuildingDetails.js
@@ -120,7 +120,7 @@ class BuildingDetails extends Component {
       </section>
 
         <section>
-          <h4 className="ma0 f5 b"> Description  </h4>
+          <h4 className="f5 b"> Description  </h4>
           <p>{description}</p>
         </section>
 
diff --git a/src/components/BuildingsList.js b/src/components/BuildingsList.js
index 7f34715..d8f4a0f 100644
--- a/src/components/BuildingsList.js
+++ b/src/components/BuildingsList.js
@@ -12,10 +12,10 @@ class BuildingsList extends Component {
   render() {
     const { buildings = [], handleBuildingDetails } = this.props;
     const buildingCards = buildings.map((building, i) => {
-      return <BuildingCard 
-        key={i} 
-        building={building} 
-        handleBuildingDetails={handleBuildingDetails} 
+      return <BuildingCard
+        key={i}
+        building={building}
+        handleBuildingDetails={handleBuildingDetails}
         inputRef={this.props.inputRef}/>
     })
 
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 6795656..8107612 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -30,12 +30,12 @@ const Footer = () => {
       </section>
 
       <section className="w-33-l pa2">
-        <div className="flex align-center justify-end">
+        <div className="flex items-center justify-center justify-end-l">
           <div>
-          <img className="w4" alt="Partner: Historic England" src={historicEngland} />
+          <img className="w5" alt="Partner: Historic England" src={historicEngland} />
           </div>
           <div>
-          <img className="w4" alt="Partner: London Borough of Islington" src={islington} />
+          <img className="w5" alt="Partner: London Borough of Islington" src={islington} />
           </div>
         </div>
       </section>
diff --git a/src/components/Map.js b/src/components/Map.js
index 8bb5c2a..ce0ac7a 100644
--- a/src/components/Map.js
+++ b/src/components/Map.js
@@ -36,9 +36,6 @@ class Map extends Component {
 
   shouldComponentUpdate(nextProps, prevState) {
     if (nextProps.building.significance && !prevState.selectedBuildingId) {
-      console.log(nextProps.building.id, 'building id nextprop')
-      console.log(nextProps.building.longitude, 'building longitude nextprop')
-      console.log(nextProps.building.latitude, 'building latitude nextprop')
       this.selectedBuilding(nextProps.building.id);
       let longitude = nextProps.building.longitude;
       let latitude = nextProps.building.latitude;
@@ -76,7 +73,6 @@ class Map extends Component {
   }
 
   hoveringItem = (id) => {
-    console.log('hovering in hovering item')
     this.setState({ hovering: !this.state.hovering, id } )
   }
 
diff --git a/src/components/Markers.js b/src/components/Markers.js
index 2567b07..1a2ca7f 100644
--- a/src/components/Markers.js
+++ b/src/components/Markers.js
@@ -11,28 +11,27 @@ const Markers = ({
   buildings = [], handleBuildingDetails, hoveringItem, selectedBuilding,
   goToViewport, hovering, id, selectedBuildingId
 }) => {
-const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
-  let counter = ++i;
 
+const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
     return (
       <Marker
-      key={counter}
+      key={i}
       longitude={buildingObj.longitude}
       latitude={buildingObj.latitude}>
 
       <div
         onMouseEnter={(obj) => {
-          hoveringItem(counter);
+            hoveringItem(buildingObj.id);
         }}
         onClick={() => {
-          selectedBuilding(counter);
+          selectedBuilding(buildingObj.id);
           handleBuildingDetails(buildingObj);
           let longitude = buildingObj.longitude;
           let latitude = buildingObj.latitude;
           goToViewport({longitude, latitude});
         }}
         onTouchStart={() => {
-          selectedBuilding(counter);
+          selectedBuilding(buildingObj.id);
           handleBuildingDetails(buildingObj);
           let longitude = buildingObj.longitude;
           let latitude = buildingObj.latitude;
@@ -44,7 +43,7 @@ const allMarkers = buildings.length > 0 && buildings.map((buildingObj, i) => {
       >
 
       {
-        (hovering && id === counter) || selectedBuildingId === counter ? <MarkerFilled /> : <MarkerEmpty />
+        (hovering && buildingObj.id === id) ||  buildingObj.id === selectedBuildingId  ? <MarkerFilled /> : <MarkerEmpty />
       }
 
       </div>
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 1ba47be..166d473 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -12,7 +12,7 @@ const Nav = ({ handleIsHomePage, handleIsAboutPage, isAbout }) => {
       </div>
 
       <p
-        className="ma0 primary pointer pt1 pl1 pr3" onClick = { () => { handleIsAboutPage()} }
+        className="ma0 primary pointer pt1 pl1 pr3 b underline f4-l" onClick = { () => { handleIsAboutPage()} }
         > { isAbout ? 'Home' : 'About' } </p>
     </nav>
   );