diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
index ad99780a7d32f..edb395633827f 100644
--- a/x-pack/plugins/maps/common/constants.ts
+++ b/x-pack/plugins/maps/common/constants.ts
@@ -227,3 +227,9 @@ export enum INITIAL_LOCATION {
   FIXED_LOCATION = 'FIXED_LOCATION',
   BROWSER_LOCATION = 'BROWSER_LOCATION',
 }
+
+export enum LAYER_WIZARD_CATEGORY {
+  ELASTICSEARCH = 'ELASTICSEARCH',
+  REFERENCE = 'REFERENCE',
+  SOLUTIONS = 'SOLUTIONS',
+}
diff --git a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
index 2bdeb6446cf28..a255ffb00e312 100644
--- a/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
+++ b/x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts
@@ -7,6 +7,7 @@
 
 import { ReactElement } from 'react';
 import { LayerDescriptor } from '../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../common/constants';
 
 export type RenderWizardArguments = {
   previewLayers: (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => void;
@@ -20,6 +21,7 @@ export type RenderWizardArguments = {
 };
 
 export type LayerWizard = {
+  categories: LAYER_WIZARD_CATEGORY[];
   checkVisibility?: () => Promise<boolean>;
   description: string;
   icon: string;
diff --git a/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
index db97c08596e06..ddb07a9facee7 100644
--- a/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx
@@ -6,12 +6,14 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { ObservabilityLayerTemplate } from './observability_layer_template';
 import { APM_INDEX_PATTERN_ID } from './create_layer_descriptor';
 import { getIndexPatternService } from '../../../../kibana_services';
 
 export const ObservabilityLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
   checkVisibility: async () => {
     try {
       await getIndexPatternService().get(APM_INDEX_PATTERN_ID);
diff --git a/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
index cece00fa37350..f51aa5b40aa80 100644
--- a/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx
@@ -6,11 +6,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { getSecurityIndexPatterns } from './security_index_pattern_utils';
 import { SecurityLayerTemplate } from './security_layer_template';
 
 export const SecurityLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
   checkVisibility: async () => {
     const indexPatterns = await getSecurityIndexPatterns();
     return indexPatterns.length > 0;
diff --git a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
index 3f4ec0d3f1268..0a224f75b981d 100644
--- a/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx
@@ -22,6 +22,7 @@ import { GeojsonFileSource } from './geojson_file_source';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 
 export const uploadLayerWizardConfig: LayerWizard = {
+  categories: [],
   description: i18n.translate('xpack.maps.source.geojsonFileDescription', {
     defaultMessage: 'Index GeoJSON data in Elasticsearch',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
index 7eec84ef5bb2e..c53a7a4facb0c 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { EMSFileSource, sourceTitle } from './ems_file_source';
 // @ts-ignore
 import { getIsEmsEnabled } from '../../../kibana_services';
 import { EMSFileSourceDescriptor } from '../../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBoundariesLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: () => {
     return getIsEmsEnabled();
   },
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
index 60e67b1ae7053..49d262cbad1a1 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_laye
 // @ts-ignore
 import { TileServiceSelect } from './tile_service_select';
 import { getIsEmsEnabled } from '../../../kibana_services';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBaseMapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: () => {
     return getIsEmsEnabled();
   },
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
index b9d5faa8e18f1..715c16b22dc51 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
@@ -23,6 +23,7 @@ import {
   COUNT_PROP_NAME,
   COLOR_MAP_TYPE,
   FIELD_ORIGIN,
+  LAYER_WIZARD_CATEGORY,
   RENDER_AS,
   VECTOR_STYLES,
   STYLE_TYPE,
@@ -30,6 +31,7 @@ import {
 import { COLOR_GRADIENTS } from '../../styles/color_utils';
 
 export const clustersLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esGridClustersDescription', {
     defaultMessage: 'Geospatial data grouped in grids with metrics for each gridded cell',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
index 79252c7febf8c..92a0f1006ea43 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx
@@ -14,9 +14,10 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 // @ts-ignore
 import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer';
 import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
-import { RENDER_AS } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants';
 
 export const heatmapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esGridHeatmapDescription', {
     defaultMessage: 'Geospatial data grouped in grids to show density',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
index 5169af9bdddf2..ae7414b827c8d 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx
@@ -14,6 +14,7 @@ import { VectorStyle } from '../../styles/vector/vector_style';
 import {
   FIELD_ORIGIN,
   COUNT_PROP_NAME,
+  LAYER_WIZARD_CATEGORY,
   VECTOR_STYLES,
   STYLE_TYPE,
 } from '../../../../common/constants';
@@ -24,6 +25,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types';
 
 export const point2PointLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.pewPewDescription', {
     defaultMessage: 'Aggregated data paths between the source and destination',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
index 888de2e7297cb..4598b1467229d 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx
@@ -13,7 +13,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ESSearchSource, sourceTitle } from './es_search_source';
 import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_vector_layer';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
-import { SCALING_TYPES } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants';
 
 export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: string[]) {
   const sourceDescriptor = ESSearchSource.createDescriptor(sourceConfig);
@@ -24,6 +24,7 @@ export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: s
 }
 
 export const esDocumentsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
   description: i18n.translate('xpack.maps.source.esSearchDescription', {
     defaultMessage: 'Vector data from a Kibana index pattern',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
index ca78aaefe404f..c8a1c346646e0 100644
--- a/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 // @ts-ignore
 import { CreateSourceEditor } from './create_source_editor';
 import { getKibanaRegionList } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaRegionMapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: async () => {
     const regions = getKibanaRegionList();
     return regions.length > 0;
diff --git a/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
index 84d2e5e74fa9a..9f63372a78511 100644
--- a/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx
@@ -13,8 +13,10 @@ import { CreateSourceEditor } from './create_source_editor';
 import { KibanaTilemapSource, sourceTitle } from './kibana_tilemap_source';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
 import { getKibanaTileMap } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaBasemapLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   checkVisibility: async () => {
     const tilemap = getKibanaTileMap();
     // @ts-ignore
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
index c29302a2058b2..067c7f5a47ca3 100644
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx
@@ -13,8 +13,10 @@ import {
 import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const mvtVectorSourceWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', {
     defaultMessage: 'Vector source wizard',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
index 62eeef234f414..b3950baf8dbeb 100644
--- a/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx
@@ -12,8 +12,10 @@ import { WMSCreateSourceEditor } from './wms_create_source_editor';
 import { sourceTitle, WMSSource } from './wms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const wmsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.wmsDescription', {
     defaultMessage: 'Maps from OGC Standard WMS',
   }),
diff --git a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
index b99b17c1d22d4..48c526855d3a4 100644
--- a/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx
@@ -10,8 +10,10 @@ import { XYZTMSEditor, XYZTMSSourceConfig } from './xyz_tms_editor';
 import { XYZTMSSource, sourceTitle } from './xyz_tms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const tmsLayerWizardConfig: LayerWizard = {
+  categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
   description: i18n.translate('xpack.maps.source.ems_xyzDescription', {
     defaultMessage: 'Tile map service configured in interface',
   }),
diff --git a/x-pack/plugins/maps/public/connected_components/_index.scss b/x-pack/plugins/maps/public/connected_components/_index.scss
index 6de2a51590700..bd8070e8c36fd 100644
--- a/x-pack/plugins/maps/public/connected_components/_index.scss
+++ b/x-pack/plugins/maps/public/connected_components/_index.scss
@@ -1,5 +1,4 @@
 @import 'gis_map/gis_map';
-@import 'add_layer_panel/index';
 @import 'layer_panel/index';
 @import 'widget_overlay/index';
 @import 'toolbar_overlay/index';
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss b/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss
deleted file mode 100644
index 4e60b8d4b7c4b..0000000000000
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/_index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.mapLayerAddpanel__card {
-  // EUITODO: Fix horizontal layout so it works with any size icon
-  .euiCard__content {
-    // sass-lint:disable-block no-important
-    padding-top: 0 !important;
-  }
-
-  .euiCard__top + .euiCard__content {
-    // sass-lint:disable-block no-important
-    padding-top: 2px !important;
-  }
-}
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
new file mode 100644
index 0000000000000..ef11f9958d8db
--- /dev/null
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LayerWizardSelect Should render layer select after layer wizards are loaded 1`] = `
+<Fragment>
+  <EuiFacetGroup
+    layout="horizontal"
+  >
+    <EuiFacetButton
+      isSelected={true}
+      key="all"
+      onClick={[Function]}
+    >
+      <FormattedMessage
+        defaultMessage="All"
+        id="xpack.maps.layerWizardSelect.allCategories"
+        values={Object {}}
+      />
+    </EuiFacetButton>
+    <EuiFacetButton
+      isSelected={false}
+      key="ELASTICSEARCH"
+      onClick={[Function]}
+    >
+      Elasticsearch
+    </EuiFacetButton>
+    <EuiFacetButton
+      isSelected={false}
+      key="SOLUTIONS"
+      onClick={[Function]}
+    >
+      Solutions
+    </EuiFacetButton>
+  </EuiFacetGroup>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiFlexGrid
+    columns={2}
+    gutterSize="m"
+  >
+    <EuiFlexItem
+      key="wizard 1"
+    >
+      <EuiCard
+        data-test-subj="wizard1"
+        description="mock wizard without icon"
+        onClick={[Function]}
+        title="wizard 1"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      key="wizard 2"
+    >
+      <EuiCard
+        data-test-subj="wizard2"
+        description="mock wizard with icon"
+        icon={
+          <EuiIcon
+            size="l"
+            type="logoObservability"
+          />
+        }
+        onClick={[Function]}
+        title="wizard 2"
+      />
+    </EuiFlexItem>
+  </EuiFlexGrid>
+</Fragment>
+`;
+
+exports[`LayerWizardSelect Should render loading screen before layer wizards are loaded 1`] = `
+<div>
+  <EuiCard
+    description={
+      <EuiLoadingContent
+        lines={2}
+      />
+    }
+    layout="horizontal"
+    title=""
+  />
+</div>
+`;
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx
new file mode 100644
index 0000000000000..e802c5259e5ed
--- /dev/null
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+jest.mock('../../../classes/layers/layer_wizard_registry', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { LayerWizardSelect } from './layer_wizard_select';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+
+const defaultProps = {
+  onSelect: () => {},
+};
+
+describe('LayerWizardSelect', () => {
+  beforeAll(() => {
+    require('../../../classes/layers/layer_wizard_registry').getLayerWizards = async () => {
+      return [
+        {
+          categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
+          description: 'mock wizard without icon',
+          renderWizard: () => {
+            return <div />;
+          },
+          title: 'wizard 1',
+        },
+        {
+          categories: [LAYER_WIZARD_CATEGORY.SOLUTIONS],
+          description: 'mock wizard with icon',
+          icon: 'logoObservability',
+          renderWizard: () => {
+            return <div />;
+          },
+          title: 'wizard 2',
+        },
+      ];
+    };
+  });
+
+  test('Should render layer select after layer wizards are loaded', async () => {
+    const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+    // Ensure all promises resolve
+    await new Promise((resolve) => process.nextTick(resolve));
+    // Ensure the state changes are reflected
+    component.update();
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('Should render loading screen before layer wizards are loaded', () => {
+    const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
index b0c50133ceabb..f0195bc5dee2f 100644
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
@@ -5,26 +5,63 @@
  */
 
 import _ from 'lodash';
-import React, { Component, Fragment } from 'react';
-import { EuiSpacer, EuiCard, EuiIcon } from '@elastic/eui';
-import { EuiLoadingContent } from '@elastic/eui';
+import React, { Component } from 'react';
+import {
+  EuiCard,
+  EuiIcon,
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiLoadingContent,
+  EuiFacetGroup,
+  EuiFacetButton,
+  EuiSpacer,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import { getLayerWizards, LayerWizard } from '../../../classes/layers/layer_wizard_registry';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 interface Props {
   onSelect: (layerWizard: LayerWizard) => void;
 }
 
 interface State {
-  layerWizards: LayerWizard[];
+  activeCategories: LAYER_WIZARD_CATEGORY[];
   hasLoadedWizards: boolean;
+  layerWizards: LayerWizard[];
+  selectedCategory: LAYER_WIZARD_CATEGORY | null;
+}
+
+function getCategoryLabel(category: LAYER_WIZARD_CATEGORY): string {
+  if (category === LAYER_WIZARD_CATEGORY.ELASTICSEARCH) {
+    return i18n.translate('xpack.maps.layerWizardSelect.elasticsearchCategoryLabel', {
+      defaultMessage: 'Elasticsearch',
+    });
+  }
+
+  if (category === LAYER_WIZARD_CATEGORY.REFERENCE) {
+    return i18n.translate('xpack.maps.layerWizardSelect.referenceCategoryLabel', {
+      defaultMessage: 'Reference',
+    });
+  }
+
+  if (category === LAYER_WIZARD_CATEGORY.SOLUTIONS) {
+    return i18n.translate('xpack.maps.layerWizardSelect.solutionsCategoryLabel', {
+      defaultMessage: 'Solutions',
+    });
+  }
+
+  throw new Error(`Unexpected category: ${category}`);
 }
 
 export class LayerWizardSelect extends Component<Props, State> {
   private _isMounted: boolean = false;
 
   state = {
-    layerWizards: [],
+    activeCategories: [],
     hasLoadedWizards: false,
+    layerWizards: [],
+    selectedCategory: null,
   };
 
   componentDidMount() {
@@ -38,9 +75,57 @@ export class LayerWizardSelect extends Component<Props, State> {
 
   async _loadLayerWizards() {
     const layerWizards = await getLayerWizards();
+    const activeCategories: LAYER_WIZARD_CATEGORY[] = [];
+    layerWizards.forEach((layerWizard: LayerWizard) => {
+      layerWizard.categories.forEach((category: LAYER_WIZARD_CATEGORY) => {
+        if (!activeCategories.includes(category)) {
+          activeCategories.push(category);
+        }
+      });
+    });
+
     if (this._isMounted) {
-      this.setState({ layerWizards, hasLoadedWizards: true });
+      this.setState({
+        activeCategories,
+        layerWizards,
+        hasLoadedWizards: true,
+      });
+    }
+  }
+
+  _filterByCategory(category: LAYER_WIZARD_CATEGORY | null) {
+    this.setState({ selectedCategory: category });
+  }
+
+  _renderCategoryFacets() {
+    if (this.state.activeCategories.length === 0) {
+      return null;
     }
+
+    const facets = this.state.activeCategories.map((category: LAYER_WIZARD_CATEGORY) => {
+      return (
+        <EuiFacetButton
+          key={category}
+          isSelected={category === this.state.selectedCategory}
+          onClick={() => this._filterByCategory(category)}
+        >
+          {getCategoryLabel(category)}
+        </EuiFacetButton>
+      );
+    });
+
+    return (
+      <EuiFacetGroup layout="horizontal">
+        <EuiFacetButton
+          key="all"
+          isSelected={!this.state.selectedCategory}
+          onClick={() => this._filterByCategory(null)}
+        >
+          <FormattedMessage id="xpack.maps.layerWizardSelect.allCategories" defaultMessage="All" />
+        </EuiFacetButton>
+        {facets}
+      </EuiFacetGroup>
+    );
   }
 
   render() {
@@ -51,27 +136,41 @@ export class LayerWizardSelect extends Component<Props, State> {
         </div>
       );
     }
-    return this.state.layerWizards.map((layerWizard: LayerWizard) => {
-      const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : undefined;
 
-      const onClick = () => {
-        this.props.onSelect(layerWizard);
-      };
+    const wizardCards = this.state.layerWizards
+      .filter((layerWizard: LayerWizard) => {
+        return this.state.selectedCategory
+          ? layerWizard.categories.includes(this.state.selectedCategory!)
+          : true;
+      })
+      .map((layerWizard: LayerWizard) => {
+        const icon = layerWizard.icon ? <EuiIcon type={layerWizard.icon} size="l" /> : undefined;
 
-      return (
-        <Fragment key={layerWizard.title}>
-          <EuiSpacer size="s" />
-          <EuiCard
-            className="mapLayerAddpanel__card"
-            title={layerWizard.title}
-            icon={icon}
-            onClick={onClick}
-            description={layerWizard.description}
-            layout="horizontal"
-            data-test-subj={_.camelCase(layerWizard.title)}
-          />
-        </Fragment>
-      );
-    });
+        const onClick = () => {
+          this.props.onSelect(layerWizard);
+        };
+
+        return (
+          <EuiFlexItem key={layerWizard.title}>
+            <EuiCard
+              title={layerWizard.title}
+              icon={icon}
+              onClick={onClick}
+              description={layerWizard.description}
+              data-test-subj={_.camelCase(layerWizard.title)}
+            />
+          </EuiFlexItem>
+        );
+      });
+
+    return (
+      <>
+        {this._renderCategoryFacets()}
+        <EuiSpacer size="s" />
+        <EuiFlexGrid columns={2} gutterSize="m">
+          {wizardCards}
+        </EuiFlexGrid>
+      </>
+    );
   }
 }
diff --git a/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss b/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
index 85168d970c6de..2180573ef4583 100644
--- a/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
+++ b/x-pack/plugins/maps/public/connected_components/gis_map/_gis_map.scss
@@ -9,11 +9,11 @@
   overflow: hidden;
 
   > * {
-    width: $euiSizeXXL * 11;
+    width: $euiSizeXXL * 12;
   }
 
   &-isVisible {
-    width: $euiSizeXXL * 11;
+    width: $euiSizeXXL * 12;
     transition: width $euiAnimSpeedNormal $euiAnimSlightResistance;
   }
 }