diff --git a/package.json b/package.json
index ff1992462..5098a1601 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.2",
+    "angular-aria": "^1.6.2",
+    "angular-material": "1.1.3"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.0",
diff --git a/src/app/app.html b/src/app/app.html
index 29501db8c..216c6dbf1 100644
--- a/src/app/app.html
+++ b/src/app/app.html
@@ -1,9 +1,14 @@
 <main>
-  <h1 class="title">Hello from Angular !</h1>
-
-  <!-- Images (and assets) are parsed and loaded from within the public directory -->
-  <img src="http://github.com/img/logo.png">
+    <h1 class="title">Hello from Angular !</h1>
+    <h2>THis dawit from the second header speaking</h2>
+    <!-- Images (and assets) are parsed and loaded from within the public directory -->
+    <input ng-model="$ctrl.name"> {{$ctrl.name}}
+    <img src="http://github.com/img/logo.png">
 </main>
+<h1>{{$ctrl.what}}</h1>
+<simple-state content="deva"></simple-state>
+<starter></starter>
+<beginner></beginner>
 <footer>
-  <a ng-href="http://github.com/%7B%7Bapp.url%7D%7D">Webpack Angular Starter</a>
+    <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..83048f93c 100644
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -1,25 +1,38 @@
 import angular from 'angular';
+import starter from './starter/starte.component';
+import beginner from './beginner/beginner.component';
+import angularMaterial from 'angular-material';
+import simple from './starter/simple.component'
+
+import 'angular-animate';
+import 'angular-aria';
+import 'angular-material';
 
 import '../style/app.css';
 
 let app = () => {
-  return {
-    template: require('./app.html'),
-    controller: 'AppCtrl',
-    controllerAs: 'app'
-  }
+    return {
+        template: require('./app.html'),
+        controller: 'AppCtrl',
+        controllerAs: 'app'
+    }
 };
 
 class AppCtrl {
-  constructor() {
-    this.url = 'https://github.com/preboot/angular-webpack';
-  }
+    constructor() {
+        this.url = 'https://github.com/preboot/angular-webpack';
+        this.what = "what is speaking at the moment"
+        this.names = ['dawit', 'tuna', 'afom'];
+    }
 }
 
 const MODULE_NAME = 'app';
 
-angular.module(MODULE_NAME, [])
-  .directive('app', app)
-  .controller('AppCtrl', AppCtrl);
+angular.module(MODULE_NAME, [angularMaterial])
+    .directive('app', app)
+    .component('simpleState', simple)
+    .component('starter', starter)
+    .component('beginner', beginner)
+    .controller('AppCtrl', AppCtrl);
 
 export default MODULE_NAME;
\ No newline at end of file
diff --git a/src/app/beginner/beginner.component.js b/src/app/beginner/beginner.component.js
new file mode 100644
index 000000000..6e39682d1
--- /dev/null
+++ b/src/app/beginner/beginner.component.js
@@ -0,0 +1,6 @@
+export default {
+    template: "<div><ul><li ng-repeat='name in names'>{{name}}</li></ul></div>",
+    bindings: {
+        names: '=',
+    },
+}
\ No newline at end of file
diff --git a/src/app/starter/simple.component.js b/src/app/starter/simple.component.js
new file mode 100644
index 000000000..62d257051
--- /dev/null
+++ b/src/app/starter/simple.component.js
@@ -0,0 +1,10 @@
+export default {
+    template: `
+    <h1>This is the small component speaking</h1><br/>
+    <input type="text" ng-model="$ctrl.content">
+    {{$ctrl.content}}
+    `,
+    bindings: {
+        content: '=',
+    },
+}
\ No newline at end of file
diff --git a/src/app/starter/starte.component.js b/src/app/starter/starte.component.js
new file mode 100644
index 000000000..0cd97909b
--- /dev/null
+++ b/src/app/starter/starte.component.js
@@ -0,0 +1,7 @@
+import controller from './starter.controller'
+import template from './starter.template.html'
+
+export default {
+    template,
+    controller
+}
\ No newline at end of file
diff --git a/src/app/starter/starter.controller.js b/src/app/starter/starter.controller.js
new file mode 100644
index 000000000..c638688b4
--- /dev/null
+++ b/src/app/starter/starter.controller.js
@@ -0,0 +1,33 @@
+class controller {
+    constructor($scope, $http) {
+        this.$scope = $scope;
+        this.$scope.name = "dawit";
+        this.$http = $http;
+        this.selamta = "";
+        this.contacts = "example.com";
+        this.counter = 0;
+    }
+
+    $onInit() {
+        this.$http.get('http://127.0.0.1:5000/')
+            .then((datas) => {
+                this.selamta = datas.data;
+                console.log('inside', this.selamta);
+                console.log('muole');
+
+            }, (datas) => {
+                console.log(datas);
+            }).then(() => { console.log('outside', this.selamta) })
+    }
+
+    count() {
+        this.counter++;
+    }
+
+    reset() {
+        this.counter = 0;
+    }
+
+}
+
+export default controller;
\ No newline at end of file
diff --git a/src/app/starter/starter.template.html b/src/app/starter/starter.template.html
new file mode 100644
index 000000000..8ba4c2820
--- /dev/null
+++ b/src/app/starter/starter.template.html
@@ -0,0 +1,17 @@
+<div>
+    <md-switch ng-model="$ctrl.contacts" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
+        Switch 2 (md-warn): {{ $ctrl.contacts }}
+    </md-switch>
+    < <p>what is up</p>
+        <h1>{{name}}from the starter component</h1>
+        <h1> {{$ctrl.selamta.title}} from the http request in the starter component</h1>
+        <md-chips ng-model="$ctrl.contacts">
+            {{$ctrl.contacts}}
+        </md-chips>
+
+        <md-button>Default Button</md-button>
+
+
+        <button ng-click="$ctrl.count()">{{$ctrl.counter}}</button> {{$ctrl.counter != 5}}
+        <button ng-click="$ctrl.reset()" ng-disabled="$ctrl.counter == 5">reset</button>
+</div>
\ No newline at end of file
diff --git a/src/style/app.css b/src/style/app.css
index c0d850e33..b9a42d52d 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -1,22 +1,14 @@
 /* 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;
+    padding: 1em;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    margin-top: 50px;
+    display: block;
 }
 
 footer {
-  text-align: center;
-  font-size: 0.8em;
+    text-align: center;
+    font-size: 0.8em;
 }
\ No newline at end of file