diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
index ebfdde0..bbd7be5 100644
--- a/html-ONLY-site/css/main.css
+++ b/html-ONLY-site/css/main.css
@@ -109,7 +109,6 @@ div.slide-menu{
   flex-direction: column;
   padding: 1rem;
   padding-top: 5rem;
-  //border-right: solid 1px black;
   box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35);
 }
 div.slide-menu button{
diff --git a/details.html b/html-ONLY-site/details-orig.html
similarity index 100%
rename from details.html
rename to html-ONLY-site/details-orig.html
diff --git a/html-ONLY-site/details.html b/html-ONLY-site/details.html
new file mode 100644
index 0000000..1d5faf9
--- /dev/null
+++ b/html-ONLY-site/details.html
@@ -0,0 +1,313 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></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">
+    <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">
+        <button><a href="wells-list.html"><img alt="back" src="img/back.svg" ></a></button>
+        <button><a href="form.html"><img alt="edit" src="img/edit.svg" ></a></button>
+    </nav>
+
+    <main>
+        <h3 for="well-picture">
+            <img src="img/add-img-icon.png"/>
+        </h3>
+        <input type="file" id="well-picture" accept="image/*">
+
+        <ul class="inputs" id="report-metadata">
+            <li><h3 for="well-completion-date">Date well completed</h3>
+                <p type="date" id="well-completion-date">date</p>
+            </li>
+
+            <li>
+                <h3 for="report-completion-date">Date of report</h3>
+                <p type="date" id="report-completion-date">date</p>
+            </li>
+
+            <li>
+                <h3 for="permit-number">Permit number</h3>
+                <p type="number" min="1" id="permit-number" class="long-num">
+            </li>
+
+            <li>
+                <h3 for="registrant-number">Registrant number</h3>
+                <p type="number" min="1" id="registrant-number" class="long-num">
+            </li>
+
+            <li>
+                <h3 for="state-well-number">State well number</h3>
+                <p type="number" min="1" id="state-well-number" class="long-num">
+            </li>
+
+            <li>
+                <h3 for="other-number">Other number</h3>
+                <p type="number" min="1" id="other-number" class="long-num">
+            </li>
+        </ul>
+
+
+        <h2>Owner Info</h2>
+        <ul class="inputs" id="owner-info">
+            <li><h3 for="name">Name</h3>
+            <p type="text" id="name"></li>
+
+            <li>
+                <h3 for="address">Address</h3>
+                <p type="text" id="address">
+            </li>
+
+            <li>
+                <h3 for="town">Town</h3>
+                <p type="text" id="town">
+            </li>
+
+            <li>
+                <h3 for="zip-code">Zip code</h3>
+                <p type="number" min="1" id="zip-code" class="med-num">
+            </li>
+        </ul>
+
+        <h2>Well location</h2>
+        <ul class="inputs" id="owner-info">
+
+            <li>
+                <h3 for="address">Address</h3>
+                <p type="text" id="address">
+            </li>
+
+            <li>
+                <h3 for="town">Town</h3>
+                <p type="text" id="town">
+            </li>
+
+            <li>
+                <h3 for="zip-code">Zip code</h3>
+                <p type="number" min="1" id="zip-code" class="med-num">
+            </li>
+
+            <li>
+                <h3 for="lot-number">Lot number</h3>
+                <p type="number" min="1" id="lot-number" class="med-num">
+            </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>
+            </li>
+
+            <li>
+                <h3 for="relative-location">Location relative to three permanent landmarks</h3>
+                <textarea id="relative-location"></textarea>
+            </li>
+
+            <li>
+                <h3 for="use">Use</h3>
+                
+                <p type="text" id="other-use-case" class="other">
+            </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">
+            </li>
+
+        </ul>
+
+        <h2>Casing Details</h2>
+        <ul class="inputs" id="casing-details">
+            <li>
+                <h3 for="length">Length</h3>
+                <p type="number" min="1" id="length"> feet
+            </li>
+            <li>
+                <h3 for="diameter">Diameter</h3>
+                <p type="number" min="1" id="diameter"> inches
+            </li>
+
+            <li>
+                <h3 for="weight">Weight per foot</h3>
+                <p type="number" min="1" id="weight"> lbs/feet
+            </li>
+
+            <li>
+                <p type="radio" name="threaded-vs-welded" value="Threaded"> Threaded
+                <p type="radio" name="threaded-vs-welded" value="Welded"> Welded
+            </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
+            </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
+            </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>
+            </li>
+            <li>
+                <h3 for="yield-hours">Test duration</h3>
+                <p type="number" min="1" id="yield-hours"> hours
+            </li>
+
+            <li>
+                <h3 for="yield-gpm">Yield</h3>
+                <p type="number" min="1" id="yeld-gpm"> gallons per minute
+            </li>
+
+        </ul>
+
+        <h2>Water Level</h2>
+        <ul class="ps" id="yield-test">
+            <li>
+                <h3 for="water-from-surface">From land surface</h3>
+                <p type="number" min="1" id="water-from-surface"> feet
+            </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
+            </li>
+
+            <li>
+                <h3 for="depth-of-well">Depth of complete well</h3>
+                <p type="number" min="1" id="water-from-surface"> feet
+            </li>
+
+        </ul>
+
+        <h2>Screen Details</h2>
+        <ul class="inputs" id="screen-details">
+            <li>
+                <h3 for="make">Make</h3>
+                <p type="text" id="make">
+            </li>
+
+            <li>
+                <h3 for="length-open-to-aquifier">Length open to aquifier</h3>
+                <p type="number" min="1" id="length-open-to-aquifier"> feet
+            </li>
+
+            <li>
+                <h3 for="slot-size">Slot size</h3>
+                <p type="number" min="1" id="slot-size">
+            </li>
+
+            <li>
+                <h3 for="diameter">Diameter</h3>
+                <p type="number" min="1" id="diameter"> inches
+            </li>
+
+            <li>
+                <h3 for="gravel">Gravel</h3>
+                <p type="radio" name="gravel" value="Packed"> Packed
+                <p type="radio" name="gravel" value="Unpacked"> Unpacked
+            </li>
+
+            <li>
+                <h3 for="diameter-including-gravel-pack">Diameter including gravel pack</h3>
+                <p type="number" min="1" id="diameter-including-gravel-pack"> inches
+            </li>
+
+            <li>
+                <h3 for="gravel-size">Gravel size</h3>
+                <p type="number" min="1" id="gravel-size"> inches
+            </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
+            </li>
+
+        </ul>
+
+        <h2>Depth From Land To Surface</h2>
+        <ul class="inputs" id="depth-from-surface">
+
+            <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
+            </li>
+
+        </ul>
+
+        <p type="submit" value="Submit">
+    </main>
+
+
+    <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>
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+        (function (b, o, i, l, e, r) {
+            b.GoogleAnalyticsObject = l;
+            b[l] || (b[l] = function () {
+                (b[l].q = b[l].q || []).push(arguments)
+            });
+            b[l].l = +new Date;
+            e = o.createElement(i);
+            r = o.getElementsByTagName(i)[0];
+            e.src = 'https://www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e, r)
+        }(window, document, 'script', 'ga'));
+        ga('create', 'UA-XXXXX-X', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+</html>
diff --git a/html-ONLY-site/img/back.svg b/html-ONLY-site/img/back.svg
new file mode 100644
index 0000000..f41f60f
--- /dev/null
+++ b/html-ONLY-site/img/back.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48h-48z" fill="none"/>
+    <path d="M40 22h-24.34l11.17-11.17-2.83-2.83-16 16 16 16 2.83-2.83-11.17-11.17h24.34v-4z"/>
+</svg>
diff --git a/html-ONLY-site/img/close.svg b/html-ONLY-site/img/close.svg
new file mode 100644
index 0000000..40b5e39
--- /dev/null
+++ b/html-ONLY-site/img/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>
\ No newline at end of file
diff --git a/html-ONLY-site/img/edit.svg b/html-ONLY-site/img/edit.svg
new file mode 100644
index 0000000..887efc6
--- /dev/null
+++ b/html-ONLY-site/img/edit.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M6 34.5v7.5h7.5l22.13-22.13-7.5-7.5-22.13 22.13zm35.41-20.41c.78-.78.78-2.05 0-2.83l-4.67-4.67c-.78-.78-2.05-.78-2.83 0l-3.66 3.66 7.5 7.5 3.66-3.66z"/>
+    <path d="M0 0h48v48h-48z" fill="none"/>
+</svg>
diff --git a/html-ONLY-site/index.html b/html-ONLY-site/index.html
index e758afe..8220c7b 100644
--- a/html-ONLY-site/index.html
+++ b/html-ONLY-site/index.html
@@ -58,7 +58,7 @@ <h3>my.name@ct.gov</h3>
     <nav class="bottom-nav">
         <button><a href="index.html"><img src="img/map.svg" alt="menu" /></a></button>
         <button><a href="wells-list.html"><img src="img/well.png" alt="menu" /></a></button>
-        <button><a href=""><img src="img/problem.svg" alt="menu" /></a></button>
+        <button><a href="problems.html"><img src="img/problem.svg" alt="menu" /></a></button>
     </nav>
 
     <nav class="fabs">
diff --git a/html-ONLY-site/problems.html b/html-ONLY-site/problems.html
new file mode 100644
index 0000000..8f3559f
--- /dev/null
+++ b/html-ONLY-site/problems.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html class="no-js" lang="">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title></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">
+    
+    <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">
+        <button onclick="document.getElementById('menu').classList.toggle('closed'); document.getElementById('close-menu').classList.toggle('closed')"><img src="img/menu.svg" alt="menu" /></button>
+        <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>
+        <div class="slide-menu closed" id="menu">
+            <p>Currntly signed in as:
+                <h3>my.name@ct.gov</h3>
+            </p>
+            <a href="#">Logout</a>
+            <a class="settings" href="#">Settings</a>
+        
+        </div>
+    </nav>
+
+    <main>
+
+        <div class="well-card clearfix">
+            <div>
+                <h2>Problem Name</h2>
+                <p>problem description</p>
+            </div>
+        </div>
+
+    </main>
+
+    <nav class="bottom-nav">
+        <button><a href="index.html"><img src="img/map.svg" alt="menu" /></a></button>
+        <button><a href="wells-list.html"><img src="img/well.png" alt="menu" /></a></button>
+        <button><a href="problems.html"><img src="img/problem.svg" alt="menu" /></a></button>
+    </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>
+    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+    <script>
+        (function (b, o, i, l, e, r) {
+            b.GoogleAnalyticsObject = l;
+            b[l] || (b[l] = function () {
+                (b[l].q = b[l].q || []).push(arguments)
+            });
+            b[l].l = +new Date;
+            e = o.createElement(i);
+            r = o.getElementsByTagName(i)[0];
+            e.src = 'https://www.google-analytics.com/analytics.js';
+            r.parentNode.insertBefore(e, r)
+        }(window, document, 'script', 'ga'));
+        ga('create', 'UA-XXXXX-X', 'auto');
+        ga('send', 'pageview');
+    </script>
+</body>
+
+</html>
diff --git a/html-ONLY-site/wells-list.html b/html-ONLY-site/wells-list.html
index 520b724..ca0b862 100644
--- a/html-ONLY-site/wells-list.html
+++ b/html-ONLY-site/wells-list.html
@@ -33,12 +33,23 @@
 
 
     <nav class="top-nav">
-        <button><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>
         <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>
+        <div class="slide-menu closed" id="menu">
+            <p>Currntly signed in as:
+                <h3>my.name@ct.gov</h3>
+            </p>
+            <a href="#">Logout</a>
+            <a class="settings" href="#">Settings</a>
+        
+        </div>
     </nav>
 
     <main>
 
+        <a href="details.html">
         <div class="well-card clearfix">
             <div class="well-img"></div>
             <div>
@@ -46,13 +57,14 @@ <h2>Well Name</h2>
                 <p>short well description</p>
             </div>
         </div>
+            </a>
 
     </main>
 
     <nav class="bottom-nav">
         <button><a href="index.html"><img src="img/map.svg" alt="menu" /></a></button>
         <button><a href="wells-list.html"><img src="img/well.png" alt="menu" /></a></button>
-        <button><a href=""><img src="img/problem.svg" alt="menu" /></a></button>
+        <button><a href="problems.html"><img src="img/problem.svg" alt="menu" /></a></button>
     </nav>
 
 
