From 22dd0b865aada27dfc2529f70af15a235e10ee55 Mon Sep 17 00:00:00 2001
From: Pavel Blagodov <stochmail@gmail.com>
Date: Fri, 19 Aug 2016 15:24:52 +0300
Subject: [PATCH] spock-ui: update look and feel for servers tab

Change-Id: Ic35ac1dbd1601abfb8b9bb6fdcb4c1cd4e7364d0
Reviewed-on: http://review.couchbase.org/65125
Tested-by: Pavel Blagodov <stochmail@gmail.com>
Reviewed-by: Dave Finlay <dave.finlay@couchbase.com>
---
 .../mn_memory_quota/mn_memory_quota.html      |  88 +++--
 .../directives/mn_services/mn_services.html   |  44 ++-
 .../mn_storage_mode/mn_storage_mode.html      |  47 ++-
 .../mn_vertical_bar/mn_vertical_bar.html      |   4 +-
 priv/public/ui/app/css/cbui-base.css          |  13 +-
 priv/public/ui/app/css/cbui-components.css    |  82 +++-
 .../add_dialog/mn_servers_add_dialog.html     | 170 ++++----
 .../details/mn_servers_list_item_details.html | 159 ++++----
 .../eject_dialog/mn_servers_eject_dialog.html |  40 +-
 .../mn_servers_failover_dialog.html           | 192 ++++-----
 .../mn_servers/list/mn_servers_list.html      | 370 ++++++++++--------
 .../memory_quota_dialog.html                  |  54 +--
 .../app/mn_admin/mn_servers/mn_servers.html   | 143 +++----
 .../mn_servers_stop_rebalance_dialog.html     |  26 +-
 priv/public/ui/app/template/modal/window.html |   2 +-
 15 files changed, 794 insertions(+), 640 deletions(-)

diff --git a/priv/public/ui/app/components/directives/mn_memory_quota/mn_memory_quota.html b/priv/public/ui/app/components/directives/mn_memory_quota/mn_memory_quota.html
index d84887e115..637327a770 100644
--- a/priv/public/ui/app/components/directives/mn_memory_quota/mn_memory_quota.html
+++ b/priv/public/ui/app/components/directives/mn_memory_quota/mn_memory_quota.html
@@ -14,7 +14,7 @@
   <p>RAM Available: {{::config.totalMemorySize}} mb</p>
 </div>
 <div
-   class="formrow"
+   class="formrow checkbox-list"
    ng-if="config.services"
    mn-services="config">
 </div>
@@ -22,19 +22,21 @@
    class="formrow"
    ng-if="config.displayedServices.kv">
   <label for="kv_ram_quota">Data RAM Quota</label>
-  <input
-     type="number"
-     min="0"
-     id="kv_ram_quota"
-     mn-focus
-     ng-disabled="config.services && !config.services.model.kv || (rbac && !rbac.cluster.pools.write)"
-     ng-model="config.memoryQuota">
-  <small>mb (min {{::config.minMemorySize}})</small>
-  <a class="tooltip text_11"><span>What&#39;s this?</span>
-    <span class="tooltip_msg"><span>
-        Main memory allocation amount for data service per node.
-    </span></span>
-  </a>
+  <div class="form-inline">
+    <input
+       type="number"
+       min="0"
+       id="kv_ram_quota"
+       mn-focus
+       ng-disabled="config.services && !config.services.model.kv || (rbac && !rbac.cluster.pools.write)"
+       ng-model="config.memoryQuota">
+      <small>mb (min {{::config.minMemorySize}})</small>
+      <a class="tooltip text_11"><span>What&#39;s this?</span>
+      <span class="tooltip_msg"><span>
+          Main memory allocation amount for data service per node.
+      </span></span>
+      </a>
+    </div>
   <div
      class="error"
      ng-show="errors.memoryQuota">
@@ -46,19 +48,21 @@
    class="formrow"
    ng-if="config.displayedServices.index">
   <label for="index_ram_quota">Index RAM Quota</label>
-  <input
-     type="number"
-     min="0"
-     id="index_ram_quota"
-     ng-disabled="config.services && !config.services.model.index || (rbac && !rbac.cluster.pools.write)"
-     mn-focus="config.services.model.kv === false"
-     ng-model="config.indexMemoryQuota">
-  <small>mb (min 256)</small>
-  <a class="tooltip text_11"><span>What&#39;s this?</span>
-    <span class="tooltip_msg"><span>
-        Main memory allocation amount for index service per node.
-    </span></span>
-  </a>
+  <div class="form-inline">
+    <input
+       type="number"
+       min="0"
+       id="index_ram_quota"
+       ng-disabled="config.services && !config.services.model.index || (rbac && !rbac.cluster.pools.write)"
+       mn-focus="config.services.model.kv === false"
+       ng-model="config.indexMemoryQuota">
+      <small>mb (min 256)</small>
+      <a class="tooltip text_11"><span>What&#39;s this?</span>
+      <span class="tooltip_msg"><span>
+          Main memory allocation amount for index service per node.
+      </span></span>
+      </a>
+    </div>
   <div
      class="error"
      ng-show="errors.indexMemoryQuota">
@@ -67,22 +71,24 @@
 </div>
 
 <div
-   class="formrow memory-quota"
+   class="formrow"
    ng-if="config.displayedServices.fts">
   <label for="fts_ram_quota">Full Text RAM Quota</label>
-  <input
-     type="number"
-     min="0"
-     id="fts_ram_quota"
-     mn-focus="config.services.model.kv === false && config.services.model.index  === false"
-     ng-disabled="config.services && !config.services.model.fts || (rbac && !rbac.cluster.pools.write)"
-       ng-model="config.ftsMemoryQuota">
-  <small>mb (min 256)</small>
-  <a class="tooltip text_11"><span>What&#39;s this?</span>
-    <span class="tooltip_msg"><span>
-        Main memory allocation amount for full text service per node.
-    </span></span>
-  </a>
+  <div class="form-inline">
+    <input
+       type="number"
+       min="0"
+       id="fts_ram_quota"
+       mn-focus="config.services.model.kv === false && config.services.model.index  === false"
+       ng-disabled="config.services && !config.services.model.fts || (rbac && !rbac.cluster.pools.write)"
+         ng-model="config.ftsMemoryQuota">
+      <small>mb (min 256)</small>
+      <a class="tooltip text_11"><span>What&#39;s this?</span>
+        <span class="tooltip_msg"><span>
+            Main memory allocation amount for full text service per node.
+        </span></span>
+      </a>
+    </div>
   <div
      class="error"
      ng-show="errors.ftsMemoryQuota">
diff --git a/priv/public/ui/app/components/directives/mn_services/mn_services.html b/priv/public/ui/app/components/directives/mn_services/mn_services.html
index c44ecc2f6b..bc5f1ba0d5 100644
--- a/priv/public/ui/app/components/directives/mn_services/mn_services.html
+++ b/priv/public/ui/app/components/directives/mn_services/mn_services.html
@@ -1,14 +1,36 @@
-<label>Services:</label>
-<div class="wizard_services">
-  <input type="checkbox" class="js_service_flag" name="services" value="kv" id="kv_service" ng-model="config.services.model.kv" ng-disabled="config.services.disabled.kv || !isEnterprise" />
-  <label class="label" for="kv_service">Data</label>
-  <input type="checkbox" class="js_service_flag" name="services" value="index" id="index_service" ng-change="onChange(config.services.model.index, 'index')" ng-model="config.services.model.index" ng-disabled="config.services.disabled.index" />
-  <label class="label" for="index_service">Index</label>
-  <input type="checkbox" class="js_service_flag" name="services" value="n1ql" id="n1ql_service" ng-change="onChange(config.services.model.n1ql, 'n1ql')" ng-model="config.services.model.n1ql" ng-disabled="config.services.disabled.n1ql" />
-  <label class="label" for="n1ql_service">Query</label>
-  <input type="checkbox" class="js_service_flag" name="services" value="fts" id="fts_service" ng-change="onChange(config.services.model.fts, 'fts')" ng-model="config.services.model.fts" ng-disabled="config.services.disabled.fts" />
-  <label class="label" for="fts_service">Full Text</label>
-</div>
+<h4>Services</h4>
+<input
+   type="checkbox"
+   value="kv"
+   id="kv_service"
+   ng-model="config.services.model.kv"
+   ng-disabled="config.services.disabled.kv || !isEnterprise">
+<label for="kv_service">Data</label>
+<input
+   type="checkbox"
+   value="index"
+   id="index_service"
+   ng-change="onChange(config.services.model.index, 'index')"
+   ng-model="config.services.model.index"
+   ng-disabled="config.services.disabled.index">
+<label for="index_service">Index</label>
+<input
+   type="checkbox"
+   value="n1ql"
+   id="n1ql_service"
+   ng-change="onChange(config.services.model.n1ql, 'n1ql')"
+   ng-model="config.services.model.n1ql"
+   ng-disabled="config.services.disabled.n1ql">
+<label for="n1ql_service">Query</label>
+<input
+   type="checkbox"
+   value="fts"
+   id="fts_service"
+   ng-change="onChange(config.services.model.fts, 'fts')"
+   ng-model="config.services.model.fts"
+   ng-disabled="config.services.disabled.fts">
+<label for="fts_service">Full Text</label>
+
 <a class="tooltip text_11"><span>What&#39;s this?</span>
   <span class="tooltip_msg" style="width:350px;"><span>
     Only uncheck services you are certain you will NOT use on this node. Services are enabled on a per-node basis.
diff --git a/priv/public/ui/app/components/directives/mn_storage_mode/mn_storage_mode.html b/priv/public/ui/app/components/directives/mn_storage_mode/mn_storage_mode.html
index dc7120506c..882f14a30c 100644
--- a/priv/public/ui/app/components/directives/mn_storage_mode/mn_storage_mode.html
+++ b/priv/public/ui/app/components/directives/mn_storage_mode/mn_storage_mode.html
@@ -1,27 +1,24 @@
-<div class="storage-mode row">
-  <div class="error-container err-indexMemoryQuota" ng-show="errors.storageMode">
-    {{errors.storageMode | mnFormatStorageModeError}}
+<label for="index_ram_quota" ng-hide="noLabel">Index Storage Setting:</label>
+<div class="checkbox-list storage-mode">
+  <div class="indent-1">
+    <input
+       type="radio"
+       value="forestdb"
+       id="storage_mode_forestdb"
+       ng-model="config.storageMode"
+       ng-disabled="isDisabled">
+    <label for="storage_mode_forestdb" class="checkbox">Standard Global Secondary Indexes</label>
+  </div>
+  <div class="indent-1">
+    <input
+       type="radio"
+       value="memory_optimized"
+       id="storage_memory_optimized"
+       ng-model="config.storageMode"
+       ng-disabled="isDisabled">
+    <label for="storage_memory_optimized" class="checkbox">Memory-Optimized Global Secondary Indexes</label>
   </div>
-  <label for="index_ram_quota" ng-hide="noLabel" style="display: inline-block; vertical-align: top;">Index Storage Setting:</label>
-  <div style="display: inline-block;">
-    <div>
-      <input
-        type="radio"
-        value="forestdb"
-        id="storage_mode_forestdb"
-        ng-model="config.storageMode"
-        ng-disabled="isDisabled"
-        >
-      <label for="storage_mode_forestdb" style="width:auto;margin-right:5px;">Standard Global Secondary Indexes</label>
-    </div>
-    <div>
-      <input
-        type="radio"
-        value="memory_optimized"
-        id="storage_memory_optimized"
-        ng-model="config.storageMode"
-        ng-disabled="isDisabled">
-      <label for="storage_memory_optimized" style="width:auto;">Memory-Optimized Global Secondary Indexes</label>
-    </div>
+  <div class="error error-field" ng-show="errors.storageMode">
+    {{errors.storageMode | mnFormatStorageModeError}}
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/priv/public/ui/app/components/directives/mn_vertical_bar/mn_vertical_bar.html b/priv/public/ui/app/components/directives/mn_vertical_bar/mn_vertical_bar.html
index 716c3a4e86..71511222da 100644
--- a/priv/public/ui/app/components/directives/mn_vertical_bar/mn_vertical_bar.html
+++ b/priv/public/ui/app/components/directives/mn_vertical_bar/mn_vertical_bar.html
@@ -1,5 +1,5 @@
 <div class="vertical_bar" ng-if="conf.exist">
   <div class="used" ng-style="{height: conf.height + '%', top: conf.top + '%'}"></div>
 </div>
-<div class="wrap" ng-if="conf.exist">{{conf.value | mnTruncateTo3Digits}}%</div>
-<div class="not_active" ng-if="!conf.exist">N/A</div>
+<span ng-show="conf.exist">{{conf.value | mnTruncateTo3Digits}}%</span>
+<span ng-show="!conf.exist">N/A</span>
diff --git a/priv/public/ui/app/css/cbui-base.css b/priv/public/ui/app/css/cbui-base.css
index 3ae27e0aae..f288c35d75 100644
--- a/priv/public/ui/app/css/cbui-base.css
+++ b/priv/public/ui/app/css/cbui-base.css
@@ -132,6 +132,10 @@ hr {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+.main-content hr {
+  margin-right: -2rem;
+}
+
 img,
 video,
 audio,
@@ -583,6 +587,12 @@ a:active {
   color: #689fde;
 }
 
+a[disabled] {
+    pointer-events: none;
+    color: #afafaf;
+    cursor: "default";
+}
+
 .disabled-link {
   color: #a1a1a1 !important;
   cursor: default !important;
@@ -693,6 +703,7 @@ table th,
 table td {
   font-size: .875rem;
   padding: 1rem;
+  vertical-align: middle;
 }
 
 .border-top {
@@ -1190,4 +1201,4 @@ select.select-small {
 /* background colors ----------------------------------- */
 .grayblue-5 {
   background-color: #f6f7f9;
-}
\ No newline at end of file
+}
diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
index f158ae2009..2bafc38bd5 100644
--- a/priv/public/ui/app/css/cbui-components.css
+++ b/priv/public/ui/app/css/cbui-components.css
@@ -226,12 +226,23 @@ td.node_name a {
   cursor: pointer;
 }
 
-td.dynamic_healthy {
+.node-status {
   padding:0;
   width: 4px;
-  background-color:#2ca01c;
 }
 
+td.dynamic_healthy {
+    background-color: #2ca01c;
+}
+td.dynamic_unhealthy {
+    background-color: red;
+}
+td.dynamic_inactiveFailed,
+td.dynamic_warmup {
+    background-color: orange;
+}
+
+
 /* Main Header Elements ------------ */
 header .logobug {
   margin: 0 .5rem 0 0;
@@ -724,6 +735,8 @@ section.status-red .cbui-tablerow-statusmsg {
           justify-content:flex-end;
 }
 
+.without-titlebar-close .ui-dialog-titlebar-close {display: none;}
+
 /* Sign In page details ------------ */
 .sign-in-background {
   background: #eceff2;
@@ -746,7 +759,7 @@ section.status-red .cbui-tablerow-statusmsg {
 }
 
 .dialog-small {
-  width: 320px;
+  width: 380px;
 }
 
 .dialog-small .panel-content {
@@ -855,6 +868,7 @@ section.status-red .cbui-tablerow-statusmsg {
   padding: 0.25rem 0.5rem;
   position: relative;
   top: -3px;
+  white-space: nowrap;
 }
 
 .label.lt-blue {
@@ -1055,6 +1069,9 @@ meter {
 .bar-usages.label-top-0-gold .label-top-0 {
     color: rgb(193, 151, 16);
 }
+.bar-usages.label-top-0-red .label-top-0 {
+    color: rgb(228, 58, 27);
+}
 .bar-usages.overcommitted .label-bottom-2 {
     color: rgb(244, 0, 21);
 }
@@ -1160,3 +1177,62 @@ meter {
     height: 1rem;
     vertical-align: middle;
 }
+
+/* vertical usage bar --------------- */
+
+.vertical_bar {
+    display: inline-block;
+    vertical-align: middle;
+    width: 1rem;
+    height: 3rem;
+    background: white;
+    border: .1rem solid #999;
+    border-radius: .1rem; margin-right: .3rem;
+}
+.vertical_bar .used {
+    position: relative;
+    background: #4287D6;
+}
+
+/* rebalance progress --------------- */
+
+.rebalance-progress {
+    position: relative;
+    height: 1rem;
+    background-color: rgb(229, 229, 229);
+    width: 100%;
+}
+.rebalance-progress div {
+    position: absolute;
+    height: 100%;
+    background-color: #4287D6
+
+}
+
+/* create xdcr dialog --------------- */
+
+.dynamic-hightlight span {
+    Background-color: LightSkyBlue;
+}
+.match_indicator {
+    background-color: #ffbd44;
+    color: #fff;
+    font-size: 0.7rem;
+    text-align: center;
+    line-height: 1.5rem;
+    position: absolute;
+    width: 4rem;
+    height: 1.6rem;
+    top: -1.8rem;
+    right: 0.2rem;
+}
+.match_indicator.dynamic_match {background-color: green;}
+.match_indicator .no_match,
+.match_indicator.dynamic_match .match,
+.match_indicator.dynamic_spinner .loading {display: block;}
+.match_indicator.dynamic_spinner .no_match,
+.match_indicator.dynamic_spinner .match,
+.match_indicator.dynamic_match .no_match,
+.match_indicator.dynamic_match .loading,
+.match_indicator .loading,
+.match_indicator .match  {display: none;}
diff --git a/priv/public/ui/app/mn_admin/mn_servers/add_dialog/mn_servers_add_dialog.html b/priv/public/ui/app/mn_admin/mn_servers/add_dialog/mn_servers_add_dialog.html
index b47261c07b..3a32ef0a2e 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/add_dialog/mn_servers_add_dialog.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/add_dialog/mn_servers_add_dialog.html
@@ -1,85 +1,99 @@
-<div class="join_cluster join_cluster_dialog" id="join_cluster_dialog" style="width: 550px">
-  <h1 class="dialog_corner_radius">Add Server</h1>
-  <div>
+<div class="dialog-med">
+  <div class="panel-header">
+    <h2>Add Server Node</h2>
+  </div>
   <form
-    novalidate
-    ng-submit="serversAddDialogCtl.onSubmit(form)"
-    name="form"
-    mn-spinner="serversAddDialogCtl.viewLoading">
-    <div class="warning pat_10" id="join_cluster_dialog_errors_container">
-      <div><strong>Warning</strong> – Adding a server to this cluster means all data on that server will be removed.</div>
-      <div ng-repeat="error in serversAddDialogCtl.errors"><strong>Attention</strong> - {{error}}<br></div>
-      <div ng-show="form.hostname.$error.required"><strong>Attention</strong> - Server IP Address cannot be blank.</div>
-      <span class="warning" ng-show="form.$error.services" style="margin: 10px 30px 10px 0px; display: block; padding: 0;"><strong>Attention</strong> - Please specify a Service(s) for this node.</span>
-      <div ng-show="serversAddDialogCtl.addNodeConfig.services.model.fts">
-        <strong>Attention</strong> - Full Text Search is a developer preview. Use only in test environments.<br>
+     novalidate
+     ng-submit="serversAddDialogCtl.onSubmit(form)"
+     name="form"
+     class="forms"
+     mn-spinner="serversAddDialogCtl.viewLoading">
+    <div class="panel-content">
+      <div class="error error-form">
+        <strong>Warning</strong> – Adding a server to this cluster means all data on that server will be removed.
       </div>
-    </div>
-    <fieldset>
-      <ul>
-        <li>
-          <label class="label" for="add-server-hostname">Server IP Address*:</label>
-          <input
-            type="text"
-            class="inp"
-            name="hostname"
-            id="add-server-hostname"
-            ng-model="serversAddDialogCtl.addNodeConfig.credentials.hostname"
-            mn-focus="serversAddDialogCtl.focusMe"
-            required>
-          <a class="text_11 tooltip"><span>What's this?</span>
-            <span class="tooltip_msg"><span>
+      <div
+         class="error error-form"
+         ng-repeat="error in serversAddDialogCtl.errors">
+        <strong>Attention</strong> - {{error}}<br>
+      </div>
+      <div
+         class="error error-form"
+         ng-show="form.hostname.$error.required">
+        <strong>Attention</strong> - Server IP Address cannot be blank.
+      </div>
+      <div
+         class="error error-form"
+         ng-show="form.$error.services">
+        <strong>Attention</strong> - Please specify a Service(s) for this node.
+      </div>
+      <div
+         class="error error-form"
+         ng-show="serversAddDialogCtl.addNodeConfig.services.model.fts">
+        <strong>Attention</strong> - Full Text Search is a developer preview. Use only in test environments.
+      </div>
+
+      <div class="formrow">
+        <label for="add-server-hostname">Server IP Address</label>
+        <input
+           type="text"
+           id="add-server-hostname"
+           ng-model="serversAddDialogCtl.addNodeConfig.credentials.hostname"
+           mn-focus="serversAddDialogCtl.focusMe"
+           required
+           autocorrect="off"
+           spellcheck="false"
+           autocomplete="off">
+        <a class="text_11 tooltip">
+          <span>What's this?</span>
+          <span class="tooltip_msg"><span>
               This is the hostname or IP address of a server node that you wish to add.
-            </span></span>
-          </a>
-        </li>
-        <li class="when-groups" ng-if="serversAddDialogCtl.isGroupsAvailable">
-          <label class="label" for="js_servers_group_select">Server Group:</label>
+          </span></span>
+        </a>
+      </div>
+
+      <div class="formrow">
+        <span ng-if="serversAddDialogCtl.isGroupsAvailable">
+          <label for="js_servers_group_select">Server Group</label>
           <select
-            id="js_servers_group_select"
-            class="server_group_select"
-            style="width:157px;"
-            name="group"
-            ng-model="serversAddDialogCtl.addNodeConfig.selectedGroup"
-            ng-options="group.name for group in serversAddDialogCtl.groups"></select>
-        </li>
-      </ul>
-    </fieldset>
-    <fieldset>
-      <legend>Security <a class="text_11 tooltip"><span>What's this?</span>
-        <span class="tooltip_msg"><span>
-          Enter the username and password for the node you want to add to this cluster.
-        </span></span></a>
-      </legend>
-      <ul>
-        <li>
-          <label class="label" for="user_inp">Username:</label>
-          <input
-            type="text"
-            class="inp"
-            name="user"
-            id="user_inp"
-            ng-model="serversAddDialogCtl.addNodeConfig.credentials.user">
-        </li>
-        <li>
-          <label class="label" for="password_inp">Password:</label>
-          <input
-            mn-autocomplete-off
-            type="password"
-            class="inp"
-            name="password"
-            id="password_inp"
-            ng-model="serversAddDialogCtl.addNodeConfig.credentials.password">
-        </li>
-      </ul>
-    </fieldset>
-    <fieldset mn-services="serversAddDialogCtl.addNodeConfig" class="services_wrapper">
-    </fieldset>
-    <div class="save_cancel clearfix">
-      <button type="submit" class="save_button float_right">Add Server</button>
-      <a class="casper_close_join_cluster_dialog close" ng-click="$dismiss()">Cancel</a>
+             id="js_servers_group_select"
+             ng-model="serversAddDialogCtl.addNodeConfig.selectedGroup"
+             ng-options="group.name for group in serversAddDialogCtl.groups"></select>
+        </span>
+      </div>
+
+      <div class="formrow">
+        <label for="user_inp">Username</label>
+        <input
+           type="text"
+           id="user_inp"
+           ng-model="serversAddDialogCtl.addNodeConfig.credentials.user"
+           autocorrect="off"
+           spellcheck="false"
+           autocomplete="off">
+      </div>
+
+      <div class="formrow">
+        <label for="password_inp">Password</label>
+        <input
+           mn-autocomplete-off
+           type="password"
+           id="password_inp"
+           ng-model="serversAddDialogCtl.addNodeConfig.credentials.password"
+           autocorrect="off"
+           spellcheck="false"
+           autocomplete="off">
+      </div>
+
+      <div
+         class="formrow checkbox-list"
+         mn-services="serversAddDialogCtl.addNodeConfig">
+      </div>
+    </div>
+
+    <div class="panel-footer">
+      <a href="" ng-click="$dismiss()">Cancel</a>
+      <button type="submit">Add Server</button>
     </div>
   </form>
-  <!-- END join cluster -->
-</div>
 </div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html b/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html
index 6c174e113c..4f0e583742 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html
@@ -1,97 +1,114 @@
 <td
-  colspan="10"
-  class="settings-placeholder"
-  mn-spinner="!serversListItemDetailsCtl.server.getMemoryCacheConfig || !serversListItemDetailsCtl.server.getDiskStorageConfig">
-<div class="first gong_rb">
-  <div class="pad">
-    <table class="properties_table">
-      <tr>
-          <td>Server Name: <span>{{serversListItemDetailsCtl.server.details.hostname}}</span></td>
-          <td>Uptime: <span>{{serversListItemDetailsCtl.server.details.uptime | mnFormatUptime}}</span></td>
-          <td>OS: <span>{{serversListItemDetailsCtl.server.details.os}}</span></td>
-      </tr>
-      <tr>
-        <td colspan="3">Version: <span>{{serversListItemDetailsCtl.server.details.version | mnPrettyVersion:true}}</span></td>
-      </tr>
-    </table>
+   class="no-padding"
+   ng-class="['dynamic_' + node.status, ' dynamic_' + node.clusterMembership]">
+</td>
+<td
+   colspan="9"
+   mn-spinner="!serversListItemDetailsCtl.server.getMemoryCacheConfig || !serversListItemDetailsCtl.server.getDiskStorageConfig">
+
+  <div class="interim content-box row flex-left">
+
+    <span class="column">
+      <span class="semi-bold">Server Name:</span> {{serversListItemDetailsCtl.server.details.hostname}}
+    </span>
+    <span class="column">
+      <span class="semi-bold">Uptime:</span> {{serversListItemDetailsCtl.server.details.uptime | mnFormatUptime}}
+    </span>
+    <span class="column">
+      <span class="semi-bold">OS:</span> {{serversListItemDetailsCtl.server.details.os}}
+    </span>
+    <span class="column">
+      <span class="semi-bold">Version:</span> {{serversListItemDetailsCtl.server.details.version | mnPrettyVersion:true}}
+    </span>
   </div>
-  <div class="side side_1"></div>
-  <div class="side side_2"></div>
-  <div class="side side_3"></div>
-  <div class="side side_4"></div>
-</div>
-<div class="additional_server_info">
-    <h3 ng-if="serversListItemDetailsCtl.tasks.detailedProgress && rbac.cluster.tasks.read">Rebalance Progress</h3>
+
+
+  <h4 ng-show="serversListItemDetailsCtl.tasks.detailedProgress && rbac.cluster.tasks.read">
+    Rebalance Progress
+  </h4>
+  <hr ng-show="serversListItemDetailsCtl.tasks.detailedProgress && rbac.cluster.tasks.read">
+  <div class="column indent-1">
     <p ng-if="serversListItemDetailsCtl.tasks.detailedProgress.bucket && rbac.cluster.tasks.read">
       <span>Bucket:</span>
       {{serversListItemDetailsCtl.tasks.detailedProgress.bucket}}
       ({{serversListItemDetailsCtl.tasks.detailedProgress.bucketNumber}} out of {{serversListItemDetailsCtl.server.detailedProgress.bucketsCount}})
     </p>
-    <div class="rebalance_progress" ng-if="serversListItemDetailsCtl.tasks.detailedProgress && rbac.cluster.tasks.read">
+    <div ng-if="serversListItemDetailsCtl.tasks.detailedProgress && rbac.cluster.tasks.read">
       <div ng-if="serversListItemDetailsCtl.tasks.detailedProgress.outgoing">
-        <p class="direction">Data being transferred out</p>
-        <p>
-          <span>Total number of keys to be transferred:</span>
-          {{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.docsTotal }}
-        </p>
-        <p>
-          <span>Estimated number of keys transferred:</span>
-          {{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.docsTransferred }}
-        </p>
         <p>
-          <span>
-            Number of Active# vBuckets and Replica# vBuckets to transfer:
+          <span class="semi-bold">Data being transferred out</span>
+          <br>
+          <span class="text-smaller">
+            Total number of keys to be transferred:
+            {{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.docsTotal }}
+            <br>
+            Estimated number of keys transferred:
+            {{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.docsTransferred }}
+            <br>
+            Number of active vBuckets and replica vBuckets to transfer:
+            Active-{{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.activeVBucketsLeft }},
+            Replica-{{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.replicaVBucketsLeft }}
           </span>
-          Active#-{{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.activeVBucketsLeft }}
-          Replica#-{{ serversListItemDetailsCtl.tasks.detailedProgress.outgoing.replicaVBucketsLeft }}
         </p>
       </div>
 
       <div ng-if="serversListItemDetailsCtl.tasks.detailedProgress.ingoing">
-        <p class="direction">Data being transferred in</p>
         <p>
-          <span>Total number of keys to be transferred:</span>
-          {{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.docsTotal }}
-        </p>
-        <p>
-          <span>Estimated number of keys transferred:</span>
-          {{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.docsTransferred }}
-        </p>
-        <p>
-          <span>
-            Number of Active# vBuckets and Replica# vBuckets to transfer:
+          <span class="semi-bold">Data being transferred in</span>
+          <br>
+          <span class="text-smaller">
+            Total number of keys to be transferred:
+            {{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.docsTotal }}
+            <br>
+            Estimated number of keys transferred:
+            {{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.docsTransferred }}
+            <br>
+            Number of active vBuckets and replica vBuckets to transfer:
+            Active-{{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.activeVBucketsLeft }},
+            Replica-{{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.replicaVBucketsLeft }}
           </span>
-          Active#-{{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.activeVBucketsLeft }}
-          Replica#-{{ serversListItemDetailsCtl.tasks.detailedProgress.ingoing.replicaVBucketsLeft }}
         </p>
       </div>
-
     </div>
-    <div ng-if="serversListItemDetailsCtl.tasks.warmUpTasks.length && rbac.cluster.tasks.read" mn-warmup-progress warm-up-tasks="serversListItemDetailsCtl.tasks.warmUpTasks" sort-by="bucket"></div>
+  </div>
 
-  <h3>Memory</h3>
-  <div class="info_block">
-    <span class="dynamic_ram">Dynamic RAM:</span>
-    <div class="usage-block" mn-bar-usage base-info="serversListItemDetailsCtl.server.getMemoryCacheConfig"></div>
+  <div
+     ng-if="serversListItemDetailsCtl.tasks.warmUpTasks.length && rbac.cluster.tasks.read"
+     mn-warmup-progress
+     warm-up-tasks="serversListItemDetailsCtl.tasks.warmUpTasks"
+     sort-by="bucket">
   </div>
-  <h3>Disk Storage</h3>
-  <div class="info_block">
-    <span class="disk_storage">
-      <span>Disk One: </span>
+
+  <h4>Memory</h4>
+  <hr>
+  <div class="row indent-1">
+    <div
+       class="column bar-usages label-top-0-red"
+       mn-bar-usage
+       base-info="serversListItemDetailsCtl.server.getMemoryCacheConfig"></div>
+  </div>
+
+  <h4>Disk Storage</h4>
+  <hr>
+  <div class="row indent-1">
+    <div class="text-smaller">
       <span
-        class="path"
-        title="{{serversListItemDetailsCtl.server.details.storage.hdd[0].path}}"
-        ng-if="!!serversListItemDetailsCtl.server.details.storage.hdd[0].path">
-          data: {{serversListItemDetailsCtl.server.details.storage.hdd[0].path | mnEllipsisiseOnLeft:25}}
+         title="{{serversListItemDetailsCtl.server.details.storage.hdd[0].path}}"
+         ng-if="!!serversListItemDetailsCtl.server.details.storage.hdd[0].path">
+        <span class="semi-bold">Data Storage Path:</span> {{serversListItemDetailsCtl.server.details.storage.hdd[0].path | mnEllipsisiseOnLeft:100}}
       </span>
+      &nbsp; &nbsp;
       <span
-        class="path"
-        title="{{serversListItemDetailsCtl.server.details.storage.hdd[0].index_path}}"
-        ng-if="!!serversListItemDetailsCtl.server.details.storage.hdd[0].index_path">
-          index: {{serversListItemDetailsCtl.server.details.storage.hdd[0].index_path | mnEllipsisiseOnLeft:25}}
+         title="{{serversListItemDetailsCtl.server.details.storage.hdd[0].index_path}}"
+         ng-if="!!serversListItemDetailsCtl.server.details.storage.hdd[0].index_path">
+        <span class="semi-bold">Index Storage Path:</span> {{serversListItemDetailsCtl.server.details.storage.hdd[0].index_path | mnEllipsisiseOnLeft:100}}
       </span>
-    </span>
-    <div class="usage-block" mn-bar-usage base-info="serversListItemDetailsCtl.server.getDiskStorageConfig"></div>
+    </div>
+  </div>
+  <div class="row indent-1">
+    <div
+       class="column bar-usages"
+       mn-bar-usage
+       base-info="serversListItemDetailsCtl.server.getDiskStorageConfig"></div>
   </div>
-</div><!-- additional_server_info -->
-</td>
\ No newline at end of file
+</td>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/eject_dialog/mn_servers_eject_dialog.html b/priv/public/ui/app/mn_admin/mn_servers/eject_dialog/mn_servers_eject_dialog.html
index 36a6984d5a..07a1d75270 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/eject_dialog/mn_servers_eject_dialog.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/eject_dialog/mn_servers_eject_dialog.html
@@ -1,18 +1,22 @@
-<div id="eject_confirmation_dialog" style="width:711px">
-    <h1 class="dialog_corner_radius">Confirm Server Removal</h1>
-    <div class="warning pat_20" mn-spinner="serversEjectDialogCtl.viewLoading">
-      <p>Warning! Removing this node will:</p>
-      <ul style="margin:15px;" ng-messages="serversEjectDialogCtl.warningFlags" ng-messages-multiple>
-        <li ng-message="isThereIndex">Remove indexes from the cluster and may cause queries to fail</li>
-        <li ng-message="isLastIndex">Remove the last index node from the cluster so new indexes can’t be created</li>
-        <li ng-message="isLastQuery">Remove the last query node from the cluster so queries can’t be run</li>
-        <li ng-message="isLastFts">Remove the last full text node from the cluster so full text search can’t be run</li>
-        <li ng-message="isKv">Reduce cache capacity across all data buckets</li>
-      </ul>
-      <p>Are you sure you want to remove this server?</p>
-    </div>
-    <div class="right save_cancel pas_20 footer_bg">
-      <button type="submit" class="save_button float_right" ng-click="serversEjectDialogCtl.doEjectServer()">Remove</button>
-      <a class="close casper_close_eject_confirmation_dialog float_right" ng-click="$dismiss()">Cancel</a>
-    </div>
-</div>
\ No newline at end of file
+<div class="dialog-med">
+  <div class="panel-header">
+    <h2>Confirm Server Removal</h2>
+  </div>
+  <div
+     class="panel-content"
+     mn-spinner="serversEjectDialogCtl.viewLoading">
+    <p class="error"><strong>Warning</strong> - Removing this node will:</p>
+    <ul ng-messages="serversEjectDialogCtl.warningFlags" ng-messages-multiple>
+      <li ng-message="isThereIndex"><p>Remove indexes from the cluster and may cause queries to fail</p></li>
+      <li ng-message="isLastIndex"><p>Remove the last index node from the cluster so new indexes can’t be created</p></li>
+      <li ng-message="isLastQuery"><p>Remove the last query node from the cluster so queries can’t be run</p></li>
+      <li ng-message="isLastFts"><p>Remove the last full text node from the cluster so full text search can’t be run</p></li>
+      <li ng-message="isKv"><p>Reduce cache capacity across all data buckets</p></li>
+    </ul>
+    <p>Are you sure you want to remove this server?</p>
+  </div>
+  <div class="panel-footer">
+    <a href="" ng-click="$dismiss()">Cancel</a>
+    <button ng-click="serversEjectDialogCtl.doEjectServer()">Remove</button>
+  </div>
+</div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/failover_dialog/mn_servers_failover_dialog.html b/priv/public/ui/app/mn_admin/mn_servers/failover_dialog/mn_servers_failover_dialog.html
index b34b6200a3..9286a6732c 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/failover_dialog/mn_servers_failover_dialog.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/failover_dialog/mn_servers_failover_dialog.html
@@ -1,101 +1,101 @@
-<div id="failover_confirmation_dialog" style="width:711px">
-  <h1 class="dialog_corner_radius">Confirm Node Fail Over for {{serversFailOverDialogCtl.node.hostname}}</h1>
-  <div>
-    <div mn-spinner="serversFailOverDialogCtl.viewLoading">
-      <div class="pas_20">
-        <div class="failover_warning pat_20">
-          <div ng-show="!serversFailOverDialogCtl.status.down && !serversFailOverDialogCtl.status.dataless">
-            <h2>Fail Over Options</h2>
-            <label>
-              <input
-                type="radio"
-                name="failOver"
-                ng-model="serversFailOverDialogCtl.status.failOver"
-                value="startGracefulFailover"
-                ng-disabled="!serversFailOverDialogCtl.status.gracefulFailoverPossible">
-                  <span>Graceful Fail Over (default).</span>
-            </label>
-            <label>
-              <input
-                type="radio"
-                name="failOver"
-                ng-model="serversFailOverDialogCtl.status.failOver"
-                value="failOver">
-                  <span>Hard Fail Over - If you use hard failover option on a functioning node it may result in data loss. This is because failover will immediately remove the node from the cluster and any data that has not yet been replicated to other nodes may be permanently lost if it had not been persisted to disk.</span>
-            </label>
-            <div
-              class="warning js_gracefull_failover_message"
-              style="margin-bottom: 15px;"
-              ng-if="!serversFailOverDialogCtl.status.gracefulFailoverPossible">
-                <strong>Attention</strong> – Graceful fail over option is not available either because node is unreachable or replica vbucket cannot be activated gracefully.
-            </div>
-            <div
-              class="warning js_warning"
-              style="margin-top: 15px;"
-              ng-show="serversFailOverDialogCtl.status.backfill && (serversFailOverDialogCtl.status.failOver === 'failOver')">
-                <strong>Attention</strong> – A significant amount of data stored on this node
-                  does not yet have replica (backup) copies! Failing over the node now will
-                  irrecoverably lose that data when the incomplete replica is
-                  activated and this node is removed from the cluster. It is
-                  recommended to select "Remove Server" and rebalance to
-                  safely remove the node without any data loss.
-              <label>
-                <input
-                  type="checkbox"
-                  name="confirmation"
-                  ng-model="serversFailOverDialogCtl.status.confirmation">
-                    Please confirm Failover.
-              </label>
-            </div>
-            <div
-              class="warning js_warning"
-              style="margin-top: 15px;"
-              ng-show="!serversFailOverDialogCtl.status.backfill && (serversFailOverDialogCtl.status.failOver === 'failOver')">
-              <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
-              Operations currently in flight and not yet replicated, will be lost. Rebalancing will be required
-              to add the node back into the cluster. Consider using "Remove from Cluster" and rebalancing instead of Failover,
-              to avoid any loss of data. Please confirm Failover.
-            </div>
-          </div>
-          <div ng-show="serversFailOverDialogCtl.status.down && !serversFailOverDialogCtl.status.dataless">
-            <div
-              class="warning"
-              ng-show="serversFailOverDialogCtl.status.backfill">
-                <strong>Attention</strong> – There are not replica (backup) copies of all data
-                on this node! Failing over the node now will irrecoverably
-                lose that data when the incomplete replica is activated and
-                this node is removed from the cluster. If the node might
-                come back online, it is recommended to wait.
-                Check this box if you want to failover the node, despite the resulting data loss
-              <label>
-                <input
-                  type="checkbox"
-                  name="confirmation"
-                  ng-model="serversFailOverDialogCtl.status.confirmation"> Please confirm Failover.</label>
-            </div>
-            <div class="warning" ng-show="!serversFailOverDialogCtl.status.backfill">
-              <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
-              Operations not replicated before the node became unresponsive, will be lost.
-              Rebalancing will be required to add the node back into the cluster. Please confirm Failover.
-            </div>
-          </div>
-          <div class="failover_warning pat_20" ng-if="serversFailOverDialogCtl.status.dataless">
-            <div class="warning">
-              <strong>Note</strong> – Failing over this node (which has no data) will remove it from the cluster.
-              Rebalancing will be required to add the node back into the cluster. Please confirm Failover.
-            </div>
-          </div>
+<div class="dialog-med">
+  <div class="panel-header">
+    <h2>Confirm Node Failover for {{serversFailOverDialogCtl.node.hostname}}</h2>
+  </div>
+  <div mn-spinner="serversFailOverDialogCtl.viewLoading">
+    <div class="panel-content forms">
+      <div ng-show="!serversFailOverDialogCtl.status.down && !serversFailOverDialogCtl.status.dataless">
+        <h3>Failover Options</h3>
+        <div class="formrow checkbox-list">
+          <label class="checkbox">
+            <input
+               type="radio"
+               name="failOver"
+               ng-model="serversFailOverDialogCtl.status.failOver"
+               value="startGracefulFailover"
+               ng-disabled="!serversFailOverDialogCtl.status.gracefulFailoverPossible">
+            Graceful Failover (default)
+          </label>
+          <br>
+          <label class="checkbox">
+            <input
+               type="radio"
+               name="failOver"
+               ng-model="serversFailOverDialogCtl.status.failOver"
+               value="failOver">
+            Hard Failover
+          </label>
+        </div>
+        <div>
+          <p>If you use hard failover option on a functioning node it may result in data loss. This is because failover will immediately remove the node from the cluster and any data that has not yet been replicated to other nodes may be permanently lost if it had not been persisted to disk.</p>
+        </div>
+        <div
+           class="error error-form"
+           ng-if="!serversFailOverDialogCtl.status.gracefulFailoverPossible">
+          <strong>Attention</strong> – The graceful failover option is not available either because node is unreachable or replica vbucket cannot be activated gracefully.
+        </div>
+        <div
+           class="error error-form"
+           ng-show="serversFailOverDialogCtl.status.backfill && (serversFailOverDialogCtl.status.failOver === 'failOver')">
+          <strong>Attention</strong> – A significant amount of data stored on this node
+          does not yet have replica (backup) copies! Failing over the node now will
+          irrecoverably lose that data when the incomplete replica is
+          activated and this node is removed from the cluster. It is
+          recommended to select "Remove Server" and rebalance to
+          safely remove the node without any data loss.
+          <label class="checkbox">
+            <input
+               type="checkbox"
+               name="confirmation"
+               ng-model="serversFailOverDialogCtl.status.confirmation">
+            Please confirm failover.
+          </label>
+        </div>
+        <div
+           class="error error-form"
+           ng-show="!serversFailOverDialogCtl.status.backfill && (serversFailOverDialogCtl.status.failOver === 'failOver')">
+          <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
+          Operations currently in flight and not yet replicated, will be lost. Rebalancing will be required
+          to add the node back into the cluster. Consider using "Remove from Cluster" and rebalancing instead of Failover,
+          to avoid any loss of data. Please confirm Failover.
         </div>
       </div>
-      <div class="right save_cancel">
-        <button
-          type="submit"
-          class="save_button float_right"
-          ng-click="serversFailOverDialogCtl.onSubmit()"
-          ng-model="button"
-          ng-disabled="serversFailOverDialogCtl.isFailOverBtnDisabled()">Fail Over</button>
-        <a class="close casper_close_failover_confirmation_dialog cancel_button float_right" ng-click="$dismiss()">Cancel</a>
+      <div ng-show="serversFailOverDialogCtl.status.down && !serversFailOverDialogCtl.status.dataless">
+        <div
+           class="error error-form"
+           ng-show="serversFailOverDialogCtl.status.backfill">
+          <strong>Attention</strong> – There are not replica (backup) copies of all data
+          on this node! Failing over the node now will irrecoverably
+          lose that data when the incomplete replica is activated and
+          this node is removed from the cluster. If the node might
+          come back online, it is recommended to wait.
+          Check this box if you want to failover the node, despite the resulting data loss
+          <label>
+            <input
+               type="checkbox"
+               name="confirmation"
+               ng-model="serversFailOverDialogCtl.status.confirmation"> Please confirm Failover.</label>
+        </div>
+        <div
+           class="error error-form"
+           ng-show="!serversFailOverDialogCtl.status.backfill">
+          <strong>Warning</strong> – Failing over the node will remove it from the cluster and activate a replica.
+          Operations not replicated before the node became unresponsive, will be lost.
+          Rebalancing will be required to add the node back into the cluster. Please confirm Failover.
+        </div>
       </div>
+      <div
+         class="error error-form"
+         ng-if="serversFailOverDialogCtl.status.dataless">
+        <strong>Note</strong> – Failing over this node (which has no data) will remove it from the cluster.
+        Rebalancing will be required to add the node back into the cluster. Please confirm Failover.
+      </div>
+    </div>
+    <div class="panel-footer">
+      <a href="" ng-click="$dismiss()">Cancel</a>
+      <button
+         ng-click="serversFailOverDialogCtl.onSubmit()"
+         ng-disabled="serversFailOverDialogCtl.isFailOverBtnDisabled()">Fail Over</button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/list/mn_servers_list.html b/priv/public/ui/app/mn_admin/mn_servers/list/mn_servers_list.html
index 6ee77adaa8..c86da3277b 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/list/mn_servers_list.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/list/mn_servers_list.html
@@ -1,180 +1,202 @@
-<div class="panes">
-  <div
-    class="servers_list"
-    mn-spinner="!serversCtl.nodes || !adminCtl.tasks || !serversCtl.getGroupsByHostname || serversCtl.showSpinner"
-    min-height="91px">
-    <table class="list" style="width:100%" mn-sortable-table="hostname">
-      <colgroup>
-        <col style="width:19%">
-        <col style="width:9%">
-        <col style='{%= serversCtl.mnPoolDefault.value.isGroupsAvailable && rbac.cluster.server_groups.read ? "width: 7%;" : "width: 0px;" %}'>
-        <col style="width:7%">
-        <col style="width:8%">
-        <col style="width:8%">
-        <col style="width:8%">
-        <col style="width:8%">
-        <col style="width:4%">
-        <col style="width:22%">
-      </colgroup>
-      <tbody>
-        <tr>
-          <th mn-sortable-title="hostname" class="node_name" style="text-align:left;">Server Node Name</th>
-          <th></th>
-          <th mn-sortable-title="group" style='{{ serversCtl.mnPoolDefault.value.isGroupsAvailable && rbac.cluster.server_groups.read ? "text-align: center!important;" : "width: 0px;" }}'>{{ poolDefault.isGroupsAvailable && rbac.cluster.server_groups.read ? "Group" : " " }}</th>
-          <th mn-sortable-title="services">Services</th>
-          <th>RAM Usage</th>
-          <th>Swap Usage</th>
-          <th>CPU Usage</th>
-          <th>Data/Disk Usage</th>
-          <th style="text-indent:8px;white-space: nowrap;">Items (Active / Replica)</th>
-          <th></th>
-        </tr>
-      </tbody>
-      <tbody
-        ng-repeat="node in serversCtl.nodes[serversListCtl.stateParamsNodeType] | orderBy:serversListCtl.sortableTableProperties.orderBy:serversListCtl.sortableTableProperties.invert track by node.otpNode">
-        <tr
-          ng-if="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.nodes.write"
-          class="add_back_row when-roadmin-avoid-me">
-          <td colspan="10">
-            <span
-              class="add_back_btn"
-              ng-click="serversListCtl.reAddNode('full', node.otpNode)">
-                <span ng-show="serversListCtl.isKVNode(node)">Full Recovery</span>
-                <span ng-show="!serversListCtl.isKVNode(node)">Recovery</span>
-            </span>
-            <span
-              ng-show="serversListCtl.isKVNode(node) && poolDefault.compat.atLeast30"
-              class="add_back_btn only-when-30"
-              ng-click="serversListCtl.reAddNode('delta', node.otpNode)">
-                <span>Delta Recovery</span>
-            </span>
-            <span class="add_b_message">
+<div
+   mn-spinner="!serversCtl.nodes || !adminCtl.tasks || !serversCtl.getGroupsByHostname || serversCtl.showSpinner"
+   min-height="91px">
+  <table
+     mn-sortable-table="hostname"
+     class="table-stroked">
+    <tbody>
+      <tr>
+        <th
+           mn-sortable-title="hostname"
+           colspan="2">Server Node Name</th>
+        <th
+           mn-sortable-title="group"
+           style="{%= serversCtl.mnPoolDefault.value.isGroupsAvailable && rbac.cluster.server_groups.read ? 'width: auto;' : 'width: 0px;' %}">
+          {{ poolDefault.isGroupsAvailable && rbac.cluster.server_groups.read ? "Group" : " " }}
+        </th>
+        <th mn-sortable-title="services">Services</th>
+        <th class="text-center">RAM Usage</th>
+        <th class="text-center">Swap Usage</th>
+        <th class="text-center">CPU Usage</th>
+        <th class="text-center">Data/Disk Usage</th>
+        <th class="text-center">Active/Replica Items</th>
+        <th></th>
+      </tr>
+    </tbody>
+    <tbody
+       ng-repeat="node in serversCtl.nodes[serversListCtl.stateParamsNodeType] | orderBy:serversListCtl.sortableTableProperties.orderBy:serversListCtl.sortableTableProperties.invert track by node.otpNode">
+      <tr
+         ng-if="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.nodes.write"
+         class="grayblue-5">
+        <td colspan="10">
+          <div class="row">
+            <span class="error">
               This server is now reachable. Do you want to add it back to the cluster on the next rebalance?
             </span>
-          </td>
-        </tr>
-        <tr class="server_row " id="{{node.otpNode | mnMakeSafeForCSS}}">
-          <td class="node_name ellipsis">
-            <a ng-if="!serversListCtl.isNodeUnhealthy(node) && rbac.cluster.nodes.read"
-               ng-click="serversCtl.toggleDetails(node.hostname)"
-               class="{{'casper_open_cluster_' + node.otpNode | mnMakeSafeForCSS}}"
-               title="Show Server Node info">
-                <ins class="expander" ng-class="{closed: !serversCtl.isDetailsOpened(node.hostname)}"></ins>
-            </a>
-            <span ng-if="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.stats.read">
-              {{node.hostname | mnStripPortHTML:serversCtl.nodes.allNodes}}
-            </span>
-            <span ng-if="serversListCtl.isNodeUnhealthy(node) || !rbac.cluster.stats.read">
-              {{node.hostname}}
-            </span>
-            <a ng-if="!serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.stats.read"
-               title="{{'View Analytics for ' + node.hostname}}"
-               ui-sref="app.admin.analytics.list.graph({statsHostname: node.hostname})">
-              {{node.hostname | mnStripPortHTML:serversCtl.nodes.allNodes}}
-            </a>
-          </td>
-          <td
-            class="servers_icons  {{'dynamic_' + node.status + ' dynamic_' + node.clusterMembership}}"
-            ng-class="{dynamic_lastActive: serversListCtl.isLastActiveData(node)}">
-          </td>
-          <td>
-            <div
-              ng-show="serversCtl.mnPoolDefault.value.isGroupsAvailable"
-              class="ellipsis"
-              ng-show="rbac.cluster.server_groups.read"
-              title="{{serversCtl.getGroupsByHostname[node.hostname].name}}">
-                {{serversCtl.getGroupsByHostname[node.hostname].name}}
-            </div>
-          </td>
-          <td style="text-align: left;">
-            <div ng-repeat="service in node.services | mnFormatServicesArray | orderBy">
-              {{service}}
-            </div>
-          </td>
 
-          <td class="ram" mn-vertical-bar="" conf="serversListCtl.getRamUsageConf(node)">
-          </td>
-          <td class="ram" mn-vertical-bar="" conf="serversListCtl.getSwapUsageConf(node)">
-          </td>
-          <td class="ram" mn-vertical-bar="" conf="serversListCtl.getCpuUsageConf(node)">
-          </td>
-          <td class="ram">
-            <span ng-if="!serversListCtl.isDataDiskUsageAvailable(node)">
-              N/A
-            </span>
-            <span ng-if="serversListCtl.isDataDiskUsageAvailable(node)">
-              {{serversListCtl.couchDataSize(node) | mnFormatQuantity}} / <br>{{serversListCtl.couchDiskUsage(node) | mnFormatQuantity}}
-            </span>
-          </td>
-          <td class="rep" style="padding-left:0;padding-right:0;">
-            {{node.interestingStats.curr_items || 0 | mnFormatQuantity:1000:' ' }}/<br>{{node.interestingStats.vb_replica_curr_items || 0 | mnFormatQuantity:1000:' ' }}
-          </td>
-          <td
-            ng-if="adminCtl.tasks.inRebalance && adminCtl.tasks.tasksRebalance.status === 'running' && rbac.cluster.tasks.read"
-            class="actions">
-              <span class="usage_info">{{serversListCtl.getRebalanceProgress(node) | mnTruncateTo3Digits}} % Complete</span>
-              <span class="server_usage"><span ng-style="{width: (serversListCtl.getRebalanceProgress(node) | mnTruncateTo3Digits) + '%'}"></span></span>
-          </td>
-          <td
-            ng-if="!adminCtl.tasks.inRebalance && serversListCtl.isNodeInactiveAdded(node) && node.recoveryType === 'none' && rbac.cluster.tasks.read"
-            class="actions with_state_message">
-              <span class="state_message">Pending Add</span>
-              <a
-                ng-show="rbac.cluster.nodes.write"
-                class="list_button btn_cancel eject_server when-roadmin-avoid-me"
-                ng-class="{dynamic_disabled: adminCtl.tasks.inRecoveryMode}"
-                ng-click="!adminCtl.tasks.inRecoveryMode && serversListCtl.ejectServer(node)"><span>Cancel</span></a>
-          </td>
-          <td
-            ng-if="!adminCtl.tasks.inRebalance && serversListCtl.isNodeInactiveAdded(node) && node.recoveryType !== 'none' && rbac.cluster.tasks.read"
-            class="actions with_state_message">
-              <span class="state_message">Pending {{node.recoveryType}} recovery</span>
-              <a
-                ng-show="rbac.cluster.nodes.write"
-                class="list_button btn_cancel eject_server when-roadmin-avoid-me"
-                ng-class="{dynamic_disabled: adminCtl.tasks.inRecoveryMode}"
-                ng-click="!adminCtl.tasks.inRecoveryMode && serversListCtl.cancelFailOverNode(node.otpNode)"><span>Cancel</span></a>
-          </td>
-          <td
-            ng-show="rbac.cluster.tasks.read"
-            ng-if="!adminCtl.tasks.inRebalance && !serversListCtl.isNodeInactiveAdded(node) && node.pendingEject;"
-            class="actions with_state_message">
-              <span class="state_message">Pending Removal</span>
-              <a
-                ng-show="rbac.cluster.nodes.write"
-                class="list_button btn_cancel remove_from_list when-roadmin-avoid-me"
-                ng-class="{dynamic_disabled: adminCtl.tasks.inRecoveryMode}"
-                ng-click="!adminCtl.tasks.inRecoveryMode && serversListCtl.cancelEjectServer(node)"><span>Cancel</span></a>
-          </td>
-          <td
-            ng-if="!adminCtl.tasks.inRebalance && !serversListCtl.isNodeInactiveAdded(node) && !node.pendingEject && rbac.cluster.tasks.read"
-            class="actions">
-              <a
-                ng-show="!(serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)) && rbac.cluster.nodes.write"
-                class="list_button eject_server when-roadmin-avoid-me casper_servers_remove_popup"
-                ng-class="{dynamic_disabled: serversListCtl.disableRemoveBtn(node)}"
-                ng-click="!serversListCtl.disableRemoveBtn(node) && serversListCtl.ejectServer(node)"><span>Remove</span></a>
-              <a
-                ng-show="!(serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)) && rbac.cluster.nodes.write"
-                class="list_button failover_server when-roadmin-avoid-me casper_servers_failover_popup"
-                ng-class="{dynamic_disabled: serversListCtl.isFailOverDisabled(node)}"
-                ng-click="!serversListCtl.isFailOverDisabled(node) && serversListCtl.failOverNode(node)"><span>Fail Over</span></a>
+            <span>
+              <span ng-click="serversListCtl.reAddNode('full', node.otpNode)">
+                <button ng-show="serversListCtl.isKVNode(node)">Add Back: Full Recovery</button>
+                <button ng-show="!serversListCtl.isKVNode(node)">Add Back</button>
+              </span>
               <span
-                class="failed_over_message"
-                ng-show="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)">
-                  Failed Over: Pending Removal
+                 ng-show="serversListCtl.isKVNode(node) && poolDefault.compat.atLeast30"
+                 ng-click="serversListCtl.reAddNode('delta', node.otpNode)">
+                <button>Add Back: Delta Recovery</button>
               </span>
-          </td>
-        </tr>
-        <tr ng-if="serversCtl.isDetailsOpened(node.hostname) && rbac.cluster.nodes.read" ui-view="details">
-        </tr>
-      </tbody>
+            </span>
+          </div>
+        </td>
+      </tr>
+
+      <tr
+         class="has-hover"
+         ng-click="!serversListCtl.isNodeUnhealthy(node) && rbac.cluster.nodes.read && serversCtl.toggleDetails(node.hostname)"
+         ng-class="{
+                 'grayblue-5': serversCtl.isDetailsOpened(node.hostname),
+                 'no-stroke': serversCtl.isDetailsOpened(node.hostname)
+                 }">
+        <td
+           class="node-status"
+           ng-class="['dynamic_' + node.status, 'dynamic_' + node.clusterMembership]">
+        </td>
+        <td class="ellipsis text-nowrap">
+          <a
+             ng-if="!serversListCtl.isNodeUnhealthy(node) && rbac.cluster.nodes.read"
+             title="Show Server Node info">
+            <span
+               class="expander"
+               ng-class="{closed: !serversCtl.isDetailsOpened(node.hostname)}">
+            </span>
+          </a>
+          <span ng-if="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.stats.read">
+            {{node.hostname | mnStripPortHTML:serversCtl.nodes.allNodes}}
+          </span>
+          <span ng-if="serversListCtl.isNodeUnhealthy(node) || !rbac.cluster.stats.read">
+            {{node.hostname}}
+          </span>
+          <a
+             ng-if="!serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node) && rbac.cluster.stats.read"
+             title="{{'View Analytics for ' + node.hostname}}"
+             class="link-heavy"
+             ng-click="$event.stopPropagation()"
+             ui-sref="app.admin.analytics.list.graph({statsHostname: node.hostname})">
+            {{node.hostname | mnStripPortHTML:serversCtl.nodes.allNodes}}
+          </a>
+        </td>
+        <td>
+          <span
+             ng-show="serversCtl.mnPoolDefault.value.isGroupsAvailable"
+             class="label lt-blue"
+             ng-show="rbac.cluster.server_groups.read"
+             title="{{serversCtl.getGroupsByHostname[node.hostname].name}}">
+            {{serversCtl.getGroupsByHostname[node.hostname].name}}
+          </span>
+        </td>
+        <td>
+            <span ng-repeat="service in node.services | mnFormatServicesArray | orderBy" class="label services">{{service}}</span>
+        </td>
+
+        <td
+           class="text-center"
+           mn-vertical-bar=""
+           conf="serversListCtl.getRamUsageConf(node)">
+        </td>
+        <td
+           class="text-center"
+           mn-vertical-bar=""
+           conf="serversListCtl.getSwapUsageConf(node)">
+        </td>
+        <td
+           class="text-center"
+           mn-vertical-bar=""
+           conf="serversListCtl.getCpuUsageConf(node)">
+        </td>
+        <td class="text-center">
+          <span ng-if="!serversListCtl.isDataDiskUsageAvailable(node)">
+            N/A
+          </span>
+          <span ng-if="serversListCtl.isDataDiskUsageAvailable(node)">
+            {{serversListCtl.couchDataSize(node) | mnFormatQuantity}} /<br> {{serversListCtl.couchDiskUsage(node) | mnFormatQuantity}}
+          </span>
+        </td>
+
+        <td class="text-center">
+          {{node.interestingStats.curr_items || 0 | mnFormatQuantity:1000:' ' }} /<br>
+          {{node.interestingStats.vb_replica_curr_items || 0 | mnFormatQuantity:1000:' ' }}
+        </td>
+        <td ng-if="adminCtl.tasks.inRebalance && adminCtl.tasks.tasksRebalance.status === 'running' && rbac.cluster.tasks.read" style="vertical-align: middle;">
+          <div class="rebalance-progress">
+            <div ng-style="{width: (serversListCtl.getRebalanceProgress(node) | mnTruncateTo3Digits) + '%'}"></div>
+          </div>
+          <div class="text-smaller text-right">
+            {{serversListCtl.getRebalanceProgress(node) | mnTruncateTo3Digits}} % Complete
+          </div>
+        </td>
+        <td ng-if="!adminCtl.tasks.inRebalance && serversListCtl.isNodeInactiveAdded(node) && node.recoveryType === 'none' && rbac.cluster.tasks.read">
+          <span class="error">Pending Add</span>
+          &nbsp;&nbsp;
+          <a
+             ng-show="rbac.cluster.nodes.write"
+             class="link-heavy"
+             ng-disabled="adminCtl.tasks.inRecoveryMode"
+             ng-click="$event.stopPropagation(); serversListCtl.ejectServer(node)">Cancel</a>
+        </td>
+        <td
+           ng-if="!adminCtl.tasks.inRebalance && serversListCtl.isNodeInactiveAdded(node) && node.recoveryType !== 'none' && rbac.cluster.tasks.read"
+           class="text-center">
+          <span class="error">Pending {{node.recoveryType}} Recovery</span>
+          &nbsp;&nbsp;
+          <a
+             ng-show="rbac.cluster.nodes.write"
+             class="link-heavy"
+             ng-disabled="adminCtl.tasks.inRecoveryMode"
+             ng-click="$event.stopPropagation(); serversListCtl.cancelFailOverNode(node.otpNode)">Cancel</a>
+        </td>
+        <td
+           ng-show="rbac.cluster.tasks.read"
+           ng-if="!adminCtl.tasks.inRebalance && !serversListCtl.isNodeInactiveAdded(node) && node.pendingEject;">
+          <span class="error">Pending Removal</span>
+          &nbsp;&nbsp;
+          <a
+             ng-show="rbac.cluster.nodes.write"
+             class="link-heavy"
+             ng-disabled="adminCtl.tasks.inRecoveryMode"
+             ng-click="$event.stopPropagation(); serversListCtl.cancelEjectServer(node)">Cancel</a>
+        </td>
+        <td
+           ng-if="!adminCtl.tasks.inRebalance && !serversListCtl.isNodeInactiveAdded(node) && !node.pendingEject && rbac.cluster.tasks.read"
+           class="text-center">
+          <a
+             ng-show="!(serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)) && rbac.cluster.nodes.write"
+             class="link-heavy"
+             ng-disabled="serversListCtl.disableRemoveBtn(node)"
+             ng-click="$event.stopPropagation(); serversListCtl.ejectServer(node)">Remove</a>
+          &nbsp;
+          <a
+             ng-show="!(serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)) && rbac.cluster.nodes.write"
+             class="link-heavy"
+             ng-disabled="serversListCtl.isFailOverDisabled(node)"
+             ng-click="$event.stopPropagation(); serversListCtl.failOverNode(node)">Failover</a>
+          <span
+             class="error"
+             ng-show="serversListCtl.isNodeInactiveFaied(node) && !serversListCtl.isNodeUnhealthy(node)">
+            Failed Over: Pending Removal
+          </span>
+        </td>
+      </tr>
+      <tr
+         class="grayblue-5"
+         ng-if="serversCtl.isDetailsOpened(node.hostname) && rbac.cluster.nodes.read"
+         ui-view="details">
+      </tr>
+    </tbody>
 
-      <tbody ng-if="!serversCtl.nodes[serversListCtl.stateParamsNodeType].length">
-        <tr class="server_row rebalance_empty">
-          <td colspan="10">There are no servers pending rebalance.</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</div>
\ No newline at end of file
+    <tbody ng-if="!serversCtl.nodes[serversListCtl.stateParamsNodeType].length">
+      <tr class="border-top">
+        <td colspan="10">There are no servers pending rebalance.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+</div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/memory_quota_dialog/memory_quota_dialog.html b/priv/public/ui/app/mn_admin/mn_servers/memory_quota_dialog/memory_quota_dialog.html
index 64a843fd5e..1ebc25cbdb 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/memory_quota_dialog/memory_quota_dialog.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/memory_quota_dialog/memory_quota_dialog.html
@@ -1,30 +1,32 @@
-<div class="memory_quota_dialog" id="js_memory_quota_dialog" style="width: 615px;">
-  <h1>Review Service Specific Settings</h1>
+<div class="dialog-med">
+  <div class="panel-header">
+    <h2>New Service Settings</h2>
+  </div>
   <form
-    class="cluster_quota_settings"
-    mn-spinner="serversMemoryQuotaDialogCtl.viewLoading"
-    ng-submit="serversMemoryQuotaDialogCtl.onSubmit()">
-      <p style="padding: 20px;">
-      These service(s) are being added to the cluster for the first time:
-      <span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.index">Index</span><span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.count > 1">,</span>
-      <span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.fts">Full Text</span><br>
-      Please review and set the following service-specific settings. These values need to be set one time only: when you add more server nodes running these services into the cluster we will not ask you to review these values again.</p>
-      <div style="margin: 20px;">
-        <div
-          id="js_add_node_memory_quota_holder"
-          mn-memory-quota="serversMemoryQuotaDialogCtl.config"
-          rbac="rbac"
-          errors="serversMemoryQuotaDialogCtl.errors">
-        </div>
-        <div
-          ng-if="serversMemoryQuotaDialogCtl.firstTimeAddedServices.index"
-          mn-storage-mode="serversMemoryQuotaDialogCtl.indexSettings"
-          is-disabled="!serversMemoryQuotaDialogCtl.isEnterprise || serversMemoryQuotaDialogCtl.initialIndexSettings.storageMode !== ''"
-          errors="serversMemoryQuotaDialogCtl.postIndexSettingsErrors">
-        </div>
+     class="forms"
+     mn-spinner="serversMemoryQuotaDialogCtl.viewLoading"
+     ng-submit="serversMemoryQuotaDialogCtl.onSubmit()">
+    <div class="panel-content">
+      <div class="formrow">
+        The <span class="semi-bold" ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.index">GSI Index</span><span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.count > 1"> and </span><span class="semi-bold" ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.fts">Full Text</span><span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.count > 1"> services have</span><span ng-show="serversMemoryQuotaDialogCtl.firstTimeAddedServices.count == 1"> service has</span> been added to the cluster for the first time. Please review and set the following service-specific settings.
       </div>
-      <div class="save_cancel clearfix">
-        <button type="submit" class="save_button float_right">Set Quota</button>
+      <div class="formrow">
+        <h4>RAM Quotas <small>in megabytes per server node</small></h4>
       </div>
+      <div class="formrow indent-1"
+         mn-memory-quota="serversMemoryQuotaDialogCtl.config"
+         rbac="rbac"
+         errors="serversMemoryQuotaDialogCtl.errors">
+      </div>
+      <div class="formrow"
+         ng-if="serversMemoryQuotaDialogCtl.firstTimeAddedServices.index"
+         mn-storage-mode="serversMemoryQuotaDialogCtl.indexSettings"
+         is-disabled="!serversMemoryQuotaDialogCtl.isEnterprise || serversMemoryQuotaDialogCtl.initialIndexSettings.storageMode !== ''"
+         errors="serversMemoryQuotaDialogCtl.postIndexSettingsErrors">
+      </div>
+    </div>
+    <div class="panel-footer">
+      <button type="submit">Save Settings</button>
+    </div>
   </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/mn_servers.html b/priv/public/ui/app/mn_admin/mn_servers/mn_servers.html
index 5811931305..2b21ca29a9 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/mn_servers.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/mn_servers.html
@@ -1,90 +1,67 @@
 <div
-  id="js_servers"
-  class="servers"
-  data-ng-class="{'rebalancing': poolDefault.rebalancing}">
-  <h1>Servers</h1>
-  <div
-    class="warning_message"
-    ng-repeat="warning in serversCtl.mnPoolDefault.value.failoverWarnings"
-    ng-show="warning && warning != 'failoverNeeded' && !poolDefault.rebalancing">
-      <span>Fail Over Warning: <span class="warning-text">{{warning | formatFailoverWarnings}}</span></span>
-  </div>
-  <div
-    class="warning_message"
-    id="js_rebalance_during_sample_load"
-    ng-show="serversCtl.mayRebalanceWithoutSampleLoading() && adminCtl.tasks.isLoadingSamples && rbac.cluster.tasks.read">
-      Warning: Rebalance is not available until data loading is completed!
-  </div>
-  <div
-    class="warning_message"
-    ng-show="serversCtl.autoFailoverSettings.data.count > 0 && rbac.cluster.settings.read">
-      A server was automatically failed over.
-    <a
-      class="auto_failover_count_reset when-roadmin-hide-me"
-      ng-show="rbac.cluster.settings.write"
-      ng-click="adminCtl.resetAutoFailOverCount()">
-      <span>Reset Quota</span>
-    </a>
-  </div>
-  <div class="shadow_box">
-    <div class="header_2">
-      <span
-        class="staleness-notice"
-        ng-show="adminCtl.lostConnState.isActivated">
-          Difficulties communicating with the cluster; displaying cached information!
-      </span>
-      <a
-        class="btn_1 when-enterprise when-roadmin-avoid-me"
-        ui-sref="app.admin.groups"
-        id="js_server_groups_tab"
-        ng-show="poolDefault.isGroupsAvailable && poolDefault.isEnterprise && rbac.cluster.server_groups.read">
-          <span>Server Groups</span>
-      </a>
-      <a
-        class="add_button btn_1 when-roadmin-hide-me casper_servers_add_popup"
-        ng-show="poolDefault && !poolDefault.rebalancing && rbac.cluster.nodes.write"
-        ng-click="serversCtl.addServer()">
-          <span>Add Server</span>
-      </a>
+   class="interim alert alert-warning"
+   ng-repeat="warning in serversCtl.mnPoolDefault.value.failoverWarnings"
+   ng-show="warning && warning != 'failoverNeeded' && !poolDefault.rebalancing">
+  <p>Fail Over Warning: {{warning | formatFailoverWarnings}}</p>
+</div>
+<div
+   class="interim alert alert-warning"
+   ng-show="serversCtl.mayRebalanceWithoutSampleLoading() && adminCtl.tasks.isLoadingSamples && rbac.cluster.tasks.read">
+  <p>Warning: Rebalance is not available until data loading is completed!</p>
+</div>
+<div
+   class="interim alert alert-warning"
+   ng-show="serversCtl.autoFailoverSettings.data.count > 0 && rbac.cluster.settings.read">
+  <p>A server was automatically failed over.</p>
+  <button
+     ng-show="rbac.cluster.settings.write"
+     ng-click="adminCtl.resetAutoFailOverCount()">Reset Quota</button>
+</div>
+<div
+   class="interim alert alert-warning"
+   ng-show="adminCtl.lostConnState.isActivated">
+  <p>Difficulties communicating with the cluster; displaying cached information!</p>
+</div>
+
+<div class="interim main-content">
+  <div class="interim row">
+    <span class="left pills">
       <a
-        class="rebalance_button btn_1 when-roadmin-hide-me"
-        ng-show="serversCtl.mayRebalanceWithoutSampleLoading() && !adminCtl.tasks.isLoadingSamples && !adminCtl.tasks.isOrphanBucketTask && rbac.cluster.nodes.write && rbac.cluster.tasks.read"
-        ng-click="serversCtl.postRebalance()">
-          <span>Rebalance</span>
-      </a>
+         ui-sref="app.admin.servers.list({ list: 'active' })"
+         ui-sref-active="pills-selected">Active Servers</a>
       <a
-        class="stop_rebalance_button btn_1 when-roadmin-hide-me"
-        ng-show="poolDefault.rebalancing && rbac.cluster.nodes.write"
-        ng-click="serversCtl.stopRebalance()">
+         ui-sref="app.admin.servers.list({ list: 'pending' })"
+         ui-sref-active="pills-selected">Pending Rebalance</a>
+      <span
+         class="label red badge"
+         data-ng-show="!poolDefault.rebalancing && serversCtl.nodes.pending.length">
+        {{serversCtl.nodes.pending.length}}
+      </span>
+    </span>
+    <span class="right">
+      <button
+         class="outline"
+         ui-sref="app.admin.groups"
+         ng-show="poolDefault.isGroupsAvailable && poolDefault.isEnterprise && rbac.cluster.server_groups.read">Server Groups</button>
+      <button
+         ng-show="poolDefault && !poolDefault.rebalancing && rbac.cluster.nodes.write"
+         ng-click="serversCtl.addServer()">+ Add Server</button>
+      <button
+         ng-show="serversCtl.mayRebalanceWithoutSampleLoading() && !adminCtl.tasks.isLoadingSamples && !adminCtl.tasks.isOrphanBucketTask && rbac.cluster.nodes.write && rbac.cluster.tasks.read"
+         ng-click="serversCtl.postRebalance()"
+         class="orange">Rebalance</button>
+      <button
+         class="orange"
+         ng-show="poolDefault.rebalancing && rbac.cluster.nodes.write"
+         ng-click="serversCtl.stopRebalance()">
         <span ng-show="adminCtl.tasks.isSubtypeGraceful">Stop Fail Over</span>
         <span ng-show="!adminCtl.tasks.isSubtypeGraceful">Stop Rebalance</span>
-      </a>
-      <a
-        class="stop_recovery_button btn_1 when-roadmin-hide-me"
-        ng-click="serversCtl.onStopRecovery()"
-        ng-show="adminCtl.tasks.inRecoveryMode && rbac.cluster.tasks.read && rbac.cluster.bucket[adminCtl.tasks.tasksRecovery.bucket].write">
-          <span>Stop Recovery</span>
-      </a>
-      <ul class="tabs">
-        <li class="tab_left">
-          <a
-            ui-sref="app.admin.servers.list({ list: 'active' })"
-            ui-sref-active="selected">Active Servers</a>
-        </li>
-        <li class="tab_right" id="rebalance_tab">
-          <a
-            class="casper_servers_pending_rebalance_tab"
-            ui-sref="app.admin.servers.list({ list: 'pending' })"
-            ui-sref-active="selected">Pending Rebalance</a>
-            <span
-              class="badge"
-              data-ng-show="!poolDefault.rebalancing && serversCtl.nodes.pending.length"><span>
-                {{serversCtl.nodes.pending.length}}
-              </span>
-            </span>
-        </li>
-      </ul>
-    </div>
-    <div ui-view></div>
+      </button>
+      <button
+         ng-click="serversCtl.onStopRecovery()"
+         ng-show="adminCtl.tasks.inRecoveryMode && rbac.cluster.tasks.read && rbac.cluster.bucket[adminCtl.tasks.tasksRecovery.bucket].write"
+         class="orange">Stop Recovery</button>
+    </span>
   </div>
+  <div ui-view></div>
 </div>
diff --git a/priv/public/ui/app/mn_admin/mn_servers/stop_rebalance_dialog/mn_servers_stop_rebalance_dialog.html b/priv/public/ui/app/mn_admin/mn_servers/stop_rebalance_dialog/mn_servers_stop_rebalance_dialog.html
index 309da246a1..e029f030a5 100644
--- a/priv/public/ui/app/mn_admin/mn_servers/stop_rebalance_dialog/mn_servers_stop_rebalance_dialog.html
+++ b/priv/public/ui/app/mn_admin/mn_servers/stop_rebalance_dialog/mn_servers_stop_rebalance_dialog.html
@@ -1,14 +1,20 @@
-<div id="stop_rebalance_confirmation_dialog" style="width: 711px">
-  <h1 class="dialog_corner_radius">Confirm Rebalance Stop</h1>
+<div class="dialog-med">
+  <div class="panel-header">
+    <h2>Confirm Rebalance Stop</h2>
+  </div>
   <div mn-spinner="viewLoading">
-    <div class="warning pat_20">
-      <strong>Warning</strong> – Stopping rebalance is unsafe at this
-      moment since cluster may be in a partitioned state. Continue only if
-      you're perfectly sure that this is not the case.
+    <div class="panel-content">
+      <p class="error">
+        <strong>Warning</strong> – Stopping rebalance is unsafe at this
+        moment since cluster may be in a partitioned state. Continue only if
+        you're perfectly sure that this is not the case.
+      </p>
     </div>
-    <div class="right save_cancel">
-      <button type="submit" class="save_button float_right" ng-click="serversStopRebalanceDialogCtl.onStopRebalance()">Stop</button>
-      <a class="close cancel_button float_right" ng-click="$dismiss()">Cancel</a>
+    <div class="panel-footer">
+      <a href="" ng-click="$dismiss()">Cancel</a>
+      <button
+         type="submit"
+         ng-click="serversStopRebalanceDialogCtl.onStopRebalance()">Stop Rebalance</button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/priv/public/ui/app/template/modal/window.html b/priv/public/ui/app/template/modal/window.html
index 586a66d426..a7d25fbd06 100644
--- a/priv/public/ui/app/template/modal/window.html
+++ b/priv/public/ui/app/template/modal/window.html
@@ -6,7 +6,7 @@
    ng-style="{'z-index': 1050 + index*10}">
   <div class="panel dialog">
     <a
-       class="modal-close"
+       class="ui-dialog-titlebar-close modal-close"
        ng-click="$parent.$dismiss('X')">
       X
     </a>