diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
index 57624a9..777b213 100644
--- a/html-ONLY-site/css/main.css
+++ b/html-ONLY-site/css/main.css
@@ -85,12 +85,18 @@ textarea {
   font-family: "roboto";
 }
 
+nav h1{
+    flex-grow: 1;
+    margin: 0;
+}
+
 nav.top-nav {
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
+    align-items: center;
   background-color: #65b2ff;
   z-index: 10; }
   
@@ -102,6 +108,7 @@ nav.top-nav button {
 }
 div.slide-menu{
   position: fixed;
+    top: 0;
   height: 100vh;
   background-color: white;
   width: 18rem;
@@ -125,6 +132,7 @@ div.slide-menu a{
 }
 div.close-menu{
     position: fixed;
+    top: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.42);
@@ -206,10 +214,17 @@ button {
 main{
     margin-top: 4.1rem;
 }
-form, main.details {
+main.details {
     display: flex;
     flex-direction: column;
-
+    justify-content: flex-start;
+    align-items: flex-start
+}
+form{
+    
+}
+main img{
+    width: 100%;
 }
 form ul, h2, main.details ul{
     margin: 1rem
@@ -227,6 +242,7 @@ label[for=well-picture] {
 }
 
 h2{
+    width: calc(100% - 2rem);
   font-weight: 700;
   margin-bottom: 0;
   border-bottom: 1px solid black;
diff --git a/html-ONLY-site/details.html b/html-ONLY-site/details.html
index 7ff3e5b..d37dec3 100644
--- a/html-ONLY-site/details.html
+++ b/html-ONLY-site/details.html
@@ -31,41 +31,41 @@
 
 
     <nav class="top-nav">
-        <button><a href="wells-list.html"><img alt="back" src="img/back.svg" ></a></button>
+        <button><a href="wells-list.html"><img alt="back" src="img/back.svg" ></a></button> <h1>Details</h1>
         <button><a href="form.html"><img alt="edit" src="img/edit.svg" ></a></button>
     </nav>
 
     <main class="details">
-            <img src="img/add-img-icon.png"/>
+            <img src="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>
 
         <ul class="inputs" id="report-metadata">
             <li><h3>Date well completed</h3>
-                <p id="well-completion-date">date</p>
+                <p id="well-completion-date">10/2/09</p>
             </li>
 
             <li>
                 <h3>Date of report</h3>
-                <p  id="report-completion-date">date</p>
+                <p  id="report-completion-date">2/10/10</p>
             </li>
 
             <li>
                 <h3>Permit number</h3>
-                <p id="permit-number" class="long-num">364746</p>
+                <p id="permit-number" class="long-num">246724</p>
             </li>
 
             <li>
                 <h3>Registrant number</h3>
-                <p id="registrant-number" class="long-num">65146</p>
+                <p id="registrant-number" class="long-num">13</p>
             </li>
 
             <li>
                 <h3>State well number</h3>
-                <p id="state-well-number" class="long-num">380975</p>
+                <p id="state-well-number" class="long-num">n/a</p>
             </li>
 
             <li>
                 <h3>Other number</h3>
-                <p id="other-number" class="long-num">8960</p>
+                <p id="other-number" class="long-num">n/a</p>
             </li>
         </ul>
 
@@ -73,12 +73,12 @@ <h3>Other number</h3>
         <h2>Owner Info</h2>
         <ul class="inputs" id="owner-info">
             <li><h3>Name</h3>
-                <p id="name">Joe</p>
+                <p id="name">University of Connecticut</p>
             </li>
 
             <li>
                 <h3>Address</h3>
-                <p id="address">98 Street rd</p>
+                <p id="address">321 Main st </p>
             </li>
 
             <li>
@@ -88,7 +88,7 @@ <h3>Town</h3>
 
             <li>
                 <h3 >Zip code</h3>
-                <p id="zip-code" class="med-num">584758</p>
+                <p id="zip-code" class="med-num">06235</p>
             </li>
         </ul>
 
@@ -97,50 +97,46 @@ <h2>Well location</h2>
 
             <li>
                 <h3>Address</h3>
-                <p type="text" id="address">4 Street rd</p>
+                <p id="address">Agronomy rd</p>
             </li>
 
             <li>
                 <h3>Town</h3>
-                <p type="text" id="town">Storrs</p>
+                <p id="town">Mansfield</p>
             </li>
 
             <li>
-                <h3 for="zip-code">Zip code</h3>
-                <p type="number" min="1" id="zip-code" class="med-num">
+                <h3>Zip code</h3>
+                <p id="zip-code" class="med-num">06235</p>
             </li>
 
             <li>
-                <h3 for="lot-number">Lot number</h3>
-                <p type="number" min="1" id="lot-number" class="med-num">
+                <h3>Lot number</h3>
+                <p id="lot-number" class="med-num">n/a</p>
             </li>
 
             <li id="get-gps-local">
-                <h3 for="gps-coordinates">GPS coordinates</h3>
-                <p type="text" id="gps-coordinates">
-                <button onclick="getLocation()"><img alt="get location" src="img/gps.svg"></button>
+                <h3>GPS coordinates </h3>
+                <h4>Latitude</h4>
+                <p id="gps-coordinates-latitude">41.794161</p>
+                <h4 for="gps-coordinates">Longitude</h4>
+                <p id="gps-coordinates-longitude">-72.230273</p>
+                
             </li>
 
             <li>
-                <h3 for="relative-location">Location relative to three permanent landmarks</h3>
-                <textarea id="relative-location"></textarea>
+                <h3 >Location relative to three permanent landmarks</h3>
+                <p id="relative-location">13ft from light post, 16ft from water drain, 28ft from large rock</p>
             </li>
 
             <li>
-                <h3 for="use">Use</h3>
-                
-                <p type="text" id="other-use-case" class="other">
+                <h3>Use</h3>
+                <p id="other-use-case" >Farm</p>
             </li>
 
             <li>
-                <h3 for="drilling-equipment">Drilling equipment</h3>
-                <select id="drilling-equipment">
-                    <option value="Rotary">Rotary</option>
-                    <option value="Compressed Air Percussion">Compressed Air Percussion</option>
-                    <option value="Cable Percussion">Cable Percussion</option>
-                    <option value="Other">Other</option>
-                </select>
-                <p type="text" id="other-equipment" class="other">
+                <h3>Drilling equipment</h3>
+                <p id="other-equipment" >Compressed Air Percussion</p>
             </li>
 
         </ul>
@@ -148,74 +144,68 @@ <h3 for="drilling-equipment">Drilling equipment</h3>
         <h2>Casing Details</h2>
         <ul class="inputs" id="casing-details">
             <li>
-                <h3 for="length">Length</h3>
-                <p type="number" min="1" id="length"> feet
+                <h3>Length</h3>
+                <p  id="length">100 feet</p>
             </li>
             <li>
-                <h3 for="diameter">Diameter</h3>
-                <p type="number" min="1" id="diameter"> inches
+                <h3>Diameter</h3>
+                <p  id="diameter">6 inches</p>
             </li>
 
             <li>
-                <h3 for="weight">Weight per foot</h3>
-                <p type="number" min="1" id="weight"> lbs/feet
+                <h3>Weight per foot</h3>
+                <p  id="weight">17 lbs/feet</p>
             </li>
 
             <li>
-                <p type="radio" name="threaded-vs-welded" value="Threaded"> Threaded
-                <p type="radio" name="threaded-vs-welded" value="Welded"> Welded
+                <h3>Threaded/Welded</h3>
+                <p> Threaded</p>
             </li>
 
             <li>
-                <h3 for="drive-shoe">Drive shoe</h3>
-                <p type="radio" name="drive-show" value="yes"> yes
-                <p type="radio" name="drive-show" value="no"> no
+                <h3>Drive shoe</h3>
+                <p>yes</p>
             </li>
 
             <li>
-                <h3 for="casing-grouting">Was casing grouted</h3>
-                <p type="radio" name="casing-grouting" value="yes"> yes
-                <p type="radio" name="casing-grouting" value="no"> no
+                <h3>Was casing grouted</h3>
+                <p>yes</p>
             </li>
         </ul>
 
         <h2>Yield Test</h2>
         <ul class="inputs" id="yield-test">
             <li>
-                <h3 for="method">Method</h3>
-                <select id="method">
-                    <option value="bailed">Bailed</option>
-                    <option value="Compressed Air">Compressed Air</option>
-                    <option value="Cable Percussion">Pumped</option>
-                </select>
+                <h3>Method</h3>
+                <p id="method">Compressed Air</p>
             </li>
             <li>
-                <h3 for="yield-hours">Test duration</h3>
-                <p type="number" min="1" id="yield-hours"> hours
+                <h3>Test duration</h3>
+                <p  id="yield-hours">8 hours</p>
             </li>
 
             <li>
-                <h3 for="yield-gpm">Yield</h3>
-                <p type="number" min="1" id="yeld-gpm"> gallons per minute
+                <h3>Yield</h3>
+                <p id="yeld-gpm">18 gallons per minute</p>
             </li>
 
         </ul>
 
         <h2>Water Level</h2>
-        <ul class="ps" id="yield-test">
+        <ul class="inputs" id="yield-test">
             <li>
-                <h3 for="water-from-surface">From land surface</h3>
-                <p type="number" min="1" id="water-from-surface"> feet
+                <h3>From land surface</h3>
+                <p  id="water-from-surface">44 feet</p>
             </li>
 
             <li>
-                <h3 for="water-level-during-yield-test">During yield test</h3>
-                <p type="number" min="1" id="water-level-during-yield-test"> feet
+                <h3>During yield test</h3>
+                <p  id="water-level-during-yield-test">90 feet</p>
             </li>
 
             <li>
-                <h3 for="depth-of-well">Depth of complete well</h3>
-                <p type="number" min="1" id="water-from-surface"> feet
+                <h3>Depth of complete well</h3>
+                <p  id="water-from-surface">620 feet</p>
             </li>
 
         </ul>
@@ -223,59 +213,54 @@ <h3 for="depth-of-well">Depth of complete well</h3>
         <h2>Screen Details</h2>
         <ul class="inputs" id="screen-details">
             <li>
-                <h3 for="make">Make</h3>
-                <p type="text" id="make">
+                <h3>Make</h3>
+                <p type="text" id="make">n/a</p>
             </li>
 
             <li>
-                <h3 for="length-open-to-aquifier">Length open to aquifier</h3>
-                <p type="number" min="1" id="length-open-to-aquifier"> feet
+                <h3>Length open to aquifier</h3>
+                <p  id="length-open-to-aquifier">n/a</p>
             </li>
 
             <li>
-                <h3 for="slot-size">Slot size</h3>
-                <p type="number" min="1" id="slot-size">
+                <h3>Slot size</h3>
+                <p  id="slot-size">n/a</p>
             </li>
 
             <li>
-                <h3 for="diameter">Diameter</h3>
-                <p type="number" min="1" id="diameter"> inches
+                <h3>Diameter</h3>
+                <p  id="diameter">n/a</p>
             </li>
 
             <li>
-                <h3 for="gravel">Gravel</h3>
-                <p type="radio" name="gravel" value="Packed"> Packed
-                <p type="radio" name="gravel" value="Unpacked"> Unpacked
+                <h3>Gravel</h3>
+                <p>n/a</p>
             </li>
 
             <li>
-                <h3 for="diameter-including-gravel-pack">Diameter including gravel pack</h3>
-                <p type="number" min="1" id="diameter-including-gravel-pack"> inches
+                <h3>Diameter including gravel pack</h3>
+                <p  id="diameter-including-gravel-pack">n/a</p>
             </li>
 
             <li>
-                <h3 for="gravel-size">Gravel size</h3>
-                <p type="number" min="1" id="gravel-size"> inches
+                <h3>Gravel size</h3>
+                <p  id="gravel-size">n/a</p>
             </li>
 
             <li>
-                <h3 for="gravel-pack-location">Gravel pack location</h3>
-                <p type="number" min="1" id="gravel-pack-location-from"> feet
-                <br>to<br>
-                <p type="number" min="1" id="gravel-pack-location-to"> feet
+                <h3>Gravel pack location</h3>
+                <p  id="gravel-pack-location-from">n/a</p>
+                to
+                <p  id="gravel-pack-location-to">n/a</p>
             </li>
 
         </ul>
 
-        <h2>Depth From Land To Surface</h2>
-        <ul class="inputs" id="depth-from-surface">
+        <h2>Other Notes</h2>
+        <ul class="inputs" id="notes">
 
             <li>
-                <p type="number" min="1"> feet
-                <p type="text">
-                <p type="number" min="1"> feet
-                <p type="text">
-                <p type="number" min="1"> feet
+                <p id="notes">0 - 2 | topsoil <br> 2 - 54 | Fine compact sands with small stones <br> 54 - 73 | wet cay</p>
             </li>
 
         </ul>
diff --git a/html-ONLY-site/index.html b/html-ONLY-site/index.html
index ab09fa9..2925c81 100644
--- a/html-ONLY-site/index.html
+++ b/html-ONLY-site/index.html
@@ -32,7 +32,7 @@
 
 
     <nav class="top-nav">
-        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button>
+        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button> <h1>Well Report App</h1>
         <button><a href="search.html"><img src="img/search.svg" alt="menu" /></a></button>
         
         <div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
diff --git a/html-ONLY-site/wells-list.html b/html-ONLY-site/wells-list.html
index 07d5568..5da8259 100644
--- a/html-ONLY-site/wells-list.html
+++ b/html-ONLY-site/wells-list.html
@@ -33,7 +33,7 @@
 
 
     <nav class="top-nav">
-        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button>
+        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button><h1>Nearby Wells</h1>
         <button><a href="search.html"><img src="img/search.svg" alt="menu" /></a></button>
         
         <div class="close-menu closed" id="close-menu" onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"></div>
@@ -58,6 +58,16 @@ <h2>Well Name</h2>
             </div>
         </div>
             </a>
+        
+        <a href="details.html">
+        <div class="well-card clearfix">
+            <div class="well-img"></div>
+            <div>
+                <h2>Well Name</h2>
+                <p>short well description</p>
+            </div>
+        </div>
+            </a>
 
     </main>