diff --git a/package.json b/package.json
index b62fee4..1b5f55a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
     "prebuild": "npm run clean -s",
     "scss": "node-sass --output-style compressed -o dist/css src/scss/",
     "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
-    "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.min.js && mkdir -p dist/js/vendor && uglifyjs node_modules/zepto/dist/zepto.js -m -o dist/js/vendor/vendor.min.js",
+    "uglify": "mkdir -p dist/js && cat src/js/*.js > dist/js/app.min.js && uglifyjs dist/js/app.min.js -m -o dist/js/app.min.js && mkdir -p dist/js/vendor && cat node_modules/angular/angular.js node_modules/angular-route/angular-route.js node_modules/zepto/dist/zepto.js > dist/js/vendor/vendor.min.js && uglifyjs dist/js/vendor/vendor.min.js -m -o dist/js/vendor/vendor.min.js",
     "imagemin": "imagemin src/img/* --out-dir=dist/img/",
     "serve": "browser-sync start --server 'dist' --files 'dist/css/*.css, dist/js/*.js, dist/*.html'",
     "build:css": "npm run scss && npm run autoprefixer",
@@ -24,6 +24,8 @@
     "gzip": "tar -czf openBMC.tar.gz dist"
   },
   "devDependencies": {
+    "angular": "^1.5.6",
+    "angular-route": "^1.5.6",
     "autoprefixer": "^6.6.1",
     "browser-sync": "^2.18.6",
     "html-minifier": "^3.3.0",
diff --git a/src/confirm.html b/src/confirm.html
new file mode 100644
index 0000000..24674d3
--- /dev/null
+++ b/src/confirm.html
@@ -0,0 +1,11 @@
+<!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row -->
+<div class="power__confirm" ng-class="{active: confirm}">
+    <div class="power__confirm-message">
+        <p class="h3"><i></i>Are you sure you want to <strong>{{title}}?</strong></p>
+        <p>{{message}}</p>
+    </div>
+    <div class="power__confirm-buttons">
+        <button class="btn-primary" ng-click="accept()">Yes</button>
+        <button class="btn-primary" ng-click="cancel()">No</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/header.html b/src/header.html
index 73cb837..2a67741 100644
--- a/src/header.html
+++ b/src/header.html
@@ -1,18 +1,19 @@
+<div id="header__wrapper">
 <!-- HEADER -->
 <!-- Class of status-light__good has 3 states: status-light__good, status-light__error, status-light__disabled -->
 <!-- Server Power buttton links to 'server power operations' page; Server Status may link to event log page. TBD.-->
-
 <header id="header">
-    <span class="app__version float-left">openBMC V.0.0.1</span>
-    <a href="index.html" class="header__logout">Log out</a>
+    <span class="app__version float-left">{{dataService.app_version}}</span>
+    <a href="" class="header__logout" ng-click="logout()">Log out</a>
 </header>
-<div class="header__functions-wrapper">
-    <div class="logo__wrapper"></div>
-    <button id="header__server-name">Server BLZ_109284.209.01</button>
+<div class="header__functions-wrapper" role="heading">
+    <div class="logo__wrapper"><img src="img/logo.svg" id="header__logo"  alt="company logo"/></div>
+    <button id="header__server-name">{{dataService.server_id}}</button>
     <div class="header__functions">
-        <a href="" id="header__server-health">Server health<span class="status-light__error">Error</span></a>
-        <a href="power-operations.html" class="header__server-power" role="button">Server power<span class="status-light__good">On</span></a>
-        <p class="header__refresh">Page last refreshed <span>3:20:12 Feb 12 2017</span></p>
-        <button class="header__page-refresh"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
+        <a href="" id="header__server-health">Server health<span class="status-light__error">{{dataService.server_health}}</span></a>
+        <a href="power-operations.html" class="header__server-power" role="button">Server power<span ng-class="{'status-light__error': server_status == -1, 'status-light__disabled': server_status == 0, 'status-light__good': server_status == 1}">{{dataService.server_state}}</span></a>
+        <p class="header__refresh">Page last refreshed <span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span></p>
+        <button class="header__page-refresh" ng-click="refresh()"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
     </div>
-</div>
\ No newline at end of file
+</div>
+</div>
diff --git a/src/index.html b/src/index.html
index c18a53c..e623cd9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,153 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" ng-app="app">
 <head>
+    <base href="/">
     <meta charset="UTF-8">
     <title>openBMC</title>
     <link rel="icon" href="favicon.ico?v=2"/>
     <link rel="stylesheet" href="css/main.css">
     <script src="js/vendor/vendor.min.js"></script>
-    <script>
-
-//        var user = 'root';
-//        var password = '0penBmc';
-//        var ip = 'https://9.3.164.147';
-
-        function getList(){
-
-            $.ajax({
-                type: "GET",
-                url: ip + "/xyz/openbmc_project/list",
-                dataType: "json",
-                async: true,
-                xhrFields: {
-                    withCredentials: true
-                },
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                success: function(response){
-                    var json = JSON.stringify(response);
-                    var content = JSON.parse(json);
-                    //console.log(content.data);
-
-                    for (var i = 0; i < content.data.length; i++) {
-                        var item = content.data[i];
-                        console.log(item);
-                        $('.container').append('<p>' + item + '</p>');
-                    }
-                },
-                error: function(xhr, textStatus, errorThrown){
-                    console.log("not a successful request!");
-                    console.log(xhr, textStatus, errorThrown)
-                }
-            });
-        }
-
-        function getPowerStatus(){
-
-            $.ajax({
-                type: "GET",
-                url: ip + "/xyz/openbmc_project/state/host0",
-                dataType: "json",
-                async: true,
-                xhrFields: {
-                    withCredentials: true
-                },
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                success: function(response){
-                    var json = JSON.stringify(response);
-                    var content = JSON.parse(json);
-                    //console.log(content.data);
-                    var currentHostState = content.data.CurrentHostState;
-                    if(currentHostState == "xyz.openbmc_project.State.Host.HostState.Off"){
-                        $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-off');
-                    }else{
-                        $('#power-indicator-bar').removeClass('power__state-off power__state-on').addClass('power__state-on');
-                    }
-                },
-                error: function(xhr, textStatus, errorThrown){
-                    console.log("not a successful request!");
-                    console.log(xhr, textStatus, errorThrown)
-                }
-            });
-        }
-
-        function login() {
-            console.log('login!');
-
-            var user = 'root';
-            var password = '0penBmc';
-            var ip = 'https://9.3.164.147';
-
-            $.ajax({
-                "type": "POST",
-                "url": ip + "/login",
-                "dataType": "json",
-                "async": true,
-                "headers": {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                "xhrFields": {
-                    withCredentials: true
-                },
-                "data": JSON.stringify({"data": [user, password]}),
-                "success": function (response) {
-                    console.log(response);
-                    //getList();
-                    //getPowerStatus();
-                    alert(JSON.stringify(response));
-                    window.location.replace("system-overview.html");
-
-                },
-                "error": function (xhr, textStatus, errorThrown) {
-                    console.log("not a successful request!");
-                    console.log(xhr, textStatus, errorThrown)
-                }
-            });
-        }
-    </script>
 </head>
-<body id="login">
-<div class="login__wrapper">
-    <div class="row">
-        <div class="columns large-6">
-            <img src="img/logo.svg" class="login__logo" alt="IBM logo" role="img"/>
-        </div>
-        <div class="columns large-6">
-        </div>
-    </div>
-    <div class="row">
-        <div class="columns large-6 login__desc">
-            <h1>OpenBMC Advanced System Management</h1>
-            <ul class="login__server-info">
-                <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
-                <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
-                <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
-                <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were display via local JS.  -->
-                <li><p class="login__info-label">Server power</p><p class="status-light__good">On</p></li>
-                <li><p class="login__info-label">Status message</p><!--<p>BMC was reset by user</p>--></li>
-            </ul>
-        </div>
-        <div class="columns large-6">
-            <form id="login__form" role="form" action="" >
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username" required>
+<body ng-style="dataService.bodyStyle" ng-attr-id="{{dataService.path == '/login' ? 'login': ''}}">
 
-                <label for="password">Password</label>
-                <input type="password" id="password" name="password" class="" required>
+<app-header ng-if="dataService.showNavigation" path="dataService.path"></app-header>
+<app-navigation ng-if="dataService.showNavigation" path="dataService.path" show-navigation="dataService.showNavigation"></app-navigation>
 
-                <input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button" onclick="login();">
+<main ng-view ng-class="{'content__container': dataService.path != '/login', 'login__wrapper': dataService.path == '/login'}">
+</main>
 
-                <p class="login__error-msg" role="alert">Incorrect username or password</p>
-            </form>
-        </div>
-    </div>
-</div>
 <script src="js/app.min.js"></script>
 </body>
 </html>
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;
+ }]);
diff --git a/src/login.html b/src/login.html
new file mode 100644
index 0000000..ed6f949
--- /dev/null
+++ b/src/login.html
@@ -0,0 +1,36 @@
+<div>
+    <div class="row">
+        <div class="columns large-6">
+            <img src="img/logo.svg" class="login__logo" alt="IBM logo" role="img"/>
+        </div>
+        <div class="columns large-6">
+        </div>
+    </div>
+    <div class="row">
+        <div class="columns large-6 login__desc">
+            <h1>OpenBMC Advanced System Management</h1>
+            <ul class="login__server-info">
+                <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
+                <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
+                <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
+Add a comment to this line
+                <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were isplay via local JS.  -->
+                <li><p class="login__info-label">Server power</p><p class="status-light__good">On</p></li>
+                <li><p class="login__info-label">Status message</p><!--<p>BMC was reset by user</p>--></li>
+            </ul>
+        </div>
+        <div class="columns large-6">
+            <form id="login__form" role="form" action="" >
+                <label for="username">Username</label>
+                <input type="text" id="username" name="username" required ng-model="username" ng-class="{error: error}">
+
+                <label for="password">Password</label>
+                <input type="password" id="password" name="password" class="" required ng-model="password">
+
+                <input id="login__submit" class="btn-primary submit" type="button" value="Log in" role="button" ng-click="login(username, password)" ng-class="{error: error}">
+
+                <p class="login__error-msg" role="alert" ng-if="error">Incorrect username or password</p>
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/logo.html b/src/logo.html
deleted file mode 100644
index ec78a36..0000000
--- a/src/logo.html
+++ /dev/null
@@ -1 +0,0 @@
-<img src="img/logo.svg" id="header__logo" alt="company logo"/>
\ No newline at end of file
diff --git a/src/navigation.html b/src/navigation.html
index e15f82a..aff9329 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -1,8 +1,7 @@
-
-<nav role="navigation">
-    <ul id="nav__top-level">
+<nav>
+    <ul id="nav__top-level" ng-style="navStyle">
         <li>
-            <button class="btn-overview opened" tabindex="1">
+            <button class="btn-overview" ng-class="{opened: firstLevel == 'overview'}" ng-click="firstLevel = 'overview';" tabindex="1">
                 <svg version="1.1" class="nav__icon" x="0px" y="0px"
                      viewBox="0 0 20 20">
                     <g>
@@ -19,24 +18,24 @@
                     </g>
                 </svg>
 
-                <span class="" >Overview</span></button>
+                <span class="">Overview</span></button>
         </li>
         <li>
-            <button class="btn-settings" tabindex="6">
+            <button class="btn-settings" ng-class="{opened: firstLevel == 'settings'}" ng-click="firstLevel = 'settings';" tabindex="6">
                 <svg class="nav__icon" viewBox="0 0 20 20">
                     <path d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
                 </svg>
                 <span>Settings</span></button>
         </li>
         <li>
-            <button class="btn-multi">
+            <button class="btn-multi" ng-class="{opened: firstLevel == 'multi_system'}" ng-click="firstLevel = 'multi_system';">
                 <svg class="nav__icon" viewBox="0 0 20 20">
                     <path d="M10,1.529c-4.679,0-8.471,3.792-8.471,8.471c0,4.68,3.792,8.471,8.471,8.471c4.68,0,8.471-3.791,8.471-8.471C18.471,5.321,14.68,1.529,10,1.529 M10,17.579c-4.18,0-7.579-3.399-7.579-7.579S5.82,2.421,10,2.421S17.579,5.82,17.579,10S14.18,17.579,10,17.579 M14.348,10c0,0.245-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.201-0.446-0.446s0.2-0.446,0.446-0.446h5C14.146,9.554,14.348,9.755,14.348,10 M14.348,12.675c0,0.245-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.201-0.446-0.446s0.2-0.445,0.446-0.445h5C14.146,12.229,14.348,12.43,14.348,12.675 M7.394,10c0,0.245-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.201-0.446-0.446s0.201-0.446,0.446-0.446h0.849C7.194,9.554,7.394,9.755,7.394,10 M7.394,12.675c0,0.245-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.201-0.446-0.446s0.201-0.445,0.446-0.445h0.849C7.194,12.229,7.394,12.43,7.394,12.675 M14.348,7.325c0,0.246-0.201,0.446-0.446,0.446h-5c-0.246,0-0.446-0.2-0.446-0.446c0-0.245,0.2-0.446,0.446-0.446h5C14.146,6.879,14.348,7.08,14.348,7.325 M7.394,7.325c0,0.246-0.2,0.446-0.446,0.446H6.099c-0.245,0-0.446-0.2-0.446-0.446c0-0.245,0.201-0.446,0.446-0.446h0.849C7.194,6.879,7.394,7.08,7.394,7.325"></path>
                 </svg>
                 <span>Multi System</span></button>
         </li>
         <li>
-            <button class="btn-help">
+            <button class="btn-help" ng-class="{opened: firstLevel == 'help'}" ng-click="firstLevel = 'help';">
                 <svg class="nav__icon" viewBox="0 0 20 20">
                     <path class="nav__icon-help__outer" d="M10,0.9c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S14.9,0.9,10,0.9"/>
                     <path class="nav__icon-help__inner" d="M9.2,5.4V3.7h1.5v1.8H9.2z M9.2,16.1v-9h1.5v9H9.2z"/>
@@ -44,25 +43,25 @@
                 <span>Help</span></button>
         </li>
     </ul>
-    <ul class="nav__second-level btn-overview">
-        <li tabindex="2"><a href="system-overview.html">System Overview</a></li>
-        <li tabindex="3"><a href="power-operations.html">Server power operations </a></li>
-        <li tabindex="4"><a href="power-consumption.html">Power consumption</a></li>
-        <li tabindex="5"><a href="remote-console.html">Remote console</a></li>
+    <ul class="nav__second-level btn-overview" ng-style="navStyle" ng-class="{opened: firstLevel == 'overview'}">
+        <li ng-class="{'active': (path == '/system-overview')}" tabindex="2"><a href="#/system-overview">System Overview</a></li>
+        <li ng-class="{'active': (path == '/power-operations')}" tabindex="3"><a href="#/power-operations">Server power operations</a></li>
+        <li ng-class="{'active': (path == '/power-consumption')}"><a href="" tabindex="4">Power consumption</a></li>
+        <li ng-class="{'active': (path == '/remote-console')}"><a href="" tabindex="5">Remote console</a></li>
     </ul>
-    <ul class="nav__second-level btn-settings">
+    <ul class="nav__second-level btn-settings" ng-style="navStyle"  ng-class="{opened: firstLevel == 'settings'}">
         <li><a href="">2nd level 4</a></li>
         <li><a href="">2nd level 5</a></li>
         <li><a href="">2nd level 6</a></li>
     </ul>
-    <ul class="nav__second-level btn-multi">
+    <ul class="nav__second-level btn-multi" ng-style="navStyle"  ng-class="{opened: firstLevel == 'multi_system'}">
         <li><a href="">2nd level 7</a></li>
         <li><a href="">2nd level 8</a></li>
         <li><a href="">2nd level 9</a></li>
     </ul>
-    <ul class="nav__second-level btn-help">
+    <ul class="nav__second-level btn-help" ng-style="navStyle"  ng-class="{opened: firstLevel == 'help'}">
         <li><a href="">2nd level 10</a></li>
         <li><a href="">2nd level 212</a></li>
-        <li><a href="">2nd level 312</a></li>
+        <li><a href="">2nd level 312</a></li> 
     </ul>
 </nav>
diff --git a/src/power-operations.html b/src/power-operations.html
index d793678..f2db772 100644
--- a/src/power-operations.html
+++ b/src/power-operations.html
@@ -1,20 +1,5 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>openBMC</title>
-    <link rel="icon" href="favicon.ico?v=2"/>
-    <link rel="stylesheet" href="css/main.css">
-    <script src="js/vendor/vendor.min.js"></script>
-</head>
-<body>
+<div id="power-operations">
 
-<!-- Header & Navigation includes -->
-<div id="header__wrapper"></div>
-<div id="navigation"></div>
-
-<!-- Power Operations Content -->
-<main id="power-operations" class="content__container" role="main">
     <div class="row column">
         <h1>Server power operation</h1>
     </div>
@@ -23,13 +8,13 @@
     <div class="row column">
         <div class="power__current-status ">
             <h2 class="inline h4">Current status</h2>
-            <span class="power__status-log inline float-right">Server last reset at 01:41:24 on 02/17/17</span>
+            <span class="power__status-log inline float-right">Server last reset at {{dataService.last_updated |date:'h:mm:ss on MM/dd/yyyy'}}</span>
         </div>
     </div>
     <div class="row column">
-        <div id="power-indicator-bar" class="power__indicator-bar power__state-on">
-            <p class="inline">Server BLZ_109284.209.01</p>
-            <h3 class="power__state inline float-right"><span>On</span></h3>
+        <div id="power-indicator-bar" class="power__indicator-bar" ng-class="{'power__state-on': dataService.server_state == 'On', 'power__state-off': dataService.server_state == 'Off'}">
+            <p class="inline">{{dataService.server_id}}</p>
+            <h3 class="power__state inline float-right h3"><span>{{dataService.server_state}}</span></h3>
         </div>
     </div>
     <div class="row column">
@@ -38,105 +23,33 @@
         </div>
 
         <!-- Power on displays only when server is shutdown -->
-        <div class="row column power-option">
-            <button id="power__power-on" class="btn-secondary" role="button">Power On</button>
+        <div class="row column power-option" ng-hide="dataService.server_state == 'On'" ng-class="{disabled: confirm && !power_confirm, transitionAll: confirm && power_confirm}">
+            <button id="power__power-on" class="btn-secondary" ng-click="powerOnConfirm()" role="button">Power On</button>
             <p>Attempts to power on the server</p>
+
+            <confirm title="power off" message="Power off the server" confirm="power_confirm" ng-show="power_confirm" callback="togglePower"></confirm>
         </div>
 
         <!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
-        <div class="row column power-option">
-            <button id="power__warm-boot" class="btn-secondary" role="button">Warm reboot</button>
+        <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !warmboot_confirm, transitionAll: confirm && warmboot_confirm}">
+            <button id="power__warm-boot" class="btn-secondary" ng-click="warmRebootConfirm()" role="button">Warm reboot</button>
             <p>Attempts to perform an orderly shutdown before restarting the server</p>
+            <confirm title="Warm Reboot" message="perform an orderly shutdown" confirm="warmboot_confirm" ng-show="warmboot_confirm" callback="warmReboot"></confirm>
         </div>
-        <div class="row column power-option">
-            <button id="power__cold-boot" class="btn-secondary" role="button">Cold reboot</button>
+        <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !coldboot_confirm, transitionAll: confirm && coldboot_confirm}">
+            <button id="power__cold-boot" class="btn-secondary" ng-click="coldRebootConfirm()" role="button">Cold reboot</button>
             <p>Shuts down the server immediately, then restarts it</p>
+            <confirm title="Cold Reboot" message="Shutdown server immediately." confirm="coldboot_confirm" ng-show="coldboot_confirm" cancel="coldbootCancel" callback="toggleState"></confirm>
         </div>
-        <div class="row column power-option">
-            <button id="power__soft-shutdown" class="btn-secondary" role="button">Orderly shutdown</button>
+        <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !orderly_confirm, transitionAll: confirm && orderly_confirm}">
+            <button id="power__soft-shutdown" class="btn-secondary" ng-click="orderlyShutdownConfirm()" role="button">Orderly shutdown</button>
             <p>Attempts to stop all software on the server before removing power</p>
+            <confirm title="Orderly shutdown" message="Attempts to stop all software orderly." confirm="orderly_confirm" ng-show="orderly_confirm" cancel="orderlyShutdownCancel" callback="toggleState"></confirm>
         </div>
-        <div class="row column power-option">
-            <button id="power__hard-shutdown" class="btn-secondary" role="button">Immediate shutdown</button>
+        <div class="row column power-option" ng-hide="dataService.server_state == 'Off'" ng-class="{disabled: confirm && !immediately_confirm, transitionAll: confirm && immediately_confirm}">
+            <button id="power__hard-shutdown" class="btn-secondary" ng-click="immediateShutdownConfirm()" role="button">Immediate shutdown</button>
             <p>Removes power from the server without waiting for software to stop</p>
-
-            <!-- Confirmation message - to accommodate the message for smaller screens we need to grab the height of the message and apply that height to "power-option" row
-
-            var msgheight = $(this).parent().find('.power__confirm').height();
-            $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
-            -->
-
-            <div class="power__confirm">
-                <div class="power__confirm-message">
-                    <p class="h3"><i></i>Are you sure you want to <strong>immediate shutdown?</strong></p>
-                    <p>Removes power from the server without waiting for software to stop</p>
-                </div>
-                <div class="power__confirm-buttons">
-                    <button class="btn-primary">Yes</button>
-                    <button class="btn-primary">No</button>
-                </div>
-            </div>
+            <confirm title="Immediate shutdown" message="Removes power from the server immediately." confirm="immediately_confirm" ng-show="immediately_confirm" cancel="immediatelyShutdownCancel" callback="toggleState"></confirm>
         </div>
     </div>
-</main>
-
-</body>
-<script src="js/app.min.js"></script>
-
-<!-- FOR DEMO ONLY __ DO NOT COPY BELOW -->
-<script>
-
-    var pwrOn = $("#power__power-on"),
-        endTransition = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
-        pwrOps = '#power-operations';
-
-    pwrOn.parent().hide();
-
-    $('#power__hard-shutdown').on('click', function () {
-
-        var msgheight = $(this).parent().find('.power__confirm').height();
-        $(this).addClass('disabled');
-        $(this).parents(pwrOps).find('.power__confirm').addClass('active');
-        $(this).parents(pwrOps).find('.power-option, .btn-secondary').addClass('disabled');
-        $(this).parent().addClass('transitionAll').css("minHeight", msgheight).removeClass('disabled');
-        $(this).parents(pwrOps).find('.power-option.disabled button').attr("disabled", true).addClass('disabled');
-    });
-
-    pwrOn.on('click', function () {
-        var srvrPwr = $(".header__server-power");
-
-        $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
-        $(this).parents(pwrOps).find('.power-option').show();
-        $(this).parents(".power-option").hide();
-        $(".power__state span").one(endTransition,
-            function() {
-                $(this).parents(pwrOps).find('.power__state span').html('On');
-                $(this).parents(pwrOps).find('.power-option.disabled').show();
-                $(this).parents(pwrOps).find('.power-option.disabled button').removeAttr("disabled", true).removeClass('disabled');
-                $(".power-option, .power__confirm-buttons").removeClass("disabled");
-                srvrPwr.find(".status-light__disabled").removeClass("status-light__disabled").addClass("status-light__good");
-                srvrPwr.find("span").text('On');
-            });
-    });
-
-    $('.btn-primary').on('click', function(){
-
-        var srvrPwr = $(".header__server-power"),
-            pwrOnDisabl = $("#power__power-on.disabled");
-
-        $(this).parents(pwrOps).find('.power__indicator-bar').toggleClass('power__state-off');
-        $(this).parents(pwrOps).find('.power__confirm').removeClass('active');
-        $(this).parent().addClass('disabled');
-        $(this).parents('.power-option').addClass('disabled');
-        $(".power__state span").one(endTransition,
-            function(e) {
-                $(this).parents(pwrOps).find('.power__state span').html('Off');
-                $(this).parents(pwrOps).find('.power-option.disabled').hide();
-                pwrOnDisabl.parent().show().removeClass('disabled');
-                pwrOnDisabl.removeAttr("disabled").removeClass('disabled');
-                srvrPwr.find(".status-light__good").removeClass("status-light__good").addClass("status-light__disabled");
-                srvrPwr.find("span").text('Off');
-            });
-    });
-</script>
-</html>
+</div>
\ No newline at end of file
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
index 5cc38d4..5f239df 100644
--- a/src/scss/base/_buttons.scss
+++ b/src/scss/base/_buttons.scss
@@ -1,4 +1,4 @@
-button, .button, input[type="submit"] {
+button, .button, input[type="submit"], .submit {
   font-weight: bold;
   font-size: 1em;
   text-transform: none;
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 074ba14..134537d 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -40,7 +40,7 @@
 
 textarea { padding: .2em;
   height: auto;}
-input[type="submit"] {
+input[type="submit"], .submit {
   margin: 1em 0;
   width: 100%;
 }
diff --git a/src/system-overview.html b/src/system-overview.html
index ae2368d..9f6a126 100644
--- a/src/system-overview.html
+++ b/src/system-overview.html
@@ -1,26 +1,4 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>openBMC</title>
-    <link rel="icon" href="favicon.ico?v=2"/>
-    <link rel="stylesheet" href="css/main.css">
-    <script src="js/vendor/vendor.min.js"></script>
-</head>
-<body>
-
-<!-- Header & Navigation includes -->
-<div id="header__wrapper"></div>
-<div id="navigation"></div>
-
-<!-- Power Operations Content -->
-<main id="power-operations" class="content__container" role="main">
-    <div class="row column">
-        <h1>System Overview</h1>
-        <p>System overview will be here.</p>
-    </div>
-</main>
-
-</body>
-<script src="js/app.min.js"></script>
-</html>
+<div class="row column">
+    <h1>System Overview</h1>
+    <p>System overview will be here.</p>
+</div>
\ No newline at end of file