diff --git a/geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js b/geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js
index 7a3bcf4e4b..9cf2da5b53 100644
--- a/geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js
+++ b/geonode_mapstore_client/client/js/epics/__tests__/gnresource-test.js
@@ -12,7 +12,8 @@ import axios from '@mapstore/framework/libs/ajax';
 import { testEpic } from '@mapstore/framework/epics/__tests__/epicTestUtils';
 import {
     gnViewerSetNewResourceThumbnail,
-    closeInfoPanelOnMapClick
+    closeInfoPanelOnMapClick,
+    closeDatasetCatalogPanel
 } from '@js/epics/gnresource';
 import {
     setResourceThumbnail,
@@ -24,6 +25,7 @@ import { SET_CONTROL_PROPERTY } from '@mapstore/framework/actions/controls';
 import {
     SHOW_NOTIFICATION
 } from '@mapstore/framework/actions/notifications';
+import { newMapInfoRequest } from '@mapstore/framework/actions/mapInfo';
 
 let mockAxios;
 
@@ -132,4 +134,44 @@ describe('gnresource epics', () => {
         );
 
     });
+    it('close dataset panels on map info panel open', (done) => {
+        const NUM_ACTIONS = 1;
+        const testState = {
+            context: {
+                currentContext: {
+                    plugins: {
+                        desktop: [
+                            {name: "Identify"}
+                        ]
+                    }
+                }
+            },
+            mapInfo: {
+                requests: ["something"]
+            },
+            controls: {
+                datasetsCatalog: {
+                    enabled: true
+                }
+            }
+        };
+
+        testEpic(closeDatasetCatalogPanel,
+            NUM_ACTIONS,
+            newMapInfoRequest(),
+            (actions) => {
+                try {
+                    expect(actions.length).toBe(1);
+                    expect(actions[0].type).toBe(SET_CONTROL_PROPERTY);
+                    expect(actions[0].control).toBe("datasetsCatalog");
+                    expect(actions[0].value).toBe(false);
+                } catch (e) {
+                    done(e);
+                }
+                done();
+            },
+            testState
+        );
+
+    });
 });
diff --git a/geonode_mapstore_client/client/js/epics/datasetscatalog.js b/geonode_mapstore_client/client/js/epics/datasetscatalog.js
index cd729da615..e14966c482 100644
--- a/geonode_mapstore_client/client/js/epics/datasetscatalog.js
+++ b/geonode_mapstore_client/client/js/epics/datasetscatalog.js
@@ -8,7 +8,7 @@
 
 import { SET_CONTROL_PROPERTY } from '@mapstore/framework/actions/controls';
 import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout';
-import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
+import { mapLayoutSelector, boundingSidebarRectSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
 import { LayoutSections } from "@js/utils/LayoutUtils";
 
@@ -27,13 +27,21 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) =>
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
+            const boundingSidebarRect = boundingSidebarRectSelector(store.getState());
+            const left = !!store.getState()?.controls?.drawer?.enabled ? mapLayout.left.sm : null;
             const action = updateMapLayout({
                 ...mapLayoutSelector(store.getState()),
                 ...layout,
                 right: mapLayout.right.md,
+                ...(left && {left}),
                 boundingMapRect: {
                     ...(layout?.boundingMapRect || {}),
-                    right: mapLayout.right.md
+                    right: mapLayout.right.md,
+                    ...(left && {left})
+                },
+                boundingSidebarRect: {
+                    ...boundingSidebarRect,
+                    ...layout.boundingSidebarRect
                 }
             });
             return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
diff --git a/geonode_mapstore_client/client/js/epics/gnresource.js b/geonode_mapstore_client/client/js/epics/gnresource.js
index ad38f0b140..cf8f52d429 100644
--- a/geonode_mapstore_client/client/js/epics/gnresource.js
+++ b/geonode_mapstore_client/client/js/epics/gnresource.js
@@ -94,7 +94,7 @@ import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
 import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
 import { updateStyleService } from '@mapstore/framework/api/StyleEditor';
 import { CLICK_ON_MAP, resizeMap } from '@mapstore/framework/actions/map';
-import { purgeMapInfoResults, closeIdentify } from '@mapstore/framework/actions/mapInfo';
+import { purgeMapInfoResults, closeIdentify, NEW_MAPINFO_REQUEST } from '@mapstore/framework/actions/mapInfo';
 import { saveError } from '@js/actions/gnsave';
 import {
     error as errorNotification,
@@ -113,6 +113,7 @@ import { setContext } from '@mapstore/framework/actions/context';
 import { wrapStartStop } from '@mapstore/framework/observables/epics';
 import { parseDevHostname } from '@js/utils/APIUtils';
 import { ProcessTypes } from '@js/utils/ResourceServiceUtils';
+import { catalogClose } from '@mapstore/framework/actions/catalog';
 
 const resourceTypes = {
     [ResourceTypes.DATASET]: {
@@ -579,6 +580,15 @@ export const closeOpenPanels = (action$, store) => action$.ofType(SET_CONTROL_PR
             if (isMapInfoOpen(state)) {
                 setActions.push(purgeMapInfoResults(), closeIdentify());
             }
+            const isDatasetCatalogPanelOpen = get(state, "controls.datasetsCatalog.enabled");
+            const isCatalogOpen = get(state, "controls.metadataexplorer.enabled");
+            const isVisualStyleEditorOpen = get(state, "controls.visualStyleEditor.enabled");
+            if ((isDatasetCatalogPanelOpen || isVisualStyleEditorOpen) && isCatalogOpen) {
+                setActions.push(catalogClose());
+            }
+            if (isDatasetCatalogPanelOpen && isVisualStyleEditorOpen) {
+                setActions.push(setControlProperty('datasetsCatalog', 'enabled', false));
+            }
             const control = oneOfTheOther(action.control);
             if (control?.control) {
                 if (state.controls?.rightOverlay?.enabled === 'DetailViewer' || state.controls?.rightOverlay?.enabled === 'Share') {
@@ -593,6 +603,15 @@ export const closeOpenPanels = (action$, store) => action$.ofType(SET_CONTROL_PR
         return actions.length > 0 ? Observable.of(...actions) : Observable.empty();
     });
 
+/**
+ * Close dataset panels on map info panel open
+ */
+export const closeDatasetCatalogPanel = (action$, store) => action$.ofType(NEW_MAPINFO_REQUEST)
+    .filter(() => isMapInfoOpen(store.getState()) && get(store.getState(), "controls.datasetsCatalog.enabled"))
+    .switchMap(() => {
+        return Observable.of(setControlProperty('datasetsCatalog', 'enabled', false));
+    });
+
 export const gnManageLinkedResource = (action$, store) =>
     action$.ofType(MANAGE_LINKED_RESOURCE)
         .switchMap((action) => {
@@ -636,5 +655,6 @@ export default {
     gnViewerSetNewResourceThumbnail,
     closeInfoPanelOnMapClick,
     closeOpenPanels,
+    closeDatasetCatalogPanel,
     gnManageLinkedResource
 };
diff --git a/geonode_mapstore_client/client/js/epics/layersettings.js b/geonode_mapstore_client/client/js/epics/layersettings.js
index c1a33743c9..1a2aa96612 100644
--- a/geonode_mapstore_client/client/js/epics/layersettings.js
+++ b/geonode_mapstore_client/client/js/epics/layersettings.js
@@ -7,7 +7,7 @@
  */
 
 import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout';
-import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
+import { mapLayoutSelector, boundingSidebarRectSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
 import { SHOW_SETTINGS } from '@mapstore/framework/actions/layers';
 import { LayoutSections } from "@js/utils/LayoutUtils";
@@ -26,6 +26,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) =>
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
+            const boundingSidebarRect = boundingSidebarRectSelector(store.getState());
             const action = updateMapLayout({
                 ...mapLayoutSelector(store.getState()),
                 ...layout,
@@ -33,6 +34,10 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) =>
                 boundingMapRect: {
                     ...(layout?.boundingMapRect || {}),
                     left: mapLayout.left.sm
+                },
+                boundingSideBarReact: {
+                    ...boundingSidebarRect,
+                    ...layout.boundingSidebarRect
                 }
             });
             return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
diff --git a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
index 4e09b6b35b..7c0c80c30d 100644
--- a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
+++ b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js
@@ -23,7 +23,7 @@ import tinycolor from 'tinycolor2';
 import { parseStyleName } from '@js/utils/ResourceUtils';
 import { getStyleProperties } from '@js/api/geonode/style';
 import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout';
-import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout';
+import { mapLayoutSelector, boundingSidebarRectSelector } from '@mapstore/framework/selectors/maplayout';
 import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils";
 import { LayoutSections } from "@js/utils/LayoutUtils";
 
@@ -177,6 +177,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) =>
         })
         .map(({ layout }) => {
             const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } };
+            const boundingSidebarRect = boundingSidebarRectSelector(store.getState());
             const action = updateMapLayout({
                 ...mapLayoutSelector(store.getState()),
                 ...layout,
@@ -184,6 +185,10 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) =>
                 boundingMapRect: {
                     ...(layout?.boundingMapRect || {}),
                     left: mapLayout.left.md
+                },
+                boundingSidebarRect: {
+                    ...boundingSidebarRect,
+                    ...layout.boundingSidebarRect
                 }
             });
             return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop.
diff --git a/geonode_mapstore_client/client/themes/geonode/less/_legend.less b/geonode_mapstore_client/client/themes/geonode/less/_legend.less
index 5cb830813e..ede2b1271b 100644
--- a/geonode_mapstore_client/client/themes/geonode/less/_legend.less
+++ b/geonode_mapstore_client/client/themes/geonode/less/_legend.less
@@ -16,5 +16,13 @@
 .gn-legend-wrapper {
     .ms-layers-tree {
         padding-top: 0;
+        &.legend-tree {
+            .ms-node-layer {
+                ul {
+                    max-height: 500px;
+                    overflow: auto;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/geonode_mapstore_client/static/mapstore/configs/pluginsConfig.json b/geonode_mapstore_client/static/mapstore/configs/pluginsConfig.json
index e56334ef11..029139c9cb 100644
--- a/geonode_mapstore_client/static/mapstore/configs/pluginsConfig.json
+++ b/geonode_mapstore_client/static/mapstore/configs/pluginsConfig.json
@@ -35,6 +35,11 @@
     },
     {
       "name": "DrawerMenu",
+      "defaultConfig": {
+        "menuOptions": {
+          "width": 350
+        }
+      },
       "hidden": true
     },
     {