Ready to start development
diff --git a/mCordPortal/src/app/components/footer/footer.html b/mCordPortal/src/app/components/footer/footer.html
new file mode 100644
index 0000000..334df39
--- /dev/null
+++ b/mCordPortal/src/app/components/footer/footer.html
@@ -0,0 +1,8 @@
+<!--Foot partial html-->
+<div class="footer">
+    <div class="container">
+        <div class="col-xs-12 text-right">
+            © M-CORD Project. All rights reserved.
+        </div>
+    </div>
+</div>
diff --git a/mCordPortal/src/app/components/footer/footer.js b/mCordPortal/src/app/components/footer/footer.js
new file mode 100644
index 0000000..c59917b
--- /dev/null
+++ b/mCordPortal/src/app/components/footer/footer.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+angular.module('mCord')
+  .directive('footer', function () {
+    return {
+      restrict: 'E',
+      templateUrl: 'app/components/footer/footer.html'
+    };
+  });
diff --git a/mCordPortal/src/app/components/header/header.html b/mCordPortal/src/app/components/header/header.html
new file mode 100644
index 0000000..6e9d5f8
--- /dev/null
+++ b/mCordPortal/src/app/components/header/header.html
@@ -0,0 +1,28 @@
+<nav class="navbar navbar-default navbar-fixed-top">
+    <div class="container-fluid">
+        <div class="navbar-header">
+            <button ng-if="page.curr !== 'login'" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#/">
+                <img src="/imgs/logo.png">
+            </a>
+        </div>
+        <div id="navbar" class="collapse navbar-collapse" close-on-route-change>
+            <ul ng-if="vm.user" class="nav navbar-nav pull-right" active-class>
+                <li>
+                    <a href="#/">Home</a>
+                </li>
+                <li>
+                    <a href="#/services">Services</a>
+                </li>
+                <li ng-click="vm.logout()">
+                    <a href="">Logout {{vm.a}}</a>
+                </li>
+            </ul>
+        </div><!--/.nav-collapse -->
+    </div>
+</nav>
diff --git a/mCordPortal/src/app/components/header/header.js b/mCordPortal/src/app/components/header/header.js
new file mode 100644
index 0000000..f2bbee2
--- /dev/null
+++ b/mCordPortal/src/app/components/header/header.js
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('mCord')
+    .directive('header', function ($location, User) {
+      return {
+        restrict: 'E',
+        templateUrl: 'app/components/header/header.html',
+        controllerAs: 'vm',
+        controller: function() {
+
+          this.user = User.isLoggedIn();
+
+          this.logout = () => {
+            User.logout()
+            .then(function(){
+              $location.path('/login');
+            });
+          };
+        }
+      };
+    })
+  .directive('closeOnRouteChange', function(){
+    return {
+      restrict: 'A',
+      link: function(scope, elem){
+        scope.$on('$routeChangeStart', function() {
+          elem.removeClass('in');
+        });
+      }
+    }
+  })
+  .directive('activeClass', function($location) {
+    return {
+      restrict: 'A',
+      link: function($rootScope, $element, $attrs) {
+        const links = angular.element($element[0]).find('a');
+        let urlMap = {};
+        let activeClass = $attrs.activeClass || 'active';
+        for (let i = links.length - 1; i >= 0; i--) {
+          let link = angular.element(links[i]);
+          let url = link.attr('href');
+
+          if (url.substring(0, 1) === '#') {
+            urlMap[url.substring(1)] = link;
+          } else {
+            urlMap[url] = link;
+          }
+        }
+
+        const activateItem = () => {
+          var path = urlMap[$location.path()];
+          links.parent('li').removeClass(activeClass);
+          if (path) {
+            path.parent('li').addClass(activeClass);
+          }
+        }
+        activateItem();
+        $rootScope.$on('$stateChangeStart', activateItem);
+      }
+    }
+  });
+}());