Repository: kiwicom/mobile
Pull request #1104 (2018-09-19 10:58:41)

Hotels: New design for detail page

tbergq: @RobinCsl 🚀 

Patch:
diff --git a/app/hotels/src/navigation/HotelsNavigationStack.js b/app/hotels/src/navigation/HotelsNavigationStack.js
index 0f68e569..720ca12a 100644
--- a/app/hotels/src/navigation/HotelsNavigationStack.js
+++ b/app/hotels/src/navigation/HotelsNavigationStack.js
@@ -6,11 +6,11 @@ import {
   StackNavigatorOptions,
   type NavigationType,
   HeaderTitle,
+  createTransparentHeaderStyle,
 } from '@kiwicom/mobile-navigation';
-import { Platform } from 'react-native';
+import { Dimensions as RNDimensions } from 'react-native';
 import { withMappedNavigationAndConfigProps as withMappedProps } from 'react-navigation-props-mapper';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Dimensions, Device } from '@kiwicom/mobile-shared';
 
 import SingleHotel from './singleHotel/SingleHotelNavigationScreen';
 import SearchResults from './allHotels/SearchResultsScreen';
@@ -35,18 +35,8 @@ export default StackNavigator(
     SingleHotel: {
       screen: withMappedProps(SingleHotel),
       navigationOptions: {
-        headerTitle: (
-          <Dimensions.Consumer>
-            {dimensions => {
-              return Device.isNarrowLayout(dimensions) &&
-                Platform.OS === 'android' ? null : (
-                <HeaderTitle>
-                  <Translation id="hotels.navigation.title.single_hotel" />
-                </HeaderTitle>
-              );
-            }}
-          </Dimensions.Consumer>
-        ),
+        headerLeft: null,
+        ...createTransparentHeaderStyle(RNDimensions.get('screen')),
       },
     },
     AllHotelsMap: {
@@ -87,5 +77,6 @@ export default StackNavigator(
   {
     ...StackNavigatorOptions,
     initialRouteName: 'SearchResults',
+    mode: 'modal',
   },
 );
diff --git a/app/hotels/src/navigation/allHotels/SearchResultsScreen.js b/app/hotels/src/navigation/allHotels/SearchResultsScreen.js
index 88c6a18b..8cc6abe5 100644
--- a/app/hotels/src/navigation/allHotels/SearchResultsScreen.js
+++ b/app/hotels/src/navigation/allHotels/SearchResultsScreen.js
@@ -3,15 +3,13 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { type NavigationType } from '@kiwicom/mobile-navigation';
-import { Translation } from '@kiwicom/mobile-localization';
 import {
   LayoutDoubleColumn,
-  Button,
-  Text,
   StyleSheet,
   AdaptableLayout,
   GestureController,
   TextIcon,
+  CloseButton,
 } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 import { SafeAreaView } from 'react-navigation';
@@ -102,11 +100,9 @@ class SearchResultsScreen extends React.Component<Props> {
         <SafeAreaView style={[styles.container, styles.safeArea]}>
           <View style={styles.container}>
             <NewAllHotels />
-            <Button onPress={this.onClosePress} style={styles.button}>
-              <Text style={styles.text}>
-                <Translation id="shared.button.close" />
-              </Text>
-            </Button>
+            <View style={styles.button}>
+              <CloseButton onPress={this.onClosePress} />
+            </View>
           </View>
         </SafeAreaView>
       }
@@ -127,11 +123,6 @@ const styles = StyleSheet.create({
     bottom: 8,
     start: 8,
     end: 8,
-    backgroundColor: defaultTokens.paletteCloudNormal,
-  },
-  text: {
-    fontWeight: '800',
-    fontSize: 16,
   },
 });
 
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js b/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
index e8c0169c..9496d200 100644
--- a/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
+++ b/app/hotels/src/navigation/singleHotel/SingleHotelNavigationScreen.js
@@ -48,7 +48,7 @@ class SingleHotelNavigationScreen extends React.Component<Props> {
         roomsConfiguration={this.props.roomsConfiguration}
         bookingComAffiliate={this.props.bookingComAffiliate}
       >
-        <SingleHotel />
+        <SingleHotel goBack={this.goBack} />
       </SingleHotelContext.Provider>
     );
   }
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelStack.js b/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
index 3a294a82..b5a80aa0 100644
--- a/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
+++ b/app/hotels/src/navigation/singleHotel/SingleHotelStack.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Platform, Dimensions as RNDimensions } from 'react-native';
+import { Dimensions as RNDimensions } from 'react-native';
 import { withMappedNavigationAndConfigProps as withMappedProps } from 'react-navigation-props-mapper';
 import {
   HeaderTitle,
@@ -10,7 +10,6 @@ import {
   createTransparentHeaderStyle,
 } from '@kiwicom/mobile-navigation';
 import { Translation } from '@kiwicom/mobile-localization';
-import { Dimensions, Device } from '@kiwicom/mobile-shared';
 
 import SingleHotelNavigationScreen from './SingleHotelNavigationScreen';
 import SingleHotelMapNavigationScreen from './SingleHotelMapNavigationScreen';
@@ -23,18 +22,7 @@ export default StackNavigator(
     SingleHotel: {
       screen: SingleHotelNavigationScreen,
       navigationOptions: {
-        headerTitle: (
-          <Dimensions.Consumer>
-            {dimensions => {
-              return Device.isNarrowLayout(dimensions) &&
-                Platform.OS === 'android' ? null : (
-                <HeaderTitle>
-                  <Translation id="hotels.navigation.title.single_hotel" />
-                </HeaderTitle>
-              );
-            }}
-          </Dimensions.Consumer>
-        ),
+        headerLeft: null,
         /**
          * @todo Due to static nature of React Navigation, this configuration
          * will not update when screen width changes (when used with SplitView)
diff --git a/app/hotels/src/singleHotel/HotelDetailScreen.js b/app/hotels/src/singleHotel/HotelDetailScreen.js
index 629976dc..ea44d28a 100644
--- a/app/hotels/src/singleHotel/HotelDetailScreen.js
+++ b/app/hotels/src/singleHotel/HotelDetailScreen.js
@@ -1,19 +1,23 @@
 // @flow
 
 import * as React from 'react';
-import { ScrollView, View } from 'react-native';
+import { ScrollView, View, StatusBar, Platform } from 'react-native';
 import {
   GeneralError,
   LayoutSingleColumn,
   Logger,
   AdaptableLayout,
   StyleSheet,
+  CloseButton,
 } from '@kiwicom/mobile-shared';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 import isEqual from 'react-fast-compare';
+import { SafeAreaView } from 'react-navigation';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
+import RoomSummary from './RoomSummary';
 import Header from './header/Header';
 import HotelInformation from './hotelInformation/HotelInformation';
 import RoomList from './roomList/RoomList';
@@ -21,10 +25,12 @@ import BookNow from './bookNow/BookNow';
 import BrandLabel from './brandLabel/BrandLabel';
 import type { RoomsConfiguration } from '../singleHotel/AvailableHotelSearchInput';
 import type { HotelDetailScreen_availableHotel } from './__generated__/HotelDetailScreen_availableHotel.graphql';
+import countBookingPrice from './bookNow/countBookingPrice';
 
 type Props = {|
   +availableHotel: HotelDetailScreen_availableHotel,
   +roomsConfiguration: RoomsConfiguration,
+  +goBack: () => void,
 |};
 
 type State = {|
@@ -34,6 +40,14 @@ type State = {|
   maxPersons: number,
 |};
 
+type NativeEvent = {|
+  +nativeEvent: {|
+    +contentOffset: {|
+      +y: number,
+    |},
+  |},
+|};
+
 export class HotelDetailScreen extends React.Component<Props, State> {
   state = {
     selected: {},
@@ -42,6 +56,9 @@ export class HotelDetailScreen extends React.Component<Props, State> {
 
   componentDidMount = () => {
     Logger.ancillaryDisplayed(Logger.Type.ANCILLARY_STEP_DETAILS);
+    if (Platform.OS === 'ios') {
+      StatusBar.setBarStyle('light-content');
+    }
   };
 
   shouldComponentUpdate = (nextProps: Props, nextState: State) => {
@@ -51,6 +68,20 @@ export class HotelDetailScreen extends React.Component<Props, State> {
     return !isPropsEqual || !isStateEqual;
   };
 
+  componentWillUnmount = () => {
+    if (Platform.OS === 'ios') {
+      StatusBar.setBarStyle('dark-content');
+    }
+  };
+
+  onScroll = (e: NativeEvent) => {
+    if (Platform.OS === 'ios' && e.nativeEvent.contentOffset.y > 180) {
+      StatusBar.setBarStyle('dark-content');
+    } else {
+      StatusBar.setBarStyle('light-content');
+    }
+  };
+
   updateSelectedCount = (
     availabilityOriginalId: string,
     amount: number,
@@ -78,7 +109,6 @@ export class HotelDetailScreen extends React.Component<Props, State> {
   deselectRoom = (availabilityOriginalId: string, maxPersons: number) => {
     this.updateSelectedCount(availabilityOriginalId, -1, -maxPersons);
   };
-
   getNumberOfRooms = () =>
     Object.keys(this.state.selected).reduce((sum, currentItem) => {
       return this.state.selected[currentItem] + sum;
@@ -100,7 +130,10 @@ export class HotelDetailScreen extends React.Component<Props, State> {
   render() {
     const { availableHotel } = this.props;
     const { selected } = this.state;
-
+    const price = countBookingPrice(
+      idx(this.props, _ => _.availableHotel.availableRooms),
+      selected,
+    );
     if (!availableHotel) {
       return (
         <GeneralError
@@ -112,31 +145,47 @@ export class HotelDetailScreen extends React.Component<Props, State> {
     }
 
     return (
-      <React.Fragment>
-        <ScrollView contentContainerStyle={styles.container}>
-          <LayoutSingleColumn>
-            <AdaptableLayout
-              renderOnWide={<View style={styles.marginView} />}
-            />
-            <Header hotel={availableHotel.hotel} />
-            <HotelInformation hotel={availableHotel.hotel} />
-            <RoomList
-              data={availableHotel.availableRooms}
-              select={this.selectRoom}
-              deselect={this.deselectRoom}
-              selected={selected}
+      <SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>
+        <View style={styles.safeArea}>
+          <ScrollView
+            contentContainerStyle={styles.container}
+            onScroll={this.onScroll}
+            scrollEventThrottle={500}
+          >
+            <LayoutSingleColumn>
+              <AdaptableLayout
+                renderOnWide={<View style={styles.marginView} />}
+              />
+              <Header hotel={availableHotel.hotel} />
+              <HotelInformation hotel={availableHotel.hotel} />
+              <RoomList
+                data={availableHotel.availableRooms}
+                select={this.selectRoom}
+                deselect={this.deselectRoom}
+                selected={selected}
+              />
+              <BrandLabel />
+            </LayoutSingleColumn>
+          </ScrollView>
+          <View style={styles.buttonContainer}>
+            <RoomSummary
+              guestCount={this.getPersonCount()}
+              roomCount={this.getNumberOfRooms()}
+              price={price}
             />
-            <BrandLabel />
-          </LayoutSingleColumn>
-        </ScrollView>
-        <BookNow
-          selected={selected}
-          availableRooms={availableHotel.availableRooms}
-          hotel={availableHotel.hotel}
-          personCount={this.getPersonCount()}
-          numberOfRooms={this.getNumberOfRooms()}
-        />
-      </React.Fragment>
+            <View style={styles.row}>
+              <View style={styles.closeWrapper}>
+                <CloseButton onPress={this.props.goBack} />
+              </View>
+              {this.state.maxPersons > 0 && (
+                <View style={styles.bookNowWrapper}>
+                  <BookNow selected={selected} hotel={availableHotel.hotel} />
+                </View>
+              )}
+            </View>
+          </View>
+        </View>
+      </SafeAreaView>
     );
   }
 }
@@ -152,7 +201,11 @@ export default createFragmentContainer(
       }
       availableRooms {
         ...RoomList
-        ...BookNow_availableRooms
+        originalId
+        incrementalPrice {
+          amount
+          currency
+        }
       }
     }
   `,
@@ -165,4 +218,27 @@ const styles = StyleSheet.create({
   container: {
     paddingBottom: 64,
   },
+  buttonContainer: {
+    position: 'absolute',
+    end: 0,
+    start: 0,
+    bottom: 0,
+    backgroundColor: defaultTokens.paletteWhite,
+  },
+  row: {
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    paddingBottom: 8,
+  },
+  safeArea: {
+    flex: 1,
+    backgroundColor: defaultTokens.paletteWhite,
+  },
+  closeWrapper: {
+    flex: 1,
+    marginEnd: 8,
+  },
+  bookNowWrapper: {
+    flex: 1,
+  },
 });
diff --git a/app/hotels/src/singleHotel/RoomSummary.js b/app/hotels/src/singleHotel/RoomSummary.js
new file mode 100644
index 00000000..edc0c161
--- /dev/null
+++ b/app/hotels/src/singleHotel/RoomSummary.js
@@ -0,0 +1,74 @@
+// @flow strict
+
+import * as React from 'react';
+import { Translation } from '@kiwicom/mobile-localization';
+import { Text, StyleSheet, Price } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { View } from 'react-native';
+
+type PriceType = {|
+  amount: number,
+  currency: string,
+|};
+
+type Props = {|
+  +guestCount: number,
+  +roomCount: number,
+  +price: ?PriceType,
+|};
+
+export default function RoomSummary(props: Props) {
+  if (props.roomCount === 0 || props.price == null) {
+    return null;
+  }
+  return (
+    <View style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.summary}>
+          <Translation id="single_hotel.room_summary.summary" />
+        </Text>
+        <View style={styles.row}>
+          <Translation
+            id="single_hotel.book_now.description"
+            values={{
+              personCount: props.guestCount,
+              numberOfRooms: props.roomCount,
+            }}
+          />
+          <Price
+            amount={props.price.amount}
+            currency={props.price.currency}
+            style={styles.currency}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: defaultTokens.paletteInkLighter,
+    borderBottomWidth: 0,
+    borderTopStartRadius: 6,
+    borderTopEndRadius: 6,
+  },
+  content: {
+    paddingHorizontal: 17,
+    paddingTop: 8,
+    paddingBottom: 12,
+  },
+  summary: {
+    color: defaultTokens.colorTextSecondary,
+    fontSize: 12,
+    marginEnd: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  currency: {
+    fontWeight: '800',
+  },
+});
diff --git a/app/hotels/src/singleHotel/SingleHotelContainer.js b/app/hotels/src/singleHotel/SingleHotelContainer.js
index 3d31fd53..42b05446 100644
--- a/app/hotels/src/singleHotel/SingleHotelContainer.js
+++ b/app/hotels/src/singleHotel/SingleHotelContainer.js
@@ -39,6 +39,7 @@ type SearchParams = {|
 |};
 
 type PropsWithContext = {|
+  ...Props,
   +currency: string,
   +hotelId: string,
   +checkin: Date,
@@ -53,6 +54,7 @@ class SingleHotelContainer extends React.Component<PropsWithContext> {
     <HotelDetailScreen
       availableHotel={availableHotel}
       roomsConfiguration={this.props.roomsConfiguration}
+      goBack={this.props.goBack}
     />
   );
 
@@ -91,7 +93,11 @@ class SingleHotelContainer extends React.Component<PropsWithContext> {
   }
 }
 
-export default function SingleHotelContainerWithContext() {
+type Props = {|
+  +goBack: () => void,
+|};
+
+export default function SingleHotelContainerWithContext(props: Props) {
   return (
     <SingleHotelContext.Consumer>
       {({ checkin, checkout, roomsConfiguration, hotelId }) => (
@@ -103,6 +109,7 @@ export default function SingleHotelContainerWithContext() {
               checkin={checkin}
               checkout={checkout}
               roomsConfiguration={roomsConfiguration}
+              {...props}
             />
           )}
         </HotelsContext.Consumer>
diff --git a/app/hotels/src/singleHotel/__generated__/HotelDetailScreen_availableHotel.graphql.js b/app/hotels/src/singleHotel/__generated__/HotelDetailScreen_availableHotel.graphql.js
index 00f4806c..ecca2711 100644
--- a/app/hotels/src/singleHotel/__generated__/HotelDetailScreen_availableHotel.graphql.js
+++ b/app/hotels/src/singleHotel/__generated__/HotelDetailScreen_availableHotel.graphql.js
@@ -8,7 +8,6 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
-type BookNow_availableRooms$ref = any;
 type BookNow_hotel$ref = any;
 type Header_hotel$ref = any;
 type HotelInformation_hotel$ref = any;
@@ -20,7 +19,12 @@ export type HotelDetailScreen_availableHotel = {|
     +$fragmentRefs: Header_hotel$ref & BookNow_hotel$ref & HotelInformation_hotel$ref
   |},
   +availableRooms: ?$ReadOnlyArray<?{|
-    +$fragmentRefs: RoomList$ref & BookNow_availableRooms$ref
+    +originalId: ?string,
+    +incrementalPrice: ?$ReadOnlyArray<?{|
+      +amount: ?number,
+      +currency: ?string,
+    |}>,
+    +$fragmentRefs: RoomList$ref,
   |}>,
   +$refType: HotelDetailScreen_availableHotel$ref,
 |};
@@ -75,14 +79,41 @@ const node/*: ConcreteFragment*/ = {
           "args": null
         },
         {
-          "kind": "FragmentSpread",
-          "name": "BookNow_availableRooms",
-          "args": null
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "originalId",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "incrementalPrice",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "Price",
+          "plural": true,
+          "selections": [
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "amount",
+              "args": null,
+              "storageKey": null
+            },
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "currency",
+              "args": null,
+              "storageKey": null
+            }
+          ]
         }
       ]
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = 'bb740e85b1d4abf7b6ea3f2f85d361a8';
+(node/*: any*/).hash = '3412f045bb72cd404a806303e9c9bf03';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js b/app/hotels/src/singleHotel/__generated__/SingleHotelContainerQuery.graphql.js
index 5ffcd841..c84a5e35 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 38a19b5292ea80545404cb5df0320063
+ * @relayHash 96b07378fa5ba64262a70246172bc853
  */
 
 /* eslint-disable */
@@ -65,7 +65,11 @@ fragment HotelDetailScreen_availableHotel on HotelAvailability {
   }
   availableRooms {
     ...RoomList
-    ...BookNow_availableRooms
+    originalId
+    incrementalPrice {
+      amount
+      currency
+    }
     id
   }
 }
@@ -80,10 +84,6 @@ fragment Header_hotel on Hotel {
     stars
     categoryName
   }
-  review {
-    score
-    description
-  }
   photos {
     edges {
       node {
@@ -102,6 +102,7 @@ fragment BookNow_hotel on Hotel {
 fragment HotelInformation_hotel on Hotel {
   ...Location_hotel
   ...Description_hotel
+  ...HotelReview
 }
 
 fragment RoomList on HotelRoomAvailability {
@@ -109,14 +110,6 @@ fragment RoomList on HotelRoomAvailability {
   ...RoomRow_availableRoom
 }
 
-fragment BookNow_availableRooms on HotelRoomAvailability {
-  originalId
-  incrementalPrice {
-    amount
-    currency
-  }
-}
-
 fragment RoomRow_availableRoom on HotelRoomAvailability {
   originalId
   ...RoomBadges_availableRoom
@@ -125,7 +118,6 @@ fragment RoomRow_availableRoom on HotelRoomAvailability {
       title
     }
     ...RoomRowTitle_room
-    ...RoomDescription_room
     photos {
       edges {
         node {
@@ -156,20 +148,12 @@ fragment RoomBadges_availableRoom on HotelRoomAvailability {
 }
 
 fragment RoomRowTitle_room on HotelRoom {
-  roomSize
   description {
     title
   }
 }
 
-fragment RoomDescription_room on HotelRoom {
-  description {
-    text
-  }
-}
-
 fragment BeddingInfo_room on HotelRoom {
-  type
   maxPersons
   bedding {
     type
@@ -195,6 +179,20 @@ 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 {
@@ -237,54 +235,47 @@ v1 = [
 v2 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "originalId",
+  "name": "name",
   "args": null,
   "storageKey": null
 },
 v3 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "name",
+  "name": "id",
   "args": null,
   "storageKey": null
 },
 v4 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "id",
+  "name": "lowResUrl",
   "args": null,
   "storageKey": null
 },
 v5 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "lowResUrl",
+  "name": "highResUrl",
   "args": null,
   "storageKey": null
 },
 v6 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "highResUrl",
+  "name": "originalId",
   "args": null,
   "storageKey": null
 },
 v7 = {
-  "kind": "ScalarField",
-  "alias": null,
-  "name": "type",
-  "args": null,
-  "storageKey": null
-},
-v8 = {
   "kind": "ScalarField",
   "alias": null,
   "name": "amount",
   "args": null,
   "storageKey": null
 },
-v9 = [
-  v8,
+v8 = [
+  v7,
   {
     "kind": "ScalarField",
     "alias": null,
@@ -298,7 +289,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    ...BookNow_availableRooms\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  review {\n    score\n    description\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}\n\nfragment RoomList on HotelRoomAvailability {\n  id\n  ...RoomRow_availableRoom\n}\n\nfragment BookNow_availableRooms on HotelRoomAvailability {\n  originalId\n  incrementalPrice {\n    amount\n    currency\n  }\n}\n\nfragment RoomRow_availableRoom on HotelRoomAvailability {\n  originalId\n  ...RoomBadges_availableRoom\n  room {\n    description {\n      title\n    }\n    ...RoomRowTitle_room\n    ...RoomDescription_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  roomSize\n  description {\n    title\n  }\n}\n\nfragment RoomDescription_room on HotelRoom {\n  description {\n    text\n  }\n}\n\nfragment BeddingInfo_room on HotelRoom {\n  type\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 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  ...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",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -348,53 +339,52 @@ return {
             "concreteType": "Hotel",
             "plural": false,
             "selections": [
-              v2,
-              v3,
               {
                 "kind": "LinkedField",
                 "alias": null,
-                "name": "rating",
+                "name": "address",
                 "storageKey": null,
                 "args": null,
-                "concreteType": "HotelRating",
+                "concreteType": "Address",
                 "plural": false,
                 "selections": [
                   {
                     "kind": "ScalarField",
                     "alias": null,
-                    "name": "stars",
+                    "name": "street",
                     "args": null,
                     "storageKey": null
                   },
                   {
                     "kind": "ScalarField",
                     "alias": null,
-                    "name": "categoryName",
+                    "name": "city",
                     "args": null,
                     "storageKey": null
                   }
                 ]
               },
+              v2,
               {
                 "kind": "LinkedField",
                 "alias": null,
-                "name": "review",
+                "name": "rating",
                 "storageKey": null,
                 "args": null,
-                "concreteType": "HotelReview",
+                "concreteType": "HotelRating",
                 "plural": false,
                 "selections": [
                   {
                     "kind": "ScalarField",
                     "alias": null,
-                    "name": "score",
+                    "name": "stars",
                     "args": null,
                     "storageKey": null
                   },
                   {
                     "kind": "ScalarField",
                     "alias": null,
-                    "name": "description",
+                    "name": "categoryName",
                     "args": null,
                     "storageKey": null
                   }
@@ -427,15 +417,16 @@ return {
                         "concreteType": "HotelPhoto",
                         "plural": false,
                         "selections": [
+                          v3,
                           v4,
-                          v5,
-                          v6
+                          v5
                         ]
                       }
                     ]
                   }
                 ]
               },
+              v6,
               {
                 "kind": "LinkedField",
                 "alias": null,
@@ -445,33 +436,8 @@ return {
                 "concreteType": "HotelPhoto",
                 "plural": false,
                 "selections": [
-                  v6,
-                  v4
-                ]
-              },
-              {
-                "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
-                  }
+                  v5,
+                  v3
                 ]
               },
               {
@@ -533,15 +499,40 @@ return {
                         "concreteType": "HotelFacility",
                         "plural": false,
                         "selections": [
-                          v4,
-                          v3
+                          v3,
+                          v2
                         ]
                       }
                     ]
                   }
                 ]
               },
-              v4
+              {
+                "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": "count",
+                    "args": null,
+                    "storageKey": null
+                  }
+                ]
+              },
+              v3
             ]
           },
           {
@@ -553,8 +544,8 @@ return {
             "concreteType": "HotelRoomAvailability",
             "plural": true,
             "selections": [
-              v4,
-              v2,
+              v3,
+              v6,
               {
                 "kind": "ScalarField",
                 "alias": null,
@@ -593,23 +584,9 @@ return {
                         "name": "title",
                         "args": null,
                         "storageKey": null
-                      },
-                      {
-                        "kind": "ScalarField",
-                        "alias": null,
-                        "name": "text",
-                        "args": null,
-                        "storageKey": null
                       }
                     ]
                   },
-                  {
-                    "kind": "ScalarField",
-                    "alias": null,
-                    "name": "roomSize",
-                    "args": null,
-                    "storageKey": null
-                  },
                   {
                     "kind": "LinkedField",
                     "alias": null,
@@ -644,9 +621,9 @@ return {
                                 "args": null,
                                 "storageKey": null
                               },
-                              v6,
                               v5,
-                              v4
+                              v4,
+                              v3
                             ]
                           }
                         ]
@@ -660,7 +637,6 @@ return {
                     "args": null,
                     "storageKey": null
                   },
-                  v7,
                   {
                     "kind": "LinkedField",
                     "alias": null,
@@ -670,11 +646,17 @@ return {
                     "concreteType": "HotelRoomBedding",
                     "plural": true,
                     "selections": [
-                      v7,
-                      v8
+                      {
+                        "kind": "ScalarField",
+                        "alias": null,
+                        "name": "type",
+                        "args": null,
+                        "storageKey": null
+                      },
+                      v7
                     ]
                   },
-                  v4
+                  v3
                 ]
               },
               {
@@ -685,7 +667,7 @@ return {
                 "args": null,
                 "concreteType": "Price",
                 "plural": false,
-                "selections": v9
+                "selections": v8
               },
               {
                 "kind": "LinkedField",
@@ -695,11 +677,11 @@ return {
                 "args": null,
                 "concreteType": "Price",
                 "plural": true,
-                "selections": v9
+                "selections": v8
               }
             ]
           },
-          v4
+          v3
         ]
       }
     ]
diff --git a/app/hotels/src/singleHotel/bookNow/BookNow.js b/app/hotels/src/singleHotel/bookNow/BookNow.js
index 6ce4d085..394320ab 100644
--- a/app/hotels/src/singleHotel/bookNow/BookNow.js
+++ b/app/hotels/src/singleHotel/bookNow/BookNow.js
@@ -1,21 +1,17 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { StyleSheet, Touchable, Price } from '@kiwicom/mobile-shared';
+import { StyleSheet, Button, Text } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 import {
   withNavigation,
   type NavigationType,
 } from '@kiwicom/mobile-navigation';
-import { DeviceInfo } from '@kiwicom/mobile-localization';
+import { DeviceInfo, Translation } from '@kiwicom/mobile-localization';
 
-import BookNowText from './BookNowText';
-import countBookingPrice from './countBookingPrice';
 import convertRooms from './convertRooms';
-import type { BookNow_availableRooms } from './__generated__/BookNow_availableRooms.graphql';
 import type { BookNow_hotel } from './__generated__/BookNow_hotel.graphql';
 import SingleHotelContext from '../../navigation/singleHotel/SingleHotelContext';
 import HotelsContext from '../../HotelsContext';
@@ -45,29 +41,12 @@ export class BookNow extends React.Component<PropsWithContext> {
   };
 
   render() {
-    const price = countBookingPrice(
-      this.props.availableRooms,
-      this.props.selected,
-    );
     return (
-      price && (
-        <View style={styles.buttonWrapper}>
-          <Touchable onPress={this.handleGoToPayment}>
-            <BookNowText
-              price={
-                <Price
-                  style={styles.buttonPrice}
-                  amount={price.amount}
-                  currency={price.currency}
-                />
-              }
-              buttonPriceStyle={styles.buttonPrice}
-              numberOfRooms={this.props.numberOfRooms}
-              personCount={this.props.personCount}
-            />
-          </Touchable>
-        </View>
-      )
+      <Button onPress={this.handleGoToPayment}>
+        <Text style={styles.text}>
+          <Translation id="single_hotel.book_now" />
+        </Text>
+      </Button>
     );
   }
 }
@@ -78,9 +57,6 @@ type Props = {|
   },
   +availableRooms: any,
   +hotel: any,
-  +numberOfRooms: number,
-  +personCount: number,
-  +availableRooms: ?BookNow_availableRooms,
   +hotel: ?BookNow_hotel,
   +navigation: NavigationType,
 |};
@@ -100,15 +76,6 @@ export const BookNowWithContext = (props: Props) => {
 export default createFragmentContainer(
   withNavigation(BookNowWithContext),
   graphql`
-    fragment BookNow_availableRooms on HotelRoomAvailability
-      @relay(plural: true) {
-      originalId
-      incrementalPrice {
-        amount
-        currency
-      }
-    }
-
     fragment BookNow_hotel on Hotel {
       originalId
     }
@@ -116,17 +83,9 @@ export default createFragmentContainer(
 );
 
 const styles = StyleSheet.create({
-  buttonWrapper: {
-    position: 'absolute',
-    bottom: 0,
-    start: 0,
-    end: 0,
-    flex: 1,
-    backgroundColor: defaultTokens.paletteProductNormal,
-  },
-  buttonPrice: {
-    fontSize: 12,
+  text: {
+    fontWeight: '800',
+    fontSize: 16,
     color: defaultTokens.paletteWhite,
-    textAlign: 'center',
   },
 });
diff --git a/app/hotels/src/singleHotel/bookNow/BookNowText.js b/app/hotels/src/singleHotel/bookNow/BookNowText.js
deleted file mode 100644
index 79ef40a0..00000000
--- a/app/hotels/src/singleHotel/bookNow/BookNowText.js
+++ /dev/null
@@ -1,60 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import { View } from 'react-native';
-import {
-  StyleSheet,
-  ButtonTitle,
-  type StylePropType,
-} from '@kiwicom/mobile-shared';
-import { Translation } from '@kiwicom/mobile-localization';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
-
-type Props = {|
-  +price: React.Node,
-  +numberOfRooms: number,
-  +personCount: number,
-  +buttonPriceStyle: StylePropType,
-|};
-
-export default function BookNowText(props: Props) {
-  return (
-    <View style={styles.buttonInnerWrapper}>
-      <ButtonTitle
-        style={styles.buttonTitle}
-        text={<Translation id="single_hotel.book_now" />}
-      />
-      <View style={styles.priceWrapper}>
-        <ButtonTitle
-          style={props.buttonPriceStyle}
-          text={
-            <Translation
-              id="single_hotel.book_now.description"
-              values={{
-                personCount: props.personCount,
-                numberOfRooms: props.numberOfRooms,
-              }}
-            />
-          }
-        />
-        {props.price}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  priceWrapper: {
-    flexDirection: 'row',
-    alignSelf: 'center',
-  },
-  buttonInnerWrapper: {
-    paddingVertical: 14,
-  },
-  buttonTitle: {
-    fontSize: 16,
-    fontWeight: '800',
-    color: defaultTokens.paletteWhite,
-    textAlign: 'center',
-  },
-});
diff --git a/app/hotels/src/singleHotel/bookNow/countBookingPrice.js b/app/hotels/src/singleHotel/bookNow/countBookingPrice.js
index 1b5ebcce..03836208 100644
--- a/app/hotels/src/singleHotel/bookNow/countBookingPrice.js
+++ b/app/hotels/src/singleHotel/bookNow/countBookingPrice.js
@@ -2,7 +2,7 @@
 
 import idx from 'idx';
 
-import type { BookNow_availableRooms } from './__generated__/BookNow_availableRooms.graphql';
+import type { BookNow_availableRooms } from '../__generated__/HotelDetailScreen_availableHotel.graphql';
 
 type Money = {|
   amount: number,
diff --git a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
index 0534bcc2..f8636c8a 100644
--- a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
+++ b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
@@ -1,21 +1,20 @@
 // @flow strict
 
 import * as React from 'react';
-import { Image, View } from 'react-native';
+import { View } from 'react-native';
 import {
   StyleSheet,
   Text,
   Color,
   type StylePropType,
+  TextIcon,
 } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
-import icon from './gallery-icon.png';
-
 type Props = {|
-  +count: number,
+  +count: number | null,
   +style?: {
     +container?: StylePropType,
     +icon?: StylePropType,
@@ -29,10 +28,12 @@ export default function GalleryButton({ count, style }: Props) {
   const textStyle = idx(style, _ => _.text) || null;
   return (
     <View style={[styles.container, containerStyle]}>
-      <Image source={icon} style={[styles.icon, iconStyle]} />
-      <Text style={[styles.count, textStyle]}>
-        <Translation passThrough={count} />
-      </Text>
+      <TextIcon code="&#xe064;" orbit={true} style={[styles.icon, iconStyle]} />
+      {count !== null && (
+        <Text style={[styles.count, textStyle]}>
+          <Translation passThrough={count} />
+        </Text>
+      )}
     </View>
   );
 }
@@ -41,13 +42,12 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderRadius: 2,
-    backgroundColor: Color.grey.transparent.outerSpace.$60,
-    paddingVertical: 5,
-    paddingHorizontal: 8,
+    backgroundColor: Color.grey.transparent.outerSpace.$54,
+    padding: 4,
+    alignItems: 'center',
   },
   icon: {
-    width: 14,
-    height: 14,
+    color: defaultTokens.paletteWhite,
   },
   count: {
     backgroundColor: 'transparent',
diff --git a/app/hotels/src/singleHotel/header/Header.js b/app/hotels/src/singleHotel/header/Header.js
index 27c5d617..3949ecd6 100644
--- a/app/hotels/src/singleHotel/header/Header.js
+++ b/app/hotels/src/singleHotel/header/Header.js
@@ -1,17 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { View, StatusBar, Platform } from 'react-native';
+import { View } from 'react-native';
 import {
   StyleSheet,
   NetworkImage,
-  StretchedImage,
   Text,
   Touchable,
-  AdaptableLayout,
-  Device,
-  BlackToAlpha as gradient,
-  Dimensions,
+  Stars,
 } from '@kiwicom/mobile-shared';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
@@ -23,7 +19,6 @@ import {
 } from '@kiwicom/mobile-navigation';
 
 import GalleryButton from '../galleryButton/GalleryButton';
-import Rating from './Rating';
 import type { Header_hotel } from './__generated__/Header_hotel.graphql';
 
 type ContainerProps = {|
@@ -53,76 +48,32 @@ export class Header extends React.Component<Props> {
     });
   };
 
-  renderHeader = () => {
+  render = () => {
     const { hotel } = this.props;
     const mainPhotoUrl = idx(hotel, _ => _.mainPhoto.highResUrl);
     const photosCount = idx(hotel, _ => _.photos.edges.length) || 0;
-    return (
-      <Dimensions.Consumer>
-        {dimensions => {
-          const isAndroidTablet = Platform.select({
-            android: Device.isWideLayout(dimensions),
-            ios: false,
-          });
 
-          return (
-            <Touchable onPress={this.openGallery}>
-              <View>
-                <NetworkImage
-                  style={
-                    isAndroidTablet ? styles.heightHigher : styles.heightNormal
-                  }
-                  source={{ uri: mainPhotoUrl }}
-                />
-                <View
-                  style={[
-                    styles.nameAndRatingContainer,
-                    isAndroidTablet
-                      ? styles.nameAndRatingContainerHigher
-                      : styles.nameAndRatingContainerNormal,
-                  ]}
-                >
-                  <StretchedImage source={gradient} />
-                  <View style={styles.nameAndRating}>
-                    <Text style={styles.hotelName}>
-                      <Translation passThrough={idx(hotel, _ => _.name)} />
-                    </Text>
-                    <Text style={styles.rating}>
-                      <Rating
-                        stars={idx(hotel, _ => _.rating.stars)}
-                        score={idx(hotel, _ => _.review.score)}
-                        description={idx(hotel, _ => _.review.description)}
-                      />
-                    </Text>
-                  </View>
-                </View>
-                {photosCount > 0 && (
-                  <View
-                    style={[
-                      styles.galleryButton,
-                      isAndroidTablet
-                        ? styles.galleryTopExtra
-                        : styles.galleryTopNormal,
-                    ]}
-                  >
-                    <GalleryButton count={photosCount} />
-                  </View>
-                )}
-              </View>
-            </Touchable>
-          );
-        }}
-      </Dimensions.Consumer>
-    );
-  };
-
-  render = () => {
-    const header = this.renderHeader();
     return (
-      <AdaptableLayout
-        renderOnNarrow={header}
-        renderOnWide={<View style={styles.tabletContainer}>{header}</View>}
-      />
+      <Touchable onPress={this.openGallery}>
+        <View>
+          <NetworkImage style={styles.image} source={{ uri: mainPhotoUrl }} />
+          <View style={[styles.nameAndRatingContainer]}>
+            <View style={styles.nameAndRating}>
+              <Text style={styles.hotelName}>
+                <Translation passThrough={idx(hotel, _ => _.name)} />
+              </Text>
+              <Text style={styles.rating}>
+                <Stars rating={idx(hotel, _ => _.rating.stars) || 0} />
+              </Text>
+            </View>
+          </View>
+          {photosCount > 0 && (
+            <View style={[styles.galleryButton]}>
+              <GalleryButton count={photosCount} />
+            </View>
+          )}
+        </View>
+      </Touchable>
     );
   };
 }
@@ -139,10 +90,6 @@ export default (createFragmentContainer(
         stars
         categoryName
       }
-      review {
-        score
-        description
-      }
       photos {
         edges {
           node {
@@ -163,49 +110,30 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   hotelName: {
-    backgroundColor: 'transparent',
-    fontSize: 18,
+    backgroundColor: defaultTokens.paletteWhite,
+    fontSize: 16,
     lineHeight: 22,
-    fontWeight: '600',
+    fontWeight: '800',
     letterSpacing: -0.45,
-    color: defaultTokens.paletteWhite,
+    color: defaultTokens.colorTextAttention,
   },
   rating: {
-    backgroundColor: 'transparent',
+    backgroundColor: defaultTokens.paletteWhite,
     fontSize: 12,
-    color: defaultTokens.paletteWhite,
-  },
-  tabletContainer: {
-    android: {
-      paddingHorizontal: 8,
-    },
+    color: defaultTokens.colorTextSecondary,
   },
   nameAndRatingContainer: {
     alignItems: 'flex-end',
     flexDirection: 'row',
+    backgroundColor: defaultTokens.paletteWhite,
+    paddingVertical: 16,
   },
-  nameAndRatingContainerNormal: {
-    height: 150,
-    marginTop: -150,
-  },
-  nameAndRatingContainerHigher: {
-    height: 200,
-    marginTop: -200,
-  },
-  heightNormal: {
-    height: 150,
-  },
-  heightHigher: {
-    height: 200,
+  image: {
+    height: 180,
   },
   galleryButton: {
     position: 'absolute',
-    end: 10,
-  },
-  galleryTopNormal: {
-    top: 10,
-  },
-  galleryTopExtra: {
-    top: StatusBar.currentHeight + 16,
+    start: 12,
+    top: 32,
   },
 });
diff --git a/app/hotels/src/singleHotel/header/Rating.js b/app/hotels/src/singleHotel/header/Rating.js
deleted file mode 100644
index e064db50..00000000
--- a/app/hotels/src/singleHotel/header/Rating.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { Stars } from '@kiwicom/mobile-shared';
-import { Translation, TranslationFragment } from '@kiwicom/mobile-localization';
-
-type Props = {|
-  +stars?: ?number,
-  +score?: ?number,
-  +description?: ?string,
-|};
-
-export default function Rating({ stars, score, description }: Props) {
-  const reviewDelimiter = score && description ? ' ' : '';
-  const review = `${score || ''}${reviewDelimiter}${description || ''}`;
-  const starsDelimiter = stars && (score || description) ? ' - ' : '';
-
-  return (
-    <TranslationFragment>
-      <Stars rating={stars || 0} />
-      <Translation passThrough={starsDelimiter} />
-      <Translation passThrough={review} />
-    </TranslationFragment>
-  );
-}
diff --git a/app/hotels/src/singleHotel/header/__generated__/Header_hotel.graphql.js b/app/hotels/src/singleHotel/header/__generated__/Header_hotel.graphql.js
index 5b92509f..b99d8916 100644
--- a/app/hotels/src/singleHotel/header/__generated__/Header_hotel.graphql.js
+++ b/app/hotels/src/singleHotel/header/__generated__/Header_hotel.graphql.js
@@ -19,10 +19,6 @@ export type Header_hotel = {|
     +stars: ?number,
     +categoryName: ?string,
   |},
-  +review: ?{|
-    +score: ?number,
-    +description: ?string,
-  |},
   +photos: ?{|
     +edges: ?$ReadOnlyArray<?{|
       +node: ?{|
@@ -96,31 +92,6 @@ return {
         }
       ]
     },
-    {
-      "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": "description",
-          "args": null,
-          "storageKey": null
-        }
-      ]
-    },
     {
       "kind": "LinkedField",
       "alias": null,
@@ -173,5 +144,5 @@ return {
 };
 })();
 // prettier-ignore
-(node/*: any*/).hash = 'd525c9cb8521862bbeca063836092650';
+(node/*: any*/).hash = 'b63c01773444c38497fc16d4da9a1c49';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js b/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
index de21d3a5..589e519c 100644
--- a/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
+++ b/app/hotels/src/singleHotel/hotelInformation/HotelInformation.js
@@ -1,13 +1,11 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { AdaptableLayout, StyleSheet } from '@kiwicom/mobile-shared';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Location from './location/Location';
 import Description from './description/Description';
+import HotelReview from './HotelReview';
 import type { HotelInformation_hotel } from './__generated__/HotelInformation_hotel.graphql';
 
 type ContainerProps = {|
@@ -19,45 +17,13 @@ type Props = {|
   +hotel: ?HotelInformation_hotel,
 |};
 
-export class HotelInformation extends React.Component<Props> {
-  renderDescription = (locationView: React.Node) => (
-    <Description hotel={this.props.hotel} locationView={locationView} />
-  );
-
-  renderLocation = (isWide: boolean) => (
-    <Location hotel={this.props.hotel} isWide={isWide} />
-  );
-
-  render = () => {
-    return (
-      <AdaptableLayout
-        renderOnNarrow={
-          <React.Fragment>
-            {this.renderLocation(false)}
-            {this.renderDescription()}
-          </React.Fragment>
-        }
-        renderOnWide={
-          <React.Fragment>
-            {this.renderDescription(
-              <View style={styles.locationContainer}>
-                {this.renderLocation(true)}
-              </View>,
-            )}
-          </React.Fragment>
-        }
-      />
-    );
-  };
-}
-
-const styles = StyleSheet.create({
-  locationContainer: {
-    borderBottomWidth: 1,
-    borderBottomColor: defaultTokens.paletteCloudNormal,
-    marginBottom: 15,
-  },
-});
+const HotelInformation = (props: Props) => (
+  <React.Fragment>
+    <Location hotel={props.hotel} />
+    <Description hotel={props.hotel} />
+    <HotelReview data={props.hotel} />
+  </React.Fragment>
+);
 
 export default (createFragmentContainer(
   HotelInformation,
@@ -65,6 +31,7 @@ export default (createFragmentContainer(
     fragment HotelInformation_hotel on Hotel {
       ...Location_hotel
       ...Description_hotel
+      ...HotelReview
     }
   `,
 ): React.ComponentType<ContainerProps>);
diff --git a/app/hotels/src/singleHotel/hotelInformation/HotelReview.js b/app/hotels/src/singleHotel/hotelInformation/HotelReview.js
new file mode 100644
index 00000000..1ea25358
--- /dev/null
+++ b/app/hotels/src/singleHotel/hotelInformation/HotelReview.js
@@ -0,0 +1,96 @@
+// @flow strict
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { Translation } from '@kiwicom/mobile-localization';
+import idx from 'idx';
+
+import HotelReviewScore from '../../allHotels/HotelReviewScore';
+import type { HotelReview as HotelReviewType } from './__generated__/HotelReview.graphql';
+
+type Props = {|
+  +data: HotelReviewType,
+|};
+
+const ratingLabels = {
+  '6': <Translation id="single_hotel.hotel_review.rating.6" />,
+  '7': <Translation id="single_hotel.hotel_review.rating.7" />,
+  '8': <Translation id="single_hotel.hotel_review.rating.8" />,
+  '9': <Translation id="single_hotel.hotel_review.rating.9" />,
+};
+
+const RenderLabel = ({ score }: {| +score: ?number |}) => {
+  if (score == null) {
+    return null;
+  }
+  if (Math.floor(score) < 6) {
+    // TODO: Should we have something here?
+    return null;
+  }
+  const key = `${Math.floor(score)}`;
+  return <Text style={styles.label}>{ratingLabels[key]}</Text>;
+};
+
+const HotelReview = (props: Props) => {
+  const reviews = idx(props.data, _ => _.review.count);
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <View style={styles.badgeWrapper}>
+          <HotelReviewScore hotel={props.data} />
+        </View>
+        <View>
+          <RenderLabel score={idx(props.data, _ => _.review.score)} />
+          {reviews != null && (
+            <Text style={styles.score}>
+              <Translation
+                id="single_hotel.hotel_review.reviews"
+                values={{ count: reviews }}
+              />
+            </Text>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: defaultTokens.paletteWhite,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: defaultTokens.paletteInkLighter,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: defaultTokens.paletteInkLighter,
+  },
+  row: {
+    flexDirection: 'row',
+    padding: 16,
+    alignItems: 'center',
+  },
+  label: {
+    fontWeight: '500',
+  },
+  score: {
+    color: defaultTokens.colorTextSecondary,
+    fontSize: 12,
+  },
+  badgeWrapper: {
+    marginEnd: 12,
+  },
+});
+
+export default createFragmentContainer(
+  HotelReview,
+  graphql`
+    fragment HotelReview on Hotel {
+      ...HotelReviewScore_hotel
+      review {
+        score
+        count
+      }
+    }
+  `,
+);
diff --git a/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelInformation_hotel.graphql.js b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelInformation_hotel.graphql.js
index 6861df8d..a878ebf5 100644
--- a/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelInformation_hotel.graphql.js
+++ b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelInformation_hotel.graphql.js
@@ -9,11 +9,12 @@
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
 type Description_hotel$ref = any;
+type HotelReview$ref = any;
 type Location_hotel$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type HotelInformation_hotel$ref: FragmentReference;
 export type HotelInformation_hotel = {|
-  +$fragmentRefs: Location_hotel$ref & Description_hotel$ref,
+  +$fragmentRefs: Location_hotel$ref & Description_hotel$ref & HotelReview$ref,
   +$refType: HotelInformation_hotel$ref,
 |};
 */
@@ -35,9 +36,14 @@ const node/*: ConcreteFragment*/ = {
       "kind": "FragmentSpread",
       "name": "Description_hotel",
       "args": null
+    },
+    {
+      "kind": "FragmentSpread",
+      "name": "HotelReview",
+      "args": null
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '6a889689fff52d0c6ae8e12573c359bb';
+(node/*: any*/).hash = 'dd2c3fec5cc896643ea5eec8b06d8972';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/bookNow/__generated__/BookNow_availableRooms.graphql.js b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
similarity index 50%
rename from app/hotels/src/singleHotel/bookNow/__generated__/BookNow_availableRooms.graphql.js
rename to app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
index d188da80..63beee5b 100644
--- a/app/hotels/src/singleHotel/bookNow/__generated__/BookNow_availableRooms.graphql.js
+++ b/app/hotels/src/singleHotel/hotelInformation/__generated__/HotelReview.graphql.js
@@ -8,55 +8,52 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
+type HotelReviewScore_hotel$ref = any;
 import type { FragmentReference } from "relay-runtime";
-declare export opaque type BookNow_availableRooms$ref: FragmentReference;
-export type BookNow_availableRooms = $ReadOnlyArray<{|
-  +originalId: ?string,
-  +incrementalPrice: ?$ReadOnlyArray<?{|
-    +amount: ?number,
-    +currency: ?string,
-  |}>,
-  +$refType: BookNow_availableRooms$ref,
-|}>;
+declare export opaque type HotelReview$ref: FragmentReference;
+export type HotelReview = {|
+  +review: ?{|
+    +score: ?number,
+    +count: ?number,
+  |},
+  +$fragmentRefs: HotelReviewScore_hotel$ref,
+  +$refType: HotelReview$ref,
+|};
 */
 
 
 const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
-  "name": "BookNow_availableRooms",
-  "type": "HotelRoomAvailability",
-  "metadata": {
-    "plural": true
-  },
+  "name": "HotelReview",
+  "type": "Hotel",
+  "metadata": null,
   "argumentDefinitions": [],
   "selections": [
     {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "originalId",
-      "args": null,
-      "storageKey": null
+      "kind": "FragmentSpread",
+      "name": "HotelReviewScore_hotel",
+      "args": null
     },
     {
       "kind": "LinkedField",
       "alias": null,
-      "name": "incrementalPrice",
+      "name": "review",
       "storageKey": null,
       "args": null,
-      "concreteType": "Price",
-      "plural": true,
+      "concreteType": "HotelReview",
+      "plural": false,
       "selections": [
         {
           "kind": "ScalarField",
           "alias": null,
-          "name": "amount",
+          "name": "score",
           "args": null,
           "storageKey": null
         },
         {
           "kind": "ScalarField",
           "alias": null,
-          "name": "currency",
+          "name": "count",
           "args": null,
           "storageKey": null
         }
@@ -65,5 +62,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '20da5274c235be9074e40e81b1647de0';
+(node/*: any*/).hash = '566d898a8069db61943a8b7e6f753a4e';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/hotelInformation/description/Description.js b/app/hotels/src/singleHotel/hotelInformation/description/Description.js
index 385047e8..13553523 100644
--- a/app/hotels/src/singleHotel/hotelInformation/description/Description.js
+++ b/app/hotels/src/singleHotel/hotelInformation/description/Description.js
@@ -3,15 +3,10 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import {
-  Text,
-  SimpleCard,
-  StyleSheet,
-  AdaptableLayout,
-  ReadMore,
-} from '@kiwicom/mobile-shared';
+import { Text, StyleSheet, ReadMore } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import Facilities from './Facilities';
 import type { Description_hotel } from './__generated__/Description_hotel.graphql';
@@ -27,55 +22,37 @@ type Props = {
   +locationView?: React.Node,
 };
 
-export class Description extends React.Component<Props> {
-  renderCardChildren = (isWide: boolean) => (
-    <View>
-      {this.props.locationView}
-      <View style={isWide ? styles.wideCardChildrenWrapper : null}>
-        <ReadMore
-          numberOfLines={5}
-          truncatedText={
-            <Translation id="single_hotel.description.show_more" />
-          }
-          revealedText={<Translation id="single_hotel.description.show_less" />}
-        >
-          <Text style={styles.summary}>
-            <Translation passThrough={idx(this.props, _ => _.hotel.summary)} />
-          </Text>
-        </ReadMore>
-        <Facilities facilities={idx(this.props, _ => _.hotel.facilities)} />
-      </View>
-    </View>
-  );
-
-  render = () => {
-    return (
-      <AdaptableLayout
-        renderOnNarrow={
-          <View style={styles.simpleCardWrapper}>
-            <SimpleCard>{this.renderCardChildren(false)}</SimpleCard>
-          </View>
-        }
-        renderOnWide={
-          <View style={styles.simpleCardWideWrapper}>
-            <SimpleCard style={styles.card}>
-              {this.renderCardChildren(true)}
-            </SimpleCard>
-          </View>
-        }
+export const Description = (props: Props) => (
+  <View style={styles.container}>
+    <Text style={styles.title}>
+      <Translation
+        id="single_hotel.description.description"
+        textTransform="uppercase"
       />
-    );
-  };
-}
+    </Text>
+    <ReadMore
+      numberOfLines={5}
+      truncatedText={<Translation id="single_hotel.description.show_more" />}
+      revealedText={<Translation id="single_hotel.description.show_less" />}
+    >
+      <Text style={styles.summary}>
+        <Translation passThrough={idx(props, _ => _.hotel.summary)} />
+      </Text>
+    </ReadMore>
+    <Facilities facilities={idx(props, _ => _.hotel.facilities)} />
+  </View>
+);
 
 const styles = StyleSheet.create({
-  simpleCardWrapper: {
-    android: {
-      marginTop: 10,
-    },
+  container: {
+    padding: 16,
+    backgroundColor: defaultTokens.paletteWhite,
   },
-  simpleCardWideWrapper: {
-    marginTop: 10,
+  title: {
+    color: defaultTokens.colorTextSecondary,
+    marginBottom: 8,
+    fontWeight: '800',
+    fontSize: 12,
   },
   summary: {
     android: {
@@ -85,16 +62,6 @@ const styles = StyleSheet.create({
       lineHeight: 19,
     },
   },
-  wideCardChildrenWrapper: {
-    marginVertical: 3,
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-  },
-  card: {
-    marginVertical: 0,
-    paddingVertical: 0,
-    paddingHorizontal: 0,
-  },
 });
 
 export default (createFragmentContainer(
diff --git a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
index 15f855fc..197c1cbf 100644
--- a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
+++ b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
@@ -116,6 +116,6 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
   adaptableBadgeText: {
-    color: defaultTokens.colorTextSecondary,
+    color: defaultTokens.colorTextAttention,
   },
 });
diff --git a/app/hotels/src/singleHotel/hotelInformation/location/Location.js b/app/hotels/src/singleHotel/hotelInformation/location/Location.js
index ce4648a3..e2f6cbcf 100644
--- a/app/hotels/src/singleHotel/hotelInformation/location/Location.js
+++ b/app/hotels/src/singleHotel/hotelInformation/location/Location.js
@@ -28,7 +28,6 @@ import HotelsContext, {
 
 type ContainerProps = {|
   +hotel: any,
-  +isWide: boolean,
 |};
 
 type PropsWithContext = {|
@@ -52,13 +51,13 @@ export class Location extends React.Component<PropsWithContext> {
   };
 
   render = () => {
-    const { hotel, isWide } = this.props;
+    const { hotel } = this.props;
     const address = idx(hotel, _ => _.address);
     const coordinates = idx(hotel, _ => _.coordinates);
     const latitude = idx(coordinates, _ => _.lat);
     const longitude = idx(coordinates, _ => _.lng);
     return (
-      <View style={[styles.background, isWide ? styles.wideContainer : null]}>
+      <View style={styles.background}>
         <TouchableWithoutFeedback onPress={this.goToMap}>
           <View style={styles.container}>
             <View style={styles.leftColumn}>
@@ -148,9 +147,6 @@ const styles = StyleSheet.create({
   background: {
     backgroundColor: defaultTokens.paletteWhite,
   },
-  wideContainer: {
-    borderRadius: 2,
-  },
   container: {
     height: 100,
     flexDirection: 'row',
diff --git a/app/hotels/src/singleHotel/roomList/BeddingInfo.js b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
index 60c25e6d..e17ed5cf 100644
--- a/app/hotels/src/singleHotel/roomList/BeddingInfo.js
+++ b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { StyleSheet, Text, TextIcon, Icon } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text, TextIcon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
@@ -29,13 +29,13 @@ export class BeddingInfo extends React.Component<Props> {
     return (
       <View>
         <View style={styles.row}>
-          <TextIcon code="&#xe0a5;" style={styles.icon} />
+          <TextIcon code="&#xe085;" orbit={true} style={styles.icon} />
           <Text style={styles.text}>
             <Translation passThrough={` ${info}`} />
           </Text>
         </View>
         <View style={styles.row}>
-          <Icon size={14} name="person" />
+          <TextIcon code="(" orbit={true} style={styles.icon} />
           <Text style={styles.text}>
             <Translation passThrough={' '} />
             <Translation
@@ -53,7 +53,6 @@ export default (createFragmentContainer(
   BeddingInfo,
   graphql`
     fragment BeddingInfo_room on HotelRoom {
-      type
       maxPersons
       bedding {
         type
@@ -75,13 +74,8 @@ const styles = StyleSheet.create({
   },
   icon: {
     color: defaultTokens.colorTextSecondary,
-    fontSize: 12,
+    fontSize: 14,
     marginEnd: 2,
-    android: {
-      alignSelf: 'center',
-    },
-    ios: {
-      alignSelf: 'flex-end',
-    },
+    alignSelf: 'center',
   },
 });
diff --git a/app/hotels/src/singleHotel/roomList/RoomBadges.js b/app/hotels/src/singleHotel/roomList/RoomBadges.js
index 1e93f1f9..83c37010 100644
--- a/app/hotels/src/singleHotel/roomList/RoomBadges.js
+++ b/app/hotels/src/singleHotel/roomList/RoomBadges.js
@@ -2,12 +2,7 @@
 
 import * as React from 'react';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import {
-  AdaptableBadge,
-  StyleSheet,
-  TextIcon,
-  Color,
-} from '@kiwicom/mobile-shared';
+import { AdaptableBadge, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
@@ -30,37 +25,32 @@ export const RoomBadges = (props: Props) => {
   );
   const isRefundable = idx(props.availableRoom, _ => _.isRefundable);
 
-  const badges = [];
-
-  if (isBreakfastIncluded) {
-    badges.push(
-      <AdaptableBadge
-        icon={<TextIcon code="&#xe039;" style={styles.iconStyle} />}
-        key="breakfast-included-badge"
-        translation={
-          <Translation id="single_hotel.room_badges.breakfast_included" />
-        }
-        style={styles.badgeContainer}
-        textStyle={styles.badgeText}
-      />,
-    );
-  }
-
-  if (isRefundable) {
-    badges.push(
-      <AdaptableBadge
-        icon={<TextIcon code={"'"} style={styles.iconStyle} />}
-        key="free-cancellation-badge"
-        translation={
-          <Translation id="single_hotel.room_badges.free_cancellation" />
-        }
-        style={styles.badgeContainer}
-        textStyle={styles.badgeText}
-      />,
-    );
-  }
-
-  return badges;
+  return (
+    <React.Fragment>
+      {isBreakfastIncluded && (
+        <AdaptableBadge
+          icon={
+            <TextIcon code="&#xe02F;" orbit={true} style={styles.iconStyle} />
+          }
+          translation={
+            <Translation id="single_hotel.room_badges.breakfast_included" />
+          }
+          style={styles.badgeContainer}
+          textStyle={styles.badgeText}
+        />
+      )}
+      {isRefundable && (
+        <AdaptableBadge
+          icon={<TextIcon code="r" orbit={true} style={styles.iconStyle} />}
+          translation={
+            <Translation id="single_hotel.room_badges.free_cancellation" />
+          }
+          style={styles.badgeContainer}
+          textStyle={styles.badgeText}
+        />
+      )}
+    </React.Fragment>
+  );
 };
 
 export default (createFragmentContainer(
@@ -75,22 +65,17 @@ export default (createFragmentContainer(
 
 const styles = StyleSheet.create({
   badgeContainer: {
-    backgroundColor: Color.green.transparent.lapalma.$15,
+    backgroundColor: defaultTokens.paletteBlueLight,
     marginTop: 5,
   },
   badgeText: {
-    color: defaultTokens.colorTextBadgeSuccess,
-    fontSize: 10,
+    color: defaultTokens.paletteBlueNormal,
+    fontSize: 12,
   },
   iconStyle: {
-    color: defaultTokens.colorIconSuccess,
-    fontSize: 10,
-    ios: {
-      alignSelf: 'flex-end',
-    },
-    android: {
-      alignSelf: 'center',
-    },
+    color: defaultTokens.paletteBlueNormal,
+    fontSize: 12,
+    alignSelf: 'center',
     marginEnd: 5,
   },
 });
diff --git a/app/hotels/src/singleHotel/roomList/RoomDescription.js b/app/hotels/src/singleHotel/roomList/RoomDescription.js
deleted file mode 100644
index ad26e935..00000000
--- a/app/hotels/src/singleHotel/roomList/RoomDescription.js
+++ /dev/null
@@ -1,74 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { View } from 'react-native';
-import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { Text, StyleSheet, ReadMore } from '@kiwicom/mobile-shared';
-import { Translation } from '@kiwicom/mobile-localization';
-import idx from 'idx';
-import { defaultTokens } from '@kiwicom/mobile-orbit';
-
-import type { RoomDescription_room as RoomDescriptionType } from './__generated__/RoomDescription_room.graphql';
-
-type ContainerProps = {|
-  +room: ?Object,
-|};
-
-type Props = {|
-  ...ContainerProps,
-  +room: RoomDescriptionType,
-|};
-
-export const RoomDescription = (props: Props) => {
-  const description = idx(props, _ => _.room.description.text);
-
-  if (description != null) {
-    return (
-      <View>
-        <View style={styles.delimiter} />
-        <ReadMore
-          numberOfLines={2}
-          style={styles.readMore}
-          truncatedText={
-            <Translation id="single_hotel.room_description.read_more" />
-          }
-          revealedText={<Translation id="single_hotel.room_description.hide" />}
-        >
-          <Text style={styles.description}>
-            <Translation passThrough={description} />
-          </Text>
-        </ReadMore>
-      </View>
-    );
-  }
-
-  return null;
-};
-
-export default (createFragmentContainer(
-  RoomDescription,
-  graphql`
-    fragment RoomDescription_room on HotelRoom {
-      description {
-        text
-      }
-    }
-  `,
-): React.ComponentType<ContainerProps>);
-
-const styles = StyleSheet.create({
-  delimiter: {
-    height: 1,
-    backgroundColor: defaultTokens.paletteCloudLight,
-    marginVertical: 6,
-  },
-  description: {
-    fontSize: 12,
-    color: defaultTokens.colorTextAttention,
-  },
-  readMore: {
-    color: defaultTokens.paletteProductNormal,
-    fontWeight: '600',
-    fontSize: 12,
-  },
-});
diff --git a/app/hotels/src/singleHotel/roomList/RoomImage.js b/app/hotels/src/singleHotel/roomList/RoomImage.js
index db69aa97..026de55f 100644
--- a/app/hotels/src/singleHotel/roomList/RoomImage.js
+++ b/app/hotels/src/singleHotel/roomList/RoomImage.js
@@ -2,37 +2,26 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import {
-  Touchable,
-  NetworkImage,
-  StyleSheet,
-  Color,
-} from '@kiwicom/mobile-shared';
+import { Touchable, NetworkImage, StyleSheet } from '@kiwicom/mobile-shared';
 
 import GalleryButton from '../galleryButton/GalleryButton';
 
 type Props = {|
   +thumbnailUrl: ?string,
-  +photoCount: number,
   +openGallery: () => void,
 |};
 
-export default function RoomImage({
-  thumbnailUrl,
-  photoCount,
-  openGallery,
-}: Props) {
+export default function RoomImage({ thumbnailUrl, openGallery }: Props) {
   return (
     <Touchable onPress={openGallery} disabled={thumbnailUrl == null}>
       <View>
         <NetworkImage source={{ uri: thumbnailUrl }} style={styles.thumbnail} />
         <View style={styles.galleryButton}>
           <GalleryButton
-            count={photoCount}
+            count={null}
             style={{
               container: styles.galleryButtonContainer,
               icon: styles.icon,
-              text: styles.text,
             }}
           />
         </View>
@@ -51,9 +40,7 @@ const styles = StyleSheet.create({
   galleryButtonContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: Color.transparent.black.$30,
     borderRadius: 0,
-    paddingVertical: 4,
   },
   thumbnail: {
     width: 60,
@@ -61,10 +48,6 @@ const styles = StyleSheet.create({
     borderRadius: 2,
   },
   icon: {
-    height: 10,
-    width: 10,
-  },
-  text: {
-    fontSize: 10,
+    fontSize: 16,
   },
 });
diff --git a/app/hotels/src/singleHotel/roomList/RoomList.js b/app/hotels/src/singleHotel/roomList/RoomList.js
index a03a5f4d..6df95b19 100644
--- a/app/hotels/src/singleHotel/roomList/RoomList.js
+++ b/app/hotels/src/singleHotel/roomList/RoomList.js
@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from 'react';
+import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { StyleSheet, Text } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
@@ -32,9 +33,12 @@ class RoomList extends React.Component<Props> {
     const data = this.props.data || [];
 
     return (
-      <React.Fragment>
+      <View style={styles.container}>
         <Text style={styles.title}>
-          <Translation id="single_hotel.room_list.rooms" />
+          <Translation
+            id="single_hotel.room_list.rooms"
+            textTransform="uppercase"
+          />
         </Text>
         {data.map(availableRoom => (
           <RoomRow
@@ -45,18 +49,21 @@ class RoomList extends React.Component<Props> {
             selected={selected}
           />
         ))}
-      </React.Fragment>
+      </View>
     );
   };
 }
 
 const styles = StyleSheet.create({
+  container: {
+    backgroundColor: defaultTokens.paletteWhite,
+  },
   title: {
-    fontSize: 14,
+    paddingStart: 16,
+    paddingTop: 16,
+    fontSize: 12,
     color: defaultTokens.colorTextSecondary,
-    padding: 15,
-    paddingTop: 22,
-    paddingBottom: 7,
+    fontWeight: '800',
   },
 });
 
diff --git a/app/hotels/src/singleHotel/roomList/RoomRow.js b/app/hotels/src/singleHotel/roomList/RoomRow.js
index 0779ae66..b008eaf5 100644
--- a/app/hotels/src/singleHotel/roomList/RoomRow.js
+++ b/app/hotels/src/singleHotel/roomList/RoomRow.js
@@ -3,23 +3,19 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import idx from 'idx';
-import {
-  SimpleCard,
-  StyleSheet,
-  AdaptableLayout,
-} from '@kiwicom/mobile-shared';
+import { StyleSheet } from '@kiwicom/mobile-shared';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import {
   type NavigationType,
   withNavigation,
 } from '@kiwicom/mobile-navigation';
 import isEqual from 'react-fast-compare';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 import RoomPicker from '../roomPicker/RoomPicker';
 import RoomImage from './RoomImage';
 import BeddingInfo from './BeddingInfo';
 import RoomRowTitle from './RoomRowTitle';
-import RoomDescription from './RoomDescription';
 import RoomBadges from './RoomBadges';
 import type { RoomRow_availableRoom } from './__generated__/RoomRow_availableRoom.graphql';
 
@@ -76,13 +72,12 @@ export class RoomRow extends React.Component<Props> {
     });
   };
 
-  renderRow = (isWide: boolean) => {
+  render = () => {
     const availableRoom = this.props.availableRoom;
     const thumbnailUrl = idx(
       availableRoom,
       _ => _.room.photos.edges[0].node.thumbnailUrl,
     );
-    const photoCount = idx(availableRoom, _ => _.room.photos.edges.length) || 0;
     const price = idx(availableRoom, _ => _.minimalPrice.amount) || null;
     const currency = idx(availableRoom, _ => _.minimalPrice.currency) || null;
     const selectableCount =
@@ -92,13 +87,12 @@ export class RoomRow extends React.Component<Props> {
     const room = idx(availableRoom, _ => _.room);
 
     return (
-      <SimpleCard style={styles.card}>
-        <View style={isWide ? styles.widePadding : null}>
+      <View style={styles.container}>
+        <View>
           <View style={styles.row}>
             <RoomImage
               openGallery={this.openGallery}
               thumbnailUrl={thumbnailUrl}
-              photoCount={photoCount}
             />
             <View style={styles.details}>
               <RoomRowTitle room={room} />
@@ -107,7 +101,6 @@ export class RoomRow extends React.Component<Props> {
           </View>
           <View style={styles.roomDetails}>
             <BeddingInfo room={room} />
-            <RoomDescription room={room} />
           </View>
           <RoomPicker
             price={price}
@@ -118,16 +111,9 @@ export class RoomRow extends React.Component<Props> {
             decrement={this.deselect}
           />
         </View>
-      </SimpleCard>
+      </View>
     );
   };
-
-  render = () => (
-    <AdaptableLayout
-      renderOnNarrow={this.renderRow(false)}
-      renderOnWide={this.renderRow(true)}
-    />
-  );
 }
 
 export default (createFragmentContainer(
@@ -141,7 +127,6 @@ export default (createFragmentContainer(
           title
         }
         ...RoomRowTitle_room
-        ...RoomDescription_room
         photos {
           edges {
             node {
@@ -168,8 +153,10 @@ export default (createFragmentContainer(
 ): React.ComponentType<ContainerProps>);
 
 const styles = StyleSheet.create({
-  card: {
-    marginVertical: 5,
+  container: {
+    padding: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: defaultTokens.paletteInkLighter,
   },
   row: {
     flexDirection: 'row',
@@ -184,7 +171,4 @@ const styles = StyleSheet.create({
     marginTop: 10,
     marginBottom: 20,
   },
-  widePadding: {
-    paddingHorizontal: 5,
-  },
 });
diff --git a/app/hotels/src/singleHotel/roomList/RoomRowTitle.js b/app/hotels/src/singleHotel/roomList/RoomRowTitle.js
index 33e349f2..9aabeff3 100644
--- a/app/hotels/src/singleHotel/roomList/RoomRowTitle.js
+++ b/app/hotels/src/singleHotel/roomList/RoomRowTitle.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Text, TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { Text, StyleSheet } from '@kiwicom/mobile-shared';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
@@ -20,39 +20,18 @@ type Props = {|
 
 export function RoomRowTitle(props: Props) {
   const title = idx(props.room, _ => _.description.title) || '';
-  const roomSize = idx(props.room, _ => _.roomSize);
 
   return (
-    <Text>
-      <Text style={styles.title}>
-        <Translation passThrough={`${title} `} />
-      </Text>
-      <RoomSize roomSize={roomSize} />
+    <Text style={styles.title}>
+      <Translation passThrough={`${title} `} />
     </Text>
   );
 }
 
-const RoomSize = ({ roomSize }: { roomSize: ?number }) => {
-  if (roomSize == null) {
-    return null;
-  }
-
-  return (
-    <Text>
-      <TextIcon code="&#xe02e;" style={styles.icon} />
-      <Text style={styles.sizeText}>
-        {/* \u00A0 is &nbsp; */}
-        <Translation passThrough={`\u00A0${roomSize}m²`} />
-      </Text>
-    </Text>
-  );
-};
-
 export default (createFragmentContainer(
   RoomRowTitle,
   graphql`
     fragment RoomRowTitle_room on HotelRoom {
-      roomSize
       description {
         title
       }
@@ -65,12 +44,4 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: defaultTokens.colorTextAttention,
   },
-  icon: {
-    fontSize: 10,
-    color: defaultTokens.colorIconSecondary,
-  },
-  sizeText: {
-    fontSize: 12,
-    color: defaultTokens.colorTextSecondary,
-  },
 });
diff --git a/app/hotels/src/singleHotel/roomList/__generated__/BeddingInfo_room.graphql.js b/app/hotels/src/singleHotel/roomList/__generated__/BeddingInfo_room.graphql.js
index 49e1820d..46d8fa2f 100644
--- a/app/hotels/src/singleHotel/roomList/__generated__/BeddingInfo_room.graphql.js
+++ b/app/hotels/src/singleHotel/roomList/__generated__/BeddingInfo_room.graphql.js
@@ -11,7 +11,6 @@ import type { ConcreteFragment } from 'relay-runtime';
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type BeddingInfo_room$ref: FragmentReference;
 export type BeddingInfo_room = {|
-  +type: ?string,
   +maxPersons: ?number,
   +bedding: ?$ReadOnlyArray<?{|
     +type: ?string,
@@ -22,22 +21,13 @@ export type BeddingInfo_room = {|
 */
 
 
-const node/*: ConcreteFragment*/ = (function(){
-var v0 = {
-  "kind": "ScalarField",
-  "alias": null,
-  "name": "type",
-  "args": null,
-  "storageKey": null
-};
-return {
+const node/*: ConcreteFragment*/ = {
   "kind": "Fragment",
   "name": "BeddingInfo_room",
   "type": "HotelRoom",
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
-    v0,
     {
       "kind": "ScalarField",
       "alias": null,
@@ -54,7 +44,13 @@ return {
       "concreteType": "HotelRoomBedding",
       "plural": true,
       "selections": [
-        v0,
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "type",
+          "args": null,
+          "storageKey": null
+        },
         {
           "kind": "ScalarField",
           "alias": null,
@@ -66,7 +62,6 @@ return {
     }
   ]
 };
-})();
 // prettier-ignore
-(node/*: any*/).hash = 'bae4050720f373f37ddf8934d58ba3b1';
+(node/*: any*/).hash = 'c0c0c0f1049ab0c202880384f2205488';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/roomList/__generated__/RoomDescription_room.graphql.js b/app/hotels/src/singleHotel/roomList/__generated__/RoomDescription_room.graphql.js
deleted file mode 100644
index 016abb6e..00000000
--- a/app/hotels/src/singleHotel/roomList/__generated__/RoomDescription_room.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 RoomDescription_room$ref: FragmentReference;
-export type RoomDescription_room = {|
-  +description: ?{|
-    +text: ?string
-  |},
-  +$refType: RoomDescription_room$ref,
-|};
-*/
-
-
-const node/*: ConcreteFragment*/ = {
-  "kind": "Fragment",
-  "name": "RoomDescription_room",
-  "type": "HotelRoom",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "description",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "HotelRoomDescription",
-      "plural": false,
-      "selections": [
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "text",
-          "args": null,
-          "storageKey": null
-        }
-      ]
-    }
-  ]
-};
-// prettier-ignore
-(node/*: any*/).hash = 'e8d0d5917d3e762e92e344dc27b4d946';
-module.exports = node;
diff --git a/app/hotels/src/singleHotel/roomList/__generated__/RoomRowTitle_room.graphql.js b/app/hotels/src/singleHotel/roomList/__generated__/RoomRowTitle_room.graphql.js
index 8ec97bf5..cfaab893 100644
--- a/app/hotels/src/singleHotel/roomList/__generated__/RoomRowTitle_room.graphql.js
+++ b/app/hotels/src/singleHotel/roomList/__generated__/RoomRowTitle_room.graphql.js
@@ -11,7 +11,6 @@ import type { ConcreteFragment } from 'relay-runtime';
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type RoomRowTitle_room$ref: FragmentReference;
 export type RoomRowTitle_room = {|
-  +roomSize: ?number,
   +description: ?{|
     +title: ?string
   |},
@@ -27,13 +26,6 @@ const node/*: ConcreteFragment*/ = {
   "metadata": null,
   "argumentDefinitions": [],
   "selections": [
-    {
-      "kind": "ScalarField",
-      "alias": null,
-      "name": "roomSize",
-      "args": null,
-      "storageKey": null
-    },
     {
       "kind": "LinkedField",
       "alias": null,
@@ -55,5 +47,5 @@ const node/*: ConcreteFragment*/ = {
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = 'c4cdfeeecc326e0d204dfb5acfdd9a8c';
+(node/*: any*/).hash = '1f0ae1b53499b83972de5c5c85758cd3';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/roomList/__generated__/RoomRow_availableRoom.graphql.js b/app/hotels/src/singleHotel/roomList/__generated__/RoomRow_availableRoom.graphql.js
index 2771614b..ca63b4ec 100644
--- a/app/hotels/src/singleHotel/roomList/__generated__/RoomRow_availableRoom.graphql.js
+++ b/app/hotels/src/singleHotel/roomList/__generated__/RoomRow_availableRoom.graphql.js
@@ -10,7 +10,6 @@
 import type { ConcreteFragment } from 'relay-runtime';
 type BeddingInfo_room$ref = any;
 type RoomBadges_availableRoom$ref = any;
-type RoomDescription_room$ref = any;
 type RoomRowTitle_room$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type RoomRow_availableRoom$ref: FragmentReference;
@@ -31,7 +30,7 @@ export type RoomRow_availableRoom = {|
       |}>
     |},
     +maxPersons: ?number,
-    +$fragmentRefs: RoomRowTitle_room$ref & RoomDescription_room$ref & BeddingInfo_room$ref,
+    +$fragmentRefs: RoomRowTitle_room$ref & BeddingInfo_room$ref,
   |},
   +minimalPrice: ?{|
     +amount: ?number,
@@ -115,11 +114,6 @@ return {
           "name": "RoomRowTitle_room",
           "args": null
         },
-        {
-          "kind": "FragmentSpread",
-          "name": "RoomDescription_room",
-          "args": null
-        },
         {
           "kind": "LinkedField",
           "alias": null,
@@ -219,5 +213,5 @@ return {
 };
 })();
 // prettier-ignore
-(node/*: any*/).hash = '000bcc1f464c21f719de10a01c45a9ac';
+(node/*: any*/).hash = 'f8d9fcc23dd717b8b3474b69391222e8';
 module.exports = node;
diff --git a/app/hotels/src/singleHotel/roomList/formatBeddingInfo.js b/app/hotels/src/singleHotel/roomList/formatBeddingInfo.js
index a8116a3c..70d96a1c 100644
--- a/app/hotels/src/singleHotel/roomList/formatBeddingInfo.js
+++ b/app/hotels/src/singleHotel/roomList/formatBeddingInfo.js
@@ -5,17 +5,12 @@ import idx from 'idx';
 import type { BeddingInfo_room } from './__generated__/BeddingInfo_room.graphql';
 
 export default (room: ?BeddingInfo_room): string => {
-  const type = idx(room, _ => _.type);
   const beddingOptions = idx(room, _ => _.bedding) || [];
-  const bedding = beddingOptions
+  return beddingOptions
     .map(beddingOption => {
       const type = idx(beddingOption, _ => _.type);
       const amount = idx(beddingOption, _ => _.amount);
       return [amount, type].filter(value => value != null).join(' ');
     })
-    .join(' or ');
-
-  return [type, bedding]
-    .filter(value => value !== null && value !== '')
-    .join(' · ');
+    .join(' or '); // TODO: Translate
 };
diff --git a/packages/localization/src/vocabularies/Hotels.js b/packages/localization/src/vocabularies/Hotels.js
index ffea7acd..202c681e 100644
--- a/packages/localization/src/vocabularies/Hotels.js
+++ b/packages/localization/src/vocabularies/Hotels.js
@@ -79,7 +79,7 @@ export default {
   'single_hotel.bedding_info.guests': 'Guests: __numberOfGuests__',
   'single_hotel.book_now': 'Book Now',
   'single_hotel.book_now.description':
-    'Guests: __1_personCount__ · Rooms: __2_numberOfRooms__  · ',
+    '__1_personCount__ Guests · __2_numberOfRooms__ Rooms',
   'single_hotel.description.facilities.show_less': 'Show less',
   'single_hotel.description.facilities.show_more': 'More',
   'single_hotel.hotel_detail_screen.hotel_not_found': 'Hotel not found.',
@@ -88,8 +88,15 @@ export default {
   'single_hotel.room_list.rooms': 'Rooms',
   'single_hotel.room_picker.select': 'Select',
   'single_hotel.powered_by': 'Powered by',
+  'single_hotel.description.description': 'Description',
   'single_hotel.description.show_more': 'Show More',
   'single_hotel.description.show_less': 'Show Less',
   'single_hotel.room_description.read_more': 'Read more',
   'single_hotel.room_description.hide': 'Hide',
+  'single_hotel.hotel_review.reviews': '__count__ Reviews',
+  'single_hotel.hotel_review.rating.6': 'Pleasant',
+  'single_hotel.hotel_review.rating.7': 'Good',
+  'single_hotel.hotel_review.rating.8': 'Very good',
+  'single_hotel.hotel_review.rating.9': 'Perfect',
+  'single_hotel.room_summary.summary': 'Summary',
 };
diff --git a/packages/navigation/index.js b/packages/navigation/index.js
index 9b1a65ef..8ffebdcb 100644
--- a/packages/navigation/index.js
+++ b/packages/navigation/index.js
@@ -56,13 +56,14 @@ export const StackNavigator = (
     [string]: {|
       +screen: mixed,
       +navigationOptions?: {|
-        +headerTitle:
+        +headerTitle?:
           | React.Element<typeof HeaderTitle>
           | null
           | React.Element<typeof Dimensions.Consumer>,
         +headerStyle?: StylePropType,
         +mode?: 'modal',
         +headerTransparent?: boolean,
+        +headerLeft?: Object | null,
       |},
     |},
   },
@@ -93,7 +94,13 @@ export const StackNavigatorOptions = {
 export const createTransparentHeaderStyle = (dim: DimensionType) => {
   if (Platform.OS === 'ios' || Device.isWideLayout(dim)) {
     // normal header on iOS and wide Android
-    return {};
+    return {
+      headerStyle: {
+        backgroundColor: 'transparent',
+        marginTop: 20,
+      },
+      headerTransparent: true,
+    };
   }
 
   return {
diff --git a/packages/playground/src/PlaygroundImports.js b/packages/playground/src/PlaygroundImports.js
index 3f981203..e120978d 100644
--- a/packages/playground/src/PlaygroundImports.js
+++ b/packages/playground/src/PlaygroundImports.js
@@ -2,7 +2,6 @@
 
 import '../../../app/hotels/src/singleHotel/roomPicker/__tests__/RoomPicker.test.js';
 import '../../../app/hotels/src/singleHotel/roomList/__tests__/RoomImage.test.js';
-import '../../../app/hotels/src/singleHotel/roomList/__tests__/RoomDescription.test.js';
 import '../../../app/hotels/src/singleHotel/roomList/__tests__/RoomBadges.test.js';
 import '../../../app/hotels/src/singleHotel/brandLabel/__tests__/BrandLabel.test.js';
 import '../../../app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js';
diff --git a/packages/shared/index.js b/packages/shared/index.js
index 05b13663..aa4f2b1a 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -14,6 +14,7 @@ export { default as Button } from './src/buttons/Button';
 export { default as TextButton } from './src/buttons/TextButton';
 export { default as LinkButton } from './src/buttons/LinkButton';
 export { default as ButtonTitle } from './src/buttons/ButtonTitle';
+export { default as CloseButton } from './src/buttons/CloseButton';
 export {
   default as TouchableWithoutFeedback,
 } from './src/TouchableWithoutFeedback';
diff --git a/packages/shared/src/Color.js b/packages/shared/src/Color.js
index 400dc867..90d7074b 100644
--- a/packages/shared/src/Color.js
+++ b/packages/shared/src/Color.js
@@ -36,14 +36,7 @@ const ColorPalette = {
     transparent: {
       outerSpace: {
         $60: hexToRgba(defaultTokens.paletteInkDark, 0.6), // opacity works differently on RN, we need to keep this
-      },
-    },
-  },
-
-  green: {
-    transparent: {
-      lapalma: {
-        $15: hexToRgba(defaultTokens.paletteGreenNormal, 0.15), // opacity works differently on RN, we need to keep this
+        $54: hexToRgba(defaultTokens.paletteInkDark, 0.54), // opacity works differently on RN, we need to keep this
       },
     },
   },
diff --git a/packages/shared/src/buttons/CloseButton.js b/packages/shared/src/buttons/CloseButton.js
new file mode 100644
index 00000000..e79e6229
--- /dev/null
+++ b/packages/shared/src/buttons/CloseButton.js
@@ -0,0 +1,33 @@
+// @flow strict
+
+import * as React from 'react';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { Translation } from '@kiwicom/mobile-localization';
+
+import Button from './Button';
+import Text from '../Text';
+import StyleSheet from '../PlatformStyleSheet';
+
+type Props = {|
+  +onPress: () => void,
+|};
+
+export default function CloseButton({ onPress }: Props) {
+  return (
+    <Button onPress={onPress} style={styles.button}>
+      <Text style={styles.text}>
+        <Translation id="shared.button.close" />
+      </Text>
+    </Button>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: defaultTokens.paletteCloudNormal,
+  },
+  text: {
+    fontWeight: '800',
+    fontSize: 16,
+  },
+});


Test patch:
diff --git a/app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js b/app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js
index e1f467b1..d31aaf1a 100644
--- a/app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js
+++ b/app/hotels/src/singleHotel/bookNow/__tests__/BookNow.test.js
@@ -24,7 +24,6 @@ it('renders without crashing', () => {
       a: 1,
     },
     availableRooms: [
-      // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
       {
         originalId: 'a',
         incrementalPrice: [
@@ -35,7 +34,6 @@ it('renders without crashing', () => {
         ],
       },
     ],
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
     hotel: {
       originalId: 'abc',
     },
@@ -47,7 +45,7 @@ it('renders without crashing', () => {
     currency: 'EUR',
     navigation,
   };
-
+  // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
   PlaygroundRenderer.render(<BookNow {...props} />);
 });
 
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 69302470..07de415a 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
@@ -1,52 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders without crashing 1`] = `
-<Component
-  style={
-    Object {
-      "backgroundColor": "#00a991",
-      "bottom": 0,
-      "end": 0,
-      "flex": 1,
-      "position": "absolute",
-      "start": 0,
-    }
-  }
+<Button
+  disabled={false}
+  onPress={[Function]}
 >
-  <Touchable
-    accessibilityComponentType="button"
-    accessibilityTraits="button"
-    borderlessRipple={false}
-    disabled={false}
-    onPress={[Function]}
-    rippleColor="rgba(0, 0, 0, .32)"
-  >
-    <BookNowText
-      buttonPriceStyle={
-        Object {
-          "color": "#fff",
-          "fontSize": 12,
-          "textAlign": "center",
-        }
-      }
-      numberOfRooms={1}
-      personCount={2}
-      price={
-        <Price
-          amount={100}
-          currency="EUR"
-          style={
-            Object {
-              "color": "#fff",
-              "fontSize": 12,
-              "textAlign": "center",
-            }
-          }
-        />
+  <Text
+    style={
+      Object {
+        "color": "#fff",
+        "fontSize": 16,
+        "fontWeight": "800",
       }
+    }
+  >
+    <Translation
+      id="single_hotel.book_now"
     />
-  </Touchable>
-</Component>
+  </Text>
+</Button>
 `;
 
-exports[`renders without crashing with missing data 1`] = `null`;
+exports[`renders without crashing with missing data 1`] = `
+<Button
+  disabled={false}
+  onPress={[Function]}
+>
+  <Text
+    style={
+      Object {
+        "color": "#fff",
+        "fontSize": 16,
+        "fontWeight": "800",
+      }
+    }
+  >
+    <Translation
+      id="single_hotel.book_now"
+    />
+  </Text>
+</Button>
+`;
diff --git a/app/hotels/src/singleHotel/bookNow/__tests__/countBookingPrice.test.js b/app/hotels/src/singleHotel/bookNow/__tests__/countBookingPrice.test.js
index d1df6a14..b3991818 100644
--- a/app/hotels/src/singleHotel/bookNow/__tests__/countBookingPrice.test.js
+++ b/app/hotels/src/singleHotel/bookNow/__tests__/countBookingPrice.test.js
@@ -3,7 +3,6 @@
 import countBookingPrice from '../countBookingPrice';
 
 const availableRooms = [
-  // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
   {
     originalId: 'aaa',
     incrementalPrice: [
@@ -17,7 +16,6 @@ const availableRooms = [
       },
     ],
   },
-  // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
   {
     originalId: 'bbb',
     incrementalPrice: [
@@ -52,12 +50,10 @@ it('returns sum of selected rooms', () => {
 
 it('takes a currency from the first selected room', () => {
   const czechRooms = [
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
     {
       originalId: 'aaa',
       incrementalPrice: [],
     },
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
     {
       originalId: 'bbb',
       incrementalPrice: [
diff --git a/app/hotels/src/singleHotel/header/__tests__/Rating.test.js b/app/hotels/src/singleHotel/header/__tests__/Rating.test.js
deleted file mode 100644
index ce570a9a..00000000
--- a/app/hotels/src/singleHotel/header/__tests__/Rating.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import renderer from 'react-test-renderer';
-
-import Rating from '../Rating';
-
-describe('formatRating', () => {
-  it('concats stars, review score and review description', () => {
-    expect(
-      renderer
-        .create(<Rating stars={3} score={8.6} description="Good Enough" />)
-        .toJSON(),
-    ).toMatchSnapshot();
-  });
-
-  it('omits the dash when stars are missing', () => {
-    expect(
-      renderer
-        .create(<Rating score={8.6} description="Good Enough" />)
-        .toJSON(),
-    ).toMatchSnapshot();
-  });
-
-  it('omits the dash when review is missing', () => {
-    expect(renderer.create(<Rating stars={5} />).toJSON()).toMatchSnapshot();
-  });
-});
diff --git a/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap b/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap
deleted file mode 100644
index 87e60f5e..00000000
--- a/app/hotels/src/singleHotel/header/__tests__/__snapshots__/Rating.test.js.snap
+++ /dev/null
@@ -1,211 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`formatRating concats stars, review score and review description 1`] = `
-Array [
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        Object {
-          "letterSpacing": 2,
-        },
-      ]
-    }
-  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
-      ★★★
-    </Text>
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-     - 
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-    8.6 Good Enough
-  </Text>,
-]
-`;
-
-exports[`formatRating omits the dash when review is missing 1`] = `
-Array [
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        Object {
-          "letterSpacing": 2,
-        },
-      ]
-    }
-  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
-      ★★★★★
-    </Text>
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-    
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-    
-  </Text>,
-]
-`;
-
-exports[`formatRating omits the dash when stars are missing 1`] = `
-Array [
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        Object {
-          "letterSpacing": 2,
-        },
-      ]
-    }
-  >
-    <Text
-      accessible={true}
-      allowFontScaling={true}
-      ellipsizeMode="tail"
-    >
-      
-    </Text>
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-    
-  </Text>,
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    style={
-      Array [
-        Object {
-          "color": "#171b1e",
-          "fontFamily": "CircularPro-Book",
-          "fontSize": 14,
-          "fontWeight": "normal",
-          "letterSpacing": -0.15,
-        },
-        undefined,
-      ]
-    }
-  >
-    8.6 Good Enough
-  </Text>,
-]
-`;
diff --git a/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js b/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js
index a4206ebc..e496e859 100644
--- a/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js
+++ b/app/hotels/src/singleHotel/hotelInformation/location/__tests__/Location.test.js
@@ -25,7 +25,6 @@ const hotelId = 'lol-id';
 
 it('renders without crashing', () => {
   const props = {
-    isWide: false,
     hotel: ({
       hotel: 'asdf',
     }: Object),
@@ -42,7 +41,6 @@ it('renders without crashing', () => {
 
 it('renders without crashing with missing data', () => {
   const props = {
-    isWide: false,
     hotel: undefined,
     navigation,
     checkin,
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/RoomDescription.test.js b/app/hotels/src/singleHotel/roomList/__tests__/RoomDescription.test.js
deleted file mode 100644
index cd0e24b0..00000000
--- a/app/hotels/src/singleHotel/roomList/__tests__/RoomDescription.test.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import { PlaygroundRenderer } from '@kiwicom/mobile-playground';
-
-import { RoomDescription } from '../RoomDescription';
-
-describe('RoomDescription', () => {
-  it('renders', () => {
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    const room = {
-      description: {
-        text:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.',
-      },
-    };
-    PlaygroundRenderer.render(<RoomDescription room={room} />);
-  });
-});
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/RoomImage.test.js b/app/hotels/src/singleHotel/roomList/__tests__/RoomImage.test.js
index a0f50792..77850671 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/RoomImage.test.js
+++ b/app/hotels/src/singleHotel/roomList/__tests__/RoomImage.test.js
@@ -9,7 +9,6 @@ describe('RoomImage', () => {
   it('renders', () => {
     PlaygroundRenderer.render(
       <RoomImage
-        photoCount={32}
         openGallery={jest.fn()}
         thumbnailUrl="https://e3.365dm.com/18/05/1600x1200/lionel-messi-barcelona_4322799.jpg?bypass-service-worker&20180528123616"
       />,
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
index e7088093..45897ca9 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RoomBadges renders 1`] = `
-Array [
+<React.Fragment>
   <AdaptableBadge
     icon={
       <TextIcon
-        code=""
-        orbit={false}
+        code=""
+        orbit={true}
         style={
           Object {
-            "alignSelf": "flex-end",
-            "color": "#46B655",
-            "fontSize": 10,
+            "alignSelf": "center",
+            "color": "#0176D2",
+            "fontSize": 12,
             "marginEnd": 5,
           }
         }
@@ -19,14 +19,14 @@ Array [
     }
     style={
       Object {
-        "backgroundColor": "rgba(70, 182, 85, 0.15)",
+        "backgroundColor": "#e0f6ff",
         "marginTop": 5,
       }
     }
     textStyle={
       Object {
-        "color": "#46B655",
-        "fontSize": 10,
+        "color": "#0176D2",
+        "fontSize": 12,
       }
     }
     translation={
@@ -34,17 +34,17 @@ Array [
         id="single_hotel.room_badges.breakfast_included"
       />
     }
-  />,
+  />
   <AdaptableBadge
     icon={
       <TextIcon
-        code="'"
-        orbit={false}
+        code="r"
+        orbit={true}
         style={
           Object {
-            "alignSelf": "flex-end",
-            "color": "#46B655",
-            "fontSize": 10,
+            "alignSelf": "center",
+            "color": "#0176D2",
+            "fontSize": 12,
             "marginEnd": 5,
           }
         }
@@ -52,14 +52,14 @@ Array [
     }
     style={
       Object {
-        "backgroundColor": "rgba(70, 182, 85, 0.15)",
+        "backgroundColor": "#e0f6ff",
         "marginTop": 5,
       }
     }
     textStyle={
       Object {
-        "color": "#46B655",
-        "fontSize": 10,
+        "color": "#0176D2",
+        "fontSize": 12,
       }
     }
     translation={
@@ -67,6 +67,6 @@ Array [
         id="single_hotel.room_badges.free_cancellation"
       />
     }
-  />,
-]
+  />
+</React.Fragment>
 `;
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap
deleted file mode 100644
index 978adf4f..00000000
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomDescription.test.js.snap
+++ /dev/null
@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RoomDescription renders 1`] = `
-<Component>
-  <Component
-    style={
-      Object {
-        "backgroundColor": "#f5f7f9",
-        "height": 1,
-        "marginVertical": 6,
-      }
-    }
-  />
-  <ReadMore
-    numberOfLines={2}
-    revealedText={
-      <Translation
-        id="single_hotel.room_description.hide"
-      />
-    }
-    style={
-      Object {
-        "color": "#00a991",
-        "fontSize": 12,
-        "fontWeight": "600",
-      }
-    }
-    truncatedText={
-      <Translation
-        id="single_hotel.room_description.read_more"
-      />
-    }
-  >
-    <Text
-      style={
-        Object {
-          "color": "#171b1e",
-          "fontSize": 12,
-        }
-      }
-    >
-      <Translation
-        passThrough="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec."
-      />
-    </Text>
-  </ReadMore>
-</Component>
-`;
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
index 87a623fa..3376a624 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomImage.test.js.snap
@@ -35,22 +35,16 @@ exports[`RoomImage renders 1`] = `
       }
     >
       <GalleryButton
-        count={32}
+        count={null}
         style={
           Object {
             "container": Object {
               "alignItems": "center",
-              "backgroundColor": "rgba(0, 0, 0, 0.3)",
               "borderRadius": 0,
               "justifyContent": "center",
-              "paddingVertical": 4,
             },
             "icon": Object {
-              "height": 10,
-              "width": 10,
-            },
-            "text": Object {
-              "fontSize": 10,
+              "fontSize": 16,
             },
           }
         }
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
index 77092b69..53961866 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`doesn't crash on empty input 1`] = `"Some Room"`;
+exports[`doesn't crash on empty input 1`] = `""`;
 
-exports[`formats bedding information 1`] = `"Single Room · 1 Single Bed(s)"`;
+exports[`formats bedding information 1`] = `"1 Single Bed(s)"`;
 
-exports[`pluralizes persons 1`] = `"Double Room · 2 Single Bed(s)"`;
+exports[`pluralizes persons 1`] = `"2 Single Bed(s)"`;
 
-exports[`provides all bedding options 1`] = `"Double or Twin Room · 2 Single Bed(s) or 1 Twin Bed(s)"`;
+exports[`provides all bedding options 1`] = `"2 Single Bed(s) or 1 Twin Bed(s)"`;