diff --git a/public/js/jTinder-Library/main.js b/public/js/jTinder-Library/main.js
index eef5986..64a41ce 100644
--- a/public/js/jTinder-Library/main.js
+++ b/public/js/jTinder-Library/main.js
@@ -13,7 +13,7 @@ $(function () {
       // set the status text
       console.log(item[0].classList[1]);
       onSwipe(item);
-      $('#status').html('Dislike image ' + (item.index() + 1));
+      // $('#status').html('Dislike image ' + (item.index() + 1));
       let userID = JSON.parse(localStorage.getItem('userId'));
       $.post('/dogviewed', { userId: `${userID}`, dogId: `${item[0].classList[1]}` });
     },
@@ -22,7 +22,7 @@ $(function () {
       // set the status text
       onSwipe(item);
       console.log(item[0].classList[1]);
-      $('#status').html('Like image ' + (item.index() + 1));
+      // $('#status').html('Like image ' + (item.index() + 1));
       let userID = JSON.parse(localStorage.getItem('userId'));
       $.post('/likedog', { userId: `${userID}`, dogId: `${item[0].classList[1]}` });
     },
diff --git a/public/style/base.css b/public/style/base.css
index 22cf644..b3893b2 100644
--- a/public/style/base.css
+++ b/public/style/base.css
@@ -91,18 +91,268 @@ h2 {
   color:red;
   opacity: 0.7;
   -webkit-appearance: none;
-  font-size: 40px;
+  font-size: 25px;
 }
 
 .fa-cut, .fa-baby, .fa-cat, .fa-syringe, .fa-toilet {
-  font-size: 40px;
+  font-size: 25px;
   color: rgb(25,55,82);
 }
 
-#something {
+.something {
   display: none;
 }
 
+.dogShow-detailForm-div {
+  background: #cd661d;
+  color: whitesmoke;
+  height: 508px;
+  margin-top: 472px;
+  margin-bottom: 40px;
+  position: absolute;
+  padding-right: 0px;
+  padding-left: 31.359px;
+  width: 97%;
+}
+
+.dogShow-detailForm {
+  margin-left: -7px;
+  margin-top: 24px;
+}
+
+.form-title {
+  color: whitesmoke;
+  margin-bottom: 16px;
+  font-size: 20px;
+  width: 91%;
+}
+
+.dogShow-detailForm input {
+  border-radius: 0;
+  width: 91%;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+/* label {
+  width: 100%px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+} */
+
+.form-input {
+  width: 317px;
+  border: none;
+}
+
+
+
+.form-description, textarea {
+  border-radius: 0;
+  width: 299px;
+  overflow:hidden;
+  overflow-y: scroll; /* has to be scroll, not auto */
+  -webkit-overflow-scrolling: touch
+}
+
+.options {
+  height: 28px;
+  margin-left: 10px;
+  margin: 0;
+  flex-direction: row;
+  margin-top: 10px;
+}
+
+.fa-layers {
+  margin: 10px 15px 15px 15px; 
+  width: 6px;
+}
+
+.fa-baby {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+#key-container {
+  width: 100%;
+  background:#cd661d;
+  padding-right: 10px;
+  margin-top: 50px;
+  position: fixed;
+}
+
+#option-key {
+  color: whitesmoke;
+  display: flex;
+  flex-direction: row;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  justify-content: space-around;
+  list-style: none;
+  background:#cd661d;
+  width: 100%;
+}
+
+.key-item {
+  font-size: 18px;
+  text-decoration: none;
+  padding:10px;
+  align-items: baseline;
+  justify-content:center;
+}
+
+#richard {
+  margin-bottom: 10px;
+}
+
+.available {
+  z-index: 90;
+  position: absolute;
+  height: 75px;
+  margin-left: 319px;
+  margin-top: 5px;
+  float: right;
+}
+
+.wooflist-image-div {
+  width: 40%;
+  height: 200px;
+  overflow: hidden;
+  flex-direction: column;
+  border: 4px solid #cd661d;
+  margin-left: 10px;
+  position: relative;
+}
+
+.woof-list-img {
+  height: 100%;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.about-us-image-div {
+  width: 60%;
+  height: 130px;
+  overflow: hidden;
+  flex-direction: column;
+  border: 4px solid #cd661d;
+  margin-left: 4px;
+  position: relative;
+}
+
+.about-us-img {
+  height: 100%;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.woof-list-dog {
+  box-sizing: border-box;
+  border: 4px solid rgb(51, 110, 165);
+  width: 90%;
+  margin: auto;
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 230px;
+  
+}
+
+.about-us-dog {
+  box-sizing: border-box;
+  border: 4px solid rgb(51, 110, 165);
+  width: 90%;
+  margin: auto;
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 154px;
+}
+
+#listShow {
+  background: url(../images/background-ipad.png) no-repeat center center fixed;
+  display: block;
+  margin-top: -155px;
+  background-size: 100% 100%;
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+
+#wooflist-banner {
+  width: 100%;
+  margin-top: 5%;
+  background: rgb(51, 110, 165);
+  padding: 5px;
+}
+
+#wooflist-banner h2 {
+  color: whitesmoke;
+}
+
+.about-us-banner h2 {
+  color: whitesmoke;
+  padding: 3px;
+  font-size: 20px;
+}
+
+.about-us-banner {
+  width: 100%;
+  margin-top: 9%;
+  background: rgb(51, 110, 165);
+  padding: 5px;
+}
+
+.list-section {
+  align-content: flex-end;
+  justify-content: space-between;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-top: -19px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.about-us-list-section {
+  align-content: flex-end;
+  justify-content: space-between;
+  width: 60%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  margin-top: 29px;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.wooflist-p {
+  align-content: flex-start;
+  justify-content: space-between;
+  margin-left: 10px;
+  width: 100%;
+  margin: 0;
+  margin-top: 10px;
+  color: rgb(25,55,82);
+}
+
+.about-us-p {
+  align-content: flex-start;
+  justify-content: space-between;
+  margin-left: 10px;
+  width: 100%;
+  margin: 0;
+  margin-top: 27px;
+  color: rgb(25,55,82);
+}
+
+.about-us-p p {
+  margin-bottom: 5px;
+  font-size: 15px;
+}
+
 /* IPAD */
 @media (min-width:767px){ 
   #index {
@@ -186,6 +436,7 @@ h2 {
   #wooflist-banner h2 {
     color: whitesmoke;
   }
+
   .wooflist-image-div {
     width: 40%;
     height: 200px;
@@ -214,6 +465,35 @@ h2 {
     height: 230px;
     
   }
+
+  .about-us-image-div {
+    width: 40%;
+    height: 200px;
+    overflow: hidden;
+    flex-direction: column;
+    border: 4px solid #cd661d;
+    margin-left: 10px;
+    position: relative;
+  }
+
+  .about-us-img {
+    height: 100%;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  
+  .about-us-dog {
+    box-sizing: border-box;
+    border: 4px solid rgb(51, 110, 165);
+    width: 90%;
+    margin: auto;
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 230px;
+    
+  }
   
   .list-section {
     align-content: flex-end;
@@ -227,6 +507,18 @@ h2 {
     margin-right: 10px;
   }
 
+  .about-us-list-section {
+    align-content: flex-end;
+    justify-content: space-between;
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    margin-top: -19px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
   .wooflist-p {
     align-content: flex-start;
     justify-content: space-between;
@@ -236,6 +528,16 @@ h2 {
     margin-top: 10px;
     color: rgb(25,55,82);
   }
+
+  .about-us-p {
+    align-content: flex-start;
+    justify-content: space-between;
+    margin-left: 10px;
+    width: 100%;
+    margin: 0;
+    margin-top: 10px;
+    color: rgb(25,55,82);
+  }
   
   .forms-section {
     display: flex;
@@ -276,7 +578,7 @@ h2 {
     margin-left: 10px;
     margin: 0;
     flex-direction: row;
-    margin-top: 10px;
+    margin-top: 21px;
   }
   
   .fa-layers {
@@ -495,5 +797,21 @@ h2 {
   .available {
     display: none;
   }
+
+  .something {
+    display: none;
+  }
+
+  .about-us-banner h2 {
+    color: whitesmoke;
+    padding: 3px;
+    font-size: 30px;
+  }
   
+  .about-us-banner {
+    width: 100%;
+    margin-top: 6%;
+    background: rgb(51, 110, 165);
+    padding: 5px;
+  }
 }
\ No newline at end of file
diff --git a/public/style/menu.css b/public/style/menu.css
index 2bd8ddc..e94d9d1 100644
--- a/public/style/menu.css
+++ b/public/style/menu.css
@@ -98,6 +98,70 @@ a {
   transform: none;
 }
 
+#menuToggle-index {
+  display: block;
+  position: relative;
+  top: 25px;
+  margin-left: 25px;
+  z-index: 99;
+  -webkit-user-select: none;
+  user-select: none;
+  margin-top: -5px;
+}
+#menuToggle-index input {
+  display: block;
+  width: 40px;
+  height: 32px;
+  position: absolute;
+  top: -7px;
+  left: -5px;
+  cursor: pointer;
+  opacity: 0; /* hide this */
+  z-index: 100; /* and place it over the hamburger */
+  -webkit-touch-callout: none;
+}
+/*Just a quick hamburger*/
+#menuToggle-index span {
+  display: block;
+  width: 33px;
+  height: 4px;
+  margin-bottom: 5px;
+  position: relative;
+  background: rgb(51, 110, 165);
+  border-radius: 3px;
+  z-index: 99;
+  transform-origin: 4px 0px;
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              opacity 0.55s ease;
+}
+#menuToggle-index span:first-child {
+  transform-origin: 0% 0%;
+}
+#menuToggle-index span:nth-last-child(2) {
+  transform-origin: 0% 100%;
+}
+/* Transform all the slices of hamburger into a crossmark.*/
+#menuToggle-index input:checked ~ span {
+  opacity: 1;
+  transform: rotate(45deg) translate(-2px, -1px);
+  background: whitesmoke;
+}
+/*But let's hide the middle one.*/
+#menuToggle-index input:checked ~ span:nth-last-child(3) {
+  opacity: 0;
+  transform: rotate(0deg) scale(0.2, 0.2);
+}
+/* Ohyeah and the last one should go the other direction*/
+#menuToggle-index input:checked ~ span:nth-last-child(2) {
+  transform: rotate(-45deg) translate(0, -1px);
+}
+
+/* And let's slide it in from the left*/
+#menuToggle-index input:checked ~ ul {
+  transform: none;
+}
+
 /* ======================== End of Hamburger ========================= */
 @media (min-width:767px){ 
   #search-button{
@@ -200,4 +264,71 @@ a {
   #menuToggle input:checked ~ ul {
     transform: none;
   }
+
+  #menuToggle-index {
+    display: block;
+    position: relative;
+    top: 25px;
+    margin-left: 25px;
+    z-index: 99;
+    -webkit-user-select: none;
+    user-select: none;
+    margin-top: -5px;
+  }
+  
+  #menuToggle-index input {
+    display: block;
+    width: 40px;
+    height: 32px;
+    position: absolute;
+    top: -7px;
+    left: -5px;
+    cursor: pointer;
+    opacity: 0; /* hide this */
+    z-index: 100; /* and place it over the hamburger */
+    -webkit-touch-callout: none;
+  }
+  /*Just a quick hamburger*/
+  #menuToggle-index span {
+    display: block;
+    width: 56px;
+    height: 6px;
+    margin-bottom: 9px;
+    position: relative;
+    background: rgb(51, 110, 165);
+    border-radius: 3px;
+    z-index: 99;
+    transform-origin: 4px 0px;
+    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+                opacity 0.55s ease;
+                
+  }
+  #menuToggle-index span:first-child {
+    transform-origin: 0% 0%;
+  }
+  #menuToggle-index span:nth-last-child(2) {
+    transform-origin: 0% 100%;
+  }
+  /* Transform all the slices of hamburger into a crossmark.*/
+  #menuToggle-index input:checked ~ span {
+    opacity: 1;
+    transform: rotate(45deg) translate(-2px, -1px);
+    background: whitesmoke;
+  }
+  /*But let's hide the middle one.*/
+  #menuToggle-index input:checked ~ span:nth-last-child(3) {
+    opacity: 0;
+    transform: rotate(0deg) scale(0.2, 0.2);
+  }
+  /* Ohyeah and the last one should go the other direction*/
+  #menuToggle-index input:checked ~ span:nth-last-child(2) {
+    transform: rotate(-45deg) translate(0, -1px);
+  }
+  /*Make this absolute positioned at the top left of the screen*/
+  
+  /* And let's slide it in from the left*/
+  #menuToggle-index input:checked ~ ul {
+    transform: none;
+  }
 }
\ No newline at end of file
diff --git a/public/style/swipe.css b/public/style/swipe.css
index f8b6d31..96524ca 100644
--- a/public/style/swipe.css
+++ b/public/style/swipe.css
@@ -14,6 +14,7 @@ body {
     height: 300px;
     padding: 9%;
     margin-top: 9%;
+    margin-right: 5px;
 }
 
 #tinderslide {
@@ -233,6 +234,7 @@ body {
         height: 600px;
         padding: 7%;
         margin-top: 2%;
+        margin-right: 0;
     }
     
     #tinderslide {
@@ -440,5 +442,7 @@ body {
         margin-top: 30px;
         font-weight: bold;
     }
+
+
     
 }
\ No newline at end of file
diff --git a/server.js b/server.js
index bcc5d6f..5f213fe 100644
--- a/server.js
+++ b/server.js
@@ -39,7 +39,6 @@ function aboutTeam(request, response){
 }
 // ===========================WOOF LIST==================================
 
-
 function woofList(request, response){
   let likedDogs = [];
   console.log(request.body);
diff --git a/views/layout/nav-index.ejs b/views/layout/nav-index.ejs
new file mode 100644
index 0000000..7177c48
--- /dev/null
+++ b/views/layout/nav-index.ejs
@@ -0,0 +1,13 @@
+<nav role="navigation">
+    <div id="menuToggle-index">
+      <input type="checkbox" />
+        <span></span>
+        <span></span>
+        <span></span>
+      <ul id="menu">
+        <a href="/"><li class="menu-li">Search</li></a>
+        <a><li id = "wooflist" class="menu-li">WoofList</li></a>
+        <a href="/about-the-team"><li class="menu-li">About</li></a>
+      </ul>
+    </div>
+  </nav>
\ No newline at end of file
diff --git a/views/pages/about.ejs b/views/pages/about.ejs
index ecf3ab8..7383f1d 100644
--- a/views/pages/about.ejs
+++ b/views/pages/about.ejs
@@ -6,28 +6,28 @@
     <title>About Our Team</title>
 </head>
 
-<body id="listShow" id="about">
-  <header id="dog-show-header" class="header">
-    <section id="non-main-logo">
+<body id="listShow" class="about">
+  <header id="dog-show-header" class="header about-us-header">
+    <section id="non-main-logo" class="about-us-logo">
       <%-include ../layout/nav%>
-        <img id="small-logo" src="images/woofer-logo.png" alt="Woofer Logo">
+        <img id="small-logo" class="about-us-logo" src="images/woofer-logo.png" alt="Woofer Logo">
     </section>
   </header>
   <main>
 
-    <div id="wooflist-banner">
+    <div class="about-us-banner">
       <h2>The Developers</h2>
     </div>
 
     <article>
       <ul>
-        <li class="woof-list-dog">
-          <div class="wooflist-image-div">
-            <img class="woof-list-img" src="images/connor-dog.png">
+        <li class="about-us-dog">
+          <div class="about-us-image-div">
+            <img class="about-us-img" src="images/connor-dog.png">
           </div>
           <img class="available">
-          <section class="list-section">
-            <section class="wooflist-p">
+          <section class="about-us-list-section">
+            <section class="about-us-p">
               <p>Name: Connor Sihon</p>
               <p>Age: 154 (in dog years)</p>
               <p>Breed: Golden Retriever</p>
@@ -56,13 +56,13 @@
 
           </section>
         </li>
-        <li class="woof-list-dog">
-          <div class="wooflist-image-div">
+        <li class="about-us-dog">
+          <div class="about-us-image-div">
             <img class="woof-list-img" src="images/erin-dog.png">
           </div>
           <img class="available">
-          <section class="list-section">
-            <section class="wooflist-p">
+          <section class="about-us-list-section">
+            <section class="about-us-p">
               <p>Name: Erin Trainor</p>
               <p>Age: 224 (in dog years)</p>
               <p>Breed: Dachshund</p>
@@ -91,13 +91,13 @@
 
           </section>
         </li>
-        <li class="woof-list-dog">
-          <div class="wooflist-image-div">
+        <li class="about-us-dog">
+          <div class="about-us-image-div">
             <img class="woof-list-img" src="images/nicole-dog.png">
           </div>
           <img class="available">
-          <section class="list-section">
-            <section class="wooflist-p">
+          <section class="about-us-list-section">
+            <section class="about-us-p">
               <p>Name: Nicole Kalbfleisch</p>
               <p>Age: 154 (in dog years)</p>
               <p>Breed: Husky</p>
@@ -122,13 +122,13 @@
 
           </section>
         </li>
-        <li class="woof-list-dog" id="richard">
-          <div class="wooflist-image-div">
+        <li class="about-us-dog" id="richard">
+          <div class="about-us-image-div">
             <img class="woof-list-img" src="images/richard-dog.png">
           </div>
           <img class="available">
-          <section class="list-section">
-            <section class="wooflist-p">
+          <section class="about-us-list-section">
+            <section class="about-us-p">
               <p>Name: Richard Bellamy </p>
               <p>Age: 210 (in dog years)</p>
               <p>Breed: Mix</p>
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 66a5790..c105a59 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -7,7 +7,7 @@
 <body id="index">
 
   <header>
-    <%-include ../layout/nav%>
+    <%-include ../layout/nav-index%>
   </header>
   <main>
     <section>
diff --git a/views/pages/index2.ejs b/views/pages/index2.ejs
index 86b6b7c..0297e7a 100644
--- a/views/pages/index2.ejs
+++ b/views/pages/index2.ejs
@@ -7,7 +7,7 @@
 <body id="index">
 
   <header>
-    <%-include ../layout/nav%>
+    <%-include ../layout/nav-index%>
   </header>
   <main>
     <section>