diff --git a/Wello/www/css/main.css b/Wello/www/css/main.css
index e9d9054..b54e5e7 100644
--- a/Wello/www/css/main.css
+++ b/Wello/www/css/main.css
@@ -598,15 +598,71 @@ input[type=file]{
   img {
     page-break-inside: avoid; }
 
-  img {
-    max-width: 100% !important; }
+  main img {
+    max-width: 100% !important; 
+    width: 200px;
+  }
 
   p,
   h2,
   h3 {
     orphans: 3;
-    widows: 3; }
+    widows: 3; 
+  }
 
+  h1,
   h2,
-  h3 {
-    page-break-after: avoid; } }
+  h3,
+  p{
+    page-break-after: avoid;
+    margin: .1rem;
+    font-size: 1rem;
+  } 
+
+ ul.inputs li {
+    padding: 0.1rem 0;
+  }
+  nav{
+    display: none;
+    
+  }
+  
+  main.details{
+    max-width: none;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  main.details div {
+    max-width: 15rem;
+    
+    page-break-inside: avoid;
+  }
+  
+  main.details div:nth-child(1){
+    order: 1;
+  }
+  main.details div:nth-child(2){
+    order: 4;
+  }
+  main.details div:nth-child(3){
+    order: 1;
+  }
+  main.details div:nth-child(4){
+    order: 2;
+  }
+  main.details div:nth-child(5){
+    order: 5;
+  }
+  main.details div:nth-child(6){
+    order: 6;
+  }
+  main.details div:nth-child(7){
+    order: 7;
+    margin-top: 10rem;
+  }
+  main.details div:nth-child(8){
+    order: 8;
+    margin-top: 10rem;
+  }
+
+}
diff --git a/Wello/www/details.php b/Wello/www/details.php
index b3bcd51..931d351 100644
--- a/Wello/www/details.php
+++ b/Wello/www/details.php
@@ -97,6 +97,8 @@ foreach ($row as $key => $value) {
 
     <nav class="top-nav">
         <a href="map.php"><img alt="back" src="img/back.svg" ></a> <h1>Details</h1>
+        <a href="javascript:window.print()"><img src="img/print.svg" alt="print this page" id="print-button" /></a>
+
         <?php
         echo'<a href="form.php?Well_ID='.$Well_ID.'"><img alt="edit" src="img/edit.svg" ></a>';
         ?>
diff --git a/Wello/www/img/print.svg b/Wello/www/img/print.svg
new file mode 100644
index 0000000..5f89ef5
--- /dev/null
+++ b/Wello/www/img/print.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;}
+</style>
+<path class="st0" d="M38,16H10c-3.3,0-6,2.7-6,6v12h8v8h24v-8h8V22C44,18.7,41.3,16,38,16z M32,38H16V28h16V38z M38,24
+	c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S39.1,24,38,24z M36,6H12v8h24V6z"/>
+<path class="st1" d="M0,0h48v48H0V0z"/>
+</svg>
diff --git a/Wello/www/test.html b/Wello/www/test.html
new file mode 100644
index 0000000..b3dd594
--- /dev/null
+++ b/Wello/www/test.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>WRA | Map</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="apple-touch-icon" href="apple-touch-icon.png">
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/well-card.css">
+    <link rel="stylesheet" href="css/map-desktop.css">
+    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
+</head>
+
+
+
+
+
+
+<body>
+    <!--[if lt IE 8]>
+            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+    <!-- Add your site or application content here -->
+
+
+
+
+
+
+    <nav class="top-nav">
+        <div class="main-bttns">
+       
+            <h1>Well Report App</h1>
+        <a href="search.php"><img src="img/search.svg" alt="menu" /></a>
+        </div>
+       
+    </nav>
+
+    <main class="map">
+
+		<div id="map" class="google-maps">
+		</div>
+        
+      
+
+    </main>
+
+    <nav class="bottom-nav">
+        <a href="map.php"><img src="img/map.svg" alt="menu" /></a>
+        <a href="wells-list.php"><img src="img/well.png" alt="menu" /></a>
+    </nav>
+
+    <nav class="fabs">
+        <button class="gps" onclick ="getLocation()"><img src="img/gps.svg" alt="get location" /></button>
+    <script>
+
+        
+function getLocation() {
+      if (navigator.geolocation) {
+         navigator.geolocation.getCurrentPosition(function (position) {
+             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+             map.setCenter(initialLocation);
+         });
+     }
+}
+</script>
+        <a class="add-well" href="form.php"> <img src="img/add.svg" alt="add well" /></a>
+    </nav>
+
+    
+    
+    
+    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
+    <script>
+        window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
+    </script>
+    <script src="js/plugins.js"></script>
+    <script src="js/main.js"></script>
+    
+    <script>
+
+        function initMap() {
+        var map = new google.maps.Map(document.getElementById('map'), {
+          center: new google.maps.LatLng(41.31412, -72.23311),
+        mapTypeControlOptions: {
+            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
+            position: google.maps.ControlPosition.RIGHT_CENTER  
+        },    
+          zoom: 16
+        });
+            if (navigator.geolocation) {
+         navigator.geolocation.getCurrentPosition(function (position) {
+             initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+             map.setCenter(initialLocation);
+         });
+     }
+        var infoWindow = new google.maps.InfoWindow;
+            
+
+          // Change this depending on the name of your PHP or XML file
+          downloadUrl('http://wellreportapp.uconn.edu/xmlGenerate.php', function(data) {
+            var xml = data.responseXML;
+            var markers = xml.documentElement.getElementsByTagName('marker');
+            Array.prototype.forEach.call(markers, function(markerElem) {
+              var id = markerElem.getAttribute('id');
+                var name = markerElem.getAttribute('id');
+                var address = markerElem.getAttribute('address');
+              var point = new google.maps.LatLng(
+                  parseFloat(markerElem.getAttribute('lat')),
+                  parseFloat(markerElem.getAttribute('lng')));
+
+              var infowincontent = document.createElement('div');
+              var strong = document.createElement('strong');
+              strong.textContent = address
+              infowincontent.appendChild(strong);
+              infowincontent.appendChild(document.createElement('br'));
+
+
+              var text = document.createElement('text');
+              text.textContent = name
+              infowincontent.appendChild(text);
+              infowincontent.appendChild(document.createElement('br'));
+
+              var clicker = document.createElement('a');
+              var clickerText = document.createTextNode("go to details...");
+              clicker.setAttribute('href',"http://wellreportapp.uconn.edu/details.php?Well_ID="+id);
+              clicker.appendChild(clickerText);
+              infowincontent.appendChild(clicker);
+              var marker = new google.maps.Marker({
+                map: map,
+                position: point
+              });
+              marker.addListener('click', function() {
+               
+                infoWindow.setContent(infowincontent);
+                infoWindow.open(map, marker);
+              });
+            });
+          });
+        }
+
+
+      function downloadUrl(url, callback) {
+        var request = window.ActiveXObject ?
+            new ActiveXObject('Microsoft.XMLHTTP') :
+            new XMLHttpRequest;
+
+        request.onreadystatechange = function() {
+          if (request.readyState == 4) {
+            request.onreadystatechange = doNothing;
+            callback(request, request.status);
+          }
+        };
+
+        request.open('GET', url, true);
+        request.send(null);
+      }
+
+      function doNothing() {}
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNSoPsxLd0LbvQaH9R6npO7jj-jKAXyQ4&callback=initMap">
+    </script>
+</body>
+
+
+</html>
+<!--
+notes :
+we will need a file where we import the well name, address, longiture and latitude within the range we chose
+
+we need a food loop for it
+-->
\ No newline at end of file
