diff --git a/app/javascript/components/maps/components/menu/components/menu-panel/component.jsx b/app/javascript/components/maps/components/menu/components/menu-panel/component.jsx
index c3daabdefe..771dcee911 100644
--- a/app/javascript/components/maps/components/menu/components/menu-panel/component.jsx
+++ b/app/javascript/components/maps/components/menu/components/menu-panel/component.jsx
@@ -50,9 +50,11 @@ class MenuPanel extends PureComponent {
       category,
       large,
       onClose,
+      onOpen,
       children,
       loading,
-      setMenuSettings
+      setMenuSettings,
+      collapsed
     } = this.props;
     const Panel = isDesktop ? PanelDesktop : PanelMobile;
 
@@ -85,9 +87,12 @@ class MenuPanel extends PureComponent {
                 <Button
                   className="panel-close"
                   theme="theme-button-clear"
-                  onClick={onClose}
+                  onClick={collapsed ? onOpen : onClose}
                 >
-                  <Icon icon={arrowIcon} className="icon-close-panel" />
+                  <Icon
+                    icon={arrowIcon}
+                    className={cx('icon-close-panel', { collapsed })}
+                  />
                 </Button>
               </div>
             ) : (
@@ -114,7 +119,9 @@ MenuPanel.propTypes = {
   label: PropTypes.string,
   category: PropTypes.string,
   active: PropTypes.bool,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  onOpen: PropTypes.func
 };
 
 export default MenuPanel;
diff --git a/app/javascript/components/maps/components/menu/components/menu-panel/styles.scss b/app/javascript/components/maps/components/menu/components/menu-panel/styles.scss
index 0b3bd873b0..525b8c3d44 100644
--- a/app/javascript/components/maps/components/menu/components/menu-panel/styles.scss
+++ b/app/javascript/components/maps/components/menu/components/menu-panel/styles.scss
@@ -81,6 +81,10 @@ $map-menu-panel-width-big: rem(560px);
       .button-wrapper {
         justify-content: flex-end;
       }
+
+      .collapsed {
+        transform: rotate(180deg);
+      }
     }
   }
 
diff --git a/app/javascript/components/maps/components/menu/menu-component.jsx b/app/javascript/components/maps/components/menu/menu-component.jsx
index f6df270c28..d4e041f491 100644
--- a/app/javascript/components/maps/components/menu/menu-component.jsx
+++ b/app/javascript/components/maps/components/menu/menu-component.jsx
@@ -1,7 +1,5 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import MediaQuery from 'react-responsive';
-import { SCREEN_M } from 'utils/constants';
 import cx from 'classnames';
 import isEqual from 'lodash/isEqual';
 import remove from 'lodash/remove';
@@ -47,10 +45,9 @@ class MapMenu extends PureComponent {
     const {
       showAnalysis,
       setMenuSettings,
-      setRecentImagerySettings,
       location,
-      recentVisible,
       menuSection,
+      recentActive,
       isDesktop
     } = this.props;
     if (
@@ -63,19 +60,14 @@ class MapMenu extends PureComponent {
       showAnalysis();
     }
 
-    if (!isDesktop && recentVisible) {
-      setMenuSettings({ menuSection: 'recent-imagery' });
+    if (!isDesktop && !menuSection && recentActive) {
+      setMenuSettings({ menuSection: 'recent-imagery-collapsed' });
     }
 
     if (
-      !isDesktop &&
-      !menuSection &&
-      !isEqual(menuSection, prevProps.menuSection)
+      !isEqual(isDesktop, prevProps.isDesktop) ||
+      (!recentActive && !isEqual(recentActive, prevProps.recentActive))
     ) {
-      setRecentImagerySettings({ visible: false });
-    }
-
-    if (!isEqual(isDesktop, prevProps.isDesktop)) {
       setMenuSettings({ menuSection: '' });
     }
   }
@@ -92,63 +84,69 @@ class MapMenu extends PureComponent {
       loading,
       analysisLoading,
       embed,
+      isDesktop,
       ...props
     } = this.props;
-    const { Component, label, category, large, icon, ...rest } =
+    const {
+      Component,
+      label,
+      category,
+      large,
+      icon,
+      collapsed,
+      openSection,
+      ...rest
+    } =
       activeSection || {};
 
     return (
-      <MediaQuery minWidth={SCREEN_M}>
-        {isDesktop => (
-          <div className={cx('c-map-menu', className)}>
-            <div
-              className={cx('menu-tiles', 'map-tour-data-layers', { embed })}
-            >
-              {isDesktop &&
-                !embed && (
-                  <MenuDesktop
-                    className="menu-desktop"
-                    datasetSections={datasetSections}
-                    searchSections={searchSections}
-                    setMenuSettings={setMenuSettings}
-                  />
-                )}
-              {!isDesktop && (
-                <MenuMobile
-                  sections={mobileSections}
-                  setMenuSettings={setMenuSettings}
-                />
-              )}
-            </div>
-            <MenuPanel
-              className="menu-panel"
-              label={label}
-              category={category}
-              active={!!menuSection}
-              large={large}
+      <div className={cx('c-map-menu', className)}>
+        <div className={cx('menu-tiles', 'map-tour-data-layers', { embed })}>
+          {isDesktop &&
+            !embed && (
+              <MenuDesktop
+                className="menu-desktop"
+                datasetSections={datasetSections}
+                searchSections={searchSections}
+                setMenuSettings={setMenuSettings}
+              />
+            )}
+          {!isDesktop && (
+            <MenuMobile
+              sections={mobileSections}
+              setMenuSettings={setMenuSettings}
+            />
+          )}
+        </div>
+        <MenuPanel
+          className="menu-panel"
+          label={label}
+          category={category}
+          active={!!menuSection}
+          large={large}
+          isDesktop={isDesktop}
+          setMenuSettings={setMenuSettings}
+          loading={loading}
+          collapsed={collapsed}
+          onClose={() =>
+            setMenuSettings({ menuSection: '', datasetCategory: '' })
+          }
+          onOpen={() => setMenuSettings({ menuSection: openSection })}
+        >
+          {Component && (
+            <Component
+              menuSection={menuSection}
               isDesktop={isDesktop}
               setMenuSettings={setMenuSettings}
-              loading={loading}
-              onClose={() =>
-                setMenuSettings({ menuSection: '', datasetCategory: '' })
-              }
-            >
-              {Component && (
-                <Component
-                  menuSection={menuSection}
-                  isDesktop={isDesktop}
-                  setMenuSettings={setMenuSettings}
-                  onToggleLayer={this.onToggleLayer}
-                  {...props}
-                  {...menuSection === 'datasets' && {
-                    ...rest
-                  }}
-                />
-              )}
-            </MenuPanel>
-          </div>
-        )}
-      </MediaQuery>
+              onToggleLayer={this.onToggleLayer}
+              {...props}
+              {...menuSection === 'datasets' && {
+                ...rest
+              }}
+            />
+          )}
+        </MenuPanel>
+      </div>
     );
   }
 }
@@ -177,10 +175,9 @@ MapMenu.propTypes = {
   datasetCategory: PropTypes.string,
   showAnalysis: PropTypes.func,
   location: PropTypes.object,
-  setRecentImagerySettings: PropTypes.func,
-  recentVisible: PropTypes.bool,
   isDesktop: PropTypes.bool,
-  embed: PropTypes.bool
+  embed: PropTypes.bool,
+  recentActive: PropTypes.bool
 };
 
 export default MapMenu;
diff --git a/app/javascript/components/maps/components/menu/menu-sections.js b/app/javascript/components/maps/components/menu/menu-sections.js
index 9d5957f3a1..c933cfac37 100644
--- a/app/javascript/components/maps/components/menu/menu-sections.js
+++ b/app/javascript/components/maps/components/menu/menu-sections.js
@@ -51,11 +51,17 @@ export const mobileSections = [
     Component: Search
   },
   {
-    label: 'Recent Imagery',
+    label: 'Recent Satellite Imagery',
     slug: 'recent-imagery',
-    icon: searchIcon,
     Component: RecentImagerySettings,
     hidden: true
+  },
+  {
+    label: 'Recent Satellite Imagery',
+    slug: 'recent-imagery-collapsed',
+    openSection: 'recent-imagery',
+    collapsed: true,
+    hidden: true
   }
 ];
 
diff --git a/app/javascript/components/maps/components/menu/menu-selectors.js b/app/javascript/components/maps/components/menu/menu-selectors.js
index 1b2f8d29a1..729a7a457d 100644
--- a/app/javascript/components/maps/components/menu/menu-selectors.js
+++ b/app/javascript/components/maps/components/menu/menu-selectors.js
@@ -5,8 +5,8 @@ import flatten from 'lodash/flatten';
 
 import { getActiveDatasetsFromState } from 'components/maps/map/selectors';
 import { getEmbed } from 'components/maps/main-map/selectors';
+import { getActive } from 'components/maps/main-map/components/recent-imagery/recent-imagery-selectors';
 
-import { getVisibility } from 'components/maps/main-map/components/recent-imagery/recent-imagery-selectors';
 import { initialState } from './menu-reducers';
 import {
   datasetsSections,
@@ -270,5 +270,5 @@ export const getMenuProps = createStructuredSelector({
   location: getLocation,
   loading: getLoading,
   analysisLoading: getAnalysisLoading,
-  recentVisible: getVisibility
+  recentActive: getActive
 });
diff --git a/app/javascript/components/maps/components/menu/menu.js b/app/javascript/components/maps/components/menu/menu.js
index be61b4731e..b34987c070 100644
--- a/app/javascript/components/maps/components/menu/menu.js
+++ b/app/javascript/components/maps/components/menu/menu.js
@@ -1,7 +1,6 @@
 import { connect } from 'react-redux';
 import reducerRegistry from 'app/registry';
 
-import { setRecentImagerySettings } from 'components/maps/main-map/components/recent-imagery/recent-imagery-actions';
 import { setMapSettings } from 'components/maps/map/actions';
 import * as actions from './menu-actions';
 import reducers, { initialState } from './menu-reducers';
@@ -16,6 +15,5 @@ reducerRegistry.registerModule('mapMenu', {
 
 export default connect(getMenuProps, {
   ...actions,
-  setRecentImagerySettings,
   setMapSettings
 })(MenuComponent);
diff --git a/app/javascript/components/maps/main-map/component.jsx b/app/javascript/components/maps/main-map/component.jsx
index baa09a1390..d29a1877cb 100644
--- a/app/javascript/components/maps/main-map/component.jsx
+++ b/app/javascript/components/maps/main-map/component.jsx
@@ -2,10 +2,7 @@ import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { SCREEN_M } from 'utils/constants';
 import cx from 'classnames';
-import startCase from 'lodash/startCase';
-import upperFirst from 'lodash/upperFirst';
 import MediaQuery from 'react-responsive';
-import { track } from 'app/analytics';
 import { Tooltip } from 'react-tippy';
 
 import Tip from 'components/ui/tip';
@@ -20,18 +17,6 @@ import MapControlButtons from './components/map-controls';
 import './styles.scss';
 
 class MainMapComponent extends PureComponent {
-  renderDataTooltip = data => (
-    <div>
-      {Object.keys(data).map(key => (
-        <p key={key}>
-          <strong>{upperFirst(startCase(key).toLowerCase())}</strong>:{' '}
-          {data[key]}
-        </p>
-      ))}
-      <p className="view-more">Click to view more.</p>
-    </div>
-  );
-
   renderInfoTooltip = string => (
     <div>
       <p className="tooltip-info">{string}</p>
@@ -40,16 +25,12 @@ class MainMapComponent extends PureComponent {
 
   render() {
     const {
-      draw,
       embed,
       hidePanels,
       oneClickAnalysis,
-      tileGeoJSON,
       showTooltip,
       tooltipData,
-      setRecentImagerySettings,
       handleClickMap,
-      handleRecentImageryTooltip,
       handleShowTooltip
     } = this.props;
 
@@ -74,11 +55,7 @@ class MainMapComponent extends PureComponent {
                 html={
                   <Tip
                     className="map-hover-tooltip"
-                    text={
-                      typeof tooltipData === 'string'
-                        ? this.renderInfoTooltip(tooltipData)
-                        : this.renderDataTooltip(tooltipData)
-                    }
+                    text={this.renderInfoTooltip(tooltipData)}
                   />
                 }
                 position="top"
@@ -88,45 +65,7 @@ class MainMapComponent extends PureComponent {
                 open={showTooltip}
                 disabled={!isDesktop}
               >
-                <Map
-                  className="main-map"
-                  customLayers={
-                    tileGeoJSON
-                      ? [
-                        {
-                          id: 'recentImagery',
-                          name: 'Geojson',
-                          provider: 'leaflet',
-                          layerConfig: {
-                            type: 'geoJSON',
-                            body: tileGeoJSON,
-                            options: {
-                              style: {
-                                stroke: false,
-                                fillOpacity: 0
-                              }
-                            }
-                          },
-                          interactivity: true,
-                          events: {
-                            click: () => {
-                              if (!draw) {
-                                setRecentImagerySettings({ visible: true });
-                                track('recentImageryOpen');
-                              }
-                            },
-                            mouseover: e => {
-                              if (!draw) handleRecentImageryTooltip(e);
-                            },
-                            mouseout: () => {
-                              if (!draw) handleShowTooltip(false, {});
-                            }
-                          }
-                        }
-                      ]
-                      : null
-                  }
-                />
+                <Map className="main-map" />
               </Tooltip>
             </div>
             {isDesktop &&
@@ -164,10 +103,6 @@ MainMapComponent.propTypes = {
   oneClickAnalysis: PropTypes.bool,
   embed: PropTypes.bool,
   hidePanels: PropTypes.bool,
-  setRecentImagerySettings: PropTypes.func,
-  handleRecentImageryTooltip: PropTypes.func,
-  tileGeoJSON: PropTypes.object,
-  draw: PropTypes.bool,
   tooltipData: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   showTooltip: PropTypes.bool
 };
diff --git a/app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx b/app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx
index 3179a83fb9..3a5367d223 100644
--- a/app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx
+++ b/app/javascript/components/maps/main-map/components/data-analysis-menu/component.jsx
@@ -40,7 +40,7 @@ class DataAnalysisMenu extends PureComponent {
         className={cx(
           'c-data-analysis-menu',
           'map-tour-legend',
-          { relocate: !!menuSection },
+          { relocate: !!menuSection && menuSection.Component },
           { big: menuSection && menuSection.large },
           { embed },
           className
diff --git a/app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx b/app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx
index 4170779ae6..f37fea5810 100644
--- a/app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx
+++ b/app/javascript/components/maps/main-map/components/map-controls/map-controls-component.jsx
@@ -8,10 +8,9 @@ import { isParent } from 'utils/dom';
 import { track } from 'app/analytics';
 
 import Basemaps from 'components/maps/components/basemaps';
-import RecentImagerySettings from 'components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip';
+import RecentImagerySettings from 'components/maps/main-map/components/recent-imagery/components/recent-imagery-settings';
 import Button from 'components/ui/button';
 import Icon from 'components/ui/icon';
-import Loader from 'components/ui/loader';
 
 import plusIcon from 'assets/icons/plus.svg';
 import minusIcon from 'assets/icons/minus.svg';
@@ -40,17 +39,9 @@ class MapControlsButtons extends PureComponent {
   setPulseTourBtn = pulseTourBtn => this.setState({ pulseTourBtn });
 
   handleHidePanels = () => {
-    const {
-      setMainMapSettings,
-      setMenuSettings,
-      setRecentImagerySettings,
-      hidePanels
-    } = this.props;
+    const { setMainMapSettings, setMenuSettings, hidePanels } = this.props;
     setMainMapSettings({ hidePanels: !hidePanels });
     setMenuSettings({ menuSection: '' });
-    setRecentImagerySettings({
-      visible: false
-    });
     this.setState({ showBasemaps: false });
     if (!hidePanels) {
       track('hidePanels');
@@ -65,32 +56,17 @@ class MapControlsButtons extends PureComponent {
     }
   };
 
-  onRecentRequestClose = () => {
-    const { setRecentImagerySettings } = this.props;
-    const isTargetOnTooltip = isParent(
-      this.recentImageryRef,
-      this.recentImageryRef.evt
-    );
-    this.recentImageryRef.clearEvt();
-    if (!isTargetOnTooltip && this.props.recentSettings.active) {
-      setRecentImagerySettings({ visible: false });
-    }
-  };
-
   toggleBasemaps = () => {
-    const {
-      setRecentImagerySettings,
-      setMainMapSettings,
-      showBasemaps
-    } = this.props;
+    const { setMainMapSettings, showBasemaps, recentActive } = this.props;
     setMainMapSettings({ showBasemaps: !showBasemaps });
-    setRecentImagerySettings({ visible: false });
+    if (recentActive) {
+      this.handleToggleRecentImagery();
+    }
   };
 
   handleToggleRecentImagery = () => {
     const {
       setMapSettings,
-      setRecentImagerySettings,
       recentImageryDataset,
       recentActive,
       mapSettings: { datasets, zoom }
@@ -108,9 +84,6 @@ class MapControlsButtons extends PureComponent {
       datasets: newDatasets,
       zoom: !recentActive && zoom < 9 ? 9 : zoom
     });
-    setRecentImagerySettings({
-      visible: false
-    });
     if (!recentActive) {
       track('recentImageryEnable');
     }
@@ -125,33 +98,22 @@ class MapControlsButtons extends PureComponent {
   };
 
   renderRecentImageryBtn = () => {
-    const {
-      recentSettings,
-      recentLoading,
-      recentActive,
-      datasetsLoading
-    } = this.props;
-    const { visible } = recentSettings || {};
+    const { recentActive, datasetsLoading } = this.props;
 
     return (
       <Button
-        className={cx('recent-imagery-btn', 'map-tour-recent-imagery')}
+        className={cx(
+          'map-tool-btn recent-imagery-btn',
+          { active: recentActive },
+          'map-tour-recent-imagery'
+        )}
         theme="theme-button-map-control"
         onClick={this.handleToggleRecentImagery}
         disabled={datasetsLoading}
-        tooltip={
-          !visible
-            ? {
-              text: !recentActive
-                ? 'Activate Recent Imagery'
-                : 'Disable Recent Imagery',
-              hideOnClick: false
-            }
-            : undefined
-        }
+        tooltip={{
+          text: 'Recent Satellite Imagery'
+        }}
       >
-        {recentLoading &&
-          recentActive && <Loader className="recent-imagery-loader" />}
         <Icon
           icon={satelliteIcon}
           className={cx('satellite-icon', {
@@ -167,7 +129,7 @@ class MapControlsButtons extends PureComponent {
 
     return (
       <Button
-        className={cx('basemaps-btn')}
+        className={cx('map-tool-btn basemaps-btn', { active: showBasemaps })}
         theme="theme-button-map-control"
         onClick={this.toggleBasemaps}
         tooltip={
@@ -183,8 +145,7 @@ class MapControlsButtons extends PureComponent {
   };
 
   renderRecentImageryTooltip = () => {
-    const { recentSettings } = this.props;
-    const { visible } = recentSettings || {};
+    const { recentActive } = this.props;
 
     return (
       <Tooltip
@@ -193,9 +154,13 @@ class MapControlsButtons extends PureComponent {
         useContext
         interactive
         animateFill={false}
-        open={visible}
-        onRequestClose={this.onRecentRequestClose}
-        html={<RecentImagerySettings ref={this.setRecentImageryRef} />}
+        arrow
+        open={recentActive}
+        html={
+          <RecentImagerySettings
+            onClickClose={this.handleToggleRecentImagery}
+          />
+        }
         offset={120}
       >
         {this.renderRecentImageryBtn()}
@@ -212,6 +177,7 @@ class MapControlsButtons extends PureComponent {
         position="top-end"
         useContext
         interactive
+        arrow
         animateFill={false}
         open={showBasemaps}
         onRequestClose={this.onBasemapsRequestClose}
@@ -387,15 +353,11 @@ MapControlsButtons.propTypes = {
   setMainMapSettings: PropTypes.func,
   setShareModal: PropTypes.func,
   mapSettings: PropTypes.object,
-  active: PropTypes.bool,
   setMenuSettings: PropTypes.func,
   setMapTourOpen: PropTypes.func,
   mapTourOpen: PropTypes.bool,
-  recentSettings: PropTypes.object,
-  recentLoading: PropTypes.bool,
   showBasemaps: PropTypes.bool,
   hidePanels: PropTypes.bool,
-  setRecentImagerySettings: PropTypes.func,
   recentImageryDataset: PropTypes.object,
   recentActive: PropTypes.bool,
   datasetsLoading: PropTypes.bool,
diff --git a/app/javascript/components/maps/main-map/components/map-controls/map-controls-styles.scss b/app/javascript/components/maps/main-map/components/map-controls/map-controls-styles.scss
index 8b91b991ee..b4a6878ade 100644
--- a/app/javascript/components/maps/main-map/components/map-controls/map-controls-styles.scss
+++ b/app/javascript/components/maps/main-map/components/map-controls/map-controls-styles.scss
@@ -29,6 +29,12 @@
     }
   }
 
+  .map-tool-btn {
+    &.active {
+      box-shadow: $tooltip-box-shadow;
+    }
+  }
+
   .recent-imagery-btn {
     position: relative;
   }
diff --git a/app/javascript/components/maps/main-map/components/map-controls/map-controls.js b/app/javascript/components/maps/main-map/components/map-controls/map-controls.js
index 9ec137e31e..deb95a5307 100644
--- a/app/javascript/components/maps/main-map/components/map-controls/map-controls.js
+++ b/app/javascript/components/maps/main-map/components/map-controls/map-controls.js
@@ -5,7 +5,6 @@ import { setMenuSettings } from 'components/maps/components/menu/menu-actions';
 import { setMapSettings } from 'components/maps/map/actions';
 import { setMapTourOpen } from 'components/maps/main-map/components/map-tour/actions';
 import { setMainMapSettings } from 'components/maps/main-map/actions';
-import { setRecentImagerySettings } from 'components/maps/main-map/components/recent-imagery/recent-imagery-actions';
 
 import Component from './map-controls-component';
 import { getMapControlsProps } from './map-controls-selectors';
@@ -15,6 +14,5 @@ export default connect(getMapControlsProps, {
   setMenuSettings,
   setMapTourOpen,
   setMapSettings,
-  setMainMapSettings,
-  setRecentImagerySettings
+  setMainMapSettings
 })(Component);
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/component.jsx b/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/component.jsx
deleted file mode 100644
index 34f65e0042..0000000000
--- a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/component.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
-import RecentImagerySettings from '../recent-imagery-settings';
-
-class RecentImagerySettingsTooltip extends PureComponent {
-  render() {
-    const { getTooltipContentProps } = this.props;
-
-    return (
-      <div
-        className="c-recent-imagery-settings-tooltip"
-        {...getTooltipContentProps()}
-      >
-        <RecentImagerySettings />
-      </div>
-    );
-  }
-}
-
-RecentImagerySettingsTooltip.propTypes = {
-  getTooltipContentProps: PropTypes.func
-};
-
-export default RecentImagerySettingsTooltip;
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/index.js b/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/index.js
deleted file mode 100644
index d8158bc4e9..0000000000
--- a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings-tooltip/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import withTooltipEvent from 'components/ui/with-tooltip-evt';
-import Component from './component';
-
-export default withTooltipEvent(Component);
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js b/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js
index 67240671c9..12ecba3349 100644
--- a/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js
+++ b/app/javascript/components/maps/main-map/components/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js
@@ -37,11 +37,12 @@ class RecentImagerySettings extends PureComponent {
       activeTile,
       tiles,
       loading,
+      moreTilesLoading,
       settings: { date, weeks, bands },
       setRecentImagerySettings,
-      setModalMeta
+      setModalMeta,
+      onClickClose
     } = this.props;
-
     const selected = this.state.selected || activeTile || {};
 
     return (
@@ -57,10 +58,7 @@ class RecentImagerySettings extends PureComponent {
               >
                 <Icon icon={infoIcon} />
               </Button>
-              <button
-                className="close-btn"
-                onClick={() => setRecentImagerySettings({ visible: false })}
-              >
+              <button className="close-btn" onClick={onClickClose}>
                 <Icon icon={closeIcon} className="icon-close" />
               </button>
             </div>
@@ -187,7 +185,7 @@ class RecentImagerySettings extends PureComponent {
                 message="We can't find additional images for the selection"
               />
             )}
-          {loading && <Loader className="placeholder" />}
+          {loading && !moreTilesLoading && <Loader className="placeholder" />}
         </div>
       </div>
     );
@@ -200,7 +198,9 @@ RecentImagerySettings.propTypes = {
   settings: PropTypes.object,
   setRecentImagerySettings: PropTypes.func,
   setModalMeta: PropTypes.func,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  moreTilesLoading: PropTypes.bool,
+  onClickClose: PropTypes.func
 };
 
 export default RecentImagerySettings;
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js
index d87c1c7093..59bb851843 100644
--- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js
+++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js
@@ -38,14 +38,14 @@ export const getRecentImageryData = createThunkAction(
   params => (dispatch, getState) => {
     const { recentImagery } = getState();
     if (recentImagery && !recentImagery.loading) {
-      dispatch(setRecentImageryLoading(true));
+      dispatch(setRecentImageryLoading({ loading: true, error: false }));
       getRecentTiles({ ...params })
         .then(response => {
           const serializedResponse = serializeReponse(
             response.data && response.data.data && response.data.data.tiles
           );
           if (serializedResponse && !!serializedResponse.length) {
-            const { clouds } = 25;
+            const clouds = 25;
             const cloudScore = Math.round(serializedResponse[0].cloud_score);
             dispatch(
               setRecentImageryData({
@@ -61,11 +61,11 @@ export const getRecentImageryData = createThunkAction(
                 clouds: cloudScore > clouds ? cloudScore : clouds
               })
             );
-            dispatch(setRecentImageryLoading(false));
+            dispatch(setRecentImageryLoading({ loading: false, error: false }));
           }
         })
         .catch(error => {
-          dispatch(setRecentImageryLoading(false));
+          dispatch(setRecentImageryLoading({ loading: false, error: true }));
           console.info(error);
         });
     }
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-reducers.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-reducers.js
index 9d7c7788f4..6b3cb14e08 100644
--- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-reducers.js
+++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-reducers.js
@@ -6,13 +6,12 @@ export const initialState = {
   loadingMoreTiles: false,
   data: [],
   dataStatus: {
-    tilesPerRequest: 6,
+    tilesPerRequest: 2,
     haveAllData: false,
     requestedTiles: 0,
     requestFails: 0
   },
   settings: {
-    visible: false,
     selected: null,
     selectedIndex: 0,
     date: null,
@@ -49,7 +48,8 @@ const resetRecentImageryData = () => ({
 
 const setRecentImageryLoading = (state, { payload }) => ({
   ...state,
-  loading: payload
+  loading: payload.loading,
+  error: payload.error
 });
 
 const setRecentImageryLoadingMoreTiles = (state, { payload }) => ({
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js
index 109193e624..101dd8ec2b 100644
--- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js
+++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js
@@ -32,7 +32,6 @@ export const getMapSettings = createSelector([getMapUrlState], urlState => ({
 export const getRecentImagerySettings = createSelector(
   [getRecentUrlState],
   urlState => ({
-    ...initialState.settings,
     ...(initialState && {
       ...initialState.settings
     }),
@@ -55,11 +54,6 @@ export const getActiveDatasetsFromState = createSelector(
   settings => settings.datasets
 );
 
-export const getVisibility = createSelector(
-  [getRecentImagerySettings],
-  settings => settings.visible
-);
-
 export const getActive = createSelector(
   [getActiveDatasetsFromState],
   datasets => {
@@ -104,24 +98,6 @@ export const getActiveTile = createSelector(
   }
 );
 
-export const getTileGeoJSON = createSelector([getActiveTile], activeTile => {
-  if (!activeTile) return null;
-  return {
-    features: [
-      {
-        type: 'Feature',
-        properties: {
-          ...activeTile
-        },
-        geometry: {
-          type: 'Polygon',
-          coordinates: [activeTile.bbox.geometry.coordinates]
-        }
-      }
-    ]
-  };
-});
-
 export const getTileBounds = createSelector([getActiveTile], activeTile => {
   if (!activeTile) return null;
   return activeTile.bbox.geometry.coordinates;
@@ -173,7 +149,6 @@ export const getRecentImageryProps = createStructuredSelector({
   moreTilesLoading: getMoreTilesLoading,
   error: getError,
   active: getActive,
-  visible: getVisibility,
   dates: getDates,
   sources: getSources,
   settings: getRecentImagerySettings,
diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js
index b2a004d9da..945b1b0524 100644
--- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js
+++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js
@@ -94,7 +94,8 @@ class RecentImageryContainer extends PureComponent {
       !dataStatus.haveAllData &&
       !loadingMoreTiles &&
       active &&
-      activeTile
+      activeTile &&
+      isNewTile
     ) {
       getMoreTiles({
         sources,
diff --git a/app/javascript/components/maps/main-map/index.js b/app/javascript/components/maps/main-map/index.js
index 1d6c9d1221..146ad8137c 100644
--- a/app/javascript/components/maps/main-map/index.js
+++ b/app/javascript/components/maps/main-map/index.js
@@ -4,9 +4,6 @@ import { connect } from 'react-redux';
 import isEqual from 'lodash/isEqual';
 import isEmpty from 'lodash/isEmpty';
 import flatMap from 'lodash/flatMap';
-import moment from 'moment';
-import startCase from 'lodash/startCase';
-import { format } from 'd3-format';
 import { track } from 'app/analytics';
 
 import { setRecentImagerySettings } from 'components/maps/main-map/components/recent-imagery/recent-imagery-actions';
@@ -57,18 +54,6 @@ class MainMapContainer extends PureComponent {
     this.setState({ showTooltip: show, tooltipData: data });
   };
 
-  handleRecentImageryTooltip = e => {
-    const data = e.layer.feature.properties;
-    const { cloudScore, instrument, dateTime } = data;
-    this.handleShowTooltip(true, {
-      instrument: startCase(instrument),
-      date: moment(dateTime)
-        .format('DD MMM YYYY, HH:mm')
-        .toUpperCase(),
-      cloudCoverage: `${format('.0f')(cloudScore)}%`
-    });
-  };
-
   handleClickMap = () => {
     if (this.props.menuSection) {
       this.props.setMenuSettings({ menuSection: '' });
@@ -80,7 +65,6 @@ class MainMapContainer extends PureComponent {
       ...this.props,
       ...this.state,
       handleShowTooltip: this.handleShowTooltip,
-      handleRecentImageryTooltip: this.handleRecentImageryTooltip,
       handleClickMap: this.handleClickMap
     });
   }
diff --git a/app/javascript/components/maps/main-map/initial-state.js b/app/javascript/components/maps/main-map/initial-state.js
index d29b708143..fd53956ce7 100644
--- a/app/javascript/components/maps/main-map/initial-state.js
+++ b/app/javascript/components/maps/main-map/initial-state.js
@@ -2,5 +2,6 @@ export default {
   hidePanels: false,
   hideLegend: false,
   showBasemaps: false,
+  showRecentImagery: false,
   showAnalysis: false
 };
diff --git a/app/javascript/components/maps/main-map/selectors.js b/app/javascript/components/maps/main-map/selectors.js
index 3d209aec8f..35af48c356 100644
--- a/app/javascript/components/maps/main-map/selectors.js
+++ b/app/javascript/components/maps/main-map/selectors.js
@@ -7,7 +7,6 @@ import {
   getSelectedInteraction
 } from 'components/maps/map/selectors';
 import { getShowDraw } from 'components/maps/components/analysis/selectors';
-import { getTileGeoJSON } from './components/recent-imagery/recent-imagery-selectors';
 
 import initialState from './initial-state';
 
@@ -69,7 +68,6 @@ export const getMapProps = createStructuredSelector({
   analysisActive: getShowAnalysis,
   oneClickAnalysis: getOneClickAnalysis,
   hidePanels: getHidePanels,
-  tileGeoJSON: getTileGeoJSON,
   menuSection: selectMenuSection,
   activeDatasets: getActiveDatasetsFromState,
   embed: getEmbed,
diff --git a/app/javascript/components/maps/main-map/styles.scss b/app/javascript/components/maps/main-map/styles.scss
index fe7e74ab6a..a10bf95e00 100644
--- a/app/javascript/components/maps/main-map/styles.scss
+++ b/app/javascript/components/maps/main-map/styles.scss
@@ -36,13 +36,6 @@
     height: 100%;
   }
 
-  .main-map-hover-tooltip {
-    .view-more {
-      margin-top: rem(5px);
-      font-size: rem(10px);
-    }
-  }
-
   .main-map-controls {
     position: absolute;
     top: rem(15px);
diff --git a/app/javascript/components/maps/map/component.jsx b/app/javascript/components/maps/map/component.jsx
index 9cf94d6ecf..23edd1727d 100644
--- a/app/javascript/components/maps/map/component.jsx
+++ b/app/javascript/components/maps/map/component.jsx
@@ -35,7 +35,8 @@ class MapComponent extends PureComponent {
       draw,
       handleMapMove,
       handleMapInteraction,
-      customLayers
+      customLayers,
+      loadingMessage
     } = this.props;
 
     return (
@@ -80,7 +81,11 @@ class MapComponent extends PureComponent {
         <Icon className="map-icon-crosshair" icon={iconCrosshair} />
         <MapAttributions className="map-attributions" />
         {loading && (
-          <Loader className="map-loader" theme="theme-loader-light" />
+          <Loader
+            className="map-loader"
+            theme="theme-loader-light"
+            message={loadingMessage}
+          />
         )}
         <LayerSpecProvider />
       </div>
@@ -91,6 +96,7 @@ class MapComponent extends PureComponent {
 MapComponent.propTypes = {
   className: PropTypes.string,
   loading: PropTypes.bool,
+  loadingMessage: PropTypes.string,
   mapOptions: PropTypes.object,
   basemap: PropTypes.object,
   label: PropTypes.object,
diff --git a/app/javascript/components/maps/map/selectors.js b/app/javascript/components/maps/map/selectors.js
index 9c2cd4739c..741dcbc3c0 100644
--- a/app/javascript/components/maps/map/selectors.js
+++ b/app/javascript/components/maps/map/selectors.js
@@ -14,6 +14,8 @@ const selectMapUrlState = state =>
 const selectMapLoading = state => state.map && state.map.loading;
 const selectGeostoreLoading = state => state.geostore && state.geostore.loading;
 const selectLatestLoading = state => state.latest && state.latest.loading;
+const selectRecentImageryLoading = state =>
+  state.recentImagery && state.recentImagery.loading;
 const selectDatasetsLoading = state => state.datasets && state.datasets.loading;
 
 // datasets
@@ -111,10 +113,30 @@ export const getMapLoading = createSelector(
     selectMapLoading,
     selectGeostoreLoading,
     selectLatestLoading,
-    selectDatasetsLoading
+    selectDatasetsLoading,
+    selectRecentImageryLoading
   ],
-  (mapLoading, geostoreLoading, latestLoading, datasetsLoading) =>
-    mapLoading || geostoreLoading || latestLoading || datasetsLoading
+  (
+    mapLoading,
+    geostoreLoading,
+    latestLoading,
+    datasetsLoading,
+    recentImageryLoading
+  ) =>
+    mapLoading ||
+    geostoreLoading ||
+    latestLoading ||
+    datasetsLoading ||
+    recentImageryLoading
+);
+
+export const getLoadingMessage = createSelector(
+  [selectRecentImageryLoading, selectLatestLoading],
+  (recentLoading, latestLoading) => {
+    if (recentLoading) return 'Fetching the most recent satellite image...';
+    if (latestLoading) return 'Fetching latest data...';
+    return '';
+  }
 );
 
 // select datasets and dataset state
@@ -455,6 +477,7 @@ export const getSelectedInteraction = createSelector(
 
 export const getMapProps = createStructuredSelector({
   loading: getMapLoading,
+  loadingMessage: getLoadingMessage,
   mapOptions: getMapOptions,
   basemap: getBasemap,
   label: getLabel,
diff --git a/app/javascript/components/ui/loader/loader-component.js b/app/javascript/components/ui/loader/loader-component.js
index 34457c0cd2..07ce3a43e6 100644
--- a/app/javascript/components/ui/loader/loader-component.js
+++ b/app/javascript/components/ui/loader/loader-component.js
@@ -6,10 +6,11 @@ import './themes/loader-light.scss'; // eslint-disable-line
 
 class Loader extends PureComponent {
   render() {
-    const { className, theme } = this.props;
+    const { className, theme, message } = this.props;
     return (
       <div className={`c-loader ${className} ${theme}`}>
         <div className="spinner" />
+        {message && <p className="message">{message}</p>}
       </div>
     );
   }
@@ -17,7 +18,8 @@ class Loader extends PureComponent {
 
 Loader.propTypes = {
   className: PropTypes.string,
-  theme: PropTypes.string
+  theme: PropTypes.string,
+  message: PropTypes.string
 };
 
 export default Loader;
diff --git a/app/javascript/components/ui/loader/loader-styles.scss b/app/javascript/components/ui/loader/loader-styles.scss
index 9daf9ad3d3..fb3ec6f949 100644
--- a/app/javascript/components/ui/loader/loader-styles.scss
+++ b/app/javascript/components/ui/loader/loader-styles.scss
@@ -4,6 +4,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
   height: 100%;
   width: 100%;
   position: absolute;
@@ -20,6 +21,13 @@
     border-top-color: rgba($slate, 0.7);
     border-radius: 50%;
   }
+
+  .message {
+    margin-top: rem(10px);
+    font-size: rem(14px);
+    background-color: rgba($white, 0.5);
+    padding: rem(5px) rem(8px);
+  }
 }
 
 @keyframes rotate {
diff --git a/app/javascript/styles/settings.scss b/app/javascript/styles/settings.scss
index ed2d533853..09a4f4ca12 100644
--- a/app/javascript/styles/settings.scss
+++ b/app/javascript/styles/settings.scss
@@ -55,3 +55,4 @@ $font-color-6: $slate-light;
 
 /* SHADOWS */
 $pop-box-shadow: 1px 1px 10px 0 rgba($slate, 0.25);
+$tooltip-box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2);