diff --git a/UI-III-Flexbox/.gitignore b/UI-III-Flexbox/.gitignore
new file mode 100644
index 000000000..e43b0f988
--- /dev/null
+++ b/UI-III-Flexbox/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/UI-III-Flexbox/README.md b/UI-III-Flexbox/README.md
new file mode 100644
index 000000000..c306c33be
--- /dev/null
+++ b/UI-III-Flexbox/README.md
@@ -0,0 +1,35 @@
+# User Interface Project II: Great Idea Web Page With Flexbox
+
+Now that you have experienced building a layout using `inline-block`.  Lets revisit the same HTML structure and refactor our first page with flex box module.  If you didn't finish yesterday's assignment, just start from scratch or use the solution code provided to you.
+
+Once you have finished the home page using flex box module, go build the services page based on the [design file](design-files/services-desktop-design.png) provided to you.  This time you will need to structure your own HTML in addition to using flex box module.  You have been provided all the necessary images in the `img` folder.
+
+**Useful Resource: [CSS Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)**
+
+## To Get Started
+
+* Fork the project to your GitHub account
+* Clone this project into a directory on your machine.
+* Open the code with your preferred integrated development environment (IDE).
+* Start on the objectives
+
+[Click this link to learn how to use git on this project](https://youtu.be/8UQYTQzzNYM)  
+
+## Objectives
+
+* [ ] Home Page Refactor:
+  * Note that the provided HTML is blank.  This is because I want you to use your code from yesterday if possible.  If you didn't finish, that's fine, just use the solution from yesterday
+  * Refactor the home page layout with flexbox where `inline-block` was used before.
+  * In your navigation elements, point the services `<a href=""></a>` to `services.html`
+
+* [ ] Services Page Build:
+  * Update the title in your newly copied services page to say `Great Idea! - Services`
+  * Using the provided [design file](design-files/services-desktop-design.png), create the services page layout using flexbox and box model.
+  * Wrap the great idea logo in an anchor tag and point the `href` to `index.html`
+  
+  **Remember, you should continue using box model properties this whole time.  Flexbox is only used for bigger layout pieces.  You will still need content width, padding, border, and margins to succeed.**
+
+## Stretch Goals
+
+* [ ] Create another page based on one of the navigation items in addition to services.  Try to create a layout that follows the patterns of the first two designs but with your own creative twist.  Use lorem ipsum text for all your content.
+* [ ] Introduce media queries into your services page to create a mobile view that stacks all the boxes on top of each other on phone but looks like the layout file on desktop.
\ No newline at end of file
diff --git a/UI-III-Flexbox/design-files/desktop.jpg b/UI-III-Flexbox/design-files/desktop.jpg
new file mode 100644
index 000000000..136265451
Binary files /dev/null and b/UI-III-Flexbox/design-files/desktop.jpg differ
diff --git a/UI-III-Flexbox/design-files/services-desktop-design.png b/UI-III-Flexbox/design-files/services-desktop-design.png
new file mode 100644
index 000000000..1c565b509
Binary files /dev/null and b/UI-III-Flexbox/design-files/services-desktop-design.png differ
diff --git a/UI-III-Flexbox/package.json b/UI-III-Flexbox/package.json
new file mode 100644
index 000000000..b41d2c429
--- /dev/null
+++ b/UI-III-Flexbox/package.json
@@ -0,0 +1,7 @@
+{
+"name": "UI III",
+"version": "1.0.0",
+  "scripts": {
+    "test": "exit 1"
+  }
+}
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
index 7766e7f18..0a3d87334 100644
--- a/great-idea-website/css/index.css
+++ b/great-idea-website/css/index.css
@@ -63,4 +63,81 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
\ No newline at end of file
+/* Your code starts here! */
+.container{ width: 900px;
+	 margin:auto;
+	 border:1px solid red;
+}
+header nav{ 
+	display:inline-block;
+	margin-top: 35px;
+	position: fixed;
+    top: 0;
+    width: -11%;
+}
+header nav a {
+	padding: 10px;
+    margin: 0 20px;
+    background-color:gray;
+	border-radius: 3px;
+	border: 1px solid black;
+	text-decoration: none;
+	font-family:railway;
+	color:white;
+}
+header img.logo{margin-left: 700px;
+}
+.cta{
+	margin-bottom:-70px;
+}
+.cta-text{ display: inline-block;
+    margin-top: 10px;
+    margin-left: 100px;
+    margin: 150px;
+	font-size: 45px;
+
+}
+.cta-image{ display:inline-block;
+	margin-top: 47px; 
+    margin-left: 20px;
+    margin-right: 5px;
+    margin-bottom: -40px;
+}
+section button{ 
+	 border: 1px solid black;
+    padding: 10%;
+    width: 175px;
+
+}
+.main-content{ border-top:1px solid black;
+	margin:1%;
+	width:98%;
+
+}
+.text-content{
+	 margin:1%;
+	 width:47%;
+	 display:inline-block;
+}
+.middle-img{
+	margin:1%;
+	width:98%;
+}
+.bottom-content{border-bottom:1px solid black;
+	margin:1%;
+	width:98%;
+}
+.text-content1{ 
+	margin:1%;
+	display:inline-block;
+	width:30%;
+}
+.contact{ 
+	margin:1%;
+}
+address{
+	margin:1%;
+}
+footer{ text-align:center;
+
+}
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
index 92beabd65..2fe8c6be8 100644
--- a/great-idea-website/index.html
+++ b/great-idea-website/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
 
@@ -14,50 +15,83 @@
   <![endif]-->
 </head>
 
-  <body>
-
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
-
-  <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
-
-  Get Started
-
-  <img src="img/header-img.png" alt="Image of a code snippet.">
-
-  Features
-  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.
-
-
-  About
-  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.
-
-  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
-  
-  Services
-  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.
-
-
-  Product
-  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.
-
-  Vision
-  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.
-
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
-  sales@greatidea.io
-
-  Copyright Great Idea! 2018
-  
-  </body>
-</html>
\ No newline at end of file
+<body>
+  <div class="container">
+    <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>
+
+    <section class="cta">
+      <div class="cta-text">
+        <h1>Innovation<br> On<br>Demand</h1>
+        <button>Get Started</button>
+      </div>
+      <div class="cta-image">
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+      </div>
+    </section>
+    <!--cta-->
+
+    <section class="main-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>
+    </section>
+    <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+    <section class="bottom-content">
+      <div class="text-content1">
+        <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-content1">
+        <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-content1">
+        <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>
+    </section>
+
+    <div class="contact">
+      <h4>Contact</h4>
+
+      <address>
+        123 Way 456 Street<br>
+        Somewhere, USA
+      </address>
+
+      <address>
+        1 (888) 888-8888</address>
+
+      <address>
+        sales@greatidea.io
+      </address>
+    </div>
+
+    <footer>
+      Copyright Great Idea! 2018
+    </footer>
+</body>
+
+</html> 
\ No newline at end of file