diff --git a/assets/config/now.json b/assets/config/now.json
index a1b23b9..f437910 100644
--- a/assets/config/now.json
+++ b/assets/config/now.json
@@ -2039,7 +2039,7 @@
       "setIdx": 0,
       "setId": 2,
       "iconIdx": 97
-    }
+    },
   ],
   "height": 1024,
   "metadata": { "name": "icomoon" },
diff --git a/assets/imgs/MauiThumbnail.jpeg b/assets/imgs/MauiThumbnail.jpeg
new file mode 100644
index 0000000..1958bcb
Binary files /dev/null and b/assets/imgs/MauiThumbnail.jpeg differ
diff --git a/assets/imgs/SanDiegoSkyline.jpg b/assets/imgs/SanDiegoSkyline.jpg
new file mode 100644
index 0000000..074458f
Binary files /dev/null and b/assets/imgs/SanDiegoSkyline.jpg differ
diff --git a/assets/imgs/SanDiegoThumbnail.jpg b/assets/imgs/SanDiegoThumbnail.jpg
new file mode 100644
index 0000000..3c7e803
Binary files /dev/null and b/assets/imgs/SanDiegoThumbnail.jpg differ
diff --git a/assets/imgs/SantaTeresaThumbnail.jpeg b/assets/imgs/SantaTeresaThumbnail.jpeg
new file mode 100644
index 0000000..857c56c
Binary files /dev/null and b/assets/imgs/SantaTeresaThumbnail.jpeg differ
diff --git a/assets/imgs/surf-background.png b/assets/imgs/surf-background.png
new file mode 100644
index 0000000..365ee1f
Binary files /dev/null and b/assets/imgs/surf-background.png differ
diff --git a/assets/imgs/surf-nomad-logo.png b/assets/imgs/surf-nomad-logo.png
new file mode 100644
index 0000000..f0af2e4
Binary files /dev/null and b/assets/imgs/surf-nomad-logo.png differ
diff --git a/assets/imgs/taghazoutThumbnail.png b/assets/imgs/taghazoutThumbnail.png
new file mode 100644
index 0000000..e09ccd8
Binary files /dev/null and b/assets/imgs/taghazoutThumbnail.png differ
diff --git a/components/Card.js b/components/Card.js
index 8d8253a..5defbee 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -51,7 +51,8 @@ class Card extends React.Component {
                 <Block flex center>
                   <Text
                     style={{ fontFamily: 'montserrat-regular' }}
-                    size={32}
+                    size={14}
+                    style={styles.cardDetails}
                     color={nowTheme.COLORS.BLACK}
                   >
                     {item.subtitle}
@@ -60,6 +61,58 @@ class Card extends React.Component {
               ) : (
                   <Block />
                 )}
+              {item.popularity ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Popularity: {item.popularity}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.cost ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Wallet damage: {item.cost}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.bestSeason ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Season: {item.bestSeason}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
+              {item.skillLevel ? (
+                <Block flex>
+                  <Text
+                    style={styles.cardDetails}
+                    size={14}
+                    color={nowTheme.COLORS.BLACK}
+                  >
+                    Skill level: {item.skillLevel}
+                  </Text>
+                </Block>
+              ) : (
+                  <Block />
+                )}
               {item.description ? (
                 <Block flex center>
                   <Text
@@ -126,8 +179,10 @@ const styles = StyleSheet.create({
   },
   cardTitle: {
     paddingHorizontal: 9,
-    paddingTop: 7,
-    paddingBottom: 15
+    fontWeight: 'bold'
+  },
+  cardDetails: {
+    paddingHorizontal: 9,
   },
   cardDescription: {
     padding: theme.SIZES.BASE / 2
diff --git a/components/DrawerItem.js b/components/DrawerItem.js
index f0d61f4..f5319d3 100644
--- a/components/DrawerItem.js
+++ b/components/DrawerItem.js
@@ -20,6 +20,36 @@ class DrawerItem extends React.Component {
             style={{ opacity: 0.5 }}
           />
         );
+      case "Surf Buddies":
+        return (
+          <Icon
+            name="user-run2x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
+      case "Your Trips":
+        return (
+          <Icon
+            name="calendar-602x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
+      case "Destinations":
+        return (
+          <Icon
+            name="world2x"
+            family="NowExtra"
+            size={18}
+            color={focused ? nowTheme.COLORS.PRIMARY : "white"}
+            style={{ opacity: 0.5 }}
+          />
+        );
       case "Components":
         return (
           <Icon
diff --git a/constants/Images.js b/constants/Images.js
index 9f0ba68..4437e22 100644
--- a/constants/Images.js
+++ b/constants/Images.js
@@ -1,10 +1,12 @@
 // local imgs
-const Onboarding = require('../assets/imgs/getPro-bg-1.png');
+// const Onboarding = require('../assets/imgs/getPro-bg-1.png');
+const Onboarding = require('../assets/imgs/surf-background.png');
 const Logo = require('../assets/imgs/now-logo.png');
 const ProfileBackground = require('../assets/imgs/bg5.png');
 const RegisterBackground = require('../assets/imgs/register-bg.png');
 const Pro = require('../assets/imgs/bg.png');
 const NowLogo = require('../assets/imgs/now-logo.png');
+const SurfNomadLogo = require('../assets/imgs/surf-nomad-logo.png');
 const iOSLogo = require('../assets/imgs/ios.png');
 const androidLogo = require('../assets/imgs/android.png');
 const ProfilePicture = require('../assets/imgs/profile-img.jpg');
@@ -35,6 +37,7 @@ export default {
   Pro,
   Products,
   NowLogo: NowLogo,
+  SurfNomadLogo: SurfNomadLogo,
   iOSLogo,
   androidLogo,
   CreativeTimLogo,
diff --git a/constants/destinations.js b/constants/destinations.js
new file mode 100644
index 0000000..040b1ff
--- /dev/null
+++ b/constants/destinations.js
@@ -0,0 +1,56 @@
+export default [
+  {
+    title: 'Bali',
+    image: require("../assets/imgs/project13.jpg"),
+    // subtitle: 'Indonesia',
+    bestSeason: 'Nov-Mar',
+    cost: '$',
+    popularity: 'Zood out',
+    description: '',
+    skillLevel: 'All',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Taghazout',
+    image: require("../assets/imgs/taghazoutThumbnail.png"),
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Maui',
+    image: require("../assets/imgs/MauiThumbnail.jpeg"),
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'Santa Teresa',
+    image: require("../assets/imgs/SantaTeresaThumbnail.jpeg"),
+    bestSeason: 'Jan-Apr',
+    cost: '$$',
+    popularity: 'Moderate',
+    description: '',
+    skillLevel: 'All',
+    subtitle: '',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+  {
+    title: 'San Diego',
+    image: require("../assets/imgs/SanDiegoSkyline.jpg"),
+    subtitle: '',
+    bestSeason: 'Nov-Mar',
+    cost: '$$$',
+    popularity: 'Moderate',
+    description: '',
+    skillLevel: 'All',
+    description: '',
+    cta: 'Read more',
+    horizontal: true
+  },
+];
diff --git a/navigation/Menu.js b/navigation/Menu.js
index feec5aa..8efdf30 100644
--- a/navigation/Menu.js
+++ b/navigation/Menu.js
@@ -26,10 +26,13 @@ function CustomDrawerContent({
 }) {
   const insets = useSafeArea();
   const screens = [
+    "Destinations",
+    "Surf Buddies",
+    "Your Trips",
+    "Profile",
     "Home",
     "Components",
     "Articles",
-    "Profile",
     "Account",
   ];
   return (
@@ -38,7 +41,7 @@ function CustomDrawerContent({
       forceInset={{ top: "always", horizontal: "never" }}
     >
       <Block style={styles.header}>
-        <Image style={styles.logo} source={Images.Logo} />
+        <Image style={styles.logo} source={Images.SurfNomadLogo} />
         <Block right style={styles.headerIcon}>
           <Icon
             name="align-left-22x"
diff --git a/navigation/Screens.js b/navigation/Screens.js
index 480a0ae..8774c4a 100644
--- a/navigation/Screens.js
+++ b/navigation/Screens.js
@@ -11,6 +11,7 @@ import Profile from '../screens/Profile';
 import Register from '../screens/Register';
 import Components from '../screens/Components';
 import Articles from '../screens/Articles';
+import Destinations from '../screens/Destinations';
 import Onboarding from '../screens/Onboarding';
 import SettingsScreen from '../screens/Settings';
 // drawer
@@ -35,6 +36,17 @@ function ComponentsStack(props) {
   );
 }
 
+function DestinationsStack(props) {
+  return (
+    <Stack.Navigator initialRouteName="Destinations" mode="card" headerMode="screen">
+      <Stack.Screen name="Destinations" component={Destinations} options={{
+        header:({ navigation, scene }) => (<Header title="Destinations" navigation={navigation} scene={scene} />),
+        backgroundColor: "#FFFFFF"
+      }}/>
+    </Stack.Navigator>
+  );
+}
+
 function ArticlesStack(props) {
   return (
     <Stack.Navigator initialRouteName="Articles" mode="card" headerMode="screen">
@@ -178,8 +190,9 @@ function AppStack(props) {
           fontWeight: "normal"
         }
       }}
-      initialRouteName="Home"
+      initialRouteName="Destinations"
     >
+      <Drawer.Screen name="Destinations" component={DestinationsStack} />
       <Drawer.Screen name="Home" component={HomeStack} />
       <Drawer.Screen name="Components" component={ComponentsStack} />
       <Drawer.Screen name="Articles" component={ArticlesStack} />
diff --git a/screens/Destinations.js b/screens/Destinations.js
new file mode 100644
index 0000000..9765a49
--- /dev/null
+++ b/screens/Destinations.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { StyleSheet, Dimensions, ScrollView, Keyboard } from "react-native";
+import { Block, theme, Text } from "galio-framework";
+
+import { Card, Button } from "../components";
+import articles from "../constants/articles";
+import destinations from "../constants/destinations";
+import Input from '../components/Input';
+import Icon from '../components/Icon';
+
+const { width } = Dimensions.get("screen");
+
+class Home extends React.Component {
+  renderArticles = () => {
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.destinations}
+      >
+        <Block flex>
+        <Card item={destinations[0]} horizontal />
+          <Block flex row>
+            <Card
+              item={destinations[1]}
+              style={{ marginRight: theme.SIZES.BASE }}
+            />
+            <Card item={destinations[2]} />
+          </Block>
+          <Card item={destinations[3]} horizontal />
+          <Card item={destinations[4]} full />
+        </Block>
+      </ScrollView>
+    );
+  };
+
+  render() {
+    return (
+      <Block flex center style={styles.home}>
+        <Block center width="80%">
+          {this.renderSearch()}
+        </Block>
+        {this.renderArticles()}
+      </Block>
+    );
+  }
+  renderSearch = () => {
+    const { navigation } = this.props;
+    return (
+      <Input
+        right
+        color="black"
+        style={styles.search}
+        placeholder="Where to?"
+        placeholderTextColor={'#8898AA'}
+        // onFocus={() => {Keyboard.dismiss(); navigation.navigate('Pro')}}
+        iconContent={
+          <Icon size={16} color={theme.COLORS.MUTED} name="zoom-bold2x" family="NowExtra" />
+        }
+      />
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  home: {
+    width: width
+  },
+  destinations: {
+    width: width - theme.SIZES.BASE * 2,
+    paddingVertical: theme.SIZES.BASE,
+    paddingHorizontal: 2,
+    fontFamily: 'montserrat-regular'
+
+  }
+});
+
+export default Home;
diff --git a/screens/Onboarding.js b/screens/Onboarding.js
index 70b0a16..e60c97e 100644
--- a/screens/Onboarding.js
+++ b/screens/Onboarding.js
@@ -16,12 +16,12 @@ export default class Onboarding extends React.Component {
         <Block flex>
           <ImageBackground
             source={Images.Onboarding}
-            style={{ flex: 1, height: height, width, zIndex: 1 }}
+            style={{ flex: 1, height: '106%', width, zIndex: 1 }}
           />
           <Block space="between" style={styles.padded}>
             <Block>
               <Block middle>
-                <Image source={Images.NowLogo} style={{ width: 115, height: 124, bottom: 200, position: 'absolute' }} />
+                <Image source={Images.SurfNomadLogo} style={{ width: 115, height: 124, bottom: 200, position: 'absolute' }} />
               </Block>
               <Block>
                 <Block middle>
@@ -29,30 +29,30 @@ export default class Onboarding extends React.Component {
                     style={{
                       fontFamily: 'montserrat-regular', bottom: 50, position: 'absolute', letterSpacing: 2, paddingHorizontal: 20, textAlign: 'center'
                     }}
-                    color="white"
+                    color="black"
                     size={44}
                   >
-                    Now UI
-                    React Native
+                    Surf
+                    Nomad
                   </Text>
                 </Block>
               </Block>
-              <Block middle row>
+              <Block middle row height="20%">
                 <Text
-                  color="white"
+                  color="black"
                   size={16}
                   style={{ fontFamily: 'montserrat-regular' }}
                 >
-                  Designed by
+                  Plan your epic surf trip
                 </Text>
-                <Image
+                {/* <Image
                   source={Images.InvisionLogo}
                   style={{
                     height: 28,
                     width: 91,
                     marginLeft: theme.SIZES.BASE
                   }}
-                />
+                /> */}
               </Block>
               <Block middle row style={{ marginTop: 15, marginBottom: 30}}>
                 <Text
@@ -60,16 +60,16 @@ export default class Onboarding extends React.Component {
                   size={16}
                   style={{ fontFamily: 'montserrat-regular' }}
                 >
-                  Coded by
+                  
                 </Text>
-                <Image
+                {/* <Image
                   source={Images.CreativeTimLogo}
                   style={{
                     height: 29,
                     width: 129,
                     marginLeft: theme.SIZES.BASE
                   }}
-                />
+                /> */}
               </Block>
 
               <Block
@@ -82,14 +82,14 @@ export default class Onboarding extends React.Component {
                 <Button
                   shadowless
                   style={styles.button}
-                  color={nowTheme.COLORS.PRIMARY}
+                  color={"black"}
                   onPress={() => navigation.navigate('App')}
                 >
                   <Text
                     style={{ fontFamily: 'montserrat-bold', fontSize: 14 }}
                     color={theme.COLORS.WHITE}
                   >
-                    GET STARTED
+                    GO SURFING
                   </Text>
                 </Button>
               </Block>