diff --git a/package-lock.json b/package-lock.json
index 8d8740a..ba2da38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2621,6 +2621,14 @@
       "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
       "dev": true
     },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "1.0.0"
+      }
+    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -2859,6 +2867,11 @@
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
     "duplexify": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.5.3.tgz",
@@ -3770,8 +3783,7 @@
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
     },
     "get-value": {
       "version": "2.0.6",
@@ -3866,6 +3878,27 @@
         "slash": "1.0.0"
       }
     },
+    "got": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
+      "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
+      "requires": {
+        "decompress-response": "3.3.0",
+        "duplexer3": "0.1.4",
+        "get-stream": "3.0.0",
+        "is-plain-obj": "1.1.0",
+        "is-retry-allowed": "1.1.0",
+        "is-stream": "1.1.0",
+        "isurl": "1.0.0",
+        "lowercase-keys": "1.0.0",
+        "p-cancelable": "0.3.0",
+        "p-timeout": "1.2.1",
+        "safe-buffer": "5.1.1",
+        "timed-out": "4.0.1",
+        "url-parse-lax": "1.0.0",
+        "url-to-options": "1.0.1"
+      }
+    },
     "graceful-fs": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
@@ -3918,6 +3951,19 @@
       "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
       "dev": true
     },
+    "has-symbol-support-x": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.1.tgz",
+      "integrity": "sha512-JkaetveU7hFbqnAC1EV1sF4rlojU2D4Usc5CmS69l6NfmPDnpnFUegzFg33eDkkpNCxZ0mQp65HwUDrNFS/8MA=="
+    },
+    "has-to-string-tag-x": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
+      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
+      "requires": {
+        "has-symbol-support-x": "1.4.1"
+      }
+    },
     "has-value": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
@@ -4568,6 +4614,11 @@
         "kind-of": "3.2.2"
       }
     },
+    "is-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
+      "integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA="
+    },
     "is-odd": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-1.0.0.tgz",
@@ -4615,8 +4666,7 @@
     "is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -4668,11 +4718,15 @@
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
       "dev": true
     },
+    "is-retry-allowed": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
+      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-svg": {
       "version": "2.1.0",
@@ -4722,6 +4776,15 @@
         "isarray": "1.0.0"
       }
     },
+    "isurl": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
+      "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
+      "requires": {
+        "has-to-string-tag-x": "1.4.1",
+        "is-object": "1.0.1"
+      }
+    },
     "js-base64": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
@@ -4998,6 +5061,11 @@
       "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=",
       "dev": true
     },
+    "lowercase-keys": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
+      "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY="
+    },
     "lru-cache": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@@ -5289,6 +5357,11 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "mimic-response": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.0.tgz",
+      "integrity": "sha1-3z02Uqc/3ta5sLJBRub9BSNTRY4="
+    },
     "minimalistic-assert": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz",
@@ -5854,11 +5927,15 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
+    "p-cancelable": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
+      "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw=="
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-limit": {
       "version": "1.2.0",
@@ -5884,6 +5961,14 @@
       "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==",
       "dev": true
     },
+    "p-timeout": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
+      "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
+      "requires": {
+        "p-finally": "1.0.0"
+      }
+    },
     "p-try": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
@@ -8094,8 +8179,7 @@
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-      "dev": true
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
     "preserve": {
       "version": "0.2.0",
@@ -8753,8 +8837,7 @@
     "safe-buffer": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
-      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-      "dev": true
+      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
     "sax": {
       "version": "1.2.4",
@@ -9561,6 +9644,11 @@
       "integrity": "sha1-lcakRTDhW6jW9KPsuMOj+sRto1c=",
       "dev": true
     },
+    "timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+    },
     "timers-browserify": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz",
@@ -10013,6 +10101,19 @@
         }
       }
     },
+    "url-parse-lax": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "requires": {
+        "prepend-http": "1.0.4"
+      }
+    },
+    "url-to-options": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
+      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k="
+    },
     "use": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/use/-/use-2.0.2.tgz",
@@ -10236,6 +10337,14 @@
         "vue-template-es2015-compiler": "1.6.0"
       }
     },
+    "vue-resource": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/vue-resource/-/vue-resource-1.3.5.tgz",
+      "integrity": "sha512-m9UC5q0Mcd6MphEVVPCeC609XrsWHatmT39UKhE3oQz1GojnjbyReU1ggX9uQqM6FB81XXFX/GU28yMHJ69O7w==",
+      "requires": {
+        "got": "7.1.0"
+      }
+    },
     "vue-router": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
diff --git a/package.json b/package.json
index 30b2947..9b3e520 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "vue": "^2.5.2",
+    "vue-resource": "^1.3.5",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index 2c30772..9abfc06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,12 @@
 <template>
   <div id="app">
-    <SearchForm></SearchForm>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import SearchForm from './components/search'
 export default {
-  name: 'App',
-  components: {
-    SearchForm
-  }
+  name: 'App'
 }
 </script>
 
diff --git a/src/components/Food.vue b/src/components/Food.vue
new file mode 100644
index 0000000..38efd22
--- /dev/null
+++ b/src/components/Food.vue
@@ -0,0 +1,51 @@
+<template>
+	<div class="food">
+		<h1>{{header}}</h1>
+		<p>{{rank}}</p>
+		<p>{{category}}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Food',
+	data () {
+		return {
+			header:"Food Name",
+			rank:"",
+			category:"",
+			foodInfo: {}
+		}
+	},
+
+	created () {
+	    this.getFoodInfo()
+	  },
+		
+	methods:{
+
+	  	getFoodInfo: function() {
+			this.$http.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/038000311307').then((response) =>  {
+			        	if(response.ok) {
+			        		return response.body
+			        	}
+			        }).then(function(results) {
+			        	if(results.id === null) {
+			        		this.$router.replace({name: '404'})
+			        	} else {
+			        		this.header = results.data.name
+			        		this.rank = results.data.rank.name
+			        		this.category = results.data.category.name
+			        	}
+			        })
+		}
+    }
+	
+}
+</script> 
+
+<style scoped>
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 2d9fd11..b5b404d 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="searhform">
+	<div class="searchform">
 		<h1>{{header}}</h1>
 		<fieldset>
 			<p><label for="upc">UPC</label> <input type="text" id="upc"></p>
diff --git a/src/main.js b/src/main.js
index 417390e..ae2375c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,10 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import vueResource from 'vue-resource'
+Vue.use(vueResource);
+
+
 import App from './App'
 import router from './router'
 
diff --git a/src/router/index.js b/src/router/index.js
index 4566d59..d335396 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,13 +1,23 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-
+import SearchForm from '@/components/Search'
+import Food from '@/components/Food'
+var VueResource = require('vue-resource');
+Vue.use(VueResource);
 
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
-      path: '/'
-    }
+      path: '/',
+      name: 'SearchPage',
+      component: SearchForm
+    },
+     {
+      path: '/Food',
+      name: 'Food',
+      component: Food
+    }   
   ]
 })