diff --git a/src/components/FormInput.jsx b/src/components/FormInput.jsx
new file mode 100644
index 0000000..a84853f
--- /dev/null
+++ b/src/components/FormInput.jsx
@@ -0,0 +1,205 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+import MenuItem from 'material-ui/Menu/MenuItem'
+import TextField from 'material-ui/TextField'
+import Button from 'material-ui/Button'
+
+const styles = theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  textField: {
+    marginLeft: theme.spacing.unit,
+    marginRight: theme.spacing.unit,
+    width: 200,
+  },
+  menu: {
+    width: 200,
+  },
+});
+
+class Form extends React.Component {
+
+state= { // set initial state to empty strings
+    firstName: '',
+    lastName: '',
+    userName: '',
+    email: '',
+    passWord: '',
+  }
+
+  handleChange = e => {
+    this.props.onChange({ [e.target.name]: e.target.value })
+    this.setState({
+      [e.target.name]: e.target.value // change values for input fields and send them to component state
+    })
+  };
+
+  onSubmit = e => {
+      e.preventDefault() // prevent reloading on submit
+      // this.props.onSubmit(this.state) only needed for onSubmit => changed to onChange
+      this.setState({ // empty state after submit to clear fields
+        firstName: '',
+        lastName: '',
+        userName: '',
+        email: '',
+        passWord: '',
+      })
+  }
+
+  render() {
+    const { classes } = this.props
+
+    return (
+      <div>
+          <form className="container">
+            <TextField
+              name='firstName'
+              type='text'
+              value={this.state.firstName}
+              placeholder='First Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='lastName'
+              type='text'
+              value={this.state.lastName}
+              placeholder='Last Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='userName'
+              type='text'
+              required
+              value={this.state.userName}
+              placeholder='User Name'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='email'
+              type='email'
+              required
+              value={this.state.email}
+              placeholder='Email Address'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/>
+            <TextField
+              name='passWord'
+              type='password'
+              min='8'
+              value={this.state.passWord}
+              placeholder='Password (min 8 Characters)'
+              fullWidth
+              margin='normal'
+              onChange={e => this.handleChange(e)}/><br/><br/>
+            <Button raised color="primary" className={classes.button} onClick={ (e) => this.onSubmit(e)}>Submit with preventDefault</Button>
+          </form>
+        </div>
+      );
+    }
+}
+
+export default withStyles(styles)(Form);
+
+// ==================================================
+// This is the onSubmit version for the form (see additional changes inside secondnest.jsx)
+// export default class Form extends React.Component {
+//   state= {
+//     firstName: '',
+//     lastName: '',
+//     userName: '',
+//     email: '',
+//     passWord: '',
+//   }
+//
+//   change = e => {
+//     this.setState({
+//       [e.target.name]: e.target.value
+//     })
+//   };
+//
+//   onSubmit = e => {
+//       e.preventDefault()
+//       this.props.onSubmit(this.state)
+//       this.setState({
+//         firstName: '',
+//         lastName: '',
+//         userName: '',
+//         email: '',
+//         passWord: '',
+//       })
+//   }
+//
+//   render() {
+//     return (
+//         <form>
+//           <input
+//             name='firstName'
+//             value={this.state.firstName}
+//             placeholder='First Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='lastName'
+//             value={this.state.lastName}
+//             placeholder='Last Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='userName'
+//             value={this.state.userName}
+//             placeholder='User Name'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='email'
+//             value={this.state.email}
+//             placeholder='Email Address'
+//             onChange={e => this.change(e)}/><br/>
+//           <input
+//             name='passWord'
+//             type='password'
+//             value={this.state.passWord}
+//             placeholder='Password'
+//             onChange={e => this.change(e)}/><br/>
+//           <button onClick={ (e) => this.onSubmit(e)}>Submit with preventDefault</button>
+//         </form>
+//       );
+//     }
+// }
+
+
+// ###############################################################
+
+// change function added to cleanUp the code, see below
+//
+// render() {
+//   return (
+//       <form>
+//         <input
+//           value={this.state.firstName}
+//           placeholder='First Name'
+//           onChange={e => this.setState({firstName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.lastName}
+//           placeholder='Last Name'
+//           onChange={e => this.setState({lastName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.userName}
+//           placeholder='User Name'
+//           onChange={e => this.setState({userName: e.target.value})}/><br/>
+//         <input
+//           value={this.state.email}
+//           placeholder='Email Address'
+//           onChange={e => this.setState({email: e.target.value})}/><br/>
+//         <input
+//           value={this.state.passWord}
+//           placeholder='Password'
+//           onChange={e => this.setState({passWord: e.target.value})}/><br/>
+//       </form>
+//     );
+//   }
+// }
diff --git a/src/components/IndexButtons.jsx b/src/components/IndexButtons.jsx
new file mode 100644
index 0000000..d11cc37
--- /dev/null
+++ b/src/components/IndexButtons.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-link'
+
+import { withStyles } from 'material-ui/styles';
+import Button from 'material-ui/Button';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit
+  }
+});
+
+function IndexButtons(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <Link to="/search/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          ElasticSearch
+        </Button>
+      </Link>
+      <Link to="/page-1/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          Sorted Table
+        </Button>
+      </Link>
+      <Link to="/page-2/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          GraphQL Table
+        </Button>
+      </Link>
+      <Link to="/nestedroutes/" style={{ textDecoration: 'none' }}>
+        <Button raised color="primary" className={classes.button}>
+          Forms &amp; Photogrids
+        </Button>
+      </Link>
+    </div>
+  );
+}
+
+IndexButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IndexButtons);
diff --git a/src/components/ResponsiveDrawer.jsx b/src/components/ResponsiveDrawer.jsx
index ad2146e..3cca9fb 100644
--- a/src/components/ResponsiveDrawer.jsx
+++ b/src/components/ResponsiveDrawer.jsx
@@ -22,7 +22,7 @@ import { mailFolderListItems, otherMailFolderListItems } from '../data/tileData'
 import NestedList from '../data/tileDataClass'
 import Logo from '../static/instar_250x65.png'
 
-const drawerWidth = 240;
+const drawerWidth = 250;
 
 const styles = theme => ({
   root: {
@@ -53,16 +53,7 @@ const styles = theme => ({
     [theme.breakpoints.up('md')]: {
       width: drawerWidth,
       position: 'relative',
-      height: '100%',
-    },
-    shadowContainer: {
-      shadowColor: '#000000',
-      shadowOffset: {
-        width: 0,
-        height: 3
-      },
-      shadowRadius: 5,
-      shadowOpacity: 1.0
+      bottom: 0,
     }
   },
   input: {
@@ -84,38 +75,33 @@ class ResponsiveDrawer extends React.Component {
 
     const drawer = (
       <div>
-        <Link to="/"><img src={Logo} alt="INSTAR Deutschland GmbH" className="shadowContainer" /></Link>
+        <Link to="/"><img src={Logo} alt="INSTAR Deutschland GmbH" /></Link>
         <List>{mailFolderListItems}</List>
         <Divider />
         <List>{otherMailFolderListItems}</List>
       </div>
     );
-    // http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/
+
     return (
       <div>
-        <AppBar className={classes.appBar}>
+        <AppBar className={classes.appBar} color="default">
           <Toolbar>
             <IconButton
-              color="contrast"
+              color="inherit"
               aria-label="open drawer"
               onClick={this.handleDrawerToggle}
               className={classes.navIconHide}
             >
               <MenuIcon />
             </IconButton>
-            <Typography type="title" color="inherit" className={classes.flex} noWrap>
+            <Typography type="title" className={classes.flex} noWrap>
               INSTAR Wiki
             </Typography>
-            <Input
-              placeholder="Search Input"
-              className={classes.input}
-              inputProps={{
-                'aria-label': 'Description',
-              }}
-            />
-            <IconButton className={classes.button} aria-label="Delete">
-              <SearchIcon />
-            </IconButton>
+            <Link to="/search">
+              <IconButton className={classes.button} aria-label="Delete">
+                <SearchIcon />
+              </IconButton>
+            </Link>
           </Toolbar>
         </AppBar>
         <Hidden mdUp>
diff --git a/src/components/SearchInput.jsx b/src/components/SearchInput.jsx
new file mode 100644
index 0000000..7a5a80f
--- /dev/null
+++ b/src/components/SearchInput.jsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
+export default class Form extends React.Component {
+  state= {
+    firstName: '',
+    lastName: '',
+    userName: '',
+    email: '',
+    passWord: '',
+  }
+
+  change = e => {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  };
+
+  onSubmit = e => {
+      e.preventDefault()
+      this.props.onSubmit(this.state)
+      this.setState({
+        firstName: '',
+        lastName: '',
+        userName: '',
+        email: '',
+        passWord: '',
+      })
+  }
+
+render() {
+  return (
+      <form>
+        <input
+          value={this.state.firstName}
+          placeholder='First Name'
+          onChange={e => this.setState({firstName: e.target.value})}/><br/>
+        <input
+          value={this.state.lastName}
+          placeholder='Last Name'
+          onChange={e => this.setState({lastName: e.target.value})}/><br/>
+        <input
+          value={this.state.userName}
+          placeholder='User Name'
+          onChange={e => this.setState({userName: e.target.value})}/><br/>
+        <input
+          value={this.state.email}
+          placeholder='Email Address'
+          onChange={e => this.setState({email: e.target.value})}/><br/>
+        <input
+          value={this.state.passWord}
+          placeholder='Password'
+          onChange={e => this.setState({passWord: e.target.value})}/><br/>
+      </form>
+    );
+  }
+}
diff --git a/src/pages/counter.jsx b/src/components/counter.jsx
similarity index 100%
rename from src/pages/counter.jsx
rename to src/components/counter.jsx
diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx
index b402578..9b84c86 100644
--- a/src/layouts/index.jsx
+++ b/src/layouts/index.jsx
@@ -18,11 +18,11 @@ const styles = theme => ({
   appFrame: {
     display: 'flex',
     width: '100%',
-    height: '100%',
   },
   content: {
     backgroundColor: theme.palette.background.default,
     width: '100%',
+    height: '100%',
     padding: theme.spacing.unit * 3,
     height: 'calc(100% - 56px)',
     marginTop: 56,
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d5b6333..4f3440d 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,20 +1,17 @@
 import React from 'react'
 import Link from 'gatsby-link'
 
-import Counter from './counter'
+import IndexButtons from './../components/IndexButtons'
+import Counter from './../components/Counter'
 
-const IndexPage = ({data}) => (
+const IndexPage = ({data},) => (
   <div>
     <h1>{data.site.siteMetadata.description}</h1>
     <p>Welcome to our new Gatsby site.</p>
     <p>Is this the right framework to rebuild our Wiki on? I don't know yet...</p>
-    <Link to="/search/"><button>Go to ElasticSearch</button></Link><br/><br/>
-    <Link to="/page-1/"><button>Go to Enhanced Table</button></Link><br/><br/>
-    <Link to="/page-2/"><button>Go to GraphQL Table</button></Link><br/><br/>
-    <Link to="/nestedroutes/"><button>Go to Nested Routes</button></Link><br/><br/>
+    <IndexButtons />
     <br/><br/><br/><br/>
-    <Counter header="This <Counter /> is embedded inside <IndexPage />" color="rebeccapurple" /><br/><br/><br/><br/>
-    <Link to="/counter/"><button>See Counter Component itself</button></Link>
+    <Counter header="This <Counter /> is embedded inside <IndexPage />" color="rebeccapurple" />
   </div>
 )
 
diff --git a/src/pages/nestedroutes/firstnest.jsx b/src/pages/nestedroutes/firstnest.jsx
index e1b8fd4..c8f359b 100644
--- a/src/pages/nestedroutes/firstnest.jsx
+++ b/src/pages/nestedroutes/firstnest.jsx
@@ -1,12 +1,16 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
+
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
 import GridList from '../../components/GridList'
 
 const firstnest = () => (
   <div>
     <GridList /><br/><br/>
-    <Link to="/nestedroutes/"><button>Go Back</button></Link>
+    <Link to="/nestedroutes/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back</Button></Link>
   </div>
 )
 
diff --git a/src/pages/nestedroutes/index.jsx b/src/pages/nestedroutes/index.jsx
index dc26a7a..8f474ae 100644
--- a/src/pages/nestedroutes/index.jsx
+++ b/src/pages/nestedroutes/index.jsx
@@ -1,14 +1,19 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
+
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
 import FixedTabs from '../../components/FixedTabs'
 import ScrollableTabs from '../../components/ScrollableTabs'
 
 const nestedroutes = ({data}) => (
   <div>
-    <Link to="/nestedroutes/firstnest/"><button>Go to Photo Grid</button></Link><br/><br/>
-    <Link to="/nestedroutes/secondnest/"><button>Go to Autocomplete</button></Link><br/><br/>
-    <Link to="/"><button>Go to Back Home</button></Link><br/><br/>
+    <Link to="/nestedroutes/firstnest/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go to Photo Grid</Button></Link><br/><br/>
+    <Link to="/nestedroutes/secondnest/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go to Forms &amp; Inputs</Button></Link><br/><br/>
+    <Link to="/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back to the homepage</Button></Link><br/><br/><br/><br/>
+    <h2>Tabbed Navigation Elements</h2>
     <FixedTabs />
     <ScrollableTabs />
   </div>
diff --git a/src/pages/nestedroutes/secondnest.jsx b/src/pages/nestedroutes/secondnest.jsx
index 27f5d9d..96b568a 100644
--- a/src/pages/nestedroutes/secondnest.jsx
+++ b/src/pages/nestedroutes/secondnest.jsx
@@ -1,13 +1,73 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
+
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
 import Autocomplete from '../../components/Autocomplete'
+import FormInput from '../../components/FormInput'
+
+
+class secondnest extends React.Component {
+
+  state = {
+    fields: {} // initialize state to receive inputs
+  }
 
-const secondnest = () => (
-  <div>
-    <Autocomplete /><br/><br/>
-    <Link to="/nestedroutes/"><button>Go Back</button></Link>
-  </div>
-)
+  onChange = updatedValue => {
+    this.setState({
+      fields: {
+        ...this.state.fields, //keep values that are typed
+        ...updatedValue //add new values while typing
+      }
+    })
+  }
+
+  render () {
+    return (
+    <div>
+      <h2>Autocomplete Input</h2>
+      <p>This input field uses <Link href="http://react-autosuggest.js.org">react-autosuggest</Link> to complete your input compared to a hard-coded list of countries starting with the letter A.</p>
+      <Autocomplete />
+
+      <h2>Address Form</h2>
+      <p>This form adds input to component state. Submit clears the input fields, but keeps values in state - the default browser reload is prevented</p>
+      <FormInput onChange={fields => this.onChange(fields)} />
+      <p>
+        {JSON.stringify(this.state.fields, null, 2)}
+      </p><br/><br/>
+
+      <Link to="/nestedroutes/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back</Button></Link>
+    </div>
+    )
+  }
+}
 
 export default secondnest
+
+// onSubmit Version (above Form renders onChange) => see additional changes in FormInput.JSX
+//
+// class secondnest extends React.Component {
+//
+//   state = {
+//     fields: {}
+//   }
+//
+//   onSubmit = fields => {
+//     this.setState({fields})
+//   }
+//
+//   render () {
+//     return (
+//     <div>
+//       <FormInput onSubmit={fields => this.onSubmit(fields)} />
+//       <p>
+//         {JSON.stringify(this.state.fields, null, 2)}
+//       </p><br/><br/>
+//       <Autocomplete /><br/><br/>
+//       <Link to="/nestedroutes/"><button>Go Back</button></Link>
+//     </div>
+//     )
+//   }
+// }
diff --git a/src/pages/page-1.jsx b/src/pages/page-1.jsx
index abf4189..d1890a7 100644
--- a/src/pages/page-1.jsx
+++ b/src/pages/page-1.jsx
@@ -1,12 +1,15 @@
 import React from 'react'
 import Link from 'gatsby-link'
 import Img from 'gatsby-image'
+
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
 import EnhancedTable from '../components/EnhancedTable'
 
 const FirstPage = ({data}) => (
   <div>
     <EnhancedTable /><br/><br/>
-    <Link to="/"><button>Go Back</button></Link>
+    <Link to="/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back to the homepage</Button></Link>
   </div>
 )
 
diff --git a/src/pages/page-2.jsx b/src/pages/page-2.jsx
index 8759a23..bced12a 100644
--- a/src/pages/page-2.jsx
+++ b/src/pages/page-2.jsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import Img from "gatsby-image"
+import Img from 'gatsby-image'
+
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
 
 const SecondPage = ({data}) => (
   <div>
@@ -36,7 +39,7 @@ const SecondPage = ({data}) => (
       </tbody>
     </table>
     <br/><br/>
-    <Link to="/"><button>Go back to the homepage</button></Link>
+    <Link to="/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back to the homepage</Button></Link>
   </div>
 )
 
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index 6c2bd21..a310379 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import Link from 'gatsby-link'
 import elasticsearch from 'elasticsearch';
 
+import { withStyles } from 'material-ui/styles'
+import Button from 'material-ui/Button'
+
 const connectionString = 'localhost:9200';
 const _index = 'wiki2_de_2017_09_09';
 const _type = 'article';
@@ -71,8 +74,7 @@ const SearchResults = ({results}) => (
         )}
       </tbody>
     </table>
-    <br/><br/>
-    <Link to="/"><button>Go back to the homepage</button></Link>
+    <br/><br/><Link to="/" style={{ textDecoration: 'none' }}><Button raised color="primary">Go back to the homepage</Button></Link>
   </div>
 )