diff --git a/app/components/About.jsx b/app/components/About.jsx
index e714dea..66d9a86 100644
--- a/app/components/About.jsx
+++ b/app/components/About.jsx
@@ -1,11 +1,17 @@
 var React = require('react');
 
-var About = React.createClass({
-  render: function (){
-    return (
-      <h3>About Component</h3>
-    );
-  }
-});
+// var About = React.createClass({
+//   render: function (){
+//     return (
+//       <h3>About Component</h3>
+//     );
+//   }
+// });
+
+var About = (props) => {
+  return (
+    <h3>About Component</h3>
+  );
+};
 
 module.exports = About;
diff --git a/app/components/Examples.jsx b/app/components/Examples.jsx
index 9e80c09..acb697b 100644
--- a/app/components/Examples.jsx
+++ b/app/components/Examples.jsx
@@ -1,11 +1,16 @@
 var React = require('react');
 
-var Examples = React.createClass({
-  render: function () {
-    return (
-      <h3>Examples Component</h3>
-    );
-  }
-});
+// var Examples = React.createClass({
+//   render: function () {
+//     return (
+//       <h3>Examples Component</h3>
+//     );
+//   }
+// });
 
+var Examples = () => {
+  return (
+    <h3>Examples Component</h3>
+  );
+};
 module.exports = Examples;
diff --git a/app/components/Main.jsx b/app/components/Main.jsx
index f09d630..63350ca 100644
--- a/app/components/Main.jsx
+++ b/app/components/Main.jsx
@@ -1,17 +1,28 @@
 var React = require('react');
 var Nav = require('Nav');
 
-var Main = React.createClass({
-  render: function () {
-    return (
-      <div>
-        <Nav/>
-        <h2>Main Component</h2>
-        {this.props.children}
-      </div>
+// var Main = React.createClass({
+//   render: function () {
+//     return (
+//       <div>
+//         <Nav/>
+//         <h2>Main Component</h2>
+//         {this.props.children}
+//       </div>
+//
+//     );
+//   }
+// });
 
-    );
-  }
-});
+var Main = (props) => {
+  return (
+    <div>
+      <Nav/>
+      <h2>Main Component</h2>
+      {props.children}
+    </div>
+
+  );
+};
 
 module.exports = Main;
diff --git a/app/components/Nav.jsx b/app/components/Nav.jsx
index 84c9be7..1bff690 100644
--- a/app/components/Nav.jsx
+++ b/app/components/Nav.jsx
@@ -1,17 +1,27 @@
 var React = require('react');
 var {Link, IndexLink} = require('react-router');
 
-var Nav = React.createClass({
-  render: function (){
-    return (
-      <div>
-        <h2>Nav Component</h2>
-        <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
-        <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
-        <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
-      </div>
-    );
-  }
-});
+// var Nav = React.createClass({
+//   render: function (){
+//     return (
+//       <div>
+//         <h2>Nav Component</h2>
+//         <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
+//         <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
+//         <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
+//       </div>
+//     );
+//   }
+// });
 
+var Nav = () => {
+  return (
+    <div>
+      <h2>Nav Component</h2>
+      <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Get Weather</IndexLink>
+      <Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> About</Link>
+      <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}> Examples</Link>
+    </div>
+  );
+};
 module.exports = Nav;
diff --git a/app/components/Weather.jsx b/app/components/Weather.jsx
index fcf383d..909b321 100644
--- a/app/components/Weather.jsx
+++ b/app/components/Weather.jsx
@@ -11,7 +11,7 @@ var Weather = React.createClass({
   },
   handleSearch: function (location) {
     var that = this;
-
+    
     this.setState({isLoading: true});
 
     openWeatherMap.getTemp(location).then(function (temp) {
diff --git a/app/components/WeatherMessage.jsx b/app/components/WeatherMessage.jsx
index e7f09a7..b6f74b6 100644
--- a/app/components/WeatherMessage.jsx
+++ b/app/components/WeatherMessage.jsx
@@ -1,13 +1,28 @@
 var React = require('react');
 
-var WeatherMessage = React.createClass({
-  render: function () {
-    var {temp, location} = this.props;
+// var WeatherMessage = React.createClass({
+//   render: function () {
+//     var {temp, location} = this.props;
+//
+//     return (
+//       <h3>It's it {temp} in {location}.</h3>
+//     )
+//   }
+// });
 
-    return (
-      <h3>It's it {temp} in {location}.</h3>
-    )
-  }
-});
+// Refactoring stateless function
+
+// var WeatherMessage = (props) => {
+//   var {temp, location} = props;
+//   return (
+//     <h3>It's it {temp} in {location}.</h3>
+//   )
+// };
+// (or)
+var WeatherMessage = ({temp, location}) => {
+  return (
+    <h3>It's it {temp} in {location}.</h3>
+  )
+};
 
 module.exports = WeatherMessage;
diff --git a/example-arrow-functions.js b/example-arrow-functions.js
new file mode 100644
index 0000000..5abe3c8
--- /dev/null
+++ b/example-arrow-functions.js
@@ -0,0 +1,33 @@
+/**
+ * @file
+ * Provides example arrow-function functionality.
+ */
+
+// var names = ['Swapna', 'Raghu', 'Ram'];
+
+// names.forEach(function (name) {
+//   console.log('forEach', name);
+// });
+
+// names.forEach((name) => {
+//   console.log('arrowFunc', name);
+// });
+
+// names.forEach((name) => console.log(name));
+
+//anonymous function 
+function add (a,b) {
+	return a+b ;
+}
+
+console.log(add(1,3));
+
+//Arrow function: addStatement {for multiple lines}
+var addStatement = (a,b) => {
+	return a + b;
+}
+console.log(addStatement(5,6));
+
+//Arrow function: addExpression {for single line / expression }
+var addExpression = (a,b) => a + b ;
+console.log(addExpression(5,-3));
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 8926255..e4f4650 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -29,5 +29,6 @@ module.exports = {
         exclude: /(node_modules|bower_components)/
       }
     ]
-  }
+  },
+  devtool: 'cheap-module-eval-source-map'
 };