diff --git a/imports/ui/pages/Index/Index.js b/imports/ui/pages/Index/Index.js
index ffdc86f..074ec2a 100644
--- a/imports/ui/pages/Index/Index.js
+++ b/imports/ui/pages/Index/Index.js
@@ -1,11 +1,39 @@
 import React from 'react';
-import { Button, Image } from 'react-bootstrap';
+import { Button, Image, Row, Col, Jumbotron } from 'react-bootstrap';
+import { LinkContainer } from 'react-router-bootstrap';
+
+
 
 import './Index.scss';
+import { bootstrapUtils } from 'react-bootstrap/lib/utils';
+
+bootstrapUtils.addStyle(Jumbotron, 'custom');
+
 
 const Index = () => (
+  <div>
+ <style type="text/css">{`
+ .jumbotron-custom {
+     background-color: white;
+     color: #01597F;
+ }
+ `}</style>
+  <Row>
+    <Col md="6" sm="12" lg="6">
+      <Jumbotron bsStyle="custom">
+        <h2>Invoicing Made Simple</h2>
+        <p>CloudControl makes creating, sending, and managing invoices so much easier. It's so easy to work. Say goodbye to huge filing cabinets and hello to the cloud. Best of all, it's cheap.</p>
+       <LinkContainer to="/signup"> 
+        <Button href="" bsStyle="success" bsSize="large">Get Started for Free</Button> 
+      </LinkContainer>
+      </Jumbotron>
+    </Col>
+    <Col md="6" sm="12" lg="6">
+      <Image responsive="true" className="col-md-offset-3" src="https://i.imgur.com/hcyPRbP.jpg"/>
+    </Col>
+    </Row>
   <div className="Index">
-    <Image responsive="true" className="col-md-offset-3" src="https://i.imgur.com/hcyPRbP.jpg"/>
+  </div>
   </div>
 );
 
diff --git a/imports/ui/pages/Index/Index.scss b/imports/ui/pages/Index/Index.scss
index ebac7e6..6d681f3 100644
--- a/imports/ui/pages/Index/Index.scss
+++ b/imports/ui/pages/Index/Index.scss
@@ -8,9 +8,13 @@
   border-radius: 3px;
   color: #fff;
 
+  .jumbotron-custom {
+    background-color: white;
+  }
+
   img {
-    width: 600px;
-    height: auto;
+    max-width:100%;
+    height: 20vh;
   }
 
   h1 {
diff --git a/imports/ui/pages/Invoices/Invoices.js b/imports/ui/pages/Invoices/Invoices.js
index 7339ec0..af6273c 100644
--- a/imports/ui/pages/Invoices/Invoices.js
+++ b/imports/ui/pages/Invoices/Invoices.js
@@ -26,7 +26,7 @@ const Invoices = ({ loading, invoices, match, history }) => (!loading ? (
   <div className="Invoices">
     <div className="page-header clearfix">
       <h4 className="pull-left">Invoices</h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>New Invoice</Link>
+      <Link className="btn btn-info pull-right" to={`${match.url}/new`}>New Invoice</Link>
     </div>
     {invoices.length ? <Table hover responsive>
       <thead>
diff --git a/imports/ui/pages/Invoices/Invoices.scss b/imports/ui/pages/Invoices/Invoices.scss
index 22ca295..0122938 100644
--- a/imports/ui/pages/Invoices/Invoices.scss
+++ b/imports/ui/pages/Invoices/Invoices.scss
@@ -5,17 +5,17 @@
     cursor: pointer;
   }
 
-  .btn-success {
+  .btn-info {
     background-color: $success;
     border: $success;
     
   }
 
-  .btn-success:hover {
+  .btn-info:hover {
     background-color: #01597F;
   }
 
-  .btn-success:active:hover, .btn-success:active:focus {
+  .btn-info:active:hover, .btn-info:active:focus {
     background-color: #012C40;
   }