diff --git a/README.md b/README.md
index 0a79299d4..8e5017ef3 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ All of our documentation is on our [website](https://www.greenwoodjs.io/) (which
 - Component Model
 - Styes and Assets
 
-## Contritbuting
+## Contributing
 We would love your contribution to Greenwood!  Please check out our issue tracker for "good first issue" label or feel to reach out to us on Gitter in the room "Greenwood" or on [Twitter](https://twitter.com/PrjEvergreen).
 
 ## License
diff --git a/packages/cli/templates/theme.css b/packages/cli/templates/theme.css
index d6fa769e8..bba6a237d 100644
--- a/packages/cli/templates/theme.css
+++ b/packages/cli/templates/theme.css
@@ -53,7 +53,7 @@ img {
     }
 
     & a {
-      color: #006400;
+      color: #1d337a;
     }
   }
 
@@ -77,4 +77,4 @@ img {
         "footer  footer";
     }
   }
-}
\ No newline at end of file
+}
diff --git a/www/components/banner/banner.css b/www/components/banner/banner.css
index cec1c8890..503a1f28b 100644
--- a/www/components/banner/banner.css
+++ b/www/components/banner/banner.css
@@ -22,8 +22,8 @@
   grid-area: banner;
 
   & .banner {
-    background-color: rgba(238, 231, 235);
-    min-height: 50vh;
+    background-color: #F6F2F4;
+    min-height: 60vh;
 
     & .content {
       padding: 5vh 10px;
@@ -81,4 +81,4 @@
        }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/www/components/banner/banner.js b/www/components/banner/banner.js
index 1900ee57f..ac53606c1 100644
--- a/www/components/banner/banner.js
+++ b/www/components/banner/banner.js
@@ -49,14 +49,14 @@ class Banner extends LitElement {
       <style>
         ${bannerCss}
       </style>
-      
+
       <div class='banner'>
         <eve-container>
           <div class='content'>
             <img src="${greenwoodLogo}" alt="Greenwood Logo"/>
-            
-            <h3>The static site generator for your. . . <span class="${this.animateState}">${currentProjectType}.</span></h3>
-            
+
+            <h3>The static site generator for your. . . <br /><span class="${this.animateState}">${currentProjectType}.</span></h3>
+
             <eve-button size="md" href="/getting-started" style="${buttonCss}">Get Started</eve-button>
           </div>
         </eve-container>
@@ -65,4 +65,4 @@ class Banner extends LitElement {
   }
 }
 
-customElements.define('eve-banner', Banner);
\ No newline at end of file
+customElements.define('eve-banner', Banner);
diff --git a/www/components/banner/button.css b/www/components/banner/button.css
index 04a0f47e9..900190fe5 100644
--- a/www/components/banner/button.css
+++ b/www/components/banner/button.css
@@ -1,13 +1,15 @@
 :host .btn {
   display:inline-block;
-  color: #020202;
   border-radius:5px;
   font-size:1.5rem;
-  border:1px solid #020202;
+  padding: 1rem;
+  color: white;
+  background-color: #1d337a;
+  border:1px solid white;
 }
 
 :host .btn:hover {
-  color: #1d337a;
-  background-color: white;
-  border:1px dotted #1d337a;
-}
\ No newline at end of file
+  color: #020202;
+  background-color: #F9E7CA;
+  border:1px solid #020202;
+}
diff --git a/www/components/card/card.css b/www/components/card/card.css
index 556a58029..0529093d7 100644
--- a/www/components/card/card.css
+++ b/www/components/card/card.css
@@ -1,7 +1,7 @@
 :host {
 
   & .card {
-    padding: 2rem;
+    padding: 2.5rem;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -11,6 +11,10 @@
     background-clip: initial;
     text-align: center;
 
+    @media(max-width:768px) {
+      padding:0;
+    }
+
     & .body {
       padding:10px;
     }
@@ -54,7 +58,7 @@
     -webkit-box-flex: 1;
     -ms-flex: 1 1 33.333%;
     margin: 0.25rem;
-    flex: 1;
+    flex: 1 1 33.333%;
   }
 
   & .card-img-top {
diff --git a/www/components/footer/footer.css b/www/components/footer/footer.css
index 65d6f6644..81e41af55 100644
--- a/www/components/footer/footer.css
+++ b/www/components/footer/footer.css
@@ -1,7 +1,7 @@
 :host {
   grid-area: footer;
   & .footer {
-    background-color: #1d2418;
+    background-color: #192a27;
     min-height: 30px;
     padding-top: 10px;
 
@@ -17,4 +17,4 @@
       text-decoration:none;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/www/components/header/header.css b/www/components/header/header.css
index 99e94f7a4..15e2c5f3c 100644
--- a/www/components/header/header.css
+++ b/www/components/header/header.css
@@ -1,7 +1,7 @@
 :host {
   grid-area: header;
   & .header {
-    background-color: #111511;
+    background-color: #192a27;
     min-height: 30px;
     padding: 10px;
     font-size: 1.2rem;
@@ -36,8 +36,7 @@
           display: inline-block;
           padding:10px;
           &:hover {
-            background-color:white;
-
+          color: #F9E7CA;
             & a {
               color:green;
 
@@ -59,5 +58,8 @@
       margin-left:auto;
       text-align: right;
     }
+    & .project-name {
+      margin-top: -2px;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/www/components/header/header.js b/www/components/header/header.js
index 3443b78b5..d5a3c6ed8 100644
--- a/www/components/header/header.js
+++ b/www/components/header/header.js
@@ -17,15 +17,15 @@ class HeaderComponent extends LitElement {
               <a href="https://projectevergreen.github.io" target="_blank" rel="noopener noreferrer">
                 <img src="${brand}" />
               </a>
-              <h4>
+              <h4 class="project-name">
                 <a href="/">Greenwood</a>
               </h4>
             </div>
             <nav>
               <ul>
-                <li><a href="/about">About</a></li>
-                <li><a href="/getting-started">Getting Started</a></li>
-                <li><a href="/docs">Docs</a></li>
+                <a href="/about"><li>About</li></a>
+                <a href="/getting-started"><li>Getting Started</li></a>
+                <a href="/docs"><li>Docs</li></a>
               </ul>
             </nav>
             <div class="social">
@@ -42,4 +42,4 @@ class HeaderComponent extends LitElement {
   }
 }
 
-customElements.define('eve-header', HeaderComponent);
\ No newline at end of file
+customElements.define('eve-header', HeaderComponent);
diff --git a/www/components/row/row.css b/www/components/row/row.css
index 548d30f4c..cb5db0d29 100644
--- a/www/components/row/row.css
+++ b/www/components/row/row.css
@@ -6,11 +6,8 @@
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
-  /* -ms-flex-flow: row wrap;
-  flex-flow: row wrap; */
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
-  /* justify-content: center; */
   justify-content: space-around;
   flex-direction: row;
 
diff --git a/www/components/shelf/shelf.css b/www/components/shelf/shelf.css
index 39238ef29..efc9a07e8 100644
--- a/www/components/shelf/shelf.css
+++ b/www/components/shelf/shelf.css
@@ -8,7 +8,7 @@
 
   & a {
     text-decoration: none;
-    color: green;
+    color: #2D3D3A;
 
     &:hover {
       color:black;
@@ -56,6 +56,9 @@
       margin-block-end: 1em;
       margin-inline-start: 0px;
       margin-inline-end: 0px;
+      & a {
+        cursor: pointer;
+      }
     }
     @media (max-width: 768px) {
       padding-left:10px;
@@ -76,4 +79,4 @@
   & .active {
     color:red;
   }
-}
\ No newline at end of file
+}
diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md
index f30bc81a7..9c7821914 100644
--- a/www/pages/docs/configuration.md
+++ b/www/pages/docs/configuration.md
@@ -32,7 +32,7 @@ module.exports = {
 
 
 ### Meta
-You can use the `meta` option for the configuration of [`<meta>` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `<head>` tag of the generated _index.html_ file.  This is epecially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the [Open Graph](https://ogp.me/) set of tags.
+You can use the `meta` option for the configuration of [`<meta>` tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) within the `<head>` tag of the generated _index.html_ file.  This is especially useful for providing text and images for social sharing and link previews like for Slack, text messages, and social media shares, in particular when using the [Open Graph](https://ogp.me/) set of tags.
 
 #### Example
 This is an example of the `meta` configuration for the Greenwood website.
@@ -96,7 +96,7 @@ module.exports = {
 ```
 
 ### Workspace
-Workspace path for your project where all your project files will be located.  You can change it by passing a string.  Using an absolute path is recommened.  
+Workspace path for your project where all your project files will be located.  You can change it by passing a string.  Using an absolute path is recommended.
 
 #### Example
 ```render js
diff --git a/www/pages/docs/css-and-images.md b/www/pages/docs/css-and-images.md
index 1354fe82f..b3abd392a 100644
--- a/www/pages/docs/css-and-images.md
+++ b/www/pages/docs/css-and-images.md
@@ -9,7 +9,7 @@ By default Greenwood supports directory detection for the following folder names
 
 
 ### Theming
-To enable theming through global styles, create a file in your workspace styles directoy called _theme.css_,  e.g. _src/styles/theme.css_ and import it into your page templates.  Greenwood will include this in a `<style>` tag in the `<head>` of the generated pages.
+To enable theming through global styles, create a file in your workspace styles directory called _theme.css_,  e.g. _src/styles/theme.css_ and import it into your page templates.  Greenwood will include this in a `<style>` tag in the `<head>` of the generated pages.
 
 
 #### Example
@@ -46,7 +46,7 @@ customElements.define('page-template', PageTemplate);
 ```
 
 ### Shadow DOM
-For any of your components and page templates, it is recommend to use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) within your LitElement's `render` function.  You can also import the CSS too.
+For any of your components and page templates, it is recommended to use the [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) within your LitElement's `render` function.  You can also import the CSS too.
 
 #### Example
 ```render javascript
@@ -93,7 +93,7 @@ customElements.define('page-template', PageTemplate);
 They say a picture is worth 1000 words, so by default Greenwood will look for an _assets/_ folder in your workspace and automtically copy / bundle whatever it sees there.
 
 #### Example
-So to use an image in a markdown file, you would reference it as so using standard markdown syntax:
+To use an image in a markdown file, you would reference it as so using standard markdown syntax:
 
 ```render md
 # This is my page
diff --git a/www/pages/docs/front-matter.md b/www/pages/docs/front-matter.md
index 3aae2f5cd..655bd2843 100644
--- a/www/pages/docs/front-matter.md
+++ b/www/pages/docs/front-matter.md
@@ -27,7 +27,7 @@ label: 'mypage'
 Which will compile to the element: `<wc-md-mypage></wc-md-mypage>`
 
 ### Template
-When creating multiple page templates, you can use the `template` front-matter to configre Greenwood to use that template for a given page.
+When creating multiple page templates, you can use the `template` front-matter to configure Greenwood to use that template for a given page.
 
 #### Example
 ```render md
@@ -41,12 +41,12 @@ This is the home page
 
 In this example, the _src/templates/home-template.js_ will be used to render the current markdown page.
 
-> **Note:** By default, Greenwood will usage `src/templates/page-template.js` for all undefined template pages.
+> **Note:** By default, Greenwood will use `src/templates/page-template.js` for all undefined template pages.
 
 
 ### Imports
 
-If you want to import custom files such as a custom element, you can use the predefiend variable `imports`.
+If you want to import custom files such as a custom element, you can use the predefined variable `imports`.
 
 #### Example
 ```render md
diff --git a/www/pages/getting-started/branding.md b/www/pages/getting-started/branding.md
index 6bdb8c645..70a4e5e58 100644
--- a/www/pages/getting-started/branding.md
+++ b/www/pages/getting-started/branding.md
@@ -39,7 +39,7 @@ customElements.define('app-header', HeaderComponent);
 ```
 
 Now we can use it in both our templates, like so:
-```
+```render javascript
 import { html, LitElement } from 'lit-element';
 import '../components/header'; // import our custom element
 
diff --git a/www/pages/index.md b/www/pages/index.md
index 4262fbfbf..dde229972 100644
--- a/www/pages/index.md
+++ b/www/pages/index.md
@@ -2,17 +2,15 @@
 template: 'home'
 ---
 
-## Greenwood is a modern and performant static site generator.
-
-This is the Greenwood website's home page!  🌱
-
-Visit our [about page](/about) to learn more!
-Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules.  We hope that the development experience is as pleasant and performant as the resulting user experience and that you'll be just as happy building your own site as we are with building Greenwood.
+```render
+<div class="message">
+  <h2>Greenwood is a modern and performant static site generator for Web Component based development.</h2>
 
-Click [here](/about) to learn more about the project, or for more advanced topics please head over to our [Documentation page](/docs).
+  <p>Greenwood is focused on providing an intuitive and accessible development workflow supporting modern JavaScript and CSS features like Web Components, FlexBox, CSS Grid, and Modules aimed at delivering not just great user experiences, but alo great developer experiences too.  To learn more about the project click <a href="/about">here</a>, or for our documentation please click <a href="/docs">here</a>.</p>
 
+  <hr/>
+</div>
 
-```render
 <div class="cards">
   <eve-row>
 
@@ -20,15 +18,15 @@ Click [here](/about) to learn more about the project, or for more advanced topic
       To us, webpack is more than a module bundler, it's an entire development ecosystem!  We use webpack
       under the hood to power the development workflow and to help generate a performant site for you with the power of tools like Babel and PostCSS.  The best part?  You don't have to know anything about that!  Greenwood handles all the configuration and optimizations for you, so you can be sure that your users will get the best experience possible, and as a developer, so will you.
     </eve-card>
-  
+
     <eve-card title="Web Components" img="/assets/webcomponents.svg" size="full">
-      Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the broweer, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
+      Do we love Web Components?  You bet we do!  In fact, it's one of many things we love about the modern web, including other features like Modules, FlexBox and CSS Grid, Fetch API, and more!  It's all there for you in the browser, and with Greenwood, we make sure all those features will work for all your users.  Sit back and write the modern code you want and Greenwood will take care of the rest.
     </eve-card>
-  
+
     <eve-card title="NodeJS" img="/assets/nodejs.png" size="full">
       Although Greenwood generates a static site that you can host just about anywhere (Netlify, S3, Apache, etc), for developing and building your site, Greenwood requires NodeJS to be available on the command line.  This allows us to tap into all the amazing web development tools and libraries available on npm and also means you can use those packages too when developing your own site!  Greenwood will aim to support the latest LTS release of NodeJS and the version of npm that comes with.
     </eve-card>
 
   </eve-row>
 </div>
-```
\ No newline at end of file
+```
diff --git a/www/styles/home.css b/www/styles/home.css
index d47cf8f86..605098d1a 100644
--- a/www/styles/home.css
+++ b/www/styles/home.css
@@ -18,10 +18,24 @@
     }
 
     & a {
-      color: #006400;
+      color: #1d337a;
     }
   }
+
   & .cards {
-    margin:0 -15%
+    margin: 0 -15%
+  }
+  
+  & .message {
+    padding: 4rem;
+    text-align:center;
+
+    & hr {
+      margin-top: 4rem;
+    }
+
+    @media(max-width:768px) {
+      padding:0;
+    }
   }
-}
\ No newline at end of file
+}
diff --git a/www/styles/page.css b/www/styles/page.css
index 5ec1e5508..103c3189d 100644
--- a/www/styles/page.css
+++ b/www/styles/page.css
@@ -3,7 +3,8 @@
 
 :host {
   & h3 {
-    color: green;
+    color: #2D3D3A;
+    padding-top: 4rem;
   }
 
   & .content-wrapper {
@@ -35,6 +36,11 @@
     margin: auto;
     background-color:white;
     font-size:1.2rem;
+    padding: 2rem;
+
+    @media(max-width:768px) {
+      padding:0;
+    }
 
     & h3 {
       font-size:2rem;
@@ -42,12 +48,18 @@
     }
 
     & a {
-      color: #006400;
+      color: #1d337a;
     }
 
+    & blockquote {
+      margin:0.5em;
+      padding:15px;
+      background-color:#dcf9ca !important;
+      border-left: 6px solid #192a27;
+    }
     @media (max-width: 768px) {
       width: 100%;
       height: 100%;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/www/styles/theme.css b/www/styles/theme.css
index 8f3025edc..c9b45641c 100644
--- a/www/styles/theme.css
+++ b/www/styles/theme.css
@@ -7,11 +7,12 @@
 }
 
 html {
-  background-color: #f0f0f0;
+  background-color: white;
 }
 
 body {
   font-family: 'Source Sans Pro', sans-serif;
+  line-height:1.4;
 }
 
 table {
@@ -71,4 +72,4 @@ a {
     margin: inherit;
     color: #000;
   }
-}
\ No newline at end of file
+}