diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 1195f6c..b7747bf 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -1,12 +1,17 @@
+// Helper text
 .form-text {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("800");
+  color: gray("700")!important;
 }
 
+// Legend label
 .col-form-label {
   color: gray("800");
-  font-size: 14px;
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
 }
 
 .form-group {
@@ -14,24 +19,69 @@
 }
 
 .custom-select,
-.custom-control-label,
+.form-control,
+.input-group-text {
+  border-color: gray("500") !important;
+  background-color: gray("100");
+}
+
+.custom-select,
 .form-control {
-  //important needed to override validation colors on radio labels
-  color: theme-color("dark") !important;
-  font-size: 16px;
-  border-color: gray("400") !important;
+  &:active {
+    border: 1px solid $primary!important;
+  }
+  &:focus {
+    color: theme-color("dark");
+    background-color: gray("100");
+    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px theme-color("primary") !important;
+  }
+  &:disabled {
+    background-color: gray("400");
+    color: gray("600");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
   &.is-invalid,
   &:invalid {
-    border-bottom: 2px solid theme-color("danger") !important;
+    border: 1px solid theme-color("danger") !important;
   }
 }
 
+.custom-select,
+.custom-control-label,
+.form-control {
+  color: theme-color("dark");
+  font-size: 1rem;
+}
+
+// Inverted form colors
+.form-background {
+  background-color: gray("100");
+  .custom-select,
+  .form-control {
+    background-color: $white;
+    &:focus {
+      background-color: $white;
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
+  }
+}
+
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
 .custom-control {
   .custom-control-input[disabled=disabled] {
     & + .custom-control-label {
       // Disabled label for checkbox, radio,
       // switch bootstrap form components
-      color: gray("700")!important;
+      color: gray("600")!important;
     }
   }
 }
@@ -50,7 +100,3 @@
     fill: currentColor;
   }
 }
-
-.form-background {
-  background-color: gray("200");
-}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/helpers/_variables.scss b/src/assets/styles/bmc/helpers/_variables.scss
index ea300ec..eff2924 100644
--- a/src/assets/styles/bmc/helpers/_variables.scss
+++ b/src/assets/styles/bmc/helpers/_variables.scss
@@ -8,4 +8,6 @@
 // OpenBMC Custom Variables
 $responsive-layout-bp: lg;
 $header-height: 56px;
-$navigation-width: 300px;
\ No newline at end of file
+$navigation-width: 300px;
+$form-label-font-size: .875rem;
+$form-line-height: 1.25rem;
\ No newline at end of file
diff --git a/src/views/Control/ServerPowerOperations/BootSettings.vue b/src/views/Control/ServerPowerOperations/BootSettings.vue
index 8f54cbb..c56bcf5 100644
--- a/src/views/Control/ServerPowerOperations/BootSettings.vue
+++ b/src/views/Control/ServerPowerOperations/BootSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="boot-settings p-3">
+  <div class="form-background p-3">
     <b-form novalidate @submit.prevent="handleSubmit">
       <b-form-group
         :label="
@@ -145,9 +145,3 @@
   }
 };
 </script>
-
-<style lang="scss" scoped>
-.boot-settings {
-  background-color: gray('200');
-}
-</style>