diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
index dc4d1fe66df419..c2b9370704b299 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.html
@@ -6,86 +6,93 @@
       class="kuiViewContent"
     >
       <!-- Intro -->
-      <div class="kuiVerticalRhythm">
-        <div class="kuiBar">
-          <h1 class="kuiTitle">
-            Create index pattern
-          </h1>
+      <h1 class="euiTitle euiTitle--medium">
+        Create index pattern
+      </h1>
 
-          <div class="kuiBarSection">
-            <!-- Include system indices -->
+      <div class="euiSpacer euiSpacer--small"></div>
+
+      <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <div class="euiText">
+            <p class="euiTextColor euiTextColor--subdued">
+              Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
+            </p>
+          </div>
+        </div>
+
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <div
+            class="euiCheckbox"
+            ng-if="controller.isSystemIndicesCheckBoxVisible()"
+          >
+            <input
+              type="checkbox"
+              class="euiCheckbox__input"
+              id="indexPatternCreationIncludeSystemIndices"
+              ng-model="controller.doesIncludeSystemIndices"
+              ng-change="controller.onIncludeSystemIndicesChange()"
+            >
+            <div class="euiCheckbox__square">
+              <div class="euiCheckbox__check"></div>
+            </div>
             <label
-              ng-if="controller.isSystemIndicesCheckBoxVisible()"
-              class="kuiCheckBoxLabel"
+              class="euiCheckbox__label"
               for="indexPatternCreationIncludeSystemIndices"
             >
-              <input
-                type="checkbox"
-                id="indexPatternCreationIncludeSystemIndices"
-                class="kuiCheckBox"
-                ng-model="controller.doesIncludeSystemIndices"
-                ng-change="controller.onIncludeSystemIndicesChange()"
-              >
-
-              <span class="kuiCheckBoxLabel__text">
-                Include system indices
-              </span>
+              Include system indices
             </label>
           </div>
         </div>
-
-        <p class="kuiText kuiSubduedText">
-          Kibana uses index patterns to retrieve data from Elasticsearch indices for things like visualizations.
-        </p>
       </div>
 
-      <!-- User has no data -->
-      <div
-        class="kuiPanel kuiVerticalRhythm"
-        ng-if="!controller.hasIndices()"
-      >
-        <div class="kuiPanelBody">
-          <!-- Fetching state -->
-          <div
-            ng-if="controller.isFetchingExistingIndices"
-            class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm"
-          >
-            <div class="kuiPanelBody">
-              <h2 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
-                Checking for Elasticsearch data
-              </h2>
+      <div class="euiSpacer euiSpacer--m"></div>
 
-              <div class="kuiVerticalRhythm">
-                <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
-                  <span class="kuiStatusText">
-                    <span
+      <div class="euiPanel euiPanel--paddingLarge">
+        <!-- User has no data -->
+        <div ng-if="!controller.hasIndices()">
+          <div class="euiPageContentBody">
+            <div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--responsive">
+              <!-- Fetching state -->
+              <div
+                ng-if="controller.isFetchingExistingIndices"
+                class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
+              >
+                <h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
+                  Checking for Elasticsearch data
+                </h2>
+                <div class="euiSpacer euiSpacer--s"></div>
+                <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter">
+                  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+                    <div
+                      class="euiLoadingSpinner euiLoadingSpinner--medium"
                       aria-hidden="true"
-                      class="kuiStatusText__icon kuiIcon fa-spinner fa-spin"
-                    ></span>
-                    <span>
+                    ></div>
+                  </div>
+                  <div class="euiFlexItem euiFlexItem--flexGrowZero">
+                    <p class="euiTextColor euiTextColor--subdued">
                       Reticulating splines...
-                    </span>
-                  </span>
-                </p>
+                    </p>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-
-          <!-- Empty state -->
-          <div ng-if="!controller.isFetchingExistingIndices">
-            <div class="kuiPanel kuiPanel--prompt kuiPanel--noBorder kuiVerticalRhythm">
-              <div class="kuiPanelBody">
-                <h1 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
-                  Couldn't find any Elasticsearch data
-                </h1>
 
-                <div class="kuiVerticalRhythm">
-                  <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
+              <!-- Empty state -->
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero createIndexPatternPrompt"
+                ng-if="!controller.isFetchingExistingIndices"
+              >
+                <div>
+                  <h2 class="euiTitle euiTitle--small euiTextColor euiTextColor--subdued">
+                    Couldn't find any Elasticsearch data
+                  </h2>
+                  <div class="euiSpacer euiSpacer--s"></div>
+                  <p class="euiTextColor euiTextColor--subdued">
                     <span>
                       You'll need to index some data into Elasticsearch before you can create an index pattern.
                     </span>
                     <a
-                      class="kuiLink"
+                      class="euiLink"
                       aria-label="Learn how to index data into Elasticsearch"
                       documentation-href="indexPatterns.loadingData"
                       target="_blank"
@@ -94,61 +101,56 @@ <h1 class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
                       Learn how.
                     </a>
                   </p>
-                </div>
-
-                <button
-                  class="kuiButton kuiButton--secondary kuiButton--iconText kuiVerticalRhythm"
-                  ng-click="controller.fetchExistingIndices()"
-                >
-                  <span class="kuiButton__inner">
-                    <span
-                      aria-hidden="true"
-                      class="kuiButton__icon kuiIcon fa-refresh"
-                    ></span>
-                    <span>
-                      Check for new data
+                  <div class="euiSpacer euiSpacer--s"></div>
+                  <button
+                    class="euiButtonEmpty euiButtonEmpty--primary"
+                    ng-click="controller.fetchExistingIndices()"
+                  >
+                    <span class="euiButton__content">
+                      <span>
+                        Check for new data
+                      </span>
                     </span>
-                  </span>
-                </button>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <!-- User has data -->
-      <div
-        class="kuiVerticalRhythm"
-        ng-if="controller.hasIndices()"
-        ng-switch="controller.wizardStep"
-      >
-        <!-- Specify index pattern -->
-        <step-index-pattern
-          ng-switch-when="indexPattern"
-          fetch-existing-indices="controller.fetchExistingIndices()"
-          is-fetching-existing-indices="controller.isFetchingExistingIndices"
-          fetch-matching-indices="controller.fetchMatchingIndices()"
-          is-fetching-matching-indices="controller.isFetchingMatchingIndices"
-          has-indices="controller.hasIndices()"
-          index-pattern-name="controller.formValues.name"
-          all-indices="controller.allIndices"
-          partial-matching-indices="controller.partialMatchingIndices"
-          matching-indices="controller.matchingIndices"
-          go-to-next-step="controller.goToTimeFieldStep()"
-        ></step-index-pattern>
+        <!-- User has data -->
+        <div
+          ng-if="controller.hasIndices()"
+          ng-switch="controller.wizardStep"
+        >
+          <!-- Specify index pattern -->
+          <step-index-pattern
+            ng-switch-when="indexPattern"
+            fetch-existing-indices="controller.fetchExistingIndices()"
+            is-fetching-existing-indices="controller.isFetchingExistingIndices"
+            fetch-matching-indices="controller.fetchMatchingIndices()"
+            is-fetching-matching-indices="controller.isFetchingMatchingIndices"
+            has-indices="controller.hasIndices()"
+            index-pattern-name="controller.formValues.name"
+            all-indices="controller.allIndices"
+            partial-matching-indices="controller.partialMatchingIndices"
+            matching-indices="controller.matchingIndices"
+            go-to-next-step="controller.goToTimeFieldStep()"
+          ></step-index-pattern>
 
-        <!-- Specify optional time field -->
-        <step-time-field
-          ng-switch-when="timeField"
-          index-pattern-id="controller.formValues.id"
-          index-pattern-name="controller.formValues.name"
-          time-field-options="controller.timeFieldOptions"
-          selected-time-field-option="controller.formValues.timeFieldOption"
-          fetch-time-field-options="controller.fetchTimeFieldOptions()"
-          is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
-          go-to-previous-step="controller.goToIndexPatternStep()"
-          create-index-pattern="controller.createIndexPattern()"
-        ></step-time-field>
+          <!-- Specify optional time field -->
+          <step-time-field
+            ng-switch-when="timeField"
+            index-pattern-id="controller.formValues.id"
+            index-pattern-name="controller.formValues.name"
+            time-field-options="controller.timeFieldOptions"
+            selected-time-field-option="controller.formValues.timeFieldOption"
+            fetch-time-field-options="controller.fetchTimeFieldOptions()"
+            is-fetching-time-field-options="controller.isFetchingTimeFieldOptions"
+            go-to-previous-step="controller.goToIndexPatternStep()"
+            create-index-pattern="controller.createIndexPattern()"
+          ></step-time-field>
+        </div>
       </div>
     </div>
   </kbn-management-indices>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
index 6875c473bc2a11..597e0822be5922 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.js
@@ -10,6 +10,7 @@ import { sendCreateIndexPatternRequest } from './send_create_index_pattern_reque
 import './step_index_pattern';
 import './step_time_field';
 import './matching_indices_list';
+import './create_index_pattern_wizard.less';
 
 uiRoutes
   .when('/management/kibana/index', {
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less
new file mode 100644
index 00000000000000..ce9d4929787340
--- /dev/null
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/create_index_pattern_wizard.less
@@ -0,0 +1,4 @@
+.createIndexPatternPrompt {
+  width: 100%;
+  max-width: 600px;
+}
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
index f7946f2518bde5..4f54312e919b3c 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/matching_indices_list/matching_indices_list.html
@@ -1,68 +1,112 @@
 <div>
   <div
     ng-if="matchingIndicesList.isLoading"
-    class="kuiPanel kuiPanel--prompt kuiVerticalRhythm matchingIndicesListLoadingPrompt"
+    class="euiPanel euiPanel--paddingMedium"
   >
-    <div class="kuiPanelBody">
-      <p class="kuiSubTitle kuiSubduedText kuiVerticalRhythm">
-        Looking for matching indices
-      </p>
-
-      <div class="kuiVerticalRhythm">
-        <p class="kuiText kuiSubduedText kuiVerticalRhythmSmall">
-          Just a sec...
-        </p>
-      </div>
-    </div>
+    <h2 class="euiTitle euiTextColor euiTextColor--subdued" style="text-align:center">
+      Looking for matching indices
+    </h2>
+    <div class="euiSpacer euiSpacer--s"></div>
+    <p class="euiTextColor euiTextColor--subdued" style="text-align:center">
+      Just a sec...
+    </p>
   </div>
 
+  <div class="euiSpacer euiSpacer--s"></div>
+
   <div
     ng-if="!matchingIndicesList.isLoading"
-    class="kuiControlledTable"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
   >
-    <!-- ToolBar -->
-    <div class="kuiToolBar">
-      <div class="kuiToolBarSection">
-        <p class="kuiText">
-          <ng-transclude></ng-transclude>
-        </p>
-      </div>
-
-      <div class="kuiToolBarSection">
-        <!-- Pagination -->
-        <tool-bar-pager-text
-          start-item="matchingIndicesList.pager.startItem"
-          end-item="matchingIndicesList.pager.endItem"
-          total-items="matchingIndicesList.pager.totalItems"
-          ng-if="matchingIndicesList.hasMultiplePages()"
-        ></tool-bar-pager-text>
-
-        <tool-bar-pager-buttons
-          has-previous-page="matchingIndicesList.pager.hasPreviousPage"
-          has-next-page="matchingIndicesList.pager.hasNextPage"
-          on-page-next="matchingIndicesList.onPageNext"
-          on-page-previous="matchingIndicesList.onPagePrevious"
-          ng-if="matchingIndicesList.hasMultiplePages()"
-        ></tool-bar-pager-buttons>
-
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <p>
+        <ng-transclude></ng-transclude>
         <span
           ng-if="matchingIndicesList.hasMultiplePages()"
-          class="kuiSubduedText"
+          class="euiTextColor euiTextColor--subdued euiText euiText--small"
         >
           (representative sample only)
         </span>
+      </p>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+      ng-if="matchingIndicesList.hasMultiplePages()"
+    >
+      <div class="euiPagination">
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
+          type="button"
+          ng-if="matchingIndicesList.pager.hasPreviousPage"
+          ng-click="matchingIndicesList.onPagePrevious()"
+        >
+          <span class="euiButtonEmpty__content">
+            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"></path>
+              </defs>
+              <use fill-rule="nonzero" transform="rotate(90 8 8)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow_left-a">
+              </use>
+            </svg>
+            <span>Previous</span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
+          ng-class="{
+            'euiPaginationButton-isActive': true || page == matchingIndicesList.pager.currentPage
+          }"
+          type="button"
+          ng-repeatt="page in matchingIndicesList.getPaginationList()"
+          ng-clickk="matchingIndicesList.goToPage(page)"
+        >
+          <span class="euiButtonEmpty__content">
+            <span>{{matchingIndicesList.pager.currentPage}}</span>
+          </span>
+        </button>
+        <button
+          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--iconRight euiPaginationButton"
+          type="button"
+          ng-if="matchingIndicesList.pager.hasNextPage"
+          ng-click="matchingIndicesList.onPageNext()"
+        >
+          <span class="euiButtonEmpty__content">
+            <svg class="euiIcon euiButtonEmpty__icon euiIcon--medium" aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"
+            width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                />
+              </defs>
+              <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
+              />
+            </svg>
+            <span>Next</span>
+          </span>
+        </button>
       </div>
     </div>
+  </div>
+
+  <div class="euiSpacer euiSpacer--m"></div>
 
-    <!-- Indices list -->
-    <ul class="kuiMenu kuiMenu--contained">
-      <li
-        class="kuiMenuItem"
+  <table
+    ng-if="!matchingIndicesList.isLoading"
+    class="euiTable"
+  >
+    <tbody>
+      <!-- Indices list -->
+      <tr
+        class="euiTableRow"
         ng-repeat="index in matchingIndicesList.pageOfIndices"
       >
-        <p class="kuiText" ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern">
-        </p>
-      </li>
-    </ul>
-  </div>
+        <td class="euiTableRowCell">
+          <span
+            class="euiTableCellContent"
+            ng-bind-html="index.name | highlight:matchingIndicesList.formattedPattern"
+          ></span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
index 0fbe58a8165151..4644b275242a2f 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.html
@@ -1,169 +1,165 @@
-<div class="kuiPanel">
-  <div class="kuiPanelHeader">
-    <div class="kuiPanelHeaderSection">
-      <h2 class="kuiPanelHeader__title">
-        Step 1 of 2: Define index pattern
-      </h2>
-    </div>
-  </div>
-
-  <div class="kuiPanelBody">
-    <div>
-      <form
-        name="stepIndexPattern.indexPatternNameForm"
-        role="form"
-        ng-submit="stepIndexPattern.goToNextStep()"
-        class="kuiVerticalRhythm"
-      >
-        <div class="createIndexPatternInputContainer kuiVerticalRhythm">
-          <!-- Index pattern input -->
-          <div>
-            <label
-              for="indexPatternNameField"
-              class="kuiLabel kuiVerticalRhythmSmall"
-            >
-              Index pattern
-            </label>
+<div>
+  <h2 class="euiTitle euiTitle--small">
+    Step 1 of 2: Define index pattern
+  </h2>
 
-            <div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
-              <input
-                id="indexPatternNameField"
-                class="kuiTextInput kuiTextInput--large createIndexPatternInputField"
-                data-test-subj="createIndexPatternNameInput"
-                ng-model="stepIndexPattern.indexPatternName"
-                placeholder="index-name-*"
-                validate-index-pattern
-                validate-index-pattern-allow-wildcard
-                append-wildcard
-                name="name"
-                required
-                type="text"
-                aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
-              >
-            </div>
+  <div class="euiSpacer euiSpacer--m"></div>
 
+  <form
+    name="stepIndexPattern.indexPatternNameForm"
+    role="form"
+    ng-submit="stepIndexPattern.goToNextStep()"
+  >
+    <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--alignItemsEnd euiFlexGroup--responsive">
+      <div class="euiFlexItem euiFlexItem--flexGrowZero">
+        <div class="euiFormRow">
+          <label
+            for="indexPatternNameField"
+            class="euiFormLabel"
+          >
+            Index pattern
+          </label>
+          <div class="euiFormControlLayout">
+            <!-- Index pattern input -->
+            <input
+              id="indexPatternNameField"
+              class="euiFieldText euiFieldText--fullWidth createIndexPatternInputField"
+              data-test-subj="createIndexPatternNameInput"
+              ng-model="stepIndexPattern.indexPatternName"
+              placeholder="index-name-*"
+              validate-index-pattern
+              validate-index-pattern-allow-wildcard
+              append-wildcard
+              name="name"
+              required
+              type="text"
+              aria-describedby="indexPatternNameFieldHelp1 indexPatternNameFieldHelp2"
+            >
+          </div>
+          <div class="euiFormHelpText euiFormRow__text">
             <p
               id="indexPatternNameFieldHelp1"
-              class="kuiText kuiSubduedText kuiVerticalRhythm"
+              class="euiTextColor euiTextColor--subdued"
             >
               You can use a <strong>*</strong> as a wildcard in your index pattern.
             </p>
-
+            <div class="euiSpacer euiSpacer--xs"></div>
             <p
               id="indexPatternNameFieldHelp2"
-              class="kuiText kuiSubduedText"
+              class="euiTextColor euiTextColor--subdued"
             >
               You can't use empty spaces or the characters <strong>\ / ? " < > |</strong>.
             </p>
           </div>
-
-          <!-- Action -->
-          <button
-            data-test-subj="createIndexPatternGoToStep2Button"
-            class="kuiButton kuiButton--primary kuiButton--iconText kuiVerticalRhythmSmall"
-            ng-click="stepIndexPattern.goToNextStep()"
-            ng-disabled="!stepIndexPattern.canGoToNextStep()"
-          >
-            <span class="kuiButton__inner">
-              <span>
-                Next step
-              </span>
-              <span
-                aria-hidden="true"
-                class="kuiButton__icon kuiIcon fa-chevron-right"
-              ></span>
-            </span>
-          </button>
         </div>
-      </form>
-
-      <!-- List of matching indices -->
-      <div
-        class="kuiVerticalRhythm"
-        ng-switch="stepIndexPattern.matchingIndicesListType"
-      >
-        <div ng-switch-when="invalidIndexPattern">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-           <span class="kuiStatusText kuiStatusText--error">
-              <span
-                aria-hidden="true"
-                class="kuiStatusText__icon kuiIcon fa-hand-stop-o"
-              ></span>
-
-              <span>
-                You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div><div ng-switch-when="noInput">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span ng-if="!stepIndexPattern.allIndices.length">
-                You only have a single index. You can create an index pattern to match it.
-              </span>
+      </div>
+      <div class="euiFlexItem euiFlexItem--flexGrowZero">
+        <!-- Action -->
+        <button
+          data-test-subj="createIndexPatternGoToStep2Button"
+          class="euiButton euiButton--primary"
+          ng-click="stepIndexPattern.goToNextStep()"
+          ng-disabled="!stepIndexPattern.canGoToNextStep()"
+        >
+          <span class="euiButton__content">
+            Next step
+          </span>
+        </button>
+      </div>
+    </div>
+  </form>
 
-              <span ng-if="stepIndexPattern.allIndices.length">
-                Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-        <div ng-switch-when="noMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.allIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span>
-                The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+  <!-- List of matching indices -->
+  <div ng-switch="stepIndexPattern.matchingIndicesListType">
+    <div ng-switch-when="invalidIndexPattern">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--danger">
+          <span aria-hidden="true">
+            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+              width="16" height="16" viewBox="0 0 16 16">
+              <g fill="#13252D" fill-rule="evenodd">
+                <circle cx="5" cy="5" r="1" />
+                <circle cx="10" cy="5" r="1" />
+                <path fill-rule="nonzero" d="M7.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zm0 1a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15z"
+                />
+                <path fill-rule="nonzero" d="M12.332 9.626C10.747 8.217 9.133 7.5 7.5 7.5s-3.247.717-4.832 2.126a.5.5 0 1 0 .664.748C4.747 9.116 6.133 8.5 7.5 8.5s2.753.616 4.168 1.874a.5.5 0 0 0 .664-.748z"
+                />
+              </g>
+            </svg>
+          </span>
 
-        <div ng-switch-when="partialMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.partialMatchingIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--info">
-              <span>
-                Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
+          <span>
+            You've entered an invalid index pattern. Please adjust it to match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+          </span>
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="noInput">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span ng-if="!stepIndexPattern.allIndices.length">
+          You only have a single index. You can create an index pattern to match it.
+        </span>
 
-        <div ng-switch-when="exactMatches">
-          <matching-indices-list
-            is-loading="stepIndexPattern.isFetchingMatchingIndices"
-            indices="stepIndexPattern.matchingIndices"
-            pattern="stepIndexPattern.indexPatternName"
-          >
-            <span class="kuiStatusText kuiStatusText--success">
-              <span
-                aria-hidden="true"
-                class="kuiStatusText__icon kuiIcon fa-check"
-              ></span>
+        <span ng-if="stepIndexPattern.allIndices.length">
+          Your index pattern can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="noMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.allIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span>
+          The index pattern you've entered doesn't match any indices. You can match any of your <strong>{{stepIndexPattern.allIndices.length}} indices</strong>, below.
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="partialMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.partialMatchingIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span>
+          Your index pattern doesn't match any indices, but you have <strong>{{stepIndexPattern.partialMatchingIndices.length}} {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'indices' : 'index'}}</strong> which {{stepIndexPattern.partialMatchingIndices.length > 1 ? 'look' : 'looks'}} similar.
+        </span>
+      </matching-indices-list>
+    </div>
+    <div ng-switch-when="exactMatches">
+      <matching-indices-list
+        is-loading="stepIndexPattern.isFetchingMatchingIndices"
+        indices="stepIndexPattern.matchingIndices"
+        pattern="stepIndexPattern.indexPatternName"
+      >
+        <span class="euiTextColor euiTextColor--secondary">
+          <span aria-hidden="true">
+            <svg class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+              xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+              <defs>
+                <path id="check-a" d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+                />
+              </defs>
+              <use href="#check-a" />
+            </svg>
+          </span>
 
-              <span>
-                <strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
-              </span>
-            </span>
-          </matching-indices-list>
-        </div>
-      </div>
+          <span>
+            <strong>Success!</strong> Your index pattern matches <strong>{{stepIndexPattern.matchingIndices.length}} {{stepIndexPattern.matchingIndices.length > 1 ? 'indices' : 'index'}}</strong>.
+          </span>
+        </span>
+      </matching-indices-list>
     </div>
   </div>
 </div>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
index fc1ba64b06723c..dd37653fc6aeb1 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_index_pattern/step_index_pattern.less
@@ -1,9 +1,3 @@
-.createIndexPatternInputContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-}
-
 .createIndexPatternInputField.ng-untouched {
-  border-color: #dedede !important;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
 }
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
index 1b1d4deb884ebc..b62b2cf81466ff 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.html
@@ -2,173 +2,197 @@
   name="stepTimeField.form"
   role="form"
   ng-submit="stepTimeField.createIndexPattern()"
-  class="kuiPanel"
 >
-  <div class="kuiPanelHeader">
-    <div class="kuiPanelHeaderSection">
-      <h2 class="kuiPanelHeader__title">
-        Step 2 of 2: Configure settings
-      </h2>
-    </div>
-  </div>
+  <h2 class="euiTitle euiTitle--small">
+    Step 2 of 2: Configure settings
+  </h2>
 
-  <div class="kuiPanelBody">
-    <p class="kuiText kuiSubduedText kuiVerticalRhythm">
-      You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
-    </p>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-    <!-- Time field select -->
-    <div class="kuiVerticalRhythm">
-      <div class="kuiVerticalRhythmSmall timeFieldNameLabel">
-        <label
-          id="timeFilterFieldSelectLabel"
-          class="kuiLabel"
-          for="timeFilterFieldSelect"
-        >
-          Time Filter field name
-        </label>
+  <p class="euiTextColor euiTextColor--subdued">
+    You've defined <strong>{{stepTimeField.indexPatternName}}</strong> as your index pattern. Now you can specify some settings before we create it.
+  </p>
 
-        <a
-          ng-if="!stepTimeField.isFetchingTimeFieldOptions"
-          class="kuiLink kuiSubText"
-          ng-click="stepTimeField.fetchTimeFieldOptions()"
-          kbn-accessible-click
-          aria-describedby="timeFilterFieldSelectLabel"
-        >
-          Refresh
-        </a>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-        <p
-          ng-if="stepTimeField.isFetchingTimeFieldOptions"
-          class="kuiText kuiSubduedText"
-          aria-label="Please wait while we fetch your time field options"
-          aria-describedby="timeFilterFieldSelectLabel"
-        >
-          <span
-            aria-hidden="true"
-            class="kuiIcon fa-spinner fa-spin"
-          ></span>
-        </p>
-      </div>
+  <div class="euiFormRow">
+    <div class="euiFormLabel">
+      <div class="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween">
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <label
+            id="timeFilterFieldSelectLabel"
+            for="timeFilterFieldSelect"
+          >
+            Time Filter field name
+          </label>
+        </div>
 
-      <div class="kuiVerticalRhythmSmall kuiVerticalRhythm">
-        <select
-          ng-show="stepTimeField.canShowMainSelect()"
-          id="timeFilterFieldSelect"
-          aria-describedby="timeFilterFieldSelectHelpText"
-          class="kuiSelect kuiSelect--large"
-          data-test-subj="createIndexPatternTimeFieldSelect"
-          ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
-          ng-required="stepTimeField.hasTimeFieldOptions()"
-          ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
-          ng-model="stepTimeField.selectedTimeFieldOption"
-        ></select>
-        <select
-          ng-show="stepTimeField.canShowLoadingSelect()"
-          id="timeFilterFieldSelect"
-          aria-describedby="timeFilterFieldSelectHelpText"
-          class="kuiSelect kuiSelect--large"
-          data-test-subj="createIndexPatternTimeFieldSelect"
-          disabled="disabled"
-        >
-          <option>Loading...</option>
-        </select>
-        <p
-          ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
-          class="kuiText kuiSubduedText"
-        >
-          The indices which match this index pattern don't contain any time fields.
-        </p>
+        <div class="euiFlexItem euiFlexItem--flexGrowZero">
+          <a
+            ng-if="!stepTimeField.isFetchingTimeFieldOptions"
+            class="euiLink euiText euiText--extraSmall timeFieldRefreshButton"
+            ng-click="stepTimeField.fetchTimeFieldOptions()"
+            kbn-accessible-click
+            aria-describedby="timeFilterFieldSelectLabel"
+          >
+            Refresh
+          </a>
+
+          <div
+            ng-if="stepTimeField.isFetchingTimeFieldOptions"
+            class="euiLoadingSpinner euiLoadingSpinner--small"
+            aria-label="Please wait while we fetch your time field options"
+            aria-describedby="timeFilterFieldSelectLabel"
+          ></div>
+        </div>
       </div>
+    </div>
+
+    <div class="euiFormControlLayout">
+      <select
+        ng-show="stepTimeField.canShowMainSelect()"
+        id="timeFilterFieldSelect"
+        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
+        class="euiSelect euiSelect--large"
+        data-test-subj="createIndexPatternTimeFieldSelect"
+        ng-disabled="stepTimeField.isTimeFieldSelectDisabled()"
+        ng-required="stepTimeField.hasTimeFieldOptions()"
+        ng-options="option as option.display disable when option.isDisabled for option in stepTimeField.timeFieldOptions"
+        ng-model="stepTimeField.selectedTimeFieldOption"
+      ></select>
+
+      <select
+        ng-show="stepTimeField.canShowLoadingSelect()"
+        id="timeFilterFieldSelect"
+        aria-describedby="timeFilterFieldSelectHelpText1 timeFilterFieldSelectHelpText2"
+        class="euiSelect euiSelect--large"
+        data-test-subj="createIndexPatternTimeFieldSelect"
+        disabled="disabled"
+      >
+        <option>Loading...</option>
+      </select>
 
       <p
-        ng-if="stepTimeField.canShowHelpText()"
-        id="timeFilterFieldSelectHelpText"
-        class="kuiText kuiSubduedText kuiVerticalRhythm"
+        ng-if="stepTimeField.canShowNoTimeBasedFieldsMessage()"
+        class="euiTextColor euiTextColor--subdued euiText euiText--small"
       >
-        The Time Filter will use this field to filter your data by time.
-        You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
+        The indices which match this index pattern don't contain any time fields.
       </p>
     </div>
 
-    <div class="kuiVerticalRhythm">
-      <button
-        class="kuiToggleButton"
-        data-id="toggleButton"
-        ng-click="stepTimeField.toggleAdvancedOptions()"
-      >
-        <span
-          class="kuiToggleButton__icon kuiIcon"
-          ng-class="{
-            'fa-caret-right': !stepTimeField.showAdvancedOptions,
-            'fa-caret-down': stepTimeField.showAdvancedOptions
-          }"
-          data-id="toggleButtonIcon"
-        >
-        </span>
-        <span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
-        <span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
-      </button>
+    <div
+      ng-if="stepTimeField.canShowHelpText()"
+      class="euiFormHelpText euiFormRow__text"
+      id="timeFilterFieldSelectHelpText1"
+    >
+      The Time Filter will use this field to filter your data by time.
     </div>
 
-    <!-- Index pattern id input -->
     <div
-      class="kuiVerticalRhythm"
-      ng-if="stepTimeField.showAdvancedOptions"
+      ng-if="stepTimeField.canShowHelpText()"
+      class="euiFormHelpText euiFormRow__text"
+      id="timeFilterFieldSelectHelpText2"
     >
+      You can choose not to have a time field, but you will not be able to narrow down your data by a time range.
+    </div>
+  </div>
+
+  <button
+    class="euiButtonEmpty"
+    type="button"
+    data-id="toggleButton"
+    ng-click="stepTimeField.toggleAdvancedOptions()"
+  >
+    <svg ng-if="!stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+      <defs>
+        <path id="arrow_right-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        />
+      </defs>
+      <use fill-rule="nonzero" transform="matrix(0 1 1 0 0 0)" href="#arrow_right-a"
+      />
+    </svg>
+    <svg ng-if="stepTimeField.showAdvancedOptions" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+    xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+      <defs>
+        <path id="arrow_down-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+        />
+      </defs>
+      <use fill-rule="nonzero" href="#arrow_down-a" />
+    </svg>
+    <span ng-if="stepTimeField.showAdvancedOptions">Hide advanced options</span>
+    <span ng-if="!stepTimeField.showAdvancedOptions">Show advanced options</span>
+  </button>
+
+  <!-- Index pattern id input -->
+  <div class="euiSpacer euiSpacer--xs"></div>
+  <div
+    ng-if="stepTimeField.showAdvancedOptions"
+    class="euiFormRow"
+  >
+    <div class="euiFormLabel">
       <label
-        class="kuiLabel kuiVerticalRhythmSmall"
+        class="euiLabel"
         for="indexPatternCreationId"
       >
         Custom index pattern ID
       </label>
-
-      <div class="kuiVerticalRhythm kuiVerticalRhythmSmall">
-        <input
-          class="kuiTextInput kuiTextInput--large"
-          id="indexPatternCreationId"
-          data-test-subj="createIndexPatternIdInput"
-          ng-model="stepTimeField.indexPatternId"
-          ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
-          validate-index-pattern
-          validate-index-pattern-allow-wildcard
-          name="id"
-          type="text"
-        >
-      </div>
-
-      <p
-        class="kuiText kuiSubduedText kuiVerticalRhythm"
+    </div>
+    <div class="euiFormControlLayout">
+      <input
+        class="euiFieldText euiFieldText--large"
+        id="indexPatternCreationId"
+        data-test-subj="createIndexPatternIdInput"
+        ng-model="stepTimeField.indexPatternId"
+        ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"
+        validate-index-pattern
+        validate-index-pattern-allow-wildcard
+        name="id"
+        type="text"
       >
+    </div>
+    <div class="euiFormHelpText euiFormRow__text">
+      <span class="euiTextColor euiTextColor--subdued">
         Kibana will provide a unique identifier for each index pattern.
         If you do not want to use this unique ID, enter a custom one.
-      </p>
+      </span>
     </div>
+  </div>
 
-    <!-- Actions -->
-    <div class="kuiBar kuiVerticalRhythm">
-      <div class="kuiBarSection">
-        <div class="kuiButtonGroup">
-          <button
-            class="kuiButton kuiButton--secondary kuiButton--iconText"
-            ng-click="stepTimeField.goToPreviousStep()"
-          >
-            <span class="kuiButton__inner">
-              <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-chevron-left"></span>
-              <span>Back</span>
-            </span>
-          </button>
+  <div class="euiSpacer euiSpacer--m"></div>
 
-          <button
-            data-test-subj="createIndexPatternCreateButton"
-            ng-disabled="!stepTimeField.canCreateIndexPattern()"
-            class="kuiButton kuiButton--primary"
-            type="submit"
-          >
-            Create index pattern
-          </button>
-        </div>
-      </div>
+  <!-- Actions -->
+  <div class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd">
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <button
+        class="euiButtonEmpty euiButtonEmpty--primary"
+        ng-click="stepTimeField.goToPreviousStep()"
+      >
+        <span class="euiButtonEmpty__content">
+          <svg aria-hidden="true" class="euiIcon euiIcon--medium" xmlns="http://www.w3.org/2000/svg"
+            xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+            <defs>
+              <path id="arrow_left-a" d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+              />
+            </defs>
+            <use fill-rule="nonzero" transform="rotate(90 8 8)" href="#arrow_left-a"
+            />
+          </svg>
+          <span>Back</span>
+        </span>
+      </button>
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <button
+        data-test-subj="createIndexPatternCreateButton"
+        ng-disabled="!stepTimeField.canCreateIndexPattern()"
+        class="euiButton euiButton--primary euiButton--fill"
+        type="submit"
+      >
+        <span class="euiButton__content">
+          Create index pattern
+        </span>
+      </button>
     </div>
   </div>
 </form>
diff --git a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
index 3548c6d861ade2..fce886eeb47159 100644
--- a/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
+++ b/src/core_plugins/kibana/public/management/sections/indices/create_index_pattern_wizard/step_time_field/step_time_field.less
@@ -7,3 +7,10 @@
   align-items: center;
   justify-content: space-between;
 }
+
+/**
+ * 1. Bring the line-height down or else this link expands its container when it becomes visible.
+ */
+ .timeFieldRefreshButton {
+  line-height: 1 !important; /* 1 */
+}