diff --git a/User-Interface b/User-Interface
new file mode 160000
index 000000000..09946aab8
--- /dev/null
+++ b/User-Interface
@@ -0,0 +1 @@
+Subproject commit 09946aab88a4a79475208abe0eebf88b8a87024d
diff --git a/great-idea-website/css/index.css b/great-idea-website/css/index.css
index 7766e7f18..d4d22f03b 100644
--- a/great-idea-website/css/index.css
+++ b/great-idea-website/css/index.css
@@ -29,6 +29,7 @@ footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
+	
 	line-height: 1;
 }
 ol, ul {
@@ -63,4 +64,113 @@ h1, h2, h3, h4, h5 {
     margin-bottom: 15px;
 }
 
-/* Your code starts here! */
\ No newline at end of file
+/* Your code starts here! */
+.navbar{
+	padding-left:30%;
+	padding-bottom:50px;
+	background-color:khaki ;
+}
+
+nav{
+	margin-right:80px;
+	font-size: 16px;
+	width: 100%;
+	display:inline-block;
+}
+
+nav a{
+	color:gray;
+	line-height: 30px;
+	padding-right:40px;
+	padding-left:40px;
+}
+
+.logo{
+	display:inline-block;
+	margin-left:
+}
+
+.centertop{
+	padding-top:70px;
+	padding-left:9%;
+}
+.inno{
+	display:inline-block;
+	text-align:center;
+	font-size:60px;
+	padding-left:30%;
+	padding-bottom:5%;
+	
+}
+
+button{
+	margin:10px;
+	background-color:whitesmoke;
+	color:black;
+	padding: 10px 20px;
+	text-align:center;
+	border-radius:20px;
+	cursor: pointer;
+}
+
+.img{
+	display:inline-block;
+	padding-left:65px;
+}
+
+.middle-img{
+	display:block;
+}
+
+.Bottom-content{
+padding-left:30%;
+padding-top:20px;
+}
+
+.features{
+	display:inline-block;
+	width:450px;
+	margin-left:20px;
+	padding-bottom:40px;
+
+}
+
+.about{
+	display:inline-block;
+	width:450px;
+	padding-bottom: 40px;
+
+}
+
+.services{
+display:inline-block;
+width: 300px;
+padding-left:20px;
+padding-top:20px;
+}
+
+.product{
+display:inline-block;
+width: 300px;
+padding-left:20px;
+padding-top:20px;
+}
+
+.vision{
+display:inline-block;
+width: 300px;
+padding-left:20px;
+padding-top:20px;
+padding-bottom:20px;
+
+}
+
+address{
+padding-top:22px;
+padding-left:31%;
+}
+
+footer{
+	text-align:center;
+}
+
diff --git a/great-idea-website/index.html b/great-idea-website/index.html
index 92beabd65..0dc88b5c6 100644
--- a/great-idea-website/index.html
+++ b/great-idea-website/index.html
@@ -16,48 +16,80 @@
 
   <body>
 
-  Services
-  Product
-  Vision
-  Features
-  About
-  Contact
-
+    <section class="navbar">
+<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>
   <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
-  Innovation
-  On
-  Demand
+</nav>
+  
+  </section>
 
-  Get Started
+<section class="centertop">
+  <div class="inno">
+  <h1>Innovation<br>
+  On<br>Demand</h1>
+      <button>Get Started</button>
+  </div>
 
+  <div class="img">
   <img src="img/header-img.png" alt="Image of a code snippet.">
+   </div>
 
-  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.
+  </section>
+  <hr style="width:50%">
 
+  <section class="Bottom-content">
+  <div class="features">
+       <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>
 
-  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.
+  <div class="about">
+        <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>
 
   <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.
 
+ <div class="services">
+    <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>
 
-  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.
+ <div class="product">
+    <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>
 
-  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.
+  <div class="vision">
+      <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>
 
-  Contact
-  123 Way 456 Street
-  Somewhere, USA
-  1 (888) 888-8888
+  
+ <hr>
+  
+
+  </section>
+  <address>
+  <h2>Contact</h2>
+  123 Way 456 Street</br>
+  Somewhere, USA</br>
+  </br>
+1 (888) 888-8888</br>
+  </br>
   sales@greatidea.io
 
-  Copyright Great Idea! 2018
+  </address>
+
+   <footer>
+  <p>Copyright Great Idea! 2018</p>
+  </footer>
   
   </body>
 </html>
\ No newline at end of file
