diff --git a/components/Page.js b/components/Page.js
index 749fad2..7b0a409 100644
--- a/components/Page.js
+++ b/components/Page.js
@@ -23,13 +23,17 @@ class Page extends Component {
     });
   }
 
+  drawerCloseClickHandler = () => {
+    this.setState({sideDrawerOpen: false});
+  }
+
   render() {
     return(
       <ThemeProvider theme={Theme}>
         <StyledPage>
           <GlobalStyle />
           <Meta/>
-          <SideDrawer show={this.state.sideDrawerOpen}/>
+          <SideDrawer show={this.state.sideDrawerOpen} hide={this.drawerCloseClickHandler}/>
           <a href="#main__content" className="main__content--link">Skip to main content</a>
           <Header drawerClickHandler={this.drawerToggleClickHandler}/>
           <main id="main__content" role="main">
diff --git a/components/SideDrawer/index.js b/components/SideDrawer/index.js
index 70732c7..7b756b7 100644
--- a/components/SideDrawer/index.js
+++ b/components/SideDrawer/index.js
@@ -7,7 +7,7 @@ const SideDrawer = props => {
         drawerClasses = ['open'];
     }
     return (
-        <SideDrawerStyles className={drawerClasses}>
+        <SideDrawerStyles className={drawerClasses} onClick={props.hide}>
             <ul className="sideDrawer__nav">
                 <li>
                     <Link href="/"><a title="Jay's home page">Home Page</a></Link>
diff --git a/components/SideDrawer/styles.js b/components/SideDrawer/styles.js
index adc1ed5..0792dbb 100644
--- a/components/SideDrawer/styles.js
+++ b/components/SideDrawer/styles.js
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 const SideDrawerStyles = styled.nav`
     transform: translateX(-100%);
-    transition: transform 0.2 ease-in-out;
+    transition: transform 0.2s ease-in-out;
     &.open {
         transform: translateX(0);
     }