diff --git a/packages/react-scripts/scripts/utils/frontierInit.js b/packages/react-scripts/scripts/utils/frontierInit.js
index 99ace1ec395..05a087a33f3 100644
--- a/packages/react-scripts/scripts/utils/frontierInit.js
+++ b/packages/react-scripts/scripts/utils/frontierInit.js
@@ -68,9 +68,10 @@ function installFrontierDependencies(appPath, appName, answers, ownPath) {
     ...[
       '@fs/axios',
       '@fs/user',
+      '@fs/router',
+      '@fs/error-boundary',
       'fs-webdev/exo',
       'http-proxy-middleware@0.19.1',
-      '@reach/router@1.2.1',
       '@emotion/core@10.0.9',
     ]
   );
diff --git a/packages/react-scripts/template/src/components/App.js b/packages/react-scripts/template/src/components/App.js
index d9ffebcc62b..4f56261e155 100644
--- a/packages/react-scripts/template/src/components/App.js
+++ b/packages/react-scripts/template/src/components/App.js
@@ -1,32 +1,22 @@
 import React from 'react'
-import { css } from '@emotion/core'
+import { Router, Link, NotFound, RequiresAuth } from '@fs/router'
+import Home from './home/Home'
+import UserInfo from './user/UserInfo'
 
-import Logo from './Logo'
-import AppHeader from './AppHeader'
-
-const App = () => (
-  <div
-    css={css`
-      text-align: center;
-    `}
-  >
-    <AppHeader>
-      <Logo />
-      <p>
-        Edit <code>src/components/App.js</code> and save to reload.
-      </p>
-      <a
-        css={css`
-          color: #61dafb;
-        `}
-        href="https://www.familysearch.org/frontier/docs/#/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Learn Frontier
-      </a>
-    </AppHeader>
-  </div>
-)
+function App() {
+  return (
+    <>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="user">User Info</Link>
+      </nav>
 
+      <Router>
+        <Home path="/" />
+        <RequiresAuth path="/user" component={UserInfo} />
+        <NotFound default />
+      </Router>
+    </>
+  )
+}
 export default App
diff --git a/packages/react-scripts/template/src/components/home/Home.js b/packages/react-scripts/template/src/components/home/Home.js
new file mode 100644
index 00000000000..959e3146158
--- /dev/null
+++ b/packages/react-scripts/template/src/components/home/Home.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { css } from '@emotion/core'
+
+import Logo from './Logo'
+import HomeHeader from './HomeHeader'
+
+const App = () => (
+  <div
+    css={css`
+      text-align: center;
+    `}
+  >
+    <HomeHeader>
+      <Logo />
+      <p>
+        Edit <code>src/components/App.js</code> and save to reload.
+      </p>
+      <a
+        css={css`
+          color: #61dafb;
+        `}
+        href="https://www.familysearch.org/frontier/docs/#/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Learn Frontier
+      </a>
+    </HomeHeader>
+  </div>
+)
+
+export default App
diff --git a/packages/react-scripts/template/src/components/App.md b/packages/react-scripts/template/src/components/home/Home.md
similarity index 100%
rename from packages/react-scripts/template/src/components/App.md
rename to packages/react-scripts/template/src/components/home/Home.md
diff --git a/packages/react-scripts/template/src/components/App.test.js b/packages/react-scripts/template/src/components/home/Home.test.js
similarity index 100%
rename from packages/react-scripts/template/src/components/App.test.js
rename to packages/react-scripts/template/src/components/home/Home.test.js
diff --git a/packages/react-scripts/template/src/components/AppHeader.js b/packages/react-scripts/template/src/components/home/HomeHeader.js
similarity index 100%
rename from packages/react-scripts/template/src/components/AppHeader.js
rename to packages/react-scripts/template/src/components/home/HomeHeader.js
diff --git a/packages/react-scripts/template/src/components/Logo.js b/packages/react-scripts/template/src/components/home/Logo.js
similarity index 100%
rename from packages/react-scripts/template/src/components/Logo.js
rename to packages/react-scripts/template/src/components/home/Logo.js
diff --git a/packages/react-scripts/template/src/components/Logo.svg b/packages/react-scripts/template/src/components/home/Logo.svg
similarity index 100%
rename from packages/react-scripts/template/src/components/Logo.svg
rename to packages/react-scripts/template/src/components/home/Logo.svg
diff --git a/packages/react-scripts/template/src/components/index.js b/packages/react-scripts/template/src/components/index.js
deleted file mode 100644
index f22feb838eb..00000000000
--- a/packages/react-scripts/template/src/components/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import App from './App'
-
-export default App
diff --git a/packages/react-scripts/template/src/components/user/UserInfo.js b/packages/react-scripts/template/src/components/user/UserInfo.js
new file mode 100644
index 00000000000..2050bb1873c
--- /dev/null
+++ b/packages/react-scripts/template/src/components/user/UserInfo.js
@@ -0,0 +1,7 @@
+import React from 'react'
+import { useUser } from '@fs/user'
+
+export default function UserInfo() {
+  const user = useUser()
+  return <div>Hello, {user.displayName}!</div>
+}
diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.css
deleted file mode 100644
index cee5f348fb9..00000000000
--- a/packages/react-scripts/template/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index 496c429c4cc..8eae1815d28 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/packages/react-scripts/template/src/index.js
@@ -1,21 +1,23 @@
-/* eslint-disable react/jsx-filename-extension */
-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
-import { Router } from '@reach/router'
-import './index.css'
+import { UserProvider } from '@fs/user'
+import RootErrorBoundary from '@fs/error-boundary'
 import App from './components/App'
 import * as serviceWorker from './serviceWorker'
 
-ReactDOM.render(
-  <Router>
-    <App path="/" />
-  </Router>,
-  document.getElementById('root')
+const FrontierRoot = () => (
+  <RootErrorBoundary>
+    <Suspense>
+      <UserProvider>
+        <App />
+      </UserProvider>
+    </Suspense>
+  </RootErrorBoundary>
 )
 
+ReactDOM.render(<FrontierRoot />, document.getElementById('root'))
+
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
 serviceWorker.unregister()
-
-/* eslint-enable react/jsx-filename-extension */