diff --git a/app/common/styles/base/forms.scss b/app/common/styles/base/forms.scss
index 3699521..f04e827 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -1,28 +1,31 @@
-label, legend {
-  font-size:1em;
+label,
+legend {
+  font-size: 1em;
   font-weight: 300;
   margin: 0;
   .error {
-    font-size: .9em;
+    font-size: 0.9em;
   }
 }
 
-.label__helper-text {
+// TODO: Start replacing use of label__helper-text
+.label__helper-text,
+.form__helper-text {
   color: $text-02;
   line-height: 1.2;
   font-size: 0.9em;
   margin-bottom: 0.4em;
 }
 
-input[type='email'],
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='tel'],
-input[type='url'],
-input[type='text'],
-input[type='date'],
-input[type='time'],
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="text"],
+input[type="date"],
+input[type="time"],
 textarea {
   border-radius: 0px;
   border: 1px solid $border-color-02;
@@ -66,37 +69,56 @@
 }
 
 .form-error {
-  margin-bottom: .7em;
+  margin-bottom: 0.7em;
   font-size: 0.8rem;
   color: $status-error;
-  height:1rem;
+  height: 1rem;
   display: block;
   visibility: hidden;
+  // TODO: Create state rulesets rather than relying on one off solutions
   .visible {
     visibility: visible;
   }
 }
 //Foundation overwrite
-[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
+[type="color"],
+[type="date"],
+[type="datetime-local"],
+[type="datetime"],
+[type="email"],
+[type="month"],
+[type="number"],
+[type="password"],
+[type="search"],
+[type="tel"],
+[type="text"],
+[type="time"],
+[type="url"],
+[type="week"],
+textarea {
   border-color: $border-color-02;
 }
 
 input[readonly],
-input[readonly]:focus{
+input[readonly]:focus {
   box-shadow: 0 0 0;
   background: $background-03;
   border: 1px solid $border-color-02;
 }
 
-textarea { padding: .2em;
-  height: auto;}
-input[type="submit"], .submit {
+textarea {
+  padding: 0.2em;
+  height: auto;
+}
+
+input[type="submit"],
+.submit {
   margin: 1em 0;
   width: 100%;
 }
 
-//Custom select
-select{
+// Custom select
+select {
   border-radius: 0px;
   height: auto;
   padding-right: 0.5rem; //override inherited Foundation style
@@ -121,3 +143,70 @@
   color: $status-error;
   font-size: 0.9em;
 }
+
+/**
+ * Used for basic vertically stacked forms
+ * that do not need a grid for layout
+ * Should only wrap form elements and label
+ * Helper text shoul not be wrapped in the
+ * form-field container
+ * EX: Manage Power Usage
+ * Markup
+    <div class="section-content">
+      <p class="form__helper-text">Some helper text</p>
+      <div class=" form__field">
+        <label for="power-cap" class="content-label">POWER CAP VALUE IN WATTS</label>
+        <input id="power-cap type="number" />
+      </div>
+    </div>
+  */
+
+.form__field {
+  min-width: 150px;
+  max-width: 240px;
+}
+
+.form__field--large {
+  max-width: 330px;
+}
+
+// TODO Replace form-actions with form__actions. see below
+.form-actions {
+  width: 100%;
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color-01;
+
+  button {
+    display: block;
+    float: right;
+    margin: 0.5em 0 0 1em;
+  }
+}
+
+/**
+ * Use to wrap the cancel and submit buttons on
+ * a form to create the top border and white space
+ * Markup
+  <div class="form-actions">
+    <button type="submit" class="btn-primary" ng-click="setPowerCap()">
+      Save settings
+    </button>
+    <button type="button" class="btn btn-secondary" ng-click="refresh()">
+      Cancel
+    </button>
+  </div>
+ */
+
+.form__actions {
+  margin-top: 3rem;
+  padding-top: 1rem;
+  border-top: 1px solid $border-color-01;
+  display: flex;
+  justify-content: flex-end;
+
+  button:first-of-type {
+    order: 1;
+    margin-left: 1rem;
+  }
+}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 87708da..4c5bfb1 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -191,3 +191,11 @@
     animation: row-flash 1s infinite; /* IE 10+ */
   }
 }
+
+@mixin label {
+  color: $text-02;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 0.75em;
+  margin-bottom: 0.5rem;
+}
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index f0a5e20..baa6a60 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -20,29 +20,35 @@
   color: $text-01;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: 2.25rem;
   font-weight: 500;
-  padding-top: .5rem;
+  padding-top: 0.5rem;
+  margin-bottom: 3rem;
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: 1.25rem;
   font-weight: bold;
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: 1rem;
   font-weight: bold;
 }
 
-h4, .h4 {
-  font-size: .875rem;
+h4,
+.h4 {
+  font-size: 0.875rem;
   font-weight: bold;
 }
 
-h5, .h5 {
-  font-size: .875rem;
+h5,
+.h5 {
+  font-size: 0.875rem;
   font-weight: 500;
   color: $text-02;
 }
@@ -55,4 +61,4 @@
   font-family: "Courier New", Helvetica, arial, sans-serif;
   font-weight: 700;
   margin-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 7297628..26f138a 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -75,10 +75,6 @@
   margin-top: 0 !important;
 }
 
-.btm-border-grey {
-  border-bottom: 1px solid $border-color-02;
-}
-
 .transitionAll {
   transition: all .5s ease;
 }
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index 9d6ea48..c1bff93 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -50,12 +50,14 @@
     &:after {
       display: none;
     }
+    .toggle-container {
+      float: right;
+    }
   }
   &:last-child {
     border-bottom: 0;
   }
   .float-right {
-    display:inline-block;
     float: right;
     @media(min-width: 1024px) and (max-width: 1140px) {
       display: block;
@@ -77,9 +79,3 @@
     color: $status-error;
   }
 }
-
-//toggle switch
-.quick-links__item .toggle label {
-  transform: translateY(-2px);
-  margin-right: 0;
-}
diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss
index ae8c276..814da91 100644
--- a/app/common/styles/elements/toggle-switch.scss
+++ b/app/common/styles/elements/toggle-switch.scss
@@ -1,8 +1,5 @@
 @mixin marginTransition {
-  -webkit-transition: margin 0.4s, background 0.4s;
-  -moz-transition: margin 0.4s, background 0.4s;
-  -o-transition: margin 0.4s, background 0.4s;
-  transition: margin 0.4s, background 0.4s;
+  transition: margin $duration--moderate-01, background $duration--moderate-01;
 }
 
 @mixin borderRadius {
@@ -11,11 +8,13 @@
   border-radius: 60px;
 }
 
+.toggle-container {
+  display: flex;
+}
+
 .toggle-switch {
   position: absolute;
-  left: 20px;
-  height: 1px;
-  width: 1px;
+  top: 0;
   opacity: 0;
 }
 
@@ -32,22 +31,25 @@
 
 .toggle label {
   text-indent: -9999px;
-  transform: translateY(-50%); // keeps switch centered
+  margin-right: 0.3rem;
+}
+
+input.toggle-switch__round-flat:focus + label {
+  outline: 1px solid $primary-accent;
+  outline-offset: 3px;
 }
 
 input.toggle-switch__round-flat + label {
   padding: 2px;
-  width: 50px;
-  height: 30px;
+  width: 43px;
+  height: 22px;
   background-color: $border-color-02;
   @include borderRadius;
   @include marginTransition;
 }
 
-input.toggle-switch__round-flat:focus + label {
-  box-shadow: 0 0 4px 4px $primary-accent;
-}
-input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
+input.toggle-switch__round-flat + label:before,
+input.toggle-switch__round-flat + label:after {
   display: block;
   position: absolute;
   content: "";
@@ -65,7 +67,7 @@
   top: 4px;
   left: 4px;
   bottom: 4px;
-  width: 20px;
+  width: 15px;
   background-color: $border-color-02;
   -webkit-border-radius: 52px;
   -moz-border-radius: 52px;
@@ -76,9 +78,9 @@
   background-color: $primary-accent;
 }
 input.toggle-switch__round-flat:checked + label:before {
-  background-color: $background-02;
+  background-color: $primary-accent;
 }
 input.toggle-switch__round-flat:checked + label:after {
   margin-left: 20px;
-  background-color: $primary-accent;
-}
\ No newline at end of file
+  background-color: $primary-light;
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 61e082b..8c8b916 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -2,15 +2,6 @@
 $nav__toplvlWidth: 120px;
 $nav__seclvlWidth: 240px;
 
-// Page header
-.page-header {
-  width: 100%;
-  position: relative;
-  border-bottom: 1px solid $border-color-02;
-  margin: 0.5em 0 2.2em;
-  padding-left: 0;
-}
-
 // Main element class
 .content__container {
   margin-left: $nav__toplvlWidth;
@@ -41,15 +32,22 @@
   margin-top: 2em;
 }
 
+// TODO: Determine if label and content-label are the same - remove generic element selector
 .content-label,
 label {
-  color: $text-02;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 0.75em;
-  margin-bottom: 0;
+  @include label;
 }
 
+// TODO: Remove and replace with page and page-title pattern
+// Page header
+.page-header {
+  width: 100%;
+  position: relative;
+  border-bottom: 1px solid $border-color-02;
+  margin: 0.5em 0 2.2em;
+  padding-left: 0;
+}
+// TODO: Remove and replace with the .section and .section-title pattern
 .subhead {
   width: 100%;
   border-bottom: 1px solid $border-color-01;
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3593780..3e0f0da 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -1,3 +1,8 @@
+/**
+ * Application header styles
+ * Should only be used for the application header
+ */
+
 $logoHeight: 30px;
 $logoMaxHeight: 100px;
 $logoMaxWidth: 125px;
@@ -38,7 +43,7 @@
 .header__logout {
   float: right;
   color: $primary-light;
-  font-size: .9em;
+  font-size: 0.9em;
   text-decoration: none;
   padding: 1em;
   font-weight: 400;
@@ -61,7 +66,7 @@
     font-size: 1.5em;
     font-weight: 500;
     color: $text-02;
-    padding: .4em 0 0 1em;
+    padding: 0.4em 0 0 1em;
     height: 100%;
     background: transparent;
     max-width: 600px;
@@ -78,7 +83,7 @@
     }
   }
   .logo__wrapper {
-    padding-top: .5em;
+    padding-top: 0.5em;
   }
 
   .header__logo {
@@ -97,7 +102,7 @@
     right: -480px;
     bottom: 0;
     z-index: 100;
-    margin: .3em 0;
+    margin: 0.3em 0;
     background: $primary-light;
     @include fastTransition-all;
     &.active {
@@ -111,12 +116,13 @@
       color: $primary-dark;
       font-size: 1em;
     }
-    a, p {
+    a,
+    p {
       display: block;
       float: left;
       text-decoration: none;
       color: $text-02;
-      padding: 1.250em;
+      padding: 1.25em;
       height: 100%;
       font-size: 0.875em;
       font-weight: 400;
@@ -125,7 +131,7 @@
         display: block;
         font-size: 1rem;
         font-weight: bold;
-        margin-top: .5em;
+        margin-top: 0.5em;
       }
     }
   }
@@ -137,7 +143,7 @@
   .header__multi-server {
     background: $background-02;
     @include round-corners;
-    margin: 0 .3em;
+    margin: 0 0.3em;
     height: 100%;
     border: 1px solid $border-color-01;
     opacity: 1;
@@ -148,8 +154,8 @@
   }
 
   .header__multi-server {
-    padding: .5em;
-    padding-top: .8em;
+    padding: 0.5em;
+    padding-top: 0.8em;
     float: left;
     margin-top: 10px;
     margin-right: -10px;
@@ -167,12 +173,12 @@
   }
   .header__functions {
     .header__info {
-      padding: .3em;
+      padding: 0.3em;
       min-width: 40px;
       text-align: center;
       float: left;
       span {
-        padding: .7em 0 .3em;
+        padding: 0.7em 0 0.3em;
         font-size: 1em;
         font-weight: 400;
         color: $text-02;
@@ -214,7 +220,7 @@
       font-weight: 400;
       color: $text-02;
       display: block;
-      margin-bottom: .2em;
+      margin-bottom: 0.2em;
     }
     .icon {
       display: block;
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 4183519..8a33213 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,2 +1,5 @@
-@import 'header';
-@import 'content';
+@import "header";
+@import "page";
+@import "section";
+@import "content";
+@import "list";
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
new file mode 100644
index 0000000..9be7522
--- /dev/null
+++ b/app/common/styles/layout/list.scss
@@ -0,0 +1,18 @@
+/**
+ * Used for any key value pair
+ * Markup
+   <dl class="list-pair">
+     <dt>Term</dt>
+     <dd>Definition associated with the term</dd>
+   </dl>
+ */
+
+.list-pair {
+  dt {
+    @include label;
+  }
+  dd {
+    @include fontCourierBold;
+    margin-bottom: 0;
+  }
+}
diff --git a/app/common/styles/layout/page.scss b/app/common/styles/layout/page.scss
new file mode 100644
index 0000000..2ce98d5
--- /dev/null
+++ b/app/common/styles/layout/page.scss
@@ -0,0 +1,15 @@
+/**
+ * Used for page layout. This should be used for the page container
+ * Mark up
+ <div class="page">
+   <h1 class="page-title">Page Title</h1>
+   ...
+ </div>
+ */
+.page {
+  max-width: 1080px;
+}
+
+.page-title {
+  margin-bottom: 3rem;
+}
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
new file mode 100644
index 0000000..e92b096
--- /dev/null
+++ b/app/common/styles/layout/section.scss
@@ -0,0 +1,28 @@
+/**
+ * Used for section layout. This should be used for the page container
+ * Mark up
+ <div class="section">
+   <h2 class="section-title">Section Title</h2>
+   <div class="section-content">
+     ...
+    </div>
+    <div class="section-content">
+     ...
+    </div>
+ </div>
+ */
+
+.section {
+  margin-bottom: 3rem;
+}
+
+.section-title {
+  border-bottom: 1px solid $border-color-01;
+  padding-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.section-content {
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+}
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index 34e5611..ffbf0a1 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -110,16 +110,21 @@
           <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd>
         </dl>
         <div class="quick-links__item no-icon">
-          <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span><span
-              ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
-          <div class="toggle inline float-right">
-            <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
-              tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
-              ng-disabled="dataService.server_unreachable">
-            <label for="toggle__switch-round" tabindex="0">Server LED is <span
-                class="led-switch__status">{{dataService.LED_state}}</span></label>
-          </div>
+          <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span>
+            <span ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
+          <div class="toggle-container">
+            <div class="toggle">
+              <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
+                tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
+                ng-disabled="dataService.server_unreachable">
+              <label for="toggle__switch-round" tabindex="0">Server LED is <span
+                  class="uid-switch__status">{{dataService.LED_state}}</span></label>
+            </div>
+          <span>
+              {{ dataService.LED_state == 'on' ? "On" : "Off" }}
+          </span>
         </div>
+      </div>
         <a href="#/server-control/remote-console" class="no-icon quick-links__item">
           <p class="inline quick-links__label">Serial over LAN console</p>
           <icon file="icon-launch.svg" class="float-right"></icon>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index ed010aa..627ecf5 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -53,4 +53,8 @@
 
 .modal__error {
   color: $status-error;
+}
+
+dl {
+  margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index 62ca3da..b0760e0 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -1,45 +1,67 @@
 <loader loading="loading"></loader>
-<div id="power-usage">
-  <div class="row column">
-    <h1>Manage Power Usage</h1>
-  </div>
+<div id="power-usage" class="page">
+  <h1 class="page-title">Manage Power Usage</h1>
   <form class="power-usage__form" role="form" action="">
-    <section class="row column">
-      <div class="page-header">
-        <h2 class="bold">Power information</h2>
+    <section class="section">
+      <h2 class="section-title">Power information</h2>
+      <dl class="list-pair">
+        <dt>Power Consumption</dt>
+        <dd>{{ power_consumption }}</dd>
+      </dl>
+    </section>
+    <section class="section">
+      <h2 class="section-title">
+        Server power cap setting
+      </h2>
+      <div class="section-content">
+        <p>
+          Set a power cap to keep power consumption at or below the specified
+          value in watts.
+        </p>
+        <div class="toggle-container">
+          <div class="toggle">
+            <input
+              id="toggle__switch-round"
+              class="toggle-switch toggle-switch__round-flat"
+              type="checkbox"
+              tabindex="0"
+              ng-model="power_cap.PowerCapEnable"
+              ng-checked="power_cap.PowerCapEnable"
+            />
+            <label for="toggle__switch-round" tabindex="0"
+              >Server power cap setting is
+              <span class="uid-switch__status">{{
+                power_cap.PowerCapEnable ? "on" : "off"
+              }}</span></label
+            >
+          </div>
+          <span>
+            {{ power_cap.PowerCapEnable ? "On" : "Off" }}
+          </span>
+        </div>
       </div>
-      <fieldset>
-          <ul class="power-usage__metadata-wrapper">
-            <li class="power-usage__metadata-block">
-              <p class="content-label">Power Consumption</p>
-              <p class="courier-bold">{{power_consumption}}</p>
-            </li>
-            <li class="power-usage__metadata-block">
-              <div class="toggle inline">
-                <input id="toggle__switch-round"
-                        class="toggle-switch toggle-switch__round-flat"
-                        type="checkbox"
-                        tabindex="0"
-                        ng-model="power_cap.PowerCapEnable"
-                        ng-checked="power_cap.PowerCapEnable">
-                <label for="toggle__switch-round" tabindex="0">Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></label>
-              </div>
-              <div class="power-usage__switch-label inline">
-                <p>Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></p>
-                <p>Set a power cap to keep power consumption at or below the specified value in watts.</p>
-              </div>
-              <div class="small-12 large-4">
-                <label for="power-cap" class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</label>
-                <input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable"  ng-model="power_cap.PowerCap"/>
-              </div>
-            </li>
-          </ul>
-      </fieldset>
-      <div class="power-usage__submit-wrapper">
-        <button type="button" class="btn-primary inline" ng-click="setPowerCap()">Save settings</button>
-        <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+      <div class="section-content form__field">
+        <label for="power-cap" class="content-label"
+          >POWER CAP VALUE IN WATTS</label
+        >
+        <input
+          id="power-cap"
+          type="number"
+          min="100"
+          max="10000"
+          step="1"
+          ng-disabled="!power_cap.PowerCapEnable"
+          ng-model="power_cap.PowerCap"
+        />
       </div>
     </section>
+    <div class="form__actions">
+      <button type="submit" class="btn-primary" ng-click="setPowerCap()">
+        Save settings
+      </button>
+      <button type="button" class="btn btn-secondary" ng-click="refresh()">
+        Cancel
+      </button>
+    </div>
   </form>
 </div>
-
diff --git a/app/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html
index 2901d76..c5a56e1 100644
--- a/app/server-control/controllers/server-led-controller.html
+++ b/app/server-control/controllers/server-led-controller.html
@@ -1,28 +1,44 @@
 <div id="led-switch">
-    <div class="row column">
-        <h1>Server LED</h1>
-        <div class="page-header">
-            <h2>LED light control</h2>
-        </div>
+  <div class="row column">
+    <h1>Server LED</h1>
+    <div class="page-header">
+      <h2>LED light control</h2>
     </div>
-
-    <div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}">
-        <div class="btm-border-grey">
-            <div class="toggle inline">
-                <input id="toggle__switch-round"
-                       class="toggle-switch toggle-switch__round-flat"
-                       type="checkbox"
-                       tabindex="0"
-                       ng-click="toggleLED()"
-                       ng-checked="dataService.LED_state == 'on'"
-                       ng-disabled="dataService.server_unreachable"
-                       >
-                <label for="toggle__switch-round" tabindex="0">Server indicator is <span class="led-switch__status">{{dataService.LED_state}}</span></label>
-            </div>
-            <div class="led-switch__label inline">
-                <p>Server LED light is <span class="led-switch__status">{{dataService.LED_state}}</span></p>
-                <p>Turn the LED light on or off. If the server has an LCD, use this control to display text (on) or not to display text (off) on the LCD.</p>
-            </div>
-        </div>
+  </div>
+  <div
+    class="column"
+    ng-class="{disabled: dataService.server_unreachable || dataService.loading}"
+  >
+    <div class="led-switch__label">
+      <h3>
+        Server LED light
+      </h3>
+      <p>
+        Turn the LED light on or off. If the server has an LCD, use this control
+        to display text (on) or not to display text (off) on the LCD.
+      </p>
     </div>
+    <div class="toggle-container">
+      <div class="toggle">
+        <input
+          id="toggle__switch-round"
+          class="toggle-switch toggle-switch__round-flat"
+          type="checkbox"
+          tabindex="0"
+          ng-click="toggleLED()"
+          ng-checked="dataService.LED_state == 'on'"
+          ng-disabled="dataService.server_unreachable"
+        />
+        <label for="toggle__switch-round" tabindex="0"
+          >Server LED indicator is
+          <span class="toggle-switch__status">{{
+            dataService.LED_state
+          }}</span></label
+        >
+      </div>
+      <span>
+        {{ dataService.LED_state == "on" ? "On" : "Off" }}
+      </span>
+    </div>
+  </div>
 </div>
diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss
index 5e8a995..7171a7e 100644
--- a/app/server-control/styles/index.scss
+++ b/app/server-control/styles/index.scss
@@ -2,5 +2,4 @@
 @import "./power-operations.scss";
 @import "./remote-console.scss";
 @import "./server-led.scss";
-@import "./power-usage.scss";
 @import "./kvm.scss";
diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
deleted file mode 100644
index 0f612ae..0000000
--- a/app/server-control/styles/power-usage.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// Power Usage SCSS
-.power-usage__form {
-
-  input {
-    margin-bottom: 0em;
-  }
-
-  fieldset {
-    padding-left: 1.8em;
-  }
-
-  .power-usage__switch-label {
-    padding-bottom: .5em;
-  }
-
-  .power-usage__switch-label p {
-    margin: 0;
-    &:first-child {font-weight: 700;}
-  }
-
-  .power-usage__metadata-wrapper {
-    margin: 0;
-    padding: 0;
-  }
-
-  .power-usage__metadata-block {
-    min-width: 47%;
-    margin-bottom: 1.8em;
-    margin-right: .7em;
-    display: inline-block;
-    white-space: normal;
-    word-break: break-all;
-    @include mediaQuery(small) {
-      float: left;
-    }
-  }
-
-  .power-usage__submit-wrapper {
-    width: 100%;
-    margin-top: 3em;
-    padding-top: 1em;
-    border-top: 1px solid $border-color-01;
-    button {
-      float: right;
-      margin: .5em;
-    }
-  }
-}
diff --git a/app/server-control/styles/server-led.scss b/app/server-control/styles/server-led.scss
index 9807c74..26136fa 100644
--- a/app/server-control/styles/server-led.scss
+++ b/app/server-control/styles/server-led.scss
@@ -1,12 +1,13 @@
 // Server LED
 
 #led-switch {
-  .switch {margin-left: 1.7em;}
   .led-switch__label {
     padding-bottom: 1.5em;
   }
   .led-switch__label p {
     margin: 0;
-    &:first-child {font-weight: 700;}
+    &:first-child {
+      font-weight: 700;
+    }
   }
 }