diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..abd6f01
Binary files /dev/null and b/.DS_Store differ
diff --git a/App.js b/App.js
index ba944b2..34d11f2 100644
--- a/App.js
+++ b/App.js
@@ -5,6 +5,8 @@ import { createBottomTabNavigator } from "react-navigation";
 import About from "./components/About";
 import Search from "./components/Search";
 
+import globalStyles from "./Styles";
+
 const Tabs = createBottomTabNavigator(
   {
     About: About,
@@ -19,7 +21,7 @@ const Tabs = createBottomTabNavigator(
         textAlignVertical: "center"
       },
       style: {
-        backgroundColor: "#199BB4",
+        backgroundColor: globalStyles.color,
         height: 30
       }
     }
@@ -40,6 +42,6 @@ export default class App extends React.Component {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#B5E0D8"
+    backgroundColor: globalStyles.greenColor
   }
 });
diff --git a/Styles.js b/Styles.js
index 33759de..7b8cacb 100644
--- a/Styles.js
+++ b/Styles.js
@@ -1,8 +1,12 @@
 const blue = "#199BB4";
-const green = "#B5E0D8";
+//const green = "#B5E0D8";
+const greenDark = "#00b386";
+const green = "#00cc99";
 
 export default {
-  color: blue,
+  greenColor: green,
+  blueColor: blue,
+  color: greenDark,
   container: {
     margin: 20,
     backgroundColor: green
@@ -13,7 +17,7 @@ export default {
     textAlign: "center"
   },
   button: {
-    backgroundColor: blue,
+    backgroundColor: greenDark,
     color: "#FFFFFF"
   },
   input: {
@@ -24,20 +28,9 @@ export default {
     paddingHorizontal: 10
   },
   header: {
-    backgroundColor: blue
+    backgroundColor: greenDark
   },
   headerTitle: {
     color: "#FFF"
   }
 };
-
-/*
-const styles = StyleSheet.create({
-  view: {
-    margin: 20,
-    marginTop: 50,
-    backgroundColor: "#B5E0D8"
-  }
-});
-
-*/
diff --git a/components/About.js b/components/About.js
index a1147e7..8cae8d8 100644
--- a/components/About.js
+++ b/components/About.js
@@ -32,7 +32,7 @@ const style = StyleSheet.create({
   view: {
     margin: 20,
     marginTop: 50,
-    backgroundColor: "#B5E0D8"
+    backgroundColor: globalStyles.color
   }
 });
 
diff --git a/components/Result.js b/components/Result.js
index 5c7fcbe..41bde89 100644
--- a/components/Result.js
+++ b/components/Result.js
@@ -9,24 +9,21 @@ import globalStyles from "../Styles";
 
 class Result extends Component {
   static navigationOptions = ({ navigation }) => {
-    //console.log("PARAMS : ", params);
-    /*return {
-      title: `Weather in / ${navigation.state.params.city}`
-    };*/
+    return {
+      title: `Weather in ${navigation.state.params.city}`
+    };
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      city: "Sofia", //this.props.navigation.state.params.city,
+      city: this.props.navigation.state.params.city,
       report: null
     };
-    console.log("CONSTRUCTOR");
-    this.fetchWeather();
   }
 
   componentDidMount = () => {
-    console.log("MOUNTED: ", this.state.report);
+    this.fetchWeather();
   };
 
   fetchWeather = () => {
@@ -34,10 +31,9 @@ class Result extends Component {
       .get(
         `http://api.openweathermap.org/data/2.5/forecast?q=${
           this.state.city
-        }&mode=json&units=metric&cnt=12&APPID=7ad755a5c950ed324a9376b774cd75db`
+        }&mode=json&units=metric&APPID=7ad755a5c950ed324a9376b774cd75db`
       )
       .then(response => {
-        console.log(response.data);
         this.setState({
           report: response.data
         });
@@ -49,14 +45,12 @@ class Result extends Component {
     if (this.state.report === null) {
       return <ActivityIndicator color={globalStyles.color} size="large" />;
     } else {
-      console.log("REPORT: ", this.state.report.list);
-      console.log("type", typeof this.state.report.list);
-      this.state.report.list.map(row => console.log(row.main.temp));
       return (
         <FlatList
           data={this.state.report.list}
-          renderItem={(row, ind, sep) => (
-            <WeatherRow day={row} key={ind} hi={ind} />
+          keyExtractor={item => item.dt}
+          renderItem={({ item, index }) => (
+            <WeatherRow day={item} index={index} key={item.dt.toString()} />
           )}
         />
       );
diff --git a/components/Search.js b/components/Search.js
index 4b55aa4..ac7cb34 100644
--- a/components/Search.js
+++ b/components/Search.js
@@ -34,6 +34,9 @@ class Search extends Component {
           onChangeText={text => {
             this.setCity(text);
           }}
+          onSubmitEditing={text => {
+            this.setCity(text);
+          }}
           underlineColorAndroid="transparent"
           style={globalStyles.input}
           value={this.state.city}
@@ -54,12 +57,12 @@ const navigationOptions = {
 };
 
 export default createStackNavigator({
-  Result: {
-    screen: Result,
-    navigationOptions
-  },
   Search: {
     screen: Search,
     navigationOptions
+  },
+  Result: {
+    screen: Result,
+    navigationOptions
   }
 });
diff --git a/components/animation/FadeInView.js b/components/animation/FadeInView.js
new file mode 100644
index 0000000..7351f70
--- /dev/null
+++ b/components/animation/FadeInView.js
@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+import { Animated, Dimensions } from "react-native";
+
+class FadeInView extends Component {
+  constructor(props) {
+    super(props);
+    let { width } = Dimensions.get("window");
+
+    this.state = {
+      pan: new Animated.ValueXY({ x: width, y: 0 })
+    };
+  }
+
+  componentDidMount() {
+    Animated.sequence([
+      Animated.delay(this.props.delay),
+      Animated.spring(this.state.pan, {
+        toValue: { x: 0, y: 0 }
+      })
+    ]).start();
+  }
+
+  render() {
+    return (
+      <Animated.View
+        style={{
+          ...this.props.style,
+          transform: this.state.pan.getTranslateTransform()
+        }}
+      >
+        {this.props.children}
+      </Animated.View>
+    );
+  }
+}
+
+export default FadeInView;
diff --git a/components/weather/WeatherRow.js b/components/weather/WeatherRow.js
index 64f575b..7219efd 100644
--- a/components/weather/WeatherRow.js
+++ b/components/weather/WeatherRow.js
@@ -1,5 +1,12 @@
 import React, { Component, PropTypes } from "react";
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, Image } from "react-native";
+import moment from "moment";
+import "moment/locale/fr";
+
+import globalStyles from "../../Styles";
+import FadeInView from "../animation/FadeInView";
+
+moment.locale("fr");
 
 class WeatherRow extends Component {
   /*static propTypes = {
@@ -12,13 +19,102 @@ class WeatherRow extends Component {
     console.log("PROPS KEY:", props);
   }
 
+  day = () => {
+    const day = moment(this.props.day.dt * 1000).format("ddd");
+    return <Text style={styles.bold}>{day.toUpperCase()}</Text>;
+  };
+
+  date = () => {
+    const date = moment(this.props.day.dt * 1000).format("DD/MM");
+    return <Text>{date}</Text>;
+  };
+
+  icon = (size = 50) => {
+    const typeWeather = this.props.day.weather[0].main.toLowerCase();
+
+    let image = null;
+    switch (typeWeather) {
+      case "clouds":
+        image = require("../../resources/icons/cloud.png");
+        break;
+      case "rain":
+        image = require("../../resources/icons/rain.png");
+        break;
+      default:
+        image = require("../../resources/icons/sun.jpg");
+        break;
+    }
+
+    return <Image source={image} style={{ width: size, height: size }} />;
+  };
+
   render() {
-    return (
-      <View>
-        <Text>{this.props.day.item.main.temp} °C</Text>
-      </View>
-    );
+    if (this.props.index === 0) {
+      return (
+        <FadeInView delay={this.props.index * 50}>
+          <View style={[styles.view, styles.flex, styles.firstView]}>
+            <View>
+              <Text style={{ color: "#FFF" }}>
+                {this.day()} {this.date()}{" "}
+              </Text>
+              {this.icon(90)}
+            </View>
+            <Text style={[styles.temp, { fontSize: 35 }]}>
+              {Math.round(this.props.day.main.temp)} °C
+            </Text>
+          </View>
+        </FadeInView>
+      );
+    } else {
+      return (
+        <FadeInView delay={this.props.index * 50}>
+          <View style={[styles.view, styles.flex]}>
+            <View style={styles.flex}>
+              {this.icon()}
+
+              <Text style={{ marginLeft: 20 }}>
+                {this.day()} {this.date()}{" "}
+              </Text>
+            </View>
+            <Text style={styles.temp}>
+              {Math.round(this.props.day.main.temp)} °C
+            </Text>
+          </View>
+        </FadeInView>
+      );
+    }
   }
 }
 
+const styles = StyleSheet.create({
+  white: {
+    color: "#FFF"
+  },
+  bold: {
+    fontWeight: "bold"
+  },
+  flex: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  firstView: {
+    backgroundColor: globalStyles.blueColor
+  },
+  view: {
+    backgroundColor: globalStyles.greenColor,
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: "#055864",
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    justifyContent: "space-between"
+  },
+  temp: {
+    color: "#FFF",
+    fontWeight: "bold",
+    fontSize: 22
+  }
+});
+
 export default WeatherRow;
diff --git a/package.json b/package.json
index af24f81..4827bd7 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "expo": "^27.0.1",
+    "moment": "^2.22.2",
     "react": "16.3.1",
     "react-native": "~0.55.2",
     "react-navigation": "^2.6.0"
diff --git a/resources/.DS_Store b/resources/.DS_Store
new file mode 100644
index 0000000..1ce63cf
Binary files /dev/null and b/resources/.DS_Store differ
diff --git a/resources/icons/cloud.png b/resources/icons/cloud.png
new file mode 100644
index 0000000..588f2f2
Binary files /dev/null and b/resources/icons/cloud.png differ
diff --git a/resources/icons/rain.png b/resources/icons/rain.png
new file mode 100644
index 0000000..3fa8ae9
Binary files /dev/null and b/resources/icons/rain.png differ
diff --git a/resources/icons/sun.jpg b/resources/icons/sun.jpg
new file mode 100644
index 0000000..1acc3f5
Binary files /dev/null and b/resources/icons/sun.jpg differ
diff --git a/yarn.lock b/yarn.lock
index 3535702..671878e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4750,7 +4750,7 @@ mkdirp@*, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment@2.x.x, moment@^2.10.6:
+moment@2.x.x, moment@^2.10.6, moment@^2.22.2:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"