basic layout achieved

src/compforge/src/FormsDisplay.js

+import React from 'react';
+import { Grid } from '@material-ui/core';
+
+const FormsDisplay = ({ formItems }) => {
+    return (
+        <div>
+            {formItems.map(
+                (formItem, i) =>
+                    <Grid
+                        container
+                        direction="column"
+                        justify="space-evenly"
+                        alignItems="stretch"
+                        spacing={3}
+                        item
+                        xs={9}
+                        key={i}>
+                        <FormItem
+                            name={formItem.name}
+                            owner={formItem.owner}
+                            dateModified={formItem.dateModified} />
+                    </Grid>
+            )}
+        </div>
+    )
+}
+
+const FormItem = ({ name, owner, dateModified }) => {
+    return (
+        <Grid
+            container
+            direction="row"
+            spacing={3}>
+            <Grid item xs={3}>
+                <h3>{name}</h3>
+            </Grid>
+            <Grid item xs={3}>
+                <h3>{owner}</h3>
+            </Grid>
+            <Grid item xs={3}>
+                <div outline="2px solid black">
+                    <h3>{dateModified}</h3>
+                </div>
+            </Grid>
+        </Grid>
+    )
+}
+
+export default FormsDisplay
\ No newline at end of file

src/compforge/src/Menu.js

+import React from 'react';
+import { Button, Grid } from '@material-ui/core';
+
+
+class Menu extends React.Component {
+    state = { signedIn: false }
+
+    toggleSignedInOut = () => {
+        this.setState(prevState => ({
+            signedIn: !prevState.signedIn
+        }))
+    }
+
+    render() {
+        const { menuItems } = this.props
+        return (
+            <Grid
+                container
+                direction="column"
+                justify="space-evenly"
+                alignItems="stretch"
+                spacing={3}
+                >
+                {
+                    menuItems.map(
+                        (menuItem, i) =>
+                            <Grid key={i} item xs={3}>
+                                <MenuButton
+                                    key={i}
+                                    id={menuItem.id} />
+                            </Grid>
+                    )
+                }
+            </Grid >
+        )
+    }
+}
+
+const MenuButton = ({ id }) => {
+    return (
+        <section>
+            <Button variant="contained" color="primary">{id}</Button>
+        </section>
+    )
+}
+
+export default Menu
\ No newline at end of file

src/compforge/src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Grid, AppBar, Button } from '@material-ui/core';
+import { Grid, AppBar, Toolbar, Typography, Button, makeStyles } from '@material-ui/core';
+import Menu from './Menu'
+import FormsDisplay from './FormsDisplay'
 
 let menuItems = [
   { "id": "createForm" },
@@ -10,66 +12,58 @@ let menuItems = [
   { "id": "signOut" }
 ]
 
+let formItems = [
+  { "name": "myFirstForm", "owner": "me!", "dateModified": "Today 12:32" },
+  { "name": "mySecondForm", "owner": "me!", "dateModified": "Yesterday 16:04" },
+  { "name": "myThirdForm", "owner": "me!", "dateModified": "Friday 14:46" }
+]
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
 const Page = () => {
+  const classes = useStyles();
   return (
-    <Grid container>
+    <Grid container spacing={3}>
       <Grid item xs={12}>
-        {/* <AppBar /> */}
-        <h1>header</h1>
+        <AppBar position="static">
+          <Toolbar>
+            <Typography variant="h6" className={classes.title}>
+              Compforge
+            </Typography>
+            <Button color="inherit">Login</Button>
+          </Toolbar>
+        </AppBar>
       </Grid>
-      <Grid item xs={3}>
+      <Grid
+        item
+        xs={3}
+      >
         <Menu menuItems={menuItems} />
       </Grid>
-      <Grid item xs={9}>
-        <FormsDisplay />
+      <Grid
+        container
+        item
+        xs={9}
+        direction="column"
+        justify="space-evenly"
+        spacing={3}
+      >
+        <FormsDisplay formItems={formItems} />
       </Grid>
     </Grid>
   )
 }
 
-const FormsDisplay = () => {
-  return (
-    <Grid item xs={3}>
-      <p>[Form name here]</p>
-    </Grid>
-  )
-}
-
-const MenuButton = ({id}) => {
-  return (
-    <section>
-      <Button variant="contained" color="primary">{id}</Button>
-    </section>
-  )
-}
-
-class Menu extends React.Component {
-  state = {signedIn: false}
-
-  toggleSignedInOut = () => {
-    this.setState(prevState => ({
-      signedIn: !prevState.signedIn
-    }))
-  }
-
-  render () {
-    const { menuItems } = this.props
-    return (
-      <div id="menu">
-        <AppBar />
-        <h2>Signed {this.state.signedIn ? 'in' : 'out'}</h2>
-        <Button variant="contained" color="primary" onClick={this.toggleSignedInOut}>Sign in/out</Button>
-        {menuItems.map(
-          (menuItem, i) =>
-            <MenuButton
-              key={i}
-              id={menuItem.id}/>
-        )}
-      </div>
-    )
-  }
-}
-
 ReactDOM.render(
   <Page />,
   document.getElementById('root')