diff --git a/html-ONLY-site/css/desktop.css b/html-ONLY-site/css/desktop.css
new file mode 100644
index 0000000..60e1a38
--- /dev/null
+++ b/html-ONLY-site/css/desktop.css
@@ -0,0 +1,21 @@
+@media only screen and (min-width: 65em) {
+	
+
+}
+
+@media only screen and (min-width: 45em) {
+	div.well-card {
+    	border: 2px solid #4d4d4d;
+		margin: 1.5rem;
+	}
+	main.search{
+		display: flex;
+		justify-content: center;
+	}
+	
+	main.search a{
+		color: inherit;
+		width: 50%;
+	}
+
+}
\ No newline at end of file
diff --git a/html-ONLY-site/css/main.css b/html-ONLY-site/css/main.css
index b7ee4d8..4af3c66 100644
--- a/html-ONLY-site/css/main.css
+++ b/html-ONLY-site/css/main.css
@@ -84,36 +84,48 @@ textarea {
   box-sizing: border-box;
   font-family: "roboto";
 }
-
 main.intro{
-    position: fixed;
-    margin-top: 0;
-    padding: 3rem;
+    margin: 0;
+    padding: 0;
+    width: 100vw;
+    height: 100vh;
     background-color: #65b2ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+div.intro{
+    margin-top: 1rem;
+    margin: 1rem 1rem 1rem 1rem;
+    padding: 3rem;
     height: 100vh;
     top: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     text-align: center;
+    max-width: 35rem;
+    max-height: 40rem;
 }
 
-main.intro h1{
-    font-size: 2.75rem;
+.intro h1{
+    font-size: 2.3rem;
     color: #000633;
 }
-main.intro p{
+.intro p{
     text-align: left;
     height: 40vh;
-    color: white
+    color: white;
+    line-height: 1.45rem;
 }
-main.intro a{
+.intro a{
     font-size: 2rem;
     color: white;
     text-decoration: none;
     padding: 1rem;
     background-color: #000633;
     border-radius: 10px;
+    width: 100%;
 }
 nav h1{
     flex-grow: 1;
@@ -145,9 +157,15 @@ div.slide-menu{
   display: flex;
   flex-direction: column;
   padding: 1rem;
-  //padding-top: 5rem;
   box-shadow: 5px 0px 8px rgba(0, 0, 0, 0.35);
 }
+
+div.main-bttns{
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+}
 div.slide-menu button{
  margin: 1rem 0;
     text-align: left;
@@ -155,10 +173,10 @@ div.slide-menu button{
     font-size: 1.2rem;
 }
 div.slide-menu p{
-    //margin-top: rem;
+/*    margin-top: rem;*/
 }
 div.slide-menu a{
-    //margin-top: 0rem;
+/*    margin-top: 0rem;*/
 }
 div.close-menu{
     position: fixed;
@@ -246,11 +264,17 @@ button {
 main{
     margin-top: 4.1rem;
 }
+main.map {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
 main.details {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: flex-start
+    align-items: flex-start;
 }
 form{
     
@@ -350,14 +374,24 @@ input[type=search]{
   margin: .5rem;
   background: rgba(255, 255, 255, 0.19);
   border: none;
-  //border-bottom: 2px rgb(255, 255, 255) solid;
+/*  //border-bottom: 2px rgb(255, 255, 255) solid;*/
   color: white;
   font-weight: 600;
   font-size: 1.2rem;
   border-radius: 5px;
+	max-width: 40rem;
 }
-main.details{
+nav.search{
+	justify-content: center;
 }
+div.desk-details {
+    display: none;
+}
+
+
+
+
+
 
 /* ==========================================================================
    Helper classes
diff --git a/html-ONLY-site/css/map-desktop.css b/html-ONLY-site/css/map-desktop.css
new file mode 100644
index 0000000..9c6b616
--- /dev/null
+++ b/html-ONLY-site/css/map-desktop.css
@@ -0,0 +1,60 @@
+@media only screen and (min-width: 65em) {
+  /* Style adjustments for viewports that meet the condition */ 
+    nav.top-nav{
+        width: 5rem;
+    }
+    nav.top-nav div.main-bttns{
+        flex-direction: column;
+    }
+    nav.top-nav h1{
+        display: none;
+    }
+    nav .slide-menu{
+    } 
+    
+    nav.bottom-nav{
+        width: 5rem;
+        flex-direction: column;
+        height: calc(100vh - 8rem);
+        margin-top: 5rem;
+        justify-content: flex-start;
+        padding-top: 4rem;
+    }
+    nav.bottom-nav button{
+        margin-bottom: 3rem;
+    }
+
+    div.well-card{
+        margin-left: 0;
+        margin-right: 0;
+        top: auto;
+        bottom: 1rem;
+        left: auto;
+        right: auto;
+        display: none;
+    }
+    
+    div.desk-details{
+        display: block;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 23rem;
+        height: 100vh;
+        overflow-y: scroll;
+        border-left: solid black 2px;
+    }
+    div.desk-details ul{
+		margin: 1rem
+	}
+	div.desk-details li, div.desk-details p{
+		margin: 0rem
+	}
+    nav.fabs{
+        left: 6rem;
+        bottom: 1rem;
+    }
+    main.details{
+        margin-top: 0rem;
+    }
+}
\ No newline at end of file
diff --git a/html-ONLY-site/css/well-card.css b/html-ONLY-site/css/well-card.css
index e74d63a..7081a3e 100644
--- a/html-ONLY-site/css/well-card.css
+++ b/html-ONLY-site/css/well-card.css
@@ -14,6 +14,11 @@ div.well-card p{
 }
 div.well-card {
     border-bottom: 2px solid #4d4d4d;
+    max-width: 41rem;
+	width: 100%;
+/*	display: block;*/
+/*	margin-left: 0;*/
+/*	margin-right: 0;*/
 }
 
 div.well-card .well-img{
@@ -23,4 +28,12 @@ div.well-card .well-img{
     float: left;
     width: 35%;
     height: 8rem;
+}
+
+a.search-result{
+	color: inherit;
+}
+
+@media only screen and (min-width: 65em) {
+    
 }
\ No newline at end of file
diff --git a/html-ONLY-site/details.html b/html-ONLY-site/details-content.php
similarity index 75%
rename from html-ONLY-site/details.html
rename to html-ONLY-site/details-content.php
index 6803427..3e84a08 100644
--- a/html-ONLY-site/details.html
+++ b/html-ONLY-site/details-content.php
@@ -1,41 +1,4 @@
-<!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="map.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="https://s-media-cache-ak0.pinimg.com/originals/33/c2/c4/33c2c4cf367ecee38a162d362a31fd68.jpg"/>
 
         <ul class="inputs" id="report-metadata">
@@ -271,31 +234,4 @@ <h2>Other Notes</h2>
         </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>
+  
\ No newline at end of file
diff --git a/html-ONLY-site/details.php b/html-ONLY-site/details.php
new file mode 100644
index 0000000..a82fe0d
--- /dev/null
+++ b/html-ONLY-site/details.php
@@ -0,0 +1,67 @@
+<!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="map.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">
+
+<?php 
+	include 'details-content.php';
+?>
+<main class="details">
+    <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/form.html b/html-ONLY-site/form.html
index c357a4f..c97f81c 100644
--- a/html-ONLY-site/form.html
+++ b/html-ONLY-site/form.html
@@ -31,7 +31,7 @@
 
 
     <nav class="top-nav">
-        <button><a href="map.html">Cancel</a></button>
+        <button><a href="map.php">Cancel</a></button>
         <button>Save Draft</button>
     </nav>
 
diff --git a/html-ONLY-site/index.html b/html-ONLY-site/index.html
index e6c41ea..dd7027f 100644
--- a/html-ONLY-site/index.html
+++ b/html-ONLY-site/index.html
@@ -22,12 +22,12 @@
     <!-- Add your site or application content here -->
 
     
-    <main class="intro">
-
+    <main class="intro clearfix">
+        <div class="intro">
         <h1>Connecticut<br>Well Report App</h1>
         <p>Use this app to pull up data on any well in Connecticut on site and see it's details. Also, fill out and submit well report forms within the app.</p>
-        <a href="map.html">Continue</a>
-        
+        <a href="map.php">Continue</a>
+        </div>
     </main>
 
     
diff --git a/html-ONLY-site/map.html b/html-ONLY-site/map.php
similarity index 83%
rename from html-ONLY-site/map.html
rename to html-ONLY-site/map.php
index c7fe06b..a5f6004 100644
--- a/html-ONLY-site/map.html
+++ b/html-ONLY-site/map.php
@@ -1,12 +1,12 @@
 
 
-<!doctype html>
+<!DOCTYPE html>
 <html class="no-js" lang="">
 
 <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title></title>
+    <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">
@@ -14,6 +14,7 @@
     <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>
 
@@ -34,8 +35,10 @@
 
 
     <nav class="top-nav">
+        <div class="main-bttns">
         <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>
+        <a href="search.html"><button><img src="img/search.svg" alt="menu" /></button></a>
+        </div>
         
         <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">
@@ -54,7 +57,7 @@ <h3>my.name@ct.gov</h3>
         </div>
     </nav>
 
-    <main>
+    <main class="map">
         <div style="height:100%; width: 100%; position:absolute;"> 
             <div id="map"></div>
         </div>
@@ -71,12 +74,18 @@ <h2>Well Name</h2>
                 <a href="details.html">DETAILS</a>
             </div>
         </div>
+        
+        <div class="desk-details">
+        <?php
+            include 'details-content.php';
+            ?>
+        </div>
 
     </main>
 
     <nav class="bottom-nav">
-        <button><a href="map.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="map.php"><img src="img/map.svg" alt="menu" /></a></button>
+        <button><a href="wells-list.php"><img src="img/well.png" alt="menu" /></a></button>
     </nav>
 
     <nav class="fabs">
@@ -115,9 +124,9 @@ <h2>Well Name</h2>
 
 
 </html>
-// notes :
-
-
+<!--
+notes :
+we will need a file where we import the well name, address, longiture and latitude within the range we chose
 
-// 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
+we need a food loop for it
+-->
\ No newline at end of file
diff --git a/html-ONLY-site/search.html b/html-ONLY-site/search.html
index e4933d2..9e7faea 100644
--- a/html-ONLY-site/search.html
+++ b/html-ONLY-site/search.html
@@ -12,6 +12,7 @@
     <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/desktop.css">
     
     <script src="js/vendor/modernizr-2.8.3.min.js"></script>
 </head>
@@ -32,21 +33,21 @@
 
 
 
-    <nav class="top-nav">
+    <nav class="top-nav search">
         <input type="search" >
-        <button><a href="map.html"><img src="img/close.svg" alt="close" /></a></button>
+        <button><a href="map.php"><img src="img/close.svg" alt="close" /></a></button>
     </nav>
 
-    <main>
-
-        <div class="well-card clearfix">
-            <div class="well-img"></div>
-            <div>
-                <h2>Well Name</h2>
-                <p>short well description</p>
-            </div>
-        </div>
-
+    <main class="search">
+		<a href="details.php" class="search-result">
+			<div class="well-card clearfix">
+				<div class="well-img"></div>
+				<div>
+					<h2>Well Name</h2>
+					<p>short well description</p>
+				</div>
+			</div>
+		</a>
     </main>