diff --git a/WebContent/html/javascript/statistics.jsp b/WebContent/html/javascript/statistics.jsp
index efa5edd..ff97eab 100644
--- a/WebContent/html/javascript/statistics.jsp
+++ b/WebContent/html/javascript/statistics.jsp
@@ -59,9 +59,9 @@ function displayData() {
 
         	// Set chart options
         	var options = {'title':'Chart of Devices',
-                       		'width':700,
-                       		'height':700,
-                       		'backgroundColor':'#94969A'};
+                       		'width':600,
+                       		'height':400,
+                       		'backgroundColor':'#E9EAEB'};
 
         	// Instantiate and draw our chart, passing in some options.
         	var chart = new google.visualization.PieChart(document.getElementById('piechart'));
@@ -86,11 +86,11 @@ function displayData() {
                              ]);
             
         	var options = {'title':'Devices in terms of Status',
-               		'width':700,
-               		'height':700,
+               		'width':600,
+               		'height':400,
                		'bar': {groupWidth: "75%"},                    
                		'legend': { position: "none" },
-               		'backgroundColor':'#94969A'};
+               		'backgroundColor':'#E9EAEB'};
 
 			// Instantiate and draw our chart, passing in some options.
 			var chart = new google.visualization.ColumnChart(document.getElementById('colchart'));
diff --git a/WebContent/html/webpages/index.jsp b/WebContent/html/webpages/index.jsp
index 8b1e8c1..b1672aa 100644
--- a/WebContent/html/webpages/index.jsp
+++ b/WebContent/html/webpages/index.jsp
@@ -67,7 +67,7 @@
         <p>Just curious to see what devices we have to offer? You've come to the right place.</p>   
       </div>
     </a>
-    <a class = "divlink" href="map.jsp">
+    <a class = "divlink" href="statisticsPage.jsp">
       <div class = "menuOption">
         <h2>Map</h2>
         <p>Wanna see the distribution of devices throughout the world? Check it out! HERE!</p>
diff --git a/WebContent/html/webpages/map.jsp b/WebContent/html/webpages/map.jsp
deleted file mode 100644
index ac0a458..0000000
--- a/WebContent/html/webpages/map.jsp
+++ /dev/null
@@ -1,89 +0,0 @@
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <meta name="description" content="">
-    <meta name="author" content="">
-
-    <title>Synchrony Financial</title>
-
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-    <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">  
-    <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
-
-    <style>
-      /* Always set the map height explicitly to define the size of the div
-       * element that contains the map. */
-      #map {
-        height: 80%;
-        width: 80%;
-        margin:0 auto;
-        border-style: solid;
-        border-width: 20px;
-      }
-
-      h2{
-        text-align: center;
-        padding-bottom: 10px;
-      }
-    </style>
-
-  </head>
-
-  <body>
-
-    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
-      <%@ include file="navbar.jsp"%>
-    </nav>
-
-    <h2>Our Wonderful Synchrony Financial Map!</h2>
-
-    <div id="map"></div>
-    <script>
-
-      function initMap() {
-
-        var map = new google.maps.Map(document.getElementById('map'), {
-          zoom: 4,
-          center: {lat: 39.023617, lng: -94.69357}
-        });
-
-        // Create an array of alphabetical characters used to label the markers.
-        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-        // Add some markers to the map.
-        // Note: The code uses the JavaScript Array.prototype.map() method to
-        // create an array of markers based on a given "locations" array.
-        // The map() method here has nothing to do with the Google Maps API.
-        var markers = locations.map(function(location, i) {
-          return new google.maps.Marker({
-            position: location,
-            label: labels[i % labels.length]
-          });
-        });
-
-        // Add a marker clusterer to manage the markers.
-        var markerCluster = new MarkerClusterer(map, markers,
-            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
-      }
-      var locations = [
-		{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
-		{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
-		{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
-        {lat: 41.878114, lng: -87.629798}, //Chicago, IL
-        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
-        {lat: 41.053430, lng: -73.538734} //Stamford, CT
-      ]
-    </script>
-    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
-    </script>
-    <script async defer
-    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCndOcexx4GAOGkRKBeK1E43u_sB9gjcaU&callback=initMap">
-    </script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/statisticsPage.jsp b/WebContent/html/webpages/statisticsPage.jsp
index 2d3320a..8444c67 100644
--- a/WebContent/html/webpages/statisticsPage.jsp
+++ b/WebContent/html/webpages/statisticsPage.jsp
@@ -1,26 +1,45 @@
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-  <meta name="description" content="">
-  <meta name="author" content="">
-
-  <title>Synchrony Financial</title>
-
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
-  <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
-  <style>
-  	div.infoContainer{
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">  
+    <link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
+
+    <style>
+      /* Always set the map height explicitly to define the size of the div
+       * element that contains the map. */
+      #map {
+        height: 80%;
+        width: 80%;
+        margin:0 auto;
+        border-style: solid;
+        border-width: 20px;
+      }
+
+      h2{
+        text-align: center;
+        padding-bottom: 10px;
+      }
+      
+      div.infoContainer{
       border: solid; 
       border-width: thin; 
       padding: 15px;
       background-color: #E9EAEB;
       display: inline-block;
+      margin-bottom: 30px;
+      margin-top: 25px;
+      text-align: left;
     }
     
     div.imgContainer{
@@ -33,17 +52,68 @@
       width: 200px; 
       text-align: center; 
     }
-  </style>
-</head>
-<body>
-  <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
-  	<%@ include file="navbar.jsp"%>
-  </nav>
-  <div style = "background-color: #94969A">
-  <div class = infoContainer id="stats"></div><br>
-  <div style = "display: inline-block" id="piechart"></div>
-  <div style = "display: inline-block" id="colchart"></div>
+    </style>
+
+  </head>
+
+  <body>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
+      <%@ include file="navbar.jsp"%>
+    </nav>
+
+    <h2>Distribution of Devices Nationwide</h2>
+
+    <div id="map"></div>
+    <script>
+
+      function initMap() {
+
+        var map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 4,
+          center: {lat: 39.023617, lng: -94.69357}
+        });
+
+        // Create an array of alphabetical characters used to label the markers.
+        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+        // Add some markers to the map.
+        // Note: The code uses the JavaScript Array.prototype.map() method to
+        // create an array of markers based on a given "locations" array.
+        // The map() method here has nothing to do with the Google Maps API.
+        var markers = locations.map(function(location, i) {
+          return new google.maps.Marker({
+            position: location,
+            label: labels[i % labels.length]
+          });
+        });
+
+        // Add a marker clusterer to manage the markers.
+        var markerCluster = new MarkerClusterer(map, markers,
+            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
+      }
+      var locations = [
+		{lat: 37.774929, lng: -122.419416}, //San Francisco, CA
+		{lat: 14.599512, lng: 120.984219}, //Manilla, Philippines
+		{lat: 17.385044, lng: 78.486671}, //Hyderabad, India
+        {lat: 41.878114, lng: -87.629798}, //Chicago, IL
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734} //Stamford, CT
+      ]
+    </script>
+    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCndOcexx4GAOGkRKBeK1E43u_sB9gjcaU&callback=initMap">
+    </script>
+    <h2>Device Availability Statistics</h2>
+  <div style = "background-color: #94969A;">
+  <div style = "display: inline-block; border-style: solid; border-width: 20px; margin: 0px 0px 0px 50px;" id="piechart"></div>
+  <div style = "float: right; border-style: solid; border-width: 20px; margin: 0px 50px 0px 0px;" id="colchart"></div>
+  <div style = "text-align: center;">
+  	<div style = "" class = infoContainer id="stats"></div>
+  </div>
   </div>
   <%@ include file="../javascript/statistics.jsp" %>
-</body>
+  </body>
 </html>
\ No newline at end of file
