diff --git a/package-lock.json b/package-lock.json
index c8d297b..9de8fc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13050,6 +13050,15 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
       "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
     },
+    "query-string": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.2.0.tgz",
+      "integrity": "sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
     "querystring": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -15103,6 +15112,11 @@
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
       "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
     },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+    },
     "string-length": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
diff --git a/package.json b/package.json
index 4f77e84..d5521fe 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.18.0",
     "normalize": "^0.3.1",
     "normalize.css": "^8.0.1",
+    "query-string": "^6.2.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-router-dom": "^4.3.1",
diff --git a/src/Forecast.js b/src/Forecast.js
index 712ff30..a42d38a 100644
--- a/src/Forecast.js
+++ b/src/Forecast.js
@@ -1,11 +1,39 @@
 import React, { Component } from 'react';
-// import { Link } from 'react-router-dom';
+import queryString from 'query-string';
+// components
+import api  from './utils/api';
 
 class Forecast extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            location: null,
+            loading: true,
+        }
+    }
+    componentDidMount() {
+        var location = queryString.parse(this.props.location.search);
+        this.setState(_ => {
+            return {
+                location: location,
+                loading: false,
+            }
+        });
+    }
     render() {
+        var location = this.state.location;
+        var loading = this.state.loading;
+
+        if(loading === true) {
+            return <div>loading...</div>
+        }
         return (
+
+
             <div className="container">
-                Forecast Component
+                {/* {JSON.stringify(location["city"])} */}
+                {JSON.stringify(api.fetchCurrentWeather(location["city"]))}
             </div>
         )
     }
diff --git a/src/LocationInput.js b/src/LocationInput.js
index 051d737..9e88f43 100644
--- a/src/LocationInput.js
+++ b/src/LocationInput.js
@@ -3,7 +3,6 @@ import { BrowserRouter as Router, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 // components
-import api  from './utils/api';
 
 
 class LocationInput extends Component {
diff --git a/src/utils/api.js b/src/utils/api.js
index 1f9f571..7122e9c 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -9,8 +9,10 @@ module.exports = {
         var link = window.encodeURI(baseURL + "weather?q=" + location + params);
         return axios.get(link)
             .then(function(results) {
-                console.log('current weather results: ' + results);
+                // console.log('current weather results: ' + results);
                 console.log(JSON.stringify(results["data"]["weather"]));
+                console.log(results.data.weather);
+                return results.data.weather;
             });
     },
     fetchFiveDayForecast: function(location) {