diff --git a/packages/cli/package.json b/packages/cli/package.json
index cc3c13d57..214595afd 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@mapbox/rehype-prism": "^0.5.0",
+    "postcss-nested": "^4.1.2",
     "rehype-autolink-headings": "^4.0.0",
     "rehype-slug": "^3.0.0"
   }
diff --git a/packages/cli/src/config/rollup.config.js b/packages/cli/src/config/rollup.config.js
index c0db4860b..ca9cef812 100644
--- a/packages/cli/src/config/rollup.config.js
+++ b/packages/cli/src/config/rollup.config.js
@@ -33,7 +33,7 @@ function greenwoodWorkspaceResolver (compilation) {
 
 // https://github.com/rollup/rollup/issues/2873
 function greenwoodHtmlPlugin(compilation) {
-  const { userWorkspace, outputDir } = compilation.context;
+  const { projectDirectory, userWorkspace, outputDir } = compilation.context;
 
   return {
     name: 'greenwood-html-plugin',
@@ -117,15 +117,27 @@ function greenwoodHtmlPlugin(compilation) {
       }
       
       // this is a giant work around because PostCSS and some plugins can only be run async
-      // and so have to use with awit but _outside_ sync code, like parser / rollup
+      // and so have to use with await but _outside_ sync code, like parser / rollup
       // https://github.com/cssnano/cssnano/issues/68
       // https://github.com/postcss/postcss/issues/595
       // TODO consider similar approach for emitting chunks?
       return Promise.all(Object.keys(mappedStyles).map(async (assetKey) => {
         const asset = mappedStyles[assetKey];
         const filePath = path.join(userWorkspace, asset.name);
-        
-        const result = await postcss(postcssConfig.plugins)
+        // TODO we already process the user's CSS as part of serve lifecycle (dev / build commands)
+        // if we pull from .greenwood/ then maybe we could avoid re-postcss step here?
+        const userPostcssConfig = fs.existsSync(`${projectDirectory}/postcss.config.js`)
+          ? require(`${projectDirectory}/postcss.config`)
+          : {};
+        const userPostcssPlugins = userPostcssConfig.plugins && userPostcssConfig.plugins.length > 0
+          ? userPostcssConfig.plugins
+          : [];
+        const allPostcssPlugins = [
+          ...userPostcssPlugins,
+          ...postcssConfig.plugins
+        ];
+
+        const result = await postcss(allPostcssPlugins)
           .use(postcssImport())
           .process(asset.source, { from: filePath });
 
diff --git a/packages/cli/src/lifecycles/context.js b/packages/cli/src/lifecycles/context.js
index 79affdc01..d4190b17a 100644
--- a/packages/cli/src/lifecycles/context.js
+++ b/packages/cli/src/lifecycles/context.js
@@ -9,6 +9,7 @@ module.exports = initContexts = async({ config }) => {
   return new Promise(async (resolve, reject) => {
 
     try {
+      const projectDirectory = process.cwd();
       const userWorkspace = path.join(config.workspace);
       const pagesDir = path.join(userWorkspace, 'pages/');
       const userTemplatesDir = path.join(userWorkspace, 'templates/');
@@ -19,7 +20,8 @@ module.exports = initContexts = async({ config }) => {
         userWorkspace,
         pagesDir,
         userTemplatesDir,
-        scratchDir
+        scratchDir,
+        projectDirectory
       };
 
       if (!fs.existsSync(scratchDir)) {
diff --git a/packages/cli/src/transforms/transform.css.js b/packages/cli/src/transforms/transform.css.js
index 4cd34a5af..8430d65b7 100644
--- a/packages/cli/src/transforms/transform.css.js
+++ b/packages/cli/src/transforms/transform.css.js
@@ -1,5 +1,6 @@
+const fs = require('fs');
 const path = require('path');
-const { promises: fsp } = require('fs');
+const postcss = require('postcss');
 const TransformInterface = require('./transform.interface');
 
 class CSSTransform extends TransformInterface {
@@ -18,9 +19,22 @@ class CSSTransform extends TransformInterface {
           ? path.join(process.cwd(), url)
           : path.join(this.workspace, url);
         
-        const css = await fsp.readFile(cssPath, 'utf-8');
+        let css = await fs.promises.readFile(cssPath, 'utf-8');
         let body = '', contentType = '';
 
+        // TODO try and use context.projectDirectory
+        if (fs.existsSync(path.join(process.cwd(), 'postcss.config.js'))) {
+          const userPostcssConfig = require(`${process.cwd()}/postcss.config`);
+          const userPostcssPlugins = userPostcssConfig.plugins || [];
+          
+          if (userPostcssPlugins.length > 0) {
+            const result = await postcss(userPostcssPlugins)
+              .process(css, { from: cssPath });
+
+            css = result.css;
+          }
+        }
+
         // <style> tag used
         if (destHeader === 'style') {
           contentType = 'text/css';
diff --git a/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js b/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js
index 1a29bfd28..93460fbc4 100644
--- a/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js
+++ b/packages/cli/test/cases/build.config.postcss/build.config.postcss.spec.js
@@ -1,10 +1,9 @@
 /*
  * Use Case
- * Run Greenwood with a custom postcss config
+ * Run Greenwood with a custom PostCSS config
  *
  * User Result
- * Should generate a bare bones Greenwood build with a hello page containing a component with a 
- * @custom-media query
+ * Should generate a bare bones Greenwood build with the user's CSS file correctly un-nested and minified
  *
  * User Command
  * greenwood build
@@ -13,16 +12,18 @@
  * Greenwood default
  *  src/
  *   pages/
- *     hello.md
- *     index.md
+ *     index.html
+ *   styles/
+ *     main.css
  */
-const { JSDOM } = require('jsdom');
+const fs = require('fs');
+const glob = require('glob-promise');
 const path = require('path');
 const expect = require('chai').expect;
 const runSmokeTest = require('../../../../../test/smoke-test');
 const TestBed = require('../../../../../test/test-bed');
 
-xdescribe('Build Greenwood With: ', function() {
+describe('Build Greenwood With: ', function() {
   const LABEL = 'Custom PostCSS configuration';
   let setup;
 
@@ -37,27 +38,17 @@ xdescribe('Build Greenwood With: ', function() {
       await setup.runGreenwoodCommand('build');
     });
 
-    runSmokeTest(['public', 'index', 'not-found', 'hello'], LABEL);
+    // TODO runSmokeTest(['public', 'index', 'not-found'], LABEL);    
+    runSmokeTest(['public', 'index'], LABEL);
 
-    describe('Hello page with working @custom-media queries', function() {
-      let dom;
+    describe('Page referencing external nested CSS file', function() {
+      it('should output correctly processed nested CSS as non nested', function() {
+        const expectedCss = 'body{color:red}body h1{color:#00f}';
+        const cssFiles = glob.sync(path.join(this.context.publicDir, 'styles', '*.css'));
+        const css = fs.readFileSync(cssFiles[0], 'utf-8');
 
-      beforeEach(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './hello/index.html'));
-      });
-
-      it('should resolve the correct @custom-media queries for eve-container', function() {
-        // check @media (--screen-xs) resolves to @media (max-width:576px) via postcss preset-env: stage 1
-        const expectedStyle = 'eve-container .container.eve-container,eve-container ' +
-        '.container-fluid.eve-container {\n  margin-right:auto;margin-left:auto;padding-left:15px;' +
-        'padding-right:15px\n}\n\n@media (max-width:576px) {\neve-container .container.eve-container ' +
-        '{\n  width:calc(100% - 30px)\n}\n\n}\n\n@media (min-width:576px) {\neve-container ' + 
-        '.container.eve-container {\n  width:540px\n}\n\n}\n\n@media (min-width:768px) {\neve-container ' + 
-        '.container.eve-container {\n  width:720px\n}\n\n}\n\n@media (min-width:992px) {\neve-container ' +
-        '.container.eve-container {\n  width:960px\n}\n\n}\n\n@media (min-width:1200px) {\neve-container ' + 
-        '.container.eve-container {\n  width:1140px\n}\n\n}';
-        const containerStyle = dom.window.document.head.querySelector('style[scope="eve-container"]');
-        expect(containerStyle.innerHTML).to.equal(expectedStyle);
+        expect(cssFiles.length).to.equal(1);
+        expect(css).to.equal(expectedCss);
       });
     });
   });
diff --git a/packages/cli/test/cases/build.config.postcss/postcss.config.js b/packages/cli/test/cases/build.config.postcss/postcss.config.js
index dbe4fb4a1..80bcddab0 100644
--- a/packages/cli/test/cases/build.config.postcss/postcss.config.js
+++ b/packages/cli/test/cases/build.config.postcss/postcss.config.js
@@ -1,9 +1,5 @@
 module.exports = {
-  plugins: {
-    'postcss-preset-env': {
-      stage: 1
-    },
-    'postcss-nested': {},
-    'cssnano': {}
-  }
+  plugins: [
+    require('postcss-nested')
+  ]
 };
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/hello.md b/packages/cli/test/cases/build.config.postcss/src/pages/hello.md
deleted file mode 100644
index 3e4ce2541..000000000
--- a/packages/cli/test/cases/build.config.postcss/src/pages/hello.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-label: 'hello'
-title: 'Hello Page'
-imports:
-  Container: '@evergreen-wc/eve-container'
----
-### Hello World
-
-This is an example page built by Greenwood.  Make your own in _src/pages_!
-
-<eve-container></eve-container>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/index.html b/packages/cli/test/cases/build.config.postcss/src/pages/index.html
new file mode 100644
index 000000000..68663407a
--- /dev/null
+++ b/packages/cli/test/cases/build.config.postcss/src/pages/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" prefix="og:http://ogp.me/ns#">
+
+  <head>
+    <link rel="stylesheet" href="/styles/main.css"></link>    
+  </head>
+
+  <body>
+    <h1>Hello World!</h1>
+  </body>
+  
+</html>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/pages/index.md b/packages/cli/test/cases/build.config.postcss/src/pages/index.md
deleted file mode 100644
index 1c1a50fbb..000000000
--- a/packages/cli/test/cases/build.config.postcss/src/pages/index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### Greenwood
-
-This is the home page built by Greenwood. Make your own pages in src/pages/index.js!
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.postcss/src/styles/main.css b/packages/cli/test/cases/build.config.postcss/src/styles/main.css
new file mode 100644
index 000000000..d44494250
--- /dev/null
+++ b/packages/cli/test/cases/build.config.postcss/src/styles/main.css
@@ -0,0 +1,8 @@
+body {
+  color: red;
+
+  & h1 {
+    color: blue;
+  }
+
+}
\ No newline at end of file
diff --git a/postcss.config.js b/postcss.config.js
index 153314214..80bcddab0 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,9 +1,5 @@
 module.exports = {
-  // plugins: {
-  //   'postcss-preset-env': {
-  //     stage: 1
-  //   },
-  //   'postcss-nested': {},
-  //   'cssnano': {}
-  // }
+  plugins: [
+    require('postcss-nested')
+  ]
 };
\ No newline at end of file
diff --git a/www/components/row/row.css b/www/components/row/row.css
index baa00f083..9a5c65f98 100644
--- a/www/components/row/row.css
+++ b/www/components/row/row.css
@@ -8,4 +8,4 @@
   @media (max-width: 1024px) {
     flex-direction: column;
   }
-}
+}
\ No newline at end of file
diff --git a/www/components/social-icons/social-icons.css b/www/components/social-icons/social-icons.css
index a3aa65563..7c0c7e512 100644
--- a/www/components/social-icons/social-icons.css
+++ b/www/components/social-icons/social-icons.css
@@ -14,4 +14,4 @@
   @media (max-width: 768px) {
     flex-direction: row;
   }
-}
+}
\ No newline at end of file
diff --git a/www/package.json b/www/package.json
index ce779787d..a870a6eb2 100644
--- a/www/package.json
+++ b/www/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@mapbox/rehype-prism": "^0.5.0",
+    "postcss-nested": "^4.1.2",
     "rehype-autolink-headings": "^4.0.0",
     "rehype-slug": "^3.0.0",
     "remark-github": "^10.0.1"
diff --git a/www/pages/docs/build.md b/www/pages/docs/build.md
index 931d4ed4f..24bc4cd20 100644
--- a/www/pages/docs/build.md
+++ b/www/pages/docs/build.md
@@ -6,8 +6,61 @@ index: 4
 linkheadings: 3
 ---
 
-# Build Configurations
-> ⛔ [_**Coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/426)
+## Build Configurations
+> ⛔ [_**More coming Soon!**_](https://github.com/ProjectEvergreen/greenwood/issues/426)
+
+**Greenwood** offers the ability to extend some of the internal tooling used to better customize the project for those with more advanced use cases than those offered by Greenwood's default.  Greenwood is farily unopinionated in its defaults and aims to provide support for modern web standards that are >= Stage 3 (where applicable).
+
+> _For markdown specific options, please see our docs section on [markdown](/docs/markdown/)._
+
+### PostCSS
+
+To provide addition configurations and optimizations around CSS, user's can add a _postcss.config.js_ file within a project's root directory to take advantage of [**PostCSS**](https://postcss.org/).
+
+For example, if you wanted to write CSS with nested selectors, you would want do the following:
+
+1. Install the relevant PostCSS plugin
+    ```shell
+    $ npm install postcss-nested --save-dev
+    ```
+1. Create a _postcss.config.js_ file and `require` your plugin
+    ```js
+    module.exports = {
+      plugins: [
+        require('postcss-nested')
+      ]
+    };
+    ```
+1. Now you can write nested CSS!
+    ```css
+    :host {
+      & .card {
+        padding: 2.5rem;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        word-wrap: break-word;
+        background-color: #fff;
+        background-clip: initial;
+        text-align: center;
+
+        & .body {
+          padding:10px;
+        }
+
+        @media(max-width:768px) {
+          padding:0;
+        }
+      }
+    }
+    ```
+
+> _For reference, [this is the default postcss.config.js](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/config/postcss.config.js) being provided by Greenwood._
+
+<!--
+> Note: [.browserslistrc](#browserslist) is used by postcss and is also needed to be overwritten. You can override that in that same directory or you may also configure postcss-preset-env to use default `.browserslistrc` path via environement variable to: `./node_modules/@greenwood/cli/src/config/.browserslistrc`.  See [postcss-preset-env docs](https://www.npmjs.com/package/postcss-preset-env#browsers) for further information. [Ejecting configuration](#eject-configuration) is one way in which you can easily override both with no extra configuraiton.
+-->
 
 <!-- 
 A number of [core build configuration files](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli/src/config) can be overridden by creating each file within the root path of your project. You can also automate this task in a single command [see eject configurations](#eject-configurations).
@@ -36,11 +89,6 @@ By default, [this is the postcss.config.js](https://github.com/ProjectEvergreen/
 
 > Note: [.browserslistrc](#browserslist) is used by postcss and is also needed to be overwritten. You can override that in that same directory or you may also configure postcss-preset-env to use default `.browserslistrc` path via environement variable to: `./node_modules/@greenwood/cli/src/config/.browserslistrc`.  See [postcss-preset-env docs](https://www.npmjs.com/package/postcss-preset-env#browsers) for further information. [Ejecting configuration](#eject-configuration) is one way in which you can easily override both with no extra configuraiton.
 
-### Webpack
-
-The webpack config for production(`webpack.config.prod.js`) and development(`webpack.config.develop.js`) can be overridden by providing your own custom configuration within your project's directory.  You can eject the default core configurations into your project using greenwood cli [eject](#eject-configurations) command and then edit them after, which is the simplest and recommended method for modifying webpack config.  If you wish to revert back to the default provided configuration, simply delete these 2 files from your project's root directory. 
-A number of core build configuration files can be overridden by creating each file within the root path of your project.
-
 ### Eject Configurations
 
 From greenwood CLI you can eject [core configuration files(webpack, postcss, babel, browserslistrc)](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/cli/src/config) into your project's working directory which will make it easier to add your own customizations.  To do so, add the following to your package.json `scripts` object:
diff --git a/www/styles/home.css b/www/styles/home.css
index 4835d34db..8dbea1ab1 100644
--- a/www/styles/home.css
+++ b/www/styles/home.css
@@ -1,71 +1,111 @@
-/* TODO restore to nested styles */
 h3 {
   color: green;
 }
 
-<<<<<<< HEAD
-  & .gwd-content {
-    background-color: white;
-    margin: 0 auto;
-    margin-top: 20px;
-    min-height: 300px;
-    padding: 0 15%;
-    font-size: 1.2rem;
-
-    & h3 {
-      font-size: 2rem;
-      margin: 5px 0;
-    }
-=======
 .gwd-content {
-  background-color:white !important;
-  margin: 0 auto;
-  margin-top: 20px;
+  background-color: white;
   min-height: 300px;
-  background-color: #efefef;
-  padding: 0 15%;
   font-size:1.2rem;
-}
 
-.gwd-content h3 {
-  font-size:2rem;
-  margin: 5px 0;
+  & h3 {
+    font-size:2rem;
+    margin: 5px 0;
+  }
+
+  & a {
+    color: #201E2E;
+  }
 }
->>>>>>> Rfc/issue 355 no bundle development (#417)
 
-.gwd-content a {
-  color: #1d337a;
+.cards {
+  margin: 0 -15%;
 }
 
-<<<<<<< HEAD
-  & .cards {
-    margin: 0 -15%;
+.message {
+  padding: 2rem;
+  text-align:center;
+  margin: 0 auto;
+
+  & hr {
+    margin-top: 4rem;
   }
 
-  & .message {
-    padding: 4rem;
-    text-align: center;
-=======
-.gwd-content .cards {
-  margin: 0 -15%
+  @media(max-width:768px) {
+    padding:0;
+  }
 }
-  
-.gwd-content .message {
-  padding: 4rem;
-  text-align:center;
+
+.quickstart {
+  width: 90%;
+  text-align: center;
+  margin: 4rem auto;
+
+  & p {
+    max-width: 60ch;
+    margin: auto;
+    margin-top: 2rem;
+  }
 }
->>>>>>> Rfc/issue 355 no bundle development (#417)
 
-.gwd-content .message hr {
-  margin-top: 4rem;
+.cards {
+  margin: 20px -0.25rem;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  margin-bottom: 3rem;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+  }
+}
 
-<<<<<<< HEAD
-    @media (max-width: 768px) {
-      padding: 0;
+#gwd-message-wrapper {
+  background-color: #504B65;
+
+  & h2 {
+    color: #fff;
+    max-width: 60ch;
+    margin: auto;
+
+    @media(max-width:768px) {
+      padding-top: 2rem;
     }
-=======
-  @media(max-width:768px) {
-    padding:0;
->>>>>>> Rfc/issue 355 no bundle development (#417)
   }
+}
+
+.mini-card {
+  width: 200px;
+  margin: 1.5rem;
+  border: 0.5px solid #DDDDE1;
+  border-radius: 20px;
+  background-color: #fff;
+  display:flex;
+  align-items: center;
+  padding: 2rem;
+  box-shadow:
+  0 1.3px 2.7px rgba(0, 0, 0, 0.065),
+  0 3.4px 6.9px rgba(0, 0, 0, 0.093),
+  0 6.9px 14.2px rgba(0, 0, 0, 0.117),
+  0 14.2px 29.2px rgba(0, 0, 0, 0.145),
+  0 39px 80px rgba(0, 0, 0, 0.21);
+}
+
+.min-card-container {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  margin: auto;
+}
+
+app-card {
+  margin: 1.5rem;
+  padding: 2rem;
+  border: 0.5px solid #DDDDE1;
+  border-radius: 20px;
+  box-shadow:
+  0 2px 3.6px rgba(0, 0, 0, 0.014),
+  0 5.6px 10px rgba(0, 0, 0, 0.02),
+  0 13.6px 24.1px rgba(0, 0, 0, 0.026),
+  0 45px 80px rgba(0, 0, 0, 0.04);
 }
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index c8f87452b..deb46ebc5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7106,6 +7106,14 @@ postcss-modules@^2.0.0:
     postcss "^7.0.1"
     string-hash "^1.1.1"
 
+postcss-nested@^4.1.2:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-4.2.3.tgz#c6f255b0a720549776d220d00c4b70cd244136f6"
+  integrity sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==
+  dependencies:
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"