diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd84..5429a0fc1 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -1,4 +1,4 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
+/* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
 */
@@ -12,8 +12,8 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
 	margin: 0;
@@ -24,7 +24,7 @@ time, mark, audio, video {
 	vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
 	display: block;
 }
@@ -63,4 +63,281 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Copy and paste your work from yesterday here and start to refactor into flexbox */
\ No newline at end of file
+/* Your code starts here! */
+
+
+.main-container {
+	width: 800px;
+	margin: auto;
+	}
+
+.nav-bar{
+
+	padding-top: 40px;
+	padding-bottom: 30px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+}
+
+.nav-bar nav{
+	width: 500px;
+	display: flex;
+	justify-content: space-between;
+}
+
+nav a {
+	margin-top: 20px;
+	color: lightgray;
+	text-decoration: none;
+}
+
+nav a:hover{
+	color: black;
+}
+
+
+
+
+.slogan-logo-section{
+	display: flex;
+	justify-content: space-between;
+	padding-bottom: 30px;
+}
+
+.slogan-logo-section .company-slogan{
+
+	font-size: 77px;
+	margin-top: 120px;
+	text-align: center;
+
+}
+
+.slogan-logo-section .company-slogan button{
+  vertical-align: top;
+  margin-top: 6px;
+  padding: 8px 44px;
+  font-size: 17px;
+  border: 1px solid black;
+  cursor: pointer;
+}
+
+button:hover{
+	background-color: darkgray;
+	color: white;
+}
+
+.slogan-logo-section img{
+	display: flex;
+	justify-content: flex-end;
+}
+
+
+.main-content{
+	border-top: 1px solid black;
+  margin-top: 76px;
+  padding-top: 39px;
+}
+
+.main-content .top-content {
+  display: flex;
+	justify-content: space-between;
+}
+
+.main-content .text-content:last-child {
+  margin-right: 0px;
+}
+
+.main-content .middle-img {
+	width: 800px;
+  margin-top: 45px;
+}
+
+.main-content .bottom-content {
+	margin-top: 37px;
+	display: flex;
+  justify-content: space-between;
+}
+.main-content .text-content {
+  margin: 10px;
+}
+.main-content .text-content:first-child {
+  margin-left: 0;
+}
+
+
+
+.contact {
+  margin-top: 57px;
+  border-top: 1px solid black;
+  padding: 39px 10px 0;
+}
+
+.contact p {
+  margin: 20px 0;
+}
+
+footer {
+  margin: 32px 0;
+  text-align: center;
+  font-size: 14px;
+}
+
+
+/*SERVICES PAGE CSS STARTS HERE */
+
+
+.container {
+  width: 890px;
+  margin: 0 auto;
+}
+
+header {
+	margin: 3px 0 20px;
+	padding: 20px 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+header nav {
+	margin-top: 35px;
+	width: 620px;
+	display: flex;
+	justify-content: space-between;
+}
+
+header nav a {
+  	font-size: 14px;
+	color: gray;
+	text-decoration: none;
+}
+
+header nav a:hover {
+  text-decoration: none;
+	color: black;
+}
+
+header nav a:first-child {
+  margin-left: 0;
+}
+
+header nav a:last-child {
+  margin-right: 0;
+}
+
+header .logo {
+	margin-top: 25px;
+	display: flex;
+	align-items: center;
+}
+
+
+.main-content {
+  border-top: 1px solid black;
+  margin-top: 76px;
+  padding-top: 39px;
+}
+
+.main-content .top-content {
+  display: flex;
+	justify-content: space-between;
+}
+.main-content .text-content:last-child {
+  margin-right: 0;
+}
+
+.main-content .middle-img {
+  margin-top: 45px;
+}
+
+.main-content .bottom-content {
+	margin-top: 37px;
+	display: flex;
+  justify-content: space-between;
+}
+.main-content .text-content {
+  margin: 10px;
+}
+.main-content .text-content:first-child {
+  margin-left: 0;
+}
+
+.contact {
+  margin-top: 57px;
+  border-top: 1px solid black;
+  padding: 39px 10px 0;
+}
+
+.contact p {
+  margin: 20px 0;
+}
+
+footer {
+  margin: 32px 0;
+  text-align: center;
+  font-size: 14px;
+}
+.service-overview {
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+.service-overview h2 {
+  font-size: 25px;
+
+}
+.service-items {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  border-top: 2px solid black;
+  border-bottom: 2px solid black;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+}
+.service-items .item {
+  display: flex;
+  justify-content: space-between;
+  background: #F4F3F4;
+  border: 1px solid black;
+  width: 425px;
+  height: 260px;
+  padding: 10px;
+  margin-bottom: 20px;
+}
+.service-items .item button {
+  background: white;
+  vertical-align: top;
+  margin: 10px;
+  height: 36px;
+  padding: 10px 36px 10px 36px;
+  font-size: 12px;
+  border: 1px solid black;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.service-items .item button:hover {
+  background: darkgray;
+  color: white;
+}
+.service-info {
+  display: flex;
+  padding: 50px 10px 50px 0;
+  justify-content: space-around;
+}
+
+.service-info .infotext {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin: 0 10px 10px 0;
+  padding-top: 0;
+}
+.service-info .infotext li {
+  list-style-type: circle;
+  list-style-position: inside;
+  padding: 5px;
+}
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a23..a2a867547 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -1,23 +1,100 @@
 <!doctype html>
-
 <html lang="en">
-<head>
-  <meta charset="utf-8">
+   <head>
+      <meta charset="utf-8">
+      <title>Great Idea!</title>
+      <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+      <link rel="stylesheet" href="css/index.css">
+   </head>
+   <body>
+      <div class="main-container">
+
+         <section class="nav-bar">
+            <nav>
+               <a href="services.html">Services</a>
+               <a href="services.html">Product</a>
+               <a href="services.html">Vision</a>
+               <a href="services.html">Features</a>
+               <a href="services.html">About</a>
+               <a href="services.html">Contact</a>
+            </nav>
+            <img class="company-logo" src="img/logo.png" alt="Great Idea! Company logo.">
+         </section>
+
+
+
+         <header class="slogan-logo-section">
+
+            <div class="company-slogan">
+              <h1>Innovation <br> On <br> Demand</h1>
+              <button type="button" name="button">Get Started</button>
+            </div>
+
+            <img class="" src="img/header-img.png" alt="Image of a code snippet.">
+         </header>
+
+
+
+
+
+
+
+
+         <section class="main-content">
+
+ <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>
+
+ <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>
+
+</section>
+
+<section class="contact">
+
+    <h4>Contact</h4>
+
+    <p>123 Way 456 Street<br> Somewhere, USA</p>
+
+    <p>1 (888) 888-8888</p>
+
+    <p>sales@greatidea.io</p>
 
-  <title>Great Idea!</title>
+  </section>
 
-  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+  <footer>
+    <p>Copyright Great Idea! 2018</p>
+  </footer>
 
-  <!--[if lt IE 9]>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-  <![endif]-->
-</head>
 
-  <body>
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
-  </body>
-</html>
\ No newline at end of file
+      </div>
+   </body>
+</html>
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36bea..b756bae12 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
 
-  <title>Great Idea!</title>
+  <title>Great Idea! - Services</title>
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
@@ -16,92 +16,95 @@
 
 <body>
 
-
-Services
-Product
-Vision
-Features
-About
-Contact
-
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-
-
-<img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
-
-Services
-
-Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.
-
-
-Digital Design
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-UX / UI
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Digital Marketing
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Web Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-iOS Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-
-Android Development
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-Learn More
-
-
-Some Facts About Our Services
-
-Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
-eleifend. Mauris euismod facilisis iaculis.
-
-
-Awesome thing
-Amazing thing
-Cool thing
-Great thing
-
-<img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
-
-Copyright Great Idea! 2018
-
+<div class="container">
+  <header>
+    <nav>
+      <a href="services.html">Services</a>
+      <a href="services.html">Product</a>
+      <a href="services.html">Vision</a>
+      <a href="services.html">Features</a>
+      <a href="services.html">About</a>
+      <a href="services.html">Contact</a>
+    </nav>
+    <a href="index.html">
+    <img class="logo" src="https://tk-assets.lambdaschool.com/c7e8c14d-d7ad-4d21-9c18-4a68c77e5ad5_logo.png"
+      alt="Great Idea! Company logo.">
+    </a>
+  </header>
+
+  <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+
+  <section class="services">
+    <section class="service-overview">
+      <h2>Services</h2>
+      <p>Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.</p>
+    </section>
+    <section class="service-items">
+    <section class="service-items item">
+      <h4>Digital Design</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+
+    <section class="service-items item">
+      <h4>UX / UI</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+
+    <section class="service-items item">
+      <h4>Digital Marketing</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+
+    <section class="service-items item">
+      <h4>Web Development</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+
+    <section class="service-items item">
+      <h4>iOS Development</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+
+    <section class="service-items item">
+      <h4>Android Development</h4>
+      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+      eleifend. Mauris euismod facilisis iaculis.</p>
+      <button>Learn More</button>
+    </section>
+    </section>
+  </section>
+
+  <section class="service-info">
+    <section class="service-info infotext">
+      <h4>Some Facts About Our Services</h4>
+        <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
+        eleifend. Mauris euismod facilisis iaculis.</p>
+
+        <ul>
+          <li>Awesome thing</li>
+          <li>Amazing thing</li>
+          <li>Cool thing</li>
+          <li>Great thing</li>
+        </ul>
+    </section>
+    <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
+  </section>
+
+  <footer>
+    <p>Copyright Great Idea! 2018</p>
+  </footer>
+
+</div>
 </body>
 
-</html>
\ No newline at end of file
+</html>