diff --git a/packages/cli/src/config/webpack.config.common.js b/packages/cli/src/config/webpack.config.common.js
index 26b773d53..ee3a0fda0 100644
--- a/packages/cli/src/config/webpack.config.common.js
+++ b/packages/cli/src/config/webpack.config.common.js
@@ -84,7 +84,8 @@ module.exports = ({ config, context }) => {
     resolve: {
       extensions: ['.js', '.json', '.gql', '.graphql'],
       alias: {
-        '@greenwood/cli/data': context.dataDir
+        '@greenwood/cli/data': context.dataDir,
+        '@greenwood/cli/templates/app-template': path.join(context.scratchDir, 'app', 'app-template.js')
       }
     },
 
diff --git a/packages/cli/src/lifecycles/scaffold.js b/packages/cli/src/lifecycles/scaffold.js
index f2145e4d6..b185038d4 100644
--- a/packages/cli/src/lifecycles/scaffold.js
+++ b/packages/cli/src/lifecycles/scaffold.js
@@ -89,7 +89,7 @@ const writeRoutes = async(compilation) => {
       const appDir = path.join(compilation.context.scratchDir, 'app');
 
       await fs.ensureDir(appDir);
-      await fs.writeFile(path.join(appDir, './app.js'), result);
+      await fs.writeFile(path.join(appDir, './app-template.js'), result);
 
       resolve();
     } catch (err) {
@@ -98,6 +98,21 @@ const writeRoutes = async(compilation) => {
   });
 };
 
+const writeBaseAppTemplate = async({ context }) => {
+  return new Promise(async (resolve, reject) => {
+    try {
+      let data = await fs.readFile(path.join(__dirname, '../templates/', 'base-template.js'), 'utf8');
+      const appDir = path.join(context.scratchDir, 'app');
+
+      await fs.ensureDir(appDir);
+      await fs.writeFile(path.join(appDir, './app.js'), data);
+      resolve();
+    } catch (err) {
+      reject(err);
+    }
+  });
+};
+
 const setupIndex = async({ context }) => {
   return new Promise(async (resolve, reject) => {
     try {
@@ -125,6 +140,9 @@ module.exports = generateScaffolding = async (compilation) => {
       console.log('Writing Lit routes...');
       await writeRoutes(compilation);
 
+      console.log('Write Base App Template...');
+      await writeBaseAppTemplate(compilation);
+
       console.log('setup index page and html');
       await setupIndex(compilation);
 
diff --git a/packages/cli/src/templates/app-template.js b/packages/cli/src/templates/app-template.js
index 1016c49aa..60b8d5fb6 100644
--- a/packages/cli/src/templates/app-template.js
+++ b/packages/cli/src/templates/app-template.js
@@ -1,101 +1,13 @@
 import { html, LitElement } from 'lit-element';
-import { connectRouter } from 'lit-redux-router';
-import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
-import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
-import thunk from 'redux-thunk';
-import client from '@greenwood/cli/data/client';
-import ConfigQuery from '@greenwood/cli/data/queries/config';
-import GraphQuery from '@greenwood/cli/data/queries/graph';
-
-// eslint-disable-next-line no-underscore-dangle
-const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
-
-const store = createStore((state) => state,
-  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))
-);
-
-import '../index/index';
-
-connectRouter(store);
 
 class AppComponent extends LitElement {
 
-  async connectedCallback() {
-    super.connectedCallback();
-    const route = window.location.pathname;
-    const response = await Promise.all([
-      await client.query({
-        query: ConfigQuery
-      }),
-      await client.query({
-        query: GraphQuery
-      })
-    ]);
-    const { config } = response[0].data;
-    const currentPage = response[1].data.graph.filter((page) => {
-      return route === page.link;
-    })[0];
-
-    const currentPageTitleSuffix = !currentPage || currentPage.link === '/'
-      ? ''
-      : ` - ${currentPage.title}`;
-    const fullTitle = `${config.title}${currentPageTitleSuffix}`;
-
-    this.setDocumentTitle(fullTitle);
-    this.setMeta(config.meta, currentPage);
-  }
-
-  setDocumentTitle(title = '') {
-    const head = document.head;
-    const titleElement = head.getElementsByTagName('title')[0];
-
-    titleElement.innerHTML = title;
-  }
-
-  setMeta(meta = [], currentPage = {}) {
-    let header = document.head;
-
-    meta.forEach(metaItem => {
-      const metaType = metaItem.rel // type of meta
-        ? 'rel'
-        : metaItem.name 
-          ? 'name'
-          : 'property';
-      const metaTypeValue = metaItem[metaType]; // value of the meta
-      let meta = document.createElement('meta');
-
-      if (metaType === 'rel') {
-        // change to a <link> tag instead
-        meta = document.createElement('link');
-
-        meta.setAttribute('rel', metaTypeValue);
-        meta.setAttribute('href', metaItem.href);
-      } else {
-        const metaContent = metaItem.property === 'og:url' 
-          ? `${metaItem.content}${currentPage.link}` 
-          : metaItem.content;
-
-        meta.setAttribute(metaType, metaItem[metaType]);
-        meta.setAttribute('content', metaContent);
-      }
-
-      const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`);
-      
-      // rehydration
-      if (oldmeta) {
-        header.replaceChild(meta, oldmeta);
-      } else {
-        header.appendChild(meta);
-      }
-    });
-  }
-
   render() {
     return html`
-        MYROUTES
-        <lit-route><h1>404 Not found</h1></lit-route>
+      MYROUTES
+      <lit-route><h1>404 Not found</h1></lit-route>
     `;
   }
 }
 
-customElements.define('eve-app', AppComponent);
\ No newline at end of file
+customElements.define('eve-app', AppComponent);
diff --git a/packages/cli/src/templates/base-template.js b/packages/cli/src/templates/base-template.js
new file mode 100644
index 000000000..2028a48a0
--- /dev/null
+++ b/packages/cli/src/templates/base-template.js
@@ -0,0 +1,104 @@
+import { html, LitElement } from 'lit-element';
+import { connectRouter } from 'lit-redux-router';
+import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
+import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
+import thunk from 'redux-thunk';
+import client from '@greenwood/cli/data/client';
+import ConfigQuery from '@greenwood/cli/data/queries/config';
+import GraphQuery from '@greenwood/cli/data/queries/graph';
+import '@greenwood/cli/templates/app-template';
+// eslint-disable-next-line no-underscore-dangle
+const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
+
+const store = createStore((state) => state,
+  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk))
+);
+
+import '../index/index';
+
+connectRouter(store);
+
+class BaseAppComponent extends LitElement {
+
+  async connectedCallback() {
+    super.connectedCallback();
+    const route = window.location.pathname;
+    const response = await Promise.all([
+      await client.query({
+        query: ConfigQuery
+      }),
+      await client.query({
+        query: GraphQuery
+      })
+    ]);
+    const { config } = response[0].data;
+    const currentPage = response[1].data.graph.filter((page) => {
+      return route === page.link;
+    })[0];
+
+    const currentPageTitleSuffix = !currentPage || currentPage.link === '/'
+      ? ''
+      : ` - ${currentPage.title}`;
+    const fullTitle = `${config.title}${currentPageTitleSuffix}`;
+
+    this.setDocumentTitle(fullTitle);
+    this.setMeta(config.meta, currentPage);
+  }
+
+  setDocumentTitle(title = 'test') {
+    const head = document.head;
+    const titleElement = head.getElementsByTagName('title')[0];
+
+    titleElement.innerHTML = title;
+  }
+
+  setMeta(meta = [], currentPage = {}) {
+    let header = document.head;
+
+    meta.forEach(metaItem => {
+      const metaType = metaItem.rel // type of meta
+        ? 'rel'
+        : metaItem.name 
+          ? 'name'
+          : 'property';
+      const metaTypeValue = metaItem[metaType]; // value of the meta
+      let meta = document.createElement('meta');
+
+      if (metaType === 'rel') {
+        // change to a <link> tag instead
+        meta = document.createElement('link');
+
+        meta.setAttribute('rel', metaTypeValue);
+        meta.setAttribute('href', metaItem.href);
+      } else {
+        const metaContent = metaItem.property === 'og:url' 
+          ? `${metaItem.content}${currentPage.link}` 
+          : metaItem.content;
+
+        meta.setAttribute(metaType, metaItem[metaType]);
+        meta.setAttribute('content', metaContent);
+      }
+
+      const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`);
+      
+      // rehydration
+      if (oldmeta) {
+        header.replaceChild(meta, oldmeta);
+      } else {
+        header.appendChild(meta);
+      }
+    });
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html`
+        <eve-app></eve-app>
+    `;
+  }
+}
+
+customElements.define('app-root', BaseAppComponent);
\ No newline at end of file
diff --git a/packages/cli/src/templates/index.html b/packages/cli/src/templates/index.html
index fc7ca20f1..ac454b28e 100644
--- a/packages/cli/src/templates/index.html
+++ b/packages/cli/src/templates/index.html
@@ -19,7 +19,7 @@
 
   <body>
 
-    <eve-app></eve-app>
+    <app-root></app-root>
     
   </body>
 
diff --git a/packages/cli/test/cases/build.config.babel/build.config.babel.spec.js b/packages/cli/test/cases/build.config.babel/build.config.babel.spec.js
index 8b6d0b1e7..21c3301c0 100644
--- a/packages/cli/test/cases/build.config.babel/build.config.babel.spec.js
+++ b/packages/cli/test/cases/build.config.babel/build.config.babel.spec.js
@@ -42,9 +42,9 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
   
-      it('should not contain any components within eve-app', function() {
+      it('should not contain any components within app-root', function() {
         // prove that our custom broken babel config is being used
-        const outlet = dom.window.document.querySelector('body > eve-app').innerHTML;
+        const outlet = dom.window.document.querySelector('body > app-root').innerHTML;
         expect(outlet).to.equal('');
       });
 
diff --git a/packages/cli/test/cases/build.default.webpack/webpack.config.common.js b/packages/cli/test/cases/build.default.webpack/webpack.config.common.js
index 7b2efbe6d..7d51c1b57 100644
--- a/packages/cli/test/cases/build.default.webpack/webpack.config.common.js
+++ b/packages/cli/test/cases/build.default.webpack/webpack.config.common.js
@@ -85,7 +85,8 @@ module.exports = ({ config, context }) => {
     resolve: {
       extensions: ['.js', '.json', '.gql', '.graphql'],
       alias: {
-        '@greenwood/cli/data': path.join(__dirname, '../../..', './src', './data')
+        '@greenwood/cli/data': path.join(__dirname, '../../..', './src', './data'),
+        '@greenwood/cli/templates/app-template': path.join(context.scratchDir, 'app', 'app-template.js')
       }
     },
 
diff --git a/packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js b/packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js
index 215e45bd5..41c5c0f8f 100644
--- a/packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js
+++ b/packages/cli/test/cases/build.default.workspace-template-app/build.default.workspace-template-app.spec.js
@@ -69,7 +69,7 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have a router outlet tag in the <body>', function() {
-        const outlet = dom.window.document.querySelectorAll('body eve-app');
+        const outlet = dom.window.document.querySelectorAll('body app-root');
 
         expect(outlet.length).to.be.equal(1);
       });
diff --git a/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js b/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js
index ce3d2d4be..7e866dcc4 100644
--- a/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js
+++ b/packages/cli/test/cases/build.default.workspace-template-app/src/templates/app-template.js
@@ -1,47 +1,11 @@
 import { html, LitElement } from 'lit-element';
-import { connectRouter } from 'lit-redux-router';
-import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
-import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
-import thunk from 'redux-thunk';
-import client from '@greenwood/cli/data/client';
-import ConfigQuery from '@greenwood/cli/data/queries/config';
-
-// eslint-disable-next-line no-underscore-dangle
-const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
-
-// eslint-disable-next-line
-const store = createStore(
-  (state, action) => state, // eslint-disable-line
-  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
-
-import '../index/index';
-
-connectRouter(store);
 
 class AppComponent extends LitElement {
 
-  async connectedCallback() {
-    super.connectedCallback();
-
-    const response = await client.query({
-      query: ConfigQuery
-    });
-    const { config } = response.data;
-
-    this.setDocoumentTitle(config.title);
-  }
-
-  setDocoumentTitle(title) {
-    const head = document.head;
-    const titleElement = head.getElementsByTagName('title')[0];
-
-    titleElement.innerHTML = title;
-  }
-
   render() {
     return html`
-        MYROUTES
-        <p id="custom-app-template">My Custom App Template</p>
+      MYROUTES
+      <p id="custom-app-template">My Custom App Template</p>
     `;
   }
 }
diff --git a/test/smoke-test.js b/test/smoke-test.js
index 6e4dc513a..b7ee61857 100644
--- a/test/smoke-test.js
+++ b/test/smoke-test.js
@@ -89,7 +89,7 @@ function defaultIndex(label) {
       });
 
       it('should have one <script> tag in the <body> for the main bundle', function() {
-        const scriptTags = dom.window.document.querySelectorAll('body eve-app ~ script');
+        const scriptTags = dom.window.document.querySelectorAll('body app-root ~ script');
         const bundledScript = Array.prototype.slice.call(scriptTags).filter(script => {
           const src = script.src.replace('file:///', '');
 
diff --git a/www/pages/docs/layouts.md b/www/pages/docs/layouts.md
index 1d10e4623..b7feeb6e7 100644
--- a/www/pages/docs/layouts.md
+++ b/www/pages/docs/layouts.md
@@ -61,34 +61,16 @@ With a completed page-template.js present in your `src/templates/` folder you ca
 
 ### App Template
 
-In order to make an app template, you need to create a `LitElement` component that contains a number of pre-defined variables, elements, and imports. You need to do this in a file called  your _<workspace>templates/app-template.js_.
+In order to make an app template, you need to create a `LitElement` component that contains a predefined hook `MYROUTES` aswell the component element itself **must be defined as `eve-app`**.  You need to do this in a file name and path _`<workspace>`/templates/app-template.js_.
 
-First, we need our app template to use routes, by default greenwood uses [**lit-redux-router**](https://github.com/fernandopasik/lit-redux-router).
+`MYROUTES` is used in our app template to define where our routes will be placed. Greenwood uses [**lit-redux-router**](https://github.com/fernandopasik/lit-redux-router) and will replace the `MYROUTES` placeholder with all page routes automatically.
 
-Here is Greenwood's app-template, which you can copy / paste as a starting point for your own custom app template, _though it is recommended to let Greenwood manage this for you_.
+Here is an example app-template:
 
 ```js
 import { html, LitElement } from 'lit-element';
-import { connectRouter } from 'lit-redux-router';
-import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
-import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
-import thunk from 'redux-thunk';
 
-// initialize a redux store
-const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
-const store = createStore(
-  (state, action) => state,
-    compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
-
-
-// Next we need to import a list of files that will be generated when Greenwood is run
-import '../index/index.js';
-
-// Finally we can connect to our store and define our component.
-connectRouter(store);
-
-// Add the MY-ROUTES(without dash) predefined hook. This is where all your routes will be loaded.
-// You may also opt to define a custom 404 route here.
+// Add the MY-ROUTES(without dash) predefined hook. This is where all your routes will be
 // You must define the app-template with the element name eve-app
 class AppComponent extends LitElement {
   render() {
@@ -102,7 +84,11 @@ class AppComponent extends LitElement {
 customElements.define('eve-app', AppComponent);
 ```
 
-> A working example can be found in the [greenwood source](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/app-template.js) which is the default _app-template.js_ if no other is defined.
+* `app-template.js` requires MYROUTES predefined hook
+* `app-template.js` must have a component name `eve-app`
+* `app-template.js` must maintain filename and path `<your-workspace>/templates/app-template.js`
+
+> A working example can be found in the [greenwood source](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/templates/app-template.js) which is the default _app-template.js_ if no other is defined. A production example can be found in [greenwood's website](https://github.com/ProjectEvergreen/greenwood/blob/master/www/templates/app-template.js).
 
 
 ### Pages
diff --git a/www/templates/app-template.js b/www/templates/app-template.js
index 39ed1cdd1..121420a84 100644
--- a/www/templates/app-template.js
+++ b/www/templates/app-template.js
@@ -1,105 +1,16 @@
 import { html, css, LitElement } from 'lit-element';
-import { connectRouter } from 'lit-redux-router';
-import { applyMiddleware, createStore, compose as origCompose, combineReducers } from 'redux';
-import { lazyReducerEnhancer } from 'pwa-helpers/lazy-reducer-enhancer.js';
-import thunk from 'redux-thunk';
-import client from '@greenwood/cli/data/client';
-import ConfigQuery from '@greenwood/cli/data/queries/config';
-import GraphQuery from '@greenwood/cli/data/queries/graph';
 import '../components/header/header';
 import '../components/footer/footer';
 
-// eslint-disable-next-line no-underscore-dangle
-const compose = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || origCompose;
-
-// eslint-disable-next-line
-const store = createStore(
-  (state, action) => state, // eslint-disable-line
-  compose(lazyReducerEnhancer(combineReducers), applyMiddleware(thunk)));
-
-import '../index/index';
-
-connectRouter(store);
-
 class AppComponent extends LitElement {
 
   static get styles() {
     return css`
-    .content-outlet {
+    .gwd-content-outlet {
       min-height: 100vh
     }`;
   }
 
-  async connectedCallback() {
-    super.connectedCallback();
-    const route = window.location.pathname;
-    const response = await Promise.all([
-      await client.query({
-        query: ConfigQuery
-      }),
-      await client.query({
-        query: GraphQuery
-      })
-    ]);
-    const { config } = response[0].data;
-    const currentPage = response[1].data.graph.filter((page) => {
-      return route === page.link;
-    })[0];
-
-    const currentPageTitleSuffix = !currentPage || currentPage.link === '/'
-      ? ''
-      : ` - ${currentPage.title}`;
-    const fullTitle = `${config.title}${currentPageTitleSuffix}`;
-
-    this.setDocumentTitle(fullTitle);
-    this.setMeta(config.meta, currentPage);
-  }
-
-  setDocumentTitle(title = '') {
-    const head = document.head;
-    const titleElement = head.getElementsByTagName('title')[0];
-
-    titleElement.innerHTML = title;
-  }
-
-  setMeta(meta = [], currentPage = {}) {
-    let header = document.head;
-
-    meta.forEach(metaItem => {
-      const metaType = metaItem.rel // type of meta
-        ? 'rel'
-        : metaItem.name
-          ? 'name'
-          : 'property';
-      const metaTypeValue = metaItem[metaType]; // value of the meta
-      let meta = document.createElement('meta');
-
-      if (metaType === 'rel') {
-        // change to a <link> tag instead
-        meta = document.createElement('link');
-
-        meta.setAttribute('rel', metaTypeValue);
-        meta.setAttribute('href', metaItem.href);
-      } else {
-        const metaContent = metaItem.property === 'og:url'
-          ? `${metaItem.content}${currentPage.link}`
-          : metaItem.content;
-
-        meta.setAttribute(metaType, metaItem[metaType]);
-        meta.setAttribute('content', metaContent);
-      }
-
-      const oldmeta = header.querySelector(`[${metaType}="${metaTypeValue}"]`);
-
-      // rehydration
-      if (oldmeta) {
-        header.replaceChild(meta, oldmeta);
-      } else {
-        header.appendChild(meta);
-      }
-    });
-  }
-
   render() {
     return html`
       <div class='gwd-wrapper'>