diff --git a/src/js/app.js b/src/js/app.js
new file mode 100644
index 0000000..6469860
--- /dev/null
+++ b/src/js/app.js
@@ -0,0 +1,45 @@
+angular
+ .module('app', [
+    'ngRoute',
+    'app.directives',
+    'app.services',
+    'app.controllers'
+ ])
+ .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
+    $locationProvider.hashPrefix('');
+    $routeProvider
+      .when('/login', {
+        'templateUrl': 'login.html',
+        'controller': 'loginController'
+      })
+      .when('/dashboard', {
+        'templateUrl': 'dashboard.html',
+        'controller': 'dashboardController'
+      })
+      .when('/power-operations', {
+        'templateUrl': 'power-operations.html',
+        'controller': 'powerOperationsController'
+      })
+      .when('/system-overview', {
+        'templateUrl': 'system-overview.html',
+        'controller': 'systemOverviewController'
+      })
+      .otherwise({
+        'redirectTo': '/login'
+      });
+ }])
+ .run(['$rootScope', '$location', 'dataService',
+    function($rootScope, $location, dataService){
+    $rootScope.dataService = dataService;
+    dataService.path = $location.path();
+    $rootScope.$on('$locationChangeSuccess', function(event){
+        var path = $location.path();
+        dataService.path = path;
+        if(['/','/login','/logout'].indexOf(path) == -1){
+            dataService.showNavigation = true;
+        }else{
+            dataService.showNavigation = false;
+        }
+    });
+    }
+ ]);
diff --git a/src/js/controllers.js b/src/js/controllers.js
new file mode 100644
index 0000000..a197ab2
--- /dev/null
+++ b/src/js/controllers.js
@@ -0,0 +1,155 @@
+ angular
+ .module('app.controllers', [])
+   .controller('loginController', ['$scope', '$window', 'APIUtils', 'dataService', function($scope, $window, APIUtils, dataService){
+    $scope.login = function(username, password){
+        $scope.error = false;
+        $scope.dataService = dataService;
+        if(!username || username == "" ||
+           !password || password == ""){
+            return false;
+        }else{
+            //@TODO: service should handle
+            if(username == APIUtils.LOGIN_CREDENTIALS.username &&
+               password == APIUtils.LOGIN_CREDENTIALS.password){
+                $window.location.hash = '#/dashboard';
+            }else{
+                $scope.error = true;
+                //@TODO: show error message
+            }
+        }
+    }
+ }])
+ .controller('dashboardController', ['$scope', 'dataService', function($scope, dataService){
+    $scope.dataService = dataService;
+ }])
+ .controller('systemOverviewController', ['$scope', 'dataService', function($scope, dataService){
+    $scope.dataService = dataService;
+ }])
+  .controller('powerOperationsController', ['$scope', 'APIUtils', 'dataService', function($scope, APIUtils, dataService){
+    $scope.dataService = dataService;
+    $scope.confirm = false;
+    $scope.power_confirm = false;
+    $scope.warmboot_confirm = false;
+    $scope.coldboot_confirm = false;
+    $scope.orderly_confirm = false;
+    $scope.immediately_confirm = false;
+
+    //@TODO: call api and get proper state
+    $scope.toggleState = function(){
+        dataService.server_state = (dataService.server_state == 'On') ? 'Off': 'On';
+    }
+
+    $scope.togglePower = function(){
+        var method = (dataService.server_state == 'On') ? 'chassisPowerOff' : 'chassisPowerOn';
+         //@TODO: show progress or set class orange
+        APIUtils[method](function(response){
+            //update state based on response
+            //error case?
+            if(response == null){
+                console.log("Failed request.");
+            }else{
+                dataService.server_state = response;
+            }
+        });
+    }
+    $scope.powerOnConfirm = function(){
+        if($scope.confirm) {
+            return;
+        }
+        $scope.confirm = true;
+        $scope.power_confirm = true;
+    };
+    $scope.warmReboot = function(){
+        //@TODO:show progress
+        APIUtils.hostPowerOff(function(response){
+            if(response){
+                APIUtils.hostPowerOn(function(response){
+                    if(response){
+
+                    }else{
+                        //@TODO:show error message
+                    }
+                    //@TODO:hide progress, set proper server state
+                });
+            }else{
+                //@TODO:hide progress & show error message
+            }
+        });
+    };
+    $scope.warmRebootConfirm = function(){
+        if($scope.confirm) {
+            return;
+        }
+        $scope.confirm = true;
+        $scope.warmboot_confirm = true;
+    };
+
+    $scope.coldReboot = function(){
+        //@TODO:show progress
+        APIUtils.chassisPowerOff(function(response){
+            if(response){
+                APIUtils.chassisPowerOn(function(response){
+                    if(response){
+
+                    }else{
+                        //@TODO:show error message
+                    }
+                    //@TODO:hide progress, set proper server state
+                });
+            }else{
+                //@TODO:hide progress & show error message
+            }
+        });
+    };
+    $scope.coldRebootConfirm = function(){
+        if($scope.confirm) {
+            return;
+        }
+        $scope.confirm = true;
+        $scope.coldboot_confirm = true;
+    };
+
+    $scope.orderlyShutdown = function(){
+        //@TODO:show progress
+        APIUtils.hostPowerOff(function(response){
+            if(response){
+                APIUtils.chassisPowerOff(function(response){
+                    if(response){
+
+                    }else{
+                        //@TODO:show error message
+                    }
+                    //@TODO:hide progress, set proper server state
+                });
+            }else{
+                //@TODO:hide progress & show error message
+            }
+        });
+    };
+    $scope.orderlyShutdownConfirm = function(){
+        if($scope.confirm) {
+            return;
+        }
+        $scope.confirm = true;
+        $scope.orderly_confirm = true;
+    };
+
+    $scope.immediateShutdown = function(){
+        //@TODO:show progress
+        APIUtils.chassisPowerOff(function(response){
+            if(response){
+                //@TODO: set proper server state
+            }else{
+                //@TODO:show error message
+            }
+            //@TODO:hide progress
+        });
+    };
+    $scope.immediateShutdownConfirm = function(){
+        if($scope.confirm) {
+            return;
+        }
+        $scope.confirm = true;
+        $scope.immediately_confirm = true;
+    };
+ }]);
\ No newline at end of file
diff --git a/src/js/directives.js b/src/js/directives.js
new file mode 100644
index 0000000..af78ae7
--- /dev/null
+++ b/src/js/directives.js
@@ -0,0 +1,90 @@
+
+
+angular
+ .module('app.directives', [])
+ .directive('appHeader', ['APIUtils', function(APIUtils){
+
+    return {
+        'restrict': 'E',
+        'templateUrl': 'header.html',
+        'scope': {
+            'path': '='
+        },
+        'controller': ['$scope','dataService', function($scope, dataService){
+            $scope.server_status = 01;
+            $scope.dataService = dataService;
+            APIUtils.login(function(){
+                APIUtils.getHostState(function(status){
+                    if(status == 'xyz.openbmc_project.State.Host.HostState.Off'){
+                        $scope.server_status = -1;
+                    }else if(status == 'xyz.openbmc_project.State.Host.HostState.Running'){
+                        $scope.server_status = 1;
+                    }else{
+                        $scope.server_status = 0;
+                    }
+                });
+            });
+
+            $scope.refresh = function(){
+                console.log("--refresh status--");
+            }
+        }]
+    };
+ }])
+  .directive('appNavigation', function(){
+
+    return {
+        'restrict': 'E',
+        'templateUrl': 'navigation.html',
+        'scope': {
+            'path': '=',
+            'showNavigation': '='
+        },
+        'controller': ['$scope', 'dataService', function($scope, dataService){
+            $scope.$watch('showNavigation', function(){
+                var padingTop = 0;
+                $scope.firstLevel = 'overview';
+                $scope.secondLevel = 'system_overview';
+                if($scope.showNavigation){
+                    paddingTop = document.getElementById('header__wrapper').offsetHeight;
+                }
+                dataService.bodyStyle = {'padding-top': paddingTop + 'px'};
+                $scope.navStyle = {'top': paddingTop + 'px'};
+            });
+        }]
+    };
+ })
+  .directive('confirm', ['$timeout', function($timeout){
+
+    return {
+        'restrict': 'E',
+        'templateUrl': 'confirm.html',
+        'scope': {
+            'title': '@',
+            'message': '@',
+            'confirm': '=',
+            'callback': '='
+        },
+        'controller': ['$scope',function($scope){
+            $scope.cancel = function(){
+                $scope.confirm = false;
+                $scope.$parent.confirm = false;
+            };
+            $scope.accept = function(){
+                $scope.callback();
+                $scope.cancel();
+            }
+        }],
+        link: function(scope, e) {
+            scope.$watch('confirm', function(){
+                if(scope.confirm){
+                    $timeout(function(){
+                        angular.element(e[0].parentNode).css({'min-height': e[0].querySelector('.power__confirm').offsetHeight + 'px'});
+                    }, 0);
+                }else{
+                    angular.element(e[0].parentNode).css({'min-height': 0+ 'px'});
+                }
+            });
+        }
+    };
+ }]);
diff --git a/src/js/main.js b/src/js/main.js
deleted file mode 100755
index cc96a73..0000000
--- a/src/js/main.js
+++ /dev/null
@@ -1,106 +0,0 @@
-(function () {
-
-    // Init functions
-    header();
-    nav();
-
-    // Load logo
-    function loadLogo() {
-        $('.logo__wrapper').load('logo.html', function () {
-
-            // Grab logo if has ID or not
-            var logoID = document.getElementById("header__logo");
-            var logo = document.querySelectorAll("img, svg");
-
-            // Has ID - call header height
-            if (logoID && logoID !== null) {
-                getHeaderHeight();
-
-                // If logo exists but no ID - call header height
-            } else if (logo !== null && logo.length == 1) {
-                $('img, svg').on('load', function () {
-                    getHeaderHeight();
-                });
-
-                // If no logo at all - call header height
-            } else {
-                getHeaderHeight();
-            }
-        });
-    }
-
-    // Get header height
-    function getHeaderHeight() {
-        // Get header height after logo is loaded
-        var header = document.getElementById("header__wrapper");
-        var headerHeight = header.offsetHeight;
-
-        // Add body padding to compensate for fixed header
-        document.body.style.paddingTop = headerHeight + 'px';
-
-        nav(headerHeight);
-    }
-
-    // Include header
-    function header() {
-        $('#header__wrapper').load('header.html', function () {
-
-            // include logo into header
-            loadLogo();
-        });
-    }
-
-    // load navigation - pass in header height
-    function nav(height) {
-        $('#navigation').load('navigation.html', function (headerHeight) {
-
-            var nav = document.getElementById("nav__top-level");
-            var subnav = document.getElementsByClassName("nav__second-level");
-            var navBtn = document.querySelectorAll('#nav__top-level button');
-
-            // Bump down nav to compensate for fixed header
-            nav.style.top = height + 'px';
-
-            // Bump second level nav down for fixed header
-            for (var i = 0; i < subnav.length; i++) {
-                subnav[i].style.top = height + 'px';
-
-            }
-
-            // Set link that matches page url to active
-            var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
-            $('.nav__second-level li a').each(function() {
-                if (this.href === path) {
-                    $(this).parent().addClass('active');
-                }
-            });
-
-            //Loop over nav buttons
-            for (var i = 0, len = navBtn.length; i < len; i++) {
-
-                // Click event for each nav button
-                navBtn[i].addEventListener('click', function () {
-
-                    var parent = $(this).parents("#navigation");
-                    var btnId = $(this).attr("class").match(/btn[\w-]*\b/);
-                    var subnavClass = $('.nav__second-level.' + btnId);
-
-                    if(this && this.classList.contains("opened")){
-                        parent.find(subnavClass).removeClass("opened");
-                    }
-
-                    //Remove opened class from buttons
-                    parent.find('.opened').removeClass('opened');
-
-                    // Add opened class to clicked button
-                    this.classList.add("opened");
-
-                    // add opened class
-                    parent.find(subnavClass).toggleClass('opened');
-
-                });
-            }
-        });
-    }
-
-}());
diff --git a/src/js/services.js b/src/js/services.js
new file mode 100644
index 0000000..38b4b85
--- /dev/null
+++ b/src/js/services.js
@@ -0,0 +1,244 @@
+/**
+chassis
+/org/openbmc/control/chassis0 —> PowerOn ..PowerOff
+
+host reboot
+/org/openbmc/control/host0 —>reboot
+
+shutdown
+/org/openbmc/control/host0 —> shutdown
+**/
+angular
+ .module('app.services', [])
+ .service('dataService', function(){
+    this.app_version = "openBMC V.0.0.1";
+    this.server_health = 'Error';
+    this.server_state = 'On';
+    this.chassis_state = 'On';
+    this.server_id = "Server BLZ_109284.209.01";
+    this.last_updated = new Date();
+
+    this.showNavigation = false;
+    this.bodyStyle = {};
+    this.path = '';
+
+ })
+ .factory('APIUtils', ['$http', function($http){
+    var SERVICE = {
+        LOGIN_CREDENTIALS: {
+            username: "test",
+            password: "testpass",
+        },
+        API_CREDENTIALS: {
+            user: 'root',
+            password: '0penBmc',
+            host: 'https://9.3.164.147'
+        },
+        CHASSIS_POWER_STATE: {
+            on: 'On',
+            off: 'Off'
+        },
+        HOST_STATE: {
+            on: 'Running',
+            off: 'Off',
+            booting: 'Quiesced'
+        },
+        getChassisState: function(callback){
+          $http({
+            method: 'GET',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/chassis0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                callback(content.data.CurrentPowerState);
+          }).error(function(error){
+            console.log(error);
+          });
+        },
+        getHostState: function(callback){
+          $http({
+            method: 'GET',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                callback(content.data.CurrentHostState);
+          }).error(function(error){
+            console.log(error);
+          });
+        },
+        login: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/login",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": [SERVICE.API_CREDENTIALS.user, SERVICE.API_CREDENTIALS.password]})
+          }).success(function(response){
+            if(callback){
+                callback(response);
+            }
+          }).error(function(error){
+            console.log(error);
+          });
+        },
+        chassisPowerOn: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": []})
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content.data.CurrentPowerState);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        },
+        chassisPowerOff: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": []})
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content.data.CurrentPowerState);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        },
+        hostPowerOn: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "xyz/openbmc_project/state/host0/attr/RequestedHostTransition",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": "xyz.openbmc_project.State.Host.Transition.Off"})
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content.data.CurrentHostState);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        },
+        hostPowerOff: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": []}),
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content.data.CurrentHostState);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        },
+        hostReboot: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": []}),
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        },
+        hostShutdown: function(callback){
+          $http({
+            method: 'POST',
+            url: SERVICE.API_CREDENTIALS.host + "/xyz/openbmc_project/state/host0",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            withCredentials: true,
+            data: JSON.stringify({"data": []})
+          }).success(function(response){
+                var json = JSON.stringify(response);
+                var content = JSON.parse(json);
+                if(callback){
+                    return callback(content);
+                }
+          }).error(function(error){
+            if(callback){
+                callback(error);
+            }else{
+                console.log(error);
+            }
+          });
+        }
+    };
+    return SERVICE;
+ }]);