diff --git a/.babelrc b/.babelrc
index 5d1b702..1a6c752 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1 +1,4 @@
-{ "presets": ["react", "es2015"] }
+{ 
+	"presets": ["react", "es2015"],
+	"plugins": ["transform-class-properties"]
+}
diff --git a/app.js b/app.js
index d763964..3992b4c 100644
--- a/app.js
+++ b/app.js
@@ -18,11 +18,11 @@ const browserHistory = useRouterHistory(createHistory)({
 });
 
 ReactDOM.render(
-	(
-	  <Provider store={store}>
+  (
+    <Provider store={store}>
       <Router history={browserHistory}>
-      	{route}
+        {route}
       </Router>
     </Provider>
-	), document.getElementById('root')
+  ), document.getElementById('root')
 );
diff --git a/js/components/Form.jsx b/js/components/Form.jsx
index 82847d9..f551aef 100644
--- a/js/components/Form.jsx
+++ b/js/components/Form.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import FormApp from 'us-forms-system/lib/js/containers/FormApp';
+import FormApp from './FormApp';
 import formConfig from '../config/form';
 
 export default function Form({ location, children }) {
   return (
     <FormApp formConfig={formConfig} currentLocation={location}>
- 			{children}
+      {children}
     </FormApp>
   );
 }
diff --git a/js/components/FormApp.jsx b/js/components/FormApp.jsx
new file mode 100644
index 0000000..d0a71a6
--- /dev/null
+++ b/js/components/FormApp.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Scroll from 'react-scroll';
+
+import FormNav from 'us-forms-system/lib/js/components/FormNav';
+import FormTitle from 'us-forms-system/lib/js/components/FormTitle';
+import { isInProgress } from 'us-forms-system/lib/js/helpers';
+// import { setGlobalScroll } from 'us-forms-system/lib/js/utilities/ui';
+
+const Element = Scroll.Element;
+
+/*
+ * Primary component for a schema generated form app.
+ */
+class FormApp extends React.Component {
+  componentWillMount() {
+    // setGlobalScroll();
+
+    // if (window.History) {
+    //   window.History.scrollRestoration = 'manual';
+    // }
+  }
+
+  render() {
+    const { currentLocation, formConfig, children, formData } = this.props;
+    console.log('FormApp');
+    console.log(formData);
+    const trimmedPathname = currentLocation.pathname.replace(/\/$/, '');
+    const isIntroductionPage = trimmedPathname.endsWith('introduction');
+    const Footer = formConfig.footerContent;
+
+    let formTitle;
+    let formNav;
+    let renderedChildren = children;
+    if (!isIntroductionPage) {
+      // Show title only if we're not on the intro page and if there is a title
+      // specified in the form config
+      if (formConfig.title) {
+        formTitle = <FormTitle title={formConfig.title} subTitle={formConfig.subTitle}/>;
+      }
+    }
+
+    // Show nav only if we're not on the intro, form-saved, error, or confirmation page
+    // Also add form classes only if on an actual form page
+    if (isInProgress(trimmedPathname)) {
+      formNav = <FormNav formData={formData} formConfig={formConfig} currentPath={trimmedPathname}/>;
+
+      renderedChildren = (
+        <div className="progress-box progress-box-schemaform">
+          {children}
+        </div>
+      );
+    }
+
+    let footer;
+    if (Footer) {
+      footer = (
+        <Footer
+          formConfig={formConfig}
+          currentLocation={currentLocation}/>
+      );
+    }
+
+    return (
+      <div>
+        <div className="row">
+          <div className="usa-width-two-thirds medium-8 columns">
+            <Element name="topScrollElement"/>
+            {formTitle}
+            {formNav}
+            {renderedChildren}
+          </div>
+        </div>
+        {footer}
+        <span className="js-test-location hidden" data-location={trimmedPathname} hidden></span>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  formData: state.form.data
+});
+
+export default connect(mapStateToProps)(FormApp);
+
+export { FormApp };
diff --git a/js/components/PageWithNavigation.jsx b/js/components/PageWithNavigation.jsx
new file mode 100644
index 0000000..d007949
--- /dev/null
+++ b/js/components/PageWithNavigation.jsx
@@ -0,0 +1,164 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import Scroll from 'react-scroll';
+import _ from 'lodash/fp';
+import classNames from 'classnames';
+
+import FormPage from 'us-forms-system/lib/js/containers/FormPage';
+import ProgressButton from 'us-forms-system/lib/js/components/ProgressButton';
+// import SchemaForm from 'us-forms-system/lib/js/components/SchemaForm';
+// import { setData, uploadFile } from '../actions';
+import { getNextPagePath, getPreviousPagePath } from 'us-forms-system/lib/js/routing';
+import { focusElement } from 'us-forms-system/lib/js/utilities/ui';
+
+function focusForm() {
+  focusElement('.nav-header');
+}
+
+const scroller = Scroll.scroller;
+const scrollToTop = () => {
+  scroller.scrollTo('topScrollElement', window.Forms.scroll || {
+    duration: 500,
+    delay: 0,
+    smooth: true,
+  });
+};
+
+class PageWithNavigation extends React.Component {
+  componentDidMount() {
+    if (!this.props.blockScrollOnMount) {
+      scrollToTop();
+      focusForm();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.route.pageConfig.pageKey !== this.props.route.pageConfig.pageKey ||
+      _.get('params.index', prevProps) !== _.get('params.index', this.props)) {
+      scrollToTop();
+      focusForm();
+    }
+  }
+
+  getUpdatedFormData = (formData) => {
+    return formData;
+  }
+
+  onSubmit = () => {
+    const { params, route, location } = this.props;
+    const formData = this.getUpdatedFormData();
+    // This makes sure defaulted data on a page with no changes is saved
+    // Probably safe to do this for regular pages, too, but it hasn’t been necessary
+    // if (route.pageConfig.showPagePerItem) {
+    //   const newData = _.set([route.pageConfig.arrayPath, params.index], formData, form.data);
+    //   this.props.setData(newData);
+    // }
+
+    const path = getNextPagePath(route.pageList, formData, location.pathname);
+
+    this.props.router.push(path);
+  }
+
+  goBack = () => {
+    const { route: { pageList }, location } = this.props;
+    const formData = this.getUpdatedFormData();
+
+    const path = getPreviousPagePath(pageList, formData, location.pathname);
+
+    this.props.router.push(path);
+  }
+
+  render() {
+    const {
+      route,
+      params,
+      // form,
+      contentAfterButtons,
+      formContext
+    } = this.props;
+
+    // let {
+    //   schema,
+    //   uiSchema
+    // } = form.pages[route.pageConfig.pageKey];
+
+    const pageClasses = classNames('form-panel', route.pageConfig.pageClass);
+    // let data = form.data;
+
+    // if (route.pageConfig.showPagePerItem) {
+    //   // Instead of passing through the schema/uiSchema to SchemaForm, the
+    //   // current item schema for the array at arrayPath is pulled out of the page state and passed
+    //   schema = schema.properties[route.pageConfig.arrayPath].items[params.index];
+    //   // Similarly, the items uiSchema and the data for just that particular item are passed
+    //   uiSchema = uiSchema[route.pageConfig.arrayPath].items;
+    //   // And the data should be for just the item in the array
+    //   data = _.get([route.pageConfig.arrayPath, params.index], data);
+    // }
+    // It should be "safe" to check that this is the first page because it is
+    // always eligible and enabled, no need to call getPreviousPagePath.
+    const isFirstRoutePage = route.pageList[0].path === this.props.location.pathname;
+
+    return (
+      <div className={pageClasses}>
+        <FormPage
+          route={route}
+          location={this.props.location}
+          onSubmit={this.onSubmit}
+          onPageChange={this.getUpdatedFormData}>
+        </FormPage>
+        <div className="row form-progress-buttons schemaform-buttons">
+          <div className="small-6 medium-5 columns">
+            {!isFirstRoutePage &&
+              <ProgressButton
+                onButtonClick={this.goBack}
+                buttonText="Back"
+                buttonClass="usa-button-secondary"
+                beforeText="«"/> }
+          </div>
+          <div className="small-6 medium-5 end columns">
+            <ProgressButton
+              submitButton
+              buttonText="Continue"
+              buttonClass="usa-button-primary"
+              afterText="»"/>
+          </div>
+          {contentAfterButtons}
+        </div>
+      </div>
+    );
+  }
+}
+
+// function mapStateToProps(state) {
+//   return {
+//     form: state.form,
+//     user: state.user
+//   };
+// }
+
+// const mapDispatchToProps = {
+//   setData,
+//   uploadFile
+// };
+
+PageWithNavigation.propTypes = {
+  // form: PropTypes.object.isRequired,
+  route: PropTypes.shape({
+    pageConfig: PropTypes.shape({
+      pageKey: PropTypes.string.isRequired,
+      schema: PropTypes.object.isRequired,
+      uiSchema: PropTypes.object.isRequired
+    }),
+    pageList: PropTypes.arrayOf(PropTypes.shape({
+      path: PropTypes.string.isRequired
+    }))
+  }),
+  contentAfterButtons: PropTypes.element,
+  // setData: PropTypes.func
+};
+
+export default withRouter(PageWithNavigation);
+
+export { PageWithNavigation };
diff --git a/js/config/form.js b/js/config/form.js
index 5cc7119..b28b4ba 100644
--- a/js/config/form.js
+++ b/js/config/form.js
@@ -18,10 +18,16 @@ const formConfig = {
         firstPage: {
           path: 'first-chapter/first-page',
           title: 'First Page',
-          uiSchema: {},
+          uiSchema: {
+
+          },
           schema: {
             type: 'object',
-            properties: {}
+            properties: {
+              name: {
+                type: 'string'
+              }
+            }
           }
         },
         secondPage: {
@@ -30,7 +36,11 @@ const formConfig = {
           uiSchema: {},
           schema: {
             type: 'object',
-            properties: {}
+            properties: {
+              favoriteAnimal: {
+                type: 'string'
+              }
+            }
           }
         }
       }
diff --git a/js/routes.jsx b/js/routes.jsx
index 0787706..d12c5e3 100644
--- a/js/routes.jsx
+++ b/js/routes.jsx
@@ -1,17 +1,71 @@
-import { createRoutes } from 'us-forms-system/lib/js/helpers';
+import React from 'react';
+// import { createRoutes } from 'us-forms-system/lib/js/helpers';
+import FormPage from 'us-forms-system/lib/js/containers/FormPage';
+import ReviewPage from 'us-forms-system/lib/js/review/ReviewPage';
+import { createFormPageList, createPageList } from 'us-forms-system/lib/js/helpers';
 
 import formConfig from './config/form';
 import Form from './components/Form.jsx';
+import PageWithNavigation from './components/PageWithNavigation';
 
-const routes = createRoutes(formConfig);
+// const routes = createRoutes(formConfig);
+
+/*
+ * Create the routes based on a form config. This goes through each chapter in a form
+ * config, pulls out the config for each page, then generates a list of Route components with the
+ * config as props
+ */
+function createRoutes(formConfig) {
+  const formPages = createFormPageList(formConfig);
+  const pageList = createPageList(formConfig, formPages);
+  let routes = formPages
+    .map(page => {
+      return {
+        path: page.path,
+        component: page.component || PageWithNavigation,
+        pageConfig: page,
+        pageList,
+        urlPrefix: formConfig.urlPrefix
+      };
+    });
+  if (formConfig.introduction) {
+    routes = [
+      {
+        path: 'introduction',
+        component: formConfig.introduction,
+        formConfig,
+        pageList
+      }
+    ].concat(routes);
+  }
+
+  return routes.concat([
+    {
+      path: 'review-and-submit',
+      formConfig,
+      component: ReviewPage,
+      pageList
+    },
+    {
+      path: 'confirmation',
+      component: formConfig.confirmation
+    },
+    {
+      path: '*',
+      onEnter: (nextState, replace) => replace(formConfig.urlPrefix || '/')
+    }
+  ]);
+}
+
+const formConfigRoutes = createRoutes(formConfig);
 
 const route = {
   path: '/',
   component: Form,
   indexRoute: {
-    onEnter: (nextState, replace) => replace(formConfig.urlPrefix+routes[0].path)
+    onEnter: (nextState, replace) => replace(formConfig.urlPrefix+formConfigRoutes[0].path)
   },
-  childRoutes: routes,
+  childRoutes: formConfigRoutes,
 };
 
 export default route;
diff --git a/package-lock.json b/package-lock.json
index 00b60aa..941e187 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -803,6 +803,12 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-syntax-class-properties": {
+      "version": "6.13.0",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz",
+      "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=",
+      "dev": true
+    },
     "babel-plugin-syntax-flow": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",
@@ -815,6 +821,18 @@
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
       "dev": true
     },
+    "babel-plugin-transform-class-properties": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz",
+      "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=",
+      "dev": true,
+      "requires": {
+        "babel-helper-function-name": "^6.24.1",
+        "babel-plugin-syntax-class-properties": "^6.8.0",
+        "babel-runtime": "^6.22.0",
+        "babel-template": "^6.24.1"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
@@ -5303,9 +5321,9 @@
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
     "lodash-es": {
-      "version": "4.17.10",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz",
-      "integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg=="
+      "version": "4.17.11",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+      "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -7282,11 +7300,6 @@
       "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
       "dev": true
     },
-    "raven-js": {
-      "version": "3.26.4",
-      "resolved": "https://registry.npmjs.org/raven-js/-/raven-js-3.26.4.tgz",
-      "integrity": "sha512-5VmC3IWhTQJkaiQaCY0S5V8za4bpUgbbuVT1MkDH7JVqgu8CPQ750XaFF8BVRbLV9F5nvoz7n0UT0CKteDuZAg=="
-    },
     "raw-body": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
@@ -8928,9 +8941,8 @@
       }
     },
     "us-forms-system": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/us-forms-system/-/us-forms-system-1.1.0.tgz",
-      "integrity": "sha512-jCoW1ix/2miariaUQVNuNH1wSrcaqYF2t+gTY3WDQhaWgX2vU6vfZSHrbCxB1e6/+PXtnr6ay+Y/xdXIWY4hFw==",
+      "version": "git+https://github.com/usds/us-forms-system.git#6369d4e3337e330716c507e094ece10515dc3e3f",
+      "from": "git+https://github.com/usds/us-forms-system.git#6369d4e3337e330716c507e094ece10515dc3e3f",
       "requires": {
         "@department-of-veterans-affairs/react-jsonschema-form": "^1.0.0",
         "classnames": "^2.2.5",
@@ -8938,7 +8950,6 @@
         "fast-levenshtein": "^2.0.6",
         "history": "3",
         "moment": "^2.15.1",
-        "raven-js": "^3.12.1",
         "react-redux": "4.4.8",
         "react-router": "3",
         "react-scroll": "^1.7.9",
diff --git a/package.json b/package.json
index a4bfab9..e538298 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "devDependencies": {
     "babel-cli": "^6.26.0",
     "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
@@ -35,6 +36,7 @@
   "dependencies": {
     "react": "^15.6.2",
     "react-dom": "^15.6.2",
-    "us-forms-system": "^1.1.0"
+    "react-router": "3",
+    "us-forms-system": "https://github.com/usds/us-forms-system.git#6369d4e3337e330716c507e094ece10515dc3e3f"
   }
 }