diff --git a/packages/kbn-ui-framework/dist/ui_framework.css b/packages/kbn-ui-framework/dist/ui_framework.css
index 0d013535e3555..101f718149647 100644
--- a/packages/kbn-ui-framework/dist/ui_framework.css
+++ b/packages/kbn-ui-framework/dist/ui_framework.css
@@ -78,15 +78,12 @@ main {
   overflow: hidden; }
 
 .kuiActionItem {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between; }
@@ -105,15 +102,12 @@ main {
   background-color: rgba(0, 0, 0, 0.1); }
 
 .kuiBar {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -121,22 +115,18 @@ main {
   /* 1 */ }
 
 .kuiBarSection {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -145,12 +135,10 @@ main {
     margin-left: 0; }
   .kuiBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -201,12 +189,10 @@ main {
    * 1. Solves whitespace problems introduced by inline elements.
    */
 .kuiButton__inner {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   /* 1 */
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -513,11 +499,9 @@ main {
     background-color: rgba(165, 231, 255, 0.5); }
 
 .kuiButtonGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -545,24 +529,19 @@ main {
   margin-left: 2px; }
 
 .kuiButtonGroup--fullWidth {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
   .kuiButtonGroup--fullWidth > .kuiButton {
-    -webkit-box-flex: 1;
     -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
     text-align: center; }
 
 .kuiCard {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
@@ -572,20 +551,15 @@ main {
   line-height: 1.5; }
 
 .kuiCard__description {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
       -ms-flex-pack: start;
           justify-content: flex-start;
@@ -613,7 +587,6 @@ main {
  * 2. Offset the spacing between wrapped cards.
  */
 .kuiCardGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -628,7 +601,6 @@ main {
    * 2. Use an even margin all around the card so that the spacing is still even when wrapped.
    */ }
   .kuiCardGroup .kuiCard {
-    -webkit-box-flex: 1;
     -webkit-flex: 1 1 auto;
         -ms-flex: 1 1 auto;
             flex: 1 1 auto;
@@ -636,7 +608,6 @@ main {
     margin: 15px;
     /* 2 */ }
     .kuiCardGroup .kuiCard .kuiCard__description {
-      -webkit-box-flex: 1;
       -webkit-flex: 1 1 auto;
           -ms-flex: 1 1 auto;
               flex: 1 1 auto; }
@@ -687,20 +658,15 @@ main {
   right: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.7);
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -736,11 +702,9 @@ main {
   cursor: pointer; }
 
 .kuiColorPicker__preview {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -890,11 +854,9 @@ main {
   margin-right: 8px; }
 
 .kuiContextMenu__itemLayout {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -1071,13 +1033,11 @@ main {
     color: #ffffff; }
 
 .kuiContextMenuItem__inner {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiContextMenuItem__text {
-  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1; }
@@ -1096,13 +1056,11 @@ main {
     text-decoration: none; }
 
 .kuiEvent {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiEventSymbol {
-  -webkit-box-flex: 0;
   -webkit-flex: 0 1 auto;
       -ms-flex: 0 1 auto;
           flex: 0 1 auto;
@@ -1111,7 +1069,6 @@ main {
   padding-right: 8px; }
 
 .kuiEventBody {
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 0%;
       -ms-flex: 1 1 0%;
           flex: 1 1 0%; }
@@ -1150,16 +1107,13 @@ main {
   border-bottom: solid 2px #00A69B; }
 
 .kuiFlexGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
   .kuiFlexGroup .kuiFlexItem {
-    -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; }
@@ -1185,13 +1139,11 @@ main {
     margin: 20px; }
 
 .kuiFlexGroup--justifyContentSpaceEvenly {
-  -webkit-box-pack: space-evenly;
   -webkit-justify-content: space-evenly;
       -ms-flex-pack: space-evenly;
           justify-content: space-evenly; }
 
 .kuiFlexGroup--justifyContentSpaceBetween {
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between; }
@@ -1202,31 +1154,26 @@ main {
           justify-content: space-around; }
 
 .kuiFlexGroup--justifyContentCenter {
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center; }
 
 .kuiFlexGroup--justifyContentFlexEnd {
-  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end; }
 
 .kuiFlexGroup--alignItemsStart {
-  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start; }
 
 .kuiFlexGroup--alignItemsCenter {
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
 
 .kuiFlexGroup--alignItemsEnd {
-  -webkit-box-align: end;
   -webkit-align-items: flex-end;
       -ms-flex-align: end;
           align-items: flex-end; }
@@ -1243,7 +1190,6 @@ main {
             flex-wrap: wrap; } }
 
 .kuiFlexGrid {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -1252,12 +1198,10 @@ main {
           flex-wrap: wrap;
   margin-bottom: 0; }
   .kuiFlexGrid > .kuiFlexItem {
-    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0; }
     .kuiFlexGrid > .kuiFlexItem.kuiFlexItem--flexGrowZero {
-      -webkit-box-flex: 0 !important;
       -webkit-flex-grow: 0 !important;
           -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
@@ -1274,7 +1218,6 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1285,7 +1228,6 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1296,7 +1238,6 @@ main {
 
 .kuiFlexGrid--gutterSmall {
   margin: -4px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1314,7 +1255,6 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1325,7 +1265,6 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1336,7 +1275,6 @@ main {
 
 .kuiFlexGrid--gutterMedium {
   margin: -8px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1354,7 +1292,6 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1365,7 +1302,6 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1376,7 +1312,6 @@ main {
 
 .kuiFlexGrid--gutterLarge {
   margin: -12px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1394,7 +1329,6 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1405,7 +1339,6 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1416,7 +1349,6 @@ main {
 
 .kuiFlexGrid--gutterXLarge {
   margin: -16px;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -1429,13 +1361,10 @@ main {
  * 1. Allow KuiPanels to expand to fill the item.
  */
 .kuiFlexItem {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   /* 1 */
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
@@ -1446,7 +1375,6 @@ main {
    */ }
   .kuiFlexItem.kuiFlexItem--flexGrowZero {
     /* 1 */
-    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0;
@@ -1456,52 +1384,42 @@ main {
             flex-basis: auto;
     /* 2 */ }
   .kuiFlexItem.kuiFlexItem--flexGrow1 {
-    -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
         -ms-flex-positive: 1;
             flex-grow: 1; }
   .kuiFlexItem.kuiFlexItem--flexGrow2 {
-    -webkit-box-flex: 2;
     -webkit-flex-grow: 2;
         -ms-flex-positive: 2;
             flex-grow: 2; }
   .kuiFlexItem.kuiFlexItem--flexGrow3 {
-    -webkit-box-flex: 3;
     -webkit-flex-grow: 3;
         -ms-flex-positive: 3;
             flex-grow: 3; }
   .kuiFlexItem.kuiFlexItem--flexGrow4 {
-    -webkit-box-flex: 4;
     -webkit-flex-grow: 4;
         -ms-flex-positive: 4;
             flex-grow: 4; }
   .kuiFlexItem.kuiFlexItem--flexGrow5 {
-    -webkit-box-flex: 5;
     -webkit-flex-grow: 5;
         -ms-flex-positive: 5;
             flex-grow: 5; }
   .kuiFlexItem.kuiFlexItem--flexGrow6 {
-    -webkit-box-flex: 6;
     -webkit-flex-grow: 6;
         -ms-flex-positive: 6;
             flex-grow: 6; }
   .kuiFlexItem.kuiFlexItem--flexGrow7 {
-    -webkit-box-flex: 7;
     -webkit-flex-grow: 7;
         -ms-flex-positive: 7;
             flex-grow: 7; }
   .kuiFlexItem.kuiFlexItem--flexGrow8 {
-    -webkit-box-flex: 8;
     -webkit-flex-grow: 8;
         -ms-flex-positive: 8;
             flex-grow: 8; }
   .kuiFlexItem.kuiFlexItem--flexGrow9 {
-    -webkit-box-flex: 9;
     -webkit-flex-grow: 9;
         -ms-flex-positive: 9;
             flex-grow: 9; }
   .kuiFlexItem.kuiFlexItem--flexGrow10 {
-    -webkit-box-flex: 10;
     -webkit-flex-grow: 10;
         -ms-flex-positive: 10;
             flex-grow: 10; }
@@ -1592,11 +1510,9 @@ main {
       background-color: #0079a5; }
 
 .kuiCheckBoxLabel {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -1860,18 +1776,15 @@ main {
  * 1. We may want to put elements in here which have different heights.
  */
 .kuiFieldGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   /* 1 */ }
 
 .kuiFieldGroup--alignTop {
-  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start; }
@@ -1882,7 +1795,6 @@ main {
     margin-left: 10px; }
 
 .kuiFieldGroupSection--wide {
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
@@ -1890,7 +1802,6 @@ main {
     width: 100%; }
 
 .kuiGallery {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -1899,20 +1810,15 @@ main {
           flex-wrap: wrap; }
 
 .kuiGalleryItem {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -1931,15 +1837,12 @@ main {
     border-color: #00A6FF; }
 
 .kuiGalleryItem__image {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -1970,15 +1873,12 @@ main {
   color: #666; }
 
 .kuiHeaderBar {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -1990,22 +1890,18 @@ main {
  * 1. Align a single section to the left by default.
  */
 .kuiHeaderBarSection {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiHeaderBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -2014,12 +1910,10 @@ main {
     margin-left: 0; }
   .kuiHeaderBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -2118,11 +2012,9 @@ main {
  * 1. Align with first line of title text if it wraps.
  */
 .kuiInfoPanelHeader {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: baseline;
   -webkit-align-items: baseline;
       -ms-flex-align: baseline;
           align-items: baseline;
@@ -2179,11 +2071,9 @@ main {
  *    a bit.
  */
 .kuiLocalBreadcrumbs {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2253,15 +2143,12 @@ main {
   padding: 0; }
 
 .kuiDatePickerNavigation {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2425,13 +2312,11 @@ main {
     /* 1 */ }
 
 .kuiLocalDropdownPanels {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
 
 .kuiLocalDropdownPanel {
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 0%;
       -ms-flex: 1 1 0%;
           flex: 1 1 0%; }
@@ -2460,15 +2345,12 @@ main {
     margin-bottom: 0; }
 
 .kuiLocalDropdownHeader {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2487,7 +2369,6 @@ main {
     color: #cecece; }
 
 .kuiLocalDropdownHeader__actions {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -2549,21 +2430,17 @@ main {
     color: #9e9e9e; }
 
 .kuiLocalMenu {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
 
 .kuiLocalMenuItem {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -2615,16 +2492,12 @@ main {
  *    dropdown.
  */
 .kuiLocalNav {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2643,15 +2516,12 @@ main {
  * 1. Allow row to expand if the content is so long that it wraps.
  */
 .kuiLocalNavRow {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -2659,11 +2529,9 @@ main {
   /* 1 */ }
 
 .kuiLocalNavRow__section {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: stretch;
   -webkit-align-items: stretch;
       -ms-flex-align: stretch;
           align-items: stretch; }
@@ -2678,14 +2546,12 @@ main {
 .kuiLocalNavRow--secondary {
   padding: 0 10px;
   /* 1 */
-  -webkit-box-align: start;
   -webkit-align-items: flex-start;
       -ms-flex-align: start;
           align-items: flex-start;
   /* 1 */ }
 
 .kuiLocalSearch {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -2708,7 +2574,6 @@ main {
   transition: border-color 0.1s linear;
   min-height: 30px;
   /* 1 */
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
       -ms-flex: 1 1 100%;
           flex: 1 1 100%;
@@ -2738,7 +2603,6 @@ main {
 
 .kuiLocalSearchInput--secondary {
   height: 30px;
-  -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
@@ -2750,11 +2614,9 @@ main {
     border-right-color: #333333; }
 
 .kuiLocalSearchAssistedInput {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 100%;
       -ms-flex: 1 1 100%;
           flex: 1 1 100%;
@@ -2857,11 +2719,9 @@ main {
  * 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
  */
 .kuiLocalTabs {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: end;
   -webkit-align-items: flex-end;
       -ms-flex-align: end;
           align-items: flex-end;
@@ -2906,11 +2766,9 @@ main {
     color: #dedede; }
 
 .kuiLocalTitle {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -3042,7 +2900,6 @@ main {
     /* 3 */ }
 
 .kuiMenuButtonGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -3050,7 +2907,6 @@ main {
     margin-left: 4px; }
 
 .kuiMenuButtonGroup--alignRight {
-  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end; }
@@ -3073,7 +2929,6 @@ main {
     color: #191E23; }
 
 .kuiMicroButtonGroup {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex; }
@@ -3087,15 +2942,12 @@ main {
   left: 0;
   right: 0;
   bottom: 0;
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -3121,15 +2973,12 @@ main {
   min-width: auto; }
 
 .kuiModalHeader {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -3170,11 +3019,9 @@ main {
     color: #cecece; }
 
 .kuiModalFooter {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
       -ms-flex-pack: end;
           justify-content: flex-end;
@@ -3213,11 +3060,9 @@ main {
  * 1. Put 10px of space between each child.
  */
 .kuiPager {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
@@ -3237,21 +3082,16 @@ main {
   border-radius: 4px; }
 
 .kuiPanel--prompt {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   text-align: center;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
@@ -3268,29 +3108,23 @@ main {
   border-radius: 0; }
 
 .kuiPanel--centered {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
   -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center; }
 
 .kuiPanelHeader {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -3352,22 +3186,18 @@ main {
  * 1. Undo what barSection mixin does.
  */
 .kuiPanelHeaderSection {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiPanelHeaderSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -3376,12 +3206,10 @@ main {
     margin-left: 0; }
   .kuiPanelHeaderSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -3406,7 +3234,6 @@ main {
   background-color: #FFF;
   border: 1px solid #D9D9D9;
   border-radius: 4px;
-  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
       -ms-flex-positive: 1;
           flex-grow: 1; }
@@ -3419,7 +3246,6 @@ main {
   .kuiPanelSimple.kuiPanelSimple--shadow {
     box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
   .kuiPanelSimple.kuiPanelSimple--flexGrowZero {
-    -webkit-box-flex: 0;
     -webkit-flex-grow: 0;
         -ms-flex-positive: 0;
             flex-grow: 0; }
@@ -3513,16 +3339,12 @@ main {
     color: #ffffff; }
 
 .kuiEmptyTablePrompt {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
   -webkit-flex-direction: column;
       -ms-flex-direction: column;
           flex-direction: column;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
@@ -3537,11 +3359,9 @@ main {
   margin-top: 10px; }
 
 .kuiStatusText {
-  display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: baseline;
   -webkit-align-items: baseline;
       -ms-flex-align: baseline;
           align-items: baseline; }
@@ -3657,11 +3477,9 @@ main {
     display: block;
     opacity: 1; }
   .kuiTableHeaderCellButton .kuiTableHeaderCell__liner {
-    display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
-    -webkit-box-align: center;
     -webkit-align-items: center;
         -ms-flex-align: center;
             align-items: center; }
@@ -3762,7 +3580,6 @@ main {
   line-height: 1.5; }
 
 .kuiTabs {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
@@ -3886,15 +3703,12 @@ main {
     /* 1 */ }
 
 .kuiToolBar {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -3945,22 +3759,18 @@ main {
       border-color: #0079a5; }
 
 .kuiToolBarSection {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -3969,12 +3779,10 @@ main {
     margin-left: 0; }
   .kuiToolBarSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -3994,15 +3802,12 @@ main {
   /* 1 */ }
 
 .kuiToolBarFooter {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
@@ -4014,22 +3819,18 @@ main {
   border: 1px solid #D9D9D9; }
 
 .kuiToolBarFooterSection {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
   margin-left: 25px;
   margin-right: 25px; }
   .kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
-    -webkit-box-pack: center;
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center;
@@ -4038,12 +3839,10 @@ main {
     margin-left: 0; }
   .kuiToolBarFooterSection:last-child {
     margin-right: 0;
-    -webkit-box-flex: 0;
     -webkit-flex: 0 1 auto;
         -ms-flex: 0 1 auto;
             flex: 0 1 auto;
     /* 4 */
-    -webkit-box-pack: end;
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end;
@@ -4061,17 +3860,14 @@ main {
  *    kuiToolBarSection sibling.
  */
 .kuiToolBarSearch {
-  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
   margin-left: 25px;
   margin-right: 25px;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
@@ -4087,7 +3883,6 @@ main {
     /* 1 */ }
 
 .kuiToolBarSearchBox {
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
@@ -4210,7 +4005,6 @@ main {
 
 .kuiView {
   background-color: #FFF;
-  -webkit-box-flex: 1;
   -webkit-flex: 1 1 auto;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto; }
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.js b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.js
index e39b25e8e522b..f2bac7a02b99c 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.js
@@ -38,12 +38,12 @@ export class CollapsiblePanel extends Component {
 
   getTitle = () => {
     return (
-      <EuiFlexGroup alignItems={'baseline'}>
+      <EuiFlexGroup alignItems={'baseline'} gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <div>
-              <EuiIcon type={this.props.iconType} size={'l'} className={'collapsiblePanel__logo'} /> {this.props.title}
-            </div>
+            <h2>
+              <EuiIcon type={this.props.iconType} size={'xl'} className={'collapsiblePanel__logo'} /> {this.props.title}
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less
index cc56943ffcda9..ffb065880c560 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/collapsible_panel.less
@@ -1,3 +1,4 @@
 .collapsiblePanel__logo {
-  margin-right: 10px;
+  margin-right: 8px;
+  vertical-align: text-bottom;
 }
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js b/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js
index 0d7b89e4f2563..5843ece2ee3e2 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/edit_role_page.js
@@ -9,10 +9,10 @@ import { get } from 'lodash';
 import { toastNotifications } from 'ui/notify';
 import {
   EuiPanel,
-  EuiText,
+  EuiTitle,
   EuiSpacer,
   EuiPage,
-  EuiPageContent,
+  EuiButtonEmpty,
   EuiForm,
   EuiFormRow,
   EuiFieldText,
@@ -57,27 +57,21 @@ export class EditRolePage extends Component {
       <div>
         <PageHeader breadcrumbs={this.props.breadcrumbs} />
         <EuiPage className="editRolePage">
-          <EuiPageContent className="editRolePage__content">
-            <EuiForm {...this.state.formError}>
-              {this.getFormTitle()}
+          <EuiForm {...this.state.formError}>
+            {this.getFormTitle()}
 
-              <EuiSpacer />
+            <EuiSpacer />
 
-              {this.getRoleName()}
+            {this.getRoleName()}
 
-              <EuiSpacer />
+            {this.getElasticsearchPrivileges()}
 
-              {this.getElasticsearchPrivileges()}
+            {this.getKibanaPrivileges()}
 
-              <EuiSpacer />
+            <EuiSpacer />
 
-              {this.getKibanaPrivileges()}
-
-              <EuiSpacer size={'xl'} />
-
-              {this.getFormButtons()}
-            </EuiForm>
-          </EuiPageContent>
+            {this.getFormButtons()}
+          </EuiForm>
         </EuiPage>
       </div>
     );
@@ -94,12 +88,7 @@ export class EditRolePage extends Component {
     }
 
     return (
-      <EuiFlexGroup justifyContent={'spaceBetween'}>
-        <EuiFlexItem grow={false}>
-          <EuiText><h1>{titleText}</h1></EuiText>
-        </EuiFlexItem>
-        {this.getActionButton()}
-      </EuiFlexGroup>
+      <EuiTitle size="l"><h1>{titleText} <ReservedRoleBadge role={this.props.role} /></h1></EuiTitle>
     );
   };
 
@@ -118,19 +107,22 @@ export class EditRolePage extends Component {
   getRoleName = () => {
     return (
       <EuiPanel>
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiFormRow label={'Role name'} {...this.validator.validateRoleName(this.state.role)}>
-              <EuiFieldText
-                name={'name'}
-                value={this.state.role.name || ''}
-                onChange={this.onNameChange}
-                readOnly={isReservedRole(this.props.role) || this.editingExistingRole()}
-              />
-            </EuiFormRow>
-          </EuiFlexItem>
-          <ReservedRoleBadge role={this.props.role} />
-        </EuiFlexGroup>
+        <EuiFormRow
+          label={'Role name'}
+          helpText={
+            !isReservedRole(this.props.role) && this.editingExistingRole() ?
+              "A role's name cannot be changed once it has been created." : undefined
+          }
+          {...this.validator.validateRoleName(this.state.role)}
+        >
+
+          <EuiFieldText
+            name={'name'}
+            value={this.state.role.name || ''}
+            onChange={this.onNameChange}
+            readOnly={isReservedRole(this.props.role) || this.editingExistingRole()}
+          />
+        </EuiFormRow>
       </EuiPanel>
     );
   }
@@ -149,17 +141,20 @@ export class EditRolePage extends Component {
 
   getElasticsearchPrivileges() {
     return (
-      <ElasticsearchPrivileges
-        role={this.state.role}
-        editable={!isReservedRole(this.state.role)}
-        httpClient={this.props.httpClient}
-        onChange={this.onRoleChange}
-        runAsUsers={this.props.runAsUsers}
-        validator={this.validator}
-        indexPatterns={this.props.indexPatterns}
-        allowDocumentLevelSecurity={this.props.allowDocumentLevelSecurity}
-        allowFieldLevelSecurity={this.props.allowFieldLevelSecurity}
-      />
+      <div>
+        <EuiSpacer />
+        <ElasticsearchPrivileges
+          role={this.state.role}
+          editable={!isReservedRole(this.state.role)}
+          httpClient={this.props.httpClient}
+          onChange={this.onRoleChange}
+          runAsUsers={this.props.runAsUsers}
+          validator={this.validator}
+          indexPatterns={this.props.indexPatterns}
+          allowDocumentLevelSecurity={this.props.allowDocumentLevelSecurity}
+          allowFieldLevelSecurity={this.props.allowFieldLevelSecurity}
+        />
+      </div>
     );
   }
 
@@ -175,40 +170,41 @@ export class EditRolePage extends Component {
     }
 
     return (
-      <KibanaPrivileges
-        kibanaAppPrivileges={this.props.kibanaAppPrivileges}
-        rbacApplication={this.props.rbacApplication}
-        role={this.state.role}
-        onChange={this.onRoleChange}
-      />
+      <div>
+        <EuiSpacer />
+        <KibanaPrivileges
+          kibanaAppPrivileges={this.props.kibanaAppPrivileges}
+          rbacApplication={this.props.rbacApplication}
+          role={this.state.role}
+          onChange={this.onRoleChange}
+        />
+      </div>
     );
   };
 
   getFormButtons = () => {
     if (isReservedRole(this.props.role)) {
       return (
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.backToRoleList}>
-              Return to role list
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        <EuiButton onClick={this.backToRoleList}>
+          Return to role list
+        </EuiButton>
       );
     }
 
     const saveText = this.editingExistingRole() ? 'Update role' : 'Create role';
 
     return (
-      <EuiFlexGroup>
+      <EuiFlexGroup responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiButton fill onClick={this.saveRole} disabled={isReservedRole(this.props.role)}>{saveText}</EuiButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={this.backToRoleList}>
+          <EuiButtonEmpty onClick={this.backToRoleList}>
             Cancel
-          </EuiButton>
+          </EuiButtonEmpty>
         </EuiFlexItem>
+        <EuiFlexItem grow={true} />
+        {this.getActionButton()}
       </EuiFlexGroup>
     );
   };
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.js b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.js
index 49be5cfc83c4e..a0c6eca6f0c6e 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/elasticsearch_privileges.js
@@ -11,14 +11,11 @@ import {
   EuiSpacer,
   EuiComboBox,
   EuiFormRow,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiButton,
   EuiDescribedFormGroup,
   EuiTitle,
   EuiHorizontalRule,
   EuiLink,
-  EuiIcon,
 } from '@elastic/eui';
 import './elasticsearch_privileges.less';
 import { ClusterPrivileges } from './cluster_privileges';
@@ -71,14 +68,14 @@ export class ElasticsearchPrivileges extends Component {
     return (
       <Fragment>
         <EuiDescribedFormGroup
-          title={<p>Cluster privileges {this.learnMore(documentationLinks.esClusterPrivileges)}</p>}
+          title={<h3>Cluster privileges</h3>}
           description={
             <p>
-              Manage the actions this role can perform against your cluster.
+              Manage the actions this role can perform against your cluster. {this.learnMore(documentationLinks.esClusterPrivileges)}
             </p>
           }
         >
-          <EuiFormRow fullWidth={true}>
+          <EuiFormRow fullWidth={true} hasEmptyLabelSpace>
             <ClusterPrivileges role={this.props.role} onChange={this.onClusterPrivilegesChange} />
           </EuiFormRow>
         </EuiDescribedFormGroup>
@@ -86,14 +83,14 @@ export class ElasticsearchPrivileges extends Component {
         <EuiSpacer />
 
         <EuiDescribedFormGroup
-          title={<p>Run As privileges {this.learnMore(documentationLinks.esRunAsPrivileges)}</p>}
+          title={<h3>Run As privileges</h3>}
           description={
             <p>
-              Allow requests to be submitted on behalf of other users.
+              Allow requests to be submitted on the behalf of other users. {this.learnMore(documentationLinks.esRunAsPrivileges)}
             </p>
           }
         >
-          <EuiFormRow>
+          <EuiFormRow hasEmptyLabelSpace>
             <EuiComboBox
               placeholder={this.props.editable ? 'Add a user...' : null}
               options={this.props.runAsUsers.map(username => ({ id: username, label: username }))}
@@ -106,32 +103,26 @@ export class ElasticsearchPrivileges extends Component {
 
         <EuiSpacer />
 
-        <EuiFormRow fullWidth={true}>
-          <div>
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiTitle size={'xs'}><p>Index privileges {this.learnMore(documentationLinks.esIndicesPrivileges)}</p></EuiTitle>
-                <EuiText size={'s'} color={'subdued'}><p>Control access to the data in your cluster.</p></EuiText>
-              </EuiFlexItem>
-              {this.props.editable && (
-                <EuiFlexItem grow={false}>
-                  <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addIndexPrivilege}>Add Index Privilege</EuiButton>
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-            <EuiHorizontalRule margin={'xs'} />
-          </div>
-        </EuiFormRow>
-        <EuiFormRow fullWidth={true}>
-          <IndexPrivileges {...indexProps} />
-        </EuiFormRow>
+        <EuiTitle size={'xs'}><h3>Index privileges</h3></EuiTitle>
+        <EuiSpacer size={'s'} />
+        <EuiText size={'s'} color={'subdued'}>
+          <p>Control access to the data in your cluster. {this.learnMore(documentationLinks.esIndicesPrivileges)}</p>
+        </EuiText>
+
+        <IndexPrivileges {...indexProps} />
+
+        <EuiHorizontalRule />
+
+        {this.props.editable && (
+          <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addIndexPrivilege}>Add index privilege</EuiButton>
+        )}
       </Fragment>
     );
   }
 
   learnMore = (href) => (
     <EuiLink className="editRole__learnMore" href={href} target={'_blank'}>
-      <EuiIcon size={"s"} type="questionInCircle" />
+      Learn more
     </EuiLink>
   );
 
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.js b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.js
index 615edfa032188..479762770fce6 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/index_privilege_form.js
@@ -6,7 +6,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import {
-  EuiCallOut,
   EuiComboBox,
   EuiTextArea,
   EuiFormRow,
@@ -15,8 +14,7 @@ import {
   EuiSwitch,
   EuiSpacer,
   EuiHorizontalRule,
-  EuiLink,
-  EuiIcon,
+  EuiButtonIcon,
 } from '@elastic/eui';
 import { getIndexPrivileges } from '../../../../../services/role_privileges';
 
@@ -46,19 +44,21 @@ export class IndexPrivilegeForm extends Component {
 
   render() {
     return (
-      <div>
-        <EuiFlexGroup className="index-privilege-form" alignItems={'center'}>
+      <Fragment>
+        <EuiHorizontalRule />
+        <EuiFlexGroup className="index-privilege-form">
           <EuiFlexItem>
             {this.getPrivilegeForm()}
           </EuiFlexItem>
           {this.props.allowDelete && (
             <EuiFlexItem grow={false}>
-              <EuiLink color={'danger'} onClick={this.props.onDelete}><EuiIcon type={'trash'} size={'m'} /></EuiLink>
+              <EuiFormRow hasEmptyLabelSpace>
+                <EuiButtonIcon aria-label={'Delete index privilege'} color={'danger'} onClick={this.props.onDelete} iconType={'trash'} />
+              </EuiFormRow>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
-        <EuiHorizontalRule />
-      </div>
+      </Fragment>
     );
   }
 
@@ -90,6 +90,8 @@ export class IndexPrivilegeForm extends Component {
           {this.getGrantedFieldsControl()}
         </EuiFlexGroup>
 
+        <EuiSpacer />
+
         {this.getGrantedDocumentsControl()}
       </Fragment>
     );
@@ -108,27 +110,36 @@ export class IndexPrivilegeForm extends Component {
 
     const { grant = [] } = indexPrivilege.field_security || {};
 
-    let grantedFieldsWarning = null;
+    // TODO: Remove this completely, if ok with just putting the text in the helptext
+    // let grantedFieldsWarning = null;
 
     if (allowFieldLevelSecurity) {
 
-      if (grant.length === 0) {
-        grantedFieldsWarning = (
-          <Fragment>
-            <EuiSpacer />
-            <EuiCallOut title={'No Granted Fields'} size="s" color="warning" iconType="help">
-              <p>
-                If no fields are granted, then users assigned to this role will not be able to
-                see any data for this index. Is this really what you want?
-              </p>
-            </EuiCallOut>
-          </Fragment>
-        );
-      }
+      // if (grant.length === 0) {
+      //   grantedFieldsWarning = (
+      //     <Fragment>
+      //       <EuiSpacer />
+      //       <EuiCallOut title={'No Granted Fields'} size="s" color="warning" iconType="help">
+      //         <p>
+      //           If no fields are granted, then users assigned to this role will not be able to
+      //           see any data for this index. Is this really what you want?
+      //         </p>
+      //       </EuiCallOut>
+      //     </Fragment>
+      //   );
+      // }
 
       return (
         <EuiFlexItem>
-          <EuiFormRow label={'Granted Fields (optional)'} fullWidth={true} className="indexPrivilegeForm__grantedFieldsRow">
+          <EuiFormRow
+            label={'Granted fields (optional)'}
+            fullWidth={true}
+            className="indexPrivilegeForm__grantedFieldsRow"
+            helpText={
+              grant.length === 0 ?
+                'If no fields are granted, then users assigned to this role will not be able to see any data for this index.' : undefined
+            }
+          >
             <Fragment>
               <EuiComboBox
                 options={availableFields ? availableFields.map(toOption) : []}
@@ -137,7 +148,6 @@ export class IndexPrivilegeForm extends Component {
                 onChange={this.onGrantedFieldsChange}
                 isDisabled={this.props.isReservedRole}
               />
-              {grantedFieldsWarning}
             </Fragment>
           </EuiFormRow>
         </EuiFlexItem>
@@ -158,9 +168,9 @@ export class IndexPrivilegeForm extends Component {
     }
 
     return (
-      <EuiFlexGroup>
+      <EuiFlexGroup direction="column">
         {!this.props.isReservedRole &&
-          <EuiFlexItem grow={3}>
+          <EuiFlexItem>
             <EuiSwitch
               label={'Restrict documents query'}
               compressed={true}
@@ -170,10 +180,10 @@ export class IndexPrivilegeForm extends Component {
           </EuiFlexItem>
         }
         {this.state.queryExpanded &&
-          <EuiFlexItem grow={5}>
-            <EuiFormRow label={'Granted Documents Query (optional)'} fullWidth={true}>
+          <EuiFlexItem>
+            <EuiFormRow label={'Granted documents query'} fullWidth={true}>
               <EuiTextArea
-                rows={1}
+                style={{ resize: "none" }}
                 fullWidth={true}
                 value={indexPrivilege.query}
                 onChange={this.onQueryChange}
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana_privileges.js b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana_privileges.js
index 41537bd27f7a2..a8c2a2c52cbe0 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana_privileges.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana_privileges.js
@@ -14,6 +14,7 @@ import { CollapsiblePanel } from '../collapsible_panel';
 import {
   EuiSelect,
   EuiDescribedFormGroup,
+  EuiFormRow,
 } from '@elastic/eui';
 
 const noPrivilegeValue = '-none-';
@@ -64,12 +65,14 @@ export class KibanaPrivileges extends Component {
         title={<p>Application privileges</p>}
         description={<p>Manage the actions this role can perform within Kibana.</p>}
       >
-        <EuiSelect
-          options={options}
-          value={value}
-          onChange={this.onKibanaPrivilegesChange}
-          disabled={isReservedRole(role)}
-        />
+        <EuiFormRow hasEmptyLabelSpace>
+          <EuiSelect
+            options={options}
+            value={value}
+            onChange={this.onKibanaPrivilegesChange}
+            disabled={isReservedRole(role)}
+          />
+        </EuiFormRow>
       </EuiDescribedFormGroup>
     );
   }
diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/reserved_role_badge.js b/x-pack/plugins/security/public/views/management/edit_role/components/reserved_role_badge.js
index 8d0c17bd062ab..8b750b19338ed 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/components/reserved_role_badge.js
+++ b/x-pack/plugins/security/public/views/management/edit_role/components/reserved_role_badge.js
@@ -9,9 +9,8 @@ import PropTypes from 'prop-types';
 
 import { isReservedRole } from '../../../../lib/role';
 import {
-  EuiBadge,
+  EuiIcon,
   EuiToolTip,
-  EuiFlexItem,
 } from '@elastic/eui';
 
 
@@ -22,11 +21,9 @@ export const ReservedRoleBadge = (props) => {
 
   if (isReservedRole(role)) {
     return (
-      <EuiFlexItem grow={false}>
-        <EuiToolTip content={'Reserved roles are built-in and cannot be removed or modified.'}>
-          <EuiBadge iconType={'lock'}>Reserved Role</EuiBadge>
-        </EuiToolTip>
-      </EuiFlexItem>
+      <EuiToolTip content={'Reserved roles are built-in and cannot be removed or modified.'}>
+        <EuiIcon style={{ verticalAlign: "super" }} type={'lock'} />
+      </EuiToolTip>
     );
   }
   return null;
diff --git a/x-pack/plugins/security/public/views/management/edit_role/edit_role.less b/x-pack/plugins/security/public/views/management/edit_role/edit_role.less
index 7b6b150c0444e..d4f7ac04880d6 100644
--- a/x-pack/plugins/security/public/views/management/edit_role/edit_role.less
+++ b/x-pack/plugins/security/public/views/management/edit_role/edit_role.less
@@ -1,8 +1,10 @@
-#editRoleReactRoot, .editRolePage, .editRolePage__content {
+#editRoleReactRoot {
   background: #f5f5f5;
+  flex-grow: 1;
 }
 
-.editRolePage__content {
-  border: none;
-  box-shadow: none;
+.editRolePage {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
 }