Started work on AppBar.

src/components/AppBar.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles} from 'material-ui/styles';
+import {withStyles, withTheme} from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
-import { compose } from 'redux';
-import { withTheme } from 'material-ui/styles';
-import classNames from 'classnames';
-
-function customAppBar({ classes, handleMenuClick, isOpen}) {
-  return (
-    <div  >
-        <AppBar  position="absolute" >
-            <Toolbar>
-                {/* <IconButton onClick={handleMenuClick} color="contrast" aria-label="Menu">
-                    <MenuIcon />
-                </IconButton> */}
-                <Typography type="title" color="inherit" className={classes.title}>
-                    Title
-                </Typography>
-                {/* <Button color="contrast">Login</Button> */}
-        </Toolbar>
-      </AppBar>
-    </div>
-  );
+import {compose} from 'redux';
+import Drawer from 'material-ui/Drawer';
+import List, {ListItem} from 'material-ui/List';
+
+class customAppBar extends React.Component {
+
+    constructor(props) {
+        super();
+        this.state = {
+            isDrawerOpen: false
+        };
+
+        this.toggleDrawer = this.toggleDrawer.bind(this);
+    }
+
+    toggleDrawer() {
+        this.setState({
+            isDrawerOpen: !this.state.isDrawerOpen
+        })
+    };
+
+    render() {
+        return (<div>
+            <AppBar position="absolute">
+                <Toolbar>
+                    <Typography type="title" color="inherit" className={this.props.classes.title}>
+                        What's Open
+                    </Typography>
+                    <Button key={'about'} className={this.props.classes.appBarLinkButton}>
+                        About
+                    </Button>
+                    <Button key={'feedback'} className={this.props.classes.appBarLinkButton}>
+                        Feedback
+                    </Button>
+                    <IconButton onClick={this.toggleDrawer} color="contrast" aria-label="Menu"
+                                className={this.props.classes.appBarMenuButton}>
+                        <MenuIcon/>
+                    </IconButton>
+                </Toolbar>
+            </AppBar>
+            {<Drawer anchor="left" open={this.state.isDrawerOpen} onRequestClose={this.toggleDrawer}>
+                <List>
+                    <ListItem>
+                        <Button key={'about'}>
+                            About
+                        </Button>
+                    </ListItem>
+                    <ListItem>
+                        <Button key={'feedback'}>
+                            Feedback
+                        </Button>
+                    </ListItem>
+                </List>
+            </Drawer>}
+        </div>);
+    };
 }
 
 customAppBar.propTypes = {
-  classes: PropTypes.object.isRequired,
-  handleMenuClick: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    handleMenuClick: PropTypes.func.isRequired,
 };
 
-const styleSheet =  {
-  title: {
-    marginRight: 'auto',
-  },
-  drawerOpen: {
-        paddingLeft: 400,
-        transition: 'padding 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms',
-        height: '100%'
+const styleSheet = {
+    '@media screen and (max-width: 600px)': {
+        appBarLinkButton: {
+            display: 'none',
+        },
+        appBarMenuButton: {
+            display: 'inherit !important'
+        }
+    },
+    '@media screen and (min-width: 601px)': {
+        appBarLinkButton: {
+            color: 'rgba(255,255,255,1)'
+        }
     },
-    drawerClosed: {
-        paddingLeft: 0,
-        transition: 'padding 255ms cubic-bezier(0, 0, 0.2, 1) 0ms',
-        height: '100%'
+    title: {
+        marginRight: 'auto',
     },
+    appBarMenuButton: {
+        display: 'none'
+    }
 };
 
-export default compose(withStyles(styleSheet),withTheme)(customAppBar);
+export default compose(withStyles(styleSheet), withTheme)(customAppBar);

src/containers/FacilityCard.js

@@ -135,7 +135,7 @@ const FacilityCard = ({classes, facility, favorites, addFavoriteFacility, remove
             <CardContent className={classes.cardContent}>
                 <Grid container align={'center'} direction={'column'} className={classes.smallGridContainerSpacing}>
                     <Grid item className={classes.smallGridItemSpacing}>
-                        <Typography type={'title'} align={'center'} className={twoLineEllipsis}>
+                        <Typography type={'title'} align={'center'} className={classnames(classes.title, twoLineEllipsis)}>
                             {removeBrackets(facility.facility_name)}
                         </Typography>
                     </Grid>
@@ -198,6 +198,9 @@ const styleSheet = {
         borderRadius: '90px',
         boxShadow: '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
     },
+    title: {
+        fontWeight: 'bold'
+    },
     extraInfoWrapper: {
         display: 'flex',
         alignItems: 'center',

src/theme.js

@@ -216,7 +216,7 @@ const theme = createMuiTheme({
         },
         "title": {
             "fontSize": 21,
-            "fontWeight": 'bold',
+            "fontWeight": 500,
             "fontFamily": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif",
             "lineHeight": 1,
             "color": "rgba(0, 0, 0, 0.87)"