diff --git a/package.json b/package.json
index 7f77b3be7..cba1743b9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,10 @@
   },
   "homepage": "https://github.com/Foxandxss/angular-webpack-workflow",
   "dependencies": {
-    "angular": "^1.5.0"
+    "angular": "^1.5.0",
+    "angular-animate": "^1.6.1",
+    "angular-aria": "^1.6.1",
+    "angular-material": "^1.1.1"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.0",
diff --git a/src/app/app.html b/src/app/app.html
index 29501db8c..c076c8c97 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,9 +1,19 @@
-<main>
-  <h1 class="title">Hello from Angular !</h1>
+<main layout="column" ng-cloak ng-controller="AppCtrl as ctrl">
+  <md-toolbar layout="row">
+    <md-button ng-click="ctrl.toggleSidenav('left')" hide-gt-sm class="menuBtn">
+      <span class="visually-hidden">Menu</span>
+    </md-button>
+    <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
+  </md-toolbar>
 
-  <!-- Images (and assets) are parsed and loaded from within the public directory -->
-  <img src="http://github.com/img/logo.png">
+  <div layout="row" flex>
+    <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
+      
+    </md-sidenav>
+    <div layout="column" flex id="content">
+      <md-content layout="column" flex class="md-padding">
+
+      </md-content>
+    </div>
+  </div>
 </main>
-<footer>
-  <a ng-href="http://github.com/%7B%7Bapp.url%7D%7D">Webpack Angular Starter</a>
-</footer>
\ No newline at end of file
diff --git a/src/app/app.js b/src/app/app.js
index d5e26c84a..c16026ceb 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -1,5 +1,7 @@
 import angular from 'angular';
+import angularMaterial from 'angular-material';
 
+import 'angular-material/angular-material.css';
 import '../style/app.css';
 
 let app = () => {
@@ -14,12 +16,16 @@ class AppCtrl {
   constructor() {
     this.url = 'https://github.com/preboot/angular-webpack';
   }
+
+  toggleSidenav(side) {
+    console.log('Toggling sidenav');
+  }
 }
 
 const MODULE_NAME = 'app';
 
-angular.module(MODULE_NAME, [])
+angular.module(MODULE_NAME, [angularMaterial])
   .directive('app', app)
   .controller('AppCtrl', AppCtrl);
 
-export default MODULE_NAME;
\ No newline at end of file
+export default MODULE_NAME;
diff --git a/src/style/app.css b/src/style/app.css
index c0d850e33..1b3225c83 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -1,22 +1 @@
 /* styles in src/style directory are applied to the whole page */
-body {
-  background: #0147A7;
-  color: #fff;
-}
-
-a {
-  color: #03A9F4;
-}
-
-main {
-  padding: 1em;
-  font-family: Arial, Helvetica, sans-serif;
-  text-align: center;
-  margin-top: 50px;
-  display: block;
-}
-
-footer {
-  text-align: center;
-  font-size: 0.8em;
-}
\ No newline at end of file