diff --git a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
index 9eae0f3ee046f5..433509a0060e0f 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
+++ b/x-pack/plugins/maps/public/components/widget_overlay/_widget_overlay.scss
@@ -18,8 +18,13 @@
   max-width: 24rem;
 }
 
+.mapWidgetOverlay__layerWrapper {
+  align-items: flex-end;
+}
+
 .mapWidgetControl {
   max-height: 100%;
+  width: 100%;
   overflow: hidden;
   padding-bottom: $euiSizeS; // ensures the scrollbar doesn't appear unnecessarily because of flex group negative margins
   border-color: transparent !important;
@@ -30,11 +35,12 @@
   &.mapWidgetControl-hasShadow {
     @include euiBottomShadowLarge;
   }
+}
 
-  .mapWidgetControl__header {
-    padding: $euiSizeS $euiSize;
-    flex-shrink: 0;
-  }
+.mapWidgetControl__header {
+  padding: 0 $euiSize;
+  flex-shrink: 0;
+  text-transform: uppercase;
 }
 
 
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
index 2447f7c90215d0..381d4b24f8e457 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/_layer_control.scss
@@ -4,10 +4,19 @@
   flex-basis: auto !important; // Fixes IE and ensures the layer items are visible
 }
 
-.mapLayerControl__addLayerButton {
+.mapLayerControl__addLayerButton,
+.mapLayerControl__openLayerTOCButton {
   pointer-events: all;
+
+  &:enabled,
+  &:enabled:hover,
+  &:enabled:focus {
+    @include euiBottomShadowLarge;
+  }
 }
 
-.mapLayerControl__openLayerTOCButton {
-  pointer-events: all;
+.mapLayerControl__openLayerTOCButton,
+.mapLayerControl__closeLayerTOCButton {
+  @include size($euiSizeXL);
+  background-color: $euiColorEmptyShade;
 }
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
index 5b4c526cf0f378..d0e44842dc1db1 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/layer_control/view.js
@@ -13,6 +13,7 @@ import {
   EuiTitle,
   EuiSpacer,
   EuiButtonIcon,
+  EuiToolTip,
 } from '@elastic/eui';
 import { LayerTOC } from './layer_toc';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -21,14 +22,23 @@ import { i18n } from '@kbn/i18n';
 export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, closeLayerTOC, openLayerTOC }) {
   if (!isLayerTOCOpen) {
     return (
-      <EuiButton
-        className="mapLayerControl__openLayerTOCButton"
-        onClick={openLayerTOC}
-        iconType="arrowLeft"
-        aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
-          defaultMessage: 'Open layer table of contents'
+      <EuiToolTip
+        delay="long"
+        content={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+          defaultMessage: 'Expand layers panel'
         })}
-      />
+        position="left"
+      >
+        <EuiButtonIcon
+          className="mapLayerControl__openLayerTOCButton"
+          color="text"
+          onClick={openLayerTOC}
+          iconType="arrowLeft"
+          aria-label={i18n.translate('xpack.maps.layerControl.openLayerTOCButtonAriaLabel', {
+            defaultMessage: 'Expand layers panel'
+          })}
+        />
+      </EuiToolTip>
     );
   }
 
@@ -40,6 +50,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
         <EuiButton
           className="mapLayerControl__addLayerButton"
           fill
+          fullWidth
           onClick={showAddLayerWizard}
           data-test-subj="addLayerButton"
         >
@@ -55,7 +66,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
   return (
     <Fragment>
       <EuiPanel className="mapWidgetControl mapWidgetControl-hasShadow" paddingSize="none" grow={false}>
-        <EuiFlexItem className="mapWidgetControl__header" grow={false}>
+        <EuiFlexItem grow={false}>
           <EuiFlexGroup
             justifyContent="spaceBetween"
             alignItems="center"
@@ -63,7 +74,7 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
             gutterSize="none"
           >
             <EuiFlexItem>
-              <EuiTitle size="xs">
+              <EuiTitle size="xxxs" className="mapWidgetControl__header">
                 <h2>
                   <FormattedMessage
                     id="xpack.maps.layerControl.layersTitle"
@@ -73,13 +84,22 @@ export function LayerControl({ isReadOnly, isLayerTOCOpen, showAddLayerWizard, c
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
-                onClick={closeLayerTOC}
-                iconType="arrowRight"
-                aria-label={i18n.translate('xpack.maps.layerControl.closeLayerTOCButtonAriaLabel', {
-                  defaultMessage: 'Close layer table of contents'
+              <EuiToolTip
+                delay="long"
+                content={i18n.translate('xpack.maps.layerControl.closeLayerTOCButtonAriaLabel', {
+                  defaultMessage: 'Collapse layers panel'
                 })}
-              />
+              >
+                <EuiButtonIcon
+                  className="mapLayerControl__closeLayerTOCButton"
+                  onClick={closeLayerTOC}
+                  iconType="arrowRight"
+                  color="text"
+                  aria-label={i18n.translate('xpack.maps.layerControl.closeLayerTOCButtonAriaLabel', {
+                    defaultMessage: 'Collapse layers panel'
+                  })}
+                />
+              </EuiToolTip>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
index 3974737664ac72..ea858ba8997d81 100644
--- a/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
+++ b/x-pack/plugins/maps/public/components/widget_overlay/widget_overlay.js
@@ -23,7 +23,7 @@ export function WidgetOverlay() {
           justifyContent="spaceBetween"
           responsive={false}
         >
-          <EuiFlexItem>
+          <EuiFlexItem className="mapWidgetOverlay__layerWrapper">
             <LayerControl/>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>