diff --git a/great-idea/css/index.css b/great-idea/css/index.css
index a6445bd842..ac3b7af6f8 100644
--- a/great-idea/css/index.css
+++ b/great-idea/css/index.css
@@ -63,4 +63,242 @@ 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
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+/* Here is where the header styling will go */
+
+header {
+	width: 80%;
+	padding: 40px 75px;
+	margin: 0 auto;
+}
+/* aligning the navigation and the image */
+header nav {
+	background: #ddf;
+	position: fixed;
+	display: flex;
+	flex-direction: row;
+    
+	 width: 600px;
+    margin-top: 45px;
+}
+header nav a {
+	 
+	padding: 12px 25px;
+	text-decoration: none; 	
+	color: #333;
+}
+header nav a:hover {
+	background: #444;
+	color: #fff;
+}
+/*aliging the logo to the right */
+.logo {
+	display: flex;
+	justify-content: flex-end;
+	margin: 44px 0 85px 775px;
+}
+.alignLeft {
+	margin-left: 828px;
+}
+/* Resizing and positioning the header */
+header h1 {
+	display: flex;
+	flex-flow: row;
+	margin: 0 0 15px 185px;
+	text-align: center;
+	display: block;
+	width: 200px;
+	font-size: 75px;
+}
+  /* Adding a color border radius that act as a botton*/
+ .cta a {
+	 border: 1px solid #333;
+	 width: 195px;
+	 text-align: center;
+	 text-decoration: none;
+	 padding: 6px 42px;
+	 margin: 45px 0 0 202px;
+	 color:#000;
+ }
+ 
+/* Positioning the image to the rigth */
+
+header img {
+	display: flex;
+	justify-self: end;
+	margin: -285px 0 0 640px;
+}
+/* Creating top border using section semantic tags */
+section {
+	border-top: 3px solid #ccc;
+	width: 57%;
+	margin: 0 auto;
+	border-bottom: 3px solid #ccc;
+}
+/*Moving the class secondary-h2 */
+.secondary-h2 {
+	margin-top: 24px;
+}
+.col-1, .col-2, .col-3, .col-4, .col-5 {
+	justify-content: space-evenly;
+}
+/* creating the columns */
+.first-columns, .second-columns {
+	display: flex;
+}
+ 
+
+ 
+/* aligning the two columns horizontal with margin right from the first one and using inline-block */
+.col-1 {
+	margin-right: 45px;
+}
+/* applying inline-block to the second column */
+
+.col-1, col-2 {
+	margin-bottom: 45px;
+}
+/* Centering the image */
+.middle-img {
+	margin: 0 2px 65px 2px;
+}
+/* The last three columns will have the same style as well */
+.col-3, .col-4, .col-5 {
+	width: 250px;
+	display: inline-block;
+	line-height: 22px;
+	margin-bottom: 33px;
+}
+/* Adding spacing */
+.col-3, .col-4 {
+	margin-right: 60px;
+}
+/* Adding style to the footer */
+footer h3 {
+	margin: 25px 0 0 337px;
+}
+footer address {
+	display: block;
+	width: 200px;
+	margin: 15px 0 0 337px;
+}
+footer p {
+	padding: 18px 0;
+}
+.cpyrght {
+	margin: 33px 700px 145px 700px;
+}
+/* Styling the Service page */
+
+
+
+.nav-bar {
+	margin-left: 122px;
+}
+.align-Left {
+	margin-left: 828px;
+}
+ /* Making the go under the navigationv with flex */
+	.image-container {
+		display: flex;
+	   justify-content: center;;
+	}
+	/* Removing the margin */
+.services-header-img {
+	margin:-45px;
+}
+
+/* Aligning the services content with flex-controller */
+main {
+	width: 893px;
+	height: 133px;
+	overflow: hidden;
+	margin: 22px auto;
+}
+/* Aligning the h2 header */
+  main h2 {
+	font-size: 24px;
+	padding: 20px 0 -11px 0;
+}
+ /* Aligning the paragraph */
+   main p {
+	padding: 12px 2px;
+	line-height: 22px;
+	text-align: justify;
+}
+/* Top and bottom borders */
+.first-sctn {
+	border-top: 2px solid #000;
+	border-bottom: 2px solid #000;
+}
+/* Creating the content box */
+.flex-controller {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-around;
+	margin: 33px 0;
+	overflow: hidden;
+}
+.box-content {
+	width: 430px;
+	height: 252px;
+	margin: 10px 10px;
+	background: #f4f3f4;
+	border: 1px solid #000;
+}
+/* Adding padding to H2 elements */
+.box-content h2 {
+	padding: 15px 0 1px 18px;
+}
+/* Creating line-height and padding */
+.box-content p {
+	line-height: 22px;
+	padding: 13px;
+}
+/* Creating the button inside the boxes */
+
+.btns {
+	width: 145px;
+	height: 32px;
+	border: 1px solid #000;
+	border-radius: 5px;
+	text-align: center;
+	padding: 4px;
+	margin-left: 18px;
+	background: #fff;
+}
+/* Aligning content to the left*/
+.side-contents {
+	display: flex;
+	justify-content: center;
+}
+aside {
+	margin: 30px 49px;
+	width: 389px;
+}
+aside p {
+	margin-bottom: 20px;
+	line-height: 22px;
+}
+/* Recreating the ul */
+  ul {
+	list-style-type: square;
+	}
+	li {
+		padding: 6px 0;
+	}
+/* Aligning image to the right */
+
+.services-info-img {
+	justify-content: left;
+	height: 300px;
+	margin-top: 28px;
+}
+/* Aligning the copyright information in the footer section */
+footer {
+	display: flex;
+	justify-content: center;
+}
+.cpyrght-footer {
+	padding: 85px 0;
+}
\ No newline at end of file
diff --git a/great-idea/index.html b/great-idea/index.html
index c5f374a238..5a89f2a6e6 100644
--- a/great-idea/index.html
+++ b/great-idea/index.html
@@ -13,11 +13,80 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
   <![endif]-->
 </head>
+<body>
+<header>
+   <nav class="nav-bar">
+     <a href ="services.html">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 alignLeft" src="img/logo.png" alt="Great Idea! Company logo.">
+  <h1>
+      Innovation
+      On
+      Demand
 
-  <body>
+  </h1>
+  
+  <div class="cta">
+    <a href="#">Get Started</a>
+  </div>
+ 
 
-    <!-- Copy and paste your HTML from the first UI project here -->
-      
-    
+
+  <img src="img/header-img.png" alt="Image of a code snippet.">
+</header>
+<section>
+    <div class="first-columns">
+  <div class="col-1">
+  <h2 class="secondary-h2">Features</h2>
+  
+  <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-2">
+ <h2 class="secondary-h2">About</h2>
+  <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="second-columns">
+    <div class="col-3">
+  <h2>
+  Services
+</h2>
+  <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-4">
+<h2>
+  Product
+</h2>
+  <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-5">
+<h2>
+  Vision
+</h2>
+  <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>
+<footer>
+ <h3>Contact</h3> 
+  <address>
+      123 Way 456 Street
+      Somewhere, USA
+      <p>1 (888) 888-8888</p>
+      sales@greatidea.io
+  </address>
+  
+
+  <div class="cpyrght">Copyright Great Idea! 2018</div>
+</footer>
+  
   </body>
 </html>
\ No newline at end of file
diff --git a/great-idea/services.html b/great-idea/services.html
index 271c36beae..faf634d118 100644
--- a/great-idea/services.html
+++ b/great-idea/services.html
@@ -16,92 +16,114 @@
 
 <body>
 
-
-Services
-Product
-Vision
-Features
-About
-Contact
-
-<img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-
-
+<header>
+  
+  <nav class="nav-bar">
+<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>
+
+<a href="index.html"><img class="logo align-Left" src="img/logo.png" alt="Great Idea! Company logo."></a>
+
+<div class="image-container">
 <img class="services-header-img" src="img/services-header.jpg" alt="Our services header image">
+</div>
+</header>
 
-Services
+<main class="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.
+<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>
+</main>
+<section class="first-sctn">
 
-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.
+<div class="flex-controller">
+<div class="box-content">
+<h2>Digital Design</h2>
 
+<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>
+<div class="btns">
 Learn More
+</div>
+</div>
 
+<div class="box-content">
+<h2>UX / UI</h2>
 
-
-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.
-
+<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>
+<div class="btns">
 Learn More
+</div>
+</div>
 
+<div class="box-content">
+<h2>Digital Marketing</h2>
 
-
-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.
-
+<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>
+<div class="btns">
 Learn More
+</div>
+</div>
 
+<div class="box-content">
+<h2>Web Development</h2>
 
-
-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.
-
+<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>
+<div class="btns">
 Learn More
+</div>
+</div>
 
+<div class="box-content">
+<h2>iOS Development</h2>
 
-
-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.
-
+<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>
+<div class="btns">
 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
-
+</div>
+</div>
+
+<div class="box-content">
+<h2>Android Development</h2>
+
+<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>
+    <div class="btns">
+     Learn More
+     </div>
+    </div>
+  </div>
+</section>
+<div class="side-contents">
+<aside>
+<h3>Some Facts About Our Services</h3>
+
+<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>
+</aside>
 <img class="services-info-img" src="img/services-info.png" alt="one of our employees hard at work">
-
+</div>
+<footer>
+<div class="cpyrght-footer">
 Copyright Great Idea! 2018
-
+</div>
+</footer>
 </body>
 
 </html>
\ No newline at end of file