diff --git a/README.md b/README.md
index 55ecc53d72..e2ad69f86f 100644
--- a/README.md
+++ b/README.md
@@ -30,5 +30,5 @@ Follow these steps for completing your project.
 * [ ] Create a tablet and mobile version of the services page from previous projects
 * [ ] Once you have completed the project with max-width media queries, start over with min-width media queries to get a feel for how a mobile first approach would be like.  I recommend making a copy of all your contents in a new folder named "mobile-first" to keep it separate
 
-hello
+hello!
 
diff --git a/css/index.css b/css/index.css
index 9335f9e39f..2169d90938 100644
--- a/css/index.css
+++ b/css/index.css
@@ -220,7 +220,7 @@ ul li {
   text-align: right;
 }
 
-@media only screen and (max-width: 500px) {
+/* @media only screen and (max-width: 500px) {
 .mobile {
     text-align: center;
 }
@@ -230,11 +230,127 @@ ul li {
 .col-z, .col-y, .col-x, .col-w, .col-v {
     padding: 20px 0px;
     width: 100%;
-}
+} */
 /* @media (max-width: 800px) {
     .container{
 
     } */
 }
+@media (max-width: 800px) {
+
+  .container {
+      width: 100%;
+  }
+
+  header {
+      flex-wrap: wrap;
+  }
+
+  header nav {
+      width: 768px;
+      padding: 0 30px;
+  }
+
+  header .logo {
+      order: -1;
+      display: block;
+      margin: 30px auto 0;
+  }
+
+  .cta {
+      justify-content: center;
+  }
+  
+  .cta .cta-text {
+      margin: 0;
+  }
+
+  .cta img {
+      display: none;
+  }
+
+  .main-content .middle-img {
+     width: 100%;
+  }
+
+  .main-content {
+     margin: 75px 20px 35px;
+  }
+
+  .text-content {
+      margin: 0 10px;
+  }
+
+  .contact {
+      margin: 0 30px;
+  }
+}
+
+/* Phone */
+@media (max-width: 500px) {
+
+  header {
+      justify-content: center;
+  }
+
+  header nav {
+      width: 100%;
+      flex-direction: column;
+      margin: 0;
+      padding: 0;
+  }
+
+  header nav a {
+      width: 100%;
+      display: block;
+      text-align: center;
+      padding: 20px 0;
+      font-size: 20px;
+      border-bottom: 1px solid gray;
+  }
+
+  header nav a:first-child {
+      border-top: 1px solid gray;
+  }
+
+  header nav a:hover {
+      background: gray;
+  }
+
+  header .logo {
+      margin: 20px 0;
+  }
+
+  .cta {
+      margin-top: 50px;
+      flex-flow: column;
+      align-items: center;
+  }
+
+  .cta img {
+      max-width: 80%;
+  }
+
+  .main-content .top-content {
+      justify-content: space-around;
+      flex-direction: column;
+      height: 300px;
+  }
+
+  .main-content .bottom-content {
+      flex-wrap: wrap;
+      align-content: space-between;
+      height: 440px;
+  }
+
+  .text-content {
+      margin: 0;
+  }
+
+  .contact {
+      margin: 20px;
+  }
+}
+
 }
 
diff --git a/index.html b/index.html
index d07bffee9e..2f587bfcf0 100644
--- a/index.html
+++ b/index.html
@@ -14,138 +14,77 @@
 <body>
 <!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
 <div class="container">
-  <header role="banner">
-    <div class="row">
-      <div class="col-x">
-        <nav class="mt-3">
-          <ul class="d-flex justify-content-space-between">
-            <li class="list-nostyle"><a href="services.html" class="text-grey a-nostyle">Services</a></li>
-            <li class="list-nostyle"><a href="#" class="text-grey a-nostyle">Product</a></li>
-            <li class="list-nostyle"><a href="#" class="text-grey a-nostyle">Vision</a></li>
-            <li class="list-nostyle"><a href="#" class="text-grey a-nostyle">Features</a></li>
-            <li class="list-nostyle"><a href="#" class="text-grey a-nostyle">About</a></li>
-            <li class="list-nostyle"><a href="#" class="text-grey a-nostyle">Contact</a></li>
-          </ul>
-        </nav>
-      </div>
 
-      <div class="col-v"></div>
+  <header>
+      <nav>
+          <a href="#">Services</a>        
+          <a href="#">Product</a>
+          <a href="#">Vision</a>    
+          <a href="#">Features</a>    
+          <a href="#">About</a>    
+          <a href="#">Contact</a>
+      </nav>
+
+      <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+  </header>
 
-      <div class="col-v text-right mobile">
-        <a href="#" class="navlink">
-          <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-        </a>
+  <section class="cta">
+      <div class="cta-text">
+          <h1>Innovation<br> On<br> Demand</h1>
+          <button>Get Started</button>
       </div>
-    </div>
-  </header>
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+  </section>
 
-  <section>
-    <div class="row justify-content-center">
-      <div class="col-x">
-        <div class="row align-content-center p-0">
-          <div class="col-z">
-            <h1 class="text-size-5x text-center">
-              Innovation<br/>
-              On<br/>
-              Demand
-            </h1>
-          </div>
+  <section class="main-content">
 
-          <div class="col-z">
-            <div class="row">
-              <div class="col-z text-center">
-                <a href="#" class="btn btn-outline">
-                  Get Started
-                </a>
-              </div>
-            </div>
+      <div class="top-content">
+          <div class="text-content">
+              <h4>Features</h4>
+              <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+          </div>
+          <div class="text-content">
+              <h4>About</h4>
+              <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
           </div>
-        </div>
       </div>
 
-      <div class="col-x text-center">
-        <img src="img/header-img.png" alt="Image of a code snippet.">
+      <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+
+      <div class="bottom-content">
+          <div class="text-content">
+              <h4>Services</h4>
+              <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+          </div>
+          <div class="text-content">
+              <h4>Product</h4>
+              <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+          </div>
+          <div class="text-content">
+              <h4>Vision</h4>
+              <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
+          </div>
       </div>
-    </div>
+
   </section>
 
-  <main>
-    <div class="row">
-      <div class="col-z">
-        <div class="page-border"></div>
-      </div>
-    </div>
-
-    <section>
-      <div class="row">
-        <div class="col-x">
-          <h4>Features</h4>
-          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
-        </div>
-
-        <div class="col-x">
-          <h4>About</h4>
-          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
-        </div>
-      </div>
-    </section>
+  <section class="contact">
 
-    <section>
-      <div class="row">
-        <div class="col-z">
-          <img class="middle-img img-100" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
-        </div>
-      </div>
-    </section>
-
-    <section>
-      <div class="row">
-        <div class="col-w">
-          <h4>Services</h4>
-          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
-        </div>
-
-        <div class="col-w">
-          <h4>Product</h4>
-          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
-        </div>
-
-        <div class="col-w">
-          <h4>Vision</h4>
-          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
-        </div>
-      </div>
-    </section>
+      <h4>Contact</h4>
 
-    <div class="row">
-      <div class="col-z">
-        <div class="page-border"></div>
-      </div>
-    </div>
-  </main>
-
-  <footer class="pb-6">
-    <div class="row">
-      <div class="col-z">
-        <section>
-          <h4>Contact</h4>
-          <address>
-            123 Way 456 Street<br/>
-            <span>Somewhere, USA</span><br/><br/>
-            <span>1 (888) 888-8888</span><br/><br/>
-            sales@greatidea.io
-          </address>
-        </section>
-      </div>
-    </div>
+      <p>123 Way 456 Street<br>
+      Somewhere, USA</p>
 
-    <div class="row">
-      <div class="col-z text-center">
-        <p>Copyright Great Idea! 2018</p>
-      </div>
-    </div>
+      <p>1 (888) 888-8888</p>
+
+      <p>sales@greatidea.io</p>
 
+  </section>
+
+  <footer>
+      <p>Copyright Great Idea! 2018</p>
   </footer>
-</div>
+
+</div><!-- container -->
 </body>
 </html>
\ No newline at end of file
