diff --git a/.firebaserc b/.firebaserc
new file mode 100644
index 0000000..f9fc89e
--- /dev/null
+++ b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "maps-22434"
+  }
+}
diff --git a/.gitignore b/.gitignore
index 30bc162..6717adb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/node_modules
\ No newline at end of file
+node_modules
+.firebase
\ No newline at end of file
diff --git a/firebase.json b/firebase.json
new file mode 100644
index 0000000..c8b76f1
--- /dev/null
+++ b/firebase.json
@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "src/public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}
diff --git a/src/public/404.html b/src/public/404.html
new file mode 100644
index 0000000..5dfab36
--- /dev/null
+++ b/src/public/404.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Maps - 404 page not found</title>
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="stylesheet" href="css/style.css" type="text/css" />
+  </head>
+  <body class="error">
+    <h1 class="error">404 - page not found</h1>
+  </body>
+</html>
diff --git a/src/public/index.html b/src/public/index.html
index 635e588..425ffb1 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
@@ -47,6 +46,8 @@ var points = [
       <hr/>
     </div>
   </div>
+  <script src="js/logging.js"></script>
+  <script src="js/search.js"></script>
   <script>
   mapboxgl.accessToken = 'pk.eyJ1IjoibXJlZW5lbiIsImEiOiJjanJncjh1b2kwMHpvM3lucTcyMzNhM3ZrIn0.d_CksoUBcctYlWDhUATpDQ';
   var map = new mapboxgl.Map({
@@ -73,61 +74,9 @@ var points = [
   //   }
   
 map.on('load', function() {
-  map.addSource('abc', {
-    'type': 'geojson',
-    'data': {
-      'type': 'FeatureCollection',
-      'features': [
-        {
-          // feature for Mapbox DC
-          'type': 'Feature',
-          'geometry': {
-            'type': 'Point',
-            'coordinates': [
-              -77.03238901390978,
-              38.913188059745586
-            ]
-          },
-          'properties': {
-            'title': 'Mapbox DC'
-          }
-        },
-        {
-          // feature for Mapbox SF
-          'type': 'Feature',
-          'geometry': {
-            'type': 'Point',
-            'coordinates': [-122.414, 37.776]
-          },
-          'properties': {
-            'title': 'Mapbox SF'
-          }
-        }
-      ]
-    }
-  });
-  
-  // Add a symbol layer
-  map.addLayer({
-    'id': 'points',
-    'type': 'symbol',
-    'source': 'abc',
-    'layout': {
-      'icon-image': 'def',
-      // get the title name from the source's "title" property
-      'text-field': ['get', 'title'],
-      'text-font': [
-        'Open Sans Semibold',
-        'Arial Unicode MS Bold'
-      ],
-      'text-offset': [0, 1.25],
-      'text-anchor': 'top'
-    }
-  });
+  drawRoute([{"geometry":{"coordinates":[[4.45978,51.904408],[4.460869,51.904633],[4.461155,51.904787],[4.460847,51.905215],[4.460584,51.905663],[4.460534,51.905728],[4.460452,51.905753],[4.45957,51.906975],[4.459557,51.90709],[4.459373,51.907221],[4.459131,51.907337],[4.458953,51.907607],[4.457748,51.907288],[4.456716,51.907434],[4.456587,51.907616],[4.456168,51.907527],[4.451688,51.908115]],"type":"LineString"},"legs":[{"annotation":{"distance":[1.7383332996178096,22.45993869066233,42.89666094673274,3.476653363969903,8.251714207993015,9.11956831622667,9.098858713962189,7.832744125431425,7.243404219727797,44.854935114005805,17.080483918802933,7.116146959737379,4.200702579344604,11.5725399881023,3.201029466433791,9.872886105925396,8.002569459719298,2.4759102406504714,3.8043732711046747,20.475954147450018,128.31838599567584,2.864075030418471,2.123302580512181,1.7809432563632868,1.8958210605027446,2.667238770549311,1.8605347706749356,2.466743348337021,1.9641764658696992,1.93080661276293,2.4539669062106473,1.2848285236847528,2.0223619411114524,6.036897781911623,1.5555774522754289,9.244241795514014,11.817183870830993,32.419965273198024,39.92727553391954,48.287710233717306,1.9213455322501025,47.508078107768874,25.145280552527016,1.5628598938059204,20.642580528524928,11.888460998010107,11.975562910758498,2.00234938836148,4.81491418483479,30.610685201690423,57.66309020851639,193.58631980950062,32.46683868168326],"duration":[0.6,8.1,15.4,0.8,2,2.2,2.2,1.9,1.7,10.8,4.1,1.7,1,2.8,0.8,2.4,1.9,0.6,0.9,4.9,30.8,0.7,0.5,0.4,0.5,0.6,0.4,0.6,0.5,0.5,0.6,0.3,0.5,1.4,0.4,2.2,2.8,7.8,9.6,11.6,0.5,11.4,6,0.4,5,2.9,2.9,0.5,1.2,7.3,13.8,46.5,7.8]},"summary":"","weight":281.7,"duration":289.7,"steps":[],"distance":989.5}],"weight_name":"cyclability","weight":281.7,"duration":289.7,"distance":989.5,"voiceLocale":"en-US"}][0])
 });
   </script>
-  <script src="js/logging.js"></script>
-  <script src="js/search.js"></script>
   <!-- <script src="js/drow.js"></script> -->
 </body>
 </html>
\ No newline at end of file
diff --git a/src/public/js/search.js b/src/public/js/search.js
index 8bada35..b3979c4 100644
--- a/src/public/js/search.js
+++ b/src/public/js/search.js
@@ -31,25 +31,48 @@ function getDirection(){
       response.body.routes &&
       response.body.routes.length
     ) {
-      console.log("route", response.body.routes[0])
-      geojson = response.body.routes[0].geometry
-      map.addSource('route', {
-        type: 'geojson',
-        data: {
-          type: "FeatureCollection",
-          features: [
-            {
-              type: "Feature",
-              properties: {},
-              geometry: geojson
-            }
-          ]
-        }
-      })
+      console.log("route", response.body.routes[0]);
+      drawRoute(response.body.routes[0]);
     }
   });
 }
 
+function drawRoute(route){
+  geojson = route.geometry
+  if(map.getLayer('route'))
+    map.removeLayer('route')
+  if(map.getSource('route'))
+    map.removeSource('route')
+  map.addSource('route', {
+    type: 'geojson',
+    data: {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {},
+          geometry: geojson
+        }
+      ]
+    }
+  })
+
+  map.addLayer({
+    id: 'route',
+    type: 'line',
+    source: 'route',
+    layout: {
+      'line-cap': 'round',
+      'line-join': 'round'
+    },
+    paint: {
+      'line-blur': 0,
+      'line-color': '#0000FF',
+      'line-width': 15
+    }
+  })
+}
+
 function flyTo(target){
   var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
   d = mapboxClient.geocoding.forwardGeocode({
