diff --git a/packages/generator-electrode/generators/app/templates/src/client/actions/index.jsx b/packages/generator-electrode/generators/app/templates/src/client/actions/index.jsx
index 0183924e7..11d667efa 100644
--- a/packages/generator-electrode/generators/app/templates/src/client/actions/index.jsx
+++ b/packages/generator-electrode/generators/app/templates/src/client/actions/index.jsx
@@ -15,3 +15,24 @@ export const decNumber = () => {
     type: "DEC_NUMBER"
   };
 };
+
+export const inputName = value => {
+  return {
+    type: "INPUT_NAME",
+    value
+  };
+};
+
+export const inputTextarea = value => {
+  return {
+    type: "INPUT_TEXT_AREA",
+    value
+  };
+};
+
+export const selectOption = value => {
+  return {
+    type: "SELECT_OPTION",
+    value
+  };
+};
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/demo1.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/demo1.jsx
new file mode 100644
index 000000000..9911c43bf
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/components/demo1.jsx
@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { Nav } from "./nav";
+import { inputName, inputTextarea, selectOption } from "../actions";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
+import demoStyle from "../styles/demo1.css"; // eslint-disable-line no-unused-vars
+
+class Demo1 extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      username: { value: "" },
+      textarea: { value: "" },
+      selectedOption: { value: "0-13" }
+    };
+  }
+
+  render() {
+    const { dispatch } = this.props;
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+        <div styleName={"demoStyle.container"}>
+          <h2>Forms Demo</h2>
+          <form>
+            <fieldset>
+              <label htmlFor="nameField">Name</label>
+              <input
+                type="text"
+                placeholder="Electrode User"
+                id="nameField"
+                value={this.props.username}
+                onChange={event => {
+                  dispatch(inputName(event.target.value));
+                }}
+              />
+              <label htmlFor="ageRangeField">Experience with Electrode</label>
+              <select
+                id="ageRangeField"
+                onChange={event => {
+                  dispatch(selectOption(event.target.value));
+                }}
+                value={this.props.selectedOption}
+              >
+                <option value="0-13">0-13 month</option>
+                <option value="14-17">14-17 month</option>
+                <option value="18-23">18-23 month</option>
+                <option value="24+">24+ month</option>
+              </select>
+              <label htmlFor="commentField">Comment</label>
+              <textarea
+                placeholder="Leave feedback for electrode..."
+                id="commentField"
+                value={this.props.textarea}
+                onChange={event => dispatch(inputTextarea(event.target.value))}
+              />
+              <input type="submit" value="Send" />
+            </fieldset>
+          </form>
+        </div>
+      </div>
+    );
+  }
+}
+
+Demo1.propTypes = {
+  username: PropTypes.string,
+  textarea: PropTypes.string,
+  selectedOption: PropTypes.string,
+  dispatch: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => {
+  return {
+    username: state.username.value,
+    textarea: state.textarea.value,
+    selectedOption: state.selectedOption.value
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Demo1);
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/demo2.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/demo2.jsx
new file mode 100644
index 000000000..030455ed4
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/components/demo2.jsx
@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { Nav } from "./nav";
+import { connect } from "react-redux";
+import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
+import demoStyle from "../styles/demo2.css"; // eslint-disable-line no-unused-vars
+
+class Demo2 extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+        <section styleName={"custom.header"}>
+          <h2>Buttons Demo</h2>
+          <div styleName="demoStyle.main">
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-one">Tap Me</button>
+            </div>
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-two">
+                <span>Hover Me</span>
+              </button>
+            </div>
+            <div styleName="demoStyle.sub-main">
+              <button styleName="demoStyle.button-three">Click Me</button>
+            </div>
+          </div>
+        </section>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = () => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Demo2);
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx
index abcf091c0..0560c82d3 100644
--- a/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx
+++ b/packages/generator-electrode/generators/app/templates/src/client/components/home.jsx
@@ -15,42 +15,65 @@
  */
 
 import React from "react";
+import { connect } from "react-redux";
 import "../styles/raleway.css";
 import custom from "../styles/custom.css"; // eslint-disable-line no-unused-vars
 import electrodePng from "../images/electrode.png";
 import DemoStates from "./demo-states";
 import DemoPureStates from "./demo-pure-states";
 import { DemoButtons } from "./demo-buttons";
+import { Nav } from "./nav";
 //<% if (pwa) { %>
 import Notifications from "react-notify-toast";
 //<% } %>
 
-export default () => (
-  <div styleName={"custom.container"}>
-    {/*<% if (pwa) { %>*/}
-    <Notifications />
-    {/*<% } %>*/}
-
-    <section styleName={"custom.header"}>
-      <h2>
-        <span>Hello from </span>
-        <a href="https://github.com/electrode-io">
-          {"Electrode"}
-          <img src={electrodePng} />
-        </a>
-      </h2>
-    </section>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoStates />
-    </div>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoPureStates />
-    </div>
-
-    <div styleName={"custom.docs-section"}>
-      <DemoButtons />
-    </div>
-  </div>
-);
+class Home extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div styleName={"custom.container"}>
+        <Nav {...this.props} />
+
+        {/*<% if (pwa) { %>*/}
+        <Notifications />
+        {/*<% } %>*/}
+
+        <section styleName={"custom.header"}>
+          <h2>
+            <span>Hello from </span>
+            <a href="https://github.com/electrode-io">
+              {"Electrode"}
+              <img src={electrodePng} />
+            </a>
+          </h2>
+        </section>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoStates />
+        </div>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoPureStates />
+        </div>
+
+        <div styleName={"custom.docs-section"}>
+          <DemoButtons />
+        </div>
+      </div>
+    );
+  }
+}
+
+Home.propTypes = {};
+
+const mapStateToProps = () => {
+  return {};
+};
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({ dispatch })
+)(Home);
diff --git a/packages/generator-electrode/generators/app/templates/src/client/components/nav.jsx b/packages/generator-electrode/generators/app/templates/src/client/components/nav.jsx
new file mode 100644
index 000000000..70fac75ef
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/components/nav.jsx
@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import navStyle from "../styles/nav.css"; // eslint-disable-line no-unused-vars
+
+export class Nav extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const currentTab = this.props.location.pathname.replace("/", "");
+    return (
+      <ul>
+        <li styleName={currentTab === "" ? "navStyle.active" : ""}>
+          <Link to="/">Home</Link>
+        </li>
+        <li styleName={currentTab === "demo1" ? "navStyle.active" : ""}>
+          <Link to="/demo1">Demo1</Link>
+        </li>
+        <li styleName={currentTab === "demo2" ? "navStyle.active" : ""}>
+          <Link to="/demo2">Demo2</Link>
+        </li>
+      </ul>
+    );
+  }
+}
+
+Nav.propTypes = {
+  location: PropTypes.shape({
+    pathname: PropTypes.string
+  })
+};
+
+Nav.defaultProps = {
+  location: {
+    pathname: ""
+  }
+};
diff --git a/packages/generator-electrode/generators/app/templates/src/client/reducers/index.jsx b/packages/generator-electrode/generators/app/templates/src/client/reducers/index.jsx
index 436d943e7..0dc3d95de 100644
--- a/packages/generator-electrode/generators/app/templates/src/client/reducers/index.jsx
+++ b/packages/generator-electrode/generators/app/templates/src/client/reducers/index.jsx
@@ -24,7 +24,39 @@ const number = (store, action) => {
   return store || { value: 0 };
 };
 
+const username = (store, action) => {
+  if (action.type === "INPUT_NAME") {
+    return {
+      value: action.value
+    };
+  }
+
+  return store || { value: "" };
+};
+
+const textarea = (store, action) => {
+  if (action.type === "INPUT_TEXT_AREA") {
+    return {
+      value: action.value
+    };
+  }
+
+  return store || { value: "" };
+};
+
+const selectedOption = (store, action) => {
+  if (action.type === "SELECT_OPTION") {
+    return {
+      value: action.value
+    };
+  }
+  return store || { value: "0-13" };
+};
+
 export default combineReducers({
   checkBox,
-  number
+  number,
+  username,
+  textarea,
+  selectedOption
 });
diff --git a/packages/generator-electrode/generators/app/templates/src/client/routes.jsx b/packages/generator-electrode/generators/app/templates/src/client/routes.jsx
index 8e41531de..9c6d44f34 100644
--- a/packages/generator-electrode/generators/app/templates/src/client/routes.jsx
+++ b/packages/generator-electrode/generators/app/templates/src/client/routes.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Home from "./components/home";
+import Demo1 from "./components/demo1";
+import Demo2 from "./components/demo2";
 import { withRouter } from "react-router-dom";
 import { renderRoutes } from "react-router-config";
 
@@ -26,7 +28,18 @@ const routes = [
     routes: [
       {
         path: "/",
+        exact: true,
         component: Home
+      },
+      {
+        path: "/demo1",
+        exact: true,
+        component: Demo1
+      },
+      {
+        path: "/demo2",
+        exact: true,
+        component: Demo2
       }
     ]
   }
diff --git a/packages/generator-electrode/generators/app/templates/src/client/styles/demo1.css b/packages/generator-electrode/generators/app/templates/src/client/styles/demo1.css
new file mode 100644
index 000000000..224fdcd6a
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/styles/demo1.css
@@ -0,0 +1,25 @@
+.container {
+  background: linear-gradient(to bottom left, rgba(255, 99, 71, 0.7), rgba(0, 0, 255, 0.6));
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: calc(50% - 245px);
+  max-width: 490px;
+  padding: 20px;
+  position: absolute;
+  top: 100px;
+  transition: all 0.5s;
+  width: 490px;
+  color: white;
+}
+
+.container input,
+.container textarea,
+.container input::placeholder,
+.container textarea::placeholder,
+.container select {
+  color: white;
+}
diff --git a/packages/generator-electrode/generators/app/templates/src/client/styles/demo2.css b/packages/generator-electrode/generators/app/templates/src/client/styles/demo2.css
new file mode 100644
index 000000000..64278ca14
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/styles/demo2.css
@@ -0,0 +1,136 @@
+.main button {
+  color: #fff;
+  text-align: center;
+  padding: 20px;
+}
+
+.main p {
+  color: #fff;
+  text-align: center;
+  padding-top: 500px;
+  font-size: 10px;
+}
+
+.main a {
+  text-decoration: none;
+  color: #fff;
+}
+
+.main a:hover {
+  color: #2ecc71;
+}
+
+.main {
+  width: 100%;
+}
+
+.main .sub-main {
+  width: 30%;
+  margin: 22px;
+  float: left;
+}
+
+.main .button-one,
+.main .button-two,
+.main .button-three {
+  text-align: center;
+  cursor: pointer;
+  font-size: 24px;
+  margin: 0 0 0 100px;
+  height: 100px;
+}
+
+/*Button One*/
+.main .button-one {
+  padding: 20px 60px;
+  outline: none;
+  background-color: #27ae60;
+  border: none;
+  border-radius: 5px;
+  box-shadow: 0 9px #95a5a6;
+}
+
+.main .button-one:hover {
+  background-color: #2ecc71;
+}
+
+.main .button-one:active {
+  background-color: #2ecc71;
+  box-shadow: 0 5px #95a5a6;
+  transform: translateY(4px);
+}
+
+/*Button Two*/
+.main .button-two {
+  border-radius: 4px;
+  background-color: #d35400;
+  border: none;
+  padding: 20px;
+  width: 200px;
+  transition: all 0.5s;
+}
+
+.main .button-two span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+.main .button-two span:after {
+  content: "»";
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+.main .button-two:hover span {
+  padding-right: 25px;
+}
+
+.main .button-two:hover span:after {
+  opacity: 1;
+  right: 0;
+}
+
+/*Button Three*/
+.main .button-three {
+  position: relative;
+  background-color: #f39c12;
+  border: none;
+  padding: 20px;
+  width: 200px;
+  text-align: center;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.main .button-three:hover {
+  background: #fff;
+  box-shadow: 0px 2px 10px 5px #97b1bf;
+  color: #000;
+}
+
+.main .button-three:after {
+  content: "";
+  background: #f1c40f;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s;
+}
+
+.main .button-three:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s;
+}
diff --git a/packages/generator-electrode/generators/app/templates/src/client/styles/nav.css b/packages/generator-electrode/generators/app/templates/src/client/styles/nav.css
new file mode 100644
index 000000000..44894ddc7
--- /dev/null
+++ b/packages/generator-electrode/generators/app/templates/src/client/styles/nav.css
@@ -0,0 +1,29 @@
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #9b4dca;
+  border: 1px solid #9b4dca;
+  border-radius: 5px;
+}
+
+li {
+  float: left;
+  margin-bottom: 0;
+  padding: 5px 20px;
+}
+
+li a,
+li a:hover {
+  color: white;
+}
+
+li.active {
+  background-color: white;
+}
+
+li.active a,
+li.active a:hover {
+  color: #9b4dca;
+}
diff --git a/packages/generator-electrode/generators/app/templates/src/server/routes/init-top.jsx b/packages/generator-electrode/generators/app/templates/src/server/routes/init-top.jsx
index 5f615a5c2..c8f70bfe4 100644
--- a/packages/generator-electrode/generators/app/templates/src/server/routes/init-top.jsx
+++ b/packages/generator-electrode/generators/app/templates/src/server/routes/init-top.jsx
@@ -5,7 +5,10 @@ export default function initTop() {
     reducer,
     initialState: {
       checkBox: { checked: false },
-      number: { value: 999 }
+      number: { value: 999 },
+      username: { value: "" },
+      textarea: { value: "" },
+      selectedOption: { value: "0-13" }
     }
   };
 }
diff --git a/packages/generator-electrode/generators/app/templates/test/client/components/home.spec.jsx b/packages/generator-electrode/generators/app/templates/test/client/components/home.spec.jsx
index 61c8102f1..60ea9f8e3 100644
--- a/packages/generator-electrode/generators/app/templates/test/client/components/home.spec.jsx
+++ b/packages/generator-electrode/generators/app/templates/test/client/components/home.spec.jsx
@@ -4,6 +4,7 @@ import Home from "client/components/home";
 import { createStore } from "redux";
 import { Provider } from "react-redux";
 import rootReducer from "client/reducers";
+import { BrowserRouter } from "react-router-dom";
 
 describe("Home", () => {
   let component;
@@ -25,7 +26,14 @@ describe("Home", () => {
 
     const store = createStore(rootReducer, initialState);
 
-    component = ReactDOM.render(<Provider store={store}><Home /></Provider>, container);
+    component = ReactDOM.render(
+      <Provider store={store}>
+        <BrowserRouter>
+          <Home />
+        </BrowserRouter>
+      </Provider>,
+      container
+    );
 
     expect(component).to.not.be.false;
   });