diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 6d10fef2507..58a21b849d3 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -6,202 +6,194 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiMarkdownEditor__toolbar"
+    class="euiMarkdownEditorToolbar"
   >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+      class="euiMarkdownEditorToolbar__buttons"
     >
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
+      <span
+        class="euiToolTipAnchor"
       >
-        <span
-          class="euiToolTipAnchor"
-        >
-          <button
-            aria-label="Bold"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorBold"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+        <button
+          aria-label="Bold"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Italic"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorItalic"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorBold"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Italic"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Unordered list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorUnorderedList"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorItalic"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Unordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Ordered list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorOrderedList"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorUnorderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Ordered list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Task list"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="MarkdownCheckmark"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorOrderedList"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Task list"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Quote"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="quote"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="MarkdownCheckmark"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Quote"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Code"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorCodeBlock"
-            />
-          </button>
-        </span>
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="quote"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Code"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Link"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorLink"
-            />
-          </button>
-        </span>
-        <span
-          class="euiMarkdownEditor__toolbar__divider"
-        />
-        <span
-          class="euiToolTipAnchor"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorCodeBlock"
+          />
+        </button>
+      </span>
+      <span
+        class="euiToolTipAnchor"
+      >
+        <button
+          aria-label="Link"
+          class="euiButtonIcon euiButtonIcon--text"
+          type="button"
         >
-          <button
-            aria-label="Tooltip"
-            class="euiButtonIcon euiButtonIcon--text"
-            type="button"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              data-euiicon-type="editorComment"
-            />
-          </button>
-        </span>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorLink"
+          />
+        </button>
+      </span>
+      <span
+        class="euiMarkdownEditorToolbar__divider"
+      />
+      <span
+        class="euiToolTipAnchor"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+          aria-label="Tooltip"
+          class="euiButtonIcon euiButtonIcon--text"
           type="button"
         >
-          <span
-            class="euiButtonEmpty__content"
-          >
-            <div
-              aria-hidden="true"
-              class="euiButtonEmpty__icon"
-              data-euiicon-type="eye"
-            />
-            <span
-              class="euiButtonEmpty__text"
-            >
-              Preview
-            </span>
-          </span>
+          <div
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            data-euiicon-type="editorComment"
+          />
         </button>
-      </div>
+      </span>
     </div>
+    <button
+      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+      type="button"
+    >
+      <span
+        class="euiButtonEmpty__content"
+      >
+        <div
+          aria-hidden="true"
+          class="euiButtonEmpty__icon"
+          data-euiicon-type="eye"
+        />
+        <span
+          class="euiButtonEmpty__text"
+        >
+          Preview
+        </span>
+      </span>
+    </button>
   </div>
   <div
     style="display:block"
   >
     <div
-      class="euiMarkdownEditor__dropZone"
+      class="euiMarkdownEditorDropZone"
     >
       <textarea
         aria-label="aria-label"
-        class="euiMarkdownEditor__textArea"
+        class="euiMarkdownEditorTextArea"
         id="editorId"
         rows="6"
-        style="height:calc(118px"
+        style="height:calc(116px"
       />
       <footer
-        class="euiMarkdownEditor__footer"
+        class="euiMarkdownEditorFooter"
       >
         <div
-          class="euiMarkdownEditor__footerActions"
+          class="euiMarkdownEditorFooter__actions"
         >
           <button
             aria-label="Open upload files modal"
@@ -217,7 +209,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         </div>
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditor__footerHelp"
+          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
           type="button"
         >
           <div
diff --git a/src/components/markdown_editor/_markdown_editor.scss b/src/components/markdown_editor/_markdown_editor.scss
index e03f34d7a71..f88bb5d63a0 100644
--- a/src/components/markdown_editor/_markdown_editor.scss
+++ b/src/components/markdown_editor/_markdown_editor.scss
@@ -1,4 +1,7 @@
 .euiMarkdownEditor {
+  transition:
+  box-shadow $euiAnimSpeedFast ease-in;
+
   &:focus-within {
     @include euiSlightShadowHover;
   }
diff --git a/src/components/markdown_editor/_markdown_editor_drop_zone.scss b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
index 280f9b45d8a..cf8e2d629f9 100644
--- a/src/components/markdown_editor/_markdown_editor_drop_zone.scss
+++ b/src/components/markdown_editor/_markdown_editor_drop_zone.scss
@@ -1,4 +1,4 @@
-.euiMarkdownEditor__dropZone {
+.euiMarkdownEditorDropZone {
   @include euiFormControlDefaultShadow;
   display: flex;
   position: relative;
@@ -25,13 +25,9 @@
   }
 
   &--isDragging {
-    .euiMarkdownEditor__textArea,
-    .euiMarkdownEditor__footer {
+    .euiMarkdownEditorTextArea,
+    .euiMarkdownEditorFooter {
       background-color: transparentize($euiColorSecondary, .88);
     }
-
-    .euiMarkdownEditor__footer {
-      border-top-color: $euiColorSecondary;
-    }
   }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_footer.scss b/src/components/markdown_editor/_markdown_editor_footer.scss
index be3174b5bb5..b0b0b7136a6 100644
--- a/src/components/markdown_editor/_markdown_editor_footer.scss
+++ b/src/components/markdown_editor/_markdown_editor_footer.scss
@@ -1,17 +1,16 @@
-.euiMarkdownEditor__footer {
+.euiMarkdownEditorFooter {
   display: inline-flex;
   padding: $euiSizeXS;
   border: $euiBorderThin;
-  border-top: none;
   align-items: center;
   background: $euiPageBackgroundColor;
 }
 
-.euiMarkdownEditor__footerPopover {
+.euiMarkdownEditorFooter__popover {
   width: 300px;
 }
 
-.euiMarkdownEditor__footerActions {
+.euiMarkdownEditorFooter__actions {
   flex: 1;
   display: inline-flex;
 
@@ -22,7 +21,7 @@
   }
 }
 
-.euiMarkdownEditor__footerHelp {
+.euiMarkdownEditorFooter__help {
   justify-self: flex-end;
 
   // overrides the default button icon width size
@@ -31,7 +30,7 @@
   }
 }
 
-.euiMarkdownEditor__footerErrors {
+.euiMarkdownEditorFooter__errors {
   // overrides the default button icon width size
   > svg {
     color: $euiTextSubduedColor;
diff --git a/src/components/markdown_editor/_markdown_editor_preview.scss b/src/components/markdown_editor/_markdown_editor_preview.scss
index 74707692d30..1762bb327bd 100644
--- a/src/components/markdown_editor/_markdown_editor_preview.scss
+++ b/src/components/markdown_editor/_markdown_editor_preview.scss
@@ -1,4 +1,4 @@
-.euiMarkdownEditor__preview {
+.euiMarkdownEditorPreview {
   @include euiScrollBar;
   height: 150px;
   overflow-y: auto;
diff --git a/src/components/markdown_editor/_markdown_editor_text_area.scss b/src/components/markdown_editor/_markdown_editor_text_area.scss
index e59e87713f9..46369729712 100644
--- a/src/components/markdown_editor/_markdown_editor_text_area.scss
+++ b/src/components/markdown_editor/_markdown_editor_text_area.scss
@@ -1,22 +1,32 @@
-.euiMarkdownEditor__textArea {
+.euiMarkdownEditorTextArea {
   @include euiFormControlText;
   @include euiScrollBar;
   width: 100%;
   height: 100%;
   min-height: 150px;
   padding: $euiSizeM;
-  background-color: $euiFormBackgroundColor;
   border: $euiBorderThin;
-  border-color: $euiColorLightShade;
+  border-bottom: none;
   // Overrides the euiFormControlText line-height that is very small
   line-height: $euiLineHeight;
   resize: vertical;
+  background-color: $euiFormBackgroundColor;
+  background-repeat: no-repeat;
+  background-size: 0% 100%;
 
-  &:focus {
-    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+  // sass-lint:disable-block indentation
+  transition:
+    box-shadow $euiAnimSpeedFast ease-in,
+    background-image $euiAnimSpeedFast ease-in,
+    background-size $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
-    + .euiMarkdownEditor__dropZone__button {
-      background-image: euiFormControlGradient();
-    }
+  &:focus,
+  // preventing the text area of loosing focus when clicking on an action button
+  // from the toolbar
+  .euiMarkdownEditor:focus-within &  {
+    background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
+    background-image: euiFormControlGradient();
+    background-size: 100% 100%;
   }
 }
diff --git a/src/components/markdown_editor/_markdown_editor_toolbar.scss b/src/components/markdown_editor/_markdown_editor_toolbar.scss
index 64c4545cc55..33350e5752d 100644
--- a/src/components/markdown_editor/_markdown_editor_toolbar.scss
+++ b/src/components/markdown_editor/_markdown_editor_toolbar.scss
@@ -1,4 +1,6 @@
-.euiMarkdownEditor__toolbar {
+.euiMarkdownEditorToolbar {
+  display: flex;
+  flex-wrap: wrap;
   background: $euiColorLightestShade;
   border: $euiBorderThin;
   border-color: $euiColorLightShade;
@@ -6,7 +8,10 @@
   padding: $euiSizeXS;
 
   &__buttons {
-    flex-direction: row;
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    align-items: center;
 
     > * {
       margin-right: $euiSizeXS;
diff --git a/src/components/markdown_editor/markdown_editor.tsx b/src/components/markdown_editor/markdown_editor.tsx
index 4318934ad70..8e7f619391a 100644
--- a/src/components/markdown_editor/markdown_editor.tsx
+++ b/src/components/markdown_editor/markdown_editor.tsx
@@ -304,7 +304,7 @@ export const EuiMarkdownEditor: FunctionComponent<
 
           {isPreviewing && (
             <div
-              className="euiMarkdownEditor__preview"
+              className="euiMarkdownEditorPreview"
               style={{ height: `${height}px` }}>
               <EuiMarkdownFormat processor={processor}>
                 {value}
diff --git a/src/components/markdown_editor/markdown_editor_drop_zone.tsx b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
index 2cea6739627..0e47248ef87 100644
--- a/src/components/markdown_editor/markdown_editor_drop_zone.tsx
+++ b/src/components/markdown_editor/markdown_editor_drop_zone.tsx
@@ -36,8 +36,8 @@ export const EuiMarkdownEditorDropZone: FunctionComponent<
 
   const { children, uiPlugins, errors } = props;
 
-  const classes = classNames('euiMarkdownEditor__dropZone', {
-    'euiMarkdownEditor__dropZone--isDragging': isDragging,
+  const classes = classNames('euiMarkdownEditorDropZone', {
+    'euiMarkdownEditorDropZone--isDragging': isDragging,
   });
 
   const { getRootProps, getInputProps, open } = useDropzone({
diff --git a/src/components/markdown_editor/markdown_editor_footer.tsx b/src/components/markdown_editor/markdown_editor_footer.tsx
index fabd5ac45dc..e011d45ebe0 100644
--- a/src/components/markdown_editor/markdown_editor_footer.tsx
+++ b/src/components/markdown_editor/markdown_editor_footer.tsx
@@ -90,7 +90,7 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
         isOpen={isPopoverOpen}
         closePopover={closePopover}
         anchorPosition="upCenter">
-        <div className="euiMarkdownEditor__footerPopover">
+        <div className="euiMarkdownEditorFooter__popover">
           <EuiPopoverTitle>
             <EuiI18n
               token="euiMarkdownEditorFooter.errorsTitle"
@@ -106,14 +106,14 @@ export const EuiMarkdownEditorFooter: FunctionComponent<
   }
 
   return (
-    <footer className="euiMarkdownEditor__footer">
-      <div className="euiMarkdownEditor__footerActions">
+    <footer className="euiMarkdownEditorFooter">
+      <div className="euiMarkdownEditorFooter__actions">
         {uploadButton}
         {errorsButton}
       </div>
 
       <EuiButtonIcon
-        className="euiMarkdownEditor__footerHelp"
+        className="euiMarkdownEditorFooter__help"
         iconType={MarkdownLogo}
         color="text"
         aria-label="Show markdown help"
diff --git a/src/components/markdown_editor/markdown_editor_text_area.tsx b/src/components/markdown_editor/markdown_editor_text_area.tsx
index 8786e66705a..a9576c90467 100644
--- a/src/components/markdown_editor/markdown_editor_text_area.tsx
+++ b/src/components/markdown_editor/markdown_editor_text_area.tsx
@@ -64,13 +64,13 @@ export const EuiMarkdownEditorTextArea = forwardRef<
     },
     ref
   ) => {
-    const dropZoneButtonHeight = 32;
+    const markdownFooterHeight = 34;
 
     return (
       <textarea
         ref={ref}
-        style={{ height: `calc(${height - dropZoneButtonHeight}px` }}
-        className="euiMarkdownEditor__textArea"
+        style={{ height: `calc(${height - markdownFooterHeight}px` }}
+        className="euiMarkdownEditorTextArea"
         {...rest}
         rows={6}
         name={name}
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
index 87f090deead..6fb77e3548d 100644
--- a/src/components/markdown_editor/markdown_editor_toolbar.tsx
+++ b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -20,7 +20,6 @@
 import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
 import { CommonProps } from '../common';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
-import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
 import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
@@ -115,104 +114,91 @@ export const EuiMarkdownEditorToolbar: FunctionComponent<
   const isPreviewing = viewMode === MODE_VIEWING;
 
   return (
-    <div className="euiMarkdownEditor__toolbar">
-      <EuiFlexGroup
-        justifyContent="spaceBetween"
-        alignItems="center"
-        responsive={false}>
-        <EuiFlexItem
-          grow={false}
-          className="euiMarkdownEditor__toolbar__buttons">
-          {boldItalicButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-          <span className="euiMarkdownEditor__toolbar__divider" />
-          {listButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-          <span className="euiMarkdownEditor__toolbar__divider" />
-          {quoteCodeLinkButtons.map(item => (
-            <EuiToolTip key={item.id} content={item.label} delay="long">
-              <EuiButtonIcon
-                color="text"
-                onClick={() => handleMdButtonClick(item.id)}
-                iconType={item.iconType}
-                aria-label={item.label}
-                isDisabled={isPreviewing}
-              />
-            </EuiToolTip>
-          ))}
-
-          {uiPlugins.length > 0 ? (
-            <>
-              <span className="euiMarkdownEditor__toolbar__divider" />
-              {uiPlugins.map(({ name, button }) => {
-                const isSelectedNodeType =
-                  selectedNode && selectedNode.type === name;
-                return (
-                  <EuiToolTip key={name} content={button.label} delay="long">
-                    <EuiButtonIcon
-                      color="text"
-                      {...(isSelectedNodeType
-                        ? {
-                            style: { background: 'rgba(0, 0, 0, 0.15)' },
-                          }
-                        : null)}
-                      onClick={() => handleMdButtonClick(name)}
-                      iconType={button.iconType}
-                      aria-label={button.label}
-                      isDisabled={isPreviewing}
-                    />
-                  </EuiToolTip>
-                );
-              })}
-            </>
-          ) : null}
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          {/* The idea was to use the EuiButtonToggle but it doesn't work when pressing the enter key */}
-          {isPreviewing ? (
-            <EuiButtonEmpty
-              iconType="editorCodeBlock"
+    <div className="euiMarkdownEditorToolbar">
+      <div className="euiMarkdownEditorToolbar__buttons">
+        {boldItalicButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
+              color="text"
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+        <span className="euiMarkdownEditorToolbar__divider" />
+        {listButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
               color="text"
-              size="s"
-              onClick={onClickPreview}>
-              <EuiI18n
-                token="euiMarkdownEditorToolbar.editor"
-                default="Editor"
-              />
-            </EuiButtonEmpty>
-          ) : (
-            <EuiButtonEmpty
-              iconType="eye"
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+        <span className="euiMarkdownEditorToolbar__divider" />
+        {quoteCodeLinkButtons.map(item => (
+          <EuiToolTip key={item.id} content={item.label} delay="long">
+            <EuiButtonIcon
               color="text"
-              size="s"
-              onClick={onClickPreview}>
-              <EuiI18n
-                token="euiMarkdownEditorToolbar.previewMarkdown"
-                default="Preview"
-              />
-            </EuiButtonEmpty>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
+              onClick={() => handleMdButtonClick(item.id)}
+              iconType={item.iconType}
+              aria-label={item.label}
+              isDisabled={isPreviewing}
+            />
+          </EuiToolTip>
+        ))}
+
+        {uiPlugins.length > 0 ? (
+          <>
+            <span className="euiMarkdownEditorToolbar__divider" />
+            {uiPlugins.map(({ name, button }) => {
+              const isSelectedNodeType =
+                selectedNode && selectedNode.type === name;
+              return (
+                <EuiToolTip key={name} content={button.label} delay="long">
+                  <EuiButtonIcon
+                    color="text"
+                    {...(isSelectedNodeType
+                      ? {
+                          style: { background: 'rgba(0, 0, 0, 0.15)' },
+                        }
+                      : null)}
+                    onClick={() => handleMdButtonClick(name)}
+                    iconType={button.iconType}
+                    aria-label={button.label}
+                    isDisabled={isPreviewing}
+                  />
+                </EuiToolTip>
+              );
+            })}
+          </>
+        ) : null}
+      </div>
+
+      {isPreviewing ? (
+        <EuiButtonEmpty
+          iconType="editorCodeBlock"
+          color="text"
+          size="s"
+          onClick={onClickPreview}>
+          <EuiI18n token="euiMarkdownEditorToolbar.editor" default="Editor" />
+        </EuiButtonEmpty>
+      ) : (
+        <EuiButtonEmpty
+          iconType="eye"
+          color="text"
+          size="s"
+          onClick={onClickPreview}>
+          <EuiI18n
+            token="euiMarkdownEditorToolbar.previewMarkdown"
+            default="Preview"
+          />
+        </EuiButtonEmpty>
+      )}
     </div>
   );
 };