diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index ac03497..ee3d0d0 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -2,30 +2,90 @@
 <div id="configuration-snmp">
   <div class="row column">
     <h1>SNMP settings</h1>
+    <div class="small-12 snmp_description">
+      Set the Simple Network Management Protocol (SNMP) with a host name or IP address and a port.
+    </div>
+    <div class="page-header">
+      <h2>Managers</h2>
+    </div>
   </div>
-  <form class="snmp__form" role="form" action="">
-      <div class="page-header">
-        <h2>Set the Simple Network Management Protocol (SNMP)</h2>
-      </div>
-      <fieldset>
-        <div class="row column snmp__managers-wrap">
-          <div class="snmp__managers" ng-repeat="manager in managers track by $index">
-            <div class="snmp__manager-field">
-              <label>SNMP Manager Server</label>
-              <input class="inline" id="snmp-manager{{$index+1}}-address" ng-change="manager.updateAddress = true" type="text" ng-model="manager.address" ng-blur="managers[$index].address = manager.address"/>
-            </div>
-            <div class="snmp__manager-field">
-              <label>Port</label>
-              <input class="inline" id="snmp-manager{{$index+1}}-port" type="text" ng-change="manager.updatePort = true" ng-model="manager.port" ng-blur="managers[$index].port = manager.port"/>
-            </div>
-          <button class="snmp__manager-remove" ng-click="removeSNMPManager($index)">Remove</button>
-          </div>
-          <button type="button" class="btn-primary inline" ng-click="addNewSNMPManager()">Add SNMP manager</button>
+  <div class="row column">
+    <div class="small-8">
+      <div class="row column manager_group">
+        <div class="small-5 snmp__address">
+          <h3>Host name or IP Address</h3>
         </div>
-      </fieldset>
+        <div class="small-5 snmp__port label">
+          <h3>Port</h3>
+        </div>
+      </div>
+      <div class="row column manager_group empty" ng-if="managers.length <1">
+        No managers have been added yet.
+      </div>
+      <form id="snmp__form" name="snmp__form" novalidate>
+        <div class="row column manager_group" ng-form="manager_group" ng-repeat="manager in managers track by $index">
+          <div class="small-11 snmp__fields">
+            <div class="row column">
+              <div class="small-10">
+                <div class="row column">
+                  <div class="small-offset-6 small-6 help__text snmp__port">
+                    Value must be between 0-65,535
+                  </div>
+                </div>
+                <div class="row column" ng-class="{'submitted':submitted}">
+                  <div class="small-6 snmp__address">
+                    <input id="snmp-manager{{$index+1}}-address"
+                           name="snmp-manager{{$index+1}}-address"
+                           type="text"
+                           ng-change="manager.updateAddress=true"
+                           ng-model="manager.address"
+                           required />
+                    <div ng-messages="manager_group['snmp-manager'+($index+1)+'-address'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-address'].$touched || submitted}">
+                      <p ng-message="required" role="alert">Field is required</p>
+                    </div>
+                  </div>
+                  <div class="small-6 snmp__port">
+                    <input id="snmp-manager{{$index+1}}-port"
+                           name="snmp-manager{{$index+1}}-port"
+                           type="number"
+                           min="0"
+                           max="65535"
+                           step="1"
+                           ng-change="manager.updatePort=true"
+                           ng-model="manager.port"
+                           required/>
+                    <div ng-messages="manager_group['snmp-manager'+($index+1)+'-port'].$error" class="form-error" ng-class="{'visible': manager_group['snmp-manager'+($index+1)+'-port'].$touched || submitted}">
+                      <div ng-message-exp="['min', 'max', 'number', 'step']">
+                        Invalid format
+                      </div>
+                      <p ng-message="required" role="alert">Field is required</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="small-2 align-self-center snmp__buttons">
+                <button class="edit_button" type="button">
+                  <img src="../../assets/images/icon-edit-blue.svg" alt="Edit">
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="small-1 align-self-center snmp__buttons trash">
+            <button class="trash_button" type="button" ng-click="removeSNMPManager($index)">
+              <img src="../../assets/images/icon-trashcan-blue.svg" alt="Remove">
+            </button>
+          </div>
+        </div>
+        <div class="row column">
+          <button class="btn-add" type="button" ng-click="submitted=false; addNewSNMPManager();"><img class="add__icon" src="../../assets/images/icon-plus.svg" alt=""/> Add manager</button>
+        </div>
+      </form>
+    </div>
+  </div>
+  <div class="row column">
     <div class="snmp__submit-wrapper">
-      <button type="button" class="btn-primary inline" ng-click="setSNMP()">Save settings</button>
+      <button type="button" ng-click="submitted=true;  snmp__form.$valid && setSNMP();" class="btn-primary inline">Save settings</button>
       <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
     </div>
-  </form>
-</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/configuration/controllers/snmp-controller.js b/app/configuration/controllers/snmp-controller.js
index 9d71765..67e210f 100644
--- a/app/configuration/controllers/snmp-controller.js
+++ b/app/configuration/controllers/snmp-controller.js
@@ -60,24 +60,19 @@
         $scope.loading = true;
         var promises = [];
 
-        // Interate in reverse so can splice
+        // Validate that no field are empty and port is valid. Port value is
+        // undefined if it is an invalid number.
+        for (var i in $scope.managers) {
+          if (!$scope.managers[i].address || !$scope.managers[i].port) {
+            $scope.loading = false;
+            toastService.error('Cannot save. Please resolve errors on page.');
+            return;
+          }
+        }
+        // Iterate in reverse so can splice
         // https://stackoverflow.com/questions/9882284/looping-through-array-and-removing-items-without-breaking-for-loop
         var i = $scope.managers.length;
         while (i--) {
-          // Remove any SNMP Manager with an empty address and port
-          if (!$scope.managers[i].address && !$scope.managers[i].port) {
-            $scope.removeSNMPManager(i);
-            continue;
-          }
-
-          // Throw an error if only 1 of the fields is filled out
-          if (!$scope.managers[i].address || !$scope.managers[i].port) {
-            // TODO: Highlight the field that is empty
-            $scope.loading = false;
-            toastService.error('All fields are required.');
-            return;
-          }
-
           // If the manager does not have a 'path', it is a new manager
           // and needs to be created
           if (!$scope.managers[i].path) {
@@ -104,7 +99,7 @@
         $q.all(promises)
             .then(
                 function() {
-                  toastService.success('SNMP Managers set.');
+                  toastService.success('SNMP settings have been saved.');
                 },
                 function(errors) {
                   toastService.error('Unable to set SNMP Managers.');
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
index 1afefd0..47dc80f 100644
--- a/app/configuration/styles/snmp.scss
+++ b/app/configuration/styles/snmp.scss
@@ -1,51 +1,107 @@
-// SNMP SCSS
-
-.snmp__form {
-
-  fieldset {
-    padding-left: 1.8em;
+#configuration-snmp {
+  .row {
+    padding-left: 0;
   }
-   .snmp__managers {
-    padding-bottom: 1.5em;
+  .snmp_description {
+    padding:1em 0 1em 0;
   }
-
-   .snmp__manager-field {
-    display:inline-block;
-    padding-right: 4em;
-    width: 350px;
-    padding-top: .6em;
-    padding-left: 0em;
+  .help__text {
+    font-size: 0.8rem;
+    color: $disabled-row-txt;
+    padding-top: .3em;
+    display: none;
   }
-
-  .snmp__metadata-wrapper {
-    margin: 0;
+  .form-error{
+    display: none;
+  }
+  .manager_group {
+    border-bottom: 1px solid $lightbg__grey;
+    &.ng-invalid {
+      input {
+        color: black;
+        border-style: solid;
+        pointer-events: auto;
+      }
+      .help__text {
+        display: block;
+      }
+      .form-error {
+        display: block;
+      }
+    }
+    &.empty {
+      color: $disabled-row-txt;
+      padding: 1em 0 1em 0;
+    }
+  }
+  .snmp__port {
+    padding: .3em 0 .3em 1em;
+    &.label {
+      padding: .3em 0 .3em 0em;
+    }
+  }
+  .snmp__address {
+    padding: .3em 1em .3em 0;
+  }
+  .snmp__fields {
+    input {
+      border-style: none;
+      pointer-events: none;
+      color: $disabled-row-txt;
+      height: 2.4em;
+    }
+    &:focus-within {
+      input {
+        color: $black;
+        border-style: solid;
+        pointer-events: auto;
+      }
+      .form-error {
+        display: block;
+      }
+      .help__text {
+        display: block;
+      }
+    }
+  }
+  .snmp__buttons {
+    text-align: right;
+    padding-right: .5em;
+    &.trash{
+      text-align: left;
+    }
+    button{
+      margin:.3em;
+      img{
+        width: 100%;
+        height:100%;
+      }
+    }
+  }
+  .trash_button {
     padding: 0;
+    width: 1.3em;
+    height: 1.3em;
   }
-
-  .snmp__managers-wrap{
-    padding-bottom: 1em;
-    padding-top: 1em;
-    padding-left: 3em;
-    padding-right: 4em;
+  .edit_button {
+    padding: 0;
+    width: 1.3em;
+    height: 1.2em;
   }
-
+  .btn-add {
+    &:focus {
+      outline:0;
+    }
+    margin-top: 1em;
+    color: $primebtn__bg;
+    padding: 2em 0 3em 0;
+  }
   .snmp__submit-wrapper {
     width: 100%;
-    margin-top: 3em;
-    padding-top: 1em;
     border-top: 1px solid $medgrey;
     button {
       float: right;
       margin: .5em;
     }
   }
-  .snmp__manager-remove {
-    display:inline-block;
-    color: $medblue;
-    height: 2.1em;
-    opacity: 1;
-    &:hover {
-      cursor: pointer;
-    }
-  }
 }