diff --git a/activities.html b/activities.html
index 3b5ef90..9aab00e 100644
--- a/activities.html
+++ b/activities.html
@@ -12,55 +12,67 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
     <![endif]-->
 
+    <script src="/js/hiddenNav.js"></script>
     <!-- Completed files -->
 </head>
 
 <body>
-<div id="wrapper">
+<div>
     <header>
         <h1>Atlantic Fishing Resort</h1>
-        <nav>
-            <ul>
-                <li>
-                    <a href="index.html">Home</a>
-                </li>
-                <li>
-                    <a href="units.html">Units</a>
-                </li>
-                <li>
-                    <a href="#" class="active">Activities</a>
-                </li>
-                <li>
-                    <a href="reservations.html">Reservations</a>
-                </li>
-            </ul>
-        </nav>
+        <div id="mySidenav" class="sideNav">
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+            <a href="index.html">Home</a>
+            <a href="units.html">Units</a>
+            <a href="#" class="active">Activities</a>
+            <a href="reservations.html">Reservations</a>
+        </div>
+        <div id="main">
+            <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
+        </div>
+        <div class="mainNav">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="index.html">Home</a>
+                    </li>
+                    <li>
+                        <a href="units.html">Units</a>
+                    </li>
+                    <li>
+                        <a href="#" class="active">Activities</a>
+                    </li>
+                    <li>
+                        <a href="reservations.html">Reservations</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
     </header>
-
     <main>
         <h2>Activities while staying at Atlantic Fishing Resort</h2>
         <article id="activity-focus">
-        <div>
-            <h3>Dune Adventures</h3>
-            <p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a
-                guided
-                scenic drive either on camels or quadbikes for the more adventurous.</p>
-        </div>
-        <div>
-        <h3>Shore Fishing</h3>
-        <p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or rent
-            fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of
-            sunscreens.</p>
-        </div>
-        <div>
-        <h3>Dolphin &amp; Bird Watching</h3>
-        <p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and
-            birdwatching
-            boat trips available daily.</p>
-        </div>
+            <div>
+                <h3>Dune Adventures</h3>
+                <p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a
+                    guided
+                    scenic drive either on camels or quadbikes for the more adventurous.</p>
+            </div>
+            <div>
+                <h3>Shore Fishing</h3>
+                <p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or
+                    rent
+                    fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of
+                    sunscreens.</p>
+            </div>
+            <div>
+                <h3>Dolphin &amp; Bird Watching</h3>
+                <p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and
+                    birdwatching
+                    boat trips available daily.</p>
+            </div>
         </article>
     </main>
-
     <footer>
         Copyright © 1999 Atlantic Fishing Resort<br>
         <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
diff --git a/css/atlantic.css b/css/atlantic.css
index cd6779b..8c9762d 100644
--- a/css/atlantic.css
+++ b/css/atlantic.css
@@ -1,13 +1,100 @@
-/* Nav Bar */
-header nav {
+table {
+    width: 100%;
+    font-size: 12px;
+    border-collapse: collapse;
+}
+
+th {
+    text-align: left;
+}
+
+tr {
+    border: 1px solid;
+}
+
+/* Form style */
+fieldset {
+    margin: 10px 2px;
+    padding: 10px 20px;
+}
+
+/* submit button */
+input[type=submit] {
+    background: rgb(35, 55, 55);
+    background: linear-gradient(180deg, rgba(35, 55, 55, 1) 0%, rgba(100, 131, 131, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
+    box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 15px 60px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    float: right;
+    font-weight: bold;
+}
+
+/* change the submit button style on hover */
+input[type=submit]:hover {
+    background: rgb(35, 55, 55);
+    background: linear-gradient(0deg, rgba(35, 55, 55, 1) 0%, rgba(103, 140, 140, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
+    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
+    color: lightgrey;
+    font-weight: bold;
+}
+
+/* Focus on field that is being entered*/
+input:focus {
+    background-color: darkslategrey;
+    color: white;
+}
+
+.form-padding {
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 50px;
+}
+
+/* container */
+.container {
+    margin-top: 20px;
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 30px 30px 80px;
+    box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
+    -webkit-box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
+}
+
+/* remove floats after columns*/
+.row {
+    max-width: 100%;
+    margin-bottom: 10px;
+}
+
+/* Center the contact form */
+#contactForm {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+}
+
+/* Sizing of input fields */
+input {
+    padding: 5px 5px;
+    font-size: 14px;
+}
+
+/* Main Nav Bar */
+.mainNav nav {
     padding: 0;
 }
 
-header nav a {
+.mainNav nav a {
     text-decoration: none;
 }
 
-header .active {
+.mainNav .active {
     text-decoration-color: lightblue;
     padding: 0 10px;
     background: rgb(34, 34, 34);
@@ -15,7 +102,7 @@ header .active {
     box-shadow: inset 0 0 10px #000000;
 }
 
-header nav ul {
+.mainNav nav ul {
     padding-left: 0;
     list-style-type: none;
     background: rgb(46, 44, 47);
@@ -23,10 +110,9 @@ header nav ul {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    font-family: "Liberation Sans", sans-serif;
 }
 
-header ul li *[href]:link {
+.mainNav ul li *[href]:link {
     color: whitesmoke;
     padding: 0 10px;
     background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@@ -34,7 +120,7 @@ header ul li *[href]:link {
     flex-grow: inherit;
 }
 
-header ul li *[href]:visited {
+.mainNav ul li *[href]:visited {
     color: aliceblue;
     padding: 0 10px;
     background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@@ -42,7 +128,7 @@ header ul li *[href]:visited {
     flex-grow: inherit;
 }
 
-header ul li *[href]:hover {
+.mainNav ul li *[href]:hover {
     color: lightskyblue;
     padding: 0 10px;
     background: rgb(34, 34, 34);
@@ -50,6 +136,41 @@ header ul li *[href]:hover {
     box-shadow: inset 0 0 10px #000000;
 }
 
+/* Side nav bar */
+.sideNav {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: #111;
+    overflow-x: hidden;
+    transition: 0.5s;
+    padding-top: 60px;
+}
+
+.sideNav a {
+    padding: 8px 8px 8px 32px;
+    text-decoration: none;
+    font-size: 25px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+.sideNav a:hover {
+    color: #f1f1f1;
+}
+
+.sideNav .closebtn {
+    position: absolute;
+    top: 0;
+    right: 25px;
+    font-size: 36px;
+    margin-left: 50px;
+}
+
 .flex-container {
     display: flex;
     flex-wrap: wrap;
@@ -58,6 +179,15 @@ header ul li *[href]:hover {
     flex-direction: column;
 }
 
+.geoLoc {
+    text-align: center;
+}
+
+#main {
+    transition: margin-left .5s;
+    padding: 16px;
+}
+
 #hero {
     background-color: white;
     padding: 20px;
@@ -88,51 +218,9 @@ header ul li *[href]:hover {
     text-align: center;
 }
 
-@keyframes image-fun {
-    0% {
-        left: -500px;
-        top: -300px;
-        -webkit-transform: rotateZ(0deg);
-        -moz-transform: rotateZ(0deg);
-        -o-transform: rotateZ(0deg);
-        transform: rotateZ(0deg);
-        width: 10px;
-    }
-    100% {
-        left: 0px;
-        top: 0px;
-        -webkit-transform: rotateZ(360deg);
-        -moz-transform: rotateZ(360deg);
-        -o-transform: rotateZ(360deg);
-        transform: rotateZ(360deg);
-        width: 320px;
-    }
-}
-
-@keyframes image-spin {
-    0% {
-        left: 0;
-        top: 100px;
-        -webkit-transform: rotateY(0deg);
-        -moz-transform: rotateY(0deg);
-        -o-transform: rotateY(0deg);
-        transform: rotateY(0deg);
-        width: 10px;
-    }
-    100% {
-        left: 0;
-        top: 0;
-        -webkit-transform: rotateY(360deg);
-        -moz-transform: rotateY(360deg);
-        -o-transform: rotateY(360deg);
-        transform: rotateY(360deg);
-        width: 320px;
-    }
-}
-
 #default-image {
     border-radius: 20px;
-    width: 320px;
+    width: 300px;
     position: relative;
     animation-name: image-fun;
     animation-duration: 2s;
@@ -163,89 +251,127 @@ header ul li *[href]:hover {
     font-size: 16px;
 }
 
-/* Mobile devices */
-@media screen and (max-width: 320px) {
+@keyframes image-fun {
+    0% {
+        left: -500px;
+        top: -300px;
+        -webkit-transform: rotateZ(0deg);
+        -moz-transform: rotateZ(0deg);
+        -o-transform: rotateZ(0deg);
+        transform: rotateZ(0deg);
+        width: 10px;
+    }
+    100% {
+        left: 0px;
+        top: 0px;
+        -webkit-transform: rotateZ(360deg);
+        -moz-transform: rotateZ(360deg);
+        -o-transform: rotateZ(360deg);
+        transform: rotateZ(360deg);
+        width: 300px;
+    }
+}
 
-    header nav ul {
-        height: 40px;
-        font-size: 0.9rem;
+@keyframes image-spin {
+    0% {
+        left: 0;
+        top: 100px;
+        -webkit-transform: rotateY(0deg);
+        -moz-transform: rotateY(0deg);
+        -o-transform: rotateY(0deg);
+        transform: rotateY(0deg);
+        width: 10px;
+    }
+    100% {
+        left: 0;
+        top: 0;
+        -webkit-transform: rotateY(360deg);
+        -moz-transform: rotateY(360deg);
+        -o-transform: rotateY(360deg);
+        transform: rotateY(360deg);
+        width: 300px;
+    }
+}
+
+/* iPhone and Android (Portrait) */
+@media screen and (max-width: 320px) {
+    .sidenav {
+        padding-top: 15px;
     }
 
-    header ul li *[href] {
-        line-height: 40px;
-        height: 40px;
+    .sidenav a {
+        font-size: 18px;
+    }
+
+    .mainNav {
+        display: none;
     }
 
     h1 {
         font-size: 20px;
     }
+
+    video {
+        display: none;
+    }
 }
 
-/* iPads, Tablets. */
-@media screen and (min-width: 321px) {
+@media screen and (max-width: 479px) {
+    .mainNav {
+        display: none;
+    }
 
-    header nav ul {
+    h1 {
+        font-size: 20px;
+    }
+
+    video {
+        display: none;
+    }
+
+    img#small_image {
+        width: 100%;
+    }
+}
+
+/* iPhone and Android (Landscape) */
+@media screen and (min-width: 480px) {
+    table {
+        font-size: 16px;
+    }
+
+    .sideNav {
+        display: none;
+    }
+
+    /* column for the label */
+    .col-25 {
+        float: left;
+        text-align: left;
+        width: 150px;
+    }
+
+    /* column for the input fields */
+    .col-75 {
+        margin-left: 130px;
+        max-width: 100%;
+        padding-top: 10px;
+    }
+
+    #main {
+        display: none;
+    }
+
+    .mainNav nav ul {
         height: 40px;
         font-size: 1rem;
     }
 
-    header ul li *[href] {
+    .mainNav ul li *[href] {
         line-height: 40px;
         height: 40px;
     }
 
-    img#large_image {
-        display: none;
-    }
-
-    img#small_image {
-        display: block;
-        width: 100%;
-    }
-
-    h1 {
-        font-size: 26px;
-    }
-
-    video {
-        display: none;
-    }
-}
-
-/* Small screens, laptops */
-@media screen and (min-width: 768px) {
-
-    header nav ul {
-        height: 50px;
-        font-size: 1.4rem;
-    }
-
-    header ul li *[href] {
-        line-height: 50px;
-        height: 50px;
-    }
-
-    img#small_image {
-        display: none;
-    }
-
-    img#large_image {
-        display: block;
-        width: 100%;
-    }
-
-    .flex-container {
-        flex-direction: row;
-    }
-
-    h1 {
-        font-size: 36px;
-    }
-
-    video {
-        display: inline-block;
-    }
-
     @keyframes image-fun {
         0% {
             left: -500px;
@@ -266,6 +392,7 @@ header ul li *[href]:hover {
             width: 650px;
         }
     }
+
     @keyframes image-spin {
         0% {
             left: 0;
@@ -276,6 +403,7 @@ header ul li *[href]:hover {
             transform: rotateY(0deg);
             width: 10px;
         }
+
         100% {
             left: 0;
             top: 0;
@@ -289,7 +417,7 @@ header ul li *[href]:hover {
 
     #default-image {
         border-radius: 20px;
-        width: 650px;
+        width: 100%;
         position: relative;
         animation-name: image-fun;
         animation-duration: 2s;
@@ -302,38 +430,106 @@ header ul li *[href]:hover {
         animation-name: image-spin;
         animation-duration: 2s;
     }
+
+    h1 {
+        font-size: 24px;
+    }
+
+    video {
+        display: none;
+    }
+
+    img#small_image {
+        width: 100%;
+    }
 }
 
+/* iPad (portrait) */
+@media screen and (min-width: 768px) {
 
-/* Desktops, large screens. */
+    .mainNav nav ul {
+        height: 50px;
+        font-size: 1.4rem;
+    }
+
+    .mainNav ul li *[href] {
+        line-height: 50px;
+        height: 50px;
+    }
+
+    .form-padding {
+        padding-left: 100px;
+        padding-right: 100px;
+    }
+
+    img#small_image {
+        display: none;
+    }
+
+    #default-image {
+        width: 650px;
+    }
+
+    img#large_image {
+        display: block;
+        width: 100%;
+    }
+
+    .flex-container {
+        flex-direction: row;
+    }
+
+    h1 {
+        font-size: 36px;
+    }
+
+    video {
+        display: inline-block;
+    }
+}
+
+/* Standard Resolution Monitors */
 @media screen and (min-width: 1024px) {
+    table {
+        font-size: 24px;
+    }
 
-    header nav ul {
+    .mainNav nav ul {
         height: 50px;
         font-size: 1.6rem;
     }
 
-    header ul li *[href] {
+    .mainNav ul li *[href] {
         line-height: 50px;
         height: 50px;
     }
 
+    .form-padding {
+        padding-left: 200px;
+        padding-right: 200px;
+    }
+
     h1 {
         font-size: 46px;
     }
 }
 
-/* Extra large screens, TV. */
-@media screen and (min-width: 1401px) {
+/* High Resolution Monitors */
+@media screen and (min-width: 1366px) {
 
-    header nav ul {
+    .mainNav nav ul {
         height: 50px;
         font-size: 2rem;
     }
 
-    header ul li *[href] {
+    .mainNav ul li *[href] {
         line-height: 50px;
         height: 50px;
     }
+
+    .form-padding {
+        padding-left: 300px;
+        padding-right: 300px;
+    }
 }
 
diff --git a/index.html b/index.html
index 71c8bb9..0b1cb75 100644
--- a/index.html
+++ b/index.html
@@ -13,29 +13,41 @@
     <![endif]-->
 
     <script src="/js/geo.js"></script>
+    <script src="/js/hiddenNav.js"></script>
 
     <!-- Completed files -->
 </head>
 <body>
-<header id="wrapper">
+<header>
     <h1>Atlantic Fishing Resort</h1>
-    <nav>
-        <ul>
-            <li>
-                <a href="#" class="active">Home</a>
-            </li>
-            <li>
-                <a href="units.html">Units</a>
-            </li>
-            <li>
-                <a href="activities.html">Activities</a>
-            </li>
-            <li>
-                <a href="reservations.html">Reservations</a>
-            </li>
-        </ul>
-    </nav>
-
+    <div id="mySidenav" class="sideNav">
+        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+        <a href="#" class="active">Home</a>
+        <a href="units.html">Units</a>
+        <a href="activities.html">Activities</a>
+        <a href="reservations.html">Reservations</a>
+    </div>
+    <div id="main">
+        <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
+    </div>
+    <div class="mainNav">
+        <nav>
+            <ul>
+                <li>
+                    <a href="#" class="active">Home</a>
+                </li>
+                <li>
+                    <a href="units.html">Units</a>
+                </li>
+                <li>
+                    <a href="activities.html">Activities</a>
+                </li>
+                <li>
+                    <a href="reservations.html">Reservations</a>
+                </li>
+            </ul>
+        </nav>
+    </div>
 </header>
 <main>
     <div id="hero">
@@ -62,7 +74,7 @@
         </article>
     </div>
     <article>
-        <div style="padding: 50px 50px;">
+        <div style="padding: 50px 10px;">
             <div class="flex-container">
                 <div>
                     <h3>Find us</h3>
@@ -73,7 +85,7 @@
                     <!--Position information will be inserted here-->
                     <div id="result"></div>
                 </div>
-                <div style="padding: 50px 0; text-align: center">
+                <div class="geoLoc">
                     <img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort">
                     <img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
                          style="display: none;">
diff --git a/js/hiddenNav.js b/js/hiddenNav.js
new file mode 100644
index 0000000..1606688
--- /dev/null
+++ b/js/hiddenNav.js
@@ -0,0 +1,9 @@
+function openNav() {
+    document.getElementById("mySidenav").style.width = "250px";
+    document.getElementById("main").style.marginLeft = "250px";
+}
+
+function closeNav() {
+    document.getElementById("mySidenav").style.width = "0";
+    document.getElementById("main").style.marginLeft= "0";
+}
\ No newline at end of file
diff --git a/reservations.html b/reservations.html
index c55f255..4d287c2 100644
--- a/reservations.html
+++ b/reservations.html
@@ -12,64 +12,118 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
     <![endif]-->
 
+    <script src="/js/hiddenNav.js"></script>
     <!-- Completed files -->
 </head>
 
 <body>
-<div id="wrapper">
+<div>
     <header>
         <h1>Atlantic Fishing Resort</h1>
-
-        <nav>
-            <ul>
-                <li>
-                  <a href="index.html">Home</a>
-                </li>
-                <li>
-                  <a href="units.html">Units</a>
-                </li>
-                <li>
-                  <a href="activities.html">Activities</a>
-                </li>
-                <li>
-                  <a href="#" class="active">Reservations</a>
-                </li>
-            </ul>
-        </nav>
+        <div id="mySidenav" class="sideNav">
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+            <a href="index.html">Home</a>
+            <a href="units.html">Units</a>
+            <a href="activities.html">Activities</a>
+            <a href="#" class="active">Reservations</a>
+        </div>
+        <div id="main">
+            <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
+        </div>
+        <div class="mainNav">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="index.html">Home</a>
+                    </li>
+                    <li>
+                        <a href="units.html">Units</a>
+                    </li>
+                    <li>
+                        <a href="activities.html">Activities</a>
+                    </li>
+                    <li>
+                        <a href="#" class="active">Reservations</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
     </header>
-
     <main>
         <h2>Reservations at Atlantic Fishing Resort</h2>
-
-        <h3>Contact Us</h3>
-        <p>Required information is marked with an asterisk (*).</p>
-
-        <form method="post" action="http://webdevbasics.net/scripts/pacific.php">
-            <label for="myFName">* First Name:</label>
-            <input type="text" name="myFName" id="myFName" required="required">
-
-            <label for="myLName">* Last Name:</label>
-            <input type="text" name="myLName" id="myLName" required="required">
-
-            <label for="myEmail">* E-mail:</label>
-            <input type="email" name="myEmail" id="myEmail" required="required">
-
-            <label for="myPhone">Phone:</label>
-            <input type="tel" name="myPhone" id="myPhone">
-
-            <label for="myDate">Arrival Date:</label>
-            <input type="date" name="myDate" id="myDate">
-
-            <label for="myNights">Nights:</label>
-            <input type="number" name="myNights" id="myNights" min="1" max="14">
-
-            <label for="myComments">* Comments:</label>
-            <textarea name="myComments" id="myComments" rows="2" cols="20" required="required"></textarea>
-
-            <input type="submit" id="mySubmit" value="Submit">
-        </form>
+        <div class="form-padding">
+            <form method="post" action="http://webdevbasics.net/scripts/pacific.php">
+                <div class="container">
+                    <h3>Contact Us</h3>
+                    <p>Required information is marked with an asterisk (*).</p>
+                    <fieldset>
+                        <legend>Personal Information</legend>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myFName">* First Name:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="text" name="myFName" id="myFName" required="required">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myLName">* Last Name:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="text" name="myLName" id="myLName" required="required">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myEmail">* E-mail:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="email" name="myEmail" id="myEmail" required="required">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myPhone">Phone:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="tel" name="myPhone" id="myPhone">
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Booking Details</legend>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myDate">Arrival Date:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="date" name="myDate" id="myDate">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myNights">Nights:</label>
+                            </div>
+                            <div class="col-75">
+                                <input type="number" name="myNights" id="myNights" min="1" max="14">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-25">
+                                <label for="myComments">* Comments:</label>
+                            </div>
+                            <div class="col-75">
+                                <textarea name="myComments" id="myComments" rows="2" cols="20"
+                                          required="required"></textarea>
+                            </div>
+                        </div>
+                    </fieldset>
+                    <input type="submit" id="mySubmit" value="Submit">
+                </div>
+            </form>
+        </div>
     </main>
-
     <footer>
         Copyright © 1999 Atlantic Fishing Resort<br>
         <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
diff --git a/units.html b/units.html
index 6226d0c..211b4a7 100644
--- a/units.html
+++ b/units.html
@@ -11,34 +11,45 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
     <![endif]-->
 
+    <script src="/js/hiddenNav.js"></script>
     <!-- Completed files -->
 </head>
-
 <body>
-<div id="wrapper">
+<div>
     <header>
         <h1>Atlantic Fishing Resort</h1>
-
-        <nav>
-            <ul>
-                <li>
-                    <a href="index.html">Home</a>
-                </li>
-                <li>
-                    <a href="#" class="active">Units</a>
-                </li>
-                <li>
-                    <a href="activities.html">Activities</a>
-                </li>
-                <li>
-                    <a href="reservations.html">Reservations</a>
-                </li>
-            </ul>
-        </nav>
+        <div id="mySidenav" class="sideNav">
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+            <a href="index.html">Home</a>
+            <a href="#" class="active">Units</a>
+            <a href="activities.html">Activities</a>
+            <a href="reservations.html">Reservations</a>
+        </div>
+        <div id="main">
+            <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
+        </div>
+        <div class="mainNav">
+            <nav>
+                <ul>
+                    <li>
+                        <a href="index.html">Home</a>
+                    </li>
+                    <li>
+                        <a href="#" class="active">Units</a>
+                    </li>
+                    <li>
+                        <a href="activities.html">Activities</a>
+                    </li>
+                    <li>
+                        <a href="reservations.html">Reservations</a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
     </header>
     <main>
         <div id="banner">
-            <img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town">
+            <img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town" hidden="">
             <img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town">
         </div>
         <div id="hero">
@@ -74,38 +85,35 @@
         <h3>Unit Packages</h3>
         <p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your
             reservation. We’re happy to build a custom package just for you!</p>
-
-        <table>
-            <tr>
-                <th>Package Name</th>
-                <th>Description</th>
-                <th>Nights</th>
-                <th>Cost per Person</th>
-            </tr>
-
-            <tr>
-                <td>Weekend Escape</td>
-                <td class="text">Two breakfasts, a trail map, a picnic snack</td>
-                <td>2</td>
-                <td>$450</td>
-            </tr>
-
-            <tr>
-                <td>Weekday Retreat</td>
-                <td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
-                <td>4</td>
-                <td>$600</td>
-            </tr>
-
-            <tr>
-                <td>Full Adventure</td>
-                <td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
-                <td>7</td>
-                <td>$800</td>
-            </tr>
-        </table>
+        <div style="padding-left: 20px; padding-right: 20px; padding-bottom: 50px">
+            <table>
+                <tr>
+                    <th>Package Name</th>
+                    <th>Description</th>
+                    <th>Nights</th>
+                    <th>Cost per Person</th>
+                </tr>
+                <tr>
+                    <td>Weekend Escape</td>
+                    <td class="text">Two breakfasts, a trail map, a picnic snack</td>
+                    <td>2</td>
+                    <td>$450</td>
+                </tr>
+                <tr>
+                    <td>Weekday Retreat</td>
+                    <td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
+                    <td>4</td>
+                    <td>$600</td>
+                </tr>
+                <tr>
+                    <td>Full Adventure</td>
+                    <td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
+                    <td>7</td>
+                    <td>$800</td>
+                </tr>
+            </table>
+        </div>
     </main>
-
     <footer>
         Copyright © 1999 Atlantic Fishing Resort<br>
         <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
