Repository: kiwicom/mobile
Pull request #1167 (2018-10-02 06:54:08)

Hotels: use new more performant query


Patch:
diff --git a/app/hotels/src/allHotels/AllHotelsSearchList.js b/app/hotels/src/allHotels/AllHotelsSearchList.js
index 391503fd..7997d81b 100644
--- a/app/hotels/src/allHotels/AllHotelsSearchList.js
+++ b/app/hotels/src/allHotels/AllHotelsSearchList.js
@@ -43,12 +43,12 @@ export const AllHotelsSearchList = (props: Props) => {
 export default createFragmentContainer(
   AllHotelsSearchList,
   graphql`
-    fragment AllHotelsSearchList on HotelAvailabilityEdge @relay(plural: true) {
+    fragment AllHotelsSearchList on AllHotelAvailabilityHotelEdge
+      @relay(plural: true) {
       node {
         id
         ...AllHotelsSearchRow
       }
-      ...MapView
     }
   `,
 );
diff --git a/app/hotels/src/allHotels/AllHotelsSearchRow.js b/app/hotels/src/allHotels/AllHotelsSearchRow.js
index c812d5bc..89fc7809 100644
--- a/app/hotels/src/allHotels/AllHotelsSearchRow.js
+++ b/app/hotels/src/allHotels/AllHotelsSearchRow.js
@@ -24,19 +24,19 @@ type PropsWithContext = {|
 
 class AllHotelsSearchRow extends React.Component<PropsWithContext> {
   onGoToSingleHotel = () => {
-    const hotelId = idx(this.props, _ => _.data.hotel.id);
+    const hotelId = idx(this.props, _ => _.data.hotelId);
     if (hotelId != null) {
       this.props.openSingleHotel(hotelId);
     }
   };
 
   setActiveHotelId = () => {
-    const hotelId = idx(this.props, _ => _.data.hotel.id) || '';
+    const hotelId = idx(this.props, _ => _.data.hotelId) || '';
     this.props.setHotelId(hotelId);
   };
 
   render = () => {
-    const lowResUrl = idx(this.props.data, _ => _.hotel.mainPhoto.lowResUrl);
+    const lowResUrl = idx(this.props.data, _ => _.mainPhoto.lowResUrl);
     const children = (
       <View style={style.row}>
         <View style={style.imageContainer}>
@@ -52,7 +52,9 @@ class AllHotelsSearchRow extends React.Component<PropsWithContext> {
               <HotelTitle data={this.props.data} />
             </View>
             <View style={style.hotelReviewScore}>
-              <HotelReviewScore hotel={idx(this.props.data, _ => _.hotel)} />
+              <HotelReviewScore
+                score={idx(this.props.data, _ => _.review.score)}
+              />
             </View>
           </View>
         </View>
@@ -99,14 +101,14 @@ const AllHotelsSearchRowWithContext = (props: Props) => (
 export default createFragmentContainer(
   AllHotelsSearchRowWithContext,
   graphql`
-    fragment AllHotelsSearchRow on HotelAvailability {
+    fragment AllHotelsSearchRow on AllHotelAvailabilityHotel {
       ...HotelTitle
-      hotel {
-        id
-        mainPhoto {
-          lowResUrl
-        }
-        ...HotelReviewScore_hotel
+      hotelId
+      mainPhoto {
+        lowResUrl
+      }
+      review {
+        score
       }
     }
   `,
diff --git a/app/hotels/src/allHotels/HotelDistance.js b/app/hotels/src/allHotels/HotelDistance.js
index e0ca9325..f007efc5 100644
--- a/app/hotels/src/allHotels/HotelDistance.js
+++ b/app/hotels/src/allHotels/HotelDistance.js
@@ -71,7 +71,7 @@ export function getDistanceText(
 export default createFragmentContainer(
   HotelDistance,
   graphql`
-    fragment HotelDistance_hotel on Hotel {
+    fragment HotelDistance_hotel on AllHotelAvailabilityHotel {
       distanceFromCenter
     }
   `,
diff --git a/app/hotels/src/allHotels/HotelTitle.js b/app/hotels/src/allHotels/HotelTitle.js
index af50515a..014b5cc3 100644
--- a/app/hotels/src/allHotels/HotelTitle.js
+++ b/app/hotels/src/allHotels/HotelTitle.js
@@ -16,8 +16,8 @@ type Props = {|
 |};
 
 function HotelTitle({ data }: Props) {
-  const hotelName = idx(data, _ => _.hotel.name);
-  const hotelStars = idx(data, _ => _.hotel.rating.stars);
+  const hotelName = idx(data, _ => _.name);
+  const hotelStars = idx(data, _ => _.rating.stars);
 
   const price = {
     ...{
@@ -38,7 +38,7 @@ function HotelTitle({ data }: Props) {
       </Text>
 
       <View style={style.distance}>
-        <Distance hotel={data && data.hotel} />
+        <Distance hotel={data} />
       </View>
       <Price
         amount={price.amount}
@@ -52,17 +52,15 @@ function HotelTitle({ data }: Props) {
 export default createFragmentContainer(
   HotelTitle,
   graphql`
-    fragment HotelTitle on HotelAvailability {
+    fragment HotelTitle on AllHotelAvailabilityHotel {
       price {
         amount
         currency
       }
-      hotel {
-        ...HotelDistance_hotel
-        name
-        rating {
-          stars
-        }
+      ...HotelDistance_hotel
+      name
+      rating {
+        stars
       }
     }
   `,
diff --git a/app/hotels/src/allHotels/RenderSearchResults.js b/app/hotels/src/allHotels/RenderSearchResults.js
index 11c228fe..d54b5859 100644
--- a/app/hotels/src/allHotels/RenderSearchResults.js
+++ b/app/hotels/src/allHotels/RenderSearchResults.js
@@ -62,11 +62,11 @@ export class RenderSearchResults extends React.Component<
 
     const priceMax = idx(
       this.props,
-      _ => _.data.allAvailableHotels.stats.maxPrice,
+      _ => _.data.allAvailableBookingComHotels.stats.maxPrice,
     );
     const priceMin = idx(
       this.props,
-      _ => _.data.allAvailableHotels.stats.minPrice,
+      _ => _.data.allAvailableBookingComHotels.stats.minPrice,
     );
 
     if (priceMax != null && priceMin != null) {
@@ -127,7 +127,10 @@ export class RenderSearchResults extends React.Component<
   };
 
   render = () => {
-    const data = idx(this.props.data, _ => _.allAvailableHotels.edges);
+    const data = idx(
+      this.props.data,
+      _ => _.allAvailableBookingComHotels.edges,
+    );
     return (
       <React.Fragment>
         <Animated.View
@@ -206,13 +209,13 @@ export default createPaginationContainer(
   RenderSearchResultsWithContext,
   graphql`
     fragment RenderSearchResults on RootQuery {
-      allAvailableHotels(
+      allAvailableBookingComHotels(
         search: $search
         filter: $filter
         options: $options
         first: $first
         after: $after
-      ) @connection(key: "RenderSearchResults_allAvailableHotels") {
+      ) @connection(key: "RenderSearchResults_allAvailableBookingComHotels") {
         pageInfo {
           hasNextPage
           hasPreviousPage
diff --git a/app/hotels/src/allHotels/__generated__/AllHotelsSearchList.graphql.js b/app/hotels/src/allHotels/__generated__/AllHotelsSearchList.graphql.js
index f587d310..4d1969c1 100644
--- a/app/hotels/src/allHotels/__generated__/AllHotelsSearchList.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/AllHotelsSearchList.graphql.js
@@ -9,7 +9,6 @@
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
 type AllHotelsSearchRow$ref = any;
-type MapView$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type AllHotelsSearchList$ref: FragmentReference;
 export type AllHotelsSearchList = $ReadOnlyArray<{|
@@ -17,7 +16,6 @@ export type AllHotelsSearchList = $ReadOnlyArray<{|
     +id: string,
     +$fragmentRefs: AllHotelsSearchRow$ref,
   |},
-  +$fragmentRefs: MapView$ref,
   +$refType: AllHotelsSearchList$ref,
 |}>;
 */
@@ -26,7 +24,7 @@ export type AllHotelsSearchList = $ReadOnlyArray<{|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "AllHotelsSearchList",
-  "type": "HotelAvailabilityEdge",
+  "type": "AllHotelAvailabilityHotelEdge",
   "metadata": {
     "plural": true
   },
@@ -38,7 +36,7 @@ const node/*: ConcreteFragment*/ = {
       "name": "node",
       "storageKey": null,
       "args": null,
-      "concreteType": "HotelAvailability",
+      "concreteType": "AllHotelAvailabilityHotel",
       "plural": false,
       "selections": [
         {
@@ -54,14 +52,9 @@ const node/*: ConcreteFragment*/ = {
           "args": null
         }
       ]
-    },
-    {
-      "kind": "FragmentSpread",
-      "name": "MapView",
-      "args": null
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '27b5370ff58499fc503291daf2320715';
+(node/*: any*/).hash = '40ab29e418301787c8e12e7317070f3d';
 module.exports = node;
diff --git a/app/hotels/src/allHotels/__generated__/AllHotelsSearchRow.graphql.js b/app/hotels/src/allHotels/__generated__/AllHotelsSearchRow.graphql.js
index 1b603fa4..b25541f3 100644
--- a/app/hotels/src/allHotels/__generated__/AllHotelsSearchRow.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/AllHotelsSearchRow.graphql.js
@@ -8,17 +8,16 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
-type HotelReviewScore_hotel$ref = any;
 type HotelTitle$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type AllHotelsSearchRow$ref: FragmentReference;
 export type AllHotelsSearchRow = {|
-  +hotel: ?{|
-    +id: string,
-    +mainPhoto: ?{|
-      +lowResUrl: ?string
-    |},
-    +$fragmentRefs: HotelReviewScore_hotel$ref,
+  +hotelId: ?string,
+  +mainPhoto: ?{|
+    +lowResUrl: ?string
+  |},
+  +review: ?{|
+    +score: ?number
   |},
   +$fragmentRefs: HotelTitle$ref,
   +$refType: AllHotelsSearchRow$ref,
@@ -29,7 +28,7 @@ export type AllHotelsSearchRow = {|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "AllHotelsSearchRow",
-  "type": "HotelAvailability",
+  "type": "AllHotelAvailabilityHotel",
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
@@ -38,49 +37,51 @@ const node/*: ConcreteFragment*/ = {
       "name": "HotelTitle",
       "args": null
     },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "hotelId",
+      "args": null,
+      "storageKey": null
+    },
     {
       "kind": "LinkedField",
       "alias": null,
-      "name": "hotel",
+      "name": "mainPhoto",
       "storageKey": null,
       "args": null,
-      "concreteType": "Hotel",
+      "concreteType": "HotelPhoto",
       "plural": false,
       "selections": [
         {
           "kind": "ScalarField",
           "alias": null,
-          "name": "id",
+          "name": "lowResUrl",
           "args": null,
           "storageKey": null
-        },
+        }
+      ]
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "review",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "HotelReview",
+      "plural": false,
+      "selections": [
         {
-          "kind": "LinkedField",
+          "kind": "ScalarField",
           "alias": null,
-          "name": "mainPhoto",
-          "storageKey": null,
+          "name": "score",
           "args": null,
-          "concreteType": "HotelPhoto",
-          "plural": false,
-          "selections": [
-            {
-              "kind": "ScalarField",
-              "alias": null,
-              "name": "lowResUrl",
-              "args": null,
-              "storageKey": null
-            }
-          ]
-        },
-        {
-          "kind": "FragmentSpread",
-          "name": "HotelReviewScore_hotel",
-          "args": null
+          "storageKey": null
         }
       ]
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '496e31541877dc1edf949b5b6c5a869a';
+(node/*: any*/).hash = '881f704de186190b7f8af2f52243c44d';
 module.exports = node;
diff --git a/app/hotels/src/allHotels/__generated__/HotelDistance_hotel.graphql.js b/app/hotels/src/allHotels/__generated__/HotelDistance_hotel.graphql.js
index cf4bb23e..fab5571a 100644
--- a/app/hotels/src/allHotels/__generated__/HotelDistance_hotel.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/HotelDistance_hotel.graphql.js
@@ -20,7 +20,7 @@ export type HotelDistance_hotel = {|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "HotelDistance_hotel",
-  "type": "Hotel",
+  "type": "AllHotelAvailabilityHotel",
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
@@ -34,5 +34,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '52165dd85627dfb691660f46ccb1da7b';
+(node/*: any*/).hash = 'f8ed377c6339a4ebb44337ae0bd55f65';
 module.exports = node;
diff --git a/app/hotels/src/allHotels/__generated__/HotelTitle.graphql.js b/app/hotels/src/allHotels/__generated__/HotelTitle.graphql.js
index 7954d5df..74da2f4a 100644
--- a/app/hotels/src/allHotels/__generated__/HotelTitle.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/HotelTitle.graphql.js
@@ -16,13 +16,11 @@ export type HotelTitle = {|
     +amount: ?number,
     +currency: ?string,
   |},
-  +hotel: ?{|
-    +name: ?string,
-    +rating: ?{|
-      +stars: ?number
-    |},
-    +$fragmentRefs: HotelDistance_hotel$ref,
+  +name: ?string,
+  +rating: ?{|
+    +stars: ?number
   |},
+  +$fragmentRefs: HotelDistance_hotel$ref,
   +$refType: HotelTitle$ref,
 |};
 */
@@ -31,7 +29,7 @@ export type HotelTitle = {|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "HotelTitle",
-  "type": "HotelAvailability",
+  "type": "AllHotelAvailabilityHotel",
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
@@ -60,49 +58,38 @@ const node/*: ConcreteFragment*/ = {
         }
       ]
     },
+    {
+      "kind": "FragmentSpread",
+      "name": "HotelDistance_hotel",
+      "args": null
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "name",
+      "args": null,
+      "storageKey": null
+    },
     {
       "kind": "LinkedField",
       "alias": null,
-      "name": "hotel",
+      "name": "rating",
       "storageKey": null,
       "args": null,
-      "concreteType": "Hotel",
+      "concreteType": "HotelRating",
       "plural": false,
       "selections": [
-        {
-          "kind": "FragmentSpread",
-          "name": "HotelDistance_hotel",
-          "args": null
-        },
         {
           "kind": "ScalarField",
           "alias": null,
-          "name": "name",
+          "name": "stars",
           "args": null,
           "storageKey": null
-        },
-        {
-          "kind": "LinkedField",
-          "alias": null,
-          "name": "rating",
-          "storageKey": null,
-          "args": null,
-          "concreteType": "HotelRating",
-          "plural": false,
-          "selections": [
-            {
-              "kind": "ScalarField",
-              "alias": null,
-              "name": "stars",
-              "args": null,
-              "storageKey": null
-            }
-          ]
         }
       ]
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '631e3e5504362108d74c734ddfd09b09';
+(node/*: any*/).hash = '5f171f76eaf7e60a5afc4fc300174dae';
 module.exports = node;
diff --git a/app/hotels/src/allHotels/__generated__/NewAllHotelsSearchQuery.graphql.js b/app/hotels/src/allHotels/__generated__/NewAllHotelsSearchQuery.graphql.js
index e33d1376..8289a902 100644
--- a/app/hotels/src/allHotels/__generated__/NewAllHotelsSearchQuery.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/NewAllHotelsSearchQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 9e2cf18109dbcbc68fcb02830c9d1408
+ * @relayHash b00edc640349795c73af6a04f00baab3
  */
 
 /* eslint-disable */
@@ -81,7 +81,7 @@ query NewAllHotelsSearchQuery(
 }
 
 fragment RenderSearchResults on RootQuery {
-  allAvailableHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {
+  allAvailableBookingComHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {
     pageInfo {
       hasNextPage
       hasPreviousPage
@@ -104,15 +104,14 @@ fragment RenderSearchResults on RootQuery {
   }
 }
 
-fragment AllHotelsSearchList on HotelAvailabilityEdge {
+fragment AllHotelsSearchList on AllHotelAvailabilityHotelEdge {
   node {
     id
     ...AllHotelsSearchRow
   }
-  ...MapView
 }
 
-fragment MapScreen on HotelAvailabilityEdge {
+fragment MapScreen on AllHotelAvailabilityHotelEdge {
   node {
     id
   }
@@ -120,106 +119,84 @@ fragment MapScreen on HotelAvailabilityEdge {
   ...HotelSwipeList
 }
 
-fragment MapView on HotelAvailabilityEdge {
+fragment MapView on AllHotelAvailabilityHotelEdge {
   node {
     id
     price {
       ...PriceMarker
     }
-    hotel {
-      coordinates {
-        lat
-        lng
-      }
-      id
+    coordinates {
+      lat
+      lng
     }
   }
 }
 
-fragment HotelSwipeList on HotelAvailabilityEdge {
+fragment HotelSwipeList on AllHotelAvailabilityHotelEdge {
   node {
     id
     ...HotelSwipeItem
-    hotel {
-      address {
-        ...Address_address
-      }
-      id
+    address {
+      ...Address_address
     }
   }
 }
 
-fragment HotelSwipeItem on HotelAvailability {
-  ...HotelDetailPreview_availability
-  hotel {
-    id
-  }
-}
-
-fragment Address_address on Address {
-  street
-  city
-  zip
-}
-
-fragment HotelDetailPreview_availability on HotelAvailability {
+fragment HotelSwipeItem on AllHotelAvailabilityHotel {
+  hotelId
+  name
   price {
-    amount
     currency
+    amount
   }
-  hotel {
-    ...HotelReviewScore_hotel
+  mainPhoto {
+    thumbnailUrl
     id
-    name
-    mainPhoto {
-      thumbnailUrl
-      id
-    }
-    rating {
-      stars
-    }
   }
-}
-
-fragment HotelReviewScore_hotel on Hotel {
+  rating {
+    stars
+  }
   review {
     score
   }
 }
 
+fragment Address_address on Address {
+  street
+  city
+  zip
+}
+
 fragment PriceMarker on Price {
   amount
   currency
 }
 
-fragment AllHotelsSearchRow on HotelAvailability {
+fragment AllHotelsSearchRow on AllHotelAvailabilityHotel {
   ...HotelTitle
-  hotel {
+  hotelId
+  mainPhoto {
+    lowResUrl
     id
-    mainPhoto {
-      lowResUrl
-      id
-    }
-    ...HotelReviewScore_hotel
+  }
+  review {
+    score
   }
 }
 
-fragment HotelTitle on HotelAvailability {
+fragment HotelTitle on AllHotelAvailabilityHotel {
   price {
     amount
     currency
   }
-  hotel {
-    ...HotelDistance_hotel
-    name
-    rating {
-      stars
-    }
-    id
+  ...HotelDistance_hotel
+  name
+  rating {
+    stars
   }
 }
 
-fragment HotelDistance_hotel on Hotel {
+fragment HotelDistance_hotel on AllHotelAvailabilityHotel {
   distanceFromCenter
 }
 */
@@ -301,7 +278,7 @@ return {
   "operationKind": "query",
   "name": "NewAllHotelsSearchQuery",
   "id": null,
-  "text": "query NewAllHotelsSearchQuery(\n  $search: HotelsSearchInput!\n  $filter: HotelsFilterInput!\n  $options: AvailableHotelOptionsInput\n  $first: Int\n  $after: String\n) {\n  ...RenderSearchResults\n}\n\nfragment RenderSearchResults on RootQuery {\n  allAvailableHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n    stats {\n      maxPrice\n      minPrice\n    }\n    edges {\n      ...AllHotelsSearchList\n      ...MapScreen\n      cursor\n      node {\n        __typename\n        id\n      }\n    }\n  }\n}\n\nfragment AllHotelsSearchList on HotelAvailabilityEdge {\n  node {\n    id\n    ...AllHotelsSearchRow\n  }\n  ...MapView\n}\n\nfragment MapScreen on HotelAvailabilityEdge {\n  node {\n    id\n  }\n  ...MapView\n  ...HotelSwipeList\n}\n\nfragment MapView on HotelAvailabilityEdge {\n  node {\n    id\n    price {\n      ...PriceMarker\n    }\n    hotel {\n      coordinates {\n        lat\n        lng\n      }\n      id\n    }\n  }\n}\n\nfragment HotelSwipeList on HotelAvailabilityEdge {\n  node {\n    id\n    ...HotelSwipeItem\n    hotel {\n      address {\n        ...Address_address\n      }\n      id\n    }\n  }\n}\n\nfragment HotelSwipeItem on HotelAvailability {\n  ...HotelDetailPreview_availability\n  hotel {\n    id\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n\nfragment HotelDetailPreview_availability on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    ...HotelReviewScore_hotel\n    id\n    name\n    mainPhoto {\n      thumbnailUrl\n      id\n    }\n    rating {\n      stars\n    }\n  }\n}\n\nfragment HotelReviewScore_hotel on Hotel {\n  review {\n    score\n  }\n}\n\nfragment PriceMarker on Price {\n  amount\n  currency\n}\n\nfragment AllHotelsSearchRow on HotelAvailability {\n  ...HotelTitle\n  hotel {\n    id\n    mainPhoto {\n      lowResUrl\n      id\n    }\n    ...HotelReviewScore_hotel\n  }\n}\n\nfragment HotelTitle on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    ...HotelDistance_hotel\n    name\n    rating {\n      stars\n    }\n    id\n  }\n}\n\nfragment HotelDistance_hotel on Hotel {\n  distanceFromCenter\n}\n",
+  "text": "query NewAllHotelsSearchQuery(\n  $search: HotelsSearchInput!\n  $filter: HotelsFilterInput!\n  $options: AvailableHotelOptionsInput\n  $first: Int\n  $after: String\n) {\n  ...RenderSearchResults\n}\n\nfragment RenderSearchResults on RootQuery {\n  allAvailableBookingComHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n    stats {\n      maxPrice\n      minPrice\n    }\n    edges {\n      ...AllHotelsSearchList\n      ...MapScreen\n      cursor\n      node {\n        __typename\n        id\n      }\n    }\n  }\n}\n\nfragment AllHotelsSearchList on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    ...AllHotelsSearchRow\n  }\n}\n\nfragment MapScreen on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n  }\n  ...MapView\n  ...HotelSwipeList\n}\n\nfragment MapView on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    price {\n      ...PriceMarker\n    }\n    coordinates {\n      lat\n      lng\n    }\n  }\n}\n\nfragment HotelSwipeList on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    ...HotelSwipeItem\n    address {\n      ...Address_address\n    }\n  }\n}\n\nfragment HotelSwipeItem on AllHotelAvailabilityHotel {\n  hotelId\n  name\n  price {\n    currency\n    amount\n  }\n  mainPhoto {\n    thumbnailUrl\n    id\n  }\n  rating {\n    stars\n  }\n  review {\n    score\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n\nfragment PriceMarker on Price {\n  amount\n  currency\n}\n\nfragment AllHotelsSearchRow on AllHotelAvailabilityHotel {\n  ...HotelTitle\n  hotelId\n  mainPhoto {\n    lowResUrl\n    id\n  }\n  review {\n    score\n  }\n}\n\nfragment HotelTitle on AllHotelAvailabilityHotel {\n  price {\n    amount\n    currency\n  }\n  ...HotelDistance_hotel\n  name\n  rating {\n    stars\n  }\n}\n\nfragment HotelDistance_hotel on AllHotelAvailabilityHotel {\n  distanceFromCenter\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -325,10 +302,10 @@ return {
       {
         "kind": "LinkedField",
         "alias": null,
-        "name": "allAvailableHotels",
+        "name": "allAvailableBookingComHotels",
         "storageKey": null,
         "args": v1,
-        "concreteType": "HotelAvailabilityConnection",
+        "concreteType": "AllHotelAvailabilityHotelConnection",
         "plural": false,
         "selections": [
           {
@@ -401,7 +378,7 @@ return {
             "name": "edges",
             "storageKey": null,
             "args": null,
-            "concreteType": "HotelAvailabilityEdge",
+            "concreteType": "AllHotelAvailabilityHotelEdge",
             "plural": true,
             "selections": [
               {
@@ -410,10 +387,49 @@ return {
                 "name": "node",
                 "storageKey": null,
                 "args": null,
-                "concreteType": "HotelAvailability",
+                "concreteType": "AllHotelAvailabilityHotel",
                 "plural": false,
                 "selections": [
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "hotelId",
+                    "args": null,
+                    "storageKey": null
+                  },
                   v2,
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "distanceFromCenter",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "name",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "rating",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "HotelRating",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "kind": "ScalarField",
+                        "alias": null,
+                        "name": "stars",
+                        "args": null,
+                        "storageKey": null
+                      }
+                    ]
+                  },
                   {
                     "kind": "LinkedField",
                     "alias": null,
@@ -442,145 +458,101 @@ return {
                   {
                     "kind": "LinkedField",
                     "alias": null,
-                    "name": "hotel",
+                    "name": "mainPhoto",
                     "storageKey": null,
                     "args": null,
-                    "concreteType": "Hotel",
+                    "concreteType": "HotelPhoto",
                     "plural": false,
                     "selections": [
                       {
                         "kind": "ScalarField",
                         "alias": null,
-                        "name": "distanceFromCenter",
+                        "name": "lowResUrl",
                         "args": null,
                         "storageKey": null
                       },
+                      v2,
                       {
                         "kind": "ScalarField",
                         "alias": null,
-                        "name": "name",
+                        "name": "thumbnailUrl",
                         "args": null,
                         "storageKey": null
-                      },
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "review",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "HotelReview",
+                    "plural": false,
+                    "selections": [
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "rating",
-                        "storageKey": null,
+                        "name": "score",
                         "args": null,
-                        "concreteType": "HotelRating",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "stars",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
-                      },
-                      v2,
+                        "storageKey": null
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "coordinates",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Coordinates",
+                    "plural": false,
+                    "selections": [
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "mainPhoto",
-                        "storageKey": null,
+                        "name": "lat",
                         "args": null,
-                        "concreteType": "HotelPhoto",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lowResUrl",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          v2,
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "thumbnailUrl",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
+                        "alias": null,
+                        "name": "lng",
+                        "args": null,
+                        "storageKey": null
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "address",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Address",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "review",
-                        "storageKey": null,
+                        "name": "street",
                         "args": null,
-                        "concreteType": "HotelReview",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "score",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "coordinates",
-                        "storageKey": null,
+                        "name": "city",
                         "args": null,
-                        "concreteType": "Coordinates",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lat",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lng",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "address",
-                        "storageKey": null,
+                        "name": "zip",
                         "args": null,
-                        "concreteType": "Address",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "street",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "city",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "zip",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       }
                     ]
                   },
@@ -607,10 +579,10 @@ return {
       {
         "kind": "LinkedHandle",
         "alias": null,
-        "name": "allAvailableHotels",
+        "name": "allAvailableBookingComHotels",
         "args": v1,
         "handle": "connection",
-        "key": "RenderSearchResults_allAvailableHotels",
+        "key": "RenderSearchResults_allAvailableBookingComHotels",
         "filters": [
           "search",
           "filter",
diff --git a/app/hotels/src/allHotels/__generated__/RenderSearchResults.graphql.js b/app/hotels/src/allHotels/__generated__/RenderSearchResults.graphql.js
index a7e527bf..8f891fbc 100644
--- a/app/hotels/src/allHotels/__generated__/RenderSearchResults.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/RenderSearchResults.graphql.js
@@ -13,7 +13,7 @@ type MapScreen$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type RenderSearchResults$ref: FragmentReference;
 export type RenderSearchResults = {|
-  +allAvailableHotels: ?{|
+  +allAvailableBookingComHotels: ?{|
     +pageInfo: {|
       +hasNextPage: boolean,
       +hasPreviousPage: boolean,
@@ -44,7 +44,7 @@ const node/*: ConcreteFragment*/ = {
         "cursor": "after",
         "direction": "forward",
         "path": [
-          "allAvailableHotels"
+          "allAvailableBookingComHotels"
         ]
       }
     ]
@@ -79,8 +79,8 @@ const node/*: ConcreteFragment*/ = {
   "selections": [
     {
       "kind": "LinkedField",
-      "alias": "allAvailableHotels",
-      "name": "__RenderSearchResults_allAvailableHotels_connection",
+      "alias": "allAvailableBookingComHotels",
+      "name": "__RenderSearchResults_allAvailableBookingComHotels_connection",
       "storageKey": null,
       "args": [
         {
@@ -102,7 +102,7 @@ const node/*: ConcreteFragment*/ = {
           "type": "HotelsSearchInput!"
         }
       ],
-      "concreteType": "HotelAvailabilityConnection",
+      "concreteType": "AllHotelAvailabilityHotelConnection",
       "plural": false,
       "selections": [
         {
@@ -175,7 +175,7 @@ const node/*: ConcreteFragment*/ = {
           "name": "edges",
           "storageKey": null,
           "args": null,
-          "concreteType": "HotelAvailabilityEdge",
+          "concreteType": "AllHotelAvailabilityHotelEdge",
           "plural": true,
           "selections": [
             {
@@ -201,7 +201,7 @@ const node/*: ConcreteFragment*/ = {
               "name": "node",
               "storageKey": null,
               "args": null,
-              "concreteType": "HotelAvailability",
+              "concreteType": "AllHotelAvailabilityHotel",
               "plural": false,
               "selections": [
                 {
@@ -220,5 +220,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '1b33ae418f3f684e25815b6f1b127839';
+(node/*: any*/).hash = '2eeb8c3d08ea3dfd561b7a449f9e8768';
 module.exports = node;
diff --git a/app/hotels/src/allHotels/__generated__/RenderSearchResultsQuery.graphql.js b/app/hotels/src/allHotels/__generated__/RenderSearchResultsQuery.graphql.js
index eb0135cd..064a2676 100644
--- a/app/hotels/src/allHotels/__generated__/RenderSearchResultsQuery.graphql.js
+++ b/app/hotels/src/allHotels/__generated__/RenderSearchResultsQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 24e942bd11f8a169df5ee5ab1f22a0bc
+ * @relayHash dade1672653eed5498b1bfa004ce0b5a
  */
 
 /* eslint-disable */
@@ -81,7 +81,7 @@ query RenderSearchResultsQuery(
 }
 
 fragment RenderSearchResults on RootQuery {
-  allAvailableHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {
+  allAvailableBookingComHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {
     pageInfo {
       hasNextPage
       hasPreviousPage
@@ -104,15 +104,14 @@ fragment RenderSearchResults on RootQuery {
   }
 }
 
-fragment AllHotelsSearchList on HotelAvailabilityEdge {
+fragment AllHotelsSearchList on AllHotelAvailabilityHotelEdge {
   node {
     id
     ...AllHotelsSearchRow
   }
-  ...MapView
 }
 
-fragment MapScreen on HotelAvailabilityEdge {
+fragment MapScreen on AllHotelAvailabilityHotelEdge {
   node {
     id
   }
@@ -120,106 +119,84 @@ fragment MapScreen on HotelAvailabilityEdge {
   ...HotelSwipeList
 }
 
-fragment MapView on HotelAvailabilityEdge {
+fragment MapView on AllHotelAvailabilityHotelEdge {
   node {
     id
     price {
       ...PriceMarker
     }
-    hotel {
-      coordinates {
-        lat
-        lng
-      }
-      id
+    coordinates {
+      lat
+      lng
     }
   }
 }
 
-fragment HotelSwipeList on HotelAvailabilityEdge {
+fragment HotelSwipeList on AllHotelAvailabilityHotelEdge {
   node {
     id
     ...HotelSwipeItem
-    hotel {
-      address {
-        ...Address_address
-      }
-      id
+    address {
+      ...Address_address
     }
   }
 }
 
-fragment HotelSwipeItem on HotelAvailability {
-  ...HotelDetailPreview_availability
-  hotel {
-    id
-  }
-}
-
-fragment Address_address on Address {
-  street
-  city
-  zip
-}
-
-fragment HotelDetailPreview_availability on HotelAvailability {
+fragment HotelSwipeItem on AllHotelAvailabilityHotel {
+  hotelId
+  name
   price {
-    amount
     currency
+    amount
   }
-  hotel {
-    ...HotelReviewScore_hotel
+  mainPhoto {
+    thumbnailUrl
     id
-    name
-    mainPhoto {
-      thumbnailUrl
-      id
-    }
-    rating {
-      stars
-    }
   }
-}
-
-fragment HotelReviewScore_hotel on Hotel {
+  rating {
+    stars
+  }
   review {
     score
   }
 }
 
+fragment Address_address on Address {
+  street
+  city
+  zip
+}
+
 fragment PriceMarker on Price {
   amount
   currency
 }
 
-fragment AllHotelsSearchRow on HotelAvailability {
+fragment AllHotelsSearchRow on AllHotelAvailabilityHotel {
   ...HotelTitle
-  hotel {
+  hotelId
+  mainPhoto {
+    lowResUrl
     id
-    mainPhoto {
-      lowResUrl
-      id
-    }
-    ...HotelReviewScore_hotel
+  }
+  review {
+    score
   }
 }
 
-fragment HotelTitle on HotelAvailability {
+fragment HotelTitle on AllHotelAvailabilityHotel {
   price {
     amount
     currency
   }
-  hotel {
-    ...HotelDistance_hotel
-    name
-    rating {
-      stars
-    }
-    id
+  ...HotelDistance_hotel
+  name
+  rating {
+    stars
   }
 }
 
-fragment HotelDistance_hotel on Hotel {
+fragment HotelDistance_hotel on AllHotelAvailabilityHotel {
   distanceFromCenter
 }
 */
@@ -301,7 +278,7 @@ return {
   "operationKind": "query",
   "name": "RenderSearchResultsQuery",
   "id": null,
-  "text": "query RenderSearchResultsQuery(\n  $search: HotelsSearchInput!\n  $filter: HotelsFilterInput!\n  $options: AvailableHotelOptionsInput\n  $after: String\n  $first: Int\n) {\n  ...RenderSearchResults\n}\n\nfragment RenderSearchResults on RootQuery {\n  allAvailableHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n    stats {\n      maxPrice\n      minPrice\n    }\n    edges {\n      ...AllHotelsSearchList\n      ...MapScreen\n      cursor\n      node {\n        __typename\n        id\n      }\n    }\n  }\n}\n\nfragment AllHotelsSearchList on HotelAvailabilityEdge {\n  node {\n    id\n    ...AllHotelsSearchRow\n  }\n  ...MapView\n}\n\nfragment MapScreen on HotelAvailabilityEdge {\n  node {\n    id\n  }\n  ...MapView\n  ...HotelSwipeList\n}\n\nfragment MapView on HotelAvailabilityEdge {\n  node {\n    id\n    price {\n      ...PriceMarker\n    }\n    hotel {\n      coordinates {\n        lat\n        lng\n      }\n      id\n    }\n  }\n}\n\nfragment HotelSwipeList on HotelAvailabilityEdge {\n  node {\n    id\n    ...HotelSwipeItem\n    hotel {\n      address {\n        ...Address_address\n      }\n      id\n    }\n  }\n}\n\nfragment HotelSwipeItem on HotelAvailability {\n  ...HotelDetailPreview_availability\n  hotel {\n    id\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n\nfragment HotelDetailPreview_availability on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    ...HotelReviewScore_hotel\n    id\n    name\n    mainPhoto {\n      thumbnailUrl\n      id\n    }\n    rating {\n      stars\n    }\n  }\n}\n\nfragment HotelReviewScore_hotel on Hotel {\n  review {\n    score\n  }\n}\n\nfragment PriceMarker on Price {\n  amount\n  currency\n}\n\nfragment AllHotelsSearchRow on HotelAvailability {\n  ...HotelTitle\n  hotel {\n    id\n    mainPhoto {\n      lowResUrl\n      id\n    }\n    ...HotelReviewScore_hotel\n  }\n}\n\nfragment HotelTitle on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    ...HotelDistance_hotel\n    name\n    rating {\n      stars\n    }\n    id\n  }\n}\n\nfragment HotelDistance_hotel on Hotel {\n  distanceFromCenter\n}\n",
+  "text": "query RenderSearchResultsQuery(\n  $search: HotelsSearchInput!\n  $filter: HotelsFilterInput!\n  $options: AvailableHotelOptionsInput\n  $after: String\n  $first: Int\n) {\n  ...RenderSearchResults\n}\n\nfragment RenderSearchResults on RootQuery {\n  allAvailableBookingComHotels(search: $search, filter: $filter, options: $options, first: $first, after: $after) {\n    pageInfo {\n      hasNextPage\n      hasPreviousPage\n      startCursor\n      endCursor\n    }\n    stats {\n      maxPrice\n      minPrice\n    }\n    edges {\n      ...AllHotelsSearchList\n      ...MapScreen\n      cursor\n      node {\n        __typename\n        id\n      }\n    }\n  }\n}\n\nfragment AllHotelsSearchList on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    ...AllHotelsSearchRow\n  }\n}\n\nfragment MapScreen on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n  }\n  ...MapView\n  ...HotelSwipeList\n}\n\nfragment MapView on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    price {\n      ...PriceMarker\n    }\n    coordinates {\n      lat\n      lng\n    }\n  }\n}\n\nfragment HotelSwipeList on AllHotelAvailabilityHotelEdge {\n  node {\n    id\n    ...HotelSwipeItem\n    address {\n      ...Address_address\n    }\n  }\n}\n\nfragment HotelSwipeItem on AllHotelAvailabilityHotel {\n  hotelId\n  name\n  price {\n    currency\n    amount\n  }\n  mainPhoto {\n    thumbnailUrl\n    id\n  }\n  rating {\n    stars\n  }\n  review {\n    score\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n\nfragment PriceMarker on Price {\n  amount\n  currency\n}\n\nfragment AllHotelsSearchRow on AllHotelAvailabilityHotel {\n  ...HotelTitle\n  hotelId\n  mainPhoto {\n    lowResUrl\n    id\n  }\n  review {\n    score\n  }\n}\n\nfragment HotelTitle on AllHotelAvailabilityHotel {\n  price {\n    amount\n    currency\n  }\n  ...HotelDistance_hotel\n  name\n  rating {\n    stars\n  }\n}\n\nfragment HotelDistance_hotel on AllHotelAvailabilityHotel {\n  distanceFromCenter\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -325,10 +302,10 @@ return {
       {
         "kind": "LinkedField",
         "alias": null,
-        "name": "allAvailableHotels",
+        "name": "allAvailableBookingComHotels",
         "storageKey": null,
         "args": v1,
-        "concreteType": "HotelAvailabilityConnection",
+        "concreteType": "AllHotelAvailabilityHotelConnection",
         "plural": false,
         "selections": [
           {
@@ -401,7 +378,7 @@ return {
             "name": "edges",
             "storageKey": null,
             "args": null,
-            "concreteType": "HotelAvailabilityEdge",
+            "concreteType": "AllHotelAvailabilityHotelEdge",
             "plural": true,
             "selections": [
               {
@@ -410,10 +387,49 @@ return {
                 "name": "node",
                 "storageKey": null,
                 "args": null,
-                "concreteType": "HotelAvailability",
+                "concreteType": "AllHotelAvailabilityHotel",
                 "plural": false,
                 "selections": [
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "hotelId",
+                    "args": null,
+                    "storageKey": null
+                  },
                   v2,
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "distanceFromCenter",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "name",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "rating",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "HotelRating",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "kind": "ScalarField",
+                        "alias": null,
+                        "name": "stars",
+                        "args": null,
+                        "storageKey": null
+                      }
+                    ]
+                  },
                   {
                     "kind": "LinkedField",
                     "alias": null,
@@ -442,145 +458,101 @@ return {
                   {
                     "kind": "LinkedField",
                     "alias": null,
-                    "name": "hotel",
+                    "name": "mainPhoto",
                     "storageKey": null,
                     "args": null,
-                    "concreteType": "Hotel",
+                    "concreteType": "HotelPhoto",
                     "plural": false,
                     "selections": [
                       {
                         "kind": "ScalarField",
                         "alias": null,
-                        "name": "distanceFromCenter",
+                        "name": "lowResUrl",
                         "args": null,
                         "storageKey": null
                       },
+                      v2,
                       {
                         "kind": "ScalarField",
                         "alias": null,
-                        "name": "name",
+                        "name": "thumbnailUrl",
                         "args": null,
                         "storageKey": null
-                      },
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "review",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "HotelReview",
+                    "plural": false,
+                    "selections": [
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "rating",
-                        "storageKey": null,
+                        "name": "score",
                         "args": null,
-                        "concreteType": "HotelRating",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "stars",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
-                      },
-                      v2,
+                        "storageKey": null
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "coordinates",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Coordinates",
+                    "plural": false,
+                    "selections": [
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "mainPhoto",
-                        "storageKey": null,
+                        "name": "lat",
                         "args": null,
-                        "concreteType": "HotelPhoto",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lowResUrl",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          v2,
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "thumbnailUrl",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
+                        "alias": null,
+                        "name": "lng",
+                        "args": null,
+                        "storageKey": null
+                      }
+                    ]
+                  },
+                  {
+                    "kind": "LinkedField",
+                    "alias": null,
+                    "name": "address",
+                    "storageKey": null,
+                    "args": null,
+                    "concreteType": "Address",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "review",
-                        "storageKey": null,
+                        "name": "street",
                         "args": null,
-                        "concreteType": "HotelReview",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "score",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "coordinates",
-                        "storageKey": null,
+                        "name": "city",
                         "args": null,
-                        "concreteType": "Coordinates",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lat",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "lng",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       },
                       {
-                        "kind": "LinkedField",
+                        "kind": "ScalarField",
                         "alias": null,
-                        "name": "address",
-                        "storageKey": null,
+                        "name": "zip",
                         "args": null,
-                        "concreteType": "Address",
-                        "plural": false,
-                        "selections": [
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "street",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "city",
-                            "args": null,
-                            "storageKey": null
-                          },
-                          {
-                            "kind": "ScalarField",
-                            "alias": null,
-                            "name": "zip",
-                            "args": null,
-                            "storageKey": null
-                          }
-                        ]
+                        "storageKey": null
                       }
                     ]
                   },
@@ -607,10 +579,10 @@ return {
       {
         "kind": "LinkedHandle",
         "alias": null,
-        "name": "allAvailableHotels",
+        "name": "allAvailableBookingComHotels",
         "args": v1,
         "handle": "connection",
-        "key": "RenderSearchResults_allAvailableHotels",
+        "key": "RenderSearchResults_allAvailableBookingComHotels",
         "filters": [
           "search",
           "filter",
diff --git a/app/hotels/src/components/HotelReviewScore.js b/app/hotels/src/components/HotelReviewScore.js
index b04ef312..b2012901 100644
--- a/app/hotels/src/components/HotelReviewScore.js
+++ b/app/hotels/src/components/HotelReviewScore.js
@@ -1,16 +1,12 @@
-// @flow
+// @flow strict
 
 import * as React from 'react';
-import idx from 'idx';
-import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { AdaptableBadge, StyleSheet } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import type { HotelReviewScore_hotel } from './__generated__/HotelReviewScore_hotel.graphql';
-
 type Props = {|
-  +hotel: HotelReviewScore_hotel,
+  +score: ?number,
 |};
 
 type ColorType = {|
@@ -18,7 +14,7 @@ type ColorType = {|
   +color: string,
 |};
 
-export class HotelReviewScore extends React.Component<Props> {
+export default class HotelReviewScore extends React.Component<Props> {
   /**
    * One decimal point with trailing zero.
    */
@@ -63,8 +59,9 @@ export class HotelReviewScore extends React.Component<Props> {
   };
 
   render = () => {
-    const reviewScore = idx(this.props, _ => _.hotel.review.score) || null;
-    if (reviewScore === null) {
+    const reviewScore = this.props.score;
+
+    if (reviewScore == null || reviewScore == 0) {
       return null;
     }
     const { backgroundColor, color } = this.calculateColor(reviewScore);
@@ -109,14 +106,3 @@ const style = StyleSheet.create({
     },
   },
 });
-
-export default createFragmentContainer(
-  HotelReviewScore,
-  graphql`
-    fragment HotelReviewScore_hotel on Hotel {
-      review {
-        score
-      }
-    }
-  `,
-);
diff --git a/app/hotels/src/components/__generated__/HotelReviewScore_hotel.graphql.js b/app/hotels/src/components/__generated__/HotelReviewScore_hotel.graphql.js
deleted file mode 100644
index a2277dc1..00000000
--- a/app/hotels/src/components/__generated__/HotelReviewScore_hotel.graphql.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteFragment } from 'relay-runtime';
-import type { FragmentReference } from "relay-runtime";
-declare export opaque type HotelReviewScore_hotel$ref: FragmentReference;
-export type HotelReviewScore_hotel = {|
-  +review: ?{|
-    +score: ?number
-  |},
-  +$refType: HotelReviewScore_hotel$ref,
-|};
-*/
-
-
-const node/*: ConcreteFragment*/ = {
-  "kind": "Fragment",
-  "name": "HotelReviewScore_hotel",
-  "type": "Hotel",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "review",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "HotelReview",
-      "plural": false,
-      "selections": [
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "score",
-          "args": null,
-          "storageKey": null
-        }
-      ]
-    }
-  ]
-};
-// prettier-ignore
-(node/*: any*/).hash = '96c6b645b733c37d5b8c6cc50323fee3';
-module.exports = node;
diff --git a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
index 06f3381a..e800d925 100644
--- a/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
+++ b/app/hotels/src/filter/hotelFacilities/HotelFacilitiesPopup.js
@@ -5,12 +5,14 @@ import { View } from 'react-native';
 import {
   ButtonPopup,
   Checkbox,
-  Icon,
   StyleSheet,
   Text,
+  TextIcon,
 } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   +facilities: string[],
@@ -28,65 +30,65 @@ const facilitiesList = {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.airport_shuttle" />
     ),
-    icon: 'airport-shuttle',
+    icon: '<',
   },
   familyRooms: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.family_rooms" />
     ),
-    icon: 'child-friendly',
+    icon: '\ue05d',
   },
   facilitiesForDisabled: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.facilities_for_disabled" />
     ),
-    icon: 'accessible',
+    icon: '\uE088',
   },
   fitnessCenter: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.fitness_center" />
     ),
-    icon: 'fitness-center',
+    icon: '\uE089',
   },
   parking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   freeParking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.free_parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   valetParking: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.valet_parking" />
     ),
-    icon: 'directions-car',
+    icon: '\uE03E',
   },
   indoorPool: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.indoor_pool" />
     ),
-    icon: 'pool',
+    icon: '\uE123',
   },
   petsAllowed: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.pets_allowed" />
     ),
-    icon: 'pets',
+    icon: '\uE043',
   },
   spa: {
     text: <Translation id="hotels_search.filter.hotel_facilities_filter.spa" />,
-    icon: 'spa',
+    icon: '\uE04A',
   },
   wifi: {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.wifi" />
     ),
-    icon: 'wifi',
+    icon: '\uE062',
   },
 };
 
@@ -104,7 +106,7 @@ export default class HotelFacilitiesPopup extends React.Component<
   handleCheckboxOnPress = (option: string) => () =>
     this.setState(state => {
       let facilities = [...state.facilities];
-      if (facilities.indexOf(option) >= 0) {
+      if (facilities.includes(option)) {
         facilities = facilities.filter(facility => facility !== option);
       } else {
         facilities.push(option);
@@ -117,20 +119,36 @@ export default class HotelFacilitiesPopup extends React.Component<
   renderCheckboxes = (facilities: string[]) => {
     const checkboxes = [];
     const facilitiesListKeys = Object.keys(facilitiesList);
+    const facilitiesListLength = facilitiesListKeys.length;
     facilitiesListKeys.forEach((key, i) => {
       const facility = facilitiesList[key];
+      const isFacilityChecked = facilities.includes(key);
+      const isNotLastRow = i < facilitiesListLength - 1;
       checkboxes.push(
-        <Checkbox
-          key={i}
-          isChecked={facilities.indexOf(key) >= 0}
-          onPress={this.handleCheckboxOnPress(key)}
-          style={i < facilitiesListKeys.length - 1 && styles.delimiter}
-        >
-          <View style={styles.checkbox}>
-            <Icon name={facility.icon} size={20} style={styles.facilityIcon} />
-            {facility.text}
-          </View>
-        </Checkbox>,
+        <React.Fragment key={i}>
+          <Checkbox
+            isChecked={isFacilityChecked}
+            onPress={this.handleCheckboxOnPress(key)}
+          >
+            <View style={styles.checkbox}>
+              <TextIcon
+                code={facility.icon}
+                orbit={true}
+                style={styles.facilityIcon}
+              />
+              {facility.text}
+            </View>
+          </Checkbox>
+          {isNotLastRow && (
+            <View style={styles.separatorEnd}>
+              <SeparatorTrimmed
+                gapSizeStart={31}
+                color={defaultTokens.paletteInkLighter}
+                height={0.5}
+              />
+            </View>
+          )}
+        </React.Fragment>,
       );
     });
     return checkboxes;
@@ -139,36 +157,44 @@ export default class HotelFacilitiesPopup extends React.Component<
   render() {
     const { facilities } = this.state;
     return (
-      <ButtonPopup
-        buttonTitle={
-          <Translation id="hotels_search.filter.hotel_facilities_popup.save" />
-        }
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text style={styles.title}>
-          <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
-        </Text>
-        {this.renderCheckboxes(facilities)}
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
+          </Text>
+          {this.renderCheckboxes(facilities)}
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
 
 const styles = StyleSheet.create({
   title: {
-    color: defaultTokens.paletteInkNormal,
-    paddingBottom: 5,
-  },
-  delimiter: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: defaultTokens.paletteCloudNormal,
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
   },
   checkbox: {
     flexDirection: 'row',
+    alignItems: 'center',
   },
   facilityIcon: {
     marginEnd: 10,
   },
+  separatorEnd: {
+    marginEnd: -15,
+  },
 });
diff --git a/app/hotels/src/filter/price/PriceFilter.js b/app/hotels/src/filter/price/PriceFilter.js
index 6eeda56f..354cb5a2 100644
--- a/app/hotels/src/filter/price/PriceFilter.js
+++ b/app/hotels/src/filter/price/PriceFilter.js
@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { Icon } from '@kiwicom/mobile-shared';
-import { Translation } from '@kiwicom/mobile-localization';
+import {
+  Translation,
+  TranslationFragment,
+  DateUtils,
+} from '@kiwicom/mobile-localization';
 
 import PricePopup from './PricePopup';
 import FilterButton from '../FilterButton';
@@ -15,6 +19,7 @@ type PropsWithContext = {
   ...Props,
   +currentSearchStats: CurrentSearchStats,
   +currency: string,
+  +daysOfStay: number,
 };
 
 type State = {|
@@ -72,17 +77,58 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
     min: number,
     max: number,
     currency: string,
+    daysOfStay: number,
   ) => {
     if (start === min && end === max) {
       return <Translation id="hotels_search.filter.price_filter.price" />;
     }
     if (start === min) {
-      return <Translation passThrough={`< ${end} ${currency}`} />;
+      return (
+        <TranslationFragment>
+          <Translation passThrough="< " />
+          <Translation
+            id="hotels_search.filter.price_popup.price_label"
+            values={{
+              amount: end * daysOfStay,
+              currency: currency,
+            }}
+          />
+        </TranslationFragment>
+      );
     }
     if (end === max) {
-      return <Translation passThrough={`> ${start} ${currency}`} />;
+      return (
+        <TranslationFragment>
+          <Translation passThrough="> " />
+          <Translation
+            id="hotels_search.filter.price_popup.price_label"
+            values={{
+              amount: start * daysOfStay,
+              currency: currency,
+            }}
+          />
+        </TranslationFragment>
+      );
     }
-    return <Translation passThrough={`${start} - ${end} ${currency}`} />;
+    return (
+      <TranslationFragment>
+        <Translation
+          id="hotels_search.filter.price_popup.price_label"
+          values={{
+            amount: start * daysOfStay,
+            currency: currency,
+          }}
+        />
+        <Translation passThrough=" - " />
+        <Translation
+          id="hotels_search.filter.price_popup.price_label"
+          values={{
+            amount: end * daysOfStay,
+            currency: currency,
+          }}
+        />
+      </TranslationFragment>
+    );
   };
 
   render() {
@@ -90,6 +136,7 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
       currentSearchStats: { priceMin, priceMax },
       isActive,
       currency,
+      daysOfStay,
     } = this.props;
     const start = this.props.start || priceMin;
     const end = this.props.end || priceMax;
@@ -97,7 +144,14 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
     return (
       <React.Fragment>
         <FilterButton
-          title={this.getTitle(start, end, priceMin, priceMax, currency)}
+          title={this.getTitle(
+            start,
+            end,
+            priceMin,
+            priceMax,
+            currency,
+            daysOfStay,
+          )}
           icon={<Icon name="attach-money" size={18} />}
           isActive={isActive}
           onPress={this.filterButtonClicked}
@@ -111,6 +165,7 @@ class PriceFilter extends React.Component<PropsWithContext, State> {
           start={start}
           end={end}
           currency={currency}
+          daysOfStay={daysOfStay}
         />
       </React.Fragment>
     );
@@ -125,20 +180,34 @@ type Props = {|
   +isActive: boolean,
 |};
 
+const calculateDaysOfStay = (checkin, checkout) => {
+  if (checkin && checkout) {
+    return DateUtils.diffInDays(checkout, checkin);
+  }
+  return null;
+};
+
 export default function PriceFilterWithContext(props: Props) {
   return (
     <HotelsContext.Consumer>
-      {({ currency }) => (
-        <HotelsSearchContext.Consumer>
-          {({ currentSearchStats }) => (
-            <PriceFilter
-              {...props}
-              currentSearchStats={currentSearchStats}
-              currency={currency}
-            />
-          )}
-        </HotelsSearchContext.Consumer>
-      )}
+      {({ currency, checkin, checkout }) => {
+        const daysOfStay = calculateDaysOfStay(checkin, checkout);
+        if (daysOfStay === null) {
+          return null;
+        }
+        return (
+          <HotelsSearchContext.Consumer>
+            {({ currentSearchStats }) => (
+              <PriceFilter
+                {...props}
+                currentSearchStats={currentSearchStats}
+                currency={currency}
+                daysOfStay={daysOfStay}
+              />
+            )}
+          </HotelsSearchContext.Consumer>
+        );
+      }}
     </HotelsContext.Consumer>
   );
 }
diff --git a/app/hotels/src/filter/price/PricePopup.js b/app/hotels/src/filter/price/PricePopup.js
index 784103c9..e971dca9 100644
--- a/app/hotels/src/filter/price/PricePopup.js
+++ b/app/hotels/src/filter/price/PricePopup.js
@@ -1,8 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import { Text, ButtonPopup, Slider } from '@kiwicom/mobile-shared';
+import {
+  Text,
+  ButtonPopup,
+  Slider,
+  StyleSheet,
+  SliderLabels,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   onClose: () => void,
@@ -13,6 +21,7 @@ type Props = {|
   start: number,
   end: number,
   currency: string,
+  daysOfStay: number,
 |};
 
 type State = {|
@@ -41,7 +50,9 @@ export default class PricePopup extends React.Component<Props, State> {
         };
 
   handlePriceChanged = ([start, end]: number[]) =>
-    this.setState({ price: { start, end } });
+    this.setState({
+      price: { start, end },
+    });
 
   onSave = () =>
     this.props.onSave({
@@ -49,44 +60,78 @@ export default class PricePopup extends React.Component<Props, State> {
       maxPrice: this.state.price.end,
     });
 
-  renderLabel = () => {
-    const { start, end } = this.state.price;
-    const { currency } = this.props;
-
-    return (
-      <Text>
-        <Translation passThrough={`${start} ${currency}`} />
-        <Translation passThrough=" - " />
-        <Translation passThrough={`${end} ${currency}`} />
-      </Text>
-    );
-  };
-
   render() {
     const { start, end } = this.state.price;
-    const { min, max } = this.props;
+    const { min, max, currency, daysOfStay } = this.props;
 
-    const label = this.renderLabel();
     return (
-      <ButtonPopup
-        buttonTitle={<Translation id="hotels_search.filter.price_popup.save" />}
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text>
-          <Translation id="hotels_search.filter.price_popup.title" />
-          <Translation passThrough=" " />
-          {label}
-        </Text>
-        <Slider
-          startValue={start}
-          endValue={end}
-          min={min}
-          max={max}
-          onChange={this.handlePriceChanged}
-        />
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.price_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.price_popup.title" />
+            <Translation passThrough=" " />
+            <Text style={styles.subtitle}>
+              <Translation id="hotels_search.filter.price_popup.subtitle" />
+            </Text>
+          </Text>
+          <SliderLabels
+            max={max}
+            min={min}
+            startLabel={
+              <Translation
+                id="hotels_search.filter.price_popup.price_label"
+                values={{
+                  amount: start * daysOfStay,
+                  currency: currency,
+                }}
+              />
+            }
+            startValue={start}
+            endLabel={
+              <Translation
+                id="hotels_search.filter.price_popup.price_label"
+                values={{
+                  amount: end * daysOfStay,
+                  currency: currency,
+                }}
+              />
+            }
+            endValue={end}
+          />
+          <Slider
+            startValue={start}
+            endValue={end}
+            min={min}
+            max={max}
+            onChange={this.handlePriceChanged}
+          />
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
+
+const styles = StyleSheet.create({
+  title: {
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
+  },
+  subtitle: {
+    fontSize: 14,
+    fontWeight: '200',
+    color: defaultTokens.colorTextSecondary,
+  },
+});
diff --git a/app/hotels/src/filter/score/ScorePopup.js b/app/hotels/src/filter/score/ScorePopup.js
index af369373..b2ec0e4d 100644
--- a/app/hotels/src/filter/score/ScorePopup.js
+++ b/app/hotels/src/filter/score/ScorePopup.js
@@ -1,8 +1,16 @@
 // @flow
 
 import * as React from 'react';
-import { Text, ButtonPopup, Slider } from '@kiwicom/mobile-shared';
+import {
+  Text,
+  ButtonPopup,
+  Slider,
+  StyleSheet,
+  SliderLabels,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SafeAreaView } from 'react-navigation';
 
 type Props = {|
   onClose: () => void,
@@ -48,33 +56,50 @@ export default class ScorePopup extends React.Component<Props, State> {
       <Translation key="8" id="hotels_search.filter.score_filter.rating.8" />,
       <Translation key="9" id="hotels_search.filter.score_filter.rating.9" />,
     ];
-    return (
-      <Text>
-        <Translation id="hotels_search.filter.score_popup.title" />
-        <Translation passThrough=" " />
-        {labels[sliderValue]}
-      </Text>
-    );
+    return labels[sliderValue];
   };
 
   convertSliderValueToScore = (value: number) =>
     value ? value + SLIDER_SHIFT : null;
 
   render = () => (
-    <ButtonPopup
-      buttonTitle={<Translation id="hotels_search.filter.score_popup.save" />}
-      onSave={this.onSave}
-      onClose={this.props.onClose}
-      isVisible={this.props.isVisible}
-    >
-      <Text>{this.renderLabel(this.state.sliderValue)}</Text>
-      <Slider
-        startValue={this.state.sliderValue}
-        min={0}
-        max={4}
-        onChange={this.handleScoreChanged}
-        snapped={true}
-      />
-    </ButtonPopup>
+    <SafeAreaView>
+      <ButtonPopup
+        buttonTitle={<Translation id="hotels_search.filter.score_popup.save" />}
+        buttonCloseTitle={
+          <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+        }
+        onSave={this.onSave}
+        onClose={this.props.onClose}
+        isVisible={this.props.isVisible}
+      >
+        <Text style={styles.title}>
+          <Translation id="hotels_search.filter.score_filter.rating" />
+        </Text>
+        <SliderLabels
+          max={4}
+          min={0}
+          startLabel={this.renderLabel(this.state.sliderValue)}
+          startValue={this.state.sliderValue}
+        />
+        <Slider
+          startValue={this.state.sliderValue}
+          min={0}
+          max={4}
+          onChange={this.handleScoreChanged}
+          snapped={true}
+        />
+      </ButtonPopup>
+    </SafeAreaView>
   );
 }
+
+const styles = StyleSheet.create({
+  title: {
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
+  },
+});
diff --git a/app/hotels/src/filter/stars/StarsPopup.js b/app/hotels/src/filter/stars/StarsPopup.js
index d5dce8dc..79acd18e 100644
--- a/app/hotels/src/filter/stars/StarsPopup.js
+++ b/app/hotels/src/filter/stars/StarsPopup.js
@@ -7,8 +7,11 @@ import {
   Checkbox,
   Text,
 } from '@kiwicom/mobile-shared';
+import { View } from 'react-native';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+import { SafeAreaView } from 'react-navigation';
 
 import StarsCheckbox from './StarsCheckbox';
 
@@ -34,7 +37,7 @@ export default class StarsPopup extends React.Component<Props, State> {
   handleCheckboxOnPress = (option: number) => () =>
     this.setState(state => {
       let stars = [...state.stars];
-      if (stars.indexOf(option) >= 0) {
+      if (stars.includes(option)) {
         stars = stars.filter(star => star !== option);
       } else {
         stars.push(option);
@@ -47,20 +50,29 @@ export default class StarsPopup extends React.Component<Props, State> {
   renderCheckboxes = (stars: number[]) => {
     const checkboxes = [];
     for (let i = 5; i > 0; i--) {
+      const isStarsRowChecked = stars.includes(i);
       checkboxes.push(
-        <StarsCheckbox
-          key={i}
-          stars={i}
-          isChecked={stars.indexOf(i) >= 0}
-          style={styles.delimiter}
-          onPress={this.handleCheckboxOnPress(i)}
-        />,
+        <React.Fragment key={i}>
+          <StarsCheckbox
+            stars={i}
+            isChecked={isStarsRowChecked}
+            onPress={this.handleCheckboxOnPress(i)}
+          />
+          <View style={styles.separatorEnd}>
+            <SeparatorTrimmed
+              gapSizeStart={0}
+              color={defaultTokens.paletteInkLighter}
+              height={0.5}
+            />
+          </View>
+        </React.Fragment>,
       );
     }
+    const isUnratedChecked = stars.includes(0);
     checkboxes.push(
       <Checkbox
         key={0}
-        isChecked={stars.indexOf(0) >= 0}
+        isChecked={isUnratedChecked}
         onPress={this.handleCheckboxOnPress(0)}
       >
         <Text style={styles.unrated}>
@@ -74,33 +86,41 @@ export default class StarsPopup extends React.Component<Props, State> {
   render() {
     const { stars } = this.state;
     return (
-      <ButtonPopup
-        buttonTitle={<Translation id="hotels_search.filter.stars_popup.save" />}
-        onSave={this.onSave}
-        onClose={this.props.onClose}
-        isVisible={this.props.isVisible}
-      >
-        <Text style={styles.title}>
-          <Translation id="hotels_search.filter.stars_popup.title" />
-        </Text>
-        {this.renderCheckboxes(stars)}
-      </ButtonPopup>
+      <SafeAreaView>
+        <ButtonPopup
+          buttonTitle={
+            <Translation id="hotels_search.filter.stars_popup.save" />
+          }
+          buttonCloseTitle={
+            <Translation id="hotels_search.filter.hotel_facilities_popup.close" />
+          }
+          onSave={this.onSave}
+          onClose={this.props.onClose}
+          isVisible={this.props.isVisible}
+        >
+          <Text style={styles.title}>
+            <Translation id="hotels_search.filter.stars_popup.title" />
+          </Text>
+          {this.renderCheckboxes(stars)}
+        </ButtonPopup>
+      </SafeAreaView>
     );
   }
 }
 
 const styles = StyleSheet.create({
   title: {
-    color: defaultTokens.colorTextSecondary,
-    paddingBottom: 5,
-    fontSize: 12,
-  },
-  delimiter: {
-    borderBottomWidth: 0.5,
-    borderBottomColor: defaultTokens.paletteCloudLight,
+    color: defaultTokens.colorHeading,
+    fontSize: 16,
+    fontWeight: '500',
+    paddingTop: 15,
+    paddingBottom: 10,
   },
   unrated: {
     marginStart: 3,
     fontSize: 16,
   },
+  separatorEnd: {
+    marginEnd: -15,
+  },
 });
diff --git a/app/hotels/src/map/allHotels/HotelSwipeItem.js b/app/hotels/src/map/allHotels/HotelSwipeItem.js
index 031ab2f2..ccfb5613 100644
--- a/app/hotels/src/map/allHotels/HotelSwipeItem.js
+++ b/app/hotels/src/map/allHotels/HotelSwipeItem.js
@@ -23,7 +23,7 @@ type Props = {
 export class HotelSwipeItem extends React.Component<Props> {
   handlePress = () => {
     const { data } = this.props;
-    const id = idx(data, _ => _.hotel.id);
+    const id = idx(data, _ => _.hotelId);
 
     if (id) {
       this.props.onPress(id);
@@ -32,11 +32,21 @@ export class HotelSwipeItem extends React.Component<Props> {
 
   render = () => {
     const { width, data } = this.props;
-
+    const name = idx(data, _ => _.name);
+    const price = idx(data, _ => _.price);
+    const thumbnailUrl = idx(data, _ => _.mainPhoto.thumbnailUrl);
+    const stars = idx(data, _ => _.rating.stars);
+    const score = idx(data, _ => _.review.score);
     return (
       <TouchableWithoutFeedback onPress={this.handlePress}>
         <View style={{ width }}>
-          <HotelDetailPreview availability={data} />
+          <HotelDetailPreview
+            name={name}
+            price={price}
+            thumbnailUrl={thumbnailUrl}
+            stars={stars}
+            score={score}
+          />
         </View>
       </TouchableWithoutFeedback>
     );
@@ -46,10 +56,21 @@ export class HotelSwipeItem extends React.Component<Props> {
 export default (createFragmentContainer(
   HotelSwipeItem,
   graphql`
-    fragment HotelSwipeItem on HotelAvailability {
-      ...HotelDetailPreview_availability
-      hotel {
-        id
+    fragment HotelSwipeItem on AllHotelAvailabilityHotel {
+      hotelId
+      name
+      price {
+        currency
+        amount
+      }
+      mainPhoto {
+        thumbnailUrl
+      }
+      rating {
+        stars
+      }
+      review {
+        score
       }
     }
   `,
diff --git a/app/hotels/src/map/allHotels/HotelSwipeList.js b/app/hotels/src/map/allHotels/HotelSwipeList.js
index 44e02a93..2ab0a31b 100644
--- a/app/hotels/src/map/allHotels/HotelSwipeList.js
+++ b/app/hotels/src/map/allHotels/HotelSwipeList.js
@@ -50,7 +50,7 @@ class HotelSwipeList extends React.Component<Props, State> {
   getSelectedAddress = () => {
     const { selectedIndex, data } = this.props;
 
-    return idx(data, _ => _[selectedIndex].node.hotel.address) || {};
+    return idx(data, _ => _[selectedIndex].node.address) || {};
   };
 
   renderItem = ({ item }: { item: Object, index: number }) => {
@@ -142,14 +142,13 @@ const styles = StyleSheet.create({
 export default createFragmentContainer(
   HotelSwipeList,
   graphql`
-    fragment HotelSwipeList on HotelAvailabilityEdge @relay(plural: true) {
+    fragment HotelSwipeList on AllHotelAvailabilityHotelEdge
+      @relay(plural: true) {
       node {
         id
         ...HotelSwipeItem
-        hotel {
-          address {
-            ...Address_address
-          }
+        address {
+          ...Address_address
         }
       }
     }
diff --git a/app/hotels/src/map/allHotels/MapScreen.js b/app/hotels/src/map/allHotels/MapScreen.js
index ed70e778..7199a46a 100644
--- a/app/hotels/src/map/allHotels/MapScreen.js
+++ b/app/hotels/src/map/allHotels/MapScreen.js
@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
 export default createFragmentContainer(
   MapScreen,
   graphql`
-    fragment MapScreen on HotelAvailabilityEdge @relay(plural: true) {
+    fragment MapScreen on AllHotelAvailabilityHotelEdge @relay(plural: true) {
       node {
         id
       }
diff --git a/app/hotels/src/map/allHotels/MapView.js b/app/hotels/src/map/allHotels/MapView.js
index 2577d50d..494c6b9a 100644
--- a/app/hotels/src/map/allHotels/MapView.js
+++ b/app/hotels/src/map/allHotels/MapView.js
@@ -71,7 +71,7 @@ export class Map extends React.Component<Props, State> {
   };
 
   getCoordinate = (hotel: Object): LatLng | null => {
-    const coordinate = idx(hotel, _ => _.node.hotel.coordinates);
+    const coordinate = idx(hotel, _ => _.node.coordinates);
 
     if (coordinate) {
       return {
@@ -214,17 +214,15 @@ export class Map extends React.Component<Props, State> {
 export default createFragmentContainer(
   Map,
   graphql`
-    fragment MapView on HotelAvailabilityEdge @relay(plural: true) {
+    fragment MapView on AllHotelAvailabilityHotelEdge @relay(plural: true) {
       node {
         id
         price {
           ...PriceMarker
         }
-        hotel {
-          coordinates {
-            lat
-            lng
-          }
+        coordinates {
+          lat
+          lng
         }
       }
     }
diff --git a/app/hotels/src/map/allHotels/__generated__/HotelSwipeItem.graphql.js b/app/hotels/src/map/allHotels/__generated__/HotelSwipeItem.graphql.js
index 95cfc4fe..fde21a7b 100644
--- a/app/hotels/src/map/allHotels/__generated__/HotelSwipeItem.graphql.js
+++ b/app/hotels/src/map/allHotels/__generated__/HotelSwipeItem.graphql.js
@@ -8,14 +8,24 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
-type HotelDetailPreview_availability$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type HotelSwipeItem$ref: FragmentReference;
 export type HotelSwipeItem = {|
-  +hotel: ?{|
-    +id: string
+  +hotelId: ?string,
+  +name: ?string,
+  +price: ?{|
+    +currency: ?string,
+    +amount: ?number,
+  |},
+  +mainPhoto: ?{|
+    +thumbnailUrl: ?string
+  |},
+  +rating: ?{|
+    +stars: ?number
+  |},
+  +review: ?{|
+    +score: ?number
   |},
-  +$fragmentRefs: HotelDetailPreview_availability$ref,
   +$refType: HotelSwipeItem$ref,
 |};
 */
@@ -24,28 +34,98 @@ export type HotelSwipeItem = {|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "HotelSwipeItem",
-  "type": "HotelAvailability",
+  "type": "AllHotelAvailabilityHotel",
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
     {
-      "kind": "FragmentSpread",
-      "name": "HotelDetailPreview_availability",
-      "args": null
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "hotelId",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "name",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "price",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Price",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "currency",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "amount",
+          "args": null,
+          "storageKey": null
+        }
+      ]
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "mainPhoto",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "HotelPhoto",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "thumbnailUrl",
+          "args": null,
+          "storageKey": null
+        }
+      ]
+    },
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "rating",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "HotelRating",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "stars",
+          "args": null,
+          "storageKey": null
+        }
+      ]
     },
     {
       "kind": "LinkedField",
       "alias": null,
-      "name": "hotel",
+      "name": "review",
       "storageKey": null,
       "args": null,
-      "concreteType": "Hotel",
+      "concreteType": "HotelReview",
       "plural": false,
       "selections": [
         {
           "kind": "ScalarField",
           "alias": null,
-          "name": "id",
+          "name": "score",
           "args": null,
           "storageKey": null
         }
@@ -54,5 +134,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '9ed0e348c941d43b7e2e85c3d290460c';
+(node/*: any*/).hash = '84334d01083bdc7458559d612eba9313';
 module.exports = node;
diff --git a/app/hotels/src/map/allHotels/__generated__/HotelSwipeList.graphql.js b/app/hotels/src/map/allHotels/__generated__/HotelSwipeList.graphql.js
index 545e2472..12927eb9 100644
--- a/app/hotels/src/map/allHotels/__generated__/HotelSwipeList.graphql.js
+++ b/app/hotels/src/map/allHotels/__generated__/HotelSwipeList.graphql.js
@@ -15,10 +15,8 @@ declare export opaque type HotelSwipeList$ref: FragmentReference;
 export type HotelSwipeList = $ReadOnlyArray<{|
   +node: ?{|
     +id: string,
-    +hotel: ?{|
-      +address: ?{|
-        +$fragmentRefs: Address_address$ref
-      |}
+    +address: ?{|
+      +$fragmentRefs: Address_address$ref
     |},
     +$fragmentRefs: HotelSwipeItem$ref,
   |},
@@ -30,7 +28,7 @@ export type HotelSwipeList = $ReadOnlyArray<{|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "HotelSwipeList",
-  "type": "HotelAvailabilityEdge",
+  "type": "AllHotelAvailabilityHotelEdge",
   "metadata": {
     "plural": true
   },
@@ -42,7 +40,7 @@ const node/*: ConcreteFragment*/ = {
       "name": "node",
       "storageKey": null,
       "args": null,
-      "concreteType": "HotelAvailability",
+      "concreteType": "AllHotelAvailabilityHotel",
       "plural": false,
       "selections": [
         {
@@ -60,27 +58,16 @@ const node/*: ConcreteFragment*/ = {
         {
           "kind": "LinkedField",
           "alias": null,
-          "name": "hotel",
+          "name": "address",
           "storageKey": null,
           "args": null,
-          "concreteType": "Hotel",
+          "concreteType": "Address",
           "plural": false,
           "selections": [
             {
-              "kind": "LinkedField",
-              "alias": null,
-              "name": "address",
-              "storageKey": null,
-              "args": null,
-              "concreteType": "Address",
-              "plural": false,
-              "selections": [
-                {
-                  "kind": "FragmentSpread",
-                  "name": "Address_address",
-                  "args": null
-                }
-              ]
+              "kind": "FragmentSpread",
+              "name": "Address_address",
+              "args": null
             }
           ]
         }
@@ -89,5 +76,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '53be9466d23014954274bec697d36701';
+(node/*: any*/).hash = 'ca4a5da16717692bf1b27d0efd68e473';
 module.exports = node;
diff --git a/app/hotels/src/map/allHotels/__generated__/MapScreen.graphql.js b/app/hotels/src/map/allHotels/__generated__/MapScreen.graphql.js
index 5018dade..7c4e5cbf 100644
--- a/app/hotels/src/map/allHotels/__generated__/MapScreen.graphql.js
+++ b/app/hotels/src/map/allHotels/__generated__/MapScreen.graphql.js
@@ -25,7 +25,7 @@ export type MapScreen = $ReadOnlyArray<{|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "MapScreen",
-  "type": "HotelAvailabilityEdge",
+  "type": "AllHotelAvailabilityHotelEdge",
   "metadata": {
     "plural": true
   },
@@ -37,7 +37,7 @@ const node/*: ConcreteFragment*/ = {
       "name": "node",
       "storageKey": null,
       "args": null,
-      "concreteType": "HotelAvailability",
+      "concreteType": "AllHotelAvailabilityHotel",
       "plural": false,
       "selections": [
         {
@@ -62,5 +62,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '2126f43c3311a7ac2f147083c81044c5';
+(node/*: any*/).hash = '3a319bc51783ede539706a348e4abc3c';
 module.exports = node;
diff --git a/app/hotels/src/map/allHotels/__generated__/MapView.graphql.js b/app/hotels/src/map/allHotels/__generated__/MapView.graphql.js
index 71040923..5ce410f2 100644
--- a/app/hotels/src/map/allHotels/__generated__/MapView.graphql.js
+++ b/app/hotels/src/map/allHotels/__generated__/MapView.graphql.js
@@ -17,11 +17,9 @@ export type MapView = $ReadOnlyArray<{|
     +price: ?{|
       +$fragmentRefs: PriceMarker$ref
     |},
-    +hotel: ?{|
-      +coordinates: ?{|
-        +lat: ?number,
-        +lng: ?number,
-      |}
+    +coordinates: ?{|
+      +lat: ?number,
+      +lng: ?number,
     |},
   |},
   +$refType: MapView$ref,
@@ -32,7 +30,7 @@ export type MapView = $ReadOnlyArray<{|
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "MapView",
-  "type": "HotelAvailabilityEdge",
+  "type": "AllHotelAvailabilityHotelEdge",
   "metadata": {
     "plural": true
   },
@@ -44,7 +42,7 @@ const node/*: ConcreteFragment*/ = {
       "name": "node",
       "storageKey": null,
       "args": null,
-      "concreteType": "HotelAvailability",
+      "concreteType": "AllHotelAvailabilityHotel",
       "plural": false,
       "selections": [
         {
@@ -73,36 +71,25 @@ const node/*: ConcreteFragment*/ = {
         {
           "kind": "LinkedField",
           "alias": null,
-          "name": "hotel",
+          "name": "coordinates",
           "storageKey": null,
           "args": null,
-          "concreteType": "Hotel",
+          "concreteType": "Coordinates",
           "plural": false,
           "selections": [
             {
-              "kind": "LinkedField",
+              "kind": "ScalarField",
               "alias": null,
-              "name": "coordinates",
-              "storageKey": null,
+              "name": "lat",
               "args": null,
-              "concreteType": "Coordinates",
-              "plural": false,
-              "selections": [
-                {
-                  "kind": "ScalarField",
-                  "alias": null,
-                  "name": "lat",
-                  "args": null,
-                  "storageKey": null
-                },
-                {
-                  "kind": "ScalarField",
-                  "alias": null,
-                  "name": "lng",
-                  "args": null,
-                  "storageKey": null
-                }
-              ]
+              "storageKey": null
+            },
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "lng",
+              "args": null,
+              "storageKey": null
             }
           ]
         }
@@ -111,5 +98,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = 'f065bba4ce55930453baf873f16fc063';
+(node/*: any*/).hash = 'f327332c07ce44dd8954ee20e9d83665';
 module.exports = node;
diff --git a/app/hotels/src/map/hotelDetailPreview/HotelDetailPreview.js b/app/hotels/src/map/hotelDetailPreview/HotelDetailPreview.js
index 1909b927..f8d00f9a 100644
--- a/app/hotels/src/map/hotelDetailPreview/HotelDetailPreview.js
+++ b/app/hotels/src/map/hotelDetailPreview/HotelDetailPreview.js
@@ -9,24 +9,30 @@ import {
   Text,
   Stars,
 } from '@kiwicom/mobile-shared';
-import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import type { HotelDetailPreview_availability } from './__generated__/HotelDetailPreview_availability.graphql';
 import { HotelDetailConsumer } from './HotelDetailPreviewContext';
 import HotelReviewScore from '../../components/HotelReviewScore';
 
 type Props = {|
-  +availability: ?HotelDetailPreview_availability,
+  +name?: ?string,
+  +price?: ?{|
+    +currency?: ?string,
+    +amount?: ?number,
+  |},
+  +thumbnailUrl?: ?string,
+  +stars?: ?number,
+  +score?: ?number,
 |};
 
-export const HotelDetailPreview = ({ availability }: Props) => {
-  const name = idx(availability, _ => _.hotel.name);
-  const price = idx(availability, _ => _.price) || {};
-  const image = idx(availability, _ => _.hotel.mainPhoto.thumbnailUrl);
-  const stars = idx(availability, _ => _.hotel.rating.stars) || 0;
+export default function HotelDetailPreview(props: Props) {
+  const name = idx(props, _ => _.name);
+  const price = idx(props, _ => _.price) || {};
+  const image = idx(props, _ => _.thumbnailUrl);
+  const stars = idx(props, _ => _.stars) || 0;
+  const score = idx(props, _ => _.score);
   return (
     <HotelDetailConsumer>
       {({ containerWidth }) => (
@@ -55,14 +61,14 @@ export const HotelDetailPreview = ({ availability }: Props) => {
                     </Text>
                   )}
               </View>
-              <HotelReviewScore hotel={idx(availability, _ => _.hotel)} />
+              <HotelReviewScore score={score} />
             </View>
           </View>
         </View>
       )}
     </HotelDetailConsumer>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {
@@ -100,26 +106,3 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
 });
-
-export default createFragmentContainer(
-  HotelDetailPreview,
-  graphql`
-    fragment HotelDetailPreview_availability on HotelAvailability {
-      price {
-        amount
-        currency
-      }
-      hotel {
-        ...HotelReviewScore_hotel
-        id
-        name
-        mainPhoto {
-          thumbnailUrl
-        }
-        rating {
-          stars
-        }
-      }
-    }
-  `,
-);
diff --git a/app/hotels/src/map/hotelDetailPreview/__generated__/HotelDetailPreview_availability.graphql.js b/app/hotels/src/map/hotelDetailPreview/__generated__/HotelDetailPreview_availability.graphql.js
deleted file mode 100644
index 06317e4c..00000000
--- a/app/hotels/src/map/hotelDetailPreview/__generated__/HotelDetailPreview_availability.graphql.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteFragment } from 'relay-runtime';
-type HotelReviewScore_hotel$ref = any;
-import type { FragmentReference } from "relay-runtime";
-declare export opaque type HotelDetailPreview_availability$ref: FragmentReference;
-export type HotelDetailPreview_availability = {|
-  +price: ?{|
-    +amount: ?number,
-    +currency: ?string,
-  |},
-  +hotel: ?{|
-    +id: string,
-    +name: ?string,
-    +mainPhoto: ?{|
-      +thumbnailUrl: ?string
-    |},
-    +rating: ?{|
-      +stars: ?number
-    |},
-    +$fragmentRefs: HotelReviewScore_hotel$ref,
-  |},
-  +$refType: HotelDetailPreview_availability$ref,
-|};
-*/
-
-
-const node/*: ConcreteFragment*/ = {
-  "kind": "Fragment",
-  "name": "HotelDetailPreview_availability",
-  "type": "HotelAvailability",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "price",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "Price",
-      "plural": false,
-      "selections": [
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "amount",
-          "args": null,
-          "storageKey": null
-        },
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "currency",
-          "args": null,
-          "storageKey": null
-        }
-      ]
-    },
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "hotel",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "Hotel",
-      "plural": false,
-      "selections": [
-        {
-          "kind": "FragmentSpread",
-          "name": "HotelReviewScore_hotel",
-          "args": null
-        },
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "id",
-          "args": null,
-          "storageKey": null
-        },
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "name",
-          "args": null,
-          "storageKey": null
-        },
-        {
-          "kind": "LinkedField",
-          "alias": null,
-          "name": "mainPhoto",
-          "storageKey": null,
-          "args": null,
-          "concreteType": "HotelPhoto",
-          "plural": false,
-          "selections": [
-            {
-              "kind": "ScalarField",
-              "alias": null,
-              "name": "thumbnailUrl",
-              "args": null,
-              "storageKey": null
-            }
-          ]
-        },
-        {
-          "kind": "LinkedField",
-          "alias": null,
-          "name": "rating",
-          "storageKey": null,
-          "args": null,
-          "concreteType": "HotelRating",
-          "plural": false,
-          "selections": [
-            {
-              "kind": "ScalarField",
-              "alias": null,
-              "name": "stars",
-              "args": null,
-              "storageKey": null
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-// prettier-ignore
-(node/*: any*/).hash = 'f7e9077bb6cc45f9e9c9cd130eb48d2f';
-module.exports = node;
diff --git a/app/hotels/src/map/singleHotel/AdditionalInfo.js b/app/hotels/src/map/singleHotel/AdditionalInfo.js
index 2eaa4a74..6348972a 100644
--- a/app/hotels/src/map/singleHotel/AdditionalInfo.js
+++ b/app/hotels/src/map/singleHotel/AdditionalInfo.js
@@ -34,14 +34,24 @@ export class AdditionalInfo extends React.Component<Props, State> {
 
   render() {
     const { data } = this.props;
-
+    const name = idx(data, _ => _.hotel.name);
+    const price = idx(data, _ => _.price);
+    const thumbnailUrl = idx(data, _ => _.hotel.mainPhoto.thumbnailUrl);
+    const stars = idx(data, _ => _.hotel.rating.stars);
+    const score = idx(data, _ => _.hotel.review.score);
     return (
       <View style={styles.container} onLayout={this.onLayout}>
         <HotelPreviewProvider value={this.state}>
           <BottomSheet>
             <BottomSheetHandle />
             <View style={styles.detailPreviewContainer}>
-              <HotelDetailPreview availability={data} />
+              <HotelDetailPreview
+                name={name}
+                price={price}
+                thumbnailUrl={thumbnailUrl}
+                stars={stars}
+                score={score}
+              />
               <Address address={idx(data, _ => _.hotel.address)} />
             </View>
           </BottomSheet>
@@ -72,11 +82,25 @@ export default createFragmentContainer(
   AdditionalInfo,
   graphql`
     fragment AdditionalInfo on HotelAvailability {
-      ...HotelDetailPreview_availability
+      price {
+        amount
+        currency
+      }
       hotel {
         address {
           ...Address_address
         }
+        review {
+          score
+        }
+        id
+        name
+        mainPhoto {
+          thumbnailUrl
+        }
+        rating {
+          stars
+        }
       }
     }
   `,
diff --git a/app/hotels/src/map/singleHotel/__generated__/AdditionalInfo.graphql.js b/app/hotels/src/map/singleHotel/__generated__/AdditionalInfo.graphql.js
index 64b2ac1f..7b2cdf4f 100644
--- a/app/hotels/src/map/singleHotel/__generated__/AdditionalInfo.graphql.js
+++ b/app/hotels/src/map/singleHotel/__generated__/AdditionalInfo.graphql.js
@@ -9,16 +9,29 @@
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
 type Address_address$ref = any;
-type HotelDetailPreview_availability$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type AdditionalInfo$ref: FragmentReference;
 export type AdditionalInfo = {|
+  +price: ?{|
+    +amount: ?number,
+    +currency: ?string,
+  |},
   +hotel: ?{|
     +address: ?{|
       +$fragmentRefs: Address_address$ref
-    |}
+    |},
+    +review: ?{|
+      +score: ?number
+    |},
+    +id: string,
+    +name: ?string,
+    +mainPhoto: ?{|
+      +thumbnailUrl: ?string
+    |},
+    +rating: ?{|
+      +stars: ?number
+    |},
   |},
-  +$fragmentRefs: HotelDetailPreview_availability$ref,
   +$refType: AdditionalInfo$ref,
 |};
 */
@@ -32,9 +45,29 @@ const node/*: ConcreteFragment*/ = {
   "argumentDefinitions": [],
   "selections": [
     {
-      "kind": "FragmentSpread",
-      "name": "HotelDetailPreview_availability",
-      "args": null
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "price",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Price",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "amount",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "currency",
+          "args": null,
+          "storageKey": null
+        }
+      ]
     },
     {
       "kind": "LinkedField",
@@ -60,11 +93,79 @@ const node/*: ConcreteFragment*/ = {
               "args": null
             }
           ]
+        },
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "review",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "HotelReview",
+          "plural": false,
+          "selections": [
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "score",
+              "args": null,
+              "storageKey": null
+            }
+          ]
+        },
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "id",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "name",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "mainPhoto",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "HotelPhoto",
+          "plural": false,
+          "selections": [
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "thumbnailUrl",
+              "args": null,
+              "storageKey": null
+            }
+          ]
+        },
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "rating",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "HotelRating",
+          "plural": false,
+          "selections": [
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "stars",
+              "args": null,
+              "storageKey": null
+            }
+          ]
         }
       ]
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '4eadebdbcac36d96c597258610f41048';
+(node/*: any*/).hash = 'fb58f5cd722f8df8339c3034d88558a6';
 module.exports = node;
diff --git a/app/hotels/src/map/singleHotel/__generated__/SingleHotelMapScreenQuery.graphql.js b/app/hotels/src/map/singleHotel/__generated__/SingleHotelMapScreenQuery.graphql.js
index 9031f71a..85780d7a 100644
--- a/app/hotels/src/map/singleHotel/__generated__/SingleHotelMapScreenQuery.graphql.js
+++ b/app/hotels/src/map/singleHotel/__generated__/SingleHotelMapScreenQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash e64c2ba9d2e703fe591d49f8a452e62f
+ * @relayHash 877c63f8212b982d34325aca2aeaeadb
  */
 
 /* eslint-disable */
@@ -72,22 +72,17 @@ fragment MapView_hotel on Hotel {
 }
 
 fragment AdditionalInfo on HotelAvailability {
-  ...HotelDetailPreview_availability
-  hotel {
-    address {
-      ...Address_address
-    }
-    id
-  }
-}
-
-fragment HotelDetailPreview_availability on HotelAvailability {
   price {
     amount
     currency
   }
   hotel {
-    ...HotelReviewScore_hotel
+    address {
+      ...Address_address
+    }
+    review {
+      score
+    }
     id
     name
     mainPhoto {
@@ -105,12 +100,6 @@ fragment Address_address on Address {
   city
   zip
 }
-
-fragment HotelReviewScore_hotel on Hotel {
-  review {
-    score
-  }
-}
 */
 
 const node/*: ConcreteRequest*/ = (function(){
@@ -154,7 +143,7 @@ return {
   "operationKind": "query",
   "name": "SingleHotelMapScreenQuery",
   "id": null,
-  "text": "query SingleHotelMapScreenQuery(\n  $search: AvailableHotelSearchInput!\n  $options: AvailableHotelOptionsInput\n) {\n  availableHotel(search: $search, options: $options) {\n    hotel {\n      ...MapView_hotel\n      id\n    }\n    ...AdditionalInfo\n    id\n  }\n}\n\nfragment MapView_hotel on Hotel {\n  coordinates {\n    lat\n    lng\n  }\n}\n\nfragment AdditionalInfo on HotelAvailability {\n  ...HotelDetailPreview_availability\n  hotel {\n    address {\n      ...Address_address\n    }\n    id\n  }\n}\n\nfragment HotelDetailPreview_availability on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    ...HotelReviewScore_hotel\n    id\n    name\n    mainPhoto {\n      thumbnailUrl\n      id\n    }\n    rating {\n      stars\n    }\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n\nfragment HotelReviewScore_hotel on Hotel {\n  review {\n    score\n  }\n}\n",
+  "text": "query SingleHotelMapScreenQuery(\n  $search: AvailableHotelSearchInput!\n  $options: AvailableHotelOptionsInput\n) {\n  availableHotel(search: $search, options: $options) {\n    hotel {\n      ...MapView_hotel\n      id\n    }\n    ...AdditionalInfo\n    id\n  }\n}\n\nfragment MapView_hotel on Hotel {\n  coordinates {\n    lat\n    lng\n  }\n}\n\nfragment AdditionalInfo on HotelAvailability {\n  price {\n    amount\n    currency\n  }\n  hotel {\n    address {\n      ...Address_address\n    }\n    review {\n      score\n    }\n    id\n    name\n    mainPhoto {\n      thumbnailUrl\n      id\n    }\n    rating {\n      stars\n    }\n  }\n}\n\nfragment Address_address on Address {\n  street\n  city\n  zip\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -246,6 +235,38 @@ return {
                 ]
               },
               v2,
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "address",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "Address",
+                "plural": false,
+                "selections": [
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "street",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "city",
+                    "args": null,
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "zip",
+                    "args": null,
+                    "storageKey": null
+                  }
+                ]
+              },
               {
                 "kind": "LinkedField",
                 "alias": null,
@@ -307,38 +328,6 @@ return {
                     "storageKey": null
                   }
                 ]
-              },
-              {
-                "kind": "LinkedField",
-                "alias": null,
-                "name": "address",
-                "storageKey": null,
-                "args": null,
-                "concreteType": "Address",
-                "plural": false,
-                "selections": [
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "street",
-                    "args": null,
-                    "storageKey": null
-                  },
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "city",
-                    "args": null,
-                    "storageKey": null
-                  },
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "zip",
-                    "args": null,
-                    "storageKey": null
-                  }
-                ]
               }
             ]
           },
diff --git a/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js b/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js
index c84a5e35..54d0f16e 100644
--- a/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js
+++ b/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 96b07378fa5ba64262a70246172bc853
+ * @relayHash 107e2bac28ca99aeacae0c69fcae669e
  */
 
 /* eslint-disable */
@@ -180,19 +180,12 @@ fragment Description_hotel on Hotel {
 }
 
 fragment HotelReview on Hotel {
-  ...HotelReviewScore_hotel
   review {
     score
     count
   }
 }
 
-fragment HotelReviewScore_hotel on Hotel {
-  review {
-    score
-  }
-}
-
 fragment Facilities_facilities on HotelFacilityConnection {
   edges {
     node {
@@ -289,7 +282,7 @@ return {
   "operationKind": "query",
   "name": "SingleHotelContainerQuery",
   "id": null,
-  "text": "query SingleHotelContainerQuery(\n  $search: AvailableHotelSearchInput!\n  $options: AvailableHotelOptionsInput\n) {\n  availableHotel(search: $search, options: $options) {\n    ...HotelDetailScreen_availableHotel\n    id\n  }\n}\n\nfragment HotelDetailScreen_availableHotel on HotelAvailability {\n  hotel {\n    ...Header_hotel\n    ...BookNow_hotel\n    ...HotelInformation_hotel\n    id\n  }\n  availableRooms {\n    ...RoomList\n    originalId\n    incrementalPrice {\n      amount\n      currency\n    }\n    id\n  }\n}\n\nfragment Header_hotel on Hotel {\n  name\n  mainPhoto {\n    highResUrl\n    id\n  }\n  rating {\n    stars\n    categoryName\n  }\n  photos {\n    edges {\n      node {\n        id\n        lowResUrl\n        highResUrl\n      }\n    }\n  }\n}\n\nfragment BookNow_hotel on Hotel {\n  originalId\n}\n\nfragment HotelInformation_hotel on Hotel {\n  ...Location_hotel\n  ...Description_hotel\n  ...HotelReview\n}\n\nfragment RoomList on HotelRoomAvailability {\n  id\n  ...RoomRow_availableRoom\n}\n\nfragment RoomRow_availableRoom on HotelRoomAvailability {\n  originalId\n  ...RoomBadges_availableRoom\n  room {\n    description {\n      title\n    }\n    ...RoomRowTitle_room\n    photos {\n      edges {\n        node {\n          thumbnailUrl\n          highResUrl\n          lowResUrl\n          id\n        }\n      }\n    }\n    maxPersons\n    ...BeddingInfo_room\n    id\n  }\n  minimalPrice {\n    amount\n    currency\n  }\n  incrementalPrice {\n    amount\n    currency\n  }\n}\n\nfragment RoomBadges_availableRoom on HotelRoomAvailability {\n  isBreakfastIncluded\n  isRefundable\n}\n\nfragment RoomRowTitle_room on HotelRoom {\n  description {\n    title\n  }\n}\n\nfragment BeddingInfo_room on HotelRoom {\n  maxPersons\n  bedding {\n    type\n    amount\n  }\n}\n\nfragment Location_hotel on Hotel {\n  address {\n    street\n    city\n  }\n  coordinates {\n    lat\n    lng\n  }\n}\n\nfragment Description_hotel on Hotel {\n  summary\n  facilities {\n    ...Facilities_facilities\n  }\n}\n\nfragment HotelReview on Hotel {\n  ...HotelReviewScore_hotel\n  review {\n    score\n    count\n  }\n}\n\nfragment HotelReviewScore_hotel on Hotel {\n  review {\n    score\n  }\n}\n\nfragment Facilities_facilities on HotelFacilityConnection {\n  edges {\n    node {\n      id\n      name\n    }\n  }\n}\n",
+  "text": "query SingleHotelContainerQuery(\n  $search: AvailableHotelSearchInput!\n  $options: AvailableHotelOptionsInput\n) {\n  availableHotel(search: $search, options: $options) {\n    ...HotelDetailScreen_availableHotel\n    id\n  }\n}\n\nfragment HotelDetailScreen_availableHotel on HotelAvailability {\n  hotel {\n    ...Header_hotel\n    ...BookNow_hotel\n    ...HotelInformation_hotel\n    id\n  }\n  availableRooms {\n    ...RoomList\n    originalId\n    incrementalPrice {\n      amount\n      currency\n    }\n    id\n  }\n}\n\nfragment Header_hotel on Hotel {\n  name\n  mainPhoto {\n    highResUrl\n    id\n  }\n  rating {\n    stars\n    categoryName\n  }\n  photos {\n    edges {\n      node {\n        id\n        lowResUrl\n        highResUrl\n      }\n    }\n  }\n}\n\nfragment BookNow_hotel on Hotel {\n  originalId\n}\n\nfragment HotelInformation_hotel on Hotel {\n  ...Location_hotel\n  ...Description_hotel\n  ...HotelReview\n}\n\nfragment RoomList on HotelRoomAvailability {\n  id\n  ...RoomRow_availableRoom\n}\n\nfragment RoomRow_availableRoom on HotelRoomAvailability {\n  originalId\n  ...RoomBadges_availableRoom\n  room {\n    description {\n      title\n    }\n    ...RoomRowTitle_room\n    photos {\n      edges {\n        node {\n          thumbnailUrl\n          highResUrl\n          lowResUrl\n          id\n        }\n      }\n    }\n    maxPersons\n    ...BeddingInfo_room\n    id\n  }\n  minimalPrice {\n    amount\n    currency\n  }\n  incrementalPrice {\n    amount\n    currency\n  }\n}\n\nfragment RoomBadges_availableRoom on HotelRoomAvailability {\n  isBreakfastIncluded\n  isRefundable\n}\n\nfragment RoomRowTitle_room on HotelRoom {\n  description {\n    title\n  }\n}\n\nfragment BeddingInfo_room on HotelRoom {\n  maxPersons\n  bedding {\n    type\n    amount\n  }\n}\n\nfragment Location_hotel on Hotel {\n  address {\n    street\n    city\n  }\n  coordinates {\n    lat\n    lng\n  }\n}\n\nfragment Description_hotel on Hotel {\n  summary\n  facilities {\n    ...Facilities_facilities\n  }\n}\n\nfragment HotelReview on Hotel {\n  review {\n    score\n    count\n  }\n}\n\nfragment Facilities_facilities on HotelFacilityConnection {\n  edges {\n    node {\n      id\n      name\n    }\n  }\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
diff --git a/app/hotels/src/singleHotel/hotelInformation/HotelReview.js b/app/hotels/src/singleHotel/hotelInformation/HotelReview.js
index ab2e2123..4e22d91d 100644
--- a/app/hotels/src/singleHotel/hotelInformation/HotelReview.js
+++ b/app/hotels/src/singleHotel/hotelInformation/HotelReview.js
@@ -40,7 +40,7 @@ const HotelReview = (props: Props) => {
     <View style={styles.container}>
       <View style={styles.row}>
         <View style={styles.badgeWrapper}>
-          <HotelReviewScore hotel={props.data} />
+          <HotelReviewScore score={idx(props.data, _ => _.review.score)} />
         </View>
         <View>
           <RenderLabel score={idx(props.data, _ => _.review.score)} />
@@ -86,7 +86,6 @@ export default createFragmentContainer(
   HotelReview,
   graphql`
     fragment HotelReview on Hotel {
-      ...HotelReviewScore_hotel
       review {
         score
         count
diff --git a/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
index 63beee5b..ee46aaef 100644
--- a/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
+++ b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
@@ -8,7 +8,6 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
-type HotelReviewScore_hotel$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type HotelReview$ref: FragmentReference;
 export type HotelReview = {|
@@ -16,7 +15,6 @@ export type HotelReview = {|
     +score: ?number,
     +count: ?number,
   |},
-  +$fragmentRefs: HotelReviewScore_hotel$ref,
   +$refType: HotelReview$ref,
 |};
 */
@@ -29,11 +27,6 @@ const node/*: ConcreteFragment*/ = {
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
-    {
-      "kind": "FragmentSpread",
-      "name": "HotelReviewScore_hotel",
-      "args": null
-    },
     {
       "kind": "LinkedField",
       "alias": null,
@@ -62,5 +55,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '566d898a8069db61943a8b7e6f753a4e';
+(node/*: any*/).hash = 'ccee40a6bbd58fde1be9fdf30c0ed952';
 module.exports = node;
diff --git a/packages/localization/src/vocabularies/Hotels.js b/packages/localization/src/vocabularies/Hotels.js
index cad849c2..582f5c02 100644
--- a/packages/localization/src/vocabularies/Hotels.js
+++ b/packages/localization/src/vocabularies/Hotels.js
@@ -39,11 +39,14 @@ export default {
   'hotels_search.filter.hotel_facilities_filter.title': 'amenities',
   'hotels_search.filter.hotel_facilities_filter.wifi': 'Wi-Fi',
   'hotels_search.filter.hotel_facilities_popup.save': 'Save',
+  'hotels_search.filter.hotel_facilities_popup.close': 'Close',
   'hotels_search.filter.hotel_facilities_popup.title': 'Hotel facilities',
   'hotels_search.filter.price_filter.price': 'price',
   'hotels_search.filter.price_popup.save': 'Save',
-  'hotels_search.filter.price_popup.title': 'Price per night:',
-  'hotels_search.filter.score_filter.rating': 'rating',
+  'hotels_search.filter.price_popup.title': 'Price range',
+  'hotels_search.filter.price_popup.subtitle': 'per stay',
+  'hotels_search.filter.price_popup.price_label': '__1_amount__ __2_currency__',
+  'hotels_search.filter.score_filter.rating': 'Rating',
   'hotels_search.filter.score_filter.rating.6': 'pleasant 6+',
   'hotels_search.filter.score_filter.rating.7': 'good 7+',
   'hotels_search.filter.score_filter.rating.8': 'very good 8+',
diff --git a/packages/navigation/src/Separators.js b/packages/navigation/src/Separators.js
index 57b77de7..7442deb4 100644
--- a/packages/navigation/src/Separators.js
+++ b/packages/navigation/src/Separators.js
@@ -7,6 +7,7 @@ import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type SeparatorFullWidthType = {|
   +color?: string,
+  +height?: number,
 |};
 
 /**
@@ -21,6 +22,7 @@ export function SeparatorFullWidth(props: SeparatorFullWidthType) {
   if (props.color) {
     style = {
       backgroundColor: props.color,
+      height: props.height ? props.height : 1,
     };
   }
   return <View style={[styleSheet.separator, style]} />;
@@ -30,6 +32,7 @@ type SeparatorTrimmedType = {|
   +gapSizeStart: number,
   +gapSizeEnd?: number,
   +color?: string,
+  +height?: number,
 |};
 
 /**
@@ -40,31 +43,30 @@ type SeparatorTrimmedType = {|
  * |                           |
  */
 export function SeparatorTrimmed(props: SeparatorTrimmedType) {
-  const { gapSizeStart, gapSizeEnd, color } = props;
+  const { gapSizeStart, gapSizeEnd, color, height } = props;
   return (
     <View style={styleSheet.row}>
-      <View style={[styleSheet.gap, { width: gapSizeStart }]} />
-      <SeparatorFullWidth color={color} />
-      <View style={[styleSheet.gap, { width: gapSizeEnd }]} />
+      <View style={[styleSheet.gap, { width: gapSizeStart, height }]} />
+      <SeparatorFullWidth color={color} height={height} />
+      <View style={[styleSheet.gap, { width: gapSizeEnd, height }]} />
     </View>
   );
 }
 
 SeparatorTrimmed.defaultProps = {
   gapSizeEnd: 0,
+  height: 1,
 };
 
 const styleSheet = StyleSheet.create({
   separator: {
     flex: 1,
-    height: 1,
     backgroundColor: defaultTokens.paletteCloudLight,
   },
   row: {
     flexDirection: 'row',
   },
   gap: {
-    height: 1,
     backgroundColor: defaultTokens.paletteWhite,
   },
 });
diff --git a/packages/shared/index.js b/packages/shared/index.js
index aa4f2b1a..fc4a5e6f 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -49,6 +49,8 @@ export { default as Stars } from './src/Stars';
 export { default as Text } from './src/Text';
 export { default as Duration } from './src/Duration';
 
+export { default as SliderLabels } from './src/SliderLabels';
+
 /**
  * Layout components:
  *  - views
diff --git a/packages/shared/src/SliderLabels.js b/packages/shared/src/SliderLabels.js
new file mode 100644
index 00000000..78cd010c
--- /dev/null
+++ b/packages/shared/src/SliderLabels.js
@@ -0,0 +1,208 @@
+// @flow
+
+import * as React from 'react';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { View } from 'react-native';
+import type { OnLayout } from '@kiwicom/mobile-shared';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+
+import Text from './Text';
+import StyleSheet from './PlatformStyleSheet';
+
+type Props = {|
+  +startLabel: TranslationType,
+  +startValue: number,
+  +endLabel?: TranslationType,
+  +endValue?: number,
+  +max: number,
+  +min: number,
+|};
+
+type State = {|
+  width: number,
+  labelStartWidth: number,
+  labelStartAtMax: boolean,
+  labelEndWidth: number,
+  paddingLeft: number,
+  paddingRight: number,
+|};
+
+export default class SliderLabels extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      width: 0,
+      labelStartWidth: 0,
+      labelStartAtMax: false,
+      labelEndWidth: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    };
+  }
+
+  componentDidMount = () => {
+    if (this.props.endValue) {
+      requestAnimationFrame(this.setPaddingForTwoLabels);
+    } else {
+      requestAnimationFrame(this.setPaddingForOneLabel);
+    }
+  };
+
+  getMaxPadding = (gap: number): number => {
+    return Math.floor(
+      this.state.width -
+        this.state.labelStartWidth -
+        this.state.labelEndWidth -
+        gap,
+    );
+  };
+
+  calculateMarkerStartOffset = (): number => {
+    const { min, max, startValue } = this.props;
+
+    let val;
+    if (startValue > max) {
+      val = max;
+    } else if (startValue < min) {
+      val = min;
+    } else {
+      val = startValue;
+    }
+
+    return Math.round((val / (max - min)) * this.state.width);
+  };
+
+  calculateMarkerEndOffset = (): number => {
+    const { min, max, endValue } = this.props;
+
+    if (!endValue) {
+      return 0;
+    }
+
+    let val;
+    if (endValue > max) {
+      val = max;
+    } else if (endValue < min) {
+      val = min;
+    } else {
+      val = endValue;
+    }
+
+    const w = (val / (max - min)) * this.state.width;
+    return Math.round(this.state.width - w);
+  };
+
+  getStartLabelOffset = (): number => {
+    const startMarkerOffset = this.calculateMarkerStartOffset();
+    const startLabelHalf = this.state.labelStartWidth / 2;
+
+    return startMarkerOffset < startLabelHalf
+      ? 0
+      : startMarkerOffset - startLabelHalf;
+  };
+
+  isBelowMaxPadding = (value: number, gap: number = 0): boolean => {
+    const maxPadding = this.getMaxPadding(gap);
+    return value + gap < maxPadding;
+  };
+
+  setPaddingForTwoLabels = (): void => {
+    const startLabelOffset = this.getStartLabelOffset();
+    const endMarkerOffset = this.calculateMarkerEndOffset();
+    const endLabelHalf = this.state.labelEndWidth / 2;
+    const endLabelOffset =
+      endMarkerOffset < endLabelHalf ? 0 : endMarkerOffset - endLabelHalf;
+
+    const isBelowMaxPadding = this.isBelowMaxPadding(
+      startLabelOffset + endLabelOffset,
+      10,
+    );
+
+    const hasOffsetChanged =
+      this.state.paddingLeft !== startLabelOffset ||
+      this.state.paddingRight !== endLabelOffset;
+
+    if (isBelowMaxPadding && hasOffsetChanged) {
+      this.setState({
+        paddingLeft: startLabelOffset,
+        paddingRight: endLabelOffset,
+      });
+    }
+
+    requestAnimationFrame(this.setPaddingForTwoLabels);
+  };
+
+  setPaddingForOneLabel = (): void => {
+    const startLabelOffset = this.getStartLabelOffset();
+    const isBelowMaxPadding = this.isBelowMaxPadding(startLabelOffset);
+    const hasOffsetChanged = this.state.paddingLeft !== startLabelOffset;
+
+    if (isBelowMaxPadding) {
+      if (hasOffsetChanged) {
+        this.setState({
+          paddingLeft: startLabelOffset,
+        });
+      }
+
+      if (this.state.labelStartAtMax) {
+        this.setState({ labelStartAtMax: false });
+      }
+    } else if (this.state.labelStartAtMax === false) {
+      this.setState({ labelStartAtMax: true });
+    }
+
+    requestAnimationFrame(this.setPaddingForOneLabel);
+  };
+
+  saveFullWidth = (e: OnLayout) => {
+    this.setState({ width: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  saveLabelStartWidth = (e: OnLayout) => {
+    this.setState({ labelStartWidth: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  saveLabelEndWidth = (e: OnLayout) => {
+    this.setState({ labelEndWidth: Math.floor(e.nativeEvent.layout.width) });
+  };
+
+  render = () => {
+    return (
+      <View
+        style={[
+          styles.sliderLabels,
+          {
+            paddingLeft: this.state.paddingLeft,
+            paddingRight: this.state.paddingRight,
+            justifyContent: this.state.labelStartAtMax
+              ? 'flex-end'
+              : 'space-between',
+          },
+        ]}
+        onLayout={this.saveFullWidth}
+      >
+        <View onLayout={this.saveLabelStartWidth}>
+          <Text style={styles.label}>{this.props.startLabel}</Text>
+        </View>
+        {this.props.endLabel && (
+          <View onLayout={this.saveLabelEndWidth}>
+            <Text style={styles.label}>{this.props.endLabel}</Text>
+          </View>
+        )}
+      </View>
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  sliderLabels: {
+    width: '100%',
+    flexDirection: 'row',
+    marginTop: 10,
+    marginBottom: 5,
+  },
+  label: {
+    fontSize: 14,
+    color: defaultTokens.paletteBlueNormal,
+  },
+});
diff --git a/packages/shared/src/buttons/Button.js b/packages/shared/src/buttons/Button.js
index 9585779e..c13cd11b 100644
--- a/packages/shared/src/buttons/Button.js
+++ b/packages/shared/src/buttons/Button.js
@@ -12,6 +12,7 @@ type Props = {|
   +onPress: () => void,
   +style?: StylePropType,
   +disabled?: boolean,
+  +type: 'primary' | 'secondary',
 |};
 
 /**
@@ -26,7 +27,11 @@ export default function Button(props: Props) {
     <Touchable
       disabled={!props.onPress || props.disabled}
       onPress={onPressHandler}
-      style={[styleSheet.buttonWrapper, props.style]}
+      style={[
+        styleSheet.buttonWrapper,
+        props.type === 'secondary' ? styleSheet.secondary : styleSheet.primary,
+        props.style,
+      ]}
       accessibilityComponentType="button"
     >
       {props.children}
@@ -36,6 +41,7 @@ export default function Button(props: Props) {
 
 Button.defaultProps = {
   disabled: false,
+  type: 'primary',
 };
 
 const styleSheet = StyleSheet.create({
@@ -44,14 +50,13 @@ const styleSheet = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 11,
+    height: 44,
+    borderRadius: 6,
+  },
+  primary: {
     backgroundColor: defaultTokens.paletteProductNormal,
-    android: {
-      height: 40,
-      borderRadius: 2,
-    },
-    ios: {
-      height: 44,
-      borderRadius: 6,
-    },
+  },
+  secondary: {
+    backgroundColor: defaultTokens.backgroundButtonSecondary,
   },
 });
diff --git a/packages/shared/src/buttons/TextButton.js b/packages/shared/src/buttons/TextButton.js
index a784b143..a2cbc1bd 100644
--- a/packages/shared/src/buttons/TextButton.js
+++ b/packages/shared/src/buttons/TextButton.js
@@ -12,6 +12,7 @@ type Props = {|
   +title: TranslationType,
   +onPress: () => void,
   +disabled: boolean,
+  +type: 'primary' | 'secondary',
 |};
 
 /**
@@ -22,12 +23,22 @@ export default function TextButton(props: Props) {
     <Button
       onPress={props.onPress}
       disabled={props.disabled}
-      style={props.disabled && styleSheet.buttonDisabled}
+      style={
+        props.disabled &&
+        (props.type === 'secondary'
+          ? styleSheet.buttonSecondaryDisabled
+          : styleSheet.buttonPrimaryDisabled)
+      }
+      type={props.type}
     >
       <ButtonTitle
         style={[
-          styleSheet.buttonText,
-          props.disabled && styleSheet.buttonTextDisabled,
+          props.type === 'secondary'
+            ? styleSheet.buttonTextSecondary
+            : styleSheet.buttonTextPrimary,
+          props.disabled &&
+            props.type === 'primary' &&
+            styleSheet.buttonTextPrimaryDisabled,
         ]}
         text={props.title}
       />
@@ -37,16 +48,23 @@ export default function TextButton(props: Props) {
 
 TextButton.defaultProps = {
   disabled: false,
+  type: 'primary',
 };
 
 const styleSheet = StyleSheet.create({
-  buttonText: {
+  buttonTextPrimary: {
     color: defaultTokens.paletteWhite,
   },
-  buttonDisabled: {
+  buttonTextSecondary: {
+    color: defaultTokens.colorTextButtonSecondary,
+  },
+  buttonPrimaryDisabled: {
     backgroundColor: defaultTokens.paletteCloudNormal,
   },
-  buttonTextDisabled: {
+  buttonSecondaryDisabled: {
+    opacity: 0.3,
+  },
+  buttonTextPrimaryDisabled: {
     color: defaultTokens.paletteInkDark,
   },
 });
diff --git a/packages/shared/src/forms/Checkbox.js b/packages/shared/src/forms/Checkbox.js
index 31eed2ac..9afad4c6 100644
--- a/packages/shared/src/forms/Checkbox.js
+++ b/packages/shared/src/forms/Checkbox.js
@@ -3,10 +3,10 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { TextIcon } from '@kiwicom/mobile-shared';
 
 import TouchableWithoutFeedback from '../TouchableWithoutFeedback';
 import StyleSheet from '../PlatformStyleSheet';
-import Icon from '../icons/Icon';
 import type { StylePropType } from '../../types/Styles';
 
 type Props = {|
@@ -17,22 +17,21 @@ type Props = {|
 |};
 
 export default function Checkbox(props: Props) {
+  const icon = (
+    <TextIcon
+      orbit={true}
+      code={Platform.OS === 'ios' ? 'S' : '\ue013'}
+      style={styles.iconStyle}
+    />
+  );
+
   return (
     <TouchableWithoutFeedback onPress={props.onPress}>
       <View style={[styles.wrapper, props.style]}>
         <View style={styles.label}>{props.children}</View>
-        {props.isChecked && (
-          <View style={styles.check}>
-            <Icon
-              name="check"
-              size={Platform.select({
-                android: 25, // solves checkbox row jumping on Android devices
-                ios: 26,
-              })}
-              color={defaultTokens.paletteProductNormal}
-            />
-          </View>
-        )}
+        <View style={styles.checkWrapper}>
+          {props.isChecked ? icon : <View style={styles.notChecked} />}
+        </View>
       </View>
     </TouchableWithoutFeedback>
   );
@@ -49,9 +48,31 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 26,
   },
-  check: {
-    flex: 1,
+  checkWrapper: {
     justifyContent: 'center',
     alignItems: 'flex-end',
   },
+  iconStyle: {
+    color: defaultTokens.paletteProductNormal,
+    ios: {
+      width: 26,
+      height: 26,
+      fontSize: 28,
+    },
+    android: {
+      width: 24,
+      height: 24,
+      borderWidth: 1,
+      borderColor: defaultTokens.paletteProductNormal,
+      borderRadius: 100,
+      fontSize: 24,
+    },
+  },
+  notChecked: {
+    width: 24,
+    height: 24,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: defaultTokens.paletteInkLighter,
+  },
 });
diff --git a/packages/shared/src/forms/Slider.js b/packages/shared/src/forms/Slider.js
index 2636b8bb..4e0bab36 100644
--- a/packages/shared/src/forms/Slider.js
+++ b/packages/shared/src/forms/Slider.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import type { OnLayout } from '@kiwicom/mobile-shared';
+import { type OnLayout } from '@kiwicom/mobile-shared';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
@@ -75,7 +75,7 @@ export default class Slider extends React.Component<Props, State> {
           snapped={this.props.snapped}
           allowOverlap={true}
           selectedStyle={styles.selected}
-          sliderLength={this.state.width - 2 * SLIDER_PADDING}
+          sliderLength={this.state.width}
           touchDimensions={{
             height: 30,
             width: 30,
@@ -96,18 +96,16 @@ export default class Slider extends React.Component<Props, State> {
   }
 }
 
-const SLIDER_PADDING = 20;
-
 const styles = StyleSheet.create({
   selected: {
-    backgroundColor: defaultTokens.paletteProductNormal,
+    backgroundColor: defaultTokens.paletteBlueNormal,
   },
   unselected: {
-    backgroundColor: defaultTokens.paletteInkLight,
+    backgroundColor: defaultTokens.paletteInkLighter,
   },
   track: {
     borderRadius: 5,
-    height: 2,
+    height: 4,
   },
   marker: {
     height: 30,
@@ -115,14 +113,14 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     backgroundColor: defaultTokens.paletteWhite,
     borderWidth: 1,
-    borderColor: defaultTokens.paletteInkLight,
+    borderColor: defaultTokens.paletteInkLighter,
     shadowColor: defaultTokens.paletteInkDark,
     shadowOffset: {
       width: 0,
-      height: 3,
+      height: 2,
     },
-    shadowOpacity: 0.3,
-    shadowRadius: 2,
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
     margin: 3, // necessary to see the Android elevation properly
     android: {
       elevation: 1,
@@ -131,7 +129,4 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
   },
-  sliderWrapper: {
-    paddingHorizontal: SLIDER_PADDING,
-  },
 });
diff --git a/packages/shared/src/popup/ButtonPopup.js b/packages/shared/src/popup/ButtonPopup.js
index be0f51e3..bdd5833a 100644
--- a/packages/shared/src/popup/ButtonPopup.js
+++ b/packages/shared/src/popup/ButtonPopup.js
@@ -10,6 +10,7 @@ import StyleSheet from '../PlatformStyleSheet';
 
 type Props = {|
   +buttonTitle: TranslationType,
+  +buttonCloseTitle: TranslationType,
   +children: React.Node,
   +isVisible: boolean,
   +onClose: Function,
@@ -18,7 +19,8 @@ type Props = {|
   +testID?: string,
 |};
 
-const POPUP_PADDING = 20;
+const POPUP_PADDING = 15;
+const POPUP_BUTTONS_MARGIN = 10;
 
 /**
  * Simple popup with confirmation button at the bottom.
@@ -35,8 +37,21 @@ export default class ButtonPopup extends React.Component<Props> {
       >
         {this.props.children}
       </View>
-      <View style={styles.button}>
-        <TextButton title={this.props.buttonTitle} onPress={this.onSave} />
+      <View style={styles.buttonsWrapper}>
+        <View style={[styles.button, styles.buttonFirst]}>
+          <TextButton
+            title={this.props.buttonCloseTitle}
+            onPress={this.onClose}
+            type="secondary"
+          />
+        </View>
+        <View style={styles.button}>
+          <TextButton
+            title={this.props.buttonTitle}
+            onPress={this.onSave}
+            type="primary"
+          />
+        </View>
       </View>
     </Popup>
   );
@@ -47,8 +62,15 @@ const styles = StyleSheet.create({
     padding: POPUP_PADDING,
     paddingBottom: 0,
   },
+  buttonsWrapper: {
+    flexDirection: 'row',
+  },
   button: {
-    marginTop: 20,
-    margin: POPUP_PADDING,
+    margin: POPUP_BUTTONS_MARGIN,
+    marginTop: 15,
+    flex: 1,
+  },
+  buttonFirst: {
+    marginEnd: 0,
   },
 });
diff --git a/packages/shared/src/popup/Popup.js b/packages/shared/src/popup/Popup.js
index af2c1b56..1b185679 100644
--- a/packages/shared/src/popup/Popup.js
+++ b/packages/shared/src/popup/Popup.js
@@ -16,13 +16,32 @@ type Props = {|
 |};
 
 export default class Popup extends React.Component<Props> {
+  scrollView: ?React$ElementRef<ScrollView>;
+
+  constructor() {
+    super();
+
+    this.scrollView = null;
+  }
+
   onClose = () => this.props.onClose();
 
+  scrollToEnd = () => {
+    if (this.scrollView) {
+      this.scrollView.scrollToEnd({ animated: true });
+    }
+  };
+
+  saveRef = (ref: React$ElementRef<ScrollView>): void =>
+    (this.scrollView = ref);
+
   render = () => {
     const modalChild = (
       <ScrollView
         contentContainerStyle={styles.content}
         alwaysBounceVertical={false}
+        ref={this.saveRef}
+        onContentSizeChange={this.scrollToEnd}
       >
         <SafeAreaView style={styles.safeArea}>
           {this.props.children}
@@ -64,7 +83,9 @@ const styles = StyleSheet.create({
     backgroundColor: defaultTokens.paletteWhite,
     alignSelf: 'center',
     width: '100%',
-    maxHeight: '75%',
+    maxHeight: '95%',
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
   },
   wideContentContainer: {
     width: '75%',
diff --git a/schema.graphql b/schema.graphql
index 6a72e5e4..4d91e4b0 100644
--- a/schema.graphql
+++ b/schema.graphql
@@ -49,6 +49,57 @@ enum AllBookingsOnlyEnum {
   PAST
 }
 
+"""Information about hotel availability during selected time period."""
+type AllHotelAvailabilityHotel {
+  """The ID of an object"""
+  id: ID!
+
+  """Name of the hotel."""
+  name: String
+  address: Address
+  review: HotelReview
+
+  """
+  Total price for all guests and nights and in the hotel. (including VAT)
+  """
+  price: Price
+  rating: HotelRating
+
+  """Hotel distance from the center in Km."""
+  distanceFromCenter: Float
+
+  """Main photo of the hotel."""
+  mainPhoto: HotelPhoto
+
+  """Id of hotel"""
+  hotelId: ID
+
+  """Location of the hotel."""
+  coordinates: Coordinates
+}
+
+"""A connection to a list of items."""
+type AllHotelAvailabilityHotelConnection {
+  """Information to aid in pagination."""
+  pageInfo: PageInfo!
+
+  """A list of edges."""
+  edges: [AllHotelAvailabilityHotelEdge]
+  stats: HotelAvailabilityStats
+
+  """Name of the closest city"""
+  cityName: String
+}
+
+"""An edge in a connection."""
+type AllHotelAvailabilityHotelEdge {
+  """The item at the end of the edge"""
+  node: AllHotelAvailabilityHotel
+
+  """A cursor for use in pagination"""
+  cursor: String!
+}
+
 type AllowedBaggage {
   """Extra and overweight baggage."""
   additionalBaggage: [AdditionalBaggage]
@@ -227,6 +278,9 @@ type Booking {
 
   """All services provided via whitelabels."""
   availableWhitelabeledServices: WhitelabeledServices
+
+  """Support provided by CS for booking."""
+  customerSupport: BookingCustomerSupport
   onlineCheckinIsAvailable: Boolean
   insurancePrices: [InsurancePrice]
   authToken: String
@@ -283,6 +337,13 @@ type BookingContactDetails {
   passenger: Passenger
 }
 
+type BookingCustomerSupport {
+  """
+  Is Guarantee Chat allowed to provide direct contact to customer service.
+  """
+  hasGuaranteeChat: Boolean
+}
+
 enum BookingDestinationImageDimensions {
   _1200x628
   _1280x720
@@ -343,6 +404,9 @@ interface BookingInterface {
 
   """All services provided via whitelabels."""
   availableWhitelabeledServices: WhitelabeledServices
+
+  """Support provided by CS for booking."""
+  customerSupport: BookingCustomerSupport
   onlineCheckinIsAvailable: Boolean
   insurancePrices: [InsurancePrice]
   authToken: String
@@ -411,6 +475,9 @@ type BookingMulticity implements BookingInterface & Node {
 
   """All services provided via whitelabels."""
   availableWhitelabeledServices: WhitelabeledServices
+
+  """Support provided by CS for booking."""
+  customerSupport: BookingCustomerSupport
   onlineCheckinIsAvailable: Boolean
   insurancePrices: [InsurancePrice]
   authToken: String
@@ -473,6 +540,9 @@ type BookingOneWay implements BookingInterface & Node {
 
   """All services provided via whitelabels."""
   availableWhitelabeledServices: WhitelabeledServices
+
+  """Support provided by CS for booking."""
+  customerSupport: BookingCustomerSupport
   onlineCheckinIsAvailable: Boolean
   insurancePrices: [InsurancePrice]
   authToken: String
@@ -525,6 +595,9 @@ type BookingReturn implements BookingInterface & Node {
 
   """All services provided via whitelabels."""
   availableWhitelabeledServices: WhitelabeledServices
+
+  """Support provided by CS for booking."""
+  customerSupport: BookingCustomerSupport
   onlineCheckinIsAvailable: Boolean
   insurancePrices: [InsurancePrice]
   authToken: String
@@ -1216,13 +1289,15 @@ type Hotel {
   """The ID of an object"""
   id: ID!
 
+  """Name of the hotel."""
+  name: String
+  address: Address
+  review: HotelReview
+
   """
   Original (low level ID of the hotel). You are probably looking for "id" field.
   """
   originalId: String @deprecated(reason: "Use field \"id\" instead. This field is used only because of compatibility reasons with old APIs.")
-
-  """Name of the hotel."""
-  name: String
   cityName: String
 
   """URL to our whitelabel page of this hotel."""
@@ -1236,14 +1311,10 @@ type Hotel {
 
   """Location of the hotel."""
   coordinates: Coordinates
-  address: Address
 
   """The star rating of the hotel."""
   rating: HotelRating
 
-  """Hotel review from hotel visitors."""
-  review: HotelReview
-
   """All facilities available in the hotel."""
   facilities(after: String, first: Int, before: String, last: Int): HotelFacilityConnection
 
@@ -2047,7 +2118,13 @@ type RootQuery {
   Search for all available hotels in one location. It's necessary to send
   checkin and checkout dates as well as rooms configuration to get availability info.
   """
-  allAvailableHotels(search: HotelsSearchInput!, filter: HotelsFilterInput, options: AvailableHotelOptionsInput, after: String, first: Int = 50, before: String, last: Int): HotelAvailabilityConnection
+  allAvailableBookingComHotels(search: HotelsSearchInput!, filter: HotelsFilterInput, options: AvailableHotelOptionsInput, after: String, first: Int = 50, before: String, last: Int): AllHotelAvailabilityHotelConnection
+
+  """
+  Search for all available hotels in one location. It's necessary to send
+  checkin and checkout dates as well as rooms configuration to get availability info.
+  """
+  allAvailableHotels(search: HotelsSearchInput!, filter: HotelsFilterInput, options: AvailableHotelOptionsInput, after: String, first: Int = 50, before: String, last: Int): HotelAvailabilityConnection @deprecated(reason: "This query has serious performace issues. That is basically because we are overfeching data\n  from the https://distribution-xml.booking.com/2.0/json/hotels endpoint with way to many extras.\n  Use allAvailableBookingComHotels instead")
 
   """Search for your flight bookings."""
   allBookings(
@@ -2081,11 +2158,11 @@ type RootQuery {
     last: Int
   ): DynamicPackageConnection
 
-  """Retrieve list of FAQ categories."""
+  """
+  DEPRECATED - use "FAQSection" query instead.Retrieve list of FAQ categories.
+  """
   allFAQCategories(
-    """
-    Fetch only subsection of FAQ based on the current situation of customer.
-    """
+    """Fetch only subsection of FAQ based on customer's booking status."""
     section: FAQSection
     after: String
     first: Int
@@ -2202,6 +2279,14 @@ type RootQuery {
     id: ID!
   ): FAQCategory
 
+  """Retrieve category by section."""
+  FAQSection(
+    """
+    Fetch FAQ category by section according to current customer's booking status.
+    """
+    section: FAQSection!
+  ): FAQCategory
+
   """Geography info by an IP address"""
   geoIP(ip: IP!): GeoIP
 


Test patch:
diff --git a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
index 1295c498..31a59a36 100644
--- a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
+++ b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
@@ -13,6 +13,7 @@ exports[`renders 1`] = `
       <SeparatorTrimmed
         gapSizeEnd={15}
         gapSizeStart={15}
+        height={1}
       />
     }
   >
diff --git a/app/hotels/src/allHotels/__tests__/AllHotelsSearchList.test.js b/app/hotels/src/allHotels/__tests__/AllHotelsSearchList.test.js
index 81b7e457..2f9151b9 100644
--- a/app/hotels/src/allHotels/__tests__/AllHotelsSearchList.test.js
+++ b/app/hotels/src/allHotels/__tests__/AllHotelsSearchList.test.js
@@ -17,7 +17,6 @@ it('renders found hotels', () => {
         id: 'hotel1',
         $fragmentRefs,
       },
-      $fragmentRefs,
       $refType,
     },
     {
@@ -25,7 +24,6 @@ it('renders found hotels', () => {
         id: 'hotel2',
         $fragmentRefs,
       },
-      $fragmentRefs,
       $refType,
     },
   ];
diff --git a/app/hotels/src/allHotels/__tests__/RenderSearchResults.test.js b/app/hotels/src/allHotels/__tests__/RenderSearchResults.test.js
index d2e56870..c5ee7b80 100644
--- a/app/hotels/src/allHotels/__tests__/RenderSearchResults.test.js
+++ b/app/hotels/src/allHotels/__tests__/RenderSearchResults.test.js
@@ -13,7 +13,7 @@ const defaultProps = (stats: Object = { maxPrice: 100, minPrice: 50 }) => ({
   show: 'list',
   setCurrentSearchStats: jest.fn(),
   data: {
-    allAvailableHotels: {
+    allAvailableBookingComHotels: {
       stats,
     },
   },
diff --git a/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js b/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js
index 3cdc1fdb..44f25901 100644
--- a/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js
+++ b/app/hotels/src/components/__tests__/HotelReviewScore.playground.test.js
@@ -3,24 +3,16 @@
 import * as React from 'react';
 import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
 
-import { HotelReviewScore } from '../HotelReviewScore';
-
-const $refType: any = null;
-const getProps = (score: number = 1.2) => ({
-  review: {
-    score,
-  },
-  $refType,
-});
+import HotelReviewScore from '../HotelReviewScore';
 
 it('renders with red value', () => {
-  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps()} />);
+  PlaygroundRenderer.render(<HotelReviewScore score={1.2} />);
 });
 
 it('renders with yellow value', () => {
-  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps(5.8)} />);
+  PlaygroundRenderer.render(<HotelReviewScore score={5.8} />);
 });
 
 it('renders with green value', () => {
-  PlaygroundRenderer.render(<HotelReviewScore hotel={getProps(9.2)} />);
+  PlaygroundRenderer.render(<HotelReviewScore score={9.2} />);
 });
diff --git a/app/hotels/src/components/__tests__/HotelReviewScore.test.js b/app/hotels/src/components/__tests__/HotelReviewScore.test.js
index 7b430fbb..77582628 100644
--- a/app/hotels/src/components/__tests__/HotelReviewScore.test.js
+++ b/app/hotels/src/components/__tests__/HotelReviewScore.test.js
@@ -2,7 +2,7 @@
 
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import { HotelReviewScore } from '../HotelReviewScore';
+import HotelReviewScore from '../HotelReviewScore';
 
 let HRS;
 
@@ -60,19 +60,19 @@ describe('calculateColor', () => {
 describe('render', () => {
   it('returns null of falsy score values', () => {
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    HRS = new HotelReviewScore({ hotel: { review: { score: 0 } } });
+    HRS = new HotelReviewScore({ score: 0 });
     expect(HRS.render()).toBe(null);
 
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    HRS = new HotelReviewScore({ hotel: { review: { score: null } } });
+    HRS = new HotelReviewScore({ score: null });
     expect(HRS.render()).toBe(null);
 
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    HRS = new HotelReviewScore({ hotel: { review: { score: undefined } } });
+    HRS = new HotelReviewScore({ score: undefined });
     expect(HRS.render()).toBe(null);
 
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    HRS = new HotelReviewScore({ hotel: { review: { score: 1 } } });
+    HRS = new HotelReviewScore({ score: 1 });
     expect(HRS.render()).toBeInstanceOf(Object); // actual component
   });
 });
diff --git a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
index c3bf1f87..6012848d 100644
--- a/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
+++ b/app/hotels/src/filter/stars/__tests__/__snapshots__/StarsPopup.test.js.snap
@@ -1,100 +1,159 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StarsPopup should render popup 1`] = `
-<ButtonPopup
-  buttonTitle={
-    <Translation
-      id="hotels_search.filter.stars_popup.save"
-    />
-  }
-  isVisible={true}
-  onClose={[Function]}
-  onSave={[Function]}
->
-  <Text
-    style={
-      Object {
-        "color": "#7f91a8",
-        "fontSize": 12,
-        "paddingBottom": 5,
-      }
-    }
-  >
-    <Translation
-      id="hotels_search.filter.stars_popup.title"
-    />
-  </Text>
-  <StarsCheckbox
-    isChecked={true}
-    onPress={[Function]}
-    stars={5}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={4}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={3}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
-    }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={2}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
+<withOrientation>
+  <ButtonPopup
+    buttonCloseTitle={
+      <Translation
+        id="hotels_search.filter.hotel_facilities_popup.close"
+      />
     }
-  />
-  <StarsCheckbox
-    isChecked={false}
-    onPress={[Function]}
-    stars={1}
-    style={
-      Object {
-        "borderBottomColor": "#f5f7f9",
-        "borderBottomWidth": 0.5,
-      }
+    buttonTitle={
+      <Translation
+        id="hotels_search.filter.stars_popup.save"
+      />
     }
-  />
-  <Checkbox
-    isChecked={false}
-    onPress={[Function]}
+    isVisible={true}
+    onClose={[Function]}
+    onSave={[Function]}
   >
     <Text
       style={
         Object {
+          "color": "#171b1e",
           "fontSize": 16,
-          "marginStart": 3,
+          "fontWeight": "500",
+          "paddingBottom": 10,
+          "paddingTop": 15,
         }
       }
     >
       <Translation
-        id="hotels_search.filter.stars_popup.unrated"
+        id="hotels_search.filter.stars_popup.title"
       />
     </Text>
-  </Checkbox>
-</ButtonPopup>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={true}
+        onPress={[Function]}
+        stars={5}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={4}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={3}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={2}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <React.Fragment>
+      <StarsCheckbox
+        isChecked={false}
+        onPress={[Function]}
+        stars={1}
+      />
+      <Component
+        style={
+          Object {
+            "marginEnd": -15,
+          }
+        }
+      >
+        <SeparatorTrimmed
+          color="#bac7d5"
+          gapSizeEnd={0}
+          gapSizeStart={0}
+          height={0.5}
+        />
+      </Component>
+    </React.Fragment>
+    <Checkbox
+      isChecked={false}
+      onPress={[Function]}
+    >
+      <Text
+        style={
+          Object {
+            "fontSize": 16,
+            "marginStart": 3,
+          }
+        }
+      >
+        <Translation
+          id="hotels_search.filter.stars_popup.unrated"
+        />
+      </Text>
+    </Checkbox>
+  </ButtonPopup>
+</withOrientation>
 `;
diff --git a/app/hotels/src/map/allHotels/__tests__/MapView.test.js b/app/hotels/src/map/allHotels/__tests__/MapView.test.js
index 08930e00..8448e206 100644
--- a/app/hotels/src/map/allHotels/__tests__/MapView.test.js
+++ b/app/hotels/src/map/allHotels/__tests__/MapView.test.js
@@ -8,9 +8,7 @@ const data = coordinates => ({
     id: '1',
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
     price: {},
-    hotel: {
-      coordinates,
-    },
+    coordinates,
   },
 });
 
diff --git a/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap b/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
index 07de415a..658a7aa4 100644
--- a/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
+++ b/app/hotels/src/singleHotel/bookNow/__tests__/__snapshots__/BookNow.test.js.snap
@@ -4,6 +4,7 @@ exports[`renders without crashing 1`] = `
 <Button
   disabled={false}
   onPress={[Function]}
+  type="primary"
 >
   <Text
     style={
@@ -25,6 +26,7 @@ exports[`renders without crashing with missing data 1`] = `
 <Button
   disabled={false}
   onPress={[Function]}
+  type="primary"
 >
   <Text
     style={
diff --git a/packages/shared/src/__tests__/SliderLabels.test.js b/packages/shared/src/__tests__/SliderLabels.test.js
new file mode 100644
index 00000000..a838665c
--- /dev/null
+++ b/packages/shared/src/__tests__/SliderLabels.test.js
@@ -0,0 +1,143 @@
+// @flow strict
+
+import * as React from 'react';
+import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
+import { Translation } from '@kiwicom/mobile-localization';
+import renderer from 'react-test-renderer';
+
+import SliderLabels from '../SliderLabels';
+
+it('one label', () => {
+  PlaygroundRenderer.render(
+    <SliderLabels
+      startLabel={<Translation passThrough="label" />}
+      startValue={46}
+      max={1000}
+      min={1}
+    />,
+  );
+});
+
+it('two labels', () => {
+  PlaygroundRenderer.render(
+    <SliderLabels
+      startLabel={<Translation passThrough="start label" />}
+      startValue={46}
+      endLabel={<Translation passThrough="end label" />}
+      endValue={850}
+      max={1000}
+      min={1}
+    />,
+  );
+});
+
+const requestAF = global.requestAnimationFrame;
+beforeEach(async () => (global.requestAnimationFrame = jest.fn()));
+afterEach(() => (global.requestAnimationFrame = requestAF));
+
+it('startValue in the middle', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={3}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+});
+
+it('startValue reaches max value', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={5}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(true);
+});
+
+it('startValue goes beyond max value', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={5}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={10}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  expect(wrapper.state.labelStartAtMax).toBe(false);
+  wrapper.setPaddingForOneLabel();
+  expect(wrapper.state.labelStartAtMax).toBe(true);
+});
+
+it('Both sides have padding', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={20}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={8}
+        endLabel={<Translation passThrough="label" />}
+        endValue={16}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  wrapper.setPaddingForTwoLabels();
+  expect(wrapper.state.paddingLeft).not.toBe(0);
+  expect(wrapper.state.paddingRight).not.toBe(0);
+});
+
+it('No padding should be set', () => {
+  const wrapper = renderer
+    .create(
+      <SliderLabels
+        max={100}
+        min={1}
+        startLabel={<Translation passThrough="label" />}
+        startValue={1}
+        endLabel={<Translation passThrough="label" />}
+        endValue={100}
+      />,
+    )
+    .getInstance();
+
+  wrapper.saveFullWidth({ nativeEvent: { layout: { width: 500 } } });
+  wrapper.saveLabelStartWidth({ nativeEvent: { layout: { width: 20 } } });
+  wrapper.saveLabelEndWidth({ nativeEvent: { layout: { width: 20 } } });
+
+  wrapper.setPaddingForTwoLabels();
+  expect(wrapper.state.paddingLeft).toBe(0);
+  expect(wrapper.state.paddingRight).toBe(0);
+});
diff --git a/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap b/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap
new file mode 100644
index 00000000..7b223993
--- /dev/null
+++ b/packages/shared/src/__tests__/__snapshots__/SliderLabels.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`one label 1`] = `
+<Component
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 5,
+        "marginTop": 10,
+        "width": "100%",
+      },
+      Object {
+        "justifyContent": "space-between",
+        "paddingLeft": 0,
+        "paddingRight": 0,
+      },
+    ]
+  }
+>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="label"
+      />
+    </Text>
+  </Component>
+</Component>
+`;
+
+exports[`two labels 1`] = `
+<Component
+  onLayout={[Function]}
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "marginBottom": 5,
+        "marginTop": 10,
+        "width": "100%",
+      },
+      Object {
+        "justifyContent": "space-between",
+        "paddingLeft": 0,
+        "paddingRight": 0,
+      },
+    ]
+  }
+>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="start label"
+      />
+    </Text>
+  </Component>
+  <Component
+    onLayout={[Function]}
+  >
+    <Text
+      style={
+        Object {
+          "color": "#0176D2",
+          "fontSize": 14,
+        }
+      }
+    >
+      <Translation
+        passThrough="end label"
+      />
+    </Text>
+  </Component>
+</Component>
+`;
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
index e8bae307..20137ddf 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/Button.test.js.snap
@@ -12,13 +12,15 @@ exports[`Button renders 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#00a991",
         "borderRadius": 6,
         "flexGrow": 1,
         "height": 44,
         "justifyContent": "center",
         "paddingHorizontal": 11,
       },
+      Object {
+        "backgroundColor": "#00a991",
+      },
       undefined,
     ]
   }
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
index f291ba82..7480d6ff 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/LinkButton.test.js.snap
@@ -9,6 +9,7 @@ exports[`Button renders 1`] = `
       "backgroundColor": "transparent",
     }
   }
+  type="primary"
 >
   <ButtonTitle
     style={
diff --git a/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap b/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
index 83468a3d..84064d69 100644
--- a/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
+++ b/packages/shared/src/buttons/__tests__/__snapshots__/TextButton.test.js.snap
@@ -5,6 +5,7 @@ exports[`renders button with custom title 1`] = `
   disabled={false}
   onPress={[Function]}
   style={false}
+  type="primary"
 >
   <ButtonTitle
     style={
diff --git a/packages/shared/src/forms/__tests__/Checkbox.test.js b/packages/shared/src/forms/__tests__/Checkbox.test.js
index be2231ea..28437896 100644
--- a/packages/shared/src/forms/__tests__/Checkbox.test.js
+++ b/packages/shared/src/forms/__tests__/Checkbox.test.js
@@ -1,8 +1,11 @@
 // @flow strict
 
 import * as React from 'react';
+import { Platform } from 'react-native';
 import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
 import { Translation } from '@kiwicom/mobile-localization';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import StyleSheet from '@kiwicom/mobile-shared/src/PlatformStyleSheet';
 
 import Checkbox from '../Checkbox';
 
@@ -16,7 +19,70 @@ it('not checked', () => {
   );
 });
 
-it('checked', () => {
+let originalPlatform;
+beforeEach(() => (originalPlatform = Platform.OS));
+afterEach(() => (Platform.OS = originalPlatform));
+
+const createStyle = () =>
+  StyleSheet.create({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      ios: {
+        width: 26,
+        height: 26,
+        fontSize: 28,
+      },
+      android: {
+        width: 24,
+        height: 24,
+        borderWidth: 1,
+        borderColor: defaultTokens.paletteProductNormal,
+        borderRadius: 100,
+        fontSize: 24,
+      },
+    },
+  });
+
+it('works with iOS', () => {
+  Platform.OS = 'ios';
+  expect(createStyle()).toEqual({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      width: 26,
+      height: 26,
+      fontSize: 28,
+    },
+  });
+});
+
+it('works with Android', () => {
+  Platform.OS = 'android';
+  expect(createStyle()).toEqual({
+    iconStyle: {
+      color: defaultTokens.paletteProductNormal,
+      width: 24,
+      height: 24,
+      borderWidth: 1,
+      borderColor: defaultTokens.paletteProductNormal,
+      borderRadius: 100,
+      fontSize: 24,
+    },
+  });
+});
+
+it('checked on ios', () => {
+  Platform.OS = 'ios';
+
+  PlaygroundRenderer.render(
+    <Checkbox onPress={noop} isChecked={true}>
+      <Translation passThrough="Checked" />
+    </Checkbox>,
+  );
+});
+
+it('checked on android', () => {
+  Platform.OS = 'android';
+
   PlaygroundRenderer.render(
     <Checkbox onPress={noop} isChecked={true}>
       <Translation passThrough="Checked" />
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
index b6b622c1..a7dc41e3 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/AgePicker.test.js.snap
@@ -10,6 +10,7 @@ exports[`renders 1`] = `
         passThrough="Show age picker"
       />
     }
+    type="primary"
   />
   <AgePicker
     isVisible={false}
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
index 00e9c24c..be3f6e29 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`checked 1`] = `
+exports[`checked on android 1`] = `
 <TouchableWithoutFeedback
   accessibilityComponentType="button"
   accessibilityTraits="button"
@@ -36,15 +36,78 @@ exports[`checked 1`] = `
       style={
         Object {
           "alignItems": "flex-end",
-          "flex": 1,
           "justifyContent": "center",
         }
       }
     >
-      <Icon
-        color="#00a991"
-        name="check"
-        size={26}
+      <TextIcon
+        code=""
+        orbit={true}
+        style={
+          Object {
+            "color": "#00a991",
+            "fontSize": 28,
+            "height": 26,
+            "width": 26,
+          }
+        }
+      />
+    </Component>
+  </Component>
+</TouchableWithoutFeedback>
+`;
+
+exports[`checked on ios 1`] = `
+<TouchableWithoutFeedback
+  accessibilityComponentType="button"
+  accessibilityTraits="button"
+  disabled={false}
+  onPress={[Function]}
+>
+  <Component
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Component
+      style={
+        Object {
+          "flex": 3,
+          "height": 26,
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Translation
+        passThrough="Checked"
+      />
+    </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <TextIcon
+        code="S"
+        orbit={true}
+        style={
+          Object {
+            "color": "#00a991",
+            "fontSize": 28,
+            "height": 26,
+            "width": 26,
+          }
+        }
       />
     </Component>
   </Component>
@@ -83,6 +146,26 @@ exports[`not checked 1`] = `
         passThrough="Unchecked"
       />
     </Component>
+    <Component
+      style={
+        Object {
+          "alignItems": "flex-end",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <Component
+        style={
+          Object {
+            "borderColor": "#bac7d5",
+            "borderRadius": 100,
+            "borderWidth": 1,
+            "height": 24,
+            "width": 24,
+          }
+        }
+      />
+    </Component>
   </Component>
 </TouchableWithoutFeedback>
 `;
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
index 6d98fbca..3199eeb8 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
@@ -3,11 +3,6 @@
 exports[`Slider renders 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -29,18 +24,18 @@ exports[`Slider renders 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -52,27 +47,27 @@ exports[`Slider renders 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -86,12 +81,12 @@ exports[`Slider renders 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
@@ -107,11 +102,6 @@ exports[`Slider renders 1`] = `
 exports[`Slider renders correctly with all values equal 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -133,18 +123,18 @@ exports[`Slider renders correctly with all values equal 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -156,27 +146,27 @@ exports[`Slider renders correctly with all values equal 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -190,12 +180,12 @@ exports[`Slider renders correctly with all values equal 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
@@ -211,11 +201,6 @@ exports[`Slider renders correctly with all values equal 1`] = `
 exports[`Slider renders with endValue undefined 1`] = `
 <Component
   onLayout={[Function]}
-  style={
-    Object {
-      "paddingHorizontal": 20,
-    }
-  }
 >
   <MultiSlider
     allowOverlap={true}
@@ -237,18 +222,18 @@ exports[`Slider renders with endValue undefined 1`] = `
     markerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
@@ -260,27 +245,27 @@ exports[`Slider renders with endValue undefined 1`] = `
     pressedMarkerStyle={
       Object {
         "backgroundColor": "#fff",
-        "borderColor": "#7f91a8",
+        "borderColor": "#bac7d5",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
         "shadowColor": "#171b1e",
         "shadowOffset": Object {
-          "height": 3,
+          "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 2,
+        "shadowOpacity": 0.1,
+        "shadowRadius": 4,
         "width": 30,
       }
     }
     selectedStyle={
       Object {
-        "backgroundColor": "#00a991",
+        "backgroundColor": "#0176D2",
       }
     }
-    sliderLength={-40}
+    sliderLength={0}
     snapped={false}
     step={1}
     touchDimensions={
@@ -294,12 +279,12 @@ exports[`Slider renders with endValue undefined 1`] = `
     trackStyle={
       Object {
         "borderRadius": 5,
-        "height": 2,
+        "height": 4,
       }
     }
     unselectedStyle={
       Object {
-        "backgroundColor": "#7f91a8",
+        "backgroundColor": "#bac7d5",
       }
     }
     values={
diff --git a/packages/shared/src/popup/__tests__/ButtonPopup.test.js b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
index 57273404..2687bd27 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopup.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopup.test.js
@@ -12,6 +12,7 @@ const renderPopup = (onSave, onClose) =>
     <Dimensions.Provider dimensions={{ width: 500, height: 700 }}>
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
+        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={onSave}
         onClose={onClose}
@@ -27,9 +28,11 @@ describe('ButtonPopup', () => {
     const onClose = jest.fn();
     const testRenderer = renderPopup(onSave, onClose);
     const testInstance = testRenderer.root;
-    await testInstance.findByType(Touchable).props.onPress();
+    await testInstance.findAllByType(Touchable).forEach(async child => {
+      await child.props.onPress();
+    });
 
     expect(onSave).toBeCalled();
-    expect(onClose).not.toBeCalled();
+    expect(onClose).toBeCalled();
   });
 });
diff --git a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
index 222f8b5b..1feea87b 100644
--- a/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
+++ b/packages/shared/src/popup/__tests__/ButtonPopupPlayground.test.js
@@ -13,6 +13,7 @@ describe('ButtonPopup playground', () => {
     PlaygroundRenderer.render(
       <ButtonPopup
         buttonTitle={<Translation passThrough="Save" />}
+        buttonCloseTitle={<Translation passThrough="Close" />}
         isVisible={true}
         onSave={noop}
         onClose={noop}
diff --git a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
index c59b39f3..cb634bd9 100644
--- a/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
+++ b/packages/shared/src/popup/__tests__/__snapshots__/ButtonPopupPlayground.test.js.snap
@@ -9,7 +9,7 @@ exports[`ButtonPopup playground renders in playground 1`] = `
     style={
       Array [
         Object {
-          "padding": 20,
+          "padding": 15,
           "paddingBottom": 0,
         },
         undefined,
@@ -23,20 +23,55 @@ exports[`ButtonPopup playground renders in playground 1`] = `
   <Component
     style={
       Object {
-        "margin": 20,
-        "marginTop": 20,
+        "flexDirection": "row",
       }
     }
   >
-    <TextButton
-      disabled={false}
-      onPress={[Function]}
-      title={
-        <Translation
-          passThrough="Save"
-        />
+    <Component
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "margin": 10,
+            "marginTop": 15,
+          },
+          Object {
+            "marginEnd": 0,
+          },
+        ]
       }
-    />
+    >
+      <TextButton
+        disabled={false}
+        onPress={[Function]}
+        title={
+          <Translation
+            passThrough="Close"
+          />
+        }
+        type="secondary"
+      />
+    </Component>
+    <Component
+      style={
+        Object {
+          "flex": 1,
+          "margin": 10,
+          "marginTop": 15,
+        }
+      }
+    >
+      <TextButton
+        disabled={false}
+        onPress={[Function]}
+        title={
+          <Translation
+            passThrough="Save"
+          />
+        }
+        type="primary"
+      />
+    </Component>
   </Component>
 </Popup>
 `;