diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index 1a45d36..c9378ae 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -10,11 +10,12 @@
 		<p class="header__hostname">{{dataService.hostname}}</p>
 		<p class="header__server-ip courier-bold">BMC IP address {{dataService.server_id}}</p>
 	</div>
-    <div class="header__functions">
-        <a href="#/server-health/event-log" class="header__server-health">Server health <i class="icon icon-angle"></i><span class="status-light__error">{{dataService.server_health}}</span></a>
-        <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power <i class="icon icon-angle"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__warn': dataService.server_state == 'Quiesced'}">{{dataService.server_state}}</span></a>
+    <div class="header__functions" ng-class="{'active' : toggle}">
+	    <a class="header__info" ng-click="toggle = !toggle"><span>Server Info</span><i class="icon icon-angle" aria-hidden="true"></i></a>
+        <a href="#/server-health/event-log" class="header__server-health">Server health <i class="icon icon-angle" aria-hidden="true"></i><span class="status-light__error">{{dataService.server_health}}</span></a>
+        <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__warn': dataService.server_state == 'Quiesced'}">{{dataService.server_state}}</span></a>
         <p class="header__refresh">Data last refreshed<span>{{dataService.last_updated |date:'h:mm:ss MMM dd yyyy'}}</span></p>
-        <button class="header__page-refresh" ng-click="refresh()"><span>Refresh</span><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91"><path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/></button>
+        <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data"><span>Refresh</span><svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.18 51.91"><path class="cls-1" d="M38,20.77H52v-14H48.3v6.07A26,26,0,1,0,48.7,38H44.32a22.14,22.14,0,1,1,1.8-20.92H38v3.67Z" transform="translate(0.16 0.14)"/></button>
     </div>
 </div>
 </div>
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 1ca6daf..b2d90bc 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -97,11 +97,18 @@
   .header__functions {
     position: absolute;
     top: 0;
-    right: 0;
+    right: -680px;
     bottom: 0;
     z-index: 100;
     margin: .3em 0;
+    background: $white;
     @include fastTransition-all;
+    &.active {
+      right: 1em;
+    }
+    @media (min-width: 1025px) {
+      right: 0;
+    }
     span {
       display: block;
       color: $black;
@@ -126,36 +133,53 @@
     }
   }
 
-  // hide/show header functions based on screen size
-  .header__functions > .header__server-health {
-    display: none;
-    @include mediaQuery(small) {
-      display: block;
-    }
-  }
-
-  .header__functions > .header__refresh {
-    display: none;
-    @include mediaQuery(medium) {
-      display: block;
-      background-color: $white;
-    }
-  }
-
   .header__functions {
     .header__server-power,
     .header__page-refresh,
-    .header__server-health {
+    .header__server-health,
+    .header__info {
       background: $lightgrey;
       @include round-corners;
       margin: 0 .3em;
       height: 100%;
       border: 1px solid $medgrey;
+      opacity: 1;
       @include fastTransition-all;
       &:hover {
         background: rgba(255, 255, 255, 1);
       }
     }
+    .header__info {
+      padding: .3em;
+      min-width: 60px;
+      text-align: center;
+      display: inline-block;
+      span {
+        padding: .7em 0 .3em;
+        font-size: 1em;
+        font-weight: 400;
+        color: $darkgrey;
+      }
+      .icon-angle {
+        margin-bottom: .9em;
+      }
+      .icon-angle::before {
+        font-size: 2em;
+        margin-left: 0;
+        display: block;
+        transform: rotate(180deg);
+        @include fastTransition-all;
+      }
+      @media (min-width: 1025px) {
+        display: none;
+      }
+    }
+
+    &.active > .header__info > .icon-angle::before {
+        transform: rotate(-360deg);
+        @include fastTransition-all;
+    }
+
     .header__refresh {
       color: $darkgrey;
       line-height: 1.4;
@@ -174,7 +198,7 @@
       font-weight: 400;
       color: $darkgrey;
       display: block;
-      margin-bottom: 1.8em;
+      margin-bottom: 1.1em;
     }
     svg {
       stroke: $medblue;