diff --git a/src/components/Layout/Layout.js b/src/components/Layout/Layout.js
index e8498d6..aa96755 100644
--- a/src/components/Layout/Layout.js
+++ b/src/components/Layout/Layout.js
@@ -3,10 +3,12 @@ import React from 'react';
 import Aux from '../../hoc/Auxiliary';
 import classes from './Layout.css';
 import Toolbar from '../Navigation/Toolbar/Toolbar';
+import SideDrawer from '../Navigation/SideDrawer/SideDrawer';
 
 const layout = (props) => (
     <Aux>
         <Toolbar />
+        <SideDrawer />
         <main className={classes.Content}>
             {props.children}
         </main>
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.css b/src/components/Navigation/SideDrawer/SideDrawer.css
new file mode 100644
index 0000000..daa2924
--- /dev/null
+++ b/src/components/Navigation/SideDrawer/SideDrawer.css
@@ -0,0 +1,27 @@
+.SideDrawer {
+    position: fixed;
+    width: 280px;
+    max-width: 70%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 200;
+    background-color: white;
+    padding: 32px 16px;
+    box-sizing: border-box;
+    transition: transform 0.3s ease-out;
+}
+
+@media (min-width: 500px) {
+    .SideDrawer {
+        display: none;
+    }
+}
+
+.Open {
+    transform: translateX(0);
+}
+
+.Close {
+    transform: translateX(-100%);
+}
\ No newline at end of file
diff --git a/src/components/Navigation/SideDrawer/SideDrawer.js b/src/components/Navigation/SideDrawer/SideDrawer.js
new file mode 100644
index 0000000..d07ecf4
--- /dev/null
+++ b/src/components/Navigation/SideDrawer/SideDrawer.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import classes from './SideDrawer.css'; 
+import Logo from '../../Logo/Logo';
+import NavigationItems from '../NavigationItems/NavigationItems';
+
+const sideDrawer = () => {
+    return (
+        <div className={classes.SideDrawer}>
+            <Logo />
+            <nav>
+                <NavigationItems />
+            </nav>
+        </div>
+    )
+}
+
+
+export default sideDrawer;
\ No newline at end of file